:root {
  --bg: #ffffff;
  --bg-2: #f7f6f3;
  --bg-3: #efeee9;
  --text: #1c1c1a;
  --text-2: #6b6a64;
  --text-3: #9c9b94;
  --border: rgba(0,0,0,0.11);
  --border-2: rgba(0,0,0,0.22);
  --accent: #0f6e56;
  --accent-bg: #e1f5ee;
  --ok: #0f6e56;
  --ok-bg: #e1f5ee;
  --wrong: #a32d2d;
  --wrong-bg: #fcebeb;
  --warn-bg: #faeeda;
  --warn: #854f0b;
  --radius: 12px;
  --read-size: 17px;
  --ink: #1a1a1a;
  /* 选中的那一句。正文底色是 --bg-2（不是纯白），所以这个绿必须够深，
     否则「我选的是哪一句」根本看不出来。 */
  --hl: rgba(15,110,86,0.26);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191917;
    --bg-2: #232321;
    --bg-3: #2d2d2a;
    --text: #eceae6;
    --text-2: #a6a49d;
    --text-3: #76746e;
    --border: rgba(255,255,255,0.12);
    --border-2: rgba(255,255,255,0.24);
    --accent: #5dcaa5;
    --accent-bg: #10352a;
    --ok: #5dcaa5;
    --ok-bg: #10352a;
    --wrong: #f09595;
    --wrong-bg: #3a1c1c;
    --warn-bg: #3a2e12;
    --warn: #fac775;
    --ink: #f2f0ec;
    --hl: rgba(93,202,165,0.26);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
}

.brand { font-size: 16px; font-weight: 500; letter-spacing: 0.2px; }

.tabs { display: flex; gap: 4px; background: var(--bg-3); border-radius: 9px; padding: 3px; }

.tab {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--text-2);
  transition: background .15s, color .15s;
}

.tab.is-on { background: var(--bg); color: var(--text); font-weight: 500; }

/* ---------- layout ---------- */

main { max-width: 900px; margin: 0 auto; padding: 20px 20px 80px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head > div:first-child { min-width: 0; }
.page-head .btn { flex: none; }
.page-title { font-size: 22px; font-weight: 500; margin: 0; }
.page-sub { font-size: 13px; color: var(--text-2); margin: 4px 0 0; }

.card {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.card + .card { margin-top: 12px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-3);
  color: var(--text);
  transition: opacity .15s;
}

.btn:active { opacity: .6; }

.btn.primary { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #06231b; } }

.btn.ghost { background: transparent; border: 0.5px solid var(--border-2); }
.btn.sm { min-height: 36px; padding: 0 13px; font-size: 13px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- library ---------- */

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-2);
}
.empty h3 { font-size: 16px; font-weight: 500; color: var(--text); margin: 0 0 8px; }
.empty p { margin: 0 0 20px; font-size: 14px; }

.paper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.paper-row:active { background: var(--bg-3); }
.paper-main { flex: 1; min-width: 0; }
.paper-title { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.paper-meta { font-size: 13px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--bg-3);
  color: var(--text-2);
}
.chip.done { background: var(--ok-bg); color: var(--ok); }
.chip.todo { background: var(--warn-bg); color: var(--warn); }
.chip.builtin { background: var(--accent-bg); color: var(--accent); }

/* ---------- library 分区 ---------- */

.sec-label {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: .04em;
  margin: 20px 2px 8px;
}
.sec-label:first-of-type { margin-top: 10px; }

/* ---------- 题库：两层筛选（先题型，再年份） ---------- */

.cat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 15px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  text-align: left;
  transition: background .15s, border-color .15s;
}
.cat-card:active { opacity: .7; }
.cat-card.is-on { border-color: var(--accent); background: var(--accent-bg); }
.cat-card[disabled] { opacity: .4; pointer-events: none; }

