/* !!! GENERATED FILE — DO NOT EDIT !!!
 * 真源：shared/tokens/{base,semantic,components}.css
 * 生成：tools/sync-shared.py    校验：design/check-tokens.cjs
 * 修改视觉请改真源后重跑同步，本文件会被覆盖。
 * tokens sha256: a546973671165d94
 */

/* ============================================================================
   白泽家族设计系统 · 单一真源（Design Token v3 · 可执行版）
   ----------------------------------------------------------------------------
   本文件是 L1 基础令牌与 L2 语义令牌的**唯一写入点**。
   四端（portal / ccbriskview / yuqing / qingbao）运行时一律引用由本文件生成的
   vendored 产物 `<模块>/lib/baize.tokens.css`，**禁止再各自内联一份副本**。

   【为什么必须如此】
   2026-10-08 体检实测：design/tokens.css 名义为单一真源，但全仓库零 link/@import，
   四端各内联一份人工同步的副本，已发生真实漂移 —— 门户 --sp1~--sp5 与其余三端
   系统性错位一档；四端合计 15 个令牌「被引用但未定义」（var() 静默失效）。
   本文件 + tools/sync-shared.py 把「单一真源」从事后比对变成**构建期强制**。

   【生成与消费链路】
     shared/tokens/base.css  ─┐
     shared/tokens/semantic.css ├─ tools/sync-shared.py ─→ 各模块 lib/baize.tokens.css
     shared/tokens/components.css ─┘                        （<link> 静态引用，随模块入库）
   改样式请改本目录，改完必须跑： python tools/sync-shared.py && node design/check-tokens.cjs

   【三条硬边界（违反即回归红）】
     1. 字号下限 13px                低于此在本系统视为不可读
     2. 渐变令牌化（2026-10-18 起）  只允许 var(--c-grad-*) 引用或带 gradient-ok: 注释的
                                     功能性渐变；禁止匿名字面量。令牌定义本身在本文件
     3. 无 emoji 图标                图标一律内联 SVG（24 视窗描边，stroke 1.8–2.1）

   【色彩双轨制（家族红线）】
     --r-*   只做色块/地图/图例圆点（饱和度高，写文字会低于 4.5:1）
     --tx-*  做写在底上的文字（对 --c-surface 恒 ≥4.5:1，浅深两档各取值）
   混用是本系统最常见的可读性缺陷来源。

   【有意不在此处的令牌】
     --hdr-h  白泽视响应式表头总高（基础 108px / ≤1023px 132px / ≤768px 140px），
              属单端布局变量，留在 ccbriskview/webapp/index.html，禁止上提污染跨端真源。
   ============================================================================ */

