/* =========================================================
   app.css — 首页 / 场景页 / 搜索结果
   ========================================================= */

/* ================= 首页 ================= */

.hero {
  margin-bottom: 20px;
}

.hero h1 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
}

.hero p {
  margin: 0;
  color: var(--c-text-2);
  font-size: 14px;
}

/* 篇章卡片 */
.part {
  margin-bottom: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.part-hd {
  padding: 12px 16px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.part-hd h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.part-hd .part-en {
  font-size: 13px;
  color: var(--c-text-3);
}

.part-bd {
  padding: 6px 16px 14px;
}

/* 主题组 */
.group {
  padding: 12px 0;
  border-bottom: 1px dashed var(--c-border);
}

.group:last-child { border-bottom: 0; }

.group-hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.group-hd h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.group-hd .group-en {
  font-size: 12px;
  color: var(--c-text-3);
}

/* 场景按钮 */
.scene-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scene-chip {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: background .12s, border-color .12s;
}

.scene-chip:hover {
  background: var(--c-accent-bg);
  border-color: var(--c-accent);
}

.scene-chip .sc-t {
  font-size: 14px;
  font-weight: 500;
}

.scene-chip .sc-e {
  display: block;
  font-size: 12px;
  color: var(--c-text-3);
}

.scene-chip .sc-p {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scene-chip.is-off {
  opacity: .5;
  cursor: default;
}

.scene-chip.is-off:hover {
  background: var(--c-surface);
  border-color: var(--c-border-2);
}

/* ================= 场景页 ================= */

.sc-head {
  margin-bottom: 16px;
}

.sc-crumb {
  font-size: 13px;
  color: var(--c-text-3);
  margin-bottom: 6px;
}

.sc-crumb a:hover { color: var(--c-accent); }

.sc-head h1 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 600;
}

.sc-head .sc-en {
  color: var(--c-text-2);
  font-size: 14px;
}

.sc-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 情境说明 */
.ctx {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 14px;
}

.ctx .ctx-en { color: var(--c-text); }
.ctx .ctx-cn { color: var(--c-text-2); margin-top: 2px; }

/* 区块标题 */
.sec-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
}

.sec-hd h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.sec-hd .sec-n {
  font-size: 12px;
  color: var(--c-text-3);
}

/* ---------- 对话剧场 ---------- */
.stage {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px;
}

.turn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
  width: 100%;
}

.turn:last-child { margin-bottom: 0; }

.turn.right { flex-direction: row-reverse; }

.ava {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}

.turn.a .ava { background: var(--c-a); }
.turn.b .ava { background: var(--c-b); }

