feat: 青主题产品壳与静态资源版本号

对齐 SPA 顶栏工具条与清青强调色，CSS/JS 带构建 ?v= 长缓存穿透。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-30 05:43:25 +08:00
parent 3bd0b990a1
commit e0683ef262
15 changed files with 827 additions and 554 deletions
--- a/2
+++ b/2
@@ -5,7 +5,7 @@ APP_NAME    := jiang13
 MAIN_PKG    := ./cmd/jiang13
 BUILD_DIR   := dist
 DEV_DATA_DIR := dist/data
-VERSION     := 1.0.0
+VERSION     := $(shell git rev-parse --short HEAD 2>/dev/null | sed 's/^/1.0.0+/' || echo 1.0.0)
 LDFLAGS     := -s -w -X main.version=$(VERSION)
 REGISTRY_IMAGE := hangzhang714128/jiang13-forum

--- a/build.ps1
+++ b/build.ps1
@@ -14,6 +14,12 @@ $MainPkg = './cmd/jiang13'
 $BuildDir = 'dist'
 $DevDataDir = 'dist/data'
 $Version = '1.0.0'
+try {
+    $gitSha = (git rev-parse --short HEAD 2>$null)
+    if ($LASTEXITCODE -eq 0 -and $gitSha) {
+        $Version = "1.0.0+$gitSha"
+    }
+} catch {}
 $RegistryImage = 'hangzhang714128/jiang13-forum'
 $Ldlags = "-s -w -X main.version=$Version"

