/* Cucao Quant · Design System v6 —— Precision Instrument
   ⚠️ 本文件的「为什么这么改」注释已移到同级 assets/ds.notes.md（P-01）。
      理由：ds.css 是四个页面唯一的阻塞样式表，11.7 KB 注释在 gzip 之后仍占
      7 KB —— 差不多把这张表的传输体积翻一倍，而它们只对改代码的人有用。
      ds.notes.md 按本文件的出现顺序编号，正文带锚点与注释对象，可用选择器检索。
      改动任何规则前先看一眼对应条目。**改动后请同步更新那份文件**。 */


/* ---------- 1. 字体 / 排版 Token（移动优先基线 320px） ----------*/
:root {
  
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei",
    "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  
  --fs-micro:  0.6875rem;  /* 11px 仅用于全大写微标签，禁用正文*/
  --fs-label:  0.75rem;    /* 12px 移动最小可读下限*/
  --fs-caption:0.8125rem;  /* 13px 辅助说明 / 次要表格列*/
  --fs-ui:     0.875rem;   /* 14px 控件、按钮、表单标签*/
  --fs-body:   0.9375rem;  /* 15px 移动端正文*/
  --fs-body-lg:1.0625rem;  /* 17px 移动端导语*/
  --fs-h4:     1rem;       /* 16px*/
  --fs-h3:     1.125rem;   /* 18px*/
  --fs-h2:     1.375rem;   /* 22px*/
  --fs-h1:     1.75rem;    /* 28px*/
  --fs-display:clamp(2.125rem, 7.5vw, 3.75rem);
  
  --fs-panel:  1.0625rem;  
  --fs-metric: 1.5rem;     /* 24px KPI 数值（桌面 28px）*/

  
  --lh-tight:   1.18;  /* 标题、大字数值*/
  --lh-snug:    1.35;  /* 小标题、表头*/
  --lh-ui:      1.45;  /* 按钮、控件、标签*/
  --lh-body:    1.65;  /* 正文*/
  --lh-relaxed: 1.75;  /* 导语、长段落*/

  /* 字距：字号越小越松，大字收紧*/
  --ls-caps:  0.1em;    /* 全大写微标签*/
  --ls-wide:  0.04em;
  --ls-normal:0;
  --ls-snug: -0.01em;
  --ls-tight:-0.022em;  /* ≥22px 标题*/

  
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  /* 间距 8px 基线*/
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;

  
  --gap-card:  12px;  /* 卡片 / 网格单元间距（桌面 16px）*/
  --gap-block: 24px;  /* 区块间距（桌面 32px）*/
  --pad-card:  20px;  /* 卡片内边距（桌面 24px）*/
  --pad-panel: 20px;  /* 面板内边距（桌面 24px）*/
  --pad-cell:  12px;  

  --r-xs:2px; --r-sm:3px; --r-md:6px; --r-lg:10px; --r-xl:16px; --r-pill:999px;

  --bw:1px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:120ms; --t-base:180ms; --t-slow:280ms;

  --z-sticky:100; --z-nav:200; --z-modal:400; --z-toast:600;

  
  --touch:44px;
  --navh:56px;          /* 移动端底部 Tab 栏高度*/
  --safe-b:env(safe-area-inset-bottom, 0px);

  /* 容器宽度*/
  --w-container:1200px; --w-narrow:760px; --w-wide:1440px;
  --pad-x:var(--sp-4);  /* 移动端左右安全边距*/

  /* ---- v5 兼容别名：旧名 -> 新规范 ----*/
  --fs-2xs:var(--fs-label);
  --fs-xs: var(--fs-caption);
  --fs-sm: var(--fs-ui);
  --fs-base:var(--fs-ui);
  --fs-md: var(--fs-h4);
  --fs-lg: var(--fs-h3);
  --fs-xl: 1.25rem;
  --fs-2xl:1.5rem;
  --fs-3xl:2rem;
  --fs-4xl:var(--fs-display);
  --lh-normal:  var(--lh-ui);
  --lh-loose:   var(--lh-relaxed);
  --lh-none:    1;
  --fw-normal:  var(--fw-regular);
  --fw-bold:    var(--fw-semibold);
  --ls-widealt: var(--ls-wide);
}

