@gyyxds/zy-ui 0.0.2 → 0.0.4

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

@@ -18,7 +18,7 @@
  * 与组件内 scoped 样式抢属性时，靠前缀 `html[data-zy-theme='solid']` 多出来的那一分
  * （属性选择器 + 类型选择器）取胜；少数被组件动效底图占住的属性用 !important 并注明。
  *
- * 深色**只换光，不换形**：材质这一层逐条复用，夜里靠 §0.1 的一组令牌把「四级阶梯」压暗、
+ * 深色**只换光，不换形**：材质这一层逐条复用，夜里靠 §0.1 的一组令牌把「四级阶梯」压暗、
  * 顶光收薄（95% → 16%）、落影加重。厚度 / 白弧 / 按下下沉全部保留。
  */
 @import './material.css';
@@ -34,13 +34,13 @@ html[data-zy-theme='solid'] {
   --zy-key-edge: rgba(255, 255, 255, 0.95);
   /*
    * ---------- 键帽高度：挤出底座的厚度，三档 大 / 正常 / 小 ----------
-   * 大   = 卡片（--zy-card-fill-lift）
-   * 正常 = 按钮与控件（--zy-key-lift-btn、--zy-shadow-card）
+   * 大   = 浮板 / 对话框（--zy-key-lift-lg、--zy-shadow-float）
+   * 正常 = 按钮 / 控件 / 卡片（--zy-key-lift-btn、--zy-card-fill-lift、--zy-shadow-card）
    * 小   = 标签与角标（--zy-tag-fill-lift）、以及复选框 / 单选 / 分页这类小件
    * 组件自己的尺寸变体在各自档位上再 ±1 档（如 large 标签 = 正常、small 标签 = 小）。
    */
-  --zy-key-lift-lg: 6px; /* 大 · 卡片 */
-  --zy-key-lift: 4px; /* 正常 · 按钮 / 控件 */
+  --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);
@@ -128,96 +128,96 @@ html[data-zy-theme='solid'] {
 
 }
 
-/*
- * =====================================================================
- * 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);
-}
-
+/*
+ * =====================================================================
+ * 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);
   /*
@@ -426,6 +426,134 @@ html[data-zy-theme='solid'] .zy-btn.is-fill .zy-btn-fill-label {
  * 悬停铺色、按下、禁用，全部交给组件自己那套数值。主题只声明「默认档也用这套材质」。
  */
 
