[hidden]{display:none!important}
:root{
  --bg:#FBF8F3;--surface:#FFFFFF;--text:#2B2B2B;--muted:#6B6560;--border:#E8E1D7;--accent:#2E6E73;--accent-ink:#FFFFFF;--accent-soft:#E2EFEF;
  --quote:#1F5A5E;--pivot:rgba(255,193,7,.32);--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
  --ok:#1E7F4F;--ok-bg:#E4F4EA;--bad:#B3261E;--bad-bg:#FBE6E4;
  --t-sh:#A65F00;--t-sh-bg:#FFF1DC;--t-mj:#6A3FB5;--t-mj-bg:#EEE7FA;--t-bd:#2F6FA8;--t-bd-bg:#E3EEF9;
  --gray:#9A948C;--gray-bg:#EFEBE5;--fs:17px;
}
html[data-theme="dark"]{--bg:#16181B;--surface:#202328;--text:#ECE8E2;--muted:#A9A39B;--border:#343840;--accent:#6FB3B8;--accent-ink:#0E1A1B;--accent-soft:#22393B;--quote:#8FD0D4;--pivot:rgba(255,193,7,.25);--shadow:none;
  --ok:#5CC48B;--ok-bg:#183326;--bad:#F08A80;--bad-bg:#3A1E1C;--t-sh:#F3B45C;--t-sh-bg:#3A2A12;--t-mj:#BFA2F2;--t-mj-bg:#2C2240;--t-bd:#86B8EA;--t-bd-bg:#1C2B3D;--gray:#7D786F;--gray-bg:#2A2D32}
html[data-theme="paper"]{--bg:#F4ECD8;--surface:#FBF5E6;--text:#3B3127;--muted:#7A6A58;--border:#E2D5BA;--accent:#7A4E2D;--accent-ink:#FFFFFF;--accent-soft:#EFE1CC;--quote:#5E3B1F;--pivot:rgba(214,158,46,.30)}
html[data-theme="contrast"]{--bg:#000;--surface:#000;--text:#FFF;--muted:#E6E6E6;--border:#FFF;--accent:#FFD400;--accent-ink:#000;--accent-soft:#222;--quote:#FFE97A;--pivot:rgba(255,212,0,.35);--shadow:none;
  --ok:#3DFF8F;--ok-bg:#002A12;--bad:#FF6B6B;--bad-bg:#330000;--t-sh:#FFB547;--t-sh-bg:#2A1A00;--t-mj:#D7B8FF;--t-mj-bg:#1E1030;--t-bd:#8CC8FF;--t-bd-bg:#00172E;--gray:#BDBDBD;--gray-bg:#1A1A1A}
html[data-fs="s"]{--fs:16px}html[data-fs="m"]{--fs:17.5px}html[data-fs="l"]{--fs:19.5px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-size:var(--fs);line-height:1.75;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
a{color:var(--accent)}
#app{max-width:760px;margin:0 auto;min-height:100vh;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:var(--bg);border-bottom:1px solid var(--border)}
.top h1{font-size:1.02em;margin:0;flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:42px;height:42px;border-radius:12px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;flex:none}
.ib:active{background:var(--accent-soft)}
.ib svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{padding:14px}
.hello{padding:18px 4px 6px}
.hello h2{margin:0 0 4px;font-size:1.35em}
.hello p{margin:0;color:var(--muted)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 12px;text-align:center;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:132px;justify-content:center;text-decoration:none;color:var(--text)}
.tile .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.tile .ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:1em;line-height:1.4}
.tile small{color:var(--muted);font-size:.8em;line-height:1.4}
.tile.off{cursor:default;color:var(--gray);background:var(--gray-bg);box-shadow:none}
.tile.off .ic{background:transparent;color:var(--gray);border:1.5px dashed var(--gray)}
.spec{grid-template-columns:repeat(3,1fr);gap:10px}
.spec .tile{min-height:112px;padding:12px 6px;border-radius:16px}
.spec .tile b{font-size:.84em}
.spec .ic{width:44px;height:44px;border-radius:14px}
@media (min-width:600px){.spec{grid-template-columns:repeat(4,1fr)}}
.search{display:none;padding:10px 14px 0}
.search.on{display:block}
.search input{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);outline:none}
.search input:focus{border-color:var(--accent)}
.empty{color:var(--muted);text-align:center;padding:28px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);margin:12px 0;overflow:hidden}
.part h3{margin:20px 4px 6px;font-size:1.05em;color:var(--muted);font-weight:600}
.ch{padding:14px 14px 12px;cursor:pointer;display:flex;gap:12px;align-items:center}
.ch .n{flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}
.ch .tt{flex:1;min-width:0}
.ch .tt b{display:block;line-height:1.45;font-size:.96em}
.ch .tt small{color:var(--muted);font-size:.8em}
.bar{height:6px;border-radius:9px;background:var(--border);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.inds{border-top:1px solid var(--border);display:none}
.card.open .inds{display:block}
.ind{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.ind:last-child{border-bottom:0}
.ind .id{flex:none;font-weight:700;color:var(--accent);min-width:38px}
.ind .tx{flex:1;font-size:.92em;line-height:1.55}
.st{flex:none;font-size:.72em;padding:3px 8px;border-radius:99px;white-space:nowrap;margin-top:2px}
.st.s0{background:var(--gray-bg);color:var(--muted)}
.st.s1{background:var(--t-sh-bg);color:var(--t-sh)}
.st.s2{background:var(--ok-bg);color:var(--ok)}
.due{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer}
.due .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:700}
.due b{display:block}.due small{color:var(--muted)}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px 16px;font-weight:700;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-align:center}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
.dock{position:fixed;inset:auto 0 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent);z-index:6}
.dock .in{max-width:732px;margin:0 auto;display:flex;gap:10px}
.dock .btn{flex:1}
.official{background:var(--accent-soft);border-radius:14px;padding:12px 14px;margin:10px 0 4px}
.official small{display:block;color:var(--muted);font-size:.78em;margin-bottom:4px}
.official p{margin:0;font-weight:600;color:var(--quote)}
.lesson{font-size:1em}
.lesson h1{font-size:1.3em;line-height:1.5;margin:14px 0 8px}
.lesson h2{font-size:1.12em;margin:26px 0 8px;padding-top:12px;border-top:1px solid var(--border);line-height:1.5}
.lesson h3{font-size:1.02em;margin:18px 0 6px}
.lesson p{margin:8px 0}
.lesson blockquote{margin:10px 0;padding:10px 14px;border-inline-start:4px solid var(--accent);background:var(--surface);border-radius:10px;box-shadow:var(--shadow)}
.lesson blockquote p{margin:4px 0}
.lesson strong{background:var(--pivot);padding:0 3px;border-radius:4px;font-weight:700}
.lesson .oq{color:var(--quote);font-weight:500}
.lesson .ref{color:var(--muted);font-size:.74em;white-space:nowrap}
.lesson ul,.lesson ol{padding-inline-start:22px;margin:8px 0}
.lesson li{margin:4px 0}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px -14px;padding:0 14px}
.lesson table{border-collapse:separate;border-spacing:0;font-size:.86em;min-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.lesson th{background:var(--accent-soft);text-align:start;padding:9px 10px;font-weight:700;vertical-align:top;border-bottom:1px solid var(--border)}
.lesson td{padding:9px 10px;vertical-align:top;border-bottom:1px solid var(--border);min-width:120px}
.lesson tr:last-child td{border-bottom:0}
.lesson td+td,.lesson th+th{border-inline-start:1px solid var(--border)}
.lesson hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.lesson code{font-family:inherit}
.prog{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85em;margin:6px 0 10px}
.prog .bar{flex:1;margin:0}
.stem{font-size:1.06em;font-weight:600;line-height:1.7;margin:6px 0 14px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{position:relative;text-align:start;border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;width:100%}
.opt .L{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg);font-weight:700;font-size:.9em;border:1px solid var(--border)}
.opt .body{flex:1;min-width:0}
.opt .t{line-height:1.6}
.opt .why{display:none;margin-top:8px;font-size:.88em;line-height:1.65;color:var(--text)}
.opt .chip{display:inline-flex;align-items:center;gap:4px;font-size:.78em;font-weight:700;padding:2px 9px;border-radius:99px;margin-inline-end:6px;vertical-align:1px}
.opt .mark{flex:none;width:26px;height:26px;display:none}
.opt.done{cursor:default}
.opt.done .why,.opt.done .mark{display:block}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.right .L{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .L{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt.picked{border-width:3.5px;box-shadow:0 0 0 3px var(--accent-soft)}
.opt .yours{position:absolute;top:-11px;inset-inline-end:12px;background:var(--text);color:var(--bg);font-size:.72em;font-weight:700;padding:1px 10px;border-radius:99px;display:none}
.opt.picked .yours{display:block}
.chip.ok{background:var(--ok);color:#fff}
.chip.sh{background:var(--t-sh-bg);color:var(--t-sh);border:1px solid var(--t-sh)}
.chip.mj{background:var(--t-mj-bg);color:var(--t-mj);border:1px solid var(--t-mj)}
.chip.bd{background:var(--t-bd-bg);color:var(--t-bd);border:1px solid var(--t-bd)}
.chip.no{background:var(--bad);color:#fff}
.reff{font-size:.78em;color:var(--muted);margin:12px 2px 0}
.verdict{display:flex;align-items:center;gap:8px;font-weight:700;margin:14px 2px 0}
.verdict.ok{color:var(--ok)}.verdict.bad{color:var(--bad)}
.fasl{margin-top:14px;padding:14px;border-radius:14px;border:2px dashed var(--accent);background:var(--surface)}
.fasl h4{margin:0 0 4px;font-size:.95em;color:var(--accent)}
.fasl p{margin:0 0 10px;font-weight:600}
.fasl .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fasl .two button{border:1.5px solid var(--border);background:var(--bg);border-radius:12px;padding:10px;cursor:pointer;line-height:1.5}
.fasl .two button.right{border-color:var(--ok);background:var(--ok-bg);font-weight:700}
.fasl .two button.wrong{border-color:var(--bad);background:var(--bad-bg)}
.fasl .note{margin-top:8px;font-size:.88em;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.result{text-align:center;padding:22px 10px}
.result .big{font-size:2.6em;font-weight:700;color:var(--accent);line-height:1.2}
.result p{color:var(--muted);margin:6px 0}
.panel{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.42);display:none;align-items:flex-end;justify-content:center}
.panel.on{display:flex}
.sheet{background:var(--surface);width:100%;max-width:760px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
.sheet h3{margin:0 0 10px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 16px}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg button{border:1.5px solid var(--border);border-radius:12px;padding:10px 4px;background:var(--bg);cursor:pointer;font-size:.86em}
.seg button.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.sw{display:block;height:22px;border-radius:7px;margin-bottom:6px;border:1px solid rgba(0,0,0,.15)}
.help p,.help li{font-size:.92em}
#toast{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 16px;border-radius:99px;font-size:.88em;opacity:0;transition:opacity .25s;pointer-events:none;z-index:30;max-width:90vw;text-align:center}
#toast.on{opacity:1}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px;margin:10px 0}
.tabs button{border:0;background:transparent;border-radius:10px;padding:9px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button.on{background:var(--accent);color:var(--accent-ink)}
.sess{font-size:.86em;color:var(--muted);margin:8px 2px}
.refs{margin:26px 0 10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:10px 14px}
.refs summary{cursor:pointer;font-weight:700;color:var(--muted)}
.refs p{font-size:.86em;color:var(--muted)}
.topv{display:flex;align-items:center;gap:8px;font-weight:700;margin:0 0 8px;padding:8px 12px;border-radius:12px}
.topv.ok{color:var(--ok);background:var(--ok-bg)}.topv.bad{color:var(--bad);background:var(--bad-bg)}