/* 管综刷题器 —— 视觉语言沿用英语阅读器：
   白纸底 + 深蓝强调 + 墨红标记；衬线正文配无衬线 UI。 */

:root{
  --paper:#FFFFFF; --paper-2:#F6F7F9; --paper-3:#EEF0F3;
  --ink:#17181B; --ink-soft:#63676E; --ink-faint:#A6AAB1;
  --rule:#E7E9EC; --cur-bg:#E9EFF9;
  --accent:#34527E; --flag:#A8323F; --ok:#2F7D5B;
  --shadow:0 8px 28px rgba(30,35,45,.13);
  --serif:Georgia,"Times New Roman","Songti SC","Noto Serif CJK SC",serif;
  --ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,sans-serif;
  --side-w:300px;
  --r:12px;
}
[data-theme="dark"]{
  --paper:#17181A; --paper-2:#1F2124; --paper-3:#26292E;
  --ink:#E6E7E9; --ink-soft:#95989D; --ink-faint:#666A70;
  --rule:#2F3237; --cur-bg:#222A36;
  --accent:#7FA6DB; --flag:#D98A94; --ok:#6FAE8B;
  --shadow:0 8px 28px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.7 var(--serif);
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
}
button{font-family:var(--ui); cursor:pointer; color:inherit}
[hidden]{display:none !important}
b{font-weight:700}

/* ── 外壳 ─────────────────────────────────────────────── */
#app{display:flex; min-height:100vh}
/* 主区用块级流，不用 flex 列 —— flex 列里的子项会被 flex-shrink 压塌，
   内容一超过一屏高度整块就不见了 */
#main{flex:1; min-width:0}
#side{display:none}

@media (min-width:880px){
  html,body{height:100%; overflow:hidden}
  #app{height:100vh}
  #side{
    display:flex; flex-direction:column; flex:0 0 var(--side-w); width:var(--side-w);
    border-right:1px solid var(--rule); overflow-y:auto; overscroll-behavior:contain;
    background:var(--paper);
  }
  #main{overflow-y:auto}
  .only-narrow{display:none !important}
}

