feat(webui): 真正动可见层的现代化 —— 字号、层次、间距、分隔线

# 起因：上一轮的「现代化」基本不算现代化

用户指出「我说的是 webui 现代化」。回看上一轮，我交付的其实是**底层改进**：
圆角加大一档、自定义滚动条、焦点环、过渡、reduce-motion、令牌与可访问性。
这些都对，但**可见变化几乎只有圆角** —— 界面看起来还是老样子。

实测数据确认了「老」在哪：

  text-xs(12px)  172 处   ← 被当正文用
  text-[10px]     84 处
  text-[11px]     68 处
  text-[9px]      19 处   ← 现代显示器上基本读不了
  text-sm(14px)   69 处
  text-base(16px)  4 处

  57 处 border-b + 21 处 border-r，其中 67 条是 border-gray-200 的硬灰线

  阴影：全站共 10 处，且全是 Tailwind 系统默认档；
        index.css 里 --shadow-1/2/3 三个语义令牌**定义了但零处使用**

所以真正的病因是三条：**字太小、层次为零、硬线切分**。

# 改动

## 1. 字号体系抬一档（tailwind.config.js）

不用 Tailwind 默认档，重定为：

  3xs 11px（角标下限，取代 9/10px 魔法数字）
  2xs 12px（元信息，取代 11px）
  xs  13px（次要正文，原 12px —— 拿它当正文的地方自动变舒适）
  sm  14px（正文）
  base 15px

并把 171 处裸 px 类名（text-[9px]/[10px]/[11px]）统一换成令牌 ——
顺带消除魔法数字。行高一起给：小档位 1.35/1.45，正文 1.55，
只放大字号不放行高会把密排列表顶得很难看。

## 2. 把层次接出来（原本是死代码）

tailwind.config.js 新增 boxShadow 映射 `--shadow-1/2/3` + 新增
`--shadow-panel`（横向偏移 + 大扩散，竖向几乎不偏移，否则全高面板像浮在半空）。

用于：列表面板（lg:shadow-panel，**同时去掉 border-r 硬线**）、
登录/初始化卡片（shadow-sm → shadow-2 + 去硬边框）、
地址自动补全下拉（shadow-lg → shadow-2）、窄屏滑入详情面板
（shadow-2xl → shadow-3 + 去 border-l）、主题分段控件的选中滑块。

深色下层次比浅色更难感知，所以 --shadow-panel 在深色里更实一些；
深色里靠边框分组几乎看不见，层次是**唯一**有效的分组手段。

## 3. 分隔线软化（改令牌而不是改 67 处类名）

`--c-gray-200` 浅色 229 231 235 → 234 236 241，深色 44 49 59 → 39 43 52。
改在令牌上，67 条边框 + 8 处底色一次性生效且不会漏。

**刻意没有一起调 gray-300**：它同时是滚动条滑块色，调淡会让滑块更难看见。

## 4. 配比放宽（列表行的呼吸感）

MailList：行内距 px-3 py-2.5 → px-3.5 py-3，列表 gap space-y-0.5 → space-y-1，
表头 py-3 → py-3.5。未读主题字重 medium → semibold，已读 gray-500 → gray-600。

## 5. 量出来的两个真实对比度缺陷（不是估算）

新增 `test/manual/modernization-verify.mjs`，用真实渲染做四条判据。
它量出浅色下两个 WCAG AA 不达标（阈值 4.5:1）：

  - 会话别名 `text-blue-500` 白底 3.68:1（别名在 mail list / thread / mailview
    共 4 处，都是 11px 小字）→ 改 blue-600/700，达 5.17:1
  - 时间戳 `text-gray-400` 压在选中行淡蓝底 `bg-blue-50` 上 4.44:1

第二个的**根因是调色板缺一档**：浅色下 `--c-gray-400` 与 `--c-gray-500`
完全相同（都是 107 114 128），于是「比次要文字再深一档的中间色」根本不存在，
时间戳无处可退。拉开 gray-500 → 90 98 112（5.65:1），并把 5 个列表组件的
行内元信息（19 处）从 gray-400 提到 gray-500。

# 验证

