/* 英语练习 —— 设计令牌（Task 20 视觉打磨）
   方向：沉静、聚焦、适合长时间学习。避开纯白/默认亮蓝。
   浅色：暖纸调（带极淡的青灰底），主色为深青蓝（ink teal），
        辅以暖琥珀作 accent（计时/进度提示），克制不喧宾夺主。
   深色：墨色背景 + 提亮的同色系，对比度满足 WCAG AA。 */
:root {
  /* —— 色彩阶 —— */
  --bg: #f4f5f1;            /* 暖纸底：极淡青灰，不刺眼 */
  --surface: #eceee8;       /* 次级面：用于 hint/textarea 底 */
  --card: #fffefb;          /* 卡片：近白但带一点暖意，非纯白 */
  --card-2: #f7f8f4;        /* 卡片内的次级面（tag 底等） */
  --text: #20232a;          /* 主文本 */
  --muted: #5d6470;         /* 次文本/标签（对 bg 对比 ≥ 4.5） */
  --faint: #8a909c;         /* 更弱的辅助文字 */
  --border: #e0e3db;        /* 分隔线/描边 */
  --border-strong: #c8ccc2; /* 较强描边（hover 等） */

  --primary: #1f5d6c;       /* 深青蓝：主色，沉静 */
  --primary-hover: #174a56; /* hover 加深 */
  --primary-press: #103844; /* active 更深 */
  --primary-fg: #ffffff;    /* 主色上的文字 */
  --primary-tint: rgba(31, 93, 108, 0.10);  /* 主色淡背景（选中态） */
  --primary-tint-strong: rgba(31, 93, 108, 0.18);

  --accent: #b45309;        /* 暖琥珀：accent/计时提醒 */
  --accent-tint: rgba(180, 83, 9, 0.12);

  --success: #15803d;       /* 答对/掌握 */
  --success-tint: rgba(21, 128, 61, 0.10);
  --warn: #b45309;          /* 警示（与 accent 同源） */
  --warn-tint: rgba(180, 83, 9, 0.12);
  --danger: #b91c1c;        /* 答错/危险操作 */
  --danger-tint: rgba(185, 28, 28, 0.08);
  --danger-tint-strong: rgba(185, 28, 28, 0.12);

  /* —— 字号阶（CJK+Latin 混排：行高略放宽以适配中文）—— */
  --fs-xs: 12px;   --lh-xs: 1.5;
  --fs-sm: 13px;   --lh-sm: 1.55;
  --fs-base: 15px; --lh-base: 1.6;
  --fs-md: 16px;   --lh-md: 1.6;
  --fs-lg: 18px;   --lh-lg: 1.5;
  --fs-xl: 22px;   --lh-xl: 1.4;
  --fs-2xl: 28px;  --lh-2xl: 1.25;
  --fs-3xl: 40px;  --lh-3xl: 1.1;
  --fs-display: 56px; --lh-display: 1.0;

  /* —— 间距阶 —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space: 16px;        /* 兼容旧用法 */
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* —— 圆角阶 —— */
  --radius-sm: 6px;
  --radius: 12px;       /* 默认卡片/按钮 */
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* —— 阴影（克制：仅一层柔影，学习场景不喧闹）—— */
  --shadow-sm: 0 1px 2px rgba(32, 35, 42, 0.04);
  --shadow: 0 1px 3px rgba(32, 35, 42, 0.06), 0 1px 2px rgba(32, 35, 42, 0.04);
  --shadow-lg: 0 4px 14px rgba(32, 35, 42, 0.08);

  /* —— 焦点环（a11y）—— */
  --focus-ring: 0 0 0 3px rgba(31, 93, 108, 0.35);

  /* —— 结构尺寸 —— */
  --tabbar-h: 56px;
  --topbar-h: 52px;
  --content-max: 760px;
  --tap-min: 44px;       /* 最小触控目标 */

  font-synthesis: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151a;          /* 墨色底 */
    --surface: #181d24;     /* 次级面 */
    --card: #1a2027;        /* 卡片 */
    --card-2: #212832;      /* 卡片内次级面 */
    --text: #e6e9ee;        /* 主文本（对 bg 对比 ≥ 7） */
    --muted: #9ba3b0;       /* 次文本（对 bg 对比 ≥ 4.5） */
    --faint: #6b7380;
    --border: #2a323c;
    --border-strong: #3a444f;

    --primary: #5eb0c2;     /* 深色模式提亮主色 */
    --primary-hover: #76c0d0;
    --primary-press: #94cede;
    --primary-fg: #0d1418;  /* 深色主色上的深字（高对比） */
    --primary-tint: rgba(94, 176, 194, 0.14);
    --primary-tint-strong: rgba(94, 176, 194, 0.22);

    --accent: #fbbf24;
    --accent-tint: rgba(251, 191, 36, 0.14);

    --success: #4ade80;
    --success-tint: rgba(74, 222, 128, 0.12);
    --warn: #fbbf24;
    --warn-tint: rgba(251, 191, 36, 0.14);
    --danger: #f87171;
    --danger-tint: rgba(248, 113, 113, 0.10);
    --danger-tint-strong: rgba(248, 113, 113, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.4);

    --focus-ring: 0 0 0 3px rgba(94, 176, 194, 0.45);

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 全局焦点环：键盘可见，鼠标不扰 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button, a, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]) {
  outline: none;
}
button:focus-visible, a:focus-visible, .btn:focus-visible,
.tabbar__entry:focus-visible, .vocab__tab:focus-visible, .wrong__tab:focus-visible,
.kaodian__tab:focus-visible, .quiz-view__tab:focus-visible,
.tpl__head:focus-visible, .wrong__redo-option:focus-visible,
.quiz__option:focus-visible, [role="button"]:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* 尊重「减少动效」系统偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 顶部标题栏 */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 内容区 */
.app {
  flex: 1 1 auto;
  padding: var(--space);
  padding-bottom: calc(var(--tabbar-h) + var(--space-5));
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

/* 卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space);
  margin-bottom: var(--space);
  box-shadow: var(--shadow-sm);
}

/* 按钮 */
.btn {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  padding: 11px 18px;
  min-height: 44px;          /* 触控目标 ≥44px */
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              transform 0.06s ease, box-shadow 0.12s ease;
}
.btn:hover { background: var(--card-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--primary:active { background: var(--primary-press); border-color: var(--primary-press); }
.btn--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.btn--danger:hover {
  background: var(--danger-tint-strong);
  border-color: var(--danger);
}
.btn--danger:active {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary:disabled, .btn--danger:disabled { opacity: 0.5; }

/* 表单 */
.field { margin-bottom: var(--space); }
.field__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.input {
  width: 100%;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-md); /* ≥16px 防 iOS 缩放 */
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.input:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }

/* select 同步 input 样式 */
.wrong__select, select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* 通用反馈条（settings 等用） */
.feedback {
  font-size: var(--fs-sm);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}
.feedback--ok { color: var(--success); background: var(--success-tint); }
.feedback--err { color: var(--danger); background: var(--danger-tint-strong); }

/* 错误提示 */
.error {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin: var(--space) 0;
}

/* 底部 Tab Bar（移动端横向滚动） */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tabbar-h);
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 20;
  box-shadow: 0 -1px 6px rgba(32, 35, 42, 0.04);
}
.tabbar::-webkit-scrollbar { display: none; }

.tabbar__entry {
  flex: 1 0 auto;
  min-width: 56px;
  min-height: var(--tabbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-xs);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.tabbar__entry:hover { color: var(--text); background: var(--surface); }
.tabbar__entry:active { background: var(--card-2); }
.tabbar__entry--settings {
  flex: 0 0 auto;
  min-width: 44px;
  font-size: var(--fs-lg);
}
.tabbar__entry.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

/* 视图标题（占位） */
.view-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space);
}