:root {
  /* UA 默认控件（select 弹层 / 复选框 / 滚动条 / 自动填充底色）随档翻转；
     本家族深色靠 html.dark 类驱动，不写这条 UA 控件会停在浅色。 */
  color-scheme: light;
  /* ---- L1 颜色 · 表面与文字（浅色档） ---- */
  --c-bg:                #F3F6FB;
  --c-surface:           #FFFFFF;
  --c-surface-2:         #F7FAFE;
  --c-surface-3:         #EDF2F9;
  --c-text:              #1B2632;
  --c-muted:             #61707F;
  --t1:                  #17222F;
  --t2:                  #46586B;
  --t3:                  #61707F;

  /* ---- L1 颜色 · 主色、描边与警示 ---- */
  /* 2026-10-18 视觉改版：主色 #0A4DA1 → #2456C6（钴蓝，hue≈222°，远离紫粉禁区） */
  --c-primary:           #2456C6;
  --c-primary-dark:      #17399A;
  --c-primary-soft:      #E9F0FE;
  --c-primary-ring:      rgba(36, 86, 198, 0.30);
  --c-accent:            #0E8C8C;
  --c-accent-soft:       #E2F3F2;
  --c-border:            #E2E9F3;
  --c-line:              #E7EDF6;
  --c-line-2:            #D3DDEB;
  --c-warn:              #F4A261;
  --lock-line:           #D3DDEB;

  /* ---- L1 阴影与焦点环（三级高程：贴近面 + 抬升面 + 浮层） ----
     --c-shadow / --c-shadow-up 为 --elev-1 / --elev-2 的同值别名（写字面量而非 var()：
     未注册自定义属性在 getComputedStyle 下不解析 var()，护栏逐值比对会拿到字面量）。 */
  --elev-1:              0 1px 2px rgba(16, 32, 64, 0.05), 0 4px 14px rgba(16, 32, 64, 0.07);
  --elev-2:              0 2px 6px rgba(16, 32, 64, 0.07), 0 12px 28px rgba(16, 32, 64, 0.11);
  --elev-3:              0 8px 24px rgba(16, 32, 64, 0.12), 0 24px 56px rgba(16, 32, 64, 0.16);
  --c-shadow:            0 1px 2px rgba(16, 32, 64, 0.05), 0 4px 14px rgba(16, 32, 64, 0.07);
  --c-shadow-up:         0 2px 6px rgba(16, 32, 64, 0.07), 0 12px 28px rgba(16, 32, 64, 0.11);
  --focus-ring:          0 0 0 3px rgba(36, 86, 198, 0.22);

  /* ---- L1 令牌化渐变（2026-10-18 起渐变只允许引用 --c-grad-*，禁止匿名字面量） ---- */
  --c-grad-hero:         linear-gradient(180deg, rgba(36, 86, 198, 0.10), rgba(36, 86, 198, 0));
  --c-grad-sheen:        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));

  /* ---- L1 字体（中文栈 + 等宽栈） ---- */
  --font:                "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:                ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  /* ---- L1 字号阶梯与行高（硬下限 13px） ----
     2026-10-18 视觉改版：整体放一档（panel/card/h2/kpi），补 h1/display 两级大标题。 */
  --fs-aux:              13px;
  --fs-body:             14px;
  --fs-panel:            16px;
  --fs-card:             18px;
  --fs-h2:               26px;
  --fs-h1:               32px;
  --fs-display:          44px;
  --fs-kpi:              34px;
  --lh:                  1.6;
  --lh-tight:            1.25;

  /* ---- L1 间距 · 4px 基线 9 档（sp6/sp7 供 hero 与 section 呼吸） ---- */
  --sp-1:                4px;
  --sp0:                 8px;
  --sp1:                 12px;
  --sp2:                 16px;
  --sp3:                 24px;
  --sp4:                 32px;
  --sp5:                 48px;
  --sp6:                 64px;
  --sp7:                 96px;

  /* ---- L1 圆角（2026-10-18 整体放松一档，新增 xl） ---- */
  --radius-sm:           8px;
  --radius-ctl:          10px;
  --radius:              14px;
  --radius-lg:           18px;
  --radius-xl:           24px;
  --radius-pill:         999px;

  /* ---- L1 z 轴分层 ---- */
  --z-base:              0;
  --z-sticky:            20;
  --z-topbar:            40;
  --z-drawer:            200;
  --z-modal:             210;
  --z-pop:               220;
  --z-toast:             230;

  /* ---- L1 动效 ---- */
  --dur-fast:            .12s;
  --dur:                 .18s;
  --dur-slow:            .3s;
  --ease:                cubic-bezier(.2, .8, .2, 1);
  --ease-out:            cubic-bezier(.16, 1, .3, 1);

  /* ---- L1 交互态（2026-10-17 家族交互基线 v1） ----
     按下态一律用 inset 阴影表达，**不得改用 transform**：
     白泽戏牌面/气泡上挂了一串 transform 动画（xi-floaty / xi-speakBob / 发牌
     translate3d），全局按下若叠 transform 会与它们互相覆盖；inset 阴影不参与
     布局、不创建层叠上下文、不干扰 transform，是唯一全家族安全的按法。
     （该约束最早由 baizexi/webapp/index.html:273 的注释确立，此处上提为家族口径。）
     按下态避开 :focus-visible —— 键盘 Enter/Space 激活时必须保住焦点环。 */
  --press-in:            inset 0 2px 5px rgba(15, 40, 80, 0.13);
  --dur-press:           .08s;

  /* ---- L1 控件与触控尺寸 ----
     --tap 是 WCAG 2.5.5 / iOS HIG 的指尖热区下限，只在 ≤680px 断点作用于
     独立控件（icon-btn/chip/tab/nav-item）；表格内的 .btn-mini / .btn.sm
     不套用——它们嵌在行内，撑到 44px 会顶破行高。 */
  --ctl-h-sm:            28px;
  --ctl-h:               34px;
  --ctl-h-lg:            40px;
  --tap:                 40px;

  /* ---- L1 容器宽度 ---- */
  --wrap-narrow:         820px;
  --wrap:                1080px;
  --wrap-wide:           1360px;

  /* ---- L2 等级色块 --r-*（色块/地图/图例圆点，禁止写文字） ---- */
  --r-red:               #E63946;
  --r-orange:            #F4A261;
  --r-yellow:            #E9C46A;
  --r-blue:              #4D96FF;
  --r-green:             #2A9D8F;

  /* ---- L2 等级文字色 --tx-*（写在底上对 --c-surface 恒 ≥4.5:1） ---- */
  --tx-red:              #B3261E;
  --tx-orange:           #9A5B14;
  --tx-yellow:           #8A6A0B;
  --tx-blue:             #1D5BBF;
  --tx-green:            #146C5B;
  --tx-na:               #5B6673;

  /* ---- L2 等级底纹 / 描边 / 单元格底 ---- */
  --tint-red:            rgba(230, 57, 70, 0.10);
  --tint-orange:         rgba(244, 162, 97, 0.16);
  --tint-yellow:         rgba(233, 196, 106, 0.20);
  --tint-blue:           rgba(77, 150, 255, 0.12);
  --tint-green:          rgba(42, 157, 143, 0.12);
  --edge-red:            rgba(179, 38, 30, 0.30);
  --edge-orange:         rgba(154, 91, 20, 0.32);
  --edge-yellow:         rgba(138, 106, 11, 0.30);
  --edge-blue:           rgba(29, 91, 191, 0.30);
  --edge-green:          rgba(20, 108, 91, 0.28);
  --cell-red:            rgba(230, 57, 70, 0.16);
  --cell-orange:         rgba(244, 162, 97, 0.22);
  --cell-yellow:         rgba(233, 196, 106, 0.24);
  --cell-green:          rgba(42, 157, 143, 0.16);

  /* ---- L2 旧族兼容 --risk-*（与 --r-* 同值，收敛期保留） ---- */
  --risk-red:            #E63946;
  --risk-orange:         #F4A261;
  --risk-yellow:         #E9C46A;
  --risk-blue:           #4D96FF;
  --risk-green:          #2A9D8F;

  /* ---- L2 三系统身份色 ---- */
  --sys-risk:            #2456C6;
  --sys-risk-soft:       #E9F0FE;
  --sys-yuqing:          #B45309;
  --sys-yuqing-soft:     #FDF3E3;
  --sys-qingbao:         #0F766E;
  --sys-qingbao-soft:    #E3F4F1;

  /* ---- L2 功能块标识色（安全检查 / 风险 / AI） ---- */
  --b-safety:            #C4402B;
  --b-risk:              #2456C6;
  --b-ai:                #2E6F95;

  /* ---- L2 状态色（在线 / 异常 / 未知） ---- */
  --ok:                  #15803d;
  --bad:                 #B3261E;
  --na:                  #5B6673;

  /* ---- L1 门户专有（顶栏毛玻璃底） ---- */
  --topbar:              rgba(255, 255, 255, .92);
}

