/* ═══════════════════════════════════════════════════════════════
   Apple Design System 01 — 设计令牌与基础层
   PART 1-11：基础色板 / 语义令牌 / 液态玻璃材质 / 阴影 / 圆角 / 按钮与动效令牌 / 排版 / 间距 / 动画 / 深色模式 / 全局 Reset / 基础排版
   ---------------------------------------------------------------
   来源：apple-design-system.css v4.0 按 PART 边界物理切分（P1-4.1）
   原文件行区间：第 1–453 行

   ⚠ 级联敏感：本仓库的样式由 4 个子文件按文件名序号**顺序加载**，
     加载顺序即优先级顺序，不可调换。若遗漏中间任一文件，后续
     文件里对被遗漏组件的覆盖规则将失去上下文，导致样式错乱。

   加载方式（根目录页面）：
     <link rel="stylesheet" href="css/ads-01-tokens.css">
     <link rel="stylesheet" href="css/ads-02-components.css">
     <link rel="stylesheet" href="css/ads-03-extended.css">
     <link rel="stylesheet" href="css/ads-04-pages.css">

   子目录页面请把 css/ 换成 ../css/。
   全文备份：.workbuddy/dead-css-backup/apple-design-system.full.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Apple Design System — 统一设计令牌与液态玻璃组件
   Based on Apple Human Interface Guidelines + Design Library Tokens
   Version: 4.0  |  Target: iOS 18 / macOS Sequoia quality

   ⚠ 本文件是全站唯一加载的样式表（各页面 <link> 引入）。
   历史样式表 shared.css / shared-pro.css 的内容已合并进 PART 38–70，
   shared-liquid-glass.css / apple-polish.css 的在用组件已合并进 PART 71–73。
   上述 4 个源文件已于 2026-09-06 删除（无任何页面引用），
   备份见 .workbuddy/dead-css-backup/，仅供溯源查阅，请勿再引入。
   各 PART 标题中的 "Merged from xxx.css" 用于标明代码来源，予以保留。
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PART 1: PRIMITIVE PALETTE (Apple Design Library)
   ═══════════════════════════════════════════════════════════════
   选择器为 `:root, body.light-mode`（2026-09-10 修正）：
   浅色令牌此前只写在 :root 上。系统偏好深色时 PART 9 的
   `@media (prefers-color-scheme: dark) :root` 会把 --color-text / --color-surface
   等一整套令牌翻成深色值；此时用户手动切浅色只还原了 --bg-canvas（铺底），
   卡片/文字仍是深色令牌 → 「浅铺底 + 深卡片」的错配色。
   把 body.light-mode 并入浅色令牌的选择器后，手动浅色路径会把**整套**令牌
   还原为浅色（body 上的声明优先于 html 继承值），不必再逐个覆盖。 */
