:root{
  --bg:#f5f7fa; --fg:#141b26; --muted:#5c6675; --card:#ffffff; --line:#e3e7ee;
  --brand:#0f766e; --brand-soft:#e6f4f1; --accent:#b45309; --accent-soft:#fdf1e3;
  --danger:#b91c1c; --ok:#15803d; --info-soft:#eef2ff;
  --focus:#0ea5e9;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 8px 22px rgba(16,24,40,.12);
  --tap:44px;
  --topbar-h:64px;
}
html[data-theme="dark"]{
  --bg:#0d121c; --fg:#e8ecf3; --muted:#9aa6b6; --card:#151c29; --line:#263041;
  --brand:#2dd4bf; --brand-soft:#0f2f2c; --accent:#f59e0b; --accent-soft:#3a2a10;
  --danger:#f87171; --ok:#4ade80; --info-soft:#16203a;
  --focus:#38bdf8;
  --sh-1:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --sh-2:0 10px 24px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,"Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif;
  line-height:1.65;-webkit-text-size-adjust:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
h1{font-size:1.7rem;margin:.2em 0 .5em}
h2{font-size:1.25rem;margin:1.3em 0 .4em}
h3{font-size:1.05rem;margin:.2em 0}
button{min-height:var(--tap);font-size:15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--fg);cursor:pointer;padding:6px 14px;
  transition:background .15s,box-shadow .15s,transform .06s,border-color .15s}
button:hover{background:var(--bg);box-shadow:var(--sh-1)}
button:active{transform:scale(.98)}
#topbar{position:sticky;top:0;z-index:30;display:flex;gap:8px;align-items:center;flex-wrap:wrap;row-gap:6px;max-width:100%;
  padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--card);background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}
#topbar button,#topbar input{min-height:var(--tap);font-size:16px}
#topbar button{white-space:nowrap;flex:0 0 auto}
.brand{font-weight:800;letter-spacing:.2px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-wrap{flex:1 1 160px;min-width:0;max-width:100%}
#searchInput{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);transition:border-color .15s,box-shadow .15s}
#searchInput:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
#searchResults{position:fixed;top:var(--topbar-h,64px);inset-inline:0;z-index:40;background:var(--card);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  max-height:calc(100dvh - var(--topbar-h,64px) - 16px);overflow:auto;padding:8px}
.hit{display:block;padding:10px 14px;border-radius:var(--r-sm);min-height:var(--tap);color:var(--fg)}
.hit:hover{background:var(--bg);text-decoration:none}
mark{background:var(--accent-soft);color:inherit;border-radius:4px;padding:0 3px;box-shadow:inset 0 -2px 0 var(--accent)}
#sidebar{position:fixed;inset-block:0;inset-inline-end:0;width:280px;overflow:auto;
  background:var(--card);border-inline-start:1px solid var(--line);padding:16px;display:none}
#sidebar a,#drawer a{display:flex;align-items:center;gap:8px;padding:10px 12px;min-height:var(--tap);
  color:var(--fg);border-radius:var(--r-sm);text-decoration:none;transition:background .15s,color .15s}
#sidebar a:hover,#drawer a:hover{background:var(--bg);text-decoration:none}
#sidebar a.active,#drawer a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
@media (min-width:900px){#sidebar{display:block}#navToggle{display:none}#view{padding-inline-end:300px}}
#view{padding:20px;padding-bottom:calc(96px + env(safe-area-inset-bottom));max-width:960px;margin-inline:auto}
.src{direction:ltr;text-align:left}
.tr{margin-top:6px;color:var(--muted);font-size:.94em;border-inline-start:3px solid var(--brand-soft);padding-inline-start:10px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0;
  box-shadow:var(--sh-1);display:block;color:var(--fg);text-decoration:none;
  transition:box-shadow .18s,transform .18s,border-color .18s}
a.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));text-decoration:none}
.card h3{margin-top:0}
.progress{position:relative;height:10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);
  overflow:hidden;margin-top:8px}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .3s}
.progress-label{display:block;font-size:.8em;color:var(--muted);margin-top:4px}
.banner{padding:10px 14px;border-radius:var(--r-sm);margin:10px 0;border:1px solid var(--line);
  border-inline-start:4px solid var(--muted);background:var(--card)}