/* ============================================================================
   白泽家族设计系统 · 语义令牌（深色档覆盖）
   ----------------------------------------------------------------------------
   深色由 <html class="dark"> 驱动，靠**换令牌值**实现，结构/字号/间距一律不动。
   本文件不得出现除变量赋值以外的任何选择器规则 —— 组件级的暗档修补写在各端自己的
   CSS 里（它们依赖具体 DOM 结构，上提到跨端真源会污染不需要这些类的端）。

   取值原则：
     · 表面            由浅到深三层 + 最深的页面底，保持「越靠前越亮」的层次
     · 文字            --c-text 主文 / --c-muted 辅助，均对 --c-surface ≥4.5:1
     · 等级文字 --tx-*  暗底改用浅色调（对 #161E27 ≥6.9:1），与 levelTextColor() 同源
     · 等级色块 --r-*   两主题共用同一套饱和值，不在暗档重复定义
   ============================================================================ */

html.dark {
  color-scheme: dark;   /* 让 select 弹层 / 复选框 / 滚动条 / 自动填充跟随暗档 */
  /* ---- 表面与文字（2026-10-18 视觉改版：冷蓝深夜档） ---- */
  --c-bg:              #0B1424;
  --c-surface:         #121D2E;
  --c-surface-2:       #182436;
  --c-surface-3:       #1F2C40;
  --c-text:            #E9EFF7;
  --c-muted:           #A3B1C2;
  --t1:                #E9EFF7;
  --t2:                #B7C3D0;
  --t3:                #9AA8B5;

  /* ---- 主色、描边与锁屏线 ---- */
  --c-primary:         #7FA6FF;
  --c-primary-dark:    #A8C4FF;
  --c-primary-soft:    #1A2B47;
  --c-primary-ring:    rgba(127, 166, 255, 0.32);
  --c-accent:          #4FC7C0;
  --c-accent-soft:     #123029;
  --c-border:          #2A3A52;
  --c-line:            #2A3A52;
  --c-line-2:          #3A4C66;
  --lock-line:         #384963;

  /* ---- 阴影与焦点环（三级高程，别名同值规则同浅档） ---- */
  --elev-1:            0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.36);
  --elev-2:            0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
  --elev-3:            0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.55);
  --c-shadow:          0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.36);
  --c-shadow-up:       0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
  --focus-ring:        0 0 0 3px rgba(127, 166, 255, 0.35);

  /* ---- 令牌化渐变（深档换同形不同色） ---- */
  --c-grad-hero:       linear-gradient(180deg, rgba(127, 166, 255, 0.10), rgba(127, 166, 255, 0));
  --c-grad-sheen:      linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));

  /* ---- 交互态：按下（暗底用更重的黑色内缩，与浅档同手感） ---- */
  --press-in:          inset 0 2px 5px rgba(0, 0, 0, 0.34);

  /* ---- 等级文字色（暗底改用浅色调，对 #161E27 均 ≥6.9:1） ---- */
  --tx-red:            #FF8A80;
  --tx-orange:         #FFCC80;
  --tx-yellow:         #FFE082;
  --tx-blue:           #82B1FF;
  --tx-green:          #7FD8C8;
  --tx-na:             #9AA8B5;

  /* ---- 等级底纹 / 描边 / 单元格底 ---- */
  --tint-red:          rgba(255, 138, 128, 0.14);
  --tint-orange:       rgba(255, 204, 128, 0.13);
  --tint-yellow:       rgba(255, 224, 130, 0.13);
  --tint-blue:         rgba(130, 177, 255, 0.14);
  --tint-green:        rgba(127, 216, 200, 0.13);
  --edge-red:          rgba(255, 138, 128, 0.34);
  --edge-orange:       rgba(255, 204, 128, 0.32);
  --edge-yellow:       rgba(255, 224, 130, 0.30);
  --edge-blue:         rgba(130, 177, 255, 0.32);
  --edge-green:        rgba(127, 216, 200, 0.30);
  --cell-red:          rgba(255, 138, 128, 0.14);
  --cell-orange:       rgba(255, 204, 128, 0.14);
  --cell-yellow:       rgba(255, 224, 130, 0.14);
  --cell-green:        rgba(127, 216, 200, 0.14);

  /* ---- 三系统身份色 ---- */
  --sys-risk:          #A8C4FF;
  --sys-risk-soft:     #1A2B47;
  --sys-yuqing:        #FFCC80;
  --sys-yuqing-soft:   #3A2E18;
  --sys-qingbao:       #7FD8C8;
  --sys-qingbao-soft:  #123029;

  /* ---- 功能块标识色 ---- */
  --b-safety:          #FF8A80;
  --b-risk:            #7FA6FF;
  --b-ai:              #7FC4E8;

  /* ---- 状态色 ---- */
  --ok:                #7FD8C8;
  --bad:               #FF8A80;
  --na:                #9AA8B5;

  /* ---- 门户顶栏毛玻璃底 ---- */
  --topbar:            rgba(11, 20, 36, .92);
}

