feat(theme-builder): 补 P0 四项——配置留得住、图层可排序、窄屏段、导出前校验

之前只能算「试一次」，关掉标签页全部配置丢失，导出的主题在手机上也是废的。

1) 配置持久化
- 每次改动 700ms 后写 localStorage，打开自动恢复；?fresh=1 从空白开始
- 「保存工程 / 打开工程」落成 theme-<slug>.json（图片 base64 内嵌，单文件可带走）
- zip 里也带一份 json，下次改不用从零搭
- 配额超了只提示一次，并指向 json

2) 图层上移/下移
顺序就是层级（background-image 第一层在最上），配反了以前只能删了重加。
列表标注「最上层 / 第 N 层」。

3) 窄屏段
新增窄屏配置：竖版背景图、隐藏装饰层、断点（默认 900px），导出生成 @media 块。
只写浅色规则——深色块特异性 0,2,1 > 0,1,1，本来就压住它。
实测 390 视口下首层装饰从 url(char.webp) 变成 none，1512 下不变。

4) 导出前校验
slug、图片层是否选了图、是否引用已删素材、层数是否超 10、
生成 CSS 的每处装饰是否真的 10 个值（和 Go 的 TestDecoSlotCount 同规则）。
有问题直接列出来，不用导出后再等 go test。

顺带：面板按使用频率重排（图层→背景→窄屏→图片池→配色）；
拖拽框改成虚线+左上角标签，不再用半透明填充罩住人物；示例重复载入不再叠加素材。

验证：示例 CSS 通过 TestThemeCSSComplete + TestDecoSlotCount（27 处声明）；
草稿往返（带 demo 保存 → 不带 demo 打开仍 validate 为空）实测通过。

dev/theme-builder/README.md

@@ -30,7 +30,7 @@ http://127.0.0.1:8777/dev/theme-builder/
 | --- | --- | --- |
 | 画板 | `outputs/preview-*.html`（真模板渲染） | 同一套模板 |
 | 作用域 | iframe 里设 `data-page-scope` | `internal/context.pageScope()` 输出到 `<html>` |
-| 装饰层 | 6 槽？不，**固定 10 槽** | `base.css` 的 12 层背景（pattern 1 + deco 10 + image 1） |
+| 装饰层 | **固定 10 槽** | `base.css` 的 12 层背景（pattern 1 + deco 10 + image 1） |
 | 位置 | `calc(0%|50%|100% ± Npx)` | 同一套 `background-position` |
 
 因为是同一套机制，工具里拖出来的位置换视口不会跑位，也不会出现「预览好看、实机错位」。
@@ -61,9 +61,27 @@ http://127.0.0.1:8777/dev/theme-builder/
 
 锚点用 9 宫格 + 像素偏移，生成 `calc(0% + 40px) calc(100% - 36px)` 这种两值形式。
 
+**↑ / ↓ 调层级**。顺序就是层级：`background-image` 的第一层画在最上面，
+所以「谁挡住谁」是靠顺序定的（shiroko 里自行车被人挡住就是这么来的）。
+
+**窄屏** —— 手机上卡片几乎占满屏幕，桌面那套 16:9 场景会被 `cover` 裁成一条无意义纹理，
+固定 px 的人物会被卡片盖住。这一栏可以：指定一张竖版背景图、决定装饰是否退场、
+改断点（默认 900px）。导出时生成对应的 `@media` 块，只写浅色规则
+（深色块特异性更高，本来就压住它）。
+
 **图片池** —— 上传任意张，浏览器本地转 WebP，画布尺寸 = 原图尺寸（不缩放、不留透明边）。
 导出时只打包实际用到的图。
 
+## 工程文件与草稿
+
+调主题是连续几十次的活，所以配置必须留得住：
+
+- **自动草稿**：每次改动后 700ms 存进 `localStorage`，下次打开自动恢复。
+  图片多到顶破 5MB 配额时会提示改用 json（只提示一次）。
+- **保存工程 / 打开工程**：`theme-<slug>.json`，图片以 base64 内嵌，一个文件就能带走；
+  可以进版本库，也可以发给别人接着改。
+- 不想恢复草稿就加 `?fresh=1`。
+
 ## 导出
 
 点「导出 zip」得到：
@@ -74,6 +92,10 @@ static/images/themes/<slug>/*.webp
 INSTALL-<slug>.txt
 ```
 
+点导出时会先跑一遍校验（slug 合法、图片层是否选了图、有没有引用已删除的素材、
+装饰是否超过 10 层、生成出来的 CSS 每处装饰是不是真的 10 个值），有问题直接列出来，
+不会让你导出后再去等 `go test`。
+
 解压到项目根，然后按 `INSTALL-<slug>.txt` 做三步：
 
 1. `conf/app.ini` 的 `[theme] available` 加上 slug；
@@ -96,8 +118,11 @@ INSTALL-<slug>.txt
 ```
 ?demo=1            载入示例素材（canvas 画的背景 + 剪影人物）
 ?scope=admin       直接落在某个作用域
+?fresh=1           忽略 localStorage 草稿，从空白开始
 ?dump=css          把最终 CSS 写进 <pre id="dump">
 ?dump=zip          把 zip 的 base64 写进 <pre id="dump">
+?dump=validate     把 validate() 的结果写进 <pre id="dump">
+?dump=install      把安装说明写进 <pre id="dump">
 ```
 
 ```bash