/* ============================================================
   题匣 · 基础样式 v2 —— 设计系统
   概念：「一张适合长期学习的现代答题纸」。两层系统：
   骨架 = 清晰的中性纸面与高可读信息层级；
   痕迹 = 题匣印章、批改红与正确绿（只用于有意义的反馈）。
   语义 token 与维护说明见同目录 DESIGN-TOKENS.md
   ============================================================ */

:root {
  /* —— 纸阶（浅 → 深）—— */
  --paper0: #F4F7FB;   /* 页面底：冷静的浅灰蓝 */
  --paper1: #FFFFFF;   /* 卡面：清晰白纸 */
  --paper2: #EAF0F7;   /* 凹陷面 */

  /* —— 墨阶 —— */
  --ink0: #182230;     /* 正文主墨 */
  --ink1: #465468;     /* 次级 */
  --ink2: #586882;     /* 辅助（小字仍满足正文对比度） */
  --ink3: #8E99A9;     /* 装饰/禁用 */

  /* —— 线阶 —— */
  --line0: #DCE4EF;    /* 细线 */
  --line1: #C6D1DF;    /* 中线 */
  --line2: #263447;    /* 重线（卷头双线的粗线用墨色）*/

  /* —— 印刷蓝（主色：结构与链接，冷静的机器印刷）—— */
  --blue: #315EFB;
  --blue-deep: #2448C8;
  --blue-wash: #EAF0FF;
  --blue-soft: #B8C7FA;

  /* —— 痕迹色（人的痕迹）—— */
  --red: #C43D35;      /* 批改朱红 / 印章 */
  --red-wash: #FCEDEA;
  --green: #237A52;    /* 墨水绿 = 正确 */
  --green-wash: #E8F5EE;
  --gold: #A97812;     /* 收藏星 */
  --amber: #8A642E;    /* 琥珀：待注意/欠练（非答错） */
  --amber-wash: #F8F0E3;
  --hl: rgba(255, 214, 10, 0.5);        /* 荧光记号黄 */
  --hl-strong: rgba(255, 214, 10, 0.72);
  --note-bg: #FFF7D7;  /* 便利贴纸 */
  --note-line: #E9D27A;

  /* —— 字体 —— */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, STSong, Georgia, serif;
  --font-sans: "MiSans", "HarmonyOS Sans SC", -apple-system, "PingFang SC",
    "Segoe UI", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;

  /* —— 内容字号增量（设置里可调，只影响题面内容，不影响 UI）—— */
  --font-boost: 0px;
  --fs-stem: calc(18px + var(--font-boost));
  --fs-opt: calc(16px + var(--font-boost));
  --fs-explain: calc(15px + var(--font-boost));

  /* —— 圆角阶梯（就近归档：2-4px→xs，5-8px→radius，9-12px→lg；圆形保留 50%）—— */
  --radius-xs: 3px;   /* 徽章 / 印章 / 小键帽 / mini 元素 */
  --radius: 6px;      /* 按钮 / 输入框 / 弹层 / 便签等控件 */
  --radius-lg: 10px;  /* 大印章 / 图片衬底 */

  /* —— UI 字号阶梯（.5 半像素一律就近归档；题面内容字号见上方 --fs-*，勿混用）—— */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;

  /* —— 间距阶梯（新样式请引用，存量不强制替换）—— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* —— 尺寸 —— */
  --sidebar-w: 268px;
  --content-w: 880px;
  --shadow-card: none;
  --shadow-pop: 0 4px 12px rgba(24, 34, 48, 0.12), 0 24px 70px rgba(24, 34, 48, 0.2);
  --shadow-sm: 0 1px 2px rgba(24, 34, 48, 0.25);
  --shadow-note: 0 2px 8px rgba(31, 33, 40, 0.06);

  /* —— 半透明语义（收口裸 rgba）—— */
  --color-overlay: rgba(14, 16, 24, 0.46);
  --color-hover-wash: rgba(0, 0, 0, 0.05);

  /* —— 夜间色调预览色板（仅设置面板色块示意，与当前主题无关）—— */
  --tone-graphite-bg: #1E2024;
  --tone-graphite-line: #565E6A;
  --tone-graphite-accent: #91B4FE;
  --tone-ocean-bg: #162022;
  --tone-ocean-line: #5B7074;
  --tone-ocean-accent: #71C5D8;
  --tone-dusk-bg: #1D1A25;
  --tone-dusk-line: #756985;
  --tone-dusk-accent: #B3A0FF;

  /* —— 语义层（组件请优先使用；见 DESIGN-TOKENS.md）—— */
  --color-surface-page: var(--paper0);
  --color-surface-raised: var(--paper1);
  --color-surface-sunken: var(--paper2);
  --color-text-primary: var(--ink0);
  --color-text-secondary: var(--ink1);
  --color-text-muted: var(--ink2);
  --color-text-disabled: var(--ink3);
  --color-border-subtle: var(--line0);
  --color-border-strong: var(--line1);
  --color-border-control: #7A899D;
  --color-accent: var(--blue);
  --color-accent-hover: var(--blue-deep);
  --color-accent-subtle: var(--blue-wash);
  --color-on-accent: #FFFFFF;
  --color-on-brand: #FFFFFF;
  --color-link: var(--blue);
  --color-focus: var(--blue);
  --color-mark-current: var(--color-brand);
  --color-brand: var(--red);
  --color-success: var(--green);
  --color-success-subtle: var(--green-wash);
  --color-on-success: #FFFFFF;
  --color-danger: var(--red);
  --color-danger-subtle: var(--red-wash);
  --color-on-danger: #FFFFFF;
  --color-caution: var(--amber);
  --color-caution-subtle: var(--amber-wash);
  --color-favorite: var(--gold);
  --color-image-mat: #F3F6FA;
  --color-toast-bg: var(--ink0);
  --color-toast-text: var(--paper1);

  color-scheme: light;
}