.cat-name { font-size: 15px; font-weight: 500; color: var(--text); }
.cat-card.is-on .cat-name { color: var(--accent); }
.cat-note { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.cat-count { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cat-card.is-on .cat-count { color: var(--accent); }

.year-row { display: flex; flex-wrap: wrap; gap: 7px; }

.year-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  transition: background .15s, border-color .15s;
}
.year-chip:active { opacity: .7; }
.year-chip.is-on { border-color: var(--accent); background: var(--accent-bg); }
.yc-y { font-size: 14px; font-weight: 500; color: var(--text); }
.year-chip.is-on .yc-y { color: var(--accent); }
.yc-d { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.year-chip.is-done .yc-d { color: var(--ok); }
.year-chip.is-on .yc-d { color: var(--accent); }

/* ---------- 新题型：共享备选项（A–G 长句只列一次） ---------- */

.choices-card {
  margin-top: 14px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 14px 16px;
}

.choices-hd {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: .03em;
  margin-bottom: 8px;
}

.choice-item {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.7;
}
.choice-item + .choice-item { border-top: 0.5px dashed var(--border); }

.choice-key {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--text-2);
}
.choice-tx { flex: 1; min-width: 0; }
.choice-item.is-answer .choice-key { background: var(--ok); color: #fff; }
.choice-item.is-answer .choice-tx { color: var(--text); }

/* 共享备选项时，每题只画字母按钮 */
.key-row { display: flex; flex-wrap: wrap; gap: 8px; }

.key-btn {
  width: 46px;
  min-height: 44px;
  border-radius: 10px;
  border: 0.5px solid var(--border-2);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.key-btn:active { opacity: .7; }
.key-btn.picked { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.key-btn.right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.key-btn.bad { border-color: var(--wrong); background: var(--wrong-bg); color: var(--wrong); }

/* ---------- 导入预览 ---------- */

.imp-row {
  border-top: 0.5px solid var(--border);
  padding: 12px 0 10px;
}
.imp-row:first-of-type { border-top: 0; }
.imp-pick { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.imp-pick input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.imp-title { font-size: 15px; font-weight: 500; }
.imp-meta { font-size: 12px; color: var(--text-2); margin: 5px 0 0 27px; }
.imp-snip {
  font-size: 12px;
  color: var(--text-2);
  margin: 4px 0 0 27px;
  line-height: 1.55;
  opacity: .85;
}

/* ---------- import ---------- */

textarea.input {
  width: 100%;
  min-height: 240px;
  padding: 14px;
  border-radius: 10px;
  border: 0.5px solid var(--border-2);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
}

textarea.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }

.upload-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 18px;
  border: 1.5px dashed var(--border-2);
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
  transition: background .15s, border-color .15s;
}
.upload-zone:active { background: var(--bg-3); border-color: var(--accent); }
.uz-main { font-size: 15px; font-weight: 500; }
.uz-sub { font-size: 12px; color: var(--text-2); line-height: 1.6; }

input.text, select.text {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 0.5px solid var(--border-2);
  background: var(--bg);
  color: var(--text);
}

select.text { -webkit-appearance: none; appearance: none; padding-right: 34px; }

.hint {
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-3);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.7;
}
.hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.preview-q { border-top: 0.5px solid var(--border); padding-top: 12px; margin-top: 12px; font-size: 14px; }
.preview-q .opt { color: var(--text-2); font-size: 13px; }
.preview-q .ans { color: var(--accent); font-size: 13px; }

/* ---------- practice ---------- */

.steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-3);
}
.step:active { opacity: .6; }

