@font-face{font-family:"NooreHira";font-style:normal;font-weight:400;font-display:block;src:url(fonts/noorehira.woff2) format("woff2")}
@font-face{font-family:"Kalpurush";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/kalpurush.woff2) format("woff2")}
/* Layout: phone-first digital book — sticky top bar, framed reading pages, fixed bottom tabs. Motif: the book's cartouche headings and dotted page frame. */
:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --sunk:#E6ECE9; --ink:#14302A; --muted:#5A6E68; --line:#CFDAD5;
  --accent:#0E6655; --accent-ink:#FFFFFF; --gold:#B07D25; --gold-soft:#F4E6C6;
  --ok:#1C7A46; --ok-soft:#DCF0E3; --bad:#B03838; --bad-soft:#F6DFDD;
  --frame:#C99A9A; --cell:#E9EEEC; --teal-deep:#0B3B42;
  --b-tajweed:#0B3B42; --b-ayat:#0E6655; --b-adab:#3B4F9B; --b-akhlak:#2E7D32; --b-muy:#A65E12;
  --b-tajweed-soft:#DCE8EA; --b-ayat-soft:#D8EDE8; --b-adab-soft:#E1E5F5; --b-akhlak-soft:#E0F0E1; --b-muy-soft:#F6E6D3;
  --f-bn:"Kalpurush","SolaimanLipi","Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --f-ar:"NooreHira","Al Qalam Quran Majeed","Noorehuda","Scheherazade New","Noto Naskh Arabic",serif;
  --ar-size:2rem; --bn-size:1.12rem; --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1917; --surface:#15221F; --sunk:#1C2B28; --ink:#E3EDE9; --muted:#97ABA4; --line:#2A3B37;
  --accent:#4DBFA6; --accent-ink:#05201A; --gold:#E0B25A; --gold-soft:#3A2F17;
  --ok:#5BCA89; --ok-soft:#163226; --bad:#EC8781; --bad-soft:#3A1E1C;
  --frame:#6E4B4B; --cell:#1F302C; --teal-deep:#0B3B42;
  --b-tajweed:#7CC7D2; --b-ayat:#4DBFA6; --b-adab:#93A4EC; --b-akhlak:#7FCB83; --b-muy:#E7A45C;
  --b-tajweed-soft:#14323A; --b-ayat-soft:#163430; --b-adab-soft:#1D2441; --b-akhlak-soft:#1A3320; --b-muy-soft:#3A2814;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1917; --surface:#15221F; --sunk:#1C2B28; --ink:#E3EDE9; --muted:#97ABA4; --line:#2A3B37;
  --accent:#4DBFA6; --accent-ink:#05201A; --gold:#E0B25A; --gold-soft:#3A2F17;
  --ok:#5BCA89; --ok-soft:#163226; --bad:#EC8781; --bad-soft:#3A1E1C;
  --frame:#6E4B4B; --cell:#1F302C; --teal-deep:#0B3B42;
  --b-tajweed:#7CC7D2; --b-ayat:#4DBFA6; --b-adab:#93A4EC; --b-akhlak:#7FCB83; --b-muy:#E7A45C;
  --b-tajweed-soft:#14323A; --b-ayat-soft:#163430; --b-adab-soft:#1D2441; --b-akhlak-soft:#1A3320; --b-muy-soft:#3A2814;
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--f-bn);font-size:var(--bn-size);line-height:1.7;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:58px;padding-block:6px}
.back{border:0;background:var(--sunk);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.top h1{font-size:1.2rem;font-weight:700;margin:0;line-height:1.3;flex:1;min-width:0;text-wrap:balance}
.top h1 small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.starpill{display:flex;align-items:center;gap:5px;background:var(--gold-soft);color:var(--ink);border-radius:99px;padding:4px 12px 4px 8px;font-weight:700;font-variant-numeric:tabular-nums;flex:none;border:0}
.starpill svg{width:20px;height:20px}
main{padding-block:18px 120px}
main .wrap{display:flex;flex-direction:column;gap:18px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs .wrap{display:grid;grid-template-columns:repeat(6,1fr)}
.tab{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0 9px;font-size:.8rem;color:var(--muted)}
.tab svg{width:23px;height:23px}
.tab[aria-current="page"]{color:var(--accent);font-weight:700}
/* hero / tajweed cover */
.cover{position:relative;overflow:hidden;background:var(--teal-deep);color:#F7E9C8;border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;gap:6px;border:0;text-align:left}
.cover::before{content:"";position:absolute;inset:8px;border:1.5px solid rgba(214,170,110,.55);border-radius:14px;pointer-events:none}
.cover .orn{position:absolute;right:-26px;top:-26px;width:150px;height:150px;opacity:.22;color:#D6AA6E}
.cover .orn.b{display:none}
.mq{display:flex;direction:rtl;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden}
.mq+.mq{margin-top:-14px;border-top:0}
.mq .ml{background:var(--cell);font-family:var(--f-ar);font-size:calc(var(--ar-size)*1.05);min-width:2.2em;display:grid;place-items:center;border-left:1.5px solid var(--ink);flex:none}
.mq .mg{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(2.7em,1fr))}
.mq .mg span{font-family:var(--f-ar);font-size:calc(var(--ar-size)*.8);line-height:2;text-align:center;border-left:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}
.mq .mg span:hover{background:var(--gold-soft)}
.cover small{font-size:.9rem;opacity:.9;position:relative}
.cover b{font-size:1.9rem;line-height:1.15;position:relative;font-weight:700;color:#FFF3D6}
.cover span{position:relative;font-size:.86rem;opacity:.85}
.cover .bar{background:rgba(255,255,255,.15);margin-top:8px}
.cover .bar i{background:#D6AA6E}
.hero{position:relative;overflow:hidden;background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.hero h2{font-size:1.45rem;line-height:1.25;margin:0;font-weight:700;position:relative}
.hero p{margin:0;opacity:.92;position:relative}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.stat{background:rgba(255,255,255,.15);border-radius:12px;padding:8px 10px}
.stat b{display:block;font-size:1.3rem;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;opacity:.9}
.sec-h{font-weight:700;font-size:1.15rem;margin:4px 0 -6px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sec-h small{font-weight:400;color:var(--muted);font-size:.86rem}
.books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bk{--c:var(--b-ayat);--cs:var(--b-ayat-soft);border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;text-align:left;display:flex;flex-direction:column;gap:10px;min-width:0}
.bk[data-b="adab"]{--c:var(--b-adab);--cs:var(--b-adab-soft)}
.bk[data-b="akhlak"]{--c:var(--b-akhlak);--cs:var(--b-akhlak-soft)}
.bk[data-b="muy"]{--c:var(--b-muy);--cs:var(--b-muy-soft)}
.bk[data-b="tajweed"]{--c:var(--b-tajweed);--cs:var(--b-tajweed-soft)}
.bk .mono{width:46px;height:46px;border-radius:12px;background:var(--cs);color:var(--c);display:grid;place-items:center;font-family:var(--f-ar);font-size:1.7rem;line-height:1}
.bk h3{margin:0;font-size:1.06rem;line-height:1.35;font-weight:700}
.bk .meta{font-size:.84rem;color:var(--muted)}
.bar{height:7px;border-radius:9px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--c,var(--accent));border-radius:9px}
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.act{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;display:flex;gap:10px;align-items:center;text-align:left;min-width:0}
.act .ic{width:40px;height:40px;border-radius:11px;background:var(--sunk);display:grid;place-items:center;flex:none;color:var(--accent)}
.act .ic svg{width:22px;height:22px}
.act b{display:block;font-weight:700;line-height:1.3}
.act span{font-size:.82rem;color:var(--muted);line-height:1.35;display:block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.eyebrow{font-size:.82rem;letter-spacing:.03em;color:var(--muted);font-weight:700}
.ar{font-family:var(--f-ar);font-size:var(--ar-size);line-height:2.1;direction:rtl;text-align:center;color:var(--ink)}
.ar.sm{font-size:calc(var(--ar-size)*.8)}
.ari{font-family:var(--f-ar);font-size:1.32em;line-height:1;direction:rtl;unicode-bidi:isolate;padding:0 .12em;color:var(--ink)}
.wq{font-family:system-ui,sans-serif;font-size:.5em;vertical-align:.9em;color:var(--muted);padding:0 .15em}
.qn{font-size:.62em;vertical-align:-.35em}
.sk{font-size:.42em;vertical-align:1.3em;color:var(--bad);padding:0 .15em}
.bn{margin:0}
.ref{font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;border-radius:99px;padding:1px 9px;background:var(--sunk);color:var(--muted)}
.tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.gold{background:var(--gold-soft);color:var(--ink)}
.intro{font-size:.95rem;color:var(--muted);margin:0}
.note{font-size:.88rem;background:var(--gold-soft);border-radius:10px;padding:8px 12px;margin:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 14px;font-weight:700;display:inline-flex;gap:6px;align-items:center;line-height:1.2}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.sm{padding:6px 11px;font-size:.9rem;border-radius:10px}
.btn.on{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.btn.block{width:100%;justify-content:center;padding:13px}
.btn svg{width:18px;height:18px}
.chlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.ch{border:0;border-bottom:1px solid var(--line);background:none;text-align:left;display:flex;gap:12px;align-items:center;padding:12px 14px}
.ch:last-child{border-bottom:0}
.ch .n{width:32px;height:32px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-weight:700;flex:none;font-size:.92rem}
.ch.done .n{background:var(--ok);color:var(--surface)}
.ch .t{flex:1;min-width:0}
.ch .t b{display:block;font-weight:700;line-height:1.4}
.ch .t span{font-size:.82rem;color:var(--muted)}
.ch .pg{font-size:.8rem;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.chev{color:var(--muted);flex:none}
ol.items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;counter-reset:it var(--start,0)}
ol.items li{counter-increment:it;display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
ol.items li:last-child{border-bottom:0}
ol.items li::before{content:counter(it, bengali) ".";color:var(--accent);font-weight:700;min-width:1.6em;flex:none}
h3.sub{font-size:1.1rem;margin:6px 0 -4px;font-weight:700}
.point .ph{display:flex;gap:10px;align-items:center}
.point .ph b{font-size:1.1rem;line-height:1.3}
.dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.dot.good{background:var(--ok-soft);color:var(--ok)} .dot.bad{background:var(--bad-soft);color:var(--bad)}
.dot svg{width:16px;height:16px}
.mean{background:var(--sunk);border-radius:10px;padding:9px 12px;margin:0;font-size:1rem}
.hide-mean .meanable{filter:blur(6px);user-select:none;cursor:pointer;transition:filter .2s}
.hide-mean .meanable.shown{filter:none}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.switch{display:inline-flex;gap:8px;align-items:center;font-size:.92rem;border:1px solid var(--line);background:var(--surface);padding:6px 12px;border-radius:99px}
.switch i{width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;flex:none}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:left .15s}
.switch[aria-pressed="true"] i{background:var(--accent)}
.switch[aria-pressed="true"] i::after{left:17px}
/* ---------- tajweed book page ---------- */
.page{background:var(--surface);border-radius:6px;padding:18px 16px;display:flex;flex-direction:column;gap:14px;position:relative;
  border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1px var(--line), 0 0 0 5px var(--surface), 0 0 0 6px var(--frame)}
.page .pgno{text-align:center;font-size:.85rem;color:var(--muted);margin:-6px 0 -6px}
.cart{align-self:center;position:relative;padding:6px 34px;margin:8px 0 2px;font-size:1.4rem;font-weight:700;text-align:center;line-height:1.35;
  border:3px solid var(--ink);border-radius:16px/22px;text-wrap:balance}
.cart::before,.cart::after{content:"";position:absolute;top:50%;width:18px;height:18px;border:3px solid var(--ink);background:var(--surface);transform:translateY(-50%) rotate(45deg)}
.cart::before{left:-11px;border-right:0;border-top:0}
.cart::after{right:-11px;border-left:0;border-bottom:0}
.page h2.h2{font-size:1.22rem;text-align:center;margin:6px 0 0;font-weight:700}
.page h3.h3{font-size:1.12rem;margin:4px 0 -4px;font-weight:700}
.page p{margin:0;text-align:justify;text-justify:inter-character}
.page p.center{text-align:center}
.star::before,.dia::before{content:"✵";color:var(--accent);margin-right:6px}
.dia::before{content:"◆"}
.ulist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ulist li{display:flex;gap:8px;align-items:baseline}
.ulist li .mk{color:var(--accent);flex:none;font-weight:700;min-width:1.4em}
.ulist.bold li{font-weight:700}
.ex{display:flex;flex-wrap:wrap;direction:rtl;justify-content:center;gap:4px 18px;padding:4px 0}
.ex .w{font-family:var(--f-ar);font-size:calc(var(--ar-size)*.95);line-height:2;cursor:pointer;border-radius:8px;padding:0 4px}
.ex.big .w{font-size:calc(var(--ar-size)*1.05);min-width:1.6em;text-align:center;background:var(--sunk)}
.ex .w:hover{background:var(--gold-soft)}
.tt{font-weight:700;text-align:center;margin:4px 0 -6px;font-size:1.05rem}
.tscroll{direction:rtl;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--ink);border-radius:2px}
table.tam{border-collapse:collapse;width:100%;direction:rtl}
table.tam td,table.tam th{border:1px solid var(--ink);padding:4px 10px;text-align:center;vertical-align:middle}
table.tam th{background:var(--cell);font-weight:700;font-size:1rem;padding:6px 10px;white-space:nowrap}
table.tam td.c{font-family:var(--f-ar);font-size:calc(var(--ar-size)*.86);line-height:2.05;white-space:nowrap;cursor:pointer}
table.tam.wide td.c{white-space:normal;min-width:12em}
table.tam td.c:hover{background:var(--gold-soft)}
table.tam td.lab{background:var(--cell);font-family:var(--f-ar);font-size:calc(var(--ar-size)*.92);width:1%;white-space:nowrap;font-weight:400}
table.tam td.lab.bnl{font-family:var(--f-bn);font-size:.95rem;white-space:normal;min-width:7.5em;line-height:1.4}
table.tam td.bnc{font-family:var(--f-bn);font-size:.95rem;line-height:1.5;white-space:normal;cursor:default}
table.tam td .sub{display:block;font-family:var(--f-bn);font-size:.8rem;color:var(--muted);line-height:1.3;margin-top:-4px;padding-bottom:4px}
table.tam.shade td{background:var(--cell)}
table.tam.mashq td.c{font-size:calc(var(--ar-size)*.8);padding:2px 6px}
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.pair{display:flex;direction:rtl;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden}
.pair>span{flex:1;font-family:var(--f-ar);font-size:calc(var(--ar-size)*.9);text-align:center;padding:2px 8px;line-height:2;cursor:pointer}
.pair>span+span{background:var(--cell);color:var(--muted);border-right:1.5px solid var(--ink)}
.jazm{display:flex;justify-content:center;gap:12px;direction:rtl}
.jazm div{border:1px solid var(--line);border-radius:12px;padding:4px 14px 6px;text-align:center}
.jazm .g{font-family:var(--f-ar);font-size:calc(var(--ar-size)*1.2);line-height:1.7;display:block}
.jazm .g.mod{font-family:"Noto Naskh Arabic","Geeza Pro","Arial",sans-serif}
.jazm small{font-size:.78rem;color:var(--muted)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pager .btn{justify-content:center;min-width:0}
.pager .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* zoom overlay */
.zoom{position:fixed;inset:0;z-index:50;background:rgba(5,20,17,.62);display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.zoom .zc{background:var(--surface);border-radius:20px;padding:22px 18px;max-width:640px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center}
.zoom .zw{font-family:var(--f-ar);font-size:calc(var(--ar-size)*1.9);line-height:2;direction:rtl}
/* quiz */
.qwrap{display:flex;flex-direction:column;gap:14px}
.qhead{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.qq{font-weight:700;font-size:1.15rem;line-height:1.5;margin:0}
.opts{display:flex;flex-direction:column;gap:9px}
.opts.two{display:grid;grid-template-columns:1fr 1fr}
.opt{border:2px solid var(--line);background:var(--surface);border-radius:13px;padding:12px 14px;text-align:left;display:flex;gap:12px;align-items:center;line-height:1.45}
.opt .l{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;font-size:.88rem;font-weight:700}
.opt .oa{font-family:var(--f-ar);font-size:1.7em;line-height:1.5}
.opt.right{border-color:var(--ok);background:var(--ok-soft)} .opt.right .l{background:var(--ok);color:var(--surface);border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)} .opt.wrong .l{background:var(--bad);color:var(--surface);border-color:var(--bad)}
.opt:disabled{cursor:default}
.why{border-radius:12px;padding:11px 13px;margin:0;font-size:.98rem}
.why.ok{background:var(--ok-soft)} .why.no{background:var(--bad-soft)}
.why b{display:block;margin-bottom:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{font-size:3rem;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.center{text-align:center}
.starsrow{display:flex;justify-content:center;gap:6px}
.starsrow svg{width:40px;height:40px}
.flash{min-height:260px;justify-content:center;text-align:center}
.flash .ar{font-size:calc(var(--ar-size)*1.08)}
.field{width:100%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:13px;padding:12px 14px;font:inherit}
.hit{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 13px;text-align:left;display:flex;flex-direction:column;gap:3px}
.hit small{color:var(--muted);font-size:.82rem}
mark{background:var(--gold-soft);color:inherit;border-radius:4px;padding:0 2px}
.set{display:flex;flex-direction:column;gap:6px}
.set label{font-weight:700}
input[type=range]{width:100%;accent-color:var(--accent)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 4px;font-size:.95rem}
.seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:700}
footer{color:var(--muted);font-size:.82rem;text-align:center;padding-top:8px;display:flex;flex-direction:column;gap:2px}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:99px;font-size:.92rem;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:calc(100% - 32px);text-align:center}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.pop{animation:pop .35s ease-out}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){.books,.acts{grid-template-columns:1fr}.tab{font-size:.72rem}.cart{font-size:1.2rem;padding:6px 26px}}