/* ============================================================
   UI-043 · 第一层：设计令牌 app/design-tokens.css
   （2026-10-02 **六套皮肤 v2**：松柏绿(默认) / 马尔斯青 / 藏青蓝 / 中国红 / 爱马仕橙 / 纯黑白）
   ────────────────────────────────────────────────────────────
   三层架构：第1层 原色（无语义，**切换皮肤 = 只改这一层**）→ 第2层 语义（按用途，组件只引这层）→ 第3层 组件（可选）。
   ⛔ 铁律（守门 c56 / c74 强制）：① 全仓 `--ui-*` 的**定义**只许在本文件；② 两端本文件**逐字节一致**；
     ③ **被引用的令牌必须有定义**（c74 机器对账 —— 曾因 `--color-red-300` 缺档致 8 处描边静默失效）。
   ⭐⭐ 皮肤机制（入口＝顶栏「系统设置 → 更换皮肤」，出口 `app/theme.js#WB.theme`）：
     · **皮肤 = 元素上的 `data-skin`**（上列六个 id）；皮肤块**只重定义原色层**，语义层与组件层一行不改；
     · ⭐ 选择器故意写 `[data-skin="…"]`（⛔ 不是 `:root[…]`）⇒ **任意子树**带上它就是一套完整皮肤作用域，
       「更换皮肤」菜单的**六张示意图**因此用**真令牌**渲染，⛔ 不必在 JS 里再抄色值（第二事实来源 · 铁律 25）；
     · 防闪：`app/skin-boot.js` 在 `<head>` 里**先于样式表**把 `data-skin` 打到根元素（⛔ 不许等 `core.js` ⇒ FOUC 铁律 39）。
   ⭐⭐ 本版最关键的两条（⛔ 违背任一条就会"换色系把语义也换掉"或"整块皮肤发灰"）：
     · **色系原色 = `--color-brand-*`**（随皮肤变）；**业务语义原色 = green/orange/red/amber/blue**（六套皮肤下
       **含义固定**：收入·正向=绿 / 支出=橙 / 负向=红 / 警告=琥珀 / 信息=蓝）。⚠️ `mono` 是唯一例外：语义一并灰阶化。
     · ⭐⭐ **外壳（顶栏 / 菜单栏 / 主区）共用同一个令牌 `--ui-bg-app` ⇒ 永远同色**，且它走**品牌浅色**（保住色系感）。
       ⛔⛔ 用户 2026-10-02 明令：**「色系怎么调，之前定的规矩不能变」**（顶栏底＝菜单栏底＝主区底 · 两者之间**不画横向分隔线** ·
       菜单**选中项无常驻底色**）。⛔ 也不许用"把页面底改成中性灰"来治"一色四用" —— 那会把整块皮肤变成灰的。
     · 灰阶**只用于文字/描边**，不参与大面积底。
   ============================================================ */
/* ⭐⭐ 选择器带上 `[data-skin]`：让**任意子树**也成为一套完整皮肤作用域。
   ⛔⛔ 为什么必须有它（2026-10-01 真 Chrome 实测抓到）：自定义属性在**声明处**就完成 `var()` 替换，
      **不是**在"使用处" ⇒ `--ui-brand: var(--color-brand-500)` 只声明在 `:root` 时，
      它的值在**根上**就已定死成"根皮肤的那个色"；子元素再覆盖 `--color-brand-500` **完全无效**
      （拿到的仍是从根继承下来的那个颜色）⇒ 四张示意图会**全画成同一个色**（实测正是如此）。
   ⇒ 把语义层**同时**声明在 `[data-skin]` 上，带 `data-skin` 的子树就能用自己的原色重新解析整套语义令牌。
   ⭐ 语义层仍然**只写这一份**（⛔ 不是复制四遍），符合"单一事实来源"。
   ⚠️ 代价：任何带 `data-skin` 的元素都会成为皮肤作用域 —— 目前只有示意图小盒子用它，属预期用途。 */
