/* ---------- الألوان: هادئة ومريحة للعين ---------- */
:root{
  --paper:#ECF0EB; --surface:#F6F8F4; --raised:#FBFCFA; --sunk:#E1E7E0; --ink:#2B3B36; --muted:#687A72;
  --green:#3A7262; --green-2:#548E7B; --on-green:#F6F8F4; --gold:#A8843F; --gold-soft:#EDE4CF;
  --line:#D2DCD5; --ok:#3F7F5E; --ok-soft:#DCEADF; --bad:#A55B4F; --bad-soft:#F0E0DA;
  --shadow:0 1px 2px rgba(43,59,54,.05), 0 8px 24px -16px rgba(43,59,54,.28);
  --ui:"Readex Pro","Noto Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --naskh:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --fs:16.5px; color-scheme:light;
}
:root[data-theme="sepia"]{
  --paper:#EFE8DA; --surface:#F7F1E5; --raised:#FAF6EE; --sunk:#E6DDCB; --ink:#3D3529; --muted:#7A6E5C;
  --green:#4F6E55; --green-2:#6A8A6F; --on-green:#F7F1E5; --gold:#9C7A3C; --gold-soft:#E9DCC0;
  --line:#DCD0BA; --ok:#4E7A55; --ok-soft:#DFE6D3; --bad:#9E5A48; --bad-soft:#EEDCD0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="sepia"]){
    --paper:#151C1A; --surface:#1B2421; --raised:#202B27; --sunk:#25312D; --ink:#D3DDD8; --muted:#8FA198;
    --green:#7DBBA6; --green-2:#96CDB9; --on-green:#122019; --gold:#C9A865; --gold-soft:#332C1F;
    --line:#2D3A35; --ok:#86C6A0; --ok-soft:#1D3328; --bad:#DB9586; --bad-soft:#3A2522;
    --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -16px rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#151C1A; --surface:#1B2421; --raised:#202B27; --sunk:#25312D; --ink:#D3DDD8; --muted:#8FA198;
  --green:#7DBBA6; --green-2:#96CDB9; --on-green:#122019; --gold:#C9A865; --gold-soft:#332C1F;
  --line:#2D3A35; --ok:#86C6A0; --ok-soft:#1D3328; --bad:#DB9586; --bad-soft:#3A2522;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -16px rgba(0,0,0,.6); color-scheme:dark;
}
:root[data-size="s"]{--fs:15px}
:root[data-size="l"]{--fs:18.5px}

:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:var(--fs);line-height:1.85;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:10px}
.wrap{max-width:720px;margin:0 auto;padding:18px 16px 64px}

/* ---------- عام ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:12px 18px;font-weight:500;font-size:1em;cursor:pointer;border:1px solid transparent;min-height:50px;transition:transform .12s,filter .15s,background .15s}
.btn:active:not([disabled]){transform:scale(.98)}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-primary:hover:not([disabled]){filter:brightness(1.06)}
.btn-ghost{background:var(--surface);border-color:var(--line)}
.btn-ghost:hover:not([disabled]){background:var(--sunk)}
.btn-gold{background:var(--gold);color:var(--on-green)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}
.btn-sm{min-height:38px;padding:6px 12px;font-size:.88em;border-radius:11px}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.85em;padding:8px}
.iconbtn{background:var(--surface);border:1px solid var(--line);border-radius:13px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;flex:none}
.iconbtn svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--green);font-weight:500;cursor:pointer;padding:6px 0}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.bar{height:7px;background:var(--sunk);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green-2));border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:1.02em;font-weight:600}
.hint{color:var(--muted);font-size:.86em;margin:6px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--raised);border-radius:99px;padding:7px 15px;cursor:pointer;font-weight:500;font-size:.92em;transition:background .15s,border-color .15s}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-green)}

/* ---------- الرئيسية ---------- */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 16px}
.brand h1{font-family:var(--naskh);font-weight:700;font-size:clamp(28px,7vw,38px);line-height:1.25;margin:0;color:var(--green)}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.86em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 10px;text-align:center}
.stat b{display:block;font-size:1.45em;font-weight:600;color:var(--green);line-height:1.3}
.stat span{font-size:.8em;color:var(--muted)}
.continue{display:flex;align-items:center;gap:14px;background:var(--gold-soft);border-radius:20px;padding:16px;margin-bottom:18px;cursor:pointer;border:0;width:100%;text-align:right}
.continue .ic{width:48px;height:48px;border-radius:14px;background:var(--gold);display:grid;place-items:center;flex:none}
.continue .ic svg{width:24px;height:24px;stroke:var(--on-green);fill:none;stroke-width:2}
.continue small{display:block;color:var(--muted);font-size:.82em}
.continue strong{display:block;font-weight:600;line-height:1.5}
.overall{display:flex;justify-content:space-between;font-size:.88em;color:var(--muted);margin:0 4px 8px}

