@font-face{font-family:"Amiri Quran";src:url(fonts/AmiriQuran.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Amiri";src:url(fonts/Amiri-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/SourceSerif4-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/SourceSerif4-Italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/SourceSerif4-LatinExt.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF;font-display:swap}
@font-face{font-family:"Numerals";src:url(fonts/SourceSerif4-600.woff2) format("woff2");unicode-range:U+0030-0039;size-adjust:90%;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/CormorantGaramond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/CormorantGaramond-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#F4EFE3;--paper:#FBF8F1;--ink:#101A20;--muted:#5F6B6E;--line:#E3D9C6;--soft:#EDE5D4;
  --g9:#101A20;--g8:#1B292E;--g7:#22343A;--g6:#2C4247;--g5:#3E5A5E;
  --gold:#8FA3A6;--gold-l:#C8D2D3;--gold-d:#4F736D;--on-g:#F4EFE3;
  --pearl:#F4EFE3;--cream:#E8DDC8;--silver:#C8D2D3;--teal:#668C86;--lav:#74677D;--antique:#B9A06A;
  --hi:rgba(102,140,134,.14);--ar:30px;--r:18px;--rc:12px;
  --shadow:0 1px 2px rgba(16,26,32,.04),0 6px 22px rgba(16,26,32,.05);
  --pattern:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C8D2D3%22%20stroke-width%3D%221%22%20opacity%3D%22.55%22%3E%20%3Cg%20id%3D%22s%22%3E%3Crect%20x%3D%2233%22%20y%3D%2233%22%20width%3D%2230%22%20height%3D%2230%22/%3E%3Crect%20x%3D%2233%22%20y%3D%2233%22%20width%3D%2230%22%20height%3D%2230%22%20transform%3D%22rotate%2845%2048%2048%29%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%227%22/%3E%3C/g%3E%20%3Cuse%20href%3D%22%23s%22%20x%3D%22-48%22%20y%3D%22-48%22/%3E%3Cuse%20href%3D%22%23s%22%20x%3D%2248%22%20y%3D%22-48%22/%3E%3Cuse%20href%3D%22%23s%22%20x%3D%22-48%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23s%22%20x%3D%2248%22%20y%3D%2248%22/%3E%20%3Cpath%20d%3D%22M48%2027.8V0M48%2068.2V96M27.8%2048H0M68.2%2048H96%22/%3E%3C/g%3E%3C/svg%3E");
  --serif:"Numerals","Cormorant",Georgia,"Times New Roman",serif;
  --read:"Source Serif","Numerals",Georgia,"Times New Roman",serif;
}
body,.title,.kicker,.cont-name,.today-line,.ring b,.row .t,.num,.ayah .meta .key,.pl-info b,.votd .ref,.sura-meta .t,.sura-nav b,.tabs button,.sheet h3,.sheet h4{font-variant-numeric:lining-nums}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#101A20;--paper:#16232A;--ink:#F4EFE3;--muted:#9AAAAD;--line:#26363C;--soft:#1B292E;--gold:#8FA3A6;
  --hi:rgba(200,210,211,.10);--shadow:0 1px 0 rgba(244,239,227,.04) inset}}
:root[data-theme=dark]{--bg:#101A20;--paper:#16232A;--ink:#F4EFE3;--muted:#9AAAAD;--line:#26363C;--soft:#1B292E;--gold:#8FA3A6;
  --hi:rgba(200,210,211,.10);--shadow:0 1px 0 rgba(244,239,227,.04) inset}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--g9)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(100px + env(safe-area-inset-bottom));overscroll-behavior-y:contain;min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ar,.ar-name{font-family:"Amiri Quran","Amiri",serif;direction:rtl}
[hidden]{display:none!important}
.wrap{max-width:780px;margin:0 auto;padding:0 16px}

/* ---- top bar: deep green, gold marks ---- */
.bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:8px max(14px,env(safe-area-inset-left));padding-top:calc(8px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--g9) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--on-g);border-bottom:1px solid rgba(200,210,211,.1)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0}
.mark{width:32px;height:32px;color:var(--gold-l);stroke-width:1.5}
.name b{display:block;font-size:22px;font-weight:400;line-height:1.6;color:var(--gold-l)}
.title{flex:1;min-width:0;text-align:center;font:600 21px/1.2 var(--serif);letter-spacing:.02em;color:var(--gold-l);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;flex:none}
.bar .ic:hover{background:rgba(200,210,211,.12)}

