:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --ink:#1c2430;
  --muted:#6b7683;
  --line:#e4e8ee;
  --accent:#2563eb;
  --accent-soft:#e8efff;
  --good:#12805a;
  --good-soft:#e5f5ef;
  --bad:#c0392b;
  --bad-soft:#fbe9e7;
  --warn:#b7791f;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.05);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;line-height:1.25;font-weight:650}
p{margin:.25rem 0}
button{font:inherit;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=search]{
  width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);font:inherit;outline:none;
}
input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.hidden{display:none !important}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.7rem}
.logo{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;font-weight:700;font-size:.95rem;
}
.brand h1{font-size:1rem}
.brand p{margin:0;font-size:.75rem;color:var(--muted)}
.tabs{display:flex;gap:.25rem;background:#eef1f5;padding:.25rem;border-radius:11px}
.tab{
  border:0;background:transparent;color:var(--muted);padding:.45rem 1.1rem;border-radius:8px;
  font-weight:600;font-size:.9rem;
}
.tab.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/* ---------- layout ---------- */
main{max-width:920px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.5rem) 3rem}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.4rem;box-shadow:var(--shadow);margin-bottom:1rem;
}
.setup h2{font-size:1.25rem;margin-bottom:.15rem}
.field{margin-top:1.35rem}
.field>label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.5rem}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.label-row label,.label-row h2{font-weight:650}
.pill{
  background:var(--accent-soft);color:var(--accent);border-radius:999px;
  padding:.1rem .55rem;font-size:.78rem;font-weight:700;margin-left:.35rem;
}
.presets{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.chip{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:.32rem .8rem;font-size:.82rem;font-weight:600;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.chips .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;padding:.6rem 1.15rem;font-weight:600;
}
.btn:hover{border-color:#c9d2dd}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#1d4ed8}
.actions{margin-top:1.5rem}
.linkbtn{border:0;background:none;color:var(--accent);font-weight:600;font-size:.82rem;padding:0}

/* topic mix */
.mix{display:flex;flex-direction:column;gap:.45rem}
.mix-row{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;font-size:.85rem}
.mix-bar{grid-column:1/3;height:6px;border-radius:6px;background:#eef1f5;overflow:hidden}
.mix-bar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.mix-name{color:var(--ink)}
.mix-pct{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- running exam ---------- */
.runbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem}
.runbar-left{display:flex;align-items:baseline;gap:.75rem}
.runbar-right{display:flex;align-items:center;gap:1rem}
.timer{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.timer.warn{color:var(--warn)}
.timer.danger{color:var(--bad)}

.qcard h3{font-size:1.12rem;margin:.6rem 0 1rem;font-weight:600}
.tag{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:6px;padding:.15rem .55rem;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}
.options{display:flex;flex-direction:column;gap:.6rem}
.option{
  display:flex;gap:.85rem;align-items:flex-start;text-align:left;
  border:1px solid var(--line);background:#fff;border-radius:11px;
  padding:.8rem .95rem;color:var(--ink);transition:border-color .12s,background .12s;
}
.option:hover{border-color:#c9d2dd;background:#fbfcfe}
.option .key{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:#eef1f5;color:var(--muted);font-weight:700;font-size:.82rem;
}
.option.sel{border-color:var(--accent);background:var(--accent-soft)}
.option.sel .key{background:var(--accent);color:#fff}
.option.correct{border-color:var(--good);background:var(--good-soft)}
.option.correct .key{background:var(--good);color:#fff}
.option.wrong{border-color:var(--bad);background:var(--bad-soft)}
.option.wrong .key{background:var(--bad);color:#fff}

.check-feedback{margin-top:.85rem;font-size:.86rem;font-weight:600;padding:.5rem .75rem;border-radius:9px;text-align:center}
.check-feedback.ok{background:var(--good-soft);color:var(--good)}
.check-feedback.no{background:var(--bad-soft);color:var(--bad)}
.check-feedback.warn{background:#fdf3e2;color:var(--warn)}

.navrow{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}

.palette-card .palette{display:flex;flex-wrap:wrap;gap:.4rem}
.pdot{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-weight:600;font-size:.82rem;font-variant-numeric:tabular-nums;
}
.pdot.answered{background:var(--accent-soft);color:var(--accent);border-color:#c7d7fb}
.pdot.current{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- results ---------- */
.score-hero{text-align:center;padding:1.6rem}
.score-num{font-size:3rem;font-weight:750;line-height:1}
.score-num.pass{color:var(--good)}
.score-num.fail{color:var(--bad)}
.score-sub{margin-top:.35rem}
.badge{display:inline-block;border-radius:999px;padding:.2rem .7rem;font-weight:700;font-size:.82rem}
.badge.pass{background:var(--good-soft);color:var(--good)}
.badge.fail{background:var(--bad-soft);color:var(--bad)}
.breakdown{width:100%;border-collapse:collapse;font-size:.88rem}
.breakdown td{padding:.45rem .3rem;border-bottom:1px solid var(--line)}
.breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.review-item{border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}
.review-item:first-of-type{border-top:0;margin-top:.4rem}
.verdict{font-weight:700;font-size:.82rem}
.verdict.ok{color:var(--good)}
.verdict.no{color:var(--bad)}
.explain{margin-top:.7rem;padding:.75rem .9rem;background:#f7f9fc;border-radius:10px;font-size:.88rem;color:#3a4655}

/* ---------- study ---------- */
.study-controls h2{font-size:1.15rem}
#study-list .q{margin-bottom:.9rem}
.q-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.55rem;flex-wrap:wrap}
.q-head .num{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.study .option{cursor:default}
.study .option:hover{border-color:var(--line);background:#fff}
.study .option.correct{cursor:default}
details.explain-box{margin-top:.6rem}
details.explain-box summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--accent)}
details.explain-box p{margin-top:.5rem;font-size:.88rem;color:#3a4655}
.empty{color:var(--muted);text-align:center;padding:2rem}

.foot{text-align:center;padding:1rem 1rem 2.5rem}

@media (max-width:600px){
  .brand p{display:none}
  .runbar{flex-wrap:wrap}
  .score-num{font-size:2.4rem}
}