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

对齐 SPA 顶栏工具条与清青强调色，CSS/JS 带构建 ?v= 长缓存穿透。

Co-authored-by: Cursor <cursoragent@cursor.com>

Makefile

@@ -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
 

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"
 

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 {

config/config.go

@@ -52,6 +52,7 @@ type Config struct {
 	LogFile       string
 	ServiceAction string
 	DevMode       bool
+	Version       string // 构建版本（ldflags）；用于 /ssr-assets ?v= 缓存穿透
 	DB            DatabaseConfig
 }
 

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)） |
 
 ---
 

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：一屏多信息，非营销留白 |
+| 密度 | 接近 V2EX / NGA，同时顶栏对齐 SPA 式工具条 |
-| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto 默认堆 |
+| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto、顶栏链接墙、依赖本机 IBM Plex |
 
 ---
 
@@ -25,44 +27,45 @@
 
 | Token | 浅色 | 暗色 | 用途 |
 |-------|------|------|------|
-| `--j13-bg` | `#f3f4f6` | `#0f1419` | 页底（冷纸 / 墨底） |
+| `--j13-bg` | `#f4f8fa` | `#0c1216` | 页底（微青灰） |
-| `--j13-surface` | `#ffffff` | `#1a222c` | 顶栏、主栏底 |
+| `--j13-surface` | `#ffffff` | `#152028` | 顶栏、主栏 |
 | `--j13-text` | `#14212b` | `#e8eef2` | 正文 |