/* 内容字号档位（小 / 标准 / 大 / 特大） */
html[data-font="0"] { --font-boost: -1.5px; }
html[data-font="1"] { --font-boost: 0px; }
html[data-font="2"] { --font-boost: 2px; }
html[data-font="3"] { --font-boost: 4px; }

/* —— 夜间主题默认色调：石墨（中性、耐看，适合长时阅读）—— */
html[data-theme="dark"] {
  /* 石墨夜色：中性暖灰基底，纸面三层拉开但不发蓝；
     强调色降饱和提亮，长时间夜读不刺眼。 */
  --paper0: #17181B;
  --paper1: #1E2024;
  --paper2: #121316;

  --ink0: #ECEDEF;
  --ink1: #C3C7CD;
  --ink2: #9AA1AB;
  --ink3: #686F79;

  --line0: #2B2E33;
  --line1: #3E434A;
  --line2: #9AA1AB;

  --blue: #91B4FE;
  --blue-deep: #AFC8FF;
  --blue-wash: #242B3B;
  --blue-soft: #4A5F8C;

  --red: #E8938C;
  --red-wash: #342323;
  --green: #7CC7A1;
  --green-wash: #1C2C24;
  --gold: #D9B65C;
  --amber: #C9A55F;
  --amber-wash: #312A1D;
  --hl: rgba(226, 190, 60, 0.22);
  --color-border-control: #565E6A;
  --color-on-accent: #0E1524;
  --color-on-brand: #1A0D0D;
  --color-on-success: #0D1912;
  --color-on-danger: #1A0D0D;
  --color-toast-bg: var(--line2);
  --color-toast-text: var(--paper2);
  --color-image-mat: var(--paper2);
  --hl-strong: rgba(226, 190, 60, 0.36);
  --note-bg: #292515;
  --note-line: #453E26;

  --shadow-card: none;
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.45), 0 20px 60px rgba(0, 0, 0, 0.55);
  --color-hover-wash: rgba(255, 255, 255, 0.06);

  color-scheme: dark;
}

/* 深海：更安静的青黑底，强调色清晰但不偏游戏化。 */
html[data-theme="dark"][data-dark-tone="ocean"] {
  --paper0: #0F1718;
  --paper1: #162022;
  --paper2: #0A1112;
  --ink0: #E8F0F0;
  --ink1: #C0CDD0;
  --ink2: #91A2A6;
  --ink3: #5E7075;
  --line0: #273638;
  --line1: #3B4C50;
  --line2: #87999D;
  --blue: #71C5D8;
  --blue-deep: #91D4E3;
  --blue-wash: #19343B;
  --blue-soft: #35636C;
  --red: #F18D85;
  --red-wash: #3B2523;
  --green: #74CD98;
  --green-wash: #183328;
  --gold: #E8C35D;
  --amber: #DEB56B;
  --amber-wash: #352D1D;
  --color-border-control: #5B7074;
  --color-on-accent: #06191D;
  --color-on-brand: #1A0D0D;
  --color-toast-text: var(--paper2);
  --note-bg: #2A2918;
  --note-line: #4A4728;
}

