/* ==========================================================================
   UI 规范 v2.0 · 基础层预览（foundation.css）
   --------------------------------------------------------------------------
   状态：预览版，只在 docs/architecture/ui/preview/ 下使用；不替换 assets/common.css。
   依据：docs/plans/active/2026-10-16-ui-spec-v2-coverage.md（§3 共识、§4 裁定 D1–D15、§5 P0）。
   层序：tokens → base → layout → components（留给组件层，本文件不写）→ utilities。
         页面自己的 <style> 不写 @layer，自动高于本文件全部层。
         注意：级联层里 !important 的优先级反过来，越靠前的层越强（本文件只在
         [hidden] 与减少动效两处使用 !important，正好需要它们最强）。

   浏览器基线（低于此版本不保证效果）：
     Chrome / Edge 111+、Safari 16.4+、Firefox 113+
     依赖：@layer、color-mix()、:focus-visible、inset、gap、aspect-ratio、
           grid-template-areas、env(safe-area-inset-*)、prefers-reduced-motion。
     渐进增强（不支持时无害）：scrollbar-gutter、scrollbar-width/color、
           text-wrap:balance、forced-colors。
     不使用：:has()、@container、light-dark()、popover（组件层另行声明）。

   新旧对比开关：<html data-spec="v1"> 时，以下 4 项回到 v1 取值，其余不变：
     ① --color-fg-muted（弱文字 --t3）        ② --color-border-strong（表单控件边框）
     ③ --tm-verify-*（【待核实】外观 → 待填黄）  ④ --fs-*（9 档字号 → 旧的半像素值）
   主题：<html data-theme="dark|light">；无属性时跟随系统。

   断点（@media 只能写这 4 个数值；CSS 变量不能用在 @media 里）：
     xs ≤420 / sm ≤760 / md ≤1180 / lg ≤1400 / xl >1400（不写 media）
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
@layer tokens {

/* 1.1 原始色板（palette）——只允许语义令牌引用；页面和组件禁止直接使用 */
:root{
  /* 中性 · 浅色 */
  --palette-n-0:#FFFFFF;   --palette-n-25:#F5F7FA;  --palette-n-50:#F2F4F7;
  --palette-n-75:#EEF0F3;  --palette-n-100:#E9ECF0; --palette-n-150:#E5E6EB;
  --palette-n-250:#C9CDD4; --palette-n-400:#8A919C; --palette-n-450:#86909C;
  --palette-n-500:#646B76; --palette-n-600:#4E5969; --palette-n-900:#1F2329;
  /* 中性 · 深色 */
  --palette-d-0:#14171C;   --palette-d-50:#1C2027;  --palette-d-75:#232830;
  --palette-d-80:#242A33;  --palette-d-90:#262A32;  --palette-d-100:#2A3039;
  --palette-d-150:#2E333C; --palette-d-250:#4A505A; --palette-d-400:#666C77;
  --palette-d-500:#868D99; --palette-d-600:#B4BAC4; --palette-d-900:#E8EAED;
  /* 品牌蓝 */
  --palette-blue-50:#EAF1FF;  --palette-blue-200:#C9D7FB; --palette-blue-600:#2B5AED; --palette-blue-700:#2149C9;
  --palette-blue-d-bg:#1E2A4A; --palette-blue-d-line:#33467A; --palette-blue-d-fg:#7C9BFF; --palette-blue-d-h:#97AFFF; --palette-blue-d-on:#0E1426;
  /* AI 紫 */
  --palette-violet-50:#F2ECFD; --palette-violet-600:#7A4BD8; --palette-violet-700:#6A3CC6;
  --palette-violet-d-bg:#2B2242; --palette-violet-d-fg:#B79BF5; --palette-violet-d-h:#C7B0F8;
  /* 绿 */
  --palette-green-50:#E8F7F0; --palette-green-700:#0E7C55;
  --palette-green-d-bg:#16352A; --palette-green-d-fg:#5FD1A3;
  /* 橙（提醒） */
  --palette-orange-50:#FFF7E6; --palette-orange-700:#9A4A00;
  --palette-orange-d-bg:#3A2A14; --palette-orange-d-fg:#F0B46B;
  /* 红 */
  --palette-red-50:#FDEDEC; --palette-red-600:#B8322B; --palette-red-700:#A02A24;
  --palette-red-d-bg:#3D1E1C; --palette-red-d-fg:#FF8A80; --palette-red-d-h:#FFA39B;
  /* 待填黄 */
  --palette-yellow-100:#FFF1B8; --palette-yellow-800:#7A4B00;
  --palette-yellow-d-bg:#4A3A10; --palette-yellow-d-fg:#F5D27A;
  /* 星标 */
  --palette-star:#B07000; --palette-star-d:#F0B429;
  /* 图表分类色（viz-3～6 待色觉模拟复核） */
  --palette-slate-600:#5B6B82;  --palette-slate-d:#9AA8BC;
  --palette-teal-600:#0F7F8C;   --palette-teal-d:#5CC3CF;
  --palette-brown-600:#8C5A3C;  --palette-brown-d:#D19A78;
  --palette-pink-600:#B4467A;   --palette-pink-d:#E68AB5;
  --palette-olive-600:#6B7A2E;  --palette-olive-d:#AAB86A;
  /* 透明叠加 */
  --palette-overlay:rgba(15,18,24,.45); --palette-overlay-d:rgba(0,0,0,.6);
  --palette-shadow:31,35,41;            /* rgb 分量，供 rgba() 使用 */
}