/* ---------- 2. 主题 A：paper（浅色纸感 / 公开层：首页、登录、文档） ----------*/
:root,
[data-theme="paper"] {
  color-scheme: light;
  --bg:            #F5F4F0;  /* 页面底色*/
  --bg-alt:        #F2F0EA;  /* 次级区块底*/
  --surface:       #FBFAF8;  /* 卡片，最亮*/
  --surface-2:     #F1EFE9;  /* 悬浮行 / 表头*/
  --surface-sunken:#EDEAE3;  /* 凹陷槽 / 进度轨，最深*/
  --line:          #DEDACF;  /* 装饰分隔线，不承载可辨识信息，无需 3:1*/
  --border:        #8B8577;  /* 控件描边 3.06:1（WCAG 1.4.11 ≥3）*/
  --line-strong:   var(--border);
  
  --text-hi:       #141821;  /* 15.45:1 最苛刻底面*/
  --text:          #313845;  /* 10.25:1 正文*/
  --text-mid:      #4C5563;  /*  6.55:1 次级正文*/
  --text-dim:      #505967;  /*  6.16:1 标签/注释*/
  --accent:        #775925;  /*  5.64:1 主色·黄铜，作文字用*/
  --accent-fill:   #8A6A2F;  
  --accent-hi:     #6D521F;  
  --accent-tint:   #F0E7D4;
  --secondary:     #355F79;  /*  5.96:1 辅助色·钢蓝*/
  --up:            #136239;  /*  6.44:1 盈利*/
  --down:          #9E2F28;  /*  6.32:1 亏损*/
  --warn:          #7A5A10;  /*  5.54:1 警告*/
  --info:          #2A5C7A;  /*  6.28:1 提示*/
  --focus:         #775925;  /* 焦点环 5.64–6.93:1*/

  
  --elev-1: 0 1px 2px rgba(20,24,33,.05), 0 2px 6px rgba(20,24,33,.045);
  --elev-2: 0 2px 4px rgba(20,24,33,.06), 0 8px 20px rgba(20,24,33,.07);
  
  --surface-raised:#FFFFFF;
  --surface-hover: #F5F2EA;  /* 行悬停，9.90:1 / dim 5.25:1*/
  --shadow-1: var(--elev-1);
  --shadow-2: 0 2px 8px rgba(20,24,33,.07), 0 1px 2px rgba(20,24,33,.05);
  --shadow-3: 0 12px 32px rgba(20,24,33,.10), 0 2px 6px rgba(20,24,33,.05);
  --grid-line: rgba(20,24,33,.05);
}

/* ---------- 3. 主题 B：instrument（深色仪器 / 会员工作台 + 管理后台） ----------*/
[data-theme="instrument"] {
  color-scheme: dark;
  --bg:            #0B0F15;
  --bg-alt:        #0E131A;
  --surface:       #121821;
  --surface-2:     #18202B;  /* 最亮背景，也是对比度最苛刻的底*/
  --surface-sunken:#0A0E13;
  --line:          #1F2733;  /* 装饰*/
  --border:        #606B7B;  /* 3.04:1（v5 --line-strong #2C3644 仅 1.46:1）*/
  --line-strong:   var(--border);
  
  --text-hi:       #EAEFF6;  /* 14.20:1*/
  --text:          #C0CAD8;  /*  9.90:1*/
  --text-mid:      #A6B1C0;  /*  7.55:1*/
  --text-dim:      #9AA5B6;  /*  6.59:1*/
  --accent:        #C9A76A;  /*  7.20:1 品牌黄铜，保留*/
  --accent-fill:   #C9A76A;
  --accent-hi:     #DDBB82;  /*  8.99:1*/
  --accent-tint:   rgba(201,167,106,.10);
  --secondary:     #8BB2CC;  /*  7.29:1*/
  --up:            #55C48C;  /*  7.55:1*/
  --down:          #E5766C;  /*  5.58:1*/
  --warn:          #D9A441;  /*  7.29:1*/
  --info:          #7FB0D0;  /*  7.05:1*/
  --focus:         #DDBB82;  /* 8.99–10.52:1*/

  /*⚠ 深色用"颜色海拔"而非阴影：黑色阴影在黑底上不可见。… → ds.notes.md#深色用-颜色海拔-而非阴影-黑色阴影 */
  --surface-raised:#161E29;
  --surface-hover: #1A2330;  /* 行悬停，text 8.88:1 / dim 5.17:1*/
  --elev-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
  --elev-2: 0 2px 6px rgba(0,0,0,.40), 0 10px 28px rgba(0,0,0,.45);
  --shadow-1: var(--elev-1);
  --shadow-2: 0 2px 10px rgba(0,0,0,.45);
  --shadow-3: 0 18px 40px rgba(0,0,0,.55);
  --grid-line: rgba(255,255,255,.03);
}

/* ---------- 4. Reset ----------*/
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-normal);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; background:none; border:none; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); text-decoration:none; -webkit-tap-highlight-color:transparent; }
ul,ol { list-style:none; }
table { border-collapse:collapse; border-spacing:0; width:100%; }
[hidden]{ display:none !important; }


.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }


:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
/* 键盘用户才显示环；鼠标点击不显示*/
:focus:not(:focus-visible) { outline:none; }

/* 跳转到主内容——仅键盘聚焦时可见*/
.skiplink {
  position:absolute; left:var(--sp-2); top:var(--sp-2); z-index:var(--z-toast);
  padding:var(--sp-2) var(--sp-4); background:var(--surface); color:var(--text-hi);
  border:var(--bw) solid var(--focus); border-radius:var(--r-sm);
  font-size:var(--fs-ui); transform:translateY(-200%);
  transition:transform var(--t-fast) var(--ease);
}
.skiplink:focus { transform:none; }

