:root {
  color-scheme: light;
  --bg: #f5f1e8;
  --surface: #fffdf8;
  --surface-subtle: #eee9df;
  --surface-raised: #fff7cf;
  --text: #1a1a1a;
  --text-soft: #4f4d47;
  --text-faint: #6a6a6a;
  --border: #d8d2c5;
  --border-strong: #aaa59a;
  --accent: #ffd24d;
  --accent-hover: #ffc82e;
  --accent-soft: #fff2ad;
  --accent-border: #dfbf3d;
  --accent-ink: #6d5600;
  --success: #16845b;
  --success-soft: #e8f7f0;
  --success-border: #b9e1ce;
  --warning: #b35d00;
  --warning-soft: #fff1d6;
  --warning-border: #efc47c;
  --danger: #c2413a;
  --danger-soft: #fff0ee;
  --blue: #2563a6;
  --blue-soft: #eaf3ff;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.035), 0 5px 14px rgba(26, 26, 26, 0.025);
  --shadow-md: 0 14px 36px rgba(26, 26, 26, 0.09);
  --radius-sm: 10px;
  --radius: 15px;
  --radius-lg: 21px;
  --sidebar-width: 248px;
  --drawer-w: 424px;       /* 右侧抽屉（AI 解读 / 学习笔记）的统一宽度 */
  --drill-dock-h: 78px;    /* 刷题页底部操作栏高度，右侧抽屉要给它让位 */
  /* 等宽字体令牌：用于阶段标签、时间、进度与置信度。
     注意：styles.css 里有 20+ 处写的是 font: ... var(--mono)，
     含无效 var() 的 font 简写会整条失效，所以这个令牌必须始终有定义。 */
  --mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ===========================================================================
   字号阶（2026-09-20 全站重建，改字号前先读这一段）
   ---------------------------------------------------------------------------
   旧状：styles.css 里 735/1231 条字号声明低于 12px（7px 63 处、8px 169 处、
   9px 162 处、10px 120 处），最小 6px。正文与微标签挤在 8–10px，长文阅读困难。

   现行阶梯（只允许用这几档，不要再随手写 7px/9px/11px）：

     micro   12px    角标、单位后缀（每题 / 每页）、计数、年份、极次要注释
     meta    12.5px  元信息行、辅助说明、标签
     body    13.5px  正文、列表项、卡片描述
     strong  14px    卡片正文、按钮、强调
     标题阶  15 / 16 / 17 / 19 / 20 / 24 / 31 / 38 / 48 …
     （15px 以上保持原设计，不再按比例缩放）

   两条配套规则：
   1) 正文下限 12px；只有纯装饰性角标允许到 11.5px，其余一律不低于 12px。
   2) 层级靠「字号 + 字重 + 颜色」三者共同表达，不要只靠把字调到更浅：
      ≤13.5px 的文字用 --text-soft（#4f4d47，暖白底 7.6:1），
      12–12.5px 的微标签可用 --text-faint（#6a6a6a，暖白底 4.8:1，达 WCAG AA）。
   历史坑：v1 曾把 6–13.5px 无差别压进 12–14px，结果微标签和正文同级、
   层级反而消失——抬升必须保持阶梯，不能压平。
   =========================================================================== */

/* 2026-08 graduate exam coverage, paper detail, daily limits and single-session flow */
.active-session-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  background: linear-gradient(100deg, var(--accent-soft), var(--surface) 78%);
  box-shadow: var(--shadow-sm);
}

.active-session-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #111827;
  background: var(--accent);
}

.active-session-banner > div:nth-child(2) { display: grid; gap: 3px; }
.active-session-banner > div:nth-child(2) > span { color: var(--accent-ink); font-size: 12.5px; font-weight: 650; }
.active-session-banner > div:nth-child(2) > strong { font-size: 13.5px; }
.active-session-banner > div:nth-child(2) > small { color: var(--text-faint); font-size: 12.5px; }
.active-session-actions { display: flex; gap: 7px; }

body.subject-setup-open { overflow: hidden; }

.subject-setup-backdrop {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(16, 16, 14, 0.5);
  backdrop-filter: blur(7px);
}

.subject-setup-backdrop[hidden] { display: none; }

.subject-setup-card {
  width: min(760px, 100%);
  max-height: min(820px, calc(100vh - 44px));
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: modal-in 180ms ease-out;
}

.subject-setup-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 15px;
}

.subject-setup-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #111827;
  background: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(122, 85, 0, 0.14);
}

.subject-setup-icon svg { width: 22px; height: 22px; }
.subject-setup-heading h2 { font-size: 24px; letter-spacing: -0.025em; }
.subject-setup-heading .eyebrow { margin-bottom: 6px; }
.subject-setup-heading p:last-child { max-width: 620px; margin: 8px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.65; }

.subject-selection-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--accent-soft);
  font-size: 12.5px;
}

.subject-selection-status strong { color: var(--text); font-size: 14px; }
.subject-selection-status span:last-child { color: var(--accent-ink); text-align: right; }

.subject-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.subject-option {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.subject-option:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface-raised); }
.subject-option.is-selected { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.subject-option.is-blocked { color: var(--text-faint); background: var(--surface-subtle); cursor: not-allowed; }
.subject-option.is-blocked:hover { transform: none; border-color: var(--border); }

.subject-option-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: #111827;
  background: var(--surface);
}

.subject-option.is-selected .subject-option-check { border-color: var(--accent); background: var(--accent); }
.subject-option-copy { display: grid; gap: 5px; }
.subject-option-copy strong { font-size: 14px; }
.subject-option-copy small { color: var(--text-faint); font-size: 12.5px; line-height: 1.45; }
.subject-option-code { padding: 3px 6px; border-radius: 6px; color: var(--text-faint); background: var(--surface-subtle); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.subject-option em { grid-column: 2 / -1; color: var(--warning); font-size: 12px; font-style: normal; line-height: 1.4; }

.subject-setup-error { min-height: 18px; margin: 9px 0 2px; color: var(--warning); font-size: 12.5px; }
.subject-setup-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 13px; border-top: 1px solid var(--border); }
.subject-setup-actions [hidden] { display: none; }
.subject-setup-actions .button { min-width: 142px; }

.daily-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.daily-limit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.daily-limit-card > div:nth-child(2) { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; }
.daily-limit-card > div:nth-child(2) > span { color: var(--text-soft); font-size: 12.5px; }
.daily-limit-card > div:nth-child(2) > strong { font-size: 13.5px; }
.daily-limit-card > div:nth-child(2) > small { grid-column: 1 / -1; color: var(--text-faint); font-size: 12px; }
.daily-limit-card > .usage-bar { grid-column: 1 / -1; }

.daily-quota-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--accent-soft);
  font-size: 12.5px;
}

.daily-quota-note svg { color: var(--accent-ink); }
.daily-quota-note strong { color: var(--text); }

.paper-card-preview { position: relative; }
.paper-issue-count {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  border-radius: 7px;
  color: var(--warning);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  font-size: 12px;
}

.paper-record-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 13px;
}

.paper-record-counts span {
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-faint);
  background: var(--surface-subtle);
  font-size: 12px;
}

.paper-ready-actions { display: grid; grid-template-columns: auto 1fr; gap: 6px; }

.detail-page-heading { margin-bottom: 18px; }
.detail-page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 10px; }
.detail-page-title > div:first-child { max-width: 720px; }
.detail-page-title h1 { margin: 7px 0 8px; }
.detail-page-title p { color: var(--text-soft); font-size: 13.5px; line-height: 1.65; }
.detail-page-actions { display: flex; gap: 8px; }

.paper-detail-summary {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 14px;
  margin-bottom: 14px;
}

.paper-detail-cover,
.ocr-health-card,
.paper-detail-panel,
.paper-version-panel,
.paper-history-cards article {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.paper-detail-cover { display: flex; align-items: center; gap: 18px; padding: 20px; }
.paper-detail-cover > .paper-cover { width: 72px; height: 98px; flex: 0 0 auto; transform: rotate(-2deg); box-shadow: 5px 7px 0 color-mix(in srgb, var(--border) 55%, transparent); }
.paper-detail-cover > div { display: grid; justify-items: start; gap: 7px; }
.paper-detail-cover strong { font-size: 18px; }
.paper-detail-cover small { color: var(--text-faint); font-size: 12.5px; }

.ocr-health-card { padding: 20px; }
.ocr-health-card > div:first-child { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.ocr-health-card > div:first-child span { color: var(--text-soft); font-size: 12.5px; }
.ocr-health-card > div:first-child strong { font-size: 22px; }
.ocr-health-card ul { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.ocr-health-card li { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 12.5px; }
.ocr-health-card li svg { color: var(--success); }
.ocr-health-card li:last-child svg { color: var(--warning); }

.paper-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
.paper-detail-panel, .paper-version-panel { padding: 18px; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.panel-title-row p { margin-top: 4px; color: var(--text-faint); font-size: 12.5px; }
.issue-list { display: grid; }
.issue-list > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--border); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.issue-list > button:last-child { border-bottom: 0; }
.issue-list > button > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); font: 600 12.5px var(--mono); }
.issue-list strong { font-size: 12.5px; }
.issue-list p { margin-top: 4px; color: var(--text-faint); font-size: 12.5px; }
.issue-list em { color: var(--text-faint); font-size: 12px; font-style: normal; }
.detail-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--text-faint); text-align: center; }
.detail-empty svg { color: var(--success); }
.detail-empty strong { color: var(--text); font-size: 13.5px; }
.detail-empty span { font-size: 12.5px; }
.paper-version-panel { align-self: start; }
.paper-version-panel h2 { margin-bottom: 13px; }
.paper-version-panel dl { margin: 0 0 15px; }
.paper-version-panel dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.paper-version-panel dt { color: var(--text-faint); font-size: 12.5px; }
.paper-version-panel dd { margin: 0; font-size: 12.5px; font-weight: 550; }
.paper-version-panel .button { width: 100%; }

.paper-history-section { margin-top: 24px; }
.paper-history-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paper-history-cards article { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 17px; }
.paper-history-cards article > span { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12.5px; }
.paper-history-cards article > strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 21px; }
.paper-history-cards p { color: var(--text-faint); font-size: 12.5px; }
.paper-history-cards button { justify-self: start; padding: 4px 0; border: 0; color: var(--accent-ink); background: transparent; cursor: pointer; font-size: 12.5px; }

.library-subject-filter { flex: 1 1 560px; }
.library-subject-filter .filter-tabs { display: flex; flex-wrap: wrap; }
.mode-option > small { display: block; margin-top: 10px; color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }

.subject-case-panel {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 58%);
  box-shadow: var(--shadow-sm);
}

.subject-case-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-border) 55%, var(--border));
}

.subject-case-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #111827;
  background: var(--accent);
}

.subject-case-head > div > span,
.subject-tool-preview > span {
  color: var(--accent-ink);
  font: 650 12px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.subject-case-head h2 {
  max-width: 740px;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.paper-structure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.paper-structure-grid > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.paper-structure-grid span { color: var(--text-faint); font: 12px var(--mono); }
.paper-structure-grid strong { display: block; margin: 6px 0 5px; font-size: 12.5px; }
.paper-structure-grid p { color: var(--text-soft); font-size: 12px; line-height: 1.5; }

.subject-tool-preview {
  display: grid;
  grid-template-columns: 110px repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
  margin-top: 10px;
}

.subject-tool-preview > span { display: flex; align-items: center; }
.subject-tool-preview button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 6px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
}

.subject-tool-preview button svg { color: var(--accent-ink); }
.subject-tool-preview button small { grid-column: 1 / -1; color: var(--text-faint); font-size: 12px; font-weight: 450; line-height: 1.45; }

.mode-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.mode-feature-pills span {
  padding: 4px 6px;
  border-radius: 99px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 600;
}

.setup-practice-preview {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  margin: 0 26px 22px;
  padding: 14px;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  background: var(--accent-soft);
}

.setup-practice-preview > div:first-child { display: grid; align-content: center; gap: 5px; }
.setup-practice-preview > div:first-child span { display: flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: 12.5px; font-weight: 650; }
.setup-practice-preview > div:first-child strong { font-size: 12.5px; line-height: 1.5; }
.setup-practice-preview > div:last-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.setup-practice-preview button { padding: 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); cursor: pointer; text-align: left; }
.setup-practice-preview button b { display: block; font-size: 12.5px; }
.setup-practice-preview button small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 12px; line-height: 1.45; }

.daily-rule-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -5px 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.daily-rule-panel > div { display: flex; align-items: center; gap: 9px; }
.daily-rule-panel > div > svg { color: var(--accent-ink); }
.daily-rule-panel > div span { display: grid; gap: 3px; }
.daily-rule-panel > div strong { font-size: 12.5px; }
.daily-rule-panel > div small { color: var(--text-faint); font-size: 12px; }
.daily-rule-panel ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.daily-rule-panel li { padding: 6px 8px; border-radius: 7px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12px; }

.records-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.record-daily-count { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); }
.record-daily-count span { color: var(--text-faint); font-size: 12px; }
.record-daily-count strong { display: block; margin-top: 3px; color: var(--text); font-size: 13.5px; }
.records-mode-tabs { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 10px; background: var(--surface-subtle); }
.records-mode-tabs button { min-height: 34px; padding: 7px 13px; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; cursor: pointer; font-size: 12.5px; }
.records-mode-tabs button.is-active { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }
.record-status { display: inline-block; padding: 5px 7px; border-radius: 7px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12px; }

.mistake-source-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mistake-source-tabs > span { color: var(--text-faint); font-size: 12.5px; }
.mistake-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.source-type-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; }
.source-type-pill.exam { color: var(--accent-ink); background: var(--accent-soft); }
.source-type-pill.practice { color: var(--text-soft); background: var(--surface-subtle); }

@media (max-width: 900px) {
  .paper-detail-summary, .paper-detail-layout { grid-template-columns: 1fr; }
  .paper-version-panel { width: 100%; }
  .daily-rule-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) {
  .active-session-banner { grid-template-columns: auto 1fr; }
  .active-session-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .daily-limit-grid { grid-template-columns: 1fr; }
  .detail-page-title, .records-intro { align-items: stretch; flex-direction: column; }
  .detail-page-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .paper-detail-summary { grid-template-columns: 1fr; }
  .paper-detail-cover > .paper-cover { display: block; }
  .panel-title-row { align-items: stretch; flex-direction: column; }
  .issue-list > button { grid-template-columns: auto minmax(0, 1fr) auto; }
  .issue-list em { display: none; }
  .paper-history-cards { grid-template-columns: 1fr; }
  .daily-rule-panel ul { width: 100%; display: grid; grid-template-columns: 1fr; }
  .record-daily-count { width: 100%; }
  .mistake-source-tabs { align-items: stretch; flex-direction: column; }
  .mistake-source-tabs .filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181817;
  --surface: #232321;
  --surface-subtle: #2e2d29;
  --surface-raised: #29271f;
  --text: #f6f3eb;
  --text-soft: #cbc6ba;
  --text-faint: #999489;
  --border: #3f3d38;
  --border-strong: #5b5850;
  --accent: #ffd24d;
  --accent-hover: #ffdc70;
  --accent-soft: #3b3418;
  --accent-border: #6d5e21;
  --accent-ink: #ffe386;
  --success: #55c795;
  --success-soft: #17372c;
  --success-border: #2f604c;
  --warning: #f0ab5c;
  --warning-soft: #3c2d1d;
  --warning-border: #674a24;
  --danger: #ef8a83;
  --danger-soft: #3e2727;
  --blue: #a6c9ee;
  --blue-soft: #26374a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 5px 14px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.26);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 56%, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1.5px);
  background-size: 17px 19px, 23px 29px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
}

svg {
  display: block;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.brand-row,
.brand,
.nav-item,
.account-card,
.topbar,
.topbar-left,
.topbar-actions,
.breadcrumb,
.section-heading,
.button,
.status-pill,
.paper-row,
.list-meta,
.inline-actions,
.stepper,
.step,
.upload-specs,
.file-meta,
.recognition-state,
.issue-banner,
.editor-toolbar,
.field-label,
.exam-topbar,
.exam-status,
.exam-controls,
.option,
.result-score,
.filter-tabs,
.filter-button,
.settings-row,
.toast,
.login-brand {
  display: flex;
  align-items: center;
}

.brand-row {
  justify-content: space-between;
  padding: 2px 4px 14px;
}

.brand {
  gap: 11px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.brand-mark {
  width: 48px;
  height: 39px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  transition: transform 180ms ease;
}

.brand:hover .brand-mark { transform: translate(2px, -1px) rotate(-5deg); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
[data-theme="dark"] .brand-mark { padding: 2px; border-radius: 9px 6px 10px 7px; background: #f6f3eb; }

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font: 800 14px/1 "Chalkboard SE", "Comic Sans MS", "Kaiti SC", cursive;
  letter-spacing: .08em;
}

.brand-copy small,
.account-copy small {
  color: var(--text-faint);
  font-size: 12.5px;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  color: var(--text-soft);
}

.icon-button:hover {
  color: var(--text);
  background: var(--surface-subtle);
  border-color: var(--border);
}

.sidebar-close,
.mobile-menu {
  display: none;
}

.nav-groups {
  display: grid;
  gap: 24px;
}

.nav-group {
  display: grid;
  gap: 3px;
}

.nav-label {
  margin: 0 10px 6px;
  color: var(--text-faint);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-item {
  position: relative;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
}

.nav-item:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.nav-item.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent-border);
  box-shadow: none;
}

.nav-item svg {
  width: 17px;
  height: 17px;
}

.nav-item span:nth-child(2) {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.nav-item kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-bottom-color: var(--border-strong);
  border-radius: 5px;
  color: var(--text-faint);
  background: var(--surface-subtle);
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nav-item em {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--border);
  font-size: 12.5px;
  font-style: normal;
  text-align: center;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-collapse {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.sidebar-collapse:hover {
  color: var(--text);
  background: var(--surface-subtle);
}

.sidebar-collapse svg { flex: 0 0 auto; }

@media (min-width: 901px) {
  .app-shell,
  .sidebar,
  .brand-copy,
  .nav-item span:nth-child(2),
  .nav-label,
  .nav-item em,
  .nav-item kbd,
  .sidebar-collapse span {
    transition: 180ms ease;
  }

  .app-shell.is-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .app-shell.is-sidebar-collapsed .sidebar {
    padding-inline: 10px;
  }

  .app-shell.is-sidebar-collapsed .brand-row {
    justify-content: center;
    padding-inline: 0;
  }

  .app-shell.is-sidebar-collapsed .brand {
    padding: 2px;
  }

  .app-shell.is-sidebar-collapsed .brand-mark {
    width: 44px;
  }

  .app-shell.is-sidebar-collapsed :is(.brand-copy, .nav-label, .nav-item span:nth-child(2), .nav-item em, .nav-item kbd, .sidebar-collapse span) {
    display: none;
  }

  .app-shell.is-sidebar-collapsed .nav-groups {
    gap: 16px;
  }

  .app-shell.is-sidebar-collapsed .nav-item,
  .app-shell.is-sidebar-collapsed .sidebar-collapse {
    justify-content: center;
    padding-inline: 0;
  }
}

.account-card {
  position: relative;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.account-card:hover {
  background: var(--surface);
  border-color: var(--border);
}

.avatar,
.top-avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #111827;
  font-size: 12.5px;
  font-weight: 700;
}

.avatar {
  width: 31px;
  height: 31px;
}

.account-copy {
  flex: 1;
  display: grid;
  gap: 2px;
}

.account-copy strong {
  font-size: 13.5px;
}

.account-card > svg {
  width: 14px;
  color: var(--text-faint);
}

.account-menu {
  position: absolute;
  z-index: 50;
  right: 0;
  top: calc(100% + 10px);
  width: 230px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.account-menu-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.account-menu-profile > div { min-width: 0; display: grid; gap: 3px; }
.account-menu-profile strong { color: var(--text); font-size: 13.5px; }
.account-menu-profile small { overflow: hidden; color: var(--text-faint); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

.account-menu button {
  width: 100%;
  display: block;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
}

.account-menu button:hover {
  color: var(--text);
  background: var(--surface-subtle);
}

.account-menu button.account-menu-danger {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  color: var(--danger);
}

.sidebar-scrim {
  display: none;
}

.main-shell {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  justify-content: space-between;
  height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px);
}

.topbar-left,
.topbar-actions {
  gap: 8px;
}

.breadcrumb {
  gap: 7px;
  color: var(--text-faint);
  font-size: 13.5px;
}

.breadcrumb svg {
  width: 13px;
  height: 13px;
}

.breadcrumb strong {
  color: var(--text);
  font-weight: 550;
}

.top-avatar {
  width: 32px;
  height: 32px;
  margin-left: 4px;
  border: 0;
  cursor: pointer;
}

.top-account { position: relative; }

.top-user-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: right;
}

.top-user-trigger:hover { background: var(--surface-subtle); }
.top-user-copy { display: grid; gap: 1px; }
.top-user-copy strong { font-size: 13.5px; font-weight: 650; }
.top-user-copy small { color: var(--text-faint); font-size: 12.5px; }

.top-ai-wallet {
  position: relative;
}

.top-ai-wallet-trigger {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 5px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  color: var(--text);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 78%, var(--surface)), var(--surface));
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.top-ai-wallet-trigger:hover,
.top-ai-wallet-trigger:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  outline: none;
}

.top-ai-wallet-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-border) 74%, var(--border));
  border-radius: 50%;
  color: #111827;
  background: var(--accent);
}

.top-ai-wallet-icon svg { width: 14px; height: 14px; }
.top-ai-wallet-copy { min-width: 44px; display: grid; gap: 1px; }
.top-ai-wallet-copy small { color: var(--text-faint); font-size: 12px; line-height: 1; }
.top-ai-wallet-copy strong { display: flex; align-items: baseline; gap: 2px; font-size: 13.5px; line-height: 1.2; }
.top-ai-wallet-copy em { color: var(--accent-ink); font-size: 12px; font-style: normal; font-weight: 600; }

.top-ai-wallet-popover {
  position: absolute;
  z-index: 55;
  top: calc(100% + 10px);
  right: 0;
  width: 326px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px) scale(.985);
  transform-origin: top right;
  transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
}

.top-ai-wallet-popover::before {
  content: "";
  position: absolute;
  right: 35px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  transform: rotate(45deg);
}

.top-ai-wallet:hover .top-ai-wallet-popover,
.top-ai-wallet:focus-within .top-ai-wallet-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.top-ai-wallet-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.top-ai-wallet-heading > span { font-size: 13.5px; font-weight: 650; }
.top-ai-wallet-heading strong { font-size: 20px; letter-spacing: -.035em; }

.top-ai-wallet-priority {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 13px;
  color: var(--text-faint);
  font-size: 12px;
}

.top-ai-wallet-priority i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.top-ai-wallet-period {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

.top-ai-wallet-period-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.top-ai-wallet-period-icon svg { width: 14px; height: 14px; }
.top-ai-wallet-period-icon.is-monthly { color: var(--accent-ink); background: var(--accent-soft); }
.top-ai-wallet-period-icon.is-long-term { color: var(--success); background: var(--success-soft); }
.top-ai-wallet-period > div:nth-child(2) { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.top-ai-wallet-period > div:nth-child(2) > span { color: var(--text-soft); font-size: 12.5px; font-weight: 600; }
.top-ai-wallet-period > div:nth-child(2) > span b { margin-left: 3px; color: var(--text-faint); font-size: 12px; font-weight: 500; }
.top-ai-wallet-period > div:nth-child(2) > strong { font-size: 13.5px; text-align: right; }
.top-ai-wallet-period > div:nth-child(2) > small { grid-column: 1 / -1; color: var(--text-faint); font-size: 12px; }

.top-ai-wallet-progress {
  grid-column: 2;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-subtle);
}

.top-ai-wallet-progress span {
  width: var(--wallet-remaining, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms ease;
}

.top-ai-wallet-next {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
  padding: 10px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
}

.top-ai-wallet-next > svg { width: 14px; height: 14px; flex: 0 0 auto; }
.top-ai-wallet-next > span { display: grid; gap: 2px; }
.top-ai-wallet-next b { color: var(--text); font-size: 12.5px; }
.top-ai-wallet-next small { color: var(--text-faint); font-size: 12px; }
.top-ai-wallet-footer { display: flex; align-items: center; justify-content: space-between; margin: 12px -16px -16px; padding: 11px 16px; border-radius: 0 0 15px 15px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12px; font-weight: 600; }
.top-ai-wallet-footer span { color: var(--accent-ink); font-size: 14px; }

.ai-wallet-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 28px;
  padding: 9px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--accent-soft);
  font-size: 12.5px;
}
.ai-wallet-notice[hidden] { display: none !important; }
.ai-wallet-notice-icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--accent-ink); }
.ai-wallet-notice-copy { min-width: 0; flex: 1 1 auto; line-height: 1.45; }
.ai-wallet-notice .button { flex: 0 0 auto; white-space: nowrap; }
.ai-wallet-notice.is-empty { border-color: var(--warning-border); color: var(--warning); background: var(--warning-soft); }
.ai-wallet-notice.is-empty .ai-wallet-notice-icon { color: var(--warning); }
.ai-wallet-notice-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.ai-wallet-notice-close svg { width: 14px; height: 14px; }
.ai-wallet-notice-close:hover { color: var(--text); background: rgba(26, 26, 26, 0.07); }
.ai-wallet-notice-close:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.ai-wallet-notice.is-empty .ai-wallet-notice-close { color: var(--warning); }
.ai-wallet-notice.is-empty .ai-wallet-notice-close:hover { color: var(--text); }

.view-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 38px 42px 70px;
}

.page-enter {
  animation: page-in 240ms ease-out;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-ink);
  font: 600 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1 {
  margin: 0;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-weight: 620;
}

h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.018em;
  font-weight: 600;
}

h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.page-intro {
  margin-bottom: 30px;
}

.page-intro p:not(.eyebrow) {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}

.section-heading {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-heading p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 13.5px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13.5px;
}

.text-button:hover {
  color: var(--text);
}

.button {
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.button:active {
  transform: translateY(1px);
}

.button.primary {
  border-color: #e8bf00;
  color: #111827;
  background: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(122, 85, 0, 0.12);
}

.button.primary:hover {
  opacity: 1;
  background: var(--accent-hover);
}

.button.accent {
  color: #fff;
  background: #111827;
  border-color: #111827;
}

.button.accent:hover {
  background: #273244;
}

.button.secondary {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}

.button.secondary:hover {
  background: var(--surface-subtle);
  border-color: var(--border-strong);
}

.button.ghost {
  border-color: transparent;
  color: var(--text-soft);
  background: transparent;
}

.button.ghost:hover {
  color: var(--text);
  background: var(--surface-subtle);
}

.button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  background: var(--danger-soft);
}

.button.small {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 13.5px;
}

.button svg,
.text-button svg {
  width: 15px;
  height: 15px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 32px;
}

.hero-card,
.continue-card,
.metric-card,
.panel,
.paper-row,
.upload-panel,
.recognition-panel,
.correction-shell,
.exam-setup-card,
.result-hero,
.result-panel,
.mistake-row,
.settings-panel,
.login-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.hero-card {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  padding: 30px;
}

.hero-card::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -145px;
  top: -150px;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  box-shadow: 0 0 0 36px color-mix(in srgb, var(--accent-soft) 65%, transparent), 0 0 0 72px color-mix(in srgb, var(--accent-soft) 35%, transparent);
  pointer-events: none;
}

.hero-card > * {
  position: relative;
  z-index: 1;
}

.hero-card h1 {
  max-width: 650px;
}

.hero-card > p:not(.eyebrow) {
  max-width: 580px;
  margin: 12px 0 22px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.quick-upload {
  max-width: 820px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 5px 18px rgba(25, 24, 21, 0.05);
}

.quick-upload-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: 14px;
}

.quick-upload-copy span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-upload-copy svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.hero-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 13.5px;
}

.hero-flow span {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
}

.hero-flow svg {
  width: 12px;
  height: 12px;
}

.dashboard-subjects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.dashboard-subjects > div { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-subjects b { padding: 4px 8px; border: 1px solid var(--accent-border); border-radius: 999px; color: var(--accent-ink); background: var(--accent-soft); font-size: 12.5px; font-weight: 600; }
.dashboard-subjects button { padding: 3px 2px; border: 0; color: var(--text-soft); background: transparent; cursor: pointer; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }

.recommendation-heading { align-items: flex-end; margin-bottom: 14px; }
.recommendation-heading .eyebrow { margin-bottom: 5px; }
.recommendation-heading h2 { font-size: 22px; }

.recommendation-paper-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.recommendation-paper-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.recommendation-paper-card.is-fresh { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); background: linear-gradient(145deg, var(--surface) 0 68%, var(--accent-soft) 100%); }
.recommendation-paper-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recommendation-subject { padding: 4px 7px; border-radius: 7px; color: var(--text); background: var(--surface-subtle); font-size: 12.5px; font-weight: 650; }
.recommendation-status { display: flex; align-items: center; gap: 4px; color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.recommendation-year { display: flex; align-items: baseline; gap: 7px; margin-top: 19px; }
.recommendation-year strong { font-size: 27px; line-height: 1; letter-spacing: -0.05em; }
.recommendation-year span { color: var(--text-faint); font-size: 12.5px; }
.recommendation-paper-card h3 { min-height: 39px; margin: 10px 0 5px; font-size: 14px; line-height: 1.5; }
.recommendation-paper-card > p { margin: 0 0 14px; color: var(--text-faint); font-size: 12.5px; }
.recommendation-paper-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding: 12px 0; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 12px; }
.recommendation-paper-meta span { display: flex; align-items: center; gap: 4px; }
.recommendation-paper-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dashboard-learning-card { margin: 0 0 30px; }

.continue-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.card-kicker {
  margin: 0 0 15px;
  color: var(--text-faint);
  font: 600 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.continue-meta {
  margin: 8px 0 16px;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.progress-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-subtle);
}

.progress-track > span {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--accent);
  transition: width 300ms ease;
}

.continue-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.continue-card .button {
  width: 100%;
  margin-top: auto;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.metric-card {
  padding: 17px 18px;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.metric-top span:first-child {
  color: var(--text-soft);
  font-size: 13.5px;
}

.metric-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-soft);
}

.metric-icon svg {
  width: 14px;
  height: 14px;
}

.metric-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.metric-value strong {
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.dashboard-insight-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 14px;
  margin: -12px 0 30px;
}

.usage-overview-card,
.learning-recommendation-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.usage-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.usage-overview-head > div { display: grid; gap: 4px; }
.usage-overview-head span { color: var(--text-faint); font-size: 12.5px; }
.usage-overview-head strong { font-size: 15px; }
.usage-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 17px; }
.usage-bars > div > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--text-soft); font-size: 12.5px; }
.usage-bars strong { color: var(--text); font-size: 12.5px; }
.usage-bar { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-subtle); }
.usage-bar > span { display: block; width: var(--usage, 0%); height: 100%; border-radius: inherit; background: var(--accent); }
.learning-recommendation-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(120deg, var(--accent-soft), var(--surface) 65%); }
.learning-recommendation-card > div:first-child { display: flex; align-items: flex-start; gap: 12px; }
.recommendation-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: var(--accent); color: #111827; }
.learning-recommendation-card strong { font-size: 13.5px; }
.learning-recommendation-card p { max-width: 520px; margin: 6px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.recommendation-actions { display: flex; flex: 0 0 auto; gap: 7px; }

.metric-value span {
  color: var(--text-faint);
  font-size: 13.5px;
}

.panel {
  overflow: hidden;
}

.paper-list {
  display: grid;
}

.paper-row {
  gap: 14px;
  padding: 15px 17px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.paper-row:last-child {
  border-bottom: 0;
}

.paper-cover {
  position: relative;
  width: 42px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-raised);
}

.paper-cover::before,
.paper-cover::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--border-strong);
  box-shadow: 0 6px 0 var(--border), 0 12px 0 var(--border);
}

.paper-cover::before { top: 12px; }
.paper-cover::after { top: 33px; right: 17px; }

.paper-info {
  min-width: 0;
  flex: 1;
}

.paper-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.paper-title-line h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  width: fit-content;
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 12.5px;
  font-weight: 550;
}

.status-pill.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}

.status-pill.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.status-pill.info {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
}

.paper-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.paper-submeta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.paper-submeta svg {
  width: 12px;
  height: 12px;
}

.paper-row .inline-actions {
  gap: 7px;
  flex: 0 0 auto;
}

.mobile-nav {
  display: none;
}

.stepper {
  align-items: flex-start;
  width: min(690px, 100%);
  margin: 0 auto 34px;
}

.step {
  position: relative;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% + 17px);
  right: calc(-50% + 17px);
  top: 14px;
  height: 1px;
  background: var(--border);
}

.step-circle {
  z-index: 1;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-faint);
  background: var(--bg);
  font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.step.is-active,
.step.is-complete {
  color: var(--text);
}

.step.is-active .step-circle {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.step.is-complete .step-circle {
  color: #111827;
  background: var(--accent);
  border-color: var(--accent);
}

.step.is-complete:not(:last-child)::after {
  background: var(--accent);
}

.upload-panel,
.recognition-panel {
  max-width: 920px;
  margin: 0 auto;
  padding: 26px;
}

.upload-dropzone {
  min-height: 310px;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--surface-raised);
  cursor: pointer;
  text-align: center;
  transition: border 160ms ease, background 160ms ease;
}

.upload-dropzone:hover,
.upload-dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.upload-graphic {
  position: relative;
  width: 74px;
  height: 68px;
  margin: 0 auto 20px;
}

.upload-paper {
  position: absolute;
  width: 43px;
  height: 54px;
  left: 6px;
  top: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  transform: rotate(-7deg);
  box-shadow: var(--shadow-sm);
}

.upload-paper::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 14px;
  height: 2px;
  background: var(--border-strong);
  box-shadow: 0 7px 0 var(--border), 0 14px 0 var(--border);
}

.upload-bubble {
  position: absolute;
  right: 3px;
  bottom: 1px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #111827;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--surface-raised);
}

.upload-dropzone h2 {
  margin-bottom: 7px;
}

.upload-dropzone p {
  margin: 0 0 20px;
  color: var(--text-soft);
  font-size: 13.5px;
}

.upload-specs {
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.upload-specs span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.upload-specs svg {
  width: 13px;
  height: 13px;
}

.upload-tip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 13.5px;
  line-height: 1.6;
}

.upload-tip svg {
  flex: 0 0 auto;
  width: 15px;
  margin-top: 1px;
  color: var(--accent);
}

.file-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.file-meta {
  align-items: flex-start;
  gap: 12px;
}

.file-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--danger);
  background: var(--danger-soft);
}

.file-icon svg { width: 19px; height: 19px; }
.file-meta p { margin: 5px 0 0; color: var(--text-faint); font-size: 12.5px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label,
.field-label {
  gap: 6px;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 550;
}

.field-label small {
  margin-left: auto;
  color: var(--text-faint);
  font-weight: 400;
}

.field input,
.field select,
.field textarea,
.search-field {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-raised);
}

.field textarea {
  min-height: 94px;
  resize: vertical;
  line-height: 1.65;
}

.field.is-warning input,
.field.is-warning select,
.field.is-warning textarea {
  border-color: var(--warning);
  background: var(--warning-soft);
}

.pages-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pages-heading span {
  color: var(--text-faint);
  font-size: 12.5px;
}

.page-thumbnails {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  gap: 10px;
}

.page-thumb {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.page-thumb:hover .page-tools {
  opacity: 1;
}

.mini-page {
  aspect-ratio: 0.72;
  margin: 7px;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mini-page::before {
  content: "";
  display: block;
  width: 42%;
  height: 3px;
  margin-bottom: 7px;
  background: var(--border-strong);
  box-shadow: 0 9px 0 var(--border), 18px 18px 0 -1px var(--border), 0 27px 0 var(--border), 0 36px 0 var(--border), 12px 45px 0 -1px var(--border);
}

.page-number {
  display: block;
  padding: 5px 7px 7px;
  color: var(--text-faint);
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.page-tools {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.page-tools button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.page-tools svg { width: 12px; height: 12px; }

.panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.panel-footer-actions,
.paper-ready-actions {
  display: flex;
  gap: 8px;
}

.optional-flow {
  margin-left: 8px;
  color: var(--text-faint);
}

.recognition-panel { max-width: 920px; }

.recognition-orb {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 5px auto 22px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}

.recognition-orb::before,
.recognition-orb::after {
  content: "";
  position: absolute;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  inset: -7px;
  animation: recognize-pulse 2.4s ease-out infinite;
}

.recognition-orb::after {
  inset: -15px;
  animation-delay: 0.8s;
}

@keyframes recognize-pulse {
  0% { opacity: 0; transform: scale(0.85); }
  35% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.08); }
}

.recognition-orb svg { width: 35px; height: 35px; }

.recognition-copy {
  text-align: center;
}

.recognition-copy p {
  margin: 8px 0 22px;
  color: var(--text-soft);
  font-size: 13.5px;
}

.recognition-percent {
  margin: 12px 0 26px;
  color: var(--text-faint);
  font: 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.recognition-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.recognition-state {
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  color: var(--text-faint);
  background: var(--surface-subtle);
  font-size: 12.5px;
}

.recognition-state span:first-child {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--border);
  font-size: 12.5px;
}

.recognition-state.is-done {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.recognition-state.is-done span:first-child {
  color: #111827;
  background: var(--accent);
}

.recognition-state.is-current {
  color: var(--text);
  background: var(--warning-soft);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.summary-item {
  padding: 14px;
  border-radius: 10px;
  background: var(--surface-subtle);
}

.summary-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.summary-item strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.recognition-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--warning-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.recognition-alert svg {
  flex: 0 0 auto;
  color: var(--warning);
}

.recognition-alert.recognition-ready {
  border-color: var(--success-border);
  background: var(--success-soft);
}

.recognition-alert.recognition-ready svg {
  color: var(--accent);
}

.ai-field-note {
  margin-left: 5px;
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 500;
}

.upload-ai-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid var(--accent-border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--accent-soft);
  font-size: 12.5px;
}

.upload-ai-note svg { flex: 0 0 auto; color: var(--accent-ink); }

.recognition-live-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  margin-top: 16px;
}

.classification-live,
.ocr-live {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
}

.recognition-live-label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-faint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.classification-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 11px;
  border-radius: 9px;
  background: var(--surface-subtle);
}

.classification-result > svg:first-child { color: var(--accent-ink); }
.classification-result > svg:last-child { color: var(--success); }
.classification-result strong { display: block; margin-bottom: 5px; font-size: 13.5px; }
.classification-result span { color: var(--text-faint); font-size: 12.5px; }

.ocr-page-preview {
  position: relative;
  height: 82px;
  display: grid;
  align-content: center;
  gap: 6px;
  overflow: hidden;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.ocr-page-preview > span { width: var(--line); height: 3px; border-radius: 3px; background: var(--border-strong); }
.ocr-page-preview > i { position: absolute; z-index: 1; left: 0; right: 0; top: var(--scan); height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: top 260ms ease; }

.ocr-live-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--text-faint); font-size: 12.5px; }
.ocr-live-meta strong { color: var(--text-soft); font-weight: 550; }
.summary-subject { font-size: 16px !important; }

.ocr-result-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
}

.ocr-result-strip > div { display: flex; align-items: center; gap: 10px; }
.ocr-result-strip svg { color: var(--accent-ink); }
.ocr-result-strip strong, .ocr-result-strip small { display: block; }
.ocr-result-strip strong { margin-bottom: 3px; font-size: 13.5px; }
.ocr-result-strip small { color: var(--text-faint); font-size: 12.5px; }