/* ===== 今日学习视图 ===== */
.today__header {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.today__countdown {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  color: var(--primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.today__days-unit {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-left: 4px;
  color: var(--text);
}
.today__countdown-label {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 6px;
}
.today__phase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.today__day-index {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-fg);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
}
.tag--link {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  text-decoration: none;
  font-size: var(--fs-xs);
  padding: 2px 10px;
  transition: background-color 0.12s ease;
}
.tag--link:hover { background: var(--primary-tint); }
.tag--link:active { opacity: 0.7; }
.today__hint {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* 任务区 */
.today__tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.today__tasks-head .view-title { margin: 0; }
.today__rate {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
}
.today__rate-text { font-size: var(--fs-sm); }
.today__rate-pct { font-size: var(--fs-md); font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

.progress {
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 10px 0 14px;
}
.progress__bar {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.tasklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tasklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.tasklist__item:last-child { border-bottom: none; }
.tasklist__label {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
  min-height: var(--tap-min);
}
.tasklist__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
}
.tasklist__text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  word-break: break-word;
}
.tasklist__item.is-done .tasklist__text {
  color: var(--muted);
  text-decoration: line-through;
}
.today__empty { color: var(--muted); font-size: var(--fs-sm); }
.today__inline-error { margin: 0 0 10px; }

/* 统计卡 */
.today__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space);
}
.today__stat {
  text-align: center;
  text-decoration: none;
  color: var(--text);
  padding: 16px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.12s ease, transform 0.06s ease;
}
.today__stat:hover { background: var(--surface); }
.today__stat:active { transform: translateY(1px); background: var(--card-2); }
.today__stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.today__stat-unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}
.today__stat-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 6px;
}
@media (max-width: 360px) {
  .today__countdown { font-size: 44px; }
  .today__stat-value { font-size: 20px; }
}