/* ---- home: a launcher with a few big buttons, easy for every age ---- */
body{background:var(--bg)}
.launch{max-width:880px;padding-top:22px;padding-bottom:10px}
.hi{margin:4px 4px 14px;font:600 19px/1.3 var(--serif);color:var(--muted);letter-spacing:.02em}
.launch .cont{display:flex;align-items:center;gap:18px;padding:22px 22px;border-radius:24px;text-decoration:none;color:#F4EFE3;
  background:linear-gradient(180deg,#2C4247,#1B292E);box-shadow:0 10px 26px rgba(16,26,32,.18);transition:transform .1s}
.launch .cont:active{transform:scale(.99)}
.launch .cont .pl{width:68px;height:68px;border-radius:50%;background:#F4EFE3;display:grid;place-items:center;flex:none}
.launch .cont .pl svg{width:28px;height:28px;fill:var(--g8);stroke:none;margin-left:4px}
.launch .cont .ct{display:flex;flex-direction:column;min-width:0;gap:4px}
.launch .cont .k{font:600 13px/1.2 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:#C8D2D3}
.launch .cont .k [lang=ar]{font:400 16px/1 "Amiri Quran","Amiri",serif;letter-spacing:0;text-transform:none}
.launch .cont .k [lang=so]{letter-spacing:.06em;text-transform:none;font-size:14px}
.launch .cont b{font:700 30px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.launch .cont small{font-size:16px;color:rgba(244,239,227,.8)}
  background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 10px rgba(16,26,32,.05);text-decoration:none;color:var(--ink);transition:transform .1s,border-color .2s}
.due{display:flex;align-items:center;gap:14px;margin-top:14px;padding:16px 18px;border-radius:20px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit}
.due .dot{margin:0 4px;width:13px;height:13px;box-shadow:0 0 0 5px rgba(210,73,61,.15)}
.due b{display:block;font:700 21px/1.2 var(--serif)}
.due small{color:var(--muted);font-size:15px}
.due .go{margin-left:auto;font-weight:700;color:var(--acc);white-space:nowrap}
.launch .votd{display:block;margin-top:14px;padding:18px 20px;border-radius:20px;text-decoration:none;color:#F4EFE3;
  background:radial-gradient(120% 120% at 50% 0%,#22343A 0%,var(--g8) 60%,var(--g9) 100%)}
.launch .votd .kick{display:block;font:600 12px/1 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:#C8D2D3}
.launch .votd .ar{display:block;font-size:24px;line-height:1.9;margin:10px 0 6px;color:#F4EFE3;text-align:right;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.launch .votd .tr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 16px/1.55 var(--read);color:rgba(244,239,227,.82)}
.launch .votd .ref{display:block;margin-top:8px;font:600 14px/1 var(--serif);letter-spacing:.06em;color:#C8D2D3}
@media (max-width:760px){
  .launch .cont b{font-size:26px}
}
/* ---- one big Home button on every other screen ---- */
.homebtn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 12px;border-radius:14px;background:rgba(244,239,227,.12);
  color:#F4EFE3;text-decoration:none;font-weight:700;font-size:17px;flex:none}
.homebtn svg{width:22px;height:22px;color:var(--gold-l)}
.homebtn:hover{background:rgba(244,239,227,.2)}
.bar .title{text-align:left;padding-left:6px}
/* ---- Read / Listen: big, plain rows ---- */
.pick-top:empty{display:none}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 4px;padding:14px 16px;border-radius:16px;background:var(--paper);border:1px solid var(--line);font-size:16px;text-decoration:none;color:inherit}
.ptop b{font-weight:700}
.plink svg{width:22px;height:22px;color:var(--acc2)}
.plink span:nth-child(2){flex:1;font-weight:700}
.plink .go{font-size:22px;color:var(--acc)}
#pick .search{margin-top:14px}
.plist{margin-top:6px}
.prow{display:flex;align-items:center;gap:14px;width:100%;margin:8px 0;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  text-decoration:none;color:inherit;text-align:left;transition:border-color .2s}
.prow:hover{border-color:rgba(143,163,166,.5)}
.prow .n{width:42px;height:42px;border-radius:50%;background:#E6ECEA;color:var(--acc);display:grid;place-items:center;font:700 17px/1 var(--serif);flex:none}
.prow .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.prow b{font:700 22px/1.15 var(--serif)}
.prow small{color:var(--muted);font-size:15px}
.prow .ar{font:400 28px/1.3 "Amiri Quran","Amiri",serif;color:var(--acc);white-space:nowrap}
.prow .pbtn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;background:#F4EFE3;color:var(--g8)}
.prow .pbtn svg{width:20px;height:20px;fill:currentColor;stroke:currentColor}
.prow.on{border-color:var(--gold);background:linear-gradient(0deg,var(--hi),var(--hi)),var(--paper)}
.prow.on .pbtn{background:var(--g6);color:#F4EFE3}
:root[data-theme=dark] .prow .n{background:#22343A;color:var(--gold-l)}
:root[data-theme=dark] .prow .ar{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .prow .n{background:#22343A;color:var(--gold-l)}:root:not([data-theme=light]) .prow .ar{color:var(--gold-l)}}

/* ---- home: one quiet "pick up where you left off" bar, then the Qur'an itself ---- */
.wrap.home{max-width:1000px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);position:relative}
.kicker{font:600 12px/1.2 var(--serif);letter-spacing:.24em;text-transform:uppercase;color:var(--acc2)}
:root[data-theme=dark] .kicker{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .kicker{color:var(--gold-l)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--rc);
  text-decoration:none;font-weight:600;font-size:16px;border:1px solid var(--line);position:relative;transition:background .2s,box-shadow .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#2C4247,#1B292E);color:#F4EFE3;border-color:#1B292E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(16,26,32,.16)}
.btn.primary:hover{background:linear-gradient(180deg,#34505A,#22343A)}
.btn.ghost{background:transparent;color:var(--acc);border-color:var(--line)}
.btn .arr{width:17px;height:17px;stroke-width:1.7;transition:transform .2s}
.linkbtn{color:var(--acc);font-size:15px;padding:6px 0;font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
:root[data-theme=dark] .linkbtn{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .linkbtn{color:var(--gold-l)}}
  box-shadow:var(--shadow);text-decoration:none;color:inherit;text-align:left;transition:border-color .2s,transform .1s}

/* ---- tabs, search, list ---- */
.tabs{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:var(--rc);margin:34px 0 12px;border:1px solid var(--line)}
.tabs button{flex:1;height:46px;border-radius:9px;font:700 17px/1 var(--serif);letter-spacing:.03em;color:var(--muted);transition:color .2s,background .2s}
.tabs button.on{background:var(--paper);color:var(--acc);box-shadow:0 1px 2px rgba(16,26,32,.08)}
:root[data-theme=dark] .tabs button.on{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tabs button.on{color:var(--gold-l)}}
.search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--rc);padding:0 14px;margin-bottom:6px}
.search svg{color:var(--gold);width:20px}
.search input{flex:1;height:52px;font-size:17px;border:0;background:none;color:var(--ink);font:inherit;outline:none;min-width:0}
.list{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:center;gap:14px;padding:15px 10px;border-bottom:1px solid var(--line);text-decoration:none;border-radius:12px}
.row:hover{background:var(--hi)}
.num{width:42px;height:42px;flex:none;display:grid;place-items:center;font:700 16px/1 var(--serif);position:relative;color:var(--ink)}
.num:before,.num:after{content:"";position:absolute;inset:8px;border:1px solid rgba(143,163,166,.55);border-radius:3px}
.num:after{transform:rotate(45deg)}
.row .mid{flex:1;min-width:0}
.row .t{font:700 22px/1.2 var(--serif)}
.row .s{font-size:14.5px;color:var(--muted)}
.row .ar{font-size:28px;color:var(--acc);white-space:nowrap}
:root[data-theme=dark] .row .ar{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .row .ar{color:var(--gold-l)}}
.empty{color:var(--muted);text-align:center;padding:32px 8px}
.pdf{display:flex;gap:14px;align-items:center;margin-top:18px;text-decoration:none}
.pdf svg{width:28px;height:28px;color:var(--gold)}
.pdf span{display:flex;flex-direction:column}
.pdf small{color:var(--muted)}
.credits{color:var(--muted);font-size:12.5px;line-height:1.7;margin:30px 4px 0;text-align:center}
.credits a{color:var(--muted)}
.credits .orn{color:var(--gold);margin-bottom:10px}

/* ---- reader: a framed mushaf page ---- */
#reader{max-width:820px;margin:0 auto;padding:14px 12px 24px}
.page{background:var(--paper);border-radius:22px;padding:18px clamp(12px,3.5vw,34px) 10px;position:relative;
  border:1px solid var(--gold);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%,transparent),var(--shadow)}
.cartouche{position:relative;height:clamp(78px,17vw,104px);margin:6px auto 4px;max-width:620px}
.cartouche svg{position:absolute;inset:0;width:100%;height:100%}
.cartouche .nm{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(30px,7vw,42px);color:var(--gold-l);padding-bottom:4px}
.sura-meta{text-align:center;margin:6px 0 2px}
.sura-meta .t{font:700 24px/1.2 var(--serif)}
.sura-meta .s{color:var(--muted);font-size:14px}
.bism{font-family:"Amiri Quran",serif;font-size:calc(var(--ar) * 1.08);text-align:center;margin:14px 0 6px;direction:rtl;color:var(--acc)}
:root[data-theme=dark] .bism{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bism{color:var(--gold-l)}}
.ayah{padding:18px 10px 14px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--barh,57px) + 27px);border-radius:14px;transition:background .35s,box-shadow .35s;position:relative}
.ayah:last-child{border-bottom:0}
.ayah.now{background:var(--hi);box-shadow:inset 3px 0 0 var(--gold)}
.ayah .ar{font-size:var(--ar);line-height:2.2;text-align:right;word-spacing:.04em}
.ayah .end{color:var(--gold);white-space:nowrap}
.ayah .tr{margin-top:10px;font:400 17.5px/1.7 var(--read)}
.ayah .tr + .tr{margin-top:10px}
.ayah .tr small{display:block;font:700 12.5px/1.3 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);margin-bottom:2px}
:root[data-theme=dark] .ayah .tr small{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ayah .tr small{color:var(--gold)}}
.ayah .meta{display:flex;align-items:center;gap:2px;margin-top:8px;color:var(--muted)}
.ayah .meta .key{font:700 15px/1 var(--serif);margin-right:auto;letter-spacing:.04em;color:var(--acc2)}
.ayah .meta button{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.ayah .meta button:hover{background:var(--soft);color:var(--acc)}
.ayah .meta svg{width:19px;height:19px}
.ayah .meta .on{color:var(--gold)}
.sajda{font-size:12px;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:1px 6px;margin-left:6px}
.sura-nav{display:flex;justify-content:space-between;gap:10px;margin:18px 0}
.sura-nav a{flex:1;height:auto;padding:10px 16px;background:var(--paper)}
.sura-nav a:last-child{text-align:right;justify-content:flex-end}
.sura-nav small{display:block;color:var(--muted);font-size:12px;font-weight:500}
.sura-nav b{font:700 19px/1.2 var(--serif)}

/* ---- player: green glass, gold button ---- */
.player{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
  width:min(740px,calc(100% - 20px));display:flex;align-items:center;gap:8px;padding:8px 10px 8px 18px;color:var(--on-g);
  background:linear-gradient(180deg,rgba(44,66,71,.96),rgba(16,26,32,.97));border:1px solid rgba(200,210,211,.35);
  border-radius:24px;box-shadow:0 14px 40px rgba(16,26,32,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pl-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pl-info b{font:700 18px/1.2 var(--serif);color:var(--gold-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-info small{color:rgba(244,239,227,.75);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ctrl{display:flex;align-items:center;gap:2px}
.player .ic:hover{background:rgba(200,210,211,.12)}
.ic.big{width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--g9);
  box-shadow:0 0 0 4px rgba(200,210,211,.18)}
.ic.big svg{fill:currentColor;stroke-width:1.2}
.player .i-pause{display:none}
.player.playing .i-play{display:none}
.player.playing .i-pause{display:block}
.player.playing .ic.big{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px rgba(200,210,211,.12)}}
.pill{display:flex;align-items:center;gap:4px;height:40px;padding:0 12px;border-radius:12px;background:rgba(200,210,211,.14);
  color:var(--gold-l);font-weight:700;font-size:14px}
.pill svg{width:18px;height:18px}
.player.loading #plPlay{opacity:.7}

/* ---- sheet ---- */
.sheet{position:fixed;inset:0;z-index:50}
.sheet-bg{position:absolute;inset:0;background:rgba(8,14,17,.45)}
.sheet-box{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);max-height:86vh;overflow:auto;
  background:var(--paper);border-radius:24px 24px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease;
  border-top:2px solid var(--gold)}
@keyframes up{from{transform:translate(-50%,40px);opacity:0}}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 10px}
.sheet h3{margin:6px 0 12px;font:700 26px/1.2 var(--serif);color:var(--acc)}
:root[data-theme=dark] .sheet h3{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sheet h3{color:var(--gold-l)}}
.sheet h4{margin:18px 0 8px;font:700 13px/1.2 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--acc2)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-weight:650;font-size:14px}
.seg button.on{background:linear-gradient(180deg,var(--g6),var(--g8));color:var(--gold-l);border-color:var(--g8)}
.opt{display:flex;align-items:center;gap:10px;width:100%;padding:12px 6px;border-bottom:1px solid var(--line);text-align:left}
.opt.on{color:var(--acc);font-weight:700}
:root[data-theme=dark] .opt.on{color:var(--gold-l)}
.opt .chk{margin-left:auto;opacity:0;color:var(--gold)}
.opt.on .chk{opacity:1}
.range{width:100%;accent-color:var(--gold)}
.sample{font-family:"Amiri Quran",serif;direction:rtl;text-align:center;font-size:var(--ar);margin:6px 0 2px}
.fromto{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.fromto input{width:74px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;text-align:center}
.sheet .btn.primary svg{fill:currentColor;width:16px}

.toast{position:fixed;left:50%;bottom:calc(108px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--g8);color:var(--gold-l);border:1px solid rgba(200,210,211,.4);padding:10px 16px;border-radius:12px;font-size:14px;transition:.25s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- tafsiir ---- */
.pl-bar{position:absolute;left:18px;right:18px;top:-1px;height:4px;border-radius:4px;background:rgba(200,210,211,.18);display:none;cursor:pointer}
.pl-bar:before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.pl-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--gold-l)}
.player.lesson .pl-bar{display:block}
.player.lesson #plRep{display:none}

/* ---- main navigation: Quran / Tafsiir ---- */
.bar a.ic{color:var(--gold-l);text-decoration:none}

/* ---- tafsiir pages ---- */
#tafsir{padding-bottom:20px}
.thero{position:relative;text-align:center;color:var(--on-g);padding:34px 16px 38px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,var(--g6) 0%,var(--g8) 60%,var(--g9) 100%);border-bottom:1px solid rgba(200,210,211,.4)}
.thero:before{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:120px;opacity:.08}
.thero > *{position:relative}
.thero .kick{font:600 13px/1 var(--serif);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l)}
.thero h1{font:700 clamp(30px,7vw,44px)/1.15 var(--serif);color:var(--gold-l);margin:10px 0 8px}
.thero p{margin:0 auto;max-width:560px;color:rgba(244,239,227,.85)}
.tlist{padding-top:18px}
.scholar{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:12px;border-radius:18px;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.scholar .avatar{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--g6),var(--g8));color:var(--gold-l);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--gold)}
.scholar .who{flex:1;min-width:0;display:flex;flex-direction:column}
.scholar b{font:700 22px/1.2 var(--serif)}
.scholar small{color:var(--muted);font-size:13.5px}
.scholar .go{color:var(--acc);font-weight:700;white-space:nowrap}
.scholar .lang{font:600 12px/1.3 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:2px}
:root[data-theme=dark] .scholar .lang{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .scholar .lang{color:var(--gold-l)}}
.scholar .wk{font:italic 600 17px/1.3 var(--serif);color:var(--acc2)}
.thero .work{font:italic 600 19px/1.3 var(--serif);color:var(--on-g);margin:-2px 0 8px}
.center{text-align:center}
.tcont{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:18px 0 12px;text-align:left}
.tcont b{font:700 21px/1.25 var(--serif)}
.tcont small{color:var(--muted)}
.lessons{list-style:none;margin:8px 0 0;padding:0}
.lhead{margin:18px 4px 6px;font:700 19px/1.2 var(--serif);color:var(--acc);display:flex;align-items:center;gap:10px}
.lhead .ar{font-size:24px;color:var(--gold)}
:root[data-theme=dark] .lhead{color:var(--gold-l)}
.lesson-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border-radius:14px;border:1px solid var(--line);background:var(--paper);margin-bottom:8px;text-align:left}
.lesson-row:hover{border-color:var(--gold)}
.lesson-row.on{border-color:var(--gold);background:var(--hi)}
.lesson-row .lnum{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--gold);font:700 14px/1 var(--serif);color:var(--acc2)}
.lesson-row .mid{flex:1;min-width:0;display:flex;flex-direction:column}
.lesson-row b{font:700 18px/1.25 var(--serif)}
.lesson-row small{color:var(--muted);font-size:13px}
.lesson-row .pl{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--g6),var(--g8));color:var(--gold-l)}
.lesson-row .pl svg{width:18px;height:18px;fill:currentColor}

/* ---- mushaf: 15-line Madinah pages in the King Fahd Complex fonts ---- */
@font-face{font-family:"mbsml";src:url(mushaf/f/bsml.woff2) format("woff2")}
body.mh-on{padding-bottom:0;background:var(--mbg,#EDE5D4)}
body.mh-on #bar,body.mh-on #player{display:none!important}
#mushaf{--mbg:#E9E0CB;--mpaper:#FFFBF0;--mink:#1A1510;--mframe:#B8903A;--mframe2:#668C86;--mmuted:#8A7B5E;--mhead:#2C4247;--mhbg:#F3EBD6;
  min-height:100vh;background:var(--mbg);color:var(--mink);padding:calc(64px + env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom));transition:background .3s}
#mushaf[data-mt=sepia]{--mbg:#DCCBA6;--mpaper:#F4E6C6;--mink:#35281A;--mframe:#9C7426;--mframe2:#6B4E1E;--mmuted:#7C6645;--mhead:#5E4318;--mhbg:#EBD9B2}
#mushaf[data-mt=night]{--mbg:#0B1317;--mpaper:#15232A;--mink:#D9D0B8;--mframe:#6F7F83;--mframe2:#3E5A5E;--mmuted:#8FA3A6;--mhead:#C8D2D3;--mhbg:#1B292E}
.mp{position:relative;width:var(--pw);height:var(--ph);margin:0 auto var(--gap);background:var(--mpaper);border-radius:4px;direction:rtl;
  box-shadow:0 1px 2px rgba(40,30,10,.10),0 10px 28px rgba(40,30,10,.10);padding:var(--pp);contain:layout paint style;transition:background .3s}
#mushaf[data-mt=night] .mp{box-shadow:0 0 0 1px #1E2D33}
.mp:before{content:"";position:absolute;inset:calc(var(--pp)*.42);border:1.5px solid var(--mframe);border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--mpaper),inset 0 0 0 4.2px var(--mframe2)}
.mp-head{display:flex;justify-content:space-between;align-items:center;height:var(--hh);padding:0 .4em;font:600 var(--hf)/1 "Amiri Quran","Amiri",serif;color:var(--mhead)}
.mp-body{position:relative;height:calc(var(--lh)*15);font-size:var(--fs)}
.mp-foot{display:flex;justify-content:center;align-items:center;height:var(--fh)}
.mp-foot b{min-width:2.4em;height:2.4em;display:grid;place-items:center;padding:0 .5em;border:1px solid var(--mframe);border-radius:99px;
  font:600 var(--hf)/1 "Amiri Quran","Amiri",serif;color:var(--mhead)}
.ln{height:var(--lh);display:flex;justify-content:space-between;align-items:center;white-space:nowrap;line-height:1}
.ln.c{justify-content:center;gap:.06em}
.ln span{display:block}
.sh{height:var(--lh);position:relative;display:flex;align-items:center;justify-content:center}
.sh.x2{height:calc(var(--lh)*2)}
.sh svg{position:absolute;left:0;top:10%;width:100%;height:80%;stroke:none}
.sh svg .o{fill:var(--mhbg);stroke:var(--mframe);stroke-width:1.4}
.sh svg .i{fill:none;stroke:var(--mframe2);stroke-width:1}
.sh svg .d{fill:var(--mframe)}
.sh b{position:relative;font:400 calc(var(--lh)*.46)/1 "Amiri Quran","Amiri",serif;color:var(--mhead);transform:translateY(-12%)}
.bs{height:var(--lh);display:flex;align-items:center;justify-content:center;font:calc(var(--fs)*1.02)/1 "mbsml";color:var(--mink)}
.mp.first .mp-body{display:flex;flex-direction:column;justify-content:center;align-items:center}
.mp.first .mp-body .inner{width:94%;padding:calc(var(--lh)*.45) 4% calc(var(--lh)*.35);border:1.5px solid var(--mframe);border-radius:48% 48% 14px 14px / 22% 22% 14px 14px;
  box-shadow:inset 0 0 0 4px var(--mpaper),inset 0 0 0 5px var(--mframe2)}
.mp.first .ln{justify-content:center;gap:.08em}
.mp.first .sh{margin-bottom:calc(var(--lh)*.2)}
.mp.wait .mp-body > *{visibility:hidden}
.mp.wait .mp-body{background:repeating-linear-gradient(180deg,transparent 0 calc(var(--lh)*.36),var(--mhbg) calc(var(--lh)*.36) calc(var(--lh)*.62),transparent calc(var(--lh)*.62) var(--lh));opacity:.7}
.mp .mk{position:absolute;top:calc(var(--pp)*.42 - 2px);left:calc(var(--pp) + 6%);width:14px;height:calc(var(--pp)*1.3 + 10px);background:#74677D;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:0 2px 3px rgba(0,0,0,.2)}
/* bars */
.mh-bar{position:fixed;left:0;right:0;z-index:30;display:flex;align-items:center;gap:4px;padding:6px 8px;color:var(--on-g);
  background:rgba(16,26,32,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .28s ease}
.mh-top{top:0;padding-top:calc(6px + env(safe-area-inset-top));border-bottom:1px solid rgba(200,210,211,.25)}
.mh-bottom{bottom:0;flex-direction:column;align-items:stretch;gap:2px;padding-bottom:calc(6px + env(safe-area-inset-bottom));border-top:1px solid rgba(200,210,211,.25)}
#mushaf.calm .mh-top{transform:translateY(-110%)}
#mushaf.calm .mh-bottom{transform:translateY(110%)}
.mh-bar .ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--gold-l)}
.mh-bar .ic:hover{background:rgba(200,210,211,.12)}
.mh-bar .ic.on{background:rgba(200,210,211,.18)}
.mh-title{flex:1;min-width:0;text-align:center;line-height:1.15}
.mh-title b{display:block;font:400 20px/1.7 "Amiri Quran","Amiri",serif;margin:-6px 0 -4px;color:var(--gold-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-title small{font:600 13px/1.2 var(--serif);letter-spacing:.06em;color:rgba(244,239,227,.8)}
.mh-row{display:flex;align-items:center;gap:6px;max-width:640px;width:100%;margin:0 auto}
.mh-row input[type=range]{flex:1;accent-color:var(--gold-l);direction:rtl;height:28px}
.mh-row .pg{min-width:84px;text-align:center;font:700 15px/1 var(--serif);color:var(--gold-l);letter-spacing:.03em}
.mh-auto{flex:1;display:flex;align-items:center;justify-content:center;gap:4px}
.mh-auto .play{width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--g9);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.mh-auto .play svg{width:22px;height:22px;fill:currentColor;stroke:none}
.mh-auto .play .i-pause{display:none}
#mushaf.auto .mh-auto .play .i-pause{display:block}
#mushaf.auto .mh-auto .play .i-play{display:none}
.mh-sp{min-width:74px;text-align:center;line-height:1.1}
.mh-sp b{display:block;font:700 16px/1.1 var(--serif);color:var(--gold-l)}
.mh-sp small{font-size:11.5px;color:rgba(244,239,227,.75)}
.mh-float{position:fixed;z-index:29;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;
  display:none;place-items:center;background:rgba(16,26,32,.72);color:var(--gold-l);border:1px solid rgba(200,210,211,.35);box-shadow:0 4px 14px rgba(0,0,0,.25)}
#mushaf.calm.auto .mh-float{display:grid}
.mh-float svg{fill:currentColor;stroke:none;width:20px;height:20px}
.mh-hint{position:fixed;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 18px;border-radius:14px;background:rgba(16,26,32,.9);color:var(--gold-l);
  font:700 18px/1.3 var(--serif);pointer-events:none;opacity:0;transition:opacity .3s}
.mh-hint.show{opacity:1}
/* go-to sheet */
.mtabs{display:flex;gap:6px;margin:0 0 10px;overflow-x:auto}
.mtabs button{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-weight:650;font-size:14px;white-space:nowrap}
.mtabs button.on{background:linear-gradient(180deg,var(--g6),var(--g8));color:var(--gold-l);border-color:var(--g8)}
.mlist{max-height:56vh;overflow-y:auto;margin:0 -6px;padding:0 6px}
.mrow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left}
.mrow .n{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--gold);font:700 14px/1 var(--serif);color:var(--acc2)}
.mrow .m{flex:1;min-width:0}
.mrow .m b{display:block;font:700 18px/1.2 var(--serif)}
.mrow .m small{color:var(--muted);font-size:13px}
.mrow .a{font:24px/1.2 "Amiri Quran","Amiri",serif;color:var(--acc);direction:rtl}
.mrow.on{background:var(--hi);border-radius:10px}
:root[data-theme=dark] .mrow .a{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mrow .a{color:var(--gold-l)}}
.mgo{display:flex;gap:8px;align-items:center;margin:6px 0 4px}
.mgo input[type=number]{width:110px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 20px/1 var(--serif);text-align:center}
.mlink{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 14px;border-radius:999px;border:1px solid var(--gold);color:var(--acc);
  text-decoration:none;font-weight:700;font-size:14.5px}
.mlink svg{width:18px;height:18px;color:var(--acc2)}
:root[data-theme=dark] .mlink{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mlink{color:var(--gold-l)}}
/* ---- Tafsir Ibn Kathir (Arabic text) ---- */
.thero .ikh{font:400 clamp(34px,8vw,48px)/1.8 "Amiri Quran","Amiri",serif;margin:0 0 6px}
.thero.small{padding:24px 16px 28px}
.mlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ik-tools{position:sticky;top:var(--barh,57px);z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;margin-bottom:6px;background:var(--bg);border-bottom:1px solid var(--line)}
.ik-tools label{font-weight:700;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
.ik-tools select{height:38px;min-width:70px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 15px/1 var(--serif);padding:0 8px}
.ik-tools .sp{flex:1}
.ik-tools .gbtn{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--acc);font-weight:700;font-size:14px;display:inline-flex;align-items:center;text-decoration:none}
:root[data-theme=dark] .ik-tools .gbtn{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ik-tools .gbtn{color:var(--gold-l)}}
.ikg{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 10px;margin:14px 0;box-shadow:var(--shadow)}
.ik-ref{display:inline-block;font:700 13px/1 var(--serif);letter-spacing:.08em;color:var(--acc2);border:1px solid var(--gold);border-radius:99px;padding:5px 10px;margin-bottom:6px}
.ik-q{font-size:calc(var(--iks) * 1.3);line-height:2.1;text-align:right;color:var(--acc);padding:6px 0 12px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.ik-q .end{color:var(--gold);white-space:nowrap}
:root[data-theme=dark] .ik-q{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ik-q{color:var(--gold-l)}}
.ik-t{font:var(--iks)/2 "Amiri","Amiri Quran","Traditional Arabic","Noto Naskh Arabic",serif;text-align:justify;color:var(--ink)}
.ik-t p{margin:0 0 .8em}
.ik-t .qq{color:var(--acc);font-family:"Amiri Quran","Amiri",serif}
:root[data-theme=dark] .ik-t .qq{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ik-t .qq{color:var(--gold-l)}}
.card.tcont{display:block;text-decoration:none;color:inherit}
.scholar .wk.ar{font:400 19px/1.5 "Amiri","Amiri Quran",serif;font-style:normal;direction:rtl;text-align:left}
.thero .hlink{color:var(--gold-l);font-weight:700}
/* ---- memory review ---- */
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin:0 6px 0 0;flex:none}
[dir=rtl] .dot{margin:0 0 0 6px}
.dot.g{background:#2E9E5B}.dot.y{background:#E0AE2B}.dot.r{background:#D2493D}.dot.x{background:transparent;border:2px solid var(--muted)}
.mlang{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(11,19,23,.35);border:1px solid rgba(200,210,211,.3);margin-bottom:12px}
.mlang button{height:32px;padding:0 12px;border-radius:9px;color:var(--on-g);font-weight:700;font-size:14px}
.mlang button.on{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--g9)}
.memsess .mlang{background:var(--paper);border-color:var(--line);margin:0}
.memsess .mlang button{color:var(--ink)}
.memsess .mlang button.on{color:var(--g9)}
#memory .thero h1{margin-top:4px}
.memtoday,.memadd,.mdone{margin:16px 0}
.memtoday{margin-top:-28px}
.mtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 16px}
.mt{border-radius:14px;padding:12px 8px;text-align:center;border:1px solid var(--line);background:var(--soft)}
.mt b{display:block;font:700 34px/1.1 var(--serif)}
.mt span{font-size:13.5px;color:var(--muted);font-weight:600}
.mt.r b{color:#C23B30}.mt.y b{color:#B8870F}.mt.g b{color:#23824A}
.mt.r{box-shadow:inset 0 3px 0 #D2493D}.mt.y{box-shadow:inset 0 3px 0 #E0AE2B}.mt.g{box-shadow:inset 0 3px 0 #2E9E5B}
.btn.big{width:100%;height:54px;font-size:18px}
.btn.big svg{fill:currentColor;stroke:none;width:18px}
.mform{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin:10px 0 12px}
.mform label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.mform select{height:44px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 15px/1 system-ui,sans-serif;padding:0 8px;min-width:0}
@media (max-width:520px){.mform{grid-template-columns:1fr 1fr}.mform label:first-child{grid-column:1/-1}}
.mtotal{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap}
.memsess{padding-top:14px;padding-bottom:30px}
.mtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mcount{font:700 18px/1 var(--serif);color:var(--acc2)}
.mprog{height:6px;border-radius:6px;background:var(--soft);margin:12px 0 14px;overflow:hidden}
.mprog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));border-radius:6px;transition:width .3s}
.mcardx{padding:18px}
.mref{display:flex;align-items:center;font:700 16px/1.2 var(--serif);color:var(--acc);margin-bottom:6px}
.mayah{position:relative;font-size:clamp(26px,6.5vw,36px);line-height:2.2;text-align:center;padding:10px 4px 14px;min-height:120px}
.mayah .end{color:var(--gold)}
.mayah.hid{color:transparent;text-shadow:0 0 18px rgba(44,66,71,.35);user-select:none}
.mayah.hid .end{color:transparent}
.mveil{display:none;position:absolute;inset:0;border-radius:14px;background:repeating-linear-gradient(135deg,var(--soft) 0 12px,var(--paper) 12px 24px);
  color:var(--acc);font:700 16px/1.5 system-ui,sans-serif;padding:16px;border:1.5px dashed var(--gold)}