/* ── 左栏 ─────────────────────────────────────────────── */
.side-head{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.5rem;
  padding:.7rem .75rem; background:var(--paper); border-bottom:1px solid var(--rule);
  font-family:var(--ui);
}
.side-head h1{font-size:.9rem; font-weight:600; margin:0; flex:1; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-body{padding:.75rem; flex:1}
.icon-btn{
  border:1px solid var(--rule); background:transparent; color:var(--ink-soft);
  border-radius:8px; min-width:2.1rem; height:2.1rem; padding:0 .5rem; font-size:.85rem;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.icon-btn:active{background:var(--paper-2)}

/* ── 顶栏 ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; padding-top:calc(.6rem + env(safe-area-inset-top));
  background:var(--paper); border-bottom:1px solid var(--rule); font-family:var(--ui);
}
.topbar h1{font-size:1rem; font-weight:600; margin:0; flex:1; letter-spacing:.02em}
.drill-title{flex:1; font-size:.9rem; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drill-pos{font-size:.82rem; color:var(--ink-faint); font-variant-numeric:tabular-nums}

.wrap{max-width:760px; margin:0 auto; padding:1rem .9rem 5rem; width:100%}
@media (min-width:880px){ .wrap{max-width:820px; padding:1.5rem 2rem 5rem} }

/* ── 首页 ─────────────────────────────────────────────── */
.hero{padding:1.1rem 0 1.4rem}
.hero-num{font-family:var(--ui); font-size:2.4rem; font-weight:300; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1}
.hero-num b{font-weight:600}
.hero-num span{font-size:1rem; color:var(--ink-faint)}
.hero-bar{height:5px; border-radius:3px; background:var(--paper-3); margin:.8rem 0 .5rem; overflow:hidden}
.hero-bar i{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .4s}
.hero-sub{font-family:var(--ui); font-size:.8rem; color:var(--ink-soft)}
[data-theme="dark"] .hero-bar{background:#2A2D32}

.big-card{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--paper-2);
  padding:1rem 1.1rem; margin-bottom:1.6rem;
}
.big-card:active{background:var(--paper-3)}
.wrong-card{border-color:color-mix(in srgb,var(--flag) 30%,var(--rule))}
.bc-left{flex:1; min-width:0}
.bc-title{font-family:var(--ui); font-weight:600; font-size:.95rem; margin-bottom:.2rem}
.wrong-card .bc-title{color:var(--flag)}
.bc-desc{font-family:var(--ui); font-size:.78rem; color:var(--ink-soft)}
.bc-right{font-family:var(--ui); color:var(--ink-faint); font-size:1.1rem}

.sec-title{
  font-family:var(--ui); font-size:.78rem; font-weight:600; letter-spacing:.08em;
  color:var(--ink-soft); text-transform:uppercase;
  margin:2rem 0 .7rem; padding-bottom:.5rem; border-bottom:1px solid var(--rule);
}
.sec-hint{font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-faint); margin-left:.4rem}

/* 标签树 */
.tree{font-family:var(--ui)}
.tnode{border-bottom:1px solid var(--rule)}
.tnode:last-child{border-bottom:0}
.trow{
  display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  background:transparent; border:0; padding:.62rem .3rem; border-radius:8px;
}
.trow:active{background:var(--paper-2)}
.trow .tw{flex:0 0 1.1rem; color:var(--ink-faint); font-size:.7rem; text-align:center}
.trow .tn{flex:1; font-size:.88rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trow .tp{font-size:.72rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:0 0 auto}
.trow .tbar{flex:0 0 44px; height:4px; border-radius:2px; background:var(--paper-3); overflow:hidden}
.trow .tbar i{display:block; height:100%; background:var(--accent); opacity:.75}
.trow.lv2 .tn{color:var(--ink-soft); font-size:.84rem}
.trow.lv3 .tn{color:var(--ink-soft); font-size:.8rem; padding-left:.2rem}
.tkids{padding-left:1.1rem}
.tkids[hidden]{display:none}
[data-theme="dark"] .trow .tbar{background:#2A2D32}
.trow.tdone .tp{color:var(--ok)}

/* 年份 */
.year-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.5rem}
.year-btn{
  border:1px solid var(--rule); border-radius:10px; background:transparent;
  padding:.6rem .5rem; font-family:var(--ui); font-size:.82rem; text-align:center;
}
.year-btn:active{background:var(--paper-2)}
.year-btn .yb-prog{display:block; font-size:.68rem; color:var(--ink-faint); margin-top:.15rem;
  font-variant-numeric:tabular-nums}
.year-btn.full .yb-prog{color:var(--ok)}

/* ── 答题 ─────────────────────────────────────────────── */
.q-card{border:1px solid var(--rule); border-radius:var(--r); padding:1.1rem 1.15rem; background:var(--paper)}
.q-meta{font-family:var(--ui); font-size:.72rem; color:var(--ink-faint); margin-bottom:.7rem;
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.q-meta .tag{color:var(--accent)}
.q-stem{font-size:1.02rem; line-height:1.85; word-break:break-word}
.q-stem .katex{font-size:1.02em}
.q-img{margin:.8rem 0 0}
.q-img img{max-width:100%; border-radius:8px; border:1px solid var(--rule); display:block}

.opts{margin-top:1rem; display:flex; flex-direction:column; gap:.45rem}
.opt{
  display:flex; gap:.7rem; align-items:flex-start; width:100%; text-align:left;
  border:1px solid var(--rule); border-radius:10px; background:transparent;
  padding:.68rem .8rem; font-family:var(--serif); font-size:.96rem; line-height:1.65;
  transition:background .12s, border-color .12s;
}
.opt:active{background:var(--paper-2)}
.opt .ol{font-family:var(--ui); font-weight:600; flex:0 0 1.2rem; color:var(--ink-soft)}
.opt.sel{border-color:var(--accent); background:var(--cur-bg)}
.opt.sel .ol{color:var(--accent)}
.opt.right{border-color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,transparent)}
.opt.right .ol{color:var(--ok)}
.opt.wrong{border-color:var(--flag); background:color-mix(in srgb,var(--flag) 9%,transparent)}
.opt.wrong .ol{color:var(--flag)}
.opt[disabled]{cursor:default}
.opt-note{font-family:var(--ui); font-size:.7rem; color:var(--ink-faint); margin-top:.6rem}

.verdict{
  display:flex; align-items:center; gap:.6rem; margin:1rem 0 0;
  font-family:var(--ui); font-size:.9rem; font-weight:600;
}
.verdict.ok{color:var(--ok)}
.verdict.no{color:var(--flag)}
.verdict .vmeta{margin-left:auto; font-weight:400; font-size:.75rem; color:var(--ink-faint)}

.explain{margin-top:1rem; border-left:2px solid var(--rule); padding:.1rem 0 .1rem 1rem}
.explain h3{font-family:var(--ui); font-size:.72rem; font-weight:600; letter-spacing:.08em;
  color:var(--ink-faint); margin:0 0 .5rem; text-transform:uppercase}
#explain-body{font-size:.94rem; line-height:1.85; color:var(--ink-soft); word-break:break-word}

.actions{margin-top:1.6rem; display:flex; flex-direction:column; gap:.6rem}
.btn-primary{
  border:0; border-radius:10px; background:var(--accent); color:#fff;
  font-size:.95rem; font-weight:600; padding:.82rem 1rem; font-family:var(--ui);
}
[data-theme="dark"] .btn-primary{color:#12151A}
.btn-primary:disabled{background:var(--paper-3); color:var(--ink-faint); cursor:default}
[data-theme="dark"] .btn-primary:disabled{background:#26292E; color:#5A5E64}
.btn-ghost{
  border:1px solid var(--rule); border-radius:10px; background:transparent;
  color:var(--ink-soft); font-size:.85rem; padding:.65rem 1rem; font-family:var(--ui);
}

/* ── 答题卡 ───────────────────────────────────────────── */
.sheet-head{display:flex; align-items:baseline; gap:.5rem; font-family:var(--ui);
  font-size:.78rem; color:var(--ink-soft); margin-bottom:.6rem}
.sheet-count{margin-left:auto; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.sheet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:.32rem}
.qc{
  aspect-ratio:1; border:1px solid var(--rule); border-radius:7px; background:transparent;
  font-family:var(--ui); font-size:.72rem; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.qc.right{background:color-mix(in srgb,var(--ok) 14%,transparent); border-color:var(--ok); color:var(--ok)}
.qc.wrong{background:color-mix(in srgb,var(--flag) 13%,transparent); border-color:var(--flag); color:var(--flag)}
.qc.cur{outline:2px solid var(--accent); outline-offset:1px}
.sheet-legend{display:flex; gap:.9rem; align-items:center; margin-top:.9rem;
  font-family:var(--ui); font-size:.7rem; color:var(--ink-faint)}
.lg{display:inline-block; width:9px; height:9px; border-radius:3px; border:1px solid var(--rule); margin-right:.28rem}
.lg-right{background:color-mix(in srgb,var(--ok) 30%,transparent); border-color:var(--ok)}
.lg-wrong{background:color-mix(in srgb,var(--flag) 30%,transparent); border-color:var(--flag)}

/* ── 复盘 ─────────────────────────────────────────────── */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1rem}
.stat{border:1px solid var(--rule); border-radius:10px; padding:.7rem .8rem; font-family:var(--ui)}
.stat .sv{font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums}
.stat .sl{font-size:.7rem; color:var(--ink-soft); margin-top:.15rem}
.rv-list{display:flex; flex-direction:column; gap:.4rem}
.rv-item{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  border:1px solid var(--rule); border-radius:10px; background:transparent;
  padding:.6rem .75rem; font-family:var(--ui); font-size:.82rem;
}
.rv-item .ri-id{font-variant-numeric:tabular-nums; color:var(--ink-faint); flex:0 0 auto}
.rv-item .ri-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--serif); font-size:.88rem}
.rv-item .ri-ms{color:var(--ink-faint); font-size:.72rem; font-variant-numeric:tabular-nums}
.rv-item.r-wrong{border-color:color-mix(in srgb,var(--flag) 32%,var(--rule))}
.rv-item.r-right{border-color:color-mix(in srgb,var(--ok) 25%,var(--rule))}

/* ── 窄屏抽屉 ─────────────────────────────────────────── */
#sheet-drawer{position:fixed; inset:0; z-index:60}
.drawer-mask{position:absolute; inset:0; background:rgba(15,18,22,.4)}
.drawer-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:70vh; overflow-y:auto;
  background:var(--paper); border-radius:16px 16px 0 0; padding:1rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  box-shadow:var(--shadow);
}

/* ── toast ────────────────────────────────────────────── */
#toast{
  position:fixed; left:50%; bottom:2rem; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); font-family:var(--ui); font-size:.82rem;
  padding:.55rem 1rem; border-radius:999px; z-index:80; max-width:80vw; text-align:center;
}
[data-theme="dark"] #toast{background:#3A3E44; color:#E6E7E9}

/* ── 空态 ─────────────────────────────────────────────── */
.empty{
  border:1px dashed var(--rule); border-radius:var(--r); padding:1.4rem 1.1rem;
  color:var(--ink-soft); font-family:var(--ui); font-size:.82rem; line-height:1.9;
}
.empty code{background:var(--paper-2); padding:.15em .4em; border-radius:4px;
  font-size:.85em; color:var(--accent)}