/**
 * 每日英语复习 (v176+) — 界面布局与视觉改版样式表 (redesign.css)
 * ----------------------------------------------------------------------------
 * 加载顺序：请置于 styles.css、grammar-study.css、memory-consolidation.css 之后。
 * 设计原则：
 * 1. 纯展示层覆盖：不修改业务逻辑、不破坏原有 ID / data-* / [hidden] / [disabled] 契约。
 * 2. 护眼耐看：采用 Warm Ivory & Slate Ink 日光学术配色，适合每日长时间阅读与刷题。
 * 3. 结构清晰：桌面端采用「左侧可折叠导航 + 顶部精简状态栏 + 中央专注工作区 + 右侧按需批改抽屉」；
 *    平板与手机端自动转为抽屉式导航与全宽卡片流，确保 1440/1280/768/390/360px 零横向溢出。
 * 4. 克隆节点兼容：使用通用类名与属性选择器（如 [id$="..."]），确保自由学词克隆自预习模块的节点同享样式。
 */

/* ==========================================================================
   1. 设计变量系统 (Design Tokens)
   ========================================================================== */
:root {
  /* 基础背景与表面层级 */
  --bg: #f3f5f9;
  --bg-subtle: #eef2f7;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #f8fafc;
  --panel-warm: #fcfbf7;
  --panel-elevated: rgba(255, 255, 255, 0.96);

  /* 文字层级（满足 WCAG AA/AAA 高对比度要求） */
  --ink: #0f172a;
  --ink-secondary: #334155;
  --muted: #475569;
  --muted-subtle: #64748b;

  /* 品牌主色：沉稳学术蓝 (Academic Cobalt) — 保持 --accent 为主蓝色以兼容 styles.css */
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-deep: #1e40af;
  --brand-soft: #eff6ff;
  --brand-soft-hover: #dbeafe;
  --brand-border: #bfdbfe;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;

  /* 辅助强调色：暖金/琥珀 (用于重点词汇与复核纠偏) */
  --amber: #d97706;
  --amber-strong: #b45309;
  --amber-soft: #fffbeb;
  --amber-border: #fde68a;

  /* 语义状态色（均配文字+边框+底色，色弱友好） */
  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --ok-border: #86efac;

  --warn: #b45309;
  --warn-bg: #fffbeb;
  --warn-border: #fcd34d;

  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-border: #fca5a5;

  --info: #1d4ed8;
  --info-bg: #eff6ff;
  --info-border: #93c5fd;

  --uncertain: #6d28d9;
  --uncertain-bg: #f5f3ff;
  --uncertain-border: #c4b5fd;

  /* 边框与分割线 */
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --line-focus: #3b82f6;

  /* 圆角与阴影 */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px -1px rgba(15, 23, 42, 0.06), 0 1px 3px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 20px -4px rgba(15, 23, 42, 0.08), 0 3px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 36px -8px rgba(15, 23, 42, 0.14), 0 6px 14px -4px rgba(15, 23, 42, 0.06);
  --shadow-drawer: -12px 0 36px rgba(15, 23, 42, 0.16);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* 布局尺寸变量 */
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 0px;
  --inspector-width: 480px;
  --topbar-height: 68px;
  --touch-target: 42px;

  /* 字体栈：英文优先清晰人文衬线/无衬线，中文优先雅黑/苹方 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-reading: "Georgia", "Charter", "Cambria", "Inter", "PingFang SC", "Microsoft YaHei", serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;
}

/* ==========================================================================
   2. 全局重置与铁律保护 ([hidden] / 溢出控制 / 可访问性)
   ========================================================================== */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 防止超长英文单词、JSON 或长句撑破窄屏容器 */
p,
li,
dd,
dt,
td,
th,
label,
.sentence-en,
.sentence-zh,
.preview-card,
.review-card,
.memory-card,
.grading-inspector {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 统一焦点可见性 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   3. 整体应用外壳 (.shell) — 桌面侧栏 + 顶部状态栏 + 主内容区 + 右侧详情栏
   ========================================================================== */
.shell {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 24px 72px calc(var(--sidebar-width) + 36px);
  transition: padding-left 0.22s ease, padding-right 0.22s ease;
  position: relative;
}

/* 当处于未登录界面时，不留左侧导航栏空白 */
.shell:has(#auth-view:not([hidden])) {
  padding-left: 24px !important;
  padding-right: 24px !important;
  max-width: 1160px;
}

/* 桌面端用户手动折叠左侧导航栏 */
body.sidebar-collapsed .shell {
  padding-left: 24px;
}

/* 当右侧批改详情栏 (.grading-inspector) 打开时的桌面端自适应并排布局 */
@media (min-width: 1280px) {
  .shell:has(> .grading-inspector:not([hidden])) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: calc(var(--inspector-width) + 32px);
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  /* 在 1280px 中等桌面宽度下打开右侧详情栏时，适度收窄侧栏与详情栏，保护中央答题区 >= 620px */
  :root {
    --sidebar-width: 216px;
    --inspector-width: 420px;
  }
}

/* ==========================================================================
   4. 顶部状态栏 (.topbar) 与 后台 AI 复核下拉 (#automatic-review-host)
   ========================================================================== */
.topbar {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 20px;
  margin-bottom: 18px;
  background: var(--panel-elevated);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.topbar > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
  flex: 1 1 240px;
}

.topbar .eyebrow {
  margin: 0;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  white-space: normal;
  max-width: 100%;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.topbar:has(#automatic-review-tasks:not([hidden])) {
  z-index: 95;
}
.topbar .subtle {
  display: none;
}

.session-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

#user-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 6px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  max-width: 100%;
}

/* 顶部后台 AI 复核状态栏 (#automatic-review-host) */
#automatic-review-host,
.automatic-review-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--ink-secondary);
  max-width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* 当有正在运行或排队中的 AI 复核任务时，呈现温和的蓝色高亮边框与呼吸感 */
#automatic-review-host:has(.ai-review-badge-processing),
#automatic-review-host[data-running="true"],
.automatic-review-bar:has(.ai-review-badge-processing),
.automatic-review-bar[data-running="true"] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

#automatic-review-host > span[role="status"],
.automatic-review-bar > span[role="status"] {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-basis: auto;
}

#automatic-review-host > span[role="status"]::before,
.automatic-review-bar > span[role="status"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
}

#automatic-review-host > button.ghost.small,
.automatic-review-bar > button.ghost.small {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--line-strong);
}