/* 暮紫：低饱和紫黑底，保留克制的个性与柔和夜读氛围。 */
html[data-theme="dark"][data-dark-tone="dusk"] {
  --paper0: #14121A;
  --paper1: #1D1A25;
  --paper2: #0E0C13;
  --ink0: #F4F0F7;
  --ink1: #CBC3D1;
  --ink2: #9A90A4;
  --ink3: #6B6274;
  --line0: #302B39;
  --line1: #463F52;
  --line2: #958AA2;
  --blue: #B3A0FF;
  --blue-deep: #C8BAFF;
  --blue-wash: #2E2847;
  --blue-soft: #625599;
  --red: #F08B96;
  --red-wash: #3B232C;
  --green: #76C9A1;
  --green-wash: #1B3128;
  --gold: #E7C15C;
  --amber: #DDB16B;
  --amber-wash: #352B1C;
  --color-border-control: #756985;
  --color-on-accent: #130E25;
  --color-on-brand: #1A0D0D;
  --color-toast-text: var(--paper2);
  --note-bg: #2D281C;
  --note-line: #51462B;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink0);
  background: var(--paper0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 等宽数字只用于统计/计数场景，避免正文西文字距被拉宽 */
.mono,
.side-count,
.qcard-no,
.qcard-rate,
.progress-label,
.view-stats,
.finish-stat b,
.stats-cell b,
.mastery-val,
.week-chart + .stats-week .stats-week-label {
  font-variant-numeric: tabular-nums;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

/* 数据提示：灰字 + 数字用主文案色（不用危险色） */
.view-stats .warn,
.parse-brief .warn {
  color: var(--color-text-muted);
  font-weight: 400;
}

.view-stats .warn b,
.parse-brief .warn b {
  color: var(--color-text-primary);
  font-weight: 600;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--hl-strong);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--line1);
  border-radius: var(--radius);
  border: 2px solid var(--paper0);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 卷头双线（签名结构元素：一细一粗，"卷"由此开始） ---------- */
.double-rule {
  height: 6px;
  border-top: 1px solid var(--line1);
  border-bottom: 2.5px solid var(--line2);
}

.double-rule.short {
  width: 34px;
  border-bottom-width: 2px;
}

/* ---------- 荧光笔划重点（签名痕迹元素） ---------- */
.hl {
  background-image: linear-gradient(
    100deg,
    transparent 0.6%,
    var(--hl) 3%,
    var(--hl) 97%,
    transparent 99.4%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.68em;
  background-position: 0 72%;
  padding: 0 0.12em;
  margin: 0 -0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@keyframes hl-sweep {
  from { background-size: 0% 0.68em; }
  to { background-size: 100% 0.68em; }
}

.hl-sweep {
  animation: hl-sweep 0.32s cubic-bezier(0.25, 0.1, 0.25, 1) 0.08s both;
}

/* ---------- 通用文字 ---------- */
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }
.mute { color: var(--ink2); }

/* 眉注：小字加宽字距，页面与分组的低声标注 */
.eyebrow {
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  color: var(--ink2);
  font-weight: 500;
}

/* ---------- 按钮体系 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  border-radius: var(--radius-xs);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.06s ease;
  user-select: none;
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

html[data-theme="dark"] .btn-primary {
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-ghost {
  border-color: var(--color-border-control);
  color: var(--ink1);
  background: var(--paper1);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-quiet {
  color: var(--ink2);
  padding: 6px 10px;
}

.btn-quiet:hover {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.btn-danger {
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger-subtle);
}

.btn-sm {
  min-height: 32px;
  padding: 4px 12px;
  font-size: var(--text-sm);
}

.btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- 印章体系（痕迹元素：框线 + 内描边模拟印泥） ---------- */
.seal {
  display: inline-grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-brand);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 30%, transparent);
  user-select: none;
}

/* ---------- 布局骨架 ---------- */
.app {
  display: flex;
  min-height: 100vh;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 34px 44px 110px;
}

/* 版面宽度（设置里可切，类 Notion）：
   宽屏＝铺满可用宽度；常规＝向中间收拢的舒适阅读列 */
html[data-layout="wide"] .content,
html[data-layout="wide"] .content.wide {
  max-width: none;
}

html[data-layout="normal"] .content {
  max-width: 820px;
}

html[data-layout="normal"] .content.wide {
  max-width: 1024px;
}

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

.view-enter {
  animation: view-in 0.16s ease-out both;
}

/* 页脚：谦逊的收尾 */
.page-foot {
  margin-top: 72px;
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--ink3);
  letter-spacing: 0.08em;
}

.page-foot::before {
  content: "";
  display: block;
  width: 14px;
  border-top: 1px solid var(--line1);
  margin: 0 auto 12px;
}

/* ---------- 打印 ---------- */
@media print {
  .sidebar,
  .topbar,
  .toolbar,
  .quiz-nav,
  .btn,
  .page-foot {
    display: none !important;
  }

  .content {
    max-width: none;
    padding: 0;
  }

  body {
    background: #fff;
  }
}

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