:root{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F6F7FA; --ink:#1A1F36; --muted:#5A6178; --line:#D7DCE6;
  --lapis:#1C2B5A; --lapis-deep:#111A3A; --on-lapis:#E9ECF6; --gold:#B8912F; --gold-soft:#E4CF8E; --gold-ink:#8A6A1C;
  --verm:#B0412D; --focus:#2F5BD3; --accent-2:#1C2B5A;
  --tj-madd:#D2462B; --tj-madd2:#A5122A; --tj-ghunna:#1E8A3A; --tj-idgham:#2F62C9; --tj-qalq:#8B3FB0; --tj-silent:#9AA0AE;
  --latin:"Literata", Georgia, "Times New Roman", serif;
  --quran:"Amiri Quran", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --clear:"Scheherazade New", "Amiri Quran", "Noto Naskh Arabic", serif;
  --naskh:"Noto Naskh Arabic", "Amiri Quran", Tahoma, sans-serif;
  --urdu:"Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --bengali:"Noto Serif Bengali", "Literata", serif;
  --kidsans:"Baloo 2", "Literata", system-ui, sans-serif;
  --qsize:1; --radius:10px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1330; --surface:#151D40; --surface-2:#1A2349; --ink:#E7EAF4; --muted:#A3AAC4; --line:#2A3563;
    --lapis:#0A1029; --lapis-deep:#060A1C; --on-lapis:#E7EAF4; --gold:#D8B660; --gold-soft:#6E5A26; --gold-ink:#E3C678;
    --verm:#E07A62; --focus:#8FB0FF; --accent-2:#D8B660;
    --tj-madd:#FF7A5C; --tj-madd2:#FF5470; --tj-ghunna:#4CD27A; --tj-idgham:#77A6FF; --tj-qalq:#C98BF0; --tj-silent:#7B84A3;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1330; --surface:#151D40; --surface-2:#1A2349; --ink:#E7EAF4; --muted:#A3AAC4; --line:#2A3563;
  --lapis:#0A1029; --lapis-deep:#060A1C; --on-lapis:#E7EAF4; --gold:#D8B660; --gold-soft:#6E5A26; --gold-ink:#E3C678;
  --verm:#E07A62; --focus:#8FB0FF; --accent-2:#D8B660;
  --tj-madd:#FF7A5C; --tj-madd2:#FF5470; --tj-ghunna:#4CD27A; --tj-idgham:#77A6FF; --tj-qalq:#C98BF0; --tj-silent:#7B84A3;
}
/* kids palette: sky, sunflower, teal */
:root[data-kids]{ --kbg:#E6F3FF; --ksun:#FFC53D; --kteal:#11707F; --kcoral:#FF7A59; --kcard:#FFFFFF; --kink:#18324A; --radius:18px }
@media (prefers-color-scheme: dark){ :root[data-kids]:not([data-theme="light"]){ --kbg:#0E2236; --kcard:#15314B; --kink:#EAF4FF; --kteal:#5FD0DF } }
:root[data-kids][data-theme="dark"]{ --kbg:#0E2236; --kcard:#15314B; --kink:#EAF4FF; --kteal:#5FD0DF }

html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 132px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--latin);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:root[data-kids] body{background:var(--kbg);color:var(--kink)}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
[lang=bn] body,:root[lang=bn] body{font-family:var(--bengali)}
:root[dir=rtl] body{font-family:var(--naskh)}

/* header */
.top{background:var(--lapis-deep);color:var(--on-lapis);position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
.top .wrap{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:19px;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:none}
.brand small{font-weight:400;color:#A9B1D1;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.top nav{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.top nav a{text-decoration:none;padding:6px 10px;border-radius:6px;font-size:15px;color:#C9CFE6;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.top nav a.kidlink{background:#FFC53D;color:#18324A;font-weight:600}
.top nav a.kidlink:hover{background:#FFD36B;color:#18324A}
.pill-select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:6px;padding:5px 8px;font-size:14px;max-width:130px}
.pill-select option{color:#111;background:#fff}
.icon-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:6px;width:34px;height:32px;display:grid;place-items:center;cursor:pointer;flex:none}
:root[data-kids] .top{background:var(--kteal)}
:root[data-kids][data-theme=dark] .top{background:#0A4A55}

/* hero */
.hero{background:var(--lapis);color:var(--on-lapis);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D8B660' stroke-opacity='.10'%3E%3Crect x='22' y='22' width='36' height='36'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-top:56px;padding-bottom:52px;text-align:center}
.basmala{font-family:var(--quran);color:var(--gold);font-size:clamp(34px,6.4vw,68px);line-height:1.9;margin:0 0 6px;direction:rtl}
.hero h1{font-weight:500;font-size:clamp(24px,3.2vw,34px);line-height:1.3;margin:0 auto 10px;max-width:26ch}
.hero p.lede{margin:0 auto 26px;max-width:60ch;color:#C7CDE4;font-size:17px}
.search{display:flex;max-width:620px;margin:0 auto;background:var(--surface);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.search input{flex:1;border:0;background:transparent;padding:14px 16px;font-size:17px;color:var(--ink);min-width:0}
.search input:focus{outline:none}
.search:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.search button{border:0;background:var(--gold);color:#1A1F36;padding:0 20px;font-weight:600;cursor:pointer}
.hint{margin-top:12px;font-size:14px;color:#A9B1D1}
.hero-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:20px}
.resume{color:var(--gold-soft);text-decoration:none;font-size:15px;border-bottom:1px solid currentColor}
:root[data-theme=dark] .resume{color:var(--gold)}
.kid-cta{background:#FFC53D;color:#18324A;text-decoration:none;font-weight:600;font-size:15px;padding:6px 14px;border-radius:999px}

/* index */
.bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:26px 0 14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:7px 14px;cursor:pointer;font-size:15px;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--lapis);color:#fff}
.field{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--muted)}
.field select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--ink);max-width:260px}
.count{margin-inline-start:auto;color:var(--muted);font-size:15px}
.index{list-style:none;margin:0 0 60px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;padding:14px 10px;text-decoration:none}
.index a:hover{background:var(--surface)}
.index a>span:last-child{text-align:end}
.index .nm{font-weight:600;font-size:17px;line-height:1.3}
.index .mn{color:var(--muted);font-size:14.5px;line-height:1.35}
.index .arn{font-family:var(--quran);font-size:25px;color:var(--accent-2);direction:rtl;line-height:1.6}
.index .sub{font-size:13px;color:var(--muted)}

.star{position:relative;width:40px;height:40px;display:grid;place-items:center;flex:none}
.star svg{position:absolute;inset:0;width:100%;height:100%}
.star svg path{fill:none;stroke:var(--gold);stroke-width:1.4}
.star b{position:relative;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);font-family:var(--latin)}
.star.sm{width:34px;height:34px}
.star.sm b{font-size:12px}
.star b.l3{font-size:10.5px;letter-spacing:-.03em}

/* surah */
.crumbs{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:18px 0 0;font-size:15px}
.crumbs a{color:var(--muted);text-decoration:none}
.plate{margin:16px 0 0;background:var(--lapis);color:var(--on-lapis);border-radius:14px;padding:30px clamp(18px,4vw,44px) 26px;position:relative;overflow:hidden}
.plate::before{content:"";position:absolute;inset:8px;border:1px solid rgba(216,182,96,.45);border-radius:9px;pointer-events:none}
.plate-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;position:relative}
.plate h1{margin:0;font-size:clamp(28px,4vw,40px);font-weight:500;line-height:1.15}
.plate .meaning{color:#C7CDE4;font-size:18px;margin-top:4px}
.plate .arname{font-family:var(--quran);color:var(--gold);font-size:clamp(46px,7vw,78px);line-height:1.3;direction:rtl}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 22px;margin:24px 0 0;padding:18px 0 0;border-top:1px solid rgba(216,182,96,.35);position:relative}
.facts dt{font-size:13.5px;color:#A9B1D1}
.facts dd{margin:2px 0 0;font-size:17px;font-weight:600}
.plate-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;position:relative}
.ghost{background:none;border:1px solid rgba(216,182,96,.6);color:var(--gold-soft);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:15px;text-decoration:none}
:root[data-theme=dark] .ghost{color:var(--gold)}

.toolbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);margin:0 -20px;padding:10px 20px}
.toolbar .row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.toolbar label{display:flex;gap:6px;align-items:center;font-size:14.5px;color:var(--muted)}
.toolbar select,.toolbar input[type=number]{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--ink);font-size:14.5px;max-width:280px}
.toolbar input[type=number]{width:78px}
.tafpick{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--gold);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:14.5px;color:var(--ink)}
.tafpick span{color:var(--muted)}
.size{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}
.size button{border:0;background:none;padding:5px 11px;cursor:pointer}
.size button+button{border-inline-start:1px solid var(--line)}
.check{display:flex;gap:6px;align-items:center;cursor:pointer}

.bism{font-family:var(--quran);text-align:center;font-size:calc(34px * var(--qsize));color:var(--accent-2);margin:34px 0 8px;direction:rtl;line-height:2}
.ayat{margin:0 0 70px}
.ayah{padding:22px 0 20px;border-bottom:1px solid var(--line)}
.ayah.flash{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 14%,transparent),transparent)}
.ayah-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ref{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.tag{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.tag.sajda{border-color:var(--verm);color:var(--verm)}
.acts{margin-inline-start:auto;display:flex;gap:6px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:5px 11px;font-size:14px;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--gold)}
.btn[aria-expanded=true]{background:var(--lapis);color:#fff;border-color:var(--lapis)}
.qtext{font-family:var(--quran);direction:rtl;text-align:right;font-size:calc(31px * var(--qsize));line-height:2.15;margin:14px 0 6px;color:var(--ink)}
.qtext .end{color:var(--verm);font-size:.8em;margin-inline-start:.2em;white-space:nowrap}
.translit{color:var(--muted);font-style:italic;font-size:calc(15.5px * var(--qsize));margin:6px 0 0;max-width:80ch}
.trans{font-size:calc(17.5px * var(--qsize));margin:8px 0 0;max-width:72ch;line-height:1.7}
.trans[lang=ur]{font-family:var(--urdu);line-height:2.4;max-width:none}
.trans[lang=bn]{font-family:var(--bengali)}
.trans[dir=rtl]{text-align:right}
.tafsir{margin:16px 0 4px;background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--gold);border-radius:8px;padding:18px clamp(14px,3vw,26px)}
.tafsir header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline;margin-bottom:8px}
.tafsir header strong{font-size:16px}
.tafsir header span{font-size:14px;color:var(--muted)}
.tchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px dashed var(--line)}
.tchips button{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:3px 11px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.tchips button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1A1F36}
.tbody{max-width:74ch;font-size:16.5px;line-height:1.75}
.tbody p{margin:0 0 .85em}
.tbody h4{font-size:16.5px;margin:1.3em 0 .4em;color:var(--gold-ink)}
.tbody .arq{font-family:var(--naskh);direction:rtl;text-align:right;font-size:19px;line-height:2;max-width:none}
.tbody[dir=rtl]{font-family:var(--naskh);font-size:19px;line-height:2.05;max-width:none;text-align:right}
.tbody .qq{color:var(--accent-2);font-weight:600}
.tbody .fn{color:var(--muted);font-size:.78em}
.nextprev{display:flex;justify-content:space-between;gap:12px;margin:0 0 60px}
.nextprev a{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:14px 16px;text-decoration:none;display:flex;flex-direction:column}
.nextprev a span{font-size:13.5px;color:var(--muted)}
.nextprev a.nx{text-align:end}
.loading{padding:60px 0;text-align:center;color:var(--muted)}