/* 1.2 语义令牌 · 浅色（默认） */
:root{
  color-scheme:light;

  /* 背景与文字 */
  --color-bg:var(--palette-n-25);
  --color-bg-card:var(--palette-n-0);
  --color-bg-hover:var(--palette-n-50);
  --color-bg-active:var(--palette-n-100);
  --color-bg-raised:var(--palette-n-0);
  --color-fg:var(--palette-n-900);
  --color-fg-secondary:var(--palette-n-600);
  --color-fg-muted:var(--palette-n-500);
  --color-fg-on-primary:var(--palette-n-0);
  --color-v1-fg-muted:var(--palette-n-450);   /* 仅供 data-spec="v1" 引用 */

  /* 边框 */
  --color-border:var(--palette-n-150);
  --color-border-subtle:var(--palette-n-75);
  --color-border-strong:var(--palette-n-400);
  --color-scrollbar:var(--palette-n-250);

  /* 语义色 */
  --color-primary:var(--palette-blue-600);
  --color-primary-hover:var(--palette-blue-700);
  --color-primary-bg:var(--palette-blue-50);
  --color-primary-border:var(--palette-blue-200);
  --color-ai:var(--palette-violet-600);
  --color-ai-hover:var(--palette-violet-700);
  --color-ai-bg:var(--palette-violet-50);
  --color-ok:var(--palette-green-700);
  --color-ok-bg:var(--palette-green-50);
  --color-warn:var(--palette-orange-700);
  --color-warn-bg:var(--palette-orange-50);
  --color-err:var(--palette-red-600);
  --color-err-hover:var(--palette-red-700);
  --color-err-bg:var(--palette-red-50);
  --color-neutral:var(--palette-n-600);
  --color-neutral-bg:var(--palette-n-75);
  --color-star:var(--palette-star);
  --color-overlay:var(--palette-overlay);

  /* 真实性标记 tm-*（D1、D2） */
  --tm-fill-fg:var(--palette-yellow-800);   --tm-fill-bg:var(--palette-yellow-100);
  --tm-num-fg:var(--palette-red-600);       --tm-num-bg:var(--palette-red-50);

  /* 图表 */
  --viz-1:var(--palette-blue-600);
  --viz-2:var(--palette-slate-600);
  --viz-3:var(--palette-teal-600);
  --viz-4:var(--palette-brown-600);
  --viz-5:var(--palette-pink-600);
  --viz-6:var(--palette-olive-600);

  /* 阴影 */
  --shadow-1:0 1px 2px rgba(var(--palette-shadow),.06);
  --shadow-2:0 1px 2px rgba(var(--palette-shadow),.04),0 4px 16px rgba(var(--palette-shadow),.06);
  --shadow-3:0 8px 32px rgba(var(--palette-shadow),.16);
  --shadow-up:0 -4px 12px rgba(var(--palette-shadow),.06);
}

