:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --border:#2b3441;
  --text:#e6edf3; --muted:#9aa7b4; --accent:#4c8dff; --accent2:#2f6fe0;
  --good:#3fb950; --good-bg:#12361f; --bad:#f85149; --bad-bg:#3a1417;
  --chip:#222c38; --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;height:100vh;overflow:hidden}
code{background:#0b0f14;border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.9em;color:#cdd9e5}

/* top bar */
.topbar{display:flex;align-items:center;gap:18px;padding:12px 20px;background:linear-gradient(180deg,#171d26,#11161d);border-bottom:1px solid var(--border);flex:0 0 auto;z-index:30}
.brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.logo{background:var(--accent);color:#fff;font-weight:800;border-radius:9px;padding:8px 11px;letter-spacing:.5px;box-shadow:var(--shadow)}
.title{font-weight:700}
.subtitle{color:var(--muted);font-size:12.5px}
.modes{display:flex;gap:6px;background:#0c1117;border:1px solid var(--border);border-radius:10px;padding:4px}
.mode-btn{background:transparent;color:var(--muted);border:0;padding:8px 14px;border-radius:7px;cursor:pointer;font-weight:600}
.mode-btn.active{background:var(--accent);color:#fff}
.shuffle{background:#0c1117;color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer}
.shuffle:hover{border-color:var(--accent);color:#fff}
.score{text-align:right;min-width:120px}
.score-main{font-size:22px;font-weight:800}
.score-max{color:var(--muted);font-size:14px;font-weight:600;margin-left:4px}
.score-sub{color:var(--muted);font-size:12px}

/* lecture bar */
.lecbar{display:flex;gap:7px;overflow-x:auto;padding:11px 20px;background:var(--panel);border-bottom:1px solid var(--border);flex:0 0 auto;z-index:20}
.lecchip{white-space:nowrap;background:var(--chip);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;display:flex;gap:7px;align-items:center}
.lecchip .n{color:var(--muted);font-size:11.5px}
.lecchip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.lecchip.active .n{color:#dce8ff}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;flex:1 1 auto;min-height:0}
.pane{overflow-y:auto;min-height:0;height:100%}
.pane.left{border-right:1px solid var(--border)}
.pane-head{position:sticky;top:0;background:rgba(14,17,22,.92);backdrop-filter:blur(4px);padding:12px 18px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:12px;border-bottom:1px solid var(--border);z-index:5}

/* question cards */
.qlist{padding:16px 18px 60px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:16px 16px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.active{border-color:var(--accent)}
.qmeta{display:flex;gap:8px;align-items:center;margin-bottom:9px}
.tag{background:var(--chip);border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700}
.qnum{color:var(--muted);font-size:12px}
.stem{font-weight:600;margin:0 0 12px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);background:var(--panel2);border-radius:9px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover{border-color:#3a4757}
.opt .key{font-weight:800;color:var(--muted);min-width:18px}
.opt.sel{border-color:var(--accent)}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.correct .key{color:var(--good)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .key{color:var(--bad)}
.opt.disabled{cursor:default}
.opt .note{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.row{display:flex;gap:10px;align-items:center;margin-top:4px}
.btn{border:0;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer}
.primary{background:var(--accent);color:#fff}
.primary:hover{background:var(--accent2)}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.verdict{font-weight:700;margin-left:auto}
.verdict.good{color:var(--good)} .verdict.bad{color:var(--bad)}
.explain{margin-top:10px;border-left:3px solid var(--accent);background:#0e1722;padding:9px 12px;border-radius:0 8px 8px 0;font-size:13.5px}
.explain b{color:#cfe1ff}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12.5px;padding:0;margin-top:8px}

/* learn panel */
.learn{padding:16px 18px 60px}
.learn h2{margin:.2em 0 .1em;font-size:20px}
.learn h3{margin:1.1em 0 .3em;font-size:16px;color:#cfe1ff}
.learn h4{margin:1em 0 .3em;font-size:14px;color:#bcd0e6}
.learn p{margin:.5em 0}
.learn ul{margin:.4em 0 .6em;padding-left:20px}
.learn li{margin:.22em 0}
.learn blockquote{margin:.6em 0;padding:8px 12px;border-left:3px solid var(--accent);background:#0e1722;border-radius:0 8px 8px 0;color:#cdd9e5}
.learn table{border-collapse:collapse;margin:.6em 0;width:100%;font-size:13px}
.learn th,.learn td{border:1px solid var(--border);padding:6px 9px;text-align:left;vertical-align:top}
.learn th{background:var(--panel2)}
.lectag{color:var(--muted);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.placeholder{color:var(--muted);max-width:460px;margin-top:30px}

.videos{display:flex;flex-direction:column;gap:14px;margin:6px 0 18px}
.video .vt{font-size:13px;font-weight:700;margin-bottom:6px}
.video .vc{color:var(--muted);font-weight:600;font-size:12px}
.vframe{position:relative;width:100%;padding-top:56.25%;border-radius:11px;overflow:hidden;border:1px solid var(--border);background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.novid{color:var(--muted);font-size:13px;border:1px dashed var(--border);border-radius:9px;padding:10px 12px}

.section{margin-top:14px}
details.cheat{border:1px solid var(--border);border-radius:11px;background:var(--panel);margin-top:14px}
details.cheat>summary{cursor:pointer;padding:11px 14px;font-weight:700;color:#cfe1ff;list-style:none}
details.cheat>summary::-webkit-details-marker{display:none}
details.cheat>summary::before{content:"▸ ";color:var(--muted)}
details.cheat[open]>summary::before{content:"▾ "}
details.cheat .cheatbody{padding:0 14px 12px}
.active-q{border:1px solid var(--accent);border-radius:11px;background:#0e1722;padding:10px 13px;margin:4px 0 14px}
.active-q .lbl{color:var(--accent);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

.exam-actions{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 18px;background:rgba(14,17,22,.95);border-top:1px solid var(--border)}
.exam-actions[hidden]{display:none}
.exam-result{background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:14px 16px;margin:0 18px 16px}
.exam-result .big{font-size:26px;font-weight:800}
.pass{color:var(--good)} .fail{color:var(--bad)}

/* interactive demos */
.demo-h{margin:1.2em 0 .4em;font-size:15px;color:#cfe1ff}
.demo{background:#0c1117;border:1px solid var(--border);border-radius:11px;padding:12px}
.demo-canvas{width:100%;max-width:640px;height:auto;display:block;border-radius:8px;background:#0c1117}
.demo-lechdr{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700;margin:16px 0 6px}
.demo-item{padding:10px 12px;border:1px solid var(--border);background:var(--panel);border-radius:9px;margin-bottom:7px;cursor:pointer;font-weight:600}
.demo-item:hover{border-color:#3a4757}
.demo-item.active{border-color:var(--accent);background:#13233a}
.demo-controls{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.demo-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.demo-lbl{color:var(--muted);min-width:150px;flex:0 0 auto}
.demo-row input[type=range]{flex:1;accent-color:var(--accent)}
.demo-val{color:var(--text);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.demo-sel{background:#0b0f14;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px}
.demo-btn{background:var(--chip);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:6px 11px;cursor:pointer;font-weight:600;font-size:12.5px;margin-right:6px}
.demo-btn:hover{border-color:var(--accent)}
.demo-caption{margin-top:10px;font-size:12.7px;color:var(--muted);line-height:1.5}
.demo-caption b{color:var(--text)}
.assign{margin:12px 0;padding:9px 12px;border-left:3px solid var(--good);background:#10231a;border-radius:0 8px 8px 0;font-size:12.7px;color:#bfe6cb}
.card.revealed{cursor:pointer}
.tag.warn{background:#3a2417;border-color:#7a4a1f;color:#f0a73f}
.card.revealed .opt{cursor:pointer}

/* KaTeX sizing inside the app */
.katex{font-size:1.02em}
.stem .katex,.opt .katex{font-size:1em}
.katex-display{margin:.5em 0;overflow-x:auto;overflow-y:hidden}
.opt .katex-display{margin:.2em 0}

@media (max-width:900px){
  html,body{overflow:auto;height:auto}
  .topbar{position:sticky;top:0;flex-wrap:wrap;gap:9px 12px;padding:10px 13px}
  .brand{flex:1 1 auto;min-width:0}
  .score{order:2;text-align:right;min-width:0}
  .modes{order:3;flex:1 1 100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mode-btn{white-space:nowrap}
  .lecbar{position:sticky;top:0}
  .layout{grid-template-columns:1fr;flex:initial}
  .pane{min-height:0;overflow:visible;height:auto}
  .pane.left{border-right:0;border-bottom:1px solid var(--border)}
  .pane-head{position:static}
  .subtitle{display:none}
  .exam-actions{position:sticky;bottom:0}
  .learn table{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:560px){
  .title{font-size:15px}
  .qlist{padding:13px 12px 48px}
  .learn{padding:13px 12px 48px}
  .card{padding:14px 12px 12px;border-radius:11px}
  .opt{padding:12px 12px}            /* larger touch targets */
  .stem{font-size:14.5px}
  .score-main{font-size:18px}
  .mode-btn{padding:8px 12px;font-size:13px}
  .lecchip{padding:7px 12px;font-size:12.5px}
  .demo-lbl{min-width:120px}
  .logo{padding:7px 9px}
}