#automatic-review-host > button.ghost.small:hover,
.automatic-review-bar > button.ghost.small:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

#automatic-review-host > .automatic-review-notice,
.automatic-review-notice {
  flex-basis: auto;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber-strong);
  padding: 2px 9px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-pill);
}

/* 后台 AI 复核任务下拉面板 (#automatic-review-tasks) — 浮层展开，不挤压页面正文 */
.automatic-review-tasks {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: min(72vh, 520px);
  overflow-y: auto;
  z-index: 80;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.automatic-review-tasks > p.muted {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.automatic-review-task-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.automatic-review-task-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.45;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.automatic-review-task-list > li:hover {
  background: #ffffff;
  border-color: var(--brand-border);
}

/* ==========================================================================
   5. 醒目的“AI已复核”系列徽章 (.ai-review-badge) — 7种状态严格视觉区分
   同时兼容单连字符 (.ai-review-badge-*) 与原版双连字符 (.ai-review-badge--*)
   ========================================================================== */
.ai-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 11px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: normal;
  max-width: 100%;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* 1 & 2. 已完成复核 / 维持原判 */
.ai-review-badge-completed,
.ai-review-badge--complete,
.ai-review-badge-unchanged,
.ai-review-badge--unchanged {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

/* 3. 已纠正原判 (高优先级醒目琥珀金：提醒用户AI推翻或修正了机械初判) */
.ai-review-badge-corrected,
.ai-review-badge--corrected {
  color: var(--amber-strong);
  background: var(--amber-soft);
  border-color: var(--warn-border);
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.1);
}

/* 4. 正在AI复核 (动态脉冲蓝) */
.ai-review-badge-processing,
.automatic-review-task-status.is-running,
.automatic-review-task-status.is-settling {
  color: var(--info);
  background: var(--info-bg);
  border-color: var(--info-border);
  animation: aiBadgePulse 2s infinite ease-in-out;
}

/* 5. 排队待复核 (柔和灰蓝虚线框) */
.ai-review-badge-queued {
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
}

/* 6. 复核存疑 (紫色警示框) */
.ai-review-badge-uncertain,
.ai-review-badge--uncertain {
  color: var(--uncertain);
  background: var(--uncertain-bg);
  border-color: var(--uncertain-border);
}

/* 7. 复核失败 / 异常 (绯红警示框) */
.ai-review-badge-failed,
.automatic-review-task-status.is-failed,
.automatic-review-task-status.is-unknown {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* 本地参考答案核对标识（严禁冒充 AI 已复核） */
.local-check-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-subtle);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

@keyframes aiBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* ==========================================================================
   6. 导航系统重构 (#navigation-tabs 与 分组筛选栏 / 菜单顺序编辑器)
   --------------------------------------------------------------------------
   关键保护：#navigation-tabs 的直接子元素必须保持为 20 个 <button class="tab" data-view="...">
   以完全兼容 navigation-preferences.js 的 [...nav.children] 校验与 appendChild 重排！
   ========================================================================== */

/* 桌面端：固定在左侧的清爽导航侧边栏 */
@media (min-width: 1024px) {
  #navigation-tabs {
    position: fixed;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: var(--sidebar-width);
    z-index: 45;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px 10px 18px;
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  /* 当页面顶部存在可见的演示预览控制台 (.demo-workbench-bar) 时，自动下移侧栏与右侧详情栏起点，避免被遮挡 */
  body:not(.is-embedded-preview):has(.demo-workbench-bar) #navigation-tabs,
  body:not(.is-embedded-preview):has(.demo-workbench-bar) .grading-inspector {
    top: 100px;
  }
  body:has(#demo-viewport-stage:not([hidden])) #navigation-tabs,
  body:has(#demo-viewport-stage:not([hidden])) .grading-inspector {
    display: none !important;
  }

  /* 侧栏顶部品牌与分组提示头（使用 ::before 伪元素，不增加 DOM 子节点，100% 兼容 navigation-preferences.js） */
  #navigation-tabs::before {
    content: attr(data-nav-title);
    display: block;
    padding: 6px 12px 10px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-subtle);
    border-bottom: 1px solid var(--line);
  }

  #navigation-tabs:not([data-nav-title])::before {
    content: "学习导航 · 支持自定义顺序";
  }

  body.sidebar-collapsed #navigation-tabs {
    transform: translateX(calc(-100% - 24px));
    opacity: 0;
    pointer-events: none;
  }
}