- typecheck 干净
- 前端全量 `npm test` EXIT=0（markdown-xss / narrow-layout / theme 30 /
  background 15 / vitest 216）
- **真实渲染** `modernization-verify.mjs`：浅色 8/8、深色 8/8，判据含
  最小字号 ≥ 11px（改造前 9px）、邮件正文 ≥ 14px、列表面板真有 box-shadow、
  gray-200 是软化值、40 处正文对比度全部达标

# 我自己的三处错（都被这次的度量拦下）

1. **判据量错对象**：第一版拿「收件箱列表」要求 40% 元素 ≥13px，量出 39.7%
   判失败 —— 而收件箱本质是元信息密集区，发件人/时间/别名本来就该小。
   改成量真正该达标的**邮件正文**（≥14px）。
2. **探针忽略 alpha**：`parseRgb` 把 `rgba(239,246,255,0.4)` 的 alpha 丢掉当实色，
   于是把淡蓝底当纯蓝算出 4.44:1 的假缺陷。改为按画家算法合成整条背景链。
3. **config 注释换算写错**：3xs 注释写 10px，0.6875rem 其实是 11px。

client/electron/src/components/MailView.tsx

@@ -175,7 +175,7 @@ function PermissionEditor() {
             setEditing(false);
           }}
           title={o.desc}
-          className={`px-1.5 py-0.5 rounded text-[10px] font-medium border transition-colors disabled:opacity-40 ${
+          className={`px-1.5 py-0.5 rounded text-3xs font-medium border transition-colors disabled:opacity-40 ${
             mode === o.value
               ? 'border-blue-500 bg-blue-50 text-blue-700'
               : 'border-gray-200 text-gray-500 hover:bg-gray-50'
@@ -184,7 +184,7 @@ function PermissionEditor() {
           {o.label}
         </button>
       ))}
-      <button onClick={() => setEditing(false)} className="text-[10px] text-gray-400 hover:text-gray-700 ml-0.5">
+      <button onClick={() => setEditing(false)} className="text-3xs text-gray-400 hover:text-gray-700 ml-0.5">
         ×
       </button>
     </div>
