:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}

/* ============ Midnight & Gold — single committed theme ============ */
:root{
  --ground:#070B16; --ground-2:#0A1122;
  --surface:#0E162C; --surface-2:#141E3A; --raised:#1A2648;
  --line:#22305A; --line-2:#2C3D6E;
  --ivory:#F3EEE1; --text:#E8E2D2; --muted:#94A0C0; --faint:#6B7799;
  --gold:#D4AF37; --gold-hi:#F2D375; --gold-lo:#8B7226; --gold-glow:rgba(212,175,55,.22);
  --jade:#3FD3A3; --jade-dim:#16523F;
  --ember:#E8804A; --ember-dim:#4A2617;
  --rose:#E9636F; --rose-dim:#4A1A22;
  --r:14px; --r-sm:9px;
  --f-dis:"Cormorant Garamond",Georgia,serif;
  --f-cap:"Cinzel",Georgia,serif;
  --f-ui:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-ar:"Amiri Quran","Amiri","Scheherazade New",serif;
  --f-ar2:"Amiri","Amiri Quran",serif;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='.7' opacity='.5'%3E%3Crect x='17' y='17' width='30' height='30'/%3E%3Crect x='17' y='17' width='30' height='30' transform='rotate(45 32 32)'/%3E%3Crect x='-15' y='-15' width='30' height='30'/%3E%3Crect x='-15' y='-15' width='30' height='30' transform='rotate(45 0 0)'/%3E%3Crect x='49' y='-15' width='30' height='30'/%3E%3Crect x='49' y='-15' width='30' height='30' transform='rotate(45 64 0)'/%3E%3Crect x='-15' y='49' width='30' height='30'/%3E%3Crect x='-15' y='49' width='30' height='30' transform='rotate(45 0 64)'/%3E%3Crect x='49' y='49' width='30' height='30'/%3E%3Crect x='49' y='49' width='30' height='30' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{background:var(--ground)}
body{
  color:var(--text);font-family:var(--f-ui);font-size:15px;line-height:1.6;margin:0;
  -webkit-text-size-adjust:100%;
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(212,175,55,.085), transparent 62%),
    radial-gradient(760px 520px at 8% 102%, rgba(63,211,163,.05), transparent 60%),
    var(--ground);
  background-attachment:fixed;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.18;font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:5px}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--gold-glow);color:var(--ivory)}

/* ---------------- header ---------------- */
#top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:linear-gradient(180deg, rgba(7,11,22,.96), rgba(7,11,22,.82));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(212,175,55,.16);
}
.topin{max-width:1180px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:12px}
.brand{font-family:var(--f-cap);font-size:18px;font-weight:700;letter-spacing:.085em;
  color:var(--gold-hi);line-height:1;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 22px rgba(212,175,55,.3)}
.brand small{display:block;font-family:var(--f-ui);font-size:8.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;
  padding:6px 13px;font-size:12px;font-weight:500;letter-spacing:.05em;background:var(--surface);white-space:nowrap;color:var(--muted)}
.pill.flame{border-color:rgba(212,175,55,.5);color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(212,175,55,.05))}
select.who{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;
  padding:6px 11px;font-size:12px;font-weight:500;max-width:9.5em;color:var(--text)}

@media(max-width:760px){
  .topin{gap:9px;padding:9px 14px}
  .brand{font-size:15px}
  .brand small{display:none}
  #syncPill{width:11px;height:11px;min-width:11px;padding:0;border-radius:50%;font-size:0;
    overflow:hidden;flex:none;border-width:1px}
  #streakPill{display:none}
  select.who{max-width:6.4em;padding:5px 6px}
  #authBox .btn{padding:7px 11px;font-size:12px}
}
@media(max-width:400px){ select.who{max-width:4.8em} }

/* ---------------- shell ---------------- */
#wrap{max-width:1180px;margin:0 auto;padding:0 18px;padding-block:24px 104px;display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:940px){
  #wrap{grid-template-columns:198px 1fr;align-items:start;padding-block:30px 52px;gap:34px}
  #nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px)}
}
#nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
#nav button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);text-align:left;
  border:1px solid transparent;transition:.15s}
