:root{
  --bg:#f6f7f9; --surface:#fff; --fg:#16181d; --muted:#5f6672;
  --border:#e2e5ea; --accent:#c1121f; --accent-fg:#fff;
  --ok:#1a7f37; --ok-bg:#e8f5ec; --bad:#c1121f; --bad-bg:#fdecec;
  --warn:#9a6700; --warn-bg:#fff8e1;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --surface:#171a21; --fg:#e8eaee; --muted:#9aa2b1;
    --border:#262b35; --accent:#e5484d; --accent-fg:#fff;
    --ok:#3fb950; --ok-bg:#12261a; --bad:#ff6369; --bad-bg:#2a1517;
    --warn:#d4a72c; --warn-bg:#2a2113;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  }
}
html[data-theme="light"]{ --bg:#f6f7f9; --surface:#fff; --fg:#16181d; --muted:#5f6672; --border:#e2e5ea;
  --ok:#1a7f37; --ok-bg:#e8f5ec; --bad:#c1121f; --bad-bg:#fdecec; --warn:#9a6700; --warn-bg:#fff8e1; }
html[data-theme="dark"]{ --bg:#0f1115; --surface:#171a21; --fg:#e8eaee; --muted:#9aa2b1; --border:#262b35;
  --ok:#3fb950; --ok-bg:#12261a; --bad:#ff6369; --bad-bg:#2a1517; --warn:#d4a72c; --warn-bg:#2a2113; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1; width:100%; max-width:820px; margin:0 auto; padding:20px 16px 48px}
a{color:inherit; text-decoration:none}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.2px}
.flag{width:20px; height:14px; border-radius:2px; display:inline-block;
  background:linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%)}
.top-actions{display:flex; gap:8px}
.ghost{
  background:transparent; color:var(--fg); border:1px solid var(--border);
  border-radius:10px; padding:6px 11px; font-size:13px; cursor:pointer; font-weight:600;
}
.ghost:hover{background:var(--surface)}
.ghost[aria-pressed="false"]{opacity:.45; text-decoration:line-through}

/* loading */
.loading{display:flex; flex-direction:column; align-items:center; gap:14px; padding:64px 0; color:var(--muted)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{width:220px;height:6px;border-radius:99px;background:var(--border);overflow:hidden}
.progress>div{height:100%;width:0;background:var(--accent);transition:width .2s}

/* home */
.hero{margin:8px 0 22px}
.hero h1{font-size:clamp(22px,5vw,30px); margin:0 0 8px; line-height:1.25}
.hero p{margin:0; color:var(--muted)}
.stats{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 14px; min-width:96px}
.stat b{display:block; font-size:20px}
.stat span{font-size:12px; color:var(--muted)}

.cards{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:640px){ .cards{grid-template-columns:1fr 1fr} }
.card{
  display:flex; flex-direction:column; gap:6px; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; cursor:pointer; color:var(--fg); font:inherit; box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px); border-color:var(--accent)}
.card .k{font-size:13px; color:var(--accent); font-weight:700; letter-spacing:.4px; text-transform:uppercase}
.card h2{margin:0; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14px}

.section-title{margin:28px 0 10px; font-size:15px; color:var(--muted); font-weight:700; letter-spacing:.3px}

/* topic list */
.topics{display:grid; gap:8px; grid-template-columns:1fr}
@media(min-width:560px){ .topics{grid-template-columns:1fr 1fr} }
.topic{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; cursor:pointer; font:inherit; color:var(--fg); text-align:left;
}
.topic:hover{border-color:var(--accent)}
.topic .n{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.topic .t small{display:block; color:var(--muted); font-size:12px}

/* quiz */
.quizbar{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.quizbar .qcount{font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.quizbar .timer{font-variant-numeric:tabular-nums; font-weight:700; margin-left:auto}
.quizbar .timer.low{color:var(--bad)}
.bar{height:6px; background:var(--border); border-radius:99px; overflow:hidden; flex:1}
.bar>div{height:100%; background:var(--accent); width:0; transition:width .25s}

.qcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.qtag{display:inline-block; font-size:12px; color:var(--muted); border:1px solid var(--border); border-radius:99px; padding:2px 10px; margin-bottom:12px}
.qzh{font-size:18px; font-weight:600; margin:0 0 8px; line-height:1.45}
.qes{margin:0 0 14px; color:var(--muted); font-size:14px; font-style:italic}
.qimg{display:block; max-width:100%; max-height:340px; margin:0 auto 16px; border-radius:10px; border:1px solid var(--border); cursor:zoom-in; background:#fff}

.opts{display:flex; flex-direction:column; gap:10px}
.opt{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  background:var(--bg); border:1.5px solid var(--border); border-radius:12px;
  padding:13px 15px; cursor:pointer; font:inherit; color:var(--fg); transition:border-color .12s, background .12s;
}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt .letter{
  flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); font-weight:700; font-size:13px;
}
.opt .txt{flex:1; min-width:0}
.opt .txt small{display:block; color:var(--muted); font-size:13px; margin-top:3px}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--ok); background:var(--ok-bg)}
.opt.correct .letter{background:var(--ok); border-color:var(--ok); color:#fff}
.opt.wrong{border-color:var(--bad); background:var(--bad-bg)}
.opt.wrong .letter{background:var(--bad); border-color:var(--bad); color:#fff}
.opt.picked{border-style:dashed}

.feedback{margin-top:16px; padding:14px 16px; border-radius:12px; font-size:14.5px; line-height:1.6}
.feedback.ok{background:var(--ok-bg); border:1px solid var(--ok)}
.feedback.bad{background:var(--bad-bg); border:1px solid var(--bad)}
.feedback b{display:block; margin-bottom:6px}
.feedback .es{display:block; margin-top:8px; color:var(--muted); font-size:13px; font-style:italic}

.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.btn{
  flex:1; min-width:130px; border:none; border-radius:12px; padding:13px 18px;
  font:inherit; font-weight:700; cursor:pointer; background:var(--accent); color:var(--accent-fg);
}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.secondary{background:var(--surface); color:var(--fg); border:1px solid var(--border)}

/* result */
.result{text-align:center; padding:8px 0 4px}
.score{font-size:56px; font-weight:800; line-height:1; margin:6px 0}
.verdict{font-size:18px; font-weight:700}
.verdict.pass{color:var(--ok)} .verdict.fail{color:var(--bad)}
.result p{color:var(--muted)}

.review{margin-top:22px; display:flex; flex-direction:column; gap:12px}
.rev{background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--bad); border-radius:12px; padding:14px 16px}
.rev h3{margin:0 0 6px; font-size:15.5px}
.rev .a{font-size:14px; margin:4px 0}
.rev .a.you{color:var(--bad)} .rev .a.right{color:var(--ok)}
.rev .ex{font-size:13.5px; color:var(--muted); margin-top:8px}

/* zoom */
.zoom{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.9); display:grid; place-items:center; padding:20px; cursor:zoom-out}
.zoom img{max-width:100%; max-height:100%; border-radius:8px; background:#fff}

.empty{text-align:center; color:var(--muted); padding:48px 0}
.foot{max-width:820px; margin:0 auto; padding:0 16px 28px; color:var(--muted); font-size:12px; line-height:1.6}