diff --git a/.workbuddy/memory/CHANGELOG.md b/.workbuddy/memory/CHANGELOG.md
index 4457d74..394b376 100644
--- a/.workbuddy/memory/CHANGELOG.md
+++ b/.workbuddy/memory/CHANGELOG.md
@@ -1,6 +1,12 @@
 # tool.xpcool.com 变更记录
 > 倒序：最新在上。格式：YYYY-MM-DD | 类型 | 摘要
 
+2026-09-14 | FIX | 修复主题失效的头号坑：TDesign 浅/深色变量声明在 :root[theme-mode='light'|'dark']（权重 0,2,0），我们此前用 html[theme-mode='dark']（0,1,1），生产构建下被 UI 库深色变量反向覆盖（卡片退回 #242424、输入框描边退回 #ddd）。tokens.scss 与 tdesign-theme.scss 全部改用 :root[theme-mode=...]；另记录验证方法：切主题后 getComputedStyle(body).backgroundColor 可能命中计算值缓存，需用探针元素或刷新后再读
+
+2026-09-14 | CHG | 界面改版第二版「清晰蓝 · 卡片工作台」（解决「字体/下拉/控件太小」+ 补上 UI 库主题控制）：① tokens.scss：主色青玉 #0c7c59 → 宝石蓝 #2563eb、中性色调改蓝灰（浅 f4f6fb/fff/0f1729，深 0b0f18/131926/e9eef8）、圆角放大一档（xs5/sm7/md10/lg12/xl16/2xl22）、字号整体上移一档（正文 14→16px、最小 13px、标题阶梯同步）、密度收敛（space-9 80→68、版心 1120→1200、顶栏 64→68、侧栏 248→268）、卡片由「无框发丝线」改回「白底 + 细描边」；② tdesign-theme.scss：品牌/中性/语义色阶换蓝体系 + 深色反向中性色阶，新增「UI 库尺度控制」段（--td-comp-size-m 32→40 即默认输入框/按钮/下拉高度、xl 40→48、xs/xxs/xxxs 24/20/16→28/24/18、--td-font-size-body-medium 14→16px、body-small 12→13px、title 14/16/18→16/18/20px、行高成对放宽、paddingTB/LR 放宽一档），控件尺度只改变量不再写死高度；③ 27 个 .vue 里残留的 11/12px 硬编码字号提升为 var(--tk-text-xs)；④ 外壳与组件跟随：MainLayout（顶栏 68、命令入口 44、内容留白 32/48/72、抽屉 300）、SideNav（筛选框 42、导航项 padding 9/12、图标 19）、HomeView（hero 52、搜索底线 60、索引行 20、服务端卡片 38px 图标）、CommandPalette（搜索行 64、结果项 58、kbd 22）、UploadDrop（缩略图 56、删除热区 36）、AppBrand 36、ThemeSwitch/LocaleSwitch 40、HistoryPanel 条目 48；⑤ index.html 的 theme-color 与 unocss 的 panel/code-block/hint-text 同步。构建通过（vue-tsc + vite，22.86s）
+
+2026-09-14 | CHG | 界面改版为「更松弛的编辑感」（design-taste-frontend 技能，DESIGN_VARIANCE 6 / MOTION 3 / DENSITY 3）：① tokens.scss 新增发丝线 --tk-hairline、排版令牌（--tk-leading-*/-track-*、--tk-text-5xl、--tk-font-display、--tk-space-9=80px）、顶栏高 60→64，并移除未用的 --tk-track-caps；② 全局排版：page-title 改 clamp(26,3vw,34)+640 字重、page-desc 15px/1.75、tool-section 间距 16→32、滚动条 10→8px、reveal 位移 14→10px；③ 容器去框化：t-card / UnoCSS panel 改 2xl 圆角 + hairline 描边 + 大内边距（.t-card .t-card__body 24/32，窄屏收回），品牌图标去掉全站唯一渐变改实色方块；④ 首页重写：删掉 eyebrow 与重复的 hero 链接，标题 58px 左对齐 + 底线式搜索框（聚焦加粗为 2px），事实条去边框，58 个工具改为「发丝线索引行」（图标常态中性灰、hover 才上主色）；⑤ 外壳：侧栏去底色与右侧竖线（hover 改用 --tk-surface 统一「抬起」方向）、筛选框改底线式、内容区留白 28→40/48/88、页脚改左右分列 + hairline；⑥ HistoryPanel 改用 --tk-* 令牌与发丝线分行（此前有硬编码 --td-* 与 6px 圆角）；⑦ 清理 4 份语言包中已失效的 home.eyebrow/ctaPrimary/ctaSecondary。构建通过（vue-tsc + vite，32.17s）
+
 2026-09-14 | CHG | 视觉重设计 + 中英日韩四语言 + 三态昼夜主题 + 服务端接口对接（一大批）：① 新增 tokens.scss（--tk-* 设计令牌：青玉 Jade 单一强调色、圆角/间距/字号/z-index/动效规范、按语言切换字体栈）+ tdesign-theme.scss（--tk-* → --td-* 桥接，含完整冷调灰阶），60+ 未改动工具页零成本继承新配色；② vue-i18n 11.4.10 + zh-CN/en-US/ja-JP/ko-KR 四份完整语言包 + helpers 中文兜底；③ MainLayout/SideNav/HomeView 重写、新增 CommandPalette（⌘K）/LocaleSwitch（显示 ZH/EN/JA/KO 不用国旗）/ThemeSwitch（三态）；④ 新增 openTools.ts 对接 service.xpcool.com /api/service/open/tools 的 5 个接口（实测全 200），改造 ip-info/uuid/hash/timestamp 并新增 random-string/api-status 两工具（均本机+服务端双模式，默认本机）；⑤ 修复空分类渲染缺陷（分类 9→6）、panel 快捷类缺内边距、IpInfoView 漏 onBeforeUnmount；⑥ 新增 src/config.ts 集中站点常量，页脚补备案号 黔ICP备2026003933号；⑦ 重写 docs/api-contract.md（旧契约 /api/tools/* 与实际不符）。构建通过（vue-tsc + vite，33.88s）
 
 2026-09-01 | CHG | 全站接入图片预览（TDesign ImageViewer）：新增共享 AppImageViewer 组件 + useImageViewer 组合式函数；接入 9 处——UploadDrop 缩略图、Base64 还原图、图片裁剪结果、图片转 ICO 预览（多尺寸成组）、OCR 待识别图、二维码结果、图片压缩（原直连 t-image-viewer 重构为共享组件）、代码转图片画布、占位图画布；全局样式新增 .img-previewable
diff --git a/agents.md b/agents.md
index ddb5300..bf6eaff 100644
--- a/agents.md
+++ b/agents.md
@@ -77,11 +77,19 @@ export interface ToolItem {
 - 文本类工具：`text` 存输入原文，点击历史回填输入框。
 - 文件类工具（图片压缩/裁剪等）：文件本体**不要**存入 localStorage（会撑爆配额），改为存「文件名 | 关键参数」形式的摘要，点击历史只恢复参数。
 
-### 3.3 主题机制
+### 3.3 主题机制（色彩 + UI 库尺度两套变量）
 
 - TDesign 通过 `document.documentElement.setAttribute('theme-mode', 'dark')` 切换暗黑模式。
 - `stores/theme.ts` 负责切换 + 持久化（key：`tool-theme`）；`index.html` 内联脚本在挂载前预置属性防闪烁；`main.ts` 再同步一次。
-- **自定义样式一律使用 `var(--td-*)` 令牌**（如 `--td-bg-color-page`、`--td-text-color-primary`、`--td-brand-color`），禁止硬编码颜色，否则暗黑模式会破版。
+- **两套变量各管一段**：
+  - `src/assets/styles/tokens.scss` 定义 `--tk-*`（配色 / 圆角 / 间距 / **字号** / 动效），是全站唯一真相源；
+  - `src/assets/styles/tdesign-theme.scss` 把 `--tk-*` 映射为 `--td-*`，并**额外接管 UI 库自身的尺度**：
+    `--td-comp-size-*`（控件高度，默认控件 40px）、`--td-comp-paddingTB/LR-*`、`--td-font-size-*`、
+    `--td-line-height-*`。放大按钮 / 输入框 / 下拉请改这里，**不要给单个组件写死 height**。
+- **自定义样式一律使用 `var(--tk-*)`（或 `var(--td-*)`）令牌**，禁止硬编码颜色与字号，否则暗黑模式会破版。
+- **头号坑**：主题变量必须声明在 `:root[theme-mode='light'|'dark']` 里，**不能写 `html[theme-mode='dark']`** ——
+  TDesign 自己用的是前者（权重 0,2,0 且后加载者胜），写成后者（0,1,1）会被 UI 库的深色变量盖掉，
+  表现为「深色下组件退回 UI 库自带灰（卡片 #242424、描边 #ddd）」。
 
 ### 3.4 公共组件
 
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index aee8bad..e2988b5 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -5,6 +5,115 @@
 
 ---
 
+## 2026-09-14 第八批：修「字太小」+ 换风格为「清晰蓝 · 卡片工作台」+ 补上 UI 库主题控制
+
+> 用户反馈：① 界面字体、下拉与功能控件都太小；② 再换一种风格；③ UI 库（TDesign）的主题此前没有真正接上，
+> 需要用主题变量控制组件的色彩与风格。
+> 三者一并处理：换主色与密度（风格）→ 放大令牌与控件（太小）→ 用 `--td-comp-*` / `--td-font-*` 接管 TDesign 尺度（主题控制）。
+> 构建通过（`vue-tsc --noEmit` + `vite build`，22.86s）。
+
+### ⚠️ 本轮挖出的头号坑：`theme-mode` 选择器权重
+TDesign 的浅/深色变量声明在 `:root[theme-mode='light'|'dark']`（权重 0,2,0），
+而上一版我们写的是 `html[theme-mode='dark']`（0,1,1）—— 生产构建里即便我们的 CSS 排在 vendor CSS 之后，
+**仍会被 UI 库的深色变量盖掉**。表现：深色下卡片/输入框用回 TDesign 自带灰（卡片 `#242424`、描边 `#ddd`）。
+**修复：tokens.scss 与 tdesign-theme.scss 全部改用 `:root[theme-mode=...]`（与 TDesign 同级权重 + 后加载者胜）。**
+（验证提醒：切完主题别只看 `getComputedStyle(body).backgroundColor`，它可能命中计算值缓存，需用探针元素或刷新后再读。）
+
+### 🎨 风格：青玉编辑感 → 宝石蓝 · 卡片工作台
+- 主色：青玉 `#0c7c59` → 宝石蓝 `#2563eb`（与白底 5.17:1 过 AA；深色下按钮底同色 + 白字，链接另用 `#7aa8ff`）。
+- 中性色：青灰 → 蓝灰（浅 `#f4f6fb / #ffffff / #0f1729`，深 `#0b0f18 / #131926 / #e9eef8`）；
+  品牌/中性/语义三级色板与 `index.html` 的 `theme-color` 同步更新。
+- 形状：圆角整体放大一档（xs5 / sm7 / md10 / lg12 / xl16 / 2xl22）；
+  卡片由「无框发丝线」改回「白底 + 细描边」，重新有边界感（仅列表条目分隔线仍用 `--tk-hairline`）。
+- 密度：`--tk-space-9` 80→68、版心 1120→1200、顶栏 64→68、侧栏 248→268。
+
+### 🔠 字号整体放大一档（tokens.scss）
+- 旧 → 新：`12→13 / 13→14 / 14→16 / 15→17 / 17→19 / 20→22 / 26→28 / 34→36 / 44→46 / 58→52`。
+- **正文基准 16px**，全站最小字号 13px（`--tk-text-xs`）。
+- **工具页里残留的 11px/12px 硬编码字号一次性提升为 `var(--tk-text-xs)`**（27 个 `.vue` 文件）。
+
+### 🧩 UI 库主题控制（tdesign-theme.scss 新增第 ③ 段，本轮核心）
+TDesign 组件样式完全建立在 `--td-*` 变量之上（例如 `.t-input.t-size-l { height: var(--td-comp-size-xl) }`），
+所以「控件太小」的正解是改变量，而不是逐个组件写 CSS：
+
+| 变量分组 | TDesign 默认 | 本版 | 影响面 |
+| --- | --- | --- | --- |
+| `--td-comp-size-m`（默认控件） | 32px | **40px** | 输入框 / 按钮 / 下拉 / 日期选择器 |
+| `--td-comp-size-xl`（large） | 40px | 48px | large 尺寸控件 |
+| `--td-comp-size-xs / xxs / xxxs` | 24 / 20 / 16px | 28 / 24 / 18px | 小按钮、标签、复选框 |
+| `--td-font-size-body-medium` | 14px | **16px** | 控件文字（与正文同号） |
+| `--td-font-size-body-small` | 12px | 13px | 小标签、说明 |
+| `--td-font-size-title-*` | 14/16/18px | 16/18/20px | 卡片标题、分组标题 |
+| `--td-line-height-body-*` | 20/22/24px | 22/24/26px | **必须与字号成对改**，否则大字号被行高挤住 |
+| `--td-comp-paddingTB / LR-*` | size 阶梯 | 放宽一档 | 控件内边距，避免大控件里文字贴边 |
+
+- 只覆盖 `--td-comp-*`，**不动 `--td-size-*` 原子刻度**（图标/徽标/间距都在用它）。
+- 深色中性色阶（反向，1 最深 → 14 最浅）补进 `:root[theme-mode='dark']`，避免组件在深色下退回 UI 库冷灰。
+- 下拉：`--td-comp-size-m` 放大后 `.t-select-option` / `.t-dropdown__item` 行高自动跟随，仅补一条字号保险。
+
+### 🧱 外壳、首页与公共组件（跟随新尺度）
+- `MainLayout`：顶栏 68px、命令面板入口 44px、图标按钮 40px、内容区留白 32/48/72、移动端抽屉宽 300。
+- `SideNav`：筛选框 42px、导航项 padding 9/12（行高约 43px）、图标 19px、活动指示条 3×18px。
+- `HomeView`：hero 标题 52px、搜索底线 60px、工具索引行 padding 20px、服务端卡片图标 38px + 轻投影。
+- 公共组件：`CommandPalette`（搜索行 64px、结果项 58px、kbd 22px）、`UploadDrop`（拖拽区加大、
+  缩略图 56px、删除按钮热区 36px）、`AppBrand`（标记 36px）、`ThemeSwitch` / `LocaleSwitch`（40px 高）、
+  `HistoryPanel`（条目最小高 48px、操作按钮热区撑大）。
+- `unocss.config.ts` 的 `panel`（改实描边 + 更大内边距）、`code-block`（14px）、`hint-text`（13px）跟随放大。
+
+---
+
+## 2026-09-14 第七批：界面改版 →「更松弛的编辑感」
+
+> 用户反馈对现有主题界面仍不满意，经方向选择后定为**编辑感（Editorial）**：
+> 加大留白与字号反差，卡片几乎无边框，靠排版与呼吸感建立层次。
+> 依据 `design-taste-frontend` 技能执行，旋钮 `DESIGN_VARIANCE 6` / `MOTION_INTENSITY 3` / `VISUAL_DENSITY 3`。
+> 构建通过（`vue-tsc --noEmit` + `vite build`，32.17s）。
+
+### 🎯 本轮解决的三个真实问题
+1. **首页 hero 超标**：eyebrow + 标题 + 描述 + 搜索框 + 文字链接共 5 个文字元素（超过 hero 上限 4），
+   且 eyebrow 是模板化开场 → **删掉 eyebrow 与重复的 hero 链接**（服务端专区入口已在下方，同意图不出现两次）。
+2. **58 张卡片长得一模一样**：全部 14px 圆角 + 1px 描边 + 绿底图标，重复得没有节奏
+   → 改为**发丝线索引行**（像书末索引），图标常态中性灰、hover 才上主色。
+3. **层次全靠边框与底纹堆出来**，排版本身承担的信息层级偏弱
+   → 标题 58px / 说明 17px 拉开反差，分区之间改用 80px 留白而非横线。
+
+### 🧱 令牌层（tokens.scss）
+- 新增 `--tk-hairline`（浅 `#e7ecea` / 深 `#232b29`）：内容容器与条目分隔线用它；
+  **功能控件仍用 `--tk-border`**，两类不要互换。
+- 新增排版令牌：`--tk-text-5xl`(58px)、`--tk-leading-display/title/body`、
+  `--tk-track-display/title`、`--tk-font-display`。其中展示字体显式等于系统字体族 ——
+  中文环境下可用的展示字体就是系统字体本身，引入网络 CJK 展示字体要多付 2MB+ 首屏成本。
+- `--tk-space-9`(80px) 专用于分区之间；`--tk-header-h` 60 → 64。
+- 移除未使用的 `--tk-track-caps`（不在 CJK 场景下用宽字距）。
+
+### 📐 全局排版与容器（index.scss / unocss.config.ts / tdesign-theme.scss）
+- `.page-title` → `clamp(26px, 3vw, 34px)` + 字重 640；`.page-desc` → 15px / 1.75 / `max-width: 62ch`；
+  `.tool-section` 间距 16 → 32px；新增 `.section-heading` 与 `.rule`。
+- `t-card` / UnoCSS `panel`：**圆角 → 2xl、描边 → 发丝线、内边距放大一档**（`p-5 md:p-7`、
+  `.t-card .t-card__body` 24/32，窄屏在 `@media (max-width: 767px)` 收回）。
+- 滚动条 10 → 8px；`.reveal` 位移 14 → 10px（编辑感入场要「不动声色」）。
+
+### 🏠 首页重写（HomeView.vue）
+- 抬头区：58px 左对齐标题 + 一句说明 + **底线式搜索框**（聚焦时底线加粗为 2px，
+  用 `box-shadow` 叠加避免 `border-width` 变化引起 1px 位移；输入框自身不画焦点环）。
+- 事实条去掉全部边框与底纹，数字直接摊在纸面上。
+- 服务端专区保留青玉底纹（全站唯一），是分区层级的锚点。
+- 分类目录 = 标题 + 数量注记 + 说明 + 发丝线索引网格（列间距 52px，避免两栏读串行）。
+
+### 🧭 外壳（MainLayout / SideNav / AppBrand）
+- 侧栏**去掉底色块与右侧竖线**，与正文落在同一张纸面上；hover 改用 `--tk-surface`
+  （浅色下更亮、深色下也更亮，两种主题都是同一种「抬起」方向）。
+- 侧栏筛选框改为底线式；内容区留白 28/28/56 → **40/48/88**；页脚改左右分列 + 发丝线。
+- 品牌图标**去掉全站唯一渐变**，改实色小方块（渐变会把视线从标题上拽走），
+  品牌辨识度改由字重与字距承担。
+
+### ♻️ 顺带修复
+- `HistoryPanel.vue` 此前混用硬编码的 `--td-*` 与写死的 `border-radius: 6px`，
+  违反「样式一律用 `--tk-*`」的硬规则，且每条历史都套一个描边盒子；已改为 `--tk-*` 令牌 + 发丝线分行。
+- 清理 4 份语言包中已失效的 `home.eyebrow` / `home.ctaPrimary` / `home.ctaSecondary`。
+
+---
+
 ## 2026-09-14 第六批：视觉重设计 + 中英日韩四语言 + 昼夜主题 + 服务端接口对接
 
 > 依据 `design-taste-frontend` 技能（BRIEF INFERENCE / 单一强调色 / 形状一致性 / 反 AI-slop 清单）重建全站视觉体系，
diff --git a/docs/PROJECT_STATE.md b/docs/PROJECT_STATE.md
index 098fcc8..9e2eb7d 100644
--- a/docs/PROJECT_STATE.md
+++ b/docs/PROJECT_STATE.md
@@ -49,13 +49,36 @@
 - `ToolItem.needsNetwork` 标记需联网工具（侧栏圆点 + 首页服务端工具专区）。
 - `groupedTools()` / `networkTools()` / `searchTools()` 供首页、服务端专区、命令面板使用。
 
-### 3.2 视觉体系（令牌 → TDesign 桥接）
+### 3.2 视觉体系（令牌 → TDesign 桥接 + UI 库主题控制）
 - **唯一真相源**：`src/assets/styles/tokens.scss` 定义全部 `--tk-*` 令牌（颜色/圆角/间距/字号/z-index/动效/字体栈）。
-- **桥接层**：`src/assets/styles/tdesign-theme.scss` 把 `--tk-*` 映射到 TDesign 的 `--td-*`。
-  **改主题只需改 tokens.scss 一处，60+ 个未改动的工具页会自动继承新配色与圆角** —— 这是低风险全站改造的关键机制。
-- **硬规则**：自定义样式一律引用 `--tk-*`（或 `--td-*`），**禁止硬编码色值/圆角/阴影**，否则昼夜切换会花掉。
-- **形状一致性**：全站只用 tokens 里那一套圆角（xs4/sm6/md8/lg10/xl14/2xl20/pill999）。
-- **单一强调色**：青玉 Jade。全站只允许一处渐变（品牌图标）。
+- **桥接层 + UI 库主题控制**：`src/assets/styles/tdesign-theme.scss` 除了把 `--tk-*` 映射到 `--td-*`，
+  还接管两件「UI 库自身」的事：
+  1. **组件尺度**：`--td-comp-size-*`（控件高度阶梯）、`--td-comp-paddingTB/LR-*`、`--td-font-size-*`、
+     `--td-line-height-*`。**TDesign 的输入框 / 按钮 / 下拉 / 日期选择器高度全部取自这些变量**
+     （例如 `.t-input.t-size-l { height: var(--td-comp-size-xl) }`），所以放大控件只需改这一处，
+     **不要再给单个组件写死高度或字号**。
+  2. **色阶**：品牌 / 中性 / 语义的 10 级色板。注意深色下的中性色阶是**反向**的（1 最深 → 14 最浅），
+     且必须显式覆盖，否则组件会退回 TDesign 自带的冷灰。
+  **改主题 = 改 tokens.scss（配色/字号/圆角/间距）+ tdesign-theme.scss（UI 库尺度与色阶）两处**，
+  60+ 个未改动的工具页自动继承 —— 这是低风险全站改造的关键机制。
+- **硬规则**：自定义样式一律引用 `--tk-*`（或 `--td-*`），**禁止硬编码色值/圆角/阴影/字号**，否则昼夜切换会花掉。
+- **形状一致性**：全站只用 tokens 里那一套圆角（xs5/sm7/md10/lg12/xl16/2xl22/pill999）。
+- **单一强调色**：宝石蓝 `#2563eb`。**全站已无任何渐变**（品牌图标为实色圆角方块）。
+  强调色只出现在需要「指向」的地方：hover 的条目、活动导航项、服务端专区底纹、正文链接。
+- **设计方向（2026-09-14 第二次改版）：清晰蓝 · 卡片工作台**。四条硬规则：
+  1. **字号整体放大一档**：正文 16px 起、说明文字不低于 13px（上一版 12/13/14 的密度在 1080p 屏上偏小）；
+  2. **控件大于内容**：输入框 / 按钮 / 下拉默认 40px 高、16px 文字，可点区域永远比正文更「实」；
+  3. **容器有边界**：卡片用「白底 + 细描边（`--tk-border`）」与页面底（`--tk-bg`）拉开层次，不再追求无框纸面；
+  4. **主色单一**：全站只有一个强调色。
+- **发丝线 `--tk-hairline`**：只用于**列表条目之间的分隔线**（历史列表、首页索引行）；
+  内容容器边界与功能控件（输入框/按钮/下拉）一律用 `--tk-border`。
+- **留白节奏**：分区之间用 `--tk-space-9`（68px）分隔，**不画横线** —— 留白本身就是分隔符。
+  窄屏按断点阶梯式收回（`≤1279px` → `≤1023px` → `≤767px`），不要一档切到底。
+- **排版令牌必须成对使用**：大字号配负字距 + 紧行高（`--tk-track-display/-title` +
+  `--tk-leading-display/-body`），小字号配正字距 + 松行高。混用（大字号配松行高）会让层级立刻垮掉。
+- **首页是目录，不是卡片墙**：58 个工具用「索引行」呈现（发丝线分隔），不做 58 个描边盒子；
+  图标常态中性灰，主色只在 hover 时出现（58 个图标全染主色会把主色的含义稀释掉）；
+  仅「服务端工具专区」用整块底纹 + 卡片与其它分区区分。
 - **动效档位**：克制（上浮淡入 + 颜色过渡），`prefers-reduced-motion` 下全部降为 0ms。
 - `v-reveal` 指令（`src/directives/reveal.ts`）做滚动进入，传数字错峰。
 
@@ -113,6 +136,8 @@
 - **Vue 模板 attribute**：内嵌字符串不能直接写 `\"`（HTML 解析器会把 `"` 当属性结束符导致编译错误），字符串常量移到 `<script>` 定义。
 - **`in` 运算符**：`k in obj` 中 obj 需先断言为 `Record<string, unknown>`，否则 strict 模式 TS2638/TS18048。
 - **构建安全删除保护**：`pnpm build` 清理 dist 会触发沙箱批量删除拦截（>50 文件），先 `mv dist dist.bak-<ts>` 再构建。
+- **备份目录同样删不掉**：`dist.bak-*` 的递归删除也会被 bulk guard 拦（`SAFE_DELETE_BULK_GUARD_ERROR`），
+  因此多次构建会堆积若干 `dist.bak-*`，属正常现象；需要清理时逐个目录删，或交由人手动处理。
 - **大整数**：进制转换等工具禁用 `parseInt/Number`，用 BigInt 逐位解析（现有 radix-convert 已实现）。
 - **pnpm 调用方式**：`corepack` 的 `pnpm` shell wrapper 在 Git Bash 下会把 `/c/...` 误算成 `E:\c\...`
   （报 `Cannot find module 'E:\c\...\corepack\dist\pnpm.js'`）。绕过 wrapper，显式调用：
@@ -123,10 +148,22 @@
 
 ### 6.2 样式与主题
 - **禁止硬编码色值**：一律用 `--tk-*`（自定义样式）或 `--td-*`（TDesign 组件覆盖）。
-- **UnoCSS `panel` 快捷类自带内边距**（`p-5 md:p-6`）。页面 scoped 样式（如 `.block[data-v-*]`）权重更高，
-  需要单独覆盖 padding 时照常写即可。
+- **UnoCSS `panel` 快捷类自带内边距**（`p-5 md:p-7`，编辑感改版后放大一档）且描边为发丝线。
+  页面 scoped 样式（如 `.block[data-v-*]`）权重更高，需要单独覆盖 padding 时照常写即可。
+- **卡片内边距的覆盖写法**：`.t-card .t-card__body`（两个类）比 TDesign 自身的 `.t-card__body` 高一级，
+  能稳定覆盖；只写一个类会被 TDesign 的规则压掉。窄屏需在 `@media (max-width: 767px)` 里收回。
 - **`--td-radius-*` 刻意不跟随主题**（浅深共用），改圆角请改 `tokens.scss` 的 `--tk-radius-*`。
 - **canvas 绘制**：注意主题切换，尽量用令牌色或中性色，不要写死黑白。
+- **头号坑：`theme-mode` 选择器必须写 `:root[theme-mode='dark']`，不能写 `html[theme-mode='dark']`**。
+  TDesign 自己的浅/深色变量声明用的是 `:root[theme-mode=...]`（权重 0,2,0），
+  而 `html[theme-mode=...]` 只有 (0,1,1) —— **生产构建里我们的 CSS 虽然排在 vendor CSS 之后，仍会被 UI 库盖掉**。
+  表现：深色下组件用回 TDesign 自带灰（卡片 `#242424`、描边 `#ddd`），只有少量手写规则生效。
+  新增主题变量时请放进 tokens.scss / tdesign-theme.scss 里那两个 `:root[theme-mode=...]` 块。
+- **验证主题是否真的生效**：切完 `theme-mode` 后**不要**只看 `getComputedStyle(document.body).backgroundColor`，
+  它可能命中浏览器的计算值缓存、读出「上一次主题」的颜色。可靠做法：插入探针元素读
+  （`div.style.backgroundColor = 'var(--tk-bg)'` 后读 computed），或**刷新页面后再读**。
+- **控件尺度统一由 `--td-comp-size-*` 控制**：放大/缩小按钮、输入框、下拉请改 `tdesign-theme.scss` 的尺度段，
+  不要给单个组件写死 `height`（会与 UI 库其它组件脱节）。
 
 ### 6.3 国际化
 - **`html` 的 `lang` 属性写的是完整标签**（`ja-JP` / `ko-KR`），因此 `tokens.scss` 里的字体栈选择器
diff --git a/index.html b/index.html
index 350a515..99bc690 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
       name="description"
       content="纯前端在线工具箱：图片压缩与裁剪、二维码、JSON 格式化、时间戳、Base64、JWT、Cron、进制转换、哈希、身份证解析、OCR 等 56 个实用工具，支持中英日韩四种语言与日间夜间主题，数据全部在浏览器本地处理。"
     />
-    <meta name="theme-color" content="#f6f8f8" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#0c100f" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f4f6fb" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0b0f18" media="(prefers-color-scheme: dark)" />
     <title>在线工具箱 · Tool</title>
     <!--
       防闪烁（FOUC）内联脚本：必须在样式与模块加载之前同步执行。
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index a1dcb9f..ea534cb 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -3,11 +3,14 @@
  * ------------------------------------------------------------
  * 引入顺序很重要：
  *   1. tokens.scss        —— 设计令牌（--tk-*）
- *   2. tdesign-theme.scss —— 令牌 → TDesign 变量（--td-*）
+ *   2. tdesign-theme.scss —— 令牌 → TDesign 变量（--td-*）+ UI 库尺度控制
  *   3. 本文件其余部分      —— 基础样式与工具页通用类
  *
  * 所有颜色只允许来自 --tk-* / --td-*，禁止硬编码色值，
  * 这样昼夜主题切换才能全站一致生效。
+ *
+ * 字号只允许来自 --tk-text-*：本版把正文提到 16px，
+ * 新增样式请勿写死 12/13px，否则又会回到「字太小」的老问题。
  * ============================================================ */
 
 @use './tokens';