/* ===== 单词记忆视图 ===== */
.vocab__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}
.vocab__stat { text-align: center; }
.vocab__stat-value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.vocab__stat-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 4px;
}

.vocab__tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space);
}
.vocab__tab {
  flex: 1 1 0;
  min-height: var(--tap-min);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.vocab__tab:hover { background: var(--card-2); color: var(--text); }
.vocab__tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
}
.vocab__tab.is-active:hover { background: var(--primary-hover); }
.vocab__loading { color: var(--muted); padding: 12px; font-size: var(--fs-sm); }

/* 翻卡区 */
.vocab__card-wrap { position: relative; }
.vocab__progress {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.vocab__progress-text {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.vocab__card {
  text-align: center;
  padding: 28px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.vocab__card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.vocab__card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.vocab__card-word {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.vocab__card--new .vocab__card-word::after {
  content: '新';
  display: inline-block;
  margin-left: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--primary-fg);
  background: var(--primary);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  vertical-align: middle;
}
.vocab__card-detail { margin-top: 4px; }
.vocab__phonetic {
  font-size: var(--fs-base);
  color: var(--muted);
  font-style: italic;
}
.vocab__pos {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  padding: 1px 10px;
  margin: 4px auto;
  font-weight: 600;
}
.vocab__meaning {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 6px 0;
}
.vocab__example {
  font-size: var(--fs-sm);
  color: var(--text);
  font-style: italic;
  margin-top: 4px;
}
.vocab__example-trans {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.vocab__usage {
  margin-top: 6px;
}
.vocab__usage-title {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 2px;
}
.vocab__usage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.vocab__usage-item {
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.vocab__usage-pattern {
  font-weight: 700;
}
.vocab__usage-note {
  color: var(--muted);
  margin-left: 6px;
}
.vocab__card-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 6px;
}

.vocab__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.vocab__actions .btn { flex: 1 1 0; }
.vocab__btn--dont {
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.vocab__btn--dont:hover {
  background: var(--danger-tint-strong);
  border-color: var(--danger);
}

.vocab__done {
  text-align: center;
  padding: 28px 16px;
}
.vocab__done-emoji { font-size: var(--fs-3xl); line-height: 1; margin-bottom: 8px; }
.vocab__done-text { color: var(--muted); font-size: var(--fs-sm); }
.vocab__empty { color: var(--muted); font-size: var(--fs-sm); padding: var(--space-3); text-align: center; }

/* 词群浏览 */
.vocab__group-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vocab__group-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}
.vocab__wordlist { list-style: none; margin: 0; padding: 0; }
.vocab__word {
  border-bottom: 1px solid var(--border);
}
.vocab__word:last-child { border-bottom: none; }
.vocab__word-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 4px;
  min-height: var(--tap-min);
  cursor: pointer;
}
.vocab__word-text { font-size: var(--fs-md); font-weight: 600; }
.vocab__word-progress {
  font-size: var(--fs-xs);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  flex-shrink: 0;
}
.vocab__word.is-expanded .vocab__word-text { color: var(--primary); }
.vocab__word-detail {
  padding: 0 4px 14px;
}
.vocab__word-detail .vocab__meaning { font-size: var(--fs-base); margin-top: 4px; }

/* ===== 错题本视图 ===== */
.wrong__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}
.wrong__stat { text-align: center; }
.wrong__stat-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.wrong__stat-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 4px;
}

.wrong__filters { padding: var(--space-3); }
.wrong__filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
}
.wrong__filter-label { font-size: var(--fs-sm); color: var(--muted); flex: 0 0 auto; }
.wrong__select { flex: 1 1 auto; padding: 9px 32px 9px 10px; min-height: 40px; font-size: var(--fs-sm); }