/* ============================================================================
   白泽家族设计系统 · 组件层规格（L3）
   ----------------------------------------------------------------------------
   提供七端**同一套**组件，由 shared/js/baize-ui.js 渲染或按契约类名直接书写：
     · 场景态  bz-skeleton 骨架（rows/card/table/chart 四形态）｜ bz-empty 空态（96px 插画）
              ｜ bz-notice 错误条 ｜ bz-toast 轻提示（图标+进度条+悬停暂停）
     · 导航壳  bz-topbar 顶栏 ｜ bz-nav 导航行 ｜ bz-page 页面容器（七端统一外壳契约）
     · 业务件  bz-btn 按钮（primary/ghost/danger × sm/md + loading）｜ bz-field 表单域
              ｜ bz-card / bz-panel 卡片面板 ｜ bz-tbl 表格 ｜ bz-badge 徽标 ｜ bz-chip 芯片
              ｜ bz-tabs / bz-seg 页签分段 ｜ bz-filterbar 筛选条 ｜ bz-kpi 指标卡
              ｜ bz-drawer 抽屉 + bz-pop 浮层 ｜ bz-pager 分页 ｜ bz-modal 确认框
     · 辅助   bz-acct 账户条 ｜ bz-stale 数据龄 ｜ bz-sr 仅读屏可见

   【命名为什么带 bz- 前缀】
   四端各自已有 .btn / .panel / .badge / .tbl 等类，且语义各不相同。为防止跨端
   样式互相覆盖，共享组件一律用 bz- 前缀命名空间，与任何端既有规则零交集。

   【为什么只做这六类】
   2026-10-08 体检实测：Toast 四端数量 3/9/9/12、pager 5/3/3/1、skeleton 6/5/4/7，
   同为「无数据」一端给重试出口、另一端是行内 padding:40px。差异集中在「状态反馈」
   而非「业务控件」，故先收口这六类 —— 收益最大、与各端业务零耦合。

   【硬边界继承祖代令牌】
     字号 ≥13px ｜ 圆角走 var(--radius-*) ｜ 间距走 var(--sp*) ｜ 无 emoji ｜ 无装饰渐变
   ============================================================================ */

/* ---------- 加载：骨架屏（rows / card / table / chart 四形态）----------
   2026-10-18 视觉改版：单行条扩成四形态，覆盖「列表 / 卡片 / 表格 / 图表」
   四类最常见的加载占位。光泽扫过是四形态共用的状态反馈，逐形态保留
   gradient-ok: 标记（护栏豁免依赖它）。 */
.bz-skeleton { display: flex; flex-direction: column; gap: var(--sp1); }
.bz-sk-row {
  height: 14px; border-radius: var(--radius-sm); background: var(--c-surface-2);
  position: relative; overflow: hidden;
}
.bz-sk-row.tall { height: 22px; }
.bz-sk-row.short { width: 60%; }
.bz-sk-row.mid   { width: 82%; }

/* card 形态：缩略图 + 行条 */
.bz-sk-card {
  display: flex; gap: var(--sp2); padding: var(--sp2);
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface);
}
.bz-sk-thumb {
  width: 84px; height: 64px; flex: none;
  border-radius: var(--radius-sm); background: var(--c-surface-2);
  position: relative; overflow: hidden;
}
.bz-sk-card .bz-sk-rows {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  gap: var(--sp1); justify-content: center;
}

/* table 形态：表头条 + 行内单元格条 */
.bz-sk-table { display: flex; flex-direction: column; gap: var(--sp1); }
.bz-sk-tr { display: flex; gap: var(--sp0); align-items: center; }
.bz-sk-td {
  height: 12px; flex: 1 1 0;
  border-radius: var(--radius-sm); background: var(--c-surface-2);
  position: relative; overflow: hidden;
}
.bz-sk-tr.head .bz-sk-td { height: 16px; background: var(--c-surface-3); }

/* chart 形态：柱状占位（高度错落，模仿真实柱图轮廓） */
.bz-sk-chart { display: flex; align-items: flex-end; gap: var(--sp0); height: 120px; }
.bz-sk-bar {
  flex: 1 1 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--c-surface-2);
  position: relative; overflow: hidden;
}
.bz-sk-bar:nth-child(1) { height: 46%; }
.bz-sk-bar:nth-child(2) { height: 72%; }
.bz-sk-bar:nth-child(3) { height: 38%; }
.bz-sk-bar:nth-child(4) { height: 88%; }
.bz-sk-bar:nth-child(5) { height: 58%; }
.bz-sk-bar:nth-child(6) { height: 76%; }
.bz-sk-bar:nth-child(7) { height: 44%; }

/* 光泽扫过（四形态共用的加载反馈） */
.bz-sk-row::after,
.bz-sk-thumb::after,
.bz-sk-td::after,
.bz-sk-bar::after {
  /* gradient-ok: 加载状态反馈（微光扫过），非装饰性渐变。
     家族硬边界是「无**装饰性**渐变」，各端的检查脚本都靠这一个标记做豁免，
     删掉它会导致全部端的渐变护栏同时转红。 */
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: bz-sk-shine 1.4s var(--ease) infinite;
}
html.dark .bz-sk-row::after,
html.dark .bz-sk-thumb::after,
html.dark .bz-sk-td::after,
html.dark .bz-sk-bar::after {
  /* gradient-ok: 同上（夜间档的同一视觉反馈，仅换透明度） */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
}
@keyframes bz-sk-shine { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .bz-sk-row::after, .bz-sk-thumb::after, .bz-sk-td::after, .bz-sk-bar::after { animation: none; }
}

/* ---------- 空态（96px 单线插画 + 文案 + 动作出口）----------
   2026-10-18 视觉改版：图标位从 40px 通用图标升级为 96px 语义插画
   （box/search/shield/broken/offline 五变体，SVG 在 baize-ui.js 内联）。
   SVG 内部三色由本节着色：a-line 打底、a-main 主线、a-accent 点缀。 */
.bz-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp0); padding: var(--sp4) var(--sp2); text-align: center;
  color: var(--c-muted); font-size: var(--fs-body); line-height: var(--lh);
}
.bz-empty .bz-empty-ico { color: var(--c-line-2); flex: none; }
.bz-empty .bz-empty-ico svg { display: block; width: 96px; height: 96px; }
.bz-empty .bz-empty-ico .a-line   { stroke: var(--c-line-2); }
.bz-empty .bz-empty-ico .a-main   { stroke: var(--c-primary); }
.bz-empty .bz-empty-ico .a-accent { stroke: var(--c-accent); }
.bz-empty .bz-empty-t { font-size: var(--fs-panel); color: var(--t2); font-weight: 600; }
.bz-empty .bz-empty-d { font-size: var(--fs-aux); color: var(--c-muted); max-width: 46ch; }
.bz-empty .bz-empty-act { display: flex; gap: var(--sp1); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-1); }