@@ -38,8 +41,10 @@ body {
 
 body {
   font-family: var(--tk-font-sans);
+  /* 正文基准字号 = --tk-text-base（16px）。全站最小可见文字是 13px（--tk-text-xs），
+   * 主要出现在辅助说明与元信息上，不再有 12px 的正文。 */
   font-size: var(--tk-text-base);
-  line-height: 1.6;
+  line-height: 1.7;
   background-color: var(--tk-bg);
   color: var(--tk-text);
   -webkit-font-smoothing: antialiased;
@@ -77,7 +82,7 @@ body,
   left: 12px;
   top: 12px;
   z-index: var(--tk-z-palette);
-  padding: 8px 14px;
+  padding: 10px 16px;
   border-radius: var(--tk-radius-md);
   background: var(--tk-surface-raised);
   border: 1px solid var(--tk-border);
@@ -102,14 +107,15 @@ img {
   max-width: 100%;
 }
 
-/* ---------- 滚动条美化 ---------- */
+/* ---------- 滚动条美化 ----------
+ * 字号与控件都放大了一档，滚动条同步加粗到 10px，否则不好点中。 */
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 ::-webkit-scrollbar-thumb {
   background: var(--td-scrollbar-color);
-  border: 3px solid transparent;
+  border: 2px solid transparent;
   background-clip: content-box;
   border-radius: var(--tk-radius-pill);
 }
@@ -125,7 +131,7 @@ img {
  * 工具页通用区块（60+ 个页面共用，改这里即全站生效）
  * ============================================================ */
 .tool-section {
-  margin-bottom: var(--tk-space-4);
+  margin-bottom: var(--tk-space-6);
 }
 
 /* 结果展示区：长文本自动换行 */
@@ -134,23 +140,43 @@ img {
   white-space: pre-wrap;
 }
 
-/* 页面标题与描述 */
+/* 页面标题与描述
+ * 标题明显大于正文，层级靠字号反差立住；移动端通过 clamp 下限回到 28px，
+ * 避免中文标题在窄屏被拆成三行。 */
 .page-title {
-  margin: 0 0 6px;
-  font-size: var(--tk-text-2xl);
+  margin: 0 0 12px;
+  font-family: var(--tk-font-display);
+  font-size: clamp(28px, 3vw, 38px);
   font-weight: 650;
-  letter-spacing: -0.02em;
-  line-height: 1.25;
+  letter-spacing: var(--tk-track-title);
+  line-height: var(--tk-leading-title);
   color: var(--tk-text);
 }
 .page-desc {
-  margin: 0 0 var(--tk-space-5);
-  max-width: 68ch;
+  margin: 0 0 var(--tk-space-7);
+  max-width: 62ch;
   font-size: var(--tk-text-base);
-  line-height: 1.65;
+  line-height: var(--tk-leading-body);
   color: var(--tk-text-secondary);
 }
 
+/* 分区标题：比页面标题低一档，用于工具页内部把长表单切成若干段落 */
+.section-heading {
+  margin: var(--tk-space-6) 0 var(--tk-space-4);
+  font-size: var(--tk-text-lg);
+  font-weight: 620;
+  letter-spacing: var(--tk-track-title);
+  color: var(--tk-text);
+}
+
+/* 行分隔线：统一用发丝线，不要画成带底色的长条 */
+.rule {
+  height: 1px;
+  border: none;
+  margin: 0;
+  background: var(--tk-hairline);
+}
+
 /* 表单标签（各工具页统一宽度，保证左侧对齐） */
 .form-label {
   flex-shrink: 0;
@@ -162,14 +188,15 @@ img {
 .form-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--tk-space-2);
-  margin-top: var(--tk-space-4);
+  gap: var(--tk-space-3);
+  margin-top: var(--tk-space-5);
 }
 
 /* 单行说明/元信息 */
 .field-hint {
   margin: var(--tk-space-2) 0 0;
   font-size: var(--tk-text-sm);
+  line-height: 1.6;
   color: var(--tk-text-placeholder);
 }
 
@@ -189,7 +216,7 @@ img {
 }
 
 /* ============================================================
- * 滚动进入动效（MOTION 档位 4/10：只做轻微上浮淡入，不做视差/钉住）
+ * 滚动进入动效（只做轻微上浮淡入，不做视差/钉住）
  * 由 v-reveal 指令添加 .is-revealed；无 JS 时元素始终可见，不会白屏。
  * ============================================================ */
 .reveal {
@@ -199,7 +226,7 @@ img {
 @media (prefers-reduced-motion: no-preference) {
   .reveal {
     opacity: 0;
-    transform: translateY(14px);
+    transform: translateY(12px);
     transition:
       opacity var(--tk-dur-slow) var(--tk-ease-out),
       transform var(--tk-dur-slow) var(--tk-ease-out);
diff --git a/src/assets/styles/tdesign-theme.scss b/src/assets/styles/tdesign-theme.scss
index 8a1aec5..2d83201 100644
--- a/src/assets/styles/tdesign-theme.scss
+++ b/src/assets/styles/tdesign-theme.scss
@@ -1,11 +1,25 @@
 /* ============================================================
- * TDesign 主题桥接层
+ * TDesign 主题控制层（UI 库主题）
  * ------------------------------------------------------------
- * 把 tokens.scss 里的 --tk-* 设计令牌映射到 TDesign 的 --td-* 变量。
+ * 本文件负责「控制 UI 库组件本身的色彩与风格」，分四件事：
+ *   ① 色阶：品牌蓝 / 中性蓝灰 / 语义色的 10 级色板（我们的色，喂给 TDesign）
+ *   ② 语义角色：把 tokens.scss 的 --tk-* 映射到 TDesign 的 --td-*
+ *   ③ 组件尺度：控件高度 / 内边距 / 字号 / 行高（本版为解决「控件太小」新增）
+ *   ④ 组件级微调：卡片、输入框、按钮、弹层的外形修正
  *
- * 这样做的好处：60+ 个工具页面里已有的大量 t-card / t-button /
- * t-input / t-tag 无需改一行代码，就整体换上了新的青玉配色与圆角体系，
- * 属于「一次改主题、全站生效」的低风险改造方式。
+ * 为什么这样做：60+ 个工具页面里已有大量 t-card / t-button / t-input /
+ * t-select / t-tag，全部改一遍既不现实也容易漏。TDesign 的组件样式
+ * 完全建立在 --td-* 变量之上（例如 .t-input.t-size-l 的高度取自
+ * var(--td-comp-size-xl)），所以改变量 = 全站组件改版，属最小风险改造。
+ *
+ * ⚠️ 三条必须遵守的约束（踩过坑）：
+ *   1. 只覆盖 TDesign 真实存在的变量名。写错名字不会报错，只是静默不生效。
+ *      新增前请在 node_modules/tdesign-vue-next 的样式产物里确认。
+ *   2. --td-font-body-* 是复合变量（size/line-height 简写），
+ *      所以放大字号时必须同步改 --td-font-size-* 与 --td-line-height-*，
+ *      只改前者会出现「大字号被小行高挤住」的破版。
+ *   3. 尺度变量不要动 --td-size-N 阶梯本身（那是 TDesign 的原子刻度，
+ *      图标、徽标、间距都在用）；只覆盖 --td-comp-size-* 一层。
  *
  * 命名桥接对应关系（速查）：
  *   --tk-accent        → --td-brand-color          （按钮/主色底）
@@ -19,18 +33,18 @@
  * 浅色主题
  * ============================================================ */
 :root,
-html[theme-mode='light'] {
-  /* ---------- 品牌色阶（青玉，1 最浅 → 10 最深） ---------- */
-  --td-brand-color-1: #e9f7f2;
-  --td-brand-color-2: #c6eddf;
-  --td-brand-color-3: #99dfc8;
-  --td-brand-color-4: #66cead;
-  --td-brand-color-5: #36bc93;
-  --td-brand-color-6: #17a37b;
-  --td-brand-color-7: #0c7c59;
-  --td-brand-color-8: #096548;
-  --td-brand-color-9: #074e38;
-  --td-brand-color-10: #053827;
+:root[theme-mode='light'] {
+  /* ---------- 品牌色阶（宝石蓝，1 最浅 → 10 最深） ---------- */
+  --td-brand-color-1: #eff4ff;
+  --td-brand-color-2: #dbe6fe;
+  --td-brand-color-3: #c0d4fe;
+  --td-brand-color-4: #96b6fd;
+  --td-brand-color-5: #6294fb;
+  --td-brand-color-6: #3b76f6;
+  --td-brand-color-7: #2563eb;
+  --td-brand-color-8: #1d4ed8;
+  --td-brand-color-9: #1e3fb0;
+  --td-brand-color-10: #1b3690;
 
   /* ---------- 语义色阶 ---------- */
   --td-success-color-1: #e6f7ee;
@@ -66,30 +80,29 @@ html[theme-mode='light'] {
   --td-error-color-9: #4c1613;
   --td-error-color-10: #320d0b;
 
-  /* ---------- 中性色阶（冷调，1 最浅 → 14 最深）
+  /* ---------- 中性色阶（蓝灰，1 最浅 → 14 最深）
    * 深浅两套主题共用同一条色阶：浅色主题取低号，深色主题取高号 ---------- */
-  --td-gray-color-1: #f6f8f8;
-  --td-gray-color-2: #eef1f0;
-  --td-gray-color-3: #e3e8e6;
-  --td-gray-color-4: #d3dad7;
-  --td-gray-color-5: #c2cbc8;
-  --td-gray-color-6: #a3afab;
-  --td-gray-color-7: #7c8885;
-  --td-gray-color-8: #5a6562;
-  --td-gray-color-9: #3e4845;
-  --td-gray-color-10: #333c39;
-  --td-gray-color-11: #252d2b;
-  --td-gray-color-12: #1a201e;
-  --td-gray-13: #131817;
-  --td-gray-color-13: #131817;
-  --td-gray-color-14: #0c100f;
+  --td-gray-color-1: #f4f6fb;
+  --td-gray-color-2: #eef2f9;
+  --td-gray-color-3: #e2e8f3;
+  --td-gray-color-4: #ccd7e8;
+  --td-gray-color-5: #b1bdd3;
+  --td-gray-color-6: #8f9cb4;
+  --td-gray-color-7: #6e7994;
+  --td-gray-color-8: #55617a;
+  --td-gray-color-9: #3d4759;
+  --td-gray-color-10: #2e3747;
+  --td-gray-color-11: #263147;
+  --td-gray-color-12: #1b2333;
+  --td-gray-color-13: #131926;
+  --td-gray-color-14: #0b0f18;
 
   /* ---------- 语义角色 ---------- */
   --td-brand-color: var(--tk-accent);
   --td-brand-color-hover: var(--tk-accent-hover);
   --td-brand-color-active: var(--tk-accent-active);
   --td-brand-color-focus: var(--tk-accent-surface-strong);
-  --td-brand-color-disabled: #99dfc8;
+  --td-brand-color-disabled: #96b6fd;
   --td-brand-color-light: var(--tk-accent-surface);
   --td-brand-color-light-hover: var(--tk-accent-surface-strong);
 
@@ -136,19 +149,19 @@ html[theme-mode='light'] {
   --td-bg-color-specialcomponent: var(--tk-surface-raised);
 
   /* 遮罩：用带色相的深色，避免死黑 */
-  --td-mask-active: rgba(9, 20, 16, 0.55);
-  --td-mask-disabled: rgba(252, 253, 253, 0.6);
+  --td-mask-active: rgba(9, 15, 32, 0.55);
+  --td-mask-disabled: rgba(255, 255, 255, 0.6);
   --td-mask-background: var(--tk-surface);
 
   /* ---------- 文字 ---------- */
   --td-text-color-primary: var(--tk-text);
   --td-text-color-secondary: var(--tk-text-secondary);
   --td-text-color-placeholder: var(--tk-text-placeholder);
-  --td-text-color-disabled: #a3afab;
+  --td-text-color-disabled: #b1bdd3;
   --td-text-color-anti: var(--tk-text-on-accent);
   --td-text-color-brand: var(--tk-accent-text);
   --td-text-color-link: var(--tk-accent-text);
-  --td-text-color-watermark: rgba(17, 26, 23, 0.08);
+  --td-text-color-watermark: rgba(15, 23, 41, 0.08);
 
   /* ---------- 描边 ---------- */
   --td-border-level-1-color: var(--tk-border);
@@ -173,11 +186,11 @@ html[theme-mode='light'] {
   --td-shadow-inset-right: inset 0.5px 0 0 var(--tk-border);
   --td-shadow-inset-bottom: inset 0 -0.5px 0 var(--tk-border);
   --td-shadow-inset-left: inset -0.5px 0 0 var(--tk-border);
-  --td-table-shadow-color: rgba(16, 32, 28, 0.08);
+  --td-table-shadow-color: rgba(15, 23, 41, 0.08);
 
   /* ---------- 滚动条 ---------- */
-  --td-scrollbar-color: rgba(17, 26, 23, 0.16);
-  --td-scrollbar-hover-color: rgba(17, 26, 23, 0.32);
+  --td-scrollbar-color: rgba(15, 23, 41, 0.18);
+  --td-scrollbar-hover-color: rgba(15, 23, 41, 0.34);
   --td-scroll-track-color: transparent;
 
   /* ---------- 字体 ---------- */
@@ -188,18 +201,18 @@ html[theme-mode='light'] {
 /* ============================================================
  * 深色主题
  * ============================================================ */
-html[theme-mode='dark'] {
+:root[theme-mode='dark'] {
   /* ---------- 品牌色阶（深色下 1 最深 → 10 最浅） ---------- */
-  --td-brand-color-1: #0a2e22;
-  --td-brand-color-2: #0b3d2d;
-  --td-brand-color-3: #0c4d39;
-  --td-brand-color-4: #0d5c44;
-  --td-brand-color-5: #0e6f52;
-  --td-brand-color-6: #0e8460;
-  --td-brand-color-7: #10946b;
-  --td-brand-color-8: #2aa87c;
-  --td-brand-color-9: #3fc79b;
-  --td-brand-color-10: #78dfba;
+  --td-brand-color-1: #16244d;
+  --td-brand-color-2: #1a2d63;
+  --td-brand-color-3: #1e377c;
+  --td-brand-color-4: #234298;
+  --td-brand-color-5: #2a4fb5;
+  --td-brand-color-6: #3059d6;
+  --td-brand-color-7: #2563eb;
+  --td-brand-color-8: #4a80f5;
+  --td-brand-color-9: #7aa8ff;
+  --td-brand-color-10: #b3ccff;
 
   /* ---------- 语义色阶 ---------- */
   --td-success-color-1: #06291a;
@@ -236,13 +249,13 @@ html[theme-mode='dark'] {
   --td-error-color-10: #f2aca4;
 
   /* ---------- 语义角色 ----------
-   * 注意：深色下按钮底压深到 #0e8460（与白字 4.68:1），
+   * 注意：深色下按钮底保持 #2563eb（与白字 5.17:1），
    * 而链接/图标另用更亮的 --tk-accent-text 保证在深底上可读。 */
   --td-brand-color: var(--tk-accent);
   --td-brand-color-hover: var(--tk-accent-hover);
   --td-brand-color-active: var(--tk-accent-active);
   --td-brand-color-focus: var(--tk-accent-surface-strong);
-  --td-brand-color-disabled: #0c4d39;
+  --td-brand-color-disabled: #1e377c;
   --td-brand-color-light: var(--tk-accent-surface);
   --td-brand-color-light-hover: var(--tk-accent-surface-strong);
 
@@ -279,28 +292,28 @@ html[theme-mode='dark'] {
   --td-bg-color-secondarycontainer: var(--tk-surface-sunken);
   --td-bg-color-secondarycontainer-hover: var(--tk-surface-hover);
   --td-bg-color-secondarycontainer-active: var(--tk-surface-active);
-  --td-bg-color-component: #1b2220;
-  --td-bg-color-component-hover: #222a28;
-  --td-bg-color-component-active: #2b3331;
-  --td-bg-color-component-disabled: #171d1b;
-  --td-bg-color-secondarycomponent: #222a28;
-  --td-bg-color-secondarycomponent-hover: #2b3331;
-  --td-bg-color-secondarycomponent-active: #343c3a;
+  --td-bg-color-component: var(--tk-surface-sunken);
+  --td-bg-color-component-hover: var(--tk-surface-hover);
+  --td-bg-color-component-active: var(--tk-surface-active);
+  --td-bg-color-component-disabled: var(--tk-surface-sunken);
+  --td-bg-color-secondarycomponent: var(--tk-surface-hover);
+  --td-bg-color-secondarycomponent-hover: var(--tk-surface-active);
+  --td-bg-color-secondarycomponent-active: var(--tk-border-strong);
   --td-bg-color-specialcomponent: var(--tk-surface-raised);
 
   --td-mask-active: rgba(0, 0, 0, 0.72);
-  --td-mask-disabled: rgba(19, 24, 23, 0.6);
+  --td-mask-disabled: rgba(19, 25, 38, 0.6);
   --td-mask-background: var(--tk-surface);
 
   /* ---------- 文字 ---------- */
   --td-text-color-primary: var(--tk-text);
   --td-text-color-secondary: var(--tk-text-secondary);
   --td-text-color-placeholder: var(--tk-text-placeholder);
-  --td-text-color-disabled: #5a6562;
+  --td-text-color-disabled: #55617a;
   --td-text-color-anti: var(--tk-text-on-accent);
   --td-text-color-brand: var(--tk-accent-text);
   --td-text-color-link: var(--tk-accent-text);
-  --td-text-color-watermark: rgba(232, 237, 235, 0.1);
+  --td-text-color-watermark: rgba(233, 238, 248, 0.1);
 
   /* ---------- 描边 ---------- */
   --td-border-level-1-color: var(--tk-border);
@@ -308,7 +321,7 @@ html[theme-mode='dark'] {
   --td-border-level-2-color: var(--tk-border-strong);
   --td-component-border: var(--tk-border-strong);
 
-  /* ---------- 圆角 / 阴影 / 滚动条 / 字体（与主题无关，沿用令牌） ---------- */
+  /* ---------- 圆角 / 阴影 / 滚动条 / 字体 ---------- */
   --td-radius-small: var(--tk-radius-sm);
   --td-radius-default: var(--tk-radius-md);
   --td-radius-medium: var(--tk-radius-lg);
@@ -326,8 +339,8 @@ html[theme-mode='dark'] {
   --td-shadow-inset-left: inset -0.5px 0 0 var(--tk-border);
   --td-table-shadow-color: rgba(0, 0, 0, 0.3);
 
-  --td-scrollbar-color: rgba(232, 237, 235, 0.16);
-  --td-scrollbar-hover-color: rgba(232, 237, 235, 0.32);
+  --td-scrollbar-color: rgba(233, 238, 248, 0.18);
+  --td-scrollbar-hover-color: rgba(233, 238, 248, 0.34);
   --td-scroll-track-color: transparent;
 
   --td-font-family: var(--tk-font-sans);
@@ -335,23 +348,131 @@ html[theme-mode='dark'] {
 }
 
 /* ============================================================
- * 少量组件级微调
- * —— TDesign 默认的字重/描边在青玉配色下略重，这里做轻量化处理
+ * ③ UI 库组件尺度控制（本版新增，解决「控件太小」）
+ * ------------------------------------------------------------
+ * 与主题无关，因此三个选择器都要写（且必须用 :root[theme-mode=...] 这一
+ * 与 TDesign 同级权重的写法，否则会被 UI 库自身的深色变量盖掉）：
+ * 直接改 --td-size-* 会连带影响图标/徽标，所以只覆盖 --td-comp-* 一层。
+ *
+ * 放大前后对照（TDesign 默认 → 本版）：
+ *   默认输入框/按钮/下拉 32px → 40px
+ *   大号控件            40px → 48px
+ *   小号控件            24px → 28px
+ *   控件文字            14px → 16px（与正文同号，读起来不再「小一号」）
+ * ============================================================ */
+/* ============================================================
+ * 深色主题的中性色阶（补在主题块之外，便于与尺度控制放在一起）
+ * ------------------------------------------------------------
+ * TDesign 在深色下使用「反向灰阶」（1 最深 → 14 最浅），
+ * 不覆盖的话组件会退回 UI 库自带的冷灰，与本主题的蓝灰体系脱节。
+ * ============================================================ */
+:root[theme-mode='dark'] {
+  --td-gray-color-1: #0b0f18;
+  --td-gray-color-2: #131926;
+  --td-gray-color-3: #1b2333;
+  --td-gray-color-4: #222c3f;
+  --td-gray-color-5: #263147;
+  --td-gray-color-6: #35415c;
+  --td-gray-color-7: #4a5670;
+  --td-gray-color-8: #6e7994;
+  --td-gray-color-9: #8f9cb4;
+  --td-gray-color-10: #b1bdd3;
+  --td-gray-color-11: #ccd7e8;
+  --td-gray-color-12: #e2e8f3;
+  --td-gray-color-13: #eef2f9;
+  --td-gray-color-14: #f4f6fb;
+}
+
+:root,
+:root[theme-mode='light'],
+:root[theme-mode='dark'] {
+  /* ---------- 控件高度阶梯 ---------- */
+  --td-comp-size-xxxs: 18px; /* 复选框、小圆点 */
+  --td-comp-size-xxs: 24px; /* 小号控件（t-tag / 紧凑按钮） */
+  --td-comp-size-xs: 28px;
+  --td-comp-size-s: 32px;
+  --td-comp-size-m: 40px; /* ★ 默认控件：输入框 / 按钮 / 下拉 / 日期选择 */
+  --td-comp-size-l: 44px;
+  --td-comp-size-xl: 48px; /* large 尺寸输入框、下拉触发框 */
+  --td-comp-size-xxl: 52px;
+  --td-comp-size-xxxl: 60px;
+
+  /* ---------- 控件内边距：随高度同步放宽，否则大控件里的文字会贴边 ---------- */
+  --td-comp-paddingTB-xxs: 4px;
+  --td-comp-paddingTB-xs: 6px;
+  --td-comp-paddingTB-s: 8px;
+  --td-comp-paddingTB-m: 12px;
+  --td-comp-paddingTB-l: 14px;
+  --td-comp-paddingTB-xl: 20px;
+  --td-comp-paddingLR-xxs: 6px;
+  --td-comp-paddingLR-xs: 8px;
+  --td-comp-paddingLR-s: 12px;
+  --td-comp-paddingLR-m: 16px;
+  --td-comp-paddingLR-l: 20px;
+  --td-comp-paddingLR-xl: 28px;
+
+  /* ---------- 字号：控件文字提到 16px，与正文同号 ---------- */
+  --td-font-size-body-small: 13px;
+  --td-font-size-body-medium: 16px;
+  --td-font-size-body-large: 17px;
+  --td-font-size-title-small: 16px;
+  --td-font-size-title-medium: 18px;
+  --td-font-size-title-large: 20px;
+  --td-font-size-link-small: 13px;
+  --td-font-size-link-medium: 15px;
+  --td-font-size-link-large: 17px;
+  --td-font-size-mark-small: 13px;
+  --td-font-size-mark-medium: 15px;
+
+  /* ---------- 行高：必须与上面成对修改，否则大字号会被小行高挤住 ---------- */
+  --td-line-height-body-small: 22px;
+  --td-line-height-body-medium: 24px;
+  --td-line-height-body-large: 26px;
+  --td-line-height-title-small: 24px;
+  --td-line-height-title-medium: 28px;
+  --td-line-height-title-large: 30px;
+  --td-line-height-link-small: 22px;
+  --td-line-height-link-medium: 24px;
+  --td-line-height-link-large: 26px;
+  --td-line-height-mark-small: 22px;
+  --td-line-height-mark-medium: 24px;
+}
+
+/* ============================================================
+ * ④ 组件级微调（清晰蓝 · 卡片工作台）
+ * ------------------------------------------------------------
+ * 一条贯穿全站的原则：
+ *   内容容器（卡片/面板）→ 白底 + 细描边 + 轻投影，与页面底拉开层次
+ *   功能控件（输入框/按钮/下拉）→ 更实的描边 + 明确的聚焦反馈
+ * 本版与上一版最大的区别就在这里：卡片重新「有形」，不再是无框纸面。
  * ============================================================ */
 
-/* 卡片：默认无投影，靠描边区分层次；hover 才浮起（避免整页都是悬浮块） */
+/* 卡片：轻投影 + 细描边；hover 时抬到第二档阴影 */
 .t-card {
-  box-shadow: none;
+  border-radius: var(--tk-radius-xl);
+  box-shadow: var(--tk-shadow-1);
 }
 .t-card--bordered {
   border-color: var(--tk-border);
+  box-shadow: none;
+}
+.t-card--shadow {
+  box-shadow: var(--tk-shadow-2);
 }
 .t-card__header {
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-weight: 620;
+  font-size: var(--tk-text-lg);
+  letter-spacing: var(--tk-track-title);
+}
+.t-card__title {
+  letter-spacing: var(--tk-track-title);
+}
+/* 卡片内边距放大一档；窄屏收回默认值，否则手机上内容可用宽度会不够 */
+.t-card .t-card__body {
+  padding: var(--tk-space-5) var(--tk-space-6);
 }
 
-/* 输入框：聚焦时用主色描边 + 柔和外发光，替代默认的粗描边 */
+/* 输入框 / 文本域：聚焦时用主色描边 + 柔和外发光 */
 .t-input__wrap,
 .t-textarea__inner {
   transition:
@@ -368,6 +489,12 @@ html[theme-mode='dark'] {
   transform: translateY(1px);
 }
 
+/* 下拉/选择器的选项行：默认行高偏挤，放大后一屏可见项变少但扫读更快 */
+.t-select-option,
+.t-dropdown__item {
+  font-size: var(--td-font-size-body-medium);
+}
+
 /* 弹层：统一使用较大的圆角与柔和阴影 */
 .t-popup__content,
 .t-dialog,
@@ -375,5 +502,13 @@ html[theme-mode='dark'] {
   border-radius: var(--tk-radius-xl);
 }
 .t-dialog__header {
-  font-weight: 600;
+  font-weight: 620;
+  letter-spacing: var(--tk-track-title);
+}
+
+/* 窄屏：大内边距在手机上会挤掉内容宽度，这里整体收回到常规密度 */
+@media (max-width: 767px) {
+  .t-card .t-card__body {
+    padding: var(--tk-space-4);
+  }
 }
diff --git a/src/assets/styles/tokens.scss b/src/assets/styles/tokens.scss
index 97ac951..963121e 100644
--- a/src/assets/styles/tokens.scss
+++ b/src/assets/styles/tokens.scss
@@ -4,54 +4,87 @@
  * 站点唯一的「视觉真相」来源。所有自定义样式只允许引用本文件
  * 定义的 --tk-* 变量，禁止在组件里硬编码颜色/圆角/阴影。
  *
+ * 风格定位：清晰蓝 · 卡片工作台（Clear Blue Workspace）
+ * ------------------------------------------------------------
+ * 与上一版「编辑感（青玉 + 大留白 + 发丝线）」的区别，也是本版的四条硬规则：
+ *   ① 字号整体放大一档：正文 16px 起步、说明文字不低于 13px，
+ *      上一版 12/13/14 的密度在 1080p 以上屏幕上确实偏小。
+ *   ② 控件大于内容：输入框/按钮/下拉默认 40px 高、15px 文字，
+ *      控件是「手上要碰的东西」，必须比正文更实、更大。
+ *   ③ 容器有边界：卡片用「白底 + 细描边 + 轻投影」与页面底拉开层次，
+ *      不再追求上一版那种「一张纸铺到底」的无框版式。
+ *   ④ 主色单一：全站只有一个强调色（宝石蓝），不做第二强调色。
+ *
  * 主题通过 html 上的属性决定：
  *   theme-mode = light | dark   → 由 theme store 计算后的「实际生效」主题
  *   theme-lang = zh-CN | en-US | ja-JP | ko-KR → 与 lang 属性同步
  *
- * 中性色：冷调石板灰（不带暖黄），与青玉主色同色系。
- * 强调色：青玉 Jade（单一强调色，全站一致，不做第二强调色）。
+ * 改动本文件前请先读 tdesign-theme.scss 顶部的桥接说明：
+ * 这里只放「我们的」令牌，TDesign 组件的尺度与色阶在那边控制。
  * ============================================================ */
 
 /* ---------- 与主题无关的常量令牌 ---------- */
 :root {
   /* 圆角规范（形状一致性：全站只用这一套）
-   * 控件 8px / 小控件 6px / 弹层 10px / 卡片 14px / 大面板 20px / 胶囊 999px */
-  --tk-radius-xs: 4px;
-  --tk-radius-sm: 6px;
-  --tk-radius-md: 8px;
-  --tk-radius-lg: 10px;
-  --tk-radius-xl: 14px;
-  --tk-radius-2xl: 20px;
+   * 控件 10px / 小控件 7px / 弹层 12px / 卡片 16px / 大面板 22px / 胶囊 999px
+   * 比上一版整体加大一档，配合放大的字号，观感更圆润友好。 */
+  --tk-radius-xs: 5px;
+  --tk-radius-sm: 7px;
+  --tk-radius-md: 10px;
+  --tk-radius-lg: 12px;
+  --tk-radius-xl: 16px;
+  --tk-radius-2xl: 22px;
   --tk-radius-pill: 999px;
 
-  /* 间距节奏（8px 基准） */
+  /* 间距节奏（4px 基准，常用档位是 4 的倍数）
+   * 本版留白比「编辑感」版式收敛：字号已经变大，留白再拉满会让页面显得空。 */
   --tk-space-1: 4px;
   --tk-space-2: 8px;
   --tk-space-3: 12px;
   --tk-space-4: 16px;
-  --tk-space-5: 24px;
-  --tk-space-6: 32px;
-  --tk-space-7: 48px;
-  --tk-space-8: 64px;
+  --tk-space-5: 20px;
+  --tk-space-6: 28px;
+  --tk-space-7: 40px;
+  --tk-space-8: 56px;
+  /* space-9 专门用于「分区之间」的留白 */
+  --tk-space-9: 68px;
 
   /* 版心与栅格 */
-  --tk-shell-max: 1560px;
-  --tk-content-max: 1120px;
-  --tk-header-h: 60px;
-  --tk-aside-w: 248px;
+  --tk-shell-max: 1600px;
+  --tk-content-max: 1200px;
+  --tk-header-h: 68px;
+  --tk-aside-w: 268px;
 
-  /* 字号阶梯 */
-  --tk-text-xs: 12px;
-  --tk-text-sm: 13px;
-  --tk-text-base: 14px;
-  --tk-text-md: 15px;
-  --tk-text-lg: 17px;
-  --tk-text-xl: 20px;
-  --tk-text-2xl: 26px;
+  /* 字号阶梯（本版的核心改动：整体上移一档）
+   * 旧 → 新：12→13 / 13→14 / 14→16 / 15→17 / 17→19 / 20→22 / 26→28 ...
+   * 请勿在组件里退回 12px：那正是上一版「字太小」的根因。 */
+  --tk-text-xs: 13px;
+  --tk-text-sm: 14px;
+  --tk-text-base: 16px;
+  --tk-text-md: 17px;
+  --tk-text-lg: 19px;
+  --tk-text-xl: 22px;
+  --tk-text-2xl: 28px;
   --tk-text-3xl: 34px;
-  --tk-text-4xl: 44px;
+  --tk-text-4xl: 42px;
+  --tk-text-5xl: 52px;
 
-  /* 数字等宽（统计值用，避免数字跳动） */
+  /* 行高与字距
+   * 规则成对使用：大字标题用 leading-title + 负字距；正文用 leading-body + 正常字距。
+   * 本版负字距比编辑感版式收得更小（-0.022em），因为字号变大后过紧的中文标题会糊。 */
+  --tk-leading-display: 1.12;
+  --tk-leading-title: 1.3;
+  --tk-leading-body: 1.72;
+  --tk-track-display: -0.022em;
+  --tk-track-title: -0.012em;
+
+  /* 展示字体：中文环境下「可用的展示字体」就是系统字体本身
+   *（PingFang / 微软雅黑 的中黑字重在标题上已经足够有性格）。
+   * 引入网络 CJK 展示字体会让首屏多出 2MB+ 负担，得不偿失。
+   * 因此这里显式声明为与正文同族，留出未来替换的单一改点。 */
+  --tk-font-display: var(--tk-font-sans);
+
+  /* 数字等宽（统计值/时间用，避免数字跳动） */
   --tk-num-font: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Consolas,
     'Liberation Mono', monospace;
 
@@ -65,7 +98,7 @@
   --tk-z-toast: 400;
   --tk-z-palette: 500;
 
-  /* 动效曲线：进出对称的缓出曲线，时长克制（MOTION 档位 4/10） */
+  /* 动效曲线：进出对称的缓出曲线，时长克制 */
   --tk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --tk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --tk-dur-fast: 140ms;
@@ -102,102 +135,104 @@ html {
  * 浅色主题
  * ============================================================ */
 :root,
-html[theme-mode='light'] {
+:root[theme-mode='light'] {
   color-scheme: light;
 
-  /* 强调色：青玉。与白底对比度 5.19:1（正文级 AA 通过） */
-  --tk-accent: #0c7c59;
-  --tk-accent-hover: #0a6b4c;
-  --tk-accent-active: #085a40;
-  --tk-accent-ring: rgba(12, 124, 89, 0.24);
-  /* 低饱和青玉底纹：分类图标底、选中态、标签底 */
-  --tk-accent-surface: rgba(12, 124, 89, 0.08);
-  --tk-accent-surface-strong: rgba(12, 124, 89, 0.14);
+  /* 强调色：宝石蓝。与白底对比 5.17:1（正文级 AA 通过） */
+  --tk-accent: #2563eb;
+  --tk-accent-hover: #1d4ed8;
+  --tk-accent-active: #1e40af;
+  /* 强调文字（链接/图标）：比按钮底色略深，保证在白底上的可读性 */
+  --tk-accent-text: #1d4ed8;
+  --tk-accent-ring: rgba(37, 99, 235, 0.22);
+  /* 低饱和蓝底纹：分类图标底、选中态、标签底 */
+  --tk-accent-surface: rgba(37, 99, 235, 0.07);
+  --tk-accent-surface-strong: rgba(37, 99, 235, 0.13);
 
-  /* 中性表面（冷调） */
-  --tk-bg: #f6f8f8;
-  --tk-surface: #fcfdfd;
+  /* 中性表面（冷调蓝灰，与主色同色系）
+   * 页面底刻意比容器暗一档：卡片要靠这个差值「浮」起来，而不是只靠投影。 */
+  --tk-bg: #f4f6fb;
+  --tk-surface: #ffffff;
   --tk-surface-raised: #ffffff;
-  --tk-surface-sunken: #f1f4f3;
-  --tk-surface-hover: #f3f6f5;
-  --tk-surface-active: #ebefee;
+  --tk-surface-sunken: #eef2f9;
+  --tk-surface-hover: #f2f6fd;
+  --tk-surface-active: #e6edfa;
 
   /* 描边 */
-  --tk-border: #e3e8e6;
-  --tk-border-strong: #d3dad7;
-  --tk-border-subtle: #eef1f0;
+  --tk-border: #e2e8f3;
+  --tk-border-strong: #ccd7e8;
+  --tk-border-subtle: #edf1f8;
+  /* 发丝线：只用于列表条目的分隔线（历史列表、首页索引），
+   * 不用于容器边界——容器边界请用 --tk-border。 */
+  --tk-hairline: #e9eef7;
 
-  /* 文字：primary 16.6:1 / secondary 5.5:1 / placeholder 4.6:1（均过 AA） */
-  --tk-text: #111a17;
-  --tk-text-secondary: #5b6763;
-  --tk-text-placeholder: #66736f;
+  /* 文字：primary 高对比 / secondary 与 placeholder 均过 AA */
+  --tk-text: #0f1729;
+  --tk-text-secondary: #55617a;
+  --tk-text-placeholder: #6e7994;
   --tk-text-on-accent: #ffffff;
 
   /* 语义色（仅用于状态，不参与品牌表达） */
-  --tk-success: #0c7c59;
-  --tk-warning: #9a6212;
-  --tk-danger: #b4302c;
-  --tk-info: #1d5fa8;
+  --tk-success: #047857;
+  --tk-warning: #b45309;
+  --tk-danger: #b91c1c;
+  --tk-info: #1d4ed8;
 
   /* 阴影：带背景色相的冷调投影，不用纯黑 */
-  --tk-shadow-1: 0 1px 2px rgba(16, 32, 28, 0.05), 0 2px 6px rgba(16, 32, 28, 0.04);
-  --tk-shadow-2: 0 4px 12px rgba(16, 32, 28, 0.07), 0 12px 28px rgba(16, 32, 28, 0.05);
-  --tk-shadow-3: 0 8px 24px rgba(16, 32, 28, 0.09), 0 24px 56px rgba(16, 32, 28, 0.07);
+  --tk-shadow-1: 0 1px 2px rgba(15, 23, 41, 0.06), 0 1px 3px rgba(15, 23, 41, 0.05);
+  --tk-shadow-2: 0 4px 10px rgba(15, 23, 41, 0.08), 0 12px 24px rgba(15, 23, 41, 0.06);
+  --tk-shadow-3: 0 8px 20px rgba(15, 23, 41, 0.1), 0 24px 48px rgba(15, 23, 41, 0.08);
 
   /* 顶栏/侧栏的半透明玻璃底 */
-  --tk-glass: rgba(252, 253, 253, 0.82);
-  --tk-glass-border: rgba(17, 26, 23, 0.07);
+  --tk-glass: rgba(255, 255, 255, 0.82);
+  --tk-glass-border: rgba(15, 23, 41, 0.08);
 }
 
 /* ============================================================
  * 深色主题
  * ============================================================ */
-html[theme-mode='dark'] {
+:root[theme-mode='dark'] {
   color-scheme: dark;
 
-  /* 强调色：深色下按钮底压深到 #0e8460，与白字对比 4.68:1；
-   * 正文/链接用更亮的 #3fc79b，与页面底 8.85:1 */
-  --tk-accent: #0e8460;
-  --tk-accent-hover: #10946b;
-  --tk-accent-active: #0c6f51;
-  --tk-accent-text: #3fc79b;
-  --tk-accent-ring: rgba(63, 199, 155, 0.3);
-  --tk-accent-surface: rgba(63, 199, 155, 0.12);
-  --tk-accent-surface-strong: rgba(63, 199, 155, 0.2);
+  /* 强调色：深色下按钮底保持 #2563eb（与白字 5.17:1）；
+   * 链接/图标另用更亮的 #7aa8ff，保证在深底上可读。 */
+  --tk-accent: #2563eb;
+  --tk-accent-hover: #3b82f6;
+  --tk-accent-active: #1d4ed8;
+  --tk-accent-text: #7aa8ff;
+  --tk-accent-ring: rgba(122, 168, 255, 0.3);
+  --tk-accent-surface: rgba(122, 168, 255, 0.12);
+  --tk-accent-surface-strong: rgba(122, 168, 255, 0.2);
 
-  --tk-bg: #0c100f;
-  --tk-surface: #131817;
-  --tk-surface-raised: #171d1b;
-  --tk-surface-sunken: #171d1b;
-  --tk-surface-hover: #1a201e;
-  --tk-surface-active: #202725;
+  --tk-bg: #0b0f18;
+  --tk-surface: #131926;
+  --tk-surface-raised: #18202f;
+  --tk-surface-sunken: #18202f;
+  --tk-surface-hover: #1b2333;
+  --tk-surface-active: #222c3f;
 
-  --tk-border: #252d2b;
-  --tk-border-strong: #333c39;
-  --tk-border-subtle: #1d2422;
+  --tk-border: #263147;
+  --tk-border-strong: #35415c;
+  --tk-border-subtle: #1d2536;
+  /* 深色下取比卡片底（#131926）略亮一档，才看得见分隔线但不刺眼 */
+  --tk-hairline: #212a3c;
 
-  /* primary 高对比 / secondary 8.46:1 / placeholder 5.21:1 */
-  --tk-text: #e8edeb;
-  --tk-text-secondary: #a3afab;
-  --tk-text-placeholder: #7c8885;
+  --tk-text: #e9eef8;
+  --tk-text-secondary: #a4afc5;
+  --tk-text-placeholder: #7d88a0;
   --tk-text-on-accent: #ffffff;
 
-  --tk-success: #3fc79b;
-  --tk-warning: #d9a441;
-  --tk-danger: #f08a84;
-  --tk-info: #6fa8e6;
+  --tk-success: #34d399;
+  --tk-warning: #fbbf24;
+  --tk-danger: #f87171;
+  --tk-info: #7aa8ff;
 
-  --tk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
-  --tk-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.35);
-  --tk-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.4);
+  --tk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.32);
+  --tk-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.35);
+  --tk-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.4);
 
-  --tk-glass: rgba(19, 24, 23, 0.82);
-  --tk-glass-border: rgba(232, 237, 235, 0.08);
-}
-
-/* 浅色主题下的强调文字色（深色主题单独覆盖） */
-html[theme-mode='light'] {
-  --tk-accent-text: #0c7c59;
+  --tk-glass: rgba(19, 25, 38, 0.82);
+  --tk-glass-border: rgba(233, 238, 248, 0.09);
 }
 
 /* ============================================================
diff --git a/src/components/common/AppBrand.vue b/src/components/common/AppBrand.vue
index 0486245..df7d176 100644
--- a/src/components/common/AppBrand.vue
+++ b/src/components/common/AppBrand.vue
@@ -17,7 +17,10 @@ import { AppIcon } from 'tdesign-icons-vue-next'
  *
  * 图标刻意复用 TDesign 图标库的 AppIcon（九宫格语义，贴合「工具箱」），
  * 而不是手绘 SVG —— 手绘图标在不同字号下容易变形，也不便与其它图标统一线宽。
- * 底纹使用青玉渐变，是整站唯一使用渐变的位置，用于强化品牌记忆点。
+ *
+ * 编辑感版式下品牌标记改用「实色小方块 + 文字标」：
+ * 原来的青玉渐变在这套版式里是唯一一处高饱和色块，会把视线从标题上拽走；
+ * 实色方块更安静，品牌的辨识度改由字重与字距承担（标题族同源）。
  */
 const { t } = useI18n()
 </script>
@@ -26,34 +29,36 @@ const { t } = useI18n()
 .brand {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 9px;
   text-decoration: none;
   color: inherit;
   flex-shrink: 0;
 }
 
 .brand-mark {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--tk-radius-md);
-  font-size: 19px;
-  color: #fff;
-  /* 唯一渐变：青玉由深到浅，与强调色同色系 */
-  background: linear-gradient(140deg, var(--tk-accent) 0%, #2fb98d 100%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
-  transition: transform var(--tk-dur-base) var(--tk-ease-out);
+  font-size: 21px;
+  color: var(--tk-text-on-accent);
+  background: var(--tk-accent);
+  transition:
+    background-color var(--tk-dur-base) var(--tk-ease-out),
+    transform var(--tk-dur-base) var(--tk-ease-out);
 }
 .brand:hover .brand-mark {
-  transform: rotate(-6deg) scale(1.04);
+  background: var(--tk-accent-hover);
+  transform: scale(1.04);
 }
 
 .brand-text {
+  font-family: var(--tk-font-display);
   font-size: var(--tk-text-lg);
   font-weight: 650;
-  letter-spacing: -0.02em;
+  letter-spacing: var(--tk-track-title);
   color: var(--tk-text);
   white-space: nowrap;
 }
diff --git a/src/components/common/CommandPalette.vue b/src/components/common/CommandPalette.vue
index 77a6d99..6e35fdc 100644
--- a/src/components/common/CommandPalette.vue
+++ b/src/components/common/CommandPalette.vue
@@ -252,8 +252,8 @@ onBeforeUnmount(() => {
 
 .palette-panel {
   width: 100%;
-  max-width: 620px;
-  max-height: 68vh;
+  max-width: 680px;
+  max-height: 70vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -267,14 +267,14 @@ onBeforeUnmount(() => {
 .palette-search {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 0 12px 0 16px;
-  height: 56px;
+  gap: 12px;
+  padding: 0 14px 0 18px;
+  height: 64px;
   flex-shrink: 0;
   border-bottom: 1px solid var(--tk-border-subtle);
 }
 .search-icon {
-  font-size: 18px;
+  font-size: 20px;
   color: var(--tk-text-placeholder);
   flex-shrink: 0;
 }
@@ -286,7 +286,7 @@ onBeforeUnmount(() => {
   outline: none;
   background: transparent;
   font-family: inherit;
-  font-size: var(--tk-text-md);
+  font-size: var(--tk-text-lg);
   color: var(--tk-text);
 }
 .search-input::placeholder {
@@ -294,17 +294,17 @@ onBeforeUnmount(() => {
 }
 .close-btn {
   flex-shrink: 0;
-  width: 30px;
-  height: 30px;
+  width: 36px;
+  height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--tk-radius-sm);
+  border-radius: var(--tk-radius-md);
   background: transparent;
   color: var(--tk-text-placeholder);
   cursor: pointer;
-  font-size: 16px;
+  font-size: 18px;
 }
 .close-btn:hover {
   background: var(--tk-surface-hover);
@@ -315,15 +315,16 @@ onBeforeUnmount(() => {
 .palette-list {
   flex: 1;
   overflow-y: auto;
-  padding: 6px;
+  padding: 8px;
   overscroll-behavior: contain;
 }
 .palette-item {
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 9px 12px;
+  gap: 14px;
+  min-height: 58px;
+  padding: 10px 14px;
   border: none;
   border-radius: var(--tk-radius-md);
   background: transparent;
@@ -337,13 +338,13 @@ onBeforeUnmount(() => {
 }
 .item-icon {
   flex-shrink: 0;
-  width: 30px;
-  height: 30px;
+  width: 36px;
+  height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--tk-radius-sm);
-  font-size: 17px;
+  border-radius: var(--tk-radius-md);
+  font-size: 19px;
   color: var(--tk-accent-text);
   background: var(--tk-surface-sunken);
 }
@@ -355,7 +356,7 @@ onBeforeUnmount(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
 }
 .item-name {
   font-size: var(--tk-text-base);
@@ -366,7 +367,7 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 .item-desc {
-  font-size: var(--tk-text-xs);
+  font-size: var(--tk-text-sm);
   color: var(--tk-text-placeholder);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -374,9 +375,9 @@ onBeforeUnmount(() => {
 }
 .item-badge {
   flex-shrink: 0;
-  padding: 1px 7px;
+  padding: 2px 9px;
   border-radius: var(--tk-radius-pill);
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   font-weight: 500;
   color: var(--tk-accent-text);
   background: var(--tk-accent-surface-strong);
@@ -408,8 +409,8 @@ onBeforeUnmount(() => {
 .palette-foot {
   flex-shrink: 0;
   display: flex;
-  gap: 16px;
-  padding: 8px 16px;
+  gap: 18px;
+  padding: 10px 18px;
   border-top: 1px solid var(--tk-border-subtle);
   background: var(--tk-surface);
   font-size: var(--tk-text-xs);
@@ -418,20 +419,20 @@ onBeforeUnmount(() => {
 .foot-item {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
 }
 .palette-foot kbd {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 4px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 5px;
   border: 1px solid var(--tk-border);
   border-radius: var(--tk-radius-xs);
   background: var(--tk-surface-raised);
   font-family: inherit;
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   color: var(--tk-text-secondary);
 }
 
diff --git a/src/components/common/HistoryPanel.vue b/src/components/common/HistoryPanel.vue
index 0374c8a..2ad2527 100644
--- a/src/components/common/HistoryPanel.vue
+++ b/src/components/common/HistoryPanel.vue
@@ -2,7 +2,9 @@
   <div v-if="props.items.length" class="history-panel">
     <div class="history-head">
       <span class="history-title">历史记录</span>
-      <t-button variant="text" size="small" theme="danger" @click="emit('clear')">清空</t-button>
+      <t-button variant="text" theme="danger" class="history-clear" @click="emit('clear')">
+        清空
+      </t-button>
     </div>
     <ul class="history-list">
       <li
@@ -56,19 +58,29 @@ function formatTime(ts: number): string {
 </script>
 
 <style scoped>
+/* 历史记录跟随全站的编辑感版式：条目之间用发丝线分行，
+ * 不再给每条历史套一个描边盒子（列表一长就会变成一排小方块）。
+ * 注意这里必须用 --tk-* 令牌，写死色值会在昼夜切换时花掉。 */
 .history-panel {
-  margin-top: 16px;
+  margin-top: var(--tk-space-6);
 }
 .history-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
+  gap: 12px;
+  margin-bottom: 4px;
 }
 .history-title {
-  font-size: 14px;
+  font-size: var(--tk-text-base);
   font-weight: 600;
-  color: var(--td-text-color-primary);
+  letter-spacing: var(--tk-track-title);
+  color: var(--tk-text-secondary);
+}
+/* 清空按钮：给足热区，但压住高度避免把标题行撑得过重 */
+.history-clear {
+  min-height: 34px;
+  font-size: var(--tk-text-sm);
 }
 .history-list {
   margin: 0;
@@ -78,17 +90,12 @@ function formatTime(ts: number): string {
 .history-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  margin-bottom: 6px;
-  border: 1px solid var(--td-border-level-1-color);
-  border-radius: 6px;
-  background: var(--td-bg-color-container);
+  gap: 12px;
+  min-height: 48px;
+  padding: 10px 2px;
+  border-top: 1px solid var(--tk-hairline);
   cursor: pointer;
-  transition: border-color 0.2s;
-}
-.history-item:hover {
-  border-color: var(--td-brand-color);
+  transition: color var(--tk-dur-fast) var(--tk-ease-out);
 }
 .history-text {
   flex: 1;
@@ -96,15 +103,25 @@ function formatTime(ts: number): string {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 13px;
-  color: var(--td-text-color-primary);
+  font-size: var(--tk-text-base);
+  color: var(--tk-text-secondary);
+  transition: color var(--tk-dur-fast) var(--tk-ease-out);
+}
+.history-item:hover .history-text {
+  color: var(--tk-accent-text);
 }
 .history-time {
   flex-shrink: 0;
-  font-size: 12px;
-  color: var(--td-text-color-placeholder);
+  font-family: var(--tk-num-font);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--tk-text-xs);
+  color: var(--tk-text-placeholder);
 }
+/* 历史条目里的删除按钮热区撑到 34px，避免在密集列表里点不准 */
 .history-del {
   flex-shrink: 0;
+  min-width: 34px;
+  min-height: 34px;
+  font-size: 16px;
 }
 </style>
diff --git a/src/components/common/LocaleSwitch.vue b/src/components/common/LocaleSwitch.vue
index afb1b21..f911edd 100644
--- a/src/components/common/LocaleSwitch.vue
+++ b/src/components/common/LocaleSwitch.vue
@@ -66,9 +66,9 @@ function onSelect(item: { value?: string | number }) {
 .switch-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 8px;
-  height: 34px;
+  gap: 5px;
+  padding: 0 12px;
+  height: 40px;
   color: var(--tk-text-secondary);
   border-radius: var(--tk-radius-md);
 }
@@ -77,15 +77,15 @@ function onSelect(item: { value?: string | number }) {
   background: var(--tk-surface-hover);
 }
 .switch-text {
-  font-size: var(--tk-text-sm);
+  font-size: var(--tk-text-base);
   font-weight: 600;
   letter-spacing: 0.02em;
   /* 语言代码固定宽度，切换时按钮不会左右跳动 */
-  min-width: 22px;
+  min-width: 26px;
   text-align: center;
 }
 .switch-caret {
-  font-size: 14px;
+  font-size: 16px;
   opacity: 0.6;
 }
 /* 窄屏只留图标，避免顶栏拥挤 */
diff --git a/src/components/common/ThemeSwitch.vue b/src/components/common/ThemeSwitch.vue
index aca6b77..b33fdb7 100644
--- a/src/components/common/ThemeSwitch.vue
+++ b/src/components/common/ThemeSwitch.vue
@@ -57,9 +57,9 @@ function onSelect(item: { value?: string | number }) {
 .switch-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 8px;
-  height: 34px;
+  gap: 5px;
+  padding: 0 12px;
+  height: 40px;
   color: var(--tk-text-secondary);
   border-radius: var(--tk-radius-md);
 }
@@ -68,11 +68,11 @@ function onSelect(item: { value?: string | number }) {
   background: var(--tk-surface-hover);
 }
 .switch-text {
-  font-size: var(--tk-text-sm);
+  font-size: var(--tk-text-base);
   font-weight: 500;
 }
 .switch-caret {
-  font-size: 14px;
+  font-size: 16px;
   opacity: 0.6;
 }
 @media (max-width: 767px) {
diff --git a/src/components/common/UploadDrop.vue b/src/components/common/UploadDrop.vue
index 411e30b..23abdd6 100644
--- a/src/components/common/UploadDrop.vue
+++ b/src/components/common/UploadDrop.vue
@@ -46,7 +46,7 @@
           <span class="name" :title="f.name">{{ f.name }}</span>
           <span class="size">{{ formatBytes(f.size) }}</span>
         </span>
-        <t-button variant="text" size="small" theme="danger" class="remove-btn" @click.stop="removeAt(i)">
+        <t-button variant="text" theme="danger" class="remove-btn" @click.stop="removeAt(i)">
           <template #icon><DeleteIcon /></template>
         </t-button>
       </div>
@@ -192,13 +192,13 @@ function removeAt(i: number) {
 .drop-zone {
   position: relative;
   border: 2px dashed var(--td-border-level-2-color);
-  border-radius: 8px;
-  padding: 24px 16px;
+  border-radius: var(--tk-radius-lg);
+  padding: 32px 20px;
   text-align: center;
   cursor: pointer;
   transition:
-    border-color 0.2s,
-    background-color 0.2s;
+    border-color var(--tk-dur-fast) var(--tk-ease-out),
+    background-color var(--tk-dur-fast) var(--tk-ease-out);
 }
 .drop-zone:hover,
 .drop-zone.dragging {
@@ -209,17 +209,17 @@ function removeAt(i: number) {
   display: none;
 }
 .empty-icon {
-  font-size: 40px;
+  font-size: 46px;
   color: var(--td-brand-color);
 }
 .tip {
-  margin: 8px 0 4px;
-  font-size: 14px;
+  margin: 10px 0 6px;
+  font-size: var(--tk-text-md);
   color: var(--td-text-color-primary);
 }
 .sub {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--tk-text-sm);
   color: var(--td-text-color-placeholder);
 }
 .drop-overlay {
@@ -233,10 +233,10 @@ function removeAt(i: number) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  border-radius: 8px;
-  font-size: 15px;
-  font-weight: 500;
+  gap: 10px;
+  border-radius: var(--tk-radius-lg);
+  font-size: var(--tk-text-md);
+  font-weight: 550;
   color: var(--td-brand-color);
   background: var(--td-brand-color-light);
   pointer-events: none;
@@ -244,22 +244,22 @@ function removeAt(i: number) {
 .file-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   text-align: left;
 }
 .file-item {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
+  gap: 12px;
+  padding: 10px 12px;
   border: 1px solid var(--td-border-level-1-color);
-  border-radius: 6px;
+  border-radius: var(--tk-radius-md);
   background: var(--td-bg-color-container);
 }
 .thumb {
-  width: 48px;
-  height: 48px;
-  border-radius: 6px;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--tk-radius-sm);
   object-fit: cover;
   flex-shrink: 0;
   border: 1px solid var(--td-border-level-1-color);
@@ -268,14 +268,14 @@ function removeAt(i: number) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 22px;
+  font-size: 24px;
   color: var(--td-text-color-placeholder);
   background: var(--td-bg-color-secondarycontainer);
 }
 /* 可点击预览的缩略图 */
 .thumb-clickable {
   cursor: zoom-in;
-  transition: transform 0.15s;
+  transition: transform var(--tk-dur-fast) var(--tk-ease-out);
 }
 .thumb-clickable:hover {
   transform: scale(1.06);
@@ -285,25 +285,30 @@ function removeAt(i: number) {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
 }
 .name {
-  font-size: 13px;
+  font-size: var(--tk-text-base);
   color: var(--td-text-color-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .size {
-  font-size: 12px;
+  font-size: var(--tk-text-sm);
   color: var(--td-text-color-placeholder);
 }
+/* 删除按钮：t-button size=small 在这版主题下只有 24px，热区太小，
+ * 这里把它撑到 36px，仍保持「图标按钮」的形态 */
 .remove-btn {
   flex-shrink: 0;
+  min-width: 36px;
+  min-height: 36px;
+  font-size: 17px;
 }
 .add-more {
   margin: 2px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-sm);
   color: var(--td-text-color-placeholder);
   text-align: center;
 }
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index c1189b5..63af419 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -63,11 +63,8 @@ export default {
   },
 
   home: {
-    eyebrow: 'Runs locally in your browser',
     title: 'A toolbox that lives in your browser',
     desc: '{count} everyday utilities. Every calculation and file operation happens on your own machine.',
-    ctaPrimary: 'Browse all tools',
-    ctaSecondary: 'Server tools',
     statTools: 'Available tools',
     statCategories: 'Categories',
     statUpload: 'Data uploaded to a server',
diff --git a/src/i18n/locales/ja-JP.ts b/src/i18n/locales/ja-JP.ts
index 236568b..4d99c36 100644
--- a/src/i18n/locales/ja-JP.ts
+++ b/src/i18n/locales/ja-JP.ts
@@ -63,11 +63,8 @@ export default {
   },
 
   home: {
-    eyebrow: 'ブラウザ内で動作',
     title: 'ブラウザだけで使えるツールボックス',
     desc: '{count} の日常ツール。計算もファイル処理もすべて端末内で完結します。',
-    ctaPrimary: 'すべてのツール',
-    ctaSecondary: 'サーバー連携ツール',
     statTools: '利用できるツール',
     statCategories: 'カテゴリ',
     statUpload: 'サーバーへの送信データ',
diff --git a/src/i18n/locales/ko-KR.ts b/src/i18n/locales/ko-KR.ts
index d7f77c0..d724b7c 100644
--- a/src/i18n/locales/ko-KR.ts
+++ b/src/i18n/locales/ko-KR.ts
@@ -63,11 +63,8 @@ export default {
   },
 
   home: {
-    eyebrow: '브라우저에서 바로 실행',
     title: '브라우저만 있으면 되는 툴박스',
     desc: '일상 도구 {count}개. 계산과 파일 처리가 모두 내 기기에서 끝납니다.',
-    ctaPrimary: '전체 도구 보기',
-    ctaSecondary: '서버 연동 도구',
     statTools: '사용 가능한 도구',
     statCategories: '분류',
     statUpload: '서버로 전송되는 데이터',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 1ead586..66366ca 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -76,11 +76,8 @@ export default {
   },
 
   home: {
-    eyebrow: '浏览器本地运行',
     title: '在浏览器里就能用的工具箱',
     desc: '{count} 个日常工具，计算与文件处理全部在本机完成，数据不上传服务器。',
-    ctaPrimary: '浏览全部工具',
-    ctaSecondary: '服务端工具',
     statTools: '可用工具',
     statCategories: '工具分类',
     statUpload: '上传到服务器的数据',
diff --git a/src/layout/MainLayout.vue b/src/layout/MainLayout.vue
index 2b861c8..a865209 100644
--- a/src/layout/MainLayout.vue
+++ b/src/layout/MainLayout.vue
@@ -75,7 +75,7 @@
     <t-drawer
       v-model:visible="drawerVisible"
       placement="left"
-      :size="272"
+      :size="300"
       :footer="false"
       :header="false"
       :close-btn="true"
@@ -103,13 +103,16 @@ import SideNav from './SideNav.vue'
 /**
  * 应用外壳布局。
  *
- * 结构：固定顶栏（60px）+ 左侧固定导航（248px）+ 内容区 + 页脚。
+ * 结构：固定顶栏（68px）+ 左侧固定导航（268px）+ 内容区 + 页脚。
  * 移动端（<768px）侧栏换成抽屉，顶栏保留品牌、命令面板与主题/语言切换。
  *
  * 版心约定：
- *   --tk-shell-max   = 1560px  顶栏 / 页脚 / 主体三者的最大宽度
- *   --tk-content-max = 1120px  内容型工具页的版心（由 page-wrap 约束）
+ *   --tk-shell-max   = 1600px  顶栏 / 页脚 / 主体三者的最大宽度
+ *   --tk-content-max = 1200px  内容型工具页的版心（由 page-wrap 约束）
  * 首页因为要铺开卡片网格，会自行放宽，不受 page-wrap 限制。
+ *
+ * 尺寸一律跟随令牌（--tk-header-h / --tk-aside-w），不要在组件里写死 px：
+ * 本版的整体放大是改令牌完成的，写死会让顶栏与内容脱节。
  */
 const { t } = useI18n()
 const palette = useCommandPalette()
@@ -151,10 +154,10 @@ const shortcutLabel = computed(() => {
   height: 100%;
   max-width: var(--tk-shell-max);
   margin: 0 auto;
-  padding: 0 16px;
+  padding: 0 24px;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
 }
 .header-left {
   display: flex;
@@ -177,8 +180,8 @@ const shortcutLabel = computed(() => {
 
 /* 顶栏图标按钮（移动端菜单） */
 .icon-btn {
-  width: 34px;
-  height: 34px;
+  width: 40px;
+  height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -187,7 +190,7 @@ const shortcutLabel = computed(() => {
   background: transparent;
   color: var(--tk-text-secondary);
   cursor: pointer;
-  font-size: 18px;
+  font-size: 20px;
 }
 .icon-btn:hover {
   background: var(--tk-surface-hover);
@@ -197,18 +200,22 @@ const shortcutLabel = computed(() => {
   display: none;
 }
 
-/* 命令面板入口：长得像搜索框，本质是按钮（点开面板而非直接输入） */
+/* 命令面板入口：长得像搜索框，本质是按钮（点开面板而非直接输入）。
+ * 用无描边的「安静底纹」而不是带边框的输入框：
+ * 它不是一个可以直接打字的输入框，画成输入框会让人先去点它再发现要跳面板。
+ * 放大镜图标 + 占位文案 + 快捷键角标三重提示已经足够表达可搜索。
+ * 高度 44px 与站点默认控件同高，顶栏一眼看去是一排等高的可点区域。 */
 .palette-trigger {
   width: 100%;
-  max-width: 460px;
-  height: 36px;
+  max-width: 520px;
+  height: 44px;
   display: flex;
   align-items: center;
-  gap: 9px;
-  padding: 0 10px 0 12px;
-  border: 1px solid var(--tk-border);
+  gap: 10px;
+  padding: 0 10px 0 14px;
+  border: 1px solid transparent;
   border-radius: var(--tk-radius-md);
-  background: var(--tk-surface);
+  background: var(--tk-surface-sunken);
   color: var(--tk-text-placeholder);
   font-family: inherit;
   font-size: var(--tk-text-base);
@@ -218,15 +225,14 @@ const shortcutLabel = computed(() => {
     background-color var(--tk-dur-fast) var(--tk-ease-out);
 }
 .palette-trigger:hover {
-  border-color: var(--tk-border-strong);
-  background: var(--tk-surface-hover);
+  background: var(--tk-surface-active);
   color: var(--tk-text-secondary);
 }
 .palette-trigger:active {
   transform: translateY(1px);
 }
 .trigger-icon {
-  font-size: 16px;
+  font-size: 18px;
   flex-shrink: 0;
 }
 .trigger-text {
@@ -239,13 +245,13 @@ const shortcutLabel = computed(() => {
 }
 .trigger-kbd {
   flex-shrink: 0;
-  padding: 1px 6px;
+  padding: 2px 7px;
   border: 1px solid var(--tk-border);
   border-radius: var(--tk-radius-xs);
   background: var(--tk-surface-sunken);
   font-family: inherit;
-  font-size: 11px;
-  line-height: 16px;
+  font-size: var(--tk-text-xs);
+  line-height: 18px;
   color: var(--tk-text-placeholder);
 }
 
@@ -259,7 +265,10 @@ const shortcutLabel = computed(() => {
   align-items: flex-start;
 }
 
-/* 左侧固定导航（PC 端） */
+/* 左侧固定导航（PC 端）
+ * 侧栏与正文共用同一张页面底，仅靠留白与字号区分层级；
+ * 导航项 hover 用 --tk-surface（浅色下更亮的白、深色下同样更亮），
+ * 两种主题下都是「抬起」的方向感。 */
 .app-aside {
   width: var(--tk-aside-w);
   flex-shrink: 0;
@@ -268,31 +277,34 @@ const shortcutLabel = computed(() => {
   height: calc(100dvh - var(--tk-header-h));
   overflow-y: auto;
   overscroll-behavior: contain;
-  border-right: 1px solid var(--tk-border);
-  padding: 14px 10px 32px;
-  background: var(--tk-surface);
+  padding: 26px 20px 56px;
+  background: transparent;
 }
 
+/* 内容区留白：字号放大后正文变宽，这里的留白比上一版收敛一档，
+ * 避免 1080p 屏幕上正文被挤成窄窄一条。 */
 .app-content {
   flex: 1;
   min-width: 0;
-  padding: 28px 28px 56px;
+  padding: 32px 48px 72px;
 }
 
-/* ==================== 页脚 ==================== */
+/* ==================== 页脚 ====================
+ * 承诺在左、备案号在右：两者是不同性质的信息（产品承诺 / 监管信息），
+ * 居中堆叠会让它们看起来像同一组。 */
 .app-footer {
-  border-top: 1px solid var(--tk-border);
-  background: var(--tk-surface);
+  border-top: 1px solid var(--tk-hairline);
 }
 .footer-inner {
   max-width: var(--tk-shell-max);
   margin: 0 auto;
-  padding: 18px 16px;
+  padding: 32px 24px 40px;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
-  font-size: var(--tk-text-xs);
+  justify-content: space-between;
+  gap: 10px 24px;
+  font-size: var(--tk-text-sm);
   color: var(--tk-text-placeholder);
 }
 .footer-promises {
@@ -300,16 +312,16 @@ const shortcutLabel = computed(() => {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: 14px;
+  gap: 16px;
 }
 .footer-divider {
   width: 1px;
-  height: 11px;
-  background: var(--tk-border-strong);
+  height: 12px;
+  background: var(--tk-border);
 }
 /* 备案号：监管信息，压到比产品承诺更弱的视觉层级，但仍要可读、可点 */
 .footer-icp {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--tk-text-placeholder);
   text-decoration: none;
   border-bottom: 1px solid transparent;
@@ -322,6 +334,13 @@ const shortcutLabel = computed(() => {
 }
 
 /* ==================== 响应式 ==================== */
+/* 中等宽度：收窄留白，但保持「正文两侧有空白」的基本观感 */
+@media (max-width: 1279px) {
+  .app-content {
+    padding: 28px 32px 64px;
+  }
+}
+
 @media (max-width: 767px) {
   .app-aside {
     display: none;
@@ -330,17 +349,22 @@ const shortcutLabel = computed(() => {
     display: inline-flex;
   }
   .app-content {
-    padding: 18px 14px 44px;
+    padding: 20px 16px 56px;
+  }
+  .footer-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24px 16px 32px;
   }
   /* 移动端搜索入口收成图标按钮：整条搜索框会挤掉品牌与主题切换 */
   .palette-trigger {
-    max-width: 36px;
-    height: 34px;
+    max-width: 40px;
+    height: 40px;
     padding: 0;
     justify-content: center;
     border-color: transparent;
     background: transparent;
-    font-size: 18px;
+    font-size: 20px;
   }
   .palette-trigger:hover {
     background: var(--tk-surface-hover);
diff --git a/src/layout/SideNav.vue b/src/layout/SideNav.vue
index 515dca3..8f5c40f 100644
--- a/src/layout/SideNav.vue
+++ b/src/layout/SideNav.vue
@@ -96,6 +96,9 @@ import { toolName, toolDesc, categoryLabel } from '@/i18n/helpers'
  * - 需要联网的工具在右侧点一个小圆点标记，且这是全站唯一使用状态点的地方，
  *   语义明确（是否需联网），不是装饰。
  * - 筛选对「已翻译的名称」生效，因此英文/日文/韩文界面下用对应语言也能搜到。
+ *
+ * 尺寸：导航项行高 40px 起步（上一版 34px 偏小，鼠标点起来费劲），
+ * 字号与正文同号，避免侧栏比正文「小一号」。
  */
 const { t } = useI18n()
 const route = useRoute()
@@ -171,24 +174,28 @@ const emit = defineEmits<{
 .side-nav {
   display: flex;
   flex-direction: column;
-  gap: 2px;
 }
 
-/* ---------- 筛选框 ---------- */
+/* ---------- 筛选框 ----------
+ * 只留一条底线而不是画一个框：侧栏里的框会和下方导航项的背景块打架，
+ * 视觉上把「筛选」误读成「一个大按钮」。底线 + 聚焦变色已经足够提示可输入。
+ * 高度 42px：与导航项同档，点起来有足够的热区。 */
 .nav-filter {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 7px;
-  height: 34px;
-  margin-bottom: 10px;
-  padding: 0 8px 0 10px;
-  border: 1px solid var(--tk-border);
-  border-radius: var(--tk-radius-md);
-  background: var(--tk-surface-sunken);
+  gap: 10px;
+  height: 42px;
+  margin-bottom: 20px;
+  padding: 0 2px;
+  border-bottom: 1px solid var(--tk-border);
+  transition: border-color var(--tk-dur-fast) var(--tk-ease-out);
+}
+.nav-filter:focus-within {
+  border-bottom-color: var(--tk-accent);
 }
 .filter-icon {
-  font-size: 15px;
+  font-size: 17px;
   color: var(--tk-text-placeholder);
   flex-shrink: 0;
 }
@@ -199,7 +206,7 @@ const emit = defineEmits<{
   outline: none;
   background: transparent;
   font-family: inherit;
-  font-size: var(--tk-text-sm);
+  font-size: var(--tk-text-base);
   color: var(--tk-text);
 }
 .filter-input::placeholder {
@@ -207,33 +214,35 @@ const emit = defineEmits<{
 }
 .filter-clear {
   flex-shrink: 0;
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--tk-radius-xs);
+  border-radius: var(--tk-radius-sm);
   background: transparent;
   color: var(--tk-text-placeholder);
   cursor: pointer;
-  font-size: 13px;
+  font-size: 15px;
 }
 .filter-clear:hover {
   color: var(--tk-text);
   background: var(--tk-surface-active);
 }
 
-/* ---------- 分组标题 ---------- */
+/* ---------- 分组标题 ----------
+ * 分组之间靠 16px 留白拉开，不画横线；
+ * 分类名是「目录行」，字号比导航项小一档但字距略开，扫读时先看到分组再看到工具。 */
 .nav-group {
-  margin-top: 6px;
+  margin-top: 16px;
 }
 .group-head {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 8px;
+  padding: 8px 10px 8px;
   border: none;
   background: transparent;
   border-radius: var(--tk-radius-sm);
@@ -244,7 +253,6 @@ const emit = defineEmits<{
 }
 .group-head:hover {
   color: var(--tk-text-secondary);
-  background: var(--tk-surface-hover);
 }
 .group-caret {
   font-size: 13px;
@@ -259,28 +267,32 @@ const emit = defineEmits<{
   min-width: 0;
   font-size: var(--tk-text-xs);
   font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  /* 0.06em：中文分组名（如「工作效率」）在这个字距下刚好成组，
+   * 再宽就会散成四个孤立的字。 */
+  letter-spacing: 0.06em;
 }
 .group-count {
   flex-shrink: 0;
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   font-variant-numeric: tabular-nums;
-  opacity: 0.75;
+  opacity: 0.7;
 }
 
-/* ---------- 导航项 ---------- */
+/* ---------- 导航项 ----------
+ * 行高 40px：这是全站点击最密集的列表，必须给足热区。
+ * hover 用 --tk-surface（浅色下更亮、深色下也更亮）而不是 hover 灰，
+ * 这样两种主题下都是同一种「抬起」的方向感。 */
 .group-items {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
 }
 .nav-item {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 7px 10px;
+  gap: 11px;
+  padding: 9px 12px;
   border-radius: var(--tk-radius-md);
   font-size: var(--tk-text-base);
   color: var(--tk-text-secondary);
@@ -290,32 +302,33 @@ const emit = defineEmits<{
     color var(--tk-dur-fast) var(--tk-ease-out);
 }
 .nav-item:hover {
-  background: var(--tk-surface-hover);
+  background: var(--tk-surface);
   color: var(--tk-text);
 }
-/* 活动态：青玉底纹 + 左侧 2px 指示条，比纯文字变色更容易在长列表里定位 */
+/* 活动态：主色底纹 + 左侧 3px 指示条，比纯文字变色更容易在长列表里定位。
+ * 指示条压在条目左侧外 11px 处，贴在侧栏留白里，像书页边的一条书签。 */
 .nav-item.active {
-  background: var(--tk-accent-surface-strong);
+  background: var(--tk-accent-surface);
   color: var(--tk-accent-text);
   font-weight: 550;
 }
 .nav-item.active::before {
   content: '';
   position: absolute;
-  left: -10px;
+  left: -11px;
   top: 50%;
   transform: translateY(-50%);
-  width: 2px;
-  height: 16px;
+  width: 3px;
+  height: 18px;
   border-radius: var(--tk-radius-pill);
   background: var(--tk-accent);
 }
 .home-item {
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 .nav-icon {
-  width: 17px;
-  height: 17px;
+  width: 19px;
+  height: 19px;
   flex-shrink: 0;
 }
 .nav-label {
@@ -327,8 +340,8 @@ const emit = defineEmits<{
 }
 /* 唯一的语义状态点：该工具需要联网 */
 .nav-dot {
-  width: 5px;
-  height: 5px;
+  width: 6px;
+  height: 6px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--tk-accent);
@@ -337,27 +350,28 @@ const emit = defineEmits<{
 
 /* ---------- 空状态 ---------- */
 .nav-empty {
-  padding: 20px 10px;
+  padding: 28px 10px;
 }
 .empty-title {
-  margin: 0 0 4px;
+  margin: 0 0 6px;
   font-size: var(--tk-text-sm);
   font-weight: 600;
   color: var(--tk-text-secondary);
 }
 .empty-hint {
-  margin: 0 0 10px;
+  margin: 0 0 12px;
   font-size: var(--tk-text-xs);
-  line-height: 1.55;
+  line-height: 1.6;
   color: var(--tk-text-placeholder);
 }
 .empty-btn {
-  padding: 5px 10px;
+  min-height: 34px;
+  padding: 6px 14px;
   border: 1px solid var(--tk-border);
-  border-radius: var(--tk-radius-sm);
+  border-radius: var(--tk-radius-md);
   background: var(--tk-surface);
   font-family: inherit;
-  font-size: var(--tk-text-xs);
+  font-size: var(--tk-text-sm);
   color: var(--tk-text-secondary);
   cursor: pointer;
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a2655b4..17fc81e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="home">
     <!-- ==================== 抬头区 ====================
-         左对齐单列：这一页的主角是「快速找到工具」，不是品牌宣言，
-         所以把真实的搜索框放进抬头区作为主操作，而不是摆两个装饰按钮。 -->
+         编辑感版式里抬头区只留三件东西：标题、一句说明、真实可用的搜索框。
+         不放 eyebrow 小标签（那是模板化开场，且和标题说的是同一件事），
+         也不放第二个入口按钮：服务端工具的入口就在下方专区里，
+         同一意图出现两次只会让人犹豫点哪个。 -->
     <section class="hero">
-      <p class="hero-eyebrow">{{ t('home.eyebrow') }}</p>
       <h1 class="hero-title">{{ t('home.title') }}</h1>
       <p class="hero-desc">{{ t('home.desc', { count: tools.length }) }}</p>
 
@@ -28,29 +29,28 @@
           <CloseIcon />
         </button>
       </div>
-
-      <router-link to="/api-status" class="hero-link">
-        {{ t('home.ctaSecondary') }}
-        <ChevronRightIcon aria-hidden="true" />
-      </router-link>
     </section>
 
-    <!-- ==================== 概览数字条 ====================
-         四组数字用竖线分列，数字统一等宽，刷新时不会左右跳动。 -->
-    <section v-if="!isFiltering" class="stats">
-      <div v-for="stat in stats" :key="stat.label" class="stat">
-        <span class="stat-value mono-num">{{ stat.value }}</span>
-        <span class="stat-label">{{ stat.label }}</span>
+    <!-- ==================== 事实条 ====================
+         四组数字直接摊在纸面上，不加边框也不加底纹：
+         数字本身就是视觉元素，再套一层容器反而把它们锁住了。
+         数值一律等宽，切换语言或刷新时不会左右跳动。 -->
+    <section v-if="!isFiltering" class="facts">
+      <div v-for="stat in stats" :key="stat.label" class="fact">
+        <span class="fact-value mono-num">{{ stat.value }}</span>
+        <span class="fact-label">{{ stat.label }}</span>
       </div>
     </section>
 
     <!-- ==================== 服务端工具专区 ====================
-         整块用青玉底纹与其它分区区分开：这是本期唯一需要联网、且有真实后端支撑的部分。
+         整块用青玉底纹与其它分区区分开：这是唯一需要联网、且有真实后端支撑的部分。
          开始筛选时隐藏，避免与下方 online 分类重复出现同一批工具。 -->
     <section v-if="!isFiltering && serverTools.length" class="server-zone">
       <header class="zone-head">
-        <h2 class="zone-title">{{ t('category.online.label') }}</h2>
-        <p class="zone-desc">{{ t('category.online.desc') }}</p>
+        <div class="zone-heading">
+          <h2 class="zone-title">{{ t('category.online.label') }}</h2>
+          <p class="zone-desc">{{ t('category.online.desc') }}</p>
+        </div>
         <router-link to="/api-status" class="zone-link">
           {{ t('page.api-status.title') }}
           <ChevronRightIcon aria-hidden="true" />
@@ -76,9 +76,10 @@
       </div>
     </section>
 
-    <!-- ==================== 分类分区 ====================
-         56 个工具的目录页必然是重复的卡片网格，这里把重复做「整齐」而不是做「变化」：
-         分区标题行统一结构，卡片网格统一列宽，用户可以靠固定的视觉节奏快速扫读。 -->
+    <!-- ==================== 分类目录 ====================
+         58 个工具不再做成 58 个盒子，而是像书末索引一样用发丝线分行：
+         扫读时视线沿着一列文字往下走，比逐个辨认边框快得多，
+         也让「大量同类条目」这件事本身成为版式的一部分，而不是一堆重复的框。 -->
     <section
       v-for="(group, index) in visibleGroups"
       :key="group.category.key"
@@ -86,30 +87,34 @@
       class="category"
     >
       <header class="category-head">
-        <h2 class="category-title">{{ categoryLabel(group.category.key, group.category.label) }}</h2>
+        <h2 class="category-title">
+          {{ categoryLabel(group.category.key, group.category.label) }}
+          <span class="category-count mono-num">
+            {{ t('nav.toolsCount', { count: group.items.length }) }}
+          </span>
+        </h2>
         <p class="category-desc">{{ categoryDesc(group.category.key, group.category.desc) }}</p>
-        <span class="category-count">{{ t('nav.toolsCount', { count: group.items.length }) }}</span>
       </header>
 
-      <div class="tool-grid">
+      <div class="tool-index">
         <router-link
           v-for="tool in group.items"
           :key="tool.path"
           :to="`/${tool.path}`"
-          class="tool-card"
+          class="tool-entry"
         >
-          <span class="card-head">
-            <span class="card-icon"><component :is="tool.icon" aria-hidden="true" /></span>
-            <span v-if="tool.needsNetwork" class="card-tag">{{ t('home.serverBadge') }}</span>
+          <span class="entry-icon"><component :is="tool.icon" aria-hidden="true" /></span>
+          <span class="entry-body">
+            <span class="entry-name">{{ toolName(tool.path, tool.name) }}</span>
+            <span class="entry-desc">{{ toolDesc(tool.path, tool.desc) }}</span>
           </span>
-          <span class="card-name">{{ toolName(tool.path, tool.name) }}</span>
-          <span class="card-desc">{{ toolDesc(tool.path, tool.desc) }}</span>
+          <span v-if="tool.needsNetwork" class="entry-badge">{{ t('home.serverBadge') }}</span>
         </router-link>
       </div>
     </section>
 
     <!-- ==================== 筛选无结果 ====================
-         给出可执行的下一步（换个关键词 / 一键重置），而不是只显示一句「无结果」。 -->
+         给出可执行的下一步（换关键词 / 一键重置），而不是只显示一句「无结果」。 -->
     <div v-if="isFiltering && !visibleGroups.length" class="empty">
       <p class="empty-title">{{ t('home.emptyTitle') }}</p>
       <p class="empty-hint">{{ t('home.emptyHint') }}</p>
@@ -132,12 +137,13 @@ import { SUPPORTED_LOCALES } from '@/i18n'
 /**
  * 首页：工具目录。
  *
- * 版式取舍：
- * - 抬头区左对齐而不是居中。居中大标题在目录型产品上会把视线拉向空处，
- *   左对齐能让「标题 → 搜索框 → 卡片」形成一条自然的阅读动线。
- * - 抬头区放真实可用的搜索框（直接过滤下方列表），不是装饰性按钮。
- * - 服务端工具单独成区并加底纹，是本期唯一需要联网的部分，值得与本地工具区分。
- * - 筛选期间隐藏概览数字与服务端专区，避免同一批工具在一页里出现两次。
+ * 版式取舍（编辑感方向）：
+ * - 抬头区左对齐、不放 eyebrow，标题的字号反差就是这一页的开场。
+ * - 搜索框画成一条底线而不是一个输入框盒子，和整页的「纸面感」一致。
+ * - 工具列表做成带发丝线的索引，而不是 58 个描边卡片：
+ *   条目越多，越应该靠排版而不是靠容器来组织。
+ * - 服务端工具单独成区并加底纹，是唯一需要联网的部分，值得与本地工具区分。
+ * - 筛选期间隐藏事实条与服务端专区，避免同一批工具在一页里出现两次。
  */
 const { t } = useI18n()
 
@@ -199,58 +205,58 @@ function endpointOf(path: string): string {
 
 <style scoped>
 .home {
-  max-width: 1180px;
+  max-width: 1260px;
 }
 
-/* ==================== 抬头区 ==================== */
+/* ==================== 抬头区 ====================
+ * 字号反差是这一页最主要的层次手段：标题 52px / 说明 19px（均取自令牌），
+ * 中间没有第三个档位，视线不会被夹在两层之间。
+ * 搜索框画成一条底线而不是盒子：它是「搜索」这件事本身，不该长成表单控件。 */
 .hero {
-  padding: 8px 0 36px;
-  max-width: 720px;
-}
-.hero-eyebrow {
-  margin: 0 0 12px;
-  font-size: var(--tk-text-xs);
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  color: var(--tk-accent-text);
+  padding: 16px 0 0;
 }
 .hero-title {
-  margin: 0 0 14px;
-  font-size: var(--tk-text-4xl);
-  font-weight: 680;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
+  margin: 0;
+  max-width: 20ch;
+  font-family: var(--tk-font-display);
+  font-size: var(--tk-text-5xl);
+  font-weight: 650;
+  line-height: var(--tk-leading-display);
+  letter-spacing: var(--tk-track-display);
   color: var(--tk-text);
 }
 .hero-desc {
-  margin: 0 0 26px;
-  max-width: 54ch;
-  font-size: var(--tk-text-md);
-  line-height: 1.6;
+  margin: 18px 0 0;
+  max-width: 56ch;
+  font-size: var(--tk-text-lg);
+  line-height: var(--tk-leading-body);
   color: var(--tk-text-secondary);
 }
 
-/* 抬头区搜索框：页面的主操作，尺寸比顶栏的入口更大更醒目 */
+/* 抬头区搜索框：页面的主操作。
+ * 聚焦时底线加粗成 2px（用 box-shadow 叠加，避免改 border-width 引起 1px 位移）。 */
 .hero-search {
   display: flex;
   align-items: center;
-  gap: 10px;
-  height: 48px;
-  padding: 0 12px 0 16px;
-  border: 1px solid var(--tk-border-strong);
-  border-radius: var(--tk-radius-xl);
-  background: var(--tk-surface);
-  box-shadow: var(--tk-shadow-1);
+  gap: 14px;
+  height: 60px;
+  max-width: 640px;
+  margin-top: 36px;
+  padding: 0 2px;
+  border-bottom: 1px solid var(--tk-border-strong);
   transition:
     border-color var(--tk-dur-fast) var(--tk-ease-out),
     box-shadow var(--tk-dur-fast) var(--tk-ease-out);
 }
+.hero-search:hover {
+  border-bottom-color: var(--tk-text-placeholder);
+}
 .hero-search:focus-within {
-  border-color: var(--tk-accent);
-  box-shadow: 0 0 0 3px var(--tk-accent-ring);
+  border-bottom-color: var(--tk-accent);
+  box-shadow: 0 1px 0 0 var(--tk-accent);
 }
 .hero-search-icon {
-  font-size: 18px;
+  font-size: 21px;
   color: var(--tk-text-placeholder);
   flex-shrink: 0;
 }
@@ -262,7 +268,7 @@ function endpointOf(path: string): string {
   outline: none;
   background: transparent;
   font-family: inherit;
-  font-size: var(--tk-text-md);
+  font-size: var(--tk-text-xl);
   color: var(--tk-text);
   /* 去掉 type=search 在 Safari / Chrome 上的原生清除按钮，统一用自绘按钮 */
   appearance: none;
@@ -270,140 +276,142 @@ function endpointOf(path: string): string {
 .hero-search-input::-webkit-search-cancel-button {
   display: none;
 }
+/* 焦点已由整条底线表达，输入框自身不再画一遍焦点环（会在地线上多出一个方框） */
+.hero-search-input:focus-visible {
+  outline: none;
+}
 .hero-search-input::placeholder {
   color: var(--tk-text-placeholder);
 }
 .hero-search-clear {
   flex-shrink: 0;
-  width: 26px;
-  height: 26px;
+  width: 36px;
+  height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--tk-radius-sm);
+  border-radius: var(--tk-radius-md);
   background: transparent;
   color: var(--tk-text-placeholder);
   cursor: pointer;
-  font-size: 15px;
+  font-size: 17px;
 }
 .hero-search-clear:hover {
-  background: var(--tk-surface-hover);
+  background: var(--tk-surface-sunken);
   color: var(--tk-text);
 }
 
-.hero-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  margin-top: 16px;
-  font-size: var(--tk-text-base);
-  font-weight: 550;
-  color: var(--tk-accent-text);
-  text-decoration: none;
+/* ==================== 事实条 ==================== */
+.facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 48px;
+  padding: 44px 0 56px;
 }
-.hero-link:hover {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-/* ==================== 概览数字条 ==================== */
-.stats {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1px;
-  margin-bottom: 40px;
-  border-top: 1px solid var(--tk-border);
-  border-bottom: 1px solid var(--tk-border);
-  background: var(--tk-border);
-}
-.stat {
+.fact {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 18px 20px;
-  background: var(--tk-bg);
 }
-.stat-value {
+.fact-value {
   font-size: var(--tk-text-xl);
   font-weight: 650;
   letter-spacing: -0.02em;
+  line-height: 1.2;
   color: var(--tk-text);
 }
-.stat-label {
+.fact-label {
   font-size: var(--tk-text-xs);
   color: var(--tk-text-placeholder);
 }
 
-/* ==================== 服务端工具专区 ==================== */
+/* ==================== 服务端工具专区 ====================
+ * 全页唯一有底纹的区块：它需要和本地工具区分开，这个区分值得用一整块底色来表达。 */
 .server-zone {
-  margin-bottom: 44px;
-  padding: 26px 26px 28px;
-  border: 1px solid var(--tk-border);
+  margin-bottom: var(--tk-space-9);
+  padding: 28px 30px 32px;
   border-radius: var(--tk-radius-2xl);
   background: var(--tk-accent-surface);
 }
 .zone-head {
-  margin-bottom: 20px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 22px;
+}
+.zone-heading {
+  min-width: 0;
 }
 .zone-title {
   margin: 0 0 6px;
+  font-family: var(--tk-font-display);
   font-size: var(--tk-text-xl);
-  font-weight: 650;
-  letter-spacing: -0.02em;
+  font-weight: 630;
+  letter-spacing: var(--tk-track-title);
   color: var(--tk-text);
 }
 .zone-desc {
-  margin: 0 0 10px;
-  max-width: 60ch;
+  margin: 0;
+  max-width: 56ch;
   font-size: var(--tk-text-base);
+  line-height: 1.7;
   color: var(--tk-text-secondary);
 }
 .zone-link {
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  font-size: var(--tk-text-sm);
+  margin-top: 3px;
+  font-size: var(--tk-text-base);
   font-weight: 550;
   color: var(--tk-accent-text);
   text-decoration: none;
+  white-space: nowrap;
 }
 .zone-link:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
 }
-/* 横向卡片：与服务端专区「接口」的气质一致，也与下方分类的竖向卡片区分开 */
+
+/* 专区内的卡片：实底 + 轻投影抬起，与服务端专区「接口」的气质一致，
+ * 也与下方分类的索引行（无底色）明显不同。 */
 .zone-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 12px;
 }
 .server-card {
   display: flex;
   align-items: flex-start;
-  gap: 13px;
-  padding: 15px 16px;
-  border: 1px solid var(--tk-border);
+  gap: 14px;
+  padding: 20px 22px;
   border-radius: var(--tk-radius-xl);
   background: var(--tk-surface);
   text-decoration: none;
+  box-shadow: var(--tk-shadow-1);
   transition:
-    border-color var(--tk-dur-fast) var(--tk-ease-out),
+    box-shadow var(--tk-dur-fast) var(--tk-ease-out),
     transform var(--tk-dur-fast) var(--tk-ease-out);
 }
 .server-card:hover {
-  border-color: var(--tk-accent);
+  box-shadow: var(--tk-shadow-2);
   transform: translateY(-2px);
 }
+.server-card:active {
+  transform: translateY(0);
+}
 .server-card-icon {
   flex-shrink: 0;
-  width: 34px;
-  height: 34px;
+  width: 38px;
+  height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--tk-radius-md);
-  font-size: 19px;
+  font-size: 20px;
   color: var(--tk-accent-text);
   background: var(--tk-accent-surface-strong);
 }
@@ -412,7 +420,7 @@ function endpointOf(path: string): string {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
 }
 .server-card-name {
   font-size: var(--tk-text-base);
@@ -421,127 +429,140 @@ function endpointOf(path: string): string {
 }
 .server-card-desc {
   font-size: var(--tk-text-sm);
-  line-height: 1.5;
+  line-height: 1.6;
   color: var(--tk-text-secondary);
 }
 .server-card-endpoint {
-  margin-top: 3px;
-  font-size: 11px;
+  margin-top: 4px;
+  font-size: var(--tk-text-xs);
   letter-spacing: -0.01em;
   color: var(--tk-text-placeholder);
 }
 
-/* ==================== 分类分区 ==================== */
+/* ==================== 分类目录 ====================
+ * 分区之间用 80px 留白分隔，不加横线：留白本身就是分隔符，
+ * 再画一条线等于把刚空出来的呼吸感又收回去了。 */
 .category {
-  margin-bottom: 40px;
+  margin-bottom: var(--tk-space-9);
 }
 .category-head {
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--tk-border);
+  margin-bottom: 2px;
 }
 .category-title {
-  margin: 0 0 3px;
-  font-size: var(--tk-text-lg);
-  font-weight: 650;
-  letter-spacing: -0.015em;
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin: 0;
+  font-family: var(--tk-font-display);
+  font-size: var(--tk-text-2xl);
+  font-weight: 640;
+  letter-spacing: var(--tk-track-title);
+  line-height: 1.25;
   color: var(--tk-text);
 }
-.category-desc {
-  margin: 0;
-  font-size: var(--tk-text-sm);
-  color: var(--tk-text-secondary);
-}
+/* 数量作为标题旁的弱化注记，而不是单独占一行 */
 .category-count {
-  display: block;
-  margin-top: 6px;
-  font-size: var(--tk-text-xs);
+  font-size: var(--tk-text-sm);
+  font-weight: 400;
+  letter-spacing: 0;
   color: var(--tk-text-placeholder);
 }
+.category-desc {
+  margin: 8px 0 0;
+  max-width: 56ch;
+  font-size: var(--tk-text-base);
+  line-height: 1.7;
+  color: var(--tk-text-secondary);
+}
 
-/* ==================== 工具卡片网格 ==================== */
-.tool-grid {
+/* 索引网格：条目之间只用「上边线」一条规则（不用四边描边，也不用上下双线）。
+ * 多列时每列各自成栏，列间距 48px 保证两栏文字不会读串行。 */
+.tool-index {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  column-gap: 48px;
 }
-.tool-card {
+.tool-entry {
   display: flex;
-  flex-direction: column;
-  gap: 7px;
-  padding: 16px;
-  border: 1px solid var(--tk-border);
-  border-radius: var(--tk-radius-xl);
-  background: var(--tk-surface);
+  align-items: flex-start;
+  gap: 14px;
+  padding: 20px 0;
+  border-top: 1px solid var(--tk-hairline);
   text-decoration: none;
-  transition:
-    border-color var(--tk-dur-fast) var(--tk-ease-out),
-    transform var(--tk-dur-fast) var(--tk-ease-out),
-    box-shadow var(--tk-dur-fast) var(--tk-ease-out);
+  transition: transform var(--tk-dur-fast) var(--tk-ease-out);
 }
-.tool-card:hover {
-  border-color: var(--tk-accent);
-  transform: translateY(-2px);
-  box-shadow: var(--tk-shadow-2);
-}
-.card-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.card-icon {
-  width: 32px;
-  height: 32px;
+/* 图标常态是中性灰：58 个图标全部染成主色会把主色的含义稀释掉，
+ * 主色只在 hover 时出现，指向「你正在看的这一条」。 */
+.entry-icon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--tk-radius-md);
   font-size: 18px;
-  color: var(--tk-accent-text);
-  background: var(--tk-surface-sunken);
+  color: var(--tk-text-placeholder);
+  transition: color var(--tk-dur-fast) var(--tk-ease-out);
 }
-.tool-card:hover .card-icon {
-  background: var(--tk-accent-surface-strong);
+.entry-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
-.card-tag {
-  flex-shrink: 0;
-  padding: 1px 7px;
-  border-radius: var(--tk-radius-pill);
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--tk-accent-text);
-  background: var(--tk-surface-sunken);
-}
-.card-name {
+.entry-name {
   font-size: var(--tk-text-base);
   font-weight: 600;
+  letter-spacing: -0.01em;
   color: var(--tk-text);
+  transition: color var(--tk-dur-fast) var(--tk-ease-out);
 }
-.card-desc {
+.entry-desc {
   font-size: var(--tk-text-sm);
-  line-height: 1.55;
+  line-height: 1.6;
   color: var(--tk-text-secondary);
 }
+.entry-badge {
+  flex-shrink: 0;
+  margin-top: 3px;
+  padding: 2px 9px;
+  border-radius: var(--tk-radius-pill);
+  font-size: var(--tk-text-xs);
+  font-weight: 500;
+  color: var(--tk-accent-text);
+  background: var(--tk-accent-surface-strong);
+}
+.tool-entry:hover .entry-name,
+.tool-entry:hover .entry-icon {
+  color: var(--tk-accent-text);
+}
+.tool-entry:active {
+  transform: translateY(1px);
+}
 
 /* ==================== 空状态 ==================== */
 .empty {
-  padding: 56px 20px;
+  padding: 64px 20px;
   text-align: center;
 }
 .empty-title {
-  margin: 0 0 6px;
+  margin: 0 0 10px;
+  font-family: var(--tk-font-display);
   font-size: var(--tk-text-lg);
-  font-weight: 650;
+  font-weight: 640;
+  letter-spacing: var(--tk-track-title);
   color: var(--tk-text);
 }
 .empty-hint {
-  margin: 0 0 18px;
+  margin: 0 0 24px;
   font-size: var(--tk-text-base);
   color: var(--tk-text-secondary);
 }
 .empty-btn {
-  padding: 8px 16px;
+  min-height: 44px;
+  padding: 10px 22px;
   border: 1px solid var(--tk-border-strong);
   border-radius: var(--tk-radius-md);
   background: var(--tk-surface);
@@ -550,55 +571,86 @@ function endpointOf(path: string): string {
   font-weight: 550;
   color: var(--tk-text);
   cursor: pointer;
+  transition:
+    border-color var(--tk-dur-fast) var(--tk-ease-out),
+    color var(--tk-dur-fast) var(--tk-ease-out);
 }
 .empty-btn:hover {
   border-color: var(--tk-accent);
   color: var(--tk-accent-text);
 }
 
-/* ==================== 响应式 ==================== */
+/* ==================== 响应式 ====================
+ * 留白随断点阶梯式收敛，但每一级都保持「标题明显大于正文」这条底线。 */
+@media (max-width: 1279px) {
+  .tool-index {
+    column-gap: 36px;
+  }
+}
 @media (max-width: 1023px) {
   .hero-title {
-    font-size: var(--tk-text-3xl);
+    font-size: 40px;
   }
-  .stats {
-    grid-template-columns: repeat(2, 1fr);
+  .hero-search-input {
+    font-size: var(--tk-text-lg);
+  }
+  .facts {
+    gap: 16px 36px;
+    padding: 40px 0 48px;
+  }
+  .category {
+    margin-bottom: 56px;
+  }
+  .server-zone {
+    margin-bottom: 56px;
   }
 }
 @media (max-width: 767px) {
   .hero {
-    padding: 4px 0 28px;
+    padding: 8px 0 0;
   }
   .hero-title {
-    font-size: 28px;
+    max-width: none;
+    font-size: 32px;
   }
   .hero-desc {
+    margin-top: 14px;
     font-size: var(--tk-text-base);
-    margin-bottom: 20px;
   }
   .hero-search {
-    height: 44px;
-    border-radius: var(--tk-radius-lg);
+    height: 52px;
+    margin-top: 26px;
   }
-  .stats {
-    margin-bottom: 32px;
+  .hero-search-input {
+    font-size: var(--tk-text-md);
   }
-  .stat {
-    padding: 14px 16px;
+  .facts {
+    gap: 16px 32px;
+    padding: 36px 0 40px;
+  }
+  .fact-value {
+    font-size: var(--tk-text-lg);
   }
   .server-zone {
-    padding: 20px 16px;
+    padding: 20px 18px 22px;
     border-radius: var(--tk-radius-xl);
-    margin-bottom: 34px;
+    margin-bottom: 44px;
+  }
+  .zone-head {
+    flex-direction: column;
+    gap: 10px;
   }
   .zone-grid {
     grid-template-columns: 1fr;
   }
-  .tool-grid {
-    grid-template-columns: 1fr;
-  }
   .category {
-    margin-bottom: 32px;
+    margin-bottom: 40px;
+  }
+  .category-title {
+    font-size: var(--tk-text-xl);
+  }
+  .tool-index {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/src/views/address-parse/AddressParseView.vue b/src/views/address-parse/AddressParseView.vue
index 1e06858..ada40a5 100644
--- a/src/views/address-parse/AddressParseView.vue
+++ b/src/views/address-parse/AddressParseView.vue
@@ -225,7 +225,7 @@ function clearAll() {
   grid-column: 1 / -1;
 }
 .info-label {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .info-value {
diff --git a/src/views/api-status/ApiStatusView.vue b/src/views/api-status/ApiStatusView.vue
index 0ddf1d6..592b1a4 100644
--- a/src/views/api-status/ApiStatusView.vue
+++ b/src/views/api-status/ApiStatusView.vue
@@ -284,14 +284,14 @@ onMounted(() => {
 .endpoint-path {
   display: block;
   margin-top: 2px;
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   color: var(--tk-text-placeholder);
   word-break: break-all;
 }
 .method-badge {
   padding: 2px 7px;
   border-radius: var(--tk-radius-xs);
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   font-weight: 600;
   color: var(--tk-text-secondary);
   background: var(--tk-surface-sunken);
@@ -352,7 +352,7 @@ onMounted(() => {
 }
 .latency-unit {
   margin-left: 2px;
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   color: var(--tk-text-placeholder);
 }
 /* 无底槽细条：只表达相对快慢 */
diff --git a/src/views/ascii-art/AsciiArtView.vue b/src/views/ascii-art/AsciiArtView.vue
index f3f0455..cd0b41f 100644
--- a/src/views/ascii-art/AsciiArtView.vue
+++ b/src/views/ascii-art/AsciiArtView.vue
@@ -199,7 +199,7 @@ function onHistorySelect(text: string) {
   flex-wrap: wrap;
 }
 .size-tip {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .ascii-block {
@@ -209,7 +209,7 @@ function onHistorySelect(text: string) {
   border-radius: 6px;
   background: var(--td-bg-color-container);
   font-family: ui-monospace, 'Courier New', Consolas, monospace;
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   line-height: 1.1;
   white-space: pre;
   overflow-x: auto;
diff --git a/src/views/bmi/BmiView.vue b/src/views/bmi/BmiView.vue
index 7684d95..bdb3643 100644
--- a/src/views/bmi/BmiView.vue
+++ b/src/views/bmi/BmiView.vue
@@ -157,7 +157,7 @@ function onHistorySelect(text: string) {
 }
 .form-tip {
   margin: 12px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 </style>
diff --git a/src/views/color-namer/ColorNamerView.vue b/src/views/color-namer/ColorNamerView.vue
index caf6b69..5979080 100644
--- a/src/views/color-namer/ColorNamerView.vue
+++ b/src/views/color-namer/ColorNamerView.vue
@@ -234,7 +234,7 @@ function copySwatch(hex: string) {
 .palette-name {
   display: block;
   padding: 4px 6px;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-secondary);
   text-align: center;
   overflow: hidden;
diff --git a/src/views/cron/CronView.vue b/src/views/cron/CronView.vue
index 28b8ce6..7d0d671 100644
--- a/src/views/cron/CronView.vue
+++ b/src/views/cron/CronView.vue
@@ -267,7 +267,7 @@ function onHistorySelect(text: string) {
   background: var(--td-bg-color-secondarycontainer);
 }
 .field-label {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .field-value {
diff --git a/src/views/date-calc/DateCalcView.vue b/src/views/date-calc/DateCalcView.vue
index 0acbec0..28dcb88 100644
--- a/src/views/date-calc/DateCalcView.vue
+++ b/src/views/date-calc/DateCalcView.vue
@@ -398,7 +398,7 @@ function onHistorySelect(text: string) {
 }
 .form-tip {
   margin: 12px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 /* 日期选择器：窄屏下占满可用宽度，避免固定宽度撑出横向滚动条 */
diff --git a/src/views/exchange-rate/ExchangeRateView.vue b/src/views/exchange-rate/ExchangeRateView.vue
index e200e16..65bb92f 100644
--- a/src/views/exchange-rate/ExchangeRateView.vue
+++ b/src/views/exchange-rate/ExchangeRateView.vue
@@ -141,7 +141,7 @@ async function query() {
 }
 .w-updated {
   margin: 8px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 </style>
diff --git a/src/views/express-query/ExpressQueryView.vue b/src/views/express-query/ExpressQueryView.vue
index 002cd31..1b2c611 100644
--- a/src/views/express-query/ExpressQueryView.vue
+++ b/src/views/express-query/ExpressQueryView.vue
@@ -91,7 +91,7 @@ async function query() {
 }
 .hint {
   margin: 12px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .head {
@@ -143,7 +143,7 @@ async function query() {
   line-height: 1.5;
 }
 .trace-time {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
   margin-top: 2px;
 }
diff --git a/src/views/hello-world/HelloWorldView.vue b/src/views/hello-world/HelloWorldView.vue
index 5c327d9..3f1d0fa 100644
--- a/src/views/hello-world/HelloWorldView.vue
+++ b/src/views/hello-world/HelloWorldView.vue
@@ -116,7 +116,7 @@ function copyItem(item: LangItem) {
   border-radius: 6px;
   background: var(--td-bg-color-container);
   font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   line-height: 1.6;
   white-space: pre-wrap;
   word-break: break-all;
diff --git a/src/views/idcard/IdcardView.vue b/src/views/idcard/IdcardView.vue
index 44487f2..95ae838 100644
--- a/src/views/idcard/IdcardView.vue
+++ b/src/views/idcard/IdcardView.vue
@@ -192,7 +192,7 @@ function clearAll() {
   background: var(--td-bg-color-secondarycontainer);
 }
 .info-label {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .info-value {
diff --git a/src/views/image-compress/ImageCompressView.vue b/src/views/image-compress/ImageCompressView.vue
index 07bd418..a78c1de 100644
--- a/src/views/image-compress/ImageCompressView.vue
+++ b/src/views/image-compress/ImageCompressView.vue
@@ -428,7 +428,7 @@ onBeforeUnmount(() => {
   width: 200px;
 }
 .form-suffix {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .form-tip {
@@ -489,7 +489,7 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-error-color);
   border: 1px dashed var(--td-border-level-2-color);
   background: var(--td-bg-color-container);
@@ -509,12 +509,12 @@ onBeforeUnmount(() => {
 }
 .result-size {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-secondary);
 }
 .result-error {
   margin: 4px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-error-color);
 }
 .result-actions {
diff --git a/src/views/image-to-ico/ImageToIcoView.vue b/src/views/image-to-ico/ImageToIcoView.vue
index 12f306d..49e8d72 100644
--- a/src/views/image-to-ico/ImageToIcoView.vue
+++ b/src/views/image-to-ico/ImageToIcoView.vue
@@ -404,7 +404,7 @@ onBeforeUnmount(() => {
   font-weight: 600;
 }
 .form-suffix {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .form-actions {
@@ -470,7 +470,7 @@ onBeforeUnmount(() => {
 }
 .summary-tip {
   margin: 4px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-warning-color);
 }
 .result-actions {
diff --git a/src/views/ip-info/IpInfoView.vue b/src/views/ip-info/IpInfoView.vue
index fc7cc6a..50d78e2 100644
--- a/src/views/ip-info/IpInfoView.vue
+++ b/src/views/ip-info/IpInfoView.vue
@@ -184,7 +184,7 @@ onBeforeUnmount(() => {
 .block-tag {
   padding: 1px 8px;
   border-radius: var(--tk-radius-pill);
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   color: var(--tk-text-placeholder);
   background: var(--tk-surface-sunken);
 }
diff --git a/src/views/jwt-parse/JwtParseView.vue b/src/views/jwt-parse/JwtParseView.vue
index 3dad027..b5d98d9 100644
--- a/src/views/jwt-parse/JwtParseView.vue
+++ b/src/views/jwt-parse/JwtParseView.vue
@@ -217,7 +217,7 @@ function clearAll() {
   font-size: 13px;
 }
 .info-label {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .info-value {
diff --git a/src/views/morse-code/MorseCodeView.vue b/src/views/morse-code/MorseCodeView.vue
index 34763f6..70620b6 100644
--- a/src/views/morse-code/MorseCodeView.vue
+++ b/src/views/morse-code/MorseCodeView.vue
@@ -271,7 +271,7 @@ function onHistorySelect(text: string) {
 }
 .note {
   margin: 12px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 </style>
diff --git a/src/views/mortgage/MortgageView.vue b/src/views/mortgage/MortgageView.vue
index 88febdb..df21611 100644
--- a/src/views/mortgage/MortgageView.vue
+++ b/src/views/mortgage/MortgageView.vue
@@ -246,7 +246,7 @@ function onHistorySelect(text: string) {
 }
 .form-tip {
   margin: 12px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 @media (max-width: 767px) {
diff --git a/src/views/network-test/NetworkTestView.vue b/src/views/network-test/NetworkTestView.vue
index 2edad5d..8294395 100644
--- a/src/views/network-test/NetworkTestView.vue
+++ b/src/views/network-test/NetworkTestView.vue
@@ -222,7 +222,7 @@ function detailLabel(k: string): string {
 }
 .hint {
   margin: 10px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .res-main {
@@ -259,7 +259,7 @@ function detailLabel(k: string): string {
   border-radius: 8px;
 }
 .ri span {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .ri b {
diff --git a/src/views/password-gen/PasswordGenView.vue b/src/views/password-gen/PasswordGenView.vue
index 2718b7d..58ec731 100644
--- a/src/views/password-gen/PasswordGenView.vue
+++ b/src/views/password-gen/PasswordGenView.vue
@@ -224,7 +224,7 @@ onMounted(() => {
   font-weight: 600;
 }
 .form-suffix {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .form-actions {
@@ -253,7 +253,7 @@ onMounted(() => {
   font-weight: 600;
 }
 .strength-entropy {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .strength-bar {
diff --git a/src/views/phone-locate/PhoneLocateView.vue b/src/views/phone-locate/PhoneLocateView.vue
index b685f96..11af913 100644
--- a/src/views/phone-locate/PhoneLocateView.vue
+++ b/src/views/phone-locate/PhoneLocateView.vue
@@ -106,7 +106,7 @@ async function query() {
   border-radius: 8px;
 }
 .pi span {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .pi b {
diff --git a/src/views/placeholder-image/PlaceholderImageView.vue b/src/views/placeholder-image/PlaceholderImageView.vue
index 7409b76..79c3697 100644
--- a/src/views/placeholder-image/PlaceholderImageView.vue
+++ b/src/views/placeholder-image/PlaceholderImageView.vue
@@ -234,7 +234,7 @@ watch([width, height, bgColor, textColor, text, fontRatio], draw, { immediate: t
 }
 .hex-text {
   font-family: ui-monospace, Consolas, monospace;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .text-input {
diff --git a/src/views/pomodoro/PomodoroView.vue b/src/views/pomodoro/PomodoroView.vue
index 3b1390b..f62a5fb 100644
--- a/src/views/pomodoro/PomodoroView.vue
+++ b/src/views/pomodoro/PomodoroView.vue
@@ -215,7 +215,7 @@ onBeforeUnmount(() => {
 }
 .form-tip {
   margin: 12px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 @media (max-width: 767px) {
diff --git a/src/views/regex-test/RegexTestView.vue b/src/views/regex-test/RegexTestView.vue
index 6d68eb3..c59e76b 100644
--- a/src/views/regex-test/RegexTestView.vue
+++ b/src/views/regex-test/RegexTestView.vue
@@ -213,7 +213,7 @@ function onHistorySelect(raw: string) {
 }
 .hint-text {
   margin: 8px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .no-match {
@@ -252,7 +252,7 @@ function onHistorySelect(raw: string) {
   justify-content: center;
   border-radius: 50%;
   background: var(--td-bg-color-secondarycontainer);
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-secondary);
 }
 .match-text {
@@ -264,7 +264,7 @@ function onHistorySelect(raw: string) {
   word-break: break-all;
 }
 .match-pos {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .match-groups {
@@ -275,7 +275,7 @@ function onHistorySelect(raw: string) {
 }
 .group-tag {
   font-family: monospace;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   padding: 2px 8px;
   border-radius: 4px;
   background: var(--td-bg-color-secondarycontainer);
diff --git a/src/views/regex-visual/RegexVisualView.vue b/src/views/regex-visual/RegexVisualView.vue
index b68b6f3..a6c52e7 100644
--- a/src/views/regex-visual/RegexVisualView.vue
+++ b/src/views/regex-visual/RegexVisualView.vue
@@ -295,7 +295,7 @@ function onHistorySelect(text: string) {
 }
 .tag {
   flex-shrink: 0;
-  font-size: 11px;
+  font-size: var(--tk-text-xs);
   padding: 1px 6px;
   border-radius: 3px;
   color: #fff;
@@ -334,7 +334,7 @@ function onHistorySelect(text: string) {
 }
 .desc {
   color: var(--td-text-color-secondary);
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
 }
 .match-list {
   margin-top: 12px;
@@ -352,7 +352,7 @@ function onHistorySelect(text: string) {
 }
 .m-index {
   color: var(--td-text-color-placeholder);
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
 }
 .m-text {
   font-family: ui-monospace, Consolas, monospace;
diff --git a/src/views/translate/TranslateView.vue b/src/views/translate/TranslateView.vue
index 5c6d200..f691738 100644
--- a/src/views/translate/TranslateView.vue
+++ b/src/views/translate/TranslateView.vue
@@ -695,7 +695,7 @@ function clearAll() {
 
 .char-count {
   margin: 4px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
   text-align: right;
 }
@@ -753,12 +753,12 @@ function clearAll() {
 }
 .dict-example {
   margin: 6px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-secondary);
 }
 .dict-src {
   margin: 10px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 
@@ -782,7 +782,7 @@ function clearAll() {
 }
 .s-hint {
   margin: 8px 0 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 
@@ -796,7 +796,7 @@ function clearAll() {
 }
 .attr {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 
diff --git a/src/views/url-parse/UrlParseView.vue b/src/views/url-parse/UrlParseView.vue
index cb4e691..128031e 100644
--- a/src/views/url-parse/UrlParseView.vue
+++ b/src/views/url-parse/UrlParseView.vue
@@ -242,7 +242,7 @@ function onHistorySelect(text: string) {
   background: var(--td-bg-color-secondarycontainer);
 }
 .info-label {
-  font-size: 12px;
+  font-size: var(--tk-text-xs);
   color: var(--td-text-color-placeholder);
 }
 .info-value {
diff --git a/unocss.config.ts b/unocss.config.ts
index 56bf323..f8111af 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -6,6 +6,9 @@ import { defineConfig, presetUno, transformerDirectives } from 'unocss'
  * 颜色一律走设计令牌 CSS 变量（--tk-* / --td-*），不要写死色值，
  * 这样昼夜主题切换与品牌改色都只需改 tokens.scss 一处。
  * 颜色写法用 arbitrary value，例如：bg-[var(--tk-surface)]
+ *
+ * 尺寸同理：字号用 text-13px / text-16px 这种「与令牌同一档位」的值，
+ * 不要在这里写回 12px，那是上一版「字太小」的根因。
  */
 export default defineConfig({
   presets: [presetUno()],
@@ -17,13 +20,14 @@ export default defineConfig({
     'form-row': 'flex flex-col gap-2 md:flex-row md:items-center md:gap-4',
     // 结果代码块：等宽字体 + 面板块底色
     'code-block':
-      'rounded-[var(--tk-radius-md)] bg-[var(--tk-surface-sunken)] px-3 py-2.5 font-mono text-13px leading-relaxed break-all whitespace-pre-wrap',
+      'rounded-[var(--tk-radius-md)] bg-[var(--tk-surface-sunken)] px-4 py-3.5 font-mono text-14px leading-relaxed break-all whitespace-pre-wrap',
     // 通用面板（自定义区块的轻量容器）
     // 自带内边距，直接写 class="panel tool-section" 即可，不必每处再补 padding。
+    // 本版容器重新「有形」：白底 + 实描边，与页面底（--tk-bg）拉开层次。
     // 注意：页面 scoped 样式（如 .block[data-v-*]）权重高于本类，需要单独覆盖时照常写即可。
     'panel':
-      'rounded-[var(--tk-radius-xl)] border border-[var(--tk-border)] bg-[var(--tk-surface)] p-5 md:p-6',
+      'rounded-[var(--tk-radius-xl)] border border-[var(--tk-border)] bg-[var(--tk-surface)] p-5 md:p-7',
     // 说明性小字
-    'hint-text': 'text-12px text-[var(--tk-text-placeholder)]',
+    'hint-text': 'text-13px text-[var(--tk-text-placeholder)]',
   },
 })