.bub {
  max-width: calc(100% - 44px);
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: box-shadow .12s;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bub:hover { box-shadow: 0 0 0 2px var(--c-border-2); }

.turn.a .bub {
  background: var(--c-a-bg);
  border-color: #cfe3f7;
  border-top-left-radius: 2px;
}

.turn.b .bub {
  background: var(--c-b-bg);
  border-color: #f5d3de;
  border-top-right-radius: 2px;
}

.bub .en {
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bub .cn {
  margin-top: 3px;
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.5;
}

/* 中文隐藏模式 */
/* 自测模式（场景页）：
   - en-only 藏中文 → 看英文回想意思
   - cn-only 藏英文 → 看中文回想怎么说（中译英，更贴近开口） */
.stage.en-only .bub .cn { display: none; }
.stage.cn-only .bub .en { display: none; }

/* ---------- 句式 / 惯用语 ---------- */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tab {
  padding: 5px 12px;
  border: 1px solid var(--c-border-2);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 13px;
  cursor: pointer;
}

.tab.on {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

.kit {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.kit-row {
  display: flex;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}

.kit-row:last-child { border-bottom: 0; }
.kit-row:hover { background: var(--c-surface-2); }

.kit-row .k-en {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.kit-row .k-cn {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--c-text-2);
}

.kit-row.is-rebuilt .k-en,
.kit-row.is-rebuilt .k-cn { color: var(--c-text-2); }

.note-mark {
  color: var(--c-accent);
  font-size: 12px;
  margin-left: 4px;
}

/* 小贴士 */
.tips {
  background: #fffaf0;
  border: 1px solid #f0e0c0;
  border-radius: var(--r-lg);
  padding: 12px 16px;
}

.tips ul { margin: 0; padding-left: 18px; }
.tips li { margin-bottom: 4px; font-size: 14px; }
.tips li:last-child { margin-bottom: 0; }

/* 上下场景 */
.pager {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.pager a { color: var(--c-text-2); }
.pager a:hover { color: var(--c-accent); }

/* ================= 搜索结果 ================= */

.res-item {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.res-item:hover { border-color: var(--c-accent); }

.res-item .r-where {
  font-size: 12px;
  color: var(--c-text-3);
  margin-bottom: 2px;
}

.res-item .r-en { font-size: 14.5px; }

.res-item .r-cn {
  font-size: 13px;
  color: var(--c-text-2);
}

.res-item mark {
  background: #fff2a8;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ================= 工具条 ================= */

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tool {
  padding: 4px 10px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 13px;
  cursor: pointer;
}

.tool:hover { background: var(--c-surface-2); }

.tool.on {
  background: var(--c-accent-bg);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* 复制提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: rgba(27,29,33,.92);
  color: #fff;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 200;
}

.toast.show { opacity: 1; }

/* =========================================================
   移动端 —— 以 iPhone 17（CSS 视口 402×874，DPR 3，19.5:9）为基准
   同代机型视口宽度：17e 390 / 17·17Pro 402 / Air 420 / Pro Max 440
   注意：只改 padding-top/left/right，底部交给 base.css 的
   calc(60px + env(safe-area-inset-bottom))，否则会覆盖 Home Indicator 避让
   ========================================================= */

@media (max-width: 560px) {
  /* 顶栏重构为两行：402px 视口一行塞不下「品牌 + 导航 + 搜索」三样，
     与其等比缩小，不如让搜索框换行独占一整行拿满宽度（204px → 约 330px）。
     注意 height 必须改 auto，否则被 54px 固定高度压住换不了行。 */
  .hdr-in {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    padding: 6px 10px 8px;
  }
  .brand { order: 1; }
  .nav   { order: 2; margin-left: auto; }
  .srch  { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }

  .brand-txt { display: none; }
  .view {
    padding-top: 14px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .sc-head h1 { font-size: 18px; }
  .bub .en { font-size: 14px; }
  .nav { margin-left: 6px; }
  .nav-tab { padding: 6px 8px; font-size: 13px; }
  .voc-src { margin-top: 6px; }

  /* 词条行竖排：必须重置栏宽，否则 flex-basis 会作用在高度上把行撑变形 */
  .kit-row { flex-direction: column; gap: 2px; }
  .kit-words   .k-en, .kit-words   .k-cn,
  .kit-phrases .k-en, .kit-phrases .k-cn,
  .kit-tech    .k-en, .kit-tech    .k-cn,
  .kit-usage   .k-en, .kit-usage   .k-cn,
  .kit-scene   .k-en, .kit-scene   .k-cn { flex: 0 0 auto; }
  /* 闪卡在小屏下收紧，两个自评按钮平分宽度便于拇指点击 */
  .vb-q { font-size: 18px; }
  .vb-ans { font-size: 19px; }
  .vb-card { padding: 22px 14px; }
  .vb-judge .vb-btn, .vb-btn.is-show { flex: 1; min-width: 0; }
  .dz-sent { font-size: 15px; }
  .dz-opt { min-height: 46px; }
  .dz-card { padding: 14px 14px 16px; }
}

/* iPhone Air / Pro Max 一类大屏（420–440px） */
@media (max-width: 430px) {
  .hdr-in { gap: 6px; }
  .brand-mark { width: 24px; height: 24px; font-size: 14px; }
  /* 不覆盖 margin-left：两行布局下导航靠 margin-left:auto 右对齐 */
  .nav { gap: 0; }
  .srch input { height: 36px; }
  .nav-tab { padding: 6px 9px; }
  .srch button { padding: 0 10px; font-size: 13px; }
  .hero h1 { font-size: 18px; }
  .hero p { font-size: 13px; }
  .sec-hd h2 { font-size: 14px; }
  .kit-row { padding: 10px 12px; }
  .voc-srch { gap: 6px; }
  .voc-srch button { padding: 0 12px; font-size: 13px; }
  .tool { min-height: 36px; padding: 0 12px; }
  .tabs .tab { padding: 7px 12px; }
}

/* iPhone 17 / 17 Pro 基准（402px）—— 本站主要靶心 */
@media (max-width: 402px) {
  .hdr-in { gap: 4px; }
  .nav-tab { padding: 6px 8px; }
  .srch input { padding: 0 8px; }
  .view {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .hero h1 { font-size: 17px; }
  .scene-list { gap: 6px; }
  .tabs { gap: 4px; }
  .tabs .tab { padding: 6px 10px; font-size: 13px; }
  .kit-row { padding: 9px 11px; }
  .voc-en { font-size: 15px; }
  .voc-cn { font-size: 14px; }
  .voc-ipa { font-size: 11px; }
  .pager a { font-size: 13px; }
}

/* 小屏兜底（iPhone SE 375px 及更窄） */
@media (max-width: 375px) {
  .nav-tab { padding: 6px 7px; font-size: 12px; }
  .srch button { padding: 0 8px; font-size: 12px; }
  .kit-row { padding: 8px 10px; }
  .tab { padding: 6px 9px; font-size: 12px; }
}

/* =========================================================
   词汇页
   ========================================================= */

/* 顶部导航（插在品牌与搜索框之间，搜索框靠右由 .srch 的 margin-left:auto 保证） */
.nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.nav-tab {
  /* 触摸目标：Apple HIG 建议 44pt，顶栏空间有限故取 36px 并保证可点区域完整 */
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.nav-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-tab.on { background: var(--c-accent-bg); color: var(--c-accent); font-weight: 600; }

/* 词汇页搜索框 */
.voc-srch { display: flex; gap: 8px; margin: 0 0 14px; }
/* 与顶栏 .srch 视觉统一：同样的描边色与圆角，仅尺寸放大一档以匹配页面层级 */
.voc-srch input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  -webkit-appearance: none;
  appearance: none;
  /* 同顶栏：iOS 聚焦缩放防护，字号不低于 16px */
  font-size: 16px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
}
.voc-srch input:focus { outline: none; border-color: var(--c-accent); }
.voc-srch button {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  white-space: nowrap;
}
.voc-srch button:hover { border-color: var(--c-border-2); color: var(--c-text); }
.voc-clear { color: var(--c-text-3); }

/* 词汇页工具条 */
.voc-tools { margin: 0 0 12px; }

/* 自测模式：藏起一侧。
   - en-only 藏中文 → 看英文回想释义（英译中）
   - cn-only 藏英文 → 看释义回想单词（中译英）
   用 visibility 而非 display，切换时行高不跳动，位置稳定便于对照 */
.kit.en-only .k-cn,
.kit.en-only .voc-cn { visibility: hidden; }
.kit.cn-only .k-en,
.kit.cn-only .voc-en { visibility: hidden; }

/* 释义主体：比出处高两级（正文色 + 14px）—— 释义是主角，出处是配角 */
.voc-cn { color: var(--c-text); font-size: 14px; }

/* 词条行：复用 .kit-row 左右布局，出处另起一行 */
.voc-row { flex-wrap: wrap; }

/* 栏宽按分类自适应：单词页左栏收窄避免留白，句型页左栏放宽 */
.kit-words   .k-en { flex: 0 0 32%; }
.kit-words   .k-cn { flex: 1 1 auto; }
.kit-phrases .k-en { flex: 0 0 46%; }
.kit-phrases .k-cn { flex: 1 1 auto; }
.kit-tech    .k-en { flex: 0 0 46%; }
.kit-tech    .k-cn { flex: 1 1 auto; }
.kit-usage   .k-en { flex: 0 0 52%; }
.kit-usage   .k-cn { flex: 1 1 auto; }
.kit-scene   .k-en { flex: 0 0 44%; }
.kit-scene   .k-cn { flex: 1 1 auto; }

/* 首字母分组头 */
.voc-alpha {
  padding: 3px 14px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-3);
  letter-spacing: 0.5px;
}
.voc-alpha:first-child { border-top: 0; }

/* 短语动词标签 */
.tag-phrasal { background: #eef4fb; color: #378add; }
.voc-en { font-weight: 600; }
.voc-ipa { font-weight: 400; color: var(--c-text-3); font-size: 12px; margin-left: 4px; }
.voc-cn { display: block; }
.voc-sense { line-height: 1.6; }
.voc-sense i { color: var(--c-text-3); font-style: normal; margin-right: 2px; }
.voc-sense.is-supp { color: var(--c-text-2); }
.voc-pos { color: var(--c-text-3); }
/* 出处：视觉上的配角 —— 11px 浅灰，明显低于释义一级 */
.voc-src {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--c-text-3);
}
.voc-src a { color: var(--c-text-3); font-weight: 400; text-decoration: none; }
.voc-src a:hover { color: var(--c-accent); }
.voc-pg {
  color: var(--c-text-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
/* 附录来源单字方标：通 / 营 / 服，悬停见全称 */
.voc-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--c-border-2);
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  color: var(--c-text-3);
  cursor: help;
}

/* 高亮放宽到词条行（原只作用于搜索结果 .res-item） */
.kit-row mark {
  background: #fff2a8;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ---------- 长按查词浮窗 ---------- */
.lookup-tip {
  position: fixed;
  z-index: 200;
  max-width: 260px;
  padding: 9px 11px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  font-size: 13px;
  line-height: 1.5;
}
.lt-hd { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.lt-ipa { font-weight: 400; color: var(--c-text-3); font-size: 11px; margin-left: 4px; }
.lt-cn { color: var(--c-text-2); }
.lt-foot {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
}
.lt-src { color: var(--c-text-3); font-size: 11px; }
.lt-src:hover { color: var(--c-accent); }

/* 长按时不弹出 iOS 系统菜单（查词由本站接管，复制功能已移除） */
.bub .en, .k-en, .voc-en, .r-en, .ctx-en {
  -webkit-touch-callout: none;
}

/* ---------- 生词本 / 闪卡 ---------- */
.vb-row { flex-wrap: wrap; }
.vb-act { flex-basis: 100%; display: flex; gap: 8px; margin-top: 4px; }
.vb-src { margin-top: 2px; font-size: 11px; }
.vb-src a { color: var(--c-text-3); }
.vb-src a:hover { color: var(--c-accent); }
.vb-tip { color: var(--c-text-3); font-size: 12px; margin: 12px 0 0; }
.tool.is-off { opacity: 0.5; cursor: default; }

.vb-btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  cursor: pointer;
}
.vb-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.vb-btn.is-del:hover { border-color: var(--c-text-3); color: var(--c-text-3); }
.vb-btn.is-good { border-color: var(--c-a); color: var(--c-a); }
.vb-btn.is-bad { border-color: var(--c-b); color: var(--c-b); }

/* 闪卡 */
.vb-bar {
  height: 4px;
  background: var(--c-surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 14px;
}
.vb-bar-in { display: block; height: 100%; background: var(--c-accent); transition: width 0.2s; }
.vb-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
}
.vb-q { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.vb-hint { font-size: 12px; color: var(--c-text-3); margin-bottom: 18px; }
.vb-ans { font-size: 22px; font-weight: 700; color: var(--c-accent); margin-bottom: 18px; }
.vb-ans.is-hide { font-size: 13px; font-weight: 400; color: var(--c-text-3); }
.vb-judge { display: flex; gap: 10px; justify-content: center; }
.vb-judge .vb-btn { min-width: 96px; padding: 8px 14px; font-size: 14px; }
.vb-btn.is-show { min-width: 140px; padding: 8px 14px; font-size: 14px; }

/* 长按卡片上的收藏按钮 */
.lt-act { margin-top: 6px; }
.lt-star {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  cursor: pointer;
}
.lt-star.on {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-bg);
}

/* ---------- 练习：场景对话填空 ---------- */
.dz-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 18px 18px 20px;
}
.dz-ctx {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--c-text-2);
}
.dz-ctx-cn { color: var(--c-text-3); font-size: 12px; margin-top: 2px; }
.dz-body { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.dz-ava {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-a);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dz-sent { font-size: 16px; font-weight: 500; line-height: 1.6; }
.dz-cn { color: var(--c-text-3); font-size: 13px; margin-bottom: 14px; }
.dz-opts { display: grid; gap: 8px; }
.dz-opt {
  min-height: 42px;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}
.dz-opt:hover:not(:disabled) { border-color: var(--c-accent); }
.dz-opt.is-right { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; }
.dz-opt.is-wrong { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-accent); }
.dz-opt.is-dim { opacity: 0.45; }
.dz-opt:disabled { cursor: default; }
.dz-fb { margin-top: 12px; font-size: 13px; }
.dz-fb.is-ok { color: #2e7d32; }
.dz-fb.is-bad { color: var(--c-accent); }
.dz-next { margin-top: 12px; }
.dz-score { text-align: center; padding: 24px 0 8px; }
.dz-pct { font-size: 40px; font-weight: 700; line-height: 1; color: var(--c-accent); }
.dz-score p { color: var(--c-text-2); margin: 8px 0 0; }

/* 深色模式：几处无法走变量的硬编码颜色在此兜底 */
@media (prefers-color-scheme: dark) {
  .kit-row mark,
  .res-item mark { background: #6b5a00; color: #ffe680; }
  .tag-phrasal   { background: #17293b; color: #5aa9f0; }
  .dz-opt.is-right { background: #14301a; border-color: #2e7d32; color: #7fd18a; }
  .dz-fb.is-ok, .dz-opt.is-right { color: #7fd18a; }
}