/* Layout: short hero, five large section tiles; the adhkar tile opens a second view with the five prayers as tabs, each holding its wird with tap-counters. */
:root{
  --bg:#EEF3F1; --paper:#FBFDFC; --ink:#14302B; --muted:#5A716C; --gold:#9A7414; --gold-soft:#E9DFC2;
  --line:#D4E0DC; --verse:#0F4A3F; --hero:#0E2B25; --hero-ink:#F3EBD6; --hero-gold:#D9B45C; --chip:#F4EFDF; --done:#2E7D5B;
  --f-display:"Reem Kufi","Amiri",serif; --f-body:"Amiri","Noto Naskh Arabic","Times New Roman",serif; --f-quran:"Amiri Quran","Amiri",serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C1715; --paper:#132320; --ink:#E4EEEA; --muted:#9AB0AA; --gold:#D9B45C; --gold-soft:#3A3420;
  --line:#24403A; --verse:#9FD8C8; --hero:#08130F; --chip:#1D2C27; --done:#6FCB9F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1715; --paper:#132320; --ink:#E4EEEA; --muted:#9AB0AA; --gold:#D9B45C; --gold-soft:#3A3420;
  --line:#24403A; --verse:#9FD8C8; --hero:#08130F; --chip:#1D2C27; --done:#6FCB9F; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.75;direction:rtl}
.wrap{max-width:860px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--gold)}
button{font:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.35}

.hero{background:var(--hero);color:var(--hero-ink);
  background-image:radial-gradient(circle at 50% 50%,transparent 13px,rgba(217,180,92,.15) 13.6px,transparent 14.6px),
  linear-gradient(45deg,transparent 46%,rgba(217,180,92,.12) 46.5%,rgba(217,180,92,.12) 47.5%,transparent 48%,transparent 52%,rgba(217,180,92,.12) 52.5%,rgba(217,180,92,.12) 53.5%,transparent 54%),
  linear-gradient(-45deg,transparent 46%,rgba(217,180,92,.12) 46.5%,rgba(217,180,92,.12) 47.5%,transparent 48%,transparent 52%,rgba(217,180,92,.12) 52.5%,rgba(217,180,92,.12) 53.5%,transparent 54%);
  background-size:56px 56px}