/* الإطار (توقيع التصميم) */
.frame{background:var(--surface);border-radius:24px;padding:20px 14px 8px;box-shadow:var(--shadow);border:2px solid var(--gold);outline:1px solid var(--gold);outline-offset:-8px}
.unit{margin-bottom:10px}
.unit h2{font-family:var(--naskh);font-size:1.35em;margin:0 0 4px;display:flex;align-items:baseline;gap:10px;padding-inline:8px}
.unit h2 small{font-family:var(--ui);font-size:.6em;color:var(--muted);font-weight:400}
.path{list-style:none;margin:0;padding:0;position:relative}
.path::before{content:"";position:absolute;right:29px;top:20px;bottom:20px;border-right:2px dashed var(--line)}
.node{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:right;background:none;border:0;border-radius:16px;padding:9px 8px;cursor:pointer;transition:background .15s}
.node:hover{background:var(--sunk)}
.star{width:44px;height:44px;flex:none;position:relative;display:grid;place-items:center}
.star svg{position:absolute;inset:0}
.star .s-fill{fill:var(--raised);stroke:var(--line);stroke-width:2;transition:fill .3s,stroke .3s}
.star .ring{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .6s}
.star span{position:relative;font-weight:600;font-size:.85em;color:var(--muted)}
.node.done .s-fill{fill:var(--gold);stroke:var(--gold)}
.node.done .star span,.node.best .star span{color:var(--on-green)}
.node.best .s-fill{fill:var(--green);stroke:var(--green)}
.node .txt{flex:1;min-width:0}
.node .txt strong{display:block;font-weight:500;line-height:1.55}
.node .txt em{font-style:normal;font-size:.8em;color:var(--muted)}
.node .chev{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.actions{margin-top:18px;display:grid;gap:10px}
.ready{background:var(--ok-soft);border-radius:18px;padding:14px 16px;line-height:1.75}
.ready b{display:block;font-size:1.08em}

/* ---------- الإعدادات ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(10,20,16,.35);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow);animation:up .25s cubic-bezier(.2,.7,.2,1)}
.sheet h3{margin:0 0 4px;font-size:1.1em}
.sheet .grp{margin:16px 0}
.sheet .grp>span{display:block;font-size:.88em;color:var(--muted);margin-bottom:8px}
.sheet .preview{background:var(--paper);border-radius:14px;padding:12px;margin-top:8px;font-size:1em}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}

/* ---------- الدرس ---------- */
.lhead .unitname{color:var(--gold);font-weight:500;font-size:.86em}
.lhead h2{font-family:var(--naskh);font-size:clamp(25px,6vw,32px);line-height:1.4;margin:0 0 8px;color:var(--green)}
.lprog{display:flex;align-items:center;gap:10px;font-size:.82em;color:var(--muted);margin-bottom:12px}
.lprog .bar{flex:1}
.tabs{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:15px;margin-bottom:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:5;box-shadow:0 6px 14px -12px rgba(0,0,0,.4)}
.tab{flex:1;border:0;background:none;padding:9px 4px;border-radius:11px;cursor:pointer;font-weight:500;font-size:.9em;color:var(--muted);transition:background .2s,color .2s}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.toolrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:14px}
.toolrow p{margin:0;font-size:.85em;color:var(--muted);line-height:1.5}
.toolrow p b{display:block;color:var(--ink);font-weight:500}
.switch{position:relative;width:52px;height:30px;border-radius:99px;background:var(--line);border:0;cursor:pointer;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:var(--raised);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:right .2s}
.switch[aria-checked="true"]{background:var(--green)}
.switch[aria-checked="true"]::after{right:25px}