/* ---------- 通知 / 错误条（带重试出口）---------- */
.bz-notice {
  display: flex; align-items: flex-start; gap: var(--sp1);
  padding: var(--sp1) var(--sp2); border-radius: var(--radius);
  border: 1px solid var(--c-line-2); background: var(--c-surface-2);
  font-size: var(--fs-body); line-height: var(--lh); color: var(--t1);
}
.bz-notice.warn  { border-color: var(--edge-orange); background: var(--tint-orange); color: var(--tx-orange); }
.bz-notice.err   { border-color: var(--edge-red);    background: var(--tint-red);    color: var(--tx-red); }
.bz-notice.ok    { border-color: var(--edge-green);  background: var(--tint-green);  color: var(--tx-green); }
.bz-notice.info  { border-color: var(--edge-blue);   background: var(--tint-blue);   color: var(--tx-blue); }
.bz-notice .bz-n-body { flex: 1 1 auto; min-width: 0; }
.bz-notice .bz-n-act { flex: none; display: flex; gap: var(--sp0); }

/* ---------- 轻提示（图标 + 正文 + 进度条，悬停暂停）---------- */
.bz-toast-wrap {
  position: fixed; right: var(--sp2); bottom: var(--sp2); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp0); pointer-events: none;
  max-width: min(92vw, 420px);
}
.bz-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp0);
  padding: 10px var(--sp2) 12px; border-radius: var(--radius); box-shadow: var(--c-shadow-up);
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  font-size: var(--fs-body); line-height: var(--lh); color: var(--t1);
  position: relative; overflow: hidden;
  animation: bz-toast-in .16s var(--ease);
}
.bz-toast.ok   { border-left: 3px solid var(--r-green); }
.bz-toast.warn { border-left: 3px solid var(--r-orange); }
.bz-toast.err  { border-left: 3px solid var(--r-red); }
.bz-toast.info { border-left: 3px solid var(--r-blue); }
.bz-toast .bz-t-ico { flex: none; display: inline-flex; margin-top: 2px; }
.bz-toast.ok   .bz-t-ico { color: var(--tx-green); }
.bz-toast.warn .bz-t-ico { color: var(--tx-orange); }
.bz-toast.err  .bz-t-ico { color: var(--tx-red); }
.bz-toast.info .bz-t-ico { color: var(--tx-blue); }
.bz-toast .bz-t-body { flex: 1 1 auto; min-width: 0; }
.bz-toast .bz-t-x {
  flex: none; cursor: pointer; color: var(--c-muted);
  background: none; border: 0; padding: 0 2px; line-height: 1;
  display: inline-flex; align-items: center;
}
.bz-toast .bz-t-x:hover { color: var(--t1); }
/* 底部进度条：width 从满到 0，JS 侧同步 pause/resume 计时 */
.bz-toast .bz-t-prog {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--c-line-2);
  animation: bz-t-prog 2600ms linear forwards;
}
.bz-toast.ok   .bz-t-prog { background: var(--r-green); }
.bz-toast.warn .bz-t-prog { background: var(--r-orange); }
.bz-toast.err  .bz-t-prog { background: var(--r-red); }
.bz-toast.info .bz-t-prog { background: var(--r-blue); }
.bz-toast:hover .bz-t-prog { animation-play-state: paused; }
@keyframes bz-t-prog { from { width: 100%; } to { width: 0; } }
@keyframes bz-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bz-toast { animation: none; }
  .bz-toast .bz-t-prog { animation: none; width: 100%; }
}

/* ---------- 分页 ---------- */
.bz-pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp0); padding: var(--sp2) 0 var(--sp1); font-size: var(--fs-aux); color: var(--c-muted);
}
.bz-pager button {
  min-width: 32px; height: 30px; padding: 0 9px; box-sizing: border-box;
  border: 1px solid var(--c-line-2); background: var(--c-surface); color: var(--t2);
  border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-aux);
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center;
}
.bz-pager button:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.bz-pager button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-pager button.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.bz-pager button:disabled { opacity: .45; cursor: not-allowed; }
.bz-pager .bz-pg-total { padding: 0 var(--sp0); font-variant-numeric: tabular-nums; }

/* ---------- 确认框（替代 window.confirm / prompt）---------- */
.bz-mask {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex;
  align-items: center; justify-content: center; padding: var(--sp2);
  background: rgba(15, 25, 40, .45); backdrop-filter: blur(2px);
}
.bz-modal {
  width: min(100%, 420px); background: var(--c-surface); border-radius: var(--radius);
  box-shadow: var(--c-shadow-up); border: 1px solid var(--c-line-2); overflow: hidden;
}
.bz-modal .bz-m-h { padding: var(--sp2) var(--sp2) 0; font-size: var(--fs-panel); font-weight: 600; color: var(--t1); }
.bz-modal .bz-m-b { padding: var(--sp1) var(--sp2) var(--sp2); font-size: var(--fs-body); color: var(--t2); line-height: var(--lh); }
.bz-modal .bz-m-b input {
  width: 100%; margin-top: var(--sp1); padding: 8px 10px; box-sizing: border-box;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm); background: var(--c-surface);
  color: var(--t1); font-size: var(--fs-body); font-family: inherit;
}
.bz-modal .bz-m-b input:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.bz-modal .bz-m-f {
  display: flex; justify-content: flex-end; gap: var(--sp0);
  padding: var(--sp1) var(--sp2); border-top: 1px solid var(--c-line); background: var(--c-surface-2);
}