.correction-page .page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.correction-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.issue-banner {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 10px 13px;
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  background: var(--warning-soft);
}

.issue-copy {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-soft);
  font-size: 13.5px;
}

.issue-copy svg { color: var(--warning); }

.issue-nav {
  display: flex;
  align-items: center;
  gap: 5px;
}

.issue-nav button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--warning-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  cursor: pointer;
}

.issue-nav svg { width: 13px; height: 13px; }

.correction-shell {
  min-height: 670px;
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(430px, 1.18fr);
  overflow: hidden;
}

.source-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: #d8d7d2;
}

[data-theme="dark"] .source-pane {
  background: #171816;
}

.pane-toolbar,
.editor-toolbar {
  min-height: 48px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pane-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tool-group span {
  color: var(--text-faint);
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tool-button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  color: var(--text-soft);
}

.tool-button:hover,
.tool-button.is-active {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-subtle);
}

.tool-button svg { width: 14px; height: 14px; }

.pdf-canvas {
  flex: 1;
  overflow: auto;
  padding: 30px;
}

.mock-pdf-page {
  width: min(100%, 560px);
  min-height: 720px;
  margin: 0 auto;
  padding: 48px 45px;
  color: #252521;
  background: #fff;
  box-shadow: 0 8px 22px rgba(22, 21, 19, 0.16);
  font-family: Georgia, "Times New Roman", serif;
}

.mock-pdf-page .pdf-head {
  padding-bottom: 17px;
  border-bottom: 1px solid #242424;
  font: 600 13.5px/1.4 Arial, sans-serif;
  text-align: center;
}

.mock-pdf-page .passage-label {
  margin: 23px 0 10px;
  font: 700 12.5px/1.4 Arial, sans-serif;
}

.mock-pdf-page p {
  margin: 0 0 13px;
  font-size: 13.5px;
  line-height: 1.72;
  text-align: justify;
}

.pdf-highlight {
  margin: 18px -12px 0;
  padding: 12px;
  border: 2px solid #e09b4d;
  background: #fff9ea;
}

.pdf-highlight strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
}

.pdf-option {
  display: block;
  margin: 5px 0;
  font-size: 12.5px;
}

.editor-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
}

.editor-toolbar {
  justify-content: space-between;
}

.question-jump {
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-jump span {
  color: var(--text-faint);
  font-size: 12.5px;
}

.confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--warning);
  background: var(--warning-soft);
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.editor-content {
  overflow: auto;
  padding: 22px;
}

.editor-section {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}

.editor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.editor-section-head span {
  color: var(--text-faint);
  font-size: 12.5px;
}

.options-editor {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.option-field {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  gap: 7px;
  align-items: center;
}

.option-letter {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface);
  font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.option-field input {
  min-width: 0;
  height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
}

.option-field.is-warning input {
  border-color: var(--warning);
  background: var(--warning-soft);
}

.option-field button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.answer-picker {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.answer-picker button {
  width: 39px;
  height: 39px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.answer-picker button.is-selected {
  color: #111827;
  border-color: var(--accent);
  background: var(--accent);
}

.correction-footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.save-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.save-note svg { color: var(--success); }

.papers-toolbar,
.records-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.filter-tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-subtle);
}

.filter-button {
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
}

.filter-button.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.search-wrap {
  position: relative;
  width: min(280px, 100%);
}

.search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  transform: translateY(-50%);
}

.search-field {
  min-height: 38px;
  padding-left: 32px;
  font-size: 13.5px;
}

.paper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.library-hero {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 30px 34px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 62%);
  box-shadow: var(--shadow-sm);
}

.library-hero > div:first-child { position: relative; z-index: 1; max-width: 650px; }
.library-hero h1 { margin-bottom: 10px; }
.library-hero p:last-child { max-width: 600px; color: var(--text-soft); font-size: 14px; line-height: 1.7; }

.library-hero-mark {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  color: var(--text);
  background: var(--accent);
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent-soft) 70%, transparent), 0 0 0 36px color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

.library-hero-mark span { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; }

.library-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}

.library-filter-group { display: grid; gap: 7px; }
.library-filter-group > span { color: var(--text-faint); font-size: 12.5px; }
.library-subject-filter { flex-basis: 100%; }
.library-subject-filter .filter-tabs { flex-wrap: wrap; }
.library-type-filter { flex-basis: 100%; }
.library-type-filter .filter-tabs { width: fit-content; }
.library-type-filter .filter-button { min-width: 110px; min-height: 40px; }
.library-toolbar .search-wrap { margin-left: auto; }
.public-paper-grid > .empty-state { grid-column: 1 / -1; }
.topic-practice-card { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.topic-practice-card[hidden], .library-more [hidden] { display: none; }
.topic-card-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-faint); }
.topic-card-label > span { padding: 4px 8px; border-radius: 6px; color: var(--accent-ink); background: var(--accent-soft); font-size: 12px; }
.topic-card-label small { font-size: 12px; overflow-wrap: anywhere; }
.topic-practice-card h3 { margin: 0; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.topic-practice-card > p { flex: 1; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.8; }
.topic-card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--text-soft); font-size: 12px; }
.topic-card-meta > span { margin-left: auto; color: var(--text-faint); }
.topic-card-result { border-top: 1px solid var(--border); padding-top: 13px; font-size: 12px; line-height: 1.7; color: var(--text-faint); }
.topic-practice-card > .button { align-self: flex-start; margin-top: 2px; }
.library-more { text-align: center; margin-top: 22px; }
.library-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding: 15px 18px; background: var(--surface-subtle); border-radius: 12px; color: var(--text-soft); font-size: 13px; }
.library-extra .text-button { margin-left: auto; }
.topic-history { margin-top: 26px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; }
.topic-history .section-heading p { font-size: 13px; color: var(--text-faint); line-height: 1.8; margin-top: 5px; }
.topic-history-list > article { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.topic-history-list strong { font-size: 14px; }.topic-history-list p,.topic-history-list small { font-size: 12px; line-height: 1.8; color: var(--text-faint); }
@media (max-width: 680px) {
  .library-type-filter .filter-tabs { width: 100%; }
  .library-type-filter .filter-button { min-width: 0; }
  .topic-practice-card { padding: 18px; }
  .topic-history { padding: 18px; }
}

.library-result-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.library-result-heading h2 { margin-bottom: 4px; }
.library-result-heading p { color: var(--text-faint); font-size: 13.5px; }
.library-result-heading > span { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 12.5px; }
.library-result-heading > span svg { color: var(--success); }

.public-paper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.public-paper-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.public-paper-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.public-paper-preview {
  position: relative;
  height: 154px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(145deg, var(--surface-subtle), var(--accent-soft));
}

.public-paper-preview.mock { background: linear-gradient(145deg, var(--surface-subtle), color-mix(in srgb, var(--accent-soft) 72%, var(--surface))); }

.public-paper-preview::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -65px;
  bottom: -95px;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
}

.public-paper-preview .paper-cover {
  width: 76px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px;
  text-align: center;
  transform: rotate(-2deg);
  box-shadow: 6px 8px 0 color-mix(in srgb, var(--border) 55%, transparent);
}

/* Titled covers do not need the generic paper thumbnail's decorative lines. */
.public-paper-preview .paper-cover::before,
.public-paper-preview .paper-cover::after { content: none; }
.public-paper-preview .paper-cover i { max-width: 100%; flex-shrink: 0; color: var(--text); font-size: 12.5px; font-style: normal; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.public-paper-preview .paper-cover b { flex-shrink: 0; color: var(--text-faint); font-size: 12px; font-weight: 500; line-height: 1.4; }

.public-paper-year {
  position: absolute;
  left: 15px;
  top: 13px;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .08em;
}

.public-type-badge {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid var(--accent-border);
  border-radius: 7px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 12.5px;
}

.public-paper-body { padding: 16px; }
.public-paper-source { color: var(--text-faint); font-size: 12.5px; }
.public-paper-body h3 { min-height: 42px; margin: 8px 0 10px; font-size: 14px; line-height: 1.55; }
.public-paper-body .paper-submeta { min-height: 36px; }

.public-paper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.public-paper-footer > span { display: flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 12.5px; }
.public-paper-actions { display: flex; align-items: center; gap: 6px; }
.public-cover::after { background: var(--accent); }

.paper-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.paper-card-preview {
  height: 122px;
  display: grid;
  place-items: center;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}

.paper-card-preview .paper-cover {
  width: 67px;
  height: 84px;
  transform: rotate(-2deg);
  box-shadow: 5px 7px 0 color-mix(in srgb, var(--border) 55%, transparent);
}

.paper-card-body {
  padding: 16px;
}

.paper-card-body h3 {
  margin: 10px 0 7px;
}

.paper-card-body .paper-submeta {
  min-height: 32px;
  margin-bottom: 13px;
}

.paper-card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.paper-card-actions .paper-ready-actions {
  min-width: 0;
}

.exam-setup {
  max-width: 920px;
  margin: 0 auto;
}

.exam-setup-card {
  overflow: hidden;
}

.exam-setup-head {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 26px;
  padding: 26px;
  border-bottom: 1px solid var(--border);
}

.exam-cover-large {
  position: relative;
  min-height: 204px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-soft);
  background: var(--surface-subtle);
}

.exam-cover-large .paper-cover {
  width: 90px;
  height: 116px;
  transform: rotate(-3deg);
  box-shadow: 7px 9px 0 var(--border);
}

.exam-detail h1 {
  margin: 8px 0 10px;
  font-size: 27px;
}

.exam-detail > p {
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: 13.5px;
}

.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.detail-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 12.5px;
}

.detail-chips svg { width: 12px; height: 12px; }

.mode-select {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 24px 26px;
}

.mode-option {
  position: relative;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  cursor: pointer;
}

.mode-option.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.mode-option input {
  position: absolute;
  opacity: 0;
}

.mode-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.mode-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.mode-icon svg { width: 15px; height: 15px; }

.mode-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.mode-option.is-selected .mode-check {
  color: #111827;
  border-color: var(--accent);
  background: var(--accent);
}

.mode-option p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.6;
}

.setup-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 26px 24px;
}

.setting-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--surface-subtle);
}

.setting-box span {
  display: block;
  color: var(--text-soft);
  font-size: 12.5px;
}

.setting-box strong {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
}

.duration-control {
  display: flex;
  align-items: center;
  gap: 7px;
}

.duration-control button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  cursor: pointer;
}

.duration-control span {
  min-width: 54px;
  color: var(--text);
  font: 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 26px;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.setup-footer p {
  margin: 0;
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.5;
}

body.exam-mode {
  overflow: hidden;
}

body.exam-mode .app-shell {
  display: block;
}

body.exam-mode .sidebar,
body.exam-mode .topbar,
body.exam-mode .mobile-nav,
body.exam-mode .ai-wallet-notice {
  display: none;
}

body.exam-mode .view-container {
  max-width: none;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

.exam-room {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.exam-topbar {
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.exam-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.exam-title .brand-mark {
  width: 29px;
  height: 29px;
}

.exam-title-copy {
  min-width: 0;
}

.exam-title-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.exam-title-copy span {
  color: var(--text-faint);
  font-size: 12.5px;
}

.exam-status {
  gap: 15px;
}

.exam-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--surface-subtle);
  font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.exam-timer svg { width: 14px; height: 14px; color: var(--text-soft); }

.exam-save {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.exam-save svg { color: var(--success); }

.exam-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(340px, 0.8fr) minmax(460px, 1.05fr) 236px;
}

.passage-pane,
.question-pane,
.answer-pane {
  min-width: 0;
  overflow: auto;
}

.passage-pane {
  padding: 34px 38px;
  border-right: 1px solid var(--border);
  background: var(--surface-raised);
}

.passage-kicker,
.question-kicker {
  margin: 0 0 13px;
  color: var(--text-faint);
  font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.passage-pane h2 {
  margin-bottom: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.passage-pane p:not(.passage-kicker) {
  margin: 0 0 17px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.85;
}

.question-pane {
  display: flex;
  flex-direction: column;
  padding: 34px 40px 22px;
  background: var(--surface);
}

.question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.mark-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: 12.5px;
}

.mark-button.is-marked {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.question-text {
  margin: 5px 0 25px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.7;
}

.options {
  display: grid;
  gap: 10px;
}

.option {
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-raised);
  cursor: pointer;
  text-align: left;
  line-height: 1.55;
}

.option:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

.option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

.option-letter-exam {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface);
  font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.option.is-selected .option-letter-exam {
  color: #111827;
  border-color: var(--accent);
  background: var(--accent);
}

.exam-controls {
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 30px;
}

.question-progress {
  color: var(--text-faint);
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.answer-pane {
  padding: 24px 18px;
  border-left: 1px solid var(--border);
  background: var(--surface-raised);
}

.answer-pane h3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.answer-pane h3 span {
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 400;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.answer-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.answer-cell.is-current {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

.answer-cell.is-answered {
  color: #111827;
  border-color: var(--accent);
  background: var(--accent);
}

.answer-cell.is-marked {
  position: relative;
}

.answer-cell.is-marked::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface-raised);
  border-radius: 50%;
  background: var(--warning);
}

.answer-legend {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12.5px;
}

.answer-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
}

.legend-dot.answered { border-color: var(--accent); background: var(--accent); }
.legend-dot.marked { border: 0; border-radius: 50%; background: var(--warning); }

.result-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 16px;
  margin-bottom: 18px;
}

.result-hero,
.result-panel {
  padding: 24px;
}

.result-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.result-badge {
  padding: 5px 9px;
  border-radius: 99px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 550;
}

.score-ring {
  --score: 76%;
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  margin: 23px 0 18px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--score), var(--surface-subtle) 0);
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--surface);
}

.result-score {
  position: relative;
  align-items: baseline;
}

.result-score strong {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.06em;
}

.result-score span {
  color: var(--text-faint);
  font-size: 14px;
}

.result-hero h2 {
  margin-bottom: 7px;
}

.result-hero > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13.5px;
}

.result-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.result-stats span {
  display: grid;
  gap: 5px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.result-stats strong {
  color: var(--text);
  font-size: 14px;
}

.result-panel h2 {
  margin-bottom: 20px;
}

.module-bars {
  display: grid;
  gap: 18px;
}

.module-row {
  display: grid;
  gap: 8px;
}

.module-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}

.module-label span { color: var(--text-soft); }
.module-label strong { font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; }

.module-track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-subtle);
}

.module-track span {
  display: block;
  width: var(--width);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.result-note {
  display: flex;
  gap: 10px;
  margin-top: 23px;
  padding: 12px 13px;
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 12.5px;
  line-height: 1.6;
}

.result-note svg { flex: 0 0 auto; color: var(--accent-ink); }

.mistake-list {
  display: grid;
  gap: 10px;
}

.mistake-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
}

.mistake-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--danger);
  background: var(--danger-soft);
  font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mistake-content {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.mistake-content h3 {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.mistake-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.65;
}

.mistake-answer .wrong { color: var(--danger); }
.mistake-answer .right { color: var(--success); }
.mistake-row > .button { align-self: center; white-space: nowrap; }

.table-panel {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  text-align: left;
}

.data-table th {
  color: var(--text-faint);
  background: var(--surface-raised);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table td {
  color: var(--text-soft);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table td strong {
  color: var(--text);
  font-weight: 550;
}

.data-table .score-cell {
  color: var(--text);
  font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.data-table button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 12.5px;
}

.mistake-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.mistake-filter-row > .filter-tabs { min-width: 0; flex-wrap: wrap; }
.mistake-filter-row > .inline-actions { min-width: min(100%, 360px); flex: 1 1 360px; justify-content: flex-end; }
.mistake-filter-row .search-wrap { width: min(320px, 100%); min-width: 0; flex: 1 1 200px; }
.mistake-filter-row .search-field { min-width: 0; }
.mistake-filter-row [data-action="redo-all"] { flex: 0 0 auto; white-space: nowrap; }

.settings-panel {
  max-width: 800px;
  overflow: hidden;
}

.settings-section {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child { border-bottom: 0; }
.settings-section h2 { margin-bottom: 5px; }
.settings-section > p { margin: 0 0 16px; color: var(--text-soft); font-size: 13.5px; }

.settings-row {
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.settings-row:first-of-type { border-top: 0; }
.settings-row strong { display: block; font-size: 13.5px; }
.settings-row p { margin: 3px 0 0; color: var(--text-faint); font-size: 12.5px; }

.switch {
  position: relative;
  width: 40px;
  height: 23px;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--border-strong);
  cursor: pointer;
}

.switch span::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease;
}

.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(17px); }

.login-view {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
}

.login-card {
  width: min(430px, 100%);
  padding: 34px;
}

.login-brand {
  gap: 10px;
  margin-bottom: 28px;
}

.login-card h1 {
  margin-bottom: 8px;
  font-size: 26px;
}

.login-card > p {
  margin: 0 0 26px;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.phone-input {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
}

.phone-input span {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 13.5px;
}

.phone-input input {
  border-radius: 0 8px 8px 0;
}

.code-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 17px 0;
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.55;
}

.agreement input { margin-top: 2px; accent-color: var(--accent); }
.agreement a { color: var(--text-soft); }
.login-card .button.primary { width: 100%; }

.login-security {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--text-faint);
  font-size: 12.5px;
}

/* Knowledge graph */
.achievement-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.achievement-week { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--accent-border); border-radius: 11px; background: var(--accent-soft); }
.achievement-week svg { color: var(--accent-ink); fill: var(--accent); }
.achievement-week span { color: var(--text-faint); font-size: 12.5px; }
.achievement-week strong { display: block; margin-top: 2px; color: var(--text); font-size: 13.5px; }
.achievement-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.mastery-legend { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 12.5px; }
.mastery-stars { display: inline-flex; gap: 2px; color: var(--border-strong); }
.mastery-stars i { font-style: normal; font-size: 15px; line-height: 1; }
.mastery-stars i.is-earned { color: var(--accent); text-shadow: 0 1px 0 color-mix(in srgb, var(--accent-ink) 30%, transparent); }
.mastery-stars.compact i { font-size: 12.5px; }
.achievement-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
.knowledge-canvas, .knowledge-detail { border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.knowledge-canvas { overflow: hidden; }
.knowledge-canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.knowledge-canvas-head p { margin-top: 4px; color: var(--text-faint); font-size: 12.5px; }
.knowledge-overall { text-align: right; }
.knowledge-overall strong { display: block; font-size: 21px; }
.knowledge-overall span { color: var(--text-faint); font-size: 12.5px; }
.knowledge-tree-stage { position: relative; height: 540px; overflow: hidden; background-image: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 44%); }
.knowledge-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.knowledge-lines line { stroke: var(--border-strong); stroke-width: 1.2; }
.knowledge-node { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: 112px; min-height: 77px; display: grid; place-items: center; gap: 5px; padding: 9px; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transform: translate(-50%, -50%); transition: transform 160ms ease, border 160ms ease, box-shadow 160ms ease; }
.knowledge-node:hover { transform: translate(-50%, -50%) translateY(-2px); box-shadow: var(--shadow-md); }
.knowledge-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.knowledge-node.is-locked { opacity: .62; }
.knowledge-node-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); }
.knowledge-node.is-selected .knowledge-node-icon { color: #111827; background: var(--accent); }
.knowledge-node strong { font-size: 12.5px; font-weight: 600; }
.knowledge-progress-rail { height: 5px; background: var(--surface-subtle); }
.knowledge-progress-rail span { display: block; width: var(--width); height: 100%; background: var(--accent); }
.knowledge-detail { align-self: start; padding: 20px; }
.knowledge-detail-label { color: var(--text-faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.knowledge-detail h2 { margin: 8px 0; font-size: 20px; }
.knowledge-detail > p { margin: 16px 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.7; }
.knowledge-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.knowledge-detail-stats div { padding: 10px 6px; border-radius: 8px; background: var(--surface-subtle); text-align: center; }
.knowledge-detail-stats span, .knowledge-detail-stats strong { display: block; }
.knowledge-detail-stats span { margin-bottom: 5px; color: var(--text-faint); font-size: 12px; }
.knowledge-detail-stats strong { font-size: 13.5px; }
.trend-up { color: var(--success); }
.knowledge-next { margin: 14px 0; padding: 12px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); }
.knowledge-next span, .knowledge-next strong { display: block; }
.knowledge-next span { margin-bottom: 5px; color: var(--text-faint); font-size: 12px; }
.knowledge-next strong { font-size: 12.5px; }
.knowledge-detail-actions { display: grid; gap: 8px; }

.knowledge-graph-page { max-width: 1440px; margin: 0 auto; }
.knowledge-subject-toolbar { align-items: flex-start; }
.knowledge-subject-toolbar > .filter-tabs { flex: 1; }
.knowledge-view-toggle { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.knowledge-view-toggle button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 0; border-radius: 7px; color: var(--text-faint); background: transparent; cursor: pointer; font-size: 12.5px; }
.knowledge-view-toggle button.is-active { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.math-scope-note { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--accent-border) 70%, var(--border)); border-radius: 10px; color: var(--text-soft); background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface)); font-size: 12.5px; line-height: 1.65; }
.math-scope-note svg { flex: 0 0 auto; color: var(--accent-ink); }
.knowledge-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.knowledge-summary-grid article { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.knowledge-summary-grid span, .knowledge-summary-grid strong, .knowledge-summary-grid small { display: block; }
.knowledge-summary-grid span { color: var(--text-faint); font-size: 12.5px; }
.knowledge-summary-grid strong { margin: 5px 0 3px; font-size: 20px; letter-spacing: -.03em; }
.knowledge-summary-grid small { color: var(--text-soft); font-size: 12.5px; }
.knowledge-scoring-rule { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 10px; margin-bottom: 16px; }
.knowledge-scoring-rule > div { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12.5px; line-height: 1.65; }
.knowledge-scoring-rule > div:first-child { border-color: var(--accent-border); background: var(--accent-soft); }
.knowledge-scoring-rule strong { color: var(--text); }
.knowledge-scoring-rule svg { flex: 0 0 auto; color: var(--accent-ink); }
.knowledge-graph-layout { grid-template-columns: minmax(0, 1fr) 310px; align-items: start; }
.knowledge-graph-layout > div { min-width: 0; }
.knowledge-graph-layout.is-table-view { grid-template-columns: minmax(0, 1fr); }
.knowledge-graph-layout.is-table-view .knowledge-graph-detail { position: static; display: grid; grid-template-columns: minmax(220px, .7fr) repeat(2, minmax(0, 1fr)); gap: 12px 18px; width: 100%; }
.knowledge-graph-layout.is-table-view .knowledge-graph-detail > .knowledge-detail-label,
.knowledge-graph-layout.is-table-view .knowledge-graph-detail > h2,
.knowledge-graph-layout.is-table-view .knowledge-graph-detail > .mastery-stars,
.knowledge-graph-layout.is-table-view .knowledge-graph-detail > p { grid-column: 1; }
.knowledge-graph-layout.is-table-view .knowledge-detail-stats { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; }
.knowledge-graph-layout.is-table-view .knowledge-time-card,
.knowledge-graph-layout.is-table-view .knowledge-next { grid-column: 3; grid-row: 1 / span 4; margin: 0; }
.knowledge-graph-layout.is-table-view .knowledge-related { grid-column: 1 / span 2; margin: 0; }
.knowledge-graph-layout.is-table-view .knowledge-detail-actions { grid-column: 3; align-self: end; }
.knowledge-tree-panel, .knowledge-table-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.knowledge-table-panel { min-width: 0; max-width: 100%; }
.knowledge-tree-scroll { max-height: 720px; overflow: auto; padding: 12px 15px 22px; }
.knowledge-tree-root, .knowledge-tree-root ul { margin: 0; padding: 0; list-style: none; }
.knowledge-tree-root ul { position: relative; margin-left: 17px; padding-left: 19px; }
.knowledge-tree-root ul::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 14px; width: 1px; background: var(--border-strong); }
.knowledge-tree-item { position: relative; }
.knowledge-tree-root ul > .knowledge-tree-item::before { content: ""; position: absolute; left: -12px; top: 23px; width: 12px; height: 1px; background: var(--border-strong); }
.knowledge-tree-row { display: flex; align-items: stretch; gap: 4px; margin: 3px 0; border: 1px solid transparent; border-radius: 10px; }
.knowledge-tree-row:hover { background: var(--surface-subtle); }
.knowledge-tree-row.is-selected { border-color: var(--accent-border); background: var(--accent-soft); }
.knowledge-tree-toggle { width: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 0; color: var(--text-faint); background: transparent; cursor: pointer; }
.knowledge-tree-toggle svg { transition: transform 150ms ease; }
.knowledge-tree-toggle.is-expanded svg { transform: rotate(90deg); }
.knowledge-tree-spacer { width: 30px; flex: 0 0 auto; }
.knowledge-tree-select { min-width: 0; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px 9px 0; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.knowledge-level { min-width: 32px; padding: 4px 6px; border-radius: 6px; color: var(--text-faint); background: var(--surface-subtle); font: 600 12px var(--mono); text-align: center; }
.knowledge-tree-row.is-selected .knowledge-level { color: #111827; background: var(--accent); }
.knowledge-tree-name { min-width: 0; }
.knowledge-tree-name strong, .knowledge-tree-name small { display: block; }
.knowledge-tree-name strong { overflow: hidden; font-size: 13.5px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tree-name small { margin-top: 3px; color: var(--text-faint); font-size: 12px; }
.knowledge-ratio { position: relative; min-width: 72px; height: 20px; overflow: hidden; border-radius: 99px; background: var(--surface-subtle); }
.knowledge-ratio i { position: absolute; inset: 0 auto 0 0; width: var(--width); background: color-mix(in srgb, var(--accent) 60%, transparent); }
.knowledge-ratio strong { position: relative; display: grid; place-items: center; height: 100%; color: var(--text); font: 600 12.5px var(--mono); }
.knowledge-ratio.compact { min-width: 60px; height: 18px; }
.knowledge-unobserved { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-faint); background: var(--surface-subtle); font-size: 12px; line-height: 1; white-space: nowrap; }
.knowledge-unobserved.compact { padding: 3px 6px; font-size: 11px; }
.knowledge-graph-detail { position: sticky; top: 80px; }
.knowledge-time-card { margin: 14px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); }
.knowledge-time-card > div:first-child { display: grid; gap: 7px; }
.knowledge-time-card > div:first-child strong { font-size: 12.5px; line-height: 1.55; }
.knowledge-time-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 12px 0 0; }
.knowledge-time-card dl div { padding: 7px 5px; border-radius: 7px; background: var(--surface); text-align: center; }
.knowledge-time-card dt { color: var(--text-faint); font-size: 12px; }
.knowledge-time-card dd { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; }
.timing-status { display: inline-flex; width: fit-content; align-items: center; padding: 4px 7px; border-radius: 99px; font-size: 12px; font-weight: 650; }
.timing-status.fast { color: #166534; background: #dcfce7; }
.timing-status.normal { color: #854d0e; background: #fef3c7; }
.timing-status.slow { color: #991b1b; background: #fee2e2; }
[data-theme="dark"] .timing-status.fast { color: #86efac; background: rgba(22, 101, 52, .34); }
[data-theme="dark"] .timing-status.normal { color: #fde68a; background: rgba(133, 77, 14, .38); }
[data-theme="dark"] .timing-status.slow { color: #fca5a5; background: rgba(153, 27, 27, .38); }
.knowledge-related { display: grid; gap: 7px; margin: 14px 0; }
.knowledge-related > span { color: var(--text-faint); font-size: 12px; }
.knowledge-related button { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: var(--surface); cursor: pointer; font-size: 12.5px; line-height: 1.45; text-align: left; }
.knowledge-related button:hover { border-color: var(--accent-border); color: var(--text); background: var(--accent-soft); }
.knowledge-table-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.knowledge-table-toolbar h2 { font-size: 15px; }
.knowledge-table-toolbar p { margin-top: 4px; color: var(--text-faint); font-size: 12.5px; }
.knowledge-table-toolbar .search-wrap { width: 260px; flex: 0 0 auto; }
.knowledge-table-wrap { width: 100%; max-width: 100%; overflow: visible; }
.knowledge-matrix { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.knowledge-matrix th, .knowledge-matrix td { padding: 12px 13px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.knowledge-matrix th:last-child, .knowledge-matrix td:last-child { border-right: 0; }
.knowledge-matrix th { color: var(--text-faint); background: var(--surface-subtle); font-size: 12.5px; font-weight: 600; }
.knowledge-matrix td { color: var(--text-soft); font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.knowledge-matrix th:nth-child(1) { width: 14%; }
.knowledge-matrix th:nth-child(2) { width: 15%; }
.knowledge-matrix th:nth-child(3) { width: 16%; }
.knowledge-matrix th:nth-child(4) { width: 20%; }
.knowledge-matrix th:nth-child(5) { width: 35%; }
.knowledge-matrix tr.is-selected td { background: var(--accent-soft); }
.knowledge-atomic-link { width: 100%; display: grid; gap: 5px; padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.knowledge-atomic-link strong { font-size: 12.5px; }
.knowledge-atomic-link small { color: var(--text-faint); font-size: 12px; }
.related-question-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.related-question-pills button { max-width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); background: var(--surface); cursor: pointer; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; text-align: left; }
.related-question-pills button:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.knowledge-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--text-faint); background: var(--surface-subtle); font-size: 12.5px; }
.knowledge-pagination > div { display: flex; gap: 7px; }
.knowledge-pagination button:disabled { opacity: .45; cursor: not-allowed; }

/* Result grading, timing analysis, and personalized explanations */
.result-analysis-heading { margin-top: 24px; }
.result-analysis-source { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 12.5px; }
.result-analysis-source svg { color: var(--accent-ink); }
.timing-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.timing-analysis-card { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.timing-analysis-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.timing-analysis-top strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.timing-analysis-top b { font-size: 12.5px; }
.timing-analysis-top b.is-positive { color: var(--success); }
.timing-analysis-top b.is-zero { color: var(--danger); }
.timing-analysis-card > p { margin: 7px 0 12px; color: var(--text-faint); font-size: 12.5px; }
.timing-comparison { position: relative; height: 8px; border-radius: 99px; background: var(--surface-subtle); }
.timing-comparison > span { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--accent); }
.timing-comparison > i { position: absolute; left: var(--marker); top: -3px; width: 2px; height: 14px; background: var(--text); transform: translateX(-1px); }
.timing-values { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--text-faint); font-size: 12px; }
.question-review-list { display: grid; gap: 10px; }
.question-review-card { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.question-review-card summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 11px; padding: 14px 16px; cursor: pointer; list-style: none; }
.question-review-card summary::-webkit-details-marker { display: none; }
.question-review-card summary > svg { color: var(--text-faint); transition: transform 160ms ease; }
.question-review-card[open] summary > svg { transform: rotate(90deg); }
.review-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; font: 650 12.5px var(--mono); }
.review-number.correct { color: var(--success); background: var(--success-soft); }
.review-number.wrong { color: var(--danger); background: var(--danger-soft); }
.review-summary { min-width: 0; }
.review-summary strong, .review-summary small { display: block; }
.review-summary strong { margin-bottom: 4px; font-size: 12.5px; }
.review-summary small { overflow: hidden; color: var(--text-faint); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.review-result { min-width: 42px; font-size: 12.5px; text-align: right; }
.review-result.correct { color: var(--success); }
.review-result.wrong { color: var(--danger); }
.question-review-body { padding: 0 16px 16px 59px; border-top: 1px solid var(--border); }
.review-answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0; }
.review-answer-grid > div { padding: 10px; border-radius: 8px; background: var(--surface-subtle); }
.review-answer-grid span, .review-answer-grid strong { display: block; }
.review-answer-grid span { margin-bottom: 5px; color: var(--text-faint); font-size: 12px; }
.review-answer-grid strong { font-size: 12.5px; line-height: 1.55; }
.answer-correct { color: var(--success); }
.answer-wrong { color: var(--danger); }
.review-knowledge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.review-knowledge-tags span { padding: 5px 7px; border: 1px solid var(--accent-border); border-radius: 99px; color: var(--text-soft); background: var(--accent-soft); font-size: 12px; }
.personalized-explanation { padding: 12px 13px; border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; background: var(--surface-subtle); }
.personalized-explanation > span { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12.5px; font-weight: 600; }
.personalized-explanation svg { color: var(--accent-ink); }
.personalized-explanation p { margin: 7px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.75; }

/* Public paper leaderboard */
.leaderboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.leaderboard-heading h1 { margin: 10px 0 7px; }
.leaderboard-heading p { color: var(--text-soft); font-size: 13.5px; }
.back-link { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--text-faint); background: transparent; cursor: pointer; font-size: 12.5px; }
.my-rank-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; margin-bottom: 16px; padding: 18px 22px; border: 1px solid var(--accent-border); border-radius: 14px; background: linear-gradient(100deg, var(--accent-soft), var(--surface) 68%); }
.rank-medal { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #111827; background: var(--accent); }
.my-rank-strip > div:nth-child(2) > span, .rank-score > span, .rank-total > span { display: block; color: var(--text-faint); font-size: 12.5px; }
.my-rank-strip > div:nth-child(2) > strong { display: block; margin: 3px 0; font-size: 23px; }
.my-rank-strip p { color: var(--text-soft); font-size: 12.5px; }
.rank-score, .rank-total { min-width: 110px; padding-left: 18px; border-left: 1px solid var(--border); }
.rank-score strong, .rank-total strong { font-size: 22px; }
.rank-score small, .rank-total small { margin-left: 3px; color: var(--text-faint); font-size: 12px; }
.leaderboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.leaderboard-controls > span { display: flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 12.5px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
.podium-item { position: relative; min-height: 126px; display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden; padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); text-align: center; }
.podium-item.place-1 { border-color: var(--accent-border); background: var(--accent-soft); }
.podium-rank { position: absolute; left: 12px; top: 10px; color: var(--text-faint); font: 600 13.5px var(--mono); }
.podium-avatar, .table-avatar { display: inline-grid; place-items: center; border-radius: 50%; color: var(--text); background: var(--surface-subtle); }
.podium-avatar { width: 38px; height: 38px; }
.podium-item.place-1 .podium-avatar { background: var(--accent); }
.podium-item strong { font-size: 13.5px; }
.podium-item > span:last-child { color: var(--text-faint); font-size: 12.5px; }
.leaderboard-table-wrap, .quota-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.leaderboard-table, .quota-table-wrap table { width: 100%; border-collapse: collapse; }
.leaderboard-table th, .leaderboard-table td, .quota-table-wrap th, .quota-table-wrap td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 12.5px; }
.leaderboard-table thead th, .quota-table-wrap thead th { color: var(--text-faint); background: var(--surface-subtle); font-size: 12.5px; font-weight: 550; }
.leaderboard-table tr:last-child td, .quota-table-wrap tr:last-child td, .quota-table-wrap tr:last-child th { border-bottom: 0; }
.leaderboard-table tr.is-me td { background: var(--accent-soft); }
.leaderboard-table td:nth-child(2) { display: flex; align-items: center; gap: 8px; }
.table-avatar { width: 25px; height: 25px; flex: 0 0 auto; font-size: 12px; }
.leaderboard-score { font-size: 14px !important; font-weight: 650; }
.ranking-rule, .membership-note { display: flex; gap: 8px; margin-top: 12px; padding: 11px 13px; border-radius: 9px; color: var(--text-faint); background: var(--surface-subtle); font-size: 12.5px; line-height: 1.6; }
.ranking-rule svg, .membership-note svg { flex: 0 0 auto; color: var(--accent-ink); }

/* Membership */
.membership-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.membership-header > div:first-child { max-width: 630px; }
.membership-header p:last-child { margin-top: 9px; color: var(--text-soft); font-size: 13.5px; line-height: 1.7; }
.billing-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-subtle); }
.billing-toggle button { min-height: 34px; padding: 7px 11px; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; cursor: pointer; font-size: 12.5px; }
.billing-toggle button.is-active { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }
.billing-toggle span { color: var(--success); font-size: 12px; }
.current-usage-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 24px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--accent-border); border-radius: 14px; background: var(--accent-soft); }
.current-plan-summary { display: grid; align-content: center; gap: 4px; }
.current-plan-summary > span { color: var(--accent-ink); font-size: 12.5px; }
.current-plan-summary > strong { font-size: 20px; }
.current-plan-summary > small { max-width: 310px; color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.current-usage-items { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-left: 22px; border-left: 1px solid var(--accent-border); }
.current-usage-items > div { display: grid; align-content: center; gap: 6px; }
.current-usage-items span { color: var(--text-soft); font-size: 12.5px; }
.current-usage-items strong { font-size: 13.5px; }
.current-usage-items small { color: var(--text-faint); font-size: 12px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pricing-plan { position: relative; padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.pricing-plan.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md); }
.pricing-plan.is-current { background: var(--surface-raised); }
.recommend-label { position: absolute; right: 16px; top: 16px; padding: 5px 7px; border-radius: 6px; color: #111827; background: var(--accent); font-size: 12px; font-weight: 650; }
.plan-use-case { display: inline-block; margin-bottom: 8px; color: var(--accent-ink); font-size: 12px; font-weight: 650; }
.plan-head h2 { font-size: 19px; }
.plan-head p { min-height: 34px; margin-top: 6px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 20px; }
.plan-price strong { font-size: 31px; letter-spacing: -.05em; }
.plan-price span { color: var(--text-faint); font-size: 12.5px; }
.annual-bill { display: block; min-height: 17px; margin: 4px 0 13px; color: var(--text-faint); font-size: 12px; }
.pricing-plan > .button { width: 100%; }
.pricing-plan > .button:disabled { cursor: default; opacity: .62; }
.pricing-plan ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); list-style: none; }
.pricing-plan li { display: flex; align-items: flex-start; gap: 7px; color: var(--text-soft); font-size: 12.5px; line-height: 1.45; }
.pricing-plan li svg { flex: 0 0 auto; color: var(--success); }
.quota-comparison { margin-top: 20px; }
.quota-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.quota-heading p { margin-top: 4px; color: var(--text-faint); font-size: 12.5px; }
.quota-heading > span { display: flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 12.5px; }
.quota-heading > span svg { color: var(--success); }
.quota-table-wrap th:not(:first-child), .quota-table-wrap td { text-align: center; }
.quota-table-wrap tbody th { font-weight: 550; }
.quota-pack-section { margin-top: 24px; }
.quota-pack-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.quota-pack-heading h2 { font-size: 17px; }
.quota-pack-heading p { margin-top: 5px; color: var(--text-soft); font-size: 12.5px; }
.quota-pack-heading > span { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 12.5px; }
.quota-pack-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.quota-pack { display: grid; align-content: space-between; min-height: 138px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.quota-pack.is-combo { border-color: var(--accent); background: var(--surface-raised); }
.quota-pack > span { color: var(--text-faint); font-size: 12px; }
.quota-pack > strong { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.45; }
.quota-pack > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quota-pack b { font-size: 18px; }

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 16, 14, 0.42);
  backdrop-filter: blur(4px);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  width: min(390px, 100%);
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: modal-in 160ms ease-out;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.97) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}