/* 1.3 语义令牌 · 深色（两段必须逐字一致：prefers-color-scheme 段 与 data-theme 段） */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --color-bg:var(--palette-d-0);
  --color-bg-card:var(--palette-d-50);
  --color-bg-hover:var(--palette-d-75);
  --color-bg-active:var(--palette-d-100);
  --color-bg-raised:var(--palette-d-80);
  --color-fg:var(--palette-d-900);
  --color-fg-secondary:var(--palette-d-600);
  --color-fg-muted:var(--palette-d-500);
  --color-fg-on-primary:var(--palette-blue-d-on);
  --color-v1-fg-muted:var(--palette-d-500);
  --color-border:var(--palette-d-150);
  --color-border-subtle:var(--palette-d-90);
  --color-border-strong:var(--palette-d-400);
  --color-scrollbar:var(--palette-d-250);
  --color-primary:var(--palette-blue-d-fg);
  --color-primary-hover:var(--palette-blue-d-h);
  --color-primary-bg:var(--palette-blue-d-bg);
  --color-primary-border:var(--palette-blue-d-line);
  --color-ai:var(--palette-violet-d-fg);
  --color-ai-hover:var(--palette-violet-d-h);
  --color-ai-bg:var(--palette-violet-d-bg);
  --color-ok:var(--palette-green-d-fg);
  --color-ok-bg:var(--palette-green-d-bg);
  --color-warn:var(--palette-orange-d-fg);
  --color-warn-bg:var(--palette-orange-d-bg);
  --color-err:var(--palette-red-d-fg);
  --color-err-hover:var(--palette-red-d-h);
  --color-err-bg:var(--palette-red-d-bg);
  --color-neutral:var(--palette-d-600);
  --color-neutral-bg:var(--palette-d-90);
  --color-star:var(--palette-star-d);
  --color-overlay:var(--palette-overlay-d);
  --tm-fill-fg:var(--palette-yellow-d-fg);  --tm-fill-bg:var(--palette-yellow-d-bg);
  --tm-num-fg:var(--palette-red-d-fg);      --tm-num-bg:var(--palette-red-d-bg);
  --viz-1:var(--palette-blue-d-fg);
  --viz-2:var(--palette-slate-d);
  --viz-3:var(--palette-teal-d);
  --viz-4:var(--palette-brown-d);
  --viz-5:var(--palette-pink-d);
  --viz-6:var(--palette-olive-d);
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.3);
  --shadow-3:0 8px 32px rgba(0,0,0,.5);
  --shadow-up:0 -4px 12px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:var(--palette-d-0);
  --color-bg-card:var(--palette-d-50);
  --color-bg-hover:var(--palette-d-75);
  --color-bg-active:var(--palette-d-100);
  --color-bg-raised:var(--palette-d-80);
  --color-fg:var(--palette-d-900);
  --color-fg-secondary:var(--palette-d-600);
  --color-fg-muted:var(--palette-d-500);
  --color-fg-on-primary:var(--palette-blue-d-on);
  --color-v1-fg-muted:var(--palette-d-500);
  --color-border:var(--palette-d-150);
  --color-border-subtle:var(--palette-d-90);
  --color-border-strong:var(--palette-d-400);
  --color-scrollbar:var(--palette-d-250);
  --color-primary:var(--palette-blue-d-fg);
  --color-primary-hover:var(--palette-blue-d-h);
  --color-primary-bg:var(--palette-blue-d-bg);
  --color-primary-border:var(--palette-blue-d-line);
  --color-ai:var(--palette-violet-d-fg);
  --color-ai-hover:var(--palette-violet-d-h);
  --color-ai-bg:var(--palette-violet-d-bg);
  --color-ok:var(--palette-green-d-fg);
  --color-ok-bg:var(--palette-green-d-bg);
  --color-warn:var(--palette-orange-d-fg);
  --color-warn-bg:var(--palette-orange-d-bg);
  --color-err:var(--palette-red-d-fg);
  --color-err-hover:var(--palette-red-d-h);
  --color-err-bg:var(--palette-red-d-bg);
  --color-neutral:var(--palette-d-600);
  --color-neutral-bg:var(--palette-d-90);
  --color-star:var(--palette-star-d);
  --color-overlay:var(--palette-overlay-d);
  --tm-fill-fg:var(--palette-yellow-d-fg);  --tm-fill-bg:var(--palette-yellow-d-bg);
  --tm-num-fg:var(--palette-red-d-fg);      --tm-num-bg:var(--palette-red-d-bg);
  --viz-1:var(--palette-blue-d-fg);
  --viz-2:var(--palette-slate-d);
  --viz-3:var(--palette-teal-d);
  --viz-4:var(--palette-brown-d);
  --viz-5:var(--palette-pink-d);
  --viz-6:var(--palette-olive-d);
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.3);
  --shadow-3:0 8px 32px rgba(0,0,0,.5);
  --shadow-up:0 -4px 12px rgba(0,0,0,.35);
}