.read section{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 16px 12px;margin-bottom:12px;transition:border-color .3s}
.read section.isread{border-color:var(--green-2)}
.read h3{font-size:1.06em;font-weight:600;color:var(--green);margin:0 0 6px}
.read p{margin:6px 0}
.read ul,.read ol{margin:6px 0;padding-right:22px}
.read li{margin:5px 0}
.read b{color:var(--green);font-weight:600}
.ayah{font-family:var(--naskh);font-size:1.12em;color:var(--green)}
.memo{background:var(--gold-soft);border-radius:12px;padding:9px 14px;margin:10px 0;font-size:.94em}
.memo::before{content:"للحفظ: ";font-weight:600;color:var(--gold)}
.def{background:var(--sunk);border-radius:12px;padding:10px 14px;margin:8px 0}
.tbl{overflow-x:auto;margin:8px 0;border:1px solid var(--line);border-radius:12px}
.tbl table{border-collapse:collapse;width:100%;min-width:400px;font-size:.9em}
.tbl th{background:var(--sunk);text-align:right;padding:8px 10px;font-weight:600}
.tbl td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.secfoot{display:flex;justify-content:flex-start;margin-top:10px}
.gotit{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--raised);border-radius:99px;padding:6px 14px 6px 12px;cursor:pointer;font-size:.86em;font-weight:500;color:var(--muted);transition:all .2s}
.gotit i{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:12px;transition:all .2s}
.gotit[aria-pressed="true"]{border-color:var(--green-2);color:var(--green);background:var(--ok-soft)}
.gotit[aria-pressed="true"] i{background:var(--green);border-color:var(--green);color:var(--on-green)}
/* وضع الإخفاء */
.read.hide b:not(.tlp b),.read.hide .tbl td:not(:first-child){background:var(--gold-soft);color:transparent;border-radius:6px;cursor:pointer;transition:color .25s,background .25s;user-select:none;box-shadow:inset 0 -2px 0 var(--gold)}
.read.hide b.shown,.read.hide .tbl td.shown{background:transparent;color:var(--green);box-shadow:none}
.read.hide .tbl td.shown{color:var(--ink)}
.finish{margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center}
.finish p{margin:0 0 10px;color:var(--muted)}

