fix(webui): 壁纸被不透明层盖住 —— 玻璃不再层层相乘 + 浅色表面类全部接管

用户报的：「webui 目前在壁纸底上叠了太多不透明层，导致壁纸效果很差，几乎看不出来」，
追问后补充：「不只是玻璃，而是很多界面是不透明的」。两句都成立，是两个叠加的原因。

## ① 玻璃层层相乘

每层面板都吃同一个不透明度 a，两层就是 1-(1-a)²。a=0.82 时两层 0.97、三层 0.995
—— 壁纸在数学上被吃掉，而且每层各做一次 16px 模糊，图案被糊成灰块。
改法：玻璃只出现一次（外层 0.62 + 18px 模糊；嵌套层只留 0.3 色调且不再模糊；
第三层透明）。同时把遮罩 24%→12%、照片自身模糊 8→4px（那张被洗白的锅之一）。

## ② 14 个浅色表面类根本没被接管（"很多界面是不透明的"就是这条）

旧规则只接管 white / gray-50 / slate-100，而源码里在用的是
gray-100(24 处)、blue-50(17)、red-50(13)、blue-100(8)、gray-200(8)、green-50(8)…
—— 全是实心的，正好盖住壁纸。

清单改为**从源码用法生成**（`scripts/gen-background-takeover.mjs` → 生成的 CSS，
构建前自动跑），因为手写清单必然烂；判据保证"源码里出现的浅色表面类必须都被接管"，
并明确排除页面底（gray-50/slate-100 必须保持**全透明**，不能被改成半透明）。
按钮/徽标（*-600/700、chrome-600/700）**故意保持不透明**：小控件可读性优先
（index.css 里原有注释记着实测 4.46:1 的教训）。

## 判据

- `test/background.test.mjs` 23 条（新增 8 条）：玻璃算式（两层 ≤0.85）、外层 ≤0.70、
  嵌套规则存在、**判据自检**（旧值 0.82 必须算得出 >0.95）、表面类覆盖、页面底不得进清单、
  清单非空跑。犯过一次错：第一版把判据追加在 `process.exit()` **之后** ⇒ 根本没执行，
  从"测试数没变"才发现。
- `test/manual/wallpaper-layers-verify.mjs`（真实渲染，自带无头 Chromium）：
  用**纯红壁纸读绿通道**测有效不透明度（纯色下 backdrop-filter 不影响读数）。
  面板 p95：**修复前 82% → 修复后 62%**；反向对照（改回旧值）能分辨 ≥10 个百分点；
  深色照片面上面板仍是浅底；关掉壁纸的同坐标对照更实。5/5。
  过程中作废了两个指标：只看绿通道会把深色元素误判成"盖死"；"面积占比"类阈值
  （Δ≥8/≥40）在 0.97 时仍会蹭过门槛，饱和而无分辨力 —— 同坐标比值才可信。

## 交付

已部署（网关内嵌 WebUI 重建）：线上 CSS 已含 `--bg-glass-inner`、嵌套规则与 14 个接管类。

client/electron/src/background-takeover.generated.css