/* ---------- 5. 排版基元 ----------*/
h1,h2,h3,h4,h5 {
  color:var(--text-hi); font-weight:var(--fw-semibold);
  line-height:var(--lh-tight); letter-spacing:var(--ls-snug);
  text-wrap:balance;
}
h1 { font-size:var(--fs-h1); letter-spacing:var(--ls-tight); }
h2 { font-size:var(--fs-h2); letter-spacing:var(--ls-tight); }
h3 { font-size:var(--fs-h3); }
h4 { font-size:var(--fs-h4); }
h5 { font-size:var(--fs-ui); letter-spacing:var(--ls-wide); }
p  { line-height:var(--lh-relaxed); text-wrap:pretty; }


b, strong { font-weight:var(--fw-semibold); }

.display { font-size:var(--fs-display); font-weight:var(--fw-semibold);
  line-height:1.06; letter-spacing:-.03em; color:var(--text-hi); text-wrap:balance; }
.lede { font-size:var(--fs-body-lg); line-height:var(--lh-relaxed);
  color:var(--text-mid); max-width:60ch; }
.eyebrow { font-size:var(--fs-label); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--accent); }

.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.num  { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.pos { color:var(--up); } .neg { color:var(--down); }
.t-mid{color:var(--text-mid)} .t-dim{color:var(--text-dim)}
.t-xs{font-size:var(--fs-label)} .t-sm{font-size:var(--fs-caption)}

/* ---------- 6. 布局容器（移动优先） ----------*/
.container { width:100%; max-width:var(--w-container); margin-inline:auto; padding-inline:var(--pad-x); }
.container--narrow { max-width:var(--w-narrow); }
.stack { display:flex; flex-direction:column; gap:var(--sp-6); }
.stack--tight { gap:var(--sp-3); }
.row { display:flex; align-items:center; gap:var(--sp-3); }
.row--between { justify-content:space-between; }
.row--wrap { flex-wrap:wrap; }


.grid { display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
.grid--2,.grid--3 { grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:640px) {
  .grid--2,.grid--3 { grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
}
@media (min-width:1024px) {
  .grid { gap:var(--sp-6); }
  .grid--2 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(3,1fr); }
  .grid--2,.grid--3 { gap:var(--sp-6); }
}


.hr { height:1px; background:var(--line); border:0; }
.section { padding-block:var(--sp-12); }
.section--tight { padding-block:var(--sp-8); }

.techgrid {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ---------- 7. 按钮 ----------*/
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--touch); padding:0 var(--sp-5);
  font-size:var(--fs-ui); font-weight:var(--fw-medium); line-height:var(--lh-ui);
  letter-spacing:var(--ls-normal);
  border-radius:var(--r-sm); border:var(--bw) solid transparent;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  white-space:nowrap; user-select:none;
}
.btn:active:not(:disabled){ transform:translateY(.5px); }
/*⚠ 真·不可用（如未填完表单）：完全不可交互… → ds.notes.md#真-不可用-如未填完表单-完全不可 */
.btn:disabled { opacity:.45; pointer-events:none; }

@keyframes spin { to { transform:rotate(360deg); } }
.btn[aria-busy="true"] { pointer-events:none; }
.btn[aria-busy="true"]::before {
  content:""; display:inline-block; width:12px; height:12px; margin-right:6px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  vertical-align:-1px; animation:spin .7s linear infinite; }
/*⚠ 保留 pointer-events，否则 title 提示悬浮不出来… → ds.notes.md#保留-pointer-events */
.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.btn--primary { background:var(--text-hi); color:var(--bg); }
[data-theme="instrument"] .btn--primary { background:var(--accent); color:#1A1408; }
.btn--primary:hover { filter:brightness(1.12); }
.btn--accent { background:var(--accent-fill); color:#FFFDF7; }
[data-theme="instrument"] .btn--accent { background:var(--accent); color:#1A1408; }
.btn--accent:hover { background:var(--accent-hi); }
.btn--ghost { border-color:var(--border); color:var(--text-hi); }
.btn--ghost:hover { background:var(--surface-2); border-color:var(--accent); }
.btn--quiet { color:var(--text-mid); padding-inline:var(--sp-3); }
.btn--quiet:hover { color:var(--text-hi); background:var(--surface-2); }
.btn--danger { border-color:var(--down); color:var(--down); }
.btn--danger:hover { background:color-mix(in srgb, var(--down) 12%, transparent); }
.btn--sm { min-height:32px; padding:0 var(--sp-3); font-size:var(--fs-caption); border-radius:var(--r-xs); }
.btn--lg { min-height:52px; padding:0 var(--sp-6); font-size:var(--fs-h4); }
.btn--block { width:100%; }

/* ---------- 8. 表单 ----------*/
.field { display:flex; flex-direction:column; gap:var(--sp-2); }
.label { font-size:var(--fs-ui); font-weight:var(--fw-medium); line-height:var(--lh-ui); color:var(--text-hi); }
.label__hint { font-weight:var(--fw-regular); color:var(--text-dim); }
.input, .select, .textarea {
  width:100%; min-height:var(--touch); padding:var(--sp-2) var(--sp-3);
  background:var(--surface); color:var(--text-hi);
  border:var(--bw) solid var(--border); border-radius:var(--r-sm);
  
  font-size:16px; line-height:var(--lh-ui);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height:96px; padding:var(--sp-3); resize:vertical; }
.input::placeholder { color:var(--text-dim); opacity:1; }
.input:hover, .select:hover { border-color:var(--accent); }
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input[aria-invalid="true"] { border-color:var(--down); }
.input[aria-invalid="true"]:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--down) 22%, transparent); }
.input--mono { font-family:var(--font-mono); letter-spacing:.04em; }
.helptext { font-size:var(--fs-caption); line-height:var(--lh-ui); color:var(--text-dim); }

.footnote { padding:var(--sp-3) var(--pad-panel); border-top:var(--bw) solid var(--line);
  background:var(--surface-2); font-size:var(--fs-caption); line-height:var(--lh-ui);
  color:var(--text-dim); }
.errortext { font-size:var(--fs-caption); line-height:var(--lh-ui); color:var(--down); font-weight:var(--fw-medium); }



.check { display:flex; gap:var(--sp-3); align-items:flex-start; flex-wrap:wrap;
  min-height:var(--touch); padding-block:var(--sp-2); }
.check > label { cursor:pointer; }
label.check { cursor:pointer; }   
.check input { margin-top:5px; width:16px; height:16px; accent-color:var(--accent); flex:none; }

.switch { position:relative; width:44px; height:24px; flex:none;
  border-radius:var(--r-pill); background:var(--surface-sunken); border:var(--bw) solid var(--border);
  transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:var(--text-dim); transition:transform var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.switch[aria-checked="true"] { background:var(--accent-tint); border-color:var(--accent); }
.switch[aria-checked="true"]::after { transform:translateX(20px); background:var(--accent); }

.switch:hover { border-color:var(--accent); }
.switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.switch:disabled, .switch[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.switch:disabled:hover, .switch[aria-disabled="true"]:hover { border-color:var(--border); }

/* ---------- 9. 卡片 / 面板 ----------*/
.card { background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-md); padding:var(--pad-card); }
.card--alt { background:var(--surface-2); }
.panel { background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.panel__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) var(--pad-panel); border-bottom:var(--bw) solid var(--line); min-height:var(--touch); }

.panel__title { font-size:var(--fs-panel); font-weight:var(--fw-semibold); color:var(--text-hi);
  letter-spacing:var(--ls-snug); line-height:var(--lh-snug); }
.panel__body { padding:var(--pad-panel); }
/* T-05：这个盒子的框架与 .footnote 已经同款（padding / 上边框 / 底色），
   但此前**漏掉了文字三件套**，于是字号继承到 14px、颜色继承成 --text-mid，
   与同页 .helptext / .footnote 的 caption + --text-dim 对不上 ——
   三种说明容器"字号相同却外观各异"就是这么来的。这里补齐。 */
.panel__foot { padding:var(--sp-3) var(--pad-panel); border-top:var(--bw) solid var(--line);
  background:var(--surface-2); font-size:var(--fs-caption); line-height:var(--lh-ui);
  color:var(--text-dim); }
/*⚠ L-06：≤640px 的面板头被「标题折两行 + 长计数折两行」撑… → ds.notes.md#l-06 */
.meta-short { display:none; }
@media (max-width:639.98px) {
  .meta-full { display:none; }
  .meta-short { display:inline; }
}

.stat { padding:var(--pad-card); background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-sm); }