/* 1.4 与主题无关的令牌（引用语义色，深浅色自动跟随） */
:root{
  /* 衍生色 */
  --color-info:var(--color-primary);
  --color-info-bg:var(--color-primary-bg);
  --color-link:var(--color-primary);
  --color-selected-bg:color-mix(in srgb,var(--color-primary-bg) 45%,var(--color-bg-card));

  /* 表面层级：由容器重设，组件只读 --surface* */
  --surface:var(--color-bg);
  --surface-sunken:var(--color-bg-card);
  --surface-raised:var(--color-bg-raised);

  /* 真实性标记：引用型（随主题自动变化） */
  --tm-fill-border:transparent; --tm-num-border:transparent;
  --tm-cite-fg:var(--color-primary);  --tm-cite-bg:var(--color-primary-bg);  --tm-cite-border:transparent;
  --tm-ai-fg:var(--color-ai);         --tm-ai-bg:var(--color-ai-bg);         --tm-ai-border:transparent;
  --tm-verify-fg:var(--color-warn);   --tm-verify-bg:transparent;            --tm-verify-border:var(--color-warn);
  --tm-verify-border-style:dashed;
  --tm-fill-border-style:solid; --tm-cite-border-style:solid; --tm-ai-border-style:solid; --tm-num-border-style:solid;

  /* 图表附属 */
  --viz-axis:var(--color-border);
  --viz-grid:var(--color-border-subtle);
  --viz-empty:var(--color-border-strong);   /* 零值/缺失：虚线描边 + 必须配文字 */

  /* 字体 */
  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,"Microsoft YaHei",monospace;
  --font-serif:"Noto Serif SC","Songti SC","SimSun",serif;

  /* 字号 9 档（新代码禁止半像素） */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:15px;
  --fs-xl:16px;  --fs-2xl:18px; --fs-3xl:20px; --fs-4xl:22px;

  /* 行高 */
  --lh-none:1; --lh-tight:1.3; --lh-snug:1.5; --lh-base:1.6; --lh-relaxed:1.8; --lh-reading:1.9;

  /* 字重 */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* 间距刻度（按像素命名；14/18/22 只出现在语义间距里） */
  --space-0:0; --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px;
  --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px;
  --space-32:32px; --space-40:40px; --space-48:48px;
  /* 语义间距（密度可调） */
  --pad-pane:20px 24px; --pad-pane-left:16px 12px; --pad-pane-x:24px;
  --pad-card:16px 18px; --pad-sec:18px 20px; --pad-dialog:16px 18px;
  --gap-stack:14px;

  /* 圆角 */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:10px;
  --radius-pill:999px; --radius-round:50%;

  /* 层级（<dialog showModal> 与 [popover] 在浏览器顶层，不参与 z-index） */
  --z-base:0; --z-sticky:10; --z-topbar:20; --z-dropdown:30; --z-float:40;
  --z-drawer:50; --z-toast:70; --z-skip:90;

  /* 动效 */
  --dur-fast:.12s; --dur-base:.2s; --dur-slow:.4s; --dur-spin:.8s;
  --ease-std:ease; --ease-out:cubic-bezier(.2,0,0,1); --ease-linear:linear;

  /* 尺寸 */
  --ctl-h-xs:24px; --ctl-h-sm:28px; --ctl-h-md:36px; --ctl-h-lg:44px;
  --icon-xs:12px; --icon-sm:14px; --icon-md:16px; --icon-lg:20px;
  --touch-min:24px; --touch-coarse:44px;
  --topbar-h:56px; --pane-l:260px; --pane-r:360px; --pane-l-md:240px;
  --w-narrow:440px; --w-form:640px; --w-reading:760px; --w-wide:1200px;
  --doc-aside-w:220px; --doc-side-w:280px;

  /* 焦点不被遮挡（D15：固定值，页面可在 :root 覆盖） */
  --pane-head-h:64px;
  --action-bar-h:76px;   /* 无 .pr-foot 的页面在 :root 设为 0px */

  /* 透明度 */
  --op-disabled:.45; --op-stale:.6;

  /* 聚焦 */
  --focus-outline:2px solid var(--color-primary);
  --focus-ring:0 0 0 3px var(--color-primary-bg);
  --focus-ring-err:0 0 0 3px var(--color-err-bg);

  /* 断点（仅供 JS 读取：getComputedStyle(document.documentElement).getPropertyValue('--bp-sm')） */
  --bp-xs:420px; --bp-sm:760px; --bp-md:1180px; --bp-lg:1400px;

  /* ---- 旧令牌别名（v2.x 保留，v3.0 移除；新代码不得使用） ---- */
  --bg:var(--color-bg); --card:var(--color-bg-card); --hover:var(--color-bg-hover);
  --line:var(--color-border); --line2:var(--color-border-subtle);
  --line-strong:var(--color-border-strong);
  --t1:var(--color-fg); --t2:var(--color-fg-secondary); --t3:var(--color-fg-muted);
  --primary:var(--color-primary); --primary-h:var(--color-primary-hover);
  --primary-bg:var(--color-primary-bg); --primary-line:var(--color-primary-border);
  --on-primary:var(--color-fg-on-primary);
  --ai:var(--color-ai); --ai-bg:var(--color-ai-bg);
  --ok:var(--color-ok); --ok-bg:var(--color-ok-bg);
  --warn:var(--color-warn); --warn-bg:var(--color-warn-bg);
  --mock:var(--color-warn); --mock-bg:var(--color-warn-bg);
  --err:var(--color-err); --err-bg:var(--color-err-bg);
  --selected-bg:var(--color-selected-bg);
  --shadow:var(--shadow-2); --ring:var(--focus-ring);
  --sans:var(--font-sans); --mono:var(--font-mono); --serif:var(--font-serif);
  --top:var(--topbar-h);
}

