fix(webui): 顶部改气泡式 —— 列表头与详情头从"通栏 + 下边框"改成浮动玻璃卡

用户：「同时顶部为什么不是气泡式的而是栏目式的」。

原因很直接：这两处写的是**通栏**（`px-4 py-3.5 border-b border-gray-200`）——
铺满面板宽度、靠一条下边框划分，就是"栏目/工具条"的语言；而列表项刚改成
"每项一张卡"之后，顶部还留着通栏，风格自然对不上。

- 列表顶部（标题 + 账号切换 + 计数）：`glass-card mx-2.5 mt-2.5 px-3.5 py-2.5`
- 详情顶部（发件人/主题/时间那条）：同样改成 `glass-card` 气泡

实测（自有浏览器，壁纸开）：圆角 **14px**、底色 `rgba(255,255,255,0.78)`、
在 320px 宽的面板里 left=90/top=65 ⇒ **四周有 10px 内缩**（真的浮起来，不是通栏）。

## 一个我没动的地方（需要你确认）

「通信」的内部页签（收件箱 / 发件箱 / 授权）现在是**下划线式**，不是气泡式。
我特意没动它：更早一轮你给过相反的意见 —— 那时它是"白色胶囊 + 阴影"浮在面板上，
你说「二级页面与其他位置极其割裂」，我才改成下划线。

如果你现在要的是**气泡式的分段控件**（半透明玻璃胶囊 —— 比当年那版少了阴影、
且底色走玻璃令牌，不会再有"白底压白底"的割裂感），说一声我就换；
或者你指的就是刚改的这两处，那这条就算完成。

client/electron/src/components/MailList.tsx

@@ -71,7 +71,7 @@ export default function MailList() {
 
   return (
     <div className="w-full lg:w-[320px] shrink-0 lg:shadow-panel bg-white flex flex-col min-w-0">
-      <div className="px-4 py-3.5 border-b border-gray-200 flex items-center gap-1">
+      <div className="glass-card mx-2.5 mt-2.5 px-3.5 py-2.5 flex items-center gap-1">
         <h2 className="text-sm font-semibold text-gray-800">{isSent ? '发件箱' : '收件箱'}</h2>
         <AccountSwitcher />
         {/* 显示「会话数 · 邮件数」而不是只显示邮件数：分组之后前者才是

client/electron/src/components/MailView.tsx

@@ -586,7 +586,7 @@ function CollapsibleHeader({
   useEffect(() => setOpen(!narrow), [narrow]);
 
   return (
-    <div className="shrink-0 px-4 md:px-6 py-2 md:py-3.5 border-b border-gray-200 bg-white">
+    <div className="glass-card shrink-0 mx-2.5 mt-2.5 px-3.5 md:px-4 py-2.5 md:py-3">
       <div className="flex items-center gap-2">
         {lead}
         <button