#nav button .ic{width:18px;flex:none;color:var(--faint);transition:.15s}
#nav button:hover{background:var(--surface);color:var(--text)}
#nav button[aria-current="true"]{
  background:linear-gradient(90deg,rgba(212,175,55,.17),rgba(212,175,55,.04));
  border-color:rgba(212,175,55,.34);color:var(--gold-hi);font-weight:600}
#nav button[aria-current="true"] .ic{color:var(--gold)}
#nav .badge{margin-left:auto;background:var(--rose);color:#12060A;font-size:10px;font-weight:700;
  border-radius:999px;padding:1px 6px;min-width:18px;text-align:center}
@media(max-width:939px){
  #nav{position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:linear-gradient(180deg,rgba(10,17,34,.97),rgba(7,11,22,.99));
    border-top:1px solid rgba(212,175,55,.24);backdrop-filter:blur(14px);
    padding:7px 4px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))}
  #nav ul{flex-direction:row}
  #nav li{flex:1;position:relative}
  #nav button{flex-direction:column;gap:4px;justify-content:center;padding:6px 2px;font-size:9.5px;
    letter-spacing:.04em;text-align:center;border-radius:8px}
  #nav button .ic{width:20px}
  #nav .badge{position:absolute;margin:0;transform:translate(15px,-3px)}
}

/* ---------------- primitives ---------------- */
.card{background:linear-gradient(170deg,var(--surface),var(--ground-2));
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset, 0 20px 46px -30px #000}
.pad{padding:20px}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.eyebrow{font-family:var(--f-cap);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);opacity:.92}
.dis{font-family:var(--f-dis);font-size:clamp(30px,5.4vw,42px);font-weight:600;letter-spacing:.005em;
  color:var(--ivory);margin-top:5px}
.sub{color:var(--muted);font-size:13.5px}
.note{font-size:12.5px;color:var(--faint);line-height:1.6}
.note b{color:var(--muted)}
h2.sec{font-family:var(--f-dis);font-size:23px;font-weight:600;color:var(--ivory)}

/* ornamental divider: gold hairline with a centre lozenge */
.hr{border:0;height:9px;margin:2px 0;
  background:
    linear-gradient(90deg,transparent,rgba(212,175,55,.42) 18%,rgba(212,175,55,.42) 82%,transparent) center/100% 1px no-repeat;
  position:relative}
.hr::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--ground);
  border:1px solid var(--gold);opacity:.85}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-sm);
  padding:10px 17px;font-size:13.5px;font-weight:500;letter-spacing:.015em;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);transition:.15s}
.btn:hover{background:var(--raised);border-color:var(--gold-lo);color:var(--ivory)}
.btn.pri{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--gold-hi);
  color:#1A1305;font-weight:600;box-shadow:0 0 26px -6px var(--gold-glow)}
.btn.pri:hover{filter:brightness(1.09);color:#1A1305}
.btn.sm{padding:6px 12px;font-size:12px;border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--faint)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
input[type=text],input[type=number],input[type=time],select,textarea{
  border:1px solid var(--line-2);background:var(--ground-2);border-radius:var(--r-sm);
  padding:9px 11px;font-size:14px;width:100%;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--gold-lo);outline:none}
