/* MADAR design system. Tokens first, then components shared by every page and both course tracks. */
:root{
  --burgundy:#64152D;--burgundy-dark:#3F0D1C;--ivory:#F5EFE6;--cream:#FBF8F3;--charcoal:#302328;--rose:#A65A70;--rose-text:#8A3F57;--stone:#D8CEC5;--stone-dark:#6B5D62;
  --emerald:#0F4A3A;--emerald-dark:#0A3328;--gold:#B08D3C;--gold-text:#7A5C1B;
  --ok:#2F6B4F;--warn:#8A5200;--err:#A32C2C;--info:#1F5A7A;
  --accent:var(--burgundy);--accent-dark:var(--burgundy-dark);--accent-soft:var(--ivory);--accent-text:var(--burgundy);--ornament:var(--rose);--on-accent:var(--ivory);
  --soft:var(--ivory);--tint:#F6ECEF;--navbg:rgba(251,248,243,.96);--ok-bg:#EAF3EE;--err-bg:#FBEDED;--bg:var(--cream);--surface:#fff;--fg:var(--charcoal);--muted:var(--stone-dark);--line:var(--stone);
  --font-ar:'Tajawal',system-ui,sans-serif;--font-lat:'Inter',system-ui,sans-serif;
  --fs-display:clamp(2.1rem,4.6vw,3.6rem);--fs-title:clamp(1.7rem,3.2vw,2.4rem);--fs-section:1.3rem;--fs-card:1.12rem;--fs-body:1.0625rem;--fs-small:.9rem;--fs-meta:.8125rem;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--maxw:1180px;
  --r-sm:6px;--r:10px;--r-lg:16px;--sh-1:0 1px 2px rgba(48,35,40,.06);--sh-2:0 8px 24px rgba(48,35,40,.10);
  --dur:.18s;--ease:cubic-bezier(.2,.7,.2,1)}
