/* ---------- 主题变量 ----------
 * 默认暗色（data-theme=dark 或无属性）；[data-theme=light] 覆盖为亮色。
 * 切换：index.html 内联防闪烁脚本 + app.js toggleTheme，选择存 localStorage('zt-theme')。
 */
:root{
  color-scheme:dark;
  --bg:#0f1420; --card:#161d2e; --ink:#e8edf7; --sub:#9aa7c2;
  --line:#2a3550; --brand:#5b8cff; --brand-d:#9db8ff;
  --ok:#37b24d; --ok-bg:rgba(55,178,77,.15);
  --bad:#ff6b6b; --bad-bg:rgba(224,49,49,.16);
  --warn:#f0a832; --warn-bg:rgba(240,140,59,.16); --warn-d:#ffb066;
  --chip:#1d2942;
  --optbg:#121a2b; --keyline:#3a4a6b; --selbg:rgba(91,140,255,.17);
  --track:#24304a; --track2:#222d47; --soft:#121a2b;
  --toast-bg:#2a3550; --toast-txt:#e8edf7;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6fa; --card:#fff; --ink:#1f2733; --sub:#6b7686;
  --line:#e6eaf1; --brand:#2f6bff; --brand-d:#1f4fd6;
  --ok:#15a05a; --ok-bg:#e8f7ef;
  --bad:#d83a3a; --bad-bg:#fdeaea;
  --warn:#c47f00; --warn-bg:#fff1e0; --warn-d:#b35c00;
  --chip:#eef2ff;
  --optbg:#fff; --keyline:#c4cdda; --selbg:#f2f6ff;
  --track:#dfe5f0; --track2:#e3e8f2; --soft:#f7f9fc;
  --toast-bg:#333c4d; --toast-txt:#fff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  transition:background .25s,color .25s;}
#app{max-width:760px;margin:0 auto;padding:14px 14px 60px;}
button{font-family:inherit;cursor:pointer;border:none;}
h1{font-size:20px;margin:6px 0 2px;}
.muted{color:var(--sub);font-size:13px;}

/* ---------- 主题切换按钮（fixed，#app 外，不随渲染丢失） ---------- */
#theme-toggle{position:fixed;top:12px;right:12px;z-index:50;
  width:40px;height:40px;border-radius:50%;font-size:18px;line-height:1;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,transform .12s;}
#theme-toggle:active{transform:scale(.92);}
#theme-toggle:hover{border-color:var(--brand);}