/* 1.5 v1 对比段（只覆盖用户裁定的 4 项；放在深色段之后，同特异性后写优先） */
:root[data-spec="v1"]{
  /* ① 弱文字 */
  --color-fg-muted:var(--color-v1-fg-muted);
  /* ② 表单控件边框 = 普通边框 */
  --color-border-strong:var(--color-border);
  /* ③ 【待核实】退回待填黄 */
  --tm-verify-fg:var(--tm-fill-fg);
  --tm-verify-bg:var(--tm-fill-bg);
  --tm-verify-border:var(--tm-fill-border);
  --tm-verify-border-style:var(--tm-fill-border-style);
  /* ④ 字号回到旧值（近似复原，见 TOKENS.md §字号） */
  --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:15px;
  --fs-xl:16px;  --fs-2xl:19px; --fs-3xl:20px; --fs-4xl:22px;
}

} /* end @layer tokens */


/* ==========================================================================
   2. BASE（Reboot 级）
   ========================================================================== */
@layer base {

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;accent-color:var(--color-primary);
  scrollbar-color:var(--color-scrollbar) transparent;height:100%}
:where(*){scrollbar-width:thin}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:var(--font-sans);
  font-size:var(--fs-md);line-height:var(--lh-base);
  overflow-wrap:break-word;line-break:strict}
[hidden]{display:none!important}

/* 标题与文本 */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--fw-semibold);line-height:var(--lh-tight);text-wrap:balance}
h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-md)}
h4,h5,h6{font-size:var(--fs-sm)}
p,dl,dd,blockquote,figure,pre{margin:0}
ul,ol{margin:0;padding-left:1.5em}
ul[role="list"],ol[role="list"]{list-style:none;padding-left:0}
small{font-size:.875em}
b,strong{font-weight:var(--fw-semibold)}
abbr[title]{text-decoration:underline dotted;cursor:help}
hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-16) 0}
::selection{background:var(--color-primary-bg)}

/* 链接 */
a{color:var(--color-link);text-underline-offset:2px}
a:hover{color:var(--color-primary-hover)}

/* 代码、按键、高亮 */
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.92em}
code{padding:0 var(--space-4);border-radius:var(--radius-sm);background:var(--color-neutral-bg)}
pre{padding:var(--space-10) var(--space-12);border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--surface-sunken);overflow:auto;line-height:var(--lh-snug)}
pre code{padding:0;background:none;font-size:inherit}
kbd{display:inline-block;padding:0 var(--space-6);min-width:1.6em;text-align:center;
  border:1px solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);
  background:var(--surface-sunken);font-size:var(--fs-xs);line-height:var(--lh-snug)}
/* mark 中性：真实性标记由组件层 mark.tm-* 覆盖 */
mark{background:var(--color-neutral-bg);color:inherit;padding:0 var(--space-2);border-radius:var(--radius-xs)}

/* 表格基础（外观变体在组件层 .table） */
table{border-collapse:collapse}
th{text-align:inherit;font-weight:var(--fw-medium)}
caption{caption-side:top;text-align:left;color:var(--color-fg-muted);font-size:var(--fs-sm);padding-bottom:var(--space-6)}

/* 图片与媒体 */
img,video,canvas{max-width:100%;height:auto}
img,svg,video,canvas{vertical-align:middle}
figure figcaption{margin-top:var(--space-6);font-size:var(--fs-sm);color:var(--color-fg-secondary)}

/* 表单基础 */
button,input,textarea,select{font:inherit;color:inherit;margin:0}
button:not(:disabled),summary,[role="button"]:not([aria-disabled="true"]){cursor:pointer}
textarea{resize:vertical}
::placeholder{color:var(--color-fg-muted);opacity:1}

/* 焦点 */
:focus-visible{outline:var(--focus-outline);outline-offset:2px}
/* 输入类用光圈表示聚焦；保留透明轮廓，让强制颜色模式下仍可见 */
:where(input,textarea,select):focus-visible{outline:2px solid transparent;outline-offset:0;box-shadow:var(--focus-ring)}
:where(input,textarea,select)[aria-invalid="true"]:focus-visible{box-shadow:var(--focus-ring-err)}