.modal-card p {
  margin: 9px 0 22px;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.65;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.toast-region {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
}

.toast {
  gap: 9px;
  min-width: 260px;
  max-width: 360px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  animation: toast-in 200ms ease-out;
}

.toast svg { color: var(--success); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-state {
  padding: 50px 20px;
  color: var(--text-soft);
  text-align: center;
}

@media (max-width: 1120px) {
  .view-container { padding: 32px 28px 68px; }
  .recommendation-paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-thumbnails { grid-template-columns: repeat(4, minmax(80px, 1fr)); }
  .exam-body { grid-template-columns: minmax(320px, 0.8fr) minmax(430px, 1.2fr); }
  .answer-pane { display: none; }
  .achievement-layout { grid-template-columns: 1fr; }
  .knowledge-graph-layout { grid-template-columns: 1fr; }
  .knowledge-graph-detail { position: static; }
  .knowledge-detail { display: grid; grid-template-columns: minmax(180px, .8fr) 1.2fr; gap: 14px 22px; }
  .knowledge-detail > p { margin: 0; }
  .knowledge-detail-stats { align-self: start; }
  .knowledge-next { margin: 0; }
  .knowledge-detail-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar-collapse { display: none; }
  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-102%);
    width: min(290px, 86vw);
    transition: transform 200ms ease;
    box-shadow: var(--shadow-md);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-close,
  .mobile-menu { display: inline-grid; }
  .sidebar-scrim {
    position: fixed;
    z-index: 25;
    inset: 0;
    background: rgba(20, 20, 18, 0.32);
  }
  .sidebar.is-open + .sidebar-scrim { display: block; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .public-paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continue-card { min-height: 230px; }
  .correction-shell { grid-template-columns: 1fr; }
  .source-pane { min-height: 580px; border-right: 0; border-bottom: 1px solid var(--border); }
  .correction-page .page-intro { align-items: flex-start; flex-direction: column; }
  .exam-body { grid-template-columns: 1fr; }
  .passage-pane { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-plan { display: grid; grid-template-columns: 1fr 180px; column-gap: 22px; }
  .pricing-plan ul { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .plan-price { margin-top: 0; }
  .dashboard-insight-grid { grid-template-columns: 1fr; }
  .quota-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-scoring-rule { grid-template-columns: 1fr; }
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail > .knowledge-detail-label,
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail > h2,
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail > .mastery-stars,
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail > p {
    grid-column: 1;
  }
  .knowledge-graph-layout.is-table-view .knowledge-detail-stats {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  .knowledge-graph-layout.is-table-view .knowledge-time-card,
  .knowledge-graph-layout.is-table-view .knowledge-next,
  .knowledge-graph-layout.is-table-view .knowledge-related,
  .knowledge-graph-layout.is-table-view .knowledge-detail-actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .knowledge-matrix,
  .knowledge-matrix tbody,
  .knowledge-matrix tr,
  .knowledge-matrix td {
    display: block;
    width: 100%;
  }
  .knowledge-matrix thead { display: none; }
  .knowledge-matrix tbody { padding: 10px; }
  .knowledge-matrix tr {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
  }
  .knowledge-matrix tr:last-child { margin-bottom: 0; }
  .knowledge-matrix td {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    border-right: 0;
  }
  .knowledge-matrix td::before {
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
  }
  .knowledge-matrix td:nth-child(1)::before { content: "L1 · 模块"; }
  .knowledge-matrix td:nth-child(2)::before { content: "L2 · 章节"; }
  .knowledge-matrix td:nth-child(3)::before { content: "L3 · 知识点簇"; }
  .knowledge-matrix td:nth-child(4)::before { content: "L4 · 原子知识点"; }
  .knowledge-matrix td:nth-child(5)::before { content: "关联试题"; }
  .knowledge-matrix td[colspan] { display: block; }
  .knowledge-matrix td[colspan]::before { content: none; }
  .knowledge-atomic-link,
  .related-question-pills,
  .related-question-pills button { min-width: 0; width: 100%; }
  .related-question-pills { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: 70px; }
  body.exam-mode { padding-bottom: 0; }
  .topbar { height: 58px; padding: 0 14px; }
  .top-ai-wallet-trigger { min-height: 36px; gap: 5px; padding: 3px 8px 3px 3px; }
  .top-ai-wallet-icon { width: 28px; height: 28px; }
  .top-ai-wallet-copy { min-width: auto; }
  .top-ai-wallet-copy small,
  .top-ai-wallet-copy em { display: none; }
  .top-ai-wallet-copy strong { font-size: 13.5px; }
  .top-ai-wallet-popover { position: fixed; top: 64px; right: 12px; width: min(326px, calc(100vw - 24px)); }
  .top-ai-wallet-popover::before { right: 84px; }
  .top-user-copy { display: none; }
  .top-user-trigger { padding: 2px; border: 0; background: transparent; }
  .account-menu { position: fixed; left: 16px; right: 16px; top: 66px; width: auto; }
  .breadcrumb > span:first-child,
  .breadcrumb > svg,
  .help-button { display: none; }
  .view-container { padding: 26px 16px 42px; }
  .mobile-nav {
    position: fixed;
    z-index: 22;
    left: 10px;
    right: 10px;
    bottom: 9px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px 5px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px);
  }
  .mobile-nav button {
    min-height: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px;
    border: 0;
    border-radius: 9px;
    color: var(--text-faint);
    background: transparent;
    cursor: pointer;
  }
  .mobile-nav button.is-active { color: var(--text); background: var(--surface-subtle); }
  .mobile-nav svg { width: 17px; height: 17px; }
  .mobile-nav small { font-size: 12.5px; }
  .mobile-nav .mobile-upload { color: #fff; background: var(--text); }
  .hero-card { min-height: auto; padding: 23px 19px; }
  .hero-card::after { width: 230px; height: 230px; right: -135px; top: -125px; }
  .quick-upload { grid-template-columns: 1fr; padding: 12px; }
  .quick-upload .button { width: 100%; }
  .dashboard-subjects { align-items: flex-start; }
  .dashboard-subjects > span { width: 100%; }
  .recommendation-heading { align-items: flex-start; flex-direction: column; }
  .recommendation-paper-grid { grid-template-columns: 1fr; }
  .recommendation-paper-card h3 { min-height: 0; }
  .subject-setup-backdrop { align-items: end; padding: 0; }
  .subject-setup-card { width: 100%; max-height: 92vh; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .subject-setup-heading { grid-template-columns: 1fr; }
  .subject-setup-icon { width: 42px; height: 42px; }
  .subject-setup-heading h2 { font-size: 21px; }
  .subject-selection-status { align-items: flex-start; flex-direction: column; gap: 3px; }
  .subject-selection-status span:last-child { text-align: left; }
  .subject-option-grid { grid-template-columns: 1fr; }
  .subject-option { min-height: 82px; }
  .subject-setup-actions { position: sticky; bottom: 0; margin: 0 -16px -22px; padding: 13px 16px calc(13px + env(safe-area-inset-bottom)); background: var(--surface); }
  .subject-setup-actions .button { min-width: 0; flex: 1; }
  .metrics-grid { grid-template-columns: 1fr; }
  .dashboard-insight-grid { margin-top: -8px; }
  .usage-bars { grid-template-columns: 1fr; }
  .learning-recommendation-card { align-items: stretch; flex-direction: column; }
  .recommendation-actions { display: grid; grid-template-columns: 1fr; }
  .paper-row { align-items: flex-start; }
  .paper-row .inline-actions { width: 100%; margin-top: 8px; }
  .paper-row .inline-actions .button { flex: 1; }
  .paper-cover { display: none; }
  .stepper { margin-bottom: 25px; }
  .step span:last-child { display: none; }
  .upload-panel, .recognition-panel { padding: 16px; }
  .upload-dropzone { min-height: 280px; }
  .form-grid { grid-template-columns: 1fr; }
  .page-thumbnails { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .recognition-stages { grid-template-columns: repeat(2, 1fr); }
  .recognition-live-grid { grid-template-columns: 1fr; }
  .ocr-result-strip { align-items: stretch; flex-direction: column; }
  .ocr-result-strip .button { width: 100%; }
  .panel-footer { flex-direction: column-reverse; }
  .panel-footer .button { width: 100%; }
  .panel-footer-actions,
  .paper-ready-actions { width: 100%; flex-direction: column; }
  .correction-actions { width: 100%; }
  .correction-actions .button { flex: 1; }
  .issue-banner { align-items: flex-start; }
  .correction-shell { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .source-pane { min-height: 480px; }
  .pdf-canvas { padding: 16px; }
  .mock-pdf-page { min-height: 620px; padding: 34px 26px; }
  .editor-content { padding: 17px; }
  .paper-grid { grid-template-columns: 1fr; }
  .library-hero { min-height: auto; padding: 23px 19px; }
  .library-hero-mark { display: none; }
  .library-toolbar { align-items: stretch; flex-direction: column; }
  .library-toolbar .search-wrap { margin-left: 0; }
  .library-filter-group .filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .library-result-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .public-paper-grid { grid-template-columns: 1fr; }
  .public-paper-preview .paper-cover { display: flex; }
  .public-paper-footer { align-items: flex-start; flex-direction: column; }
  .public-paper-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .public-paper-actions .button { width: 100%; }
  .achievement-intro, .membership-header, .leaderboard-heading { align-items: flex-start; flex-direction: column; }
  .achievement-week, .billing-toggle, .leaderboard-heading > .button { width: 100%; }
  .billing-toggle button { flex: 1; }
  .achievement-toolbar { align-items: stretch; flex-direction: column; }
  .achievement-toolbar .filter-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .knowledge-view-toggle { display: grid; grid-template-columns: 1fr 1fr; }
  .knowledge-view-toggle button { justify-content: center; }
  .knowledge-summary-grid { grid-template-columns: 1fr 1fr; }
  .mastery-legend { justify-content: space-between; }
  .knowledge-canvas-head { align-items: flex-start; }
  .knowledge-tree-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px; background-image: none; }
  .knowledge-lines { display: none; }
  .knowledge-node { position: static; width: auto; min-height: 86px; transform: none; }
  .knowledge-node:hover { transform: translateY(-2px); }
  .knowledge-detail { display: block; }
  .knowledge-detail > p { margin: 16px 0; }
  .knowledge-next { margin: 14px 0; }
  .knowledge-detail-actions { display: grid; grid-template-columns: 1fr; }
  .knowledge-tree-scroll { max-height: 620px; padding: 9px 8px 18px; }
  .knowledge-tree-root ul { margin-left: 7px; padding-left: 14px; }
  .knowledge-tree-select { gap: 6px; padding-right: 7px; }
  .knowledge-tree-name small { white-space: normal; }
  .knowledge-ratio.compact { min-width: 47px; }
  .knowledge-table-toolbar { align-items: stretch; flex-direction: column; }
  .knowledge-table-toolbar .search-wrap { width: 100%; }
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail { display: block; }
  .knowledge-graph-layout.is-table-view .knowledge-graph-detail > p { margin: 16px 0; }
  .knowledge-graph-layout.is-table-view .knowledge-detail-stats,
  .knowledge-graph-layout.is-table-view .knowledge-time-card,
  .knowledge-graph-layout.is-table-view .knowledge-next,
  .knowledge-graph-layout.is-table-view .knowledge-related,
  .knowledge-graph-layout.is-table-view .knowledge-detail-actions { margin-top: 14px; }
  .knowledge-matrix tbody { padding: 8px; }
  .knowledge-matrix td {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }
  .knowledge-pagination { align-items: stretch; flex-direction: column; }
  .knowledge-pagination > div { display: grid; grid-template-columns: 1fr 1fr; }
  .timing-analysis-grid { grid-template-columns: 1fr; }
  .question-review-card summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .question-review-card summary .timing-status { display: none; }
  .question-review-card summary > svg { display: none; }
  .question-review-body { padding-left: 16px; }
  .review-answer-grid { grid-template-columns: 1fr; }
  .my-rank-strip { grid-template-columns: auto 1fr; }
  .rank-score, .rank-total { min-width: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .leaderboard-controls { align-items: flex-start; flex-direction: column; }
  .podium { grid-template-columns: 1fr; }
  .podium-item { min-height: 92px; }
  .pricing-plan { display: block; }
  .pricing-plan ul { grid-template-columns: 1fr; }
  .plan-price { margin-top: 20px; }
  .current-usage-panel { grid-template-columns: 1fr; }
  .current-usage-items { grid-template-columns: 1fr; padding: 15px 0 0; border-top: 1px solid var(--accent-border); border-left: 0; }
  .quota-heading { align-items: flex-start; flex-direction: column; }
  .quota-pack-heading { align-items: flex-start; flex-direction: column; }
  .quota-pack-grid { grid-template-columns: 1fr; }
  .papers-toolbar, .records-toolbar { align-items: stretch; flex-direction: column; }
  .search-wrap { width: 100%; }
  .exam-setup-head { grid-template-columns: 1fr; padding: 18px; }
  .exam-cover-large { display: none; }
  .mode-select { grid-template-columns: 1fr; padding: 18px; }
  .setup-settings { grid-template-columns: 1fr; padding: 0 18px 18px; }
  .setup-footer { align-items: stretch; flex-direction: column; padding: 16px 18px; }
  .setup-footer .button { width: 100%; }
  .exam-topbar { min-height: 58px; padding: 8px 10px; }
  .exam-title .brand-mark, .exam-save { display: none; }
  .exam-title-copy strong { max-width: 120px; }
  .exam-status { gap: 6px; }
  .exam-timer { padding: 7px 8px; }
  .exam-status .button { min-height: 34px; padding: 7px 10px; }
  .question-pane { padding: 24px 18px 18px; }
  .question-text { font-size: 15px; }
  .option { padding: 11px; }
  .exam-controls { position: sticky; bottom: 0; margin-left: -18px; margin-right: -18px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface); }
  .question-progress { display: none; }
  .result-layout { grid-template-columns: 1fr; }
  .result-hero, .result-panel { padding: 19px; }
  .mistake-row { grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 12px; }
  .mistake-row > .button { grid-column: 2; width: 100%; justify-content: center; white-space: normal; }
  .mistake-filter-row { align-items: stretch; }
  .mistake-filter-row > .filter-tabs { display: flex; width: 100%; }
  .mistake-filter-row > .inline-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; min-width: 0; }
  .mistake-filter-row .search-wrap { width: 100%; }
  .login-view { min-height: auto; }
  .login-card { padding: 24px 19px; }
  .toast-region { left: 12px; right: 12px; bottom: 82px; }
  .toast { min-width: 0; width: 100%; }
}

@media (max-width: 420px) {
  .mistake-filter-row > .inline-actions { grid-template-columns: 1fr; }
  .mistake-filter-row [data-action="redo-all"] { width: 100%; justify-content: center; }
  .mistake-tags { gap: 5px; }
  .mistake-answer { gap: 5px 10px; font-size: 12px; }
}

/* Hugging Face-inspired visual refresh */
.main-shell {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 13%, transparent) 0 120px, transparent 121px),
    var(--bg);
}

.hero-card {
  background: linear-gradient(135deg, var(--surface) 0 63%, var(--accent-soft) 100%);
  border-color: color-mix(in srgb, var(--accent-border) 56%, var(--border));
}

.continue-card {
  border-top: 4px solid var(--accent);
}

.metric-icon,
.mode-icon,
.file-icon {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.quick-upload {
  border-color: var(--accent-border);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.07);
}

.quick-upload-copy svg,
.upload-tip svg,
.recognition-orb,
.recognition-alert svg {
  color: var(--accent-ink);
}

.filter-button.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.paper-card,
.exam-setup-card,
.upload-panel,
.recognition-panel,
.correction-shell,
.result-hero,
.result-panel {
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
}

.mobile-nav .mobile-upload {
  color: #111827;
  background: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(122, 85, 0, 0.14);
}

/* Real-paper exam mode */
.exam-room {
  background: #eef0f3;
}

[data-theme="dark"] .exam-room {
  background: #0d1420;
}

.exam-topbar {
  min-height: 68px;
  padding: 10px 20px;
  border-bottom: 3px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
}

.exam-title-copy span b {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  color: #111827;
  background: var(--accent);
  font-weight: 650;
}

.exam-candidate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-faint);
  background: var(--surface-subtle);
  font-size: 12.5px;
}

.exam-candidate strong {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

.exam-candidate i {
  width: 1px;
  height: 16px;
  background: var(--border-strong);
}

.exam-status {
  margin-left: 2px;
}

.exam-timer {
  color: #111827;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.exam-timer svg {
  color: #6e5200;
}

.paper-exam-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  overflow: hidden;
}

.exam-paper-stage {
  min-width: 0;
  overflow: auto;
  padding: 20px 28px 34px;
  scroll-behavior: smooth;
}

.practice-tool-panel { min-height: 52px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.practice-tool-panel strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
.practice-tool-panel p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.practice-tool-panel > small { display: block; margin-top: 5px; color: var(--text-faint); font-size: 12px; }

.practice-tool-panel {
  max-height: 360px;
  overflow: auto;
}

.practice-empty-prompt {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.practice-empty-prompt > span {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #111827;
  background: var(--accent);
}

.practice-empty-prompt strong,
.practice-empty-prompt small { display: block; }
.practice-empty-prompt p { margin-top: 3px; }
.practice-empty-prompt small { margin-top: 5px; color: var(--accent-ink); font-size: 12px; }

.vocabulary-quiz-card,
.sentence-practice-card,
.writing-practice-card {
  display: grid;
  gap: 8px;
}

.vocabulary-quiz-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
}

.vocabulary-quiz-head span,
.writing-task-label,
.sentence-selected-label {
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vocabulary-quiz-head strong {
  margin: 0;
  font: 750 15px/1.2 Georgia, "Times New Roman", serif;
}

.vocabulary-quiz-head small { color: var(--text-faint); font-size: 12px; }
.vocabulary-context { padding: 6px 8px; border-radius: 6px; background: var(--surface); }

.vocabulary-lookup-state {
  min-height: 102px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d9d3bd;
  border-radius: 9px;
  background: #fffdf7;
}

.vocabulary-lookup-state > span {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #6c5610;
  background: #f8e8a4;
}

.vocabulary-lookup-state strong,
.vocabulary-lookup-state small { display: block; }
.vocabulary-lookup-state p { margin: 4px 0 6px; }
.vocabulary-lookup-state small { display: inline-flex; align-items: center; gap: 4px; color: var(--text-faint); font-size: 12px; }
.vocabulary-lookup-spinner svg { animation: vocabulary-lookup-pulse 900ms ease-in-out infinite alternate; }
@keyframes vocabulary-lookup-pulse { to { transform: rotate(12deg) scale(1.13); opacity: .58; } }
.vocabulary-lookup-state.is-error { border-color: #e5b7ad; background: #fff5f2; }
.vocabulary-lookup-state.is-error > span { color: #8b3f33; background: #ffe0da; }
.vocabulary-lookup-state button { padding: 6px 9px; border: 1px solid #c98f83; border-radius: 6px; color: #76352b; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.vocabulary-lookup-state.is-compact { justify-content: center; gap: 9px; min-height: 112px; padding: 18px; border: 0; background: transparent; }
.vocabulary-lookup-state.is-compact > span { width: 32px; height: 32px; }
.vocabulary-lookup-state.is-compact strong { margin: 0; font-size: 12.5px; letter-spacing: .03em; }

.vocabulary-popover-layer {
  position: fixed;
  z-index: 95;
  inset: 0;
  pointer-events: none;
}

.vocabulary-popover {
  position: fixed;
  width: min(430px, calc(100vw - 24px));
  max-height: min(440px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #cfc6a7;
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 97%, #fff8d7);
  box-shadow: 0 18px 46px rgba(34, 31, 21, .2), 0 3px 10px rgba(34, 31, 21, .1);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(4px) scale(.985);
  transform-origin: var(--vocabulary-arrow-left, 50%) top;
  transition: opacity 110ms ease, transform 110ms ease;
  font-family: Arial, "PingFang SC", sans-serif;
}

.vocabulary-popover[data-positioned="true"] { opacity: 1; transform: none; }
.vocabulary-popover.is-anchor-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.vocabulary-popover[data-placement="top"] { transform-origin: var(--vocabulary-arrow-left, 50%) bottom; }

.vocabulary-popover::before {
  position: absolute;
  left: var(--vocabulary-arrow-left, 50%);
  width: 10px;
  height: 10px;
  border-left: 1px solid #cfc6a7;
  border-top: 1px solid #cfc6a7;
  background: var(--surface);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.vocabulary-popover[data-placement="bottom"]::before { top: -6px; }
.vocabulary-popover[data-placement="top"]::before { bottom: -6px; transform: translateX(-50%) rotate(225deg); }

.vocabulary-popover-head {
  position: relative;
  z-index: 1;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.vocabulary-popover-head > span { display: inline-flex; align-items: center; gap: 5px; color: #765e10; font-size: 12px; font-weight: 750; }
.vocabulary-popover-head > strong { overflow: hidden; text-overflow: ellipsis; font: 750 17px/1.2 Georgia, "Times New Roman", serif; white-space: nowrap; }
.vocabulary-popover-head > button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); background: var(--surface); cursor: pointer; }
.vocabulary-popover-head > button:hover { border-color: #c5ad53; color: var(--text); background: #fffaf0; }

.vocabulary-popover-body { min-height: 0; overflow: auto; padding: 10px; overscroll-behavior: contain; }
.vocabulary-popover .vocabulary-quiz-head { grid-template-columns: auto minmax(0, 1fr); }
.vocabulary-popover .vocabulary-quiz-head strong { display: none; }
.vocabulary-popover .vocabulary-quiz-head small { text-align: right; }
.vocabulary-popover .vocabulary-context { max-height: 52px; overflow: auto; line-height: 1.55; }
.vocabulary-popover .vocabulary-lookup-state { min-height: 112px; border: 0; background: transparent; }

.sentence-popover-layer {
  position: fixed;
  z-index: 96;
  inset: 0;
  pointer-events: none;
}

.sentence-popover {
  position: fixed;
  width: min(470px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #b8c8d3;
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 97%, #eef6fb);
  box-shadow: 0 18px 46px rgba(34, 45, 54, .2), 0 3px 10px rgba(34, 45, 54, .1);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(4px) scale(.985);
  transform-origin: var(--sentence-arrow-left, 50%) top;
  transition: opacity 110ms ease, transform 110ms ease;
  font-family: Arial, "PingFang SC", sans-serif;
}

.sentence-popover[data-positioned="true"] { opacity: 1; transform: none; }
.sentence-popover.is-anchor-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.sentence-popover[data-placement="top"] { transform-origin: var(--sentence-arrow-left, 50%) bottom; }

.sentence-popover::before {
  position: absolute;
  left: var(--sentence-arrow-left, 50%);
  width: 10px;
  height: 10px;
  border-left: 1px solid #b8c8d3;
  border-top: 1px solid #b8c8d3;
  background: var(--surface);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.sentence-popover[data-placement="bottom"]::before { top: -6px; }
.sentence-popover[data-placement="top"]::before { bottom: -6px; transform: translateX(-50%) rotate(225deg); }

.sentence-popover-head {
  position: relative;
  z-index: 1;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.sentence-popover-head > span { display: inline-flex; align-items: center; gap: 5px; color: #405d72; font-size: 12px; font-weight: 750; }
.sentence-popover-head > strong { overflow: hidden; color: var(--text-soft); font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sentence-popover-head > button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); background: var(--surface); cursor: pointer; }
.sentence-popover-head > button:hover { border-color: #9cafbb; color: var(--text); background: #f1f6f9; }

.sentence-popover-body { min-height: 0; overflow: auto; padding: 10px; overscroll-behavior: contain; }
.sentence-popover .sentence-practice-card { min-width: 0; }
.sentence-popover .sentence-practice-card blockquote { max-height: 86px; overflow: auto; background: #f5f8fa; }
.sentence-popover .sentence-practice-card textarea { min-height: 74px; max-height: 120px; resize: none; }
.sentence-popover .sentence-review { overflow: visible; }

.vocabulary-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.vocabulary-option-grid button {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}

.vocabulary-option-grid button:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-soft); }
.vocabulary-option-grid button:disabled { cursor: default; opacity: .78; }
.vocabulary-option-grid button b { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--surface-subtle); font-size: 12px; }
.vocabulary-option-grid button.is-correct { color: #17351f; border-color: #95c8a5; background: #edf8f0; opacity: 1; }
.vocabulary-option-grid button.is-wrong { color: #6c2e24; border-color: #e2a79d; background: #fff0ed; opacity: 1; }

.vocabulary-answer {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid #b9d7c3;
  border-radius: 7px;
  background: #edf8f0;
}

.vocabulary-answer.is-wrong { border-color: #e4c48f; background: #fff6e4; }
.vocabulary-answer span { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.vocabulary-answer strong { margin: 0; font-size: 12px; }

.sentence-selected-label { display: flex; align-items: center; gap: 5px; }
.sentence-practice-card blockquote { margin: 0; padding: 8px 10px; border-left: 3px solid var(--accent); color: var(--text); background: var(--surface); font: 12.5px/1.6 Georgia, "Times New Roman", serif; }
.sentence-practice-card label,
.writing-practice-card label { display: grid; gap: 5px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.sentence-practice-card textarea,
.writing-practice-card textarea { width: 100%; resize: vertical; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface); font: 12px/1.65 Arial, "PingFang SC", sans-serif; outline: none; }
.sentence-practice-card textarea:focus,
.writing-practice-card textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-soft); }
.sentence-practice-actions,
.writing-draft-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sentence-practice-actions small,
.writing-draft-meta span { color: var(--text-faint); font-size: 12px; }
.sentence-practice-action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.sentence-practice-actions button,
.writing-outline-wrap > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--accent-border); border-radius: 7px; color: #111827; background: var(--accent); cursor: pointer; font-size: 12px; font-weight: 700; }
.sentence-practice-actions button.is-secondary { color: var(--text-soft); border-color: var(--border); background: var(--surface); }
.sentence-practice-actions button.is-secondary:hover { color: var(--text); border-color: #9cafbb; background: #f5f8fa; }
.writing-outline-wrap > button:disabled { cursor: default; }

.sentence-review { display: grid; gap: 6px; padding: 9px; border: 1px solid #b9d7c3; border-radius: 8px; background: #edf8f0; }
.sentence-review.needs-work { border-color: #e4c48f; background: #fff6e4; }
.sentence-review.is-skipped { border-color: #c3d2dc; background: #f4f8fa; }
.sentence-review > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sentence-review > div:first-child span { font-size: 12px; font-weight: 750; }
.sentence-review > div:first-child strong { margin: 0; font-size: 15px; }
.sentence-review-feedback { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.sentence-complete-translation,
.sentence-analysis-breakdown,
.sentence-keyword-glosses { display: grid; gap: 6px; padding: 9px; border: 1px solid rgba(91, 111, 126, .24); border-radius: 8px; background: var(--surface); }
.sentence-complete-translation { border-left: 3px solid #5f7d91; background: #f5f9fb; }
.sentence-complete-translation > span,
.sentence-analysis-breakdown > span,
.sentence-keyword-glosses > span { display: flex; align-items: center; gap: 5px; color: #405d72; font-size: 12px; font-weight: 750; }
.sentence-translation-pair { display: grid; gap: 7px; }
.sentence-translation-pair > div { display: grid; gap: 4px; padding: 8px; border-radius: 7px; background: var(--surface); }
.sentence-translation-pair > div + div { border-top: 1px dashed var(--border); }
.sentence-translation-pair small { color: #5f7689; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.sentence-translation-pair p { margin: 0; color: var(--text); line-height: 1.65; }
.sentence-translation-pair p[lang="en"] { font: 12.5px/1.65 Georgia, "Times New Roman", serif; }
.sentence-translation-pair p[lang="zh-CN"] { font-size: 12.5px; font-weight: 650; }
.sentence-analysis-breakdown ol { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.sentence-keyword-glosses > div { display: flex; flex-wrap: wrap; gap: 5px; }
.sentence-keyword-glosses small { padding: 4px 6px; border-radius: 6px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12px; line-height: 1.4; }
.sentence-structure-unlock { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--accent-border); border-radius: 8px; color: #111827; background: var(--accent); cursor: pointer; font-size: 12px; font-weight: 750; }
.sentence-analysis-loading { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-soft); }
.sentence-analysis-loading > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #405365; background: #e4edf3; }
.sentence-analysis-loading strong { margin: 0; font-size: 12.5px; letter-spacing: .03em; }
.sentence-analysis-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid #e5b7ad; border-radius: 7px; color: #76352b; background: #fff5f2; }
.sentence-analysis-error strong { margin: 0; font-size: 12px; }
.sentence-analysis-error button { padding: 5px 8px; border: 1px solid #c98f83; border-radius: 6px; color: #76352b; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }

.writing-practice-card > strong { margin: 0; font: 650 12.5px/1.55 Georgia, "Times New Roman", serif; }
.writing-outline-wrap { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.writing-outline-wrap > button { width: max-content; }
.writing-outline-wrap ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.writing-draft-meta strong { margin: 0; color: var(--accent-ink); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.writing-return-note { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }

.workbench-reading-focus { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; margin-top: 7px; padding: 7px 8px; border: 1px solid var(--accent-border); border-radius: 7px; background: var(--surface); }
.workbench-reading-focus span { color: var(--accent-ink); font-size: 12px; font-weight: 750; }
.workbench-reading-focus mark { color: var(--text); background: var(--accent-soft); font: 12px/1.5 Georgia, "Times New Roman", serif; }
.workbench-reading-focus small { grid-column: 1 / -1; color: var(--text-faint); font-size: 12px; }

.paper-view-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  width: min(900px, 100%);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 auto 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  font-size: 12.5px;
}

.paper-view-toolbar > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.paper-view-toolbar button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.paper-view-toolbar b {
  min-width: 43px;
  color: var(--text);
  font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.paper-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  color: #111827;
  background: var(--accent);
  font-weight: 600;
}

.real-exam-paper {
  width: min(900px, 100%);
  min-height: 1180px;
  margin: 0 auto;
  padding: 42px 54px 30px;
  border: 1px solid #d4d6d9;
  color: #171717;
  background: #fff;
  box-shadow: 0 15px 40px rgba(17, 24, 39, 0.16);
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
}

.paper-security-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1f2937;
  font: 600 12.5px/1.4 Arial, "PingFang SC", sans-serif;
  letter-spacing: 0.06em;
}

.real-paper-header {
  padding: 28px 0 20px;
  text-align: center;
}

.real-paper-header p {
  margin: 0 0 7px;
  font: 600 14px/1.4 "Songti SC", "SimSun", serif;
  letter-spacing: 0.12em;
}

.real-paper-header h1 {
  margin: 0 0 8px;
  color: #111;
  font: 700 34px/1.2 "Songti SC", "SimSun", serif;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}

.real-paper-header span {
  font: 13.5px/1.4 Arial, sans-serif;
}

.candidate-strip {
  display: flex;
  justify-content: center;
  gap: 54px;
  padding: 10px 14px;
  border-top: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
  font: 13.5px/1.4 "Songti SC", serif;
}

.candidate-strip u {
  min-width: 120px;
  display: inline-block;
  padding: 0 8px 2px;
  text-decoration: none;
  border-bottom: 1px solid #3f3f3f;
  font-family: Arial, sans-serif;
  text-align: center;
}

.paper-notice {
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid #b9b9b9;
  background: #fafafa;
  font: 13.5px/1.7 "Songti SC", serif;
}

.paper-notice strong {
  display: block;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: 0.1em;
}

.paper-notice ol {
  margin: 0;
  padding-left: 20px;
}

.paper-section-title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 10px 13px;
  color: #111827;
  background: #ffd21e;
  font-family: Arial, sans-serif;
}

.paper-section-title span,
.paper-section-title em {
  font-size: 12.5px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper-section-title strong {
  font-size: 15px;
  text-align: center;
}

.paper-part-title {
  margin: 22px 0 15px;
}

.paper-part-title strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  text-align: center;
}

.paper-part-title span {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.paper-part-title p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.real-paper-passage {
  padding: 5px 2px 2px;
  font-size: 14px;
  line-height: 1.82;
  text-align: justify;
}

.real-paper-passage .passage-title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.real-paper-passage p {
  margin: 0 0 13px;
  text-indent: 2em;
}

.paper-material-block + .paper-material-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #b8b8b8;
}

.real-exam-paper:not(.subject-英语一):not(.subject-英语二) .real-paper-passage {
  margin: 13px 0 20px;
  padding: 14px 16px;
  border: 1px solid #c8c8c8;
  background: #fafafa;
  font-family: "Songti SC", "SimSun", serif;
}

.real-exam-paper:not(.subject-英语一):not(.subject-英语二) .real-paper-passage p {
  text-indent: 0;
}

.vocabulary-word {
  display: inline;
  padding: 0 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.vocabulary-word:hover,
.vocabulary-word:focus-visible,
.vocabulary-word.is-active {
  border-bottom-color: #8a6b00;
  outline: none;
  background: #fff3b6;
}

.vocabulary-word.is-recommended { border-bottom: 1px dashed #8a6b00; }
.vocabulary-word.is-saved {
  border-bottom-color: #4f7d68;
  border-bottom-style: solid;
  background: #e8f2ec;
}

.practice-sentence-selectable {
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.practice-sentence-selectable.is-selected {
  background: #d8e9f3;
  box-shadow: 0 0 0 2px rgba(73, 107, 131, .36), inset 0 -2px 0 rgba(73, 107, 131, .18);
}

.practice-sentence-selectable.is-selected .vocabulary-word,
.practice-sentence-selectable.is-selected .vocabulary-word:hover,
.practice-sentence-selectable.is-selected .vocabulary-word:focus-visible,
.practice-sentence-selectable.is-selected .vocabulary-word.is-active,
.practice-sentence-selectable.is-selected .vocabulary-word.is-saved {
  background: transparent;
}

.vocabulary-word.is-long-pressing {
  border-bottom-color: #5d7486;
  background: #dfeaf1;
  animation: sentence-long-press-progress 520ms linear forwards;
}

@keyframes sentence-long-press-progress {
  from { box-shadow: inset 0 -2px 0 rgba(95, 118, 137, .16); }
  to { box-shadow: inset 0 -2px 0 #5f7689, 0 0 0 3px rgba(95, 118, 137, .14); }
}

.real-paper-passage p.is-reading-focus {
  margin-left: -10px;
  margin-right: -10px;
  padding: 9px 10px;
  border-left: 4px solid #ffd21e;
  border-radius: 4px;
  background: #fff9d9;
  box-shadow: 0 0 0 1px #f1dd76;
}

.paper-question-list {
  display: grid;
  gap: 7px;
  margin-top: 22px;
}

.paper-question {
  position: relative;
  padding: 14px 12px 14px 46px;
  border-left: 4px solid transparent;
  transition: background 150ms ease, border-color 150ms ease;
  scroll-margin: 80px;
}

.paper-question.is-current {
  border-left-color: #ffd21e;
  background: #fffbed;
}

.paper-question-head {
  position: absolute;
  left: 10px;
  top: 13px;
}

.paper-question-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #242424;
  border-radius: 50%;
  font: 700 13.5px Arial, sans-serif;
}

.paper-mark-button {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  background: #fff;
  cursor: pointer;
  font: 12.5px Arial, sans-serif;
}

.paper-mark-button.is-marked {
  color: #9a5300;
  border-color: #e2ad4c;
  background: #fff0cf;
}

.paper-collection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.paper-collection-actions small { color: var(--text-faint); font-size: 11px; }
.paper-collection-actions button[aria-pressed="true"] { color: var(--success); border-color: var(--accent-border); }

.paper-question-text {
  margin: 0 80px 10px 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 600;
}

.question-assist {
  display: grid;
  gap: 7px;
  margin: -2px 0 10px;
  font-family: Arial, "PingFang SC", sans-serif;
}

.question-hint-trigger {
  width: max-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #dacb82;
  border-radius: 7px;
  color: #5d4800;
  background: #fffbed;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  list-style: none;
}

.question-hint-trigger::-webkit-details-marker,
.second-hint-details > summary::-webkit-details-marker { display: none; }
.question-hint-trigger:hover:not(:disabled) { border-color: #c2a800; background: #fff3b0; }
.question-hint-trigger:disabled { color: #315238; border-color: #afd0b8; background: #edf8f0; cursor: default; }
.question-hint-trigger small { margin-left: 3px; padding-left: 7px; border-left: 1px solid currentColor; font-size: 12px; font-weight: 600; opacity: .72; }
.question-assist[open] > .question-hint-trigger { color: #315238; border-color: #afd0b8; background: #edf8f0; }

.question-local-tool-panel {
  padding: 10px;
  border: 1px solid #e6d897;
  border-radius: 9px;
  background: #fffdf3;
}

.question-hint-card {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid #e6d897;
  border-radius: 8px;
  color: #3f3517;
  background: #fffbed;
  font-size: 12px;
  line-height: 1.55;
}

.question-hint-card > span { color: #7c6200; font-size: 12px; font-weight: 750; }
.question-hint-card > strong { font-size: 12.5px; line-height: 1.55; }
.question-hint-card p { margin: 0; }
.question-hint-card mark { padding: 1px 3px; color: #302500; background: #ffe769; }
.question-hint-card > small { color: #756b4c; font-size: 12px; }
.question-hint-card > button { width: max-content; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #d6bd42; border-radius: 6px; color: #5d4800; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }

.layered-question-assist { grid-template-columns: 1fr; }
.hint-layer.first { border-left: 4px solid #ffd21e; }
.hint-layer.second { border-color: #b7c7de; border-left: 4px solid #6b89b4; color: #243247; background: #f2f6fb; }
.hint-layer.second > span { color: #3b5f8d; }

.second-hint-details { display: grid; gap: 7px; }
.second-hint-details > summary {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #b7c7de;
  border-radius: 7px;
  color: #3b5f8d;
  background: #f7f9fc;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}
.second-hint-details > summary small { margin-left: 3px; font-size: 12px; opacity: .7; }
.second-hint-details[open] > summary { color: #315238; border-color: #afd0b8; background: #edf8f0; }

.paper-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.paper-option {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #252525;
  background: transparent;
  cursor: pointer;
  font: 13.5px/1.5 Georgia, "Times New Roman", serif;
  text-align: left;
}

.paper-option:hover {
  border-color: #d1d5db;
  background: #f8f8f8;
}

.paper-option.is-selected {
  border-color: #e6c100;
  background: #fff3a8;
  box-shadow: inset 0 0 0 1px #ffd21e;
}

.paper-choice {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #707070;
  border-radius: 50%;
  font: 700 12.5px Arial, sans-serif;
}

.paper-option.is-selected .paper-choice {
  color: #111827;
  border-color: #111827;
  background: #ffd21e;
}

.submit-multiple-answer {
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid #d3b921;
  border-radius: 7px;
  color: #3f3300;
  background: #fff5b8;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
}

.paper-written-answer {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  background: #fafafa;
  font-family: Arial, "PingFang SC", sans-serif;
}

.paper-written-answer label {
  display: grid;
  gap: 6px;
}

.paper-written-answer label > span {
  color: #555;
  font-size: 12.5px;
  font-weight: 700;
}

.paper-written-answer input,
.paper-written-answer textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cfd2d7;
  border-radius: 7px;
  color: #222;
  background: #fff;
  font: 13.5px/1.7 Arial, "PingFang SC", sans-serif;
  outline: none;
}

.paper-written-answer textarea { resize: vertical; }
.paper-written-answer input:focus,
.paper-written-answer textarea:focus { border-color: #d4b600; box-shadow: 0 0 0 3px rgba(255, 210, 30, .18); }
.paper-written-answer.is-fill { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.paper-written-answer > button {
  width: max-content;
  justify-self: end;
  padding: 7px 10px;
  border: 1px solid #d3b921;
  border-radius: 7px;
  color: #3f3300;
  background: #ffd21e;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
}

.practice-inline-feedback {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px 10px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid #b9d7c3;
  border-radius: 8px;
  color: #17351f;
  background: #edf8f0;
  font-family: Arial, "PingFang SC", sans-serif;
}

.practice-inline-feedback.is-wrong { color: #543310; border-color: #e4c48f; background: #fff6e4; }
.practice-inline-feedback > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; }
.practice-inline-feedback > strong { font-size: 12.5px; }
.practice-inline-feedback > p { grid-column: 1 / 3; margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; }
.practice-inline-feedback > button { grid-row: 1 / 3; grid-column: 3; padding: 6px 8px; border: 1px solid currentColor; border-radius: 6px; color: inherit; background: transparent; cursor: pointer; font-size: 12px; }
.practice-inline-feedback > small { grid-column: 1 / -1; color: inherit; font-size: 12px; opacity: .72; }

.real-paper-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  padding-top: 12px;
  border-top: 1px solid #3f3f3f;
  color: #555;
  font: 12.5px Arial, sans-serif;
}

.real-paper-footer strong {
  color: #111;
  font-size: 13.5px;
}

.real-paper-footer span:last-child {
  text-align: right;
}

.paper-pagination {
  width: min(900px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px auto 0;
}

.paper-pagination .button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.paper-pagination span {
  color: var(--text-soft);
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.real-answer-sheet {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 16px 20px;
  border-left: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
}

.answer-sheet-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px 0;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--accent);
}

.answer-sheet-header span {
  display: block;
  color: #6e5200;
  font: 700 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.09em;
}

.answer-sheet-header h2 {
  margin: 3px 0 0;
  color: #111827;
  font-size: 17px;
}

.answer-sheet-close {
  display: none;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 8px;
  color: #111827;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.answer-candidate {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  padding: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-raised);
  font-size: 12.5px;
}

.answer-candidate strong {
  color: var(--text);
}

.answer-section {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.answer-section.is-current-section {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.answer-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 11px;
  font-size: 13.5px;
}

.answer-section h3 span {
  padding: 3px 6px;
  border-radius: 5px;
  color: #111827;
  background: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.real-answer-sheet .answer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.real-answer-sheet .answer-cell {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 7px;
  font-size: 12.5px;
}

.real-answer-sheet .answer-cell.is-current {
  border-color: #111827;
  box-shadow: 0 0 0 2px #111827;
}

.real-answer-sheet .answer-cell.is-answered {
  color: #111827;
  border-color: #e0bb00;
  background: var(--accent);
}

.real-answer-sheet .answer-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 3px;
  padding: 12px 3px 0;
}

.real-answer-sheet .legend-dot.answered {
  border-color: #d1af00;
  background: var(--accent);
}

.answer-sheet-tip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 12.5px;
  line-height: 1.55;
}

.answer-sheet-tip svg {
  flex: 0 0 auto;
  color: var(--accent-ink);
}

.answer-sheet-backdrop,
.exam-mobile-dock {
  display: none;
}

@media (max-width: 1120px) {
  .subject-tool-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subject-tool-preview > span { grid-column: 1 / -1; }
  .setup-practice-preview { grid-template-columns: 1fr; }

  .paper-exam-body {
    grid-template-columns: 1fr;
  }

  .real-answer-sheet {
    position: fixed;
    z-index: 80;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(340px, 88vw);
    display: flex;
    transform: translateX(102%);
    box-shadow: -18px 0 45px rgba(17, 24, 39, 0.2);
    transition: transform 180ms ease;
  }

  .real-answer-sheet.is-open {
    transform: translateX(0);
  }

  .answer-sheet-close {
    display: grid;
  }

  .answer-sheet-backdrop {
    position: fixed;
    z-index: 75;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    border: 0;
    background: rgba(15, 23, 34, 0.38);
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .answer-sheet-backdrop.is-visible {
    visibility: visible;
    opacity: 1;
  }

  .exam-mobile-dock {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: 12px;
    width: min(480px, calc(100% - 24px));
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
  }

  .exam-mobile-dock button {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    color: var(--text-soft);
    background: transparent;
    cursor: pointer;
    font-size: 12.5px;
  }

  .exam-mobile-dock .answer-sheet-trigger {
    color: #111827;
    background: var(--accent);
    font-weight: 600;
  }

  .answer-sheet-trigger span {
    min-width: 19px;
    padding: 2px 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.58);
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .paper-pagination {
    margin-bottom: 68px;
  }
}

@media (max-width: 760px) {
  .subject-case-head { grid-template-columns: auto 1fr; }
  .subject-case-head .button { grid-column: 1 / -1; }
  .paper-structure-grid { grid-template-columns: 1fr 1fr; }
  .setup-practice-preview > div:last-child { grid-template-columns: 1fr 1fr; }
  .practice-tool-panel { display: block; max-height: 300px; }
  .vocabulary-option-grid { grid-template-columns: 1fr; }

  .exam-topbar {
    min-height: 58px;
    padding: 7px 9px;
  }

  .exam-title .brand-mark,
  .exam-candidate,
  .exam-save {
    display: none;
  }

  .exam-title-copy strong {
    max-width: 142px;
    font-size: 12.5px;
  }

  .exam-title-copy span {
    font-size: 12px;
  }

  .exam-status {
    gap: 5px;
  }

  .exam-timer {
    padding: 7px 8px;
    font-size: 13.5px;
  }

  .exam-status .button {
    min-height: 34px;
    padding: 7px 10px;
  }

  .exam-paper-stage {
    padding: 9px 8px 28px;
  }

  .paper-view-toolbar {
    min-height: 39px;
    margin-bottom: 8px;
    padding: 5px 7px;
  }

  .paper-view-toolbar > span:nth-child(2),
  .paper-view-toolbar > div {
    display: none;
  }

  .real-exam-paper {
    min-height: 1000px;
    padding: 24px 16px 22px;
    box-shadow: 0 7px 22px rgba(17, 24, 39, 0.13);
  }

  .paper-security-line {
    font-size: 12px;
  }

  .real-paper-header {
    padding: 20px 0 15px;
  }

  .real-paper-header p {
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }

  .real-paper-header h1 {
    font-size: 27px;
  }

  .candidate-strip {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding: 9px;
    font-size: 12.5px;
  }

  .candidate-strip u {
    min-width: 150px;
  }

  .paper-notice {
    margin: 14px 0;
    padding: 10px 11px;
    font-size: 12.5px;
  }

  .paper-section-title {
    gap: 7px;
    padding: 9px 8px;
  }

  .paper-section-title strong {
    font-size: 13.5px;
  }

  .paper-section-title span,
  .paper-section-title em {
    font-size: 12px;
  }

  .paper-part-title p,
  .real-paper-passage {
    font-size: 13.5px;
  }

  .paper-question {
    padding: 13px 4px 13px 37px;
  }

  .paper-question-head {
    left: 3px;
  }

  .paper-question-number {
    width: 25px;
    height: 25px;
  }

  .paper-question-text {
    margin-right: 0;
    padding-right: 54px;
    font-size: 13.5px;
  }

  .paper-mark-button {
    right: 3px;
    font-size: 12px;
  }

  .paper-options {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .paper-option {
    padding: 7px 6px;
    font-size: 12.5px;
  }

  .paper-pagination span {
    display: none;
  }

  .paper-pagination .button {
    flex: 1;
  }

  .practice-inline-feedback { grid-template-columns: 1fr; }
  .practice-inline-feedback > p,
  .practice-inline-feedback > button { grid-column: 1; grid-row: auto; }
  .paper-written-answer.is-fill { grid-template-columns: 1fr; }
  .paper-written-answer > button { width: 100%; justify-self: stretch; }
}

@media (max-width: 680px) {
  .paper-detail-cover > .paper-cover { display: block; }
  .paper-structure-grid,
  .subject-tool-preview,
  .setup-practice-preview > div:last-child { grid-template-columns: 1fr; }
}

/* Membership checkout and AI credits */
.current-usage-panel { grid-template-columns: .58fr 1.42fr; }
.current-usage-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.experience-moment-card {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.35fr) auto;
  align-items: center;
  gap: 20px;
  margin: 16px 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--accent-border);
  border-radius: 15px;
  background: linear-gradient(115deg, var(--accent-soft), var(--surface) 72%);
}

.experience-moment-card > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.experience-moment-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  color: #111827;
  background: var(--accent);
}

.experience-moment-card h2 { margin-top: 2px; font-size: 14px; }
.experience-moment-card > div:first-child p:last-child { margin-top: 4px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.experience-moment-quotas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.experience-moment-quotas span { display: grid; gap: 3px; padding-left: 10px; border-left: 1px solid var(--border); color: var(--text-faint); font-size: 12px; }
.experience-moment-quotas b { color: var(--text); font-size: 12.5px; }

.credit-balance-mark {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 17%, var(--surface));
  font-size: 12px;
  font-weight: 650;
}

.credit-balance-mark svg { color: var(--accent-ink); }

.ai-credit-section {
  margin-top: 25px;
  padding: 22px;
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--accent) 18%, transparent) 0 115px, transparent 116px),
    linear-gradient(135deg, var(--surface) 0 72%, var(--accent-soft) 100%);
  box-shadow: var(--shadow-sm);
}

.ai-credit-heading,
.ai-credit-heading > div:first-child,
.ai-credit-balance,
.credit-rules,
.ai-credit-pack footer,
.ai-credit-pack footer > div {
  display: flex;
  align-items: center;
}

.ai-credit-heading { justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ai-credit-heading > div:first-child { gap: 11px; }
.ai-credit-heading-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #111827;
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ai-credit-heading h2 { font-size: 18px; }
.ai-credit-heading p { max-width: 640px; margin-top: 5px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.ai-credit-balance { flex: 0 0 auto; gap: 5px; padding: 10px 13px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--surface); }
.ai-credit-balance span { color: var(--text-faint); font-size: 12px; }
.ai-credit-balance strong { font-size: 19px; }
.ai-credit-balance small { color: var(--accent-ink); font-size: 12.5px; }
.ai-credit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ai-credit-pack {
  position: relative;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ai-credit-pack.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-sm); }
.credit-recommend-label { position: absolute; right: 12px; top: 12px; padding: 4px 6px; border-radius: 5px; color: #111827 !important; background: var(--accent); font-size: 12px !important; font-weight: 700; }
.ai-credit-pack > span:first-child { color: var(--text-faint); font-size: 12px; font-weight: 600; }
.credit-points { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; }
.credit-points strong { font-size: 29px; letter-spacing: -.04em; }
.credit-points small { color: var(--text-faint); font-size: 12.5px; }
.ai-credit-pack > p { margin: 5px 0; color: var(--text-soft); font-size: 12.5px; }
.ai-credit-pack > p b { color: var(--success); }
.ai-credit-pack > small { color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.ai-credit-pack footer { justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.ai-credit-pack footer > div { align-items: flex-start; flex-direction: column; gap: 2px; }
.ai-credit-pack footer b { font-size: 17px; }
.ai-credit-pack footer span { color: var(--text-faint); font-size: 12px; }
.credit-rules { flex-wrap: wrap; gap: 16px; margin-top: 13px; color: var(--text-faint); font-size: 12px; }
.credit-rules span { display: flex; align-items: center; gap: 5px; }
.credit-rules svg { color: var(--success); }

/* 2026-09-20 会员页精简：通用权益条 / 折算用量 / 邀请一行 / 折叠计费表 */
.membership-perk-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.membership-perk-strip li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 12.5px;
}
.membership-perk-strip li svg { flex: 0 0 auto; color: var(--success); }

.membership-plan-yield {
  margin: 0 0 13px;
  padding: 9px 11px;
  border: 1px dashed var(--accent-border);
  border-radius: 9px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  font-size: 12.5px;
  line-height: 1.5;
}
.membership-plan-yield b { color: var(--accent-ink); font-size: 13.5px; }

.membership-invite-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 15px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 12.5px;
}
.membership-invite-icon { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: #111827; background: var(--accent); }
.membership-invite-line > span:nth-child(2) { color: var(--text-soft); }
.membership-invite-line b { color: var(--accent-ink); }
.membership-invite-line small { color: var(--text-faint); font-size: 12px; }
.membership-invite-line code {
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid var(--accent-border);
  border-radius: 7px;
  background: var(--surface);
  font: 700 12.5px var(--mono);
  letter-spacing: .06em;
}

.membership-cost-details {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.membership-cost-details > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 17px;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.membership-cost-details > summary::-webkit-details-marker { display: none; }
.membership-cost-details > summary svg { flex: 0 0 auto; color: var(--accent-ink); }
.membership-cost-details > summary em { margin-left: auto; color: var(--text-faint); font-size: 12px; font-style: normal; font-weight: 400; }
.membership-cost-details > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.membership-cost-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.membership-cost-details[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.membership-cost-details[open] > summary::after { transform: rotate(-135deg); }
.membership-cost-details > .ai-cost-groups { margin: 17px 17px 0; }
.membership-cost-details > .credit-rules { margin: 14px 17px 0; }
.membership-cost-details > .membership-note { margin: 12px 17px 17px; }
.membership-cost-details .ai-cost-group li > strong { font-size: 14px; }



/* Unified AI points membership model */
.unified-membership-page .unified-wallet-panel {
  grid-template-columns: minmax(180px, .68fr) minmax(220px, .82fr) minmax(320px, 1.25fr);
  align-items: stretch;
  gap: 18px;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 18%, transparent) 0 135px, transparent 136px),
    linear-gradient(115deg, var(--accent-soft), var(--surface) 76%);
}
.unified-wallet-panel .current-plan-summary { padding-right: 18px; border-right: 1px solid var(--accent-border); }
.unified-wallet-balance { display: grid; align-content: center; gap: 7px; }
.unified-wallet-balance > span { color: var(--text-faint); font-size: 12px; }
.unified-wallet-balance > strong { display: flex; align-items: baseline; gap: 5px; font-size: 31px; letter-spacing: -.04em; }
.unified-wallet-balance > strong small { color: var(--accent-ink); font-size: 12.5px; letter-spacing: 0; }
.unified-wallet-balance > div:not(.usage-bar) { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-soft); font-size: 12px; }
.unified-wallet-balance > div:not(.usage-bar) b { color: var(--text); }
.unified-wallet-balance > small { color: var(--text-faint); font-size: 12px; }
.unified-cost-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.unified-cost-glance > div { display: grid; align-content: center; gap: 4px; min-height: 58px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.unified-cost-glance span { color: var(--text-faint); font-size: 12px; }
.unified-cost-glance strong { font-size: 12.5px; }
.unified-cost-glance small { color: var(--text-faint); font-size: 12px; }

.membership-offer-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.membership-offer-heading { margin: 0 0 13px; }
.membership-offer-heading h2 { margin-top: 3px; font-size: 19px; }
.membership-offer-heading p:last-child { margin-top: 5px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.membership-offer-heading > span { flex: 0 0 auto; padding: 9px 11px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--text-soft); background: var(--accent-soft); font-size: 12px; }
.membership-offer-heading > span b { color: var(--accent-ink); }
.membership-points-emphasis { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0 0 13px; padding: 10px 11px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); }
.membership-points-emphasis > span { align-self: end; color: var(--accent-ink); font-size: 12px; }
.membership-points-emphasis > strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 17px; }
.membership-points-emphasis > small { color: var(--text-faint); font-size: 12px; }

.ai-cost-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-cost-group { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }
.ai-cost-group > header { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.ai-cost-group > header > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #111827; background: var(--accent); }
.ai-cost-group > header strong { font-size: 12.5px; }
.ai-cost-group ul { display: grid; margin: 0; padding: 5px 12px; list-style: none; }
.ai-cost-group li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ai-cost-group li:last-child { border-bottom: 0; }
.ai-cost-group li > span { display: grid; gap: 3px; color: var(--text-soft); font-size: 12.5px; }
.ai-cost-group li small { color: var(--text-faint); font-size: 12px; }
.ai-cost-group li > strong { flex: 0 0 auto; color: var(--accent-ink); font-size: 15px; }
.ai-cost-group li em { margin-left: 2px; font-size: 12px; font-style: normal; }
.knowledge-analysis-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 13px; border: 1px solid var(--accent-border); border-radius: 11px; background: var(--accent-soft); }
.knowledge-analysis-lock > span { width: 34px; height: 34px; display: grid; place-items: center; grid-row: 1 / span 2; border-radius: 9px; color: #111827; background: var(--accent); }
.knowledge-analysis-lock strong { font-size: 12.5px; }
.knowledge-analysis-lock p { margin-top: 3px !important; color: var(--text-soft); font-size: 12px !important; line-height: 1.55; }
.knowledge-analysis-lock .button { grid-column: 2; width: max-content; }

.checkout-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}
.checkout-heading .back-link { margin-bottom: 14px; }
.checkout-heading .back-link:disabled { cursor: default; opacity: .45; }
.checkout-heading h1 { margin-top: 5px; font-size: 28px; }
.checkout-heading > div:first-child > p:last-child { margin-top: 7px; color: var(--text-soft); font-size: 12.5px; }
.checkout-expiry {
  min-width: 174px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 13px 15px;
  border: 1px solid var(--warning-border);
  border-radius: 12px;
  background: var(--warning-soft);
}
.checkout-expiry span { align-self: end; color: var(--warning); font-size: 12px; }
.checkout-expiry strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--warning); font: 700 19px var(--mono); }
.checkout-expiry small { color: var(--warning); font-size: 12px; opacity: .82; }
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 19px; color: var(--text-faint); font-size: 12px; }
.checkout-steps span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.checkout-steps i { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); font-style: normal; }
.checkout-steps b { width: min(110px, 10vw); height: 1px; background: var(--border); }
.checkout-steps .is-active { color: var(--text); font-weight: 650; }
.checkout-steps .is-active i { border-color: var(--accent); color: #111827; background: var(--accent); }
.checkout-steps .is-complete { color: var(--success); }
.checkout-steps .is-complete i { border-color: var(--success-border); background: var(--success-soft); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: start; gap: 16px; }
.checkout-main { display: grid; gap: 14px; }
.checkout-product-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 19px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.checkout-product-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #111827; background: var(--accent); }
.checkout-product-card > div:nth-child(2) > span { color: var(--accent-ink); font-size: 12px; font-weight: 650; }
.checkout-product-card h2 { margin-top: 3px; font-size: 15px; }
.checkout-product-card p { margin-top: 4px; color: var(--text-soft); font-size: 12.5px; }
.checkout-product-card > strong { font-size: 23px; letter-spacing: -.03em; }
.checkout-benefit-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.checkout-benefit-tags small { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12px; }
.checkout-benefit-tags svg { color: var(--success); }
.payment-method-section { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.payment-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.payment-section-title h2 { font-size: 14px; }
.payment-section-title p { margin-top: 4px; color: var(--text-faint); font-size: 12px; }
.payment-section-title > span { display: flex; align-items: center; gap: 4px; color: var(--success); font-size: 12px; }
.payment-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.payment-method {
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.payment-method:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.payment-method.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.payment-method:disabled { cursor: default; opacity: .66; }
.payment-brand { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 15px; font-style: normal; font-weight: 750; }
.payment-brand.wechat { background: #20b767; }
.payment-brand.alipay { background: #1677ff; }
.payment-method span { display: grid; gap: 3px; }
.payment-method strong { font-size: 12.5px; }
.payment-method small { color: var(--text-faint); font-size: 12px; }
.payment-method > b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #111827; background: var(--accent); }
.qr-payment-panel {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 24px;
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.payment-qr-wrap { position: relative; width: 226px; min-height: 226px; display: grid; place-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.payment-qr-code { width: 100%; aspect-ratio: 1; color: #101113; }
.payment-qr-code svg { display: block; width: 100%; height: 100%; }
.payment-qr-code svg rect { fill: currentColor; }
.payment-qr-code svg .qr-background,
.payment-qr-code svg .qr-cutout { fill: #fff; }
.qr-channel-mark { position: absolute; right: 8px; bottom: 8px; width: 29px; height: 29px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 9px; color: #fff; font-size: 13.5px; font-style: normal; font-weight: 750; box-shadow: var(--shadow-sm); }
.is-wechat .qr-channel-mark { background: #20b767; }
.is-alipay .qr-channel-mark { background: #1677ff; }
.qr-payment-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.qr-payment-status { display: flex; align-items: center; gap: 6px; color: var(--success); font-size: 12px; font-weight: 650; }
.qr-payment-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.qr-payment-copy h2 { margin-top: 12px; font-size: 17px; }
.qr-payment-copy > p { max-width: 370px; margin-top: 7px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.qr-payment-amount { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 13px; }
.qr-payment-amount > span { color: var(--text-faint); font-size: 12px; }
.qr-payment-amount strong { font-size: 32px; letter-spacing: -.05em; }
.qr-payment-amount strong small { margin-right: 3px; font-size: 14px; }
.payment-confirm-button { width: min(270px, 100%); }
.payment-confirm-button:disabled { cursor: wait; opacity: .68; }
.payment-demo-note { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-faint); font-size: 12px; }
.payment-checking { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 13px; color: #111827; background: rgba(255, 255, 255, .94); text-align: center; }
.payment-checking > span { width: 31px; height: 31px; border: 3px solid #e5e7eb; border-top-color: var(--accent-hover); border-radius: 50%; animation: payment-spin .8s linear infinite; }
.payment-checking strong { font-size: 12.5px; }
.payment-checking small { color: #6b7280; font-size: 12px; }
@keyframes payment-spin { to { transform: rotate(360deg); } }
.checkout-summary { position: sticky; top: 82px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.checkout-summary-head { display: grid; gap: 4px; padding: 16px 17px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.checkout-summary-head span { font-size: 13.5px; font-weight: 650; }
.checkout-summary-head small { overflow: hidden; color: var(--text-faint); font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.checkout-summary dl { display: grid; gap: 11px; margin: 0; padding: 16px 17px; }
.checkout-summary dl div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.checkout-summary dt { color: var(--text-faint); font-size: 12px; }
.checkout-summary dd { margin: 0; color: var(--text-soft); font-size: 12px; text-align: right; }
.checkout-summary dd.discount { color: var(--success); }
.checkout-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 17px; padding: 14px 0; border-top: 1px solid var(--border); }
.checkout-total span { font-size: 12.5px; font-weight: 650; }
.checkout-total strong { font-size: 28px; letter-spacing: -.05em; }
.checkout-total strong small { margin-right: 2px; font-size: 13.5px; }
.checkout-assurances { display: grid; gap: 8px; padding: 14px 17px; color: var(--text-soft); background: var(--surface-subtle); }
.checkout-assurances p { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.checkout-assurances svg { color: var(--success); }
.checkout-support { display: flex; align-items: flex-start; gap: 8px; margin: 13px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; }
.checkout-support > span { color: var(--accent-ink); }
.checkout-support strong { display: block; font-size: 12px; }
.checkout-support p { margin-top: 3px; color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.checkout-empty { min-height: 62vh; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.checkout-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); }
.checkout-empty h1 { font-size: 24px; }
.checkout-empty p { max-width: 480px; color: var(--text-soft); font-size: 12.5px; line-height: 1.7; }
.checkout-empty > div { display: flex; gap: 8px; margin-top: 7px; }
.payment-expired > span { color: var(--warning); background: var(--warning-soft); }
.payment-result-page { min-height: 70vh; display: grid; place-items: center; }
.payment-result-card { width: min(520px, 100%); padding: 34px; border: 1px solid var(--success-border); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-md); text-align: center; }
.payment-result-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; color: #fff; background: var(--success); box-shadow: 0 0 0 10px var(--success-soft); }
.payment-result-card h1 { margin-top: 5px; font-size: 25px; }
.payment-result-card > p:not(.eyebrow) { max-width: 400px; margin: 8px auto 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.65; }
.payment-result-amount { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 10px; margin: 22px 0 14px; padding: 15px 17px; border-radius: 11px; background: var(--success-soft); text-align: left; }
.payment-result-amount span { color: var(--success); font-size: 12px; }
.payment-result-amount strong { grid-row: 1 / span 2; grid-column: 2; color: var(--success); font-size: 27px; }
.payment-result-amount small { color: var(--success); font-size: 12px; }
.payment-result-card dl { display: grid; gap: 10px; margin: 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.payment-result-card dl div { display: flex; justify-content: space-between; gap: 18px; }
.payment-result-card dt { color: var(--text-faint); font-size: 12px; }
.payment-result-card dd { margin: 0; color: var(--text-soft); font: 12px var(--mono); text-align: right; }
.payment-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.payment-result-card > small { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; color: var(--text-faint); font-size: 12px; }
.payment-result-card > small svg { color: var(--success); }

@media (max-width: 1120px) {
  .experience-moment-card { grid-template-columns: minmax(0, 1fr) auto; }
  .experience-moment-quotas { grid-column: 1 / -1; grid-row: 2; }
  .ai-credit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unified-membership-page .unified-wallet-panel { grid-template-columns: 1fr 1fr; }
  .unified-wallet-panel .current-plan-summary { border-right: 0; }
  .unified-cost-glance { grid-column: 1 / -1; }
  .ai-cost-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .qr-payment-panel { grid-template-columns: 195px minmax(0, 1fr); gap: 19px; padding: 20px; }
  .payment-qr-wrap { width: 195px; min-height: 195px; }
}

@media (max-width: 900px) {
  .current-usage-panel { grid-template-columns: 1fr; }
  .current-usage-items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 0 0; border-top: 1px solid var(--accent-border); border-left: 0; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .checkout-summary dl { grid-template-columns: 1fr 1fr; }
  .checkout-summary dl div { display: grid; gap: 4px; }
  .checkout-summary dd { text-align: left; }
  .unified-membership-page .pricing-plan { display: block; }
  .unified-membership-page .pricing-plan ul { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .ai-wallet-notice { position: relative; align-items: flex-start; flex-wrap: wrap; margin: 0 16px; padding: 9px 40px 9px 10px; }
  .ai-wallet-notice-copy { flex-basis: calc(100% - 28px); }
  .ai-wallet-notice .button { width: 100%; margin-left: 25px; }
  .ai-wallet-notice-close { position: absolute; top: 7px; right: 8px; }
  .membership-header,
  .ai-credit-heading,
  .checkout-heading { align-items: stretch; flex-direction: column; }
  .billing-toggle { width: 100%; }
  .billing-toggle button { flex: 1; }
  .current-usage-items { grid-template-columns: 1fr; }
  .experience-moment-card { grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .experience-moment-card > .button { width: 100%; }
  .experience-moment-quotas { grid-column: auto; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .experience-moment-quotas span:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ai-credit-section { padding: 17px; }
  .ai-credit-heading > div:first-child { align-items: flex-start; }
  .ai-credit-balance { justify-content: center; }
  .ai-credit-grid { grid-template-columns: 1fr; }
  .unified-membership-page .unified-wallet-panel { grid-template-columns: 1fr; padding: 17px; }
  .unified-wallet-panel .current-plan-summary { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--accent-border); }
  .unified-cost-glance { grid-column: auto; grid-template-columns: 1fr; }
  .membership-perk-strip li { flex: 1 1 100%; }
  .membership-invite-line { align-items: flex-start; flex-direction: column; }
  .membership-invite-line code { margin-left: 0; }
  .membership-invite-line .button { width: 100%; }
  .membership-cost-details > summary { flex-wrap: wrap; }
  .membership-cost-details > summary em { flex: 1 1 100%; margin-left: 0; }
  .membership-cost-details > .ai-cost-groups,
  .membership-cost-details > .credit-rules,
  .membership-cost-details > .membership-note { margin-left: 14px; margin-right: 14px; }
  .membership-offer-heading { align-items: stretch; flex-direction: column; }
  .membership-offer-heading > span { width: 100%; max-width: none; }
  .unified-membership-page .pricing-plan ul { grid-template-columns: 1fr; }
  .ai-cost-groups { grid-template-columns: 1fr; }
  .knowledge-analysis-lock { grid-template-columns: auto minmax(0, 1fr); }
  .knowledge-analysis-lock .button { grid-column: 1 / -1; width: 100%; }
  .credit-rules { display: grid; gap: 8px; }
  .checkout-expiry { width: 100%; }
  .checkout-steps { gap: 5px; }
  .checkout-steps b { width: 18px; }
  .checkout-product-card { grid-template-columns: auto minmax(0, 1fr); }
  .checkout-product-card > strong { grid-column: 2; }
  .payment-method-grid { grid-template-columns: 1fr; }
  .qr-payment-panel { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 18px; }
  .payment-qr-wrap { width: min(226px, 100%); min-height: auto; aspect-ratio: 1; }
  .qr-payment-copy { width: 100%; align-items: center; text-align: center; }
  .qr-payment-amount { margin-top: 15px; }
  .checkout-summary dl { grid-template-columns: 1fr; }
  .checkout-empty > div,
  .payment-result-actions { width: 100%; grid-template-columns: 1fr; flex-direction: column; }
  .payment-result-card { padding: 28px 19px; }
  .payment-result-card dl div { display: grid; gap: 4px; }
  .payment-result-card dd { text-align: left; }
}

/* Account-scoped notebook, vocabulary review, and progressive practice hints */
.third-hint-details,
.writing-sample-details { display: grid; gap: 7px; }

.third-hint-details > summary,
.writing-sample-details > summary {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #a9cbb4;
  border-radius: 7px;
  color: #315238;
  background: #f1faf3;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.third-hint-details > summary::-webkit-details-marker,
.writing-sample-details > summary::-webkit-details-marker { display: none; }
.third-hint-details > summary small,
.writing-sample-details > summary small { margin-left: 3px; font-size: 12px; opacity: .72; }
.third-hint-details[open] > summary,
.writing-sample-details[open] > summary { color: #174222; border-color: #73ab84; background: #e4f5e9; }
.hint-layer.reference { border-color: #a9cbb4; border-left: 4px solid #47935d; color: #17351f; background: #f1faf3; }
.hint-layer.reference > span { color: #28703c; }
.reference-answer-body { color: #233b29; font-size: 12px; line-height: 1.75; }
.reading-hint-card { margin-top: 4px; background: #fff; }
.save-source-note,
.save-sentence-note { width: max-content; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #b79c2d; border-radius: 7px; color: #4f3c00; background: #fff7c9; cursor: pointer; font: 700 12px Arial, "PingFang SC", sans-serif; }
.writing-outline-wrap > span { color: var(--accent-ink); font-size: 12px; font-weight: 750; }
.writing-sample-details { padding: 8px; border: 1px solid #b9d7c3; border-radius: 8px; background: #f4fbf6; }
.writing-sample-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.writing-sample-toolbar span { color: #315238; font-size: 12px; font-weight: 700; }
.writing-sample-toolbar button { padding: 5px 8px; border: 1px solid #a9cbb4; border-radius: 6px; color: #315238; background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 700; }
.writing-sample-answer { max-height: 420px; display: grid; gap: 0; overflow: auto; border: 1px solid #dbe8df; border-radius: 7px; color: var(--text); background: var(--surface); white-space: normal; }
.writing-sample-pair { display: grid; gap: 3px; padding: 8px 10px; border-bottom: 1px dashed #d9e2dc; }
.writing-sample-pair:last-child { border-bottom: 0; }
.writing-sample-pair p { margin: 0; }
.writing-sample-pair p[lang="en"] { color: var(--text); font: 12px/1.65 Georgia, "Times New Roman", serif; }
.writing-sample-pair p[lang="zh-CN"] { color: #557060; font: 12px/1.65 "Songti SC", "PingFang SC", serif; }

.vocabulary-word-wrap { display: inline; }
.vocabulary-word-wrap.has-meaning { position: relative; display: inline-block; margin: 0 1px; vertical-align: baseline; line-height: inherit; }
.vocabulary-word-wrap.has-meaning .vocabulary-word { line-height: inherit; }
.inline-word-meaning { position: absolute; z-index: 3; top: calc(100% - 2px); left: 50%; display: block; max-width: 88px; overflow: hidden; color: #4f7d68; background: color-mix(in srgb, var(--surface) 88%, transparent); font: 600 12px/1.1 Arial, "PingFang SC", sans-serif; text-overflow: ellipsis; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.paper-view-toolbar .click-word-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #5f7180; font-size: 12px; font-weight: 700; white-space: nowrap; }
.paper-view-toolbar .inline-translation-toggle { width: auto; height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; color: #5d4800; border-color: #dacb82; background: #fffbed; font-size: 12px; font-weight: 700; white-space: nowrap; }
.paper-view-toolbar .inline-translation-toggle.is-active { color: #17351f; border-color: #95c8a5; background: #edf8f0; }

.collection-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.collection-page-intro > div:first-child { max-width: 760px; }
.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.collection-toolbar .search-wrap { min-width: min(340px, 42vw); }
.collection-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--text-faint); font-size: 12.5px; }
.collection-summary strong { color: var(--text); }
.collection-empty { width: 100%; grid-column: 1 / -1; column-span: all; min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 32px; border: 1px dashed var(--border-strong); border-radius: 15px; color: var(--text-faint); background: var(--surface); text-align: center; }
.collection-empty h2 { color: var(--text); font-size: 16px; }
.collection-empty p { max-width: 470px; font-size: 12.5px; line-height: 1.65; }

.notebook-grid { column-count: 2; column-gap: 14px; }
.notebook-card { width: 100%; min-width: 0; display: inline-grid; gap: 13px; margin: 0 0 14px; padding: 18px; break-inside: avoid; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); vertical-align: top; }
.notebook-card.is-editing { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.notebook-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notebook-card > header > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.notebook-card > header small { color: var(--text-faint); font-size: 12px; }
.note-type { padding: 4px 7px; border-radius: 999px; color: #5d4800; background: var(--accent-soft); font-size: 12px; font-weight: 700; }
.note-type.is-politics-source { color: #7b2d23; background: #fff0ed; }
.note-type.is-english-sentence { color: #2d5688; background: #edf4fd; }
.note-type.is-free { color: #315238; background: #edf8f0; }
.note-card-actions { display: flex; gap: 5px; }
.note-card-actions button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); background: var(--surface); cursor: pointer; font-size: 12px; }
.note-card-actions button.is-danger { color: var(--danger); }
.notebook-card > h2 { font-size: 15px; line-height: 1.45; }
.notebook-body { color: var(--text-soft); font-size: 12.5px; line-height: 1.75; overflow-wrap: anywhere; }
.notebook-source { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); }
.notebook-source > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notebook-source > div span { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.notebook-source time { color: var(--text-faint); font-size: 12px; }
.notebook-source blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--text); font: 12.5px/1.65 Georgia, "Times New Roman", "Songti SC", serif; }
.notebook-source > p { display: flex; flex-wrap: wrap; gap: 5px; }
.notebook-source > p span { padding: 3px 5px; border-radius: 5px; color: var(--text-faint); background: var(--surface); font-size: 12px; }
.notebook-editor { display: grid; gap: 11px; }
.notebook-editor label { display: grid; gap: 5px; color: var(--text-soft); font-size: 12.5px; font-weight: 650; }
.notebook-editor input,
.notebook-editor textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--bg); outline: 0; resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.75; }
/* Markdown 源码用等宽，便于对齐与看语法 */
.notebook-editor textarea { min-height: 190px; font-family: var(--mono); tab-size: 2; }
/* 笔记抽屉里的编辑器要更高 */
.note-drawer .notebook-editor textarea { min-height: 300px; }
.notebook-editor input:focus,
.notebook-editor textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.notebook-editor-field { display: grid; gap: 6px; }
.notebook-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-soft); font-size: 12.5px; font-weight: 650; }
.notebook-markdown-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.notebook-markdown-toolbar button { min-width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); background: var(--surface); cursor: pointer; font: 700 12px/1 Arial, "PingFang SC", sans-serif; }
.notebook-markdown-toolbar button:hover { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); }
.notebook-markdown-preview { display: grid; gap: 7px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 9px; background: var(--surface-subtle); }
.notebook-markdown-preview > span { color: var(--text-faint); font-size: 12px; font-weight: 700; }
.notebook-markdown-preview .markdown-body { font-size: 12.5px; line-height: 1.75; }
.notebook-editor-actions { display: flex; justify-content: flex-end; gap: 7px; }

.markdown-body { min-width: 0; color: var(--text-soft); overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body :where(h1, h2, h3, h4, h5, h6) { margin: 1em 0 .45em; color: var(--text); font-family: Arial, "PingFang SC", sans-serif; line-height: 1.45; }
.markdown-body h1 { font-size: 15px; }
.markdown-body h2 { font-size: 14px; }
.markdown-body h3 { font-size: 13.5px; }
.markdown-body :where(h4, h5, h6) { font-size: 12.5px; }
.markdown-body p { margin: 0 0 .75em; }
.markdown-body :where(ul, ol) { display: grid; gap: 4px; margin: 0 0 .8em; padding-left: 20px; }
.markdown-body li { padding-left: 2px; }
.markdown-body .markdown-task { display: flex; align-items: flex-start; gap: 6px; margin-left: -18px; list-style: none; }
.markdown-body .markdown-task input { width: 12px; height: 12px; margin-top: 3px; accent-color: var(--accent-ink); }
.markdown-body blockquote { margin: 0 0 .8em; padding: 7px 10px; border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0; color: var(--text-soft); background: var(--surface-subtle); }
.markdown-body blockquote p { margin: 0; }
.markdown-body code { padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); background: var(--surface-subtle); font: .9em/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.markdown-body pre { max-width: 100%; margin: 0 0 .8em; padding: 10px; overflow: auto; border-radius: 8px; color: var(--text); background: color-mix(in srgb, var(--surface-subtle) 78%, #dbe4eb); }
.markdown-body pre code { padding: 0; border: 0; background: transparent; white-space: pre; }
.markdown-body a { color: #2d6593; text-decoration: underline; text-underline-offset: 2px; }
.markdown-body hr { height: 1px; margin: 12px 0; border: 0; background: var(--border); }
.markdown-table-wrap { max-width: 100%; margin-bottom: .8em; overflow-x: auto; }
.markdown-body table { width: 100%; border-collapse: collapse; font-size: .9em; }
.markdown-body :where(th, td) { padding: 6px 7px; border: 1px solid var(--border); }
.markdown-body th { color: var(--text); background: var(--surface-subtle); font-weight: 750; }
.markdown-body del { color: var(--text-faint); }
.markdown-empty { color: var(--text-faint); font-style: italic; }

.vocabulary-overview { display: flex; align-items: center; gap: 8px; }
.vocabulary-overview span { min-width: 105px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-soft); background: var(--surface); font-size: 12.5px; text-align: center; }
.vocabulary-overview strong { display: block; margin-top: 2px; color: var(--text); font-size: 17px; }
.vocabulary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.vocabulary-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.vocabulary-card.status-review { border-top: 3px solid #e2ad4c; }
.vocabulary-card.status-known { border-top: 3px solid #62a476; }
.vocabulary-card-inner { min-height: 250px; }
.vocabulary-card-face { min-height: 250px; align-content: center; justify-items: center; gap: 10px; padding: 22px 18px; text-align: center; animation: vocabulary-flip-in 180ms ease-out; }
.vocabulary-card-front { display: grid; }
.vocabulary-card-back { display: none; background: var(--surface-subtle); }
.vocabulary-card.is-flipped .vocabulary-card-front { display: none; }
.vocabulary-card.is-flipped .vocabulary-card-back { display: grid; }
@keyframes vocabulary-flip-in { from { opacity: 0; transform: rotateY(8deg) scale(.985); } to { opacity: 1; transform: none; } }
.vocabulary-status { padding: 4px 7px; border-radius: 999px; color: #7a4a00; background: #fff0cf; font-size: 12px; font-weight: 700; }
.status-known .vocabulary-status { color: #28703c; background: #edf8f0; }
.vocabulary-card-front > strong { font: 750 28px/1.1 Georgia, "Times New Roman", serif; }
.vocabulary-card-front > small { color: var(--text-faint); font-size: 12.5px; }
.vocabulary-card-front > p { min-height: 38px; color: var(--text-soft); font: 12.5px/1.6 Georgia, "Times New Roman", serif; }
.vocabulary-card-front > button,
.vocabulary-flip-back { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--accent-border); border-radius: 7px; color: var(--accent-ink); background: var(--accent-soft); cursor: pointer; font-size: 12px; font-weight: 700; }
.vocabulary-card-back > span { color: var(--text-faint); font-size: 12px; font-weight: 700; }
.vocabulary-card-back h2 { font-size: 18px; line-height: 1.45; }
.vocabulary-card-back > p { width: 100%; display: grid; gap: 3px; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; text-align: left; }
.vocabulary-card-back > p b { color: var(--text); font-size: 12px; }
.vocabulary-review-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vocabulary-review-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; }
.vocabulary-review-actions .known { color: #28703c; border-color: #95c8a5; background: #edf8f0; }
.vocabulary-review-actions .review { color: #7a4a00; border-color: #e4c48f; background: #fff6e4; }
.vocabulary-card > footer { position: relative; display: grid; gap: 4px; padding: 10px 36px 10px 12px; border-top: 1px solid var(--border); color: var(--text-faint); background: var(--surface); font-size: 12px; line-height: 1.45; }
.vocabulary-card > footer button { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--danger); background: var(--surface); cursor: pointer; }

@media (max-width: 1120px) {
  .vocabulary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .collection-page-intro,
  .collection-toolbar { align-items: stretch; flex-direction: column; }
  .collection-toolbar .search-wrap { min-width: 0; width: 100%; }
  .collection-summary { align-items: flex-start; flex-direction: column; }
  .notebook-grid { column-count: 1; }
  .vocabulary-grid { grid-template-columns: 1fr; }
  .vocabulary-overview { width: 100%; }
  .vocabulary-overview span { flex: 1; }
  .notebook-card > header { align-items: stretch; flex-direction: column; }
  .note-card-actions { justify-content: flex-end; }
  .paper-view-toolbar .click-word-hint { display: none; }
  .paper-view-toolbar .inline-translation-toggle { margin-left: auto; }
}

@media (max-width: 520px) {
  .collection-toolbar .filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .collection-toolbar .filter-button { flex: 0 0 auto; }
  .notebook-card { padding: 14px; }
  .vocabulary-card-face { min-height: 230px; padding: 18px 14px; }
  .writing-sample-answer { max-height: 300px; }
  .inline-word-meaning { font-size: 12px; }
}

/* StarTacks 2026 hand-drawn brand system */
.sidebar {
  border-right: 1.5px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.brand-row { min-height: 61px; padding-bottom: 17px; border-bottom: 1px dashed var(--border); }
.nav-groups { margin-top: 5px; }
.nav-label { font-family: "Chalkboard SE", "Comic Sans MS", "Kaiti SC", cursive; letter-spacing: .1em; }
.nav-item { border-radius: 11px 8px 12px 9px; }
.nav-item.is-active {
  border: 1.5px solid var(--accent-border);
  background: repeating-linear-gradient(-20deg, var(--accent) 0 5px, color-mix(in srgb, var(--accent) 84%, white) 5px 9px);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--text) 8%, transparent);
}
.nav-item.is-active em { color: var(--text); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.topbar { height: 68px; border-bottom: 1.5px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.breadcrumb strong { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.top-user-trigger { border-radius: 13px 9px 14px 10px; box-shadow: var(--shadow-sm); }
.avatar, .top-avatar { border: 1.5px solid var(--text); background: var(--accent); }
.view-container { padding-top: 42px; }
.eyebrow, .card-kicker { font-family: "Chalkboard SE", "Comic Sans MS", "Kaiti SC", cursive; letter-spacing: .11em; }
h1 { font-weight: 760; }
h2, h3 { font-weight: 680; }

.button { border-radius: 11px 8px 12px 9px; font-weight: 650; }
.button.primary {
  border: 1.5px solid var(--text);
  background: var(--accent);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--text) 18%, transparent);
}
.button.primary:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 color-mix(in srgb, var(--text) 18%, transparent); }
.button.accent { border: 1.5px solid var(--text); border-radius: 12px 9px 13px 10px; background: var(--text); }
.button.secondary { border: 1.5px solid var(--border-strong); box-shadow: 1px 2px 0 color-mix(in srgb, var(--text) 7%, transparent); }

:where(.hero-card, .continue-card, .metric-card, .panel, .upload-panel, .recognition-panel, .correction-shell, .exam-setup-card, .result-hero, .result-panel, .mistake-row, .settings-panel, .recommendation-paper-card, .usage-overview-card, .learning-recommendation-card, .daily-limit-card, .pricing-plan, .quota-pack, .knowledge-canvas, .knowledge-detail, .notebook-card, .vocabulary-card, .current-usage-panel, .checkout-product-card, .payment-method-section, .checkout-summary) {
  border-color: var(--border-strong);
  border-radius: 17px 13px 18px 14px;
  box-shadow: var(--shadow-sm);
}

.hero-card { border-width: 1.5px; background: linear-gradient(125deg, var(--surface), var(--surface) 66%, var(--accent-soft)); }
.hero-card::after { border-style: dashed; border-width: 2px; transform: rotate(-7deg); }
.quick-upload { border: 1.5px dashed var(--border-strong); border-radius: 13px 9px 14px 10px; box-shadow: none; }
.metric-card:nth-child(2n), .recommendation-paper-card:nth-child(2n) { transform: rotate(.18deg); }
.metric-card:nth-child(2n + 1), .recommendation-paper-card:nth-child(2n + 1) { transform: rotate(-.18deg); }
.metric-icon, .recommendation-icon, .subject-setup-icon { border: 1.5px solid var(--text); border-radius: 11px 8px 12px 9px; color: var(--text); background: var(--accent); }
.progress-track, .usage-bar { border: 1px solid var(--border); background: var(--surface-subtle); }
.progress-track > span, .usage-bar > span { background: repeating-linear-gradient(-25deg, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 80%, white) 4px 7px); }
.account-menu, .modal-card, .subject-setup-card { border: 1.5px solid var(--border-strong); border-radius: 17px 13px 18px 14px; box-shadow: var(--shadow-md); }

@media (max-width: 760px) {
  .brand-mark { width: 43px; height: 35px; }
  .topbar { height: 62px; }
  .view-container { padding-top: 25px; }
  .metric-card, .recommendation-paper-card { transform: none !important; }
}

/* StarTacks five-level visual system V2
   Website owns the strongest brand expression. The workspace is quieter;
   practice and exam modes prioritise two-hour reading comfort; reports use
   restrained data semantics instead of repeating the brand accent. */

/* Level 2: workspace — 60% brand intensity */
body[data-visual-mode="workspace"] .sidebar {
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 97%, var(--bg));
}

body[data-visual-mode="workspace"] .nav-item.is-active {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-border) 62%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  box-shadow: none;
}

body[data-visual-mode="workspace"] .nav-item.is-active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

body[data-visual-mode="workspace"] :where(
  .continue-card,
  .metric-card,
  .panel,
  .recommendation-paper-card,
  .usage-overview-card,
  .learning-recommendation-card,
  .daily-limit-card,
  .knowledge-canvas,
  .knowledge-detail,
  .notebook-card,
  .vocabulary-card,
  .current-usage-panel
) {
  border-color: var(--border);
  border-radius: 15px;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--text) 5%, transparent);
}

body[data-visual-mode="workspace"] .metric-card,
body[data-visual-mode="workspace"] .recommendation-paper-card {
  transform: none;
}

body[data-visual-mode="workspace"] .recommendation-paper-card,
body[data-visual-mode="workspace"] .recommendation-paper-card.is-fresh {
  border-color: var(--border);
  background: linear-gradient(145deg, var(--surface) 0 82%, color-mix(in srgb, var(--accent-soft) 42%, var(--surface)) 100%);
}

body[data-visual-mode="workspace"] .hero-card {
  border-color: color-mix(in srgb, var(--border-strong) 76%, var(--border));
  border-radius: 18px 15px 19px 16px;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--text) 7%, transparent);
}

body[data-visual-mode="workspace"] .quick-upload {
  border-color: color-mix(in srgb, var(--border-strong) 80%, var(--border));
}

body[data-visual-mode="workspace"] :where(.progress-track > span, .usage-bar > span) {
  background: var(--accent);
}

/* Levels 3–4: shared long-session reading foundation */
body[data-visual-mode="practice"],
body[data-visual-mode="exam"] {
  --reading-blue: #657d93;
  --reading-blue-soft: #eef3f6;
  --reading-gold: #b99c3e;
  --reading-gold-soft: #f7f3e5;
  --reading-green: #4f7d68;
  --reading-green-soft: #edf5f0;
}

body[data-visual-mode="practice"] .exam-room { background: #f3f1ec; }
body[data-visual-mode="exam"] .exam-room { background: #eceff1; }

body[data-visual-mode="practice"] .exam-topbar,
body[data-visual-mode="exam"] .exam-topbar {
  min-height: 62px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(17, 24, 39, .045);
}

body[data-visual-mode="practice"] .exam-topbar { border-top: 2px solid #c9ad4d; }
body[data-visual-mode="exam"] .exam-topbar { border-top: 2px solid #7c8c99; }

body[data-visual-mode="practice"] .exam-title .brand-mark,
body[data-visual-mode="exam"] .exam-title .brand-mark {
  width: 27px;
  height: 27px;
  opacity: .72;
  filter: saturate(.72);
}

body[data-visual-mode="practice"] .exam-title-copy span b,
body[data-visual-mode="exam"] .exam-title-copy span b {
  color: var(--text-soft);
  background: var(--surface-subtle);
}

body[data-visual-mode="practice"] .exam-timer,
body[data-visual-mode="exam"] .exam-timer {
  color: var(--text);
  background: var(--surface-subtle);
  box-shadow: none;
}

body[data-visual-mode="practice"] .exam-timer svg,
body[data-visual-mode="exam"] .exam-timer svg { color: var(--text-soft); }

body[data-visual-mode="practice"] .exam-paper-stage,
body[data-visual-mode="exam"] .exam-paper-stage { padding: 22px 30px 42px; }

body[data-visual-mode="practice"] .paper-view-toolbar,
body[data-visual-mode="exam"] .paper-view-toolbar {
  width: min(840px, 100%);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 9px;
  box-shadow: 0 3px 14px rgba(17, 24, 39, .055);
}

body[data-visual-mode="practice"] .paper-mode-pill,
body[data-visual-mode="exam"] .paper-mode-pill {
  color: var(--text-soft);
  background: var(--surface-subtle);
}

body[data-visual-mode="practice"] .real-exam-paper,
body[data-visual-mode="exam"] .real-exam-paper {
  width: min(840px, 100%);
  border-color: #d7d8d8;
  box-shadow: 0 12px 34px rgba(17, 24, 39, .09);
}

body[data-visual-mode="practice"] .real-paper-passage,
body[data-visual-mode="exam"] .real-paper-passage {
  font-size: 14px;
  line-height: 1.88;
}

body[data-visual-mode="practice"] .paper-part-title p,
body[data-visual-mode="exam"] .paper-part-title p { line-height: 1.82; }

body[data-visual-mode="practice"] .paper-section-title,
body[data-visual-mode="exam"] .paper-section-title {
  padding: 11px 14px;
  border: 1px solid #dedfdf;
  border-left: 3px solid var(--reading-gold);
  color: #28313a;
  background: #f3f4f3;
}

body[data-visual-mode="exam"] .paper-section-title { border-left-color: #758796; }

body[data-visual-mode="practice"] .paper-question-list,
body[data-visual-mode="exam"] .paper-question-list { gap: 14px; }

body[data-visual-mode="practice"] .paper-question,
body[data-visual-mode="exam"] .paper-question {
  padding-top: 18px;
  padding-bottom: 18px;
  border-left-width: 3px;
}

body[data-visual-mode="practice"] .paper-question.is-current {
  border-left-color: var(--reading-gold);
  background: #faf8f1;
}

body[data-visual-mode="exam"] .paper-question.is-current {
  border-left-color: var(--reading-blue);
  background: #f5f7f8;
}

body[data-visual-mode="practice"] .paper-question-text,
body[data-visual-mode="exam"] .paper-question-text {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.78;
}

body[data-visual-mode="practice"] .paper-options,
body[data-visual-mode="exam"] .paper-options { gap: 9px 14px; }

body[data-visual-mode="practice"] .paper-option,
body[data-visual-mode="exam"] .paper-option {
  min-height: 41px;
  padding: 9px 10px;
  border-color: transparent;
  border-radius: 8px;
  line-height: 1.62;
}

body[data-visual-mode="practice"] .paper-option.is-selected {
  border-color: #b8a668;
  background: var(--reading-gold-soft);
  box-shadow: none;
}

body[data-visual-mode="practice"] .paper-option.is-selected .paper-choice {
  color: #fff;
  border-color: #8e7a35;
  background: #a48b3a;
}

body[data-visual-mode="exam"] .paper-option.is-selected {
  border-color: #91a2af;
  background: var(--reading-blue-soft);
  box-shadow: none;
}

body[data-visual-mode="exam"] .paper-option.is-selected .paper-choice {
  color: #fff;
  border-color: #556b7d;
  background: #657d93;
}

body[data-visual-mode="practice"] :where(.question-hint-trigger, .question-local-tool-panel, .question-hint-card) {
  border-color: #ccd6de;
  color: #405365;
  background: #f4f7f9;
}

body[data-visual-mode="practice"] .question-hint-trigger:hover:not(:disabled) {
  border-color: #9cadba;
  background: #edf3f6;
}

body[data-visual-mode="practice"] .hint-layer.first { border-left-color: var(--reading-blue); }
body[data-visual-mode="practice"] .hint-layer.second { border-left-color: var(--reading-green); }
body[data-visual-mode="practice"] .question-hint-card mark { background: #e9edf0; }

body[data-visual-mode="practice"] .vocabulary-word {
  border-bottom-color: transparent;
  background: transparent;
}

body[data-visual-mode="practice"] .vocabulary-word.is-recommended {
  border-bottom-color: #7c8e9d;
  background: #edf2f5;
}

body[data-visual-mode="practice"] .vocabulary-word:hover,
body[data-visual-mode="practice"] .vocabulary-word:focus-visible,
body[data-visual-mode="practice"] .vocabulary-word.is-active {
  border-bottom-color: #5d7486;
  background: #e6edf1;
}

body[data-visual-mode="practice"] .vocabulary-word.is-saved {
  border-bottom-color: #4f7d68;
  background: #e2efe7;
}

body[data-visual-mode="practice"] .real-paper-passage p.is-reading-focus {
  border-left-color: var(--reading-blue);
  background: #f3f6f8;
  box-shadow: 0 0 0 1px #d8e0e5;
}

body[data-visual-mode="practice"] .submit-multiple-answer {
  border-color: #9cadba;
  color: #405365;
  background: #edf3f6;
}

body[data-visual-mode="practice"] .real-answer-sheet,
body[data-visual-mode="exam"] .real-answer-sheet { background: color-mix(in srgb, var(--surface) 98%, var(--bg)); }

body[data-visual-mode="practice"] .answer-sheet-header,
body[data-visual-mode="exam"] .answer-sheet-header {
  border-top: 3px solid var(--reading-gold);
  background: var(--surface);
}

body[data-visual-mode="exam"] .answer-sheet-header { border-top-color: #758796; }

body[data-visual-mode="practice"] .answer-sheet-header span,
body[data-visual-mode="exam"] .answer-sheet-header span { color: var(--text-faint); }

body[data-visual-mode="practice"] .answer-sheet-header h2,
body[data-visual-mode="exam"] .answer-sheet-header h2 { color: var(--text); }

body[data-visual-mode="practice"] .answer-candidate,
body[data-visual-mode="exam"] .answer-candidate {
  border-style: solid;
  border-color: var(--border);
  background: transparent;
}

body[data-visual-mode="practice"] .answer-section,
body[data-visual-mode="exam"] .answer-section {
  border-color: transparent;
  border-bottom-color: var(--border);
  border-radius: 0;
}

body[data-visual-mode="practice"] .answer-section.is-current-section,
body[data-visual-mode="exam"] .answer-section.is-current-section {
  border-color: #d7dde1;
  border-radius: 9px;
  background: #f4f6f7;
}

body[data-visual-mode="practice"] .answer-section h3 span,
body[data-visual-mode="exam"] .answer-section h3 span {
  color: var(--text-soft);
  background: var(--surface-subtle);
}

body[data-visual-mode="practice"] .real-answer-sheet .answer-cell.is-answered,
body[data-visual-mode="exam"] .real-answer-sheet .answer-cell.is-answered {
  color: #fff;
  border-color: #4f7d68;
  background: #5f8a75;
}

body[data-visual-mode="practice"] .real-answer-sheet .answer-cell.is-current,
body[data-visual-mode="exam"] .real-answer-sheet .answer-cell.is-current {
  border-color: var(--reading-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reading-gold) 55%, transparent);
}

body[data-visual-mode="exam"] .real-answer-sheet .answer-cell.is-current {
  border-color: var(--reading-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reading-blue) 48%, transparent);
}

body[data-visual-mode="practice"] .real-answer-sheet .legend-dot.answered,
body[data-visual-mode="exam"] .real-answer-sheet .legend-dot.answered {
  border-color: #4f7d68;
  background: #5f8a75;
}

/* Level 5: report — calm analytical hierarchy */
body[data-visual-mode="report"] .view-container { max-width: 1240px; }

body[data-visual-mode="report"] .sidebar {
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 97%, var(--bg));
}

body[data-visual-mode="report"] .nav-item.is-active {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-border) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  box-shadow: none;
}

body[data-visual-mode="report"] .nav-item.is-active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

body[data-visual-mode="report"] .page-enter > .page-intro { max-width: 840px; }

body[data-visual-mode="report"] .result-layout {
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--text) 6%, transparent);
}

body[data-visual-mode="report"] :where(.result-hero, .result-panel) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-visual-mode="report"] .result-hero {
  padding: 32px 30px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-subtle));
}

body[data-visual-mode="report"] .result-panel { padding: 32px; }

body[data-visual-mode="report"] .result-badge {
  color: var(--text-soft);
  background: var(--surface-subtle);
}

body[data-visual-mode="report"] .score-ring {
  width: 138px;
  height: 138px;
  background: conic-gradient(#d0ad3e var(--score), var(--surface-subtle) 0);
}

body[data-visual-mode="report"] .result-score strong { font-size: 50px; }

.result-panel-heading { margin-bottom: 24px; }
.result-panel-heading > span {
  display: block;
  margin-bottom: 7px;
  color: var(--text-faint);
  font: 650 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.result-panel-heading h2 { margin: 0; }

body[data-visual-mode="report"] .module-row:nth-child(1) .module-track span { background: #5f8a75; }
body[data-visual-mode="report"] .module-row:nth-child(2) .module-track span { background: #6f879b; }
body[data-visual-mode="report"] .module-row:nth-child(3) .module-track span { background: #c4a74a; }

.result-next-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-top: 25px;
  padding: 15px 16px;
  border-left: 3px solid #c4a74a;
  border-radius: 0 11px 11px 0;
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
}

.result-next-step-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #6d5a1a;
  background: color-mix(in srgb, var(--accent) 38%, var(--surface));
}

.result-next-step small,
.result-next-step strong { display: block; }
.result-next-step small { color: #7c6825; font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.result-next-step strong { margin-top: 4px; font-size: 13.5px; }
.result-next-step p { margin: 5px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.result-actions { margin-top: 18px; }

body[data-visual-mode="report"] .result-analysis-heading {
  margin-top: 34px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

body[data-visual-mode="report"] :where(.question-review, .question-review-card, .timing-analysis-card) {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: none;
}

body[data-visual-mode="report"] .question-review { overflow: hidden; }
body[data-visual-mode="report"] .question-review > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
body[data-visual-mode="report"] .question-review > summary::-webkit-details-marker { display: none; }
body[data-visual-mode="report"] .question-review > summary > svg { color: var(--text-faint); transition: transform 160ms ease; }
body[data-visual-mode="report"] .question-review[open] > summary > svg { transform: rotate(90deg); }

body[data-visual-mode="report"] .timing-analysis-grid { gap: 12px; }
body[data-visual-mode="report"] .timing-analysis-card { padding: 17px; }
body[data-visual-mode="report"] .timing-comparison > span { background: #6f879b; }
body[data-visual-mode="report"] .timing-comparison > i { background: #ad8f37; }

body[data-visual-mode="report"] .review-knowledge-tags span {
  border-color: #ccd6de;
  background: #f1f5f7;
}

body[data-visual-mode="report"] .personalized-explanation {
  border-left-color: #6f879b;
  background: color-mix(in srgb, var(--blue-soft) 42%, var(--surface));
}

@media (max-width: 820px) {
  body[data-visual-mode="report"] .result-layout { grid-template-columns: 1fr; }
  body[data-visual-mode="report"] .result-hero { border-right: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 680px) {
  .vocabulary-popover {
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: 78px;
    width: auto;
    max-height: min(62vh, 500px);
    border-radius: 14px;
    transform: translateY(8px);
    transform-origin: center bottom;
  }

  .vocabulary-popover::before { display: none; }
  .vocabulary-popover-head { min-height: 46px; padding-left: 13px; }
  .vocabulary-popover-head > strong { font-size: 18px; }
  .vocabulary-popover-body { padding: 10px; }
  .vocabulary-popover .vocabulary-option-grid { grid-template-columns: 1fr; }
  .vocabulary-popover .vocabulary-option-grid button { min-height: 38px; font-size: 12.5px; }
  .sentence-popover {
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: 78px;
    width: auto;
    max-height: min(68vh, 540px);
    border-radius: 14px;
    transform: translateY(8px);
    transform-origin: center bottom;
  }
  .sentence-popover::before { display: none; }
  .sentence-popover-head { min-height: 46px; padding-left: 13px; }
  .sentence-popover-body { padding: 10px; }
  .sentence-practice-actions { align-items: stretch; flex-direction: column; }
  .sentence-practice-action-buttons { width: 100%; }
  .sentence-practice-action-buttons button { flex: 1; }
  body[data-visual-mode="practice"] .exam-paper-stage,
  body[data-visual-mode="exam"] .exam-paper-stage { padding: 10px 0 86px; }

  body[data-visual-mode="practice"] .paper-view-toolbar,
  body[data-visual-mode="exam"] .paper-view-toolbar { margin-inline: 10px; width: calc(100% - 20px); }

  body[data-visual-mode="practice"] .real-exam-paper,
  body[data-visual-mode="exam"] .real-exam-paper { box-shadow: none; }

  body[data-visual-mode="practice"] .paper-options,
  body[data-visual-mode="exam"] .paper-options { gap: 7px; }

  body[data-visual-mode="report"] .result-panel,
  body[data-visual-mode="report"] .result-hero { padding: 23px 19px; }

  body[data-visual-mode="report"] .result-next-step { grid-template-columns: 1fr; }
  body[data-visual-mode="report"] .question-review > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  body[data-visual-mode="report"] .question-review > summary > svg { display: none; }
}

/* StarTacks flat comfort pass
   Keep the yellow brand signal, but remove hard black outlines and offset
   shadows from repeated controls and long-session surfaces. */
.button {
  border-radius: 10px;
  box-shadow: none;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.button.primary {
  border: 1px solid color-mix(in srgb, var(--accent-border) 82%, var(--border));
  background: var(--accent);
  box-shadow: none;
}

.button.primary:hover {
  transform: translateY(-1px);
  border-color: var(--accent-border);
  background: var(--accent-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
}

.button.secondary {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

.button.secondary:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  box-shadow: none;
}

.button.accent {
  border: 1px solid color-mix(in srgb, var(--text) 72%, var(--border));
  border-radius: 10px;
  box-shadow: none;
}

.top-user-trigger {
  border-color: var(--border);
  border-radius: 999px;
  box-shadow: none;
}

.avatar,
.top-avatar {
  border: 1px solid color-mix(in srgb, var(--accent-border) 74%, var(--border));
}

:where(
  .hero-card,
  .continue-card,
  .metric-card,
  .panel,
  .upload-panel,
  .recognition-panel,
  .correction-shell,
  .exam-setup-card,
  .result-hero,
  .result-panel,
  .mistake-row,
  .settings-panel,
  .recommendation-paper-card,
  .usage-overview-card,
  .learning-recommendation-card,
  .daily-limit-card,
  .pricing-plan,
  .quota-pack,
  .knowledge-canvas,
  .knowledge-detail,
  .notebook-card,
  .vocabulary-card,
  .current-usage-panel,
  .checkout-product-card,
  .payment-method-section,
  .checkout-summary
) {
  border-color: var(--border);
  border-radius: 15px;
  box-shadow: none;
}

.hero-card {
  border-width: 1px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 4%, transparent);
}

.quick-upload {
  border-width: 1px;
  border-color: var(--border-strong);
  border-radius: 11px;
}

.metric-icon,
.recommendation-icon,
.subject-setup-icon {
  border: 1px solid color-mix(in srgb, var(--accent-border) 76%, var(--border));
  border-radius: 10px;
}

.account-menu,
.modal-card,
.subject-setup-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.nav-item.is-active { box-shadow: none; }
.paper-card,
.public-paper-card,
.timing-analysis-card,
.question-review-card,
.collection-toolbar { box-shadow: none; }

.public-paper-card:hover,
.knowledge-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--text) 5%, transparent);
}

.pricing-plan.is-recommended,
.ai-credit-pack.is-recommended,
.payment-method.is-selected,
.notebook-card.is-editing,
.knowledge-node.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

body[data-visual-mode="workspace"] :where(
  .continue-card,
  .metric-card,
  .panel,
  .recommendation-paper-card,
  .usage-overview-card,
  .learning-recommendation-card,
  .daily-limit-card,
  .knowledge-canvas,
  .knowledge-detail,
  .notebook-card,
  .vocabulary-card,
  .current-usage-panel
) { box-shadow: none; }

body[data-visual-mode="workspace"] .hero-card {
  border-color: var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 4%, transparent);
}

body[data-visual-mode="practice"] .real-exam-paper,
body[data-visual-mode="exam"] .real-exam-paper {
  box-shadow: 0 8px 24px rgba(17, 24, 39, .055);
}

body[data-visual-mode="practice"] .paper-view-toolbar,
body[data-visual-mode="exam"] .paper-view-toolbar {
  box-shadow: 0 2px 8px rgba(17, 24, 39, .035);
}

body[data-visual-mode="report"] .result-layout {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 4%, transparent);
}

@media (max-width: 680px) {
  .button.primary:hover,
  .button.secondary:hover { transform: none; }
}

/* First-login AI score estimate and longitudinal score baseline */
body.ai-estimate-open { overflow: hidden; }

.ai-estimate-backdrop {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(16, 16, 14, .54);
  backdrop-filter: blur(7px);
}

.ai-estimate-backdrop[hidden] { display: none; }

.ai-estimate-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(850px, calc(100vh - 44px));
  overflow: auto;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: modal-in 180ms ease-out;
}

.ai-estimate-close {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
}

.ai-estimate-close:hover { color: var(--text); background: var(--surface-subtle); }
.ai-estimate-close[hidden] { display: none; }
.ai-estimate-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-right: 34px; }
.ai-estimate-heading-icon,
.ai-baseline-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: #1a1a1a;
  background: var(--accent);
}

.ai-estimate-heading h2 { margin-top: 3px; font-size: 24px; }
.ai-estimate-heading p:last-child { max-width: 600px; margin: 8px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.7; }
.ai-estimate-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 23px 0; border-block: 1px solid var(--border); }
.ai-estimate-facts span { padding: 13px; color: var(--text-soft); font-size: 12.5px; text-align: center; }
.ai-estimate-facts span + span { border-left: 1px solid var(--border); }
.ai-estimate-facts b { margin-right: 3px; color: var(--text); font-size: 16px; }
.ai-estimate-subject-picker > span { display: block; margin-bottom: 9px; color: var(--text-soft); font-size: 12.5px; font-weight: 650; }
.ai-estimate-subject-picker > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-estimate-subject-picker button {
  min-width: 104px;
  display: grid;
  gap: 3px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 650;
  text-align: left;
}

.ai-estimate-subject-picker button small { color: var(--text-faint); font-size: 12px; font-weight: 500; }
.ai-estimate-subject-picker button.is-selected { border-color: var(--accent-border); background: var(--accent-soft); }
.ai-estimate-preview { display: flex; gap: 12px; margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--border); }
.ai-estimate-preview > span { color: var(--accent-ink); }
.ai-estimate-preview strong { display: block; font-size: 13.5px; }
.ai-estimate-preview p { margin: 5px 0 0; color: var(--text-faint); font-size: 12.5px; line-height: 1.6; }
.ai-estimate-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ai-estimate-actions .button { min-width: 142px; }
.ai-estimate-disclaimer { display: block; margin-top: 11px; color: var(--text-faint); font-size: 12px; line-height: 1.55; text-align: right; }

.ai-estimate-quiz > header,
.ai-estimate-result > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-right: 36px; }
.ai-estimate-quiz > header h2,
.ai-estimate-result > header h2 { margin-top: 4px; font-size: 22px; }
.ai-estimate-quiz > header > span,
.ai-estimate-confidence { padding: 5px 8px; border-radius: 7px; color: var(--accent-ink); background: var(--accent-soft); font-size: 12.5px; white-space: nowrap; }
.ai-estimate-progress { height: 5px; margin: 20px 0 24px; overflow: hidden; border-radius: 99px; background: var(--surface-subtle); }
.ai-estimate-progress span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--accent); transition: width 180ms ease; }
.ai-estimate-question { min-height: 58px; margin: 0 0 18px; font-size: 17px; font-weight: 650; line-height: 1.65; }
.ai-estimate-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ai-estimate-options button {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.ai-estimate-options button:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.ai-estimate-options button.is-selected { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.ai-estimate-options button > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); font: 650 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ai-estimate-options button.is-selected > span { border-color: var(--accent-border); color: var(--text); background: var(--accent); }
.ai-estimate-options strong { min-width: 0; font-size: 12.5px; line-height: 1.55; }
.ai-estimate-options svg { color: var(--success); }

.ai-estimate-processing { min-height: 430px; display: grid; place-items: center; align-content: center; text-align: center; }
.ai-estimate-processing-mark { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); }
.ai-estimate-processing-mark i { position: absolute; inset: -7px; border: 2px solid transparent; border-top-color: var(--accent-border); border-right-color: var(--accent-border); border-radius: 50%; animation: ai-estimate-spin 950ms linear infinite; }
@keyframes ai-estimate-spin { to { transform: rotate(360deg); } }
.ai-estimate-processing h2 { margin-top: 5px; font-size: 23px; }
.ai-estimate-processing > p:not(.eyebrow) { max-width: 470px; margin: 10px auto 22px; color: var(--text-soft); font-size: 13.5px; line-height: 1.7; }
.ai-estimate-processing-steps { display: flex; align-items: center; gap: 7px; }
.ai-estimate-processing-steps span { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 7px; color: var(--text-faint); background: var(--surface-subtle); font-size: 12px; }
.ai-estimate-processing-steps span.is-done { color: var(--success); background: var(--success-soft); }
.ai-estimate-processing-steps span.is-current { color: var(--accent-ink); background: var(--accent-soft); }

.ai-estimate-result > header p:last-child { max-width: 520px; margin: 7px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.65; }
.ai-estimate-score-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 22px; align-items: stretch; margin: 23px 0 20px; padding: 19px 0; border-block: 1px solid var(--border); }
.ai-estimate-score { display: grid; align-content: center; padding-right: 22px; border-right: 1px solid var(--border); }
.ai-estimate-score > span { color: var(--text-soft); font-size: 12.5px; }
.ai-estimate-score > strong { margin: 5px 0 3px; font-size: 44px; line-height: 1; font-weight: 680; }
.ai-estimate-score > strong small { margin-left: 5px; color: var(--text-faint); font-size: 13.5px; font-weight: 550; }
.ai-estimate-score > em { color: var(--accent-ink); font-size: 12.5px; font-style: normal; }
.ai-estimate-result-meta { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.ai-estimate-result-meta span { display: grid; gap: 6px; color: var(--text-faint); font-size: 12px; text-align: center; }
.ai-estimate-result-meta span + span { border-left: 1px solid var(--border); }
.ai-estimate-result-meta strong { color: var(--text); font-size: 14px; }
.ai-estimate-dimensions { display: grid; gap: 10px; }
.ai-estimate-dimensions > div:first-child { display: flex; justify-content: space-between; color: var(--text-soft); font-size: 12.5px; font-weight: 650; }
.ai-estimate-dimensions > div:first-child small { color: var(--text-faint); font-size: 12px; font-weight: 500; }
.ai-estimate-dimension { display: grid; grid-template-columns: 72px minmax(0, 1fr) 26px; align-items: center; gap: 10px; font-size: 12.5px; }
.ai-estimate-dimension > div { height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-subtle); }
.ai-estimate-dimension i { display: block; width: var(--width); height: 100%; border-radius: inherit; background: #6f879b; }
.ai-estimate-dimension strong { font-size: 12.5px; text-align: right; }
.ai-estimate-focus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--accent-border); background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface)); }
.ai-estimate-focus > span { color: var(--accent-ink); }
.ai-estimate-focus small,
.ai-estimate-focus strong { display: block; }
.ai-estimate-focus small { color: var(--text-faint); font-size: 12px; }
.ai-estimate-focus strong { margin-top: 2px; font-size: 13.5px; }
.ai-estimate-focus p { margin: 4px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }

.ai-baseline-card {
  margin: -12px 0 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}

.ai-baseline-card.is-empty { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-color: var(--accent-border); background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface)); }
.ai-baseline-empty-copy { display: flex; align-items: flex-start; gap: 13px; }
.ai-baseline-icon { width: 39px; height: 39px; border-radius: 9px; }
.ai-baseline-empty-copy h2 { margin-top: 3px; font-size: 15px; }
.ai-baseline-empty-copy p:last-child { max-width: 620px; margin: 5px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.ai-baseline-empty-action { display: grid; justify-items: end; gap: 7px; flex: 0 0 auto; }
.ai-baseline-empty-action > span { color: var(--accent-ink); font-size: 12px; }
.ai-baseline-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px 14px; border-bottom: 1px solid var(--border); }
.ai-baseline-header h2 { margin-top: 3px; font-size: 14px; }
.ai-baseline-subjects { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.ai-baseline-subjects button { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); background: var(--surface); cursor: pointer; font-size: 12px; }
.ai-baseline-subjects button.is-active { border-color: var(--accent-border); color: var(--text); background: var(--accent-soft); }
.ai-baseline-subjects button i { color: var(--text-faint); font-size: 12px; font-style: normal; }
.ai-baseline-body { display: grid; grid-template-columns: 160px 170px minmax(240px, 1fr); align-items: center; gap: 24px; padding: 18px 20px; }
.ai-baseline-primary,
.ai-baseline-change { display: grid; gap: 4px; }
.ai-baseline-primary > span,
.ai-baseline-change > span { color: var(--text-faint); font-size: 12px; }
.ai-baseline-primary > strong { font-size: 28px; line-height: 1; }
.ai-baseline-primary > strong small { margin-left: 3px; color: var(--text-faint); font-size: 12.5px; }
.ai-baseline-primary > em { color: var(--accent-ink); font-size: 12px; font-style: normal; }
.ai-baseline-change > strong { font-size: 15px; }
.ai-baseline-change > strong.is-positive { color: var(--success); }
.ai-baseline-change > strong.is-negative { color: var(--danger); }
.ai-baseline-change > small { color: var(--text-soft); font-size: 12px; }
.ai-baseline-meter > div { position: relative; height: 7px; margin: 17px 8px 10px; border-radius: 99px; background: var(--surface-subtle); }
.ai-baseline-meter > div::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--latest, 0); border-radius: inherit; background: color-mix(in srgb, var(--success) 55%, var(--surface)); }
.ai-baseline-meter > div > span,
.ai-baseline-meter > div > i { position: absolute; left: var(--left); top: 50%; width: 11px; height: 11px; border: 2px solid var(--surface); border-radius: 50%; transform: translate(-50%, -50%); }
.ai-baseline-meter > div > span { background: var(--accent-border); }
.ai-baseline-meter > div > i { background: var(--success); }
.ai-baseline-meter > div > span::after,
.ai-baseline-meter > div > i::after { content: attr(data-label); position: absolute; left: 50%; bottom: 12px; color: var(--text-faint); font-size: 12px; font-style: normal; transform: translateX(-50%); white-space: nowrap; }
.ai-baseline-meter > small { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 12px; }
.ai-baseline-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 19px; border-top: 1px solid var(--border); background: var(--surface-subtle); }
.ai-baseline-footer > span { display: flex; align-items: center; gap: 5px; color: var(--text-soft); font-size: 12px; }

.result-baseline-comparison { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 13px; margin-top: 22px; padding: 13px 14px; border-block: 1px solid var(--border); }
.result-baseline-comparison > div:not(.result-baseline-delta) { display: grid; gap: 3px; }
.result-baseline-comparison > div > span { color: var(--text-faint); font-size: 12px; }
.result-baseline-comparison > div > strong { font-size: 15px; }
.result-baseline-comparison strong small { margin-left: 3px; color: var(--text-faint); font-size: 12px; }
.result-baseline-arrow { color: var(--text-faint); }
.result-baseline-delta { display: grid; justify-items: end; gap: 2px; padding-left: 13px; border-left: 1px solid var(--border); }
.result-baseline-delta span { color: var(--text); font-size: 14px; font-weight: 680; }
.result-baseline-delta.is-positive span { color: var(--success); }
.result-baseline-delta.is-negative span { color: var(--danger); }
.result-baseline-delta small { color: var(--text-faint); font-size: 12px; }
.result-baseline-empty { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 0; border: 0; border-block: 1px solid var(--border); color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.result-baseline-empty > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-ink); background: var(--accent-soft); }
.result-baseline-empty strong,
.result-baseline-empty small { display: block; }
.result-baseline-empty strong { font-size: 12.5px; }
.result-baseline-empty small { margin-top: 3px; color: var(--text-faint); font-size: 12px; }

@media (max-width: 900px) {
  .ai-baseline-body { grid-template-columns: 140px minmax(130px, 1fr); }
  .ai-baseline-meter { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .ai-estimate-backdrop { align-items: end; padding: 0; }
  .ai-estimate-card { width: 100%; max-height: 94vh; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .ai-estimate-close { top: 13px; right: 13px; }
  .ai-estimate-heading { grid-template-columns: 1fr; gap: 11px; padding-right: 30px; }
  .ai-estimate-heading-icon { width: 41px; height: 41px; }
  .ai-estimate-heading h2 { font-size: 20px; }
  .ai-estimate-facts span { padding-inline: 5px; }
  .ai-estimate-subject-picker > div { display: grid; grid-template-columns: 1fr 1fr; }
  .ai-estimate-subject-picker button { min-width: 0; }
  .ai-estimate-actions { position: sticky; bottom: -22px; z-index: 2; margin: 18px -16px -22px; padding: 13px 16px calc(13px + env(safe-area-inset-bottom)); background: var(--surface); }
  .ai-estimate-actions .button { min-width: 0; flex: 1; }
  .ai-estimate-disclaimer { margin-bottom: 52px; text-align: left; }
  .ai-estimate-quiz > header,
  .ai-estimate-result > header { display: grid; gap: 8px; }
  .ai-estimate-options { grid-template-columns: 1fr; }
  .ai-estimate-question { min-height: 0; font-size: 15px; }
  .ai-estimate-score-row { grid-template-columns: 1fr; gap: 14px; }
  .ai-estimate-score { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--border); }
  .ai-estimate-result-meta span { min-width: 0; }
  .ai-estimate-processing { min-height: 65vh; }
  .ai-estimate-processing-steps { flex-wrap: wrap; justify-content: center; }
  .ai-baseline-card { margin-top: -14px; }
  .ai-baseline-card.is-empty { align-items: stretch; flex-direction: column; padding: 16px; }
  .ai-baseline-empty-action { justify-items: stretch; }
  .ai-baseline-empty-action > span { text-align: left; }
  .ai-baseline-header { align-items: flex-start; flex-direction: column; }
  .ai-baseline-subjects { justify-content: flex-start; }
  .ai-baseline-body { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 16px; }
  .ai-baseline-meter { grid-column: 1 / -1; }
  .ai-baseline-footer { align-items: flex-start; flex-direction: column; padding-inline: 16px; }
  .ai-baseline-footer .button { width: 100%; }
  .result-baseline-comparison { grid-template-columns: 1fr auto 1fr; }
  .result-baseline-delta { grid-column: 1 / -1; justify-items: start; padding: 9px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

/* Course-first knowledge graph */
.knowledge-graph-page { max-width: 1500px; }
.knowledge-graph-page .achievement-intro { align-items: center; }
.knowledge-graph-page .achievement-intro > div:first-child { max-width: 760px; }
.knowledge-graph-page .achievement-intro h1 { letter-spacing: 0; }
.knowledge-graph-page .achievement-week { max-width: 390px; border-radius: 8px; background: var(--surface); }
.knowledge-graph-page .achievement-week > span { min-width: 0; }
.knowledge-graph-page .achievement-week strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.knowledge-course-overview {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(230px, .8fr) minmax(140px, .45fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.knowledge-course-overview-copy > span,
.knowledge-course-progress span,
.knowledge-course-mastery > span { color: var(--text-faint); font-size: 12px; }
.knowledge-course-overview-copy strong { display: block; margin-top: 4px; font-size: 14px; }
.knowledge-course-overview-copy p { margin: 4px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.knowledge-course-progress { padding-inline: 20px; border-inline: 1px solid var(--border); }
.knowledge-course-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.knowledge-course-progress strong { font-size: 14px; }
.knowledge-course-progress strong small { color: var(--text-faint); font-size: 12px; }
.knowledge-course-progress > small,
.knowledge-course-mastery small { display: block; margin-top: 5px; color: var(--text-faint); font-size: 12px; }
.knowledge-course-progress-track { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-subtle); }
.knowledge-course-progress-track i { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--success); }
.knowledge-course-mastery strong { display: block; margin-top: 3px; font-size: 22px; }

.knowledge-graph-layout.is-tree-view {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(440px, 1.45fr) minmax(250px, .62fr);
  align-items: start;
  gap: 12px;
}
.knowledge-course-outline,
.knowledge-course-content,
.knowledge-graph-page .knowledge-graph-detail {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.knowledge-course-outline { position: sticky; top: 78px; overflow: hidden; }
.knowledge-outline-head { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.knowledge-outline-head div { min-width: 0; }
.knowledge-outline-head span { color: var(--text-faint); font-size: 12px; }
.knowledge-outline-head div > span,
.knowledge-outline-head strong { display: block; }
.knowledge-outline-head strong { overflow: hidden; margin-top: 3px; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-outline-head > span { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; color: var(--accent-ink); background: var(--accent-soft); font-weight: 650; }
.knowledge-outline-mobile-toggle { display: none; }
.knowledge-outline-search { height: 36px; display: flex; align-items: center; gap: 7px; margin: 10px 11px 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-faint); background: var(--surface-subtle); }
.knowledge-outline-search:focus-within { border-color: var(--accent-border); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.knowledge-outline-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 12.5px; }
.knowledge-outline-tools { display: flex; justify-content: space-between; gap: 10px; padding: 0 13px 7px; }
.knowledge-outline-tools button { padding: 2px 0; border: 0; color: var(--text-faint); background: transparent; cursor: pointer; font-size: 12px; }
.knowledge-outline-tools button:hover { color: var(--text); }
.knowledge-course-outline > .knowledge-tree-scroll { max-height: calc(100vh - 250px); min-height: 420px; padding: 6px 8px 16px; }
.knowledge-course-outline .knowledge-tree-root ul { margin-left: 8px; padding-left: 12px; }
.knowledge-course-outline .knowledge-tree-root ul::before { left: 4px; }
.knowledge-course-outline .knowledge-tree-root ul > .knowledge-tree-item::before { left: -8px; width: 8px; }
.knowledge-course-outline .knowledge-tree-row { gap: 1px; border-radius: 6px; }
.knowledge-course-outline .knowledge-tree-row.is-complete:not(.is-selected) .knowledge-level { color: var(--success); background: var(--success-soft); }
.knowledge-course-outline .knowledge-tree-toggle,
.knowledge-course-outline .knowledge-tree-spacer { width: 23px; }
.knowledge-course-outline .knowledge-tree-select { grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; padding: 7px 6px 7px 0; }
.knowledge-course-outline .knowledge-level { min-width: 28px; padding: 3px 4px; border-radius: 4px; }
.knowledge-course-outline .knowledge-tree-name strong { font-size: 12.5px; }
.knowledge-course-outline .knowledge-tree-name small { font-size: 12px; }
.knowledge-course-outline .knowledge-ratio.compact { min-width: 40px; height: 16px; }
.knowledge-outline-results { display: grid; gap: 5px; }
.knowledge-outline-results > span { padding: 5px 4px 2px; color: var(--text-faint); font-size: 12px; }
.knowledge-outline-results button { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 7px; padding: 9px; border: 1px solid transparent; border-radius: 6px; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.knowledge-outline-results button:hover { background: var(--surface-subtle); }
.knowledge-outline-results button.is-selected { border-color: var(--accent-border); background: var(--accent-soft); }
.knowledge-outline-results button > span { grid-row: 1 / span 2; align-self: center; padding: 3px 5px; border-radius: 4px; color: var(--text-faint); background: var(--surface-subtle); font-size: 12px; }
.knowledge-outline-results button strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-outline-results button small { overflow: hidden; color: var(--text-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-outline-results button em { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--accent-ink); font-size: 12px; font-style: normal; }
.knowledge-outline-empty { padding: 40px 12px; color: var(--text-faint); font-size: 12.5px; text-align: center; }

.knowledge-course-content { overflow: hidden; }
.knowledge-course-breadcrumb { min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 22px; border-bottom: 1px solid var(--border); color: var(--text-faint); background: var(--surface-subtle); }
.knowledge-course-breadcrumb button { padding: 0; border: 0; color: var(--text-faint); background: transparent; cursor: pointer; font-size: 12px; }
.knowledge-course-breadcrumb button:hover { color: var(--text); }
.knowledge-course-breadcrumb strong { font-size: 12px; font-weight: 650; }
.knowledge-lesson-head { padding: 25px 26px 20px; }
.knowledge-lesson-head h2 { margin: 7px 0 9px; font-size: 25px; letter-spacing: 0; }
.knowledge-lesson-head p { max-width: 720px; margin: 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.75; }
.knowledge-lesson-type { display: inline-flex; padding: 4px 7px; border-radius: 4px; color: var(--accent-ink); background: var(--accent-soft); font-size: 12px; font-weight: 650; }
.knowledge-lesson-meta { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.knowledge-lesson-meta span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 12px; }
.knowledge-lesson-meta svg { color: var(--accent-ink); }
.knowledge-learning-objectives { margin: 0 26px; padding: 15px 17px; border: 1px solid var(--accent-border); border-radius: 7px; background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface)); }
.knowledge-learning-objectives > div { display: flex; align-items: center; gap: 7px; }
.knowledge-learning-objectives > div > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: #111827; background: var(--accent); }
.knowledge-learning-objectives strong { font-size: 12.5px; }
.knowledge-learning-objectives ul { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.knowledge-learning-objectives li { display: flex; align-items: flex-start; gap: 7px; color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.knowledge-learning-objectives li svg { flex: 0 0 auto; margin-top: 1px; color: var(--success); }
.knowledge-lesson-section { margin: 24px 26px 0; padding-top: 22px; border-top: 1px solid var(--border); }
.knowledge-section-heading { display: flex; align-items: center; gap: 10px; }
.knowledge-section-heading > span { color: var(--border-strong); font: 650 17px var(--mono); }
.knowledge-section-heading small { display: block; color: var(--text-faint); font-size: 12px; }
.knowledge-section-heading h3 { margin-top: 2px; font-size: 14px; }
.knowledge-method-steps { display: grid; margin-top: 16px; border-block: 1px solid var(--border); }
.knowledge-method-steps article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.knowledge-method-steps article:last-child { border-bottom: 0; }
.knowledge-method-steps article > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text-faint); font: 650 12px var(--mono); }
.knowledge-method-steps strong { font-size: 12.5px; }
.knowledge-method-steps p { margin: 4px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.65; }
.knowledge-section-lead { margin: 14px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.7; }
.knowledge-relation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.knowledge-relation-list button { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface); cursor: pointer; text-align: left; }
.knowledge-relation-list button:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.knowledge-relation-list button span { color: var(--text-faint); font-size: 12px; }
.knowledge-relation-list button strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-relation-list button svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--text-faint); }
.knowledge-practice-section { margin-inline: 0; padding: 22px 26px 24px; border-top: 1px solid var(--border); background: var(--surface-subtle); }
.knowledge-practice-section > p { margin: 12px 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.65; }
.knowledge-practice-sources { display: grid; gap: 5px; margin-bottom: 13px; }
.knowledge-practice-sources span { padding-left: 9px; border-left: 2px solid var(--border-strong); color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.knowledge-practice-section .button { width: 100%; }
.knowledge-chapter-list { display: grid; margin-top: 15px; border-top: 1px solid var(--border); }
.knowledge-chapter-list button { position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 5px; overflow: hidden; border: 0; border-bottom: 1px solid var(--border); color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.knowledge-chapter-list button:hover { background: var(--surface-subtle); }
.knowledge-chapter-index { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 6px; color: var(--accent-ink); background: var(--accent-soft); font: 650 12px var(--mono); }
.knowledge-chapter-list strong,
.knowledge-chapter-list small { display: block; }
.knowledge-chapter-list strong { font-size: 12.5px; }
.knowledge-chapter-list small { margin-top: 3px; color: var(--text-faint); font-size: 12px; }
.knowledge-chapter-list button > i { position: absolute; left: 49px; bottom: 0; width: var(--width); height: 2px; background: var(--accent); }
.knowledge-chapter-list button > svg { color: var(--text-faint); }
.knowledge-lesson-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 24px; padding: 15px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.knowledge-lesson-footer .button:first-child { justify-self: start; }
.knowledge-lesson-footer .button:last-child { justify-self: end; }
.knowledge-lesson-footer .button:disabled { opacity: .42; cursor: not-allowed; }

.knowledge-graph-page .knowledge-graph-detail { top: 78px; padding: 16px; }
.knowledge-study-status { display: flex; align-items: center; gap: 9px; margin: -16px -16px 16px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.knowledge-study-status > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--accent-ink); background: var(--accent-soft); }
.knowledge-study-status > span.is-complete { color: var(--success); background: var(--success-soft); }
.knowledge-study-status small,
.knowledge-study-status strong { display: block; }
.knowledge-study-status small { color: var(--text-faint); font-size: 12px; }
.knowledge-study-status strong { margin-top: 2px; font-size: 12.5px; }
.knowledge-graph-page .knowledge-detail h2 { font-size: 17px; }
.knowledge-graph-page .knowledge-detail > p { margin: 12px 0; font-size: 12.5px; }
.knowledge-graph-page .knowledge-analysis-lock { grid-template-columns: auto minmax(0, 1fr); padding: 11px; border-radius: 7px; }
.knowledge-graph-page .knowledge-analysis-lock > span { width: 30px; height: 30px; border-radius: 6px; }
.knowledge-graph-page .knowledge-analysis-lock .button { grid-column: 1 / -1; width: 100%; }
.knowledge-graph-page .knowledge-related > small { color: var(--text-faint); font-size: 12px; line-height: 1.55; }
.knowledge-score-rule { margin: 12px 0; border-block: 1px solid var(--border); }
.knowledge-score-rule summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; color: var(--text-soft); cursor: pointer; font-size: 12px; list-style: none; }
.knowledge-score-rule summary::-webkit-details-marker { display: none; }
.knowledge-score-rule summary svg { transition: transform 150ms ease; }
.knowledge-score-rule[open] summary svg { transform: rotate(90deg); }
.knowledge-score-rule p { margin: 0 0 10px; color: var(--text-faint); font-size: 12px; line-height: 1.6; }
.knowledge-graph-page .knowledge-detail-actions { grid-template-columns: 1fr; }

@media (max-width: 1280px) {
  .knowledge-graph-layout.is-tree-view { grid-template-columns: minmax(250px, .7fr) minmax(430px, 1.3fr); }
  .knowledge-graph-layout.is-tree-view .knowledge-graph-detail { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: minmax(190px, .75fr) minmax(280px, 1.25fr); gap: 10px 20px; }
  .knowledge-graph-layout.is-tree-view .knowledge-study-status { grid-column: 1 / -1; margin: -16px -16px 5px; }
  .knowledge-graph-layout.is-tree-view .knowledge-detail-stats,
  .knowledge-graph-layout.is-tree-view .knowledge-analysis-lock { grid-column: 2; grid-row: 2 / span 4; align-self: start; }
  .knowledge-graph-layout.is-tree-view .knowledge-related,
  .knowledge-graph-layout.is-tree-view .knowledge-score-rule,
  .knowledge-graph-layout.is-tree-view .knowledge-detail-actions { grid-column: 1 / -1; }
  .knowledge-graph-layout.is-tree-view .knowledge-detail-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .knowledge-course-overview { grid-template-columns: 1fr 1fr; }
  .knowledge-course-overview-copy { grid-column: 1 / -1; }
  .knowledge-course-progress { padding-left: 0; border-left: 0; }
  .knowledge-course-mastery { padding-left: 8px; }
  .knowledge-graph-layout.is-tree-view { grid-template-columns: minmax(230px, .68fr) minmax(0, 1.32fr); }
  .knowledge-graph-layout.is-tree-view .knowledge-graph-detail { display: grid; }
  .knowledge-lesson-head { padding: 22px 20px 18px; }
  .knowledge-learning-objectives { margin-inline: 20px; }
  .knowledge-lesson-section { margin-inline: 20px; }
  .knowledge-practice-section { margin-inline: 0; padding-inline: 20px; }
  .knowledge-lesson-footer { grid-template-columns: 1fr 1fr; }
  .knowledge-lesson-footer .button:nth-child(2) { grid-column: 1 / -1; grid-row: 1; width: 100%; }
}

@media (max-width: 720px) {
  .knowledge-graph-page .achievement-week { max-width: none; }
  .knowledge-course-overview { grid-template-columns: 1fr; gap: 13px; }
  .knowledge-course-progress { padding: 12px 0; border: 0; border-block: 1px solid var(--border); }
  .knowledge-course-mastery { padding-left: 0; }
  .knowledge-graph-layout.is-tree-view { grid-template-columns: 1fr; }
  .knowledge-course-outline { position: static; }
  .knowledge-course-outline > .knowledge-tree-scroll { min-height: 0; max-height: 430px; }
  .knowledge-outline-head > span { margin-left: auto; }
  .knowledge-outline-mobile-toggle { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); background: var(--surface); font-size: 12.5px; }
  .knowledge-outline-mobile-toggle svg { transition: transform 150ms ease; }
  .knowledge-course-outline.is-mobile-open .knowledge-outline-mobile-toggle svg { transform: rotate(90deg); }
  .knowledge-course-outline:not(.is-mobile-open) .knowledge-outline-search,
  .knowledge-course-outline:not(.is-mobile-open) .knowledge-outline-tools,
  .knowledge-course-outline:not(.is-mobile-open) > .knowledge-tree-scroll { display: none; }
  .knowledge-graph-layout.is-tree-view .knowledge-graph-detail { grid-column: auto; display: block; }
  .knowledge-graph-layout.is-tree-view .knowledge-study-status { margin: -16px -16px 16px; }
  .knowledge-learning-objectives { margin-inline: 16px; }
  .knowledge-lesson-head { padding-inline: 16px; }
  .knowledge-lesson-section { margin-inline: 16px; }
  .knowledge-practice-section { margin-inline: 0; padding-inline: 16px; }
  .knowledge-relation-list { grid-template-columns: 1fr; }
  .knowledge-lesson-footer { padding-inline: 12px; }
  .knowledge-lesson-footer .button { min-width: 0; padding-inline: 9px; }
}

/* 2026-09 workspace information architecture and subject-led home */
.main-shell {
  background: var(--bg);
}

.topbar-left {
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-actions {
  flex: 0 0 auto;
}

.topbar-page-context {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.topbar-subjects {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-subjects > strong {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar-subject-list {
  min-width: 0;
  max-width: min(390px, 34vw);
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-subject-list::-webkit-scrollbar { display: none; }

.topbar-subject-list::after {
  display: none;
  content: attr(data-overflow-label);
}

.topbar-subject-list span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--accent-border);
  border-radius: 7px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.topbar-subjects > button {
  flex: 0 0 auto;
  padding: 5px 3px;
  border: 0;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.topbar-subjects > button:hover { color: var(--text); }

.ai-baseline-card,
.ai-baseline-card.is-empty {
  margin: 0 0 14px;
  border-radius: 8px;
  box-shadow: none;
}

.ai-baseline-card.is-empty { padding: 17px 19px; }
.ai-baseline-empty-copy h2 { font-size: 16px; letter-spacing: 0; }
.ai-baseline-empty-copy p:last-child { font-size: 12.5px; }

.previous-learning-reminder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.previous-learning-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 15px;
  border-right: 1px solid var(--border);
  color: var(--text-soft);
  white-space: nowrap;
}

.previous-learning-label svg { color: var(--accent-ink); }
.previous-learning-label strong { font-size: 12.5px; letter-spacing: 0; }
.previous-learning-copy { min-width: 0; display: grid; gap: 3px; }
.previous-learning-copy strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.previous-learning-copy span { overflow: hidden; color: var(--text-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.previous-learning-actions { display: flex; gap: 7px; }

.dashboard-course-section { margin-bottom: 34px; }
.dashboard-course-heading { align-items: flex-end; margin-bottom: 14px; }
.dashboard-course-heading h2 { margin-top: 3px; font-size: 22px; letter-spacing: 0; }
.dashboard-course-heading p:last-child { margin-top: 5px; }

.dashboard-course-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.dashboard-course-card {
  min-width: 0;
  min-height: 226px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dashboard-course-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--text) 7%, transparent);
  transform: translateY(-1px);
}

.dashboard-course-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-course-card > header > span {
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 5px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-course-card > header > i {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 7px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-style: normal;
}

.dashboard-course-copy { flex: 1 1 auto; padding: 18px 2px 13px; }
.dashboard-course-copy h3 { color: color-mix(in srgb, var(--accent-ink) 72%, var(--text)); font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.dashboard-course-copy p { margin: 7px 0 0; color: var(--text-faint); font-size: 12.5px; line-height: 1.55; }
.dashboard-course-progress { margin-bottom: 11px; }
.dashboard-course-progress > div:first-child { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 12px; }
.dashboard-course-progress > div:first-child strong { color: var(--text-soft); font-size: 12px; }
.dashboard-course-progress > div:nth-child(2) { height: 5px; margin: 6px 0; overflow: hidden; border-radius: 99px; background: var(--surface-subtle); }
.dashboard-course-progress > div:nth-child(2) span { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--accent-border); }
.dashboard-course-progress > small { color: var(--text-faint); font-size: 12px; }
.dashboard-course-card > .button { width: 100%; min-height: 32px; border-radius: 6px; }

@media (min-width: 1001px) and (max-width: 1180px) {
  .dashboard-course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .top-user-copy, .help-button { display: none; }
  .top-user-trigger { padding: 2px; border: 0; background: transparent; }
  .topbar-subjects > strong { display: none; }
  .topbar-subject-list { max-width: 250px; }
}

@media (min-width: 901px) and (max-width: 1000px) {
  .dashboard-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top-user-copy, .help-button, .topbar-subjects > strong { display: none; }
  .top-user-trigger { padding: 2px; border: 0; background: transparent; }
  .topbar-subject-list { max-width: 150px; }
}

@media (max-width: 900px) {
  .dashboard-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .topbar { gap: 6px; padding-inline: 10px; }
  .topbar-left, .topbar-actions { gap: 5px; }
  .topbar-subjects > strong,
  .topbar-subjects > button,
  .topbar-actions > .icon-button { display: none; }
  .topbar-subject-list { max-width: 84px; overflow: hidden; }
  .topbar-subject-list span:nth-child(n + 2) { display: none; }
  .topbar-subject-list::after {
    min-width: 22px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-soft);
    background: var(--surface-subtle);
    font-size: 12px;
    font-weight: 650;
  }
  .topbar-subject-list span { padding: 5px 7px; font-size: 12px; }
  .mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 3px; }
  .mobile-nav button { min-height: 42px; padding: 3px 1px; }
  .mobile-nav small { font-size: 12.5px; letter-spacing: -0.02em; }
  .ai-baseline-card { margin-top: 0; }
  .previous-learning-reminder { grid-template-columns: 1fr; gap: 9px; padding: 13px; }
  .previous-learning-label { padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--border); }
  .previous-learning-copy strong,
  .previous-learning-copy span { white-space: normal; }
  .previous-learning-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-course-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-course-card { min-height: 214px; padding: 13px; }
  .dashboard-course-copy h3 { font-size: 17px; }
}

@media (max-width: 430px) {
  .topbar-subject-list { max-width: 76px; }
  .dashboard-course-grid { grid-template-columns: 1fr; }
  .dashboard-course-card { min-height: 0; }
}

@media (max-width: 360px) {
  .top-ai-wallet-copy { display: none; }
  .top-ai-wallet-trigger { padding-right: 3px; }
  .topbar-subject-list { max-width: 72px; }
}

/* Unified question-bank and learning-record workspaces. */
.workspace-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.workspace-heading > div { max-width: 760px; }
.workspace-heading h1 { margin: 3px 0 8px; }
.workspace-heading p:last-child { color: var(--text-soft); font-size: 13.5px; line-height: 1.7; }

.workspace-tabs {
  display: grid;
  gap: 7px;
  margin-bottom: 26px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.question-bank-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.workspace-tabs.learning-records-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }

.workspace-tabs button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.workspace-tabs button:hover { border-color: var(--border-strong); color: var(--text); }
.workspace-tabs button.is-active { border-color: var(--accent-border); color: var(--text); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.workspace-tabs button > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; background: var(--surface-subtle); }
.workspace-tabs button.is-active > span:first-child { background: var(--surface); }
.workspace-tabs button > span:last-child { min-width: 0; display: grid; gap: 2px; text-align: left; }
.workspace-tabs strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-tabs small { color: var(--text-faint); font-size: 12px; white-space: nowrap; }

.learning-records-tabs button { min-height: 44px; }
.learning-records-tabs button > span:first-child { width: 26px; height: 26px; }

.workspace-section-heading {
  margin-bottom: 18px;
}

.workspace-section-heading h2 { margin: 3px 0 7px; font-size: 20px; }
.workspace-section-heading p:last-child { max-width: 760px; color: var(--text-soft); font-size: 13.5px; line-height: 1.65; }
.workspace-section-heading.collection-page-intro { display: flex; }

@media (max-width: 760px) {
  .workspace-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .workspace-tabs { display: flex; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
  .workspace-tabs button { min-width: 148px; flex: 0 0 auto; }
  .learning-records-tabs button { min-width: 126px; }
  .workspace-section-heading.collection-page-intro { align-items: stretch; flex-direction: column; }
  .public-paper-actions .button:only-child { grid-column: 1 / -1; }
}

/* Progressive course lesson player. */
.knowledge-course-content {
  overflow: clip;
}

.knowledge-stage-shell {
  min-width: 0;
  color: var(--text);
  background: var(--surface);
}

.knowledge-stage-nav {
  position: sticky;
  z-index: 9;
  top: 68px;
  min-width: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--text) 4%, transparent);
  backdrop-filter: blur(12px);
}

.knowledge-stage-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 9px 12px 10px;
  list-style: none;
}

.knowledge-stage-item {
  position: relative;
  min-width: 0;
}

.knowledge-stage-item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 23px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

.knowledge-stage-item.is-complete:not(:last-child)::after {
  background: var(--success-border);
}

.knowledge-stage-trigger {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.knowledge-stage-trigger:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-subtle);
}

.knowledge-stage-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--surface);
  font: 650 12.5px/1 var(--mono);
}

.knowledge-stage-number svg {
  width: 13px;
  height: 13px;
}

.knowledge-stage-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.knowledge-stage-copy strong,
.knowledge-stage-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-stage-copy strong {
  color: inherit;
  font-size: 12.5px;
  line-height: 1.25;
}

.knowledge-stage-copy small {
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.25;
}

.knowledge-stage-item.is-current .knowledge-stage-trigger {
  border-color: var(--accent-border);
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.knowledge-stage-item.is-current .knowledge-stage-number {
  border-color: var(--text);
  color: #111827;
  background: var(--accent);
}

.knowledge-stage-item.is-current .knowledge-stage-copy small {
  color: var(--accent-ink);
}

.knowledge-stage-item.is-complete .knowledge-stage-number {
  border-color: var(--success-border);
  color: var(--success);
  background: var(--success-soft);
}

.knowledge-stage-item.is-complete .knowledge-stage-copy small {
  color: var(--success);
}

.knowledge-stage-item.is-available .knowledge-stage-number {
  border-color: var(--accent-border);
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

.knowledge-stage-item.is-locked .knowledge-stage-trigger,
.knowledge-stage-item.is-locked .knowledge-stage-trigger[aria-disabled="true"] {
  border-color: transparent;
  color: var(--text-faint);
  background: var(--surface-subtle);
  cursor: not-allowed;
}

.knowledge-stage-item.is-locked .knowledge-stage-number {
  color: var(--text-faint);
  background: var(--surface-subtle);
}

.knowledge-stage-item.is-locked .knowledge-stage-trigger:hover {
  border-color: transparent;
  color: var(--text-faint);
  background: var(--surface-subtle);
}

.knowledge-stage-progress {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 14px 9px;
  color: var(--text-faint);
  background: var(--surface);
  font-size: 12.5px;
}

.knowledge-stage-progress > span {
  white-space: nowrap;
}

.knowledge-stage-progress > i {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-subtle);
}

.knowledge-stage-progress > i > b {
  display: block;
  width: var(--width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--success);
  transition: width 220ms ease;
}

.knowledge-stage-panel {
  min-width: 0;
  padding: 27px 27px 108px;
  scroll-margin-top: 152px;
}

.knowledge-stage-panel[hidden] {
  display: none;
}

.knowledge-stage-header {
  max-width: 720px;
  display: grid;
  gap: 8px;
  margin: 0 auto 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.knowledge-stage-header > span,
.knowledge-stage-header > small {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 4px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 650;
}

.knowledge-stage-header h2,
.knowledge-stage-header h3 {
  margin: 0;
  letter-spacing: 0;
}

.knowledge-stage-header h2 {
  font-size: 23px;
  line-height: 1.35;
}

.knowledge-stage-header h3 {
  font-size: 18px;
  line-height: 1.4;
}

.knowledge-stage-header p {
  max-width: 680px;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.75;
}

.knowledge-reading {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.knowledge-reading p {
  margin: 0 0 1em;
}

.knowledge-reading :where(ul, ol) {
  margin: 12px 0;
  padding-left: 1.55em;
}

.knowledge-reading li + li {
  margin-top: 7px;
}

.knowledge-reading strong {
  color: var(--text);
}

.knowledge-reading .knowledge-learning-objectives {
  margin: 0 0 22px;
}

.knowledge-reading .knowledge-learning-objectives strong {
  font-size: 14px;
}

.knowledge-reading .knowledge-learning-objectives li {
  font-size: 14px;
  line-height: 1.7;
}

.knowledge-reading :where(button, input, select, textarea) {
  font-size: 14px;
}

.knowledge-content-block {
  padding: 23px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 160px;
}

.knowledge-content-block:first-child {
  padding-top: 0;
}

.knowledge-content-block:last-child {
  border-bottom: 0;
}

.knowledge-content-block h3 {
  margin: 0 0 11px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.knowledge-content-block h4 {
  margin: 18px 0 7px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0;
  border-block: 1px solid var(--border);
}

.knowledge-concept-grid > :where(article, div, section) {
  min-width: 0;
  padding: 16px;
}

.knowledge-concept-grid > :where(article, div, section):nth-child(even) {
  border-left: 1px solid var(--border);
}

.knowledge-concept-grid > :where(article, div, section):nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

.knowledge-concept-grid h3,
.knowledge-concept-grid h4 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 14px;
}

.knowledge-concept-grid article > span,
.knowledge-summary-grid article > span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 650;
}

.knowledge-concept-grid article > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.knowledge-concept-grid p:last-child {
  margin-bottom: 0;
}

.knowledge-stage-shell .knowledge-method-steps {
  margin-top: 18px;
  border-block: 1px solid var(--border);
}

.knowledge-stage-shell .knowledge-method-steps article {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 17px 4px;
}

.knowledge-stage-shell .knowledge-method-steps article > span {
  width: 32px;
  height: 32px;
  border-color: var(--accent-border);
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 12.5px;
}

.knowledge-stage-shell .knowledge-method-steps strong {
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-stage-shell .knowledge-method-steps p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.75;
}

.knowledge-worked-example {
  margin: 27px 0;
  padding: 0;
  border-block: 1px solid var(--border);
}

.knowledge-worked-example > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 2px 14px;
}

.knowledge-worked-example > header h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.knowledge-worked-example > header span,
.knowledge-worked-example > header small {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 13.5px;
}

.knowledge-example-prompt {
  padding: 17px 18px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  background: var(--surface-subtle);
  font-size: 14px;
  line-height: 1.8;
}

.knowledge-example-prompt > :last-child {
  margin-bottom: 0;
}

.knowledge-example-prompt > span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 650;
}

.knowledge-example-prompt > h4 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
}

.knowledge-example-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.knowledge-example-steps > :where(li, article, div) {
  min-width: 0;
  padding: 16px 2px;
  border-bottom: 1px solid var(--border);
}

.knowledge-example-steps > article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
}

.knowledge-example-steps > article > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font: 650 12.5px/1 var(--mono);
}

.knowledge-example-steps > article strong,
.knowledge-example-steps > article small {
  display: block;
}

.knowledge-example-steps > article small {
  margin-top: 7px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.65;
}

.knowledge-example-steps > :where(li, article, div):last-child {
  border-bottom: 0;
}

.knowledge-example-steps button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.knowledge-example-steps button:hover,
.knowledge-example-steps button[aria-expanded="true"] {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.knowledge-example-steps button + :where(div, p) {
  margin: 12px 9px 0;
}

.knowledge-example-note {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--warning-border);
  color: var(--text-soft);
  background: var(--warning-soft);
  font-size: 14px;
  line-height: 1.7;
}

.knowledge-example-note > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.knowledge-example-note > p {
  margin: 0;
}

.knowledge-example-note > svg,
.knowledge-example-note > span:first-child {
  flex: 0 0 auto;
  color: var(--warning);
}

.knowledge-check-form {
  min-width: 0;
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding: 0;
  border: 0;
}

.knowledge-check-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid var(--border);
}

.knowledge-check-form fieldset:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.knowledge-check-form legend {
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.65;
}

.knowledge-check-options {
  display: grid;
  gap: 8px;
}

.knowledge-check-option {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.knowledge-check-option > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-faint);
  background: var(--surface-subtle);
  font: 650 12.5px/1 var(--mono);
}

.knowledge-check-option > strong {
  min-width: 0;
  font-weight: 550;
}

.knowledge-check-option > svg {
  color: currentColor;
}

.knowledge-check-option:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-subtle);
}

.knowledge-check-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent-ink);
}

.knowledge-check-option.is-selected,
.knowledge-check-option:has(input:checked) {
  border-color: var(--accent-border);
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.knowledge-check-option.is-correct {
  border-color: var(--success-border);
  color: var(--text);
  background: var(--success-soft);
  box-shadow: inset 3px 0 0 var(--success);
}

.knowledge-check-option.is-wrong {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  color: var(--text);
  background: var(--danger-soft);
  box-shadow: inset 3px 0 0 var(--danger);
}

.knowledge-check-option:has(input:disabled) {
  cursor: default;
}

.knowledge-check-feedback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 11px;
  padding: 12px 14px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 14px;
  line-height: 1.7;
}

.knowledge-check-feedback[hidden] {
  display: none;
}

.knowledge-check-feedback.is-correct {
  border-left-color: var(--success);
  color: color-mix(in srgb, var(--success) 72%, var(--text));
  background: var(--success-soft);
}

.knowledge-check-feedback.is-wrong {
  border-left-color: var(--danger);
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
  background: var(--danger-soft);
}

.knowledge-stage-shell .knowledge-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0;
  border-block: 1px solid var(--border);
}

.knowledge-stage-shell .knowledge-summary-grid > :where(article, div, li) {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.knowledge-stage-shell .knowledge-summary-grid > :where(article, div, li):nth-child(even) {
  border-left: 1px solid var(--border);
}

.knowledge-stage-shell .knowledge-summary-grid > :where(article, div, li):nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

.knowledge-stage-shell .knowledge-summary-grid strong {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-stage-shell .knowledge-summary-grid p,
.knowledge-stage-shell .knowledge-summary-grid small {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.knowledge-stage-actions {
  position: sticky;
  z-index: 8;
  bottom: 0;
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: -68px;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 0 -8px 20px color-mix(in srgb, var(--text) 7%, transparent);
  backdrop-filter: blur(12px);
}

.knowledge-stage-actions > .button {
  min-height: 44px;
}

.knowledge-stage-actions > .button:first-of-type {
  grid-column: 1;
}

.knowledge-stage-actions > .button:last-of-type {
  grid-column: 3;
  min-width: 168px;
}

.knowledge-save-state {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}

.knowledge-save-state svg {
  flex: 0 0 auto;
  color: var(--success);
}

.knowledge-chapter-resume {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  padding: 15px 2px;
  border-block: 1px solid var(--border);
}

.knowledge-chapter-resume > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.knowledge-chapter-resume p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.knowledge-chapter-list button {
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
}

.knowledge-lesson-footer > span {
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
}

.knowledge-chapter-resume > div {
  min-width: 0;
}

.knowledge-chapter-resume strong,
.knowledge-chapter-resume small {
  display: block;
}

.knowledge-chapter-resume strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-chapter-resume small {
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.55;
}

.knowledge-chapter-resume .button {
  min-height: 44px;
}

.knowledge-chapter-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-faint);
  background: var(--surface-subtle);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
}

.knowledge-chapter-status.is-current {
  border-color: var(--accent-border);
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.knowledge-chapter-status.is-complete {
  border-color: var(--success-border);
  color: var(--success);
  background: var(--success-soft);
}

.knowledge-tree-row.is-progress:not(.is-selected) {
  border-color: color-mix(in srgb, var(--accent-border) 75%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
  box-shadow: inset 2px 0 0 var(--accent);
}

.knowledge-tree-row.is-progress .knowledge-level {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.knowledge-tree-row.is-progress .knowledge-tree-name small {
  color: var(--accent-ink);
}

@media (max-width: 900px) {
  .knowledge-stage-list {
    padding-inline: 8px;
  }

  .knowledge-stage-trigger {
    min-height: 64px;
    padding-inline: 2px;
  }

  .knowledge-stage-copy strong {
    font-size: 12.5px;
  }

  .knowledge-stage-copy small {
    font-size: 12px;
  }

  .knowledge-stage-panel {
    padding: 24px 20px 104px;
  }
}

/* V2 subject groups and evidence cards */
.knowledge-subject-groups {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 7px;
}
.knowledge-subject-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.knowledge-subject-group > span {
  flex: 0 0 34px;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 650;
}
.knowledge-subject-group > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.knowledge-subject-group .filter-button {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: 8px;
}
.knowledge-course-evidence {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.knowledge-course-evidence span,
.knowledge-course-evidence strong,
.knowledge-course-evidence small {
  display: block;
}
.knowledge-course-evidence span,
.knowledge-course-evidence small {
  color: var(--text-faint);
  font-size: 12px;
}
.knowledge-course-evidence strong {
  margin-top: 3px;
  font-size: 15px;
}
.knowledge-course-evidence small {
  margin-top: 4px;
  line-height: 1.45;
}
.knowledge-evidence-panel {
  margin: 15px 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
}
.knowledge-evidence-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.knowledge-evidence-heading h3 {
  margin: 3px 0 0;
  font-size: 14px;
}
.knowledge-evidence-status {
  max-width: 140px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}
.knowledge-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.knowledge-evidence-grid > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.knowledge-evidence-grid span,
.knowledge-evidence-grid strong,
.knowledge-evidence-grid small {
  display: block;
}
.knowledge-evidence-grid span,
.knowledge-evidence-grid small {
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.45;
}
.knowledge-evidence-grid strong {
  margin: 4px 0 3px;
  overflow-wrap: anywhere;
  font-size: 15px;
}
.knowledge-evidence-years {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.knowledge-evidence-years span,
.knowledge-evidence-years small {
  color: var(--text-faint);
  font-size: 12px;
}
.knowledge-evidence-years strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.knowledge-evidence-caveat {
  margin: 9px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.55;
}
.knowledge-evidence-links {
  margin-top: 9px;
  border-top: 1px solid var(--border);
}
.knowledge-evidence-links summary {
  padding-top: 9px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
}
.knowledge-evidence-links ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.knowledge-evidence-links li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 5px;
  background: var(--surface);
}
.knowledge-evidence-links a,
.knowledge-evidence-links strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-evidence-links a:hover { color: var(--accent-ink); }
.knowledge-evidence-links small { color: var(--text-faint); font-size: 12px; }
.knowledge-evidence-compact,
.knowledge-table-evidence {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.4;
}
.knowledge-evidence-compact span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--border-strong);
}
.knowledge-node-objective,
.knowledge-stage-source-copy {
  padding: 9px 10px;
  border-left: 2px solid var(--accent);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}
.knowledge-reading .knowledge-node-objective {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.7;
}
.knowledge-reading .knowledge-stage-source-copy {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
}
.knowledge-generated-note {
  display: block;
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .knowledge-course-overview { grid-template-columns: 1fr 1fr; }
  .knowledge-course-evidence { padding-left: 8px; }
  .knowledge-subject-toolbar { align-items: stretch; flex-direction: column; }
  .knowledge-view-toggle { align-self: flex-start; }
}

@media (max-width: 620px) {
  .knowledge-subject-group { align-items: flex-start; }
  .knowledge-subject-group > span { padding-top: 7px; }
  .knowledge-subject-group > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .knowledge-subject-group .filter-button { flex: 0 0 auto; max-width: 150px; }
  .knowledge-course-overview { grid-template-columns: 1fr; }
  .knowledge-course-evidence { padding: 10px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .knowledge-evidence-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .knowledge-stage-nav {
    top: 62px;
  }
}

@media (max-width: 720px) {
  .knowledge-stage-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 12px 9px;
    scroll-padding-inline: 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .knowledge-stage-list::-webkit-scrollbar {
    display: none;
  }

  .knowledge-stage-item {
    min-width: 0;
    flex: 0 0 128px;
    scroll-snap-align: start;
  }

  .knowledge-stage-item:not(:last-child)::after {
    content: none;
  }

  .knowledge-stage-trigger {
    min-height: 56px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    justify-items: start;
    gap: 8px;
    padding: 7px 8px;
    text-align: left;
  }

  .knowledge-stage-copy strong {
    font-size: 12.5px;
  }

  .knowledge-stage-copy small {
    font-size: 12px;
  }

  .knowledge-stage-panel {
    padding: 21px 16px 104px;
    scroll-margin-top: 132px;
  }

  .knowledge-stage-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  .knowledge-stage-header h2 {
    font-size: 21px;
  }

  .knowledge-stage-header p {
    font-size: 14px;
  }

  .knowledge-reading {
    font-size: 15px;
    line-height: 1.75;
  }

  .knowledge-reading :where(button, input, select, textarea) {
    font-size: 15px;
  }

  .knowledge-content-block {
    padding-block: 21px;
    scroll-margin-top: 140px;
  }

  .knowledge-content-block h3,
  .knowledge-worked-example > header h3 {
    font-size: 16px;
  }

  .knowledge-concept-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-concept-grid > :where(article, div, section):nth-child(even) {
    border-left: 0;
  }

  .knowledge-concept-grid > :where(article, div, section):nth-child(n + 2) {
    border-top: 1px solid var(--border);
  }

  .knowledge-stage-shell .knowledge-method-steps article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding-block: 15px;
  }

  .knowledge-stage-shell .knowledge-method-steps strong,
  .knowledge-stage-shell .knowledge-method-steps p,
  .knowledge-example-prompt,
  .knowledge-example-note,
  .knowledge-check-feedback {
    font-size: 14px;
  }

  .knowledge-worked-example > header {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .knowledge-worked-example > header span,
  .knowledge-worked-example > header small {
    flex: initial;
  }

  .knowledge-example-prompt {
    padding: 15px 14px;
    overflow-x: auto;
  }

  .knowledge-example-steps > :where(li, article, div) {
    padding-block: 14px;
  }

  .knowledge-check-form legend {
    font-size: 15px;
  }

  .knowledge-check-option {
    min-height: 50px;
    font-size: 15px;
  }

  .knowledge-stage-shell .knowledge-summary-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-stage-shell .knowledge-summary-grid > :where(article, div, li):nth-child(even) {
    border-left: 0;
  }

  .knowledge-stage-shell .knowledge-summary-grid > :where(article, div, li):nth-child(n + 2) {
    border-top: 1px solid var(--border);
  }

  .knowledge-stage-actions {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 12px;
  }

  .knowledge-stage-actions > .button:last-of-type {
    min-width: 142px;
  }

  .knowledge-chapter-resume {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: stretch;
  }

  .knowledge-chapter-resume .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .knowledge-stage-actions {
    bottom: calc(70px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
    min-height: 64px;
    margin-top: -64px;
    padding: 10px 12px;
  }

  .knowledge-save-state {
    display: none;
  }

  .knowledge-stage-actions > .button:first-of-type {
    grid-column: 1;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    gap: 0;
    padding-inline: 0;
    font-size: 0;
  }

  .knowledge-stage-actions > .button:last-of-type {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
  }
}

@media (max-width: 430px) {
  .knowledge-stage-item {
    flex-basis: 120px;
  }

  .knowledge-stage-panel {
    padding-inline: 14px;
  }

  .knowledge-stage-actions {
    padding-inline: 10px;
  }

  .knowledge-stage-actions > .button:first-of-type {
    max-width: 44px;
  }
}

/* ============================================================
   三门课：基础课 / 刷题课 / 冲刺课
   ============================================================ */
.nav-item-note {
  margin-left: auto;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.nav-item:hover .nav-item-note,
.sidebar:not(.is-collapsed) .nav-item.is-active .nav-item-note {
  opacity: 1;
}
.sidebar.is-collapsed .nav-item-note { display: none; }

.basic-course-page {
  display: grid;
  gap: 22px;
  padding-bottom: 40px;
}

.basic-overview-stats {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: stretch;
}
.basic-mastery-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.basic-mastery-card strong { display: block; font-size: 15px; }
.basic-mastery-card p { margin: 4px 0 0; font-size: 14px; color: var(--text-soft); }

.basic-progress-ring {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--percent) * 1%), var(--surface-subtle) 0);
}
.basic-progress-ring::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--surface);
}
.basic-progress-ring b {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.basic-progress-ring i {
  position: relative;
  z-index: 1;
  align-self: baseline;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 0;
}

.basic-scope-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.basic-scope-note svg { flex: 0 0 14px; margin-top: 3px; }

.basic-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}
.basic-chapter-card { margin: 0; }
.basic-chapter-card > button {
  display: grid;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 20px 20px 18px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.basic-chapter-card > button:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
}
.basic-chapter-index {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.basic-chapter-card h2 { margin: 0; font-size: 17px; font-weight: 700; }
.basic-chapter-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-soft); }
.basic-chapter-bar {
  display: block;
  height: 5px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--surface-subtle);
  overflow: hidden;
}
.basic-chapter-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.basic-chapter-foot {
  display: flex;
  justify-content: space-between;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}

.basic-chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.basic-chapter-head h1 { margin: 6px 0 6px; font-size: 28px; font-weight: 800; }
.basic-chapter-intro { margin: 0; font-size: 14px; color: var(--text-soft); }
.basic-chapter-progress {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-soft);
}
.basic-chapter-progress > span:not(.basic-progress-ring) { font-family: SFMono-Regular, Menlo, Consolas, monospace; }

.basic-lesson-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.basic-lesson-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.basic-lesson-row:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.basic-lesson-row.is-done { border-left: 3px solid var(--success); }
.basic-lesson-row.is-doing { border-left: 3px solid var(--accent); }
.basic-lesson-index {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  color: var(--text-faint);
}
.basic-lesson-copy strong { display: block; font-size: 15px; }
.basic-lesson-copy small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.basic-lesson-side { display: grid; gap: 6px; justify-items: end; }
.basic-lesson-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}

/* 知识点三段式 */
.basic-lesson-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.basic-lesson-head > .text-button { align-self: start; }
.basic-lesson-title h1 { margin: 6px 0 8px; font-size: 27px; font-weight: 800; }
.basic-lesson-goal { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-soft); }
.basic-lesson-goal span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13.5px;
}
.basic-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-soft);
  white-space: nowrap;
}

.basic-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.basic-stepper-item > button,
.basic-stepper-locked {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.basic-stepper-item > button { cursor: pointer; }
.basic-stepper-locked { opacity: 0.5; cursor: not-allowed; }
.basic-stepper-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--surface-subtle);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-soft);
}
.basic-stepper-copy strong { display: block; font-size: 14px; }
.basic-stepper-copy small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-faint); }
.basic-stepper-item.is-current > button { border-color: var(--accent-border); background: var(--surface-raised); }
.basic-stepper-item.is-current .basic-stepper-index { background: var(--accent); color: var(--accent-ink); }
.basic-stepper-item.is-done > button { border-color: var(--success-border); }
.basic-stepper-item.is-done .basic-stepper-index { background: var(--success); color: #fff; }
.basic-stepper-check { margin-left: auto; color: var(--success); }

.basic-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.basic-stage.is-column { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
.basic-stage-side { display: grid; gap: 12px; justify-items: start; }
.basic-stage-label {
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.basic-stage-side h3,
.basic-stage-head h3 { margin: 0; font-size: 21px; font-weight: 700; }
.basic-stage-text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-soft); }
.basic-stage-head { display: grid; gap: 6px; }
.basic-stage-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.basic-figure { margin: 0; display: grid; gap: 10px; }
.basic-figure-canvas {
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-subtle);
  color: var(--text-soft);
}
.basic-figure-canvas svg { width: 100%; height: auto; }
.basic-figure figcaption {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: center;
}
.basic-figure-note {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-subtle);
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-soft);
}

.basic-explain-list { display: grid; gap: 12px; }
.basic-explain-card {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  animation: basicFadeIn 0.24s ease;
}
.basic-explain-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.basic-explain-heading span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
}
.basic-explain-card p:last-child { margin: 0; font-size: 14px; line-height: 1.85; color: var(--text-soft); }

.basic-example-card {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: var(--surface-raised);
}
.basic-example-label {
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
.basic-example-stem { margin: 0; font-size: 16px; line-height: 1.8; font-weight: 600; }
.basic-example-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.basic-example-steps li { font-size: 14px; line-height: 1.8; color: var(--text-soft); }
.basic-example-answer {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.75;
}
.basic-example-answer span {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.basic-example-gate {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px dashed var(--border);
}
.basic-example-gate p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-soft); }

/* 冲刺课 */
.sprint-roadmap {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid var(--warning-border);
  border-radius: 14px;
  background: var(--warning-soft);
}
.sprint-roadmap-label {
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--warning);
}
.sprint-roadmap > p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-soft); }
.sprint-roadmap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.sprint-roadmap-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
}
.sprint-roadmap-list li.is-done { color: var(--success); border-color: var(--success-border); }
.sprint-roadmap-list li.is-todo { color: var(--text-faint); }

.sprint-session-list { display: grid; gap: 14px; }
.sprint-session-card {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.sprint-session-card.is-full { opacity: 0.72; }
.sprint-session-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sprint-session-day {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.sprint-session-head > div { flex: 1 1 auto; min-width: 0; }
.sprint-session-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.sprint-session-head p {
  margin: 3px 0 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.sprint-session-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-soft); }
.sprint-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.sprint-session-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sprint-session-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@keyframes basicFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .basic-overview-stats { grid-template-columns: minmax(0, 1fr); }
  .basic-stage { grid-template-columns: minmax(0, 1fr); }
  .basic-lesson-head,
  .basic-chapter-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .basic-stepper { grid-template-columns: minmax(0, 1fr); }
  .basic-lesson-row { grid-template-columns: 28px minmax(0, 1fr); }
  .basic-lesson-side { grid-column: 2; justify-items: start; flex-direction: row; display: flex; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .basic-explain-card { animation: none; }
  .basic-chapter-card > button:hover { transform: none; }
}

/* 碎片时间：接着上次学 + 首页第一入口 */
.basic-resume-card {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  background: var(--surface-raised);
}
.basic-resume-copy { min-width: 0; }
.basic-resume-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
.basic-resume-card h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.basic-resume-meta { margin: 0; font-size: 14px; color: var(--text-soft); }
.basic-resume-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.basic-resume-note {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}

.dashboard-basic-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: var(--surface-raised);
}
.dashboard-basic-copy { min-width: 0; flex: 1 1 340px; }
.dashboard-basic-copy h2 { margin: 6px 0 8px; font-size: 24px; font-weight: 800; }
.dashboard-basic-copy > p:not(.eyebrow) { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-soft); }
.dashboard-basic-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-soft);
}
.dashboard-basic-bar {
  flex: 0 1 200px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-subtle);
  overflow: hidden;
}
.dashboard-basic-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.dashboard-basic-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

@media (max-width: 900px) {
  .dashboard-basic-entry { padding: 20px 18px; }
  .dashboard-basic-copy h2 { font-size: 20px; }
  .dashboard-basic-side { width: 100%; }
  .dashboard-basic-bar { flex: 1 1 auto; }
}

/* 减法：更少的元素、更直白的信息 */
.basic-progress-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.basic-progress-line .basic-chapter-bar { flex: 1 1 auto; margin: 0; height: 4px; }

.basic-chapter-card > button { gap: 9px; padding: 18px 18px 16px; }
.basic-chapter-card h2 { font-size: 16px; }
.basic-chapter-foot { justify-content: flex-start; gap: 10px; }
.basic-chapter-foot span:last-child svg { vertical-align: -2px; }

.basic-chapter-head { align-items: center; }
.basic-chapter-head h1 { font-size: 24px; margin: 4px 0 2px; }
.basic-chapter-intro { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--text-faint); }

.basic-lesson-row { padding: 15px 18px; }
.basic-lesson-copy strong { font-size: 15.5px; }
.basic-lesson-check { display: inline-flex; color: var(--success); }
.basic-lesson-row.is-done .basic-lesson-index { color: var(--success); }

.basic-lesson-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.basic-lesson-title h1 { font-size: 24px; margin: 4px 0 0; }
.basic-lesson-meta { padding: 6px 11px; font-size: 13.5px; }

.basic-stepper { gap: 8px; }
.basic-stepper-item > button,
.basic-stepper-locked { gap: 9px; padding: 11px 14px; }
.basic-stepper-index { width: 22px; height: 22px; flex: 0 0 22px; font-size: 13.5px; }
.basic-stepper-copy strong { font-size: 14px; }

.basic-stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; padding: 22px; }
.basic-stage-foot { display: grid; gap: 14px; justify-items: start; align-content: center; }
.basic-stage-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-soft); }
.basic-stage-actions { align-items: center; }
.basic-stage-actions .text-button { font-size: 14px; }
.basic-figure-canvas { padding: 18px; }

.sprint-note {
  margin: 0;
  padding: 13px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-soft);
}
.sprint-session-meta { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; gap: 14px; }
.sprint-session-meta span + span::before { content: '·'; margin-right: 14px; color: var(--border-strong); }
.sprint-session-actions { align-items: center; }

@media (max-width: 900px) {
  .basic-stage { grid-template-columns: minmax(0, 1fr); }
  .basic-progress-line .basic-chapter-bar { flex: 1 1 90px; }
}

/* 侧栏「学习路径」：数字徽章 + 连接线 */
.nav-group-path { position: relative; }
.nav-group-path::before {
  content: '';
  position: absolute;
  left: 18.5px;
  top: 41px;
  bottom: 21px;
  width: 1px;
  background: var(--border);
}
.nav-step {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-faint);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
}
.nav-item-step:hover .nav-step { border-color: var(--border-strong); color: var(--text-soft); }
.nav-item-step.is-active .nav-step {
  background: var(--accent);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}