.banner.warn{background:var(--accent-soft);border-color:var(--accent);border-inline-start-color:var(--accent)}
.banner.note{background:var(--info-soft);border-inline-start-color:var(--brand)}
.slides{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh-1)}
.slides:focus{outline:2px solid var(--focus)}
.slides ul{margin:.5em 0;padding-inline-start:1.2em}
.slides li{margin:.6em 0}
.slide-progress{display:inline-block;min-width:64px;text-align:center;font-weight:700;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}
.slide-nav,.flash-nav{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px;flex-wrap:wrap}
.nav-btn,#drawerClose{min-width:var(--tap);min-height:var(--tap);font-size:20px;border-radius:var(--r-pill)}
button.known,button.right{background:var(--ok);color:#fff;border-color:transparent}
button.wrong{background:var(--danger);color:#fff;border-color:transparent}
.done-btn{margin-top:10px}
.pager{display:flex;justify-content:space-between;margin:18px 0;flex-wrap:wrap;gap:8px}
.pager a{min-height:var(--tap);padding:8px 14px;color:var(--fg);border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none}
.pager a:hover{background:var(--bg);text-decoration:none}
#drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(320px,85vw);height:100dvh;
  background:var(--card);z-index:60;transform:translateX(100%);transition:transform .2s;
  padding:16px;padding-inline-end:calc(16px + env(safe-area-inset-right));overflow:auto;box-shadow:var(--sh-2)}
#drawer.open{transform:translateX(0)}
html[dir="rtl"] #drawer{transform:translateX(-100%)}
html[dir="rtl"] #drawer.open{transform:translateX(0)}
#drawerBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
#drawerBackdrop.open{display:block}
#drawerBackdrop[hidden]{display:none}
table{border-collapse:separate;border-spacing:0;width:100%;max-width:100%;display:block;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-1)}
th,td{border:0;border-bottom:1px solid var(--line);padding:10px 12px;min-width:120px;vertical-align:top;text-align:start}
thead th{background:var(--brand-soft);font-weight:700;position:sticky;top:0;z-index:2}
th:first-child,td:first-child{position:sticky;inset-inline-start:0;background:var(--card);z-index:1}
thead th:first-child{z-index:3}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 55%,transparent)}
tbody tr:hover{background:var(--bg)}
.danger{border-inline-start:4px solid var(--danger);padding-inline-start:10px;margin-top:10px;border-radius:var(--r-sm)}
.chain-step{padding-inline-start:8px}
.icons{font-size:20px;letter-spacing:2px}
.tree{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:100%}
.tree-node{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--fg);
  min-height:var(--tap);display:inline-flex;align-items:center;text-decoration:none}
.tree-node:hover{background:var(--brand-soft);border-color:var(--brand);text-decoration:none}
.mermaid{overflow-x:auto;max-width:100%}
.explain{margin-top:10px;padding:10px 12px;border-inline-start:4px solid var(--brand);background:var(--bg);border-radius:var(--r-sm)}
.q .opt{display:block;width:100%;text-align:start;margin:6px 0}
.flash{min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:1.05rem;cursor:pointer}
.flash:hover{box-shadow:var(--sh-2)}
dl dt{font-weight:700;margin-top:12px}
dl dd{margin:.2em 0 0}
#printArea{display:none}
/* --- mobile hardening --- */
html,body{overflow-x:clip;max-width:100%}
.card,.slides,.slides li,.tr,.src,.explain,.banner,.tree,#view{overflow-wrap:anywhere}
img,svg{max-width:100%}
#bottomNav[hidden]{display:none}
#bottomNav{position:fixed;inset-inline:0;bottom:0;display:flex;justify-content:center;gap:12px;max-width:100%;
  padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:var(--card);background:color-mix(in srgb,var(--card) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:var(--sh-2);z-index:30}