.hero .wrap{padding-block:26px 46px;display:flex;align-items:center;gap:18px}
.portrait{width:92px;height:106px;flex:none;border-radius:46px 46px 10px 10px;border:2px solid var(--hero-gold);padding:3px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:43px 43px 7px 7px;display:block}
.hero h1{font-size:clamp(30px,7vw,42px);color:var(--hero-ink)}
.hero p{margin:0;color:#D8CFB6;font-size:16px}
.hero p b{font-family:var(--f-display);color:#fff;font-weight:500}

/* home tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:-26px;position:relative}
.tile{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:inherit;cursor:pointer;text-align:right;transition:border-color .2s}
.tile:hover{border-color:var(--gold)}
.tile.main{grid-column:1/-1;border-color:var(--gold);padding:22px 20px}
.tile .ic{width:46px;height:46px;flex:none;color:var(--gold)}
.tile.main .ic{width:58px;height:58px}
.tile h2{font-size:20px;color:var(--gold)}
.tile.main h2{font-size:24px}
.tile p{margin:0;font-size:16px;color:var(--muted);line-height:1.6}
.tile .go{margin-right:auto;font-family:var(--f-display);color:var(--gold);font-size:24px}
.tile .soon{margin-right:auto;font-family:var(--f-display);font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:1px 10px;white-space:nowrap}
.tile.dim{cursor:default}
.tile.dim:hover{border-color:var(--line)}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* adhkar view */
.bar{display:flex;align-items:center;gap:10px;margin:-26px 0 0;position:relative}
.back{background:var(--paper);border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:6px 16px;font-family:var(--f-display);font-size:14.5px;cursor:pointer}
.now{font-size:14.5px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.prayers{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:18px 0 6px}
.pt{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 2px 6px;cursor:pointer;color:var(--ink);text-align:center;line-height:1.3}
.pt b{display:block;font-family:var(--f-display);font-size:18px;font-weight:500}
.pt small{font-size:13px;color:var(--muted)}
.pt[aria-selected="true"]{background:var(--hero);border-color:var(--hero-gold)}
.pt[aria-selected="true"] b{color:var(--hero-gold)}
.pt[aria-selected="true"] small{color:#D8CFB6}
.ph{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 8px}
.ph h2{font-size:24px}
.ph span{font-size:14.5px;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}
.it{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.it.fri{border-color:var(--gold);background:var(--chip)}
.it .tx{flex:1;min-width:0}
.it .tg{font-family:var(--f-display);font-size:13px;color:var(--gold)}
.it .dz{font-family:var(--f-quran);color:var(--verse);font-size:20px;line-height:1.9;margin:0}
.it .nt{font-size:14.5px;color:var(--muted);margin:0}
.ctr{flex:none;width:76px;height:76px;border-radius:50%;border:none;background:none;position:relative;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ctr svg{position:absolute;inset:0}
.ctr .bgc{stroke:var(--line)}.ctr .fgc{stroke:var(--gold);transition:stroke-dashoffset .2s}
.ctr .n{position:relative;font-family:var(--f-display);font-size:20px;font-variant-numeric:tabular-nums;line-height:1}
.ctr .of{position:relative;display:block;font-size:13px;color:var(--muted)}
.ctr.full .fgc{stroke:var(--done)}.ctr.full .n{color:var(--done)}
.rd{flex:none;font-family:var(--f-display);font-size:14.5px;text-decoration:none;color:var(--paper);background:var(--gold);border-radius:999px;padding:7px 16px;white-space:nowrap}
.chk{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);background:none;color:transparent;cursor:pointer;font-size:18px}
.chk.on{background:var(--done);border-color:var(--done);color:#fff}
.reset{display:block;margin:16px auto 0;background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:5px 16px;font-size:14.5px;cursor:pointer}
.foot{padding-block:34px 40px;text-align:center;color:var(--muted);font-size:14.5px}
@media (max-width:420px){.pt b{font-size:13px}.pt{padding:8px 0 6px}.ctr{width:66px;height:66px}.it{padding:12px}}

.tq{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 20px;margin-top:18px}
.tqh{text-align:center;border-bottom:1px solid var(--gold-soft);padding-bottom:14px;margin-bottom:14px}
.eyebrow{font-family:var(--f-display);color:var(--gold);font-size:14.5px;letter-spacing:.06em}
.tqh h2{font-size:30px;color:var(--gold)}
.tql{margin:6px auto 0;max-width:32em;color:var(--verse)}
.tf{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:0 0 6px}
.tf div{border:1px solid var(--line);border-radius:10px;padding:6px 12px}
.tf dt{font-family:var(--f-display);font-size:13px;color:var(--muted)}
.tf dd{margin:0;font-size:16px}
.tq h3{font-size:20px;color:var(--gold);margin:18px 0 4px}
.tq p{margin:0;text-align:justify}
.chain{list-style:none;margin:8px 0 0;padding:0 14px 0 0;border-right:2px solid var(--gold-soft)}
.chain li{position:relative;padding:3px 0;font-size:18px}
.chain li::before{content:"";position:absolute;right:-21px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--gold)}
.chain li:first-child{font-family:var(--f-display);color:var(--gold)}
.nt2{font-size:14.5px;color:var(--muted);margin-top:8px!important}
.marks{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.marks li{font-family:var(--f-display);font-size:14.5px;background:var(--chip);border-radius:999px;padding:3px 14px}
.sanad{margin-top:20px;border:1.5px dashed var(--gold);border-radius:12px;padding:12px 16px;text-align:center}
.sanad h3{margin:0 0 2px}.sanad p{text-align:center;color:var(--muted);font-size:14.5px}
.soonbox{text-align:center;border-style:dashed}.soonbox h3{margin:0 0 4px}.soonbox p{text-align:center;color:var(--muted);font-size:16px}

.ms-h{text-align:center;margin:18px 0 12px}.ms-h h2{font-size:30px;color:var(--gold)}.ms-h p{margin:4px auto 0;color:var(--muted);max-width:32em;font-size:16px}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ms{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.ms .mk{font-family:var(--f-display);font-size:13px;color:var(--muted)}
.ms h3{font-size:20px;color:var(--gold)}
.hd{margin:4px 0 0;font-size:16px;color:var(--verse);line-height:1.8}
.nx{margin:8px 0 0;font-family:var(--f-display);font-size:14.5px;color:var(--ink);background:var(--chip);border-radius:10px;padding:6px 10px}
.nx b{color:var(--gold);font-weight:700}
.wd{margin:6px 0 0;font-size:13px;color:var(--muted)}
.ms-h2{margin-top:12px;background:var(--hero);color:var(--hero-ink);border:1px solid var(--hero-gold);border-radius:14px;padding:16px}
.ms-h2 h3{color:var(--hero-gold);font-size:20px}.ms-h2 p{margin:4px 0 0;font-size:16px;color:#D8CFB6}
.ms-h2 .nx{background:rgba(217,180,92,.14);color:var(--hero-ink)}.ms-h2 .nx b{color:var(--hero-gold)}
.ms-t{font-size:24px;color:var(--gold);margin:22px 0 8px}
.up{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.up li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.up li.soon{border-color:var(--gold)}
.dt{grid-row:span 3;text-align:center;min-width:74px;border-left:1px solid var(--line);padding-left:12px;line-height:1.35}
.dt .d1{font-family:var(--f-display);font-size:24px;color:var(--gold);display:block}
.dt .d2{font-size:13px;color:var(--muted);display:block}
.dt .d3{font-size:13px;color:var(--ink);display:block;margin-top:4px;font-family:var(--f-display)}
.up h4{margin:0;font-family:var(--f-display);font-size:18px;color:var(--ink);font-weight:500}
.up .in{font-size:13px;color:var(--gold);font-family:var(--f-display)}
.up p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.7}
.up .wd{font-size:13px}
.pt.fri{border-color:var(--gold)}

.up details.wr{grid-column:1/-1;margin-top:8px;border:1px solid var(--gold);border-radius:12px;background:var(--chip)}
.wr summary{cursor:pointer;list-style:none;font-family:var(--f-display);color:var(--gold);font-size:16px;padding:9px 12px;line-height:1.6}
.wr summary::-webkit-details-marker{display:none}
.wr summary::after{content:" ＋";color:var(--muted)}.wr[open] summary::after{content:" －"}
.wt{padding:4px 14px 14px;border-top:1px dashed var(--line);text-align:center}
.wt .wby{font-size:13px;color:var(--muted);margin:6px 0 8px}
.wt p{margin:0 0 6px;font-size:18px;line-height:2;color:var(--verse)}
.up li.has-w{border-color:var(--gold)}

.sl{display:flex;flex-direction:column;gap:10px}
.sl1{border:1px solid var(--gold);border-radius:14px;background:var(--paper)}
.sl1 summary{font-size:18px;padding:12px 14px}
.occ{display:inline-block;font-family:var(--f-display);font-size:13px!important;color:var(--paper)!important;background:var(--gold);border-radius:999px;padding:1px 12px;margin:10px 0 0!important;line-height:1.8!important}
.tg.sn{color:var(--done)}
.sq{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sq li{font-family:var(--f-display);font-size:13px;border:1px solid var(--line);border-radius:999px;padding:0 9px;color:var(--muted);line-height:1.9;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq li:last-child{max-width:110px}
.sq li.on{border-color:var(--gold);color:var(--gold);background:var(--chip)}
.sq li.ok{color:var(--done);border-color:var(--done)}
@media (max-width:560px){.prayers{grid-template-columns:repeat(4,1fr)}}
.more{margin-top:2px}
.more summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-family:var(--f-display);font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 10px;line-height:1.9}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"ⓘ";font-size:13px}
.more[open] summary{color:var(--gold);border-color:var(--gold)}
.more .nt{margin-top:6px!important;background:var(--chip);border-radius:10px;padding:6px 10px;line-height:1.8}
.sq{margin:4px 0 2px}
.tile.wide{grid-column:1/-1}

.map .tql b{color:var(--gold)}
.mscroll{overflow-x:auto;margin:6px -6px 0;-webkit-overflow-scrolling:touch}
.mscroll svg{display:block;min-width:740px;width:100%;height:auto;margin:0 auto}
.hint2{display:none;text-align:center;font-size:13px;color:var(--muted)!important;margin:4px 0 0!important}
@media (max-width:760px){.hint2{display:block}}
.lg{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font-size:13px;color:var(--muted);margin-top:8px}
.lg span{display:inline-flex;align-items:center;gap:6px}
.lg i{display:inline-block;width:26px;height:0;border-top:2px solid var(--gold)}
.lg i.l2{border-top-style:dashed}.lg i.dt3{border-top-style:dotted;border-top-width:3px}
#tmap .k{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.8}
#tmap .k.d{stroke-dasharray:5 4}
#tmap .k.o{stroke-dasharray:1.5 5;stroke-width:2.6;stroke-linecap:round}
#tmap .pn{fill:var(--paper);stroke:var(--line);stroke-width:1}
#tmap .t{fill:var(--ink);font:400 14.5px var(--f-body);text-anchor:middle}
#tmap .s{fill:var(--muted);font:400 11px var(--f-body);text-anchor:middle}
#tmap .root{fill:var(--hero);stroke:var(--hero-gold);stroke-width:2}
#tmap .rt{fill:var(--hero-ink);font:700 17px var(--f-display);text-anchor:middle}
#tmap .key{fill:var(--chip);stroke:var(--gold);stroke-width:1.4}
#tmap .kt{fill:var(--gold);font:700 15px var(--f-display);text-anchor:middle}
#tmap .ord{fill:var(--gold);stroke:none}
#tmap .ot{fill:var(--paper);font:700 14px var(--f-display);text-anchor:middle}
#tmap .os{fill:var(--paper);font:400 10.5px var(--f-body);text-anchor:middle;opacity:.9}
#tmap .me{fill:var(--hero);stroke:var(--hero-gold);stroke-width:2}
#tmap .met{fill:var(--hero-gold);font:700 15px var(--f-display);text-anchor:middle}
#tmap .lab{fill:var(--muted);font:500 12px var(--f-display);text-anchor:middle;letter-spacing:.5px}

.ib-v{font-family:var(--f-quran);color:var(--verse);font-size:20px;line-height:2;margin:8px auto 0!important;max-width:34em}
.ib-v span{font-family:var(--f-body);font-size:13px;color:var(--muted);white-space:nowrap}
.ib-root{margin:14px auto 0;max-width:300px;text-align:center;background:var(--hero);border:2px solid var(--hero-gold);border-radius:999px;padding:10px 18px;color:var(--hero-ink);position:relative}
.ib-root b{display:block;font-family:var(--f-display);font-size:20px;color:var(--hero-gold)}
.ib-root small{font-size:13px;color:#D8CFB6}
.ib-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;margin-top:22px;position:relative}
.ib-cols::before{content:"";position:absolute;top:-22px;right:25%;left:25%;height:12px;border:2px solid var(--gold);border-bottom:0;border-radius:12px 12px 0 0}
.ib-col{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 10px;min-width:0}
.ib-col.main{border-color:var(--gold)}
.ib-h{text-align:center;font-family:var(--f-display);color:var(--gold);font-size:16px;margin-bottom:8px}
.ib{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center}
.ib li{position:relative;text-align:center;padding:4px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-width:70%;line-height:1.5}
.ib li::after{content:"";position:absolute;bottom:-11px;left:50%;height:10px;border-left:2px solid var(--gold)}
.ib li b{font-weight:400;font-size:16px}
.ib li small{display:block;font-size:13px;color:var(--muted)}
.ib li.pr{background:var(--chip);border-color:var(--gold)}.ib li.pr b{font-family:var(--f-display);color:var(--gold);font-weight:700}
.ib li.hl{border-color:var(--gold);border-width:1.5px}.ib li.hl b{font-weight:700;color:var(--gold)}
.ib li.gap{border:0;background:none;padding:0}.ib li.gap span{color:var(--gold);font-size:20px;line-height:1}
.ib li.gap::after{border-left-style:dotted}
.ib-col:not(.main) .ib li:last-child::after{display:none}
.ib-end{text-align:center;background:var(--hero);border:2px solid var(--hero-gold);border-radius:14px;padding:10px;color:var(--hero-ink)}
.ib-end .sp{display:block;color:var(--hero-gold);font-size:16px}
.ib-end b{display:block;font-family:var(--f-display);font-size:24px;color:var(--hero-gold)}
.ib-end small{font-size:13px;color:#D8CFB6}
.ib-note p{margin:8px 0 0}
@media (max-width:420px){.ib li{min-width:88%;padding:3px 6px}.ib li b{font-size:14.5px}.ib-col{padding:10px 6px}}
.ib li.cpl2{border-color:var(--gold);background:var(--chip);min-width:92%}
.ib li.cpl2 b{font-family:var(--f-display);font-weight:700;color:var(--gold)}
.ib li.cpl2 small{font-size:13px}
.rg2{color:var(--gold);font-size:18px}

.nabi-t{background:var(--hero);border-color:var(--hero-gold)}
.nabi-t h2{color:var(--hero-gold)}.nabi-t p{color:#D8CFB6}.nabi-t .ic,.nabi-t .go{color:var(--hero-gold)}
.nb-hero{text-align:center;margin:18px 0 12px}
.nb-hero .sp{color:var(--gold);font-size:20px}
.nb-hero h2{font-size:30px;color:var(--gold)}
.nb-hero p{font-family:var(--f-quran);color:var(--verse);font-size:18px;line-height:2;margin:6px auto 0;max-width:34em}
.nb-hero p span,.q span{font-family:var(--f-body);font-size:13px;color:var(--muted);white-space:nowrap}
.nb{display:flex;flex-direction:column;gap:10px}
.nbs{background:var(--paper);border:1px solid var(--line);border-radius:14px}
.nbs[open]{border-color:var(--gold)}
.nbs summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:13px 16px;font-family:var(--f-display);font-size:20px;color:var(--ink)}
.nbs summary::-webkit-details-marker{display:none}
.nbs summary::after{content:"＋";margin-right:auto;color:var(--gold);font-size:16px}
.nbs[open] summary::after{content:"－"}
.nbs summary i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:14.5px;flex:none}
.nbs summary em{font-style:normal;font-size:13px;color:var(--muted)}
.nbb{padding:0 16px 16px;border-top:1px dashed var(--line)}
.nsb{font-size:18px;line-height:2.1;text-align:justify;margin:12px 0 8px}
.pcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:12px}
.pc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.pc.hl{border-color:var(--gold);background:var(--chip)}
.pc b{display:block;font-family:var(--f-display);font-size:16px;color:var(--gold);line-height:1.5}
.pc .pl2{display:inline-block;font-family:var(--f-display);font-size:13px;color:var(--ink);border:1px solid var(--gold-soft);border-radius:999px;padding:0 9px;margin-top:3px}
.pc p{margin:4px 0 0;font-size:14.5px;line-height:1.7}
.q{font-family:var(--f-quran);color:var(--verse);font-size:18px;line-height:2;margin:12px 0 0;text-align:center}
.sm{font-size:14.5px;color:var(--muted);margin:10px 0 0}
.lnk{display:inline-block;margin-top:12px;font-family:var(--f-display);font-size:14.5px;color:var(--gold);background:none;border:1px solid var(--gold);border-radius:999px;padding:4px 14px;text-decoration:none;cursor:pointer}

/* polish: groups + reading comfort */
.tiles .grp{grid-column:1/-1;font-family:var(--f-display);font-weight:500;font-size:16px;color:var(--muted);margin:14px 4px -2px;display:flex;align-items:center;gap:10px}
.tiles .grp::after{content:"";flex:1;border-top:1px solid var(--line)}
.tiles{margin-top:10px}
.tiles .grp:first-child{margin-top:6px}
body{line-height:1.8}
.nt,.sm,.nt2,.wd,.hd{font-family:var(--f-body)}
.foot .fq{display:block;font-family:var(--f-quran);color:var(--verse);font-size:20px;line-height:2}
.foot small{font-size:13px}
.hero p b{font-size:18px}
.hmark{width:56px;height:56px;flex:none;border:1.5px solid var(--hero-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--hero-gold);font-size:24px}
.shk-in{display:flex;gap:16px;align-items:center}
.portrait.big{width:120px;height:140px;border-radius:60px 60px 12px 12px}
.portrait.big img{border-radius:57px 57px 9px 9px}
.shk h2{font-size:24px;color:var(--gold)}
.shk .shk-n{margin:0;color:var(--verse);font-size:16px}
.shk .marks{margin-top:8px}
.wl-adab{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:12px 0}
.wl-ol{padding-inline-start:22px;margin:8px 0 0;line-height:1.9}
.wl-list{display:grid;gap:10px;margin-top:10px}
.wl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 16px}
.wl>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;font-size:18px}
.wl>summary::-webkit-details-marker{display:none}
.wl-p{color:var(--muted);font-size:14px}
.wl-b{padding:0 0 14px;line-height:1.9}
.wl-y{display:inline-block;margin-top:6px;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:4px 14px;text-decoration:none}
.wl-dua{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.wl-dua>summary{cursor:pointer;color:var(--gold);list-style:none;padding:4px 0}
.wl-dua>summary::-webkit-details-marker{display:none}
.wl-dua p{margin:8px 0}
.wl-note{color:var(--muted);font-size:14px}
.regions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 4px}
.rg{font-size:15px;border-radius:999px;padding:6px 14px;border:1px solid var(--gold);color:var(--gold);background:#fff}
.rg.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.rg.on b{font-weight:700;margin-right:4px}
.rg.off{color:var(--muted);border:1px dashed var(--line)}
.rg-note{text-align:center;color:var(--muted);font-size:14px;margin:4px 0 8px}
.wl-ph{margin:0 0 12px;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}.wl-ph img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}@media (max-width:480px){.shk-in{flex-direction:column;text-align:center}.shk .marks{justify-content:center}}

/* hero v2: centred emblem composition with an arched lower edge */
.hero2{position:relative;text-align:center;overflow:hidden;border-radius:0 0 50% 50% / 0 0 34px 34px}
.hero2::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 38%,rgba(217,180,92,.20),transparent 70%);pointer-events:none}
.hero2 .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding-block:10px 24px}
.h-basm{font-family:var(--f-quran);color:var(--hero-gold);font-size:15px;margin:0!important;line-height:1.6}
.hero2{background:#012A18}
.hero2::before{display:none}
.h-logo{display:block;width:min(190px,52vw);height:auto;margin:-14px 0 -30px;-webkit-mask-image:radial-gradient(ellipse 56% 54% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 56% 54% at 50% 50%,#000 72%,transparent 100%)}
.hero2 h1{font-size:clamp(34px,9vw,52px);line-height:1.2;color:var(--hero-ink);letter-spacing:.5px}
.h-tag{font-size:16px;color:#D8CFB6;margin:2px 0 0!important}
.h-by{display:flex;flex-direction:column;align-items:center;margin-top:12px;padding-top:10px;position:relative;font-size:15px;color:#D8CFB6;line-height:1.6}
.h-by::before{content:"";position:absolute;top:0;left:50%;width:140px;margin-left:-70px;height:1px;background:linear-gradient(90deg,transparent,var(--hero-gold),transparent)}
.h-by b{font-family:var(--f-display);font-weight:700;font-size:20px;color:#fff}
.h-date{margin-top:4px;font-family:var(--f-display);font-size:13px;color:var(--hero-gold);border:1px solid rgba(217,180,92,.45);border-radius:999px;padding:2px 14px}
.h-date:empty{display:none}
/* compact tiles: two per row on phones for the small ones */
.tiles{gap:10px}
.tile{padding:14px 14px;gap:12px;border-radius:14px}
.tile.main{padding:18px 16px}
.tile .ic{width:40px;height:40px}.tile.main .ic{width:50px;height:50px}
.tile h2{font-size:18px}.tile.main h2{font-size:22px}
.tile p{font-size:14.5px}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr 1fr}
  .tile:not(.main):not(.wide){flex-direction:column;align-items:center;text-align:center;padding:16px 10px;gap:6px}
  .tile:not(.main):not(.wide) .go{display:none}
  .tile:not(.main):not(.wide) h2{font-size:17px}
  .tile:not(.main):not(.wide) p{font-size:13.5px;line-height:1.5}
}
@media (max-width:340px){.tiles{grid-template-columns:1fr}}
@media (min-width:900px){.hero2 .wrap{padding-block:16px 34px}.h-logo{width:240px}}
.it.blk{align-items:flex-start}
.it.blk .chk{margin-top:6px}
.dz.bl{font-size:18px;line-height:2.05;margin:0 0 6px!important;text-align:justify}
.pre2{font-size:14.5px;color:var(--muted);margin:2px 0 6px}
.it.fold{padding:0;display:block}
.dfold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 16px;font-family:var(--f-display);font-size:18px;color:var(--ink)}
.dfold>summary::-webkit-details-marker{display:none}
.dfold>summary::after{content:"‹";margin-right:auto;color:var(--gold);font-size:22px;transition:transform .2s}
.dfold[open]>summary::after{transform:rotate(-90deg)}
.dfold[open]>summary{color:var(--gold);border-bottom:1px dashed var(--line)}
.ok2{color:var(--done);font-size:16px}
.dfb{padding:10px 16px 14px}
.chk2{display:block;margin:10px auto 0;font-family:var(--f-display);font-size:15px;border:1.5px solid var(--gold);background:none;color:var(--gold);border-radius:999px;padding:5px 20px;cursor:pointer}
.chk2.on{background:var(--done);border-color:var(--done);color:#fff}
.smap{position:relative;width:min(400px,94vw);aspect-ratio:.86;margin:40px auto 58px}
.smap svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.smap svg line{stroke:var(--gold);stroke-width:1.3;stroke-dasharray:3 4;opacity:.7;vector-effect:non-scaling-stroke}
.smap svg line.dn{stroke:var(--done);stroke-dasharray:none;stroke-width:2.2;opacity:1}
.smc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:122px;height:122px;border-radius:50%;background:var(--hero);color:var(--hero-gold);border:2px solid var(--hero-gold);box-shadow:0 0 0 7px var(--chip),0 0 0 8px var(--gold-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--f-display);font-size:21px;line-height:1.3;z-index:1}
.smc small{font-size:13px;opacity:.85;margin-top:3px}
.sn-node{position:absolute;transform:translate(-50%,-50%);width:66px;height:66px;background:none;border:0;padding:0;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.sn-node i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--nc);color:#fff;border:3px solid var(--paper);box-shadow:0 3px 10px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s}
.sn-node.on i{transform:scale(1.16);box-shadow:0 0 0 3px var(--nc),0 5px 16px rgba(0,0,0,.3)}
.sn-node span{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 9px);width:108px;text-align:center;font-family:var(--f-display);font-size:14px;line-height:1.25;color:var(--muted)}
.sn-node.up span{top:auto;bottom:calc(100% + 9px)}
.sn-node.on span{color:var(--ink)}
.sn-node.dn::after{content:"✓";position:absolute;top:-3px;right:-3px;width:23px;height:23px;border-radius:50%;background:var(--done);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper)}
.sndet{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--nc);border-radius:16px;padding:16px}
.sndet.fx{animation:snin .25s ease}
@keyframes snin{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.sndet.fx{animation:none}}
.sndet h3{display:flex;align-items:center;gap:10px;font-family:var(--f-display);color:var(--ink);margin:0 0 10px;font-size:19px}
.sndet h3 b{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--nc);color:#fff;flex:none}
.sdn{font-size:16.5px;line-height:2;color:var(--ink);margin:0 0 12px}
.sact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.snav{display:flex;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}
.snav button{background:none;border:0;color:var(--gold);font-family:var(--f-display);font-size:15px;cursor:pointer;padding:4px 2px}
.anb{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;counter-reset:n}
.anb li{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.anb .no{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:15px;flex:none}
.anb li.ul{border-color:var(--gold);background:var(--chip)}
.anb .tx{min-width:0}
.anb b{display:block;font-family:var(--f-display);font-size:19px;font-weight:500;color:var(--ink)}
.anb small{display:block;color:var(--muted);font-size:14px;line-height:1.6}
.anb li.ul small{color:var(--gold)}
.anb-n{font-size:14px;color:var(--muted);line-height:1.8;margin:14px 2px 0}
.an-hint{text-align:center;font-size:14.5px;color:var(--muted);margin:10px 0 0}
.an-leg{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;font-size:13px;color:var(--muted);margin:8px 0 0}
.an-leg span{display:flex;align-items:center;gap:6px}
.an-leg i{display:inline-block;width:22px;height:0;border-top:2px solid var(--gold)}
.an-leg i.l2{border-top-style:dashed;opacity:.7}
.an-leg i.l3{width:14px;height:14px;border:0;border-radius:5px;background:var(--gold)}
.an-leg i.lgd{display:block;flex:none;width:11px;height:11px;border:0;border-radius:50%;background:var(--pc)}
.an-lk{display:inline-block;margin-top:12px;text-decoration:none}
.an-map{position:relative;margin-top:14px;padding:16px 10px 12px;background:linear-gradient(180deg,var(--paper),var(--chip));border:1px solid var(--line);border-radius:20px}
.an-lines{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
.an-lines path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.an-lines path.dash{stroke-dasharray:5 6;opacity:.7}
.an-lines text{font-family:var(--f-display);font-size:12.5px;fill:var(--muted);paint-order:stroke;stroke:var(--paper);stroke-width:4px;text-anchor:middle}
.an-tr,.an-gi{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);column-gap:10px}
.an-tr{row-gap:34px}
.an-gi{row-gap:12px;margin-top:12px}
.an-p{min-height:48px;padding:6px 8px;border-radius:14px;background:var(--paper);border:2px solid var(--pc,var(--gold));color:var(--ink);font-family:var(--f-display);font-size:16px;line-height:1.3;text-align:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s}
.e1{--pc:#2E8B6B}.e2{--pc:#C26A3C}.e3{--pc:#2F7FA8}.e4{--pc:#7A5BA8}.e5{--pc:#5E7A86}
.an-p.ul{background:var(--pc,var(--gold));color:#fff}
.an-p.mh{background:linear-gradient(135deg,#D9B45C,#9A7414);color:#fff;border-color:#9A7414;font-size:16.5px;box-shadow:0 0 0 3px var(--chip),0 0 16px rgba(217,180,92,.55)}
.an-p.on{box-shadow:0 0 0 3px var(--chip),0 0 0 5px var(--pc,var(--gold))}
.an-p.mh.on{box-shadow:0 0 0 3px var(--chip),0 0 0 6px #9A7414,0 0 18px rgba(217,180,92,.7)}
.an-g{position:relative;z-index:1;margin-top:34px;border:1.8px dashed var(--pc,var(--gold));border-radius:20px;padding:12px 10px 14px;background:color-mix(in srgb,var(--pc,var(--gold)) 7%,transparent)}
.an-g.o{margin-top:22px}
.an-gh{width:100%;flex-direction:column;gap:2px;border-style:dashed;background:color-mix(in srgb,var(--pc) 12%,var(--paper));font-size:17px}
.an-gh small{font-family:var(--f-body);font-size:13px;color:var(--muted)}
.an-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:860px;max-height:58vh;overflow-y:auto;background:var(--paper);border-top:5px solid var(--pc,var(--gold));border-radius:22px 22px 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.28);padding:6px 18px 18px;z-index:60;animation:ansl .22s ease}
@keyframes ansl{from{transform:translate(-50%,40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.an-sheet{animation:none}}
.an-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--paper);padding:6px 0 2px;z-index:1}
.an-grip{display:block;width:44px;height:4px;border-radius:4px;background:var(--line);margin:0 auto;position:absolute;left:50%;top:6px;transform:translateX(-50%)}
.an-x{margin-right:auto;background:var(--chip);border:0;border-radius:50%;width:34px;height:34px;font-size:20px;line-height:1;color:var(--ink);cursor:pointer}
.an-sheet h3{font-family:var(--f-display);color:var(--ink);font-size:23px;margin:2px 0 4px}
.an-rel{font-size:14.5px;color:var(--pc,var(--gold));margin:0 0 10px;line-height:1.7}
.an-q{font-size:17px;line-height:2.05;color:var(--ink);margin:0}
.an-sheet .snav{display:flex;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}
.an-sheet .snav button{background:none;border:0;color:var(--gold);font-family:var(--f-display);font-size:16px;cursor:pointer;padding:6px 2px}
#anbiya.an-open{padding-bottom:62vh}
#list:has(.fold){gap:8px}
.ft{display:flex;flex-direction:column;align-items:center;padding:4px 0 6px}
.fn{position:relative;text-align:center;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:4px 16px;min-width:110px;margin-top:14px;line-height:1.35}
.fn::before{content:"";position:absolute;top:-15px;right:50%;width:2px;height:14px;background:var(--gold);opacity:.55}
.fch .fn:first-child{margin-top:0}.fch .fn:first-child::before{display:none}
.fn b{font-family:var(--f-display);font-size:16px;color:var(--ink);font-weight:500}
.fn small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted)}
.fn.hl{border-color:var(--gold);background:var(--chip)}.fn.hl b{color:var(--gold);font-weight:700}
.fch{display:flex;flex-direction:column;align-items:center}
.fsp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:440px;margin-top:14px;padding:0}
.fsp::before,.fsp::after{content:"";position:absolute;right:25%;left:25%;height:2px;background:var(--gold);opacity:.55;top:0}
.fsp::after{top:auto;bottom:0}
.fc{display:flex;flex-direction:column;align-items:center;position:relative}
.fc::after{content:"";flex:1;width:2px;min-height:14px;background:var(--gold);opacity:.55}
.fc .fn{min-width:0;width:100%;max-width:190px;padding:4px 8px}
.fc .fn:first-of-type{margin-top:4px}.fc .fn:first-of-type::before{display:none}
.fl{font-size:13px;color:var(--gold);font-family:var(--f-display);line-height:1.2}
.fc::before{content:"";width:2px;height:8px;background:var(--gold);opacity:.55}
.sw{font-family:var(--f-body);font-weight:400;letter-spacing:0}
.fsp .fm{position:absolute;bottom:-11px;right:50%;transform:translateX(50%);font-style:normal;background:var(--bg);color:var(--gold);padding:0 6px;font-size:16px}
.fme{position:relative;margin-top:22px;background:var(--hero);border:2px solid var(--hero-gold);border-radius:18px;padding:10px 22px;text-align:center;color:var(--hero-ink)}
.fme::before{content:"";position:absolute;top:-24px;right:50%;width:2px;height:22px;background:var(--gold);opacity:.55}
.fme span{display:block;color:var(--hero-gold);font-size:16px;line-height:1}
.fme b{display:block;font-family:var(--f-display);font-size:20px;color:var(--hero-gold)}
.fme small{font-size:13px;color:#D8CFB6}
.fh{margin:20px 0 8px;font-family:var(--f-display);font-size:16px;color:var(--gold);text-align:center}
.fh small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted)}
.fks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;border-top:2px solid color-mix(in srgb,var(--gold) 55%,transparent);padding-top:10px;max-width:460px}
.fk{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:4px 10px;text-align:center;line-height:1.3}
.fk b{font-family:var(--f-display);font-size:16px;font-weight:500;color:var(--ink)}
.fk small{display:block;font-size:13px;color:var(--muted)}.fk small:empty{display:none}
.fk.hl{border-color:var(--gold);background:var(--chip)}.fk.hl b{color:var(--gold)}
.fz .fn{margin-top:14px}.fks.g{margin-top:14px}
.ft .lnk{margin-top:14px}
.sech{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:16px;color:var(--gold);margin:10px 4px 0}
.sech::after{content:"";flex:1;height:1px;background:var(--line)}
.sech:first-child{margin-top:0}
.dt2 small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted);font-weight:400}
.gp{font-size:14.5px;color:var(--muted);background:var(--chip);border-radius:999px;padding:2px 10px;flex:none}.gp.ok{background:var(--done);color:#fff}
.grp .dfb{padding:4px 12px 12px}
.gi{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}.gi:last-child{border:0}
.gx{flex:1;min-width:0}.gx .dz{font-size:20px;line-height:1.9;margin:0}.gx .nt{margin:2px 0 0;font-size:13px}
.gi.ok .dz{opacity:.55}
.gc{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--gold);background:none;color:var(--gold);font-family:var(--f-display);font-size:18px;cursor:pointer;line-height:1}
.gc small{display:block;font-family:var(--f-body);font-size:12px;color:var(--muted);margin-top:2px}
.gi.ok .gc{background:var(--done);border-color:var(--done);color:#fff}
.hl-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.hl-card h3{font-family:var(--f-display);font-size:19px;color:var(--gold);margin:0 0 4px;font-weight:500}
.hl-card .hl-t{font-size:17px;color:var(--verse);margin:0 0 10px;line-height:1.9}
.hl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.hl-num{font-family:var(--f-display);font-size:26px;color:var(--ink)}
.hl-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0}
.hl-bar i{display:block;height:100%;background:var(--gold);border-radius:999px}
.hl-btn{width:100%;margin-top:6px;font-family:var(--f-display);font-size:16px;color:var(--hero-ink);background:var(--hero);border:0;border-radius:999px;padding:10px;cursor:pointer}
.hl-btn:disabled{opacity:.5;cursor:default}
.hl-msg{font-size:14px;color:var(--muted);margin:8px 0 0;text-align:center}