/* ===========================================================================
   刷题系统 — Classical design system
   Tokens transcribed from 刷题系统.dc.html (Claude Design project 0cbe835c).
   Color is applied as stroke, never as fill; hairlines carry the structure.
   =========================================================================== */

:root {
  --bg: #f3f2f2;
  --canvas: #dcd9d6;
  --ink: #201f1d;
  --muted: #605d5d;
  --muted-2: #7d7979;
  --muted-3: #9b9797;
  --accent: #b68235;
  --accent-deep: #7d5411;
  --tint: #fff3e4;
  --tint-strong: #ffe3bf;
  --hairline: rgba(32, 31, 29, 0.16);
  --hairline-soft: rgba(32, 31, 29, 0.08);
  --hairline-strong: rgba(32, 31, 29, 0.4);
  --scrim: rgba(32, 31, 29, 0.66);

  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 7px;
  --shadow: 0 12px 32px rgba(45, 43, 43, 0.22);

  /* Cormorant Garamond and Lora carry no CJK glyphs — the fallbacks are named
     explicitly so Chinese lands on a matching serif rather than a system sans. */
  --font-heading: 'Cormorant Garamond', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', Georgia, serif;
  --font-body: 'Lora', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  /* 单页不滚动 — the page itself never scrolls, only panes inside it do. */
  overflow: hidden;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: #ae1800; }
a:hover { color: #7c1405; }

::selection { background: var(--tint-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #bab6b6; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tnum { font-variant-numeric: tabular-nums; }
.kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.figure {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* --- shell ---------------------------------------------------------------- */

.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 auto;
  max-width: 1600px;
}

@media (min-width: 1081px) {
  body { padding: 16px; }
  .app { height: calc(100dvh - 32px); }
}

/* --- top bar -------------------------------------------------------------- */

.topbar {
  flex: none;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 30px;
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; }

.banks { display: flex; align-items: baseline; gap: 10px; }

.bank-btn {
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted-3);
  border-bottom: 1px solid transparent;
  transition: color 0.12s;
}
.bank-btn:hover { color: var(--accent-deep); }
.bank-btn.is-on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.bank-sep { color: var(--hairline-strong); font-size: 20px; }

.brand-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the phone header carries 正确率 · 已做题数 instead of the year kicker */
.mobile-stat { display: none; }
.bank-short { display: none; }

.topbar-actions { display: flex; gap: 9px; align-items: center; flex: none; }

/* --- outlined controls (the design's modeOn / modeOff) -------------------- */

.chip {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip.is-on {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent-deep);
}
.chip--sm { height: 34px; padding: 0 14px; }

.link-btn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  font-size: 13px;
  border-radius: var(--radius);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent-deep); }

.btn-outline {
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-deep);
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.btn-outline:hover { background: var(--tint); }

.btn-primary {
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  background: var(--tint);
  color: var(--accent-deep);
  font-size: 14px;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.btn-primary:hover { background: var(--tint-strong); }

.btn-quiet {
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  border-radius: var(--radius);
  transition: border-color 0.12s, color 0.12s;
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent-deep); }

.input {
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  border-radius: var(--radius);
  outline: none;
}
.input:focus-visible { border-color: var(--accent); }

.select {
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
.select:hover { border-color: var(--accent); }

/* --- body grid ------------------------------------------------------------ */

.body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 308px 1fr;
}

.side {
  border-right: 1px solid var(--hairline);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
}

.side-label { margin-bottom: 12px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* 模考设置 */
.settings { display: flex; gap: 16px; align-items: center; }
.settings .field { display: flex; align-items: center; gap: 7px; }
.settings label { font-size: 12px; color: var(--muted-2); }

.last-exam {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* stats */
.stats {
  display: flex;
  gap: 26px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
}
.stats-div { width: 1px; background: var(--hairline); }
.stats .figure { font-size: 38px; }
.stats .figure--accent { color: var(--accent-deep); }
.stats-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* 板块掌握程度 */
.parts-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.parts {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}

.part {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.part-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 6px;
}
.part-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s;
}
.part-count { color: var(--muted-2); font-variant-numeric: tabular-nums; flex: none; }
.part-rule { height: 1px; background: var(--hairline); position: relative; }
.part-fill {
  position: absolute;
  left: 0; top: -1px;
  height: 3px;
  background: var(--accent);
}
.part:hover .part-name { color: var(--accent-deep); }
.part.is-on .part-name { color: var(--accent-deep); font-style: italic; }
.part.is-on .part-rule { background: var(--tint-strong); }

/* 答题卡 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
}
.card-cell {
  height: 23px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted-2);
  font-size: 11px;
  border-radius: var(--radius-sm);
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.card-cell:hover { border-color: var(--accent); }
.card-cell.is-answered {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent-deep);
}
.card-cell.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: #f8f4f4;
}

.exam-head {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.exam-head .figure { font-size: 38px; color: var(--accent-deep); }
.exam-answered { font-size: 13px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.legend {
  flex: none;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted-2);
  font-style: italic;
}

/* --- question pane -------------------------------------------------------- */

.pane {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.qhead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.qhead-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }

.tag {
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.tag--accent { border-color: var(--accent); color: var(--accent-deep); letter-spacing: 0.1em; }
.tag--part {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qid { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.qhead-pos { display: flex; align-items: center; gap: 14px; flex: none; }
.pos { font-size: 13px; font-variant-numeric: tabular-nums; }
.rule { width: 180px; height: 1px; background: var(--hairline); position: relative; }
.rule-fill { position: absolute; left: 0; top: -1px; height: 3px; background: var(--accent); }

.stem-wrap {
  flex: none;
  border-top: 1px solid var(--hairline);
  margin-top: 20px;
  padding-top: 22px;
}

/* 只有无法恢复具体选项的老记录才使用这一行灰注。 */
.history {
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted-2);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.stem {
  font-size: 20px;
  line-height: 1.7;
  text-align: justify;
  text-wrap: pretty;
  /* The design clamps at 180px; a real study page scrolls rather than truncates. */
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-line;
}

.options {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-right: 2px;
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 13px 17px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius);
  flex: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.opt:hover { border-color: var(--accent); }

.opt-key {
  flex: none;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.opt-text { font-size: 15px; line-height: 1.65; flex: 1; }
.opt-mark { flex: none; font-size: 15px; color: var(--accent-deep); width: 14px; text-align: right; }

/* option states — mirror TC.sel / ok / bad / dim */
.opt--sel { border-color: var(--accent); background: var(--tint); }
.opt--sel .opt-key { border-color: var(--accent); background: var(--tint); color: var(--accent-deep); }

.opt--ok { border-color: var(--accent); background: var(--tint); }
.opt--ok .opt-key { border-color: var(--accent); background: var(--tint-strong); color: var(--accent-deep); }

.opt--bad { color: var(--muted-3); }
.opt--bad .opt-key { color: var(--muted-3); }

.opt--dim { color: var(--muted-2); border-color: var(--hairline-soft); }
.opt--dim .opt-key { color: var(--muted-3); border-color: var(--hairline-soft); }

.opt.is-locked { cursor: default; }
.opt.is-locked:hover { border-color: inherit; }
.opt--sel.is-locked:hover, .opt--ok.is-locked:hover { border-color: var(--accent); }

/* 简答题 背诵卡 */
.recall {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recall-answer {
  border: 1px solid var(--accent);
  background: var(--tint);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.recall-answer .kicker { color: var(--accent-deep); margin-bottom: 8px; }
.recall-text {
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
  white-space: pre-line;
}
.recall-hint {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.8;
}

/* --- reveal row + nav ----------------------------------------------------- */

.qfoot {
  flex: none;
  margin-top: 20px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.verdict-zone {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.verdict-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.verdict {
  border: 1px solid var(--hairline-strong);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 7px 13px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.verdict--ok { border-color: var(--accent); color: var(--accent-deep); }
.answer-line { font-size: 14px; }
.answer-line em { font-style: normal; color: var(--accent-deep); }
.my-answer { font-size: 13px; color: var(--muted-2); font-style: italic; }

.basis {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted-2);
  font-style: italic;
  max-height: 92px;
  overflow-y: auto;
  white-space: pre-line;
  border-left: 1px solid var(--hairline);
  padding-left: 12px;
}

.nav-zone { display: flex; align-items: center; gap: 9px; flex: none; }
.jump { width: 72px; }

.recall-actions { display: flex; align-items: center; gap: 9px; }
.btn-retry-answer { align-self: flex-start; }

/* --- empty state ---------------------------------------------------------- */

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.empty-title { font-family: var(--font-heading); font-size: 34px; }
.empty-body {
  font-size: 15px;
  color: var(--muted);
  max-width: 430px;
  line-height: 1.7;
  text-align: justify;
}

/* --- result dialog -------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}

.dialog {
  width: 560px;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow);
}
.score-row { display: flex; align-items: flex-end; gap: 14px; margin: 12px 0 24px; }
.score {
  font-family: var(--font-heading);
  font-size: 82px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.score-of { font-size: 15px; color: var(--muted-2); padding-bottom: 10px; }
.score-stats {
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}
.score-stats .figure { font-size: 30px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.dialog-actions button { height: 46px; padding: 0 20px; white-space: nowrap; }
.dialog-actions .link-btn { height: 46px; }

/* 最近成绩 */
.past { margin-top: 22px; }
.past .kicker { margin-bottom: 10px; }
.past-list { display: flex; flex-direction: column; }
.past-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}
.past-when { color: var(--muted-2); }
.past-score { color: var(--accent-deep); }
.past-sec { color: var(--muted-2); }

/* --- 工号与同步 ----------------------------------------------------------- */

.identity-btn { display: inline-flex; align-items: center; gap: 8px; }

.side-reset { display: none; }

.sync-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--muted-3);
  background: transparent;
  flex: none;
}
.sync-dot--ok { border-color: var(--accent); background: var(--accent); }
.sync-dot--syncing { border-color: var(--accent); background: var(--tint-strong); }
.sync-dot--pending { border-color: var(--accent); background: transparent; }
.sync-dot--error { border-color: #ae1800; background: #ae1800; }
.sync-dot--off { border-color: var(--muted-3); background: transparent; }

.dialog--sm { width: 440px; }

.field-block { margin: 16px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.field-block label { font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2); }
.field-block .input { width: 100%; }

.sync-info {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  font-style: italic;
  white-space: pre-line;
  border-left: 1px solid var(--hairline);
  padding-left: 12px;
}
.sync-info--error { color: #ae1800; border-left-color: #ae1800; }

/* --- exam strip (mobile) + drawer toggle --------------------------------- */

.exam-strip { display: none; }
.side-toggle { display: none; }

/* --- hidden helper -------------------------------------------------------- */

[hidden] { display: none !important; }

/* ===========================================================================
   Mobile — the design's 390×844 frame (section 1a-m)
   =========================================================================== */

@media (max-width: 1080px) {
  .app {
    border: 0;
    border-radius: 0;
    max-width: none;
  }

  .topbar {
    height: auto;
    min-height: 58px;
    padding: 10px 16px;
    gap: 10px;
  }
  .brand { flex: 1; min-width: 0; gap: 8px; align-items: center; overflow: hidden; }
  .banks { gap: 8px; min-width: 0; }
  .bank-btn { font-size: 17px; white-space: nowrap; }
  .bank-sep { display: inline; font-size: 15px; }
  .bank-full { display: none; }
  .bank-short { display: inline; }
  .brand-meta { display: none; }
  .mobile-stat {
    display: inline;
    font-size: 12px;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .topbar-actions { gap: 6px; }
  .topbar-actions .modes { display: none; }
  .side-toggle {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    border-radius: var(--radius);
  }
  .side-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }

  .body { display: flex; flex-direction: column; min-height: 0; }

  /* the sidebar becomes a slide-over sheet */
  .side {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 88vw);
    background: var(--bg);
    border-left: 1px solid var(--hairline);
    border-right: 0;
    box-shadow: var(--shadow);
    z-index: 30;
    transform: translateX(100%);
    transition: transform 0.18s ease;
    padding: 20px;
    overflow-y: auto;
  }
  .app.side-open .side { transform: translateX(0); }
  .side-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 25;
  }
  .side-close {
    align-self: flex-end;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--muted);
    border-radius: var(--radius);
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
  .parts { max-height: 340px; }

  /* the mobile frame keeps the mode + type rows at the top of the page */
  .mobile-filters {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 16px 11px;
    border-bottom: 1px solid var(--hairline);
  }
  .mobile-filters .chip-row { flex-wrap: nowrap; gap: 8px; }
  .mobile-filters .chip {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 6px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .exam-strip {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    height: 42px;
    background: var(--tint);
    border-bottom: 1px solid var(--accent);
  }
  .exam-strip span {
    font-size: 13px;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
  }
  .exam-strip button {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent-deep);
    font-size: 12px;
    border-radius: var(--radius);
  }

  /* 手机上放弃桌面那套「题干 / 选项 / 依据各开一个小滚动窗」的分栏：
     390 宽的屏幕上每个窗只剩几十像素高，错题本尤其糟 —— 判定和依据一展开，
     选项就被挤成两行半。这里把整块题目还原成一条自然滚动流，
     只把上/下一题钉在底部，随时够得着。 */
  .pane { padding: 0; flex: 1; min-height: 0; overflow: hidden; }
  #question {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* 底部留出固定导航条的高度 */
    padding: 16px 16px calc(84px + env(safe-area-inset-bottom));
  }
  .qhead-pos .rule { display: none; }
  .stem-wrap { margin-top: 14px; padding-top: 16px; }
  .stem { font-size: 16px; max-height: none; overflow: visible; }
  .options {
    flex: none;
    min-height: 0;
    overflow: visible;
    margin-top: 16px;
    gap: 9px;
    padding-right: 0;
  }
  .recall { flex: none; min-height: 0; overflow: visible; }
  .basis { max-height: none; overflow: visible; }
  .opt { min-height: 48px; padding: 11px 13px; gap: 13px; }
  .opt-key { width: 24px; height: 24px; font-size: 14px; }
  .opt-text { font-size: 14px; line-height: 1.6; }
  .tag--part { max-width: 150px; }
  .qid { display: none; }

  .qfoot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
  }
  .verdict-zone { min-height: 0; }
  /* 上/下一题脱离滚动流固定在屏幕底边 —— 题目再长也一直够得着。
     z-index 压在抽屉(30)和弹窗(20)之下。 */
  .nav-zone {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    justify-content: space-between;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--hairline);
  }
  .nav-zone .jump { display: none; }
  .nav-zone .btn-quiet { width: 112px; height: 48px; }
  .nav-zone .btn-primary { flex: 1; height: 48px; font-size: 15px; }
  .btn-submit-answer, .btn-retry-answer { width: 100%; height: 48px; }

  .empty { padding: 24px 16px; }
  .empty-title { font-size: 26px; }
  .empty-body { font-size: 14px; }

  .dialog { padding: 24px; max-height: 88dvh; overflow-y: auto; }
  .dialog--sm { width: 100%; }
  .score { font-size: 62px; }
  .score-stats { gap: 18px; font-size: 13px; }
  .score-stats .figure { font-size: 24px; }
  /* 按内容定宽再伸展，装不下就换行 —— 不能用 flex:1 硬挤，
     否则 4 个按钮的弹窗会把「保存并同步」竖着断成一列 */
  .dialog-actions { gap: 8px; }
  .dialog-actions button { flex: 1 1 auto; padding: 0 14px; }
  .past { margin-top: 16px; }

  /* 390px 的顶栏装不下 5 样东西。让掉两样：
     工号只留状态点（点开弹窗里有完整工号），清空挪进抽屉。 */
  .identity-btn {
    padding: 0;
    height: 34px;
    min-width: 40px;
    justify-content: center;
    gap: 0;
  }
  #identityLabel { display: none; }
  .topbar-actions #btnReset { display: none; }
  .side-reset {
    display: block;
    align-self: flex-start;
    padding: 0;
    margin-top: 4px;
    height: auto;
  }
}

@media (min-width: 1081px) {
  .mobile-filters { display: none; }
  .side-scrim { display: none; }
  .side-close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}