@@ -0,0 +1,88 @@
+/* 由 scripts/gen-background-takeover.mjs 生成 —— 不要手改。
+ * 背景开启时把源码里在用的浅色表面类改成半透明（清单来自 src/**/*.tsx 的实际用法）。
+ * 共 14 个类：bg-amber-100, bg-amber-50, bg-blue-100, bg-blue-50, bg-gray-100, bg-gray-200, bg-green-100, bg-green-50, bg-orange-100, bg-orange-200, bg-orange-50, bg-red-100, bg-red-50, bg-yellow-100
+ */
+
+html[data-bg='on'] .bg-amber-100 {
+  background-color: rgb(var(--c-amber-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-amber-50 {
+  background-color: rgb(var(--c-amber-50) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-blue-100 {
+  background-color: rgb(var(--c-blue-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-blue-50 {
+  background-color: rgb(var(--c-blue-50) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-gray-100 {
+  background-color: rgb(var(--c-gray-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-gray-200 {
+  background-color: rgb(var(--c-gray-200) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-green-100 {
+  background-color: rgb(var(--c-green-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-green-50 {
+  background-color: rgb(var(--c-green-50) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-orange-100 {
+  background-color: rgb(var(--c-orange-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-orange-200 {
+  background-color: rgb(var(--c-orange-200) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-orange-50 {
+  background-color: rgb(var(--c-orange-50) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-red-100 {
+  background-color: rgb(var(--c-red-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-red-50 {
+  background-color: rgb(var(--c-red-50) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-yellow-100 {
+  background-color: rgb(var(--c-yellow-100) / var(--bg-glass-inner));
+  backdrop-filter: none;   /* 外层已经模糊过，嵌套层再糊一次会把图案糊成灰块 */
+  -webkit-backdrop-filter: none;
+}

client/electron/src/index.css

@@ -225,10 +225,24 @@
    * --bg-dim 与 --bg-blur 由 backgroundStore 在运行时写入，这里是初值。
    */
   --bg-scrim: 255 255 255;
-  --bg-dim: 24%;
-  --bg-blur: 8px;
+  --bg-dim: 12%;
+  --bg-blur: 4px;
   /* 玻璃面板的不透明度：背景越花，面板需要越实才读得动。 */
-  --bg-glass: 0.82;
+  --bg-glass: 0.62;
+  /*
+   * 嵌套面板那一层的不透明度。
+   *
+   * ★ 为什么必须有这个变量（2026-09-13 用户报的缺陷）：「壁纸底上叠了太多
+   * 不透明层，导致壁纸效果很差，几乎看不出来」。根因就是**每一层 bg-white
+   * 都用同一个 0.82**，而嵌套是相乘的：0.82 × 0.82 = 0.97，再叠一层就到 0.995
+   * —— 壁纸被彻底盖住，而且每层各做一次模糊，图案被糊成一片灰。
+   *
+   * 原则是「玻璃只该出现一次」：最外层负责遮罩与模糊，里面几层只留一点点
+   * 色调（保住正文对比度），第三层起直接透明（见下面 data-bg='on' 的规则）。
+   */
+  --bg-glass-inner: 0.3;
+  /* 面板的朦胧感（与壁纸自身的 --bg-blur 分开：那层给照片打底，这层给面板） */
+  --bg-blur-panel: 18px;
 
   /*
    * ─── 尺寸与动效 ───
@@ -333,7 +347,8 @@
    */
   --bg-scrim: 0 0 0;
   /* 深色下面板要更实：背景亮部与深色卡片对比过强时，文字会显得发灰。 */
-  --bg-glass: 0.86;
+  --bg-glass: 0.66;
+  --bg-glass-inner: 0.34;
 
   /*
    * 深色下的层次靠「边框亮于底」而不是阴影。
@@ -708,8 +723,33 @@ html[data-bg='on'] .bg-slate-100 {
 
 html[data-bg='on'] .bg-white {
   background-color: rgb(var(--c-white) / var(--bg-glass));
-  backdrop-filter: blur(16px) saturate(1.2);
-  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2);
+  -webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2);
+}
+
+/*
+ * ★ 嵌在玻璃面板**里面**的面板不再各叠一次不透明度（2026-09-13 用户报的缺陷）。
+ *
+ * 相乘是这里的关键：两层 0.82 得 0.97、三层 0.995 —— 壁纸就是这么被吃掉的，
+ * 而且每层各做一次 16px 模糊，图案被糊成一片灰。
+ * 第二层只留一点色调（保住正文对比度），第三层起透明，且都**不再叠加模糊**。
+ */
+html[data-bg='on'] .bg-white .bg-white {
+  background-color: rgb(var(--c-white) / var(--bg-glass-inner));
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+html[data-bg='on'] .bg-white .bg-white .bg-white {
+  background-color: transparent;
+}
+
+/* 侧栏里的玻璃面板同理：框架已经有一层底色，里面不能再叠。 */
+html[data-bg='on'] .bg-chrome-900 .bg-white,
+html[data-bg='on'] .bg-chrome-800 .bg-white {
+  background-color: rgb(var(--c-white) / var(--bg-glass-inner));
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 
 /* 悬停态也要接管：不接管的话鼠标一进面板就会闪成不透明（明显跳动）。 */
@@ -719,12 +759,14 @@ html[data-bg='on'] .hover\:bg-gray-100:hover {
 }
 
 html[data-bg='on'] .bg-chrome-900 {
-  background-color: rgb(var(--c-chrome-900) / 0.86);
+  /* 框架也放宽一点：它是外层玻璃，占屏面积大，太实会把壁纸挡掉一大块。
+     里面的面板由下面「.bg-chrome-* .bg-white」那条接管，不会再叠一次。 */
+  background-color: rgb(var(--c-chrome-900) / 0.72);
   backdrop-filter: blur(16px) saturate(1.2);
   -webkit-backdrop-filter: blur(16px) saturate(1.2);
 }
 html[data-bg='on'] .bg-chrome-800 {
-  background-color: rgb(var(--c-chrome-800) / 0.82);
+  background-color: rgb(var(--c-chrome-800) / 0.68);
   backdrop-filter: blur(16px) saturate(1.2);
   -webkit-backdrop-filter: blur(16px) saturate(1.2);
 }

client/electron/src/main.tsx

@@ -4,6 +4,8 @@ import App from './App';
 import { initTheme } from './stores/themeStore';
 import { initBackground } from './stores/backgroundStore';
 import './index.css';
+// 背景开启时要变半透明的浅色表面类（由 scripts/gen-background-takeover.mjs 生成）
+import './background-takeover.generated.css';;
 
 // 必须在 render 之前：晚一步就会让深色偏好的用户看到一帧白色闪屏。
 // index.html 里还有一段更早的内联脚本处理「JS bundle 到达前」那段空窗，