/* ========================================================================
   Ilmgage Tajwīd — tajwid.ilmgage.ai
   A sibling of arabic.ilmgage.ai: same cream / gold / serif family, with a
   deep night-blue primary and the classical tajwīd colour code.
   ======================================================================== */
:root{
  --bg:#f7f4ec; --bg-soft:#fffdf8; --surface:#fff;
  --ink:#1c2633; --ink-soft:#475466; --muted:#7a8494;
  --line:#e6e0d2; --line-strong:#d8d0bd;

  --pri:#17435e;      /* night blue (primary) */
  --pri-700:#0f3247; --pri-300:#6a9bb8; --pri-50:#e8f0f5;
  --gold:#b5892e; --gold-soft:#f3e7cb;
  --rose:#b23a48; --rose-soft:#f6e3e3;
  --green:#2f8f5b; --green-soft:#e2f1e7;

  /* tajwīd colour code (Dār al-Maʿrifah convention) */
  --t-ghunnah:#169b3c;   /* ghunnah, ikhfāʾ, iqlāb, idghām with ghunnah */
  --t-idgham:#8f8f8f;    /* idghām without ghunnah, silent letters */
  --t-qalqalah:#1e6fd9;  /* qalqalah */
  --t-madd2:#d9534f;     /* natural madd */
  --t-madd45:#c2185b;    /* obligatory madd */
  --t-maddjaiz:#ef7d00;  /* permissible madd */
  --t-madd6:#8b0000;     /* necessary madd */
  --t-tafkhim:#3b3fa8;   /* heavy letters */
  --t-wasl:#a0a0a0;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(28,38,51,.06),0 1px 3px rgba(28,38,51,.05);
  --shadow:0 4px 14px rgba(28,38,51,.08),0 2px 6px rgba(28,38,51,.05);
  --shadow-lg:0 18px 50px rgba(28,38,51,.16);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --arabic:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;
  --quran:"Amiri Quran","Amiri",serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none} a:hover{color:var(--pri-700)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;margin:0 0 .4em}
