/* 每日练习页 —— 复用 style.css 的变量，静音模式保持克制 */
.wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px 24px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- 登录 ---------- */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate-box { width: 100%; max-width: 320px; text-align: center; }
.gate-box h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: .02em; }
.gate-sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.gate-box input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 10px;
}
.gate-box input:focus { outline: none; border-color: var(--brand); }
.gate-err { color: var(--bad); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.gate-link { color: var(--muted); font-size: 12px; text-decoration: none; }

/* ---------- 顶栏 ---------- */
.daybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  gap: 8px;
}
/* 390px 宽下这几个元素勉强放得下，任何一处允许折行都会变成竖排文字：
   「第 8 天 · 第 2 周」曾经被折成两行、时钟被挤到第二行。全部 nowrap。 */
.bar-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
.day-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill { white-space: nowrap; }
.pill {
  font-size: 11px;
  color: var(--muted);
  background: var(--rail);
  border-radius: 20px;
  padding: 2px 9px;
}
.bar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.seg {
  display: flex;
  background: var(--rail);
  border-radius: 10px;
  padding: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.seg button.active { background: var(--card); color: var(--text); font-weight: 600; }
.clock {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--muted);
  min-width: 42px;
  text-align: right;
}
.clock.warn { color: var(--mid); }
/* 满 15 分钟：变绿，配"完成打卡"按钮 */
.clock.ok { color: var(--good); font-weight: 600; }

/* ---------- 进度 ---------- */
.track {
  height: 3px;
  background: var(--rail);
  border-radius: 3px;
  overflow: hidden;
}
.track-fill {
  height: 100%;
  width: 0;
  background: var(--brand);
  opacity: .55;
  transition: width .3s linear;
}

/* ---------- 环节导航 ---------- */
.steps {
  display: flex;
  gap: 6px;
  padding: 14px 0 4px;
  overflow-x: auto;
}
.steps::-webkit-scrollbar { display: none; }
.step {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: default;
}
.step.active { color: var(--brand-ink); background: var(--brand-soft); font-weight: 600; }
.step.done { color: var(--muted); text-decoration: line-through; opacity: .6; }