.app-shell.is-sidebar-collapsed .nav-step { width: 20px; height: 20px; flex-basis: 20px; }
.app-shell.is-sidebar-collapsed .nav-group-path::before { display: none; }

.mobile-step {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
}
.mobile-nav .is-active .mobile-step { background: var(--accent); border-color: var(--accent-border); color: var(--accent-ink); }

/* 首页 */
.home-page { display: grid; gap: 22px; }

.home-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.home-path-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
}
.home-path-item:hover { background: var(--surface-subtle); }
.home-path-item.is-current { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text); }
.home-path-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-faint);
}
.home-path-item.is-current .home-path-index {
  background: var(--accent);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}
.home-path-copy { min-width: 0; }
.home-path-copy strong { display: block; font-size: 14px; }
.home-path-copy small {
  display: block;
  margin-top: 2px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.home-path-sep { width: 14px; height: 1px; background: var(--border); }

.home-practice { display: grid; gap: 12px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-section-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.home-practice-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.home-practice-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.home-practice-row:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.home-practice-year {
  min-width: 44px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-faint);
}
.home-practice-copy { flex: 1 1 auto; min-width: 0; }
.home-practice-copy strong { display: block; font-size: 14.5px; }
.home-practice-copy small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-faint); }
.home-practice-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--text-soft);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 10px;
  }
  .home-path-sep { display: none; }
  .home-path-item { padding: 7px 8px; }
  .home-practice-row { gap: 10px; padding: 12px 14px; }
  .home-practice-copy small { white-space: normal; }
  .home-practice-go { font-size: 13.5px; }
}