/* ---------- 通用按钮（共享组件用，与各端 .btn 不冲突）---------- */
.bz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 var(--sp1); box-sizing: border-box;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm); cursor: pointer;
  background: var(--c-surface); color: var(--t1);
  font-family: inherit; font-size: var(--fs-body); line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bz-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.bz-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-btn:disabled { opacity: .45; cursor: not-allowed; }
.bz-btn.primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.bz-btn.primary:hover:not(:disabled) { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
.bz-btn.ghost   { background: transparent; border-color: transparent; color: var(--c-primary); }
.bz-btn.ghost:hover:not(:disabled) { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary-dark); }
.bz-btn.danger  { background: var(--c-surface); border-color: var(--edge-red); color: var(--tx-red); }
.bz-btn.danger:hover:not(:disabled) { background: var(--tint-red); }
.bz-btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-aux); }
/* loading：文字透明保布局，::after 旋转 spinner 居中叠加 */
.bz-btn.loading { position: relative; cursor: progress; color: transparent; }
.bz-btn.loading::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid var(--c-primary); border-right-color: transparent; border-radius: 50%;
  animation: bz-btn-spin .7s linear infinite;
}
.bz-btn.primary.loading::after { border-color: rgba(255, 255, 255, .9); border-right-color: transparent; }
@keyframes bz-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bz-btn.loading::after { animation-duration: 1.6s; } }
html.dark .bz-btn.primary { color: #0B1A2E; }  /* 暗档 --c-primary 亮度高，白字仅 2.95:1 */
html.dark .bz-btn.primary.loading::after { border-color: #0B1A2E; border-right-color: transparent; }

/* ---------- 账户条（四端同一结构：用户 · 返回门户 · 退出）---------- */
.bz-acct { display: flex; align-items: center; gap: var(--sp1); font-size: var(--fs-aux); }
.bz-acct .bz-acct-who { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bz-acct .bz-acct-sep { color: var(--c-line-2); }
.bz-acct a, .bz-acct button {
  color: var(--c-primary); text-decoration: none; background: none; border: 0;
  padding: 0; cursor: pointer; font: inherit; white-space: nowrap;
}
.bz-acct a:hover, .bz-acct button:hover { text-decoration: underline; }
.bz-acct a:focus-visible, .bz-acct button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 数据龄标记（陈旧数据提示，Phase 4 F6 用）---------- */
.bz-stale {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--radius-pill); border: 1px solid var(--edge-orange);
  background: var(--tint-orange); color: var(--tx-orange);
  font-size: var(--fs-aux); line-height: 1.5;
}

/* ---------- 无障碍：仅屏幕阅读器可见 ---------- */
.bz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   业务控件层（2026-10-18 视觉改版 · 七端统一）
   ----------------------------------------------------------------------------
   把七端各自手写的表单域 / 卡片 / 表格 / 徽标 / 页签 / 筛选条 / 指标卡 / 抽屉
   收口成同一套 bz-* 契约：改一次，七端生效。各端旧类（.tbl/.chip/.kpi/.modal）
   逐步迁移过来，本节只提供目标形态、不删旧类。
   注意：容器类 hover 只加阴影，**不碰 transform**（与按下态同一原因）。
   ============================================================================ */

/* ---------- 表单域 ---------- */
.bz-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.bz-field > label { font-size: var(--fs-aux); font-weight: 600; color: var(--t2); }
.bz-field input, .bz-field select, .bz-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 0 var(--sp1); height: var(--ctl-h);
  border: 1px solid var(--c-line-2); border-radius: var(--radius-ctl);
  background: var(--c-surface); color: var(--t1);
  font-family: inherit; font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bz-field textarea { height: auto; padding: var(--sp0) var(--sp1); line-height: var(--lh); resize: vertical; }
.bz-field input:focus, .bz-field select:focus, .bz-field textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring);
}
.bz-field .hint { font-size: var(--fs-aux); color: var(--c-muted); line-height: var(--lh-tight); }
.bz-field .err  { font-size: var(--fs-aux); color: var(--tx-red); line-height: var(--lh-tight); }
.bz-field.invalid input, .bz-field.invalid select, .bz-field.invalid textarea { border-color: var(--edge-red); }

/* ---------- 卡片 / 面板 ---------- */
.bz-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp2);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bz-card.hoverable:hover { box-shadow: var(--elev-2); border-color: var(--c-line-2); }
.bz-panel {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.bz-panel .bz-p-h {
  display: flex; align-items: center; gap: var(--sp1);
  padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-panel); font-weight: 600; color: var(--t1);
}
.bz-panel .bz-p-b { padding: var(--sp3); }
.bz-panel .bz-p-f {
  padding: var(--sp1) var(--sp3); border-top: 1px solid var(--c-line);
  background: var(--c-surface-2); display: flex; gap: var(--sp0); justify-content: flex-end;
}

/* ---------- 表格 ---------- */
.bz-tbl-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--c-line); }
.bz-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.bz-tbl th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 600; color: var(--t2);
  background: var(--c-surface-2);
  padding: var(--sp1) var(--sp2); border-bottom: 1px solid var(--c-line-2);
  white-space: nowrap;
}
.bz-tbl td {
  padding: var(--sp1) var(--sp2); border-bottom: 1px solid var(--c-line);
  color: var(--t1); vertical-align: middle;
}
.bz-tbl tbody tr:hover { background: var(--c-surface-2); }
.bz-tbl tbody tr:last-child td { border-bottom: 0; }
.bz-tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.bz-tbl.compact th, .bz-tbl.compact td { padding: var(--sp0) var(--sp1); }

/* ---------- 徽标 / 芯片 ---------- */
.bz-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp0); border-radius: var(--radius-pill);
  font-size: var(--fs-aux); line-height: 1.5; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.bz-badge.red    { background: var(--tint-red);    border-color: var(--edge-red);    color: var(--tx-red); }