+/* ============================================================
+ * 1·凸 · 默认键（type 为空）的液态玻璃面 —— 仅 B 浅色
+ * ------------------------------------------------------------
+ * 默认键没有语义色。这里把它做成一块**实色玻璃**：四边由面本身收，
+ * 不靠描边 / 内影，轮廓与 Primary 一样锐利；表面是平的，按压只下沉、不鼓。
+ *
+ *   面     #cfe0f0（原半透明面在 B 桌面上的合成色）
+ *   雾     ::before，竖向白，横向 mask 收进中间；向下收透
+ *   大弧   ::after，主题两条弧的路径，填白色渐变，收进边内 1px
+ *   底光   主题 --zy-key-gloss
+ *   底座   面色合成色 × 82% + 黑（与 Primary 同一条公式）
+ *   按下   贴平：底座收平，不保留落地影
+ *
+ * 暗色档、plain / dashed / sweep / fill 仍走原主题，不在此规则内。
+ * ::before 在 is-loading 下让给 Element 的 loading 遮罩；雾 / 弧 / 文字
+ * 都排除 loading，避免盖住遮罩。
+ * ============================================================ */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link) {
+  /* 实色玻璃面：四边由实色面收，和 Primary 的面边一样硬 */
+  --zy-key-glass-face: #cfe0f0;
+  /* 底座：面色合成色 × 82% + 黑，与 Primary 同一条公式 */
+  --zy-key-glass-base: color-mix(in srgb, #c6d8ea 82%, #000);
+  /* 乳白雾：中间一团，上下收干净；横向 24%–76% 收进中间 */
+  --zy-key-glass-fog: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.88) 26%,
+    rgba(255, 255, 255, 0.82) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --zy-key-glass-fog-mask: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    #000 24%,
+    #000 76%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  /* 两块大弧形白高光：与主题同路径，填充改成白色渐变 */
+  --zy-key-glass-arc: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.52) 0%,
+    rgba(255, 255, 255, 0.34) 45%,
+    rgba(255, 255, 255, 0.22) 100%
+  );
+  --zy-key-glass-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-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-glass-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-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");
+
+  position: relative;
+  /* ::before 的负层级落在「按钮背景之上、文字之下」 */
+  isolation: isolate;
+  background-color: var(--zy-key-glass-face) !important;
+  /* 底部高光仍用主题那张图；面是实色，四边不靠底色透出来 */
+  background-image: var(--zy-key-gloss) !important;
+  background-repeat: no-repeat !important;
+  background-position: left top !important;
+  background-size: 100% 100% !important;
+  box-shadow:
+    0 var(--zy-key-lift-btn) 0 var(--zy-key-glass-base),
+    0 6px 14px rgba(15, 23, 42, 0.25) !important;
+}
+
+/* 乳白雾：单独一层，横向被 mask 收进中间；loading 下让给 Element 的遮罩 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--zy-key-glass-fog);
+  -webkit-mask-image: var(--zy-key-glass-fog-mask);
+  mask-image: var(--zy-key-glass-fog-mask);
+  pointer-events: none;
+}
+
+/* 两块大弧形白高光：收进边内 1px，最外圈留给实色面，四边才锐利 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  z-index: 1;
+  border-radius: inherit;
+  background: var(--zy-key-glass-arc);
+  -webkit-mask-image: var(--zy-key-glass-arc-l), var(--zy-key-glass-arc-r);
+  mask-image: var(--zy-key-glass-arc-l), var(--zy-key-glass-arc-r);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position:
+    left calc(var(--zy-key-h) * -0.18) bottom 0,
+    right calc(var(--zy-key-h) * -0.27) top 0;
+  mask-position:
+    left calc(var(--zy-key-h) * -0.18) bottom 0,
+    right calc(var(--zy-key-h) * -0.27) top 0;
+  -webkit-mask-size:
+    var(--zy-key-h) 100%,
+    calc(var(--zy-key-h) * 1.1) 100%;
+  mask-size:
+    var(--zy-key-h) 100%,
+    calc(var(--zy-key-h) * 1.1) 100%;
+  pointer-events: none;
+}
+
+/* 文字 / 图标压在弧之上；loading 下交回 Element 的遮罩层级 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)
+  .zy-btn-text,
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)
+  > .el-icon {
+  position: relative;
+  z-index: 2;
+}
+
+/* 按下：贴平桌面 —— 底座收平，落地影去掉；位移 / 时长仍走主题 active 规则 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info).is-press:not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-disabled):active {
+  box-shadow: 0 0 0 var(--zy-key-glass-base) !important;
+}
+
+/* 焦点环：玻璃面不能用主题的白环，改用品色 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--zy-brand) 55%, transparent);
+  outline-offset: 3px;
+}
+
 /* ============================================================
  * 2 · 图标 —— 无材质，只说明线宽与尺寸（见规范文档）
  * ============================================================ */
@@ -871,7 +999,7 @@ html.dark[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) .zy-radio
 }
 
 /* ============================================================
- * 9 · 卡片 —— 大键帽：白面 + 挤出边 + 两侧白弧（弧块由组件自带）
+ * 9 · 卡片 —— 正常键帽：白面 + 挤出边 + 两侧白弧（弧块由组件自带）
  * ============================================================ */
 
 html[data-zy-theme='solid'] .zy-card {
@@ -879,8 +1007,8 @@ 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);
+  /* 正常档：卡片底座 4px，与按钮 / 控件同一档 */
+  --zy-card-fill-lift: var(--zy-key-lift);
 }
 
 /* ============================================================
@@ -1749,397 +1877,397 @@ html[data-zy-theme='solid'] .zy-panel:has(.zy-panel__head) > .zy-panel__body {
  * 无障碍：实色主题的按压、回弹、滑行和辉光都必须尊重 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%，深色下直接用黑） */
-
+/*
+ * =====================================================================
+ * 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(
@@ -2166,185 +2294,185 @@ html.dark[data-zy-theme='solid'] .zy-loading-ball {
     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);
-}
+}
+
+/* ============================================================
+ * 24 · 菜单导航（Mega Menu）—— 实色键帽
+ *
+ * 条 = **无标题容器那张面**（白面 + 1px 顶光 + 4px 底座 + 落影），
+ * 入口是面上的字（悬停按出一个小坑），展开那颗**点亮并按下**（品牌面 + 两侧白弧 + 底部高光），
+ * 面板 = 正常键帽（键面 + 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: var(--zy-shadow-card);
+  --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);
+  --zy-mm-panel-shadow: var(--zy-shadow-card);
+  --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,
+html[data-zy-theme='solid'] .zy-mega-menu__trigger.is-current,
+html[data-zy-theme='solid'] .zy-mega-menu__plain.is-current,
+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 var(--zy-key-lift-sm) 0 var(--zy-mm-key-base);
+}
+
+html[data-zy-theme='solid'] .zy-mega-menu__panel {
+  top: calc(100% + 12px);
+  background: var(--zy-mm-panel);
+  border-radius: var(--zy-radius);
+  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,
+html[data-zy-theme='solid'] .zy-mega-menu__link.is-current,
+html[data-zy-theme='solid'] .zy-mega-menu__group-link.is-current {
+  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);
+}