@gyyxds/zy-ui 0.0.1 → 0.0.3

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

@@ -1,832 +1,837 @@
-/**
- * 主题「基础用法 / 图纸」（data-zy-theme="basic"）的材质层。
- *
- * 基础外观主要来自语义令牌与组件自带样式；这一层只补图纸语言与默认结构不同的局部：
- * 卡片纸面化、标签小件圆角、控件高度、选择器禁用、树 / 表格行、分页器、日期 / 时间面板等。
- * 新增组件时，优先在组件自身和 Token 层完成，只有跨组件的材质差异才放这里。
- */
-
-html[data-zy-theme='basic'] .zy-pagination {
-  --el-pagination-button-bg-color: var(--zy-surface);
-  --el-pagination-bg-color: var(--zy-surface);
-  --el-pagination-border-radius: var(--zy-radius-sm);
-  --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;
-  color: var(--zy-ink);
-}
-
-/* 一格的形状：小正方形，键与键之间留缝 */
-html[data-zy-theme='basic'] .zy-pagination .el-pager li,
-html[data-zy-theme='basic'] .zy-pagination button.btn-prev,
-html[data-zy-theme='basic'] .zy-pagination button.btn-next {
-  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: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius-sm);
-  background-color: var(--zy-surface);
-  color: var(--zy-ink);
-  font-weight: var(--zy-weight-control);
-  box-shadow: var(--zy-shadow-card);
-  transition:
-    color var(--zy-duration-press) var(--zy-ease-soft),
-    border-color var(--zy-duration-press) var(--zy-ease-soft),
-    background-color var(--zy-duration-press) var(--zy-ease-soft);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  html[data-zy-theme='basic'] .zy-pagination .el-pager li:hover:not(.is-active):not(.more),
-  html[data-zy-theme='basic'] .zy-pagination button.btn-prev:hover:not(:disabled),
-  html[data-zy-theme='basic'] .zy-pagination button.btn-next:hover:not(:disabled) {
-    border-color: var(--zy-brand);
-    color: var(--zy-brand);
-  }
-}
-
-/* 选中 = primary 实心按钮：同一张渐变 + 上沿亮边 */
-html[data-zy-theme='basic'] .zy-pagination .el-pager li.is-active {
-  background-image: var(--zy-btn-grad-primary);
-  background-origin: border-box;
-  border-color: transparent;
-  border-top-color: var(--zy-btn-edge-primary);
-  color: var(--zy-ink-inverse, #fff);
-}
-
-/* 省略号只是一段可点的文字，不占一颗按钮 */
-html[data-zy-theme='basic'] .zy-pagination .el-pager li.more {
-  border-color: transparent;
-  background: transparent;
-  box-shadow: none;
-  color: var(--zy-muted);
-}
-
-html[data-zy-theme='basic'] .zy-pagination button.btn-prev:disabled,
-html[data-zy-theme='basic'] .zy-pagination button.btn-next:disabled {
-  color: var(--zy-placeholder);
-  background-color: var(--zy-surface-sunken);
-  border-color: var(--zy-hairline);
-  box-shadow: none;
-}
-
-html[data-zy-theme='basic'] .zy-pagination .el-pagination__total,
-html[data-zy-theme='basic'] .zy-pagination .el-pagination__jump {
-  color: var(--zy-muted);
-}
-
-/* 卡 = 白纸片（发丝边 + 极轻双层影），键帽只留给键帽主题 */
-html[data-zy-theme='basic'] .zy-card {
-  --zy-card-fill-clr: var(--zy-surface);
-  --zy-card-fill-ink: var(--zy-ink);
-  --zy-card-fill-base: var(--zy-hairline);
-  --zy-card-fill-lift: 0px;
-  --zy-card-fill-line: var(--zy-hairline);
-  --zy-card-fill-shadow: var(--zy-shadow-card);
-  --zy-card-fill-shadow-press: var(--zy-shadow-card);
-  border: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius);
-}
-
-/* ============================================================
- * 13 · 日期选择器（Element Plus 二次封装；单日 + 日期范围）
- * 触发框同输入框（白底 + 1px 发丝边；聚焦「描边转主色 + 3px 高亮光环」）；
- * 弹层是白面板 + 1px 发丝边 + 极轻影；选中的日子是一枚蓝色实心小方块（小件 4px 圆角）。
- * 时间选择器有自己的 `.zy-time-picker` 规则，这里只认 --date / --daterange。
- * 新组件，不带 :not(.dark)：深色档跟着令牌走。
- * ============================================================ */
-
-/* 单日是「输入框套输入框」，日期范围把 wrapper 直接穿在身上 —— 两条都按输入框处理 */
-html[data-zy-theme='basic'] .el-date-editor--date .el-input__wrapper,
-html[data-zy-theme='basic'] .el-date-editor--daterange {
-  border-radius: var(--zy-radius);
-  background-color: var(--zy-surface);
-  box-shadow: 0 0 0 1px var(--zy-hairline) inset;
-}
-
-html[data-zy-theme='basic'] .el-date-editor--date .el-input__wrapper:hover,
-html[data-zy-theme='basic'] .el-date-editor--daterange:hover {
-  box-shadow: 0 0 0 1px var(--zy-hairline-strong) inset;
-}
-
-/* 聚焦：与 03 输入框同一条 */
-html[data-zy-theme='basic'] .el-date-editor--date .el-input__wrapper.is-focus,
-html[data-zy-theme='basic'] .el-date-editor--daterange.is-active,
-html[data-zy-theme='basic'] .el-date-editor--daterange.is-focus {
-  box-shadow:
-    0 0 0 1px var(--zy-brand) inset,
-    0 0 0 3px color-mix(in srgb, var(--zy-brand) 14%, transparent);
-}
-
-/* 弹层：白面板 + 1px 发丝边 + 极轻影 */
-html[data-zy-theme='basic'] .el-picker-panel {
-  border: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius);
-  background: var(--zy-surface);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px rgba(15, 23, 42, 0.06);
-}
-
-html[data-zy-theme='basic'] .el-picker-panel .el-date-picker__header-label {
-  color: var(--zy-ink);
-  font-weight: 600;
-}
-
-html[data-zy-theme='basic'] .el-picker-panel .el-date-table th {
-  color: var(--zy-muted);
-  font-weight: 500;
-}
-
-/* 悬停：只换字色，不加厚度（平面件不靠阴影翻身）；已选中的日子不参与，免得把白字染成品牌蓝 */
-html[data-zy-theme='basic']
-  .el-picker-panel
-  .el-date-table
-  td.available:not(.current):not(.start-date):not(.end-date):hover
-  .el-date-table-cell__text {
-  color: var(--zy-brand);
-}
-
-/* 今天：品牌色字，不抢选中 */
-html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.today .el-date-table-cell__text {
-  color: var(--zy-brand);
-  font-weight: 600;
-}
-
-/* 范围中段：一层淡品牌底 */
-html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.in-range .el-date-table-cell__text {
-  background-color: var(--zy-brand-soft);
-  color: var(--zy-brand);
-}
-
-/* 选中 / 范围两端：与分页器选中键同一张上浅下深渐变 + 上沿亮边 + 小件 4px 圆角 */
-html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
-html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.start-date .el-date-table-cell__text,
-html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.end-date .el-date-table-cell__text {
-  border: 1px solid transparent;
-  border-top-color: var(--zy-btn-edge-primary);
-  border-radius: var(--zy-radius-sm);
-  background-image: var(--zy-btn-grad-primary);
-  background-origin: border-box;
-  color: var(--zy-ink-inverse, #fff);
-}
-
-/* ============================================================
- * 21 · 时间选择器（单日 + 时间范围，Element Plus 二次封装）
- * 触发框同输入框（白底 + 发丝描边；聚焦「描边转主色 + 3px 光环」）；
- * 弹层是白面板 + 发丝边 + 极轻影；选中的时分秒用品牌色 + 淡品牌底；页脚浅灰 + 顶发丝线。
- * 新组件，不带 :not(.dark)：深色档跟着令牌走。
- * ============================================================ */
-
-/* 触发框：单日是一层 wrapper，时间范围把 wrapper 穿在自己身上 —— 两条都按输入框处理 */
-html[data-zy-theme='basic'] .zy-time-picker .el-input__wrapper,
-html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper {
-  border-radius: var(--zy-radius);
-  background-color: var(--zy-surface);
-  box-shadow: 0 0 0 1px var(--zy-hairline) inset;
-}
-
-html[data-zy-theme='basic'] .zy-time-picker .el-input__wrapper:hover,
-html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px var(--zy-hairline-strong) inset;
-}
-
-html[data-zy-theme='basic'] .zy-time-picker .el-input__wrapper.is-focus,
-html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper.is-active,
-html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper.is-focus {
-  box-shadow:
-    0 0 0 1px var(--zy-brand) inset,
-    0 0 0 3px color-mix(in srgb, var(--zy-brand) 14%, transparent);
-}
-
-/* 弹层：白面板 + 发丝边 + 极轻影（单日 `.el-time-panel`，范围 `.el-time-range-picker`） */
-html[data-zy-theme='basic'] .el-time-panel,
-html[data-zy-theme='basic'] .el-time-range-picker {
-  border: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius);
-  background: var(--zy-surface);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px rgba(15, 23, 42, 0.06);
-}
-
-/* 选中的时分秒：品牌色 + 淡品牌底（平面件，不加厚度） */
-html[data-zy-theme='basic'] .el-time-panel .el-time-spinner__item.is-active,
-html[data-zy-theme='basic'] .el-time-range-picker .el-time-spinner__item.is-active {
-  border-radius: var(--zy-radius-sm);
-  background-color: var(--zy-brand-soft);
-  color: var(--zy-brand);
-  font-weight: 600;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  html[data-zy-theme='basic'] .el-time-panel .el-time-spinner__item:hover:not(.is-disabled):not(.is-active),
-  html[data-zy-theme='basic'] .el-time-range-picker .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
-    border-radius: var(--zy-radius-sm);
-    background-color: var(--zy-surface-sunken);
-  }
-}
-
-/* 范围弹层的两栏表头 + 中间分隔线 */
-html[data-zy-theme='basic'] .el-time-range-picker__header {
-  color: var(--zy-muted);
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-
-html[data-zy-theme='basic'] .el-time-range-picker__cell + .el-time-range-picker__cell {
-  border-left: 1px solid var(--zy-hairline);
-}
-
-/* 页脚：浅灰面 + 顶发丝线 */
-html[data-zy-theme='basic'] .el-time-panel__footer {
-  border-top: 1px solid var(--zy-hairline);
-  background: var(--zy-surface-sunken);
-}
-
-/* ============================================================
- * 15 · 树形控件 —— 补两块图纸语言里缺的：
- * ① 悬停的「滑行高亮」：与主题 B 同一枚元素（.zy-tree-glide，由 ZyTree 自己持有并定位），
- *    这里只换成图纸语言的样子 —— 一块浅灰浮层，没有厚度；行自身不再铺底色。
- * ② 选中态原来只有一层比背景略深的灰，几乎看不出来：改成浅品牌底 + 品牌字 + 左侧一道品牌标记，
- *    与表格「悬停淡蓝 + 首列半格标记」是同一套读法。
- * 深色档不套用：按约定深色一律现状设计，所以这一节带 :not(.dark)。
- * ============================================================ */
-
-html[data-zy-theme='basic']:not(.dark) .zy-tree-shell {
-  position: relative; /* 滑行高亮那枚浮层挂在外壳上 */
-}
-
-html[data-zy-theme='basic']:not(.dark) .zy-tree {
-  --zy-tree-row: 32px; /* 行高与主题 B 对齐 */
-}
-
-/*
- * 行的左右留白与行间缝也和主题 B 对齐（原来只有组件默认的 8px，图标贴着行边）。
- * 左侧必须 !important：Element 与组件把缩进写成行内 `padding-left: 0`。
- */
-html[data-zy-theme='basic']:not(.dark) .zy-tree .el-tree-node__content {
-  padding-inline: 12px !important;
-  margin-block: 3px;
-}
-
-html[data-zy-theme='basic']:not(.dark) .zy-tree .el-tree-node__content:hover {
-  background: transparent;
-}
-
-html[data-zy-theme='basic']:not(.dark) .zy-tree-shell .zy-tree-glide {
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: var(--zy-radius-sm);
-  background: var(--zy-surface-sunken);
-  /* 这层填色在白卡上几乎看不见（#f8fafc vs #fff），按图纸语言补一道 1px 发丝边把它交代出来 */
-  box-shadow: inset 0 0 0 1px var(--zy-hairline);
-  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);
-}
-
-html[data-zy-theme='basic']:not(.dark) .zy-tree .el-tree-node.is-current > .el-tree-node__content {
-  background: var(--zy-brand-soft);
-  color: var(--zy-brand);
-  font-weight: 600;
-}
-
-/* ============================================================
- * 04 · 滑块拼图验证（图纸语言，方案稿）：一张纸面 + 一条胶囊轨道。
- * 验证区是白面卡（1px 发丝边），缺口是浅灰面 + 发丝边的一块，
- * 拼图块 = 实心按钮那张上浅下深渐变，手柄 = 白面 + 描边 + 主色箭头；
- * 通过 → 缺口合上、勾与提示转品牌蓝；没对准 → 描边与提示转珊瑚红。
- * 新组件，不带 :not(.dark)：深色档没有「现状」可沿用，跟着深色令牌走。
- * ============================================================ */
-
-html[data-zy-theme='basic'] .zy-verify__scene {
-  border: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius);
-  /* 只给底色：底图（插画）由版面层挂在 background-image 上，别用 background 简写把它冲掉 */
-  background-color: var(--zy-surface);
-}
-
-/* 缺口 = 图片上挖掉的一块：半透明墨色剪影（图换了它也一直对） */
-html[data-zy-theme='basic'] .zy-verify__gap {
-  background: color-mix(in srgb, var(--zy-ink) 58%, transparent);
-}
-
-html[data-zy-theme='basic'] .zy-verify__gap::after {
-  background: color-mix(in srgb, var(--zy-ink) 58%, transparent);
-}
-
-/* 拼图块 = 主色实心按钮那张渐变 + 上沿亮边（与分页器选中键逐字相同） */
-html[data-zy-theme='basic'] .zy-verify__piece {
-  border: 1px solid transparent;
-  border-top-color: var(--zy-btn-edge-primary);
-  background-image: var(--zy-btn-grad-primary);
-  background-origin: border-box;
-  color: var(--zy-ink-inverse, #fff);
-}
-
-/*
- * 顶上那颗圆头取渐变的**顶端色**（不是品牌色）：方块上沿就是这一档，
- * 两者相接处才连成一块，不会出现一个深色圆疙瘩。
- */
-html[data-zy-theme='basic'] .zy-verify__piece::after {
-  background: var(--zy-btn-edge-primary);
-}
-
-html[data-zy-theme='basic'] .zy-verify__track {
-  border: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius);
-  background: var(--zy-surface-sunken);
-  color: var(--zy-muted);
-}
-
-html[data-zy-theme='basic'] .zy-verify__fill {
-  background: var(--zy-brand-soft);
-}
-
-html[data-zy-theme='basic'] .zy-verify__handle {
-  border: 1px solid var(--zy-hairline-strong);
-  border-radius: var(--zy-radius-sm);
-  background: var(--zy-surface);
-  color: var(--zy-brand);
-  box-shadow: var(--zy-shadow-card);
-  transition:
-    border-color var(--zy-duration-press) var(--zy-ease-soft),
-    color var(--zy-duration-press) var(--zy-ease-soft);
-}
-
-html[data-zy-theme='basic'] .zy-verify__refresh {
-  color: var(--zy-muted);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  html[data-zy-theme='basic'] .zy-verify__handle:hover,
-  html[data-zy-theme='basic'] .zy-verify.is-dragging .zy-verify__handle {
-    border-color: var(--zy-brand);
-  }
-
-  html[data-zy-theme='basic'] .zy-verify__refresh:hover {
-    color: var(--zy-brand);
-  }
-}
-
-/* 通过：缺口与描边转品牌蓝，勾露出来 */
-html[data-zy-theme='basic'] .zy-verify.is-pass .zy-verify__gap {
-  border-color: var(--zy-brand);
-}
-
-html[data-zy-theme='basic'] .zy-verify.is-pass .zy-verify__track {
-  border-color: var(--zy-brand);
-  color: var(--zy-brand);
-}
-
-/* 没对准：轨道与提示转珊瑚红（danger），手柄也转红 */
-html[data-zy-theme='basic'] .zy-verify.is-fail .zy-verify__track {
-  border-color: var(--zy-danger);
-  color: var(--zy-danger);
-}
-
-html[data-zy-theme='basic'] .zy-verify.is-fail .zy-verify__handle {
-  border-color: var(--zy-danger);
-  color: var(--zy-danger);
-}
-
-/* ============================================================
- * 23 · 通用容器（图纸语言）：一张纸面卡 —— 白面 + 1px 发丝边 + 极轻双层影。
- * 只有**有标题**的那种才分两段，读法与展示板上的卡片逐字相同（.spec-head / .spec-stage）：
- * **标题栏白面，正文内容区那档浅灰**，两段之间压一道发丝线。
- * **无标题的容器通体白面**，不铺灰。
- * （结构与版面在 board.css）
- * 这一条**不带 :not(.dark)**：容器是新组件，深色档没有「现状」可沿用，
- * 让它跟着深色令牌走 —— 深色下自然读成一张石墨纸。
- * ============================================================ */
-
-html[data-zy-theme='basic'] .zy-panel {
-  border: 1px solid var(--zy-hairline);
-  border-radius: var(--zy-radius);
-  background: var(--zy-surface);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px rgba(15, 23, 42, 0.06);
-}
-
-html[data-zy-theme='basic'] .zy-panel__head {
-  background: var(--zy-surface);
-  border-bottom: 1px solid var(--zy-hairline);
-}
-
-/*
- * 正文区取的是**卡片内容区那档浅灰**（与展示板的 .spec-stage 同一个配方）。
- * 只对有标题的容器生效：`:has(.zy-panel__head)` 就是「有标题」那个条件，
- * 无标题的容器没有这一段，正文跟着容器白面走。
- */
-html[data-zy-theme='basic'] .zy-panel:has(.zy-panel__head) > .zy-panel__body {
-  background: var(--zy-panel-body-bg);
-}
-
-/* ============================================================
- * 24 · 菜单导航（Mega Menu）—— 图纸语言
- *
- * 条就是一条发丝线（底边）；开合态用主色 2px 下划线（图纸里「当前条目」用线标）；
- * 面板 = 纸片 + 1px 线 + 一层浮影；图标是 1px 线框小方块。
- * 悬停不铺在条目上，交给一枚带发丝边的浅灰浮层滑过去（与树 / 下拉面板同一套）。
- * 全程没有厚度、没有白弧。
- *
- * 下面这层 --zy-mm-* 是方案稿里「浅色修正」的那几个值：线更实一档、次要字更深、
- * 浅灰台面偏冷。只落在菜单上；要不要推到全局令牌（--zy-hairline 等）等确认。
- * ============================================================ */
-
-html[data-zy-theme='basic'] .zy-mega-menu {
-  --zy-mm-sunken: #f7f9fa;
-  --zy-mm-line: #dbe2ea;
-  --zy-mm-line-strong: #8592a1;
-  --zy-mm-muted: #5c6b7c;
-  --zy-mm-brand-soft: rgba(0, 102, 169, 0.08);
-}
-
-/* 深色档跟站点共用一套令牌，不在这里另起色板 */
-html.dark[data-zy-theme='basic'] .zy-mega-menu {
-  --zy-mm-sunken: var(--zy-surface-sunken);
-  --zy-mm-line: var(--zy-hairline);
-  --zy-mm-line-strong: var(--zy-hairline-strong);
-  --zy-mm-muted: var(--zy-muted);
-  --zy-mm-brand-soft: var(--zy-brand-soft);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__bar {
-  background: var(--zy-surface);
-  border-bottom: 1px solid var(--zy-mm-line);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__mark {
-  border: 1px solid var(--zy-mm-line-strong);
-  border-radius: var(--zy-radius-sm);
-  background: var(--zy-mm-sunken);
-  color: var(--zy-brand);
-  font-family: var(--zy-font-mono);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__sub {
-  color: var(--zy-mm-muted);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__trigger,
-html[data-zy-theme='basic'] .zy-mega-menu__plain {
-  color: var(--zy-ink);
-  border-radius: var(--zy-radius-sm) var(--zy-radius-sm) 0 0;
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__trigger:hover,
-html[data-zy-theme='basic'] .zy-mega-menu__plain:hover {
-  background: var(--zy-mm-sunken);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__trigger.is-open {
-  color: var(--zy-brand);
-  box-shadow: inset 0 -2px 0 var(--zy-brand);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__panel {
-  background: var(--zy-surface);
-  border: 1px solid var(--zy-mm-line);
-  border-radius: var(--zy-radius);
-  box-shadow: var(--zy-shadow-float);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__glide {
-  border-radius: var(--zy-radius-sm);
-  background: var(--zy-mm-sunken);
-  /* 浅灰落在白纸片上也几乎看不见，按图纸语言补一道 1px 发丝边把它交代出来 */
-  box-shadow: inset 0 0 0 1px var(--zy-mm-line);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__ico {
-  border: 1px solid var(--zy-mm-line);
-  border-radius: var(--zy-radius-sm);
-  background: var(--zy-surface);
-  color: var(--zy-brand);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__title,
-html[data-zy-theme='basic'] .zy-mega-menu__group-link {
-  color: var(--zy-ink);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__desc,
-html[data-zy-theme='basic'] .zy-mega-menu__note {
-  color: var(--zy-mm-muted);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__badge {
-  color: var(--zy-brand);
-  background: var(--zy-mm-brand-soft);
-  border: 1px solid color-mix(in srgb, var(--zy-brand) 26%, transparent);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__foot {
-  border-top: 1px solid var(--zy-mm-line);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__more {
-  color: var(--zy-brand);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__card {
-  border: 1px solid var(--zy-mm-line);
-  border-radius: var(--zy-radius-sm);
-  background: var(--zy-mm-sunken);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__kicker,
-html[data-zy-theme='basic'] .zy-mega-menu__group-title,
-html[data-zy-theme='basic'] .zy-mega-menu__card-desc {
-  color: var(--zy-mm-muted);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__group-title {
-  border-bottom: 1px solid var(--zy-mm-line);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__card-title {
-  color: var(--zy-ink);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__group-link {
-  border-radius: var(--zy-radius-sm);
-}
-
-html[data-zy-theme='basic'] .zy-mega-menu__group-ico {
-  color: var(--zy-mm-muted);
-}
-
-/*
- * =====================================================================
- * 0.1 · 图纸 · 夜（data-zy-theme="basic" + html.dark）
- * ---------------------------------------------------------------------
- * 与键帽主题的 §0.1 相对：图纸只有两级阶梯（底纸 / 纸片），夜里也不补厚度、
- * 不加白弧。这一节只做三件事 —— 把纸压成中性石墨、把字换成中性白、
- * 把深色下会「读成一道缝」的发丝线与控件线分开。
- * 共用色板在 tokens/dark.css，这里只放图纸自己的那份。
- * =====================================================================
- */
-/* =====================================================================
- * 1 · 主题 A · 深色（图纸 · 夜）
- * ---------------------------------------------------------------------
- * 同一张纸，夜里开了一盏台灯：底纸更暗、纸片略亮、边界线比面亮。
- * 仍然只有两级阶梯 —— 不为深色补厚度，也不给卡片加白弧（那是 B 的语言）。
- * ===================================================================== */
-
-html.dark[data-zy-theme='basic'] {
-  /* ---------- 表面：中性石墨，不是蓝黑。
-   * 浅色档的纸是中性白（#f2f4f6），夜里也应该是中性纸 —— 底色一旦偏蓝，
-   * 品牌蓝就再也读不出「这是标注」，整页都在发蓝。两级阶梯仍保持 1.14:1。 */
-  --zy-paper: #0f1014; /* 底纸（页面） */
-  --zy-surface: #1b1d23; /* 纸片（卡片 / 面板 / 弹层） */
-  --zy-surface-sunken: #15171c; /* 正文区 / 斑马行 */
-  --zy-panel-body-bg: #171a1f;
-
-  /* ---------- 字：中性白，不偏蓝 ---------- */
-  --zy-ink: #ecedef; /* 14.41:1 */
-  --zy-muted: #a0a6ae; /* 6.88:1 */
-  --zy-placeholder: #858b94; /* 4.92:1 */
-
-  /* ---------- 线：深色下「发丝线」必须比面亮，否则读成一道缝；控件线要能看清（≥3:1） ---------- */
-  --zy-hairline: #303339; /* 1.33:1 —— 装饰边界（卡片 / 容器） */
-  --zy-hairline-strong: #69717c; /* 3.42:1 —— 控件边界 */
-
-  /* ---------- 阴影：深色里影子本来就看不见，压成一层更实的暗角 ---------- */
-  --zy-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.38);
-  --zy-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.62);
-  --zy-shadow-deep: rgba(0, 0, 0, 0.55);
-  --zy-shadow-press: 0 6px 18px rgba(90, 166, 228, 0.3);
-
-  /* ---------- 表格：表头是台账的栏头，深色下换成深一档的纸 + 浅一档的字 ---------- */
-  --zy-table-header-bg: #23272e;
-  --zy-table-header-fg: #d3dae2; /* 10.4:1 */
-  --zy-table-row-stripe: #15171c;
-  --zy-table-row-hover: rgba(90, 166, 228, 0.1);
-
-  /* ---------- 实心按钮：仍是「上浅下深」，只是把整段亮度压到白字够读的位置 ---------- */
-  --zy-btn-grad-primary: linear-gradient(180deg, #2876af 0%, #1d5f92 100%);
-  --zy-btn-grad-primary-hover: linear-gradient(180deg, #1d5f92 0%, #2876af 100%);
-  --zy-btn-edge-primary: #5aa6e4;
-
-  --zy-btn-grad-success: linear-gradient(180deg, #38803d 0%, #2c6631 100%);
-  --zy-btn-grad-success-hover: linear-gradient(180deg, #2c6631 0%, #38803d 100%);
-  --zy-btn-edge-success: #6cc24a;
-
-  --zy-btn-grad-warning: linear-gradient(180deg, #e8a13a 0%, #c98a2c 100%);
-  --zy-btn-grad-warning-hover: linear-gradient(180deg, #c98a2c 0%, #e8a13a 100%);
-  --zy-btn-edge-warning: #ffc46b;
-
-  --zy-btn-grad-info: linear-gradient(180deg, #5f6f80 0%, #46525f 100%);
-  --zy-btn-grad-info-hover: linear-gradient(180deg, #46525f 0%, #5f6f80 100%);
-  --zy-btn-edge-info: #9ab0c6;
-
-  /* fill（键帽本体）不是 A 的语言，板上不展示；但令牌仍要给出深色下的正确值，
-   * 免得别处一用就落回「亮品牌面 + 白字」的 2.4:1。 */
-  --zy-btn-fill-clr: var(--zy-brand-key);
-  --zy-btn-fill-ink: #fff;
-  --zy-btn-fill-ink-on: #fff;
-  --zy-btn-fill-shade: rgba(255, 255, 255, 0.18);
-
-  --el-border-radius-base: var(--zy-radius);
-  --el-component-size: var(--zy-control-h);
-}
-
-/* 1.1 卡片：仍是白纸片，只是纸变黑。纸面装饰层（白弧 / 铺色）属于 B 的材质，深色下必须关掉 ——
- * 浅色时它们在白面上看不见，深色下会变成两道弧光，等于偷偷给 A 加了厚度。 */
-html.dark[data-zy-theme='basic'] .zy-card-fill-wave {
-  display: none;
-}
-
-/* 1.2 控件：面 = 纸片，边 = 控件档发丝线；聚焦仍是「描边转主色 + 3px 光环」，一点厚度都不加 */
-html.dark[data-zy-theme='basic'] .zy-input.is-focus .el-input__wrapper,
-html.dark[data-zy-theme='basic'] .zy-select.is-focus .el-select__wrapper {
-  background-color: var(--zy-surface);
-  box-shadow: 0 0 0 1px var(--zy-hairline-strong) inset;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  html.dark[data-zy-theme='basic'] .zy-input.is-focus .el-input__wrapper:hover,
-  html.dark[data-zy-theme='basic'] .zy-select.is-focus .el-select__wrapper:hover {
-    box-shadow: 0 0 0 1px var(--zy-brand) inset;
-  }
-}
-
-html.dark[data-zy-theme='basic'] .zy-input.is-focus .el-input__wrapper.is-focus,
-html.dark[data-zy-theme='basic'] .zy-select.is-focus .el-select__wrapper.is-focused {
-  box-shadow:
-    0 0 0 1px var(--zy-brand) inset,
-    0 0 0 3px color-mix(in srgb, var(--zy-brand) 22%, transparent);
-}
-
-/* 1.3 实心按钮的两个例外：
- * 危险是平色（不是渐变），警示是亮琥珀面 —— 一个要把面压深、一个要把字翻墨。 */
-html.dark[data-zy-theme='basic']
-  .zy-btn.el-button--danger:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill, .is-disabled)) {
-  --el-button-bg-color: var(--zy-danger-key);
-  --el-button-border-color: var(--zy-danger-key);
-  --el-button-hover-bg-color: var(--zy-danger-key-hover);
-  --el-button-hover-border-color: var(--zy-danger-key-hover);
-  --el-button-active-bg-color: var(--zy-danger-key-hover);
-  --el-button-active-border-color: var(--zy-danger-key-hover);
-  --el-button-text-color: #fff;
-  --el-button-hover-text-color: #fff;
-  --el-button-active-text-color: #fff;
-}
-
-html.dark[data-zy-theme='basic'] .zy-btn.el-button--warning {
-  --el-button-text-color: var(--zy-warning-ink);
-  --el-button-hover-text-color: var(--zy-warning-ink);
-  --el-button-active-text-color: var(--zy-warning-ink);
-}
-
-/* 禁用：浅色档是「叠一层 50% 白」把键洗淡；深色下换成叠一层底纸色，才读成「按不动」而不是「在发光」 */
-html.dark[data-zy-theme='basic']
-  .zy-btn.el-button--primary.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)),
-html.dark[data-zy-theme='basic']
-  .zy-btn.el-button--success.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)),
-html.dark[data-zy-theme='basic']
-  .zy-btn.el-button--warning.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)),
-html.dark[data-zy-theme='basic']
-  .zy-btn.el-button--info.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)) {
-  background-image: linear-gradient(rgba(10, 16, 23, 0.45), rgba(10, 16, 23, 0.45)),
-    var(--zy-btn-grad);
-  background-origin: border-box;
-}
-
-/* sweep 的字与描边取亮档品牌色（--zy-brand），在深色纸面上仍然清楚 */
-
-/* 1.4 弹层：浅色档那块「白面板 + 发丝边 + 极轻影」在深色下换成纸片 + 线 + 一层实影 */
-html.dark[data-zy-theme='basic'] .zy-panel {
-  box-shadow: var(--zy-shadow-card);
-}
-
-html.dark[data-zy-theme='basic'] .el-picker-panel,
-html.dark[data-zy-theme='basic'] .el-time-panel,
-html.dark[data-zy-theme='basic'] .el-time-range-picker {
-  border: 1px solid var(--zy-hairline);
-  background: var(--zy-surface);
-  box-shadow: var(--zy-shadow-card);
-}
-
-html.dark[data-zy-theme='basic'] .el-time-panel__footer {
-  border-top: 1px solid var(--zy-hairline);
-  background: var(--zy-surface-sunken);
-}
-
-/* 1.5 表格 / 树：深色档不套 `:not(.dark)`，所以把图纸语言那两块原样补回来，只换填充色 */
-html.dark[data-zy-theme='basic'] .zy-tree-shell {
-  position: relative;
-}
-
-html.dark[data-zy-theme='basic'] .zy-tree {
-  --zy-tree-row: 32px;
-}
-
-html.dark[data-zy-theme='basic'] .zy-tree .el-tree-node__content {
-  padding-inline: 12px !important;
-  margin-block: 3px;
-}
-
-html.dark[data-zy-theme='basic'] .zy-tree .el-tree-node__content:hover {
-  background: transparent;
-}
-
-html.dark[data-zy-theme='basic'] .zy-tree-shell .zy-tree-glide {
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: var(--zy-radius-sm);
-  /* 深色下「悬停」是提亮，不是加深：一层 6% 白 + 一圈线 */
-  background: rgba(255, 255, 255, 0.06);
-  box-shadow: inset 0 0 0 1px var(--zy-hairline);
-  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);
-}
-
-html.dark[data-zy-theme='basic'] .zy-tree .el-tree-node.is-current > .el-tree-node__content {
-  background: var(--zy-brand-soft);
-  color: var(--zy-brand);
-  font-weight: 600;
-}
-
-/* 1.6 对话框：账本头条（品牌渐变 + 2px 线）在深色下保留；线色统一在第 0.8 节改成品牌色 */
-html.dark[data-zy-theme='basic'] .zy-dialog .el-dialog__header {
-  background: linear-gradient(180deg, var(--zy-brand-soft) 0%, var(--zy-surface) 72%);
-}
-
-html.dark[data-zy-theme='basic'] .zy-dialog .el-dialog__footer {
-  background: var(--zy-surface-sunken);
-}
-
-/* 1.7 滑块拼图验证：缺口是「图上挖掉的一块」，浅色档用墨色剪影；深色档 ink 变浅了，
- * 剪影必须显式回到黑，否则会变成一块发亮的补丁。 */
-html.dark[data-zy-theme='basic'] .zy-verify__gap,
-html.dark[data-zy-theme='basic'] .zy-verify__gap::after {
-  background: color-mix(in srgb, #000 55%, transparent);
-}
-
-/* 1.8 复选框：勾选面取「实心键面」那一档（白勾 4.88:1）。
- * 浅色档这里直接用 --zy-brand #0066a9，深色下它变成亮档 #5aa6e4 —— 白勾只剩 2.4:1，
- * 所以面必须换回 --zy-brand-key。这一类「--zy-brand 被当面色用」的位置在深色下都要逐个换。 */
-html.dark[data-zy-theme='basic'] .zy-check .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
-html.dark[data-zy-theme='basic'] .zy-check .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner,
-html.dark[data-zy-theme='basic'] .zy-tree .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
-html.dark[data-zy-theme='basic'] .zy-tree .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner {
-  background-color: var(--zy-brand-key);
-  border-color: var(--zy-brand-key);
-}
-
-/* 1.9 舞台：浅色档用「底纸 70% 叠在卡片上」把舞台调灰一档；深色下这个半透明叠色会
- * 把舞台压到比底纸更暗（叠的是石墨卡片，不是白卡），层级方向就反了 —— 深色下直接给底纸。 */
-
-/* ---------------------------------------------------------------------
- * 收尾两笔（方案稿 0.8 的 A 侧）
- * ------------------------------------------------------------------- */
-
-/* ① 对话框抬头那道 2px 线在组件里写死成绿：A 的语言里只有「蓝墨 + 纸」，
- *    夜里换成品牌色压深一档的那条，读起来仍是「抬头」，不是状态条。 */
-html.dark[data-zy-theme='basic'] .zy-dialog .el-dialog__header {
-  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--zy-brand) 78%, var(--zy-surface));
-}
-
-/* ② 实心标签：A 的「面」取深档键面 —— 共用板把字档语义色提亮成夜间可读的亮色，
- *    那张亮色当「面」时白字只有 2.0–2.7:1；面换深档后 4.86–5.19:1。 */
-html.dark[data-zy-theme='basic'] .zy-tag.is-fill {
-  --zy-tag-fill-clr: var(--zy-brand-key);
-}
-
-html.dark[data-zy-theme='basic'] .zy-tag.is-fill.el-tag--success {
-  --zy-tag-fill-clr: var(--zy-green-key);
-}
-
-html.dark[data-zy-theme='basic'] .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='basic'] .zy-tag.is-fill.el-tag--danger {
-  --zy-tag-fill-clr: var(--zy-danger-key);
-}
-
-html.dark[data-zy-theme='basic'] .zy-tag.is-fill.el-tag--info {
-  --zy-tag-fill-clr: var(--zy-info-key);
-}
+/**
+ * 主题「基础用法 / 图纸」（data-zy-theme="basic"）的材质层。
+ *
+ * 基础外观主要来自语义令牌与组件自带样式；这一层只补图纸语言与默认结构不同的局部：
+ * 卡片纸面化、标签小件圆角、控件高度、选择器禁用、树 / 表格行、分页器、日期 / 时间面板等。
+ * 新增组件时，优先在组件自身和 Token 层完成，只有跨组件的材质差异才放这里。
+ */
+
+html[data-zy-theme='basic'] .zy-pagination {
+  --el-pagination-button-bg-color: var(--zy-surface);
+  --el-pagination-bg-color: var(--zy-surface);
+  --el-pagination-border-radius: var(--zy-radius-sm);
+  --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;
+  color: var(--zy-ink);
+}
+
+/* 一格的形状：小正方形，键与键之间留缝 */
+html[data-zy-theme='basic'] .zy-pagination .el-pager li,
+html[data-zy-theme='basic'] .zy-pagination button.btn-prev,
+html[data-zy-theme='basic'] .zy-pagination button.btn-next {
+  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: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-surface);
+  color: var(--zy-ink);
+  font-weight: var(--zy-weight-control);
+  box-shadow: var(--zy-shadow-card);
+  transition:
+    color var(--zy-duration-press) var(--zy-ease-soft),
+    border-color var(--zy-duration-press) var(--zy-ease-soft),
+    background-color var(--zy-duration-press) var(--zy-ease-soft);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='basic'] .zy-pagination .el-pager li:hover:not(.is-active):not(.more),
+  html[data-zy-theme='basic'] .zy-pagination button.btn-prev:hover:not(:disabled),
+  html[data-zy-theme='basic'] .zy-pagination button.btn-next:hover:not(:disabled) {
+    border-color: var(--zy-brand);
+    color: var(--zy-brand);
+  }
+}
+
+/* 选中 = primary 实心按钮：同一张渐变 + 上沿亮边 */
+html[data-zy-theme='basic'] .zy-pagination .el-pager li.is-active {
+  background-image: var(--zy-btn-grad-primary);
+  background-origin: border-box;
+  border-color: transparent;
+  border-top-color: var(--zy-btn-edge-primary);
+  color: var(--zy-ink-inverse, #fff);
+}
+
+/* 省略号只是一段可点的文字，不占一颗按钮 */
+html[data-zy-theme='basic'] .zy-pagination .el-pager li.more {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--zy-muted);
+}
+
+html[data-zy-theme='basic'] .zy-pagination button.btn-prev:disabled,
+html[data-zy-theme='basic'] .zy-pagination button.btn-next:disabled {
+  color: var(--zy-placeholder);
+  background-color: var(--zy-surface-sunken);
+  border-color: var(--zy-hairline);
+  box-shadow: none;
+}
+
+html[data-zy-theme='basic'] .zy-pagination .el-pagination__total,
+html[data-zy-theme='basic'] .zy-pagination .el-pagination__jump {
+  color: var(--zy-muted);
+}
+
+/* 卡 = 白纸片（发丝边 + 极轻双层影），键帽只留给键帽主题 */
+html[data-zy-theme='basic'] .zy-card {
+  --zy-card-fill-clr: var(--zy-surface);
+  --zy-card-fill-ink: var(--zy-ink);
+  --zy-card-fill-base: var(--zy-hairline);
+  --zy-card-fill-lift: 0px;
+  --zy-card-fill-line: var(--zy-hairline);
+  --zy-card-fill-shadow: var(--zy-shadow-card);
+  --zy-card-fill-shadow-press: var(--zy-shadow-card);
+  border: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius);
+}
+
+/* ============================================================
+ * 13 · 日期选择器（Element Plus 二次封装；单日 + 日期范围）
+ * 触发框同输入框（白底 + 1px 发丝边；聚焦「描边转主色 + 3px 高亮光环」）；
+ * 弹层是白面板 + 1px 发丝边 + 极轻影；选中的日子是一枚蓝色实心小方块（小件 4px 圆角）。
+ * 时间选择器有自己的 `.zy-time-picker` 规则，这里只认 --date / --daterange。
+ * 新组件，不带 :not(.dark)：深色档跟着令牌走。
+ * ============================================================ */
+
+/* 单日是「输入框套输入框」，日期范围把 wrapper 直接穿在身上 —— 两条都按输入框处理 */
+html[data-zy-theme='basic'] .el-date-editor--date .el-input__wrapper,
+html[data-zy-theme='basic'] .el-date-editor--daterange {
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-surface);
+  box-shadow: 0 0 0 1px var(--zy-hairline) inset;
+}
+
+html[data-zy-theme='basic'] .el-date-editor--date .el-input__wrapper:hover,
+html[data-zy-theme='basic'] .el-date-editor--daterange:hover {
+  box-shadow: 0 0 0 1px var(--zy-hairline-strong) inset;
+}
+
+/* 聚焦：与 03 输入框同一条 */
+html[data-zy-theme='basic'] .el-date-editor--date .el-input__wrapper.is-focus,
+html[data-zy-theme='basic'] .el-date-editor--daterange.is-active,
+html[data-zy-theme='basic'] .el-date-editor--daterange.is-focus {
+  box-shadow:
+    0 0 0 1px var(--zy-brand) inset,
+    0 0 0 3px color-mix(in srgb, var(--zy-brand) 14%, transparent);
+}
+
+/* 弹层：白面板 + 1px 发丝边 + 极轻影 */
+html[data-zy-theme='basic'] .el-picker-panel {
+  border: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius);
+  background: var(--zy-surface);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04),
+    0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+html[data-zy-theme='basic'] .el-picker-panel .el-date-picker__header-label {
+  color: var(--zy-ink);
+  font-weight: 600;
+}
+
+html[data-zy-theme='basic'] .el-picker-panel .el-date-table th {
+  color: var(--zy-muted);
+  font-weight: 500;
+}
+
+/* 悬停：只换字色，不加厚度（平面件不靠阴影翻身）；已选中的日子不参与，免得把白字染成品牌蓝 */
+html[data-zy-theme='basic']
+  .el-picker-panel
+  .el-date-table
+  td.available:not(.current):not(.start-date):not(.end-date):hover
+  .el-date-table-cell__text {
+  color: var(--zy-brand);
+}
+
+/* 今天：品牌色字，不抢选中 */
+html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.today .el-date-table-cell__text {
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
+/* 范围中段：一层淡品牌底 */
+html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.in-range .el-date-table-cell__text {
+  background-color: var(--zy-brand-soft);
+  color: var(--zy-brand);
+}
+
+/* 选中 / 范围两端：与分页器选中键同一张上浅下深渐变 + 上沿亮边 + 小件 4px 圆角 */
+html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
+html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.start-date .el-date-table-cell__text,
+html[data-zy-theme='basic'] .el-picker-panel .el-date-table td.end-date .el-date-table-cell__text {
+  border: 1px solid transparent;
+  border-top-color: var(--zy-btn-edge-primary);
+  border-radius: var(--zy-radius-sm);
+  background-image: var(--zy-btn-grad-primary);
+  background-origin: border-box;
+  color: var(--zy-ink-inverse, #fff);
+}
+
+/* ============================================================
+ * 21 · 时间选择器（单日 + 时间范围，Element Plus 二次封装）
+ * 触发框同输入框（白底 + 发丝描边；聚焦「描边转主色 + 3px 光环」）；
+ * 弹层是白面板 + 发丝边 + 极轻影；选中的时分秒用品牌色 + 淡品牌底；页脚浅灰 + 顶发丝线。
+ * 新组件，不带 :not(.dark)：深色档跟着令牌走。
+ * ============================================================ */
+
+/* 触发框：单日是一层 wrapper，时间范围把 wrapper 穿在自己身上 —— 两条都按输入框处理 */
+html[data-zy-theme='basic'] .zy-time-picker .el-input__wrapper,
+html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper {
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-surface);
+  box-shadow: 0 0 0 1px var(--zy-hairline) inset;
+}
+
+html[data-zy-theme='basic'] .zy-time-picker .el-input__wrapper:hover,
+html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px var(--zy-hairline-strong) inset;
+}
+
+html[data-zy-theme='basic'] .zy-time-picker .el-input__wrapper.is-focus,
+html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper.is-active,
+html[data-zy-theme='basic'] .zy-time-picker.el-input__wrapper.is-focus {
+  box-shadow:
+    0 0 0 1px var(--zy-brand) inset,
+    0 0 0 3px color-mix(in srgb, var(--zy-brand) 14%, transparent);
+}
+
+/* 弹层：白面板 + 发丝边 + 极轻影（单日 `.el-time-panel`，范围 `.el-time-range-picker`） */
+html[data-zy-theme='basic'] .el-time-panel,
+html[data-zy-theme='basic'] .el-time-range-picker {
+  border: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius);
+  background: var(--zy-surface);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04),
+    0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+/* 选中的时分秒：品牌色 + 淡品牌底（平面件，不加厚度） */
+html[data-zy-theme='basic'] .el-time-panel .el-time-spinner__item.is-active,
+html[data-zy-theme='basic'] .el-time-range-picker .el-time-spinner__item.is-active {
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-brand-soft);
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='basic'] .el-time-panel .el-time-spinner__item:hover:not(.is-disabled):not(.is-active),
+  html[data-zy-theme='basic'] .el-time-range-picker .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
+    border-radius: var(--zy-radius-sm);
+    background-color: var(--zy-surface-sunken);
+  }
+}
+
+/* 范围弹层的两栏表头 + 中间分隔线 */
+html[data-zy-theme='basic'] .el-time-range-picker__header {
+  color: var(--zy-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+html[data-zy-theme='basic'] .el-time-range-picker__cell + .el-time-range-picker__cell {
+  border-left: 1px solid var(--zy-hairline);
+}
+
+/* 页脚：浅灰面 + 顶发丝线 */
+html[data-zy-theme='basic'] .el-time-panel__footer {
+  border-top: 1px solid var(--zy-hairline);
+  background: var(--zy-surface-sunken);
+}
+
+/* ============================================================
+ * 15 · 树形控件 —— 补两块图纸语言里缺的：
+ * ① 悬停的「滑行高亮」：与主题 B 同一枚元素（.zy-tree-glide，由 ZyTree 自己持有并定位），
+ *    这里只换成图纸语言的样子 —— 一块浅灰浮层，没有厚度；行自身不再铺底色。
+ * ② 选中态原来只有一层比背景略深的灰，几乎看不出来：改成浅品牌底 + 品牌字 + 左侧一道品牌标记，
+ *    与表格「悬停淡蓝 + 首列半格标记」是同一套读法。
+ * 深色档不套用：按约定深色一律现状设计，所以这一节带 :not(.dark)。
+ * ============================================================ */
+
+html[data-zy-theme='basic']:not(.dark) .zy-tree-shell {
+  position: relative; /* 滑行高亮那枚浮层挂在外壳上 */
+}
+
+html[data-zy-theme='basic']:not(.dark) .zy-tree {
+  --zy-tree-row: 32px; /* 行高与主题 B 对齐 */
+}
+
+/*
+ * 行的左右留白与行间缝也和主题 B 对齐（原来只有组件默认的 8px，图标贴着行边）。
+ * 左侧必须 !important：Element 与组件把缩进写成行内 `padding-left: 0`。
+ */
+html[data-zy-theme='basic']:not(.dark) .zy-tree .el-tree-node__content {
+  padding-inline: 12px !important;
+  margin-block: 3px;
+}
+
+html[data-zy-theme='basic']:not(.dark) .zy-tree .el-tree-node__content:hover {
+  background: transparent;
+}
+
+html[data-zy-theme='basic']:not(.dark) .zy-tree-shell .zy-tree-glide {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-surface-sunken);
+  /* 这层填色在白卡上几乎看不见（#f8fafc vs #fff），按图纸语言补一道 1px 发丝边把它交代出来 */
+  box-shadow: inset 0 0 0 1px var(--zy-hairline);
+  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);
+}
+
+html[data-zy-theme='basic']:not(.dark) .zy-tree .el-tree-node.is-current > .el-tree-node__content {
+  background: var(--zy-brand-soft);
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
+/* ============================================================
+ * 04 · 滑块拼图验证（图纸语言，方案稿）：一张纸面 + 一条胶囊轨道。
+ * 验证区是白面卡（1px 发丝边），缺口是浅灰面 + 发丝边的一块，
+ * 拼图块 = 实心按钮那张上浅下深渐变，手柄 = 白面 + 描边 + 主色箭头；
+ * 通过 → 缺口合上、勾与提示转品牌蓝；没对准 → 描边与提示转珊瑚红。
+ * 新组件，不带 :not(.dark)：深色档没有「现状」可沿用，跟着深色令牌走。
+ * ============================================================ */
+
+html[data-zy-theme='basic'] .zy-verify__scene {
+  border: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius);
+  /* 只给底色：底图（插画）由版面层挂在 background-image 上，别用 background 简写把它冲掉 */
+  background-color: var(--zy-surface);
+}
+
+/* 缺口 = 图片上挖掉的一块：半透明墨色剪影（图换了它也一直对） */
+html[data-zy-theme='basic'] .zy-verify__gap {
+  background: color-mix(in srgb, var(--zy-ink) 58%, transparent);
+}
+
+html[data-zy-theme='basic'] .zy-verify__gap::after {
+  background: color-mix(in srgb, var(--zy-ink) 58%, transparent);
+}
+
+/* 拼图块 = 主色实心按钮那张渐变 + 上沿亮边（与分页器选中键逐字相同） */
+html[data-zy-theme='basic'] .zy-verify__piece {
+  border: 1px solid transparent;
+  border-top-color: var(--zy-btn-edge-primary);
+  background-image: var(--zy-btn-grad-primary);
+  background-origin: border-box;
+  color: var(--zy-ink-inverse, #fff);
+}
+
+/*
+ * 顶上那颗圆头取渐变的**顶端色**（不是品牌色）：方块上沿就是这一档，
+ * 两者相接处才连成一块，不会出现一个深色圆疙瘩。
+ */
+html[data-zy-theme='basic'] .zy-verify__piece::after {
+  background: var(--zy-btn-edge-primary);
+}
+
+html[data-zy-theme='basic'] .zy-verify__track {
+  border: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius);
+  background: var(--zy-surface-sunken);
+  color: var(--zy-muted);
+}
+
+html[data-zy-theme='basic'] .zy-verify__fill {
+  background: var(--zy-brand-soft);
+}
+
+html[data-zy-theme='basic'] .zy-verify__handle {
+  border: 1px solid var(--zy-hairline-strong);
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-surface);
+  color: var(--zy-brand);
+  box-shadow: var(--zy-shadow-card);
+  transition:
+    border-color var(--zy-duration-press) var(--zy-ease-soft),
+    color var(--zy-duration-press) var(--zy-ease-soft);
+}
+
+html[data-zy-theme='basic'] .zy-verify__refresh {
+  color: var(--zy-muted);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='basic'] .zy-verify__handle:hover,
+  html[data-zy-theme='basic'] .zy-verify.is-dragging .zy-verify__handle {
+    border-color: var(--zy-brand);
+  }
+
+  html[data-zy-theme='basic'] .zy-verify__refresh:hover {
+    color: var(--zy-brand);
+  }
+}
+
+/* 通过：缺口与描边转品牌蓝，勾露出来 */
+html[data-zy-theme='basic'] .zy-verify.is-pass .zy-verify__gap {
+  border-color: var(--zy-brand);
+}
+
+html[data-zy-theme='basic'] .zy-verify.is-pass .zy-verify__track {
+  border-color: var(--zy-brand);
+  color: var(--zy-brand);
+}
+
+/* 没对准：轨道与提示转珊瑚红（danger），手柄也转红 */
+html[data-zy-theme='basic'] .zy-verify.is-fail .zy-verify__track {
+  border-color: var(--zy-danger);
+  color: var(--zy-danger);
+}
+
+html[data-zy-theme='basic'] .zy-verify.is-fail .zy-verify__handle {
+  border-color: var(--zy-danger);
+  color: var(--zy-danger);
+}
+
+/* ============================================================
+ * 23 · 通用容器（图纸语言）：一张纸面卡 —— 白面 + 1px 发丝边 + 极轻双层影。
+ * 只有**有标题**的那种才分两段，读法与展示板上的卡片逐字相同（.spec-head / .spec-stage）：
+ * **标题栏白面，正文内容区那档浅灰**，两段之间压一道发丝线。
+ * **无标题的容器通体白面**，不铺灰。
+ * （结构与版面在 board.css）
+ * 这一条**不带 :not(.dark)**：容器是新组件，深色档没有「现状」可沿用，
+ * 让它跟着深色令牌走 —— 深色下自然读成一张石墨纸。
+ * ============================================================ */
+
+html[data-zy-theme='basic'] .zy-panel {
+  border: 1px solid var(--zy-hairline);
+  border-radius: var(--zy-radius);
+  background: var(--zy-surface);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04),
+    0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+html[data-zy-theme='basic'] .zy-panel__head {
+  background: var(--zy-surface);
+  border-bottom: 1px solid var(--zy-hairline);
+}
+
+/*
+ * 正文区取的是**卡片内容区那档浅灰**（与展示板的 .spec-stage 同一个配方）。
+ * 只对有标题的容器生效：`:has(.zy-panel__head)` 就是「有标题」那个条件，
+ * 无标题的容器没有这一段，正文跟着容器白面走。
+ */
+html[data-zy-theme='basic'] .zy-panel:has(.zy-panel__head) > .zy-panel__body {
+  background: var(--zy-panel-body-bg);
+}
+
+/* ============================================================
+ * 24 · 菜单导航（Mega Menu）—— 图纸语言
+ *
+ * 条就是一条发丝线（底边）；开合态用主色 2px 下划线（图纸里「当前条目」用线标）；
+ * 面板 = 纸片 + 1px 线 + 一层浮影；图标是 1px 线框小方块。
+ * 悬停不铺在条目上，交给一枚带发丝边的浅灰浮层滑过去（与树 / 下拉面板同一套）。
+ * 全程没有厚度、没有白弧。
+ *
+ * 下面这层 --zy-mm-* 是方案稿里「浅色修正」的那几个值：线更实一档、次要字更深、
+ * 浅灰台面偏冷。只落在菜单上；要不要推到全局令牌（--zy-hairline 等）等确认。
+ * ============================================================ */
+
+html[data-zy-theme='basic'] .zy-mega-menu {
+  --zy-mm-sunken: #f7f9fa;
+  --zy-mm-line: #dbe2ea;
+  --zy-mm-line-strong: #8592a1;
+  --zy-mm-muted: #5c6b7c;
+  --zy-mm-brand-soft: rgba(0, 102, 169, 0.08);
+}
+
+/* 深色档跟站点共用一套令牌，不在这里另起色板 */
+html.dark[data-zy-theme='basic'] .zy-mega-menu {
+  --zy-mm-sunken: var(--zy-surface-sunken);
+  --zy-mm-line: var(--zy-hairline);
+  --zy-mm-line-strong: var(--zy-hairline-strong);
+  --zy-mm-muted: var(--zy-muted);
+  --zy-mm-brand-soft: var(--zy-brand-soft);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__bar {
+  background: var(--zy-surface);
+  border-bottom: 1px solid var(--zy-mm-line);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__mark {
+  border: 1px solid var(--zy-mm-line-strong);
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-mm-sunken);
+  color: var(--zy-brand);
+  font-family: var(--zy-font-mono);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__sub {
+  color: var(--zy-mm-muted);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__trigger,
+html[data-zy-theme='basic'] .zy-mega-menu__plain {
+  color: var(--zy-ink);
+  border-radius: var(--zy-radius-sm) var(--zy-radius-sm) 0 0;
+}
+
+/* 悬停与选中共用同一套底色：选中态常亮，指针离开也留着 */
+html[data-zy-theme='basic'] .zy-mega-menu__trigger:hover,
+html[data-zy-theme='basic'] .zy-mega-menu__plain:hover,
+html[data-zy-theme='basic'] .zy-mega-menu__trigger.is-current {
+  background: var(--zy-mm-sunken);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__trigger.is-open {
+  color: var(--zy-brand);
+  box-shadow: inset 0 -2px 0 var(--zy-brand);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__panel {
+  background: var(--zy-surface);
+  border: 1px solid var(--zy-mm-line);
+  border-radius: var(--zy-radius);
+  box-shadow: var(--zy-shadow-float);
+}
+
+/* 滑行高亮与二级选中态共用一层皮：选中的那条一直亮着 */
+html[data-zy-theme='basic'] .zy-mega-menu__glide,
+html[data-zy-theme='basic'] .zy-mega-menu__link.is-current,
+html[data-zy-theme='basic'] .zy-mega-menu__group-link.is-current {
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-mm-sunken);
+  /* 浅灰落在白纸片上也几乎看不见，按图纸语言补一道 1px 发丝边把它交代出来 */
+  box-shadow: inset 0 0 0 1px var(--zy-mm-line);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__ico {
+  border: 1px solid var(--zy-mm-line);
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-surface);
+  color: var(--zy-brand);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__title,
+html[data-zy-theme='basic'] .zy-mega-menu__group-link {
+  color: var(--zy-ink);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__desc,
+html[data-zy-theme='basic'] .zy-mega-menu__note {
+  color: var(--zy-mm-muted);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__badge {
+  color: var(--zy-brand);
+  background: var(--zy-mm-brand-soft);
+  border: 1px solid color-mix(in srgb, var(--zy-brand) 26%, transparent);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__foot {
+  border-top: 1px solid var(--zy-mm-line);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__more {
+  color: var(--zy-brand);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__card {
+  border: 1px solid var(--zy-mm-line);
+  border-radius: var(--zy-radius-sm);
+  background: var(--zy-mm-sunken);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__kicker,
+html[data-zy-theme='basic'] .zy-mega-menu__group-title,
+html[data-zy-theme='basic'] .zy-mega-menu__card-desc {
+  color: var(--zy-mm-muted);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__group-title {
+  border-bottom: 1px solid var(--zy-mm-line);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__card-title {
+  color: var(--zy-ink);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__group-link {
+  border-radius: var(--zy-radius-sm);
+}
+
+html[data-zy-theme='basic'] .zy-mega-menu__group-ico {
+  color: var(--zy-mm-muted);
+}
+
+/*
+ * =====================================================================
+ * 0.1 · 图纸 · 夜（data-zy-theme="basic" + html.dark）
+ * ---------------------------------------------------------------------
+ * 与键帽主题的 §0.1 相对：图纸只有两级阶梯（底纸 / 纸片），夜里也不补厚度、
+ * 不加白弧。这一节只做三件事 —— 把纸压成中性石墨、把字换成中性白、
+ * 把深色下会「读成一道缝」的发丝线与控件线分开。
+ * 共用色板在 tokens/dark.css，这里只放图纸自己的那份。
+ * =====================================================================
+ */
+/* =====================================================================
+ * 1 · 主题 A · 深色（图纸 · 夜）
+ * ---------------------------------------------------------------------
+ * 同一张纸，夜里开了一盏台灯：底纸更暗、纸片略亮、边界线比面亮。
+ * 仍然只有两级阶梯 —— 不为深色补厚度，也不给卡片加白弧（那是 B 的语言）。
+ * ===================================================================== */
+
+html.dark[data-zy-theme='basic'] {
+  /* ---------- 表面：中性石墨，不是蓝黑。
+   * 浅色档的纸是中性白（#f2f4f6），夜里也应该是中性纸 —— 底色一旦偏蓝，
+   * 品牌蓝就再也读不出「这是标注」，整页都在发蓝。两级阶梯仍保持 1.14:1。 */
+  --zy-paper: #0f1014; /* 底纸（页面） */
+  --zy-surface: #1b1d23; /* 纸片（卡片 / 面板 / 弹层） */
+  --zy-surface-sunken: #15171c; /* 正文区 / 斑马行 */
+  --zy-panel-body-bg: #171a1f;
+
+  /* ---------- 字：中性白，不偏蓝 ---------- */
+  --zy-ink: #ecedef; /* 14.41:1 */
+  --zy-muted: #a0a6ae; /* 6.88:1 */
+  --zy-placeholder: #858b94; /* 4.92:1 */
+
+  /* ---------- 线：深色下「发丝线」必须比面亮，否则读成一道缝；控件线要能看清（≥3:1） ---------- */
+  --zy-hairline: #303339; /* 1.33:1 —— 装饰边界（卡片 / 容器） */
+  --zy-hairline-strong: #69717c; /* 3.42:1 —— 控件边界 */
+
+  /* ---------- 阴影：深色里影子本来就看不见，压成一层更实的暗角 ---------- */
+  --zy-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.38);
+  --zy-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.62);
+  --zy-shadow-deep: rgba(0, 0, 0, 0.55);
+  --zy-shadow-press: 0 6px 18px rgba(90, 166, 228, 0.3);
+
+  /* ---------- 表格：表头是台账的栏头，深色下换成深一档的纸 + 浅一档的字 ---------- */
+  --zy-table-header-bg: #23272e;
+  --zy-table-header-fg: #d3dae2; /* 10.4:1 */
+  --zy-table-row-stripe: #15171c;
+  --zy-table-row-hover: rgba(90, 166, 228, 0.1);
+
+  /* ---------- 实心按钮：仍是「上浅下深」，只是把整段亮度压到白字够读的位置 ---------- */
+  --zy-btn-grad-primary: linear-gradient(180deg, #2876af 0%, #1d5f92 100%);
+  --zy-btn-grad-primary-hover: linear-gradient(180deg, #1d5f92 0%, #2876af 100%);
+  --zy-btn-edge-primary: #5aa6e4;
+
+  --zy-btn-grad-success: linear-gradient(180deg, #38803d 0%, #2c6631 100%);
+  --zy-btn-grad-success-hover: linear-gradient(180deg, #2c6631 0%, #38803d 100%);
+  --zy-btn-edge-success: #6cc24a;
+
+  --zy-btn-grad-warning: linear-gradient(180deg, #e8a13a 0%, #c98a2c 100%);
+  --zy-btn-grad-warning-hover: linear-gradient(180deg, #c98a2c 0%, #e8a13a 100%);
+  --zy-btn-edge-warning: #ffc46b;
+
+  --zy-btn-grad-info: linear-gradient(180deg, #5f6f80 0%, #46525f 100%);
+  --zy-btn-grad-info-hover: linear-gradient(180deg, #46525f 0%, #5f6f80 100%);
+  --zy-btn-edge-info: #9ab0c6;
+
+  /* fill（键帽本体）不是 A 的语言，板上不展示；但令牌仍要给出深色下的正确值，
+   * 免得别处一用就落回「亮品牌面 + 白字」的 2.4:1。 */
+  --zy-btn-fill-clr: var(--zy-brand-key);
+  --zy-btn-fill-ink: #fff;
+  --zy-btn-fill-ink-on: #fff;
+  --zy-btn-fill-shade: rgba(255, 255, 255, 0.18);
+
+  --el-border-radius-base: var(--zy-radius);
+  --el-component-size: var(--zy-control-h);
+}
+
+/* 1.1 卡片：仍是白纸片，只是纸变黑。纸面装饰层（白弧 / 铺色）属于 B 的材质，深色下必须关掉 ——
+ * 浅色时它们在白面上看不见，深色下会变成两道弧光，等于偷偷给 A 加了厚度。 */
+html.dark[data-zy-theme='basic'] .zy-card-fill-wave {
+  display: none;
+}
+
+/* 1.2 控件：面 = 纸片，边 = 控件档发丝线；聚焦仍是「描边转主色 + 3px 光环」，一点厚度都不加 */
+html.dark[data-zy-theme='basic'] .zy-input.is-focus .el-input__wrapper,
+html.dark[data-zy-theme='basic'] .zy-select.is-focus .el-select__wrapper {
+  background-color: var(--zy-surface);
+  box-shadow: 0 0 0 1px var(--zy-hairline-strong) inset;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html.dark[data-zy-theme='basic'] .zy-input.is-focus .el-input__wrapper:hover,
+  html.dark[data-zy-theme='basic'] .zy-select.is-focus .el-select__wrapper:hover {
+    box-shadow: 0 0 0 1px var(--zy-brand) inset;
+  }
+}
+
+html.dark[data-zy-theme='basic'] .zy-input.is-focus .el-input__wrapper.is-focus,
+html.dark[data-zy-theme='basic'] .zy-select.is-focus .el-select__wrapper.is-focused {
+  box-shadow:
+    0 0 0 1px var(--zy-brand) inset,
+    0 0 0 3px color-mix(in srgb, var(--zy-brand) 22%, transparent);
+}
+
+/* 1.3 实心按钮的两个例外：
+ * 危险是平色（不是渐变），警示是亮琥珀面 —— 一个要把面压深、一个要把字翻墨。 */
+html.dark[data-zy-theme='basic']
+  .zy-btn.el-button--danger:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill, .is-disabled)) {
+  --el-button-bg-color: var(--zy-danger-key);
+  --el-button-border-color: var(--zy-danger-key);
+  --el-button-hover-bg-color: var(--zy-danger-key-hover);
+  --el-button-hover-border-color: var(--zy-danger-key-hover);
+  --el-button-active-bg-color: var(--zy-danger-key-hover);
+  --el-button-active-border-color: var(--zy-danger-key-hover);
+  --el-button-text-color: #fff;
+  --el-button-hover-text-color: #fff;
+  --el-button-active-text-color: #fff;
+}
+
+html.dark[data-zy-theme='basic'] .zy-btn.el-button--warning {
+  --el-button-text-color: var(--zy-warning-ink);
+  --el-button-hover-text-color: var(--zy-warning-ink);
+  --el-button-active-text-color: var(--zy-warning-ink);
+}
+
+/* 禁用：浅色档是「叠一层 50% 白」把键洗淡；深色下换成叠一层底纸色，才读成「按不动」而不是「在发光」 */
+html.dark[data-zy-theme='basic']
+  .zy-btn.el-button--primary.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)),
+html.dark[data-zy-theme='basic']
+  .zy-btn.el-button--success.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)),
+html.dark[data-zy-theme='basic']
+  .zy-btn.el-button--warning.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)),
+html.dark[data-zy-theme='basic']
+  .zy-btn.el-button--info.is-disabled:not(:where(.is-plain, .is-dashed, .is-text, .is-link, .is-sweep, .is-fill)) {
+  background-image: linear-gradient(rgba(10, 16, 23, 0.45), rgba(10, 16, 23, 0.45)),
+    var(--zy-btn-grad);
+  background-origin: border-box;
+}
+
+/* sweep 的字与描边取亮档品牌色（--zy-brand），在深色纸面上仍然清楚 */
+
+/* 1.4 弹层：浅色档那块「白面板 + 发丝边 + 极轻影」在深色下换成纸片 + 线 + 一层实影 */
+html.dark[data-zy-theme='basic'] .zy-panel {
+  box-shadow: var(--zy-shadow-card);
+}
+
+html.dark[data-zy-theme='basic'] .el-picker-panel,
+html.dark[data-zy-theme='basic'] .el-time-panel,
+html.dark[data-zy-theme='basic'] .el-time-range-picker {
+  border: 1px solid var(--zy-hairline);
+  background: var(--zy-surface);
+  box-shadow: var(--zy-shadow-card);
+}
+
+html.dark[data-zy-theme='basic'] .el-time-panel__footer {
+  border-top: 1px solid var(--zy-hairline);
+  background: var(--zy-surface-sunken);
+}
+
+/* 1.5 表格 / 树：深色档不套 `:not(.dark)`，所以把图纸语言那两块原样补回来，只换填充色 */
+html.dark[data-zy-theme='basic'] .zy-tree-shell {
+  position: relative;
+}
+
+html.dark[data-zy-theme='basic'] .zy-tree {
+  --zy-tree-row: 32px;
+}
+
+html.dark[data-zy-theme='basic'] .zy-tree .el-tree-node__content {
+  padding-inline: 12px !important;
+  margin-block: 3px;
+}
+
+html.dark[data-zy-theme='basic'] .zy-tree .el-tree-node__content:hover {
+  background: transparent;
+}
+
+html.dark[data-zy-theme='basic'] .zy-tree-shell .zy-tree-glide {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: var(--zy-radius-sm);
+  /* 深色下「悬停」是提亮，不是加深：一层 6% 白 + 一圈线 */
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 0 0 1px var(--zy-hairline);
+  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);
+}
+
+html.dark[data-zy-theme='basic'] .zy-tree .el-tree-node.is-current > .el-tree-node__content {
+  background: var(--zy-brand-soft);
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
+/* 1.6 对话框：账本头条（品牌渐变 + 2px 线）在深色下保留；线色统一在第 0.8 节改成品牌色 */
+html.dark[data-zy-theme='basic'] .zy-dialog .el-dialog__header {
+  background: linear-gradient(180deg, var(--zy-brand-soft) 0%, var(--zy-surface) 72%);
+}
+
+html.dark[data-zy-theme='basic'] .zy-dialog .el-dialog__footer {
+  background: var(--zy-surface-sunken);
+}
+
+/* 1.7 滑块拼图验证：缺口是「图上挖掉的一块」，浅色档用墨色剪影；深色档 ink 变浅了，
+ * 剪影必须显式回到黑，否则会变成一块发亮的补丁。 */
+html.dark[data-zy-theme='basic'] .zy-verify__gap,
+html.dark[data-zy-theme='basic'] .zy-verify__gap::after {
+  background: color-mix(in srgb, #000 55%, transparent);
+}
+
+/* 1.8 复选框：勾选面取「实心键面」那一档（白勾 4.88:1）。
+ * 浅色档这里直接用 --zy-brand #0066a9，深色下它变成亮档 #5aa6e4 —— 白勾只剩 2.4:1，
+ * 所以面必须换回 --zy-brand-key。这一类「--zy-brand 被当面色用」的位置在深色下都要逐个换。 */
+html.dark[data-zy-theme='basic'] .zy-check .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
+html.dark[data-zy-theme='basic'] .zy-check .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner,
+html.dark[data-zy-theme='basic'] .zy-tree .el-checkbox__input:not(.is-disabled).is-checked .el-checkbox__inner,
+html.dark[data-zy-theme='basic'] .zy-tree .el-checkbox__input:not(.is-disabled).is-indeterminate .el-checkbox__inner {
+  background-color: var(--zy-brand-key);
+  border-color: var(--zy-brand-key);
+}
+
+/* 1.9 舞台：浅色档用「底纸 70% 叠在卡片上」把舞台调灰一档；深色下这个半透明叠色会
+ * 把舞台压到比底纸更暗（叠的是石墨卡片，不是白卡），层级方向就反了 —— 深色下直接给底纸。 */
+
+/* ---------------------------------------------------------------------
+ * 收尾两笔（方案稿 0.8 的 A 侧）
+ * ------------------------------------------------------------------- */
+
+/* ① 对话框抬头那道 2px 线在组件里写死成绿：A 的语言里只有「蓝墨 + 纸」，
+ *    夜里换成品牌色压深一档的那条，读起来仍是「抬头」，不是状态条。 */
+html.dark[data-zy-theme='basic'] .zy-dialog .el-dialog__header {
+  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--zy-brand) 78%, var(--zy-surface));
+}
+
+/* ② 实心标签：A 的「面」取深档键面 —— 共用板把字档语义色提亮成夜间可读的亮色，
+ *    那张亮色当「面」时白字只有 2.0–2.7:1；面换深档后 4.86–5.19:1。 */
+html.dark[data-zy-theme='basic'] .zy-tag.is-fill {
+  --zy-tag-fill-clr: var(--zy-brand-key);
+}
+
+html.dark[data-zy-theme='basic'] .zy-tag.is-fill.el-tag--success {
+  --zy-tag-fill-clr: var(--zy-green-key);
+}
+
+html.dark[data-zy-theme='basic'] .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='basic'] .zy-tag.is-fill.el-tag--danger {
+  --zy-tag-fill-clr: var(--zy-danger-key);
+}
+
+html.dark[data-zy-theme='basic'] .zy-tag.is-fill.el-tag--info {
+  --zy-tag-fill-clr: var(--zy-info-key);
+}