:root { --bg:#0f1117; --card:#1a1d27; --fg:#e6e6e6; --accent:#4f8cff; --ok:#3ecf8e; --bad:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:1rem 1.5rem; border-bottom:1px solid #262a36; display:flex; justify-content:space-between; align-items:center; }
h1 { font-size:1.3rem; margin:0; }
.dashboard { font-size:.9rem; opacity:.9; }
main { max-width:760px; margin:0 auto; padding:1.5rem; }
.primary { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:.7rem 1.2rem; font-size:1rem; cursor:pointer; }
.card { background:var(--card); border-radius:12px; padding:1.2rem; margin:1rem 0; }
.teach { white-space:pre-wrap; font-family: ui-monospace, monospace; background:#11131b; padding:.8rem; border-radius:8px; font-size:.85rem; }
.q { margin:1rem 0; }
.opt { display:block; width:100%; text-align:left; margin:.3rem 0; padding:.6rem .8rem; border-radius:8px; border:1px solid #2c3140; background:#161922; color:var(--fg); cursor:pointer; }
.opt.sel { border-color:var(--accent); }
.opt.ok { border-color:var(--ok); }
.opt.bad { border-color:var(--bad); }
.result { font-weight:600; margin-top:1rem; }
.secondary { background:#2c3140; color:var(--fg); border:0; border-radius:8px; padding:.7rem 1.2rem; font-size:1rem; cursor:pointer; margin-left:.5rem; }
#actions { display:flex; align-items:center; }
table.history { width:100%; border-collapse:collapse; margin-top:1rem; }
table.history th, table.history td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid #262a36; font-size:.9rem; }