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/test/background.test.mjs

@@ -153,5 +153,53 @@ for (const f of readdirSync(compDir).filter(x => x.endsWith('.tsx'))) {
 }
 check('新组件未使用未映射色族', unmapped.length === 0, unmapped.join(' '));
 
+  // 16) ★ 玻璃不得层层相乘（2026-09-13 用户报："壁纸底上叠了太多不透明层"）。
+  //
+  // 判据用**算式**而不是感觉：每层都吃同一个 a，两层就是 1-(1-a)²。
+  // 缺陷时 a=0.82 ⇒ 两层 0.97、三层 0.995（壁纸在数学上被吃掉）。真实渲染实测
+  // （纯红壁纸读绿通道）同样印证：修复前 p95 82%，修复后 62%。
+  const varOf = name => {
+    const mm = css.match(new RegExp(`--${name}:\\s*([0-9.]+);`)); // 第一次出现 = 浅色那组
+    return mm ? Number(mm[1]) : NaN;
+  };
+  const glass = varOf('bg-glass');
+  const inner = varOf('bg-glass-inner');
+  const composite = (base, nested, layers) => {
+    let opaque = base;
+    for (let i = 1; i < layers; i++) opaque = opaque + nested * (1 - opaque);
+    return opaque;
+  };
+  const stacked = composite(glass, inner, 2);
+  check('玻璃有"嵌套层"变量', Number.isFinite(glass) && Number.isFinite(inner), `glass=${glass} inner=${inner}`);
+  check('有"嵌套面板不再各叠一次"的规则', /\.bg-white \.bg-white \{/.test(css));
+  check('两层嵌套后的有效不透明度 ≤ 0.85', stacked <= 0.85, `实际 ${stacked.toFixed(3)}`);
+  check('外层玻璃 ≤ 0.70', glass <= 0.7, `实际 ${glass}`);
+  check('判据自检：旧值 0.82 层层叠必须算得出 >0.95', composite(0.82, 0.82, 2) > 0.95);
+
+  // 17) ★ 浅色表面类的接管清单必须跟着源码走。
+  //
+  // 缺陷的另一半：当时只接管了 white/gray-50/slate-100，而源码里在用的
+  // gray-100(24 处)、blue-50(17)、red-50(13)… 全是实心的，正好把壁纸盖住。
+  const gen = read('../src/background-takeover.generated.css');
+  const used = new Set();
+  const walk = dir => {
+    for (const e of readdirSync(dir, { withFileTypes: true })) {
+      const full = join(dir, e.name);
+      if (e.isDirectory()) walk(full);
+      else if (/\.(tsx?|jsx?)$/.test(e.name)) {
+        const src = readFileSync(full, 'utf8');
+        for (const mm of src.matchAll(/bg-[a-z]+-\d{2,3}/g)) {
+          if (/^bg-[a-z]+-(50|100|200)$/.test(mm[0])) used.add(mm[0]);
+        }
+      }
+    }
+  };
+  walk(join(here, '../src'));
+  const PAGE_BASE = new Set(['bg-gray-50', 'bg-slate-100']); // 页面底必须保持全透明
+  const missing = [...used].filter(c => !PAGE_BASE.has(c) && !gen.includes(`.${c} {`));
+  check('源码里用到的浅色表面类全被接管', missing.length === 0, `漏了：${missing.join(', ')}`);
+  check('页面底没有被写进半透明清单', [...PAGE_BASE].every(b => !gen.includes(`.${b} {`)));
+  check('清单不是空跑（至少扫到 10 个类）', used.size >= 10, `实际 ${used.size}`);
+
 console.log(`\n背景：${pass} 通过${fail ? `，${fail} 失败` : ''}`);
 process.exit(fail ? 1 : 0);