.topbar-subject-list:not([data-overflow-label])::after { display: none; }

.library-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--success-border);
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 13.5px;
  white-space: nowrap;
}
.tool-placeholder {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.tool-placeholder strong { display: block; font-size: 14.5px; }
.tool-placeholder p { margin: 4px 0 0; font-size: 14px; color: var(--text-faint); }

/* ============================================================
   基础精讲：学科切换 / 模块分组 / 章折叠 / 节行
   ============================================================ */
.basic-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.basic-subjects button {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.basic-subjects button:hover { border-color: var(--accent-border); color: var(--text); }
.basic-subjects button.is-active {
  border-color: var(--accent-border);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.basic-empty-subject {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 26px 24px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-soft);
}
.basic-empty-subject svg { width: 22px; height: 22px; color: var(--text-faint); }
.basic-empty-subject h2 { margin: 0; font-size: 18px; }
.basic-empty-subject p { margin: 0; font-size: 14px; }

.basic-module { display: grid; gap: 12px; }
.basic-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-border);
}
.basic-module-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.basic-module-head span {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.basic-module-muted {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 15px 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-faint);
  font-size: 14px;
}
.basic-module-muted strong { color: var(--text-soft); }

/* 总览工具条：左学科切换、右视图切换 */
.basic-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.basic-view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
}
.basic-view-switch button {
  padding: 6px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.basic-view-switch button:hover { color: var(--text); }
.basic-view-switch button[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.basic-view-switch button:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }

/* 关卡地图的平面 / 立体：虚线描边，和右边实心轨道的视图切换区分开 */
.level-dim-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  margin-right: auto;
  padding: 3px;
  border: 1px dashed var(--border);
  border-radius: 999px;
}
.level-dim-switch button {
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.level-dim-switch button:hover { color: var(--text); }
.level-dim-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 650; }
.level-dim-switch button:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }

