:root{
  --ink:#172634; --muted:#5b6b79; --paper:#f3f6f9; --surface:#fff; --line:#d5dde5;
  --accent:#1a5fa8; --accent-ink:#fff; --done:#24855a; --warn:#a8571a; --bad:#b3261e;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans",sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.5}
a{color:var(--accent)}
.topbar{background:var(--ink);color:#fff;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar .brand{font-weight:600;letter-spacing:.01em}
.topbar .spacer{flex:1}
.topbar a{color:#cfe0f2}
.wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.2rem}
.narrow{max-width:440px;margin:3rem auto;padding:0 1.2rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
h1{font-size:1.6rem;margin:0 0 .8rem}
h2{font-size:1.2rem;margin:1.6rem 0 .6rem}
label{display:block;font-weight:600;margin:.9rem 0 .3rem}
input[type=text],input[type=password],input[type=number],input[type=file]{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius);font-size:1rem;background:#fff}
input:focus,button:focus-visible,a:focus-visible{outline:3px solid #8db8e6;outline-offset:1px}
button,.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius);padding:.6rem 1.1rem;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none}
button.secondary,.btn.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent)}
button.danger{background:var(--bad)}
button.small{padding:.3rem .6rem;font-size:.85rem}
.full{width:100%;margin-top:1.2rem}
.flash{background:#fff7e6;border:1px solid #f0c674;border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:1rem}
.muted{color:var(--muted)}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:.45rem .6rem;text-align:left;font-size:.92rem;vertical-align:top}
th{background:#eef2f6}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.pill{display:inline-block;padding:.05rem .5rem;border-radius:99px;font-size:.8rem;font-weight:600}
.pill.ns{background:#eef2f6;color:var(--muted)}
.pill.ip{background:#e3eefa;color:var(--accent)}
.pill.sub{background:#e2f3ea;color:var(--done)}
.pill.tu{background:#fbeee4;color:var(--warn)}
.stats{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.6rem 1rem;min-width:130px}
.stat b{display:block;font-size:1.5rem}
.row{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap}
.row > *{margin-top:0}
.inline{display:inline}
ol.rules li{margin:.35rem 0}

/* test screen */
.test{display:grid;grid-template-columns:1fr 290px;gap:1.2rem;max-width:1200px;margin:0 auto;padding:1.2rem}
.timer{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:700;background:#24394d;padding:.2rem .7rem;border-radius:var(--radius)}
.timer.low{background:var(--bad)}
.save-state{font-size:.85rem;color:#cfe0f2}
.save-state.err{color:#ffd29a;font-weight:600}
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.qsection{color:var(--muted);font-size:.95rem}
.qtext{font-size:1.12rem;white-space:pre-wrap;margin:.2rem 0 1.1rem}
.opt{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .9rem;margin:.5rem 0;font-weight:400;font-size:1rem;white-space:pre-wrap}
.opt:hover{border-color:#9db7d2}
.opt .key{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:600}
.opt.sel{border-color:var(--accent);background:#eef5fd}
.opt.sel .key{background:var(--accent);border-color:var(--accent);color:#fff}
.nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.palette h3{font-size:.95rem;margin:.9rem 0 .4rem}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem}
.grid button{padding:.4rem 0;font-size:.85rem;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:600}
.grid button.ans{background:var(--done);border-color:var(--done);color:#fff}
.grid button.cur{outline:3px solid var(--accent);outline-offset:1px}
.legend{font-size:.82rem;color:var(--muted);margin-top:.8rem}
.legend span{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;vertical-align:-1px;margin-right:.25rem}
dialog{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;max-width:420px}
dialog::backdrop{background:rgba(23,38,52,.45)}
@media (max-width:800px){.test{grid-template-columns:1fr}.grid{grid-template-columns:repeat(8,1fr)}}

/* slips */
.slips{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.slip{border:1px dashed #888;padding:.8rem;font-size:.9rem;break-inside:avoid}
.slip .pw{font-family:Consolas,"Courier New",monospace;font-size:1.25rem;letter-spacing:.12em;font-weight:700}
@media print{.noprint{display:none}body{background:#fff}.wrap{padding:0;max-width:none}}