/* ---------- 舞台 ---------- */
.dstage { flex: 1; padding: 14px 0 88px; }
.sec-title { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.sec-sub { font-size: 12px; color: var(--muted); margin: 0 0 14px; }

.line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 9px;
}
.play {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.play:active { background: var(--brand-soft); }
.line-body { flex: 1; min-width: 0; }
.line-en { font-size: 14px; line-height: 1.5; word-break: break-word; }
.line-zh { font-size: 12px; color: var(--muted); margin-top: 3px; }
.role { font-size: 11px; color: var(--muted); margin-right: 6px; }
.mask .line-en,
.mask .line-zh { filter: blur(5px); }
.mask .role { filter: none; }

.quiz {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.quiz-q { font-size: 14px; margin: 0 0 10px; display: flex; gap: 8px; }
.quiz-no {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.opts { display: grid; gap: 7px; }
.opt {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.45;
}
.opt:hover { border-color: var(--brand); }
.opt .opt-lead { color: var(--muted); }
/* 折叠态：底部渐隐 + 右下角"展开"。渐隐比硬截断更像"还有内容" */
.opt.folded {
  position: relative;
  max-height: 5.6em;
  overflow: hidden;
}
.opt.folded::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  background: linear-gradient(to bottom, transparent, var(--card) 70%);
  pointer-events: none;
}
.opt-more {
  display: inline-block;
  margin-left: 6px;
  color: var(--brand);
  font-size: 12.5px;
  white-space: nowrap;
}
/* 折叠时"展开"必须绝对定位贴在右下角 —— 它在文本流末尾，
   被 max-height 挡住就永远点不到了 */
.opt.folded .opt-more {
  position: absolute;
  right: 10px;
  bottom: 4px;
  z-index: 2;
  background: var(--card);
  padding: 0 5px;
  border-radius: 4px;
}
.opt.right { border-color: var(--good); background: var(--brand-soft); }
.opt.wrong { border-color: var(--bad); }
.opt:disabled { cursor: default; }
.explain {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 9px;
  line-height: 1.55;
}
.explain strong { color: var(--text); font-weight: 600; }

/* ---------- 开口模式 ---------- */
.task {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.task-h { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.task-s { font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.rec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.rec.on { border-color: var(--bad); color: var(--bad); }
.dhint { font-size: 12px; color: var(--muted); }
.rating { display: flex; gap: 6px; margin-top: 10px; }
.rating button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.rating button.on { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }

.points { margin: 10px 0 0; padding: 0; list-style: none; }
.points li {
  font-size: 12.5px;
  color: var(--muted);
  padding: 5px 0 5px 16px;
  position: relative;
  line-height: 1.5;
}
.points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.points.revealed li::before { background: var(--brand); }
.points li b { color: var(--text); font-weight: 500; }

/* ---------- 底部 ---------- */
.foot {
  display: flex;
  gap: 10px;
  padding: 12px 0 8px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
}
.btn {
  flex: 1;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn.ghost { background: transparent; color: var(--muted); border-color: var(--line); flex: 0 0 96px; font-weight: 500; }
.btn:disabled { opacity: .45; cursor: default; }

.wrap-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 10px 0 0;
  line-height: 1.6;
}

/* ---------- 提示 ---------- */
.dtoast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  z-index: 20;
  max-width: 80vw;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .track-fill { transition: none; }
}

/* ---------- 错题本 ---------- */
.wb-stage { padding-bottom: 28px; }
.wb-group {
  font-size: 12px;
  color: var(--muted);
  margin: 20px 0 8px;
  letter-spacing: .02em;
}
.wb-group:first-child { margin-top: 6px; }
.wb-item { transition: opacity .25s ease; }
.wb-item.done { opacity: .42; }
.wb-item.done .opt.right { background: transparent; }
.wb-empty { text-align: center; padding: 56px 18px; }
.wb-empty-t { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.wb-empty-s { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; max-width: 300px; margin-inline: auto; }

/* ---------- 训练数据看板 ---------- */
.stats-stage { padding-bottom: 32px; }
.stat-hero { text-align: center; padding: 18px 0 6px; }
.stat-hero-num { font-size: 40px; font-weight: 600; margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-hero-label { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 4px; }
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.kpi b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11px; color: var(--muted); }
.brow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.blabel { flex: 0 0 86px; font-size: 12px; color: var(--muted); }
.btrack { flex: 1; height: 6px; background: var(--rail); border-radius: 3px; overflow: hidden; }
.bfill { display: block; height: 100%; background: var(--brand); opacity: .55; border-radius: 3px; }
.bval { flex: 0 0 62px; text-align: right; font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.hint-line { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 6px 0 0; }

/* ---------- 听点折叠（语句卡） ---------- */
.listen-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  background: var(--rail);
  border-radius: 8px;
  padding: 9px 11px;
  margin-top: 7px;
}

/* ---------- 跟读卡 ---------- */
.card-marked {
  font-size: 15px;
  line-height: 2.15;
  margin: 12px 0 2px;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  word-break: break-word;
}
/* 重音落点用加粗 + 下划标记，不用红色 —— 红色在本页专指"答错" */
.card-marked .stress {
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 1px;
}
.card-marked .pause {
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 5px;
  background: var(--muted);
  opacity: .5;
  vertical-align: -2px;
}
.card-marked .pause.long {
  width: 2px;
  height: 19px;
  margin: 0 10px;
  opacity: .85;
}
.card-marked .liaison { color: var(--brand); margin: 0 1px; font-size: 13px; }
.card-marked .readnote { font-size: 11px; color: var(--muted); margin: 0 2px; }
.card-marked .readnote::before { content: "["; }
.card-marked .readnote::after { content: "]"; }
.card-line { font-size: 12px; line-height: 1.75; color: var(--muted); margin: 7px 0 0; }
/* 跟读片段标记：讲义只标 2–3 句，别让人以为这就是整段 */
.card-frag {
  display: inline-block;
  margin: 10px 0 -4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--rail);
  color: var(--mid);
  font-size: 11px;
  letter-spacing: .02em;
}
.card-fulltext {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text);
}
/* 全文跟读稿：沿用标注样式，但放在折叠块里，字号略小 */
.card-marked.card-full {
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 2.05;
  background: transparent;
  border-color: transparent;
}
.card-frag-hint { margin-top: 6px; font-size: 11px; }
.card-check { color: var(--text); }

/* 词汇卡的机制说明 */
.line-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--line);
}

/* ---------- 卡片头部：标题 + 预算时长 ---------- */
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card-head .task-h { margin: 0; }
.card-t {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 移动端手感 ---------- */
/* 按钮禁止长按选中，避免"按住说话"时弹出拷贝菜单；
   但卡片正文要保留选中 —— 英文学员会想长按查词，禁用会挡路 */
.rec, .step, .foot .btn, .rating button, #mode-switch button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* 底部按钮让开 iPhone 的 home indicator */
.foot {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
/* 顶栏让开刘海 / 灵动岛（加到主屏后状态栏会压住内容） */
.daybar {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
/* 录音中要有呼吸感，否则不知道到底有没有在录（.rec.on 的配色见原定义） */
.rec.on { animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ---------- 手机可读性与点击区 ---------- */
/* 12px 的中文在手机上偏小，说明文字统一提到 13px */
.task-s { font-size: 13px; }
.dhint { font-size: 12.5px; }
/* iOS 的推荐点击区是 44px，原来 36px 偏高（手指按空） */
.rec { min-height: 40px; padding: 10px 15px; }
.foot .btn { min-height: 46px; }
.gate-box input, .gate-box .btn { min-height: 46px; }

/* http 访问时的录音提示 */
.secure-warn {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mid);
  background: var(--rail);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

/* ---------- 顶栏返回 ---------- */
/* 练习中途想回任务台，以前只能靠浏览器返回键 */
.back {
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 8px 4px 0;
  margin-right: -2px;
}
.back:active { color: var(--brand-ink); }

/* ---------- 休息日 ---------- */
.rest-box {
  text-align: center;
  padding: 48px 20px 8px;
}
.rest-mark {
  color: var(--brand);
  opacity: .55;
  margin-bottom: 14px;
}
.rest-h { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.rest-s {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 300px;
}
.rest-links {
  display: flex;
  gap: 10px;
  max-width: 300px;
  margin: 22px auto 0;
}
.rest-links a {
  flex: 1;
  font-size: 13px;
  color: var(--brand-ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 0;
  background: var(--card);
}

/* ---------- 泛听播放器 ---------- */
.card-flow { padding-bottom: 6px; }

.flow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
}
.flow-row .flow-mode { margin: 0; }

.flow-mode {
  display: inline-flex;
  gap: 4px;
  background: var(--rail);
  border-radius: 10px;
  padding: 3px;
  margin: 2px 0 12px;
}
.flow-mode .seg-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.flow-mode .seg-btn.active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
}

.flow-list {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  /* 字幕面板现在按内容撑高（最长约 5+3 行），列表相应再让一些 */
  max-height: 32vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.flow-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  padding: 10px 2px;
  cursor: pointer;
  line-height: 1.5;
}
.flow-item:last-child { border-bottom: none; }
/* 类别圆点：新学实心、复习浅灰。原来是「今日新学」四字标签，
   4×11px + 内边距 + 外边距 = 74px，而整行可用宽度只有 311px。
   不用左侧色条：.flow-item.playing 的 inset 阴影已经占了左边缘。 */
.flow-dot {
  flex: 0 0 auto;
  align-self: center;          /* 父级是 baseline，圆点会挂在文字下沿 */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.flow-dot.review { background: var(--line); }
.flow-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-dur {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 正在播的那条：左侧竖条 + 主色，扫一眼就知道听到哪了 */
.flow-item.playing {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
  border-radius: 8px;
  padding-left: 10px;
}
.flow-item.playing .flow-text { color: var(--brand-ink); font-weight: 500; }
.flow-item.passed { opacity: .55; }

/* ---------- 错题本：随机加练 ---------- */
.drill-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0 16px;
}
.drill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.drill-head .task-h { margin: 0; }
.drill-head .rec { min-height: 34px; padding: 6px 14px; }
#drill-area .task {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

/* ---------- 跟读卡：讲义五件套 ---------- */
/* 听点：讲这一段的发音陷阱，跟进卡里而不是弹窗 */
.info-block {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--rail);
  border-radius: 10px;
}
.info-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0 0 6px;
}
.info-item {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 3px;
}
.info-item:last-child { margin-bottom: 0; }

/* 折叠块：默认收起，点了才渲染内容 */
.fold { margin-top: 8px; }
.fold-btn {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.fold-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
  padding: 10px 4px 2px;
}
.fold-body .point-item {
  font-size: 12.5px;
  color: var(--muted);
  padding: 3px 0 3px 12px;
  position: relative;
  line-height: 1.6;
}
.fold-body .point-item::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--brand);
}

/* 校记：原文有错字时的说明，比正式讲解弱一档 */
.card-note {
  font-size: 12px;
  color: var(--mid);
  margin-top: 8px;
}

/* ---------- 泛听字幕 ---------- */
/* 放在播放器卡片内、列表上方：不浮动、不覆盖 —— 泛听列表很长，
   浮动字幕会一直压住正在播的条目 */
.cue-panel {
  margin: 12px 0 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--rail);
}
.cue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 0 12px;
}
.cue-title {
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}
/* 当前这一条的类别（今日新学 / 复习）。放在 head 左侧、模式开关之前 —— 那块本来空着。
   列表行不再重复这句话。 */