.mayah.hid .mveil{display:grid;place-items:center}
.macts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.macts button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:13px;color:var(--acc)}
.macts button svg{width:24px;height:24px}
.macts button.on{background:linear-gradient(180deg,var(--g6),var(--g8));color:var(--gold-l);border-color:var(--g8)}
.macts #mRec.on{background:#C23B30;color:#fff;border-color:#C23B30}
.macts #mMine{grid-column:1/-1;flex-direction:row;justify-content:center}
.macts #mListen svg,.macts #mMine svg{fill:currentColor;stroke:none}
:root[data-theme=dark] .macts button,:root[data-theme=dark] .mref{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .macts button,:root:not([data-theme=light]) .mref{color:var(--gold-l)}}
.mrate{margin-top:16px;text-align:center}
.mrate p{font:700 20px/1.3 var(--serif);margin:0 0 10px}
.mrate > div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mrate button{display:flex;align-items:center;justify-content:center;height:56px;border-radius:14px;font-weight:800;font-size:15px;border:2px solid;background:var(--paper)}
.mrate .g{border-color:#2E9E5B;color:#23824A}.mrate .y{border-color:#E0AE2B;color:#9A7108}.mrate .r{border-color:#D2493D;color:#B23328}
.mrate button:active{transform:scale(.97)}
.mdone{text-align:center;padding:26px 18px}
.mdone-star{font:40px/1 "Amiri Quran",serif;color:var(--gold)}
.mdone h2{font:700 28px/1.2 var(--serif);margin:8px 0 4px;color:var(--acc)}
.ayah .meta .memb i{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);display:block}
.ayah .meta .memb[data-c=g] i{background:#2E9E5B;border-color:#2E9E5B}
.ayah .meta .memb[data-c=y] i{background:#E0AE2B;border-color:#E0AE2B}
.ayah .meta .memb[data-c=r] i{background:#D2493D;border-color:#D2493D}
#memCardS{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap}
#memCardS .mc{display:inline-flex;align-items:center;white-space:nowrap}


/* ---- show only what is needed right now ---- */
.ayah .meta button{display:none}
.ayah.open .meta button{display:grid}
.ayah:not(.open) .meta .memb[data-c=g],.ayah:not(.open) .meta .memb[data-c=y],.ayah:not(.open) .meta .memb[data-c=r]{display:grid}
.ayah:not(.open) .meta .memb{pointer-events:none}
.ayah{cursor:pointer;transition:background .2s}
.ayah.open{background:var(--hi)}
.player{transition:bottom .25s ease}
/* ---- English tafsir (Al-Mukhtasar): same reader, left to right ---- */
.ikw.en .ik-t{font:var(--iks)/1.75 var(--read);text-align:left;color:var(--ink)}
.ikw.en .ik-t p{margin:0 0 .6em}

/* ---- the four app buttons: always at the top, like app icons on a phone ---- */
.appnav{order:5;flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,130px));justify-content:center;gap:6px;margin:2px 0 0;padding:2px 0 0}
.appnav a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--on-g);padding:3px 2px;border-radius:14px;-webkit-tap-highlight-color:transparent}
.appnav .ai{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;position:relative;flex:none;transition:transform .12s,box-shadow .2s;
  box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.14)}