.bz-badge.orange { background: var(--tint-orange); border-color: var(--edge-orange); color: var(--tx-orange); }
.bz-badge.yellow { background: var(--tint-yellow); border-color: var(--edge-yellow); color: var(--tx-yellow); }
.bz-badge.blue   { background: var(--tint-blue);   border-color: var(--edge-blue);   color: var(--tx-blue); }
.bz-badge.green  { background: var(--tint-green);  border-color: var(--edge-green);  color: var(--tx-green); }
.bz-badge.na     { background: var(--c-surface-2); border-color: var(--c-line-2);    color: var(--tx-na); }
.bz-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp1); height: var(--ctl-h-sm); box-sizing: border-box;
  border-radius: var(--radius-pill); border: 1px solid var(--c-line-2);
  background: var(--c-surface); color: var(--t2);
  font-family: inherit; font-size: var(--fs-aux); line-height: 1; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bz-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bz-chip.on {
  background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary);
  font-weight: 600;
}
.bz-chip .cnt {
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--c-surface-3); color: var(--t2);
  font-size: var(--fs-aux); display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.bz-chip.on .cnt { background: var(--c-primary); color: #fff; }
.bz-chip .x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; color: var(--c-muted);
}
.bz-chip .x:hover { background: var(--c-surface-3); color: var(--t1); }

/* ---------- 页签 / 分段 ---------- */
.bz-tabs {
  display: flex; gap: var(--sp-1); align-items: center;
  border-bottom: 1px solid var(--c-line); overflow-x: auto;
}
.bz-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--sp0) var(--sp1); font-family: inherit; font-size: var(--fs-body);
  color: var(--t2); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bz-tab:hover { color: var(--t1); }
.bz-tab.on { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.bz-seg {
  display: inline-flex; padding: var(--sp-1); gap: var(--sp-1);
  background: var(--c-surface-3); border-radius: var(--radius-ctl);
}
.bz-seg button {
  appearance: none; border: 0; background: none; cursor: pointer;
  height: 28px; padding: 0 var(--sp1); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-aux); color: var(--t2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bz-seg button.on { background: var(--c-surface); color: var(--t1); font-weight: 600; box-shadow: var(--elev-1); }

/* ---------- 筛选条 ---------- */
.bz-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp0);
  padding: var(--sp1) var(--sp2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.bz-filterbar input, .bz-filterbar select {
  height: var(--ctl-h-sm); padding: 0 var(--sp0); box-sizing: border-box;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-ctl);
  background: var(--c-surface); color: var(--t1);
  font-family: inherit; font-size: var(--fs-aux);
}
.bz-filterbar input:focus, .bz-filterbar select:focus {
  outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring);
}
.bz-filterbar .grow { flex: 1 1 180px; min-width: 0; }

/* ---------- 指标卡 ---------- */
.bz-kpi {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp2);
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
}
.bz-kpi .k-label { font-size: var(--fs-aux); color: var(--c-muted); }
.bz-kpi .k-value {
  font-size: var(--fs-kpi); font-weight: 700; color: var(--t1);
  line-height: var(--lh-tight); font-variant-numeric: tabular-nums;
}
.bz-kpi .k-sub { font-size: var(--fs-aux); color: var(--t2); }
.bz-kpi .k-bar {
  height: 4px; border-radius: var(--radius-pill); background: var(--c-surface-3);
  overflow: hidden; margin-top: var(--sp-1);
}
.bz-kpi .k-bar > i {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--c-primary);
}