/* 长文排版容器 */
.prose{line-height:var(--lh-relaxed);color:var(--color-fg)}
.prose > * + *{margin-top:.75em}
.prose h1{font-size:var(--fs-3xl);margin-top:1.4em}
.prose h2{font-size:var(--fs-xl);margin-top:1.4em}
.prose h3{font-size:var(--fs-lg);margin-top:1.2em}
.prose h4{font-size:var(--fs-md);margin-top:1em}
.prose > :first-child{margin-top:0}
.prose li + li{margin-top:.25em}
.prose blockquote{padding-left:var(--space-12);border-left:3px solid var(--color-border);color:var(--color-fg-secondary)}
.prose a{text-decoration:underline}
.prose table{width:100%;font-size:var(--fs-sm)}
.prose th,.prose td{padding:var(--space-6) var(--space-10);border-bottom:1px solid var(--color-border-subtle);vertical-align:top}
.prose thead th{color:var(--color-fg-muted)}
/* 论文阅读变体：衬线、首行缩进、两端对齐、三线表 */
.prose-serif{font-family:var(--font-serif);font-size:var(--fs-lg);line-height:var(--lh-reading)}
.prose-serif p{text-indent:2em;text-align:justify}
.prose-serif h1,.prose-serif h2,.prose-serif h3,.prose-serif h4{font-family:var(--font-sans)}
.prose-serif table{width:auto;margin-inline:auto;font-family:var(--font-sans)}
.prose-serif th,.prose-serif td{border-bottom:1px solid var(--color-border);text-align:center}
.prose-serif thead th{border-top:1.5px solid var(--color-fg);color:var(--color-fg);font-weight:var(--fw-semibold)}
.prose-serif tbody tr:last-child td{border-bottom:1.5px solid var(--color-fg)}

/* 强制颜色模式（Windows 高对比度）：选中/当前态的底色会被系统抹掉，补轮廓 */
@media (forced-colors:active){
  :focus-visible{outline:2px solid CanvasText}
  [aria-pressed="true"],[aria-checked="true"],[aria-selected="true"],
  [aria-current]:not([aria-current="false"]){outline:2px solid Highlight;outline-offset:-2px}
  mark{border:1px solid CanvasText}
}

/* 减少动效：默认全部停止；确需保留的（如加载圈）加 data-motion="essential"，组件层改为慢速 */
@media (prefers-reduced-motion:reduce){
  *:not([data-motion="essential"]),*:not([data-motion="essential"])::before,*:not([data-motion="essential"])::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* 打印 */
@media print{
  html,body{height:auto!important;overflow:visible!important;background:none}
  .topbar,.pane-left,.pane-right,.pr-foot,.skip-link,button,.btn,.icon-btn,.action-bar{display:none!important}
  .app{display:block!important}
  .pane{overflow:visible!important;padding:0!important}
  mark{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--fs-xs);color:var(--color-fg-secondary)}
  .prose,.prose-serif{orphans:3;widows:3}
}

} /* end @layer base */


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
@layer layout {

/* 3.1 页面根类 */
body.layout-app{height:100%;display:flex;flex-direction:column;overflow:hidden}
body.layout-doc{min-height:100%;display:flex;flex-direction:column}
body.layout-doc > main{flex:1;padding:var(--space-24) 0 var(--space-48)}
body.layout-center{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.layout-center > main{flex:1;display:grid;place-items:center;padding:var(--space-24) var(--space-16)}
body.layout-center > main > *{width:100%;max-width:var(--w-narrow)}

/* 3.2 顶栏（结构，所有布局通用） */
.topbar{height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:var(--space-20);padding:0 var(--space-20);
  background:var(--color-bg-card);border-bottom:1px solid var(--color-border);position:relative;z-index:var(--z-topbar);
  --surface:var(--color-bg-card);--surface-sunken:var(--color-bg)}
.brand{display:flex;align-items:center;gap:var(--space-10);font-weight:var(--fw-bold);font-size:var(--fs-xl);white-space:nowrap;text-decoration:none;color:var(--color-fg)}
.brand:hover{color:var(--color-fg)}
.brand-mark{width:30px;height:30px;border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-fg-on-primary);display:grid;place-items:center;font-size:var(--fs-lg)}
.brand small{font-weight:var(--fw-regular);font-size:var(--fs-xs);color:var(--color-fg-muted)}
.steps{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--space-8);list-style:none;margin:0;padding:0;min-width:0}
.steps li{display:flex;align-items:center;gap:var(--space-8);color:var(--color-fg-muted);font-size:var(--fs-sm);white-space:nowrap}
.steps li + li::before{content:"";width:40px;height:1px;background:var(--color-border)}
.steps .no{width:22px;height:22px;border-radius:var(--radius-round);border:1.5px solid var(--color-border);display:grid;place-items:center;font-size:var(--fs-xs);font-family:var(--font-mono)}
.steps li[aria-current="step"],.steps li.cur{color:var(--color-fg);font-weight:var(--fw-semibold)}
.steps li[aria-current="step"] .no,.steps li.cur .no{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-fg-on-primary)}
.steps li.is-done,.steps li.done{color:var(--color-fg-secondary)}
.steps li.is-done .no,.steps li.done .no{border-color:var(--color-ok);color:var(--color-ok);background:var(--color-ok-bg)}
.steps li.is-done + li::before,.steps li.done + li::before,
.steps li[aria-current="step"] + li::before,.steps li.cur + li::before{background:var(--color-primary-border)}
.top-actions{display:flex;align-items:center;gap:var(--space-8)}