/* ودجت: المراحل */
.stages{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.stg{border:1.5px solid var(--line);background:var(--raised);border-radius:14px;padding:10px;text-align:right;cursor:pointer;transition:all .2s;line-height:1.5}
.stg small{display:block;color:var(--gold);font-size:.75em;font-weight:500}
.stg strong{font-weight:500;font-size:.9em}
.stg[aria-pressed="true"]{border-color:var(--green);background:var(--ok-soft)}
.stgdet{margin-top:10px;background:var(--sunk);border-radius:14px;padding:12px 14px;font-size:.94em;min-height:60px}
/* ودجت: الخط الزمني */
.tl{position:relative;display:flex;justify-content:space-between;padding:12px 4px 0;margin-top:8px}
.tl::before{content:"";position:absolute;top:30px;right:16px;left:16px;height:3px;background:var(--line);border-radius:3px}
.tlp{position:relative;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;width:20%;padding:0}
.tlp i{width:22px;height:22px;border-radius:50%;background:var(--raised);border:3px solid var(--gold);transition:all .2s}
.tlp b{font-size:.8em;color:var(--ink);font-weight:600}
.tlp span{font-size:.72em;color:var(--muted);line-height:1.3;text-align:center}
.tlp[aria-pressed="true"] i{background:var(--gold);transform:scale(1.2)}
.tlcard{margin-top:12px;background:var(--sunk);border-radius:14px;padding:12px 14px;font-size:.94em;animation:fade .25s}
.tlcard strong{color:var(--green)}

/* ---------- البطاقات ---------- */
.deckbar{display:flex;align-items:center;gap:10px;font-size:.85em;color:var(--muted);margin-bottom:10px}
.deckbar .bar{flex:1}
.cardstage{perspective:1200px;margin:4px auto 14px;max-width:500px;touch-action:pan-y}
.fcard{position:relative;height:250px;cursor:pointer;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);border:0;background:none;width:100%;padding:0}
.fcard.flip{transform:rotateY(180deg)}
.fcard.drag{transition:none}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;box-shadow:var(--shadow)}
.face.front{background:var(--raised);border:2px solid var(--gold);outline:1px solid var(--gold);outline-offset:-7px}
.face.front strong{font-family:var(--naskh);font-size:clamp(23px,6vw,30px);line-height:1.5;color:var(--green)}
.face.back{background:var(--green);color:var(--on-green);transform:rotateY(180deg);font-size:1.08em;line-height:1.8}
.face small{position:absolute;bottom:12px;font-size:.72em;opacity:.7}
.judge{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px;margin:0 auto}
.judge .no{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.judge .yes{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.deckdone{text-align:center;padding:26px 18px}
.deckdone b{font-size:2em;color:var(--green);display:block}

/* ---------- الأسئلة ---------- */
.qtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.qtop .meta{color:var(--muted);font-size:.86em}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--sunk);padding:3px 11px;border-radius:99px;font-size:.84em;font-variant-numeric:tabular-nums}
.pill.fire{background:var(--gold-soft);color:var(--gold);font-weight:600}
.pill.low{background:var(--bad-soft);color:var(--bad)}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px 18px;box-shadow:var(--shadow)}
.qtype{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8em;color:var(--gold);font-weight:600;margin-bottom:6px}
.flag{background:none;border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:.95em;color:var(--muted);cursor:pointer}
.flag[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.qtext{font-size:1.15em;font-weight:500;line-height:1.75;margin:0 0 16px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:right;background:var(--raised);border:1.5px solid var(--line);border-radius:15px;padding:12px 14px;cursor:pointer;line-height:1.6;transition:border-color .15s,background .15s,opacity .2s}
.opt:hover:not([disabled]){border-color:var(--green-2)}
.opt .k{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8em;font-weight:600;background:var(--sunk);color:var(--muted)}
.opt.sel{border-color:var(--green);background:var(--sunk)}
.opt.sel .k{background:var(--green);color:var(--on-green)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .k{background:var(--ok);color:var(--on-green)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .k{background:var(--bad);color:var(--on-green)}
.opt.gone{opacity:.28;text-decoration:line-through}
.opt[disabled]{cursor:default}
.tf{grid-template-columns:1fr 1fr}
.tf .opt{justify-content:center;font-weight:600;font-size:1.05em;padding:16px}
.pop{animation:pop .35s}
.shake{animation:shake .4s}
@keyframes pop{40%{transform:scale(1.03)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.match{display:grid;gap:10px}
.mrow{display:grid;gap:6px;background:var(--raised);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px}
.mrow .term{font-weight:600;color:var(--green)}
.mrow select{width:100%;font:inherit;font-size:.92em;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.mrow.right{border-color:var(--ok);background:var(--ok-soft)}
.mrow.wrong{border-color:var(--bad);background:var(--bad-soft)}
.fix{font-size:.86em;color:var(--ok);font-weight:500}
/* ترتيب */
.ordlist{display:grid;gap:8px;margin-bottom:12px;min-height:46px;border:1.5px dashed var(--line);border-radius:15px;padding:8px}
.ordlist:empty::before{content:"اضغط على العناصر تحت بالترتيب الصحيح";color:var(--muted);font-size:.86em;padding:6px}
.orditem{display:flex;align-items:center;gap:10px;background:var(--raised);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;text-align:right;width:100%}
.orditem .n{width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--on-green);display:grid;place-items:center;font-size:.8em;font-weight:600;flex:none}
.orditem.right{border-color:var(--ok);background:var(--ok-soft)}
.orditem.wrong{border-color:var(--bad);background:var(--bad-soft)}
.orditem.wrong .n{background:var(--bad)}
.pool{display:flex;flex-wrap:wrap;gap:8px}
.poolitem{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 12px;cursor:pointer;font-size:.95em}
.poolitem:hover{border-color:var(--green-2)}
/* أكمل الفراغ */
.fillq{font-size:1.12em;line-height:2.4;margin:0 0 14px}
.slot{display:inline-block;min-width:84px;border:0;border-bottom:2.5px solid var(--gold);background:var(--gold-soft);border-radius:8px 8px 3px 3px;padding:0 10px;margin:0 3px;cursor:pointer;font-weight:600;color:var(--green);line-height:1.8;vertical-align:baseline}
.slot.empty{color:transparent}
.slot.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.slot.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.bank button{border:1.5px solid var(--line);background:var(--raised);border-radius:12px;padding:7px 14px;cursor:pointer;font-weight:500}
.bank button[disabled]{opacity:.3;cursor:default}

.feedback{margin-top:14px;border-radius:15px;padding:12px 14px;font-size:.95em;line-height:1.8;animation:fade .25s}
.feedback.ok{background:var(--ok-soft)}
.feedback.no{background:var(--bad-soft)}
.feedback b{display:block}
.qnav{display:flex;gap:10px;margin-top:14px}
.qnav .btn{flex:1}
.qtools{display:flex;gap:8px;margin-top:12px}
.dots{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 0}
.dot{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:.72em;cursor:pointer;display:grid;place-items:center;color:var(--muted);position:relative}
.dot.ans{background:var(--sunk);color:var(--ink);border-color:var(--green-2)}
.dot.cur{outline:2px solid var(--gold);outline-offset:1px}
.dot.fl::after{content:"";position:absolute;top:-3px;left:-3px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.kbd{color:var(--muted);font-size:.75em;text-align:center;margin-top:10px}

/* ---------- النتيجة ---------- */
.score{text-align:center;padding:24px 18px}
.ringwrap{width:168px;height:168px;margin:0 auto 8px;position:relative}
.ringwrap svg{transform:rotate(-90deg)}
.ringwrap circle.v{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.ringwrap .num{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4em;font-weight:600;color:var(--green);line-height:1.1}
.ringwrap .num small{display:block;font-size:.36em;font-weight:400;color:var(--muted)}
.score h2{font-family:var(--naskh);font-size:1.9em;margin:2px 0}
.score p{margin:0;color:var(--muted)}
.rstats{display:flex;justify-content:center;gap:24px;margin-top:12px;font-size:.92em}
.rstats b{display:block;font-size:1.35em}
.byl{display:grid;gap:10px}
.byl .r{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;font-size:.9em}
.byl .r .bar{grid-column:1/-1}
.filt{display:flex;gap:8px;margin-bottom:10px}
.review{display:grid;gap:10px}
.rv{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--raised)}
.rv.ok{border-right:4px solid var(--ok)}
.rv.no{border-right:4px solid var(--bad)}
.rv .q{font-weight:500;margin-bottom:4px}
.rv .you{color:var(--bad);font-size:.9em}
.rv .ans{color:var(--ok);font-size:.9em;font-weight:500}
.rv .ex{color:var(--muted);font-size:.86em;margin-top:2px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:12px;font-size:.92em;z-index:60;box-shadow:var(--shadow);animation:fade .2s}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
.node.weak .s-fill{fill:var(--bad-soft);stroke:var(--bad)}
.node.weak .star span{color:var(--bad)}
.node.weak .txt em{color:var(--bad)}

.sum-title{display:none}
@media print{
  .no-print,.back,.tabs,.lprog,.top,.stats,.continue,.overall,.bar,.actions,.toolrow,.lhead .unitname,header{display:none!important}
  .print-only,.sum-title{display:block!important}
  body{background:#fff;color:#000}
  .tbl table{min-width:unset;width:100%}
  .tbl{border:1px solid #ccc;border-radius:0}
  .tbl th{background:#eee}
  .wrap{padding:0;max-width:100%}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
@media (min-width:640px){.wrap{padding-top:30px}.frame{padding:24px 22px 10px}.stages{grid-template-columns:repeat(4,1fr)}}