.stat__value .stat__unit { white-space:nowrap; }
.stat__value { text-wrap:wrap; word-break:keep-all; }

.stat--lead {
  background:var(--surface-raised); border-color:transparent;
  box-shadow:var(--elev-2); border-radius:var(--r-md);
}
.stat__label { font-size:var(--fs-label); line-height:var(--lh-ui); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--text-dim); font-weight:var(--fw-semibold); }
/*⚠ 24px/400 → 28px/600：标签与数值须在字号与字重上明… → ds.notes.md#24px-400-28px-60 */
.stat__value { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--fs-metric);
  font-weight:var(--fw-semibold);
  color:var(--text-hi); line-height:var(--lh-tight); margin-top:var(--sp-2); letter-spacing:var(--ls-tight); }
.stat__delta { font-size:var(--fs-caption); line-height:var(--lh-ui); margin-top:var(--sp-1); color:var(--text-dim); }

/* ---------- 10. 徽标 / 芯片 ----------*/
.badge { display:inline-flex; align-items:center; gap:5px; min-height:20px; padding:2px 7px;
  font-size:var(--fs-label); font-weight:var(--fw-semibold); line-height:var(--lh-ui);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  border-radius:var(--r-xs); border:var(--bw) solid var(--border); color:var(--text-mid);
  background:var(--surface-2); white-space:nowrap; }