.step.is-on { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.step.is-done { color: var(--text-2); }

.step-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  background: var(--bg);
  color: inherit;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.toolbar .spacer { flex: 1; }

.reading-wrap {
  position: relative;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}

/* 右侧快速选句栏：一列句子编号，点一下滚到那句并打开解析。
   放在 .reading 外面，所以正文滚动时它不动。 */
.sent-rail {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 44px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
  overflow-y: auto;
  background: var(--bg-3);
  border-left: 0.5px solid var(--border);
  z-index: 6;                 /* 高于 .ink-layer(5)，开手写时仍然点得到 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sent-rail::-webkit-scrollbar { display: none; }

.rail-btn {
  flex: none;
  width: 100%;
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.rail-btn:hover { background: var(--bg-2); color: var(--text-2); }
.rail-btn.is-on {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

.reading-wrap.has-rail .reading { padding-right: 60px; }

.reading {
  padding: 22px 22px 26px;
  font-size: var(--read-size);
  line-height: 1.95;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  color: var(--text);
  overflow-y: auto;
  max-height: 58vh;
  -webkit-overflow-scrolling: touch;
  /* 关掉系统选中：否则点一下词会把整段涂成高亮（iOS 上尤其明显） */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.reading p { margin: 0 0 1.1em; }
.reading p:last-child { margin-bottom: 0; }

.ink-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  touch-action: none;
  display: none;
}
.ink-layer.is-on { display: block; }

.word {
  border-radius: 3px;
  padding: 1px 0;
  cursor: pointer;
  transition: background .12s;
}
.word.known { background: var(--warn-bg); box-shadow: inset 0 -1px 0 var(--warn); }
.word.sel { background: var(--accent-bg); box-shadow: inset 0 -2px 0 var(--accent); }

/* 选中的句子。悬停右侧编号时先亮这一句（预览），点开解析后还是它。
   两处共用 --hl，视觉上是一件事。 */
.sent { border-radius: 4px; }
.sent.sel { background: var(--hl); }

/* ---------- AI 面板 ---------- */

.ai-card {
  border: 0.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 14px;
  font-size: 14px;
  line-height: 1.75;
}

.ai-wait { display: flex; align-items: center; gap: 9px; color: var(--text-2); }
.ai-err { color: var(--wrong); background: var(--wrong-bg); border-color: transparent; }
/* 「这条没收录」是覆盖范围的边界，不是错误 —— 用中性色，别做成红色警告 */
.ai-miss { color: var(--text-2); }
.ai-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }

.ai-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  display: inline-block; flex: none;
  animation: aiPulse 1.1s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.ai-row { display: flex; gap: 10px; }
.ai-row + .ai-row { margin-top: 11px; padding-top: 11px; border-top: 0.5px solid var(--border); }
.ai-lb { flex: none; width: 60px; font-size: 12px; color: var(--text-3); padding-top: 3px; }
.ai-tx { flex: 1; min-width: 0; color: var(--text); }
.ai-note { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.6; }

.clause { padding: 8px 0; }
.clause:first-child { padding-top: 0; }
.clause + .clause { border-top: 0.5px dashed var(--border); }
.clause-type {
  display: inline-block;
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  margin-bottom: 5px;
}
.clause-tx { font-family: Georgia, "Times New Roman", serif; }

.colloc { padding: 2px 0; }
.colloc b { color: var(--accent); font-weight: 500; }

.lemma-chip {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  vertical-align: middle;
}

.ph { font-size: 13px; color: var(--text-2); margin-right: 10px; }
.pos { font-size: 13px; color: var(--text-2); }
/* 词条标题下那一行：音标 · 词性 · 在不在生词本。后两项挨着写，
   没音标/词性时（还没取到离线词条）「在不在生词本」要顶格。 */
.vs { font-size: 13px; color: var(--text-2); }
.ph + .vs, .pos + .vs { margin-left: 10px; }

.sheet-sent {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg-2);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
}

.ai-state { font-size: 13px; border-radius: 10px; padding: 10px 13px; margin-top: 12px; line-height: 1.6; }
.ai-state.ok { background: var(--ok-bg); color: var(--ok); }
.ai-state.no { background: var(--warn-bg); color: var(--warn); }

.btn.ai-ok { color: var(--accent); border-color: var(--accent); }

/* ---------- questions ---------- */

.q-block {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 12px;
}

