全局美化 v3

.workbuddy/memory/2026-10-19.md

@@ -202,3 +202,28 @@ P2 = 图标统一（UIkit icons 取代 emoji/位图 png）、标签减量、view
 - 线上 `box.shiroko.one/_/tamakyi` 实际值 = `https://r2.337845818.best/tamabox/box_background.png`。
 - 预览里那张"渐变图"是 `zz_preview_test.go` 造的测试数据（data: URI 渐变），**不是产品行为**；
   顺带发现 Go 模板会把 `data:` URI 在属性上下文里替换成 `#ZgotmplZ`（真实 http URL 不受影响）。
+
+## 设置页「防护设置」缺白底（用户报）
+
+根因：其它面板都包在 `<section class="tb-pcard">`，只有内容防护面板（profile.html:842）是裸 `div.profile-panel`，
+直接露出页面灰底 `--tb-bg`。修法：包一层 `section.tb-pcard`，并把 `.tb-pcard` 的 `background:#fff` 改成
+`var(--tb-surface)`（删掉随之冗余的 dark 覆盖）。
+实测（计算样式）：account 与 security 面板 bg 亮色均 `rgb(255,255,255)`、暗色均 `rgb(36,40,48)`，圆角 10px，完全一致。
+顺手把 `security` 加入 `render_test.go` 的面板渲染测试列表（原来只测 account/question/chat/vote）。
+
+⚠️ 教训：用脚本批量缩进/hash 插入时先 dry-run。这次第一版脚本把「空行」也当成需要写 `<section>` 的行，
+一次性插了 5 个多余标签；靠立刻 `sed` 复查发现并回滚。
+
+## P1 第一步：CSS 抽离（已完成）
+
+- 新增 `static/css/base.css`（23KB，含注释；gzip 后约 6KB），内容 = 原 header 里的
+  设计令牌 / UIkit 补丁 / 深色覆盖 / 质感层 / 顶栏响应式 / 标签 / Markdown / 进度条 / 移动端底栏。
+- `header.html`：内联 `<style>` 从 17.5KB 降到只剩 1 个（算数验证码，跟着 `{{ if CaptchaType }}` 条件渲染）；
+  改为 `<link href="/static/css/base.css?v=20261019a">`，位置在 UIkit 样式之后（保证覆盖顺序）。
+  单页 HTML 42.5KB → 30.9KB。
+- `static/fs.go` 的 `//go:embed` 显式清单加 `css/base.css`（漏了就是运行期 404 + 全站无样式，编译期不报错）。
+- 静态缓存沿用既有 `CacheControl: public, max-age=86400`；靠 `?v=` 版本号破缓存。
+
+**验证方式**：改动前后各截一次同样尺寸的截图做像素比对。
+home-light / home-dark / explore-light 三页差异均 **0.024%**，bbox 只有 (11,56)-(29,74) 一个 18×18 方块
+= 导航栏随机动物 emoji（每次加载都变），不是样式回归。go build + 模板/i18n 测试全绿。

.workbuddy/memory/MEMORY.md

@@ -81,12 +81,18 @@
 
 ## 前端样式
 
-- 全站**无 .css 文件**，样式内联在模板；设计令牌在 `base/header.html` 顶部 `<style>`：`:root`（亮）+ `html[data-theme="dark"]`（暗）。
+- 基础样式在 `static/css/base.css`（2026-10-19 从 header 内联块抽出，`/static/css/base.css?v=YYYYMMDDx`，
+  **改完必须把 header 里的 v 号 +1**，静态缓存 1 天）。设计令牌是文件开头的 `:root`（亮）+ `html[data-theme="dark"]`（暗）。
   新样式一律用 `var(--tb-*)`，别再写死色值/圆角/阴影，也别为深色另写一套分支。
+- 页面级样式仍内联在各自模板的 `<style>` 里（variance 大、复用少），但同样只能用令牌。
+- 静态文件是**显式 embed 清单**（`static/fs.go`），新增 css/js 必须手动加进 `//go:embed` 那行，否则运行期 404。
 - 主题属性在 head 内联脚本里打（cookie `theme`），**不能挪回 body**，否则深色用户白闪。
 - 页面级样式尽量用类，不用 `style=`（深色下内联写死色值会露白，`.tb-img-uploader` 踩过）。
+- ⚠️ **UIkit 3.3.3 有 `.uk-flex::before/::after{display:none}`**：给带 `uk-flex` 的元素加伪元素遮罩必须写
+  `.tb-cover.uk-flex::after` 这类复合选择器，否则静默失效（不报错）。
 - 视觉自检：`TEST_PREVIEW=1 go test ./templates -run TestGenPreview` → `outputs/preview-*.html`；
   截图必须 `chrome --headless=old`（新版 headless 在本机挂住），外部资源先落到 `outputs/preview-assets/`。
+  改 CSS 的正确验证法是**像素比对**（PIL 在 `~/.workbuddy/binaries/python/envs/default`），不是目测。
 
 ## 其它约定