/* ============================================================
   章节目录视图（手风琴，与课程地图并存，由 tool bar 切换）
   ============================================================ */
.basic-chapter-list { display: grid; gap: 8px; }
.basic-chapter {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.basic-chapter > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.basic-chapter > summary::-webkit-details-marker { display: none; }
.basic-chapter > summary:hover { background: color-mix(in srgb, var(--accent-soft) 42%, transparent); }
.basic-chapter-no {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 13.5px;
  color: var(--text-soft);
  white-space: nowrap;
}
.basic-chapter[open] .basic-chapter-no { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.basic-chapter-name { flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 700; }
.basic-chapter-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-faint);
}
.basic-chapter[open] .basic-caret { transform: rotate(90deg); }

.basic-section-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 4px 12px 14px;
  list-style: none;
  border-top: 1px solid var(--border);
}
.basic-section-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.basic-section-row:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.basic-section-row.is-done { background: color-mix(in srgb, var(--success-soft) 55%, transparent); }
.basic-section-row:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.basic-section-no {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-faint);
}
.basic-section-copy strong { display: block; font-size: 14px; font-weight: 600; }
.basic-section-copy small {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.basic-section-side { flex: 0 0 auto; }

/* ============================================================
   课程地图：主线（章 = 站点球）→ 支线（节 = 小叶点）
   ------------------------------------------------------------
   几何约定：主线固定 2px，站点球槽位 28px、行左内边距 8px，
   球心与线心都落在 x = 22px 上。所有横向缩进只写在「行」元素
   （summary / .map-leaf-row）上，容器一律零 padding —— 这样
   主线、站点球、小叶点共用同一套 x 坐标，改一处不会错位。
   ============================================================ */
.map-module { display: grid; gap: 14px; }
.map-module > .basic-module-head {
  padding-left: 11px;
  border-left: 3px solid var(--accent);
}

/* 折叠箭头：必须有显式尺寸。只有 viewBox 的 SVG 在 flex 行里会被撑满整行 */
.basic-caret {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--text-faint);
  transition: transform .18s ease;
}