.cue-tag {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--brand-ink);
  background: var(--card);
  border-radius: 6px;
  padding: 1px 7px;
}
.cue-note {
  font-size: 11px;
  color: var(--mid);
  flex: 1;
}
.cue-modes {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.cue-mode {
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.cue-mode.on {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
}

/* 字幕必须能看全整句。
   cue 来自讲义原句，英文中位 148 字符、86% 超过两行 —— 早期用
   `-webkit-line-clamp: 2` 截断，结果大部分句子都断在半截，字幕等于没用。
   改成自然换行：短句仍然只占两行（min-height 兜住，不抖），长句撑开，
   极端长句（最长 576 字符）给一个 5 行上限并允许内部滚动。 */
.cue-body {
  padding: 6px 12px 11px;
  min-height: 4.6em;          /* 两行英文 + 两行中文：短句时不抖 */
}
.cue-en {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  display: block;
  max-height: 7.5em;          /* 约 5 行 */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cue-zh {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: block;
  max-height: 4.8em;          /* 约 3 行 */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 降级：无时间轴时整段显示，不限制行数也不留空高 */
.cue-static .cue-body { min-height: 0; }
/* 只显示一种语言时不要留双语的高度 */
.cue-body.cue-single { min-height: 2.7em; }

/* 关键：hidden 属性在这里必须显式压回来。
   下面 .cue-en / .cue-zh 都写了 display（原来是 -webkit-box，现在是 block），
   作者样式的优先级高于浏览器默认的 [hidden]{display:none} —— 直接
   `el.hidden = true` 是无效的，表现就是切「中/英」时另一行照旧显示，
   看着像"永远双语、切不动"。 */
.cue-panel [hidden] { display: none !important; }

.cue-static .cue-en,
.cue-static .cue-zh {
  display: block;
  max-height: 12em;      /* 降级时是整段原文，给足高度 */
  overflow-y: auto;
}

/* ---------- 收尾：标为「还不熟」的候选列表 ---------- */
/* 只给段号对不上是哪一段，所以每行给「段号 + 来源·主题 + 首句」 */
.mark-list { margin-top: 6px; }
.mark-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.mark-item:first-child { border-top: none; }
.mark-item.done { opacity: .5; }
.mark-item .rec { flex: 0 0 auto; }
.mark-text { flex: 1; min-width: 0; }
.mark-title {
  font-size: 13.5px;
  color: var(--text);
  margin: 0 0 3px;
  line-height: 1.4;
}
.mark-no {
  display: inline-block;
  font-size: 11px;
  color: var(--muted);
  background: var(--rail);
  border-radius: 6px;
  padding: 1px 6px;
  margin-right: 7px;
  vertical-align: 1px;
}
.mark-first {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 长选项（讲义原句最长 400 字符）：缩一档字号，不截断内容 */
.opt.long { font-size: 12.5px; line-height: 1.5; }

/* ---------- 离线缓存面板（统计页底部） ---------- */
.cache-panel {
  margin: 18px 0 8px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cp-h {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.cp-s {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.cp-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--rail);
  overflow: hidden;
  margin: 0 0 12px;
}
.cp-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width .3s ease;
}
.cp-btn {
  width: 100%;
  padding: 11px;
  font-size: 14px;
  font-weight: 550;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.cp-btn:disabled { opacity: .5; cursor: default; }
.cp-note {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
  text-align: center;
}

/* ---------- 术语表 ---------- */
.term-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.term-search { margin: 10px 0 10px; }
.term-search input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-appearance: none;
}
.term-search input:focus { outline: none; border-color: var(--brand); }

.term-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tc-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--muted);
  background: var(--rail);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.tc-btn.active {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand);
  font-weight: 600;
}

.term-group {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  margin: 16px 0 8px;
}
.term {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 7px;
  overflow: hidden;
}
.term.open { border-color: var(--brand); }
.term-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.term-main { flex: 1; min-width: 0; }
.term-en {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.term-zh {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.term-meta {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.term-body {
  padding: 0 14px 12px;
  border-top: 1px solid var(--line);
}
.term-en-full {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  margin: 10px 0 6px;
}
.term-zh-full {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 10px;
}
.term-link {
  font-size: 12px;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-soft);
}