/* ---------- 抽屉 / 浮层 ---------- */
.bz-drawer-mask {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(15, 25, 40, .40); backdrop-filter: blur(2px);
}
.bz-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(92vw, 420px);
  background: var(--c-surface); box-shadow: var(--elev-3);
  display: flex; flex-direction: column;
}
.bz-drawer .bz-p-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp1);
  padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-panel); font-weight: 600; color: var(--t1);
}
.bz-drawer .bz-p-b { padding: var(--sp3); overflow-y: auto; flex: 1 1 auto; }
.bz-drawer .bz-p-f {
  padding: var(--sp1) var(--sp3); border-top: 1px solid var(--c-line);
  background: var(--c-surface-2); display: flex; gap: var(--sp0); justify-content: flex-end;
}
@media (max-width: 680px) {
  .bz-drawer {
    top: auto; left: 0; width: 100%; max-height: 82vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
.bz-pop {
  position: absolute; z-index: var(--z-pop); min-width: 180px;
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  border-radius: var(--radius); box-shadow: var(--elev-2); padding: var(--sp1);
}

/* ---------- 外壳契约：顶栏 / 导航 / 页面容器 ---------- */
.bz-topbar {
  display: flex; align-items: center; gap: var(--sp1);
  padding: var(--sp1) var(--sp3); background: var(--topbar);
  border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: var(--z-topbar);
}
.bz-nav {
  display: flex; align-items: center; gap: var(--sp0);
  padding: 0 var(--sp3); overflow-x: auto;
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
}
.bz-nav a, .bz-nav button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); color: var(--t2);
  padding: var(--sp1) var(--sp0); white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.bz-nav a:hover, .bz-nav button:hover { color: var(--t1); }
.bz-nav a.on, .bz-nav button.on { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.bz-page {
  max-width: var(--wrap-wide); margin: 0 auto;
  padding: var(--sp3) var(--sp3) var(--sp5);
  display: flex; flex-direction: column; gap: var(--sp2);
}

/* ============================================================================
   交互态基座（2026-10-17 新增 · 七端通用）
   ----------------------------------------------------------------------------
   【为什么收口到这里】
   2026-10-17 全家族视觉与交互审查实测：`:active` 按下态在门户 / 白泽言 / 白泽闻 /
   白泽行**一处都没有**（其余三端各 1~3 条，且写法不一），`:focus-visible` 各端
   覆盖从 1 条到 5 条不等。逐端各补一份会立刻重演「各写一份、随后漂移」——
   这正是 2026-10-08 把令牌收口到本目录的原因，交互态同理：改一次，七端生效。

   【为什么一律用 :where()】
   `:where()` 的特异度恒为 0。各端自己写的 `.btn:active{…}` 无论出现在本节之前
   还是之后，特异度都更高，因而永远胜出。⇒ 本节只补缺口，不抢已有设计的方向盘，
   任何一端想保留自己的按下手感都无须写 !important。

   【为什么按下态是 inset 阴影而不是 transform / opacity】
   见 base.css `--press-in` 的注释：白泽戏牌面与气泡上挂了一串 transform 动画
   （xi-floaty / xi-speakBob / 发牌 translate3d），全局按下若叠 transform 会互相
   覆盖；opacity 又会让文字一起变淡、压掉对比度。inset 阴影不参与布局、不创建
   层叠上下文、不影响文字，是全家族唯一安全的按法。

   【为什么不覆盖容器类（.card / .panel）】
   大块面的内缩阴影看起来像「塌陷」而非「按下」。卡片与面板的按压手感依赖各端
   自己的版面语言（门户 .card 已有 hover 抬升 + 阴影加深），留给各端自己定。
   本节只管「控件类」：点了要干活的那些。

   【为什么按下态要避开 :focus-visible】
   键盘 Enter/Space 激活按钮时，元素同时处于 :active 与 :focus-visible。若按下态
   用 box-shadow 表达，会把焦点环顶掉 —— 键盘用户按下瞬间丢失「我在哪儿」的提示。
   故 :active 排除 :focus-visible，视觉上「鼠标按下给内缩、键盘激活保焦点环」。
   ============================================================================ */

/* ---- 1. 过渡兜底：只作用于各端未自定 transition 的控件 ---- */
:where(button, [role="button"], .btn, .btn-primary, .btn-ghost, .btn-mini,
       .bz-btn, .bz-chip, .bz-tab, .bz-seg button, .chip, .icon-btn, .tab, .nav-item, summary) {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* ⚠️ 书写约束（2026-10-17 踩实，改本段前先读）：
   `:where(...)` 的**闭合括号必须与后面的伪类紧邻，中间不能有换行或空格**。
   CSS 里两个选择器之间的空白 = 后代组合器 —— 写成
       :where(a, b)\n  :active { }
   实际解析成「a 或 b 的**后代**里处于 :active 的元素」，对控件自身永远不命中，
   且**不会有任何语法错误提示**。本段最初就是这么写的，产物、sync、check-tokens
   全绿，只有真浏览器按下鼠标才发现 box-shadow 恒为 none。
   ⇒ 括号内换行安全（参数列表），括号后换行致命。 */

/* ---- 2. 按下态（鼠标/触摸）：内缩阴影，不碰 transform ---- */
:where(button, [role="button"], .btn, .btn-primary, .btn-ghost, .btn-mini,
       .bz-btn, .bz-chip, .bz-tab, .bz-seg button, .chip, .icon-btn, .tab, .nav-item):active:not(:focus-visible):not(:disabled):not(.on):not(.active) {
  box-shadow: var(--press-in);
  transition-duration: var(--dur-press);
}

/* ---- 3. 焦点环补全：键盘可达性（各端已写的不会被覆盖）---- */
:where(button, [role="button"], .btn, .btn-primary, .btn-ghost, .btn-mini,
       .bz-btn, .bz-chip, .bz-tab, .bz-seg button, .chip, .icon-btn, .tab, .nav-item, a[href], summary,
       input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- 4. 禁用态口径统一 ---- */
:where(button, .btn, .btn-primary, .bz-btn, .bz-chip, .chip):disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---- 5. 移动端触控热区（≤680px，与门户/白泽居既有断点同口径）----
     只作用于独立控件：表格行内的 .btn-mini / .btn.sm 与分页器不套用 ——
     它们嵌在行内，撑到 40px 会顶破行高与分页条。 */
@media (max-width: 680px) {
  :where(.icon-btn, .chip, .tab, .nav-item, .bz-btn, .bz-chip, .bz-tab):not(.sm) {
    min-height: var(--tap);
    /* 热区是双向的：min-height 只保纵向，窄屏上 28px 宽的纯图标按钮横向仍低于
       WCAG 2.5.5 的 40px 下限（指尖精度横纵同权）。min-width 撑宽后靠 flex/inline-flex
       居中，不改变字号与图标尺寸。 */
    min-width: var(--tap);
  }
  /* 分页器整条一起抬到热区高度，避免只抬按钮导致页码与「共 N 条」错位 */
  .bz-pager button { min-height: var(--tap); }
}

/* ---- 6. 动效降级：按下态是装饰，降级时一并去掉 ---- */
@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], .btn, .btn-primary, .btn-ghost, .btn-mini,
         .bz-btn, .bz-chip, .bz-tab, .bz-seg button, .chip, .icon-btn, .tab, .nav-item) {
    transition: none;
  }
}

/* ---- 7. 品牌徽标（水墨兽形徽记，PNG 透明底）----
   深色档垫白色圆角衬底，保证彩色徽标在深底上的对比度；浅色档透明直接呈现。
   按文件名收口（logo.png / logo-*.png），不侵入各端徽标类名。 */
html.dark :where(img)[src$="logo.png"],
html.dark :where(img)[src^="logo-"] {
  box-sizing: border-box;
  /* 固定像素内边距：img 的百分比 padding 按容器宽度解析，会把徽标挤没 */
  padding: 3px;
  background: #fff;
  border-radius: 22%;
}