knight-ui 1.1.2 → 1.1.4

package/tokens/tokens.css

@@ -1,497 +1,1196 @@
-/* ===== Knight UI 设计 Token ===== */
-/* Design Token 体系. */
+/* ══════════════════════════════════════════════════════════════════════════
+   构建产物 —— 请勿手改。
 
-:root {
-    /* ---- 基础色 ---- */
-    --ku-grey-9: 249, 249, 249;
-    --ku-white: 255, 255, 255;
-    --ku-black: 0, 0, 0;
-
-    /* ---- 主色 ---- */
-    --ku-color-primary: #8b5cf6;
-    --ku-color-primary-hover: #a78bfa;
-    --ku-color-primary-active: #7c3aed;
-    --ku-color-primary-disabled: #5b3e9e;
-    --ku-color-primary-light-default: rgba(139, 92, 246, 0.08);
-    --ku-color-primary-light-hover: rgba(139, 92, 246, 0.15);
-    --ku-color-primary-light-active: rgba(139, 92, 246, 0.2);
-
-    /* ---- 语义色 ---- */
-    --ku-color-success: #22c55e;
-    --ku-color-warning: #f59e0b;
-    --ku-color-danger: #ef4444;
-    --ku-color-info: #3b82f6;
-
-    /* ---- 文字色 ---- */
-    --ku-color-text-0: rgba(var(--ku-grey-9), 1);
-    --ku-color-text-1: rgba(var(--ku-grey-9), 0.8);
-    --ku-color-text-2: rgba(var(--ku-grey-9), 0.62);
-    --ku-color-text-3: rgba(var(--ku-grey-9), 0.35);
-
-    /* ---- 背景色 ---- */
-    --ku-color-bg-0: #0a0a14;
-    --ku-color-bg-1: #12121e;
-    --ku-color-bg-2: #16162a;
-    --ku-color-bg-3: #1e1e32;
-    --ku-color-bg-4: #2a2a3e;
-
-    /* ---- 填充色 ---- */
-    --ku-color-fill-0: #111122;
-    --ku-color-fill-1: #282840;
-    --ku-color-fill-2: #323250;
-
-    /* ---- 边框 ---- */
-    --ku-color-border: rgba(var(--ku-white), 0.08);
-
-    /* ---- 链接 ---- */
-    --ku-color-link: #8b5cf6;
-    --ku-color-link-hover: #a78bfa;
-    --ku-color-link-active: #7c3aed;
-
-    /* ---- 禁用 ---- */
-    --ku-color-disabled-text: rgba(var(--ku-grey-9), 0.35);
-    --ku-color-disabled-border: transparent;
-    --ku-color-disabled-bg: rgba(var(--ku-grey-9), 0.04);
-    --ku-color-disabled-fill: rgba(var(--ku-grey-9), 0.04);
-
-    /* ---- 阴影 ---- */
-    --ku-color-shadow: rgba(var(--ku-black), 0.04);
-    --ku-shadow-elevated: 0 0 1px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.1);
-
-    /* ---- 字号 ---- */
-    --ku-font-size-xs: 10px;
-    --ku-font-size-sm: 11px;
-    --ku-font-size-base: 12px;
-    --ku-font-size-md: 13px;
-    --ku-font-size-lg: 14px;
-    --ku-font-size-xl: 16px;
-    --ku-font-size-2xl: 18px;
-    --ku-font-size-3xl: 20px;
-    --ku-font-size-4xl: 24px;
-
-    /* ---- 圆角 ---- */
-    --ku-radius-xs: 2px;
-    --ku-radius-sm: 3px;
-    --ku-radius-base: 4px;
-    --ku-radius-md: 6px;
-    --ku-radius-lg: 8px;
-    --ku-radius-xl: 10px;
-
-    /* ---- 间距 ---- */
-    --ku-spacing-xs: 2px;
-    --ku-spacing-sm: 4px;
-    --ku-spacing-base: 8px;
-    --ku-spacing-md: 12px;
-    --ku-spacing-lg: 16px;
-    --ku-spacing-xl: 20px;
-
-    /* ---- z-index ---- */
-    --ku-z-mask: 1000;
-    --ku-z-overlay: 1010;
-    --ku-z-modal: 1020;
-    --ku-z-toast: 1030;
-
-    /* ---- 过渡 ---- */
-    --ku-transition-fast: 100ms ease;
-    --ku-transition-base: 200ms ease;
-    --ku-transition-slow: 300ms ease;
-
-    /* ---- 组件通用 ---- */
-    --ku-font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
-}
-
-/* ===== 亮色主题覆盖 ===== */
+   本文件由 scripts/build-css.mjs 把下面两个源文件按序拼接而成:
+       1. src/component/tokens/palette.css   色板层(裸三元组), 由 scripts/gen-palette.mjs 生成
+       2. src/component/tokens/tokens.css    语义层 + 少数类规则(玻璃 / 遮罩 / 滚动条)
 
-:root[data-ku-theme="light"] {
-    --ku-grey-9: 28, 31, 35;
-    --ku-color-bg-0: #f0f2f5;
-    --ku-color-bg-1: #f7f8fa;
-    --ku-color-bg-2: #ffffff;
-    --ku-color-bg-3: #e7eaf0;
-    --ku-color-bg-4: #dce0e6;
-    --ku-color-fill-0: #f4f4f5;
-    --ku-color-fill-1: #ebebed;
-    --ku-color-fill-2: #e2e2e5;
-    --ku-color-border: rgba(var(--ku-grey-9), 0.08);
-}
+   改配色 → scripts/gen-palette.mjs 顶部, 然后 npm run gen:palette
+   改语义 → src/component/tokens/tokens.css, 然后 npm run build
+   ══════════════════════════════════════════════════════════════════════════ */
 
-/* ===== 动画关键帧 ===== */
+/* ══════════════════════════════════════════════════════════════════════════
+   色板层(Palette) —— 自动生成, 请勿手改。
 
-@keyframes ku-spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
+   改配色请改 scripts/gen-palette.mjs 顶部的锚点/偏移表, 然后重跑:
+       npm run gen:palette
+   校验已入库的产物是否等于脚本输出:
+       npm run check:palette
 
-/* ===== 全局交互基类 ===== */
+   ── 这里存的是裸 "R, G, B" 三元组, **不带 alpha** ──
+   这是整个三层方案成立的前提: 只有裸三元组才能被上层写成 rgba(var(--ku-blue-5), 0.2)。
+   反过来说, 把三元组直接当颜色用是错的 —— `color: var(--ku-blue-5)` 是非法值, 声明会
+   被静默丢弃、元素继承父色, 没有报错。用之前必须包一层: rgb(...) / rgba(..., α)。
 
-/* 可聚焦元素焦点环 */
-.ku-focus-ring:focus-visible,
-.ku-select-trigger:focus-visible,
-.ku-input-core:focus-visible,
-.ku-dropdown button:focus-visible {
-    outline: 2px solid var(--ku-color-primary);
-    outline-offset: 1px;
-}
+   ── 阶梯方向随主题翻转 ──
+   第 0 档 = 最贴该主题的底色, 第 9 档 = 最远离底色(最像墨色)。
+   于是「朝墨色走一档」在两个主题里都成立 —— 暗色下变亮、亮色下变暗。
+   这就是 --ku-color-primary-hover 能一行服务两个主题、且方向都正确的原因。
 
-/* 通用禁用态 */
-.ku-disabled {
-    pointer-events: none !important;
-    opacity: 0.5 !important;
-    cursor: not-allowed !important;
-}
+   ── 第 5 档在两个主题里都是品牌锚点 ──
+   这条不变式保证「第 N 档」在两个主题里指同一个**角色**。它的适用范围到此为止 ——
+   它**不**蕴含「同一个档位号在两个主题里明度相同」: 阶梯方向是翻转的, 第 4 档在暗色下
+   比锚点暗、在亮色下比锚点亮。所以需要等明度的内容色板必须按主题各选一次档
+   (见下面两个主题块里的 --ku-content-*)。改动偏移表时不要破坏 [5] = 0。
 
-/* 通用按钮基础 */
-.ku-btn-base {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--ku-spacing-sm);
-    font-family: var(--ku-font-family);
-    font-weight: 600;
-    border: none;
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    transition: background-color var(--ku-transition-fast),
-                color var(--ku-transition-fast),
-                box-shadow var(--ku-transition-fast),
-                filter var(--ku-transition-fast);
-}
+   ── 加载顺序无所谓 ──
+   自定义属性替换是惰性的: 语义层写 `rgb(var(--ku-blue-5))`, 即使本文件在 tokens.css
+   之后才解析也能正确求值。所以「谁先 import」不会成为 bug。
 
-.ku-btn-base:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-}
+   本文件在构建期与 tokens.css 拼接成同一个 dist/tokens/tokens.css(见 package.json 的 build),
+   公开契约仍然只有一个样式表。
+   ══════════════════════════════════════════════════════════════════════ */
 
