@font-face {font-family:Madina; src:url(fonts/madina.woff2) format('woff2'), url(fonts/madina.otf); font-display:block}
@font-face {font-family:OldMadina; src:url(fonts/oldmadina.ttf); font-display:block}
@font-face {font-family:Hafs; src:url(fonts/hafs18.ttf); font-display:block}
@font-face {font-family:AmiriQ; src:url(fonts/AmiriQuran.ttf); font-display:block}
:root {--fs:1; --ar:Madina; --en:-apple-system,'Segoe UI',sans-serif;
  --ink:#2b2419; --mut:#8a8175; --acc:#C8A84B; --acc2:var(--acc); --accink:#a3841f;
  --band:#3A5FA0; --bandtx:#fff; --bandmeta:#EFD9A0; --bg:#fbf7ee; --pagebg:none;
  --chip:#f1e8d2; --hair:#e2d3ae; --line:#e7dfd0}
[data-theme=night]  {--ink:#ece1cd; --mut:#9b8f7d; --accink:#d4b45f;
  --band:#232f4b; --bg:#16120e; --chip:#2a2420; --hair:#4a3f2e; --line:#33291d}
[data-theme=rawdah] {--band:#1E5B45; --bg:#f7f4ea; --bandmeta:#DFC98A}
[data-theme=ottoman]{--ar:AmiriQ; --en:'Iowan Old Style',Georgia,serif; --bg:#efe8da;
  --acc:#8a6d2f; --accink:#6d5624; --band:transparent; --bandtx:#2b2419; --bandmeta:#8a6d2f;
  --chip:#e4d9c2; --hair:#cbbd9e; --line:#d8ccb4}
[data-theme=pure]   {--band:transparent; --bandtx:var(--ink); --bandmeta:var(--mut); --hair:#eee5d4}
[data-theme=zellige]{--bg:#f6f6f1; --pagebg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='%231D3E7A' fill-opacity='.055'%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3Crect x='14' y='14' width='20' height='20' transform='rotate(45 24 24)'/%3E%3C/g%3E%3Cg fill='%232AA4A0' fill-opacity='.05'%3E%3Ccircle cx='0' cy='0' r='5.5'/%3E%3Ccircle cx='48' cy='0' r='5.5'/%3E%3Ccircle cx='0' cy='48' r='5.5'/%3E%3Ccircle cx='48' cy='48' r='5.5'/%3E%3C/g%3E%3C/svg%3E"); --band:#1D3E7A; --acc:#1D3E7A;
  --acc2:#2AA4A0; --accink:#1D3E7A; --bandmeta:#8FD4CF; --chip:#e3ecec; --hair:#c8d4d4; --line:#d8e0e0; --mut:#6f7d88}
[data-theme=andalus]{--ar:AmiriQ; --bg:#f6efe0; --acc:#A64B35; --accink:#8c3e2c; --band:transparent;
  --bandtx:#5a3b28; --bandmeta:#A64B35; --chip:#ecdfc4; --hair:#d9c9a8; --line:#e0d3b6; --mut:#97826a;
  --en:'Iowan Old Style',Georgia,serif}
[data-theme=iznik]  {--bg:#fcfbf5; --acc:#1F3E8C; --acc2:#2AA4A0; --accink:#1F3E8C; --band:#ffffff;
  --bandtx:#1F3E8C; --bandmeta:#C33F32; --chip:#e9eef8; --hair:#c9d3e8; --line:#dbe2f0; --mut:#71809d}
[data-theme=tezhip] {--bg:#101c40; --ink:#e9dcb8; --mut:#8f8a76; --acc:#C9A227; --accink:#d9b64a;
  --band:#0b1430; --bandtx:#e9dcb8; --bandmeta:#C9A227; --chip:#1c2a55; --hair:#35406b; --line:#26315c}
[data-theme=mamluk] {--bg:#241b10; --ink:#e6d3a3; --mut:#9a8a68; --acc:#B08D3E; --acc2:#C0C4C8; --accink:#cfa952;
  --band:#1a130a; --bandtx:#e6d3a3; --bandmeta:#C0C4C8; --chip:#3a2d1a; --hair:#57452a; --line:#3a2f1c}
[data-theme=seljuk] {--bg:#f3ece0; --acc:#0E7C74; --acc2:#9C4E32; --accink:#0b635d; --band:#0E7C74;
  --bandtx:#fff; --bandmeta:#F2C9A8; --chip:#e2ebe4; --hair:#c4d5cf; --line:#d6e0da; --mut:#6f7f78}
[data-theme=hattat] {--ar:AmiriQ; --en:'Iowan Old Style',Georgia,serif; --bg:#f7f3e9; --ink:#1a1611;
  --mut:#6b655c; --acc:#1a1611; --acc2:#1a1611; --accink:#1a1611; --band:transparent; --bandtx:#1a1611;
  --bandmeta:#6b655c; --chip:#eae4d6; --hair:#cfc8b8; --line:#ddd6c6}
[data-theme=ramadan]{--bg:#201d38; --ink:#ece5d8; --mut:#8f89a8; --acc:#E0A458; --acc2:#C98BA8; --accink:#eab56e;
  --band:#171430; --bandtx:#ece5d8; --bandmeta:#E0A458; --chip:#2e2a4d; --hair:#3d3863; --line:#2c2850}
[data-theme=eink]   {--bg:#fafafa; --ink:#1c1c1c; --mut:#6e6e6e; --acc:#8a8a8a; --acc2:#8a8a8a; --accink:#444444;
  --band:transparent; --bandtx:#1c1c1c; --bandmeta:#6e6e6e; --chip:#ececec; --hair:#dcdcdc; --line:#e4e4e4;
  --en:Georgia,serif}
[data-theme=access] {--bg:#ffffff; --ink:#000000; --mut:#333333; --acc:#0033cc; --acc2:#0033cc; --accink:#0033cc;
  --band:#000000; --bandtx:#ffffff; --bandmeta:#ffd700; --chip:#e8eeff; --hair:#000000; --line:#000000}

* {box-sizing:border-box}
body {margin:0; background:var(--bg); background-image:var(--pagebg); color:var(--ink);
  font-family:var(--en); line-height:1.55; transition:background .25s,color .25s}
a {color:var(--accink); text-decoration:none}

/* top nav */
nav {position:sticky; top:0; z-index:3; background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:7px 14px 6px}
.navtop {display:flex; align-items:center; gap:10px}
.navmeta {display:flex; align-items:center; gap:10px; margin-top:3px; min-width:0}
nav .brand {font-weight:600; font-size:14.5px; margin-right:auto; display:flex;
  align-items:center; gap:9px; color:var(--ink); text-decoration:none; letter-spacing:-.1px}
nav .brand b {font-weight:800; color:var(--accink)}
.pager {display:inline-flex; gap:0; flex-shrink:0}
.pager .navbtn {border-radius:0; margin-left:-1px; padding:5px 13px}
.pager .navbtn:first-child {border-radius:999px 0 0 999px}
.pager .navbtn:last-child {border-radius:0 999px 999px 0}
.navbtn.ico {padding:5px 10px; font-size:15px; line-height:1}
.mark {width:26px; height:26px; flex-shrink:0}
.herologo {width:min(260px,64vw); height:auto; margin-bottom:14px}
[data-theme=night] .herologo, [data-theme=tezhip] .herologo, [data-theme=mamluk] .herologo,
[data-theme=ramadan] .herologo {filter:brightness(1.9) saturate(1.15)}
nav .pgi {font-size:12px; color:var(--mut); margin-right:auto; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0}
.navbtn {border:1px solid var(--hair); background:transparent; color:var(--ink);
  border-radius:999px; padding:5px 12px; font-size:13px; display:inline-block}
.navbtn.dis {opacity:.35; pointer-events:none}
.cfg {width:100%}
.cfgbtn {flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--mut); padding:4px 11px; cursor:pointer}
.cfgbtn .cfgico {font-size:13px; line-height:1}
.cfgbtn:active, body.cfg-open .cfgbtn {background:var(--chip); color:var(--ink)}
.sheet.cfgsheet {max-height:80vh; max-height:80dvh; padding:14px 18px 20px}
.cfgtitle {font-weight:700; font-size:15px; color:var(--ink)}
.cfgsheet .cfgrows {display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding-top:4px}
.cfgsheet .rowlbl {width:100%; margin-top:16px; padding-top:11px; border-top:1px solid var(--line)}
.cfgsheet .rowlbl:first-child {margin-top:2px; padding-top:0; border-top:none}
.cfgsheet button {border:1px solid var(--hair); background:transparent; color:var(--ink);
  border-radius:999px; padding:7px 13px; font-size:13px; cursor:pointer}
.cfgsheet button.sel {background:var(--acc); border-color:var(--acc); color:#fff}
.cfg summary::-webkit-details-marker {display:none}
.cfgrows {display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.rowlbl {width:100%; font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--accink); opacity:.75; font-weight:700; margin-top:4px}
.cfgrows button {border:1px solid var(--hair); background:transparent; color:var(--ink);
  border-radius:999px; padding:5px 11px; font-size:12.5px}
.cfgrows button.sel {background:var(--acc); border-color:var(--acc); color:#fff}
.sw {display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:5px; vertical-align:-1.5px;
  border:1px solid rgba(0,0,0,.15)}
#fontstatus {display:none}
body.debug #fontstatus {display:block; width:100%; font-size:10.5px; color:var(--mut); padding-top:6px}
#fontstatus b.ok {color:#3a7d44} #fontstatus b.bad {color:#b3403a}

main {max-width:680px; margin:0 auto; padding:26px 20px 60px}

/* surah header */
.shead {position:relative; background:var(--band); border:2px solid var(--acc); border-radius:5px;
  text-align:center; padding:20px 30px 14px; margin:26px 6px 6px;
  box-shadow: inset 0 0 0 3px var(--band), inset 0 0 0 3.7px rgba(251,247,238,.55)}
[data-theme=zellige] .shead::before {content:""; position:absolute; inset:4px; border-radius:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23FFFFFF' fill-opacity='.09'%3E%3Crect x='11' y='11' width='18' height='18'/%3E%3Crect x='11' y='11' width='18' height='18' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none}
.arch {display:none; position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none}
[data-theme=andalus] .shead {background:none; border:none; box-shadow:none; padding:46px 40px 20px; overflow:visible}
[data-theme=andalus] .arch {display:block}
[data-theme=andalus] .ros, [data-theme=andalus] .sdots {display:none}
.ros {position:absolute} .ros.tl{top:-11px;left:-11px} .ros.tr{top:-11px;right:-11px}
.ros.bl{bottom:-11px;left:-11px} .ros.br{bottom:-11px;right:-11px}
.rp{fill:var(--acc)} .rc1{fill:var(--band);stroke:var(--acc)} .rc2{fill:var(--bg)}
.dc1{fill:var(--bg);stroke:var(--acc)} .dc2{fill:var(--acc)}
.sdots {position:absolute; top:50%; transform:translateY(-50%); color:var(--acc2); font-size:6px; letter-spacing:3px}
.sdots.l{left:10px} .sdots.r{right:10px}
.sar {font-family:var(--ar); font-size:calc(30px*var(--fs)); line-height:1.9; color:var(--bandtx); margin:0; position:relative}
.sen {color:var(--bandtx); font-size:13.5px; font-weight:600; margin:4px 0 2px; position:relative} .sen i{font-weight:400}
.smeta {color:var(--bandmeta); font-size:11px; margin:0; letter-spacing:.4px; position:relative}
[data-theme=pure] .shead, [data-theme=ottoman] .shead, [data-theme=hattat] .shead, [data-theme=eink] .shead
 {border-left:none; border-right:none; border-radius:0; box-shadow:none; padding:14px 10px 10px;
  border-top:2.5px double var(--acc); border-bottom:2.5px double var(--acc)}
[data-theme=pure] .shead, [data-theme=eink] .shead
 {border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px}
[data-theme=pure] .ros,[data-theme=pure] .sdots,[data-theme=ottoman] .ros,[data-theme=ottoman] .sdots,
[data-theme=hattat] .ros,[data-theme=hattat] .sdots,[data-theme=eink] .ros,[data-theme=eink] .sdots,
[data-theme=access] .ros,[data-theme=access] .sdots {display:none}
[data-theme=access] .shead {border-width:3px}

/* bismillah */
.bism {display:flex; align-items:center; gap:14px; margin:22px 2px 4px}
.btext {font-family:var(--ar); font-size:calc(27px*var(--fs)); line-height:2; white-space:nowrap}
.brule {flex:1; height:5px; border-top:1.4px solid var(--acc); border-bottom:.6px solid var(--acc)}
[data-theme=pure] .brule {border-bottom:none; border-top-width:.8px}

/* ayahs */
.ayah {position:relative; padding:24px 0; border-bottom:1px solid transparent;
  border-image:linear-gradient(to right, transparent, var(--hair) 20%, var(--hair) 80%, transparent) 1}
main .ayah:last-of-type {border-bottom:none}
.actl {position:absolute; left:0; top:30px; display:flex; flex-direction:column; gap:6px; z-index:1}
.icobtn {width:30px; height:30px; border-radius:50%; border:1.2px solid var(--acc); background:transparent;
  color:var(--accink); font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer}
[data-theme=access] .icobtn {border-width:2px}
.icobtn.playing {background:var(--acc); color:#fff}
.arline {font-family:var(--ar); font-size:calc(32px*var(--fs)); line-height:2.15; text-align:right; margin:0; padding-left:40px}
[data-theme=access] .arline {font-size:calc(40px*var(--fs))}
.med {display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; border:1.4px solid var(--acc); color:var(--accink); font-size:14.5px;
  box-shadow: inset 0 0 0 2.2px var(--bg), inset 0 0 0 2.9px var(--acc);
  vertical-align:middle; margin-right:8px; font-family:-apple-system,sans-serif}
[data-theme=pure] .med, [data-theme=eink] .med {box-shadow:none; border-width:1px}
.wrow {display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin:16px 0 4px; padding-left:40px}
.w {display:inline-flex; flex-direction:column; align-items:center; text-align:center;
  padding:8px 10px 6px; border-radius:10px; cursor:pointer; transition:background .15s}
.w:active,.w.on {background:var(--chip)}
.w.playing {background:var(--chip); box-shadow:0 0 0 1.5px var(--acc)}
.wa {font-family:var(--ar); font-size:calc(24px*var(--fs)); line-height:1.9}
[data-theme=access] .wa {font-size:calc(30px*var(--fs))}
.wg {font-size:calc(11.5px*var(--fs)); margin-top:2px}
[data-theme=access] .wg {font-size:calc(14px*var(--fs))}
.wt {font-size:calc(10.5px*var(--fs)); color:var(--mut); font-style:italic}
[data-theme=access] .wt {font-size:calc(12.5px*var(--fs)); font-style:normal}
.trans {color:var(--ink); opacity:.8; font-size:calc(15px*var(--fs)); margin:14px 0 0}
[data-theme=access] .trans {font-size:calc(18px*var(--fs)); opacity:1}
.tn {color:var(--acc2); font-weight:600; font-size:12px; vertical-align:super}
.contnote {color:var(--mut); font-size:11.5px; margin:10px 0 0; font-style:italic}

[data-mode=focus] .wg, [data-mode=focus] .wt, [data-mode=focus] .trans,
[data-mode=veil] .wg, [data-mode=veil] .wt, [data-mode=veil] .trans {display:none}
[data-mode=veil] .wa {filter:blur(7px); transition:filter .25s}
[data-mode=veil] .w.reveal .wa, [data-mode=veil] .w.playing .wa {filter:none}
[data-mode=veil] .arline {display:none}

/* dividers */
.sdiv {display:flex; align-items:center; gap:12px; margin:34px 10px 8px}
.drule {flex:1; height:5px; border-top:1.2px solid var(--acc); border-bottom:.5px solid var(--acc)}
.fleuron {display:none; color:var(--acc); font-size:20px}
.crescent {display:none; color:var(--acc); font-size:22px; line-height:1}
[data-theme=ottoman] .dstar,[data-theme=andalus] .dstar,[data-theme=hattat] .dstar {display:none}
[data-theme=ottoman] .fleuron,[data-theme=andalus] .fleuron {display:inline}
[data-theme=ramadan] .dstar {display:none} [data-theme=ramadan] .crescent {display:inline}
[data-theme=pure] .sdiv, [data-theme=eink] .sdiv {display:none}

/* page footer nav */
.pnav {display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin:30px 0 4px; padding-top:16px; border-top:1px solid var(--line)}
.pnav a {border:1px solid var(--hair); color:var(--accink); border-radius:999px;
  padding:8px 16px; font-size:13.5px; text-decoration:none}
.pnav a:active {background:var(--chip)}
.pnav .mid {color:var(--mut); font-size:11.5px; text-align:center; flex:1; min-width:0}
footer {text-align:center; color:var(--mut); font-size:11px; line-height:1.7;
  padding:20px 20px 34px; max-width:600px; margin:0 auto; opacity:.85}
footer b {font-weight:600; color:var(--mut)}

/* word sheet */
.sheetbg{position:fixed;inset:0;z-index:5;display:none;background:rgba(0,0,0,.28);
 align-items:center;justify-content:center;padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
.sheetbg.open{display:flex}
.sheet{width:100%;max-width:620px;max-height:52vh;max-height:52dvh;overflow-y:auto;
 -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
 background:var(--bg);color:var(--ink);border:1.5px solid var(--acc);border-top-width:2.5px;
 border-radius:16px;padding:12px 20px 18px;
 box-shadow:0 10px 34px rgba(0,0,0,.35);animation:sheetup .22s ease-out}
@keyframes sheetup{from{transform:translateY(36px);opacity:.5}to{transform:none;opacity:1}}
body.sheet-open{overflow:hidden}
.shx{position:sticky;top:-12px;background:var(--bg);padding:2px 0;z-index:1;
 display:flex;align-items:center;justify-content:space-between}
.xw{font-family:var(--ar);font-size:calc(33px*var(--fs));line-height:1.9}
.xclose{border:1px solid var(--hair);background:transparent;color:var(--mut);width:30px;height:30px;border-radius:50%;font-size:13px}
.xg{font-size:14.5px;margin:0 0 9px} .xt{color:var(--mut);font-size:13.5px;font-style:italic}
.xrow{font-size:13.5px;margin:5px 0;border-top:1px solid var(--hair);padding-top:7px}
.xrow b{color:var(--accink);font-weight:600;margin-right:8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.xroot{font-family:var(--ar);font-size:24px;color:var(--accink)}
.xlem{font-family:var(--ar);font-size:20px}
.xhead{color:var(--mut)}
.sib{display:flex;gap:11px;align-items:center;padding:4.5px 0;border-top:1px dashed var(--hair)}
.sar2{font-family:var(--ar);font-size:calc(20px*var(--fs));line-height:1.7;min-width:84px;text-align:right}
.sg{flex:1;font-size:13.5px}
.sref{color:var(--acc2);font-size:12px;font-weight:600;white-space:nowrap;
 border:1px solid var(--hair);border-radius:99px;padding:3px 8px;text-decoration:none}
.sref:active{background:var(--chip)}
@keyframes ayahflash{0%,100%{background:transparent}25%,75%{background:var(--chip)}}
.ayah.flash, .mline.flash, .mshead.flash{animation:ayahflash 1.6s ease}

.shead, .ayah, .mshead, .mline {scroll-margin-top:64px}

/* tajweed colouring — inert until html[data-taj=on]; class names as served by QUL */
t {color:inherit}
[data-taj=on] t.ham_wasl, [data-taj=on] t.slnt, [data-taj=on] t.laam_shamsiyah {color:#9a938a}
[data-taj=on] t.ghunnah {color:#f7930d}
[data-taj=on] t.idgham_ghunnah {color:#149c86}
[data-taj=on] t.idgham_wo_ghunnah {color:#7f9a4e}
[data-taj=on] t.idgham_shafawi {color:#4faf3f}
[data-taj=on] t.idgham_mutajanisayn, [data-taj=on] t.idgham_mutaqaribayn {color:#5d9c93}
[data-taj=on] t.ikhafa {color:#c14ccb}
[data-taj=on] t.ikhafa_shafawi {color:#d976d9}
[data-taj=on] t.iqlab {color:#26a9dd}
[data-taj=on] t.qalaqah {color:#dd4444}
[data-taj=on] t.madda_normal {color:#5b8cff}
[data-taj=on] t.madda_permissible {color:#3f66e0}
[data-taj=on] t.madda_obligatory_mottasel {color:#8b55e6}
[data-taj=on] t.madda_obligatory_monfasel {color:#a06ff0}
[data-taj=on] t.madda_necessary {color:#6a3bd8}
/* custom-alef-maksora is an orthographic hint, not a recitation rule — no colour */

@font-face {font-family:Nastaliq; src:url(fonts/NotoNastaliqUrdu.ttf); font-display:swap}

/* ── language switching: one gloss + one translation visible at a time ── */
.wg, .trans, .mstr {display:none}
[data-lang=en] .wg[data-l=en], [data-lang=tr] .wg[data-l=tr], [data-lang=ur] .wg[data-l=ur] {display:block}
/* a word with no gloss in the chosen language falls back to English */
[data-lang=tr] .w:not(:has(.wg[data-l=tr])) .wg[data-l=en],
[data-lang=ur] .w:not(:has(.wg[data-l=ur])) .wg[data-l=en] {display:block}
[data-lang=ur] .wg[data-l=ur] {font-family:Nastaliq, var(--ar); direction:rtl;
  font-size:calc(12px*var(--fs)); line-height:1.9; padding-bottom:2px}
[data-lang=ur] .mline .wg[data-l=ur] {font-size:calc(10.5px*var(--fs)); line-height:1.7}

.trans[data-t], .mstr[data-t] {display:none}
[data-trans="en-sahih"]     .trans[data-t="en-sahih"],
[data-trans="tr-diyanet"]   .trans[data-t="tr-diyanet"],
[data-trans="tr-elmalili"]  .trans[data-t="tr-elmalili"],
[data-trans="ur-jalandhari"] .trans[data-t="ur-jalandhari"],
[data-trans="ur-maududi"]   .trans[data-t="ur-maududi"] {display:block}
[data-trans="en-sahih"]     .mstr[data-t="en-sahih"],
[data-trans="tr-diyanet"]   .mstr[data-t="tr-diyanet"],
[data-trans="tr-elmalili"]  .mstr[data-t="tr-elmalili"],
[data-trans="ur-jalandhari"] .mstr[data-t="ur-jalandhari"],
[data-trans="ur-maududi"]   .mstr[data-t="ur-maududi"] {display:block}
[data-lang=ur] .trans, [data-lang=ur] .mstr {font-family:Nastaliq, serif;
  direction:rtl; text-align:right; line-height:2.0; font-size:calc(14px*var(--fs))}
[data-lang=ur] .tn {float:right; margin-left:6px}
.langrow button.sel {background:var(--acc); border-color:var(--acc); color:#fff}
.wg.cont {color:var(--mut); opacity:.5; letter-spacing:2px}

/* ── view switching: reading flow vs the printed Mushaf grid ── */
.view {display:none}
[data-view=read] .vread {display:block}
[data-view=mushaf] .vmushaf {display:block}
[data-view=mushaf] main {max-width:1180px}

.mpage {background:var(--bg); border:2px solid var(--acc); border-radius:3px; padding:14px 16px 10px;
  box-shadow:0 0 0 3.5px var(--bg), 0 0 0 4.6px var(--acc), 0 6px 26px rgba(0,0,0,.14); margin:10px 6px 20px}
.mhead {display:flex; align-items:baseline; gap:10px; font-size:11.5px; color:var(--mut);
  border-bottom:1.2px solid var(--acc); padding-bottom:6px; margin-bottom:12px}
.mhead span:first-child {flex:1}
.mhar {font-family:var(--ar); font-size:calc(17px*var(--fs)); color:var(--accink); line-height:1.7}
.mgrid {display:flex; gap:14px; align-items:stretch}
.mmain {flex:1; min-width:0}
.mside {width:190px; flex-shrink:0; background:var(--chip); border-radius:4px; padding:10px 11px;
  font-size:calc(11.5px*var(--fs)); line-height:1.45; align-self:flex-start; overflow:hidden}
.mstr {margin:0 0 8px; padding-bottom:7px; border-bottom:1px solid var(--hair); color:var(--ink); opacity:.85}
.mstr:last-child {border-bottom:none}
.mjuz {display:inline-block; background:var(--acc); color:#fff; font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:999px; margin-bottom:9px; letter-spacing:.5px}
.mline {--lfs:1; display:flex; flex-wrap:nowrap; justify-content:space-between;
  align-items:flex-end; gap:2px; border-bottom:.5px solid var(--hair); padding:2px 0}
.mline:last-child {border-bottom:none}
.mline .w {flex:0 0 auto; padding:5px 5px 4px; min-width:0}
.mline .w:nth-child(odd) {background:color-mix(in srgb, var(--chip) 55%, transparent)}
.mline .wa {font-size:calc(21px*var(--fs)*var(--lfs)); white-space:nowrap}
.w[data-wq] {position:relative}
.w[data-wq]::after {content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:1px; width:16px; height:2px; border-radius:2px; background:var(--acc2); opacity:.75}
[data-mode=veil] .w[data-wq]::after {display:none}
.wqrow {display:flex; gap:12px; align-items:baseline; padding:7px 0; border-top:1px solid var(--hair)}
.wqsign {font-family:var(--ar); font-size:calc(30px*var(--fs)); color:var(--acc2); min-width:44px; text-align:center; line-height:1.5}
.wqname {flex:1} .wqname b {display:block; font-size:14px} .wqname small {color:var(--mut); font-size:12.5px}
.wqar {font-family:var(--ar); font-size:calc(19px*var(--fs)); color:var(--accink)}

.mmed {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:calc(32px*var(--lfs)); height:calc(32px*var(--lfs)); align-self:center; margin:0 4px; border-radius:50%;
  border:1.3px solid var(--acc); color:var(--accink); font-size:calc(15px*var(--fs));
  line-height:1; font-family:var(--ar); font-weight:600;
  box-shadow:inset 0 0 0 2px var(--bg), inset 0 0 0 2.7px var(--acc)}
.mline .wg {font-size:calc(9.5px*var(--fs)*var(--lfs)); color:var(--accink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%}
.mline .wt {font-size:calc(8.5px*var(--fs)*var(--lfs)); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%}
.mshead {background:var(--band); border:1.5px solid var(--acc); border-radius:4px; text-align:center;
  padding:9px 12px 7px; margin:9px 0 7px}
.msar {font-family:var(--ar); font-size:calc(21px*var(--fs)); color:var(--bandtx); margin:0; line-height:1.8}
.msen {color:var(--bandmeta); font-size:10.5px; margin:1px 0 0}
.msbism {display:flex; align-items:center; gap:10px; margin:6px 0 8px}
.msbism .btext {font-size:calc(20px*var(--fs))}
.mfoot {text-align:center; border-top:1.2px solid var(--acc); margin-top:10px; padding-top:5px;
  font-family:var(--ar); font-size:calc(15px*var(--fs)); color:var(--accink)}
.mscale {transform-origin:top left}
@media (max-width:900px){
  [data-view=mushaf] main {padding-left:6px; padding-right:6px; overflow:hidden}
  .mpage {width:860px}
}

/* surah drawer */
.sdrawerbg{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:6;display:none}
.sdrawerbg.open{display:block}
.sdrawer{position:fixed;top:0;bottom:0;left:-300px;width:288px;z-index:7;background:var(--bg);
 border-right:2px solid var(--acc);transition:left .25s;overflow-y:auto;-webkit-overflow-scrolling:touch;
 overscroll-behavior:contain;padding:6px 0 30px}
.sdrawer.open{left:0}
.dhead{font-weight:700;font-size:12px;padding:12px 16px 8px;color:var(--accink);
 text-transform:uppercase;letter-spacing:.8px;position:sticky;top:0;background:var(--bg)}
.dsur{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--ink);
 border-bottom:1px solid var(--line);font-size:13px}
.dsur .dn{color:var(--acc2);font-weight:700;min-width:26px;font-size:11.5px}
.dsur .den{line-height:1.25} .dsur .den small{color:var(--mut);font-size:10.5px}
.dsur .dar{font-family:var(--ar);font-size:calc(19px*var(--fs));margin-left:auto;line-height:1.6}
.dsur.cur{background:var(--chip)}
body.drawer-open{overflow:hidden}

/* index page */
.hero {text-align:center; padding:34px 0 8px}
.hero .har {font-family:var(--ar); font-size:calc(44px*var(--fs)); line-height:1.9}
.hero p {color:var(--mut); font-size:14px}
.juzgrid {display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:16px 0 26px}
.juzgrid a {border:1.3px solid var(--acc); border-radius:10px; text-align:center; padding:9px 0;
  color:var(--accink); font-size:13px}
.slist {margin:0; padding:0; list-style:none}
.slist li {border-bottom:1px solid var(--line)}
.slist a {display:flex; align-items:center; gap:12px; padding:11px 4px; color:var(--ink)}
.snum {color:var(--acc2); font-weight:700; font-size:13px; min-width:26px}
.sname {flex:1} .sname b{font-size:15px} .sname i{color:var(--mut); font-size:12.5px; font-style:normal}
.sarr {font-family:var(--ar); font-size:calc(24px*var(--fs)); line-height:1.6}
.smeta2 {color:var(--mut); font-size:11px; text-align:right}