.map-track {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-stop { position: relative; }
/* 主线：每站自带一段，首位相接成一条通线 */
.map-stop::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--border-strong) 0 5px, transparent 5px 11px);
}
.map-stop.is-done::before { background: var(--accent-border); }
/* 进行中：走到球之前是实线，球之后还是虚线（还没走完） */
.map-stop.is-doing::before {
  background:
    linear-gradient(180deg, var(--accent) 0 44px, transparent 44px),
    repeating-linear-gradient(180deg, var(--border-strong) 0 5px, transparent 5px 11px);
}
/* 末站收口，别让线尾巴拖到地图外面 */
.map-stop:last-child::before { bottom: auto; height: 44px; }

.map-node > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 8px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}
.map-node > summary::-webkit-details-marker { display: none; }
.map-node > summary:hover { box-shadow: inset 0 0 0 1px var(--accent-border); }
.map-node[open] > summary .basic-caret { transform: rotate(90deg); }

/* 站点球 */
.map-marker {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.map-stop.is-done .map-marker {
  border-color: var(--accent-border);
  background: var(--accent);
  color: var(--accent-ink);
}
.map-stop.is-doing .map-marker {
  border-color: var(--accent-border);
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.map-stop.is-empty .map-marker { border-style: dashed; color: var(--text-faint); }

.map-stop-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.map-stop-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.map-here {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.map-stop-name { font-size: 16.5px; font-weight: 700; }
.map-stop-meta { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.map-stop-side { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
.map-badge {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-soft);
  white-space: nowrap;
}
.map-badge.is-done { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.map-badge.is-empty { border-style: dashed; color: var(--text-faint); }

/* 支线：章内的小节 */
.map-branch {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}
.map-leaf-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 14px 9px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.map-leaf-row:hover { box-shadow: inset 0 0 0 1px var(--accent-border); }
.map-leaf-dot { flex: 0 0 28px; height: 28px; display: grid; place-items: center; }
.map-leaf-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
}
.map-leaf.is-done .map-leaf-dot::before { background: var(--accent); border-color: var(--accent-border); }
.map-leaf.is-doing .map-leaf-dot::before { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.map-leaf.is-empty .map-leaf-dot::before { border-style: dashed; }
.map-leaf-no {
  flex: 0 0 34px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.map-leaf-copy { flex: 1 1 auto; min-width: 0; }
.map-leaf-copy strong { display: block; font-size: 14px; font-weight: 600; }
.map-leaf-copy small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.map-leaf-side { flex: 0 0 auto; }
.map-leaf.is-empty .map-leaf-copy strong { color: var(--text-faint); font-weight: 500; }
.map-leaf-check { display: inline-flex; color: var(--success); }
.map-leaf-empty { font-size: 12.5px; color: var(--text-faint); }

/* 图例 */
.map-legend {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--text-faint);
}
.map-legend li { display: inline-flex; align-items: center; gap: 5px; }
.map-legend li::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
}
.map-legend .is-done::before { background: var(--accent); border-color: var(--accent-border); }
.map-legend .is-doing::before { background: var(--surface); border-color: var(--accent-border); }
.map-legend .is-todo::before { border-style: dashed; }

.basic-progress-line { flex-wrap: wrap; row-gap: 8px; }
.basic-progress-line .basic-chapter-bar { flex: 1 1 140px; }
.basic-progress-count { flex: 0 0 auto; }

@media (max-width: 640px) {
  .basic-view-switch { width: 100%; }
  .basic-view-switch button { flex: 1 1 auto; }
  .map-module > .basic-module-head { padding-left: 9px; }
  .map-stop::before { left: 17px; }
  .map-stop:last-child::before { height: 40px; }
  .map-node > summary { gap: 11px; padding: 11px 10px 11px 6px; }
  .map-marker { flex: 0 0 24px; width: 24px; height: 24px; font-size: 12px; }
  .map-stop-name { font-size: 15.5px; }
  .map-badge { display: none; }
  .map-leaf-row { gap: 11px; padding: 8px 10px 8px 6px; }
  .map-leaf-dot { flex: 0 0 24px; }
  .map-leaf-no { display: none; }
  .map-legend { display: none; }
}

/* ============================================================
   关卡地图（游戏化关卡图：世界 → 关卡徽章 → 摘星条）
   ------------------------------------------------------------
   弯道不由 CSS 画，而是等布局完成后由 layoutLevelRoads() 按徽章
   真实坐标生成一条 SVG —— 平面图是唯一真相来源，将来接立体模式
   也读同一套坐标（extractLevelMapGeometry）。
   ============================================================ */
.levelmap {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(680px 420px at 18% 40px, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 72%),
    radial-gradient(560px 340px at 84% 120px, color-mix(in srgb, var(--warning-soft) 60%, transparent), transparent 74%);
  background-repeat: no-repeat;
}
/* 立体氛围层：sticky 满视口 + 负下边距，不占布局高度，滚动时一直垫在关卡后面 */
.levelmap-sky {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
}
/* .levelmap-sky 整体不透指针（平面版是纯装饰），但立体世界的画布要能接收悬停与点击 */
.levelmap-sky-canvas { display: block; width: 100%; height: 100%; pointer-events: auto; }

/* 世界 = 模块。必须用 --surface（暖白）而不是 --surface-subtle：后者和页面底色
   --bg 只差 3%，板块在页面里根本立不起来。 */
.level-world {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
  padding: 16px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  transform-origin: 50% 0;
  transition: transform .35s ease, box-shadow .35s ease, margin .35s ease;
}
/* 立体模式：整块 HTML 版面让位给 Three.js 微缩世界。
   用 visibility:hidden 而不是 opacity:0 —— 它同样保留版面高度（沙盘画布要铺满这块地），
   又能把隐藏的按钮移出 Tab 序列与读屏树，避免键盘焦点落到看不见的控件上。
   立体模式的可访问入口是下面的 .level3d-detail 详情条。 */
.levelmap[data-dim="solid"] {
  height: 1040px;      /* JS 会按沙盘宽高比改写成精确值；这是 3D 未就绪时的兜底 */
  overflow: hidden;
  background: none;
}
.levelmap[data-dim="solid"] .levelmap-sky {
  position: absolute;
  inset: 0;
  height: auto;
  margin-bottom: 0;
  z-index: 3;
}
.levelmap[data-dim="solid"] .level-world { visibility: hidden; }

.level3d-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  border: 1px dashed var(--accent-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.level3d-note svg { flex: 0 0 13px; margin-top: 2px; color: var(--accent-ink); }

/* 点关卡牌就地弹出的子章节面板。left/top 由 JS 按投影算成视口坐标，所以是 fixed */
.level3d-pop {
  position: fixed;
  z-index: 120;
  width: min(312px, calc(100vw - 32px));
  max-height: 62vh;
  overflow: auto;
  padding: 12px 13px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -100%);
}
.level3d-pop[hidden] { display: none; }
.level3d-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.level3d-pop-no {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.level3d-pop-head strong { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; }
.level3d-pop-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.level3d-pop-close:hover { border-color: var(--accent-border); color: var(--text); }
.level3d-pop-meta {
  margin: 7px 0 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.level3d-pop-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }

/* 立体模式下给键盘 / 读屏留的关卡入口：视觉隐藏但可 Tab 到，回车（= click）即打开弹层 */
.level3d-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.level-world-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}
.level-world-tag {
  padding: 3px 11px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
}
.level-world-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.level-world-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}

/* 关卡轨道 */
.level-track {
  position: relative;
  display: grid;
  margin: 0;
  padding: 6px 16px 16px;
  list-style: none;
}
.level-node {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 18px 0;
}
.level-node.is-left .level-card { margin-right: auto; }
.level-node.is-right .level-card { margin-left: auto; }

/* 弯道 SVG（由 JS 注入） */
.level-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.level-road-bed { fill: none; stroke: color-mix(in srgb, var(--accent-soft) 52%, var(--surface)); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.level-road-base { fill: none; stroke: var(--border-strong); stroke-width: 4; stroke-dasharray: 9 9; stroke-linecap: round; stroke-linejoin: round; }
.level-road-done { fill: none; stroke: var(--accent-border); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* 关卡卡：徽章 + 文案 + 摘星条 */
.level-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas: "badge copy" "badge stars";
  align-items: center;
  justify-items: start;
  gap: 4px 14px;
  width: min(78%, 540px);
  padding: 8px 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}
.level-card:hover { background: color-mix(in srgb, var(--surface) 72%, transparent); }
.level-card:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.level-node.is-right .level-card {
  grid-template-columns: minmax(0, 1fr) 104px;
  grid-template-areas: "copy badge" "stars badge";
  justify-items: end;
  text-align: right;
}

.level-badge {
  grid-area: badge;
  position: relative;
  justify-self: center;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 3px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--border-strong) 42%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.level-badge-no {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-soft);
}
.level-card:hover .level-badge { transform: translateY(-2px); }

.level-node.is-done .level-badge {
  border-color: var(--accent-border);
  background: var(--accent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent-border) 62%, transparent);
}
.level-node.is-done .level-badge-no { color: var(--accent-ink); }
.level-node.is-doing .level-badge {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 7px var(--accent-soft), 0 3px 0 color-mix(in srgb, var(--accent-border) 38%, transparent);
}
.level-node.is-doing .level-badge-no { color: var(--accent-ink); }
.level-node.is-empty .level-badge { border-style: dashed; background: var(--surface-subtle); box-shadow: none; }
.level-node.is-empty .level-badge-no { font-size: 22px; color: var(--text-faint); }

.level-node.is-here .level-badge { animation: level-here 2.6s ease-in-out infinite; }
@keyframes level-here {
  0%, 100% { box-shadow: 0 0 0 7px var(--accent-soft), 0 3px 0 color-mix(in srgb, var(--accent-border) 38%, transparent); }
  50% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--accent-soft) 40%, transparent), 0 3px 0 color-mix(in srgb, var(--accent-border) 38%, transparent); }
}

.level-pin {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent-border) 62%, transparent);
}