:root, [data-skin] {
  /* ════════ 数值层（与色系无关；调大小/间距只改这里）════════ */
  /* ── 控件高度档 ── */
  --ui-ctl-h: 32px;      /* 大档：AI 输入区三件套命中区 */
  --ui-ctl-h-sm: 30px;   /* 小档：顶栏方框 / 铃 / 齿轮 */ --ui-row-h: 44px;   /* ⭐ 2026-10-11 用户令：数据栏表格行高统一 44 */
  /* ⭐⭐ 2026-10-27（原型 v3.1.5 §1 令牌对齐 · 登记 `##520`）：**补齐原型 5 档控件高 / 触控命中 / 卡内边距**。
     原型 `--ctl-h-sm:28 · --ctl-h:30 · --ctl-h-lg:32 · --ctl-h-m:38 · --tap:44`；本系统 `--ui-ctl-h`=32(大) / `-sm`=30(小) 已对齐另两档，
     ⇒ 只补 **28 档 / 38 档 / 44 触控** + 卡内边距（舒适 10·12，紧凑 8·8 见文件末尾 [data-density]）。 */
  --ui-ctl-h-xs: 28px;   /* 28 档：工具行小钮（原型 --ctl-h-sm） */
  --ui-ctl-h-m: 38px;    /* 38 档：移动端底部主操作（原型 --ctl-h-m） */
  --ui-ctl-h-lg: 32px;   /* ⭐ `##526`：**原型档位命名对齐别名**（原型 --ctl-h-lg:32）—— 与本系统 --ui-ctl-h(32) 同值；⛐ 改任何现值 */
  --ui-tap: 44px;        /* 触控命中下限（伪元素扩热区，⛔ 不放大视觉 · 原型 --tap） */
  --ui-card-pad-v: 10px; /* 卡内边距（舒适档 · 原型 --card-pad-v） */
  --ui-card-pad-h: 12px; /* 卡内边距（舒适档 · 原型 --card-pad-h） */
  /* ── 图标基准 ── */
  --ui-ico: 18px;
  --ui-ico-sm: 16px;
  /* ── 间距档 ── */
  --ui-gap-1: 4px;
  --ui-gap-2: 8px;
  --ui-gap-3: 12px;
  --ui-gap-4: 16px;
  --ui-gap-5: 24px;   /* 区块内分节（2026-10-17 ##337：来源要求「区块间距至少 32px」⇒ 补齐 24/32 两档） */
  --ui-gap-6: 32px;   /* ⭐ 区块之间 */
  /* ── 圆角档 ── */
  --ui-radius-ctl: 8px;
  --ui-radius-card: 12px;
  --ui-radius-pill: 999px;
  /* ── 描边 ── */
  --ui-stroke: 0.5px;
  --ui-stroke-strong: 1px;
  /* ── 字号档 ── */
  --ui-fs-1: 12px;
  --ui-fs-2: 13px;
  --ui-fs-3: 14px;
  --ui-fs-4: 20px;
  /* ⭐ `##520`（原型 §1）：**KPI 数值受控档 22px** —— 原型口径「≤4 档（+KPI 数据字号 1 档受控例外）」。
     ⛐ 修前 `.card .v` 硬写 22px（且字重 700）⇒ 数值散落在业务 CSS、不属令牌层。
     现在抽成本令牌 ⇒ 全站 KPI 数值只此一处（⛔ 不许再写 `font-size:22px`）。 */
  --ui-fs-kpi: 22px;
  /* ⭐ `##520`（原型 §11.4 动效参数）：**transition 集合 ⊆ {80,120,180,250}**（H-08 只量 transition-duration）；
     骨架流光 1200ms / loading 圈 800ms 属 animation 循环，⛔ 不在 transition 集合内。 */
  --ui-t-row: 80ms;
  --ui-t-hover: 120ms;
  --ui-t-panel: 180ms;
  --ui-t-layout: 250ms;
  --ui-t-skel: 1200ms;
  /* ⭐⭐ 2026-11-06（79 号 P6 · T06-01 · 75 §2.2）：**数据区增量令牌 10 个**（全部是尺寸/时长，⛔ 不引入新色相）。
     为什么需要（每条都是实测缺口，⛔ 不是"为加而加"）：
       ① 现有最小字号 12px ⇒ 「辅助信息（单位/时间戳/口径）」与「正文」分不开；
       ② 标题只有 14px 一档（靠加粗充层级）⇒ 与正文同级；
       ③ 行高只有 44/38 两档 ⇒ 详情页/票据长文本缺"宽松"一档；
       ④ 内嵌小块（标签/状态点）沿用控件 8px 圆角 ⇒ 对 20px 高的小块过大；
       ⑤ 抽屉/浮层只有 shadow-2（小浮层档）⇒ 大面板显不出层级；
       ⑥ 进入动效散落 `ease`，曲线不统一 ⇒ 本文件给出唯一曲线。 */
  --ui-fs-0: 11px;                                  /* 脚注/单位/时间戳/图表刻度（数据区辅助档）*/
  --ui-fs-5: 16px;                                  /* 区块标题 / 卡片标题 */
  --ui-fs-6: 28px;                                  /* **仅首页主 KPI**（≤4 个/屏）*/
  --ui-lh-tight: 1.25;                              /* 数字、标题 */
  --ui-lh-body: 1.5;                                /* 表格单元格、正文 */
  --ui-row-h-comfy: 52px;                           /* 第三档行高：详情页 / 票据明细（搭 `[data-density="comfy"]`）*/
  --ui-radius-inner: 6px;                           /* 内嵌小块圆角（标签 / 状态点）*/
  --ui-shadow-3: 0 8px 28px rgba(0,0,0,.12);        /* 抽屉 / 浮层阴影（比 shadow-2 大一级）*/
  --ui-t-enter: 180ms;                              /* 层级进入（抽屉/图表绘制）—— 与 --ui-t-panel 同档，语义更明确 */
  --ui-ease-out: cubic-bezier(.2,.8,.2,1);          /* 所有进入/位移动画唯一曲线 */
  /* ── 字体栈 ── */
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* ════════════════════════════════════════════════════════════
     第2层：语义令牌（Semantic）—— 按用途命名，引用原色
     ⭐ 本层**四套皮肤共用、一行不改**；变的只是它引用的原色值。
     ════════════════════════════════════════════════════════════ */
  /* ⭐ `##652`：**底色保留色系**（用户两次否掉"近白"：「这几乎成了白色」「我要的是一套比较完整的色系配比」）。
     外壳 = 各皮肤 `brand-100`；页底/AI 栏 = brand-100 混 40% 白（浅一档）；
     **表头/隔行/行线/描边走中性组** —— 那几处才是"一片绿"的来源，与外壳色系互不冲突。⛔ 铁律 54 三条不变。 */
  --ui-bg-app:     color-mix(in srgb, var(--color-brand-100) 40%, #ffffff);   /* 页面底 / AI 栏底（绿皮 #e3f1e9，与改造前 #e5f0e9 基本一致） */
  --ui-bg-surface: #ffffff;                   /* 卡片 / 面板底（中性白，四套皮肤共用） */
  --ui-bg-sunken:  var(--color-neutral-200);  /* 输入框 / 凹陷区（原 brand-100 ⇒ 与外壳/表头/描边同值） */
  --ui-bg-stripe:  var(--color-neutral-50);   /* 表格隔行（中性 · 只用来分行） */
  /* ⭐ `##652` A1/A4：表头底与行分割线**各自独立**（原来表头吃 brand-soft＝外壳同色、行线吃隔行底 ⇒ 一动全动）。 */
  --ui-th-bg:      var(--color-neutral-200);  /* 表头底 */
  --ui-divider:    var(--color-neutral-400);  /* 表格行分割线 / th 下边线 */
  /* ⭐ UI-057 统一标准：**hover 底色唯一值** —— 中性灰 6%，六套皮肤下呈现一致（⛔ 不随色系漂移）。
     口径：菜单项 / 图标按钮 / 面板项 / 表格行 hover 一律引用本令牌；hover **不改文字色**。 */
  --ui-bg-hover:   rgba(0,0,0,.06);   /* hover 底（唯一标准）*/
  --ui-bg-active:  var(--color-brand-200);   /* 选中 / 当前项底 */
  /* ⛔⭐ D418/D426（2026-09-30 用户令）：「把 **AI 对话框**里面的颜色改成白色，而且**这个白色在任何色系下都不变**」
     ⇒ 本条**故意不引用原色层**（一引用就跟着皮肤走 —— 那正是本条要禁止的）= 全仓唯一"不参与皮肤"的背景令牌。
     用途：**AI 对话框 ＝ 输入区 `.ai-input`**（⚠️ 2026-09-30 更正：**不是**整条 `#aiDock` —— 改 `#aiDock` 会连带把消息区也变白，用户明确否掉）。
     ⛔ 不许拿 `--ui-bg-surface` 顶替（它随皮肤可被重定义）；守门：`c56` 事故禁令 ＋ `c74` 中性例外（`#fff/#ffffff/#000`）。 */
  --ui-bg-dialog-fixed: #ffffff;             /* ⛔ 不随皮肤变（白） */
  /* ── 文字层（中性灰**只在这里**）── ⭐ UI-075：主文字＝`--ui-ink-strong` 固定近黑（⛔ 不用 gray-800 —— 各皮肤带色相 ⇒ "偏灰+被色系干扰"）；次级/弱化不动。 */
  --ui-text-primary:   var(--ui-ink-strong);
  --ui-text-secondary: var(--color-gray-600);
  --ui-text-muted:     var(--color-gray-500);  /* 白底 5.25:1 / 应用底 4.64:1 ⇒ 两种底都达 AA（四套皮肤 gray-500 已按 AA 复算）*/
  /* ⭐ `##652` A5：表头/字段标签专用字色。原来吃 gray-600，在中饱和品牌底上六套实测 4.60/4.61/4.31/4.12/4.28/4.73 ⇒ **3 套不达 AA**。改中性底+neutral-700 ⇒ **8.9:1**，不随皮肤漂移。 */
  --ui-text-label:     var(--color-neutral-700);
  --ui-text-inverse:   #ffffff;
  /* ── 边框层 ── ⭐ `##652` A3/A6：描边改走中性组（原 subtle=brand-100 与外壳同值、default=品牌 S41 色 ⇒ 满屏绿框）。
     ⛔ 不能照搬 134 报告 A6 的浅灰（1.7:1），那会回退 `##515-c2`（控件边界须 ≥3:1）；本版 neutral-600 = 去色相但**不降对比度**。 */
  --ui-border-subtle:  var(--color-neutral-500);   /* 卡片边 / 分隔线（非控件边界，不强制 3:1） */
  --ui-border-default: var(--color-neutral-600);   /* 控件边（输入框/按钮）—— 对白底 ≥3.0:1，守住 ##515-c2 */
  --ui-border-strong:  var(--color-neutral-600);   /* 重描边（方框/选中框）—— 与控件边同档，只是用得更少 */
  /* ── 品牌层（⭐ 走品牌色系阶：换肤 = 这五个令牌自动变）── */
  --ui-brand:       var(--color-brand-500);   /* 主色 */   --ui-brand-ring:  color-mix(in srgb, var(--ui-brand) 14%, transparent);   --ui-cardhead-grad: linear-gradient(180deg, var(--ui-brand), var(--orange));   /* ⭐ 2026-11-13（148 M-11）：分节/卡片标题竖渐变色条的唯一出口（组件不再各拼一次 · 行数不增）*/   /* ⭐ VIS-001 焦点光晕唯一令牌 —— ⚠️ 2026-10-23 用户实测指出：原写死 rgba(30,138,90,.14) ⇒ 换皮肤仍是绿 ⇒ 改由 --ui-brand 派生（data-skin 挂在 <html> 上 ⇒ --ui-brand 会跟随） */
  --ui-brand-hover: var(--color-brand-600);
  --ui-brand-deep:  var(--color-brand-600);   /* 深色字 / 表头底 */
  --ui-brand-soft:  var(--color-brand-100);   /* ⭐ 浅底：表头 / 统计行 / 菜单 hover 填充。原用 brand-50 ⇒ 与页面底**同色** ⇒ 表头看不出是"一条带" ⇒ 提一档（2026-10-02 六套皮肤 v2） */
  --ui-brand-mid:   var(--color-brand-300);   /* ⭐ 评审 66 · 条目 #21（核实结果）：对白底仅 **2.30:1** ⇒ 实测其**全部**用法都是「浅底/描边」或「深色侧栏上的字」(brand-800 上 6.35:1)，⛔ 不得当浅底正文（原注释"副字"不准确，已改正）；空态发送钮底同此档（UI-009① 用户明令浅色，保留） */
  /* ── 状态层（⭐ 走**业务语义原色**：四套皮肤下含义固定 —— 收入/正向=绿 · 警告=琥珀 · 负向=红 · 信息=蓝）── */
  --ui-success:    var(--color-green-600);
  --ui-success-bg: var(--color-green-50);
  --ui-warning:    var(--color-amber-600);
  --ui-warning-bg: var(--color-amber-100);
  /* ⭐ 2026-10-11 用户令（UI-059）：「**红点颜色不是红的了**」——
     根因：`.bdg` 用 `--ui-danger`，而 mono（纯黑白）皮肤把整个红色阶覆写成**灰阶** ⇒ 该皮肤下提示红点变灰。
     ⭐ 正解：提示角标的底色是**可辨识性语义**（不是"负向账目色"）⇒ 单独给令牌，**只在共享层定义、⛔ 皮肤块不许覆写** ⇒ 六套恒红。 */
  --ui-badge-bg:   #c9262c;                   /* 提示角标底（跨皮肤固定红）*/
  --ui-danger:     var(--color-red-600);      /* 账目负值红（ADR 口径） */
  --ui-danger-bg:  var(--color-red-50);
  --ui-info:       var(--color-blue-600);
  --ui-info-bg:    var(--color-blue-50);
  /* ── 业务语义色（⛔ 只表达语义，不当装饰；四套皮肤下含义固定）── */
  --ui-expense:      var(--color-orange-500);   /* 支出（中性业务色，非警告） */
  --ui-expense-deep: var(--color-orange-600);
  --ui-expense-soft: var(--color-orange-100);
  --ui-price:        var(--color-orange-700);   /* 商品价格（支出语义的强调档） */
  --ui-slate:        var(--color-slate-500);    /* 票据计数等中性业务档 */
  /* ── 侧栏层（走品牌色系深阶：手机抽屉用；桌面 ≥761px 走浅色，见各端主题）── */
  --ui-side-bg:         var(--color-brand-800);   /* 上（略浅） */

  /* ════════ 外壳层（2026-10-11 用户令：外壳(顶栏+侧栏)=品牌主色 · 内容区=--ui-bg-app · 卡片改阴影不用描边）════════ */
  /* ⭐ UI-048/049：「整体调浅一档」→「还是太深了」⇒ 外壳底 = **`brand-100`**（各皮肤自己的品牌浅色）。
     ⛔ 不要用 `brand-400`（白字读不了）；⛔ 也不要中性化/混白 —— `##652` 我试过两次，用户实测都判成"几乎白"。 */
  --ui-shell-bg:         var(--color-brand-100);   /* 外壳底（顶栏＝侧栏同一令牌）*/
  /* ⭐ UI-075：外壳文字一律**实色**主墨色 —— ⛔ 半透明不行（叠到不同外壳底会合成 rgb(36,40,36)/(40,36,36) 等，
     色系干扰照旧，正是用户要消灭的）；层次靠"选中态 700 字重 + 底色"，⛔ 不靠文字变浅。 */
  --ui-shell-text:       var(--ui-ink-strong);     /* 外壳主文字（固定墨色，⛔ 不随皮肤）*/
  --ui-shell-text-muted: var(--ui-ink-strong);     /* 菜单项常态＝同档实色 */
  /* ⭐ UI-076：外壳 hover 用 **`brand-300`**（原为中性灰 6%，与冻结的 D425「小方框底色也跟着色系走」矛盾）；
     ⛔ 不用 brand-200 —— 外壳底已是 brand-100，实测对比度仅 1.016~1.044（几乎看不见），brand-300 是 1.195~2.012。 */
  --ui-shell-hover:      var(--ui-brand-mid);       /* 外壳 hover 底（随机系）*/
  --ui-shell-on:         rgba(0,0,0,.10);          /* 外壳选中底（仅交互态）*/
  --ui-shadow-1:         0 1px 2px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.05);   /* 卡片阴影（替代描边）—— ⭐ `##652`：改中性（原 rgba(16,24,20) 带绿调，红/橙皮肤下阴影仍偏绿）*/
  --ui-shadow-2:         0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);   /* 浮层阴影（同上）*/
  /* ⭐ `##652` A7：弹窗遮罩独立成令牌 —— 原来两端各 7 处写死墨绿 rgba（切红/橙/蓝皮肤时遮罩还是绿的）。
     遮罩是**中性功能层**（不是品牌装饰）⇒ 直接中性黑，⛔ 不需要"跟随皮肤"。 */
  --ui-scrim:            rgba(0,0,0,.52);   /* 弹窗遮罩（modal）*/
  --ui-scrim-light:      rgba(0,0,0,.38);   /* 轻遮罩（.mask / .kx-overlay —— 抽屉与浮层，⛔ 不挡内容阅读）*/
  --ui-shadow-color:     rgba(0,0,0,.06);   /* 单条阴影（浮钮 / 移动卡片）*/
  --ui-shadow-float:     0 6px 18px rgba(0,0,0,.26);   /* 悬浮按钮阴影（原写死墨绿 .35）*/
  --ui-side-bg2:        var(--color-brand-900);  /* 下（更深；渐变方向 = 上→下变深） */
  /* ⭐ UI-049：旧外壳令牌**收敛到 `--ui-shell-*`**（同类结构不许两个事实来源 · 铁律 25）
     —— 否则改黑字后，手机端/抽屉/顶栏按钮仍是白字，放到纯白皮肤上不可读。 */
  --ui-side-text:       var(--ui-shell-text);
  --ui-side-text-muted: var(--ui-shell-text-muted);
  --ui-bg-ctl-soft:     var(--color-neutral-500);   /* ⭐ `##657` 浅色/品牌色条上的图标钮、次级控件填充（中性 · 不随皮肤）。⛐ 原来 `.mtop .burger`/`.m-msg-btn` 借 `--ui-border-subtle`（描边档）当填充 ⇒ 描边一改按钮跟着变；本行由已零引用的 `--ui-side-hover` 换位而来（行数不增）*/
  /* ── 兼容旧名（逐步淘汰；⭐ 让"换皮肤只改原色层"对旧引用也成立）── */
  --ui-line:  var(--ui-border-subtle);
  --ui-line2: var(--ui-border-default);
  --ui-card:  var(--ui-bg-surface);
  --ui-ink:   var(--ui-text-primary);
  --ui-mut:   var(--ui-text-secondary);
}