.wrong__tabs {
  display: flex;
  gap: 6px;
}
.wrong__tab {
  flex: 1 1 0;
  min-height: var(--tap-min);
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wrong__tab:hover { background: var(--card-2); color: var(--text); }
.wrong__tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
}
.wrong__tab.is-active:hover { background: var(--primary-hover); }
.wrong__loading { color: var(--muted); padding: 12px; font-size: var(--fs-sm); }
.wrong__empty { color: var(--muted); text-align: center; padding: var(--space-4); font-size: var(--fs-sm); }

/* 错题卡 */
.wrong__card { position: relative; }
.wrong__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.wrong__source {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.wrong__status {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.wrong__status--new {
  color: var(--danger);
  background: var(--danger-tint-strong);
}
.wrong__status--mastered {
  color: var(--success);
  background: var(--success-tint);
}

.wrong__stem {
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--lh-md);
  margin-bottom: 12px;
}

.wrong__options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wrong__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.wrong__option--correct {
  border-color: var(--success);
  background: var(--success-tint);
}
.wrong__option--wrong {
  border-color: var(--danger);
  background: var(--danger-tint);
}
.wrong__option-key {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}
.wrong__option--correct .wrong__option-key {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-tint);
}
.wrong__option--wrong .wrong__option-key {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-tint-strong);
}
.wrong__option-text { flex: 1 1 auto; word-break: break-word; }
.wrong__option-mark {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.wrong__option--correct .wrong__option-mark { color: var(--success); }
.wrong__option--wrong .wrong__option-mark { color: var(--danger); }

.wrong__explanation {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.wrong__expl-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.wrong__expl-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text);
}

.wrong__card-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.wrong__redo-btn { font-size: var(--fs-sm); padding: 8px 16px; min-height: 40px; }

.wrong__redo-stem {
  font-size: var(--fs-base);
  font-weight: 500;
  margin-bottom: 10px;
  line-height: var(--lh-base);
}
.wrong__redo-options { display: flex; flex-direction: column; gap: var(--space-2); }
.wrong__redo-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  min-height: var(--tap-min);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.wrong__redo-option:hover:not(:disabled) { background: var(--card-2); border-color: var(--primary); }
.wrong__redo-option:active { transform: translateY(1px); }
.wrong__redo-option:disabled { cursor: default; opacity: 0.85; }
.wrong__redo-option--correct {
  border-color: var(--success);
  background: var(--success-tint);
}
.wrong__redo-option--wrong {
  border-color: var(--danger);
  background: var(--danger-tint-strong);
}

.wrong__feedback {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.wrong__feedback--ok {
  color: var(--success);
  background: var(--success-tint);
}
.wrong__feedback--err {
  color: var(--danger);
  background: var(--danger-tint-strong);
}


/* ===== 考点速查 kaodian ===== */
.kaodian__search { padding: var(--space-3); }
.kaodian__search .input { width: 100%; }
.kaodian__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.kaodian__tabs::-webkit-scrollbar { display: none; }
.kaodian__tab {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--muted);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.kaodian__tab:hover { background: var(--card-2); color: var(--text); }
.kaodian__tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
}
.kaodian__tab.is-active:hover { background: var(--primary-hover); }
.kaodian__loading, .kaodian__empty {
  color: var(--muted);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
}
.kaodian__card { padding: 14px 16px; }
.kaodian__card-head {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  flex-wrap: wrap;
}
.kaodian__part {
  color: var(--primary-fg);
  background: var(--primary);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.kaodian__group {
  color: var(--muted);
  align-self: center;
}
.kaodian__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.kaodian__rule {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
  color: var(--text);
}
.kaodian__examples {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
  color: var(--muted);
}
.kaodian__examples li { margin-bottom: 4px; }

/* ===== 作文模板 templates ===== */
.tpl__loading { color: var(--muted); padding: var(--space-4); text-align: center; font-size: var(--fs-sm); }
.tpl__group { padding: 14px 16px; }
.tpl__group-title {
  margin: 0 0 10px;
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpl__group-count {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-weight: 400;
}
.tpl__items { list-style: none; margin: 0; padding: 0; }
.tpl__item {
  border-top: 1px solid var(--border);
}
.tpl__item:first-child { border-top: none; }
.tpl__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 0;
  min-height: var(--tap-min);
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--fs-base);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease;
}
.tpl__head:hover { color: var(--primary); }
.tpl__title { flex: 1 1 auto; font-weight: 600; }
.tpl__chevron {
  color: var(--muted);
  transition: transform 0.15s ease;
  font-size: var(--fs-xs);
}
.tpl__head[aria-expanded="true"] .tpl__chevron { transform: rotate(180deg); }
.tpl__body { padding-bottom: 12px; }
.tpl__actions {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
  flex-wrap: wrap;
}
.tpl__actions .btn { padding: 6px 14px; font-size: var(--fs-sm); min-height: 36px; }
.tpl__section { margin-bottom: 12px; }
.tpl__label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.tpl__template {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
}
.tpl__ph {
  background: var(--primary-tint-strong);
  color: var(--primary);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}