.q-stem { font-size: 15px; line-height: 1.7; margin-bottom: 12px; display: flex; gap: 10px; }
.q-no { color: var(--text-3); font-weight: 500; flex: none; }

.opts { display: flex; flex-direction: column; gap: 8px; }

.opt-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 0.5px solid var(--border);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.opt-row:active { opacity: .7; }

.opt-key {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--text-2);
}

.opt-row.picked { border-color: var(--accent); background: var(--accent-bg); }
.opt-row.picked .opt-key { background: var(--accent); color: #fff; }

.opt-row.right { border-color: var(--ok); background: var(--ok-bg); }
.opt-row.right .opt-key { background: var(--ok); color: #fff; }
.opt-row.bad { border-color: var(--wrong); background: var(--wrong-bg); }
.opt-row.bad .opt-key { background: var(--wrong); color: #fff; }

.q-verdict { font-size: 13px; font-weight: 500; margin-left: 8px; }
.q-verdict.right { color: var(--ok); }
.q-verdict.bad { color: var(--wrong); }

.q-note {
  margin-top: 12px;
  border-top: 0.5px solid var(--border);
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

.q-note .lbl {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}

.q-note .body { color: var(--text); white-space: pre-wrap; }
.q-note + .q-note { margin-top: 10px; }

.type-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--accent-bg);
  color: var(--accent);
  margin-bottom: 10px;
}

/* ---------- sheet ---------- */

.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 50;
}

.sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(560px, 100%);
  max-height: 78vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  padding: 20px 20px calc(28px + env(safe-area-inset-bottom));
  z-index: 51;
  border: 0.5px solid var(--border);
  border-bottom: none;
  -webkit-overflow-scrolling: touch;
}

.sheet-title { font-size: 17px; font-weight: 500; margin: 0 0 4px; }
.sheet-sub { font-size: 13px; color: var(--text-2); margin: 0 0 16px; }

.actions { display: flex; gap: 10px; margin-top: 18px; }
.actions .btn { flex: 1; }

/* ---------- mine ---------- */

.seg {
  display: flex;
  gap: 4px;
  background: var(--bg-3);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }

.seg button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
}
.seg button.is-on { background: var(--bg); color: var(--text); font-weight: 500; }

.list-item {
  padding: 14px 16px;
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.list-item .li-main { font-size: 15px; line-height: 1.65; }
.list-item .li-sub { font-size: 13px; color: var(--text-2); margin-top: 5px; white-space: pre-wrap; }
.list-item .li-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 12px; color: var(--text-3); gap: 10px; }

.link { color: var(--accent); font-size: 13px; background: none; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
  max-width: 84vw;
  text-align: center;
}

.toast.is-on { opacity: .95; transform: translateX(-50%) translateY(0); }

/* ---------- misc ---------- */