label.fld{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.chip{border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;font-size:12.5px;
  font-weight:500;background:var(--surface-2);color:var(--muted);transition:.15s}
.chip:hover{border-color:var(--gold-lo);color:var(--text)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border-color:var(--gold-hi);color:#1A1305;font-weight:600}
.warn{border-radius:var(--r);padding:15px 17px;font-size:13.5px;
  background:linear-gradient(170deg,rgba(233,99,111,.14),rgba(233,99,111,.05));
  border:1px solid rgba(233,99,111,.42);color:var(--text)}
.warn b{color:var(--rose)}
.warn.good{background:linear-gradient(170deg,rgba(63,211,163,.14),rgba(63,211,163,.04));
  border-color:rgba(63,211,163,.42)}
.warn.good b{color:var(--jade)}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid rgba(212,175,55,.3);
  background:linear-gradient(150deg,#101A35 0%,#0B1224 55%,#0A0F1E 100%);
  box-shadow:0 26px 60px -40px #000, 0 0 0 1px rgba(212,175,55,.06) inset}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--star);
  background-size:64px 64px;opacity:.13;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 95% at 82% 8%,#000 5%,transparent 68%);
          mask-image:radial-gradient(120% 95% at 82% 8%,#000 5%,transparent 68%)}
.hero .in{position:relative;padding:26px 26px 0;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.hero .txt{flex:1;min-width:210px}
.ringwrap{position:relative;width:148px;height:148px;flex:none}
.ringwrap svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ringwrap .track{fill:none;stroke:#1C2747;stroke-width:9}
.ringwrap .hint{fill:none;stroke:rgba(212,175,55,.22);stroke-width:1}
.ringwrap .fill{fill:none;stroke:url(#goldgrad);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 7px rgba(212,175,55,.5))}
.ringwrap .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1px}
.ringwrap .mid .n{font-family:var(--f-dis);font-size:38px;font-weight:600;color:var(--gold-hi);
  line-height:1;font-variant-numeric:tabular-nums}
.ringwrap .mid .l{font-family:var(--f-cap);font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--faint)}
.hero .colophon{position:relative;margin-top:22px;padding:14px 26px 20px;text-align:center;
  border-top:1px solid rgba(212,175,55,.2)}
.hero .colophon .arab{font-family:var(--f-ar2);font-size:21px;color:var(--gold);opacity:.82;direction:rtl;line-height:2}
.hero .colophon .ref{font-family:var(--f-cap);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:3px}
@media(max-width:620px){.hero .in{justify-content:center;text-align:center}.hero .txt{text-align:center}}

/* ---------------- session tasks ---------------- */
.session{display:grid;gap:14px}
.task{position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(170deg,var(--surface),var(--ground-2));
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -32px #000;transition:.2s}
.task::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.task[data-k="sabaq"]::before{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}
.task[data-k="sabqi"]::before{background:linear-gradient(180deg,var(--ember),var(--ember-dim))}
.task[data-k="manzil"]::before{background:linear-gradient(180deg,var(--rose),var(--rose-dim))}
.task[data-done="1"]{border-color:rgba(63,211,163,.34)}
.task[data-done="1"]::before{background:linear-gradient(180deg,var(--jade),var(--jade-dim))}
.task .body{padding:17px 19px 17px 21px;display:flex;flex-direction:column;gap:11px}
.task h3{font-size:16.5px;font-weight:500;display:flex;align-items:center;gap:11px;color:var(--ivory)}
.task h3 .lbl{display:flex;flex-direction:column;gap:1px}
.task h3 .en{font-family:var(--f-dis);font-size:21px;font-weight:600;letter-spacing:.01em}
.task h3 .tr{font-family:var(--f-cap);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.8}
.task h3 .ar{font-family:var(--f-ar2);font-size:23px;color:var(--gold);opacity:.6;font-weight:400;margin-left:auto}
.task[data-done="1"] h3 .en{color:var(--muted)}
.taskmeta{font-size:13px;color:var(--muted)}
.tick{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;transition:.18s;background:var(--ground-2)}
.tick:hover{border-color:var(--gold)}
.task[data-done="1"] .tick{background:var(--jade);border-color:var(--jade);box-shadow:0 0 18px -3px rgba(63,211,163,.6)}
.tick svg{opacity:0;color:#04241A;transition:.18s}
.task[data-done="1"] .tick svg{opacity:1}
.plist{display:flex;flex-wrap:wrap;gap:7px}
.pg{border:1px solid var(--line-2);border-radius:8px;padding:5px 10px;font-size:12px;
  background:var(--ground-2);font-variant-numeric:tabular-nums;display:inline-flex;gap:7px;align-items:center;color:var(--text)}
.pg b{font-weight:600;color:var(--gold-hi)}
.pg small{color:var(--faint);font-size:11px}
.pg.ov{border-color:rgba(233,99,111,.5);background:rgba(233,99,111,.09)}
.pg.ov b{color:var(--rose)}

/* ---------------- KPI tiles ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px}
.kpi{position:relative;overflow:hidden;border-radius:var(--r);padding:16px 17px;
  background:linear-gradient(170deg,var(--surface),var(--ground-2));border:1px solid var(--line)}
.kpi::after{content:"";position:absolute;right:-22px;top:-22px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.13),transparent 70%);pointer-events:none}
.kpi .v{font-family:var(--f-dis);font-size:34px;font-weight:600;line-height:1;
  color:var(--gold-hi);font-variant-numeric:tabular-nums}
.kpi .l{font-family:var(--f-cap);font-size:9px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--faint);margin-top:8px}
.bar{height:6px;border-radius:99px;background:#16203C;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));
  box-shadow:0 0 12px var(--gold-glow)}

/* ---------------- progress grid ---------------- */
.juzrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:6px 0}
.juzlab{font-family:var(--f-cap);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);width:4.4em;font-variant-numeric:tabular-nums}
.cells{display:flex;flex-wrap:wrap;gap:3px}
.cell{width:12px;height:12px;border-radius:3px;background:#141C33;border:1px solid #1E2A4C;padding:0;transition:.15s}
.cell:hover{transform:scale(1.4);border-color:var(--gold)}
.cell[data-s="1"]{background:var(--ember);border-color:var(--ember);box-shadow:0 0 8px -1px rgba(232,128,74,.7)}
.cell[data-s="2"]{background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold);
  box-shadow:0 0 8px -1px var(--gold-glow)}
.cell[data-s="3"]{background:var(--rose);border-color:var(--rose)}
.legend{display:flex;gap:17px;flex-wrap:wrap;font-size:12px;color:var(--faint)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px;border:1px solid var(--line-2)}

/* ---------------- reader ---------------- */
.ayah{padding:19px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.ayah:last-child{border-bottom:0}
.ayah .num{font-family:var(--f-cap);font-size:10px;font-weight:600;letter-spacing:.18em;
  color:var(--gold);font-variant-numeric:tabular-nums}
.ar{font-family:var(--f-ar);direction:rtl;text-align:right;font-size:29px;line-height:2.3;color:var(--ivory)}
.tl{font-size:13.5px;color:var(--muted);font-style:italic;line-height:1.7}
.ur{font-size:15px;line-height:1.85;max-width:64ch;color:var(--text);
  border-left:2px solid var(--gold-lo);padding-left:13px}
.ur b{display:block;font-family:var(--f-cap);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);opacity:.8;margin-bottom:4px;font-weight:600}
.en{font-size:14.5px;line-height:1.7;max-width:62ch;color:var(--text)}
/* illuminated surah frame */
.surahhead{position:relative;text-align:center;padding:26px 22px;margin:18px 0;border-radius:var(--r);
  background:linear-gradient(160deg,#121C38,#0A1020);
  border:1px solid rgba(212,175,55,.45);
  box-shadow:0 0 0 1px rgba(212,175,55,.12) inset, 0 0 42px -22px var(--gold)}
.surahhead::before{content:"";position:absolute;inset:7px;border:1px solid rgba(212,175,55,.26);border-radius:8px;pointer-events:none}
.surahhead::after{content:"";position:absolute;inset:0;background-image:var(--star);background-size:64px 64px;
  opacity:.1;border-radius:var(--r);pointer-events:none}
.surahhead .n{position:relative;font-family:var(--f-ar2);font-size:34px;color:var(--gold-hi);line-height:1.7;
  text-shadow:0 0 24px rgba(212,175,55,.35)}
.surahhead .m{position:relative;font-family:var(--f-cap);font-size:9.5px;color:var(--muted);
  letter-spacing:.19em;text-transform:uppercase;margin-top:5px}
.pagehead{display:flex;align-items:center;gap:12px;margin:22px 0 2px;color:var(--faint);
  font-family:var(--f-cap);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.pagehead .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---------------- qaida ---------------- */
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:9px}
.lt{border:1px solid var(--line);border-radius:11px;padding:12px 6px;text-align:center;
  background:linear-gradient(170deg,var(--surface-2),var(--ground-2));transition:.18s}
.lt:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.lt .g{font-family:var(--f-ar2);font-size:37px;line-height:1.35;color:var(--gold-hi)}
.lt .n{font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.05em}
.forms{display:flex;gap:7px;justify-content:center;margin-top:7px;font-family:var(--f-ar2);
  font-size:19px;color:var(--faint)}
.lesson{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(170deg,var(--surface),var(--ground-2));transition:.18s}
.lesson:hover{border-color:var(--line-2)}
.lesson>summary{padding:15px 18px;cursor:pointer;display:flex;align-items:center;gap:13px;
  font-size:15px;font-weight:500;color:var(--ivory);list-style:none}
.lesson>summary::-webkit-details-marker{display:none}
.lesson>summary .no{width:28px;height:28px;flex:none;display:grid;place-items:center;
  font-family:var(--f-cap);font-size:11px;font-weight:600;color:var(--gold);
  background:var(--ground-2);border:1px solid var(--line-2);
  transform:rotate(45deg);border-radius:5px}
.lesson>summary .no span{transform:rotate(-45deg)}
.lesson[data-done="1"]>summary .no{background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));
  border-color:var(--gold-hi);color:#1A1305}
.lesson .inner{padding:0 18px 18px;display:flex;flex-direction:column;gap:14px}
.drill{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--ground-2)}
.drill .g{font-family:var(--f-ar2);font-size:31px;direction:rtl;line-height:1.6;white-space:nowrap;color:var(--gold-hi)}
.drill .t b{display:block;font-size:13.5px;font-weight:500;color:var(--ivory)}
.drill .t span{color:var(--faint);font-size:12.5px}

/* ---------------- quiz ---------------- */
.qopt{display:block;width:100%;text-align:left;border:1px solid var(--line-2);border-radius:10px;
  padding:14px 16px;background:var(--surface-2);font-size:14.5px;color:var(--text);transition:.15s}
.qopt:hover:not([disabled]){border-color:var(--gold);background:var(--raised)}
.qopt[data-r="ok"]{border-color:var(--jade);background:rgba(63,211,163,.14);color:var(--jade);font-weight:600}
.qopt[data-r="no"]{border-color:var(--rose);background:rgba(233,99,111,.12)}
.qopt .ar{font-size:24px;line-height:2;margin:0;color:inherit}

/* ---------------- kid mode ---------------- */
body.kid{font-size:16.5px}
body.kid .dis{font-size:clamp(32px,6.2vw,46px)}
body.kid .ar{font-size:33px}
body.kid .lt .g{font-size:44px}
body.kid .task h3 .en{font-size:23px}
body.kid .kpi .v{font-size:38px}
.stars{font-size:23px;letter-spacing:4px;color:var(--gold-hi);text-shadow:0 0 18px var(--gold-glow)}
@media(max-width:520px){.task h3 .ar{display:none}}


/* ---------------- duas ---------------- */
.duafilter{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dua{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(170deg,var(--surface),var(--ground-2));transition:.18s}
.dua:hover{border-color:var(--line-2)}
.dua[open]{border-color:rgba(212,175,55,.34)}
.dua>summary{padding:16px 18px;cursor:pointer;list-style:none;display:flex;gap:14px;align-items:flex-start}
.dua>summary::-webkit-details-marker{display:none}
.dua>summary .txt{flex:1;min-width:0}
.dua>summary .t{font-family:var(--f-dis);font-size:20px;font-weight:600;color:var(--ivory);line-height:1.25}
.dua>summary .w{font-size:12.5px;color:var(--muted);margin-top:3px}
.dua>summary .r{font-family:var(--f-cap);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-top:6px;display:block}
.fav{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--ground-2);color:var(--faint);font-size:14px;transition:.15s}
.fav:hover{border-color:var(--gold);color:var(--gold)}
.fav[aria-pressed="true"]{color:var(--gold-hi);border-color:var(--gold);background:rgba(212,175,55,.12)}
.duabody{padding:0 18px 20px;display:flex;flex-direction:column;gap:16px}
.duatext{position:relative;border-radius:var(--r);padding:20px 22px;
  background:linear-gradient(160deg,#121C38,#0A1020);
  border:1px solid rgba(212,175,55,.34);
  box-shadow:0 0 34px -24px var(--gold)}
.duatext::after{content:"";position:absolute;inset:0;background-image:var(--star);background-size:64px 64px;
  opacity:.08;border-radius:var(--r);pointer-events:none}
.duatext .ar{position:relative;font-size:30px;line-height:2.35;color:var(--gold-hi);
  text-shadow:0 0 30px rgba(212,175,55,.18)}
.duatext .tl{position:relative;margin-top:12px;padding-top:12px;border-top:1px solid rgba(212,175,55,.18)}
.duatext .en{position:relative;margin-top:9px;color:var(--ivory)}
.duafull{border-left:2px solid var(--line-2);padding-left:14px}
.duafull .ar{font-size:23px;line-height:2.15;color:var(--text);opacity:.8}
.facts{display:grid;gap:12px}
@media(min-width:760px){.facts{grid-template-columns:1fr 1fr}}
.fact{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--ground-2)}
.fact h4{font-family:var(--f-cap);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.fact p{font-size:13.5px;line-height:1.7;color:var(--text)}
.fact.wide{grid-column:1/-1}
.srcline{font-size:11.5px;color:var(--faint);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.srcline b{font-family:var(--f-cap);letter-spacing:.14em;text-transform:uppercase;font-size:9px;color:var(--gold);font-weight:600}
.catnote{font-size:13px;color:var(--muted);max-width:66ch}
.dailydua{position:relative;overflow:hidden}
.dailydua .ar{font-size:26px;line-height:2.3;color:var(--gold-hi)}



/* ---------------- library: segmented control ---------------- */
.seg{display:inline-flex;padding:4px;gap:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--ground-2)}
.seg button{border-radius:999px;padding:8px 18px;font-size:13px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap}
.seg button:hover{color:var(--ivory)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1A1305;font-weight:600}

/* ---------------- hadith ---------------- */
.hnum{flex:none;width:34px;height:34px;display:grid;place-items:center;font-family:var(--f-cap);
  font-size:12px;font-weight:700;color:var(--gold);background:var(--ground-2);
  border:1px solid var(--line-2);transform:rotate(45deg);border-radius:6px}
.hnum span{transform:rotate(-45deg)}
.dua[open] .hnum{background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold-hi);color:#1A1305}
.narr{font-size:13px;color:var(--muted);border-left:2px solid var(--gold-lo);padding-left:13px;line-height:1.6}
.hen{font-size:15px;line-height:1.8;color:var(--ivory);max-width:66ch}

/* ---------------- 99 names ---------------- */
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.ncard{border:1px solid var(--line);border-radius:11px;padding:13px 10px;text-align:center;
  background:linear-gradient(170deg,var(--surface-2),var(--ground-2));transition:.18s;position:relative}
.ncard:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.ncard[aria-pressed="true"]{border-color:var(--gold);background:linear-gradient(170deg,#182444,#0D1426);
  box-shadow:0 0 22px -12px var(--gold)}
.ncard .no{position:absolute;top:7px;left:9px;font-family:var(--f-cap);font-size:9px;color:var(--faint)}
.ncard .g{font-family:var(--f-ar2);font-size:27px;line-height:1.7;color:var(--gold-hi);direction:rtl}
.ncard .tl{font-size:11.5px;font-weight:600;color:var(--ivory);font-style:normal;margin-top:2px}
.ncard .m{font-size:10.5px;color:var(--faint);line-height:1.4;margin-top:3px}
.ndetail{position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid rgba(212,175,55,.38);
  background:linear-gradient(150deg,#121C38,#0A1020);
  box-shadow:0 0 44px -26px var(--gold)}
.ndetail::after{content:"";position:absolute;inset:0;background-image:var(--star);background-size:64px 64px;
  opacity:.09;pointer-events:none}
.ndetail .in{position:relative;padding:24px;display:flex;flex-direction:column;gap:14px}
.ndetail .big{font-family:var(--f-ar2);font-size:52px;line-height:1.6;color:var(--gold-hi);direction:rtl;
  text-shadow:0 0 34px rgba(212,175,55,.3)}
.ndetail h3{font-family:var(--f-dis);font-size:28px;color:var(--ivory)}
.ndetail .mean{font-family:var(--f-cap);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}


/* ---------------- recite ---------------- */
.rctl{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.rayah{border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;
  background:linear-gradient(170deg,var(--surface),var(--ground-2));transition:.18s;
  display:flex;flex-direction:column;gap:11px}
.rayah.on{border-color:var(--gold);box-shadow:0 0 26px -16px var(--gold)}
.rayah .head{display:flex;align-items:center;gap:10px}
.rayah .num{font-family:var(--f-cap);font-size:10px;letter-spacing:.17em;color:var(--gold)}
.rayah .acts{margin-left:auto;display:flex;gap:7px}
.iconbtn{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--ground-2);color:var(--muted);transition:.15s}
.iconbtn:hover{border-color:var(--gold-lo);color:var(--gold-hi)}
.iconbtn.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--gold-hi);color:#1A1305}
.iconbtn.rec.on{background:var(--rose);border-color:var(--rose);color:#12060A;
  animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(233,99,111,.55)}70%{box-shadow:0 0 0 9px rgba(233,99,111,0)}}

/* word-level marking */
.mark{font-family:var(--f-ar);direction:rtl;text-align:right;font-size:28px;line-height:2.5}
.mark w{padding:1px 4px;border-radius:5px}
.mark w.ok{color:var(--ivory)}
.mark w.sub{background:rgba(233,99,111,.18);color:var(--rose);
  text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:7px;text-decoration-thickness:2px}
.mark w.del{background:rgba(232,128,74,.16);color:var(--ember);
  text-decoration:line-through;text-decoration-thickness:2px}
.scorebar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.score{font-family:var(--f-dis);font-size:32px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.score.good{color:var(--jade)} .score.mid{color:var(--gold-hi)} .score.bad{color:var(--rose)}
.legend2{display:flex;gap:15px;flex-wrap:wrap;font-size:11.5px;color:var(--faint)}
.legend2 i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.heard{font-family:var(--f-ar2);direction:rtl;text-align:right;font-size:19px;line-height:2;
  color:var(--muted);border-right:2px solid var(--line-2);padding-right:12px}
.extra{color:var(--ember)}
audio{width:100%;height:36px;margin-top:4px;filter:invert(.92) hue-rotate(180deg) saturate(.4)}
.iconbtn.gear{display:none;width:32px;height:32px}
@media(max-width:939px){
  .iconbtn.gear{display:grid}
  #nav li.navset{display:none}
  #nav ul{overflow-x:auto;scrollbar-width:none}
  #nav ul::-webkit-scrollbar{display:none}
  #nav li{min-width:50px}
  #nav button{font-size:9px;padding:6px 1px}
}


/* ---------------- long-form reading ---------------- */
.prose{max-width:70ch}
.prose p{font-size:15.5px;line-height:1.85;color:var(--text);margin-bottom:15px}
.prose p:last-child{margin-bottom:0}
.prose h4{font-family:var(--f-dis);font-size:20px;font-weight:600;color:var(--ivory);
  margin:26px 0 11px}
.prose h4:first-child{margin-top:0}
.chap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(170deg,var(--surface),var(--ground-2));transition:.18s}
.chap[open]{border-color:rgba(212,175,55,.3)}
.chap>summary{padding:17px 19px;cursor:pointer;list-style:none;display:flex;gap:15px;align-items:flex-start}
.chap>summary::-webkit-details-marker{display:none}
.chap .cn{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;
  font-family:var(--f-dis);font-size:19px;font-weight:600;color:var(--gold);
  background:var(--ground-2);border:1px solid var(--line-2)}
.chap[open] .cn{background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));
  border-color:var(--gold-hi);color:#1A1305}
.chap .ct{flex:1;min-width:0}
.chap .ct .eyebrow{display:block;margin-bottom:4px}
.chap .ct h3{font-family:var(--f-dis);font-size:21px;font-weight:600;color:var(--ivory);line-height:1.25}
.chap .inner{padding:4px 19px 20px 70px}
@media(max-width:620px){.chap .inner{padding:4px 17px 18px}}
.srcbox{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.srcbox h5{font-family:var(--f-cap);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;font-weight:600}
.srcbox a{display:block;font-size:13px;color:var(--muted);text-decoration:none;
  padding:4px 0 4px 15px;position:relative;line-height:1.5}
.srcbox a::before{content:"\203A";position:absolute;left:0;color:var(--gold-lo)}
.srcbox a:hover{color:var(--gold-hi)}

/* ---------------- letter origin cards ---------------- */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:11px}
.lcard{border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  background:linear-gradient(170deg,var(--surface-2),var(--ground-2));
  display:flex;flex-direction:column;gap:9px;transition:.18s}
.lcard:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.lcard.added{border-style:dashed}
.lcard .top{display:flex;align-items:center;gap:13px}
.lcard .g{font-family:var(--f-ar2);font-size:42px;line-height:1;color:var(--gold-hi);flex:none}
.lcard .id{flex:1;min-width:0}
.lcard .id .nm{font-size:14.5px;font-weight:600;color:var(--ivory)}
.lcard .id .arn{font-family:var(--f-ar2);font-size:16px;color:var(--muted);direction:rtl}
.lcard .num{flex:none;font-family:var(--f-dis);font-size:19px;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;opacity:.85}
.lcard .from{font-size:13px;line-height:1.65;color:var(--text)}
.lcard .from b{color:var(--gold-hi);font-weight:600}
.lcard .pic{font-size:12.5px;line-height:1.6;color:var(--faint)}
.lcard .tag{display:inline-block;font-family:var(--f-cap);font-size:8px;letter-spacing:.17em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--faint);align-self:flex-start}
.lcard .tag.q{border-color:rgba(232,128,74,.5);color:var(--ember)}
.lcard .tag.a{border-color:rgba(63,211,163,.45);color:var(--jade)}
.lcard .note{font-size:12.5px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);padding-top:9px}


/* ---------------- quiz explanation ---------------- */
.whybox{margin-top:13px;border-radius:12px;padding:14px 16px;border:1px solid var(--line-2);
  background:var(--ground-2);animation:wfade .22s ease-out}
@keyframes wfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.whybox.ok{border-color:rgba(63,211,163,.4)}
.whybox.no{border-color:rgba(232,128,74,.45)}
.whybox .vd{font-family:var(--f-cap);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:7px;font-weight:600}
.whybox.ok .vd{color:var(--jade)}
.whybox.no .vd{color:var(--ember)}
.whybox p{font-size:14px;line-height:1.7;color:var(--text);margin-bottom:12px}
.whybox .ref{display:block;font-size:12px;color:var(--faint);margin-top:-6px;margin-bottom:12px}

/* ---------------- misc ---------------- */
.hidden{display:none!important}
.center{display:grid;place-items:center;gap:14px;text-align:center;padding:60px 16px;color:var(--faint)}
.spin{width:26px;height:26px;border:2px solid var(--line-2);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom,0px));
  z-index:90;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1A1305;
  padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 14px 34px -14px #000;opacity:0;pointer-events:none;transition:.22s;max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(-7px)}
@media(min-width:940px){#toast{bottom:28px}}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th,table.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.tbl th{font-family:var(--f-cap);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
table.tbl td{color:var(--text)}
.scrollx{overflow-x:auto}