.badge--up { color:var(--up); border-color:color-mix(in srgb,var(--up) 45%,transparent); background:color-mix(in srgb,var(--up) 10%,transparent); }
.badge--down { color:var(--down); border-color:color-mix(in srgb,var(--down) 45%,transparent); background:color-mix(in srgb,var(--down) 10%,transparent); }
.badge--warn { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 10%,transparent); }
.badge--info { color:var(--info); border-color:color-mix(in srgb,var(--info) 40%,transparent); background:color-mix(in srgb,var(--info) 8%,transparent); }
.badge--accent { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:var(--accent-tint); }
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.dot--pulse { animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.chip { min-height:var(--touch); padding:0 var(--sp-4); font-size:var(--fs-ui);
  border:var(--bw) solid var(--border); border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-mid);
  display:inline-flex; align-items:center; gap:6px;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip:hover { border-color:var(--accent); color:var(--text-hi); }

.chip:disabled, .chip[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.chip:disabled:hover, .chip[aria-disabled="true"]:hover { border-color:var(--border); color:var(--text-mid); }

.chip[aria-pressed="true"],
.chip[aria-checked="true"] { background:var(--accent-tint); border-color:var(--accent); color:var(--accent); font-weight:var(--fw-medium); }

/* ---------- 11. 导航 ----------*/
.nav { position:sticky; top:0; z-index:var(--z-nav); min-height:var(--navh);
  border-bottom:var(--bw) solid var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  display:flex; align-items:center; }
.nav__inner { display:flex; align-items:center; gap:var(--sp-6); width:100%;
  max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--pad-x); min-height:var(--navh); }
.brand { display:flex; align-items:center; gap:var(--sp-3); color:var(--text-hi); min-height:var(--touch); }
.brand__mark { width:26px; height:26px; flex:none; }
.brand__name { font-weight:var(--fw-semibold); font-size:var(--fs-h4); letter-spacing:var(--ls-snug); }
.brand__sub { font-size:var(--fs-micro); color:var(--text-dim); letter-spacing:var(--ls-caps); text-transform:uppercase; }
.nav__links { display:flex; align-items:center; gap:var(--sp-1); }
.nav__link { display:inline-flex; align-items:center; min-height:var(--touch); padding:0 var(--sp-3);
  font-size:var(--fs-ui); color:var(--text-mid); border-radius:var(--r-sm);
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.nav__link:hover { color:var(--text-hi); background:var(--surface-2); }
.nav__link[aria-current="page"] { color:var(--text-hi); font-weight:var(--fw-medium); }
.nav__right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }


.shell { display:grid; grid-template-columns:1fr; min-height:100dvh; }
.side { border-right:var(--bw) solid var(--line); background:var(--bg-alt); padding:var(--sp-4) var(--sp-3); display:none; }
.side__group { margin-bottom:var(--sp-6); }
.side__label { font-size:var(--fs-label); font-weight:var(--fw-semibold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--text-dim); padding:0 var(--sp-3); margin-bottom:var(--sp-2); }
.side__item { display:flex; align-items:center; gap:var(--sp-3); min-height:var(--touch); padding:0 var(--sp-3);
  font-size:var(--fs-ui); color:var(--text-mid); border-radius:var(--r-sm); margin-bottom:2px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.side__item:hover { background:var(--surface-2); color:var(--text-hi); }
.side__item[aria-current="page"] { background:var(--surface-2); color:var(--text-hi); font-weight:var(--fw-medium);
  box-shadow:inset 2px 0 0 var(--accent); }
.side__icon { width:16px; height:16px; flex:none; opacity:.9; }
.side__badge { margin-left:auto; }

.side__group--external { border-top:var(--bw) solid var(--line); padding-top:var(--sp-4); }
.side__group--external .side__item { font-size:var(--fs-caption); color:var(--text-dim); }
.side__group--external .side__item:hover { background:transparent; color:var(--text-mid);
  text-decoration:underline; text-underline-offset:3px; }
.side__group--external .side__icon { opacity:.6; }
.side__group--external .side__ext { opacity:.45; }
.main { min-width:0; display:flex; flex-direction:column; }
.main__head { padding:var(--sp-5) var(--pad-x) var(--sp-4); border-bottom:var(--bw) solid var(--line); }
.main__title { font-size:var(--fs-h2); }  /* v8 19px → 22px*/
.main__sub { font-size:var(--fs-caption); line-height:var(--lh-ui); color:var(--text-dim); margin-top:var(--sp-1); }
.main__body { padding:var(--sp-5) var(--pad-x) var(--sp-16); }

/*⚠ ---- 12. 移动端底部 Tab 栏（<1024）---- .m… → ds.notes.md#12-移动端底部-tab */
.main .mobnav {
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-nav);
  display:block;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-top:var(--bw) solid var(--line);
  padding-bottom:var(--safe-b);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
}
.main .mobnav::-webkit-scrollbar { display:none; }

.main .mobnav .tabs {
  display:flex; align-items:stretch; gap:0;
  border-bottom:0; overflow:visible;
}
/*⚠ 6 个标签必须在 320px 上全部可见，故等宽均分 + 允许折行，… → ds.notes.md#6-个标签必须在-320px-上全部 */
.main .mobnav .navtab {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--navh); padding:var(--sp-2) 3px;
  font-size:var(--fs-label); line-height:1.2; font-weight:var(--fw-medium);
  color:var(--text-dim); border-bottom:0; border-top:2px solid transparent;
  text-align:center; white-space:normal; overflow-wrap:anywhere;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.main .mobnav .navtab[aria-current="page"],
.main .mobnav .navtab[aria-selected="true"] {
  color:var(--accent); font-weight:var(--fw-semibold);
  border-top-color:var(--accent); background:var(--accent-tint);
}
.main .mobnav .navtab:active { background:var(--surface-2); }
/* 为底部栏预留空间，避免内容被遮挡*/
@media (max-width:1023.98px) {
  .main { padding-bottom:calc(var(--navh) + var(--safe-b)); }
}

.tabs { display:flex; gap:0; border-bottom:var(--bw) solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { display:inline-flex; align-items:center; gap:6px;   
  min-height:var(--touch); padding:0 var(--sp-4);
  font-size:var(--fs-ui); color:var(--text-mid);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tab:hover { color:var(--text-hi); }
.tab[aria-selected="true"] { color:var(--text-hi); font-weight:var(--fw-medium); border-bottom-color:var(--accent); }

/* ---------- 13. 表格（窄屏横向滚动 + 首列冻结） ----------*/
.tablewrap {
  overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  border:var(--bw) solid var(--line); border-radius:var(--r-md);
}
.tbl { font-size:var(--fs-caption); min-width:100%; }
.tbl th { text-align:right; font-size:var(--fs-label); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase; line-height:var(--lh-snug);
  color:var(--text-dim); padding:var(--pad-cell); border-bottom:var(--bw) solid var(--border);
  white-space:nowrap; background:var(--surface); }
.tbl th:first-child, .tbl td:first-child { text-align:left; padding-left:var(--pad-cell); }
.tbl th:last-child, .tbl td:last-child { padding-right:var(--pad-cell); }
.tbl td { text-align:right; padding:var(--pad-cell); border-bottom:var(--bw) solid var(--line);
  color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:var(--lh-ui); }
.tbl td:first-child { color:var(--text-hi); }

.tbl tbody tr:hover { background:var(--surface-hover); }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl--compact td { padding:var(--sp-2) var(--pad-cell); }

.tbl tfoot th, .tbl tfoot td {
  padding:var(--pad-cell); border-top:2px solid var(--border); border-bottom:0;
  background:var(--surface-raised); color:var(--text-hi); font-weight:var(--fw-semibold);
}


@media (max-width:1023.98px) {
  .tablewrap { position:relative; }
  .tbl th:first-child, .tbl td:first-child {
    position:sticky; left:0; z-index:2;
    background:var(--surface);
    box-shadow:1px 0 0 var(--line);
  }
  .tbl th:first-child { z-index:3; }
  /*⚠ 冻结列必须显式给背景：它是 sticky 的，透明背景会透出下方横向… → ds.notes.md#冻结列必须显式给背景-它是-stic */
  .tbl tbody tr:hover td:first-child { background:var(--surface-hover); }
}
.cell-sym { display:flex; flex-direction:column; gap:2px; }
.cell-sym__sub { font-size:var(--fs-label); color:var(--text-dim); font-family:var(--font-mono); }




.bar { height:4px; width:100%; background:var(--surface-sunken); border-radius:var(--r-pill); overflow:hidden; }
.bar__fill { height:100%; background:var(--accent); border-radius:var(--r-pill); }
.bar--up .bar__fill { background:var(--up); }
.bar--down .bar__fill { background:var(--down); }

/* ---------- 14. 提示条 / 模态 ----------*/
.alert { display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-sm);
  border:var(--bw) solid var(--border); background:var(--surface-2);
  font-size:var(--fs-caption); line-height:var(--lh-ui); }

.alert__title { font-size:inherit; font-weight:var(--fw-semibold); color:var(--text-hi);
  margin-bottom:2px; line-height:var(--lh-relaxed); letter-spacing:normal; }
.alert--warn { border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 8%,transparent); }
.alert--danger { border-color:color-mix(in srgb,var(--down) 45%,transparent); background:color-mix(in srgb,var(--down) 8%,transparent); }
.alert--info { border-color:color-mix(in srgb,var(--info) 40%,transparent); background:color-mix(in srgb,var(--info) 7%,transparent); }

.modal__scrim { position:fixed; inset:0; z-index:var(--z-modal); display:flex;
  align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55); }