/* tafsir chooser dialog */
dialog{border:0;border-radius:14px;padding:0;max-width:640px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);box-shadow:0 24px 70px rgba(10,16,41,.35)}
dialog::backdrop{background:rgba(10,16,41,.55)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.dlg-h h2{margin:0;font-size:20px;font-weight:600}
.dlg-b{padding:8px 22px 22px;max-height:70vh;overflow:auto}
.dlg-b h3{font-size:14px;color:var(--muted);font-weight:500;margin:18px 0 8px}
.topt{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:0 0 8px;cursor:pointer}
.topt:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.topt input{grid-row:span 3;margin-top:5px;accent-color:var(--gold)}
.topt b{font-size:16px}
.topt .by{font-size:14px;color:var(--muted)}
.topt .ds{font-size:14.5px}
.badge{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:0 8px;margin-inline-start:6px;color:var(--muted);vertical-align:2px}
.badge.full{border-color:var(--gold);color:var(--gold-ink)}

/* search */
.results{list-style:none;padding:0;margin:0 0 60px}
.results li{border-bottom:1px solid var(--line);padding:16px 0}
.results a.rref{font-weight:600;text-decoration:none;color:var(--gold-ink)}
.results .qtext{font-size:24px;margin:6px 0}
mark{background:color-mix(in srgb,var(--gold) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.page-title{font-size:30px;font-weight:500;margin:30px 0 6px}
.muted{color:var(--muted)}
.prose{max-width:70ch;margin:0 0 70px}
.prose h2{font-size:22px;font-weight:600;margin:34px 0 8px}
.prose ul{padding-inline-start:20px}
.prose li{margin:0 0 6px}

footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--lapis-deep);color:#fff;padding:9px 16px;border-radius:8px;font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.on{opacity:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* revelation */
.rev{margin:18px 0 6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px clamp(16px,3vw,32px)}
.rev-h{margin:0 0 14px;font-size:21px;font-weight:600;display:flex;align-items:center;gap:10px}
.rev-h::before{content:"";width:10px;height:10px;transform:rotate(45deg);background:var(--gold);flex:none}
.rev-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px 34px}
.rev-facts{margin:0;display:grid;gap:12px;align-content:start}
.rev-facts dt{font-size:13.5px;color:var(--muted)}
.rev-facts dd{margin:1px 0 0;font-weight:600}
.rev-facts dd a{color:var(--gold-ink)}
.rev-year{display:inline-block;background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid var(--gold);border-radius:8px;padding:2px 10px;font-variant-numeric:tabular-nums}
.rev-ctx h3{margin:0 0 6px;font-size:16px;font-weight:600}
.rev-ctx p{margin:0 0 10px;max-width:68ch;line-height:1.7}
.rev-ctx p[dir=rtl]{font-family:var(--naskh);font-size:18.5px;line-height:2;max-width:none}
.rev-ctx .src{font-size:13.5px;color:var(--muted)}
.rev details{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.rev summary{cursor:pointer;font-weight:600;color:var(--gold-ink)}
.rev details .tbody{margin-top:10px;font-size:15.5px}
/* chronology */
.tl{list-style:none;margin:10px 0 70px;padding:0;position:relative}
.tl::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:21px;width:2px;background:var(--line)}
.tl .band{position:relative;margin:26px 0 10px;padding-inline-start:52px;font-weight:600;font-size:19px}
.tl .band::before{content:"";position:absolute;inset-inline-start:13px;top:5px;width:18px;height:18px;transform:rotate(45deg);background:var(--lapis);border:2px solid var(--gold)}
.tl .hij{position:relative;margin:22px 0;padding:12px 16px;margin-inline-start:52px;background:var(--lapis);color:var(--on-lapis);border-radius:10px;font-weight:600}
.tl .it{position:relative;padding-inline-start:52px}
.tl .it::before{content:"";position:absolute;inset-inline-start:17px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--gold)}
.tl .it.ev::before{background:var(--gold)}
.tl .it a{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:9px 10px;border-radius:8px;text-decoration:none}
.tl .it a:hover{background:var(--surface)}
.tl .ord{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.tl .nm{font-weight:600}
.tl .arn{font-family:var(--quran);font-size:22px;color:var(--accent-2);direction:rtl}
.tl .evt{display:block;font-weight:400;font-size:14.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.tl .evt b{color:var(--gold-ink);font-weight:600}
@media (max-width:760px){.rev-grid{grid-template-columns:1fr}}

/* ---------- KIDS ---------- */
.k-hero{padding:34px 0 10px;text-align:center}
.k-hero h1{font-family:var(--kidsans);font-size:clamp(32px,5vw,50px);line-height:1.1;margin:0 0 8px;color:var(--kteal);font-weight:700}
:root[dir=rtl] .k-hero h1{font-family:var(--naskh)}
.k-hero p{margin:0 auto;max-width:52ch;font-size:18px}
.k-progress{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--kcard);border-radius:999px;padding:6px 16px;font-weight:600}
.k-progress .dot{width:12px;height:12px;border-radius:50%;background:var(--ksun)}
.k-h2{font-family:var(--kidsans);font-size:24px;margin:30px 0 12px;color:var(--kink)}
.k-grid{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.k-grid a{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--kcard);border-radius:var(--radius);padding:16px 10px 14px;text-decoration:none;border:3px solid transparent;position:relative;box-shadow:0 3px 0 rgba(17,112,127,.18)}
.k-grid a:hover{border-color:var(--ksun)}
.k-grid .knum{width:34px;height:34px;border-radius:50%;background:var(--kteal);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;font-family:var(--kidsans)}
.k-grid .kar{font-family:var(--clear);font-size:30px;line-height:1.7;color:var(--kink)}
.k-grid .ktr{font-family:var(--kidsans);font-weight:600;font-size:16px;line-height:1.2}
.k-grid .kmn{font-size:13.5px;opacity:.75;text-align:center}
.k-grid .kstar{position:absolute;top:8px;inset-inline-end:10px;color:var(--ksun);font-size:22px;line-height:1}
.k-all{display:inline-block;margin:0 0 60px;font-weight:600;color:var(--kteal)}

.k-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;justify-content:space-between;margin:22px 0 10px}
.k-title{display:flex;align-items:center;gap:14px}
.k-title .knum{width:48px;height:48px;border-radius:50%;background:var(--kteal);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;font-family:var(--kidsans);flex:none}
.k-title h1{margin:0;font-family:var(--kidsans);font-size:30px;line-height:1.1}
.k-title .mn{font-size:16px;opacity:.8}
.k-title .kar{font-family:var(--clear);font-size:38px;color:var(--kteal);line-height:1.4;margin-inline-start:auto}
.k-learn{border:0;background:var(--ksun);color:#18324A;font-weight:700;border-radius:999px;padding:10px 18px;cursor:pointer;font-family:var(--kidsans);font-size:16px}
.k-learn[aria-pressed=true]{background:var(--kteal);color:#fff}
.k-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--kcard);border-radius:var(--radius);padding:12px 16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);z-index:15}
.k-tools label{display:flex;gap:6px;align-items:center;cursor:pointer;font-weight:500}
.k-tools .seg button{padding:6px 12px}
.k-tools .seg{background:var(--kbg);border-color:transparent}
.k-tools .seg button[aria-pressed=true]{background:var(--kteal)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:14.5px}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.k-tip{font-size:14.5px;opacity:.75;margin:10px 0 0}
.k-verses{margin:18px 0 30px;display:grid;gap:16px}
.k-card{background:var(--kcard);border-radius:var(--radius);padding:18px clamp(14px,3vw,28px) 16px;box-shadow:0 3px 0 rgba(17,112,127,.14)}
.k-card .top-row{display:flex;align-items:center;gap:10px}
.k-card .vnum{min-width:38px;height:38px;border-radius:50%;background:var(--ksun);color:#18324A;display:grid;place-items:center;font-weight:700;font-family:var(--kidsans)}
.k-card .kbtn{margin-inline-start:auto;border:2px solid var(--kteal);background:none;color:var(--kteal);border-radius:999px;padding:4px 14px;font-weight:600;cursor:pointer;font-family:var(--kidsans)}
.k-card .kbtn[aria-expanded=true]{background:var(--kteal);color:#fff}
.k-ar{direction:rtl;text-align:right;font-size:calc(40px * var(--qsize));line-height:2.3;margin:10px 0 6px;word-spacing:.18em;color:var(--kink)}
.k-ar.clear{font-family:var(--clear)}
.k-ar.mushaf{font-family:var(--quran)}
.k-ar .w{border-radius:8px;cursor:pointer;padding:0 .04em}
.k-ar .w.on{background:color-mix(in srgb,var(--ksun) 55%,transparent)}
.k-ar .end{color:var(--kcoral);font-size:.75em}
.k-tr{font-size:calc(18px * var(--qsize));line-height:1.65;margin:4px 0 0}
.k-tr[lang=ur]{font-family:var(--urdu);line-height:2.4;text-align:right}
.k-tr[lang=bn]{font-family:var(--bengali)}
.k-ex{margin:12px 0 0;padding:12px 16px;background:var(--kbg);border-radius:12px;font-size:16.5px;line-height:1.7}
.k-ex[dir=rtl]{font-family:var(--naskh);font-size:19px;text-align:right}
.k-bism{font-family:var(--clear);text-align:center;font-size:calc(40px * var(--qsize));color:var(--kteal);margin:24px 0 0;direction:rtl}
.tj-on .c1{color:var(--tj-madd)} .tj-on .c2{color:var(--tj-madd2)} .tj-on .c3{color:var(--tj-ghunna)}
.tj-on .c4{color:var(--tj-idgham)} .tj-on .c5{color:var(--tj-qalq)} .tj-on .c6{color:var(--tj-silent)}
.k-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 60px}
.k-foot a{background:var(--kcard);border-radius:var(--radius);padding:12px 18px;text-decoration:none;font-weight:600;font-family:var(--kidsans)}


/* daily duas */
.du-tabs{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);margin:6px 0 14px}
.du-tabs button{border:0;background:none;padding:9px 18px;cursor:pointer;font-size:15.5px;font-weight:600;color:var(--muted)}
.du-tabs button[aria-selected=true]{background:var(--gold);color:#1A1F36}
:root[data-kids] .du-tabs{background:var(--kcard);border-color:transparent;border-radius:999px;font-family:var(--kidsans)}
:root[data-kids] .du-tabs button[aria-selected=true]{background:var(--kteal);color:#fff}
.dly-ic{font-size:24px;line-height:1}
.dly-w{font-size:16.5px}
.dly-ar{font-family:var(--clear);direction:rtl;text-align:right;font-size:calc(28px * var(--qsize));line-height:2;margin:10px 0 2px}
.dly-tl{font-style:italic;color:var(--muted);margin:0 0 6px;max-width:80ch}
.dly-n{margin:6px 0 6px;padding:10px 14px;background:var(--surface-2);border-radius:10px;max-width:74ch;font-size:15.5px}
.dly-n[dir=rtl]{font-family:var(--naskh);font-size:18px;max-width:none;text-align:right}
.k-card.dly .dly-ic{font-size:34px}
.k-card.dly .dly-w{font-family:var(--kidsans);font-size:19px}
.k-card.dly .dly-ar{font-size:calc(38px * var(--qsize))}
.k-card.dly .dly-tl{color:inherit;opacity:.75}

/* menu */
.menu-btn{display:none}
.menu-panel{background:var(--lapis-deep);border-top:1px solid rgba(255,255,255,.08);position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);z-index:29;box-shadow:0 14px 30px rgba(6,10,28,.35)}
:root[data-kids] .menu-panel{background:var(--kteal)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:14px 0 16px}
.menu-grid a{display:flex;flex-direction:column;gap:2px;color:#fff;text-decoration:none;background:rgba(255,255,255,.07);border-radius:10px;padding:10px 14px;font-weight:600}
.menu-grid a span{font-family:var(--quran);color:var(--gold-soft);font-weight:400;font-size:18px;line-height:1.4}
:root[data-theme=dark] .menu-grid a span{color:#D8B660}
.menu-grid a:hover{background:rgba(255,255,255,.14)}
@media (max-width:1180px){.menu-btn{display:grid}}
.disc a.kid{background:#FFC53D;color:#18324A}
.disc a.kid .disc-ar{color:#11707F}
.disc a.kid>span:last-child{color:#18324A}
.disc{margin-bottom:26px}
.k-cta2{display:inline-block;background:var(--kteal);color:#fff;text-decoration:none;font-weight:700;font-family:var(--kidsans);padding:10px 20px;border-radius:999px;font-size:17px}
.kd-meta{font-size:14px;opacity:.8}
.kd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.kd-foot a{color:var(--kteal);font-size:14.5px}
.k-legend{background:var(--kcard);border-radius:var(--radius);padding:10px 16px}
.du-ex{margin:8px 0 10px;padding:12px 16px;background:var(--surface-2);border-radius:10px;max-width:74ch;line-height:1.7}
.du-ex[dir=rtl]{font-family:var(--naskh);font-size:18.5px;max-width:none;text-align:right}
.du-ex p{margin:0 0 .6em}
.du-src{font-size:13px;color:var(--muted);margin:6px 0 0!important}
.du-links{margin:0;font-size:14px}

/* prophets, duas, discover */
.pr-grid{list-style:none;padding:0;margin:20px 0 70px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pr-grid a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-decoration:none;height:100%}
.pr-grid a:hover{border-color:var(--gold)}
.pr-ar{font-family:var(--quran);font-size:32px;color:var(--accent-2);line-height:1.7}
.pr-grid strong{font-size:17px}
.pr-grid .muted{font-size:13.5px}
.pr-intro{position:relative;margin:18px 0 0;max-width:70ch;color:#D7DCEE;font-size:17px;line-height:1.7}
.pr-intro[dir=rtl]{font-family:var(--naskh);max-width:none}
.pr-list{margin:20px 0 0;display:grid;gap:10px}
.pr-pass{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pr-pass summary{display:flex;gap:14px;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.pr-pass summary::-webkit-details-marker{display:none}
.pr-pass summary>span:last-child{display:flex;flex-direction:column}
.pr-pass[open] summary{border-bottom:1px solid var(--line)}
.pr-n{width:30px;height:30px;border-radius:50%;background:var(--lapis);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.pr-body{padding:6px 18px 18px}
.pv{padding:12px 0;border-bottom:1px dashed var(--line)}
.pv-ar{font-family:var(--quran);direction:rtl;text-align:right;font-size:calc(26px * var(--qsize));line-height:2.1;margin:0 0 4px}
.pv-ar .end,.du-ar .end{color:var(--verm);font-size:.8em}
.pv-tr{margin:0;max-width:72ch}
.pv-tr .ref{color:var(--muted);font-size:13.5px;margin-inline-end:6px}
.pr-body .btn{display:inline-block;margin-top:12px;text-decoration:none}
.du-cats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.du-cats button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:14.5px}
.du-cats button[aria-pressed=true]{background:var(--lapis);color:#fff;border-color:var(--lapis)}
.du-list{list-style:none;padding:0;margin:0 0 70px;display:grid;gap:12px}
.du{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--gold);border-radius:12px;padding:16px 20px}
.du-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.du-by{font-size:14.5px;color:var(--gold-ink)}
.du-ar{font-family:var(--quran);direction:rtl;text-align:right;font-size:calc(28px * var(--qsize));line-height:2.1;margin:10px 0 4px}
.du-tr{margin:0 0 8px;max-width:72ch;line-height:1.7}
.du .rref{font-size:14px;color:var(--muted)}
.disc-h{font-size:22px;font-weight:600;margin:10px 0 12px}
.disc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 70px}
.disc a{background:var(--lapis);color:var(--on-lapis);border-radius:12px;padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:4px}
.disc a:hover{outline:2px solid var(--gold)}
.disc-ar{font-family:var(--quran);color:var(--gold);font-size:28px;direction:rtl;text-align:end;line-height:1.5}
.disc strong{font-size:18px}
.disc a>span:last-child{color:#C7CDE4;font-size:14.5px;line-height:1.5}
.bk-code{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:12px/1.4 ui-monospace,monospace;background:var(--surface-2);color:var(--ink);word-break:break-all}
@media (max-width:1180px){.top nav a.hide-md{display:none}}

/* adult: hifz, favourites, notes, compare, my space */
.hifz-l{background:color-mix(in srgb,var(--gold) 14%,transparent);border-radius:7px;padding:3px 9px}
.hz-tip{margin:14px 0 0;padding:10px 14px;border-radius:8px;background:color-mix(in srgb,var(--gold) 12%,transparent);font-size:15px}
.btn.hz-only{display:none}
#ayat.hifz .btn.hz-only{display:inline-block}
.btn.hz-only[aria-pressed=true]{background:#2E8B57;border-color:#2E8B57;color:#fff}
#ayat.hifz .qtext .w{filter:blur(8px);cursor:pointer;transition:filter .2s}
#ayat.hifz .qtext .w.shown{filter:none}
.tag.known{border-color:#2E8B57;color:#2E8B57}
.btn.fav{font-size:16px;line-height:1;padding:5px 9px}
.btn.fav[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.vnote-view{margin:10px 0 0;padding:10px 14px;border-radius:8px;background:var(--surface-2);border-inline-start:3px solid var(--verm);font-size:15.5px;max-width:72ch}
.vnote-view b{color:var(--verm);margin-inline-end:6px}
.vnote-ed{margin:10px 0 0;display:grid;gap:8px;max-width:72ch}
.vnote-ed textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--surface);color:var(--ink);font:inherit;resize:vertical}
.vnote-ed .btn{justify-self:start}
.tchips .cmp-btn{margin-inline-start:auto;border-style:dashed}
.ayah.cmp{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}
.ayah.cmp>*{grid-column:1/-1}
.ayah.cmp>.tafsir:not(.tcmp){grid-column:1}
.ayah.cmp>.tcmp{grid-column:2}
.tcmp-l{display:flex;gap:8px;align-items:center;font-size:14.5px;color:var(--muted);margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.tcmp-l select{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px 8px;color:var(--ink);max-width:100%}
.me-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:22px 0 70px}
.me-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.me-card.wide{grid-column:1/-1}
.me-card h2{margin:0 0 10px;font-size:18px;font-weight:600;display:flex;align-items:center;gap:9px}
.me-card h2::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--gold)}
.me-big{font-size:32px;font-weight:600;margin:0 0 6px;font-variant-numeric:tabular-nums}
.me-sub{margin:0 0 8px;font-weight:600}
.me-bar{height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin:4px 0 12px}
.me-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#D8B660);border-radius:999px;min-width:4px}
.me-days,.me-row{display:flex;flex-wrap:wrap;gap:8px}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1A1F36;font-weight:600;text-decoration:none}
.me-portion{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;background:var(--surface-2);border-radius:10px;padding:14px 16px;margin:6px 0 12px}
.me-portion div{display:flex;flex-direction:column}
.me-portion small{color:var(--muted)}
.me-portion strong{font-size:18px}
.me-list{list-style:none;padding:0;margin:8px 0 0}
.me-list li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}
.me-verses{list-style:none;padding:0;margin:0}
.me-verses li{border-bottom:1px solid var(--line);padding:12px 0}
.me-ar{font-family:var(--quran);direction:rtl;text-align:right;font-size:24px;line-height:2;margin:4px 0}
.me-tr{margin:0;color:var(--muted);max-width:72ch}
@media (max-width:760px){.ayah.cmp{display:block}}

/* kids dashboard, badges, quiz, memory */
.k-dash{margin:20px 0 0}
.k-bar-wrap{background:var(--kcard);border-radius:var(--radius);padding:18px 20px;box-shadow:0 3px 0 rgba(17,112,127,.14)}
.k-bar-label{display:flex;justify-content:space-between;gap:10px;font-family:var(--kidsans);font-size:17px;margin-bottom:8px}
.k-bar{height:18px;border-radius:999px;background:var(--kbg);overflow:hidden}
.k-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--kteal),#29A3B5 60%,var(--ksun));transition:width .6s ease;min-width:18px}
.k-chips{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:15px;font-weight:600}
.k-h2 small{font-family:var(--latin);font-size:15px;font-weight:400;opacity:.7;margin-inline-start:8px}
.k-badges{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.k-badges li{background:var(--kcard);border-radius:var(--radius);padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.55}
.k-badges li.got{opacity:1;box-shadow:0 0 0 3px var(--ksun) inset}
.k-badges strong{font-family:var(--kidsans);font-size:15.5px;line-height:1.2}
.k-badges span{font-size:13px;opacity:.8;line-height:1.35}
.medal{position:relative;width:62px;height:62px;display:grid;place-items:center;margin-bottom:4px}
.medal svg{position:absolute;inset:0;width:100%;height:100%}
.medal path{fill:var(--ksun);stroke:#C98A0B;stroke-width:1.2}
.medal b{position:relative;font-family:var(--kidsans),var(--naskh);font-size:17px;color:#18324A}
.medal.off path{fill:none;stroke:currentColor;stroke-dasharray:3 3;opacity:.6}
.medal.off b{color:inherit;opacity:.6}
#badgePop{position:fixed;left:50%;top:calc(80px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px) scale(.9);opacity:0;pointer-events:none;z-index:60;display:flex;align-items:center;gap:14px;background:var(--kcard,#fff);color:var(--kink,#18324A);border:3px solid var(--ksun,#FFC53D);border-radius:20px;padding:12px 20px 12px 14px;box-shadow:0 18px 50px rgba(10,30,50,.3);transition:opacity .25s,transform .35s cubic-bezier(.2,1.4,.4,1);max-width:calc(100% - 32px)}
#badgePop.on{opacity:1;transform:translate(-50%,0) scale(1)}
#badgePop div{display:flex;flex-direction:column;line-height:1.3}
#badgePop small{font-size:13px;opacity:.75}
#badgePop strong{font-family:var(--kidsans);font-size:19px}
#badgePop span{font-size:14px}
.k-grid .kq-mark{position:absolute;top:8px;inset-inline-start:10px;width:22px;height:22px;border-radius:50%;background:var(--kteal);color:#fff;font-size:13px;display:grid;place-items:center;font-weight:700}
.k-reset{background:none;border:1px dashed currentColor;border-radius:999px;padding:6px 14px;cursor:pointer;opacity:.7;font-size:14px}
.k-mini{border:2px solid var(--kteal);background:none;color:var(--kteal);border-radius:999px;padding:3px 12px;cursor:pointer;font-weight:600}
.k-memo-l{background:var(--kbg);border-radius:999px;padding:3px 12px}
.k-verses.memo .k-ar .w{filter:blur(9px);background:color-mix(in srgb,var(--kteal) 14%,transparent);transition:filter .25s}
.k-verses.memo .k-ar .w.shown{filter:none;background:none}
.k-quiz-wrap{margin:10px 0 30px}
.k-quiz{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:q}
.k-quiz li{background:var(--kcard);border-radius:var(--radius);padding:16px 18px;counter-increment:q;box-shadow:0 3px 0 rgba(17,112,127,.14);border:3px solid transparent}
.k-quiz li.ok{border-color:#3CB371}
.k-quiz li.ko{border-color:var(--kcoral)}
.kq{font-family:var(--kidsans);font-weight:600;font-size:18px;margin:0 0 10px}
.kq::before{content:counter(q) ". ";color:var(--kteal)}
.kq-show{font-family:var(--clear);direction:rtl;text-align:right;font-size:30px;line-height:2;margin:0 0 10px;background:var(--kbg);border-radius:12px;padding:4px 14px}
.kq-opts{display:flex;flex-wrap:wrap;gap:10px}
.kq-o{border:2px solid var(--kteal);background:none;color:inherit;border-radius:14px;padding:8px 16px;cursor:pointer;font-size:16px;font-weight:600}
.kq-o.ar{font-family:var(--clear);font-size:24px;font-weight:400;direction:rtl;line-height:1.8}
.kq-o:hover:not(:disabled){background:var(--kbg)}
.kq-o.good{background:#3CB371;border-color:#3CB371;color:#fff}
.kq-o.bad{background:var(--kcoral);border-color:var(--kcoral);color:#fff}
.kq-o:disabled{cursor:default}
.kq-fb{margin:8px 0 0;font-weight:600;min-height:1em}
.k-score{background:var(--ksun);color:#18324A;border-radius:var(--radius);padding:16px 20px;margin-top:14px;font-size:22px;font-family:var(--kidsans)}
.k-score p{font-size:17px;margin:4px 0 10px}
.k-score .k-learn{background:#fff;margin-top:6px}
@media (prefers-reduced-motion:reduce){#badgePop,.k-bar i{transition:none}}

@media (max-width:760px){
  .top .wrap{gap:8px}
  .brand small,.top nav a.hide-sm{display:none}
  .plate-top{grid-template-columns:1fr}
  .plate .arname{text-align:start}
  .toolbar,.k-tools{position:static}
  .index{grid-template-columns:1fr}
  .qtext{font-size:calc(27px * var(--qsize))}
  .k-ar{font-size:calc(34px * var(--qsize))}
  .k-title .kar{margin-inline-start:0}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
}
@media (max-width:420px){.brand span{display:none}.pill-select{max-width:96px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* audio */
.audio-ctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.btn.play{font-size:12px;padding:5px 10px}
.ayah.playing{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 18%,transparent),transparent)}
.ayah.playing .btn.play{background:var(--gold);border-color:var(--gold);color:#1A1F36}
.kplay{margin-inline-start:6px;width:38px;height:38px;border-radius:50%;border:0;background:var(--kteal);color:#fff;cursor:pointer;font-size:14px}
.k-card.playing{box-shadow:0 0 0 4px var(--ksun)}
.seo-block{padding:30px 0 60px}
.seo-block h1{font-size:28px;font-weight:500}
.seo-block .qtext{font-size:26px}
.seo-list{columns:3 220px;padding:0;list-style:none}
.seo-list li{margin:0 0 6px}