--- a/cmd/jiang13/program.go
+++ b/cmd/jiang13/program.go
@@ -57,6 +57,7 @@ func (p *program) Stop(s kardsvc.Service) error {

 func (p *program) setup() error {
 	cfg := p.cfg
+	cfg.Version = version

 	logFile, err := os.OpenFile(cfg.LogFile, os.O_CREATE|os.O_WRONLY|os.O_APPEND, 0644)
 	if err != nil {
--- a/config/config.go
+++ b/config/config.go
@@ -52,6 +52,7 @@ type Config struct {
 	LogFile       string
 	ServiceAction string
 	DevMode       bool
+	Version       string // 构建版本（ldflags）；用于 /ssr-assets ?v= 缓存穿透
 	DB            DatabaseConfig
 }

--- a/docs/rebuild-spec/09-ssr-progress.md
+++ b/docs/rebuild-spec/09-ssr-progress.md
@@ -10,7 +10,7 @@

 | 项 | 值 |
 |----|-----|
-| **上一刀** | 公开页设计系统重绘（token + 顶栏/三栏/Feed/帖详情壳层） |
+| **上一刀** | 青主题产品化重绘 + 静态资源 `?v=` 版本号 |
 | **下一刀** | 需点名（移动侧栏抽屉 / OIDC Admin / S3 / Gitea / 表格表情…） |
 | **工作区** | 应干净 |

@@ -18,7 +18,7 @@

 ## 一句话状态

-核心论坛、Admin、Limits/伪静态、嵌套评论、Markdown 编辑器、主题、公开页设计系统已齐；本分支 `routers/api` 仅保留机器入口。余量多为后置与体验打磨。
+核心论坛、Admin、Limits/伪静态、嵌套评论、Markdown 编辑器、主题、公开页青主题产品壳与资源版本号已齐；本分支 `routers/api` 仅保留机器入口。余量多为后置与体验打磨。

 ---

@@ -32,7 +32,7 @@
 | Markdown 工具栏 + preview | 已迁 |
 | 浅色 / 暗色 / 跟随系统 | 已迁（CSS 媒体查询，无 head 防闪脚本） |
 | 未挂载论坛 JSON API | 已删（对照 `main`） |
-| 公开页设计系统 | 已迁（[10-design-system.md](10-design-system.md) + 壳层 CSS） |
+| 公开页设计系统 | 已迁（清青产品 chrome + `?v=`；[10-design-system.md](10-design-system.md)） |

 ---

--- a/docs/rebuild-spec/10-design-system.md
+++ b/docs/rebuild-spec/10-design-system.md
@@ -3,19 +3,21 @@
 > **读者**：实现公开页视觉 / CSS 的 AI  
 > **前置**：[01-product.md](01-product.md)、[06-pages-ux.md](06-pages-ux.md)  
 > **实现**：[`web_src/css/site.css`](../../web_src/css/site.css)、[`templates/base/`](../../templates/base/)  
-> **品牌**：默认「姜十三论坛」（安装/后台可改 `site_name`）
+> **品牌**：默认「姜十三论坛」（安装/后台可改 `site_name`）；强调色取 **青**（纪念向，非 SPA 草绿）

 视觉可重设；**信息架构与关键操作流以 06 为准**。本文件只约定公开页壳层与内容表面的视觉语言。

+静态资源须带构建版本号：`/ssr-assets/site.css?v={{.AssetVersion}}`（长缓存 + query 穿透，对齐 Gitea）。
+
 ---

 ## 1. 气质

 | 项 | 约定 |
 |----|------|
-| 关键词 | 墨青、编辑式、冷静、可读、偏内容 |
-| 密度 | 接近 V2EX / NGA：一屏多信息，非营销留白 |
-| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto 默认堆 |
+| 关键词 | 清青、产品感、冷静、可读、偏内容 |
+| 密度 | 接近 V2EX / NGA，同时顶栏对齐 SPA 式工具条 |
+| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto、顶栏链接墙、依赖本机 IBM Plex |

 ---

@@ -25,44 +27,45 @@

 | Token | 浅色 | 暗色 | 用途 |
 |-------|------|------|------|
-| `--j13-bg` | `#f3f4f6` | `#0f1419` | 页底（冷纸 / 墨底） |
-| `--j13-surface` | `#ffffff` | `#1a222c` | 顶栏、主栏底 |
+| `--j13-bg` | `#f4f8fa` | `#0c1216` | 页底（微青灰） |
+| `--j13-surface` | `#ffffff` | `#152028` | 顶栏、主栏 |
 | `--j13-text` | `#14212b` | `#e8eef2` | 正文 |
-| `--j13-muted` | `#5b6b76` | `#8b9aab` | 次要 |
-| `--j13-accent` | `#0d9488` | `#2dd4bf` | 链接 / 强调 |
-| `--j13-accent-ink` | `#134e4a` | `#99f6e4` | 品牌字、强强调 |
-| `--j13-on-accent` | `#ffffff` | `#134e4a` | 主按钮字 |
-| `--j13-border` | `#d5dde3` | `#2c3844` | 分隔线 |
-| `--j13-hover` | `#e8eef0` | `#243040` | 行 hover |
+| `--j13-muted` | `#5a6b75` | `#8b9aab` | 次要 |
+| `--j13-accent` | `#0e8a9a` | `#2ec4d6` | 链接 / 主按钮 / 分段 active |
+| `--j13-accent-ink` | `#0b5f6b` | `#9ae8f0` | 品牌字、强强调 |
+| `--j13-soft` | `#e6f7f9` | `#12343a` | 侧栏 active 底、focus ring |
+| `--j13-on-accent` | `#ffffff` | `#0b5f6b` | 主按钮字 |
+| `--j13-border` | `#d3e0e6` | `#2a3a44` | 分隔 |
+| `--j13-hover` | `#e8f4f6` | `#1c2d36` | 行 hover |

-语义色（ok / warn / err / pin / feat）继续用既有 `--j13-ok-*` 等，随主题成对定义。
+语义色（ok / warn / err / pin / feat）随主题成对定义；feat 用青 soft，不用草绿。

 ### 2.2 字号与字重

 | 阶 | 尺寸 | 用途 |
 |----|------|------|
-| `xs` | 0.75rem | 口号、辅助 |
-| `sm` | 0.8125rem | 元信息、侧栏 |
+| `xs` | 0.72–0.75rem | 口号、辅助 |
+| `sm` | 0.8125rem | 元信息、侧栏、顶栏次级 |
 | `md` | 0.9375rem | 正文默认 |
-| `lg` | 1.125rem | Feed 标题 |
+| `lg` | 1.15rem | Feed 标题 |
 | `xl` | 1.35rem | 帖标题 |
-| `brand` | 1.25rem / 700 | 顶栏站点名 |
+| `brand` | 1.3rem / 700 | 顶栏站点名 |

-字体栈：西文优先 `IBM Plex Sans`（本机有则用），中文 `PingFang SC` / `Hiragino Sans GB` / `Noto Sans SC` / `Microsoft YaHei`；代码 `IBM Plex Mono` / `Cascadia Code` / `Consolas`。不引入 Inter/Roboto。
+字体栈：**中文优先** PingFang SC / Hiragino / Microsoft YaHei / Noto Sans SC（与 SPA 一致，确保本机可见）；代码 Cascadia / Consolas。不引入 Inter/Roboto，不依赖本机 IBM Plex。

 ### 2.3 间距与圆角

- 栅格：4px 基准；常用 `0.5 / 0.75 / 1 / 1.25 / 1.5 rem`
- 圆角：`--j13-radius: 6px`（控件）；列表行无大圆角卡片
- 阴影：仅 sticky 顶栏微阴影 `0 1px 0 var(--j13-border)` + `0 4px 12px rgba(0,0,0,.04)`（滚动时）
+- 栅格：4px 基准；总宽 `--j13-frame: 1320px`
+- 圆角：`--j13-radius: 8px`；搜索 pill / 排序分段可用满圆角
+- 阴影：sticky 顶栏微阴影

 ### 2.4 动效

 | 处 | 行为 |
 |----|------|
 | 主题 | `color` / `background` / `border-color` `150ms ease` |
-| Feed 行 | hover 背景 `120ms ease` |
-| 顶栏 | sticky 时阴影淡入 |
+| Feed 行 | hover 背景 |
+| 顶栏 | sticky 阴影；搜索 focus soft ring |

 ---

@@ -70,10 +73,8 @@

 | 断点 | 行为 |
 |------|------|
-| ≥901px | 三栏：左 ~200px / 中 1fr / 右 ~240px；总宽 ~1120px |
-| ≤900px | 隐藏右栏（抽屉化 **下一刀**） |
-
-主栏与侧栏之间用细线或间距，**不**用大卡片包住整栏。
+| ≥901px | 三栏：左 ~200px / 中 1fr / 右 ~260px；总宽 ~1320px |
+| ≤900px | 隐藏右栏；顶栏搜索折行（抽屉化 **下一刀**） |

 ---

@@ -81,19 +82,16 @@

 | 组件 | 规则 |
 |------|------|
-| 顶栏 | 品牌一级信号；nav 次级；主题钮弱边框 |
-| 侧栏链 | 字号 sm；active 用左边框或 accent 字重，无厚底块 |
-| Feed 行 | 细线分隔；标题 lg；无白盒卡片 |
-| 标签 | 小圆角色块；语义色见 token |
-| 按钮 | 主：accent 底；次：边框；文字：linkbtn |
-| 评论 | 楼层号强调；嵌套左边线；密度高于卡片堆 |
-| 门控壳 | 虚线/淡底提示锁定，不抢正文 |
+| 顶栏 | 品牌 \| 搜索条 \| 发帖主按钮 + 主题 + 私信 + 用户 +「更多」菜单；告别链接墙 |
+| 侧栏链 | sm；active = soft 底 + 左边青条 |
+| Feed | 排序分段控件；搜索扁平工具条；细线列表；回复数右对齐强调 |
+| 标签 / 按钮 / 评论 / 门控 | 同青 token；列表仍非卡片墙 |

 ---

 ## 5. 范围边界

- **本系统覆盖**：公开页壳层（顶栏、三栏、Feed、帖详情、暗色）
- **不覆盖**：Admin 深度重绘、移动抽屉、虚拟滚动、TipTap
+- **覆盖**：公开页壳层、资源 `?v=`、浅/暗色
+- **不覆盖**：Admin 深重绘、移动抽屉、虚拟滚动、TipTap、改站名

-交叉：[06-pages-ux.md](06-pages-ux.md) 路由与操作流 · [09-ssr-progress.md](09-ssr-progress.md) 进度
+交叉：[06-pages-ux.md](06-pages-ux.md) · [09-ssr-progress.md](09-ssr-progress.md)
--- a/public/assets/site.css
+++ b/public/assets/site.css
@@ -1,18 +1,19 @@
-/* 姜十三论坛公开页样式 — 对齐 docs/rebuild-spec/10-design-system.md */
+/* 姜十三论坛公开页样式 — 对齐 docs/rebuild-spec/10-design-system.md（清青产品） */
 :root {
  color-scheme: light;
-  --j13-bg: #f3f4f6;
+  --j13-bg: #f4f8fa;
  --j13-surface: #ffffff;
  --j13-text: #14212b;
-  --j13-muted: #5b6b76;
-  --j13-accent: #0d9488;
-  --j13-accent-ink: #134e4a;
+  --j13-muted: #5a6b75;
+  --j13-accent: #0e8a9a;
+  --j13-accent-ink: #0b5f6b;
  --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
-  --j13-hover: #e8eef0;
-  --j13-radius: 6px;
-  --j13-font: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
-  --j13-font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
+  --j13-soft: #e6f7f9;
+  --j13-border: #d3e0e6;
+  --j13-hover: #e8f4f6;
+  --j13-radius: 8px;
+  --j13-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
+  --j13-font-mono: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
  --j13-danger: #b91c1c;
  --j13-ok-bg: #ecfdf5;
  --j13-ok-fg: #065f46;
@@ -24,31 +25,34 @@
  --j13-err-border: #fecaca;
  --j13-pin-bg: #fef3c7;
  --j13-pin-fg: #92400e;
-  --j13-feat-bg: #e0f2f1;
-  --j13-feat-fg: #115e59;
+  --j13-feat-bg: #e6f7f9;
+  --j13-feat-fg: #0b5f6b;
  --j13-neutral-bg: #eef2f6;
  --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
-  --j13-self-border: #99f6e4;
+  --j13-self-bg: #e6f7f9;
+  --j13-self-border: #7dd3de;
  --j13-delta-pos: #15803d;
  --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
+  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 18px rgba(11, 95, 107, 0.06);
  --j13-ease: 150ms ease;
+  --j13-frame: 1320px;
+  --j13-header-h: 3.5rem;
 }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
-    --j13-bg: #0f1419;
-    --j13-surface: #1a222c;
+    --j13-bg: #0c1216;
+    --j13-surface: #152028;
    --j13-text: #e8eef2;
    --j13-muted: #8b9aab;
-    --j13-accent: #2dd4bf;
-    --j13-accent-ink: #99f6e4;
-    --j13-on-accent: #134e4a;
-    --j13-border: #2c3844;
-    --j13-hover: #243040;
+    --j13-accent: #2ec4d6;
+    --j13-accent-ink: #9ae8f0;
+    --j13-on-accent: #0b5f6b;
+    --j13-soft: #12343a;
+    --j13-border: #2a3a44;
+    --j13-hover: #1c2d36;
    --j13-danger: #f87171;
    --j13-ok-bg: #064e3b;
    --j13-ok-fg: #a7f3d0;
@@ -60,30 +64,31 @@
    --j13-err-border: #991b1b;
    --j13-pin-bg: #78350f;
    --j13-pin-fg: #fde68a;
-    --j13-feat-bg: #134e4a;
-    --j13-feat-fg: #99f6e4;
+    --j13-feat-bg: #0b5f6b;
+    --j13-feat-fg: #9ae8f0;
    --j13-neutral-bg: #243040;
    --j13-neutral-fg: #cbd5e1;
-    --j13-self-bg: #134e4a;
-    --j13-self-border: #0d9488;
+    --j13-self-bg: #0b5f6b;
+    --j13-self-border: #0e8a9a;
    --j13-delta-pos: #4ade80;
    --j13-delta-neg: #f87171;
-    --j13-overlay: rgba(15, 20, 25, 0.88);
-    --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+    --j13-overlay: rgba(12, 18, 22, 0.9);
+    --j13-header-shadow: 0 1px 0 var(--j13-border), 0 8px 20px rgba(0, 0, 0, 0.4);
  }
 }

 html[data-theme="light"] {
  color-scheme: light;
-  --j13-bg: #f3f4f6;
+  --j13-bg: #f4f8fa;
  --j13-surface: #ffffff;
  --j13-text: #14212b;
-  --j13-muted: #5b6b76;
-  --j13-accent: #0d9488;
-  --j13-accent-ink: #134e4a;
+  --j13-muted: #5a6b75;
+  --j13-accent: #0e8a9a;
+  --j13-accent-ink: #0b5f6b;
  --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
-  --j13-hover: #e8eef0;
+  --j13-soft: #e6f7f9;
+  --j13-border: #d3e0e6;
+  --j13-hover: #e8f4f6;
  --j13-danger: #b91c1c;
  --j13-ok-bg: #ecfdf5;
  --j13-ok-fg: #065f46;
@@ -95,29 +100,30 @@ html[data-theme="light"] {
  --j13-err-border: #fecaca;
  --j13-pin-bg: #fef3c7;
  --j13-pin-fg: #92400e;
-  --j13-feat-bg: #e0f2f1;
-  --j13-feat-fg: #115e59;
+  --j13-feat-bg: #e6f7f9;
+  --j13-feat-fg: #0b5f6b;
  --j13-neutral-bg: #eef2f6;
  --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
-  --j13-self-border: #99f6e4;
+  --j13-self-bg: #e6f7f9;
+  --j13-self-border: #7dd3de;
  --j13-delta-pos: #15803d;
  --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
+  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 18px rgba(11, 95, 107, 0.06);
 }

 html[data-theme="dark"] {
  color-scheme: dark;
-  --j13-bg: #0f1419;
-  --j13-surface: #1a222c;
+  --j13-bg: #0c1216;
+  --j13-surface: #152028;
  --j13-text: #e8eef2;
  --j13-muted: #8b9aab;
-  --j13-accent: #2dd4bf;
-  --j13-accent-ink: #99f6e4;
-  --j13-on-accent: #134e4a;
-  --j13-border: #2c3844;
-  --j13-hover: #243040;
+  --j13-accent: #2ec4d6;
+  --j13-accent-ink: #9ae8f0;
+  --j13-on-accent: #0b5f6b;
+  --j13-soft: #12343a;
+  --j13-border: #2a3a44;
+  --j13-hover: #1c2d36;
  --j13-danger: #f87171;
  --j13-ok-bg: #064e3b;
  --j13-ok-fg: #a7f3d0;
@@ -129,16 +135,16 @@ html[data-theme="dark"] {
  --j13-err-border: #991b1b;
  --j13-pin-bg: #78350f;
  --j13-pin-fg: #fde68a;
-  --j13-feat-bg: #134e4a;
-  --j13-feat-fg: #99f6e4;
+  --j13-feat-bg: #0b5f6b;
+  --j13-feat-fg: #9ae8f0;
  --j13-neutral-bg: #243040;
  --j13-neutral-fg: #cbd5e1;
-  --j13-self-bg: #134e4a;
-  --j13-self-border: #0d9488;
+  --j13-self-bg: #0b5f6b;
+  --j13-self-border: #0e8a9a;
  --j13-delta-pos: #4ade80;
  --j13-delta-neg: #f87171;
-  --j13-overlay: rgba(15, 20, 25, 0.88);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+  --j13-overlay: rgba(12, 18, 22, 0.9);
+  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 8px 20px rgba(0, 0, 0, 0.4);
 }

 * { box-sizing: border-box; }
@@ -160,6 +166,18 @@ code, pre, .j13-md-editor__input {
  font-family: var(--j13-font-mono);
 }

+.j13-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .j13-header {
  background: var(--j13-surface);
  border-bottom: 1px solid var(--j13-border);
@@ -170,13 +188,14 @@ code, pre, .j13-md-editor__input {
  transition: background-color var(--j13-ease), border-color var(--j13-ease), box-shadow var(--j13-ease);
 }
 .j13-header__inner {
-  max-width: 1120px;
+  max-width: var(--j13-frame);
  margin: 0 auto;
-  padding: 0.65rem 1rem;
-  display: flex;
+  padding: 0.55rem 1.1rem;
+  min-height: var(--j13-header-h);
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 1fr) auto;
  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+  gap: 0.85rem 1.1rem;
 }
 .j13-brand {
  display: flex;
@@ -188,11 +207,11 @@ code, pre, .j13-md-editor__input {
 }
 .j13-brand:hover { color: inherit; }
 .j13-brand__mark {
-  width: 2.15rem;
-  height: 2.15rem;
+  width: 2.25rem;
+  height: 2.25rem;
  border-radius: var(--j13-radius);
-  background: var(--j13-accent-ink);
-  color: #fff;
+  background: var(--j13-accent);
+  color: var(--j13-on-accent);
  display: grid;
  place-items: center;
  font-weight: 700;
@@ -200,55 +219,91 @@ code, pre, .j13-md-editor__input {
  letter-spacing: -0.02em;
 }
 html[data-theme="dark"] .j13-brand__mark {
-  color: #0f1419;
+  color: #0c1216;
 }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .j13-brand__mark {
-    color: #0f1419;
+    color: #0c1216;
  }
 }
 .j13-brand__logo {
-  width: 2.15rem;
-  height: 2.15rem;
+  width: 2.25rem;
+  height: 2.25rem;
  object-fit: contain;
  border-radius: var(--j13-radius);
 }
 .j13-brand__text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
 .j13-brand__text strong {
-  font-size: 1.25rem;
+  font-size: 1.3rem;
  font-weight: 700;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.03em;
  color: var(--j13-accent-ink);
  line-height: 1.15;
 }
 .j13-brand__slogan {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
  color: var(--j13-muted);
  line-height: 1.2;
+  max-width: 14rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.j13-nav {
+
+.j13-header-search { margin: 0; min-width: 0; }
+.j13-header-search__label { display: block; }
+.j13-header-search input {
+  width: 100%;
+  max-width: 28rem;
+  margin: 0 auto;
+  display: block;
+  padding: 0.45rem 0.85rem;
+  border: 1px solid var(--j13-border);
+  border-radius: 999px;
+  background: var(--j13-bg);
+  color: var(--j13-text);
+  font: inherit;
+  font-size: 0.875rem;
+  transition: border-color var(--j13-ease), box-shadow var(--j13-ease);
+}
+.j13-header-search input:focus {
+  outline: none;
+  border-color: var(--j13-accent);
+  box-shadow: 0 0 0 3px var(--j13-soft);
+}
+
+.j13-header__actions {
  display: flex;
-  gap: 0.15rem 0.75rem;
+  gap: 0.35rem 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
 }
-.j13-nav a {
+.j13-header__textlink,
+.j13-header__iconlink,
+.j13-header__user {
  color: var(--j13-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
-  padding: 0.2rem 0;
+  padding: 0.2rem 0.15rem;
  transition: color var(--j13-ease);
 }
-.j13-nav a:hover { color: var(--j13-accent); text-decoration: none; }
+.j13-header__textlink:hover,
+.j13-header__iconlink:hover,
+.j13-header__user:hover { color: var(--j13-accent); }
+.j13-btn--compose {
+  white-space: nowrap;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.8125rem;
+}
 .j13-theme-toggle {
  appearance: none;
  border: 1px solid var(--j13-border);
  background: transparent;
  color: var(--j13-muted);
  border-radius: var(--j13-radius);
-  padding: 0.2rem 0.5rem;
+  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
@@ -262,17 +317,84 @@ html[data-theme="dark"] .j13-brand__mark {
  background: var(--j13-hover);
 }

+.j13-more { position: relative; }
+.j13-more > summary {
+  list-style: none;
+  cursor: pointer;
+  color: var(--j13-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0.3rem 0.45rem;
+  border-radius: var(--j13-radius);
+  border: 1px solid transparent;
+}
+.j13-more > summary::-webkit-details-marker { display: none; }
+.j13-more > summary:hover,
+.j13-more[open] > summary {
+  color: var(--j13-accent-ink);
+  background: var(--j13-hover);
+  border-color: var(--j13-border);
+}
+.j13-more__menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  min-width: 9.5rem;
+  padding: 0.35rem;
+  background: var(--j13-surface);
+  border: 1px solid var(--j13-border);
+  border-radius: var(--j13-radius);
+  box-shadow: 0 8px 24px rgba(20, 33, 43, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  z-index: 20;
+}
+.j13-more__menu a,
+.j13-more__menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.4rem 0.55rem;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--j13-text);
+  text-decoration: none;
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.j13-more__menu a:hover,
+.j13-more__menu button:hover {
+  background: var(--j13-hover);
+  color: var(--j13-accent-ink);
+}
+.j13-more__menu form { margin: 0; }
+
+@media (max-width: 900px) {
+  .j13-header__inner {
+    grid-template-columns: 1fr auto;
+  }
+  .j13-header-search {
+    grid-column: 1 / -1;
+    order: 3;
+  }
+  .j13-header-search input { max-width: none; }
+  .j13-brand__slogan { display: none; }
+}
+
 .j13-layout {
-  max-width: 1120px;
+  max-width: var(--j13-frame);
  margin: 0 auto;
-  padding: 1rem 1rem 2rem;
+  padding: 1.1rem 1.1rem 2.25rem;
  display: grid;
-  grid-template-columns: 188px minmax(0, 1fr) 228px;
-  gap: 1.5rem;
+  grid-template-columns: 200px minmax(0, 1fr) 260px;
+  gap: 1.35rem;
  align-items: start;
 }
@media (max-width: 900px) {
-  .j13-layout { grid-template-columns: 168px minmax(0, 1fr); }
+  .j13-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .j13-aside--right { display: none; }
 }
@media (max-width: 800px) {
@@ -286,17 +408,17 @@ html[data-theme="dark"] .j13-brand__mark {
 }
 .j13-aside--left {
  position: sticky;
-  top: 3.75rem;
+  top: calc(var(--j13-header-h) + 0.75rem);
 }
 .j13-aside--right {
  gap: 1.15rem;
  position: sticky;
-  top: 3.75rem;
+  top: calc(var(--j13-header-h) + 0.75rem);
 }
 .j13-aside__link {
-  padding: 0.4rem 0.55rem;
+  padding: 0.45rem 0.6rem;
  border-radius: var(--j13-radius);
-  border-left: 2px solid transparent;
+  border-left: 3px solid transparent;
  color: var(--j13-text);
  text-decoration: none;
  font-size: 0.8125rem;
@@ -307,10 +429,10 @@ html[data-theme="dark"] .j13-brand__mark {
  color: var(--j13-accent-ink);
 }
 .j13-aside__link.is-active {
-  background: var(--j13-hover);
+  background: var(--j13-soft);
  color: var(--j13-accent-ink);
  border-left-color: var(--j13-accent);
-  font-weight: 600;
+  font-weight: 650;
 }

 .j13-main {
@@ -318,8 +440,139 @@ html[data-theme="dark"] .j13-brand__mark {
  min-height: 40vh;
  background: var(--j13-surface);
  border: 1px solid var(--j13-border);
+  border-radius: calc(var(--j13-radius) + 2px);
+  padding: 1.05rem 1.2rem 1.4rem;
+}
+
+.j13-feed__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+}
+.j13-feed__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--j13-accent-ink);
+}
+.j13-sort {
+  display: inline-flex;
+  gap: 0;
+  font-size: 0.8125rem;
+  padding: 0.15rem;
+  border: 1px solid var(--j13-border);
+  border-radius: 999px;
+  background: var(--j13-bg);
+}
+.j13-sort a {
+  color: var(--j13-muted);
+  text-decoration: none;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  transition: background-color var(--j13-ease), color var(--j13-ease);
+}
+.j13-sort a.is-active {
+  color: var(--j13-on-accent);
+  font-weight: 650;
+  background: var(--j13-accent);
+}
+.j13-sort a:hover:not(.is-active) {
+  color: var(--j13-accent-ink);
+  background: var(--j13-hover);
+}
+
+.j13-search {
+  margin: 0 0 0.85rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  scroll-margin-top: 4.5rem;
+}
+.j13-search--toolbar .j13-search__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.65rem;
+  align-items: flex-end;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--j13-border);
  border-radius: var(--j13-radius);
-  padding: 1rem 1.15rem 1.35rem;
+  background: var(--j13-bg);
+}
+.j13-search__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 7rem;
+  flex: 1 1 7rem;
+}
+.j13-search__label {
+  font-size: 0.7rem;
+  color: var(--j13-muted);
+  font-weight: 500;
+}
+.j13-search__field input {
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--j13-border);
+  border-radius: 6px;
+  background: var(--j13-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+}
+.j13-search__check {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8125rem;
+  padding-bottom: 0.3rem;
+  white-space: nowrap;
+  color: var(--j13-muted);
+}
+.j13-search__err {
+  margin: 0.5rem 0 0;
+  color: var(--j13-danger);
+  font-size: 0.875rem;
+}
+
+.j13-post-list { list-style: none; margin: 0; padding: 0; }
+.j13-post-item {
+  padding: 0.85rem 0.4rem;
+  margin: 0 -0.4rem;
+  border-top: 1px solid var(--j13-border);
+  border-radius: var(--j13-radius);
+  transition: background-color var(--j13-ease);
+}
+.j13-post-item:first-child { border-top: 0; }
+.j13-post-item:hover { background: var(--j13-hover); }
+.j13-post-item__title {
+  color: var(--j13-text);
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 1.15rem;
+  letter-spacing: -0.02em;
+  line-height: 1.35;
+  transition: color var(--j13-ease);
+}
+.j13-post-item__title:hover { color: var(--j13-accent); }
+.j13-post-item__meta {
+  margin-top: 0.35rem;
+  font-size: 0.75rem;
+  color: var(--j13-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+}
+.j13-post-item__replies {
+  margin-left: auto;
+  font-weight: 650;
+  color: var(--j13-accent-ink);
+  font-variant-numeric: tabular-nums;
 }

 .j13-widget__title {
@@ -424,147 +677,6 @@ html[data-theme="dark"] .j13-brand__mark {
 }
 .j13-checkin__more a { color: var(--j13-accent); }

-.j13-feed__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem 1rem;
-  margin-bottom: 0.85rem;
-  padding-bottom: 0.65rem;
-  border-bottom: 1px solid var(--j13-border);
-}
-.j13-feed__title {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--j13-accent-ink);
-}
-.j13-sort { display: flex; gap: 0.15rem; font-size: 0.8125rem; }
-.j13-sort a {
-  color: var(--j13-muted);
-  text-decoration: none;
-  padding: 0.25rem 0.55rem;
-  border-radius: var(--j13-radius);
-  transition: background-color var(--j13-ease), color var(--j13-ease);
-}
-.j13-sort a.is-active {
-  color: var(--j13-accent-ink);
-  font-weight: 650;
-  background: var(--j13-hover);
-}
-.j13-sort a:hover { color: var(--j13-accent); background: var(--j13-hover); }
-
-.j13-search {
-  margin: 0 0 1rem;
-  padding: 0.75rem 0.85rem;
-  border: 1px solid var(--j13-border);
-  border-radius: var(--j13-radius);
-  background: var(--j13-bg);
-  scroll-margin-top: 4rem;
-}
-.j13-search__row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem 0.75rem;
-  align-items: flex-end;
-}
-.j13-search__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  min-width: 8rem;
-  flex: 1 1 8rem;
-}
-.j13-search__label {
-  font-size: 0.75rem;
-  color: var(--j13-muted);
-}
-.j13-search__field input {
-  padding: 0.4rem 0.5rem;
-  border: 1px solid var(--j13-border);
-  border-radius: var(--j13-radius);
-  background: var(--j13-bg);
-  color: inherit;
-  font: inherit;
-}
-.j13-search__check {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.875rem;
-  padding-bottom: 0.35rem;
-  white-space: nowrap;
-}
-.j13-search__err {
-  margin: 0.5rem 0 0;
-  color: var(--j13-danger);
-  font-size: 0.875rem;
-}
-
-.j13-post-list { list-style: none; margin: 0; padding: 0; }
-.j13-post-item {
-  padding: 0.7rem 0.35rem;
-  margin: 0 -0.35rem;
-  border-top: 1px solid var(--j13-border);
-  border-radius: var(--j13-radius);
-  transition: background-color var(--j13-ease);
-}
-.j13-post-item:first-child { border-top: 0; }
-.j13-post-item:hover {
-  background: var(--j13-hover);
-}
-.j13-post-item__title {
-  color: var(--j13-text);
-  text-decoration: none;
-  font-weight: 650;
-  font-size: 1.125rem;
-  letter-spacing: -0.015em;
-  line-height: 1.35;
-  transition: color var(--j13-ease);
-}
-.j13-post-item__title:hover { color: var(--j13-accent); }
-.j13-post-item__meta {
-  margin-top: 0.3rem;
-  font-size: 0.75rem;
-  color: var(--j13-muted);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-  align-items: center;
-}
-.j13-tag {
-  background: var(--j13-ok-bg);
-  color: var(--j13-accent);
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-}
-.j13-tag--pin { background: var(--j13-pin-bg); color: var(--j13-pin-fg); }
-.j13-tag--pending { background: var(--j13-warn-bg); color: var(--j13-warn-fg); }
-.j13-tag--rejected { background: var(--j13-err-bg); color: var(--j13-err-fg); }
-.j13-mod-banner {
-  margin: 0.5rem 0 0.75rem;
-  padding: 0.65rem 0.85rem;
-  border-radius: var(--j13-radius);
-  font-size: 0.9rem;
-  line-height: 1.4;
-}
-.j13-mod-banner--pending {
-  background: var(--j13-warn-bg);
-  color: var(--j13-warn-fg);
-  border: 1px solid var(--j13-warn-border);
-}
-.j13-mod-banner--rejected {
-  background: var(--j13-err-bg);
-  color: var(--j13-err-fg);
-  border: 1px solid var(--j13-err-border);
-}
-.j13-tag--feat { background: var(--j13-feat-bg); color: var(--j13-feat-fg); }
-.j13-tag--resolved { background: var(--j13-ok-bg); color: var(--j13-ok-fg); }
-.j13-tag--unresolved { background: var(--j13-neutral-bg); color: var(--j13-neutral-fg); }
-
 .j13-empty { color: var(--j13-muted); }
 .j13-pager {
  margin-top: 1.25rem;
@@ -576,7 +688,7 @@ html[data-theme="dark"] .j13-brand__mark {
 .j13-pager a { color: var(--j13-accent); }

 .j13-footer {
-  max-width: 1120px;
+  max-width: var(--j13-frame);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.25rem;
  color: var(--j13-muted);
@@ -590,7 +702,7 @@ html[data-theme="dark"] .j13-brand__mark {
 .j13-footer a:hover { color: var(--j13-accent); }

 .j13-flash, .j13-alert {
-  max-width: 1100px;
+  max-width: var(--j13-frame);
  margin: 0.75rem auto;
  padding: 0.65rem 1rem;
  border-radius: var(--j13-radius);
--- a/routers/install/install.go
+++ b/routers/install/install.go
@@ -13,6 +13,7 @@ import (
 type Deps struct {
 	DataDir      string
 	JWTSecret    string
+	AssetVersion string
 	Auth         *services.AuthService
 	Settings     *services.ForumSettingsService
 }
@@ -26,6 +27,7 @@ type pageData struct {
 	LogoURL               string
 	FaviconURL            string
 	OGImageURL            string
+	AssetVersion          string
 	ShowFriendLinksFooter bool
 	FooterPages           []struct {
 		Title string
@@ -59,6 +61,7 @@ func (d Deps) Get(c *gin.Context) {
 	}
 	ctx.HTML(http.StatusOK, "install", pageData{
 		Title: "安装 · " + name, SiteName: name, LogoMark: "姜",
+		AssetVersion: d.assetVersion(),
 		CSRF: ctx.EnsureCSRF(), AdminUsername: "admin",
 	})
 }
@@ -77,6 +80,7 @@ func (d Deps) Post(c *gin.Context) {
 	}
 	data := pageData{
 		Title: "安装 · " + siteName, SiteName: siteName, LogoMark: "姜",
+		AssetVersion:  d.assetVersion(),
 		CSRF:          ctx.EnsureCSRF(),
 		AdminUsername: strings.TrimSpace(c.PostForm("admin_username")),
 		AdminEmail:    strings.TrimSpace(c.PostForm("admin_email")),
@@ -109,10 +113,19 @@ func (d Deps) Post(c *gin.Context) {
 	}
 	ctx.HTML(http.StatusOK, "post-install", pageData{
 		Title: "安装完成", SiteName: siteName, LogoMark: "姜",
+		AssetVersion: d.assetVersion(),
 	})
 	_ = brand
 }

+func (d Deps) assetVersion() string {
+	v := strings.TrimSpace(d.AssetVersion)
+	if v == "" {
+		return "dev"
+	}
+	return v
+}
+
 // Guard 未安装则只允许 install / assets / health
 func Guard(dataDir string) gin.HandlerFunc {
 	return func(c *gin.Context) {
--- a/routers/setup.go
+++ b/routers/setup.go
@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"strings"

 	"git.iioio.com/freefire/jiang13-forum/config"
 	"git.iioio.com/freefire/jiang13-forum/modules/auth"
@@ -30,7 +31,8 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	if sub, err := fs.Sub(webpublic.Assets, "assets"); err == nil {
 		ssrFiles := http.StripPrefix("/ssr-assets", http.FileServer(http.FS(sub)))
 		r.GET("/ssr-assets/*filepath", func(c *gin.Context) {
-			c.Header("Cache-Control", "public, max-age=86400")
+			// 模板带 ?v=AssetVersion；部署换版本即穿透，可长缓存
+			c.Header("Cache-Control", "public, max-age=31536000, immutable")
 			ssrFiles.ServeHTTP(c.Writer, c.Request)
 		})
 	}
@@ -83,9 +85,15 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	}
 	authMW := auth.NewAuthMiddleware(authSvc)

+	assetVer := strings.TrimSpace(cfg.Version)
+	if assetVer == "" {
+		assetVer = "dev"
+	}
+
 	install.Register(r, install.Deps{
 		DataDir: cfg.DataDir, JWTSecret: cfg.JWTSecret,
 		Auth: authSvc, Settings: settingsSvc,
+		AssetVersion: assetVer,
 	})

 	webpages.Register(r, webpages.Deps{
@@ -103,6 +111,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 		Captcha:    captchaSvc,
 		Notify:     notifySvc,
 		Backup:     backupSvc,
+		AssetVersion: assetVer,
 	}, authMW)

 	r.GET("/media/thumb/*filepath", h.ServeImageThumb)
@@ -126,6 +135,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 		DataDir: cfg.DataDir, JWTSecret: cfg.JWTSecret,
 		Settings: settingsSvc, Auth: authSvc,
 		Board: boardSvc, Post: postSvc, Comment: commentSvc,
+		AssetVersion: assetVer,
 	}.NotFound)

 	return r, nil
--- a/routers/web/chrome.go
+++ b/routers/web/chrome.go
@@ -13,6 +13,7 @@ import (
 type Deps struct {
 	DataDir      string
 	JWTSecret    string
+	AssetVersion string // 静态资源 ?v=；来自构建 ldflags
 	Settings     *services.ForumSettingsService
 	Auth         *services.AuthService
 	User         *services.UserService
@@ -135,6 +136,7 @@ type PageChrome struct {
 	NavPages              []SitePageLink
 	FooterPages           []SitePageLink
 	RightAside            RightAsideData
+	AssetVersion          string
 }

 func (d Deps) ctx(c *gin.Context) *webctx.Context {
@@ -175,6 +177,10 @@ func (d Deps) chrome(ctx *webctx.Context, title, desc, inner string) PageChrome
 		path = ctx.C.Request.URL.Path
 	}
 	navPages, footerPages := d.sitePageLinks()
+	assetVer := strings.TrimSpace(d.AssetVersion)
+	if assetVer == "" {
+		assetVer = "dev"
+	}
 	return PageChrome{
 		Title:                 title,
 		Description:           desc,
@@ -201,6 +207,7 @@ func (d Deps) chrome(ctx *webctx.Context, title, desc, inner string) PageChrome
 		NavPages:              navPages,
 		FooterPages:           footerPages,
 		RightAside:            d.loadRightAside(ctx, brand),
+		AssetVersion:          assetVer,
 	}
 }

--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -6,7 +6,7 @@
      {{range .FooterPages}} · <a href="/page/{{.Slug}}">{{.Title}}</a>{{end}}
    </p>
  </footer>
-  <script src="/ssr-assets/site.js" defer></script>
+  <script src="/ssr-assets/site.js?v={{.AssetVersion}}" defer></script>
 </body>
 </html>
 {{end}}
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -10,8 +10,7 @@
  <meta property="og:title" content="{{.Title}}"/>
  {{if .Description}}<meta property="og:description" content="{{.Description}}"/>{{end}}
  {{if .OGImageURL}}<meta property="og:image" content="{{.OGImageURL}}"/>{{end}}
-  <link rel="stylesheet" href="/ssr-assets/site.css"/>
-  {{/* 西文优先 IBM Plex（本机有则用）；见 10-design-system，不外链 CDN */}}
+  <link rel="stylesheet" href="/ssr-assets/site.css?v={{.AssetVersion}}"/>
 </head>
 <body class="j13-body">
 {{end}}
--- a/templates/base/navbar.tmpl
+++ b/templates/base/navbar.tmpl
@@ -12,27 +12,41 @@
          {{if .Slogan}}<span class="j13-brand__slogan">{{.Slogan}}</span>{{end}}
        </span>
      </a>
-      <nav class="j13-nav">
-        <button type="button" class="j13-theme-toggle" id="j13-theme-toggle" aria-label="切换主题" title="切换主题">主题</button>
-        <a href="/#search">搜索</a>
-        <a href="/boards">板块</a>
-        {{if .ShowFriendLinksNav}}<a href="/links">友链</a>{{end}}
-        {{range .NavPages}}<a href="/page/{{.Slug}}">{{.Title}}</a>{{end}}
-        {{if .LoggedIn}}
-          <a href="/compose">发帖</a>
-          <a href="/messages">私信{{if gt .UnreadCount 0}} <span class="j13-badge">{{.UnreadCount}}</span>{{end}}</a>
-          <a href="/favorites">收藏</a>
-          <a href="/profile">{{.ViewerName}} · {{.ViewerPoints}} 积分</a>
-          {{if .IsAdmin}}<a href="/admin/dashboard">后台</a>{{end}}
-          <form class="j13-inline-form" method="post" action="/logout">
-            <input type="hidden" name="_csrf" value="{{.CSRF}}"/>
-            <button type="submit" class="j13-linkbtn">退出</button>
+      <form class="j13-header-search" method="get" action="/" role="search">
+        <label class="j13-header-search__label">
+          <span class="j13-visually-hidden">搜索帖子</span>
+          <input type="search" name="keyword" placeholder="搜索帖子…" autocomplete="off"/>
+        </label>
      </form>
+      <div class="j13-header__actions">
+        {{if .LoggedIn}}
+          <a class="j13-btn j13-btn--compose" href="/compose">发帖</a>
        {{else}}
-          <a href="/register">注册</a>
-          <a href="/login">登录</a>
+          <a class="j13-btn j13-btn--compose" href="/login">登录</a>
+          <a class="j13-header__textlink" href="/register">注册</a>
        {{end}}
-      </nav>
+        <button type="button" class="j13-theme-toggle" id="j13-theme-toggle" aria-label="切换主题" title="切换主题">主题</button>
+        {{if .LoggedIn}}
+          <a class="j13-header__iconlink" href="/messages" title="私信">私信{{if gt .UnreadCount 0}} <span class="j13-badge">{{.UnreadCount}}</span>{{end}}</a>
+          <a class="j13-header__user" href="/profile" title="个人中心">{{.ViewerName}} · {{.ViewerPoints}}</a>
+        {{end}}
+        <details class="j13-more">
+          <summary>更多</summary>
+          <div class="j13-more__menu" role="menu">
+            <a href="/boards" role="menuitem">板块</a>
+            {{if .ShowFriendLinksNav}}<a href="/links" role="menuitem">友链</a>{{end}}
+            {{range .NavPages}}<a href="/page/{{.Slug}}" role="menuitem">{{.Title}}</a>{{end}}
+            {{if .LoggedIn}}
+              <a href="/favorites" role="menuitem">收藏</a>
+              {{if .IsAdmin}}<a href="/admin/dashboard" role="menuitem">后台</a>{{end}}
+              <form method="post" action="/logout">
+                <input type="hidden" name="_csrf" value="{{.CSRF}}"/>
+                <button type="submit" role="menuitem">退出</button>
+              </form>
+            {{end}}
+          </div>
+        </details>
+      </div>
    </div>
  </header>
 {{end}}
--- a/templates/home/feed.tmpl
+++ b/templates/home/feed.tmpl
@@ -8,7 +8,7 @@
      <a class="{{if eq .Sort "hot"}}is-active{{end}}" href="{{.SortHref "hot"}}">热门讨论</a>
    </div>
  </header>
-  <form id="search" class="j13-search" method="get" action="{{.FormAction}}" role="search">
+  <form id="search" class="j13-search j13-search--toolbar" method="get" action="{{.FormAction}}" role="search">
    {{if and .Sort (ne .Sort "latest")}}<input type="hidden" name="sort" value="{{.Sort}}"/>{{end}}
    <div class="j13-search__row">
      <label class="j13-search__field">
@@ -44,7 +44,7 @@
        {{if .BoardName}}<span class="j13-tag">{{.BoardName}}</span>{{end}}
        <span>{{.AuthorName}}</span>
        <span>{{.CreatedLabel}}</span>
-        <span>{{.CommentCount}} 回复</span>
+        <span class="j13-post-item__replies">{{.CommentCount}} 回复</span>
      </div>
    </li>
    {{end}}
--- a/web_src/css/site.css
+++ b/web_src/css/site.css
@@ -1,18 +1,19 @@
-/* 姜十三论坛公开页样式 — 对齐 docs/rebuild-spec/10-design-system.md */
+/* 姜十三论坛公开页样式 — 对齐 docs/rebuild-spec/10-design-system.md（清青产品） */
 :root {
  color-scheme: light;
-  --j13-bg: #f3f4f6;
+  --j13-bg: #f4f8fa;
  --j13-surface: #ffffff;
  --j13-text: #14212b;
-  --j13-muted: #5b6b76;
-  --j13-accent: #0d9488;
-  --j13-accent-ink: #134e4a;
+  --j13-muted: #5a6b75;
+  --j13-accent: #0e8a9a;
+  --j13-accent-ink: #0b5f6b;
  --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
-  --j13-hover: #e8eef0;
-  --j13-radius: 6px;
-  --j13-font: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
-  --j13-font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
+  --j13-soft: #e6f7f9;
+  --j13-border: #d3e0e6;
+  --j13-hover: #e8f4f6;
+  --j13-radius: 8px;
+  --j13-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
+  --j13-font-mono: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
  --j13-danger: #b91c1c;
  --j13-ok-bg: #ecfdf5;
  --j13-ok-fg: #065f46;
@@ -24,31 +25,34 @@
  --j13-err-border: #fecaca;
  --j13-pin-bg: #fef3c7;
  --j13-pin-fg: #92400e;
-  --j13-feat-bg: #e0f2f1;
-  --j13-feat-fg: #115e59;
+  --j13-feat-bg: #e6f7f9;
+  --j13-feat-fg: #0b5f6b;
  --j13-neutral-bg: #eef2f6;
  --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
-  --j13-self-border: #99f6e4;
+  --j13-self-bg: #e6f7f9;
+  --j13-self-border: #7dd3de;
  --j13-delta-pos: #15803d;
  --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
+  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 18px rgba(11, 95, 107, 0.06);
  --j13-ease: 150ms ease;
+  --j13-frame: 1320px;
+  --j13-header-h: 3.5rem;
 }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
-    --j13-bg: #0f1419;
-    --j13-surface: #1a222c;
+    --j13-bg: #0c1216;
+    --j13-surface: #152028;
    --j13-text: #e8eef2;
    --j13-muted: #8b9aab;
-    --j13-accent: #2dd4bf;
-    --j13-accent-ink: #99f6e4;
-    --j13-on-accent: #134e4a;
-    --j13-border: #2c3844;
-    --j13-hover: #243040;
+    --j13-accent: #2ec4d6;
+    --j13-accent-ink: #9ae8f0;
+    --j13-on-accent: #0b5f6b;
+    --j13-soft: #12343a;
+    --j13-border: #2a3a44;
+    --j13-hover: #1c2d36;
    --j13-danger: #f87171;
    --j13-ok-bg: #064e3b;
    --j13-ok-fg: #a7f3d0;
@@ -60,30 +64,31 @@
    --j13-err-border: #991b1b;
    --j13-pin-bg: #78350f;
    --j13-pin-fg: #fde68a;
-    --j13-feat-bg: #134e4a;
-    --j13-feat-fg: #99f6e4;
+    --j13-feat-bg: #0b5f6b;
+    --j13-feat-fg: #9ae8f0;
    --j13-neutral-bg: #243040;
    --j13-neutral-fg: #cbd5e1;
-    --j13-self-bg: #134e4a;
-    --j13-self-border: #0d9488;
+    --j13-self-bg: #0b5f6b;
+    --j13-self-border: #0e8a9a;
    --j13-delta-pos: #4ade80;
    --j13-delta-neg: #f87171;
-    --j13-overlay: rgba(15, 20, 25, 0.88);
-    --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+    --j13-overlay: rgba(12, 18, 22, 0.9);
+    --j13-header-shadow: 0 1px 0 var(--j13-border), 0 8px 20px rgba(0, 0, 0, 0.4);
  }
 }

 html[data-theme="light"] {
  color-scheme: light;
-  --j13-bg: #f3f4f6;
+  --j13-bg: #f4f8fa;
  --j13-surface: #ffffff;
  --j13-text: #14212b;
-  --j13-muted: #5b6b76;
-  --j13-accent: #0d9488;
-  --j13-accent-ink: #134e4a;
+  --j13-muted: #5a6b75;
+  --j13-accent: #0e8a9a;
+  --j13-accent-ink: #0b5f6b;
  --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
-  --j13-hover: #e8eef0;
+  --j13-soft: #e6f7f9;
+  --j13-border: #d3e0e6;
+  --j13-hover: #e8f4f6;
  --j13-danger: #b91c1c;
  --j13-ok-bg: #ecfdf5;
  --j13-ok-fg: #065f46;
@@ -95,29 +100,30 @@ html[data-theme="light"] {
  --j13-err-border: #fecaca;
  --j13-pin-bg: #fef3c7;
  --j13-pin-fg: #92400e;
-  --j13-feat-bg: #e0f2f1;
-  --j13-feat-fg: #115e59;
+  --j13-feat-bg: #e6f7f9;
+  --j13-feat-fg: #0b5f6b;
  --j13-neutral-bg: #eef2f6;
  --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
-  --j13-self-border: #99f6e4;
+  --j13-self-bg: #e6f7f9;
+  --j13-self-border: #7dd3de;
  --j13-delta-pos: #15803d;
  --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
+  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 18px rgba(11, 95, 107, 0.06);
 }

 html[data-theme="dark"] {
  color-scheme: dark;
-  --j13-bg: #0f1419;
-  --j13-surface: #1a222c;
+  --j13-bg: #0c1216;
+  --j13-surface: #152028;
  --j13-text: #e8eef2;
  --j13-muted: #8b9aab;
-  --j13-accent: #2dd4bf;
-  --j13-accent-ink: #99f6e4;
-  --j13-on-accent: #134e4a;
-  --j13-border: #2c3844;
-  --j13-hover: #243040;
+  --j13-accent: #2ec4d6;
+  --j13-accent-ink: #9ae8f0;
+  --j13-on-accent: #0b5f6b;
+  --j13-soft: #12343a;
+  --j13-border: #2a3a44;
+  --j13-hover: #1c2d36;
  --j13-danger: #f87171;
  --j13-ok-bg: #064e3b;
  --j13-ok-fg: #a7f3d0;
@@ -129,16 +135,16 @@ html[data-theme="dark"] {
  --j13-err-border: #991b1b;
  --j13-pin-bg: #78350f;
  --j13-pin-fg: #fde68a;
-  --j13-feat-bg: #134e4a;
-  --j13-feat-fg: #99f6e4;
+  --j13-feat-bg: #0b5f6b;
+  --j13-feat-fg: #9ae8f0;
  --j13-neutral-bg: #243040;
  --j13-neutral-fg: #cbd5e1;
-  --j13-self-bg: #134e4a;
-  --j13-self-border: #0d9488;
+  --j13-self-bg: #0b5f6b;
+  --j13-self-border: #0e8a9a;
  --j13-delta-pos: #4ade80;
  --j13-delta-neg: #f87171;
-  --j13-overlay: rgba(15, 20, 25, 0.88);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+  --j13-overlay: rgba(12, 18, 22, 0.9);
+  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 8px 20px rgba(0, 0, 0, 0.4);
 }

 * { box-sizing: border-box; }
@@ -160,6 +166,18 @@ code, pre, .j13-md-editor__input {
  font-family: var(--j13-font-mono);
 }

+.j13-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .j13-header {
  background: var(--j13-surface);
  border-bottom: 1px solid var(--j13-border);
@@ -170,13 +188,14 @@ code, pre, .j13-md-editor__input {
  transition: background-color var(--j13-ease), border-color var(--j13-ease), box-shadow var(--j13-ease);
 }
 .j13-header__inner {
-  max-width: 1120px;
+  max-width: var(--j13-frame);
  margin: 0 auto;
-  padding: 0.65rem 1rem;
-  display: flex;
+  padding: 0.55rem 1.1rem;
+  min-height: var(--j13-header-h);
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 1fr) auto;
  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+  gap: 0.85rem 1.1rem;
 }
 .j13-brand {
  display: flex;
@@ -188,11 +207,11 @@ code, pre, .j13-md-editor__input {
 }
 .j13-brand:hover { color: inherit; }
 .j13-brand__mark {
-  width: 2.15rem;
-  height: 2.15rem;
+  width: 2.25rem;
+  height: 2.25rem;
  border-radius: var(--j13-radius);
-  background: var(--j13-accent-ink);
-  color: #fff;
+  background: var(--j13-accent);
+  color: var(--j13-on-accent);
  display: grid;
  place-items: center;
  font-weight: 700;
@@ -200,55 +219,91 @@ code, pre, .j13-md-editor__input {
  letter-spacing: -0.02em;
 }
 html[data-theme="dark"] .j13-brand__mark {
-  color: #0f1419;
+  color: #0c1216;
 }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .j13-brand__mark {
-    color: #0f1419;
+    color: #0c1216;
  }
 }
 .j13-brand__logo {
-  width: 2.15rem;
-  height: 2.15rem;
+  width: 2.25rem;
+  height: 2.25rem;
  object-fit: contain;
  border-radius: var(--j13-radius);
 }
 .j13-brand__text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
 .j13-brand__text strong {
-  font-size: 1.25rem;
+  font-size: 1.3rem;
  font-weight: 700;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.03em;
  color: var(--j13-accent-ink);
  line-height: 1.15;
 }
 .j13-brand__slogan {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
  color: var(--j13-muted);
  line-height: 1.2;
+  max-width: 14rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.j13-nav {
+
+.j13-header-search { margin: 0; min-width: 0; }
+.j13-header-search__label { display: block; }
+.j13-header-search input {
+  width: 100%;
+  max-width: 28rem;
+  margin: 0 auto;
+  display: block;
+  padding: 0.45rem 0.85rem;
+  border: 1px solid var(--j13-border);
+  border-radius: 999px;
+  background: var(--j13-bg);
+  color: var(--j13-text);
+  font: inherit;
+  font-size: 0.875rem;
+  transition: border-color var(--j13-ease), box-shadow var(--j13-ease);
+}
+.j13-header-search input:focus {
+  outline: none;
+  border-color: var(--j13-accent);
+  box-shadow: 0 0 0 3px var(--j13-soft);
+}
+
+.j13-header__actions {
  display: flex;
-  gap: 0.15rem 0.75rem;
+  gap: 0.35rem 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
 }
-.j13-nav a {
+.j13-header__textlink,
+.j13-header__iconlink,
+.j13-header__user {
  color: var(--j13-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
-  padding: 0.2rem 0;
+  padding: 0.2rem 0.15rem;
  transition: color var(--j13-ease);
 }
-.j13-nav a:hover { color: var(--j13-accent); text-decoration: none; }
+.j13-header__textlink:hover,
+.j13-header__iconlink:hover,
+.j13-header__user:hover { color: var(--j13-accent); }
+.j13-btn--compose {
+  white-space: nowrap;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.8125rem;
+}
 .j13-theme-toggle {
  appearance: none;
  border: 1px solid var(--j13-border);
  background: transparent;
  color: var(--j13-muted);
  border-radius: var(--j13-radius);
-  padding: 0.2rem 0.5rem;
+  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
@@ -262,17 +317,84 @@ html[data-theme="dark"] .j13-brand__mark {
  background: var(--j13-hover);
 }

+.j13-more { position: relative; }
+.j13-more > summary {
+  list-style: none;
+  cursor: pointer;
+  color: var(--j13-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0.3rem 0.45rem;
+  border-radius: var(--j13-radius);
+  border: 1px solid transparent;
+}
+.j13-more > summary::-webkit-details-marker { display: none; }
+.j13-more > summary:hover,
+.j13-more[open] > summary {
+  color: var(--j13-accent-ink);
+  background: var(--j13-hover);
+  border-color: var(--j13-border);
+}
+.j13-more__menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  min-width: 9.5rem;
+  padding: 0.35rem;
+  background: var(--j13-surface);
+  border: 1px solid var(--j13-border);
+  border-radius: var(--j13-radius);
+  box-shadow: 0 8px 24px rgba(20, 33, 43, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  z-index: 20;
+}
+.j13-more__menu a,
+.j13-more__menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.4rem 0.55rem;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--j13-text);
+  text-decoration: none;
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.j13-more__menu a:hover,
+.j13-more__menu button:hover {
+  background: var(--j13-hover);
+  color: var(--j13-accent-ink);
+}
+.j13-more__menu form { margin: 0; }
+
+@media (max-width: 900px) {
+  .j13-header__inner {
+    grid-template-columns: 1fr auto;
+  }
+  .j13-header-search {
+    grid-column: 1 / -1;
+    order: 3;
+  }
+  .j13-header-search input { max-width: none; }
+  .j13-brand__slogan { display: none; }
+}
+
 .j13-layout {
-  max-width: 1120px;
+  max-width: var(--j13-frame);
  margin: 0 auto;
-  padding: 1rem 1rem 2rem;
+  padding: 1.1rem 1.1rem 2.25rem;
  display: grid;
-  grid-template-columns: 188px minmax(0, 1fr) 228px;
-  gap: 1.5rem;
+  grid-template-columns: 200px minmax(0, 1fr) 260px;
+  gap: 1.35rem;
  align-items: start;
 }
@media (max-width: 900px) {
-  .j13-layout { grid-template-columns: 168px minmax(0, 1fr); }
+  .j13-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .j13-aside--right { display: none; }
 }
@media (max-width: 800px) {
@@ -286,17 +408,17 @@ html[data-theme="dark"] .j13-brand__mark {
 }
 .j13-aside--left {
  position: sticky;
-  top: 3.75rem;
+  top: calc(var(--j13-header-h) + 0.75rem);
 }
 .j13-aside--right {
  gap: 1.15rem;
  position: sticky;
-  top: 3.75rem;
+  top: calc(var(--j13-header-h) + 0.75rem);
 }
 .j13-aside__link {
-  padding: 0.4rem 0.55rem;
+  padding: 0.45rem 0.6rem;
  border-radius: var(--j13-radius);
-  border-left: 2px solid transparent;
+  border-left: 3px solid transparent;
  color: var(--j13-text);
  text-decoration: none;
  font-size: 0.8125rem;
@@ -307,10 +429,10 @@ html[data-theme="dark"] .j13-brand__mark {
  color: var(--j13-accent-ink);
 }
 .j13-aside__link.is-active {
-  background: var(--j13-hover);
+  background: var(--j13-soft);
  color: var(--j13-accent-ink);
  border-left-color: var(--j13-accent);
-  font-weight: 600;
+  font-weight: 650;
 }

 .j13-main {
@@ -318,8 +440,139 @@ html[data-theme="dark"] .j13-brand__mark {
  min-height: 40vh;
  background: var(--j13-surface);
  border: 1px solid var(--j13-border);
+  border-radius: calc(var(--j13-radius) + 2px);
+  padding: 1.05rem 1.2rem 1.4rem;
+}
+
+.j13-feed__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+}
+.j13-feed__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--j13-accent-ink);
+}
+.j13-sort {
+  display: inline-flex;
+  gap: 0;
+  font-size: 0.8125rem;
+  padding: 0.15rem;
+  border: 1px solid var(--j13-border);
+  border-radius: 999px;
+  background: var(--j13-bg);
+}
+.j13-sort a {
+  color: var(--j13-muted);
+  text-decoration: none;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  transition: background-color var(--j13-ease), color var(--j13-ease);
+}
+.j13-sort a.is-active {
+  color: var(--j13-on-accent);
+  font-weight: 650;
+  background: var(--j13-accent);
+}
+.j13-sort a:hover:not(.is-active) {
+  color: var(--j13-accent-ink);
+  background: var(--j13-hover);
+}
+
+.j13-search {
+  margin: 0 0 0.85rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  scroll-margin-top: 4.5rem;
+}
+.j13-search--toolbar .j13-search__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.65rem;
+  align-items: flex-end;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--j13-border);
  border-radius: var(--j13-radius);
-  padding: 1rem 1.15rem 1.35rem;
+  background: var(--j13-bg);
+}
+.j13-search__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 7rem;
+  flex: 1 1 7rem;
+}
+.j13-search__label {
+  font-size: 0.7rem;
+  color: var(--j13-muted);
+  font-weight: 500;
+}
+.j13-search__field input {
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--j13-border);
+  border-radius: 6px;
+  background: var(--j13-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+}
+.j13-search__check {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8125rem;
+  padding-bottom: 0.3rem;
+  white-space: nowrap;
+  color: var(--j13-muted);
+}
+.j13-search__err {
+  margin: 0.5rem 0 0;
+  color: var(--j13-danger);
+  font-size: 0.875rem;
+}
+
+.j13-post-list { list-style: none; margin: 0; padding: 0; }
+.j13-post-item {
+  padding: 0.85rem 0.4rem;
+  margin: 0 -0.4rem;
+  border-top: 1px solid var(--j13-border);
+  border-radius: var(--j13-radius);
+  transition: background-color var(--j13-ease);
+}
+.j13-post-item:first-child { border-top: 0; }
+.j13-post-item:hover { background: var(--j13-hover); }
+.j13-post-item__title {
+  color: var(--j13-text);
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 1.15rem;
+  letter-spacing: -0.02em;
+  line-height: 1.35;
+  transition: color var(--j13-ease);
+}
+.j13-post-item__title:hover { color: var(--j13-accent); }
+.j13-post-item__meta {
+  margin-top: 0.35rem;
+  font-size: 0.75rem;
+  color: var(--j13-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+}
+.j13-post-item__replies {
+  margin-left: auto;
+  font-weight: 650;
+  color: var(--j13-accent-ink);
+  font-variant-numeric: tabular-nums;
 }

 .j13-widget__title {
@@ -424,147 +677,6 @@ html[data-theme="dark"] .j13-brand__mark {
 }
 .j13-checkin__more a { color: var(--j13-accent); }

-.j13-feed__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem 1rem;
-  margin-bottom: 0.85rem;
-  padding-bottom: 0.65rem;
-  border-bottom: 1px solid var(--j13-border);
-}
-.j13-feed__title {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--j13-accent-ink);
-}
-.j13-sort { display: flex; gap: 0.15rem; font-size: 0.8125rem; }
-.j13-sort a {
-  color: var(--j13-muted);
-  text-decoration: none;
-  padding: 0.25rem 0.55rem;
-  border-radius: var(--j13-radius);
-  transition: background-color var(--j13-ease), color var(--j13-ease);
-}
-.j13-sort a.is-active {
-  color: var(--j13-accent-ink);
-  font-weight: 650;
-  background: var(--j13-hover);
-}
-.j13-sort a:hover { color: var(--j13-accent); background: var(--j13-hover); }
-
-.j13-search {
-  margin: 0 0 1rem;
-  padding: 0.75rem 0.85rem;
-  border: 1px solid var(--j13-border);
-  border-radius: var(--j13-radius);
-  background: var(--j13-bg);
-  scroll-margin-top: 4rem;
-}
-.j13-search__row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem 0.75rem;
-  align-items: flex-end;
-}
-.j13-search__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  min-width: 8rem;
-  flex: 1 1 8rem;
-}
-.j13-search__label {
-  font-size: 0.75rem;
-  color: var(--j13-muted);
-}
-.j13-search__field input {
-  padding: 0.4rem 0.5rem;
-  border: 1px solid var(--j13-border);
-  border-radius: var(--j13-radius);
-  background: var(--j13-bg);
-  color: inherit;
-  font: inherit;
-}
-.j13-search__check {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.875rem;
-  padding-bottom: 0.35rem;
-  white-space: nowrap;
-}
-.j13-search__err {
-  margin: 0.5rem 0 0;
-  color: var(--j13-danger);
-  font-size: 0.875rem;
-}
-
-.j13-post-list { list-style: none; margin: 0; padding: 0; }
-.j13-post-item {
-  padding: 0.7rem 0.35rem;
-  margin: 0 -0.35rem;
-  border-top: 1px solid var(--j13-border);
-  border-radius: var(--j13-radius);
-  transition: background-color var(--j13-ease);
-}
-.j13-post-item:first-child { border-top: 0; }
-.j13-post-item:hover {
-  background: var(--j13-hover);
-}
-.j13-post-item__title {
-  color: var(--j13-text);
-  text-decoration: none;
-  font-weight: 650;
-  font-size: 1.125rem;
-  letter-spacing: -0.015em;
-  line-height: 1.35;
-  transition: color var(--j13-ease);
-}
-.j13-post-item__title:hover { color: var(--j13-accent); }
-.j13-post-item__meta {
-  margin-top: 0.3rem;
-  font-size: 0.75rem;
-  color: var(--j13-muted);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-  align-items: center;
-}
-.j13-tag {
-  background: var(--j13-ok-bg);
-  color: var(--j13-accent);
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-}
-.j13-tag--pin { background: var(--j13-pin-bg); color: var(--j13-pin-fg); }
-.j13-tag--pending { background: var(--j13-warn-bg); color: var(--j13-warn-fg); }
-.j13-tag--rejected { background: var(--j13-err-bg); color: var(--j13-err-fg); }
-.j13-mod-banner {
-  margin: 0.5rem 0 0.75rem;
-  padding: 0.65rem 0.85rem;
-  border-radius: var(--j13-radius);
-  font-size: 0.9rem;
-  line-height: 1.4;
-}
-.j13-mod-banner--pending {
-  background: var(--j13-warn-bg);
-  color: var(--j13-warn-fg);
-  border: 1px solid var(--j13-warn-border);
-}
-.j13-mod-banner--rejected {
-  background: var(--j13-err-bg);
-  color: var(--j13-err-fg);
-  border: 1px solid var(--j13-err-border);
-}
-.j13-tag--feat { background: var(--j13-feat-bg); color: var(--j13-feat-fg); }
-.j13-tag--resolved { background: var(--j13-ok-bg); color: var(--j13-ok-fg); }
-.j13-tag--unresolved { background: var(--j13-neutral-bg); color: var(--j13-neutral-fg); }
-
 .j13-empty { color: var(--j13-muted); }
 .j13-pager {
  margin-top: 1.25rem;
@@ -576,7 +688,7 @@ html[data-theme="dark"] .j13-brand__mark {
 .j13-pager a { color: var(--j13-accent); }

 .j13-footer {
-  max-width: 1120px;
+  max-width: var(--j13-frame);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.25rem;
  color: var(--j13-muted);
@@ -590,7 +702,7 @@ html[data-theme="dark"] .j13-brand__mark {
 .j13-footer a:hover { color: var(--j13-accent); }

 .j13-flash, .j13-alert {
-  max-width: 1100px;
+  max-width: var(--j13-frame);
  margin: 0.75rem auto;
  padding: 0.65rem 1rem;
  border-radius: var(--j13-radius);