@@ -226,7 +226,7 @@ function BudgetEditor() {
       <button
         onClick={open}
         title="本任务的往返预算：Agent 主动发信的次数上限（自动转发的总结与权限询问不占用）"
-        className={`inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded border transition-colors ${
+        className={`inline-flex items-center gap-1 text-2xs px-2 py-0.5 rounded border transition-colors ${
           exhausted
             ? 'border-red-200 bg-red-50 text-red-700'
             : 'border-gray-200 text-gray-500 hover:border-blue-300 hover:text-blue-600'
@@ -244,7 +244,7 @@ function BudgetEditor() {
 
   return (
     <div className="flex items-center gap-1.5">
-      <span className="text-[11px] text-gray-500">往返预算</span>
+      <span className="text-2xs text-gray-500">往返预算</span>
       <input
         value={draft}
         onChange={e => setDraft(e.target.value)}
@@ -258,7 +258,7 @@ function BudgetEditor() {
       <button
         disabled={busy || invalid}
         onClick={() => commit({ max_rounds: draft.trim() === '' ? 0 : Number(draft.trim()) })}
-        className="text-[11px] px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40"
+        className="text-2xs px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40"
       >
         保存
       </button>
@@ -266,13 +266,13 @@ function BudgetEditor() {
         disabled={busy || budget.used_rounds === 0}
         onClick={() => commit({ reset: true })}
         title="已用次数归零，上限不变"
-        className="text-[11px] text-gray-500 hover:text-gray-900 disabled:opacity-30"
+        className="text-2xs text-gray-500 hover:text-gray-900 disabled:opacity-30"
       >
         重置
       </button>
       <button
         onClick={() => setEditing(false)}
-        className="text-[11px] text-gray-400 hover:text-gray-700"
+        className="text-2xs text-gray-400 hover:text-gray-700"
       >
         取消
       </button>
@@ -308,9 +308,9 @@ function RenameProposalBar() {
             <span className="font-mono font-semibold">.{proposal.alias}</span>
           </p>
           {proposal.reason && (
-            <p className="text-[11px] text-blue-700 mt-0.5">{proposal.reason}</p>
+            <p className="text-2xs text-blue-700 mt-0.5">{proposal.reason}</p>
           )}
-          <p className="text-[10px] text-blue-500 mt-0.5">
+          <p className="text-3xs text-blue-700 mt-0.5">
             改名后需用 name@path.{proposal.alias} 寻址；旧别名立即失效。
             接受后此别名不再被 Agent 平台的自动命名覆盖
           </p>
@@ -376,13 +376,13 @@ function ForwardBar({ mail, onClose }: { mail: Mail; onClose: () => void }) {
     <div className="shrink-0 max-h-[min(65vh,calc(var(--app-height)-3rem))] overflow-y-auto overscroll-contain border-t border-gray-200 bg-white px-4 md:px-6 py-3 space-y-2">
       <div className="flex items-center gap-2">
         <ForwardIcon className="w-3.5 h-3.5 text-gray-500" />
-        <span className="text-[11px] font-medium text-gray-600">
+        <span className="text-2xs font-medium text-gray-600">
           转发「{mail.subject}」
         </span>
         <div className="flex-1" />
         <button
           onClick={() => setCcOpen(o => !o)}
-          className={`tap text-[10px] ${ccOpen ? 'text-blue-600' : 'text-gray-500 hover:text-blue-600'}`}
+          className={`tap text-3xs ${ccOpen ? 'text-blue-600' : 'text-gray-500 hover:text-blue-600'}`}
         >
           {ccOpen ? '收起抄送' : '抄送'}
         </button>
@@ -468,19 +468,19 @@ function Header({
         <BackButton />
         <h2 className="text-sm font-semibold text-gray-900 min-w-0 break-words">{mail.subject}</h2>
         {mail.status === 'unread' && (
-          <span className="px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 text-[10px] font-medium">
+          <span className="px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 text-3xs font-medium">
             未读
           </span>
         )}
         {mail.mail_type === 'permission_request' && (
-          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-orange-100 text-orange-700 text-[10px] font-medium">
+          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-orange-100 text-orange-700 text-3xs font-medium">
             <ShieldIcon className="w-3 h-3" />
             权限请求
           </span>
         )}
         <div className="flex-1" />
         {mail.status === 'unread' && (
-          <button onClick={onRead} className="tap text-xs text-blue-500 hover:underline">
+          <button onClick={onRead} className="tap text-xs text-blue-600 hover:underline">
             标记已读
           </button>
         )}
@@ -553,20 +553,20 @@ function ThreadCard({ mail, onForward }: { mail: Mail; onForward?: () => void })
             都渲染成 human 就分不清谁说的话 */}
         <span className="font-semibold text-gray-800 font-mono">{mail.from_name}</span>
         {isPermission && (
-          <span className="px-1 py-0.5 rounded bg-orange-200 text-orange-800 text-[9px] font-medium">
+          <span className="px-1 py-0.5 rounded bg-orange-200 text-orange-800 text-3xs font-medium">
             权限请求
           </span>
         )}
         {mail.cc_list?.length > 0 && (
           <span
-            className="text-[10px] text-gray-400"
+            className="text-3xs text-gray-400"
             title={mail.cc_list.map(c => c.raw || `${c.name}@${c.path || ''}`).join(', ')}
           >
             抄送 {mail.cc_list.length}
           </span>
         )}
         <div className="flex-1" />
-        <span className="text-[10px] text-gray-400">{time}</span>
+        <span className="text-3xs text-gray-400">{time}</span>
         {onForward && (
           <button
             onClick={onForward}
@@ -628,7 +628,7 @@ export function PermissionPanel({ mail }: { mail: Mail }) {
    */
   const staleBanner =
     staleWarning || expiredBeforeDecide ? (
-      <p className="mt-2 text-[11px] leading-relaxed text-amber-800 bg-amber-50 border border-amber-200 rounded-md px-2.5 py-1.5">
+      <p className="mt-2 text-2xs leading-relaxed text-amber-800 bg-amber-50 border border-amber-200 rounded-md px-2.5 py-1.5">
         {staleWarning ||
           '已超过等待窗口，发起它的 Agent 很可能已不再阻塞等待。现在批准不会恢复当时那次工具调用 —— 决策会作为一条通知投给它，让它重起一轮。'}
       </p>
@@ -678,7 +678,7 @@ export function PermissionPanel({ mail }: { mail: Mail }) {
     return (
       <div className="mt-3 pt-3 border-t border-orange-200">
         {staleBanner}
-        <div className="text-[11px] text-gray-500 mb-2">
+        <div className="text-2xs text-gray-500 mb-2">
           {options.length === 0
             ? '这题没有预设选项，请直接填写回答：'
             : multi ? '可多选，也可补充说明：' : '请选择一项，也可补充说明：'}
@@ -725,7 +725,7 @@ export function PermissionPanel({ mail }: { mail: Mail }) {
             提交回答
           </button>
           {blank && (
-            <span className="text-[11px] text-gray-400">请先选择或填写回答</span>
+            <span className="text-2xs text-gray-400">请先选择或填写回答</span>
           )}
         </div>
       </div>
@@ -852,19 +852,19 @@ function ReplyBar({
   return (
     <div className="shrink-0 max-h-[min(65vh,calc(var(--app-height)-3rem))] overflow-y-auto overscroll-contain border-t border-gray-200 bg-white px-4 md:px-6 py-3">
       <div className="flex items-center gap-2 mb-1 flex-wrap">
-        <p className="text-[10px] text-gray-400 font-mono min-w-0 truncate">回复 {target}</p>
+        <p className="text-3xs text-gray-400 font-mono min-w-0 truncate">回复 {target}</p>
         <div className="flex-1" />
         {(replyTo.cc_list?.length ?? 0) > 0 && (
           <button
             onClick={replyAll}
-            className="tap text-[10px] text-gray-500 hover:text-blue-600"
+            className="tap text-3xs text-gray-500 hover:text-blue-600"
           >
             回复全部
           </button>
         )}
         <button
           onClick={() => setCcOpen(o => !o)}
-          className={`tap text-[10px] ${ccOpen ? 'text-blue-600' : 'text-gray-500 hover:text-blue-600'}`}
+          className={`tap text-3xs ${ccOpen ? 'text-blue-600' : 'text-gray-500 hover:text-blue-600'}`}
         >
           {ccOpen ? '收起抄送' : '抄送'}
         </button>
@@ -898,7 +898,7 @@ function ReplyBar({
               setBudgetEditing(true);
             }}
             title="本任务往返预算：Agent 主动发信上限（自动转发与权限询问不占）"
-            className={`tap inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded border ${
+            className={`tap inline-flex items-center gap-1 text-3xs px-2 py-1 rounded border ${
               budget.unlimited
                 ? 'border-gray-200 text-gray-500 hover:border-blue-300'
                 : budget.remaining === 0
@@ -914,7 +914,7 @@ function ReplyBar({
         )}
         {budget && budgetEditing && (
           <span className="inline-flex items-center gap-1">
-            <span className="text-[10px] text-gray-500">预算</span>
+            <span className="text-3xs text-gray-500">预算</span>
             <input
               value={maxRoundsDraft}
               onChange={e => setMaxRoundsDraft(e.target.value)}
@@ -931,13 +931,13 @@ function ReplyBar({
                 setBudgetBusy(false);
                 setBudgetEditing(false);
               }}
-              className="tap px-2 py-0.5 text-[10px] rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40"
+              className="tap px-2 py-0.5 text-3xs rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40"
             >
               保存
             </button>
             <button
               onClick={() => setBudgetEditing(false)}
-              className="tap text-[10px] text-gray-400 hover:text-gray-700"
+              className="tap text-3xs text-gray-400 hover:text-gray-700"
             >
               ×
             </button>
@@ -972,5 +972,5 @@ function StatusBadge({ status }: { status: string }) {
     archived: { label: '已归档', cls: 'bg-gray-200 text-gray-600' }
   };
   const b = map[status] || map.active;
-  return <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${b.cls}`}>{b.label}</span>;
+  return <span className={`text-3xs px-1.5 py-0.5 rounded-full ${b.cls}`}>{b.label}</span>;
 }