-/* ===== Button 按钮 ===== */
+:root {
+    /* 无彩色: --ku-white 供 .ku-glass-menu 的奶膜, --ku-black 供 --ku-shadow-*。
+       它们不随主题翻转, 所以只在这里定义一次。 */
+    --ku-white: 255, 255, 255;    /* #ffffff · L 100.0% */
+    --ku-black: 0, 0, 0;          /* #000000 · L 0.0% */
+
+    /* ---- grey: 显式停靠表(不走 ΔL 规则 —— 没有品牌锚点, 且每档都是承重的) ---- */
+    --ku-grey-0: 12, 14, 18;      /* #0c0e12 · L 16.3% C 0.009 H 264.3 */
+    --ku-grey-1: 19, 22, 32;      /* #131620 · L 20.2% C 0.021 H 271.5 */
+    --ku-grey-2: 26, 31, 43;      /* #1a1f2b · L 24.0% C 0.024 H 267.0 */
+    --ku-grey-3: 38, 42, 51;      /* #262a33 · L 28.5% C 0.018 H 266.3 */
+    --ku-grey-4: 47, 52, 60;      /* #2f343c · L 32.3% C 0.016 H 259.8 */
+    --ku-grey-5: 58, 64, 73;      /* #3a4049 · L 36.9% C 0.017 H 258.4 */
+    --ku-grey-6: 95, 107, 124;    /* #5f6b7c · L 52.4% C 0.031 H 257.1 */
+    --ku-grey-7: 171, 179, 191;   /* #abb3bf · L 76.4% C 0.019 H 258.4 */
+    --ku-grey-8: 201, 208, 218;   /* #c9d0da · L 85.5% C 0.016 H 257.2 */
+    --ku-grey-9: 246, 247, 249;   /* #f6f7f9 · L 97.6% C 0.003 H 264.5  ← 锚点 */
+
+    /* ---- blue: 第 5 档 = 品牌锚点 #4c90f0 ---- */
+    --ku-blue-0: 39, 72, 118;     /* #274876 · L 40.0% C 0.087 H 257.0 */
+    --ku-blue-1: 40, 83, 144;     /* #285390 · L 44.4% C 0.111 H 257.5 */
+    --ku-blue-2: 42, 94, 168;     /* #2a5ea8 · L 48.6% C 0.131 H 257.7 */
+    --ku-blue-3: 45, 106, 191;    /* #2d6abf · L 53.0% C 0.147 H 257.5 */
+    --ku-blue-4: 54, 119, 210;    /* #3677d2 · L 57.4% C 0.155 H 257.5 */
+    --ku-blue-5: 76, 144, 240;    /* #4c90f0 · L 65.5% C 0.159 H 257.4  ← 锚点 */
+    --ku-blue-6: 102, 163, 250;   /* #66a3fa · L 71.2% C 0.143 H 257.4 */
+    --ku-blue-7: 128, 177, 247;   /* #80b1f7 · L 75.4% C 0.114 H 257.3 */
+    --ku-blue-8: 162, 197, 246;   /* #a2c5f6 · L 81.5% C 0.079 H 256.8 */
+    --ku-blue-9: 196, 217, 248;   /* #c4d9f8 · L 88.0% C 0.049 H 258.0 */
+
+    /* ---- green: 第 5 档 = 品牌锚点 #22c55e ---- */
+    --ku-green-0: 37, 106, 56;    /* #256a38 · L 46.7% C 0.105 H 149.5 */
+    --ku-green-1: 20, 123, 57;    /* #147b39 · L 51.2% C 0.134 H 149.6 */
+    --ku-green-2: 0, 138, 60;     /* #008a3c · L 55.3% C 0.154 H 149.5 */
+    --ku-green-3: 0, 154, 68;     /* #009a44 · L 59.9% C 0.167 H 149.6 */
+    --ku-green-4: 0, 169, 75;     /* #00a94b · L 64.2% C 0.179 H 149.5 */
+    --ku-green-5: 34, 197, 94;    /* #22c55e · L 72.3% C 0.192 H 149.6  ← 锚点 */
+    --ku-green-6: 85, 213, 120;   /* #55d578 · L 77.9% C 0.173 H 149.6 */
+    --ku-green-7: 126, 221, 147;  /* #7edd93 · L 82.0% C 0.138 H 149.6 */
+    --ku-green-8: 171, 235, 183;  /* #abebb7 · L 88.3% C 0.096 H 149.8 */
+    --ku-green-9: 212, 249, 217;  /* #d4f9d9 · L 94.7% C 0.057 H 149.0 */
+
+    /* ---- cyan: 第 5 档 = 品牌锚点 #22d3ee ---- */
+    --ku-cyan-0: 51, 123, 136;    /* #337b88 · L 54.3% C 0.074 H 211.3 */
+    --ku-cyan-1: 33, 139, 156;    /* #218b9c · L 58.7% C 0.094 H 211.1 */
+    --ku-cyan-2: 0, 154, 175;     /* #009aaf · L 63.0% C 0.110 H 211.6 */
+    --ku-cyan-3: 0, 169, 191;     /* #00a9bf · L 67.4% C 0.117 H 211.0 */
+    --ku-cyan-4: 0, 183, 208;     /* #00b7d0 · L 71.5% C 0.125 H 211.9 */
+    --ku-cyan-5: 34, 211, 238;    /* #22d3ee · L 79.7% C 0.134 H 211.5  ← 锚点 */
+    --ku-cyan-6: 89, 224, 249;    /* #59e0f9 · L 84.3% C 0.121 H 212.1 */
+    --ku-cyan-7: 133, 232, 251;   /* #85e8fb · L 87.7% C 0.097 H 211.4 */
+    --ku-cyan-8: 183, 243, 255;   /* #b7f3ff · L 92.7% C 0.062 H 211.3 */
+    --ku-cyan-9: 236, 252, 255;   /* #ecfcff · L 98.0% C 0.017 H 210.2 */
+
+    /* ---- teal: 第 5 档 = 品牌锚点 #14b8a6 ---- */
+    --ku-teal-0: 31, 97, 88;      /* #1f6158 · L 44.9% C 0.067 H 182.5 */
+    --ku-teal-1: 8, 113, 101;     /* #087165 · L 49.3% C 0.086 H 182.0 */
+    --ku-teal-2: 0, 127, 114;     /* #007f72 · L 53.5% C 0.096 H 182.5 */
+    --ku-teal-3: 0, 142, 127;     /* #008e7f · L 58.0% C 0.104 H 182.0 */
+    --ku-teal-4: 0, 156, 141;     /* #009c8d · L 62.2% C 0.111 H 183.0 */
+    --ku-teal-5: 20, 184, 166;    /* #14b8a6 · L 70.4% C 0.123 H 182.5  ← 锚点 */
+    --ku-teal-6: 79, 200, 183;    /* #4fc8b7 · L 76.0% C 0.110 H 182.5 */
+    --ku-teal-7: 120, 209, 195;   /* #78d1c3 · L 80.1% C 0.089 H 182.8 */
+    --ku-teal-8: 165, 224, 213;   /* #a5e0d5 · L 86.3% C 0.062 H 182.0 */
+    --ku-teal-9: 206, 240, 233;   /* #cef0e9 · L 92.9% C 0.037 H 181.7 */
+
+    /* ---- amber: 第 5 档 = 品牌锚点 #f59e0b ---- */
+    --ku-amber-0: 136, 93, 37;    /* #885d25 · L 51.4% C 0.091 H 70.2 */
+    --ku-amber-1: 158, 102, 17;   /* #9e6611 · L 55.8% C 0.115 H 70.2 */
+    --ku-amber-2: 177, 112, 0;    /* #b17000 · L 60.1% C 0.130 H 69.9 */
+    --ku-amber-3: 194, 124, 0;    /* #c27c00 · L 64.5% C 0.139 H 70.4 */
+    --ku-amber-4: 212, 135, 0;    /* #d48700 · L 68.7% C 0.149 H 69.8 */
+    --ku-amber-5: 245, 158, 11;   /* #f59e0b · L 76.9% C 0.165 H 70.1  ← 锚点 */
+    --ku-amber-6: 255, 179, 82;   /* #ffb352 · L 82.2% C 0.142 H 69.9 */
+    --ku-amber-7: 255, 197, 128;  /* #ffc580 · L 86.1% C 0.109 H 70.4 */
+    --ku-amber-8: 255, 222, 185;  /* #ffdeb9 · L 91.9% C 0.061 H 70.2 */
+    --ku-amber-9: 255, 247, 238;  /* #fff7ee · L 98.0% C 0.015 H 70.9 */
+
+    /* ---- orange: 第 5 档 = 品牌锚点 #f97316 ---- */
+    --ku-orange-0: 130, 65, 27;   /* #82411b · L 45.1% C 0.103 H 48.0 */
+    --ku-orange-1: 155, 69, 9;    /* #9b4509 · L 49.5% C 0.131 H 47.7 */
+    --ku-orange-2: 175, 76, 0;    /* #af4c00 · L 53.7% C 0.147 H 47.6 */
+    --ku-orange-3: 195, 85, 0;    /* #c35500 · L 58.1% C 0.160 H 47.3 */
+    --ku-orange-4: 214, 95, 0;    /* #d65f00 · L 62.4% C 0.171 H 47.7 */
+    --ku-orange-5: 249, 115, 22;  /* #f97316 · L 70.5% C 0.187 H 47.6  ← 锚点 */
+    --ku-orange-6: 255, 144, 84;  /* #ff9054 · L 76.2% C 0.154 H 47.6 */
+    --ku-orange-7: 255, 166, 120; /* #ffa678 · L 80.4% C 0.122 H 47.8 */
+    --ku-orange-8: 255, 195, 166; /* #ffc3a6 · L 86.4% C 0.079 H 47.0 */
+    --ku-orange-9: 255, 225, 210; /* #ffe1d2 · L 93.0% C 0.039 H 48.3 */
+
+    /* ---- red: 第 5 档 = 品牌锚点 #ef4444 ---- */
+    --ku-red-0: 116, 35, 33;      /* #742321 · L 38.3% C 0.114 H 25.5 */
+    --ku-red-1: 141, 31, 33;      /* #8d1f21 · L 42.5% C 0.146 H 25.2 */
+    --ku-red-2: 165, 29, 34;      /* #a51d22 · L 46.9% C 0.171 H 25.4 */
+    --ku-red-3: 188, 30, 38;      /* #bc1e26 · L 51.3% C 0.191 H 25.4 */
+    --ku-red-4: 207, 40, 46;      /* #cf282e · L 55.6% C 0.201 H 25.4 */
+    --ku-red-5: 239, 68, 68;      /* #ef4444 · L 63.7% C 0.208 H 25.3  ← 锚点 */
+    --ku-red-6: 251, 99, 94;      /* #fb635e · L 69.3% C 0.187 H 25.1 */
+    --ku-red-7: 249, 128, 120;    /* #f98078 · L 73.5% C 0.149 H 25.3 */
+    --ku-red-8: 249, 162, 154;    /* #f9a29a · L 79.7% C 0.105 H 25.4 */
+    --ku-red-9: 248, 195, 189;    /* #f8c3bd · L 86.3% C 0.062 H 25.9 */
+
+    /* ---- pink: 第 5 档 = 品牌锚点 #ec4899 ---- */
+    --ku-pink-0: 117, 39, 76;     /* #75274c · L 40.1% C 0.116 H 354.2 */
+    --ku-pink-1: 141, 36, 89;     /* #8d2459 · L 44.4% C 0.148 H 354.1 */
+    --ku-pink-2: 164, 35, 102;    /* #a42366 · L 48.8% C 0.174 H 354.3 */
+    --ku-pink-3: 186, 36, 115;    /* #ba2473 · L 53.2% C 0.195 H 354.4 */
+    --ku-pink-4: 205, 46, 128;    /* #cd2e80 · L 57.6% C 0.205 H 354.5 */
+    --ku-pink-5: 236, 72, 153;    /* #ec4899 · L 65.6% C 0.212 H 354.3  ← 锚点 */
+    --ku-pink-6: 249, 102, 170;   /* #f966aa · L 71.3% C 0.191 H 354.2 */
+    --ku-pink-7: 248, 131, 181;   /* #f883b5 · L 75.4% C 0.152 H 354.4 */
+    --ku-pink-8: 249, 166, 199;   /* #f9a6c7 · L 81.5% C 0.106 H 354.2 */
+    --ku-pink-9: 251, 199, 218;   /* #fbc7da · L 88.1% C 0.064 H 354.6 */
+
+    /* ---- violet: 第 5 档 = 品牌锚点 #a78bfa ---- */
+    --ku-violet-0: 89, 76, 130;   /* #594c82 · L 45.4% C 0.087 H 293.7 */
+    --ku-violet-1: 102, 84, 156;  /* #66549c · L 49.7% C 0.113 H 293.4 */
+    --ku-violet-2: 116, 93, 179;  /* #745db3 · L 54.1% C 0.131 H 293.9 */
+    --ku-violet-3: 129, 103, 201; /* #8167c9 · L 58.4% C 0.147 H 293.6 */
+    --ku-violet-4: 142, 115, 220; /* #8e73dc · L 62.8% C 0.154 H 293.3 */
+    --ku-violet-5: 167, 139, 250; /* #a78bfa · L 70.9% C 0.159 H 293.5  ← 锚点 */
+    --ku-violet-6: 183, 162, 255; /* #b7a2ff · L 76.6% C 0.132 H 293.4 */
+    --ku-violet-7: 195, 179, 255; /* #c3b3ff · L 80.7% C 0.107 H 293.5 */
+    --ku-violet-8: 213, 204, 255; /* #d5ccff · L 86.9% C 0.071 H 293.0 */
+    --ku-violet-9: 234, 229, 255; /* #eae5ff · L 93.4% C 0.035 H 294.5 */
+
+    /* ---- 内容色板(分类色板): 每个色相一个档 ----
+       各色相**等明度**是这条规则的全部目的: 分类色板里明度不齐, 就会有某一条数据序列
+       在图上视觉压过其他序列(改造前 VChart 的琥珀 L .769 与它的蓝 L .623 相差 .146,
+       图表看起来就是不平衡的)。
+
+       规则: 取该主题下 L 最接近 0.74 的那一档。**两个主题各选一次** —— 阶梯方向是翻转的,
+       同一个档位号在两个主题里明度不同(第 4 档暗色下比锚点暗、亮色下比锚点亮), 所以
+       「一张选档表两个主题通用」是错的: 实测那会把暗色下的跨度从 .177 顶到 .353。
+       本主题(暗色)的落点跨度见生成时的自检输出。
+
+       尾注释里的 `= --ku-<hue>-<n>` 就是它的出处; 值写成字面三元组而不是 var() 引用,
+       是为了让人在这里直接读到颜色本身, 也为免给裸三元组守卫开例外。 ---- */
+    --ku-content-blue: 128, 177, 247;   /* = --ku-blue-7 · #80b1f7 · L 75.4% */
+    --ku-content-cyan: 0, 183, 208;     /* = --ku-cyan-4 · #00b7d0 · L 71.5% */
+    --ku-content-teal: 79, 200, 183;    /* = --ku-teal-6 · #4fc8b7 · L 76.0% */
+    --ku-content-green: 34, 197, 94;    /* = --ku-green-5 · #22c55e · L 72.3% */
+    --ku-content-amber: 245, 158, 11;   /* = --ku-amber-5 · #f59e0b · L 76.9% */
+    --ku-content-orange: 255, 144, 84;  /* = --ku-orange-6 · #ff9054 · L 76.2% */
+    --ku-content-red: 249, 128, 120;    /* = --ku-red-7 · #f98078 · L 73.5% */
+    --ku-content-pink: 248, 131, 181;   /* = --ku-pink-7 · #f883b5 · L 75.4% */
+    --ku-content-violet: 183, 162, 255; /* = --ku-violet-6 · #b7a2ff · L 76.6% */
+    --ku-content-grey: 171, 179, 191;   /* = --ku-grey-7 · #abb3bf · L 76.4% */
 
-.ku-button {
-    border-radius: var(--ku-radius-base);
-    transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
-}
-.ku-button:hover:not(:disabled) {
-    filter: brightness(1.3);
-}
-.ku-button:active:not(:disabled) {
-    filter: brightness(0.75);
-}
-.ku-button:focus-visible {
-    outline: 2px solid var(--ku-color-primary);
-    outline-offset: 2px;
 }
 
-/* ===== FloatButton 悬浮按钮 ===== */
+/* 亮色: 方向翻转(第 0 档最浅), 且**不是**暗色的倒序 —— 明度镜像但彩度不镜像。
+   两段逐行对照着读即可确认: 同名的第 N 档在两边都在锚点的同一侧。 */
+:root[data-ku-theme="light"] {
+    /* ---- grey: 显式停靠表 ---- */
+    --ku-grey-0: 255, 255, 255;   /* #ffffff · L 100.0% C 0.000 H 89.9 */
+    --ku-grey-1: 245, 246, 248;   /* #f5f6f8 · L 97.3% C 0.003 H 264.5 */
+    --ku-grey-2: 236, 237, 240;   /* #ecedf0 · L 94.6% C 0.004 H 271.4 */
+    --ku-grey-3: 224, 226, 229;   /* #e0e2e5 · L 91.2% C 0.005 H 258.3 */
+    --ku-grey-4: 211, 214, 219;   /* #d3d6db · L 87.5% C 0.008 H 260.7 */
+    --ku-grey-5: 201, 201, 205;   /* #c9c9cd · L 83.7% C 0.006 H 286.3 */
+    --ku-grey-6: 153, 160, 169;   /* #99a0a9 · L 70.3% C 0.015 H 254.6 */
+    --ku-grey-7: 111, 116, 123;   /* #6f747b · L 55.7% C 0.012 H 256.7 */
+    --ku-grey-8: 72, 76, 82;      /* #484c52 · L 41.5% C 0.011 H 258.4 */
+    --ku-grey-9: 28, 31, 35;      /* #1c1f23 · L 23.8% C 0.009 H 255.6  ← 锚点 */
+
+    /* ---- blue: 第 5 档 = 品牌锚点 #4c90f0 ---- */
+    --ku-blue-0: 231, 241, 255;   /* #e7f1ff · L 95.5% C 0.022 H 256.7 */
+    --ku-blue-1: 202, 222, 250;   /* #cadefa · L 89.5% C 0.044 H 256.8 */
+    --ku-blue-2: 173, 203, 246;   /* #adcbf6 · L 83.5% C 0.069 H 257.4 */
+    --ku-blue-3: 143, 184, 243;   /* #8fb8f3 · L 77.5% C 0.096 H 257.4 */
+    --ku-blue-4: 109, 163, 240;   /* #6da3f0 · L 71.0% C 0.127 H 257.3 */
+    --ku-blue-5: 76, 144, 240;    /* #4c90f0 · L 65.5% C 0.159 H 257.4  ← 锚点 */
+    --ku-blue-6: 58, 124, 216;    /* #3a7cd8 · L 59.0% C 0.156 H 257.4 */
+    --ku-blue-7: 45, 106, 191;    /* #2d6abf · L 53.0% C 0.147 H 257.5 */
+    --ku-blue-8: 38, 91, 164;     /* #265ba4 · L 47.5% C 0.130 H 257.3 */
+    --ku-blue-9: 33, 76, 137;     /* #214c89 · L 42.0% C 0.112 H 257.7 */
+
+    /* ---- green: 第 5 档 = 品牌锚点 #22c55e ---- */
+    --ku-green-0: 235, 255, 238;  /* #ebffee · L 98.1% C 0.031 H 149.8 */
+    --ku-green-1: 207, 242, 213;  /* #cff2d5 · L 92.8% C 0.053 H 150.2 */
+    --ku-green-2: 176, 230, 186;  /* #b0e6ba · L 87.6% C 0.082 H 150.0 */
+    --ku-green-3: 142, 219, 157;  /* #8edb9d · L 82.5% C 0.116 H 149.5 */
+    --ku-green-4: 98, 207, 125;   /* #62cf7d · L 77.0% C 0.154 H 149.6 */
+    --ku-green-5: 34, 197, 94;    /* #22c55e · L 72.3% C 0.192 H 149.6  ← 锚点 */
+    --ku-green-6: 0, 175, 78;     /* #00af4e · L 65.9% C 0.184 H 149.5 */
+    --ku-green-7: 0, 153, 68;     /* #009944 · L 59.7% C 0.166 H 149.7 */
+    --ku-green-8: 0, 134, 58;     /* #00863a · L 54.2% C 0.151 H 149.5 */
+    --ku-green-9: 3, 116, 50;     /* #037432 · L 48.9% C 0.135 H 149.6 */
+
+    /* ---- cyan: 第 5 档 = 品牌锚点 #22d3ee ---- */
+    --ku-cyan-0: 236, 252, 255;   /* #ecfcff · L 98.0% C 0.017 H 210.2 */
+    --ku-cyan-1: 209, 244, 251;   /* #d1f4fb · L 94.4% C 0.037 H 211.1 */
+    --ku-cyan-2: 181, 235, 246;   /* #b5ebf6 · L 90.7% C 0.057 H 211.5 */
+    --ku-cyan-3: 148, 227, 243;   /* #94e3f3 · L 87.0% C 0.080 H 211.8 */
+    --ku-cyan-4: 104, 218, 239;   /* #68daef · L 83.0% C 0.107 H 211.3 */
+    --ku-cyan-5: 34, 211, 238;    /* #22d3ee · L 79.7% C 0.134 H 211.5  ← 锚点 */
+    --ku-cyan-6: 0, 189, 214;     /* #00bdd6 · L 73.2% C 0.127 H 211.4 */
+    --ku-cyan-7: 0, 168, 191;     /* #00a8bf · L 67.1% C 0.117 H 211.8 */
+    --ku-cyan-8: 0, 150, 170;     /* #0096aa · L 61.7% C 0.107 H 211.2 */
+    --ku-cyan-9: 20, 131, 149;    /* #148395 · L 56.2% C 0.094 H 212.2 */
+
+    /* ---- teal: 第 5 档 = 品牌锚点 #14b8a6 ---- */
+    --ku-teal-0: 235, 253, 249;   /* #ebfdf9 · L 98.0% C 0.020 H 181.1 */
+    --ku-teal-1: 206, 238, 232;   /* #ceeee8 · L 92.4% C 0.034 H 183.0 */
+    --ku-teal-2: 174, 224, 215;   /* #aee0d7 · L 86.9% C 0.053 H 182.8 */
+    --ku-teal-3: 139, 210, 198;   /* #8bd2c6 · L 81.3% C 0.073 H 182.6 */
+    --ku-teal-4: 94, 196, 181;    /* #5ec4b5 · L 75.5% C 0.098 H 182.7 */
+    --ku-teal-5: 20, 184, 166;    /* #14b8a6 · L 70.4% C 0.123 H 182.5  ← 锚点 */
+    --ku-teal-6: 0, 162, 146;     /* #00a292 · L 63.9% C 0.114 H 182.7 */
+    --ku-teal-7: 0, 141, 127;     /* #008d7f · L 57.8% C 0.103 H 182.8 */
+    --ku-teal-8: 0, 123, 111;     /* #007b6f · L 52.3% C 0.093 H 183.1 */
+    --ku-teal-9: 0, 105, 94;      /* #00695e · L 46.7% C 0.083 H 182.5 */
+
+    /* ---- amber: 第 5 档 = 品牌锚点 #f59e0b ---- */
+    --ku-amber-0: 255, 247, 238;  /* #fff7ee · L 98.0% C 0.015 H 70.9 */
+    --ku-amber-1: 255, 230, 202;  /* #ffe6ca · L 93.8% C 0.046 H 70.4 */
+    --ku-amber-2: 251, 213, 170;  /* #fbd5aa · L 89.5% C 0.070 H 70.2 */
+    --ku-amber-3: 249, 196, 134;  /* #f9c486 · L 85.4% C 0.099 H 70.2 */
+    --ku-amber-4: 246, 176, 89;   /* #f6b059 · L 80.7% C 0.132 H 69.9 */
+    --ku-amber-5: 245, 158, 11;   /* #f59e0b · L 76.9% C 0.165 H 70.1  ← 锚点 */
+    --ku-amber-6: 219, 140, 0;    /* #db8c00 · L 70.5% C 0.153 H 70.0 */
+    --ku-amber-7: 194, 123, 0;    /* #c27b00 · L 64.3% C 0.139 H 69.7 */
+    --ku-amber-8: 172, 109, 0;    /* #ac6d00 · L 58.9% C 0.127 H 70.1 */
+    --ku-amber-9: 150, 95, 1;     /* #965f01 · L 53.3% C 0.115 H 70.5 */
+
+    /* ---- orange: 第 5 档 = 品牌锚点 #f97316 ---- */
+    --ku-orange-0: 255, 246, 242; /* #fff6f2 · L 97.9% C 0.011 H 45.7 */
+    --ku-orange-1: 255, 223, 207; /* #ffdfcf · L 92.6% C 0.042 H 48.2 */
+    --ku-orange-2: 255, 198, 169; /* #ffc6a9 · L 87.0% C 0.076 H 48.2 */
+    --ku-orange-3: 254, 172, 130; /* #feac82 · L 81.5% C 0.112 H 47.8 */
+    --ku-orange-4: 251, 143, 85;  /* #fb8f55 · L 75.5% C 0.150 H 47.5 */
+    --ku-orange-5: 249, 115, 22;  /* #f97316 · L 70.5% C 0.187 H 47.6  ← 锚点 */
+    --ku-orange-6: 221, 98, 0;    /* #dd6200 · L 63.9% C 0.175 H 47.6 */
+    --ku-orange-7: 194, 85, 0;    /* #c25500 · L 57.9% C 0.159 H 47.5 */
+    --ku-orange-8: 170, 74, 0;    /* #aa4a00 · L 52.6% C 0.144 H 47.8 */
+    --ku-orange-9: 146, 62, 0;    /* #923e00 · L 46.9% C 0.129 H 47.4 */
+
+    /* ---- red: 第 5 档 = 品牌锚点 #ef4444 ---- */
+    --ku-red-0: 255, 227, 223;    /* #ffe3df · L 93.8% C 0.031 H 27.4 */
+    --ku-red-1: 251, 200, 195;    /* #fbc8c3 · L 87.6% C 0.059 H 24.8 */
+    --ku-red-2: 248, 173, 166;    /* #f8ada6 · L 81.7% C 0.089 H 25.1 */
+    --ku-red-3: 245, 143, 135;    /* #f58f87 · L 75.6% C 0.125 H 25.2 */
+    --ku-red-4: 241, 108, 101;    /* #f16c65 · L 69.2% C 0.166 H 25.3 */
+    --ku-red-5: 239, 68, 68;      /* #ef4444 · L 63.7% C 0.208 H 25.3  ← 锚点 */
+    --ku-red-6: 214, 45, 50;      /* #d62d32 · L 57.2% C 0.204 H 25.3 */
+    --ku-red-7: 188, 29, 38;      /* #bc1d26 · L 51.3% C 0.192 H 25.2 */
+    --ku-red-8: 161, 24, 31;      /* #a1181f · L 45.7% C 0.170 H 25.4 */
+    --ku-red-9: 133, 22, 26;      /* #85161a · L 40.1% C 0.145 H 25.4 */
+
+    /* ---- pink: 第 5 档 = 品牌锚点 #ec4899 ---- */
+    --ku-pink-0: 255, 234, 241;   /* #ffeaf1 · L 95.6% C 0.025 H 355.3 */
+    --ku-pink-1: 254, 205, 223;   /* #fecddf · L 89.6% C 0.060 H 354.4 */
+    --ku-pink-2: 249, 177, 205;   /* #f9b1cd · L 83.6% C 0.091 H 354.2 */
+    --ku-pink-3: 245, 147, 187;   /* #f593bb · L 77.6% C 0.126 H 354.5 */
+    --ku-pink-4: 240, 111, 168;   /* #f06fa8 · L 71.1% C 0.169 H 354.6 */
+    --ku-pink-5: 236, 72, 153;    /* #ec4899 · L 65.6% C 0.212 H 354.3  ← 锚点 */
+    --ku-pink-6: 211, 50, 133;    /* #d33285 · L 59.0% C 0.208 H 354.3 */
+    --ku-pink-7: 186, 36, 115;    /* #ba2473 · L 53.2% C 0.195 H 354.4 */
+    --ku-pink-8: 160, 30, 99;     /* #a01e63 · L 47.6% C 0.174 H 354.1 */
+    --ku-pink-9: 133, 28, 82;     /* #851c52 · L 42.0% C 0.148 H 354.3 */
+
+    /* ---- violet: 第 5 档 = 品牌锚点 #a78bfa ---- */
+    --ku-violet-0: 248, 247, 255; /* #f8f7ff · L 97.9% C 0.011 H 292.0 */
+    --ku-violet-1: 231, 226, 255; /* #e7e2ff · L 92.6% C 0.039 H 293.5 */
+    --ku-violet-2: 214, 205, 254; /* #d6cdfe · L 87.1% C 0.068 H 293.4 */
+    --ku-violet-3: 198, 184, 252; /* #c6b8fc · L 81.8% C 0.096 H 293.6 */
+    --ku-violet-4: 181, 160, 250; /* #b5a0fa · L 75.8% C 0.128 H 293.8 */
+    --ku-violet-5: 167, 139, 250; /* #a78bfa · L 70.9% C 0.159 H 293.5  ← 锚点 */
+    --ku-violet-6: 147, 119, 226; /* #9377e2 · L 64.3% C 0.157 H 293.6 */
+    --ku-violet-7: 129, 103, 201; /* #8167c9 · L 58.4% C 0.147 H 293.6 */
+    --ku-violet-8: 112, 90, 175;  /* #705aaf · L 52.9% C 0.130 H 293.4 */
+    --ku-violet-9: 96, 78, 148;   /* #604e94 · L 47.5% C 0.111 H 293.6 */
+
+    /* ---- 内容色板(分类色板): 每个色相一个档 ----
+       各色相**等明度**是这条规则的全部目的: 分类色板里明度不齐, 就会有某一条数据序列
+       在图上视觉压过其他序列(改造前 VChart 的琥珀 L .769 与它的蓝 L .623 相差 .146,
+       图表看起来就是不平衡的)。
+
+       规则: 取该主题下 L 最接近 0.71 的那一档。**两个主题各选一次** —— 阶梯方向是翻转的,
+       同一个档位号在两个主题里明度不同(第 4 档暗色下比锚点暗、亮色下比锚点亮), 所以
+       「一张选档表两个主题通用」是错的: 实测那会把暗色下的跨度从 .177 顶到 .353。
+       本主题(亮色)的落点跨度见生成时的自检输出。
+
+       尾注释里的 `= --ku-<hue>-<n>` 就是它的出处; 值写成字面三元组而不是 var() 引用,
+       是为了让人在这里直接读到颜色本身, 也为免给裸三元组守卫开例外。 ---- */
+    --ku-content-blue: 109, 163, 240;   /* = --ku-blue-4 · #6da3f0 · L 71.0% */
+    --ku-content-cyan: 0, 189, 214;     /* = --ku-cyan-6 · #00bdd6 · L 73.2% */
+    --ku-content-teal: 20, 184, 166;    /* = --ku-teal-5 · #14b8a6 · L 70.4% */
+    --ku-content-green: 34, 197, 94;    /* = --ku-green-5 · #22c55e · L 72.3% */
+    --ku-content-amber: 219, 140, 0;    /* = --ku-amber-6 · #db8c00 · L 70.5% */
+    --ku-content-orange: 249, 115, 22;  /* = --ku-orange-5 · #f97316 · L 70.5% */
+    --ku-content-red: 241, 108, 101;    /* = --ku-red-4 · #f16c65 · L 69.2% */
+    --ku-content-pink: 240, 111, 168;   /* = --ku-pink-4 · #f06fa8 · L 71.1% */
+    --ku-content-violet: 167, 139, 250; /* = --ku-violet-5 · #a78bfa · L 70.9% */
+    --ku-content-grey: 153, 160, 169;   /* = --ku-grey-6 · #99a0a9 · L 70.3% */
 
-.ku-float-button {
-    box-shadow: var(--ku-shadow-elevated);
-    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
-.ku-float-button:hover {
-    transform: scale(1.08);
-    box-shadow: 0 0 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15);
-}
-.ku-float-button:active {
-    transform: scale(0.95);
-}
-
-/* ===== Input 输入框 ===== */
 
-.ku-input:hover {
-    border-color: var(--ku-color-primary-hover);
+/* ===== Knight UI 设计 Token =====
+   三层结构: 色板(palette.css, 裸 `R,G,B` 三元组, 无 alpha) → 语义(本文件的 :root) → 组件(.ku-* 类规则)。
+   亮色覆盖在 :root[data-ku-theme="light"]。两个文件在构建期拼成 dist/tokens/tokens.css,
+   自定义属性替换是惰性的, 谁先加载都不影响结果。
+
+   注释只记两件事: **这个值为什么是这个值**, 以及**已知缺口**。调参沿革与试错过程不进注释。 */
+
+:root
+{
+   /* ---- 1. 主色 ---- */
+   /* 绑 blue 色阶。第 5 档在两个主题里都逐位等于品牌色 #4c90f0, 故 base 零位移。
+      hover 取第 6 档 —— 一行同时服务两个主题(暗色下更亮、亮色下更暗)。
+      active 取第 4 档(按下 = 朝底色压回), 亮色必须覆盖成第 7 档, 见亮色块第 1 节。 */
+   --ku-color-primary: rgb(var(--ku-blue-5));
+   --ku-color-primary-hover: rgb(var(--ku-blue-6));
+   --ku-color-primary-active: rgb(var(--ku-blue-4));
+   /* 三个浅底: 原为三条 rgba(76,144,240,α) 字面量, 收成一个阶梯档 + 三个 alpha, 三元组逐位不变。 */
+   --ku-color-primary-light-default: rgba(var(--ku-blue-5), 0.08);
+   --ku-color-primary-light-hover: rgba(var(--ku-blue-5), 0.15);
+   --ku-color-primary-light-active: rgba(var(--ku-blue-5), 0.2);
+
+   /* ---- 2. 语义色 ---- */
+   /* 与主色同构: base / hover / active 直接取阶梯。组件不要再用 filter: brightness() 冒充 hover —— 那会把文字
+      一起提亮, 且亮色下方向相反。四个家族全部上阶梯, 无一例外。
+
+      warning 是唯一有代价的收口: 旧值 amber-400 的色相相对锚点偏 −14.5°, 而阶梯的定义性质是色相恒定, 够不到
+      它。这里**就近取档**而不是留字面量 —— 代价是 hover/active 色相偏 14.5°/11.5°, 收益是语义色再无非阶梯值。
+      这是一次**视觉决策**, 要退回去就把 warning 那两行换回字面量。 */
+   --ku-color-success: rgb(var(--ku-green-5));
+   --ku-color-success-hover: rgb(var(--ku-green-6));
+   --ku-color-success-active: rgb(var(--ku-green-4));
+   --ku-color-warning: rgb(var(--ku-amber-5));
+   --ku-color-warning-hover: rgb(var(--ku-amber-6));
+   --ku-color-warning-active: rgb(var(--ku-amber-4));
+   --ku-color-danger: rgb(var(--ku-red-5));
+   --ku-color-danger-hover: rgb(var(--ku-red-6));
+   --ku-color-danger-active: rgb(var(--ku-red-4));
+
+   /* ---- 3. 校验态 ---- */
+   /* border: 同色 60%, 不用满饱和 base —— 一条 1px 纯 #ef4444 叠在低饱和的冷灰面板上明暗落差过大, 校验态会
+      "跳出来"; 校验要"看得见", 不是"抢眼"。
+      light: **只服务聚焦环**。它原先还兼一份"校验浅底"(整个字段被 14% 同色铺满), 那是本库唯一一处铺面积的
+      着色, 也是"校验态看着厚重"的主因。现在校验态只由上面那条 1px 描边承担(同 Ant Design 5 / Semi: 字段底回
+      --ku-color-fill-0, 状态只改描边)。 */
+   --ku-color-success-border: rgba(var(--ku-green-5), 0.6);
+   --ku-color-warning-border: rgba(var(--ku-amber-5), 0.6);
+   --ku-color-danger-border: rgba(var(--ku-red-5), 0.6);
+   --ku-color-success-light: rgba(var(--ku-green-5), 0.14);
+   --ku-color-warning-light: rgba(var(--ku-amber-5), 0.14);
+   --ku-color-danger-light: rgba(var(--ku-red-5), 0.14);
+
+   /* ---- 4. 文字 ---- */
+   /* 实色(原为 rgba(var(--ku-grey-9), α) 半透白派生 —— 半透白叠在毛玻璃上会发灰, 也拿不到 kg 的冷调)。取灰阶
+      第 9/8/7/6 档, 亮度与旧值逐档对齐, 故换色不改变原有对比层级。
+      因为灰阶随主题翻转, "第 0 档最贴底色、第 9 档最像墨色"这条规则本身就同时给出了两个主题的正确文字色 ——
+      8 个值在两个主题下逐位不变, **亮色块里不需要再覆盖一份**。 */
+   --ku-color-text-0: rgb(var(--ku-grey-9));
+   --ku-color-text-1: rgb(var(--ku-grey-8));
+   --ku-color-text-2: rgb(var(--ku-grey-7));
+   --ku-color-text-3: rgb(var(--ku-grey-6));
+
+   /* ---- 5. 背景 ---- */
+   /* 去紫的冷灰蓝阶: 旧阶带紫相(~250°), 与 kg 的蓝系控件同屏会互串发脏; 亮度逐档对齐旧值, 色相移到 kg 的
+      ~215°。第 4 档同时装 --ku-color-border 与 fill-2, 两者同值。
+
+      **bg-1 与 bg-2 同为第 1 档 —— 唯一一处刻意的合并。** 暗色中性色原有 11 个互不相同的值而阶梯只有 10 档,
+      必有合并; 选这一对是因为它不丢任何交互态差异, 而另两个候选会分别抹掉滚动条 thumb:hover 与 Button
+      secondary 的 hover→active 区分。另一处同档(bg-4 与 fill-2)的解法是**删掉 bg-4**: 它只有 Button secondary
+      一个消费方, 而那个按钮要的是"连续三档填充", 已改从 fill-1 起跳。 */
+   --ku-color-bg-0: rgb(var(--ku-grey-0));
+   --ku-color-bg-1: rgb(var(--ku-grey-1));
+   --ku-color-bg-2: rgb(var(--ku-grey-1));
+   --ku-color-bg-3: rgb(var(--ku-grey-2));
+
+   /* 默认底纹: 毛玻璃需要有"可糊之物", 纯色底上玻璃只会读成一块纯色面板(见第 8 节)。
+      停靠点只留**确属阶梯档**的那些 —— 旧值里有非阶梯档, 各归最近档会让渐变出现平台, 而铺满视口的底纹上
+      平台边界是看得见的 banding; 只留阶梯档后渐变仍平滑(逐点对照旧值最大差 3/255)。 */
+   --ku-bg-image: radial-gradient(120% 120% at 0% 0%,
+         rgb(var(--ku-grey-2)) 0%, rgb(var(--ku-grey-1)) 52%, rgb(var(--ku-grey-0)) 100%);
+
+   /* ---- 6. 填充(交互面/滚动条, 叠在 bg 阶之上) ---- */
+   /* 四个 fill-* **保持不透明**(刻意偏离 Semi —— Semi 的 fill-* 是 alpha 的)。照搬会让 Input 的字段底变成
+      半透, 违反本库已定的「单字段控件不透明、面板才是玻璃」; 而且不透明的内层表面会让身后的 backdrop-filter
+      失效。半透明那一族是下面三条, 用途不同。 */
+   --ku-color-fill-0: rgb(var(--ku-grey-1));
+   --ku-color-fill-1: rgb(var(--ku-grey-3));
+   --ku-color-fill-2: rgb(var(--ku-grey-4));
+   --ku-color-fill-3: rgb(var(--ku-grey-5));
+   /* 半透明中性填充: 斑马纹/行悬停这类"叠在已有底上"的浅层着色。**必须半透明** —— 上面的 fill-* 是不透明的,
+      铺在毛玻璃面上会糊出一片死色, 玻璃白做。
+      三元组用 rgb(var(--ku-grey-9)) 一行顶两个主题: 暗色下它是近白 #f6f7f9(白膜)、亮色下是近黑 #1c1f23
+      (黑膜), 两行做的是同一件事(跟主题翻转的中性膜)。3% 的膜上这点差异复合后约 1–2/255。 */
+   --ku-color-fill-translucent: rgba(var(--ku-grey-9), 0.03);
+   --ku-color-fill-translucent-hover: rgba(var(--ku-grey-9), 0.06);
+   /* -strong: 第二档半透中性填充, 给"必须读得出来"的**静态**带子用(代码三件套的工具条)。.03 那一档的定位是
+      "叠在已有底上的极浅着色", 暗色下够用, 亮色下却只有约 2/255 —— 工具条整条消失, 看着像页面从代码块上方漏
+      了出来。加厚到 .06 后亮色 Δ 约 13/255, 与表格的**行悬停**带子同一重量, 比斑马纹(.03)厚一档。
+      值恰好等于 -hover, 但**角色不同**故独立命名: 将来谁调 hover 的深浅, 都不该顺手把工具条一起挪走。 */
+   --ku-color-fill-translucent-strong: rgba(var(--ku-grey-9), 0.06);
+
+   /* ---- 7. 边框 ---- */
+   /* 实色(原为 rgba(255,255,255,0.08) 半透白, 叠在毛玻璃面上过弱, 撑不起 kg 的描边派风格)。
+      第 4 档逐位不变(#2f343c) —— 这是全库最常用的 token(171 处引用), 必须钉住。 */
+   --ku-color-border: rgb(var(--ku-grey-4));
+
+   /* ---- 8. 毛玻璃面 ---- */
+   /* 半透明膜 + 模糊, 由文件末的 .ku-glass-* 基类消费。
+      **玻璃必须"身后有可糊之物"才看得出通透** —— 底纹若是纯色, 玻璃等价于换了个纯色面板, 却照样付一次
+      backdrop-filter 的合成开销。
+
+      五档一览(膜 α 为暗色, 亮色的膜见亮色块第 8 节):
+         档       类                   膜(暗)                模糊
+         容器     .ku-glass           rgba(grey-2, .22)     --ku-blur-lg    14px / 175%
+         弱档     .ku-glass-subtle    rgba(grey-2, .22)     --ku-blur-base  10px / 165%
+         头部     .ku-glass-head      rgba(grey-4, .30)     --ku-blur-lg    14px / 175%
+         浮层     .ku-glass-overlay   rgba(grey-3, .34)     --ku-blur-xl    18px / 185%
+         气泡     .ku-glass-tip       rgba(grey-3, .22)     --ku-blur-tip    7px / 250%
+         菜单     .ku-glass-menu      rgba(grey-2, .70)     --ku-blur-menu  22px / 195%
+      另有两档不属玻璃家族: .ku-mask(遮罩, 见第 9 节)与 .ku-userguide-card(不透明面)。
+
+      **三元组只是那层膜的色相**, 它最终只以 α 的比例参与合成 —— 所以旧值(均非阶梯档)就近归到灰阶第 2/3/4 档
+      即可, 逐通道最大差 5, 合成后实测 1–2/255。观感由 **α + 模糊半径** 承担。 */
+   --ku-color-glass: rgba(var(--ku-grey-2), 0.22);
+   --ku-color-glass-strong: rgba(var(--ku-grey-3), 0.34);
+   --ku-color-glass-head: rgba(var(--ku-grey-4), 0.30);
+   /* 气泡档: 三元组与 strong 同为第 3 档, 靠 alpha 再透一档 —— 这正是这一档的意图("比 strong 再透一档")。 */
+   --ku-color-glass-tip: rgba(var(--ku-grey-3), 0.22);
+   /* 菜单档: 0.70 是这一档的**承重值** —— 底色抬上去之后能透上来的只剩三成, 再靠半径把那三成糊成一片柔光。
+      合成后实测 3/255, 是五个玻璃档里位移最大的一处(α 最高, 所以 α×Δ 最大)。 */
+   --ku-color-glass-menu: rgba(var(--ku-grey-2), 0.70);
+
+   /* 底色与模糊是一对跷跷板, 但**方向本轮翻了**, 写清楚免得下次照旧规则反着调:
+      旧目标是"看得见背后有东西、但认不出是什么" —— 底越薄、半径越要顶上去; **现目标是"背景的图和颜色要透得
+      过来"**, 而这个目标下**大半径本身就是障碍** —— 40px 会把一张图糊成一团色块, 只剩平均色。故本轮半径整体
+      砍到约一半, 底不动, 两个旋钮同向、不再对冲。
+      **saturate 往上抬是另一半解法**: 膜再薄也还是盖了一层, 白膜与深膜都会洗掉背后的彩度, 不补 saturate 透上来
+      的图会读成灰蒙蒙一片。
+      半径是**两个主题共用**的量(不是亮色覆盖), 改它会同时动暗色的玻璃。
+      原第一档 --ku-blur-sm(16px / 130%)全仓零引用, 已剪。 */
+   --ku-blur-base: blur(10px) saturate(165%);
+   --ku-blur-lg: blur(14px) saturate(175%);
+   --ku-blur-xl: blur(18px) saturate(185%);
+   /* 气泡档单独成档的原因是小**面积**: 同样的半径铺在 300px 宽的面板上和铺在 100px 宽的气泡上, 后者看起来"糊"
+      得多 —— 所以这一档要的不是更大的半径, 是**更小的**。这四个数是实测标定值(排查台 test/glass-lab.html):
+      半径 16 → **7px**, saturate 195 → **250%**, 亮色的膜 .28 → .38, 颗粒回到 .10。
+      **半径与 saturate 是反向的一对, 必须成对调**: 16px 已经把 148px 宽的小图糊成一块平均色, 砍掉一半以上背后
+      那点结构才留得住; 而留下来的结构需要 saturate 顶上去(白膜会洗掉彩度), 才不读成灰蒙蒙一片。只砍半径不抬
+      saturate 得到一块灰玻璃, 只抬 saturate 不砍半径得到一团糊的彩色。 */
+   --ku-blur-tip: blur(7px) saturate(250%);
+   /* 菜单档的半径是五档里最大的 —— 这一档底最厚, 同样的半径在厚底上"糊"的贡献本来就最小; 砍它是为了换"背后那
+      三成能看到颜色", 而菜单项自身的可读性由 0.70 的底承担, 不靠半径。
+      **底一旦加厚, 透上来的三成里那点模糊就已经看不见了, 磨砂感就只剩颗粒在撑。** 所以这一档不能只抬底色:
+      底色负责"读得清", 颗粒负责"看着是磨砂", 缺一个都会得到"一块平板"或"一层糊字"。 */
+   --ku-blur-menu: blur(22px) saturate(195%);
+
+   /* 菜单的"奶膜"(只作用于 .ku-glass-menu 的第二层 background-image):
+      暗色下它是**承重**的 —— 底 .70 的面板本身就是一块深色, 只铺颗粒读起来是"深色板子上撒了噪点"; 先垫一层
+      几乎均匀的白把面板抬回浅冷灰调, 颗粒才有东西可依附。
+      **亮色下这一层置空(none), 因为它在那里是个恒等变换** —— 亮色的底本来就是纯白膜, 再叠一层白等于白叠白,
+      合成结果一个通道都不变。这正是把它抽成 token 的理由: 一个只对某个主题有效的层, 写在类规则里就是一句看不
+      出问题的死代码, 写成 token 才看得见它在另一个主题下是空的。 */
+   --ku-glass-menu-film: linear-gradient(180deg, rgba(var(--ku-white), 0.05) 0%, rgba(var(--ku-white), 0.015) 100%);
+
+   /* 磨砂颗粒:
+      背景若是平滑渐变(比如默认底纹 --ku-bg-image), 模糊它得到的还是同一片平滑渐变 —— **模糊本身不产生肌理**。
+      这对本库尤其致命: 默认底纹正是一条平滑径向渐变, 于是任何一档玻璃在默认底纹上, backdrop-filter 的模糊几乎
+      是个视觉上的空操作 —— 透上来的只是同一片渐变稍微暗一点; 用户看到的"透明"其实是渐变在漏, 而不是"磨砂"。
+      **结论: 颗粒不是锦上添花的肌理, 它是这套玻璃在默认底纹上唯一的磨砂来源。** 强度必须给到看得见: 0.06 落在
+      可见阈值以下, 玻璃读成"换了个纯色面板"; 0.10 刚好能看出磨砂、又还没到"电视雪花"。
+      单色(saturate=0)故亮/暗共用一份; stitchTiles 让 140px 的贴图无缝平铺; **只贴浮层和小面, 不贴侧栏那种大
+      面积容器** —— 大面积铺噪点会显脏。
+      ⚠️ **颗粒在两个主题下是同向的, 不需要分档。** 曾按"它跟主题反向"的假设做过一个亮色专用的减半档
+      (--ku-glass-grain-tip), 已删除 —— 那个假设把"亮色气泡不透"归因到颗粒上, 实测推翻了它(真正起作用的是半径,
+      见 --ku-blur-tip)。记在这里, 免得下次又照那个假设去分档。
+      嫌"磨砂感太重"时旋钮在这里(0.10 → 0.07), 而不是继续砍 --ku-blur-* 的半径: 半径只管"背后能不能看清", 砍到
+      0 也去不掉那层哑光。
+
+      `<` `>` `#` 一律转义: `#` 不转义会被当成 URL 片段截断; `<` `>` 是防 CSS 压缩器把 url() 的引号省掉(省掉之后
+      裸 `<` 让解析直接失败, 玻璃静默少掉一层肌理, 很难发现)。 */
+   --ku-glass-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23g)'%20opacity='0.10'/%3E%3C/svg%3E");
+
+   /* ---- 9. 遮罩层 ---- */
+   /* 遮罩也做成毛玻璃: 原是一层 rgba(0,0,0,0.45) 的纯黑, 页面被"关灯"式压掉; 改成薄一点的冷色遮罩 + 模糊后
+      背景还在(看得出是一大片内容), 只是失焦退到后面, 浮层因此显得"浮在页面上"而不是"页面被换掉了"。
+      α 取 0.34 不再低: 遮罩要承担"挡住点击 + 明确模态", 太薄看不出当前是模态态。模糊只要 10px —— 遮罩铺满
+      视口, 全屏 backdrop-filter 是这里最贵的一次合成, 加半径收益小、开销线性增长。
+      三元组取**该主题里最暗的那一档**: 暗色第 0 档、亮色第 9 档(见亮色块)—— 这条规则同时给出两个主题的正确
+      方向, 遮罩永远要压暗。 */
+   --ku-color-mask: rgba(var(--ku-grey-0), 0.34);
+   --ku-blur-mask: blur(10px) saturate(120%);
+
+   /* ---- 10. 阴影 ---- */
+   /* 旧 elevated 过浅(0 4px 14px α.1), 提到 kg 量级: 纯黑无彩色偏移、大半径无 spread。
+      shadow-sm / -lg 是补上的缺口 —— lg 此前被 11 个文件引用却从未定义, 全靠内联 fallback 字面量生效, 导致
+      弹层阴影无法由主题统一控制。 */
+   --ku-shadow-sm: 0 2px 8px rgba(var(--ku-black), 0.24);
+   --ku-shadow-elevated: 0 4px 16px rgba(var(--ku-black), 0.35);
+   --ku-shadow-lg: 0 8px 32px rgba(var(--ku-black), 0.45);
+
+   /* ---- 11. 链接 ---- */
+   /* link 逐位等于 primary(同一个蓝), 直接绑同一档。原 -hover / -active 两档全仓零引用且取值与 primary 家族
+      相同, 已剪 —— 要链接 hover 直接用 primary 家族, 不丢能力。 */
+   --ku-color-link: rgb(var(--ku-blue-5));
+
+   /* ---- 12. 禁用 ---- */
+   --ku-color-disabled-text: rgba(var(--ku-grey-9), 0.35);
+   --ku-color-disabled-border: transparent;
+   --ku-color-disabled-bg: rgba(var(--ku-grey-9), 0.04);
+   --ku-color-disabled-fill: rgba(var(--ku-grey-9), 0.04);
+
+   /* ---- 13. 字号 ---- */
+   --ku-font-size-xs: 10px;
+   --ku-font-size-sm: 11px;
+   --ku-font-size-base: 12px;
+   --ku-font-size-md: 13px;
+   --ku-font-size-lg: 14px;
+   --ku-font-size-xl: 16px;
+   --ku-font-size-2xl: 18px;
+   --ku-font-size-3xl: 20px;
+
+   /* ---- 14. 圆角 ---- */
+   /* base 是"控件档"(输入框/按钮/小控件), kg 同为 4px, 保持不动。容器档(卡片/表格/导航项)在 kg 是 6px, 由组件
+      各自指向 --ku-radius-md 实现 —— **不在这里抬高 base**, 否则会把输入框一并顶到 6px。 */
+   --ku-radius-xs: 2px;
+   --ku-radius-sm: 3px;
+   --ku-radius-base: 4px;
+   --ku-radius-md: 6px;
+   --ku-radius-lg: 8px;
+   --ku-radius-xl: 10px;
+
+   /* ---- 15. 间距 ---- */
+   --ku-spacing-xs: 2px;
+   --ku-spacing-sm: 4px;
+   --ku-spacing-base: 8px;
+   --ku-spacing-md: 12px;
+   --ku-spacing-lg: 16px;
+   --ku-spacing-xl: 20px;
+
+   /* ---- 16. z-index ---- */
+   --ku-z-mask: 1000;
+   --ku-z-overlay: 1010;
+   --ku-z-modal: 1020;
+   --ku-z-toast: 1030;
+
+   /* ---- 17. 过渡 ---- */
+   /* 原 -base(200ms) / -slow(300ms) 两档全仓零引用, 已剪 —— 只需一个"快档"给交互反馈, 真要 200ms 的消费者
+      直接写 200ms。 */
+   --ku-transition-fast: 100ms ease;
+
+   /* ---- 18. 字体 ---- */
+   --ku-font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
 }
-.ku-input:focus-within {
-    border-color: var(--ku-color-primary);
-    box-shadow: 0 0 0 2px var(--ku-color-primary-light-default);
-}
-
-/* ===== InputNumber 数字输入 ===== */
 
-.ku-input-number button:hover:not(:disabled) {
-    background-color: var(--ku-color-fill-1);
-}
-.ku-input-number button:active:not(:disabled) {
-    background-color: var(--ku-color-fill-2);
+/* ===== 亮色主题覆盖 =====
+   只保留两类东西:
+     1) 档位号与暗色**不同**的族 —— 因为"第 0 档 = 该主题最贴底色"在两个主题里指向相反的明度;
+     2) 亮色独有的复合值(底纹、玻璃膜、遮罩、阴影、描边 alpha)。
+   凡是"同一个档位号在两个主题里方向都对"的(全部 hover、全部文字色、全部 fill-translucent), 一律不在这里
+   重复 —— 它们由 :root 供给。
+   色板层的裸三元组(--ku-grey-* / --ku-white / --ku-black)归 palette.css, 这里不再声明。 */
+:root[data-ku-theme="light"]
+{
+   /* ---- 1. 主色 / 语义色: 只有 active 需要按主题各写一行 ---- */
+   /* hover 不需要, 因为第 6 档在两个主题里方向都对。但 active 不行: 按下的语义是"朝底色压回", 暗色要第 4 档、
+      亮色要第 7 档, 同一个档位号满足不了两边。
+      必须与 :root 的重绑同批落地, 否则会引入一处**新的**回归: 亮色此前没有 active 覆盖, 继承的是暗色字面量
+      #3a7edb, 恰好比 base 暗(歪打正着); 一旦 :root 改绑第 4 档, 亮色继承到的 blue-4 反而比 base **亮**, 方向
+      就反了。 */
+   --ku-color-primary-active: rgb(var(--ku-blue-7));
+   --ku-color-success-active: rgb(var(--ku-green-7));
+   --ku-color-warning-active: rgb(var(--ku-amber-7));
+   --ku-color-danger-active: rgb(var(--ku-red-7));
+
+   /* ---- 5/6/7. 表面(背景 · 填充 · 边框) ---- */
+   /* 亮色灰阶的浅端(第 0–5 档)重排过 —— 见 palette.css 里 GREY_LIGHT 上方的注释: 原表把 6 个面档挤在 .123 的
+      跨度里(暗色同段 .206), 相邻差最小 .012、还有两对同档, 于是"整个界面都是白的"; 现在摊到 .163。
+      8 个表面值装进 6 档, 两处共享 —— (bg-3, fill-1) → 第 3 档, (bg-2, fill-0) → 第 0 档。
+      **fill-0 本轮从第 2 档移到第 0 档**: 原先与 bg-0 同档, 于是输入框底与页面底**逐位相同**(ΔL 0.000), 字段
+      完全隐形。亮色的字段底本就该是纯白(暗色那边 fill-0 也与面板同档, 两个主题一致: 字段靠描边而不是靠底色
+      立住)。 */
+   --ku-color-bg-0: rgb(var(--ku-grey-2));
+   --ku-color-bg-1: rgb(var(--ku-grey-1));
+   --ku-color-bg-2: rgb(var(--ku-grey-0));
+   --ku-color-bg-3: rgb(var(--ku-grey-3));
+   --ku-color-fill-0: rgb(var(--ku-grey-0));
+   --ku-color-fill-1: rgb(var(--ku-grey-3));
+   --ku-color-fill-2: rgb(var(--ku-grey-4));
+   --ku-color-fill-3: rgb(var(--ku-grey-5));
+   /* 亮色描边 0.08 → 0.14。这是"看不清边界"的另一半原因, 而且比灰阶更容易被忽略: **同一个 alpha 在两个主题里
+      不是同一件事** —— 合成后 ΔL 从 .052 提到 .089(ΔE 5.0 → 8.8), 而暗色的 border 是 ΔL .160, 0.08 只有暗色
+      重量的三分之一。取 0.14 的依据: 仍轻于暗色(亮色惯例), 也仍轻于 Ant 的 #d9d9d9 在白底上的 ΔE 11.5。 */
+   --ku-color-border: rgba(var(--ku-grey-9), 0.14);
+
+   /* 底纹的四个停靠点全是阶梯档(第 0/1/2/3 档), 直接换引用; 逐点最大差 5/255。 */
+   --ku-bg-image: radial-gradient(120% 120% at 0% 0%,
+         rgb(var(--ku-grey-0)) 0%, rgb(var(--ku-grey-1)) 30%, rgb(var(--ku-grey-2)) 60%, rgb(var(--ku-grey-3)) 100%);
+
+   /* ---- 8. 毛玻璃面 ---- */
+   /* 亮色玻璃一律是纯白膜, 只厚薄不同, 三元组直接取 --ku-white。白叠白不产生明度差, 只能靠 blur 撑通透, 所以
+      同一档在亮色下天然比暗色更"实"。
+      ── 五档 α: .20 / .38 / .50 / .62 / .76, 次序 glass < tip < strong < head < menu ──
+
+      **先说一件做不到的事, 免得来回试: 亮色的玻璃档位靠 α 分不出来。** 页面底 #ecedf0(L .946) 到纯白只有
+      ΔL .054, 五档塞进去相邻档实测 ΔE 只有 0.6~1.0(可见阈值 2)。要让相邻档可辨, Δα 至少 .20、五档要跨 .80,
+      而 α > .85 已是实心白板 —— 是窗口宽度不够, 不是取值没调好(暗色同样分不出来, 同因: 膜与底同色系)。
+      **所以 α 是"观感旋钮"而非"层次旋钮"**, 它只改这个面多实/多透; 层次由遮罩与阴影给, 两者都在位
+      (Modal / SideSheet 的膜叠在 .20 遮罩上; 无遮罩的弹层都带 --ku-shadow-lg / -sm)。想更透就往下降。
+
+      **唯一底线是可读性**: 浮层/气泡/菜单三档身后可能是任意内容, 最坏是近黑(代码块、图片暗部), 而亮色玻璃里
+      是深色 text-0, 只能靠膜把底垫亮。实测(文字 #1c1f23 压在 #1e1e1e 上, 合成值 = 30 + 225α, AA 正文下限 4.5):
+          .38 → 3.54:1 (tip)    .50 → 5.11:1 (strong)    .62 → 7.08:1 (head)    .76 → 9.99:1 (menu)
+      **tip 是唯一跌破的一个 —— 已知缺口, 明知故犯**。要收回就只把 tip 抬到 .46~.48, 其余四档不受影响。
+
+      ⚠️ **`glass` 降了 .10 却几乎看不出来, 别以为没生效**: 它身后是页面自己的近白底纹, 白膜叠上去挪不动几个数
+      (α .30 时差 6~9/255, α .20 时只剩 4~6/255)。这一档的边界靠 1px 描边与 --ku-shadow-sm —— **面板在亮色下
+      糊成一片时去补描边/阴影, 不要回来加 α**。其余四档身后是内容(卡片、代码块、图片), α 一动就是实打实的差别。
+      ⚠️ **"暗色更稳"只在自己的底上成立**: 身后是浅色内容(#e8e8e8)时暗色 tip 只有 1.73:1 —— 同一处**已知且
+      尚未处理的缺口**。
+      (上表只按 α 算, 未计颗粒; 颗粒均值在中灰, 压在近黑面板上约 +2/255, 在四舍五入以内。)
+      半径的沿革见 --ku-blur-base / --ku-blur-tip。 */
+   --ku-color-glass: rgba(var(--ku-white), 0.20);
+   --ku-color-glass-strong: rgba(var(--ku-white), 0.50);
+   --ku-color-glass-head: rgba(var(--ku-white), 0.62);
+   --ku-color-glass-menu: rgba(var(--ku-white), 0.76);
+   /* 气泡档: 仍比 strong 再透一档(暗色同此关系)。**.38 是实测标定值, 不是推导值**(排查台 test/glass-lab.html)
+      —— 它比曾经的 .28 厚一档, 因为真正让气泡"通透"的不是更薄的膜, 而是把半径砍到 7px、saturate 抬到 250%
+      (见 --ku-blur-tip): 背后真有东西透上来之后, 膜反而可以退回去一点, 换来压在近黑内容上不那么吃力。
+      五档次序仍然没乱(.20 < .38 < .50 < .62 < .76)。可读性 3.54:1, 仍低于 AA 4.5 —— 见上面那段。 */
+   --ku-color-glass-tip: rgba(var(--ku-white), 0.38);
+
+   /* 奶膜在亮色下**没有活可干**, 直接置空 —— 见 --ku-glass-menu-film 的说明。 */
+   --ku-glass-menu-film: none;
+
+   /* ---- 9. 遮罩 ---- */
+   /* 职责两个主题相同, 但**同一个 alpha 在两个主题里的感知重量差别很大**: 0.34 叠在 #0c0e12 上几乎不可见, 叠在
+      #ffffff 上会把页面压成一块明显的灰, 所以亮色取更轻的 0.20。三元组沿用暗色那条规则的第二半 —— "用该主题里
+      最暗的那一档": 暗色第 0 档、亮色第 9 档。没有覆盖时会继承暗色的 rgba(10,13,20,0.34), 白底上是一块压得很
+      重的灰 —— 这是修掉的一个真 bug。 */
+   --ku-color-mask: rgba(var(--ku-grey-9), 0.20);
+
+   /* ---- 10. 阴影 ---- */
+   /* 暗色那套重阴影(α .24/.35/.45)砸在白底上会把界面压出"发霉"的观感, 亮色要轻得多; 偏移量与模糊半径沿用,
+      只换 alpha。这三个值有证据而非口味 —— 本仓 Tabs / Navigation / Pagination 三处早就各自硬编码了
+      rgba(0,0,0,0.15) 当弹层阴影, 那就是这个代码库已经接受的亮色阴影重量; 取 .08/.10/.14 落在它附近, 并按层级
+      递增。 */
+   --ku-shadow-sm: 0 2px 8px rgba(var(--ku-black), 0.08);
+   --ku-shadow-elevated: 0 4px 16px rgba(var(--ku-black), 0.10);
+   --ku-shadow-lg: 0 8px 32px rgba(var(--ku-black), 0.14);
 }
 
-/* ===== Select 选择器 ===== */
+/* ===== 动画关键帧 ===== */
 
-.ku-select { position: relative; }
-.ku-select-trigger {
-    cursor: pointer;
-    transition: border-color var(--ku-transition-fast), box-shadow var(--ku-transition-fast);
-}
-.ku-select-trigger:hover { border-color: var(--ku-color-primary-hover); }
-.ku-select-option {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast);
-}
-.ku-select-option:hover { background-color: var(--ku-color-fill-0); }
-.ku-select-option.ku-selected {
-    color: var(--ku-color-primary);
-    background-color: var(--ku-color-primary-light-default);
+@keyframes ku-spin
+{
+   from
+   {
+      transform: rotate(0deg);
+   }
+
+   to
+   {
+      transform: rotate(360deg);
+   }
 }
 
-/* ===== Dropdown 下拉菜单 ===== */
+/* ===== 全局交互基类 ===== */
 
-.ku-dropdown-item {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast);
-}
-.ku-dropdown-item:hover:not(.ku-dropdown-item-disabled) {
-    background-color: var(--ku-color-fill-0);
+/* 可聚焦元素焦点环。挂类的是 Button / Checkbox / Switch / FloatButton 及其 Group 的触发钮 —— 这几处自己内联
+   outline:"none" 关掉 UA 环又没给替代。其余控件不走这条: Input 由自身 focused 状态画 box-shadow, Select 的
+   触发框压根不可键盘聚焦。
+   **前提是那个元素内联没有 outline** —— 内联优先于类, 内联写着 outline:"none" 时这里画多粗都出不来。 */
+.ku-focus-ring:focus-visible
+{
+   outline: 2px solid var(--ku-color-primary);
+   outline-offset: 1px;
 }
 
-/* ===== Modal 对话框 ===== */
+/* Chat 输入框的聚焦态。文字区(textarea)自己没有边框、也关掉了 outline, 焦点环要画在外面那口"井"上。
+   这里用 :focus-within 而不是 JS 的 focused 状态: 焦点进出不该触发一次 React 渲染, 而 :focus-within 正是
+   "子元素拿到焦点"的 CSS 原生表达。 */
+.ku-chat-inputbox:focus-within
+{
+   border-color: var(--ku-color-primary);
+}
 
-.ku-modal-close:hover {
-    background-color: var(--ku-color-fill-1);
-    color: var(--ku-color-text-0);
+/* ===== FloatButton 悬浮按钮 =====
+   独立按钮与该按钮组 **Group 的触发钮**共用这一个类(两者本就是同一个东西)。
+
+   ① **UA 重置不能省。** `<button>` 的 UA 默认样式带 `appearance: auto` 与一条 `2px outset` 的原生边框, 而
+   `outset` 画出来就是"左上亮、右下暗"的一圈立体斜角 —— 没有作者边框盖着它, 按钮外面就会多出一圈半亮半暗的环。
+   **注意这修不了"描边"**: 把边框色改成透明也一样, 因为那是 UA 的绘制, 不是一条可染色的边; 必须
+   `appearance: none` 与 `border: none` 一起下(同 .ku-layout-sider-trigger)。
+   `padding` / `margin` / `font` 一并归零 —— 它们都会吃进内联的 width/height, 不归零那个 `size` 就名不副实;
+   触发钮折叠态渲染的是文字 `"+"`, 所以 `line-height: 1` 也要给。**顺序要紧**: `font` 简写会连 line-height 一起
+   重置, 故 `line-height` 必须写在它**后面**。
+
+   ② **内联干不了的两件事**: 阴影的静置/悬停两态与它的过渡都写不进内联 —— 组件里那句内联 `boxShadow` 因此是
+   **删掉**的, 留着会把 `:hover` 一起盖掉, 按钮永远不抬起。
+
+   ③ 外观(圆、居中、主色、radius)全在这里, 内联只留随 props / state 变的几项(位置、size、展开态的 rotate);
+   底色由 .ku-glass-tip 提供, 不在这里重复。
+   `:active` 写在 `:hover` 之后且只改 transform, "悬停放大 + 按下缩小"因此能叠加; 触发钮展开态的内联
+   `rotate(45deg)` 会盖掉 `:hover` 的 scale —— 它悬停时只变阴影、不放大, 这是有意的。 */
+.ku-float-button
+{
+   appearance: none;
+   border: none;
+   margin: 0;
+   padding: 0;
+   font: inherit;
+   line-height: 1;
+   border-radius: 50%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   color: var(--ku-color-primary);
+   cursor: pointer;
+   user-select: none;
+   box-shadow: var(--ku-shadow-elevated);
+   transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
-.ku-modal-btn:hover {
-    background-color: var(--ku-color-fill-1);
+
+.ku-float-button:hover
+{
+   transform: scale(1.08);
+   box-shadow: var(--ku-shadow-lg);
 }
-.ku-modal-btn-primary:hover {
-    filter: brightness(1.2);
+
+.ku-float-button:active
+{
+   transform: scale(0.95);
 }
-.ku-modal-btn-primary:active {
-    filter: brightness(0.85);
+
+/* ===== Select 选择器 =====
+   触发框(.ku-select-trigger)、输入框(.ku-input)与 InputNumber 的加减按钮都不在这里写规则: 它们的 cursor /
+   悬停边框 / 聚焦环全在内联样式里(边框要随聚焦与校验状态算, 是一行 border 简写), 而内联优先于类 —— 同类声明
+   写在这儿一条都不会生效。
+   下面的 cursor 同理不写: 组件内联那份是状态驱动的(disabled ? not-allowed : pointer), 比类里一个恒定的
+   pointer 更准。这条对后面多处同样适用。 */
+.ku-select-option
+{
+   transition: background-color var(--ku-transition-fast);
 }
 
-/* ===== Switch 开关 ===== */
+/* 悬停底原为 fill-0(#14171e), 而弹层底是 bg-2(#14161f) —— 两色几乎同值, 悬停等于没反馈 */
+.ku-select-option:hover
+{
+   background-color: var(--ku-color-fill-1);
+}
 
-.ku-switch {
-    transition: background-color var(--ku-transition-base);
-    cursor: pointer;
+.ku-select-option.ku-selected
+{
+   color: var(--ku-color-primary);
+   background-color: var(--ku-color-primary-light-default);
 }
-.ku-switch:hover { opacity: 0.9; }
-.ku-switch:active { transform: none; }
-.ku-switch-knob {
-    transition: transform var(--ku-transition-base);
+
+/* 选中项被悬停时不能被 fill-1 盖掉主色底, 要走主色浅档的下一级 */
+.ku-select-option.ku-selected:hover
+{
+   background-color: var(--ku-color-primary-light-hover);
 }
 
-/* ===== Checkbox / Radio 复选框/单选框 ===== */
+/* ===== Dropdown 下拉菜单 ===== */
+.ku-dropdown-item
+{
+   transition: background-color var(--ku-transition-fast);
+}
 
-.ku-checkbox, .ku-radio {
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
+/* 底走半透明档: 菜单面是毛玻璃, 不透明 fill-* 会在玻璃上糊出一片死色 */
+.ku-dropdown-item:hover:not(.ku-dropdown-item-disabled)
+{
+   background-color: var(--ku-color-fill-translucent-hover);
 }
-.ku-checkbox:hover .ku-checkbox-box,
-.ku-radio:hover .ku-radio-box {
-    border-color: var(--ku-color-primary);
+
+/* ===== Modal 对话框 ===== */
+/* 关闭按钮的底色内联没写, 所以这条穿得过去; 但 color 内联恒有值, 悬停改色是白写, 故只留底色。
+   底走半透明档: 对话框本身是毛玻璃, 不透明 fill-* 会在玻璃上糊出一片死色。 */
+.ku-modal-close:hover
+{
+   background-color: var(--ku-color-fill-translucent-hover);
 }
 
-/* ===== Slider 滑块 ===== */
+/* 主按钮的悬停/按下只能靠 filter —— 它的 backgroundColor 是内联的(还要随 confirmLoading 变), 内联优先于类,
+   任何 background-color 的 :hover 都穿不过去; filter 内联没写, 才拦不住。
+   次级按钮连类都没有: 底色同样内联, 类规则救不回来, 悬停反馈得由组件自己给。 */
+.ku-modal-btn-primary:hover
+{
+   filter: brightness(1.2);
+}
 
-.ku-slider-track { cursor: pointer; }
-.ku-slider-handle {
-    cursor: grab;
-    transition: box-shadow var(--ku-transition-fast), transform var(--ku-transition-fast);
+.ku-modal-btn-primary:active
+{
+   filter: brightness(0.85);
 }
-.ku-slider-handle:hover { transform: scale(1.15); }
-.ku-slider-handle:active { cursor: grabbing; transform: scale(1.05); }
 
-/* ===== Rating 评分 ===== */
+/* ===== Switch 开关 =====
+   没有类规则: cursor / transition / 禁用透明度全在内联(trackStyle / thumbStyle), 类声明一律被盖, 滑块那一层
+   更是压根没挂类名。这里只剩 .ku-focus-ring 负责键盘焦点环。 */
 
-.ku-rating-star {
-    cursor: pointer;
-    transition: transform var(--ku-transition-fast), color var(--ku-transition-fast);
+/* ===== Checkbox / Radio 复选框/单选框 =====
+   只有 -webkit-tap-highlight-color 留得住 —— cursor 被两边的内联样式盖掉。 */
+.ku-checkbox,
+.ku-radio
+{
+   -webkit-tap-highlight-color: transparent;
 }
-.ku-rating-star:hover { transform: scale(1.2); }
 
 /* ===== Tag 标签 ===== */
-
-.ku-tag {
-    transition: background-color var(--ku-transition-fast);
+.ku-tag
+{
+   transition: background-color var(--ku-transition-fast);
 }
-.ku-tag.ku-tag-closable .ku-tag-close {
-    cursor: pointer;
-    transition: color var(--ku-transition-fast);
-}
-.ku-tag .ku-tag-close:hover {
-    color: var(--ku-color-text-0);
-}
-
-/* ===== Tabs 选项卡 ===== */
 
-.ku-tabs-tab {
-    cursor: pointer;
-    transition: color var(--ku-transition-fast), border-color var(--ku-transition-fast);
+/* ===== Collapse 折叠面板 =====
+   表头没有内联底色, 悬停底才落得下来。底走半透明档: 整块折叠面板是毛玻璃, 不透明的 fill-* 会在玻璃上糊出一片
+   死色(与表格行同一个理由)。cursor 不写 —— 表头内联已按禁用态给了 pointer / not-allowed; 禁用态的表头不挂这个
+   类, 免得"禁用还亮一下"。 */
+.ku-collapse-header
+{
+   transition: background-color var(--ku-transition-fast);
 }
-.ku-tabs-tab:hover { color: var(--ku-color-primary); }
-.ku-tabs-tab.ku-active { color: var(--ku-color-primary); }
 
-/* ===== Collapse 折叠面板 ===== */
-
-.ku-collapse-header {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast);
+.ku-collapse-header:hover
+{
+   background-color: var(--ku-color-fill-translucent-hover);
 }
-.ku-collapse-header:hover { background-color: var(--ku-color-fill-0); }
-
-/* ===== Breadcrumb 面包屑 ===== */
 
-.ku-breadcrumb-item {
-    cursor: pointer;
-    transition: color var(--ku-transition-fast);
+/* ===== Card 卡片 =====
+   悬停阴影只在 shadows="hover" 时给(组件此时才挂 .ku-card-hoverable) —— 原来写成 .ku-card:hover 无条件生效,
+   于是 shadows="none" 也照样浮起来, 与 prop 语义相反; 而 shadows="hover" 找的 .ku-card-hoverable 反倒没有任何
+   规则(死类)。一并收口。 */
+.ku-card.ku-card-hoverable:hover
+{
+   box-shadow: var(--ku-shadow-elevated);
 }
-.ku-breadcrumb-item:hover { color: var(--ku-color-primary); }
 
-/* ===== Pagination 分页 ===== */
-
-.ku-pagination-item {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
-}
-.ku-pagination-item:hover:not(.ku-pagination-active) { background-color: var(--ku-color-fill-0); }
-.ku-pagination-item.ku-pagination-active {
-    background-color: var(--ku-color-primary);
-    color: #fff;
+/* ===== Table 表格 =====
+   行悬停 / 斑马纹 / 选中底都走类。此前行悬停是 tr 上的 onMouseEnter / Leave 手写的, 于是有两处坏:
+     1) 悬停画的 fill-0 与斑马纹用的是同一个颜色, 斑马表上悬停完全看不出来;
+     2) 斑马纹画在 td 的内联样式上, 悬停画在 tr 上 —— td 是不透明的, 直接把 tr 的悬停底盖掉。
+   交给类之后 td 不再画底, 由行统一负责, 两个状态才能叠在同一层上。
+   底色一律用半透明档: 表格面是毛玻璃, 不透明的 fill-* 会在行上糊出一片死色。 */
+.ku-table-row
+{
+   transition: background-color var(--ku-transition-fast);
 }
 
-/* ===== Tree 树 ===== */
-
-.ku-tree-node {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast);
+.ku-table-striped tbody .ku-table-row:nth-child(even)
+{
+   background-color: var(--ku-color-fill-translucent);
 }
-.ku-tree-node:hover { background-color: var(--ku-color-fill-0); }
-.ku-tree-node.ku-selected { background-color: var(--ku-color-primary-light-default); }
-
-/* ===== Steps 步骤条 ===== */
-
-.ku-steps-item { cursor: pointer; }
 
-/* ===== Timeline 时间轴 ===== */
+.ku-table-row:hover
+{
+   background-color: var(--ku-color-fill-translucent-hover);
+}
 
-.ku-timeline-item { transition: color var(--ku-transition-fast); }
+/* 斑马纹与悬停同时命中时悬停优先: 两者权重不等, 必须显式列出, 不能靠书写顺序 */
+.ku-table-striped tbody .ku-table-row:nth-child(even):hover
+{
+   background-color: var(--ku-color-fill-translucent-hover);
+}
 
-/* ===== Card 卡片 ===== */
+/* 选中行压在悬停之下: 悬停时不该把选中态的主色底冲掉 */
+.ku-table-row.ku-selected
+{
+   background-color: var(--ku-color-primary-light-default);
+}
 
-.ku-card:hover { box-shadow: var(--ku-shadow-elevated); }
-.ku-card { transition: box-shadow var(--ku-transition-base); }
+.ku-table-row.ku-selected:hover
+{
+   background-color: var(--ku-color-primary-light-hover);
+}
 
-/* ===== Avatar 头像 ===== */
+/* 表头 sticky 且半透明 —— 必须有 backdrop-filter, 否则滚动时行内容会从表头文字后透出来 */
+.ku-table-th
+{
+   background-color: var(--ku-color-glass-head);
+   backdrop-filter: var(--ku-blur-base);
+   -webkit-backdrop-filter: var(--ku-blur-base);
+}
 
-.ku-avatar { flex-shrink: 0; }
+.ku-table-sort
+{
+   cursor: pointer;
+}
 
-/* ===== Badge 徽标 ===== */
+.ku-table-sort:hover
+{
+   color: var(--ku-color-primary);
+}
 
-.ku-badge {
-    position: relative;
-    display: inline-flex;
+/* 表头筛选: 漏斗按钮 + 弹出的选项面板(面板是毛玻璃浮层, 悬停底必须走半透明档)。
+   漏斗自身的悬停改色没有类规则 —— 它的 color 内联恒有值(按"是否已筛选"算出来的), 类盖不过去。 */
+.ku-table-filter-trigger
+{
+   cursor: pointer;
+   padding: 0 1px;
 }
 
-/* ===== Table 表格 ===== */
+.ku-table-filter-item
+{
+   transition: background-color var(--ku-transition-fast);
+}
 
-.ku-table-row { transition: background-color var(--ku-transition-fast); }
-.ku-table-row:hover { background-color: var(--ku-color-fill-0); }
-.ku-table-sort { cursor: pointer; }
-.ku-table-sort:hover { color: var(--ku-color-primary); }
+.ku-table-filter-item:hover
+{
+   background-color: var(--ku-color-fill-translucent-hover);
+}
 
 /* ===== Calendar 日历 ===== */
-
-.ku-calendar-cell {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast);
-}
-.ku-calendar-cell:hover:not(.ku-calendar-cell-disabled) {
-    background-color: var(--ku-color-fill-0);
-}
-.ku-calendar-cell.ku-calendar-cell-today {
-    color: var(--ku-color-primary);
-    font-weight: 700;
-}
-.ku-calendar-cell.ku-calendar-cell-selected {
-    background-color: var(--ku-color-primary);
-    color: #fff;
+.ku-calendar-cell
+{
+   transition: background-color var(--ku-transition-fast);
 }
 
-/* ===== Carousel 轮播 ===== */
-
-.ku-carousel-dot {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast), width var(--ku-transition-fast);
+.ku-calendar-cell:hover:not(.ku-calendar-cell-disabled)
+{
+   background-color: var(--ku-color-fill-translucent-hover);
 }
 
-/* ===== Sidebar 侧边栏 ===== */
-
-.ku-sidebar-item {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
+/* **注意: 这两条里都没有 color** —— 日历格的文字色一律由组件内联给出(选中=白 / 今天=主色 / 补位与禁用=
+   text-2), 内联恒有值, 写在这儿也盖不动(见 Calendar.getDayCellStyle 的说明)。 */
+.ku-calendar-cell.ku-calendar-cell-today
+{
+   font-weight: 700;
+   /* 今天原先靠内联 rgba(128,128,128,0.15) 上底色 —— 那个"灰"不属于任何色阶, 暗底下既不偏蓝也不偏暖, 看着像
+      一块脏点。改用半透明中性档, 与斑马纹/悬停同一族。 */
+   background-color: var(--ku-color-fill-translucent);
 }
-.ku-sidebar-item:hover { background-color: var(--ku-color-fill-0); }
-.ku-sidebar-item.ku-sidebar-active {
-    color: var(--ku-color-primary);
-    background-color: var(--ku-color-primary-light-default);
-}
-
-/* ===== Navigation 导航 ===== */
 
-.ku-nav-item {
-    cursor: pointer;
-    transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
+.ku-calendar-cell.ku-calendar-cell-selected
+{
+   background-color: var(--ku-color-primary);
 }
-.ku-nav-item:hover { background-color: var(--ku-color-fill-0); }
-.ku-nav-item.ku-nav-active {
-    color: var(--ku-color-primary);
-    background-color: var(--ku-color-primary-light-default);
+
+/* 悬停规则的权重(0,3,0)高于选中(0,2,0), 不显式兜一手的话悬停会把选中日的主色底冲掉 */
+.ku-calendar-cell.ku-calendar-cell-selected:hover
+{
+   background-color: var(--ku-color-primary-hover);
 }
 
-/* ===== Toast 轻提示 ===== */
+/* ===== Layout Sider 触发钮 =====
+   压在侧栏右边缘、垂直居中的圆钮。它与上一版(铺满侧栏宽度的底横条)的关键差别: 圆钮**同时骑在两种底色上**
+   —— 左半边是玻璃侧栏, 右半边是内容区。所以底**必须不透明**: 半透底会让同一颗钮的左右两半各取各的背景、显出
+   两种颜色(与 UserGuide 卡片"压在挖洞的遮罩上"同一个病根, 只是面积小到不容易被指名)。fill-1 在两个主题里都是
+   "贴着 bg-1 的一档面", 骑在这两种底上都读得出来, hover 走 fill-2 仍有可见的亮度差。
+   (旧注释论证"横条必须半透, 否则会在玻璃上切出一道死色横缝"—— 那个论证只对横条成立: 横条完全位于玻璃内部,
+   上下要连续; 骑边缘的圆钮不适用。)
+   组件那边挂的是真 <button>(上一版是裸 div, 键盘够不到), 故下面三条清掉 UA 默认样式。 */
+.ku-layout-sider-trigger
+{
+   position: absolute;
+   top: 50%;
+   right: -12px;
+   transform: translateY(-50%);
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   width: 24px;
+   height: 24px;
+   padding: 0;
+   appearance: none;
+   font: inherit;
+   cursor: pointer;
+   border: 1px solid var(--ku-color-border);
+   border-radius: 50%;
+   background-color: var(--ku-color-fill-1);
+   color: var(--ku-color-text-2);
+   box-shadow: var(--ku-shadow-sm);
+   transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
+}
 
-.ku-toast-item { pointer-events: auto; cursor: pointer; }
+.ku-layout-sider-trigger:hover
+{
+   background-color: var(--ku-color-fill-2);
+   color: var(--ku-color-text-0);
+}
 
-/* ===== Banner 横幅 ===== */
+/* ===== 已删除的死类(规则永远不会生效, 记在这里免得再补回来) =====
+   · 类名从没挂上过: .ku-timeline-item / .ku-carousel-dot / .ku-avatar / .ku-badge /
+     .ku-checkbox-box:hover / .ku-sidebar-item* / .ku-toast-item / 原"移除原生控件样式"一节
+     (InputNumber 的输入框是 type="text", 全仓唯一的 type="number" 在 Pagination 的跳页框里)。
+   · 类挂上了但被内联盖住: .ku-nav-item*(cursor / transition / color / 底色四条全被盖, 且选中态找的
+     .ku-nav-active 不是组件实际挂的 ku-nav-item-active) / .ku-banner-close / .ku-resizable-handle
+     (Toast 的气泡整块是 innerHTML 字符串, 样式写在字面量里)。
+   · Slider / Rating / Tabs / Pagination / Tree / Steps / Breadcrumb 的全部交互类 —— 交互态全在内联: cursor 与
+     transition 恒写在 style 对象里, 悬停底/色由手写的 onMouseEnter / onMouseLeave 直接改
+     e.currentTarget.style, 补类规则只会被盖掉。 */
 
-.ku-banner-close {
-    cursor: pointer;
-    transition: color var(--ku-transition-fast), background-color var(--ku-transition-fast);
+/* ===== 滚动条美化 ===== */
+.ku-scrollbar::-webkit-scrollbar
+{
+   width: 4px;
+   height: 4px;
 }
-.ku-banner-close:hover {
-    color: var(--ku-color-text-0);
-    background-color: var(--ku-color-fill-0);
+
+.ku-scrollbar::-webkit-scrollbar-track
+{
+   background: transparent;
 }
 
-/* ===== Resizable 拖拽把手 ===== */
+.ku-scrollbar::-webkit-scrollbar-thumb
+{
+   background: var(--ku-color-fill-2);
+   border-radius: 4px;
+}
 
-.ku-resizable-handle {
-    position: absolute;
-    z-index: 10;
+.ku-scrollbar::-webkit-scrollbar-thumb:hover
+{
+   background: var(--ku-color-fill-1);
 }
 
-/* ===== Layout Sider 触发按钮 ===== */
+/* ===== 毛玻璃面 =====
+   **为什么必须是类而不是内联样式:**
+   1. 组件的底色此前写在内联 style 里, 而内联优先级高于类 —— 只加类不改内联, 不透明底会把玻璃整个盖住(背景
+      不透明时 backdrop-filter 糊完立刻被自身底色覆盖, 等于白付开销)。故套用玻璃的面要把自己的 backgroundColor
+      从内联移除, 交给下面的类提供。
+   2. @supports 回退无法用内联样式表达, 只能落在类里。
+   各档的膜与半径对照表见 :root 第 8 节。 */
+
+/* 容器档: 侧栏 / 卡片 / 面板(kg .app-sidebar / .kg-auth-card 是 blur(18px) saturate(118%), 那是历史起点、
+   不是标定基准 —— 当前基准是"背景的图和颜色要透得过来", 见 --ku-blur-base)。 */
+.ku-glass
+{
+   background-color: var(--ku-color-glass);
+   backdrop-filter: var(--ku-blur-lg);
+   -webkit-backdrop-filter: var(--ku-blur-lg);
+}
 
-.ku-layout-sider-trigger {
-    cursor: pointer;
-    text-align: center;
-    padding: 8px 0;
-    border-top: 1px solid var(--ku-color-border);
-    background-color: var(--ku-color-bg-2);
-    transition: background-color var(--ku-transition-fast);
+/* 头部档: 顶栏 / 底栏(app shell 的 Header, 比容器档更实一档 —— 下方内容滚过时不透字) */
+.ku-glass-head
+{
+   background-color: var(--ku-color-glass-head);
+   backdrop-filter: var(--ku-blur-lg);
+   -webkit-backdrop-filter: var(--ku-blur-lg);
 }
-.ku-layout-sider-trigger:hover {
-    background-color: var(--ku-color-bg-3);
+
+/* 浮层档: 下拉气泡 / 弹窗 / 浮层 */
+.ku-glass-overlay
+{
+   background-color: var(--ku-color-glass-strong);
+   backdrop-filter: var(--ku-blur-xl);
+   -webkit-backdrop-filter: var(--ku-blur-xl);
+   /* 磨砂颗粒叠在底色之上(见 --ku-glass-grain 的说明) */
+   background-image: var(--ku-glass-grain);
 }
 
-/* ===== 移除原生控件样式 ===== */
+/* 选项面板档: Dropdown / Select 这类**选项列表**的菜单。
+   **为什么不复用浮层档**: 浮层档的其余成员(Modal / SideSheet / Toast / Notification / Feedback)都是大面积、
+   稀疏的面 —— 半透底在那里是好事。选项面板正相反: 一百多像素宽、三十像素一行的密集文字**要逐行读**, 同样
+   0.34 的底, 背后只要有一行代码就会从菜单项文字之间透上来, 读的是叠印的两层字。读的密度不同, 底的厚度就必须
+   不同 —— 这是它单独成档的全部理由。它与浮层档是**并列关系, 不是"加强版"**, 用错档只会得到过薄或过厚的面。
+   两层 background-image: 上面是颗粒、下面是奶膜。奶膜**走 token 而不是写死在这里**, 因为它是全库唯一一处只有
+   单个主题有效的层 —— 写死在类规则里就是一句看不出问题的死代码, 抽成 token 才看得见亮色那份是空的。颗粒放上层
+   是为了保住它自己的对比度(奶膜压在上面会把噪点的明暗差一起压平), 故**颗粒层两个主题都留**, 只有奶膜随主题变。 */
+.ku-glass-menu
+{
+   background-color: var(--ku-color-glass-menu);
+   backdrop-filter: var(--ku-blur-menu);
+   -webkit-backdrop-filter: var(--ku-blur-menu);
+   background-image:
+      var(--ku-glass-grain),
+      var(--ku-glass-menu-film);
+}
 
-.ku-input-number input[type="number"]::-webkit-inner-spin-button,
-.ku-input-number input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+/* 小浮层档: Popover / Tooltip 的气泡。面积小, 所以比浮层档更透; 半径**比浮层档小得多**(7 vs 18px) ——
+   小面积的面本来就更容易看清背后, 再叠大半径只是白糊, 而这一档的 saturate 是五档最高(250%), 用来把背后的颜色
+   顶上来。
+   颗粒走通用那条: 这一档曾经有过自己的减半 token(--ku-glass-grain-tip), 已删除, 理由见 --ku-glass-grain 里那条
+   "两个主题同向"的更正。 */
+.ku-glass-tip
+{
+   background-color: var(--ku-color-glass-tip);
+   backdrop-filter: var(--ku-blur-tip);
+   -webkit-backdrop-filter: var(--ku-blur-tip);
+   background-image: var(--ku-glass-grain);
 }
-.ku-input-number input[type="number"] {
-    -moz-appearance: textfield;
+
+/* 弱档: 表格等大面积面 */
+.ku-glass-subtle
+{
+   background-color: var(--ku-color-glass);
+   backdrop-filter: var(--ku-blur-base);
+   -webkit-backdrop-filter: var(--ku-blur-base);
 }
 
-/* ===== 滚动条美化 ===== */
+/* 遮罩档: Modal / SideSheet / Image 预览 / UserGuide 的模态遮罩, 以及 Cropper 的裁剪蒙版。
+   与 .ku-glass-* 各档**并列**而不是复用其一 —— 遮罩铺满视口, 是唯一"面积 = 屏幕"的玻璃面, 底色和模糊都要按
+   "大面积 + 全屏合成开销"单独标定(见 --ku-blur-mask 的说明)。
+   Cropper 是这里的例外: 它是"盖住一张图"而不是"盖住页面", 面积小得多, 用同一档只是因为"半透 + 磨砂"的观感
+   要求一致, 顺带省掉一组几乎同值的 token。 */
+.ku-mask
+{
+   background-color: var(--ku-color-mask);
+   backdrop-filter: var(--ku-blur-mask);
+   -webkit-backdrop-filter: var(--ku-blur-mask);
+}
 
-.ku-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
-.ku-scrollbar::-webkit-scrollbar-track { background: transparent; }
-.ku-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--ku-color-fill-2);
-    border-radius: 4px;
+/* UserGuide 的引导卡片: **不透明**面 —— 与上面各玻璃档并列, 但它不属于玻璃家族。
+   它身后的遮罩**挖了目标的洞**(见 Mask.renderHole), 于是同一个元素有两种底: 洞外是"遮罩压暗过的页面", 洞内是
+   **没压暗的原始页面**(可以是一块近黑的 Monaco)。60% 的白膜盖不住这个差 —— 实测把 alpha 抬到 .84, 卡片落在近黑
+   与纯白上仍差 ΔE≈12: 抬高只是减轻、不能消除, 还顺带把卡片自己糊成一片。README"使用前提 3"给的逃生口正是这条:
+   需要叠层时让它们做兄弟, 或把内层换成不透明的实色面。这里走后者。
+   bg-3 一条声明两个主题都对, 因为卡片坐的是**遮罩压过之后的**页面: 亮色 #e0e2e5 比压过的页面(#c2–#d1)亮
+   15–30/255, 暗色 #1a1f2b 同样明显更亮。附带省掉一次全屏 blur 的合成开销。
+
+   这**不是** .ku-glass-overlay 的锅: Modal / SideSheet 也用它, 但它们的遮罩**没有洞**, 身后恒为"遮罩压过的
+   页面", 玻璃是稳的。问题只在"玻璃身后同时存在挖洞与不挖洞两种区域"。 */
+.ku-userguide-card
+{
+   background-color: var(--ku-color-bg-3);
 }
-.ku-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: var(--ku-color-fill-1);
+
+/* 不支持 backdrop-filter 时退回不透明面 —— 否则半透明底会直接漏出下层内容, 文字互相叠印不可读 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
+{
+   .ku-glass,
+   .ku-glass-subtle,
+   .ku-glass-head
+   {
+      background-color: var(--ku-color-bg-3);
+   }
+
+   /* 选项面板与浮层档退到同一档: 没有模糊时, 菜单那一档更厚的底再叠上颗粒只会显脏, 而它的底色本来就比浮层档
+      实, 退到 bg-2 已经足够压住背后的内容。 */
+   .ku-glass-overlay,
+   .ku-glass-menu
+   {
+      background-color: var(--ku-color-bg-2);
+   }
+
+   /* 气泡退回原来的不透明档(fill-2 在暗色即 #2f343c, 正是 Tooltip 原本的底色) —— 拿不到模糊就不要半透明,
+      否则文字直接和背后的内容叠印。颗粒一并去掉: 不透明的面上噪点只会显脏, 起不到"磨砂"的作用。 */
+   .ku-glass-tip
+   {
+      background-color: var(--ku-color-fill-2);
+      background-image: none;
+   }
+
+   /* 遮罩没有"更实一档"可退 —— 退回不透明就等于关灯, 那正是这次要改掉的观感。退成一层更深的半透明黑: 拿不到
+      模糊, 至少保住"背景还在"和"模态压暗"两件事。 */
+   .ku-mask
+   {
+      background-color: rgba(var(--ku-grey-0), 0.62);
+   }
+
+   /* 亮色不能跟着取第 0 档 —— 亮色第 0 档是纯白, 那会变成"往页面上刷一层白", 方向正好相反。改用第 9 档(该主题
+      最暗的一档)与更轻的 alpha, 与 --ku-color-mask 的亮色覆盖同源。 */
+   :root[data-ku-theme="light"] .ku-mask
+   {
+      background-color: rgba(var(--ku-grey-9), 0.42);
+   }
 }