/* ---------- 首页 ---------- */
.hero{background:linear-gradient(135deg,#2f6bff,#5a3ef2);color:#fff;border-radius:16px;
  padding:20px;margin:8px 0 14px;}
.hero h1{color:#fff;}
.hero .muted{color:#dce4ff;}
.stat-row{display:flex;gap:10px;margin-top:14px;}
.stat-box{flex:1;background:rgba(255,255,255,.14);border-radius:12px;padding:10px;text-align:center;}
.stat-box b{display:block;font-size:22px;}
.stat-box span{font-size:12px;color:#e4eaff;}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mode-btn{background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);
  padding:16px 14px;text-align:left;transition:.15s;}
.mode-btn:active{transform:scale(.98);}
.mode-btn b{display:block;font-size:16px;margin-bottom:4px;}
.mode-btn span{font-size:12px;color:var(--sub);}
.mode-btn.primary{background:var(--brand);border-color:var(--brand);grid-column:1/-1;}
.mode-btn.primary b,.mode-btn.primary span{color:#fff;}
.mode-btn.primary span{color:#dce4ff;}
.years{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.years button{background:var(--chip);color:var(--brand-d);border-radius:999px;
  padding:8px 14px;font-size:14px;}
.sec-title{font-size:14px;color:var(--sub);margin:18px 4px 8px;}
.hist-item{display:flex;justify-content:space-between;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:14px;}
.hist-item .tag{font-weight:600;}
.hist-item .good{color:var(--ok);} .hist-item .fail{color:var(--bad);}

/* ---------- 答题 ---------- */
.topbar{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0 10px;}
.prog{height:6px;background:var(--track);border-radius:99px;overflow:hidden;}
.prog i{display:block;height:100%;background:var(--brand);width:0;transition:width .2s;}
.topbar .row{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-top:6px;}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 16px;margin-bottom:12px;}
.qmeta{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.badge{font-size:12px;padding:2px 9px;border-radius:999px;background:var(--chip);
  color:var(--brand-d);font-weight:600;}
.badge.multi{background:var(--warn-bg);color:var(--warn-d);}
.src{font-size:12px;color:var(--sub);}
.stem{font-size:17px;font-weight:600;white-space:pre-wrap;margin-bottom:14px;}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:12px;padding:12px 13px;margin-bottom:9px;background:var(--optbg);transition:.12s;font-size:15px;}
.opt .key{flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid var(--keyline);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--sub);}
.opt .txt{flex:1;white-space:pre-wrap;}
.opt.sel{border-color:var(--brand);background:var(--selbg);}
.opt.sel .key{background:var(--brand);border-color:var(--brand);color:#fff;}
.opt.correct{border-color:var(--ok);background:var(--ok-bg);}
.opt.correct .key{background:var(--ok);border-color:var(--ok);color:#fff;}
.opt.wrongpick{border-color:var(--bad);background:var(--bad-bg);}
.opt.wrongpick .key{background:var(--bad);border-color:var(--bad);color:#fff;}
.opt.dim{opacity:.55;}
.nav{display:flex;gap:10px;margin-top:6px;}
.nav button{flex:1;padding:13px;border-radius:12px;font-size:15px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--ink);}
.nav button.go{background:var(--brand);color:#fff;border-color:var(--brand);}
.nav button:disabled{opacity:.4;}
.dots{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;}
.dots i{width:30px;height:30px;border-radius:8px;background:var(--track2);font-style:normal;
  font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--sub);}
.dots i.done{background:var(--brand);color:#fff;}
.dots i.cur{outline:2px solid var(--brand-d);outline-offset:1px;}

/* ---------- 结果 ---------- */
.score{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px;text-align:center;margin-bottom:14px;}
.score .big{font-size:42px;font-weight:800;}
.score .big.good{color:var(--ok);} .score .big.mid{color:var(--warn);} .score .big.bad{color:var(--bad);}
.score .line{color:var(--sub);font-size:14px;margin-top:4px;}
.res-head{display:flex;align-items:center;gap:8px;margin:18px 4px 10px;font-size:16px;font-weight:700;}
.res-head .n{background:var(--bad);color:#fff;border-radius:999px;padding:1px 10px;font-size:13px;}
.res-head.ok .n{background:var(--ok);}
.exp{margin-top:10px;background:var(--soft);border-radius:10px;padding:10px 12px;font-size:14px;
  border-left:3px solid var(--brand);white-space:pre-wrap;}
.exp b{color:var(--brand-d);}
.verdict{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;
  padding:3px 10px;border-radius:999px;margin-bottom:8px;}
.verdict.bad{background:var(--bad-bg);color:var(--bad);}
.verdict.good{background:var(--ok-bg);color:var(--ok);}
.ansline{font-size:13px;color:var(--sub);margin-top:8px;}
.ansline b{color:var(--ink);}
.wrongcard{border-left:4px solid var(--bad);}
.okcard{border-left:4px solid var(--ok);}
.btn-row{display:flex;gap:10px;margin-top:14px;}
.btn-row button{flex:1;padding:14px;border-radius:12px;font-size:15px;font-weight:600;}
.btn-row .p{background:var(--brand);color:#fff;}
.btn-row .s{background:var(--card);border:1px solid var(--line);color:var(--ink);}
details.correctbox{margin-top:8px;}
details.correctbox summary{padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;font-size:14px;font-weight:600;}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--toast-bg);
  color:var(--toast-txt);padding:10px 18px;border-radius:99px;font-size:14px;z-index:20;}