:root, body.light-mode {
  /* ── Brand (Apple System Blue) ──────────────────────────── */
  --brand-50: #e8f2ff;
  --brand-100: #cfe5ff;
  --brand-200: #9fcbff;
  --brand-300: #66abff;
  --brand-400: #2e8dff;
  --brand-500: #007aff;
  --brand-600: #0064d6;
  --brand-700: #004fad;
  --brand-800: #003b82;
  --brand-900: #00275a;

  /* ── Background ─────────────────────────────────────────── */
  --bg-50: #ffffff;
  --bg-100: #f7f7fa;
  --bg-200: #f2f2f7;
  --bg-300: #e5e5ea;
  --bg-400: #d1d1d6;
  --bg-500: #aeaeb2;
  --bg-600: #8e8e93;
  --bg-700: #3a3a3c;
  --bg-800: #1c1c1e;
  --bg-900: #000000;

  /* ── Text ───────────────────────────────────────────────── */
  --text-50: #f5f5f7;
  --text-100: #e3e3e8;
  --text-200: #c7c7cc;
  --text-300: #aeaeb2;
  --text-400: #8e8e93;
  --text-500: #6e6e73;
  --text-600: #48484a;
  --text-700: #3c3c43;
  --text-800: #1d1d1f;
  --text-900: #000000;

  /* ── System Colors ──────────────────────────────────────── */
  --system-green: #34c759;
  --system-green-dark: #30d158;
  --system-orange: #ff9500;
  --system-orange-dark: #ff9f0a;
  --system-red: #ff3b30;
  --system-red-dark: #ff453a;
  --system-purple: #af52de;
  --system-purple-dark: #bf5af2;
  --system-teal: #5ac8fa;
  --system-indigo: #5856d6;
  --system-indigo-dark: #5e5ce6;

  /* ═══════════════════════════════════════════════════════════
     PART 2: SEMANTIC TOKENS (Light Mode)
     ═══════════════════════════════════════════════════════════ */

  /* ── Core ───────────────────────────────────────────────── */
  --color-bg: var(--bg-200);
  --color-surface: rgba(255, 255, 255, 0.72);
  --color-surface-solid: var(--bg-50);
  --color-surface-elevated: rgba(255, 255, 255, 0.85);
  --color-text: var(--text-800);
  --color-text-secondary: var(--text-500);
  --color-text-light: var(--text-400);

  /* ── Brand / Accent ─────────────────────────────────────── */
  --color-primary: var(--brand-500);
  --color-primary-dark: var(--brand-600);
  --color-primary-light: var(--system-teal);
  --color-primary-accent: var(--brand-500);
  --color-primary-bg: rgba(0, 122, 255, 0.08);
  --color-primary-border: rgba(0, 122, 255, 0.20);
  --color-primary-soft: rgba(0, 122, 255, 0.04);
  --color-primary-glow: rgba(0, 122, 255, 0.30);

  /* ── Semantic ───────────────────────────────────────────── */
  --color-success: var(--system-green);
  --color-success-bg: rgba(52, 199, 89, 0.10);
  --color-success-border: rgba(52, 199, 89, 0.25);
  --color-warning: var(--system-orange);
  --color-warning-bg: rgba(255, 149, 0, 0.10);
  --color-warning-border: rgba(255, 149, 0, 0.25);
  --color-danger: var(--system-red);
  --color-danger-bg: rgba(255, 59, 48, 0.10);
  --color-danger-border: rgba(255, 59, 48, 0.25);
  --color-info: var(--brand-500);
  --color-info-bg: rgba(0, 122, 255, 0.10);
  --color-purple: var(--system-purple);
  --color-purple-bg: rgba(175, 82, 222, 0.10);

  /* ── Borders & Separators ───────────────────────────────── */
  --color-border: rgba(60, 60, 67, 0.12);
  --color-border-light: rgba(60, 60, 67, 0.08);
  --color-separator: rgba(60, 60, 67, 0.18);

  /* ── Icon ───────────────────────────────────────────────── */
  --color-icon: var(--text-800);
  --color-icon-muted: var(--text-500);

  /* ═══════════════════════════════════════════════════════════
     PART 3: LIQUID GLASS MATERIAL (visionOS / macOS Sequoia)
     ═══════════════════════════════════════════════════════════ */

  /* ── Glass Surfaces ─────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.48);
  --glass-bg-strong: rgba(255, 255, 255, 0.64);
  --glass-bg-weak: rgba(255, 255, 255, 0.32);
  --glass-blur: blur(40px) saturate(180%);
  --glass-blur-strong: blur(60px) saturate(200%);
  --glass-blur-weak: blur(20px) saturate(150%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.55);
  --glass-border-inner: 1px solid rgba(255, 255, 255, 0.30);
  --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 40%, transparent 60%);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
  --glass-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.05);
  --glass-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.20);

  /* ═══════════════════════════════════════════════════════════
     PART 4: SHADOWS (Apple Design Library)
     ═══════════════════════════════════════════════════════════ */
  --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.10), 0 8px 16px -8px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 8px 24px rgba(0, 122, 255, 0.25), 0 2px 8px rgba(0, 122, 255, 0.15);
  --shadow-primary-sm: 0 4px 12px rgba(0, 122, 255, 0.20);

  /* ═══════════════════════════════════════════════════════════
     PART 5: RADIUS (Apple Continuous Corners)
     ═══════════════════════════════════════════════════════════ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-2xl: 34px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════
     PART 5b: BUTTON & MOTION TOKENS（P2 统一，2026-09-10 新增）
     全站按钮原无高度令牌、时长 9 档、缓动 6 条曲线；此处收敛为统一令牌。
     ═══════════════════════════════════════════════════════════ */
  --btn-h-sm: 32px;
  --btn-h-md: 40px;
  --btn-h-lg: 48px;
  --btn-dur: 160ms;
  --dur-smooth: 400ms;
  --dur-spring: 500ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --btn-press: 0.97;
  /* 时长 3 档（P2 收敛：原 0.12/0.16/0.18/0.2/0.22/0.24/0.26/0.28s 八档并存） */
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  /* 缓动曲线（P2 收敛：原 6 条曲线并存，含同值异写法） */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* 胶囊圆角（值与既有字面量一致，保证计算样式不变） */
  --radius-pill: 999px;

  /* ── 页面铺底画布（2026-09-10 修复）──────────────────────────────
     背景由 --bg-canvas 单一决定，浅/深分别存在两个基础令牌里。
     修复前 body::before 的深浅切换只挂在 @media (prefers-color-scheme: dark)，
     站内「主题开关」（body.dark-mode）只改文字色不改铺底 → 浅色不透明渐变
     仍覆盖 body 黑底，深色模式下正文近白字压浅底，几乎不可读。
     现在 :root / body.light-mode / body.dark-mode / 系统偏好 四条路径
     都只切换同一个 --bg-canvas（body 上的声明优先于 html 继承值，
     因此「系统深色 + 站内手动切浅色」也能正确回到浅色）。 */
  /* ── 页面铺底画布（2026-09-29 视觉收敛 · P2-3.1）───────────────
     原铺底叠了 5 层径向渐变，色相横跨蓝 / 紫 / 青 / 绿 / 橙五色。
     这在消费级产品里是"活泼"，但在司法计算工具上会传递"花哨、
     不够权威"的第一印象 —— 与用户来此是想算准一个数字的心智相冲突。
     现在收敛为**仅品牌蓝 + 极淡中性层**，色相单一、饱和度压低，
     保留空间层次感的同时让文字与卡片成为视觉主体。

     收敛规则（全站适用，后续新增页面勿再引入其它色相的渐变）：
       · 径向渐变只用品牌蓝 rgba(0,122,255,·) / 深色下 rgba(10,132,255,·)
       · 铺底总染色强度 ≤ 0.10 alpha，不得压过正文对比度
       · 需要"氛围"时优先用线性底色，而非多色径向叠加 */
  --bg-canvas-light:
    radial-gradient(ellipse 80% 60% at 12% 18%, rgba(0, 122, 255, 0.09) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 82%, rgba(0, 122, 255, 0.05) 0%, transparent 58%),
    linear-gradient(180deg, #F2F2F7 0%, #E8E8F0 50%, #F0F0F7 100%);
  --bg-canvas-dark:
    radial-gradient(ellipse 80% 60% at 12% 18%, rgba(10, 132, 255, 0.10) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 82%, rgba(10, 132, 255, 0.05) 0%, transparent 58%),
    #000;
  --bg-canvas: var(--bg-canvas-light);

  /* ═══════════════════════════════════════════════════════════
     PART 6: TYPOGRAPHY (Apple Design Library)
     ═══════════════════════════════════════════════════════════ */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', 'Microsoft YaHei', Inter, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Noto Serif SC', serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --tracking-tight: -0.022em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.02em;

  /* ═══════════════════════════════════════════════════════════
     PART 7: SPACING (Apple 8px grid)
     ═══════════════════════════════════════════════════════════ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ═══════════════════════════════════════════════════════════
     PART 8: ANIMATION (Apple Spring Physics)
     ═══════════════════════════════════════════════════════════ */
  --transition-fast: 200ms var(--ease-standard);
  --transition-smooth: 400ms var(--ease-standard);
  --transition-spring: 500ms var(--ease-spring);
  --transition-elastic: 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ═══════════════════════════════════════════════════════════════
   PART 9: DARK MODE
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* 让原生表单控件（select 下拉列表 / 日期选择器 / 滚动条）跟随深色渲染。
       缺它时：<select> 的文字色被令牌改成 #F5F5F7（浅字），但原生下拉面板仍按
       light 渲染（浅底）→「白字白底」。这也是「系统深色」与「手动深色」必须一致的一条。 */
    color-scheme: dark;
    --bg-canvas: var(--bg-canvas-dark);   /* 系统深色：仅此一行切换铺底 */
    --color-bg: var(--bg-900);
    --color-surface: rgba(28, 28, 30, 0.72);
    --color-surface-solid: var(--bg-800);
    --color-surface-elevated: rgba(44, 44, 46, 0.85);
    --color-text: var(--text-50);
    --color-text-secondary: var(--text-300);
    --color-text-light: var(--text-400);

    --color-primary: var(--brand-400);
    --color-primary-dark: var(--brand-300);
    --color-primary-bg: rgba(10, 132, 255, 0.15);
    --color-primary-border: rgba(10, 132, 255, 0.30);
    --color-primary-soft: rgba(10, 132, 255, 0.08);
    --color-primary-glow: rgba(10, 132, 255, 0.40);

    --color-success: var(--system-green-dark);
    --color-success-bg: rgba(48, 209, 88, 0.12);
    --color-warning: var(--system-orange-dark);
    --color-warning-bg: rgba(255, 159, 10, 0.12);
    --color-danger: var(--system-red-dark);
    --color-danger-bg: rgba(255, 69, 58, 0.12);
    --color-purple: var(--system-purple-dark);

    --color-border: rgba(255, 255, 255, 0.12);
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-separator: rgba(255, 255, 255, 0.15);

    --color-icon: var(--text-50);
    --color-icon-muted: var(--text-400);

    --glass-bg: rgba(44, 44, 46, 0.60);
    --glass-bg-strong: rgba(58, 58, 60, 0.75);
    --glass-bg-weak: rgba(28, 28, 30, 0.45);
    --glass-border: 1px solid rgba(255, 255, 255, 0.10);
    --glass-border-inner: 1px solid rgba(255, 255, 255, 0.06);
    --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 40%, transparent 60%);
    --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.20);

    --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.30);
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.36), 0 1px 3px -1px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.44), 0 2px 4px -2px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.44);
    --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.60);
    --shadow-primary: 0 8px 24px rgba(10, 132, 255, 0.35);
    --shadow-primary-sm: 0 4px 12px rgba(10, 132, 255, 0.28);
  }
}

