:root{
  --navy:#0c2340; --navy-2:#132f52; --gold:#c99700; --gold-2:#e0b53c;
  --green:#2e7d4f; --red:#b3261e;
  --bg:#f7f5f0; --card:#ffffff; --ink:#12161c; --muted:#5d6673; --line:#e2ded6;
  --radius:14px; --shadow:0 1px 2px rgba(12,35,64,.06),0 8px 24px rgba(12,35,64,.06);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1116;--card:#161b22;--ink:#e8eaed;--muted:#9aa4b2;--line:#262d38;
        --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
h1{font-size:1.5rem;letter-spacing:-.01em}
h2{font-size:1.15rem}
.wrap{max-width:960px;margin:0 auto;padding:20px 16px 64px}
.wrap>:first-child{margin-top:0}

header.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.top .bar{max-width:960px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
header.top .brand{font-weight:800;letter-spacing:.02em;text-decoration:none;color:#fff;white-space:nowrap}
header.top .brand span{color:var(--gold-2)}
header.top nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
header.top nav::-webkit-scrollbar{display:none}
header.top nav a{color:#cfd7e3;text-decoration:none;padding:6px 10px;border-radius:8px;font-size:.9rem;white-space:nowrap}
header.top nav a:hover{background:rgba(255,255,255,.08);color:#fff}
header.top nav a.on{background:var(--gold);color:#20160a;font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:16px 0}
.hero{border-radius:var(--radius);overflow:hidden;margin:16px 0;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card)}
.hero img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.hero .cap{padding:14px 18px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:baseline;gap:10px}

.btn{appearance:none;border:1px solid var(--navy);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--navy-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#20160a}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.sm{padding:6px 11px;font-size:.86rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
textarea{min-height:160px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}
label.fld{display:block;margin:10px 0}
label.fld > span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px;font-weight:600}

/* question cards */
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:12px 0}
.q .prompt{font-weight:650;margin-bottom:12px}
.q .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-left:6px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;background:transparent;text-align:left;font:inherit;color:inherit;width:100%;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--navy)}
.opt .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:0 0 auto}
.opt.sel{border-color:var(--navy);background:rgba(12,35,64,.05)}
.opt.sel .dot{border-color:var(--navy);background:var(--navy);box-shadow:inset 0 0 0 3px var(--card)}
.opt.correct{border-color:var(--green);background:rgba(46,125,79,.09)}
.opt.wrong{border-color:var(--red);background:rgba(179,38,30,.08)}
.opt .pct{margin-left:auto;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.saved{font-size:.8rem;color:var(--green);font-weight:600}

/* tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem}
th,td{padding:9px 10px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)}
thead th{background:var(--navy);color:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;font-weight:700}
tbody tr:last-child td{border-bottom:none}
th.name,td.name{text-align:left;position:sticky;left:0;background:var(--card);z-index:2;font-weight:600;min-width:132px}
thead th.name{background:var(--navy);z-index:3}
tr.me td{background:rgba(201,151,0,.10)}
tr.me td.name{background:rgba(201,151,0,.16)}
td.tot{font-weight:700;background:rgba(201,151,0,.09)}
tbody tr:hover td{background:rgba(12,35,64,.035)}
tbody tr:hover td.name{background:rgba(12,35,64,.05)}
.rank{color:var(--muted);font-variant-numeric:tabular-nums;width:34px}
tfoot td{font-weight:600;color:var(--muted);background:var(--bg);border-top:2px solid var(--line)}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pill.open{background:rgba(46,125,79,.15);color:var(--green)}
.pill.locked{background:rgba(201,151,0,.2);color:#7a5c00}
.pill.graded{background:rgba(12,35,64,.1);color:var(--navy)}
.pill.draft,.pill.archived{background:var(--line);color:var(--muted)}
@media (prefers-color-scheme:dark){.pill.locked{color:var(--gold-2)}.pill.graded{color:#9fb6d8}}

.bar-bg{background:var(--line);border-radius:6px;height:8px;overflow:hidden;min-width:70px}
.bar-fill{background:var(--gold);height:100%}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stat .n{font-size:1.6rem;font-weight:800;line-height:1.1}
.stat .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.spark i{flex:1;background:var(--navy);border-radius:2px 2px 0 0;min-height:2px;opacity:.75}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);z-index:50;font-size:.9rem}
.center{max-width:390px;margin:12vh auto;text-align:center}
code.k{background:var(--line);padding:1px 6px;border-radius:5px;font-size:.85em}