/* ════════════════════════════════════════════════════════════════
   业务语义原色（**四套皮肤共用**，含义固定）
   ⛔ 只有「纯黑白」皮肤会覆盖这一组（无色相可用 ⇒ 灰阶化，见该皮肤块）
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ⭐⭐⭐ UI-071（2026-10-11 用户令 · 用户原话）：
     「这个 LOGO 的颜色是**固定的，不会因为色系变化而变化**。把这个约定补充到 071 里面。」
     ⇒ 系统 LOGO（左上角「AIUNI」那个圆形图标）的墨色**写死在这里** —— 它属于**语义原色组**
       （与上面「绿/红/琥珀/橙/蓝」同级：含义固定、**六套皮肤都不覆盖**）
       ⇒ 换色系（松柏绿/马尔斯青/藏青蓝/中国红/爱马仕橙/纯黑白）时，LOGO **保持不变**。
     ⛔ 不要把它挪进任何皮肤块（挪了就会随色系变）＝ 本令牌存在的全部意义。 */
  --brand-logo-ink: #2f6b4f; --brand-logo-spark: #8ff0c4;   /* 系统 LOGO 固定墨色（深松柏绿）+ 智能点固定亮绿（⛔ 同属固定品牌色，六皮肤都不覆盖；色值只许住令牌层 c74） */
  /* ⭐⭐⭐ UI-075（2026-10-11 用户令 · 用户原话）：
     「这些字的颜色在任何色系下都是感觉不是纯黑色，而是偏黑灰色。我需求是这些文字的颜色
       **一定是偏黑**，而且**不因色系干扰**，不要现在这种感觉总是偏灰。」
     ⛔ 病根：界面主文字走 `--ui-text-primary` ＝ `--color-gray-800`，而**六套皮肤的灰阶各带自己的色相**
       （红皮 `#332e2e` 偏红 / 橙皮 `#33302e` 偏橙 / 蓝皮 `#2e3033` 偏蓝）⇒ 换色系时**文字跟着偏色**，
       且 `#2f3231` 本身只是"深灰"、⛔ 不是"偏黑"。
     ✅ 正解：**主墨色写死在语义原色组**（与 UI-071 的 LOGO 墨色同级 —— **六套皮肤一律不覆盖**）
       ⇒ 换色系（松柏绿/马尔斯青/藏青蓝/中国红/爱马仕橙/纯黑白）时，主文字**恒定不变**，
         从根上消除"色系干扰"。取值 `#111213`：近黑且近中性（RGB 三通道几乎相等 ⇒ ⛔ 不带任何色相），
         相对白底对比度 **18.75**（改前 `gray-800` 只有 12.95）⇒ 「偏黑」达成；⛔ 不用纯 `#000`
         （21.0 在浅色外壳底上过硬、发死，用户要的是"偏黑"不是"纯黑"）。
     ⛔ 不要把它挪进任何皮肤块（挪了就会随色系变）＝ 本令牌存在的全部意义。 */
  --ui-ink-strong: #111213;    /* 界面主文字墨色（正文/标签/菜单）固定近黑 · 六套皮肤共用 · ⛔ 不随色系变 */
  /* ── 绿（success / 收入 / 正向）── */
  --color-green-50: #f2f8f5;
  --color-green-100: #e1efe8;
  --color-green-200: #c1e2d1;
  --color-green-300: #99d6b8;
  --color-green-400: #6ece9e;
  --color-green-500: #229159;
  --color-green-600: #1b7447;
  --color-green-700: #135333;
  --color-green-800: #0e3a24;
  --color-green-900: #082114;
  /* ── 红（danger / 账目负值）── */
  --color-red-50: #f8f2f2;
  --color-red-100: #f0e0e1;
  --color-red-200: #e3bfc0;
  --color-red-300: #d99799;
  --color-red-500: #c9262c;
  --color-red-600: #ab2125;
  --color-red-700: #891a1e;
  /* ── 琥珀（warning）── */
  --color-amber-50: #f9f6f1;
  --color-amber-100: #f2ebde;
  --color-amber-200: #e9d7ba;
  --color-amber-500: #ad710b;
  --color-amber-600: #8b5b09;
  --color-amber-700: #654206;
  /* ── 橙（expense 支出：中性**业务**色，⛔ 区别于 warning）── */
  --color-orange-50: #f8f4f1;
  --color-orange-100: #f1e6df;
  --color-orange-500: #c55c16;
  --color-orange-600: #a54d12;
  --color-orange-700: #813c0e;
  /* ── 蓝（info）── */
  --color-blue-50: #f2f5f8;
  --color-blue-100: #e0e8f0;
  --color-blue-500: #2472cc;
  --color-blue-600: #1f61ad;
  --color-blue-700: #184e8b;
  /* ── 紫 ── */
  --color-purple-50:  #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #6d28d9;
  /* ── 石板（中性业务档：票据计数等）── */
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  /* ⭐ `##652`（134 报告 A/B 批）：**中性色组**（六套皮肤共用 · ⛔ 皮肤块一律不覆盖）。病根：`--ui-brand-soft`/`--ui-bg-sunken`/
     `--ui-border-subtle`/`--ui-shell-bg` 四个角色共用 `brand-100` 一个值 ⇒ 改外壳表头不动、改表头描边全变。底/线/表头字一律走本组，
     品牌色只留 LOGO / 选中项 / 主按钮 / 焦点环。⛔ 不许在组件里"借档"（借一档就又是一色多用）；未用档位直接删，⛔ 不许囤。 */
  --color-neutral-50: #fafbfa; --color-neutral-200: #f1f3f2; --color-neutral-400: #e3e7e5;   /* 隔行 / 表头·输入框底 / 行分割线 */
  --color-neutral-500: #d5dbd8; --color-neutral-600: #8b918e; --color-neutral-700: #3f4442; --color-neutral-800: #23282a;   /* 轻描边 / 控件描边(≥3:1) / 表头字 / 深中性 */
}