[data-track=quran]{--accent:var(--emerald);--accent-dark:var(--emerald-dark);--accent-soft:#E7EFE8;--accent-text:var(--emerald);--ornament:var(--gold);--on-accent:var(--ivory)}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-ar);font-size:var(--fs-body);line-height:1.75;padding-bottom:env(safe-area-inset-bottom,0)}
html[lang=en] body{font-family:var(--font-lat);line-height:1.6}
a{color:inherit}h1,h2,h3{line-height:1.25;margin:0 0 var(--s3);font-weight:800}p{margin:0 0 var(--s3)}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:var(--r-sm)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:var(--burgundy);color:var(--ivory);padding:10px 16px;border-radius:var(--r);z-index:80}.skip:focus{top:44px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--s5)}.pg{padding-top:var(--s5);padding-bottom:var(--s7)}
#app{outline:none;min-height:60vh}
.display{font-size:var(--fs-display)}.title{font-size:var(--fs-title)}.section{font-size:var(--fs-section)}.mag{letter-spacing:0}
.lead{color:var(--muted);max-width:42em;margin:0 0 var(--s6)}.meta{font-size:var(--fs-meta);color:var(--muted)}.meta.big{font-size:1rem}
.block{padding:var(--s8) 0}.track-band{background:var(--soft)}
.read{max-width:68ch}.hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
/* demo ribbon, logo, nav */
.ribbon{background:var(--charcoal);color:var(--ivory);font-size:var(--fs-meta);text-align:center;padding:6px var(--s4)}
.ribbon button{font:inherit;background:none;color:var(--ivory);border:1px solid var(--stone-dark);border-radius:var(--r-sm);padding:2px 10px;margin-inline-start:var(--s2);cursor:pointer}
.logo{flex:none}.lg-c{fill:var(--logo-a,var(--burgundy))}.lg-o{stroke:var(--logo-b,var(--rose))}.lg-d{fill:var(--logo-b,var(--rose))}.lg-s{fill:var(--logo-s,var(--burgundy-dark))}
.nav{position:sticky;top:0;z-index:30;background:var(--navbg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:var(--s4);min-height:68px;position:relative}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-weight:800;font-size:1.35rem}
.nav-links{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;flex:1}
.nav-links a{display:block;text-decoration:none;font-weight:500;padding:6px 6px;border-bottom:2px solid transparent;transition:border-color var(--dur);white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{border-color:var(--rose)}
.nav-tools{display:flex;gap:var(--s1);align-items:center;margin-inline-start:auto}
.btn.menu-btn{display:none}
.bell{position:relative}.dot{position:absolute;top:-2px;inset-inline-end:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--err);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.acct{position:relative}.acct .nm{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);min-width:190px;padding:var(--s2);z-index:40}
.menu[hidden]{display:none}.menu a,.menu button{display:block;width:100%;text-align:start;font:inherit;background:none;border:0;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;color:var(--fg)}.menu a:hover,.menu button:hover{background:var(--soft)}
@media (max-width:1100px){.btn.menu-btn{display:inline-flex}.nav-links{display:none;position:absolute;inset-inline:0;top:100%;background:var(--bg);flex-direction:column;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);gap:0}.nav-links.open{display:flex}.nav-links a{padding:12px 4px}.nm{display:none}}
/* icons, buttons, avatar */
.ic{width:20px;height:20px;flex:none}.ic.sm{width:14px;height:14px;vertical-align:-2px}[dir=ltr] .ic-fwd{transform:scaleX(-1)}[dir=rtl] .ic-back{transform:scaleX(-1)}
.btn{font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;padding:9px 22px;border-radius:var(--r);border:1.5px solid var(--accent);background:transparent;color:var(--accent-text);cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur),transform var(--dur)}
.btn:hover{background:var(--accent);color:var(--on-accent)}.btn:active{transform:translateY(1px)}
.btn-fill{background:var(--accent);color:var(--on-accent)}.btn-fill:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-ghost{border-color:transparent}.btn-ghost:hover{background:var(--soft);color:var(--accent-text)}
.btn-sm{min-height:38px;padding:5px 14px;font-size:var(--fs-small)}.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn.loading::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.lnk{font:inherit;background:none;border:0;color:var(--rose-text);text-decoration:underline;cursor:pointer;padding:0}
.av{--s:40px;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:calc(var(--s)*.42);color:var(--ivory);flex:none}
.av0{background:var(--burgundy)}.av1{background:var(--rose-text)}.av2{background:var(--emerald)}.av3{background:var(--charcoal)}.av4{background:#7A5C1B}
.tag{font-size:var(--fs-meta);font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);padding:1px 8px}
.tag-draft{display:inline-block;font-size:var(--fs-meta);font-weight:700;color:var(--warn);border:1px solid currentColor;border-radius:var(--r-sm);padding:0 8px;vertical-align:middle}.tag-draft.inv{color:var(--ivory)}
.badge{display:inline-block;font-size:var(--fs-meta);font-weight:700;padding:2px 10px;border-radius:var(--r-sm);border:1px solid currentColor;white-space:nowrap;background:var(--surface)}
.b-urgent{color:var(--err)}.b-open{color:var(--info)}.b-up{color:var(--warn)}.b-sub{color:var(--rose-text)}.b-ok{color:var(--ok)}.b-closed{color:var(--muted)}
/* hero */
.hero{padding:var(--s8) 0 var(--s7)}.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:center}
.hero .lead{font-size:1.2rem}.cta{display:flex;gap:var(--s4);flex-wrap:wrap}.cta .btn{flex:1 1 230px;max-width:310px;min-height:56px;font-size:1.05rem}
.hero-art{--logo-a:var(--ivory);--logo-b:var(--rose);--logo-s:var(--ivory);aspect-ratio:1/1;border-radius:var(--r-lg);background:var(--burgundy);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--ivory)}
.hero-art .pat{position:absolute;inset:0;width:100%;height:100%;opacity:.28}
.art-c{position:relative;display:grid;justify-items:center;gap:var(--s2)}.art-c b{font-size:clamp(2.6rem,6vw,4rem);line-height:1}.art-c span{letter-spacing:.25em;font-size:.8rem;opacity:.85;font-family:var(--font-lat)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-art{aspect-ratio:16/9}}
/* alerts + toasts */
.alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border-radius:var(--r);background:var(--soft);border-inline-start:4px solid var(--rose)}.alert b{display:block}
.alert.err{border-color:var(--err);background:var(--err-bg)}.alert.ok{border-color:var(--ok);background:var(--ok-bg)}.alert .ic{margin-top:4px}
#toasts{position:fixed;inset-inline:16px;bottom:16px;z-index:90;display:grid;gap:8px;max-width:420px}.alert.t{background:var(--surface);box-shadow:var(--sh-2)}
/* course composition */
.course{display:grid;grid-template-columns:300px 1fr;gap:var(--s5);align-items:stretch}
.panel{background:var(--accent);color:var(--on-accent);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset-inline-end:-40px;bottom:-40px;width:150px;height:150px;border:1.5px solid var(--ornament);border-radius:50%;opacity:.7;pointer-events:none}
.panel h2{font-size:1.8rem}.panel p{opacity:.92}.panel .count{font-size:var(--fs-small);color:var(--on-accent);opacity:.8;font-weight:700}
.panel .btn{margin-top:auto;border-color:var(--on-accent);color:var(--on-accent);position:relative;z-index:1}.panel .btn:hover{background:var(--on-accent);color:var(--accent)}
.grid-en{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}.grid-qr{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:1100px){.course{grid-template-columns:1fr}}@media (max-width:900px){.grid-en,.grid-qr{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.grid-en,.grid-qr{grid-template-columns:1fr}}
.lv{display:flex;flex-direction:column;gap:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);text-decoration:none;min-height:180px;box-shadow:var(--sh-1);transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur) var(--ease)}
.lv:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px)}.lv-top{display:flex;justify-content:space-between;align-items:center}
.lv-n{font-size:1.9rem;font-weight:800;color:var(--accent-text);line-height:1}.lv-sym{width:30px;height:30px}.lv-sym .t{fill:none;stroke:var(--ornament);stroke-width:1.5;opacity:.5}.lv-sym .d{fill:var(--accent)}
.lv-name{font-weight:800;font-size:var(--fs-card);line-height:1.3}.lv-en{font-size:var(--fs-small);color:var(--muted);font-family:var(--font-lat)}.lv-sum{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.lv-foot{margin-top:auto;display:flex;align-items:center;gap:var(--s3);color:var(--accent-text)}.path{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}.path i{display:block;height:100%;background:var(--accent)}
/* cards + media */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}.cards.two{grid-template-columns:repeat(2,1fr)}@media (max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh-1)}
a.card,.lvcard,.qcard,.gcard{text-decoration:none;display:flex;flex-direction:column;gap:var(--s2);transition:border-color var(--dur)}a.card:hover{border-color:var(--accent)}
.quote blockquote{margin:0 0 var(--s3)}.quote{margin:0}.stars-r{color:var(--gold-text);letter-spacing:2px;margin-bottom:var(--s2)}.stars-r .off{color:var(--stone)}
.cover{--logo-a:var(--ivory);--logo-b:var(--stone);--logo-s:var(--ivory);aspect-ratio:16/9;border-radius:var(--r);display:grid;place-items:center;position:relative;overflow:hidden;color:var(--ivory);font-weight:700}
.cover span{position:absolute;inset-inline-start:12px;bottom:8px;font-size:var(--fs-meta)}.cover svg{opacity:.9}
.h0{background:linear-gradient(135deg,#64152D,#3F0D1C)}.h1{background:linear-gradient(135deg,#8A3F57,#64152D)}.h2{background:linear-gradient(135deg,#0F4A3A,#0A3328)}.h3{background:linear-gradient(135deg,#302328,#6B5D62)}.h4{background:linear-gradient(135deg,#7A5C1B,#3F0D1C)}
.acard{text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:border-color var(--dur),box-shadow var(--dur)}.acard:hover{border-color:var(--rose);box-shadow:var(--sh-2)}
.acard .cover{border-radius:0}.acb{padding:var(--s4);display:grid;gap:var(--s2);align-content:start}.acb h3{margin:0;font-size:var(--fs-card)}
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:center;text-decoration:none;background:var(--soft);border-radius:var(--r-lg);padding:var(--s5)}.feat .cover{aspect-ratio:4/3}@media (max-width:900px){.feat{grid-template-columns:1fr}}
.shead{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);padding:0;list-style:none;counter-reset:s}.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);display:grid;gap:var(--s2)}.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--burgundy);color:var(--ivory);display:grid;place-items:center;font-weight:800}@media (max-width:900px){.steps{grid-template-columns:1fr}}
.empty{border:1.5px dashed var(--stone);border-radius:var(--r);padding:var(--s6);text-align:center;color:var(--muted);background:var(--surface)}.empty b{display:block;color:var(--fg);margin-bottom:var(--s2)}.empty .btn{margin-top:var(--s3)}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s5);margin-bottom:var(--s3)}summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center}details p{color:var(--muted)}
.end-cta{background:var(--burgundy);color:var(--ivory);border-radius:var(--r-lg);padding:var(--s7);display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s6);align-items:center}.end-cta .btn{border-color:var(--ivory);color:var(--ivory)}.end-cta .btn-fill{background:var(--ivory);color:var(--burgundy)}.end-cta .btn:hover{background:#fff;color:var(--burgundy)}.stack{display:grid;gap:var(--s3)}@media (max-width:900px){.end-cta{grid-template-columns:1fr;padding:var(--s6)}}
footer{background:var(--charcoal);color:#D8CEC5;padding:var(--s7) 0;margin-top:var(--s7);--logo-a:var(--ivory);--logo-b:var(--rose);--logo-s:var(--ivory)}footer a{color:var(--ivory)}.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s6)}@media (max-width:700px){.fgrid{grid-template-columns:1fr}}
/* forms */
label{display:block;font-weight:700;font-size:var(--fs-small);margin:var(--s4) 0 var(--s2)}.req::after{content:" *";color:var(--err)}
input,textarea,select{width:100%;font:inherit;color:var(--fg);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:11px 14px;min-height:46px}textarea{resize:vertical}input:hover,textarea:hover,select:hover{border-color:var(--stone-dark)}
.chk{display:flex;gap:var(--s3);align-items:center;font-weight:500;margin:var(--s3) 0}.chk input{width:20px;height:20px;min-height:0}
.field-err{color:var(--err);font-size:var(--fs-small);min-height:0}.field-err:not(:empty){margin-top:var(--s2)}.hint{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--s1)}
.row{display:flex;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.pw{position:relative}.pw input{padding-inline-end:52px}.pw .btn{position:absolute;inset-inline-end:4px;top:4px}
.stars{display:flex;gap:var(--s1);border:0;padding:0;margin:0}.stars legend{font-weight:700;font-size:var(--fs-small);margin-bottom:var(--s2);padding:0}.stars label{margin:0;display:inline-flex}.stars input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.stars span[aria-hidden]{font-size:2rem;line-height:1;cursor:pointer;color:var(--stone);padding:4px}.stars label:has(input:checked) span[aria-hidden],.stars label:has(~label input:checked) span[aria-hidden]{color:var(--gold-text)}.stars input:focus-visible+span{outline:3px solid var(--rose);border-radius:var(--r-sm)}
dialog{border:0;border-radius:var(--r-lg);padding:var(--s6);max-width:600px;width:calc(100% - 24px);box-shadow:var(--sh-2);background:var(--surface);color:var(--fg);max-height:90vh;overflow:auto}dialog::backdrop{background:rgba(48,35,40,.55)}
.auth{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);max-width:960px;margin:0 auto}.auth .side{--logo-a:var(--ivory);--logo-b:var(--rose);--logo-s:var(--ivory);background:var(--burgundy);color:var(--ivory);padding:var(--s7);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);min-height:300px}.auth .form{background:var(--surface);padding:var(--s6)}@media (max-width:760px){.auth{grid-template-columns:1fr}.auth .side{padding:var(--s5)}}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s3)}.tabs a{text-decoration:none;font-weight:700;padding:10px 16px;border-bottom:3px solid transparent;color:var(--muted)}.tabs a[aria-selected=true]{color:var(--fg);border-color:var(--accent)}
.demo{margin-top:var(--s5);background:var(--soft)}.demo .btn{margin-top:var(--s2)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 var(--s5)}.chips a{text-decoration:none;padding:6px 16px;border-radius:99px;border:1px solid var(--line);font-weight:600;font-size:var(--fs-small);background:var(--surface)}.chips a[aria-selected=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* progress + lists + tasks */
.bar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;margin:var(--s2) 0;border:1px solid var(--line)}.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s var(--ease)}
.dash{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s5);align-items:start}@media (max-width:960px){.dash{grid-template-columns:1fr}}.stackc{display:grid;gap:var(--s5)}
.panel2{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}.lvbig{font-size:1.6rem;font-weight:800;margin:0 0 var(--s2)}
.tasks{display:grid}.task{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line);text-decoration:none}.task:first-child{border-top:0}.task:hover b{text-decoration:underline}.task>span:nth-child(2){display:grid}
.tico{width:42px;height:42px;border-radius:var(--r-sm);background:var(--soft);color:var(--accent-text);display:grid;place-items:center;font-weight:800;font-size:13px}.task.urgent .tico{background:var(--accent);color:var(--on-accent)}
.list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid}.list li{border-top:1px solid var(--line)}.list li:first-child{border-top:0}.list a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;text-decoration:none}.list a>span:not(.badge):not(.meta){flex:1}.list a:hover{color:var(--accent-text)}
.list li.plain{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;justify-content:space-between}.list li.plain>span{flex:1}.list li.unread,.notes li.unread{background:var(--tint);border-inline-start:3px solid var(--rose)}.num{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:none}
.nextcard{display:grid;gap:var(--s2);background:var(--accent);color:var(--on-accent);border-radius:var(--r-lg);padding:var(--s6);text-decoration:none;margin-bottom:var(--s4)}.nextcard b{font-size:1.5rem}.nextcard span:last-child{display:inline-flex;gap:var(--s2);align-items:center;font-weight:700}
.locked{display:flex;gap:var(--s3);align-items:flex-start}.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s4)}@media (max-width:700px){.areas{grid-template-columns:1fr}}
.objs{padding-inline-start:var(--s5)}.objs li{margin-bottom:var(--s2)}
.crumbs{display:flex;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-small);color:var(--muted);list-style:none;padding:0;margin:0 0 var(--s5)}.crumbs li+li::before{content:"‹";margin-inline-end:var(--s2)}[dir=ltr] .crumbs li+li::before{content:"›"}.crumbs a{text-decoration:none;display:inline-flex;gap:var(--s1);align-items:center}
.lvl-head{background:var(--accent);color:var(--on-accent);border-radius:var(--r-lg);padding:var(--s7)}.lvl-head .n{font-size:3.4rem;font-weight:800;line-height:1;opacity:.9}.lv-en.inv{color:var(--on-accent);opacity:.9;margin:0}.lvl-head .inv{color:var(--on-accent)}
.pager{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s7);flex-wrap:wrap}
.lesson p{font-size:1.15rem;line-height:1.95}.artbody p{font-size:1.15rem;line-height:1.95;margin-bottom:var(--s4)}.lesson .cover,.read .cover{margin:var(--s5) 0}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s5);margin:var(--s5) 0;background:var(--soft);padding:var(--s4) var(--s5);border-radius:var(--r)}.facts dt{font-size:var(--fs-meta);color:var(--muted)}.facts dd{margin:0;font-weight:700}@media (max-width:560px){.facts{grid-template-columns:1fr}}
.drop{border:2px dashed var(--stone);border-radius:var(--r);padding:var(--s5);text-align:center;background:var(--surface)}.drop .btn{margin-bottom:var(--s2)}
.lmap{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}.lmap li{display:flex;gap:var(--s3);align-items:center}.lmap a{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;text-decoration:none;background:var(--surface)}.lmap a.done{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.lmap a.cur{border-color:var(--accent);color:var(--accent-text)}
.ach{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}.ach li{display:flex;gap:var(--s3);align-items:center;opacity:.55}.ach li.on{opacity:1}.ach li.on .ic{color:var(--gold-text)}.ach span{display:grid}
.phead{display:flex;gap:var(--s5);align-items:center;margin-bottom:var(--s5);flex-wrap:wrap}
/* community + chat */
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);margin-bottom:var(--s4)}.post header{display:flex;gap:var(--s3);align-items:center}.post header>div{flex:1;display:grid}.post p{margin:var(--s3) 0;white-space:pre-wrap}
.comments{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:var(--s2);font-size:var(--fs-small)}.cform{display:flex;gap:var(--s2)}.cform input{min-height:40px}.composer{margin-bottom:var(--s5);display:grid;gap:var(--s2)}.composer .btn{justify-self:start}
.rowc{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);flex-wrap:wrap}.rowc a{display:flex;gap:var(--s3);align-items:center;text-decoration:none}
.notes{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}.notes li{display:flex;gap:var(--s3);padding:var(--s4);border-top:1px solid var(--line);align-items:center}.notes li:first-child{border-top:0}.notes li>div:nth-child(2){flex:1;display:grid}.nact{display:flex;gap:var(--s2);flex-wrap:wrap}
.chat{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);min-height:520px}.clist{border-inline-end:1px solid var(--line);overflow:auto;max-height:640px}.clist h2{padding:var(--s3) var(--s4) 0;margin:0}
.citem{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);text-decoration:none;border-bottom:1px solid var(--line)}.citem span:last-child{display:grid;min-width:0}.citem .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.citem[aria-current],.citem:hover{background:var(--soft)}.citem.req{background:var(--tint)}
.tcol{display:flex;flex-direction:column;min-height:520px}.thread{display:flex;flex-direction:column;flex:1;min-height:0}.th{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}.mback{display:none}
.msgs{flex:1;overflow:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);max-height:420px}.bubble{max-width:75%;background:var(--soft);padding:var(--s3) var(--s4);border-radius:var(--r-lg);align-self:flex-start}.bubble p{margin:0}.bubble.me{align-self:flex-end;background:var(--burgundy);color:var(--ivory)}.bubble.me .meta{color:#D8CEC5}
.send{display:flex;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--line)}.notep{padding:var(--s2) var(--s4);margin:0}.chat .empty{margin:var(--s5);border:0}
@media (max-width:760px){.chat{grid-template-columns:1fr}.chat.open .clist{display:none}.chat:not(.open) .tcol{display:none}.mback{display:inline-flex}}
.child header{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}.child header h2{margin:0}
/* admin tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}table{border-collapse:collapse;width:100%;font-size:var(--fs-small)}th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}th{background:var(--soft);font-weight:700;white-space:nowrap}tr:last-child td{border-bottom:0}td:last-child{white-space:nowrap}
.filters{display:flex;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}.filters input{flex:1;min-width:200px}.filters select{width:auto}
.panel2 .tbl{margin-top:var(--s3)}.panel2{margin-bottom:var(--s5)}.stackc .panel2{margin-bottom:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:560px){.nav .wrap{padding-inline:var(--s3);gap:var(--s1)}.brand span{display:none}.nav-tools .btn-sm{padding:5px 8px;min-width:38px}.wrap{padding-inline:var(--s4)}.lvl-head{padding:var(--s5)}.panel{padding:var(--s5)}}
.read{margin-inline:auto}.lvl-head .read,.objs.read,.chat .read{margin-inline:0}

/* ---- new components ---- */
.backbar{padding-top:var(--s4);padding-bottom:0}
.navbtn{font:inherit;font-weight:500;background:none;border:0;border-bottom:2px solid transparent;padding:6px;cursor:pointer;color:var(--fg);display:inline-flex;gap:var(--s1);align-items:center;white-space:nowrap}.navbtn:hover{border-color:var(--rose)}
.nav-links{gap:var(--s2)}.nav-links a{padding:6px 5px;font-size:.98rem}
.xp{display:flex;align-items:center;gap:var(--s2);text-decoration:none;padding:4px 12px;border:1px solid var(--line);border-radius:99px;font-size:var(--fs-meta);background:var(--surface);white-space:nowrap}.xp b{color:var(--accent-text)}.xpbar{width:56px;height:6px;background:var(--soft);border-radius:3px;overflow:hidden}.xpbar i{display:block;height:100%;background:var(--accent)}
.menuxp{padding:8px 12px;font-size:var(--fs-meta);color:var(--muted)}
.medal.lock{filter:grayscale(1);opacity:.28}
.bcats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}.bcat{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:var(--surface)}.bcat h3{display:flex;gap:var(--s2);align-items:center;font-size:1.05rem;color:var(--fg)}
.medals{display:flex;gap:var(--s4);flex-wrap:wrap}.medals.sm{gap:var(--s2);margin:var(--s2) 0}.mi{display:grid;justify-items:center;gap:var(--s1);text-align:center;font-size:var(--fs-meta);min-width:64px}.mi:not(.on) b{color:var(--muted);font-weight:500}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s5)}.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);display:grid;gap:var(--s1);align-content:start}.stat b{font-size:1.7rem;line-height:1.1}.stat small{font-size:.9rem;color:var(--muted);font-weight:500}
.lockcard{display:flex;flex-direction:column;gap:var(--s2);font:inherit;color:inherit;text-align:start;cursor:pointer;width:100%;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}.lockcard:hover{border-color:var(--accent)}.lk{width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--accent-text)}
.topics{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:var(--s3);max-width:68ch}.topics li{display:flex;gap:var(--s3);align-items:center}
footer .soc{display:inline-flex;gap:var(--s2);align-items:center}
.fgrid{grid-template-columns:1fr 1.3fr 1.3fr .8fr}
@media (max-width:1360px){.xpbar,.nm{display:none}.xp{padding:4px 10px}}
@media (max-width:900px){.bcats{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.xp{display:none}.fgrid{grid-template-columns:1fr}}
/* ---- dark mode ---- */
html[data-theme=dark]{color-scheme:dark;--bg:#171114;--surface:#211819;--soft:#2A1E22;--tint:#33212A;--navbg:rgba(23,17,20,.94);--fg:#F1EAE0;--muted:#B9ABA3;--line:#3C2E33;--stone:#4A3A40;--accent:#7E2340;--accent-dark:#5A1830;--accent-soft:#33212A;--accent-text:#E8AEC0;--ornament:#C98096;--rose-text:#E8AEC0;--gold-text:#D8B75E;--ok:#6CC49A;--warn:#E3A857;--err:#F28B8B;--info:#82BCE0;--ok-bg:#1F3328;--err-bg:#3A1F22;--logo-a:#F5EFE6;--logo-b:#C98096;--logo-s:#F5EFE6}
html[data-theme=dark] [data-track=quran]{--accent:#17614D;--accent-dark:#0F4A3A;--accent-soft:#1B2B26;--accent-text:#86D6B8;--ornament:#D4B25A}
html[data-theme=dark] .ribbon{background:#0E0A0B}html[data-theme=dark] footer{background:#0E0A0B}
html[data-theme=dark] .bubble.me{background:var(--accent)}html[data-theme=dark] .end-cta{background:#4A1325}
html[data-theme=dark] .nav-links a[aria-current]{border-color:var(--ornament)}
html[data-theme=dark] .acard:hover,html[data-theme=dark] .lv:hover{border-color:var(--ornament)}

.list a>.av,.list li>.av,.rowc .av,.citem .av,.post .av{flex:none}