-| `--j13-muted` | `#5b6b76` | `#8b9aab` | 次要 |
+| `--j13-muted` | `#5a6b75` | `#8b9aab` | 次要 |
-| `--j13-accent` | `#0d9488` | `#2dd4bf` | 链接 / 强调 |
+| `--j13-accent` | `#0e8a9a` | `#2ec4d6` | 链接 / 主按钮 / 分段 active |
-| `--j13-accent-ink` | `#134e4a` | `#99f6e4` | 品牌字、强强调 |
+| `--j13-accent-ink` | `#0b5f6b` | `#9ae8f0` | 品牌字、强强调 |
-| `--j13-on-accent` | `#ffffff` | `#134e4a` | 主按钮字 |
+| `--j13-soft` | `#e6f7f9` | `#12343a` | 侧栏 active 底、focus ring |
-| `--j13-border` | `#d5dde3` | `#2c3844` | 分隔线 |
+| `--j13-on-accent` | `#ffffff` | `#0b5f6b` | 主按钮字 |
-| `--j13-hover` | `#e8eef0` | `#243040` | 行 hover |
+| `--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 | 口号、辅助 |
+| `xs` | 0.72–0.75rem | 口号、辅助 |
-| `sm` | 0.8125rem | 元信息、侧栏 |
+| `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`
+- 栅格：4px 基准；总宽 `--j13-frame: 1320px`
-- 圆角：`--j13-radius: 6px`（控件）；列表行无大圆角卡片
+- 圆角：`--j13-radius: 8px`；搜索 pill / 排序分段可用满圆角
-- 阴影：仅 sticky 顶栏微阴影 `0 1px 0 var(--j13-border)` + `0 4px 12px rgba(0,0,0,.04)`（滚动时）
+- 阴影：sticky 顶栏微阴影
 
 ### 2.4 动效
 
 | 处 | 行为 |
 |----|------|
 | 主题 | `color` / `background` / `border-color` `150ms ease` |
-| Feed 行 | hover 背景 `120ms ease` |
+| Feed 行 | hover 背景 |
-| 顶栏 | sticky 时阴影淡入 |
+| 顶栏 | sticky 阴影；搜索 focus soft ring |
 
 ---
 
@@ -70,10 +73,8 @@
 
 | 断点 | 行为 |
 |------|------|
-| ≥901px | 三栏：左 ~200px / 中 1fr / 右 ~240px；总宽 ~1120px |
+| ≥901px | 三栏：左 ~200px / 中 1fr / 右 ~260px；总宽 ~1320px |
-| ≤900px | 隐藏右栏（抽屉化 **下一刀**） |
+| ≤900px | 隐藏右栏；顶栏搜索折行（抽屉化 **下一刀**） |
-
-主栏与侧栏之间用细线或间距，**不**用大卡片包住整栏。
 
 ---
 
@@ -81,19 +82,16 @@
 
 | 组件 | 规则 |
 |------|------|
-| 顶栏 | 品牌一级信号；nav 次级；主题钮弱边框 |
+| 顶栏 | 品牌 \| 搜索条 \| 发帖主按钮 + 主题 + 私信 + 用户 +「更多」菜单；告别链接墙 |
-| 侧栏链 | 字号 sm；active 用左边框或 accent 字重，无厚底块 |
+| 侧栏链 | sm；active = soft 底 + 左边青条 |
-| Feed 行 | 细线分隔；标题 lg；无白盒卡片 |
+| Feed | 排序分段控件；搜索扁平工具条；细线列表；回复数右对齐强调 |
-| 标签 | 小圆角色块；语义色见 token |
+| 标签 / 按钮 / 评论 / 门控 | 同青 token；列表仍非卡片墙 |
-| 按钮 | 主：accent 底；次：边框；文字：linkbtn |
-| 评论 | 楼层号强调；嵌套左边线；密度高于卡片堆 |
-| 门控壳 | 虚线/淡底提示锁定，不抢正文 |
 
 ---
 
 ## 5. 范围边界
 
-- **本系统覆盖**：公开页壳层（顶栏、三栏、Feed、帖详情、暗色）
+- **覆盖**：公开页壳层、资源 `?v=`、浅/暗色
-- **不覆盖**：Admin 深度重绘、移动抽屉、虚拟滚动、TipTap
+- **不覆盖**：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)

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-muted: #5a6b75;
-  --j13-accent: #0d9488;
+  --j13-accent: #0e8a9a;
-  --j13-accent-ink: #134e4a;
+  --j13-accent-ink: #0b5f6b;
   --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
+  --j13-soft: #e6f7f9;
-  --j13-hover: #e8eef0;
+  --j13-border: #d3e0e6;
-  --j13-radius: 6px;
+  --j13-hover: #e8f4f6;
-  --j13-font: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
+  --j13-radius: 8px;
-  --j13-font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
+  --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-bg: #e6f7f9;
-  --j13-feat-fg: #115e59;
+  --j13-feat-fg: #0b5f6b;
   --j13-neutral-bg: #eef2f6;
   --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
+  --j13-self-bg: #e6f7f9;
-  --j13-self-border: #99f6e4;
+  --j13-self-border: #7dd3de;
   --j13-delta-pos: #15803d;
   --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --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-bg: #0c1216;
-    --j13-surface: #1a222c;
+    --j13-surface: #152028;
     --j13-text: #e8eef2;
     --j13-muted: #8b9aab;
-    --j13-accent: #2dd4bf;
+    --j13-accent: #2ec4d6;
-    --j13-accent-ink: #99f6e4;
+    --j13-accent-ink: #9ae8f0;
-    --j13-on-accent: #134e4a;
+    --j13-on-accent: #0b5f6b;
-    --j13-border: #2c3844;
+    --j13-soft: #12343a;
-    --j13-hover: #243040;
+    --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-bg: #0b5f6b;
-    --j13-feat-fg: #99f6e4;
+    --j13-feat-fg: #9ae8f0;
     --j13-neutral-bg: #243040;
     --j13-neutral-fg: #cbd5e1;
-    --j13-self-bg: #134e4a;
+    --j13-self-bg: #0b5f6b;
-    --j13-self-border: #0d9488;
+    --j13-self-border: #0e8a9a;
     --j13-delta-pos: #4ade80;
     --j13-delta-neg: #f87171;
-    --j13-overlay: rgba(15, 20, 25, 0.88);
+    --j13-overlay: rgba(12, 18, 22, 0.9);
-    --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+    --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-muted: #5a6b75;
-  --j13-accent: #0d9488;
+  --j13-accent: #0e8a9a;
-  --j13-accent-ink: #134e4a;
+  --j13-accent-ink: #0b5f6b;
   --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
+  --j13-soft: #e6f7f9;
-  --j13-hover: #e8eef0;
+  --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-bg: #e6f7f9;
-  --j13-feat-fg: #115e59;
+  --j13-feat-fg: #0b5f6b;
   --j13-neutral-bg: #eef2f6;
   --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
+  --j13-self-bg: #e6f7f9;
-  --j13-self-border: #99f6e4;
+  --j13-self-border: #7dd3de;
   --j13-delta-pos: #15803d;
   --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --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-bg: #0c1216;
-  --j13-surface: #1a222c;
+  --j13-surface: #152028;
   --j13-text: #e8eef2;
   --j13-muted: #8b9aab;
-  --j13-accent: #2dd4bf;
+  --j13-accent: #2ec4d6;
-  --j13-accent-ink: #99f6e4;
+  --j13-accent-ink: #9ae8f0;
-  --j13-on-accent: #134e4a;
+  --j13-on-accent: #0b5f6b;
-  --j13-border: #2c3844;
+  --j13-soft: #12343a;
-  --j13-hover: #243040;
+  --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-bg: #0b5f6b;
-  --j13-feat-fg: #99f6e4;
+  --j13-feat-fg: #9ae8f0;
   --j13-neutral-bg: #243040;
   --j13-neutral-fg: #cbd5e1;
-  --j13-self-bg: #134e4a;
+  --j13-self-bg: #0b5f6b;
-  --j13-self-border: #0d9488;
+  --j13-self-border: #0e8a9a;
   --j13-delta-pos: #4ade80;
   --j13-delta-neg: #f87171;
-  --j13-overlay: rgba(15, 20, 25, 0.88);
+  --j13-overlay: rgba(12, 18, 22, 0.9);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+  --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;
+  padding: 0.55rem 1.1rem;
-  display: flex;
+  min-height: var(--j13-header-h);
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
+  gap: 0.85rem 1.1rem;
-  gap: 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;
+  width: 2.25rem;
-  height: 2.15rem;
+  height: 2.25rem;
   border-radius: var(--j13-radius);
-  background: var(--j13-accent-ink);
+  background: var(--j13-accent);
-  color: #fff;
+  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;
+  width: 2.25rem;
-  height: 2.15rem;
+  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;
+  grid-template-columns: 200px minmax(0, 1fr) 260px;
-  gap: 1.5rem;
+  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);

routers/install/install.go

@@ -11,10 +11,11 @@ import (
 
 // Deps 安装依赖
 type Deps struct {
-	DataDir   string
+	DataDir      string
-	JWTSecret string
+	JWTSecret    string
-	Auth      *services.AuthService
+	AssetVersion string
-	Settings  *services.ForumSettingsService
+	Auth         *services.AuthService
+	Settings     *services.ForumSettingsService
 }
 
 type pageData struct {
@@ -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,7 +80,8 @@ func (d Deps) Post(c *gin.Context) {
 	}
 	data := pageData{
 		Title: "安装 · " + siteName, SiteName: siteName, LogoMark: "姜",
-		CSRF: ctx.EnsureCSRF(),
+		AssetVersion:  d.assetVersion(),
+		CSRF:          ctx.EnsureCSRF(),
 		AdminUsername: strings.TrimSpace(c.PostForm("admin_username")),
 		AdminEmail:    strings.TrimSpace(c.PostForm("admin_email")),
 		AdminNickname: strings.TrimSpace(c.PostForm("admin_nickname")),
@@ -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) {

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

routers/web/chrome.go

@@ -11,28 +11,29 @@ import (
 
 // Deps 页面依赖
 type Deps struct {
-	DataDir   string
+	DataDir      string
-	JWTSecret string
+	JWTSecret    string
-	Settings  *services.ForumSettingsService
+	AssetVersion string // 静态资源 ?v=；来自构建 ldflags
-	Auth      *services.AuthService
+	Settings     *services.ForumSettingsService
-	User      *services.UserService
+	Auth         *services.AuthService
-	Board     *services.BoardService
+	User         *services.UserService
-	Post      *services.PostService
+	Board        *services.BoardService
-	Comment   *services.CommentService
+	Post         *services.PostService
-	Message   *services.MessageService
+	Comment      *services.CommentService
-	Filter    *services.SensitiveFilter
+	Message      *services.MessageService
-	Limiter   *services.RateLimiter
+	Filter       *services.SensitiveFilter
-	EmailCode *services.EmailCodeService
+	Limiter      *services.RateLimiter
-	Store      *services.UploadStore
+	EmailCode    *services.EmailCodeService
-	Points     *services.PointsService
+	Store        *services.UploadStore
-	Badge      *services.BadgeService
+	Points       *services.PointsService
-	FriendLink *services.FriendLinkApplyService
+	Badge        *services.BadgeService
-	Mail       *services.MailService
+	FriendLink   *services.FriendLinkApplyService
-	SitePage   *services.SitePageService
+	Mail         *services.MailService
-	Report     *services.ReportService
+	SitePage     *services.SitePageService
-	Captcha    *services.CaptchaService
+	Report       *services.ReportService
-	Notify     *services.NotifyService
+	Captcha      *services.CaptchaService
-	Backup     *services.BackupService
+	Notify       *services.NotifyService
+	Backup       *services.BackupService
 }
 
 // SitePageLink 导航/页脚站点单页链接
@@ -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,
 	}
 }
 

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}}

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"/>
+  <link rel="stylesheet" href="/ssr-assets/site.css?v={{.AssetVersion}}"/>
-  {{/* 西文优先 IBM Plex（本机有则用）；见 10-design-system，不外链 CDN */}}
 </head>
 <body class="j13-body">
 {{end}}

templates/base/navbar.tmpl

@@ -12,27 +12,41 @@
           {{if .Slogan}}<span class="j13-brand__slogan">{{.Slogan}}</span>{{end}}
         </span>
       </a>
-      <nav class="j13-nav">
+      <form class="j13-header-search" method="get" action="/" role="search">
-        <button type="button" class="j13-theme-toggle" id="j13-theme-toggle" aria-label="切换主题" title="切换主题">主题</button>
+        <label class="j13-header-search__label">
-        <a href="/#search">搜索</a>
+          <span class="j13-visually-hidden">搜索帖子</span>
-        <a href="/boards">板块</a>
+          <input type="search" name="keyword" placeholder="搜索帖子…" autocomplete="off"/>
-        {{if .ShowFriendLinksNav}}<a href="/links">友链</a>{{end}}
+        </label>
-        {{range .NavPages}}<a href="/page/{{.Slug}}">{{.Title}}</a>{{end}}
+      </form>
+      <div class="j13-header__actions">
         {{if .LoggedIn}}
-          <a href="/compose">发帖</a>
+          <a class="j13-btn j13-btn--compose" 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>
         {{else}}
-          <a href="/register">注册</a>
+          <a class="j13-btn j13-btn--compose" href="/login">登录</a>
-          <a 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}}

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}}

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-muted: #5a6b75;
-  --j13-accent: #0d9488;
+  --j13-accent: #0e8a9a;
-  --j13-accent-ink: #134e4a;
+  --j13-accent-ink: #0b5f6b;
   --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
+  --j13-soft: #e6f7f9;
-  --j13-hover: #e8eef0;
+  --j13-border: #d3e0e6;
-  --j13-radius: 6px;
+  --j13-hover: #e8f4f6;
-  --j13-font: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
+  --j13-radius: 8px;
-  --j13-font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
+  --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-bg: #e6f7f9;
-  --j13-feat-fg: #115e59;
+  --j13-feat-fg: #0b5f6b;
   --j13-neutral-bg: #eef2f6;
   --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
+  --j13-self-bg: #e6f7f9;
-  --j13-self-border: #99f6e4;
+  --j13-self-border: #7dd3de;
   --j13-delta-pos: #15803d;
   --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --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-bg: #0c1216;
-    --j13-surface: #1a222c;
+    --j13-surface: #152028;
     --j13-text: #e8eef2;
     --j13-muted: #8b9aab;
-    --j13-accent: #2dd4bf;
+    --j13-accent: #2ec4d6;
-    --j13-accent-ink: #99f6e4;
+    --j13-accent-ink: #9ae8f0;
-    --j13-on-accent: #134e4a;
+    --j13-on-accent: #0b5f6b;
-    --j13-border: #2c3844;
+    --j13-soft: #12343a;
-    --j13-hover: #243040;
+    --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-bg: #0b5f6b;
-    --j13-feat-fg: #99f6e4;
+    --j13-feat-fg: #9ae8f0;
     --j13-neutral-bg: #243040;
     --j13-neutral-fg: #cbd5e1;
-    --j13-self-bg: #134e4a;
+    --j13-self-bg: #0b5f6b;
-    --j13-self-border: #0d9488;
+    --j13-self-border: #0e8a9a;
     --j13-delta-pos: #4ade80;
     --j13-delta-neg: #f87171;
-    --j13-overlay: rgba(15, 20, 25, 0.88);
+    --j13-overlay: rgba(12, 18, 22, 0.9);
-    --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+    --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-muted: #5a6b75;
-  --j13-accent: #0d9488;
+  --j13-accent: #0e8a9a;
-  --j13-accent-ink: #134e4a;
+  --j13-accent-ink: #0b5f6b;
   --j13-on-accent: #ffffff;
-  --j13-border: #d5dde3;
+  --j13-soft: #e6f7f9;
-  --j13-hover: #e8eef0;
+  --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-bg: #e6f7f9;
-  --j13-feat-fg: #115e59;
+  --j13-feat-fg: #0b5f6b;
   --j13-neutral-bg: #eef2f6;
   --j13-neutral-fg: #475569;
-  --j13-self-bg: #e6fffa;
+  --j13-self-bg: #e6f7f9;
-  --j13-self-border: #99f6e4;
+  --j13-self-border: #7dd3de;
   --j13-delta-pos: #15803d;
   --j13-delta-neg: #b91c1c;
-  --j13-overlay: rgba(255, 255, 255, 0.88);
+  --j13-overlay: rgba(244, 248, 250, 0.92);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05);
+  --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-bg: #0c1216;
-  --j13-surface: #1a222c;
+  --j13-surface: #152028;
   --j13-text: #e8eef2;
   --j13-muted: #8b9aab;
-  --j13-accent: #2dd4bf;
+  --j13-accent: #2ec4d6;
-  --j13-accent-ink: #99f6e4;
+  --j13-accent-ink: #9ae8f0;
-  --j13-on-accent: #134e4a;
+  --j13-on-accent: #0b5f6b;
-  --j13-border: #2c3844;
+  --j13-soft: #12343a;
-  --j13-hover: #243040;
+  --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-bg: #0b5f6b;
-  --j13-feat-fg: #99f6e4;
+  --j13-feat-fg: #9ae8f0;
   --j13-neutral-bg: #243040;
   --j13-neutral-fg: #cbd5e1;
-  --j13-self-bg: #134e4a;
+  --j13-self-bg: #0b5f6b;
-  --j13-self-border: #0d9488;
+  --j13-self-border: #0e8a9a;
   --j13-delta-pos: #4ade80;
   --j13-delta-neg: #f87171;
-  --j13-overlay: rgba(15, 20, 25, 0.88);
+  --j13-overlay: rgba(12, 18, 22, 0.9);
-  --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35);
+  --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;
+  padding: 0.55rem 1.1rem;
-  display: flex;
+  min-height: var(--j13-header-h);
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
+  gap: 0.85rem 1.1rem;
-  gap: 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;
+  width: 2.25rem;
-  height: 2.15rem;
+  height: 2.25rem;
   border-radius: var(--j13-radius);
-  background: var(--j13-accent-ink);
+  background: var(--j13-accent);
-  color: #fff;
+  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;
+  width: 2.25rem;
-  height: 2.15rem;
+  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;
+  grid-template-columns: 200px minmax(0, 1fr) 260px;
-  gap: 1.5rem;
+  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);