.level-copy { grid-area: copy; display: grid; gap: 3px; min-width: 0; }
.level-copy-kicker { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.level-copy strong { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.level-copy small { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.level-node.is-empty .level-copy strong { color: var(--text-faint); font-weight: 600; }
.level-card:hover .level-copy strong { color: var(--accent-ink); }

.level-stars { grid-area: stars; display: inline-flex; align-items: center; gap: 2px; }
.level-star { display: inline-flex; color: var(--border-strong); }
.level-star.is-on { color: var(--accent-border); }
.level-star-more { font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--text-faint); }

/* 关卡展开：这一关下面挂的节清单 */
.level-sections {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
/* 展开的节清单要让开徽章那一栏，弯道才不会被面板盖住 */
.level-node.is-left .level-sections { margin-left: 116px; margin-right: 22%; }
.level-node.is-right .level-sections { margin-right: 116px; margin-left: 22%; }
.level-section-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.level-section-row:hover { background: var(--accent-soft); }
.level-section-row:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.level-section-no { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.level-section-copy strong { display: block; font-size: 14px; font-weight: 600; }
.level-section-copy small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.level-section.is-empty .level-section-copy strong { color: var(--text-faint); font-weight: 500; }

@media (max-width: 860px) {
  .level-node.is-left .level-card,
  .level-node.is-right .level-card { width: 100%; margin: 0; }
  .level-node.is-right .level-card {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "badge copy" "badge stars";
    justify-items: start;
    text-align: left;
  }
  .level-node.is-left .level-sections,
  .level-node.is-right .level-sections { margin: 0; }
  .level-card { grid-template-columns: 96px minmax(0, 1fr); }
  .level-badge { width: 66px; height: 66px; }
  .level-badge-no { font-size: 22px; }
  .level-world { padding: 14px 12px 8px; border-radius: 20px; }
  .level-world-meta { margin-left: 0; }
  .level-road-bed { stroke-width: 16; }
}

@media (prefers-reduced-motion: reduce) {
  .level-node.is-here .level-badge { animation: none; }
  .level-card:hover .level-badge { transform: none; }
}

/* 节页 */
.basic-breadcrumb {
  margin: 0 0 4px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.basic-lesson-goal {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.basic-lesson-goal span {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13.5px;
}

.basic-pick-list { display: grid; gap: 8px; }
.basic-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
}
.basic-pick:hover { background: var(--accent-soft); }
.basic-pick-copy strong { display: block; font-size: 15.5px; }
.basic-pick-copy small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-soft); }

.basic-pending {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 15px 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.basic-pending svg { flex: 0 0 14px; margin-top: 3px; }

.basic-points-panel {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.basic-points-panel h2 { margin: 0; font-size: 15px; font-weight: 700; }
.basic-points { display: flex; flex-wrap: wrap; gap: 7px; }
.basic-points span {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 14px;
  color: var(--text-soft);
}

.basic-neighbors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.basic-neighbor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
}
.basic-neighbor:hover { border-color: var(--accent-border); color: var(--text); }
.basic-neighbor.is-next { justify-content: flex-end; text-align: right; }
.basic-neighbor small { display: block; font-size: 13.5px; color: var(--text-faint); }
.basic-neighbor strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }

@media (max-width: 900px) {
  .basic-module-head h2 { font-size: 19px; }
  .map-track { gap: 1px; }
  .map-stop-name { font-size: 16px; }
  .map-branch { padding-bottom: 6px; }
  .basic-chapter > summary { padding: 13px 14px; gap: 9px; }
  .basic-chapter-name { font-size: 15.5px; }
  .basic-chapter-meta { display: none; }
  .basic-section-list { padding: 4px 8px 12px; }
  .basic-section-row { grid-template-columns: 44px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .basic-section-side { grid-column: 2; }
  .basic-neighbors { grid-template-columns: minmax(0, 1fr); }
  .basic-subjects button { padding: 7px 13px; font-size: 14px; }
}

/* ============================================================
   模考冲刺：场次、候考室、全真规则
   ============================================================ */
.sprint-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.sprint-clock > span {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
  margin-right: 4px;
}
.sprint-clock button {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.sprint-clock button:hover { border-color: var(--accent-border); color: var(--text); }
.sprint-clock button.is-active { border-color: var(--accent-border); background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.sprint-next {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: var(--surface-raised);
}
.sprint-next.is-closed { border-color: var(--border); background: var(--surface); }
.sprint-next-main { min-width: 0; flex: 1 1 340px; }
.sprint-next-label {
  margin: 0 0 6px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--accent-ink);
}
.sprint-next.is-closed .sprint-next-label { color: var(--text-faint); }
.sprint-next h2 { margin: 0 0 8px; font-size: 25px; font-weight: 800; }
.sprint-next-detail { margin: 0; font-size: 14px; color: var(--text-soft); }
.sprint-next-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.sprint-rules {
  display: grid;
  gap: 10px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.sprint-rules-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
}
.sprint-rules ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.sprint-rules li { font-size: 14px; line-height: 1.75; color: var(--text-soft); }
.sprint-rules strong { color: var(--text); }

.sprint-session-list { display: grid; gap: 10px; }
.sprint-session-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.sprint-session-card.is-closed { opacity: .62; }
.sprint-session-head { display: flex; align-items: center; gap: 13px; }
.sprint-session-day {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.sprint-session-card.is-closed .sprint-session-day { background: var(--surface-subtle); color: var(--text-faint); }
.sprint-session-head > div { flex: 1 1 auto; min-width: 0; }
.sprint-session-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.sprint-session-head p {
  margin: 3px 0 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.sprint-session-note { margin: 0; font-size: 14px; color: var(--text-soft); }
.sprint-session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sprint-session-seats {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}

.sprint-history {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sprint-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-soft);
}
.sprint-history strong { color: var(--success); font-weight: 600; }
.sprint-empty { margin: 0; font-size: 14px; color: var(--text-faint); }

.sprint-wait-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  background: var(--surface-raised);
}
.sprint-wait-card.is-closed { border-color: var(--border); background: var(--surface); }
.sprint-wait-time { display: grid; gap: 4px; }
.sprint-wait-time span {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.sprint-wait-time strong {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.sprint-wait-time small { font-size: 13.5px; color: var(--text-soft); }
.sprint-wait-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0;
}
.sprint-wait-info div { display: grid; gap: 3px; }
.sprint-wait-info dt {
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.sprint-wait-info dd {
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
}

.sprint-wait-notice { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.sprint-wait-notice li { font-size: 14px; line-height: 1.75; color: var(--text-soft); }

@media (max-width: 900px) {
  .sprint-next { padding: 20px 18px; }
  .sprint-next h2 { font-size: 20px; }
  .sprint-next-side { width: 100%; align-items: stretch; }
  .sprint-wait-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .sprint-wait-time strong { font-size: 28px; }
  .sprint-session-head { flex-wrap: wrap; }
}


/* 首页：下一场模考提醒 */
.home-sprint {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.home-sprint:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.home-sprint-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.home-sprint-copy { flex: 1 1 auto; min-width: 0; }
.home-sprint-copy strong { display: block; font-size: 14.5px; }
.home-sprint-copy small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-faint); }
.home-sprint-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--text-soft);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .home-sprint { padding: 12px 14px; gap: 11px; }
  .home-sprint-go { font-size: 13.5px; }
  .home-sprint-copy small { white-space: normal; }
}

/* ============================================================
   摘星成就系统
   ============================================================ */
/* 顶栏星徽的样式统一在同名规则里维护（见「顶栏星徽」一节），此处不再重复定义 */

.nav-item-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.app-shell.is-sidebar-collapsed .nav-item-badge { display: none; }

/* ---------- 摘星页：星图基础元素 ---------- */
/* 夜空沿用产品自己的暖墨 + 金色，而不是通用的冷蓝星空 */
.stars-map { display: block; width: 100%; height: auto; }

/* 背景尘埃与流星由 Canvas 氛围层绘制（initStarsSky），不再用 SVG circle */
.stars-sky-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }

/* 星图的科目切换：与基础精讲共用同一个「当前科目」 */
.stars-subject-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stars-subject-label { font-size: 12.5px; color: var(--text-faint); }
.stars-subject-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.stars-subject-tabs button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.stars-subject-tabs button:hover { border-color: var(--accent-border); color: var(--text); }
.stars-subject-tabs button[aria-selected="true"] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.stars-subject-tabs button:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }

/* 只有大纲、还没有精讲内容的科目：知识点星更小更淡，且不可交互 */
.star-node.is-point { cursor: default; }
.star-node.is-point .star-core { fill: rgba(203, 189, 160, .48); }
.star-node.is-point:hover .star-core { transform: none; }

/* 三档切换器：经典 / 氛围 / 3D */
.stars-map-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.stars-sky-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--sky-rule); border-radius: 999px; background: rgba(20, 18, 16, .38); }
.stars-sky-switch button {
  border: 0;
  background: transparent;
  color: var(--sky-text-faint);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.stars-sky-switch button:hover { color: var(--sky-text-soft); }
.stars-sky-switch button[aria-pressed="true"] { background: rgba(255, 210, 77, .2); color: var(--sky-text); }
.stars-sky-switch button:focus-visible { outline: 1.5px solid rgba(255, 210, 77, .6); outline-offset: 1px; }

/* 3D 模式：stage 撑开高度，SVG 退为背景信息层（文字保留显示，图形交给 WebGL） */
.stars-three-stage { position: relative; aspect-ratio: 1000 / 722; min-width: 760px; }
.stars-three-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stars-map-scroll[data-sky="three"] .stars-map { position: absolute; inset: 0; width: 100%; min-width: 760px; pointer-events: none; }
.stars-map-scroll[data-sky="three"] .stars-map .star-node,
.stars-map-scroll[data-sky="three"] .stars-map .orbit-spoke,
.stars-map-scroll[data-sky="three"] .stars-map .chapter-node,
.stars-map-scroll[data-sky="three"] .stars-map .system-core,
.stars-map-scroll[data-sky="three"] .stars-map .system-ring,
.stars-map-scroll[data-sky="three"] .stars-map .system-ring-inner,
.stars-map-scroll[data-sky="three"] .stars-map .cluster-glow,
.stars-map-scroll[data-sky="three"] .stars-map .cluster-core { opacity: 0; animation: none; }
.sky-3d-tooltip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 210, 77, .35);
  background: rgba(20, 18, 16, .92);
  color: var(--sky-text);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
.sky-3d-tooltip small { display: block; margin-top: 2px; color: var(--sky-text-faint); font-size: 12px; }

/* ---------- 档三 · 星战：深空冷色面板 + 全息青蓝文字（面板内放开冷色，已摘星仍是品牌金） ---------- */
.stars-map-panel[data-sky="three"] {
  background:
    radial-gradient(120% 88% at 18% 0%, #12212f 0%, transparent 60%),
    radial-gradient(96% 76% at 84% 18%, #141c2b 0%, transparent 62%),
    linear-gradient(180deg, #080c12 0%, #06090e 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .62);
  border-color: rgba(90, 210, 255, .16);
}
.stars-map-panel[data-sky="three"] .stars-map-head { border-bottom-color: rgba(90, 210, 255, .16); }
.stars-map-panel[data-sky="three"] .stars-map-heading h2 { color: #e4f6ff; }
.stars-map-panel[data-sky="three"] .stars-map-heading p { color: rgba(180, 226, 245, .72); }
.stars-map-panel[data-sky="three"] .stars-legend { color: rgba(180, 226, 245, .72); }
.stars-map-panel[data-sky="three"] .stars-map-foot { border-top-color: rgba(90, 210, 255, .16); color: rgba(159, 232, 255, .58); }
.stars-map-panel[data-sky="three"] .stars-sky-switch { border-color: rgba(90, 210, 255, .22); background: rgba(6, 12, 20, .6); }
.stars-map-panel[data-sky="three"] .stars-sky-switch button { color: rgba(159, 232, 255, .6); }
.stars-map-panel[data-sky="three"] .stars-sky-switch button[aria-pressed="true"] { background: rgba(90, 210, 255, .2); color: #e4f6ff; }

/* 3D 模式下 SVG 只提供几何与无障碍结构：文字改由 .sky-label-layer 在屏幕空间投影 */
.stars-map-scroll[data-sky="three"] .stars-map text { opacity: 0; }
.stars-map-scroll[data-sky="three"] .stars-map .zone-rule { stroke: rgba(90, 210, 255, .2); }

/* 3D 档 HUD 标签：贴在镜头上的标注，永远正对屏幕、永远清晰 */
.sky-label-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky-hud {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  will-change: transform, opacity;
  font-size: 14px;
  color: #d8f4ff;
  text-shadow: 0 0 8px rgba(90, 210, 255, .3);
}
.sky-hud.sky-zone { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; letter-spacing: .16em; color: #9fe8ff; }
.sky-hud.sky-zone-count { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: rgba(159, 232, 255, .7); }
.sky-hud.sky-chapter { font-size: 15px; font-weight: 600; color: #e4f6ff; }
.sky-hud.sky-count { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: rgba(159, 232, 255, .75); }
.sky-hud.sky-index { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: rgba(159, 232, 255, .9); }
.sky-hud.sky-cluster-note { font-size: 13px; color: rgba(159, 232, 255, .55); }

/* 3D 档视角控件：拖拽旋转 + 缩放/重置（触摸设备没有滚轮，也能用） */
.stars-three-stage { cursor: grab; }
.stars-three-stage.is-dragging { cursor: grabbing; }
.stars-three-stage.is-dragging .sky-3d-tooltip { display: none; }
.sky-hud-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  gap: 6px;
}
.sky-hud-controls button {
  min-width: 34px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(90, 210, 255, .34);
  border-radius: 9px;
  background: rgba(8, 18, 28, .74);
  color: #cfeeff;
  font: 13.5px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sky-hud-controls button:hover { background: rgba(18, 40, 58, .88); border-color: rgba(90, 210, 255, .62); }
.sky-hud-controls button:focus-visible { outline: 2px solid rgba(90, 210, 255, .7); outline-offset: 2px; }
.sky-3d-tooltip { border-color: rgba(90, 210, 255, .4); background: rgba(6, 14, 22, .94); color: #e4f6ff; }
.sky-3d-tooltip small { color: rgba(159, 232, 255, .7); }

/* 辐条：章节 → 课时 的短轨道线 */
.orbit-spoke { stroke: var(--sky-line); stroke-width: 1; }
/* 已摘到的辐条入场时从章节「生长」出去（pathLength=1 使 dasharray 与线长无关） */
.orbit-spoke.is-got {
  stroke: var(--sky-line-lit);
  stroke-width: 1.3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lineGrow .8s cubic-bezier(.3, .6, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes lineGrow { to { stroke-dashoffset: 0; } }

/* 星系骨架：同心轨道环 + 模块中心球 */
.system-ring { fill: none; stroke: rgba(214, 194, 148, .3); stroke-width: 1; stroke-dasharray: 2 7; }
.system-ring-inner { fill: none; stroke: rgba(214, 194, 148, .16); stroke-width: 1; }
.core-halo { fill: rgba(255, 210, 77, .07); }
/* 未点亮：暗色描边球；已点亮：实心金球带光晕 */
.core-body { fill: rgba(120, 112, 96, .3); stroke: rgba(203, 189, 160, .45); stroke-width: 1.2; }
.system-core.has-star .core-body { fill: url(#coreLit); stroke: none; }
.system-core.has-star .core-halo {
  fill: rgba(255, 210, 77, .16);
  animation: starPulse 4.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.zone-rule { stroke: var(--sky-rule); stroke-width: 1; }
.zone-label { fill: rgba(248, 242, 226, .82); font-size: 14px; font-weight: 600; letter-spacing: .16em; font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.zone-count { fill: rgba(248, 242, 226, .62); font-size: 13.5px; font-family: SFMono-Regular, Menlo, Consolas, monospace; }

/* 章节是一颗有明暗的球体：环是结构，实心球是这一步的进度 */
.chapter-halo { fill: var(--sky-node-halo); }
.chapter-core { fill: rgba(120, 112, 96, .3); stroke: rgba(203, 189, 160, .42); stroke-width: 1; }
.chapter-glow { fill: rgba(255, 210, 77, .09); }
.chapter-node.has-star .chapter-core { fill: url(#planetLit); stroke: none; }
.chapter-node.has-star .chapter-halo { fill: rgba(255, 210, 77, .14); }
.chapter-index { fill: rgba(248, 242, 226, .58); font-size: 12.5px; font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.chapter-node.has-star .chapter-index { fill: rgba(255, 210, 77, .92); }
.chapter-label { fill: rgba(248, 242, 226, .9); font-size: 15px; font-weight: 600; font-family: inherit; }
.chapter-count { fill: rgba(248, 242, 226, .62); font-size: 13.5px; font-family: SFMono-Regular, Menlo, Consolas, monospace; }

.star-node { cursor: pointer; outline: none; }
/* 入场：按 --d 依次点亮；动画放在外层 g 上，不与 .star-core 的悬停缩放冲突 */
.star-node { transform-box: fill-box; transform-origin: center; animation: starEnter .5s cubic-bezier(.2, 1.35, .4, 1) both; animation-delay: var(--d, 0s); }
@keyframes starEnter { 0% { opacity: 0; transform: scale(.25); } 100% { opacity: 1; transform: scale(1); } }
.star-node .star-core { fill: url(#starDim); transition: transform .18s ease; transform-box: fill-box; transform-origin: center; }
.star-node:hover .star-core { transform: scale(1.5); }
.star-node:focus-visible .star-core {
  transform: scale(1.65);
  stroke: #fff8e0;
  stroke-width: 1.4;
  paint-order: stroke;
}
.star-node.is-got .star-core { fill: url(#starCore); color: var(--accent); }
.star-node.is-got .star-halo {
  fill: rgba(255, 210, 77, .22);
  animation: starPulse 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes starPulse { 0%, 100% { opacity: .45; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.06); } }

/* 环形星座只是进度示意，不可点击，光标不误导 */
.star-cluster .star-node { cursor: default; }
.star-cluster .star-node:hover .star-core { transform: none; }

.cluster-core { fill: var(--sky-node); }
.cluster-glow { fill: rgba(255, 210, 77, .07); }
.cluster-label { fill: rgba(248, 242, 226, .84); font-size: 14px; font-weight: 600; }
.cluster-count { fill: var(--sky-text-soft); font-size: 13.5px; font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.cluster-note { fill: var(--sky-text-faint); font-size: 13.5px; }

/* 渠道卡：四类星各自的规则与入口 */
.stars-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stars-channel {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 17px 19px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.stars-channel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stars-channel-head strong { font-size: 15px; }
.stars-channel-head span { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--text-soft); }
.stars-channel-bar { height: 5px; border-radius: 3px; background: var(--surface-subtle); overflow: hidden; }
.stars-channel-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.stars-channel p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-faint); }
.stars-channel-go { justify-self: start; margin-top: 2px; }

/* ---------- 例题作答与摘星 ---------- */
.example-options { display: grid; gap: 8px; margin: 2px 0; }
.example-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.example-option:hover:not(:disabled) { border-color: var(--accent-border); transform: translateX(2px); }
.example-option-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--surface-subtle);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-soft);
}
.example-option.is-picked { border-color: var(--accent-border); background: var(--accent-soft); }
.example-option.is-picked .example-option-mark { background: var(--accent); color: var(--accent-ink); }
.example-option.is-correct { border-color: var(--success-border); background: var(--success-soft); }
.example-option.is-correct .example-option-mark { background: var(--success); color: #fff; }
.example-option.is-wrong { border-color: #f0c4bf; background: var(--danger-soft); }
.example-option.is-wrong .example-option-mark { background: var(--danger); color: #fff; }
.example-option:disabled { cursor: default; }

.example-feedback {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
}
.example-feedback svg { flex: 0 0 15px; margin-top: 3px; }
.example-feedback.is-correct { background: var(--success-soft); color: var(--success); }
.example-feedback.is-wrong { background: var(--danger-soft); color: var(--danger); }

.basic-example-card.is-solved { border-color: var(--success-border); }

.star-burst {
  position: relative;
  display: grid;
  place-items: center;
  height: 46px;
  color: var(--accent);
  pointer-events: none;
}
.star-burst i {
  position: absolute;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform-origin: 50% 30px;
  transform: rotate(var(--angle)) translateY(-24px) scaleY(.3);
  animation: starRay .9s ease-out forwards;
}
.star-burst span { display: inline-flex; animation: starPop .8s cubic-bezier(.2, 1.5, .4, 1) both; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 80%, transparent)); }
@keyframes starRay { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(-40px) scaleY(1.5); } }
@keyframes starPop { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 60% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .star-node, .star-node.is-got .star-halo, .star-burst i, .star-burst span { animation: none; }
  /* reduced-motion 下连线直接保持完成态，不能停在 dashoffset:1 的隐形初始帧 */
  .constellation-line.is-got { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   单题刷题：一题一屏
   ============================================================ */
body.drill-mode .drill-room { height: 100vh; }

.drill-room {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.drill-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.drill-exit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.drill-exit:hover { border-color: var(--accent-border); color: var(--text); }
.drill-title { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.drill-title strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-title span {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.drill-stats {
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
  white-space: nowrap;
}
.drill-stats b { color: var(--text); font-size: 14px; }
.drill-stats .drill-combo.is-hot b { color: var(--accent-ink); }
.drill-stats .drill-combo.is-hot { color: var(--accent-border); }

.drill-progress { height: 3px; background: var(--surface-subtle); }
.drill-progress i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.drill-stage {
  display: grid;
  place-items: center;
  padding: 30px 22px;
  overflow: auto;
}
.drill-card {
  width: min(760px, 100%);
  display: grid;
  gap: 18px;
  padding: 30px 34px 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 22px 50px -34px rgba(38, 32, 12, .38);
  animation: drillIn .26s ease;
}
@keyframes drillIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.drill-card.is-correct { border-color: var(--success-border); }
.drill-card.is-wrong { border-color: #f0c4bf; }

.drill-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drill-qno {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.drill-qmeta { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--text-faint); }
.drill-qknowledge {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13.5px;
  color: var(--text-soft);
}
.drill-stem { margin: 0; font-size: 19px; line-height: 1.8; font-weight: 600; text-wrap: pretty; }

.drill-options { display: grid; gap: 10px; }
.drill-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .12s ease;
}
.drill-option:hover:not(:disabled) { border-color: var(--accent-border); transform: translateX(3px); }
.drill-option i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--surface-subtle);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-style: normal;
  color: var(--text-soft);
}
.drill-option.is-picked { border-color: var(--accent-border); background: var(--accent-soft); }
.drill-option.is-picked i { background: var(--accent); color: var(--accent-ink); }
.drill-option.is-correct { border-color: var(--success-border); background: var(--success-soft); }
.drill-option.is-correct i { background: var(--success); color: #fff; }
.drill-option.is-wrong { border-color: #f0c4bf; background: var(--danger-soft); }
.drill-option.is-wrong i { background: var(--danger); color: #fff; }
.drill-option:disabled { cursor: default; }
.drill-option-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--success);
  white-space: nowrap;
}
.drill-option-tag.is-wrong { color: var(--danger); }

.drill-fill, .drill-essay { display: grid; gap: 10px; justify-items: start; }
.drill-fill-input, .drill-essay-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font: inherit;
  font-size: 16px;
  color: var(--text);
  resize: vertical;
}
.drill-fill-input:focus, .drill-essay-input:focus { outline: 2px solid var(--accent-border); outline-offset: 1px; }

.drill-reveal {
  justify-self: start;
  padding: 8px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.drill-reveal:hover { border-color: var(--accent-border); color: var(--text-soft); }

.drill-feedback { display: grid; gap: 14px; padding-top: 4px; border-top: 1px dashed var(--border); animation: drillIn .24s ease; }
.drill-feedback-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.drill-feedback.is-correct .drill-feedback-head { color: var(--success); }
.drill-feedback.is-wrong .drill-feedback-head { color: var(--danger); }
.drill-solution { display: grid; gap: 8px; padding: 16px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.drill-solution-label {
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.drill-solution-body { font-size: 15px; line-height: 1.85; color: var(--text-soft); }
.drill-knowledge-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14px;
  color: var(--text-faint);
}

.drill-dock {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.drill-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.drill-nav:hover:not(:disabled) { border-color: var(--accent-border); color: var(--text); }
.drill-nav:disabled { opacity: .45; cursor: not-allowed; }
.drill-dock-hint {
  flex: 1 1 auto;
  text-align: center;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.drill-next { flex: 0 0 auto; }
.drill-empty { padding: 60px 0; text-align: center; color: var(--text-faint); }

/* 模式设置：三选一 */
.mode-select.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-badge {
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 600;
  vertical-align: 2px;
}

@media (max-width: 900px) {
  .drill-topbar { flex-wrap: wrap; gap: 9px; padding: 11px 14px; }
  .drill-stats { gap: 12px; font-size: 13.5px; }
  .drill-stage { padding: 16px 14px; }
  .drill-card { padding: 22px 18px 24px; gap: 15px; border-radius: 15px; }
  .drill-stem { font-size: 17px; }
  .drill-option { padding: 13px 14px; font-size: 15px; gap: 11px; }
  .drill-qknowledge { margin-left: 0; }
  .drill-dock { padding: 12px 14px 16px; gap: 10px; }
  .drill-dock-hint { display: none; }
  .drill-nav, .drill-next { flex: 1 1 auto; justify-content: center; }
  .mode-select.is-three { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .drill-card, .drill-feedback { animation: none; }
  .drill-option:hover:not(:disabled) { transform: none; }
}


/* 真题精练页：随机刷题入口 */
.drill-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding: 24px 26px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: var(--surface-raised);
}
.drill-entry-copy { min-width: 0; flex: 1 1 360px; }
.drill-entry-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--accent-ink);
}
.drill-entry h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.drill-entry-copy > p:not(.drill-entry-label) { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-soft); }
.drill-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-soft);
}
.drill-entry-meta span { display: inline-flex; align-items: center; gap: 6px; }
.drill-entry-star { color: var(--accent-ink); }
.drill-entry-side { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.drill-entry-side small { font-size: 13.5px; color: var(--text-faint); }

/* 刷题卡片：来源与结算 */
.drill-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.drill-summary { width: min(620px, 100%); }
.drill-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.drill-summary-grid div { display: grid; gap: 4px; text-align: center; }
.drill-summary-grid strong {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
}
.drill-summary-grid span { font-size: 13.5px; color: var(--text-faint); }
.drill-summary-star { display: grid; gap: 9px; }
.drill-summary-label {
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.drill-summary-star-row { display: flex; align-items: center; gap: 7px; color: var(--border-strong); }
.drill-summary-star-row span.is-got { color: var(--accent); }
.drill-summary-star-row em {
  margin-left: 8px;
  font-style: normal;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.drill-summary-hint { margin: 0; font-size: 14px; color: var(--text-soft); }

.home-section-actions { display: inline-flex; align-items: center; gap: 12px; }

@media (max-width: 900px) {
  .drill-entry { padding: 20px 18px; }
  .drill-entry h2 { font-size: 20px; }
  .drill-entry-side { width: 100%; align-items: stretch; }
  .drill-entry-side small { text-align: center; }
  .drill-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-section-actions .button { display: none; }
}

/* 刷题解析：跳基础精讲 */
.drill-basic-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, transform .12s ease;
}
.drill-basic-link:hover { background: var(--accent); transform: translateX(3px); }
.drill-basic-link svg:last-child { margin-left: auto; }
.drill-basic-link span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.drill-basic-link strong { font-weight: 700; }
@media (max-width: 900px) {
  .drill-basic-link span { display: block; }
  .drill-basic-link strong { display: block; margin-top: 2px; }
}

.drill-room.is-empty { grid-template-rows: minmax(0, 1fr); }
.drill-empty-title { margin: 0; font-size: 22px; font-weight: 800; }
.drill-empty-text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-soft); }

/* ============================================================
   摘星入口重设计：顶栏常驻星徽 + 沉浸式星空 + 首页星条
   ============================================================ */

/* 顶栏星徽（与 AI 点数钱包同一层级） */
.top-stars {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.top-stars:hover { background: var(--accent-soft); border-color: var(--accent); }
.top-stars.is-empty { border-color: var(--border); background: var(--surface); color: var(--text-faint); }
.top-stars-icon { display: inline-flex; }
.top-stars-icon svg { width: 17px; height: 17px; }
.top-stars-copy { display: grid; gap: 1px; text-align: left; }
.top-stars-copy small { font-size: 12.5px; letter-spacing: .04em; opacity: .85; }
.top-stars-copy strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.05;
}
.top-stars-copy em { font-style: normal; font-size: 12.5px; font-weight: 400; opacity: .8; }
.top-stars-hint {
  padding-left: 9px;
  border-left: 1px solid color-mix(in srgb, var(--accent-border) 60%, transparent);
  font-size: 13.5px;
  opacity: .75;
}
.top-stars:hover .top-stars-hint { opacity: 1; }
.top-stars.is-empty .top-stars-hint { border-left-color: var(--border); }

/* 首页星条 */
.home-stars {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.home-stars:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.home-stars-icon { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.home-stars-copy { flex: 1 1 auto; min-width: 0; }
.home-stars-copy strong { display: block; font-size: 14px; }
.home-stars-copy small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-faint); }
.home-stars-bar {
  flex: 0 1 150px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-subtle);
  overflow: hidden;
}
.home-stars-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-border), var(--accent));
}
.home-stars-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ---------- 摘星页布局 ---------- */
.stars-page { display: grid; gap: 26px; }

/* 星等总览：先把「我在哪、还差多少」讲清楚 */
.stars-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stars-kpi {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.stars-kpi-label { font: 600 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.stars-kpi-value { display: flex; align-items: baseline; gap: 5px; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stars-kpi-value em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--text-faint); }
.stars-kpi-value.is-accent { color: var(--accent-ink); }
.stars-kpi-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-faint); }
.stars-kpi-bar { height: 5px; border-radius: 3px; background: var(--surface-subtle); overflow: hidden; }
.stars-kpi-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-border), var(--accent)); }

/* 星图：一整块暖墨夜空。浅色主题里像书桌上的一扇夜窗，深色主题里比页面再深一档 */
.stars-map-panel {
  --sky-ink: #1b1914;
  --sky-ink-deep: #141210;
  --sky-text: #f8f2e2;
  --sky-text-soft: rgba(248, 242, 226, .78);
  --sky-text-faint: rgba(248, 242, 226, .58);
  --sky-dust: #e0cfa4;
  --sky-node: rgba(233, 216, 178, .34);
  --sky-node-halo: rgba(233, 216, 178, .1);
  --sky-line: rgba(214, 194, 148, .17);
  --sky-line-lit: rgba(255, 210, 77, .5);
  --sky-rule: rgba(214, 194, 148, .14);
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 88% at 14% 0%, #2c2618 0%, transparent 58%),
    radial-gradient(96% 76% at 86% 16%, #241f17 0%, transparent 62%),
    linear-gradient(180deg, var(--sky-ink) 0%, var(--sky-ink-deep) 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .42);
}
[data-theme="dark"] .stars-map-panel {
  --sky-ink: #171613;
  --sky-ink-deep: #121110;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55);
}

.stars-map-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--sky-rule);
}
.stars-map-heading h2 { font-size: 16px; color: var(--sky-text); }
.stars-map-heading p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--sky-text-soft); }
.stars-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--sky-text-soft); }
.stars-legend li { display: inline-flex; align-items: center; gap: 7px; }
.stars-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(169, 154, 124, .5); }
.stars-legend-dot.is-got { background: radial-gradient(circle at 40% 35%, #fff8e0, var(--accent) 60%, var(--accent-border)); box-shadow: 0 0 8px rgba(255, 210, 77, .55); }
.stars-legend-node { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 210, 77, .5); background: rgba(255, 210, 77, .16); }

.stars-map-scroll { position: relative; overflow-x: auto; overflow-y: hidden; }
.stars-map-scroll .stars-map { min-width: 760px; }

.stars-map-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px 15px;
  border-top: 1px solid var(--sky-rule);
  font-size: 13.5px;
  color: var(--sky-text-faint);
}
.stars-map-foot [data-icon] { display: inline-flex; flex: 0 0 auto; }

/* 下一颗星：整页唯一的行动重点 */
.stars-next {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--accent-border) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}
.stars-next-icon { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.stars-next-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.stars-next-kicker { margin: 0; font: 600 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--accent-ink); }
.stars-next-copy strong { font-size: 15px; }
.stars-next-detail { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.stars-next-gain {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-border) 60%, var(--border));
  border-radius: 999px;
  background: var(--surface);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-ink);
  white-space: nowrap;
}
.stars-next-go { flex: 0 0 auto; }

.stars-channels-section,
.stars-recent { display: grid; gap: 0; }
.stars-channels-section .section-heading,
.stars-recent .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.stars-channels-section .section-heading span,
.stars-recent .section-heading span { font-size: 13.5px; color: var(--text-faint); }

/* 摘星足迹 */
.stars-recent-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.stars-recent-list li { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.stars-recent-list li + li { border-top: 1px solid var(--border); }
.stars-recent-time { flex: 0 0 84px; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--text-faint); }
.stars-recent-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.stars-recent-copy strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stars-recent-copy small { font-size: 13.5px; color: var(--text-faint); }
.stars-recent-gain {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .stars-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .top-stars-hint { display: none; }
  .top-stars-copy small { display: none; }
  .home-stars { padding: 11px 14px; gap: 11px; }
  .home-stars-bar { display: none; }
  .home-stars-go { font-size: 13.5px; }

  .stars-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stars-next { flex-wrap: wrap; gap: 13px; }
  .stars-next-go { width: 100%; }
  .stars-map-head { padding: 16px 18px 14px; }
  .stars-map-foot { padding: 11px 18px 13px; }
}

@media (max-width: 640px) {
  /* 四张总览卡在手机上保持 2×2，竖排会把星图推到两屏以外 */
  .stars-kpi { padding: 13px 14px; gap: 5px; }
  .stars-kpi-value { font-size: 23px; }
  .stars-kpi-note { font-size: 13.5px; }
  .stars-kpi-row { gap: 10px; }
  .stars-channels { grid-template-columns: minmax(0, 1fr); }
  /* 足迹行不换行：让标题自己截断，否则长标题会把「+1 星」挤到下一行，整列看起来是坏的 */
  .stars-recent-list li { flex-wrap: nowrap; gap: 10px; }
  .stars-recent-time { flex: 0 0 auto; font-size: 13.5px; }
  .stars-recent-copy strong { font-size: 14px; }
  .stars-page { gap: 20px; }
}

@media (max-width: 380px) {
  .stars-kpi-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   学习笔记：课时内抽屉 + 双本笔记页 + 顶栏入口
   ============================================================ */

/* 顶栏笔记入口 */
.top-notes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
}
.top-notes:hover { border-color: var(--accent-border); color: var(--text); }
.top-notes.is-empty { color: var(--text-faint); }
.top-notes-icon { display: inline-flex; }
.top-notes-icon svg { width: 15px; height: 15px; }
.top-notes strong {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

/* 课时页底部的「记笔记」：正文里的普通按钮，停在内容左下方，不做成悬浮入口。
   它是 grid 子项，靠 justify-self 左对齐，不要拉满整行。 */
.lesson-note-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.lesson-note-button:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.lesson-note-button.has-note { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }

/* 基础精讲页的笔记入口 */
.basic-note-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.basic-note-entry:hover { border-color: var(--accent-border); color: var(--text); }
.basic-note-entry b { font-family: SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent-ink); }

/* ---------- 笔记抽屉 ---------- */
/* 笔记抽屉与 AI 解读抽屉同形：从顶栏下沿拉出、通到视口底部，无圆角，
   左侧 1px 分割线；宽屏不压暗页面、正文并排让位，只有窄屏才铺满 + 遮罩。 */
.note-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 23;
  background: rgba(26, 22, 12, .34);
  animation: noteScrimIn .18s ease;
  display: none;
}
@keyframes noteScrimIn { from { opacity: 0; } to { opacity: 1; } }

.note-drawer {
  position: fixed;
  z-index: 24;
  top: 68px;          /* 顶栏高度：抽屉贴在顶栏下方 */
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: var(--drawer-w);
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -30px 0 64px -36px rgba(38, 32, 12, .46);
  animation: noteDrawerIn .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes noteDrawerIn { from { transform: translateX(100%); } to { transform: none; } }

.note-drawer-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 13px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.note-drawer-orb {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 9px;
  background: var(--accent);
  color: #3d2f00;
}
.note-drawer-title { min-width: 0; display: grid; gap: 2px; }
.note-drawer-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .12em;
  color: var(--accent-ink);
}
.note-drawer-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.note-drawer-context {
  margin: 1px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.note-drawer-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-faint);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.note-drawer-close:hover { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--text); }

.note-drawer-body {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  overflow: auto;
}
.note-drawer-title-field { display: grid; gap: 6px; }
.note-drawer-title-field span {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.note-drawer-title-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}
.note-drawer-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.note-drawer-editor-head > span {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
/* 预览区与编辑区保持同一套盒模型，切换时不跳动 */
.note-drawer-preview {
  min-height: 300px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-soft);
}
.note-drawer-preview > :first-child { margin-top: 0; }
.note-drawer-preview > :last-child { margin-bottom: 0; }
.note-drawer-empty { color: var(--text-faint); }
.notebook-markdown-toolbar .is-toggle { font-weight: 600; }
.notebook-markdown-toolbar .is-toggle.is-active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }

.note-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.note-drawer-hint { font-size: 13.5px; color: var(--text-faint); }
.note-drawer-actions { display: flex; gap: 10px; flex: 0 0 auto; }

/* ---------- 笔记页双标签 ---------- */
.note-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.note-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.note-tabs button:hover { border-color: var(--accent-border); color: var(--text); }
.note-tabs button.is-active {
  border-color: var(--accent-border);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.note-tabs button b {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-subtle);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
}
.note-tabs button.is-active b { background: rgba(255, 255, 255, .55); }
.note-tab-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  color: var(--text-faint);
}

.note-type.is-study {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}
.study-note-card h3 { margin: 2px 0 0; font-size: 17px; font-weight: 750; }
.study-note-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-faint);
}
.study-note-jump {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.study-note-jump:hover { background: var(--accent-soft); }

@media (max-width: 900px) {
  body.note-drawer-open { overflow: hidden; }
  .note-drawer-scrim { display: block; }
  .note-drawer {
    top: 0;
    z-index: 65;      /* 必须高于遮罩 23，否则抽屉会被自己的遮罩压暗 */
    width: 100vw;
    border-left: 0;
    box-shadow: none;
  }
  .note-drawer-foot { flex-direction: column; align-items: stretch; }
  .note-drawer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .note-drawer-actions .button { min-height: 44px; }
  .note-tabs { overflow-x: auto; }
  .note-tabs button { padding: 9px 14px; font-size: 14px; }
  .top-notes strong { display: none; }
  /* 手机上碎片化学习，点按目标放大到 44px */
  .lesson-note-button,
  .basic-note-entry { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .study-note-jump { min-height: 44px; }
}

/* ---------- 课时页：AI 解读入口 + 底部「记笔记」 ---------- */

/* AI 解读入口：右下角悬浮药丸，点开从右侧拉出抽屉。 */
.ai-fab {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 18px 40px -22px rgba(38, 32, 12, .5);
  animation: aiFabIn .3s cubic-bezier(.2, .9, .3, 1);
}
@keyframes aiFabIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-fab:hover { background: var(--accent-soft); }
.ai-fab-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #3d2f00;
}
.ai-fab-copy { display: grid; text-align: left; line-height: 1.25; }
.ai-fab-copy strong { font-size: 14px; font-weight: 750; }
.ai-fab-copy em { font-style: normal; font-size: 13.5px; color: var(--text-faint); }
body.exam-mode .ai-fab { bottom: 96px; }   /* 刷题页要让开底部操作栏 */
/* 任意一个右侧抽屉打开时都收起悬浮球，否则它会浮在抽屉上面 */
body.ai-panel-open .ai-fab,
body.note-drawer-open .ai-fab { display: none; }

/* 面板本体 —— 从右侧拉出来的通高抽屉：贴着视口右边、上下通到底，
   不再是浮在右上角的小卡片。桌面端依旧不压暗页面、正文区并排让位，
   这样还能对着左边的讲义提问；只有窄屏放不下并排时才显示遮罩。 */
.ai-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 23;
  background: rgba(26, 22, 12, .34);
  animation: noteScrimIn .18s ease;
  display: none;
}
.ai-panel {
  position: fixed;
  z-index: 24;
  top: 68px;          /* 顶栏高度：抽屉贴在顶栏下方，通到底部 */
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: var(--drawer-w);
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -30px 0 64px -36px rgba(38, 32, 12, .46);
  overflow: hidden;
  animation: aiPanelIn .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes aiPanelIn { from { transform: translateX(100%); } to { transform: none; } }

/* 宽屏上抽屉与正文并排：只压缩正文区，不动顶栏和侧栏。 */
@media (min-width: 1180px) {
  .view-container { transition: padding-right .26s cubic-bezier(.2, .9, .3, 1); }
  body.ai-panel-open .view-container,
  body.note-drawer-open .view-container { padding-right: var(--drawer-w); }
}

/* 头部：暖白卡面 + 细分割线。整块黄底已按设计规范 5.1 去掉，
   只留金色徽章与等宽小标签承担品牌识别。 */
.ai-panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 13px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ai-panel-orb {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 9px;
  background: var(--accent);
  color: #3d2f00;
}
.ai-panel-title { min-width: 0; display: grid; gap: 2px; }
.ai-panel-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .12em;
  color: var(--accent-ink);
}
.ai-panel-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ai-panel-context {
  margin: 1px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.ai-panel-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-faint);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ai-panel-close:hover { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--text); }

.ai-panel-stream {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px 16px 14px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

.ai-msg { display: flex; gap: 9px; animation: aiMsgIn .22s ease; }
@keyframes aiMsgIn { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-msg-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-top: 3px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.ai-msg-main { min-width: 0; }
/* 回答是这页真正要读的东西，所以给它最亮的卡面；提问退一步，只用一小块浅金。 */
.ai-msg-body {
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.74;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}
.ai-msg-text > :first-child { margin-top: 0; }
.ai-msg-text > :last-child { margin-bottom: 0; }
.ai-msg.is-ai .ai-msg-body {
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 5px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ai-msg.is-ai .ai-msg-body :where(h1, h2, h3, h4, h5, h6) { color: var(--text); }
.ai-msg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
}
.ai-msg.is-user { justify-content: flex-end; }
.ai-msg.is-user .ai-msg-body {
  max-width: 86%;
  width: fit-content;
  margin-left: auto;
  padding: 10px 13px;
  background: var(--accent-soft);
  border-radius: 14px 14px 5px 14px;
  color: var(--accent-ink);
  font-size: 13.5px;
  line-height: 1.65;
}
.ai-msg.is-thinking .ai-msg-body {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px;
}
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--text-faint);
  animation: aiDot 1s infinite ease-in-out;
}
.ai-dots i:nth-child(2) { animation-delay: .16s; }
.ai-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes aiDot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ai-save:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.ai-save.is-saved {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-ink);
  cursor: default;
}

/* 追问建议跟在回答后面，而不是卡在输入框上方：
   视线从「刚读完的答案」直接落到「接着能问什么」，底部只剩输入一条。 */
.ai-panel-suggest {
  display: grid;
  gap: 9px;
  padding-left: 35px;
  animation: aiMsgIn .22s ease;
}
.ai-suggest-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--text-faint);
}
.ai-suggest-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-chip {
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ai-chip:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }

.ai-panel-foot {
  display: grid;
  gap: 9px;
  padding: 12px 16px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.ai-panel-input { display: flex; align-items: flex-end; gap: 8px; }
.ai-panel-input textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 132px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-panel-input textarea::placeholder { color: var(--text-faint); }
.ai-panel-input textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
}
.ai-panel-input textarea:disabled { opacity: .6; cursor: not-allowed; }
.ai-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}
.ai-panel-cost {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
}
.ai-cost-meter { font-family: var(--mono); }
.ai-panel-cost b { color: var(--accent-ink); font-weight: 700; }
.ai-cost-note { text-align: right; }

/* 中等宽度：抽屉窄一点，依旧贴边通高、不压暗。 */
@media (max-width: 1179px) {
  .ai-panel,
  .note-drawer { width: min(400px, 100vw); }
}

/* 刷题 / 模考（body.exam-mode）里顶栏是被藏掉的，底部却有一条固定操作栏 .drill-dock，
   所以这一档的抽屉要顶到 0、并且给操作栏让位，否则输入框会被压在操作栏下面。 */
body.exam-mode .ai-panel {
  top: 0;
  bottom: auto;
  height: calc(100vh - var(--drill-dock-h));
}

/* 窄屏放不下并排，显示遮罩阻止背景滚动，抽屉铺满整屏。 */
@media (max-width: 900px) {
  body.ai-panel-open { overflow: hidden; }
  .ai-panel-scrim { display: block; }
  .ai-panel {
    top: 0;
    z-index: 65;        /* 必须高于遮罩 23，否则抽屉会被自己的遮罩压暗 */
    width: 100vw;
    border-left: 0;
    box-shadow: none;
  }
  body.exam-mode .ai-panel { bottom: 0; height: 100vh; }
  body.ai-panel-open .view-container { padding-right: 0; }
  .ai-panel-suggest { padding-left: 0; }
  .ai-fab { right: 14px; bottom: 104px; padding: 9px 14px 9px 10px; }
  .ai-fab-copy em { display: none; }
  .ai-chip { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------------------
   装饰性角标层（字号阶的例外档）
   只有「推荐 / 最受欢迎 / 分类标签 / 状态角标」这类**纯装饰或纯重复信息**的角标
   允许落在 micro 之下（11.5px）：它们不是需要阅读的内容，
   和正文拉开距离反而能让价格、标题这些真正要读的字更突出。
   注意必须写在文件末尾：同优先级下后者覆盖前者。
   --------------------------------------------------------------------------- */
.recommend-label,
.credit-recommend-label,
.public-type-badge,
.mode-badge,
.paper-mode-pill,
.nav-item-badge,
.checkout-benefit-tags small { font-size: 11.5px; }
.recommend-label,
.credit-recommend-label { letter-spacing: .02em; }

/* 2026-09 course-first information architecture */
.topbar-page-context {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
}

.course-catalog-page { grid-template-columns: minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
.course-catalog-page > * { min-width: 0; }

.course-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr);
  gap: 20px;
  margin-bottom: 18px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--accent-soft) 84%, transparent), transparent 42%),
    var(--surface);
}

.course-home-copy { align-self: center; max-width: 800px; }
.course-home-copy h1 { margin: 5px 0 10px; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.course-home-copy > p:last-of-type { max-width: 640px; color: var(--text-soft); font-size: 15px; line-height: 1.75; }

.course-search {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text-faint);
  background: var(--surface);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 5%, transparent);
}

.course-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent); }
.course-search input { min-width: 0; flex: 1 1 auto; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 14px; }
.course-search kbd { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-faint); background: var(--surface-subtle); font: inherit; font-size: 11.5px; }

.course-trial-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-soft) 66%, var(--surface));
}

.course-trial-card > span { display: flex; align-items: center; gap: 7px; color: var(--accent-ink); font-size: 12px; font-weight: 750; letter-spacing: .04em; }
.course-trial-card h2 { margin: 14px 0 8px; font-size: 21px; line-height: 1.3; }
.course-trial-card p { margin: 0 0 18px; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.course-trial-card .button { align-self: flex-start; }

.course-library-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 25px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.course-library-intro h1 { margin: 4px 0 7px; }
.course-library-intro p:last-child { color: var(--text-soft); }
.course-library-intro .course-search { width: min(420px, 44vw); margin: 0; }

.course-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 24px; }
.course-filter-row .filter-button { min-height: 36px; padding-inline: 16px; }
.course-groups { display: grid; gap: 34px; }
.course-group { min-width: 0; }
.course-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.course-group-heading > div { display: flex; align-items: baseline; gap: 10px; }
.course-group-heading h3 { font-size: 18px; }
.course-group-heading span, .course-group-heading p { color: var(--text-faint); font-size: 12px; }
.course-group-heading p { max-width: 460px; text-align: right; }

.dashboard-course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
button.dashboard-course-card {
  min-height: 220px;
  appearance: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.dashboard-course-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-border) 70%, transparent); outline-offset: 2px; }
.dashboard-course-copy h3 { color: var(--text); font-size: 18px; }
.dashboard-course-action {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 700;
}

.dashboard-course-card:hover .dashboard-course-action { color: var(--surface); background: var(--accent); }
.course-empty { display: grid; place-items: center; min-height: 260px; padding: 34px; border: 1px dashed var(--border-strong); border-radius: 11px; color: var(--text-faint); text-align: center; }
.course-empty h3 { margin-top: 10px; color: var(--text); }
.course-empty p { margin: 5px 0 16px; }

.adaptive-experience-nav, .course-detail-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.knowledge-course-toolbar-simple { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.knowledge-course-toolbar-simple > div:first-child { display: grid; gap: 3px; }
.knowledge-course-toolbar-simple > div:first-child span { color: var(--text-faint); font-size: 12px; }
.question-bank-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .dashboard-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .course-home-hero { grid-template-columns: 1fr; padding: 22px; }
  .course-trial-card { min-height: 0; }
  .course-library-intro { align-items: stretch; flex-direction: column; gap: 14px; }
  .course-library-intro .course-search { width: 100%; }
  .course-group-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .course-group-heading p { text-align: left; }
  .dashboard-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-bank-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .topbar-page-context > span, .topbar-page-context > svg { display: none; }
  .course-home-hero { padding: 18px; border-radius: 10px; }
  .course-home-copy h1 { font-size: 36px; }
  .course-search kbd { display: none; }
  .dashboard-course-grid { grid-template-columns: 1fr; }
  button.dashboard-course-card { min-height: 0; }
  .course-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .course-filter-row .filter-button { flex: 0 0 auto; }
  .knowledge-course-toolbar-simple { align-items: stretch; flex-direction: column; }
}