h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.45rem,3vw,2rem)} h3{font-size:1.25rem}
p{margin:0 0 1rem} small{color:var(--muted)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.ar{font-family:var(--arabic);direction:rtl;line-height:2}
span.ar,bdi.ar{font-size:1.28em;line-height:1.5}
.q{font-family:var(--quran);direction:rtl;line-height:2.3;font-size:1.65rem}
.muted{color:var(--muted)} .center{text-align:center}
.hidden{display:none!important}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(247,244,236,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:1.12rem}
.brand small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
.glyph{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-family:var(--arabic);font-size:1.45rem;background:linear-gradient(135deg,var(--pri),#2a6a8a);box-shadow:var(--shadow-sm);padding-bottom:4px}
.navlinks{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.navlinks a{padding:7px 12px;border-radius:var(--r-pill);color:var(--ink-soft);font-weight:500;font-size:.93rem}
.navlinks a:hover,.navlinks a.on{background:var(--pri-50);color:var(--pri)}
#authSlot{display:flex;align-items:center;gap:8px}
@media(max-width:760px){.nav .container{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}.navlinks{order:3;width:100%;margin:0;overflow-x:auto;flex-wrap:nowrap}.brand small{display:none}}

/* ---------- buttons, cards, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:600 .95rem var(--sans);padding:11px 20px;border-radius:var(--r-pill);background:var(--pri);color:#fff;transition:transform .12s,box-shadow .12s,background .12s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--pri-700);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--pri);box-shadow:inset 0 0 0 1.5px var(--pri-300)}
.btn.ghost:hover{background:var(--pri-50);color:var(--pri)}
.btn.gold{background:linear-gradient(135deg,#c99a3a,#a77a22);color:#fff}
.btn.sm{padding:7px 13px;font-size:.85rem}
.btn.lg{padding:14px 26px;font-size:1.05rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.iconbtn{border:0;background:var(--pri-50);color:var(--pri);width:38px;height:38px;border-radius:50%;cursor:pointer;display:inline-grid;place-items:center;font-size:1rem;flex:none}
.iconbtn:hover{background:var(--pri);color:#fff}
.iconbtn.playing{background:var(--gold);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(181,137,46,.18)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.card.hover{transition:transform .15s,box-shadow .15s}.card.hover:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kicker{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px}
.tag{display:inline-block;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--pri-50);color:var(--pri)}
.tag.gold{background:var(--gold-soft);color:#8a6520}.tag.green{background:var(--green-soft);color:var(--green)}.tag.rose{background:var(--rose-soft);color:var(--rose)}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
section{padding:56px 0}
.msg{padding:10px 14px;border-radius:var(--r);font-size:.92rem}.msg.ok{background:var(--green-soft);color:var(--green)}.msg.err{background:var(--rose-soft);color:var(--rose)}
.progress{height:8px;background:var(--line);border-radius:9px;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--pri-300),var(--pri));border-radius:9px;transition:width .4s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:72px 0 56px}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:620px;height:620px;background:radial-gradient(circle,rgba(181,137,46,.18),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto auto -40% -12%;width:620px;height:620px;background:radial-gradient(circle,rgba(23,67,94,.13),transparent 62%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:620px}
.hero-mouth{background:#fff;border-radius:28px;box-shadow:var(--shadow-lg);padding:10px;border:1px solid var(--line)}
.hero-letters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 0 4px;direction:rtl}
.hero-letters button{font:1.35rem var(--arabic);width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);cursor:pointer;padding-bottom:6px}
.hero-letters button.on,.hero-letters button:hover{background:var(--pri);color:#fff;border-color:var(--pri)}

/* ---------- course cards ---------- */
.course-card{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.course-card .num{font-family:var(--serif);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.course-card .art{height:120px;border-radius:16px;margin:-6px -6px 6px;display:grid;place-items:center;font-family:var(--quran);font-size:3rem;color:#fff;position:relative;overflow:hidden}
.course-card .art span{position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.course-card .price{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.course-card ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:.93rem}
.art.c1{background:linear-gradient(135deg,#2f8f5b,#1f6b6b)}.art.c2{background:linear-gradient(135deg,#17435e,#2a6a8a)}
.art.c3{background:linear-gradient(135deg,#5b2a6e,#17435e)}.art.c4{background:linear-gradient(135deg,#8a5a14,#5b2a6e)}
.pattern{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(circle at 25% 25%,#fff 2px,transparent 2.5px),radial-gradient(circle at 75% 75%,#fff 2px,transparent 2.5px);background-size:22px 22px}

/* ---------- course + lesson pages ---------- */
.crumbs{font-size:.88rem;color:var(--muted);margin:22px 0 8px}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--pri)}
.unit{margin:26px 0}
.unit-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.unit-head .n{font:700 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lesson-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:8px;color:var(--ink);transition:border-color .15s,transform .15s}
.lesson-row:hover{border-color:var(--pri-300);transform:translateX(3px)}
.lesson-row .badge{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--pri-50);color:var(--pri);font:600 .9rem var(--serif)}
.lesson-row.done .badge{background:var(--green);color:#fff}
.lesson-row.locked{opacity:.6}
.lesson-row .t{flex:1}.lesson-row .t small{display:block}
.lesson-row .ar{font-size:1.15rem;color:var(--ink-soft)}

.lesson{padding-bottom:80px}
.lesson h1{font-size:clamp(1.8rem,3.6vw,2.5rem)}
.lesson .block{margin:22px 0}
.lesson p,.lesson li{font-size:1.04rem}
.lesson h2{margin-top:38px;padding-top:6px}
.lesson h3{margin-top:24px}
.callout{border-radius:var(--r);padding:16px 18px;background:var(--pri-50);border-left:4px solid var(--pri)}
.callout.gold{background:var(--gold-soft);border-color:var(--gold)}
.callout.rose{background:var(--rose-soft);border-color:var(--rose)}
.callout.green{background:var(--green-soft);border-color:var(--green)}
.callout .ttl{font-weight:700;margin-bottom:4px;display:block}
.callout p:last-child{margin:0}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);font-size:.95rem}
.tbl th{background:var(--pri);color:#fff;text-align:left;padding:10px 12px;font-weight:600}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl td.ar,.tbl th.ar{text-align:right;font-size:1.25rem}
.tblwrap{overflow-x:auto}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

/* term card */
.term{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.term .ar{font-size:1.9rem;grid-row:span 2;color:var(--pri)}
.term b{font-family:var(--serif);font-size:1.1rem}.term span{color:var(--ink-soft)}

/* ---------- matn (poem) ---------- */
.matn{background:linear-gradient(180deg,#fffdf6,#fbf6e8);border:1px solid #eadfc3;border-radius:var(--r-lg);padding:18px 18px 10px;position:relative}
.matn::before{content:"";position:absolute;inset:6px;border:1px solid #efe4c8;border-radius:16px;pointer-events:none}
.bayt{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:10px 6px;border-bottom:1px dashed #e6d9b8;position:relative}
.bayt:last-child{border:0}
.bayt .no{font:600 .8rem var(--serif);color:#a8853d;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid #e3cf9d;margin-top:10px}
.bayt .lines{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;direction:rtl;font-family:var(--arabic);font-size:1.45rem;line-height:2.1}
.bayt .lines span{text-align:center}
.bayt .en{grid-column:2;color:var(--ink-soft);font-size:.95rem;font-style:italic}
.bayt.hide-text .lines span{filter:blur(7px);transition:filter .2s;cursor:pointer}.bayt.hide-text .lines span.peek{filter:none}
@media(max-width:640px){.bayt .lines{grid-template-columns:1fr;gap:0}}

/* ---------- Qur'anic example ---------- */
.ex{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:14px}
.ex .q{flex:1;font-size:1.75rem;line-height:2.2;text-align:right}
.ex .ref{font-size:.78rem;color:var(--muted);white-space:nowrap}
.ex .note{display:block;font-size:.88rem;color:var(--ink-soft);direction:ltr;text-align:left;font-family:var(--sans);line-height:1.4}
.exlist{display:grid;gap:8px}
.hl{border-radius:7px;padding:0 3px;background:rgba(255,206,92,.5);box-shadow:inset 0 -3px 0 rgba(181,137,46,.75)}
.w{cursor:pointer;border-radius:6px;transition:background .15s}.w:hover{background:var(--pri-50)}
.w.playing{background:var(--gold-soft)}

/* tajwīd colours (classes match the corpus tags) */
.tj .ghunnah,.tj .ikhafa,.tj .iqlab,.tj .idgham_ghunnah,.tj .ikhafa_shafawi,.tj .idgham_shafawi{color:var(--t-ghunnah)}
.tj .idgham_wo_ghunnah,.tj .slnt,.tj .idgham_mutajanisayn,.tj .idgham_mutaqaribayn,.tj .laam_shamsiyah{color:var(--t-idgham)}
.tj .ham_wasl{color:var(--t-wasl)}
.tj .qalaqah{color:var(--t-qalqalah)}
.tj .madda_normal{color:var(--t-madd2)}.tj .madda_obligatory{color:var(--t-madd45)}.tj .madda_permissible{color:var(--t-maddjaiz)}.tj .madda_necessary{color:var(--t-madd6)}
.tj .focus{text-shadow:0 0 .01px;background:rgba(255,214,102,.45);border-radius:5px}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.85rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---------- the living mouth ---------- */
.mouth svg{width:100%;height:auto;display:block;user-select:none}
.m-zone-hl{fill:#ffcc33;opacity:0;transition:opacity .35s;pointer-events:none}.m-zone-hl.on{opacity:.38}
.m-p{fill:#c8ecff}
.m-lbl-ar{font:15px var(--arabic);fill:#1d3b53}.m-lbl-en{font:9.5px var(--sans);fill:#5b7184}
.m-labels .dim{opacity:.15}
.explorer{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:900px){.explorer{grid-template-columns:1fr}.explorer .stage{position:static}}
.explorer .stage{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;position:sticky;top:76px}
.stage-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 6px 0}
.stage-tools .seg{display:inline-flex;background:var(--bg);border-radius:var(--r-pill);padding:3px}
.stage-tools .seg button{border:0;background:transparent;padding:5px 11px;border-radius:var(--r-pill);font:500 .82rem var(--sans);cursor:pointer;color:var(--ink-soft)}
.stage-tools .seg button.on{background:#fff;color:var(--pri);box-shadow:var(--shadow-sm)}
.letterpad{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;direction:rtl}
.letterpad button{font:1.5rem var(--arabic);height:50px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;padding-bottom:8px;position:relative;transition:transform .1s}
.letterpad button:hover{transform:translateY(-2px);border-color:var(--pri-300)}
.letterpad button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.letterpad button i{position:absolute;left:4px;bottom:3px;width:7px;height:7px;border-radius:50%}
.info-card h2{display:flex;align-items:baseline;gap:14px}
.info-card h2 .big{font:3.2rem var(--arabic);color:var(--pri);line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.8rem;padding:4px 10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);color:var(--ink-soft)}
.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.chip .ar{font-size:1.05rem}
.regions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.region-pill{border:0;cursor:pointer;padding:6px 12px;border-radius:var(--r-pill);font:600 .82rem var(--sans);color:#fff;opacity:.85}
.region-pill:hover{opacity:1}
.mini-views{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mini-views>div{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.mini-views h4{font:600 .78rem var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:2px 4px 4px}
.mini-views svg{width:100%;height:auto;display:block}
.tooth{transition:fill .3s}.tooth.on{fill:#ffcf5a!important;stroke:#c9871a!important}
.tg-part{transition:fill .3s,opacity .3s}.tg-part.on{fill:#ffcf5a!important}
.sifah-meter{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 10px;align-items:center;font-size:.86rem;margin:4px 0}
.sifah-meter .l{text-align:right}.sifah-meter .bar{width:76px;height:8px;border-radius:5px;background:var(--line);position:relative}
.sifah-meter .bar i{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--pri);transition:left .3s}
.sifah-meter .on{font-weight:700;color:var(--pri)}

/* ---------- widgets ---------- */
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.widget h4{font:700 .8rem var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin:0 0 10px}
.beats{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.beat{width:44px;height:44px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;font:600 1rem var(--serif);color:var(--muted);transition:all .15s}
.beat.on{background:var(--gold);border-color:var(--gold);color:#fff;transform:scale(1.12)}
.router{display:grid;gap:10px}
.router .pick{display:flex;flex-wrap:wrap;gap:6px;direction:rtl;justify-content:center}
.router .pick button{font:1.4rem var(--arabic);width:44px;height:46px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;padding-bottom:6px}
.router .pick button:hover{border-color:var(--pri)}
.router .out{min-height:110px;border-radius:var(--r);background:var(--bg-soft);border:1px dashed var(--line-strong);padding:14px;text-align:center}
.router .out .big{font:2.2rem var(--quran);direction:rtl}
.flow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.92rem}
.flow .node{padding:8px 14px;border-radius:12px;background:var(--pri-50);color:var(--pri);font-weight:600}
.flow .node.on{background:var(--pri);color:#fff}
.flow .arr{color:var(--muted)}

/* recorder / voice slots */
.voice{display:flex;align-items:center;gap:12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.voice .ar{font-size:1.5rem}
.voice .pending{font-size:.78rem;color:var(--muted);font-style:italic}
.rec{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rec .dot{width:10px;height:10px;border-radius:50%;background:var(--rose);animation:pulse 1s infinite}
.wave{height:36px;flex:1;min-width:120px}

/* ---------- exercises ---------- */
.drill{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin:22px 0;box-shadow:var(--shadow-sm)}
.drill-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.drill-head .ic{width:34px;height:34px;border-radius:10px;background:var(--gold-soft);color:#8a6520;display:grid;place-items:center;font-size:1rem}
.drill-head h3{margin:0;font-size:1.12rem}
.drill .instr{color:var(--ink-soft);font-size:.95rem}
.item{padding:14px 0;border-top:1px solid var(--line)}
.item:first-of-type{border-top:0}
.item .prompt{font-size:1.04rem;margin-bottom:10px}
.item .prompt .q{font-size:1.9rem;display:block;text-align:center}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{border:1.5px solid var(--line-strong);background:#fff;border-radius:var(--r-pill);padding:8px 16px;cursor:pointer;font:500 .95rem var(--sans);transition:all .12s}
.choice .ar{font-size:1.35rem}
.choice:hover{border-color:var(--pri-300)}
.choice.sel{border-color:var(--pri);background:var(--pri-50);color:var(--pri)}
.choice.right{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.choice.wrong{border-color:var(--rose);background:var(--rose-soft);color:var(--rose)}
.fb{margin-top:8px;font-size:.92rem;padding:8px 12px;border-radius:10px}
.fb.ok{background:var(--green-soft);color:#1f6b42}.fb.no{background:var(--rose-soft);color:#8c2633}
.spot{font-family:var(--quran);font-size:1.85rem;line-height:2.4;direction:rtl;text-align:center}
.spot .tok{cursor:pointer;border-radius:8px;padding:0 3px;transition:background .12s}
.spot .tok:hover{background:var(--pri-50)}
.spot .tok.sel{background:#ffe6a6}
.spot .tok.right{background:var(--green-soft);color:var(--green)}
.spot .tok.miss{box-shadow:inset 0 0 0 2px var(--green)}
.spot .tok.wrong{background:var(--rose-soft);color:var(--rose)}
.sortbins{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:10px}
.bin{border:2px dashed var(--line-strong);border-radius:var(--r);min-height:84px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;cursor:pointer}
.bin.target{border-color:var(--pri);background:var(--pri-50)}
.bin h5{width:100%;margin:0 0 4px;font:600 .8rem var(--sans);color:var(--ink-soft)}
.pool{display:flex;flex-wrap:wrap;gap:8px;direction:rtl;justify-content:center;min-height:52px}
.tile{font:1.5rem var(--arabic);min-width:44px;height:46px;padding:0 10px 6px;border-radius:10px;border:1.5px solid var(--line-strong);background:#fff;cursor:pointer}
.tile.sel{border-color:var(--gold);background:var(--gold-soft)}
.tile.right{border-color:var(--green);background:var(--green-soft)}.tile.wrong{border-color:var(--rose);background:var(--rose-soft)}
.drill-foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.score{font:600 1.05rem var(--serif)}
.order-slots{display:flex;flex-wrap:wrap;gap:8px;direction:rtl;min-height:54px;border-bottom:2px solid var(--line);padding:6px 0;margin-bottom:10px;justify-content:center}

/* ---------- modal / toast ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(20,28,38,.45);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:var(--r-lg);padding:26px;max-width:440px;width:100%;box-shadow:var(--shadow-lg);max-height:92vh;overflow:auto}
.modal h3{margin-bottom:12px}
.field{display:block;margin-bottom:12px}.field span{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line-strong);font:inherit;background:#fff}
.field input:focus{outline:none;border-color:var(--pri)}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(40px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-pill);opacity:0;transition:all .25s;z-index:80;font-size:.92rem;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.paywall{text-align:center;padding:40px 24px}
.paywall .lock{font-size:2.2rem}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:.88rem;margin-top:40px}
.pill-user{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);font-size:.88rem;cursor:pointer}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.8rem}
.stat{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--pri)}
.bar-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-soft);margin-bottom:4px}

/* ========================================================================
   Tajwīd Atlas (#/rules, #/rules/<id>) and the colour muṣḥaf (#/mushaf)
   ======================================================================== */
.atlas-hero{padding:56px 0 34px;background:radial-gradient(1200px 400px at 85% -10%,#e7eef3 0,transparent 60%),radial-gradient(900px 380px at -10% 110%,var(--gold-soft) 0,transparent 55%)}
.atlas-hero h1{max-width:820px}
.atlas-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.atlas-stats div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.atlas-stats b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--pri);line-height:1.1}
.atlas-stats span{font-size:.85rem;color:var(--muted)}
@media(max-width:760px){.atlas-stats{grid-template-columns:repeat(2,1fr)}}
.atlas-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 10px}
.atlas-filter .chip{cursor:pointer;font:600 .85rem var(--sans);padding:7px 14px}
.atlas-search{flex:1 1 260px;max-width:360px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font:inherit;background:var(--surface)}
.fam-nav{display:flex;gap:6px;overflow-x:auto;padding:6px 0 4px;position:sticky;top:64px;z-index:5;background:var(--bg)}
.fam-nav button{flex:none;border:0;background:transparent;font:500 .86rem var(--sans);color:var(--ink-soft);padding:6px 11px;border-radius:var(--r-pill);cursor:pointer}
.fam-nav button:hover{background:var(--pri-50);color:var(--pri)}
.atlas-fam{padding:26px 0 8px}
.fam-head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:16px}
.fam-head h2{margin:0}.fam-ar{font-size:1.25rem;color:var(--ink-soft)}
.rule-card{color:inherit;display:flex;flex-direction:column;gap:6px;padding:20px;border-top:4px solid var(--rc)}
.rule-card h3{margin:4px 0 0;font-size:1.12rem}
.rule-card .rc-ar{font-size:1.25rem;color:var(--rc);line-height:1.5}
.rule-card .rc-def{font-size:.88rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rule-card .count{font:700 1.05rem var(--serif);color:var(--ink)}
.rule-card .tag{align-self:flex-start}
.swatch{width:14px;height:14px;border-radius:4px;background:var(--rc);display:inline-block}
.subbar{display:flex;height:6px;border-radius:6px;overflow:hidden;gap:2px;margin-top:4px}.subbar i{background:var(--rc)}
.lvl{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill)}
.lvl.lv1{background:var(--green-soft);color:var(--green)}.lvl.lv2{background:var(--pri-50);color:var(--pri)}.lvl.lv3{background:var(--gold-soft);color:#8a6520}
.method{margin:40px 0 60px}.method ul{margin:0 0 1rem}

.rule-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 9%,var(--bg)) 0,var(--bg) 100%);padding-bottom:10px;border-bottom:1px solid var(--line)}
.rule-head{display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:start}
.rule-head h1{margin:12px 0 8px}
.rule-big{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;text-align:center;box-shadow:var(--shadow-sm);border-top:5px solid var(--rc)}
.rule-big .ar{font-size:2rem;color:var(--rc);line-height:1.6}
.rule-big b{display:block;font:700 2.4rem var(--serif);color:var(--ink)}
.rule-big span{color:var(--muted);font-size:.88rem}
.letters{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.letters .ar{font-size:1.6rem;width:46px;height:46px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--rc);line-height:1}
.sib{display:flex;gap:6px;overflow-x:auto;margin:22px 0 6px;padding-bottom:4px}
.sib a{flex:none;font-size:.84rem;padding:6px 12px;border-radius:var(--r-pill);color:var(--ink-soft);border:1px solid var(--line);background:var(--surface)}
.sib a.on{background:var(--rc);color:#fff;border-color:var(--rc)}
@media(max-width:820px){.rule-head{grid-template-columns:1fr}}
.rule-layout{display:grid;grid-template-columns:300px 1fr;gap:28px;margin:28px 0 60px;align-items:start}
@media(max-width:900px){.rule-layout{grid-template-columns:1fr}}
.situations{position:sticky;top:80px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;max-height:calc(100vh - 100px);overflow:auto}
@media(max-width:900px){.situations{position:static;max-height:none}}
.situations h3{margin:0 0 4px}
.facet{margin:14px 0}.facet h4{font:700 .78rem var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.fbar{position:relative;display:flex;align-items:center;width:100%;border:0;background:transparent;padding:5px 8px;border-radius:8px;cursor:pointer;font:500 .86rem var(--sans);color:var(--ink);text-align:left;gap:8px;overflow:hidden}
.fbar i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--rc) 14%,transparent);z-index:0;border-radius:8px}
.fbar span,.fbar b{position:relative;z-index:1}.fbar span{flex:1}.fbar span.ar{font-size:1.3rem;line-height:1.2}
.fbar b{font-weight:600;color:var(--ink-soft);font-size:.82rem}
.fbar:hover{background:var(--bg)}.fbar.on{outline:2px solid var(--rc)}
.occ-head{display:flex;align-items:baseline;gap:12px}.occ-head h2{margin:0}
.occ-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px}
.occ-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.occ-q{color:var(--ink);font-size:1.9rem;line-height:2;text-align:right}
.occ-q:hover{color:var(--ink)}.occ-q .join{color:var(--ink-soft)}
.hlr{font-weight:700}.hlr2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}
.occ-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.84rem}
.occ-meta>a{font-weight:600}
.occ-meta .iconbtn{margin-left:auto}
.iconbtn.sm{width:30px;height:30px;font-size:.8rem}
.ck{width:9px;height:9px;border-radius:50%;display:inline-block}.ck0{background:var(--green)}.ck1{background:var(--gold)}.ck2{background:var(--rose)}.ck3{background:var(--line-strong)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;color:var(--ink-soft);font-size:.9rem}

.mushaf-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 14px}
.surah-pick{padding:8px 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font:inherit;background:var(--surface);max-width:100%}
.mushaf-wrap{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start;margin-bottom:60px}
@media(max-width:900px){.mushaf-wrap{grid-template-columns:1fr}}
.legend-panel{position:sticky;top:80px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
@media(max-width:900px){.legend-panel{position:static}.legend-panel .layers{display:flex;flex-wrap:wrap;gap:2px 14px}}
.legend-panel summary{list-style:none;cursor:pointer}.legend-panel summary::-webkit-details-marker{display:none}.legend-panel summary h4{display:inline}.legend-panel:not([open]) summary h4::after{content:' — tap to choose ▾'}.legend-panel:not([open]) summary h4{margin:0}
.legend-panel h4{margin:0 0 8px;font:700 .78rem var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.layer{display:flex;align-items:center;gap:8px;font-size:.86rem;padding:4px 0;cursor:pointer}
.layer i{width:14px;height:14px;border-radius:4px;flex:none}
.focus-note{margin-top:12px;font-size:.85rem;background:var(--gold-soft);padding:8px 10px;border-radius:10px}
.mushaf-sheet{background:#fffdf6;border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:28px clamp(16px,4vw,48px) 40px;box-shadow:var(--shadow);background-image:linear-gradient(#fffdf6,#fffdf6),repeating-linear-gradient(90deg,transparent 0 6px,rgba(181,137,46,.04) 6px 7px)}
.surah-head{text-align:center;border:2px solid var(--gold);border-radius:14px;padding:6px;margin-bottom:12px;background:linear-gradient(90deg,var(--gold-soft),#fffaf0,var(--gold-soft))}
.surah-head .ar{font-size:1.7rem;line-height:1.6;color:#6b4c12}
.basmalah{text-align:center;font-size:1.8rem;margin-bottom:6px}
.mushaf-text{font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:2.6;text-align:justify;text-align-last:center;color:#1b1b1b}
.mushaf-text .tg{cursor:pointer}.mushaf-text .tg:hover{background:rgba(181,137,46,.15);border-radius:4px}
.ayah.target{background:rgba(181,137,46,.14);border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wd.focus{outline:2px dashed var(--gold);outline-offset:4px;border-radius:6px}
.ayah-no{font:inherit;font-size:.72em;border:1.5px solid var(--gold);color:#6b4c12;background:#fff8e6;border-radius:50%;min-width:1.7em;height:1.7em;line-height:1.5em;padding:0 .2em;cursor:pointer;vertical-align:middle;font-family:var(--arabic)}
.ayah-no.playing{background:var(--gold);color:#fff}
.rule-pop{position:absolute;z-index:60;width:320px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 14px}
.pop-head{display:flex;align-items:center;gap:8px}.pop-head .q{font-size:1.7rem;line-height:1.8}
.pop-x{border:0;background:transparent;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.rule-pop ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.rule-pop li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rule-pop li i{width:10px;height:10px;border-radius:3px;flex:none}
.rule-pop li small{width:100%;padding-left:16px;color:var(--muted)}
.atlas-promo{display:flex;gap:24px;align-items:center;justify-content:space-between;border-left:5px solid var(--gold)}.atlas-promo-ar{font-size:2.2rem;flex:none}@media(max-width:700px){.atlas-promo{flex-direction:column;align-items:flex-start}}

/* ========================================================================
   Activities (#/play)
   ======================================================================== */
.play-page{padding-bottom:60px}.play-page h1{margin-top:10px}
.band-pick{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 16px;justify-content:inherit}
.play-page .center .band-pick{justify-content:center}
.band{display:flex;flex-direction:column;padding:12px 18px;border-radius:var(--r);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);min-width:130px}
.band b{font-family:var(--serif);font-size:1.1rem}.band span{font-size:.82rem;color:var(--muted)}
.band:hover{border-color:var(--pri-300);color:var(--ink)}.band.on{border-color:var(--pri);background:var(--pri-50)}
.play-fam{margin:26px 0}.play-fam h3 .ar{color:var(--ink-soft)}
.play-card{display:flex;flex-direction:column;gap:2px;color:inherit;border-top:4px solid var(--rc);padding:16px}
.play-card .ar{font-size:1.3rem;color:var(--rc)}
.engine-card{display:flex;flex-direction:column;gap:6px;color:inherit}.engine-card p{font-size:.88rem;margin:0}
.engine-card .tag{align-self:flex-start;margin-top:auto}.engine-card.soon{opacity:.55}
.eicon{font-size:1.8rem;line-height:1}
.sess-head{display:flex;align-items:center;gap:12px;margin-top:8px}.sess-head h2{margin:0}
.sess-score{font:700 1.2rem var(--serif);color:var(--pri)}
.sess-bar{height:8px;background:var(--line);border-radius:8px;overflow:hidden;margin:14px 0 0}.sess-bar i{display:block;height:100%;width:0;background:var(--rc);transition:width .3s}
.sess-card{min-height:340px}
.q-prompt{font-size:1.08rem;text-align:center;margin:4px 0 6px}.q-prompt .ar{font-size:1.5rem}
.q-word{text-align:center;font-size:clamp(2.6rem,7vw,3.6rem);line-height:2.4;padding:6px 0 10px;color:var(--ink)}
.q-next{color:var(--ink-soft)}
.glow{color:var(--gold);text-shadow:0 0 14px rgba(181,137,46,.45)}
.glow2{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:14px}
.glow-key{color:var(--gold);font-weight:700}
.q-ref{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.85rem;margin-bottom:14px;flex-wrap:wrap}
.choices.big{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.choices.big .choice{padding:12px 20px;font-size:1rem;display:inline-flex;align-items:center;gap:8px}
.choice .dot{width:10px;height:10px;border-radius:50%;display:inline-block;opacity:0}
.choice.right .dot{opacity:1}
.router-pair{display:flex;align-items:center;justify-content:center;gap:18px;font-size:4rem;line-height:1.6;direction:rtl}
.rp-plus{font-family:var(--sans);font-size:2rem;color:var(--muted)}.rp-next{color:var(--gold)}
.pipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:6px}
.pipe{border:0;border-radius:14px;padding:14px 10px;cursor:pointer;background:color-mix(in srgb,var(--pc) 12%,#fff);border-bottom:5px solid var(--pc);display:flex;flex-direction:column;gap:2px;font:600 .98rem var(--sans);color:var(--ink);transition:transform .1s}
.pipe:hover{transform:translateY(-2px)}.pipe small{font-weight:500;color:var(--ink-soft)}.pipe small .ar{font-size:1.15rem}
.pipe.right{outline:3px solid var(--green)}.pipe.wrong{outline:3px solid var(--rose);opacity:.7}
.hl-stage{display:grid;grid-template-rows:auto auto auto;justify-items:center;gap:6px;outline:none}
.hl-btn{border:0;border-radius:var(--r);padding:10px 26px;cursor:pointer;font:700 1rem var(--sans);display:flex;flex-direction:column;align-items:center;min-width:220px}
.hl-btn small{font-weight:500;opacity:.8}
.hl-btn.up{background:#e3e4f6;color:#2c2f86}.hl-btn.down{background:#e5f0fa;color:#2f6aa3}
.hl-btn.right{outline:3px solid var(--green)}.hl-btn.wrong{outline:3px solid var(--rose)}
.swipe{touch-action:none;user-select:none;cursor:grab}
.meter{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:10px}
.beats{display:flex;gap:10px;direction:ltr}
.beats i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);transition:background .08s}
.beats i.goal{border-color:var(--rc);border-style:dashed}
.beats i.on{background:var(--rc);border-style:solid;border-color:var(--rc)}
.hold{width:132px;height:132px;border-radius:50%;border:0;background:var(--rc);color:#fff;font:700 1.15rem var(--sans);cursor:pointer;box-shadow:var(--shadow);user-select:none;touch-action:none}
.hold.down{transform:scale(.94);box-shadow:0 0 0 10px color-mix(in srgb,var(--rc) 20%,transparent)}
.hold:disabled{opacity:.8;cursor:default}
.stars{font-size:2rem;letter-spacing:4px}
.sess-end .row{gap:10px;flex-wrap:wrap;margin-top:12px}
.session .fb{text-align:center}.session [data-fb] .btn{display:flex;margin:12px auto 0}