.modal { width:100%; max-width:480px; background:var(--surface); border:var(--bw) solid var(--border);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-3);
  max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  animation:sheet var(--t-base) var(--ease); padding-bottom:var(--safe-b); }
@keyframes sheet { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.modal__head { padding:var(--sp-5) var(--sp-5) 0; }
.modal__body { padding:var(--sp-4) var(--sp-5); }
.modal__foot { position:sticky; bottom:0; padding:var(--sp-3) var(--sp-5);
  border-top:var(--bw) solid var(--line); background:var(--surface-2);
  display:flex; flex-direction:column-reverse; gap:var(--sp-2); }
.modal__foot > * { width:100%; }

/* ---------- 15. 图表容器 ----------*/
/*⚠ SVG <text> 字号随 SVG 缩放（720 宽的曲线在 39… → ds.notes.md#svg-text-字号随-svg */
.chart:has(svg), .panel:has(svg), .card:has(svg) { container-type:inline-size; }
:root { --svg-axis:11px; --svg-axis-hi:12px; --svg-pad:0px; }   /* 兜底：≥1000px 容器近 1:1*/


.chart-svg, .chart__svg {
  overflow:visible;
  width:calc(100% - var(--svg-pad));
  margin-left:var(--svg-pad);
}

/*⚠ 取高特异性：.chart-svg text (0,1,1) 压过内联… → ds.notes.md#取高特异性-chart-svg-t */
.chart-svg text, .chart__svg text { font-size:var(--svg-axis); }
.chart-svg .ax-txt--hi, .chart__svg .ax-txt--hi { font-size:var(--svg-axis-hi); }

@container (max-width:1000px) {
  
  svg[viewBox^="0 0 720"], svg[viewBox^="0,0,720"] { --svg-axis:12px; --svg-axis-hi:13px; }
  svg[viewBox^="0 0 320"], svg[viewBox^="0,0,320"] { --svg-axis:11px; --svg-axis-hi:12px; }
}
@container (max-width:640px) {
  svg[viewBox^="0 0 720"], svg[viewBox^="0,0,720"] { --svg-axis:18px; --svg-axis-hi:19px; }
  svg[viewBox^="0 0 320"], svg[viewBox^="0,0,320"] { --svg-axis:12px; --svg-axis-hi:13px; }
  .chart-svg, .chart__svg { --svg-pad:14px; }   /* 实测溢出 13.5px*/
}
@container (max-width:480px) {
  svg[viewBox^="0 0 720"], svg[viewBox^="0,0,720"] { --svg-axis:22px; --svg-axis-hi:24px; }
  svg[viewBox^="0 0 320"], svg[viewBox^="0,0,320"] { --svg-axis:13px; --svg-axis-hi:14px; }
  .chart-svg, .chart__svg { --svg-pad:18px; }   /* 实测溢出 17.4px*/
}
@container (max-width:380px) {
  svg[viewBox^="0 0 720"], svg[viewBox^="0,0,720"] { --svg-axis:32px; --svg-axis-hi:34px; }
  svg[viewBox^="0 0 320"], svg[viewBox^="0,0,320"] { --svg-axis:15px; --svg-axis-hi:16px; }
  .chart-svg, .chart__svg { --svg-pad:30px; }   /* 实测溢出 28.0px*/
}

.chart { width:100%; background:var(--surface); }
.chart__head { display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-4) var(--sp-4) 0; }
.chart__title { font-size:var(--fs-ui); font-weight:var(--fw-semibold); color:var(--text-hi); }
.chart__meta { font-size:var(--fs-caption); color:var(--text-dim); font-family:var(--font-mono); }
.chart__body { padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.chart__legend { display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); font-size:var(--fs-caption); color:var(--text-dim); }
.legend__sw { display:inline-block; width:12px; height:2px; background:var(--accent); margin-right:6px; vertical-align:middle; }