/* Explicit dark mode class (toggle) */
body.dark-mode {
  /* 同系统深色块：原生控件跟随深色，避免 <select> 浅字压浅底 */
  color-scheme: dark;
  --color-bg: var(--bg-900);
  --color-surface: rgba(28, 28, 30, 0.72);
  --color-surface-solid: var(--bg-800);
  --color-surface-elevated: rgba(44, 44, 46, 0.85);
  --color-text: var(--text-50);
  --color-text-secondary: var(--text-300);
  --color-text-light: var(--text-400);
  --color-primary: var(--brand-400);
  --color-primary-bg: rgba(10, 132, 255, 0.15);
  --color-primary-border: rgba(10, 132, 255, 0.30);
  --color-success: var(--system-green-dark);
  --color-warning: var(--system-orange-dark);
  --color-danger: var(--system-red-dark);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(44, 44, 46, 0.60);
  --glass-bg-strong: rgba(58, 58, 60, 0.75);
  --glass-bg-weak: rgba(28, 28, 30, 0.45);
  --glass-border: 1px solid rgba(255, 255, 255, 0.10);
  /* ── 2026-09-10 补：与系统深色块（@media prefers-color-scheme:dark）对齐 ──
     原先这 22 个令牌只写在系统深色块里，导致「系统深色」与「手动切深色」产出
     两套不同的主题（手动那套缺阴影 / 主色深态 / 状态底色 / 分隔线 / 图标色 /
     玻璃高光等）。此处按系统深色块的取值逐条补齐，取值完全一致、零视觉变化。 */
  --color-primary-dark: var(--brand-300);
  --color-primary-soft: rgba(10, 132, 255, 0.08);
  --color-primary-glow: rgba(10, 132, 255, 0.40);
  --color-success-bg: rgba(48, 209, 88, 0.12);
  --color-warning-bg: rgba(255, 159, 10, 0.12);
  --color-danger-bg: rgba(255, 69, 58, 0.12);
  --color-purple: var(--system-purple-dark);
  --color-separator: rgba(255, 255, 255, 0.15);
  --color-icon: var(--text-50);
  --color-icon-muted: var(--text-400);
  --glass-border-inner: 1px solid rgba(255, 255, 255, 0.06);
  --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 40%, transparent 60%);
  --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.36), 0 1px 3px -1px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.44), 0 2px 4px -2px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.44);
  --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.60);
  --shadow-primary: 0 8px 24px rgba(10, 132, 255, 0.35);
  --shadow-primary-sm: 0 4px 12px rgba(10, 132, 255, 0.28);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* 站内主题开关：显式浅色 / 深色类。二者互斥，且都定义在 body 上，
   因此优先于 html(:root) 的继承值 —— 系统深色下手动切浅色同样生效。
   注意：--bg-canvas 的浅色值现已由 PART 1 的 `:root, body.light-mode` 统一给出
   （与整套浅色令牌同一处声明，见 PART 1 注释），此处只保留深色一侧。 */
body.dark-mode  { --bg-canvas: var(--bg-canvas-dark); }

/* ═══════════════════════════════════════════════════════════════
   PART 10: GLOBAL RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  line-height: 1.55;
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
}

/* ── Dynamic Background Canvas (Apple Style) ──────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  /* 单一来源：由 --bg-canvas 决定浅/深（:root / body.light-mode / body.dark-mode
     / 系统偏好四条路径都只改这一个令牌），避免站内开关切深色后铺底仍是浅色 */
  background: var(--bg-canvas);
  background-attachment: fixed;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* 系统深色的铺底已统一由 :root 内的 --bg-canvas 切换（见 PART 9），
   此处不再单独覆盖 body::before —— 否则站内主题开关无法生效（历史缺陷）。 */

/* ═══════════════════════════════════════════════════════════════
   PART 11: TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "kern", "liga";
}
h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }

p { margin-bottom: 0.75em; }

::selection { background: rgba(0, 122, 255, 0.20); color: var(--color-primary-dark); }
::-moz-selection { background: rgba(0, 122, 255, 0.20); }

/* ── Scrollbar (Apple Style) ──────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.35);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(142, 142, 147, 0.55); }