/* 3.3 应用壳 .app（三栏；grid-template-areas 让 DOM 顺序与视觉顺序解耦） */
.app{flex:1;min-height:0;display:grid;
  grid-template-columns:var(--lw,var(--pane-l)) minmax(0,1fr) var(--rw,var(--pane-r));
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"left main right"}
.app.app-2{grid-template-columns:var(--lw,var(--pane-l)) minmax(0,1fr);grid-template-areas:"left main"}
.app.app-2r{grid-template-columns:minmax(0,1fr) var(--rw,var(--pane-r));grid-template-areas:"main right"}
.pane-left{grid-area:left}
.pane-main{grid-area:main}       /* 可选；不写时中栏自动落入 main 区 */
.pane-right{grid-area:right}

/* 3.4 栏 */
.pane{min-height:0;overflow-y:auto;padding:var(--pad-pane);scrollbar-gutter:stable;
  --surface:var(--color-bg);--surface-sunken:var(--color-bg-card)}
.pane-left{background:var(--color-bg-card);border-right:1px solid var(--color-border);padding:var(--pad-pane-left);
  --surface:var(--color-bg-card);--surface-sunken:var(--color-bg)}
.pane-right{min-height:0;background:var(--color-bg-card);border-left:1px solid var(--color-border);display:flex;flex-direction:column;padding:0;
  --surface:var(--color-bg-card);--surface-sunken:var(--color-bg)}
.pane-right .pr-body{flex:1;overflow-y:auto;padding:var(--space-20);scrollbar-gutter:stable}
.pane-right .pr-foot{flex:none;padding:var(--space-16) var(--space-20);border-top:1px solid var(--color-border);background:var(--color-bg-card)}
/* 中栏“固定头 + 内容 + 固定底”结构 */
.pane-flush{padding:0;display:flex;flex-direction:column;
  scroll-padding-top:var(--pane-head-h);scroll-padding-bottom:var(--pane-head-h)}
.pane-head{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface);
  padding:18px var(--pad-pane-x) var(--space-12);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-10)}
.pane-head h1{font-size:var(--fs-2xl)}
.pane-body{flex:1;padding:0 var(--pad-pane-x) var(--space-24)}
.pane-foot{position:sticky;bottom:0;z-index:var(--z-sticky);background:var(--surface);
  border-top:1px solid var(--color-border);padding:var(--space-10) var(--pad-pane-x) 14px}
/* 栏内分组与小标题（D6） */
.side-sec{margin:0 var(--space-8) var(--space-20)}
.eyebrow,.pane-title{font-size:var(--fs-xs);color:var(--color-fg-muted);font-weight:var(--fw-medium);letter-spacing:.04em;margin:0 0 var(--space-8)}

/* 3.5 文档布局 */
.container{width:100%;max-width:var(--container-w,var(--w-wide));margin-inline:auto;padding-inline:var(--space-24)}
.container-reading{--container-w:var(--w-reading)}
.container-form{--container-w:var(--w-form)}
.container-narrow{--container-w:var(--w-narrow)}
.doc-grid{display:grid;gap:var(--space-32);align-items:start;
  grid-template-columns:var(--doc-aside-w) minmax(0,1fr);grid-template-areas:"aside main"}
.doc-grid.doc-grid-3{grid-template-columns:var(--doc-aside-w) minmax(0,1fr) var(--doc-side-w);grid-template-areas:"aside main side"}
.doc-main{grid-area:main;min-width:0}
.doc-aside{grid-area:aside;position:sticky;top:var(--space-16);max-height:calc(100vh - var(--space-32));overflow-y:auto}
.doc-side{grid-area:side;position:sticky;top:var(--space-16)}

/* 3.6 网格 */
.grid{--_cols:var(--cols,2);display:grid;gap:var(--grid-gap,var(--space-12));grid-template-columns:repeat(var(--_cols),minmax(0,1fr))}
.grid-auto{display:grid;gap:var(--grid-gap,var(--space-12));grid-template-columns:repeat(auto-fill,minmax(min(var(--min,200px),100%),1fr))}