/* ── 皮肤 · 松柏绿（green）· 主色由文档色 #1e8a5a 压暗到白字合格 ── */
:root:not([data-skin]),
[data-skin="green"] {
  --color-brand-50: #dff0e7;   /* ⭐ ##515-c1（C1）：色相对齐 H148 */
  --color-brand-100: #b9dcc9;   /* ⭐ ##515-c1（C1）：H120→H147，去灰 */   /* ⭐ UI-068（2026-10-11 用户令「主色再加深一点」）：外壳（主色系）L82%/S27% —— 由 UI-055 的 L86 再深一档 */
  --color-brand-200: #a5dcc2;   /* ⭐ ##515-c1（C1）：色相收整 */
  --color-brand-300: #7fd7af;  --color-border-ctl: #45a57a;  /* ⭐ ##515-c2（C2/B）：控件层描边 ≥3:1 */
  --color-brand-400: #4ed096;   --color-brand-450: #35ab77;   /* ⭐ 2026-11-13（148 V-07）：补 400→500 的中间档，消掉「浅绿→墨绿」断崖；只新增档位，⛔ 不动既有 400/500 */
  --color-brand-500: #1d8657;
  --color-brand-600: #19734b;
  --color-brand-700: #165c3d;
  --color-brand-800: #134730;
  --color-brand-900: #103524;
  --color-gray-50: #f7f8f7;
  --color-gray-100: #edeeed;
  --color-gray-200: #d7dad9;
  --color-gray-300: #babfbd;
  --color-gray-400: #909894;
  --color-gray-500: #666b68;
  --color-gray-600: #565c5a;
  --color-gray-700: #424745;
  --color-gray-800: #2f3231;
  --color-gray-900: #1e201f;
  /* ⭐ 2026-11-01（登记 `##652` · 134 报告 C1）：**本皮肤不再覆写 `--ui-bg-app`**。
     原来它把页面底写成品牌浅色（`##515-c1` / UI-069），六套皮肤各不相同 ⇒ 整屏只有一种色相。
     现在页面底由**中性组 `--color-neutral-100`** 统一接管：六套皮肤"非品牌面"完全相同，
     换肤只改**强调色**（LOGO / 选中项 / 主按钮 / 焦点环）。 */
}
/* ── 皮肤 · 马尔斯青（teal）· 主色由文档色 #018b8d 压暗到白字合格 ── */
[data-skin="teal"] {
  --color-brand-50: #e2f3f3;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-100: #bbddde;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */   /* ⭐ UI-068（2026-10-11 用户令）：外壳 L82%/S27% —— 再深一档 */
  --color-brand-200: #a9e0e1;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-300: #7fd5d7;  --color-border-ctl: #45a2a3;  /* ⭐ ##515-c2（C2/B）：控件层描边 ≥3:1 */
  --color-brand-400: #4eced0;   --color-brand-450: #2a9fa1;   /* ⭐ 148 V-07 中间档 */
  --color-brand-500: #018183;
  --color-brand-600: #016f71;
  --color-brand-700: #045759;
  --color-brand-800: #064243;
  --color-brand-900: #073031;
  --color-gray-50: #f7f8f8;
  --color-gray-100: #eceeee;
  --color-gray-200: #d7dbdb;
  --color-gray-300: #b9c0c0;
  --color-gray-400: #8f9999;
  --color-gray-500: #656d6d;
  --color-gray-600: #555e5e;
  --color-gray-700: #414848;
  --color-gray-800: #2e3333;
  --color-gray-900: #1d2020;
  /* ⭐ 2026-11-01（`##652`）：页面底改由中性组接管，删除本皮肤的覆写 */
}
/* ── 皮肤 · 藏青蓝（tech）· 主色＝文档原色 ── */
[data-skin="tech"] {
  --color-brand-50: #e2eaf3;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-100: #bbccde;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */   /* ⭐ UI-068（2026-10-11 用户令）：外壳 L82%/S27% —— 再深一档 */
  --color-brand-200: #a9c4e1;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-300: #7faad7;  --color-border-ctl: #6f98c3;  /* ⭐ ##515-c2（C2/B）：控件层描边 ≥3:1 */
  --color-brand-400: #4e8dd0;   --color-brand-450: #2d639c;   /* ⭐ 148 V-07 中间档 */
  --color-brand-500: #0d3a69;
  --color-brand-600: #0b325a;
  --color-brand-700: #0a2948;
  --color-brand-800: #0a2037;
  --color-brand-900: #091829;
  --color-gray-50: #f7f7f8;
  --color-gray-100: #ecedee;
  --color-gray-200: #d7d9da;
  --color-gray-300: #babdc0;
  --color-gray-400: #8f9498;
  --color-gray-500: #676a6f;
  --color-gray-600: #55595d;
  --color-gray-700: #424548;
  --color-gray-800: #2e3033;
  --color-gray-900: #1d1f20;
  /* ⭐ 2026-11-01（`##652`）：页面底改由中性组接管，删除本皮肤的覆写 */
}
/* ── 皮肤 · 中国红（red）· 主色＝文档原色 ── */
[data-skin="red"] {
  --color-brand-50: #f3e2e2;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-100: #debbbc;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */   /* ⭐ UI-068（2026-10-11 用户令）：外壳 L82%/S27% —— 再深一档 */
  --color-brand-200: #e1a9ab;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-300: #d77f83;  --color-border-ctl: #c36f73;  /* ⭐ ##515-c2（C2/B）：控件层描边 ≥3:1 */
  --color-brand-400: #d04e53;   --color-brand-450: #cc3238;   /* ⭐ 148 V-07 中间档 */
  --color-brand-500: #c8161d;
  --color-brand-600: #ac1319;
  --color-brand-700: #8a1217;
  --color-brand-800: #691114;
  --color-brand-900: #4e0f12;
  --color-gray-50: #f8f7f7;
  --color-gray-100: #eeecec;
  --color-gray-200: #dad7d7;
  --color-gray-300: #c0baba;
  --color-gray-400: #998f90;
  --color-gray-500: #6c6566;
  --color-gray-600: #5d5556;
  --color-gray-700: #484242;
  --color-gray-800: #332e2e;
  --color-gray-900: #201d1d;
  --color-red-50: #f8f2f2;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  --color-red-100: #efe1e2;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  --color-red-200: #e2c1c3;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  --color-red-300: #d6999e;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  --color-red-500: #801e25;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  --color-red-600: #63171c;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  --color-red-700: #421013;  /* ⭐ 本皮肤覆写：负向＝深绛红（⛔ 不用品牌红；否则「保存」与「作废」看着一个色） */
  /* ⭐ 2026-11-01（`##652`）：页面底改由中性组接管，删除本皮肤的覆写 */
}
/* ── 皮肤 · 爱马仕橙（orange）· 原文档色 #eb5c20 落在 400 档 ── */
[data-skin="orange"] {
  --color-brand-50: #f3e7e2;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-100: #dec5bb;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */   /* ⭐ UI-068（2026-10-11 用户令）：外壳 L82%/S27% —— 再深一档 */
  --color-brand-200: #e1b9a9;   /* ⭐ ##515-c4（C4）：色相对齐主色 + 浅色段去灰 */
  --color-brand-300: #d7987f;  --color-border-ctl: #c2856d;  /* ⭐ ##515-c2（C2/B）：控件层描边 ≥3:1 */
  --color-brand-400: #eb5c20;   --color-brand-450: #dd531a;   /* ⭐ 148 V-07 中间档 */
  --color-brand-500: #cf4a14;
  --color-brand-600: #b24011;
  --color-brand-700: #8e3511;
  --color-brand-800: #6d2b10;
  --color-brand-900: #51220f;
  --color-gray-50: #f8f7f7;
  --color-gray-100: #eeedec;
  --color-gray-200: #dad8d7;
  --color-gray-300: #c0bbba;
  --color-gray-400: #99928f;
  --color-gray-500: #6c6665;
  --color-gray-600: #5d5855;
  --color-gray-700: #484442;
  --color-gray-800: #33302e;
  --color-gray-900: #201e1d;
  --color-orange-50: #f7f5f2;  /* ⭐ 本皮肤覆写：支出＝深赭石（与品牌橙拉开） */
  --color-orange-100: #eee9e2;  /* ⭐ 本皮肤覆写：支出＝深赭石（与品牌橙拉开） */
  --color-orange-500: #92652a;  /* ⭐ 本皮肤覆写：支出＝深赭石（与品牌橙拉开） */
  --color-orange-600: #775222;  /* ⭐ 本皮肤覆写：支出＝深赭石（与品牌橙拉开） */
  --color-orange-700: #573c19;  /* ⭐ 本皮肤覆写：支出＝深赭石（与品牌橙拉开） */
  /* ⭐ 2026-11-01（`##652`）：页面底改由中性组接管，删除本皮肤的覆写 */
}
/* ── 皮肤 · 纯黑白（mono）· Semantic ── */
[data-skin="mono"] {
  /* ⭐ 2026-11-01（`##652` · 134 报告 C1）：**本皮肤不再覆写 `--ui-shell-bg`** ——
     外壳底已由 `--ui-shell-bg`（品牌浅色）统一接管。
     历史：UI-049/UI-050 定下的「外壳 ＜ AI 栏 ＜ 数据栏」三档递进**结构没变**（见下面 UI-074）。 */
  /* ⭐ UI-050 用户令：「中间 AI 栏这里颜色调浅，现在太深了」⇒ AI 栏/页面底由 brand-50(#ececee) 调浅到 #fafafa。
     形成 mono 三档近白：外壳 #f7f7f8 ＜ AI 栏/页面 #fafafa ＜ 数据栏 #ffffff。 */
  /* ⭐⭐⭐ UI-074（2026-10-11 用户令 · 用户实测原话）：
     「**黑白色的色系，AI 栏和数据栏的颜色区分不出来了。你能把数据栏的颜色再改的白一点吗？**」
     · **实测（真 Chrome 1440×900 · 探针 `probe_mono_bg.mjs`）**：mono 皮肤下 `#aiDock`、`.main`、`body`
       **三处全是 `rgb(255,255,255)`** —— 整屏一片纯白，⛔ 两栏零色差（用户观察成立）。
     · **根因（不是"数据栏不够白"）**：数据栏走 `--ui-bg-surface` ＝ `#ffffff` **已经是最白**、改不动；
       真正出问题的是 **AI 栏**：UI-069 把它从 `#f7f7f9` 调到了 **`#ffffff`** ⇒ **撞上数据栏的白**
       ⇒ 把 UI-050 定下的「外壳 ＜ AI 栏 ＜ 数据栏」三档递进**压平成了同一档**。
     · **正解**：⛔ 不是把数据栏改得更白（做不到），而是**把 AI 栏压回一档** —— 恢复三档递进，
       数据栏**相对**就更白、两栏也分得开（与用户"数据栏更白"的诉求**目标一致**）。
     · **取值**：AI 栏/页面底 **`#f7f7f9`**（实测三档最均匀：外壳 `#ebebee` ＜ AI 栏 ═ **区间 60% 处** ＜ 数据栏 `#ffffff`；
       AI 栏离数据栏纯白 **7.86** 亮度、离外壳 **11.93** ⇒ 两边都留得住，⛔ 不像 `#fbfbfc` 那样离纯白只剩 3.93（太淡）。
       同时它**比 UI-069 之前的 `#f7f7f9` 持平** —— 即本轮把 UI-069 给 mono 的那次调白**撤回**，
       理由：那次调白正是把两栏压成一片的**直接原因**（UI-069 的本意是"AI 栏调浅"，
       但 mono 档位已经到顶、再浅就没了区分度）⇒ **色系方向不可凌驾于"两栏必须分得开"之上**）。 */
  /* ⭐ 2026-11-01（`##652`）：**本皮肤不再覆写 `--ui-bg-app`**（原为 UI-074 定的 `#f7f7f9`）。
     现在页面底/AI 栏底 = 中性组 `--color-neutral-100`，与上面"三档递进"结论等价（外壳 93 ＜ 页底 97 ＜ 卡片白）。
     ⛔ UI-074 那条教训（**三档不许压平**）仍然有效：改中性组任何一档前，先量三者亮度差。 */
  --color-brand-50: #ececee;
  --color-brand-100: #d1d1d6;   /* ⭐ UI-068（2026-10-11 用户令）：mono 外壳再深一档（原 #dcdce0） */
  --color-brand-200: #c4c4ca;
  --color-brand-300: #a7a7af;  --color-border-ctl: #8d8da5;  /* ⭐ ##515-c2（C2/B）：控件层描边 ≥3:1 */
  --color-brand-400: #898994;   --color-brand-450: #5a5a61;   /* ⭐ 148 V-07 中间档（mono 皮肤按灰阶插值） */
  --color-brand-500: #2b2b2f;
  --color-brand-600: #252529;
  --color-brand-700: #1e1e21;
  --color-brand-800: #18181a;
  --color-brand-900: #121214;
  --color-gray-50: #f7f7f8;
  --color-gray-100: #ededee;
  --color-gray-200: #d8d8da;
  --color-gray-300: #bbbbbe;
  --color-gray-400: #919197;
  --color-gray-500: #69696d;
  --color-gray-600: #57575b;
  --color-gray-700: #434347;
  --color-gray-800: #2f2f32;
  --color-gray-900: #1e1e1f;
  --color-green-50: #f5f5f5;
  --color-green-100: #e8e8e8;
  --color-green-200: #d1d1d1;
  --color-green-300: #b8b8b8;
  --color-green-400: #9e9e9e;
  --color-green-500: #666666;
  --color-green-600: #545454;
  --color-green-700: #404040;
  --color-green-800: #303030;
  --color-green-900: #212121;
  --color-amber-50: #f5f5f5;
  --color-amber-100: #e8e8e8;
  --color-amber-200: #d1d1d1;
  --color-amber-500: #666666;
  --color-amber-600: #545454;
  --color-amber-700: #404040;
  --color-red-50: #f5f5f5;
  --color-red-100: #e8e8e8;
  --color-red-200: #d1d1d1;
  --color-red-300: #b8b8b8;
  --color-red-500: #666666;
  --color-red-600: #545454;
  --color-red-700: #404040;
  --color-blue-50: #f5f5f5;
  --color-blue-100: #e8e8e8;
  --color-blue-500: #666666;
  --color-blue-600: #545454;
  --color-blue-700: #404040;
  --color-orange-50: #f5f5f5;
  --color-orange-100: #e8e8e8;
  --color-orange-500: #666666;
  --color-orange-600: #545454;
  --color-orange-700: #404040;
}