/* ---------- 16. 步骤 / 流程 ----------*/
.step { display:grid; grid-template-columns:28px 1fr; gap:var(--sp-4); align-items:start; }
.step__n { width:28px; height:28px; border-radius:50%; border:var(--bw) solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:var(--fs-caption); color:var(--accent); flex:none; }
.step__t { font-size:var(--fs-ui); font-weight:var(--fw-semibold); color:var(--text-hi);
  line-height:var(--lh-relaxed); letter-spacing:normal; }   /* 同 A-08，钉回 <p> 排版*/
.step__d { font-size:var(--fs-caption); line-height:var(--lh-ui); color:var(--text-mid); margin-top:var(--sp-1); }

.kv { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-caption); line-height:var(--lh-ui); }
.kv dt { color:var(--text-dim); } .kv dd { color:var(--text-hi); text-align:right; font-variant-numeric:tabular-nums; }
.empty { padding:var(--sp-12) var(--sp-4); text-align:center; color:var(--text-dim);
  font-size:var(--fs-caption); line-height:var(--lh-ui); }
.tagmono { font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text-dim);
  border:var(--bw) solid var(--line); border-radius:var(--r-xs); padding:2px 6px; background:var(--surface-2); }

/* ================= B. 渐进增强 —— 断点 360/640/768/1024/1280 =================*/


@media (min-width:360px) {
  
}

/* ---- ≥640px：流式内容两列，容器边距放大 ----*/
@media (min-width:640px) {
  :root { --pad-x:var(--sp-6); }
  .main__head { padding:var(--sp-6) var(--pad-x) var(--sp-5); }
  .main__body { padding:var(--sp-6) var(--pad-x) var(--sp-16); }
  .main .mobnav .navtab { font-size:var(--fs-caption); padding-inline:var(--sp-2); }
  .modal__foot { flex-direction:row; justify-content:flex-end; }
  .modal__foot > * { width:auto; }
  .section { padding-block:var(--sp-16); }
  .section--tight { padding-block:var(--sp-10); }
}

/* ---- ≥768px：平板，导语与 CTA 并排，模态转为居中卡片 ----*/
@media (min-width:768px) {
  .container { max-width:var(--w-container); }
  .lede { font-size:var(--fs-body-lg); }
  /*⚠ 内边距交由 --pad-card / --pad-panel 统一治… → ds.notes.md#内边距交由-pad-card */
  .modal__scrim { align-items:center; padding:var(--sp-6); }
  .modal { border-radius:var(--r-lg); max-height:86dvh; padding-bottom:0; }
  @keyframes sheet { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
  .chart__head { flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--sp-4); }
}