/* 导航分组筛选辅助栏（位于主工作区顶部或侧栏上方，独立于 #navigation-tabs 之外） */
.nav-Shell-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.nav-category-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nav-category-pill {
  min-height: 34px;
  padding: 4px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-category-pill:hover {
  color: var(--brand);
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

.nav-category-pill.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* 导航按钮 (.tab) 样式 */
#navigation-tabs > .tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  color: var(--ink-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.1s ease;
  box-shadow: none;
}

#navigation-tabs > .tab:hover {
  color: var(--brand-strong);
  background: var(--brand-soft);
  border-color: var(--brand-border);
  transform: none;
}

#navigation-tabs > .tab.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand-strong);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.24);
}

/* 为三大高频核心模块提供微徽章提示 */
#navigation-tabs > .tab[data-view="review"]::after,
#navigation-tabs > .tab[data-view="preview"]::after,
#navigation-tabs > .tab[data-view="progress"]::after {
  content: "核心";
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand);
}

#navigation-tabs > .tab.active::after {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

/* 当用户在顶部分组筛选器选择了特定分类时，过滤非本分类导航项（绝不改变 DOM 顺序） */
#navigation-tabs[data-filter="core"] > .tab:not([data-view="progress"]):not([data-view="review"]):not([data-view="preview"]):not([data-view="free-vocabulary"]):not([data-view="grammar-study"]):not([data-view="self-study"]),
#navigation-tabs[data-filter="practice"] > .tab:not([data-view="focused-fill"]):not([data-view="stage-exam"]):not([data-view="dictation"]):not([data-view="pronunciation"]):not([data-view="reading-benchmark"]):not([data-view="mistake-book"]),
#navigation-tabs[data-filter="records"] > .tab:not([data-view="abilities"]):not([data-view="learning-history"]):not([data-view="learning-documents"]):not([data-view="ai"]),
#navigation-tabs[data-filter="library"] > .tab:not([data-view="library"]):not([data-view="vocabulary-plans"]):not([data-view="course-sync"]):not([data-view="offline"]) {
  display: none !important;
}