.appnav .ai:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 52%);pointer-events:none}
.appnav .ai svg{width:25px;height:25px;stroke-width:1.9;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.appnav .c1{background:linear-gradient(150deg,#3BBF86 0%,#0E7A4E 55%,#0A5C3B 100%)}
.appnav .c2{background:linear-gradient(150deg,#5AA8F0 0%,#2667C4 55%,#1B4C96 100%)}
.appnav .c3{background:linear-gradient(150deg,#FFD36B 0%,#E3A12B 55%,#B97611 100%)}
.appnav .c4{background:linear-gradient(150deg,#F07A6A 0%,#C9433A 55%,#932A2A 100%)}
.appnav b{font:700 15px/1 var(--serif);letter-spacing:.02em}
.appnav .l2{display:none}
.appnav a:active .ai{transform:scale(.92)}
.appnav a.on b{color:var(--gold-l)}
.appnav a.on .ai{box-shadow:0 0 0 2px var(--g9),0 0 0 4px var(--gold-l),0 3px 8px rgba(0,0,0,.3)}
body.at-home:not(.hmini) .appnav{grid-template-columns:repeat(4,minmax(0,180px));gap:8px;padding:12px 0 10px}
body.at-home:not(.hmini) .appnav a{gap:6px}
body.at-home:not(.hmini) .appnav .ai{width:70px;height:70px;border-radius:21px}
body.at-home:not(.hmini) .appnav .ai svg{width:37px;height:37px;stroke-width:1.8}
body.at-home:not(.hmini) .appnav b{font-size:22px;margin-top:4px}
body.at-home:not(.hmini) .appnav .l2{display:flex;flex-direction:column;align-items:center;gap:1px}
body.at-home:not(.hmini) .appnav .l2 [lang=ar]{font:400 23px/1.55 "Amiri Quran","Amiri",serif;color:var(--gold-l)}
body.at-home:not(.hmini) .appnav .l2 [lang=so]{font-size:15px;font-weight:700;color:rgba(244,239,227,.88)}
@media (max-width:420px){
  body.at-home:not(.hmini) .appnav{gap:2px}
  body.at-home:not(.hmini) .appnav .ai{width:62px;height:62px;border-radius:19px}
  body.at-home:not(.hmini) .appnav .ai svg{width:33px;height:33px}
  body.at-home:not(.hmini) .appnav b{font-size:19.5px}
  body.at-home:not(.hmini) .appnav .l2 [lang=ar]{font-size:21px}
  body.at-home:not(.hmini) .appnav .l2 [lang=so]{font-size:14px}
}
/* ---- Continue: the circle takes the colour of what you were doing ---- */
.launch .cont .pl.c1{background:linear-gradient(150deg,#3BBF86,#0A5C3B)}
.launch .cont .pl.c2{background:linear-gradient(150deg,#5AA8F0,#1B4C96)}
.launch .cont .pl.c3{background:linear-gradient(150deg,#FFD36B,#B97611)}
.launch .cont .pl.c4{background:linear-gradient(150deg,#F07A6A,#932A2A)}
.launch .cont .pl.c1,.launch .cont .pl.c2,.launch .cont .pl.c3,.launch .cont .pl.c4{box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.launch .cont .pl.c1 svg,.launch .cont .pl.c2 svg,.launch .cont .pl.c3 svg,.launch .cont .pl.c4 svg{fill:#fff}
/* ---- home: the Mushaf page on show, like an open book on a reading desk ---- */
.hmush{--mbg:#E9E0CB;--mpaper:#FFFBF0;--mink:#1A1510;--mframe:#B8903A;--mframe2:#668C86;--mmuted:#8A7B5E;--mhead:#2C4247;--mhbg:#F3EBD6;
  margin-top:18px;padding:10px 0 10px;background:var(--mbg);color:var(--mink);border-top:1px solid rgba(143,163,166,.25);border-bottom:1px solid rgba(143,163,166,.25)}
.hmush[data-mt=sepia]{--mbg:#DCCBA6;--mpaper:#F4E6C6;--mink:#35281A;--mframe:#9C7426;--mframe2:#6B4E1E;--mmuted:#7C6645;--mhead:#5E4318;--mhbg:#EBD9B2}
.hmush[data-mt=night]{--mbg:#0B1317;--mpaper:#15232A;--mink:#D9D0B8;--mframe:#6F7F83;--mframe2:#3E5A5E;--mmuted:#8FA3A6;--mhead:#C8D2D3;--mhbg:#1B292E}
.hmush[data-mt=night] .mp{box-shadow:0 0 0 1px #1E2D33}
.launch[hidden] + .hmush{margin-top:0;border-top:0}
.hm-head{display:flex;align-items:center;gap:12px;padding:0 14px 8px}
.hm-cap{flex:1 1 auto;min-width:0;font:600 13px/1.2 var(--serif);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mmuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* one quiet bar holds the three buttons: turn back, whole screen, turn on */
.hm-acts{flex:none;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:24px;
  background:var(--mpaper);border:1px solid var(--mframe);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.hm-acts button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--mhead);
  transition:background .15s ease,transform .12s ease}
.hm-acts button svg{width:21px;height:21px;stroke-width:2.2}
.hm-acts button:hover{background:var(--mhbg)}
.hm-acts button:active{transform:scale(.92)}
.hm-acts button:disabled{opacity:.25;cursor:default}
.hm-acts button:disabled:hover{background:none}
.hm-full svg{width:19px;height:19px}
.hm-stage{position:relative;display:flex;justify-content:center}
.hm-book{position:relative;display:inline-block}
.hm-pages{display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;cursor:pointer}
.hm-pages .mp{margin:0;flex:none}
@media (max-width:560px){.hm-head{padding:0 10px 6px;gap:8px}.hm-cap{font-size:12px}
  .hm-acts button{width:38px;height:38px}}
/* edge to edge: the book uses the whole width of the screen, on every device */
@media (min-width:1024px){body:not(.mh-on) .hmush{width:calc(100vw - 26px);margin-left:calc(50% - 50vw + 13px)}}
/* the desk: light falling on an open Mushaf, so the page stands out instead of floating flat */
.hmush{position:relative;overflow:hidden}
.hmush:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 95% at 50% 38%,rgba(255,255,255,.30),rgba(255,255,255,0) 52%,rgba(0,0,0,.16) 100%)}
.hmush[data-mt=night]:before{background:radial-gradient(130% 95% at 50% 38%,rgba(200,210,211,.10),rgba(0,0,0,0) 50%,rgba(0,0,0,.40) 100%)}
.hm-stage{z-index:1}
@media (min-width:1000px){.hmush:not([data-mt=night]) .mp{box-shadow:0 26px 60px rgba(0,0,0,.30),0 0 0 1px rgba(185,160,106,.32)}}
/* ---- home: the big buttons scroll away, then a small bar with the same buttons stays at the top ---- */
body.at-home .bar{position:relative}
body.at-home.hmini{padding-top:var(--hbig,0px)}
body.at-home.hmini .bar{position:fixed;left:0;right:0;top:0;animation:barin .22s ease-out}
@keyframes barin{from{transform:translateY(-100%)}}
/* ---- one app, not a website: on a computer or tablet the app sits in the middle like a phone app ---- */
:root{--appw:500px}
.bar,.appnav,button,.cont,.prow,.hm-bar,.ptop,.scholar,.mh-bar{-webkit-user-select:none;user-select:none}
a,button{touch-action:manipulation}
#home:not([hidden]),#pick:not([hidden]),#reader:not([hidden]),#tafsir:not([hidden]),#memory:not([hidden]){animation:vin .2s ease-out}
@keyframes vin{from{opacity:.35}}
.inst{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:19px;background:rgba(244,239,227,.12);
  color:var(--gold-l);font-weight:700;font-size:14px;flex:none;border:1px solid rgba(200,210,211,.35)}
.inst svg{width:18px;height:18px}
body:not(.at-home) .inst{display:none}
.sheet .credits{font-size:13px;line-height:1.6;color:var(--muted);text-align:left;margin:4px 0 0;padding:0}
.sheet .credits .orn{display:none}
.bigbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:26px;margin:4px 0 6px;
  background:linear-gradient(150deg,#3BBF86,#0A5C3B);color:#fff;font-weight:700;font-size:17px}
.bigbtn svg{width:20px;height:20px}
@media (min-width:560px){
  html{background:radial-gradient(1200px 800px at 50% 0%,#1B292E 0%,#101A20 55%,#0B1317 100%) fixed;scrollbar-width:thin;scrollbar-color:rgba(200,210,211,.35) transparent}
  body:not(.mh-on){width:var(--appw);margin:0 auto;box-shadow:0 0 0 1px rgba(200,210,211,.18),0 30px 90px rgba(0,0,0,.5)}
  body.at-home.hmini:not(.mh-on) .bar{left:calc(50% - var(--appw) / 2);right:auto;width:var(--appw)}
  body:not(.mh-on) .player{width:calc(var(--appw) - 20px)}
  body:not(.mh-on) .sheet-box{width:var(--appw)}
}
/* ---- Somali meaning & notes ---- */
.sy-tr sup{color:var(--acc2);font-weight:700;font-size:.68em;margin-left:1px}
.sy-n{margin:10px 0 6px;padding:10px 14px;border-radius:12px;background:var(--soft);border-left:3px solid var(--gold);
  font:calc(var(--iks) * .86)/1.65 var(--read);color:var(--ink)}
.sy-n b{color:var(--acc2)}
:root[data-theme=dark] .sy-n b,:root[data-theme=dark] .sy-tr sup{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sy-n b,:root:not([data-theme=light]) .sy-tr sup{color:var(--gold-l)}}
/* ---- surah page: the tafsir choices in one row ---- */
.tchips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:12px}
.tchips span{width:100%;text-align:center;font:600 12px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--acc2);margin-bottom:2px}
.tchips a{height:38px;display:inline-flex;align-items:center;padding:0 14px;border-radius:19px;border:1px solid var(--line);background:var(--paper);
  color:var(--acc);font-weight:700;font-size:14.5px;text-decoration:none}
:root[data-theme=dark] .tchips a,:root[data-theme=dark] .tchips span{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tchips a,:root:not([data-theme=light]) .tchips span{color:var(--gold-l)}}
/* ---- Mushaf: two pages open side by side on wide screens ---- */
#mhPages.two{display:grid;grid-template-columns:repeat(2,var(--pw));justify-content:center;column-gap:var(--gap);direction:rtl}
#mhPages.two .mp{margin:0 0 var(--gap)}
/* ---- reading: the top bar steps out of the way ---- */
.bar{transition:transform .25s ease}
body.rhide.reading .bar,body.rhide.hmini .bar{transform:translateY(-110%)}
body.rhide .ik-tools{top:0}
/* ---- Mushaf: the auto-scroll button says what it does: an arrow going down and a word ---- */
.mh-auto .play{width:auto;min-width:52px;padding:0 20px 0 14px;border-radius:26px;display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:16px;white-space:nowrap}
.mh-auto .play .i-play{fill:none;stroke:currentColor;stroke-width:2.6;width:22px;height:22px;animation:mhdown 1.6s ease-in-out infinite}
@keyframes mhdown{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
#mushaf.auto .mh-auto .play{padding:0 18px 0 14px}
@media (max-width:400px){.mh-auto .play{padding:0 14px 0 10px;font-size:15px}.mh-sp{min-width:60px}.mh-auto{gap:2px}}
/* ---- use without internet ---- */
.offw{padding-top:16px;padding-bottom:20px}
.offrow{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:10px 0;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.offrow.done{border-color:rgba(30,114,88,.35)}
.offrow .ot{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.offrow b{font:700 19px/1.2 var(--serif)}
.offrow small{color:var(--muted);font-size:14.5px}
.obar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.obar i{display:block;height:100%;background:linear-gradient(90deg,#3BBF86,#0E7A4E);border-radius:3px;transition:width .3s}
.offrow.done .obar{display:none}
.obtn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:22px;background:linear-gradient(150deg,#3BBF86,#0A5C3B);
  color:#fff;font-weight:700;font-size:15px;flex:none;text-decoration:none;cursor:pointer}
.obtn svg{width:18px;height:18px;stroke-width:2.2}
.obtn.ok{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.obtn.stop{background:#C9433A}
.obtn:disabled{opacity:.4;cursor:default}
.offw .note{color:var(--muted);font-size:14px;margin:12px 4px 0}
.offw .bigbtn{margin-bottom:6px}
/* Listen page: a small save button beside each surah */
.lrow{display:flex;align-items:center;gap:8px}
.lrow .prow{flex:1;min-width:0}
.sv{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);color:var(--acc);cursor:pointer}
.sv svg{width:20px;height:20px;stroke-width:2.2}
.sv.ok{background:#E6ECEA;border-color:rgba(102,140,134,.4)}
.sv.busy{font:700 12px/1 var(--serif);color:var(--acc);border-color:var(--gold)}
:root[data-theme=dark] .sv{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sv{color:var(--gold-l)}}
.bigbtn{height:auto;min-height:52px;padding:10px 20px;text-align:center;line-height:1.3}
.offrow.done small{color:#1E7258}
:root[data-theme=dark] .offrow.done small{color:#6FCF9F}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .offrow.done small{color:#6FCF9F}}
.bigbtn svg{flex:none;width:22px;height:22px}
/* ---- about ---- */
.aboutw{padding-top:18px;padding-bottom:28px}
.aboutw .ab{font:400 18px/1.7 var(--read);margin:0 0 14px}
.aboutw h4{font:600 13px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--acc2);margin:26px 0 8px}
.aboutw .credits{font-size:13.5px;line-height:1.65;color:var(--muted);text-align:left;margin:0;padding:0}
.aboutw .credits .orn{display:none}
.aboutlink{margin-top:18px}
.bigbtn{text-decoration:none}
.aboutw .mistake{padding:14px 16px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.aboutw .mistake a{font-weight:700;color:var(--acc);word-break:break-all}
:root[data-theme=dark] .aboutw .mistake a{color:var(--gold-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .aboutw .mistake a{color:var(--gold-l)}}

/* ==== v33 — moonlight on silver and pearls; the Mushaf page stays a real printed page ==== */
:root{--desk:#E8DDC8;--acc:#2C4247;--acc2:#4F736D;--selbg:#1B292E;--selfg:#F4EFE3}
:root[data-theme=dark]{--desk:#0D161B;--acc:#C8D2D3;--acc2:#9FB3B5;--selbg:#F4EFE3;--selfg:#101A20}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--desk:#0D161B;--acc:#C8D2D3;--acc2:#9FB3B5;--selbg:#F4EFE3;--selfg:#101A20}}
/* the Mushaf page: ivory paper, black ink, antique-gold and teal frames — like the printed Madinah Mushaf */
#mushaf,.hmush{--mbg:var(--desk);--mpaper:#FBF7EC;--mink:#15120E;--mframe:#B9A06A;--mframe2:#4F736D;--mmuted:#7A7466;--mhead:#2C4247;--mhbg:#EEF1EC}
#mushaf[data-mt=night],.hmush[data-mt=night]{--mbg:#0B1317;--mpaper:#15232A;--mink:#F4EFE3;--mframe:#7F8E92;--mframe2:#668C86;--mmuted:#8FA3A6;--mhead:#C8D2D3;--mhbg:#1B292E}
.hmush{border-color:rgba(200,210,211,.10)}
.hmush:not([data-mt=night]) .mp{box-shadow:0 18px 44px rgba(0,0,0,.26),0 0 0 1px rgba(185,160,106,.28)}
#mushaf[data-mt=night] .mp,.hmush[data-mt=night] .mp{box-shadow:0 0 0 1px rgba(200,210,211,.10)}
/* top bar: a calm night with a few scattered pearls */
.bar{background:radial-gradient(110% 140% at 88% -40%,rgba(200,210,211,.12),rgba(200,210,211,0) 55%),linear-gradient(180deg,#1B292E 0%,#132027 100%);
  border-bottom:1px solid rgba(200,210,211,.14);color:var(--pearl);backdrop-filter:none;-webkit-backdrop-filter:none}
.bar>*{position:relative;z-index:1}
.bar:before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 52% 16%,rgba(244,239,227,.8) 0 1.2px,transparent 2.2px),
  radial-gradient(circle at 66% 7%,rgba(244,239,227,.55) 0 1.6px,transparent 2.8px),
  radial-gradient(circle at 80% 24%,rgba(200,210,211,.5) 0 1px,transparent 2px),
  radial-gradient(circle at 26.5% 58%,rgba(244,239,227,.35) 0 .9px,transparent 1.8px),
  radial-gradient(circle at 73.5% 70%,rgba(244,239,227,.4) 0 1.2px,transparent 2.2px),
  radial-gradient(circle at 3.5% 42%,rgba(200,210,211,.4) 0 1px,transparent 2px)}
.bar .ic{color:var(--silver)}
.bar .ic:hover{background:rgba(200,210,211,.10)}
.brand .mark{width:30px;height:30px}
.brand .name b{font:600 25px/1.2 "Cormorant",Georgia,serif;letter-spacing:.06em;color:var(--pearl)}
.title{color:var(--pearl)}
.homebtn{background:rgba(200,210,211,.10);color:var(--pearl);border:1px solid rgba(200,210,211,.18)}
.homebtn svg{color:var(--silver)}
/* the four buttons: silver vessels, each with one pearl */
.appnav a{color:var(--pearl)}
.appnav .ai{background:linear-gradient(180deg,rgba(200,210,211,.11),rgba(200,210,211,.03));border:1px solid rgba(200,210,211,.24);border-radius:15px;color:var(--silver);
  box-shadow:inset 0 1px 0 rgba(244,239,227,.16),0 8px 18px rgba(0,0,0,.25)}
.appnav .ai:after{display:none}
.appnav .ai:before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff 0,#F4EFE3 38%,#C8D2D3 72%,#74677D 100%);box-shadow:0 0 6px rgba(244,239,227,.35)}
.appnav .ai svg{width:22px;height:22px;stroke-width:1.35;filter:none}
.appnav b{font:600 14px/1 "Cormorant",Georgia,serif;letter-spacing:.06em;color:var(--pearl)}
.appnav a.on .ai{border-color:rgba(244,239,227,.62);background:linear-gradient(180deg,rgba(200,210,211,.24),rgba(200,210,211,.08));
  box-shadow:inset 0 1px 0 rgba(244,239,227,.22),0 0 0 3px rgba(200,210,211,.10),0 8px 18px rgba(0,0,0,.25)}
.appnav a.on b{color:#fff}
body.at-home:not(.hmini) .appnav{grid-template-columns:repeat(4,minmax(0,150px));gap:4px;padding:10px 0 12px}
body.at-home:not(.hmini) .appnav a{gap:7px}
body.at-home:not(.hmini) .appnav .ai{width:58px;height:58px;border-radius:20px}
body.at-home:not(.hmini) .appnav .ai:before{width:8px;height:8px;margin-left:-4px;top:-4.5px}
body.at-home:not(.hmini) .appnav .ai svg{width:28px;height:28px;stroke-width:1.25}
body.at-home:not(.hmini) .appnav b{font-size:17px;letter-spacing:.08em;margin-top:3px}
.inst{height:32px;padding:0 11px;gap:5px;border-radius:16px;background:none;border:1px solid rgba(200,210,211,.28);color:var(--silver);font:600 13px/1 system-ui,sans-serif}
.inst svg{width:15px;height:15px}
/* Continue: a night card with a pearl button */
.launch .cont{background:linear-gradient(180deg,#1E2E34,#16232A);border:1px solid rgba(200,210,211,.18);color:var(--pearl);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.launch .cont .pl,.launch .cont .pl.c1,.launch .cont .pl.c2,.launch .cont .pl.c3,.launch .cont .pl.c4{
  background:radial-gradient(circle at 36% 30%,#fff 0,#F4EFE3 42%,#C8D2D3 82%,#9AA6AA 100%);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 6px 16px rgba(0,0,0,.3)}
.launch .cont .pl svg,.launch .cont .pl.c1 svg,.launch .cont .pl.c2 svg,.launch .cont .pl.c3 svg,.launch .cont .pl.c4 svg{fill:#101A20}
.launch .cont .k{color:var(--silver);letter-spacing:.14em}
.launch .cont small{color:rgba(244,239,227,.72)}
/* buttons: pearl for the main action, quiet for the rest */
.bigbtn{background:linear-gradient(180deg,#FAF6EC,#E8DDC8);color:#101A20;border:1px solid rgba(185,160,106,.45);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn.primary{background:linear-gradient(180deg,#2C4247,#1B292E);color:var(--pearl);border-color:rgba(200,210,211,.22)}
.btn.primary:hover{background:linear-gradient(180deg,#34505A,#22343A)}
.ic.big,.mh-auto .play,.mlang button.on{background:radial-gradient(circle at 36% 30%,#fff 0,#F4EFE3 45%,#C8D2D3 100%);color:#101A20}
/* tablets: the app fills the screen */
@media (min-width:560px) and (max-width:1023px){
  body:not(.mh-on){width:auto;margin:0;box-shadow:none}
  body.at-home.hmini:not(.mh-on) .bar{left:0;right:0;width:auto}
  body:not(.mh-on) .player{width:min(560px,calc(100% - 20px))}
  body:not(.mh-on) .sheet-box{width:min(560px,100%)}
}
/* laptops and wide tablets: one slim bar, and the Mushaf opens as two pages like a book */
@media (min-width:1024px){
  :root{--appw:min(1240px,calc(100vw - 64px))}
  .bar{flex-wrap:nowrap;padding-left:28px;padding-right:28px}
  .brand{flex:0 0 auto}
  .appnav,body.at-home:not(.hmini) .appnav{order:2;flex:1 1 auto;display:flex;justify-content:center;gap:26px;padding:0;margin:0}
  .appnav a,body.at-home:not(.hmini) .appnav a{flex-direction:row;gap:10px;padding:4px 6px}
  .appnav .ai,body.at-home:not(.hmini) .appnav .ai{width:46px;height:46px;border-radius:15px}
  .appnav .ai svg,body.at-home:not(.hmini) .appnav .ai svg{width:23px;height:23px}
  .appnav b,body.at-home:not(.hmini) .appnav b{font-size:18px;margin:0}
  .inst{order:3}
  #setBtn{order:4}
}
@media (min-width:1024px) and (pointer:coarse){
  body:not(.mh-on){width:auto;margin:0;box-shadow:none}
  body.at-home.hmini:not(.mh-on) .bar{left:0;right:0;width:auto}
}

/* chosen options: pearl on night, night on pearl */
.seg button.on{background:var(--selbg);color:var(--selfg);border-color:var(--selbg)}
.prow.on .pbtn{background:var(--selbg);color:var(--selfg)}
.prow .pbtn{background:var(--pearl);color:#101A20}
.prow .n{background:var(--soft);color:var(--acc)}
.prow.on{border-color:var(--teal)}
.mtabs button.on,.macts button.on{background:var(--selbg);color:var(--selfg);border-color:var(--selbg)}
.scholar .avatar{background:linear-gradient(180deg,#22343A,#16232A);color:var(--silver);box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(143,163,166,.55)}
@media (min-width:1024px){.bar{padding-top:12px;padding-bottom:12px}}
.aboutw .mistake a{display:inline-block;margin-top:2px;word-break:normal;white-space:nowrap;font-size:18px}
/* ---- the quiet "install as an app" card ---- */
.ihint{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;width:min(440px,calc(100% - 20px));
  transform:translate(-50%,calc(100% + 30px));opacity:0;transition:transform .35s ease,opacity .35s ease;
  padding:16px 16px 14px;border-radius:22px;color:var(--pearl);background:linear-gradient(180deg,#1E2E34,#16232A);
  border:1px solid rgba(200,210,211,.22);box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(244,239,227,.08)}
.ihint.show{transform:translate(-50%,0);opacity:1}
.ih-top{display:flex;align-items:center;gap:12px;padding-right:34px}
.ih-top img{width:52px;height:52px;border-radius:12px;flex:none;box-shadow:0 0 0 1px rgba(200,210,211,.2)}
.ih-top b{display:block;font:600 20px/1.2 "Cormorant",Georgia,serif;letter-spacing:.02em}
.ih-top small{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:rgba(244,239,227,.75)}
.ih-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--silver)}
.ih-x:hover{background:rgba(200,210,211,.10)}
.ih-x svg{width:18px;height:18px}
.ihint .bigbtn{margin:14px 0 0;height:48px}
.ih-steps{margin:12px 0 0;padding:0 0 0 22px;font-size:15px;line-height:1.55}
.ih-steps li{margin:5px 0;padding-left:2px}
.ih-note{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:rgba(244,239,227,.85)}
.ih-i{width:19px;height:19px;vertical-align:-4px;margin:0 2px;color:var(--silver);stroke-width:1.8}
.ih-d{display:inline-block;padding:0 6px;border-radius:8px;background:rgba(200,210,211,.14);letter-spacing:1px;font-size:13px;line-height:20px;vertical-align:1px}
.sheet .ih-steps{color:var(--ink)}
.sheet .ih-i{color:var(--acc)}
@media (min-width:1024px) and (pointer:fine){.ihint{left:auto;right:28px;transform:translateY(calc(100% + 30px))}.ihint.show{transform:none}}