.tpl__sample {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text);
}
.tpl__connectors { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl__chip {
  font-size: var(--fs-xs);
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--primary-tint-strong);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.tpl__feedback {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.tpl__feedback--ok { color: var(--success); background: var(--success-tint); }
.tpl__feedback--err { color: var(--danger); background: var(--danger-tint-strong); }

/* ===== quiz 刷题（grammar / dialogue / 未来 reading 共享 _quiz.js）===== */
.quiz-view__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
}
.quiz-view__tabs::-webkit-scrollbar { display: none; }
.quiz-view__tab {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.quiz-view__tab:hover { background: var(--card-2); }
.quiz-view__tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
}
.quiz-view__tab.is-active:hover { background: var(--primary-hover); }

.quiz__loading, .quiz__empty { color: var(--muted); padding: 12px; text-align: center; font-size: var(--fs-sm); }

.quiz__item { position: relative; }
.quiz__item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
  flex-wrap: wrap;
}
.quiz__index { font-weight: 700; color: var(--text); }
.quiz__tag {
  font-size: var(--fs-xs);
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--primary-tint-strong);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-weight: 500;
}
.quiz__stem {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  margin-bottom: 12px;
  word-break: break-word;
}
.quiz__options { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  padding: 11px 12px;
  min-height: var(--tap-min);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.quiz__option:hover:not(:disabled) { background: var(--card-2); border-color: var(--primary); }
.quiz__option.is-selected {
  border-color: var(--primary);
  background: var(--primary-tint);
}
.quiz__option-key {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}
.quiz__option.is-selected .quiz__option-key {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
}
.quiz__option-text { flex: 1 1 auto; word-break: break-word; }

.quiz__submit-wrap { margin-top: 16px; }
.quiz__hint { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* 结果阶段 */
.quiz__score { text-align: center; }
.quiz__score-main {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.quiz__score-sep { color: var(--muted); margin: 0 4px; }
.quiz__score-total { color: var(--muted); }
.quiz__score-pct { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.quiz__score-note { font-size: var(--fs-sm); margin-top: 8px; color: var(--danger); }
.quiz__score-note--ok { color: var(--success); }

.quiz__verdict {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.quiz__verdict--ok { color: var(--success); background: var(--success-tint); }
.quiz__verdict--err { color: var(--danger); background: var(--danger-tint-strong); }
.quiz__verdict--skip { color: var(--muted); background: var(--border); }

.quiz__options--readonly .quiz__result-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
}
.quiz__result-option.is-correct {
  border-color: var(--success);
  background: var(--success-tint);
}
.quiz__result-option.is-wrong {
  border-color: var(--danger);
  background: var(--danger-tint);
}
.quiz__result-option .quiz__option-key {
  border: 1px solid var(--border);
  background: var(--surface);
}
.quiz__result-option.is-correct .quiz__option-key {
  background: var(--success); color: #fff; border-color: var(--success);
}
.quiz__result-option.is-wrong .quiz__option-key {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.quiz__option-mark { margin-left: auto; font-weight: 700; }
.quiz__result-option.is-correct .quiz__option-mark { color: var(--success); }
.quiz__result-option.is-wrong .quiz__option-mark { color: var(--danger); }

.quiz__explanation {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--primary-tint);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.quiz__expl-label {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 4px;
}
.quiz__expl-text { color: var(--text); word-break: break-word; }

.quiz__item--err { border-color: var(--danger); }
.quiz__item--ok { border-color: var(--success); }
.quiz__item--skip { border-color: var(--border-strong); }

/* ---- vocab 英美音标 ---- */
.vocab__phon-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 5px;
  margin-right: 3px;
  vertical-align: 1px;
}

/* ---- vocab 发音按钮 ---- */
.vocab__speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--primary);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.1s ease;
}
.vocab__speak:hover { transform: scale(1.1); }
.vocab__speak.is-playing {
  animation: vocab-speak-pulse 0.9s ease-in-out infinite;
  color: #fff;
  background: var(--primary);
}
@keyframes vocab-speak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-tint); }
  50% { box-shadow: 0 0 0 5px var(--primary-tint); }
}
.vocab__card-speak {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 2px;
}