/* 自定义菜单顺序编辑器 (#navigation-editor) */
.navigation-editor {
  margin-bottom: 18px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.navigation-order-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

.navigation-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ==========================================================================
   7. 二级工作区导航 (.workspace-tabs) — 吸顶分段胶囊栏
   ========================================================================== */
.workspace-tabs {
  position: sticky;
  top: 84px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  margin: 0 0 18px;
  background: rgba(241, 245, 249, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.workspace-tabs > button,
.workspace-tab {
  flex: 0 1 auto;
  min-height: 38px;
  padding: 7px 15px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none;
}

.workspace-tabs > button:hover,
.workspace-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.65);
}

.workspace-tabs > button.active,
.workspace-tab.active {
  color: var(--brand-strong);
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-color: var(--line);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   8. 通用面板、卡片、表单与按钮层级系统
   ========================================================================== */
.panel,
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.section-head h2,
.section-head h3,
.section-head h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}

.section-head p.muted {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* 按钮层级规范：主按钮实心蓝、次按钮白底描边、危险操作弱化红框 */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--touch-target);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  background: var(--brand);
  border: 1px solid var(--brand-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
}

button:hover:not(:disabled) {
  background: var(--brand-strong);
  border-color: var(--brand-deep);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button.ghost,
button.secondary {
  color: var(--ink-secondary);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
}

button.ghost:hover:not(:disabled),
button.secondary:hover:not(:disabled) {
  color: var(--brand-strong);
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

button.danger,
button.ghost.danger {
  color: var(--danger);
  background: var(--panel);
  border-color: var(--danger-border);
}

button.danger:hover:not(:disabled),
button.ghost.danger:hover:not(:disabled) {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
}

button.small {
  min-height: 36px;
  padding: 5px 12px;
  font-size: 0.84rem;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.58;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 输入框与选择器 */
input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: var(--touch-target);
  padding: 9px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: #94a3b8;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

.inline-input {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.inline-input > input,
.inline-input > select {
  width: auto;
  min-width: 120px;
  max-width: 100%;
  flex: 1 1 auto;
}

/* ==========================================================================
   9. 重点页面一：正式复习 (#review-view) — 答题卡、整库单词复习、批改列表
   ========================================================================== */

/* 复习概览指标网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat-card {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.stat-card span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.stat-card strong {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* 正式复习与整库单词复习答题区卡片 (.review-card / .word-review-card) */
.review-card,
.word-review-item,
.grading-record-card,
.daily-mistake-card {
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.review-card:hover,
.word-review-item:hover,
.grading-record-card:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-sm);
}

/* 题目英文主词条 / 题干放大突出 */
.review-prompt-word,
.review-card h4,
.word-review-head strong {
  font-family: var(--font-reading);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

/* 整库单词复习：底部/顶部整组交卷主操作区突出展示 */
.word-review-submit-bar,
.review-batch-actions {
  position: sticky;
  bottom: 16px;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  margin-top: 18px;
  background: var(--panel-elevated);
  backdrop-filter: blur(12px);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   10. 重点页面二：预习模块三 (#preview-view) 与 自由学词克隆区 (#free-vocabulary-view)
   ========================================================================== */

/* 模块1 / 模块2 / 模块3 顶层切换栏 */
.preview-module-tabs,
[id$="preview-words-module-tabs"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.preview-module-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px;
  text-align: left;
  color: var(--ink-secondary);
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: none;
}

.preview-module-tab strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.preview-module-tab small {
  font-size: 0.8rem;
  color: var(--muted);
}

.preview-module-tab.active {
  color: var(--brand-strong);
  background: var(--brand-soft);
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-xs);
}

.preview-module-tab.active small {
  color: var(--brand);
  font-weight: 600;
}

/* 预习模块控制头：分类 Tab（单词/句子/补充词形/学习重点） + 全局遮罩 + 统一重置按钮 */
.preview-module-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.preview-category-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

/* 预习单词与句子卡片 (.preview-card) */
.preview-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.preview-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}

.preview-word-title {
  font-family: var(--font-reading);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.preview-phonetic {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--muted);
  padding: 2px 8px;
  background: var(--panel-soft);
  border-radius: var(--radius-xs);
}

/* 遮罩态 (.masked)：柔和毛玻璃条，点击或切换即可查看 */
.masked {
  color: transparent !important;
  background: repeating-linear-gradient(
    -45deg,
    #e2e8f0,
    #e2e8f0 8px,
    #f1f5f9 8px,
    #f1f5f9 16px
  ) !important;
  border-radius: var(--radius-xs);
  user-select: none;
  padding: 2px 10px;
  display: inline-block;
  min-width: 120px;
}

/* 预习卡片底部回忆输入与确认对比区 (.preview-recall-box) */
.preview-recall-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.preview-recall-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.preview-recall-input-row > input {
  flex: 1 1 240px;
  background: #ffffff;
}

/* ==========================================================================
   11. 重点页面三：记忆巩固 (.memory-consolidation) — 错词例句、折叠本句词义、隔题订正与每题AI核对
   ========================================================================== */
.memory-consolidation {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 顶部日期与操作工具栏 */
.memory-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.memory-date-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.memory-date-controls input[type="date"] {
  width: auto;
  min-width: 152px;
  min-height: 38px;
  padding: 5px 10px;
  font-weight: 700;
  color: var(--ink);
  background: #ffffff;
}

/* 付费 AI 生成/修复/词义补全控制区（次级视觉权重，清晰展示配额与回执锁） */
.memory-paid-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
}

/* 题号顺序与隔题订正导航条 */
.memory-question-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.memory-q-pill {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-secondary);
}

.memory-q-pill.current {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand-strong);
}

.memory-q-pill.done {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.memory-q-pill.retry {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

/* 错词例句展示区 (.memory-sentence 与真实系统 .memory-context 同享样式) */
.memory-sentence,
.memory-consolidation .memory-context {
  margin: 0;
  padding: 18px 22px;
  font-family: var(--font-reading);
  font-size: clamp(1.15rem, 1.9vw, 1.38rem);
  line-height: 1.75;
  color: var(--ink);
  background: var(--panel-warm);
  border: 1px solid #e7e5e4;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
}

.memory-sentence mark,
.memory-consolidation .memory-context mark {
  padding: 2px 7px;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  border-bottom: 2px solid #f59e0b;
  border-radius: 4px;
}

/* 折叠“本句词义”卡片 (details.memory-glossary) */
.memory-glossary {
  margin: 6px 0;
  padding: 0;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.memory-glossary[open] {
  background: #ffffff;
  border-color: var(--brand-border);
  box-shadow: var(--shadow-xs);
}

.memory-glossary > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-strong);
  background: var(--brand-soft);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.memory-glossary > summary::-webkit-details-marker {
  display: none;
}

.memory-glossary > summary::after {
  content: "展开词义与短语 ▾";
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
}

.memory-glossary[open] > summary::after {
  content: "收起词义 ▴";
}

.memory-glossary-body {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
  font-size: 0.925rem;
}

.memory-glossary-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.memory-glossary-item dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.memory-glossary-item dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* 挖空题未提交前的词义防剧透锁定条 */
.memory-glossary-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-subtle);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

/* 每题答案自动 AI 核对流水列表 (.memory-verification-list) */
.memory-verification-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.memory-verification-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   12. 统一右侧批改详情栏 (.grading-inspector)
   --------------------------------------------------------------------------
   铁律：默认收起 ([hidden])，登录/刷新/后台完成绝不自动弹出；
   桌面端停靠右侧分栏，平板/手机端作为高可读抽屉滑出。
   ========================================================================== */
.grading-inspector {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: var(--inspector-width);
  max-width: calc(100vw - 24px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-drawer);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.grading-inspector-head {
  position: sticky;
  top: -20px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 14px;
  margin-top: -16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.grading-inspector-head h4 {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.grading-inspector-section {
  padding: 14px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.grading-inspector-section h5 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   13. 自由学词课日区分 & 语法学习卡片增强
   ========================================================================== */
.free-day-distinction-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.free-day-box {
  padding: 14px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.free-day-box.primary-day {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

.free-day-box.cutoff-day {
  background: var(--amber-soft);
  border-color: var(--amber-border);
}

/* ==========================================================================
   14. 状态反馈组件：加载中、空状态、错误态、待确认回执锁
   ========================================================================== */
.state-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 600;
}

.state-banner.loading {
  color: var(--info);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
}

.state-banner.empty {
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
}

.state-banner.error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}

.state-banner.receipt-lock {
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
}

/* ==========================================================================
   15. 响应式断点适配 (1024px / 768px / 390px / 360px)
   ========================================================================== */

/* 平板端与窄桌面 (< 1024px)：左侧导航转为可折叠网格面板，主工作区全宽 */
@media (max-width: 1023px) {
  .shell {
    padding: 12px 16px 64px !important;
  }

  #navigation-tabs {
    position: relative;
    top: auto !important;
    left: auto;
    bottom: auto;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 6px;
    padding: 12px;
    margin-bottom: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    max-height: none;
    overflow-x: hidden;
  }

  /* 支持在平板/手机端一键折叠全部 20 个导航网格，释放首屏空间 */
  body.mobile-nav-collapsed #navigation-tabs {
    display: none !important;
  }

  .grading-inspector {
    top: 0 !important;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    max-width: 100vw;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

/* 手机端 (<= 768px，含 390px 与 360px 基准机型) */
@media (max-width: 768px) {
  :root {
    --touch-target: 44px;
  }

  .shell {
    padding: 10px 12px 72px !important;
  }

  .topbar {
    position: relative;
    top: 0;
    padding: 12px 14px;
    gap: 10px;
  }

  .session-box {
    width: 100%;
    justify-content: flex-start;
  }

  #automatic-review-host,
  .automatic-review-bar {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--radius-md);
  }

  .automatic-review-tasks {
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    bottom: 12px;
    width: auto;
    max-height: 75vh;
    z-index: 95;
  }

  .nav-category-pills {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav-category-pills::-webkit-scrollbar {
    display: none;
  }

  .nav-category-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .workspace-tabs {
    top: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 6px;
    scrollbar-width: none;
  }

  .workspace-tabs::-webkit-scrollbar {
    display: none;
  }

  .workspace-tabs > button,
  .workspace-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .inline-input {
    width: 100%;
  }

  .inline-input > input,
  .inline-input > select {
    width: 100%;
    min-width: 0;
  }

  .panel,
  .card,
  .review-card,
  .word-review-item,
  .grading-record-card,
  .daily-mistake-card,
  .preview-card {
    padding: 14px 14px;
    border-radius: var(--radius-md);
  }

  .word-review-submit-bar,
  .review-batch-actions {
    position: static;
    padding: 12px 14px;
  }

  .word-review-submit-bar .control-row,
  .review-batch-actions .control-row {
    width: 100%;
  }

  .word-review-submit-bar button,
  .review-batch-actions button {
    width: 100%;
  }

  .grading-inspector {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    padding: 16px 14px 32px;
  }
}

/* 极窄屏手机 (<= 395px，覆盖 390px 与 360px) 精细调优 */
@media (max-width: 395px) {
  .shell {
    padding: 8px 8px 64px !important;
  }

  #navigation-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  #navigation-tabs > .tab {
    padding: 8px 8px;
    font-size: 0.85rem;
  }

  .memory-date-controls {
    width: 100%;
    justify-content: space-between;
  }

  .memory-date-controls input[type="date"] {
    width: 100%;
    order: -1;
  }

  .preview-recall-input-row > input,
  .preview-recall-input-row > button {
    width: 100%;
    flex: 1 1 100%;
  }
}