/* ⭐⭐ 2026-10-27（原型 v3.1.5 §11.3 · 登记 `##520`）：**密度两档**（M-24）。
   ⛐ 原型口径：`[data-density]` **只改 --ui-row-h / --card-pad-* 一组变量**，⛐ 不改结构、⛐ 不改字号；两档共用同一份 DOM。
   安装位：面板根元素。数据栏表格已有 `.tbl-wrap[data-density="compact"]` 内边距覆盖（ui-controls.css）。 */
[data-density="compact"] {
  --ui-row-h: 38px;
  --ui-card-pad-v: 8px;
  --ui-card-pad-h: 8px;
}
/* ⭐⭐ 2026-11-06（79 号 P6 · T06-01 · 75 §3.3）：**行高三档** —— 紧凑 38 / 标准 44 / 宽松 52。
   沿用 `##520` 口径：切换**只改 `--ui-row-h` 一组变量**，⛔ 不切 DOM、⛔ 不改字号（两档共用同一份 DOM）。
   ⚠️ 安装位＝表格外层容器（`.tbl-wrap`）：`--ui-row-h` 由主题层 `table.tbl tbody td{height:…}` 消费 ⇒ 变量挂在祖先上即生效。 */
[data-density="comfy"] {
  --ui-row-h: 52px;
}