@gyyxds/zy-ui 0.0.0-stage → 0.0.2

package/dist/zy-ui/themes/solid.css

@@ -0,0 +1,2350 @@
+/**
+ * 主题「实色键帽」（data-zy-theme="solid"）—— 可落地的材质层
+ *
+ * 与默认主题「基础用法 / 图纸」（data-zy-theme="basic"）相对：
+ * 两套主题共用同一块色板（机构蓝 + 储能绿 + slate 中性），差别全在**材质与层级**上；
+ * 形状与尺寸沿用现状（圆角 6 / 4，胶囊 999，圆形 50%，控件高度不动）。
+ *
+ * 本套语言的六条规则：
+ * 1. 凸凹二象：**能按的件 = 凸（键帽）**，面 + 深一档挤出边 + 两侧白弧 + 底部高光 + 落地影；
+ *    **装东西的件 = 凹（槽）**，2px 内阴影 + 下沿内高光。这一条决定按钮 / 标签 / 卡片 /
+ *    输入框 / 下拉面板 / 进度轨道 / 表格托盘 / 滚动区的全部形态。
+ * 2. 厚度与尺度成正比：小件 2px、控件 4px、面板 4~6px。
+ * 3. 按下必然下沉：位移只有 +Y（沉进底座），松手走回弹；不用缩放冒充「按下」。
+ * 4. 色彩是材质的一档：中性键（白 / 浅灰）是底材，语义色只出现在「要你按」的位置。
+ * 5. 形状语言不动：主题只换材质，不改尺寸与圆角。
+ * 6. 不靠描边分层：键与槽的边界由厚度与光影给出；1px 线只留给槽里的「刻痕」。
+ *
+ * 与组件内 scoped 样式抢属性时，靠前缀 `html[data-zy-theme='solid']` 多出来的那一分
+ * （属性选择器 + 类型选择器）取胜；少数被组件动效底图占住的属性用 !important 并注明。
+ *
+ * 深色**只换光，不换形**：材质这一层逐条复用，夜里靠 §0.1 的一组令牌把「四级阶梯」压暗、
+ * 顶光收薄（95% → 16%）、落影加重。厚度 / 白弧 / 按下下沉全部保留。
+ */
+@import './material.css';
+
+:root[data-zy-theme='solid'],
+html[data-zy-theme='solid'] {
+  /* ---------- 桌面（页面底）：比图纸白深一档，键帽才有台面可落 ---------- */
+  --zy-desk: #e6ecf3;
+  --zy-key-face: #ffffff;
+  --zy-key-base: #d5dfea;
+  --zy-key-base-strong: #c6d2e0;
+  /* 键帽顶部 1px 亮边：塑料件收光的那一道 */
+  --zy-key-edge: rgba(255, 255, 255, 0.95);
+  /*
+   * ---------- 键帽高度：挤出底座的厚度，三档 大 / 正常 / 小 ----------
+   * 大   = 卡片（--zy-card-fill-lift）
+   * 正常 = 按钮与控件（--zy-key-lift-btn、--zy-shadow-card）
+   * 小   = 标签与角标（--zy-tag-fill-lift）、以及复选框 / 单选 / 分页这类小件
+   * 组件自己的尺寸变体在各自档位上再 ±1 档（如 large 标签 = 正常、small 标签 = 小）。
+   */
+  --zy-key-lift-lg: 6px; /* 大 · 卡片 */
+  --zy-key-lift: 4px; /* 正常 · 按钮 / 控件 */
+  --zy-key-lift-sm: 2px; /* 小 · 标签 / 角标 / 小件 */
+  --zy-key-soft: 0 10px 18px rgba(15, 23, 42, 0.1);
+  --zy-key-down: 0 2px 6px rgba(15, 23, 42, 0.14);
+
+  /*
+   * ---------- 键帽那对白弧的图（两份 SVG，主题级单一来源） ----------
+   * 注意：**派生量要在「知道高度的那个元素上」就地声明** —— `var()` 写在自定义属性里，
+   * 是在声明它的元素上求值的，放到根上就会把默认高度烤死。所以这里只放图与两个默认值：
+   *   元素侧声明  --zy-key-h（自身高度）+ 五条派生（gloss / stack / pos / size）→ 见下方按钮与分页器
+   */
+  --zy-key-h: 32px;
+  --zy-key-lift-now: var(--zy-key-lift);
+  --zy-key-arc-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath fill='%23FFF' fill-opacity='.1' fill-rule='nonzero' d='M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z'/%3E%3C/svg%3E");
+  --zy-key-arc-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath fill='%23FFF' fill-opacity='.1' fill-rule='nonzero' d='M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z'/%3E%3C/svg%3E");
+
+  /* ---------- 槽（凹）：输入、轨道、托盘、滚动区 ---------- */
+  --zy-slot-face: #e9eef4;
+  --zy-slot-line: rgba(15, 23, 42, 0.07);
+  --zy-slot-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.13), inset 0 -1px 0 rgba(255, 255, 255, 0.95);
+  --zy-slot-shadow-sm: inset 0 1.5px 3px rgba(15, 23, 42, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
+
+  /* ---------- 覆盖组件层令牌：只动材质与层级 ---------- */
+  --zy-radius: 6px;
+  --zy-radius-sm: 4px;
+  --zy-surface: var(--zy-key-face);
+  --zy-surface-sunken: var(--zy-slot-face);
+  --zy-paper: var(--zy-desk);
+  --zy-hairline: rgba(15, 23, 42, 0.08);
+  --zy-hairline-strong: rgba(15, 23, 42, 0.16);
+  --zy-shadow-card: 0 var(--zy-key-lift) 0 var(--zy-key-base), var(--zy-key-soft);
+  --zy-shadow-float: 0 var(--zy-key-lift-lg) 0 var(--zy-key-base-strong),
+    0 22px 40px rgba(15, 23, 42, 0.2);
+  --zy-shadow-deep: rgba(15, 23, 42, 0.2);
+  --zy-shadow-press: 0 var(--zy-key-lift) 0 color-mix(in srgb, var(--zy-brand) 78%, #000),
+    var(--zy-key-soft);
+  --zy-focus-ring: 0 0 0 2px var(--zy-key-face),
+    0 0 0 4px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+  --zy-weight-control: 600;
+
+  /* 控件高度的本主题档：输入类与按钮、选择器同高 32（尺寸不动） */
+  /*
+   * 控件高度：**与按钮同高**（Element 基础按钮 32px）—— 输入框 / 选择器 / 时间选择器的触发框
+   * 全部取这一档，早先的 36（比按钮高一档）作废。大 / 小档沿用原值。
+   */
+  --zy-control-h: 32px;
+  --zy-control-h-lg: 44px;
+  --zy-control-h-sm: 30px;
+
+  /* 表格：白键面 + 槽托盘 + 更厚的行 */
+  --zy-table-header-bg: var(--zy-key-face);
+  --zy-table-header-h: 46px;
+  --zy-table-row-h: 52px;
+  --zy-table-row-stripe: #f6f9fc;
+  --zy-panel-body-bg: color-mix(in srgb, var(--zy-desk) 70%, transparent);
+
+  /* 实心按钮：本主题不用「上浅下深 + hover 翻转」那张渐变，改由厚度说话 */
+  --zy-btn-grad-primary: none;
+  --zy-btn-grad-primary-hover: none;
+  --zy-btn-grad-success: none;
+  --zy-btn-grad-success-hover: none;
+  --zy-btn-grad-warning: none;
+  --zy-btn-grad-warning-hover: none;
+  --zy-btn-grad-info: none;
+  --zy-btn-grad-info-hover: none;
+  --zy-btn-edge-primary: transparent;
+  --zy-btn-edge-success: transparent;
+  --zy-btn-edge-warning: transparent;
+  --zy-btn-edge-info: transparent;
+
+  /* Element 映射跟着走 */
+  --el-border-radius-base: var(--zy-radius);
+  --el-border-radius-small: var(--zy-radius-sm);
+  --el-box-shadow-light: var(--zy-shadow-card);
+  --el-box-shadow: var(--zy-shadow-float);
+  --el-component-size: var(--zy-control-h);
+  --el-component-size-large: var(--zy-control-h-lg);
+  --el-component-size-small: var(--zy-control-h-sm);
+  --el-border-color: var(--zy-hairline);
+  --el-border-color-light: var(--zy-hairline);
+  --el-border-color-lighter: var(--zy-hairline);
+  --el-border-color-extra-light: var(--zy-hairline);
+  --el-fill-color-light: var(--zy-slot-face);
+  --el-fill-color-lighter: var(--zy-slot-face);
+  --el-mask-color: rgba(15, 23, 42, 0.34);
+
+}
+
+/*
+ * =====================================================================
+ * 0.1 · 夜色令牌（键帽 · 夜）
+ * ---------------------------------------------------------------------
+ * 同一张桌，关了顶灯：槽最暗、桌面次之、键面亮起、浮板最亮。
+ * 这一节只改**值**，不改任何结构与材质规则 —— 上面那层（凸 / 凹 / 白弧 / 厚度）
+ * 一条都不用重写，深色档自动成立。
+ * =====================================================================
+ */
+html.dark[data-zy-theme='solid'] {
+  /* ---------- 四级阶梯 ---------- */
+  --zy-slot-face: #070b12; /* ① 槽：输入 / 托盘 / 轨道 */
+  --zy-desk: #080d14; /* ② 桌面：页面底 */
+  --zy-key-face: #2a3444; /* ③ 键面：按钮 / 卡片 / 标签 */
+  --zy-key-face-float: #303c4c; /* ④ 浮板：对话框 / 弹层 / 面板 */
+
+  --zy-key-base: #1e2734; /* 键面深一档 = 挤出底座 */
+  --zy-key-base-strong: #131a24; /* 浮板 / 深槽里的底座 */
+  /* 顶光：浅色档是 95% 白，夜里只剩一道薄光 */
+  --zy-key-edge: rgba(255, 255, 255, 0.16);
+  --zy-key-soft: 0 10px 18px rgba(0, 0, 0, 0.55);
+  --zy-key-down: 0 2px 6px rgba(0, 0, 0, 0.6);
+
+  /* 语义键面（--zy-*-key）与警示墨字在共用深色板 tokens/dark.css，这里不再重复 */
+
+  /* ---------- 槽：内阴影加深、下沿高光收薄（95% → 6%） ---------- */
+  --zy-slot-line: rgba(255, 255, 255, 0.06);
+  --zy-slot-shadow:
+    inset 0 2px 5px rgba(0, 0, 0, 0.62),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
+  --zy-slot-shadow-sm:
+    inset 0 1.5px 4px rgba(0, 0, 0, 0.66),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
+
+  /* ---------- 覆盖组件层令牌 ---------- */
+  --zy-surface: var(--zy-key-face);
+  --zy-surface-sunken: var(--zy-slot-face);
+  --zy-paper: var(--zy-desk);
+  --zy-hairline: rgba(255, 255, 255, 0.1);
+  --zy-hairline-strong: rgba(255, 255, 255, 0.18);
+  --zy-shadow-card: 0 var(--zy-key-lift) 0 var(--zy-key-base), var(--zy-key-soft);
+  --zy-shadow-float:
+    0 var(--zy-key-lift-lg) 0 var(--zy-key-base-strong),
+    0 28px 48px rgba(0, 0, 0, 0.6);
+  --zy-shadow-deep: rgba(0, 0, 0, 0.55);
+  --zy-shadow-press:
+    0 var(--zy-key-lift) 0 color-mix(in srgb, var(--zy-brand) 74%, #000),
+    var(--zy-key-soft);
+  --zy-focus-ring:
+    0 0 0 2px var(--zy-key-face),
+    0 0 0 4px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+  --zy-panel-body-bg: #1d2632;
+
+  /* 表格：托盘更暗、表头是抬起的键条、斑马行在槽里分层 */
+  --zy-table-header-bg: var(--zy-key-face);
+  --zy-table-header-fg: #cfe1f2;
+  --zy-table-row-stripe: color-mix(in srgb, var(--zy-key-face) 48%, var(--zy-slot-face));
+  --zy-table-row-hover: transparent;
+
+  /* 实心按钮：本主题不用渐变，这里只是把渐变令牌清空 */
+  --zy-btn-grad-primary: none;
+  --zy-btn-grad-primary-hover: none;
+  --zy-btn-grad-success: none;
+  --zy-btn-grad-success-hover: none;
+  --zy-btn-grad-warning: none;
+  --zy-btn-grad-warning-hover: none;
+  --zy-btn-grad-info: none;
+  --zy-btn-grad-info-hover: none;
+
+  /*
+   * 彩色键的 1px 顶亮边：浅色档是纯白（透明），夜里收薄到 34%，
+   * 否则一颗深蓝键上会顶着一条纯白发丝 —— 那是全场最亮的一条线。
+   */
+  --zy-btn-edge-primary: rgba(255, 255, 255, 0.34);
+  --zy-btn-edge-success: rgba(255, 255, 255, 0.34);
+  --zy-btn-edge-warning: rgba(255, 255, 255, 0.34);
+  --zy-btn-edge-info: rgba(255, 255, 255, 0.34);
+  --zy-btn-fill-shade: rgba(255, 255, 255, 0.22);
+
+  /* Element 映射 */
+  --el-fill-color-light: var(--zy-slot-face);
+  --el-fill-color-lighter: var(--zy-slot-face);
+  --el-bg-color-overlay: var(--zy-key-face-float);
+  --el-mask-color: rgba(0, 0, 0, 0.66);
+  --el-border-color: var(--zy-hairline);
+  --el-border-color-light: var(--zy-hairline);
+  --el-border-color-lighter: var(--zy-hairline);
+  --el-border-color-extra-light: var(--zy-hairline);
+}
+
+html[data-zy-theme='solid'] .zy-btn.el-button {
+  font-weight: var(--zy-weight-control);
+  /*
+   * 高度**不动**：Element 把基础按钮高度写死 32px（`--el-button-size` 只在 large / small 上有），
+   * 本主题不去接管它 —— 主题改的是材质，不改尺寸。输入类那档 `--zy-control-h` 也取 32，
+   * 于是输入框 / 选择器 / 按钮三者同高（早先实色主题是 36，比按钮高一档，已作废）。
+   */
+  --zy-key-h-btn: var(--el-button-size, 32px);
+  /* 键帽几何走 material.css 的共享图层：这里只报高度与自己的挤出厚度 */
+  --zy-key-h: var(--zy-key-h-btn);
+  --zy-key-lift-now: var(--zy-key-lift-btn);
+  --zy-key-lift-btn: var(--zy-key-lift); /* 键帽高度「正常」档：按钮 */
+  --zy-key-face-btn: var(--zy-key-face);
+  --zy-key-ink-btn: var(--zy-ink);
+  /* 底座一律由面色深一档推出来 —— 与 .zy-btn.is-fill 的 --zy-btn-fill-base 同一条公式（含中性白键） */
+  --zy-key-base-btn: color-mix(in srgb, var(--zy-key-face-btn) 82%, #000);
+  /* 两侧 10% 白弧：与组件里那两颗 SVG 逐字相同，只是改由背景图层承担 */
+}
+
+/* type 决定面色与字色：彩色键白字，即「要你按的键」 */
+html[data-zy-theme='solid'] .zy-btn.el-button--primary {
+  --zy-key-face-btn: var(--zy-brand);
+  --zy-key-ink-btn: #fff;
+}
+
+html[data-zy-theme='solid'] .zy-btn.el-button--success {
+  --zy-key-face-btn: var(--zy-green);
+  --zy-key-ink-btn: #fff;
+}
+
+html[data-zy-theme='solid'] .zy-btn.el-button--warning {
+  --zy-key-face-btn: var(--zy-warning);
+  --zy-key-ink-btn: #fff;
+}
+
+html[data-zy-theme='solid'] .zy-btn.el-button--danger {
+  /* danger 在色板里只有纯色、没有配套渐变 —— 与组件一致，这一层留空 */
+  --zy-key-face-btn: var(--zy-danger);
+  --zy-key-ink-btn: #fff;
+}
+
+html[data-zy-theme='solid'] .zy-btn.el-button--info {
+  --zy-key-face-btn: var(--zy-info);
+  --zy-key-ink-btn: #fff;
+}
+
+/*
+ * 无 type 的默认键 = 中性键：面白、字墨、底座取冷灰 --zy-key-base。
+ * 这一档就是参照物「实色·中性」那套（fill 的中性档）：白色键不再由「白面混黑」得到中性灰，
+ * 否则同一个白键在 fill 与默认档下会差一档灰（#d5dfea vs #d2d2d2）。
+ */
+html[data-zy-theme='solid'] .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
+  --zy-key-face-btn: var(--zy-key-face);
+  --zy-key-base-btn: var(--zy-key-base);
+  --zy-key-ink-btn: var(--zy-ink);
+}
+
+/* 小号：底座薄一档（与 fill 的三档一致） */
+html[data-zy-theme='solid'] .zy-btn.el-button--small {
+  --zy-key-lift-btn: 3px;
+}
+
+/* plain / dashed：同族的中性键 —— 面白、底座冷灰、字取语义色
+   （厚度与其它键同一档：一棵键只有一个厚度，只有 small 才薄一档） */
+html[data-zy-theme='solid'] .zy-btn.is-plain,
+html[data-zy-theme='solid'] .zy-btn.is-dashed {
+  --zy-key-face-btn: var(--zy-key-face);
+  --zy-key-base-btn: var(--zy-key-base);
+  --zy-key-ink-btn: var(--el-button-text-color);
+}
+
+/* sweep：图标块改成「贴边的彩色小键」，键体本身与其它键同族 */
+html[data-zy-theme='solid'] .zy-btn.is-sweep {
+  --zy-btn-sweep-bw: 0px;
+  /* 键体保持中性面：语义色留在左端那颗图标键上（底座与其它白键同档） */
+  --zy-key-face-btn: var(--zy-key-face);
+  --zy-key-base-btn: var(--zy-key-base);
+  --zy-key-ink-btn: var(--zy-ink);
+}
+
+html[data-zy-theme='solid'] .zy-btn.is-sweep .zy-btn-sweep-icon {
+  /*
+   * 图标块是这条键左端的一段上色键：**只用颜色分段**，不加顶亮边、也不留缝 ——
+   * 早先加过一条 `inset 0 1px 0 rgba(255,255,255,.35)`（想让它读成一颗独立的小键），
+   * 但它只覆盖图标块那一段宽度，铺满同色时就在顶上留下一道多余的实线。
+   */
+  border-radius: var(--zy-radius) 0 0 var(--zy-radius);
+}
+
+/*
+ * 铺色层的裁切壳：组件里它是 `inset: -bw` + `border-radius: inherit`，而 inherit 落到的是
+ * `.zy-btn-sweep` 那一层（没有圆角）—— 于是悬停铺满时把四个圆角顶成直角。这里按按钮自己的
+ * 圆角裁（半径与主题一致，round 走胶囊）。
+ */
+html[data-zy-theme='solid'] .zy-btn.is-sweep .zy-btn-sweep-clip {
+  border-radius: var(--zy-radius);
+}
+
+html[data-zy-theme='solid'] .zy-btn.is-sweep.is-round .zy-btn-sweep-clip {
+  border-radius: var(--zy-radius-pill);
+}
+
+/* ---------- 键帽本体：实心 / 默认 / plain / dashed / sweep 共用一套 ---------- */
+/* 面色 + 两颗白弧 + 底部高光 + 深一档挤出底座，逐项与 .zy-btn.is-fill 对齐 */
+html[data-zy-theme='solid'] .zy-btn.is-press:not(.is-fill):not(.is-text):not(.is-link),
+html[data-zy-theme='solid'] .zy-btn.is-plain,
+html[data-zy-theme='solid'] .zy-btn.is-dashed,
+html[data-zy-theme='solid'] .zy-btn.is-sweep {
+  position: relative;
+  border: 0;
+  background-color: var(--zy-key-face-btn);
+  /* 背景图层会自己按圆角裁切，不需要动 overflow（sweep 还要靠它放色块） */
+  background-image: var(--zy-key-stack) !important;
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  /*
+   * !important 是必须的：组件里那条 `.zy-btn.is-press…el-button--primary` 的静态投影
+   * （box-shadow: var(--zy-shadow-press)）权重比主题层高（10 个类 vs 6），
+   * 不压过去的话，键帽的挤出底座根本轮不到出场。焦点环因此改走 outline（见下）。
+   */
+  box-shadow:
+    0 var(--zy-key-lift-btn) 0 var(--zy-key-base-btn),
+    0 6px 14px rgba(15, 23, 42, 0.25) !important;
+  transition:
+    transform 320ms var(--zy-ease-overshoot),
+    box-shadow 320ms var(--zy-ease-overshoot);
+}
+
+/* 字色：语义键白字、中性键墨字；outline 保持组件给的语义色字 */
+html[data-zy-theme='solid'] .zy-btn.is-press:not(.is-fill):not(.is-text):not(.is-link),
+html[data-zy-theme='solid'] .zy-btn.is-plain,
+html[data-zy-theme='solid'] .zy-btn.is-dashed,
+html[data-zy-theme='solid'] .zy-btn.is-sweep {
+  color: var(--zy-key-ink-btn);
+}
+
+/* dashed：虚线还在，只是它现在是键面上的一道缝合线 */
+html[data-zy-theme='solid'] .zy-btn.is-dashed {
+  outline: 1px dashed color-mix(in srgb, var(--zy-key-ink-btn) 45%, transparent);
+  outline-offset: -5px;
+}
+
+/*
+ * 悬停：**不动**。
+ * 与实色按钮（effect="fill"）逐项对齐 —— 那颗键悬停时唯一的动作是「深色键帽从中心铺满」，
+ * 底座跟着铺开色走；默认键没有这一路铺色，所以悬停就不该有别的动静。
+ * 早期版本在这里加了「抬起 1px」，既与 fill 不一致，还因为悬停选择器天生比按下多一个伪类
+ * （8 个类 vs 7 个）把按下态压住 —— 按压下沉直接失效。
+ */
+
+/* 按下：整块沉进底座，落地影收成一层（每一档 effect 都要沉 —— 这是本主题的手感底线） */
+html[data-zy-theme='solid'] .zy-btn.el-button.is-press:not(.is-fill):not(.is-text):not(.is-link):not(.is-disabled):active,
+html[data-zy-theme='solid'] .zy-btn.el-button.is-plain:not(.is-disabled):active,
+html[data-zy-theme='solid'] .zy-btn.el-button.is-dashed:not(.is-disabled):active,
+html[data-zy-theme='solid'] .zy-btn.el-button.is-sweep:not(.is-disabled):active {
+  /* 与 fill 的按下同一组数值：位移 = 挤出厚度，底座收平，落地影压到一层 */
+  transform: translateY(var(--zy-key-lift-btn));
+  box-shadow:
+    0 0 0 var(--zy-key-base-btn),
+    0 2px 6px rgba(15, 23, 42, 0.2) !important;
+  transition:
+    transform 120ms var(--zy-ease-out),
+    box-shadow 120ms var(--zy-ease-out);
+}
+
+/* 焦点环改走 outline：box-shadow 全给了立体底座（与组件里 fill 那一档同一处理） */
+html[data-zy-theme='solid'] .zy-btn:focus-visible {
+  box-shadow:
+    0 var(--zy-key-lift-btn) 0 var(--zy-key-base-btn),
+    0 6px 14px rgba(15, 23, 42, 0.25) !important;
+  outline: 2px solid var(--zy-key-face-btn);
+  outline-offset: 3px;
+}
+
+
+/* 禁用：键形还在，整颗压淡（与 fill 的禁用同一档） */
+html[data-zy-theme='solid'] .zy-btn.is-press.is-disabled,
+html[data-zy-theme='solid'] .zy-btn.is-plain.is-disabled,
+html[data-zy-theme='solid'] .zy-btn.is-dashed.is-disabled,
+html[data-zy-theme='solid'] .zy-btn.is-sweep.is-disabled {
+  opacity: 0.55;
+}
+
+/* fill：与默认键同一颗键，厚度直接取同一档令牌，保证两处永远一致 */
+html[data-zy-theme='solid'] .zy-btn.is-fill {
+  --zy-btn-fill-lift: var(--zy-key-lift-btn);
+}
+
+/* fill 不写 type 时也走中性键：这样 effect="fill" 与默认键在任何 type 下都逐项相同
+   （组件原本给 fill 的兜底面色是品牌蓝，那是它自带的历史默认值） */
+html[data-zy-theme='solid'] .zy-btn.is-fill:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
+  --zy-btn-fill-clr: var(--zy-key-face);
+  --zy-btn-fill-ink: var(--zy-ink);
+  --zy-btn-fill-base: var(--zy-key-base);
+  /* 铺色后翻成浅色字（铺开的是深色键帽） */
+  --zy-btn-fill-ink-on: #fff;
+}
+
+html[data-zy-theme='solid'] .zy-btn.is-fill .zy-btn-fill-label {
+  font-weight: var(--zy-weight-control);
+}
+
+/*
+ * fill 在实色主题下**不做任何改动** —— 它就是本主题的参照物：厚度、白弧、底部高光、
+ * 悬停铺色、按下、禁用，全部交给组件自己那套数值。主题只声明「默认档也用这套材质」。
+ */
+
+/* ============================================================
+ * 2 · 图标 —— 无材质，只说明线宽与尺寸（见规范文档）
+ * ============================================================ */
+
+/* ============================================================
+ * 3 · 输入框 —— 槽（凹）：内阴影 + 下沿内高光
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-input .el-input__wrapper {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .zy-input .el-input__wrapper:hover {
+    box-shadow: var(--zy-slot-shadow-sm);
+  }
+}
+
+html[data-zy-theme='solid'] .zy-input.is-focus .el-input__wrapper.is-focus,
+html[data-zy-theme='solid'] .zy-input .el-input__wrapper.is-focus {
+  border-color: transparent;
+  box-shadow:
+    var(--zy-slot-shadow),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+/* 下划线 / 渐变 / 粗野三档是动效本身的形态，材质交给它们自己，不动 */
+
+/* ============================================================
+ * 3·凸 · 同一只输入框的「键帽」形态（is-raised）：面翻成**凸** ——
+ * 面 + 两侧 10% 白弧 + 底部高光 + **正常档 4px** 挤出底座 + 落地影。
+ * 输入框是「控件」不是「小件」：键帽高度取三档里的**正常**（与按钮同一档），
+ * 不跟分页键 / 标签那档 2px 走。
+ *
+ * **底座与默认按钮逐值相同**（这是「同一套」的硬标准）：
+ *   底座色 = `--zy-key-base`（中性白键的 `--zy-key-base-btn` 就是它，逐字同值）；
+ *   落地影 = `0 6px 14px rgba(15, 23, 42, .25)`（按钮同一档）；
+ *   没有按钮没有的东西（比如额外的 `inset` 顶亮边），悬停也不动。
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-input.is-raised .el-input__wrapper {
+  --zy-key-h: 32px;
+  --zy-key-lift-now: var(--zy-key-lift);
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-key-face);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  box-shadow:
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 6px 14px rgba(15, 23, 42, 0.25);
+}
+
+/*
+ * 聚焦 = **按下**：与按钮 `.is-press:active` 同一组数值 ——
+ * 位移 = 挤出厚度（4px）、底座收平、落地影压到一层，**不出聚焦环**。
+ * （视觉上就是这颗键沉进底座；失焦再弹回来。）
+ * 这条要压过 ZyInput 自带的 `.is-focus` 环（它带 scoped 属性，权重更高），
+ * 所以选择器一路写到 `.is-focus` 上，多一个类。
+ */
+html[data-zy-theme='solid'] .zy-input.is-raised .el-input__wrapper.is-focus,
+html[data-zy-theme='solid'] .zy-input.is-raised .el-input__wrapper.is-focus:hover {
+  transform: translateY(var(--zy-key-lift));
+  box-shadow:
+    0 0 0 var(--zy-key-base),
+    0 2px 6px rgba(15, 23, 42, 0.2);
+  transition:
+    transform 120ms var(--zy-ease-out),
+    box-shadow 120ms var(--zy-ease-out);
+}
+
+/* ============================================================
+ * 验证码输入 CodeInput —— 每格一颗小键，填满 = 上色键。
+ * 注：这个组件已从板上撤下（04 位置换成滑块拼图验证），材质规则先留着 ——
+ * 库里还用到它的地方照这一套走。
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-code {
+  --zy-code-line: transparent;
+  --zy-code-radius: var(--zy-radius);
+  --zy-code-slot: var(--zy-key-face);
+}
+
+html[data-zy-theme='solid'] .zy-code .zy-code__slot {
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    0 6px 12px rgba(15, 23, 42, 0.08);
+}
+
+html[data-zy-theme='solid'] .zy-code .zy-code__slot.is-filled {
+  background: var(--zy-brand);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.32),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 78%, #000),
+    0 6px 12px rgba(15, 23, 42, 0.12);
+}
+
+html[data-zy-theme='solid'] .zy-code .zy-code__slot.is-filled .zy-code__digit {
+  color: #fff;
+}
+
+/* ============================================================
+ * 5 · 选择器 —— 触发框同槽；下拉面板 = 抬起的板；滑行高亮 = 槽内浅键
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-select .el-select__wrapper {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .zy-select .el-select__wrapper:hover {
+    box-shadow: var(--zy-slot-shadow-sm);
+  }
+}
+
+html[data-zy-theme='solid'] .zy-select.is-focus .el-select__wrapper.is-focused,
+html[data-zy-theme='solid'] .zy-select .el-select__wrapper.is-focused {
+  border-color: transparent;
+  box-shadow:
+    var(--zy-slot-shadow),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+/* 下拉面板：整块按**小键帽**来 —— 键帽形式（面 + 顶亮边 + 挤出底座），厚度取三档里的「小」（2px） */
+html[data-zy-theme='solid'] .zy-select-popper {
+  border: 0 !important;
+  border-radius: var(--zy-radius) !important;
+  background: var(--zy-key-face);
+  /* 面板是「小件」：挤出底座取小档 2px（早先是 8px → 4px，现在按三档规范归到小档），
+     落地影收淡一档，板子读成「一枚小键帽轻轻抬起」而不是「悬空一块砖」。 */
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    0 16px 28px rgba(15, 23, 42, 0.16) !important;
+}
+
+/* 滑行高亮仍是「凹进去的浅键」：面板是凸的，高亮是凹的，一凸一凹才分得清层级 */
+html[data-zy-theme='solid'] .zy-select-popper .zy-select-glide-pill {
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+}
+
+/* ============================================================
+ * 5·凸 · 选择器的「键帽」形态（is-raised）：与 03 那颗凸起输入框**逐值相同** ——
+ * 面 + 两侧 10% 白弧 + 底部高光 + 正常档 4px 底座（--zy-key-base）+ 落地影 0 6px 14px / 25%。
+ * 悬停不动；触发（is-focused）时像按钮一样整块沉进底座，不出环。
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper {
+  --zy-key-h: 32px;
+  --zy-key-lift-now: var(--zy-key-lift);
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-key-face);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  box-shadow:
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 6px 14px rgba(15, 23, 42, 0.25);
+}
+
+/* 悬停不动（这套语言里悬停唯一的动作是铺色，中性键没有那一路） */
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper:hover {
+    box-shadow:
+      0 var(--zy-key-lift) 0 var(--zy-key-base),
+      0 6px 14px rgba(15, 23, 42, 0.25);
+  }
+}
+
+/* 触发 = 按下：与 03 那颗凸起输入框同一组数值 */
+html[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper.is-focused,
+html[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper.is-focus,
+html[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper:focus-visible {
+  transform: translateY(var(--zy-key-lift));
+  box-shadow:
+    0 0 0 var(--zy-key-base),
+    0 2px 6px rgba(15, 23, 42, 0.2);
+  transition:
+    transform 120ms var(--zy-ease-out),
+    box-shadow 120ms var(--zy-ease-out);
+}
+
+/*
+ * 禁用态：**槽形不塌**（厚度是三档里的规范，不因为禁用就抹掉），整块压淡到 55% ——
+ * 与分页器上一页 / 按钮的禁用同一档；字退到 placeholder 档，指针 not-allowed（Element 自带）。
+ */
+html[data-zy-theme='solid'] .zy-select .el-select__wrapper.is-disabled {
+  color: var(--zy-placeholder);
+  opacity: 0.55;
+}
+
+html[data-zy-theme='solid'] .zy-select .el-select__wrapper.is-disabled .el-select__selected-item,
+html[data-zy-theme='solid'] .zy-select .el-select__wrapper.is-disabled .el-select__placeholder {
+  color: var(--zy-placeholder);
+}
+
+/* ============================================================
+ * 6 · 复选框 —— 键帽加大一档，厚度跟着加
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-check,
+html[data-zy-theme='solid'] .zy-tree {
+  --zy-check-size: 18px;
+  /* 键帽高度「小」档：复选框底座的厚度与主题三档一致 */
+  --zy-check-lift: var(--zy-key-lift-sm);
+}
+
+html[data-zy-theme='solid'] .zy-check .el-checkbox__inner,
+html[data-zy-theme='solid'] .zy-tree .el-checkbox__inner {
+  border-radius: var(--zy-radius-sm);
+}
+
+/*
+ * 未选 = **空槽**，与单选框、输入框同一个坑：槽底 + 内阴影压出凹陷。
+ *
+ * 上一版只把描边设成透明、再补一道白色顶光 —— 白色键面落在白卡片上，
+ * 整颗方框就消失了（单选框能扛住是因为圆形本身还有暗角，方框不行）。
+ * 现在面色取槽底，边界由内阴影给出，白卡片上也读得出「这里可以打勾」。
+ */
+html[data-zy-theme='solid'] .zy-check .el-checkbox__input:not(.is-checked):not(.is-indeterminate) .el-checkbox__inner,
+html[data-zy-theme='solid'] .zy-tree .el-checkbox__input:not(.is-checked):not(.is-indeterminate) .el-checkbox__inner {
+  border-color: var(--zy-key-base);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+}
+
+/*
+ * 勾选 / 半选 = **分页器选中键那档蓝**：面色直接取分页选中键实际呈现的颜色
+ * （品牌蓝 + 两侧 10% 白弧合成的那一档，实测 rgb(26,117,177)），所以这里不再叠白弧 ——
+ * 叠了会在小方框上再一次被抬浅、还会带出两道弧的拼接线。底部渐层高光照留。
+ * 顶亮边与底座沿用分页选中键那一套（inset 0.3 白 / 面色深一档），勾与半选横杠白字。
+ * 另外去掉 Element 勾选态自带的 1px 品牌蓝描边。
+ */
+html[data-zy-theme='solid'] .zy-check:not(.is-checkmark):not(.is-tick) .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
+html[data-zy-theme='solid'] .zy-check:not(.is-checkmark):not(.is-tick) .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner,
+html[data-zy-theme='solid'] .zy-tree .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
+html[data-zy-theme='solid'] .zy-tree .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner {
+  --zy-key-h: var(--zy-check-size);
+  --zy-key-lift-now: var(--zy-check-lift);
+  --zy-key-gloss: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) calc((var(--zy-key-h) - var(--zy-key-lift-now)) / 2),
+    rgba(255, 255, 255, 0.3) 100%
+  );
+  border-color: transparent;
+  /* 分页器选中键实际呈现的那档蓝（品牌蓝 + 10% 白弧）—— 与白弧同源，改主色时一起走 */
+  background-color: color-mix(in srgb, var(--zy-brand) 90%, #fff);
+  background-image: var(--zy-key-gloss);
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: 100% 100%;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 82%, #000);
+}
+
+/*
+ * 半选那条横杠：颜色与粗细都跟勾对齐。
+ * Element 默认给它 `transform: scale(.5)`，连高度一起压成 1px，白线看上去就发灰；
+ * 这里只压宽度（scaleX），高度给足 2px（与勾的笔画同宽），颜色直接取勾用的那个变量。
+ */
+html[data-zy-theme='solid'] .zy-check:not(.is-checkmark):not(.is-tick) .el-checkbox__input.is-indeterminate:not(.is-disabled) .el-checkbox__inner::before,
+html[data-zy-theme='solid'] .zy-tree .el-checkbox__input.is-indeterminate:not(.is-disabled) .el-checkbox__inner::before {
+  height: 2px;
+  border-radius: 1px;
+  top: calc((var(--zy-check-size) - 2px) / 2);
+  transform: scaleX(0.5);
+  background-color: var(--el-checkbox-checked-icon-color);
+}
+
+/* ============================================================
+ * 7 · 开关 —— 全息形态是动效语言（保留），本主题只把它按到桌面上
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-switch-track {
+  border-radius: var(--zy-radius-pill);
+  box-shadow:
+    0 var(--zy-key-lift-sm) 0 #0c1622,
+    0 10px 18px rgba(15, 23, 42, 0.22);
+}
+
+/* ============================================================
+ * 8 · 单选框 —— 未选是槽里的小坑，选中是上色键
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-radio .el-radio__inner {
+  width: 18px;
+  height: 18px;
+  border: 0;
+  background: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+}
+
+/*
+ * 选中 = 全息开关里那颗圆球，**配色逐字照搬** ZySwitch 的三层：
+ *   球壳  .zy-switch-thumb  —— radial-gradient(圆, rgba(10,40,90,.9), rgba(0,20,50,.8))
+ *                             + 外环 1px rgba(0,170,255,.6)
+ *                             + 外投影 0 2px 15px rgba(0,0,0,.5) / 内发光 inset 0 0 15px rgba(0,150,255,.5)
+ *   中层  .zy-switch-core   —— radial-gradient(圆, rgba(0,180,255,.6), rgba(0,50,120,.2))
+ *                             + 辉光 0 0 20px rgba(0,150,255,.5)，opacity .9
+ *   亮芯  .zy-switch-inner  —— radial-gradient(圆, rgba(255,255,255,.8), rgba(100,200,255,.5))
+ *                             + 辉光 0 0 10px rgba(100,200,255,.7)，opacity .7
+ * 颜色值一字不改；尺寸与辉光半径按 18 ÷ 54 = 1/3 等比缩（开关那颗球是 54px），
+ * 所以三层落成：球壳 18px、中层 13.3px（.el-radio__inner::before）、亮芯 8.3px（::after）。
+ * 开关原稿给亮芯配了 2s 的心跳动画，这里不搬 —— 单选框是静态标记，不带循环动效。
+ */
+html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked .el-radio__inner {
+  width: 18px;
+  height: 18px;
+  overflow: hidden; /* 与开关那颗球一致：内层的辉光被球壳裁住，不外溢 */
+  border: 1px solid rgba(0, 170, 255, 0.6);
+  background: radial-gradient(circle, rgba(10, 40, 90, 0.9) 0%, rgba(0, 20, 50, 0.8) 100%);
+  box-shadow:
+    0 2px 5px rgba(0, 0, 0, 0.5),
+    inset 0 0 5px rgba(0, 150, 255, 0.5);
+}
+
+html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked .el-radio__inner::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 13.3px;
+  height: 13.3px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, rgba(0, 180, 255, 0.6) 0%, rgba(0, 50, 120, 0.2) 100%);
+  box-shadow: 0 0 6.7px rgba(0, 150, 255, 0.5);
+  opacity: 0.9;
+}
+
+html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked .el-radio__inner::after {
+  width: 8.3px;
+  height: 8.3px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(100, 200, 255, 0.5) 100%);
+  box-shadow: 0 0 3.3px rgba(100, 200, 255, 0.7);
+  opacity: 0.7;
+  /* 中心白点的微动效：向外扩散再收回（与开关那颗亮芯同一路数：2s、alternate、scale ±10% 出头） */
+  animation: zy-radio-core-pulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes zy-radio-core-pulse {
+  0% {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(0.88);
+    box-shadow: 0 0 3px rgba(100, 200, 255, 0.55);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.12);
+    box-shadow: 0 0 7px rgba(100, 200, 255, 0.85);
+  }
+}
+
+/* 与 motion.css 同一约定：减弱动效时这颗白点回到静止 */
+@media (prefers-reduced-motion: reduce) {
+  html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked .el-radio__inner::after {
+    animation: none;
+  }
+}
+
+/*
+ * 选中后的外圈涟漪，参考那份 glitch-radio 的 pulse-wave：scale 1 → 2.5、1.2s、
+ * cubic-bezier(0, 0, .2, 1)、两圈错峰 0.3s。
+ * 涟漪画在**球的外层**（.el-radio__input，与球同位同尺寸、overflow 可见）——
+ * 既不会被球壳的 overflow: hidden 裁掉，也不碰球自身的 transform，
+ * 所以组件那一下点按的回弹（.zy-radio 的 zy-radio-pop，作用在球上）照旧生效。
+ */
+html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked::before,
+html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgba(0, 170, 255, 0.6);
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+  animation: zy-radio-pulse-wave 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked::after {
+  animation-delay: 0.3s;
+}
+
+@keyframes zy-radio-pulse-wave {
+  from {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+
+  to {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* 与 motion.css 同一约定：减弱动效时两圈涟漪也停住 */
+@media (prefers-reduced-motion: reduce) {
+  html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked::before,
+  html[data-zy-theme='solid'] .zy-radio .el-radio__input.is-checked::after {
+    animation: none;
+  }
+}
+
+/* 分段按钮组：轨道是槽，选中块是一颗滑行的键 */
+html[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) {
+  /* 轨道与滑行块在基础主题里是胶囊，这里保持同样的形状语言 */
+  border-radius: var(--zy-radius-pill);
+  background: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) .zy-radio-button-slider {
+  border-radius: var(--zy-radius-pill);
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    0 6px 12px rgba(15, 23, 42, 0.1);
+}
+
+html[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) .zy-radio-button.is-active .el-radio-button__inner {
+  color: var(--zy-brand-deep);
+}
+
+html.dark[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) .zy-radio-button.is-active .el-radio-button__inner {
+  color: var(--zy-brand);
+}
+
+/* ============================================================
+ * 9 · 卡片 —— 大键帽：白面 + 挤出边 + 两侧白弧（弧块由组件自带）
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-card {
+  /* 只换「用哪张面」：中性白键帽 + 墨色字；厚度 / 白弧尺寸 / 内部留白 / 投影全部走组件原本那套 */
+  --zy-card-fill-clr: var(--zy-key-face);
+  --zy-card-fill-ink: var(--zy-ink);
+  --zy-card-fill-line: rgba(15, 23, 42, 0.1);
+  /* 键帽高度「大」档：卡片底座 6px，取自主题令牌，不在组件里另写一份数值 */
+  --zy-card-fill-lift: var(--zy-key-lift-lg);
+}
+
+/* ============================================================
+ * 10 · 标签 —— 默认 = 小键帽（语义浅面 + 深一档底座）；light = 槽标签
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-tag {
+  border-color: transparent !important;
+  /* 标签是「小件」：圆角按规范取 4（控件才是 6）；胶囊另算 */
+  border-radius: var(--zy-radius-sm);
+  padding-inline: 10px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.85),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--el-tag-text-color) 26%, #c8d2de),
+    0 4px 8px rgba(15, 23, 42, 0.08);
+}
+
+html[data-zy-theme='solid'] .zy-tag.is-round {
+  border-radius: var(--zy-radius-pill);
+}
+
+/* fill 已是键帽材质：厚度对齐主题 */
+html[data-zy-theme='solid'] .zy-tag.is-fill:not(.is-round) {
+  /* 数值全部交回组件：实色标签是「实色按钮」同一套材质，不该各写一份 */
+  border-radius: var(--zy-radius-sm);
+  /* 键帽高度「小」档：标签底座 2px（组件原本默认 3px）；large 档回到「正常」4px */
+  --zy-tag-fill-lift: var(--zy-key-lift-sm);
+}
+
+html[data-zy-theme='solid'] .zy-tag.is-fill.el-tag--large {
+  --zy-tag-fill-lift: var(--zy-key-lift);
+}
+
+/* ============================================================
+ * 11 · 徽标 —— 角标 = 小键（面 + 一圈暗底 + 落地影）
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-badge .el-badge__content {
+  border: 0;
+  /* 半径交回 Element（--el-badge-radius: 10px，小圆角胶囊；圆点是 50%）—— 形状不变，只换材质 */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    0 2px 0 rgba(15, 23, 42, 0.26),
+    0 5px 10px rgba(15, 23, 42, 0.18);
+}
+
+/* ============================================================
+ * 12 · 进度条 —— 轨道是槽，填充是带厚度的键条
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-progress .el-progress-bar__outer {
+  border-radius: var(--zy-radius-pill);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-progress .el-progress-bar__inner {
+  border-radius: var(--zy-radius-pill);
+  /*
+   * 面色取实心按钮**弧线中间那档主色**的纵向渐变色值（逐字取 `--zy-btn-grad-primary` 的两个停点：
+   * #00b5ed / #0066a9），**转成横向**铺到进度条上 —— 左端亮、右端深，随填充长度一起走。
+   * 现状那条「品牌蓝 → 储能绿」的横向渐变不再沿用（一条键条只用一个色相，两个语义色混在一条上
+   * 会和键帽语言打架）。按钮本身不动，这里只改进度条的填充色。
+   */
+  background: linear-gradient(90deg, #00b5ed 0%, #0066a9 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
+    0 2px 0 rgba(15, 23, 42, 0.12);
+}
+
+html[data-zy-theme='solid'] .zy-progress .el-progress__text {
+  font-weight: var(--zy-weight-control);
+}
+
+/* ============================================================
+ * 13 · 日期选择器（Element Plus 二次封装；单日 + 日期范围）
+ * 触发框同槽；弹层是一块抬起的板（4px 底座 + 落地影 + 内沿亮边）；
+ * 选中的日子是一枚上色小键（品牌面 + 小档 2px 底座 + 白字），今天只描一圈品牌环。
+ * 时间选择器有自己的 `.zy-time-picker` 规则，这里只认 --date / --daterange。
+ * ============================================================ */
+
+/* 单日是「输入框套输入框」，日期范围把 wrapper 直接穿在身上 —— 两条都按槽处理 */
+html[data-zy-theme='solid'] .el-date-editor--date .el-input__wrapper,
+html[data-zy-theme='solid'] .el-date-editor--daterange {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .el-date-editor--date .el-input__wrapper:hover,
+  html[data-zy-theme='solid'] .el-date-editor--daterange:hover {
+    box-shadow: var(--zy-slot-shadow-sm);
+  }
+}
+
+html[data-zy-theme='solid'] .el-date-editor--date .el-input__wrapper.is-focus,
+html[data-zy-theme='solid'] .el-date-editor--daterange.is-active,
+html[data-zy-theme='solid'] .el-date-editor--daterange.is-focus {
+  border-color: transparent;
+  box-shadow:
+    var(--zy-slot-shadow),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+/* 弹层：一块抬起的板（与时间面板 / 对话框同一档） */
+html[data-zy-theme='solid'] .el-picker-panel {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 16px 28px rgba(15, 23, 42, 0.16);
+}
+
+html[data-zy-theme='solid'] .el-picker-panel .el-date-picker__header-label {
+  color: var(--zy-ink);
+  font-weight: 600;
+}
+
+html[data-zy-theme='solid'] .el-picker-panel .el-date-table th {
+  color: var(--zy-muted);
+  font-weight: 500;
+}
+
+/*
+ * 悬停：一枚白键轻轻浮起（小档 2px），与表格 / 树的悬停同一读法。
+ * 已选中的日子（当前 / 范围两端）**不参与** —— 否则白面会盖掉那颗上色键，
+ * 白字落在白底上就成了「一个没有字的白色小方块」（范围选择器里最容易撞到）。
+ */
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid']
+    .el-picker-panel
+    .el-date-table
+    td.available:not(.current):not(.start-date):not(.end-date):hover
+    .el-date-table-cell__text {
+    border-radius: var(--zy-radius-sm);
+    background-color: var(--zy-key-face);
+    box-shadow:
+      inset 0 1px 0 var(--zy-key-edge),
+      0 2px 0 var(--zy-key-base);
+  }
+}
+
+/* 今天：只描一圈品牌环 */
+html[data-zy-theme='solid'] .el-picker-panel .el-date-table td.today .el-date-table-cell__text {
+  border-radius: var(--zy-radius-sm);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
+/* 范围中段：只铺一层淡品牌底（不给厚度，免得一路长出一排键） */
+html[data-zy-theme='solid'] .el-picker-panel .el-date-table td.in-range .el-date-table-cell__text {
+  background-color: var(--zy-brand-soft);
+  color: var(--zy-brand);
+}
+
+/*
+ * 选中 / 范围两端：与分页器选中键**同一颗小键帽** ——
+ * 同一张面（品牌色）、同一对 10% 白弧、同一条底部高光、同一个底座公式（面色深一档 · 82%）、
+ * 同一层落地影；尺寸跟着日期格收到 24px（分页键是 28px，材质逐项相同、只差尺寸）。
+ */
+html[data-zy-theme='solid'] .el-picker-panel .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
+html[data-zy-theme='solid'] .el-picker-panel .el-date-table td.start-date .el-date-table-cell__text,
+html[data-zy-theme='solid'] .el-picker-panel .el-date-table td.end-date .el-date-table-cell__text {
+  --zy-key-h: 24px;
+  --zy-key-lift-now: var(--zy-key-lift-sm);
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-brand);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 82%, #000),
+    0 4px 8px rgba(15, 23, 42, 0.1);
+}
+
+/* ============================================================
+ * 14 · 表格 —— 整表是一只托盘（槽），表头是抬起的键条，行是托盘里的格子
+ * ============================================================ */
+
+/*
+ * 托盘（槽）包在表格外层 —— 由 ZyTable 自己渲染 .zy-table-tray。
+ * 之前 padding 直接加在 Element 的表格根上：Element 按**边框盒**宽度算列宽，
+ * 内容区却少了这 16px，于是表头比 body 宽 16px，底下就多出一条横向滚动条。
+ */
+html[data-zy-theme='solid'] .zy-table-tray {
+  --el-table-border-color: transparent;
+  padding: 8px;
+  border-radius: var(--zy-radius);
+  background-color: color-mix(in srgb, var(--zy-slot-face) 86%, #b7c5d6);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+/* 单元格不再画 1px 网格，改用槽内的刻痕（极淡的内阴影线） */
+html[data-zy-theme='solid'] .zy-table .el-table__cell {
+  border-right: 0;
+  border-left: 0;
+  box-shadow: inset 0 -1px 0 var(--zy-slot-line);
+}
+
+html[data-zy-theme='solid'] .zy-table th.el-table__cell {
+  border-top: 0;
+  background-color: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    inset 0 -1px 0 rgba(15, 23, 42, 0.06),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base);
+}
+
+/* 表头两端收圆，读成一整条键 */
+html[data-zy-theme='solid'] .zy-table th.el-table__cell:first-child {
+  border-radius: var(--zy-radius) 0 0 0;
+}
+
+html[data-zy-theme='solid'] .zy-table th.el-table__cell:last-child {
+  border-radius: 0 var(--zy-radius) 0 0;
+}
+
+html[data-zy-theme='solid'] .zy-table td.el-table__cell {
+  background-color: transparent;
+}
+
+html[data-zy-theme='solid'] .zy-table .el-table__body tr.el-table__row--striped > td.el-table__cell {
+  background-color: color-mix(in srgb, var(--zy-key-face) 55%, var(--zy-slot-face));
+}
+
+/*
+ * 悬停：**不做任何变化** —— 行不变白键、不露底座、不铺底色，与静止态一模一样。
+ * 表格是「装东西的托盘」，指针扫过只是经过，不是按下去；要按的那一行由它自己那些按钮 / 链接给反馈。
+ * Element 那条默认悬停底色靠 `--el-table-row-hover-bg-color` 关掉；斑马行的条纹照旧
+ * （条纹那条规则比 Element 的悬停规则重，悬停时读到的还是条纹）。
+ */
+html[data-zy-theme='solid'] .zy-table {
+  --el-table-row-hover-bg-color: transparent;
+}
+
+/* ============================================================
+ * 15 · 树形控件 —— 行是槽里的格，选中是上色键
+ * ============================================================ */
+
+/*
+ * 整棵树是一只**托盘**（与表格同一套槽）：树是承载件，按本主题「凸凹二象」应该是凹的。
+ * 之前只给行加了个圆角、没给容器，行是浮在页面上的，跟表格那套读法对不上。
+ */
+html[data-zy-theme='solid'] .zy-tree {
+  padding: 8px;
+  position: relative; /* 滑行高亮那枚小键就挂在树上 */
+  --zy-tree-row: 32px; /* 行高抬到 32px（组件默认 28），与控件的「正常」档对齐 */
+  border-radius: var(--zy-radius);
+  background-color: color-mix(in srgb, var(--zy-slot-face) 86%, #b7c5d6);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-tree .el-tree-node__content {
+  border-radius: var(--zy-radius);
+  /*
+   * 行的左右留白比组件默认宽一档、行间留 3px 缝 —— 高亮时图标才不会贴着键边。
+   * 左侧要 !important：Element 与组件把缩进写成行内 `padding-left: 0`（层级缩进改由引导线承担），
+   * 行内声明只输给 important，普通选择器压不住它。
+   */
+  padding-inline: 12px !important;
+  margin-block: 3px;
+}
+
+/*
+ * 悬停高亮交给「滑行的那枚小键」（下面 .zy-tree-glide）：行自己不铺底色，
+ * 免得两层高亮叠在一起。与小键同款的底色 / 顶亮边 / 小档挤出底座都写在 glide 上。
+ */
+html[data-zy-theme='solid'] .zy-tree .el-tree-node__content:hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/*
+ * 滑行高亮：做法照选择器下拉面板那枚 glide pill —— 一枚小键跟着鼠标在行之间滑过去
+ * （元素由 ZyTree 自己持有并定位，圆角 / 底色 / 厚度在这里定义，与行的内缩、行距自动对齐）。
+ */
+html[data-zy-theme='solid'] .zy-tree-shell .zy-tree-glide {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform 220ms var(--zy-ease-out),
+    width 220ms var(--zy-ease-out),
+    height 220ms var(--zy-ease-out),
+    opacity 150ms var(--zy-ease-out);
+}
+
+/*
+ * 当前节点 = **与 primary 一致的那颗键**：同一档品牌面色 + 两侧 10% 白弧 + 底部渐层高光
+ * （与大键同一套图层，尺寸按这一行自己的高度算，所以行高改成 32 后弧也跟着走）。
+ */
+html[data-zy-theme='solid'] .zy-tree .el-tree-node.is-current > .el-tree-node__content {
+  --zy-key-h: var(--zy-tree-row);
+  --zy-key-lift-now: var(--zy-key-lift-sm);
+  background-color: var(--zy-brand);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 78%, #000);
+}
+
+/* ============================================================
+ * 16 · 提示 —— 键帽条：白面 + 左侧 6px 语义键 + 厚度
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-alert {
+  position: relative;
+  overflow: hidden;
+  padding-left: 20px;
+  border: 0;
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  /*
+   * 底座与落地影都照**默认键**那一套：4px 挤出底座（冷灰）+ 同一条落地影
+   * （原来那条 0 12px 22px .1 只有键的 .25 / 卡片的 .24 的一半，整条提示是飘着的）。
+   */
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 6px 14px rgba(15, 23, 42, 0.25);
+}
+
+html[data-zy-theme='solid'] .zy-alert::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  background: var(--zy-info);
+  /* 6px 语义键块：外沿跟着卡片圆角，上下各收一道亮/暗边，让它读成一块有厚度的塑料 */
+  border-radius: var(--zy-radius) 0 0 var(--zy-radius);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.45),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
+}
+
+/*
+ * 描述文字回墨色：Element 的 is-light 把描述也染成语义色（标题、图标、左侧键块已经够了），
+ * 本主题的规矩是「语义色只出现在要你按的地方」—— 一整条都彩字会把提示读得很吵。
+ */
+html[data-zy-theme='solid'] .zy-alert .el-alert__description {
+  color: var(--zy-muted);
+}
+
+html[data-zy-theme='solid'] .zy-alert.el-alert--success::before {
+  background: var(--zy-green);
+}
+
+html[data-zy-theme='solid'] .zy-alert.el-alert--warning::before {
+  background: var(--zy-warning);
+}
+
+html[data-zy-theme='solid'] .zy-alert.el-alert--error::before {
+  background: var(--zy-danger);
+}
+
+/* ============================================================
+ * 17 · 对话框 —— 抬起的大键帽面板；标题栏是面板上的一条槽
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-dialog {
+  --el-dialog-border-radius: var(--zy-radius);
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  /* 挤出底座取**默认档**（4px）：面板是整块抬起的件，厚度跟"正常"档走 */
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 28px 48px rgba(15, 23, 42, 0.26);
+}
+
+html[data-zy-theme='solid'] .zy-dialog .el-dialog__header {
+  background: var(--zy-slot-face);
+  border-bottom: 0;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    inset 0 -1px 0 var(--zy-slot-line);
+}
+
+html[data-zy-theme='solid'] .zy-dialog .zy-dialog-mark {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background: var(--zy-brand);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.35),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 78%, #000);
+}
+
+/* 关闭按钮的圆角保持基础主题那一档（组件已给 --zy-radius），这里不再单独写 */
+
+html[data-zy-theme='solid'] .zy-dialog .el-dialog__footer {
+  border-top: 0;
+  background: var(--zy-slot-face);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+/* ============================================================
+ * 18 · 分割线 —— 从发丝线变成一道刻痕（上暗下亮）
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-divider.el-divider--horizontal {
+  height: 2px;
+  border-top: 0;
+  border-radius: 2px;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(255, 255, 255, 1));
+}
+
+html[data-zy-theme='solid'] .zy-divider .el-divider__text {
+  background: transparent;
+  padding: 0 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* ============================================================
+ * 19 · 间距 —— 无材质，见规范文档
+ * ============================================================ */
+
+/* ============================================================
+ * 20 · 加载 —— 点 / 柱 / 球都补一层「落在桌面上」的底影
+ * ============================================================ */
+
+/*
+ * 底影要加在那 6px 的圆点上（`.zy-loading-dot::before`），**不能**加在 `.zy-loading-dot` 上 ——
+ * 后者是每个点的 64×64 旋转包裹盒：盒子透明、各自带不同旋转角，加在它上面会投出一片方形阴影，
+ * 在浅底上读出来就是几根错位的线（实测就是这个形状）。柱形那颗球是真元素，照旧给它。
+ */
+html[data-zy-theme='solid'] .zy-loading-dot::before,
+html[data-zy-theme='solid'] .zy-loading-ball {
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.28);
+}
+
+html[data-zy-theme='solid'] .zy-loading-bar {
+  /* 柱形加载条在基础主题里是方头（组件没给圆角），这里同样不加 */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.35),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
+}
+
+/* ============================================================
+ * 21 · 时间选择器 —— 触发框同槽，弹层是抬起的板（4px），三列滚动区是槽，选中项是一枚上色小键
+ * （主题层按将来 ZyTimePicker 的根类名 `.zy-time-picker` 写，封装前后的规则不用改）
+ * ============================================================ */
+
+/*
+ * 触发框：单日是一层 `el-input__wrapper`；时间范围把 wrapper 直接穿在自己身上
+ * （`.zy-time-picker.el-input__wrapper.el-range-editor`），所以两条都要写。
+ */
+html[data-zy-theme='solid'] .zy-time-picker .el-input__wrapper,
+html[data-zy-theme='solid'] .zy-time-picker.el-input__wrapper {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-time-picker .el-input__wrapper.is-focus,
+html[data-zy-theme='solid'] .zy-time-picker.el-input__wrapper.is-active,
+html[data-zy-theme='solid'] .zy-time-picker.el-input__wrapper.is-focus {
+  border-color: transparent;
+  box-shadow:
+    var(--zy-slot-shadow),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+/* 弹层：与下拉面板同一档（抬起 4px）。单日走 `.el-time-panel`，范围走 `.el-time-range-picker` */
+html[data-zy-theme='solid'] .el-time-panel,
+html[data-zy-theme='solid'] .el-time-range-picker {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 16px 28px rgba(15, 23, 42, 0.16);
+}
+
+/*
+ * 三列滚动区：**不加凹槽**，直接铺在板面上 —— 与 13 日期选择器的日格一致：
+ * 平坦的内容直接落在白色板上，只有「选中的那一格」才是凸起的小键。
+ * （早先这里给每列套了槽面 + 内阴影，三列连起来像一块嵌进去的深色块，和日期面板不是一套读法。）
+ */
+
+/*
+ * 滚动区离板边留 6px：白色板面要像日期 / 下拉面板那样在内容**四周露出来**一圈，
+ * 不然三列槽会顶到板的圆角上，读起来就不是「一块抬起的板里装着三个槽」。
+ * 页脚不吃这条 —— 它要通铺到板底，那才是这块板的底座边。
+ */
+html[data-zy-theme='solid'] .el-time-panel .el-time-panel__content,
+html[data-zy-theme='solid'] .el-time-range-picker .el-time-range-picker__body {
+  margin: 6px;
+}
+
+/* 选中项：一枚上色小键；悬停项只提亮一档 */
+html[data-zy-theme='solid'] .el-time-panel .el-time-spinner__item.is-active,
+html[data-zy-theme='solid'] .el-time-range-picker .el-time-spinner__item.is-active {
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-brand);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.35),
+    0 2px 0 color-mix(in srgb, var(--zy-brand) 78%, #000);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .el-time-panel .el-time-spinner__item:hover:not(.is-disabled):not(.is-active),
+  html[data-zy-theme='solid'] .el-time-range-picker .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
+    background: var(--zy-key-face);
+    border-radius: var(--zy-radius-sm);
+    box-shadow:
+      inset 0 1px 0 var(--zy-key-edge),
+      0 2px 0 var(--zy-key-base);
+  }
+}
+
+/* 范围弹层的两栏表头（Start / End）与中间那道分隔线 */
+html[data-zy-theme='solid'] .el-time-range-picker__header {
+  color: var(--zy-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+html[data-zy-theme='solid'] .el-time-range-picker__cell + .el-time-range-picker__cell {
+  border-left: 1px solid var(--zy-slot-line);
+}
+
+/* 页脚：与对话框页脚同一处理（槽面 + 顶刻痕）—— 单日 / 范围共用同一个类名 */
+html[data-zy-theme='solid'] .el-time-panel__footer {
+  border-top: 0;
+  background: var(--zy-slot-face);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+/* ============================================================
+ * 22 · 分页器 —— 一排**小正方形键**，键间留缝：
+ * 未选 = 默认键（中性键帽：白面 + 底下一层挤出边），选中 = 主色键（品牌面 + 深一档底座）。
+ * 与按钮同一套材质语言，只是尺寸收到 28px；跳页输入框是槽。
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-pagination {
+  /* EP 自己的底色/圆角都让开，改由下面这颗键统一给 */
+  --el-pagination-button-bg-color: transparent;
+  --el-pagination-bg-color: transparent;
+  --el-pagination-button-disabled-bg-color: var(--zy-key-face);
+  --el-pagination-hover-color: var(--zy-brand);
+  --el-pagination-button-width: 28px;
+  --el-pagination-button-height: 28px;
+  --el-pagination-button-width-small: 24px;
+  --el-pagination-button-height-small: 24px;
+  --el-pagination-item-gap: 12px;
+  font-family: var(--zy-font-sans);
+  color: var(--zy-ink);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pager li,
+html[data-zy-theme='solid'] .zy-pagination button.btn-prev,
+html[data-zy-theme='solid'] .zy-pagination button.btn-next {
+  /*
+   * 与按钮同一套键帽图层：两侧 10% 白弧（左下 / 右上）+ 底部渐层高光 ——
+   * 尺寸按这一格自己的高度算，所以选中那格换底色时，四个角该亮的还是亮的。
+   */
+  --zy-key-h: var(--el-pagination-button-width);
+  /* 键帽高度取三档里的「小」（2px）：分页键是 28px 的小方键，与标签 / 复选框同一档 */
+  --zy-key-lift-now: var(--zy-key-lift-sm);
+  /* 正方形，一格一颗；`margin` 就是键与键之间的缝 */
+  width: var(--el-pagination-button-width);
+  min-width: var(--el-pagination-button-width);
+  height: var(--el-pagination-button-height);
+  margin: 0 5px;
+  padding: 0;
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-key-face);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  color: var(--zy-ink);
+  font-weight: var(--zy-weight-control);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    0 4px 8px rgba(15, 23, 42, 0.1);
+  transition:
+    background-color var(--zy-duration-press) var(--zy-ease-soft),
+    transform 120ms var(--zy-ease-out),
+    box-shadow 120ms var(--zy-ease-out);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pager li.is-active {
+  background-color: var(--zy-brand);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 82%, #000);
+}
+
+/* 省略号（…）不按键做：只是两个可点的文字，别在整排里多出两块塑料 */
+html[data-zy-theme='solid'] .zy-pagination .el-pager li.more {
+  background-color: transparent;
+  background-image: none;
+  color: var(--zy-muted);
+  box-shadow: none;
+  transform: none;
+}
+
+/* 悬停：与默认键同一约定 —— 材质不动，只把字色提到品牌色（EP 自带那一条） */
+
+/*
+ * 按下：与其它键同一手感（沉进底座、影收平）。
+ * 翻页按钮要排掉禁用态 —— 实测 Chrome 里**禁用的 <button> 依然匹配 :active**，
+ * 不排掉的话，停在第一页 / 最后一页时那颗灰键一按还会沉下去。
+ */
+html[data-zy-theme='solid'] .zy-pagination .el-pager li:active,
+html[data-zy-theme='solid'] .zy-pagination button.btn-prev:not(:disabled):active,
+html[data-zy-theme='solid'] .zy-pagination button.btn-next:not(:disabled):active {
+  transform: translateY(var(--zy-key-lift-sm));
+  box-shadow: 0 0 0 var(--zy-key-base);
+}
+
+/* 禁用：键形还在、整颗压淡（与按钮的禁用同一档） */
+html[data-zy-theme='solid'] .zy-pagination .btn-prev:disabled,
+html[data-zy-theme='solid'] .zy-pagination .btn-next:disabled {
+  color: var(--zy-placeholder);
+  opacity: 0.55;
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base);
+}
+
+/* 上下页里的箭头放大一档，跟方键的视觉重量对齐 */
+html[data-zy-theme='solid'] .zy-pagination .btn-prev .el-icon,
+html[data-zy-theme='solid'] .zy-pagination .btn-next .el-icon {
+  font-size: 13px;
+}
+
+/* 跳页输入框：与输入框同槽 */
+html[data-zy-theme='solid'] .zy-pagination .el-input__wrapper {
+  border: 0;
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-input__wrapper.is-focus {
+  box-shadow:
+    var(--zy-slot-shadow-sm),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__total,
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__jump {
+  color: var(--zy-muted);
+}
+
+/* ============================================================
+ * 04 · 滑块拼图验证（实色键帽，方案稿）：一块槽 + 两枚键
+ * 验证区是槽（凹），缺口是槽里挖出来的暗腔；拼图块是主色键、手柄是中性白键，
+ * 都按三档里的「小」取 2px 挤出底座；下面的轨道也是槽，走过的部分是上色的浅键。
+ * ============================================================ */
+
+/* 图片区：一块槽 */
+html[data-zy-theme='solid'] .zy-verify__scene {
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+}
+
+/*
+ * 缺口 = 图片上挖出来的一块：半透明墨色剪影 + 槽口那道内阴影（图换了它也一直对）。
+ * 顶上那半圆只给同样的色，别加内阴影 —— 挖出来的腔在圆头那一小块上没有上沿。
+ */
+html[data-zy-theme='solid'] .zy-verify__gap {
+  border-radius: var(--zy-radius-sm);
+  background: color-mix(in srgb, var(--zy-ink) 60%, transparent);
+  box-shadow:
+    inset 0 2px 4px rgba(15, 23, 42, 0.34),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
+}
+
+html[data-zy-theme='solid'] .zy-verify__gap::after {
+  background: color-mix(in srgb, var(--zy-ink) 60%, transparent);
+}
+
+/* 拼图块：主色键帽（面 + 顶亮边 + 小档 2px 底座 + 两侧 10% 白弧 + 底部渐层高光） */
+html[data-zy-theme='solid'] .zy-verify__piece {
+  --zy-key-h: 42px;
+  --zy-key-lift-now: var(--zy-key-lift-sm);
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-brand);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--zy-brand) 82%, #000),
+    0 4px 8px rgba(15, 23, 42, 0.16);
+  transition:
+    box-shadow 160ms var(--zy-ease-out),
+    background-color 160ms var(--zy-ease-out);
+}
+
+/* 顶上那颗圆头同面同亮边，和方块连成一块拼图 */
+html[data-zy-theme='solid'] .zy-verify__piece::after {
+  background-color: var(--zy-brand);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+/* 底部轨道：也是槽；走过的部分是上色的浅键（不给厚度，读成「进度铺过去」） */
+html[data-zy-theme='solid'] .zy-verify__track {
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+  color: var(--zy-muted);
+}
+
+html[data-zy-theme='solid'] .zy-verify__fill {
+  background: color-mix(in srgb, var(--zy-brand) 22%, var(--zy-slot-face));
+}
+
+/* 手柄：中性白键（与默认按钮、分页键同一套材质，尺寸收到 40×36） */
+html[data-zy-theme='solid'] .zy-verify__handle {
+  /* 键帽几何跟着手柄的高度走：38 + 底座 2 = 40，正好贴满轨道上下（见 board.css 里那段说明） */
+  --zy-key-h: 38px;
+  --zy-key-lift-now: var(--zy-key-lift-sm);
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-key-face);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  color: var(--zy-brand);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    /* 底座取深一档：手柄是**贴在槽里**的一颗键，底下的那 2px 得读得出来 ——
+       用常规 `--zy-key-base` 会和槽面糊成一片，看着像上下留了缝 */
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base-strong),
+    0 2px 4px rgba(15, 23, 42, 0.1);
+  transition:
+    box-shadow 140ms var(--zy-ease-out),
+    background-color 140ms var(--zy-ease-out);
+}
+
+html[data-zy-theme='solid'] .zy-verify__refresh {
+  color: var(--zy-muted);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .zy-verify__refresh:hover {
+    color: var(--zy-brand);
+  }
+}
+
+/* 拖动中：整块抬起来一点（落地影拉开），松手落回 */
+html[data-zy-theme='solid'] .zy-verify.is-dragging .zy-verify__piece,
+html[data-zy-theme='solid'] .zy-verify.is-dragging .zy-verify__handle {
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base-strong),
+    0 6px 12px rgba(15, 23, 42, 0.18);
+}
+
+/* 通过：缺口合上（描边转主色）、拼图块沉进槽里（底座收平）、提示转主色 */
+html[data-zy-theme='solid'] .zy-verify.is-pass .zy-verify__gap {
+  box-shadow:
+    inset 0 2px 4px rgba(15, 23, 42, 0.34),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+html[data-zy-theme='solid'] .zy-verify.is-pass .zy-verify__piece {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 color-mix(in srgb, var(--zy-brand) 82%, #000),
+    0 2px 6px rgba(15, 23, 42, 0.16);
+}
+
+html[data-zy-theme='solid'] .zy-verify.is-pass .zy-verify__track {
+  color: var(--zy-brand);
+}
+
+/* 没对准：轨道与提示转珊瑚红（danger），手柄也转红 */
+html[data-zy-theme='solid'] .zy-verify.is-fail .zy-verify__track {
+  color: var(--zy-danger);
+}
+
+html[data-zy-theme='solid'] .zy-verify.is-fail .zy-verify__handle {
+  color: var(--zy-danger);
+  box-shadow:
+    /*
+     * 红圈取 **inset**：① 写在最前面，不会被手柄那 2px 实心底座盖住 —— 早先写成外圈又排在
+     * 底座后面，表现就是「左 / 上 / 右 都有红边，唯独底部没有」；② 外圈在 0% / 100% 两端会探出
+     * 轨道外面，inset 永远在键自己身上，四边齐、也不越界。
+     */
+    inset 0 0 0 2px color-mix(in srgb, var(--zy-danger) 55%, transparent),
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base-strong);
+}
+
+/* ============================================================
+ * 23 · 通用容器 —— 一块**抬起的板**：白面 + 顶亮边 + 默认档 4px 挤出底座 + 落地影；
+ * 有标题时标题栏白、正文那档浅灰；**无标题时通体白面**。
+ * 与对话框 / 下拉面板同一套材质，只是厚度按「容器」这一档。
+ * （结构与版面在 board.css）
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-panel {
+  /*
+   * 1px **透明**边（不是描边）：和规格卡同一条做法 —— 卡片也是靠这 1px 透明边
+   * 让底下的白面透出来，正文那层灰因此自带一圈 1px 白边。这里照抄，边界读法才一致。
+   * （盒子是 border-box，外面尺寸不变）
+   */
+  border: 1px solid transparent;
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 12px 26px rgba(15, 23, 42, 0.12);
+}
+
+html[data-zy-theme='solid'] .zy-panel__head {
+  /*
+   * 标题栏与容器**同面**（白），分隔那条带子**照规格卡抄**：
+   * 卡片是 [2px 槽线] + [1px 透明边 → 白面透出来] 之后才接正文，这里逐字节相同。
+   * （早先只画了 1px 槽线，所以两处的过渡带对不上）
+   */
+  background: var(--zy-key-face);
+  border-bottom: 1px solid transparent;
+  box-shadow: inset 0 -2px 0 var(--zy-slot-line);
+}
+
+/*
+ * 正文区取的是**卡片内容区那档浅灰**（与展示板的 .spec-stage 同一个配方）：
+ * 标题栏白、内容区浅灰 —— 容器和卡片是同一套读法。
+ * 只对有标题的容器生效：`:has(.zy-panel__head)` 就是「有标题」那个条件，
+ * 无标题的容器没有这一段，通体白面。
+ */
+html[data-zy-theme='solid'] .zy-panel:has(.zy-panel__head) > .zy-panel__body {
+  background: var(--zy-panel-body-bg);
+}
+
+/* ============================================================
+ * 无障碍：实色主题的按压、回弹、滑行和辉光都必须尊重 reduced-motion。
+ * 组件自身的 reduced-motion 规则保留；这里兜住主题层新增的过渡与动画。
+ * ============================================================ */
+/*
+ * =====================================================================
+ * 0.2 · 逐组件的「光」
+ * ---------------------------------------------------------------------
+ * 前面那些写死的浅色（rgba(15,23,42) 的落影、纯白的顶边、白面键）在夜里等于没有，
+ * 这一节按**同一组数值**把它们换成夜色：厚度、位移、圆角一个都不改，只换光。
+ * 写法与提案稿逐条对齐；配色仍从 §0.1 的令牌里取。
+ * =====================================================================
+ */
+
+/* 2.1 键帽几何：solid.css 里那些写死的浅色落影（rgba(15,23,42)）在深色下等于没有，
+ * 这里按同一组数值把「影」换成黑，厚度与位移一个都不改。 */
+html.dark[data-zy-theme='solid'] .zy-btn.is-press:not(.is-fill):not(.is-text):not(.is-link),
+html.dark[data-zy-theme='solid'] .zy-btn.is-plain,
+html.dark[data-zy-theme='solid'] .zy-btn.is-dashed,
+html.dark[data-zy-theme='solid'] .zy-btn.is-sweep {
+  box-shadow:
+    0 var(--zy-key-lift-btn) 0 var(--zy-key-base-btn),
+    0 6px 14px rgba(0, 0, 0, 0.55) !important;
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.el-button.is-press:not(.is-fill):not(.is-text):not(.is-link):not(.is-disabled):active,
+html.dark[data-zy-theme='solid'] .zy-btn.el-button.is-plain:not(.is-disabled):active,
+html.dark[data-zy-theme='solid'] .zy-btn.el-button.is-dashed:not(.is-disabled):active,
+html.dark[data-zy-theme='solid'] .zy-btn.el-button.is-sweep:not(.is-disabled):active {
+  box-shadow:
+    0 0 0 var(--zy-key-base-btn),
+    0 2px 6px rgba(0, 0, 0, 0.6) !important;
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn:focus-visible {
+  box-shadow:
+    0 var(--zy-key-lift-btn) 0 var(--zy-key-base-btn),
+    0 6px 14px rgba(0, 0, 0, 0.55) !important;
+}
+
+/* 2.2 彩色键面：键面用深档，字仍用白（这一条是「字色跟面走」的正面用法） */
+html.dark[data-zy-theme='solid'] .zy-btn.el-button--primary {
+  --zy-key-face-btn: var(--zy-brand-key);
+  --zy-key-ink-btn: #fff;
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.el-button--success {
+  --zy-key-face-btn: var(--zy-green-key);
+  --zy-key-ink-btn: #fff;
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.el-button--warning {
+  --zy-key-face-btn: var(--zy-warning-key);
+  --zy-key-ink-btn: var(--zy-warning-ink);
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.el-button--danger {
+  --zy-key-face-btn: var(--zy-danger-key);
+  --zy-key-ink-btn: #fff;
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.el-button--info {
+  --zy-key-face-btn: var(--zy-info-key);
+  --zy-key-ink-btn: #fff;
+}
+
+/* fill（键帽本体）用的是组件自己的 --zy-btn-fill-* 一组：
+ * 面色跟着深档、底座跟着面色深一档、影换成黑 —— 数值还是组件那几条公式，只换输入。 */
+html.dark[data-zy-theme='solid'] .zy-btn.is-fill {
+  --zy-btn-fill-clr: var(--zy-brand-key);
+  --zy-btn-fill-hover-clr: #121a24;
+  --zy-btn-fill-shadow:
+    0 var(--zy-btn-fill-lift) 0 var(--zy-btn-fill-base),
+    0 6px 14px rgba(0, 0, 0, 0.55);
+  --zy-btn-fill-shadow-on:
+    0 var(--zy-btn-fill-lift) 0 var(--zy-btn-fill-base-on),
+    0 6px 14px rgba(0, 0, 0, 0.55);
+  --zy-btn-fill-shadow-down:
+    0 0 0 var(--zy-btn-fill-base),
+    0 2px 6px rgba(0, 0, 0, 0.6);
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.is-fill.el-button--success {
+  --zy-btn-fill-clr: var(--zy-green-key);
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.is-fill.el-button--warning {
+  --zy-btn-fill-clr: var(--zy-warning-key);
+  --zy-btn-fill-ink: var(--zy-warning-ink);
+  /* 悬停铺开的是深色键帽，铺开之后字必须回到白 —— 不能让墨字落在深色上 */
+  --zy-btn-fill-ink-on: #fff;
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.is-fill.el-button--danger {
+  --zy-btn-fill-clr: var(--zy-danger-key);
+}
+
+html.dark[data-zy-theme='solid'] .zy-btn.is-fill.el-button--info {
+  --zy-btn-fill-clr: var(--zy-info-key);
+}
+
+/* 中性键（无 type）：面用键面档，底座仍是「面色深一档」那条公式 */
+html.dark[data-zy-theme='solid'] .zy-btn.is-fill:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
+  --zy-btn-fill-clr: var(--zy-key-face);
+  --zy-btn-fill-base: var(--zy-key-base);
+  --zy-btn-fill-ink: var(--zy-ink);
+  --zy-btn-fill-ink-on: #fff;
+}
+
+/* 2.3 控件：槽不变形，只把「凹」加深；聚焦仍是槽外 2px 品牌环 */
+html.dark[data-zy-theme='solid'] .zy-input.is-raised .el-input__wrapper,
+html.dark[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper {
+  box-shadow:
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 6px 14px rgba(0, 0, 0, 0.55);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html.dark[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper:hover {
+    box-shadow:
+      0 var(--zy-key-lift) 0 var(--zy-key-base),
+      0 6px 14px rgba(0, 0, 0, 0.55);
+  }
+}
+
+html.dark[data-zy-theme='solid'] .zy-input.is-raised .el-input__wrapper.is-focus,
+html.dark[data-zy-theme='solid'] .zy-input.is-raised .el-input__wrapper.is-focus:hover,
+html.dark[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper.is-focused,
+html.dark[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper.is-focus,
+html.dark[data-zy-theme='solid'] .zy-select.is-raised .el-select__wrapper:focus-visible {
+  box-shadow:
+    0 0 0 var(--zy-key-base),
+    0 2px 6px rgba(0, 0, 0, 0.6);
+}
+
+/* 2.4 浮板：对话框 / 下拉 / 日期 / 时间 / 面板都抬到第四级，底座取更深的 --zy-key-base-strong */
+html.dark[data-zy-theme='solid'] .zy-select-popper,
+html.dark[data-zy-theme='solid'] .el-picker-panel,
+html.dark[data-zy-theme='solid'] .el-time-panel,
+html.dark[data-zy-theme='solid'] .el-time-range-picker {
+  background: var(--zy-key-face-float);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base-strong),
+    0 20px 36px rgba(0, 0, 0, 0.62) !important;
+}
+
+html.dark[data-zy-theme='solid'] .zy-select-popper .zy-select-glide-pill {
+  background: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+}
+
+html.dark[data-zy-theme='solid'] .zy-dialog {
+  background: var(--zy-key-face-float);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base-strong),
+    0 32px 56px rgba(0, 0, 0, 0.7);
+}
+
+html.dark[data-zy-theme='solid'] .zy-dialog .el-dialog__header,
+html.dark[data-zy-theme='solid'] .zy-dialog .el-dialog__footer,
+html.dark[data-zy-theme='solid'] .el-time-panel__footer {
+  background: var(--zy-slot-face);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+html.dark[data-zy-theme='solid'] .zy-dialog .zy-dialog-mark {
+  background: var(--zy-brand-key);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.24),
+    0 var(--zy-key-lift-sm) 0 var(--zy-brand-key-hover);
+}
+
+html.dark[data-zy-theme='solid'] .zy-panel {
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 16px 30px rgba(0, 0, 0, 0.5);
+}
+
+html.dark[data-zy-theme='solid'] .zy-panel__head {
+  background: var(--zy-key-face);
+  box-shadow: inset 0 -2px 0 var(--zy-slot-line);
+}
+
+/* 2.5 选中的那几处：solid.css 里它们都直接铺 `--zy-brand`（亮档），
+ * 深色下必须换成键面档，否则白字落在亮蓝上只有 2.4:1。 */
+html.dark[data-zy-theme='solid'] .zy-pagination .el-pager li.is-active,
+html.dark[data-zy-theme='solid'] .el-picker-panel .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
+html.dark[data-zy-theme='solid'] .el-picker-panel .el-date-table td.start-date .el-date-table-cell__text,
+html.dark[data-zy-theme='solid'] .el-picker-panel .el-date-table td.end-date .el-date-table-cell__text,
+html.dark[data-zy-theme='solid'] .el-time-panel .el-time-spinner__item.is-active,
+html.dark[data-zy-theme='solid'] .el-time-range-picker .el-time-spinner__item.is-active,
+html.dark[data-zy-theme='solid'] .zy-tree .el-tree-node.is-current > .el-tree-node__content,
+html.dark[data-zy-theme='solid'] .zy-verify__piece {
+  background-color: var(--zy-brand-key);
+}
+
+html.dark[data-zy-theme='solid'] .zy-pagination .el-pager li.is-active,
+html.dark[data-zy-theme='solid'] .el-picker-panel .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
+html.dark[data-zy-theme='solid'] .el-picker-panel .el-date-table td.start-date .el-date-table-cell__text,
+html.dark[data-zy-theme='solid'] .el-picker-panel .el-date-table td.end-date .el-date-table-cell__text,
+html.dark[data-zy-theme='solid'] .el-time-panel .el-time-spinner__item.is-active,
+html.dark[data-zy-theme='solid'] .el-time-range-picker .el-time-spinner__item.is-active,
+html.dark[data-zy-theme='solid'] .zy-tree .el-tree-node.is-current > .el-tree-node__content,
+html.dark[data-zy-theme='solid'] .zy-verify__piece {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 var(--zy-key-lift-sm) 0 var(--zy-brand-key-hover);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tree .el-tree-node.is-current > .el-tree-node__content {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 var(--zy-key-lift-sm) 0 var(--zy-brand-key-hover);
+}
+
+html.dark[data-zy-theme='solid'] .zy-verify__piece::after {
+  background-color: var(--zy-brand-key);
+}
+
+/* 2.6 其余小件：把浅色档写死的落影 / 高光换成深色下的对应物 */
+html.dark[data-zy-theme='solid'] .zy-pagination .el-pager li,
+html.dark[data-zy-theme='solid'] .zy-pagination button.btn-prev,
+html.dark[data-zy-theme='solid'] .zy-pagination button.btn-next {
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    0 4px 8px rgba(0, 0, 0, 0.45);
+}
+
+html.dark[data-zy-theme='solid'] .zy-pagination .el-pager li:active,
+html.dark[data-zy-theme='solid'] .zy-pagination button.btn-prev:not(:disabled):active,
+html.dark[data-zy-theme='solid'] .zy-pagination button.btn-next:not(:disabled):active {
+  box-shadow: 0 0 0 var(--zy-key-base);
+}
+
+html.dark[data-zy-theme='solid'] .zy-pagination .btn-prev:disabled,
+html.dark[data-zy-theme='solid'] .zy-pagination .btn-next:disabled {
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base);
+}
+
+/* 复选框：面色取键面档（白勾 4.88:1），底座仍按「面色深一档」 */
+html.dark[data-zy-theme='solid'] .zy-check:not(.is-checkmark):not(.is-tick) .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
+html.dark[data-zy-theme='solid'] .zy-check:not(.is-checkmark):not(.is-tick) .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner,
+html.dark[data-zy-theme='solid'] .zy-tree .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
+html.dark[data-zy-theme='solid'] .zy-tree .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner {
+  background-color: var(--zy-brand-key);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 var(--zy-key-lift-sm) 0 var(--zy-brand-key-hover);
+}
+
+/* 分段组滑行块 / 树里的滑行键：面与底座走键面档 */
+html.dark[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) .zy-radio-button-slider {
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    0 6px 12px rgba(0, 0, 0, 0.5);
+}
+
+html.dark[data-zy-theme='solid'] .zy-radio .el-radio__inner {
+  background: var(--zy-slot-face);
+}
+
+/* 开关：全息轨道保留，只把「按在桌上」的那 2px 底座换成更深的档 */
+html.dark[data-zy-theme='solid'] .zy-switch-track {
+  box-shadow:
+    0 var(--zy-key-lift-sm) 0 #04070b,
+    0 10px 18px rgba(0, 0, 0, 0.55);
+}
+
+/* 标签：浅色档的底座是「面色 26% 混 #c8d2de」（浅灰），深色下混到键面上；顶亮边从 85% 收薄 */
+html.dark[data-zy-theme='solid'] .zy-tag {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    0 var(--zy-key-lift-sm) 0 color-mix(in srgb, var(--el-tag-text-color) 24%, var(--zy-key-base)),
+    0 4px 8px rgba(0, 0, 0, 0.35);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tag.is-fill {
+  --zy-tag-fill-clr: var(--zy-brand-key);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tag.is-fill.el-tag--success {
+  --zy-tag-fill-clr: var(--zy-green-key);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tag.is-fill.el-tag--warning {
+  --zy-tag-fill-clr: var(--zy-warning-key);
+  /* 琥珀面上白字只有 2.19:1；同 «实心按钮» 的做法，字换深墨（9.19:1） */
+  color: var(--zy-warning-ink);
+  --el-tag-text-color: var(--zy-warning-ink);
+  --el-tag-hover-color: var(--zy-warning-ink);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tag.is-fill.el-tag--danger {
+  --zy-tag-fill-clr: var(--zy-danger-key);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tag.is-fill.el-tag--info {
+  --zy-tag-fill-clr: var(--zy-info-key);
+}
+
+/* 2.7 卡片：ZyCard 自己会把「面色 82% + 黑」推成底座、再配一层写死的浅色落影
+ * （rgba(15,23,42,.24)）—— 深色下这层影等于没有，而且推出来的底座比 --zy-key-base 更亮一档。
+ * 卡片与按钮必须共用同一个底座，否则同一张桌上会出现两种厚度的键。 */
+html.dark[data-zy-theme='solid'] .zy-card {
+  --zy-card-fill-base: var(--zy-key-base);
+  --zy-card-fill-base-on: #0f151d;
+  --zy-card-fill-hover-clr: #121a24;
+  /* 页眉分割线在键面上是一道「刻痕」，不是一道亮线 */
+  --zy-card-fill-line: rgba(0, 0, 0, 0.45);
+  --zy-card-fill-shadow:
+    0 var(--zy-card-fill-lift) 0 var(--zy-key-base),
+    0 14px 26px rgba(0, 0, 0, 0.5);
+  --zy-card-fill-shadow-press: 0 0 0 var(--zy-key-base);
+}
+
+/* 2.8 舞台：同 A 的 1.9 —— 半透明叠色在深色下会把「台面」压到比桌面更暗，层级就反了 */
+
+/* 角标：一圈暗底 + 落地影，深色下影要更实 */
+html.dark[data-zy-theme='solid'] .zy-badge .el-badge__content {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 2px 0 rgba(0, 0, 0, 0.5),
+    0 5px 10px rgba(0, 0, 0, 0.45);
+}
+
+/* 进度条：轨道是槽；填充是一条键条，亮端提亮、暗端落深 */
+html.dark[data-zy-theme='solid'] .zy-progress .el-progress-bar__inner {
+  background: linear-gradient(90deg, #5aa6e4 0%, #2876af 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.28),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
+    0 2px 0 rgba(0, 0, 0, 0.45);
+}
+
+/* 表格：托盘（槽）比桌面再暗一档；表头的下沿刻痕改成暗线；斑马行的条纹从键面混出来 */
+html.dark[data-zy-theme='solid'] .zy-table-tray {
+  background-color: #0e1622;
+  box-shadow: var(--zy-slot-shadow);
+}
+
+html.dark[data-zy-theme='solid'] .zy-table th.el-table__cell {
+  background-color: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base);
+}
+
+html.dark[data-zy-theme='solid'] .zy-table .el-table__body tr.el-table__row--striped > td.el-table__cell {
+  background-color: color-mix(in srgb, var(--zy-key-face) 42%, var(--zy-slot-face));
+}
+
+/* 树：整棵是托盘；悬停滑行的是一枚小键（面 + 顶光 + 小档底座） */
+html.dark[data-zy-theme='solid'] .zy-tree {
+  background-color: #0e1622;
+  box-shadow: var(--zy-slot-shadow);
+}
+
+html.dark[data-zy-theme='solid'] .zy-tree-shell .zy-tree-glide {
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base);
+}
+
+/* 提示：键帽条 + 左侧 6px 语义键块；底座 / 落影 / 亮边都换成深色档 */
+html.dark[data-zy-theme='solid'] .zy-alert {
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 6px 14px rgba(0, 0, 0, 0.55);
+}
+
+/* 分割线：仍是一道刻痕（上暗下亮），深色下「暗」是纯黑、「亮」是 10% 白 —— 不能再用纯白 */
+html.dark[data-zy-theme='solid'] .zy-divider.el-divider--horizontal {
+  background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.1) 100%);
+}
+
+/* 加载：落在桌面上的底影换成黑 */
+html.dark[data-zy-theme='solid'] .zy-loading-dot::before,
+html.dark[data-zy-theme='solid'] .zy-loading-ball {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
+}
+
+/* 滑块拼图验证：槽里的缺口要更暗（浅色档是墨色 60%，深色下直接用黑） */
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-zy-theme='solid']
+    :is(
+      .zy-btn,
+      .zy-btn-fill-clr,
+      .zy-card,
+      .zy-card-fill-clr,
+      .zy-check .el-checkbox__inner,
+      .zy-radio .el-radio__inner,
+      .zy-radio .el-radio__input.is-checked::before,
+      .zy-radio .el-radio__input.is-checked::after,
+      .zy-pagination .el-pager li,
+      .zy-pagination button.btn-prev,
+      .zy-pagination button.btn-next,
+      .zy-select .el-select__wrapper,
+      .zy-input .el-input__wrapper,
+      .zy-tree .el-tree-node__content,
+      .zy-mega-menu__trigger,
+      .zy-mega-menu__panel,
+      .zy-mega-menu__glide,
+      .zy-verify__piece,
+      .zy-verify__handle
+    ) {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* ============================================================
+ * 24 · 菜单导航（Mega Menu）—— 实色键帽
+ *
+ * 条 = **无标题容器那张面**（白面 + 1px 顶光 + 4px 底座 + 落影），
+ * 入口是面上的字（悬停按出一个小坑），展开那颗**点亮并按下**（品牌面 + 两侧白弧 + 底部高光），
+ * 面板 = 第四级浮板，面板里的悬停反过来凹下去（槽）—— 一凸一凹才分得清层级。
+ *
+ * 深色：夜色令牌在 §0.1（键面 / 浮板 / 槽 / 语义键面），菜单只在自己的根上把它们
+ * 映成一组 --zy-mm-* —— 条、面板、槽、点亮键各自取对应那一级，不再写死数值。
+ * ============================================================ */
+
+html[data-zy-theme='solid'] .zy-mega-menu {
+  --zy-mm-bar: var(--zy-key-face);
+  --zy-mm-bar-base: var(--zy-key-base);
+  --zy-mm-bar-edge: var(--zy-key-edge);
+  --zy-mm-bar-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
+  --zy-mm-panel: var(--zy-key-face);
+  --zy-mm-panel-shadow:
+    0 var(--zy-key-lift-lg) 0 var(--zy-key-base-strong),
+    0 22px 40px rgba(15, 23, 42, 0.2);
+  --zy-mm-slot: var(--zy-slot-face);
+  --zy-mm-slot-line: var(--zy-slot-line);
+  --zy-mm-slot-shadow: var(--zy-slot-shadow-sm);
+  --zy-mm-key: var(--zy-brand);
+  --zy-mm-key-base: color-mix(in srgb, var(--zy-brand) 78%, #000);
+  --zy-mm-brand: var(--zy-brand);
+  --zy-mm-key-edge: rgba(255, 255, 255, 0.3);
+  --zy-mm-more: var(--zy-brand);
+  --zy-mm-ink: var(--zy-ink);
+  --zy-mm-muted: var(--zy-muted);
+}
+
+html.dark[data-zy-theme='solid'] .zy-mega-menu {
+  /* 夜里的四级阶梯全部取 §0.1 的令牌：条回到键面、面板上浮一档、面板里的悬停沉进槽 */
+  --zy-mm-bar: var(--zy-key-face);
+  --zy-mm-bar-base: var(--zy-key-base);
+  --zy-mm-bar-edge: var(--zy-key-edge);
+  --zy-mm-bar-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
+  --zy-mm-panel: var(--zy-key-face-float);
+  --zy-mm-panel-shadow: var(--zy-shadow-float);
+  --zy-mm-slot: var(--zy-slot-face);
+  --zy-mm-slot-line: var(--zy-slot-line);
+  --zy-mm-slot-shadow: var(--zy-slot-shadow-sm);
+  --zy-mm-key: var(--zy-brand-key);
+  --zy-mm-key-base: var(--zy-brand-key-hover);
+  /* 文字品牌取共用板的 --zy-brand（#5aa6e4，与方案稿同值） */
+  --zy-mm-brand: var(--zy-brand);
+  --zy-mm-key-edge: rgba(255, 255, 255, 0.22);
+  --zy-mm-more: color-mix(in srgb, var(--zy-brand) 74%, #fff);
+  --zy-mm-ink: var(--zy-ink);
+  --zy-mm-muted: var(--zy-muted);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__bar {
+  padding: 0 10px;
+  border-radius: var(--zy-radius);
+  background: var(--zy-mm-bar);
+  box-shadow:
+    inset 0 1px 0 var(--zy-mm-bar-edge),
+    0 var(--zy-key-lift) 0 var(--zy-mm-bar-base),
+    var(--zy-mm-bar-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__mark {
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-mm-slot);
+  color: var(--zy-mm-brand);
+  box-shadow: var(--zy-mm-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__sub {
+  color: var(--zy-mm-muted);
+}
+
+/* 条已经是一张「面」，入口就不再是浮在槽上的键，而是面上的字：
+ * 悬停把它按出一个小坑（槽）；展开那颗才升级成「点亮并按下」的品牌键。 */
+html[data-zy-theme='solid'] .zy-mega-menu__trigger,
+html[data-zy-theme='solid'] .zy-mega-menu__plain {
+  color: var(--zy-mm-ink);
+  border-radius: var(--zy-radius-sm);
+  background: transparent;
+  box-shadow: none;
+  transition:
+    background-color 120ms var(--zy-ease-soft),
+    box-shadow 120ms var(--zy-ease-soft),
+    color 120ms var(--zy-ease-soft);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__trigger:hover,
+html[data-zy-theme='solid'] .zy-mega-menu__plain:hover {
+  background: var(--zy-mm-slot);
+  box-shadow: var(--zy-mm-slot-shadow);
+}
+
+/* 展开 = 点亮并按下：与 primary / 树当前行同一套键帽图层（白弧与高光由 material.css 给），底座收平 */
+html[data-zy-theme='solid'] .zy-mega-menu__trigger.is-open {
+  --zy-key-h: 32px;
+  --zy-key-lift-now: var(--zy-key-lift-sm);
+  color: #fff;
+  background-color: var(--zy-mm-key);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+  box-shadow:
+    inset 0 1px 0 var(--zy-mm-key-edge),
+    0 0 0 var(--zy-mm-key-base);
+  transform: translateY(2px);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__panel {
+  top: calc(100% + 12px);
+  background: var(--zy-mm-panel);
+  border-radius: 8px;
+  box-shadow:
+    inset 0 1px 0 var(--zy-mm-bar-edge),
+    var(--zy-mm-panel-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__glide {
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-mm-slot);
+  box-shadow: var(--zy-mm-slot-shadow);
+}
+
+/* 浮板上的图标：刻一个小坑 —— 白面浮板上，白面键自己是看不见的 */
+html[data-zy-theme='solid'] .zy-mega-menu__ico {
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-mm-slot);
+  color: var(--zy-mm-ink);
+  box-shadow: var(--zy-mm-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__title,
+html[data-zy-theme='solid'] .zy-mega-menu__group-link {
+  color: var(--zy-mm-ink);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__desc,
+html[data-zy-theme='solid'] .zy-mega-menu__note {
+  color: var(--zy-mm-muted);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__badge {
+  color: var(--zy-mm-brand);
+  background: var(--zy-brand-soft);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__foot {
+  box-shadow: inset 0 1px 0 var(--zy-mm-slot-line);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__more {
+  color: var(--zy-mm-more);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__card {
+  border-radius: var(--zy-radius);
+  background: var(--zy-mm-slot);
+  box-shadow: var(--zy-mm-slot-shadow);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__group-title {
+  color: var(--zy-mm-muted);
+  box-shadow: inset 0 -1px 0 var(--zy-mm-slot-line);
+}
+
+/* 浅底槽里的说明字：muted 在 #e9eef4 上只有 3.9:1，换成 78% 的墨（≈8.4:1） */
+html[data-zy-theme='solid'] .zy-mega-menu__kicker,
+html[data-zy-theme='solid'] .zy-mega-menu__card-desc {
+  color: color-mix(in srgb, var(--zy-mm-ink) 78%, transparent);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__card-title {
+  color: var(--zy-mm-ink);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__group-ico {
+  color: var(--zy-mm-muted);
+}