style(webui): 导航栏改为完全不透明 + 内容面板更通透 + 整屏浮动圆角玻璃

用户 2026-09-14 原话：「导航栏应当完全不透明……没有正文的位置过于不通透，
同时导航栏应当现代化一下，整个界面应当圆角化玻璃化」。

这三句是**两个方向**的要求，我上一轮正好把导航栏做反了（越改越透）：

## ① 导航栏：完全不透明（含窄屏底部导航）

`chrome-800/900` 在背景模式下不再吃 alpha、也不参与模糊。它是**框架**，
不该跟着壁纸一起虚化。它与"内容要通透"是两个方向的要求，所以写成独立规则、
并在注释里点名 —— 合并成一条必然互相打架。

## ② 内容面板：更通透

`--bg-glass` 0.62 → **0.45**（深色 0.66 → 0.5），嵌套层 0.3 → 0.22。
实测（纯红壁纸读绿通道）：邮件列表有效不透明度 115/255 ≈ **0.45**，正文区全透。

## ③ 整屏浮动圆角玻璃

给宽屏外壳加了稳定钩子 `app-shell`，背景开启时：外壳 **padding/gap 10px**
（面板之间露壁纸 —— 没有缝隙的"玻璃"看上去仍是一整块板）、顶层面板
**圆角 var(--radius-card)** + 投影。实测三栏：导航 60px/圆角14px/不透明、
列表 320px/圆角14px/0.45、正文 1020px/圆角14px/全透。

## 判据

`test/background.test.mjs` 新增 5 条形态判据（导航不透明、导航不参与模糊、
`--bg-glass ≤ 0.55`、外壳留缝、顶层面板圆角），共 **28 条**。
前端 254 条 + 打包一致性全绿。

## 过程中的三处自纠

1. **我的 App.tsx 编辑第一次根本没落盘**：那份 python 脚本第 18 行语法错误就整体
   没执行，而我把"✓ 已加钩子"当成了成功 —— 后来 `.app-shell 存在: false` 才暴露。
   教训：脚本报成功不等于目标文件变了，**改完要回读**。
2. **JSX 里把 `{/* … */}` 放在 `return (` 与根元素之间**是非法的 ⇒ 构建失败。
   改为 JS 注释放在 `return` 之前。
3. ★ 这两次失败都是**新加的部署闸门先拦住的**（"前端 dist 比源码旧"），
   也就是上一轮刚补的那道门当天就发挥了作用 —— 换成以前，会再次静默部署旧界面。

## 顺带清理

验收截图用的 2 封样例邮件已删、随之产生的空会话已归档；测试账号外观已重置。

client/electron/test/background.test.mjs

@@ -201,5 +201,20 @@ check('新组件未使用未映射色族', unmapped.length === 0, unmapped.join(
   check('页面底没有被写进半透明清单', [...PAGE_BASE].every(b => !gen.includes(`.${b} {`)));
   check('清单不是空跑（至少扫到 10 个类）', used.size >= 10, `实际 ${used.size}`);
 
+  // 18) ★ 导航栏必须**完全不透明**、内容面板必须更通透、整体圆角玻璃化。
+  //
+  // 用户 2026-09-14 原话：「导航栏应当完全不透明……没有正文的位置过于不通透，
+  // 同时导航栏应当现代化一下，整个界面应当圆角化玻璃化」。
+  // 注意这是**两个方向**的要求：框架要实、内容要透 —— 写成一条规则就会互相打架。
+  const opaqueNav = /html\[data-bg='on'\] \.bg-chrome-900,[\s\S]{0,160}background-color: rgb\(var\(--c-chrome-900\)\)/.test(css);
+  const navNoBlur = /html\[data-bg='on'\] \.app-shell > \.bg-chrome-900 \{[\s\S]{0,160}backdrop-filter: none/.test(css);
+  check('导航栏在背景模式下完全不透明', opaqueNav);
+  check('导航栏不再参与模糊', navNoBlur);
+  check('内容面板更通透（--bg-glass ≤ 0.55）', glass <= 0.55, `实际 ${glass}`);
+  check('外壳留缝（浮动面板布局）',
+    /html\[data-bg='on'\] \.app-shell \{[\s\S]{0,80}padding: var\(--pane-gap\)/.test(css));
+  check('顶层面板圆角化',
+    /html\[data-bg='on'\] \.app-shell > \* \{[\s\S]{0,140}border-radius: var\(--radius-card\)/.test(css));
+
 console.log(`\n背景：${pass} 通过${fail ? `，${fail} 失败` : ''}`);
 process.exit(fail ? 1 : 0);