.row { display: flex; gap: 10px; align-items: center; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt20 { margin-top: 20px; }
.muted { color: var(--text-2); font-size: 13px; }

/* ---------- 精读里的题目区 ---------- */

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sec-title { font-size: 16px; font-weight: 500; margin: 0; }
.sec-head .muted { font-size: 13px; }

.q-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.q-head .type-chip { margin-bottom: 0; }
.q-verdict.none { color: var(--text-3); }

.cause-tag {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
}

/* 题干和选项里的词也能点，所以这里必须和原文一样关掉系统选中，
   否则点一下词会把整句涂成浏览器高亮 */
.q-block.review .q-text {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.q-block.review .q-text .word { cursor: pointer; }

/* 精读里的选项是只读的 */
.q-block.review .opt-row { cursor: default; }
.q-block.review .opt-row:active { opacity: 1; }

.opt-mark {
  margin-left: auto;
  margin-top: 2px;
  flex: none;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.opt-mark.ok { background: var(--ok-bg); color: var(--ok); }
.opt-mark.no { background: var(--wrong-bg); color: var(--wrong); }

.rev-block {
  margin-top: 14px;
  border-top: 0.5px solid var(--border);
  padding-top: 14px;
}
.rev-lb { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips .chip {
  border: 0.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.chips .chip:active { opacity: .7; }
.chips .chip.is-on {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn);
}
.chips .chip.static { cursor: default; }

.rev-note { margin-top: 10px; min-height: 64px; font-size: 14px; }

.q-ai { margin-top: 12px; }
.q-ai:empty { margin-top: 0; }

.trap { margin-bottom: 6px; }
.trap:last-child { margin-bottom: 0; }
.trap b { display: inline-block; min-width: 20px; color: var(--text-3); font-weight: 500; }

/* 官方解析 —— 逐题细解册里的正解理由与逐项排除 */
.off-block { margin-top: 12px; }
.off-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.off-toggle:active { opacity: .7; }
.off-arrow { color: var(--text-2); transition: transform .18s; }
.off-toggle.open .off-arrow { transform: rotate(180deg); }
.off-body { padding: 12px 2px 0; }
.off-sec + .off-sec { margin-top: 14px; }
.off-lb { font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.off-tx { font-size: 13.5px; line-height: 1.85; color: var(--text); }

/* ---------- 主观题：翻译（46）/ 写作（47-48） ---------- */

.chip.ref { background: var(--accent-bg); color: var(--accent); }

/* 题目要求 */
.brief { margin-bottom: 12px; }
.brief-hd { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.brief-body { font-size: 14px; line-height: 1.85; color: var(--text); }
.brief-note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-3);
}

/* 写译文 / 写作文的输入框 */
.write-card {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.write-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}
.write-hd .muted { font-size: 12px; font-weight: 400; }

.draft-area {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border: 0.5px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.85;
  resize: vertical;
  outline: none;
  /* 这里要能正常选中 / 输入，不能继承精读区的禁用选中 */
  -webkit-user-select: text;
  user-select: text;
}
.draft-area:focus { border-color: var(--accent); }
.draft-area::placeholder { color: var(--text-3); }

.write-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.write-ft .wc { font-size: 12px; color: var(--text-2); }

/* 我的 vs 参考：宽屏并排，窄屏上下 */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.cmp-col {
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  background: var(--bg-2);
  min-width: 0;
}
.cmp-col.ref { background: var(--accent-bg); border-color: transparent; }
.cmp-hd { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.cmp-col.ref .cmp-hd { color: var(--accent); }
.cmp-body { font-size: 14px; line-height: 1.9; white-space: pre-wrap; }
.cmp-body p { margin: 0 0 .8em; }
.cmp-body p:last-child { margin-bottom: 0; }

/* 参考译文 / 范文 */
.ref-card {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 17px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.95;
}
.ref-card p { margin: 0 0 1em; }
.ref-card p:last-child { margin-bottom: 0; }
.ref-hd { font-size: 12px; color: var(--accent); margin-bottom: 8px; }

.src-note { font-size: 12px; color: var(--text-3); margin: 0 2px 12px; }

@media (max-width: 560px) {
  main { padding: 16px 14px 80px; }
  .page-title { font-size: 19px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head .btn { align-self: flex-start; }
  .reading { padding: 18px 16px 22px; max-height: 52vh; }
  /* 窄屏上选句栏收窄一点，正文别被挤掉太多 */
  .sent-rail { width: 36px; padding: 6px 3px; }
  .reading-wrap.has-rail .reading { padding-right: 48px; }
  .opt-mark { font-size: 11px; padding: 2px 6px; }
  .cat-row { grid-template-columns: 1fr; gap: 8px; }
  .cat-card { padding: 12px 14px; }
  .year-chip { min-width: 56px; padding: 6px 10px; }
  .key-btn { width: 42px; min-height: 42px; font-size: 15px; }
  /* 手机上「我的 / 参考」并排会窄得没法读，改上下 */
  .cmp { grid-template-columns: 1fr; }
  .ref-card, .write-card { padding: 13px 13px; }
}