:root{
  --bg:#fbfaf7; --paper:#fff; --ink:#1a1a1a; --ink-soft:#3d4450; --muted:#6b7280;
  --line:#e3e5e8; --line-strong:#d3d6db; --accent:#0f4c81; --accent-soft:#eaf1f8;
  --good:#2f7d5d; --bad:#b3261e; --radius:12px;
  --serif:Georgia,"Times New Roman","Songti SC",serif;
  --sans:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 顶栏 */
.topbar{
  flex:none; height:56px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 18px; background:var(--paper); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-mark{
  width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font:700 15px/1 Georgia,serif;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15; font-weight:600; font-size:14px}
.brand-text em{font-style:normal; font-weight:400; font-size:11.5px; color:var(--muted); letter-spacing:.02em}
.topbar-right{display:flex; align-items:center; gap:10px}
.timer{
  font-family:var(--mono); font-size:14px; color:var(--ink-soft); cursor:pointer;
  padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
  user-select:none;
}
.timer.running{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.timer.low{color:var(--bad); border-color:#e8c9c6; background:#fdf3f2}
.ghost{
  font:inherit; font-size:12.5px; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:8px; padding:6px 11px; cursor:pointer;
}
.ghost:hover{border-color:var(--line-strong); color:var(--ink)}

/* 主体两栏 */
.stage{
  flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:14px; padding:14px;
}
.panel{
  min-height:0; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.panel-head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.tabs{display:flex; gap:4px}
.tabs button{
  font:inherit; font-size:12px; color:var(--muted); background:transparent; cursor:pointer;
  border:1px solid transparent; border-radius:7px; padding:4px 9px; font-variant-numeric:tabular-nums;
}
.tabs button:hover{color:var(--ink); background:var(--bg)}
.tabs button.on{color:var(--accent); background:var(--accent-soft); border-color:#d6e4f2}
.filled{font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

.paper-scroll, .sheet-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}
.paper-scroll{background:#f4f2ee; padding:16px; text-align:center}
.paper-page{max-width:820px; margin:0 auto 14px}
.paper-page:last-child{margin-bottom:0}
.paper-page img{
  width:100%; height:auto; display:block; border-radius:8px;
  box-shadow:0 6px 24px rgba(20,25,40,.10); background:#fff;
}
.sheet-scroll{padding:10px 14px 4px}

/* 答题卡 */
.grp{margin-bottom:14px}
.grp-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px; display:flex; align-items:center; gap:8px;
}
.grp-title::after{content:""; flex:1; height:1px; background:var(--line)}
.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px}
.cell{display:flex; align-items:center; gap:7px}
.cell span{
  width:22px; text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--muted);
  flex:none; font-variant-numeric:tabular-nums;
}
.cell input{
  flex:1; min-width:0; font:inherit; font-size:13px; color:var(--ink);
  padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--paper);
  transition:border-color .15s ease, background .15s ease;
}
.cell input:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft)}
.cell input.filled{border-color:#c9d6e4; background:#fbfdff}
.hint{
  flex:none; margin:0; padding:10px 16px 12px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.5;
}

/* 播放条 */
.player{
  flex:none; display:flex; align-items:center; gap:12px; padding:10px 18px;
  background:var(--paper); border-top:1px solid var(--line);
}
.icon{
  font:inherit; font-size:13px; color:var(--ink); background:var(--paper); cursor:pointer;
  border:1px solid var(--line); border-radius:8px; height:34px; min-width:44px; padding:0 10px;
}
.icon:hover{border-color:var(--line-strong)}
#play{background:var(--accent); border-color:var(--accent); color:#fff; width:44px; font-size:14px}
.track{
  flex:1; height:6px; border-radius:999px; background:var(--line); cursor:pointer; position:relative;
}
.track-fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--accent); border-radius:999px}
.time{font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:96px; text-align:right}
.speed{display:flex; gap:2px}
.speed button{
  font:inherit; font-size:11.5px; color:var(--muted); background:transparent; cursor:pointer;
  border:1px solid transparent; border-radius:6px; padding:4px 7px;
}
.speed button.on{color:var(--accent); background:var(--accent-soft); border-color:#d6e4f2}

@media (max-width:900px){
  body{height:auto; overflow:visible; display:block}
  .stage{display:block; padding:10px}
  .panel{height:auto; margin-bottom:10px}
  .paper-scroll{max-height:60vh}
  .sheet-scroll{max-height:none}
  .player{position:sticky; bottom:0; flex-wrap:wrap; gap:8px; padding:8px 12px}
  .time{min-width:auto}
  .speed{order:5}
}