:root{
  --green:#2fae4e; --green-bg:#eafaf0; --red:#e5484d; --red-bg:#fdecec;
  --bg:#f5f6f4; --card:#fff; --border:#e5e7e2; --ink:#1f2328; --muted:#767b74;
  --accent:#2f6f4e; --star:#f0a020;
}
*{box-sizing:border-box;}
html{height:100%;}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex; flex-direction:column;
}
/* 标题和章节栏作为一个整体吸顶。分成两个各自 sticky 的元素时，
   章节栏的 top 偏移必须精确等于 header 高度，而 header 会随窗口宽度
   换行变高，偏移一旦对不上章节栏就会滑到 header 底下不见了。 */
.topbar{position:sticky; top:0; z-index:10; flex-shrink:0; background:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.08);}
header{
  background:linear-gradient(135deg,#2f6f4e,#3f9166); color:#fff;
  padding:14px 16px; position:relative;
}
header h1{font-size:17px; margin:0 0 2px; font-weight:700;}
header .stats{font-size:12px; opacity:.92;}
.savehint{
  position:absolute; right:14px; top:14px; font-size:11.5px;
  background:rgba(255,255,255,.18); padding:3px 9px; border-radius:999px;
  opacity:0; transition:opacity .25s;
}
.savehint.show{opacity:1;}
.savehint.err{background:rgba(229,72,77,.85);}
.tabs{display:flex; gap:6px; overflow-x:auto; padding:10px 12px; background:var(--bg);}
.tab{
  flex-shrink:0; padding:7px 14px; border-radius:999px; font-size:13px; cursor:pointer;
  background:#fff; border:1px solid var(--border); color:#555; white-space:nowrap;
}
.tab.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.toolbar{display:flex; gap:8px; padding:10px 12px; flex-wrap:wrap; align-items:center; background:var(--bg); flex-shrink:0;}
.toolbar input[type=text]{
  flex:1; min-width:140px; padding:9px 12px; border:1px solid var(--border);
  border-radius:10px; font-size:14px; background:#fff;
}
.btn{
  padding:8px 13px; border-radius:10px; border:1px solid var(--border); background:#fff;
  font-size:13px; cursor:pointer; color:#333; white-space:nowrap;
}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.chk{display:flex; align-items:center; gap:5px; font-size:13px; color:#555; white-space:nowrap; cursor:pointer;}
main{flex:1; padding:6px 12px 96px; max-width:760px; margin:0 auto; width:100%;}
.empty{text-align:center; color:var(--muted); padding:60px 10px; font-size:14px;}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:16px; margin:10px 0; box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.qmeta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); margin-bottom:8px;}
.qmeta .pill{background:#eef2ee; padding:2px 8px; border-radius:6px;}
.qmeta .warn{background:#fff2ea; color:#c2410c;}
.qmeta .idx{margin-left:auto; display:flex; align-items:center; gap:8px;}
.starbtn{background:none; border:none; font-size:19px; cursor:pointer; color:#c9cdc7; line-height:1; padding:0;}
.starbtn.on{color:var(--star);}
.stem{font-size:16px; font-weight:600; line-height:1.55; margin-bottom:14px; white-space:pre-wrap;}
.opt{
  display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:10px;
  border:1px solid var(--border); margin-bottom:8px; cursor:pointer; font-size:14.5px; line-height:1.5;
  background:#fff; transition:background .1s;
}
.opt:active{background:#f2f3f0;}
.opt .lab{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1.5px solid #bbb;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:#666;
}
.opt.sel .lab{border-color:var(--accent); color:var(--accent);}
.opt.correct{background:var(--green-bg); border-color:var(--green);}
.opt.correct .lab{background:var(--green); border-color:var(--green); color:#fff;}
.opt.wrong{background:var(--red-bg); border-color:var(--red);}
.opt.wrong .lab{background:var(--red); border-color:var(--red); color:#fff;}
.opt.disabled{cursor:default;}
.noans{font-size:13px; color:#c2410c; background:#fff7ed; border:1px dashed #fdba74; padding:8px 10px; border-radius:8px; margin-top:6px;}
.result{margin-top:10px; font-size:13.5px; padding:9px 11px; border-radius:8px;}
.result.ok{background:var(--green-bg); color:#1c7a3a;}
.result.no{background:var(--red-bg); color:#c02b2b;}
.result .again{margin-left:8px; font-size:12.5px; padding:3px 9px;}
.navbar{
  position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border);
  display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); z-index:10;
  max-width:760px; margin:0 auto;
}
.navbar .btn{flex:1;}
.navbar .prog{flex:2; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; color:#555;}
.navbar .prog .bar{width:100%; height:4px; background:#eceee9; border-radius:2px; margin-top:4px; overflow:hidden;}
.navbar .prog .bar i{display:block; height:100%; background:var(--accent);}
.modal-bg{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:20; align-items:flex-end; justify-content:center;}
.modal-bg.show{display:flex;}
.modal{background:#fff; border-radius:16px 16px 0 0; width:100%; max-width:760px; max-height:82vh; overflow-y:auto; padding:16px;}
.modal h2{font-size:16px; margin:0 0 10px;}
.wrongitem{padding:10px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; font-size:13.5px; cursor:pointer;}
.wrongitem b{color:var(--red);}
.closebtn{float:right; background:none; border:none; font-size:18px; cursor:pointer; color:#999;}
.filebar{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.chtable{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px;}
.chtable th,.chtable td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--border);}
.chtable th{color:var(--muted); font-weight:600;}
.chtable td.num{text-align:right; font-variant-numeric:tabular-nums;}
.note{font-size:12px; color:#999; margin-top:10px; line-height:1.6;}
@media (min-width:640px){ .stem{font-size:17px;} }