/* 3.7 断点 */
/* lg ≤1400 */
@media (max-width:1400px){
  .grid{--_cols:var(--cols-lg,var(--cols,2))}
}
/* md ≤1180：整页滚动；右栏下移；主操作吸底（P0 第 11 项） */
@media (max-width:1180px){
  html{height:auto;scroll-padding-bottom:calc(var(--action-bar-h) + env(safe-area-inset-bottom))}
  body.layout-app{height:auto;overflow:visible}
  .app{grid-template-columns:var(--lw-md,var(--pane-l-md)) minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"left main" "right right"}
  .app.app-2r{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "right"}
  .pane{overflow:visible}
  .pane-right{border-left:0;border-top:1px solid var(--color-border);padding-bottom:var(--action-bar-h)}
  .pane-right .pr-body{overflow:visible}
  .pane-right .pr-foot{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float);
    padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom));box-shadow:var(--shadow-up)}
  .pane-head,.pane-foot{position:static}
  .grid{--_cols:var(--cols-md,var(--cols-lg,var(--cols,2)))}
  .doc-grid,.doc-grid.doc-grid-3{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "aside" "side"}
  .doc-aside,.doc-side{position:static;max-height:none}
}
/* sm ≤760：单列 */
@media (max-width:760px){
  .topbar{gap:var(--space-10);padding:0 var(--space-16)}
  .brand small,.steps .lbl{display:none}
  .steps li + li::before{width:16px}
  .app,.app.app-2,.app.app-2r{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "main" "right"}
  .app.app-2r{grid-template-areas:"main" "right"}
  .app.app-main-first{grid-template-areas:"main" "right" "left"}
  .pane{padding:var(--space-16)}
  .pane-left{border-right:0;border-bottom:1px solid var(--color-border)}
  .pane-flush{padding:0}
  .pane-head,.pane-body,.pane-foot{padding-left:var(--space-16);padding-right:var(--space-16)}
  .container{padding-inline:var(--space-16)}
  .grid{--_cols:var(--cols-sm,1)}
}
/* xs ≤420：顶栏极简 */
@media (max-width:420px){
  .steps,.steps li{gap:var(--space-4)}
  .steps li + li::before{width:8px}
  .brand{font-size:0;gap:0}
  .brand-mark{font-size:var(--fs-lg)}
}

} /* end @layer layout */


/* ==========================================================================
   4. UTILITIES（u- 前缀；同一组合出现 ≥2 处就应升级为组件）
   ========================================================================== */
@layer utilities {

.u-sp,.sp{flex:1}
.u-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--space-8))}
.u-stack{display:flex;flex-direction:column;gap:var(--gap,var(--space-8))}
.u-gap-4{--gap:var(--space-4)} .u-gap-6{--gap:var(--space-6)} .u-gap-8{--gap:var(--space-8)}
.u-gap-12{--gap:var(--space-12)} .u-gap-16{--gap:var(--space-16)}
.u-mt-0{margin-top:0} .u-mt-8{margin-top:var(--space-8)} .u-mt-16{margin-top:var(--space-16)}
.u-mb-0{margin-bottom:0} .u-mb-8{margin-bottom:var(--space-8)} .u-mb-16{margin-bottom:var(--space-16)}
.u-muted,.muted{color:var(--color-fg-muted)}
.u-mono,.mono{font-family:var(--font-mono)}
.u-tnum{font-variant-numeric:tabular-nums}
.u-nowrap{white-space:nowrap}
.u-break{overflow-wrap:anywhere}
.u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.u-clamp-2,.u-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.u-clamp-2{-webkit-line-clamp:2;line-clamp:2}
.u-clamp-3{-webkit-line-clamp:3;line-clamp:3}
.u-scroll-x{overflow-x:auto;scrollbar-width:thin}   /* 必须同时写 tabindex="0" role="region" aria-label */
.u-sr-only,.sr-only,
.u-sr-only-focusable:not(:focus):not(:focus-within){position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1180px){.u-hide-md{display:none}}
@media (max-width:760px){.u-hide-sm{display:none}}
@media (min-width:761px){.u-only-sm{display:none}}

/* 跳转链接：<body> 第一个元素；主内容 id="main" tabindex="-1" */
.skip-link{position:absolute;left:var(--space-8);top:var(--space-8);z-index:var(--z-skip);
  padding:var(--space-8) var(--space-16);border-radius:var(--radius-md);background:var(--color-bg-raised);
  color:var(--color-link);box-shadow:var(--shadow-2);transform:translateY(-200%)}
.skip-link:focus{transform:none}

} /* end @layer utilities */