/* ---- ≥1024px：侧边栏回归 + 桌面信息密度 ----*/
@media (min-width:1024px) {
  :root {
    
    --fs-ui:0.875rem;    /* 14px 控件*/
    --fs-body:0.875rem;  /* 14px 正文*/
    --fs-caption:0.875rem;
    --fs-body-lg:1rem;
    --fs-h2:1.375rem;    /* 22px——页面标题*/
    --fs-h3:1.125rem;    /* 18px——补齐 18px 区段*/
    --fs-panel:1rem;     /* 16px 面板标题*/
    --fs-metric:1.75rem; /* 28px KPI 数值*/
    --lh-body:1.6;
    --pad-x:var(--sp-8);
    
    --gap-card:  16px;
    --gap-block: 32px;
    --pad-card:  24px;
    --pad-panel: 24px;
    --pad-cell:  16px;
  }
  .shell { grid-template-columns:232px 1fr; }
  .side { display:flex; flex-direction:column; }
  .main__head { padding:var(--sp-6) var(--pad-x) var(--sp-5); }
  .main__body { padding:var(--sp-6) var(--pad-x) var(--sp-16); }
  /*⚠ P-04：原先这里挂了 !important。移动端那条 .main… → ds.notes.md#p-04 */
  .main { padding-bottom:0; }
  .main .mobnav { position:static; display:none; border-top:0; padding-bottom:0; background:none; backdrop-filter:none; }
  .modal__scrim { align-items:center; }
  .btn { min-height:38px; padding:0 var(--sp-4); }
  .btn--sm { min-height:30px; }
  .btn--lg { min-height:48px; }
  .input,.select,.textarea { min-height:38px; /* 桌面无 iOS 缩放问题，回落到 13px*/
    font-size:var(--fs-ui); }
  .chip { min-height:32px; }
  .check { min-height:36px; padding-block:var(--sp-1); }
  .section { padding-block:var(--sp-20); }
  .section--tight { padding-block:var(--sp-12); }
}

/* ---- ≥1280px：宽屏，容器与栅格上限提升 ----*/
@media (min-width:1280px) {
  .shell { grid-template-columns:248px 1fr; }
  :root { --pad-x:var(--sp-10); }
}

/* ========= C. 触控命中补偿（仅粗指针）：伪元素外扩到 44px，不改视觉尺寸 =======*/
@media (pointer:coarse) {
  
  .btn--sm { min-height:40px; padding-inline:var(--sp-4); }
  .btn--sm, .tab, .side__item, .nav__link, .pw-toggle, .linkbtn,
  .chip, .badge, .switch, .cellact {
    position:relative;
  }
  /*⚠ ::after 已被滑块占用，命中区改用 ::before，否则滑块… → ds.notes.md#after-已被滑块占用-命中区 */
  .btn--sm::after, .pw-toggle::after, .linkbtn::after,
  .cellact::after,
  .switch::before {
    content:""; position:absolute; left:50%; top:50%;
    width:100%; height:100%; min-width:var(--touch); min-height:var(--touch);
    transform:translate(-50%,-50%);
  }
  /* :active 反馈要够快，避免触屏迟滞感*/
  .btn, .chip, .tab, .side__item { transition-duration:var(--t-fast); }
}

/* ============================ D. 用户偏好 ============================*/
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}


@media (prefers-contrast: more) {
  :root,
  [data-theme="paper"] {
    --text-dim:#333B49; --text-mid:#232B37; --text:#141821;
    --border:#4A4438; --line:#8B8577;
  }
  
  [data-theme="instrument"] {
    --text-dim:#C6D0DE; --text-mid:#D2DAE6; --text:#E4E9F2;
    --border:#A6B1C0; --line:#606B7B;
  }
  .card,.panel,.stat { border-width:1px; }
  .btn { border-width:1px; }
}

/*⚠ ====== E. 间距工具类（P-05）：内联 (1,0,0,0)… → ds.notes.md#e-间距工具类-p */

.mt-2.mt-2 { margin-top:var(--sp-2); }
.mb-3.mb-3 { margin-bottom:var(--sp-3); }
.mt-3.mt-3 { margin-top:var(--sp-3); }
.mt-4.mt-4 { margin-top:var(--sp-4); }
.mt-5.mt-5 { margin-top:var(--sp-5); }
.mt-6.mt-6 { margin-top:var(--sp-6); }
.gap-3.gap-3 { gap:var(--sp-3); }
.gap-4.gap-4 { gap:var(--sp-4); }
.fs-lg.fs-lg { font-size:var(--fs-lg); }
.tbl__caption.tbl__caption { text-align:left; padding:var(--sp-3) var(--sp-4); }


.svg-sprite.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ml-auto.ml-auto { margin-left:auto; }
.pt-0.pt-0 { padding-top:0; }
.gap-2.gap-2 { gap:var(--sp-2); }
.gap-5.gap-5 { gap:var(--sp-5); }