@media (max-width:640px){
  .search-wrap{order:9;flex:1 1 100%}
}
@media (min-width:900px){
  #bottomNav{display:none!important}
  #view{padding-bottom:16px;padding-inline-end:300px}
  #sidebar{padding-top:calc(var(--topbar-h,64px) + 14px)}
}
@media (max-width:899px){
  .slide-nav{display:none}
}
@media (max-width:520px){
  .brand{display:none}
  #topbar{padding-inline:8px;gap:6px}
  #topbar button{padding:6px 10px}
  h1{font-size:1.3rem}
  h2{font-size:1.12rem}
  #view{padding:12px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .slides{padding:12px}
  .flash{min-height:140px}
  table{font-size:.92em}
  th,td{min-width:96px;padding:8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
  #topbar,#sidebar,#drawer,#drawerBackdrop,#bottomNav,#searchResults,#view{display:none!important}
  #printArea{display:block}
  body{background:#fff;color:#000}
}
/* --- strategies: nav lists, badges, filters, feedback --- */
.breadcrumb{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px;font-size:.85rem;color:var(--muted)}
.breadcrumb a{color:var(--brand)}
.breadcrumb span.sep{opacity:.5}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--muted);background:var(--bg)}
.badge.done{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.badge.warn{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.nav-lecture{margin:6px 0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.nav-lecture > button{width:100%;display:flex;align-items:center;gap:8px;text-align:start;border:0;border-radius:0;background:transparent;
  font-weight:700;padding:10px 12px;justify-content:flex-start}
.nav-lecture > button:hover{background:var(--bg);box-shadow:none}
.nav-lecture .lec-tag{margin-inline-start:auto;font-weight:400;color:var(--muted);font-size:.72rem}
.nav-topics{list-style:none;margin:0;padding:6px;display:none}
.nav-lecture.open .nav-topics{display:block}
.nav-topics li{margin:2px 0}
.nav-topics button{width:100%;display:flex;align-items:center;gap:8px;text-align:start;border:0;background:transparent;
  padding:8px 10px;border-radius:var(--r-sm);font-size:.88rem;font-weight:400}
.nav-topics button:hover{background:var(--bg);box-shadow:none}
.nav-topics button.current{background:var(--brand-soft);color:var(--brand);font-weight:700}
.nav-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto}
.nav-dot.done{background:var(--brand);border-color:var(--brand)}
.nav-dot.part{background:var(--accent);border-color:var(--accent)}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.filter-bar button{min-height:var(--tap);border-radius:var(--r-pill)}
.filter-bar button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:700}
.kw-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.kw-list span{font-size:.74rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 9px;color:var(--muted)}
.legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:4px}
.topic-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.topic-list a,.topic-list button{display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);padding:10px 12px;min-height:var(--tap);color:var(--fg)}
.topic-list a:hover,.topic-list button:hover{background:var(--bg);border-color:var(--brand);text-decoration:none}
.summary-box{border:1px solid var(--accent);background:var(--accent-soft)}
.mnemonic{background:var(--brand-soft);border:1px dashed var(--brand);border-radius:var(--r-sm);padding:10px 12px;margin-top:10px;font-size:.9rem}
.empty{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);background:var(--card)}
.fab-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.match-row{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}
.match-row .left{flex:1 1 180px}
.match-row select{flex:1 1 180px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:16px;font-family:inherit;min-height:var(--tap)}
.result-msg{font-weight:700;font-size:.86rem}
.result-msg.ok{color:var(--ok)}
.result-msg.no{color:var(--danger)}
.result-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px;cursor:pointer;background:var(--card)}
.result-item:hover{border-color:var(--brand);background:var(--bg)}
.result-item .where{font-size:.74rem;color:var(--muted)}
.result-item .snippet{font-size:.88rem;overflow-wrap:anywhere}
.toast{position:fixed;inset-inline:0;bottom:calc(18px + env(safe-area-inset-bottom));margin-inline:auto;width:max-content;max-width:90vw;
  z-index:80;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--r-pill);box-shadow:var(--sh-2);
  opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s;pointer-events:none;font-size:.9rem}
.toast.show{opacity:1;transform:translateY(0)}
@keyframes flashWrong{from{background:color-mix(in srgb,var(--danger) 25%,transparent)}to{background:transparent}}
.match-row.wrong{animation:flashWrong .5s}