/* ---- wrong 重做模式(单卡流) ---- */
.wrong__redo-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
}
.wrong__redo-entry-hint { font-size: var(--fs-xs); color: var(--muted); }
.wrong__redo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wrong__redo-progress { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.wrong__redo-actions { margin-top: 12px; }
.wrong__done { text-align: center; padding: var(--space-5); }
.wrong__done-emoji { font-size: 40px; }
.wrong__done-text { color: var(--muted); font-size: var(--fs-sm); margin: 8px 0 16px; }

/* ---- vocab 助记 ---- */
.vocab__mnemonic {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--primary-tint);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
  text-align: left;
}
.vocab__mnemonic-label {
  font-weight: 700;
  color: var(--primary);
  margin-right: 6px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ---- reading 阅读理解 ---- */
.reading__intro {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-base);
}
.reading__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reading__empty, .reading__loading { color: var(--muted); padding: 12px; text-align: center; font-size: var(--fs-sm); }
.reading__card {
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.reading__card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.reading__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.reading__card:active { transform: translateY(1px); }
.reading__card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.reading__card-id {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: 0 0 auto;
}
.reading__card-title {
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
.reading__card-badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.reading__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.reading__back {
  padding: 6px 10px;
  font-size: var(--fs-sm);
  min-height: 36px;
}
.reading__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
}
.reading__timer[data-state="near-target"] { color: var(--warn); border-color: var(--warn); }
.reading__timer[data-state="over-target"] {
  color: var(--danger);
  background: var(--danger-tint-strong);
  border-color: var(--danger);
}
.reading__timer[data-state="done"] { color: var(--muted); }
.reading__timer--nudge { animation: reading-nudge 0.6s ease; }
@keyframes reading-nudge {
  0%, 100% { transform: none; }
  30%      { transform: scale(1.06); }
}
.reading__passage {
  margin-bottom: 12px;
}
.reading__passage-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.reading__source {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.reading__passage-text {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.8;
  word-break: break-word;
}
.reading__questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reading__actions {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.reading__actions .btn { flex: 1 1 auto; }
.reading__nudge {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--warn-tint);
  color: var(--warn);
  font-size: var(--fs-sm);
  text-align: center;
}

.quiz__again-wrap { margin: 16px 0; }

/* ---- translation 英译汉 ---- */
.translation__intro {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-base);
}
.translation__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.translation__empty, .translation__loading { color: var(--muted); padding: 12px; text-align: center; font-size: var(--fs-sm); }
.translation__card {
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.translation__card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.translation__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.translation__card:active { transform: translateY(1px); }
.translation__card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.translation__card-id {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: 0 0 auto;
}
.translation__card-source {
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
.translation__card-cta {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 600;
}
.translation__topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.translation__back { padding: 6px 10px; font-size: var(--fs-sm); min-height: 36px; }
.translation__english { margin-bottom: 12px; }
.translation__english-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.translation__source { font-size: var(--fs-xs); color: var(--muted); }
.translation__english-text {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.8;
  word-break: break-word;
}
.translation__compose { margin-bottom: 12px; }
.translation__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.translation__textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.7;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.translation__textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.translation__actions { margin-top: 10px; }
.translation__tips-panel { margin-bottom: 12px; background: var(--primary-tint); }
.translation__tips-title {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 700;
}
.translation__tips-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-base);
}
.translation__tips-list strong { color: var(--text); }
.translation__tips-list span { color: var(--muted); }
.translation__reveal-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.translation__ref-title {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 700;
}
.translation__ref-text {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.8;
  word-break: break-word;
}
.translation__tips-text {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.7;
  word-break: break-word;
}
.translation__score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.translation__slider {
  flex: 1 1 auto;
  accent-color: var(--primary);
  min-height: var(--tap-min);
}
.translation__score-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--primary);
  min-width: 28px;
  text-align: right;
}
.translation__hint { margin-top: 8px; font-size: var(--fs-sm); }
.translation__hint .ok { color: var(--success); }

/* ===== 全真模拟 mock ===== */
.mock__intro {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-md);
}
.mock__loading { color: var(--muted); padding: 12px; text-align: center; font-size: var(--fs-sm); }
.mock__empty { color: var(--muted); text-align: center; padding: var(--space-4); font-size: var(--fs-sm); }

.mock__history-card { padding: 14px 16px; }
.mock__section-title {
  margin: 0 0 10px;
  font-size: var(--fs-md);
  font-weight: 700;
}
.mock__history-hint { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.mock__history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.mock__history-summary strong { color: var(--primary); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }

.mock__chart {
  width: 100%;
  height: auto;
  display: block;
}
.mock__chart-axis { stroke: var(--border); stroke-width: 1; }
.mock__chart-ref { stroke: var(--muted); stroke-width: 0.75; stroke-dasharray: 3 3; opacity: 0.5; }
.mock__chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mock__chart-dot { fill: var(--primary); }
.mock__chart-ylabel, .mock__chart-xlabel {
  fill: var(--muted);
  font-size: 9px;
  text-anchor: end;
}
.mock__chart-xlabel { text-anchor: middle; }
.mock__chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.mock__chart-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.mock__chart-swatch {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.mock__sets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock__card {
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.mock__card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.mock__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mock__card:active { transform: translateY(1px); }
.mock__card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mock__card-id {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: 0 0 auto;
}
.mock__card-title { font-weight: 700; color: var(--text); }
.mock__card-meta { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.mock__card-cta { margin-top: 8px; font-size: var(--fs-sm); color: var(--primary); font-weight: 600; }

/* 考试页 */
.mock__exambar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  background: var(--bg);
  padding: 4px 0;
}
.mock__back { padding: 6px 10px; font-size: var(--fs-sm); min-height: 36px; }
.mock__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: var(--fs-md);
}
.mock__timer[data-state="near-end"] { color: var(--warn); border-color: var(--warn); }
.mock__timer[data-state="end"] {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-tint-strong);
  animation: mock-timer-pulse 1s ease-in-out infinite;
}
@keyframes mock-timer-pulse {
  0%, 100% { transform: none; }
  50% { transform: scale(1.04); }
}

.mock__paper { display: flex; flex-direction: column; gap: 8px; }
.mock__part-title {
  margin: 16px 0 6px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--primary);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.mock__part-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.mock__items { display: flex; flex-direction: column; gap: 10px; }

.mock__passage { margin-bottom: 6px; }
.mock__passage-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.mock__passage-id {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  flex: 0 0 auto;
}
.mock__passage-title { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.mock__passage-text {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.75;
  word-break: break-word;
}

.mock__translation-english {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.mock__compose-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.mock__textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.7;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mock__textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.mock__textarea--tr { min-height: 120px; }
.mock__textarea--writing { min-height: 200px; }

.mock__wordcount {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.mock__wordcount-num { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mock__wordcount.is-enough .mock__wordcount-num { color: var(--success); }

.mock__submit-zone {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mock__answered {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
  margin-bottom: 8px;
}
.mock__answered strong { color: var(--text); font-variant-numeric: tabular-nums; }
.mock__submit-hint { margin-top: 8px; font-size: var(--fs-sm); text-align: center; }

/* 结果阶段 */
.mock__self-assess { padding: 14px 16px; }
.mock__self-intro { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 14px; line-height: var(--lh-md); }
.mock__self-section {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.mock__self-section:first-of-type { border-top: none; }
.mock__self-h3 {
  margin: 0 0 8px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}
.mock__reveal {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.mock__reveal-summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 600;
}
.mock__reveal-body { margin-top: 8px; }
.mock__reveal-block { margin-bottom: 8px; }
.mock__reveal-block:last-child { margin-bottom: 0; }
.mock__reveal-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 4px;
}
.mock__reveal-text {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}
.mock__muted { color: var(--muted); font-style: italic; }
.mock__score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock__slider { flex: 1 1 auto; accent-color: var(--primary); min-height: var(--tap-min); }
.mock__score-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--primary);
  min-width: 32px;
  text-align: right;
}
.mock__self-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock__self-hint { font-size: var(--fs-sm); text-align: center; }

.mock__score { padding: 18px 16px; text-align: center; }
.mock__score-total {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 6px;
}
.mock__score-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mock__score-unit { color: var(--muted); font-size: var(--fs-md); }
.mock__score-breakdown {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: left;
}
.mock__score-line strong { color: var(--text); font-variant-numeric: tabular-nums; }
.mock__score-note {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.mock__score-note--ok { color: var(--success); }

.mock__details-toggle { padding: 12px 16px; }
.mock__details-summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
}
.mock__details-body { margin-top: 12px; }

.mock__reference { padding: 14px 16px; }
.mock__reference-label {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mock__reference-text {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 12px;
  word-break: break-word;
}
.mock__reference-text:last-child { margin-bottom: 0; }

.mock__actions {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.mock__actions .btn { flex: 1 1 auto; }

/* ===== 设置视图 settings ===== */
.settings { display: flex; flex-direction: column; }
.settings__section {
  padding: var(--space-4);
}
.settings__section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.settings__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.settings__form .btn { align-self: flex-start; min-width: 140px; margin-top: var(--space-2); }

.settings__hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-3);
}
.settings__danger {
  border-color: var(--danger-tint-strong);
}
.settings__danger .settings__section-title { color: var(--danger); }
.settings__danger .btn--danger { width: 100%; }

.settings__io-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.settings__io-row .btn { flex: 1 1 auto; min-width: 140px; text-align: center; }
.settings__io-row .btn[for] { cursor: pointer; } /* label-as-button */

/* ===== 登录视图 ===== */
.login {
  max-width: 380px;
  margin: var(--space-6) auto;
}
.login__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: 0 0 var(--space-2);
  text-align: center;
}
.login__hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--space);
}
.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.login__form .btn { margin-top: var(--space-2); }

/* ===== 响应式：移动端优先，逐步增强 ===== */
/* 默认（移动端）：单列，底部 tab bar 横向滚动 */
@media (min-width: 600px) {
  /* 平板：卡片内边距略增，统计区可双列 */
  .app { padding: var(--space-5); }
  .card { padding: var(--space-5); }
}

@media (min-width: 768px) {
  /* 平板横屏：tab bar 文字加大，触控更宽松 */
  .tabbar__entry { min-width: 72px; font-size: var(--fs-sm); }
  .topbar__title { font-size: var(--fs-xl); }
}

@media (min-width: 1024px) {
  /* 桌面：tab bar 转为顶部固定横向导航，不再需要底部滚动条 */
  body { flex-direction: column; }
  .topbar {
    height: auto;
    padding: var(--space-2) var(--space);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .topbar__title { font-size: var(--fs-xl); flex: 0 0 auto; }

  .tabbar {
    position: static;
    height: auto;
    border-top: none;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    box-shadow: none;
    overflow-x: visible;
    justify-content: center;
    flex: 1 1 auto;
    order: 2;
  }
  .tabbar__entry {
    min-height: 48px;
    padding: 12px 16px;
    border-bottom: 3px solid transparent;
    border-top: none;
    border-radius: 0;
  }
  .tabbar__entry:hover { background: transparent; }
  .tabbar__entry.is-active { background: var(--primary-tint); }

  .app {
    padding: var(--space-6);
    padding-bottom: var(--space-6);
    max-width: var(--content-max);
  }

  /* 阅读长文：放宽行宽上限，更舒展 */
  .reading__passage-text, .translation__english-text, .mock__reference-text {
    font-size: var(--fs-md);
  }
}

@media (min-width: 1200px) {
  /* 宽屏：内容区略增，但保持阅读聚焦（不无限拉宽） */
  :root { --content-max: 880px; }
}

/* 超窄屏（≤360px）：缩字号防溢出 */
@media (max-width: 360px) {
  .app { padding: var(--space-3); }
  .card { padding: var(--space-3); }
  .view-title { font-size: var(--fs-lg); }
  .btn { padding: 10px 14px; }
  .mock__score-num { font-size: var(--fs-3xl); }
}