diff --git a/v2/DESIGN_SPEC_V2.md b/v2/DESIGN_SPEC_V2.md
new file mode 100644
index 0000000..834b55b
--- /dev/null
+++ b/v2/DESIGN_SPEC_V2.md
@@ -0,0 +1,952 @@
+# 流·Studio 设计规范 · V2.1
+
+> **版本:** V2.1(2026-05-15)
+> **风格代号:** Restraint(克制)· Firecrawl-aligned
+> **适用范围:** 流·Studio 全产品(工作台 / 项目 / 商品库 / 流水线 / 资产库 / 编辑器 / 账户)
+> **V2.1 更新:** 色彩系统全面对齐 Firecrawl 实测——**冷灰底色**(放弃米白)· **主橙 #FA5D19**(从 #E55B26 调亮)· **20 档 black-alpha**(从 11 档扩展)· **5 色 accent 多彩点**(新增)· accent-black 替代 ink。保留 V2 所有结构性决策(8 px 圆角、inside-border、装订线、mono 装饰)。
+> **与 V2 关系:** V2.1 兼容 V2 的所有 token 命名(`--ink` `--bg` `--card` `--green` `--red` 等保留为 legacy 别名),代码层无需重写。
+
+---
+
+## 0. 变更速查
+
+### V2 → V2.1(本次 · 色彩系统对齐 Firecrawl)
+
+| # | 维度 | V2 | V2.1 |
+| - | ---- | -- | ---- |
+| C1 | 底色 | `#FAF9F5` 暖米白 | **`#f9f9f9` 冷灰**(`--background-base`) |
+| C2 | 主橙 | `#E55B26` 砖红 | **`#FA5D19`** 更红更饱和 |
+| C3 | 文字基色 | `--ink: #15140F` | **`--accent-black: #262626`**(更柔和)· `--ink` 作 legacy 别名 |
+| C4 | Alpha 阶梯 | 11 档 `--ink-alpha-*` | **20 档 `--black-alpha-*`**(1/2/3/4/5/6/7/8/10/12/16/20/24/32/40/48/56/64/72/88) |
+| C5 | Alpha base | 全部用 `rgba(0,0,0,...)` | **32% 起换 `rgba(38,38,38,...)`**(避免叠出"灰中带蓝") |
+| C6 | 状态色 | `--green #3F6B3F` 深森林绿 / `--red #B33A2A` 暗砖红 | **`--accent-forest #42c366`** / **`--accent-crimson #eb3424`**(信号灯感) |
+| C7 | Accent 多彩 | 仅橙+绿+红 | **新增 5 色** amethyst/bluetron/crimson/forest/honey(仅用于语义信号) |
+| C8 | 边框 | `#EFEBE0` 暖色 | **`#ededed`** 冷灰(无色相) |
+| C9 | Selection | 未定义 | **`background: var(--heat-20)` + `color: var(--heat)`**(Firecrawl 签名) |
+
+### V1 → V2(上次 · 结构性变更,保留)
+
+| # | 维度 | V1 | V2 | 决策类型 |
+| - | ---- | -- | -- | -------- |
+| Δ1 | 圆角 | 大容器 0 / 按钮 9 / pill 999 | **大容器 8 / 按钮 8 / pill 999 / dot 999** | **变更** |
+| Δ2 | mono `[ STATUS ]` | 大量使用 | **保留**(品牌签名) | 保留 |
+| Δ3 | 字体 | Inter | **Inter Tight + 字重 500 替代 450**(免费) | 变更(轻) |
+| Δ4 | 边框 | 真 `border:1px` | **`::before` inside-border**(hover 不抖动) | 变更 |
+| Δ5 | 主容器左右垂直边 | 无 | **加 `border-x` + 四角准星**(图纸装订线) | 新增 |
+| Δ6 | 主 CTA 阴影 | 全场无 | **4 层橙色发光** | 变更(小幅) |
+
+---
+
+## 1. 设计哲学
+
+**一句话:** 一台精密设备的工作面板。
+
+**三条铁律:**
+1. **克制大于装饰** — 留白 > 容器 > 内容,大量空气感。
+2. **单色锚点** — 全场只有一种 accent(橙色),且只用于 CTA / 关键状态 / 强调单词。
+3. **结构清晰可见** — 用 **1 px 边框 + 8 px 圆角 + 四角准星 + 容器纵向装订线 + mono `[ ]` 标签**暴露"图纸感",而非阴影/渐变隐藏结构。
+
+**避免的"AI 味":**
+- 渐变铺面 / 玻璃拟态 / 彩色阴影
+- 多色 emoji 图标
+- 圆角无差别(全部 8px / 16px 的 SaaS 模板感)
+- 卡片浮在背景上的"贴纸感"
+- 装饰盖过内容(场记板 / 霓虹 / 丝绒幕布)
+
+**新增禁令:**
+- ❌ **0 px 硬切角的卡片** —— V2 起所有结构性容器都用 8 px 圆角
+- ❌ **变深 hue 的 hover 色** —— 橙色 hover 用 alpha 阶梯,不用更深的橙
+
+---
+
+## 2. 色彩系统(V2.1 · 对齐 Firecrawl)
+
+### 2.1 表面 / 背景(冷灰 · 无色相)
+
+| Token                  | Hex       | 用途                        |
+| ---------------------- | --------- | --------------------------- |
+| `--background-base`    | `#f9f9f9` | 页面底色 · 冷灰             |
+| `--background-lighter` | `#fbfbfb` | 容器底色 / hover 浅底       |
+| `--surface`            | `#ffffff` | 卡片 / 容器表面             |
+| `--surface-raised`     | `#ffffff` | 浮层 / Modal 表面           |
+
+> **Legacy 别名(V2 → V2.1):** `--bg = var(--background-base)` / `--bg-soft = var(--background-lighter)` / `--card = var(--surface)`。组件 CSS 不用改。
+
+### 2.2 边框(冷灰 · 3 档差距极小)
+
+| Token            | Hex       | 用途                  |
+| ---------------- | --------- | --------------------- |
+| `--border-faint` | `#ededed` | **默认 1 px 边框 ★ 80% 场景** |
+| `--border-muted` | `#e8e8e8` | 略深                  |
+| `--border-loud`  | `#e6e6e6` | 最深(强分隔)         |
+
+> **设计意图:** 3 档之间只差 1–2 个色阶,**肉眼几乎看不出**。**用语义(faint/muted/loud)选择,不用视觉对比选择。** 这是 Firecrawl 的细节哲学。
+
+### 2.3 Heat · 主橙(单 hue + 8 档 alpha)
+
+| Token       | Value                   | 用途                          |
+| ----------- | ----------------------- | ----------------------------- |
+| `--heat`    | `#fa5d19`               | **主橙 100% · CTA / 链接 ★** |
+| `--heat-90` | `rgba(250,93,25,.90)`   | hover(替代 V1 `#D04E1F`)    |
+| `--heat-40` | `rgba(250,93,25,.40)`   | focus ring / 边框次级         |
+| `--heat-20` | `rgba(250,93,25,.20)`   | pill 边框 / **selection 底色 ★** |
+| `--heat-16` | `rgba(250,93,25,.16)`   | hover 软底                    |
+| `--heat-12` | `rgba(250,93,25,.12)`   | tint 底(active nav / icon-box) |
+| `--heat-8`  | `rgba(250,93,25,.08)`   |                                |
+| `--heat-4`  | `rgba(250,93,25,.04)`   | 极弱底                        |
+
+> **从 V2 `#E55B26` 调亮到 V2.1 `#FA5D19`** —— 更红更饱和,与 Firecrawl 100% 实测一致。**hover 永远不换 hue,只换 alpha。**
+
+### 2.4 Accent · 5 色信号(新增)
+
+> **作用:** 仅用于**语义信号**——代码高亮、图标色、状态色源。**禁止做大面积背景或装饰**。全场仍只有 1 个 accent(橙)。
+
+| Token              | Hex       | 用途                          |
+| ------------------ | --------- | ----------------------------- |
+| `--accent-black`   | `#262626` | **主前景**(替代 V2 `--ink #15140F`,更柔和) |
+| `--accent-white`   | `#ffffff` | 反色文字(在橙底 / 黑底上)   |
+| `--accent-amethyst`| `#9061ff` | 紫 · 代码 property            |
+| `--accent-bluetron`| `#2a6dfb` | 蓝 · info                     |
+| `--accent-crimson` | `#eb3424` | 红 · **error / 失败 ★**       |
+| `--accent-forest`  | `#42c366` | 绿 · **success / 成功 ★**     |
+| `--accent-honey`   | `#ecb730` | 黄 · warning                  |
+
+> **Legacy 别名:** `--ink = var(--accent-black)` / `--green = var(--accent-forest)` / `--red = var(--accent-crimson)`。
+
+### 2.5 Black-Alpha 阶梯(20 档 · 核心工具尺)
+
+> **替代 V2 的 11 档 ink-alpha**。这是日常用得最多的 token。0–24% 用 `rgba(0,0,0,...)`;**32% 起换 `rgba(38,38,38,...)`**(=`--accent-black` 作底),避免叠出"灰中带蓝"——Firecrawl 实测细节。
+
+| Token              | Light 值               | Dark 值                | 典型用途                |
+| ------------------ | ---------------------- | ---------------------- | ----------------------- |
+| `--black-alpha-1`  | `rgba(0,0,0,.01)`      | `rgba(255,255,255,.01)`| 极弱底                  |
+| `--black-alpha-2`  | `rgba(0,0,0,.02)`      | `rgba(255,255,255,.02)`|                         |
+| `--black-alpha-3`  | `rgba(0,0,0,.03)`      | `rgba(255,255,255,.03)`|                         |
+| `--black-alpha-4`  | `rgba(0,0,0,.04)`      | `rgba(255,255,255,.04)`| **hover bg ★**           |
+| `--black-alpha-5`  | `rgba(0,0,0,.05)`      | `rgba(255,255,255,.05)`| tab 间分隔条             |
+| `--black-alpha-6`  | `rgba(0,0,0,.06)`      | `rgba(255,255,255,.06)`|                         |
+| `--black-alpha-7`  | `rgba(0,0,0,.07)`      | `rgba(255,255,255,.07)`| **active bg ★**          |
+| `--black-alpha-8`  | `rgba(0,0,0,.08)`      | `rgba(255,255,255,.08)`|                         |
+| `--black-alpha-10` | `rgba(0,0,0,.10)`      | `rgba(255,255,255,.10)`|                         |
+| `--black-alpha-12` | `rgba(0,0,0,.12)`      | `rgba(255,255,255,.12)`| **inside-border ★**      |
+| `--black-alpha-16` | `rgba(0,0,0,.16)`      | `rgba(255,255,255,.16)`|                         |
+| `--black-alpha-20` | `rgba(0,0,0,.20)`      | `rgba(255,255,255,.20)`|                         |
+| `--black-alpha-24` | `rgba(0,0,0,.24)`      | `rgba(255,255,255,.24)`| input hover 边框        |
+| `--black-alpha-32` | `rgba(38,38,38,.32)`   | `rgba(255,255,255,.32)`| ← base 切换 → ↓         |
+| `--black-alpha-40` | `rgba(38,38,38,.40)`   | `rgba(255,255,255,.40)`|                         |
+| `--black-alpha-48` | `rgba(38,38,38,.48)`   | `rgba(255,255,255,.48)`| **占位字色 ★**           |
+| `--black-alpha-56` | `rgba(38,38,38,.56)`   | `rgba(255,255,255,.56)`| **次级文字 / 未选中 Tab ★** |
+| `--black-alpha-64` | `rgba(38,38,38,.64)`   | `rgba(255,255,255,.64)`| 描述文字                 |
+| `--black-alpha-72` | `rgba(38,38,38,.72)`   | `rgba(255,255,255,.72)`| 强次级                   |
+| `--black-alpha-88` | `rgba(38,38,38,.88)`   | `rgba(255,255,255,.88)`| 近主前景                 |
+
+> **V2 → V2.1 兼容映射(legacy 别名,组件 CSS 不必改):**
+> - `--ink-alpha-4` → `--black-alpha-4`
+> - `--ink-alpha-7` → `--black-alpha-7`
+> - `--ink-alpha-12` → `--black-alpha-12`
+> - `--ink-alpha-24` → `--black-alpha-24`
+> - `--ink-alpha-32` → `--black-alpha-32`
+> - `--ink-alpha-48` → `--black-alpha-48`
+> - `--ink-alpha-56` → `--black-alpha-56`
+> - `--ink-alpha-64` → `--black-alpha-64`
+> - `--ink-alpha-72` → `--black-alpha-72`
+> - `--ink-alpha-88` → `--black-alpha-88`
+
+### 2.6 状态色配套底/边
+
+| 含义 | 主色                       | 配套底色(8% alpha)         | 配套边框(20% alpha)         |
+| ---- | -------------------------- | --------------------------- | --------------------------- |
+| 成功 | `--green` (`#42c366`)      | `rgba(66,195,102,.08)`       | `rgba(66,195,102,.20)`       |
+| 失败 | `--red` (`#eb3424`)        | `rgba(235,52,36,.08)`        | `rgba(235,52,36,.20)`        |
+| 信息 | `--heat` (`#fa5d19`)       | `--heat-12`                  | `--heat-20`                  |
+| 警告 | `--accent-honey`(`#ecb730`)| `rgba(236,183,48,.08)`       | `rgba(236,183,48,.20)`       |
+
+### 2.7 Selection · 文字选中色(Firecrawl 签名)
+
+```css
+::selection {
+  background: var(--heat-20);
+  color: var(--heat);
+}
+```
+
+选中任何文字时,底色 20% 橙、文字 100% 橙。这是 Firecrawl 易被忽略但**整站感知到位**的细节。
+
+---
+
+## 3. 字体系统(V2.1 · 中英混排策略)
+
+### 3.1 字体族 · Inter + 阿里巴巴普惠体
+
+| 用途         | 字体声明                                                                                          |
+| ------------ | ------------------------------------------------------------------------------------------------- |
+| **正文 / UI**| `'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif`             |
+| **纯英文场景** | `'Inter', system-ui, sans-serif`(`--font-inter`)· 用于"Ctrl K"等强制纯英文徽标            |
+| **Mono 装饰** | `'JetBrains Mono', 'Geist Mono', ui-monospace, monospace`                                       |
+
+**核心策略 · 浏览器字符级 fallthrough:**
+
+```
+Inter ────────→ 英文 / 数字 / 符号(命中)
+   │
+   ↓ (CJK 不命中,继续找)
+Alibaba PuHuiTi ──→ 中文(命中)
+   │
+   ↓ (字体未加载到)
+PingFang SC / Microsoft YaHei ──→ 系统中文兜底
+```
+
+浏览器对每个字符**逐个查找** font-family 链,Inter 不含 CJK 字形 → 中文字符自动跳到下一个候选。这是中英混排的标准做法,**不需要 JS、不会字重错位**。
+
+**V2 → V2.1 → V2.1 变更轨迹:**
+- V2: `Inter Tight` → 中文走系统 fallback → 字重错位
+- V2.1 (前一版): 单一 `Alibaba PuHuiTi` → 英文用普惠体英文字形 → 英文略圆,缺乏 Inter 的"科技感"
+- **V2.1 (本版)** : **Inter(英)+ Alibaba PuHuiTi(中)双字体协作** → 各自处理最擅长的语种
+
+**为什么这个组合最优:**
+- Inter:Vercel / Linear / Stripe 御用,**工程产品默认审美**。专门给屏幕 UI 优化,数字字形漂亮(同宽)。中文不擅长。
+- Alibaba PuHuiTi:阿里出品,免费商用,**为中英混排专门设计的笔画粗细配比**(45/55/65/85 多档),中文笔画与 Inter 视觉重量贴近。专门给中文优化。
+- 两者结合:**英文有 Inter 的锐利,中文有普惠体的清晰**,字重之间衔接自然。
+
+**Inter 载入:**
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+```
+
+**Alibaba PuHuiTi 载入:**
+
+```css
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 400;  /* 55 Regular */
+  src: local('Alibaba PuHuiTi 3.0'),
+       local('AlibabaPuHuiTi-3-55-Regular'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
+}
+/* 同写法处理 500 Medium / 600 SemiBold / 700 Bold */
+```
+
+> **优先级:** 本地安装(设计师机器一般装了)→ CDN 加载 → 系统中文兜底。**永远不会出现假字或方框。**
+
+**特殊场景 · 强制纯英文用 `--font-inter`:**
+
+某些场景必须确保用 Inter(比如 "Ctrl K" 这种快捷键徽标想要 Inter Bold 的紧凑感),直接用专属变量:
+
+```css
+.search-wrap .k {
+  font-family: var(--font-inter);  /* 跳过 fallback 链,锁定 Inter */
+  font-weight: 700;
+  font-size: 11.5px;
+  letter-spacing: 0.02em;
+}
+```
+
+Mono 字体保留 `JetBrains Mono`——用作装饰元素 `[ 200 OK ]` `// 05.14` `/v2`,**不参与中文**。
+
+### 3.2 字号 / 字重 / 行高(V2.1 整体放大半档,行高提升)
+
+| 角色             | 字号    | 字重 | 字距       | 行高 | 用途             |
+| ---------------- | ------- | ---- | ---------- | ---- | ---------------- |
+| H1 / Hero        | 36 px   | 500  | -0.024em   | 1.2  | 页面主标题(从 V2 的 32 上调) |
+| 区块 H2          | 28 px   | 500  | -0.02em    | 1.25 | section-head 标题 |
+| KPI 数值         | 32 px   | 500  | -0.02em    | 1.1  | 统计大数字       |
+| 子区 H3          | 16 px   | 500  | -0.01em    | 1.4  | subsection 标题(从 15 上调) |
+| 卡片标题         | 14 px   | 500  | normal     | 1.4  | 项目名 / 商品名(从 13.5 上调) |
+| 正文 body        | 14 px   | 400  | normal     | **1.65** | 默认正文(行高从 1.5 上调) |
+| 区块描述         | 14 px   | 400  | normal     | 1.75 | section-head 描述 |
+| 子区 lead        | 13 px   | 400  | normal     | 1.8  | 子区下方说明     |
+| Label(按钮/Tab)| 13 px   | 500  | normal     | 1.4  | 按钮文字 / Tab    |
+| Pill 文字        | 11.5 px | 500  | normal     | 1.3  | 状态徽标         |
+| Mono 标签        | 11–11.5 px | 400/500 | 0.04em | 1.5 | `[ STATUS ]`     |
+| Mono 散点        | 8.5 px  | 400  | 0.04em     | 1    | 背景 ASCII 装饰  |
+
+**字重档位仍仅 3 档:400 / 500 / 600**。普惠体 500(Medium 65)的中文笔画比 Inter 500 重一些,**整体不显单薄**,因此 600 几乎不需要。
+
+**关键属性:**
+- 数值类必须加 `font-variant-numeric: tabular-nums`
+- 标题用 negative letter-spacing(-0.01 ~ -0.024em)
+- 正文行高 **1.65–1.8**(V2 是 1.5–1.7),中文字间留呼吸
+
+---
+
+## 4. 圆角规则 · V2 统一 8 px
+
+> **核心原则(V2 改写):统一 8 px / 状态徽标完全圆 / 极少数微元素降到 4–6 px**
+
+| 元素类型                       | 圆角值     | 例子                            |
+| ------------------------------ | ---------- | ------------------------------- |
+| 所有结构性容器(大卡片 / 区块) | **8 px**   | `.stats` `.list-card` `.shortcut` `.tip` `.modal` |
+| 所有按钮 / 输入框              | **8 px**   | `.btn` `.pill-btn` `.icon-btn` `.search` |
+| nav 项                         | **8 px**   | `nav a`(V1 是 7,V2 统一)     |
+| 缩略图 / 画面占位              | **8 px**   | `.thumb` `.ic`                  |
+| 头像 / 小色块                  | **6 px**   | `.av` `.team .p`(可选 8)      |
+| Mono 标签 / badge / kbd        | **4 px**   | `.kbd` `.badge`                 |
+| 进度条段位                     | **2 px**   | `.prog span`                    |
+| Pill 状态徽标 / dot            | **999 px** | `.pill` `.dot`(完全圆)        |
+
+**为什么改:** Firecrawl 实测全站统一 8 px,工程感来自"准星 + 装订线 + mono 装饰",**不是硬切角**。0 圆角容器在小尺寸下会显得"卡顿、廉价",8 px 是同时兼顾"图纸感"和"成品感"的最佳值。
+
+---
+
+## 5. 边框 / 阴影 / 描边
+
+### 5.1 边框策略 · V2 改为 inside-border
+
+> **V2 改进:** 默认边框用 `::before` 伪元素绘制,而非真 `border`。原因:hover 时让 `::before` 透明度 → 0 不会触发布局抖动。
+
+**通用工具类:**
+
+```css
+.inside-border {
+  position: relative;
+}
+.inside-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--border-faint);
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity .2s ease, border-color .2s ease;
+}
+.inside-border:hover::before { opacity: 0; }
+```
+
+**层级:**
+- 默认:`var(--border-faint)`
+- 略深:`var(--border-muted)`(主分隔线)
+- 最深:`var(--border-loud)`(强分隔,少用)
+- **禁止 2px / 3px 实线**
+- **虚线**仅用于 `.tip` 提示框:`1px dashed var(--border-faint)`
+
+### 5.2 阴影 · V2 引入主 CTA 专属橙色发光
+
+**默认无阴影**(V1 规则保留)。
+
+**新增例外 · 主 CTA 4 层橙色阴影**(替代 V1 的"全场无"):
+
+```css
+.btn-primary {
+  box-shadow:
+    inset 0 -4px 8px rgba(250, 93, 25, 0.20),  /* 内阴影:底部暗一点 = 立体 */
+    0 1px 1px rgba(250, 93, 25, 0.12),
+    0 2px 4px rgba(250, 93, 25, 0.10),
+    0 0.5px 0.5px rgba(250, 93, 25, 0.16);
+}
+.btn-primary:hover {
+  box-shadow:
+    inset 0 -4px 8px rgba(250, 93, 25, 0.20),
+    0 1px 1px rgba(250, 93, 25, 0.16),
+    0 4px 8px rgba(250, 93, 25, 0.20),         /* 更高更亮 */
+    0 0.5px 0.5px rgba(250, 93, 25, 0.16);
+}
+```
+
+**Toast 阴影**(V1 保留):`0 4px 20px rgba(21,20,15,0.06)`,白色调,不属于橙色发光体系。
+
+### 5.3 容器四角"+"准星(签名元素 · V2 升级为 SVG)
+
+V1 用字符 `+`(font-family JetBrains Mono);V2 升级为 SVG 路径,带圆弧内凹,质感更工程化:
+
+```html
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" class="corner">
+  <path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z" fill="var(--border-muted)"/>
+</svg>
+```
+
+**位置:** 容器四角,中心精确落在边框交点上(用 `-translate-x-1/2 -translate-y-1/2`)。
+
+**字符版本兼容:** 简单卡片(如 modal 内嵌)仍可用 `content: '+'` 字符版,但全屏主容器必须用 SVG。
+
+---
+
+## 6. 主内容容器 · 新增装订线规则(V2 新增章节)
+
+> **核心签名:** 主工作区始终被两条 1 px 垂直边线包夹,配合四角准星,形成图纸装订线效果。
+
+```html
+<div class="workbench-container">
+  <svg class="corner top-left">...</svg>
+  <svg class="corner top-right">...</svg>
+  <svg class="corner bottom-left">...</svg>
+  <svg class="corner bottom-right">...</svg>
+  <!-- content -->
+</div>
+```
+
+```css
+.workbench-container {
+  max-width: 1480px;
+  margin: 0 auto;
+  border-left: 1px solid var(--border-faint);
+  border-right: 1px solid var(--border-faint);
+  position: relative;
+  /* 上下边线不要,只左右 */
+}
+.workbench-container .corner {
+  position: absolute;
+  width: 22px; height: 21px;
+}
+.workbench-container .corner.top-left     { top: -10.5px; left: -11px; }
+.workbench-container .corner.top-right    { top: -10.5px; right: -11px; }
+.workbench-container .corner.bottom-left  { bottom: -10.5px; left: -11px; }
+.workbench-container .corner.bottom-right { bottom: -10.5px; right: -11px; }
+```
+
+适用范围:工作台 / 项目列表页 / 商品库 / 流水线主区。**编辑器全屏画布、Modal 内不必加。**
+
+---
+
+## 7. 间距 / 栅格(V2.1 全局放大,Firecrawl-level 呼吸)
+
+**基础栅格:** 4 px
+
+**常用间距阶梯:** 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 40 / 48 / 64 / 80 / 104
+
+> **V2 → V2.1 变更:** 全局垂直间距系统性放大 30%。原因:Alibaba PuHuiTi 中文笔画比 Inter 厚一档,**字体密度提升 → 必须用更大的留白补偿**,否则视觉拥挤。这就是为什么 Firecrawl 的间距看起来"奢侈"——它的字体也是出版级偏紧凑的 Suisse Intl,留白补偿到位。
+
+**主区块布局:**
+- 侧边栏宽度:`248 px`(无变)
+- **主内容 padding:`72 px 80 px 120 px`**(从 V2 的 `48 56 56` 上调)
+- 内容最大宽度:`1280 px`(从 1480 收窄,留更多自然边距)
+- 区块间垂直:**`104 px`**(`section margin-bottom` · 从 80 上调)
+- 子区间垂直:**`64 px`**(`subsection margin-bottom` · 从 48 上调)
+- 子区标题底距:**`22 px`**(`h3 → 内容` · 从 16 上调)
+- 卡片网格间距:`24 px`(主区) / `14 px`(子区)
+- 卡片内 padding:
+  - 大卡片 / stats: **`28 px 30 px`**(从 22 24 上调)
+  - 列表行: **`20 px 24 px`**(从 14 18 上调)
+  - 快捷入口: **`18 px 20 px`**(从 14 上调)
+  - Modal 头/体: **`24 px 28 px`**(从 20 24 上调)
+  - Hero / section-head: **`52 px 56 px`** / `padding-bottom: 28 px`
+
+**最重要的一条:** 别再吝啬空气。**当不确定 padding 是 16 还是 24 时,选 24。** 当不确定 margin 是 48 还是 64 时,选 64。
+
+**间距/字号配对原则:**
+- 标题旁边的描述/副标:`mb 10–14 px`(紧凑组合)
+- 标题下方的正文/列表:`mb 22–28 px`(分组组合)
+- section 顶部 mono-tag → h2:`mb 14 px`
+- h2 → section description:`mb 12 px`
+- section-head 整体下方边线:`pb 28 px / mb 44 px`
+
+---
+
+## 8. 背景:制图纸网格(V1 保留)
+
+### 8.1 三层叠加
+
+```
+图层 1(最上):主交叉点 "+" 准星 SVG  — 240×240 重复
+图层 2(中间):子交叉点小圆点         — 60×60 重复
+图层 3(最下):虚线网格                — 240×240 重复(stroke-dasharray: 1.5 4)
+```
+
+**配色:**
+- "+" 准星:`#B8B3A4`(stroke 1 px)
+- 小点:`#CFCABB`(r=0.9)
+- 虚线:`#E2DED2`(stroke 1 px)
+
+### 8.2 视觉聚焦遮罩
+
+```css
+mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
+```
+
+### 8.3 装饰散点(Mono ASCII)
+
+主区域 4 个固定位置撒 ASCII 散点。字号 8.5 px / 颜色 `--ink-alpha-12` / 透明度 0.8 / `pointer-events: none`。
+
+### 8.4 边角 Mono 标签(品牌签名 · 保留)
+
+主区域 4 个角各放一个 Mono 标签:
+```
+左上 [ 200 OK ]    右上 [ /v2 ]
+左下 [ .MP4 · 9:16 ]    右下 [ STUDIO ]
+```
+
+字号 10.5 px / 颜色 `--ink-alpha-48` / 字距 0.06em。
+
+> **作用:** 让页面看起来像「在某个开发环境 / 调试视图里」,而不是普通官网。Firecrawl **没有**这个元素,这是流·Studio 的独特品牌资产。
+
+---
+
+## 9. Icon 系统(V2 强化章节,直接对应用户优化诉求 ①)
+
+### 9.1 通用规则
+
+- **格式:** 一律 SVG inline,**禁止** `<img>` 引图标
+- **库选择:** 推荐 Lucide(line icon,1.5–2 px stroke)或 Phosphor Regular
+- **stroke width:** 统一 **1.5 px**(替代 V1 提到的 1.8)
+- **stroke linecap / linejoin:** `round`
+- **填充:** **不填充**(纯 line icon)
+- **颜色:** 通过 `stroke="currentColor"`,继承父元素 `color`
+- **emoji 禁用:** 任何场景都不允许彩色 emoji
+
+### 9.2 尺寸阶梯
+
+| 场景                | 尺寸    | 用途                          |
+| ------------------- | ------- | ----------------------------- |
+| Icon-S              | 14 px   | 内嵌 inline 文字旁            |
+| Icon-M(默认)      | 16 px   | 按钮内 / Tab / list 行        |
+| Icon-L              | 20 px   | 顶栏 / 快捷入口 / dropdown 触发器 |
+| Icon-XL             | 24 px   | Modal 头部 / Toast / 空状态   |
+| Icon-Hero           | 36 px   | 空状态插画 / 大占位           |
+
+### 9.3 颜色规则
+
+| 场景         | 颜色                  |
+| ------------ | --------------------- |
+| 默认         | `--ink-alpha-56`      |
+| Hover        | `--ink`               |
+| Active / 选中| `--heat`              |
+| Disabled     | `--ink-alpha-12`      |
+| 在主 CTA 内  | `#FFFFFF`             |
+
+### 9.4 Icon-Box(快捷入口左侧的方块图标容器)
+
+```css
+.icon-box {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;             /* V1 是 0,V2 改 8 */
+  background: var(--heat-12);
+  display: grid;
+  place-items: center;
+}
+.icon-box svg { width: 16px; stroke: var(--heat); }
+```
+
+---
+
+## 10. 组件规范 · 含完整状态(V2 大幅扩充,对应用户诉求 ②③④)
+
+### 10.1 按钮(3 种类型 × 5 种状态 × 3 种尺寸)
+
+**类型:**
+
+| 类型              | 背景             | 文字               | 边框/描边                          |
+| ----------------- | ---------------- | ------------------ | ---------------------------------- |
+| `.btn` 默认       | `--card` 白       | `--ink`            | inside-border `--ink-alpha-12`     |
+| `.btn-primary` 主 | `--heat`          | `#FFFFFF`          | 无,靠橙色阴影分层                  |
+| `.btn-ghost` 无框 | transparent       | `--ink-alpha-56`   | 无                                  |
+
+**尺寸:**
+
+| 尺寸   | 高度  | padding      | 字号    | icon 尺寸 |
+| ------ | ----- | ------------ | ------- | --------- |
+| `-sm`  | 28 px | `0 10 px`    | 12 px   | 14 px     |
+| 默认   | 32 px | `0 14 px`    | 13 px   | 16 px     |
+| `-lg`  | 40 px | `0 18 px`    | 14 px   | 16 px     |
+
+**5 种状态(每种类型都要实现):**
+
+| 状态     | `.btn` 默认                                | `.btn-primary` 主                              |
+| -------- | ------------------------------------------ | ---------------------------------------------- |
+| Default  | 白底 / inside-border `--ink-alpha-12`      | 橙底 + 4 层橙阴影                              |
+| Hover    | 底色 `--ink-alpha-4` + 边框 opacity → 0    | 阴影第 3 层加亮(`0 4px 8px rgba(229,91,38,0.20)`) |
+| Active(按下) | 底色 `--ink-alpha-7` + `scale(0.99)`      | `scale(0.995)` + 阴影 inset 加深               |
+| Focused  | 外层 2 px `--heat-40` ring,offset 2 px    | 同左                                            |
+| Disabled | 底 `--bg-soft` + 文字 `--ink-alpha-12` + `cursor: not-allowed` + 无 hover | 底 `--heat-40` + 文字 `#FFFFFF` + 阴影消失 + `cursor: not-allowed` |
+
+**过渡:** 全场统一 `transition: background-color 200ms, opacity 200ms, transform 100ms, box-shadow 100ms ease`。
+
+### 10.2 Pill(状态徽标)· 严格分级(对应用户诉求 ②)
+
+> **V2 核心改进:Pill 分 3 级,同级别尺寸完全一致**
+
+| 级别         | 高度  | padding      | 字号    | 圆角  | dot 尺寸 | 用途                  |
+| ------------ | ----- | ------------ | ------- | ----- | -------- | --------------------- |
+| **L1 大胶囊** | 28 px | `0 12 px`    | 13 px   | 999 px| 8 px     | 项目状态 / 列表行     |
+| **L2 中胶囊** | 22 px | `0 10 px`    | 11.5 px | 999 px| 6 px     | **默认 / 通用**       |
+| **L3 小胶囊** | 18 px | `0 8 px`     | 10.5 px | 999 px| 5 px     | KPI 卡角标 / Mono 标签 |
+
+**色调(3 种,通用所有级别):**
+
+| 状态 | 文字色          | 底色          | 边框(20% alpha)|
+| ---- | --------------- | ------------- | ---------------- |
+| info | `--heat`        | `--heat-12`   | `--heat-20`      |
+| ok   | `--green`       | `--green-bg`(`#3F6B3F14`) | `--green-bd`(`#3F6B3F33`) |
+| err  | `--red`         | `--red-bg`(`#B33A2A14`)   | `--red-bd`(`#B33A2A33`)    |
+
+每个 pill 前置圆点(`.dot`,直径同上表,颜色继承文字色)。
+
+**HTML 写法:**
+
+```html
+<span class="pill pill-l2 pill-info">
+  <span class="dot"></span>
+  生成中
+</span>
+```
+
+### 10.3 输入框 / 搜索(V2.1 · 含 Firecrawl 式快捷键提示)
+
+**尺寸:** 高 **36 px**(从 V2 的 32 上调,中文留白更舒展)/ padding `0 14 px` / 字号 14 px / 圆角 8 px
+
+**状态:**
+
+| 状态     | 边框                              | 底色                  |
+| -------- | --------------------------------- | --------------------- |
+| Default  | inside-border `--black-alpha-12`  | `--card`              |
+| Hover    | inside-border `--black-alpha-24`  | `--card`              |
+| Focused  | inside-border `--heat-40` + inset 1 px | `--card`         |
+| Error    | inside-border `--red`             | `--red-bg`            |
+| Disabled | inside-border `--black-alpha-12`  | **`--black-alpha-5`**(从 `--bg-soft` 改 · 冷灰底太接近白,看不出禁用) |
+
+占位字色 `--black-alpha-48`,disabled 占位 `--black-alpha-24`。
+
+**带图标 / 快捷键搜索框(参考 Firecrawl 实测):**
+
+```
+[🔍] [          搜索任意内容...          ] Ctrl K
+ │                                          │
+ │ 16px line icon, color: --black-alpha-56  │ mono · 11.5px · --black-alpha-48
+ │ 左 14 px,**z-index: 2**(关键)          │ 右 14 px,**z-index: 2**
+ │                                          │ 平铺文本(无边框盒),不用 kbd 样式
+```
+
+**关键坑(已修):**
+1. **搜索 icon 看不见** —— `<input>` 的白色 bg 会盖住同级的 SVG icon。**SVG 必须加 `z-index: 2`** 才能抬到 input 之上。同理 Ctrl K 提示也要 z-index。
+2. **快捷键不用 `⌘`** —— JetBrains Mono webfont 不带 U+2318 `⌘` 字形,会显示成方框。**Windows 用户体系用 "Ctrl K" 纯文本**;Mac 端要显示 ⌘ 时用 SVG command 图标(见 §9.4)。
+3. **快捷键提示不要用 kbd 边框盒** —— Firecrawl 是平铺灰色 mono 文本,无任何 border / bg / radius。**显得克制,符合"克制大于装饰"。**
+
+### 10.4 KPI 统计行(`.stats`)
+
+- 1 行 4 格,共用一个 inside-border 容器,圆角 8 px,**无 gap**
+- 列与列之间用 `border-right: 1px solid var(--border-faint)` 分隔(最后一列去掉)
+- 容器四角加 SVG "+" 准星
+- 每格结构:label + L3 pill → 大数字(30 px) → delta / progress
+
+### 10.5 列表行(`.list-row`)
+
+```
+[缩略图 54×70] [标题 + meta] [进度条 5 段] [L2 pill] [按钮 -sm]
+```
+
+- grid 5 列:`54px 1fr auto auto auto`
+- 行高 padding `14 px 18 px`
+- 行间 1 px 分隔线(`--border-faint`),最后行去掉
+- **整行 hover** → `--ink-alpha-4` 底色
+- **整行 active**(键盘选中)→ `--ink-alpha-7` 底色
+- **整行 disabled** → opacity 0.5 + `cursor: not-allowed`
+
+### 10.6 进度条段位(流水线 5 阶段专用)· **V2.1 语义色重写**
+
+5 个 `18×5 px` 小段,3 px 间距,**每段颜色映射真实业务状态**(替代 V2 的"全灰已完成"——那样像项目失败):
+
+| 状态     | 颜色                  | 视觉处理                       |
+| -------- | --------------------- | ------------------------------ |
+| 未开始   | `--black-alpha-8`     | 极弱灰底 · 静态                |
+| **已完成** | `--accent-forest`(`#42c366`)| **绿色 · 静态**(替代 V2 灰色) |
+| **进行中** | `--heat`(`#fa5d19`)  | **橙色 + 1.4s 脉动**(opacity 1↔0.55 + scaleY 1↔0.7)· 区别于失败 |
+| 失败     | `--accent-crimson`(`#eb3424`)| 红色 · 静态                |
+
+圆角:每段 2 px。
+
+**关键设计:**
+- **绿/橙/红/灰** 四色一眼可辨:已完成的绿色让"5/5 全绿"=完美交付,**不会再有"全灰像失败了"的误读**
+- **橙色脉动动画** 是区分"进行中"与"失败"的关键——红色永远静态,只有橙色会呼吸,潜意识上"动 = 在运行,静 = 出错"
+
+```css
+.prog span.now {
+  background: var(--heat);
+  animation: prog-pulse 1.4s ease-in-out infinite;
+}
+@keyframes prog-pulse {
+  0%,100% { opacity: 1;    transform: scaleY(1); }
+  50%     { opacity: .55;  transform: scaleY(.7); }
+}
+```
+
+### 10.7 快捷入口卡(`.shortcut`)
+
+- 白底 / inside-border / **8 px 圆角**(V1 是 0) / 14 px padding
+- 左侧 32×32 橙色 tint 图标块(`--heat-12` 底 / 8 px 圆角 / 居中 16 px line icon)
+- 右侧:标题(13 px 500)+ Mono 描述(11.5 px,`--ink-alpha-48`)
+- **Default → Hover → Active 完整状态:**
+  - Hover:底色 `--ink-alpha-4` / 标题 underline-from-orange 1 px(可选)
+  - Active(点击瞬间):scale(0.99)
+  - Focused(键盘):2 px `--heat-40` ring
+
+### 10.8 提示框(`.tip`)
+
+- 白底 / **1 px 虚线**边框(`dashed`)/ **8 px 圆角**
+- 加粗标题独立一行 + 正文
+- 内联代码用 `.mono` 类:橙色文字 + `--heat-12` 底 + 4 px 圆角
+
+### 10.9 Toast
+
+- 右下角 24 px 偏移 / 白底 / inside-border / **8 px 圆角**
+- 唯一允许的"白阴影":`0 4px 20px rgba(21,20,15,0.06)`
+- 进入动画:`translateX(420px → 0)`,缓动 `cubic-bezier(0.34, 1.56, 0.64, 1)`,300 ms
+- 自动消失:2400 ms
+- 内容结构:左侧 24×24 橙色 tint 图标(`--heat-12` 底)+ 右侧标题 + Mono 副文本(`[ 200 OK ]`)
+
+### 10.10 弹窗(Modal)
+
+- 居中,460–480 px 宽,白底,**8 px 圆角**(V1 是 0)
+- 四角加 SVG "+" 准星
+- 遮罩 `rgba(21,20,15,0.42)`,带 `backdrop-filter: blur(8px)`
+- 进入动画:`scale(0.96 → 1)`,250 ms 弹性缓动
+- 三段结构:
+  - **Header:** 36 px 橙色 tint 图标 + 标题 + Mono 副标
+  - **Body:** 13 px / `--ink-alpha-56` / 行高 1.7
+  - **Footer:** 右对齐两个按钮(取消 + 主 CTA)
+- ESC 关闭 / 点击遮罩关闭
+
+### 10.11 Tab(双层)
+
+**主 Tab:**
+- 高 36 px / padding `0 14 px` / 字号 13 px / 字重 500
+- 未选中:`--ink-alpha-56` 文字
+- 选中:`--ink` 文字 + 底部 2 px `--heat` 横线(整个 tab 宽度)
+- Hover(未选中态):`--ink-alpha-7` 底色
+
+**副 Tab(过滤型):**
+- 高 28 px / padding `0 10 px` / 字号 12 px
+- 未选中:`--ink-alpha-56` + 灰度 icon
+- 选中:`--ink` + 多色 icon(grayscale: 0)
+- Tab 之间用 1 px 高 12 px 的 `--ink-alpha-7` 竖条分隔(可选)
+
+### 10.12 Dropdown / Select
+
+- 触发器:同输入框样式(高 32 / 圆角 8 / inside-border)
+- 右侧 16 px chevron-down icon,色 `--ink-alpha-48`,展开时旋转 180°
+- 弹层:白底 / 8 px 圆角 / `0 4px 20px rgba(21,20,15,0.06)` 阴影 / **唯一允许阴影场景之二**
+- 选项:高 32 / padding `0 12 / hover `--ink-alpha-4` / 选中 `--heat-12` + 右侧 14 px checkmark `--heat`
+- 分组分隔:1 px `--border-faint`
+
+### 10.13 Checkbox / Radio / Switch(V2.1 · 全部用 SVG icon)
+
+**通用原则:** 所有 indicator 都用真 SVG(via background-image data URI 或 inline `<svg>`),**禁止用 border-width / transform: rotate(45deg) 凑对勾**——那种 CSS hack 在缩放/字体渲染下会变形。
+
+**Checkbox:**
+- **容器:** 16×16 / 4 px 圆角 / inside-border `--black-alpha-24`(hover 时 → `--black-alpha-48`)
+- **Checked:** `--heat` 底 · 居中 12×12 白色 SVG checkmark(`<path d="M20 6 9 17l-5-5"/>` · stroke 3 · linecap round)
+- **Indeterminate:** `--heat` 底 · 居中 12×12 白色 SVG 横线(`<path d="M5 12h14"/>` · stroke 3)
+- **Disabled:** 底 `--black-alpha-5` + 边 `--black-alpha-12` + icon 不渲染或半透明
+- **实现方式:** `background-image: url("data:image/svg+xml,...")` · `background-size: 12px 12px` · `background-position: center` · 这样不需要 ::after 凑出 icon,SVG 是真实的
+
+**Radio:**
+- 16×16 圆 / inside-border `--black-alpha-24`
+- Checked:内嵌 8×8 `--heat` 实心圆(纯几何形状,不算 icon,用 ::after 即可)
+- Disabled:底 `--black-alpha-5`
+
+**Switch:**
+- 容器 28×16 / 999 px 圆角
+- Off:底 `--black-alpha-12` / 圆球 `#FFFFFF` 12×12 + 1 px subtle shadow
+- On:底 `--heat` / 圆球右移到 `left: 14px`
+- 过渡:`background 200 ms`,圆球位移 `left 200 ms`
+
+> **为什么不用字符 `✓` `✗` 这种 Unicode:** 不同系统、不同字体对这些字符的字形支持差异巨大(`⌘` 在 JetBrains Mono Web 字体里就是缺字形 → 显示成方框)。**SVG 是唯一可靠的解。**
+
+---
+
+## 11. 微观细节(品牌签名 · V1 保留)
+
+### 11.1 标签全部包方括号
+`[ 200 OK ]` `[ .MP4 · 9:16 ]` `[ /v2 ]` `[ /sidebar collapse ]`
+
+### 11.2 时间戳像代码注释
+`// 05.14 · 周五`
+
+### 11.3 数值后缀
+`¥327` 主体大字 + `.40` 小字次级(`<small>`)
+
+### 11.4 强调单词上色
+正文里 `<b style="color: var(--ink)">3 个项目</b>` —— 让具体数值/名词比周围文字更深一档(不是变橙)。**橙色只留给 CTA。**
+
+### 11.5 ASCII 字符做装饰
+`↑ 本月 +3` `↓ -1.2%`
+
+### 11.6 链接式"更多"按钮
+`[ ALL · 12 ] →` —— Mono 标签 + 箭头,色 `--ink-alpha-48`,hover 转橙。
+
+### 11.7 缩略图不放图,放比例
+`9:16` Mono 字符占位。
+
+---
+
+## 12. Don't List(绝对禁止)
+
+- ❌ **0 px 卡片**(V1 → V2 反转)
+- ❌ 渐变背景(只有 hero 区可考虑,但首选纯色)
+- ❌ 玻璃拟态(`backdrop-filter` 只用于 modal 遮罩)
+- ❌ 彩色 emoji 图标(用 SVG line icon,1.5 px stroke)
+- ❌ 多个 accent 色(全场只有橙色)
+- ❌ 大圆角容器(>12 px 直接判错)
+- ❌ 灰色阴影 / 文字阴影(只允许橙色主 CTA 阴影 + Toast/Dropdown 白阴影)
+- ❌ 鲜艳的状态色(避免荧光绿、电光蓝、霓虹粉)
+- ❌ 居中对齐大段正文(全部左对齐)
+- ❌ 把装饰当主角(场记板、丝绒、霓虹灯)
+- ❌ 无意义的微动效(hover 旋转、缩放、彩虹流光)
+- ❌ **hover 时换深 hue 的橙**(用 alpha)
+- ❌ **真 `border` + hover 边框消失**(用 inside-border ::before)
+- ❌ **同一行混用直角和圆角**(用户原话:"不要有些是直角,胶囊又是圆角")
+
+---
+
+## 13. Sass / CSS Token 速查表(V2.1)
+
+```css
+:root {
+  /* ============================================================
+     Color system V2.1 · Firecrawl-aligned
+     ============================================================ */
+
+  /* === 表面 / 背景(冷灰)=== */
+  --background-base:    #f9f9f9;
+  --background-lighter: #fbfbfb;
+  --surface:            #ffffff;
+  --surface-raised:     #ffffff;
+
+  /* === 边框(冷灰 · 3 档)=== */
+  --border-faint: #ededed;   /* 默认 1 px */
+  --border-muted: #e8e8e8;
+  --border-loud:  #e6e6e6;
+
+  /* === Accent 多彩(5 色信号)=== */
+  --accent-black:    #262626;
+  --accent-white:    #ffffff;
+  --accent-amethyst: #9061ff;
+  --accent-bluetron: #2a6dfb;
+  --accent-crimson:  #eb3424;
+  --accent-forest:   #42c366;
+  --accent-honey:    #ecb730;
+
+  /* === Heat · 单 hue + 8 档 alpha === */
+  --heat:    #fa5d19;
+  --heat-90: rgba(250, 93, 25, .90);
+  --heat-40: rgba(250, 93, 25, .40);
+  --heat-20: rgba(250, 93, 25, .20);
+  --heat-16: rgba(250, 93, 25, .16);
+  --heat-12: rgba(250, 93, 25, .12);
+  --heat-8:  rgba(250, 93, 25, .08);
+  --heat-4:  rgba(250, 93, 25, .04);
+
+  /* === Black-Alpha 阶梯(20 档 · 0–24 用 #000,32+ 用 #262626)=== */
+  --black-alpha-1:  rgba(0, 0, 0, .01);
+  --black-alpha-2:  rgba(0, 0, 0, .02);
+  --black-alpha-3:  rgba(0, 0, 0, .03);
+  --black-alpha-4:  rgba(0, 0, 0, .04);
+  --black-alpha-5:  rgba(0, 0, 0, .05);
+  --black-alpha-6:  rgba(0, 0, 0, .06);
+  --black-alpha-7:  rgba(0, 0, 0, .07);
+  --black-alpha-8:  rgba(0, 0, 0, .08);
+  --black-alpha-10: rgba(0, 0, 0, .10);
+  --black-alpha-12: rgba(0, 0, 0, .12);
+  --black-alpha-16: rgba(0, 0, 0, .16);
+  --black-alpha-20: rgba(0, 0, 0, .20);
+  --black-alpha-24: rgba(0, 0, 0, .24);
+  --black-alpha-32: rgba(38, 38, 38, .32);
+  --black-alpha-40: rgba(38, 38, 38, .40);
+  --black-alpha-48: rgba(38, 38, 38, .48);
+  --black-alpha-56: rgba(38, 38, 38, .56);
+  --black-alpha-64: rgba(38, 38, 38, .64);
+  --black-alpha-72: rgba(38, 38, 38, .72);
+  --black-alpha-88: rgba(38, 38, 38, .88);
+
+  /* === Legacy aliases(V2 命名 → V2.1 token,组件 CSS 无需重写)=== */
+  --bg:           var(--background-base);
+  --bg-soft:      var(--background-lighter);
+  --card:         var(--surface);
+  --ink:          var(--accent-black);
+  --green:        var(--accent-forest);
+  --red:          var(--accent-crimson);
+  --green-bg:     rgba(66, 195, 102, .08);
+  --green-bd:     rgba(66, 195, 102, .20);
+  --red-bg:       rgba(235, 52, 36, .08);
+  --red-bd:       rgba(235, 52, 36, .20);
+  --ink-alpha-4:  var(--black-alpha-4);
+  --ink-alpha-7:  var(--black-alpha-7);
+  --ink-alpha-12: var(--black-alpha-12);
+  --ink-alpha-24: var(--black-alpha-24);
+  --ink-alpha-32: var(--black-alpha-32);
+  --ink-alpha-48: var(--black-alpha-48);
+  --ink-alpha-56: var(--black-alpha-56);
+  --ink-alpha-64: var(--black-alpha-64);
+  --ink-alpha-72: var(--black-alpha-72);
+  --ink-alpha-88: var(--black-alpha-88);
+
+  /* === 圆角 === */
+  --r-sm: 4px;
+  --r-md: 8px;     /* 默认主圆角 */
+  --r-pill: 999px;
+
+  /* === 字体 === */
+  --font-sans: 'Inter Tight', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Geist Mono', monospace;
+
+  /* === 容器宽度 === */
+  --container-max: 1480px;
+  --sidebar-w: 248px;
+
+  /* === 过渡 === */
+  --t-fast: 100ms ease;
+  --t-base: 200ms ease;
+  --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* === Selection · Firecrawl 签名细节 === */
+::selection {
+  background: var(--heat-20);
+  color: var(--heat);
+}
+
+/* === Dark mode · 翻转底色 + black-alpha 改用 white-alpha === */
+.dark {
+  --background-base:    #0a0a0a;
+  --background-lighter: #141414;
+  --surface:            #171717;
+  --surface-raised:     #1f1f1f;
+  --border-faint: #2a2a2a;
+  --border-muted: #333333;
+  --border-loud:  #404040;
+  --accent-black: #f5f5f5;
+  --black-alpha-1:  rgba(255,255,255,.01);
+  --black-alpha-2:  rgba(255,255,255,.02);
+  --black-alpha-3:  rgba(255,255,255,.03);
+  --black-alpha-4:  rgba(255,255,255,.04);
+  --black-alpha-5:  rgba(255,255,255,.05);
+  --black-alpha-6:  rgba(255,255,255,.06);
+  --black-alpha-7:  rgba(255,255,255,.07);
+  --black-alpha-8:  rgba(255,255,255,.08);
+  --black-alpha-10: rgba(255,255,255,.10);
+  --black-alpha-12: rgba(255,255,255,.12);
+  --black-alpha-16: rgba(255,255,255,.16);
+  --black-alpha-20: rgba(255,255,255,.20);
+  --black-alpha-24: rgba(255,255,255,.24);
+  --black-alpha-32: rgba(255,255,255,.32);
+  --black-alpha-40: rgba(255,255,255,.40);
+  --black-alpha-48: rgba(255,255,255,.48);
+  --black-alpha-56: rgba(255,255,255,.56);
+  --black-alpha-64: rgba(255,255,255,.64);
+  --black-alpha-72: rgba(255,255,255,.72);
+  --black-alpha-88: rgba(255,255,255,.88);
+}
+```
+
+---
+
+## 14. V1 → V2 迁移检查清单(给后续改代码用)
+
+- [ ] 全局替换 `border-radius: 0` → `border-radius: 8px`(卡片 / stats / shortcut / modal / toast / thumb)
+- [ ] 替换 V1 ink-2/3/4 token 为 ink-alpha-56/48/12
+- [ ] 替换 `--orange-tint` `--orange-soft` 为 `--heat-12` `--heat-20`
+- [ ] 主 CTA hover 移除 `#D04E1F`,改用 4 层橙阴影变化
+- [ ] 所有 `.btn` `.input` 加 `inside-border` 类
+- [ ] 主工作区容器加 `border-left + border-right` + 4 个 SVG 准星
+- [ ] 字体 Inter → Inter Tight
+- [ ] 所有 icon 转 SVG line icon,stroke 1.5
+- [ ] Pill 按 L1/L2/L3 三级规范化高度/字号/圆点尺寸
+- [ ] 每个交互组件补齐 hover / active / focused / disabled 状态
+
+---
+
+## 15. 参考与来源
+
+- **视觉灵感(实测):** [Firecrawl Playground](https://www.firecrawl.dev/playground?endpoint=parse) · 详见 [firecrawl_playground_spec.md](_design_src/firecrawl_playground_spec.md)
+- **结构灵感:** Linear / Stripe Dashboard
+- **图纸感来源:** 印刷套版准星 + 老 Unix 终端
+- **V1 文档:** [DESIGN_SPEC.md](DESIGN_SPEC.md)(保留作为历史)
diff --git a/v2/account.html b/v2/account.html
new file mode 100644
index 0000000..7eaab31
--- /dev/null
+++ b/v2/account.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>账户 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  .acc-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
+  .balance-banner {
+    background: var(--accent-black);
+    color: var(--accent-white);
+    padding: 28px 32px;
+    margin-bottom: 24px;
+    position: relative;
+    border: 1px solid var(--accent-black);
+    border-radius: var(--r-md);
+  }
+  .balance-banner::before, .balance-banner::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
+  .balance-banner::before { top: -7px; left: -7px; }
+  .balance-banner::after { bottom: -7px; right: -7px; }
+  .balance-banner .corner-tr, .balance-banner .corner-bl { position: absolute; color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 13px; }
+  .balance-banner .corner-tr { top: -8px; right: -8px; }
+  .balance-banner .corner-bl { bottom: -8px; left: -8px; }
+  .balance-banner .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .04em; }
+  .balance-banner .v { font-size: 42px; font-weight: 700; letter-spacing: -.018em; margin-top: 8px; font-variant-numeric: tabular-nums; }
+  .balance-banner .meta { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 8px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .balance-banner .actions { display: flex; gap: 8px; margin-top: 18px; }
+  .balance-banner .btn { background: var(--accent-white); color: var(--accent-black); border-color: var(--accent-white); }
+  .balance-banner .btn:hover { background: var(--background-base); }
+  .balance-banner .btn-ghost { background: transparent; color: var(--accent-white); border: 1px solid rgba(255,255,255,.25); }
+  .balance-banner .btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--accent-white); }
+
+  .recharge-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
+  .recharge-card { border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 18px; text-align: center; cursor: pointer; background: var(--surface); position: relative; }
+  .recharge-card:hover { background: var(--background-lighter); }
+  .recharge-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .recharge-card.selected::before, .recharge-card.selected::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23FA5D19'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
+  .recharge-card.selected::before { top: -7px; left: -7px; }
+  .recharge-card.selected::after { bottom: -7px; right: -7px; }
+  .recharge-card .amt { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
+  .recharge-card .gift { font-size: 11px; color: var(--black-alpha-48); margin-top: 4px; font-family: var(--font-mono); }
+  .recharge-card .gift.bonus { color: var(--accent-forest); font-weight: 600; }
+  .recharge-card .ribbon { position: absolute; top: -8px; right: 8px; font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; background: var(--heat); color: var(--accent-white); letter-spacing: .04em; font-weight: 600; border-radius: var(--r-sm); }
+
+  .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
+  .pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
+  .pane h3 + .desc { font-size: 12px; color: var(--black-alpha-48); margin-top: -10px; margin-bottom: 14px; font-family: var(--font-mono); letter-spacing: .02em; }
+
+  .bills .neg { color: var(--accent-black); font-variant-numeric: tabular-nums; font-weight: 500; }
+  .bills .pos { color: var(--accent-forest); font-variant-numeric: tabular-nums; font-weight: 500; }
+  .bills .ref { color: var(--black-alpha-48); font-size: 11px; font-family: var(--font-mono); }
+
+  .usage-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
+  .usage-line .v { font-variant-numeric: tabular-nums; color: var(--accent-black); font-weight: 600; }
+  .usage-bar { height: 4px; background: var(--background-lighter); border-radius: 2px; margin: 6px 0 12px; overflow: hidden; }
+  .usage-bar > span { display: block; height: 100%; }
+
+  .rule-list { font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.7; }
+  .rule-list strong { color: var(--accent-black); font-weight: 600; }
+  .rule-list .mono { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 1px 5px; font-size: 11.5px; }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>账户</h1>
+    <div class="sub"><span class="mono">// 余额 · 充值 · 消费明细</span></div>
+  </div>
+</div>
+
+<div class="acc-grid">
+  <div>
+    <div class="balance-banner">
+      <span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
+      <div class="lbl">[ CURRENT BALANCE ]</div>
+      <div class="v">¥327.40</div>
+      <div class="meta">// 本月已消费 ¥162.60 · 可使用约 32 个项目</div>
+      <div class="actions">
+        <button class="btn btn-lg" onclick="Shell.toast('充值', '/billing/topup')">充值</button>
+        <button class="btn btn-ghost btn-lg" onclick="Shell.toast('提取明细', '/billing/export')">提取消费明细</button>
+      </div>
+    </div>
+
+    <div class="pane">
+      <h3>快速充值</h3>
+      <div class="desc">// 充值后立刻到账,可开发票</div>
+      <div class="recharge-row">
+        <div class="recharge-card" onclick="Shell.toast('选择 ¥100')"><div class="amt">¥100</div><div class="gift">无赠送</div></div>
+        <div class="recharge-card selected"><span class="ribbon">推荐</span><div class="amt">¥500</div><div class="gift bonus">+ ¥30 赠送</div></div>
+        <div class="recharge-card" onclick="Shell.toast('选择 ¥1000')"><div class="amt">¥1000</div><div class="gift bonus">+ ¥80 赠送</div></div>
+        <div class="recharge-card" onclick="Shell.toast('选择 ¥3000')"><div class="amt">¥3000</div><div class="gift bonus">+ ¥300 赠送</div></div>
+      </div>
+      <div style="display:flex; gap:10px; margin-top:14px;">
+        <input class="input" placeholder="自定义金额(最低 ¥50)" style="flex:1;">
+        <button class="btn btn-primary" onclick="Shell.toast('微信支付', '¥500 · WechatPay')">微信支付 ¥500</button>
+        <button class="btn" onclick="Shell.toast('支付宝', '¥500 · Alipay')">支付宝</button>
+      </div>
+    </div>
+
+    <div style="display:flex; align-items:baseline; margin-bottom:12px;">
+      <h2 style="font-size:15px; font-weight:600;">消费明细</h2>
+      <span class="spacer"></span>
+      <div class="hstack">
+        <button class="chip" style="height:28px; font-size:12px;">近 30 天</button>
+        <button class="chip" style="height:28px; font-size:12px;">导出</button>
+      </div>
+    </div>
+
+    <table class="t bills">
+      <thead>
+        <tr><th>时间</th><th>项目 / 类型</th><th>详情</th><th style="text-align:right;">金额</th></tr>
+      </thead>
+      <tbody>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.09 14:08</td><td>补水面膜 · v3</td><td class="muted">故事板 image-2 · 1 次</td><td style="text-align:right;" class="neg">-¥0.45</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.09 14:02</td><td>补水面膜 · v3</td><td class="muted">脚本 LLM · 2.4k tokens</td><td style="text-align:right;" class="neg">-¥0.04</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.09 13:38</td><td>补水面膜 · v3</td><td class="muted">基础资产 · 5 张图</td><td style="text-align:right;" class="neg">-¥1.05</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.08 18:21</td><td>透真防晒 · 通勤对比</td><td class="muted">视频片段 · 6 镜</td><td style="text-align:right;" class="neg">-¥1.20</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.08 11:02</td><td>充值</td><td class="muted">微信支付 · <span class="ref">TX2024050811021Z</span></td><td style="text-align:right;" class="pos">+¥500.00</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.07 20:14</td><td>蓝牙耳机 · 开箱</td><td class="muted">视频片段 · 5 镜(1 镜重跑不扣)</td><td style="text-align:right;" class="neg">-¥0.94</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.07 15:48</td><td>咖啡冻干 · 早八</td><td class="muted">故事板生成失败 · <span style="color:var(--black-alpha-48);">不扣费</span></td><td style="text-align:right;" class="muted-2">¥0.00</td></tr>
+        <tr><td class="muted-2 mono" style="font-size:11.5px;">05.06 10:30</td><td>瑜伽裤 · 通勤穿搭</td><td class="muted">项目导出 · 1 次</td><td style="text-align:right;" class="neg">-¥3.20</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div>
+    <div class="pane">
+      <h3>本月消费分布</h3>
+      <div class="usage-line"><span>视频片段(Seedance)</span><span class="v">¥98.40</span></div>
+      <div class="usage-bar"><span style="width:60%; background:var(--heat);"></span></div>
+
+      <div class="usage-line"><span>故事板(image-2)</span><span class="v">¥36.00</span></div>
+      <div class="usage-bar"><span style="width:22%; background:var(--accent-forest);"></span></div>
+
+      <div class="usage-line"><span>基础资产</span><span class="v">¥21.00</span></div>
+      <div class="usage-bar"><span style="width:13%; background:var(--black-alpha-56);"></span></div>
+
+      <div class="usage-line"><span>脚本 LLM</span><span class="v">¥7.20</span></div>
+      <div class="usage-bar"><span style="width:5%; background:var(--black-alpha-48);"></span></div>
+
+      <div class="divider"></div>
+      <div class="usage-line" style="font-weight:600;"><span>合计</span><span class="v">¥162.60</span></div>
+    </div>
+
+    <div class="pane">
+      <h3>扣费规则</h3>
+      <div class="rule-list">
+        <strong>① 失败不扣</strong>:模型超时、内容审核拦截、生成异常一律不扣费。<br>
+        <strong>② 用户重跑不扣首次</strong>:第一次重跑保留原扣费,第二次起按次结算。<br>
+        <strong>③ 仅在你点击 <span class="mono">[ 确认通过 ]</span> 时入账</strong>。<br>
+        <strong>④ 导出不再扣费</strong>,所有 token 已在过程中结算。
+      </div>
+    </div>
+
+    <div class="pane">
+      <h3>开发票</h3>
+      <div style="font-size:12.5px; color:var(--black-alpha-56); margin-bottom:10px;">本月可开发票额度:<strong style="color:var(--accent-black);">¥162.60</strong></div>
+      <button class="btn" style="width:100%;" onclick="Shell.toast('申请发票', '/billing/invoice')">申请发票</button>
+    </div>
+  </div>
+</div>
+
+</div>
+<script src="assets/shell.js"></script>
+<script>Shell.render({ active: 'account', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '账户' }] });</script>
+</body>
+</html>
diff --git a/v2/asset-factory.html b/v2/asset-factory.html
new file mode 100644
index 0000000..17f3730
--- /dev/null
+++ b/v2/asset-factory.html
@@ -0,0 +1,900 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>图片生成 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  #page-content { padding: 24px 28px 60px; }
+
+  /* ─── 三 Hero 卡片网格(模特上身图 / 平台套图 / 图片优化 · 等比)─── */
+  .factory-hero {
+    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px; margin-bottom: 56px;
+  }
+  @media (max-width: 1400px) { .factory-hero { grid-template-columns: 1fr 1fr; } }
+  @media (max-width: 1000px) { .factory-hero { grid-template-columns: 1fr; } }
+
+  .factory-card {
+    position: relative;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 28px 30px;
+    overflow: hidden;
+  }
+
+  /* 卡片内 · 文上图下 单列(3 卡并排时保持视觉一致)*/
+  .factory-body {
+    display: flex; flex-direction: column;
+    gap: 18px;
+    height: 100%;
+  }
+
+  .factory-text { display: flex; flex-direction: column; min-width: 0; }
+  .factory-tag {
+    align-self: flex-start;
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .06em;
+    padding: 2px 8px;
+    border: 1px solid var(--border-faint);
+    background: var(--background-lighter);
+    border-radius: var(--r-sm);
+    margin-bottom: 14px;
+  }
+  .factory-title {
+    font-size: 22px; font-weight: 600;
+    letter-spacing: -.018em; line-height: 1.25;
+    color: var(--accent-black);
+  }
+  .factory-desc {
+    margin-top: 8px;
+    font-size: 13.5px; color: var(--black-alpha-64); line-height: 1.55;
+  }
+
+  /* feature 列表 */
+  .factory-features {
+    list-style: none; padding: 0;
+    margin: 22px 0 0;
+    display: flex; flex-direction: column; gap: 11px;
+  }
+  .factory-features li {
+    display: flex; align-items: center; gap: 10px;
+    font-size: 13px; color: var(--black-alpha-72); font-weight: 500;
+  }
+  .factory-features .ff-ic {
+    width: 26px; height: 26px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: var(--heat-12);
+    color: var(--heat);
+    border-radius: var(--r-md);
+    flex-shrink: 0;
+  }
+  .factory-features .ff-ic svg { width: 14px; height: 14px; }
+
+  /* 平台 chip 行 */
+  .platform-row {
+    display: flex; flex-wrap: wrap; gap: 8px;
+    margin-top: 20px;
+  }
+  .platform-chip {
+    display: inline-flex; align-items: center; gap: 7px;
+    height: 30px; padding: 0 12px 0 8px;
+    border: 1px solid var(--border-faint);
+    background: var(--surface);
+    border-radius: var(--r-pill);
+    transition: background var(--t-base);
+    cursor: pointer;
+  }
+  .platform-chip:hover { background: var(--black-alpha-4); }
+  .platform-chip .code {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 20px; height: 20px;
+    background: var(--accent-black); color: var(--accent-white);
+    font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
+    border-radius: var(--r-pill); letter-spacing: .04em;
+  }
+  .platform-chip .nm {
+    font-size: 12px; color: var(--accent-black); font-weight: 500;
+  }
+
+  /* CTA 行:主按钮 + 价格 mono */
+  .factory-cta {
+    margin-top: auto; padding-top: 24px;
+    display: flex; align-items: center; gap: 14px;
+  }
+  .factory-cta .cost {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .04em;
+  }
+
+  /* 视觉占位 + feature 列表已隐藏 — CTA 卡片只保留标题 + 描述 + 按钮 */
+  .factory-visual { display: none; }
+  .factory-features { display: none; }
+  .model-visual { grid-template-columns: repeat(4, 1fr); }
+  .model-visual .main { aspect-ratio: 3 / 4; grid-column: span 1; }
+  .model-visual .stack { display: contents; }
+  .model-visual .stack .placeholder { aspect-ratio: 3 / 4; }
+  .kit-visual { grid-template-columns: repeat(4, 1fr); }
+  .kit-visual .placeholder { aspect-ratio: 1 / 1; }
+  .tri-visual { grid-template-columns: repeat(3, 1fr); }
+  .tri-visual .placeholder { aspect-ratio: 1 / 1; }
+
+  /* ─── 任务中心 · section header ─── */
+  .section-h { display: flex; align-items: center; gap: 12px; margin-top: 24px; margin-bottom: 14px; }
+  .section-h h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
+  .section-h .sub-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+
+  /* ─── 视图切换 (复用 projects.html · 图标 + 文字) ─── */
+  .view-toggle { display: inline-flex; border: 1px solid var(--border-faint); border-radius: var(--r-md); overflow: hidden; }
+  .view-toggle button { padding: 0 14px; background: var(--surface); color: var(--black-alpha-56); font-size: 13px; border: 0; border-right: 1px solid var(--border-faint); border-radius: 0; height: 36px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; transition: background var(--t-base), color var(--t-base); }
+  .view-toggle button:last-child { border-right: 0; }
+  .view-toggle button:hover { background: var(--background-lighter); color: var(--accent-black); }
+  .view-toggle button.active { background: var(--heat-12); color: var(--heat); font-weight: 600; }
+  .view-toggle button svg { width: 13px; height: 13px; }
+
+  /* ─── 网格视图 · 卡片(原 history-grid) ─── */
+  .history-grid {
+    display: grid; grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+  }
+  @media (max-width: 1280px) { .history-grid { grid-template-columns: repeat(3, 1fr); } }
+  @media (max-width: 960px)  { .history-grid { grid-template-columns: repeat(2, 1fr); } }
+  .history-grid[hidden] { display: none; }
+
+  .history-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 12px;
+    display: grid; grid-template-columns: 78px 1fr; gap: 14px;
+    align-items: center;
+    transition: background var(--t-base);
+    cursor: pointer;
+    position: relative;
+  }
+  .history-card:hover { background: var(--black-alpha-4); }
+  .history-card:hover .card-del-btn { opacity: 1; }
+  .history-card .placeholder { width: 78px; height: 78px; }
+
+  /* ─── 列表视图 · 表格 ─── */
+  #task-list-view[hidden] { display: none; }
+  .task-name-cell { display: flex; align-items: center; gap: 12px; }
+  .task-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); }
+  .task-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; }
+  .task-sub { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
+  table.t .task-list-prog { display: flex; align-items: center; gap: 8px; min-width: 120px; }
+  table.t .task-list-prog .bar { flex: 1; height: 4px; background: var(--black-alpha-7); border-radius: 2px; overflow: hidden; }
+  table.t .task-list-prog .bar span { display: block; height: 100%; background: var(--heat); border-radius: 2px; animation: hp-pulse 1.4s ease-in-out infinite; }
+  table.t .task-list-prog .pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--heat); letter-spacing: .02em; white-space: nowrap; }
+
+  /* ─── 行末 ⋯ 删除气泡 (复用 projects.html) ─── */
+  .row-action { display: flex; gap: 4px; justify-content: flex-end; }
+  table.t tbody tr .row-more { opacity: 0; transition: opacity .15s; }
+  table.t tbody tr:hover .row-more { opacity: 1; }
+  .row-more {
+    position: relative; display: inline-flex;
+    cursor: pointer; align-items: center;
+    color: var(--black-alpha-56);
+    padding: 4px;
+  }
+  .row-more:hover { color: var(--accent-black); }
+  .row-more-tip {
+    position: absolute; top: calc(100% + 6px); right: 0;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    box-shadow: 0 4px 16px rgba(0,0,0,.08);
+    padding: 4px; min-width: 110px;
+    opacity: 0; pointer-events: none;
+    transform: translateY(-2px);
+    transition: opacity .15s, transform .15s;
+    z-index: 12;
+  }
+  .row-more-tip::before {
+    content: ''; position: absolute;
+    top: -8px; left: 0; right: 0; height: 8px;
+  }
+  .row-more:hover .row-more-tip,
+  .row-more-tip:hover { opacity: 1; pointer-events: auto; transform: translateY(0); }
+  .row-more-tip .mi {
+    display: flex; align-items: center; gap: 6px;
+    width: 100%; padding: 6px 10px;
+    background: transparent; border: 0;
+    border-radius: var(--r-sm); cursor: pointer;
+    font-size: 12.5px; color: var(--accent-black);
+    font-family: inherit; text-align: left;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .row-more-tip .mi:hover {
+    background: var(--crimson-bg, #fdebea);
+    color: var(--accent-crimson, #c43d3d);
+  }
+  .row-more-tip .mi svg { width: 13px; height: 13px; }
+
+  /* ─── 删除确认 modal · 复用 ─── */
+  .modal-bg.show { display: flex; }
+  .mono-acc { font-family: var(--font-mono); color: var(--heat); font-weight: 600; }
+
+  .history-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+  .history-name {
+    font-size: 13.5px; font-weight: 600; color: var(--accent-black);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .history-type {
+    font-size: 11.5px; color: var(--black-alpha-48);
+    font-family: var(--font-mono); letter-spacing: .02em;
+  }
+  .history-foot {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-top: 4px; gap: 6px; min-width: 0;
+  }
+  .history-foot .mono {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .history-foot .pill { padding: 2px 8px; font-size: 10.5px; }
+  .history-foot .pill .dot { width: 5px; height: 5px; }
+
+  /* 进度条(生成中状态) */
+  .history-prog {
+    margin-top: 6px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .history-prog .bar {
+    flex: 1; height: 4px;
+    background: var(--black-alpha-7);
+    border-radius: 2px; overflow: hidden;
+  }
+  .history-prog .bar span {
+    display: block; height: 100%;
+    background: var(--heat); border-radius: 2px;
+    animation: hp-pulse 1.4s ease-in-out infinite;
+  }
+  @keyframes hp-pulse {
+    0%, 100% { opacity: 1; transform: scaleY(1); }
+    50%      { opacity: .55; transform: scaleY(.7); }
+  }
+  .history-prog .pct {
+    font-family: var(--font-mono); font-size: 10px;
+    color: var(--heat); letter-spacing: .02em; white-space: nowrap;
+  }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>图片生成</h1>
+    <div class="sub">
+      <span class="mono">// 一键生成</span>
+      <span>·</span>
+      <span>电商视觉素材,提升内容制作效率</span>
+    </div>
+  </div>
+</div>
+
+<!-- 双 Hero 卡片 -->
+<div class="factory-hero">
+
+  <!-- 卡片 A · 模特上身图 -->
+  <div class="factory-card with-corners">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+
+    <div class="factory-body">
+      <div class="factory-text">
+        <span class="factory-tag">[ MODEL · TRY-ON ]</span>
+        <div class="factory-title">模特上身图</div>
+        <div class="factory-desc">选择模特,AI 生成商品模特上身效果图</div>
+
+        <ul class="factory-features">
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5M14 19c.5-2.4 2.4-4 5-4 .8 0 1.5.2 2 .5"/></svg>
+            </span>
+            支持多模特选择
+          </li>
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/><rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/></svg>
+            </span>
+            一次生成 4 张
+          </li>
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg>
+            </span>
+            支持多商品并行
+          </li>
+        </ul>
+
+        <div class="factory-cta">
+          <a class="btn btn-primary btn-lg" href="model-photo.html">
+            开始生成
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+          </a>
+          <span class="cost">[ ≈ ¥0.30 / 张 ]</span>
+        </div>
+      </div>
+
+      <div class="factory-visual model-visual">
+        <div class="placeholder main"><span class="ph-frame">Ava · 9:16</span></div>
+        <div class="stack">
+          <div class="placeholder"><span class="ph-frame">变体 01</span></div>
+          <div class="placeholder"><span class="ph-frame">变体 02</span></div>
+          <div class="placeholder"><span class="ph-frame">变体 03</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 卡片 B · 平台套图 -->
+  <div class="factory-card with-corners">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+
+    <div class="factory-body">
+      <div class="factory-text">
+        <span class="factory-tag">[ PLATFORM · KIT ]</span>
+        <div class="factory-title">平台套图</div>
+        <div class="factory-desc">选择平台模板,AI 生成电商平台套图</div>
+
+        <ul class="factory-features">
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V9M9 21V5M15 21v-8M21 21V11"/></svg>
+            </span>
+            覆盖主流电商平台
+          </li>
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/><rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/></svg>
+            </span>
+            一键生成 4 张套图
+          </li>
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z"/></svg>
+            </span>
+            智能排版设计
+          </li>
+        </ul>
+
+        <div class="platform-row">
+          <div class="platform-chip"><span class="code">DY</span><span class="nm">抖音</span></div>
+          <div class="platform-chip"><span class="code">TB</span><span class="nm">淘宝</span></div>
+          <div class="platform-chip"><span class="code">XHS</span><span class="nm">小红书</span></div>
+          <div class="platform-chip"><span class="code">PDD</span><span class="nm">拼多多</span></div>
+          <div class="platform-chip"><span class="code">AMZ</span><span class="nm">亚马逊</span></div>
+        </div>
+
+        <div class="factory-cta">
+          <a class="btn btn-primary btn-lg" href="platform-cover.html">
+            开始生成
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+          </a>
+          <span class="cost">[ ≈ ¥0.50 / 张 ]</span>
+        </div>
+      </div>
+
+      <div class="factory-visual kit-visual">
+        <div class="placeholder"><span class="ph-frame">套图 / TB</span></div>
+        <div class="placeholder"><span class="ph-frame">套图 / DY</span></div>
+        <div class="placeholder"><span class="ph-frame">套图 / XHS</span></div>
+        <div class="placeholder"><span class="ph-frame">套图 / PDD</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 卡片 C · 图片优化(生成人物 / 商品三视图)-->
+  <div class="factory-card with-corners">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+
+    <div class="factory-body">
+      <div class="factory-text">
+        <span class="factory-tag">[ TRI-VIEW · OPTIMIZE ]</span>
+        <div class="factory-title">图片优化</div>
+        <div class="factory-desc">为人物 / 商品生成三视图,保证多镜头一致性</div>
+
+        <ul class="factory-features">
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="3"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5"/></svg>
+            </span>
+            人物 · 商品 全支持
+          </li>
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="18"/><rect x="9" y="3" width="6" height="18"/><rect x="15" y="3" width="6" height="18"/></svg>
+            </span>
+            正面 / 侧面 / 背面 一次输出
+          </li>
+          <li>
+            <span class="ff-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+            </span>
+            多镜头一致性保证
+          </li>
+        </ul>
+
+        <div class="factory-cta">
+          <a class="btn btn-primary btn-lg" href="model-photo.html?mode=tri">
+            开始生成
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+          </a>
+          <span class="cost">[ ≈ ¥0.40 / 组 ]</span>
+        </div>
+      </div>
+
+      <div class="factory-visual tri-visual">
+        <div class="placeholder"><span class="ph-frame">正面</span></div>
+        <div class="placeholder"><span class="ph-frame">侧面</span></div>
+        <div class="placeholder"><span class="ph-frame">背面</span></div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<!-- ============= 任务中心 · 参考 projects.html 布局 ============= -->
+<div class="section-h">
+  <h2>任务中心</h2>
+  <span class="sub-mono">// <span id="tc-sub-total">0</span> 个 · <span id="tc-sub-gen">0</span> 生成中 · <span id="tc-sub-ok">0</span> 已完成 · <span id="tc-sub-err">0</span> 失败</span>
+</div>
+
+<!-- 状态 tabs (复用 .tabs) -->
+<div class="tabs" id="tc-tabs">
+  <div class="tab active" data-filter="all">全部 <span class="count">0</span></div>
+  <div class="tab" data-filter="gen">生成中 <span class="count">0</span></div>
+  <div class="tab" data-filter="ok">已完成 <span class="count">0</span></div>
+  <div class="tab" data-filter="err">失败 <span class="count">0</span></div>
+</div>
+
+<!-- toolbar: search + 类型 chip + clear + view-toggle -->
+<div class="toolbar">
+  <div class="search-inline">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+    <input class="input" id="tc-search" placeholder="搜索任务名">
+  </div>
+  <div class="chip-wrap" data-key="type">
+    <button class="chip" type="button"><span class="chip-label">任务类型</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <button class="clear-filters" id="tc-clear" type="button" hidden>
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+    清空筛选
+  </button>
+  <span class="spacer"></span>
+  <div class="view-toggle" id="tc-view-toggle">
+    <button type="button" data-view="grid">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="5" height="5"/><rect x="9" y="2" width="5" height="5"/><rect x="2" y="9" width="5" height="5"/><rect x="9" y="9" width="5" height="5"/></svg>
+      网格
+    </button>
+    <button type="button" class="active" data-view="list">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h12M2 12h12"/></svg>
+      列表
+    </button>
+  </div>
+</div>
+
+<div class="result-meta" id="tc-result-meta">// 显示 <span class="count">0</span> / 0 个任务</div>
+
+<!-- ============= LIST VIEW (默认) ============= -->
+<div id="task-list-view">
+  <table class="t">
+    <thead>
+      <tr>
+        <th style="width:32%">任务</th>
+        <th>类型</th>
+        <th style="width:140px">进度</th>
+        <th>状态</th>
+        <th style="width:120px">创建于</th>
+        <th style="width:48px"></th>
+      </tr>
+    </thead>
+    <tbody id="task-list-tbody"><!-- JS 从卡片同步生成 --></tbody>
+  </table>
+</div>
+
+<!-- ============= GRID VIEW ============= -->
+<div class="history-grid" id="task-grid" hidden>
+
+  <div class="task-card history-card" data-status="ok" data-type="model" data-name="补水面膜 × Ava">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();" data-action="delete-task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">Ava · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">补水面膜 × Ava</div>
+      <div class="history-type">模特上身图 · 4 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.19 · 14:30</span>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="ok" data-type="platform" data-name="精华液 × 平台套图">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">TB / XHS · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">精华液 × 平台套图</div>
+      <div class="history-type">平台套图 · 4 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.19 · 14:25</span>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="gen" data-type="model" data-name="防晒霜 × Luna">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">Luna · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">防晒霜 × Luna</div>
+      <div class="history-type">模特上身图 · 4 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.19 · 14:20</span>
+        <span class="pill info"><span class="dot"></span>生成中</span>
+      </div>
+      <div class="history-prog">
+        <div class="bar"><span style="width:65%"></span></div>
+        <span class="pct">65%</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="err" data-type="platform" data-name="面霜 × 平台套图">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">DY / PDD · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">面霜 × 平台套图</div>
+      <div class="history-type">平台套图 · 4 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.19 · 14:15</span>
+        <span class="pill err"><span class="dot"></span>失败</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="ok" data-type="model" data-name="口红 × Mia">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">Mia · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">口红 × Mia</div>
+      <div class="history-type">模特上身图 · 4 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.18 · 21:08</span>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="ok" data-type="platform" data-name="眼霜 × 平台套图">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">TB / DY · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">眼霜 × 平台套图</div>
+      <div class="history-type">平台套图 · 8 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.18 · 18:42</span>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="ok" data-type="model" data-name="瑜伽裤 × Zoe">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">Zoe · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">瑜伽裤 × Zoe</div>
+      <div class="history-type">模特上身图 · 12 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.18 · 11:20</span>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="task-card history-card" data-status="ok" data-type="platform" data-name="咖啡粉 × 平台套图">
+    <button class="card-del-btn" type="button" title="删除任务" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder"><span class="ph-frame">XHS / AMZ · 1:1</span></div>
+    <div class="history-body">
+      <div class="history-name">咖啡粉 × 平台套图</div>
+      <div class="history-type">平台套图 · 4 张</div>
+      <div class="history-foot">
+        <span class="mono">// 05.17 · 16:50</span>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+</div>
+
+<!-- ===== 删除确认 modal (复用 projects.html 风格) ===== -->
+<div class="modal-bg" id="tc-del-bg">
+  <div class="modal" role="dialog">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m" style="background:var(--crimson-bg,#fdebea);color:var(--accent-crimson,#c43d3d)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+      </div>
+      <div class="ti">确认删除任务<span>// CONFIRM DELETE</span></div>
+    </div>
+    <div class="modal-b" id="tc-del-body">即将删除任务记录。</div>
+    <div class="modal-f">
+      <button class="btn" type="button" id="tc-del-cancel">取消</button>
+      <button class="btn" type="button" id="tc-del-ok" style="background:var(--accent-crimson);color:var(--accent-white);border-color:var(--accent-crimson)">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/></svg>
+        确认删除
+      </button>
+    </div>
+  </div>
+</div>
+
+<script src="assets/shell.js"></script>
+<script src="assets/new-product-drawer.js"></script>
+<script>
+Shell.render({
+  active: 'asset-factory',
+  crumbs: [{ label: '工作台', href: 'index.html' }, { label: '图片生成' }]
+});
+
+/* ============================================================
+   任务中心 · projects.html 风格 (tabs + toolbar + 双视图)
+   ============================================================ */
+(function () {
+  'use strict';
+
+  const TYPE_LABEL = { model: '模特上身图', platform: '平台套图' };
+  const STATUS_LABEL = { ok: '已完成', gen: '生成中', err: '失败' };
+  const STATUS_PILL = { ok: 'ok', gen: 'info', err: 'err' };
+
+  const taskGrid = document.getElementById('task-grid');
+  const listTbody = document.getElementById('task-list-tbody');
+  const gridView = document.getElementById('task-grid');
+  const listView = document.getElementById('task-list-view');
+  const cards = [...taskGrid.querySelectorAll('.task-card')];
+
+  const state = { filter: 'all', type: 'all', search: '', view: 'list' };
+
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+
+  // 任务行点击 → 跳转到对应工作台,携带商品名(任务名一般是「商品 × 模特/平台」格式)
+  function goToWorkbench(type, name) {
+    const productName = (name || '').split(/\s[×x]\s/)[0].trim();
+    const q = '?t=' + Date.now() + (productName ? '&product=' + encodeURIComponent(productName) : '');
+    const url = (type === 'model') ? 'model-photo.html' + q
+              : (type === 'platform') ? 'platform-cover.html' + q
+              : 'projects-new.html' + q;
+    location.href = url;
+  }
+
+  /* ---------- 1. 从卡片生成 list 表行 (单数据源) ---------- */
+  function rowFor(card) {
+    const name = card.dataset.name;
+    const type = card.dataset.type;
+    const status = card.dataset.status;
+    const subText = (card.querySelector('.history-type')?.textContent || '').trim();
+    const timeText = (card.querySelector('.history-foot .mono')?.textContent || '').replace(/^\/\/\s*/, '');
+    const pct = card.querySelector('.history-prog .pct')?.textContent || '';
+    const pillClass = STATUS_PILL[status] || 'info';
+    const pillLabel = STATUS_LABEL[status] || status;
+
+    const tr = document.createElement('tr');
+    tr.dataset.taskRow = '1';
+    tr.dataset.name = name;
+    tr.dataset.type = type;
+    tr.dataset.status = status;
+    tr.addEventListener('click', () => goToWorkbench(type, name));
+    tr.innerHTML = `
+      <td>
+        <div class="task-name-cell">
+          <div class="placeholder task-thumb"><span class="ph-frame">${esc(name.split(' ')[0] || '')}</span></div>
+          <div>
+            <div class="task-name">${esc(name)}</div>
+            <div class="task-sub">${esc(subText)}</div>
+          </div>
+        </div>
+      </td>
+      <td><span class="muted">${esc(TYPE_LABEL[type] || type)}</span></td>
+      <td>${status === 'gen'
+        ? `<div class="task-list-prog"><div class="bar"><span style="width:${pct || '60%'}"></span></div><span class="pct">${esc(pct || '60%')}</span></div>`
+        : (status === 'ok' ? '<span class="muted-2 mono" style="font-size:11px;">已完成</span>' : '<span class="muted-2 mono" style="font-size:11px;">—</span>')}</td>
+      <td><span class="pill ${pillClass}"><span class="dot"></span>${esc(pillLabel)}</span></td>
+      <td class="muted-2">${esc(timeText)}</td>
+      <td>
+        <div class="row-action">
+          <span class="row-more"><svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="13" cy="8" r="1.2" fill="currentColor"/></svg>
+            <div class="row-more-tip"><button class="mi mi-del-task" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>删除任务</button></div>
+          </span>
+        </div>
+      </td>
+    `;
+    // 阻止 row-more 区域冒泡触发整行点击
+    tr.querySelector('.row-more').addEventListener('click', e => e.stopPropagation());
+    return tr;
+  }
+
+  cards.forEach(card => {
+    const tr = rowFor(card);
+    listTbody.appendChild(tr);
+    card._listRow = tr;
+    tr._card = card;
+  });
+
+  /* ---------- 2. 构建类型 chip 菜单 ---------- */
+  const checkSvg = '<svg class="mi-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg>';
+  const typeMenu = document.querySelector('.chip-wrap[data-key="type"] .chip-menu');
+  const typeOptions = [...new Set(cards.map(c => c.dataset.type))];
+  typeMenu.innerHTML = `<div class="mi selected" data-value="all">${checkSvg}<span>全部任务类型</span></div><div class="mi-sep"></div>`
+    + typeOptions.map(v => `<div class="mi" data-value="${esc(v)}">${checkSvg}<span>${esc(TYPE_LABEL[v] || v)}</span></div>`).join('');
+
+  function syncTypeChip() {
+    const wrap = document.querySelector('.chip-wrap[data-key="type"]');
+    const label = wrap.querySelector('.chip-label');
+    const chip = wrap.querySelector('.chip');
+    if (state.type === 'all') {
+      label.textContent = '任务类型';
+      chip.classList.remove('active');
+    } else {
+      label.textContent = TYPE_LABEL[state.type] || state.type;
+      chip.classList.add('active');
+    }
+    wrap.querySelectorAll('.mi').forEach(mi => mi.classList.toggle('selected', mi.dataset.value === state.type));
+  }
+
+  /* ---------- 3. applyFilter ---------- */
+  function applyFilter() {
+    const q = state.search.toLowerCase();
+    let visible = 0;
+    cards.forEach(card => {
+      const okStatus = state.filter === 'all' || card.dataset.status === state.filter;
+      const okType = state.type === 'all' || card.dataset.type === state.type;
+      const okSearch = !q || (card.dataset.name || '').toLowerCase().includes(q);
+      const show = okStatus && okType && okSearch;
+      card.style.display = show ? '' : 'none';
+      if (card._listRow) card._listRow.style.display = show ? '' : 'none';
+      if (show) visible++;
+    });
+
+    // 计数
+    const counts = { all: cards.length, gen: 0, ok: 0, err: 0 };
+    cards.forEach(c => { if (counts[c.dataset.status] !== undefined) counts[c.dataset.status]++; });
+    document.querySelectorAll('#tc-tabs .tab').forEach(t => {
+      const f = t.dataset.filter;
+      t.querySelector('.count').textContent = f === 'all' ? counts.all : counts[f];
+    });
+    document.getElementById('tc-sub-total').textContent = counts.all;
+    document.getElementById('tc-sub-gen').textContent   = counts.gen;
+    document.getElementById('tc-sub-ok').textContent    = counts.ok;
+    document.getElementById('tc-sub-err').textContent   = counts.err;
+
+    document.getElementById('tc-result-meta').innerHTML = `// 显示 <span class="count">${visible}</span> / ${cards.length} 个任务`;
+    document.getElementById('tc-clear').hidden = !(state.search || state.type !== 'all');
+  }
+
+  /* ---------- 4. 事件绑定 ---------- */
+  // status tabs
+  document.querySelectorAll('#tc-tabs .tab').forEach(t => {
+    t.addEventListener('click', () => {
+      document.querySelectorAll('#tc-tabs .tab').forEach(x => x.classList.remove('active'));
+      t.classList.add('active');
+      state.filter = t.dataset.filter;
+      applyFilter();
+    });
+  });
+  // search
+  document.getElementById('tc-search').addEventListener('input', e => {
+    state.search = e.target.value.trim();
+    applyFilter();
+  });
+  // type chip
+  const typeWrap = document.querySelector('.chip-wrap[data-key="type"]');
+  typeWrap.querySelector('.chip').addEventListener('click', e => {
+    e.stopPropagation();
+    const isOpen = typeWrap.classList.contains('open');
+    document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+    if (!isOpen) typeWrap.classList.add('open');
+  });
+  typeMenu.addEventListener('click', e => {
+    const mi = e.target.closest('.mi');
+    if (!mi) return;
+    e.stopPropagation();
+    state.type = mi.dataset.value;
+    typeWrap.classList.remove('open');
+    syncTypeChip();
+    applyFilter();
+  });
+  document.addEventListener('click', () => {
+    document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+  });
+  // clear filters
+  document.getElementById('tc-clear').addEventListener('click', () => {
+    state.search = '';
+    state.type = 'all';
+    document.getElementById('tc-search').value = '';
+    syncTypeChip();
+    applyFilter();
+    Shell.toast('已清空筛选');
+  });
+  // view toggle
+  document.querySelectorAll('#tc-view-toggle button').forEach(b => {
+    b.addEventListener('click', () => {
+      document.querySelectorAll('#tc-view-toggle button').forEach(x => x.classList.remove('active'));
+      b.classList.add('active');
+      state.view = b.dataset.view;
+      if (state.view === 'list') { listView.hidden = false; gridView.hidden = true; }
+      else                        { listView.hidden = true;  gridView.hidden = false; }
+    });
+  });
+
+  /* ---------- 5. 删除 modal + 配对删除 (复用 projects.html 模式) ---------- */
+  const delBg = document.getElementById('tc-del-bg');
+  const delBody = document.getElementById('tc-del-body');
+  const delCancel = document.getElementById('tc-del-cancel');
+  const delOk = document.getElementById('tc-del-ok');
+  let _delTarget = null;
+
+  function openDelConfirm(target) {
+    _delTarget = target;
+    const name = target.dataset.name || '该任务';
+    delBody.innerHTML = '即将删除任务 <span class="mono-acc">' + esc(name) + '</span>。任务记录将清除,已入库的素材不受影响。';
+    delBg.classList.add('show');
+  }
+  function closeDelConfirm() { delBg.classList.remove('show'); _delTarget = null; }
+  delCancel.addEventListener('click', closeDelConfirm);
+  delBg.addEventListener('click', e => { if (e.target === delBg) closeDelConfirm(); });
+  delOk.addEventListener('click', () => {
+    if (!_delTarget) return;
+    const card = _delTarget._card || _delTarget;  // 可能传 row (with ._card) 或 card (with ._listRow)
+    const row = card._listRow;
+    const name = card.dataset.name;
+    card.remove();
+    if (row) row.remove();
+    // 同步 cards 数组
+    const idx = cards.indexOf(card);
+    if (idx >= 0) cards.splice(idx, 1);
+    closeDelConfirm();
+    Shell.toast('已删除', name);
+    applyFilter();
+  });
+
+  // 绑定网格卡 删除按钮
+  document.querySelectorAll('.task-card .card-del-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      const card = btn.closest('.task-card');
+      if (card) openDelConfirm(card);
+    });
+  });
+
+  // 绑定网格卡片点击 → 跳工作台
+  cards.forEach(card => {
+    card.style.cursor = 'pointer';
+    card.addEventListener('click', e => {
+      if (e.target.closest('.card-del-btn')) return;
+      goToWorkbench(card.dataset.type, card.dataset.name);
+    });
+  });
+  // 绑定列表行 删除按钮 (事件委托, 因为是动态生成)
+  listTbody.addEventListener('click', e => {
+    const btn = e.target.closest('.mi-del-task');
+    if (!btn) return;
+    e.stopPropagation();
+    const tr = btn.closest('tr');
+    if (tr) openDelConfirm(tr);
+  });
+
+  /* ---------- 6. 初始化 ---------- */
+  applyFilter();
+})();
+</script>
+</body>
+</html>
diff --git a/v2/assets/new-product-drawer.js b/v2/assets/new-product-drawer.js
new file mode 100644
index 0000000..f62dd03
--- /dev/null
+++ b/v2/assets/new-product-drawer.js
@@ -0,0 +1,578 @@
+/* ============================================================
+   新建商品 · 共享 Drawer 模块
+   ----------------------------------------------------------
+   在任意页面只需 <script src="assets/new-product-drawer.js"> 引入,
+   然后调用 NewProductDrawer.open({ onSave: fn }) 即可在当前页之上
+   弹出右侧 Drawer。点击遮罩 / X / 取消 / ESC 关闭后,用户停在原页面。
+
+   提供:
+     window.NewProductDrawer.open(opts?)
+     window.NewProductDrawer.close()
+   opts 字段:
+     onSave(product)  — 保存时回调,product = { id, name, cat, target,
+                        points: string[], images: { id, dataUrl, name }[] }
+   ============================================================ */
+(function () {
+  'use strict';
+  if (window.NewProductDrawer) return; // idempotent
+
+  const DRAWER_ID    = 'npd-drawer';
+  const DRAWER_BG_ID = 'npd-drawer-bg';
+
+  /* ---------- 注入样式(独立 namespace 以免与 products.html 冲突) ---------- */
+
+  const CSS = `
+  /* drawer base (相同尺寸/动画) */
+  #${DRAWER_BG_ID} {
+    position: fixed; inset: 0;
+    background: rgba(21, 20, 15, .32);
+    display: none; z-index: 1100;
+  }
+  #${DRAWER_BG_ID}.show { display: block; }
+  #${DRAWER_ID} {
+    position: fixed; right: 0; top: 0; bottom: 0;
+    width: 820px; max-width: 100vw;
+    background: var(--surface);
+    border-left: 1px solid var(--border-faint);
+    z-index: 1101;
+    transform: translateX(100%);
+    transition: transform .25s cubic-bezier(.32, .72, 0, 1);
+    display: flex; flex-direction: column;
+    box-shadow: -4px 0 24px rgba(21, 20, 15, .04);
+  }
+  #${DRAWER_ID}.show { transform: translateX(0); }
+  #${DRAWER_ID} .drawer-h {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center;
+  }
+  #${DRAWER_ID} .drawer-h h3 { font-size: 16px; font-weight: 600; color: var(--accent-black); }
+  #${DRAWER_ID} .drawer-h .x {
+    margin-left: auto; width: 32px; height: 32px;
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    color: var(--black-alpha-56); cursor: pointer;
+    background: transparent; border: 0;
+    transition: background var(--t-base);
+  }
+  #${DRAWER_ID} .drawer-h .x:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+  #${DRAWER_ID} .drawer-b { padding: 24px 28px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
+  #${DRAWER_ID} .drawer-f {
+    padding: 14px 24px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; gap: 10px; align-items: center;
+    background: var(--surface);
+  }
+  #${DRAWER_ID} .drawer-f .btn-guide {
+    margin-right: auto;
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 13px; color: var(--black-alpha-56);
+    background: transparent; border: 0; cursor: pointer;
+    padding: 8px 10px; border-radius: var(--r-md);
+    font-family: inherit;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  #${DRAWER_ID} .drawer-f .btn-guide:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  #${DRAWER_ID} .drawer-f .btn-guide svg { width: 14px; height: 14px; }
+
+  /* form-card */
+  #${DRAWER_ID} .form-h {
+    font-size: 15px; font-weight: 600; color: var(--accent-black);
+    margin-bottom: 18px; padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  #${DRAWER_ID} .field { margin-bottom: 16px; }
+  #${DRAWER_ID} .field:last-child { margin-bottom: 0; }
+  #${DRAWER_ID} .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
+  #${DRAWER_ID} .field-label {
+    display: block; font-size: 13px; font-weight: 500;
+    color: var(--accent-black); margin-bottom: 6px;
+  }
+  #${DRAWER_ID} .field-label .req { color: var(--heat); margin-left: 2px; }
+  #${DRAWER_ID} .field-label .opt {
+    color: var(--black-alpha-48); font-weight: 400; font-size: 12px; margin-left: 6px;
+  }
+  #${DRAWER_ID} .input,
+  #${DRAWER_ID} .select {
+    width: 100%; height: 38px;
+    background: var(--background-lighter);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    padding: 0 14px;
+    font-size: 13.5px; color: var(--accent-black);
+    outline: none; font-family: inherit;
+    transition: border-color var(--t-base);
+  }
+  #${DRAWER_ID} .input:focus,
+  #${DRAWER_ID} .select:focus {
+    border-color: var(--heat-40);
+    box-shadow: inset 0 0 0 1px var(--heat-40);
+  }
+
+  /* upload */
+  #${DRAWER_ID} .pf-upload-row {
+    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+    gap: 16px; align-items: stretch;
+  }
+  #${DRAWER_ID} .pf-upload-zone {
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    padding: 28px 20px;
+    background: var(--background-lighter);
+    cursor: pointer; text-align: center;
+    transition: border-color var(--t-base), background var(--t-base);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    min-height: 180px;
+  }
+  #${DRAWER_ID} .pf-upload-zone:hover { border-color: var(--heat); background: var(--heat-8); }
+  #${DRAWER_ID} .pf-upload-zone .uz-ic {
+    width: 44px; height: 44px;
+    margin: 0 auto 10px;
+    background: var(--surface);
+    border: 1px solid var(--heat-20);
+    border-radius: var(--r-md);
+    color: var(--heat);
+    display: grid; place-items: center;
+  }
+  #${DRAWER_ID} .pf-upload-zone .uz-ic svg { width: 20px; height: 20px; }
+  #${DRAWER_ID} .pf-upload-zone .uz-t { font-size: 14px; color: var(--accent-black); font-weight: 500; }
+  #${DRAWER_ID} .pf-upload-zone .uz-t strong { color: var(--heat); font-weight: 600; }
+  #${DRAWER_ID} .pf-upload-zone .uz-d {
+    margin-top: 8px;
+    font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  #${DRAWER_ID} .pf-example {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 16px;
+    display: flex; flex-direction: column; gap: 10px;
+  }
+  #${DRAWER_ID} .pf-example .ex-h { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  #${DRAWER_ID} .pf-example .ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+  #${DRAWER_ID} .pf-example .ex-grid .ex-thumb {
+    aspect-ratio: 1;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    overflow: hidden; position: relative;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+  }
+  #${DRAWER_ID} .pf-example .ex-grid .ex-thumb svg { width: 22px; height: 22px; }
+  #${DRAWER_ID} .pf-example .ex-grid .ex-thumb::after {
+    content: ''; position: absolute; inset: 0;
+    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px);
+    pointer-events: none;
+  }
+  #${DRAWER_ID} .pf-example .ex-d { font-size: 12px; color: var(--black-alpha-56); line-height: 1.5; }
+  #${DRAWER_ID} .pf-grid {
+    display: grid; grid-template-columns: repeat(5, 1fr);
+    gap: 8px; margin-top: 12px;
+  }
+  #${DRAWER_ID} .pf-grid:empty { display: none; }
+  #${DRAWER_ID} .pf-thumb {
+    aspect-ratio: 1;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    position: relative; overflow: hidden; cursor: pointer;
+  }
+  #${DRAWER_ID} .pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
+  #${DRAWER_ID} .pf-thumb .pf-x {
+    position: absolute; top: 4px; right: 4px;
+    width: 22px; height: 22px;
+    background: rgba(0,0,0,.7); color: var(--accent-white);
+    border: 0; border-radius: 50%; cursor: pointer;
+    display: grid; place-items: center;
+    opacity: 0; transition: opacity var(--t-base);
+  }
+  #${DRAWER_ID} .pf-thumb:hover .pf-x { opacity: 1; }
+  #${DRAWER_ID} .pf-thumb .pf-x svg { width: 11px; height: 11px; }
+
+  /* bullet-list */
+  #${DRAWER_ID} .bullet-list { list-style: none; padding: 0; margin: 0; }
+  #${DRAWER_ID} .bullet-list .bl-item,
+  #${DRAWER_ID} .bullet-list .bl-add {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    margin-bottom: 6px;
+    font-size: 13.5px;
+  }
+  #${DRAWER_ID} .bullet-list .bl-add { background: transparent; border-style: dashed; }
+  #${DRAWER_ID} .bullet-list .num {
+    width: 22px; height: 22px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-family: var(--font-mono);
+    font-size: 11px; color: var(--heat); font-weight: 700;
+    display: grid; place-items: center; flex-shrink: 0;
+  }
+  #${DRAWER_ID} .bullet-list .bl-text { flex: 1; color: var(--accent-black); }
+  #${DRAWER_ID} .bullet-list .bl-input {
+    flex: 1; background: transparent; border: 0; outline: none;
+    font-size: 13.5px; color: var(--accent-black); font-family: inherit;
+  }
+  #${DRAWER_ID} .bullet-list .bl-x {
+    width: 22px; height: 22px;
+    color: var(--black-alpha-48);
+    cursor: pointer; display: grid; place-items: center;
+    border-radius: var(--r-sm);
+    transition: color var(--t-base), background var(--t-base);
+  }
+  #${DRAWER_ID} .bullet-list .bl-x:hover { color: var(--accent-crimson); background: var(--crimson-bg); }
+  #${DRAWER_ID} .bullet-list .bl-x svg { width: 11px; height: 11px; }
+
+  @media (max-width: 900px) {
+    #${DRAWER_ID} .pf-upload-row { grid-template-columns: 1fr; }
+  }
+  `;
+
+  const HTML = `
+  <div id="${DRAWER_BG_ID}"></div>
+  <aside id="${DRAWER_ID}" role="dialog" aria-label="新建商品" aria-hidden="true">
+    <div class="drawer-h">
+      <h3>新建商品</h3>
+      <button class="x" type="button" data-act="close" aria-label="关闭">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+      </button>
+    </div>
+    <div class="drawer-b">
+      <div class="form-card">
+        <div class="form-h">基础信息</div>
+
+        <div class="field">
+          <label class="field-label">商品名称<span class="req">*</span></label>
+          <input class="input" data-f="name" placeholder="请输入商品名称(必填)" maxlength="100">
+        </div>
+
+        <div class="field-row">
+          <div>
+            <label class="field-label">品类<span class="req">*</span></label>
+            <select class="select" data-f="cat">
+              <option>美妆个护</option>
+              <option>服饰内衣</option>
+              <option>食品饮料</option>
+              <option>家居家电</option>
+              <option>数码 3C</option>
+              <option>个护清洁</option>
+              <option>运动户外</option>
+              <option>母婴亲子</option>
+            </select>
+          </div>
+          <div>
+            <label class="field-label">目标人群<span class="opt">(选填)</span></label>
+            <input class="input" data-f="target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="field-label">商品主图<span class="req">*</span></label>
+          <input type="file" data-f="file" accept="image/*" multiple hidden>
+          <div class="pf-upload-row">
+            <div class="pf-upload-zone" data-act="upload-zone">
+              <div class="uz-ic">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+              </div>
+              <div class="uz-t">点击上传或<strong>拖拽图片</strong>到此处</div>
+              <div class="uz-d">// 支持 JPG、PNG 格式,建议尺寸 800×800 以上,大小不超过 10MB</div>
+            </div>
+            <div class="pf-example">
+              <div class="ex-h">示例图</div>
+              <div class="ex-grid">
+                <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10l1 4v12H6V8l1-4z"/><path d="M9 4v3M15 4v3M9 11h6M9 14h6"/></svg></div>
+                <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="5" width="12" height="15" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div>
+                <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3h8l1 5v12H7V8l1-5z"/><circle cx="12" cy="13" r="2.5"/></svg></div>
+              </div>
+              <div class="ex-d">优质的商品图有助于生成更好的素材效果</div>
+            </div>
+          </div>
+          <div class="pf-grid" data-f="grid"></div>
+        </div>
+
+        <div class="field" style="margin-bottom: 0;">
+          <label class="field-label">核心卖点<span class="req">*</span></label>
+          <ul class="bullet-list" data-f="bullets">
+            <li class="bl-add"><span class="num">+</span><input class="bl-input" placeholder="添加新卖点 · 回车确认"></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="drawer-f">
+      <button class="btn-guide" type="button" data-act="guide">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 4M12 17h.01"/></svg>
+        使用指南
+      </button>
+      <button class="btn" type="button" data-act="cancel">取消</button>
+      <button class="btn btn-primary" type="button" data-act="save">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+        创建商品
+      </button>
+    </div>
+  </aside>
+  `;
+
+  /* ---------- DOM refs (populated by ensureInjected) ---------- */
+  let injected = false;
+  let bg, drawer, $f, $grid, $bullets, $blInput;
+  let currentOpts = {};
+  const PF_MAX = 5;
+  let pfFiles = []; // { id, dataUrl, name }
+  const blXSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+
+  function esc(s) { return String(s == null ? '' : s).replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]); }
+  function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 5); }
+  function toast(msg, sub) {
+    if (typeof Shell !== 'undefined' && Shell && Shell.toast) Shell.toast(msg, sub);
+  }
+
+  function ensureInjected() {
+    if (injected) return;
+    // style
+    const styleEl = document.createElement('style');
+    styleEl.textContent = CSS;
+    document.head.appendChild(styleEl);
+    // html
+    const wrap = document.createElement('div');
+    wrap.innerHTML = HTML;
+    while (wrap.firstChild) document.body.appendChild(wrap.firstChild);
+
+    bg       = document.getElementById(DRAWER_BG_ID);
+    drawer   = document.getElementById(DRAWER_ID);
+    $f       = {
+      name:   drawer.querySelector('[data-f="name"]'),
+      cat:    drawer.querySelector('[data-f="cat"]'),
+      target: drawer.querySelector('[data-f="target"]'),
+      file:   drawer.querySelector('[data-f="file"]'),
+    };
+    $grid    = drawer.querySelector('[data-f="grid"]');
+    $bullets = drawer.querySelector('[data-f="bullets"]');
+    $blInput = $bullets.querySelector('.bl-add .bl-input');
+
+    bindEvents();
+    injected = true;
+  }
+
+  function bindEvents() {
+    // 关闭交互
+    bg.addEventListener('click', close);
+    drawer.addEventListener('click', e => {
+      const a = e.target.closest('[data-act]');
+      if (!a) return;
+      const act = a.dataset.act;
+      if (act === 'close')  return close();
+      if (act === 'cancel') return close();
+      if (act === 'guide')  return toast('使用指南', '点击查看完整填写指南');
+      if (act === 'save')   return save();
+      if (act === 'upload-zone') return openFilePicker();
+    });
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && drawer.classList.contains('show')) close();
+    });
+
+    // 上传
+    $f.file.addEventListener('change', e => { addFiles(e.target.files); e.target.value = ''; });
+    const zone = drawer.querySelector('[data-act="upload-zone"]');
+    zone.addEventListener('dragover', e => { e.preventDefault(); zone.style.borderColor = 'var(--heat)'; });
+    zone.addEventListener('dragleave', () => { zone.style.borderColor = ''; });
+    zone.addEventListener('drop', e => {
+      e.preventDefault(); zone.style.borderColor = '';
+      if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+    });
+
+    // 卖点 bullet-list
+    $blInput.addEventListener('keydown', e => {
+      if (e.key === 'Enter') { e.preventDefault(); blAdd($blInput.value); $blInput.value = ''; }
+    });
+  }
+
+  function openFilePicker() { if (pfFiles.length < PF_MAX) $f.file.click(); }
+
+  function pfRender() {
+    $grid.innerHTML = pfFiles.map(u => `
+      <div class="pf-thumb" data-id="${u.id}">
+        <img src="${u.dataUrl}" alt="${esc(u.name)}">
+        <button class="pf-x" type="button" title="删除">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+        </button>
+      </div>
+    `).join('');
+    $grid.querySelectorAll('.pf-thumb .pf-x').forEach(b => {
+      b.onclick = e => {
+        e.stopPropagation();
+        const id = b.closest('.pf-thumb').dataset.id;
+        const i = pfFiles.findIndex(f => f.id === id);
+        if (i >= 0) { pfFiles.splice(i, 1); pfRender(); }
+      };
+    });
+  }
+
+  function addFiles(fileList) {
+    const room = PF_MAX - pfFiles.length;
+    if (room <= 0) { toast('已达上限', PF_MAX + ' / ' + PF_MAX + ' 张'); return; }
+    const incoming = [...fileList].filter(f => f.type.startsWith('image/')).slice(0, room);
+    let done = 0;
+    incoming.forEach(f => {
+      const r = new FileReader();
+      r.onload = e => {
+        pfFiles.push({ id: uid(), dataUrl: e.target.result, name: f.name });
+        if (++done === incoming.length) {
+          pfRender();
+          toast('已上传', '+ ' + done + ' 张 · 共 ' + pfFiles.length + ' / ' + PF_MAX);
+        }
+      };
+      r.readAsDataURL(f);
+    });
+  }
+
+  function blRenumber() {
+    [...$bullets.querySelectorAll('.bl-item')].forEach((li, i) => {
+      li.querySelector('.num').textContent = i + 1;
+    });
+  }
+  function blAdd(text) {
+    const t = (text || '').trim();
+    if (!t) return;
+    const li = document.createElement('li');
+    li.className = 'bl-item';
+    li.innerHTML = '<span class="num">0</span><span class="bl-text">' + esc(t) + '</span><span class="bl-x" title="删除">' + blXSvg + '</span>';
+    $bullets.querySelector('.bl-add').before(li);
+    li.querySelector('.bl-x').addEventListener('click', () => {
+      li.style.transition = 'opacity .15s, transform .15s';
+      li.style.opacity = 0;
+      li.style.transform = 'translateX(-8px)';
+      setTimeout(() => { li.remove(); blRenumber(); }, 150);
+    });
+    blRenumber();
+  }
+  function getBullets() {
+    return [...$bullets.querySelectorAll('.bl-item .bl-text')].map(t => t.textContent.trim()).filter(Boolean);
+  }
+
+  /* ---------- API ---------- */
+
+  function resetForm() {
+    $f.name.value = '';
+    $f.cat.value = $f.cat.options[0].value;
+    $f.target.value = '';
+    pfFiles = [];
+    pfRender();
+    [...$bullets.querySelectorAll('.bl-item')].forEach(li => li.remove());
+    $blInput.value = '';
+  }
+
+  function lockBody() {
+    // 优先用 Shell 的引用计数实现(避免多 overlay 互相解锁)
+    if (typeof Shell !== 'undefined' && Shell && typeof Shell.lockScroll === 'function') {
+      Shell.lockScroll();
+      return;
+    }
+    // 兜底: Shell 未加载时本地锁
+    const docEl = document.documentElement;
+    const sbw = window.innerWidth - docEl.clientWidth;
+    drawer._lockSnap = {
+      bodyOverflow: document.body.style.overflow,
+      bodyPaddingRight: document.body.style.paddingRight,
+      htmlOverflow: docEl.style.overflow,
+    };
+    document.body.style.overflow = 'hidden';
+    docEl.style.overflow = 'hidden';
+    if (sbw > 0) document.body.style.paddingRight = sbw + 'px';
+  }
+  function unlockBody() {
+    if (typeof Shell !== 'undefined' && Shell && typeof Shell.unlockScroll === 'function') {
+      Shell.unlockScroll();
+      return;
+    }
+    const s = drawer._lockSnap;
+    if (s) {
+      document.body.style.overflow = s.bodyOverflow;
+      document.body.style.paddingRight = s.bodyPaddingRight;
+      document.documentElement.style.overflow = s.htmlOverflow;
+      drawer._lockSnap = null;
+    }
+  }
+
+  function open(opts) {
+    ensureInjected();
+    if (drawer.classList.contains('show')) return; // 已开则不重复锁
+    currentOpts = opts || {};
+    resetForm();
+    bg.classList.add('show');
+    drawer.classList.add('show');
+    drawer.setAttribute('aria-hidden', 'false');
+    lockBody();
+    setTimeout(() => $f.name.focus(), 280);
+  }
+
+  function close() {
+    if (!injected) return;
+    if (!drawer.classList.contains('show')) return; // 已关则不重复解锁
+    bg.classList.remove('show');
+    drawer.classList.remove('show');
+    drawer.setAttribute('aria-hidden', 'true');
+    unlockBody();
+    if (typeof currentOpts.onClose === 'function') currentOpts.onClose();
+  }
+
+  function save() {
+    const name   = ($f.name.value || '').trim();
+    const cat    = $f.cat.value;
+    const target = ($f.target.value || '').trim();
+    const points = getBullets();
+    const images = pfFiles.slice();
+
+    if (!name) {
+      toast('请填写商品名称');
+      $f.name.focus();
+      return;
+    }
+    if (images.length === 0) {
+      toast('请上传商品主图', '至少 1 张');
+      return;
+    }
+    if (points.length === 0) {
+      toast('请添加核心卖点', '至少 1 条');
+      $blInput.focus();
+      return;
+    }
+
+    const product = {
+      id: 'np-' + uid(),
+      name, cat, target,
+      points,
+      images,
+      imgs: images.length,
+    };
+    toast('商品已创建', '+ ' + name);
+    if (typeof currentOpts.onSave === 'function') currentOpts.onSave(product);
+    close();
+  }
+
+  window.NewProductDrawer = { open, close };
+
+  /* ---------- sessionStorage 自动打开钩子 ---------- */
+  // 任何页面只要在跳转前 sessionStorage.setItem('npd-auto-open','1') 即可,
+  // 落地页加载完模块后,会自动 open() 一次并清掉 flag。
+  // 用于:product-create.html 重定向后让落地页弹出 drawer,而不是用户重新点击。
+  function checkAutoOpen() {
+    try {
+      if (sessionStorage.getItem('npd-auto-open') === '1') {
+        sessionStorage.removeItem('npd-auto-open');
+        // 延后一拍,确保宿主页面自己的 init 已经跑完
+        setTimeout(() => open(), 50);
+      }
+    } catch (e) { /* sessionStorage 不可用就静默放弃 */ }
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', checkAutoOpen);
+  } else {
+    checkAutoOpen();
+  }
+})();
diff --git a/v2/assets/restraint.css b/v2/assets/restraint.css
new file mode 100644
index 0000000..22a1acd
--- /dev/null
+++ b/v2/assets/restraint.css
@@ -0,0 +1,1442 @@
+/* ============================================================
+   流·Studio · Restraint V2.1 · Firecrawl-aligned · 纯净版
+   ============================================================
+   严格遵循 DESIGN_SPEC_V2.md V2.1 · 不含任何 V1/V2 legacy alias
+   ============================================================ */
+
+/* ============ Web font · Alibaba PuHuiTi 3.0 ============ */
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: local('Alibaba PuHuiTi 3.0'),
+       local('AlibabaPuHuiTi-3-55-Regular'),
+       local('Alibaba PuHuiTi 2.0'),
+       local('AlibabaPuHuiTi-2-55-Regular'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: local('Alibaba PuHuiTi 3.0 Medium'),
+       local('AlibabaPuHuiTi-3-65-Medium'),
+       local('AlibabaPuHuiTi-2-65-Medium'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-65-Medium/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: local('AlibabaPuHuiTi-3-75-SemiBold'),
+       local('AlibabaPuHuiTi-2-75-SemiBold'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-75-SemiBold/AlibabaPuHuiTi-3-75-SemiBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: local('Alibaba PuHuiTi 3.0 Bold'),
+       local('AlibabaPuHuiTi-3-85-Bold'),
+       local('AlibabaPuHuiTi-2-85-Bold'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2');
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* ===== Backgrounds (冷灰) ===== */
+  --background-base:    #f9f9f9;
+  --background-lighter: #fbfbfb;
+  --surface:            #ffffff;
+  --surface-raised:     #ffffff;
+
+  /* ===== Borders (冷灰 3 档,语义优先) ===== */
+  --border-faint: #ededed;
+  --border-muted: #e8e8e8;
+  --border-loud:  #e6e6e6;
+
+  /* ===== Accent multi-color (5 色信号) ===== */
+  --accent-black:    #262626;
+  --accent-white:    #ffffff;
+  --accent-amethyst: #9061ff;
+  --accent-bluetron: #2a6dfb;
+  --accent-crimson:  #eb3424;
+  --accent-forest:   #42c366;
+  --accent-honey:    #ecb730;
+
+  /* status 配套底/边 */
+  --forest-bg:  rgba(66, 195, 102, .08);
+  --forest-bd:  rgba(66, 195, 102, .20);
+  --crimson-bg: rgba(235, 52,  36,  .08);
+  --crimson-bd: rgba(235, 52,  36,  .20);
+  --honey-bg:   rgba(236, 183, 48,  .08);
+  --honey-bd:   rgba(236, 183, 48,  .20);
+
+  /* ===== Heat · 单 hue + 8 档 alpha ===== */
+  --heat:    #fa5d19;
+  --heat-90: rgba(250, 93, 25, .90);
+  --heat-40: rgba(250, 93, 25, .40);
+  --heat-20: rgba(250, 93, 25, .20);
+  --heat-16: rgba(250, 93, 25, .16);
+  --heat-12: rgba(250, 93, 25, .12);
+  --heat-8:  rgba(250, 93, 25, .08);
+  --heat-4:  rgba(250, 93, 25, .04);
+
+  /* ===== Black-alpha 阶梯 (20 档) ===== */
+  --black-alpha-1:  rgba(0, 0, 0, .01);
+  --black-alpha-2:  rgba(0, 0, 0, .02);
+  --black-alpha-3:  rgba(0, 0, 0, .03);
+  --black-alpha-4:  rgba(0, 0, 0, .04);
+  --black-alpha-5:  rgba(0, 0, 0, .05);
+  --black-alpha-6:  rgba(0, 0, 0, .06);
+  --black-alpha-7:  rgba(0, 0, 0, .07);
+  --black-alpha-8:  rgba(0, 0, 0, .08);
+  --black-alpha-10: rgba(0, 0, 0, .10);
+  --black-alpha-12: rgba(0, 0, 0, .12);
+  --black-alpha-16: rgba(0, 0, 0, .16);
+  --black-alpha-20: rgba(0, 0, 0, .20);
+  --black-alpha-24: rgba(0, 0, 0, .24);
+  --black-alpha-32: rgba(38, 38, 38, .32);
+  --black-alpha-40: rgba(38, 38, 38, .40);
+  --black-alpha-48: rgba(38, 38, 38, .48);
+  --black-alpha-56: rgba(38, 38, 38, .56);
+  --black-alpha-64: rgba(38, 38, 38, .64);
+  --black-alpha-72: rgba(38, 38, 38, .72);
+  --black-alpha-88: rgba(38, 38, 38, .88);
+
+  /* ===== Radius ===== */
+  --r-sm:   4px;
+  --r-md:   8px;
+  --r-pill: 999px;
+
+  /* ===== Font · 关键:--font-mono 必须含 PuHuiTi 中文 fallback ===== */
+  /* Inter / JetBrains Mono 都不含 CJK 字形。
+     字体链按字符级 fallthrough,中文字符会找下一个候选 —— 必须包含 PuHuiTi。 */
+  --font-sans:  'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
+  --font-inter: 'Inter', system-ui, sans-serif;
+  --font-mono:  'JetBrains Mono', 'Geist Mono', ui-monospace, 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', monospace;
+
+  /* ===== Transition ===== */
+  --t-fast: 100ms ease;
+  --t-base: 200ms ease;
+  --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ===== Shadows ===== */
+  --shadow-cta:
+    inset 0 -4px 8px rgba(250, 93, 25, .20),
+    0 1px 1px rgba(250, 93, 25, .12),
+    0 2px 4px rgba(250, 93, 25, .10),
+    0 .5px .5px rgba(250, 93, 25, .16);
+  --shadow-cta-hover:
+    inset 0 -4px 8px rgba(250, 93, 25, .20),
+    0 1px 1px rgba(250, 93, 25, .16),
+    0 4px 8px rgba(250, 93, 25, .20),
+    0 .5px .5px rgba(250, 93, 25, .16);
+  --shadow-cta-active:
+    inset 0 -4px 8px rgba(250, 93, 25, .28),
+    0 1px 2px rgba(250, 93, 25, .16);
+  --shadow-floating: 0 4px 20px rgba(21, 20, 15, .06);
+}
+
+::selection { background: var(--heat-20); color: var(--heat); }
+
+html, body {
+  background: var(--background-base);
+  color: var(--accent-black);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.65;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+a { color: inherit; text-decoration: none; }
+button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
+input, textarea, select { font: inherit; color: inherit; outline: none; }
+img, svg, video { display: block; max-width: 100%; }
+
+.num, .tnum { font-variant-numeric: tabular-nums; }
+.mono { font-family: var(--font-mono); }
+.muted { color: var(--black-alpha-56); }
+.muted-2 { color: var(--black-alpha-48); }
+.spacer { flex: 1; }
+.hstack { display: flex; align-items: center; gap: 8px; }
+.vstack { display: flex; flex-direction: column; gap: 8px; }
+.divider { height: 1px; background: var(--border-faint); margin: 16px 0; }
+
+/* ─── App shell ─── */
+.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
+
+/* ─── Sidebar ─── */
+aside.sidebar {
+  padding: 22px 16px;
+  border-right: 1px solid var(--border-faint);
+  background: var(--background-base);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
+.flame { width: 22px; height: 22px; color: var(--heat); }
+.flame svg { width: 100%; height: 100%; }
+.brand .name { font-weight: 600; font-size: 18px; letter-spacing: -.012em; color: var(--accent-black); }
+
+/* sidebar search · Ctrl K Inter Bold 平铺 */
+.search-box {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  color: var(--black-alpha-48);
+  margin-bottom: 18px;
+  cursor: text;
+  transition: border-color var(--t-base);
+}
+.search-box:hover { border-color: var(--black-alpha-24); }
+.search-box:focus-within { border-color: var(--heat-40); box-shadow: inset 0 0 0 1px var(--heat-40); }
+.search-box svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--black-alpha-56); }
+.search-box input {
+  flex: 1; min-width: 0;
+  border: 0; background: transparent;
+  font-size: 13.5px; color: var(--accent-black);
+  padding: 0;
+}
+.search-box input::placeholder { color: var(--black-alpha-48); }
+.search-box .kbd {
+  margin-left: auto;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-family: var(--font-inter);
+  font-weight: 700;
+  font-size: 11px;
+  color: var(--black-alpha-48);
+  letter-spacing: .02em;
+}
+
+.nav-section {
+  font-size: 11px; color: var(--black-alpha-48);
+  padding: 16px 12px 8px;
+  letter-spacing: .04em;
+  font-weight: 500;
+  /* 中文标签用 sans 字体,不用 mono + uppercase */
+}
+nav { display: flex; flex-direction: column; gap: 2px; }
+nav a {
+  display: flex; align-items: center; gap: 11px;
+  padding: 9px 12px;
+  color: var(--black-alpha-56);
+  font-size: 13.5px; font-weight: 500;
+  border-radius: var(--r-md);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--t-base), color var(--t-base);
+}
+nav a:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+nav a.active { background: var(--heat-12); color: var(--heat); }
+nav a svg { width: 14px; height: 14px; opacity: .85; }
+nav a.active svg { opacity: 1; }
+nav a .pill-mini {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 9.5px; font-weight: 600;
+  padding: 2px 7px;
+  background: var(--surface);
+  color: var(--black-alpha-48);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-pill);
+  letter-spacing: .04em;
+}
+nav a.disabled { color: var(--black-alpha-32); cursor: not-allowed; }
+nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
+.aside-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
+.user {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--r-md);
+  cursor: pointer;
+  transition: background var(--t-base);
+}
+.user:hover { background: var(--black-alpha-4); }
+.user .av {
+  width: 26px; height: 26px;
+  border-radius: 6px;
+  background: var(--accent-black);
+  color: var(--accent-white);
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 600; font-size: 11px;
+}
+.user .em { font-size: 13px; color: var(--accent-black); }
+
+/* ─── Main + grid background ─── */
+main { position: relative; background: var(--background-base); min-width: 0; }
+.grid-bg {
+  position: absolute; inset: 0; pointer-events: none;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23c8c8c8' stroke-width='1' fill='none'><path d='M-5 0 L5 0 M0 -5 L0 5'/><path d='M235 0 L245 0 M240 -5 L240 5'/><path d='M-5 240 L5 240 M0 235 L0 245'/><path d='M235 240 L245 240 M240 235 L240 245'/></g></svg>"),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='60' cy='60' r='0.9' fill='%23d8d8d8'/></svg>"),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23ebebeb' stroke-width='1' fill='none' stroke-dasharray='1.5 4'><path d='M240 0 L240 240'/><path d='M0 240 L240 240'/></g></svg>");
+  background-size: 240px 240px, 60px 60px, 240px 240px;
+  mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
+  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
+}
+.scatter {
+  position: absolute;
+  font-family: var(--font-mono); font-size: 8.5px; line-height: 1.05;
+  color: var(--black-alpha-20); white-space: pre; pointer-events: none;
+  opacity: .85; letter-spacing: .04em;
+}
+.tag-corner {
+  position: absolute;
+  color: var(--black-alpha-48);
+  font-family: var(--font-mono);
+  font-size: 10.5px; letter-spacing: .06em;
+  pointer-events: none; opacity: .85; z-index: 1;
+}
+.sq-mark { position: absolute; width: 5px; height: 5px; background: var(--black-alpha-24); pointer-events: none; }
+
+/* ─── Topbar ─── */
+.topbar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 14px 28px;
+  border-bottom: 1px solid var(--border-faint);
+  background: var(--background-base);
+  position: sticky; top: 0; z-index: 50;
+}
+.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--black-alpha-48); }
+.crumbs .sep { color: var(--black-alpha-32); }
+.crumbs .here { color: var(--accent-black); font-weight: 500; }
+.crumbs a:hover { color: var(--accent-black); }
+.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+.balance-chip {
+  display: inline-flex; align-items: center; gap: 7px;
+  height: 36px;
+  padding: 0 14px 0 12px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-pill);
+  font-size: 13px;
+  color: var(--black-alpha-56);
+  cursor: pointer;
+  transition: background var(--t-base), border-color var(--t-base);
+}
+.balance-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); }
+.balance-chip strong { color: var(--accent-black); font-weight: 600; font-variant-numeric: tabular-nums; }
+.balance-chip svg { width: 13px; height: 13px; color: var(--heat); }
+.icon-btn {
+  width: 36px; height: 36px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  color: var(--black-alpha-56);
+  cursor: pointer;
+  position: relative;
+  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+}
+.icon-btn:hover { background: var(--black-alpha-4); color: var(--accent-black); border-color: var(--black-alpha-24); }
+.icon-btn svg { width: 15px; height: 15px; }
+.icon-btn .dot-noti {
+  position: absolute; top: 8px; right: 9px;
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--heat); border: 1.5px solid var(--surface);
+}
+.icon-btn .count-noti {
+  position: absolute; top: -4px; right: -4px;
+  min-width: 16px; height: 16px; padding: 0 4px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--accent-crimson); color: var(--accent-white);
+  border: 1.5px solid var(--surface);
+  border-radius: var(--r-pill);
+  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
+  letter-spacing: .02em; line-height: 1;
+  pointer-events: none;
+}
+
+/* ─── Topbar · 任务队列 chip ─── */
+.queue-chip {
+  display: inline-flex; align-items: center; gap: 7px;
+  height: 36px;
+  padding: 0 8px 0 12px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-pill);
+  font-size: 13px;
+  color: var(--accent-black);
+  cursor: pointer;
+  transition: background var(--t-base), border-color var(--t-base);
+}
+.queue-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); }
+.queue-chip svg { width: 14px; height: 14px; color: var(--black-alpha-56); }
+.queue-chip .count {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 20px; min-width: 20px; padding: 0 6px;
+  background: var(--heat-12); color: var(--heat);
+  border: 1px solid var(--heat-20);
+  border-radius: var(--r-pill);
+  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
+  letter-spacing: .02em;
+}
+
+/* ─── Topbar · 头像 ─── */
+.topbar-avatar {
+  width: 36px; height: 36px;
+  border-radius: var(--r-pill);
+  background: var(--accent-black);
+  color: var(--accent-white);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 13px; font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--border-faint);
+  transition: transform var(--t-fast), box-shadow var(--t-base);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.topbar-avatar:hover {
+  transform: scale(1.04);
+  box-shadow: 0 0 0 3px var(--heat-12);
+}
+.topbar-avatar img {
+  width: 100%; height: 100%; object-fit: cover;
+}
+
+/* ─── Content ─── */
+.content {
+  padding: 48px 28px 72px;
+  position: relative;
+  z-index: 1;
+  min-height: calc(100vh - 64px);
+}
+
+.content > .corner-mark { display: none; }
+.page-head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  margin-bottom: 36px; gap: 16px; flex-wrap: wrap;
+}
+.page-head h1 {
+  font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
+  color: var(--accent-black);
+}
+.page-head .sub {
+  font-size: 14px; color: var(--black-alpha-56);
+  margin-top: 10px;
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+}
+.page-head .sub .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; }
+.page-head .actions { display: flex; gap: 10px; align-items: center; }
+
+.section-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
+.section-h h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--accent-black); }
+.section-h .more {
+  font-family: var(--font-mono); font-size: 11.5px;
+  color: var(--black-alpha-48); letter-spacing: .04em;
+  cursor: pointer;
+  transition: color var(--t-base);
+}
+.section-h .more:hover { color: var(--heat); }
+
+/* ─── Buttons · 统一高度 36 / 8 px 圆角 / 真 1px border / hover bg 切换 ─── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: var(--r-md);
+  font-size: 13px; font-weight: 500;
+  background: var(--surface);
+  color: var(--accent-black);
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: inherit;
+  border: 1px solid var(--black-alpha-12);
+  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast);
+}
+.btn:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); }
+.btn:active { background: var(--black-alpha-7); transform: scale(.99); }
+.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--heat-40); }
+.btn:disabled, .btn.disabled {
+  color: var(--black-alpha-32);
+  background: var(--black-alpha-5);
+  border-color: var(--black-alpha-12);
+  cursor: not-allowed;
+  transform: none;
+}
+.btn:disabled:hover, .btn.disabled:hover {
+  background: var(--black-alpha-5);
+  border-color: var(--black-alpha-12);
+}
+.btn svg { width: 13px; height: 13px; }
+
+.btn-primary {
+  background: var(--heat);
+  color: var(--accent-white);
+  border-color: var(--heat);
+  font-weight: 600;
+  /* 继承 .btn 的 height: 36px / padding: 0 16px */
+  box-shadow: var(--shadow-cta);
+}
+.btn-primary:hover {
+  background: var(--heat);
+  border-color: var(--heat);
+  box-shadow: var(--shadow-cta-hover);
+}
+.btn-primary:active {
+  background: var(--heat);
+  transform: scale(.995);
+  box-shadow: var(--shadow-cta-active);
+}
+.btn-primary:disabled, .btn-primary.disabled {
+  background: var(--heat-40);
+  color: var(--accent-white);
+  border-color: var(--heat-40);
+  box-shadow: none;
+}
+
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--black-alpha-56);
+}
+.btn-ghost:hover { background: var(--black-alpha-4); border-color: transparent; color: var(--accent-black); }
+.btn-ghost:active { background: var(--black-alpha-7); }
+
+.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: var(--r-md); }
+.btn-lg { height: 40px; padding: 0 20px; font-size: 13.5px; }
+
+/* ─── Pills ─── */
+.pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+  font-size: 11.5px; font-weight: 500;
+  border: 1px solid var(--border-faint);
+  background: var(--surface);
+  color: var(--black-alpha-56);
+  white-space: nowrap;
+}
+.pill.info { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); }
+.pill.ok { background: var(--forest-bg); color: var(--accent-forest); border-color: var(--forest-bd); }
+.pill.err { background: var(--crimson-bg); color: var(--accent-crimson); border-color: var(--crimson-bd); }
+.pill.neutral { background: var(--black-alpha-4); color: var(--black-alpha-56); border-color: var(--border-faint); }
+.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+/* ─── Cards / containers · V2.1 统一 8 px 圆角 ─── */
+.card-hard {
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  position: relative;
+}
+/* V2.1 spec §5.3 · 容器四角准星 · SVG 圆弧内凹(22×21 viewBox) */
+.card-hard.with-corners::before, .card-hard.with-corners::after,
+.with-corners .corner-tr, .with-corners .corner-bl {
+  content: ''; position: absolute;
+  width: 14px; height: 14px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center;
+  background-size: contain;
+  pointer-events: none;
+}
+.card-hard.with-corners::before { top: -7px; left: -7px; }
+.card-hard.with-corners::after { bottom: -7px; right: -7px; }
+.with-corners .corner-tr { top: -7px; right: -7px; }
+.with-corners .corner-bl { bottom: -7px; left: -7px; }
+
+/* ─── Stats (KPI bar) ─── */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  position: relative;
+  margin-bottom: 36px;
+  overflow: hidden;
+}
+.stat {
+  padding: 24px 28px;
+  border-right: 1px solid var(--border-faint);
+  position: relative;
+  cursor: pointer;
+  transition: background var(--t-base);
+}
+.stat:hover { background: var(--black-alpha-4); }
+.stat:last-child { border-right: 0; }
+.stat .lbl {
+  font-size: 12.5px; color: var(--black-alpha-48);
+  font-weight: 500; display: flex; align-items: center; gap: 8px;
+}
+.stat .lbl .badge {
+  font-family: var(--font-mono);
+  font-size: 10px; color: var(--black-alpha-48);
+  background: var(--black-alpha-4);
+  padding: 1px 7px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border-faint);
+  letter-spacing: .04em;
+}
+.stat .v {
+  font-size: 32px; font-weight: 600; letter-spacing: -.02em;
+  line-height: 1.1; margin-top: 14px;
+  font-variant-numeric: tabular-nums;
+  color: var(--accent-black);
+}
+.stat .v small { font-size: 15px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; }
+.stat .delta {
+  font-family: var(--font-mono); font-size: 11px;
+  margin-top: 10px; color: var(--black-alpha-48); letter-spacing: .02em;
+}
+.stat .delta.up { color: var(--accent-forest); }
+.stat .bar { height: 5px; background: var(--black-alpha-7); border-radius: 3px; margin-top: 14px; overflow: hidden; }
+.stat .bar > span { display: block; height: 100%; background: var(--heat); border-radius: 3px; }
+.stat .sub {
+  font-family: var(--font-mono); font-size: 10.5px;
+  color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em;
+}
+
+/* ─── Form fields ─── */
+.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
+.field-label { font-size: 13px; font-weight: 500; color: var(--accent-black); }
+.field-label .req { color: var(--accent-crimson); margin-left: 2px; }
+.field-hint { font-size: 12px; color: var(--black-alpha-48); }
+.input, .textarea, .select {
+  height: 36px;
+  padding: 0 14px;
+  background: var(--surface);
+  border: 1px solid var(--black-alpha-12);
+  border-radius: var(--r-md);
+  font-size: 13.5px;
+  width: 100%;
+  font-family: inherit;
+  color: var(--accent-black);
+  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
+}
+.input:hover, .textarea:hover, .select:hover { border-color: var(--black-alpha-24); }
+.input:focus, .textarea:focus, .select:focus {
+  border-color: var(--heat-40);
+  box-shadow: inset 0 0 0 1px var(--heat-40);
+}
+.input::placeholder, .textarea::placeholder { color: var(--black-alpha-48); }
+.input:disabled, .textarea:disabled, .select:disabled {
+  background: var(--black-alpha-5);
+  color: var(--black-alpha-32);
+  cursor: not-allowed;
+}
+.textarea { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
+.select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%237a7a7a' stroke-width='1.4'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+/* ─── Tabs ─── */
+.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-faint); margin-bottom: 20px; }
+.tab {
+  padding: 10px 14px; font-size: 13px;
+  color: var(--black-alpha-56);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  font-weight: 500; user-select: none;
+  transition: color var(--t-base), background var(--t-base);
+  border-radius: var(--r-md) var(--r-md) 0 0;
+}
+.tab:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+.tab.active { color: var(--accent-black); border-bottom-color: var(--heat); }
+.tab .count {
+  font-family: var(--font-mono); font-size: 10.5px;
+  color: var(--black-alpha-48); margin-left: 6px;
+  padding: 1px 7px;
+  background: var(--black-alpha-4);
+  border-radius: var(--r-sm); letter-spacing: .04em;
+}
+.tab.active .count { background: var(--heat-12); color: var(--heat); }
+
+/* ─── Filter chips · 统一高度 36 px 与 .btn / .input 对齐 ─── */
+.chip {
+  height: 36px; padding: 0 14px;
+  border: 1px solid var(--border-faint);
+  background: var(--surface);
+  border-radius: var(--r-md);
+  font-size: 13px;
+  color: var(--black-alpha-56);
+  display: inline-flex; align-items: center; gap: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+}
+.chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); color: var(--accent-black); }
+.chip.active { border-color: var(--heat-40); color: var(--heat); background: var(--heat-12); }
+.chip svg { width: 12px; height: 12px; }
+
+/* ─── Toolbar ─── */
+.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
+.toolbar .search-inline {
+  position: relative; flex: 1; max-width: 360px;
+}
+.toolbar .search-inline svg {
+  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+  color: var(--black-alpha-56); width: 14px; height: 14px;
+  z-index: 2; pointer-events: none;
+}
+.toolbar .search-inline input { padding-left: 36px; }
+
+/* ─── Chip dropdown · 共享组件 ─── */
+.chip-wrap { position: relative; display: inline-flex; }
+.chip-wrap .chip svg.caret { transition: transform .15s; }
+.chip-wrap.open .chip svg.caret { transform: rotate(180deg); }
+.chip-menu {
+  position: absolute; top: calc(100% + 4px); left: 0;
+  min-width: 200px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  box-shadow: 0 8px 24px rgba(0,0,0,.08);
+  padding: 4px;
+  z-index: 50;
+  display: none;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.chip-wrap.open .chip-menu { display: block; }
+.chip-menu.align-right { left: auto; right: 0; }
+.chip-menu .mi {
+  height: 32px; padding: 0 10px;
+  font-size: 13px; color: var(--accent-black);
+  display: flex; align-items: center; gap: 8px;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.chip-menu .mi:hover { background: var(--black-alpha-4); }
+.chip-menu .mi.selected { color: var(--heat); background: var(--heat-12); }
+.chip-menu .mi .mi-check { width: 13px; height: 13px; color: var(--heat); opacity: 0; flex-shrink: 0; }
+.chip-menu .mi.selected .mi-check { opacity: 1; }
+.chip-menu .mi-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; }
+
+/* ─── Clear-filters btn · 共享组件 ─── */
+.clear-filters {
+  height: 36px; padding: 0 12px;
+  background: transparent; border: 0; border-radius: var(--r-md);
+  color: var(--black-alpha-56); font-size: 13px; font-family: inherit;
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  transition: background var(--t-base), color var(--t-base);
+}
+.clear-filters:hover { background: var(--black-alpha-4); color: var(--heat); }
+.clear-filters svg { width: 13px; height: 13px; }
+.clear-filters[hidden] { display: none; }
+
+/* ─── Result count · 共享组件 ─── */
+.result-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--black-alpha-48);
+  margin-bottom: 14px;
+  letter-spacing: .04em;
+}
+.result-meta .count { color: var(--heat); font-weight: 600; }
+
+/* ─── 新建商品 Modal (Upload Form · 居中弹窗) ─── */
+.new-product-modal {
+  max-width: 1080px !important;
+  width: 94%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+/* 左图右文 双栏 · 等宽 */
+.np-body-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  align-items: start;
+}
+.np-left, .np-right { min-width: 0; }
+@media (max-width: 880px) {
+  .np-body-grid { grid-template-columns: 1fr; gap: 20px; }
+}
+.np-header {
+  padding: 18px 24px 16px;
+  border-bottom: 1px solid var(--border-faint);
+  display: flex; align-items: center; gap: 14px;
+  flex-shrink: 0;
+}
+.np-header .np-title-ic {
+  width: 36px; height: 36px;
+  background: var(--heat-12);
+  color: var(--heat);
+  border-radius: var(--r-md);
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.np-header .np-title-ic svg { width: 17px; height: 17px; }
+.np-header h2 {
+  font-size: 16px; font-weight: 600; color: var(--accent-black);
+  margin: 0;
+}
+.np-header .np-mode-pill {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--heat);
+  background: var(--heat-12);
+  border: 1px solid var(--heat-20);
+  border-radius: var(--r-sm);
+  padding: 2px 8px;
+  letter-spacing: .04em;
+  font-weight: 500;
+}
+.np-header .np-x {
+  margin-left: auto;
+  width: 32px; height: 32px;
+  display: grid; place-items: center;
+  background: transparent; border: 0;
+  border-radius: var(--r-md);
+  color: var(--black-alpha-56);
+  cursor: pointer;
+  transition: background var(--t-base), color var(--t-base);
+}
+.np-header .np-x:hover { background: var(--crimson-bg); color: var(--accent-crimson); }
+.np-header .np-x svg { width: 14px; height: 14px; }
+
+.np-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 22px 24px;
+}
+
+/* AI CTA · 独立全宽 CTA 区域 · 放在"商品图册"上方 */
+.np-ai-cta {
+  display: flex; align-items: center; gap: 10px;
+  width: 100%;
+  height: 40px;
+  padding: 0 14px;
+  margin-bottom: 14px;
+  background: transparent;
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  font-size: 13px;
+  color: var(--black-alpha-72);
+  cursor: pointer;
+  text-decoration: none;
+  font-family: inherit;
+  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+}
+.np-ai-cta:hover { background: var(--heat-8); border-color: var(--heat); color: var(--accent-black); }
+.np-ai-cta .ai-icon { color: var(--heat); display: grid; place-items: center; flex-shrink: 0; }
+.np-ai-cta .ai-icon svg { width: 14px; height: 14px; }
+.np-ai-cta .ai-label { font-weight: 500; color: var(--accent-black); flex: 1; }
+.np-ai-cta .ai-arrow { color: var(--black-alpha-48); transition: transform var(--t-fast), color var(--t-base); flex-shrink: 0; display: grid; place-items: center; }
+.np-ai-cta .ai-arrow svg { width: 14px; height: 14px; }
+.np-ai-cta:hover .ai-arrow { color: var(--heat); transform: translateX(2px); }
+/* 主推态: 用户还没上传图 → 醒目橙色描边 */
+.np-ai-cta.primary { border-color: var(--heat-40); background: var(--heat-8); }
+.np-ai-cta.primary .ai-label { color: var(--heat); font-weight: 600; }
+.np-ai-cta.primary .ai-arrow { color: var(--heat); }
+.np-ai-cta.primary:hover { background: var(--heat-12); border-color: var(--heat); }
+
+/* Footer (sticky inside modal) */
+.np-footer {
+  border-top: 1px solid var(--border-faint);
+  padding: 14px 24px;
+  display: flex; align-items: center; gap: 12px;
+  flex-shrink: 0;
+  background: var(--background-lighter);
+}
+.np-footer .np-meta {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--black-alpha-48);
+  letter-spacing: .02em;
+  margin-right: auto;
+}
+.np-footer .np-meta .accent { color: var(--heat); font-weight: 600; }
+
+/* Upload zone · 弹窗内尺寸略缩 */
+.np-body .upload-zone {
+  border: 1.5px dashed var(--black-alpha-24);
+  border-radius: var(--r-md);
+  padding: 22px 20px;
+  text-align: center;
+  background: var(--background-lighter);
+  color: var(--black-alpha-56);
+  font-size: 13px;
+  cursor: pointer;
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+}
+.np-body .upload-zone:hover { border-color: var(--heat); background: var(--heat-8); color: var(--heat); }
+.np-body .upload-zone:hover .uz-ic { background: var(--heat); color: #fff; border-color: var(--heat); }
+.np-body .upload-zone strong { color: var(--heat); font-weight: 600; }
+.np-body .upload-zone .uz-ic {
+  width: 40px; height: 40px;
+  border-radius: var(--r-md);
+  background: var(--surface);
+  color: var(--heat);
+  border: 1px solid var(--heat-20);
+  display: grid; place-items: center;
+  margin-bottom: 8px;
+  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+}
+.np-body .upload-zone .uz-ic svg { width: 18px; height: 18px; }
+.np-body .upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+/* 上传子区域标题 (图片案例 / 我的上传) */
+.np-section-h {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 500;
+  color: var(--accent-black);
+  margin: 12px 0 4px;
+}
+.np-section-h .check-ic {
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: var(--accent-forest);
+  color: #fff;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.np-section-h .check-ic svg { width: 8px; height: 8px; }
+.np-section-h .counter {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--black-alpha-48);
+  letter-spacing: .04em;
+  font-weight: 400;
+}
+.np-section-h .counter .num { color: var(--heat); font-weight: 600; }
+.np-section-sub {
+  font-size: 11.5px;
+  color: var(--black-alpha-56);
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+/* 图片案例 grid (静态展示) */
+.np-examples {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 5px;
+}
+.np-examples .ex {
+  aspect-ratio: 1;
+  border-radius: var(--r-sm);
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  position: relative;
+  display: grid;
+  place-items: center;
+  font-size: 9.5px;
+  color: var(--black-alpha-48);
+  font-family: var(--font-mono);
+  letter-spacing: .04em;
+  text-align: center;
+  padding: 4px;
+  overflow: hidden;
+}
+.np-examples .ex-badge {
+  position: absolute;
+  bottom: 3px; right: 3px;
+  width: 15px; height: 15px;
+  background: var(--accent-forest);
+  color: #fff;
+  border-radius: 50%;
+  display: grid; place-items: center;
+  z-index: 2;
+}
+.np-examples .ex-badge svg { width: 9px; height: 9px; }
+
+/* 我的上传 grid · 始终 5 列, 含填充和空插槽 */
+.np-body .upload-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 5px;
+}
+.up-slot-empty {
+  aspect-ratio: 1;
+  border-radius: var(--r-sm);
+  background: var(--background-lighter);
+  border: 1px dashed var(--border-faint);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  font-size: 9.5px;
+  color: var(--black-alpha-32);
+  font-family: var(--font-mono);
+  letter-spacing: .04em;
+  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+}
+.up-slot-empty:hover {
+  border-color: var(--heat);
+  background: var(--heat-8);
+  color: var(--heat);
+}
+
+/* dropzone 满 5 张时禁用态 */
+.np-body .upload-zone.full {
+  cursor: not-allowed;
+  opacity: .55;
+  pointer-events: none;
+}
+.np-body .upload-zone.full .uz-ic { background: var(--background-lighter); color: var(--black-alpha-32); border-color: var(--border-faint); }
+.up-thumb {
+  aspect-ratio: 1;
+  border-radius: var(--r-md);
+  overflow: hidden;
+  position: relative;
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  cursor: zoom-in;
+  transition: transform var(--t-fast), border-color var(--t-base);
+}
+.up-thumb:hover { transform: scale(1.02); border-color: var(--heat); }
+.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.up-thumb .slot-x {
+  position: absolute;
+  top: 3px; right: 3px;
+  width: 18px; height: 18px;
+  background: rgba(0, 0, 0, .7);
+  color: #fff;
+  border-radius: 50%;
+  display: none;
+  place-items: center;
+  cursor: pointer;
+  z-index: 3;
+  border: 0;
+  padding: 0;
+  transition: background var(--t-base), transform var(--t-fast);
+}
+.up-thumb:hover .slot-x { display: grid; }
+.up-thumb .slot-x:hover { background: var(--accent-crimson); transform: scale(1.1); }
+.up-thumb .slot-x svg { width: 9px; height: 9px; }
+/* 5 列尺寸太小,文件名 overlay 仅在 lightbox 显示,缩略图上隐藏 */
+.up-thumb .slot-name { display: none; }
+
+/* Lightbox: 点击缩略图全屏预览 */
+.np-lightbox {
+  position: fixed; inset: 0;
+  background: rgba(0, 0, 0, .9);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  cursor: zoom-out;
+  opacity: 0;
+  transition: opacity .2s;
+}
+.np-lightbox.show { display: flex; opacity: 1; }
+.np-lightbox img {
+  max-width: 90vw;
+  max-height: 88vh;
+  border-radius: var(--r-md);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
+}
+.np-lightbox .lb-x {
+  position: fixed;
+  top: 24px; right: 24px;
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, .12);
+  color: #fff;
+  border: 0;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: background var(--t-base);
+}
+.np-lightbox .lb-x:hover { background: rgba(255, 255, 255, .24); }
+.np-lightbox .lb-x svg { width: 18px; height: 18px; }
+.np-lightbox .lb-name {
+  position: fixed;
+  bottom: 24px; left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: rgba(255, 255, 255, .7);
+  letter-spacing: .04em;
+}
+
+/* Bullet list · 弹窗内 (复用样式) */
+.np-body .bullet-list { list-style: none; padding: 0; }
+.np-body .bullet-list li {
+  display: flex; gap: 10px; align-items: center;
+  padding: 10px 12px;
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: var(--accent-black);
+  transition: border-color var(--t-base), background var(--t-base);
+}
+.np-body .bullet-list li.bl-item:hover { border-color: var(--black-alpha-24); }
+.np-body .bullet-list li.bl-add { background: var(--surface); border-style: dashed; }
+.np-body .bullet-list li.bl-add:focus-within { border-color: var(--heat-40); }
+.np-body .bullet-list .num {
+  width: 20px; height: 20px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  font-size: 11px; color: var(--black-alpha-56);
+  display: grid; place-items: center;
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+.np-body .bullet-list li.bl-add .num { background: transparent; color: var(--heat); border-color: var(--heat-40); }
+.np-body .bullet-list .bl-text { flex: 1; min-width: 0; }
+.np-body .bullet-list .bl-input {
+  flex: 1; min-width: 0;
+  height: 24px; border: 0; padding: 0 4px;
+  background: transparent; font-size: 13px;
+  color: var(--accent-black); font-family: inherit;
+  outline: none;
+}
+.np-body .bullet-list .bl-input::placeholder { color: var(--black-alpha-48); }
+.np-body .bullet-list .bl-x {
+  width: 24px; height: 24px;
+  display: grid; place-items: center;
+  color: var(--black-alpha-32);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
+}
+.np-body .bullet-list li.bl-item:hover .bl-x { opacity: 1; }
+.np-body .bullet-list .bl-x:hover { background: var(--crimson-bg); color: var(--accent-crimson); }
+.np-body .bullet-list .bl-x svg { width: 11px; height: 11px; }
+
+/* ─── Empty state · 共享组件 ─── */
+.empty-state {
+  background: var(--surface);
+  border: 1px dashed var(--border-faint);
+  border-radius: var(--r-md);
+  padding: 80px 40px;
+  text-align: center;
+  color: var(--black-alpha-56);
+  display: none;
+}
+.empty-state.show { display: block; }
+.empty-state .ic-empty {
+  width: 48px; height: 48px;
+  margin: 0 auto 14px;
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  display: grid; place-items: center;
+  color: var(--black-alpha-48);
+}
+.empty-state h3 { font-size: 14px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; }
+.empty-state p { font-size: 12.5px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
+
+/* ─── Progress (5 段流水线 · V2.1 语义色 + 脉动) ─── */
+.prog { display: flex; gap: 3px; }
+.prog span {
+  width: 18px; height: 5px; border-radius: 2px;
+  background: var(--black-alpha-8);
+  transition: background var(--t-base);
+}
+.prog span.done { background: var(--accent-forest); }
+.prog span.cur  {
+  background: var(--heat);
+  animation: prog-pulse 1.4s ease-in-out infinite;
+}
+.prog span.fail { background: var(--accent-crimson); }
+@keyframes prog-pulse {
+  0%, 100% { opacity: 1;    transform: scaleY(1); }
+  50%      { opacity: .55;  transform: scaleY(.7); }
+}
+
+/* ─── Table ─── */
+table.t {
+  width: 100%; border-collapse: collapse;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  overflow: hidden;
+}
+table.t thead th {
+  text-align: left;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--black-alpha-48);
+  padding: 14px 16px;
+  background: var(--black-alpha-3);
+  border-bottom: 1px solid var(--border-faint);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  font-family: var(--font-mono);
+}
+table.t tbody td {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-faint);
+  font-size: 13px;
+  vertical-align: middle;
+  color: var(--accent-black);
+}
+table.t tbody tr:last-child td { border-bottom: 0; }
+table.t tbody tr { cursor: pointer; transition: background var(--t-base); }
+table.t tbody tr:hover { background: var(--black-alpha-4); }
+
+/* ─── Placeholder thumb ─── */
+.placeholder {
+  background:
+    repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 12px),
+    var(--black-alpha-4);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  display: grid; place-items: center;
+  color: var(--black-alpha-48);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: .04em;
+  user-select: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  padding: 6px;
+}
+.placeholder .ph-frame {
+  background: rgba(255, 255, 255, .92);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  padding: 3px 8px;
+  font-size: 10.5px;
+  color: var(--black-alpha-56);
+  font-weight: 500;
+}
+
+/* ─── Toast ─── */
+.toast {
+  position: fixed; bottom: 24px; right: 24px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  padding: 14px 18px;
+  display: flex; align-items: center; gap: 12px;
+  box-shadow: var(--shadow-floating);
+  transform: translateX(420px);
+  transition: transform var(--t-slow);
+  z-index: 1000;
+  min-width: 260px;
+}
+.toast.show { transform: translateX(0); }
+.toast .ic-t {
+  width: 26px; height: 26px;
+  background: var(--heat-12);
+  color: var(--heat);
+  border-radius: var(--r-md);
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.toast .ic-t svg { width: 13px; height: 13px; }
+.toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; }
+.toast .txt .mono {
+  font-family: var(--font-mono); font-size: 11px;
+  color: var(--black-alpha-48); display: block; margin-top: 2px;
+  letter-spacing: .04em; font-weight: 400;
+}
+
+/* ─── Modal ─── */
+.modal-bg {
+  position: fixed; inset: 0;
+  background: rgba(21, 20, 15, .42);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  display: none; align-items: center; justify-content: center;
+  z-index: 999;
+  opacity: 0;
+  transition: opacity .2s;
+}
+.modal-bg.show { display: flex; opacity: 1; }
+.modal {
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  max-width: 480px; width: 90%;
+  position: relative;
+  transform: scale(.96);
+  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.modal-bg.show .modal { transform: scale(1); }
+.modal::before, .modal::after {
+  content: '';
+  position: absolute;
+  width: 14px; height: 14px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center;
+  background-size: contain;
+  pointer-events: none;
+  color: var(--black-alpha-48);
+  font-family: var(--font-mono);
+  font-size: 13px; line-height: 1;
+}
+.modal::before { top: -7px; left: -7px; }
+.modal::after { bottom: -7px; right: -7px; }
+.modal .corner-tr, .modal .corner-bl {
+  position: absolute;
+  width: 14px; height: 14px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center;
+  background-size: contain;
+  pointer-events: none;
+}
+.modal .corner-tr { top: -7px; right: -7px; }
+.modal .corner-bl { bottom: -7px; left: -7px; }
+.modal-h {
+  padding: 22px 24px 16px;
+  border-bottom: 1px solid var(--border-faint);
+  display: flex; align-items: center; gap: 14px;
+  flex-shrink: 0;
+}
+.modal-h .ic-m {
+  width: 36px; height: 36px;
+  background: var(--heat-12);
+  color: var(--heat);
+  border-radius: var(--r-md);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.modal-h .ic-m svg { width: 17px; height: 17px; }
+.modal-h .ti { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--accent-black); }
+.modal-h .ti span {
+  display: block; font-family: var(--font-mono); font-size: 11px;
+  color: var(--black-alpha-48); font-weight: 400; margin-top: 4px; letter-spacing: .04em;
+}
+.modal-b {
+  padding: 20px 24px;
+  font-size: 13.5px;
+  color: var(--black-alpha-72);
+  line-height: 1.75;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.modal-b .mono-acc {
+  font-family: var(--font-mono); color: var(--heat);
+  background: var(--heat-12); padding: 2px 6px;
+  font-size: 11.5px; border-radius: var(--r-sm);
+}
+.modal-f {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-faint);
+  display: flex; justify-content: flex-end; gap: 10px;
+  flex-shrink: 0;
+}
+
+/* ─── 统一卡片删除按钮 ────────────────────────────────────────
+   矩形 + 删除 icon, hover 卡片才显示
+   用法: 卡片内放 <button class="card-del-btn">[icon]</button>
+   外层卡片需 position: relative
+   触发: .product-card / .asset-card / .project-card / .task-card / .model-card hover
+   --------------------------------------------------------- */
+.card-del-btn {
+  position: absolute;
+  top: 8px; right: 8px;
+  width: 32px; height: 32px;
+  background: rgba(255,255,255,.95);
+  border: 1px solid var(--black-alpha-12);
+  border-radius: var(--r-md);
+  display: grid; place-items: center;
+  color: var(--black-alpha-56);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity .18s, color .18s, border-color .18s, background .18s;
+  box-shadow: 0 2px 6px rgba(0,0,0,.06);
+  z-index: 5;
+  padding: 0;
+  font-family: inherit;
+}
+.card-del-btn svg { width: 14px; height: 14px; }
+.product-card:hover .card-del-btn,
+.asset-card:hover .card-del-btn,
+.project-card:hover .card-del-btn,
+.task-card:hover .card-del-btn,
+.model-card:hover .card-del-btn {
+  opacity: 1;
+}
+.card-del-btn:hover {
+  color: var(--accent-crimson);
+  border-color: var(--accent-crimson);
+  background: var(--surface);
+}
+.card-del-btn:active { transform: scale(.95); }
+
+/* ─── Drawer ─── */
+.drawer-bg {
+  position: fixed; inset: 0;
+  background: rgba(21, 20, 15, .32);
+  display: none;
+  z-index: 90;
+}
+.drawer-bg.show { display: block; }
+.drawer {
+  position: fixed; right: 0; top: 0; bottom: 0;
+  width: 540px; max-width: 100vw;
+  background: var(--surface);
+  border-left: 1px solid var(--border-faint);
+  z-index: 95;
+  transform: translateX(100%);
+  transition: transform .25s cubic-bezier(.32, .72, 0, 1);
+  display: flex; flex-direction: column;
+  box-shadow: -4px 0 24px rgba(21, 20, 15, .04);
+}
+.drawer.show { transform: translateX(0); }
+.drawer-h {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-faint);
+  display: flex; align-items: center;
+}
+.drawer-h h3 { font-size: 16px; font-weight: 600; color: var(--accent-black); }
+.drawer-h .x {
+  margin-left: auto; width: 32px; height: 32px;
+  border-radius: var(--r-md);
+  display: grid; place-items: center;
+  color: var(--black-alpha-56); cursor: pointer;
+  transition: background var(--t-base);
+}
+.drawer-h .x:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+.drawer-b { padding: 24px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
+.drawer-f {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-faint);
+  display: flex; gap: 10px; justify-content: flex-end;
+  background: var(--background-lighter);
+}
+
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--black-alpha-12); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--black-alpha-24); }
+
+/* ─── Responsive ─── */
+@media (max-width: 1100px) {
+  .app { grid-template-columns: 1fr; }
+  aside.sidebar { display: none; }
+  .stats { grid-template-columns: repeat(2, 1fr); }
+  .stat:nth-child(2) { border-right: 0; }
+  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--border-faint); }
+  .content { padding: 28px 24px 48px; }
+}
+
+/* ─── Spinner ─── */
+.spinner {
+  width: 18px; height: 18px;
+  border: 2px solid var(--border-faint);
+  border-top-color: var(--heat);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
diff --git a/v2/assets/shell.js b/v2/assets/shell.js
new file mode 100644
index 0000000..d388609
--- /dev/null
+++ b/v2/assets/shell.js
@@ -0,0 +1,602 @@
+/* ============================================================
+   流·Studio · Shell renderer V2.1
+   渲染 sidebar / topbar / 网格背景装饰 / Toast / Modal helpers
+   每个页面调用 Shell.render({ active, crumbs, balance, topActions })
+
+   V2.1 变化:
+   - sidebar 搜索 ⌘K → "Ctrl K" Inter Bold 平铺(无 kbd 边框)
+   ============================================================ */
+
+const NAV = [
+  {
+    id: 'dashboard', label: '工作台', href: 'index.html',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg>'
+  },
+  {
+    id: 'products', label: '商品库', href: 'products.html', badge: '7',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg>'
+  },
+  {
+    id: 'projects', label: '视频项目', href: 'projects.html', badge: '8',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg>'
+  },
+  {
+    id: 'asset-factory', label: '图片生成', href: 'asset-factory.html',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z"/><path d="M19 16l.85 2.3L22 19l-2.15.7L19 22l-.85-2.3L16 19l2.15-.7L19 16z"/></svg>'
+  },
+  {
+    id: 'library', label: '资产库', href: 'library.html',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="6" height="16"/><rect x="11" y="4" width="4" height="16"/><rect x="17" y="6" width="4" height="14"/></svg>'
+  },
+  {
+    id: 'team', label: '团队', href: 'team.html', badge: '5',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5M14 19c.5-2.4 2.4-4 5-4 .8 0 1.5.2 2 .5"/></svg>'
+  },
+  {
+    id: 'account', label: '账户', href: 'account.html',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M16 14h2"/></svg>'
+  },
+  {
+    id: 'settings', label: '设置', href: 'settings.html',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8 2 2 0 0 1-2.8 2.8 1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5 2 2 0 0 1-4 0 1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3 2 2 0 0 1-2.8-2.8 1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1 2 2 0 0 1 0-4 1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8 2 2 0 0 1 2.8-2.8 1.7 1.7 0 0 0 1.8.3 1.7 1.7 0 0 0 1-1.5 2 2 0 0 1 4 0 1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3 2 2 0 0 1 2.8 2.8 1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1 2 2 0 0 1 0 4 1.7 1.7 0 0 0-1.5 1.1Z"/></svg>'
+  }
+];
+
+window.Shell = {
+  render({ active = '', crumbs = [], balance = '¥327.40', topActions = '' } = {}) {
+    const navHtml = NAV.map(n => `
+      <a href="${n.href}" class="${active === n.id ? 'active' : ''}">
+        ${n.icon}
+        <span>${n.label}</span>
+        ${n.badge ? `<span class="pill-mini">${n.badge}</span>` : ''}
+      </a>
+    `).join('');
+
+    const sidebar = `
+      <aside class="sidebar">
+        <div class="brand">
+          <div class="flame"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c1 3 4 5 4 9a4 4 0 0 1-4 4 4 4 0 0 1-4-4 5 5 0 0 1 1.5-3.5C10.5 6 11.5 4 12 2zm-1 13c0 2 1 3 1 5 1-1 3-2 3-5 0-1.5-1-2-2-3-1 1-2 2-2 3z"/></svg></div>
+          <div><div class="name">流·Studio</div></div>
+        </div>
+        <div class="search-box" onclick="document.getElementById('global-search').focus()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          <input id="global-search" placeholder="搜索"/>
+          <span class="kbd">Ctrl K</span>
+        </div>
+        <div class="nav-section">主要</div>
+        <nav>${navHtml}</nav>
+        <div class="aside-foot">
+          <div class="user" onclick="Shell.toast('账户菜单', 'li@shop.com')">
+            <div class="av">李</div>
+            <div class="em">小李的店</div>
+          </div>
+        </div>
+      </aside>
+    `;
+
+    const crumbHtml = crumbs.length ? `
+      <div class="crumbs">
+        ${crumbs.map((c, i) => {
+          const last = i === crumbs.length - 1;
+          const sep = i > 0 ? '<span class="sep">/</span>' : '';
+          if (last) return `${sep}<span class="here">${c.label}</span>`;
+          return `${sep}<a href="${c.href || '#'}">${c.label}</a>`;
+        }).join('')}
+      </div>
+    ` : '';
+
+    const topbar = `
+      <header class="topbar">
+        ${crumbHtml}
+        <div class="right">
+          <span class="balance-chip" onclick="location.href='account.html'">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg>
+            余额 <strong>${balance}</strong>
+          </span>
+          <button class="queue-chip" onclick="Shell.toast('任务队列', '3 个进行中')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+            任务队列
+            <span class="count">3</span>
+          </button>
+          <button class="icon-btn" onclick="Shell.toast('通知中心', '12 条未读')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
+            <span class="count-noti">12</span>
+          </button>
+          <div class="topbar-avatar" onclick="Shell.toast('账户菜单', '李 · li@shop.com')" title="账户">
+            <span>李</span>
+          </div>
+          ${topActions}
+        </div>
+      </header>
+    `;
+
+    const decorations = `
+      <div class="grid-bg"></div>
+      <span class="sq-mark" style="top:238px;left:478px"></span>
+      <span class="sq-mark" style="top:478px;left:1198px"></span>
+      <span class="sq-mark" style="bottom:300px;left:238px"></span>
+      <span class="sq-mark" style="top:718px;right:240px"></span>
+    `;
+
+    const toastHtml = `
+      <div class="toast" id="__toast">
+        <div class="ic-t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
+        <div class="txt" id="__toast-txt">操作成功<span class="mono">[ 200 OK ]</span></div>
+      </div>
+    `;
+
+    // ─── 全局 Lightbox · 任意页面可用 Shell._openLightbox(src, name) ──
+    const lightboxHtml = `
+      <div class="np-lightbox" id="np-lightbox" onclick="Shell._closeLightbox()">
+        <button class="lb-x" type="button" onclick="event.stopPropagation();Shell._closeLightbox()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+        <img id="np-lightbox-img" alt="">
+        <span class="lb-name" id="np-lightbox-name"></span>
+      </div>
+    `;
+
+    // [DEPRECATED · 弹窗已废弃,创建商品直接进 product-create.html]
+    const _deprecatedModalHtml = `
+      <div class="modal-bg" id="new-product-bg" onclick="if(event.target===this)Shell.closeModal('new-product-bg')">
+        <div class="modal new-product-modal">
+          <span class="corner-tr"></span>
+          <span class="corner-bl"></span>
+
+          <div class="np-header">
+            <div class="np-title-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg>
+            </div>
+            <h2>新建商品</h2>
+            <span class="np-mode-pill">[ UPLOAD MODE ]</span>
+            <button class="np-x" type="button" onclick="Shell.closeModal('new-product-bg')">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+            </button>
+          </div>
+
+          <div class="np-body">
+            <div class="np-body-grid">
+
+              <!-- 左栏: 图片 -->
+              <div class="np-left">
+                <!-- AI CTA: 独立全宽区域,放在 商品图册 上方 -->
+                <a class="np-ai-cta primary" id="np-ai-cta" title="不上传也能用 AI 生成图">
+                  <span class="ai-icon">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2zM19 14l.9 2.7 2.6.8-2.6.8L19 21l-.9-2.7-2.6-.8 2.6-.8L19 14zM5 14l.7 2.1L7.8 17l-2.1.7L5 20l-.7-2.3-2.1-.7 2.1-.7L5 14z"/></svg>
+                  </span>
+                  <span class="ai-label" id="np-ai-label">没有图? 让 AI 帮我生成</span>
+                  <span class="ai-arrow">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                  </span>
+                </a>
+
+                <div class="field" style="margin-bottom: 12px;">
+                  <label class="field-label">商品图册<span class="req">*</span></label>
+                  <input type="file" id="np-file" accept="image/*" multiple hidden>
+
+                  <!-- 图片案例 (静态示例) -->
+                  <div class="np-section-h">
+                    <span class="check-ic"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 8 7 12 13 4"/></svg></span>
+                    图片案例
+                  </div>
+                  <div class="np-section-sub">上传您的商品的多角度白底图和使用图</div>
+                  <div class="np-examples">
+                    <div class="ex"><span>白底主图</span><span class="ex-badge"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></span></div>
+                    <div class="ex"><span>多角度</span><span class="ex-badge"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></span></div>
+                    <div class="ex"><span>细节图</span><span class="ex-badge"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></span></div>
+                    <div class="ex"><span>使用图</span><span class="ex-badge"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></span></div>
+                    <div class="ex"><span>包装图</span><span class="ex-badge"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></span></div>
+                  </div>
+
+                  <!-- 我的上传 (动态 5 槽) -->
+                  <div class="np-section-h">
+                    我的上传
+                    <span class="counter">( <span class="num" id="np-upload-count">0</span> / 5 )</span>
+                  </div>
+                  <div class="upload-grid" id="np-grid"></div>
+
+                  <!-- Dropzone (放在 grid 之后, 满 5 张时禁用) -->
+                  <div class="upload-zone" id="np-zone" style="margin-top: 10px;">
+                    <span class="uz-ic">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+                    </span>
+                    <span id="np-zone-text">点击或拖拽上传图片</span>
+                    <span class="uz-hint">// 支持多选 · 最多 5 张 · JPG / PNG / WEBP</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 右栏: 文案 -->
+              <div class="np-right">
+                <div class="field">
+                  <label class="field-label">商品名称<span class="req">*</span></label>
+                  <input class="input" id="np-name" placeholder="例: 透真玻尿酸补水面膜">
+                </div>
+                <div class="field">
+                  <label class="field-label">品类</label>
+                  <select class="select" id="np-cat">
+                    <option>美妆个护</option>
+                    <option>服饰内衣</option>
+                    <option>食品饮料</option>
+                    <option>家居家电</option>
+                    <option>数码 3C</option>
+                    <option>个护清洁</option>
+                    <option>运动户外</option>
+                    <option>母婴亲子</option>
+                  </select>
+                </div>
+                <div class="field">
+                  <label class="field-label">核心卖点<span class="req">*</span></label>
+                  <ul class="bullet-list" id="np-bullets" data-bl>
+                    <li class="bl-add"><span class="num">+</span><input class="bl-input" placeholder="添加新卖点 · 回车确认"></li>
+                  </ul>
+                </div>
+                <div class="field" style="margin-bottom:0;">
+                  <label class="field-label">目标人群</label>
+                  <input class="input" id="np-target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <div class="np-footer">
+            <span class="np-meta">// 上传模式 · <span class="accent">不消耗 token</span> · 一次性创建</span>
+            <button class="btn" type="button" onclick="Shell.closeModal('new-product-bg')">取消</button>
+            <button class="btn btn-primary" type="button" id="np-create" disabled style="opacity:.5;cursor:not-allowed;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+              创建商品
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Lightbox · 缩略图全屏预览 -->
+      <div class="np-lightbox" id="np-lightbox" onclick="Shell._closeLightbox()">
+        <button class="lb-x" type="button" onclick="event.stopPropagation();Shell._closeLightbox()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+        <img id="np-lightbox-img" alt="">
+        <span class="lb-name" id="np-lightbox-name"></span>
+      </div>
+    `;
+
+    // 装订线 SVG 准星 · V2.1 签名元素(圆弧内凹的"+")
+    const cornerSvg = `<path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z" fill="currentColor"/>`;
+    const cornerMarks = `
+      <span class="corner-mark tl"><svg viewBox="0 0 22 21" fill="none">${cornerSvg}</svg></span>
+      <span class="corner-mark tr"><svg viewBox="0 0 22 21" fill="none">${cornerSvg}</svg></span>
+      <span class="corner-mark bl"><svg viewBox="0 0 22 21" fill="none">${cornerSvg}</svg></span>
+      <span class="corner-mark br"><svg viewBox="0 0 22 21" fill="none">${cornerSvg}</svg></span>
+    `;
+
+    const app = document.createElement('div');
+    app.className = 'app';
+    app.innerHTML = sidebar + `<main>${decorations}${topbar}<div class="content" id="page-content">${cornerMarks}</div></main>`;
+
+    const src = document.getElementById('page');
+    document.body.prepend(app);
+    if (src) {
+      // 把页面 body 内容追加到 .content,保留 4 个 corner-mark SVG
+      document.getElementById('page-content').insertAdjacentHTML('beforeend', src.innerHTML);
+      src.remove();
+    }
+    document.body.insertAdjacentHTML('beforeend', toastHtml);
+    document.body.insertAdjacentHTML('beforeend', lightboxHtml);
+
+    document.addEventListener('keydown', e => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        document.getElementById('global-search')?.focus();
+      }
+    });
+  },
+
+  // [DEPRECATED] 新建商品弹窗 · 已废弃,创建商品改为直跳 product-create.html
+  _bindNewProductModal_DEPRECATED() {
+    const modal = document.getElementById('new-product-bg');
+    if (!modal) return;
+
+    // 上传图册的内存状态 (供 collect 和 AI CTA 用)
+    const uploads = []; // { id, dataUrl, name, type, size }
+
+    // 收集表单状态(供 AI CTA 和创建按钮用)
+    const collect = () => {
+      const get = (id) => document.getElementById(id)?.value?.trim() || '';
+      return {
+        name: get('np-name'),
+        cat: get('np-cat'),
+        target: get('np-target'),
+        bullets: [...document.querySelectorAll('#np-bullets .bl-item .bl-text')].map(el => el.textContent),
+        uploadedCount: uploads.length,
+        uploads: uploads.map(u => ({ name: u.name, type: u.type })),
+      };
+    };
+
+    const MAX_UPLOADS = 5;
+
+    // 创建按钮: 商品名 + 至少 1 张图
+    const nameInput = document.getElementById('np-name');
+    const createBtn = document.getElementById('np-create');
+    const updateCreateBtn = () => {
+      const nameOk = (nameInput.value || '').trim().length > 0;
+      const uploadOk = uploads.length >= 1;
+      const ok = nameOk && uploadOk;
+      createBtn.disabled = !ok;
+      createBtn.style.opacity = ok ? '' : '.5';
+      createBtn.style.cursor = ok ? '' : 'not-allowed';
+      // 提示用户缺什么
+      if (!nameOk) createBtn.title = '请填写商品名称';
+      else if (!uploadOk) createBtn.title = '请至少上传 1 张商品图';
+      else createBtn.title = '';
+    };
+    nameInput.addEventListener('input', updateCreateBtn);
+    createBtn.addEventListener('click', () => {
+      if (createBtn.disabled) return;
+      const s = collect();
+      Shell.toast('商品已创建', `+ ${s.name}`);
+      Shell.closeModal('new-product-bg');
+    });
+
+    // 核心卖点: bullet-list
+    const list = document.getElementById('np-bullets');
+    const addInput = list.querySelector('.bl-add .bl-input');
+    const xSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+    const renumber = () => {
+      [...list.querySelectorAll('.bl-item')].forEach((li, i) => {
+        li.querySelector('.num').textContent = i + 1;
+      });
+    };
+    const bindX = (x) => {
+      x.addEventListener('click', () => {
+        const li = x.closest('li');
+        li.style.transition = 'opacity .15s, transform .15s';
+        li.style.opacity = 0;
+        li.style.transform = 'translateX(-8px)';
+        setTimeout(() => { li.remove(); renumber(); }, 150);
+      });
+    };
+    const addBullet = (text) => {
+      const t = (text || '').trim();
+      if (!t) return;
+      const li = document.createElement('li');
+      li.className = 'bl-item';
+      li.innerHTML = `<span class="num">0</span><span class="bl-text">${t.replace(/[<>&]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;' })[c])}</span><span class="bl-x" title="删除">${xSvg}</span>`;
+      list.querySelector('.bl-add').before(li);
+      bindX(li.querySelector('.bl-x'));
+      renumber();
+    };
+    addInput?.addEventListener('keydown', e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        addBullet(addInput.value);
+        addInput.value = '';
+      }
+    });
+
+    // 上传组件: 批量上传(MAX 5) + 5 固定槽 + 预览/删除 + AI CTA 联动
+    const zone = document.getElementById('np-zone');
+    const zoneText = document.getElementById('np-zone-text');
+    const grid = document.getElementById('np-grid');
+    const fileInput = document.getElementById('np-file');
+    const aiCtaEl = document.getElementById('np-ai-cta');
+    const aiLabel = document.getElementById('np-ai-label');
+    const uploadCount = document.getElementById('np-upload-count');
+
+    const syncAiCta = () => {
+      if (uploads.length === 0) {
+        aiCtaEl.classList.add('primary');
+        aiLabel.textContent = '没有图? 让 AI 帮我生成';
+      } else {
+        aiCtaEl.classList.remove('primary');
+        aiLabel.textContent = '用 AI 加工 / 生成模特上身图';
+      }
+    };
+
+    const syncZone = () => {
+      const full = uploads.length >= MAX_UPLOADS;
+      zone.classList.toggle('full', full);
+      zoneText.textContent = full ? `已达上限 (${MAX_UPLOADS} / ${MAX_UPLOADS})` : '点击或拖拽上传图片';
+    };
+
+    const syncCounter = () => {
+      uploadCount.textContent = uploads.length;
+    };
+
+    const thumbXSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+    const esc = (s) => s.replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]);
+
+    const renderGrid = () => {
+      const filledHtml = uploads.map(u => `
+        <div class="up-thumb" data-id="${u.id}">
+          <img src="${u.dataUrl}" alt="${esc(u.name)}">
+          <button class="slot-x" type="button" title="删除">${thumbXSvg}</button>
+        </div>
+      `).join('');
+      const emptyCount = MAX_UPLOADS - uploads.length;
+      const emptyHtml = Array.from({ length: emptyCount }, () => `<div class="up-slot-empty" data-action="add">无预览</div>`).join('');
+      grid.innerHTML = filledHtml + emptyHtml;
+
+      // 已填充槽: 点击预览 + X 删除
+      grid.querySelectorAll('.up-thumb').forEach(thumb => {
+        const id = thumb.dataset.id;
+        thumb.querySelector('.slot-x').addEventListener('click', (e) => {
+          e.stopPropagation();
+          const idx = uploads.findIndex(u => u.id === id);
+          if (idx >= 0) {
+            const removed = uploads.splice(idx, 1)[0];
+            Shell.toast('已删除', removed.name);
+            refreshAll();
+          }
+        });
+        thumb.addEventListener('click', () => {
+          const u = uploads.find(x => x.id === id);
+          if (u) Shell._openLightbox(u.dataUrl, u.name);
+        });
+      });
+      // 空槽: 点击触发上传
+      grid.querySelectorAll('[data-action="add"]').forEach(slot => {
+        slot.addEventListener('click', () => fileInput.click());
+      });
+    };
+
+    const refreshAll = () => {
+      renderGrid();
+      syncAiCta();
+      syncZone();
+      syncCounter();
+      updateCreateBtn();
+    };
+
+    const addFiles = (fileList) => {
+      const remaining = MAX_UPLOADS - uploads.length;
+      if (remaining <= 0) {
+        Shell.toast('已达上传上限', `${MAX_UPLOADS} / ${MAX_UPLOADS} 张`);
+        return;
+      }
+      const incoming = [...fileList].filter(f => f.type.startsWith('image/'));
+      if (!incoming.length) return;
+      const accepted = incoming.slice(0, remaining);
+      const overflow = incoming.length - accepted.length;
+      let added = 0;
+      accepted.forEach(f => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          uploads.push({
+            id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
+            dataUrl: e.target.result,
+            name: f.name,
+            type: f.type,
+            size: f.size,
+          });
+          added++;
+          if (added === accepted.length) {
+            refreshAll();
+            const msg = overflow > 0
+              ? `+ ${added} 张 · 超出 ${overflow} 张已忽略`
+              : `+ ${added} 张 · 共 ${uploads.length} / ${MAX_UPLOADS}`;
+            Shell.toast('图片已上传', msg);
+          }
+        };
+        reader.readAsDataURL(f);
+      });
+    };
+
+    fileInput.addEventListener('change', (e) => {
+      addFiles(e.target.files);
+      e.target.value = '';
+    });
+    zone.addEventListener('click', () => {
+      if (uploads.length < MAX_UPLOADS) fileInput.click();
+    });
+    zone.addEventListener('dragover', e => {
+      e.preventDefault();
+      if (uploads.length < MAX_UPLOADS) zone.style.borderColor = 'var(--heat)';
+    });
+    zone.addEventListener('dragleave', () => { zone.style.borderColor = ''; });
+    zone.addEventListener('drop', e => {
+      e.preventDefault();
+      zone.style.borderColor = '';
+      if (e.dataTransfer?.files?.length) addFiles(e.dataTransfer.files);
+    });
+
+    refreshAll();
+
+    // AI CTA: 把已填表单 + 上传图册存到 sessionStorage,跳到 AI 工作台
+    const aiCta = document.getElementById('np-ai-cta');
+    aiCta.addEventListener('click', (e) => {
+      e.preventDefault();
+      const s = collect();
+      sessionStorage.setItem('pending-product', JSON.stringify(s));
+      Shell.toast('正在跳转 AI 工作台', `带入 ${s.uploadedCount} 张图`);
+      setTimeout(() => { location.href = 'product-create.html'; }, 350);
+    });
+
+    updateCreateBtn();
+  },
+
+  _openLightbox(src, name) {
+    const lb = document.getElementById('np-lightbox');
+    const img = document.getElementById('np-lightbox-img');
+    const nm = document.getElementById('np-lightbox-name');
+    if (!lb || !img || lb.classList.contains('show')) return;
+    img.src = src;
+    if (nm) nm.textContent = name || '';
+    lb.classList.add('show');
+    this.lockScroll();
+  },
+
+  _closeLightbox() {
+    const lb = document.getElementById('np-lightbox');
+    if (!lb || !lb.classList.contains('show')) return;
+    lb.classList.remove('show');
+    this.unlockScroll();
+  },
+
+  toast(text, mono) {
+    const t = document.getElementById('__toast');
+    const txt = document.getElementById('__toast-txt');
+    if (!t || !txt) return;
+    txt.innerHTML = text + (mono ? `<span class="mono">[ ${mono} ]</span>` : '');
+    t.classList.add('show');
+    clearTimeout(this._tt);
+    this._tt = setTimeout(() => t.classList.remove('show'), 2400);
+  },
+
+  /* ─── Body scroll lock (引用计数 · 多 overlay 叠加安全) ─── */
+  _scrollLockCount: 0,
+  _scrollLockSnapshot: null,
+  lockScroll() {
+    if (++this._scrollLockCount > 1) return;
+    const docEl = document.documentElement;
+    const sbw = window.innerWidth - docEl.clientWidth;
+    this._scrollLockSnapshot = {
+      bodyOverflow: document.body.style.overflow,
+      bodyPaddingRight: document.body.style.paddingRight,
+      htmlOverflow: docEl.style.overflow,
+    };
+    document.body.style.overflow = 'hidden';
+    docEl.style.overflow = 'hidden';
+    if (sbw > 0) document.body.style.paddingRight = sbw + 'px';
+  },
+  unlockScroll() {
+    if (--this._scrollLockCount > 0) return;
+    this._scrollLockCount = 0;
+    const s = this._scrollLockSnapshot;
+    if (s) {
+      document.body.style.overflow = s.bodyOverflow;
+      document.body.style.paddingRight = s.bodyPaddingRight;
+      document.documentElement.style.overflow = s.htmlOverflow;
+      this._scrollLockSnapshot = null;
+    }
+  },
+
+  openModal(id) {
+    const el = document.getElementById(id);
+    if (!el || el.classList.contains('show')) return;
+    el.classList.add('show');
+    this.lockScroll();
+  },
+  closeModal(id) {
+    const el = document.getElementById(id);
+    if (!el || !el.classList.contains('show')) return;
+    el.classList.remove('show');
+    this.unlockScroll();
+  },
+  openDrawer(id) {
+    const el = document.getElementById(id);
+    const bg = document.getElementById(id + '-bg');
+    if (!el || el.classList.contains('show')) return;
+    el.classList.add('show');
+    if (bg) bg.classList.add('show');
+    this.lockScroll();
+  },
+  closeDrawer(id) {
+    const el = document.getElementById(id);
+    const bg = document.getElementById(id + '-bg');
+    if (!el || !el.classList.contains('show')) return;
+    el.classList.remove('show');
+    if (bg) bg.classList.remove('show');
+    this.unlockScroll();
+  }
+};
diff --git a/v2/design-system.html b/v2/design-system.html
new file mode 100644
index 0000000..37fd368
--- /dev/null
+++ b/v2/design-system.html
@@ -0,0 +1,1730 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>流·Studio 设计系统 V2 · Interactive</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+/* ============================================================
+   Alibaba PuHuiTi 3.0 · 阿里巴巴普惠体 · 中文 web 字体
+   优先用 chinese-fonts-cdn 上的 woff2(已切片优化加载快)
+   失败回退到本地安装 → 系统 PingFang SC / Microsoft YaHei
+   ============================================================ */
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: local('Alibaba PuHuiTi 3.0'),
+       local('AlibabaPuHuiTi-3-55-Regular'),
+       local('Alibaba PuHuiTi 2.0'),
+       local('AlibabaPuHuiTi-2-55-Regular'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: local('Alibaba PuHuiTi 3.0 Medium'),
+       local('AlibabaPuHuiTi-3-65-Medium'),
+       local('AlibabaPuHuiTi-2-65-Medium'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-65-Medium/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: local('AlibabaPuHuiTi-3-75-SemiBold'),
+       local('AlibabaPuHuiTi-2-75-SemiBold'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-75-SemiBold/AlibabaPuHuiTi-3-75-SemiBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: local('Alibaba PuHuiTi 3.0 Bold'),
+       local('AlibabaPuHuiTi-3-85-Bold'),
+       local('AlibabaPuHuiTi-2-85-Bold'),
+       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2');
+}
+
+:root{
+  /* ============================================================
+     Color system V2.1 · Firecrawl-aligned
+     Reference: _design_src/firecrawl_playground_spec.md
+     ============================================================ */
+
+  /* ===== Backgrounds (cold gray, no warm tint) ===== */
+  --background-base:    #f9f9f9;   /* page bg */
+  --background-lighter: #fbfbfb;   /* container bg / hover plate */
+  --surface:            #ffffff;   /* card */
+  --surface-raised:     #ffffff;   /* modal / popover */
+
+  /* ===== Borders (3 levels, near-identical, semantic only) ===== */
+  --border-faint: #ededed;   /* default 1px */
+  --border-muted: #e8e8e8;
+  --border-loud:  #e6e6e6;
+
+  /* ===== Accent multi-color (Firecrawl 5-color signal palette) ===== */
+  --accent-black:    #262626;   /* primary foreground (not pure black) */
+  --accent-white:    #ffffff;
+  --accent-amethyst: #9061ff;   /* code / property */
+  --accent-bluetron: #2a6dfb;   /* info */
+  --accent-crimson:  #eb3424;   /* error */
+  --accent-forest:   #42c366;   /* success */
+  --accent-honey:    #ecb730;   /* warning */
+
+  /* ===== Heat · single hue + 8 alpha levels (no hue shift on hover) ===== */
+  --heat:    #fa5d19;                  /* 100% · main CTA */
+  --heat-90: rgba(250, 93, 25, .90);
+  --heat-40: rgba(250, 93, 25, .40);   /* ring / edge */
+  --heat-20: rgba(250, 93, 25, .20);   /* pill border / selection */
+  --heat-16: rgba(250, 93, 25, .16);
+  --heat-12: rgba(250, 93, 25, .12);   /* tint bg */
+  --heat-8:  rgba(250, 93, 25, .08);
+  --heat-4:  rgba(250, 93, 25, .04);
+
+  /* ===== Black-alpha (20 levels · 0–24 uses #000, 32+ uses accent-black) ===== */
+  --black-alpha-1:  rgba(0, 0, 0, .01);
+  --black-alpha-2:  rgba(0, 0, 0, .02);
+  --black-alpha-3:  rgba(0, 0, 0, .03);
+  --black-alpha-4:  rgba(0, 0, 0, .04);   /* hover bg */
+  --black-alpha-5:  rgba(0, 0, 0, .05);
+  --black-alpha-6:  rgba(0, 0, 0, .06);
+  --black-alpha-7:  rgba(0, 0, 0, .07);   /* active bg */
+  --black-alpha-8:  rgba(0, 0, 0, .08);
+  --black-alpha-10: rgba(0, 0, 0, .10);
+  --black-alpha-12: rgba(0, 0, 0, .12);   /* inside-border / disabled fg */
+  --black-alpha-16: rgba(0, 0, 0, .16);
+  --black-alpha-20: rgba(0, 0, 0, .20);
+  --black-alpha-24: rgba(0, 0, 0, .24);
+  --black-alpha-32: rgba(38, 38, 38, .32);
+  --black-alpha-40: rgba(38, 38, 38, .40);
+  --black-alpha-48: rgba(38, 38, 38, .48);   /* placeholder */
+  --black-alpha-56: rgba(38, 38, 38, .56);   /* secondary / inactive tab */
+  --black-alpha-64: rgba(38, 38, 38, .64);   /* description */
+  --black-alpha-72: rgba(38, 38, 38, .72);
+  --black-alpha-88: rgba(38, 38, 38, .88);
+
+  /* ===== Legacy aliases (V2 names → V2.1 tokens, for backward compat) ===== */
+  --bg:           var(--background-base);
+  --bg-soft:      var(--background-lighter);
+  --card:         var(--surface);
+  --ink:          var(--accent-black);
+  --green:        var(--accent-forest);
+  --red:          var(--accent-crimson);
+  --green-bg:     rgba(66, 195, 102, .08);
+  --green-bd:     rgba(66, 195, 102, .20);
+  --red-bg:       rgba(235, 52, 36, .08);
+  --red-bd:       rgba(235, 52, 36, .20);
+  --ink-alpha-4:  var(--black-alpha-4);
+  --ink-alpha-7:  var(--black-alpha-7);
+  --ink-alpha-12: var(--black-alpha-12);
+  --ink-alpha-24: var(--black-alpha-24);
+  --ink-alpha-32: var(--black-alpha-32);
+  --ink-alpha-48: var(--black-alpha-48);
+  --ink-alpha-56: var(--black-alpha-56);
+  --ink-alpha-64: var(--black-alpha-64);
+  --ink-alpha-72: var(--black-alpha-72);
+  --ink-alpha-88: var(--black-alpha-88);
+
+  /* ===== Radius ===== */
+  --r-sm: 4px;
+  --r-md: 8px;
+  --r-pill: 999px;
+
+  /* ===== Font ===== */
+  /* 混排策略:Inter 列首 → 英文/数字/符号用 Inter(Inter 不含 CJK)
+     → 中文自动 fallthrough 到 Alibaba PuHuiTi → 兜底系统中文 */
+  --font-sans: 'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
+  /* Inter 系列 · 独立 token,给 Ctrl K / 全英文徽标这种"强制纯英文"场景用 */
+  --font-inter: 'Inter', system-ui, sans-serif;
+
+  /* ===== Transition ===== */
+  --t-fast: 100ms ease;
+  --t-base: 200ms ease;
+  --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+::selection{ background: var(--heat-20); color: var(--heat); }
+
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{
+  font-family:var(--font-sans);
+  font-size:14px;
+  color:var(--ink);
+  background:var(--bg);
+  line-height:1.65;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+  text-rendering:optimizeLegibility;
+}
+
+/* === Layout: sidebar + main === */
+.layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
+.sidebar{
+  position:sticky;top:0;height:100vh;
+  border-right:1px solid var(--border-faint);
+  background:var(--card);
+  padding:40px 28px;
+  overflow-y:auto;
+}
+.sidebar h1{
+  font-size:17px;font-weight:600;letter-spacing:-.01em;
+  margin:0 0 6px;line-height:1.4;
+}
+.sidebar .mono-sub{
+  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);
+  letter-spacing:.04em;margin-bottom:32px;
+}
+.nav-list{list-style:none;padding:0;margin:0}
+.nav-list li{margin:0}
+.nav-list a{
+  display:block;padding:8px 12px;
+  font-size:13px;color:var(--ink-alpha-64);
+  text-decoration:none;border-radius:var(--r-md);
+  transition:background var(--t-base),color var(--t-base);
+}
+.nav-list a:hover{background:var(--ink-alpha-4);color:var(--ink)}
+.nav-list a.active{background:var(--heat-12);color:var(--heat)}
+.nav-list .nav-group{
+  font-family:var(--font-mono);font-size:10px;
+  letter-spacing:.06em;color:var(--ink-alpha-32);
+  margin:24px 0 8px;padding:0 12px;text-transform:uppercase;
+}
+
+.main{padding:72px 80px 120px;max-width:1280px}
+.main > section{margin-bottom:104px;scroll-margin-top:32px}
+.main > section:last-child{margin-bottom:0}
+
+.section-head{margin-bottom:44px;border-bottom:1px solid var(--border-faint);padding-bottom:28px}
+.section-head .mono-tag{
+  display:inline-block;font-family:var(--font-mono);font-size:11px;
+  color:var(--ink-alpha-48);letter-spacing:.06em;margin-bottom:14px;
+}
+.section-head h2{
+  font-size:28px;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;line-height:1.25;
+}
+.section-head p{
+  font-size:14px;color:var(--ink-alpha-64);margin:0;max-width:720px;line-height:1.75;
+}
+
+.subsection{margin-bottom:64px}
+.subsection h3{
+  font-size:16px;font-weight:500;letter-spacing:-.01em;margin:0 0 22px;
+  display:flex;align-items:center;gap:12px;line-height:1.4;
+}
+.subsection h3 .mono-num{
+  font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-32);
+  font-weight:400;letter-spacing:.04em;
+}
+
+.subsection p.lead{
+  font-size:13px;color:var(--ink-alpha-56);margin:0 0 22px;line-height:1.8;max-width:720px;
+}
+
+/* === Mono helper === */
+.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-alpha-56)}
+.kbd{
+  display:inline-flex;align-items:center;gap:3px;
+  font-family:var(--font-mono);font-size:10.5px;line-height:1;
+  background:var(--background-lighter);border:1px solid var(--border-faint);
+  border-radius:var(--r-sm);padding:3px 6px;color:var(--black-alpha-64);
+  letter-spacing:.04em;
+}
+.kbd svg{display:block;width:10px;height:10px;flex-shrink:0}
+
+/* === Hero === */
+.hero{
+  position:relative;
+  border:1px solid var(--border-faint);
+  background:var(--card);
+  border-radius:var(--r-md);
+  padding:52px 56px;margin-bottom:72px;overflow:hidden;
+}
+.hero .badge{
+  display:inline-flex;align-items:center;gap:6px;
+  font-family:var(--font-mono);font-size:11px;color:var(--heat);
+  background:var(--heat-12);border:1px solid var(--heat-20);
+  border-radius:var(--r-pill);padding:4px 11px;letter-spacing:.04em;
+  margin-bottom:20px;
+}
+.hero h1{font-size:36px;font-weight:500;letter-spacing:-.024em;margin:0 0 14px;line-height:1.2}
+.hero p{font-size:15px;color:var(--ink-alpha-64);margin:0;line-height:1.75;max-width:680px}
+.hero .meta{display:flex;gap:16px;margin-top:24px;font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);letter-spacing:.04em}
+
+/* === Inside-border core utility === */
+.inside-border{position:relative}
+.inside-border::before{
+  content:'';position:absolute;inset:0;
+  border:1px solid var(--ink-alpha-12);
+  border-radius:inherit;pointer-events:none;
+  transition:opacity var(--t-base),border-color var(--t-base);
+}
+
+/* === Color tokens grid === */
+.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
+.swatch{
+  background:var(--card);border-radius:var(--r-md);overflow:hidden;
+  cursor:pointer;transition:transform var(--t-fast);
+}
+.swatch:hover{transform:translateY(-1px)}
+.swatch .chip{height:76px;position:relative;border-bottom:1px solid var(--border-faint)}
+.swatch .chip.with-grid{
+  background-image:
+    linear-gradient(45deg,#dcdcdc 25%,transparent 25%),
+    linear-gradient(-45deg,#dcdcdc 25%,transparent 25%),
+    linear-gradient(45deg,transparent 75%,#dcdcdc 75%),
+    linear-gradient(-45deg,transparent 75%,#dcdcdc 75%);
+  background-color:#f5f5f5;
+  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;
+}
+.swatch .meta-row{padding:14px 14px;border:1px solid var(--border-faint);border-top:0;border-radius:0 0 var(--r-md) var(--r-md)}
+.swatch .name{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);font-weight:500;letter-spacing:.02em;line-height:1.5}
+.swatch .val{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);margin-top:4px;letter-spacing:.04em;line-height:1.5}
+.swatch .copy{font-family:var(--font-mono);font-size:10px;color:var(--heat);display:none;margin-top:3px}
+.swatch.copied .copy{display:block}
+
+/* === Type sample === */
+.type-row{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--border-faint)}
+.type-row:last-child{border:0}
+.type-row .meta-col{font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);letter-spacing:.04em;line-height:1.65}
+.type-row .meta-col strong{display:block;color:var(--ink);font-family:var(--font-sans);font-size:13px;font-weight:500;margin-bottom:6px;letter-spacing:0}
+.type-row .sample{color:var(--ink)}
+
+/* === Radius scale === */
+.radius-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
+.radius-box{display:flex;flex-direction:column;align-items:center;gap:6px}
+.radius-box .box{
+  background:var(--card);border:1px solid var(--border-faint);
+  width:88px;height:88px;
+  display:grid;place-items:center;
+}
+.radius-box .lbl{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.04em}
+.radius-box .px{font-family:var(--font-mono);font-size:13px;color:var(--ink);font-weight:500}
+
+/* === Icons === */
+.icon-row{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
+.icon-cell{display:flex;flex-direction:column;align-items:center;gap:8px}
+.icon-cell .ic{display:grid;place-items:center;color:var(--ink-alpha-64);background:var(--card);border:1px solid var(--border-faint);border-radius:var(--r-md)}
+.icon-cell svg{display:block}
+.icon-cell .lbl{font-family:var(--font-mono);font-size:10px;color:var(--ink-alpha-48);letter-spacing:.04em}
+
+.icon-color-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
+.icon-color-row .demo{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-md);border:1px solid var(--border-faint);background:var(--card);font-size:12.5px}
+.icon-color-row .demo.primary{background:var(--heat);color:#fff;border-color:var(--heat)}
+.icon-color-row .demo.disabled{color:var(--ink-alpha-12)}
+
+.icon-box{width:32px;height:32px;border-radius:var(--r-md);background:var(--heat-12);display:grid;place-items:center}
+.icon-box svg{stroke:var(--heat);width:16px;height:16px}
+
+/* === Buttons === */
+.btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:6px;
+  height:32px;padding:0 14px;
+  background:var(--card);color:var(--ink);
+  font-family:inherit;font-size:13px;font-weight:500;line-height:1;
+  border:0;cursor:pointer;
+  border-radius:var(--r-md);
+  position:relative;outline:none;
+  transition:background var(--t-base),transform var(--t-fast),box-shadow var(--t-fast);
+}
+.btn::before{
+  content:'';position:absolute;inset:0;
+  border:1px solid var(--ink-alpha-12);
+  border-radius:inherit;pointer-events:none;
+  transition:opacity var(--t-base),border-color var(--t-base);
+}
+.btn:hover{background:var(--ink-alpha-4)}
+.btn:hover::before{opacity:0}
+.btn:active{background:var(--ink-alpha-7);transform:scale(.99)}
+.btn:focus-visible::before{opacity:0}
+.btn:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--heat-40)}
+.btn[disabled],.btn.is-disabled{
+  background:var(--black-alpha-5);color:var(--black-alpha-32);
+  cursor:not-allowed;transform:none;
+}
+.btn[disabled]:hover,.btn.is-disabled:hover{background:var(--black-alpha-5)}
+.btn[disabled]::before,.btn.is-disabled::before,
+.btn[disabled]:hover::before,.btn.is-disabled:hover::before{opacity:1;border-color:var(--black-alpha-12)}
+
+.btn-primary{
+  background:var(--heat);color:#fff;
+  box-shadow:
+    inset 0 -4px 8px rgba(250,93,25,.20),
+    0 1px 1px rgba(250,93,25,.12),
+    0 2px 4px rgba(250,93,25,.10),
+    0 0.5px 0.5px rgba(250,93,25,.16);
+}
+.btn-primary::before{display:none}
+.btn-primary:hover{
+  background:var(--heat);
+  box-shadow:
+    inset 0 -4px 8px rgba(250,93,25,.20),
+    0 1px 1px rgba(250,93,25,.16),
+    0 4px 8px rgba(250,93,25,.20),
+    0 0.5px 0.5px rgba(250,93,25,.16);
+}
+.btn-primary:active{transform:scale(.995);box-shadow:inset 0 -4px 8px rgba(250,93,25,.28),0 1px 2px rgba(250,93,25,.16)}
+.btn-primary[disabled],.btn-primary.is-disabled{
+  background:var(--heat-40);color:#fff;box-shadow:none;cursor:not-allowed;
+}
+
+.btn-ghost{background:transparent;color:var(--ink-alpha-56)}
+.btn-ghost::before{display:none}
+.btn-ghost:hover{background:var(--ink-alpha-4);color:var(--ink)}
+.btn-ghost:active{background:var(--ink-alpha-7)}
+
+.btn-sm{height:28px;padding:0 10px;font-size:12px}
+.btn-lg{height:40px;padding:0 18px;font-size:14px}
+
+.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
+.btn-row .state-label{
+  font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);
+  letter-spacing:.04em;width:96px;flex-shrink:0;
+}
+
+/* Force visual states for demo */
+.btn.demo-hover{background:var(--ink-alpha-4)}
+.btn.demo-hover::before{opacity:0}
+.btn.demo-active{background:var(--ink-alpha-7);transform:scale(.99)}
+.btn-primary.demo-hover{
+  box-shadow:
+    inset 0 -4px 8px rgba(250,93,25,.20),
+    0 1px 1px rgba(250,93,25,.16),
+    0 4px 8px rgba(250,93,25,.20),
+    0 0.5px 0.5px rgba(250,93,25,.16);
+}
+.btn-primary.demo-active{transform:scale(.995);box-shadow:inset 0 -4px 8px rgba(250,93,25,.28),0 1px 2px rgba(250,93,25,.16)}
+.btn-ghost.demo-hover{background:var(--ink-alpha-4);color:var(--ink)}
+.btn-ghost.demo-active{background:var(--ink-alpha-7)}
+.btn.demo-focus{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--heat-40)}
+.btn.demo-focus::before{opacity:0}
+
+/* === Pills === */
+.pill{
+  display:inline-flex;align-items:center;gap:6px;
+  font-weight:500;border-radius:var(--r-pill);
+  position:relative;
+}
+.pill .dot{display:block;border-radius:50%;background:currentColor}
+
+.pill-l1{height:28px;padding:0 12px;font-size:13px;gap:8px}
+.pill-l1 .dot{width:8px;height:8px}
+.pill-l2{height:22px;padding:0 10px;font-size:11.5px;gap:6px}
+.pill-l2 .dot{width:6px;height:6px}
+.pill-l3{height:18px;padding:0 8px;font-size:10.5px;gap:5px}
+.pill-l3 .dot{width:5px;height:5px}
+
+.pill-info{color:var(--heat);background:var(--heat-12);border:1px solid var(--heat-20)}
+.pill-ok{color:var(--green);background:var(--green-bg);border:1px solid var(--green-bd)}
+.pill-err{color:var(--red);background:var(--red-bg);border:1px solid var(--red-bd)}
+
+.pill-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
+
+/* === Inputs === */
+.field-row{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;margin-bottom:18px}
+.field-row .lbl{font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);letter-spacing:.04em}
+.input{
+  width:100%;max-width:380px;height:36px;
+  padding:0 14px;background:var(--card);color:var(--ink);
+  font-family:inherit;font-size:14px;
+  border:0;border-radius:var(--r-md);
+  position:relative;outline:none;
+  transition:background var(--t-base);
+}
+.input-wrap{position:relative;display:inline-block;max-width:380px;width:100%}
+.input-wrap::before{
+  content:'';position:absolute;inset:0;
+  border:1px solid var(--ink-alpha-12);
+  border-radius:var(--r-md);pointer-events:none;
+  transition:border-color var(--t-base),box-shadow var(--t-base);
+}
+.input-wrap:hover::before{border-color:var(--ink-alpha-24)}
+.input-wrap.is-focus::before{border-color:var(--heat-40);box-shadow:inset 0 0 0 1px var(--heat-40)}
+.input-wrap.is-error::before{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red-bd)}
+.input-wrap.is-error .input{background:var(--red-bg)}
+.input-wrap.is-disabled::before{border-color:var(--black-alpha-12)}
+.input-wrap.is-disabled .input{background:var(--black-alpha-5);color:var(--black-alpha-32);cursor:not-allowed}
+.input-wrap.is-disabled .input::placeholder{color:var(--black-alpha-24)}
+.input::placeholder{color:var(--ink-alpha-48)}
+
+.search-wrap{position:relative;max-width:440px}
+.search-wrap .ic-left{
+  position:absolute;left:14px;top:50%;transform:translateY(-50%);
+  color:var(--black-alpha-56);
+  pointer-events:none;
+  z-index:2;                       /* 关键:压在 input bg 之上,否则被白底盖住 */
+  display:flex;                    /* 防止 SVG 行高继承导致偏移 */
+}
+.search-wrap .input{padding-left:42px;padding-right:64px}
+.search-wrap .k{
+  position:absolute;right:14px;top:50%;transform:translateY(-50%);
+  font-family:var(--font-inter);           /* Inter Bold,不再用 mono */
+  font-weight:700;
+  font-size:11.5px;
+  color:var(--black-alpha-56);
+  letter-spacing:.02em;
+  pointer-events:none;z-index:2;
+  line-height:1;
+}
+
+/* === Checkbox / Radio / Switch === */
+.ck-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
+
+.ck{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px}
+.ck input{display:none}
+.ck .ck-box{
+  width:16px;height:16px;border-radius:var(--r-sm);
+  background:var(--card);position:relative;flex-shrink:0;
+  transition:background var(--t-base),box-shadow var(--t-base);
+  box-shadow:inset 0 0 0 1px var(--ink-alpha-24);
+}
+.ck:hover .ck-box{box-shadow:inset 0 0 0 1px var(--ink-alpha-48)}
+.ck input:checked + .ck-box{
+  background:var(--heat);
+  box-shadow:inset 0 0 0 1px var(--heat);
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;
+  background-position:center;
+  background-size:12px 12px;
+}
+.ck.is-indeterminate .ck-box{
+  background:var(--heat);
+  box-shadow:inset 0 0 0 1px var(--heat);
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;
+  background-position:center;
+  background-size:12px 12px;
+}
+.ck.is-disabled{opacity:.6;cursor:not-allowed}
+.ck.is-disabled .ck-box{background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--ink-alpha-12)}
+
+.rd{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px}
+.rd input{display:none}
+.rd .rd-box{
+  width:16px;height:16px;border-radius:50%;
+  background:var(--card);position:relative;flex-shrink:0;
+  box-shadow:inset 0 0 0 1px var(--ink-alpha-24);
+  transition:box-shadow var(--t-base);
+}
+.rd:hover .rd-box{box-shadow:inset 0 0 0 1px var(--ink-alpha-48)}
+.rd input:checked + .rd-box{box-shadow:inset 0 0 0 1px var(--heat)}
+.rd input:checked + .rd-box::after{
+  content:'';position:absolute;inset:4px;border-radius:50%;background:var(--heat);
+}
+
+.sw{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font-size:14px}
+.sw input{display:none}
+.sw .sw-box{
+  width:28px;height:16px;border-radius:var(--r-pill);
+  background:var(--ink-alpha-12);position:relative;flex-shrink:0;
+  transition:background var(--t-base);
+}
+.sw .sw-box::after{
+  content:'';position:absolute;left:2px;top:2px;
+  width:12px;height:12px;border-radius:50%;background:#fff;
+  transition:left var(--t-base);
+  box-shadow:0 1px 2px rgba(21,20,15,.12);
+}
+.sw input:checked + .sw-box{background:var(--heat)}
+.sw input:checked + .sw-box::after{left:14px}
+.sw.is-disabled{opacity:.5;cursor:not-allowed}
+
+/* === Tabs === */
+.tabs{border-bottom:1px solid var(--border-faint);display:flex;gap:0;margin-bottom:16px}
+.tab{
+  position:relative;background:none;border:0;cursor:pointer;
+  height:36px;padding:0 14px;
+  font-family:inherit;font-size:13px;font-weight:500;
+  color:var(--ink-alpha-56);
+  transition:color var(--t-base),background var(--t-base);
+  border-radius:var(--r-md) var(--r-md) 0 0;
+}
+.tab:hover{color:var(--ink);background:var(--ink-alpha-4)}
+.tab.is-active{color:var(--ink)}
+.tab.is-active::after{
+  content:'';position:absolute;left:0;right:0;bottom:-1px;
+  height:2px;background:var(--heat);
+}
+
+.subtabs{display:flex;gap:0;margin-bottom:24px}
+.subtab{
+  display:inline-flex;align-items:center;gap:6px;
+  background:none;border:0;cursor:pointer;
+  height:28px;padding:0 10px;
+  font-family:inherit;font-size:12px;font-weight:500;
+  color:var(--ink-alpha-56);
+  transition:color var(--t-base);
+  border-radius:var(--r-md);
+}
+.subtab svg{opacity:.6;transition:opacity var(--t-base)}
+.subtab:hover{color:var(--ink)}
+.subtab.is-active{color:var(--ink)}
+.subtab.is-active svg{opacity:1;color:var(--heat)}
+.subtab-divider{width:1px;height:12px;background:var(--ink-alpha-7);margin:0 4px;align-self:center}
+
+/* === Card / Shortcut / Tip / Stats === */
+.card{
+  background:var(--card);border:1px solid var(--border-faint);
+  border-radius:var(--r-md);padding:28px 30px;
+}
+
+.shortcut{
+  display:flex;align-items:center;gap:16px;
+  background:var(--card);border:1px solid var(--border-faint);
+  border-radius:var(--r-md);padding:18px 20px;
+  cursor:pointer;text-decoration:none;color:inherit;
+  transition:background var(--t-base);
+}
+.shortcut:hover{background:var(--ink-alpha-4)}
+.shortcut:active{transform:scale(.99)}
+.shortcut .meta{flex:1;min-width:0}
+.shortcut .title{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.4}
+.shortcut .desc{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-alpha-48);letter-spacing:.04em;line-height:1.5}
+
+.tip{
+  background:var(--card);border:1px dashed var(--border-loud);
+  border-radius:var(--r-md);padding:20px 24px;
+}
+.tip .head{font-size:14px;font-weight:500;margin-bottom:10px;color:var(--ink);line-height:1.4}
+.tip .body{font-size:13px;color:var(--ink-alpha-64);line-height:1.8}
+.tip .mono-code{display:inline-block;padding:2px 8px;background:var(--heat-12);color:var(--heat);font-family:var(--font-mono);font-size:11.5px;border-radius:var(--r-sm);letter-spacing:.04em}
+
+.stats{
+  background:var(--card);border:1px solid var(--border-faint);
+  border-radius:var(--r-md);
+  display:grid;grid-template-columns:repeat(4,1fr);
+  position:relative;
+}
+.stats .cell{padding:28px 30px;border-right:1px solid var(--border-faint)}
+.stats .cell:last-child{border-right:0}
+.stats .lbl-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
+.stats .lbl{font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);letter-spacing:.06em;text-transform:uppercase}
+.stats .num{font-size:32px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
+.stats .num small{font-size:15px;color:var(--ink-alpha-48);font-weight:400}
+.stats .delta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-alpha-48);margin-top:10px}
+.stats .delta .up{color:var(--green)}
+
+/* progress bar segments · 语义色 */
+.prog{display:flex;gap:3px;margin-top:8px}
+.prog span{
+  width:18px;height:5px;border-radius:2px;
+  background:var(--black-alpha-8);
+  display:inline-block;
+  transition:background var(--t-base);
+}
+.prog span.done{background:var(--accent-forest)}    /* 已完成 = 绿 */
+.prog span.now{
+  background:var(--heat);                            /* 进行中 = 橙 + 脉动 */
+  animation:prog-pulse 1.4s ease-in-out infinite;
+}
+.prog span.err{background:var(--accent-crimson)}    /* 失败 = 红 */
+@keyframes prog-pulse{
+  0%,100%{opacity:1;transform:scaleY(1)}
+  50%{opacity:.55;transform:scaleY(.7)}
+}
+
+/* === List row === */
+.list-card{background:var(--card);border:1px solid var(--border-faint);border-radius:var(--r-md);overflow:hidden}
+.list-row{
+  display:grid;grid-template-columns:56px 1fr auto auto auto;gap:22px;
+  align-items:center;padding:20px 24px;
+  border-bottom:1px solid var(--border-faint);
+  transition:background var(--t-base);
+}
+.list-row:last-child{border-bottom:0}
+.list-row:hover{background:var(--ink-alpha-4)}
+.list-row .thumb{
+  width:56px;height:72px;background:var(--bg-soft);
+  border:1px solid var(--border-faint);border-radius:var(--r-md);
+  display:grid;place-items:center;
+  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.04em;
+}
+.list-row .meta .ti{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px;line-height:1.4}
+.list-row .meta .sub{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-alpha-48);letter-spacing:.02em;line-height:1.5}
+
+/* === Toast === */
+.toast-stack{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:1000;pointer-events:none}
+.toast{
+  pointer-events:auto;
+  display:flex;align-items:center;gap:14px;
+  background:var(--card);border:1px solid var(--border-faint);
+  border-radius:var(--r-md);padding:16px 20px;min-width:300px;max-width:400px;
+  box-shadow:0 4px 20px rgba(21,20,15,.06);
+  animation:toastIn var(--t-slow) both;
+}
+.toast.is-leave{animation:toastOut 200ms forwards}
+.toast .ic-box{width:28px;height:28px;border-radius:var(--r-md);background:var(--heat-12);display:grid;place-items:center;flex-shrink:0}
+.toast .ic-box svg{stroke:var(--heat);width:14px;height:14px}
+.toast .ti{font-size:14px;font-weight:500;color:var(--ink);line-height:1.4}
+.toast .sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);letter-spacing:.04em;margin-top:3px}
+@keyframes toastIn{from{transform:translateX(420px);opacity:0}to{transform:translateX(0);opacity:1}}
+@keyframes toastOut{to{transform:translateX(420px);opacity:0}}
+
+/* === Modal === */
+.modal-mask{
+  position:fixed;inset:0;background:rgba(21,20,15,.42);backdrop-filter:blur(8px);
+  display:none;align-items:center;justify-content:center;z-index:900;
+  animation:fadeIn 200ms both;
+}
+.modal-mask.is-open{display:flex}
+.modal{
+  background:var(--card);border:1px solid var(--border-faint);
+  border-radius:var(--r-md);width:460px;position:relative;
+  animation:modalIn 250ms cubic-bezier(0.34,1.56,0.64,1) both;
+}
+.modal .corner{position:absolute;width:22px;height:21px;color:var(--border-muted)}
+.modal .corner.tl{top:-10.5px;left:-11px}
+.modal .corner.tr{top:-10.5px;right:-11px;transform:scaleX(-1)}
+.modal .corner.bl{bottom:-10.5px;left:-11px;transform:scaleY(-1)}
+.modal .corner.br{bottom:-10.5px;right:-11px;transform:scale(-1,-1)}
+.modal .head{display:flex;align-items:center;gap:16px;padding:24px 28px;border-bottom:1px solid var(--border-faint)}
+.modal .head .ic-box{width:36px;height:36px;border-radius:var(--r-md);background:var(--heat-12);display:grid;place-items:center;flex-shrink:0}
+.modal .head .ic-box svg{stroke:var(--heat);width:18px;height:18px}
+.modal .head .ti{font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.4}
+.modal .head .sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);letter-spacing:.04em;margin-top:4px}
+.modal .body{padding:24px 28px;font-size:14px;color:var(--ink-alpha-72);line-height:1.8}
+.modal .foot{display:flex;justify-content:flex-end;gap:12px;padding:18px 28px;border-top:1px solid var(--border-faint)}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
+
+/* === Container border-x demo === */
+.container-demo{
+  position:relative;margin:36px auto 24px;
+  max-width:720px;padding:48px 56px;
+  background:var(--bg);
+  border-left:1px solid var(--border-faint);
+  border-right:1px solid var(--border-faint);
+}
+.container-demo .corner{position:absolute;width:22px;height:21px;color:var(--border-muted)}
+.container-demo .corner.tl{top:-10.5px;left:-11px}
+.container-demo .corner.tr{top:-10.5px;right:-11px;transform:scaleX(-1)}
+.container-demo .corner.bl{bottom:-10.5px;left:-11px;transform:scaleY(-1)}
+.container-demo .corner.br{bottom:-10.5px;right:-11px;transform:scale(-1,-1)}
+.container-demo .inner{
+  background:var(--card);border:1px solid var(--border-faint);
+  border-radius:var(--r-md);padding:24px;
+  font-size:13px;color:var(--ink-alpha-72);text-align:center;
+}
+
+/* === Mono decoration samples === */
+.mono-sample-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
+.mono-tag-sample{
+  font-family:var(--font-mono);font-size:11px;
+  color:var(--ink-alpha-48);background:var(--bg-soft);
+  border:1px solid var(--border-faint);
+  border-radius:var(--r-sm);padding:3px 8px;letter-spacing:.04em;
+}
+.mono-tag-sample.heat{color:var(--heat);background:var(--heat-12);border-color:var(--heat-20)}
+
+/* === Don't / Do === */
+.dodont-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.dodont{padding:16px 18px;border-radius:var(--r-md);border:1px solid}
+.dodont .head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;margin-bottom:10px;display:inline-block;padding:1px 8px;border-radius:var(--r-sm)}
+.dodont.do{border-color:var(--green-bd);background:var(--green-bg)}
+.dodont.do .head{background:var(--green);color:#fff}
+.dodont.dont{border-color:var(--red-bd);background:var(--red-bg)}
+.dodont.dont .head{background:var(--red);color:#fff}
+.dodont .body{font-size:12.5px;line-height:1.7;color:var(--ink-alpha-72)}
+
+.dont-list-item{
+  display:flex;align-items:flex-start;gap:10px;
+  font-size:12.5px;line-height:1.7;color:var(--ink-alpha-72);
+  padding:8px 0;border-bottom:1px solid var(--border-faint);
+}
+.dont-list-item:last-child{border-bottom:0}
+.dont-list-item .x{color:var(--red);font-family:var(--font-mono);flex-shrink:0;margin-top:2px}
+
+/* Codebox */
+.codebox{
+  background:var(--bg-soft);border:1px solid var(--border-faint);border-radius:var(--r-md);
+  padding:12px 14px;font-family:var(--font-mono);font-size:11.5px;line-height:1.65;
+  color:var(--ink-alpha-88);overflow-x:auto;letter-spacing:.02em;
+  white-space:pre;
+}
+.codebox .c-key{color:var(--heat)}
+.codebox .c-val{color:var(--ink-alpha-64)}
+.codebox .c-comment{color:var(--ink-alpha-32)}
+
+/* responsive */
+@media(max-width:980px){
+  .layout{grid-template-columns:1fr}
+  .sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--border-faint)}
+  .main{padding:32px 24px 64px}
+  .stats{grid-template-columns:repeat(2,1fr)}
+  .stats .cell:nth-child(2){border-right:0}
+  .stats .cell:nth-child(1),.stats .cell:nth-child(2){border-bottom:1px solid var(--border-faint)}
+}
+</style>
+</head>
+<body>
+
+<div class="layout">
+
+  <!-- ============ SIDEBAR ============ -->
+  <aside class="sidebar">
+    <h1>流·Studio<br>设计系统</h1>
+    <div class="mono-sub">// V2 · 2026-05-15 · INTERACTIVE</div>
+
+    <ul class="nav-list">
+      <li class="nav-group">// FOUNDATION</li>
+      <li><a href="#tokens">色彩 Tokens</a></li>
+      <li><a href="#type">字体系统</a></li>
+      <li><a href="#radius">圆角阶梯</a></li>
+      <li><a href="#icons">Icon 系统</a></li>
+
+      <li class="nav-group">// COMPONENTS</li>
+      <li><a href="#buttons">按钮</a></li>
+      <li><a href="#pills">胶囊 Pills</a></li>
+      <li><a href="#inputs">输入框</a></li>
+      <li><a href="#form-controls">表单控件</a></li>
+      <li><a href="#tabs">Tab</a></li>
+      <li><a href="#cards">卡片 / 快捷入口</a></li>
+      <li><a href="#stats">KPI 统计</a></li>
+      <li><a href="#list">列表行</a></li>
+      <li><a href="#tip">提示框 / 进度</a></li>
+      <li><a href="#modal">Modal · 弹窗</a></li>
+      <li><a href="#toast">Toast · 通知</a></li>
+
+      <li class="nav-group">// SIGNATURE</li>
+      <li><a href="#container">主容器装订线</a></li>
+      <li><a href="#mono-decor">Mono 装饰元素</a></li>
+
+      <li class="nav-group">// GUARDRAILS</li>
+      <li><a href="#dont">Don't List</a></li>
+    </ul>
+  </aside>
+
+  <!-- ============ MAIN ============ -->
+  <main class="main">
+
+    <!-- HERO -->
+    <div class="hero">
+      <span class="badge">// V2 · INTERACTIVE</span>
+      <h1>流·Studio 设计系统</h1>
+      <p>所有 token、组件、状态的可交互参照。基于 Firecrawl Playground 实测规范校准。 hover / 点击下方组件可看到真实交互反馈。</p>
+      <div class="meta">
+        <span>[ Restraint · v2.0 ]</span>
+        <span>·</span>
+        <span>// based on DESIGN_SPEC_V2.md</span>
+      </div>
+    </div>
+
+    <!-- =========================================== -->
+    <!-- §1 COLOR TOKENS                              -->
+    <!-- =========================================== -->
+    <section id="tokens">
+      <div class="section-head">
+        <span class="mono-tag">// §1 · COLOR TOKENS · V2.1 · FIRECRAWL-ALIGNED</span>
+        <h2>色彩系统</h2>
+        <p>V2.1 全面对齐 Firecrawl Playground 实测色板:**冷灰底**(非米白)· **#FA5D19 主橙**(更亮一档)· **20 档 black-alpha 阶梯**(替代 11 档 ink-alpha)· **5 色 accent 多彩点**(amethyst / bluetron / crimson / forest / honey)。点击任何色块复制值。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>表面 / 背景 <span class="mono-num">// 4 档 · 冷灰无色相</span></h3>
+        <p class="lead">告别 V2 的暖米白(#FAF9F5),全面切换 Firecrawl 的纯冷灰。<code class="mono" style="background:var(--background-lighter);padding:1px 6px;border-radius:4px">--bg/--bg-soft/--card</code> 作为 legacy 别名仍可用。</p>
+        <div class="swatch-grid" data-copy-grid>
+          <div class="swatch" data-hex="#f9f9f9"><div class="chip" style="background:#f9f9f9"></div><div class="meta-row"><div class="name">--background-base</div><div class="val">#f9f9f9 · 页面底</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#fbfbfb"><div class="chip" style="background:#fbfbfb"></div><div class="meta-row"><div class="name">--background-lighter</div><div class="val">#fbfbfb · 容器底</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#ffffff"><div class="chip with-grid" style="background:#ffffff"></div><div class="meta-row"><div class="name">--surface</div><div class="val">#ffffff · 卡片</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#ffffff"><div class="chip with-grid" style="background:#ffffff"></div><div class="meta-row"><div class="name">--surface-raised</div><div class="val">#ffffff · Modal</div><div class="copy">copied</div></div></div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>边框 <span class="mono-num">// 3 档 · 冷灰 · 差距极小靠语义</span></h3>
+        <p class="lead">3 档相差只 1–2 个色阶,肉眼几乎看不出。**用语义,不用视觉对比**——80% 场景用 <code class="mono" style="background:var(--background-lighter);padding:1px 6px;border-radius:4px">--border-faint</code>。</p>
+        <div class="swatch-grid" data-copy-grid>
+          <div class="swatch" data-hex="#ededed"><div class="chip" style="background:#ededed"></div><div class="meta-row"><div class="name">--border-faint</div><div class="val">#ededed · 默认 ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#e8e8e8"><div class="chip" style="background:#e8e8e8"></div><div class="meta-row"><div class="name">--border-muted</div><div class="val">#e8e8e8 · 略深</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#e6e6e6"><div class="chip" style="background:#e6e6e6"></div><div class="meta-row"><div class="name">--border-loud</div><div class="val">#e6e6e6 · 强分隔</div><div class="copy">copied</div></div></div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>主橙 Heat <span class="mono-num">// 单 hue #FA5D19 + 8 档 alpha</span></h3>
+        <p class="lead">从 V2 砖红 <code class="mono" style="background:var(--background-lighter);padding:1px 6px;border-radius:4px">#E55B26</code> 调亮到 Firecrawl 实测 <code class="mono" style="background:var(--heat-12);color:var(--heat);padding:1px 6px;border-radius:4px">#FA5D19</code>(更红更饱和)。**全靠 alpha 叠加,绝不换 hue。** hover 不再切换到更深的橙,而是用 90% / 16% 这些档位组合。</p>
+        <div class="swatch-grid" data-copy-grid>
+          <div class="swatch" data-hex="#fa5d19"><div class="chip" style="background:#fa5d19"></div><div class="meta-row"><div class="name">--heat</div><div class="val">#fa5d19 · 100% · CTA ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.90)"><div class="chip" style="background:rgba(250,93,25,.90)"></div><div class="meta-row"><div class="name">--heat-90</div><div class="val">90% · hover</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.40)"><div class="chip" style="background:rgba(250,93,25,.40)"></div><div class="meta-row"><div class="name">--heat-40</div><div class="val">40% · ring / edge</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.20)"><div class="chip" style="background:rgba(250,93,25,.20)"></div><div class="meta-row"><div class="name">--heat-20</div><div class="val">20% · pill border / selection</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.16)"><div class="chip" style="background:rgba(250,93,25,.16)"></div><div class="meta-row"><div class="name">--heat-16</div><div class="val">16% · hover bg</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.12)"><div class="chip" style="background:rgba(250,93,25,.12)"></div><div class="meta-row"><div class="name">--heat-12</div><div class="val">12% · tint bg</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.08)"><div class="chip" style="background:rgba(250,93,25,.08)"></div><div class="meta-row"><div class="name">--heat-8</div><div class="val">8%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(250,93,25,.04)"><div class="chip" style="background:rgba(250,93,25,.04)"></div><div class="meta-row"><div class="name">--heat-4</div><div class="val">4% · 极弱</div><div class="copy">copied</div></div></div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>Accent 多彩点 <span class="mono-num">// 5 色信号 · 限定语义场景</span></h3>
+        <p class="lead">**新增章节 · 取自 Firecrawl 实测**。这 5 色只用于**语义信号**(代码高亮 / info / 状态色),**禁止做大面积装饰**——全场依然只有橙色一个 accent。<code class="mono" style="background:var(--heat-12);color:var(--heat);padding:1px 6px;border-radius:4px">--accent-black</code> 替代 V2 的 <code class="mono" style="background:var(--background-lighter);padding:1px 6px;border-radius:4px">--ink #15140F</code>(更柔和的灰黑)。</p>
+        <div class="swatch-grid" data-copy-grid>
+          <div class="swatch" data-hex="#262626"><div class="chip" style="background:#262626"></div><div class="meta-row"><div class="name">--accent-black</div><div class="val">#262626 · 主前景</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#ffffff"><div class="chip with-grid" style="background:#ffffff"></div><div class="meta-row"><div class="name">--accent-white</div><div class="val">#ffffff · 反色文字</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#9061ff"><div class="chip" style="background:#9061ff"></div><div class="meta-row"><div class="name">--accent-amethyst</div><div class="val">#9061ff · 紫 / code property</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#2a6dfb"><div class="chip" style="background:#2a6dfb"></div><div class="meta-row"><div class="name">--accent-bluetron</div><div class="val">#2a6dfb · 蓝 / info</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#eb3424"><div class="chip" style="background:#eb3424"></div><div class="meta-row"><div class="name">--accent-crimson</div><div class="val">#eb3424 · 红 / error ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#42c366"><div class="chip" style="background:#42c366"></div><div class="meta-row"><div class="name">--accent-forest</div><div class="val">#42c366 · 绿 / success ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#ecb730"><div class="chip" style="background:#ecb730"></div><div class="meta-row"><div class="name">--accent-honey</div><div class="val">#ecb730 · 黄 / warning</div><div class="copy">copied</div></div></div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>Black-Alpha 阶梯 <span class="mono-num">// 20 档 · 替代 V2 的 11 档 ink-alpha</span></h3>
+        <p class="lead">**核心工具尺。** 0–24% 用 <code class="mono">rgba(0,0,0,...)</code> 纯黑透明;**32% 起换 <code class="mono">rgba(38,38,38,...)</code>**(即 accent-black 作底)避免叠出"灰中带蓝"——这是 Firecrawl 的细节技巧,我们 1:1 复刻。dark mode 时这套 token 自动翻转为 white-alpha。原 <code class="mono">--ink-alpha-*</code> 全部作为 legacy 别名映射到对应 black-alpha。</p>
+        <div class="swatch-grid" data-copy-grid>
+          <div class="swatch" data-hex="rgba(0,0,0,.01)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.01)"></div></div><div class="meta-row"><div class="name">--black-alpha-1</div><div class="val">1%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.02)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.02)"></div></div><div class="meta-row"><div class="name">--black-alpha-2</div><div class="val">2%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.03)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.03)"></div></div><div class="meta-row"><div class="name">--black-alpha-3</div><div class="val">3%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.04)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.04)"></div></div><div class="meta-row"><div class="name">--black-alpha-4</div><div class="val">4% · hover bg ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.05)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.05)"></div></div><div class="meta-row"><div class="name">--black-alpha-5</div><div class="val">5% · tab 分隔</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.06)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.06)"></div></div><div class="meta-row"><div class="name">--black-alpha-6</div><div class="val">6%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.07)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.07)"></div></div><div class="meta-row"><div class="name">--black-alpha-7</div><div class="val">7% · active bg ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.08)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.08)"></div></div><div class="meta-row"><div class="name">--black-alpha-8</div><div class="val">8%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.10)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.10)"></div></div><div class="meta-row"><div class="name">--black-alpha-10</div><div class="val">10%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.12)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.12)"></div></div><div class="meta-row"><div class="name">--black-alpha-12</div><div class="val">12% · inside-border ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.16)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.16)"></div></div><div class="meta-row"><div class="name">--black-alpha-16</div><div class="val">16%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.20)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.20)"></div></div><div class="meta-row"><div class="name">--black-alpha-20</div><div class="val">20%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(0,0,0,.24)"><div class="chip with-grid"><div style="position:absolute;inset:0;background:rgba(0,0,0,.24)"></div></div><div class="meta-row"><div class="name">--black-alpha-24</div><div class="val">24%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.32)"><div class="chip" style="background:rgba(38,38,38,.32)"></div><div class="meta-row"><div class="name">--black-alpha-32</div><div class="val">32% · base 切换 →</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.40)"><div class="chip" style="background:rgba(38,38,38,.40)"></div><div class="meta-row"><div class="name">--black-alpha-40</div><div class="val">40%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.48)"><div class="chip" style="background:rgba(38,38,38,.48)"></div><div class="meta-row"><div class="name">--black-alpha-48</div><div class="val">48% · 占位字色 ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.56)"><div class="chip" style="background:rgba(38,38,38,.56)"></div><div class="meta-row"><div class="name">--black-alpha-56</div><div class="val">56% · 次级文字 ★</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.64)"><div class="chip" style="background:rgba(38,38,38,.64)"></div><div class="meta-row"><div class="name">--black-alpha-64</div><div class="val">64% · 描述</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.72)"><div class="chip" style="background:rgba(38,38,38,.72)"></div><div class="meta-row"><div class="name">--black-alpha-72</div><div class="val">72%</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(38,38,38,.88)"><div class="chip" style="background:rgba(38,38,38,.88)"></div><div class="meta-row"><div class="name">--black-alpha-88</div><div class="val">88% · 近主前景</div><div class="copy">copied</div></div></div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>状态色 <span class="mono-num">// 用 accent-forest / crimson 作语义</span></h3>
+        <p class="lead">V2 的 <code class="mono">--green #3F6B3F</code>(深森林绿)与 <code class="mono">--red #B33A2A</code>(暗砖红)替换为 Firecrawl 的 <code class="mono">--accent-forest #42c366</code> 与 <code class="mono">--accent-crimson #eb3424</code>——更明亮、更接近真实"信号灯"颜色,但仍保持非荧光。</p>
+        <div class="swatch-grid" data-copy-grid>
+          <div class="swatch" data-hex="#42c366"><div class="chip" style="background:#42c366"></div><div class="meta-row"><div class="name">--green</div><div class="val">#42c366 · 成功(=forest)</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(66,195,102,.08)"><div class="chip" style="background:rgba(66,195,102,.08)"></div><div class="meta-row"><div class="name">--green-bg</div><div class="val">8% · 配套底</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(66,195,102,.20)"><div class="chip" style="background:rgba(66,195,102,.20)"></div><div class="meta-row"><div class="name">--green-bd</div><div class="val">20% · 配套边</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="#eb3424"><div class="chip" style="background:#eb3424"></div><div class="meta-row"><div class="name">--red</div><div class="val">#eb3424 · 失败(=crimson)</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(235,52,36,.08)"><div class="chip" style="background:rgba(235,52,36,.08)"></div><div class="meta-row"><div class="name">--red-bg</div><div class="val">8% · 配套底</div><div class="copy">copied</div></div></div>
+          <div class="swatch" data-hex="rgba(235,52,36,.20)"><div class="chip" style="background:rgba(235,52,36,.20)"></div><div class="meta-row"><div class="name">--red-bd</div><div class="val">20% · 配套边</div><div class="copy">copied</div></div></div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>Selection 选中色 <span class="mono-num">// Firecrawl 签名细节</span></h3>
+        <p class="lead">页面内任何文字选中时,底色 <code class="mono" style="background:var(--heat-20);color:var(--heat);padding:1px 6px;border-radius:4px">--heat-20</code> + 字色 <code class="mono" style="color:var(--heat);padding:1px 6px;border-radius:4px">--heat</code>。**试着选中下面这行字看效果:**</p>
+        <p style="font-size:14px;line-height:1.7;padding:14px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">本月营收 ¥327,400 较上月增长 33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。</p>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §2 TYPOGRAPHY                                -->
+    <!-- =========================================== -->
+    <section id="type">
+      <div class="section-head">
+        <span class="mono-tag">// §2 · TYPE · V2.1 MIXED STRATEGY</span>
+        <h2>字体系统 · 中英协作</h2>
+        <p>V2.1 改为**中英双字体协作** —— <code class="mono" style="background:var(--background-lighter);padding:2px 8px;border-radius:4px;color:var(--ink)">Inter</code> 处理英文/数字,<code class="mono" style="background:var(--background-lighter);padding:2px 8px;border-radius:4px;color:var(--ink)">Alibaba PuHuiTi</code> 处理中文,装饰用 <code class="mono" style="background:var(--background-lighter);padding:2px 8px;border-radius:4px;color:var(--ink)">JetBrains Mono</code>。浏览器按字符级 fallthrough,Inter 不含 CJK 字形 → 中文自动跳到普惠体。**不需要 JS,中英自然分工。**</p>
+      </div>
+
+      <div class="subsection">
+        <h3>字体族原理 <span class="mono-num">// browser-level character fallthrough</span></h3>
+        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:24px">
+          <div style="padding:24px 26px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.06em;margin-bottom:14px">// 01 · ENGLISH</div>
+            <div style="font-family:'Inter',sans-serif;font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px">Inter</div>
+            <div style="font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-alpha-64);line-height:1.6">The quick brown fox jumps. 0123456789 — Vercel / Linear / Stripe 御用,屏幕 UI 优化,数字同宽。</div>
+          </div>
+          <div style="padding:24px 26px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.06em;margin-bottom:14px">// 02 · 中文</div>
+            <div style="font-family:'Alibaba PuHuiTi','PingFang SC',sans-serif;font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px">阿里普惠体</div>
+            <div style="font-family:'Alibaba PuHuiTi','PingFang SC',sans-serif;font-size:13px;color:var(--ink-alpha-64);line-height:1.6">为中英混排专门设计的笔画粗细配比,与 Inter 视觉重量贴近,中文版面舒适匀质。</div>
+          </div>
+          <div style="padding:24px 26px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.06em;margin-bottom:14px">// 03 · 装饰 MONO</div>
+            <div style="font-family:var(--font-mono);font-size:22px;font-weight:500;color:var(--ink);margin-bottom:8px">JetBrains</div>
+            <div style="font-family:var(--font-mono);font-size:12px;color:var(--ink-alpha-64);line-height:1.6;letter-spacing:.02em">[ 200 OK ] · // 05.14 · /v2 — 仅用于装饰标签,不参与正文。</div>
+          </div>
+        </div>
+        <div style="padding:22px 26px;background:var(--heat-8);border:1px solid var(--heat-20);border-radius:8px">
+          <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--heat);letter-spacing:.06em;margin-bottom:10px">// 混排实测 · MIXED RENDERING</div>
+          <div style="font-size:18px;font-weight:500;color:var(--ink);line-height:1.5">本月营收 ¥327,400 较上月 +33%,共 5 个 AI 项目处于 "生成中" 状态</div>
+          <div style="font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-48);margin-top:10px;letter-spacing:.04em">↑ 这一行里:中文走 PuHuiTi · "¥" "327,400" "+33%" "5" "AI" 走 Inter · 字重视觉匀质,无错位</div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>字号 / 字重 / 行高阶梯 <span class="mono-num">// 11 档</span></h3>
+        <div class="type-row">
+          <div class="meta-col"><strong>H1 / Hero</strong>36 / 500 / -0.024em / 1.2</div>
+          <div class="sample" style="font-size:36px;font-weight:500;letter-spacing:-.024em;line-height:1.2">早上好,大莱</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>区块 H2</strong>28 / 500 / -0.02em / 1.25</div>
+          <div class="sample" style="font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.25">设计系统总览</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>KPI 数值</strong>32 / 500 / -0.02em / tabular-nums</div>
+          <div class="sample" style="font-size:32px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums">¥327<small style="font-size:15px;color:var(--ink-alpha-48)">.40 K</small></div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>子区 H3</strong>16 / 500 / -0.01em / 1.4</div>
+          <div class="sample" style="font-size:16px;font-weight:500;letter-spacing:-.01em">最近项目</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>卡片标题</strong>14 / 500 / normal / 1.4</div>
+          <div class="sample" style="font-size:14px;font-weight:500">夏季新款蕾丝连衣裙 · 蓝色 / M</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>正文 body</strong>14 / 400 / normal / **1.65**</div>
+          <div class="sample" style="font-size:14px;line-height:1.65">商家可能没有现成的商品图,需要新增一种「AI 生成」模式 —— 商家上传一张随手拍的原图,AI 生成 4 张满意的头图,选 1 张。</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>Label · 按钮 / Tab</strong>13 / 500 / normal</div>
+          <div class="sample" style="font-size:13px;font-weight:500">查看 Demo</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>描述次级</strong>13 / 400 / --ink-alpha-64 / 1.8</div>
+          <div class="sample" style="font-size:13px;color:var(--ink-alpha-64);line-height:1.8">本月营收较上月增长 33%,5 个项目处于"生成中"状态,2 个需要重新调整模特模板</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>Pill 文字</strong>11.5 / 500 / normal</div>
+          <div class="sample" style="font-size:11.5px;font-weight:500">生成中</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>Inter Bold · 徽标</strong>11.5 / 700 / Inter only</div>
+          <div class="sample" style="font-family:var(--font-inter);font-size:11.5px;font-weight:700;color:var(--black-alpha-56);letter-spacing:.02em">Ctrl K · ESC · Enter · ⇧+Tab</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>Mono 标签</strong>11 / 400 / 0.04em · JetBrains</div>
+          <div class="sample" style="font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-alpha-48)">[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]</div>
+        </div>
+        <div class="type-row">
+          <div class="meta-col"><strong>Mono 散点装饰</strong>8.5 / 400 / 0.04em</div>
+          <div class="sample" style="font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;color:var(--ink-alpha-12)">· · + · +XX+ +XXXX· +X·</div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>字重档位 <span class="mono-num">// 仅 400 / 500 / 600 / 700</span></h3>
+        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px">
+          <div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.04em;margin-bottom:10px">// REGULAR · 400</div>
+            <div style="font-size:18px;font-weight:400">流·Studio · Aa Bb 123</div>
+          </div>
+          <div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.04em;margin-bottom:10px">// MEDIUM · 500 ★ 默认强调</div>
+            <div style="font-size:18px;font-weight:500">流·Studio · Aa Bb 123</div>
+          </div>
+          <div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.04em;margin-bottom:10px">// SEMIBOLD · 600</div>
+            <div style="font-size:18px;font-weight:600">流·Studio · Aa Bb 123</div>
+          </div>
+          <div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
+            <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--ink-alpha-48);letter-spacing:.04em;margin-bottom:10px">// BOLD · 700 · 限徽标</div>
+            <div style="font-size:18px;font-weight:700">流·Studio · Aa Bb 123</div>
+          </div>
+        </div>
+        <p class="mono" style="margin-top:14px">// Bold 700 仅用于 Ctrl K 这种纯英文徽标场景,**正文严禁 700**(中英字重错位会暴露)</p>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §3 RADIUS                                    -->
+    <!-- =========================================== -->
+    <section id="radius">
+      <div class="section-head">
+        <span class="mono-tag">// §3 · RADIUS</span>
+        <h2>圆角阶梯</h2>
+        <p>V2 核心变化:统一 <strong style="color:var(--ink)">8 px</strong> 作为默认主圆角。完全圆 999 px 仅用于 pill 和 dot。微元素降到 4–6 px。</p>
+      </div>
+
+      <div class="radius-row">
+        <div class="radius-box"><div class="box" style="border-radius:0"><span class="mono">x</span></div><div class="lbl">禁用 V1</div><div class="px">0 px</div></div>
+        <div class="radius-box"><div class="box" style="border-radius:2px"></div><div class="lbl">progress</div><div class="px">2 px</div></div>
+        <div class="radius-box"><div class="box" style="border-radius:4px"></div><div class="lbl">kbd / badge</div><div class="px">4 px</div></div>
+        <div class="radius-box"><div class="box" style="border-radius:6px"></div><div class="lbl">小色块</div><div class="px">6 px</div></div>
+        <div class="radius-box"><div class="box" style="border-radius:8px;border-color:var(--heat);background:var(--heat-8)"></div><div class="lbl" style="color:var(--heat);font-weight:500">主默认</div><div class="px" style="color:var(--heat)">8 px ★</div></div>
+        <div class="radius-box"><div class="box" style="border-radius:999px;width:160px;height:48px"><span class="mono">pill</span></div><div class="lbl">pill / dot</div><div class="px">999 px</div></div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §4 ICONS                                     -->
+    <!-- =========================================== -->
+    <section id="icons">
+      <div class="section-head">
+        <span class="mono-tag">// §4 · ICONS</span>
+        <h2>Icon 系统</h2>
+        <p>统一 SVG line icon · stroke 1.5 · linecap round · 颜色通过 <code class="mono" style="background:var(--bg-soft);padding:1px 6px;border-radius:4px">currentColor</code> 继承。禁用 emoji / filled icon。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>尺寸阶梯 <span class="mono-num">// 5 档</span></h3>
+        <div class="icon-row">
+          <div class="icon-cell">
+            <div class="ic" style="width:32px;height:32px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></div>
+            <div class="lbl">S · 14 px</div>
+          </div>
+          <div class="icon-cell">
+            <div class="ic" style="width:36px;height:36px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></div>
+            <div class="lbl">M · 16 px ★</div>
+          </div>
+          <div class="icon-cell">
+            <div class="ic" style="width:40px;height:40px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></div>
+            <div class="lbl">L · 20 px</div>
+          </div>
+          <div class="icon-cell">
+            <div class="ic" style="width:48px;height:48px"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></div>
+            <div class="lbl">XL · 24 px</div>
+          </div>
+          <div class="icon-cell">
+            <div class="ic" style="width:64px;height:64px"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></div>
+            <div class="lbl">Hero · 36 px</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>颜色场景 <span class="mono-num">// 通过 currentColor 继承</span></h3>
+        <div class="icon-color-row">
+          <div class="demo">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ink-alpha-56)"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span>默认 ink-56</span>
+          </div>
+          <div class="demo" style="background:var(--ink-alpha-4);color:var(--ink)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span>hover · ink</span>
+          </div>
+          <div class="demo" style="color:var(--heat);background:var(--heat-12);border-color:var(--heat-20)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span>active · heat</span>
+          </div>
+          <div class="demo primary">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            <span>在主 CTA 内</span>
+          </div>
+          <div class="demo disabled">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span>disabled</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>Icon Box <span class="mono-num">// 快捷入口/Modal 头部用</span></h3>
+        <div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap">
+          <div class="icon-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></div>
+          <div class="icon-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 9 6 6m0-6-6 6"/></svg></div>
+          <div class="icon-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg></div>
+          <span class="mono">32×32 · 8 px 圆角 · --heat-12 底 · 16 px line icon</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §5 BUTTONS                                   -->
+    <!-- =========================================== -->
+    <section id="buttons">
+      <div class="section-head">
+        <span class="mono-tag">// §5 · BUTTONS</span>
+        <h2>按钮 · 3 类型 × 5 状态 × 3 尺寸</h2>
+        <p>所有按钮:<strong style="color:var(--ink)">高 32 / 圆角 8 / 字号 13 / 字重 500</strong>。默认按钮用 <code class="mono" style="background:var(--bg-soft);padding:1px 6px;border-radius:4px">::before inside-border</code>,hover 时边框淡出底色淡入,无布局抖动。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>类型 1 · 默认 <span class="mono-num">// .btn</span></h3>
+        <div class="btn-row"><span class="state-label">// default</span><button class="btn">取消</button><button class="btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>导出</button></div>
+        <div class="btn-row"><span class="state-label">// hover</span><button class="btn demo-hover">取消</button></div>
+        <div class="btn-row"><span class="state-label">// active</span><button class="btn demo-active">取消</button></div>
+        <div class="btn-row"><span class="state-label">// focused</span><button class="btn demo-focus">取消</button></div>
+        <div class="btn-row"><span class="state-label">// disabled</span><button class="btn" disabled>取消</button></div>
+      </div>
+
+      <div class="subsection">
+        <h3>类型 2 · 主 CTA <span class="mono-num">// .btn-primary</span></h3>
+        <p class="lead">唯一允许阴影的按钮 —— 4 层橙色多重阴影,hover 时阴影向上抬起。</p>
+        <div class="btn-row"><span class="state-label">// default</span><button class="btn btn-primary">查看 Demo</button><button class="btn btn-primary">下一步<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button></div>
+        <div class="btn-row"><span class="state-label">// hover</span><button class="btn btn-primary demo-hover">查看 Demo</button></div>
+        <div class="btn-row"><span class="state-label">// active</span><button class="btn btn-primary demo-active">查看 Demo</button></div>
+        <div class="btn-row"><span class="state-label">// focused</span><button class="btn btn-primary demo-focus">查看 Demo</button></div>
+        <div class="btn-row"><span class="state-label">// disabled</span><button class="btn btn-primary" disabled>查看 Demo</button></div>
+      </div>
+
+      <div class="subsection">
+        <h3>类型 3 · 无框 <span class="mono-num">// .btn-ghost</span></h3>
+        <div class="btn-row"><span class="state-label">// default</span><button class="btn btn-ghost">取消</button><button class="btn btn-ghost">了解更多 →</button></div>
+        <div class="btn-row"><span class="state-label">// hover</span><button class="btn btn-ghost demo-hover">取消</button></div>
+        <div class="btn-row"><span class="state-label">// active</span><button class="btn btn-ghost demo-active">取消</button></div>
+        <div class="btn-row"><span class="state-label">// disabled</span><button class="btn btn-ghost" disabled>取消</button></div>
+      </div>
+
+      <div class="subsection">
+        <h3>尺寸 <span class="mono-num">// -sm / 默认 / -lg</span></h3>
+        <div class="btn-row">
+          <button class="btn btn-sm">Small · 28h</button>
+          <button class="btn">Default · 32h</button>
+          <button class="btn btn-lg">Large · 40h</button>
+        </div>
+        <div class="btn-row" style="margin-top:12px">
+          <button class="btn btn-primary btn-sm">Small</button>
+          <button class="btn btn-primary">Default</button>
+          <button class="btn btn-primary btn-lg">Large</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §6 PILLS                                     -->
+    <!-- =========================================== -->
+    <section id="pills">
+      <div class="section-head">
+        <span class="mono-tag">// §6 · PILLS</span>
+        <h2>胶囊 · 严格 3 级分层</h2>
+        <p><strong style="color:var(--ink)">同级别尺寸必须完全一致。</strong>不允许混用。pill 永远是 <code class="mono" style="background:var(--bg-soft);padding:1px 6px;border-radius:4px">999 px</code>(完全圆),靠 dot 体现状态。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>L1 · 大胶囊 <span class="mono-num">// h:28 / fs:13 / dot:8</span></h3>
+        <p class="lead">用于项目状态、列表行主标签。</p>
+        <div class="pill-row">
+          <span class="pill pill-l1 pill-info"><span class="dot"></span>生成中</span>
+          <span class="pill pill-l1 pill-ok"><span class="dot"></span>已完成</span>
+          <span class="pill pill-l1 pill-err"><span class="dot"></span>失败</span>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>L2 · 中胶囊 <span class="mono-num">// h:22 / fs:11.5 / dot:6 ★ 默认</span></h3>
+        <p class="lead">最常用尺寸。卡片内 / 表格内默认。</p>
+        <div class="pill-row">
+          <span class="pill pill-l2 pill-info"><span class="dot"></span>生成中</span>
+          <span class="pill pill-l2 pill-ok"><span class="dot"></span>200 OK</span>
+          <span class="pill pill-l2 pill-err"><span class="dot"></span>超时</span>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>L3 · 小胶囊 <span class="mono-num">// h:18 / fs:10.5 / dot:5</span></h3>
+        <p class="lead">KPI 角标 / 行内 Mono 标签场景。</p>
+        <div class="pill-row">
+          <span class="pill pill-l3 pill-info"><span class="dot"></span>NEW</span>
+          <span class="pill pill-l3 pill-ok"><span class="dot"></span>+33%</span>
+          <span class="pill pill-l3 pill-err"><span class="dot"></span>-1.2%</span>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>对比展示 <span class="mono-num">// 同色 3 级并列看大小差距</span></h3>
+        <div class="card" style="display:flex;gap:14px;align-items:center;flex-wrap:wrap">
+          <span class="pill pill-l1 pill-info"><span class="dot"></span>L1 · 生成中</span>
+          <span class="pill pill-l2 pill-info"><span class="dot"></span>L2 · 生成中</span>
+          <span class="pill pill-l3 pill-info"><span class="dot"></span>L3 · 生成中</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §7 INPUTS                                    -->
+    <!-- =========================================== -->
+    <section id="inputs">
+      <div class="section-head">
+        <span class="mono-tag">// §7 · INPUTS</span>
+        <h2>输入框 · 5 状态</h2>
+        <p>同样用 inside-border。focused 时橙色 ring 2 px,error 时红色边框 + 红色软底。点击下方各字段可看到真实 focus 反馈。</p>
+      </div>
+
+      <div class="subsection">
+        <div class="field-row"><span class="lbl">// default</span><div class="input-wrap"><input class="input" placeholder="搜索商品 / 项目..."/></div></div>
+        <div class="field-row"><span class="lbl">// hover</span><div class="input-wrap" style="--hover:1" onmouseenter="this.classList.add('is-hover-demo')" onmouseleave="this.classList.remove('is-hover-demo')"><input class="input" placeholder="hover 我看效果"/></div></div>
+        <div class="field-row"><span class="lbl">// focused</span><div class="input-wrap is-focus"><input class="input" value="已聚焦"/></div></div>
+        <div class="field-row"><span class="lbl">// error</span><div class="input-wrap is-error"><input class="input" value="invalid@example"/></div></div>
+        <div class="field-row"><span class="lbl">// disabled</span><div class="input-wrap is-disabled"><input class="input" placeholder="不可编辑" disabled/></div></div>
+      </div>
+
+      <div class="subsection">
+        <h3>带图标 / 搜索 <span class="mono-num">// 含 Ctrl+K 提示</span></h3>
+        <div class="search-wrap input-wrap">
+          <svg class="ic-left" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input class="input" placeholder="搜索任意内容..."/>
+          <span class="k">Ctrl K</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §8 FORM CONTROLS                             -->
+    <!-- =========================================== -->
+    <section id="form-controls">
+      <div class="section-head">
+        <span class="mono-tag">// §8 · FORM CONTROLS</span>
+        <h2>表单控件</h2>
+        <p>Checkbox / Radio / Switch 全部可点击。disabled 状态也可演示。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>Checkbox</h3>
+        <div class="ck-row">
+          <label class="ck"><input type="checkbox"/><span class="ck-box"></span>未选中</label>
+          <label class="ck"><input type="checkbox" checked/><span class="ck-box"></span>已选中</label>
+          <label class="ck is-indeterminate"><input type="checkbox"/><span class="ck-box"></span>半选中</label>
+          <label class="ck is-disabled"><input type="checkbox" disabled/><span class="ck-box"></span>Disabled</label>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>Radio</h3>
+        <div class="ck-row">
+          <label class="rd"><input type="radio" name="rdemo"/><span class="rd-box"></span>选项 A</label>
+          <label class="rd"><input type="radio" name="rdemo" checked/><span class="rd-box"></span>选项 B(已选)</label>
+          <label class="rd"><input type="radio" name="rdemo"/><span class="rd-box"></span>选项 C</label>
+          <label class="rd" style="opacity:.5;cursor:not-allowed"><input type="radio" disabled/><span class="rd-box"></span>Disabled</label>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>Switch</h3>
+        <div class="ck-row">
+          <label class="sw"><input type="checkbox"/><span class="sw-box"></span>关</label>
+          <label class="sw"><input type="checkbox" checked/><span class="sw-box"></span>开</label>
+          <label class="sw is-disabled"><input type="checkbox" disabled/><span class="sw-box"></span>Disabled</label>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §9 TABS                                      -->
+    <!-- =========================================== -->
+    <section id="tabs">
+      <div class="section-head">
+        <span class="mono-tag">// §9 · TABS</span>
+        <h2>Tab · 双层结构</h2>
+        <p>主 Tab 在区块顶部,带橙色下划线指示;副 Tab 用于过滤,带灰度→彩色 icon 反馈。点击切换。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>主 Tab</h3>
+        <div class="tabs" data-tabs>
+          <button class="tab is-active" data-tab="all">全部</button>
+          <button class="tab" data-tab="img">商品图</button>
+          <button class="tab" data-tab="vid">短视频</button>
+          <button class="tab" data-tab="ad">投放素材</button>
+        </div>
+        <div class="card">当前显示:<span data-tab-content style="color:var(--heat)">全部</span></div>
+      </div>
+
+      <div class="subsection">
+        <h3>副 Tab · 灰度→彩色</h3>
+        <div class="subtabs" data-subtabs>
+          <button class="subtab is-active"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>Search</button>
+          <div class="subtab-divider"></div>
+          <button class="subtab"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>Scrape</button>
+          <div class="subtab-divider"></div>
+          <button class="subtab"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Parse</button>
+          <div class="subtab-divider"></div>
+          <button class="subtab"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6"/></svg>Map</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §10 CARDS / SHORTCUT                         -->
+    <!-- =========================================== -->
+    <section id="cards">
+      <div class="section-head">
+        <span class="mono-tag">// §10 · CARDS</span>
+        <h2>卡片 / 快捷入口</h2>
+        <p>所有卡片统一 8 px 圆角、1 px 边框、无阴影。快捷入口含 hover / active 状态。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>快捷入口 <span class="mono-num">// hover 我</span></h3>
+        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px">
+          <a class="shortcut" href="#">
+            <div class="icon-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></div>
+            <div class="meta"><div class="title">新建商品</div><div class="desc">// AI 生成 / 上传图</div></div>
+          </a>
+          <a class="shortcut" href="#">
+            <div class="icon-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="m10 9 5 3-5 3z" fill="currentColor"/></svg></div>
+            <div class="meta"><div class="title">短视频工坊</div><div class="desc">// 9:16 · MP4</div></div>
+          </a>
+          <a class="shortcut" href="#">
+            <div class="icon-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+            <div class="meta"><div class="title">投放话术库</div><div class="desc">// /v2 · 模板</div></div>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §11 KPI STATS                                -->
+    <!-- =========================================== -->
+    <section id="stats">
+      <div class="section-head">
+        <span class="mono-tag">// §11 · KPI</span>
+        <h2>统计行 · 4 格 stats</h2>
+      </div>
+
+      <div class="stats">
+        <div class="cell">
+          <div class="lbl-row"><span class="lbl">本月营收</span><span class="pill pill-l3 pill-ok"><span class="dot"></span>+33%</span></div>
+          <div class="num">¥327<small>.40 K</small></div>
+          <div class="delta"><span class="up">↑ 较上月 +33%</span></div>
+        </div>
+        <div class="cell">
+          <div class="lbl-row"><span class="lbl">活跃项目</span></div>
+          <div class="num">12</div>
+          <div class="delta">↑ 本月 +3</div>
+        </div>
+        <div class="cell">
+          <div class="lbl-row"><span class="lbl">生成中</span><span class="pill pill-l3 pill-info"><span class="dot"></span>RUNNING</span></div>
+          <div class="num">5</div>
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="now"></span><span></span><span></span></div>
+        </div>
+        <div class="cell">
+          <div class="lbl-row"><span class="lbl">资产总数</span></div>
+          <div class="num">847</div>
+          <div class="delta">·MP4·JPG·PNG</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §12 LIST ROW                                 -->
+    <!-- =========================================== -->
+    <section id="list">
+      <div class="section-head">
+        <span class="mono-tag">// §12 · LIST</span>
+        <h2>列表行</h2>
+        <p>hover 我看整行底色变化。</p>
+      </div>
+
+      <div class="list-card">
+        <div class="list-row">
+          <div class="thumb">9:16</div>
+          <div class="meta"><div class="ti">夏季新款蕾丝连衣裙</div><div class="sub">// 创建于 05.14 · 蓝色 / M</div></div>
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="now"></span><span></span></div>
+          <span class="pill pill-l2 pill-info"><span class="dot"></span>生成中</span>
+          <button class="btn btn-sm">查看</button>
+        </div>
+        <div class="list-row">
+          <div class="thumb">4:5</div>
+          <div class="meta"><div class="ti">秋季风衣 · 卡其色</div><div class="sub">// 创建于 05.12 · M / L</div></div>
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+          <span class="pill pill-l2 pill-ok"><span class="dot"></span>已完成</span>
+          <button class="btn btn-sm">导出</button>
+        </div>
+        <div class="list-row">
+          <div class="thumb">1:1</div>
+          <div class="meta"><div class="ti">运动 T 恤 · 黑白款</div><div class="sub">// 创建于 05.10 · 全色系</div></div>
+          <div class="prog"><span class="done"></span><span class="err"></span><span></span><span></span><span></span></div>
+          <span class="pill pill-l2 pill-err"><span class="dot"></span>生成失败</span>
+          <button class="btn btn-sm">重试</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §13 TIP / PROGRESS                           -->
+    <!-- =========================================== -->
+    <section id="tip">
+      <div class="section-head">
+        <span class="mono-tag">// §13 · TIP</span>
+        <h2>提示框 / 进度</h2>
+      </div>
+
+      <div class="subsection">
+        <div class="tip" style="max-width:560px">
+          <div class="head">小提示</div>
+          <div class="body">使用 <span class="mono-code">Ctrl+K</span> 快速搜索任意项目、商品或资产。Tab 切换不同维度,Enter 直达。</div>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>进度条段位 <span class="mono-num">// 5 段 · 流水线专用</span></h3>
+        <div style="display:flex;gap:24px;flex-wrap:wrap">
+          <div><div class="prog"><span></span><span></span><span></span><span></span><span></span></div><div class="mono" style="margin-top:6px">未开始</div></div>
+          <div><div class="prog"><span class="done"></span><span class="done"></span><span class="now"></span><span></span><span></span></div><div class="mono" style="margin-top:6px">进行中(2/5)</div></div>
+          <div><div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div><div class="mono" style="margin-top:6px">已完成</div></div>
+          <div><div class="prog"><span class="done"></span><span class="err"></span><span></span><span></span><span></span></div><div class="mono" style="margin-top:6px">失败</div></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §14 MODAL                                    -->
+    <!-- =========================================== -->
+    <section id="modal">
+      <div class="section-head">
+        <span class="mono-tag">// §14 · MODAL</span>
+        <h2>弹窗 Modal</h2>
+        <p>点击下方按钮打开。ESC / 点击遮罩关闭。带 4 角 SVG 准星 + 8 px 圆角 + 半透明遮罩 + 弹性入场。</p>
+      </div>
+
+      <button class="btn btn-primary" id="open-modal">打开 Modal Demo</button>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §15 TOAST                                    -->
+    <!-- =========================================== -->
+    <section id="toast">
+      <div class="section-head">
+        <span class="mono-tag">// §15 · TOAST</span>
+        <h2>Toast 通知</h2>
+        <p>右下角浮出。300ms 弹性入场,2400ms 自动消失。</p>
+      </div>
+
+      <div style="display:flex;gap:10px;flex-wrap:wrap">
+        <button class="btn" data-toast='{"ti":"项目已保存","sub":"// 200 OK · /projects/12"}'>触发默认 Toast</button>
+        <button class="btn btn-primary" data-toast='{"ti":"商品生成完成","sub":"// 4 张待审核 · 02:34"}'>主 CTA Toast</button>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §16 CONTAINER                                -->
+    <!-- =========================================== -->
+    <section id="container">
+      <div class="section-head">
+        <span class="mono-tag">// §16 · SIGNATURE</span>
+        <h2>主容器装订线</h2>
+        <p>整个工作区被左右两条 1 px 边线包夹,四角放圆弧内凹的 SVG 准星。这是流·Studio 视觉的"图纸"签名。Modal 内不必加。</p>
+      </div>
+
+      <div class="container-demo">
+        <svg class="corner tl" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+        <svg class="corner tr" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+        <svg class="corner bl" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+        <svg class="corner br" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+        <div class="inner">
+          这块容器左右贯穿两条 1 px 边线,四角带圆弧内凹的 SVG 准星<br>
+          <span class="mono">// container-demo · max-width: 720 · border-x only</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §17 MONO DECOR                               -->
+    <!-- =========================================== -->
+    <section id="mono-decor">
+      <div class="section-head">
+        <span class="mono-tag">// §17 · DECOR</span>
+        <h2>Mono 装饰元素 · 品牌签名</h2>
+        <p>方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",Firecrawl 没有,绝对保留。</p>
+      </div>
+
+      <div class="subsection">
+        <h3>方括号标签</h3>
+        <div class="mono-sample-row">
+          <span class="mono-tag-sample">[ 200 OK ]</span>
+          <span class="mono-tag-sample">[ /v2 ]</span>
+          <span class="mono-tag-sample">[ .MP4 · 9:16 ]</span>
+          <span class="mono-tag-sample heat">[ STUDIO ]</span>
+          <span class="mono-tag-sample">[ ALL · 12 ] →</span>
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>注释样式时间戳</h3>
+        <div class="mono" style="font-size:13px">// 05.14 · 周五 · 14:32</div>
+      </div>
+
+      <div class="subsection">
+        <h3>命令路径</h3>
+        <div class="mono" style="font-size:13px;color:var(--ink-alpha-64)">/sidebar collapse · /toast dismiss · /modal open</div>
+      </div>
+
+      <div class="subsection">
+        <h3>ASCII 散点(背景装饰)</h3>
+        <div style="font-family:var(--font-mono);font-size:11px;color:var(--ink-alpha-12);line-height:1.4;letter-spacing:.04em;background:var(--card);border:1px solid var(--border-faint);border-radius:var(--r-md);padding:18px 22px">
+· · &nbsp;+<br>
+·&nbsp; +XX+<br>
+&nbsp;+XXXX·<br>
+&nbsp;&nbsp; +X·
+        </div>
+      </div>
+
+      <div class="subsection">
+        <h3>强调单词上色</h3>
+        <p style="font-size:13.5px;color:var(--ink-alpha-72);max-width:680px;line-height:1.7">
+          本月营收较上月增长 <b style="color:var(--ink)">+33%</b>,有 <b style="color:var(--ink)">5 个项目</b>处于"生成中"状态。其中 <b style="color:var(--ink)">2 个</b>需要重新调整模特模板。
+        </p>
+        <p class="mono" style="margin-top:8px">// 关键名词加深一档(不变橙),橙色只留给 CTA</p>
+      </div>
+    </section>
+
+    <!-- =========================================== -->
+    <!-- §18 DON'T LIST                               -->
+    <!-- =========================================== -->
+    <section id="dont">
+      <div class="section-head">
+        <span class="mono-tag">// §18 · GUARDRAILS</span>
+        <h2>Don't List · 绝对禁止</h2>
+        <p>任何 mockup / 代码 review 时,对照此清单。每一条违反都判错。</p>
+      </div>
+
+      <div class="dodont-grid">
+        <div class="dodont do">
+          <span class="head">DO</span>
+          <div class="body">用 8 px 统一圆角 + 准星 + 装订线 + mono 装饰做"图纸感"</div>
+        </div>
+        <div class="dodont dont">
+          <span class="head">DON'T</span>
+          <div class="body">用 0 px 硬切角的卡片 —— V1 的做法,V2 起判错</div>
+        </div>
+        <div class="dodont do">
+          <span class="head">DO</span>
+          <div class="body">橙色 hover 用 <code class="mono" style="background:var(--card);padding:1px 5px;border-radius:3px;color:var(--heat)">--heat-90</code> 等 alpha 阶梯</div>
+        </div>
+        <div class="dodont dont">
+          <span class="head">DON'T</span>
+          <div class="body">hover 时切换到更深的橙 hex(如 #D04E1F)</div>
+        </div>
+        <div class="dodont do">
+          <span class="head">DO</span>
+          <div class="body">主 CTA 用多层橙色阴影(4 层)制造发光感</div>
+        </div>
+        <div class="dodont dont">
+          <span class="head">DON'T</span>
+          <div class="body">用灰色阴影 / 文字阴影 / 通用 box-shadow 装饰</div>
+        </div>
+      </div>
+
+      <div class="card" style="margin-top:18px;padding:18px 22px">
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">渐变背景</strong> —— 只有 hero 区可考虑,首选纯色。绝禁多色渐变。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">玻璃拟态</strong> —— <code class="mono" style="background:var(--bg-soft);padding:1px 5px;border-radius:3px">backdrop-filter</code> 只用于 modal 遮罩。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">彩色 emoji</strong> —— 所有图标必须 SVG line(stroke 1.5)。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">多 accent 色</strong> —— 全场只有橙色一个 accent。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">大圆角容器</strong>(&gt;12 px)—— 直接判错。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">鲜艳荧光状态色</strong> —— 避免霓虹绿、电光蓝、霓虹粉。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">居中对齐大段正文</strong> —— 全部左对齐。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">装饰当主角</strong> —— 场记板 / 丝绒 / 霓虹灯都不要。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">无意义微动效</strong> —— hover 旋转、缩放、彩虹流光,禁。</span></div>
+        <div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--ink)">同行混用直角+圆角</strong> —— 用户原话:"不要有些是直角,胶囊又是圆角"。</span></div>
+      </div>
+    </section>
+
+  </main>
+</div>
+
+<!-- ===== Modal HTML ===== -->
+<div class="modal-mask" id="modal-mask">
+  <div class="modal" role="dialog">
+    <svg class="corner tl" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+    <svg class="corner tr" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+    <svg class="corner bl" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+    <svg class="corner br" viewBox="0 0 22 21" fill="currentColor"><path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"/></svg>
+    <div class="head">
+      <div class="ic-box"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg></div>
+      <div>
+        <div class="ti">确认删除此商品?</div>
+        <div class="sub">// /products/dlt · IRREVERSIBLE</div>
+      </div>
+    </div>
+    <div class="body">
+      该操作不可撤销。商品「夏季新款蕾丝连衣裙」及其关联的 <b style="color:var(--ink)">4 张候选图</b>、<b style="color:var(--ink)">2 段短视频</b>将一并删除。
+    </div>
+    <div class="foot">
+      <button class="btn" data-close-modal>取消</button>
+      <button class="btn btn-primary">确认删除</button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== Toast container ===== -->
+<div class="toast-stack" id="toast-stack"></div>
+
+<script>
+// ---- Copy hex on click ----
+document.querySelectorAll('[data-copy-grid] .swatch').forEach(sw => {
+  sw.addEventListener('click', () => {
+    const hex = sw.dataset.hex;
+    navigator.clipboard?.writeText(hex);
+    sw.classList.add('copied');
+    setTimeout(() => sw.classList.remove('copied'), 1200);
+  });
+});
+
+// ---- Input wrapper focus state ----
+document.querySelectorAll('.input').forEach(inp => {
+  const wrap = inp.closest('.input-wrap');
+  if (!wrap || wrap.classList.contains('is-focus') || wrap.classList.contains('is-error') || wrap.classList.contains('is-disabled')) return;
+  inp.addEventListener('focus', () => wrap.classList.add('is-focus'));
+  inp.addEventListener('blur', () => wrap.classList.remove('is-focus'));
+});
+
+// ---- Checkbox indeterminate visual toggle on click ----
+document.querySelectorAll('.ck.is-indeterminate input').forEach(cb => {
+  cb.addEventListener('change', e => {
+    e.target.closest('.ck').classList.remove('is-indeterminate');
+  });
+});
+
+// ---- Tabs ----
+document.querySelectorAll('[data-tabs]').forEach(group => {
+  const out = document.querySelector('[data-tab-content]');
+  group.addEventListener('click', e => {
+    const btn = e.target.closest('.tab');
+    if (!btn) return;
+    group.querySelectorAll('.tab').forEach(b => b.classList.remove('is-active'));
+    btn.classList.add('is-active');
+    if (out) out.textContent = btn.textContent;
+  });
+});
+
+// ---- Subtabs ----
+document.querySelectorAll('[data-subtabs]').forEach(group => {
+  group.addEventListener('click', e => {
+    const btn = e.target.closest('.subtab');
+    if (!btn) return;
+    group.querySelectorAll('.subtab').forEach(b => b.classList.remove('is-active'));
+    btn.classList.add('is-active');
+  });
+});
+
+// ---- Modal ----
+const mask = document.getElementById('modal-mask');
+document.getElementById('open-modal').addEventListener('click', () => mask.classList.add('is-open'));
+mask.addEventListener('click', e => {
+  if (e.target === mask || e.target.matches('[data-close-modal]')) mask.classList.remove('is-open');
+});
+document.addEventListener('keydown', e => { if (e.key === 'Escape') mask.classList.remove('is-open') });
+
+// ---- Toast ----
+const stack = document.getElementById('toast-stack');
+document.querySelectorAll('[data-toast]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const data = JSON.parse(btn.dataset.toast);
+    const t = document.createElement('div');
+    t.className = 'toast';
+    t.innerHTML = `
+      <div class="ic-box"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></div>
+      <div><div class="ti">${data.ti}</div><div class="sub">${data.sub}</div></div>
+    `;
+    stack.appendChild(t);
+    setTimeout(() => { t.classList.add('is-leave'); setTimeout(() => t.remove(), 220) }, 2400);
+  });
+});
+
+// ---- Nav active on scroll ----
+const navLinks = document.querySelectorAll('.nav-list a');
+const sections = [...document.querySelectorAll('.main > section')];
+function syncNav() {
+  const y = window.scrollY + 100;
+  let cur = sections[0]?.id;
+  sections.forEach(s => { if (s.offsetTop <= y) cur = s.id });
+  navLinks.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + cur));
+}
+window.addEventListener('scroll', syncNav, {passive:true});
+syncNav();
+</script>
+</body>
+</html>
diff --git a/v2/index.html b/v2/index.html
new file mode 100644
index 0000000..3c3c4fb
--- /dev/null
+++ b/v2/index.html
@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>工作台 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  .dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
+  .recent-row { display: grid; grid-template-columns: 54px 1fr 110px 130px 60px; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-faint); cursor: pointer; }
+  .recent-row .prog, .recent-row .pill, .recent-row .btn { justify-self: start; }
+  .recent-row:last-child { border-bottom: 0; }
+  .recent-row:hover { background: var(--background-lighter); }
+  .recent-row .thumb { width: 54px; height: 70px; border-radius: var(--r-md); }
+  .recent-meta .name { font-weight: 600; font-size: 13.5px; color: var(--accent-black); }
+  .recent-meta .sub { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .01em; }
+  .shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .shortcut { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 16px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: background var(--t-base); }
+  .shortcut:hover { background: var(--black-alpha-4); }
+  .shortcut .ic { width: 32px; height: 32px; background: var(--heat-12); color: var(--heat); display: grid; place-items: center; border-radius: var(--r-md); flex-shrink: 0; }
+  .shortcut .ic svg { width: 16px; height: 16px; }
+  .shortcut .t { font-size: 13px; font-weight: 600; }
+  .shortcut .d { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .01em; }
+  .tip { background: var(--surface); border: 1px dashed var(--border-faint); padding: 14px 16px; font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.6; border-radius: var(--r-md); }
+  .tip strong { color: var(--accent-black); font-weight: 600; display: block; margin-bottom: 4px; }
+  .tip .mono { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 1px 5px; border-radius: var(--r-sm); font-size: 11.5px; }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>欢迎回来，小李</h1>
+    <div class="sub">
+      <span class="mono">// 05.14 · 周三</span>
+      <span>·</span>
+      <span>你有 <b style="color:var(--accent-black)">3 个项目</b> 正在进行中</span>
+    </div>
+  </div>
+  <div class="actions">
+    <a class="btn" href="javascript:void(0)" onclick="event.preventDefault(); window.NewProductDrawer && NewProductDrawer.open();">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+      新建商品
+    </a>
+    <a class="btn btn-primary btn-lg" href="projects-new.html">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+      新建项目
+    </a>
+  </div>
+</div>
+
+<div class="stats with-corners">
+  <span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
+  <a class="stat" href="projects.html">
+    <div class="lbl">总项目 <span class="badge">ALL</span></div>
+    <div class="v">8</div>
+    <div class="delta up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg> 本月 +3</div>
+  </a>
+  <a class="stat" href="projects.html">
+    <div class="lbl">进行中 <span class="badge">WIP</span></div>
+    <div class="v">3</div>
+    <div class="delta">2 个待审核</div>
+  </a>
+  <a class="stat" href="projects.html">
+    <div class="lbl">本月成片 <span class="badge">DONE</span></div>
+    <div class="v">3</div>
+    <div class="delta up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg> 较上月 +33%</div>
+  </a>
+  <a class="stat" href="account.html">
+    <div class="lbl">余额 <span class="badge">¥</span></div>
+    <div class="v">¥327<small>.40</small></div>
+    <div class="bar"><span style="width:33%"></span></div>
+    <div class="sub">已用 ¥162.60 / ¥500</div>
+  </a>
+</div>
+
+<div class="dash-grid">
+  <div>
+    <div class="section-h">
+      <h2>最近项目</h2>
+      <a class="more" href="projects.html">[ ALL · 8 ] <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
+    </div>
+    <div class="card-hard">
+      <a class="recent-row" href="pipeline.html#stage-3">
+        <div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
+        <div class="recent-meta">
+          <div class="name">补水面膜 · 痛点种草</div>
+          <div class="sub">补水面膜 / AI 全生 / 6 镜</div>
+        </div>
+        <div class="prog"><span class="done"></span><span class="done"></span><span class="cur"></span><span></span><span></span></div>
+        <span class="pill info"><span class="dot"></span>故事板 待确认</span>
+        <span class="btn btn-sm">继续</span>
+      </a>
+      <a class="recent-row" href="pipeline.html#stage-5">
+        <div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
+        <div class="recent-meta">
+          <div class="name">蓝牙耳机 · 开箱测评</div>
+          <div class="sub">南卡 Lite Pro / 自带脚本 / 5 镜</div>
+        </div>
+        <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+        <span class="pill ok"><span class="dot"></span>已完成</span>
+        <span class="btn btn-sm">打开</span>
+      </a>
+      <a class="recent-row" href="pipeline.html#stage-2">
+        <div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
+        <div class="recent-meta">
+          <div class="name">速食牛肉面 · 一句话主题</div>
+          <div class="sub">滋啦速食 / 一句话 / 4 镜</div>
+        </div>
+        <div class="prog"><span class="done"></span><span class="cur"></span><span></span><span></span><span></span></div>
+        <span class="pill info"><span class="dot"></span>资产生成中</span>
+        <span class="btn btn-sm">继续</span>
+      </a>
+      <a class="recent-row" href="pipeline.html#stage-4">
+        <div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
+        <div class="recent-meta">
+          <div class="name">防晒霜 · 对比展示</div>
+          <div class="sub">透真防晒 / AI 全生 / 6 镜</div>
+        </div>
+        <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="cur"></span><span></span></div>
+        <span class="pill info"><span class="dot"></span>视频生成 4/6</span>
+        <span class="btn btn-sm">继续</span>
+      </a>
+      <a class="recent-row" href="pipeline.html#stage-3">
+        <div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
+        <div class="recent-meta">
+          <div class="name">咖啡冻干粉 · 剧情带货</div>
+          <div class="sub">三顿半同款 / 一句话 / 5 镜</div>
+        </div>
+        <div class="prog"><span class="done"></span><span class="done"></span><span class="fail"></span><span></span><span></span></div>
+        <span class="pill err"><span class="dot"></span>故事板失败</span>
+        <span class="btn btn-sm">查看</span>
+      </a>
+    </div>
+  </div>
+
+  <div style="display:flex;flex-direction:column;gap:24px">
+    <div>
+      <div class="section-h"><h2>快捷入口</h2><span class="more">[ /shortcuts ]</span></div>
+      <div class="shortcuts">
+        <a class="shortcut" href="products.html">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4"/></svg></div>
+          <div><div class="t">商品库</div><div class="d">7 SKU</div></div>
+        </a>
+        <a class="shortcut" href="library.html">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="6" height="16"/><rect x="11" y="4" width="4" height="16"/><rect x="17" y="6" width="4" height="14"/></svg></div>
+          <div><div class="t">资产库</div><div class="d">人 8 · 景 14 · 片 8</div></div>
+        </a>
+        <a class="shortcut" href="account.html">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></div>
+          <div><div class="t">充值</div><div class="d">¥327.40</div></div>
+        </a>
+        <a class="shortcut" href="projects.html">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg></div>
+          <div><div class="t">所有项目</div><div class="d">8 个</div></div>
+        </a>
+      </div>
+    </div>
+    <div>
+      <div class="section-h"><h2>提示</h2><span class="more">[ FAQ ]</span></div>
+      <div class="tip">
+        <strong>扣费规则</strong>
+        生成失败、超时、用户重跑 — 均不扣费。仅在你点 <span class="mono">[ 确认通过 ]</span> 时按 token 实际结算。
+      </div>
+    </div>
+  </div>
+</div>
+
+</div>
+
+<script src="assets/shell.js"></script>
+<script src="assets/new-product-drawer.js"></script>
+<script>Shell.render({ active: 'dashboard', crumbs: [{ label: '工作台' }] });</script>
+</body>
+</html>
diff --git a/v2/library.html b/v2/library.html
new file mode 100644
index 0000000..5d45c6d
--- /dev/null
+++ b/v2/library.html
@@ -0,0 +1,1805 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>资产库 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
+  .asset-grid.video-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+  /* 修复:.asset-grid 的 display:grid 会盖过 [hidden] 的默认 display:none, 导致切 tab 时其它 tab 的卡片仍可见 */
+  .asset-grid[hidden] { display: none; }
+
+  /* ─── 底部分页 (吸底) ─── */
+  .pagination {
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+    display: flex; align-items: center; gap: 16px;
+    padding: 14px 28px;
+    margin: 20px -28px 0;
+    border-top: 1px solid var(--border-faint);
+    background: var(--background-base);
+    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .08);
+    font-size: 12.5px;
+    color: var(--black-alpha-56);
+  }
+  .pagination[hidden] { display: none; }
+  .pagination .total { font-family: var(--font-mono); letter-spacing: .02em; }
+  .pagination .page-size {
+    display: inline-flex; align-items: center; gap: 4px;
+    height: 30px; padding: 0 10px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-family: inherit; font-size: 12.5px;
+    color: var(--black-alpha-72);
+    transition: border-color var(--t-base), color var(--t-base);
+  }
+  .pagination .page-size:hover { border-color: var(--black-alpha-32); color: var(--accent-black); }
+  .pagination .page-size svg { width: 10px; height: 10px; opacity: .6; }
+  .pagination .pages {
+    display: inline-flex; gap: 4px;
+    margin-left: auto;
+  }
+  .pagination .pages button {
+    min-width: 30px; height: 30px;
+    padding: 0 8px;
+    border: 1px solid var(--border-faint);
+    background: var(--surface);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-size: 12.5px;
+    color: var(--black-alpha-72);
+    font-family: inherit;
+    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+  }
+  .pagination .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); }
+  .pagination .pages button.active {
+    background: var(--heat);
+    color: var(--accent-white);
+    border-color: var(--heat);
+    font-weight: 600;
+  }
+  .pagination .pages button:disabled { opacity: .4; cursor: not-allowed; }
+  .pagination .pages .ellipsis {
+    min-width: 22px; height: 30px;
+    display: inline-flex; align-items: center; justify-content: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono);
+  }
+  .pagination .jump {
+    display: inline-flex; align-items: center; gap: 6px;
+    color: var(--black-alpha-56);
+  }
+  .pagination .jump input {
+    width: 44px; height: 30px;
+    border: 1px solid var(--border-faint);
+    background: var(--surface);
+    border-radius: var(--r-sm);
+    text-align: center;
+    font-size: 12.5px;
+    color: var(--accent-black);
+    font-family: inherit;
+    outline: none;
+    transition: border-color var(--t-base);
+  }
+  .pagination .jump input:focus { border-color: var(--heat-40); }
+  @media (max-width: 1100px) {
+    .pagination { margin: 20px -24px 0; padding: 14px 24px; }
+  }
+  .asset-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s; position: relative; }
+  .asset-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
+  /* 编辑模式 checkbox */
+  .asset-card .card-check {
+    position: absolute; top: 10px; left: 10px;
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    background: var(--surface);
+    border: 2px solid var(--black-alpha-32);
+    display: none;
+    place-items: center;
+    color: var(--accent-white);
+    z-index: 5;
+    pointer-events: none;
+  }
+  .asset-card .card-check svg { width: 11px; height: 11px; opacity: 0; }
+  body.edit-mode .asset-card { cursor: pointer; }
+  body.edit-mode .asset-card .card-check { display: grid; }
+  body.edit-mode .asset-card.selected .card-check {
+    background: var(--heat); border-color: var(--heat);
+  }
+  body.edit-mode .asset-card.selected .card-check svg { opacity: 1; }
+  body.edit-mode .asset-card.selected { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
+  body.edit-mode .asset-card .card-del-btn { opacity: 0 !important; pointer-events: none !important; }
+  /* edit-mode 下「管理资产」按钮变成「完成」 */
+  .btn.active {
+    background: var(--accent-black);
+    color: var(--accent-white);
+    border-color: var(--accent-black);
+  }
+  /* bulk-bar (浮动批量操作栏) */
+  .bulk-bar {
+    position: fixed;
+    bottom: 24px; left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent-black);
+    color: var(--accent-white);
+    border-radius: var(--r-md);
+    padding: 10px 14px 10px 18px;
+    display: none;
+    align-items: center; gap: 16px;
+    box-shadow: 0 8px 24px rgba(0,0,0,.18);
+    z-index: 100;
+    font-size: 13px;
+  }
+  body.edit-mode .bulk-bar { display: inline-flex; }
+  .bulk-bar .ct { font-family: var(--font-mono); letter-spacing: .02em; }
+  .bulk-bar .ct b { color: var(--heat); font-weight: 700; padding: 0 3px; }
+  .bulk-bar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); }
+  .bulk-bar button {
+    height: 30px; padding: 0 12px;
+    background: transparent;
+    border: 1px solid rgba(255,255,255,.24);
+    border-radius: var(--r-sm);
+    color: var(--accent-white);
+    font-size: 12.5px;
+    font-family: inherit;
+    cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px;
+    transition: background var(--t-base);
+  }
+  .bulk-bar button:hover { background: rgba(255,255,255,.08); }
+  .bulk-bar button.danger { background: var(--accent-crimson); border-color: var(--accent-crimson); }
+  .bulk-bar button.danger:hover { filter: brightness(1.06); }
+  .bulk-bar button svg { width: 12px; height: 12px; }
+  .bulk-bar .clear-sel { color: rgba(255,255,255,.6); font-size: 12px; cursor: pointer; background: none; border: 0; padding: 4px 6px; }
+  .bulk-bar .clear-sel:hover { color: var(--accent-white); }
+  .asset-thumb { aspect-ratio: 1; }
+  .asset-card.video .asset-thumb { aspect-ratio: 9/16; max-height: 280px; }
+  .asset-body { padding: 12px 14px; }
+  .asset-name { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  .asset-meta { font-size: 11px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .asset-badge { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-56); }
+  .asset-card .placeholder { position: relative; }
+
+  /* ─── Upload modal ─── */
+  .upload-modal {
+    max-width: 520px; width: 92%;
+    max-height: calc(100vh - 80px);
+    display: flex; flex-direction: column;
+  }
+  .upload-modal .modal-h {
+    position: relative;
+    flex-shrink: 0;
+  }
+  .upload-modal .modal-h .ti { flex: 1; min-width: 0; }
+  .upload-modal .modal-h .modal-x {
+    width: 32px; height: 32px; border-radius: var(--r-md);
+    display: grid; place-items: center;
+    color: var(--black-alpha-56); cursor: pointer;
+    background: transparent; border: 0; padding: 0;
+    flex-shrink: 0;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .upload-modal .modal-h .modal-x:hover { background: var(--black-alpha-4); color: var(--accent-crimson); }
+  .upload-modal .modal-h .modal-x svg { width: 14px; height: 14px; }
+  .upload-modal .modal-b {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    padding: 20px 24px;
+  }
+  .upload-modal .modal-f { flex-shrink: 0; }
+  .upload-modal .field { margin-bottom: 16px; }
+  .upload-modal .field:last-child { margin-bottom: 0; }
+  /* 修复:.field 的 display:flex 会盖过 [hidden] 的默认 display:none */
+  .upload-modal .modal-b .field[hidden] { display: none; }
+  .upload-modal .upload-zone {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 8px; padding: 24px; cursor: pointer;
+    border: 1px dashed var(--border-faint); border-radius: var(--r-md);
+    background: var(--background-lighter); color: var(--black-alpha-56);
+    font-size: 13px; transition: border-color .15s, background .15s, color .15s;
+  }
+  .upload-modal .upload-zone:hover { border-color: var(--heat); background: var(--heat-8); color: var(--heat); }
+  .upload-modal .upload-zone:hover .uz-ic { background: var(--heat); color: #fff; border-color: var(--heat); }
+  .upload-modal .upload-zone .uz-ic {
+    width: 40px; height: 40px; border-radius: var(--r-md);
+    border: 1px solid var(--border-faint); background: var(--surface);
+    display: grid; place-items: center; color: var(--black-alpha-56);
+    transition: background .15s, color .15s, border-color .15s;
+  }
+  .upload-modal .upload-zone .uz-ic svg { width: 18px; height: 18px; }
+  .upload-modal .upload-zone .uz-hint { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .upload-modal .upload-preview {
+    position: relative;
+    width: calc((100% - 32px) / 5);
+    min-width: 80px; max-width: 110px;
+    aspect-ratio: 1; border-radius: var(--r-md);
+    overflow: hidden; border: 1px solid var(--border-faint); background: var(--background-lighter);
+  }
+  .upload-modal .upload-preview.video { aspect-ratio: 9/16; max-height: none; min-width: 80px; max-width: 110px; margin: 0; }
+  .upload-modal .upload-preview img,
+  .upload-modal .upload-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .upload-modal .upload-preview .preview-x {
+    position: absolute; top: 8px; right: 8px;
+    width: 24px; height: 24px; border-radius: 999px;
+    background: rgba(21, 20, 15, .7); color: #fff;
+    display: grid; place-items: center; cursor: pointer; border: 0;
+    transition: background .15s, transform .15s;
+  }
+  .upload-modal .upload-preview .preview-x:hover { background: var(--accent-crimson); transform: scale(1.08); }
+  .upload-modal .upload-preview .preview-x svg { width: 12px; height: 12px; }
+  .upload-modal .modal-f { align-items: center; }
+  .upload-modal .modal-f .modal-meta {
+    flex: 1; font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .upload-modal .modal-f .modal-meta .accent { color: var(--heat); font-weight: 600; }
+  .upload-modal .btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>资产库</h1>
+    <div class="sub"><span class="mono">// 跨项目复用 · <span id="sub-people">0</span> 人 · <span id="sub-scenes">0</span> 景 · <span id="sub-products">0</span> 商 · <span id="sub-finals">0</span> 片</span></div>
+  </div>
+  <div class="actions">
+    <button class="btn" type="button" id="lib-manage-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
+      <span class="lib-manage-label">管理资产</span>
+    </button>
+    <button class="btn btn-primary" id="open-upload-btn" type="button">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+      上传资产
+    </button>
+  </div>
+</div>
+
+<div class="tabs" id="asset-tabs">
+  <div class="tab active" data-tab="people">人物 <span class="count">0</span></div>
+  <div class="tab" data-tab="scenes">场景 <span class="count">0</span></div>
+  <div class="tab" data-tab="products">商品图 <span class="count">0</span></div>
+  <div class="tab" data-tab="finals">成片 <span class="count">0</span></div>
+  <div class="tab" data-tab="uploads">我的上传 <span class="count">0</span></div>
+</div>
+
+<div class="toolbar">
+  <div class="search-inline">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+    <input class="input" id="search-input" placeholder="搜索资产名称、标签">
+  </div>
+
+  <!-- ── 人物 tab 专属 ── -->
+  <div class="chip-wrap" data-key="gender" data-tabs="people">
+    <button class="chip" type="button"><span class="chip-label">性别</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <div class="chip-wrap" data-key="age" data-tabs="people">
+    <button class="chip" type="button"><span class="chip-label">年龄段</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <div class="chip-wrap" data-key="role" data-tabs="people">
+    <button class="chip" type="button"><span class="chip-label">角色标签</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+
+  <!-- ── 场景 tab 专属 ── -->
+  <div class="chip-wrap" data-key="sceneType" data-tabs="scenes">
+    <button class="chip" type="button"><span class="chip-label">场景类型</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+
+  <!-- ── 商品图 tab 专属 ── -->
+  <div class="chip-wrap" data-key="product" data-tabs="products">
+    <button class="chip" type="button"><span class="chip-label">关联商品</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+
+  <!-- ── 成片 tab 专属 ── -->
+  <div class="chip-wrap" data-key="project" data-tabs="finals">
+    <button class="chip" type="button"><span class="chip-label">关联项目</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <div class="chip-wrap" data-key="duration" data-tabs="finals">
+    <button class="chip" type="button"><span class="chip-label">时长</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+
+  <!-- ── 我的上传 tab 专属 ── -->
+  <div class="chip-wrap" data-key="kind" data-tabs="uploads">
+    <button class="chip" type="button"><span class="chip-label">资产类型</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+
+  <!-- ── 共用(人物 / 场景 / 商品图 / 我的上传)── -->
+  <div class="chip-wrap" data-key="source" data-tabs="people scenes products uploads">
+    <button class="chip" type="button"><span class="chip-label">来源</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+
+  <button class="clear-filters" id="clear-filters" type="button" hidden>
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+    清空筛选
+  </button>
+  <span class="spacer"></span>
+
+  <!-- ── 排序(所有 tab 共用)── -->
+  <div class="chip-wrap" data-key="sort" data-tabs="all">
+    <button class="chip" type="button"><span class="chip-label">最近使用</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu align-right"></div>
+  </div>
+</div>
+
+<div class="result-meta" id="result-meta">// 显示 <span class="count">0</span> / 0 个资产</div>
+
+<!-- ============ 人物 (8) ============ -->
+<div class="asset-grid" data-tab="people" id="grid-people">
+  <div class="asset-card" data-name="林夕" data-gender="女" data-age="青年" data-role="都市白领" data-source="AI 生成" data-used="4" data-added="20260513" onclick="Shell.toast('查看资产', '林夕')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">林夕 · 都市白领</span></div>
+    <div class="asset-body">
+      <div class="asset-name">林夕</div>
+      <div class="asset-meta">女 · 青年 · 都市白领 · 用过 4 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="阿楠" data-gender="女" data-age="青年" data-role="都市白领" data-source="AI 生成" data-used="2" data-added="20260507" onclick="Shell.toast('查看资产', '阿楠')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">阿楠 · 同事女</span></div>
+    <div class="asset-body">
+      <div class="asset-name">阿楠</div>
+      <div class="asset-meta">女 · 青年 · 都市白领 · 用过 2 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="小七" data-gender="女" data-age="青年" data-role="学生" data-source="AI 生成" data-used="3" data-added="20260512" onclick="Shell.toast('查看资产', '小七')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">小七 · 学生女</span></div>
+    <div class="asset-body">
+      <div class="asset-name">小七</div>
+      <div class="asset-meta">女 · 青年 · 学生 · 用过 3 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="阿杰" data-gender="男" data-age="青年" data-role="都市白领" data-source="AI 生成" data-used="2" data-added="20260428" onclick="Shell.toast('查看资产', '阿杰')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">阿杰 · 通勤男</span></div>
+    <div class="asset-body">
+      <div class="asset-name">阿杰</div>
+      <div class="asset-meta">男 · 青年 · 都市白领 · 用过 2 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="妈妈 · 王姐" data-gender="女" data-age="中年" data-role="居家" data-source="手动上传" data-used="1" data-added="20260415" onclick="Shell.toast('查看资产', '王姐')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">妈妈 · 居家</span></div>
+    <div class="asset-body">
+      <div class="asset-name">妈妈 · 王姐</div>
+      <div class="asset-meta">女 · 中年 · 居家 · 用过 1 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="阿强" data-gender="男" data-age="青年" data-role="健身" data-source="AI 生成" data-used="2" data-added="20260508" onclick="Shell.toast('查看资产', '阿强')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">阿强 · 健身男</span></div>
+    <div class="asset-body">
+      <div class="asset-name">阿强</div>
+      <div class="asset-meta">男 · 青年 · 健身 · 用过 2 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="小苏" data-gender="女" data-age="青年" data-role="文艺" data-source="AI 生成" data-used="1" data-added="20260420" onclick="Shell.toast('查看资产', '小苏')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">小苏 · 文艺女</span></div>
+    <div class="asset-body">
+      <div class="asset-name">小苏</div>
+      <div class="asset-meta">女 · 青年 · 文艺 · 用过 1 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="闺蜜组合" data-gender="女" data-age="青年" data-role="都市白领" data-source="AI 生成" data-used="1" data-added="20260511" onclick="Shell.toast('查看资产', '闺蜜组合')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">闺蜜组合 · 双人</span></div>
+    <div class="asset-body">
+      <div class="asset-name">闺蜜组合</div>
+      <div class="asset-meta">女 · 青年 · 都市白领 · 用过 1 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="豆豆" data-gender="女" data-age="幼年" data-role="居家" data-source="AI 生成" data-used="2" data-added="20260509" onclick="Shell.toast('查看资产', '豆豆')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">豆豆 · 幼儿</span></div>
+    <div class="asset-body">
+      <div class="asset-name">豆豆</div>
+      <div class="asset-meta">女 · 幼年 · 居家 · 用过 2 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="小宇" data-gender="男" data-age="少年" data-role="学生" data-source="AI 生成" data-used="1" data-added="20260502" onclick="Shell.toast('查看资产', '小宇')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">小宇 · 中学生</span></div>
+    <div class="asset-body">
+      <div class="asset-name">小宇</div>
+      <div class="asset-meta">男 · 少年 · 学生 · 用过 1 次</div>
+    </div>
+  </div>
+  <div class="asset-card" data-name="李爷爷" data-gender="男" data-age="老年" data-role="居家" data-source="手动上传" data-used="1" data-added="20260418" onclick="Shell.toast('查看资产', '李爷爷')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">李爷爷 · 居家</span></div>
+    <div class="asset-body">
+      <div class="asset-name">李爷爷</div>
+      <div class="asset-meta">男 · 老年 · 居家 · 用过 1 次</div>
+    </div>
+  </div>
+</div>
+
+<!-- ============ 场景 (12) ============ -->
+<div class="asset-grid" data-tab="scenes" id="grid-scenes" hidden>
+  <div class="asset-card" data-name="卧室·暖光" data-scene-type="卧室" data-source="AI 生成" data-used="6" data-added="20260513" onclick="Shell.toast('查看资产', '卧室·暖光')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">卧室 · 暖光</span></div>
+    <div class="asset-body"><div class="asset-name">卧室·暖光</div><div class="asset-meta">卧室 · AI 生成 · 用过 6 次</div></div>
+  </div>
+  <div class="asset-card" data-name="卧室·冷调" data-scene-type="卧室" data-source="AI 生成" data-used="3" data-added="20260507" onclick="Shell.toast('查看资产', '卧室·冷调')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">卧室 · 冷调</span></div>
+    <div class="asset-body"><div class="asset-name">卧室·冷调</div><div class="asset-meta">卧室 · AI 生成 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="浴室·梳妆台" data-scene-type="浴室" data-source="AI 生成" data-used="4" data-added="20260510" onclick="Shell.toast('查看资产', '浴室·梳妆台')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">浴室 · 梳妆台</span></div>
+    <div class="asset-body"><div class="asset-name">浴室·梳妆台</div><div class="asset-meta">浴室 · AI 生成 · 用过 4 次</div></div>
+  </div>
+  <div class="asset-card" data-name="客厅·北欧" data-scene-type="客厅" data-source="AI 生成" data-used="5" data-added="20260512" onclick="Shell.toast('查看资产', '客厅·北欧')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">客厅 · 北欧</span></div>
+    <div class="asset-body"><div class="asset-name">客厅·北欧</div><div class="asset-meta">客厅 · AI 生成 · 用过 5 次</div></div>
+  </div>
+  <div class="asset-card" data-name="客厅·中古" data-scene-type="客厅" data-source="手动上传" data-used="1" data-added="20260418" onclick="Shell.toast('查看资产', '客厅·中古')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">客厅 · 中古</span></div>
+    <div class="asset-body"><div class="asset-name">客厅·中古</div><div class="asset-meta">客厅 · 手动上传 · 用过 1 次</div></div>
+  </div>
+  <div class="asset-card" data-name="厨房·中岛" data-scene-type="厨房" data-source="AI 生成" data-used="3" data-added="20260509" onclick="Shell.toast('查看资产', '厨房·中岛')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">厨房 · 中岛</span></div>
+    <div class="asset-body"><div class="asset-name">厨房·中岛</div><div class="asset-meta">厨房 · AI 生成 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="办公室·开放" data-scene-type="办公室" data-source="AI 生成" data-used="2" data-added="20260506" onclick="Shell.toast('查看资产', '办公室·开放')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">办公室 · 开放</span></div>
+    <div class="asset-body"><div class="asset-name">办公室·开放</div><div class="asset-meta">办公室 · AI 生成 · 用过 2 次</div></div>
+  </div>
+  <div class="asset-card" data-name="办公室·会议室" data-scene-type="办公室" data-source="AI 生成" data-used="1" data-added="20260425" onclick="Shell.toast('查看资产', '办公室·会议室')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">办公室 · 会议室</span></div>
+    <div class="asset-body"><div class="asset-name">办公室·会议室</div><div class="asset-meta">办公室 · AI 生成 · 用过 1 次</div></div>
+  </div>
+  <div class="asset-card" data-name="咖啡店·窗边" data-scene-type="咖啡店" data-source="AI 生成" data-used="4" data-added="20260511" onclick="Shell.toast('查看资产', '咖啡店·窗边')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">咖啡店 · 窗边</span></div>
+    <div class="asset-body"><div class="asset-name">咖啡店·窗边</div><div class="asset-meta">咖啡店 · AI 生成 · 用过 4 次</div></div>
+  </div>
+  <div class="asset-card" data-name="街景·夜" data-scene-type="街景" data-source="AI 生成" data-used="2" data-added="20260430" onclick="Shell.toast('查看资产', '街景·夜')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">街景 · 夜</span></div>
+    <div class="asset-body"><div class="asset-name">街景·夜</div><div class="asset-meta">街景 · AI 生成 · 用过 2 次</div></div>
+  </div>
+  <div class="asset-card" data-name="健身房·器械" data-scene-type="健身房" data-source="AI 生成" data-used="3" data-added="20260508" onclick="Shell.toast('查看资产', '健身房·器械')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">健身房 · 器械</span></div>
+    <div class="asset-body"><div class="asset-name">健身房·器械</div><div class="asset-meta">健身房 · AI 生成 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="街景·日" data-scene-type="街景" data-source="手动上传" data-used="1" data-added="20260422" onclick="Shell.toast('查看资产', '街景·日')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">街景 · 日</span></div>
+    <div class="asset-body"><div class="asset-name">街景·日</div><div class="asset-meta">街景 · 手动上传 · 用过 1 次</div></div>
+  </div>
+</div>
+
+<!-- ============ 商品图 (12) ============ -->
+<div class="asset-grid" data-tab="products" id="grid-products" hidden>
+  <div class="asset-card" data-name="补水面膜 · 主图" data-product="透真补水面膜" data-source="商品库引用" data-used="5" data-added="20260513" onclick="Shell.toast('查看资产', '补水面膜 主图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">补水面膜 · 主图</span></div>
+    <div class="asset-body"><div class="asset-name">补水面膜 · 主图</div><div class="asset-meta">透真补水面膜 · 库引用 · 用过 5 次</div></div>
+  </div>
+  <div class="asset-card" data-name="补水面膜 · AI 优化" data-product="透真补水面膜" data-source="AI 优化" data-used="3" data-added="20260513" onclick="Shell.toast('查看资产', '补水面膜 AI 优化')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">补水面膜 · AI 优化</span></div>
+    <div class="asset-body"><div class="asset-name">补水面膜 · AI 优化</div><div class="asset-meta">透真补水面膜 · AI 优化 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="蓝牙耳机 · 主图" data-product="南卡 Lite Pro" data-source="商品库引用" data-used="4" data-added="20260507" onclick="Shell.toast('查看资产', '蓝牙耳机 主图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">蓝牙耳机 · 主图</span></div>
+    <div class="asset-body"><div class="asset-name">蓝牙耳机 · 主图</div><div class="asset-meta">南卡 Lite Pro · 库引用 · 用过 4 次</div></div>
+  </div>
+  <div class="asset-card" data-name="蓝牙耳机 · 场景图" data-product="南卡 Lite Pro" data-source="手动上传" data-used="1" data-added="20260507" onclick="Shell.toast('查看资产', '蓝牙耳机 场景')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">蓝牙耳机 · 场景</span></div>
+    <div class="asset-body"><div class="asset-name">蓝牙耳机 · 场景图</div><div class="asset-meta">南卡 Lite Pro · 手动上传 · 用过 1 次</div></div>
+  </div>
+  <div class="asset-card" data-name="速食面 · 主图" data-product="滋啦速食" data-source="商品库引用" data-used="3" data-added="20260512" onclick="Shell.toast('查看资产', '速食面 主图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">速食面 · 主图</span></div>
+    <div class="asset-body"><div class="asset-name">速食面 · 主图</div><div class="asset-meta">滋啦速食 · 库引用 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="速食面 · 加汤" data-product="滋啦速食" data-source="AI 优化" data-used="2" data-added="20260512" onclick="Shell.toast('查看资产', '速食面 加汤')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">速食面 · 加汤</span></div>
+    <div class="asset-body"><div class="asset-name">速食面 · 加汤</div><div class="asset-meta">滋啦速食 · AI 优化 · 用过 2 次</div></div>
+  </div>
+  <div class="asset-card" data-name="防晒霜 · 主图" data-product="透真防晒霜" data-source="商品库引用" data-used="4" data-added="20260510" onclick="Shell.toast('查看资产', '防晒霜 主图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">防晒霜 · 主图</span></div>
+    <div class="asset-body"><div class="asset-name">防晒霜 · 主图</div><div class="asset-meta">透真防晒霜 · 库引用 · 用过 4 次</div></div>
+  </div>
+  <div class="asset-card" data-name="防晒霜 · AI 优化" data-product="透真防晒霜" data-source="AI 优化" data-used="3" data-added="20260510" onclick="Shell.toast('查看资产', '防晒霜 优化')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">防晒霜 · AI 优化</span></div>
+    <div class="asset-body"><div class="asset-name">防晒霜 · AI 优化</div><div class="asset-meta">透真防晒霜 · AI 优化 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="咖啡冻干 · 主图" data-product="三顿半同款" data-source="商品库引用" data-used="3" data-added="20260509" onclick="Shell.toast('查看资产', '咖啡冻干 主图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">咖啡冻干 · 主图</span></div>
+    <div class="asset-body"><div class="asset-name">咖啡冻干 · 主图</div><div class="asset-meta">三顿半同款 · 库引用 · 用过 3 次</div></div>
+  </div>
+  <div class="asset-card" data-name="咖啡冻干 · 24 颗" data-product="三顿半同款" data-source="商品库引用" data-used="2" data-added="20260509" onclick="Shell.toast('查看资产', '咖啡冻干 24 颗')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">咖啡冻干 · 24 颗</span></div>
+    <div class="asset-body"><div class="asset-name">咖啡冻干 · 24 颗</div><div class="asset-meta">三顿半同款 · 库引用 · 用过 2 次</div></div>
+  </div>
+  <div class="asset-card" data-name="空气炸锅 · 主图" data-product="小熊 4L 空气炸锅" data-source="商品库引用" data-used="2" data-added="20260504" onclick="Shell.toast('查看资产', '空气炸锅 主图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">空气炸锅 · 主图</span></div>
+    <div class="asset-body"><div class="asset-name">空气炸锅 · 主图</div><div class="asset-meta">小熊 4L · 库引用 · 用过 2 次</div></div>
+  </div>
+  <div class="asset-card" data-name="瑜伽裤 · 模特图" data-product="露露同款瑜伽裤" data-source="手动上传" data-used="3" data-added="20260506" onclick="Shell.toast('查看资产', '瑜伽裤 模特')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">瑜伽裤 · 模特</span></div>
+    <div class="asset-body"><div class="asset-name">瑜伽裤 · 模特图</div><div class="asset-meta">露露同款瑜伽裤 · 手动上传 · 用过 3 次</div></div>
+  </div>
+</div>
+
+<!-- ============ 成片 (8) ============ -->
+<div class="asset-grid video-grid" data-tab="finals" id="grid-finals" hidden>
+  <div class="asset-card video" data-name="蓝牙耳机 · 开箱测评" data-project="蓝牙耳机 · 开箱测评" data-duration="60s" data-used="3" data-added="20260507" onclick="Shell.toast('打开成片', '蓝牙耳机 · 开箱测评')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 60s</span></div>
+    <div class="asset-body"><div class="asset-name">蓝牙耳机 · 开箱测评</div><div class="asset-meta">南卡 Lite Pro · 60s · 5 月 7 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="瑜伽裤 · 通勤穿搭" data-project="瑜伽裤 · 通勤穿搭" data-duration="45s" data-used="2" data-added="20260506" onclick="Shell.toast('打开成片', '瑜伽裤 · 通勤穿搭')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 45s</span></div>
+    <div class="asset-body"><div class="asset-name">瑜伽裤 · 通勤穿搭</div><div class="asset-meta">露露同款 · 45s · 5 月 6 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="空气炸锅 · 小户型" data-project="空气炸锅 · 小户型" data-duration="30s" data-used="2" data-added="20260504" onclick="Shell.toast('打开成片', '空气炸锅 · 小户型')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 30s</span></div>
+    <div class="asset-body"><div class="asset-name">空气炸锅 · 小户型</div><div class="asset-meta">小熊 4L · 30s · 5 月 4 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="补水面膜 · 痛点种草 v1" data-project="补水面膜 · 痛点种草 v1" data-duration="60s" data-used="2" data-added="20260428" onclick="Shell.toast('打开成片', '补水面膜 v1')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 60s</span></div>
+    <div class="asset-body"><div class="asset-name">补水面膜 · 痛点种草 v1</div><div class="asset-meta">透真补水面膜 · 60s · 4 月 28 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="防晒霜 · 通勤对比" data-project="防晒霜 · 通勤对比" data-duration="60s" data-used="1" data-added="20260425" onclick="Shell.toast('打开成片', '防晒霜 · 通勤对比')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 60s</span></div>
+    <div class="asset-body"><div class="asset-name">防晒霜 · 通勤对比</div><div class="asset-meta">透真防晒霜 · 60s · 4 月 25 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="速食面 · 加班治愈" data-project="速食面 · 加班治愈" data-duration="30s" data-used="1" data-added="20260420" onclick="Shell.toast('打开成片', '速食面 · 加班治愈')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 30s</span></div>
+    <div class="asset-body"><div class="asset-name">速食面 · 加班治愈</div><div class="asset-meta">滋啦速食 · 30s · 4 月 20 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="咖啡 · 早八剧情" data-project="咖啡 · 早八剧情" data-duration="45s" data-used="2" data-added="20260418" onclick="Shell.toast('打开成片', '咖啡 · 早八剧情')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 45s</span></div>
+    <div class="asset-body"><div class="asset-name">咖啡 · 早八剧情</div><div class="asset-meta">三顿半同款 · 45s · 4 月 18 日</div></div>
+  </div>
+  <div class="asset-card video" data-name="收纳 · 北欧" data-project="收纳 · 北欧" data-duration="15s" data-used="1" data-added="20260410" onclick="Shell.toast('打开成片', '收纳 · 北欧')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">9:16 · 15s</span></div>
+    <div class="asset-body"><div class="asset-name">收纳 · 北欧</div><div class="asset-meta">家居好物 · 15s · 4 月 10 日</div></div>
+  </div>
+</div>
+
+<!-- ============ 我的上传 (3) ============ -->
+<div class="asset-grid" data-tab="uploads" id="grid-uploads" hidden>
+  <div class="asset-card" data-name="林夕 · 主播照" data-kind="人物" data-source="手动上传" data-used="4" data-added="20260513" onclick="Shell.toast('查看资产', '林夕 · 主播照')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">林夕 · 主播照</span></div>
+    <div class="asset-body"><div class="asset-name">林夕 · 主播照</div><div class="asset-meta">人物 · 手动上传 · 用过 4 次</div></div>
+  </div>
+  <div class="asset-card" data-name="卧室 · 实拍" data-kind="场景" data-source="手动上传" data-used="2" data-added="20260510" onclick="Shell.toast('查看资产', '卧室 · 实拍')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">卧室 · 实拍</span></div>
+    <div class="asset-body"><div class="asset-name">卧室 · 实拍</div><div class="asset-meta">场景 · 手动上传 · 用过 2 次</div></div>
+  </div>
+  <div class="asset-card" data-name="防晒霜 · 官方图" data-kind="商品" data-source="手动上传" data-used="3" data-added="20260507" onclick="Shell.toast('查看资产', '防晒霜 · 官方图')">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除资产" onclick="event.stopPropagation();" data-action="delete-asset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder asset-thumb"><span class="ph-frame">防晒霜 · 官方图</span></div>
+    <div class="asset-body"><div class="asset-name">防晒霜 · 官方图</div><div class="asset-meta">商品 · 手动上传 · 用过 3 次</div></div>
+  </div>
+</div>
+
+<div class="empty-state" id="empty">
+  <div class="ic-empty">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+  </div>
+  <h3>没有匹配的资产</h3>
+  <p>// 试试切换 tab 或修改搜索词</p>
+</div>
+
+<!-- ============ 分页 (吸底) ============ -->
+<div class="pagination" id="pagination" hidden>
+  <span class="total">共 <b id="page-total">0</b> 条</span>
+  <button class="page-size" type="button" id="page-size-btn" title="切换每页条数">
+    <span id="page-size-label">12 条/页</span>
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+  </button>
+  <span class="pages" id="page-list"></span>
+  <span class="jump">跳至 <input type="number" min="1" value="1" id="page-jump"> 页</span>
+</div>
+
+<!-- ============ 上传资产 Modal ============ -->
+<div class="modal-bg" id="upload-modal-bg" onclick="if(event.target===this)Shell.closeModal('upload-modal-bg')">
+  <div class="modal upload-modal">
+    <span class="corner-tr"></span>
+    <span class="corner-bl"></span>
+
+    <div class="modal-h">
+      <div class="ic-m">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+      </div>
+      <div class="ti">上传资产<span>// 跨项目共享 · 不消耗 token</span></div>
+      <button class="modal-x" type="button" onclick="Shell.closeModal('upload-modal-bg')" aria-label="关闭">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+
+    <div class="modal-b">
+      <div class="field">
+        <label class="field-label">资产类型<span class="req">*</span></label>
+        <select class="select" id="upload-kind">
+          <option value="people">人物</option>
+          <option value="scenes">场景</option>
+          <option value="products">商品图</option>
+          <option value="finals">成片(视频)</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label class="field-label">资产文件<span class="req">*</span></label>
+        <input type="file" id="upload-file" accept="image/*" hidden>
+        <div class="upload-zone" id="upload-zone">
+          <span class="uz-ic">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+          </span>
+          <span id="upload-zone-text">点击或拖拽上传图片</span>
+          <span class="uz-hint" id="upload-zone-hint">// JPG / PNG / WEBP · 单文件</span>
+        </div>
+        <div class="upload-preview" id="upload-preview" hidden>
+          <img id="upload-preview-img" alt="预览">
+          <video id="upload-preview-video" controls hidden></video>
+          <button class="preview-x" type="button" id="upload-preview-x" aria-label="移除">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="field-label">资产名称<span class="req">*</span></label>
+        <input class="input" id="upload-name" placeholder="例: 林夕 · 都市白领">
+      </div>
+
+      <!-- 人物 字段 -->
+      <div class="field" data-fields="people">
+        <label class="field-label">性别</label>
+        <select class="select" id="upload-gender">
+          <option value="女">女</option>
+          <option value="男">男</option>
+        </select>
+      </div>
+      <div class="field" data-fields="people">
+        <label class="field-label">年龄段</label>
+        <select class="select" id="upload-age">
+          <option value="幼年">幼年</option>
+          <option value="少年">少年</option>
+          <option value="青年" selected>青年</option>
+          <option value="中年">中年</option>
+          <option value="老年">老年</option>
+        </select>
+      </div>
+      <div class="field" data-fields="people">
+        <label class="field-label">角色标签</label>
+        <input class="input" id="upload-role" placeholder="例: 都市白领 / 学生 / 居家">
+      </div>
+
+      <!-- 场景 字段 -->
+      <div class="field" data-fields="scenes">
+        <label class="field-label">场景类型<span class="req">*</span></label>
+        <input class="input" id="upload-scene-type" placeholder="例: 卧室 / 客厅 / 办公室">
+      </div>
+
+      <!-- 商品图 字段 -->
+      <div class="field" data-fields="products">
+        <label class="field-label">关联商品<span class="req">*</span></label>
+        <select class="select" id="upload-product">
+          <option value="">— 选择商品 —</option>
+          <option>透真补水面膜</option>
+          <option>南卡 Lite Pro</option>
+          <option>滋啦速食</option>
+          <option>透真防晒霜</option>
+          <option>三顿半同款</option>
+          <option>小熊 4L 空气炸锅</option>
+          <option>露露同款瑜伽裤</option>
+        </select>
+      </div>
+
+      <!-- 成片 字段 -->
+      <div class="field" data-fields="finals">
+        <label class="field-label">关联项目</label>
+        <input class="input" id="upload-project" placeholder="例: 蓝牙耳机 · 开箱测评">
+      </div>
+      <div class="field" data-fields="finals">
+        <label class="field-label">时长</label>
+        <select class="select" id="upload-duration">
+          <option value="15s">15 秒</option>
+          <option value="30s">30 秒</option>
+          <option value="45s">45 秒</option>
+          <option value="60s" selected>60 秒</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="modal-f">
+      <span class="modal-meta">// 跨项目共享 · <span class="accent">不消耗 token</span></span>
+      <button class="btn" type="button" onclick="Shell.closeModal('upload-modal-bg')">取消</button>
+      <button class="btn btn-primary" id="upload-submit" type="button" disabled>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+        上传到资产库
+      </button>
+    </div>
+  </div>
+</div>
+
+</div>
+
+<!-- ===== 删除确认 modal ===== -->
+<div class="modal-bg" id="del-confirm-bg">
+  <div class="modal" role="dialog">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m" style="background:var(--crimson-bg,#fdebea);color:var(--accent-crimson,#c43d3d)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+      </div>
+      <div class="ti">确认删除资产<span>// CONFIRM DELETE</span></div>
+    </div>
+    <div class="modal-b" id="del-confirm-body">即将删除该资产。</div>
+    <div class="modal-f" id="del-confirm-foot">
+      <button class="btn" type="button" id="del-confirm-cancel">取消</button>
+      <button class="btn" type="button" id="del-confirm-ok" style="background:var(--accent-crimson,#c43d3d);color:var(--accent-white);border-color:var(--accent-crimson,#c43d3d)">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/></svg>
+        确认删除
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== bulk-bar ===== -->
+<div class="bulk-bar" id="bulk-bar">
+  <span class="ct">已选 <b id="bulk-count">0</b> 项</span>
+  <button class="clear-sel" type="button" id="bulk-clear">清空</button>
+  <span class="sep"></span>
+  <button class="danger" type="button" id="bulk-del">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+    删除所选
+  </button>
+  <button type="button" id="bulk-exit">完成</button>
+</div>
+
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({ active: 'library', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '资产库' }] });
+
+// ============== State ==============
+const TAB_KEYS = ['people', 'scenes', 'products', 'finals', 'uploads'];
+const PAGE_SIZES = [12, 24, 48, 96];
+const state = {
+  tab: 'people',
+  search: '',
+  // 人物
+  gender: 'all', age: 'all', role: 'all',
+  // 场景
+  sceneType: 'all',
+  // 商品图
+  product: 'all',
+  // 成片
+  project: 'all', duration: 'all',
+  // 我的上传
+  kind: 'all',
+  // 通用
+  source: 'all',
+  sort: 'used-desc',
+  // 分页
+  page: 1,
+  pageSize: 12,
+};
+
+const CHIP_DEFAULT_LABEL = {
+  gender: '性别', age: '年龄段', role: '角色标签',
+  sceneType: '场景类型',
+  product: '关联商品',
+  project: '关联项目', duration: '时长',
+  kind: '资产类型',
+  source: '来源',
+};
+
+const SORT_LABEL = {
+  'used-desc':  '最近使用',
+  'added-desc': '最近添加',
+  'ref-desc':   '引用次数',
+};
+
+const checkSvg = '<svg class="mi-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg>';
+
+// ============== Card pools per tab ==============
+const cardsByTab = {};
+TAB_KEYS.forEach(t => {
+  cardsByTab[t] = [...document.querySelectorAll(`#grid-${t} .asset-card`)];
+});
+
+// 同步 tab count + 副标题计数
+TAB_KEYS.forEach(t => {
+  const tab = document.querySelector(`.tab[data-tab="${t}"] .count`);
+  if (tab) tab.textContent = cardsByTab[t].length;
+});
+document.getElementById('sub-people').textContent = cardsByTab.people.length;
+document.getElementById('sub-scenes').textContent = cardsByTab.scenes.length;
+document.getElementById('sub-products').textContent = cardsByTab.products.length;
+document.getElementById('sub-finals').textContent = cardsByTab.finals.length;
+
+// 同步 sidebar 徽章(资产总数)
+const sidebarBadge = document.querySelector('aside.sidebar a[href="library.html"] .pill-mini');
+if (sidebarBadge) {
+  const total = TAB_KEYS.reduce((s, t) => s + cardsByTab[t].length, 0);
+  sidebarBadge.textContent = total;
+}
+
+// ============== 构建下拉菜单 ==============
+function uniqueValues(tab, attr) {
+  const set = new Set();
+  cardsByTab[tab].forEach(c => {
+    const v = c.dataset[attr];
+    if (v) set.add(v);
+  });
+  return [...set];
+}
+
+function buildMenu(key, options, defaultLabel) {
+  const wrap = document.querySelector(`.chip-wrap[data-key="${key}"]`);
+  if (!wrap) return;
+  const menu = wrap.querySelector('.chip-menu');
+  const all = `<div class="mi selected" data-value="all">${checkSvg}<span>${defaultLabel}</span></div><div class="mi-sep"></div>`;
+  const items = options.map(o => `<div class="mi" data-value="${o.value}">${checkSvg}<span>${o.label}</span></div>`).join('');
+  menu.innerHTML = all + items;
+}
+
+// 人物
+buildMenu('gender', [
+  { value: '女', label: '女' },
+  { value: '男', label: '男' },
+], '全部性别');
+buildMenu('age', [
+  { value: '幼年', label: '幼年' },
+  { value: '少年', label: '少年' },
+  { value: '青年', label: '青年' },
+  { value: '中年', label: '中年' },
+  { value: '老年', label: '老年' },
+], '全部年龄段');
+buildMenu('role', uniqueValues('people', 'role').map(v => ({ value: v, label: v })), '全部角色');
+
+// 场景
+buildMenu('sceneType', uniqueValues('scenes', 'sceneType').map(v => ({ value: v, label: v })), '全部场景');
+
+// 商品图
+buildMenu('product', uniqueValues('products', 'product').map(v => ({ value: v, label: v })), '全部商品');
+
+// 成片
+buildMenu('project', uniqueValues('finals', 'project').map(v => ({ value: v, label: v })), '全部项目');
+buildMenu('duration', [
+  { value: '15s', label: '15 秒' },
+  { value: '30s', label: '30 秒' },
+  { value: '45s', label: '45 秒' },
+  { value: '60s', label: '60 秒' },
+], '全部时长');
+
+// 我的上传
+buildMenu('kind', [
+  { value: '人物', label: '人物' },
+  { value: '场景', label: '场景' },
+  { value: '商品', label: '商品' },
+], '全部类型');
+
+// 通用·来源(按当前 tab 的实际数据动态构建)
+function rebuildSourceMenu() {
+  const sources = uniqueValues(state.tab, 'source');
+  buildMenu('source', sources.map(v => ({ value: v, label: v })), '全部来源');
+  syncChipUI('source');
+}
+rebuildSourceMenu();
+
+// 排序(无"全部",默认第一项选中)
+const sortWrap = document.querySelector('.chip-wrap[data-key="sort"]');
+sortWrap.querySelector('.chip-menu').innerHTML = Object.entries(SORT_LABEL).map(([v, l], i) =>
+  `<div class="mi${i === 0 ? ' selected' : ''}" data-value="${v}">${checkSvg}<span>${l}</span></div>`
+).join('');
+
+// ============== Apply ==============
+function applyFilter() {
+  // 网格切换
+  TAB_KEYS.forEach(t => {
+    const g = document.getElementById(`grid-${t}`);
+    if (!g) return;
+    g.hidden = t !== state.tab;
+  });
+
+  // chip-wrap 按当前 tab 显隐
+  document.querySelectorAll('.chip-wrap').forEach(wrap => {
+    const tabs = (wrap.dataset.tabs || '').split(' ');
+    const show = tabs.includes('all') || tabs.includes(state.tab);
+    wrap.style.display = show ? '' : 'none';
+  });
+
+  // 过滤
+  const cards = cardsByTab[state.tab];
+  const q = state.search.toLowerCase();
+  let visible = [];
+  cards.forEach(c => {
+    let show = true;
+    if (q) {
+      const hay = `${c.dataset.name || ''} ${c.dataset.role || ''} ${c.dataset.sceneType || ''} ${c.dataset.product || ''} ${c.dataset.project || ''} ${c.dataset.source || ''}`.toLowerCase();
+      if (!hay.includes(q)) show = false;
+    }
+    // 通用 source
+    if (show && state.source !== 'all' && c.dataset.source !== state.source) show = false;
+
+    if (state.tab === 'people') {
+      if (show && state.gender !== 'all' && c.dataset.gender !== state.gender) show = false;
+      if (show && state.age !== 'all' && c.dataset.age !== state.age) show = false;
+      if (show && state.role !== 'all' && c.dataset.role !== state.role) show = false;
+    } else if (state.tab === 'scenes') {
+      if (show && state.sceneType !== 'all' && c.dataset.sceneType !== state.sceneType) show = false;
+    } else if (state.tab === 'products') {
+      if (show && state.product !== 'all' && c.dataset.product !== state.product) show = false;
+    } else if (state.tab === 'finals') {
+      if (show && state.project !== 'all' && c.dataset.project !== state.project) show = false;
+      if (show && state.duration !== 'all' && c.dataset.duration !== state.duration) show = false;
+    } else if (state.tab === 'uploads') {
+      if (show && state.kind !== 'all' && c.dataset.kind !== state.kind) show = false;
+    }
+
+    c.style.display = show ? '' : 'none';
+    if (show) visible.push(c);
+  });
+
+  // 排序
+  const sorters = {
+    'used-desc':  (a, b) => +b.dataset.used - +a.dataset.used,
+    'added-desc': (a, b) => +b.dataset.added - +a.dataset.added,
+    'ref-desc':   (a, b) => +b.dataset.used - +a.dataset.used,
+  };
+  visible.sort(sorters[state.sort] || sorters['used-desc']);
+  const grid = document.getElementById(`grid-${state.tab}`);
+  visible.forEach(c => grid.appendChild(c));
+
+  // 分页 · 在排序之后裁页, 把非当前页的卡片隐藏
+  const totalVisible = visible.length;
+  const totalPages = Math.max(1, Math.ceil(totalVisible / state.pageSize));
+  if (state.page > totalPages) state.page = totalPages;
+  if (state.page < 1) state.page = 1;
+  const start = (state.page - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  visible.forEach((c, i) => {
+    if (i < start || i >= end) c.style.display = 'none';
+  });
+
+  // 计数 + 空状态
+  const total = cards.length;
+  document.getElementById('result-meta').innerHTML = `// 显示 <span class="count">${totalVisible}</span> / ${total} 个资产`;
+  const empty = document.getElementById('empty');
+  if (totalVisible === 0) {
+    empty.classList.add('show');
+    grid.style.display = 'none';
+  } else {
+    empty.classList.remove('show');
+    grid.style.display = '';
+  }
+
+  // 渲染分页器
+  renderPagination(totalVisible, totalPages);
+
+  // 是否有任意筛选生效 → 显示"清空筛选"
+  const activeKeys = visibleFilterKeys();
+  const hasFilter = state.search || activeKeys.some(k => state[k] !== 'all');
+  document.getElementById('clear-filters').hidden = !hasFilter;
+}
+
+// ============== 分页器渲染 ==============
+function pageNumberList(cur, total) {
+  // 智能省略号 · 始终显示首末页 + cur 前后各 1 页
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = new Set([1, total, cur, cur - 1, cur + 1]);
+  if (cur <= 4) [2, 3, 4, 5].forEach(p => pages.add(p));
+  if (cur >= total - 3) [total - 4, total - 3, total - 2, total - 1].forEach(p => pages.add(p));
+  const sorted = [...pages].filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out = [];
+  for (let i = 0; i < sorted.length; i++) {
+    if (i > 0 && sorted[i] - sorted[i - 1] > 1) out.push('…');
+    out.push(sorted[i]);
+  }
+  return out;
+}
+
+function renderPagination(totalVisible, totalPages) {
+  const root = document.getElementById('pagination');
+  if (!root) return;
+  // 空结果或只有一页且 ≤ pageSize → 不显示(数据不够分页时没必要占视觉)
+  if (totalVisible === 0 || (totalPages <= 1 && totalVisible <= state.pageSize)) {
+    root.hidden = true;
+    return;
+  }
+  root.hidden = false;
+  document.getElementById('page-total').textContent = totalVisible;
+  document.getElementById('page-size-label').textContent = `${state.pageSize} 条/页`;
+  document.getElementById('page-jump').value = state.page;
+  document.getElementById('page-jump').max = totalPages;
+
+  const list = document.getElementById('page-list');
+  const items = pageNumberList(state.page, totalPages);
+  let html = `<button type="button" data-page="prev" ${state.page <= 1 ? 'disabled' : ''} aria-label="上一页">
+    <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12L6 8l4-4"/></svg>
+  </button>`;
+  items.forEach(p => {
+    if (p === '…') html += `<span class="ellipsis">…</span>`;
+    else html += `<button type="button" data-page="${p}" ${p === state.page ? 'class="active"' : ''}>${p}</button>`;
+  });
+  html += `<button type="button" data-page="next" ${state.page >= totalPages ? 'disabled' : ''} aria-label="下一页">
+    <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4l4 4-4 4"/></svg>
+  </button>`;
+  list.innerHTML = html;
+}
+
+function visibleFilterKeys() {
+  return [...document.querySelectorAll('.chip-wrap')]
+    .filter(w => {
+      const tabs = (w.dataset.tabs || '').split(' ');
+      return (tabs.includes('all') || tabs.includes(state.tab)) && w.dataset.key !== 'sort';
+    })
+    .map(w => w.dataset.key);
+}
+
+// ============== Sync chip UI ==============
+function syncChipUI(key) {
+  const wrap = document.querySelector(`.chip-wrap[data-key="${key}"]`);
+  if (!wrap) return;
+  const label = wrap.querySelector('.chip-label');
+  const chip = wrap.querySelector('.chip');
+  const v = state[key];
+  if (key === 'sort') {
+    label.textContent = SORT_LABEL[v];
+  } else if (v === 'all') {
+    label.textContent = CHIP_DEFAULT_LABEL[key];
+    chip.classList.remove('active');
+  } else {
+    // 找到对应 mi 的 label 文字(优先用菜单里的展示文本)
+    const mi = wrap.querySelector(`.mi[data-value="${CSS.escape(v)}"] span`);
+    label.textContent = mi ? mi.textContent : v;
+    chip.classList.add('active');
+  }
+  wrap.querySelectorAll('.mi').forEach(mi => mi.classList.toggle('selected', mi.dataset.value === v));
+}
+
+// ============== Bind ==============
+document.querySelectorAll('.chip-wrap').forEach(wrap => {
+  const key = wrap.dataset.key;
+  wrap.querySelector('.chip').addEventListener('click', e => {
+    e.stopPropagation();
+    const isOpen = wrap.classList.contains('open');
+    document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+    if (!isOpen) wrap.classList.add('open');
+  });
+  wrap.addEventListener('click', e => {
+    const mi = e.target.closest('.mi');
+    if (!mi) return;
+    e.stopPropagation();
+    state[key] = mi.dataset.value;
+    state.page = 1;
+    wrap.classList.remove('open');
+    syncChipUI(key);
+    applyFilter();
+  });
+});
+
+document.addEventListener('click', () => {
+  document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+});
+
+// Tab clicks
+document.querySelectorAll('#asset-tabs .tab').forEach(t => {
+  t.addEventListener('click', () => {
+    document.querySelectorAll('#asset-tabs .tab').forEach(x => x.classList.remove('active'));
+    t.classList.add('active');
+    state.tab = t.dataset.tab;
+    state.page = 1;
+    // 切 tab 时,清空本 tab 不再可见的筛选
+    ['gender', 'age', 'role', 'sceneType', 'product', 'project', 'duration', 'kind', 'source'].forEach(k => {
+      const wrap = document.querySelector(`.chip-wrap[data-key="${k}"]`);
+      if (!wrap) return;
+      const tabs = (wrap.dataset.tabs || '').split(' ');
+      const visible = tabs.includes('all') || tabs.includes(state.tab);
+      if (!visible) { state[k] = 'all'; syncChipUI(k); }
+    });
+    // 来源选项随 tab 数据重新构建
+    state.source = 'all';
+    rebuildSourceMenu();
+    applyFilter();
+  });
+});
+
+// 搜索
+document.getElementById('search-input').addEventListener('input', e => {
+  state.search = e.target.value.trim();
+  state.page = 1;
+  applyFilter();
+});
+
+// 清空筛选
+document.getElementById('clear-filters').addEventListener('click', () => {
+  state.search = '';
+  document.getElementById('search-input').value = '';
+  ['gender', 'age', 'role', 'sceneType', 'product', 'project', 'duration', 'kind', 'source'].forEach(k => {
+    state[k] = 'all';
+    syncChipUI(k);
+  });
+  state.page = 1;
+  applyFilter();
+  Shell.toast('已清空筛选');
+});
+
+// 分页器 · 翻页按钮(事件委托)
+document.getElementById('page-list').addEventListener('click', e => {
+  const btn = e.target.closest('button[data-page]');
+  if (!btn || btn.disabled) return;
+  const v = btn.dataset.page;
+  const totalPages = +document.getElementById('page-jump').max || 1;
+  if (v === 'prev') state.page = Math.max(1, state.page - 1);
+  else if (v === 'next') state.page = Math.min(totalPages, state.page + 1);
+  else state.page = +v;
+  applyFilter();
+  // 翻页后滚到顶部, 让首张卡片立刻可见
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+// 分页器 · 每页条数(循环切换 12 → 24 → 48 → 96 → 12)
+document.getElementById('page-size-btn').addEventListener('click', () => {
+  const i = PAGE_SIZES.indexOf(state.pageSize);
+  state.pageSize = PAGE_SIZES[(i + 1) % PAGE_SIZES.length];
+  state.page = 1;
+  applyFilter();
+});
+
+// 分页器 · 跳转
+const _jumpEl = document.getElementById('page-jump');
+function _doJump() {
+  let v = parseInt(_jumpEl.value, 10);
+  const max = +_jumpEl.max || 1;
+  if (!Number.isFinite(v)) v = 1;
+  v = Math.max(1, Math.min(max, v));
+  state.page = v;
+  applyFilter();
+}
+_jumpEl.addEventListener('change', _doJump);
+_jumpEl.addEventListener('blur', _doJump);
+_jumpEl.addEventListener('keydown', e => {
+  if (e.key === 'Enter') { e.preventDefault(); _doJump(); _jumpEl.blur(); }
+});
+
+applyFilter();
+
+// ============== 上传资产 Modal ==============
+// 修复:把 modal 提到 <body> 末尾,脱离 main 的 stacking context 干扰
+// (main 是 position:relative + overflow:hidden, topbar z-index:2 会盖在 fixed modal-bg 之上)
+const _modalRoot = document.getElementById('upload-modal-bg');
+if (_modalRoot && _modalRoot.parentElement !== document.body) {
+  document.body.appendChild(_modalRoot);
+}
+
+const uploadState = { kind: 'people', file: null, dataUrl: '', mime: '' };
+
+const KIND_LABEL = { people: '人物', scenes: '场景', products: '商品图', finals: '成片' };
+const DEFAULT_THUMB_TEXT = {
+  people: '新资产', scenes: '新场景', products: '新商品图', finals: '9:16 · 新成片'
+};
+const FILE_HINT = {
+  image: '// JPG / PNG / WEBP · 单文件',
+  video: '// MP4 / WEBM · 9:16 · ≤ 60 秒',
+};
+
+const $ = (id) => document.getElementById(id);
+const modalBg = $('upload-modal-bg');
+const kindSel = $('upload-kind');
+const zone = $('upload-zone');
+const zoneText = $('upload-zone-text');
+const zoneHint = $('upload-zone-hint');
+const fileInput = $('upload-file');
+const preview = $('upload-preview');
+const previewImg = $('upload-preview-img');
+const previewVideo = $('upload-preview-video');
+const previewX = $('upload-preview-x');
+const nameInput = $('upload-name');
+const submitBtn = $('upload-submit');
+
+function syncKindFields() {
+  document.querySelectorAll('.upload-modal .field[data-fields]').forEach(f => {
+    f.hidden = f.dataset.fields !== uploadState.kind;
+  });
+  const isVideo = uploadState.kind === 'finals';
+  fileInput.accept = isVideo ? 'video/*' : 'image/*';
+  zoneText.textContent = isVideo ? '点击或拖拽上传视频' : '点击或拖拽上传图片';
+  zoneHint.textContent = isVideo ? FILE_HINT.video : FILE_HINT.image;
+  preview.classList.toggle('video', isVideo);
+}
+
+function syncSubmit() {
+  let ok = !!uploadState.file && nameInput.value.trim().length > 0;
+  if (ok && uploadState.kind === 'scenes' && !$('upload-scene-type').value.trim()) ok = false;
+  if (ok && uploadState.kind === 'products' && !$('upload-product').value) ok = false;
+  submitBtn.disabled = !ok;
+}
+
+function resetUploadModal() {
+  uploadState.file = null;
+  uploadState.dataUrl = '';
+  uploadState.mime = '';
+  fileInput.value = '';
+  preview.hidden = true;
+  previewImg.removeAttribute('src');
+  previewVideo.removeAttribute('src');
+  previewVideo.hidden = true;
+  previewImg.hidden = false;
+  zone.hidden = false;
+  nameInput.value = '';
+  $('upload-role').value = '';
+  $('upload-scene-type').value = '';
+  $('upload-product').selectedIndex = 0;
+  $('upload-project').value = '';
+  $('upload-gender').selectedIndex = 0;
+  $('upload-age').value = '青年';
+  $('upload-duration').value = '60s';
+  syncSubmit();
+}
+
+function handleFile(file) {
+  if (!file) return;
+  const isVideo = uploadState.kind === 'finals';
+  if (isVideo && !file.type.startsWith('video/')) {
+    Shell.toast('请上传视频文件', file.type || 'unknown');
+    return;
+  }
+  if (!isVideo && !file.type.startsWith('image/')) {
+    Shell.toast('请上传图片文件', file.type || 'unknown');
+    return;
+  }
+  uploadState.file = file;
+  uploadState.mime = file.type;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    uploadState.dataUrl = e.target.result;
+    if (isVideo) {
+      previewVideo.src = uploadState.dataUrl;
+      previewVideo.hidden = false;
+      previewImg.hidden = true;
+    } else {
+      previewImg.src = uploadState.dataUrl;
+      previewImg.hidden = false;
+      previewVideo.hidden = true;
+    }
+    preview.hidden = false;
+    zone.hidden = true;
+    // 自动填名称(去后缀)
+    if (!nameInput.value) nameInput.value = file.name.replace(/\.[^.]+$/, '');
+    syncSubmit();
+  };
+  reader.readAsDataURL(file);
+}
+
+kindSel.addEventListener('change', () => {
+  uploadState.kind = kindSel.value;
+  resetUploadModal();
+  syncKindFields();
+});
+
+zone.addEventListener('click', () => fileInput.click());
+zone.addEventListener('dragover', e => { e.preventDefault(); zone.style.borderColor = 'var(--heat)'; });
+zone.addEventListener('dragleave', () => { zone.style.borderColor = ''; });
+zone.addEventListener('drop', e => {
+  e.preventDefault();
+  zone.style.borderColor = '';
+  if (e.dataTransfer?.files?.length) handleFile(e.dataTransfer.files[0]);
+});
+fileInput.addEventListener('change', e => {
+  if (e.target.files?.length) handleFile(e.target.files[0]);
+});
+
+previewX.addEventListener('click', () => {
+  uploadState.file = null;
+  uploadState.dataUrl = '';
+  fileInput.value = '';
+  preview.hidden = true;
+  zone.hidden = false;
+  previewImg.removeAttribute('src');
+  previewVideo.removeAttribute('src');
+  syncSubmit();
+});
+
+nameInput.addEventListener('input', syncSubmit);
+$('upload-scene-type').addEventListener('input', syncSubmit);
+$('upload-product').addEventListener('change', syncSubmit);
+
+// 提交 → 构造卡片插入到对应 grid 首位
+submitBtn.addEventListener('click', () => {
+  if (submitBtn.disabled) return;
+  const kind = uploadState.kind;
+  const name = nameInput.value.trim();
+  const today = new Date();
+  const stamp = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;
+
+  const card = document.createElement('div');
+  card.className = 'asset-card' + (kind === 'finals' ? ' video' : '');
+  card.dataset.name = name;
+  card.dataset.source = '手动上传';
+  card.dataset.used = '0';
+  card.dataset.added = stamp;
+  card.setAttribute('onclick', `Shell.toast('查看资产', ${JSON.stringify(name)})`);
+
+  let metaText = '';
+  if (kind === 'people') {
+    const gender = $('upload-gender').value;
+    const age = $('upload-age').value;
+    const role = $('upload-role').value.trim() || '—';
+    card.dataset.gender = gender;
+    card.dataset.age = age;
+    card.dataset.role = role;
+    metaText = `${gender} · ${age} · ${role} · 手动上传`;
+  } else if (kind === 'scenes') {
+    const sceneType = $('upload-scene-type').value.trim();
+    card.dataset.sceneType = sceneType;
+    metaText = `${sceneType} · 手动上传 · 用过 0 次`;
+  } else if (kind === 'products') {
+    const product = $('upload-product').value;
+    card.dataset.product = product;
+    metaText = `${product} · 手动上传 · 用过 0 次`;
+  } else if (kind === 'finals') {
+    const project = $('upload-project').value.trim() || name;
+    const duration = $('upload-duration').value;
+    card.dataset.project = project;
+    card.dataset.duration = duration;
+    metaText = `${project} · ${duration} · 手动上传`;
+  }
+
+  // 缩略图:有 dataUrl 用真实预览,否则占位
+  const thumb = document.createElement('div');
+  thumb.className = 'placeholder asset-thumb';
+  if (uploadState.dataUrl) {
+    if (kind === 'finals') {
+      thumb.innerHTML = `<video src="${uploadState.dataUrl}" muted playsinline style="width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;"></video>`;
+    } else {
+      thumb.style.backgroundImage = `url("${uploadState.dataUrl}")`;
+      thumb.style.backgroundSize = 'cover';
+      thumb.style.backgroundPosition = 'center';
+      thumb.innerHTML = '';
+    }
+  } else {
+    thumb.innerHTML = `<span class="ph-frame">${DEFAULT_THUMB_TEXT[kind]}</span>`;
+  }
+
+  const body = document.createElement('div');
+  body.className = 'asset-body';
+  body.innerHTML = `<div class="asset-name">${name}</div><div class="asset-meta">${metaText}</div>`;
+  card.appendChild(thumb);
+  card.appendChild(body);
+
+  // 插入 grid 首位 + 更新 cardsByTab + 计数 + 切到该 tab
+  const targetGrid = $(`grid-${kind}`);
+  targetGrid.prepend(card);
+  cardsByTab[kind].unshift(card);
+
+  // 刷新 tab count + 副标题计数
+  const tabCount = document.querySelector(`.tab[data-tab="${kind}"] .count`);
+  if (tabCount) tabCount.textContent = cardsByTab[kind].length;
+  if (kind === 'people') $('sub-people').textContent = cardsByTab.people.length;
+  if (kind === 'scenes') $('sub-scenes').textContent = cardsByTab.scenes.length;
+  if (kind === 'products') $('sub-products').textContent = cardsByTab.products.length;
+  if (kind === 'finals') $('sub-finals').textContent = cardsByTab.finals.length;
+  if (sidebarBadge) {
+    const total = TAB_KEYS.reduce((s, t) => s + cardsByTab[t].length, 0);
+    sidebarBadge.textContent = total;
+  }
+
+  // 角色标签来源新值 → 重建角色菜单(可能新增)
+  if (kind === 'people') {
+    buildMenu('role', uniqueValues('people', 'role').map(v => ({ value: v, label: v })), '全部角色');
+    syncChipUI('role');
+  }
+  if (kind === 'scenes') {
+    buildMenu('sceneType', uniqueValues('scenes', 'sceneType').map(v => ({ value: v, label: v })), '全部场景');
+    syncChipUI('sceneType');
+  }
+  if (kind === 'products') {
+    buildMenu('product', uniqueValues('products', 'product').map(v => ({ value: v, label: v })), '全部商品');
+    syncChipUI('product');
+  }
+  if (kind === 'finals') {
+    buildMenu('project', uniqueValues('finals', 'project').map(v => ({ value: v, label: v })), '全部项目');
+    syncChipUI('project');
+  }
+
+  // 切到目标 tab + 清空筛选
+  document.querySelectorAll('#asset-tabs .tab').forEach(t =>
+    t.classList.toggle('active', t.dataset.tab === kind)
+  );
+  state.tab = kind;
+  state.search = ''; $('search-input').value = '';
+  ['gender', 'age', 'role', 'sceneType', 'product', 'project', 'duration', 'source'].forEach(k => {
+    state[k] = 'all';
+    syncChipUI(k);
+  });
+  state.source = 'all';
+  state.page = 1;
+  rebuildSourceMenu();
+  applyFilter();
+
+  Shell.closeModal('upload-modal-bg');
+  Shell.toast(`已上传到${KIND_LABEL[kind]}`, `+ ${name}`);
+});
+
+// 打开按钮
+$('open-upload-btn').addEventListener('click', () => {
+  resetUploadModal();
+  kindSel.value = state.tab in KIND_LABEL ? state.tab : 'people';
+  uploadState.kind = kindSel.value;
+  syncKindFields();
+  Shell.openModal('upload-modal-bg');
+  setTimeout(() => nameInput.focus(), 100);
+});
+
+// ESC 关闭
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && modalBg.classList.contains('show')) {
+    Shell.closeModal('upload-modal-bg');
+  }
+});
+
+// 初始化
+syncKindFields();
+
+// ============================================================
+// 资产删除 + 批量管理 (PRD §6.3 软删除/引用检查)
+// ============================================================
+// 模拟引用记录: 某些资产被项目引用 (实际从后台获取)
+const ASSET_REFS = {
+  '林夕': ['夏日水嫩计划', '春装新品'],
+  '小七': ['学生季推广'],
+  '卧室·暖光': ['补水面膜 v1', '面膜对比'],
+  '客厅·北欧': ['咖啡早八剧情'],
+  '蓝牙耳机 · 开箱测评': ['南卡 Lite 推广']
+};
+function getAssetRefs(card) {
+  const name = card.dataset.name || '';
+  return ASSET_REFS[name] || [];
+}
+
+const delBg = document.getElementById('del-confirm-bg');
+const delBody = document.getElementById('del-confirm-body');
+const delFoot = document.getElementById('del-confirm-foot');
+const delCancel = document.getElementById('del-confirm-cancel');
+const delOk = document.getElementById('del-confirm-ok');
+let _delQueue = [];
+
+function setFootDeletable() {
+  delFoot.innerHTML = '';
+  delFoot.appendChild(delCancel);
+  delFoot.appendChild(delOk);
+}
+function setFootBlocked() {
+  delFoot.innerHTML = '';
+  const okBtn = document.createElement('button');
+  okBtn.className = 'btn btn-primary';
+  okBtn.type = 'button';
+  okBtn.textContent = '我知道了';
+  okBtn.addEventListener('click', closeDelConfirm);
+  delFoot.appendChild(okBtn);
+}
+function openDelConfirm(targets) {
+  const blocked = targets.filter(c => getAssetRefs(c).length > 0);
+  const deletable = targets.filter(c => getAssetRefs(c).length === 0);
+  if (deletable.length === 0 && blocked.length > 0) {
+    const c = blocked[0];
+    const refs = getAssetRefs(c);
+    if (blocked.length === 1) {
+      delBody.innerHTML = `<span class="mono-acc">${c.dataset.name}</span> 当前被 <b>${refs.length}</b> 个项目使用,无法直接删除。请先在以下项目中解除引用:<br><br>` +
+        refs.map(r => `<span class="mono-acc" style="margin-right:6px">${r}</span>`).join('');
+    } else {
+      delBody.innerHTML = `所选 <b>${blocked.length}</b> 个资产均被项目引用,无法直接删除。`;
+    }
+    setFootBlocked();
+    delBg.classList.add('show');
+    _delQueue = [];
+    return;
+  }
+  _delQueue = deletable;
+  if (deletable.length === 1 && blocked.length === 0) {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + deletable[0].dataset.name + '</span>,此操作无法撤销。';
+  } else if (blocked.length > 0) {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + deletable.length + ' 个资产</span>,其中 <b>' + blocked.length + '</b> 个被项目引用已跳过。';
+  } else {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + deletable.length + ' 个资产</span>,此操作无法撤销。';
+  }
+  setFootDeletable();
+  delBg.classList.add('show');
+}
+function closeDelConfirm() { delBg.classList.remove('show'); _delQueue = []; }
+delCancel.addEventListener('click', closeDelConfirm);
+delBg.addEventListener('click', e => { if (e.target === delBg) closeDelConfirm(); });
+delOk.addEventListener('click', () => {
+  const n = _delQueue.length;
+  _delQueue.forEach(card => card.remove());
+  closeDelConfirm();
+  Shell.toast('已删除', n === 1 ? '资产已移除' : '已删除 ' + n + ' 个资产');
+  updateBulkBar();
+});
+
+// 单卡片删除按钮
+document.querySelectorAll('.asset-card .card-del-btn').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    const card = btn.closest('.asset-card');
+    if (!card) return;
+    openDelConfirm([card]);
+  });
+});
+
+// 管理资产模式
+const libManageBtn = document.getElementById('lib-manage-btn');
+const libManageLabel = libManageBtn.querySelector('.lib-manage-label');
+const bulkBar = document.getElementById('bulk-bar');
+const bulkCount = document.getElementById('bulk-count');
+const bulkClear = document.getElementById('bulk-clear');
+const bulkDel = document.getElementById('bulk-del');
+const bulkExit = document.getElementById('bulk-exit');
+
+function getSelected() { return [...document.querySelectorAll('.asset-card.selected')]; }
+function updateBulkBar() {
+  const sel = getSelected();
+  bulkCount.textContent = sel.length;
+  bulkDel.disabled = sel.length === 0;
+  bulkDel.style.opacity = sel.length === 0 ? '.4' : '1';
+}
+function enterEditMode() {
+  document.body.classList.add('edit-mode');
+  libManageBtn.classList.add('active');
+  libManageLabel.textContent = '完成';
+  updateBulkBar();
+}
+function exitEditMode() {
+  document.body.classList.remove('edit-mode');
+  libManageBtn.classList.remove('active');
+  libManageLabel.textContent = '管理资产';
+  document.querySelectorAll('.asset-card.selected').forEach(c => c.classList.remove('selected'));
+}
+libManageBtn.addEventListener('click', () => {
+  if (document.body.classList.contains('edit-mode')) exitEditMode();
+  else enterEditMode();
+});
+bulkExit.addEventListener('click', exitEditMode);
+bulkClear.addEventListener('click', () => {
+  document.querySelectorAll('.asset-card.selected').forEach(c => c.classList.remove('selected'));
+  updateBulkBar();
+});
+bulkDel.addEventListener('click', () => {
+  const sel = getSelected();
+  if (!sel.length) return;
+  openDelConfirm(sel);
+});
+
+// 编辑模式下,卡片点击切换 selected (不再 toast / 打开)
+document.querySelectorAll('.asset-card').forEach(card => {
+  card.addEventListener('click', e => {
+    if (!document.body.classList.contains('edit-mode')) return;
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    card.classList.toggle('selected');
+    updateBulkBar();
+  }, true);
+});
+
+/* ============================================================
+   资产详情 modal · 替代旧 Shell.toast 点击
+   ============================================================ */
+(function () {
+  // 注入 modal HTML
+  const modalHTML = `
+  <div class="lib-detail-bg" id="lib-detail-bg" style="position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000; display:none; align-items:center; justify-content:center; padding:40px;">
+    <div class="lib-detail" style="background:var(--surface); border:1px solid var(--border-faint); border-radius:var(--r-md); width:min(880px,100%); max-height:calc(100vh - 80px); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 16px 48px rgba(0,0,0,.18);">
+      <div style="display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--border-faint);">
+        <h2 id="lib-detail-title" style="font-size:15px; font-weight:600;">资产详情</h2>
+        <span id="lib-detail-kind" style="font-family:var(--font-mono); font-size:11px; color:var(--black-alpha-48);">// kind</span>
+        <button id="lib-detail-x" type="button" aria-label="关闭" style="width:30px; height:30px; display:grid; place-items:center; background:transparent; border:0; cursor:pointer; color:var(--black-alpha-56); border-radius:var(--r-sm); margin-left:auto;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+      </div>
+      <div style="padding:22px 24px; overflow-y:auto; flex:1;">
+        <div style="display:grid; grid-template-columns:1fr 1fr; gap:22px;">
+          <div>
+            <div class="placeholder" style="aspect-ratio:3/4;" id="lib-detail-lead-img"><span class="ph-frame">立绘 / 主图</span></div>
+            <div style="font-family:var(--font-mono); font-size:10.5px; color:var(--black-alpha-48); letter-spacing:.06em; text-transform:uppercase; margin:14px 0 8px;">// 三视图</div>
+            <div id="lib-detail-tri" style="display:grid; grid-template-columns:repeat(3,1fr); gap:8px;">
+              <div class="placeholder" style="aspect-ratio:1;"><span class="ph-frame">正面</span></div>
+              <div class="placeholder" style="aspect-ratio:1;"><span class="ph-frame">侧面</span></div>
+              <div class="placeholder" style="aspect-ratio:1;"><span class="ph-frame">背面</span></div>
+            </div>
+          </div>
+          <div>
+            <div style="font-family:var(--font-mono); font-size:10.5px; color:var(--black-alpha-48); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;">// 基础信息</div>
+            <div id="lib-detail-info"></div>
+            <div id="lib-detail-tip" style="display:none; margin-top:10px; padding:10px 12px; background:var(--heat-12); border:1px solid var(--heat-20); border-radius:var(--r-sm); font-size:12px; color:var(--accent-black); align-items:center; gap:8px; line-height:1.5;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="color:var(--heat); flex-shrink:0;"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+              <span>暂无三视图,建议用 AI 生成以保证多角度一致性</span>
+              <button id="lib-detail-aigen" type="button" style="margin-left:auto; height:26px; padding:0 10px; background:var(--heat); color:var(--accent-white); border:1px solid var(--heat); border-radius:var(--r-sm); font-size:11.5px; cursor:pointer; flex-shrink:0;">AI 生成三视图</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="padding:14px 20px; border-top:1px solid var(--border-faint); display:flex; justify-content:flex-end; gap:8px;">
+        <button class="btn btn-ghost" type="button" id="lib-detail-close">关闭</button>
+        <button class="btn btn-primary" type="button" id="lib-detail-apply">应用到当前项目</button>
+      </div>
+    </div>
+  </div>`;
+  document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+  const bg = document.getElementById('lib-detail-bg');
+  const titleEl = document.getElementById('lib-detail-title');
+  const kindEl = document.getElementById('lib-detail-kind');
+  const leadImg = document.getElementById('lib-detail-lead-img');
+  const triEl = document.getElementById('lib-detail-tri');
+  const infoEl = document.getElementById('lib-detail-info');
+  const tipEl = document.getElementById('lib-detail-tip');
+
+  function open(card) {
+    const name = card.dataset.name || '资产';
+    let kind = 'asset', info = [];
+    if (card.dataset.gender) { // 人物
+      kind = '人物 · 模特';
+      info = [
+        ['类别', '人物'],
+        ['性别', card.dataset.gender || '—'],
+        ['年龄段', card.dataset.age || '—'],
+        ['角色', card.dataset.role || '—'],
+        ['来源', card.dataset.source || '—'],
+        ['使用次数', (card.dataset.used || '0') + ' 次'],
+      ];
+    } else if (card.dataset.sceneType) {
+      kind = '场景';
+      info = [
+        ['类别', '场景'],
+        ['场景类型', card.dataset.sceneType],
+        ['来源', card.dataset.source || '—'],
+        ['使用次数', (card.dataset.used || '0') + ' 次'],
+      ];
+    } else if (card.dataset.product) {
+      kind = '商品资产';
+      info = [
+        ['类别', '商品'],
+        ['关联商品', card.dataset.product],
+        ['来源', card.dataset.source || '—'],
+        ['使用次数', (card.dataset.used || '0') + ' 次'],
+      ];
+    } else {
+      kind = 'AI 素材';
+      info = [
+        ['名称', name],
+        ['来源', card.dataset.source || '—'],
+      ];
+    }
+    titleEl.textContent = name;
+    kindEl.textContent = '// ' + kind;
+    leadImg.innerHTML = '<span class="ph-frame">' + name + '</span>';
+    // 三视图:人物显示,其他默认提示
+    if (card.dataset.gender) {
+      triEl.style.display = 'grid';
+      tipEl.style.display = 'none';
+    } else if (card.dataset.product) {
+      // 商品:若未上传则提示 AI 生成
+      triEl.style.display = 'grid';
+      tipEl.style.display = 'flex';
+    } else {
+      triEl.style.display = 'none';
+      tipEl.style.display = 'none';
+    }
+    infoEl.innerHTML = info.map(([k, v]) => '<div style="display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--border-faint); font-size:12.5px;"><span style="color:var(--black-alpha-56); font-family:var(--font-mono); font-size:11px;">' + k + '</span><span style="color:var(--accent-black);">' + v + '</span></div>').join('');
+    bg.style.display = 'flex';
+  }
+  function close() { bg.style.display = 'none'; }
+
+  bg.addEventListener('click', e => { if (e.target === bg) close(); });
+  document.getElementById('lib-detail-x').addEventListener('click', close);
+  document.getElementById('lib-detail-close').addEventListener('click', close);
+  document.getElementById('lib-detail-apply').addEventListener('click', () => {
+    Shell.toast('已应用「' + titleEl.textContent + '」', '已加入当前项目');
+    close();
+  });
+  document.getElementById('lib-detail-aigen').addEventListener('click', () => {
+    Shell.toast('AI 生成三视图中', '约 12s · POST /assets/tri-view');
+  });
+
+  // 把所有 .asset-card 的旧 onclick="Shell.toast(...)" 清掉,改成 open(card)
+  document.querySelectorAll('.asset-card').forEach(card => {
+    if (card.onclick) card.onclick = null;
+    card.removeAttribute('onclick');
+    card.style.cursor = 'pointer';
+    card.addEventListener('click', e => {
+      if (document.body.classList.contains('edit-mode')) return; // 编辑模式由更早 capture handler 处理
+      if (e.target.closest('.card-del-btn')) return;
+      open(card);
+    });
+  });
+})();
+</script>
+</body>
+</html>
diff --git a/v2/model-photo.html b/v2/model-photo.html
new file mode 100644
index 0000000..795dbe8
--- /dev/null
+++ b/v2/model-photo.html
@@ -0,0 +1,1961 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>模特上身图 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* viewport-fit · 工作台铺满 */
+  .app { height: 100vh; overflow: hidden; }
+  main { display: flex; flex-direction: column; min-height: 0; }
+  #page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 24px 28px 0; }
+  .page-head { flex-shrink: 0; margin-bottom: 16px; }
+
+  .mp-layout {
+    flex: 1; min-height: 0;
+    display: grid;
+    grid-template-columns: 220px 360px 1fr;
+    gap: 20px;
+    padding-bottom: 24px;
+  }
+  @media (max-width: 1280px) {
+    .mp-layout { grid-template-columns: 200px 340px 1fr; gap: 16px; }
+  }
+
+  /* ─── 任务栏 (最左 · 历史任务列表) ─── */
+  .mp-tasks-panel {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+  .mp-tasks-h {
+    display: flex; align-items: center; gap: 6px;
+    padding: 14px 16px 10px;
+    border-bottom: 1px solid var(--border-faint);
+    font-size: 13px; font-weight: 600; color: var(--accent-black);
+  }
+  .mp-tasks-h .ct {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    margin-left: auto;
+  }
+  .mp-tasks-h .new {
+    margin-left: 6px;
+    width: 24px; height: 24px;
+    display: grid; place-items: center;
+    background: var(--heat-12); color: var(--heat);
+    border: 0; border-radius: var(--r-sm);
+    cursor: pointer;
+    transition: background var(--t-base);
+  }
+  .mp-tasks-h .new:hover { background: var(--heat-20); }
+  .mp-tasks-h .new svg { width: 12px; height: 12px; }
+  .mp-tasks-list {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    padding: 8px;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .mp-tasks-empty {
+    padding: 24px 14px;
+    text-align: center;
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    line-height: 1.55;
+  }
+  .mp-tasks-empty .mono {
+    font-family: var(--font-mono); font-size: 10.5px;
+    letter-spacing: .02em; display: block; margin-top: 4px;
+  }
+  .mp-task-card {
+    padding: 10px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    transition: background var(--t-base), border-color var(--t-base);
+    position: relative;
+  }
+  .mp-task-card:hover { background: var(--surface); border-color: var(--black-alpha-24); }
+  .mp-task-card.active { background: var(--heat-12); border-color: var(--heat-20); }
+  .mp-task-card .nm {
+    font-size: 12.5px; font-weight: 600; color: var(--accent-black);
+    line-height: 1.35;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    padding-right: 18px;
+  }
+  .mp-task-card.active .nm { color: var(--heat); }
+  .mp-task-card .meta {
+    margin-top: 4px;
+    font-family: var(--font-mono); font-size: 10px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .mp-task-card .meta .pill-mini {
+    padding: 1px 6px; border-radius: var(--r-pill);
+    font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
+  }
+  .mp-task-card .meta .pill-mini.gen { background: var(--heat-12); color: var(--heat); }
+  .mp-task-card .meta .pill-mini.ok { background: var(--forest-bg); color: var(--accent-forest); }
+  .mp-task-card .meta .pill-mini.err { background: var(--crimson-bg); color: var(--accent-crimson); }
+  .mp-task-card .x {
+    position: absolute; top: 6px; right: 6px;
+    width: 18px; height: 18px;
+    display: grid; place-items: center;
+    background: transparent; border: 0;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    color: var(--black-alpha-48);
+    opacity: 0;
+    transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
+  }
+  .mp-task-card:hover .x { opacity: 1; }
+  .mp-task-card .x:hover { background: var(--black-alpha-8); color: var(--accent-crimson); }
+  .mp-task-card .x svg { width: 10px; height: 10px; }
+
+  /* ─── 左栏 · 表单 ─── */
+  .mp-form {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    overflow-y: auto;
+    padding: 18px 20px;
+    display: flex; flex-direction: column;
+  }
+  .mp-step { margin-bottom: 22px; }
+  .mp-step:last-child { margin-bottom: 0; }
+  .mp-step-h {
+    display: flex; align-items: center; gap: 8px;
+    margin-bottom: 12px;
+  }
+  .mp-step-h .num {
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    background: var(--heat-12); color: var(--heat);
+    font-family: var(--font-mono); font-size: 11px;
+    font-weight: 700;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .mp-step-h .title { font-size: 14px; font-weight: 600; color: var(--accent-black); }
+  .mp-step-h .right { margin-left: auto; font-size: 12px; color: var(--heat); cursor: pointer; }
+  .mp-step-h .right:hover { text-decoration: underline; }
+
+  /* 商品选择器 · 已选 chip 列表 */
+  .prod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
+  .prod-row {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .prod-row .thumb {
+    width: 28px; height: 28px;
+    flex-shrink: 0;
+    border-radius: var(--r-sm);
+  }
+  .prod-row .info { flex: 1; min-width: 0; }
+  .prod-row .nm {
+    font-size: 12.5px; color: var(--accent-black); font-weight: 500;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .prod-row .meta {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    margin-top: 2px;
+  }
+  .prod-row .x {
+    width: 22px; height: 22px;
+    display: grid; place-items: center;
+    background: transparent; border: 0;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    color: var(--black-alpha-48);
+    flex-shrink: 0;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .prod-row .x:hover { background: var(--black-alpha-8); color: var(--accent-crimson); }
+  .prod-row .x svg { width: 12px; height: 12px; }
+  .prod-empty {
+    padding: 14px 10px;
+    text-align: center;
+    background: var(--background-lighter);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-48);
+    font-size: 12px;
+    margin-bottom: 6px;
+  }
+  .prod-empty .mono {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    letter-spacing: .02em;
+    margin-top: 4px;
+  }
+  .prod-add {
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    padding: 8px 10px;
+    background: transparent;
+    border: 1px dashed var(--heat-40);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-size: 12.5px;
+    color: var(--heat);
+    font-family: inherit;
+    transition: background var(--t-base);
+    width: 100%;
+  }
+  .prod-add:hover { background: var(--heat-12); }
+  .prod-add svg { width: 12px; height: 12px; }
+
+  /* 商品库全屏弹窗 (复用 ml-modal-bg 结构) */
+  .pl-modal-bg {
+    position: fixed; inset: 0;
+    background: var(--surface);
+    z-index: 998;
+    display: none;
+  }
+  .pl-modal-bg.show { display: flex; }
+  .pl-modal {
+    margin: 0;
+    flex: 1;
+    background: var(--surface);
+    overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .pl-modal-h {
+    display: flex; align-items: center; gap: 14px;
+    padding: 14px 28px;
+    border-bottom: 1px solid var(--border-faint);
+    flex-shrink: 0;
+  }
+  .pl-modal-h h2 { font-size: 16px; font-weight: 600; }
+  .pl-modal-h .ct {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .pl-modal-h .actions { margin-left: auto; display: flex; gap: 10px; }
+  .pl-modal-body {
+    flex: 1; min-height: 0;
+    display: grid;
+    grid-template-columns: 200px 1fr;
+  }
+  .pl-side {
+    border-right: 1px solid var(--border-faint);
+    padding: 18px 0;
+    overflow-y: auto;
+  }
+  .pl-side .pl-side-h {
+    padding: 0 20px 8px;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .06em;
+  }
+  .pl-side .pl-side-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 9px 20px;
+    cursor: pointer;
+    color: var(--black-alpha-72);
+    font-size: 13px;
+    border-left: 3px solid transparent;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .pl-side .pl-side-item:hover { background: var(--black-alpha-4); }
+  .pl-side .pl-side-item.active {
+    background: var(--heat-12);
+    color: var(--accent-black);
+    border-left-color: var(--heat);
+    font-weight: 600;
+  }
+  .pl-side .pl-side-item .ct {
+    margin-left: auto;
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48);
+  }
+  .pl-main { overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
+  .pl-toolbar {
+    padding: 14px 28px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 12px;
+    flex-shrink: 0;
+  }
+  .pl-toolbar .search {
+    position: relative; flex: 1; max-width: 360px;
+  }
+  .pl-toolbar .search input {
+    width: 100%; height: 32px;
+    padding: 0 10px 0 32px;
+    background: var(--background-lighter);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    font-size: 12.5px;
+    font-family: inherit;
+    color: var(--accent-black);
+    outline: none;
+  }
+  .pl-toolbar .search svg {
+    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
+    width: 14px; height: 14px; color: var(--black-alpha-48);
+  }
+  .pl-toolbar .btn-new {
+    height: 32px;
+    padding: 0 14px;
+    display: inline-flex; align-items: center; gap: 6px;
+    background: var(--surface);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    color: var(--accent-black);
+    font-family: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+    margin-left: auto;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .pl-toolbar .btn-new:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); }
+  .pl-toolbar .btn-new svg { width: 13px; height: 13px; }
+  .pl-scroll {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    padding: 20px 28px 28px;
+  }
+  .pl-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 12px;
+  }
+  .pl-card {
+    position: relative;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 10px;
+    cursor: pointer;
+    display: flex; flex-direction: column; gap: 6px;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .pl-card:hover { background: var(--surface); }
+  .pl-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .pl-card .pl-thumb {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+  }
+  .pl-card .pl-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
+  .pl-card .pl-meta {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .pl-card .pl-check {
+    position: absolute; top: 16px; right: 16px;
+    width: 22px; height: 22px;
+    background: rgba(255,255,255,.95);
+    border: 1.5px solid var(--black-alpha-24);
+    border-radius: 50%;
+    display: grid; place-items: center;
+    z-index: 2;
+    color: var(--accent-white);
+  }
+  .pl-card .pl-check svg { width: 11px; height: 11px; opacity: 0; }
+  .pl-card.selected .pl-check { background: var(--heat); border-color: var(--heat); }
+  .pl-card.selected .pl-check svg { opacity: 1; }
+  /* 卡片右上 actions: 编辑 + 删除 (hover 显示, check 左侧) */
+  .pl-card .pl-card-actions {
+    position: absolute;
+    top: 14px; right: 44px;
+    display: flex; gap: 4px;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity var(--t-base);
+  }
+  .pl-card:hover .pl-card-actions { opacity: 1; }
+  .pl-card .pl-act {
+    width: 26px; height: 26px;
+    background: rgba(255,255,255,.95);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    cursor: pointer;
+    color: var(--black-alpha-72);
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .pl-card .pl-act:hover { color: var(--heat); border-color: var(--heat); background: var(--surface); }
+  .pl-card .pl-act.danger:hover { color: var(--accent-crimson); border-color: var(--accent-crimson); }
+  .pl-card .pl-act svg { width: 12px; height: 12px; }
+  .pl-modal-f {
+    padding: 14px 28px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
+    flex-shrink: 0;
+  }
+  .pl-modal-f .summary {
+    margin-right: auto;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--black-alpha-56);
+    letter-spacing: .02em;
+  }
+  .pl-modal-f .summary b { color: var(--heat); font-weight: 700; }
+
+  /* 模特选择 · 矩形卡 多选 */
+  .model-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+  .model-card {
+    position: relative;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 8px;
+    cursor: pointer;
+    display: flex; flex-direction: column; gap: 6px;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .model-card:hover { background: var(--surface); }
+  .model-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .model-card .m-thumb {
+    aspect-ratio: 3/4;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    position: relative;
+  }
+  .model-card .m-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
+  .model-card .m-tag {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .model-card .m-check {
+    position: absolute; top: 14px; right: 14px;
+    width: 22px; height: 22px;
+    background: rgba(255,255,255,.95);
+    border: 1.5px solid var(--black-alpha-24);
+    border-radius: 50%;
+    display: grid; place-items: center;
+    color: var(--accent-white);
+    z-index: 2;
+  }
+  .model-card .m-check svg { width: 11px; height: 11px; opacity: 0; }
+  .model-card.selected .m-check { background: var(--heat); border-color: var(--heat); }
+  .model-card.selected .m-check svg { opacity: 1; }
+  .model-upload {
+    grid-column: 1 / -1;
+    aspect-ratio: 2/1;
+    border: 1.5px dashed var(--heat-40);
+    background: var(--heat-12);
+    border-radius: var(--r-md);
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    cursor: pointer;
+    color: var(--heat);
+    font-size: 12.5px;
+    transition: background var(--t-base);
+  }
+  .model-upload:hover { background: var(--heat-20); }
+  .model-upload svg { width: 14px; height: 14px; }
+
+  /* 单选 pill */
+  .pill-row { display: flex; gap: 6px; }
+  .pill-row .opt {
+    flex: 1;
+    height: 32px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-72);
+    font-size: 12.5px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .pill-row .opt:hover { color: var(--accent-black); }
+  .pill-row .opt.active {
+    background: var(--heat-12);
+    color: var(--heat);
+    border-color: var(--heat-40);
+    font-weight: 600;
+  }
+
+  /* 设置 · 子项 */
+  .mp-sub-h {
+    font-size: 12px; color: var(--black-alpha-48);
+    margin-bottom: 6px;
+    font-family: var(--font-mono); letter-spacing: .02em;
+  }
+  .mp-sub { margin-bottom: 12px; }
+  .mp-sub:last-child { margin-bottom: 0; }
+
+  /* 左栏底部 · 立即生成 */
+  .mp-cta {
+    margin-top: auto;
+    padding-top: 14px;
+  }
+  .mp-cta .btn-gen {
+    width: 100%;
+    justify-content: center;
+    padding: 12px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .mp-cta .btn-gen:disabled,
+  .mp-cta .btn-gen.disabled {
+    opacity: .45; cursor: not-allowed; pointer-events: none;
+  }
+  .mp-cta-hint {
+    margin-top: 8px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  /* ─── 右栏 · 预览 ─── */
+  .mp-preview {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 18px 22px;
+    display: flex; flex-direction: column;
+    overflow-y: auto;
+  }
+  .mp-pv-h {
+    display: flex; flex-direction: column; gap: 8px;
+    padding-bottom: 14px; margin-bottom: 16px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .mp-pv-h .row {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 13px; color: var(--black-alpha-72);
+  }
+  .mp-pv-h .row .k {
+    font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .mp-pv-h .row .v {
+    color: var(--accent-black); font-weight: 500;
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .mp-pv-h .row .v .thumb-sm {
+    width: 24px; height: 24px; border-radius: var(--r-sm);
+  }
+  .mp-pv-h .row .swap {
+    margin-left: auto;
+    font-size: 12px; color: var(--heat);
+    cursor: pointer;
+  }
+  .mp-pv-h .row .swap:hover { text-decoration: underline; }
+
+  .mp-pv-grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 10px;
+    align-content: start;
+  }
+  .mp-result {
+    position: relative;
+    aspect-ratio: 3/4;
+    border-radius: var(--r-md);
+    overflow: hidden;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    display: flex; flex-direction: column;
+  }
+  .mp-result .mp-r-thumb { flex: 1; }
+  .mp-result .mp-r-act {
+    padding: 6px 8px;
+    background: rgba(255,255,255,.95);
+    display: flex; align-items: center; gap: 6px;
+    font-size: 11.5px;
+    color: var(--black-alpha-72);
+  }
+  .mp-result .mp-r-act .add-lib {
+    flex: 1;
+    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+    background: var(--surface);
+    border: 1px solid var(--heat-40);
+    border-radius: var(--r-sm);
+    color: var(--heat);
+    height: 24px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 11px;
+    transition: background var(--t-base);
+  }
+  .mp-result .mp-r-act .add-lib:hover { background: var(--heat-12); }
+  .mp-result .mp-r-act .add-lib.added {
+    background: var(--accent-emerald-bg, #e6f4ec);
+    color: var(--accent-emerald, #1f8a51);
+    border-color: var(--accent-emerald-bd, #c4e3d1);
+  }
+  .mp-result .mp-r-act .add-lib svg { width: 11px; height: 11px; }
+
+  .mp-pv-foot {
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-faint);
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-56);
+    letter-spacing: .02em;
+    line-height: 1.6;
+  }
+  .mp-pv-foot a { color: var(--heat); }
+
+  @media (max-width: 1100px) {
+    .mp-layout { grid-template-columns: 1fr; }
+  }
+
+  /* ─── 模特库全屏弹窗 (无遮罩,自适应铺满) ─── */
+  .ml-modal-bg {
+    position: fixed; inset: 0;
+    background: var(--surface);
+    z-index: 999;
+    display: none;
+  }
+  .ml-modal-bg.show { display: flex; }
+  .ml-modal {
+    margin: 0;
+    flex: 1;
+    background: var(--surface);
+    border-radius: 0;
+    overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .ml-modal-h {
+    display: flex; align-items: center;
+    padding: 14px 28px;
+    border-bottom: 1px solid var(--border-faint);
+    flex-shrink: 0;
+  }
+  .ml-modal-h h2 { font-size: 16px; font-weight: 600; }
+  .ml-modal-h .x {
+    margin-left: auto;
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: 0; border-radius: var(--r-sm);
+    cursor: pointer;
+    color: var(--black-alpha-56);
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .ml-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); }
+  .ml-modal-h .x svg { width: 16px; height: 16px; }
+  .ml-modal-body {
+    flex: 1; min-height: 0;
+    display: grid;
+    grid-template-columns: 200px 1fr;
+  }
+  .ml-side {
+    border-right: 1px solid var(--border-faint);
+    padding: 18px 0;
+    overflow-y: auto;
+  }
+  .ml-side .ml-side-h {
+    padding: 0 20px 8px;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .06em;
+  }
+  .ml-side .ml-side-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 9px 20px;
+    cursor: pointer;
+    color: var(--black-alpha-72);
+    font-size: 13px;
+    border-left: 3px solid transparent;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .ml-side .ml-side-item:hover { background: var(--black-alpha-4); }
+  .ml-side .ml-side-item.active {
+    background: var(--heat-12);
+    color: var(--accent-black);
+    border-left-color: var(--heat);
+    font-weight: 600;
+  }
+  .ml-side .ml-side-item .ct {
+    margin-left: auto;
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48);
+  }
+  .ml-main {
+    overflow-y: auto;
+    padding: 0;
+    display: flex; flex-direction: column;
+  }
+  .ml-toolbar {
+    padding: 14px 28px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 18px;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+  }
+  .ml-toolbar .btn-up {
+    height: 32px;
+    padding: 0 14px;
+    display: inline-flex; align-items: center; gap: 6px;
+    background: var(--surface);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    color: var(--accent-black);
+    font-family: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .ml-toolbar .btn-up:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); }
+  .ml-toolbar .btn-up svg { width: 14px; height: 14px; }
+  .ml-toolbar .chip-group {
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .ml-toolbar .chip-group .lbl {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+    margin-right: 4px;
+  }
+  .ml-toolbar .chip {
+    height: 26px;
+    padding: 0 12px;
+    border-radius: 999px;
+    background: transparent;
+    border: 1px solid var(--black-alpha-12);
+    color: var(--black-alpha-72);
+    font-size: 12px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .ml-toolbar .chip:hover { color: var(--accent-black); }
+  .ml-toolbar .chip.active {
+    background: var(--heat-12); color: var(--heat);
+    border-color: var(--heat-40); font-weight: 600;
+  }
+  .ml-scroll {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    padding: 20px 28px 28px;
+  }
+  .ml-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 12px;
+  }
+  .ml-grid .model-card { padding: 10px; }
+
+  /* 模特详情 居中弹窗 */
+  .md-modal-bg { position: fixed; inset: 0; background: rgba(21,20,15,.42); backdrop-filter: blur(8px); z-index: 1000; display: none; align-items: center; justify-content: center; }
+  .md-modal-bg.show { display: flex; }
+  .md-modal {
+    background: var(--surface);
+    border-radius: var(--r-md);
+    max-width: 880px; width: 92%;
+    max-height: 90vh;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+  /* 详情 body 左右分栏:立绘 + 属性 */
+  .md-split {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 24px;
+    margin-bottom: 22px;
+  }
+  .md-portrait {
+    aspect-ratio: 3/4;
+    border-radius: var(--r-md);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    position: relative;
+    overflow: hidden;
+  }
+  .md-portrait .ph-frame {
+    position: absolute;
+    left: 50%; bottom: 12px;
+    transform: translateX(-50%);
+    background: rgba(255,255,255,.85);
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-56);
+    padding: 2px 10px;
+    border-radius: var(--r-sm);
+    letter-spacing: .02em;
+  }
+  .md-portrait .ph-name {
+    position: absolute;
+    left: 0; top: 0;
+    padding: 12px 14px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--black-alpha-72);
+    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0));
+    width: 100%;
+  }
+  .md-right { display: flex; flex-direction: column; }
+  .md-modal-h {
+    padding: 16px 22px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center;
+  }
+  .md-modal-h h3 { font-size: 16px; font-weight: 600; }
+  .md-modal-h .x {
+    margin-left: auto;
+    width: 30px; height: 30px;
+    display: grid; place-items: center;
+    background: transparent; border: 0; cursor: pointer;
+    color: var(--black-alpha-56);
+    border-radius: var(--r-sm);
+  }
+  .md-modal-h .x:hover { background: var(--black-alpha-8); }
+  .md-modal-h .x svg { width: 14px; height: 14px; }
+  .md-modal-body {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    padding: 20px 24px;
+  }
+  .md-section-h {
+    font-size: 13px; font-weight: 600;
+    color: var(--accent-black);
+    margin-bottom: 10px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .md-section-h::before {
+    content: '';
+    width: 3px; height: 14px;
+    background: var(--heat);
+    border-radius: 2px;
+  }
+  .md-attr {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 14px 18px;
+    margin-bottom: 0;
+    display: grid;
+    grid-template-columns: 76px 1fr 76px 1fr;
+    gap: 10px 14px;
+    font-size: 13px;
+    align-items: center;
+  }
+  .md-attr .k {
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono); font-size: 11.5px;
+    letter-spacing: .02em;
+  }
+  .md-attr .v {
+    color: var(--accent-black);
+    font-weight: 500;
+  }
+  .md-feature {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 12px 18px;
+    margin-bottom: 18px;
+    font-size: 13px;
+    color: var(--accent-black);
+    line-height: 1.6;
+  }
+  .md-views-h {
+    font-size: 13px; font-weight: 600;
+    color: var(--accent-black);
+    margin-bottom: 10px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .md-views-h::before {
+    content: '';
+    width: 3px; height: 14px;
+    background: var(--heat);
+    border-radius: 2px;
+  }
+  .md-views {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+  .md-views .md-view {
+    aspect-ratio: 3/4;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    position: relative;
+    display: grid; place-items: end center;
+  }
+  .md-views .md-view .lbl {
+    position: absolute; bottom: 6px;
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48);
+    background: rgba(255,255,255,.85);
+    padding: 1px 6px;
+    border-radius: var(--r-sm);
+  }
+  .md-modal-f {
+    padding: 14px 22px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; justify-content: flex-end; gap: 10px;
+  }
+
+  /* 编辑商品 drawer (复用 .drawer 基础样式, 提高 z-index 覆盖商品库) */
+  .pc-drawer { width: 720px; max-width: 100vw; z-index: 1101; }
+  .pc-drawer .drawer-b { padding: 24px 28px; }
+  #pc-drawer-bg.drawer-bg { z-index: 1100; }
+  .pc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
+  .pc-field-label { font-size: 13px; font-weight: 500; color: var(--accent-black); }
+  .pc-field-label .req { color: var(--accent-crimson); margin-left: 2px; }
+  .pc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
+  .pc-field-row > div { display: flex; flex-direction: column; gap: 6px; }
+  .pc-bullets {
+    list-style: none; padding: 0; margin: 0;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .pc-bullets li {
+    display: flex; align-items: center; gap: 8px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 0 10px;
+    height: 36px;
+  }
+  .pc-bullets li.add { border-style: dashed; border-color: var(--heat-40); }
+  .pc-bullets li .num {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); width: 18px; text-align: center;
+    flex-shrink: 0;
+  }
+  .pc-bullets li.add .num { color: var(--heat); }
+  .pc-bullets li input {
+    flex: 1; border: 0; background: transparent; outline: none;
+    font-size: 13px; color: var(--accent-black);
+    font-family: inherit;
+  }
+  .pc-bullets li input::placeholder { color: var(--black-alpha-48); }
+  .pc-bullets li .rm {
+    width: 22px; height: 22px;
+    background: transparent; border: 0; border-radius: var(--r-sm);
+    color: var(--black-alpha-48); cursor: pointer;
+    display: grid; place-items: center;
+  }
+  .pc-bullets li .rm:hover { color: var(--accent-crimson); background: var(--black-alpha-4); }
+  .pc-bullets li .rm svg { width: 11px; height: 11px; }
+</style>
+</head>
+<body>
+<div id="page">
+
+  <div class="page-head">
+    <div>
+      <h1>模特上身图</h1>
+      <div class="sub"><span class="mono">// 选商品 + 选模特 → 生成 AI 上身效果图</span> · 失败不扣费,采纳入库才计费</div>
+    </div>
+    <div class="actions">
+      <a class="btn" href="asset-factory.html">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+        返回图片生成
+      </a>
+    </div>
+  </div>
+
+  <div class="mp-layout">
+
+    <!-- ===== 最左栏 · 任务历史 ===== -->
+    <div class="mp-tasks-panel" id="tasks-panel">
+      <div class="mp-tasks-h">
+        历史任务
+        <span class="ct" id="tasks-count">0</span>
+        <button class="new" type="button" id="tasks-new-btn" title="新建任务">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
+        </button>
+      </div>
+      <div class="mp-tasks-list" id="tasks-list"></div>
+    </div>
+
+    <!-- ===== 中栏 · 表单 ===== -->
+    <div class="mp-form">
+
+      <!-- ① 选择商品 (单选) -->
+      <div class="mp-step">
+        <div class="mp-step-h">
+          <span class="num">1</span>
+          <span class="title">选择商品</span>
+        </div>
+        <div class="prod-list" id="prod-list">
+          <!-- 已选商品 chip · JS 动态渲染 -->
+        </div>
+        <button class="prod-add" type="button" id="prod-add-btn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+          去商品库添加
+        </button>
+      </div>
+
+      <!-- ② 选择模特 -->
+      <div class="mp-step">
+        <div class="mp-step-h">
+          <span class="num">2</span>
+          <span class="title">选择模特</span>
+          <span class="right" id="open-model-lib">全部模特 →</span>
+        </div>
+        <div class="model-grid" id="model-grid-mini">
+          <div class="model-card" data-id="m1" data-name="Ava">
+            <div class="m-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+            <div class="placeholder m-thumb"><span class="ph-frame">Ava</span></div>
+            <div class="m-name">Ava</div>
+            <div class="m-tag">亚洲·25岁·清新</div>
+          </div>
+          <div class="model-card" data-id="m2" data-name="Luna">
+            <div class="m-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+            <div class="placeholder m-thumb"><span class="ph-frame">Luna</span></div>
+            <div class="m-name">Luna</div>
+            <div class="m-tag">亚洲·22岁·学生</div>
+          </div>
+          <div class="model-card" data-id="m3" data-name="Mia">
+            <div class="m-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+            <div class="placeholder m-thumb"><span class="ph-frame">Mia</span></div>
+            <div class="m-name">Mia</div>
+            <div class="m-tag">混血·28岁·OL</div>
+          </div>
+          <div class="model-card" data-id="m4" data-name="Zoe">
+            <div class="m-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+            <div class="placeholder m-thumb"><span class="ph-frame">Zoe</span></div>
+            <div class="m-name">Zoe</div>
+            <div class="m-tag">亚洲·30岁·健身</div>
+          </div>
+          <div class="model-upload" id="upload-model">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            上传我的模特
+          </div>
+        </div>
+      </div>
+
+      <!-- ③ 生成设置 -->
+      <div class="mp-step">
+        <div class="mp-step-h">
+          <span class="num">3</span>
+          <span class="title">生成设置</span>
+        </div>
+        <div class="mp-sub">
+          <div class="mp-sub-h">// 生成数量 (每模特)</div>
+          <div class="pill-row" data-key="count">
+            <button type="button" class="opt active" data-val="4">4 张</button>
+            <button type="button" class="opt" data-val="8">8 张</button>
+            <button type="button" class="opt" data-val="12">12 张</button>
+          </div>
+        </div>
+        <div class="mp-sub">
+          <div class="mp-sub-h">// 图片比例</div>
+          <div class="pill-row" data-key="ratio">
+            <button type="button" class="opt active" data-val="1:1">1:1</button>
+            <button type="button" class="opt" data-val="3:4">3:4</button>
+            <button type="button" class="opt" data-val="9:16">9:16</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部 立即生成 -->
+      <div class="mp-cta">
+        <button class="btn btn-primary btn-gen" id="mp-go-btn" type="button">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 9-14 9V3z"/></svg>
+          立即生成 (预估 <span id="cost-total">¥1.20</span>)
+        </button>
+        <div class="mp-cta-hint">// 满意后点 [入资产库] 才扣费 · 失败不扣</div>
+      </div>
+
+    </div>
+
+    <!-- ===== 右栏 · 预览 ===== -->
+    <div class="mp-preview">
+      <div class="mp-pv-h">
+        <div class="row">
+          <span class="k">已选商品</span>
+          <span class="v"><span class="placeholder thumb-sm"></span><span id="pv-prod">补水保湿精华液</span></span>
+        </div>
+        <div class="row">
+          <span class="k">已选模特</span>
+          <span class="v" id="pv-model">Ava (亚洲·25岁·清新)</span>
+          <span class="swap" id="pv-swap">更换模特</span>
+        </div>
+        <div class="row">
+          <span class="k">生成</span>
+          <span class="v"><span id="pv-count">4</span> 张 · <span id="pv-ratio">1:1</span></span>
+        </div>
+      </div>
+
+      <div class="mp-pv-grid" id="pv-grid">
+        <!-- 默认 4 张占位; 生成后填充 -->
+        <div class="mp-result"><div class="placeholder mp-r-thumb"><span class="ph-frame">待生成 · 1:1</span></div></div>
+        <div class="mp-result"><div class="placeholder mp-r-thumb"><span class="ph-frame">待生成 · 1:1</span></div></div>
+        <div class="mp-result"><div class="placeholder mp-r-thumb"><span class="ph-frame">待生成 · 1:1</span></div></div>
+        <div class="mp-result"><div class="placeholder mp-r-thumb"><span class="ph-frame">待生成 · 1:1</span></div></div>
+      </div>
+
+      <div class="mp-pv-foot">
+        // 生成结果默认不入资产库,每张图采纳后点 [入资产库] 才扣费并保存
+        <br>// 任务进度可在 <a href="asset-factory.html">任务中心 →</a> 查看
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<!-- ===== 商品库 全屏(无遮罩自适应,多选) ===== -->
+<div class="pl-modal-bg" id="pl-modal-bg">
+  <div class="pl-modal">
+    <div class="pl-modal-h">
+      <h2>商品库</h2>
+      <span class="ct" id="pl-total-ct">// 共 7 个商品</span>
+      <div class="actions">
+        <button class="x" type="button" id="pl-close-btn" aria-label="关闭" style="width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;border-radius:var(--r-sm);cursor:pointer;color:var(--black-alpha-56)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="pl-modal-body">
+      <aside class="pl-side">
+        <div class="pl-side-h">分类</div>
+        <div class="pl-side-item active" data-cat="">全部 <span class="ct" id="pl-ct-all">7</span></div>
+        <div class="pl-side-item" data-cat="美妆个护">美妆个护 <span class="ct">2</span></div>
+        <div class="pl-side-item" data-cat="数码 3C">数码 3C <span class="ct">1</span></div>
+        <div class="pl-side-item" data-cat="食品饮料">食品饮料 <span class="ct">2</span></div>
+        <div class="pl-side-item" data-cat="家居家电">家居家电 <span class="ct">1</span></div>
+        <div class="pl-side-item" data-cat="运动户外">运动户外 <span class="ct">1</span></div>
+      </aside>
+      <div class="pl-main">
+        <div class="pl-toolbar">
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" id="pl-search-input" placeholder="搜索商品名">
+          </div>
+          <button class="btn-new" type="button" id="pl-new-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            新建商品
+          </button>
+        </div>
+        <div class="pl-scroll">
+          <div class="pl-grid" id="pl-grid">
+            <!-- JS 渲染 -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pl-modal-f">
+      <div class="summary">// 已选 <b id="pl-sel-ct">0</b> 个商品</div>
+      <button class="btn" type="button" id="pl-cancel-btn">取消</button>
+      <button class="btn btn-primary" type="button" id="pl-confirm-btn">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
+        确认选择
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 编辑商品 drawer (在商品库内点编辑触发,prefilled) ===== -->
+<div class="drawer-bg" id="pc-drawer-bg"></div>
+<aside class="drawer pc-drawer" id="pc-drawer" role="dialog" aria-label="编辑商品" aria-hidden="true">
+  <div class="drawer-h">
+    <h3 id="pc-drawer-title">编辑商品</h3>
+    <button class="x" type="button" id="pc-drawer-close" aria-label="关闭">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+    </button>
+  </div>
+  <div class="drawer-b">
+    <div class="pc-field">
+      <label class="pc-field-label">商品名称<span class="req">*</span></label>
+      <input class="input" id="pcf-name" placeholder="请输入商品名称(必填)" maxlength="100">
+    </div>
+    <div class="pc-field-row">
+      <div>
+        <label class="pc-field-label">品类<span class="req">*</span></label>
+        <select class="select" id="pcf-cat">
+          <option>美妆个护</option>
+          <option>服饰内衣</option>
+          <option>食品饮料</option>
+          <option>家居家电</option>
+          <option>数码 3C</option>
+          <option>个护清洁</option>
+          <option>运动户外</option>
+          <option>母婴亲子</option>
+        </select>
+      </div>
+      <div>
+        <label class="pc-field-label">目标人群<span style="color:var(--black-alpha-48);margin-left:2px">(选填)</span></label>
+        <input class="input" id="pcf-target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+      </div>
+    </div>
+    <div class="pc-field">
+      <label class="pc-field-label">核心卖点<span class="req">*</span></label>
+      <ul class="pc-bullets" id="pcf-bullets">
+        <li class="add"><span class="num">+</span><input id="pcf-add-input" placeholder="添加新卖点 · 回车确认"></li>
+      </ul>
+    </div>
+  </div>
+  <div class="drawer-f">
+    <button class="btn" type="button" id="pc-cancel-btn">取消</button>
+    <button class="btn btn-primary" type="button" id="pc-save-btn">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+      保存修改
+    </button>
+  </div>
+</aside>
+
+<!-- ===== 模特库 全屏(无遮罩自适应) ===== -->
+<div class="ml-modal-bg" id="ml-modal-bg">
+  <div class="ml-modal">
+    <div class="ml-modal-h">
+      <h2>模特库</h2>
+      <button class="x" type="button" id="ml-close-btn" aria-label="关闭">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+      </button>
+    </div>
+    <div class="ml-modal-body">
+      <aside class="ml-side">
+        <div class="ml-side-h">来源</div>
+        <div class="ml-side-item active" data-source="all">全部 <span class="ct">12</span></div>
+        <div class="ml-side-item" data-source="preset">平台预设 <span class="ct">10</span></div>
+        <div class="ml-side-item" data-source="own">我的上传 <span class="ct">2</span></div>
+      </aside>
+      <div class="ml-main">
+        <div class="ml-toolbar">
+          <div class="chip-group" data-key="gender">
+            <span class="lbl">性别</span>
+            <button class="chip active" type="button" data-val="">全部</button>
+            <button class="chip" type="button" data-val="女">女</button>
+            <button class="chip" type="button" data-val="男">男</button>
+          </div>
+          <div class="chip-group" data-key="age">
+            <span class="lbl">年龄</span>
+            <button class="chip active" type="button" data-val="">全部</button>
+            <button class="chip" type="button" data-val="青年">青年</button>
+            <button class="chip" type="button" data-val="中年">中年</button>
+          </div>
+          <button class="btn-up" type="button" id="ml-upload-btn" style="margin-left:auto">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            上传我的模特
+          </button>
+        </div>
+        <div class="ml-scroll">
+          <div class="ml-grid" id="ml-grid">
+            <!-- 12 个模特卡片 (placeholder) -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 模特详情 居中弹窗 ===== -->
+<div class="md-modal-bg" id="md-modal-bg">
+  <div class="md-modal">
+    <div class="md-modal-h">
+      <h3 id="md-title">模特详情</h3>
+      <button class="x" type="button" id="md-close-btn" aria-label="关闭">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+      </button>
+    </div>
+    <div class="md-modal-body">
+      <div class="md-split">
+        <div class="placeholder md-portrait">
+          <div class="ph-name" id="md-portrait-name">—</div>
+          <div class="ph-frame">立绘 · 3:4</div>
+        </div>
+        <div class="md-right">
+          <div class="md-section-h">角色属性</div>
+          <div class="md-attr">
+            <span class="k">// 文化区域</span><span class="v" id="md-region">—</span>
+            <span class="k">// 气质</span>    <span class="v" id="md-vibe">—</span>
+            <span class="k">// 性别</span>    <span class="v" id="md-gender">—</span>
+            <span class="k">// 体格</span>    <span class="v" id="md-build">—</span>
+            <span class="k">// 年龄段</span>  <span class="v" id="md-age">—</span>
+            <span class="k">// 身高</span>    <span class="v" id="md-height">—</span>
+            <span class="k">// 肤色</span>    <span class="v" id="md-skin">—</span>
+            <span class="k">// 发长</span>    <span class="v" id="md-hairLen">—</span>
+            <span class="k">// 发色</span>    <span class="v" id="md-hairColor">—</span>
+            <span class="k">// 来源</span>    <span class="v" id="md-source">—</span>
+          </div>
+        </div>
+      </div>
+      <div class="md-views-h">全身三视图</div>
+      <div class="md-views">
+        <div class="md-view"><div class="lbl">正面</div></div>
+        <div class="md-view"><div class="lbl">侧面</div></div>
+        <div class="md-view"><div class="lbl">背面</div></div>
+      </div>
+    </div>
+    <div class="md-modal-f">
+      <button class="btn" type="button" id="md-cancel">关闭</button>
+      <button class="btn btn-primary" type="button" id="md-select">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
+        选用此模特
+      </button>
+    </div>
+  </div>
+</div>
+
+<script src="assets/shell.js"></script>
+<script src="assets/new-product-drawer.js"></script>
+<script>
+Shell.render({
+  active: 'asset-factory',
+  crumbs: [
+    { label: '工作台', href: 'index.html' },
+    { label: '图片生成', href: 'asset-factory.html' },
+    { label: '模特上身图' }
+  ]
+});
+
+// ─── 商品库数据 (mock,与 products.html 7 个商品对齐) ───
+const PRODUCTS = [
+  { id: 'p1', name: '透真玻尿酸补水面膜',   cat: '美妆个护', meta: '熬夜党 · 124 素材' },
+  { id: 'p2', name: '南卡 Lite Pro 蓝牙耳机', cat: '数码 3C',  meta: '通勤 · 96 素材' },
+  { id: 'p3', name: '滋啦速食牛肉面 6 桶装',  cat: '食品饮料', meta: '加班 · 96 素材' },
+  { id: 'p4', name: '透真清透物理防晒霜',     cat: '美妆个护', meta: 'SPF50 · 76 素材' },
+  { id: 'p5', name: '三顿半同款冻干咖啡粉',   cat: '食品饮料', meta: '提神 · 68 素材' },
+  { id: 'p6', name: '小熊 4L 可视空气炸锅',   cat: '家居家电', meta: '小户型 · 54 素材' },
+  { id: 'p7', name: '露露同款裸感瑜伽裤',     cat: '运动户外', meta: '健身房 · 42 素材' },
+];
+
+// ─── State (单选) ───
+const state = {
+  selectedProd: 'p1',     // string | null
+  selectedModel: null,    // string | null
+  count: 4,
+  ratio: '1:1',
+};
+const UNIT_PRICE = 0.30;
+
+// ─── 已选商品 渲染 (单选) ───
+function renderSelectedProds() {
+  const list = document.getElementById('prod-list');
+  const id = state.selectedProd;
+  const p = id ? PRODUCTS.find(x => x.id === id) : null;
+  if (!p) {
+    list.innerHTML = '<div class="prod-empty">未选择商品<div class="mono">// 点击下方按钮去商品库选</div></div>';
+    document.getElementById('pv-prod').textContent = '未选择';
+  } else {
+    list.innerHTML = `
+      <div class="prod-row" data-id="${p.id}">
+        <div class="placeholder thumb"></div>
+        <div class="info"><div class="nm">${p.name}</div><div class="meta">${p.cat}</div></div>
+        <button class="x" type="button" data-rm="${p.id}" aria-label="移除">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    `;
+    list.querySelector('button.x[data-rm]').addEventListener('click', () => {
+      state.selectedProd = null;
+      renderSelectedProds();
+    });
+    document.getElementById('pv-prod').textContent = p.name;
+  }
+  updateCost();
+}
+
+// ─── 商品库全屏弹窗 (单选) ───
+let _plDraft = null;        // string | null
+let _plCatFilter = '';
+let _plQuery = '';
+
+function renderProdLib() {
+  const grid = document.getElementById('pl-grid');
+  let list = PRODUCTS;
+  if (_plCatFilter) list = list.filter(p => p.cat === _plCatFilter);
+  if (_plQuery) list = list.filter(p => p.name.includes(_plQuery));
+  grid.innerHTML = list.map(p => `
+    <div class="pl-card${_plDraft === p.id ? ' selected' : ''}" data-id="${p.id}">
+      <div class="pl-card-actions">
+        <button class="pl-act" type="button" data-edit="${p.id}" title="编辑商品" aria-label="编辑">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
+        </button>
+        <button class="pl-act danger" type="button" data-del="${p.id}" title="删除商品" aria-label="删除">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+        </button>
+      </div>
+      <div class="pl-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+      <div class="placeholder pl-thumb"><span class="ph-frame">${p.name}</span></div>
+      <div class="pl-name">${p.name}</div>
+      <div class="pl-meta">${p.cat} · ${p.meta}</div>
+    </div>
+  `).join('');
+  grid.querySelectorAll('.pl-card').forEach(card => {
+    card.addEventListener('click', e => {
+      // 点击编辑/删除按钮不切换选中
+      if (e.target.closest('[data-edit]') || e.target.closest('[data-del]')) return;
+      const id = card.dataset.id;
+      // 单选: 选中当前,取消其他
+      _plDraft = (_plDraft === id) ? null : id;
+      grid.querySelectorAll('.pl-card').forEach(c => c.classList.toggle('selected', c.dataset.id === _plDraft));
+      document.getElementById('pl-sel-ct').textContent = _plDraft ? 1 : 0;
+    });
+  });
+  grid.querySelectorAll('[data-edit]').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      openEditProductDrawer(btn.dataset.edit);
+    });
+  });
+  grid.querySelectorAll('[data-del]').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      const id = btn.dataset.del;
+      const p = PRODUCTS.find(x => x.id === id);
+      if (!p) return;
+      if (!confirm('确认删除「' + p.name + '」?\n该操作不可撤销,商品下生成的素材记录也会一并清理。')) return;
+      // 从 mock 数据移除
+      const idx = PRODUCTS.findIndex(x => x.id === id);
+      if (idx >= 0) PRODUCTS.splice(idx, 1);
+      if (_plDraft === id) _plDraft = null;
+      if (state.selectedProd === id) state.selectedProd = null;
+      renderProdLib();
+      renderSelectedProds();
+      Shell.toast('已删除', p.name);
+    });
+  });
+  document.getElementById('pl-sel-ct').textContent = _plDraft ? 1 : 0;
+}
+
+// ─── 编辑商品 drawer (在商品库内 prefill 数据) ───
+// mock 商品扩展属性 (target + bullets),缺失则给默认值
+const PRODUCT_EXTRA = {
+  p1: { target: '熬夜党 · 25-35 岁女性 · 敏感肌',         bullets: ['72h 长效补水', '官方授权正品', '通勤补妆神器'] },
+  p2: { target: '通勤党 · 18-30 岁 · 大学生 / 白领',       bullets: ['主动降噪 35dB', '蓝牙 5.4 双设备', '32h 续航'] },
+  p3: { target: '加班党 · 独居青年 · 一人食场景',          bullets: ['一杯水即可', '原切牛肉块充足', '6 桶大箱装'] },
+  p4: { target: '通勤防晒 · 油皮 / 敏感肌',                bullets: ['SPF50+ PA++++', '物理防晒不刺激', '清透不假白'] },
+  p5: { target: '咖啡入门 · 早八党 · 加班族',              bullets: ['冷热水即溶', '原产地豆精选', '24 颗精装'] },
+  p6: { target: '小户型 · 健康饮食 · 新手厨房',            bullets: ['4L 大容量', '可视玻璃观察', '一键预设'] },
+  p7: { target: '健身房 · 通勤穿搭 · 18-32 岁女性',        bullets: ['裸感面料', '高弹收腹', '亲肤透气'] },
+};
+
+let _editingProdId = null;
+
+function openEditProductDrawer(id) {
+  const p = PRODUCTS.find(x => x.id === id);
+  if (!p) return;
+  _editingProdId = id;
+  // prefill
+  document.getElementById('pc-drawer-title').textContent = '编辑商品 · ' + p.name;
+  document.getElementById('pcf-name').value = p.name;
+  document.getElementById('pcf-cat').value = p.cat;
+  const extra = PRODUCT_EXTRA[id] || { target: '', bullets: [] };
+  document.getElementById('pcf-target').value = extra.target || '';
+  // 渲染 bullets
+  const ul = document.getElementById('pcf-bullets');
+  // 移除除 .add 之外的所有 li
+  ul.querySelectorAll('li:not(.add)').forEach(li => li.remove());
+  const addLi = ul.querySelector('.add');
+  (extra.bullets || []).forEach((b, i) => {
+    const li = document.createElement('li');
+    li.innerHTML = `
+      <span class="num">${i + 1}</span>
+      <input value="${b.replace(/"/g, '&quot;')}">
+      <button class="rm" type="button" aria-label="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+    `;
+    ul.insertBefore(li, addLi);
+    li.querySelector('.rm').addEventListener('click', () => {
+      li.remove();
+      renumberBullets();
+    });
+  });
+  document.getElementById('pcf-add-input').value = '';
+  document.getElementById('pc-drawer-bg').classList.add('show');
+  document.getElementById('pc-drawer').classList.add('show');
+  document.getElementById('pc-drawer').setAttribute('aria-hidden', 'false');
+}
+
+function renumberBullets() {
+  const ul = document.getElementById('pcf-bullets');
+  [...ul.querySelectorAll('li:not(.add) .num')].forEach((s, i) => { s.textContent = i + 1; });
+}
+
+function closeEditProductDrawer() {
+  document.getElementById('pc-drawer-bg').classList.remove('show');
+  document.getElementById('pc-drawer').classList.remove('show');
+  document.getElementById('pc-drawer').setAttribute('aria-hidden', 'true');
+  _editingProdId = null;
+}
+
+// 新增 bullet · 回车
+document.getElementById('pcf-add-input').addEventListener('keydown', e => {
+  if (e.key !== 'Enter') return;
+  const v = e.target.value.trim();
+  if (!v) return;
+  const ul = document.getElementById('pcf-bullets');
+  const addLi = ul.querySelector('.add');
+  const li = document.createElement('li');
+  li.innerHTML = `
+    <span class="num">0</span>
+    <input value="${v.replace(/"/g, '&quot;')}">
+    <button class="rm" type="button" aria-label="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+  `;
+  ul.insertBefore(li, addLi);
+  li.querySelector('.rm').addEventListener('click', () => { li.remove(); renumberBullets(); });
+  e.target.value = '';
+  renumberBullets();
+});
+
+document.getElementById('pc-drawer-close').addEventListener('click', closeEditProductDrawer);
+document.getElementById('pc-cancel-btn').addEventListener('click', closeEditProductDrawer);
+document.getElementById('pc-drawer-bg').addEventListener('click', closeEditProductDrawer);
+document.getElementById('pc-save-btn').addEventListener('click', () => {
+  if (!_editingProdId) return;
+  const newName = document.getElementById('pcf-name').value.trim();
+  const newCat = document.getElementById('pcf-cat').value;
+  const newTarget = document.getElementById('pcf-target').value.trim();
+  if (!newName) { Shell.toast('请填写商品名称'); return; }
+  // 写回 PRODUCTS
+  const p = PRODUCTS.find(x => x.id === _editingProdId);
+  if (p) { p.name = newName; p.cat = newCat; }
+  // 写回 PRODUCT_EXTRA
+  const bullets = [...document.querySelectorAll('#pcf-bullets li:not(.add) input')].map(i => i.value.trim()).filter(Boolean);
+  PRODUCT_EXTRA[_editingProdId] = { target: newTarget, bullets };
+  Shell.toast('已保存', newName);
+  closeEditProductDrawer();
+  renderProdLib();
+  renderSelectedProds();
+});
+
+document.getElementById('prod-add-btn').addEventListener('click', () => {
+  _plDraft = state.selectedProd;
+  _plCatFilter = '';
+  _plQuery = '';
+  document.getElementById('pl-search-input').value = '';
+  document.querySelectorAll('.pl-side-item').forEach(x => x.classList.toggle('active', x.dataset.cat === ''));
+  renderProdLib();
+  document.getElementById('pl-modal-bg').classList.add('show');
+});
+document.getElementById('pl-close-btn').addEventListener('click', () => {
+  document.getElementById('pl-modal-bg').classList.remove('show');
+});
+document.getElementById('pl-cancel-btn').addEventListener('click', () => {
+  document.getElementById('pl-modal-bg').classList.remove('show');
+});
+document.getElementById('pl-confirm-btn').addEventListener('click', () => {
+  if (!_plDraft) { Shell.toast('请先选择商品', '只能选 1 个'); return; }
+  state.selectedProd = _plDraft;
+  document.getElementById('pl-modal-bg').classList.remove('show');
+  renderSelectedProds();
+});
+document.getElementById('pl-new-btn').addEventListener('click', () => {
+  if (!window.NewProductDrawer) { Shell.toast('Drawer 未加载'); return; }
+  // 商品库保持 open(drawer z-index 1101 > pl-modal-bg 998 会覆盖之上)
+  window.NewProductDrawer.open({
+    onSave: function (p) {
+      // 把新商品注入本页 PRODUCTS,刷新商品库 + 已选列表
+      const product = {
+        id: p.id,
+        name: p.name,
+        cat: p.cat,
+        meta: (p.target ? p.target.split(/[ ,、、]+/)[0] : '新建') + ' · ' + p.imgs + ' 张图',
+      };
+      PRODUCTS.unshift(product);
+      // 单选: 新建商品直接选中(覆盖原选)
+      _plDraft = product.id;
+      state.selectedProd = product.id;
+      // 强制 reset filter/query,保证新商品在首位可见
+      _plCatFilter = '';
+      _plQuery = '';
+      const searchInput = document.getElementById('pl-search-input');
+      if (searchInput) searchInput.value = '';
+      renderProdLib();
+      renderSelectedProds();
+      Shell.toast('已加入商品库', '+ ' + product.name);
+    }
+  });
+});
+document.querySelectorAll('.pl-side-item').forEach(item => {
+  item.addEventListener('click', () => {
+    document.querySelectorAll('.pl-side-item').forEach(x => x.classList.remove('active'));
+    item.classList.add('active');
+    _plCatFilter = item.dataset.cat;
+    renderProdLib();
+  });
+});
+document.getElementById('pl-search-input').addEventListener('input', e => {
+  _plQuery = e.target.value.trim();
+  renderProdLib();
+});
+
+// ─── 模特选择 (单选) ───
+function updateModelSummary() {
+  const id = state.selectedModel;
+  const card = id ? document.querySelector('.model-card[data-id="' + id + '"]') : null;
+  const name = card ? card.dataset.name : '';
+  document.getElementById('pv-model').textContent = name
+    ? name + ' (亚洲·25岁·清新)'
+    : '未选择';
+  updateCost();
+}
+function updateCost() {
+  const hasProd  = !!state.selectedProd;
+  const hasModel = !!state.selectedModel;
+  const total = (hasProd && hasModel ? 1 : 0) * state.count * UNIT_PRICE;
+  document.getElementById('cost-total').textContent = '¥' + total.toFixed(2);
+  const btn = document.getElementById('mp-go-btn');
+  if (!hasProd || !hasModel) btn.classList.add('disabled');
+  else btn.classList.remove('disabled');
+}
+function selectModel(id) {
+  state.selectedModel = (state.selectedModel === id) ? null : id;
+  // 同步所有出现的 model-card (mini grid + lib grid)
+  document.querySelectorAll('.model-card').forEach(c =>
+    c.classList.toggle('selected', c.dataset.id === state.selectedModel)
+  );
+  updateModelSummary();
+}
+document.querySelectorAll('#model-grid-mini .model-card').forEach(card => {
+  card.addEventListener('click', e => {
+    if (e.target.closest('.m-thumb')) {
+      openModelDetail(card.dataset.id);
+      return;
+    }
+    selectModel(card.dataset.id);
+  });
+});
+document.getElementById('upload-model').addEventListener('click', () => {
+  Shell.toast('上传模特', '选择本地图片 (占位)');
+});
+
+// ─── 立即生成设置 ───
+document.querySelectorAll('.pill-row').forEach(row => {
+  row.addEventListener('click', e => {
+    const btn = e.target.closest('.opt');
+    if (!btn) return;
+    row.querySelectorAll('.opt').forEach(o => o.classList.remove('active'));
+    btn.classList.add('active');
+    const key = row.dataset.key;
+    state[key] = isNaN(+btn.dataset.val) ? btn.dataset.val : +btn.dataset.val;
+    if (key === 'count') document.getElementById('pv-count').textContent = btn.dataset.val;
+    if (key === 'ratio') document.getElementById('pv-ratio').textContent = btn.dataset.val;
+    updateCost();
+  });
+});
+
+// ─── 立即生成 ───
+document.getElementById('mp-go-btn').addEventListener('click', () => {
+  if (!state.selectedModel || !state.selectedProd) return;
+  Shell.toast('已提交任务', '可在 [任务中心] 查看进度');
+  // 模拟: 填充预览区为"生成中" 占位
+  const grid = document.getElementById('pv-grid');
+  grid.innerHTML = '';
+  for (let i = 0; i < state.count; i++) {
+    const div = document.createElement('div');
+    div.className = 'mp-result';
+    div.innerHTML = `
+      <div class="placeholder mp-r-thumb"><span class="ph-frame">生成中... ${state.ratio}</span></div>
+      <div class="mp-r-act">
+        <button class="add-lib" type="button" data-cost="${UNIT_PRICE}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 5v14M5 12h14"/></svg>
+          入资产库 ¥${UNIT_PRICE.toFixed(2)}
+        </button>
+      </div>`;
+    grid.appendChild(div);
+  }
+  // 绑定每张图的入库按钮
+  grid.querySelectorAll('.add-lib').forEach(b => {
+    b.addEventListener('click', e => {
+      e.stopPropagation();
+      if (b.classList.contains('added')) return;
+      b.classList.add('added');
+      b.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg> 已入库';
+      Shell.toast('已入库', '已扣 ¥' + (+b.dataset.cost).toFixed(2));
+    });
+  });
+});
+
+// ─── 模特库 全屏 ───
+const MODELS = [
+  { id: 'm1',  name: 'Ava',   gender: '女', age: '青年', style: '清新自然', source: 'preset', used: 12, region: '东亚', skin: '白皙', height: '中等', build: '标准', hairLen: '长发', hairColor: '黑', vibe: '温柔', feature: '邻家女孩气质,微笑亲和' },
+  { id: 'm2',  name: 'Luna',  gender: '女', age: '青年', style: '学生少女', source: 'preset', used: 8,  region: '东亚', skin: '白皙', height: '偏小', build: '纤细', hairLen: '中发', hairColor: '深棕', vibe: '甜美', feature: '校园风,书卷气重' },
+  { id: 'm3',  name: 'Mia',   gender: '女', age: '青年', style: 'OL 通勤',  source: 'preset', used: 5,  region: '东亚', skin: '小麦', height: '中等', build: '标准', hairLen: '短发', hairColor: '黑', vibe: '干练', feature: '都市职场气场,锐利眼神' },
+  { id: 'm4',  name: 'Zoe',   gender: '女', age: '青年', style: '健身运动', source: 'preset', used: 9,  region: '东亚', skin: '健康', height: '偏高', build: '运动', hairLen: '中发', hairColor: '栗色', vibe: '活力', feature: '马尾辫,健身房常客' },
+  { id: 'm5',  name: 'Iris',  gender: '女', age: '中年', style: '都市精致', source: 'preset', used: 3,  region: '东亚', skin: '白皙', height: '中等', build: '标准', hairLen: '中发', hairColor: '酒红', vibe: '优雅', feature: '熟女气场,精致妆容' },
+  { id: 'm6',  name: 'Lily',  gender: '女', age: '青年', style: '甜美韩系', source: 'preset', used: 7,  region: '东亚', skin: '白皙', height: '偏小', build: '纤细', hairLen: '长发', hairColor: '浅棕', vibe: '甜美', feature: '韩系混血感,微卷长发' },
+  { id: 'm7',  name: 'Sora',  gender: '女', age: '青年', style: '日系简约', source: 'preset', used: 6,  region: '东亚', skin: '白皙', height: '中等', build: '纤细', hairLen: '短发', hairColor: '黑', vibe: '清冷', feature: '日系氛围感,齐刘海' },
+  { id: 'm8',  name: 'Eden',  gender: '男', age: '青年', style: '商务通勤', source: 'preset', used: 4,  region: '东亚', skin: '健康', height: '偏高', build: '标准', hairLen: '短发', hairColor: '黑', vibe: '稳重', feature: '商务精英范,西装常驻' },
+  { id: 'm9',  name: 'Kai',   gender: '男', age: '青年', style: '街头潮流', source: 'preset', used: 5,  region: '东亚', skin: '小麦', height: '中等', build: '运动', hairLen: '中发', hairColor: '亚麻', vibe: '潮酷', feature: '街头潮人,鼻钉耳骨钉' },
+  { id: 'm10', name: 'Leo',   gender: '男', age: '中年', style: '熟男品质', source: 'preset', used: 2,  region: '东亚', skin: '健康', height: '偏高', build: '标准', hairLen: '短发', hairColor: '微银', vibe: '沉稳', feature: '熟男魅力,胡须利落' },
+  { id: 'm11', name: 'YouA',  gender: '女', age: '青年', style: '我的模特', source: 'own',    used: 0,  region: '—',   skin: '—',   height: '—',   build: '—',   hairLen: '—',   hairColor: '—',   vibe: '—',   feature: '用户上传素材,未生成特征' },
+  { id: 'm12', name: 'YouB',  gender: '女', age: '青年', style: '我的模特', source: 'own',    used: 0,  region: '—',   skin: '—',   height: '—',   build: '—',   hairLen: '—',   hairColor: '—',   vibe: '—',   feature: '用户上传素材,未生成特征' },
+];
+
+function renderModelLib(filter) {
+  const grid = document.getElementById('ml-grid');
+  let list = MODELS;
+  if (filter.source && filter.source !== 'all') list = list.filter(m => m.source === filter.source);
+  if (filter.gender) list = list.filter(m => m.gender === filter.gender);
+  if (filter.age) list = list.filter(m => m.age === filter.age);
+  grid.innerHTML = list.map(m => `
+    <div class="model-card${state.selectedModel === m.id ? ' selected' : ''}" data-id="${m.id}" data-name="${m.name}">
+      <div class="m-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+      <div class="placeholder m-thumb"><span class="ph-frame">${m.name} · ${m.style}</span></div>
+      <div class="m-name">${m.name}</div>
+      <div class="m-tag">${m.gender}·${m.age}·${m.style}</div>
+    </div>
+  `).join('');
+  // 绑定 click (单选)
+  grid.querySelectorAll('.model-card').forEach(card => {
+    card.addEventListener('click', e => {
+      if (e.target.closest('.m-thumb')) {
+        openModelDetail(card.dataset.id);
+        return;
+      }
+      selectModel(card.dataset.id);
+    });
+  });
+}
+
+let _libFilter = { source: 'all', gender: '', age: '' };
+document.getElementById('open-model-lib').addEventListener('click', () => {
+  renderModelLib(_libFilter);
+  document.getElementById('ml-modal-bg').classList.add('show');
+});
+document.getElementById('ml-close-btn').addEventListener('click', () => {
+  document.getElementById('ml-modal-bg').classList.remove('show');
+});
+document.getElementById('ml-upload-btn').addEventListener('click', () => {
+  Shell.toast('上传模特', '选择本地图片');
+});
+// 左侧来源 click
+document.querySelectorAll('.ml-side .ml-side-item').forEach(item => {
+  item.addEventListener('click', () => {
+    document.querySelectorAll('.ml-side-item[data-source]').forEach(x => x.classList.remove('active'));
+    item.classList.add('active');
+    _libFilter.source = item.dataset.source;
+    renderModelLib(_libFilter);
+  });
+});
+// 顶部 chip 性别/年龄 click
+document.querySelectorAll('.ml-toolbar .chip-group').forEach(group => {
+  group.addEventListener('click', e => {
+    const chip = e.target.closest('.chip');
+    if (!chip) return;
+    group.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+    chip.classList.add('active');
+    const k = group.dataset.key;
+    _libFilter[k] = chip.dataset.val;
+    renderModelLib(_libFilter);
+  });
+});
+
+// ─── 模特详情 居中弹窗 ───
+let _detailModelId = null;
+function openModelDetail(id) {
+  const m = MODELS.find(x => x.id === id);
+  if (!m) return;
+  _detailModelId = id;
+  document.getElementById('md-title').textContent = m.name + ' · 模特详情';
+  document.getElementById('md-portrait-name').textContent = m.name + ' · ' + m.style;
+  document.getElementById('md-region').textContent    = m.region;
+  document.getElementById('md-gender').textContent    = m.gender;
+  document.getElementById('md-age').textContent       = m.age;
+  document.getElementById('md-vibe').textContent      = m.vibe;
+  document.getElementById('md-build').textContent     = m.build;
+  document.getElementById('md-height').textContent    = m.height;
+  document.getElementById('md-skin').textContent      = m.skin;
+  document.getElementById('md-hairLen').textContent   = m.hairLen;
+  document.getElementById('md-hairColor').textContent = m.hairColor;
+  document.getElementById('md-source').textContent    = m.source === 'preset' ? '平台预设' : '我的上传';
+  document.getElementById('md-modal-bg').classList.add('show');
+}
+document.getElementById('md-close-btn').addEventListener('click', () => {
+  document.getElementById('md-modal-bg').classList.remove('show');
+});
+document.getElementById('md-cancel').addEventListener('click', () => {
+  document.getElementById('md-modal-bg').classList.remove('show');
+});
+document.getElementById('md-select').addEventListener('click', () => {
+  if (_detailModelId) {
+    state.selectedModel = _detailModelId;
+    // 同步所有 model-card (mini + lib)
+    document.querySelectorAll('.model-card').forEach(c =>
+      c.classList.toggle('selected', c.dataset.id === state.selectedModel)
+    );
+    updateModelSummary();
+  }
+  document.getElementById('md-modal-bg').classList.remove('show');
+});
+
+// pv-swap 也打开模特库
+document.getElementById('pv-swap').addEventListener('click', () => {
+  document.getElementById('open-model-lib').click();
+});
+
+// URL ?product=商品名 → 替换默认选中(从 products.html 跳过来时携带)
+(function applyUrlProduct() {
+  const q = new URLSearchParams(location.search);
+  const productName = q.get('product');
+  if (!productName) return;
+  let p = PRODUCTS.find(x => x.name === productName);
+  if (!p) {
+    p = { id: 'np-' + Date.now().toString(36), name: productName, cat: '美妆个护', meta: '新建 · 待补充' };
+    PRODUCTS.unshift(p);
+  }
+  state.selectedProd = p.id;
+})();
+
+// 初始化
+renderSelectedProds();
+updateModelSummary();
+updateCost();
+
+/* ============================================================
+   任务历史 (localStorage) · 仅在「立即生成」时创建任务
+   ============================================================ */
+(function () {
+  'use strict';
+  const TASK_TYPE = 'model';
+  const KEY = 'fs-image-tasks-' + TASK_TYPE;
+
+  let tasks = [];
+  let currentId = null;
+
+  function load() {
+    try { return JSON.parse(localStorage.getItem(KEY) || '[]'); } catch (e) { return []; }
+  }
+  function save(arr) {
+    try { localStorage.setItem(KEY, JSON.stringify(arr)); } catch (e) {}
+  }
+  function escapeHtml(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  function buildSnapshot() {
+    return {
+      selectedProd: state.selectedProd,
+      selectedModel: state.selectedModel,
+      count: state.count,
+      ratio: state.ratio,
+    };
+  }
+  function autoName(snap) {
+    const prod = snap.selectedProd ? PRODUCTS.find(p => p.id === snap.selectedProd) : null;
+    const model = snap.selectedModel ? MODELS.find(m => m.id === snap.selectedModel) : null;
+    const left  = prod  ? (prod.name.length > 10 ? prod.name.slice(0, 10) + '…' : prod.name) : '未选商品';
+    const right = model ? model.name : '未选模特';
+    return `${left} × ${right}`;
+  }
+  function timeNow() {
+    const d = new Date();
+    return ('0'+(d.getMonth()+1)).slice(-2) + '.' + ('0'+d.getDate()).slice(-2) + ' ' + ('0'+d.getHours()).slice(-2) + ':' + ('0'+d.getMinutes()).slice(-2);
+  }
+
+  function renderTasksList() {
+    const root = document.getElementById('tasks-list');
+    document.getElementById('tasks-count').textContent = tasks.length;
+    if (!tasks.length) {
+      root.innerHTML = `<div class="mp-tasks-empty">还没有历史任务<span class="mono">// 调整商品/模特/参数后生成</span></div>`;
+      return;
+    }
+    const STATUS_LABEL = { gen: '生成中', ok: '已完成', err: '失败' };
+    const sorted = [...tasks].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+    root.innerHTML = sorted.map(t => `
+      <div class="mp-task-card${t.id === currentId ? ' active' : ''}" data-id="${t.id}">
+        <div class="nm">${escapeHtml(t.name)}</div>
+        <div class="meta">
+          <span class="pill-mini ${t.status}">${STATUS_LABEL[t.status] || t.status}</span>
+          <span>${escapeHtml(t.time || '')}</span>
+        </div>
+        <button class="x" type="button" data-rm="${t.id}" title="删除">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    `).join('');
+    root.querySelectorAll('.mp-task-card').forEach(card => {
+      card.addEventListener('click', e => {
+        if (e.target.closest('button.x')) return;
+        loadTaskIntoForm(card.dataset.id);
+      });
+    });
+    root.querySelectorAll('button.x[data-rm]').forEach(btn => {
+      btn.addEventListener('click', e => {
+        e.stopPropagation();
+        const id = btn.dataset.rm;
+        const idx = tasks.findIndex(t => t.id === id);
+        if (idx < 0) return;
+        const name = tasks[idx].name;
+        tasks.splice(idx, 1);
+        save(tasks);
+        if (currentId === id) currentId = null;
+        renderTasksList();
+        Shell.toast('已删除任务', name);
+      });
+    });
+  }
+
+  /* ---------- 把历史任务还原到表单 ---------- */
+  function loadTaskIntoForm(id) {
+    const t = tasks.find(x => x.id === id);
+    if (!t) return;
+    state.selectedProd  = t.snap.selectedProd  || null;
+    state.selectedModel = t.snap.selectedModel || null;
+    state.count = t.snap.count;
+    state.ratio = t.snap.ratio;
+    document.querySelectorAll('.pill-row[data-key="count"] .opt').forEach(b => b.classList.toggle('active', +b.dataset.val === state.count));
+    document.querySelectorAll('.pill-row[data-key="ratio"] .opt').forEach(b => b.classList.toggle('active', b.dataset.val === state.ratio));
+    document.querySelectorAll('.model-card').forEach(c => c.classList.toggle('selected', c.dataset.id === state.selectedModel));
+    renderSelectedProds();
+    updateModelSummary();
+    updateCost();
+    currentId = id;
+    renderTasksList();
+  }
+
+  /* ---------- 新建空白任务 (重置表单, 不写库) ---------- */
+  function newBlankTask() {
+    state.selectedProd  = null;
+    state.selectedModel = null;
+    state.count = 4;
+    state.ratio = '1:1';
+    document.querySelectorAll('.pill-row[data-key="count"] .opt').forEach(b => b.classList.toggle('active', +b.dataset.val === 4));
+    document.querySelectorAll('.pill-row[data-key="ratio"] .opt').forEach(b => b.classList.toggle('active', b.dataset.val === '1:1'));
+    document.querySelectorAll('.model-card').forEach(c => c.classList.remove('selected'));
+    renderSelectedProds();
+    updateModelSummary();
+    updateCost();
+    const grid = document.getElementById('pv-grid');
+    if (grid) {
+      grid.innerHTML = '';
+      for (let i = 0; i < 4; i++) {
+        const div = document.createElement('div');
+        div.className = 'mp-result';
+        div.innerHTML = `<div class="placeholder mp-r-thumb"><span class="ph-frame">待生成 · 1:1</span></div>`;
+        grid.appendChild(div);
+      }
+    }
+    currentId = null;
+    renderTasksList();
+  }
+
+  /* ---------- 「立即生成」 → 才创建任务 ---------- */
+  document.getElementById('mp-go-btn').addEventListener('click', () => {
+    if (!state.selectedModel || !state.selectedProd) return;
+    const snap = buildSnapshot();
+    const name = autoName(snap);
+    const time = timeNow();
+    if (currentId) {
+      const t = tasks.find(x => x.id === currentId);
+      if (t) { t.snap = snap; t.name = name; t.status = 'gen'; t.time = time; }
+    } else {
+      currentId = 'task-' + Date.now();
+      tasks.push({ id: currentId, type: TASK_TYPE, name, snap, status: 'gen', time, createdAt: Date.now() });
+    }
+    save(tasks);
+    renderTasksList();
+  });
+
+  /* ---------- 「+ 新建任务」按钮 ---------- */
+  document.getElementById('tasks-new-btn').addEventListener('click', newBlankTask);
+
+  /* ---------- 初始化 ---------- */
+  tasks = load();
+  renderTasksList();
+})();
+</script>
+</body>
+</html>
diff --git a/v2/pipeline.html b/v2/pipeline.html
new file mode 100644
index 0000000..d96758e
--- /dev/null
+++ b/v2/pipeline.html
@@ -0,0 +1,1737 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>补水面膜 · v3 · 流水线 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── Project header ─── */
+  .proj-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
+  .proj-head h1 { font-size: 20px; font-weight: 700; letter-spacing: -.012em; }
+
+  /* ─── Stepper ─── */
+  .stepper { display: flex; align-items: center; gap: 0; margin-bottom: 28px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); position: relative; }
+  .stepper::before, .stepper::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
+  .stepper::before { top: -7px; left: -7px; }
+  .stepper::after { bottom: -7px; right: -7px; }
+  .stepper .corner-tr, .stepper .corner-bl { position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
+  .stepper .corner-tr { top: -7px; right: -7px; }
+  .stepper .corner-bl { bottom: -7px; left: -7px; }
+  .stage-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; user-select: none; }
+  .stage-step .num { width: 26px; height: 26px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); color: var(--black-alpha-48); flex-shrink: 0; }
+  .stage-step.done .num { background: var(--accent-black); border-color: var(--accent-black); color: var(--accent-white); }
+  .stage-step.active .num { background: var(--heat); border-color: var(--heat); color: var(--accent-white); }
+  .stage-step.locked { opacity: .5; cursor: not-allowed; }
+  .stage-step .lbl { font-size: 13px; font-weight: 500; color: var(--accent-black); }
+  .stage-step.active .lbl { color: var(--accent-black); font-weight: 600; }
+  .stage-step .st { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); margin-left: 4px; padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); letter-spacing: .04em; }
+  .stage-step.active .st { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); }
+  .stage-step:hover .num { border-color: var(--heat-40); }
+  .stage-step:hover .lbl { color: var(--heat); }
+  .stage-line { flex: 1; height: 1px; background: var(--border-faint); margin: 0 14px; min-width: 30px; }
+  .stage-line.done { background: var(--accent-black); }
+
+  /* ─── Stage panes ─── */
+  .stage { display: none; }
+  .stage.active { display: block; }
+
+  /* Common pane */
+  .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); }
+  .pane-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border-faint); }
+  .pane-h strong { font-size: 14px; font-weight: 600; }
+
+  /* Stage foot */
+  .stage-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; margin-top: 18px; border-top: 1px solid var(--border-faint); }
+  .stage-foot .info { font-size: 12.5px; color: var(--black-alpha-56); }
+  .stage-foot .info .mono { font-family: var(--font-mono); color: var(--black-alpha-48); font-size: 11.5px; letter-spacing: .02em; }
+
+  /* === STAGE 1 · 脚本(镜头脚本 : 脚本助手 = 7 : 3,助手在 3:2 基础上再缩 1/4) === */
+  .stage-script { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; min-height: 560px; }
+
+  .chat-pane { display: flex; flex-direction: column; }
+  .chat-body { padding: 16px 18px; flex: 1; overflow-y: auto; max-height: 460px; display: flex; flex-direction: column; gap: 14px; }
+  .msg .bubble { max-width: 90%; padding: 10px 14px; font-size: 13px; line-height: 1.6; border: 1px solid var(--border-faint); border-radius: var(--r-md); }
+  .msg.ai .bubble { background: var(--surface); }
+  .msg.user { display: flex; flex-direction: column; align-items: flex-end; }
+  .msg.user .bubble { background: var(--heat-12); color: var(--accent-black); border-color: var(--heat-20); }
+  .msg .time { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 4px; letter-spacing: .02em; }
+  .msg .actions { display: flex; gap: 6px; margin-top: 6px; }
+  .ai-avatar { width: 26px; height: 26px; background: var(--heat); color: var(--accent-white); display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid var(--heat); border-radius: 50%; }
+  .del { text-decoration: line-through; color: var(--black-alpha-48); }
+  .ins { background: var(--forest-bg); color: var(--accent-forest); padding: 0 3px; }
+  .chat-input { padding: 14px 18px; border-top: 1px solid var(--border-faint); }
+
+  .shot-list { display: flex; flex-direction: column; }
+  .shots-body { padding: 12px 16px; flex: 1; overflow-y: auto; max-height: 540px; display: flex; flex-direction: column; gap: 0; }
+  .shot-card { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; transition: border-color var(--t-base), background var(--t-base); }
+  .shot-card.highlight { border-color: var(--heat); background: var(--heat-12); }
+  .shot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+  .shot-num { width: 22px; height: 22px; background: var(--accent-black); color: var(--accent-white); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; border-radius: var(--r-sm); }
+  .shot-time { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); padding: 2px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); }
+  .shot-row { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 4px 0; }
+  .shot-k { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); padding-top: 2px; letter-spacing: .04em; }
+  .shot-v { font-size: 12.5px; color: var(--accent-black); line-height: 1.55; outline: none; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--t-base); }
+  .shot-v[contenteditable="true"]:hover { background: var(--heat-12); cursor: text; }
+  .shot-v[contenteditable="true"]:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--heat); }
+  .shot-v[data-empty="true"]::before { content: attr(data-placeholder); color: var(--black-alpha-32); font-style: italic; }
+  .icon-mini-btn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--black-alpha-48); background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
+  .icon-mini-btn:hover { color: var(--heat); border-color: var(--heat); }
+
+  /* 镜头卡片间 hover 加分镜插槽 */
+  .shot-insert-gap { height: 14px; position: relative; display: flex; align-items: center; justify-content: center; }
+  .shot-insert-gap .add-shot-btn { opacity: 0; height: 22px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: 999px; font-size: 11.5px; font-family: var(--font-mono); cursor: pointer; box-shadow: var(--shadow-cta); transition: opacity var(--t-base); display: inline-flex; align-items: center; gap: 5px; pointer-events: none; }
+  .shot-insert-gap .add-shot-btn svg { width: 11px; height: 11px; }
+  .shot-insert-gap:hover .add-shot-btn { opacity: 1; pointer-events: auto; }
+  .shot-insert-gap::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: transparent; transition: background var(--t-base); }
+  .shot-insert-gap:hover::before { background: var(--heat-20); }
+
+  /* 镜头脚本空缺省态 */
+  .shots-empty { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--black-alpha-48); }
+  .shots-empty .empty-ico { width: 56px; height: 56px; border: 1px dashed var(--border-faint); border-radius: var(--r-md); display: grid; place-items: center; color: var(--black-alpha-32); }
+  .shots-empty .empty-title { font-size: 14px; font-weight: 500; color: var(--accent-black); }
+  .shots-empty .empty-hint { font-size: 12px; color: var(--black-alpha-56); line-height: 1.55; max-width: 280px; font-family: var(--font-mono); letter-spacing: .02em; }
+
+  /* 对话空态三胶囊 */
+  .chat-empty { padding: 28px 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+  .chat-empty .ce-title { font-size: 13.5px; color: var(--accent-black); font-weight: 500; }
+  .chat-empty .ce-hint { font-size: 11.5px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; }
+  .chat-modes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
+  .chat-mode { height: 30px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 999px; font-size: 12.5px; color: var(--accent-black); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
+  .chat-mode:hover { background: var(--heat-12); border-color: var(--heat); color: var(--heat); }
+  .chat-mode.primary { background: var(--heat-12); border-color: var(--heat); color: var(--heat); }
+  .chat-mode svg { width: 13px; height: 13px; }
+
+  /* AI 思考态 typing indicator */
+  .ai-thinking .dots { display: inline-flex; gap: 3px; }
+  .ai-thinking .dots span { width: 6px; height: 6px; background: var(--black-alpha-32); border-radius: 50%; animation: thinking 1.2s ease-in-out infinite; }
+  .ai-thinking .dots span:nth-child(2) { animation-delay: .2s; }
+  .ai-thinking .dots span:nth-child(3) { animation-delay: .4s; }
+  @keyframes thinking { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
+
+  /* 视口锁定 · 只让主内容区滚动 (sidebar + topbar 固定,不随页面滚) */
+  html, body { height: 100%; overflow: hidden; max-width: 100vw; }
+  .app { height: 100vh; max-height: 100vh; overflow: hidden; }
+  .app > .sidebar { height: 100vh; overflow-y: auto; }
+  .app > main { height: 100vh; max-height: 100vh; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
+  .app > main > .topbar { flex-shrink: 0; }
+  .app > main > .content { flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
+
+  /* === STAGE 2 · 基础资产 === */
+  .stage-assets { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
+  .stage-assets > div { min-width: 0; }
+  .asset-side { position: sticky; top: 16px; align-self: start; }
+  .asset-sec { min-width: 0; }
+  .asset-strip-wrap { min-width: 0; }
+  .asset-side .ttab { padding: 10px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-md); }
+  .asset-side .ttab:hover { background: var(--background-lighter); }
+  .asset-side .ttab.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
+  .asset-side .ttab .num { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-left: auto; }
+  .asset-side .ttab.active .num { color: var(--heat); }
+  .asset-side .info { font-size: 12px; color: var(--black-alpha-48); padding: 14px 12px; line-height: 1.6; margin-top: 14px; border-top: 1px solid var(--border-faint); }
+  .asset-side .info strong { color: var(--black-alpha-56); display: block; }
+  .asset-side .info .mono { font-family: var(--font-mono); }
+
+  .asset-sec { scroll-margin-top: 16px; }
+  .asset-sec + .asset-sec { margin-top: 32px; }
+  .asset-sec .sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+  .asset-sec .sec-h h3 { font-size: 15px; font-weight: 600; }
+  /* .pill-tip 主样式定义在下方 (heat 主色) */
+
+  /* 预设库横滑行(卡片尺寸与主区 .asset-card-2 一致) */
+  .asset-strip-wrap { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
+  .asset-strip-wrap .strip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; }
+  .asset-strip { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 14px; scrollbar-width: thin; }
+  .asset-strip::-webkit-scrollbar { height: 8px; }
+  .asset-strip::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 4px; }
+  .asset-strip .asset-card-2 { flex: 0 0 240px; min-width: 240px; max-width: 240px; }
+
+  /* 「去 XX 库」CTA 胶囊 · 主操作色,更显眼 */
+  .asset-sec .sec-h .pill-tip,
+  .asset-strip-wrap .strip-h .pill-tip {
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 28px; padding: 0 14px;
+    background: var(--heat-12);
+    border: 1px solid var(--heat-20);
+    border-radius: 999px;
+    font-size: 12px; color: var(--heat); font-weight: 500;
+    cursor: pointer; font-family: inherit;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .asset-sec .sec-h .pill-tip:hover,
+  .asset-strip-wrap .strip-h .pill-tip:hover {
+    background: var(--heat); color: var(--accent-white); border-color: var(--heat);
+    box-shadow: var(--shadow-cta);
+  }
+  .asset-sec .sec-h .pill-tip svg,
+  .asset-strip-wrap .strip-h .pill-tip svg { width: 12px; height: 12px; }
+
+  .asset-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+  /* 商品行:左侧商品卡 + 右侧三视图预览(三视图是单张 16:9 图,不是 3 张) */
+  .prod-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
+  .prod-row > .asset-card-2 { flex: 0 0 240px; max-width: 240px; }
+  .prod-preview { flex: 0 0 360px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px; display: none; flex-direction: column; gap: 10px; }
+  .prod-preview.show { display: flex; }
+  .prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; }
+  .prod-preview-img { aspect-ratio: 16/9; }
+  .prod-preview-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; }
+  .asset-card-2 { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base); }
+  .asset-card-2:hover { border-color: var(--heat-40); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
+  .asset-card-2 .thumb-2 { aspect-ratio: 1; }
+  .asset-card-2 .body-2 { padding: 12px 14px; }
+  .asset-card-2 .body-2 .btn-apply { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); }
+  .asset-card-2 .body-2 .btn-apply:hover { box-shadow: var(--shadow-cta-hover); }
+
+  /* 通用资产详情 modal */
+  .asset-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 40px; }
+  .asset-modal-bg.show { display: flex; }
+  .asset-modal { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); width: min(960px, 100%); max-height: calc(100vh - 80px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
+  .asset-modal-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border-faint); }
+  .asset-modal-h h2 { font-size: 15px; font-weight: 600; }
+  .asset-modal-h .x { width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--black-alpha-56); border-radius: var(--r-sm); margin-left: auto; }
+  .asset-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); }
+  .asset-modal-body { padding: 22px 24px; overflow-y: auto; flex: 1; }
+  .asset-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
+  .asset-detail-lead .placeholder { aspect-ratio: 3/4; }
+  /* 三视图 · 单张 16:9 图 */
+  .asset-detail-tri-row { margin-top: 10px; }
+  .asset-detail-tri-row .placeholder { aspect-ratio: 16 / 9; }
+  .asset-detail-tri-row .placeholder.missing { display: grid; place-items: center; border: 1px dashed var(--border-faint); background: var(--background-lighter); color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 12px; padding: 12px; text-align: center; cursor: pointer; transition: border-color var(--t-base), color var(--t-base); gap: 8px; }
+  .asset-detail-tri-row .placeholder.missing:hover { border-color: var(--heat); color: var(--heat); }
+  .asset-detail-section-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
+  .asset-detail-info .row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border-faint); font-size: 12.5px; }
+  .asset-detail-info .row:last-child { border-bottom: 0; }
+  .asset-detail-info .row .k { color: var(--black-alpha-56); font-family: var(--font-mono); font-size: 11px; }
+  .asset-detail-info .row .v { color: var(--accent-black); }
+  .asset-detail-tip { margin-top: 10px; padding: 10px 12px; background: var(--heat-12); border: 1px solid var(--heat-20); border-radius: var(--r-sm); font-size: 12px; color: var(--accent-black); display: flex; align-items: center; gap: 8px; line-height: 1.5; }
+  .asset-detail-tip svg { width: 14px; height: 14px; color: var(--heat); flex-shrink: 0; }
+  .asset-detail-tip .ai-gen-btn { margin-left: auto; height: 26px; padding: 0 10px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-sm); font-size: 11.5px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
+  .asset-modal-f { padding: 14px 20px; border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; gap: 8px; }
+
+  /* 模特库 / 场景库 全屏弹窗(沿用 model-photo .ml-modal 结构) */
+  .ml-modal-bg { position: fixed; inset: 0; background: var(--surface); z-index: 1000; display: none; }
+  .ml-modal-bg.show { display: flex; }
+  .ml-modal { margin: 0; flex: 1; background: var(--surface); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
+  .ml-modal-h { display: flex; align-items: center; padding: 14px 28px; border-bottom: 1px solid var(--border-faint); flex-shrink: 0; }
+  .ml-modal-h h2 { font-size: 16px; font-weight: 600; }
+  .ml-modal-h .ct { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .ml-modal-h .x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--black-alpha-56); transition: background var(--t-base), color var(--t-base); }
+  .ml-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); }
+  .ml-modal-h .x svg { width: 16px; height: 16px; }
+  .ml-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; }
+  .ml-side { border-right: 1px solid var(--border-faint); padding: 18px 0; overflow-y: auto; }
+  .ml-side .ml-side-h { padding: 0 20px 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; }
+  .ml-side .ml-side-item { display: flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer; color: var(--black-alpha-72); font-size: 13px; border-left: 3px solid transparent; transition: background var(--t-base), color var(--t-base); }
+  .ml-side .ml-side-item:hover { background: var(--black-alpha-4); }
+  .ml-side .ml-side-item.active { background: var(--heat-12); color: var(--accent-black); border-left-color: var(--heat); font-weight: 600; }
+  .ml-side .ml-side-item .ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); }
+  .ml-main { overflow-y: auto; padding: 0; display: flex; flex-direction: column; min-width: 0; }
+  .ml-toolbar { padding: 14px 28px; border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; gap: 18px; flex-shrink: 0; flex-wrap: wrap; }
+  .ml-toolbar .btn-up { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--black-alpha-12); border-radius: var(--r-sm); color: var(--accent-black); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
+  .ml-toolbar .btn-up:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); }
+  .ml-toolbar .btn-up svg { width: 14px; height: 14px; }
+  .ml-toolbar .chip-group { display: inline-flex; align-items: center; gap: 6px; }
+  .ml-toolbar .chip-group .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; margin-right: 4px; }
+  .ml-toolbar .chip { height: 26px; padding: 0 12px; border-radius: 999px; background: transparent; border: 1px solid var(--black-alpha-12); color: var(--black-alpha-72); font-size: 12px; cursor: pointer; font-family: inherit; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
+  .ml-toolbar .chip:hover { color: var(--accent-black); }
+  .ml-toolbar .chip.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); font-weight: 600; }
+  .ml-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; }
+  .ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
+  .ml-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 10px; cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base); display: flex; flex-direction: column; gap: 8px; }
+  .ml-card:hover { border-color: var(--heat-40); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
+  .ml-card .placeholder { aspect-ratio: 3/4; }
+  .ml-card .ml-card-nm { font-size: 13px; font-weight: 500; color: var(--accent-black); }
+  .ml-card .ml-card-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); }
+  .ml-card .ml-card-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
+  .ml-card .ml-card-foot .pill { font-size: 10.5px; padding: 1px 7px; }
+  .ml-card .ml-card-foot .btn-apply { margin-left: auto; height: 26px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-sm); font-size: 11.5px; cursor: pointer; font-family: inherit; }
+  .ml-card .ml-card-foot .btn-apply:hover { box-shadow: var(--shadow-cta-hover); }
+
+  /* 新增人物 modal · 立绘 + 三视图 上传区 */
+  .upload-zone { aspect-ratio: 3/4; background: var(--background-lighter); border: 1px dashed var(--border-faint); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: border-color var(--t-base), background var(--t-base); padding: 16px; text-align: center; color: var(--black-alpha-56); font-size: 12px; }
+  .upload-zone:hover { border-color: var(--heat); background: var(--heat-12); color: var(--heat); }
+  .upload-zone.lead { aspect-ratio: 3/4; }
+  .upload-zone svg { width: 20px; height: 20px; }
+  .upload-zone-tri { aspect-ratio: 1; padding: 8px; font-size: 10.5px; }
+  .prompt-box { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; color: var(--black-alpha-56); margin-top: 8px; line-height: 1.55; font-family: var(--font-mono); letter-spacing: .01em; transition: border-color var(--t-base), background var(--t-base); }
+  .prompt-box[contenteditable="true"] { cursor: text; outline: none; }
+  .prompt-box[contenteditable="true"]:hover { border-color: var(--heat-20); }
+  .prompt-box[contenteditable="true"]:focus { border-color: var(--heat); background: var(--surface); color: var(--accent-black); box-shadow: 0 0 0 3px var(--heat-12); }
+  .fail-icon { width: 28px; height: 28px; background: var(--accent-crimson); color: var(--accent-white); display: grid; place-items: center; font-weight: 700; font-size: 16px; border-radius: 50%; }
+
+  /* === STAGE 3 · 故事板(略缩图竖向侧栏 + 主图区)=== */
+  .stage-storyboard { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: stretch; }
+  .sb-canvas { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 14px; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
+  .sb-scenes-col { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; max-height: 560px; padding-right: 6px; scrollbar-width: thin; }
+  .sb-scenes-col::-webkit-scrollbar { width: 6px; }
+  .sb-scenes-col::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 4px; }
+  .sb-scene-thumb { flex: 0 0 auto; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-base), background var(--t-base); }
+  .sb-scene-thumb:hover { background: var(--background-lighter); }
+  .sb-scene-thumb.selected { border-color: var(--heat); background: var(--heat-12); }
+  .sb-scene-thumb .placeholder { aspect-ratio: 1; }
+  .sb-scene-thumb .nm { font-size: 11.5px; font-weight: 500; color: var(--accent-black); }
+  .sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); }
+  .sb-main-img { aspect-ratio: 16/9; min-height: 0; }
+
+  .sb-stage-actions { display: flex; gap: 8px; margin-bottom: 12px; }
+
+  /* 故事板历史版本 */
+  .sb-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
+  .sb-history-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
+  .sb-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
+  .sb-history-row::-webkit-scrollbar { height: 6px; }
+  .sb-history-row::-webkit-scrollbar-thumb { background: var(--border-faint); }
+  .sb-history-thumb { flex: 0 0 80px; min-width: 80px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); }
+  .sb-history-thumb:hover { border-color: var(--heat); }
+  .sb-history-thumb.current { border-color: var(--heat); background: var(--heat-12); }
+  .sb-history-thumb .placeholder { aspect-ratio: 1; }
+  .sb-history-thumb .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); text-align: center; }
+  .sb-history-thumb.current .ts { color: var(--heat); font-weight: 600; }
+
+  .pill-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
+  .pill-cta.heat { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); }
+  .pill-cta.heat:hover { box-shadow: var(--shadow-cta-hover); }
+  .pill-cta.ghost { background: var(--surface); color: var(--accent-black); border: 1px solid var(--border-faint); }
+  .pill-cta.ghost:hover { background: var(--background-lighter); border-color: var(--heat-20); color: var(--heat); }
+  .pill-cta svg { width: 13px; height: 13px; }
+
+  /* === STAGE 3 / 4 跳过条 === */
+  .skip-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
+
+  .sb-side .pane { padding: 18px; }
+  .prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--black-alpha-56); white-space: pre-wrap; min-height: 200px; outline: none; letter-spacing: .01em; }
+  .prompt-edit:focus { border-color: var(--heat); box-shadow: 0 0 0 3px var(--heat-12); }
+  .asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 11.5px; }
+  .asset-tag .dotc { width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 50%; }
+
+  /* === STAGE 4 · 视频片段 === */
+  .queue-bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); margin-bottom: 18px; }
+  .queue-bar .bar-wrap { flex: 1; height: 6px; background: var(--background-lighter); overflow: hidden; }
+  .queue-bar .bar-wrap > span { display: block; height: 100%; background: var(--heat); }
+
+  .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+  .video-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-base); }
+  .video-card:hover { border-color: var(--heat-40); }
+  .video-thumb { aspect-ratio: 9/16; max-height: 320px; position: relative; border-radius: var(--r-md) var(--r-md) 0 0; }
+  .video-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.05); cursor: pointer; opacity: 0; transition: opacity .15s; }
+  .video-thumb:hover .play { opacity: 1; }
+  .video-thumb .btn-play { width: 36px; height: 36px; background: rgba(0,0,0,.7); color: var(--accent-white); border-radius: 50%; display: grid; place-items: center; }
+  .video-card .body { padding: 10px 12px; }
+
+  /* 视频详情 modal 大视频 + 历史版本 */
+  .vd-main-wrap { display: flex; gap: 18px; align-items: flex-start; }
+  .vd-main { flex: 0 0 280px; aspect-ratio: 9/16; max-height: 460px; }
+  .vd-main .placeholder { aspect-ratio: 9/16; height: 100%; }
+  .vd-info { flex: 1; min-width: 0; }
+  .vd-history { margin-top: 16px; }
+  .vd-history-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
+  .vd-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
+  .vd-history-thumb { flex: 0 0 64px; min-width: 64px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); position: relative; }
+  .vd-history-thumb:hover { border-color: var(--heat); }
+  .vd-history-thumb.current { border-color: var(--heat); background: var(--heat-12); }
+  .vd-history-thumb.adopted::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: var(--heat); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; }
+  .vd-history-thumb .placeholder { aspect-ratio: 9/16; }
+  .vd-history-thumb .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); text-align: center; }
+
+  /* === STAGE 5 · 编辑器 === */
+  .editor { display: grid; grid-template-columns: 1fr 280px; grid-template-rows: 1fr auto; gap: 0; height: 580px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); }
+  .editor-preview { padding: 16px; border-right: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 12px; }
+  .editor-preview .canvas { flex: 1; aspect-ratio: 9/16; max-height: 380px; margin: 0 auto; background:
+    repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 12px),
+    var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono);
+    font-size: 12px; }
+  .editor-preview .controls { display: flex; align-items: center; gap: 8px; justify-content: center; }
+  .ctl-btn { width: 36px; height: 36px; border: 1px solid var(--border-faint); background: var(--surface); color: var(--black-alpha-56); border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
+  .ctl-btn:hover { color: var(--heat); border-color: var(--heat-40); background: var(--heat-12); }
+
+  .editor-props { padding: 16px; border-bottom: 1px solid var(--border-faint); overflow-y: auto; }
+  .props-tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--border-faint); }
+  .props-tabs > div { padding: 8px 12px; font-size: 12.5px; color: var(--black-alpha-56); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+  .props-tabs > div.active { color: var(--heat); border-bottom-color: var(--heat); font-weight: 600; }
+  .style-swatch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .swatch-card { padding: 10px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; }
+  .swatch-card:hover { background: var(--background-lighter); }
+  .swatch-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .swatch-card .demo { font-size: 12px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); margin-bottom: 4px; text-align: center; }
+  .swatch-card .demo.b { background: var(--accent-black); color: var(--accent-white); font-family: serif; }
+  .swatch-card .demo.c { color: var(--heat); -webkit-text-stroke: 0.5px var(--accent-black); }
+  .swatch-card .demo.d { background: var(--accent-honey); color: var(--accent-black); font-weight: 700; }
+  .swatch-card .nm { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
+  .props-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-faint); font-size: 12.5px; }
+  .props-row:last-child { border-bottom: 0; }
+  .props-row .k { color: var(--black-alpha-48); flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
+  .input-mini { width: 90px; padding: 0 10px; height: 28px; font-size: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--black-alpha-12); }
+
+  .timeline { grid-column: 1 / -1; padding: 14px 16px; background: var(--background-base); }
+  .tl-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-faint); }
+  .tl-ruler { display: grid; grid-template-columns: 80px 1fr; align-items: center; padding: 4px 0; font-size: 10.5px; }
+  .tl-ruler .l { font-family: var(--font-mono); color: var(--black-alpha-48); padding-left: 4px; }
+  .tl-ruler .ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); color: var(--black-alpha-48); padding: 0 4px; letter-spacing: .04em; }
+  .tl-track { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 0; padding: 6px 0; }
+  .tl-track .label { font-size: 11.5px; color: var(--black-alpha-56); display: flex; align-items: center; gap: 6px; padding-left: 4px; }
+  .tl-track .label .dot { width: 8px; height: 8px; }
+  .tl-track .lane { display: flex; gap: 2px; height: 30px; position: relative; }
+  .clip { padding: 0 8px; font-size: 11px; display: flex; align-items: center; cursor: pointer; overflow: hidden; white-space: nowrap; user-select: none; }
+  .clip.video { background: var(--heat-12); border: 1px solid var(--heat-40); color: var(--heat); }
+  .clip.video.selected { background: var(--heat); color: var(--accent-white); border-color: var(--heat); }
+  .clip.subtitle { background: var(--forest-bg); border: 1px solid var(--forest-bd); color: var(--accent-forest); }
+  .clip.bgm { background: rgba(144, 97, 255, 0.10); border: 1px solid rgba(144, 97, 255, 0.30); color: var(--accent-amethyst); }
+  .clip .num { font-family: var(--font-mono); font-weight: 700; margin-right: 6px; opacity: .7; }
+  .playhead { position: absolute; top: -16px; bottom: -54px; width: 1px; background: var(--heat); pointer-events: none; }
+  .playhead::before { content: ''; position: absolute; top: -2px; left: -4px; width: 9px; height: 9px; background: var(--heat); transform: rotate(45deg); }
+</style>
+</head>
+<body>
+<div id="page">
+
+<!-- Project header -->
+<div class="proj-head">
+  <div style="display:flex; gap:14px; align-items:center;">
+    <div class="placeholder" style="width:42px;height:54px;"><span class="ph-frame">9:16</span></div>
+    <div>
+      <div style="display:flex; gap:8px; align-items:center;">
+        <h1>补水面膜 · 痛点种草 · v3</h1>
+        <span class="pill info"><span class="dot"></span>进行中</span>
+      </div>
+      <div class="muted-2 mono" style="font-size:11.5px; margin-top:4px; letter-spacing:.02em;">// 透真补水面膜 · AI 全生 · <span id="page-head-shots-meta">待生成镜头脚本</span> · 9:16</div>
+    </div>
+  </div>
+  <div class="hstack">
+    <button class="btn btn-ghost btn-sm" onclick="Shell.toast('分享', '/projects/p3/share')">分享</button>
+    <button class="btn btn-sm" onclick="Shell.toast('已复制项目', '补水面膜 · v4')">复制项目</button>
+    <button class="btn btn-sm" onclick="Shell.toast('归档项目', '/projects/p3/archive')">归档</button>
+  </div>
+</div>
+
+<!-- Stage stepper -->
+<div class="stepper">
+  <span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
+  <a class="stage-step active" data-stage="1" href="#stage-1"><div class="num">1</div><div class="lbl">脚本</div><div class="st">进行中</div></a>
+  <div class="stage-line"></div>
+  <a class="stage-step" data-stage="2" href="#stage-2"><div class="num">2</div><div class="lbl">基础资产</div><div class="st">待开始</div></a>
+  <div class="stage-line"></div>
+  <a class="stage-step" data-stage="3" href="#stage-3"><div class="num">3</div><div class="lbl">故事板</div><div class="st">待开始</div></a>
+  <div class="stage-line"></div>
+  <a class="stage-step" data-stage="4" href="#stage-4"><div class="num">4</div><div class="lbl">视频</div><div class="st">待开始</div></a>
+  <div class="stage-line"></div>
+  <a class="stage-step" data-stage="5" href="#stage-5"><div class="num">5</div><div class="lbl">拼接导出</div><div class="st">待开始</div></a>
+</div>
+
+<!-- ============= STAGE 1 · 脚本 ============= -->
+<section class="stage active" data-stage-pane="1">
+  <div class="stage-script">
+    <div class="pane shot-list">
+      <div class="pane-h">
+        <strong>镜头脚本</strong>
+        <span class="muted-2 mono" id="shots-meta" style="font-size:11px;">· 空 · 待生成</span>
+      </div>
+      <div class="shots-body" id="shots-body">
+        <!-- JS 注入空态/镜头卡片 -->
+      </div>
+    </div>
+
+    <div class="pane chat-pane">
+      <div class="pane-h">
+        <div class="ai-avatar">AI</div>
+        <strong>脚本助手</strong>
+        <span class="muted-2 mono" style="font-size:11px;">· GPT-4o</span>
+        <span class="spacer"></span>
+        <button class="btn btn-ghost btn-sm" id="chat-clear-btn">清空对话</button>
+      </div>
+      <div class="chat-body" id="chat-body">
+        <!-- JS 注入空态/对话内容 -->
+      </div>
+      <div class="chat-input">
+        <textarea class="textarea" id="chat-textarea" placeholder="对脚本的修改诉求 · 比如:让第 3 场更夸张一点、整体加一场结尾……" rows="2"></textarea>
+        <div class="hstack" style="margin-top:8px;">
+          <button class="btn btn-ghost btn-sm" id="chat-regen-btn">↻ 整体重写</button>
+          <span class="spacer"></span>
+          <button class="btn btn-primary" id="chat-send-btn">发送 ⌘↵</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="stage-foot">
+    <div class="info"><span class="mono">[ LLM 用量 ~2.4k tokens · ¥0.04 ]</span></div>
+    <div class="hstack">
+      <button class="btn" onclick="Shell.toast('重新生成', 'POST /script/regen')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 14-5.5L21 9"/><path d="M21 4v5h-5"/><path d="M20 12a8 8 0 0 1-14 5.5L3 15"/><path d="M3 20v-5h5"/></svg> 重新生成全部</button>
+      <button class="btn btn-primary btn-lg" onclick="location.hash='#stage-2'">确认脚本,进入下一步 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button>
+    </div>
+  </div>
+</section>
+
+<!-- ============= STAGE 2 · 基础资产 ============= -->
+<section class="stage" data-stage-pane="2">
+  <div class="stage-assets">
+    <div class="asset-side">
+      <div class="ttab active" data-jump="asset-sec-products"><span>商品</span><span class="num">3 张</span></div>
+      <div class="ttab" data-jump="asset-sec-characters"><span>人物</span><span class="num">2/2</span></div>
+      <div class="ttab" data-jump="asset-sec-scenes"><span>场景</span><span class="num">3/3</span></div>
+      <div class="info">
+        基础资产是后续故事板的素材。所有卡片同时展示,点左侧分类直接定位。
+        <br><br>
+        <strong class="mono">// 人物 +¥0.20/张</strong>
+        <strong class="mono">// 场景 +¥0.15/张</strong>
+        <span style="color:var(--black-alpha-48);">商品图无成本(直接复用商品库)</span>
+      </div>
+    </div>
+
+    <div>
+      <!-- ===== 商品(项目内只有 1 个商品,从 URL ?product= 取)===== -->
+      <section class="asset-sec" id="asset-sec-products">
+        <div class="sec-h">
+          <h3>商品 · <span id="asset-prod-name">透真补水面膜</span></h3>
+          <span class="spacer"></span>
+        </div>
+        <div class="prod-row">
+          <div class="asset-card-2" data-asset-kind="product" data-asset-id="prod-main" id="asset-prod-card">
+            <div class="placeholder thumb-2"><span class="ph-frame" id="asset-prod-thumb-label">透真补水面膜 · 主图</span></div>
+            <div class="body-2">
+              <div class="hstack"><strong style="font-size:13.5px;" id="asset-prod-card-name">透真补水面膜</strong><span class="spacer"></span><span class="pill info" id="asset-prod-pill"><span class="dot"></span>缺三视图</span></div>
+              <div class="hstack" style="margin-top:10px;">
+                <span class="spacer"></span>
+                <button class="btn btn-sm btn-apply" data-stop id="asset-prod-aigen-btn" style="background: var(--heat); color: var(--accent-white); border-color: var(--heat);">AI 生成三视图</button>
+              </div>
+            </div>
+          </div>
+          <div class="prod-preview" id="asset-prod-preview">
+            <div class="prod-preview-h">// 三视图预览 · <span id="prod-preview-status">生成中</span></div>
+            <div class="placeholder prod-preview-img" id="prod-preview-img"></div>
+            <div class="prod-preview-foot" id="prod-preview-foot"></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ===== 人物 ===== -->
+      <section class="asset-sec" id="asset-sec-characters">
+        <div class="sec-h">
+          <h3>人物 · 2 个</h3>
+          <span class="spacer"></span>
+          <button class="btn btn-sm" id="asset-add-character">+ 新增人物</button>
+        </div>
+
+        <div class="asset-grid-2">
+          <div class="asset-card-2" data-asset-kind="character" data-asset-id="ch-linxi">
+            <div class="placeholder thumb-2"><span class="ph-frame">林夕 · 都市白领</span></div>
+            <div class="body-2">
+              <div class="hstack"><strong style="font-size:13.5px;">主角 · 林夕</strong><span class="spacer"></span></div>
+              <div class="prompt-box" contenteditable="true" spellcheck="false" data-stop>25-30 岁都市白领,长发,穿宽松米色家居服,温柔但带点疲倦感。</div>
+              <div class="hstack" style="margin-top:10px;">
+                <button class="btn btn-ghost btn-sm" data-stop data-rerun>重跑</button>
+                <span class="spacer"></span>
+                <button class="btn btn-ghost btn-sm" data-stop data-replace>替换</button>
+              </div>
+            </div>
+          </div>
+          <div class="asset-card-2" data-asset-kind="character" data-asset-id="ch-anan">
+            <div class="placeholder thumb-2">
+              <div style="display:flex; flex-direction:column; gap:8px; align-items:center;">
+                <div class="spinner"></div>
+                <span class="ph-frame">生成中 · 约 8s</span>
+              </div>
+            </div>
+            <div class="body-2">
+              <div class="hstack"><strong style="font-size:13.5px;">朋友/同事 · 阿楠</strong><span class="spacer"></span></div>
+              <div class="prompt-box" contenteditable="true" spellcheck="false" data-stop>25-30 岁同龄女性,短发,穿白色衬衫,妆容精致皮肤好,作为对比。</div>
+              <div class="hstack" style="margin-top:10px;">
+                <button class="btn btn-ghost btn-sm" data-stop data-rerun disabled>重跑</button>
+                <span class="spacer"></span>
+                <button class="btn btn-ghost btn-sm" data-stop data-replace disabled>替换</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </section>
+
+      <!-- ===== 场景 ===== -->
+      <section class="asset-sec" id="asset-sec-scenes">
+        <div class="sec-h">
+          <h3>场景 · 3 个</h3>
+          <span class="spacer"></span>
+          <button class="btn btn-sm" id="asset-add-scene">+ 新增场景</button>
+        </div>
+
+        <div class="asset-grid-2">
+          <div class="asset-card-2" data-asset-kind="scene" data-asset-id="sc-desk">
+            <div class="placeholder thumb-2"><span class="ph-frame">深夜办公桌</span></div>
+            <div class="body-2">
+              <div class="hstack"><strong style="font-size:13.5px;">深夜办公桌</strong><span class="spacer"></span></div>
+              <div class="prompt-box" contenteditable="true" spellcheck="false" data-stop>深夜居家办公环境,木质书桌,台灯暖光,电脑屏幕亮着。</div>
+              <div class="hstack" style="margin-top:10px;">
+                <button class="btn btn-ghost btn-sm" data-stop data-rerun>重跑</button>
+                <span class="spacer"></span>
+                <button class="btn btn-ghost btn-sm" data-stop data-replace>替换</button>
+              </div>
+            </div>
+          </div>
+          <div class="asset-card-2" data-asset-kind="scene" data-asset-id="sc-bed">
+            <div class="placeholder thumb-2"><span class="ph-frame">床头特写</span></div>
+            <div class="body-2">
+              <div class="hstack"><strong style="font-size:13.5px;">卧室床头</strong><span class="spacer"></span></div>
+              <div class="prompt-box" contenteditable="true" spellcheck="false" data-stop>米白色床品,木质床头柜,闹钟显示晚间时间。</div>
+              <div class="hstack" style="margin-top:10px;">
+                <button class="btn btn-ghost btn-sm" data-stop data-rerun>重跑</button>
+                <span class="spacer"></span>
+                <button class="btn btn-ghost btn-sm" data-stop data-replace>替换</button>
+              </div>
+            </div>
+          </div>
+          <div class="asset-card-2" data-asset-kind="scene" data-asset-id="sc-subway">
+            <div class="placeholder thumb-2">
+              <div style="display:flex; flex-direction:column; gap:6px; align-items:center;">
+                <div class="fail-icon">!</div>
+                <span class="ph-frame">生成失败</span>
+              </div>
+            </div>
+            <div class="body-2">
+              <div class="hstack"><strong style="font-size:13.5px;">通勤地铁</strong><span class="spacer"></span><span class="pill err"><span class="dot"></span>失败</span></div>
+              <div class="prompt-box" contenteditable="true" spellcheck="false" data-stop>早高峰地铁车厢,光线偏冷,年轻通勤族,氛围紧张。</div>
+              <div class="hstack" style="margin-top:10px;">
+                <button class="btn btn-ghost btn-sm" data-stop data-rerun>重跑</button>
+                <span class="spacer"></span>
+                <button class="btn btn-ghost btn-sm" data-stop data-replace>替换</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </section>
+    </div>
+  </div>
+
+  <div class="stage-foot">
+    <div class="info"><span class="mono">[ 已确认 ¥0.85 · 待生成 ¥0.20 · 失败 ¥0(不扣) ]</span></div>
+    <div class="hstack">
+      <button class="btn" onclick="location.hash='#stage-1'">← 返回脚本</button>
+      <button class="btn btn-primary btn-lg" onclick="location.hash='#stage-3'">确认资产,进入故事板 →</button>
+    </div>
+  </div>
+</section>
+
+<!-- ============= STAGE 3 · 故事板(按场分) ============= -->
+<section class="stage" data-stage-pane="3">
+  <div class="skip-row">
+    <button class="btn btn-ghost btn-sm" onclick="location.hash='#stage-4'">跳过本步 →</button>
+  </div>
+  <div class="stage-storyboard">
+    <div class="sb-canvas">
+      <div class="sb-scenes-col" id="sb-scenes-row">
+        <!-- JS 注入 略缩图 (竖向) -->
+      </div>
+      <div class="placeholder sb-main-img" id="sb-main-img"><span class="ph-frame">未选择</span></div>
+    </div>
+
+    <div class="sb-side">
+      <div class="pane" style="padding:18px;">
+        <div class="hstack" style="margin-bottom:10px;">
+          <strong style="font-size:14px;">故事板 · <span id="sb-side-scene">场 1</span></strong>
+          <span class="spacer"></span>
+          <span class="pill ok"><span class="dot"></span>已生成</span>
+        </div>
+        <div class="muted-2" style="font-size:12px; line-height:1.55; margin-bottom:14px;">
+          整张故事板由 image-2 一次性输出,包含画面 + 镜头说明。如需修改请编辑下方提示词整张重跑(不能局部改)。
+        </div>
+
+        <div class="muted mono" style="font-size:11px; font-weight:500; margin-bottom:6px; letter-spacing:.04em;">// 本场提示词</div>
+        <div class="prompt-edit" contenteditable="true" id="sb-prompt-edit"></div>
+
+        <div class="sb-stage-actions">
+          <button class="pill-cta heat" id="sb-rerun-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 14-5.5L21 9"/><path d="M21 4v5h-5"/><path d="M20 12a8 8 0 0 1-14 5.5L3 15"/><path d="M3 20v-5h5"/></svg>
+            整张重跑
+          </button>
+          <button class="pill-cta ghost" id="sb-apply-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+            应用
+          </button>
+          <span class="spacer"></span>
+          <span class="muted-2 mono" style="font-size:11px; align-self: center;">~¥0.45/场</span>
+        </div>
+
+        <div class="sb-history">
+          <div class="sb-history-h">// 历史版本(<span id="sb-history-ct">0</span>)</div>
+          <div class="sb-history-row" id="sb-history-row">
+            <div style="font-size: 11.5px; color: var(--black-alpha-48); padding: 12px 4px;">// 暂无历史版本</div>
+          </div>
+        </div>
+
+        <div class="divider" style="margin-top: 16px;"></div>
+
+        <div class="muted mono" style="font-size:11px; font-weight:500; margin-bottom:8px; letter-spacing:.04em;">// 绑定的资产</div>
+        <div style="display:flex; gap:6px; flex-wrap:wrap;" id="sb-bound-assets">
+          <span class="asset-tag"><span class="dotc"></span>林夕(人物)</span>
+          <span class="asset-tag"><span class="dotc"></span>深夜办公桌(场景)</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="stage-foot">
+    <div class="info"><span class="mono">[ image-2 单场 ¥0.45 · 累计 ¥1.35 ]</span></div>
+    <div class="hstack">
+      <button class="btn" onclick="location.hash='#stage-2'"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> 返回资产</button>
+      <button class="btn btn-primary btn-lg" onclick="location.hash='#stage-4'">确认故事板,开始生成视频 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button>
+    </div>
+  </div>
+</section>
+
+<!-- ============= STAGE 4 · 视频(按场分,15s/场) ============= -->
+<section class="stage" data-stage-pane="4">
+  <div class="queue-bar">
+    <div>
+      <div style="font-size:14px; font-weight:600;">视频生成 · 3 / 3 完成</div>
+      <div class="muted-2 mono" style="font-size:11px; margin-top:3px; letter-spacing:.02em;">// 每场 Seedance 约 <span id="seedance-avg">15</span> 秒 · 已完成所有场次</div>
+    </div>
+    <div class="bar-wrap"><span style="width:100%"></span></div>
+    <span class="muted mono" style="font-size:12px;">100%</span>
+    <button class="btn btn-sm" onclick="Shell.toast('全部重跑', 'POST /video/regen-all')">↻ 全部重跑</button>
+  </div>
+
+  <div class="video-grid" id="video-grid">
+    <div class="video-card" data-video-id="v1" data-duration="15">
+      <div class="placeholder video-thumb">
+        <span class="ph-frame">场 1 · 0-15s</span>
+        <div class="play"><div class="btn-play"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor"/></svg></div></div>
+      </div>
+      <div class="body">
+        <div class="hstack"><strong style="font-size:13px;">场 1 · 深夜办公桌</strong><span class="spacer"></span><span class="pill ok"><span class="dot"></span>完成</span></div>
+        <div class="muted-2 mono" style="font-size:11px; margin-top:4px;">15s · 1080×1920 · ¥0.45</div>
+        <div class="hstack" style="margin-top:8px;">
+          <button class="btn btn-ghost btn-sm" data-vstop>↻ 重跑</button>
+          <button class="btn btn-ghost btn-sm" data-vstop>⤓ 下载</button>
+        </div>
+      </div>
+    </div>
+    <div class="video-card" data-video-id="v2" data-duration="12">
+      <div class="placeholder video-thumb">
+        <span class="ph-frame">场 2 · 15-27s</span>
+        <div class="play"><div class="btn-play"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor"/></svg></div></div>
+      </div>
+      <div class="body">
+        <div class="hstack"><strong style="font-size:13px;">场 2 · 面膜包装/特写</strong><span class="spacer"></span><span class="pill ok"><span class="dot"></span>完成</span></div>
+        <div class="muted-2 mono" style="font-size:11px; margin-top:4px;">12s · 1080×1920 · ¥0.45</div>
+        <div class="hstack" style="margin-top:8px;">
+          <button class="btn btn-ghost btn-sm" data-vstop>↻ 重跑</button>
+          <button class="btn btn-ghost btn-sm" data-vstop>⤓ 下载</button>
+        </div>
+      </div>
+    </div>
+    <div class="video-card" data-video-id="v3" data-duration="13">
+      <div class="placeholder video-thumb">
+        <span class="ph-frame">场 3 · 27-40s</span>
+        <div class="play"><div class="btn-play"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor"/></svg></div></div>
+      </div>
+      <div class="body">
+        <div class="hstack"><strong style="font-size:13px;">场 3 · 化妆台/产品定格</strong><span class="spacer"></span><span class="pill ok"><span class="dot"></span>完成</span></div>
+        <div class="muted-2 mono" style="font-size:11px; margin-top:4px;">13s · 1080×1920 · ¥0.45</div>
+        <div class="hstack" style="margin-top:8px;">
+          <button class="btn btn-ghost btn-sm" data-vstop>↻ 重跑</button>
+          <button class="btn btn-ghost btn-sm" data-vstop>⤓ 下载</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="stage-foot">
+    <div class="info"><span class="mono">[ 已完成 3 场 · 累计 ¥1.35 · 总时长 <span id="seedance-total">40</span>s ]</span></div>
+    <div class="hstack">
+      <button class="btn" onclick="location.hash='#stage-3'">← 返回故事板</button>
+      <button class="btn btn-primary btn-lg" onclick="location.hash='#stage-5'">确认视频,进入拼接 →</button>
+    </div>
+  </div>
+</section>
+
+<!-- ===== Stage 4 · 视频详情 modal ===== -->
+<div class="asset-modal-bg" id="video-detail-modal">
+  <div class="asset-modal" style="width: min(880px, 100%);">
+    <div class="asset-modal-h">
+      <h2 id="vd-title">视频详情</h2>
+      <span style="font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48);" id="vd-sub">// 场 1 · 15s</span>
+      <button class="x" type="button" aria-label="关闭"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+    </div>
+    <div class="asset-modal-body">
+      <div class="vd-main-wrap">
+        <div class="vd-main">
+          <div class="placeholder" id="vd-main-img"><span class="ph-frame">大视频预览</span></div>
+        </div>
+        <div class="vd-info">
+          <div class="asset-detail-section-h">// 基础信息</div>
+          <div class="asset-detail-info" id="vd-info"></div>
+          <div class="vd-history">
+            <div class="vd-history-h">// 历史版本 · <span id="vd-history-ct">3</span> 版</div>
+            <div class="vd-history-row" id="vd-history-row"></div>
+          </div>
+          <div class="muted-2" style="font-size: 11.5px; color: var(--black-alpha-56); margin-top: 12px; font-family: var(--font-mono); letter-spacing: .02em;">// 点击历史略缩切换 · 「采用此版」标记当前展示版为最终采用</div>
+        </div>
+      </div>
+    </div>
+    <div class="asset-modal-f">
+      <button class="btn btn-ghost" type="button" data-modal-close>关闭</button>
+      <button class="btn" type="button" id="vd-regen-btn">↻ 重跑本场</button>
+      <button class="btn btn-primary" type="button" id="vd-adopt-btn">采用此版</button>
+    </div>
+  </div>
+</div>
+
+<!-- ============= STAGE 5 · 拼接编辑器 ============= -->
+<section class="stage" data-stage-pane="5">
+  <div class="editor">
+    <div class="editor-preview">
+      <div class="canvas">9:16 预览 · 1080×1920</div>
+      <div class="controls">
+        <button class="ctl-btn" title="上一帧"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 3v10l4-5zM9 3v10l4-5z" fill="currentColor"/></svg></button>
+        <button class="ctl-btn" title="播放" onclick="Shell.toast('播放', '00:08.42 / 00:15.00')"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M5 4l7 4-7 4z" fill="currentColor"/></svg></button>
+        <button class="ctl-btn" title="下一帧"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M13 3v10l-4-5zM7 3v10l-4-5z" fill="currentColor"/></svg></button>
+        <span class="muted mono" style="font-size:12px; margin-left:8px;">00:08.42 / 00:15.00</span>
+      </div>
+    </div>
+
+    <div class="editor-props">
+      <div class="props-tabs">
+        <div class="active">字幕</div>
+        <div>转场</div>
+        <div>BGM</div>
+      </div>
+      <div class="muted mono" style="font-size:11px; font-weight:500; margin-bottom:8px; letter-spacing:.04em;">// 字幕样式</div>
+      <div class="style-swatch">
+        <div class="swatch-card selected"><div class="demo">真实分享</div><div class="nm">朴素白底</div></div>
+        <div class="swatch-card"><div class="demo b">真实分享</div><div class="nm">影视黑底</div></div>
+        <div class="swatch-card"><div class="demo c">真实分享</div><div class="nm">手写描边</div></div>
+        <div class="swatch-card"><div class="demo d">真实分享</div><div class="nm">综艺暖黄</div></div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="muted mono" style="font-size:11px; font-weight:500; margin-bottom:8px; letter-spacing:.04em;">// 当前选中(镜 4)</div>
+      <div class="props-row"><span class="k">起始</span><input class="input-mini" value="00:08.00"></div>
+      <div class="props-row"><span class="k">时长</span><input class="input-mini" value="3.00s"></div>
+      <div class="props-row"><span class="k">音量</span><input class="input-mini" value="100"></div>
+      <div class="props-row"><span class="k">速度</span><input class="input-mini" value="1.0x"></div>
+      <div class="props-row"><span class="k">入场</span><span class="mono" style="font-size:11.5px;">交叉淡化</span></div>
+
+      <div class="divider"></div>
+
+      <div class="muted mono" style="font-size:11px; font-weight:500; margin-bottom:8px; letter-spacing:.04em;">// BGM</div>
+      <div class="props-row" style="border-bottom:0;">
+        <span style="font-size:12px; flex:1;">温柔治愈钢琴 · 0:42</span>
+        <button class="btn btn-ghost btn-sm">替换</button>
+      </div>
+    </div>
+
+    <div class="timeline">
+      <div class="tl-toolbar">
+        <button class="btn btn-ghost btn-sm">↶</button>
+        <button class="btn btn-ghost btn-sm">↷</button>
+        <span class="muted-2" style="font-size:12px;">|</span>
+        <button class="btn btn-ghost btn-sm">分割</button>
+        <button class="btn btn-ghost btn-sm">复制</button>
+        <button class="btn btn-ghost btn-sm">删除</button>
+        <span class="spacer"></span>
+        <span class="muted mono" style="font-size:11px;">缩放</span>
+        <input type="range" min="50" max="200" value="100" style="width:120px;">
+      </div>
+
+      <div class="tl-ruler">
+        <div class="l">// time</div>
+        <div class="ticks">
+          <span>0s</span><span>2s</span><span>5s</span><span>8s</span><span>11s</span><span>13s</span><span>15s</span>
+        </div>
+      </div>
+
+      <div class="tl-track">
+        <div class="label"><span class="dot" style="background:var(--heat);"></span>视频</div>
+        <div class="lane">
+          <div class="clip video" style="flex:2;"><span class="num">1</span> 深夜办公桌</div>
+          <div class="clip video" style="flex:3;"><span class="num">2</span> 面膜包装</div>
+          <div class="clip video" style="flex:3;"><span class="num">3</span> 精华液微距</div>
+          <div class="clip video selected" style="flex:3;"><span class="num">4</span> 敷面膜平躺</div>
+          <div class="clip video" style="flex:2;"><span class="num">5</span> 化妆台</div>
+          <div class="clip video" style="flex:2;"><span class="num">6</span> 产品定格</div>
+        </div>
+      </div>
+
+      <div class="tl-track">
+        <div class="label"><span class="dot" style="background:var(--accent-forest);"></span>字幕</div>
+        <div class="lane" style="position:relative;">
+          <div class="clip subtitle" style="flex:2;">加班三天 脸已经不能看了…</div>
+          <div class="clip subtitle" style="flex:3;">还好我有这个 透真玻尿酸面膜</div>
+          <div class="clip subtitle" style="flex:3;">30g 精华 一片顶三片</div>
+          <div class="clip subtitle" style="flex:3;">敷完起来脸是软的</div>
+          <div class="clip subtitle" style="flex:2;">化妆都能看出来</div>
+          <div class="clip subtitle" style="flex:2;">5 片 ¥39.9 囤起来</div>
+          <div class="playhead" style="left:56%;"></div>
+        </div>
+      </div>
+
+      <div class="tl-track">
+        <div class="label"><span class="dot" style="background:var(--accent-amethyst);"></span>BGM</div>
+        <div class="lane">
+          <div class="clip bgm" style="flex:15;">温柔治愈钢琴 · 0:42(循环 1 次,淡入淡出)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="stage-foot">
+    <div class="info"><span class="mono">[ 合成预估 ~30s · 不消耗 token ]</span></div>
+    <div class="hstack">
+      <button class="btn" onclick="location.hash='#stage-4'"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> 返回片段</button>
+      <button class="btn" onclick="Shell.toast('已保存草稿', '/projects/p3/draft')">保存草稿</button>
+      <button class="btn btn-primary btn-lg" onclick="Shell.toast('开始导出', 'POST /export · 1080P 9:16')">导出 MP4 · 1080P 9:16 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v12m0 0l-5-5m5 5l5-5M4 20h16"/></svg></button>
+    </div>
+  </div>
+</section>
+
+<!-- ===== Stage 2 通用 · 资产详情 modal ===== -->
+<div class="asset-modal-bg" id="asset-detail-modal">
+  <div class="asset-modal">
+    <div class="asset-modal-h">
+      <h2 id="asset-detail-title">资产详情</h2>
+      <span style="font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48);" id="asset-detail-kind">// kind</span>
+      <button class="x" type="button" aria-label="关闭"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+    </div>
+    <div class="asset-modal-body">
+      <div class="asset-detail-grid">
+        <div class="asset-detail-lead">
+          <div class="placeholder" id="asset-detail-lead-img"><span class="ph-frame">立绘</span></div>
+          <div class="asset-detail-section-h" style="margin-top: 14px;">// 三视图</div>
+          <div class="asset-detail-tri-row" id="asset-detail-tri">
+            <div class="placeholder"><span class="ph-frame">正面</span></div>
+            <div class="placeholder"><span class="ph-frame">侧面</span></div>
+            <div class="placeholder"><span class="ph-frame">背面</span></div>
+          </div>
+        </div>
+        <div class="asset-detail-right">
+          <div class="asset-detail-section-h">// 基础信息</div>
+          <div class="asset-detail-info" id="asset-detail-info"></div>
+          <div class="asset-detail-tip" id="asset-detail-tip" style="display:none;">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+            <span>暂无三视图,建议用 AI 生成以保证多角度一致性</span>
+            <button class="ai-gen-btn" type="button">AI 生成三视图</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="asset-modal-f">
+      <button class="btn btn-ghost" type="button" data-modal-close>关闭</button>
+      <button class="btn btn-primary" type="button" id="asset-detail-apply-btn">应用到当前项目</button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== Stage 2 · 新增人物 modal ===== -->
+<div class="asset-modal-bg" id="new-character-modal">
+  <div class="asset-modal" style="width: min(680px, 100%);">
+    <div class="asset-modal-h">
+      <h2>新增人物</h2>
+      <span style="font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48);">// 立绘必填 + 三视图(可 AI 生成)</span>
+      <button class="x" type="button" aria-label="关闭"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+    </div>
+    <div class="asset-modal-body">
+      <div class="field" style="margin-bottom: 14px;">
+        <label class="field-label" style="display:block; font-size: 12.5px; color: var(--black-alpha-56); margin-bottom: 6px;">人物名称</label>
+        <input class="input" type="text" placeholder="例:林夕 · 都市白领" style="width:100%; height:36px; padding:0 12px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); font-size:13px; font-family: inherit;">
+      </div>
+      <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 14px;">
+        <div>
+          <div class="asset-detail-section-h">// 立绘<span style="color: var(--heat); margin-left:2px;">*</span></div>
+          <div class="upload-zone lead" id="nc-upload-lead">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            <span>点击上传立绘</span>
+            <span style="font-family: var(--font-mono); font-size: 10.5px; opacity: .7;">PNG / JPG · ≤10MB</span>
+          </div>
+        </div>
+        <div>
+          <div class="asset-detail-section-h">// 三视图<span style="color: var(--black-alpha-48); font-weight:400; margin-left: 4px; text-transform: none; letter-spacing: 0;">(可选)</span></div>
+          <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;">
+            <div class="upload-zone upload-zone-tri"><span>正面</span></div>
+            <div class="upload-zone upload-zone-tri"><span>侧面</span></div>
+            <div class="upload-zone upload-zone-tri"><span>背面</span></div>
+          </div>
+          <div class="asset-detail-tip" id="nc-tri-tip" style="margin-top: 10px;">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+            <span>没有三视图?上传立绘后用 AI 自动生成</span>
+            <button class="ai-gen-btn" type="button">AI 生成</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="asset-modal-f">
+      <button class="btn btn-ghost" type="button" data-modal-close>取消</button>
+      <button class="btn btn-primary" type="button" id="nc-save-btn">保存人物</button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== Stage 2 · 模特库 / 场景库 全屏弹窗(共享 · kind 切换内容)===== -->
+<div class="ml-modal-bg" id="ml-modal-bg">
+  <div class="ml-modal">
+    <div class="ml-modal-h">
+      <h2 id="ml-modal-title">模特库</h2>
+      <span class="ct" id="ml-modal-ct">// 共 0 个</span>
+      <button class="x" type="button" id="ml-close-btn" aria-label="关闭">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+      </button>
+    </div>
+    <div class="ml-modal-body">
+      <aside class="ml-side" id="ml-side">
+        <!-- JS 注入 来源 -->
+      </aside>
+      <div class="ml-main">
+        <div class="ml-toolbar" id="ml-toolbar">
+          <!-- JS 注入 chips + 上传按钮 -->
+        </div>
+        <div class="ml-scroll">
+          <div class="ml-grid" id="ml-grid">
+            <!-- JS 注入 卡片 -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+</div>
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'projects',
+  crumbs: [{ label: '工作台', href: 'index.html' }, { label: '视频项目', href: 'projects.html' }, { label: '补水面膜 · v3' }]
+});
+
+// hash routing
+function activateStage(n) {
+  document.querySelectorAll('.stage').forEach(s => s.classList.remove('active'));
+  document.querySelector(`[data-stage-pane="${n}"]`)?.classList.add('active');
+
+  document.querySelectorAll('.stage-step').forEach(s => {
+    s.classList.remove('active');
+    if (+s.dataset.stage === +n) s.classList.add('active');
+  });
+
+  const stageNames = { 1:'脚本', 2:'基础资产', 3:'故事板', 4:'视频片段', 5:'拼接导出' };
+  Shell.toast('进入 Stage ' + n + ' · ' + stageNames[n], 'pipeline#stage-' + n);
+}
+function readHash() {
+  const m = location.hash.match(/stage-(\d)/);
+  if (m) activateStage(+m[1]);
+  // ?stage=N query 参数也接收
+  const q = new URLSearchParams(location.search);
+  const s = q.get('stage');
+  if (s) activateStage(+s);
+}
+window.addEventListener('hashchange', readHash);
+readHash();
+
+/* ============================================================
+   STAGE 1 · 脚本助手 + 镜头脚本 状态驱动
+   ============================================================ */
+const Stage1 = (function () {
+  let shots = []; // [{ id, painting, dialog, duration }]
+  let chatMsgs = []; // [{ role, html, time }]
+  let mode = null;
+
+  const $cb = () => document.getElementById('chat-body');
+  const $sb = () => document.getElementById('shots-body');
+  const $sm = () => document.getElementById('shots-meta');
+
+  function now() {
+    const d = new Date();
+    return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+  }
+  function pushMsg(role, html) { chatMsgs.push({ role, html, time: now() }); }
+
+  function renderChat() {
+    const body = $cb(); if (!body) return;
+    if (chatMsgs.length === 0 && !mode) {
+      body.innerHTML = `<div class="chat-empty">
+        <div class="ce-title">选择一种生成方式开始</div>
+        <div class="ce-hint">// 三种,由「最省事」到「最保真原意」</div>
+        <div class="chat-modes">
+          <button class="chat-mode primary" data-mode="ai"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z"/></svg>AI 全生</button>
+          <button class="chat-mode" data-mode="theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15 14a4.65 4.65 0 0 0 1.4-2.5A6 6 0 1 0 6 8c0 1 .23 2.23 1.5 3.5"/></svg>一句话主题</button>
+          <button class="chat-mode" data-mode="manual"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>自带脚本</button>
+        </div>
+      </div>`;
+      body.querySelectorAll('.chat-mode').forEach(btn => {
+        btn.addEventListener('click', () => pickMode(btn.dataset.mode));
+      });
+      return;
+    }
+    body.innerHTML = chatMsgs.map(msg => {
+      if (msg.role === 'ai') {
+        return `<div class="msg ai"><div style="display:flex; gap:10px; align-items:flex-start;"><div class="ai-avatar" style="margin-top:2px;">AI</div><div class="bubble">${msg.html}</div></div><div class="time" style="margin-left:36px;">${msg.time}</div></div>`;
+      }
+      return `<div class="msg user"><div class="bubble">${msg.html}</div><div class="time">${msg.time}</div></div>`;
+    }).join('');
+    body.scrollTop = body.scrollHeight;
+  }
+
+  function renderShots() {
+    const body = $sb(); if (!body) return;
+    const meta = $sm();
+    const phMeta = document.getElementById('page-head-shots-meta');
+    if (shots.length === 0) {
+      body.innerHTML = `<div class="shots-empty">
+        <div class="empty-ico"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M9 5v14"/></svg></div>
+        <div class="empty-title">还没有镜头脚本</div>
+        <div class="empty-hint">// 跟左侧脚本助手对话<br>选择一种方式生成你的第一稿</div>
+      </div>`;
+      if (meta) meta.textContent = '· 空 · 待生成';
+      if (phMeta) phMeta.textContent = '待生成镜头脚本';
+      return;
+    }
+    let cum = 0;
+    let html = '';
+    shots.forEach((s, i) => {
+      const start = cum;
+      cum += (s.duration || 5);
+      const tlabel = start + '-' + cum + 's';
+      html += `<div class="shot-card" data-id="${s.id}">
+        <div class="shot-head">
+          <div class="shot-num">${i + 1}</div>
+          <div class="shot-time">${tlabel}</div>
+          <span class="spacer"></span>
+          <button class="icon-mini-btn" title="重写本场" data-act="regen" data-id="${s.id}">↻</button>
+          <button class="icon-mini-btn" title="删除本场" data-act="del" data-id="${s.id}">×</button>
+        </div>
+        <div class="shot-row"><span class="shot-k">画面</span><div class="shot-v" contenteditable="true" data-field="painting" data-placeholder="(画面必填)点击编辑"${s.painting ? '' : ' data-empty="true"'}>${s.painting || ''}</div></div>
+        <div class="shot-row"><span class="shot-k">对白</span><div class="shot-v" contenteditable="true" data-field="dialog" data-placeholder="(对白可空)点击编辑"${s.dialog ? '' : ' data-empty="true"'}>${s.dialog || ''}</div></div>
+      </div>`;
+      // 每张卡片后都跟一个 gap(包括最后一张),允许在任意位置 hover 加分镜
+      html += `<div class="shot-insert-gap" data-after="${s.id}"><button class="add-shot-btn" data-act="add-here" data-after="${s.id}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>添加分场</button></div>`;
+    });
+    body.innerHTML = html;
+    if (meta) meta.textContent = '· ' + shots.length + ' 镜 · 0-' + cum + 's';
+    if (phMeta) phMeta.textContent = shots.length + ' 镜 · 0-' + cum + 's';
+    body.querySelectorAll('.shot-v[contenteditable]').forEach(el => {
+      el.addEventListener('focus', () => { el.dataset.empty = 'false'; });
+      el.addEventListener('blur', () => {
+        const card = el.closest('.shot-card');
+        const id = card.dataset.id;
+        const field = el.dataset.field;
+        const v = el.textContent.trim();
+        const s = shots.find(x => x.id === id);
+        if (s) s[field] = v;
+        if (!v) el.dataset.empty = 'true';
+      });
+    });
+    body.querySelectorAll('[data-act]').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const act = btn.dataset.act;
+        const id = btn.dataset.id;
+        const after = btn.dataset.after;
+        if (act === 'del') {
+          shots = shots.filter(x => x.id !== id);
+          renderShots();
+        } else if (act === 'regen') {
+          Shell.toast('已请求重写本场', '↻ shot-' + id);
+        } else if (act === 'add-here') {
+          const idx = shots.findIndex(x => x.id === after);
+          shots.splice(idx + 1, 0, { id: 'sh' + Date.now(), painting: '', dialog: '', duration: 5 });
+          renderShots();
+        }
+      });
+    });
+  }
+
+  function pickMode(m) {
+    mode = m;
+    if (m === 'ai') {
+      pushMsg('user', '帮我 AI 全自动生成一稿脚本');
+      renderChat();
+      setTimeout(() => {
+        pushMsg('ai', '<span class="ai-thinking">正在解析商品卖点与目标人群 <span class="dots"><span></span><span></span><span></span></span></span>');
+        renderChat();
+      }, 300);
+      // 7 镜 · 0-40s · 与 Stage 2 / 4 的 3 场切分对齐(场 1 深夜办公桌 0-15s / 场 2 面膜包装 15-27s / 场 3 化妆台定格 27-40s)
+      const draft = [
+        // ─ 场 1 · 深夜办公桌(15s)─
+        { id: 'sh1', painting: '中景慢推 · 深夜居家书桌全景。屏幕仍亮着 PPT,女主背影瘫在椅子上,屏幕冷光 + 台灯暖光对比。字幕"凌晨 02:14"淡入。', dialog: '(无台词 · BGM 渐起)', duration: 5 },
+        { id: 'sh2', painting: '近景 · 卫生间镜前。女主低头看脸,T 区起皮、暗沉特写,冷白灯偏惨。', dialog: '"做完这版稿又是凌晨两点……(叹气)脸已经不能看了。"', duration: 5 },
+        { id: 'sh3', painting: '俯拍特写 · 回到书桌,拉开抽屉。囤好的透真补水面膜露半角,手伸进去抽出一片。', dialog: '"还好抽屉里囤了透真玻尿酸面膜。"', duration: 5 },
+        // ─ 场 2 · 面膜包装/特写(12s)─
+        { id: 'sh4', painting: '桌面微距特写 · 撕开锡纸包装的瞬间。30g 厚精华液缓缓滴落,面膜布展开,质地拉丝可见。', dialog: '"30g 一片,精华液比普通面膜厚整整三倍。"', duration: 6 },
+        { id: 'sh5', painting: '床头近景 · 女主敷好面膜闭眼躺下,台灯暖光打在脸侧。膜布贴合脸型,边缘服帖。', dialog: '"贴上去那一瞬间 —— 凉凉的,像把皮肤泡了一次澡。"', duration: 6 },
+        // ─ 场 3 · 化妆台/产品定格(13s)─
+        { id: 'sh6', painting: '中景 · 第二天清晨化妆台。阳光透过窗帘,女主对镜上妆,皮肤透亮、粉底服帖。同事画外音"你最近用啥了"。', dialog: '"第二天脸是软的,粉底都不卡了。同事都跑来问。"', duration: 8 },
+        { id: 'sh7', painting: '平铺俯拍 · 桌面五片装产品 + 单片包装。价格 "618 · 5 片 ¥39.9" 弹出,购物车图标右下角浮现。', dialog: '"618 五片 39.9,自用送人都合适。链接放评论区。"', duration: 5 },
+      ];
+      let cur = 0;
+      const step = () => {
+        if (cur >= draft.length) {
+          // remove thinking msg
+          chatMsgs = chatMsgs.filter(x => !(x.role === 'ai' && /ai-thinking/.test(x.html)));
+          pushMsg('ai', '初稿完成。点击任意卡片文字可直接编辑;鼠标移到卡片之间会出现「+ 添加分场」。');
+          renderChat();
+          return;
+        }
+        shots.push(draft[cur++]);
+        renderShots();
+        setTimeout(step, 700);
+      };
+      setTimeout(step, 1100);
+    } else if (m === 'theme') {
+      pushMsg('ai', '好,请给我一句话主题(5–30 字),例如:<br>· 熬夜党的急救面膜<br>· 加班吃啥不内疚<br>下面输入框直接打就行,我会按这句话扩成一稿镜头脚本。');
+      renderChat();
+    } else if (m === 'manual') {
+      pushMsg('ai', '好,把你的脚本(旁白 / 镜头描述均可)粘贴到下面输入框,我会按场自然切分并适配商品卖点。');
+      renderChat();
+    }
+  }
+
+  function init() {
+    renderChat();
+    renderShots();
+    document.getElementById('chat-clear-btn')?.addEventListener('click', () => {
+      chatMsgs = []; mode = null; shots = [];
+      renderChat(); renderShots();
+    });
+    document.getElementById('chat-regen-btn')?.addEventListener('click', () => {
+      Shell.toast('已请求整体重写', 'POST /script/regen');
+    });
+    const sendBtn = document.getElementById('chat-send-btn');
+    const ta = document.getElementById('chat-textarea');
+    if (sendBtn && ta) {
+      const send = () => {
+        const v = ta.value.trim();
+        if (!v) return;
+        pushMsg('user', v.replace(/</g, '&lt;'));
+        ta.value = '';
+        renderChat();
+        setTimeout(() => {
+          pushMsg('ai', '收到。我会按这个方向调整脚本(静态演示;实际接 LLM API)。');
+          renderChat();
+        }, 400);
+      };
+      sendBtn.addEventListener('click', send);
+      ta.addEventListener('keydown', (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); send(); }
+      });
+    }
+    // 顶部「+ 追加一场」按钮已移除 — 添加分场改为卡片间 hover 时出现「+ 添加分场」
+  }
+
+  return { init };
+})();
+Stage1.init();
+
+/* ============================================================
+   STAGE 2 · 基础资产 · 锚点 + 横滑预设 + 详情/库 modal
+   ============================================================ */
+const Stage2 = (function () {
+  const MODEL_LIB = [
+    { id: 'm1', name: '清新短发女', sub: '通勤白领' },
+    { id: 'm2', name: '甜美长发女', sub: '学生党' },
+    { id: 'm3', name: '商务套装男', sub: '总裁 IP' },
+    { id: 'm4', name: '宝妈居家女', sub: '家庭决策' },
+    { id: 'm5', name: '运动健身女', sub: '健身博主' },
+    { id: 'm6', name: '少年学生男', sub: 'Z 世代' },
+  ];
+  const SCENE_LIB = [
+    { id: 's1', name: '日系卧室', sub: '居家温柔' },
+    { id: 's2', name: '咖啡厅工位', sub: '通勤场景' },
+    { id: 's3', name: '梳妆台', sub: '美妆个护' },
+    { id: 's4', name: '健身房', sub: '运动场景' },
+    { id: 's5', name: '厨房料理台', sub: '家居家电' },
+    { id: 's6', name: '日落天台', sub: '氛围户外' },
+  ];
+
+  // 从 URL ?product= 读出当前项目的商品名(在 Stage2 中只有 1 个商品)
+  const URL_PRODUCT_NAME = (function () {
+    try { return decodeURIComponent(new URLSearchParams(location.search).get('product') || ''); }
+    catch (e) { return ''; }
+  })();
+  const CURRENT_PRODUCT_NAME = URL_PRODUCT_NAME || '透真补水面膜';
+
+  const ASSET_DETAILS = {
+    'ch-linxi':   { kind: 'character', title: '林夕 · 都市白领',  hasTri: true,  info: [['类别', '人物 · 主角'], ['年龄', '25-30'], ['服装', '宽松米色家居服'], ['妆面', '日常裸妆 · 略疲倦'], ['用途', '主角出镜 · 痛点共鸣'], ['状态', '已确认']] },
+    'ch-anan':    { kind: 'character', title: '阿楠 · 朋友/同事', hasTri: false, info: [['类别', '人物 · 对照角色'], ['年龄', '25-30'], ['服装', '白色衬衫 / 精致'], ['用途', '对照出镜'], ['状态', '生成中']] },
+    'sc-desk':    { kind: 'scene',     title: '深夜办公桌',                       info: [['类别', '场景 · 室内'], ['光线', '台灯暖光 · 屏幕冷光'], ['用途', '镜 1 痛点'], ['状态', '已确认']] },
+    'sc-bed':     { kind: 'scene',     title: '卧室床头',                         info: [['类别', '场景 · 室内'], ['光线', '夜灯暖光'], ['用途', '镜 4 敷膜'], ['状态', '已确认']] },
+    'sc-subway':  { kind: 'scene',     title: '通勤地铁',                         info: [['类别', '场景 · 室内'], ['用途', '镜 5 对照'], ['状态', '失败 · 待重跑']] },
+    'prod-main':  { kind: 'product',   title: CURRENT_PRODUCT_NAME,             hasTri: false, info: [['类别', '商品 · 当前项目'], ['名称', CURRENT_PRODUCT_NAME], ['三视图', '待生成'], ['状态', '缺三视图']] },
+  };
+
+  function openStripDetail(name, sub, kind) {
+    document.getElementById('asset-detail-title').textContent = name;
+    document.getElementById('asset-detail-kind').textContent = '// ' + (kind === 'model' ? '人物 · 预设模特' : '场景 · 预设');
+    document.getElementById('asset-detail-lead-img').innerHTML = `<span class="ph-frame">${name}</span>`;
+    const tri = document.getElementById('asset-detail-tri');
+    const triHeader = document.querySelector('#asset-detail-modal .asset-detail-lead .asset-detail-section-h');
+    const tip = document.getElementById('asset-detail-tip');
+    if (kind === 'scene') {
+      // 场景无三视图
+      tri.style.display = 'none';
+      if (triHeader) triHeader.style.display = 'none';
+      tip.style.display = 'none';
+    } else {
+      tri.style.display = '';
+      if (triHeader) triHeader.style.display = '';
+      tri.innerHTML = `<div class="placeholder"><span class="ph-frame">${name} · 三视图</span></div>`;
+      tip.style.display = 'none';
+    }
+    const info = (kind === 'model'
+      ? [['类别', '人物 · 预设模特'], ['标签', sub], ['来源', '模特库'], ['用途', '可应用为本项目的人物资产']]
+      : [['类别', '场景 · 预设'], ['标签', sub], ['来源', '场景库'], ['用途', '可应用为本项目的场景资产']]);
+    document.getElementById('asset-detail-info').innerHTML = info.map(([k, v]) => `<div class="row"><span class="k">${k}</span><span class="v">${v}</span></div>`).join('');
+    document.getElementById('asset-detail-modal').classList.add('show');
+  }
+
+  function renderStrip(containerId, items, kind) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+    el.innerHTML = items.map(it => `<div class="asset-card-2" data-strip-kind="${kind}" data-strip-id="${it.id}" data-strip-name="${it.name}" data-strip-sub="${it.sub}">
+      <div class="placeholder thumb-2"><span class="ph-frame">${it.name}</span></div>
+      <div class="body-2">
+        <div class="hstack"><strong style="font-size:13.5px;">${it.name}</strong><span class="spacer"></span><span class="pill info" style="font-size:10.5px;">${it.sub}</span></div>
+      </div>
+    </div>`).join('');
+    el.querySelectorAll('.asset-card-2').forEach(card => {
+      card.addEventListener('click', () => {
+        const name = card.dataset.stripName;
+        const sub = card.dataset.stripSub;
+        openStripDetail(name, sub, kind);
+      });
+    });
+  }
+
+  function openDetail(id) {
+    const d = ASSET_DETAILS[id];
+    if (!d) return;
+    document.getElementById('asset-detail-title').textContent = d.title;
+    document.getElementById('asset-detail-kind').textContent = '// ' + (d.kind === 'character' ? '人物' : d.kind === 'scene' ? '场景' : '商品');
+    document.getElementById('asset-detail-lead-img').innerHTML = `<span class="ph-frame">${d.title}</span>`;
+    const tri = document.getElementById('asset-detail-tri');
+    const triHeader = document.querySelector('#asset-detail-modal .asset-detail-lead .asset-detail-section-h');
+    const tip = document.getElementById('asset-detail-tip');
+    if (d.kind === 'scene') {
+      // 场景无三视图概念
+      tri.style.display = 'none';
+      if (triHeader) triHeader.style.display = 'none';
+      tip.style.display = 'none';
+    } else {
+      tri.style.display = '';
+      if (triHeader) triHeader.style.display = '';
+      if (d.hasTri) {
+        tri.innerHTML = `<div class="placeholder"><span class="ph-frame">${d.title} · 三视图</span></div>`;
+        tip.style.display = 'none';
+      } else {
+        tri.innerHTML = `<div class="placeholder missing" data-tri="0">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+          <span>暂未生成三视图(16:9 单图)</span>
+        </div>`;
+        tip.style.display = 'flex';
+      }
+    }
+    const info = document.getElementById('asset-detail-info');
+    info.innerHTML = d.info.map(([k, v]) => `<div class="row"><span class="k">${k}</span><span class="v">${v}</span></div>`).join('');
+    document.getElementById('asset-detail-modal').classList.add('show');
+  }
+  function openLib(kind) {
+    const isModel = kind === 'model';
+    const title = isModel ? '模特库' : '场景库';
+    const items = isModel ? MODEL_LIB : SCENE_LIB;
+
+    document.getElementById('ml-modal-title').textContent = title;
+    document.getElementById('ml-modal-ct').textContent = '// 共 ' + items.length + ' 个预设';
+
+    // 侧栏 · 来源
+    const side = document.getElementById('ml-side');
+    side.innerHTML = `
+      <div class="ml-side-h">来源</div>
+      <div class="ml-side-item active" data-source="all">全部 <span class="ct">${items.length}</span></div>
+      <div class="ml-side-item" data-source="preset">平台预设 <span class="ct">${items.length}</span></div>
+      <div class="ml-side-item" data-source="own">我的上传 <span class="ct">0</span></div>
+    `;
+    side.querySelectorAll('.ml-side-item').forEach(it => {
+      it.addEventListener('click', () => {
+        side.querySelectorAll('.ml-side-item').forEach(x => x.classList.remove('active'));
+        it.classList.add('active');
+      });
+    });
+
+    // toolbar · chip groups + 上传按钮
+    const toolbar = document.getElementById('ml-toolbar');
+    if (isModel) {
+      toolbar.innerHTML = `
+        <div class="chip-group">
+          <span class="lbl">性别</span>
+          <button class="chip active" type="button">全部</button>
+          <button class="chip" type="button">女</button>
+          <button class="chip" type="button">男</button>
+        </div>
+        <div class="chip-group">
+          <span class="lbl">年龄</span>
+          <button class="chip active" type="button">全部</button>
+          <button class="chip" type="button">青年</button>
+          <button class="chip" type="button">中年</button>
+        </div>
+        <button class="btn-up" type="button" style="margin-left:auto">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+          上传我的模特
+        </button>
+      `;
+    } else {
+      toolbar.innerHTML = `
+        <div class="chip-group">
+          <span class="lbl">类型</span>
+          <button class="chip active" type="button">全部</button>
+          <button class="chip" type="button">室内</button>
+          <button class="chip" type="button">室外</button>
+        </div>
+        <div class="chip-group">
+          <span class="lbl">氛围</span>
+          <button class="chip active" type="button">全部</button>
+          <button class="chip" type="button">日</button>
+          <button class="chip" type="button">夜</button>
+        </div>
+        <button class="btn-up" type="button" style="margin-left:auto">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+          上传我的场景
+        </button>
+      `;
+    }
+    toolbar.querySelectorAll('.chip-group').forEach(group => {
+      group.querySelectorAll('.chip').forEach(c => {
+        c.addEventListener('click', () => {
+          group.querySelectorAll('.chip').forEach(x => x.classList.remove('active'));
+          c.classList.add('active');
+        });
+      });
+    });
+    toolbar.querySelector('.btn-up')?.addEventListener('click', () => {
+      Shell.toast('上传我的' + (isModel ? '模特' : '场景'), '占位 · 选择本地文件');
+    });
+
+    // 卡片网格
+    const grid = document.getElementById('ml-grid');
+    grid.innerHTML = items.map(it => `
+      <div class="ml-card" data-name="${it.name}" data-sub="${it.sub}">
+        <div class="placeholder"><span class="ph-frame">${it.name}</span></div>
+        <div class="ml-card-nm">${it.name}</div>
+        <div class="ml-card-sub">${it.sub}</div>
+        <div class="ml-card-foot">
+          <span class="pill info"><span class="dot"></span>预设</span>
+          <button class="btn-apply" type="button" data-apply>应用</button>
+        </div>
+      </div>
+    `).join('');
+    grid.querySelectorAll('.ml-card').forEach(card => {
+      card.addEventListener('click', (e) => {
+        const name = card.dataset.name;
+        const sub = card.dataset.sub;
+        if (e.target.closest('[data-apply]')) {
+          e.stopPropagation();
+          Shell.toast('已应用「' + name + '」', isModel ? '模特库 · 来自预设' : '场景库 · 来自预设');
+          document.getElementById('ml-modal-bg').classList.remove('show');
+          return;
+        }
+        openStripDetail(name, sub, kind);
+      });
+    });
+
+    document.getElementById('ml-modal-bg').classList.add('show');
+  }
+  function closeLib() {
+    document.getElementById('ml-modal-bg').classList.remove('show');
+  }
+
+  function init() {
+    // 侧栏 ttab → 锚点
+    document.querySelectorAll('.asset-side .ttab[data-jump]').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('.asset-side .ttab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        const target = document.getElementById(tab.dataset.jump);
+        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    });
+    // 卡片 click → 详情(点击空白区域;按钮和可编辑提示词带 data-stop 不触发)
+    document.querySelectorAll('.asset-card-2[data-asset-id]').forEach(card => {
+      card.addEventListener('click', (e) => {
+        if (e.target.closest('[data-stop]')) return;
+        openDetail(card.dataset.assetId);
+      });
+    });
+    // 重跑按钮
+    document.querySelectorAll('[data-rerun]').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const card = btn.closest('.asset-card-2');
+        const name = card ? card.querySelector('strong').textContent : '资产';
+        Shell.toast('重跑「' + name + '」', 'POST /assets/regen · 使用当前提示词');
+      });
+    });
+    // 替换按钮
+    document.querySelectorAll('[data-replace]').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const card = btn.closest('.asset-card-2');
+        const name = card ? card.querySelector('strong').textContent : '资产';
+        const kind = card ? card.dataset.assetKind : '';
+        if (kind === 'character') openLib('model');
+        else if (kind === 'scene') openLib('scene');
+        else Shell.toast('替换「' + name + '」', '请从素材库挑选或上传');
+      });
+    });
+    // 提示词区域 blur → 保存
+    document.querySelectorAll('.asset-card-2 .prompt-box[contenteditable="true"]').forEach(box => {
+      box.addEventListener('blur', () => {
+        const card = box.closest('.asset-card-2');
+        const name = card ? card.querySelector('strong').textContent : '资产';
+        Shell.toast('提示词已更新', name + ' · 下次重跑生效');
+      });
+    });
+    // 模特库 / 场景库
+    document.getElementById('open-model-lib')?.addEventListener('click', () => openLib('model'));
+    document.getElementById('open-scene-lib')?.addEventListener('click', () => openLib('scene'));
+    // 新增
+    document.getElementById('asset-add-character')?.addEventListener('click', () => {
+      document.getElementById('new-character-modal').classList.add('show');
+    });
+    document.getElementById('asset-add-scene')?.addEventListener('click', () => {
+      Shell.toast('+ 新增场景', '请上传场景图或填写提示词');
+    });
+    // modal 通用关闭
+    document.querySelectorAll('.asset-modal-bg').forEach(bg => {
+      bg.addEventListener('click', (e) => { if (e.target === bg) bg.classList.remove('show'); });
+      bg.querySelectorAll('.x, [data-modal-close]').forEach(el => {
+        el.addEventListener('click', () => bg.classList.remove('show'));
+      });
+    });
+    // 详情 modal · 应用
+    document.getElementById('asset-detail-apply-btn')?.addEventListener('click', () => {
+      const name = document.getElementById('asset-detail-title').textContent;
+      Shell.toast('已应用「' + name + '」', '已加入当前项目');
+      document.getElementById('asset-detail-modal').classList.remove('show');
+    });
+    // 详情 modal · AI 生成三视图
+    document.querySelectorAll('.ai-gen-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        Shell.toast('AI 生成三视图中', '约 12s · POST /assets/tri-view');
+      });
+    });
+    // 新增人物 · 保存
+    document.getElementById('nc-save-btn')?.addEventListener('click', () => {
+      Shell.toast('已新增人物', '保存到资产库 · 待 AI 补三视图');
+      document.getElementById('new-character-modal').classList.remove('show');
+    });
+    // 把所有 modal 提升到 body 直接子级,避免被 .content 滚动容器裁切
+    document.querySelectorAll('.asset-modal-bg, .ml-modal-bg').forEach(el => {
+      if (el.parentElement !== document.body) document.body.appendChild(el);
+    });
+    // 模特库 / 场景库 全屏弹窗关闭按钮(仍保留,经"替换"气泡进入)
+    document.getElementById('ml-close-btn')?.addEventListener('click', closeLib);
+    // 注入当前项目的商品名(从 URL ?product= 或默认)
+    const nameEls = ['asset-prod-name', 'asset-prod-card-name'];
+    nameEls.forEach(eid => {
+      const el = document.getElementById(eid);
+      if (el) el.textContent = CURRENT_PRODUCT_NAME;
+    });
+    const thumbLbl = document.getElementById('asset-prod-thumb-label');
+    if (thumbLbl) thumbLbl.textContent = CURRENT_PRODUCT_NAME + ' · 主图';
+    // 商品卡 · AI 生成三视图 → 右侧 prod-preview 显示单张 16:9 三视图
+    (function setupProdPreview() {
+      const aigenBtn = document.getElementById('asset-prod-aigen-btn');
+      const pane = document.getElementById('asset-prod-preview');
+      const img = document.getElementById('prod-preview-img');
+      const statusEl = document.getElementById('prod-preview-status');
+      const foot = document.getElementById('prod-preview-foot');
+      const pill = document.getElementById('asset-prod-pill');
+      if (!aigenBtn || !pane || !img || !statusEl || !foot) return;
+
+      function renderLoading() {
+        img.innerHTML = `<div style="display:flex;flex-direction:column;gap:6px;align-items:center;"><div class="spinner"></div><span class="ph-frame" style="font-size:10.5px;">生成中</span></div>`;
+        statusEl.textContent = '生成中 · 约 12s';
+        foot.innerHTML = '<span class="muted-2 mono" style="font-size:11px;">// POST /assets/tri-view</span>';
+        aigenBtn.disabled = true;
+      }
+      function renderDone() {
+        aigenBtn.disabled = false;
+        const prodName = CURRENT_PRODUCT_NAME || (document.getElementById('asset-prod-card-name')?.textContent ?? '商品');
+        img.innerHTML = `<span class="ph-frame">${prodName} · 三视图(正/侧/背)</span>`;
+        statusEl.textContent = '已生成 · 不满意可重跑';
+        foot.innerHTML = `
+          <button class="btn btn-ghost btn-sm" id="prod-preview-rerun">↻ 重跑</button>
+          <span class="spacer"></span>
+          <span class="muted-2 mono" style="font-size:11px;">~¥0.30 / 次</span>
+          <button class="btn btn-sm btn-apply" id="prod-preview-adopt" style="background: var(--heat); color: var(--accent-white); border-color: var(--heat);">采用</button>
+        `;
+        document.getElementById('prod-preview-rerun')?.addEventListener('click', start);
+        document.getElementById('prod-preview-adopt')?.addEventListener('click', () => {
+          if (pill) {
+            pill.className = 'pill ok';
+            pill.innerHTML = '<span class="dot"></span>已三视图';
+          }
+          Shell.toast('已采用三视图', prodName + ' · 商品资产已更新');
+        });
+      }
+      function start() {
+        pane.classList.add('show');
+        renderLoading();
+        setTimeout(renderDone, 1800);
+      }
+      aigenBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        start();
+      });
+    })();
+  }
+  return { init };
+})();
+Stage2.init();
+
+/* ============================================================
+   STAGE 3 · 故事板 · 按场分 · 切换/重跑/应用/历史
+   ============================================================ */
+const Stage3 = (function () {
+  const scenes = [
+    { id: 'sc1', name: '场 1 · 深夜办公桌',  time: '0-15s',  desc: '深夜居家办公环境,女主对镜叹气,皮肤干燥起皮特写。台灯暖光 + 屏幕冷光对比。', prompt: '中景 / 固定机位\n光线:台灯暖光 + 屏幕冷光\n演员:林夕(疲倦状态)\n关键道具:面膜盒(从抽屉露半角)\n氛围:午夜、安静、些许焦虑', adopted: 0, versions: [{ ts: '14:02', label: 'v1' }] },
+    { id: 'sc2', name: '场 2 · 面膜包装/特写', time: '15-30s', desc: '女主从抽屉拿出补水面膜,包装盒微距特写 → 面膜布展开 → 30g 精华液滴落慢镜。', prompt: '特写 / 微距推镜\n光线:柔和暖光\n关键道具:面膜布、精华液\n节奏:慢镜头 + 水滴回弹', adopted: 0, versions: [{ ts: '14:08', label: 'v1' }, { ts: '14:21', label: 'v2' }] },
+    { id: 'sc3', name: '场 3 · 化妆台/产品定格', time: '30-45s', desc: '第二天早上,女主对镜化妆,皮肤透亮。淡入产品定格大图 + 价格标签 ¥39.9。', prompt: '中景 / 定格\n光线:晨光 + 暖色滤镜\n演员:林夕(精致妆面)\n结尾:产品大图 + 价格 + 购物车浮动', adopted: 0, versions: [{ ts: '14:30', label: 'v1' }] },
+  ];
+  let curId = scenes[0].id;
+
+  function renderRow() {
+    const row = document.getElementById('sb-scenes-row');
+    if (!row) return;
+    row.innerHTML = scenes.map(s => `<div class="sb-scene-thumb${s.id === curId ? ' selected' : ''}" data-sid="${s.id}">
+      <div class="placeholder"><span class="ph-frame">${s.name.split(' · ')[1] || s.name}</span></div>
+      <div class="nm">${s.name.split(' · ')[0]}</div>
+      <div class="sub">${s.time}</div>
+    </div>`).join('');
+    row.querySelectorAll('.sb-scene-thumb').forEach(t => {
+      t.addEventListener('click', () => { curId = t.dataset.sid; renderAll(); });
+    });
+  }
+  function renderMain() {
+    const s = scenes.find(x => x.id === curId); if (!s) return;
+    const v = s.versions[s.adopted];
+    document.getElementById('sb-main-img').innerHTML = `<span class="ph-frame">${s.name} · ${v.label}</span>`;
+    document.getElementById('sb-side-scene').textContent = s.name.split(' · ')[0];
+    document.getElementById('sb-prompt-edit').textContent = s.prompt;
+    // history
+    const ct = document.getElementById('sb-history-ct');
+    const hist = document.getElementById('sb-history-row');
+    ct.textContent = s.versions.length;
+    if (s.versions.length === 0) {
+      hist.innerHTML = '<div style="font-size: 11.5px; color: var(--black-alpha-48); padding: 12px 4px;">// 暂无历史版本</div>';
+    } else {
+      hist.innerHTML = s.versions.map((vv, i) => `<div class="sb-history-thumb${i === s.adopted ? ' current' : ''}" data-vi="${i}">
+        <div class="placeholder"><span class="ph-frame">${vv.label}</span></div>
+        <div class="ts">${vv.ts}</div>
+      </div>`).join('');
+      hist.querySelectorAll('.sb-history-thumb').forEach(t => {
+        t.addEventListener('click', () => {
+          s.adopted = +t.dataset.vi;
+          renderMain();
+          Shell.toast('已切换至 ' + s.versions[s.adopted].label, s.name);
+        });
+      });
+    }
+  }
+  function renderAll() { renderRow(); renderMain(); }
+
+  function init() {
+    renderAll();
+    document.getElementById('sb-rerun-btn')?.addEventListener('click', () => {
+      const s = scenes.find(x => x.id === curId);
+      const v = { ts: (new Date()).toTimeString().slice(0, 5), label: 'v' + (s.versions.length + 1) };
+      s.versions.push(v);
+      s.adopted = s.versions.length - 1;
+      Shell.toast('整张重跑', s.name + ' · ' + v.label);
+      renderAll();
+    });
+    document.getElementById('sb-apply-btn')?.addEventListener('click', () => {
+      const s = scenes.find(x => x.id === curId);
+      Shell.toast('已应用 ' + s.versions[s.adopted].label, s.name + ' · 进入视频生成');
+    });
+  }
+  return { init };
+})();
+Stage3.init();
+
+/* ============================================================
+   STAGE 4 · 视频 · 详情 modal(大图 + 历史 + 采用)
+   ============================================================ */
+const Stage4 = (function () {
+  const VIDEOS = {
+    'v1': { title: '场 1 · 深夜办公桌',  time: '0-15s',  info: [['场次', '场 1'], ['时长', '15.0s'], ['分辨率', '1080×1920 · 9:16'], ['模型', 'Seedance v2'], ['成本', '¥0.45']], versions: [{ ts: '14:32', label: 'v1' }, { ts: '14:48', label: 'v2' }, { ts: '15:02', label: 'v3' }], adopted: 2 },
+    'v2': { title: '场 2 · 面膜包装/特写', time: '15-27s', info: [['场次', '场 2'], ['时长', '12.0s'], ['分辨率', '1080×1920 · 9:16'], ['模型', 'Seedance v2'], ['成本', '¥0.45']], versions: [{ ts: '14:35', label: 'v1' }, { ts: '14:52', label: 'v2' }], adopted: 1 },
+    'v3': { title: '场 3 · 化妆台/产品定格', time: '27-40s', info: [['场次', '场 3'], ['时长', '13.0s'], ['分辨率', '1080×1920 · 9:16'], ['模型', 'Seedance v2'], ['成本', '¥0.45']], versions: [{ ts: '14:40', label: 'v1' }], adopted: 0 },
+  };
+  let curVid = null;
+
+  function openDetail(id) {
+    const v = VIDEOS[id]; if (!v) return;
+    curVid = id;
+    document.getElementById('vd-title').textContent = v.title;
+    document.getElementById('vd-sub').textContent = '// ' + v.title + ' · ' + v.time;
+    const cur = v.versions[v.adopted];
+    document.getElementById('vd-main-img').innerHTML = `<span class="ph-frame">${v.title} · ${cur.label}</span>`;
+    document.getElementById('vd-info').innerHTML = v.info.map(([k, val]) => `<div class="row"><span class="k">${k}</span><span class="v">${val}</span></div>`).join('') + `<div class="row"><span class="k">当前展示</span><span class="v" style="color: var(--heat); font-weight:600;">${cur.label} · ${cur.ts}</span></div>`;
+    document.getElementById('vd-history-ct').textContent = v.versions.length;
+    const row = document.getElementById('vd-history-row');
+    row.innerHTML = v.versions.map((vv, i) => `<div class="vd-history-thumb${i === v.adopted ? ' current adopted' : ''}" data-vi="${i}">
+      <div class="placeholder"><span class="ph-frame">${vv.label}</span></div>
+      <div class="ts">${vv.ts}</div>
+    </div>`).join('');
+    row.querySelectorAll('.vd-history-thumb').forEach(t => {
+      t.addEventListener('click', () => {
+        v.adopted = +t.dataset.vi;
+        openDetail(id);
+      });
+    });
+    document.getElementById('video-detail-modal').classList.add('show');
+  }
+
+  function init() {
+    // 根据各场实际时长(data-duration)计算总时长 + 单场平均(用于「每场 Seedance 约 n 秒」)
+    const cards = document.querySelectorAll('.video-card[data-duration]');
+    if (cards.length) {
+      let total = 0;
+      cards.forEach(c => { total += Number(c.dataset.duration) || 0; });
+      const avg = Math.round(total / cards.length);
+      const avgEl = document.getElementById('seedance-avg');
+      const totalEl = document.getElementById('seedance-total');
+      if (avgEl) avgEl.textContent = String(avg);
+      if (totalEl) totalEl.textContent = String(total);
+    }
+    document.querySelectorAll('.video-card[data-video-id]').forEach(card => {
+      card.addEventListener('click', (e) => {
+        if (e.target.closest('[data-vstop]')) return;
+        openDetail(card.dataset.videoId);
+      });
+    });
+    document.getElementById('vd-adopt-btn')?.addEventListener('click', () => {
+      if (!curVid) return;
+      const v = VIDEOS[curVid];
+      Shell.toast('已采用 ' + v.versions[v.adopted].label, v.title + ' · 拼接将用此版');
+      document.getElementById('video-detail-modal').classList.remove('show');
+    });
+    document.getElementById('vd-regen-btn')?.addEventListener('click', () => {
+      if (!curVid) return;
+      const v = VIDEOS[curVid];
+      const nv = { ts: (new Date()).toTimeString().slice(0, 5), label: 'v' + (v.versions.length + 1) };
+      v.versions.push(nv);
+      v.adopted = v.versions.length - 1;
+      Shell.toast('重跑中', v.title + ' · 约 30s');
+      openDetail(curVid);
+    });
+  }
+  return { init };
+})();
+Stage4.init();
+</script>
+</body>
+</html>
diff --git a/v2/platform-cover.html b/v2/platform-cover.html
new file mode 100644
index 0000000..f52a04b
--- /dev/null
+++ b/v2/platform-cover.html
@@ -0,0 +1,1360 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>平台套图 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  .app { height: 100vh; overflow: hidden; }
+  main { display: flex; flex-direction: column; min-height: 0; }
+  #page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 24px 28px 0; }
+  .page-head { flex-shrink: 0; margin-bottom: 16px; }
+
+  .pc-layout {
+    flex: 1; min-height: 0;
+    display: grid;
+    grid-template-columns: 220px 360px 1fr;
+    gap: 20px;
+    padding-bottom: 24px;
+  }
+  @media (max-width: 1280px) {
+    .pc-layout { grid-template-columns: 200px 340px 1fr; gap: 16px; }
+  }
+
+  /* ─── 任务栏 (最左 · 历史任务列表) ─── */
+  .pc-tasks-panel {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+  .pc-tasks-h {
+    display: flex; align-items: center; gap: 6px;
+    padding: 14px 16px 10px;
+    border-bottom: 1px solid var(--border-faint);
+    font-size: 13px; font-weight: 600; color: var(--accent-black);
+  }
+  .pc-tasks-h .ct {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    margin-left: auto;
+  }
+  .pc-tasks-h .new {
+    margin-left: 6px;
+    width: 24px; height: 24px;
+    display: grid; place-items: center;
+    background: var(--heat-12); color: var(--heat);
+    border: 0; border-radius: var(--r-sm);
+    cursor: pointer;
+    transition: background var(--t-base);
+  }
+  .pc-tasks-h .new:hover { background: var(--heat-20); }
+  .pc-tasks-h .new svg { width: 12px; height: 12px; }
+  .pc-tasks-list {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    padding: 8px;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .pc-tasks-empty {
+    padding: 24px 14px;
+    text-align: center;
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    line-height: 1.55;
+  }
+  .pc-tasks-empty .mono {
+    font-family: var(--font-mono); font-size: 10.5px;
+    letter-spacing: .02em; display: block; margin-top: 4px;
+  }
+  .pc-task-card {
+    padding: 10px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    transition: background var(--t-base), border-color var(--t-base);
+    position: relative;
+  }
+  .pc-task-card:hover { background: var(--surface); border-color: var(--black-alpha-24); }
+  .pc-task-card.active { background: var(--heat-12); border-color: var(--heat-20); }
+  .pc-task-card .nm {
+    font-size: 12.5px; font-weight: 600; color: var(--accent-black);
+    line-height: 1.35;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    padding-right: 18px;
+  }
+  .pc-task-card.active .nm { color: var(--heat); }
+  .pc-task-card .meta {
+    margin-top: 4px;
+    font-family: var(--font-mono); font-size: 10px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .pc-task-card .meta .pill-mini {
+    padding: 1px 6px; border-radius: var(--r-pill);
+    font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
+  }
+  .pc-task-card .meta .pill-mini.gen { background: var(--heat-12); color: var(--heat); }
+  .pc-task-card .meta .pill-mini.ok { background: var(--forest-bg); color: var(--accent-forest); }
+  .pc-task-card .meta .pill-mini.err { background: var(--crimson-bg); color: var(--accent-crimson); }
+  .pc-task-card .x {
+    position: absolute; top: 6px; right: 6px;
+    width: 18px; height: 18px;
+    display: grid; place-items: center;
+    background: transparent; border: 0;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    color: var(--black-alpha-48);
+    opacity: 0;
+    transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
+  }
+  .pc-task-card:hover .x { opacity: 1; }
+  .pc-task-card .x:hover { background: var(--black-alpha-8); color: var(--accent-crimson); }
+  .pc-task-card .x svg { width: 10px; height: 10px; }
+  /* 左栏 表单 */
+  .pc-form {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    overflow-y: auto;
+    padding: 18px 20px;
+    display: flex; flex-direction: column;
+  }
+  .pc-step { margin-bottom: 22px; }
+  .pc-step:last-child { margin-bottom: 0; }
+  .pc-step-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+  .pc-step-h .num {
+    width: 22px; height: 22px; border-radius: 50%;
+    background: var(--heat-12); color: var(--heat);
+    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
+    display: grid; place-items: center;
+  }
+  .pc-step-h .title { font-size: 14px; font-weight: 600; color: var(--accent-black); }
+
+  /* 商品选择 · 已选 chip 列表 */
+  .prod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
+  .prod-row {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .prod-row .thumb { width: 28px; height: 28px; border-radius: var(--r-sm); flex-shrink: 0; }
+  .prod-row .info { flex: 1; min-width: 0; }
+  .prod-row .nm {
+    font-size: 12.5px; color: var(--accent-black); font-weight: 500;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .prod-row .meta {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    margin-top: 2px;
+  }
+  .prod-row .x {
+    width: 22px; height: 22px;
+    display: grid; place-items: center;
+    background: transparent; border: 0;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    color: var(--black-alpha-48);
+    flex-shrink: 0;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .prod-row .x:hover { background: var(--black-alpha-8); color: var(--accent-crimson); }
+  .prod-row .x svg { width: 12px; height: 12px; }
+  .prod-empty {
+    padding: 14px 10px;
+    text-align: center;
+    background: var(--background-lighter);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-48);
+    font-size: 12px;
+    margin-bottom: 6px;
+  }
+  .prod-empty .mono {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    letter-spacing: .02em;
+    margin-top: 4px;
+  }
+  .prod-add {
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    padding: 8px 10px;
+    background: transparent;
+    border: 1px dashed var(--heat-40);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-size: 12.5px; color: var(--heat);
+    font-family: inherit;
+    transition: background var(--t-base);
+    width: 100%;
+  }
+  .prod-add:hover { background: var(--heat-12); }
+  .prod-add svg { width: 12px; height: 12px; }
+
+  /* 商品库全屏弹窗 */
+  .pl-modal-bg {
+    position: fixed; inset: 0;
+    background: var(--surface);
+    z-index: 998;
+    display: none;
+  }
+  .pl-modal-bg.show { display: flex; }
+  .pl-modal {
+    margin: 0; flex: 1;
+    background: var(--surface);
+    overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .pl-modal-h {
+    display: flex; align-items: center; gap: 14px;
+    padding: 14px 28px;
+    border-bottom: 1px solid var(--border-faint);
+    flex-shrink: 0;
+  }
+  .pl-modal-h h2 { font-size: 16px; font-weight: 600; }
+  .pl-modal-h .ct {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .pl-modal-h .actions { margin-left: auto; display: flex; gap: 10px; }
+  .pl-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; }
+  .pl-side {
+    border-right: 1px solid var(--border-faint);
+    padding: 18px 0;
+    overflow-y: auto;
+  }
+  .pl-side .pl-side-h {
+    padding: 0 20px 8px;
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .06em;
+  }
+  .pl-side .pl-side-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 9px 20px;
+    cursor: pointer;
+    color: var(--black-alpha-72);
+    font-size: 13px;
+    border-left: 3px solid transparent;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .pl-side .pl-side-item:hover { background: var(--black-alpha-4); }
+  .pl-side .pl-side-item.active {
+    background: var(--heat-12); color: var(--accent-black);
+    border-left-color: var(--heat); font-weight: 600;
+  }
+  .pl-side .pl-side-item .ct {
+    margin-left: auto;
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48);
+  }
+  .pl-main { overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
+  .pl-toolbar {
+    padding: 14px 28px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 12px;
+    flex-shrink: 0;
+  }
+  .pl-toolbar .search { position: relative; flex: 1; max-width: 360px; }
+  .pl-toolbar .search input {
+    width: 100%; height: 32px;
+    padding: 0 10px 0 32px;
+    background: var(--background-lighter);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    font-size: 12.5px; font-family: inherit;
+    color: var(--accent-black); outline: none;
+  }
+  .pl-toolbar .search svg {
+    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
+    width: 14px; height: 14px; color: var(--black-alpha-48);
+  }
+  .pl-toolbar .btn-new {
+    height: 32px; padding: 0 14px;
+    display: inline-flex; align-items: center; gap: 6px;
+    background: var(--surface);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    color: var(--accent-black);
+    font-family: inherit; font-size: 12.5px;
+    cursor: pointer;
+    margin-left: auto;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .pl-toolbar .btn-new:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); }
+  .pl-toolbar .btn-new svg { width: 13px; height: 13px; }
+  .pl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; }
+  .pl-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 12px;
+  }
+  .pl-card {
+    position: relative;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 10px;
+    cursor: pointer;
+    display: flex; flex-direction: column; gap: 6px;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .pl-card:hover { background: var(--surface); }
+  .pl-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .pl-card .pl-thumb { aspect-ratio: 1; border-radius: var(--r-sm); }
+  .pl-card .pl-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
+  .pl-card .pl-meta {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .pl-card .pl-check {
+    position: absolute; top: 16px; right: 16px;
+    width: 22px; height: 22px;
+    background: rgba(255,255,255,.95);
+    border: 1.5px solid var(--black-alpha-24);
+    border-radius: 50%;
+    display: grid; place-items: center;
+    z-index: 2;
+    color: var(--accent-white);
+  }
+  .pl-card .pl-check svg { width: 11px; height: 11px; opacity: 0; }
+  .pl-card.selected .pl-check { background: var(--heat); border-color: var(--heat); }
+  .pl-card.selected .pl-check svg { opacity: 1; }
+  /* 卡片右上 actions: 编辑 + 删除 (hover 显示, check 左侧) */
+  .pl-card .pl-card-actions {
+    position: absolute;
+    top: 14px; right: 44px;
+    display: flex; gap: 4px;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity var(--t-base);
+  }
+  .pl-card:hover .pl-card-actions { opacity: 1; }
+  .pl-card .pl-act {
+    width: 26px; height: 26px;
+    background: rgba(255,255,255,.95);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    cursor: pointer;
+    color: var(--black-alpha-72);
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .pl-card .pl-act:hover { color: var(--heat); border-color: var(--heat); background: var(--surface); }
+  .pl-card .pl-act.danger:hover { color: var(--accent-crimson); border-color: var(--accent-crimson); }
+  .pl-card .pl-act svg { width: 12px; height: 12px; }
+
+  /* 编辑商品 drawer */
+  .pc-drawer { width: 720px; max-width: 100vw; z-index: 1101; }
+  .pc-drawer .drawer-b { padding: 24px 28px; }
+  #pc-drawer-bg.drawer-bg { z-index: 1100; }
+  .pc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
+  .pc-field-label { font-size: 13px; font-weight: 500; color: var(--accent-black); }
+  .pc-field-label .req { color: var(--accent-crimson); margin-left: 2px; }
+  .pc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
+  .pc-field-row > div { display: flex; flex-direction: column; gap: 6px; }
+  .pc-bullets {
+    list-style: none; padding: 0; margin: 0;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .pc-bullets li {
+    display: flex; align-items: center; gap: 8px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 0 10px;
+    height: 36px;
+  }
+  .pc-bullets li.add { border-style: dashed; border-color: var(--heat-40); }
+  .pc-bullets li .num {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); width: 18px; text-align: center;
+    flex-shrink: 0;
+  }
+  .pc-bullets li.add .num { color: var(--heat); }
+  .pc-bullets li input {
+    flex: 1; border: 0; background: transparent; outline: none;
+    font-size: 13px; color: var(--accent-black);
+    font-family: inherit;
+  }
+  .pc-bullets li input::placeholder { color: var(--black-alpha-48); }
+  .pc-bullets li .rm {
+    width: 22px; height: 22px;
+    background: transparent; border: 0; border-radius: var(--r-sm);
+    color: var(--black-alpha-48); cursor: pointer;
+    display: grid; place-items: center;
+  }
+  .pc-bullets li .rm:hover { color: var(--accent-crimson); background: var(--black-alpha-4); }
+  .pc-bullets li .rm svg { width: 11px; height: 11px; }
+  .pl-modal-f {
+    padding: 14px 28px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
+    flex-shrink: 0;
+  }
+  .pl-modal-f .summary {
+    margin-right: auto;
+    font-family: var(--font-mono); font-size: 12px;
+    color: var(--black-alpha-56); letter-spacing: .02em;
+  }
+  .pl-modal-f .summary b { color: var(--heat); font-weight: 700; }
+
+  /* 平台多选卡片 */
+  .platform-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 6px;
+  }
+  .platform-card {
+    position: relative;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 10px 6px;
+    cursor: pointer;
+    text-align: center;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .platform-card:hover { background: var(--surface); }
+  .platform-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .platform-card .p-logo {
+    width: 32px; height: 32px;
+    margin: 0 auto 4px;
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    color: var(--accent-white);
+    font-family: var(--font-mono);
+    font-size: 11px; font-weight: 700;
+  }
+  .platform-card .p-name {
+    font-size: 11.5px;
+    color: var(--accent-black);
+    font-weight: 500;
+  }
+  .platform-card.selected .p-name { color: var(--heat); }
+  .platform-card .p-check {
+    position: absolute; top: 4px; right: 4px;
+    width: 16px; height: 16px;
+    border-radius: 50%;
+    background: transparent;
+    border: 1.5px solid var(--black-alpha-24);
+  }
+  .platform-card.selected .p-check {
+    background: var(--heat); border-color: var(--heat);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
+    background-position: center;
+    background-size: 10px 10px;
+    background-repeat: no-repeat;
+    border: 0;
+  }
+  /* 平台 logo 配色 */
+  .p-logo.dy { background: #000; }
+  .p-logo.tb { background: #ff6f00; }
+  .p-logo.tm { background: #ff0036; }
+  .p-logo.jd { background: #e1251b; }
+  .p-logo.pdd { background: #e02e24; }
+  .p-logo.xhs { background: #ff2741; }
+  .p-logo.ks { background: #ff4906; }
+  .p-logo.sph { background: #07c160; }
+  .p-logo.amz { background: #ff9900; }
+  .p-logo.al { background: #2c4af1; }
+
+  /* pill row */
+  .pill-row { display: flex; gap: 6px; }
+  .pill-row .opt {
+    flex: 1; height: 32px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-72); font-size: 12.5px;
+    cursor: pointer; font-family: inherit;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .pill-row .opt:hover { color: var(--accent-black); }
+  .pill-row .opt.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); font-weight: 600; }
+  .pc-sub-h { font-size: 12px; color: var(--black-alpha-48); margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .pc-sub { margin-bottom: 12px; }
+  .pc-sub:last-child { margin-bottom: 0; }
+
+  /* CTA */
+  .pc-cta { margin-top: auto; padding-top: 14px; }
+  .pc-cta .btn-gen {
+    width: 100%; justify-content: center;
+    padding: 12px; font-size: 14px; font-weight: 600;
+  }
+  .pc-cta .btn-gen.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
+  .pc-cta-hint {
+    margin-top: 8px;
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    text-align: center; line-height: 1.5;
+  }
+
+  /* 右栏 预览 */
+  .pc-preview {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 18px 22px;
+    display: flex; flex-direction: column;
+    overflow-y: auto;
+  }
+  .pc-pv-h {
+    display: flex; flex-direction: column; gap: 8px;
+    padding-bottom: 14px; margin-bottom: 16px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .pc-pv-h .row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--black-alpha-72); }
+  .pc-pv-h .row .k { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .pc-pv-h .row .v { color: var(--accent-black); font-weight: 500; }
+
+  .pv-platform-section { margin-bottom: 24px; }
+  .pv-platform-section:last-child { margin-bottom: 0; }
+  .pv-platform-section .ps-h {
+    display: flex; align-items: center; gap: 8px;
+    margin-bottom: 10px;
+    font-size: 13px; font-weight: 600; color: var(--accent-black);
+  }
+  .pv-platform-section .ps-h .ct {
+    margin-left: auto; font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .02em; font-weight: 400;
+  }
+  .pv-platform-section .ps-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+  }
+  .pv-platform-section .ps-grid .mp-result {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: var(--r-md);
+    overflow: hidden;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    display: flex; flex-direction: column;
+  }
+  .pv-platform-section .ps-grid .mp-result .mp-r-thumb { flex: 1; }
+  .pv-platform-section .ps-grid .mp-result .mp-r-act {
+    padding: 4px 6px;
+    background: rgba(255,255,255,.95);
+  }
+  .pv-platform-section .ps-grid .mp-result .add-lib {
+    width: 100%;
+    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+    background: var(--surface);
+    border: 1px solid var(--heat-40);
+    border-radius: var(--r-sm);
+    color: var(--heat);
+    height: 22px;
+    cursor: pointer; font-family: inherit;
+    font-size: 10.5px;
+    transition: background var(--t-base);
+  }
+  .pv-platform-section .ps-grid .mp-result .add-lib:hover { background: var(--heat-12); }
+  .pv-platform-section .ps-grid .mp-result .add-lib.added {
+    background: var(--accent-emerald-bg, #e6f4ec);
+    color: var(--accent-emerald, #1f8a51);
+    border-color: var(--accent-emerald-bd, #c4e3d1);
+  }
+  .pv-platform-section .ps-grid .mp-result .add-lib svg { width: 10px; height: 10px; }
+
+  .pc-pv-foot {
+    margin-top: 14px; padding-top: 12px;
+    border-top: 1px solid var(--border-faint);
+    font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-56); letter-spacing: .02em;
+    line-height: 1.6;
+  }
+  .pc-pv-foot a { color: var(--heat); }
+
+  /* 空状态 */
+  .pc-pv-empty {
+    flex: 1;
+    display: grid; place-items: center;
+    color: var(--black-alpha-48);
+    font-size: 13px;
+    text-align: center;
+  }
+  .pc-pv-empty .mono {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); margin-top: 6px;
+    letter-spacing: .04em;
+  }
+
+  @media (max-width: 1100px) {
+    .pc-layout { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+<div id="page">
+
+  <div class="page-head">
+    <div>
+      <h1>平台套图</h1>
+      <div class="sub"><span class="mono">// 选商品 + 选平台 → 生成 AI 套图</span> · 失败不扣费,采纳入库才计费</div>
+    </div>
+    <div class="actions">
+      <a class="btn" href="asset-factory.html">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+        返回图片生成
+      </a>
+    </div>
+  </div>
+
+  <div class="pc-layout">
+
+    <!-- ===== 最左栏 · 任务历史 ===== -->
+    <div class="pc-tasks-panel" id="tasks-panel">
+      <div class="pc-tasks-h">
+        历史任务
+        <span class="ct" id="tasks-count">0</span>
+        <button class="new" type="button" id="tasks-new-btn" title="新建任务">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
+        </button>
+      </div>
+      <div class="pc-tasks-list" id="tasks-list"></div>
+    </div>
+
+    <!-- ===== 中栏 · 表单 ===== -->
+    <div class="pc-form">
+
+      <!-- ① 选择商品 (单选) -->
+      <div class="pc-step">
+        <div class="pc-step-h">
+          <span class="num">1</span>
+          <span class="title">选择商品</span>
+        </div>
+        <div class="prod-list" id="prod-list">
+          <!-- 已选商品 chip · JS 动态渲染 -->
+        </div>
+        <button class="prod-add" type="button" id="prod-add-btn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+          去商品库添加
+        </button>
+      </div>
+
+      <!-- ② 选择平台 (单选, 10 个热门电商平台) -->
+      <div class="pc-step">
+        <div class="pc-step-h">
+          <span class="num">2</span>
+          <span class="title">选择平台</span>
+        </div>
+        <div class="platform-grid" id="platform-grid">
+          <div class="platform-card selected" data-id="dy" data-name="抖音电商">
+            <div class="p-check"></div>
+            <div class="p-logo dy">抖</div>
+            <div class="p-name">抖音电商</div>
+          </div>
+          <div class="platform-card" data-id="tb" data-name="淘宝">
+            <div class="p-check"></div>
+            <div class="p-logo tb">淘</div>
+            <div class="p-name">淘宝</div>
+          </div>
+          <div class="platform-card" data-id="tm" data-name="天猫">
+            <div class="p-check"></div>
+            <div class="p-logo tm">猫</div>
+            <div class="p-name">天猫</div>
+          </div>
+          <div class="platform-card" data-id="jd" data-name="京东">
+            <div class="p-check"></div>
+            <div class="p-logo jd">京</div>
+            <div class="p-name">京东</div>
+          </div>
+          <div class="platform-card" data-id="pdd" data-name="拼多多">
+            <div class="p-check"></div>
+            <div class="p-logo pdd">拼</div>
+            <div class="p-name">拼多多</div>
+          </div>
+          <div class="platform-card" data-id="xhs" data-name="小红书">
+            <div class="p-check"></div>
+            <div class="p-logo xhs">红</div>
+            <div class="p-name">小红书</div>
+          </div>
+          <div class="platform-card" data-id="ks" data-name="快手">
+            <div class="p-check"></div>
+            <div class="p-logo ks">快</div>
+            <div class="p-name">快手</div>
+          </div>
+          <div class="platform-card" data-id="sph" data-name="视频号">
+            <div class="p-check"></div>
+            <div class="p-logo sph">视</div>
+            <div class="p-name">视频号</div>
+          </div>
+          <div class="platform-card" data-id="amz" data-name="亚马逊">
+            <div class="p-check"></div>
+            <div class="p-logo amz">a</div>
+            <div class="p-name">亚马逊</div>
+          </div>
+          <div class="platform-card" data-id="al" data-name="1688">
+            <div class="p-check"></div>
+            <div class="p-logo al">阿</div>
+            <div class="p-name">1688</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ③ 生成设置 -->
+      <div class="pc-step">
+        <div class="pc-step-h">
+          <span class="num">3</span>
+          <span class="title">生成设置</span>
+        </div>
+        <div class="pc-sub">
+          <div class="pc-sub-h">// 生成数量</div>
+          <div class="pill-row" data-key="count">
+            <button type="button" class="opt active" data-val="4">4 张</button>
+            <button type="button" class="opt" data-val="8">8 张</button>
+            <button type="button" class="opt" data-val="12">12 张</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部 立即生成 -->
+      <div class="pc-cta">
+        <button class="btn btn-primary btn-gen" id="pc-go-btn" type="button">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 9-14 9V3z"/></svg>
+          立即生成 (预估 <span id="cost-total">¥4.00</span>)
+        </button>
+        <div class="pc-cta-hint">// 满意后点 [入资产库] 才扣费 · 失败不扣</div>
+      </div>
+
+    </div>
+
+    <!-- ===== 右栏 · 预览 ===== -->
+    <div class="pc-preview" id="pc-preview">
+      <div class="pc-pv-h">
+        <div class="row"><span class="k">已选商品</span><span class="v" id="pv-prod">补水保湿精华液</span></div>
+        <div class="row"><span class="k">已选平台</span><span class="v" id="pv-platforms">抖音电商 / 淘宝</span></div>
+        <div class="row"><span class="k">生成</span><span class="v" id="pv-count">4</span></div>
+      </div>
+      <div id="pv-results">
+        <!-- 默认占位 -->
+      </div>
+      <div class="pc-pv-foot">
+        // 生成结果默认不入资产库,满意后点 [入资产库] 才扣费并保存
+        <br>// 任务进度可在 <a href="asset-factory.html">任务中心 →</a> 查看
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<!-- ===== 编辑商品 drawer (在商品库内点编辑触发,prefilled) ===== -->
+<div class="drawer-bg" id="pc-drawer-bg"></div>
+<aside class="drawer pc-drawer" id="pc-drawer" role="dialog" aria-label="编辑商品" aria-hidden="true">
+  <div class="drawer-h">
+    <h3 id="pc-drawer-title">编辑商品</h3>
+    <button class="x" type="button" id="pc-drawer-close" aria-label="关闭">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+    </button>
+  </div>
+  <div class="drawer-b">
+    <div class="pc-field">
+      <label class="pc-field-label">商品名称<span class="req">*</span></label>
+      <input class="input" id="pcf-name" placeholder="请输入商品名称(必填)" maxlength="100">
+    </div>
+    <div class="pc-field-row">
+      <div>
+        <label class="pc-field-label">品类<span class="req">*</span></label>
+        <select class="select" id="pcf-cat">
+          <option>美妆个护</option>
+          <option>服饰内衣</option>
+          <option>食品饮料</option>
+          <option>家居家电</option>
+          <option>数码 3C</option>
+          <option>个护清洁</option>
+          <option>运动户外</option>
+          <option>母婴亲子</option>
+        </select>
+      </div>
+      <div>
+        <label class="pc-field-label">目标人群<span style="color:var(--black-alpha-48);margin-left:2px">(选填)</span></label>
+        <input class="input" id="pcf-target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+      </div>
+    </div>
+    <div class="pc-field">
+      <label class="pc-field-label">核心卖点<span class="req">*</span></label>
+      <ul class="pc-bullets" id="pcf-bullets">
+        <li class="add"><span class="num">+</span><input id="pcf-add-input" placeholder="添加新卖点 · 回车确认"></li>
+      </ul>
+    </div>
+  </div>
+  <div class="drawer-f">
+    <button class="btn" type="button" id="pc-cancel-btn">取消</button>
+    <button class="btn btn-primary" type="button" id="pc-save-btn">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+      保存修改
+    </button>
+  </div>
+</aside>
+
+<!-- ===== 商品库 全屏(无遮罩自适应,多选) ===== -->
+<div class="pl-modal-bg" id="pl-modal-bg">
+  <div class="pl-modal">
+    <div class="pl-modal-h">
+      <h2>商品库</h2>
+      <span class="ct" id="pl-total-ct">// 共 7 个商品</span>
+      <div class="actions">
+        <button class="x" type="button" id="pl-close-btn" aria-label="关闭" style="width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;border-radius:var(--r-sm);cursor:pointer;color:var(--black-alpha-56)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="pl-modal-body">
+      <aside class="pl-side">
+        <div class="pl-side-h">分类</div>
+        <div class="pl-side-item active" data-cat="">全部 <span class="ct">7</span></div>
+        <div class="pl-side-item" data-cat="美妆个护">美妆个护 <span class="ct">2</span></div>
+        <div class="pl-side-item" data-cat="数码 3C">数码 3C <span class="ct">1</span></div>
+        <div class="pl-side-item" data-cat="食品饮料">食品饮料 <span class="ct">2</span></div>
+        <div class="pl-side-item" data-cat="家居家电">家居家电 <span class="ct">1</span></div>
+        <div class="pl-side-item" data-cat="运动户外">运动户外 <span class="ct">1</span></div>
+      </aside>
+      <div class="pl-main">
+        <div class="pl-toolbar">
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" id="pl-search-input" placeholder="搜索商品名">
+          </div>
+          <button class="btn-new" type="button" id="pl-new-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            新建商品
+          </button>
+        </div>
+        <div class="pl-scroll">
+          <div class="pl-grid" id="pl-grid"></div>
+        </div>
+      </div>
+    </div>
+    <div class="pl-modal-f">
+      <div class="summary">// 已选 <b id="pl-sel-ct">0</b> 个商品</div>
+      <button class="btn" type="button" id="pl-cancel-btn">取消</button>
+      <button class="btn btn-primary" type="button" id="pl-confirm-btn">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
+        确认选择
+      </button>
+    </div>
+  </div>
+</div>
+
+
+<script src="assets/shell.js"></script>
+<script src="assets/new-product-drawer.js"></script>
+<script>
+Shell.render({
+  active: 'asset-factory',
+  crumbs: [
+    { label: '工作台', href: 'index.html' },
+    { label: '图片生成', href: 'asset-factory.html' },
+    { label: '平台套图' }
+  ]
+});
+
+// ─── 商品库数据 (mock,与 products.html 7 个商品对齐) ───
+const PRODUCTS = [
+  { id: 'p1', name: '透真玻尿酸补水面膜',   cat: '美妆个护', meta: '熬夜党 · 124 素材' },
+  { id: 'p2', name: '南卡 Lite Pro 蓝牙耳机', cat: '数码 3C',  meta: '通勤 · 96 素材' },
+  { id: 'p3', name: '滋啦速食牛肉面 6 桶装',  cat: '食品饮料', meta: '加班 · 96 素材' },
+  { id: 'p4', name: '透真清透物理防晒霜',     cat: '美妆个护', meta: 'SPF50 · 76 素材' },
+  { id: 'p5', name: '三顿半同款冻干咖啡粉',   cat: '食品饮料', meta: '提神 · 68 素材' },
+  { id: 'p6', name: '小熊 4L 可视空气炸锅',   cat: '家居家电', meta: '小户型 · 54 素材' },
+  { id: 'p7', name: '露露同款裸感瑜伽裤',     cat: '运动户外', meta: '健身房 · 42 素材' },
+];
+
+// State (单选)
+const state = {
+  selectedProd: 'p1',       // string | null
+  selectedPlatform: 'dy',   // string | null
+  count: 4,
+};
+const UNIT_PRICE = 0.50;
+
+// ─── 已选商品 渲染 (单选) ───
+function renderSelectedProds() {
+  const list = document.getElementById('prod-list');
+  const id = state.selectedProd;
+  const p = id ? PRODUCTS.find(x => x.id === id) : null;
+  if (!p) {
+    list.innerHTML = '<div class="prod-empty">未选择商品<div class="mono">// 点击下方按钮去商品库选</div></div>';
+    document.getElementById('pv-prod').textContent = '未选择';
+  } else {
+    list.innerHTML = `
+      <div class="prod-row" data-id="${p.id}">
+        <div class="placeholder thumb"></div>
+        <div class="info"><div class="nm">${p.name}</div><div class="meta">${p.cat}</div></div>
+        <button class="x" type="button" data-rm="${p.id}" aria-label="移除">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    `;
+    list.querySelector('button.x[data-rm]').addEventListener('click', () => {
+      state.selectedProd = null;
+      renderSelectedProds();
+    });
+    document.getElementById('pv-prod').textContent = p.name;
+  }
+  updateCost();
+  renderPreviewSections();
+}
+
+// ─── 商品库全屏弹窗 (单选) ───
+let _plDraft = null;
+let _plCatFilter = '';
+let _plQuery = '';
+
+function renderProdLib() {
+  const grid = document.getElementById('pl-grid');
+  let list = PRODUCTS;
+  if (_plCatFilter) list = list.filter(p => p.cat === _plCatFilter);
+  if (_plQuery) list = list.filter(p => p.name.includes(_plQuery));
+  grid.innerHTML = list.map(p => `
+    <div class="pl-card${_plDraft === p.id ? ' selected' : ''}" data-id="${p.id}">
+      <div class="pl-card-actions">
+        <button class="pl-act" type="button" data-edit="${p.id}" title="编辑商品" aria-label="编辑">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
+        </button>
+        <button class="pl-act danger" type="button" data-del="${p.id}" title="删除商品" aria-label="删除">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+        </button>
+      </div>
+      <div class="pl-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+      <div class="placeholder pl-thumb"><span class="ph-frame">${p.name}</span></div>
+      <div class="pl-name">${p.name}</div>
+      <div class="pl-meta">${p.cat} · ${p.meta}</div>
+    </div>
+  `).join('');
+  grid.querySelectorAll('.pl-card').forEach(card => {
+    card.addEventListener('click', e => {
+      if (e.target.closest('[data-edit]') || e.target.closest('[data-del]')) return;
+      const id = card.dataset.id;
+      // 单选: 选中当前,取消其他
+      _plDraft = (_plDraft === id) ? null : id;
+      grid.querySelectorAll('.pl-card').forEach(c => c.classList.toggle('selected', c.dataset.id === _plDraft));
+      document.getElementById('pl-sel-ct').textContent = _plDraft ? 1 : 0;
+    });
+  });
+  grid.querySelectorAll('[data-edit]').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      openEditProductDrawer(btn.dataset.edit);
+    });
+  });
+  grid.querySelectorAll('[data-del]').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      const id = btn.dataset.del;
+      const p = PRODUCTS.find(x => x.id === id);
+      if (!p) return;
+      if (!confirm('确认删除「' + p.name + '」?\n该操作不可撤销,商品下生成的素材记录也会一并清理。')) return;
+      const idx = PRODUCTS.findIndex(x => x.id === id);
+      if (idx >= 0) PRODUCTS.splice(idx, 1);
+      if (_plDraft === id) _plDraft = null;
+      if (state.selectedProd === id) state.selectedProd = null;
+      renderProdLib();
+      renderSelectedProds();
+      Shell.toast('已删除', p.name);
+    });
+  });
+  document.getElementById('pl-sel-ct').textContent = _plDraft ? 1 : 0;
+}
+
+// ─── 编辑商品 drawer (在商品库内 prefill 数据) ───
+const PRODUCT_EXTRA = {
+  p1: { target: '熬夜党 · 25-35 岁女性 · 敏感肌',         bullets: ['72h 长效补水', '官方授权正品', '通勤补妆神器'] },
+  p2: { target: '通勤党 · 18-30 岁 · 大学生 / 白领',       bullets: ['主动降噪 35dB', '蓝牙 5.4 双设备', '32h 续航'] },
+  p3: { target: '加班党 · 独居青年 · 一人食场景',          bullets: ['一杯水即可', '原切牛肉块充足', '6 桶大箱装'] },
+  p4: { target: '通勤防晒 · 油皮 / 敏感肌',                bullets: ['SPF50+ PA++++', '物理防晒不刺激', '清透不假白'] },
+  p5: { target: '咖啡入门 · 早八党 · 加班族',              bullets: ['冷热水即溶', '原产地豆精选', '24 颗精装'] },
+  p6: { target: '小户型 · 健康饮食 · 新手厨房',            bullets: ['4L 大容量', '可视玻璃观察', '一键预设'] },
+  p7: { target: '健身房 · 通勤穿搭 · 18-32 岁女性',        bullets: ['裸感面料', '高弹收腹', '亲肤透气'] },
+};
+
+let _editingProdId = null;
+
+function openEditProductDrawer(id) {
+  const p = PRODUCTS.find(x => x.id === id);
+  if (!p) return;
+  _editingProdId = id;
+  document.getElementById('pc-drawer-title').textContent = '编辑商品 · ' + p.name;
+  document.getElementById('pcf-name').value = p.name;
+  document.getElementById('pcf-cat').value = p.cat;
+  const extra = PRODUCT_EXTRA[id] || { target: '', bullets: [] };
+  document.getElementById('pcf-target').value = extra.target || '';
+  const ul = document.getElementById('pcf-bullets');
+  ul.querySelectorAll('li:not(.add)').forEach(li => li.remove());
+  const addLi = ul.querySelector('.add');
+  (extra.bullets || []).forEach((b, i) => {
+    const li = document.createElement('li');
+    li.innerHTML = `
+      <span class="num">${i + 1}</span>
+      <input value="${b.replace(/"/g, '&quot;')}">
+      <button class="rm" type="button" aria-label="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+    `;
+    ul.insertBefore(li, addLi);
+    li.querySelector('.rm').addEventListener('click', () => { li.remove(); renumberBullets(); });
+  });
+  document.getElementById('pcf-add-input').value = '';
+  document.getElementById('pc-drawer-bg').classList.add('show');
+  document.getElementById('pc-drawer').classList.add('show');
+  document.getElementById('pc-drawer').setAttribute('aria-hidden', 'false');
+}
+
+function renumberBullets() {
+  const ul = document.getElementById('pcf-bullets');
+  [...ul.querySelectorAll('li:not(.add) .num')].forEach((s, i) => { s.textContent = i + 1; });
+}
+
+function closeEditProductDrawer() {
+  document.getElementById('pc-drawer-bg').classList.remove('show');
+  document.getElementById('pc-drawer').classList.remove('show');
+  document.getElementById('pc-drawer').setAttribute('aria-hidden', 'true');
+  _editingProdId = null;
+}
+
+document.getElementById('pcf-add-input').addEventListener('keydown', e => {
+  if (e.key !== 'Enter') return;
+  const v = e.target.value.trim();
+  if (!v) return;
+  const ul = document.getElementById('pcf-bullets');
+  const addLi = ul.querySelector('.add');
+  const li = document.createElement('li');
+  li.innerHTML = `
+    <span class="num">0</span>
+    <input value="${v.replace(/"/g, '&quot;')}">
+    <button class="rm" type="button" aria-label="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
+  `;
+  ul.insertBefore(li, addLi);
+  li.querySelector('.rm').addEventListener('click', () => { li.remove(); renumberBullets(); });
+  e.target.value = '';
+  renumberBullets();
+});
+
+document.getElementById('pc-drawer-close').addEventListener('click', closeEditProductDrawer);
+document.getElementById('pc-cancel-btn').addEventListener('click', closeEditProductDrawer);
+document.getElementById('pc-drawer-bg').addEventListener('click', closeEditProductDrawer);
+document.getElementById('pc-save-btn').addEventListener('click', () => {
+  if (!_editingProdId) return;
+  const newName = document.getElementById('pcf-name').value.trim();
+  const newCat = document.getElementById('pcf-cat').value;
+  const newTarget = document.getElementById('pcf-target').value.trim();
+  if (!newName) { Shell.toast('请填写商品名称'); return; }
+  const p = PRODUCTS.find(x => x.id === _editingProdId);
+  if (p) { p.name = newName; p.cat = newCat; }
+  const bullets = [...document.querySelectorAll('#pcf-bullets li:not(.add) input')].map(i => i.value.trim()).filter(Boolean);
+  PRODUCT_EXTRA[_editingProdId] = { target: newTarget, bullets };
+  Shell.toast('已保存', newName);
+  closeEditProductDrawer();
+  renderProdLib();
+  renderSelectedProds();
+});
+
+document.getElementById('prod-add-btn').addEventListener('click', () => {
+  _plDraft = state.selectedProd;
+  _plCatFilter = '';
+  _plQuery = '';
+  document.getElementById('pl-search-input').value = '';
+  document.querySelectorAll('.pl-side-item').forEach(x => x.classList.toggle('active', x.dataset.cat === ''));
+  renderProdLib();
+  document.getElementById('pl-modal-bg').classList.add('show');
+});
+document.getElementById('pl-close-btn').addEventListener('click', () => {
+  document.getElementById('pl-modal-bg').classList.remove('show');
+});
+document.getElementById('pl-cancel-btn').addEventListener('click', () => {
+  document.getElementById('pl-modal-bg').classList.remove('show');
+});
+document.getElementById('pl-confirm-btn').addEventListener('click', () => {
+  if (!_plDraft) { Shell.toast('请先选择商品', '只能选 1 个'); return; }
+  state.selectedProd = _plDraft;
+  document.getElementById('pl-modal-bg').classList.remove('show');
+  renderSelectedProds();
+});
+document.getElementById('pl-new-btn').addEventListener('click', () => {
+  if (!window.NewProductDrawer) { Shell.toast('Drawer 未加载'); return; }
+  window.NewProductDrawer.open({
+    onSave: function (p) {
+      const product = {
+        id: p.id,
+        name: p.name,
+        cat: p.cat,
+        meta: (p.target ? p.target.split(/[ ,、、]+/)[0] : '新建') + ' · ' + p.imgs + ' 张图',
+      };
+      PRODUCTS.unshift(product);
+      // 单选: 新建商品直接选中(覆盖原选)
+      _plDraft = product.id;
+      state.selectedProd = product.id;
+      _plCatFilter = '';
+      _plQuery = '';
+      const searchInput = document.getElementById('pl-search-input');
+      if (searchInput) searchInput.value = '';
+      renderProdLib();
+      renderSelectedProds();
+      Shell.toast('已加入商品库', '+ ' + product.name);
+    }
+  });
+});
+document.querySelectorAll('.pl-side-item').forEach(item => {
+  item.addEventListener('click', () => {
+    document.querySelectorAll('.pl-side-item').forEach(x => x.classList.remove('active'));
+    item.classList.add('active');
+    _plCatFilter = item.dataset.cat;
+    renderProdLib();
+  });
+});
+document.getElementById('pl-search-input').addEventListener('input', e => {
+  _plQuery = e.target.value.trim();
+  renderProdLib();
+});
+
+// 平台单选
+function updatePlatforms() {
+  const id = state.selectedPlatform;
+  const c = id ? document.querySelector('.platform-card[data-id="' + id + '"]') : null;
+  document.getElementById('pv-platforms').textContent = c ? c.dataset.name : '未选择';
+  updateCost();
+  renderPreviewSections();
+}
+function updateCost() {
+  const hasProd = !!state.selectedProd;
+  const hasPlat = !!state.selectedPlatform;
+  const total = (hasProd && hasPlat ? 1 : 0) * state.count * UNIT_PRICE;
+  document.getElementById('cost-total').textContent = '¥' + total.toFixed(2);
+  const btn = document.getElementById('pc-go-btn');
+  if (!hasProd || !hasPlat) btn.classList.add('disabled');
+  else btn.classList.remove('disabled');
+  document.getElementById('pv-count').textContent = state.count + ' 张';
+}
+document.querySelectorAll('.platform-card').forEach(card => {
+  card.addEventListener('click', () => {
+    const id = card.dataset.id;
+    state.selectedPlatform = (state.selectedPlatform === id) ? null : id;
+    document.querySelectorAll('.platform-card').forEach(c =>
+      c.classList.toggle('selected', c.dataset.id === state.selectedPlatform)
+    );
+    updatePlatforms();
+  });
+});
+
+// 数量
+document.querySelectorAll('.pill-row').forEach(row => {
+  row.addEventListener('click', e => {
+    const btn = e.target.closest('.opt');
+    if (!btn) return;
+    row.querySelectorAll('.opt').forEach(o => o.classList.remove('active'));
+    btn.classList.add('active');
+    state.count = +btn.dataset.val;
+    updateCost();
+    renderPreviewSections();
+  });
+});
+
+// 渲染右侧预览 (单平台)
+function renderPreviewSections() {
+  const container = document.getElementById('pv-results');
+  const id = state.selectedPlatform;
+  const c = id ? document.querySelector('.platform-card[data-id="' + id + '"]') : null;
+  if (!c) {
+    container.innerHTML = '<div class="pc-pv-empty">请先选择平台<div class="mono">// PICK A PLATFORM</div></div>';
+    return;
+  }
+  container.innerHTML = `
+    <div class="pv-platform-section">
+      <div class="ps-h">
+        <span>${c.dataset.name} 套图预览</span>
+        <span class="ct">${state.count} 张</span>
+      </div>
+      <div class="ps-grid">
+        ${Array(state.count).fill(0).map(() => `
+          <div class="mp-result">
+            <div class="placeholder mp-r-thumb"><span class="ph-frame">${c.dataset.name}</span></div>
+            <div class="mp-r-act">
+              <button class="add-lib" type="button" data-cost="${UNIT_PRICE}">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 5v14M5 12h14"/></svg>
+                入资产库 ¥${UNIT_PRICE.toFixed(2)}
+              </button>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+  `;
+  container.querySelectorAll('.add-lib').forEach(b => {
+    b.addEventListener('click', e => {
+      e.stopPropagation();
+      if (b.classList.contains('added')) return;
+      b.classList.add('added');
+      b.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg> 已入库';
+      Shell.toast('已入库', '已扣 ¥' + (+b.dataset.cost).toFixed(2));
+    });
+  });
+}
+
+// 立即生成
+document.getElementById('pc-go-btn').addEventListener('click', () => {
+  if (!state.selectedPlatform || !state.selectedProd) return;
+  Shell.toast('已提交任务', '可在 [任务中心] 查看进度');
+  renderPreviewSections();
+});
+
+// URL ?product=商品名 → 替换默认选中(从 products.html 跳过来时携带)
+(function applyUrlProduct() {
+  const q = new URLSearchParams(location.search);
+  const productName = q.get('product');
+  if (!productName) return;
+  let p = PRODUCTS.find(x => x.name === productName);
+  if (!p) {
+    p = { id: 'np-' + Date.now().toString(36), name: productName, cat: '美妆个护', meta: '新建 · 待补充' };
+    PRODUCTS.unshift(p);
+  }
+  state.selectedProd = p.id;
+})();
+
+// 初始
+renderSelectedProds();
+updatePlatforms();
+
+/* ============================================================
+   任务历史 (localStorage) · 仅在「立即生成」时创建任务
+   ============================================================ */
+(function () {
+  'use strict';
+  const TASK_TYPE = 'platform';
+  const KEY = 'fs-image-tasks-' + TASK_TYPE;
+
+  let tasks = [];
+  let currentId = null;
+
+  const PLAT_NAME = {};
+  document.querySelectorAll('#platform-grid .platform-card').forEach(c => {
+    PLAT_NAME[c.dataset.id] = c.dataset.name || c.dataset.id;
+  });
+
+  function load() {
+    try { return JSON.parse(localStorage.getItem(KEY) || '[]'); } catch (e) { return []; }
+  }
+  function save(arr) {
+    try { localStorage.setItem(KEY, JSON.stringify(arr)); } catch (e) {}
+  }
+  function escapeHtml(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  function buildSnapshot() {
+    return {
+      selectedProd: state.selectedProd,
+      selectedPlatform: state.selectedPlatform,
+      count: state.count,
+    };
+  }
+  function autoName(snap) {
+    const prod = snap.selectedProd ? PRODUCTS.find(p => p.id === snap.selectedProd) : null;
+    const left  = prod ? (prod.name.length > 10 ? prod.name.slice(0, 10) + '…' : prod.name) : '未选商品';
+    const right = snap.selectedPlatform ? (PLAT_NAME[snap.selectedPlatform] || snap.selectedPlatform) : '未选平台';
+    return `${left} × ${right}`;
+  }
+  function timeNow() {
+    const d = new Date();
+    return ('0'+(d.getMonth()+1)).slice(-2) + '.' + ('0'+d.getDate()).slice(-2) + ' ' + ('0'+d.getHours()).slice(-2) + ':' + ('0'+d.getMinutes()).slice(-2);
+  }
+
+  function renderTasksList() {
+    const root = document.getElementById('tasks-list');
+    document.getElementById('tasks-count').textContent = tasks.length;
+    if (!tasks.length) {
+      root.innerHTML = `<div class="pc-tasks-empty">还没有历史任务<span class="mono">// 调整商品/平台/参数后生成</span></div>`;
+      return;
+    }
+    const STATUS_LABEL = { gen: '生成中', ok: '已完成', err: '失败' };
+    const sorted = [...tasks].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+    root.innerHTML = sorted.map(t => `
+      <div class="pc-task-card${t.id === currentId ? ' active' : ''}" data-id="${t.id}">
+        <div class="nm">${escapeHtml(t.name)}</div>
+        <div class="meta">
+          <span class="pill-mini ${t.status}">${STATUS_LABEL[t.status] || t.status}</span>
+          <span>${escapeHtml(t.time || '')}</span>
+        </div>
+        <button class="x" type="button" data-rm="${t.id}" title="删除">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    `).join('');
+    root.querySelectorAll('.pc-task-card').forEach(card => {
+      card.addEventListener('click', e => {
+        if (e.target.closest('button.x')) return;
+        loadTaskIntoForm(card.dataset.id);
+      });
+    });
+    root.querySelectorAll('button.x[data-rm]').forEach(btn => {
+      btn.addEventListener('click', e => {
+        e.stopPropagation();
+        const id = btn.dataset.rm;
+        const idx = tasks.findIndex(t => t.id === id);
+        if (idx < 0) return;
+        const name = tasks[idx].name;
+        tasks.splice(idx, 1);
+        save(tasks);
+        if (currentId === id) currentId = null;
+        renderTasksList();
+        Shell.toast('已删除任务', name);
+      });
+    });
+  }
+
+  function loadTaskIntoForm(id) {
+    const t = tasks.find(x => x.id === id);
+    if (!t) return;
+    state.selectedProd     = t.snap.selectedProd     || null;
+    state.selectedPlatform = t.snap.selectedPlatform || null;
+    state.count = t.snap.count;
+    document.querySelectorAll('.pill-row[data-key="count"] .opt').forEach(b => b.classList.toggle('active', +b.dataset.val === state.count));
+    document.querySelectorAll('#platform-grid .platform-card').forEach(c => c.classList.toggle('selected', c.dataset.id === state.selectedPlatform));
+    renderSelectedProds();
+    updatePlatforms();
+    currentId = id;
+    renderTasksList();
+  }
+
+  function newBlankTask() {
+    state.selectedProd = null;
+    state.selectedPlatform = null;
+    state.count = 4;
+    document.querySelectorAll('.pill-row[data-key="count"] .opt').forEach(b => b.classList.toggle('active', +b.dataset.val === 4));
+    document.querySelectorAll('#platform-grid .platform-card').forEach(c => c.classList.remove('selected'));
+    renderSelectedProds();
+    updatePlatforms();
+    currentId = null;
+    renderTasksList();
+  }
+
+  // 「立即生成」 → 才创建任务
+  document.getElementById('pc-go-btn').addEventListener('click', () => {
+    if (!state.selectedPlatform || !state.selectedProd) return;
+    const snap = buildSnapshot();
+    const name = autoName(snap);
+    const time = timeNow();
+    if (currentId) {
+      const t = tasks.find(x => x.id === currentId);
+      if (t) { t.snap = snap; t.name = name; t.status = 'gen'; t.time = time; }
+    } else {
+      currentId = 'task-' + Date.now();
+      tasks.push({ id: currentId, type: TASK_TYPE, name, snap, status: 'gen', time, createdAt: Date.now() });
+    }
+    save(tasks);
+    renderTasksList();
+  });
+
+  document.getElementById('tasks-new-btn').addEventListener('click', newBlankTask);
+
+  tasks = load();
+  renderTasksList();
+})();
+</script>
+</body>
+</html>
diff --git a/v2/product-create-upload.html b/v2/product-create-upload.html
new file mode 100644
index 0000000..8b79fae
--- /dev/null
+++ b/v2/product-create-upload.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>新建商品 · 跳转中...</title>
+<script>
+  // 已废弃 · 新建商品改为 products.html 上的居中弹窗(Shell.openNewProduct)
+  // 直接访问此 URL 时,跳回商品库并自动打开弹窗
+  sessionStorage.setItem('auto-open-new-product', '1');
+  location.replace('products.html');
+</script>
+</head>
+<body></body>
+</html>
diff --git a/v2/product-create-v2.html b/v2/product-create-v2.html
new file mode 100644
index 0000000..c923e81
--- /dev/null
+++ b/v2/product-create-v2.html
@@ -0,0 +1,413 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>新建商品 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── 主表单 ─── */
+  .form-grid {
+    display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px;
+    margin-bottom: 24px;
+  }
+  .form-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 24px;
+  }
+  .form-card .card-h {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 16px;
+  }
+  .form-card .card-h h3 {
+    font-size: 14px; font-weight: 600; color: var(--accent-black);
+  }
+  .form-card .card-h .req-tag {
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 2px 7px;
+    background: var(--crimson-bg); color: var(--accent-crimson);
+    border-radius: var(--r-sm); letter-spacing: .04em;
+    border: 1px solid var(--red-bd);
+  }
+  .form-card .card-h .opt-tag {
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 2px 7px;
+    background: var(--background-lighter); color: var(--black-alpha-56);
+    border-radius: var(--r-sm); letter-spacing: .04em;
+    border: 1px solid var(--border-faint);
+  }
+  .form-card .card-sub {
+    font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-48); margin: -10px 0 14px; letter-spacing: .02em;
+  }
+
+  /* 原图槽位 */
+  .photo-grid {
+    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
+    margin-top: 8px;
+  }
+  .photo-slot {
+    aspect-ratio: 1;
+    border-radius: var(--r-md);
+    border: 1px dashed var(--border-faint);
+    background: var(--background-lighter);
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    font-size: 10px; font-family: var(--font-mono); letter-spacing: .04em;
+    transition: all var(--t-base);
+  }
+  .photo-slot:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-8); }
+  .photo-slot.filled {
+    border-style: solid;
+    background-size: cover; background-position: center;
+    cursor: default; color: transparent;
+  }
+  .photo-slot.filled:hover { border-color: var(--heat-40); }
+  .photo-slot .slot-label {
+    position: absolute; top: 5px; left: 5px;
+    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
+    padding: 2px 6px;
+    background: rgba(255,255,255,.92); color: var(--black-alpha-72);
+    border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .photo-slot .slot-main {
+    position: absolute; top: 5px; right: 5px;
+    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
+    padding: 2px 6px; background: var(--heat); color: #fff;
+    border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .photo-slot .slot-x {
+    position: absolute; top: 4px; right: 4px;
+    width: 18px; height: 18px;
+    border-radius: 999px;
+    background: rgba(21,20,15,.7); color: #fff;
+    display: none; place-items: center; cursor: pointer; border: 0;
+  }
+  .photo-slot.filled:hover .slot-x { display: grid; }
+  .photo-slot.filled:hover .slot-main { display: none; }
+  .photo-slot .slot-x svg { width: 9px; height: 9px; }
+  .photo-slot .plus { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 4px; }
+  .photo-slot .plus svg { width: 12px; height: 12px; }
+
+  .upload-tip {
+    display: flex; align-items: center; gap: 8px;
+    margin-top: 14px; padding: 10px 12px;
+    background: var(--heat-8); border: 1px dashed var(--heat-40);
+    border-radius: var(--r-md);
+    font-size: 12px; color: var(--accent-black); line-height: 1.5;
+  }
+  .upload-tip svg { width: 14px; height: 14px; color: var(--heat); flex-shrink: 0; }
+  .upload-tip strong { color: var(--heat); font-weight: 600; }
+
+  /* AI 提示 banner(选填字段说明) */
+  .ai-tip {
+    margin-top: -6px; margin-bottom: 16px;
+    padding: 10px 12px;
+    background: var(--background-lighter);
+    border-radius: var(--r-md);
+    border: 1px dashed var(--border-faint);
+    display: flex; align-items: flex-start; gap: 8px;
+    font-size: 12px; color: var(--black-alpha-72); line-height: 1.55;
+  }
+  .ai-tip svg { width: 13px; height: 13px; color: var(--heat); flex-shrink: 0; margin-top: 2px; }
+  .ai-tip strong { color: var(--accent-black); font-weight: 600; }
+
+  /* 卖点 bullet 输入 */
+  .sell-list { list-style: none; margin: 0; padding: 0; }
+  .sell-list li {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 10px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    margin-bottom: 6px;
+    font-size: 13px;
+  }
+  .sell-list li.add { background: var(--surface); border-style: dashed; }
+  .sell-list .num {
+    width: 18px; height: 18px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-size: 10.5px; font-family: var(--font-mono);
+    color: var(--black-alpha-56);
+    display: grid; place-items: center; flex-shrink: 0;
+  }
+  .sell-list li.add .num { background: transparent; color: var(--heat); border-color: var(--heat-40); }
+  .sell-list .txt { flex: 1; min-width: 0; }
+  .sell-list .bl-input {
+    flex: 1; border: 0; background: transparent;
+    font-size: 13px; color: var(--accent-black); padding: 0;
+    font-family: inherit;
+  }
+  .sell-list .bl-input::placeholder { color: var(--black-alpha-48); }
+  .sell-list .bl-x {
+    width: 20px; height: 20px;
+    display: grid; place-items: center;
+    color: var(--black-alpha-48); cursor: pointer;
+    background: transparent; border: 0; opacity: 0;
+    transition: opacity var(--t-base);
+  }
+  .sell-list li:hover .bl-x { opacity: 1; }
+  .sell-list .bl-x:hover { color: var(--accent-crimson); }
+  .sell-list .bl-x svg { width: 11px; height: 11px; }
+
+  /* 底部操作行 */
+  .form-foot {
+    position: sticky; bottom: 0;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 14px 22px;
+    display: flex; align-items: center; gap: 14px;
+    margin-top: 8px;
+  }
+  .form-foot .req-info {
+    font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .form-foot .req-info .ok { color: var(--accent-forest); }
+  .form-foot .req-info .miss { color: var(--accent-crimson); }
+  .form-foot .actions {
+    margin-left: auto;
+    display: flex; gap: 10px;
+  }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>新建商品</h1>
+    <div class="sub"><span class="mono">// 上传原图 + 填写基本信息</span> · 保存后可在工作台逐步丰富素材</div>
+  </div>
+</div>
+
+<!-- ============ 表单 ============ -->
+<div class="form-grid">
+
+  <!-- 左:原图 -->
+  <div class="form-card">
+    <div class="card-h">
+      <h3>商品原图</h3>
+      <span class="req-tag">必填</span>
+    </div>
+    <div class="card-sub">// 1-5 张 · 这是后续所有 AI 生成的源材料</div>
+    <input type="file" id="photo-input" accept="image/*" multiple hidden>
+    <div class="photo-grid" id="photo-grid"></div>
+    <div class="upload-tip">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+      <span>建议上传 <strong>正面 / 侧面 / 细节 / 包装</strong> 4 张,后续在工作台生成的<strong>白底三视图</strong>更准确。</span>
+    </div>
+  </div>
+
+  <!-- 右:基本信息 -->
+  <div class="form-card">
+    <div class="card-h">
+      <h3>基本信息</h3>
+      <span class="req-tag">必填</span>
+    </div>
+    <div class="field">
+      <label class="field-label">商品名称<span class="req">*</span></label>
+      <input class="input" id="p-name" placeholder="例: 透真玻尿酸补水面膜">
+    </div>
+    <div class="field">
+      <label class="field-label">品类<span class="req">*</span></label>
+      <select class="select" id="p-cat">
+        <option value="">— 选择品类 —</option>
+        <option>美妆个护</option>
+        <option>服饰内衣</option>
+        <option>食品饮料</option>
+        <option>家居家电</option>
+        <option>数码 3C</option>
+        <option>个护清洁</option>
+        <option>运动户外</option>
+        <option>母婴亲子</option>
+      </select>
+    </div>
+    <div class="field" style="margin-bottom:0;">
+      <label class="field-label">价格(元)</label>
+      <input class="input" id="p-price" type="number" placeholder="选填 · 仅用于素材生成参考">
+    </div>
+  </div>
+
+</div>
+
+<div class="form-card" style="margin-bottom: 24px;">
+  <div class="card-h">
+    <h3>卖点 & 人群</h3>
+    <span class="opt-tag">选填 · 推荐</span>
+  </div>
+  <div class="ai-tip">
+    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+    <span>填上这两项,后续 AI 生脚本(<strong>痛点种草 / 剧情带货</strong> 等模板)质量明显更高 —— 系统会用卖点构造钩子,用人群定语气。现在不填也可以,做视频项目时仍可补。</span>
+  </div>
+
+  <div class="field">
+    <label class="field-label">核心卖点</label>
+    <div class="field-hint" style="margin: 4px 0 8px;">3-5 条要点,回车添加</div>
+    <ul class="sell-list" id="sell-list">
+      <li class="add"><span class="num">+</span><input class="bl-input" id="sell-input" placeholder="例: 玻尿酸双效保湿,4 小时持久水润"></li>
+    </ul>
+  </div>
+  <div class="field" style="margin-bottom:0;">
+    <label class="field-label">目标人群</label>
+    <input class="input" id="p-target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+  </div>
+</div>
+
+<!-- ============ 底部操作 ============ -->
+<div class="form-foot">
+  <span class="req-info" id="req-info">// 必填检查:<span class="miss">商品名 / 品类 / ≥1 张图</span> 未完成</span>
+  <div class="actions">
+    <a class="btn" href="products.html">取消</a>
+    <button class="btn btn-primary" id="save-btn" disabled>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+      保存并进入工作台
+    </button>
+  </div>
+</div>
+
+</div>
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'products',
+  crumbs: [
+    { label: '工作台', href: 'index.html' },
+    { label: '商品库', href: 'products.html' },
+    { label: '新建' }
+  ]
+});
+
+const MAX = 5;
+const photos = [];  // { id, dataUrl }
+const SLOT_LABELS = ['主图', '细节 02', '细节 03', '细节 04', '细节 05'];
+
+const $ = id => document.getElementById(id);
+
+// 渲染槽位
+function renderPhotos() {
+  const grid = $('photo-grid');
+  grid.innerHTML = '';
+  for (let i = 0; i < MAX; i++) {
+    const slot = document.createElement('div');
+    const p = photos[i];
+    if (p) {
+      slot.className = 'photo-slot filled';
+      slot.style.backgroundImage = `url("${p.dataUrl}")`;
+      slot.innerHTML = `
+        <span class="slot-label">${SLOT_LABELS[i]}</span>
+        ${i === 0 ? '<span class="slot-main">MAIN</span>' : ''}
+        <button class="slot-x" type="button" data-i="${i}" aria-label="移除">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+        </button>
+      `;
+    } else if (i === photos.length) {
+      slot.className = 'photo-slot empty';
+      slot.innerHTML = `<div class="plus"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg></div><span>添加</span>`;
+      slot.addEventListener('click', () => $('photo-input').click());
+    } else {
+      slot.className = 'photo-slot';
+      slot.style.opacity = '.6';
+    }
+    grid.appendChild(slot);
+  }
+  // 绑定删除
+  grid.querySelectorAll('.slot-x').forEach(b => {
+    b.addEventListener('click', e => {
+      e.stopPropagation();
+      const i = +b.dataset.i;
+      photos.splice(i, 1);
+      renderPhotos();
+      syncSave();
+    });
+  });
+}
+
+// 文件上传
+$('photo-input').addEventListener('change', e => {
+  const files = [...e.target.files].filter(f => f.type.startsWith('image/'));
+  const remain = MAX - photos.length;
+  files.slice(0, remain).forEach(f => {
+    const reader = new FileReader();
+    reader.onload = ev => {
+      photos.push({
+        id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
+        dataUrl: ev.target.result,
+      });
+      renderPhotos();
+      syncSave();
+    };
+    reader.readAsDataURL(f);
+  });
+  e.target.value = '';
+});
+
+// 卖点
+const sellList = $('sell-list');
+const sellInput = $('sell-input');
+sellInput.addEventListener('keydown', e => {
+  if (e.key !== 'Enter') return;
+  e.preventDefault();
+  const t = sellInput.value.trim();
+  if (!t) return;
+  const li = document.createElement('li');
+  li.innerHTML = `<span class="num"></span><span class="txt"></span><button class="bl-x" type="button" aria-label="删除"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>`;
+  li.querySelector('.txt').textContent = t;
+  sellList.querySelector('.add').before(li);
+  sellInput.value = '';
+  renumberSell();
+  li.querySelector('.bl-x').addEventListener('click', () => {
+    li.remove();
+    renumberSell();
+  });
+});
+function renumberSell() {
+  sellList.querySelectorAll('li:not(.add) .num').forEach((n, i) => n.textContent = i + 1);
+}
+
+// 必填检查
+function syncSave() {
+  const hasName = $('p-name').value.trim().length > 0;
+  const hasCat = $('p-cat').value.length > 0;
+  const hasPhoto = photos.length > 0;
+  const ok = hasName && hasCat && hasPhoto;
+  $('save-btn').disabled = !ok;
+
+  const missing = [];
+  if (!hasName) missing.push('商品名');
+  if (!hasCat) missing.push('品类');
+  if (!hasPhoto) missing.push('≥1 张图');
+
+  const info = $('req-info');
+  if (ok) {
+    info.innerHTML = '// 必填检查:<span class="ok">已全部完成 ✓</span> · 可进入工作台';
+  } else {
+    info.innerHTML = `// 必填检查:<span class="miss">${missing.join(' / ')}</span> 未完成`;
+  }
+}
+$('p-name').addEventListener('input', syncSave);
+$('p-cat').addEventListener('change', syncSave);
+
+// 保存 → 跳工作台
+$('save-btn').addEventListener('click', () => {
+  if ($('save-btn').disabled) return;
+  Shell.toast('商品已建档', `进入工作台`);
+  setTimeout(() => {
+    // 真实场景下会带商品 ID;demo 直接跳
+    location.href = 'product-studio.html?from=new&onboard=1';
+  }, 500);
+});
+
+renderPhotos();
+syncSave();
+</script>
+</body>
+</html>
diff --git a/v2/product-create.html b/v2/product-create.html
new file mode 100644
index 0000000..293ea22
--- /dev/null
+++ b/v2/product-create.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>新建商品 · 流·Studio</title>
+<meta http-equiv="Cache-Control" content="no-store, must-revalidate">
+<meta http-equiv="Pragma" content="no-cache">
+<meta http-equiv="Expires" content="0">
+<!-- 双保险:JS 没跑也能跳走 (1.5s 后强制回 products.html) -->
+<meta http-equiv="refresh" content="1.5; url=products.html?npd=1">
+<style>
+  html,body{background:#f9f9f9;margin:0;height:100%;font-family:'Inter',system-ui,sans-serif;}
+  .stub-msg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#999;font-size:13px;}
+  .stub-msg .ttl{font-size:14px;color:#262626;font-weight:500;}
+  .stub-msg a{color:#fa5d19;text-decoration:underline;}
+</style>
+</head>
+<body>
+<div class="stub-msg">
+  <div class="ttl">正在打开「新建商品」…</div>
+  <div>如未自动跳转,<a href="products.html?npd=1">点击这里</a></div>
+</div>
+<script>
+/* ============================================================
+   新建商品 · 重定向 stub
+   ----------------------------------------------------------
+   旧版本是一个 3883 行的全屏 drawer 页(legacy 备份在 product-create.legacy.html)。
+   现在「新建商品」改为 drawer 形态在原页面弹出,直接访问此 URL 没有意义。
+
+   行为:
+     1. 设置 sessionStorage 标志,通知落地页自动打开 drawer
+     2. 优先回退到 referrer(用户来源页),否则去 products.html
+     3. cache-bust 参数 ?npd=1 强制浏览器重新拉新版宿主页
+   ============================================================ */
+(function () {
+  try { sessionStorage.setItem('npd-auto-open', '1'); } catch (e) {}
+  try { sessionStorage.setItem('auto-open-new-product', '1'); } catch (e) {}
+
+  const ref = document.referrer || '';
+  const here = location.origin + location.pathname;
+
+  // 同源 referrer 且不是自身才回跳, 否则去 products.html
+  let target = 'products.html';
+  if (ref && ref.indexOf(location.origin) === 0 && ref.split('#')[0].split('?')[0] !== here) {
+    target = ref;
+  }
+  // 加 cache-bust query · 强制浏览器拉新版宿主页,避免再次命中缓存旧版
+  const sep = target.indexOf('?') >= 0 ? '&' : '?';
+  target = target + sep + 'npd=' + Date.now().toString(36);
+  location.replace(target);
+})();
+</script>
+</body>
+</html>
diff --git a/v2/product-create.legacy.html b/v2/product-create.legacy.html
new file mode 100644
index 0000000..f3f92b3
--- /dev/null
+++ b/v2/product-create.legacy.html
@@ -0,0 +1,3883 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>新建商品 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ============================================================
+     V2.1 product-create · 全屏新建商品工作台
+     - 顶部模式切换:[ 我有商品图 ] / [ AI 帮我生成图 ]
+     - 左侧 step 导航 + 已选素材
+     - 中央 canvas
+     - 右侧 controls
+     - Step 3 内嵌子 Tab(① 挑选模特 → ② 生成上身图)
+     ============================================================ */
+
+  body { background: var(--background-base); }
+
+  .wb {
+    height: 100vh;
+    display: grid;
+    grid-template-rows: 56px 1fr;
+    background: var(--background-base);
+  }
+  /* upload-mode-content 已废弃,被独立的 product-create-upload.html 替代 */
+  #upload-mode-content, #upload-steps { display: none !important; }
+
+  /* ─── Top bar ─── */
+  .wb-top {
+    padding: 0 24px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 18px;
+  }
+  .wb-top .home {
+    display: flex; align-items: center; gap: 8px;
+    color: var(--black-alpha-56);
+    font-size: 13px;
+    cursor: pointer;
+    transition: color var(--t-base);
+  }
+  .wb-top .home:hover { color: var(--accent-black); }
+  .wb-top .home svg { width: 14px; height: 14px; }
+  .wb-top .ti {
+    font-size: 15px; font-weight: 600;
+    color: var(--accent-black);
+    display: flex; align-items: center; gap: 10px;
+  }
+  .wb-top .ti .name-edit {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--r-md);
+    padding: 4px 10px;
+    font-size: 15px; font-weight: 600;
+    color: var(--accent-black);
+    font-family: inherit;
+    width: 280px;
+    transition: border-color var(--t-base), background var(--t-base);
+  }
+  .wb-top .ti .name-edit:hover { border-color: var(--black-alpha-12); background: var(--black-alpha-3); }
+  .wb-top .ti .name-edit:focus { border-color: var(--heat-40); background: var(--surface); box-shadow: inset 0 0 0 1px var(--heat-40); }
+  .wb-top .ti .mode-pill {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--heat);
+    background: var(--heat-12);
+    border: 1px solid var(--heat-20);
+    border-radius: var(--r-sm);
+    padding: 2px 8px;
+    letter-spacing: .04em;
+    font-weight: 500;
+  }
+  .wb-top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+  .wb-top .x {
+    width: 36px; height: 36px;
+    display: grid; place-items: center;
+    cursor: pointer;
+    color: var(--black-alpha-56);
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .wb-top .x:hover { color: var(--accent-crimson); background: var(--crimson-bg); border-color: var(--crimson-bd); }
+  .wb-top .x svg { width: 14px; height: 14px; }
+
+  /* ─── Mode switch row ─── */
+  .mode-row {
+    padding: 14px 24px;
+    background: var(--background-lighter);
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 14px;
+  }
+  .mode-row .lbl {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+    flex-shrink: 0;
+  }
+  .mode-toggle {
+    display: inline-flex;
+    background: var(--surface);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    padding: 3px;
+    gap: 2px;
+  }
+  .mode-toggle button {
+    padding: 6px 14px;
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    font-size: 12.5px; font-weight: 500;
+    color: var(--black-alpha-56);
+    cursor: pointer;
+    font-family: inherit;
+    display: flex; align-items: center; gap: 6px;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .mode-toggle button:hover { color: var(--accent-black); }
+  .mode-toggle button.active { background: var(--heat); color: var(--accent-white); font-weight: 600; }
+  .mode-toggle button svg { width: 13px; height: 13px; }
+  .mode-row .mode-hint {
+    margin-left: auto;
+    font-size: 12.5px;
+    color: var(--black-alpha-56);
+    display: flex; align-items: center; gap: 8px;
+  }
+  .mode-row .mode-hint .mono {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+  }
+
+  /* ─── Main split ─── */
+  .wb-main { display: grid; grid-template-columns: 280px 1fr 360px; min-height: 0; }
+
+  /* ─── Left sidebar ─── */
+  .wb-side {
+    border-right: 1px solid var(--border-faint);
+    background: var(--background-base);
+    overflow-y: auto;
+    padding: 18px 0;
+  }
+  .step-item {
+    padding: 14px 20px;
+    display: flex; align-items: flex-start; gap: 12px;
+    cursor: pointer;
+    border-left: 3px solid transparent;
+    position: relative;
+    transition: background var(--t-base);
+  }
+  .step-item:hover { background: var(--black-alpha-4); }
+  .step-item.active { background: var(--heat-12); border-left-color: var(--heat); }
+  .step-item.locked { opacity: .55; cursor: not-allowed; }
+  .step-item.locked:hover { background: transparent; }
+  .step-item .num {
+    width: 26px; height: 26px;
+    border: 1px solid var(--black-alpha-12);
+    background: var(--surface);
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .step-item.done .num { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); }
+  .step-item.active .num { background: var(--heat); color: var(--accent-white); border-color: var(--heat); }
+  .step-item .info { flex: 1; min-width: 0; }
+  .step-item .ti2 { font-size: 13.5px; font-weight: 600; color: var(--black-alpha-56); }
+  .step-item.active .ti2 { color: var(--accent-black); }
+  .step-item.done .ti2 { color: var(--accent-black); }
+  .step-item .sub {
+    font-size: 11.5px; color: var(--black-alpha-48);
+    margin-top: 4px;
+    font-family: var(--font-mono);
+    letter-spacing: .02em;
+    line-height: 1.5;
+  }
+  .step-item.done .sub { color: var(--black-alpha-56); font-family: var(--font-sans); letter-spacing: 0; }
+
+  /* Sub items under active step */
+  .substep-list { padding: 4px 20px 8px 56px; }
+  .substep-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px;
+    cursor: pointer;
+    font-size: 12.5px; color: var(--black-alpha-48);
+    border-left: 2px solid var(--border-faint);
+    margin-left: -4px;
+    transition: color var(--t-base), border-color var(--t-base);
+  }
+  .substep-item:hover { color: var(--black-alpha-56); border-left-color: var(--black-alpha-24); }
+  .substep-item.active { color: var(--heat); border-left-color: var(--heat); font-weight: 600; }
+  .substep-item.done { color: var(--accent-black); }
+  .substep-item .num-mini {
+    width: 18px; height: 18px;
+    border: 1px solid currentColor;
+    border-radius: var(--r-sm);
+    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .substep-item.active .num-mini, .substep-item.done .num-mini {
+    background: currentColor;
+    color: var(--accent-white);
+  }
+  .substep-item.done .num-mini { background: var(--accent-black); border-color: var(--accent-black); }
+
+  .side-divider { height: 1px; background: var(--border-faint); margin: 14px 20px; }
+
+  /* step-item 标签 (必须/附加) */
+  .step-tag-mini {
+    font-family: var(--font-mono);
+    font-size: 9.5px;
+    padding: 1px 6px;
+    border-radius: var(--r-sm);
+    margin-left: 4px;
+    letter-spacing: .04em;
+    font-weight: 500;
+    vertical-align: middle;
+  }
+  .step-tag-mini.req { background: var(--heat-12); color: var(--heat); }
+  .step-tag-mini.opt { background: var(--black-alpha-8); color: var(--black-alpha-56); }
+  .step-item.done .step-tag-mini.req { background: var(--forest-bg); color: var(--accent-forest); }
+
+  /* 附加资产 · 并列样式 (◇ 而非数字) */
+  .step-item.extra .num {
+    background: var(--background-lighter);
+    color: var(--black-alpha-48);
+    border: 1px dashed var(--black-alpha-24);
+    font-family: var(--font-mono);
+    font-size: 14px;
+  }
+  .step-item.extra.active {
+    background: var(--background-lighter);
+    border-left-color: var(--black-alpha-32);
+  }
+  .step-item.extra.active .num {
+    background: var(--accent-black);
+    color: var(--accent-white);
+    border-style: solid;
+    border-color: var(--accent-black);
+  }
+  .step-item.extra.done .num {
+    background: var(--forest-bg);
+    color: var(--accent-forest);
+    border: 1px solid var(--accent-forest);
+  }
+  .extra-hint {
+    padding: 0 20px 8px;
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    line-height: 1.6;
+  }
+
+  /* 资产库空态 */
+  .sel-asset-empty {
+    padding: 8px 20px;
+    font-size: 11px;
+    color: var(--black-alpha-32);
+    letter-spacing: .04em;
+  }
+  /* 原图缩略图横排 */
+  .side-orig-thumbs {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+  .side-orig-thumbs .ot {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    overflow: hidden;
+  }
+  .side-orig-thumbs .ot img { width: 100%; height: 100%; object-fit: cover; }
+
+  /* 资产库子分组 */
+  .asset-group {
+    margin-bottom: 12px;
+  }
+  .asset-group .ag-h {
+    font-size: 10.5px;
+    font-family: var(--font-mono);
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+    margin-bottom: 4px;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .asset-group .ag-h .v-count { color: var(--heat); }
+  .asset-group .ag-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+  }
+  .asset-group .ag-item {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    overflow: hidden;
+    position: relative;
+    cursor: zoom-in;
+  }
+  .asset-group .ag-item.current { border-color: var(--heat); border-width: 1.5px; }
+  .asset-group .ag-item img { width: 100%; height: 100%; object-fit: cover; }
+  .asset-group .ag-item .v-tag {
+    position: absolute;
+    bottom: 2px; left: 2px;
+    background: rgba(0,0,0,.65);
+    color: #fff;
+    font-family: var(--font-mono);
+    font-size: 8.5px;
+    padding: 1px 4px;
+    border-radius: 2px;
+    letter-spacing: .04em;
+  }
+
+  .side-section-h {
+    padding: 4px 20px 8px;
+    font-family: var(--font-mono);
+    font-size: 10.5px; color: var(--black-alpha-48);
+    letter-spacing: .08em; text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  .selected-assets-side { padding: 0 20px; }
+  .sel-asset-label {
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    margin-bottom: 6px;
+    font-family: var(--font-mono);
+    letter-spacing: .02em;
+  }
+  .sel-asset-thumb { aspect-ratio: 4/5; margin-bottom: 14px; }
+  .sel-asset-thumb.square { aspect-ratio: 1; }
+
+  /* ─── Center canvas ─── */
+  .wb-canvas {
+    background: var(--background-base);
+    overflow-y: auto;
+    padding: 0;
+    display: flex; flex-direction: column;
+    min-width: 0;
+  }
+  /* AI mode 容器也要 flex column 才能让 canvas-inner 撑满高度 */
+  #ai-mode-content {
+    flex: 1; min-height: 0;
+    display: flex; flex-direction: column;
+  }
+
+  /* Sub-tab strip on top (only in Step 3) */
+  .subtab-strip {
+    padding: 0 32px;
+    border-bottom: 1px solid var(--border-faint);
+    background: var(--surface);
+    display: flex; align-items: center; gap: 0;
+    position: sticky; top: 0; z-index: 5;
+  }
+  .subtab {
+    padding: 14px 18px;
+    font-size: 13px; font-weight: 500;
+    color: var(--black-alpha-56);
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    cursor: pointer;
+    display: flex; align-items: center; gap: 8px;
+    transition: color var(--t-base), background var(--t-base);
+    border-radius: var(--r-md) var(--r-md) 0 0;
+  }
+  .subtab:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  .subtab.active { color: var(--accent-black); border-bottom-color: var(--heat); }
+  .subtab.disabled { color: var(--black-alpha-32); cursor: not-allowed; }
+  .subtab.disabled:hover { background: transparent; color: var(--black-alpha-32); }
+  .subtab .num-circ {
+    width: 20px; height: 20px;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+    display: grid; place-items: center;
+  }
+  .subtab.done .num-circ { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); }
+  .subtab.active .num-circ { background: var(--heat); color: var(--accent-white); border-color: var(--heat); }
+  .subtab .arrow { color: var(--black-alpha-32); padding: 0 6px; }
+  .subtab-meta {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+  }
+  .subtab-meta .accent { color: var(--heat); font-weight: 700; }
+
+  /* Canvas inner */
+  .canvas-inner {
+    padding: 32px 32px 0;
+    flex: 1; min-height: 0;
+    max-width: 1280px; width: 100%;
+    display: flex; flex-direction: column;
+  }
+  .canvas-h {
+    margin-bottom: 24px;
+    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
+  }
+  .canvas-h h2 { font-size: 24px; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; color: var(--accent-black); }
+  .canvas-h p { font-size: 13.5px; color: var(--black-alpha-56); margin-top: 8px; line-height: 1.6; }
+  .canvas-h .step-tag {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    padding: 4px 10px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    letter-spacing: .04em;
+    flex-shrink: 0;
+  }
+
+  /* Step pane switching */
+  .step-pane { display: none; }
+  .step-pane.active {
+    display: flex; flex-direction: column;
+    flex: 1; min-height: 0;
+    animation: fade .2s ease;
+  }
+  @keyframes fade {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .sub-pane { display: none; }
+  .sub-pane.active {
+    display: flex; flex-direction: column;
+    flex: 1; min-height: 0;
+    animation: fade .2s ease;
+  }
+
+  /* ─── Step 1: 商品信息 + 上传原图 ─── */
+  .form-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 28px;
+    max-width: 920px;
+  }
+  .s1-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
+  .s1-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
+  .s1-upload-card { display: flex; flex-direction: column; }
+  @media (max-width: 1100px) { .s1-2col { grid-template-columns: 1fr; } }
+
+  /* Step 1 / 4 共用 upload-zone */
+  .s1-upload-card .upload-zone, .step-pane .upload-zone {
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    padding: 22px 20px;
+    text-align: center;
+    background: var(--background-lighter);
+    color: var(--black-alpha-56);
+    font-size: 13px;
+    cursor: pointer;
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+  }
+  .step-pane .upload-zone:hover { border-color: var(--heat); background: var(--heat-8); color: var(--heat); }
+  .step-pane .upload-zone:hover .uz-ic { background: var(--heat); color: #fff; border-color: var(--heat); }
+  .step-pane .upload-zone strong { color: var(--heat); font-weight: 600; }
+  .step-pane .upload-zone .uz-ic {
+    width: 40px; height: 40px;
+    border-radius: var(--r-md);
+    background: var(--surface);
+    color: var(--heat);
+    border: 1px solid var(--heat-20);
+    display: grid; place-items: center;
+    margin-bottom: 6px;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .step-pane .upload-zone .uz-ic svg { width: 18px; height: 18px; }
+  .step-pane .upload-zone .uz-hint { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .step-pane .upload-zone.full { cursor: not-allowed; opacity: .55; pointer-events: none; }
+
+  /* Step 1 上传 grid · 5 列复用 */
+  .step-pane .upload-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 5px;
+  }
+  .step-pane .up-thumb {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    overflow: hidden;
+    position: relative;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    cursor: zoom-in;
+    transition: transform var(--t-fast), border-color var(--t-base);
+  }
+  .step-pane .up-thumb:hover { transform: scale(1.02); border-color: var(--heat); }
+  .step-pane .up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .step-pane .up-thumb .slot-x {
+    position: absolute; top: 3px; right: 3px;
+    width: 18px; height: 18px;
+    background: rgba(0,0,0,.7); color: #fff;
+    border-radius: 50%; display: none; place-items: center;
+    cursor: pointer; z-index: 3; border: 0; padding: 0;
+    transition: background var(--t-base), transform var(--t-fast);
+  }
+  .step-pane .up-thumb:hover .slot-x { display: grid; }
+  .step-pane .up-thumb .slot-x:hover { background: var(--accent-crimson); transform: scale(1.1); }
+  .step-pane .up-thumb .slot-x svg { width: 9px; height: 9px; }
+
+  /* Step 2 · 三视图大图区 */
+  .triview-stage {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 18px;
+    max-width: 960px;
+  }
+  .triview-display {
+    aspect-ratio: 3 / 1;
+    border-radius: var(--r-md);
+    overflow: hidden;
+    border: 1px solid var(--border-faint);
+    position: relative;
+    background: var(--background-lighter);
+  }
+  .triview-display .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
+  .triview-display img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .triview-vtag {
+    position: absolute;
+    top: 12px; right: 12px;
+    background: rgba(0,0,0,.7);
+    color: #fff;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: var(--r-sm);
+    letter-spacing: .04em;
+  }
+
+  /* 版本历史 */
+  .triview-versions {
+    margin-top: 24px;
+    max-width: 960px;
+  }
+  .triview-versions .tv-h {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+    margin-bottom: 10px;
+  }
+  .triview-versions .tv-list {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+  }
+  .triview-versions .tv-item {
+    flex-shrink: 0;
+    width: 180px;
+    aspect-ratio: 3 / 1;
+    border-radius: var(--r-md);
+    overflow: hidden;
+    border: 1px solid var(--border-faint);
+    position: relative;
+    cursor: pointer;
+    background: var(--background-lighter);
+    transition: border-color var(--t-base);
+  }
+  .triview-versions .tv-item:hover { border-color: var(--black-alpha-32); }
+  .triview-versions .tv-item.current { border-color: var(--heat); border-width: 1.5px; box-shadow: 0 0 0 3px var(--heat-12); }
+  .triview-versions .tv-item .tv-vtag {
+    position: absolute; bottom: 4px; left: 4px;
+    background: rgba(0,0,0,.65); color: #fff;
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 2px 6px; border-radius: 2px;
+    letter-spacing: .04em;
+  }
+  .triview-versions .tv-empty {
+    padding: 14px;
+    text-align: center;
+    color: var(--black-alpha-48);
+    font-size: 12px;
+    background: var(--surface);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    font-family: var(--font-mono);
+    letter-spacing: .02em;
+  }
+
+  /* Step 4 · 平台选择 */
+  .platform-picker { max-width: 920px; }
+  .platform-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin: 10px 0 12px;
+  }
+  .plat-card {
+    display: flex; align-items: center; gap: 10px;
+    padding: 12px 14px;
+    background: var(--surface);
+    border: 1.5px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    user-select: none;
+    transition: border-color var(--t-base), background var(--t-base);
+  }
+  .plat-card:hover { border-color: var(--black-alpha-32); }
+  .plat-card input[type="checkbox"] { accent-color: var(--heat); width: 14px; height: 14px; cursor: pointer; }
+  .plat-card input[type="checkbox"]:checked + .plat-info .plat-name { color: var(--heat); }
+  .plat-card:has(input:checked) { border-color: var(--heat); background: var(--heat-8); }
+  .plat-info { display: flex; flex-direction: column; gap: 3px; }
+  .plat-name { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  .plat-spec { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .platform-cost { font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
+
+  /* Step 4 · 平台生成结果 */
+  .platform-results { margin-top: 18px; max-width: 920px; }
+  .platform-empty {
+    padding: 36px 20px;
+    text-align: center;
+    color: var(--black-alpha-48);
+    font-size: 12.5px;
+    background: var(--surface);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    letter-spacing: .04em;
+  }
+  .platform-block {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 16px 18px;
+    margin-bottom: 12px;
+  }
+  .platform-block .pb-h {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 12px;
+  }
+  .platform-block .pb-h .pb-name { font-size: 14px; font-weight: 600; color: var(--accent-black); }
+  .platform-block .pb-h .pb-spec { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); }
+  .platform-block .pb-h .pb-regen {
+    margin-left: auto;
+    height: 28px; padding: 0 10px;
+    font-size: 12px;
+    background: transparent;
+    border: 1px solid var(--border-faint);
+    color: var(--black-alpha-72);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px;
+    font-family: inherit;
+  }
+  .platform-block .pb-h .pb-regen:hover { border-color: var(--heat); color: var(--heat); }
+  .platform-block .pb-h .pb-regen svg { width: 11px; height: 11px; }
+  .platform-block .pb-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+  }
+  .platform-block .pb-card {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    border: 1px solid var(--border-faint);
+    background: var(--background-lighter);
+    position: relative;
+    overflow: hidden;
+    cursor: zoom-in;
+    transition: border-color var(--t-base);
+  }
+  .platform-block .pb-card:hover { border-color: var(--heat); }
+  .platform-block .pb-card .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
+  .platform-block .pb-card img { width: 100%; height: 100%; object-fit: cover; }
+  .platform-block .pb-card .pb-x {
+    position: absolute; top: 4px; right: 4px;
+    width: 22px; height: 22px;
+    background: rgba(0,0,0,.65); color: #fff;
+    border: 0; border-radius: 50%;
+    display: none; place-items: center;
+    cursor: pointer;
+    transition: background var(--t-base);
+  }
+  .platform-block .pb-card:hover .pb-x { display: grid; }
+  .platform-block .pb-card .pb-x:hover { background: var(--accent-crimson); }
+  .platform-block .pb-card .pb-x svg { width: 11px; height: 11px; }
+  .platform-block .pb-card .pb-vtag {
+    position: absolute; bottom: 4px; left: 4px;
+    background: rgba(0,0,0,.65); color: #fff;
+    font-family: var(--font-mono); font-size: 9.5px;
+    padding: 2px 5px; border-radius: 2px;
+    letter-spacing: .04em;
+  }
+
+  /* Step 5 · 资产分组清单 */
+  .rv-assets { margin: 18px 0 8px; }
+  .rv-asset-group { margin-bottom: 16px; }
+  .rv-asset-group .rvg-h {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 13px; font-weight: 500;
+    color: var(--accent-black);
+    margin-bottom: 8px;
+  }
+  .rv-asset-group .rvg-h .count {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--heat); font-weight: 600;
+  }
+  .rv-asset-group .rvg-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 6px;
+  }
+  .rv-asset-group .rvg-item {
+    aspect-ratio: 1;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    overflow: hidden;
+    cursor: zoom-in;
+    position: relative;
+    transition: border-color var(--t-base);
+  }
+  .rv-asset-group .rvg-item:hover { border-color: var(--heat); }
+  .rv-asset-group .rvg-item img { width: 100%; height: 100%; object-fit: cover; }
+  .rv-asset-group .rvg-item .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
+  .rv-asset-group .rvg-item .rvg-tag {
+    position: absolute; bottom: 3px; left: 3px;
+    background: rgba(0,0,0,.65); color: #fff;
+    font-family: var(--font-mono); font-size: 9px;
+    padding: 1px 4px; border-radius: 2px;
+    letter-spacing: .04em;
+  }
+  .rv-asset-empty {
+    padding: 18px;
+    text-align: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono); font-size: 11.5px;
+    background: var(--background-lighter);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    letter-spacing: .04em;
+  }
+  .upload-c {
+    aspect-ratio: 4/5;
+    background: var(--surface);
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    text-align: center;
+    cursor: pointer;
+    color: var(--black-alpha-56);
+    margin-bottom: 12px;
+    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+    padding: 24px;
+  }
+  .upload-c:hover {
+    border-color: var(--heat);
+    background: var(--heat-8);
+    color: var(--heat);
+  }
+  .upload-c.has-file {
+    border-style: solid; padding: 0;
+    border-color: var(--heat-40);
+    background: var(--background-lighter);
+  }
+  .upload-c.has-file .placeholder { width: 100%; height: 100%; }
+  .upload-c .ic-cam {
+    width: 44px; height: 44px;
+    border: 1px solid currentColor;
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    margin: 0 auto 14px;
+  }
+  .upload-c .ic-cam svg { width: 22px; height: 22px; }
+  .up-hint {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    text-align: center;
+    letter-spacing: .02em;
+  }
+
+  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .bullet-list { list-style: none; padding: 0; }
+  .bullet-list li {
+    display: flex; gap: 10px; align-items: center;
+    padding: 10px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    margin-bottom: 6px;
+    font-size: 13px;
+    color: var(--accent-black);
+    transition: border-color var(--t-base), background var(--t-base);
+  }
+  .bullet-list li.bl-item { cursor: text; }
+  .bullet-list li.bl-item:hover { border-color: var(--black-alpha-24); }
+  .bullet-list li.bl-add { background: var(--surface); border-style: dashed; }
+  .bullet-list li.bl-add:focus-within { border-color: var(--heat-40); background: var(--surface); }
+  .bullet-list .num {
+    width: 20px; height: 20px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-size: 11px; color: var(--black-alpha-56);
+    display: grid; place-items: center;
+    flex-shrink: 0;
+    font-family: var(--font-mono);
+    font-weight: 600;
+  }
+  .bullet-list li.bl-add .num { background: transparent; color: var(--heat); border-color: var(--heat-40); }
+  .bullet-list .bl-text { flex: 1; min-width: 0; }
+  .bullet-list .bl-input {
+    flex: 1; min-width: 0;
+    height: 24px; border: 0; padding: 0 4px;
+    background: transparent; font-size: 13px;
+    color: var(--accent-black); font-family: inherit;
+    outline: none;
+  }
+  .bullet-list .bl-input::placeholder { color: var(--black-alpha-48); }
+  .bullet-list .bl-x {
+    width: 24px; height: 24px;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
+  }
+  .bullet-list li.bl-item:hover .bl-x { opacity: 1; }
+  .bullet-list .bl-x:hover { background: var(--crimson-bg); color: var(--accent-crimson); }
+  .bullet-list .bl-x svg { width: 11px; height: 11px; }
+
+  /* ─── Step 2: 头图 4 选 1 ─── */
+  .big-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    max-width: 760px;
+  }
+  .big-card {
+    aspect-ratio: 1;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: border-color var(--t-base), transform var(--t-fast);
+  }
+  .big-card:hover { border-color: var(--black-alpha-32); }
+  .big-card .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
+  .big-card.selected {
+    border: 2px solid var(--heat);
+    box-shadow: 0 0 0 4px var(--heat-12);
+  }
+  .big-card.selected::after {
+    content: '';
+    position: absolute; top: 12px; right: 12px;
+    width: 28px; height: 28px;
+    background: var(--heat);
+    color: var(--accent-white);
+    border-radius: 50%;
+    display: grid; place-items: center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-size: 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .big-card .corner-info {
+    position: absolute; bottom: 12px; left: 12px;
+    background: rgba(255,255,255,.95);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 4px 10px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: .04em;
+    color: var(--black-alpha-56);
+  }
+
+  .regen-line {
+    margin-top: 20px;
+    display: flex; align-items: center; gap: 12px;
+  }
+  .regen-line .info {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+
+  /* ─── Step 3 SUB 1: 模特库网格 ─── */
+  .filter-bar {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+  }
+  .search-input { position: relative; width: 280px; }
+  .search-input svg {
+    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+    color: var(--black-alpha-56); width: 14px; height: 14px;
+    z-index: 2; pointer-events: none;
+  }
+  .search-input input {
+    padding-left: 36px;
+    height: 32px;
+    font-size: 12.5px;
+    background: var(--surface);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    color: var(--accent-black);
+    outline: none;
+    width: 100%;
+    transition: border-color var(--t-base);
+  }
+  .search-input input:focus { border-color: var(--heat-40); box-shadow: inset 0 0 0 1px var(--heat-40); }
+  .filter-chip {
+    height: 32px; padding: 0 12px;
+    border: 1px solid var(--border-faint);
+    background: var(--surface);
+    border-radius: var(--r-md);
+    font-size: 12.5px;
+    color: var(--black-alpha-56);
+    display: inline-flex; align-items: center; gap: 5px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+  }
+  .filter-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); color: var(--accent-black); }
+  .filter-chip.active { border-color: var(--heat-40); color: var(--heat); background: var(--heat-12); font-weight: 600; }
+  .filter-chip svg { width: 11px; height: 11px; }
+  .results-meta {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+  }
+  .results-meta .accent { color: var(--heat); font-weight: 700; }
+
+  .model-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 12px;
+  }
+  @media (max-width: 1500px) { .model-grid { grid-template-columns: repeat(5, 1fr); } }
+  @media (max-width: 1280px) { .model-grid { grid-template-columns: repeat(4, 1fr); } }
+
+  .model-card {
+    aspect-ratio: 3/4;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: border-color var(--t-base);
+  }
+  .model-card:hover { border-color: var(--black-alpha-32); }
+  .model-card .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
+  .model-card.selected {
+    border: 2px solid var(--heat);
+    box-shadow: 0 0 0 3px var(--heat-12);
+  }
+  .model-card.selected::after {
+    content: '';
+    position: absolute; top: 8px; right: 8px;
+    width: 22px; height: 22px;
+    background: var(--heat);
+    color: var(--accent-white);
+    border-radius: 50%;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-size: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: 2;
+  }
+  .model-card .lbl-bottom {
+    position: absolute; bottom: 0; left: 0; right: 0;
+    background: rgba(255,255,255,.96);
+    border-top: 1px solid var(--border-faint);
+    padding: 8px 10px;
+    display: flex; flex-direction: column; gap: 3px;
+  }
+  .model-card .lbl-bottom .nm {
+    font-size: 12.5px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .model-card .lbl-bottom .tags {
+    font-family: var(--font-mono);
+    font-size: 9.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .model-card .pose-tag {
+    position: absolute; top: 8px; left: 8px;
+    background: rgba(0,0,0,.6);
+    color: var(--accent-white);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    border-radius: var(--r-sm);
+    padding: 2px 6px;
+    letter-spacing: .04em;
+    z-index: 1;
+  }
+
+  .scroll-loader {
+    margin-top: 20px;
+    padding: 14px 18px;
+    background: var(--surface);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+
+  /* ─── Step 3 SUB 2: 上身图 + 模特切换 ─── */
+  .model-switcher {
+    display: flex; align-items: center; gap: 8px;
+    margin-bottom: 20px;
+    padding: 12px 16px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    flex-wrap: wrap;
+  }
+  .model-switcher .lbl {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .model-switcher .hint-right {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+
+  /* ─── Step 3 SUB 1: 模特来源切换 (平台库 / 我的) ─── */
+  .kind-toggle {
+    display: flex;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 4px;
+    gap: 2px;
+    margin-bottom: 14px;
+    width: fit-content;
+  }
+  .kind-toggle .kt-btn {
+    padding: 7px 16px;
+    font-size: 12.5px;
+    color: var(--black-alpha-56);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    display: inline-flex; align-items: center; gap: 8px;
+    transition: background var(--t-base), color var(--t-base);
+    background: transparent;
+    border: 0;
+    font-family: inherit;
+    font-weight: 500;
+  }
+  .kind-toggle .kt-btn:hover { color: var(--accent-black); }
+  .kind-toggle .kt-btn.active {
+    background: var(--accent-black);
+    color: var(--accent-white);
+  }
+  .kind-toggle .kt-btn .kt-num {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    opacity: .7;
+    letter-spacing: .04em;
+  }
+
+  /* ─── Step 3 · 模特卡片来源徽章 (替换 pose-tag) ─── */
+  .model-card .source-tag {
+    position: absolute; top: 8px; left: 8px;
+    background: rgba(0,0,0,.66);
+    color: var(--accent-white);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    border-radius: var(--r-sm);
+    padding: 2px 7px;
+    letter-spacing: .04em;
+    z-index: 1;
+  }
+  .model-card.kind-mine .source-tag {
+    background: var(--heat);
+    color: var(--accent-white);
+  }
+
+  /* ─── Step 3 · "+ 上传新模特" 卡片 ─── */
+  .model-card-add {
+    aspect-ratio: 3/4;
+    background: var(--surface);
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    gap: 10px;
+    color: var(--black-alpha-56);
+    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+    padding: 16px;
+    text-align: center;
+  }
+  .model-card-add:hover {
+    border-color: var(--heat);
+    background: var(--heat-8);
+    color: var(--heat);
+  }
+  .model-card-add .add-ic {
+    width: 38px; height: 38px;
+    background: var(--heat-12);
+    color: var(--heat);
+    border-radius: 50%;
+    display: grid; place-items: center;
+  }
+  .model-card-add .add-ic svg { width: 18px; height: 18px; }
+  .model-card-add .add-t {
+    font-size: 13px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .model-card-add .add-d {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    line-height: 1.5;
+  }
+  .model-card-add:hover .add-t { color: var(--heat); }
+
+  /* ─── 空状态: 我的模特库 ─── */
+  .mine-empty {
+    grid-column: 1 / -1;
+    padding: 36px 24px;
+    background: var(--surface);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    text-align: center;
+    color: var(--black-alpha-56);
+  }
+  .mine-empty .me-t { font-size: 13.5px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; }
+  .mine-empty .me-d { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+
+  /* ─── Step 3 SUB 2: 多模特上身图 (重构) ─── */
+  .outfits-wrap { display: flex; flex-direction: column; gap: 20px; }
+  .outfit-block {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 18px 20px;
+  }
+  .outfit-block .ob-h {
+    display: flex; align-items: center; gap: 12px;
+    margin-bottom: 14px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .outfit-block .ob-mname {
+    font-size: 14px; font-weight: 600;
+    color: var(--accent-black);
+    display: inline-flex; align-items: center; gap: 8px;
+  }
+  .outfit-block .ob-mkind {
+    font-family: var(--font-mono);
+    font-size: 9.5px;
+    color: var(--black-alpha-48);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    padding: 2px 7px;
+    border-radius: var(--r-sm);
+    letter-spacing: .04em;
+  }
+  .outfit-block.kind-mine .ob-mkind {
+    color: var(--heat);
+    background: var(--heat-12);
+    border-color: var(--heat-40);
+  }
+  .outfit-block .ob-meta {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .outfit-block .ob-regen-all {
+    height: 30px; padding: 0 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    color: var(--black-alpha-72);
+    display: inline-flex; align-items: center; gap: 6px;
+    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+  }
+  .outfit-block .ob-regen-all:hover { background: var(--heat-8); border-color: var(--heat-40); color: var(--heat); }
+  .outfit-block .ob-regen-all svg { width: 12px; height: 12px; }
+  .outfit-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+  }
+  @media (max-width: 1280px) { .outfit-grid { grid-template-columns: repeat(3, 1fr); } }
+  .outfit-card {
+    aspect-ratio: 3/4;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: border-color var(--t-base);
+  }
+  .outfit-card:hover { border-color: var(--black-alpha-32); }
+  .outfit-card .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
+  .outfit-card.selected {
+    border: 2px solid var(--heat);
+    box-shadow: 0 0 0 3px var(--heat-12);
+  }
+  .outfit-card .oc-tag {
+    position: absolute; bottom: 8px; left: 8px;
+    background: rgba(255,255,255,.95);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 2px 8px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--black-alpha-56);
+    letter-spacing: .04em;
+    pointer-events: none;
+  }
+  .outfit-card .oc-actions {
+    position: absolute; top: 8px; right: 8px;
+    display: flex; gap: 4px;
+    opacity: 0;
+    transition: opacity var(--t-base);
+  }
+  .outfit-card:hover .oc-actions { opacity: 1; }
+  .outfit-card .oc-btn {
+    width: 26px; height: 26px;
+    background: rgba(0,0,0,.7);
+    color: var(--accent-white);
+    border: 0;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    display: grid; place-items: center;
+    transition: background var(--t-base);
+  }
+  .outfit-card .oc-btn:hover { background: var(--accent-black); }
+  .outfit-card .oc-btn.del:hover { background: var(--accent-crimson); }
+  .outfit-card .oc-btn svg { width: 12px; height: 12px; }
+  .outfit-empty-step {
+    padding: 36px 24px;
+    background: var(--surface);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    text-align: center;
+    color: var(--black-alpha-56);
+  }
+  .outfit-empty-step .ee-t { font-size: 13.5px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; }
+  .outfit-empty-step .ee-d { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .outfit-empty-step .ee-btn { margin-top: 14px; }
+
+  /* ─── 新模特上传弹窗 ─── */
+  .nm-modal-bg {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,.42);
+    z-index: 200;
+    display: none;
+    align-items: center; justify-content: center;
+    padding: 20px;
+    animation: nmFade .15s ease;
+  }
+  .nm-modal-bg.open { display: flex; }
+  @keyframes nmFade { from { opacity: 0; } to { opacity: 1; } }
+  .nm-modal {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-lg);
+    box-shadow: 0 20px 60px rgba(0,0,0,.18);
+    width: 100%;
+    max-width: 820px;
+    max-height: calc(100vh - 40px);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+  .nm-modal-h {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 24px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .nm-modal-h h3 {
+    font-size: 17px; font-weight: 600;
+    color: var(--accent-black);
+    display: inline-flex; align-items: center; gap: 10px;
+  }
+  .nm-modal-h .nm-tag {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--heat);
+    background: var(--heat-12);
+    border: 1px solid var(--heat-40);
+    border-radius: var(--r-sm);
+    padding: 3px 9px;
+    letter-spacing: .04em;
+  }
+  .nm-modal-h .nm-x {
+    width: 28px; height: 28px;
+    background: transparent;
+    border: 0;
+    color: var(--black-alpha-56);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    display: grid; place-items: center;
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .nm-modal-h .nm-x:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  .nm-modal-h .nm-x svg { width: 16px; height: 16px; }
+  .nm-modal-b {
+    padding: 22px 24px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    overflow-y: auto;
+  }
+  .nm-left .nm-up-zone {
+    aspect-ratio: 3/4;
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    background: var(--background-lighter);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 10px;
+    color: var(--black-alpha-56);
+    cursor: pointer;
+    text-align: center;
+    padding: 16px;
+    transition: border-color var(--t-base), background var(--t-base);
+    position: relative;
+    overflow: hidden;
+  }
+  .nm-left .nm-up-zone:hover { border-color: var(--heat); background: var(--heat-8); color: var(--heat); }
+  .nm-left .nm-up-zone.has-img { padding: 0; border-style: solid; }
+  .nm-left .nm-up-zone img { width: 100%; height: 100%; object-fit: cover; }
+  .nm-left .nm-up-zone .nm-uz-ic svg { width: 26px; height: 26px; }
+  .nm-left .nm-up-zone .nm-uz-t { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  .nm-left .nm-up-zone:hover .nm-uz-t { color: var(--heat); }
+  .nm-left .nm-up-zone .nm-uz-d { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; line-height: 1.6; }
+  .nm-left .nm-up-zone .nm-uz-replace {
+    position: absolute; top: 8px; right: 8px;
+    background: rgba(0,0,0,.7); color: white;
+    font-size: 11px; padding: 4px 10px;
+    border-radius: var(--r-sm); border: 0;
+    cursor: pointer;
+    font-family: inherit;
+    opacity: 0;
+    transition: opacity var(--t-base);
+  }
+  .nm-left .nm-up-zone.has-img:hover .nm-uz-replace { opacity: 1; }
+  .nm-left .nm-uz-hint {
+    margin-top: 10px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    line-height: 1.6;
+  }
+  .nm-right { display: flex; flex-direction: column; gap: 14px; }
+  .nm-right .field-label {
+    font-size: 12.5px; font-weight: 600;
+    color: var(--accent-black);
+    display: block;
+    margin-bottom: 6px;
+  }
+  .nm-right .field-label .req { color: var(--heat); }
+  .nm-right .field-hint {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    margin-bottom: 6px;
+  }
+  .nm-right .nm-input, .nm-right .nm-select {
+    width: 100%;
+    height: 36px;
+    background: var(--background-lighter);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    padding: 0 12px;
+    font-size: 13px;
+    color: var(--accent-black);
+    outline: none;
+    font-family: inherit;
+    transition: border-color var(--t-base);
+  }
+  .nm-right .nm-input:focus, .nm-right .nm-select:focus { border-color: var(--heat-40); }
+  .nm-right .nm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .nm-right .nm-tags {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    margin-top: 4px;
+  }
+  .nm-right .nm-tag-chip {
+    height: 26px; padding: 0 10px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-size: 11.5px;
+    color: var(--black-alpha-72);
+    cursor: pointer;
+    font-family: inherit;
+    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+  }
+  .nm-right .nm-tag-chip:hover { border-color: var(--black-alpha-32); color: var(--accent-black); }
+  .nm-right .nm-tag-chip.active {
+    background: var(--heat-12);
+    border-color: var(--heat-40);
+    color: var(--heat);
+    font-weight: 600;
+  }
+  .nm-modal-f {
+    padding: 14px 24px;
+    border-top: 1px solid var(--border-faint);
+    background: var(--background-lighter);
+    display: flex; align-items: center; gap: 12px;
+  }
+  .nm-modal-f .nm-cost {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    margin-right: auto;
+  }
+  .nm-modal-f .nm-cost .price { color: var(--heat); font-weight: 700; }
+
+  /* ─── Step 4: 完成确认 ─── */
+  .review-box {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 32px;
+    max-width: 800px;
+  }
+  .review-box h3 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; color: var(--accent-black); }
+  .review-box .review-meta {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    margin-top: 6px;
+    letter-spacing: .02em;
+  }
+  .review-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-top: 20px;
+  }
+  .review-grid .placeholder { aspect-ratio: 1; }
+  .review-summary {
+    margin-top: 24px;
+    padding: 16px 20px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    font-size: 13px;
+    color: var(--black-alpha-72);
+    line-height: 1.7;
+  }
+  .review-summary dl > div {
+    display: flex;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .review-summary dl > div:last-child { border-bottom: 0; }
+  .review-summary dl dt {
+    width: 80px;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: .04em;
+  }
+  .review-summary dl dd {
+    flex: 1;
+    color: var(--accent-black);
+    font-weight: 500;
+  }
+
+  /* ─── Right panel ─── */
+  .wb-controls {
+    border-left: 1px solid var(--border-faint);
+    background: var(--background-base);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    min-height: 0;
+  }
+  .ctrl-section { margin-bottom: 24px; }
+  .ctrl-section h3 {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    font-weight: 600;
+    margin-bottom: 10px;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .ctrl-section h3 .accent {
+    color: var(--heat);
+    font-weight: 700;
+  }
+
+  .hover-detail {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 16px;
+  }
+  .hover-detail .hd-name {
+    font-size: 16px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .hover-detail .hd-tags {
+    display: flex; gap: 5px; flex-wrap: wrap;
+    margin-top: 8px;
+  }
+  .hover-detail .hd-tags span {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--black-alpha-56);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 2px 6px;
+    letter-spacing: .02em;
+  }
+  .hover-detail .hd-views {
+    display: grid; grid-template-columns: repeat(3, 1fr);
+    gap: 5px; margin-top: 14px;
+  }
+  .hover-detail .hd-views .placeholder { aspect-ratio: 3/4; }
+  .hover-detail .hd-meta {
+    display: flex; flex-direction: column; gap: 7px;
+    margin-top: 14px; padding-top: 14px;
+    border-top: 1px solid var(--border-faint);
+    font-size: 12px;
+    color: var(--black-alpha-72);
+  }
+  .hover-detail .hd-meta div { display: flex; gap: 10px; }
+  .hover-detail .hd-meta .k {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    width: 60px;
+    letter-spacing: .04em;
+    flex-shrink: 0;
+  }
+
+  .selected-list { display: flex; flex-direction: column; gap: 6px; }
+  .sel-row {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    transition: border-color var(--t-base);
+  }
+  .sel-row:hover { border-color: var(--black-alpha-24); }
+  .sel-row .placeholder { width: 30px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm); }
+  .sel-row .nm { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--accent-black); }
+  .sel-row .x-btn {
+    width: 22px; height: 22px;
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    cursor: pointer;
+    color: var(--black-alpha-48);
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .sel-row .x-btn:hover { color: var(--accent-crimson); background: var(--crimson-bg); }
+
+  .sel-empty {
+    padding: 18px 14px;
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    letter-spacing: .02em;
+  }
+
+  .tip-mini {
+    padding: 12px 14px;
+    background: var(--heat-8);
+    border: 1px solid var(--heat-20);
+    border-radius: var(--r-md);
+    font-size: 12px;
+    color: var(--black-alpha-72);
+    line-height: 1.6;
+  }
+  .tip-mini strong {
+    color: var(--heat);
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: .04em;
+    margin-bottom: 6px;
+    font-weight: 600;
+  }
+
+  /* ─── 中央 step pane · 底部确认按钮区 (sticky 固定在视口底) ─── */
+  .pane-cta {
+    margin: auto -32px 0;       /* 推到底 + 撑满 canvas-inner 左右 padding */
+    padding: 14px 32px;
+    border-top: 1px solid var(--border-faint);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    position: sticky;
+    bottom: 0;
+    background: var(--background-base);
+    z-index: 5;
+  }
+  /* 顶部加渐变模糊带,让 sticky 区分滚动内容 */
+  .pane-cta::before {
+    content: '';
+    position: absolute;
+    top: -16px; left: 0; right: 0;
+    height: 16px;
+    background: linear-gradient(to top, var(--background-base), transparent);
+    pointer-events: none;
+  }
+  .pane-cta .pane-cost {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    margin-right: auto;
+  }
+  .pane-cta .pane-cost .price { color: var(--heat); font-weight: 700; }
+  .pane-cta .btn-lg {
+    padding: 10px 22px;
+    font-size: 13.5px;
+    font-weight: 600;
+  }
+
+  /* ─── 右栏 · 资产预览 (始终显示) ─── */
+  #right-asset-preview {
+    display: flex; flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+  .rap-head {
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .rap-head h3 {
+    font-size: 16px; font-weight: 600;
+    color: var(--accent-black);
+    letter-spacing: -.012em;
+    line-height: 1.3;
+    word-break: break-all;
+  }
+  .rap-head .rap-meta {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    margin-top: 6px;
+    letter-spacing: .02em;
+  }
+  .rap-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 14px 22px 18px;
+  }
+  .rap-group { margin-bottom: 18px; }
+  .rap-group:last-child { margin-bottom: 0; }
+  .rap-h {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .rap-h-t {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-56);
+    letter-spacing: .04em;
+    font-weight: 600;
+  }
+  .rap-h-c {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--heat);
+    background: var(--heat-12);
+    padding: 1px 7px;
+    border-radius: var(--r-sm);
+    letter-spacing: .04em;
+    font-weight: 700;
+  }
+  .rap-group.empty .rap-h-c { color: var(--black-alpha-32); background: var(--black-alpha-4); }
+  .rap-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+  }
+  .rap-item {
+    aspect-ratio: 1;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transition: border-color var(--t-base);
+  }
+  .rap-item:hover { border-color: var(--black-alpha-32); }
+  .rap-item img, .rap-item .placeholder {
+    width: 100%; height: 100%; object-fit: cover;
+    border: 0; border-radius: 0;
+  }
+  .rap-item .rap-mtag {
+    position: absolute; bottom: 2px; left: 2px; right: 2px;
+    background: rgba(0,0,0,.6); color: var(--accent-white);
+    font-family: var(--font-mono);
+    font-size: 8.5px;
+    padding: 1px 4px;
+    border-radius: 2px;
+    letter-spacing: .02em;
+    text-align: center;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    pointer-events: none;
+  }
+  .rap-empty {
+    grid-column: 1 / -1;
+    padding: 14px 12px;
+    background: var(--background-lighter);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-sm);
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-32);
+    letter-spacing: .02em;
+  }
+  .rap-cta-zone {
+    padding: 14px 22px 16px;
+    border-top: 1px solid var(--border-faint);
+    background: var(--surface);
+  }
+  .rap-cta-zone .btn-lg {
+    width: 100%;
+    justify-content: center;
+    font-size: 13.5px;
+    font-weight: 600;
+    padding: 12px 14px;
+  }
+  .rap-cta-zone .btn-primary[disabled] {
+    background: var(--black-alpha-8);
+    color: var(--black-alpha-32);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .rap-cta-hint {
+    margin-top: 8px;
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    text-align: center;
+  }
+  .rap-cta-hint.ready { color: var(--accent-forest); }
+
+  /* ─── 右栏 · 折叠按钮 + 状态 ─── */
+  #right-asset-preview .rap-head {
+    display: flex; align-items: flex-start; gap: 10px;
+  }
+  #right-asset-preview .rap-head > div { flex: 1; min-width: 0; }
+  .rap-collapse-btn {
+    width: 28px; height: 28px;
+    background: transparent; border: 0;
+    color: var(--black-alpha-48);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .rap-collapse-btn:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  .rap-collapse-btn svg { width: 16px; height: 16px; }
+  .wb-controls.collapsed { width: 56px !important; min-width: 56px !important; }
+  .wb-controls.collapsed #right-asset-preview > *:not(.rap-collapse-floating) { display: none; }
+  .rap-collapse-floating {
+    display: none;
+    width: 56px; height: 56px;
+    align-items: center; justify-content: center;
+    cursor: pointer;
+    color: var(--black-alpha-56);
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .rap-collapse-floating svg { width: 18px; height: 18px; }
+  .wb-controls.collapsed .rap-collapse-floating { display: flex; }
+  .wb-controls.collapsed .rap-collapse-floating:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+
+  /* ─── 资产 "加入商品" 勾选 chip ─── */
+  .pick-chip {
+    position: absolute; bottom: 8px; right: 8px;
+    height: 26px; padding: 0 10px;
+    background: rgba(255,255,255,.95);
+    border: 1px solid var(--black-alpha-24);
+    border-radius: 999px;
+    font-size: 11px; font-weight: 600;
+    color: var(--black-alpha-56);
+    display: inline-flex; align-items: center; gap: 5px;
+    cursor: pointer;
+    z-index: 4;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+    font-family: inherit;
+  }
+  .pick-chip:hover { border-color: var(--heat); color: var(--heat); }
+  .pick-chip svg { width: 12px; height: 12px; }
+  .pick-chip.picked {
+    background: var(--heat);
+    border-color: var(--heat);
+    color: var(--accent-white);
+  }
+  .pick-chip.picked:hover { background: var(--heat); }
+
+  /* ─── 空状态 (Step3/4: 还未触发生成) ─── */
+  .gen-empty {
+    padding: 60px 40px;
+    background: var(--surface);
+    border: 1px dashed var(--border-faint);
+    border-radius: var(--r-md);
+    text-align: center;
+    color: var(--black-alpha-56);
+  }
+  .gen-empty .ge-ic {
+    width: 56px; height: 56px;
+    background: var(--heat-12);
+    color: var(--heat);
+    border-radius: 50%;
+    display: grid; place-items: center;
+    margin: 0 auto 16px;
+  }
+  .gen-empty .ge-ic svg { width: 24px; height: 24px; }
+  .gen-empty .ge-t { font-size: 14px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; }
+  .gen-empty .ge-d { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; line-height: 1.6; }
+
+  /* ─── 模特卡片 · 勾选 checkbox + 详情入口 ─── */
+  .model-card .mc-check {
+    position: absolute; top: 8px; right: 8px;
+    width: 24px; height: 24px;
+    background: rgba(255,255,255,.95);
+    border: 1.5px solid var(--black-alpha-32);
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 3;
+    display: grid; place-items: center;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .model-card .mc-check:hover { border-color: var(--heat); }
+  .model-card .mc-check svg {
+    width: 14px; height: 14px;
+    color: transparent;
+    transition: color var(--t-base);
+  }
+  .model-card.selected .mc-check {
+    background: var(--heat);
+    border-color: var(--heat);
+  }
+  .model-card.selected .mc-check svg { color: var(--accent-white); }
+  /* 取消旧的勾标 (覆盖之前的 ::after) */
+  .model-card.selected::after { display: none; }
+
+  /* ─── 模特详情弹窗 ─── */
+  .md-modal-bg {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,.42);
+    z-index: 210;
+    display: none;
+    align-items: center; justify-content: center;
+    padding: 20px;
+  }
+  .md-modal-bg.open { display: flex; }
+  .md-modal {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-lg);
+    box-shadow: 0 20px 60px rgba(0,0,0,.18);
+    width: 100%;
+    max-width: 760px;
+    max-height: calc(100vh - 40px);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+  .md-h {
+    padding: 16px 22px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .md-h h3 {
+    font-size: 17px; font-weight: 600;
+    color: var(--accent-black);
+    display: inline-flex; align-items: center; gap: 10px;
+  }
+  .md-h .md-kind {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-56);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    padding: 3px 9px;
+    border-radius: var(--r-sm);
+    letter-spacing: .04em;
+  }
+  .md-h .md-kind.mine {
+    color: var(--heat); background: var(--heat-12); border-color: var(--heat-40);
+  }
+  .md-h .md-x {
+    width: 28px; height: 28px;
+    background: transparent; border: 0;
+    color: var(--black-alpha-56);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    display: grid; place-items: center;
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .md-h .md-x:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  .md-h .md-x svg { width: 16px; height: 16px; }
+  .md-body {
+    padding: 22px;
+    overflow-y: auto;
+    flex: 1;
+  }
+  .md-views {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+  .md-views .placeholder, .md-views img {
+    aspect-ratio: 3/4;
+    border-radius: var(--r-md);
+    width: 100%;
+  }
+  .md-views img { object-fit: cover; border: 1px solid var(--border-faint); }
+  .md-tags {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    margin-top: 18px;
+  }
+  .md-tags .tag {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-72);
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 4px 9px;
+    letter-spacing: .02em;
+  }
+  .md-meta {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; flex-direction: column;
+    gap: 10px;
+  }
+  .md-meta .row {
+    display: flex; gap: 14px;
+    font-size: 13px;
+    color: var(--black-alpha-72);
+  }
+  .md-meta .k {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    width: 80px;
+    letter-spacing: .04em;
+    flex-shrink: 0;
+  }
+  .md-foot {
+    padding: 14px 22px;
+    border-top: 1px solid var(--border-faint);
+    background: var(--background-lighter);
+    display: flex; align-items: center; gap: 12px;
+  }
+  .md-foot .md-foot-info {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    margin-right: auto;
+    letter-spacing: .02em;
+  }
+  .md-foot .md-foot-info.is-selected { color: var(--accent-forest); }
+
+  /* ─── Bottom bar (sticky in right column) ─── */
+  .wb-bottom {
+    flex-shrink: 0;
+    padding: 12px 22px 14px;
+    background: var(--surface);
+    border-top: 1px solid var(--border-faint);
+    display: flex; flex-direction: column; gap: 8px;
+  }
+  .wb-bottom .row1 {
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .cost-info {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+  }
+  .cost-info .price { color: var(--heat); font-weight: 700; }
+
+  /* ─── "我有图" 模式专用样式 ─── */
+  .single-mode {
+    display: none;
+    max-width: 920px;
+    margin: 0 auto;
+  }
+  .single-mode.active { display: block; }
+  .upload-grid {
+    display: grid; grid-template-columns: repeat(4, 1fr);
+    gap: 8px; margin-top: 12px;
+  }
+  .upload-grid .placeholder { aspect-ratio: 1; }
+  .upload-zone {
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    padding: 28px;
+    text-align: center;
+    background: var(--background-lighter);
+    color: var(--black-alpha-56);
+    font-size: 13.5px;
+    cursor: pointer;
+    transition: border-color var(--t-base), background var(--t-base);
+  }
+  .upload-zone:hover { border-color: var(--heat); background: var(--heat-8); }
+  .upload-zone strong { color: var(--heat); font-weight: 600; }
+
+  /* ============================================================
+     新建商品 · 表单 view (参考图样式) · 默认显示
+     · 切到 AI workflow mode 时 .app 隐藏, .wb 显示
+     ============================================================ */
+  .wb { display: none; }
+  body.workflow-mode .app { display: none !important; }
+  body.workflow-mode .wb { display: grid; }
+  body.workflow-mode .topbar { display: none; }
+
+  /* form mode 沿用 Shell 标准布局,
+     注意: Shell.render() 会把 #page 内容平铺到 #page-content 并删掉 #page,
+     所以限宽必须加在 .page-head 和 .pc-layout 上 (它们才是实际存在的元素) */
+  body:not(.workflow-mode) .page-head {
+    max-width: 1280px;
+    margin: 0 auto 24px;
+  }
+  body:not(.workflow-mode) .btn-guide {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 13px;
+    color: var(--black-alpha-56);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-radius: var(--r-md);
+    font-family: inherit;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  body:not(.workflow-mode) .btn-guide:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  body:not(.workflow-mode) .btn-guide svg { width: 14px; height: 14px; }
+
+  /* ─── 主区 · 两栏 grid (左主右辅) ─── */
+  .pc-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 440px;
+    gap: 20px;
+    padding-bottom: 32px;
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+
+  /* ─── 左栏 · 表单区 ─── */
+  .pc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+  .form-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 24px 28px;
+  }
+  .form-card .form-h {
+    font-size: 15px; font-weight: 600;
+    color: var(--accent-black);
+    margin-bottom: 18px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  /* ─── 表单底部 action 行 (form-card 内) ─── */
+  .form-card .form-footer {
+    display: flex; align-items: center; gap: 10px;
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border-faint);
+  }
+  .form-card .form-footer .btn-guide { margin-right: auto; }
+  .form-card .field { margin-bottom: 16px; }
+  .form-card .field:last-child { margin-bottom: 0; }
+  .form-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
+  .form-card .field-label {
+    display: block;
+    font-size: 13px; font-weight: 500;
+    color: var(--accent-black);
+    margin-bottom: 6px;
+  }
+  .form-card .field-label .req { color: var(--heat); margin-left: 2px; }
+  .form-card .field-label .opt {
+    color: var(--black-alpha-48);
+    font-weight: 400;
+    font-size: 12px;
+    margin-left: 6px;
+  }
+  .form-card .input,
+  .form-card .select,
+  .form-card .textarea {
+    width: 100%;
+    height: 38px;
+    background: var(--background-lighter);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    padding: 0 14px;
+    font-size: 13.5px;
+    color: var(--accent-black);
+    outline: none;
+    font-family: inherit;
+    transition: border-color var(--t-base);
+  }
+  .form-card .textarea {
+    height: auto;
+    min-height: 80px;
+    padding: 10px 14px;
+    line-height: 1.6;
+    resize: vertical;
+  }
+  .form-card .input:focus,
+  .form-card .select:focus,
+  .form-card .textarea:focus {
+    border-color: var(--heat-40);
+    box-shadow: inset 0 0 0 1px var(--heat-40);
+  }
+  .form-card .char-count {
+    display: block;
+    margin-top: 4px;
+    text-align: right;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-32);
+    letter-spacing: .02em;
+  }
+
+  /* ─── 商品主图区 · 左右两栏 (上传 + 示例) ─── */
+  .form-card .pf-upload-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+    gap: 16px;
+    align-items: stretch;
+  }
+  .form-card .pf-upload-zone {
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    padding: 28px 20px;
+    background: var(--background-lighter);
+    cursor: pointer;
+    text-align: center;
+    transition: border-color var(--t-base), background var(--t-base);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    min-height: 180px;
+  }
+  .form-card .pf-upload-zone:hover { border-color: var(--heat); background: var(--heat-8); }
+  .form-card .pf-upload-zone .uz-ic {
+    width: 44px; height: 44px;
+    margin: 0 auto 10px;
+    background: var(--surface);
+    border: 1px solid var(--heat-20);
+    border-radius: var(--r-md);
+    color: var(--heat);
+    display: grid; place-items: center;
+  }
+  .form-card .pf-upload-zone .uz-ic svg { width: 20px; height: 20px; }
+  .form-card .pf-upload-zone .uz-t { font-size: 14px; color: var(--accent-black); font-weight: 500; }
+  .form-card .pf-upload-zone .uz-t strong { color: var(--heat); font-weight: 600; }
+  .form-card .pf-upload-zone .uz-d {
+    margin-top: 8px;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .form-card .pf-example {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 16px;
+    display: flex; flex-direction: column; gap: 10px;
+  }
+  .form-card .pf-example .ex-h {
+    font-size: 13px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .form-card .pf-example .ex-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+  .form-card .pf-example .ex-grid .ex-thumb {
+    aspect-ratio: 1;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    overflow: hidden;
+    position: relative;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+  }
+  .form-card .pf-example .ex-grid .ex-thumb svg { width: 22px; height: 22px; }
+  .form-card .pf-example .ex-grid .ex-thumb::after {
+    content: '';
+    position: absolute; inset: 0;
+    background:
+      repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px);
+    pointer-events: none;
+  }
+  .form-card .pf-example .ex-d {
+    font-size: 12px;
+    color: var(--black-alpha-56);
+    line-height: 1.5;
+  }
+  .form-card .pf-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+    margin-top: 12px;
+  }
+  .form-card .pf-grid:empty { display: none; }
+  .form-card .pf-thumb {
+    aspect-ratio: 1;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .form-card .pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
+  .form-card .pf-thumb .pf-x {
+    position: absolute; top: 4px; right: 4px;
+    width: 22px; height: 22px;
+    background: rgba(0,0,0,.7);
+    color: var(--accent-white);
+    border: 0; border-radius: 50%;
+    cursor: pointer;
+    display: grid; place-items: center;
+    opacity: 0;
+    transition: opacity var(--t-base);
+  }
+  .form-card .pf-thumb:hover .pf-x { opacity: 1; }
+  .form-card .pf-thumb .pf-x svg { width: 11px; height: 11px; }
+
+  /* ─── bullet-list (核心卖点) · form view 复用原样式 ─── */
+  .form-card .bullet-list { list-style: none; padding: 0; margin: 0; }
+  .form-card .bullet-list .bl-item,
+  .form-card .bullet-list .bl-add {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    margin-bottom: 6px;
+    font-size: 13.5px;
+  }
+  .form-card .bullet-list .bl-add { background: transparent; border-style: dashed; }
+  .form-card .bullet-list .num {
+    width: 22px; height: 22px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--heat);
+    font-weight: 700;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .form-card .bullet-list .bl-text { flex: 1; color: var(--accent-black); }
+  .form-card .bullet-list .bl-input {
+    flex: 1;
+    background: transparent; border: 0; outline: none;
+    font-size: 13.5px;
+    color: var(--accent-black);
+    font-family: inherit;
+  }
+  .form-card .bullet-list .bl-x {
+    width: 22px; height: 22px;
+    color: var(--black-alpha-48);
+    cursor: pointer;
+    display: grid; place-items: center;
+    border-radius: var(--r-sm);
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .form-card .bullet-list .bl-x:hover { color: var(--accent-crimson); background: var(--crimson-bg); }
+  .form-card .bullet-list .bl-x svg { width: 11px; height: 11px; }
+
+  /* ─── 右栏 · 辅助 cards ─── */
+  .pc-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+
+  /* AI 入口 card */
+  .pc-ai-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 20px;
+  }
+  .pc-ai-card .pa-h h3 {
+    font-size: 14.5px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .pc-ai-card .pa-h p {
+    margin-top: 6px;
+    font-size: 12.5px;
+    color: var(--black-alpha-56);
+    line-height: 1.6;
+  }
+  .pc-ai-card .pa-entries { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
+  .pc-ai-card .pa-entry {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    transition: border-color var(--t-base), background var(--t-base);
+  }
+  .pc-ai-card .pa-entry:hover { border-color: var(--heat-40); background: var(--heat-8); }
+  .pc-ai-card .pa-entry .pe-thumb {
+    width: 56px; height: 56px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    flex-shrink: 0;
+    display: grid; place-items: center;
+    color: var(--heat);
+  }
+  .pc-ai-card .pa-entry .pe-thumb svg { width: 22px; height: 22px; }
+  .pc-ai-card .pa-entry .pe-info { flex: 1; min-width: 0; }
+  .pc-ai-card .pa-entry .pe-info .nm { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  .pc-ai-card .pa-entry .pe-info .dd { font-size: 11.5px; color: var(--black-alpha-56); margin-top: 3px; line-height: 1.5; }
+  .pc-ai-card .pa-entry .pe-cta {
+    font-size: 12.5px;
+    color: var(--heat);
+    background: var(--surface);
+    border: 1px solid var(--heat-40);
+    border-radius: var(--r-md);
+    padding: 5px 12px;
+    cursor: pointer;
+    font-family: inherit;
+    flex-shrink: 0;
+    transition: background var(--t-base);
+  }
+  .pc-ai-card .pa-entry .pe-cta:hover { background: var(--heat-12); }
+
+  /* 创建小贴士 card */
+  .pc-tips-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 20px;
+  }
+  .pc-tips-card .pt-h {
+    font-size: 14px; font-weight: 600;
+    color: var(--accent-black);
+    margin-bottom: 12px;
+  }
+  .pc-tips-card .pt-item {
+    display: flex; gap: 10px;
+    padding: 8px 0;
+    border-bottom: 1px dashed var(--border-faint);
+  }
+  .pc-tips-card .pt-item:last-of-type { border-bottom: 0; }
+  .pc-tips-card .pt-item .pt-ic {
+    width: 20px; height: 20px;
+    background: var(--heat-12);
+    color: var(--heat);
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+  .pc-tips-card .pt-item .pt-ic svg { width: 11px; height: 11px; }
+  .pc-tips-card .pt-item .pt-text { flex: 1; }
+  .pc-tips-card .pt-item .pt-text .t { font-size: 12.5px; font-weight: 600; color: var(--accent-black); }
+  .pc-tips-card .pt-item .pt-text .d { font-size: 11.5px; color: var(--black-alpha-56); margin-top: 3px; line-height: 1.5; }
+  .pc-tips-card .pt-guide {
+    margin-top: 10px;
+    display: block;
+    text-align: center;
+    padding: 8px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    font-size: 12.5px;
+    color: var(--black-alpha-72);
+    cursor: pointer;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .pc-tips-card .pt-guide:hover { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); }
+
+  /* 商品创建后 流程图 */
+  .pc-after-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 20px;
+  }
+  .pc-after-card .pa-title {
+    font-size: 14px; font-weight: 600;
+    color: var(--accent-black);
+    margin-bottom: 14px;
+  }
+  .pc-after-card .pa-flow {
+    display: flex; align-items: center; gap: 8px;
+  }
+  .pc-after-card .pa-node {
+    flex: 1;
+    text-align: center;
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+  }
+  .pc-after-card .pa-node .ic {
+    width: 36px; height: 36px;
+    background: var(--heat-12);
+    color: var(--heat);
+    border-radius: 50%;
+    display: grid; place-items: center;
+  }
+  .pc-after-card .pa-node .ic svg { width: 16px; height: 16px; }
+  .pc-after-card .pa-node .lbl {
+    font-size: 11px;
+    color: var(--black-alpha-72);
+    line-height: 1.4;
+  }
+  .pc-after-card .pa-arrow {
+    color: var(--black-alpha-32);
+    flex-shrink: 0;
+  }
+  .pc-after-card .pa-arrow svg { width: 14px; height: 14px; }
+
+  @media (max-width: 1100px) {
+    .pc-layout { grid-template-columns: 1fr; }
+    .form-card .pf-upload-row { grid-template-columns: 1fr; }
+  }
+
+  /* ─── 新建商品 · drawer 形态 ─── */
+  .pc-drawer { width: 820px; max-width: 100vw; }
+  .pc-drawer .drawer-h h3 { font-size: 16px; font-weight: 600; }
+  .pc-drawer .drawer-b { padding: 24px 28px; }
+  /* drawer 内的 form-card 去掉外观, 由 drawer 自身提供容器 */
+  .pc-drawer .drawer-b .form-card {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    border-radius: 0;
+  }
+  .pc-drawer .drawer-f {
+    padding: 14px 24px;
+    background: var(--surface);
+    align-items: center;
+  }
+  .pc-drawer .drawer-f .btn-guide {
+    margin-right: auto;
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 13px;
+    color: var(--black-alpha-56);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-radius: var(--r-md);
+    font-family: inherit;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .pc-drawer .drawer-f .btn-guide:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  .pc-drawer .drawer-f .btn-guide svg { width: 14px; height: 14px; }
+  @media (max-width: 900px) {
+    .pc-drawer .drawer-b .pf-upload-row { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- ============================================================
+     新建商品 · Form view (默认显示) · 参考图样式
+     · 切到 AI workflow 时 body 加 .workflow-mode, 这块被 .app 隐藏覆盖
+     ============================================================ -->
+<div id="page"></div>
+
+<!-- 右弹窗 · 新建商品 -->
+<div class="drawer-bg show" id="pc-drawer-bg"></div>
+<aside class="drawer show pc-drawer" id="pc-drawer" role="dialog" aria-label="新建商品">
+  <div class="drawer-h">
+    <h3>新建商品</h3>
+    <button class="x" type="button" id="pc-drawer-close" aria-label="关闭">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+    </button>
+  </div>
+
+  <div class="drawer-b">
+    <div class="form-card">
+      <div class="form-h">基础信息</div>
+
+      <div class="field">
+        <label class="field-label">商品名称<span class="req">*</span></label>
+        <input class="input" id="pf-name" placeholder="请输入商品名称(必填)" maxlength="100">
+      </div>
+
+      <div class="field-row">
+        <div>
+          <label class="field-label">品类<span class="req">*</span></label>
+          <select class="select" id="pf-cat" data-cat-select>
+            <option>美妆个护</option>
+            <option>服饰内衣</option>
+            <option>食品饮料</option>
+            <option>家居家电</option>
+            <option>数码 3C</option>
+            <option>个护清洁</option>
+            <option>运动户外</option>
+            <option>母婴亲子</option>
+          </select>
+        </div>
+        <div>
+          <label class="field-label">目标人群<span class="opt">(选填)</span></label>
+          <input class="input" id="pf-target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="field-label">商品主图<span class="req">*</span></label>
+        <input type="file" id="pf-file" accept="image/*" multiple hidden>
+        <div class="pf-upload-row">
+          <div class="pf-upload-zone" id="pf-zone">
+            <div class="uz-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            </div>
+            <div class="uz-t">点击上传或<strong>拖拽图片</strong>到此处</div>
+            <div class="uz-d">// 支持 JPG、PNG 格式,建议尺寸 800×800 以上,大小不超过 10MB</div>
+          </div>
+          <div class="pf-example">
+            <div class="ex-h">示例图</div>
+            <div class="ex-grid">
+              <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10l1 4v12H6V8l1-4z"/><path d="M9 4v3M15 4v3M9 11h6M9 14h6"/></svg></div>
+              <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="5" width="12" height="15" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div>
+              <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3h8l1 5v12H7V8l1-5z"/><circle cx="12" cy="13" r="2.5"/></svg></div>
+            </div>
+            <div class="ex-d">优质的商品图有助于生成更好的素材效果</div>
+          </div>
+        </div>
+        <div class="pf-grid" id="pf-grid"></div>
+      </div>
+
+      <div class="field" style="margin-bottom: 0;">
+        <label class="field-label">核心卖点<span class="req">*</span></label>
+        <ul class="bullet-list" id="pf-bullets" data-bl>
+          <li class="bl-add"><span class="num">+</span><input class="bl-input" placeholder="添加新卖点 · 回车确认"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="drawer-f">
+    <button class="btn-guide" type="button" onclick="Shell.toast('使用指南', '点击查看完整填写指南')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 4M12 17h.01"/></svg>
+      使用指南
+    </button>
+    <button class="btn" type="button" id="pc-cancel-btn">取消</button>
+    <button class="btn btn-primary" type="button" id="pc-save-btn">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+      创建商品
+    </button>
+  </div>
+</aside>
+
+
+<script src="assets/shell.js"></script>
+<script>
+  // ============================================================
+  // 调用 Shell.render · 注入网站 sidebar (form mode 显示)
+  // ============================================================
+  Shell.render({
+    active: 'products',
+    crumbs: [{ label: '工作台', href: 'index.html' }, { label: '商品库', href: 'products.html' }, { label: '新建商品' }]
+  });
+
+  // ============================================================
+  // Form view · 多图上传 (与 workflow 独立)
+  // ============================================================
+  const PF_MAX = 5;
+  const pfFiles = []; // {id, dataUrl, name}
+  const pfFile = document.getElementById('pf-file');
+  const pfZone = document.getElementById('pf-zone');
+  const pfGrid = document.getElementById('pf-grid');
+
+  function pfUid() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 5); }
+  function pfEsc(s) { return (s || '').replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]); }
+
+  function pfRender() {
+    pfGrid.innerHTML = pfFiles.map(u => `
+      <div class="pf-thumb" data-id="${u.id}">
+        <img src="${u.dataUrl}" alt="${pfEsc(u.name)}">
+        <button class="pf-x" type="button" title="删除">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+        </button>
+      </div>
+    `).join('');
+    pfGrid.querySelectorAll('.pf-thumb .pf-x').forEach(b => {
+      b.onclick = e => {
+        e.stopPropagation();
+        const id = b.closest('.pf-thumb').dataset.id;
+        const i = pfFiles.findIndex(f => f.id === id);
+        if (i >= 0) pfFiles.splice(i, 1);
+        pfRender();
+      };
+    });
+    pfGrid.querySelectorAll('.pf-thumb img').forEach(img => {
+      img.onclick = () => Shell._openLightbox(img.src, img.alt);
+    });
+  }
+
+  function pfAdd(fileList) {
+    const remaining = PF_MAX - pfFiles.length;
+    if (remaining <= 0) { Shell.toast('已达上限', `${PF_MAX} / ${PF_MAX}`); return; }
+    const incoming = [...fileList].filter(f => f.type.startsWith('image/'));
+    const accepted = incoming.slice(0, remaining);
+    let done = 0;
+    accepted.forEach(f => {
+      const r = new FileReader();
+      r.onload = e => {
+        pfFiles.push({ id: pfUid(), dataUrl: e.target.result, name: f.name });
+        if (++done === accepted.length) {
+          pfRender();
+          Shell.toast('图片已添加', `共 ${pfFiles.length} 张`);
+        }
+      };
+      r.readAsDataURL(f);
+    });
+  }
+
+  pfZone.onclick = () => { if (pfFiles.length < PF_MAX) pfFile.click(); };
+  pfZone.addEventListener('dragover', e => { e.preventDefault(); pfZone.style.borderColor = 'var(--heat)'; });
+  pfZone.addEventListener('dragleave', () => { pfZone.style.borderColor = ''; });
+  pfZone.addEventListener('drop', e => {
+    e.preventDefault();
+    pfZone.style.borderColor = '';
+    if (e.dataTransfer?.files?.length) pfAdd(e.dataTransfer.files);
+  });
+  pfFile.onchange = e => { pfAdd(e.target.files); e.target.value = ''; };
+
+  // ============================================================
+  // Form view · bullet-list (核心卖点) 交互
+  // ============================================================
+  (function initBullets() {
+    const list = document.getElementById('pf-bullets');
+    if (!list) return;
+    const addInput = list.querySelector('.bl-add .bl-input');
+    const xSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+    const renumber = () => {
+      [...list.querySelectorAll('.bl-item')].forEach((li, i) => {
+        li.querySelector('.num').textContent = i + 1;
+      });
+    };
+    const bindX = x => {
+      x.onclick = () => {
+        const li = x.closest('li');
+        li.style.transition = 'opacity .15s, transform .15s';
+        li.style.opacity = 0;
+        li.style.transform = 'translateX(-8px)';
+        setTimeout(() => { li.remove(); renumber(); }, 150);
+      };
+    };
+    const addBullet = text => {
+      const t = (text || '').trim();
+      if (!t) return;
+      const li = document.createElement('li');
+      li.className = 'bl-item';
+      li.innerHTML = `<span class="num">0</span><span class="bl-text">${pfEsc(t)}</span><span class="bl-x" title="删除">${xSvg}</span>`;
+      list.querySelector('.bl-add').before(li);
+      bindX(li.querySelector('.bl-x'));
+      renumber();
+    };
+    addInput?.addEventListener('keydown', e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        addBullet(addInput.value);
+        addInput.value = '';
+      }
+    });
+  })();
+
+  // ============================================================
+  // 保存 + Mode 切换 · form ↔ workflow
+  // ============================================================
+  function pfValidate() {
+    const name = document.getElementById('pf-name').value.trim();
+    if (!name) { Shell.toast('请填写商品名称'); return false; }
+    if (pfFiles.length < 1) { Shell.toast('请至少上传 1 张商品图'); return false; }
+    return true;
+  }
+
+  function pfSave(redirect = true) {
+    if (!pfValidate()) return false;
+    Shell.toast('商品已创建', document.getElementById('pf-name').value);
+    if (redirect) setTimeout(() => location.href = 'products.html', 600);
+    return true;
+  }
+
+  // drawer 按钮: 保存 / 取消 / 关闭 / 点击遮罩
+  document.getElementById('pc-save-btn').onclick = () => pfSave(true);
+  const _back = () => location.href = 'products.html';
+  document.getElementById('pc-cancel-btn').onclick = _back;
+  document.getElementById('pc-drawer-close').onclick = _back;
+  document.getElementById('pc-drawer-bg').onclick = _back;
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') _back(); });
+
+  // (AI 入口跳转 / pfSyncToWorkflow 已随 drawer 形态移除)
+
+  // 把 form view 的数据同步到 workflow (.wb) 的 state 和 DOM
+  function pfSyncToWorkflow() {
+    if (typeof state === 'undefined') return; // workflow JS 未初始化
+    // 商品名
+    const name = document.getElementById('pf-name').value.trim();
+    const aiName = document.getElementById('ai-name');
+    if (aiName) aiName.value = name;
+    const topbarName = document.getElementById('topbar-name');
+    if (topbarName) topbarName.value = name;
+    // 品类
+    const cat = document.getElementById('pf-cat').value;
+    const aiCat = document.getElementById('ai-cat');
+    if (aiCat) aiCat.value = cat;
+    // 目标人群
+    const target = document.getElementById('pf-target').value.trim();
+    const aiTarget = document.getElementById('ai-target');
+    if (aiTarget) aiTarget.value = target;
+    // 卖点
+    const aiBullets = document.getElementById('ai-bullets');
+    if (aiBullets) {
+      [...aiBullets.querySelectorAll('.bl-item')].forEach(li => li.remove());
+      const xSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+      [...document.querySelectorAll('#pf-bullets .bl-item .bl-text')].forEach((el, i) => {
+        const t = el.textContent;
+        const li = document.createElement('li');
+        li.className = 'bl-item';
+        li.innerHTML = `<span class="num">${i + 1}</span><span class="bl-text">${pfEsc(t)}</span><span class="bl-x" title="删除">${xSvg}</span>`;
+        aiBullets.querySelector('.bl-add').before(li);
+      });
+    }
+    // 原图 → uploads
+    state.uploads.length = 0;
+    pfFiles.forEach(f => state.uploads.push({ id: f.id, dataUrl: f.dataUrl, name: f.name, type: 'image/' }));
+    if (typeof renderS1Grid === 'function') renderS1Grid();
+    if (typeof refreshSideAssets === 'function') refreshSideAssets();
+    if (typeof updateBottom === 'function') updateBottom();
+  }
+
+  // ============================================================
+  // STATE
+  // ============================================================
+  const state = {
+    mode: 'ai',
+    step: 1,             // 1..4
+    sub: 1,              // Step 3 内部 sub-tab (① 挑模特 → ② 生上身)
+    uploads: [],         // Step 1 上传的原图
+    triViews: [],        // Step 2 三视图版本历史 [{id, dataUrl?, createdAt, label}]
+    triCurrent: null,    // 当前选中的三视图 id (= 加入商品的版本)
+    // Step 3
+    ownModels: [],       // 商家上传的模特
+    selectedModels: new Set(), // 已选模特 id (用于触发生成)
+    outfits: {},         // { modelId: [{id, label}] } · 资产库
+    outfitRegenCount: {},
+    pickedOutfits: new Set(),    // 已加入商品的 outfit id
+    // Step 4
+    platforms: {},       // 各平台头图 { platKey: { cards: [{id, label}], regenCount } } · 资产库
+    pickedPlatformCards: new Set(), // 已加入商品的 平台头图 card id
+    // 平台 checkbox (Step4 还未触发生成时的勾选)
+    selectedPlatforms: new Set(),
+    rightCollapsed: false,
+  };
+
+  const PLATFORM_META = {
+    amazon: { name: '亚马逊', spec: '1:1 白底', ratio: '1/1' },
+    xhs:    { name: '小红书', spec: '3:4 生活感', ratio: '3/4' },
+    dy:     { name: '抖音',  spec: '9:16 视觉冲击', ratio: '9/16' },
+    tb:     { name: '淘宝',  spec: '4:5 营销', ratio: '4/5' },
+    jd:     { name: '京东',  spec: '1:1 商务', ratio: '1/1' },
+    pdd:    { name: '拼多多', spec: '1:1 促销', ratio: '1/1' },
+    sph:    { name: '视频号', spec: '9:16 引流', ratio: '9/16' },
+    ks:     { name: '快手',  spec: '9:16 老铁', ratio: '9/16' },
+  };
+
+  const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
+  const esc = (s) => (s || '').replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]);
+
+  // ============================================================
+  // STEP NAVIGATION (5-step)
+  // ============================================================
+  function showStep(n) {
+    state.step = n;
+    document.querySelectorAll('.step-pane').forEach(p => p.classList.remove('active'));
+    document.querySelector(`[data-pane="${n}"]`)?.classList.add('active');
+
+    refreshSideSteps();
+
+    const strip = document.getElementById('subtab-strip');
+    if (strip) strip.style.display = n === 3 ? 'flex' : 'none';
+
+    updateBottom();
+    const canvas = document.querySelector('.wb-canvas');
+    if (canvas) canvas.scrollTop = 0;
+
+    // Step 4 进入时如果已勾选平台,渲染结果区
+    if (n === 4) renderPlatformResults();
+  }
+
+  // 已完成的 step 可点击回退
+  function canEnterStep(n) {
+    if (n === 1) return true;
+    if (n === 2) return state.uploads.length >= 1 && getName();
+    if (n === 3) return state.triViews.length >= 1; // 附加:三视图后可入
+    if (n === 4) return state.triViews.length >= 1; // 附加:三视图后可入
+    return false;
+  }
+  function getName() { return (document.getElementById('ai-name')?.value || '').trim(); }
+
+  // 真实"完成"状态(用于 sidebar done 视觉)· 附加 step 仅在用户实际生成了内容时才标 done
+  function isStepDone(sn) {
+    if (sn === 1) return state.uploads.length >= 1 && !!getName();
+    if (sn === 2) return state.triViews.length >= 1;
+    if (sn === 3) return countOutfitCards() > 0 || state.ownModels.length > 0;
+    if (sn === 4) return countPlatformCards() > 0;
+    return false;
+  }
+  function refreshSideSteps() {
+    document.querySelectorAll('#ai-steps .step-item').forEach(s => {
+      s.classList.remove('active', 'done', 'locked');
+      const sn = +s.dataset.step;
+      if (sn === state.step) {
+        s.classList.add('active');
+      } else if (isStepDone(sn)) {
+        s.classList.add('done');
+      } else if (!canEnterStep(sn)) {
+        s.classList.add('locked');
+      }
+    });
+  }
+
+  function showSub(n) {
+    state.sub = n;
+    document.querySelectorAll('.sub-pane').forEach(p => p.classList.remove('active'));
+    document.querySelector(`[data-sub-pane="${n}"]`)?.classList.add('active');
+
+    document.querySelectorAll('.subtab').forEach(t => {
+      t.classList.remove('active', 'done', 'disabled');
+      const tn = +t.dataset.sub;
+      if (tn < n) t.classList.add('done');
+      else if (tn === n) t.classList.add('active');
+    });
+
+    document.querySelectorAll('.substep-item').forEach(t => {
+      t.classList.remove('active', 'done');
+      const tn = +t.dataset.sub;
+      if (tn < n) t.classList.add('done');
+      else if (tn === n) t.classList.add('active');
+    });
+
+    const subtabMeta = document.getElementById('subtab-meta');
+    if (subtabMeta) {
+      subtabMeta.innerHTML = n === 1
+        ? `// SUB-STEP 1 / 2 · 已选模特 <span class="accent">${selectedCount()}</span>`
+        : `// SUB-STEP 2 / 2 · ${state.selectedModels.size} 个模特 × 4 张`;
+    }
+
+    // 进入 SUB 2 时仅渲染(已生成的 outfits)· 不再自动触发生成
+    if (n === 2) renderOutfits();
+
+    updateBottom();
+    document.querySelector('.wb-canvas').scrollTop = 0;
+  }
+  window.showSub = showSub;
+
+  const SVG_LEFT  = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>';
+  const SVG_RIGHT = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>';
+  const SVG_CHECK = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>';
+
+  function updateBottom() {
+    // 更新各 step pane 底部成本提示 + topbar finish 状态
+    refreshPaneCosts();
+    refreshFinishCta();
+  }
+
+  function refreshPaneCosts() {
+    // Step 2 已生成: 切换文案为 "重新生成"
+    const p2lbl = document.getElementById('pane2-gen-label');
+    const p2cost = document.getElementById('pane2-cost');
+    if (p2lbl && p2cost) {
+      if (state.triViews.length > 0) {
+        p2lbl.textContent = '重新生成 (新增版本)';
+        p2cost.innerHTML = `// 已有 ${state.triViews.length} 个版本 · 重新生成 ~<span class="price">¥0.30</span>`;
+      } else {
+        p2lbl.textContent = '生成商品三视图';
+        p2cost.innerHTML = '// 生成三视图 · ~<span class="price">¥0.30</span> / 次';
+      }
+    }
+    // Step 3 SUB1 成本提示
+    const p3cost = document.getElementById('pane3-cost');
+    if (p3cost) {
+      const n = state.selectedModels.size;
+      p3cost.innerHTML = n > 0
+        ? `// 已选 ${n} 个模特 · 预计 ${n * 4} 张 · ~<span class="price">¥${(n * 0.4).toFixed(2)}</span>`
+        : '// 未选模特 · 先勾选 1+ 个模特';
+    }
+    // Step 4 成本提示
+    const p4cost = document.getElementById('pane4-cost');
+    if (p4cost) {
+      const n = state.selectedPlatforms.size;
+      p4cost.innerHTML = n > 0
+        ? `// 已选 ${n} 个平台 · 预计 ${n * 4} 张 · ~<span class="price">¥${(n * 0.5).toFixed(2)}</span>`
+        : '// 未选平台 · 先勾选 1+ 个平台';
+    }
+  }
+
+  function refreshFinishCta() {
+    // topbar 完成创建按钮
+    const tb = document.getElementById('topbar-finish');
+    if (!tb) return;
+    const ready = state.triViews.length >= 1;
+    tb.disabled = !ready;
+    tb.title = ready ? `加入商品库 (${countPickedAssets()} 张已选资产)` : '完成 Step 2 三视图后可创建';
+  }
+
+  function bindStepButtons() {
+    // Step 1 底部 · 下一步
+    document.getElementById('pane1-next')?.addEventListener('click', () => {
+      if (!getName()) { Shell.toast('请填写商品名称'); return; }
+      if (state.uploads.length < 1) { Shell.toast('请至少上传 1 张商品图'); return; }
+      showStep(2);
+    });
+
+    // Step 2 底部 · 生成 / 重新生成三视图
+    document.getElementById('pane2-gen')?.addEventListener('click', () => {
+      if (state.triViews.length === 0) autoGenTriView();
+      else triViewRegenerate();
+    });
+
+    // Step 3 SUB1 底部 · 生成上身图
+    document.getElementById('pane3-gen')?.addEventListener('click', () => {
+      const n = state.selectedModels.size;
+      if (n < 1) { Shell.toast('请先勾选至少 1 个模特'); return; }
+      generateOutfitsForSelected();
+    });
+
+    // Step 3 SUB2 底部 · 返回挑选
+    document.getElementById('pane3sub2-back')?.addEventListener('click', () => showSub(1));
+
+    // Step 4 底部 · 生成平台头图
+    document.getElementById('pane4-gen')?.addEventListener('click', () => {
+      const n = state.selectedPlatforms.size;
+      if (n < 1) { Shell.toast('请先勾选至少 1 个平台'); return; }
+      generatePlatformsForSelected();
+    });
+
+    // Topbar 完成创建
+    document.getElementById('topbar-finish')?.addEventListener('click', () => {
+      if (state.triViews.length < 1) { Shell.toast('需先完成商品三视图'); return; }
+      Shell.toast('商品已加入商品库', getName());
+      setTimeout(() => location.href = 'products.html', 800);
+    });
+  }
+
+  // 折叠右栏
+  window.toggleRightPanel = function() {
+    state.rightCollapsed = !state.rightCollapsed;
+    document.querySelector('.wb-controls')?.classList.toggle('collapsed', state.rightCollapsed);
+  };
+
+  // sub-tab click
+  document.querySelectorAll('.subtab').forEach(t => {
+    t.onclick = () => {
+      if (state.sub === 2 || +t.dataset.sub === 1 || selectedCount() > 0) {
+        showSub(+t.dataset.sub);
+      }
+    };
+  });
+
+  // sidebar step click
+  document.querySelectorAll('#ai-steps .step-item').forEach(s => {
+    s.onclick = () => {
+      if (s.classList.contains('locked')) return;
+      const n = +s.dataset.step;
+      if (n) showStep(n);
+    };
+  });
+
+  // sub-nav click
+  document.querySelectorAll('#sub-nav .substep-item').forEach(t => {
+    t.onclick = () => showSub(+t.dataset.sub);
+  });
+
+  // ============================================================
+  // STEP 3 · 模特卡片 · 勾选 + 点卡查看详情弹窗
+  // ============================================================
+  // 初始化:把 HTML 中预选的卡片同步到 state.selectedModels
+  document.querySelectorAll('#model-grid .model-card.selected').forEach(c => {
+    state.selectedModels.add(c.dataset.id);
+  });
+
+  function selectedCount() { return state.selectedModels.size; }
+
+  function refreshCounts() {
+    const n = selectedCount();
+    const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    setText('sel-count', n);
+    setText('meta-count', n);
+    setText('sel-count-x4', n * 4);
+    refreshKindNums();
+    if (state.step === 3) updateBottom();
+  }
+
+  function refreshKindNums() {
+    const all = document.querySelectorAll('#model-grid .model-card').length;
+    const lib = document.querySelectorAll('#model-grid .model-card[data-kind="lib"]').length;
+    const mine = document.querySelectorAll('#model-grid .model-card[data-kind="mine"]').length;
+    const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    setText('kt-num-all', all);
+    setText('kt-num-lib', lib);
+    setText('kt-num-mine', mine);
+  }
+
+  const CHECK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-6"/></svg>';
+
+  function toggleModelSelection(card) {
+    const id = card.dataset.id;
+    const wasSelected = card.classList.contains('selected');
+    card.classList.toggle('selected');
+    if (wasSelected) {
+      state.selectedModels.delete(id);
+      // 已生成的 outfits 保留在资产库 · 仅取消勾选标记
+      (state.outfits[id] || []).forEach(c => state.pickedOutfits.delete(c.id));
+    } else {
+      state.selectedModels.add(id);
+    }
+    refreshCounts();
+    refreshSideAssets();
+  }
+
+  function bindModelCard(card) {
+    // 注入勾选 checkbox 图标(若未注入)
+    if (!card.querySelector('.mc-check')) {
+      const chk = document.createElement('span');
+      chk.className = 'mc-check';
+      chk.title = '点击勾选/取消';
+      chk.innerHTML = CHECK_SVG;
+      chk.addEventListener('click', e => {
+        e.stopPropagation();
+        toggleModelSelection(card);
+      });
+      card.appendChild(chk);
+    }
+    // 整卡点击 → 打开详情弹窗
+    card.onclick = () => openModelDetail(card);
+  }
+  document.querySelectorAll('#model-grid .model-card').forEach(bindModelCard);
+
+  // ============================================================
+  // 模特详情弹窗 · 大图 + 标签 + 选中按钮
+  // ============================================================
+  let mdCurrentCard = null;
+  const mdModal = document.getElementById('md-modal');
+
+  window.openModelDetail = function(card) {
+    if (!card) return;
+    mdCurrentCard = card;
+    const id = card.dataset.id;
+    const kind = card.dataset.kind || 'lib';
+    const name = card.dataset.name;
+    const base = card.dataset.base || '';
+    const role = card.dataset.role || '';
+    const tags = (card.dataset.tags || '').split(',').filter(Boolean);
+
+    document.getElementById('md-name').textContent = name;
+    const kindEl = document.getElementById('md-kind');
+    kindEl.textContent = kind === 'mine' ? '我的 · 入资产库' : '平台模特库';
+    kindEl.classList.toggle('mine', kind === 'mine');
+
+    // 三视图(我的模特: 使用上传图;库模特:用 placeholder)
+    const views = document.getElementById('md-views');
+    if (kind === 'mine') {
+      const own = state.ownModels.find(m => m.id === id);
+      if (own?.sourceImg) {
+        views.innerHTML = `
+          <div><img src="${own.sourceImg}" alt="正面"></div>
+          <div class="placeholder"><span class="ph-frame">侧面</span></div>
+          <div class="placeholder"><span class="ph-frame">背面</span></div>
+        `;
+      } else {
+        views.innerHTML = `<div class="placeholder"><span class="ph-frame">正面</span></div><div class="placeholder"><span class="ph-frame">侧面</span></div><div class="placeholder"><span class="ph-frame">背面</span></div>`;
+      }
+    } else {
+      views.innerHTML = `
+        <div class="placeholder"><span class="ph-frame">${esc(name)}<br>正面</span></div>
+        <div class="placeholder"><span class="ph-frame">${esc(name)}<br>侧面</span></div>
+        <div class="placeholder"><span class="ph-frame">${esc(name)}<br>背面</span></div>
+      `;
+    }
+
+    // tags
+    const baseTags = base ? base.split(' · ').filter(Boolean) : [];
+    const allTags = baseTags.concat([role]).concat(tags).filter(Boolean);
+    document.getElementById('md-tags').innerHTML = allTags.map(t => `<span class="tag">${esc(t)}</span>`).join('');
+
+    // meta rows
+    const ageStr = baseTags.length > 1 ? baseTags[1] : '';
+    document.getElementById('md-age').textContent = ageStr ? `${ageStr} 岁 · 可微调 ±3` : '—';
+    document.getElementById('md-outfit').textContent = kind === 'mine' ? '商家上传立绘(原图)' : '白 T + 白短裤(默认立绘)';
+    document.getElementById('md-body-info').textContent = base.includes('双人') ? '双人组合' : (base.startsWith('男') ? '普通男 · 175cm / 65kg' : '普通女 · 165cm / 50kg');
+    document.getElementById('md-used').textContent = kind === 'mine' ? '商家上传 · 仅本商品' : '4 个项目 · 平均评分 4.5';
+
+    updateMdSelectButton(card.classList.contains('selected'));
+    document.getElementById('md-select-btn').onclick = () => {
+      toggleModelSelection(card);
+      updateMdSelectButton(card.classList.contains('selected'));
+    };
+
+    mdModal.classList.add('open');
+  };
+
+  window.closeModelDetail = function() {
+    mdModal.classList.remove('open');
+    mdCurrentCard = null;
+  };
+
+  mdModal?.addEventListener('click', e => { if (e.target === mdModal) closeModelDetail(); });
+
+  function updateMdSelectButton(isSelected) {
+    const lbl = document.getElementById('md-select-label');
+    const info = document.getElementById('md-foot-info');
+    const btn = document.getElementById('md-select-btn');
+    if (isSelected) {
+      lbl.textContent = '已选中 · 点击取消';
+      info.textContent = '// 已选中,下一步将生成 4 张上身图';
+      info.classList.add('is-selected');
+      btn.classList.remove('btn-primary');
+    } else {
+      lbl.textContent = '选中此模特';
+      info.textContent = '// 未选中';
+      info.classList.remove('is-selected');
+      btn.classList.add('btn-primary');
+    }
+  }
+
+  window.removeModel = function(id) {
+    const card = document.querySelector(`#model-grid .model-card[data-id="${id}"]`);
+    if (card) card.classList.remove('selected');
+    state.selectedModels.delete(id);
+    (state.outfits[id] || []).forEach(c => state.pickedOutfits.delete(c.id));
+    refreshCounts();
+    refreshSideAssets();
+  };
+
+  // ============================================================
+  // 来源切换 · 全部 / 模特库 / 我的
+  // ============================================================
+  document.querySelectorAll('#kind-toggle .kt-btn').forEach(btn => {
+    btn.onclick = () => {
+      document.querySelectorAll('#kind-toggle .kt-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const kind = btn.dataset.kind;
+      document.querySelectorAll('#model-grid .model-card').forEach(c => {
+        const k = c.dataset.kind;
+        c.style.display = (kind === 'all' || kind === k) ? '' : 'none';
+      });
+      // "+ 上传新模特" 卡片在所有视图下显示
+      const addCard = document.getElementById('add-model-card');
+      if (addCard) addCard.style.display = '';
+    };
+  });
+
+  // ============================================================
+  // 核心卖点 · bullet-list 交互
+  // ============================================================
+  document.querySelectorAll('[data-bl]').forEach(list => {
+    const addInput = list.querySelector('.bl-add .bl-input');
+    const renumber = () => {
+      [...list.querySelectorAll('.bl-item')].forEach((li, i) => {
+        li.querySelector('.num').textContent = i + 1;
+      });
+    };
+    const xSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+    const addBullet = (text) => {
+      const t = (text || '').trim();
+      if (!t) return;
+      const li = document.createElement('li');
+      li.className = 'bl-item';
+      li.innerHTML = `<span class="num">0</span><span class="bl-text">${t.replace(/[<>&]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;' })[c])}</span><span class="bl-x" title="删除">${xSvg}</span>`;
+      list.querySelector('.bl-add').before(li);
+      bindX(li.querySelector('.bl-x'));
+      renumber();
+    };
+    const bindX = (x) => {
+      x.addEventListener('click', () => {
+        const li = x.closest('li');
+        li.style.transition = 'opacity .15s, transform .15s';
+        li.style.opacity = 0;
+        li.style.transform = 'translateX(-8px)';
+        setTimeout(() => { li.remove(); renumber(); }, 150);
+      });
+    };
+    list.querySelectorAll('.bl-x').forEach(bindX);
+    addInput?.addEventListener('keydown', e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        addBullet(addInput.value);
+        addInput.value = '';
+      }
+    });
+  });
+
+  // ============================================================
+  // Step 1 · 多图上传 (data URLs · 不入资产库,仅商品详情)
+  // ============================================================
+  const MAX_UPLOADS = 5;
+  const s1File = document.getElementById('s1-file');
+  const s1Zone = document.getElementById('s1-zone');
+  const s1ZoneText = document.getElementById('s1-zone-text');
+  const s1Grid = document.getElementById('s1-grid');
+
+  function renderS1Grid() {
+    if (!s1Grid) return;
+    const xSvg = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+    s1Grid.innerHTML = state.uploads.map(u => `
+      <div class="up-thumb" data-id="${u.id}">
+        <img src="${u.dataUrl}" alt="${esc(u.name)}">
+        <button class="slot-x" type="button" title="删除">${xSvg}</button>
+      </div>
+    `).join('');
+    s1Grid.querySelectorAll('.up-thumb').forEach(t => {
+      const id = t.dataset.id;
+      t.querySelector('.slot-x').addEventListener('click', e => {
+        e.stopPropagation();
+        const i = state.uploads.findIndex(u => u.id === id);
+        if (i >= 0) {
+          const rm = state.uploads.splice(i, 1)[0];
+          Shell.toast('已删除', rm.name);
+          renderS1Grid(); syncS1Zone(); renderAssetPreview(); updateBottom();
+        }
+      });
+      t.addEventListener('click', () => {
+        const u = state.uploads.find(x => x.id === id);
+        if (u) Shell._openLightbox(u.dataUrl, u.name);
+      });
+    });
+  }
+  function syncS1Zone() {
+    if (!s1Zone || !s1ZoneText) return;
+    const full = state.uploads.length >= MAX_UPLOADS;
+    s1Zone.classList.toggle('full', full);
+    s1ZoneText.textContent = full ? `已达上限 (${MAX_UPLOADS} / ${MAX_UPLOADS})` : '点击或拖拽上传图片';
+  }
+  function addS1Files(fileList) {
+    const remaining = MAX_UPLOADS - state.uploads.length;
+    if (remaining <= 0) { Shell.toast('已达上限', `${MAX_UPLOADS} / ${MAX_UPLOADS}`); return; }
+    const incoming = [...fileList].filter(f => f.type.startsWith('image/'));
+    const accepted = incoming.slice(0, remaining);
+    const overflow = incoming.length - accepted.length;
+    let done = 0;
+    accepted.forEach(f => {
+      const reader = new FileReader();
+      reader.onload = e => {
+        state.uploads.push({ id: uid(), dataUrl: e.target.result, name: f.name, type: f.type });
+        done++;
+        if (done === accepted.length) {
+          renderS1Grid(); syncS1Zone(); renderAssetPreview(); updateBottom();
+          const msg = overflow > 0 ? `+ ${done} 张 · 超出 ${overflow} 张忽略` : `+ ${done} 张 · 共 ${state.uploads.length}`;
+          Shell.toast('图片已添加 (商品详情)', msg);
+        }
+      };
+      reader.readAsDataURL(f);
+    });
+  }
+  if (s1File) s1File.addEventListener('change', e => { addS1Files(e.target.files); e.target.value = ''; });
+  if (s1Zone) {
+    s1Zone.addEventListener('click', () => { if (state.uploads.length < MAX_UPLOADS) s1File.click(); });
+    s1Zone.addEventListener('dragover', e => { e.preventDefault(); if (state.uploads.length < MAX_UPLOADS) s1Zone.style.borderColor = 'var(--heat)'; });
+    s1Zone.addEventListener('dragleave', () => { s1Zone.style.borderColor = ''; });
+    s1Zone.addEventListener('drop', e => { e.preventDefault(); s1Zone.style.borderColor = ''; if (e.dataTransfer?.files?.length) addS1Files(e.dataTransfer.files); });
+  }
+
+  // 商品名 → topbar 同步
+  document.getElementById('ai-name')?.addEventListener('input', e => {
+    const tb = document.getElementById('topbar-name');
+    if (tb) tb.value = e.target.value;
+  });
+
+  // ============================================================
+  // 右栏 · 商品预览 (只显示已加入商品的资产)
+  // ============================================================
+  function countOutfitCards() {
+    return Object.values(state.outfits).reduce((s, arr) => s + arr.length, 0);
+  }
+  function countPlatformCards() {
+    return Object.values(state.platforms).reduce((s, p) => s + p.cards.length, 0);
+  }
+  function countPickedAssets() {
+    let n = 0;
+    if (state.triCurrent) n++;
+    n += state.pickedOutfits.size;
+    n += state.pickedPlatformCards.size;
+    return n;
+  }
+  // 兼容旧调用
+  function countTotalAssets() { return countPickedAssets(); }
+
+  function renderAssetPreview() {
+    const name = getName() || '未命名商品';
+    const cat = document.getElementById('ai-cat')?.value || '';
+    const total = countPickedAssets();
+
+    document.getElementById('rap-name').textContent = name;
+    document.getElementById('rap-meta').textContent = `// ${cat || '未填写品类'} · 加入商品 ${total} 张 · 原图 ${state.uploads.length} 张`;
+
+    // 原图 (始终显示,商品详情数据)
+    const gOrig = document.getElementById('rap-grid-orig');
+    document.getElementById('rap-c-orig').textContent = state.uploads.length;
+    document.querySelector('[data-group="orig"]')?.classList.toggle('empty', state.uploads.length === 0);
+    if (state.uploads.length) {
+      gOrig.innerHTML = state.uploads.map(u => `<div class="rap-item" data-src="${u.dataUrl}" data-name="${esc(u.name)}"><img src="${u.dataUrl}" alt=""></div>`).join('');
+    } else {
+      gOrig.innerHTML = '<div class="rap-empty mono">// 还未上传</div>';
+    }
+
+    // 三视图 · 只显示当前加入商品的版本
+    const gTri = document.getElementById('rap-grid-tri');
+    const curTri = state.triViews.find(v => v.id === state.triCurrent);
+    document.getElementById('rap-c-tri').textContent = curTri ? 1 : 0;
+    document.querySelector('[data-group="tri"]')?.classList.toggle('empty', !curTri);
+    if (curTri) {
+      gTri.innerHTML = `<div class="rap-item"><div class="placeholder"><span class="ph-frame">${esc(curTri.label)}</span></div><span class="rap-mtag">${esc(curTri.label)}</span></div>`;
+    } else {
+      gTri.innerHTML = '<div class="rap-empty mono">// 还未生成三视图</div>';
+    }
+
+    // 上身图 · 只显示已加入商品的
+    const gOut = document.getElementById('rap-grid-outfit');
+    const pickedOutfitsArr = [];
+    Object.entries(state.outfits).forEach(([modelId, cards]) => {
+      const m = getModelById(modelId);
+      cards.forEach(c => {
+        if (state.pickedOutfits.has(c.id)) {
+          pickedOutfitsArr.push({ modelName: m?.name || modelId, label: c.label });
+        }
+      });
+    });
+    document.getElementById('rap-c-outfit').textContent = pickedOutfitsArr.length;
+    document.querySelector('[data-group="outfit"]')?.classList.toggle('empty', pickedOutfitsArr.length === 0);
+    if (pickedOutfitsArr.length) {
+      gOut.innerHTML = pickedOutfitsArr.map(p => `<div class="rap-item"><div class="placeholder"><span class="ph-frame">${esc(p.modelName)}</span></div><span class="rap-mtag">${esc(p.label)}</span></div>`).join('');
+    } else {
+      gOut.innerHTML = '<div class="rap-empty mono">// 还未加入上身图</div>';
+    }
+
+    // 我的模卡 · 默认入资产库,但显不显示由用户决定 - 此处用 ownModels 数显示在商品详情下
+    const gOwn = document.getElementById('rap-grid-own');
+    document.getElementById('rap-c-own').textContent = state.ownModels.length;
+    document.querySelector('[data-group="own"]')?.classList.toggle('empty', state.ownModels.length === 0);
+    if (state.ownModels.length) {
+      gOwn.innerHTML = state.ownModels.map(m => `<div class="rap-item" data-src="${m.sourceImg}" data-name="${esc(m.name)}"><img src="${m.sourceImg}" alt=""><span class="rap-mtag">${esc(m.name)}</span></div>`).join('');
+    } else {
+      gOwn.innerHTML = '<div class="rap-empty mono">// 未上传我的模特</div>';
+    }
+
+    // 平台头图 · 只显示已加入商品的
+    const gPlat = document.getElementById('rap-grid-plat');
+    const pickedPlatArr = [];
+    Object.entries(state.platforms).forEach(([pk, p]) => {
+      p.cards.forEach((c, i) => {
+        if (state.pickedPlatformCards.has(c.id)) {
+          pickedPlatArr.push({ platName: PLATFORM_META[pk].name, idx: i + 1 });
+        }
+      });
+    });
+    document.getElementById('rap-c-plat').textContent = pickedPlatArr.length;
+    document.querySelector('[data-group="plat"]')?.classList.toggle('empty', pickedPlatArr.length === 0);
+    if (pickedPlatArr.length) {
+      gPlat.innerHTML = pickedPlatArr.map(p => `<div class="rap-item"><div class="placeholder"><span class="ph-frame">${esc(p.platName)}<br>${p.idx}</span></div><span class="rap-mtag">${esc(p.platName)}</span></div>`).join('');
+    } else {
+      gPlat.innerHTML = '<div class="rap-empty mono">// 还未加入平台头图</div>';
+    }
+
+    // 原图 / 我的模卡 点击 lightbox
+    document.querySelectorAll('#right-asset-preview .rap-item[data-src]').forEach(it => {
+      it.onclick = () => Shell._openLightbox(it.dataset.src, it.dataset.name);
+    });
+
+    refreshFinishCta();
+    refreshSideSteps();
+  }
+  // 兼容旧名
+  function refreshSideAssets() { renderAssetPreview(); }
+
+  // ============================================================
+  // Step 2 · 商品三视图 · 按钮触发生成 + 版本历史
+  // ============================================================
+  function autoGenTriView() {
+    if (state.triViews.length > 0) return triViewRegenerate();
+    const btn = document.getElementById('pane2-gen');
+    if (btn) btn.disabled = true;
+    Shell.toast('正在生成三视图', '~12s · ¥0.30');
+    setTimeout(() => {
+      const v = { id: uid(), label: `v${state.triViews.length + 1}`, createdAt: new Date().toLocaleTimeString().slice(0, 5) };
+      state.triViews.push(v);
+      state.triCurrent = v.id; // 默认选中最新 = 加入商品
+      // 切换显示
+      document.getElementById('triview-stage-empty').style.display = 'none';
+      document.getElementById('triview-stage').style.display = '';
+      document.getElementById('triview-versions').style.display = '';
+      if (btn) btn.disabled = false;
+      renderTriView();
+      refreshSideAssets();
+      updateBottom();
+      Shell.toast('三视图已生成 · 当前版本已加入商品', v.label);
+    }, 1200);
+  }
+  function triViewRegenerate() {
+    const btn = document.getElementById('pane2-gen');
+    if (btn) btn.disabled = true;
+    Shell.toast('重新生成中', '~¥0.30 · 新增版本');
+    setTimeout(() => {
+      const v = { id: uid(), label: `v${state.triViews.length + 1}`, createdAt: new Date().toLocaleTimeString().slice(0, 5) };
+      state.triViews.push(v);
+      state.triCurrent = v.id;
+      if (btn) btn.disabled = false;
+      renderTriView();
+      refreshSideAssets();
+      updateBottom();
+      Shell.toast('新版本已生成 · 已切换为加入商品的版本', v.label);
+    }, 1000);
+  }
+  function renderTriView() {
+    const display = document.getElementById('triview-display');
+    const vtag = document.getElementById('triview-vtag');
+    const list = document.getElementById('triview-list');
+    if (!display || !list) return;
+
+    const cur = state.triViews.find(v => v.id === state.triCurrent) || state.triViews[state.triViews.length - 1];
+    if (cur) {
+      const ph = display.querySelector('.ph-frame');
+      if (ph) ph.innerHTML = `[ 正面 ]  [ 侧面 ]  [ 背面 ]<br>三视角合一 · ${cur.label} · ${cur.createdAt}`;
+      if (vtag) vtag.textContent = `当前 · ${cur.label} · ${cur.createdAt} (已加入商品)`;
+    }
+
+    if (state.triViews.length === 0) {
+      list.innerHTML = '<div class="tv-empty">// 暂无版本</div>';
+      return;
+    }
+    list.innerHTML = state.triViews.map(v => `
+      <div class="tv-item ${v.id === state.triCurrent ? 'current' : ''}" data-id="${v.id}" title="${v.id === state.triCurrent ? '当前加入商品的版本' : '点击切换为加入商品的版本'}">
+        <div class="placeholder"><span class="ph-frame">${v.label}</span></div>
+        <span class="tv-vtag">${v.label} · ${v.createdAt}${v.id === state.triCurrent ? ' · ✓' : ''}</span>
+      </div>
+    `).join('');
+    list.querySelectorAll('.tv-item').forEach(it => {
+      it.onclick = () => {
+        state.triCurrent = it.dataset.id;
+        renderTriView();
+        refreshSideAssets();
+        Shell.toast('已切换加入商品的三视图版本');
+      };
+    });
+  }
+
+  // ============================================================
+  // Step 3 · 上身图生成 (SUB 2)
+  // 模特库模卡: 不入资产 · 上身图入资产
+  // 我的模卡:   入资产    · 上身图入资产
+  // ============================================================
+  const OUTFIT_LABELS = ['持物半身', '使用中', '镜前自拍', '全身展示'];
+
+  function getModelById(id) {
+    // own
+    const own = state.ownModels.find(m => m.id === id);
+    if (own) return { id: own.id, name: own.name, role: own.role, kind: 'mine' };
+    // lib (from DOM)
+    const card = document.querySelector(`#model-grid .model-card[data-id="${id}"]`);
+    if (card) return { id, name: card.dataset.name, role: card.dataset.role || '', kind: card.dataset.kind || 'lib' };
+    return null;
+  }
+
+  // 按钮触发 · 仅为还没生成过 outfits 的已选模特生成
+  function generateOutfitsForSelected() {
+    const targets = Array.from(state.selectedModels).filter(id => !state.outfits[id]);
+    if (targets.length === 0) {
+      Shell.toast('已选模特都已生成 · 切换到上身图查看');
+      showSub(2);
+      return;
+    }
+    Shell.toast(`正在生成 ${targets.length * 4} 张上身图`, `~¥${(targets.length * 0.4).toFixed(2)} · ${targets.length} 模特`);
+    setTimeout(() => {
+      targets.forEach(id => {
+        state.outfits[id] = OUTFIT_LABELS.map(label => ({ id: uid(), label }));
+      });
+      showSub(2);
+      renderOutfits();
+      refreshSideAssets();
+      updateBottom();
+      Shell.toast('上身图已生成 · 勾选喜欢的加入商品库');
+    }, 1500);
+  }
+
+  const PICK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-6"/></svg>';
+
+  function renderOutfits() {
+    const wrap = document.getElementById('outfits-wrap');
+    if (!wrap) return;
+    const modelsWithOutfits = Array.from(state.selectedModels).filter(id => state.outfits[id]);
+    if (modelsWithOutfits.length === 0) {
+      wrap.innerHTML = `
+        <div class="outfit-empty-step">
+          <div class="ee-t">还未生成上身图</div>
+          <div class="ee-d">// 回到 SUB1 勾选模特 · 点底部「生成上身图」按钮</div>
+          <div class="ee-btn"><button class="btn" onclick="showSub(1)">← 返回挑选模特</button></div>
+        </div>
+      `;
+      return;
+    }
+    wrap.innerHTML = modelsWithOutfits.map(modelId => {
+      const m = getModelById(modelId);
+      if (!m) return '';
+      const cards = state.outfits[modelId] || [];
+      const regenN = state.outfitRegenCount[modelId] || 0;
+      const pickedInBlock = cards.filter(c => state.pickedOutfits.has(c.id)).length;
+      return `
+        <div class="outfit-block ${m.kind === 'mine' ? 'kind-mine' : ''}" data-model="${modelId}">
+          <div class="ob-h">
+            <span class="ob-mname">
+              ${esc(m.name)}
+              <span class="ob-mkind">${m.kind === 'mine' ? '我的' : '模特库'}</span>
+            </span>
+            <span class="ob-meta">// 4 张 · 已加入商品 ${pickedInBlock}${regenN > 0 ? ` · 已重生 ${regenN} 轮` : ''}</span>
+            <button class="ob-regen-all" data-act="regen-all-outfit" data-model="${modelId}">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3.5-7.1L21 8M21 4v4h-4"/></svg>
+              整组重生
+            </button>
+          </div>
+          <div class="outfit-grid">
+            ${cards.map(c => `
+              <div class="outfit-card ${state.pickedOutfits.has(c.id) ? 'selected' : ''}" data-cid="${c.id}" data-model="${modelId}">
+                <div class="placeholder"><span class="ph-frame">${esc(m.name)}<br>${esc(c.label)}</span></div>
+                <span class="oc-tag">${esc(c.label)}</span>
+                <div class="oc-actions">
+                  <button class="oc-btn" data-act="regen-one" data-model="${modelId}" data-cid="${c.id}" title="单张重生">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3.5-7.1L21 8M21 4v4h-4"/></svg>
+                  </button>
+                  <button class="oc-btn del" data-act="del-outfit" data-model="${modelId}" data-cid="${c.id}" title="删除">
+                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+                  </button>
+                </div>
+                <button class="pick-chip ${state.pickedOutfits.has(c.id) ? 'picked' : ''}" data-act="pick-outfit" data-cid="${c.id}">
+                  ${PICK_SVG}${state.pickedOutfits.has(c.id) ? '已加入商品' : '加入商品'}
+                </button>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    wrap.querySelectorAll('[data-act="regen-all-outfit"]').forEach(b => {
+      b.onclick = e => { e.stopPropagation(); regenAllOutfitsFor(b.dataset.model); };
+    });
+    wrap.querySelectorAll('[data-act="regen-one"]').forEach(b => {
+      b.onclick = e => { e.stopPropagation(); regenOneOutfit(b.dataset.model, b.dataset.cid); };
+    });
+    wrap.querySelectorAll('[data-act="del-outfit"]').forEach(b => {
+      b.onclick = e => { e.stopPropagation(); delOutfitCard(b.dataset.model, b.dataset.cid); };
+    });
+    wrap.querySelectorAll('[data-act="pick-outfit"]').forEach(b => {
+      b.onclick = e => { e.stopPropagation(); togglePickOutfit(b.dataset.cid); };
+    });
+  }
+
+  function togglePickOutfit(cardId) {
+    if (state.pickedOutfits.has(cardId)) state.pickedOutfits.delete(cardId);
+    else state.pickedOutfits.add(cardId);
+    renderOutfits();
+    refreshSideAssets();
+  }
+
+  function regenAllOutfitsFor(modelId) {
+    // 老 cards 的 picked 状态保留(资产库仍存),新 cards 替换中央展示
+    state.outfitRegenCount[modelId] = (state.outfitRegenCount[modelId] || 0) + 1;
+    const v = state.outfitRegenCount[modelId];
+    // 移除旧 picked 标记(因为中央只展示新版本,旧版仅存档)
+    (state.outfits[modelId] || []).forEach(c => state.pickedOutfits.delete(c.id));
+    state.outfits[modelId] = OUTFIT_LABELS.map(label => ({ id: uid(), label: `${label} v${v + 1}` }));
+    renderOutfits(); refreshSideAssets();
+    const m = getModelById(modelId);
+    Shell.toast(`${m?.name || '模特'} 整组重生`, '~¥0.40 · 4 张');
+  }
+  function regenOneOutfit(modelId, cardId) {
+    const arr = state.outfits[modelId];
+    if (!arr) return;
+    const i = arr.findIndex(c => c.id === cardId);
+    if (i < 0) return;
+    state.pickedOutfits.delete(cardId);
+    const old = arr[i];
+    arr[i] = { id: uid(), label: `${old.label.split(' v')[0]} ★` };
+    renderOutfits(); refreshSideAssets();
+    Shell.toast('单张已重生', '~¥0.10');
+  }
+  function delOutfitCard(modelId, cardId) {
+    const arr = state.outfits[modelId];
+    if (!arr) return;
+    state.pickedOutfits.delete(cardId);
+    state.outfits[modelId] = arr.filter(c => c.id !== cardId);
+    renderOutfits(); refreshSideAssets();
+    Shell.toast('已删除上身图');
+  }
+
+  // ============================================================
+  // Step 3 · 上传新模特 · 弹窗
+  // ============================================================
+  let nmSourceImg = null;
+  const nmModal = document.getElementById('nm-modal');
+  const nmFile = document.getElementById('nm-file');
+  const nmZone = document.getElementById('nm-up-zone');
+  const nmSubmit = document.getElementById('nm-submit');
+
+  window.openNewModelModal = function() {
+    nmModal.classList.add('open');
+  };
+  window.closeNewModelModal = function() {
+    nmModal.classList.remove('open');
+  };
+  function resetNewModelForm() {
+    nmSourceImg = null;
+    document.getElementById('nm-name').value = '';
+    document.getElementById('nm-role').value = '';
+    document.getElementById('nm-gender').value = '女';
+    document.getElementById('nm-age').value = '22-28';
+    document.querySelectorAll('#nm-tags .nm-tag-chip').forEach(c => c.classList.remove('active'));
+    nmZone.classList.remove('has-img');
+    nmZone.innerHTML = `
+      <span class="nm-uz-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg></span>
+      <span class="nm-uz-t">点击上传参考图</span>
+      <span class="nm-uz-d">建议正面半身照 · JPG / PNG / WEBP</span>
+      <button class="nm-uz-replace" type="button">替换</button>
+    `;
+  }
+
+  document.getElementById('add-model-card')?.addEventListener('click', () => {
+    resetNewModelForm();
+    openNewModelModal();
+  });
+  nmModal?.addEventListener('click', e => { if (e.target === nmModal) closeNewModelModal(); });
+
+  nmZone?.addEventListener('click', () => nmFile.click());
+  nmFile?.addEventListener('change', e => {
+    const f = e.target.files?.[0];
+    if (!f || !f.type.startsWith('image/')) return;
+    const reader = new FileReader();
+    reader.onload = ev => {
+      nmSourceImg = ev.target.result;
+      nmZone.classList.add('has-img');
+      nmZone.innerHTML = `<img src="${nmSourceImg}" alt=""><button class="nm-uz-replace" type="button">替换</button>`;
+    };
+    reader.readAsDataURL(f);
+    e.target.value = '';
+  });
+
+  document.querySelectorAll('#nm-tags .nm-tag-chip').forEach(chip => {
+    chip.onclick = e => { e.preventDefault(); chip.classList.toggle('active'); };
+  });
+
+  nmSubmit?.addEventListener('click', () => {
+    const name = document.getElementById('nm-name').value.trim();
+    if (!nmSourceImg) { Shell.toast('请上传参考图'); return; }
+    if (!name) { Shell.toast('请填写模特名称'); return; }
+    const gender = document.getElementById('nm-gender').value;
+    const age = document.getElementById('nm-age').value;
+    const role = document.getElementById('nm-role').value.trim() || '我的模特';
+    const tags = [...document.querySelectorAll('#nm-tags .nm-tag-chip.active')].map(c => c.dataset.tag);
+
+    closeNewModelModal();
+    Shell.toast('AI 生成模卡中', '~6s · ¥0.30');
+
+    setTimeout(() => {
+      const id = 'mine-' + uid();
+      const model = {
+        id, kind: 'mine', name, base: `${gender} · ${age}`, role,
+        tags: tags.join(','), sourceImg: nmSourceImg,
+        createdAt: new Date().toLocaleTimeString().slice(0, 5),
+      };
+      state.ownModels.push(model);
+      // 注入卡片 + 自动选中
+      injectOwnModelCard(model);
+      state.selectedModels.add(id);
+      refreshCounts();
+      refreshSideAssets();
+      Shell.toast('模卡已生成并入资产库', `${name} · 已自动选中`);
+    }, 900);
+  });
+
+  function injectOwnModelCard(m) {
+    const grid = document.getElementById('model-grid');
+    if (!grid) return;
+    const div = document.createElement('div');
+    div.className = 'model-card kind-mine selected';
+    div.dataset.kind = 'mine';
+    div.dataset.id = m.id;
+    div.dataset.name = m.name;
+    div.dataset.base = m.base;
+    div.dataset.role = m.role;
+    div.dataset.tags = m.tags;
+    div.innerHTML = `
+      <span class="source-tag">[ 我的 ]</span>
+      <div class="placeholder"><img src="${m.sourceImg}" style="width:100%;height:100%;object-fit:cover;"></div>
+      <div class="lbl-bottom"><div class="nm">${esc(m.name)}</div><div class="tags">${esc(m.base)} · ${esc(m.role)}</div></div>
+    `;
+    // 插入到 "+ 上传新模特" 之后
+    const addCard = document.getElementById('add-model-card');
+    if (addCard && addCard.nextSibling) grid.insertBefore(div, addCard.nextSibling);
+    else grid.appendChild(div);
+    bindModelCard(div);
+
+    // 若当前为"全部"或"我的"视图则显示,否则隐藏
+    const activeKind = document.querySelector('#kind-toggle .kt-btn.active')?.dataset.kind || 'all';
+    if (activeKind === 'lib') div.style.display = 'none';
+  }
+
+  // ============================================================
+  // Step 4 · 平台头图
+  // ============================================================
+  function renderPlatformResults() {
+    const wrap = document.getElementById('platform-results');
+    if (!wrap) return;
+    const keys = Object.keys(state.platforms);
+    if (keys.length === 0) {
+      wrap.innerHTML = '<div class="platform-empty mono">// 勾选上方平台,点击下方「生成平台头图」按钮开始</div>';
+      return;
+    }
+    wrap.innerHTML = keys.map(pk => {
+      const p = state.platforms[pk];
+      const meta = PLATFORM_META[pk];
+      return `
+        <div class="platform-block" data-plat="${pk}">
+          <div class="pb-h">
+            <span class="pb-name">${meta.name}</span>
+            <span class="pb-spec">${meta.spec}</span>
+            <button class="pb-regen" data-act="regen-all" data-plat="${pk}">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3.5-7.1L21 8M21 4v4h-4"/></svg>
+              整组重生
+            </button>
+          </div>
+          <div class="pb-grid">
+            ${p.cards.map((c, i) => `
+              <div class="pb-card ${state.pickedPlatformCards.has(c.id) ? 'selected' : ''}" data-cid="${c.id}" data-plat="${pk}">
+                <div class="placeholder"><span class="ph-frame">${meta.name}<br>候选 ${i+1}</span></div>
+                <button class="pb-x" data-act="del" data-plat="${pk}" data-cid="${c.id}">
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+                </button>
+                <span class="pb-vtag">${c.label || `候选${i+1}`}</span>
+                <button class="pick-chip ${state.pickedPlatformCards.has(c.id) ? 'picked' : ''}" data-act="pick-plat" data-cid="${c.id}">
+                  ${PICK_SVG}${state.pickedPlatformCards.has(c.id) ? '已加入' : '加入商品'}
+                </button>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    wrap.querySelectorAll('[data-act="regen-all"]').forEach(b => {
+      b.onclick = e => { e.stopPropagation(); regenPlatform(b.dataset.plat); };
+    });
+    wrap.querySelectorAll('[data-act="del"]').forEach(b => {
+      b.onclick = e => {
+        e.stopPropagation();
+        const pk = b.dataset.plat, cid = b.dataset.cid;
+        state.pickedPlatformCards.delete(cid);
+        state.platforms[pk].cards = state.platforms[pk].cards.filter(c => c.id !== cid);
+        if (state.platforms[pk].cards.length === 0) delete state.platforms[pk];
+        renderPlatformResults(); refreshSideAssets();
+        Shell.toast('已删除候选');
+      };
+    });
+    wrap.querySelectorAll('[data-act="pick-plat"]').forEach(b => {
+      b.onclick = e => { e.stopPropagation(); togglePickPlatform(b.dataset.cid); };
+    });
+  }
+
+  function togglePickPlatform(cardId) {
+    if (state.pickedPlatformCards.has(cardId)) state.pickedPlatformCards.delete(cardId);
+    else state.pickedPlatformCards.add(cardId);
+    renderPlatformResults();
+    refreshSideAssets();
+  }
+
+  function genPlatform(pk) {
+    if (!state.platforms[pk]) state.platforms[pk] = { cards: [], regenCount: 0 };
+    state.platforms[pk].cards = Array.from({ length: 4 }, (_, i) => ({ id: uid(), label: `候选${i+1}` }));
+  }
+  function regenPlatform(pk) {
+    (state.platforms[pk]?.cards || []).forEach(c => state.pickedPlatformCards.delete(c.id));
+    state.platforms[pk].cards = Array.from({ length: 4 }, (_, i) => ({ id: uid(), label: `候选${i+1} v${++state.platforms[pk].regenCount + 1}` }));
+    renderPlatformResults(); refreshSideAssets();
+    Shell.toast(`${PLATFORM_META[pk].name} 整组重生`, '~¥0.50');
+  }
+
+  // 按钮触发 · 仅为还没生成过 platforms 的已勾选平台生成
+  function generatePlatformsForSelected() {
+    const targets = Array.from(state.selectedPlatforms).filter(pk => !state.platforms[pk]);
+    if (targets.length === 0) {
+      Shell.toast('已勾选平台都已生成 · 可勾选「加入商品」');
+      return;
+    }
+    Shell.toast(`正在生成 ${targets.length * 4} 张平台头图`, `~¥${(targets.length * 0.5).toFixed(2)} · ${targets.length} 平台`);
+    setTimeout(() => {
+      targets.forEach(pk => genPlatform(pk));
+      renderPlatformResults();
+      refreshSideAssets();
+      updateBottom();
+      Shell.toast('平台头图已生成 · 勾选喜欢的加入商品库');
+    }, 1500);
+  }
+
+  // 平台 checkbox 变化 → 仅记录勾选状态,不再自动生成
+  document.querySelectorAll('.plat-card input[type="checkbox"]').forEach(cb => {
+    cb.onchange = () => {
+      const pk = cb.dataset.plat;
+      if (cb.checked) {
+        state.selectedPlatforms.add(pk);
+      } else {
+        state.selectedPlatforms.delete(pk);
+        // 取消勾选时,如该平台已生成,保留资产但提示
+        if (state.platforms[pk]) {
+          state.platforms[pk].cards.forEach(c => state.pickedPlatformCards.delete(c.id));
+          delete state.platforms[pk];
+          renderPlatformResults();
+          refreshSideAssets();
+        }
+      }
+      updateBottom();
+    };
+  });
+
+  // 商品名 / 品类 输入时同步右栏资产预览
+  document.getElementById('ai-name')?.addEventListener('input', renderAssetPreview);
+  document.getElementById('ai-cat')?.addEventListener('change', renderAssetPreview);
+
+  // ============================================================
+  // INIT
+  // ============================================================
+  bindStepButtons();
+  refreshKindNums();
+  showStep(1);
+  refreshSideAssets();
+</script>
+
+</body>
+</html>
diff --git a/v2/product-detail.html b/v2/product-detail.html
new file mode 100644
index 0000000..040abaa
--- /dev/null
+++ b/v2/product-detail.html
@@ -0,0 +1,1359 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+<meta http-equiv="Pragma" content="no-cache">
+<meta http-equiv="Expires" content="0">
+<title>商品详情 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── 顶部 标题 + 状态 ─── */
+  .pd-title {
+    display: flex; align-items: center; gap: 12px;
+    margin-bottom: 22px;
+  }
+  .pd-title h1 {
+    font-size: 24px; font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--accent-black);
+    line-height: 1.25;
+  }
+  .pd-title .status {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 3px 10px;
+    background: var(--accent-emerald-bg, #e6f4ec);
+    color: var(--accent-emerald, #1f8a51);
+    border: 1px solid var(--accent-emerald-bd, #c4e3d1);
+    border-radius: var(--r-sm);
+    font-size: 11.5px;
+    font-weight: 500;
+  }
+
+  /* ─── 商品信息(含图片) + 快速操作(辅助) · 3 : 2 两栏 · 高度对齐 ─── */
+  .pd-overview {
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    gap: 16px;
+    margin-bottom: 24px;
+    align-items: stretch;
+  }
+  .pd-overview .ov-card { height: 100%; box-sizing: border-box; }
+  .pd-overview .ov-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 20px 22px;
+    min-width: 0;
+    position: relative;
+  }
+  /* 编辑按钮 · 放在 .ov-h 标题行右侧 (flex item, 不再 absolute) */
+  .pd-overview .ov-h { align-items: center; }
+  .ov-edit {
+    display: inline-flex; align-items: center; gap: 5px;
+    height: 28px;
+    padding: 0 12px;
+    background: var(--surface);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-72);
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
+  }
+  .ov-edit-single { margin-left: auto; }
+  .ov-edit:hover {
+    border-color: var(--heat-40);
+    color: var(--heat);
+    background: var(--heat-12);
+  }
+  .ov-edit svg { width: 12px; height: 12px; }
+  .ov-edit.primary {
+    background: var(--heat);
+    color: var(--accent-white);
+    border-color: var(--heat);
+    white-space: nowrap;
+  }
+  .ov-edit.primary:hover { filter: brightness(1.05); background: var(--heat); color: var(--accent-white); }
+
+  /* 编辑模式按钮组 (重置 + 取消 + 保存) */
+  .ov-edit-group {
+    display: none;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+  }
+  .ov-card.editing .ov-edit-single { display: none; }
+  .ov-card.editing .ov-edit-group { display: inline-flex; }
+
+  /* 字段 view ↔ edit 状态切换 */
+  .v-edit { display: none; }
+  .ov-card.editing .v-static { display: none; }
+  .ov-card.editing .v-edit { display: block; }
+
+  /* 输入控件 · 对齐新建表单 V2.1 规范 */
+  .v-input,
+  .v-select {
+    width: 100%;
+    max-width: 100%;
+    height: 38px;
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    padding: 0 14px;
+    font-size: 13.5px;
+    color: var(--accent-black);
+    background: var(--background-lighter);
+    font-family: inherit;
+    outline: none;
+    transition: border-color var(--t-base), box-shadow var(--t-base);
+  }
+  .v-input:focus,
+  .v-select:focus {
+    border-color: var(--heat-40);
+    box-shadow: inset 0 0 0 1px var(--heat-40);
+  }
+
+  /* 编辑模式下 · 核心卖点 bullet-list (与新建表单完全一致) */
+  .v-bullet-list {
+    list-style: none;
+    padding: 0; margin: 0;
+  }
+  .v-bullet-list .bl-item,
+  .v-bullet-list .bl-add {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    margin-bottom: 6px;
+    font-size: 13.5px;
+  }
+  .v-bullet-list .bl-add { background: transparent; border-style: dashed; }
+  .v-bullet-list .bl-add:focus-within { border-color: var(--heat-40); background: var(--surface); }
+  .v-bullet-list .num {
+    width: 22px; height: 22px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--heat);
+    font-weight: 700;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .v-bullet-list .bl-add .num {
+    background: transparent;
+    color: var(--heat);
+    border-color: var(--heat-40);
+  }
+  .v-bullet-list .bl-text { flex: 1; color: var(--accent-black); }
+  .v-bullet-list .bl-input {
+    flex: 1;
+    background: transparent; border: 0; outline: none;
+    font-size: 13.5px;
+    color: var(--accent-black);
+    font-family: inherit;
+  }
+  .v-bullet-list .bl-input::placeholder { color: var(--black-alpha-48); }
+  .v-bullet-list .bl-x {
+    width: 22px; height: 22px;
+    color: var(--black-alpha-48);
+    cursor: pointer;
+    display: grid; place-items: center;
+    border-radius: var(--r-sm);
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .v-bullet-list .bl-x:hover { color: var(--accent-crimson, #c43d3d); background: var(--crimson-bg, #fdebea); }
+  .v-bullet-list .bl-x svg { width: 11px; height: 11px; }
+
+  /* 编辑模式下,商品图片显示一个 [+ 上传] 占位 */
+  .img-upload {
+    display: none;
+    aspect-ratio: 1;
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    place-items: center;
+    color: var(--black-alpha-48);
+    background: var(--background-lighter);
+    transition: border-color var(--t-base), color var(--t-base);
+  }
+  .img-upload:hover { border-color: var(--heat); color: var(--heat); }
+  .img-upload svg { width: 18px; height: 18px; }
+  .ov-card.editing .img-upload { display: grid; }
+  .ov-card.editing .ov-images-sub .thumb { cursor: pointer; }
+  .ov-card.editing .ov-images-sub .thumb::after {
+    content: '×';
+    position: absolute;
+    top: 4px; right: 4px;
+    width: 18px; height: 18px;
+    background: rgba(0,0,0,.7);
+    color: var(--accent-white);
+    border-radius: 50%;
+    display: grid; place-items: center;
+    font-size: 13px;
+    line-height: 1;
+  }
+  .ov-images-sub .thumb { position: relative; }
+  .pd-overview .ov-h {
+    display: flex; align-items: baseline; gap: 8px;
+    margin-bottom: 14px;
+  }
+  .pd-overview .ov-h .ti {
+    font-size: 14px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .pd-overview .ov-h .ct {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .pd-overview .ov-h .more {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--heat);
+    cursor: pointer;
+  }
+  .pd-overview .ov-h .more:hover { text-decoration: underline; }
+
+  /* 商品信息卡片内 · 上信息 / 下图片 (堆叠, 图片铺满卡片) */
+  .ov-main-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .ov-main-grid > .ov-images-sub {
+    padding-top: 18px;
+    border-top: 1px solid var(--border-faint);
+  }
+  .ov-info .row {
+    display: flex; gap: 12px;
+    margin-bottom: 10px;
+    font-size: 13px;
+  }
+  .ov-info .row:last-child { margin-bottom: 0; }
+  .ov-info .k {
+    width: 64px;
+    flex-shrink: 0;
+    color: var(--black-alpha-48);
+    font-size: 12.5px;
+  }
+  .ov-info .v {
+    flex: 1; min-width: 0;
+    color: var(--accent-black);
+    line-height: 1.6;
+  }
+  .ov-info .v .bullet { display: block; }
+  .ov-info .v .bullet::before {
+    content: '·';
+    color: var(--heat);
+    margin-right: 6px;
+    font-weight: 700;
+  }
+
+  /* 商品图片 · 卡片内子 section */
+  .ov-images-sub .sub-h {
+    display: flex; align-items: baseline; gap: 6px;
+    margin-bottom: 10px;
+  }
+  .ov-images-sub .sub-h .ti {
+    font-size: 12.5px; font-weight: 500;
+    color: var(--black-alpha-72);
+  }
+  .ov-images-sub .sub-h .ct {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .ov-images-sub .sub-h .more {
+    margin-left: auto;
+    font-size: 11.5px;
+    color: var(--heat);
+    cursor: pointer;
+  }
+  .ov-images-sub .sub-h .more:hover { text-decoration: underline; }
+  .ov-images-sub .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+    gap: 8px;
+  }
+  .ov-images-sub .thumb {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .ov-images-sub .thumb img { width: 100%; height: 100%; object-fit: cover; }
+
+  /* 快速操作 · 2 段:图片生成(3 等比 CTA)+ 视频生成(1 CTA) */
+  .ov-actions { display: flex; flex-direction: column; }
+  .ov-actions .qa-section { margin-bottom: 14px; }
+  .ov-actions .qa-section:last-child { margin-bottom: 0; }
+  .ov-actions .qa-section-h {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .ov-actions .qa-row-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+  .ov-actions .qa-row-1 .qa-item { width: 100%; }
+  .qa-item {
+    display: flex; flex-direction: column; align-items: center; gap: 8px;
+    padding: 14px 10px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    font-size: 12.5px;
+    color: var(--accent-black);
+    text-align: center;
+    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+  }
+  .qa-item:hover { border-color: var(--heat); background: var(--heat-12); color: var(--heat); }
+  .qa-item .ic {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    color: var(--heat);
+    flex-shrink: 0;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+  }
+  .qa-item:hover .ic { border-color: var(--heat-20); background: var(--surface); }
+  .qa-item .ic svg { width: 16px; height: 16px; }
+  .qa-item.primary {
+    background: var(--heat);
+    color: var(--accent-white);
+    border-color: var(--heat);
+  }
+  .qa-item.primary .ic { background: rgba(255,255,255,.16); color: var(--accent-white); border-color: rgba(255,255,255,.24); }
+  .qa-item.primary:hover { color: var(--accent-white); box-shadow: var(--shadow-cta-hover); }
+
+  /* 状态 pill 三态(通过/不通过/归档) */
+  .asset-card .meta .pill.pass {
+    background: var(--accent-emerald-bg, #e6f4ec);
+    color: var(--accent-emerald, #1f8a51);
+    border: 1px solid var(--accent-emerald-bd, #c4e3d1);
+    cursor: pointer;
+  }
+  .asset-card .meta .pill.fail {
+    background: var(--crimson-bg, #fdebea);
+    color: var(--accent-crimson, #c43d3d);
+    border: 1px solid var(--crimson-bd, #f5c2bf);
+    cursor: pointer;
+  }
+  .asset-card .meta .pill.archive {
+    background: var(--background-lighter);
+    color: var(--black-alpha-56);
+    border: 1px solid var(--border-faint);
+    cursor: pointer;
+  }
+
+  /* ─── Tabs ─── */
+  .pd-tabs {
+    display: flex; gap: 4px;
+    border-bottom: 1px solid var(--border-faint);
+    margin-bottom: 18px;
+  }
+  .pd-tabs .tab {
+    padding: 10px 14px;
+    font-size: 13.5px;
+    color: var(--black-alpha-56);
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: 500;
+    transition: color var(--t-base), border-color var(--t-base);
+  }
+  .pd-tabs .tab:hover { color: var(--accent-black); }
+  .pd-tabs .tab.active {
+    color: var(--accent-black);
+    border-bottom-color: var(--heat);
+    font-weight: 600;
+  }
+  .tab-pane { display: none; }
+  .tab-pane.active { display: block; }
+
+  /* ─── AI 素材 工具栏 ─── */
+  .pd-toolbar {
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 14px;
+    flex-wrap: wrap;
+  }
+  .pd-toolbar .total {
+    font-size: 14px; font-weight: 600;
+    color: var(--accent-black);
+  }
+  .pd-toolbar .total .ct {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    margin-left: 4px;
+    font-weight: 500;
+  }
+  .pd-toolbar .filter {
+    display: inline-flex; align-items: center; gap: 4px;
+    height: 30px;
+    padding: 0 10px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-size: 12.5px;
+    color: var(--black-alpha-72);
+  }
+  .pd-toolbar .filter svg { width: 10px; height: 10px; opacity: .6; }
+  .pd-toolbar .right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
+  .pd-toolbar .view-tog {
+    display: inline-flex;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 2px;
+  }
+  .pd-toolbar .view-tog button {
+    width: 28px; height: 26px;
+    display: grid; place-items: center;
+    border: 0;
+    background: transparent;
+    color: var(--black-alpha-48);
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .pd-toolbar .view-tog button.active {
+    background: var(--accent-black);
+    color: var(--accent-white);
+  }
+  .pd-toolbar .view-tog button svg { width: 13px; height: 13px; }
+
+  /* ─── AI 素材 网格 ─── */
+  .asset-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 12px;
+  }
+  .asset-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    overflow: hidden;
+    cursor: pointer;
+    transition: border-color var(--t-base), transform var(--t-fast);
+  }
+  .asset-card:hover { border-color: var(--black-alpha-24); transform: translateY(-1px); }
+  .asset-card .thumb {
+    aspect-ratio: 3/4;
+    position: relative;
+    overflow: hidden;
+  }
+  .asset-card .thumb .type-pill {
+    position: absolute; top: 8px; left: 8px;
+    padding: 3px 8px;
+    background: rgba(0,0,0,.65);
+    color: var(--accent-white);
+    border-radius: var(--r-sm);
+    font-size: 11px;
+    font-weight: 500;
+    backdrop-filter: blur(4px);
+  }
+  .asset-card .meta {
+    padding: 10px 12px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .asset-card .meta .pill {
+    padding: 2px 8px;
+    background: var(--accent-emerald-bg, #e6f4ec);
+    color: var(--accent-emerald, #1f8a51);
+    border: 1px solid var(--accent-emerald-bd, #c4e3d1);
+    border-radius: var(--r-sm);
+    font-size: 10.5px;
+    font-weight: 500;
+  }
+  .asset-card .meta .date {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .pd-more {
+    text-align: center;
+    padding: 18px 0 32px;
+  }
+  .pd-more button {
+    height: 32px;
+    padding: 0 18px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    color: var(--black-alpha-72);
+    font-size: 12.5px;
+    font-family: inherit;
+    cursor: pointer;
+  }
+  .pd-more button:hover { border-color: var(--heat-40); color: var(--heat); }
+
+  /* ─── 任务记录 · 表格 ─── */
+  .task-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-bottom: 18px;
+  }
+  .task-stat {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 14px 18px;
+  }
+  .task-stat .lbl {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+    margin-bottom: 6px;
+  }
+  .task-stat .v {
+    font-size: 22px; font-weight: 600;
+    color: var(--accent-black);
+    letter-spacing: -.01em;
+  }
+  .task-stat .v small {
+    font-size: 13px;
+    color: var(--black-alpha-48);
+    font-weight: 400;
+    margin-left: 4px;
+  }
+  .task-stat.ok .v { color: var(--accent-emerald, #1f8a51); }
+  .task-stat.gen .v { color: var(--heat); }
+  .task-stat.err .v { color: var(--accent-crimson, #c43d3d); }
+
+  .task-table {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    overflow: hidden;
+  }
+  .task-row {
+    display: grid;
+    grid-template-columns: 36px 1.8fr 0.7fr 1fr 1.1fr 1.1fr 0.7fr 100px;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 18px;
+    border-bottom: 1px solid var(--border-faint);
+    font-size: 13px;
+  }
+  .task-row:last-child { border-bottom: 0; }
+  .task-row.head {
+    background: var(--background-lighter);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    letter-spacing: .04em;
+    font-weight: 500;
+    padding: 10px 18px;
+  }
+  .task-row .ph {
+    width: 36px; height: 36px;
+    border-radius: var(--r-sm);
+    flex-shrink: 0;
+  }
+  .task-row .nm {
+    color: var(--accent-black);
+    font-weight: 500;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .task-row .nm .id-mono {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    font-weight: 400;
+  }
+  .task-row .qty { color: var(--black-alpha-72); font-family: var(--font-mono); }
+  .task-row .time {
+    color: var(--black-alpha-72);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: .01em;
+  }
+  .task-row .dur {
+    color: var(--black-alpha-56);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .task-row .pill {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 3px 9px;
+    border-radius: var(--r-sm);
+    font-size: 11.5px;
+    font-weight: 500;
+    width: fit-content;
+  }
+  .task-row .pill .dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+  }
+  .task-row .pill.ok {
+    background: var(--accent-emerald-bg, #e6f4ec);
+    color: var(--accent-emerald, #1f8a51);
+    border: 1px solid var(--accent-emerald-bd, #c4e3d1);
+  }
+  .task-row .pill.ok .dot { background: var(--accent-emerald, #1f8a51); }
+  .task-row .pill.gen {
+    background: var(--heat-12);
+    color: var(--heat);
+    border: 1px solid var(--heat-20);
+  }
+  .task-row .pill.gen .dot { background: var(--heat); animation: pulse 1.6s ease-in-out infinite; }
+  .task-row .pill.err {
+    background: var(--crimson-bg, #fdebea);
+    color: var(--accent-crimson, #c43d3d);
+    border: 1px solid var(--crimson-bd, #f5c2bf);
+  }
+  .task-row .pill.err .dot { background: var(--accent-crimson, #c43d3d); }
+  .task-row .pill.wait {
+    background: var(--background-lighter);
+    color: var(--black-alpha-56);
+    border: 1px solid var(--border-faint);
+  }
+  .task-row .pill.wait .dot { background: var(--black-alpha-32); }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: .3; }
+  }
+  .task-row .status-cell { display: flex; flex-direction: column; gap: 4px; }
+  .task-row .progress {
+    width: 100%; height: 3px;
+    background: var(--black-alpha-12);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .task-row .progress > span {
+    display: block;
+    height: 100%;
+    background: var(--heat);
+  }
+  .task-row .ops {
+    display: inline-flex; gap: 4px;
+    justify-self: end;
+  }
+  .task-row .ops button {
+    padding: 4px 10px;
+    height: 26px;
+    background: transparent;
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-72);
+    font-size: 11.5px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: border-color var(--t-base), color var(--t-base);
+  }
+  .task-row .ops button:hover { border-color: var(--heat-40); color: var(--heat); }
+  .task-row .ops button.danger:hover { border-color: var(--crimson-bd, #f5c2bf); color: var(--accent-crimson, #c43d3d); }
+
+  @media (max-width: 1100px) {
+    .pd-overview { grid-template-columns: 1fr; }
+    .ov-actions .qa-grid {
+      display: grid !important;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+  @media (max-width: 900px) {
+    .ov-actions .qa-grid { grid-template-columns: 1fr 1fr; }
+    .task-stats { grid-template-columns: repeat(2, 1fr); }
+  }
+</style>
+</head>
+<body>
+<div id="page">
+
+  <!-- 顶部 标题 + 状态 -->
+  <div class="pd-title">
+    <h1 id="pd-name">补水保湿精华液</h1>
+  </div>
+
+  <!-- 商品信息(含图片) + 快速操作 · 主辅两栏 -->
+  <div class="pd-overview">
+
+    <div class="ov-card ov-main" id="ov-main-card">
+      <div class="ov-h">
+        <span class="ti">商品信息</span>
+        <!-- view 模式: 单个 [编辑信息] -->
+        <button class="ov-edit ov-edit-single" type="button" id="ov-edit-btn" title="编辑商品信息">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+          编辑信息
+        </button>
+        <!-- edit 模式: [重置] [取消] [保存] -->
+        <div class="ov-edit-group">
+          <button class="ov-edit" type="button" id="ov-reset-btn" title="重置为修改前">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
+            重置
+          </button>
+          <button class="ov-edit" type="button" id="ov-cancel-btn">取消</button>
+          <button class="ov-edit primary" type="button" id="ov-save-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+            保存
+          </button>
+        </div>
+      </div>
+
+      <div class="ov-main-grid">
+
+        <div class="ov-info">
+          <div class="row" data-field="name">
+            <div class="k">商品名称</div>
+            <div class="v">
+              <span class="v-static">补水保湿精华液</span>
+              <input class="v-edit v-input" type="text" value="补水保湿精华液" maxlength="100">
+            </div>
+          </div>
+          <div class="row" data-field="cat">
+            <div class="k">品类</div>
+            <div class="v">
+              <span class="v-static">美妆个护 / 精华液</span>
+              <select class="v-edit v-select">
+                <option>美妆个护 / 精华液</option>
+                <option>美妆个护</option>
+                <option>服饰内衣</option>
+                <option>食品饮料</option>
+                <option>家居家电</option>
+                <option>数码 3C</option>
+                <option>个护清洁</option>
+                <option>运动户外</option>
+                <option>母婴亲子</option>
+              </select>
+            </div>
+          </div>
+          <div class="row" data-field="target">
+            <div class="k">目标人群</div>
+            <div class="v">
+              <span class="v-static">22-32 岁女性、敏感肌、办公室通勤</span>
+              <input class="v-edit v-input" type="text" value="22-32 岁女性、敏感肌、办公室通勤">
+            </div>
+          </div>
+          <div class="row" data-field="bullets">
+            <div class="k">核心卖点</div>
+            <div class="v">
+              <div class="v-static">
+                <span class="bullet">透明质酸 + B5,敷完不黏不闷</span>
+                <span class="bullet">30g 大容量精华液</span>
+                <span class="bullet">0 香精 0 酒精,敏感肌可用</span>
+              </div>
+              <ul class="v-edit v-bullet-list" id="v-bullets-list">
+                <!-- li.bl-item × N + li.bl-add 由 JS 在进入编辑模式时渲染 -->
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="ov-images-sub">
+          <div class="sub-h">
+            <span class="ti">商品图片</span>
+            <span class="ct">(6)</span>
+          </div>
+          <div class="grid" id="ov-images-grid">
+            <div class="thumb placeholder"><span class="ph-frame">1:1</span></div>
+            <div class="thumb placeholder"><span class="ph-frame">1:1</span></div>
+            <div class="thumb placeholder"><span class="ph-frame">1:1</span></div>
+            <div class="thumb placeholder"><span class="ph-frame">1:1</span></div>
+            <div class="thumb placeholder"><span class="ph-frame">1:1</span></div>
+            <div class="thumb placeholder"><span class="ph-frame">1:1</span></div>
+            <div class="img-upload" id="ov-img-add" title="上传图片">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="ov-card ov-actions">
+      <div class="ov-h"><span class="ti">快速操作</span></div>
+      <div class="qa-section">
+        <div class="qa-section-h">// 图片生成</div>
+        <div class="qa-row-3">
+          <div class="qa-item" data-go="model-photo" role="button" tabindex="0">
+            <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a4 4 0 014-4h8a4 4 0 014 4v2"/></svg></span>
+            模特上身图
+          </div>
+          <div class="qa-item" data-go="platform-cover" role="button" tabindex="0">
+            <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg></span>
+            平台套图
+          </div>
+          <div class="qa-item" data-go="image-optimize" role="button" tabindex="0">
+            <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M5 5l14 14M5 19l14-14"/></svg></span>
+            图片优化
+          </div>
+        </div>
+      </div>
+      <div class="qa-section">
+        <div class="qa-section-h">// 视频生成</div>
+        <div class="qa-row-1">
+          <div class="qa-item primary" data-go="projects-new" role="button" tabindex="0">
+            <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg></span>
+            生成视频
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Tabs -->
+  <div class="pd-tabs">
+    <button class="tab active" type="button" data-tab="assets">AI 生成素材</button>
+    <button class="tab" type="button" data-tab="videos">视频项目</button>
+    <button class="tab" type="button" data-tab="tasks">任务记录</button>
+  </div>
+
+  <!-- ===== AI 生成素材 ===== -->
+  <div class="tab-pane active" data-pane="assets">
+
+    <div class="pd-toolbar">
+      <div class="total">全部 AI 素材 <span class="ct">(32)</span></div>
+      <button class="filter" type="button">
+        全部类型
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <button class="filter" type="button">
+        全部状态
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <div class="right">
+        <div class="view-tog">
+          <button type="button" class="active" title="网格视图">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+          </button>
+          <button type="button" title="列表视图">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+          </button>
+        </div>
+        <button class="filter" type="button">
+          最新生成
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="asset-grid">
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">模特上身图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">模特上身图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">模特上身图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill fail" data-status="fail" title="点击切换状态">不通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">模特上身图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">模特上身图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill archive" data-status="archive" title="点击切换状态">归档</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">平台套图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">平台套图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">平台套图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill fail" data-status="fail" title="点击切换状态">不通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">平台套图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill archive" data-status="archive" title="点击切换状态">归档</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">平台套图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">三视图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 15:30</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder"><span class="type-pill">三视图</span><span class="ph-frame">3:4</span></div><div class="meta"><span class="pill archive" data-status="archive" title="点击切换状态">归档</span><span class="date">2026-05-19 15:30</span></div></div>
+    </div>
+
+    <div class="pd-more"><button type="button">加载更多</button></div>
+  </div>
+
+  <!-- ===== 视频项目 ===== -->
+  <div class="tab-pane" data-pane="videos">
+    <div class="pd-toolbar">
+      <div class="total">该商品视频项目 <span class="ct">(4)</span></div>
+      <button class="filter" type="button">
+        全部状态
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <div class="right">
+        <button class="filter" type="button">
+          最新导出
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="asset-grid">
+      <div class="asset-card"><div class="thumb placeholder" style="aspect-ratio: 9/16;"><span class="type-pill">视频 · 9:16</span><span class="ph-frame">补水面膜 · v3</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-20 12:08</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder" style="aspect-ratio: 9/16;"><span class="type-pill">视频 · 9:16</span><span class="ph-frame">补水面膜 · v2</span></div><div class="meta"><span class="pill pass" data-status="pass" title="点击切换状态">通过</span><span class="date">2026-05-19 10:24</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder" style="aspect-ratio: 9/16;"><span class="type-pill">视频 · 9:16</span><span class="ph-frame">熬夜急救 · v1</span></div><div class="meta"><span class="pill archive" data-status="archive" title="点击切换状态">归档</span><span class="date">2026-05-18 21:42</span></div></div>
+      <div class="asset-card"><div class="thumb placeholder" style="aspect-ratio: 9/16;"><span class="type-pill">视频 · 9:16</span><span class="ph-frame">补水面膜 · v1</span></div><div class="meta"><span class="pill fail" data-status="fail" title="点击切换状态">不通过</span><span class="date">2026-05-17 16:00</span></div></div>
+    </div>
+
+    <div class="pd-more"><button type="button">加载更多</button></div>
+  </div>
+
+  <!-- ===== 任务记录 ===== -->
+  <div class="tab-pane" data-pane="tasks">
+
+    <!-- 顶部统计概览 -->
+    <div class="task-stats">
+      <div class="task-stat">
+        <div class="lbl">// TOTAL</div>
+        <div class="v">12 <small>个任务</small></div>
+      </div>
+      <div class="task-stat ok">
+        <div class="lbl">// SUCCESS</div>
+        <div class="v">9</div>
+      </div>
+      <div class="task-stat gen">
+        <div class="lbl">// RUNNING</div>
+        <div class="v">2</div>
+      </div>
+      <div class="task-stat err">
+        <div class="lbl">// FAILED</div>
+        <div class="v">1</div>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="pd-toolbar">
+      <div class="total">任务记录 <span class="ct">(12)</span></div>
+      <button class="filter" type="button">
+        全部类型
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <button class="filter" type="button">
+        全部状态
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <button class="filter" type="button">
+        近 7 天
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <div class="right">
+        <button class="filter" type="button">
+          提交时间倒序
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 任务表格 -->
+    <div class="task-table">
+      <div class="task-row head">
+        <span></span>
+        <span>任务 / 编号</span>
+        <span>数量</span>
+        <span>状态</span>
+        <span>提交时间</span>
+        <span>完成时间</span>
+        <span>耗时</span>
+        <span style="justify-self:end">操作</span>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">视频素材 <span class="id-mono">// T-2026-0519-0007</span></div>
+        <div class="qty">1 个</div>
+        <div class="status-cell">
+          <span class="pill gen"><span class="dot"></span>生成中 60%</span>
+          <span class="progress"><span style="width:60%"></span></span>
+        </div>
+        <div class="time">2026-05-19 16:00</div>
+        <div class="time">—</div>
+        <div class="dur">—</div>
+        <div class="ops">
+          <button type="button">查看</button>
+          <button type="button" class="danger">取消</button>
+        </div>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">模特上身图 <span class="id-mono">// T-2026-0519-0006</span></div>
+        <div class="qty">3 张</div>
+        <div class="status-cell">
+          <span class="pill wait"><span class="dot"></span>排队中</span>
+        </div>
+        <div class="time">2026-05-19 15:58</div>
+        <div class="time">—</div>
+        <div class="dur">—</div>
+        <div class="ops">
+          <button type="button">查看</button>
+          <button type="button" class="danger">取消</button>
+        </div>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">模特上身图 <span class="id-mono">// T-2026-0519-0005</span></div>
+        <div class="qty">5 张</div>
+        <div class="status-cell">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+        </div>
+        <div class="time">2026-05-19 15:30</div>
+        <div class="time">2026-05-19 15:32</div>
+        <div class="dur">2m 14s</div>
+        <div class="ops">
+          <button type="button">查看</button>
+        </div>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">平台套图 <span class="id-mono">// T-2026-0519-0004</span></div>
+        <div class="qty">4 张</div>
+        <div class="status-cell">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+        </div>
+        <div class="time">2026-05-19 14:20</div>
+        <div class="time">2026-05-19 14:23</div>
+        <div class="dur">3m 02s</div>
+        <div class="ops">
+          <button type="button">查看</button>
+        </div>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">模特上身图 <span class="id-mono">// T-2026-0519-0003</span></div>
+        <div class="qty">4 张</div>
+        <div class="status-cell">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+        </div>
+        <div class="time">2026-05-19 13:10</div>
+        <div class="time">2026-05-19 13:13</div>
+        <div class="dur">2m 50s</div>
+        <div class="ops">
+          <button type="button">查看</button>
+        </div>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">三视图 <span class="id-mono">// T-2026-0519-0002</span></div>
+        <div class="qty">3 张</div>
+        <div class="status-cell">
+          <span class="pill err"><span class="dot"></span>失败</span>
+        </div>
+        <div class="time">2026-05-19 12:00</div>
+        <div class="time">2026-05-19 12:01</div>
+        <div class="dur">30s</div>
+        <div class="ops">
+          <button type="button">重试</button>
+          <button type="button">日志</button>
+        </div>
+      </div>
+
+      <div class="task-row">
+        <div class="ph placeholder"></div>
+        <div class="nm">平台套图 <span class="id-mono">// T-2026-0518-0001</span></div>
+        <div class="qty">6 张</div>
+        <div class="status-cell">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+        </div>
+        <div class="time">2026-05-18 18:42</div>
+        <div class="time">2026-05-18 18:46</div>
+        <div class="dur">4m 10s</div>
+        <div class="ops">
+          <button type="button">查看</button>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="pd-more"><button type="button">加载更多</button></div>
+  </div>
+
+</div>
+
+<script src="assets/shell.js"></script>
+<script>
+  // 从 URL ?product= 读出商品名,注入 crumb / h1 / 商品名字段
+  const _urlProductName = (function () {
+    try {
+      const q = new URLSearchParams(location.search);
+      const v = q.get('product') || q.get('name');
+      return v ? decodeURIComponent(v) : '';
+    } catch (e) { return ''; }
+  })();
+  const _productDisplayName = _urlProductName || '补水保湿精华液';
+  Shell.render({
+    active: 'products',
+    crumbs: [
+      { label: '工作台', href: 'index.html' },
+      { label: '商品库', href: 'products.html' },
+      { label: _productDisplayName }
+    ]
+  });
+  if (_urlProductName) {
+    const h1 = document.getElementById('pd-name');
+    if (h1) h1.textContent = _urlProductName;
+    const nameRow = document.querySelector('[data-field="name"] .v-static');
+    if (nameRow) nameRow.textContent = _urlProductName;
+    const nameInput = document.querySelector('[data-field="name"] .v-input');
+    if (nameInput) nameInput.value = _urlProductName;
+  }
+
+  // 快速操作 · 跳转至对应工作台/wizard 并携带商品名
+  (function bindQuickActions() {
+    const productName = (document.querySelector('.pd-title h1, .pd-title, .ov-h .ti, h1') || {}).textContent || '';
+    const crumbName = (document.querySelector('.crumb-current') || {}).textContent
+      || (document.querySelectorAll('.crumb-item').length ? document.querySelectorAll('.crumb-item')[document.querySelectorAll('.crumb-item').length-1].textContent : '')
+      || '补水保湿精华液';
+    const name = (crumbName || productName || '').trim();
+    document.querySelectorAll('.qa-item[data-go]').forEach(item => {
+      item.style.cursor = 'pointer';
+      let go = item.dataset.go;
+      // 图片优化暂复用 model-photo.html?mode=tri (后端实际生成人物 / 商品三视图)
+      let url;
+      if (go === 'image-optimize') {
+        url = 'model-photo.html?mode=tri&t=' + Date.now() + '&product=' + encodeURIComponent(name);
+      } else {
+        url = go + '.html?t=' + Date.now() + '&product=' + encodeURIComponent(name);
+      }
+      item.addEventListener('click', () => { location.href = url; });
+      item.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); location.href = url; }
+      });
+    });
+  })();
+
+  // 任务记录 · 「查看」按钮 / 行点击 → 跳对应工作台
+  (function bindTaskRowJump() {
+    const TYPE_MAP = {
+      '模特上身图': 'model-photo.html',
+      '平台套图': 'platform-cover.html',
+      '视频素材': 'projects-new.html',
+      '视频': 'projects-new.html',
+      '三视图': 'model-photo.html?mode=tri',
+    };
+    const productName = (document.getElementById('pd-name')?.textContent || '').trim();
+    document.querySelectorAll('.task-table .task-row:not(.head)').forEach(row => {
+      const nameCell = row.querySelector('.nm');
+      if (!nameCell) return;
+      // 任务类型 = nm 的第一段文本(去掉 id-mono)
+      const type = nameCell.firstChild?.nodeValue?.trim() || '';
+      let url = TYPE_MAP[type];
+      if (!url) return;
+      url += (url.includes('?') ? '&' : '?') + 't=' + Date.now()
+           + (productName ? '&product=' + encodeURIComponent(productName) : '');
+      row.style.cursor = 'pointer';
+      row.addEventListener('click', e => {
+        if (e.target.closest('.ops button')) return;
+        location.href = url;
+      });
+      // 「查看」按钮
+      row.querySelectorAll('.ops button').forEach(btn => {
+        if (btn.textContent.trim() === '查看') {
+          btn.addEventListener('click', e => {
+            e.stopPropagation();
+            location.href = url;
+          });
+        }
+      });
+    });
+  })();
+
+  // 状态 pill · 三态循环(通过 → 不通过 → 归档 → 通过)
+  (function bindStatusPills() {
+    const labels = { pass: '通过', fail: '不通过', archive: '归档' };
+    const order = ['pass', 'fail', 'archive'];
+    document.addEventListener('click', e => {
+      const pill = e.target.closest('.asset-card .meta .pill[data-status]');
+      if (!pill) return;
+      e.stopPropagation();
+      const cur = pill.dataset.status;
+      const next = order[(order.indexOf(cur) + 1) % order.length];
+      pill.dataset.status = next;
+      pill.classList.remove('pass', 'fail', 'archive');
+      pill.classList.add(next);
+      pill.textContent = labels[next];
+      Shell.toast('状态已更新', labels[next]);
+    });
+  })();
+
+  // Tab 切换
+  document.querySelectorAll('.pd-tabs .tab').forEach(t => {
+    t.onclick = () => {
+      document.querySelectorAll('.pd-tabs .tab').forEach(x => x.classList.remove('active'));
+      t.classList.add('active');
+      const target = t.dataset.tab;
+      document.querySelectorAll('.tab-pane').forEach(p => {
+        p.classList.toggle('active', p.dataset.pane === target);
+      });
+    };
+  });
+
+  // 视图切换
+  document.querySelectorAll('.view-tog button').forEach(b => {
+    b.onclick = () => {
+      const wrap = b.closest('.view-tog');
+      wrap.querySelectorAll('button').forEach(x => x.classList.remove('active'));
+      b.classList.add('active');
+    };
+  });
+
+  // 编辑商品信息 · 在卡片内 inline 切换 view ↔ edit
+  (function initEdit() {
+    const card = document.getElementById('ov-main-card');
+    const editBtn = document.getElementById('ov-edit-btn');
+    const cancelBtn = document.getElementById('ov-cancel-btn');
+    const saveBtn = document.getElementById('ov-save-btn');
+    if (!card || !editBtn || !cancelBtn || !saveBtn) return;
+
+    // 同时同步顶部 h1 标题 — 商品名称改动后,顶部大标题也跟着更新
+    const pdName = document.getElementById('pd-name');
+
+    function escapeHtml(s) {
+      return s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+    }
+    const X_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+
+    // bullet-list 编辑模式 · 操作 helpers
+    function renumberBullets(list) {
+      [...list.querySelectorAll('.bl-item .num')].forEach((n, i) => n.textContent = i + 1);
+    }
+    function bindBulletX(x, list) {
+      x.addEventListener('click', () => {
+        x.closest('.bl-item').remove();
+        renumberBullets(list);
+      });
+    }
+    function makeBulletLi(text) {
+      const li = document.createElement('li');
+      li.className = 'bl-item';
+      const safe = (text || '').replace(/"/g, '&quot;');
+      li.innerHTML = `<span class="num"></span><input class="bl-input bl-edit" type="text" value="${safe}" placeholder="卖点内容"><span class="bl-x" title="删除">${X_SVG}</span>`;
+      return li;
+    }
+    function addBulletItem(list, text) {
+      const li = makeBulletLi(text);
+      list.querySelector('.bl-add').before(li);
+      bindBulletX(li.querySelector('.bl-x'), list);
+      renumberBullets(list);
+    }
+    function renderBulletEditor(list, items) {
+      list.innerHTML = '';
+      // 已有项 (每条都是 input 可直接修改)
+      items.forEach(text => list.appendChild(makeBulletLi(text)));
+      // 添加行
+      const addLi = document.createElement('li');
+      addLi.className = 'bl-add';
+      addLi.innerHTML = `<span class="num">+</span><input class="bl-input" placeholder="添加新卖点 · 回车确认">`;
+      list.appendChild(addLi);
+      // 绑定已有项的删除
+      list.querySelectorAll('.bl-item .bl-x').forEach(x => bindBulletX(x, list));
+      // 绑定回车追加
+      const addInput = addLi.querySelector('.bl-input');
+      addInput.addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          const v = addInput.value.trim();
+          if (!v) return;
+          addBulletItem(list, v);
+          addInput.value = '';
+          addInput.focus();
+        }
+      });
+      renumberBullets(list);
+    }
+
+    // 进入编辑模式: 把当前静态值灌进 input
+    function enterEdit() {
+      card.querySelectorAll('[data-field]').forEach(row => {
+        const stat = row.querySelector('.v-static');
+        const inp = row.querySelector('.v-edit');
+        if (!stat || !inp) return;
+        if (row.dataset.field === 'bullets') {
+          const items = [...stat.querySelectorAll('.bullet')].map(b => b.textContent.trim());
+          renderBulletEditor(inp, items);
+        } else if (inp.tagName === 'SELECT') {
+          const cur = stat.textContent.trim();
+          [...inp.options].forEach((o, i) => { if (o.textContent.trim() === cur) inp.selectedIndex = i; });
+        } else {
+          inp.value = stat.textContent.trim();
+        }
+      });
+      card.classList.add('editing');
+    }
+    function exitEdit() {
+      card.classList.remove('editing');
+    }
+    function save() {
+      card.querySelectorAll('[data-field]').forEach(row => {
+        const stat = row.querySelector('.v-static');
+        const inp = row.querySelector('.v-edit');
+        if (!stat || !inp) return;
+        if (row.dataset.field === 'bullets') {
+          // 从 .bl-item .bl-edit input 读值 (允许修改已有条目)
+          const items = [...inp.querySelectorAll('.bl-item .bl-edit')]
+            .map(t => t.value.trim()).filter(Boolean);
+          stat.innerHTML = items.map(s => `<span class="bullet">${escapeHtml(s)}</span>`).join('');
+        } else {
+          const val = (inp.tagName === 'SELECT') ? inp.options[inp.selectedIndex].textContent : inp.value;
+          stat.textContent = val.trim();
+          if (row.dataset.field === 'name' && pdName) {
+            pdName.textContent = val.trim() || pdName.textContent;
+          }
+        }
+      });
+      card.classList.remove('editing');
+      Shell.toast('已保存', '商品信息已更新');
+    }
+    // 重置 · 在编辑模式下,把所有输入框回退到当前静态值 (相当于重新进入 edit)
+    function resetEdit() {
+      card.querySelectorAll('[data-field]').forEach(row => {
+        const stat = row.querySelector('.v-static');
+        const inp = row.querySelector('.v-edit');
+        if (!stat || !inp) return;
+        if (row.dataset.field === 'bullets') {
+          const items = [...stat.querySelectorAll('.bullet')].map(b => b.textContent.trim());
+          renderBulletEditor(inp, items);
+        } else if (inp.tagName === 'SELECT') {
+          const cur = stat.textContent.trim();
+          [...inp.options].forEach((o, i) => { if (o.textContent.trim() === cur) inp.selectedIndex = i; });
+        } else {
+          inp.value = stat.textContent.trim();
+        }
+      });
+      Shell.toast('已重置');
+    }
+
+    const resetBtn = document.getElementById('ov-reset-btn');
+    // 防御性: 先清空可能存在的 inline onclick, 再用 addEventListener 绑定
+    editBtn.onclick = null;
+    cancelBtn.onclick = null;
+    saveBtn.onclick = null;
+    if (resetBtn) resetBtn.onclick = null;
+    editBtn.addEventListener('click', (e) => { e.preventDefault(); enterEdit(); });
+    cancelBtn.addEventListener('click', (e) => { e.preventDefault(); exitEdit(); });
+    saveBtn.addEventListener('click', (e) => { e.preventDefault(); save(); });
+    if (resetBtn) resetBtn.addEventListener('click', (e) => { e.preventDefault(); resetEdit(); });
+
+    // 编辑模式下,点缩略图 → 删除
+    const grid = document.getElementById('ov-images-grid');
+    if (grid) {
+      grid.addEventListener('click', e => {
+        if (!card.classList.contains('editing')) return;
+        const thumb = e.target.closest('.thumb');
+        if (thumb && !thumb.classList.contains('img-upload')) {
+          thumb.remove();
+        }
+      });
+      // [+] 上传占位
+      const addBtn = document.getElementById('ov-img-add');
+      if (addBtn) addBtn.onclick = () => Shell.toast('上传图片', '请选择本地图片 (占位)');
+    }
+  })();
+
+  // 从 create 跳来时显示 toast
+  if (location.search.includes('id=new')) {
+    setTimeout(() => Shell.toast('商品已创建', '开始创建 AI 资产'), 200);
+  }
+</script>
+</body>
+</html>
diff --git a/v2/product-studio.html b/v2/product-studio.html
new file mode 100644
index 0000000..6404f70
--- /dev/null
+++ b/v2/product-studio.html
@@ -0,0 +1,1082 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>商品工作台 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── Onboarding tip(首次进入) ─── */
+  .onboard-tip {
+    background: var(--heat-8);
+    border: 1px solid var(--heat-40);
+    border-radius: var(--r-md);
+    padding: 16px 20px;
+    margin-bottom: 24px;
+    display: flex; align-items: center; gap: 14px;
+    position: relative;
+    animation: slideIn .4s ease;
+  }
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateY(-6px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .onboard-tip .ic {
+    width: 36px; height: 36px;
+    background: var(--heat); color: #fff;
+    border-radius: var(--r-md);
+    display: grid; place-items: center; flex-shrink: 0;
+  }
+  .onboard-tip .ic svg { width: 18px; height: 18px; }
+  .onboard-tip .body { flex: 1; }
+  .onboard-tip .t { font-size: 14px; font-weight: 600; color: var(--accent-black); }
+  .onboard-tip .d { font-size: 12.5px; color: var(--black-alpha-72); margin-top: 4px; line-height: 1.55; }
+  .onboard-tip .d strong { color: var(--heat); font-weight: 600; }
+  .onboard-tip .acts { display: flex; gap: 8px; align-items: center; }
+  .onboard-tip .dismiss {
+    background: transparent; border: 0;
+    color: var(--black-alpha-56);
+    font-size: 12.5px; cursor: pointer;
+    padding: 6px 12px;
+    border-radius: var(--r-md);
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .onboard-tip .dismiss:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+
+  /* ─── 商品概览卡(信息 + 原图 mini-grid 合并) ─── */
+  .overview-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 22px 24px;
+    margin-bottom: 28px;
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 28px;
+    align-items: start;
+  }
+  .ov-info-head {
+    display: flex; align-items: flex-start; gap: 14px;
+    margin-bottom: 12px;
+  }
+  .ov-info-head .ic {
+    width: 36px; height: 36px;
+    background: var(--heat-12); color: var(--heat);
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .ov-info-head .ic svg { width: 17px; height: 17px; }
+  .ov-info-head .name { font-size: 16px; font-weight: 600; color: var(--accent-black); line-height: 1.3; }
+  .ov-info-head .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; margin-top: 4px; }
+  .ov-info-head .edit {
+    margin-left: auto;
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 30px; padding: 0 12px;
+    background: transparent; border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    color: var(--black-alpha-56); font-size: 12.5px; cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .ov-info-head .edit:hover { color: var(--heat); border-color: var(--heat-40); background: var(--heat-8); }
+  .ov-info-head .edit svg { width: 12px; height: 12px; }
+
+  .ov-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
+  .ov-tags .t {
+    font-size: 11.5px; padding: 3px 10px;
+    background: var(--background-lighter);
+    color: var(--black-alpha-56);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+  }
+  .ov-sell {
+    margin-top: 14px; padding-top: 14px;
+    border-top: 1px dashed var(--border-faint);
+    font-size: 12.5px; color: var(--black-alpha-72);
+    line-height: 1.65;
+  }
+  .ov-sell .lbl {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .04em;
+    margin-right: 6px;
+  }
+
+  /* 右侧:原图 mini-grid */
+  .ov-photos {
+    border-left: 1px dashed var(--border-faint);
+    padding-left: 28px;
+  }
+  .ov-photos-h {
+    display: flex; align-items: baseline; justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .ov-photos-h .t {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .04em;
+  }
+  .ov-photos-h .n { color: var(--heat); font-weight: 600; }
+  .ov-photos-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+  }
+  .ov-photo {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    border: 1px solid var(--border-faint);
+    background: var(--background-lighter);
+    background-size: cover; background-position: center;
+    position: relative;
+    cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .ov-photo:hover { border-color: var(--heat-40); transform: scale(1.04); z-index: 1; }
+  .ov-photo .pmain {
+    position: absolute; top: 3px; left: 3px;
+    font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
+    padding: 1px 4px; background: var(--heat); color: #fff;
+    border-radius: 3px; letter-spacing: .04em;
+  }
+  .ov-photo.add {
+    border-style: dashed; cursor: pointer;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+    transition: all var(--t-base);
+  }
+  .ov-photo.add:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-8); }
+  .ov-photo.add svg { width: 14px; height: 14px; }
+
+  /* ─── 响应式 ─── */
+  @media (max-width: 1100px) {
+    .overview-card { grid-template-columns: 1fr; }
+    .ov-photos { border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px dashed var(--border-faint); }
+  }
+
+  /* ─── 区块标题 ─── */
+  .section-title {
+    display: flex; align-items: baseline; gap: 12px;
+    margin-bottom: 16px;
+  }
+  .section-title h2 {
+    font-size: 16px; font-weight: 600; color: var(--accent-black);
+    letter-spacing: -0.01em;
+  }
+  .section-title .sub {
+    font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48);
+    letter-spacing: .04em;
+  }
+
+  /* ─── AI 工具箱(横排 4 列) ─── */
+  .toolbox {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-bottom: 36px;
+  }
+  .tool-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    cursor: pointer;
+    transition: all var(--t-base);
+    position: relative;
+    min-height: 132px;
+  }
+  .tool-card:hover { border-color: var(--heat-40); background: var(--heat-4); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
+  .tool-card.featured { border-color: var(--heat-40); }
+  .tool-card.featured::after {
+    content: '推荐 ★';
+    position: absolute;
+    top: 14px; right: 14px;
+    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
+    color: #fff; background: var(--heat);
+    padding: 3px 8px; border-radius: var(--r-sm);
+    letter-spacing: .04em;
+  }
+  .tool-card .ic-box {
+    width: 40px; height: 40px;
+    background: var(--heat-12); color: var(--heat);
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    flex-shrink: 0;
+  }
+  .tool-card .ic-box svg { width: 18px; height: 18px; }
+  .tool-card .info { flex: 1; }
+  .tool-card .info .t { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; }
+  .tool-card .info .d { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-56); margin-top: 6px; letter-spacing: .02em; line-height: 1.45; }
+  .tool-card .foot {
+    display: flex; align-items: center; justify-content: space-between;
+    padding-top: 10px;
+    border-top: 1px dashed var(--border-faint);
+    margin-top: auto;
+  }
+  .tool-card .foot .cost {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .tool-card .foot .cost b { color: var(--heat); font-weight: 600; }
+  .tool-card .foot .arrow {
+    width: 24px; height: 24px; border-radius: var(--r-sm);
+    background: var(--background-lighter); color: var(--black-alpha-56);
+    display: grid; place-items: center;
+    transition: all var(--t-fast);
+  }
+  .tool-card:hover .foot .arrow { background: var(--heat); color: #fff; transform: translateX(2px); }
+  .tool-card .foot .arrow svg { width: 11px; height: 11px; }
+  .tool-card.coming-soon { opacity: .7; cursor: default; }
+  .tool-card.coming-soon:hover { border-color: var(--border-faint); background: var(--surface); transform: none; box-shadow: none; }
+  .tool-card.coming-soon .foot .arrow { display: none; }
+  .tool-card.coming-soon .foot .cost { font-style: italic; }
+
+  @media (max-width: 1100px) {
+    .toolbox { grid-template-columns: repeat(2, 1fr); }
+  }
+
+  /* ─── 生成资产 grid ─── */
+  .asset-section {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 22px 24px;
+  }
+  .asset-tabs {
+    display: flex; gap: 4px;
+    border-bottom: 1px solid var(--border-faint);
+    margin-bottom: 18px;
+  }
+  .asset-tab {
+    padding: 0 14px; height: 36px;
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 13px; font-weight: 500;
+    color: var(--black-alpha-56);
+    cursor: pointer; border: 0; background: transparent;
+    position: relative;
+    transition: color var(--t-base);
+  }
+  .asset-tab .count {
+    font-family: var(--font-mono); font-size: 10.5px;
+    padding: 1px 6px; background: var(--background-lighter);
+    color: var(--black-alpha-48); border-radius: var(--r-pill);
+    letter-spacing: .04em;
+  }
+  .asset-tab:hover { color: var(--accent-black); }
+  .asset-tab.active { color: var(--accent-black); }
+  .asset-tab.active::after {
+    content: ''; position: absolute;
+    left: 0; right: 0; bottom: -1px; height: 2px;
+    background: var(--heat);
+  }
+  .asset-tab.active .count { color: var(--heat); background: var(--heat-12); }
+
+  .asset-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 12px;
+  }
+  .asset-it {
+    position: relative;
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    overflow: hidden;
+    background: var(--background-lighter);
+    cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .asset-it:hover { border-color: var(--heat-40); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
+  .asset-it .a-thumb {
+    aspect-ratio: 1;
+    background-size: cover; background-position: center;
+    position: relative;
+  }
+  .asset-it .a-thumb.skeleton {
+    background: linear-gradient(110deg, var(--background-lighter) 8%, var(--black-alpha-4) 18%, var(--background-lighter) 33%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s linear infinite;
+    display: grid; place-items: center;
+    color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 11px;
+    letter-spacing: .04em;
+  }
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  .asset-it .a-tag {
+    position: absolute; top: 8px; left: 8px;
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 2px 7px;
+    background: rgba(255,255,255,.92); color: var(--black-alpha-72);
+    border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .asset-it .a-body {
+    padding: 10px 12px;
+    border-top: 1px solid var(--border-faint);
+    background: var(--surface);
+  }
+  .asset-it .a-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
+  .asset-it .a-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
+  .asset-it .a-actions {
+    position: absolute; top: 8px; right: 8px;
+    display: flex; gap: 4px;
+    opacity: 0; transition: opacity var(--t-base);
+  }
+  .asset-it:hover .a-actions { opacity: 1; }
+  .asset-it .a-actions button {
+    width: 26px; height: 26px;
+    background: rgba(255,255,255,.94); border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    color: var(--black-alpha-72); cursor: pointer;
+    padding: 0;
+    transition: all var(--t-fast);
+  }
+  .asset-it .a-actions button:hover { background: var(--heat); color: #fff; border-color: var(--heat); }
+  .asset-it .a-actions button.danger:hover { background: var(--accent-crimson); border-color: var(--accent-crimson); }
+  .asset-it .a-actions svg { width: 12px; height: 12px; }
+  .asset-empty {
+    grid-column: 1 / -1;
+    text-align: center; padding: 40px 0;
+    color: var(--black-alpha-48); font-size: 13px;
+  }
+  .asset-empty p { font-family: var(--font-mono); font-size: 11.5px; margin-top: 6px; }
+
+  /* ─── 抽屉(模特库 / 平台库) ─── */
+  .picker-bg {
+    position: fixed; inset: 0;
+    background: rgba(21,20,15,.42);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 1000;
+    display: none; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity .2s;
+  }
+  .picker-bg.show { display: flex; opacity: 1; }
+  .picker {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    max-width: 720px; width: 92%;
+    max-height: calc(100vh - 80px);
+    display: flex; flex-direction: column;
+    position: relative;
+    transform: scale(.96);
+    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .picker-bg.show .picker { transform: scale(1); }
+  .picker::before, .picker::after,
+  .picker .corner-tr, .picker .corner-bl {
+    content: ''; position: absolute;
+    width: 14px; height: 14px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center;
+    background-size: contain; pointer-events: none;
+  }
+  .picker::before { top: -7px; left: -7px; }
+  .picker::after { bottom: -7px; right: -7px; }
+  .picker .corner-tr { top: -7px; right: -7px; }
+  .picker .corner-bl { bottom: -7px; left: -7px; }
+  .picker-h {
+    padding: 22px 28px 18px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 14px;
+    flex-shrink: 0;
+  }
+  .picker-h .ic {
+    width: 36px; height: 36px;
+    background: var(--heat-12); color: var(--heat);
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+  }
+  .picker-h .ic svg { width: 17px; height: 17px; }
+  .picker-h .ti { flex: 1; }
+  .picker-h .ti .t { font-size: 16px; font-weight: 600; color: var(--accent-black); }
+  .picker-h .ti .d { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 4px; letter-spacing: .04em; }
+  .picker-h .x {
+    width: 32px; height: 32px; border-radius: var(--r-md);
+    display: grid; place-items: center;
+    color: var(--black-alpha-56); cursor: pointer;
+    background: transparent; border: 0;
+    transition: all var(--t-base);
+  }
+  .picker-h .x:hover { background: var(--black-alpha-4); color: var(--accent-crimson); }
+  .picker-h .x svg { width: 14px; height: 14px; }
+  .picker-b { padding: 22px 28px; flex: 1; overflow-y: auto; min-height: 0; }
+  .picker-f {
+    padding: 16px 24px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 10px;
+    background: var(--background-lighter);
+    flex-shrink: 0;
+  }
+  .picker-f .meta { flex: 1; font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .picker-f .meta .accent { color: var(--heat); font-weight: 600; }
+
+  /* 模特 / 平台 选项卡片 */
+  .opt-grid {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
+  }
+  .opt-card {
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 10px;
+    cursor: pointer;
+    transition: all var(--t-base);
+    background: var(--surface);
+  }
+  .opt-card:hover { border-color: var(--heat-40); background: var(--heat-4); }
+  .opt-card.selected { border-color: var(--heat); background: var(--heat-8); }
+  .opt-card .opt-thumb {
+    aspect-ratio: 1;
+    background: var(--background-lighter);
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono); font-size: 11px;
+    margin-bottom: 8px;
+    overflow: hidden;
+  }
+  .opt-card.selected .opt-thumb { background: var(--heat-12); color: var(--heat); }
+  .opt-card .opt-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
+  .opt-card .opt-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
+  .opt-card.selected .opt-name { color: var(--heat); }
+
+  /* 配置参数 */
+  .opt-config {
+    margin-top: 18px; padding-top: 18px;
+    border-top: 1px dashed var(--border-faint);
+  }
+  .opt-config-row {
+    display: flex; align-items: center; gap: 16px;
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+  .opt-config-row > label { width: 90px; color: var(--black-alpha-72); }
+  .opt-config-row .val { color: var(--accent-black); }
+  .opt-config-row .pillset { display: flex; gap: 6px; }
+  .opt-config-row .pillset .p {
+    padding: 5px 12px;
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    background: var(--surface);
+    font-size: 12px; color: var(--black-alpha-56);
+    cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .opt-config-row .pillset .p:hover { color: var(--accent-black); border-color: var(--black-alpha-24); }
+  .opt-config-row .pillset .p.on { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>透真补水面膜</h1>
+    <div class="sub"><span class="mono">// 商品工作台 · 已生成 <span id="total-assets" style="color:var(--heat);font-weight:600">11</span> 张资产 · 创建于 5/19</span></div>
+  </div>
+  <div class="actions">
+    <a class="btn" href="products.html">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+      返回商品库
+    </a>
+    <button class="btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8"/></svg>
+      保存
+    </button>
+    <a class="btn btn-primary" href="projects-new.html">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg>
+      创建视频项目
+    </a>
+  </div>
+</div>
+
+<!-- ============ Onboarding(首次进入显示) ============ -->
+<div class="onboard-tip" id="onboard-tip" hidden>
+  <div class="ic">
+    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+  </div>
+  <div class="body">
+    <div class="t">商品已建档 · 推荐先生成白底三视图</div>
+    <div class="d">AI 以「主图」为基准生成正/侧/背 3 张白底图,Seedance 视频里商品的<strong>清晰度和稳定性 +60%</strong>。约 18 秒、¥1.6 · 失败不扣费。</div>
+  </div>
+  <div class="acts">
+    <button class="dismiss" onclick="dismissOnboard()">稍后再说</button>
+    <button class="btn btn-primary" onclick="dismissOnboard();openWhiteBg();">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+      现在生成
+    </button>
+  </div>
+</div>
+
+<!-- ============ 商品概览卡(信息 + 原图合并) ============ -->
+<div class="overview-card">
+  <div>
+    <div class="ov-info-head">
+      <div class="ic">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg>
+      </div>
+      <div style="flex:1;min-width:0;">
+        <div class="name">透真玻尿酸补水面膜</div>
+        <div class="meta">[ 美妆个护 ] · ¥39.9 · 22-32 岁女性</div>
+      </div>
+      <button class="edit" onclick="alert('行内编辑商品信息 · demo')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+        编辑
+      </button>
+    </div>
+    <div class="ov-tags">
+      <span class="t">熬夜党</span>
+      <span class="t">敏感肌</span>
+      <span class="t">补水</span>
+      <span class="t">玻尿酸</span>
+      <span class="t">通勤</span>
+    </div>
+    <div class="ov-sell">
+      <span class="lbl">// 卖点</span>
+      玻尿酸双效保湿 · 4 小时持久水润 · 敏感肌可用 · 通勤补水 · 平价代替
+    </div>
+  </div>
+
+  <div class="ov-photos">
+    <div class="ov-photos-h">
+      <span class="t">原图册 · <span class="n">3</span> / 5</span>
+      <span class="t" style="color:var(--black-alpha-32);">JPG / PNG · ≤ 5MB</span>
+    </div>
+    <div class="ov-photos-grid">
+      <div class="ov-photo" style="background-image: linear-gradient(135deg,#fde2c6 0%, #ffd0a8 100%);" title="主图">
+        <span class="pmain">MAIN</span>
+      </div>
+      <div class="ov-photo" style="background-image: linear-gradient(135deg,#dceafe 0%, #c3e0fe 100%);" title="包装"></div>
+      <div class="ov-photo" style="background-image: linear-gradient(135deg,#e7e3d5 0%, #d6d1c0 100%);" title="质地"></div>
+      <div class="ov-photo add" onclick="alert('上传新图 · demo')" title="添加">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ============ AI 工具箱(横排 4 张卡) ============ -->
+<div class="section-title">
+  <h2>AI 工具箱</h2>
+  <span class="sub">// 按需调用 · 生成结果自动入资产库 · 失败不扣费</span>
+</div>
+<div class="toolbox">
+
+  <div class="tool-card featured" onclick="openWhiteBg()">
+    <div class="ic-box">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg>
+    </div>
+    <div class="info">
+      <div class="t">白底三视图</div>
+      <div class="d">正/侧/背 · Seedance 效果 +60%</div>
+    </div>
+    <div class="foot">
+      <span class="cost">~18 秒 · <b>¥1.6</b></span>
+      <span class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
+    </div>
+  </div>
+
+  <div class="tool-card" onclick="openModelPicker()">
+    <div class="ic-box">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2"/></svg>
+    </div>
+    <div class="info">
+      <div class="t">AI 模特上身图</div>
+      <div class="d">8 模特库可选 · 每次 4 张</div>
+    </div>
+    <div class="foot">
+      <span class="cost">~35 秒 · <b>¥3.2</b></span>
+      <span class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
+    </div>
+  </div>
+
+  <div class="tool-card" onclick="openPlatformPicker()">
+    <div class="ic-box">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+    </div>
+    <div class="info">
+      <div class="t">平台套图</div>
+      <div class="d">6 平台规格 · 每平台 4 张</div>
+    </div>
+    <div class="foot">
+      <span class="cost">~28 秒 · <b>¥2.4</b></span>
+      <span class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
+    </div>
+  </div>
+
+  <div class="tool-card coming-soon">
+    <div class="ic-box" style="background:var(--background-lighter);color:var(--black-alpha-48);">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 3"/></svg>
+    </div>
+    <div class="info">
+      <div class="t" style="color:var(--black-alpha-72);">更多工具</div>
+      <div class="d">卖点海报 / 详情页插画</div>
+    </div>
+    <div class="foot">
+      <span class="cost">即将上线</span>
+    </div>
+  </div>
+
+</div>
+
+<!-- ============ 已生成资产 ============ -->
+<div class="asset-section">
+  <div class="section-title">
+    <h2>已生成资产</h2>
+    <span class="sub">// 自动入「资产库 / 跨项目共享 / 商品图」</span>
+  </div>
+  <div class="asset-tabs" id="asset-tabs">
+    <button class="asset-tab active" data-tab="all">全部 <span class="count" id="c-all">11</span></button>
+    <button class="asset-tab" data-tab="white">白底三视图 <span class="count" id="c-white">3</span></button>
+    <button class="asset-tab" data-tab="model">模特上身 <span class="count" id="c-model">4</span></button>
+    <button class="asset-tab" data-tab="platform">平台套图 <span class="count" id="c-platform">4</span></button>
+  </div>
+  <div class="asset-grid" id="asset-grid"></div>
+</div>
+
+</div>
+
+<!-- ============ 模特库选择抽屉 ============ -->
+<div class="picker-bg" id="model-picker-bg" onclick="if(event.target===this)closePicker('model')">
+  <div class="picker">
+    <span class="corner-tr"></span><span class="corner-bl"></span>
+    <div class="picker-h">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2"/></svg></div>
+      <div class="ti"><div class="t">选择模特</div><div class="d">// 系统已有 8 位模特 · 每次生成 4 张上身图</div></div>
+      <button class="x" onclick="closePicker('model')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="picker-b">
+      <div class="opt-grid" id="model-grid"></div>
+      <div class="opt-config">
+        <div class="opt-config-row">
+          <label>场景偏好</label>
+          <div class="pillset" data-key="scene">
+            <span class="p on" data-v="室内自拍">室内自拍</span>
+            <span class="p" data-v="梳妆台">梳妆台</span>
+            <span class="p" data-v="户外清晨">户外清晨</span>
+            <span class="p" data-v="纯色背景">纯色背景</span>
+          </div>
+        </div>
+        <div class="opt-config-row">
+          <label>构图</label>
+          <div class="pillset" data-key="frame">
+            <span class="p on" data-v="半身">半身</span>
+            <span class="p" data-v="特写">特写</span>
+            <span class="p" data-v="全身">全身</span>
+          </div>
+        </div>
+        <div class="opt-config-row">
+          <label>数量</label>
+          <span class="val">4 张 · 不满意可原地重跑</span>
+        </div>
+      </div>
+    </div>
+    <div class="picker-f">
+      <span class="meta">// 预计耗时 35 秒 · <span class="accent">¥3.2</span> · 失败不扣费</span>
+      <button class="btn" onclick="closePicker('model')">取消</button>
+      <button class="btn btn-primary" id="model-go-btn" disabled>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+        开始生成
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ============ 平台选择抽屉 ============ -->
+<div class="picker-bg" id="platform-picker-bg" onclick="if(event.target===this)closePicker('platform')">
+  <div class="picker">
+    <span class="corner-tr"></span><span class="corner-bl"></span>
+    <div class="picker-h">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
+      <div class="ti"><div class="t">选择平台</div><div class="d">// 按平台调性 + 比例生成 · 每平台 4 张</div></div>
+      <button class="x" onclick="closePicker('platform')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="picker-b">
+      <div class="opt-grid" id="platform-grid"></div>
+      <div class="opt-config">
+        <div class="opt-config-row">
+          <label>类型</label>
+          <div class="pillset" data-key="ptype">
+            <span class="p on" data-v="主图">主图(1:1)</span>
+            <span class="p" data-v="详情页头图">详情页头图(750×1000)</span>
+            <span class="p" data-v="活动横幅">活动横幅(750×260)</span>
+          </div>
+        </div>
+        <div class="opt-config-row">
+          <label>风格</label>
+          <div class="pillset" data-key="pstyle">
+            <span class="p on" data-v="干净电商">干净电商</span>
+            <span class="p" data-v="种草风">种草风</span>
+            <span class="p" data-v="节日热闹">节日热闹</span>
+          </div>
+        </div>
+        <div class="opt-config-row">
+          <label>数量</label>
+          <span class="val">4 张 · 不满意可原地重跑</span>
+        </div>
+      </div>
+    </div>
+    <div class="picker-f">
+      <span class="meta">// 预计耗时 28 秒 · <span class="accent">¥2.4</span> · 失败不扣费</span>
+      <button class="btn" onclick="closePicker('platform')">取消</button>
+      <button class="btn btn-primary" id="platform-go-btn" disabled>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+        开始生成
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ============ 白底三视图确认弹窗 ============ -->
+<div class="picker-bg" id="white-picker-bg" onclick="if(event.target===this)closePicker('white')">
+  <div class="picker" style="max-width: 460px;">
+    <span class="corner-tr"></span><span class="corner-bl"></span>
+    <div class="picker-h">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg></div>
+      <div class="ti"><div class="t">生成白底三视图</div><div class="d">// 一次出 3 张 · 正面 / 侧面 / 背面</div></div>
+      <button class="x" onclick="closePicker('white')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="picker-b">
+      <div style="font-size:13px;color:var(--black-alpha-72);line-height:1.7;margin-bottom:14px;">
+        AI 会以「主图」为基准,自动去白底 + 重打光 + 推算另外两个视角。商品形态尽量保持稳定。
+      </div>
+      <div class="opt-config" style="margin-top:0;padding-top:0;border:0;">
+        <div class="opt-config-row">
+          <label>视角</label>
+          <div class="pillset" data-key="angles">
+            <span class="p on" data-v="正">正面</span>
+            <span class="p on" data-v="侧">侧面</span>
+            <span class="p on" data-v="背">背面</span>
+          </div>
+        </div>
+        <div class="opt-config-row">
+          <label>背景</label>
+          <div class="pillset" data-key="bg">
+            <span class="p on" data-v="纯白">纯白</span>
+            <span class="p" data-v="浅灰">浅灰</span>
+            <span class="p" data-v="渐变">柔和渐变</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="picker-f">
+      <span class="meta">// 预计 18 秒 · <span class="accent">¥1.6</span></span>
+      <button class="btn" onclick="closePicker('white')">取消</button>
+      <button class="btn btn-primary" id="white-go-btn">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+        开始生成
+      </button>
+    </div>
+  </div>
+</div>
+
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'products',
+  crumbs: [
+    { label: '工作台', href: 'index.html' },
+    { label: '商品库', href: 'products.html' },
+    { label: '透真补水面膜' }
+  ]
+});
+
+// 修复:让 picker 弹窗脱离 main 的 stacking,提到 body 末尾
+['model-picker-bg', 'platform-picker-bg', 'white-picker-bg'].forEach(id => {
+  const el = document.getElementById(id);
+  if (el && el.parentElement !== document.body) document.body.appendChild(el);
+});
+
+// Onboarding: ?from=new&onboard=1 时显示
+const _qs = new URLSearchParams(location.search);
+if (_qs.get('onboard') === '1' || _qs.get('from') === 'new') {
+  const tip = document.getElementById('onboard-tip');
+  if (tip) tip.hidden = false;
+}
+function dismissOnboard() {
+  const tip = document.getElementById('onboard-tip');
+  if (tip) tip.hidden = true;
+}
+
+// ============= 假数据 =============
+const MODELS = [
+  { id: 'm1', name: '林夕',     meta: '女 · 25 · 都市白领', emoji: '◐' },
+  { id: 'm2', name: '小苏',     meta: '女 · 23 · 文艺学生', emoji: '◑' },
+  { id: 'm3', name: '阿楠',     meta: '女 · 28 · 同事型',  emoji: '◓' },
+  { id: 'm4', name: '小七',     meta: '女 · 20 · 学生',    emoji: '◒' },
+  { id: 'm5', name: '王姐',     meta: '女 · 38 · 居家',    emoji: '◍' },
+  { id: 'm6', name: '阿杰',     meta: '男 · 30 · 都市',    emoji: '◐' },
+  { id: 'm7', name: '阿强',     meta: '男 · 26 · 健身',    emoji: '◑' },
+  { id: 'm8', name: '+ 自定义', meta: '上传自有模特照',     emoji: '+', custom: true },
+];
+
+const PLATFORMS = [
+  { id: 'p1', name: '淘宝 / 天猫', meta: '1:1 · 800×800', emoji: '🅣' },
+  { id: 'p2', name: '抖店',         meta: '3:4 · 750×1000', emoji: '🅓' },
+  { id: 'p3', name: '拼多多',       meta: '1:1 · 800×800',  emoji: '🅟' },
+  { id: 'p4', name: '京东',         meta: '1:1 · 800×800',  emoji: '🅙' },
+  { id: 'p5', name: '小红书',       meta: '3:4 · 600×800',  emoji: '🅡' },
+  { id: 'p6', name: '1688',         meta: '1:1 · 750×750',  emoji: '🅑' },
+];
+
+// 已生成资产 (mock)
+let assets = [
+  { id: 'a1', kind: 'white',    name: '白底 · 正面',  meta: '512×512 · 5/19 14:23', color: '#f4f4f4' },
+  { id: 'a2', kind: 'white',    name: '白底 · 侧面',  meta: '512×512 · 5/19 14:23', color: '#f0f0f0' },
+  { id: 'a3', kind: 'white',    name: '白底 · 背面',  meta: '512×512 · 5/19 14:23', color: '#eeeeee' },
+  { id: 'a4', kind: 'model',    name: '林夕 · 上身 01', meta: '小美 · 1024×1024 · 5/19', color: 'linear-gradient(135deg,#ffe0b2,#ffccbc)' },
+  { id: 'a5', kind: 'model',    name: '林夕 · 上身 02', meta: '小美 · 1024×1024 · 5/19', color: 'linear-gradient(135deg,#fde2c6,#ffbcaa)' },
+  { id: 'a6', kind: 'model',    name: '林夕 · 上身 03', meta: '小美 · 1024×1024 · 5/19', color: 'linear-gradient(135deg,#fbcfe8,#fce7f3)' },
+  { id: 'a7', kind: 'model',    name: '林夕 · 上身 04', meta: '小美 · 1024×1024 · 5/19', color: 'linear-gradient(135deg,#f3e8ff,#fae8ff)' },
+  { id: 'a8', kind: 'platform', name: '淘宝 · 主图 01', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#fff1f0,#ffd6cc)' },
+  { id: 'a9', kind: 'platform', name: '淘宝 · 主图 02', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#fef3c7,#fde68a)' },
+  { id: 'a10', kind: 'platform', name: '淘宝 · 主图 03', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#dcfce7,#bbf7d0)' },
+  { id: 'a11', kind: 'platform', name: '淘宝 · 主图 04', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#dbeafe,#bfdbfe)' },
+];
+
+let currentTab = 'all';
+let pickerState = {
+  model: { selected: '', scene: '室内自拍', frame: '半身' },
+  platform: { selected: '', ptype: '主图', pstyle: '干净电商' },
+  white: { angles: ['正','侧','背'], bg: '纯白' },
+};
+
+const $ = id => document.getElementById(id);
+
+// ============= 渲染:已生成资产 grid =============
+function renderAssets() {
+  const grid = $('asset-grid');
+  const filtered = currentTab === 'all' ? assets : assets.filter(a => a.kind === currentTab);
+  if (filtered.length === 0) {
+    grid.innerHTML = `<div class="asset-empty">还没有这类资产<p>// 用上方工具箱生成</p></div>`;
+    return;
+  }
+  grid.innerHTML = filtered.map(a => {
+    const tagText = { white: '白底', model: '模特', platform: '平台' }[a.kind];
+    const isGradient = (a.color || '').startsWith('linear');
+    const bg = isGradient ? a.color : a.color;
+    return `
+      <div class="asset-it" data-id="${a.id}">
+        <div class="a-thumb${a.skeleton ? ' skeleton' : ''}" style="${a.skeleton ? '' : (isGradient ? `background:${bg}` : `background-color:${bg}`)}">
+          ${a.skeleton ? '生成中…' : `<span class="a-tag">${tagText}</span>`}
+        </div>
+        ${a.skeleton ? '' : `
+        <div class="a-actions">
+          <button title="预览" onclick="event.stopPropagation();alert('预览 · demo')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          </button>
+          <button title="重跑" onclick="event.stopPropagation();regen('${a.id}')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></svg>
+          </button>
+          <button class="danger" title="删除" onclick="event.stopPropagation();delAsset('${a.id}')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
+          </button>
+        </div>
+        <div class="a-body">
+          <div class="a-name">${a.name}</div>
+          <div class="a-meta">${a.meta}</div>
+        </div>`}
+      </div>
+    `;
+  }).join('');
+}
+
+function updateCounts() {
+  $('c-all').textContent = assets.filter(a => !a.skeleton).length;
+  $('c-white').textContent = assets.filter(a => a.kind === 'white' && !a.skeleton).length;
+  $('c-model').textContent = assets.filter(a => a.kind === 'model' && !a.skeleton).length;
+  $('c-platform').textContent = assets.filter(a => a.kind === 'platform' && !a.skeleton).length;
+  $('total-assets').textContent = assets.filter(a => !a.skeleton).length;
+}
+
+// Tab 切换
+document.querySelectorAll('#asset-tabs .asset-tab').forEach(t => {
+  t.addEventListener('click', () => {
+    document.querySelectorAll('#asset-tabs .asset-tab').forEach(x => x.classList.remove('active'));
+    t.classList.add('active');
+    currentTab = t.dataset.tab;
+    renderAssets();
+  });
+});
+
+// ============= 抽屉:打开/关闭 =============
+function openPicker(which) {
+  $(`${which}-picker-bg`).classList.add('show');
+}
+function closePicker(which) {
+  $(`${which}-picker-bg`).classList.remove('show');
+}
+function openWhiteBg() {
+  openPicker('white');
+}
+function openModelPicker() {
+  // 填充模特库
+  $('model-grid').innerHTML = MODELS.map(m => `
+    <div class="opt-card${m.custom ? ' add' : ''}" data-id="${m.id}" onclick="selectOption('model', '${m.id}', this)">
+      <div class="opt-thumb">${m.emoji}</div>
+      <div class="opt-name">${m.name}</div>
+      <div class="opt-meta">${m.meta}</div>
+    </div>
+  `).join('');
+  $('model-go-btn').disabled = true;
+  pickerState.model.selected = '';
+  openPicker('model');
+}
+function openPlatformPicker() {
+  $('platform-grid').innerHTML = PLATFORMS.map(p => `
+    <div class="opt-card" data-id="${p.id}" onclick="selectOption('platform', '${p.id}', this)">
+      <div class="opt-thumb">${p.emoji}</div>
+      <div class="opt-name">${p.name}</div>
+      <div class="opt-meta">${p.meta}</div>
+    </div>
+  `).join('');
+  $('platform-go-btn').disabled = true;
+  pickerState.platform.selected = '';
+  openPicker('platform');
+}
+
+function selectOption(which, id, el) {
+  el.parentElement.querySelectorAll('.opt-card').forEach(x => x.classList.remove('selected'));
+  el.classList.add('selected');
+  pickerState[which].selected = id;
+  $(`${which}-go-btn`).disabled = false;
+}
+
+// pillset 切换
+document.querySelectorAll('.pillset').forEach(set => {
+  set.addEventListener('click', e => {
+    const p = e.target.closest('.p');
+    if (!p) return;
+    const key = set.dataset.key;
+    // 白底 angles 是多选,其他单选
+    if (key === 'angles') {
+      p.classList.toggle('on');
+    } else {
+      set.querySelectorAll('.p').forEach(x => x.classList.remove('on'));
+      p.classList.add('on');
+    }
+  });
+});
+
+// ============= 开始生成 =============
+function startGen(kind, makeCards) {
+  // 关闭抽屉
+  closePicker(kind === 'white' ? 'white' : kind);
+
+  // 切到对应 tab
+  const tabKey = kind === 'white' ? 'white' : kind;
+  document.querySelectorAll('#asset-tabs .asset-tab').forEach(x =>
+    x.classList.toggle('active', x.dataset.tab === tabKey));
+  currentTab = tabKey;
+
+  // 插入 skeleton 卡到 assets 开头
+  const skeletonItems = makeCards.map((_, i) => ({
+    id: `sk-${Date.now()}-${i}`,
+    kind, skeleton: true,
+    name: '生成中', meta: 'pending',
+    color: '#f0f0f0',
+  }));
+  assets = [...skeletonItems, ...assets];
+  renderAssets();
+
+  // 1.5s 后替换为真实卡
+  setTimeout(() => {
+    const newCards = makeCards.map((c, i) => ({
+      id: `g-${Date.now()}-${i}`,
+      kind,
+      name: c.name,
+      meta: c.meta,
+      color: c.color,
+    }));
+    // 删除 skeleton
+    assets = assets.filter(a => !skeletonItems.find(s => s.id === a.id));
+    // 插入真实卡
+    assets = [...newCards, ...assets];
+    renderAssets();
+    updateCounts();
+    Shell.toast(`已生成 ${newCards.length} 张`, '入资产库');
+  }, 1500);
+}
+
+// 白底生成
+$('white-go-btn').addEventListener('click', () => {
+  const angles = [...document.querySelectorAll('#white-picker-bg .pillset[data-key="angles"] .p.on')].map(x => x.dataset.v);
+  if (!angles.length) { alert('至少选择一个视角'); return; }
+  startGen('white', angles.map((a, i) => ({
+    name: `白底 · ${a}面`,
+    meta: `512×512 · 刚刚生成`,
+    color: i === 0 ? '#fafafa' : i === 1 ? '#f5f5f5' : '#f0f0f0',
+  })));
+});
+
+// 模特生成
+$('model-go-btn').addEventListener('click', () => {
+  if (!pickerState.model.selected) return;
+  const model = MODELS.find(m => m.id === pickerState.model.selected);
+  if (!model) return;
+  const palette = [
+    'linear-gradient(135deg,#fcd5ce,#f8edeb)',
+    'linear-gradient(135deg,#cfe1b9,#e9edc9)',
+    'linear-gradient(135deg,#bee3f8,#c3dafe)',
+    'linear-gradient(135deg,#fde2e4,#fad2e1)',
+  ];
+  startGen('model', palette.map((color, i) => ({
+    name: `${model.name} · 上身 0${i+1}`,
+    meta: `${model.name} · 1024×1024 · 刚刚`,
+    color,
+  })));
+});
+
+// 平台生成
+$('platform-go-btn').addEventListener('click', () => {
+  if (!pickerState.platform.selected) return;
+  const plat = PLATFORMS.find(p => p.id === pickerState.platform.selected);
+  if (!plat) return;
+  const palette = [
+    'linear-gradient(135deg,#fff7ed,#ffedd5)',
+    'linear-gradient(135deg,#fef3c7,#fde68a)',
+    'linear-gradient(135deg,#ecfccb,#d9f99d)',
+    'linear-gradient(135deg,#cffafe,#a5f3fc)',
+  ];
+  startGen('platform', palette.map((color, i) => ({
+    name: `${plat.name} · 0${i+1}`,
+    meta: `${plat.name} · ${plat.meta.split('·')[1]||'800×800'} · 刚刚`,
+    color,
+  })));
+});
+
+// 重跑 & 删除
+function regen(id) {
+  const idx = assets.findIndex(a => a.id === id);
+  if (idx < 0) return;
+  const old = assets[idx];
+  assets[idx] = { ...old, skeleton: true, name: '重跑中', meta: 'pending' };
+  renderAssets();
+  setTimeout(() => {
+    assets[idx] = { ...old, id: `g-${Date.now()}`, meta: `${old.meta.split('·')[0]}· 刚刚重跑` };
+    renderAssets();
+    Shell.toast('已重新生成', old.name);
+  }, 1200);
+}
+function delAsset(id) {
+  const a = assets.find(x => x.id === id);
+  assets = assets.filter(x => x.id !== id);
+  renderAssets();
+  updateCounts();
+  Shell.toast('已删除', a?.name || '');
+}
+
+// ESC 关
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    document.querySelectorAll('.picker-bg.show').forEach(p => p.classList.remove('show'));
+  }
+});
+
+// 初始化
+renderAssets();
+updateCounts();
+</script>
+</body>
+</html>
diff --git a/v2/products.html b/v2/products.html
new file mode 100644
index 0000000..fb963e2
--- /dev/null
+++ b/v2/products.html
@@ -0,0 +1,1787 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>商品库 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── 全局 viewport 高度链 (让右侧 toolbar/分页吸顶吸底) ─── */
+  /* 整页滚动 · 头部 H1+actions sticky 固定 · 其他随页面滚 */
+  .page-head {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    background: var(--background-base);
+    padding-top: 4px;
+    margin-top: -4px;
+  }
+
+  /* ─── 主区 (普通文档流) ─── */
+  .products-main { display: flex; flex-direction: column; }
+  .products-main .result-meta {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+
+  /* ─── 商品分类多选 chip · menu 内多选项 + 计数 + 全选/全清 ─── */
+  .chip-wrap[data-key="cat"] .chip-menu {
+    min-width: 220px;
+    padding: 4px;
+  }
+  .chip-wrap[data-key="cat"] .mi-all {
+    border-bottom: 1px solid var(--border-faint);
+    margin-bottom: 4px;
+    padding-bottom: 4px;
+  }
+  .chip-wrap[data-key="cat"] .mi .cat-count {
+    margin-left: auto;
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  .chip-wrap[data-key="cat"] .mi.selected .cat-count { color: var(--heat); }
+  .chip .chip-count {
+    display: inline-flex; align-items: center; justify-content: center;
+    height: 18px; min-width: 18px; padding: 0 5px;
+    background: var(--heat-12); color: var(--heat);
+    border: 1px solid var(--heat-20);
+    border-radius: var(--r-pill);
+    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
+    letter-spacing: .02em;
+    margin-left: 2px;
+  }
+  .product-grid-wrap {
+    /* 滚动区与外栏视觉对齐 */
+    margin: 0 -8px;
+    padding: 2px 8px 24px;
+  }
+
+  /* ─── 生成类型选择 modal ─── */
+  .gen-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .gen-choice-card {
+    display: flex; flex-direction: column; gap: 10px;
+    padding: 18px 16px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
+  }
+  .gen-choice-card:hover {
+    border-color: var(--heat);
+    background: var(--surface);
+    transform: translateY(-1px);
+  }
+  .gen-choice-card .gc-ic {
+    width: 36px; height: 36px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    display: grid; place-items: center;
+    color: var(--black-alpha-72);
+  }
+  .gen-choice-card:hover .gc-ic { color: var(--heat); border-color: var(--heat-20); background: var(--heat-12); }
+  .gen-choice-card .gc-ic svg { width: 18px; height: 18px; }
+  .gen-choice-card .gc-t { font-size: 14px; font-weight: 600; color: var(--accent-black); }
+  .gen-choice-card .gc-d { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; line-height: 1.45; }
+
+  .product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 16px;
+  }
+  .product-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: background .15s, border-color .15s;
+    position: relative;
+    overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .product-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
+  .product-thumb { aspect-ratio: 1.4 / 1; }
+
+  .product-body {
+    padding: 14px 14px 12px;
+    flex: 1;
+  }
+  .product-name {
+    font-size: 14px; font-weight: 600;
+    color: var(--accent-black);
+    line-height: 1.3;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .product-cat {
+    display: inline-flex; align-items: center;
+    margin-top: 8px;
+    padding: 2px 8px;
+    background: var(--background-lighter);
+    color: var(--black-alpha-72);
+    border-radius: var(--r-sm);
+    font-size: 11.5px;
+  }
+  .product-date {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--black-alpha-48);
+    margin-top: 10px;
+    letter-spacing: .02em;
+  }
+
+  /* ─── 卡片底栏 · V2.1 克制版 (线图标 + mono 文本) ─── */
+  .product-footer {
+    display: flex; align-items: center; gap: 8px;
+    padding: 10px 12px;
+    border-top: 1px solid var(--border-faint);
+    font-size: 11.5px;
+    color: var(--black-alpha-56);
+    background: var(--background-base);
+  }
+  .product-footer .stat {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 3px 8px;
+    border-radius: var(--r-sm);
+    font-family: var(--font-mono);
+    letter-spacing: .02em;
+    white-space: nowrap;       /* 防止"素材"等中文被挤压成竖排 */
+    flex-shrink: 0;
+    border: 1px solid transparent;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .product-footer .stat[data-type] { cursor: pointer; }
+  .product-footer .stat[data-type]:hover {
+    background: var(--heat-12);
+    color: var(--heat);
+    border-color: var(--heat-20);
+  }
+  .product-footer .stat[data-type]:hover svg { color: var(--heat); }
+  .product-footer .stat[data-type]:hover b { color: var(--heat); }
+  .product-footer .stat svg {
+    width: 13px; height: 13px;
+    color: var(--black-alpha-48);
+    flex-shrink: 0;
+    transition: color var(--t-base);
+  }
+  .product-footer .stat b {
+    color: var(--accent-black);
+    font-weight: 600;
+    transition: color var(--t-base);
+  }
+  /* default ↔ hover 文本切换 */
+  .product-footer .stat .stat-hover { display: none; }
+  .product-footer .stat[data-type]:hover .stat-default { display: none; }
+  .product-footer .stat[data-type]:hover .stat-hover { display: inline; }
+  .product-footer .sep {
+    color: var(--black-alpha-24);
+    font-family: var(--font-mono);
+    flex-shrink: 0;
+  }
+
+  /* ─── 底部分页 (吸底) ─── */
+  .pagination {
+    flex-shrink: 0;
+    display: flex; align-items: center; gap: 16px;
+    padding: 14px 0;
+    border-top: 1px solid var(--border-faint);
+    background: var(--background-base);
+    font-size: 12.5px;
+    color: var(--black-alpha-56);
+  }
+  .pagination[hidden] { display: none; }
+  .pagination .page-size { transition: border-color var(--t-base), color var(--t-base); }
+  .pagination .page-size:hover { border-color: var(--black-alpha-32); color: var(--accent-black); }
+  .pagination .pages .ellipsis {
+    min-width: 22px; height: 30px;
+    display: inline-flex; align-items: center; justify-content: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono);
+  }
+  .pagination .total { font-family: var(--font-mono); letter-spacing: .02em; }
+  .pagination .page-size {
+    display: inline-flex; align-items: center; gap: 4px;
+    height: 30px;
+    padding: 0 10px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 12.5px;
+    color: var(--black-alpha-72);
+  }
+  .pagination .page-size svg { width: 10px; height: 10px; opacity: .6; }
+  .pagination .pages {
+    display: inline-flex; gap: 4px;
+    margin-left: auto;
+  }
+  .pagination .pages button {
+    min-width: 30px; height: 30px;
+    padding: 0 8px;
+    border: 1px solid var(--border-faint);
+    background: var(--surface);
+    border-radius: var(--r-sm);
+    cursor: pointer;
+    font-size: 12.5px;
+    color: var(--black-alpha-72);
+    font-family: inherit;
+    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
+  }
+  .pagination .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); }
+  .pagination .pages button.active {
+    background: var(--heat);
+    color: var(--accent-white);
+    border-color: var(--heat);
+    font-weight: 600;
+  }
+  .pagination .pages button:disabled { opacity: .4; cursor: not-allowed; }
+  .pagination .jump {
+    display: inline-flex; align-items: center; gap: 6px;
+    color: var(--black-alpha-56);
+  }
+  .pagination .jump input {
+    width: 44px; height: 30px;
+    border: 1px solid var(--border-faint);
+    background: var(--surface);
+    border-radius: var(--r-sm);
+    text-align: center;
+    font-size: 12.5px;
+    color: var(--accent-black);
+    font-family: inherit;
+    outline: none;
+    transition: border-color var(--t-base);
+  }
+  .pagination .jump input:focus { border-color: var(--heat-40); }
+
+  /* 响应式 */
+  @media (max-width: 900px) {
+    .toolbar .search-inline { max-width: 100%; flex-basis: 100%; }
+  }
+
+  /* ============================================================
+     新建商品 drawer · 复用 .drawer (restraint.css)
+     在 products.html 上原地打开, 后面保留商品网格作为上下文
+     ============================================================ */
+  .pc-drawer { width: 820px; max-width: 100vw; }
+  .pc-drawer .drawer-h h3 { font-size: 16px; font-weight: 600; }
+  .pc-drawer .drawer-b { padding: 24px 28px; }
+  .pc-drawer .drawer-b .form-card {
+    background: transparent; border: 0; padding: 0; border-radius: 0;
+  }
+  .pc-drawer .drawer-f {
+    padding: 14px 24px; background: var(--surface); align-items: center;
+  }
+  .pc-drawer .drawer-f .btn-guide {
+    margin-right: auto;
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 13px; color: var(--black-alpha-56);
+    background: transparent; border: 0; cursor: pointer;
+    padding: 8px 10px; border-radius: var(--r-md);
+    font-family: inherit;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .pc-drawer .drawer-f .btn-guide:hover { color: var(--accent-black); background: var(--black-alpha-4); }
+  .pc-drawer .drawer-f .btn-guide svg { width: 14px; height: 14px; }
+
+  /* form-card · 表单容器(drawer 内被去外观,直接铺) */
+  .form-card .form-h {
+    font-size: 15px; font-weight: 600; color: var(--accent-black);
+    margin-bottom: 18px; padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-faint);
+  }
+  .form-card .field { margin-bottom: 16px; }
+  .form-card .field:last-child { margin-bottom: 0; }
+  .form-card .field-row {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
+  }
+  .form-card .field-label {
+    display: block; font-size: 13px; font-weight: 500;
+    color: var(--accent-black); margin-bottom: 6px;
+  }
+  .form-card .field-label .req { color: var(--heat); margin-left: 2px; }
+  .form-card .field-label .opt {
+    color: var(--black-alpha-48); font-weight: 400; font-size: 12px; margin-left: 6px;
+  }
+  .form-card .input,
+  .form-card .select {
+    width: 100%; height: 38px;
+    background: var(--background-lighter);
+    border: 1px solid var(--black-alpha-12);
+    border-radius: var(--r-md);
+    padding: 0 14px;
+    font-size: 13.5px; color: var(--accent-black);
+    outline: none; font-family: inherit;
+    transition: border-color var(--t-base);
+  }
+  .form-card .input:focus,
+  .form-card .select:focus {
+    border-color: var(--heat-40);
+    box-shadow: inset 0 0 0 1px var(--heat-40);
+  }
+
+  /* 商品主图 · 上传(左) + 示例(右) */
+  .form-card .pf-upload-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+    gap: 16px; align-items: stretch;
+  }
+  .form-card .pf-upload-zone {
+    border: 1.5px dashed var(--black-alpha-24);
+    border-radius: var(--r-md);
+    padding: 28px 20px;
+    background: var(--background-lighter);
+    cursor: pointer; text-align: center;
+    transition: border-color var(--t-base), background var(--t-base);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    min-height: 180px;
+  }
+  .form-card .pf-upload-zone:hover { border-color: var(--heat); background: var(--heat-8); }
+  .form-card .pf-upload-zone .uz-ic {
+    width: 44px; height: 44px;
+    margin: 0 auto 10px;
+    background: var(--surface);
+    border: 1px solid var(--heat-20);
+    border-radius: var(--r-md);
+    color: var(--heat);
+    display: grid; place-items: center;
+  }
+  .form-card .pf-upload-zone .uz-ic svg { width: 20px; height: 20px; }
+  .form-card .pf-upload-zone .uz-t { font-size: 14px; color: var(--accent-black); font-weight: 500; }
+  .form-card .pf-upload-zone .uz-t strong { color: var(--heat); font-weight: 600; }
+  .form-card .pf-upload-zone .uz-d {
+    margin-top: 8px;
+    font-family: var(--font-mono); font-size: 11.5px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+  }
+  /* 示例图 · 纵向卡片 */
+  .form-card .pf-example {
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 16px;
+    display: flex; flex-direction: column; gap: 10px;
+  }
+  .form-card .pf-example .ex-h {
+    font-size: 13px; font-weight: 600; color: var(--accent-black);
+  }
+  .form-card .pf-example .ex-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
+  }
+  .form-card .pf-example .ex-grid .ex-thumb {
+    aspect-ratio: 1;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    overflow: hidden; position: relative;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+  }
+  .form-card .pf-example .ex-grid .ex-thumb svg { width: 22px; height: 22px; }
+  .form-card .pf-example .ex-grid .ex-thumb::after {
+    content: ''; position: absolute; inset: 0;
+    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px);
+    pointer-events: none;
+  }
+  .form-card .pf-example .ex-d {
+    font-size: 12px; color: var(--black-alpha-56); line-height: 1.5;
+  }
+
+  .form-card .pf-grid {
+    display: grid; grid-template-columns: repeat(5, 1fr);
+    gap: 8px; margin-top: 12px;
+  }
+  .form-card .pf-grid:empty { display: none; }
+  .form-card .pf-thumb {
+    aspect-ratio: 1;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    position: relative; overflow: hidden; cursor: pointer;
+  }
+  .form-card .pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
+  .form-card .pf-thumb .pf-x {
+    position: absolute; top: 4px; right: 4px;
+    width: 22px; height: 22px;
+    background: rgba(0,0,0,.7); color: var(--accent-white);
+    border: 0; border-radius: 50%; cursor: pointer;
+    display: grid; place-items: center;
+    opacity: 0; transition: opacity var(--t-base);
+  }
+  .form-card .pf-thumb:hover .pf-x { opacity: 1; }
+  .form-card .pf-thumb .pf-x svg { width: 11px; height: 11px; }
+
+  /* 核心卖点 · bullet-list */
+  .form-card .bullet-list { list-style: none; padding: 0; margin: 0; }
+  .form-card .bullet-list .bl-item,
+  .form-card .bullet-list .bl-add {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    margin-bottom: 6px;
+    font-size: 13.5px;
+  }
+  .form-card .bullet-list .bl-add { background: transparent; border-style: dashed; }
+  .form-card .bullet-list .num {
+    width: 22px; height: 22px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-family: var(--font-mono);
+    font-size: 11px; color: var(--heat); font-weight: 700;
+    display: grid; place-items: center; flex-shrink: 0;
+  }
+  .form-card .bullet-list .bl-text { flex: 1; color: var(--accent-black); }
+  .form-card .bullet-list .bl-input {
+    flex: 1; background: transparent; border: 0; outline: none;
+    font-size: 13.5px; color: var(--accent-black); font-family: inherit;
+  }
+  .form-card .bullet-list .bl-x {
+    width: 22px; height: 22px;
+    color: var(--black-alpha-48);
+    cursor: pointer; display: grid; place-items: center;
+    border-radius: var(--r-sm);
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .form-card .bullet-list .bl-x:hover { color: var(--accent-crimson); background: var(--crimson-bg); }
+  .form-card .bullet-list .bl-x svg { width: 11px; height: 11px; }
+  @media (max-width: 900px) {
+    .pc-drawer .drawer-b .pf-upload-row { grid-template-columns: 1fr; }
+  }
+
+  /* ============================================================
+     视图切换 · 网格 / 列表
+     ============================================================ */
+  .view-tog {
+    display: inline-flex;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    padding: 2px;
+    flex-shrink: 0;
+  }
+  .view-tog button {
+    width: 30px; height: 28px;
+    display: grid; place-items: center;
+    border: 0;
+    background: transparent;
+    color: var(--black-alpha-48);
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .view-tog button:hover { color: var(--accent-black); }
+  .view-tog button.active {
+    background: var(--accent-black);
+    color: var(--accent-white);
+  }
+  .view-tog button svg { width: 13px; height: 13px; }
+
+  /* 列表视图: 把网格改为单列, 每行横向布局 */
+  .product-grid.list-view { display: flex; flex-direction: column; gap: 8px; }
+  .product-grid.list-view .product-card {
+    display: grid;
+    grid-template-columns: 100px 1fr auto;
+    gap: 16px;
+    padding: 12px 16px;
+    align-items: center;
+  }
+  .product-grid.list-view .product-thumb {
+    width: 100px; height: 70px; aspect-ratio: auto;
+    margin: 0; border-radius: var(--r-sm);
+  }
+  .product-grid.list-view .product-body {
+    padding: 0;
+    display: flex; align-items: center; gap: 14px;
+  }
+  .product-grid.list-view .product-name { font-size: 14px; }
+  .product-grid.list-view .product-cat,
+  .product-grid.list-view .product-date {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    margin-top: 0;
+  }
+  .product-grid.list-view .product-footer {
+    border-top: 0;
+    padding: 0;
+    background: transparent;
+    gap: 6px;
+  }
+
+  /* ============================================================
+     批量编辑模式
+     ============================================================ */
+  .product-card .card-check {
+    position: absolute;
+    top: 10px; left: 10px;
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    background: var(--surface);
+    border: 2px solid var(--black-alpha-32);
+    display: none;
+    place-items: center;
+    color: var(--accent-white);
+    z-index: 5;
+    pointer-events: none;
+  }
+  .product-card .card-check svg { width: 11px; height: 11px; opacity: 0; }
+  body.edit-mode .product-card { cursor: pointer; }
+  body.edit-mode .product-card .card-check { display: grid; }
+  body.edit-mode .product-card.selected .card-check {
+    background: var(--heat);
+    border-color: var(--heat);
+  }
+  body.edit-mode .product-card.selected .card-check svg { opacity: 1; }
+  body.edit-mode .product-card.selected {
+    border-color: var(--heat);
+    box-shadow: 0 0 0 1px var(--heat) inset;
+  }
+  /* 编辑模式下,卡片底部 stat 和 more-btn 静默 (不能点击跳转) */
+  body.edit-mode .product-footer .stat,
+  body.edit-mode .product-card .card-del-btn { opacity: 0 !important; pointer-events: none !important; }
+
+  /* 浮动 action bar */
+  .bulk-bar {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent-black);
+    color: var(--accent-white);
+    border-radius: var(--r-md);
+    padding: 10px 14px 10px 18px;
+    display: none;
+    align-items: center;
+    gap: 16px;
+    box-shadow: 0 8px 24px rgba(0,0,0,.18);
+    z-index: 100;
+    font-size: 13px;
+  }
+  body.edit-mode .bulk-bar { display: inline-flex; }
+  .bulk-bar .ct { font-family: var(--font-mono); letter-spacing: .02em; }
+  .bulk-bar .ct b { color: var(--heat); font-weight: 700; padding: 0 3px; }
+  .bulk-bar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); }
+  .bulk-bar button {
+    height: 30px;
+    padding: 0 12px;
+    background: transparent;
+    border: 1px solid rgba(255,255,255,.24);
+    border-radius: var(--r-sm);
+    color: var(--accent-white);
+    font-size: 12.5px;
+    font-family: inherit;
+    cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px;
+    transition: background var(--t-base), border-color var(--t-base);
+  }
+  .bulk-bar button:hover { background: rgba(255,255,255,.08); }
+  .bulk-bar button.danger {
+    background: var(--accent-crimson, #c43d3d);
+    border-color: var(--accent-crimson, #c43d3d);
+  }
+  .bulk-bar button.danger:hover { filter: brightness(1.06); }
+  .bulk-bar button svg { width: 12px; height: 12px; }
+  .bulk-bar .clear-sel {
+    color: rgba(255,255,255,.6);
+    font-size: 12px;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 4px 6px;
+  }
+  .bulk-bar .clear-sel:hover { color: var(--accent-white); }
+
+  /* edit-mode 下「编辑商品」按钮变成「完成」 */
+  .btn-edit-toggle.active {
+    background: var(--accent-black);
+    color: var(--accent-white);
+    border-color: var(--accent-black);
+  }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>商品库</h1>
+    <div class="sub"><span class="mono">// <span id="sku-count">0</span> SKU</span> · 商品信息会作为脚本和资产生成的素材</div>
+  </div>
+  <div class="actions">
+    <button class="btn btn-edit-toggle" type="button" id="edit-toggle-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
+      <span class="btn-edit-label">管理商品</span>
+    </button>
+    <button class="btn btn-primary" type="button" id="open-new-product">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
+      新建商品
+    </button>
+  </div>
+</div>
+
+<!-- ===== 主区 (三段式) ===== -->
+<div class="products-main">
+
+    <!-- 顶部固定: toolbar + meta -->
+    <div class="toolbar">
+      <div class="search-inline">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        <input class="input" id="search-input" placeholder="搜索商品名称、品牌">
+      </div>
+      <div class="chip-wrap" data-key="cat">
+        <button class="chip" type="button">
+          <span class="chip-label">商品分类</span>
+          <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+        </button>
+        <div class="chip-menu"></div>
+      </div>
+      <div class="chip-wrap" data-key="date">
+        <button class="chip" type="button"><span class="chip-label">创建时间</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+        <div class="chip-menu"></div>
+      </div>
+      <button class="clear-filters" id="clear-filters" type="button" hidden>
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+        清空筛选
+      </button>
+    </div>
+
+    <div class="result-meta" id="result-meta">
+      <span>// 显示 <span class="count">7</span> / 7 个商品</span>
+      <div class="view-tog" style="margin-left:auto" id="view-tog">
+        <button type="button" class="active" data-view="grid" title="网格视图">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+        </button>
+        <button type="button" data-view="list" title="列表视图">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 中间滚动: 商品网格 -->
+    <div class="product-grid-wrap">
+      <div class="product-grid" id="product-grid">
+        <div class="product-card" data-cat="美妆个护" data-name="透真玻尿酸补水面膜" data-tags="熬夜党 敏感肌" data-added="1" data-assets="124" data-videos="36" data-date="2026-05-15" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">补水面膜 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">透真玻尿酸补水面膜</div>
+            <div class="product-cat">美妆个护</div>
+            <div class="product-date">2026-05-15 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>124</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>36</b>
+            </span>
+            
+          </div>
+        </div>
+
+        <div class="product-card" data-cat="数码 3C" data-name="南卡 Lite Pro 蓝牙耳机" data-tags="通勤 运动" data-added="2" data-assets="96" data-videos="28" data-date="2026-05-12" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">蓝牙耳机 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">南卡 Lite Pro 蓝牙耳机</div>
+            <div class="product-cat">数码 3C</div>
+            <div class="product-date">2026-05-12 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>96</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>28</b>
+            </span>
+            
+          </div>
+        </div>
+
+        <div class="product-card" data-cat="食品饮料" data-name="滋啦速食牛肉面 6 桶装" data-tags="加班 独居" data-added="3" data-assets="96" data-videos="24" data-date="2026-05-10" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">速食牛肉面 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">滋啦速食牛肉面 · 6 桶装</div>
+            <div class="product-cat">食品饮料</div>
+            <div class="product-date">2026-05-10 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>96</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>24</b>
+            </span>
+            
+          </div>
+        </div>
+
+        <div class="product-card" data-cat="美妆个护" data-name="透真清透物理防晒霜" data-tags="SPF50 通勤" data-added="4" data-assets="76" data-videos="18" data-date="2026-05-08" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">防晒霜 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">透真清透物理防晒霜</div>
+            <div class="product-cat">美妆个护</div>
+            <div class="product-date">2026-05-08 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>76</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>18</b>
+            </span>
+            
+          </div>
+        </div>
+
+        <div class="product-card" data-cat="食品饮料" data-name="三顿半同款冻干咖啡粉" data-tags="提神 早八" data-added="5" data-assets="68" data-videos="21" data-date="2026-05-05" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">咖啡冻干粉 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">三顿半同款冻干咖啡粉</div>
+            <div class="product-cat">食品饮料</div>
+            <div class="product-date">2026-05-05 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>68</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>21</b>
+            </span>
+            
+          </div>
+        </div>
+
+        <div class="product-card" data-cat="家居家电" data-name="小熊 4L 可视空气炸锅" data-tags="小户型 健康" data-added="6" data-assets="54" data-videos="16" data-date="2026-05-03" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">空气炸锅 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">小熊 4L 可视空气炸锅</div>
+            <div class="product-cat">家居家电</div>
+            <div class="product-date">2026-05-03 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>54</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>16</b>
+            </span>
+            
+          </div>
+        </div>
+
+        <div class="product-card" data-cat="运动户外" data-name="露露同款裸感瑜伽裤" data-tags="健身房 通勤" data-added="7" data-assets="42" data-videos="12" data-date="2026-04-30" onclick="location.href='product-detail.html?t='+Date.now()">
+          <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+          <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+          <div class="placeholder product-thumb"><span class="ph-frame">瑜伽裤 · 1200×800</span></div>
+          <div class="product-body">
+            <div class="product-name">露露同款裸感瑜伽裤</div>
+            <div class="product-cat">运动户外</div>
+            <div class="product-date">2026-04-30 创建</div>
+          </div>
+          <div class="product-footer">
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+              素材 <b>42</b>
+            </span>
+            <span class="sep">·</span>
+            <span class="stat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+              视频 <b>12</b>
+            </span>
+            
+          </div>
+        </div>
+      </div>
+
+      <div class="empty-state" id="empty">
+        <div class="ic-empty">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        </div>
+        <h3>没有匹配的商品</h3>
+        <p>// 试试切换分类或修改搜索词</p>
+      </div>
+    </div>
+
+    <!-- 底部固定: 分页 -->
+    <div class="pagination" id="pagination" hidden>
+      <span class="total">共 <b id="page-total">0</b> 条</span>
+      <button class="page-size" type="button" id="page-size-btn" title="切换每页条数">
+        <span id="page-size-label">12 条/页</span>
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
+      </button>
+      <span class="pages" id="page-list"></span>
+      <span class="jump">跳至 <input type="number" min="1" value="1" id="page-jump"> 页</span>
+    </div>
+
+</div><!-- /.products-main -->
+
+</div><!-- /#page -->
+
+<!-- ============================================================
+     新建商品 · 右侧 Drawer · 在商品库页面原地打开
+     ============================================================ -->
+<div class="drawer-bg" id="pc-drawer-bg"></div>
+<aside class="drawer pc-drawer" id="pc-drawer" role="dialog" aria-label="新建商品" aria-hidden="true">
+  <div class="drawer-h">
+    <h3>新建商品</h3>
+    <button class="x" type="button" id="pc-drawer-close" aria-label="关闭">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+    </button>
+  </div>
+
+  <div class="drawer-b">
+    <div class="form-card">
+      <div class="field">
+        <label class="field-label">商品名称<span class="req">*</span></label>
+        <input class="input" id="pf-name" placeholder="请输入商品名称(必填)" maxlength="100">
+      </div>
+
+      <div class="field-row">
+        <div>
+          <label class="field-label">品类<span class="req">*</span></label>
+          <select class="select" id="pf-cat">
+            <option>美妆个护</option>
+            <option>服饰内衣</option>
+            <option>食品饮料</option>
+            <option>家居家电</option>
+            <option>数码 3C</option>
+            <option>个护清洁</option>
+            <option>运动户外</option>
+            <option>母婴亲子</option>
+          </select>
+        </div>
+        <div>
+          <label class="field-label">目标人群<span class="opt">(选填)</span></label>
+          <input class="input" id="pf-target" placeholder="例: 22-32 岁女性、敏感肌、办公室通勤">
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="field-label">商品主图<span class="req">*</span></label>
+        <input type="file" id="pf-file" accept="image/*" multiple hidden>
+        <div class="pf-upload-row">
+          <div class="pf-upload-zone" id="pf-zone">
+            <div class="uz-ic">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            </div>
+            <div class="uz-t">点击上传或<strong>拖拽图片</strong>到此处</div>
+            <div class="uz-d">// 支持 JPG、PNG 格式,建议尺寸 800×800 以上,大小不超过 10MB</div>
+          </div>
+          <div class="pf-example">
+            <div class="ex-h">示例图</div>
+            <div class="ex-grid">
+              <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10l1 4v12H6V8l1-4z"/><path d="M9 4v3M15 4v3M9 11h6M9 14h6"/></svg></div>
+              <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="5" width="12" height="15" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div>
+              <div class="ex-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3h8l1 5v12H7V8l1-5z"/><circle cx="12" cy="13" r="2.5"/></svg></div>
+            </div>
+            <div class="ex-d">优质的商品图有助于生成更好的素材效果</div>
+          </div>
+        </div>
+        <div class="pf-grid" id="pf-grid"></div>
+      </div>
+
+      <div class="field" style="margin-bottom: 0;">
+        <label class="field-label">核心卖点<span class="req">*</span></label>
+        <ul class="bullet-list" id="pf-bullets" data-bl>
+          <li class="bl-add"><span class="num">+</span><input class="bl-input" placeholder="添加新卖点 · 回车确认"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="drawer-f">
+    <button class="btn-guide" type="button" onclick="Shell.toast('使用指南', '点击查看完整填写指南')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 4M12 17h.01"/></svg>
+      使用指南
+    </button>
+    <button class="btn" type="button" id="pc-cancel-btn">取消</button>
+    <button class="btn btn-primary" type="button" id="pc-save-btn">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+      创建商品
+    </button>
+  </div>
+</aside>
+
+<!-- ===== 生成类型选择 modal ===== -->
+<div class="modal-bg" id="gen-choice-bg">
+  <div class="modal" role="dialog" aria-labelledby="gen-choice-ti" style="max-width:560px">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m" style="background:var(--heat-12);color:var(--heat)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+      </div>
+      <div class="ti" id="gen-choice-ti"><span id="gen-choice-target">—</span><span>// PICK ONE</span></div>
+    </div>
+    <div class="modal-b" style="padding-top:12px">
+      <div class="gen-choice-grid">
+        <button type="button" class="gen-choice-card" data-go="model-photo">
+          <div class="gc-ic">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>
+          </div>
+          <div class="gc-t">模特上身图</div>
+          <div class="gc-d">// 选模特 + 商品 → AI 生成穿搭/试用图</div>
+        </button>
+        <button type="button" class="gen-choice-card" data-go="platform-cover">
+          <div class="gc-ic">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18M9 5v14"/></svg>
+          </div>
+          <div class="gc-t">平台套图</div>
+          <div class="gc-d">// 多平台尺寸自动生成 (抖音/淘宝/小红书等)</div>
+        </button>
+      </div>
+    </div>
+    <div class="modal-f">
+      <button class="btn" type="button" id="gen-choice-cancel">取消</button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 删除确认 modal ===== -->
+<div class="modal-bg" id="del-confirm-bg">
+  <div class="modal" role="dialog" aria-labelledby="del-confirm-ti">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m" style="background:var(--crimson-bg,#fdebea);color:var(--accent-crimson,#c43d3d)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+      </div>
+      <div class="ti" id="del-confirm-ti">确认删除商品<span>// CONFIRM DELETE</span></div>
+    </div>
+    <div class="modal-b" id="del-confirm-body">即将删除 <span class="mono-acc" id="del-confirm-target">—</span>,此操作无法撤销,商品下生成的素材记录也将一并清理。</div>
+    <div class="modal-f" id="del-confirm-foot">
+      <button class="btn" type="button" id="del-confirm-cancel">取消</button>
+      <button class="btn" type="button" id="del-confirm-ok" style="background:var(--accent-crimson,#c43d3d);color:var(--accent-white);border-color:var(--accent-crimson,#c43d3d)">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+        确认删除
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 批量编辑 浮动 action bar ===== -->
+<div class="bulk-bar" id="bulk-bar">
+  <span class="ct">已选 <b id="bulk-count">0</b> 项</span>
+  <button class="clear-sel" type="button" id="bulk-clear">清空</button>
+  <span class="sep"></span>
+  <button class="danger" type="button" id="bulk-del">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+    删除所选
+  </button>
+  <button type="button" id="bulk-exit">完成</button>
+</div>
+
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({ active: 'products', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '商品库' }] });
+
+// ============== Products: 商品分类多选 + 搜索 + 创建时间筛选 ==============
+// state.cats: Set<string>,空集 = 全部
+const PAGE_SIZES = [12, 24, 48, 96];
+const state = { cats: new Set(), search: '', date: 'all', page: 1, pageSize: 12 };
+
+// 抖音爆款品类 · TOP 8 (全部显示,即使没商品)
+const CATEGORIES = ['美妆个护', '服饰内衣', '食品饮料', '家居家电', '数码 3C', '个护清洁', '运动户外', '母婴亲子'];
+
+const DATE_LABEL = {
+  'all': '全部时间',
+  '7d':  '最近 7 天',
+  '30d': '最近 30 天',
+  '90d': '最近 90 天',
+};
+
+const grid = document.getElementById('product-grid');
+const cards = [...grid.querySelectorAll('.product-card')];
+const TOTAL = cards.length;
+const CAT_COUNT = Object.fromEntries(CATEGORIES.map(c =>
+  [c, cards.filter(card => card.dataset.cat === c).length]
+));
+
+// 同步计数: 大标题 SKU + 侧栏徽章
+document.getElementById('sku-count').textContent = TOTAL;
+const sidebarBadge = document.querySelector('aside.sidebar a[href="products.html"] .pill-mini');
+if (sidebarBadge) sidebarBadge.textContent = TOTAL;
+
+// ─── 卡片底部 stat 增强 · hover 切换文案 + 直跳生成入口 ───
+cards.forEach(card => {
+  card.querySelectorAll('.product-footer .stat').forEach(stat => {
+    const text = stat.textContent.trim();
+    const m = text.match(/^(素材|视频)\s*(\d+)/);
+    if (!m) return;
+    const label = m[1];
+    const num = m[2];
+    const isAsset = label === '素材';
+    const cta = isAsset ? '+ 去生成素材' : '+ 去生成视频';
+    const svg = stat.querySelector('svg');
+    // 重组结构: <svg> <span.stat-default>素材 <b>N</b></span> <span.stat-hover>+ 去生成素材</span>
+    stat.innerHTML = '';
+    if (svg) stat.appendChild(svg);
+    const dft = document.createElement('span');
+    dft.className = 'stat-default';
+    dft.innerHTML = `${label} <b>${num}</b>`;
+    const hv = document.createElement('span');
+    hv.className = 'stat-hover';
+    hv.textContent = cta;
+    stat.appendChild(dft);
+    stat.appendChild(hv);
+    stat.dataset.type = isAsset ? 'asset' : 'video';
+    stat.title = isAsset ? '去生成 AI 素材' : '去生成视频项目';
+    stat.addEventListener('click', e => {
+      e.stopPropagation();
+      const name = card.dataset.name || '';
+      if (isAsset) {
+        // 弹出选择: 模特上身图 / 平台套图
+        openGenAssetChoice(name);
+      } else {
+        location.href = 'projects-new.html?t=' + Date.now() + '&product=' + encodeURIComponent(name);
+      }
+    });
+  });
+});
+
+// ─── 生成类型选择 modal (素材生成 → 选 模特上身图 / 平台套图) ───
+const genChoiceBg = document.getElementById('gen-choice-bg');
+const genChoiceTarget = document.getElementById('gen-choice-target');
+const genChoiceCancel = document.getElementById('gen-choice-cancel');
+let _genChoiceProduct = '';
+function openGenAssetChoice(productName) {
+  _genChoiceProduct = productName || '';
+  genChoiceTarget.textContent = _genChoiceProduct || '该商品';
+  genChoiceBg.classList.add('show');
+  document.body.style.overflow = 'hidden';
+}
+function closeGenAssetChoice() {
+  genChoiceBg.classList.remove('show');
+  document.body.style.overflow = '';
+}
+genChoiceCancel.addEventListener('click', closeGenAssetChoice);
+genChoiceBg.addEventListener('click', e => {
+  if (e.target === genChoiceBg) closeGenAssetChoice();
+});
+genChoiceBg.querySelectorAll('.gen-choice-card').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const go = btn.dataset.go;
+    const target = (go === 'model-photo') ? 'model-photo.html' : 'platform-cover.html';
+    const url = target + '?t=' + Date.now() + '&product=' + encodeURIComponent(_genChoiceProduct);
+    closeGenAssetChoice();
+    location.href = url;
+  });
+});
+
+// ─── 删除确认 modal (PRD §6.3: 已被项目引用时禁止强删) ───
+// 模拟: 某些商品被项目引用 (data-refs="项目A,项目B")
+// 真实环境从后台查 product → projects 映射
+const PRODUCT_REFS = {
+  '透真玻尿酸补水面膜': ['夏日水嫩计划', '七夕主题推广'],
+  '南卡 Lite Pro 蓝牙耳机': ['通勤好物']
+};
+function getRefs(card) {
+  const name = card.dataset.name || '';
+  return PRODUCT_REFS[name] || [];
+}
+
+const delBg = document.getElementById('del-confirm-bg');
+const delBody = document.getElementById('del-confirm-body');
+const delFoot = document.getElementById('del-confirm-foot');
+const delCancel = document.getElementById('del-confirm-cancel');
+const delOk = document.getElementById('del-confirm-ok');
+let _delQueue = [];
+
+function setFootDeletable() {
+  delFoot.innerHTML = '';
+  delFoot.appendChild(delCancel);
+  delFoot.appendChild(delOk);
+}
+function setFootBlocked() {
+  delFoot.innerHTML = '';
+  const okBtn = document.createElement('button');
+  okBtn.className = 'btn btn-primary';
+  okBtn.type = 'button';
+  okBtn.textContent = '我知道了';
+  okBtn.addEventListener('click', closeDelConfirm);
+  delFoot.appendChild(okBtn);
+}
+
+function openDelConfirm(targets) {
+  // 分组: 可删除 / 被引用 (PRD §6.3 软删除规则)
+  const blocked = targets.filter(c => getRefs(c).length > 0);
+  const deletable = targets.filter(c => getRefs(c).length === 0);
+
+  // 全部被引用 → 阻断式提示
+  if (deletable.length === 0 && blocked.length > 0) {
+    const c = blocked[0];
+    const refs = getRefs(c);
+    if (blocked.length === 1) {
+      delBody.innerHTML = `<span class="mono-acc">${c.dataset.name}</span> 当前被 <b>${refs.length}</b> 个项目使用,无法直接删除。请先在以下项目中解除引用:<br><br>` +
+        refs.map(r => `<span class="mono-acc" style="margin-right:6px">${r}</span>`).join('');
+    } else {
+      delBody.innerHTML = `所选 <b>${blocked.length}</b> 个商品均被项目引用,无法直接删除。请先解除引用后重试。`;
+    }
+    setFootBlocked();
+    delBg.classList.add('show');
+    _delQueue = [];
+    return;
+  }
+
+  _delQueue = deletable;
+  if (deletable.length === 1 && blocked.length === 0) {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + deletable[0].dataset.name + '</span>,此操作无法撤销,商品下生成的素材记录也将一并清理。';
+  } else if (blocked.length > 0) {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + deletable.length + ' 个商品</span>,其中 <b>' + blocked.length + '</b> 个被项目引用已跳过。可删除的将一并清理素材记录。';
+  } else {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + deletable.length + ' 个商品</span>,此操作无法撤销,这些商品下生成的素材记录也将一并清理。';
+  }
+  setFootDeletable();
+  delBg.classList.add('show');
+}
+function closeDelConfirm() { delBg.classList.remove('show'); _delQueue = []; }
+delCancel.addEventListener('click', closeDelConfirm);
+delBg.addEventListener('click', e => { if (e.target === delBg) closeDelConfirm(); });
+delOk.addEventListener('click', () => {
+  const n = _delQueue.length;
+  _delQueue.forEach(card => card.remove());
+  closeDelConfirm();
+  const remaining = document.querySelectorAll('.product-card').length;
+  document.getElementById('sku-count').textContent = remaining;
+  const meta = document.querySelector('#result-meta .count');
+  if (meta) meta.textContent = remaining;
+  const sidebar = document.querySelector('aside.sidebar a[href="products.html"] .pill-mini');
+  if (sidebar) sidebar.textContent = remaining;
+  Shell.toast('已删除', n === 1 ? '商品已移除' : '已删除 ' + n + ' 个商品');
+  updateBulkBar();
+});
+
+// ─── 单卡片删除 (新统一 card-del-btn) ───
+document.querySelectorAll('.product-card .card-del-btn').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    const card = btn.closest('.product-card');
+    if (!card) return;
+    openDelConfirm([card]);
+  });
+});
+
+// ─── 视图切换 网格 / 列表 ───
+const productGrid = document.getElementById('product-grid');
+document.querySelectorAll('#view-tog button').forEach(b => {
+  b.addEventListener('click', () => {
+    document.querySelectorAll('#view-tog button').forEach(x => x.classList.remove('active'));
+    b.classList.add('active');
+    if (b.dataset.view === 'list') productGrid.classList.add('list-view');
+    else productGrid.classList.remove('list-view');
+  });
+});
+
+// ─── 批量编辑模式 ───
+const editToggleBtn = document.getElementById('edit-toggle-btn');
+const bulkBar = document.getElementById('bulk-bar');
+const bulkCount = document.getElementById('bulk-count');
+const bulkClear = document.getElementById('bulk-clear');
+const bulkDel = document.getElementById('bulk-del');
+const bulkExit = document.getElementById('bulk-exit');
+const editLabel = editToggleBtn.querySelector('.btn-edit-label');
+
+function getSelectedCards() {
+  return [...document.querySelectorAll('.product-card.selected')];
+}
+function updateBulkBar() {
+  const sel = getSelectedCards();
+  bulkCount.textContent = sel.length;
+  bulkDel.disabled = sel.length === 0;
+  bulkDel.style.opacity = sel.length === 0 ? '.4' : '1';
+  bulkDel.style.cursor = sel.length === 0 ? 'not-allowed' : 'pointer';
+}
+function enterEditMode() {
+  document.body.classList.add('edit-mode');
+  editToggleBtn.classList.add('active');
+  editLabel.textContent = '完成';
+  updateBulkBar();
+}
+function exitEditMode() {
+  document.body.classList.remove('edit-mode');
+  editToggleBtn.classList.remove('active');
+  editLabel.textContent = '编辑商品';
+  document.querySelectorAll('.product-card.selected').forEach(c => c.classList.remove('selected'));
+}
+editToggleBtn.addEventListener('click', () => {
+  if (document.body.classList.contains('edit-mode')) exitEditMode();
+  else enterEditMode();
+});
+bulkExit.addEventListener('click', exitEditMode);
+bulkClear.addEventListener('click', () => {
+  document.querySelectorAll('.product-card.selected').forEach(c => c.classList.remove('selected'));
+  updateBulkBar();
+});
+bulkDel.addEventListener('click', () => {
+  const sel = getSelectedCards();
+  if (!sel.length) return;
+  openDelConfirm(sel);
+});
+
+// 编辑模式下,卡片点击切换 selected (不再跳详情)
+document.querySelectorAll('.product-card').forEach(card => {
+  card.addEventListener('click', e => {
+    if (!document.body.classList.contains('edit-mode')) return; // 非编辑模式走原 onclick (跳详情)
+    // capture 阶段必须用 stopImmediatePropagation 才能阻止 element.onclick (inline onclick="")
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    card.classList.toggle('selected');
+    updateBulkBar();
+  }, true); // capture: 早于 inline onclick
+});
+
+const checkSvg = '<svg class="mi-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg>';
+
+// ====== 商品分类 chip · 多选 ======
+const catWrap = document.querySelector('.chip-wrap[data-key="cat"]');
+const catMenu = catWrap.querySelector('.chip-menu');
+
+function renderCatMenu() {
+  const allSelected = state.cats.size === 0;
+  const allRow = `<div class="mi mi-all${allSelected ? ' selected' : ''}" data-value="__all__">${checkSvg}<span>全部商品</span><span class="cat-count">${TOTAL}</span></div>`;
+  const items = CATEGORIES
+    .filter(c => CAT_COUNT[c] > 0)
+    .map(c => {
+      const sel = state.cats.has(c);
+      const n = CAT_COUNT[c];
+      return `<div class="mi${sel ? ' selected' : ''}" data-value="${c}">${checkSvg}<span>${c}</span><span class="cat-count">${n}</span></div>`;
+    }).join('');
+  catMenu.innerHTML = allRow + items;
+
+  catMenu.querySelectorAll('.mi').forEach(mi => {
+    mi.addEventListener('click', e => {
+      e.stopPropagation();
+      const v = mi.dataset.value;
+      if (v === '__all__') {
+        state.cats.clear();
+      } else {
+        if (state.cats.has(v)) state.cats.delete(v);
+        else state.cats.add(v);
+      }
+      renderCatMenu();    // 不关菜单,只刷新 selected 态
+      syncCatChip();
+      state.page = 1;
+      applyFilter();
+    });
+  });
+}
+
+function syncCatChip() {
+  const label = catWrap.querySelector('.chip-label');
+  const chip = catWrap.querySelector('.chip');
+  // 先清掉旧的 chip-count
+  chip.querySelectorAll('.chip-count').forEach(n => n.remove());
+  if (state.cats.size === 0) {
+    label.textContent = '商品分类';
+    chip.classList.remove('active');
+  } else if (state.cats.size === 1) {
+    label.textContent = [...state.cats][0];
+    chip.classList.add('active');
+  } else {
+    label.textContent = '商品分类';
+    const count = document.createElement('span');
+    count.className = 'chip-count';
+    count.textContent = state.cats.size;
+    // 把计数徽标插在 caret 之前
+    chip.insertBefore(count, chip.querySelector('.caret'));
+    chip.classList.add('active');
+  }
+}
+
+catWrap.querySelector('.chip').addEventListener('click', e => {
+  e.stopPropagation();
+  const isOpen = catWrap.classList.contains('open');
+  document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+  if (!isOpen) catWrap.classList.add('open');
+});
+// menu 内点击不冒泡到 document(防止误关)
+catMenu.addEventListener('click', e => e.stopPropagation());
+
+renderCatMenu();
+
+// ====== 创建时间 chip ======
+const dateWrap = document.querySelector('.chip-wrap[data-key="date"]');
+dateWrap.querySelector('.chip-menu').innerHTML = Object.entries(DATE_LABEL).map(([v, l]) =>
+  `<div class="mi${v === 'all' ? ' selected' : ''}" data-value="${v}">${checkSvg}<span>${l}</span></div>`
+).join('');
+
+function syncDateChip() {
+  const label = dateWrap.querySelector('.chip-label');
+  const chip = dateWrap.querySelector('.chip');
+  if (state.date === 'all') {
+    label.textContent = '创建时间';
+    chip.classList.remove('active');
+  } else {
+    label.textContent = DATE_LABEL[state.date];
+    chip.classList.add('active');
+  }
+  dateWrap.querySelectorAll('.mi').forEach(mi => mi.classList.toggle('selected', mi.dataset.value === state.date));
+}
+
+dateWrap.querySelector('.chip').addEventListener('click', e => {
+  e.stopPropagation();
+  const isOpen = dateWrap.classList.contains('open');
+  document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+  if (!isOpen) dateWrap.classList.add('open');
+});
+dateWrap.querySelectorAll('.mi').forEach(mi => {
+  mi.addEventListener('click', e => {
+    e.stopPropagation();
+    state.date = mi.dataset.value;
+    syncDateChip();
+    dateWrap.classList.remove('open');
+    state.page = 1;
+    applyFilter();
+  });
+});
+document.addEventListener('click', () => {
+  document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+});
+
+// ====== 筛选应用 ======
+const NOW = new Date('2026-05-19'); // 当前日期参考 (Shell.today)
+function withinDate(dateStr) {
+  if (state.date === 'all') return true;
+  const days = { '7d': 7, '30d': 30, '90d': 90 }[state.date];
+  if (!days) return true;
+  const d = new Date(dateStr);
+  const diffMs = NOW - d;
+  return diffMs <= days * 24 * 60 * 60 * 1000;
+}
+
+function applyFilter() {
+  let visible = 0;
+  const visibleCards = [];
+  cards.forEach(c => {
+    const matchCat = state.cats.size === 0 || state.cats.has(c.dataset.cat);
+    const q = state.search.toLowerCase();
+    const matchSearch = !q
+      || (c.dataset.name || '').toLowerCase().includes(q)
+      || (c.dataset.tags || '').toLowerCase().includes(q)
+      || (c.dataset.cat || '').toLowerCase().includes(q);
+    const matchDate = withinDate(c.dataset.date);
+    const show = matchCat && matchSearch && matchDate;
+    c.style.display = show ? '' : 'none';
+    if (show) { visible++; visibleCards.push(c); }
+  });
+
+  // 默认按 added desc(最新在前)
+  visibleCards.sort((a, b) => +b.dataset.added - +a.dataset.added);
+  visibleCards.forEach(c => grid.appendChild(c));
+
+  // 分页 · 排序后裁页, 把非当前页的卡片隐藏
+  const totalPages = Math.max(1, Math.ceil(visible / state.pageSize));
+  if (state.page > totalPages) state.page = totalPages;
+  if (state.page < 1) state.page = 1;
+  const start = (state.page - 1) * state.pageSize;
+  const end = start + state.pageSize;
+  visibleCards.forEach((c, i) => {
+    if (i < start || i >= end) c.style.display = 'none';
+  });
+
+  const empty = document.getElementById('empty');
+  if (visible === 0) {
+    empty.classList.add('show');
+    grid.style.display = 'none';
+  } else {
+    empty.classList.remove('show');
+    grid.style.display = '';
+  }
+
+  document.getElementById('result-meta').innerHTML = `// 显示 <span class="count">${visible}</span> / ${TOTAL} 个商品`;
+  document.getElementById('clear-filters').hidden = !(state.cats.size > 0 || state.search || state.date !== 'all');
+
+  renderPagination(visible, totalPages);
+}
+
+// ============== 分页器渲染 ==============
+function pageNumberList(cur, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = new Set([1, total, cur, cur - 1, cur + 1]);
+  if (cur <= 4) [2, 3, 4, 5].forEach(p => pages.add(p));
+  if (cur >= total - 3) [total - 4, total - 3, total - 2, total - 1].forEach(p => pages.add(p));
+  const sorted = [...pages].filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out = [];
+  for (let i = 0; i < sorted.length; i++) {
+    if (i > 0 && sorted[i] - sorted[i - 1] > 1) out.push('…');
+    out.push(sorted[i]);
+  }
+  return out;
+}
+
+function renderPagination(totalVisible, totalPages) {
+  const root = document.getElementById('pagination');
+  if (!root) return;
+  // 空结果或只有一页且 ≤ pageSize → 不显示
+  if (totalVisible === 0 || (totalPages <= 1 && totalVisible <= state.pageSize)) {
+    root.hidden = true;
+    return;
+  }
+  root.hidden = false;
+  document.getElementById('page-total').textContent = totalVisible;
+  document.getElementById('page-size-label').textContent = `${state.pageSize} 条/页`;
+  document.getElementById('page-jump').value = state.page;
+  document.getElementById('page-jump').max = totalPages;
+
+  const list = document.getElementById('page-list');
+  const items = pageNumberList(state.page, totalPages);
+  let html = `<button type="button" data-page="prev" ${state.page <= 1 ? 'disabled' : ''} aria-label="上一页">
+    <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12L6 8l4-4"/></svg>
+  </button>`;
+  items.forEach(p => {
+    if (p === '…') html += `<span class="ellipsis">…</span>`;
+    else html += `<button type="button" data-page="${p}" ${p === state.page ? 'class="active"' : ''}>${p}</button>`;
+  });
+  html += `<button type="button" data-page="next" ${state.page >= totalPages ? 'disabled' : ''} aria-label="下一页">
+    <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4l4 4-4 4"/></svg>
+  </button>`;
+  list.innerHTML = html;
+}
+
+// 搜索
+document.getElementById('search-input').addEventListener('input', e => {
+  state.search = e.target.value.trim();
+  state.page = 1;
+  applyFilter();
+});
+
+// 清空筛选
+document.getElementById('clear-filters').addEventListener('click', () => {
+  state.cats.clear();
+  state.search = '';
+  state.date = 'all';
+  document.getElementById('search-input').value = '';
+  renderCatMenu();
+  syncCatChip();
+  syncDateChip();
+  state.page = 1;
+  applyFilter();
+  Shell.toast('已清空筛选');
+});
+
+// ============== 分页器控件 ==============
+// 翻页按钮(事件委托)
+document.getElementById('page-list').addEventListener('click', e => {
+  const btn = e.target.closest('button[data-page]');
+  if (!btn || btn.disabled) return;
+  const v = btn.dataset.page;
+  const totalPages = +document.getElementById('page-jump').max || 1;
+  if (v === 'prev') state.page = Math.max(1, state.page - 1);
+  else if (v === 'next') state.page = Math.min(totalPages, state.page + 1);
+  else state.page = +v;
+  applyFilter();
+  // 翻页后把网格滚回顶, 让首张卡立刻可见
+  const wrap = document.querySelector('.product-grid-wrap');
+  if (wrap) wrap.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+// 每页条数(循环切换 12 → 24 → 48 → 96 → 12)
+document.getElementById('page-size-btn').addEventListener('click', () => {
+  const i = PAGE_SIZES.indexOf(state.pageSize);
+  state.pageSize = PAGE_SIZES[(i + 1) % PAGE_SIZES.length];
+  state.page = 1;
+  applyFilter();
+});
+
+// 跳转
+const _jumpEl = document.getElementById('page-jump');
+function _doJump() {
+  let v = parseInt(_jumpEl.value, 10);
+  const max = +_jumpEl.max || 1;
+  if (!Number.isFinite(v)) v = 1;
+  v = Math.max(1, Math.min(max, v));
+  state.page = v;
+  applyFilter();
+}
+_jumpEl.addEventListener('change', _doJump);
+_jumpEl.addEventListener('blur', _doJump);
+_jumpEl.addEventListener('keydown', e => {
+  if (e.key === 'Enter') { e.preventDefault(); _doJump(); _jumpEl.blur(); }
+});
+
+applyFilter();
+
+// ============================================================
+// 新建商品 · Drawer 控制 + 多图上传 + 卖点 bullet-list
+// ============================================================
+const drawerBg  = document.getElementById('pc-drawer-bg');
+const drawerEl  = document.getElementById('pc-drawer');
+const openBtn   = document.getElementById('open-new-product');
+const closeBtn  = document.getElementById('pc-drawer-close');
+const cancelBtn = document.getElementById('pc-cancel-btn');
+const saveBtn   = document.getElementById('pc-save-btn');
+
+function openNewProductDrawer() {
+  if (drawerEl.classList.contains('show')) return;
+  drawerBg.classList.add('show');
+  drawerEl.classList.add('show');
+  drawerEl.setAttribute('aria-hidden', 'false');
+  if (typeof Shell !== 'undefined' && Shell.lockScroll) Shell.lockScroll();
+  setTimeout(() => document.getElementById('pf-name')?.focus(), 280);
+}
+function closeNewProductDrawer() {
+  if (!drawerEl.classList.contains('show')) return;
+  drawerBg.classList.remove('show');
+  drawerEl.classList.remove('show');
+  drawerEl.setAttribute('aria-hidden', 'true');
+  if (typeof Shell !== 'undefined' && Shell.unlockScroll) Shell.unlockScroll();
+}
+
+openBtn.addEventListener('click', openNewProductDrawer);
+closeBtn.addEventListener('click', closeNewProductDrawer);
+cancelBtn.addEventListener('click', closeNewProductDrawer);
+drawerBg.addEventListener('click', closeNewProductDrawer);
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && drawerEl.classList.contains('show')) closeNewProductDrawer();
+});
+
+// 来自其它页面的"新建商品"链接 → 跳到 products.html 后自动开
+if (sessionStorage.getItem('auto-open-new-product') === '1') {
+  sessionStorage.removeItem('auto-open-new-product');
+  setTimeout(openNewProductDrawer, 100);
+}
+
+// ─── 多图上传 ───
+const PF_MAX = 5;
+const pfFiles = []; // {id, dataUrl, name}
+const pfFile  = document.getElementById('pf-file');
+const pfZone  = document.getElementById('pf-zone');
+const pfGrid  = document.getElementById('pf-grid');
+
+const pfUid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
+const pfEsc = s => (s || '').replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]);
+
+function pfRender() {
+  pfGrid.innerHTML = pfFiles.map(u => `
+    <div class="pf-thumb" data-id="${u.id}">
+      <img src="${u.dataUrl}" alt="${pfEsc(u.name)}">
+      <button class="pf-x" type="button" title="删除">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+      </button>
+    </div>
+  `).join('');
+  pfGrid.querySelectorAll('.pf-thumb .pf-x').forEach(b => {
+    b.onclick = e => {
+      e.stopPropagation();
+      const id = b.closest('.pf-thumb').dataset.id;
+      const i = pfFiles.findIndex(f => f.id === id);
+      if (i >= 0) { pfFiles.splice(i, 1); pfRender(); }
+    };
+  });
+}
+
+function pfAdd(fileList) {
+  const room = PF_MAX - pfFiles.length;
+  if (room <= 0) { Shell.toast('已达上限', `${PF_MAX} / ${PF_MAX} 张`); return; }
+  const incoming = [...fileList].filter(f => f.type.startsWith('image/')).slice(0, room);
+  let done = 0;
+  incoming.forEach(f => {
+    const r = new FileReader();
+    r.onload = e => {
+      pfFiles.push({ id: pfUid(), dataUrl: e.target.result, name: f.name });
+      if (++done === incoming.length) {
+        pfRender();
+        Shell.toast('已上传', `+ ${done} 张 · 共 ${pfFiles.length} / ${PF_MAX}`);
+      }
+    };
+    r.readAsDataURL(f);
+  });
+}
+
+pfFile.addEventListener('change', e => { pfAdd(e.target.files); e.target.value = ''; });
+pfZone.addEventListener('click', () => { if (pfFiles.length < PF_MAX) pfFile.click(); });
+pfZone.addEventListener('dragover', e => { e.preventDefault(); pfZone.style.borderColor = 'var(--heat)'; });
+pfZone.addEventListener('dragleave', () => { pfZone.style.borderColor = ''; });
+pfZone.addEventListener('drop', e => {
+  e.preventDefault(); pfZone.style.borderColor = '';
+  if (e.dataTransfer?.files?.length) pfAdd(e.dataTransfer.files);
+});
+
+// ─── 核心卖点 bullet-list ───
+const blList  = document.getElementById('pf-bullets');
+const blInput = blList.querySelector('.bl-add .bl-input');
+const blXSvg  = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+
+function blRenumber() {
+  [...blList.querySelectorAll('.bl-item')].forEach((li, i) => {
+    li.querySelector('.num').textContent = i + 1;
+  });
+}
+function blBindX(x) {
+  x.addEventListener('click', () => {
+    const li = x.closest('li');
+    li.style.transition = 'opacity .15s, transform .15s';
+    li.style.opacity = 0;
+    li.style.transform = 'translateX(-8px)';
+    setTimeout(() => { li.remove(); blRenumber(); }, 150);
+  });
+}
+function blAdd(text) {
+  const t = (text || '').trim();
+  if (!t) return;
+  const li = document.createElement('li');
+  li.className = 'bl-item';
+  li.innerHTML = `<span class="num">0</span><span class="bl-text">${pfEsc(t)}</span><span class="bl-x" title="删除">${blXSvg}</span>`;
+  blList.querySelector('.bl-add').before(li);
+  blBindX(li.querySelector('.bl-x'));
+  blRenumber();
+}
+blInput.addEventListener('keydown', e => {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    blAdd(blInput.value);
+    blInput.value = '';
+  }
+});
+
+// 创建商品 (真正插入 grid)
+saveBtn.addEventListener('click', () => {
+  const name = document.getElementById('pf-name').value.trim();
+  const cat  = document.getElementById('pf-cat').value;
+  if (!name) {
+    Shell.toast('请填写商品名称');
+    document.getElementById('pf-name').focus();
+    return;
+  }
+  if (pfFiles.length === 0) {
+    Shell.toast('请上传商品主图', '至少 1 张');
+    return;
+  }
+  // 计数器收集卖点 bullets
+  const bullets = [...document.querySelectorAll('#pf-bullets .bl-item input')]
+    .map(i => i.value.trim()).filter(Boolean);
+  // 创建 card 并插入 grid 最前
+  const today = new Date().toISOString().slice(0, 10);
+  const card = document.createElement('div');
+  card.className = 'product-card';
+  card.dataset.cat = cat;
+  card.dataset.name = name;
+  card.dataset.tags = '';
+  card.dataset.added = '0';
+  card.dataset.assets = '0';
+  card.dataset.videos = '0';
+  card.dataset.date = today;
+  card.setAttribute('onclick', "location.href='product-detail.html?t='+Date.now()");
+  card.innerHTML = `
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除商品" onclick="event.stopPropagation();" data-action="delete-product"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder product-thumb"><span class="ph-frame">${name} · 新建</span></div>
+    <div class="product-body">
+      <div class="product-name">${name}</div>
+      <div class="product-cat">${cat}</div>
+      <div class="product-date">${today} 创建</div>
+    </div>
+    <div class="product-footer">
+      <span class="stat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-9 9"/></svg>
+        素材 <b>0</b>
+      </span>
+      <span class="sep">·</span>
+      <span class="stat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+        视频 <b>0</b>
+      </span>
+    </div>
+  `;
+  const grid = document.getElementById('product-grid');
+  grid.insertBefore(card, grid.firstChild);
+  // 给新卡片注入交互:stat hover/click + del-btn 删除确认
+  card.querySelectorAll('.product-footer .stat').forEach(stat => {
+    const text = stat.textContent.trim();
+    const m = text.match(/^(素材|视频)\s*(\d+)/);
+    if (!m) return;
+    const isAsset = m[1] === '素材';
+    const svg = stat.querySelector('svg');
+    stat.innerHTML = '';
+    if (svg) stat.appendChild(svg);
+    const dft = document.createElement('span');
+    dft.className = 'stat-default';
+    dft.innerHTML = `${m[1]} <b>${m[2]}</b>`;
+    const hv = document.createElement('span');
+    hv.className = 'stat-hover';
+    hv.textContent = isAsset ? '+ 去生成素材' : '+ 去生成视频';
+    stat.appendChild(dft); stat.appendChild(hv);
+    stat.dataset.type = isAsset ? 'asset' : 'video';
+    stat.title = isAsset ? '去生成 AI 素材' : '去生成视频项目';
+    stat.addEventListener('click', e => {
+      e.stopPropagation();
+      const n = card.dataset.name || '';
+      if (isAsset) openGenAssetChoice(n);
+      else location.href = 'projects-new.html?t=' + Date.now() + '&product=' + encodeURIComponent(n);
+    });
+  });
+  const delBtn = card.querySelector('.card-del-btn');
+  if (delBtn) {
+    delBtn.addEventListener('click', e => {
+      e.stopPropagation();
+      openDelConfirm([card]);
+    });
+  }
+  // 同步 SKU 计数(标题 + 列表 meta + 侧栏 badge)
+  const remaining = document.querySelectorAll('.product-card').length;
+  const skuCount = document.getElementById('sku-count');
+  if (skuCount) skuCount.textContent = remaining;
+  const meta = document.querySelector('#result-meta .count');
+  if (meta) meta.textContent = remaining;
+  const sidebar = document.querySelector('aside.sidebar a[href="products.html"] .pill-mini');
+  if (sidebar) sidebar.textContent = remaining;
+
+  Shell.toast('商品已创建', `+ ${name} · 跳转至详情页`);
+  closeNewProductDrawer();
+  // 重置表单(为下次新建准备)
+  document.getElementById('pf-name').value = '';
+  document.getElementById('pf-cat').value = cat;
+  if (typeof pfFiles !== 'undefined') pfFiles.length = 0;
+  const pfGrid = document.getElementById('pf-grid');
+  if (pfGrid) pfGrid.innerHTML = '';
+  const blList = document.getElementById('pf-bullets');
+  if (blList) blList.querySelectorAll('.bl-item').forEach(li => li.remove());
+  // 商品库新建商品后跳转到该商品的详情页(其他页保持原行为)
+  setTimeout(() => {
+    location.href = 'product-detail.html?t=' + Date.now() + '&product=' + encodeURIComponent(name);
+  }, 400);
+});
+</script>
+</body>
+</html>
diff --git a/v2/projects-new.html b/v2/projects-new.html
new file mode 100644
index 0000000..6d16bf6
--- /dev/null
+++ b/v2/projects-new.html
@@ -0,0 +1,1231 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>新建项目 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  .wizard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: start; max-width: 1400px; }
+  @media (max-width: 1180px) { .wizard { grid-template-columns: 200px minmax(0, 1fr); } }
+  .steps { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; }
+  .wiz-preview { display: none !important; }
+  /* 顶部胶囊 + 商品横向单行 */
+  .pick-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
+  .cap-pill { height: 30px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 999px; font-size: 12.5px; color: var(--accent-black); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
+  .cap-pill:hover { background: var(--background-lighter); border-color: var(--heat-20); color: var(--heat); }
+  .cap-pill svg { width: 13px; height: 13px; }
+  .product-pick-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scrollbar-width: thin; }
+  .product-pick-row::-webkit-scrollbar { height: 8px; }
+  .product-pick-row::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 4px; }
+  .product-pick-row .product-pick { flex: 0 0 240px; min-width: 240px; }
+  .product-pick-row .product-pick.lib { flex: 0 0 152px; min-width: 152px; min-height: 96px; }
+  /* 底部开始 CTA */
+  .wiz-start-bar { display: flex; justify-content: center; padding: 20px 0 8px; }
+  .wiz-start-bar .btn-start { height: 44px; padding: 0 36px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-cta); display: inline-flex; align-items: center; gap: 8px; font-family: inherit; transition: box-shadow var(--t-base), opacity var(--t-base); }
+  .wiz-start-bar .btn-start:hover:not(.disabled) { box-shadow: var(--shadow-cta-hover); }
+  .wiz-start-bar .btn-start.disabled { opacity: .4; cursor: not-allowed; }
+  .wiz-start-bar .btn-start svg { width: 14px; height: 14px; }
+  /* 单页式: 所有 step pane 同时显示, 不再切换 */
+  #wiz-body { display: flex; flex-direction: column; gap: 14px; }
+  .wiz-pane.active::before, .wiz-pane.active::after { display: none; }  /* 去掉 corner-mark, 不需要 "当前激活" 视觉强突出 */
+  .wiz-pane.active { padding: 22px 24px; }
+  .wiz-foot { display: none !important; }  /* 底部上一步/下一步彻底隐藏 */
+  /* 计费明细 */
+  .pv-list.pv-bill li {
+    display: flex; justify-content: space-between;
+    padding: 5px 0;
+    font-size: 12px;
+    color: var(--black-alpha-72);
+  }
+  .pv-list.pv-bill li .ai { color: var(--accent-black); font-family: var(--font-mono); font-size: 11.5px; }
+  .pv-list.pv-bill .pv-bill-total {
+    border-top: 1px solid var(--border-faint);
+    margin-top: 6px; padding-top: 8px;
+    font-weight: 600; color: var(--accent-black);
+  }
+  .pv-list.pv-bill .pv-bill-total .ai b { color: var(--heat); font-size: 14px; font-weight: 700; }
+  .step { display: flex; gap: 12px; padding: 12px 0; position: relative; }
+  .step:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 36px; width: 1px; height: calc(100% - 24px); background: var(--border-faint); }
+  .step .num { width: 24px; height: 24px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--black-alpha-48); flex-shrink: 0; z-index: 1; font-family: var(--font-mono); }
+  .step.done .num { background: var(--accent-black); border-color: var(--accent-black); color: var(--accent-white); }
+  .step.active .num { background: var(--heat); border-color: var(--heat); color: var(--accent-white); }
+  .step .label { font-size: 13.5px; font-weight: 500; color: var(--black-alpha-56); padding-top: 2px; }
+  .step .desc { font-size: 11.5px; color: var(--black-alpha-48); padding-top: 3px; line-height: 1.4; font-family: var(--font-mono); letter-spacing: .02em; }
+  .step.active .label { color: var(--accent-black); font-weight: 600; }
+  .step.done .label { color: var(--black-alpha-56); }
+  .step.done:not(:last-child)::after { background: var(--accent-black); }
+  .step.clickable { cursor: pointer; }
+  .step.clickable:hover .label { color: var(--heat); }
+  .step.clickable:hover .num { border-color: var(--heat); }
+
+  .wiz-pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 22px 24px; margin-bottom: 14px; }
+  .wiz-pane.active { padding: 26px 28px; position: relative; }
+  .wiz-pane.active::before, .wiz-pane.active::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
+  .wiz-pane.active::before { top: -7px; left: -7px; }
+  .wiz-pane.active::after { bottom: -7px; right: -7px; }
+  .wiz-pane.collapsed { padding: 16px 20px; }
+  .wiz-pane-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+  .wiz-pane-h h3 { font-size: 14px; font-weight: 600; }
+  .wiz-step-h { margin-bottom: 18px; }
+  .wiz-step-h h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
+  .wiz-step-h p { font-size: 13px; color: var(--black-alpha-56); margin-top: 6px; }
+
+  .opt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+  .opt-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .opt-row.cols-6 { grid-template-columns: repeat(3, 1fr); }
+  @media (min-width: 1280px) { .opt-row.cols-6 { grid-template-columns: repeat(6, 1fr); } }
+  .opt-card { border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 14px; background: var(--surface); cursor: pointer; position: relative; display: flex; flex-direction: column; min-width: 0; transition: background var(--t-base), border-color var(--t-base); }
+  .opt-card:hover { background: var(--background-lighter); }
+  .opt-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .opt-card.selected::after { content: ''; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; border-radius: var(--r-sm); }
+  .opt-card h4 { font-size: 13px; font-weight: 600; }
+  .opt-card .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 3px; letter-spacing: .02em; }
+  .opt-card .note { font-size: 11.5px; color: var(--black-alpha-56); margin-top: 6px; line-height: 1.5; }
+  .opt-card .metric { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .opt-card .metric .val { color: var(--accent-black); font-weight: 500; }
+  .opt-card.selected .metric .val { color: var(--heat); }
+  .opt-card .badge { font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-48); display: inline-block; margin-top: 8px; letter-spacing: .04em; align-self: flex-start; }
+  .opt-card.selected .badge { color: var(--heat); border-color: var(--heat-20); }
+
+  .theme-pill { display: inline-flex; gap: 4px; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--border-faint); border-radius: 999px; background: var(--surface); font-size: 12.5px; cursor: pointer; color: var(--black-alpha-56); transition: background var(--t-base), border-color var(--t-base); }
+  .theme-pill:hover { background: var(--background-lighter); }
+  .theme-pill.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
+  .theme-pill svg { width: 12px; height: 12px; }
+
+  .reco-bubble { position: relative; margin-top: 10px; padding: 10px 14px; background: var(--heat-12); border: 1px solid var(--heat-20); border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--accent-black); }
+  .reco-bubble::before { content: ''; position: absolute; top: -5px; left: 28px; width: 9px; height: 9px; background: var(--heat-12); border-left: 1px solid var(--heat-20); border-top: 1px solid var(--heat-20); transform: rotate(45deg); }
+  .reco-bubble .ic { color: var(--heat); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
+  .reco-bubble .ic svg, .reco-bubble .dismiss svg { display: block; }
+  .reco-bubble .txt { flex: 1; line-height: 1.5; }
+  .reco-bubble .txt strong { color: var(--heat); font-weight: 600; }
+  .reco-bubble .txt .meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
+  .reco-bubble .btn-apply { height: 28px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-md); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-cta); transition: box-shadow var(--t-base); }
+  .reco-bubble .btn-apply:hover { box-shadow: var(--shadow-cta-hover); }
+  .reco-bubble .dismiss { background: transparent; color: var(--black-alpha-48); border: 0; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+  .reco-bubble .dismiss:hover { color: var(--accent-black); }
+
+  .wiz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-faint); }
+  .btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
+
+  /* ── pick toolbar (Step 1) ── */
+  .pick-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+  .pick-toolbar .search-input { position: relative; flex: 1; max-width: 320px; min-width: 200px; }
+  .pick-toolbar .search-input svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--black-alpha-48); width: 14px; height: 14px; }
+  .pick-toolbar .search-input input { width: 100%; height: 32px; padding: 0 12px 0 34px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); font-size: 12.5px; color: var(--accent-black); font-family: inherit; transition: border-color var(--t-base); }
+  .pick-toolbar .search-input input:focus { outline: none; border-color: var(--heat); }
+  .cat-chip { height: 32px; padding: 0 12px; border: 1px solid var(--border-faint); background: var(--surface); border-radius: var(--r-md); font-size: 12.5px; color: var(--black-alpha-56); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
+  .cat-chip:hover { background: var(--background-lighter); }
+  .cat-chip.active { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
+
+  .pick-section-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase; }
+  .pick-section-h .count { background: var(--background-lighter); border: 1px solid var(--border-faint); padding: 1px 6px; color: var(--black-alpha-48); font-size: 10px; }
+
+  /* ── Step 1 · product picker grid ── */
+  .product-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+  @media (max-width: 1100px) { .product-pick-grid { grid-template-columns: repeat(2, 1fr); } }
+  .product-pick { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); cursor: pointer; position: relative; transition: background var(--t-base), border-color var(--t-base); min-width: 0; }
+  .product-pick:hover { background: var(--background-lighter); }
+  .product-pick.selected { border-color: var(--heat); background: var(--heat-12); }
+  .product-pick.selected::after { content: ''; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; border-radius: var(--r-sm); }
+  .product-pick .thumb { width: 56px; height: 72px; flex-shrink: 0; }
+  .product-pick .body { flex: 1; min-width: 0; padding-right: 18px; }
+  .product-pick .name { font-weight: 600; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .product-pick .meta { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .product-pick .meta b { color: var(--accent-black); font-weight: 500; }
+  .product-pick .tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
+  .product-pick .tag-s { font-size: 10.5px; color: var(--black-alpha-56); background: var(--background-lighter); padding: 1px 6px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); }
+  .product-pick.selected .tag-s { background: var(--surface); border-color: var(--heat-20); color: var(--heat); }
+
+  .product-pick.add { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border-style: dashed; color: var(--black-alpha-48); min-height: 96px; }
+  .product-pick.add:hover { color: var(--heat); border-color: var(--heat); background: var(--heat-12); }
+  .product-pick.add .pc { width: 32px; height: 32px; border: 1px solid currentColor; display: grid; place-items: center; border-radius: var(--r-sm); }
+  .product-pick.add svg { width: 16px; height: 16px; }
+  .product-pick.add .hint { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .product-pick.add.lib:hover { color: var(--heat); border-color: var(--heat); background: var(--heat-12); }
+
+  /* ===== 商品库全屏弹窗 (单选,与 model-photo/platform-cover 风格统一) ===== */
+  .pl-modal-bg { position: fixed; inset: 0; background: var(--surface); z-index: 998; display: none; }
+  .pl-modal-bg.show { display: flex; }
+  .pl-modal { margin: 0; flex: 1; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
+  .pl-modal-h { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-bottom: 1px solid var(--border-faint); flex-shrink: 0; }
+  .pl-modal-h h2 { font-size: 16px; font-weight: 600; }
+  .pl-modal-h .ct { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .pl-modal-h .actions { margin-left: auto; display: flex; gap: 10px; }
+  .pl-modal-h .x { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--black-alpha-56); }
+  .pl-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); }
+  .pl-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; }
+  .pl-side { border-right: 1px solid var(--border-faint); padding: 18px 0; overflow-y: auto; }
+  .pl-side .pl-side-h { padding: 0 20px 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; }
+  .pl-side .pl-side-item { display: flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer; color: var(--black-alpha-72); font-size: 13px; border-left: 3px solid transparent; transition: background var(--t-base), color var(--t-base); }
+  .pl-side .pl-side-item:hover { background: var(--black-alpha-4); }
+  .pl-side .pl-side-item.active { background: var(--heat-12); color: var(--accent-black); border-left-color: var(--heat); font-weight: 600; }
+  .pl-side .pl-side-item .ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); }
+  .pl-main { overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
+  .pl-toolbar { padding: 14px 28px; border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
+  .pl-toolbar .search { position: relative; flex: 1; max-width: 360px; }
+  .pl-toolbar .search input { width: 100%; height: 32px; padding: 0 10px 0 32px; background: var(--background-lighter); border: 1px solid var(--black-alpha-12); border-radius: var(--r-sm); font-size: 12.5px; font-family: inherit; color: var(--accent-black); outline: none; box-sizing: border-box; }
+  .pl-toolbar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--black-alpha-48); }
+  .pl-toolbar .btn-new { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--black-alpha-12); border-radius: var(--r-sm); color: var(--accent-black); font-family: inherit; font-size: 12.5px; cursor: pointer; margin-left: auto; }
+  .pl-toolbar .btn-new:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); }
+  .pl-toolbar .btn-new svg { width: 13px; height: 13px; }
+  .pl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; }
+  .pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+  .pl-card { position: relative; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: background var(--t-base), border-color var(--t-base); }
+  .pl-card:hover { background: var(--surface); }
+  .pl-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .pl-card .pl-thumb { aspect-ratio: 1; border-radius: var(--r-sm); }
+  .pl-card .pl-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
+  .pl-card .pl-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .pl-card .pl-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; background: rgba(255,255,255,.95); border: 1.5px solid var(--black-alpha-24); border-radius: 50%; display: grid; place-items: center; z-index: 2; color: var(--accent-white); }
+  .pl-card .pl-check svg { width: 11px; height: 11px; opacity: 0; }
+  .pl-card.selected .pl-check { background: var(--heat); border-color: var(--heat); }
+  .pl-card.selected .pl-check svg { opacity: 1; }
+  .pl-modal-f { padding: 14px 28px; border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-shrink: 0; }
+  .pl-modal-f .summary { margin-right: auto; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .02em; }
+  .pl-modal-f .summary b { color: var(--heat); font-weight: 700; }
+
+  /* ── Step 2 · source-type cards ── */
+  .source-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+  .source-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); cursor: pointer; position: relative; transition: background var(--t-base), border-color var(--t-base); min-height: 132px; }
+  .source-card:hover { background: var(--background-lighter); }
+  .source-card.selected { border-color: var(--heat); background: var(--heat-12); }
+  .source-card.selected::after { content: ''; position: absolute; top: 10px; right: 12px; width: 16px; height: 16px; background-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; border-radius: var(--r-sm); }
+  .source-card .src-ic { width: 32px; height: 32px; background: var(--background-lighter); color: var(--black-alpha-56); border: 1px solid var(--border-faint); border-radius: var(--r-sm); display: grid; place-items: center; }
+  .source-card .src-ic svg { width: 16px; height: 16px; }
+  .source-card.selected .src-ic { background: var(--surface); color: var(--heat); border-color: var(--heat-20); }
+  .source-card h4 { font-size: 14px; font-weight: 600; }
+  .source-card .src-tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); letter-spacing: .06em; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 1px 6px; align-self: flex-start; }
+  .source-card.selected .src-tag { color: var(--heat); border-color: var(--heat-20); }
+  .source-card .src-desc { font-size: 12px; color: var(--black-alpha-56); line-height: 1.55; margin-top: auto; }
+
+  .source-detail { margin-top: 16px; padding: 18px 20px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md); }
+  .source-detail .sd-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
+  .source-detail .sd-h b { color: var(--accent-black); font-weight: 500; }
+
+  /* ── shared field styles ── */
+  .field { display: block; margin-bottom: 16px; }
+  .field-label { display: block; font-size: 12.5px; color: var(--black-alpha-56); font-weight: 500; margin-bottom: 6px; }
+  .field-label .req { color: var(--heat); margin-left: 2px; }
+  .field-hint { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 4px; }
+  .input, .textarea { width: 100%; height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); font-size: 13px; color: var(--accent-black); font-family: inherit; transition: border-color var(--t-base); }
+  .input:focus, .textarea:focus { outline: none; border-color: var(--heat); }
+  .textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 120px; line-height: 1.55; }
+
+  /* ── Step 4 · confirm grid / billing / balance / eta / tos ── */
+  .confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
+  .confirm-card { position: relative; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px; }
+  .confirm-card .cc-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
+  .confirm-card .cc-edit { font-size: 11.5px; color: var(--black-alpha-56); letter-spacing: 0; font-family: var(--font-sans, 'Inter'); text-transform: none; padding: 2px 8px; border: 1px solid var(--border-faint); background: var(--surface); cursor: pointer; border-radius: var(--r-sm); }
+  .confirm-card .cc-edit:hover { color: var(--heat); border-color: var(--heat-20); }
+  .confirm-card .cc-body { font-size: 13px; color: var(--accent-black); }
+  .confirm-card .cc-body .ln { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12.5px; color: var(--black-alpha-56); flex-wrap: wrap; }
+  .confirm-card .cc-body .ln b { color: var(--accent-black); font-weight: 500; }
+
+  .section-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase; margin: 18px 0 10px; }
+
+  .bill-list { border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+  .bill-row { display: grid; grid-template-columns: 1fr auto 80px; align-items: baseline; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-faint); }
+  .bill-row:last-child { border-bottom: 0; }
+  .bill-row .l { font-size: 12.5px; color: var(--accent-black); }
+  .bill-row .l .l-sub { color: var(--black-alpha-48); font-size: 11.5px; margin-left: 6px; }
+  .bill-row .qty { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; text-align: right; }
+  .bill-row .amt { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-black); font-variant-numeric: tabular-nums; text-align: right; }
+  .bill-row.subtotal { background: var(--background-lighter); }
+  .bill-row.subtotal .l { color: var(--black-alpha-56); font-size: 12px; }
+  .bill-row.total { background: var(--background-lighter); border-top: 1px solid var(--black-alpha-12); }
+  .bill-row.total .l { font-weight: 600; font-size: 13px; }
+  .bill-row.total .amt { font-size: 16px; font-weight: 600; color: var(--accent-black); }
+  .bill-row.total .amt small { font-size: 11px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; }
+
+  .balance-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); margin-top: 10px; }
+  .balance-row .bl { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
+  .balance-row .bl svg { width: 14px; height: 14px; color: var(--black-alpha-56); }
+  .balance-row .bl .lbl { font-size: 12.5px; color: var(--black-alpha-56); }
+  .balance-row .bl .val { font-family: var(--font-mono); font-size: 14px; color: var(--accent-black); font-variant-numeric: tabular-nums; font-weight: 500; }
+  .balance-row .bl .arrow { color: var(--black-alpha-48); font-family: var(--font-mono); }
+  .balance-row.low .bl .val.after { color: var(--accent-crimson); }
+  .balance-row .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid; white-space: nowrap; margin-left: auto; }
+  .balance-row .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+  .balance-row .pill.ok { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); }
+  .balance-row .pill.err { background: var(--crimson-bg); border-color: var(--crimson-bd); color: var(--accent-crimson); }
+  .balance-row .pill.err a { margin-left: 4px; text-decoration: underline; cursor: pointer; }
+
+  .eta-block { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
+  .eta-tile { padding: 14px 16px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); }
+  .eta-tile .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
+  .eta-tile .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+  .eta-tile .v small { font-size: 11px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; }
+  .eta-tile .desc { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; margin-top: 6px; }
+
+  /* ── SVG checkbox · per design spec (no CSS hack) ── */
+  .check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; color: var(--black-alpha-56); cursor: pointer; user-select: none; }
+  .check-row:hover .check-box { border-color: var(--black-alpha-56); }
+  .check-box { width: 16px; height: 16px; background: var(--surface); border: 1px solid var(--black-alpha-24); flex-shrink: 0; border-radius: var(--r-sm); display: grid; place-items: center; transition: background var(--t-base), border-color var(--t-base); }
+  .check-row.on .check-box { background: var(--heat); border-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; }
+  .check-row.on .lab { color: var(--accent-black); }
+  .check-row .lab b { color: var(--accent-black); font-weight: 500; }
+  .check-row .lab .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); margin-left: 6px; letter-spacing: .02em; }
+
+  .tos-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md); margin-top: 14px; cursor: pointer; font-size: 12.5px; color: var(--black-alpha-56); user-select: none; }
+  .tos-row:hover .check-box { border-color: var(--black-alpha-56); }
+  .tos-row.on { background: var(--heat-12); border-color: var(--heat-20); }
+  .tos-row.on .check-box { background: var(--heat); border-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; }
+  .tos-row.on .lab { color: var(--accent-black); }
+  .tos-row .lab a { color: var(--heat); text-decoration: underline; cursor: pointer; }
+
+  /* preview panel */
+  .wiz-preview { position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 18px; }
+  .wiz-preview input,
+  .wiz-preview textarea,
+  .wiz-preview select { box-sizing: border-box; max-width: 100%; }
+  .wiz-preview::before, .wiz-preview::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
+  .wiz-preview::before { top: -7px; left: -7px; }
+  .wiz-preview::after { bottom: -7px; right: -7px; }
+  .pv-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase; display: flex; justify-content: space-between; }
+  .pv-h .live { display: inline-flex; align-items: center; gap: 5px; color: var(--heat); }
+  .pv-h .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--heat); animation: pulse 1.6s ease-in-out infinite; }
+  @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
+  .pv-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 14px; word-break: break-all; }
+  .pv-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-faint); border: 1px solid var(--border-faint); margin-bottom: 14px; }
+  .pv-metric { padding: 10px 12px; background: var(--surface); }
+  .pv-metric .l { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; }
+  .pv-metric .v { font-size: 18px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--accent-black); }
+  .pv-metric .v small { font-size: 11px; color: var(--black-alpha-48); font-weight: 500; }
+  .pv-metric.accent .v { color: var(--heat); }
+  .pv-section { margin-top: 14px; }
+  .pv-section .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
+  .pv-flow { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 11.5px; color: var(--black-alpha-56); align-items: center; line-height: 1.7; }
+  .pv-flow .node { padding: 2px 7px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--accent-black); font-weight: 500; }
+  .pv-flow .arrow { color: var(--heat); margin: 0 5px; display: inline-flex; align-items: center; }
+  .pv-flow .arrow svg { display: block; }
+  .pv-list { list-style: none; padding: 0; margin: 0; }
+  .pv-list li { font-size: 11.5px; color: var(--black-alpha-56); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
+  .pv-list li::before { content: ''; width: 11px; height: 11px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FA5D19' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center; background-size: contain; }
+  .pv-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-faint); font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); display: flex; justify-content: space-between; }
+  .pv-foot strong { color: var(--accent-black); font-weight: 500; }
+  /* 精简版计费 + 余额 */
+  .pv-bill-summary { margin-top: 14px; padding: 10px 12px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 6px; }
+  .pv-bill-summary .row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; }
+  .pv-bill-summary .row .k { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .pv-bill-summary .row .v { font-variant-numeric: tabular-nums; color: var(--accent-black); }
+  .pv-bill-summary .row .v b { color: var(--heat); font-size: 14px; font-weight: 700; }
+  .pv-bill-summary .row .v.low { color: var(--accent-crimson); }
+  .pv-agree-row { margin-top: 10px; }
+  .pv-agree-row label { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; font-size: 11.5px; color: var(--black-alpha-56); line-height: 1.5; }
+  .pv-agree-row input[type="checkbox"] { margin-top: 2px; cursor: pointer; flex-shrink: 0; }
+  .pv-agree-row a { color: var(--heat); }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>新建项目</h1>
+    <div class="sub"><span class="mono">// 商品 → 配置 · 2 步开始生成</span></div>
+  </div>
+  <div class="actions">
+    <a class="btn btn-ghost" href="projects.html">退出</a>
+  </div>
+</div>
+
+<div class="wizard">
+  <nav class="steps" id="rail"></nav>
+  <div id="wiz-body"></div>
+  <aside class="wiz-preview" id="preview"></aside>
+</div>
+
+</div>
+
+<!-- ===== 商品库 全屏弹窗 (单选,新建项目用) ===== -->
+<div class="pl-modal-bg" id="pl-modal-bg">
+  <div class="pl-modal">
+    <div class="pl-modal-h">
+      <h2>商品库</h2>
+      <span class="ct" id="pl-total-ct"></span>
+      <div class="actions">
+        <button class="x" type="button" id="pl-close-btn" aria-label="关闭">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="pl-modal-body">
+      <aside class="pl-side" id="pl-side">
+        <!-- JS 渲染分类 (动态从 PRODUCTS) -->
+      </aside>
+      <div class="pl-main">
+        <div class="pl-toolbar">
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" id="pl-search-input" placeholder="搜索商品名">
+          </div>
+          <button class="btn-new" type="button" id="pl-new-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            新建商品
+          </button>
+        </div>
+        <div class="pl-scroll">
+          <div class="pl-grid" id="pl-grid"></div>
+        </div>
+      </div>
+    </div>
+    <div class="pl-modal-f">
+      <div class="summary">// 单选:点击商品即选用,自动关闭</div>
+      <button class="btn" type="button" id="pl-cancel-btn">取消</button>
+    </div>
+  </div>
+</div>
+
+<script src="assets/shell.js"></script>
+<script src="assets/new-product-drawer.js"></script>
+<script>Shell.render({ active: 'projects', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '视频项目', href: 'projects.html' }, { label: '新建项目' }] });</script>
+
+<script>
+/* ============================================================
+   新建项目 · 4 步动态向导 (vanilla JS state machine)
+   ============================================================ */
+(function () {
+  'use strict';
+
+  /* ---------- data ---------- */
+
+  const PRODUCTS = [
+    { id: 'mask',     name: '透真玻尿酸补水面膜',     cat: '美妆个护', price: 39.9, imgs: 3, points: ['透明质酸 + B5', '30g 大容量精华', '0 香精 0 酒精'],     tags: ['熬夜党', '敏感肌'] },
+    { id: 'earphone', name: '南卡 Lite Pro 蓝牙耳机', cat: '数码 3C', price: 199,  imgs: 5, points: ['主动降噪', '32 小时续航', 'IP55 防水'],             tags: ['通勤', '运动'] },
+    { id: 'noodle',   name: '滋啦速食牛肉面 · 6 桶装', cat: '食品饮料', price: 49.9, imgs: 4, points: ['3 分钟出餐', '真材实料牛肉', '0 防腐剂'],         tags: ['加班', '独居'] },
+    { id: 'sun',      name: '透真清透物理防晒霜',     cat: '美妆个护', price: 69,   imgs: 4, points: ['SPF50 PA+++', '纯物理防晒', '不泛白不假面'],       tags: ['SPF50', '通勤'] },
+    { id: 'coffee',   name: '三顿半同款冻干咖啡粉',   cat: '食品饮料', price: 89,   imgs: 6, points: ['冷热水秒溶', '意式深烘', '24 颗轻便装'],           tags: ['提神', '早八'] },
+    { id: 'fryer',    name: '小熊 4L 可视空气炸锅',   cat: '家居家电', price: 159,  imgs: 5, points: ['可视化窗口', '4L 大容量', '低脂少油'],             tags: ['小户型', '健康'] },
+    { id: 'yoga',     name: '露露同款裸感瑜伽裤',     cat: '运动户外', price: 119,  imgs: 8, points: ['裸感面料', '高弹回弹', '随心动随心穿'],             tags: ['健身房', '通勤'] },
+  ];
+
+  const RECENT_IDS = ['mask', 'sun', 'coffee', 'earphone'];
+  const CATS = ['全部', '美妆个护', '数码 3C', '食品饮料', '家居家电', '运动户外'];
+
+  const SOURCES = [
+    { id: 'ai',     name: 'AI 全生',     tag: '最常用',  desc: 'LLM 全权决定脚本走向,最省事。后续仍可在故事板阶段微调。',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z"/><path d="M19 16l.85 2.3L22 19l-2.15.7L19 22l-.85-2.3L16 19l2.15-.7L19 16z"/></svg>' },
+    { id: 'theme',  name: '一句话主题',   tag: '轻引导',  desc: '你给一句切入主题,AI 按此扩写。推荐 5–30 字。',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>' },
+    { id: 'manual', name: '自带脚本',     tag: '我已有稿', desc: '粘贴或上传完整脚本,系统按镜头自动切分并适配商品。',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg>' },
+  ];
+
+  const DURATIONS = [
+    { id: '0-10', label: '0-10 秒', shots: [3, 4],   tag: '黄金完播',   completion: 52, conversion: 1.6 },
+    { id: '0-15', label: '0-15 秒', shots: [4, 5],   tag: '完播率最佳', completion: 42, conversion: 1.8 },
+    { id: '0-30', label: '0-30 秒', shots: [6, 8],   tag: '卖点详解',   completion: 32, conversion: 2.1 },
+    { id: '0-60', label: '0-60 秒', shots: [10, 12], tag: '故事化',     completion: 26, conversion: 2.4 },
+  ];
+
+  const STYLES = [
+    { id: 'pain',    name: '痛点种草', note: '用户痛点切入,以「我懂你」的口吻引出产品。', tag: '最常用', flow: ['痛点', '共鸣', '产品', '效果', '引导'] },
+    { id: 'review',  name: '开箱测评', note: '朋友式分享,从开箱到使用感受娓娓道来。',                  flow: ['开箱', '首印象', '试用', '对比', '结论'] },
+    { id: 'compare', name: '对比展示', note: '「用前 vs 用后 / 同类 vs 本品」直观呈现。',               flow: ['对照', '差距', '本品', '数据', '购买'] },
+  ];
+
+  const PERSONAS = [
+    { id: 'urban',    name: '都市白领女性', sub: '25-30 岁',     metric: '大盘消费力',     defaults: { duration: '0-15', style: 'pain' } },
+    { id: 'bestie',   name: '闺蜜种草',     sub: '邻家女孩',     metric: '复购最高',       defaults: { duration: '0-15', style: 'pain' } },
+    { id: 'ceo',      name: '总裁亲选',     sub: '创始人 IP',    metric: '30 万销额案例',  defaults: { duration: '0-30', style: 'pain' } },
+    { id: 'reviewer', name: '专业测评师',   sub: '垂类达人',     metric: '互动 +30%',      defaults: { duration: '0-30', style: 'review' } },
+    { id: 'mom',      name: '实用宝妈',     sub: '家庭决策者',   metric: '母婴/家清稳',    defaults: { duration: '0-30', style: 'pain' } },
+    { id: 'genz',     name: '学生党',       sub: 'Z 世代 18-24', metric: '平价快消',       defaults: { duration: '0-10', style: 'compare' } },
+  ];
+
+  const USER_EMAIL = 'li@shop.com';
+  const ACCOUNT_BALANCE = 327.40;
+
+  /* ---------- state ---------- */
+
+  const state = {
+    currentStep: 1,
+    productId: null,
+    pickSearch: '',
+    pickCat: '全部',
+    sourceId: null,
+    themeText: '',
+    manualScript: '',
+    projectName: '',
+    duration: null,
+    scriptStyle: null,
+    persona: null,
+    points: {},
+    recoDismissed: false,
+    notifyEmail: true,
+    notifyWeChat: false,
+    agreed: false,
+  };
+
+  /* ---------- helpers ---------- */
+
+  function $(sel) { return document.querySelector(sel); }
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+  function getProduct()  { return PRODUCTS.find(p => p.id === state.productId) || null; }
+  function getSource()   { return SOURCES.find(s => s.id === state.sourceId)   || null; }
+  function getPersona()  { return PERSONAS.find(p => p.id === state.persona) || null; }
+  function getDuration() { return DURATIONS.find(d => d.id === state.duration) || null; }
+  function getStyle()    { return STYLES.find(s => s.id === state.scriptStyle) || null; }
+  function getShots()    { const d = getDuration(); return d ? (d.shots[0] + d.shots[1]) / 2 : 0; }
+  function getCost() {
+    // 全部返回 number,使用方各自 toFixed(2),避免 stringify 后再调 toFixed 报错
+    const p = getProduct();
+    const script  = 0.20;
+    const assets  = p ? p.imgs * 0.30 : 0;
+    const sb      = 0.40;  // 故事板 storyboard
+    const video   = getShots() * 0.30;  // 视频片段
+    const exp     = 0.10;  // 拼接导出
+    const subtotal = script + assets + sb + video + exp;
+    const fee = +(subtotal * 0.05).toFixed(2);
+    const total = +(subtotal + fee).toFixed(2);
+    return {
+      script, assets, sb, video, export: exp,
+      storyboard: sb, render: video, // 别名,兼容旧调用点
+      subtotal, fee, total,
+    };
+  }
+  function balanceAfter() { return +(ACCOUNT_BALANCE - getCost().total).toFixed(2); }
+  function etaMinutes() {
+    const p = getProduct();
+    return Math.max(3, Math.round(2 + getShots() * 0.4 + (p ? p.imgs * 0.2 : 0)));
+  }
+  function canPass1() { return !!state.productId; }
+  function canPass2() {
+    const s = getSource(); if (!s) return false;
+    if (s.id === 'theme')  return state.themeText.trim().length >= 4;
+    if (s.id === 'manual') return state.manualScript.trim().length >= 20;
+    return true;
+  }
+  function canPass3() { return state.projectName.trim().length >= 2; }
+  function canFinish() { return canPass1() && canPass2() && canPass3() && state.agreed && balanceAfter() >= 5; }
+
+  /* ---------- icons ---------- */
+
+  const ICONS = {
+    check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>',
+    search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>',
+    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>',
+    x: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l14 14M19 5L5 19"/></svg>',
+    bulb: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>',
+    arrow: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>',
+    wallet: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M16 14h2"/></svg>',
+  };
+
+  /* ---------- actions ---------- */
+
+  function selectProduct(id) {
+    state.productId = id;
+    const p = getProduct();
+    if (!state.projectName) {
+      state.projectName = p.name.split(' ')[0] + ' · 痛点种草 · v1';
+    }
+    state.points = {};
+    p.points.forEach((pt, i) => { state.points[pt] = i < 2; });
+    render();
+  }
+
+  function selectSource(id) {
+    state.sourceId = id;
+    render();
+  }
+
+  function goNext() {
+    if (state.currentStep === 1 && !canPass1()) return;
+    if (state.currentStep === 2 && !canPass2()) return;
+    if (state.currentStep === 3 && !canPass3()) return;
+    if (state.currentStep < 4) state.currentStep++;
+    render();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+  function goPrev() {
+    if (state.currentStep > 1) state.currentStep--;
+    render();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+  function jumpTo(n) {
+    if (n < state.currentStep) {
+      state.currentStep = n;
+      render();
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }
+
+  function applyPreset() {
+    const p = getPersona();
+    state.duration = p.defaults.duration;
+    state.scriptStyle = p.defaults.style;
+    state.recoDismissed = false;
+    render();
+  }
+
+  function startGenerate() {
+    const p = getProduct(), d = getDuration(), st = getStyle();
+    if (!p || !d || !st || state.projectName.trim().length < 2) return;
+    // 持久化项目, 让 projects.html 下次加载时自动 prepend 到列表
+    try {
+      const seconds = (d.id.split('-')[1] || '15');
+      const baseName = state.projectName.trim();
+      const project = {
+        id: 'proj-' + Date.now(),
+        name: baseName + (/\sv\d+$/.test(baseName) ? '' : ' · v1'),
+        product: p.name,
+        source: '',
+        shots: Math.round(getShots()),
+        durationLabel: '0-' + seconds + 's',
+        status: 'wip',
+        stage: 1,
+        pillText: '脚本生成中',
+        createdAt: Date.now(),
+      };
+      const KEY = 'fs-extra-projects';
+      const list = JSON.parse(localStorage.getItem(KEY) || '[]');
+      list.push(project);
+      localStorage.setItem(KEY, JSON.stringify(list));
+    } catch (e) { /* localStorage 不可用时降级到只跳转 */ }
+    if (typeof Shell !== 'undefined' && Shell.toast) Shell.toast('项目已创建', '进入 pipeline · Stage 1 脚本');
+    setTimeout(() => { location.href = 'pipeline.html?stage=1&product=' + encodeURIComponent(p.name); }, 300);
+  }
+
+  function openNewProduct() {
+    if (!window.NewProductDrawer) {
+      if (typeof Shell !== 'undefined' && Shell.toast) Shell.toast('Drawer 未加载', '检查 new-product-drawer.js');
+      return;
+    }
+    window.NewProductDrawer.open({
+      onSave: function (p) {
+        // p = { id, name, cat, target, points: string[], images: [...], imgs: N }
+        // 适配 wizard 数据结构
+        const product = {
+          id: p.id,
+          name: p.name,
+          cat: p.cat,
+          price: null, // 表单暂未收集价格,显示时跳过
+          imgs: p.imgs,
+          points: p.points,
+          tags: p.target ? p.target.split(/[ ,、、]+/).filter(Boolean).slice(0, 3) : [],
+        };
+        // 置顶插入,让用户立刻看到
+        PRODUCTS.unshift(product);
+        // 自动选中(同时种子项目名 / 卖点),触发 render() 刷新 step 1
+        selectProduct(product.id);
+        // 商品库若开着 → 强制 reset filter/query/搜索框,确保新商品一定可见
+        const libBg = document.getElementById('pl-modal-bg');
+        if (libBg && libBg.classList.contains('show')) {
+          _plCatFilter = '';
+          _plQuery = '';
+          const searchInput = document.getElementById('pl-search-input');
+          if (searchInput) searchInput.value = '';
+          document.getElementById('pl-total-ct').textContent = '// 共 ' + PRODUCTS.length + ' 个商品';
+          renderProdLibSide();
+          renderProdLib();
+        }
+      }
+    });
+  }
+
+  // ─── 商品库全屏弹窗 (单选) ───
+  let _plQuery = '';
+  let _plCatFilter = '';
+  function renderProdLib() {
+    const grid = document.getElementById('pl-grid');
+    let list = PRODUCTS;
+    if (_plCatFilter) list = list.filter(x => x.cat === _plCatFilter);
+    if (_plQuery) list = list.filter(x => x.name.includes(_plQuery));
+    grid.innerHTML = list.map(p => `
+      <div class="pl-card${state.productId === p.id ? ' selected' : ''}" data-id="${p.id}">
+        <div class="pl-check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></div>
+        <div class="placeholder pl-thumb"><span class="ph-frame">${esc(p.name)}</span></div>
+        <div class="pl-name">${esc(p.name)}</div>
+        <div class="pl-meta">${esc(p.cat)}${p.price != null ? ' · ¥' + p.price : ''} · ${p.imgs} 张图</div>
+      </div>
+    `).join('');
+    grid.querySelectorAll('.pl-card').forEach(card => {
+      card.addEventListener('click', () => {
+        selectProduct(card.dataset.id);
+        closeProdLib();
+      });
+    });
+  }
+  function renderProdLibSide() {
+    // 动态分类(从 PRODUCTS 统计)
+    const counts = { '全部': PRODUCTS.length };
+    PRODUCTS.forEach(p => { counts[p.cat] = (counts[p.cat] || 0) + 1; });
+    const cats = ['全部', ...Object.keys(counts).filter(k => k !== '全部')];
+    const side = document.getElementById('pl-side');
+    side.innerHTML = '<div class="pl-side-h">分类</div>' +
+      cats.map(c => `<div class="pl-side-item${(_plCatFilter === '' && c === '全部') || _plCatFilter === c ? ' active' : ''}" data-cat="${c === '全部' ? '' : esc(c)}">${esc(c)} <span class="ct">${counts[c]}</span></div>`).join('');
+    side.querySelectorAll('.pl-side-item').forEach(item => {
+      item.addEventListener('click', () => {
+        side.querySelectorAll('.pl-side-item').forEach(x => x.classList.remove('active'));
+        item.classList.add('active');
+        _plCatFilter = item.dataset.cat;
+        renderProdLib();
+      });
+    });
+  }
+  function openProdLib() {
+    _plQuery = '';
+    _plCatFilter = '';
+    document.getElementById('pl-search-input').value = '';
+    document.getElementById('pl-total-ct').textContent = '// 共 ' + PRODUCTS.length + ' 个商品';
+    renderProdLibSide();
+    renderProdLib();
+    document.getElementById('pl-modal-bg').classList.add('show');
+  }
+  function closeProdLib() {
+    document.getElementById('pl-modal-bg').classList.remove('show');
+  }
+
+  // expose for inline onclick
+  window._wiz = {
+    selectProduct, selectSource, goNext, goPrev, jumpTo, applyPreset, startGenerate, openNewProduct,
+    openProdLib, closeProdLib,
+    setSearch: v => { state.pickSearch = v; renderStep1Only(); },
+    setCat:    v => { state.pickCat    = v; renderStep1Only(); },
+    setTheme:  v => { state.themeText  = v; updateFootOnly(); updatePreviewLive(); },
+    setScript: v => { state.manualScript = v; updateFootOnly(); },
+    setName:   v => { state.projectName = v; updatePreviewLive(); updateFootOnly(); updateRailOnly(); },
+    setDur:    v => { state.duration = v; render(); },
+    setStyle:  v => { state.scriptStyle = v; render(); },
+    setPersona:v => { state.persona = v; state.recoDismissed = false; render(); },
+    togglePt:  k => { state.points[k] = !state.points[k]; render(); },
+    dismissReco: () => { state.recoDismissed = true; render(); },
+    toggleEmail: () => { state.notifyEmail = !state.notifyEmail; render(); },
+    toggleWeChat: () => { state.notifyWeChat = !state.notifyWeChat; render(); },
+    toggleTos: () => { state.agreed = !state.agreed; render(); },
+    toggleAgree: v => { state.agreed = v; render(); },
+    setProjectName: v => {
+      state.projectName = v;
+      // 仅更新预览的标题, 不重新 render (避免 input 失焦)
+      const titleEl = $('#preview .pv-title');
+      if (titleEl) {
+        // 仅替换标题文字部分,保留 input
+        const p = getProduct();
+        const text = state.projectName || (p ? p.name + ' · 待命名' : '未命名项目');
+        const node = titleEl.childNodes[0];
+        if (node && node.nodeType === 3) node.nodeValue = text;
+      }
+    },
+  };
+
+  /* ============================================================
+     RENDER
+     ============================================================ */
+
+  function railConfig() {
+    const p = getProduct(), du = getDuration(), st = getStyle();
+    const cfgReady = !!(du && st);
+    return [
+      { n: 1, label: '选择商品', desc: p ? p.name : '未选择', done: canPass1() },
+      { n: 2, label: '项目配置', desc: cfgReady ? (du.label + ' · ' + st.name) : '时长 · 风格 · 人物', done: cfgReady && canPass3() },
+    ];
+  }
+
+  // 平滑滚动到 step section
+  function scrollToStep(n) {
+    const target = document.querySelector('#step-pane-' + n);
+    if (!target) return;
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+  // 暴露 (rail 内 onclick 引用)
+  window._wiz_scrollToStep = scrollToStep;
+
+  function renderRail() {
+    const cfg = railConfig();
+    const html = cfg.map(s => {
+      const stt = s.done ? 'done' : '';
+      const numContent = s.done ? ICONS.check : s.n;
+      return `<div class="step ${stt} clickable" onclick="_wiz_scrollToStep(${s.n})">
+        <div class="num">${numContent}</div>
+        <div>
+          <div class="label">${esc(s.label)}</div>
+          <div class="desc">${esc(s.desc)}</div>
+        </div>
+      </div>`;
+    }).join('');
+    $('#rail').innerHTML = html;
+  }
+
+  function productPickHTML(p) {
+    const selected = state.productId === p.id;
+    return `<div class="product-pick${selected ? ' selected' : ''}" onclick="_wiz.selectProduct('${p.id}')">
+      <div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
+      <div class="body">
+        <div class="name">${esc(p.name)}</div>
+        <div class="meta">${esc(p.cat)}${p.price != null ? ' · <b>¥' + p.price + '</b>' : ''} · ${p.imgs} 张图</div>
+        <div class="tags">${p.tags.map(t => `<span class="tag-s">${esc(t)}</span>`).join('')}</div>
+      </div>
+    </div>`;
+  }
+
+  function renderStep1() {
+    // 已选 + 最近使用,合并去重
+    const ids = new Set();
+    if (state.productId) ids.add(state.productId);
+    RECENT_IDS.forEach(id => ids.add(id));
+    const recent = [...ids].map(id => PRODUCTS.find(p => p.id === id)).filter(Boolean);
+
+    return `<div class="wiz-pane active" data-step="1">
+      <div class="wiz-step-h">
+        <h2>第 1 步 · 选择商品</h2>
+        <p>从商品库选一个 SKU。它的主图与卖点会被 LLM 作为脚本/资产生成的素材。</p>
+      </div>
+
+      <div class="pick-actions">
+        <button class="cap-pill" type="button" onclick="_wiz.openNewProduct()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+          添加商品
+        </button>
+        <button class="cap-pill" type="button" onclick="_wiz.openProdLib()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 4v16"/></svg>
+          去商品库 <span style="font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; margin-left: 2px;">// 共 ${PRODUCTS.length} 个</span>
+        </button>
+      </div>
+
+      <div class="pick-section-h">
+        <span>最近使用</span>
+        <span class="count">${recent.length}</span>
+      </div>
+      <div class="product-pick-row">
+        ${recent.map(productPickHTML).join('')}
+      </div>
+    </div>`;
+  }
+
+  function renderStep2() {
+    const s = getSource();
+    let detail = '';
+    if (s) {
+      if (s.id === 'ai') {
+        detail = `<div class="source-detail">
+          <div class="sd-h">// 已选 · <b>${esc(s.name)}</b></div>
+          <div class="field-hint" style="font-size: 12.5px; color: var(--black-alpha-72);">AI 全生模式无需额外输入。下一步选定时长 / 风格 / 人设后,LLM 会自动决定切入点和卖点权重。</div>
+        </div>`;
+      } else if (s.id === 'theme') {
+        detail = `<div class="source-detail">
+          <div class="sd-h">// 已选 · <b>${esc(s.name)}</b></div>
+          <div class="field" style="margin-bottom: 0;">
+            <label class="field-label">一句话主题<span class="req">*</span></label>
+            <input class="input" placeholder="例:熬夜党的急救面膜 / 加班吃啥不内疚" value="${esc(state.themeText)}" oninput="_wiz.setTheme(this.value)">
+            <div class="field-hint">推荐 5–30 字。这句话会作为 LLM 扩写的锚点,越具体越聚焦。</div>
+          </div>
+        </div>`;
+      } else if (s.id === 'manual') {
+        detail = `<div class="source-detail">
+          <div class="sd-h">// 已选 · <b>${esc(s.name)}</b></div>
+          <div class="field" style="margin-bottom: 0;">
+            <label class="field-label">粘贴脚本内容<span class="req">*</span></label>
+            <textarea class="textarea" placeholder="粘贴你的脚本内容(旁白 / 镜头描述均可,系统会自动切分镜头)" oninput="_wiz.setScript(this.value)">${esc(state.manualScript)}</textarea>
+            <div class="field-hint">最少 20 字。镜头数由你的脚本自然段落决定,时长 / 风格仍会影响后期渲染节奏。</div>
+          </div>
+        </div>`;
+      }
+    }
+    return `<div class="wiz-pane active" data-step="2">
+      <div class="wiz-step-h">
+        <h2>第 2 步 · 脚本来源</h2>
+        <p>决定 LLM 如何获得初稿脚本。三种方式由「最省事」到「最保真原意」。</p>
+      </div>
+      <div class="source-row">
+        ${SOURCES.map(s => `<div class="source-card${state.sourceId === s.id ? ' selected' : ''}" onclick="_wiz.selectSource('${s.id}')">
+          <span class="src-ic">${s.icon}</span>
+          <h4>${esc(s.name)}</h4>
+          <span class="src-tag">[ ${esc(s.tag)} ]</span>
+          <p class="src-desc">${esc(s.desc)}</p>
+        </div>`).join('')}
+      </div>
+      ${detail}
+    </div>`;
+  }
+
+  function renderStep3() {
+    const personaObj = getPersona(), durObj = getDuration(), styleObj = getStyle();
+    let showReco = false, recoDur = null, recoStyle = null;
+    if (personaObj && state.duration && state.scriptStyle) {
+      const recoMismatch = personaObj.defaults.duration !== state.duration || personaObj.defaults.style !== state.scriptStyle;
+      showReco = recoMismatch && !state.recoDismissed;
+      recoDur = DURATIONS.find(d => d.id === personaObj.defaults.duration);
+      recoStyle = STYLES.find(s => s.id === personaObj.defaults.style);
+    }
+
+    return `<div class="wiz-pane active" data-step="2">
+      <div class="wiz-step-h">
+        <h2>第 2 步 · 项目配置</h2>
+        <p>这些设置会影响 LLM 生成脚本的方向,确认后会进入流水线第 1 步(脚本生成)。</p>
+      </div>
+
+      <div class="field">
+        <label class="field-label">项目名称<span class="req">*</span></label>
+        <input class="input" value="${esc(state.projectName)}" oninput="_wiz.setName(this.value)">
+      </div>
+
+      <div class="field">
+        <label class="field-label">视频时长<span class="req">*</span></label>
+        <div class="opt-row cols-4">
+          ${DURATIONS.map(d => `<div class="opt-card${state.duration === d.id ? ' selected' : ''}" onclick="_wiz.setDur('${d.id}')">
+            <h4>${esc(d.label)}</h4>
+            <div class="sub">${d.shots[0]}-${d.shots[1]} 镜</div>
+            <div class="note">${esc(d.tag)}</div>
+            <div class="metric">完播 <span class="val">${d.completion}%</span></div>
+          </div>`).join('')}
+        </div>
+        <div class="field-hint">数据来源:抖音同品类 TOP 视频均值 · 实际镜头数由 LLM 决定</div>
+      </div>
+
+      <div class="field">
+        <label class="field-label">脚本风格</label>
+        <div class="opt-row">
+          ${STYLES.map(s => `<div class="opt-card${state.scriptStyle === s.id ? ' selected' : ''}" onclick="_wiz.setStyle('${s.id}')">
+            <h4>${esc(s.name)}</h4>
+            <div class="note">${esc(s.note)}</div>
+            ${s.tag ? `<span class="badge">[ ${esc(s.tag)} ]</span>` : ''}
+          </div>`).join('')}
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="field-label">人物设定</label>
+        <div class="opt-row cols-6">
+          ${PERSONAS.map(p => `<div class="opt-card${state.persona === p.id ? ' selected' : ''}" onclick="_wiz.setPersona('${p.id}')">
+            <h4>${esc(p.name)}</h4>
+            <div class="sub">${esc(p.sub)}</div>
+            <div class="metric"><span class="val">${esc(p.metric)}</span></div>
+          </div>`).join('')}
+        </div>
+
+        ${showReco ? `<div class="reco-bubble">
+          <span class="ic">${ICONS.bulb}</span>
+          <div class="txt">
+            <span>抖音同人设 TOP 视频更常用 <strong>${esc(recoDur.label)}</strong> + <strong>${esc(recoStyle.name)}</strong></span>
+            <span class="meta">当前 ${esc(durObj.label)} · ${esc(styleObj.name)} → 推荐换为同人设最优组合</span>
+          </div>
+          <button class="btn-apply" onclick="_wiz.applyPreset()">一键套用</button>
+          <button class="dismiss" onclick="_wiz.dismissReco()" aria-label="忽略">${ICONS.x}</button>
+        </div>` : ''}
+      </div>
+
+      ${Object.keys(state.points).length > 0 ? `<div class="field" style="margin-bottom: 0;">
+        <label class="field-label">关键卖点(可勾选要重点突出的)</label>
+        <div style="display:flex; gap:6px; flex-wrap:wrap;">
+          ${Object.entries(state.points).map(([k, v]) => `<span class="theme-pill${v ? ' active' : ''}" onclick="_wiz.togglePt('${esc(k).replace(/'/g, "\\'")}')">${v ? ICONS.check : ICONS.plus}<span>${esc(k)}</span></span>`).join('')}
+        </div>
+      </div>` : ''}
+    </div>`;
+  }
+
+  function renderStep4() {
+    const p = getProduct(), s = getSource(), personaObj = getPersona(), durObj = getDuration(), styleObj = getStyle();
+    const c = getCost();
+    const ba = balanceAfter();
+    const low = ba < 5;
+    const eta = etaMinutes();
+    const pointsList = Object.entries(state.points).filter(([, v]) => v).map(([k]) => k).join(' / ') || '未选';
+
+    return `<div class="wiz-pane active" data-step="4">
+      <div class="wiz-step-h">
+        <h2>第 4 步 · 确认与计费</h2>
+        <p>核对前 3 步的选择 + 计费明细。点击「开始生成」会立刻扣款并进入流水线。</p>
+      </div>
+
+      <div class="confirm-grid">
+        <div class="confirm-card">
+          <div class="cc-h"><span>// 商品</span><button class="cc-edit" onclick="_wiz.jumpTo(1)">修改</button></div>
+          ${p ? `<div style="display:flex; gap:12px; align-items:flex-start;">
+            <div class="placeholder" style="width:44px; height:56px; flex-shrink:0;"><span class="ph-frame">9:16</span></div>
+            <div class="cc-body" style="min-width:0;">
+              <div style="font-weight:600; font-size:13px;">${esc(p.name)}</div>
+              <div class="ln">${esc(p.cat)}${p.price != null ? ' <span style="color: var(--black-alpha-32);">·</span> <b>¥' + p.price + '</b>' : ''} <span style="color: var(--black-alpha-32);">·</span> ${p.imgs} 张图</div>
+            </div>
+          </div>` : '<div class="cc-body">未选择</div>'}
+        </div>
+
+        <div class="confirm-card">
+          <div class="cc-h"><span>// 脚本来源</span><button class="cc-edit" onclick="_wiz.jumpTo(2)">修改</button></div>
+          ${s ? `<div class="cc-body">
+            <div style="font-weight:600; font-size:13px;">${esc(s.name)}</div>
+            <div class="ln">${s.id === 'ai' ? 'LLM 全权 · 走向由 Step 3 决定'
+                          : s.id === 'theme' ? '主题:<b style="margin-left:4px;">' + esc(state.themeText || '(未填)') + '</b>'
+                          : '<b>' + state.manualScript.length + '</b> 字 · 自动切镜'}</div>
+          </div>` : '<div class="cc-body">未选择</div>'}
+        </div>
+
+        <div class="confirm-card">
+          <div class="cc-h"><span>// 项目配置</span><button class="cc-edit" onclick="_wiz.jumpTo(3)">修改</button></div>
+          <div class="cc-body">
+            <div style="font-weight:600; font-size:13px;">${esc(state.projectName)}</div>
+            <div class="ln"><b>${esc(styleObj.name)}</b> · ${esc(personaObj.name)} · ${esc(personaObj.sub)}</div>
+            <div class="ln" style="font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48);">卖点:${esc(pointsList)}</div>
+          </div>
+        </div>
+
+        <div class="confirm-card">
+          <div class="cc-h"><span>// 输出参数</span></div>
+          <div class="cc-body">
+            <div class="ln"><b>${esc(durObj.label)}</b> · <b>${durObj.shots[0]}-${durObj.shots[1]} 镜</b> · 9:16</div>
+            <div class="ln">预估完播 <b>${durObj.completion}%</b> · 预估转化 <b>${durObj.conversion}%</b></div>
+            <div class="ln" style="font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48);">// 数据来源:抖音同品类 TOP 均值</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="section-sub">计费明细 · 按量计费</div>
+      <div class="bill-list">
+        <div class="bill-row"><div class="l">脚本生成 <span class="l-sub">LLM · 1 稿</span></div><div class="qty">× 1</div><div class="amt">¥${c.script}</div></div>
+        <div class="bill-row"><div class="l">故事板生成 <span class="l-sub">含分镜画面描述</span></div><div class="qty">× 1</div><div class="amt">¥${c.sb}</div></div>
+        <div class="bill-row"><div class="l">资产生成 <span class="l-sub">主图 → 镜头素材</span></div><div class="qty">× ${p ? p.imgs : 0} 张</div><div class="amt">¥${c.assets}</div></div>
+        <div class="bill-row"><div class="l">视频渲染 <span class="l-sub">合成 · 配乐 · 字幕</span></div><div class="qty">× ${getShots()} 镜</div><div class="amt">¥${c.render}</div></div>
+        <div class="bill-row subtotal"><div class="l">小计</div><div class="qty"></div><div class="amt">¥${c.subtotal}</div></div>
+        <div class="bill-row subtotal"><div class="l">平台服务费 <span class="l-sub">5%</span></div><div class="qty"></div><div class="amt">¥${c.fee}</div></div>
+        <div class="bill-row total"><div class="l">合计</div><div class="qty"></div><div class="amt">¥${Math.floor(c.total)}<small>.${c.total.toFixed(2).split('.')[1]}</small></div></div>
+      </div>
+
+      <div class="balance-row${low ? ' low' : ''}">
+        <div class="bl">
+          ${ICONS.wallet}
+          <span class="lbl">账户余额</span>
+          <span class="val">¥${ACCOUNT_BALANCE.toFixed(2)}</span>
+          <span class="arrow">→</span>
+          <span class="lbl">扣款后</span>
+          <span class="val after">¥${ba.toFixed(2)}</span>
+        </div>
+        ${low
+          ? `<span class="pill err"><span class="dot"></span>余额不足 · <a>去充值</a></span>`
+          : `<span class="pill ok"><span class="dot"></span>余额充足</span>`}
+      </div>
+
+      <div class="section-sub">预估耗时 · 通知</div>
+      <div class="eta-block">
+        <div class="eta-tile">
+          <div class="lbl">预估出片</div>
+          <div class="v">~ ${eta}<small>分钟</small></div>
+          <div class="desc">// pipeline 5 阶段累计 · 不含人工审核</div>
+        </div>
+        <div class="eta-tile">
+          <div class="lbl">完成后通知</div>
+          <div class="check-row${state.notifyEmail ? ' on' : ''}" onclick="_wiz.toggleEmail()" style="padding:4px 0;">
+            <span class="check-box"></span>
+            <span class="lab">邮件 <span class="mono">${esc(USER_EMAIL)}</span></span>
+          </div>
+          <div class="check-row${state.notifyWeChat ? ' on' : ''}" onclick="_wiz.toggleWeChat()" style="padding:4px 0;">
+            <span class="check-box"></span>
+            <span class="lab">微信 <span class="mono">未绑定 · 去绑定</span></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="tos-row${state.agreed ? ' on' : ''}" onclick="_wiz.toggleTos()">
+        <span class="check-box"></span>
+        <span class="lab">我已阅读并同意 <a>《按量计费协议》</a> 与 <a>《商品素材使用授权》</a></span>
+      </div>
+    </div>`;
+  }
+
+  function renderCollapsedStep(n) {
+    const p = getProduct(), s = getSource();
+    let title = '', body = '';
+    if (n === 1) {
+      title = '第 1 步 · 选择商品';
+      body = p
+        ? `<div style="display:flex; gap:12px; align-items:flex-start;">
+            <div class="placeholder" style="width:44px; height:56px; flex-shrink:0;"><span class="ph-frame">9:16</span></div>
+            <div style="min-width:0;">
+              <div style="font-weight:600; font-size:13.5px;">${esc(p.name)}</div>
+              <div class="mono" style="font-size:11.5px; color: var(--black-alpha-48); margin-top:3px; letter-spacing:.02em;">${esc(p.cat)}${p.price != null ? ' · ¥' + p.price : ''} · ${p.imgs} 张图 · ${p.points.length} 个卖点</div>
+            </div>
+          </div>`
+        : '<span class="mono" style="color: var(--black-alpha-48); font-size: 11.5px;">未选择</span>';
+    } else if (n === 2) {
+      title = '第 2 步 · 脚本来源';
+      if (s) {
+        let extra = '';
+        if (s.id === 'theme' && state.themeText) {
+          extra = `<span class="muted" style="color: var(--black-alpha-56);">主题:</span><span style="font-size: 13px;">${esc(state.themeText)}</span>`;
+        } else if (s.id === 'manual') {
+          extra = `<span class="muted" style="color: var(--black-alpha-56);">脚本:</span><span style="font-size: 13px;">${state.manualScript.length} 字</span>`;
+        } else {
+          extra = `<span class="mono" style="font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em;">// 走向由 Step 3 决定</span>`;
+        }
+        body = `<div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+          <span class="pill info" style="display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; background: var(--heat-12); color: var(--heat); border: 1px solid var(--heat-20); font-weight: 500;"><span class="dot" style="width:6px;height:6px;border-radius:50%;background:currentColor;"></span>${esc(s.name)}</span>
+          ${extra}
+        </div>`;
+      } else {
+        body = '<span class="mono" style="color: var(--black-alpha-48); font-size: 11.5px;">未选择</span>';
+      }
+    }
+    return `<div class="wiz-pane collapsed">
+      <div class="wiz-pane-h">
+        <h3>${esc(title)}</h3>
+        <span style="flex:1"></span>
+        <button class="btn btn-ghost btn-sm" onclick="_wiz.jumpTo(${n})">修改</button>
+      </div>
+      ${body}
+    </div>`;
+  }
+
+  function renderFoot() {
+    const cfg = railConfig();
+    const last = state.currentStep === 4;
+    const passOk = state.currentStep === 1 ? canPass1()
+                 : state.currentStep === 2 ? canPass2()
+                 : state.currentStep === 3 ? canPass3()
+                 : canFinish();
+    const nextLabel = last ? '开始生成 →' : '下一步 →';
+    const hint = last
+      ? `// 扣款 ¥${getCost().total.toFixed(2)} · 进入 pipeline`
+      : `// 下一步:${cfg[state.currentStep].label}`;
+    const action = last ? '_wiz.startGenerate()' : '_wiz.goNext()';
+    return `<div class="wiz-foot">
+      <button class="btn btn-ghost"${state.currentStep === 1 ? ' disabled' : ''} onclick="_wiz.goPrev()">← 上一步</button>
+      <div style="display:flex; align-items:center; gap:12px;">
+        <span class="mono" style="font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em;">${esc(hint)}</span>
+        <button class="btn btn-primary btn-lg${!passOk ? ' disabled' : ''}" onclick="${action}">${nextLabel}</button>
+      </div>
+    </div>`;
+  }
+
+  function renderPreview() {
+    // 实时预估面板已移除 (改为底部「开始」CTA)
+    const previewEl = $('#preview');
+    if (previewEl) previewEl.innerHTML = '';
+    return;
+    // legacy code below kept for reference but unreachable
+    const p = getProduct(), personaObj = getPersona(), durObj = getDuration(), styleObj = getStyle(), c = getCost();
+    const shots = getShots();
+    const pointsOn = Object.entries(state.points).filter(([, v]) => v).map(([k]) => k);
+    const title = state.projectName || (p ? p.name + ' · 待命名' : '未命名项目');
+
+    const arrows = '<span class="arrow">' + ICONS.arrow + '</span>';
+
+    const ready = canPass1() && canPass2() && canPass3();
+    const balOk = balanceAfter() >= 5;
+    const canGo = ready && balOk && state.agreed;
+    const footState = !ready ? '填写中' : !balOk ? '余额不足' : !state.agreed ? '待确认协议' : '就绪';
+    const stepProgress = [canPass1(), canPass2(), canPass3()].filter(Boolean).length;
+
+    const configReady = !!(state.persona && state.duration && state.scriptStyle);
+    const summaryBlock = (p || configReady) ? `
+      <div class="pv-section">
+        <div class="lbl">// 已选</div>
+        <ul class="pv-list">
+          ${p ? `<li>${esc(p.name)}</li>` : ''}
+          ${configReady ? `<li>${esc(personaObj.name)} · ${esc(styleObj.name)} · ${esc(durObj.label)}</li>` : ''}
+        </ul>
+      </div>` : `
+      <div class="pv-section">
+        <div class="lbl">// 待选择</div>
+        <ul class="pv-list" style="opacity: .6;">
+          <li style="color: var(--black-alpha-48);">先选商品 · 预估会自动填充</li>
+        </ul>
+      </div>`;
+
+    // 计费 + 余额(精简版,不展开 5 阶段明细)
+    const billingHTML = `
+      <div class="pv-bill-summary">
+        <div class="row"><span class="k">预估合计</span><span class="v"><b>¥${c.total.toFixed(2)}</b></span></div>
+        <div class="row"><span class="k">扣款后余额</span><span class="v ${balOk ? '' : 'low'}">¥${balanceAfter().toFixed(2)}</span></div>
+      </div>
+      <div class="pv-agree-row">
+        <label>
+          <input type="checkbox" id="pv-agree" ${state.agreed ? 'checked' : ''} onchange="_wiz.toggleAgree(this.checked)">
+          <span>同意 <a href="#" onclick="event.preventDefault();Shell.toast('用户协议')">协议</a> 与 <a href="#" onclick="event.preventDefault();Shell.toast('计费规则')">计费规则</a>(失败不扣费)</span>
+        </label>
+      </div>
+    `;
+
+    $('#preview').innerHTML = `
+      <div class="pv-h"><span>实时预估</span><span class="live">LIVE</span></div>
+      <div class="pv-title">${esc(title)}</div>
+      <div class="pv-metrics">
+        <div class="pv-metric"><div class="l">镜头</div><div class="v">${shots}<small>镜</small></div></div>
+        <div class="pv-metric accent"><div class="l">预估完播</div><div class="v">${durObj.completion}<small>%</small></div></div>
+        <div class="pv-metric"><div class="l">预估转化</div><div class="v">${durObj.conversion}<small>%</small></div></div>
+        <div class="pv-metric"><div class="l">预估成本</div><div class="v">¥${c.total.toFixed(2)}</div></div>
+      </div>
+      ${summaryBlock}
+      ${billingHTML}
+      <button class="btn btn-primary btn-lg" style="width:100%;margin-top:14px;justify-content:center;${canGo ? '' : 'opacity:.5;pointer-events:none;cursor:not-allowed;'}" onclick="_wiz.startGenerate()">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 9-14 9V3z"/></svg>
+        开始生成
+      </button>
+      <div class="pv-foot">
+        <span>${stepProgress}/3 步已完成</span>
+        <strong>${footState}</strong>
+      </div>
+    `;
+  }
+
+  /* ---------- partial updates (to keep inputs from losing focus) ---------- */
+
+  function renderStep1Only() {
+    // when user types in search or clicks cat chip — only re-render Step 1 main area
+    if (state.currentStep !== 1) return;
+    const body = $('#wiz-body');
+    const active = body.querySelector('.wiz-pane.active');
+    if (active) {
+      const tmp = document.createElement('div');
+      tmp.innerHTML = renderStep1();
+      active.replaceWith(tmp.firstElementChild);
+    }
+    // refocus search input
+    const inp = body.querySelector('.search-input input');
+    if (inp && document.activeElement !== inp) {
+      inp.focus();
+      const v = inp.value;
+      inp.setSelectionRange(v.length, v.length);
+    }
+  }
+
+  function updatePreviewLive() { renderPreview(); }
+  function updateFootOnly() {
+    const body = $('#wiz-body');
+    const foot = body.querySelector('.wiz-foot');
+    if (foot) {
+      const tmp = document.createElement('div');
+      tmp.innerHTML = renderFoot();
+      foot.replaceWith(tmp.firstElementChild);
+    }
+  }
+  function updateRailOnly() { renderRail(); }
+
+  /* ---------- main render ---------- */
+
+  function render() {
+    renderRail();
+    const body = $('#wiz-body');
+    // 单页式: 商品 (step1) + 项目配置 (原 step3, 现 step2),底部「开始」CTA
+    const p = getProduct(), du = getDuration(), st = getStyle();
+    const canStart = !!(p && du && st && state.projectName.trim().length >= 2);
+    let html = '';
+    html += '<section id="step-pane-1" class="step-pane-wrap">' + renderStep1() + '</section>';
+    html += '<section id="step-pane-2" class="step-pane-wrap">' + renderStep3() + '</section>';
+    html += `<div class="wiz-start-bar">
+      <button class="btn-start${canStart ? '' : ' disabled'}" type="button" onclick="_wiz.startGenerate()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 9-14 9V3z"/></svg>
+        <span>开始</span>
+      </button>
+    </div>`;
+    body.innerHTML = html;
+  }
+
+  // 商品库弹窗事件绑定 (DOM 静态元素)
+  document.getElementById('pl-close-btn').addEventListener('click', closeProdLib);
+  document.getElementById('pl-cancel-btn').addEventListener('click', closeProdLib);
+  document.getElementById('pl-search-input').addEventListener('input', e => {
+    _plQuery = e.target.value.trim();
+    renderProdLib();
+  });
+  document.getElementById('pl-new-btn').addEventListener('click', () => {
+    // 商品库保持 open(drawer z-index 1101 > pl-modal-bg 998 会覆盖之上)
+    openNewProduct();
+  });
+
+  // initial render
+  render();
+})();
+</script>
+</body>
+</html>
diff --git a/v2/projects.html b/v2/projects.html
new file mode 100644
index 0000000..ae638d1
--- /dev/null
+++ b/v2/projects.html
@@ -0,0 +1,1063 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>视频项目 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── List view ─── */
+  .proj-name-cell { display: flex; align-items: center; gap: 12px; }
+  .proj-thumb { width: 40px; height: 52px; flex-shrink: 0; border-radius: var(--r-md); }
+  .proj-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; }
+  .proj-sub { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .row-action { display: flex; gap: 4px; visibility: hidden; }
+  table.t tbody tr:hover .row-action { visibility: visible; }
+  .row-action a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--black-alpha-56); border-radius: var(--r-md); }
+  .row-action a:hover { background: var(--surface); color: var(--heat); border: 1px solid var(--border-faint); }
+
+  /* ─── View toggle ─── */
+  .view-toggle { display: inline-flex; border: 1px solid var(--border-faint); border-radius: var(--r-md); overflow: hidden; }
+  .view-toggle button { padding: 0 14px; background: var(--surface); color: var(--black-alpha-56); font-size: 13px; border-right: 1px solid var(--border-faint); border-radius: 0; height: 36px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; transition: background var(--t-base), color var(--t-base); }
+  .view-toggle button:last-child { border-right: 0; }
+  .view-toggle button:hover { background: var(--background-lighter); color: var(--accent-black); }
+  .view-toggle button.active { background: var(--heat-12); color: var(--heat); font-weight: 600; }
+  .view-toggle button svg { width: 13px; height: 13px; }
+
+  /* ─── Grid view ─── */
+  .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
+  .proj-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s; display: flex; flex-direction: column; position: relative; }
+  .proj-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
+  .proj-card:hover .card-del-btn { opacity: 1; }
+  .proj-card .card-thumb { aspect-ratio: 9/16; max-height: 280px; border-radius: var(--r-md) var(--r-md) 0 0; }
+  /* 编辑模式 checkbox */
+  .proj-card .card-check {
+    position: absolute; top: 10px; left: 10px;
+    width: 22px; height: 22px; border-radius: 50%;
+    background: var(--surface); border: 2px solid var(--black-alpha-32);
+    display: none; place-items: center;
+    color: var(--accent-white); z-index: 5;
+    pointer-events: none;
+  }
+  .proj-card .card-check svg { width: 11px; height: 11px; opacity: 0; }
+  body.edit-mode .proj-card .card-check { display: grid; }
+  body.edit-mode .proj-card.selected .card-check {
+    background: var(--heat); border-color: var(--heat);
+  }
+  body.edit-mode .proj-card.selected .card-check svg { opacity: 1; }
+  body.edit-mode .proj-card.selected { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
+  body.edit-mode .proj-card .card-del-btn { opacity: 0 !important; pointer-events: none !important; }
+  /* 列表行末 ⋯ 删除气泡 */
+  .row-more {
+    position: relative; display: inline-flex;
+    cursor: pointer; align-items: center;
+    color: var(--black-alpha-56);
+    padding: 4px;
+  }
+  .row-more:hover { color: var(--accent-black); }
+  .row-more-tip {
+    position: absolute; top: calc(100% + 6px); right: 0;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    box-shadow: 0 4px 16px rgba(0,0,0,.08);
+    padding: 4px; min-width: 110px;
+    opacity: 0; pointer-events: none;
+    transform: translateY(-2px);
+    transition: opacity .15s, transform .15s;
+    z-index: 12;
+  }
+  .row-more-tip::before {
+    content: ''; position: absolute;
+    top: -8px; left: 0; right: 0; height: 8px;
+  }
+  .row-more:hover .row-more-tip,
+  .row-more-tip:hover { opacity: 1; pointer-events: auto; transform: translateY(0); }
+  .row-more-tip .mi {
+    display: flex; align-items: center; gap: 6px;
+    width: 100%; padding: 6px 10px;
+    background: transparent; border: 0;
+    border-radius: var(--r-sm); cursor: pointer;
+    font-size: 12.5px; color: var(--accent-black);
+    font-family: inherit; text-align: left;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .row-more-tip .mi:hover {
+    background: var(--crimson-bg, #fdebea);
+    color: var(--accent-crimson, #c43d3d);
+  }
+  .row-more-tip .mi svg { width: 13px; height: 13px; }
+  .btn.active { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); }
+  /* bulk-bar */
+  .bulk-bar {
+    position: fixed; bottom: 24px; left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent-black); color: var(--accent-white);
+    border-radius: var(--r-md);
+    padding: 10px 14px 10px 18px;
+    display: none; align-items: center; gap: 16px;
+    box-shadow: 0 8px 24px rgba(0,0,0,.18);
+    z-index: 100; font-size: 13px;
+  }
+  body.edit-mode .bulk-bar { display: inline-flex; }
+  .bulk-bar .ct { font-family: var(--font-mono); letter-spacing: .02em; }
+  .bulk-bar .ct b { color: var(--heat); font-weight: 700; padding: 0 3px; }
+  .bulk-bar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); }
+  .bulk-bar button {
+    height: 30px; padding: 0 12px;
+    background: transparent; border: 1px solid rgba(255,255,255,.24);
+    border-radius: var(--r-sm); color: var(--accent-white);
+    font-size: 12.5px; font-family: inherit; cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px;
+  }
+  .bulk-bar button:hover { background: rgba(255,255,255,.08); }
+  .bulk-bar button.danger { background: var(--accent-crimson); border-color: var(--accent-crimson); }
+  .bulk-bar button svg { width: 12px; height: 12px; }
+  .bulk-bar .clear-sel { color: rgba(255,255,255,.6); font-size: 12px; cursor: pointer; background: none; border: 0; padding: 4px 6px; }
+  .proj-card .card-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
+  .proj-card .card-name { font-size: 13.5px; font-weight: 600; color: var(--accent-black); line-height: 1.4; }
+  .proj-card .card-sub { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
+  .proj-card .card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-faint); margin-top: auto; }
+  .proj-card .card-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>视频项目</h1>
+    <div class="sub"><span class="mono">// <span id="sub-total">0</span> 个 · <span id="sub-wip">0</span> 进行中 · <span id="sub-done">0</span> 完成 · <span id="sub-fail">0</span> 失败</span></div>
+  </div>
+  <div class="actions">
+    <button class="btn" type="button" id="proj-manage-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
+      <span class="proj-manage-label">管理项目</span>
+    </button>
+    <a class="btn btn-primary btn-lg" href="projects-new.html">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
+      新建项目
+    </a>
+  </div>
+</div>
+
+<div class="tabs" id="status-tabs">
+  <div class="tab active" data-filter="all">全部 <span class="count">0</span></div>
+  <div class="tab" data-filter="wip">进行中 <span class="count">0</span></div>
+  <div class="tab" data-filter="done">已完成 <span class="count">0</span></div>
+  <div class="tab" data-filter="fail">失败 <span class="count">0</span></div>
+  <div class="tab" data-filter="archived">已归档 <span class="count">0</span></div>
+</div>
+
+<div class="toolbar">
+  <div class="search-inline">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+    <input class="input" id="search-input" placeholder="搜索项目名称、商品">
+  </div>
+  <div class="chip-wrap" data-key="product">
+    <button class="chip" type="button"><span class="chip-label">商品品类</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <div class="chip-wrap" data-key="source">
+    <button class="chip" type="button"><span class="chip-label">脚本来源</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <div class="chip-wrap" data-key="time">
+    <button class="chip" type="button"><span class="chip-label">创建时间</span> <svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
+    <div class="chip-menu"></div>
+  </div>
+  <button class="clear-filters" id="clear-filters" type="button" hidden>
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+    清空筛选
+  </button>
+  <span class="spacer"></span>
+  <div class="view-toggle">
+    <button id="view-grid" data-view="grid">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="5" height="5"/><rect x="9" y="2" width="5" height="5"/><rect x="2" y="9" width="5" height="5"/><rect x="9" y="9" width="5" height="5"/></svg>
+      网格
+    </button>
+    <button id="view-list" class="active" data-view="list">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h12M2 12h12"/></svg>
+      列表
+    </button>
+  </div>
+</div>
+
+<div class="result-meta" id="result-meta">// 显示 <span class="count">12</span> / 12 个项目</div>
+
+<!-- ============= LIST VIEW ============= -->
+<div id="list-view">
+  <table class="t">
+    <thead>
+      <tr>
+        <th style="width:32%">项目</th>
+        <th>商品</th>
+        <th>脚本来源</th>
+        <th style="width:200px">进度</th>
+        <th>状态</th>
+        <th style="width:120px">更新于</th>
+        <th style="width:60px"></th>
+      </tr>
+    </thead>
+    <tbody id="list-tbody">
+      <tr data-status="wip" data-name="补水面膜 痛点种草" onclick="location.href='pipeline.html#stage-3'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">补水面膜 · 痛点种草 · v3</div><div class="proj-sub">6 镜 · 0-15s</div></div>
+          </div>
+        </td>
+        <td>透真补水面膜</td>
+        <td><span class="muted">AI 全生</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="cur"></span><span></span><span></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">3/5</span>
+          </div>
+        </td>
+        <td><span class="pill info"><span class="dot"></span>故事板 待确认</span></td>
+        <td class="muted-2">12 分钟前</td>
+        <td>
+          <div class="row-action">
+            <a href="pipeline.html#stage-3" onclick="event.stopPropagation()" title="继续"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor"/></svg></a>
+            <span class="row-more" onclick="event.stopPropagation()"><svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="13" cy="8" r="1.2" fill="currentColor"/></svg><div class="row-more-tip"><button class="mi mi-del-row" type="button" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>删除项目</button></div></span>
+          </div>
+        </td>
+      </tr>
+      <tr data-status="wip" data-name="速食牛肉面 加班治愈" onclick="location.href='pipeline.html#stage-2'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">速食牛肉面 · 加班治愈</div><div class="proj-sub">4 镜 · 0-12s</div></div>
+          </div>
+        </td>
+        <td>滋啦速食 · 6 桶装</td>
+        <td><span class="muted">一句话主题</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="cur"></span><span></span><span></span><span></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">2/5</span>
+          </div>
+        </td>
+        <td><span class="pill info"><span class="dot"></span>资产生成中</span></td>
+        <td class="muted-2">37 分钟前</td>
+        <td></td>
+      </tr>
+      <tr data-status="wip" data-name="透真防晒 通勤对比" onclick="location.href='pipeline.html#stage-4'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">透真防晒 · 通勤对比</div><div class="proj-sub">6 镜 · 0-18s</div></div>
+          </div>
+        </td>
+        <td>透真清透防晒霜</td>
+        <td><span class="muted">AI 全生</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="cur"></span><span></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">4/5</span>
+          </div>
+        </td>
+        <td><span class="pill info"><span class="dot"></span>视频生成 4/6</span></td>
+        <td class="muted-2">2 小时前</td>
+        <td></td>
+      </tr>
+      <tr data-status="fail" data-name="咖啡冻干 早八剧情" onclick="location.href='pipeline.html#stage-3'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">咖啡冻干 · 早八剧情</div><div class="proj-sub">5 镜 · 0-15s</div></div>
+          </div>
+        </td>
+        <td>三顿半同款冻干</td>
+        <td><span class="muted">一句话主题</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="fail"></span><span></span><span></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">3/5</span>
+          </div>
+        </td>
+        <td><span class="pill err"><span class="dot"></span>故事板生成失败</span></td>
+        <td class="muted-2">昨天 18:42</td>
+        <td></td>
+      </tr>
+      <tr data-status="done" data-name="蓝牙耳机 开箱测评" onclick="location.href='pipeline.html#stage-5'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">蓝牙耳机 · 开箱测评</div><div class="proj-sub">5 镜 · 0-15s</div></div>
+          </div>
+        </td>
+        <td>南卡 Lite Pro</td>
+        <td><span class="muted">自带脚本</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">5/5</span>
+          </div>
+        </td>
+        <td><span class="pill ok"><span class="dot"></span>已完成</span></td>
+        <td class="muted-2">5 月 7 日</td>
+        <td></td>
+      </tr>
+      <tr data-status="done" data-name="瑜伽裤 通勤穿搭" onclick="location.href='pipeline.html#stage-5'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">瑜伽裤 · 通勤穿搭</div><div class="proj-sub">5 镜 · 0-15s</div></div>
+          </div>
+        </td>
+        <td>露露同款瑜伽裤</td>
+        <td><span class="muted">AI 全生</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">5/5</span>
+          </div>
+        </td>
+        <td><span class="pill ok"><span class="dot"></span>已完成</span></td>
+        <td class="muted-2">5 月 6 日</td>
+        <td></td>
+      </tr>
+      <tr data-status="done" data-name="空气炸锅 小户型" onclick="location.href='pipeline.html#stage-5'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">空气炸锅 · 小户型</div><div class="proj-sub">4 镜 · 0-12s</div></div>
+          </div>
+        </td>
+        <td>小熊 4L 空气炸锅</td>
+        <td><span class="muted">一句话主题</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">5/5</span>
+          </div>
+        </td>
+        <td><span class="pill ok"><span class="dot"></span>已完成</span></td>
+        <td class="muted-2">5 月 4 日</td>
+        <td></td>
+      </tr>
+      <tr data-status="archived" data-name="补水面膜 痛点种草 v1" onclick="location.href='pipeline.html#stage-5'">
+        <td>
+          <div class="proj-name-cell">
+            <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+            <div><div class="proj-name">补水面膜 · 痛点种草 · v1</div><div class="proj-sub">6 镜 · 0-15s</div></div>
+          </div>
+        </td>
+        <td>透真补水面膜</td>
+        <td><span class="muted">AI 全生</span></td>
+        <td>
+          <div class="hstack">
+            <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+            <span class="muted-2 mono" style="font-size:11px;">5/5</span>
+          </div>
+        </td>
+        <td><span class="pill neutral"><span class="dot"></span>已归档</span></td>
+        <td class="muted-2">4 月 28 日</td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- ============= GRID VIEW ============= -->
+<div id="grid-view" style="display:none;">
+  <div class="proj-grid" id="grid-body">
+    <div class="proj-card" data-status="wip" data-name="补水面膜 痛点种草" onclick="location.href='pipeline.html#stage-3'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 镜 3/6</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">补水面膜 · 痛点种草 · v3</div>
+          <div class="card-sub" style="margin-top:4px;">透真补水面膜 · 6 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="cur"></span><span></span><span></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">3/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill info"><span class="dot"></span>故事板 待确认</span>
+          <span class="card-time">12 分钟前</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="wip" data-name="速食牛肉面 加班治愈" onclick="location.href='pipeline.html#stage-2'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 镜 2/4</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">速食牛肉面 · 加班治愈</div>
+          <div class="card-sub" style="margin-top:4px;">滋啦速食 · 4 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="cur"></span><span></span><span></span><span></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">2/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill info"><span class="dot"></span>资产生成中</span>
+          <span class="card-time">37 分钟前</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="wip" data-name="透真防晒 通勤对比" onclick="location.href='pipeline.html#stage-4'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 镜 4/6</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">透真防晒 · 通勤对比</div>
+          <div class="card-sub" style="margin-top:4px;">透真清透防晒霜 · 6 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="cur"></span><span></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">4/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill info"><span class="dot"></span>视频 4/6</span>
+          <span class="card-time">2 小时前</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="fail" data-name="咖啡冻干 早八剧情" onclick="location.href='pipeline.html#stage-3'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 镜 3/5</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">咖啡冻干 · 早八剧情</div>
+          <div class="card-sub" style="margin-top:4px;">三顿半同款 · 5 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="fail"></span><span></span><span></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">3/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill err"><span class="dot"></span>故事板失败</span>
+          <span class="card-time">昨天 18:42</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="done" data-name="蓝牙耳机 开箱测评" onclick="location.href='pipeline.html#stage-5'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 5/5 ✓</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">蓝牙耳机 · 开箱测评</div>
+          <div class="card-sub" style="margin-top:4px;">南卡 Lite Pro · 5 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">5/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+          <span class="card-time">5 月 7 日</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="done" data-name="瑜伽裤 通勤穿搭" onclick="location.href='pipeline.html#stage-5'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 5/5 ✓</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">瑜伽裤 · 通勤穿搭</div>
+          <div class="card-sub" style="margin-top:4px;">露露同款 · 5 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">5/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+          <span class="card-time">5 月 6 日</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="done" data-name="空气炸锅 小户型" onclick="location.href='pipeline.html#stage-5'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 5/5 ✓</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">空气炸锅 · 小户型</div>
+          <div class="card-sub" style="margin-top:4px;">小熊 4L · 4 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">5/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill ok"><span class="dot"></span>已完成</span>
+          <span class="card-time">5 月 4 日</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="proj-card" data-status="archived" data-name="补水面膜 痛点种草 v1" onclick="location.href='pipeline.html#stage-5'">
+    <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+    <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+    <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 5/5 ✓</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">补水面膜 · 痛点种草 · v1</div>
+          <div class="card-sub" style="margin-top:4px;">透真补水面膜 · 6 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">5/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill neutral"><span class="dot"></span>已归档</span>
+          <span class="card-time">4 月 28 日</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Empty state -->
+<div class="empty-state" id="empty">
+  <div class="ic-empty">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+  </div>
+  <h3>没有匹配的项目</h3>
+  <p>// 试试切换 tab 或修改搜索词</p>
+</div>
+
+</div>
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({ active: 'projects', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '视频项目' }] });
+
+// ============== 注入用户新建的项目 (来自 projects-new.html 向导, 写入 localStorage) ==============
+// 必须在计数 / tagItem / buildMenu 之前执行, 让后续逻辑把它们当作普通项目处理
+(function injectExtraProjects() {
+  let pending;
+  try {
+    pending = JSON.parse(localStorage.getItem('fs-extra-projects') || '[]');
+  } catch (e) { return; }
+  if (!Array.isArray(pending) || !pending.length) return;
+
+  const tbody = document.getElementById('list-tbody');
+  const gridBody = document.getElementById('grid-body');
+  if (!tbody || !gridBody) return;
+  const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+
+  // 按 createdAt 升序 → 倒序 insert,最新的排最上
+  pending.sort((a, b) => (a.createdAt || 0) - (b.createdAt || 0));
+  pending.forEach(p => {
+    const href = `pipeline.html#stage-${p.stage || 1}`;
+    const status = p.status || 'wip';
+    const shots = p.shots || 5;
+    const durLabel = p.durationLabel || '0-15s';
+    const pill = p.pillText || '脚本生成中';
+
+    // List row
+    const tr = document.createElement('tr');
+    tr.dataset.status = status;
+    tr.dataset.name = p.name;
+    tr.dataset.extraId = p.id;
+    tr.setAttribute('onclick', `location.href='${href}'`);
+    tr.innerHTML = `
+      <td>
+        <div class="proj-name-cell">
+          <div class="placeholder proj-thumb"><span class="ph-frame">9:16</span></div>
+          <div><div class="proj-name">${esc(p.name)}</div><div class="proj-sub">${shots} 镜 · ${esc(durLabel)}</div></div>
+        </div>
+      </td>
+      <td>${esc(p.product)}</td>
+      <td><span class="muted">${esc(p.source)}</span></td>
+      <td>
+        <div class="hstack">
+          <div class="prog"><span class="cur"></span><span></span><span></span><span></span><span></span></div>
+          <span class="muted-2 mono" style="font-size:11px;">1/5</span>
+        </div>
+      </td>
+      <td><span class="pill info"><span class="dot"></span>${esc(pill)}</span></td>
+      <td class="muted-2">刚刚</td>
+      <td>
+        <div class="row-action">
+          <a href="${href}" onclick="event.stopPropagation()" title="继续"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor"/></svg></a>
+          <span class="row-more" onclick="event.stopPropagation()"><svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="13" cy="8" r="1.2" fill="currentColor"/></svg><div class="row-more-tip"><button class="mi mi-del-row" type="button" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>删除项目</button></div></span>
+        </div>
+      </td>
+    `;
+    tbody.insertBefore(tr, tbody.firstElementChild);
+
+    // Grid card
+    const card = document.createElement('div');
+    card.className = 'proj-card';
+    card.dataset.status = status;
+    card.dataset.name = p.name;
+    card.dataset.extraId = p.id;
+    card.setAttribute('onclick', `location.href='${href}'`);
+    card.innerHTML = `
+      <span class="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg></span>
+      <button class="card-del-btn" type="button" title="删除项目" onclick="event.stopPropagation();" data-action="delete-project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg></button>
+      <div class="placeholder card-thumb"><span class="ph-frame">9:16 · 刚刚</span></div>
+      <div class="card-body">
+        <div>
+          <div class="card-name">${esc(p.name)}</div>
+          <div class="card-sub" style="margin-top:4px;">${esc(p.product)} · ${shots} 镜</div>
+        </div>
+        <div class="hstack">
+          <div class="prog"><span class="cur"></span><span></span><span></span><span></span><span></span></div>
+          <span class="muted-2 mono" style="font-size:10.5px;">1/5</span>
+        </div>
+        <div class="card-foot">
+          <span class="pill info"><span class="dot"></span>${esc(pill)}</span>
+          <span class="card-time">刚刚</span>
+        </div>
+      </div>
+    `;
+    gridBody.insertBefore(card, gridBody.firstElementChild);
+  });
+})();
+
+// ============== 从 DOM 实算项目计数,同步副标题 + tab 角标 ==============
+const allRows = document.querySelectorAll('#list-tbody tr');
+const counts = { total: allRows.length, wip: 0, done: 0, fail: 0, archived: 0 };
+allRows.forEach(r => { const s = r.dataset.status; if (counts[s] !== undefined) counts[s]++; });
+
+document.getElementById('sub-total').textContent = counts.total;
+document.getElementById('sub-wip').textContent = counts.wip;
+document.getElementById('sub-done').textContent = counts.done;
+document.getElementById('sub-fail').textContent = counts.fail;
+
+document.querySelectorAll('#status-tabs .tab').forEach(t => {
+  const f = t.dataset.filter;
+  const n = f === 'all' ? counts.total : (counts[f] || 0);
+  t.querySelector('.count').textContent = n;
+});
+
+// ============== Multi-filter state ==============
+const state = { filter: 'all', view: 'list', search: '', product: 'all', source: 'all', time: 'all' };
+
+const CHIP_LABELS = { product: '商品品类', source: '脚本来源', time: '创建时间' };
+
+// 抖音爆款品类 · TOP 8
+const CATEGORIES = ['美妆个护', '服饰内衣', '食品饮料', '家居家电', '数码 3C', '个护清洁', '运动户外', '母婴亲子'];
+
+// 商品名 → 品类(关键字推断,demo 数据覆盖)
+function inferCategory(product) {
+  const p = product || '';
+  if (/面膜|防晒|精华|护肤|彩妆|口红|粉底/.test(p)) return '美妆个护';
+  if (/速食|冻干|咖啡|零食|饮料|酒|茶/.test(p)) return '食品饮料';
+  if (/耳机|手机|数码|充电|蓝牙|3C/.test(p)) return '数码 3C';
+  if (/瑜伽|健身|户外|露营|运动/.test(p)) return '运动户外';
+  if (/服装|内衣|裤|衣|鞋|包/.test(p)) return '服饰内衣';
+  if (/炸锅|家电|香薰|收纳|床|家居/.test(p)) return '家居家电';
+  if (/洗|牙膏|清洁/.test(p)) return '个护清洁';
+  if (/婴|童|奶粉|辅食|玩具/.test(p)) return '母婴亲子';
+  return '';
+}
+
+// 时间字符串 → 时间桶 (today / week / month / earlier)
+function parseTimeBucket(txt) {
+  if (!txt) return 'earlier';
+  if (txt.includes('分钟前') || txt.includes('小时前')) return 'today';
+  if (txt.includes('昨天')) return 'week';
+  // "5 月 7 日" 等当月日期 → month; 其他月份 → earlier
+  const m = txt.match(/(\d+)\s*月/);
+  if (m) {
+    const month = +m[1];
+    const now = new Date();
+    const curMonth = now.getMonth() + 1;
+    if (month === curMonth) return 'month';
+    if (month === curMonth - 1) return 'earlier';
+  }
+  return 'earlier';
+}
+const TIME_LABEL = { today: '今天', week: '本周', month: '本月', earlier: '更早' };
+
+// 给行/卡片打数据标签 (从已有的列文字推断)
+function tagItem(el, productCellText, sourceCellText, timeCellText) {
+  const product = (productCellText || '').trim();
+  el.dataset.product = product;
+  el.dataset.category = inferCategory(product);
+  el.dataset.source = (sourceCellText || '').trim();
+  el.dataset.time = parseTimeBucket(timeCellText || '');
+}
+
+// List view: 行内列顺序是 项目/商品/脚本来源/进度/状态/更新于
+document.querySelectorAll('#list-tbody tr').forEach(tr => {
+  const tds = tr.querySelectorAll('td');
+  if (tds.length < 6) return;
+  tagItem(tr, tds[1].innerText, tds[2].innerText, tds[5].innerText);
+});
+
+// Grid view: 从 card-sub (商品 · N 镜) 抽出商品名,从 card-time 抽时间,无脚本来源信息 → 沿用同名 list 项的 source
+const listMap = {};
+document.querySelectorAll('#list-tbody tr').forEach(tr => {
+  listMap[tr.dataset.name] = { source: tr.dataset.source, product: tr.dataset.product };
+});
+document.querySelectorAll('.proj-card').forEach(card => {
+  const sub = card.querySelector('.card-sub')?.innerText || '';
+  const product = sub.split('·')[0].trim();
+  const time = card.querySelector('.card-time')?.innerText || '';
+  const name = card.dataset.name;
+  const listed = listMap[name] || {};
+  card.dataset.product = listed.product || product;
+  card.dataset.category = inferCategory(card.dataset.product);
+  card.dataset.source = listed.source || '';
+  card.dataset.time = parseTimeBucket(time);
+});
+
+// 计算唯一值列表用于填充下拉
+function uniqueValues(key) {
+  const set = new Set();
+  document.querySelectorAll('#list-tbody tr').forEach(tr => {
+    const v = tr.dataset[key];
+    if (v) set.add(v);
+  });
+  return [...set];
+}
+
+// 填充菜单
+function buildMenu(key, options) {
+  const wrap = document.querySelector(`.chip-wrap[data-key="${key}"]`);
+  const menu = wrap.querySelector('.chip-menu');
+  const checkSvg = '<svg class="mi-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 8 7 12 13 4"/></svg>';
+  const all = `<div class="mi selected" data-value="all">${checkSvg}<span>全部${CHIP_LABELS[key]}</span></div><div class="mi-sep"></div>`;
+  const items = options.map(o => `<div class="mi" data-value="${o.value}">${checkSvg}<span>${o.label}</span></div>`).join('');
+  menu.innerHTML = all + items;
+}
+
+buildMenu('product', CATEGORIES.map(v => ({ value: v, label: v })));
+buildMenu('source', uniqueValues('source').filter(Boolean).map(v => ({ value: v, label: v })));
+buildMenu('time', [
+  { value: 'today', label: '今天' },
+  { value: 'week', label: '本周' },
+  { value: 'month', label: '本月' },
+  { value: 'earlier', label: '更早' },
+]);
+
+const TOTAL = document.querySelectorAll('#list-tbody tr').length;
+
+function applyFilter() {
+  const isList = state.view === 'list';
+  document.getElementById('list-view').style.display = isList ? '' : 'none';
+  document.getElementById('grid-view').style.display = isList ? 'none' : '';
+
+  const items = document.querySelectorAll(isList ? '#list-tbody tr' : '.proj-card');
+  let visible = 0;
+  items.forEach(el => {
+    const status = el.dataset.status || '';
+    const name = (el.dataset.name || '').toLowerCase();
+    const matchFilter = state.filter === 'all' || status.split(' ').includes(state.filter);
+    const matchSearch = !state.search
+      || name.includes(state.search.toLowerCase())
+      || (el.dataset.product || '').toLowerCase().includes(state.search.toLowerCase());
+    const matchProduct = state.product === 'all' || el.dataset.category === state.product;
+    const matchSource = state.source === 'all' || el.dataset.source === state.source;
+    const matchTime = state.time === 'all' || el.dataset.time === state.time;
+    const show = matchFilter && matchSearch && matchProduct && matchSource && matchTime;
+    el.style.display = show ? '' : 'none';
+    if (show) visible++;
+  });
+
+  const empty = document.getElementById('empty');
+  if (visible === 0) {
+    empty.classList.add('show');
+    document.getElementById('list-view').style.display = 'none';
+    document.getElementById('grid-view').style.display = 'none';
+  } else {
+    empty.classList.remove('show');
+  }
+
+  document.getElementById('result-meta').innerHTML = `// 显示 <span class="count">${visible}</span> / ${TOTAL} 个项目`;
+
+  // 是否有任意筛选生效 → 显示"清空筛选"
+  const hasFilter = state.filter !== 'all' || state.search || state.product !== 'all' || state.source !== 'all' || state.time !== 'all';
+  document.getElementById('clear-filters').hidden = !hasFilter;
+}
+
+// 清空所有筛选
+document.getElementById('clear-filters').addEventListener('click', () => {
+  state.filter = 'all'; state.search = ''; state.product = 'all'; state.source = 'all'; state.time = 'all';
+  // tab 回到"全部"
+  document.querySelectorAll('#status-tabs .tab').forEach(t => t.classList.toggle('active', t.dataset.filter === 'all'));
+  // 搜索框清空
+  document.getElementById('search-input').value = '';
+  // 三个 chip 同步
+  ['product', 'source', 'time'].forEach(syncChipUI);
+  applyFilter();
+  Shell.toast('已清空筛选');
+});
+
+// chip label + active 状态同步
+function syncChipUI(key) {
+  const wrap = document.querySelector(`.chip-wrap[data-key="${key}"]`);
+  const label = wrap.querySelector('.chip-label');
+  const chip = wrap.querySelector('.chip');
+  const v = state[key];
+  if (v === 'all') {
+    label.textContent = CHIP_LABELS[key];
+    chip.classList.remove('active');
+  } else {
+    label.textContent = key === 'time' ? TIME_LABEL[v] : v;
+    chip.classList.add('active');
+  }
+  wrap.querySelectorAll('.mi').forEach(mi => mi.classList.toggle('selected', mi.dataset.value === v));
+}
+
+// Chip wrap → 点击 chip 打开/关闭,点击菜单项设置 state
+document.querySelectorAll('.chip-wrap').forEach(wrap => {
+  const key = wrap.dataset.key;
+  wrap.querySelector('.chip').addEventListener('click', e => {
+    e.stopPropagation();
+    const isOpen = wrap.classList.contains('open');
+    document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+    if (!isOpen) wrap.classList.add('open');
+  });
+  wrap.querySelectorAll('.mi').forEach(mi => {
+    mi.addEventListener('click', e => {
+      e.stopPropagation();
+      state[key] = mi.dataset.value;
+      wrap.classList.remove('open');
+      syncChipUI(key);
+      applyFilter();
+    });
+  });
+});
+
+// 点击页面其他地方关闭打开的菜单
+document.addEventListener('click', () => {
+  document.querySelectorAll('.chip-wrap.open').forEach(w => w.classList.remove('open'));
+});
+
+// Tab clicks
+document.querySelectorAll('#status-tabs .tab').forEach(t => {
+  t.addEventListener('click', () => {
+    document.querySelectorAll('#status-tabs .tab').forEach(x => x.classList.remove('active'));
+    t.classList.add('active');
+    state.filter = t.dataset.filter;
+    applyFilter();
+  });
+});
+
+// View toggle
+document.querySelectorAll('.view-toggle button').forEach(b => {
+  b.addEventListener('click', () => {
+    document.querySelectorAll('.view-toggle button').forEach(x => x.classList.remove('active'));
+    b.classList.add('active');
+    state.view = b.dataset.view;
+    applyFilter();
+  });
+});
+
+// Search
+document.getElementById('search-input').addEventListener('input', e => {
+  state.search = e.target.value.trim();
+  applyFilter();
+});
+
+applyFilter();
+
+// ============================================================
+// 列表行 + 网格卡 删除按钮 + 管理项目 模式
+// ============================================================
+const PROJECT_NEVER_DELETE = []; // 未来可挂载"未完成不可删"逻辑
+function getProjectRefs(_card) { return []; } // 项目无引用检查 (PRD 没说项目反向)
+
+// 给所有 list 行末 td 注入 row-more (含删除气泡)
+const moreHTML = '<span class="row-more" onclick="event.stopPropagation()"><svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="13" cy="8" r="1.2" fill="currentColor"/></svg><div class="row-more-tip"><button class="mi mi-del-row" type="button" onclick="event.stopPropagation();"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>删除项目</button></div></span>';
+document.querySelectorAll('#list-tbody tr').forEach(tr => {
+  const lastTd = tr.querySelector('td:last-child');
+  if (!lastTd) return;
+  if (!lastTd.querySelector('.row-more')) {
+    // 已经有 row-action 的合并, 否则直接放
+    if (lastTd.querySelector('.row-action')) {
+      lastTd.querySelector('.row-action').insertAdjacentHTML('beforeend', moreHTML);
+    } else {
+      lastTd.innerHTML = lastTd.innerHTML + moreHTML;
+    }
+  }
+});
+
+// 删除确认 modal
+const delBg = document.getElementById('del-confirm-bg');
+const delBody = document.getElementById('del-confirm-body');
+const delCancel = document.getElementById('del-confirm-cancel');
+const delOk = document.getElementById('del-confirm-ok');
+let _delQueue = [];
+function openDelConfirm(targets) {
+  _delQueue = targets;
+  if (targets.length === 1) {
+    const name = targets[0].dataset.name || '该项目';
+    delBody.innerHTML = '即将删除项目 <span class="mono-acc">' + name + '</span>,已生成的视频和中间素材将清理,被引用的共享资产不受影响。';
+  } else {
+    delBody.innerHTML = '即将删除 <span class="mono-acc">' + targets.length + ' 个项目</span>,这些项目的视频和中间素材都将清理。';
+  }
+  delBg.classList.add('show');
+}
+function closeDelConfirm() { delBg.classList.remove('show'); _delQueue = []; }
+delCancel.addEventListener('click', closeDelConfirm);
+delBg.addEventListener('click', e => { if (e.target === delBg) closeDelConfirm(); });
+delOk.addEventListener('click', () => {
+  const n = _delQueue.length;
+
+  // 同步 localStorage (注入的项目带 data-extra-id) + 把同名的另一视图元素一起删
+  const KEY = 'fs-extra-projects';
+  let extraList = [];
+  try { extraList = JSON.parse(localStorage.getItem(KEY) || '[]'); } catch (e) {}
+  let extraDirty = false;
+  const toRemove = new Set();
+
+  _delQueue.forEach(el => {
+    toRemove.add(el);
+    // 配对: 同 data-name 的另一视图元素一起删
+    const name = el.dataset.name;
+    if (name) {
+      document.querySelectorAll(`[data-name="${CSS.escape(name)}"]`).forEach(other => {
+        if (other.matches('.proj-card, #list-tbody tr')) toRemove.add(other);
+      });
+    }
+    // 注入的项目 → 从 localStorage 移除
+    const eid = el.dataset.extraId;
+    if (eid) {
+      const idx = extraList.findIndex(p => p.id === eid);
+      if (idx >= 0) { extraList.splice(idx, 1); extraDirty = true; }
+    }
+  });
+
+  toRemove.forEach(el => el.remove());
+  if (extraDirty) {
+    try { localStorage.setItem(KEY, JSON.stringify(extraList)); } catch (e) {}
+  }
+
+  closeDelConfirm();
+  Shell.toast('已删除', n === 1 ? '项目已移除' : '已删除 ' + n + ' 个项目');
+  updateBulkBar();
+});
+
+// 网格卡 card-del-btn 绑定
+document.querySelectorAll('.proj-card .card-del-btn').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    const card = btn.closest('.proj-card');
+    if (card) openDelConfirm([card]);
+  });
+});
+// 列表行 row-more 删除项目按钮绑定
+document.querySelectorAll('.mi-del-row').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    const tr = btn.closest('tr');
+    if (tr) openDelConfirm([tr]);
+  });
+});
+
+// 管理项目模式
+const projManageBtn = document.getElementById('proj-manage-btn');
+const projManageLabel = projManageBtn.querySelector('.proj-manage-label');
+const bulkBar = document.getElementById('bulk-bar');
+const bulkCount = document.getElementById('bulk-count');
+const bulkClear = document.getElementById('bulk-clear');
+const bulkDel = document.getElementById('bulk-del');
+const bulkExit = document.getElementById('bulk-exit');
+
+function getSelectedProjects() {
+  return [
+    ...document.querySelectorAll('.proj-card.selected'),
+    ...document.querySelectorAll('#list-tbody tr.selected'),
+  ];
+}
+function updateBulkBar() {
+  const sel = getSelectedProjects();
+  bulkCount.textContent = sel.length;
+  bulkDel.disabled = sel.length === 0;
+  bulkDel.style.opacity = sel.length === 0 ? '.4' : '1';
+}
+function enterEditMode() {
+  document.body.classList.add('edit-mode');
+  projManageBtn.classList.add('active');
+  projManageLabel.textContent = '完成';
+  updateBulkBar();
+}
+function exitEditMode() {
+  document.body.classList.remove('edit-mode');
+  projManageBtn.classList.remove('active');
+  projManageLabel.textContent = '管理项目';
+  document.querySelectorAll('.proj-card.selected, #list-tbody tr.selected').forEach(c => c.classList.remove('selected'));
+}
+projManageBtn.addEventListener('click', () => {
+  if (document.body.classList.contains('edit-mode')) exitEditMode();
+  else enterEditMode();
+});
+bulkExit.addEventListener('click', exitEditMode);
+bulkClear.addEventListener('click', () => {
+  document.querySelectorAll('.proj-card.selected, #list-tbody tr.selected').forEach(c => c.classList.remove('selected'));
+  updateBulkBar();
+});
+bulkDel.addEventListener('click', () => {
+  const sel = getSelectedProjects();
+  if (sel.length) openDelConfirm(sel);
+});
+
+// 编辑模式下,卡片/列表行 点击切换 selected
+document.querySelectorAll('.proj-card').forEach(card => {
+  card.addEventListener('click', e => {
+    if (!document.body.classList.contains('edit-mode')) return;
+    e.stopImmediatePropagation(); e.preventDefault();
+    card.classList.toggle('selected');
+    updateBulkBar();
+  }, true);
+});
+document.querySelectorAll('#list-tbody tr').forEach(tr => {
+  tr.addEventListener('click', e => {
+    if (!document.body.classList.contains('edit-mode')) return;
+    e.stopImmediatePropagation(); e.preventDefault();
+    tr.classList.toggle('selected');
+    updateBulkBar();
+  }, true);
+});
+</script>
+
+<!-- ===== 删除确认 modal ===== -->
+<div class="modal-bg" id="del-confirm-bg">
+  <div class="modal" role="dialog">
+    <span class="corner-tr" aria-hidden></span>
+    <span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m" style="background:var(--crimson-bg,#fdebea);color:var(--accent-crimson,#c43d3d)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+      </div>
+      <div class="ti">确认删除项目<span>// CONFIRM DELETE</span></div>
+    </div>
+    <div class="modal-b" id="del-confirm-body">即将删除项目。</div>
+    <div class="modal-f">
+      <button class="btn" type="button" id="del-confirm-cancel">取消</button>
+      <button class="btn" type="button" id="del-confirm-ok" style="background:var(--accent-crimson);color:var(--accent-white);border-color:var(--accent-crimson)">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/></svg>
+        确认删除
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== bulk-bar ===== -->
+<div class="bulk-bar" id="bulk-bar">
+  <span class="ct">已选 <b id="bulk-count">0</b> 项</span>
+  <button class="clear-sel" type="button" id="bulk-clear">清空</button>
+  <span class="sep"></span>
+  <button class="danger" type="button" id="bulk-del">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6"/></svg>
+    删除所选
+  </button>
+  <button type="button" id="bulk-exit">完成</button>
+</div>
+</body>
+</html>
diff --git a/v2/settings.html b/v2/settings.html
new file mode 100644
index 0000000..ef34250
--- /dev/null
+++ b/v2/settings.html
@@ -0,0 +1,524 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>设置 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── 设置布局:左 nav + 右 panel ─── */
+  .settings-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
+
+  .settings-nav { position: sticky; top: 16px; }
+  .settings-nav .nav-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; padding: 0 12px 8px; }
+  .settings-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; color: var(--accent-black); border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--t-base), border-color var(--t-base); }
+  .settings-nav a:hover { background: var(--background-lighter); }
+  .settings-nav a.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
+  .settings-nav a svg { width: 16px; height: 16px; stroke-width: 1.5; }
+
+  /* ─── pane ─── */
+  .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 24px; margin-bottom: 16px; }
+  .pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+  .pane .pane-desc { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; margin-bottom: 18px; }
+  .pane.danger { border-color: rgba(180,30,30,.25); background: rgba(180,30,30,.03); }
+  .pane.danger h3 { color: var(--accent-crimson); }
+
+  /* ─── form row ─── */
+  .form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-faint); align-items: center; }
+  .form-row:last-child { border-bottom: 0; }
+  .form-row .lbl { font-size: 12.5px; color: var(--black-alpha-56); }
+  .form-row .lbl .req { color: var(--accent-crimson); margin-left: 2px; }
+  .form-row .lbl-sub { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
+  .form-row .val { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  .form-row .val .input, .form-row .val .select { width: 100%; max-width: 380px; }
+  .form-row .val .static { font-size: 13px; color: var(--accent-black); font-variant-numeric: tabular-nums; }
+  .form-row .val .static.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--black-alpha-56); }
+  .form-row .val .role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; background: var(--heat-12); color: var(--heat); }
+  .form-row .val .role-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--heat); }
+
+  /* ─── 头像上传 ─── */
+  .avatar-edit { display: flex; align-items: center; gap: 16px; }
+  .avatar-edit .av-big { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 24px; font-weight: 600; color: var(--accent-black); }
+  .avatar-edit .av-actions { display: flex; gap: 8px; }
+
+  /* ─── toggle switch ─── */
+  .switch { position: relative; width: 36px; height: 20px; flex: 0 0 36px; }
+  .switch input { opacity: 0; width: 0; height: 0; }
+  .switch .slider { position: absolute; inset: 0; background: var(--black-alpha-24); border-radius: 20px; cursor: pointer; transition: background var(--t-base); }
+  .switch .slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: var(--accent-white); border-radius: 50%; transition: transform var(--t-base); }
+  .switch input:checked + .slider { background: var(--heat); }
+  .switch input:checked + .slider::before { transform: translateX(16px); }
+
+  /* ─── 偏好选项卡 ─── */
+  .pref-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-width: 540px; }
+  .pref-choice { padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-base); }
+  .pref-choice:hover { background: var(--background-lighter); }
+  .pref-choice.selected { border-color: var(--heat); background: var(--heat-12); }
+  .pref-choice .t { font-size: 12.5px; font-weight: 600; color: var(--accent-black); }
+  .pref-choice .d { font-size: 11px; color: var(--black-alpha-48); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .pref-choice.selected .t { color: var(--heat); }
+
+  /* ─── 时长档 ─── */
+  .duration-row { display: flex; gap: 8px; }
+  .dur-chip { padding: 6px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-md); font-size: 13px; cursor: pointer; font-family: var(--font-mono); font-variant-numeric: tabular-nums; transition: all var(--t-base); background: var(--surface); }
+  .dur-chip:hover { background: var(--background-lighter); }
+  .dur-chip.selected { border-color: var(--heat); background: var(--heat-12); color: var(--heat); font-weight: 600; }
+
+  /* ─── 设备列表 ─── */
+  .device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); }
+  .device-row:last-child { border-bottom: 0; }
+  .device-row .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--background-lighter); display: grid; place-items: center; color: var(--black-alpha-56); }
+  .device-row .ic svg { width: 18px; height: 18px; }
+  .device-row .nm { font-size: 13px; font-weight: 500; }
+  .device-row .meta { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
+  .device-row .tag-cur { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; background: var(--accent-forest); color: var(--accent-white); border-radius: var(--r-sm); margin-left: 8px; letter-spacing: .04em; font-weight: 600; }
+  .device-row .spacer { margin-left: auto; }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>设置</h1>
+    <div class="sub"><span class="mono">// 个人信息 · 偏好 · 通知 · 安全</span></div>
+  </div>
+  <div class="actions">
+    <button class="btn" id="save-cancel" disabled style="opacity:.5; cursor:not-allowed;">取消</button>
+    <button class="btn btn-primary" id="save-btn" disabled style="opacity:.5; cursor:not-allowed;">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+      保存所有变更
+    </button>
+  </div>
+</div>
+
+<div class="settings-grid">
+  <!-- 左侧 nav -->
+  <aside class="settings-nav">
+    <div class="nav-h">个人</div>
+    <a href="#sec-profile" class="active" data-jump="sec-profile">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>
+      个人信息
+    </a>
+    <a href="#sec-security" data-jump="sec-security">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+      安全
+    </a>
+    <a href="#sec-notify" data-jump="sec-notify">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
+      通知
+    </a>
+    <div class="nav-h" style="margin-top: 16px;">偏好</div>
+    <a href="#sec-pref" data-jump="sec-pref">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4"/></svg>
+      创作默认
+    </a>
+    <a href="#sec-display" data-jump="sec-display">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 10h20"/></svg>
+      显示
+    </a>
+    <div class="nav-h" style="margin-top: 16px;">账号</div>
+    <a href="#sec-danger" data-jump="sec-danger" style="color: var(--accent-crimson);">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
+      危险操作
+    </a>
+  </aside>
+
+  <!-- 右侧内容 -->
+  <main>
+    <!-- ─── 个人信息 ─── -->
+    <section class="pane" id="sec-profile">
+      <h3>个人信息</h3>
+      <div class="pane-desc">// 头像、姓名、联系方式 · 邮箱用于接收通知</div>
+
+      <div class="form-row">
+        <div class="lbl">头像</div>
+        <div class="val">
+          <div class="avatar-edit">
+            <div class="av-big">李</div>
+            <div class="av-actions">
+              <button class="btn btn-sm" onclick="Shell.toast('上传头像', '占位 · 选择本地图片')">上传新头像</button>
+              <button class="btn btn-ghost btn-sm" onclick="Shell.toast('恢复默认头像', '已重置')">恢复默认</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">显示名称<span class="req">*</span></div>
+        <div class="val"><input class="input" id="prof-name" value="小李" data-track></div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">登录邮箱</div>
+        <div class="val">
+          <input class="input" id="prof-email" value="li@shop.com" data-track>
+          <button class="btn btn-ghost btn-sm" onclick="Shell.toast('已发送验证邮件', 'li@shop.com')">验证</button>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">手机号</div>
+        <div class="val">
+          <input class="input" id="prof-phone" value="138****8000" data-track>
+          <button class="btn btn-ghost btn-sm" onclick="Shell.toast('已发送短信验证码', '+86 138****8000')">更换</button>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">所属团队<div class="lbl-sub">// 一人一团队</div></div>
+        <div class="val">
+          <span class="static">小李的店</span>
+          <span class="role-tag"><span class="dot"></span>超管 · 创建者</span>
+          <a href="team.html" style="font-size: 12px; color: var(--heat); text-decoration: none; margin-left: auto;">管理团队 →</a>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">用户 ID<div class="lbl-sub">// 不可改</div></div>
+        <div class="val"><span class="static mono">USR-2026-A8F2-001</span></div>
+      </div>
+    </section>
+
+    <!-- ─── 安全 ─── -->
+    <section class="pane" id="sec-security">
+      <h3>安全</h3>
+      <div class="pane-desc">// 登录密码、双因素、在用设备</div>
+
+      <div class="form-row">
+        <div class="lbl">登录密码</div>
+        <div class="val">
+          <span class="static mono">●●●●●●●●●●</span>
+          <span class="muted-2 mono" style="font-size: 11px; margin-left: auto;">上次修改 2026-04-12</span>
+          <button class="btn btn-sm" onclick="Shell.toast('修改密码', '/settings/password')" style="margin-left: 10px;">修改</button>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">两步验证<div class="lbl-sub">// 推荐开启</div></div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="opt-2fa"><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">短信 + Authenticator</span>
+        </div>
+      </div>
+
+      <h3 style="margin-top: 24px;">在用设备</h3>
+      <div class="pane-desc">// 不在此列表上的设备登录会触发短信告警</div>
+      <div>
+        <div class="device-row">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M2 20h20"/></svg></div>
+          <div>
+            <div class="nm">MacBook Pro · Chrome<span class="tag-cur">CURRENT</span></div>
+            <div class="meta">// 上海 · 2026-05-21 14:08 · IP 116.xxx.xxx.42</div>
+          </div>
+          <div class="spacer"></div>
+          <span class="muted-2 mono" style="font-size: 11px;">当前会话</span>
+        </div>
+        <div class="device-row">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg></div>
+          <div>
+            <div class="nm">iPhone 15 · Safari</div>
+            <div class="meta">// 上海 · 2026-05-20 21:43</div>
+          </div>
+          <div class="spacer"></div>
+          <button class="btn btn-ghost btn-sm" onclick="Shell.toast('已下线', 'iPhone 15')">下线</button>
+        </div>
+        <div class="device-row">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M2 20h20"/></svg></div>
+          <div>
+            <div class="nm">Windows · Edge</div>
+            <div class="meta">// 杭州 · 2026-05-18 09:12</div>
+          </div>
+          <div class="spacer"></div>
+          <button class="btn btn-ghost btn-sm" onclick="Shell.toast('已下线', 'Windows Edge')">下线</button>
+        </div>
+      </div>
+      <div style="margin-top: 14px;">
+        <button class="btn" onclick="if(confirm('下线所有其他设备?')) Shell.toast('已下线其他设备', '2 个')">下线所有其他设备</button>
+      </div>
+    </section>
+
+    <!-- ─── 通知 ─── -->
+    <section class="pane" id="sec-notify">
+      <h3>通知</h3>
+      <div class="pane-desc">// 邮件、短信、站内提示开关</div>
+
+      <div class="form-row">
+        <div class="lbl">项目完成通知<div class="lbl-sub">// 视频导出后</div></div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="n-export" checked><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">站内 · 邮件 · 短信</span>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">任务失败告警</div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="n-fail" checked><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">站内 · 邮件</span>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">额度不足提醒<div class="lbl-sub">// 团队或个人剩余 < 20%</div></div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="n-quota" checked><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">站内 · 短信</span>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">异地登录告警</div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="n-login" checked><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">短信</span>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">营销 / 产品更新</div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="n-marketing"><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">邮件</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ─── 创作默认 ─── -->
+    <section class="pane" id="sec-pref">
+      <h3>创作默认</h3>
+      <div class="pane-desc">// 新建项目时的预填值,可在向导中改</div>
+
+      <div class="form-row" style="grid-template-columns: 160px 1fr; align-items: flex-start;">
+        <div class="lbl" style="padding-top: 4px;">默认模板</div>
+        <div class="val" style="display: block;">
+          <div class="pref-choices" id="pref-template">
+            <div class="pref-choice selected" data-v="pain"><div class="t">痛点种草</div><div class="d">// 30s 默认档</div></div>
+            <div class="pref-choice" data-v="unbox"><div class="t">开箱测评</div><div class="d">// 45s 默认档</div></div>
+            <div class="pref-choice" data-v="compare"><div class="t">对比展示</div><div class="d">// 45s 默认档</div></div>
+            <div class="pref-choice" data-v="howto"><div class="t">教程演示</div><div class="d">// 60s 默认档</div></div>
+            <div class="pref-choice" data-v="drama"><div class="t">剧情带货</div><div class="d">// 60s 默认档</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">默认时长档</div>
+        <div class="val">
+          <div class="duration-row" id="pref-duration">
+            <span class="dur-chip" data-v="30">30s</span>
+            <span class="dur-chip" data-v="45">45s</span>
+            <span class="dur-chip selected" data-v="60">60s</span>
+          </div>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48); margin-left: 10px;">// 60s = 4 段 × 15s</span>
+        </div>
+      </div>
+      <div class="form-row" style="grid-template-columns: 160px 1fr; align-items: flex-start;">
+        <div class="lbl" style="padding-top: 4px;">默认字幕样式</div>
+        <div class="val" style="display: block;">
+          <div class="pref-choices" id="pref-subtitle">
+            <div class="pref-choice selected" data-v="big-variety"><div class="t">大字综艺</div><div class="d">// 抖音热门</div></div>
+            <div class="pref-choice" data-v="clean-ec"><div class="t">简洁电商</div><div class="d">// 信息清晰</div></div>
+            <div class="pref-choice" data-v="premium"><div class="t">高级排版</div><div class="d">// 居中衬线</div></div>
+            <div class="pref-choice" data-v="bullet"><div class="t">弹幕轻量</div><div class="d">// 滚动出现</div></div>
+            <div class="pref-choice" data-v="emphasis"><div class="t">强调爆款</div><div class="d">// 高对比</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">默认 BGM 库</div>
+        <div class="val">
+          <select class="select" id="pref-bgm" data-track>
+            <option value="kapian">抖音 Top10 卡点曲库</option>
+            <option value="emotion">情绪向 · 治愈/悬念</option>
+            <option value="urban">都市电子 · 通勤场景</option>
+            <option value="none">无 BGM</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">默认转场</div>
+        <div class="val">
+          <select class="select" id="pref-transition" data-track>
+            <option>无转场</option>
+            <option selected>淡入淡出 · 0.3s</option>
+            <option>滑动 · 0.3s</option>
+            <option>缩放 · 0.3s</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">导出水印<div class="lbl-sub">// VIP 可关闭</div></div>
+        <div class="val">
+          <label class="switch"><input type="checkbox" id="opt-watermark" checked disabled><span class="slider"></span></label>
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-48);">右下角 · 流·Studio</span>
+          <a href="account.html" style="font-size: 12px; color: var(--heat); text-decoration: none; margin-left: auto;">升级 VIP →</a>
+        </div>
+      </div>
+    </section>
+
+    <!-- ─── 显示 ─── -->
+    <section class="pane" id="sec-display">
+      <h3>显示</h3>
+      <div class="pane-desc">// 界面外观与语言</div>
+
+      <div class="form-row">
+        <div class="lbl">外观</div>
+        <div class="val">
+          <select class="select" id="pref-theme" data-track>
+            <option selected>跟随系统</option>
+            <option>浅色</option>
+            <option disabled>深色(V2)</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">语言</div>
+        <div class="val">
+          <select class="select" id="pref-lang" data-track>
+            <option selected>简体中文</option>
+            <option disabled>English(V2)</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">表格密度</div>
+        <div class="val">
+          <select class="select" id="pref-density" data-track>
+            <option>紧凑</option>
+            <option selected>标准</option>
+            <option>宽松</option>
+          </select>
+        </div>
+      </div>
+    </section>
+
+    <!-- ─── 危险操作 ─── -->
+    <section class="pane danger" id="sec-danger">
+      <h3>危险操作</h3>
+      <div class="pane-desc">// 这些操作不可撤销,请确认后再执行</div>
+
+      <div class="form-row">
+        <div class="lbl">导出我的数据<div class="lbl-sub">// 项目 + 资产元数据</div></div>
+        <div class="val">
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-56);">// 准备时间约 24 小时,完成后邮件通知</span>
+          <button class="btn btn-sm" style="margin-left: auto;" onclick="Shell.toast('已申请导出', '约 24 小时后邮件发送')">申请导出</button>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">退出登录</div>
+        <div class="val">
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-56);">// 仅退出当前设备,数据保留</span>
+          <button class="btn btn-sm" style="margin-left: auto; color: var(--accent-crimson); border-color: var(--accent-crimson);" onclick="if(confirm('确定退出登录?')) Shell.toast('已退出', '正在跳转登录页')">退出登录</button>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="lbl">注销账号</div>
+        <div class="val">
+          <span class="static mono" style="font-size: 11.5px; color: var(--black-alpha-56);">// 团队余额清零、所有项目作为孤儿归档</span>
+          <button class="btn btn-sm" style="margin-left: auto; color: var(--accent-crimson); border-color: var(--accent-crimson);" onclick="if(confirm('彻底注销当前账号? 此操作不可恢复')) Shell.toast('已提交注销申请', '24 小时内人工复核')">注销账号</button>
+        </div>
+      </div>
+    </section>
+
+    <div style="text-align: center; padding: 24px 0 8px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;">
+      // 流·Studio · v2.1 · build 20260521
+    </div>
+  </main>
+</div>
+
+</div>
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'settings',
+  crumbs: [{ label: '工作台', href: 'index.html' }, { label: '设置' }]
+});
+
+/* ─── 侧边 nav 高亮 + 滚动联动 ─── */
+const sections = ['sec-profile', 'sec-security', 'sec-notify', 'sec-pref', 'sec-display', 'sec-danger'];
+const navLinks = document.querySelectorAll('.settings-nav a[data-jump]');
+
+navLinks.forEach(a => {
+  a.addEventListener('click', e => {
+    e.preventDefault();
+    const id = a.dataset.jump;
+    const el = document.getElementById(id);
+    if (el) {
+      const contentEl = document.getElementById('page-content') || document.querySelector('.content');
+      const offset = 16;
+      if (contentEl) {
+        contentEl.scrollTo({ top: el.offsetTop - contentEl.offsetTop - offset, behavior: 'smooth' });
+      } else {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  });
+});
+
+const contentEl = document.getElementById('page-content') || document.querySelector('.content');
+const observer = new IntersectionObserver(entries => {
+  entries.forEach(en => {
+    if (en.isIntersecting) {
+      const id = en.target.id;
+      navLinks.forEach(a => a.classList.toggle('active', a.dataset.jump === id));
+    }
+  });
+}, { root: contentEl || null, rootMargin: '-20% 0px -60% 0px', threshold: 0 });
+sections.forEach(id => {
+  const el = document.getElementById(id);
+  if (el) observer.observe(el);
+});
+
+/* ─── 偏好 chip 选择 ─── */
+function bindChoice(containerId, label) {
+  const ct = document.getElementById(containerId);
+  if (!ct) return;
+  ct.querySelectorAll('.pref-choice').forEach(c => {
+    c.addEventListener('click', () => {
+      ct.querySelectorAll('.pref-choice').forEach(x => x.classList.remove('selected'));
+      c.classList.add('selected');
+      markDirty();
+    });
+  });
+}
+bindChoice('pref-template');
+bindChoice('pref-subtitle');
+
+document.querySelectorAll('#pref-duration .dur-chip').forEach(c => {
+  c.addEventListener('click', () => {
+    document.querySelectorAll('#pref-duration .dur-chip').forEach(x => x.classList.remove('selected'));
+    c.classList.add('selected');
+    markDirty();
+  });
+});
+
+/* ─── dirty state ─── */
+let dirty = false;
+function markDirty() {
+  if (dirty) return;
+  dirty = true;
+  const saveBtn = document.getElementById('save-btn');
+  const cancelBtn = document.getElementById('save-cancel');
+  [saveBtn, cancelBtn].forEach(b => {
+    b.disabled = false;
+    b.style.opacity = '';
+    b.style.cursor = '';
+  });
+}
+function clearDirty() {
+  dirty = false;
+  const saveBtn = document.getElementById('save-btn');
+  const cancelBtn = document.getElementById('save-cancel');
+  [saveBtn, cancelBtn].forEach(b => {
+    b.disabled = true;
+    b.style.opacity = '.5';
+    b.style.cursor = 'not-allowed';
+  });
+}
+document.querySelectorAll('[data-track], input[type="checkbox"], select').forEach(el => {
+  el.addEventListener('change', markDirty);
+  if (el.tagName === 'INPUT' && el.type !== 'checkbox') el.addEventListener('input', markDirty);
+});
+
+document.getElementById('save-btn').addEventListener('click', () => {
+  if (!dirty) return;
+  Shell.toast('设置已保存', '所有变更已生效');
+  clearDirty();
+});
+document.getElementById('save-cancel').addEventListener('click', () => {
+  if (!dirty) return;
+  if (confirm('放弃未保存的变更?')) location.reload();
+});
+</script>
+</body>
+</html>
diff --git a/v2/studio-v2.html b/v2/studio-v2.html
new file mode 100644
index 0000000..307a242
--- /dev/null
+++ b/v2/studio-v2.html
@@ -0,0 +1,1402 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>商品工作台 V2 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  .content { max-width: none !important; padding: 0 !important; }
+  .content > .corner-mark { display: none; }
+
+  /* ─── Layout ─── */
+  .ws {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    height: calc(100vh - 57px);
+    overflow: hidden;
+    background: var(--background-base);
+  }
+
+  /* ════════════ 左侧:商品列表 ════════════ */
+  .ws-list { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border-faint); overflow: hidden; }
+  .ws-list-h { padding: 16px 14px 12px; border-bottom: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
+  .ws-list-h .title { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
+  .ws-list-h .title .count { color: var(--heat); font-weight: 600; }
+  .ws-new-btn {
+    width: 100%; height: 36px;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    background: var(--heat); color: #fff; border: 0; border-radius: var(--r-md);
+    font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
+    box-shadow: inset 0 -3px 6px rgba(250,93,25,.20), 0 1px 2px rgba(250,93,25,.12), 0 2px 4px rgba(250,93,25,.10);
+  }
+  .ws-new-btn:hover { box-shadow: inset 0 -3px 6px rgba(250,93,25,.20), 0 2px 4px rgba(250,93,25,.16), 0 4px 8px rgba(250,93,25,.20); }
+  .ws-new-btn svg { width: 14px; height: 14px; }
+  .ws-search { position: relative; }
+  .ws-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--black-alpha-48); z-index: 2; pointer-events: none; }
+  .ws-search input {
+    width: 100%; height: 34px; padding: 0 12px 0 34px;
+    background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    font-size: 13px; font-family: inherit; color: var(--accent-black);
+  }
+  .ws-search input:focus { outline: none; border-color: var(--heat-40); background: var(--surface); }
+
+  .ws-chip-row { display: flex; gap: 6px; padding: 8px 14px 4px; flex-shrink: 0; flex-wrap: wrap; }
+  .ws-chip {
+    display: inline-flex; align-items: center; gap: 5px;
+    height: 24px; padding: 0 9px;
+    border: 1px solid var(--border-faint); border-radius: 999px;
+    background: var(--surface); color: var(--black-alpha-56);
+    font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit;
+  }
+  .ws-chip:hover { color: var(--accent-black); border-color: var(--black-alpha-24); }
+  .ws-chip.on { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); }
+  .ws-chip .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
+
+  .ws-list-body { flex: 1; overflow-y: auto; padding: 4px 8px 14px; }
+
+  .ws-prod {
+    display: grid; grid-template-columns: 40px 1fr auto;
+    align-items: center; gap: 10px; padding: 9px 10px;
+    border-radius: var(--r-md); cursor: pointer; margin-bottom: 2px;
+    position: relative; transition: background var(--t-base);
+  }
+  .ws-prod:hover { background: var(--black-alpha-4); }
+  .ws-prod.active { background: var(--heat-12); }
+  .ws-prod.active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--heat); }
+  .ws-prod-thumb { width: 40px; height: 40px; border-radius: var(--r-md); background-size: cover; background-position: center; background-color: var(--background-lighter); flex-shrink: 0; }
+  .ws-prod-info { min-width: 0; }
+  .ws-prod-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ws-prod.active .ws-prod-name { color: var(--heat); font-weight: 600; }
+  .ws-prod-meta { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ws-prod-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
+  .ws-prod-count { font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; height: 15px; display: inline-flex; align-items: center; background: var(--background-lighter); color: var(--black-alpha-56); border: 1px solid var(--border-faint); border-radius: 999px; letter-spacing: .04em; }
+  .ws-prod.active .ws-prod-count { background: var(--surface); color: var(--heat); border-color: var(--heat-20); }
+  .ws-prod-task { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; }
+  .ws-prod-task .dot-mini { width: 5px; height: 5px; border-radius: 999px; flex-shrink: 0; }
+  .ws-prod-task.running .dot-mini { background: var(--heat); animation: blink 1.4s ease-in-out infinite; }
+  .ws-prod-task.running { color: var(--heat); }
+  .ws-prod-task.done .dot-mini { background: var(--accent-forest); }
+  .ws-prod-task.done { color: var(--accent-forest); }
+  .ws-prod-task.failed .dot-mini { background: var(--accent-crimson); }
+  .ws-prod-task.failed { color: var(--accent-crimson); }
+  @keyframes blink { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:.5; transform: scale(.7); } }
+
+  .ws-prod.draft .ws-prod-thumb { background: var(--heat-8); color: var(--heat); display: grid; place-items: center; border: 1px dashed var(--heat-40); }
+  .ws-prod.draft .ws-prod-thumb svg { width: 16px; height: 16px; }
+  .ws-prod.draft .ws-prod-meta { color: var(--heat); }
+  .ws-list-foot { padding: 9px 14px; border-top: 1px solid var(--border-faint); flex-shrink: 0; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .ws-list-foot .accent { color: var(--heat); font-weight: 600; }
+  .ws-list-foot svg { width: 12px; height: 12px; }
+
+  /* ════════════ 右侧:工作区 ════════════ */
+  .ws-main { overflow-y: auto; display: flex; flex-direction: column; }
+
+  /* 顶部 sticky 行动条 —— 整合商品身份卡 + 工具入口 + 主 CTA */
+  .action-bar {
+    position: sticky; top: 0; z-index: 10;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border-faint);
+    padding: 14px 36px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 24px;
+  }
+  .action-bar .prod-id {
+    display: flex; align-items: center; gap: 12px;
+    min-width: 0;
+  }
+  .action-bar .prod-thumb {
+    width: 48px; height: 48px;
+    border-radius: var(--r-md);
+    background-size: cover; background-position: center;
+    background-color: var(--background-lighter);
+    flex-shrink: 0;
+    border: 1px solid var(--border-faint);
+  }
+  .action-bar .prod-thumb.draft { background: var(--heat-8); display: grid; place-items: center; color: var(--heat); border: 1px dashed var(--heat-40); }
+  .action-bar .prod-thumb.draft svg { width: 18px; height: 18px; }
+  .action-bar .prod-text { min-width: 0; }
+  .action-bar .prod-text .nm { font-size: 16px; font-weight: 600; color: var(--accent-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
+  .action-bar .prod-text .meta {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .04em;
+    margin-top: 4px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .action-bar .prod-text .meta .accent { color: var(--heat); font-weight: 600; }
+
+  /* 工具按钮组 —— 顶部 sticky,横排 */
+  .tools-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
+  .tool-btn {
+    display: flex; align-items: center; gap: 9px;
+    height: 44px; padding: 0 16px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    cursor: pointer; font-family: inherit;
+    position: relative;
+    transition: all var(--t-base);
+  }
+  .tool-btn:hover { border-color: var(--heat-40); background: var(--heat-4); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.04); }
+  .tool-btn.featured {
+    border-color: var(--heat); background: var(--heat-8);
+    box-shadow: inset 0 -2px 4px rgba(250,93,25,.10), 0 1px 2px rgba(250,93,25,.08);
+  }
+  .tool-btn.featured::after {
+    content: '推荐'; position: absolute; top: -7px; right: 8px;
+    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
+    color: #fff; background: var(--heat);
+    padding: 2px 6px; border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .tool-btn .ic { width: 22px; height: 22px; color: var(--heat); flex-shrink: 0; display: grid; place-items: center; }
+  .tool-btn .ic svg { width: 18px; height: 18px; }
+  .tool-btn .lbl { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
+  .tool-btn .lbl .t { font-size: 13px; font-weight: 600; color: var(--accent-black); line-height: 1.1; }
+  .tool-btn .lbl .d { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .02em; line-height: 1.1; }
+  .tool-btn.coming-soon { opacity: .55; cursor: default; }
+  .tool-btn.coming-soon:hover { transform: none; box-shadow: none; border-color: var(--border-faint); background: var(--surface); }
+  .tool-btn.coming-soon .ic { color: var(--black-alpha-48); }
+
+  .tools-row.locked .tool-btn:not(.coming-soon) {
+    opacity: .45; pointer-events: none; filter: grayscale(.4);
+  }
+  .tools-row.locked .tool-btn::before {
+    content: '🔒';
+    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    font-size: 14px; opacity: 0; pointer-events: none;
+  }
+
+  .action-bar .right-cta { display: flex; gap: 8px; flex-shrink: 0; }
+
+  /* 工具锁定提示横条 */
+  .lock-row {
+    background: var(--heat-8); border-bottom: 1px solid var(--heat-20);
+    padding: 10px 36px;
+    display: flex; align-items: center; gap: 10px;
+    font-size: 12.5px; color: var(--accent-black);
+  }
+  .lock-row .ic { width: 26px; height: 26px; background: var(--heat); color: #fff; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
+  .lock-row .ic svg { width: 14px; height: 14px; }
+  .lock-row strong { color: var(--heat); font-weight: 600; }
+  .lock-row .miss { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
+
+  /* 主内容区 */
+  .ws-main-body { padding: 24px 36px 60px; flex: 1; }
+
+  /* Onboarding(简化版) */
+  .onboard-tip {
+    background: var(--surface); border: 1px solid var(--heat-40);
+    border-radius: var(--r-md); padding: 12px 16px;
+    margin-bottom: 18px;
+    display: flex; align-items: center; gap: 12px;
+    animation: slideIn .4s ease;
+  }
+  @keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
+  .onboard-tip .ic { width: 28px; height: 28px; background: var(--heat); color: #fff; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
+  .onboard-tip .ic svg { width: 14px; height: 14px; }
+  .onboard-tip .body { flex: 1; }
+  .onboard-tip .t { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  .onboard-tip .d { font-size: 11.5px; color: var(--black-alpha-72); margin-top: 2px; }
+  .onboard-tip .d strong { color: var(--heat); font-weight: 600; }
+  .onboard-tip .dismiss { background: transparent; border: 0; color: var(--black-alpha-56); font-size: 11.5px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-md); }
+  .onboard-tip .dismiss:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+
+  /* ───── 商品概览卡(信息 + 原图)───── */
+  .overview-card {
+    background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    padding: 20px 22px; margin-bottom: 22px;
+    display: grid; grid-template-columns: 1fr 320px; gap: 28px;
+    transition: border-color var(--t-base);
+  }
+  .overview-card.editing { border-color: var(--heat-40); background: linear-gradient(180deg, var(--heat-4) 0%, var(--surface) 50px); }
+  .ov-display .ov-info-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
+  .ov-display .ic { width: 32px; height: 32px; background: var(--heat-12); color: var(--heat); border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
+  .ov-display .ic svg { width: 16px; height: 16px; }
+  .ov-display .name { font-size: 14.5px; font-weight: 600; color: var(--accent-black); line-height: 1.3; }
+  .ov-display .meta { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; margin-top: 4px; }
+  .ov-display .edit {
+    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
+    height: 28px; padding: 0 11px;
+    background: transparent; border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    color: var(--black-alpha-56); font-size: 11.5px; cursor: pointer; font-family: inherit;
+  }
+  .ov-display .edit:hover { color: var(--heat); border-color: var(--heat-40); background: var(--heat-8); }
+  .ov-display .edit svg { width: 11px; height: 11px; }
+  .ov-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
+  .ov-tags .t { font-size: 11px; padding: 2px 9px; background: var(--background-lighter); color: var(--black-alpha-56); border: 1px solid var(--border-faint); border-radius: var(--r-sm); }
+  .ov-sell { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-faint); font-size: 12px; color: var(--black-alpha-72); line-height: 1.65; }
+  .ov-sell .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; margin-right: 6px; }
+
+  .ov-photos { border-left: 1px dashed var(--border-faint); padding-left: 26px; }
+  .ov-photos-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
+  .ov-photos-h .t { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
+  .ov-photos-h .n { color: var(--heat); font-weight: 600; }
+  .ov-photos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
+  .overview-card.editing .ov-photos-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
+  .ov-photo { aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid var(--border-faint); background-color: var(--background-lighter); background-size: cover; background-position: center; position: relative; cursor: pointer; transition: all var(--t-base); }
+  .ov-photo:hover { border-color: var(--heat-40); transform: scale(1.04); z-index: 1; }
+  .ov-photo .pmain { position: absolute; top: 3px; left: 3px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; padding: 1px 4px; background: var(--heat); color: #fff; border-radius: 3px; letter-spacing: .04em; }
+  .ov-photo.add { border-style: dashed; display: grid; place-items: center; color: var(--black-alpha-32); }
+  .ov-photo.add:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-8); }
+  .ov-photo.add svg { width: 14px; height: 14px; }
+  .overview-card.editing .ov-photo.empty-slot { border-radius: var(--r-md); border-style: dashed; cursor: pointer; display: grid; place-items: center; color: var(--black-alpha-32); font-size: 10px; font-family: var(--font-mono); }
+  .overview-card.editing .ov-photo.empty-slot.add-active { border-color: var(--heat-40); color: var(--heat); }
+  .overview-card.editing .ov-photo.empty-slot:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-8); }
+  .overview-card.editing .ov-photo .photo-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 999px; background: rgba(21,20,15,.72); color: #fff; border: 0; cursor: pointer; display: none; place-items: center; }
+  .overview-card.editing .ov-photo:hover .photo-x { display: grid; }
+  .overview-card.editing .ov-photo:hover .pmain { display: none; }
+  .overview-card.editing .ov-photo .photo-x:hover { background: var(--accent-crimson); }
+  .overview-card.editing .ov-photo .photo-x svg { width: 10px; height: 10px; }
+
+  .ov-edit { display: none; }
+  .overview-card.editing .ov-display { display: none; }
+  .overview-card.editing .ov-edit { display: block; }
+  .ov-edit .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
+  .ov-edit .field-label { font-size: 12px; font-weight: 500; color: var(--black-alpha-72); display: flex; align-items: center; gap: 6px; }
+  .ov-edit .field-label .req { color: var(--accent-crimson); }
+  .ov-edit .field-label .opt { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; background: var(--background-lighter); color: var(--black-alpha-48); border-radius: var(--r-sm); letter-spacing: .04em; }
+  .ov-edit .input, .ov-edit .select { height: 32px; font-size: 13px; }
+  .ov-edit .ai-hint { margin-top: 4px; padding: 7px 10px; background: var(--heat-8); border: 1px dashed var(--heat-40); border-radius: var(--r-md); font-size: 11px; color: var(--black-alpha-72); line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; }
+  .ov-edit .ai-hint svg { width: 10px; height: 10px; color: var(--heat); flex-shrink: 0; margin-top: 2px; }
+  .ov-edit .ai-hint strong { color: var(--heat); font-weight: 600; }
+  .ov-sell-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
+  .ov-sell-list li { display: flex; align-items: center; gap: 7px; padding: 6px 9px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md); font-size: 12px; }
+  .ov-sell-list li.add { background: var(--surface); border-style: dashed; }
+  .ov-sell-list .num { width: 17px; height: 17px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); font-size: 10px; font-family: var(--font-mono); color: var(--black-alpha-56); display: grid; place-items: center; flex-shrink: 0; }
+  .ov-sell-list li.add .num { background: transparent; color: var(--heat); border-color: var(--heat-40); }
+  .ov-sell-list .txt { flex: 1; min-width: 0; }
+  .ov-sell-list .bl-input { flex: 1; border: 0; background: transparent; font-size: 12px; padding: 0; font-family: inherit; color: var(--accent-black); }
+  .ov-sell-list .bl-input::placeholder { color: var(--black-alpha-48); }
+  .ov-sell-list .bl-x { width: 18px; height: 18px; display: grid; place-items: center; color: var(--black-alpha-48); cursor: pointer; background: transparent; border: 0; opacity: 0; }
+  .ov-sell-list li:hover .bl-x { opacity: 1; }
+  .ov-sell-list .bl-x:hover { color: var(--accent-crimson); }
+  .ov-sell-list .bl-x svg { width: 10px; height: 10px; }
+
+  /* ───── 已生成资产 ───── */
+  .asset-section { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px 22px; }
+  .section-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
+  .section-title h2 { font-size: 15px; font-weight: 600; color: var(--accent-black); }
+  .section-title .sub { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
+  .asset-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-faint); margin-bottom: 14px; }
+  .asset-tab { padding: 0 13px; height: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--black-alpha-56); cursor: pointer; border: 0; background: transparent; position: relative; font-family: inherit; }
+  .asset-tab .count { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; background: var(--background-lighter); color: var(--black-alpha-48); border-radius: var(--r-pill); letter-spacing: .04em; }
+  .asset-tab:hover { color: var(--accent-black); }
+  .asset-tab.active { color: var(--accent-black); }
+  .asset-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--heat); }
+  .asset-tab.active .count { color: var(--heat); background: var(--heat-12); }
+  .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
+  .asset-it { position: relative; border: 1px solid var(--border-faint); border-radius: var(--r-md); overflow: hidden; background: var(--background-lighter); cursor: pointer; transition: all var(--t-base); }
+  .asset-it:hover { border-color: var(--heat-40); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
+  .asset-it .a-thumb { aspect-ratio: 1; background-size: cover; background-position: center; position: relative; }
+  .asset-it .a-thumb.skeleton { background: linear-gradient(110deg, var(--background-lighter) 8%, var(--black-alpha-4) 18%, var(--background-lighter) 33%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; display: grid; place-items: center; color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+  .asset-it .a-tag { position: absolute; top: 6px; left: 6px; font-family: var(--font-mono); font-size: 9.5px; padding: 2px 6px; background: rgba(255,255,255,.92); color: var(--black-alpha-72); border-radius: var(--r-sm); letter-spacing: .04em; }
+  .asset-it .a-body { padding: 8px 10px; border-top: 1px solid var(--border-faint); background: var(--surface); }
+  .asset-it .a-name { font-size: 11.5px; font-weight: 500; color: var(--accent-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .asset-it .a-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
+  .asset-empty { grid-column: 1 / -1; text-align: center; padding: 36px 0; color: var(--black-alpha-48); }
+  .asset-empty .ic-empty { width: 40px; height: 40px; margin: 0 auto 10px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md); display: grid; place-items: center; color: var(--black-alpha-48); }
+  .asset-empty .ic-empty svg { width: 18px; height: 18px; }
+  .asset-empty .t { font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 3px; }
+  .asset-empty .d { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
+
+  /* ════════════ 大型 Picker(双栏:左列表 + 右详情) ════════════ */
+  .picker-bg {
+    position: fixed; inset: 0;
+    background: rgba(21,20,15,.50);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 1000;
+    display: none; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity .2s;
+  }
+  .picker-bg.show { display: flex; opacity: 1; }
+  .picker-pro {
+    background: var(--surface);
+    border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    width: 92%; max-width: 1080px;
+    height: min(720px, calc(100vh - 60px));
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    overflow: hidden;
+    transform: scale(.96);
+    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .picker-bg.show .picker-pro { transform: scale(1); }
+
+  .pp-h {
+    padding: 18px 24px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 14px;
+  }
+  .pp-h .ic { width: 32px; height: 32px; background: var(--heat-12); color: var(--heat); border-radius: var(--r-md); display: grid; place-items: center; }
+  .pp-h .ic svg { width: 16px; height: 16px; }
+  .pp-h .ti { flex: 1; min-width: 0; }
+  .pp-h .ti .t { font-size: 15px; font-weight: 600; color: var(--accent-black); }
+  .pp-h .ti .d { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 3px; letter-spacing: .04em; }
+  .pp-h .pp-filters { display: flex; gap: 6px; flex-shrink: 0; }
+  .pp-h .pp-filter {
+    height: 28px; padding: 0 10px;
+    display: inline-flex; align-items: center; gap: 5px;
+    border: 1px solid var(--border-faint); border-radius: 999px;
+    background: var(--surface); color: var(--black-alpha-56);
+    font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit;
+  }
+  .pp-h .pp-filter:hover { color: var(--accent-black); border-color: var(--black-alpha-24); }
+  .pp-h .pp-filter.on { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); }
+  .pp-h .pp-filter .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
+  .pp-h .x { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--black-alpha-56); cursor: pointer; background: transparent; border: 0; flex-shrink: 0; }
+  .pp-h .x:hover { background: var(--black-alpha-4); color: var(--accent-crimson); }
+  .pp-h .x svg { width: 14px; height: 14px; }
+
+  /* 双栏 body */
+  .pp-body {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    min-height: 0; height: 100%;
+  }
+  .pp-body .pp-left {
+    border-right: 1px solid var(--border-faint);
+    overflow-y: auto;
+    padding: 18px 20px;
+    background: var(--background-lighter);
+  }
+  .pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+
+  /* 模特/平台大卡 */
+  .opt-pro {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 0; overflow: hidden;
+    cursor: pointer;
+    transition: all var(--t-base);
+    position: relative;
+  }
+  .opt-pro:hover { border-color: var(--heat-40); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.04); }
+  .opt-pro.active { border-color: var(--heat); box-shadow: 0 0 0 2px var(--heat-20); }
+  .opt-pro.active::before {
+    content: ''; position: absolute; top: 8px; right: 8px;
+    width: 22px; height: 22px; border-radius: 999px;
+    background: var(--heat); z-index: 2;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+    background-size: 14px; background-position: center; background-repeat: no-repeat;
+  }
+  .opt-pro .opt-thumb {
+    aspect-ratio: 3/4;
+    background-size: cover; background-position: center;
+    background-color: var(--background-lighter);
+    display: grid; place-items: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono); font-size: 11px;
+    position: relative;
+  }
+  .opt-pro .opt-thumb.placeholder::before {
+    content: ''; position: absolute; inset: 0;
+    background: linear-gradient(135deg, var(--background-lighter), var(--black-alpha-4));
+  }
+  .opt-pro .opt-thumb .glyph { z-index: 1; font-size: 32px; opacity: .35; }
+  .opt-pro .opt-body { padding: 9px 11px; }
+  .opt-pro .opt-name { font-size: 12.5px; font-weight: 600; color: var(--accent-black); }
+  .opt-pro.active .opt-name { color: var(--heat); }
+  .opt-pro .opt-meta { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); margin-top: 3px; letter-spacing: .02em; }
+  .opt-pro .opt-tag-mini {
+    font-family: var(--font-mono); font-size: 9px;
+    padding: 1px 5px; background: var(--background-lighter); color: var(--black-alpha-56);
+    border-radius: var(--r-sm); letter-spacing: .04em;
+    display: inline-block; margin-top: 4px;
+  }
+  .opt-pro .opt-uses {
+    position: absolute; bottom: 56px; left: 8px;
+    font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em;
+    padding: 2px 6px;
+    background: rgba(255,255,255,.92); color: var(--black-alpha-72);
+    border-radius: var(--r-sm);
+  }
+  .opt-pro.custom .opt-thumb {
+    background: var(--heat-8); color: var(--heat);
+    border: 1px dashed var(--heat-40);
+  }
+  .opt-pro.custom .opt-thumb .glyph { color: var(--heat); opacity: 1; }
+
+  /* 右侧详情 */
+  .pp-right {
+    display: flex; flex-direction: column;
+    overflow-y: auto;
+    padding: 20px;
+  }
+  .pp-detail-hero {
+    aspect-ratio: 3/4;
+    border-radius: var(--r-md);
+    background: var(--background-lighter); background-size: cover; background-position: center;
+    margin-bottom: 14px;
+    position: relative; overflow: hidden;
+    display: grid; place-items: center;
+  }
+  .pp-detail-hero .glyph { font-size: 88px; opacity: .25; color: var(--black-alpha-48); }
+  .pp-detail-name { font-size: 18px; font-weight: 600; color: var(--accent-black); }
+  .pp-detail-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); margin-top: 4px; letter-spacing: .04em; }
+  .pp-detail-tags { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
+  .pp-detail-tags .t { font-size: 11px; padding: 2px 9px; background: var(--background-lighter); color: var(--black-alpha-56); border: 1px solid var(--border-faint); border-radius: var(--r-sm); }
+  .pp-detail-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-faint); }
+  .pp-detail-block .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; margin-bottom: 8px; }
+  .pp-detail-block .lbl .accent { color: var(--heat); font-weight: 600; }
+  .pp-detail-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
+  .pp-detail-uses .pdu { aspect-ratio: 1; border-radius: var(--r-sm); background-size: cover; background-position: center; background-color: var(--background-lighter); border: 1px solid var(--border-faint); }
+  .pp-detail-uses .pdu.empty { display: grid; place-items: center; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 18px; }
+  .pp-detail-empty {
+    height: 100%;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    color: var(--black-alpha-48); padding: 40px 20px; text-align: center;
+  }
+  .pp-detail-empty .ic-em { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; margin-bottom: 12px; }
+  .pp-detail-empty .ic-em svg { width: 20px; height: 20px; }
+  .pp-detail-empty .t { font-size: 13px; color: var(--accent-black); font-weight: 600; margin-bottom: 4px; }
+  .pp-detail-empty .d { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
+
+  /* Footer */
+  .pp-f {
+    padding: 14px 24px;
+    border-top: 1px solid var(--border-faint);
+    background: var(--background-lighter);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 14px; align-items: center;
+  }
+  .pp-f .pp-config { display: flex; flex-direction: column; gap: 6px; }
+  .pp-f-row { display: flex; align-items: center; gap: 14px; font-size: 12px; }
+  .pp-f-row > label { width: 60px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; }
+  .pp-f-row .pillset { display: flex; gap: 5px; flex-wrap: wrap; }
+  .pp-f-row .pillset .p { padding: 3px 9px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); font-size: 11.5px; color: var(--black-alpha-56); cursor: pointer; transition: all var(--t-base); }
+  .pp-f-row .pillset .p:hover { color: var(--accent-black); border-color: var(--black-alpha-24); }
+  .pp-f-row .pillset .p.on { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); }
+  .pp-f .pp-cta { display: flex; align-items: center; gap: 10px; }
+  .pp-f .pp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .pp-f .pp-meta .accent { color: var(--heat); font-weight: 600; }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="ws">
+  <!-- ════════ 左侧:商品列表 ════════ -->
+  <aside class="ws-list">
+    <div class="ws-list-h">
+      <div class="title">
+        <span>// 商品库 · <span class="count" id="ws-count">7</span> 个</span>
+        <span>// MCN · 老张</span>
+      </div>
+      <button class="ws-new-btn" id="ws-new-btn">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 5v14M5 12h14"/></svg>
+        新建商品
+      </button>
+      <div class="ws-search">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        <input id="ws-search-input" placeholder="搜索商品" />
+      </div>
+    </div>
+    <div class="ws-chip-row">
+      <button class="ws-chip on" data-filter="all">全部 <span class="n" id="t-all">7</span></button>
+      <button class="ws-chip" data-filter="running">生成中 <span class="n" id="t-run">1</span></button>
+      <button class="ws-chip" data-filter="draft">草稿 <span class="n" id="t-draft">0</span></button>
+    </div>
+    <div class="ws-list-body" id="ws-list-body"></div>
+    <div class="ws-list-foot">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/></svg>
+      <span><span class="accent" id="foot-running">1</span> 个任务运行中</span>
+    </div>
+  </aside>
+
+  <!-- ════════ 右侧:工作区 ════════ -->
+  <main class="ws-main" id="ws-main"></main>
+</div>
+
+</div>
+
+<!-- ════════ 大型 Picker ════════ -->
+<div class="picker-bg" id="picker-bg" onclick="if(event.target===this)closePicker()">
+  <div class="picker-pro" id="picker-pro">
+    <div class="pp-h" id="pp-h">
+      <div class="ic" id="pp-ic"></div>
+      <div class="ti"><div class="t" id="pp-title">选择模特</div><div class="d" id="pp-sub">// 8 位模特可选</div></div>
+      <div class="pp-filters" id="pp-filters"></div>
+      <button class="x" onclick="closePicker()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="pp-body">
+      <div class="pp-left">
+        <div class="pp-grid" id="pp-grid"></div>
+      </div>
+      <aside class="pp-right" id="pp-right"></aside>
+    </div>
+    <div class="pp-f">
+      <div class="pp-config" id="pp-config"></div>
+      <div class="pp-cta">
+        <span class="pp-meta" id="pp-meta">// ~35 秒 · <span class="accent">¥3.2</span></span>
+        <button class="btn" onclick="closePicker()">取消</button>
+        <button class="btn btn-primary" id="pp-go-btn" disabled>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+          <span id="pp-go-text">生成 4 张</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'products',
+  crumbs: [{ label: '工作台', href: 'index.html' }, { label: '商品工作台' }]
+});
+const _pickerEl = document.getElementById('picker-bg');
+if (_pickerEl && _pickerEl.parentElement !== document.body) document.body.appendChild(_pickerEl);
+
+// ════════════════════════════════════════════════════════
+//  Data
+// ════════════════════════════════════════════════════════
+const PALETTE = [
+  'linear-gradient(135deg,#fde2c6,#ffd0a8)',
+  'linear-gradient(135deg,#dceafe,#c3e0fe)',
+  'linear-gradient(135deg,#fbcfe8,#fce7f3)',
+  'linear-gradient(135deg,#dcfce7,#bbf7d0)',
+  'linear-gradient(135deg,#fef3c7,#fde68a)',
+];
+
+// 模特 · 带详细信息
+const MODELS = [
+  { id: 'm1', name: '林夕',   gender: '女', age: 25, style: '都市白领', uses: 12, tags: ['通勤', '气质', '简约'], bg: 'linear-gradient(135deg,#fcd5ce,#f8edeb)', glyph: '◐', portfolio: [0,1,2,3] },
+  { id: 'm2', name: '小苏',   gender: '女', age: 23, style: '文艺学生', uses: 7,  tags: ['学生', '清新', '校园'], bg: 'linear-gradient(135deg,#cfe1b9,#e9edc9)', glyph: '◑', portfolio: [0,1,2,3] },
+  { id: 'm3', name: '阿楠',   gender: '女', age: 28, style: '同事型',   uses: 5,  tags: ['职场', '亲和', '商务'], bg: 'linear-gradient(135deg,#bee3f8,#c3dafe)', glyph: '◓', portfolio: [0,1,2,3] },
+  { id: 'm4', name: '小七',   gender: '女', age: 20, style: '学生',     uses: 9,  tags: ['少女', '甜美', '校园'], bg: 'linear-gradient(135deg,#fde2e4,#fad2e1)', glyph: '◒', portfolio: [0,1,2,3] },
+  { id: 'm5', name: '王姐',   gender: '女', age: 38, style: '居家',     uses: 3,  tags: ['妈妈', '居家', '温暖'], bg: 'linear-gradient(135deg,#f3e8ff,#fae8ff)', glyph: '◍', portfolio: [0,1,2,3] },
+  { id: 'm6', name: '阿杰',   gender: '男', age: 30, style: '都市',     uses: 4,  tags: ['通勤', '商务', '阳光'], bg: 'linear-gradient(135deg,#dbeafe,#bfdbfe)', glyph: '◐', portfolio: [0,1,2,3] },
+  { id: 'm7', name: '阿强',   gender: '男', age: 26, style: '健身',     uses: 6,  tags: ['运动', '阳光', '健身'], bg: 'linear-gradient(135deg,#e0f2fe,#bae6fd)', glyph: '◑', portfolio: [0,1,2,3] },
+  { id: 'm8', name: '+ 上传自有模特', custom: true, gender: '', age: '', style: '自定义', uses: 0, tags: ['企业账号专用'], bg: '', glyph: '+' },
+];
+const MODEL_THUMB_PALETTE = [
+  'linear-gradient(135deg,#fde2c6,#ffd0a8)',
+  'linear-gradient(135deg,#fcd5ce,#f8edeb)',
+  'linear-gradient(135deg,#dcfce7,#bbf7d0)',
+  'linear-gradient(135deg,#bee3f8,#c3dafe)',
+];
+
+const PLATFORMS = [
+  { id: 'pl1', name: '淘宝 / 天猫', size: '800×800', ratio: '1:1', tags: ['主图', '详情头图'], uses: 4, desc: '强调白底/干净背景,主图允许少量文字。详情页头图 750×1000。' },
+  { id: 'pl2', name: '抖店',        size: '750×1000', ratio: '3:4', tags: ['沉浸竖屏', '电商'], uses: 2, desc: '竖版构图,符合短视频生态调性。背景可丰富,商品居中突出。' },
+  { id: 'pl3', name: '拼多多',      size: '800×800',  ratio: '1:1', tags: ['夸张利益点', '热闹'], uses: 0, desc: '允许节日/促销元素,色彩饱和。利益点(价格/优惠)突出。' },
+  { id: 'pl4', name: '京东',        size: '800×800',  ratio: '1:1', tags: ['品质感', '商务'], uses: 0, desc: '干净背景,商品居中,标注规格与品质标识。' },
+  { id: 'pl5', name: '小红书',      size: '600×800',  ratio: '3:4', tags: ['种草感', '生活方式'], uses: 1, desc: '强调使用场景,弱化电商感。允许图文叠加。' },
+  { id: 'pl6', name: '1688',        size: '750×750',  ratio: '1:1', tags: ['批发', '工厂'], uses: 0, desc: '突出价格/库存/规格,可加品类标识与厂家信息。' },
+];
+
+// 7 个商品 + 各自的 state
+const products = [
+  { id: 'p1', name: '透真玻尿酸补水面膜', cat: '美妆个护', price: '39.9', target: '22-32 岁女性、敏感肌、办公室通勤', sellPoints: ['玻尿酸双效保湿', '4 小时持久水润', '敏感肌可用', '通勤补水', '平价代替'],
+    photos: [{ id: 'p1-1', bg: PALETTE[0] }, { id: 'p1-2', bg: PALETTE[1] }, { id: 'p1-3', bg: PALETTE[4] }],
+    task: 'running',
+    assets: [
+      { id: 'a1', kind: 'white', name: '白底 · 正面', meta: '512×512 · 5/19', color: '#f4f4f4' },
+      { id: 'a2', kind: 'white', name: '白底 · 侧面', meta: '512×512 · 5/19', color: '#f0f0f0' },
+      { id: 'a3', kind: 'white', name: '白底 · 背面', meta: '512×512 · 5/19', color: '#eeeeee' },
+      { id: 'a4', kind: 'model', name: '林夕 · 01', meta: '林夕 · 1024', color: 'linear-gradient(135deg,#ffe0b2,#ffccbc)' },
+      { id: 'a5', kind: 'model', name: '林夕 · 02', meta: '林夕 · 1024', color: 'linear-gradient(135deg,#fde2c6,#ffbcaa)' },
+      { id: 'a6', kind: 'model', name: '林夕 · 03', meta: '林夕 · 1024', color: 'linear-gradient(135deg,#fbcfe8,#fce7f3)' },
+      { id: 'a7', kind: 'model', name: '林夕 · 04', meta: '林夕 · 1024', color: 'linear-gradient(135deg,#f3e8ff,#fae8ff)' },
+      { id: 'a8', kind: 'platform', name: '淘宝 · 01', meta: '800×800', color: 'linear-gradient(135deg,#fff1f0,#ffd6cc)' },
+      { id: 'a9', kind: 'platform', name: '淘宝 · 02', meta: '800×800', color: 'linear-gradient(135deg,#fef3c7,#fde68a)' },
+      { id: 'a10', kind: 'platform', name: '淘宝 · 03', meta: '800×800', color: 'linear-gradient(135deg,#dcfce7,#bbf7d0)' },
+      { id: 'a11', kind: 'platform', name: '淘宝 · 04', meta: '800×800', color: 'linear-gradient(135deg,#dbeafe,#bfdbfe)' },
+      { id: 'sk1', kind: 'model', skeleton: true, name: '生成中', meta: 'pending' },
+    ],
+  },
+  { id: 'p2', name: '南卡 Lite Pro 蓝牙耳机', cat: '数码 3C', price: '199', target: '通勤族·学生', sellPoints: ['通话降噪', '续航 25 小时', '蓝牙 5.3'],
+    photos: [{ id: 'p2-1', bg: 'linear-gradient(135deg,#e0e7ff,#c7d2fe)' }, { id: 'p2-2', bg: 'linear-gradient(135deg,#cffafe,#a5f3fc)' }],
+    task: 'done',
+    assets: [{ id: 'b1', kind: 'white', name: '白底 · 正面', meta: '512×512', color: '#f4f4f4' }, { id: 'b2', kind: 'platform', name: '抖店 · 01', meta: '750×1000', color: 'linear-gradient(135deg,#fef3c7,#fde68a)' }],
+  },
+  { id: 'p3', name: '滋啦速食牛肉面 6 桶装', cat: '食品饮料', price: '49.9', target: '加班党·独居青年', sellPoints: ['正宗川味', '加班 5 分钟搞定'],
+    photos: [{ id: 'p3-1', bg: 'linear-gradient(135deg,#fed7aa,#fdba74)' }],
+    task: null, assets: [],
+  },
+  { id: 'p4', name: '透真清透物理防晒霜', cat: '美妆个护', price: '69', target: '通勤女性·敏感肌', sellPoints: ['SPF50+', '物理防晒', '不闷痘'],
+    photos: [{ id: 'p4-1', bg: 'linear-gradient(135deg,#fef9c3,#fef08a)' }, { id: 'p4-2', bg: 'linear-gradient(135deg,#fed7aa,#fdba74)' }],
+    task: null,
+    assets: [{ id: 'c1', kind: 'white', name: '白底', meta: '512×512', color: '#f4f4f4' }, { id: 'c2', kind: 'model', name: '小苏 · 01', meta: '小苏 · 1024', color: 'linear-gradient(135deg,#fcd5ce,#f8edeb)' }],
+  },
+  { id: 'p5', name: '三顿半同款冻干咖啡粉', cat: '食品饮料', price: '89', target: '早八党·咖啡爱好者', sellPoints: ['3 秒速溶', '冷热皆宜'],
+    photos: [{ id: 'p5-1', bg: 'linear-gradient(135deg,#d6d3d1,#a8a29e)' }],
+    task: 'failed',
+    assets: [{ id: 'd1', kind: 'white', name: '白底', meta: 'failed', color: '#fef2f2' }],
+  },
+  { id: 'p6', name: '小熊 4L 可视空气炸锅', cat: '家居家电', price: '159', target: '小户型·健康人群', sellPoints: ['可视玻璃', '4L 大容量'],
+    photos: [{ id: 'p6-1', bg: 'linear-gradient(135deg,#fef2f2,#fecaca)' }], task: null, assets: [],
+  },
+  { id: 'p7', name: '露露同款裸感瑜伽裤', cat: '运动户外', price: '119', target: '健身爱好者·通勤女性', sellPoints: ['裸感无痕', '高弹力'],
+    photos: [{ id: 'p7-1', bg: 'linear-gradient(135deg,#1f2937,#374151)' }, { id: 'p7-2', bg: 'linear-gradient(135deg,#4b5563,#6b7280)' }],
+    task: null,
+    assets: [{ id: 'e1', kind: 'model', name: '阿强 · 01', meta: '阿强 · 1024', color: 'linear-gradient(135deg,#bee3f8,#c3dafe)' }],
+  },
+];
+
+// ════════════════════════════════════════════════════════
+//  State
+// ════════════════════════════════════════════════════════
+let currentId = 'p1';
+let isEditing = false;
+let listFilter = 'all';
+let listSearch = '';
+
+// Picker 状态
+let pickerKind = null;       // 'white' | 'model' | 'platform'
+let pickerFilter = 'all';
+let pickerSelectedId = null; // 当前在右侧详情展示 + 即将生成用的
+let pickerConfig = {};       // 各类型的配置
+
+const $ = id => document.getElementById(id);
+function current() { return products.find(p => p.id === currentId); }
+function escape(s) { return String(s||'').replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]); }
+
+// ════════════════════════════════════════════════════════
+//  左侧渲染
+// ════════════════════════════════════════════════════════
+function renderList() {
+  const body = $('ws-list-body');
+  const q = listSearch.toLowerCase();
+  const filtered = products.filter(p => {
+    if (listFilter === 'running' && p.task !== 'running') return false;
+    if (listFilter === 'draft' && !p.draft) return false;
+    if (q && !`${p.name} ${p.cat}`.toLowerCase().includes(q)) return false;
+    return true;
+  });
+
+  body.innerHTML = filtered.map(p => {
+    const isActive = p.id === currentId;
+    const isDraft = p.draft;
+    const assetCount = p.assets ? p.assets.filter(a => !a.skeleton).length : 0;
+    const taskEl = p.task ? `<span class="ws-prod-task ${p.task}"><span class="dot-mini"></span>${p.task === 'running' ? '生成中' : p.task === 'done' ? '完成' : '失败'}</span>` : '';
+    if (isDraft) {
+      return `<div class="ws-prod draft ${isActive?'active':''}" data-id="${p.id}">
+        <div class="ws-prod-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg></div>
+        <div class="ws-prod-info">
+          <div class="ws-prod-name">${p.name || '未命名商品'}</div>
+          <div class="ws-prod-meta">// 草稿</div>
+        </div>
+        <div class="ws-prod-side"></div>
+      </div>`;
+    }
+    return `<div class="ws-prod ${isActive?'active':''}" data-id="${p.id}">
+      <div class="ws-prod-thumb" style="background:${(p.photos[0]||{}).bg||''};background-size:cover;background-position:center;"></div>
+      <div class="ws-prod-info">
+        <div class="ws-prod-name">${escape(p.name)}</div>
+        <div class="ws-prod-meta">${escape(p.cat)} · ¥${p.price}</div>
+      </div>
+      <div class="ws-prod-side"><span class="ws-prod-count">${assetCount}</span>${taskEl}</div>
+    </div>`;
+  }).join('');
+
+  body.querySelectorAll('.ws-prod').forEach(el => {
+    el.addEventListener('click', () => {
+      currentId = el.dataset.id;
+      isEditing = false;
+      renderAll();
+    });
+  });
+
+  $('ws-count').textContent = products.filter(p => !p.draft).length;
+  $('t-all').textContent = products.length;
+  $('t-run').textContent = products.filter(p => p.task === 'running').length;
+  $('t-draft').textContent = products.filter(p => p.draft).length;
+  $('foot-running').textContent = products.filter(p => p.task === 'running').length;
+}
+
+// ════════════════════════════════════════════════════════
+//  右侧渲染:顶部行动条 + 主内容
+// ════════════════════════════════════════════════════════
+function renderMain() {
+  const p = current();
+  if (!p) { $('ws-main').innerHTML = ''; return; }
+
+  const isFresh = !!p.draft && !p.savedOnce;
+  const canTools = p.name && p.cat && p.photos.length > 0;
+  const assetCount = p.assets ? p.assets.filter(a => !a.skeleton).length : 0;
+
+  // 顶部 sticky 行动条
+  const actionBar = `
+    <div class="action-bar">
+      <div class="prod-id">
+        ${isFresh
+          ? `<div class="prod-thumb draft"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg></div>`
+          : `<div class="prod-thumb" style="background:${(p.photos[0]||{}).bg||''};background-size:cover;background-position:center;"></div>`}
+        <div class="prod-text">
+          <div class="nm">${isFresh ? '新建商品' : escape(p.name)}</div>
+          <div class="meta">${isFresh
+            ? `// 填写商品信息 · 至少 1 张图 · 即可解锁工具`
+            : `// ${escape(p.cat)} · ¥${p.price} · 已生成 <span class="accent">${assetCount}</span> 张资产`}</div>
+        </div>
+      </div>
+      <div class="tools-row ${canTools?'':'locked'}" id="tools-row">
+        <button class="tool-btn featured" data-tool="white">
+          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg></span>
+          <span class="lbl"><span class="t">白底三视图</span><span class="d">~18s · ¥1.6</span></span>
+        </button>
+        <button class="tool-btn" data-tool="model">
+          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2"/></svg></span>
+          <span class="lbl"><span class="t">AI 模特上身</span><span class="d">~35s · ¥3.2</span></span>
+        </button>
+        <button class="tool-btn" data-tool="platform">
+          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></span>
+          <span class="lbl"><span class="t">平台套图</span><span class="d">~28s · ¥2.4</span></span>
+        </button>
+        <button class="tool-btn coming-soon">
+          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 3"/></svg></span>
+          <span class="lbl"><span class="t">更多</span><span class="d">海报 · 详情页</span></span>
+        </button>
+      </div>
+      <div class="right-cta">
+        ${isFresh
+          ? `<button class="btn" id="cancel-new">放弃</button>
+             <button class="btn btn-primary" id="save-new" ${canTools?'':'disabled'}>
+               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+               保存
+             </button>`
+          : `<a class="btn btn-primary" href="projects-new.html">
+               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg>
+               创建视频项目
+             </a>`}
+      </div>
+    </div>
+  `;
+
+  // 锁定提示
+  const lockRow = !canTools ? `
+    <div class="lock-row">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+      <span><strong>完成基本信息</strong> 后解锁 AI 工具 · </span>
+      <span class="miss">还差:${[
+        !p.name && '商品名',
+        !p.cat && '品类',
+        p.photos.length === 0 && '≥1 张图',
+      ].filter(Boolean).join(' / ')}</span>
+    </div>
+  ` : '';
+
+  // Onboarding
+  const onboardHtml = p.showOnboard ? `
+    <div class="onboard-tip">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg></div>
+      <div class="body">
+        <div class="t">商品已建档 · 第一次?推荐先生成白底三视图</div>
+        <div class="d">AI 用主图生成正/侧/背 3 张白底图,<strong>Seedance 视频效果 +60%</strong></div>
+      </div>
+      <button class="dismiss" id="dismiss-onboard">知道了</button>
+    </div>
+  ` : '';
+
+  // 主内容区
+  const main = `
+    <div class="ws-main-body">
+      ${onboardHtml}
+      ${renderOverview(p, isFresh)}
+      <div class="asset-section">
+        <div class="section-title" style="margin-bottom: 8px;">
+          <h2>已生成资产</h2>
+          <span class="sub">// 该商品 · 自动入资产库</span>
+        </div>
+        <div class="asset-tabs" id="asset-tabs">
+          ${(() => {
+            const total = p.assets.filter(a => !a.skeleton).length;
+            const byKind = k => p.assets.filter(a => a.kind === k && !a.skeleton).length;
+            return `
+              <button class="asset-tab active" data-tab="all">全部 <span class="count">${total}</span></button>
+              <button class="asset-tab" data-tab="white">白底 <span class="count">${byKind('white')}</span></button>
+              <button class="asset-tab" data-tab="model">模特 <span class="count">${byKind('model')}</span></button>
+              <button class="asset-tab" data-tab="platform">平台 <span class="count">${byKind('platform')}</span></button>
+            `;
+          })()}
+        </div>
+        <div class="asset-grid" id="asset-grid">${renderAssetItems(p, 'all')}</div>
+      </div>
+    </div>
+  `;
+
+  $('ws-main').innerHTML = actionBar + lockRow + main;
+  bindMain(p);
+}
+
+function renderOverview(p, isFresh) {
+  if (isFresh) {
+    return `<div class="overview-card editing"><div><div class="ov-edit" style="display:block;">${renderEditFields(p)}</div></div>${renderPhotos(p, true)}</div>`;
+  }
+  if (isEditing) {
+    return `<div class="overview-card editing"><div><div class="ov-edit" style="display:block;">${renderEditFields(p, true)}</div></div>${renderPhotos(p, true)}</div>`;
+  }
+  const tags = p.sellPoints.slice(0, 5);
+  return `<div class="overview-card">
+    <div>
+      <div class="ov-display">
+        <div class="ov-info-head">
+          <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg></div>
+          <div style="flex:1;min-width:0;">
+            <div class="name">${escape(p.name)}</div>
+            <div class="meta">${escape(p.target||'')}</div>
+          </div>
+          <button class="edit" id="start-edit">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            编辑
+          </button>
+        </div>
+        ${tags.length ? `<div class="ov-tags">${tags.map(t => `<span class="t">${escape(t)}</span>`).join('')}</div>` : ''}
+        ${p.sellPoints.length ? `<div class="ov-sell"><span class="lbl">// 卖点</span>${p.sellPoints.map(escape).join(' · ')}</div>` : ''}
+      </div>
+    </div>
+    ${renderPhotos(p, false)}
+  </div>`;
+}
+
+function renderEditFields(p, includeSaveBar) {
+  const sellHtml = p.sellPoints.map((pt, i) => `<li><span class="num">${i+1}</span><span class="txt">${escape(pt)}</span><button class="bl-x" type="button" data-i="${i}"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg></button></li>`).join('');
+  return `
+    <div class="field">
+      <label class="field-label">商品名称 <span class="req">*</span></label>
+      <input class="input" id="e-name" value="${escape(p.name)}" placeholder="例: 透真补水面膜">
+    </div>
+    <div class="field" style="display:grid;grid-template-columns:1.5fr 1fr;gap:10px;">
+      <div>
+        <label class="field-label">品类 <span class="req">*</span></label>
+        <select class="select" id="e-cat">
+          <option value="">— 选择 —</option>
+          ${['美妆个护','服饰内衣','食品饮料','家居家电','数码 3C','个护清洁','运动户外','母婴亲子'].map(c => `<option ${c===p.cat?'selected':''}>${c}</option>`).join('')}
+        </select>
+      </div>
+      <div>
+        <label class="field-label">价格 <span class="opt">选填</span></label>
+        <input class="input" id="e-price" type="number" value="${escape(p.price)}" placeholder="¥">
+      </div>
+    </div>
+    <div class="field">
+      <label class="field-label">目标人群 <span class="opt">选填</span></label>
+      <input class="input" id="e-target" value="${escape(p.target||'')}" placeholder="例: 22-32 岁女性、敏感肌">
+    </div>
+    <div class="field" style="margin-bottom:8px;">
+      <label class="field-label">核心卖点 <span class="opt">选填 · 推荐</span></label>
+      <ul class="ov-sell-list" id="e-sell-list">
+        ${sellHtml}
+        <li class="add"><span class="num">+</span><input class="bl-input" id="e-sell-input" placeholder="回车添加 · 例: 玻尿酸双效保湿"></li>
+      </ul>
+      <div class="ai-hint">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+        <span>填上卖点 & 人群,后续 AI 生<strong>痛点种草</strong>脚本质量更高。</span>
+      </div>
+    </div>
+    ${includeSaveBar ? `
+      <div style="display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px dashed var(--border-faint);">
+        <span style="flex:1;font-family:var(--font-mono);font-size:11px;color:var(--black-alpha-48);">// 编辑模式</span>
+        <button class="btn" id="cancel-edit">取消</button>
+        <button class="btn btn-primary" id="save-edit">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+          保存
+        </button>
+      </div>
+    ` : ''}
+  `;
+}
+
+function renderPhotos(p, isEdit) {
+  const MAX = 5;
+  let slots = '';
+  if (isEdit) {
+    for (let i = 0; i < MAX; i++) {
+      const ph = p.photos[i];
+      if (ph) {
+        slots += `<div class="ov-photo" style="background:${ph.bg};background-size:cover;background-position:center;">
+          ${i===0?'<span class="pmain">MAIN</span>':''}
+          <button class="photo-x" data-i="${i}" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
+        </div>`;
+      } else if (i === p.photos.length) {
+        slots += `<div class="ov-photo empty-slot add-active" data-add-photo>+ 上传</div>`;
+      } else {
+        slots += `<div class="ov-photo empty-slot" style="opacity:.5;"></div>`;
+      }
+    }
+  } else {
+    p.photos.forEach((ph, i) => {
+      slots += `<div class="ov-photo" style="background:${ph.bg};background-size:cover;background-position:center;">${i===0?'<span class="pmain">MAIN</span>':''}</div>`;
+    });
+    if (p.photos.length < MAX) slots += `<div class="ov-photo add" data-start-edit><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg></div>`;
+  }
+  return `<div class="ov-photos">
+    <div class="ov-photos-h"><span class="t">原图册 · <span class="n">${p.photos.length}</span> / ${MAX}</span><span class="t" style="color:var(--black-alpha-32);">JPG / PNG</span></div>
+    <div class="ov-photos-grid">${slots}</div>
+  </div>`;
+}
+
+function renderAssetItems(p, tab) {
+  const filtered = tab === 'all' ? p.assets : p.assets.filter(a => a.kind === tab);
+  if (filtered.length === 0) {
+    return `<div class="asset-empty">
+      <div class="ic-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg></div>
+      <div class="t">还没有资产</div>
+      <div class="d">// 上方工具开始生成</div>
+    </div>`;
+  }
+  return filtered.map(a => {
+    const isGradient = (a.color||'').startsWith('linear');
+    const tagText = { white: '白底', model: '模特', platform: '平台' }[a.kind];
+    return `<div class="asset-it">
+      <div class="a-thumb${a.skeleton?' skeleton':''}" style="${a.skeleton?'':(isGradient?`background:${a.color}`:`background-color:${a.color}`)}">
+        ${a.skeleton ? '生成中…' : `<span class="a-tag">${tagText}</span>`}
+      </div>
+      ${a.skeleton ? '' : `<div class="a-body"><div class="a-name">${escape(a.name)}</div><div class="a-meta">${escape(a.meta)}</div></div>`}
+    </div>`;
+  }).join('');
+}
+
+// ════════════════════════════════════════════════════════
+//  事件
+// ════════════════════════════════════════════════════════
+function bindMain(p) {
+  $('cancel-new') && $('cancel-new').addEventListener('click', () => {
+    products.splice(products.indexOf(p), 1);
+    currentId = products[0]?.id || '';
+    isEditing = false;
+    renderAll();
+  });
+  $('save-new') && $('save-new').addEventListener('click', () => saveProduct(p, true));
+  $('start-edit') && $('start-edit').addEventListener('click', () => { isEditing = true; renderMain(); });
+  $('cancel-edit') && $('cancel-edit').addEventListener('click', () => { isEditing = false; renderMain(); });
+  $('save-edit') && $('save-edit').addEventListener('click', () => saveProduct(p, false));
+  $('dismiss-onboard') && $('dismiss-onboard').addEventListener('click', () => { p.showOnboard = false; renderMain(); });
+
+  // 编辑字段
+  const eName = $('e-name'), eCat = $('e-cat'), ePrice = $('e-price'), eTarget = $('e-target');
+  if (eName) {
+    eName.addEventListener('input', () => { p.name = eName.value; updateSaveBtn(p); });
+    eCat.addEventListener('change', () => { p.cat = eCat.value; updateSaveBtn(p); });
+    ePrice.addEventListener('input', () => { p.price = ePrice.value; });
+    eTarget.addEventListener('input', () => { p.target = eTarget.value; });
+  }
+  const sellInput = $('e-sell-input');
+  if (sellInput) {
+    sellInput.addEventListener('keydown', e => {
+      if (e.key !== 'Enter') return;
+      e.preventDefault();
+      const t = sellInput.value.trim();
+      if (!t) return;
+      p.sellPoints.push(t);
+      sellInput.value = '';
+      renderMain();
+      setTimeout(() => $('e-sell-input')?.focus(), 50);
+    });
+  }
+  document.querySelectorAll('#e-sell-list .bl-x').forEach(b => {
+    b.addEventListener('click', () => { p.sellPoints.splice(+b.dataset.i, 1); renderMain(); });
+  });
+  document.querySelectorAll('.ov-photo[data-add-photo]').forEach(el => {
+    el.addEventListener('click', () => {
+      if (p.photos.length >= 5) return;
+      p.photos.push({ id: Date.now().toString(36), bg: PALETTE[p.photos.length % PALETTE.length] });
+      renderMain(); renderList(); updateSaveBtn(p);
+    });
+  });
+  document.querySelectorAll('.photo-x').forEach(b => {
+    b.addEventListener('click', e => { e.stopPropagation(); p.photos.splice(+b.dataset.i, 1); renderMain(); renderList(); updateSaveBtn(p); });
+  });
+  document.querySelectorAll('.ov-photo[data-start-edit]').forEach(el => {
+    el.addEventListener('click', () => { isEditing = true; renderMain(); });
+  });
+
+  // 工具入口
+  document.querySelectorAll('.tool-btn[data-tool]').forEach(b => {
+    b.addEventListener('click', e => {
+      if (b.closest('.tools-row.locked')) {
+        e.preventDefault(); e.stopPropagation();
+        Shell.toast('请先完成基本信息', '商品名 + 品类 + ≥1 张图');
+        return;
+      }
+      openPicker(b.dataset.tool);
+    });
+  });
+
+  // 资产 tab
+  document.querySelectorAll('.asset-tab').forEach(t => {
+    t.addEventListener('click', () => {
+      document.querySelectorAll('.asset-tab').forEach(x => x.classList.remove('active'));
+      t.classList.add('active');
+      $('asset-grid').innerHTML = renderAssetItems(p, t.dataset.tab);
+    });
+  });
+}
+
+function updateSaveBtn(p) {
+  const ok = p.name && p.cat && p.photos.length > 0;
+  const btn = $('save-new');
+  if (btn) btn.disabled = !ok;
+  // 顶部 tools-row 锁定状态也跟着同步
+  const tools = $('tools-row');
+  if (tools) {
+    if (ok) tools.classList.remove('locked');
+    else tools.classList.add('locked');
+  }
+}
+
+function saveProduct(p, isFresh) {
+  if (!p.name || !p.cat || p.photos.length === 0) return;
+  if (isFresh) {
+    delete p.draft; p.savedOnce = true; p.showOnboard = true; isEditing = false;
+    Shell.toast('商品已建档', `+ ${p.name}`);
+  } else {
+    isEditing = false;
+    Shell.toast('已保存', p.name);
+  }
+  renderAll();
+}
+
+// ════════════════════════════════════════════════════════
+//  Picker · 双栏(左列表 + 右详情)
+// ════════════════════════════════════════════════════════
+const PICKER_CONFIG = {
+  white: {
+    title: '生成白底三视图',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg>',
+    filters: [],
+    meta: '~18 秒 · ¥1.6',
+    goText: '开始生成',
+  },
+  model: {
+    title: '选择模特',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2"/></svg>',
+    filters: [
+      { v: 'all', label: '全部' },
+      { v: '女',  label: '女性' },
+      { v: '男',  label: '男性' },
+    ],
+    meta: '~35 秒 · ¥3.2',
+    goText: '用此模特生成 4 张',
+  },
+  platform: {
+    title: '选择平台',
+    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>',
+    filters: [],
+    meta: '~28 秒 · ¥2.4',
+    goText: '用此规格生成 4 张',
+  },
+};
+
+function openPicker(kind) {
+  pickerKind = kind;
+  pickerFilter = 'all';
+  pickerSelectedId = null;
+  pickerConfig = {};
+  const cfg = PICKER_CONFIG[kind];
+
+  $('pp-ic').innerHTML = cfg.icon;
+  $('pp-title').textContent = cfg.title;
+  $('pp-sub').innerHTML = `// 商品:<span style="color:var(--accent-black);">${escape(current().name)}</span>`;
+  $('pp-meta').innerHTML = `// ${cfg.meta} · <span class="accent">失败不扣费</span>`;
+  $('pp-go-text').textContent = cfg.goText;
+
+  // 顶部 filters
+  $('pp-filters').innerHTML = cfg.filters.map(f =>
+    `<button class="pp-filter ${f.v==='all'?'on':''}" data-v="${f.v}">${f.label}${f.v==='all' && kind==='model' ? ` <span class="n">${MODELS.filter(m=>!m.custom).length}</span>`:''}</button>`
+  ).join('');
+  $('pp-filters').querySelectorAll('.pp-filter').forEach(b => {
+    b.addEventListener('click', () => {
+      pickerFilter = b.dataset.v;
+      $('pp-filters').querySelectorAll('.pp-filter').forEach(x => x.classList.toggle('on', x.dataset.v === pickerFilter));
+      renderPickerList();
+    });
+  });
+
+  renderPickerList();
+  renderPickerDetail();
+  renderPickerFooter();
+  $('picker-bg').classList.add('show');
+}
+
+function closePicker() { $('picker-bg').classList.remove('show'); }
+
+function renderPickerList() {
+  const grid = $('pp-grid');
+  if (pickerKind === 'white') {
+    // 白底没有列表选择,只有参数
+    grid.innerHTML = `
+      <div style="grid-column:1/-1;background:var(--surface);border:1px solid var(--border-faint);border-radius:var(--r-md);padding:18px;">
+        <div style="font-size:14px;font-weight:600;color:var(--accent-black);margin-bottom:8px;">将以主图为基准生成 3 个视角</div>
+        <div style="font-family:var(--font-mono);font-size:11.5px;color:var(--black-alpha-56);line-height:1.7;letter-spacing:.02em;">
+          // AI 自动去白底 + 重打光<br>
+          // 推算正面、侧面、背面构图<br>
+          // 商品形态保持稳定
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;">
+          <div style="aspect-ratio:1;background:#fafafa;border-radius:var(--r-md);border:1px solid var(--border-faint);display:grid;place-items:center;color:var(--black-alpha-32);font-family:var(--font-mono);font-size:11px;">[ 正面预览 ]</div>
+          <div style="aspect-ratio:1;background:#f5f5f5;border-radius:var(--r-md);border:1px solid var(--border-faint);display:grid;place-items:center;color:var(--black-alpha-32);font-family:var(--font-mono);font-size:11px;">[ 侧面预览 ]</div>
+          <div style="aspect-ratio:1;background:#f0f0f0;border-radius:var(--r-md);border:1px solid var(--border-faint);display:grid;place-items:center;color:var(--black-alpha-32);font-family:var(--font-mono);font-size:11px;">[ 背面预览 ]</div>
+        </div>
+      </div>
+    `;
+    return;
+  }
+  if (pickerKind === 'model') {
+    const filtered = pickerFilter === 'all' ? MODELS : MODELS.filter(m => m.custom || m.gender === pickerFilter);
+    grid.innerHTML = filtered.map(m => {
+      if (m.custom) {
+        return `<div class="opt-pro custom" data-id="${m.id}">
+          <div class="opt-thumb"><span class="glyph">+</span></div>
+          <div class="opt-body">
+            <div class="opt-name">${escape(m.name)}</div>
+            <div class="opt-meta">${escape(m.style)}</div>
+          </div>
+        </div>`;
+      }
+      return `<div class="opt-pro ${pickerSelectedId===m.id?'active':''}" data-id="${m.id}">
+        <div class="opt-thumb" style="background:${m.bg};">
+          <span class="glyph">${m.glyph}</span>
+          ${m.uses ? `<span class="opt-uses">用过 ${m.uses}</span>` : ''}
+        </div>
+        <div class="opt-body">
+          <div class="opt-name">${escape(m.name)}</div>
+          <div class="opt-meta">${escape(m.gender)} · ${m.age} · ${escape(m.style)}</div>
+        </div>
+      </div>`;
+    }).join('');
+  } else if (pickerKind === 'platform') {
+    grid.innerHTML = PLATFORMS.map(pl => `
+      <div class="opt-pro ${pickerSelectedId===pl.id?'active':''}" data-id="${pl.id}">
+        <div class="opt-thumb placeholder"><span class="glyph">${escape(pl.name[0])}</span>${pl.uses ? `<span class="opt-uses">用过 ${pl.uses}</span>` : ''}</div>
+        <div class="opt-body">
+          <div class="opt-name">${escape(pl.name)}</div>
+          <div class="opt-meta">${pl.ratio} · ${pl.size}</div>
+        </div>
+      </div>
+    `).join('');
+  }
+  grid.querySelectorAll('.opt-pro').forEach(c => {
+    c.addEventListener('click', () => {
+      if (c.classList.contains('custom')) {
+        Shell.toast('上传自有模特', '企业账号专用');
+        return;
+      }
+      pickerSelectedId = c.dataset.id;
+      grid.querySelectorAll('.opt-pro').forEach(x => x.classList.toggle('active', x.dataset.id === pickerSelectedId));
+      renderPickerDetail();
+      $('pp-go-btn').disabled = false;
+    });
+  });
+}
+
+function renderPickerDetail() {
+  const right = $('pp-right');
+  if (pickerKind === 'white') {
+    right.innerHTML = `
+      <div class="pp-detail-empty">
+        <div class="ic-em"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg></div>
+        <div class="t">无需选择</div>
+        <div class="d">// 调整参数后点开始生成</div>
+      </div>
+    `;
+    // 白底默认可生成
+    $('pp-go-btn').disabled = false;
+    return;
+  }
+  if (!pickerSelectedId) {
+    right.innerHTML = `
+      <div class="pp-detail-empty">
+        <div class="ic-em"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M9 9h.01M15 9h.01M9 15c1 1 2 1 3 1s2 0 3-1"/></svg></div>
+        <div class="t">${pickerKind === 'model' ? '选一位模特看详情' : '选一个平台看规格'}</div>
+        <div class="d">// 点击左侧任意卡片</div>
+      </div>
+    `;
+    return;
+  }
+
+  if (pickerKind === 'model') {
+    const m = MODELS.find(x => x.id === pickerSelectedId);
+    if (!m) return;
+    right.innerHTML = `
+      <div class="pp-detail-hero" style="background:${m.bg};">
+        <span class="glyph">${m.glyph}</span>
+      </div>
+      <div class="pp-detail-name">${escape(m.name)}</div>
+      <div class="pp-detail-meta">${escape(m.gender)} · ${m.age} 岁 · ${escape(m.style)}</div>
+      <div class="pp-detail-tags">${m.tags.map(t => `<span class="t">${escape(t)}</span>`).join('')}</div>
+      <div class="pp-detail-block">
+        <div class="lbl">// 已用 <span class="accent">${m.uses}</span> 次</div>
+        <div class="pp-detail-uses">
+          ${[0,1,2,3].map(i => `<div class="pdu" style="background:${MODEL_THUMB_PALETTE[i]};"></div>`).join('')}
+        </div>
+      </div>
+      <div class="pp-detail-block">
+        <div class="lbl">// 适用场景</div>
+        <div style="font-size:12px;color:var(--black-alpha-72);line-height:1.6;">
+          ${m.style} 风格,适合${m.tags.join('/')}类商品。
+        </div>
+      </div>
+    `;
+  } else if (pickerKind === 'platform') {
+    const pl = PLATFORMS.find(x => x.id === pickerSelectedId);
+    if (!pl) return;
+    right.innerHTML = `
+      <div class="pp-detail-hero" style="background:linear-gradient(135deg,#fef9c3,#fde68a);">
+        <span class="glyph">${escape(pl.name[0])}</span>
+      </div>
+      <div class="pp-detail-name">${escape(pl.name)}</div>
+      <div class="pp-detail-meta">${pl.ratio} · ${pl.size}</div>
+      <div class="pp-detail-tags">${pl.tags.map(t => `<span class="t">${escape(t)}</span>`).join('')}</div>
+      <div class="pp-detail-block">
+        <div class="lbl">// 平台规格说明</div>
+        <div style="font-size:12px;color:var(--black-alpha-72);line-height:1.7;">${escape(pl.desc)}</div>
+      </div>
+      <div class="pp-detail-block">
+        <div class="lbl">// 历史使用 <span class="accent">${pl.uses}</span> 次</div>
+        <div class="pp-detail-uses">
+          ${[0,1,2,3].map(i => pl.uses > i ? `<div class="pdu" style="background:linear-gradient(135deg,#fff7ed,#ffedd5);"></div>` : `<div class="pdu empty">·</div>`).join('')}
+        </div>
+      </div>
+    `;
+  }
+}
+
+function renderPickerFooter() {
+  const c = $('pp-config');
+  if (pickerKind === 'white') {
+    c.innerHTML = `
+      <div class="pp-f-row">
+        <label>视角</label>
+        <div class="pillset" data-key="angles" data-multi="1">
+          <span class="p on" data-v="正">正面</span>
+          <span class="p on" data-v="侧">侧面</span>
+          <span class="p on" data-v="背">背面</span>
+        </div>
+      </div>
+      <div class="pp-f-row">
+        <label>背景</label>
+        <div class="pillset" data-key="bg">
+          <span class="p on" data-v="纯白">纯白</span>
+          <span class="p" data-v="浅灰">浅灰</span>
+          <span class="p" data-v="渐变">柔和渐变</span>
+        </div>
+      </div>
+    `;
+  } else if (pickerKind === 'model') {
+    c.innerHTML = `
+      <div class="pp-f-row">
+        <label>场景</label>
+        <div class="pillset" data-key="scene">
+          <span class="p on" data-v="室内自拍">室内自拍</span>
+          <span class="p" data-v="梳妆台">梳妆台</span>
+          <span class="p" data-v="户外清晨">户外清晨</span>
+          <span class="p" data-v="纯色背景">纯色背景</span>
+        </div>
+      </div>
+      <div class="pp-f-row">
+        <label>构图</label>
+        <div class="pillset" data-key="frame">
+          <span class="p on" data-v="半身">半身</span>
+          <span class="p" data-v="特写">特写</span>
+          <span class="p" data-v="全身">全身</span>
+        </div>
+      </div>
+    `;
+  } else if (pickerKind === 'platform') {
+    c.innerHTML = `
+      <div class="pp-f-row">
+        <label>类型</label>
+        <div class="pillset" data-key="ptype">
+          <span class="p on" data-v="主图">主图(1:1)</span>
+          <span class="p" data-v="详情头图">详情头图(750×1000)</span>
+          <span class="p" data-v="活动横幅">活动横幅(750×260)</span>
+        </div>
+      </div>
+      <div class="pp-f-row">
+        <label>风格</label>
+        <div class="pillset" data-key="pstyle">
+          <span class="p on" data-v="干净电商">干净电商</span>
+          <span class="p" data-v="种草风">种草风</span>
+          <span class="p" data-v="节日热闹">节日热闹</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+// pillset 切换
+document.addEventListener('click', e => {
+  const p = e.target.closest('.pillset .p');
+  if (!p) return;
+  const set = p.parentElement;
+  if (set.dataset.multi) {
+    p.classList.toggle('on');
+  } else {
+    set.querySelectorAll('.p').forEach(x => x.classList.remove('on'));
+    p.classList.add('on');
+  }
+});
+
+// 开始生成
+$('pp-go-btn').addEventListener('click', () => {
+  const p = current();
+  if (!p) return;
+  if (pickerKind === 'white') {
+    const angles = [...document.querySelectorAll('#pp-config .pillset[data-key="angles"] .p.on')].map(x => x.dataset.v);
+    if (!angles.length) return;
+    closePicker();
+    startGen(p, 'white', angles.map((a, i) => ({ name: `白底 · ${a}面`, meta: `512×512 · 刚刚`, color: i === 0 ? '#fafafa' : i === 1 ? '#f5f5f5' : '#f0f0f0' })));
+  } else if (pickerKind === 'model') {
+    if (!pickerSelectedId) return;
+    const m = MODELS.find(x => x.id === pickerSelectedId);
+    closePicker();
+    const palette = ['linear-gradient(135deg,#fcd5ce,#f8edeb)', 'linear-gradient(135deg,#cfe1b9,#e9edc9)', 'linear-gradient(135deg,#bee3f8,#c3dafe)', 'linear-gradient(135deg,#fde2e4,#fad2e1)'];
+    startGen(p, 'model', palette.map((color, i) => ({ name: `${m.name} · 0${i+1}`, meta: `${m.name} · 1024 · 刚刚`, color })));
+    m.uses = (m.uses || 0) + 1;
+  } else if (pickerKind === 'platform') {
+    if (!pickerSelectedId) return;
+    const pl = PLATFORMS.find(x => x.id === pickerSelectedId);
+    closePicker();
+    const palette = ['linear-gradient(135deg,#fff7ed,#ffedd5)', 'linear-gradient(135deg,#fef3c7,#fde68a)', 'linear-gradient(135deg,#ecfccb,#d9f99d)', 'linear-gradient(135deg,#cffafe,#a5f3fc)'];
+    startGen(p, 'platform', palette.map((color, i) => ({ name: `${pl.name} · 0${i+1}`, meta: `${pl.name} · 刚刚`, color })));
+    pl.uses = (pl.uses || 0) + 1;
+  }
+});
+
+function startGen(p, kind, cards) {
+  p.task = 'running';
+  const skeletons = cards.map((_, i) => ({ id: `sk-${Date.now()}-${i}`, kind, skeleton: true, name: '生成中', meta: 'pending' }));
+  p.assets = [...skeletons, ...p.assets];
+  renderList(); renderMain();
+  setTimeout(() => {
+    const newAssets = cards.map((c, i) => ({ id: `g-${Date.now()}-${i}`, kind, name: c.name, meta: c.meta, color: c.color }));
+    p.assets = p.assets.filter(a => !skeletons.find(s => s.id === a.id));
+    p.assets = [...newAssets, ...p.assets];
+    p.task = 'done';
+    renderList(); renderMain();
+    Shell.toast(`已生成 ${newAssets.length} 张`, p.name);
+    setTimeout(() => { if (p.task === 'done') { p.task = null; renderList(); } }, 3500);
+  }, 1500);
+}
+
+// 左侧顶部
+$('ws-new-btn').addEventListener('click', () => {
+  const id = 'new-' + Date.now().toString(36);
+  products.unshift({ id, draft: true, name: '', cat: '', price: '', target: '', sellPoints: [], photos: [], task: null, assets: [] });
+  currentId = id; isEditing = false;
+  renderAll();
+});
+$('ws-search-input').addEventListener('input', e => { listSearch = e.target.value.trim(); renderList(); });
+document.querySelectorAll('.ws-chip').forEach(c => {
+  c.addEventListener('click', () => {
+    document.querySelectorAll('.ws-chip').forEach(x => x.classList.toggle('on', x === c));
+    listFilter = c.dataset.filter;
+    renderList();
+  });
+});
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') closePicker();
+});
+
+function renderAll() { renderList(); renderMain(); }
+renderAll();
+</script>
+</body>
+</html>
diff --git a/v2/studio.html b/v2/studio.html
new file mode 100644
index 0000000..a6a116f
--- /dev/null
+++ b/v2/studio.html
@@ -0,0 +1,1634 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>商品工作台 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── 撑满 .content 的限制 ─── */
+  .content { max-width: none !important; padding: 0 !important; }
+  .content > .corner-mark { display: none; }
+
+  /* ─── 工作台 layout · 左商品列表 + 右工作区 ─── */
+  .ws {
+    display: grid;
+    grid-template-columns: 296px 1fr;
+    height: calc(100vh - 57px); /* 减去 topbar */
+    overflow: hidden;
+    background: var(--background-base);
+  }
+
+  /* ============= 左侧:商品列表 ============= */
+  .ws-list {
+    display: flex; flex-direction: column;
+    background: var(--surface);
+    border-right: 1px solid var(--border-faint);
+    overflow: hidden;
+  }
+  .ws-list-h {
+    padding: 18px 16px 14px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; flex-direction: column; gap: 10px;
+    flex-shrink: 0;
+  }
+  .ws-list-h .title {
+    display: flex; align-items: center; justify-content: space-between;
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--black-alpha-48); letter-spacing: .04em;
+  }
+  .ws-list-h .title .count { color: var(--heat); font-weight: 600; }
+  .ws-new-btn {
+    width: 100%; height: 36px;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    background: var(--heat); color: #fff;
+    border: 0; border-radius: var(--r-md);
+    font-size: 13px; font-weight: 500; cursor: pointer;
+    font-family: inherit;
+    box-shadow:
+      inset 0 -3px 6px rgba(250,93,25,.20),
+      0 1px 2px rgba(250,93,25,.12),
+      0 2px 4px rgba(250,93,25,.10);
+    transition: box-shadow var(--t-base);
+  }
+  .ws-new-btn:hover {
+    box-shadow:
+      inset 0 -3px 6px rgba(250,93,25,.20),
+      0 2px 4px rgba(250,93,25,.16),
+      0 4px 8px rgba(250,93,25,.20);
+  }
+  .ws-new-btn svg { width: 14px; height: 14px; }
+
+  .ws-search {
+    position: relative;
+    display: flex; align-items: center;
+  }
+  .ws-search svg {
+    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
+    width: 14px; height: 14px;
+    color: var(--black-alpha-48);
+    z-index: 2;
+    pointer-events: none;
+  }
+  .ws-search input {
+    width: 100%; height: 34px;
+    padding: 0 12px 0 34px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    font-size: 13px;
+    font-family: inherit;
+    color: var(--accent-black);
+    transition: border-color var(--t-base);
+  }
+  .ws-search input:focus {
+    outline: none;
+    border-color: var(--heat-40);
+    background: var(--surface);
+  }
+  .ws-search input::placeholder { color: var(--black-alpha-48); }
+
+  .ws-tabs {
+    display: flex; gap: 2px;
+    padding: 10px 14px 6px;
+    flex-shrink: 0;
+  }
+  .ws-tabs .ws-tab {
+    flex: 1;
+    height: 28px;
+    display: flex; align-items: center; justify-content: center; gap: 4px;
+    background: transparent; border: 0; border-radius: var(--r-md);
+    color: var(--black-alpha-56);
+    font-size: 12px; font-weight: 500;
+    font-family: inherit; cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .ws-tabs .ws-tab:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+  .ws-tabs .ws-tab.active { background: var(--heat-12); color: var(--heat); }
+  .ws-tabs .ws-tab .n {
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 0 5px; height: 16px;
+    display: inline-flex; align-items: center;
+    background: var(--background-lighter);
+    color: var(--black-alpha-48);
+    border-radius: 999px;
+    letter-spacing: .04em;
+  }
+  .ws-tabs .ws-tab.active .n { background: var(--heat); color: #fff; }
+
+  .ws-list-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 8px 16px;
+  }
+
+  /* 单个商品卡 */
+  .ws-prod {
+    display: grid;
+    grid-template-columns: 44px 1fr auto;
+    align-items: center;
+    gap: 11px;
+    padding: 10px 10px;
+    border-radius: var(--r-md);
+    cursor: pointer;
+    margin-bottom: 2px;
+    position: relative;
+    transition: background var(--t-base);
+  }
+  .ws-prod:hover { background: var(--black-alpha-4); }
+  .ws-prod.active { background: var(--heat-12); }
+  .ws-prod.active::before {
+    content: '';
+    position: absolute; left: 0; top: 8px; bottom: 8px;
+    width: 3px; border-radius: 0 2px 2px 0;
+    background: var(--heat);
+  }
+  .ws-prod-thumb {
+    width: 44px; height: 44px;
+    border-radius: var(--r-md);
+    background: var(--background-lighter);
+    background-size: cover; background-position: center;
+    flex-shrink: 0;
+  }
+  .ws-prod-info { min-width: 0; }
+  .ws-prod-name {
+    font-size: 13px; font-weight: 500;
+    color: var(--accent-black);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .ws-prod.active .ws-prod-name { color: var(--heat); font-weight: 600; }
+  .ws-prod-meta {
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+    margin-top: 2px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .ws-prod-side {
+    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
+  }
+  .ws-prod-count {
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 1px 6px; height: 16px;
+    display: inline-flex; align-items: center;
+    background: var(--background-lighter);
+    color: var(--black-alpha-56);
+    border: 1px solid var(--border-faint);
+    border-radius: 999px;
+    letter-spacing: .04em;
+  }
+  .ws-prod.active .ws-prod-count { background: var(--surface); color: var(--heat); border-color: var(--heat-20); }
+
+  /* 任务进度小角标 */
+  .ws-prod-task {
+    display: inline-flex; align-items: center; gap: 4px;
+    font-family: var(--font-mono); font-size: 9.5px;
+    letter-spacing: .04em;
+  }
+  .ws-prod-task .dot-mini {
+    width: 6px; height: 6px; border-radius: 999px;
+    flex-shrink: 0;
+  }
+  .ws-prod-task.running .dot-mini { background: var(--heat); animation: blink 1.4s ease-in-out infinite; }
+  .ws-prod-task.running { color: var(--heat); }
+  .ws-prod-task.done .dot-mini { background: var(--accent-forest); }
+  .ws-prod-task.done { color: var(--accent-forest); }
+  .ws-prod-task.failed .dot-mini { background: var(--accent-crimson); }
+  .ws-prod-task.failed { color: var(--accent-crimson); }
+  @keyframes blink {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: .5; transform: scale(.7); }
+  }
+
+  /* 草稿(新建未保存)样式 */
+  .ws-prod.draft .ws-prod-thumb {
+    background: var(--heat-8);
+    color: var(--heat);
+    display: grid; place-items: center;
+    border: 1px dashed var(--heat-40);
+  }
+  .ws-prod.draft .ws-prod-thumb svg { width: 18px; height: 18px; }
+  .ws-prod.draft .ws-prod-meta { color: var(--heat); }
+
+  .ws-list-foot {
+    padding: 10px 16px;
+    border-top: 1px solid var(--border-faint);
+    flex-shrink: 0;
+    display: flex; align-items: center; gap: 8px;
+    font-family: var(--font-mono); font-size: 10.5px;
+    color: var(--black-alpha-48);
+    letter-spacing: .02em;
+  }
+  .ws-list-foot strong { color: var(--accent-black); font-weight: 600; }
+  .ws-list-foot .accent { color: var(--heat); font-weight: 600; }
+
+  /* ============= 右侧:工作区 ============= */
+  .ws-main {
+    overflow-y: auto;
+    padding: 28px 36px 60px;
+  }
+  .ws-main-head {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    gap: 20px; margin-bottom: 24px;
+  }
+  .ws-main-head h1 {
+    font-size: 28px; font-weight: 500; color: var(--accent-black);
+    letter-spacing: -.02em; line-height: 1.2;
+  }
+  .ws-main-head .sub {
+    font-family: var(--font-mono); font-size: 12px;
+    color: var(--black-alpha-48); letter-spacing: .02em;
+    margin-top: 6px;
+  }
+  .ws-main-head .sub .accent { color: var(--heat); font-weight: 600; }
+  .ws-main-head .actions { display: flex; gap: 10px; flex-shrink: 0; }
+
+  /* ─── Onboarding tip ─── */
+  .onboard-tip {
+    background: var(--heat-8); border: 1px solid var(--heat-40);
+    border-radius: var(--r-md);
+    padding: 14px 18px;
+    margin-bottom: 22px;
+    display: flex; align-items: center; gap: 12px;
+    animation: slideIn .4s ease;
+  }
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateY(-6px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .onboard-tip .ic { width: 32px; height: 32px; background: var(--heat); color: #fff; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
+  .onboard-tip .ic svg { width: 16px; height: 16px; }
+  .onboard-tip .body { flex: 1; }
+  .onboard-tip .body .t { font-size: 13.5px; font-weight: 600; color: var(--accent-black); }
+  .onboard-tip .body .d { font-size: 12px; color: var(--black-alpha-72); margin-top: 3px; line-height: 1.5; }
+  .onboard-tip .body .d strong { color: var(--heat); font-weight: 600; }
+  .onboard-tip .acts { display: flex; gap: 6px; }
+  .onboard-tip .dismiss {
+    background: transparent; border: 0;
+    color: var(--black-alpha-56); font-size: 12px; cursor: pointer;
+    padding: 5px 10px; border-radius: var(--r-md);
+  }
+  .onboard-tip .dismiss:hover { background: var(--black-alpha-4); color: var(--accent-black); }
+
+  /* ─── 商品概览卡(信息 + 原图,继承 product-studio 样式) ─── */
+  .overview-card {
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 22px 24px;
+    margin-bottom: 24px;
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 28px;
+    transition: border-color var(--t-base);
+  }
+  .overview-card.editing { border-color: var(--heat-40); background: linear-gradient(180deg, var(--heat-4) 0%, var(--surface) 60px); }
+  .ov-display .ov-info-head {
+    display: flex; align-items: flex-start; gap: 14px;
+    margin-bottom: 12px;
+  }
+  .ov-display .ic {
+    width: 36px; height: 36px; background: var(--heat-12); color: var(--heat);
+    border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0;
+  }
+  .ov-display .ic svg { width: 17px; height: 17px; }
+  .ov-display .name { font-size: 16px; font-weight: 600; color: var(--accent-black); line-height: 1.3; }
+  .ov-display .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; margin-top: 4px; }
+  .ov-display .edit {
+    margin-left: auto;
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 30px; padding: 0 12px;
+    background: transparent; border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    color: var(--black-alpha-56); font-size: 12.5px; cursor: pointer;
+    font-family: inherit;
+    transition: all var(--t-base);
+  }
+  .ov-display .edit:hover { color: var(--heat); border-color: var(--heat-40); background: var(--heat-8); }
+  .ov-display .edit svg { width: 12px; height: 12px; }
+  .ov-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
+  .ov-tags .t {
+    font-size: 11.5px; padding: 3px 10px;
+    background: var(--background-lighter); color: var(--black-alpha-56);
+    border: 1px solid var(--border-faint); border-radius: var(--r-sm);
+  }
+  .ov-sell {
+    margin-top: 14px; padding-top: 14px;
+    border-top: 1px dashed var(--border-faint);
+    font-size: 12.5px; color: var(--black-alpha-72); line-height: 1.65;
+  }
+  .ov-sell .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; margin-right: 6px; }
+
+  .ov-photos { border-left: 1px dashed var(--border-faint); padding-left: 28px; }
+  .ov-photos-h {
+    display: flex; align-items: baseline; justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .ov-photos-h .t { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
+  .ov-photos-h .n { color: var(--heat); font-weight: 600; }
+  .ov-photos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
+  .overview-card.editing .ov-photos-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
+  .ov-photo {
+    aspect-ratio: 1; border-radius: var(--r-sm);
+    border: 1px solid var(--border-faint);
+    background: var(--background-lighter); background-size: cover; background-position: center;
+    position: relative; cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .ov-photo:hover { border-color: var(--heat-40); transform: scale(1.04); z-index: 1; }
+  .ov-photo .pmain {
+    position: absolute; top: 3px; left: 3px;
+    font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
+    padding: 1px 4px; background: var(--heat); color: #fff;
+    border-radius: 3px; letter-spacing: .04em;
+  }
+  .ov-photo.add {
+    border-style: dashed;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+  }
+  .ov-photo.add:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-8); }
+  .ov-photo.add svg { width: 14px; height: 14px; }
+  .overview-card.editing .ov-photo.empty-slot {
+    border-radius: var(--r-md); border-style: dashed; cursor: pointer;
+    display: grid; place-items: center;
+    color: var(--black-alpha-32);
+    font-size: 10.5px; font-family: var(--font-mono);
+  }
+  .overview-card.editing .ov-photo.empty-slot:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-8); }
+  .overview-card.editing .ov-photo.empty-slot.add-active { border-color: var(--heat-40); color: var(--heat); }
+  .overview-card.editing .ov-photo .photo-x {
+    position: absolute; top: 4px; right: 4px;
+    width: 20px; height: 20px; border-radius: 999px;
+    background: rgba(21,20,15,.72); color: #fff;
+    border: 0; cursor: pointer;
+    display: none; place-items: center;
+  }
+  .overview-card.editing .ov-photo:hover .photo-x { display: grid; }
+  .overview-card.editing .ov-photo .photo-x:hover { background: var(--accent-crimson); }
+  .overview-card.editing .ov-photo .photo-x svg { width: 10px; height: 10px; }
+  .overview-card.editing .ov-photo:hover .pmain { display: none; }
+
+  /* ─── 编辑表单 ─── */
+  .ov-edit { display: none; }
+  .overview-card.editing .ov-display { display: none; }
+  .overview-card.editing .ov-edit { display: block; }
+  .ov-edit .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
+  .ov-edit .field-label {
+    font-size: 12.5px; font-weight: 500; color: var(--black-alpha-72);
+    display: flex; align-items: center; gap: 6px;
+  }
+  .ov-edit .field-label .req { color: var(--accent-crimson); }
+  .ov-edit .field-label .opt {
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 1px 6px; background: var(--background-lighter);
+    color: var(--black-alpha-48); border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .ov-edit .input, .ov-edit .select { height: 34px; font-size: 13.5px; }
+  .ov-edit .ai-hint {
+    margin-top: 4px; padding: 8px 10px;
+    background: var(--heat-8); border: 1px dashed var(--heat-40);
+    border-radius: var(--r-md);
+    font-size: 11.5px; color: var(--black-alpha-72); line-height: 1.5;
+    display: flex; align-items: flex-start; gap: 6px;
+  }
+  .ov-edit .ai-hint svg { width: 11px; height: 11px; color: var(--heat); flex-shrink: 0; margin-top: 2px; }
+  .ov-edit .ai-hint strong { color: var(--heat); font-weight: 600; }
+  .ov-sell-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
+  .ov-sell-list li {
+    display: flex; align-items: center; gap: 8px;
+    padding: 7px 10px;
+    background: var(--background-lighter);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-md); font-size: 12.5px;
+  }
+  .ov-sell-list li.add { background: var(--surface); border-style: dashed; }
+  .ov-sell-list .num {
+    width: 18px; height: 18px;
+    background: var(--surface); border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    font-size: 10.5px; font-family: var(--font-mono);
+    color: var(--black-alpha-56);
+    display: grid; place-items: center; flex-shrink: 0;
+  }
+  .ov-sell-list li.add .num { background: transparent; color: var(--heat); border-color: var(--heat-40); }
+  .ov-sell-list .txt { flex: 1; min-width: 0; }
+  .ov-sell-list .bl-input { flex: 1; border: 0; background: transparent; font-size: 12.5px; padding: 0; font-family: inherit; color: var(--accent-black); }
+  .ov-sell-list .bl-input::placeholder { color: var(--black-alpha-48); }
+  .ov-sell-list .bl-x {
+    width: 20px; height: 20px;
+    display: grid; place-items: center;
+    color: var(--black-alpha-48); cursor: pointer;
+    background: transparent; border: 0;
+    opacity: 0; transition: opacity var(--t-base);
+  }
+  .ov-sell-list li:hover .bl-x { opacity: 1; }
+  .ov-sell-list .bl-x:hover { color: var(--accent-crimson); }
+  .ov-sell-list .bl-x svg { width: 10px; height: 10px; }
+
+  /* ─── 工具箱锁定 banner ─── */
+  .toolbox-lock {
+    background: var(--background-lighter);
+    border: 1px dashed var(--border-muted);
+    border-radius: var(--r-md);
+    padding: 14px 18px;
+    margin-bottom: 16px;
+    display: flex; align-items: center; gap: 12px;
+    font-size: 13px; color: var(--black-alpha-72);
+  }
+  .toolbox-lock .ic {
+    width: 32px; height: 32px;
+    background: var(--surface); border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    display: grid; place-items: center;
+    color: var(--black-alpha-56); flex-shrink: 0;
+  }
+  .toolbox-lock .ic svg { width: 15px; height: 15px; }
+  .toolbox-lock strong { color: var(--accent-black); font-weight: 600; }
+  .toolbox-lock .miss { color: var(--accent-crimson); }
+
+  /* ─── AI 工具箱 ─── */
+  .section-title {
+    display: flex; align-items: baseline; gap: 12px;
+    margin-bottom: 14px;
+  }
+  .section-title h2 { font-size: 15px; font-weight: 600; color: var(--accent-black); letter-spacing: -.01em; }
+  .section-title .sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; }
+
+  .toolbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; }
+  .tool-card {
+    background: var(--surface); border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 16px;
+    display: flex; flex-direction: column; gap: 10px;
+    cursor: pointer; position: relative;
+    min-height: 124px;
+    transition: all var(--t-base);
+  }
+  .tool-card:hover { border-color: var(--heat-40); background: var(--heat-4); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
+  .tool-card.featured { border-color: var(--heat-40); }
+  .tool-card.featured::after {
+    content: '推荐 ★';
+    position: absolute; top: 12px; right: 12px;
+    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
+    color: #fff; background: var(--heat);
+    padding: 2px 6px; border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .tool-card .ic-box {
+    width: 36px; height: 36px;
+    background: var(--heat-12); color: var(--heat);
+    border-radius: var(--r-md);
+    display: grid; place-items: center; flex-shrink: 0;
+  }
+  .tool-card .ic-box svg { width: 16px; height: 16px; }
+  .tool-card .info { flex: 1; }
+  .tool-card .info .t { font-size: 13px; font-weight: 600; color: var(--accent-black); line-height: 1.3; }
+  .tool-card .info .d { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); margin-top: 5px; letter-spacing: .02em; line-height: 1.45; }
+  .tool-card .foot {
+    display: flex; align-items: center; justify-content: space-between;
+    padding-top: 8px; border-top: 1px dashed var(--border-faint); margin-top: auto;
+  }
+  .tool-card .foot .cost { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .tool-card .foot .cost b { color: var(--heat); font-weight: 600; }
+  .tool-card .foot .arrow {
+    width: 22px; height: 22px; border-radius: var(--r-sm);
+    background: var(--background-lighter); color: var(--black-alpha-56);
+    display: grid; place-items: center;
+    transition: all var(--t-fast);
+  }
+  .tool-card:hover .foot .arrow { background: var(--heat); color: #fff; transform: translateX(2px); }
+  .tool-card .foot .arrow svg { width: 10px; height: 10px; }
+  .tool-card.coming-soon { opacity: .65; cursor: default; }
+  .tool-card.coming-soon:hover { border-color: var(--border-faint); background: var(--surface); transform: none; box-shadow: none; }
+  .tool-card.coming-soon .foot .arrow { display: none; }
+  .toolbox.locked .tool-card:not(.coming-soon) { opacity: .5; cursor: not-allowed; pointer-events: none; }
+
+  /* ─── 已生成资产 ─── */
+  .asset-section {
+    background: var(--surface); border: 1px solid var(--border-faint);
+    border-radius: var(--r-md);
+    padding: 20px 22px;
+  }
+  .asset-tabs {
+    display: flex; gap: 4px;
+    border-bottom: 1px solid var(--border-faint);
+    margin-bottom: 16px;
+  }
+  .asset-tab {
+    padding: 0 14px; height: 34px;
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 12.5px; font-weight: 500;
+    color: var(--black-alpha-56);
+    cursor: pointer; border: 0; background: transparent; position: relative;
+    font-family: inherit;
+    transition: color var(--t-base);
+  }
+  .asset-tab .count {
+    font-family: var(--font-mono); font-size: 10px;
+    padding: 1px 6px; background: var(--background-lighter);
+    color: var(--black-alpha-48); border-radius: var(--r-pill); letter-spacing: .04em;
+  }
+  .asset-tab:hover { color: var(--accent-black); }
+  .asset-tab.active { color: var(--accent-black); }
+  .asset-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--heat); }
+  .asset-tab.active .count { color: var(--heat); background: var(--heat-12); }
+  .asset-grid {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
+  }
+  .asset-it {
+    position: relative; border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    overflow: hidden; background: var(--background-lighter); cursor: pointer;
+    transition: all var(--t-base);
+  }
+  .asset-it:hover { border-color: var(--heat-40); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
+  .asset-it .a-thumb { aspect-ratio: 1; background-size: cover; background-position: center; position: relative; }
+  .asset-it .a-thumb.skeleton {
+    background: linear-gradient(110deg, var(--background-lighter) 8%, var(--black-alpha-4) 18%, var(--background-lighter) 33%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s linear infinite;
+    display: grid; place-items: center;
+    color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
+  }
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  .asset-it .a-tag {
+    position: absolute; top: 6px; left: 6px;
+    font-family: var(--font-mono); font-size: 9.5px;
+    padding: 2px 6px;
+    background: rgba(255,255,255,.92); color: var(--black-alpha-72);
+    border-radius: var(--r-sm); letter-spacing: .04em;
+  }
+  .asset-it .a-body { padding: 9px 11px; border-top: 1px solid var(--border-faint); background: var(--surface); }
+  .asset-it .a-name { font-size: 12px; font-weight: 500; color: var(--accent-black); }
+  .asset-it .a-meta { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
+  .asset-empty {
+    grid-column: 1 / -1; text-align: center; padding: 36px 0;
+    color: var(--black-alpha-48); font-size: 13px;
+  }
+  .asset-empty .ic-empty {
+    width: 40px; height: 40px; margin: 0 auto 10px;
+    background: var(--background-lighter); border: 1px solid var(--border-faint);
+    border-radius: var(--r-md); display: grid; place-items: center;
+    color: var(--black-alpha-48);
+  }
+  .asset-empty .ic-empty svg { width: 18px; height: 18px; }
+  .asset-empty .t { font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 3px; }
+  .asset-empty .d { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
+
+  /* ─── 弹窗(白底/模特/平台 picker) ─── */
+  .picker-bg {
+    position: fixed; inset: 0;
+    background: rgba(21,20,15,.42);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 1000;
+    display: none; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity .2s;
+  }
+  .picker-bg.show { display: flex; opacity: 1; }
+  .picker {
+    background: var(--surface);
+    border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    max-width: 680px; width: 92%;
+    max-height: calc(100vh - 80px);
+    display: flex; flex-direction: column;
+    position: relative;
+    transform: scale(.96);
+    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .picker-bg.show .picker { transform: scale(1); }
+  .picker-h {
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 12px;
+    flex-shrink: 0;
+  }
+  .picker-h .ic { width: 32px; height: 32px; background: var(--heat-12); color: var(--heat); border-radius: var(--r-md); display: grid; place-items: center; }
+  .picker-h .ic svg { width: 16px; height: 16px; }
+  .picker-h .ti { flex: 1; }
+  .picker-h .ti .t { font-size: 15px; font-weight: 600; color: var(--accent-black); }
+  .picker-h .ti .d { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 3px; letter-spacing: .04em; }
+  .picker-h .x { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--black-alpha-56); cursor: pointer; background: transparent; border: 0; }
+  .picker-h .x:hover { background: var(--black-alpha-4); color: var(--accent-crimson); }
+  .picker-h .x svg { width: 13px; height: 13px; }
+  .picker-b { padding: 20px 24px; flex: 1; overflow-y: auto; min-height: 0; }
+  .picker-f {
+    padding: 14px 22px;
+    border-top: 1px solid var(--border-faint);
+    display: flex; align-items: center; gap: 10px;
+    background: var(--background-lighter);
+    flex-shrink: 0;
+  }
+  .picker-f .meta { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
+  .picker-f .meta .accent { color: var(--heat); font-weight: 600; }
+  .opt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+  .opt-card {
+    border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    padding: 10px; cursor: pointer; background: var(--surface);
+    transition: all var(--t-base);
+  }
+  .opt-card:hover { border-color: var(--heat-40); background: var(--heat-4); }
+  .opt-card.selected { border-color: var(--heat); background: var(--heat-8); }
+  .opt-card .opt-thumb {
+    aspect-ratio: 1; background: var(--background-lighter);
+    border-radius: var(--r-sm); display: grid; place-items: center;
+    color: var(--black-alpha-48);
+    font-family: var(--font-mono); font-size: 11px;
+    margin-bottom: 8px; overflow: hidden;
+  }
+  .opt-card.selected .opt-thumb { background: var(--heat-12); color: var(--heat); }
+  .opt-card .opt-name { font-size: 12px; font-weight: 500; color: var(--accent-black); }
+  .opt-card .opt-meta { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
+  .opt-card.selected .opt-name { color: var(--heat); }
+  .opt-config { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-faint); }
+  .opt-config-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 13px; }
+  .opt-config-row > label { width: 80px; color: var(--black-alpha-72); }
+  .opt-config-row .val { color: var(--accent-black); }
+  .opt-config-row .pillset { display: flex; gap: 6px; }
+  .opt-config-row .pillset .p {
+    padding: 4px 10px; border: 1px solid var(--border-faint); border-radius: var(--r-md);
+    background: var(--surface); font-size: 11.5px; color: var(--black-alpha-56);
+    cursor: pointer; transition: all var(--t-base);
+  }
+  .opt-config-row .pillset .p:hover { color: var(--accent-black); border-color: var(--black-alpha-24); }
+  .opt-config-row .pillset .p.on { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="ws">
+  <!-- ════════ 左侧:商品列表 ════════ -->
+  <aside class="ws-list">
+    <div class="ws-list-h">
+      <div class="title">
+        <span>// 商品库 · <span class="count" id="ws-count">7</span> 个</span>
+        <span>// MCN · 老张的店</span>
+      </div>
+      <button class="ws-new-btn" id="ws-new-btn">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 5v14M5 12h14"/></svg>
+        新建商品
+      </button>
+      <div class="ws-search">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        <input id="ws-search-input" placeholder="搜索商品名 / 品类" />
+      </div>
+    </div>
+
+    <div class="ws-tabs">
+      <button class="ws-tab active" data-filter="all">全部 <span class="n" id="t-all">7</span></button>
+      <button class="ws-tab" data-filter="running">生成中 <span class="n" id="t-run">1</span></button>
+      <button class="ws-tab" data-filter="draft">草稿 <span class="n" id="t-draft">0</span></button>
+    </div>
+
+    <div class="ws-list-body" id="ws-list-body"></div>
+
+    <div class="ws-list-foot">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+      <span><span class="accent" id="foot-running">1</span> 个任务运行中</span>
+    </div>
+  </aside>
+
+  <!-- ════════ 右侧:工作区 ════════ -->
+  <main class="ws-main" id="ws-main"></main>
+</div>
+
+</div>
+
+<!-- ════════ 弹窗 ════════ -->
+<div class="picker-bg" id="white-picker-bg" onclick="if(event.target===this)closePicker('white')">
+  <div class="picker" style="max-width: 460px;">
+    <div class="picker-h">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg></div>
+      <div class="ti"><div class="t">生成白底三视图</div><div class="d" id="white-prod-name">// 透真补水面膜</div></div>
+      <button class="x" onclick="closePicker('white')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="picker-b">
+      <div style="font-size:13px;color:var(--black-alpha-72);line-height:1.7;margin-bottom:14px;">
+        AI 会以「主图」为基准,自动去白底 + 重打光 + 推算另外两个视角。
+      </div>
+      <div class="opt-config" style="margin-top:0;padding-top:0;border:0;">
+        <div class="opt-config-row">
+          <label>视角</label>
+          <div class="pillset" data-key="angles">
+            <span class="p on" data-v="正">正面</span>
+            <span class="p on" data-v="侧">侧面</span>
+            <span class="p on" data-v="背">背面</span>
+          </div>
+        </div>
+        <div class="opt-config-row">
+          <label>背景</label>
+          <div class="pillset" data-key="bg">
+            <span class="p on" data-v="纯白">纯白</span>
+            <span class="p" data-v="浅灰">浅灰</span>
+            <span class="p" data-v="渐变">柔和渐变</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="picker-f">
+      <span class="meta">// 预计 18 秒 · <span class="accent">¥1.6</span></span>
+      <button class="btn" onclick="closePicker('white')">取消</button>
+      <button class="btn btn-primary" id="white-go-btn">开始生成</button>
+    </div>
+  </div>
+</div>
+
+<div class="picker-bg" id="model-picker-bg" onclick="if(event.target===this)closePicker('model')">
+  <div class="picker">
+    <div class="picker-h">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2"/></svg></div>
+      <div class="ti"><div class="t">选择模特</div><div class="d" id="model-prod-name">// 8 位模特 · 每次 4 张</div></div>
+      <button class="x" onclick="closePicker('model')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="picker-b">
+      <div class="opt-grid" id="model-grid"></div>
+    </div>
+    <div class="picker-f">
+      <span class="meta">// 预计 35 秒 · <span class="accent">¥3.2</span> · 失败不扣费</span>
+      <button class="btn" onclick="closePicker('model')">取消</button>
+      <button class="btn btn-primary" id="model-go-btn" disabled>开始生成</button>
+    </div>
+  </div>
+</div>
+
+<div class="picker-bg" id="platform-picker-bg" onclick="if(event.target===this)closePicker('platform')">
+  <div class="picker">
+    <div class="picker-h">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
+      <div class="ti"><div class="t">选择平台</div><div class="d" id="platform-prod-name">// 每平台 4 张</div></div>
+      <button class="x" onclick="closePicker('platform')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
+    </div>
+    <div class="picker-b">
+      <div class="opt-grid" id="platform-grid"></div>
+    </div>
+    <div class="picker-f">
+      <span class="meta">// 预计 28 秒 · <span class="accent">¥2.4</span> · 失败不扣费</span>
+      <button class="btn" onclick="closePicker('platform')">取消</button>
+      <button class="btn btn-primary" id="platform-go-btn" disabled>开始生成</button>
+    </div>
+  </div>
+</div>
+
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'products',
+  crumbs: [{ label: '工作台', href: 'index.html' }, { label: '商品工作台' }]
+});
+// 弹窗提到 body 末尾,脱离 main stacking
+['white-picker-bg', 'model-picker-bg', 'platform-picker-bg'].forEach(id => {
+  const el = document.getElementById(id);
+  if (el && el.parentElement !== document.body) document.body.appendChild(el);
+});
+
+// ════════════════════════════════════════════════════════
+//  Data
+// ════════════════════════════════════════════════════════
+const PALETTE = [
+  'linear-gradient(135deg,#fde2c6,#ffd0a8)',
+  'linear-gradient(135deg,#dceafe,#c3e0fe)',
+  'linear-gradient(135deg,#fbcfe8,#fce7f3)',
+  'linear-gradient(135deg,#dcfce7,#bbf7d0)',
+  'linear-gradient(135deg,#fef3c7,#fde68a)',
+];
+
+// 7 个商品 + 各自的 state
+const products = [
+  {
+    id: 'p1',
+    name: '透真玻尿酸补水面膜', cat: '美妆个护', price: '39.9',
+    target: '22-32 岁女性、敏感肌、办公室通勤',
+    sellPoints: ['玻尿酸双效保湿', '4 小时持久水润', '敏感肌可用', '通勤补水', '平价代替'],
+    photos: [
+      { id: 'p1-1', bg: PALETTE[0], label: '主图' },
+      { id: 'p1-2', bg: PALETTE[1], label: '包装' },
+      { id: 'p1-3', bg: PALETTE[4], label: '质地' },
+    ],
+    task: 'running', // 任务进度状态
+    assets: [
+      { id: 'a1', kind: 'white',    name: '白底 · 正面', meta: '512×512 · 5/19', color: '#f4f4f4' },
+      { id: 'a2', kind: 'white',    name: '白底 · 侧面', meta: '512×512 · 5/19', color: '#f0f0f0' },
+      { id: 'a3', kind: 'white',    name: '白底 · 背面', meta: '512×512 · 5/19', color: '#eeeeee' },
+      { id: 'a4', kind: 'model',    name: '林夕 · 01', meta: '林夕 · 1024 · 5/19', color: 'linear-gradient(135deg,#ffe0b2,#ffccbc)' },
+      { id: 'a5', kind: 'model',    name: '林夕 · 02', meta: '林夕 · 1024 · 5/19', color: 'linear-gradient(135deg,#fde2c6,#ffbcaa)' },
+      { id: 'a6', kind: 'model',    name: '林夕 · 03', meta: '林夕 · 1024 · 5/19', color: 'linear-gradient(135deg,#fbcfe8,#fce7f3)' },
+      { id: 'a7', kind: 'model',    name: '林夕 · 04', meta: '林夕 · 1024 · 5/19', color: 'linear-gradient(135deg,#f3e8ff,#fae8ff)' },
+      { id: 'a8', kind: 'platform', name: '淘宝 · 01', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#fff1f0,#ffd6cc)' },
+      { id: 'a9', kind: 'platform', name: '淘宝 · 02', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#fef3c7,#fde68a)' },
+      { id: 'a10', kind: 'platform', name: '淘宝 · 03', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#dcfce7,#bbf7d0)' },
+      { id: 'a11', kind: 'platform', name: '淘宝 · 04', meta: '800×800 · 5/19', color: 'linear-gradient(135deg,#dbeafe,#bfdbfe)' },
+      { id: 'sk1', kind: 'model', skeleton: true, name: '生成中', meta: 'pending', color: '' },
+    ],
+  },
+  {
+    id: 'p2',
+    name: '南卡 Lite Pro 蓝牙耳机', cat: '数码 3C', price: '199',
+    target: '通勤族 · 学生 · 运动爱好者',
+    sellPoints: ['通话降噪', '续航 25 小时', '蓝牙 5.3', '人体工学'],
+    photos: [
+      { id: 'p2-1', bg: 'linear-gradient(135deg,#e0e7ff,#c7d2fe)', label: '主图' },
+      { id: 'p2-2', bg: 'linear-gradient(135deg,#cffafe,#a5f3fc)', label: '细节' },
+    ],
+    task: 'done',
+    assets: [
+      { id: 'b1', kind: 'white', name: '白底 · 正面', meta: '512×512', color: '#f4f4f4' },
+      { id: 'b2', kind: 'white', name: '白底 · 侧面', meta: '512×512', color: '#f0f0f0' },
+      { id: 'b3', kind: 'platform', name: '抖店 · 01', meta: '750×1000', color: 'linear-gradient(135deg,#fef3c7,#fde68a)' },
+    ],
+  },
+  {
+    id: 'p3',
+    name: '滋啦速食牛肉面 6 桶装', cat: '食品饮料', price: '49.9',
+    target: '加班党 · 独居青年',
+    sellPoints: ['正宗川味', '加班 5 分钟搞定', '料包足', '麻辣鲜香'],
+    photos: [
+      { id: 'p3-1', bg: 'linear-gradient(135deg,#fed7aa,#fdba74)', label: '主图' },
+    ],
+    task: null,
+    assets: [],
+  },
+  {
+    id: 'p4',
+    name: '透真清透物理防晒霜', cat: '美妆个护', price: '69',
+    target: '通勤女性 · 敏感肌',
+    sellPoints: ['SPF50+', '物理防晒', '不闷痘', '无负担'],
+    photos: [
+      { id: 'p4-1', bg: 'linear-gradient(135deg,#fef9c3,#fef08a)', label: '主图' },
+      { id: 'p4-2', bg: 'linear-gradient(135deg,#fed7aa,#fdba74)', label: '使用图' },
+    ],
+    task: null,
+    assets: [
+      { id: 'c1', kind: 'white', name: '白底 · 正面', meta: '512×512', color: '#f4f4f4' },
+      { id: 'c2', kind: 'model', name: '小苏 · 01', meta: '小苏 · 1024', color: 'linear-gradient(135deg,#fcd5ce,#f8edeb)' },
+      { id: 'c3', kind: 'model', name: '小苏 · 02', meta: '小苏 · 1024', color: 'linear-gradient(135deg,#cfe1b9,#e9edc9)' },
+    ],
+  },
+  {
+    id: 'p5',
+    name: '三顿半同款冻干咖啡粉', cat: '食品饮料', price: '89',
+    target: '早八党 · 咖啡爱好者',
+    sellPoints: ['3 秒速溶', '冷热皆宜', '24 颗装', '原产地豆'],
+    photos: [
+      { id: 'p5-1', bg: 'linear-gradient(135deg,#d6d3d1,#a8a29e)', label: '主图' },
+    ],
+    task: 'failed',
+    assets: [
+      { id: 'd1', kind: 'white', name: '白底 · 正面', meta: '512×512 · failed', color: '#fef2f2' },
+    ],
+  },
+  {
+    id: 'p6',
+    name: '小熊 4L 可视空气炸锅', cat: '家居家电', price: '159',
+    target: '小户型 · 健康人群',
+    sellPoints: ['可视玻璃', '4L 大容量', '少油健康', '6 大模式'],
+    photos: [
+      { id: 'p6-1', bg: 'linear-gradient(135deg,#fef2f2,#fecaca)', label: '主图' },
+    ],
+    task: null,
+    assets: [],
+  },
+  {
+    id: 'p7',
+    name: '露露同款裸感瑜伽裤', cat: '运动户外', price: '119',
+    target: '健身爱好者 · 通勤女性',
+    sellPoints: ['裸感无痕', '高弹力', '吸湿排汗', '修身显瘦'],
+    photos: [
+      { id: 'p7-1', bg: 'linear-gradient(135deg,#1f2937,#374151)', label: '主图' },
+      { id: 'p7-2', bg: 'linear-gradient(135deg,#4b5563,#6b7280)', label: '穿着' },
+    ],
+    task: null,
+    assets: [
+      { id: 'e1', kind: 'model', name: '阿强 · 01', meta: '阿强 · 1024', color: 'linear-gradient(135deg,#bee3f8,#c3dafe)' },
+    ],
+  },
+];
+
+const MODELS = [
+  { id: 'm1', name: '林夕', meta: '女 · 25 · 都市白领' },
+  { id: 'm2', name: '小苏', meta: '女 · 23 · 文艺学生' },
+  { id: 'm3', name: '阿楠', meta: '女 · 28 · 同事型' },
+  { id: 'm4', name: '小七', meta: '女 · 20 · 学生' },
+  { id: 'm5', name: '王姐', meta: '女 · 38 · 居家' },
+  { id: 'm6', name: '阿杰', meta: '男 · 30 · 都市' },
+  { id: 'm7', name: '阿强', meta: '男 · 26 · 健身' },
+  { id: 'm8', name: '+ 自定义', meta: '上传自有模特', custom: true },
+];
+const PLATFORMS = [
+  { id: 'pl1', name: '淘宝 / 天猫', meta: '1:1 · 800×800' },
+  { id: 'pl2', name: '抖店', meta: '3:4 · 750×1000' },
+  { id: 'pl3', name: '拼多多', meta: '1:1 · 800×800' },
+  { id: 'pl4', name: '京东', meta: '1:1 · 800×800' },
+  { id: 'pl5', name: '小红书', meta: '3:4 · 600×800' },
+  { id: 'pl6', name: '1688', meta: '1:1 · 750×750' },
+];
+
+// ════════════════════════════════════════════════════════
+//  State
+// ════════════════════════════════════════════════════════
+let currentId = 'p1';
+let isEditing = false;
+let pickerState = {
+  white: { angles: ['正','侧','背'], bg: '纯白' },
+  model: { selected: '' },
+  platform: { selected: '' },
+};
+let listFilter = 'all';
+let listSearch = '';
+
+const $ = id => document.getElementById(id);
+
+function current() { return products.find(p => p.id === currentId); }
+
+// ════════════════════════════════════════════════════════
+//  渲染:左侧商品列表
+// ════════════════════════════════════════════════════════
+function renderList() {
+  const body = $('ws-list-body');
+  const q = listSearch.toLowerCase();
+  const filtered = products.filter(p => {
+    if (listFilter === 'running' && p.task !== 'running') return false;
+    if (listFilter === 'draft' && !p.draft) return false;
+    if (q) {
+      const hay = `${p.name} ${p.cat}`.toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    return true;
+  });
+
+  body.innerHTML = filtered.map(p => {
+    const isActive = p.id === currentId;
+    const isDraft = p.draft;
+    const assetCount = p.assets ? p.assets.filter(a => !a.skeleton).length : 0;
+    const taskEl = p.task ? `
+      <span class="ws-prod-task ${p.task}">
+        <span class="dot-mini"></span>
+        ${p.task === 'running' ? '生成中' : p.task === 'done' ? '完成' : '失败'}
+      </span>` : '';
+
+    if (isDraft) {
+      return `
+        <div class="ws-prod draft ${isActive?'active':''}" data-id="${p.id}">
+          <div class="ws-prod-thumb">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
+          </div>
+          <div class="ws-prod-info">
+            <div class="ws-prod-name">${p.name || '未命名商品'}</div>
+            <div class="ws-prod-meta">// 草稿 · 未保存</div>
+          </div>
+          <div class="ws-prod-side"></div>
+        </div>`;
+    }
+
+    return `
+      <div class="ws-prod ${isActive?'active':''}" data-id="${p.id}">
+        <div class="ws-prod-thumb" style="background:${(p.photos[0]||{}).bg||''}"></div>
+        <div class="ws-prod-info">
+          <div class="ws-prod-name">${escape(p.name)}</div>
+          <div class="ws-prod-meta">${escape(p.cat)} · ¥${p.price}</div>
+        </div>
+        <div class="ws-prod-side">
+          <span class="ws-prod-count">${assetCount}</span>
+          ${taskEl}
+        </div>
+      </div>
+    `;
+  }).join('');
+
+  body.querySelectorAll('.ws-prod').forEach(el => {
+    el.addEventListener('click', () => {
+      currentId = el.dataset.id;
+      isEditing = false;
+      renderAll();
+    });
+  });
+
+  // 计数
+  $('ws-count').textContent = products.filter(p => !p.draft).length;
+  $('t-all').textContent = products.length;
+  $('t-run').textContent = products.filter(p => p.task === 'running').length;
+  $('t-draft').textContent = products.filter(p => p.draft).length;
+  $('foot-running').textContent = products.filter(p => p.task === 'running').length;
+}
+
+function escape(s) {
+  return String(s||'').replace(/[<>&"]/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;' })[c]);
+}
+
+// ════════════════════════════════════════════════════════
+//  渲染:右侧工作区
+// ════════════════════════════════════════════════════════
+function renderMain() {
+  const p = current();
+  if (!p) {
+    $('ws-main').innerHTML = `<div style="text-align:center;padding:80px 0;color:var(--black-alpha-48);">// 未选中商品</div>`;
+    return;
+  }
+
+  const isFresh = !!p.draft && !p.savedOnce;
+  const canTools = p.name && p.cat && p.photos.length > 0;
+  const assetCount = p.assets ? p.assets.filter(a => !a.skeleton).length : 0;
+
+  // 头部
+  const headHtml = isFresh ? `
+    <div class="ws-main-head">
+      <div>
+        <h1>新建商品</h1>
+        <div class="sub">// 填写基本信息 + 上传原图 · 保存后解锁 AI 工具</div>
+      </div>
+      <div class="actions">
+        <button class="btn" id="cancel-new">放弃</button>
+        <button class="btn btn-primary" id="save-new" ${canTools?'':'disabled'}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+          保存并解锁工具
+        </button>
+      </div>
+    </div>
+  ` : `
+    <div class="ws-main-head">
+      <div>
+        <h1>${escape(p.name)}</h1>
+        <div class="sub">// 已生成 <span class="accent">${assetCount}</span> 张资产 · ${escape(p.cat)} · ¥${p.price}</div>
+      </div>
+      <div class="actions">
+        <a class="btn btn-primary" href="projects-new.html">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg>
+          创建视频项目
+        </a>
+      </div>
+    </div>
+  `;
+
+  // Onboarding
+  const onboardHtml = p.showOnboard ? `
+    <div class="onboard-tip">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg></div>
+      <div class="body">
+        <div class="t">商品已建档 · 推荐先生成白底三视图</div>
+        <div class="d">AI 以「主图」生成正/侧/背 3 张白底图,<strong>Seedance 视频效果 +60%</strong>。约 18 秒、¥1.6 · 失败不扣费</div>
+      </div>
+      <div class="acts">
+        <button class="dismiss" id="dismiss-onboard">稍后</button>
+        <button class="btn btn-primary" id="goto-white">现在生成</button>
+      </div>
+    </div>
+  ` : '';
+
+  // 概览卡
+  const overviewHtml = isFresh ? renderOverviewEdit(p) : renderOverviewDisplay(p);
+
+  // 工具箱锁定 banner
+  const lockHtml = canTools ? '' : `
+    <div class="toolbox-lock">
+      <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+      <div style="flex:1;">
+        <strong>完成基本信息后解锁工具箱</strong>
+        <div style="font-family:var(--font-mono);font-size:10.5px;color:var(--black-alpha-48);margin-top:3px;letter-spacing:.02em;">// 还差:<span class="miss">${[
+          !p.name && '商品名',
+          !p.cat && '品类',
+          p.photos.length === 0 && '≥1 张图',
+        ].filter(Boolean).join(' / ')}</span></div>
+      </div>
+    </div>
+  `;
+
+  // 工具箱
+  const toolboxHtml = `
+    <div class="section-title">
+      <h2>AI 工具箱</h2>
+      <span class="sub">// 按需调用 · 失败不扣费</span>
+    </div>
+    ${lockHtml}
+    <div class="toolbox ${canTools?'':'locked'}" id="toolbox">
+      <div class="tool-card featured" data-tool="white">
+        <div class="ic-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg></div>
+        <div class="info">
+          <div class="t">白底三视图</div>
+          <div class="d">正/侧/背 · Seedance +60%</div>
+        </div>
+        <div class="foot"><span class="cost">~18s · <b>¥1.6</b></span><span class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span></div>
+      </div>
+      <div class="tool-card" data-tool="model">
+        <div class="ic-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2"/></svg></div>
+        <div class="info">
+          <div class="t">AI 模特上身图</div>
+          <div class="d">8 模特库 · 每次 4 张</div>
+        </div>
+        <div class="foot"><span class="cost">~35s · <b>¥3.2</b></span><span class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span></div>
+      </div>
+      <div class="tool-card" data-tool="platform">
+        <div class="ic-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
+        <div class="info">
+          <div class="t">平台套图</div>
+          <div class="d">6 平台规格 · 每平台 4 张</div>
+        </div>
+        <div class="foot"><span class="cost">~28s · <b>¥2.4</b></span><span class="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span></div>
+      </div>
+      <div class="tool-card coming-soon">
+        <div class="ic-box" style="background:var(--background-lighter);color:var(--black-alpha-48);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 3"/></svg></div>
+        <div class="info">
+          <div class="t" style="color:var(--black-alpha-72);">更多工具</div>
+          <div class="d">海报 / 详情页插画</div>
+        </div>
+        <div class="foot"><span class="cost" style="font-style:italic;">即将上线</span></div>
+      </div>
+    </div>
+  `;
+
+  // 已生成资产
+  const assetsHtml = renderAssetsSection(p);
+
+  $('ws-main').innerHTML = headHtml + onboardHtml + overviewHtml + toolboxHtml + assetsHtml;
+  bindMainHandlers(p);
+}
+
+function renderOverviewDisplay(p) {
+  const tags = p.sellPoints.slice(0, 5);
+  return `
+    <div class="overview-card ${isEditing?'editing':''}" id="overview-card">
+      <div>
+        <div class="ov-display" id="ov-display">
+          <div class="ov-info-head">
+            <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg></div>
+            <div style="flex:1;min-width:0;">
+              <div class="name">${escape(p.name)}</div>
+              <div class="meta">[ ${escape(p.cat)} ] · ¥${p.price} · ${escape(p.target||'')}</div>
+            </div>
+            <button class="edit" id="start-edit">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+              编辑
+            </button>
+          </div>
+          ${tags.length ? `<div class="ov-tags">${tags.map(t => `<span class="t">${escape(t)}</span>`).join('')}</div>` : ''}
+          ${p.sellPoints.length ? `<div class="ov-sell"><span class="lbl">// 卖点</span>${p.sellPoints.map(escape).join(' · ')}</div>` : ''}
+        </div>
+        ${isEditing ? renderEditFormFields(p) : ''}
+      </div>
+      ${renderPhotosBlock(p)}
+    </div>
+  `;
+}
+
+function renderOverviewEdit(p) {
+  return `
+    <div class="overview-card editing" id="overview-card">
+      <div>
+        <div class="ov-edit" style="display:block;">
+          ${renderEditFormFields(p)}
+        </div>
+      </div>
+      ${renderPhotosBlock(p)}
+    </div>
+  `;
+}
+
+function renderEditFormFields(p) {
+  const sellHtml = p.sellPoints.map((pt, i) => `
+    <li><span class="num">${i+1}</span><span class="txt">${escape(pt)}</span><button class="bl-x" type="button" data-i="${i}"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg></button></li>
+  `).join('');
+  return `
+    <div class="ov-edit" style="display:block;">
+      <div class="field">
+        <label class="field-label">商品名称 <span class="req">*</span></label>
+        <input class="input" id="e-name" value="${escape(p.name)}" placeholder="例: 透真玻尿酸补水面膜">
+      </div>
+      <div class="field" style="display:grid;grid-template-columns:1.5fr 1fr;gap:10px;">
+        <div>
+          <label class="field-label">品类 <span class="req">*</span></label>
+          <select class="select" id="e-cat">
+            <option value="">— 选择 —</option>
+            ${['美妆个护','服饰内衣','食品饮料','家居家电','数码 3C','个护清洁','运动户外','母婴亲子'].map(c => `<option ${c===p.cat?'selected':''}>${c}</option>`).join('')}
+          </select>
+        </div>
+        <div>
+          <label class="field-label">价格 <span class="opt">选填</span></label>
+          <input class="input" id="e-price" type="number" value="${escape(p.price)}" placeholder="¥">
+        </div>
+      </div>
+      <div class="field">
+        <label class="field-label">目标人群 <span class="opt">选填</span></label>
+        <input class="input" id="e-target" value="${escape(p.target||'')}" placeholder="例: 22-32 岁女性、敏感肌">
+      </div>
+      <div class="field" style="margin-bottom:10px;">
+        <label class="field-label">核心卖点 <span class="opt">选填 · 推荐</span></label>
+        <ul class="ov-sell-list" id="e-sell-list">
+          ${sellHtml}
+          <li class="add"><span class="num">+</span><input class="bl-input" id="e-sell-input" placeholder="回车添加 · 例: 玻尿酸双效保湿"></li>
+        </ul>
+        <div class="ai-hint">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z"/></svg>
+          <span>填上 <strong>卖点</strong> 和 <strong>人群</strong>,后续 AI 生脚本(痛点种草/剧情带货)的质量明显更高。</span>
+        </div>
+      </div>
+      ${!p.draft ? `
+        <div style="display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px dashed var(--border-faint);">
+          <span style="flex:1;font-family:var(--font-mono);font-size:11px;color:var(--black-alpha-48);">// 编辑模式</span>
+          <button class="btn" id="cancel-edit">取消</button>
+          <button class="btn btn-primary" id="save-edit">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
+            保存修改
+          </button>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+function renderPhotosBlock(p) {
+  const isEdit = isEditing || (p.draft && !p.savedOnce);
+  const MAX = 5;
+  let slots = '';
+
+  if (isEdit) {
+    for (let i = 0; i < MAX; i++) {
+      const ph = p.photos[i];
+      if (ph) {
+        slots += `<div class="ov-photo" style="background:${ph.bg};background-size:cover;background-position:center;">
+          ${i===0?'<span class="pmain">MAIN</span>':''}
+          <button class="photo-x" data-i="${i}" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
+        </div>`;
+      } else if (i === p.photos.length) {
+        slots += `<div class="ov-photo empty-slot add-active" data-add-photo>+ 上传</div>`;
+      } else {
+        slots += `<div class="ov-photo empty-slot" style="opacity:.55;"></div>`;
+      }
+    }
+  } else {
+    p.photos.forEach((ph, i) => {
+      slots += `<div class="ov-photo" style="background:${ph.bg};background-size:cover;background-position:center;">
+        ${i===0?'<span class="pmain">MAIN</span>':''}
+      </div>`;
+    });
+    if (p.photos.length < MAX) {
+      slots += `<div class="ov-photo add" data-start-edit><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg></div>`;
+    }
+  }
+
+  return `
+    <div class="ov-photos">
+      <div class="ov-photos-h">
+        <span class="t">原图册 · <span class="n">${p.photos.length}</span> / ${MAX}</span>
+        <span class="t" style="color:var(--black-alpha-32);">JPG / PNG · ≤ 5MB</span>
+      </div>
+      <div class="ov-photos-grid">${slots}</div>
+    </div>
+  `;
+}
+
+function renderAssetsSection(p) {
+  const total = p.assets.filter(a => !a.skeleton).length;
+  const byKind = k => p.assets.filter(a => a.kind === k && !a.skeleton).length;
+  return `
+    <div class="asset-section">
+      <div class="section-title" style="margin-bottom: 10px;">
+        <h2>已生成资产</h2>
+        <span class="sub">// 该商品 · ${total} 张 · 自动入资产库</span>
+      </div>
+      <div class="asset-tabs">
+        <button class="asset-tab active" data-tab="all">全部 <span class="count">${total}</span></button>
+        <button class="asset-tab" data-tab="white">白底 <span class="count">${byKind('white')}</span></button>
+        <button class="asset-tab" data-tab="model">模特 <span class="count">${byKind('model')}</span></button>
+        <button class="asset-tab" data-tab="platform">平台 <span class="count">${byKind('platform')}</span></button>
+      </div>
+      <div class="asset-grid" id="asset-grid">${renderAssetItems(p, 'all')}</div>
+    </div>
+  `;
+}
+
+function renderAssetItems(p, tab) {
+  const filtered = tab === 'all' ? p.assets : p.assets.filter(a => a.kind === tab);
+  if (filtered.length === 0) {
+    return `<div class="asset-empty">
+      <div class="ic-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg></div>
+      <div class="t">还没有资产</div>
+      <div class="d">// 上方工具箱开始生成</div>
+    </div>`;
+  }
+  return filtered.map(a => {
+    const isGradient = (a.color||'').startsWith('linear');
+    const tagText = { white: '白底', model: '模特', platform: '平台' }[a.kind];
+    return `
+      <div class="asset-it">
+        <div class="a-thumb${a.skeleton?' skeleton':''}" style="${a.skeleton?'':(isGradient?`background:${a.color}`:`background-color:${a.color}`)}">
+          ${a.skeleton ? '生成中…' : `<span class="a-tag">${tagText}</span>`}
+        </div>
+        ${a.skeleton ? '' : `<div class="a-body"><div class="a-name">${escape(a.name)}</div><div class="a-meta">${escape(a.meta)}</div></div>`}
+      </div>
+    `;
+  }).join('');
+}
+
+// ════════════════════════════════════════════════════════
+//  事件绑定
+// ════════════════════════════════════════════════════════
+function bindMainHandlers(p) {
+  // 顶部按钮
+  $('cancel-new') && $('cancel-new').addEventListener('click', () => {
+    products.splice(products.indexOf(p), 1);
+    currentId = products[0]?.id || '';
+    isEditing = false;
+    renderAll();
+  });
+  $('save-new') && $('save-new').addEventListener('click', () => saveProduct(p, true));
+  $('start-edit') && $('start-edit').addEventListener('click', () => { isEditing = true; renderMain(); });
+  $('cancel-edit') && $('cancel-edit').addEventListener('click', () => { isEditing = false; renderMain(); });
+  $('save-edit') && $('save-edit').addEventListener('click', () => saveProduct(p, false));
+  $('dismiss-onboard') && $('dismiss-onboard').addEventListener('click', () => {
+    p.showOnboard = false;
+    renderMain();
+  });
+  $('goto-white') && $('goto-white').addEventListener('click', () => {
+    p.showOnboard = false;
+    openPicker('white');
+  });
+
+  // 编辑表单字段
+  const eName = $('e-name'), eCat = $('e-cat'), ePrice = $('e-price'), eTarget = $('e-target');
+  if (eName) {
+    eName.addEventListener('input', () => { p.name = eName.value; updateSaveBtn(p); });
+    eCat.addEventListener('change', () => { p.cat = eCat.value; updateSaveBtn(p); });
+    ePrice.addEventListener('input', () => { p.price = ePrice.value; });
+    eTarget.addEventListener('input', () => { p.target = eTarget.value; });
+  }
+  // 卖点
+  const sellInput = $('e-sell-input');
+  if (sellInput) {
+    sellInput.addEventListener('keydown', e => {
+      if (e.key !== 'Enter') return;
+      e.preventDefault();
+      const t = sellInput.value.trim();
+      if (!t) return;
+      p.sellPoints.push(t);
+      sellInput.value = '';
+      renderMain();
+      // 重新聚焦
+      setTimeout(() => $('e-sell-input')?.focus(), 50);
+    });
+  }
+  document.querySelectorAll('#e-sell-list .bl-x').forEach(b => {
+    b.addEventListener('click', () => {
+      const i = +b.dataset.i;
+      p.sellPoints.splice(i, 1);
+      renderMain();
+    });
+  });
+
+  // 照片
+  document.querySelectorAll('.ov-photo[data-add-photo]').forEach(el => {
+    el.addEventListener('click', () => {
+      if (p.photos.length >= 5) return;
+      p.photos.push({
+        id: Date.now().toString(36),
+        bg: PALETTE[p.photos.length % PALETTE.length],
+        label: '示例',
+      });
+      renderMain();
+      renderList();
+      updateSaveBtn(p);
+    });
+  });
+  document.querySelectorAll('.photo-x').forEach(b => {
+    b.addEventListener('click', e => {
+      e.stopPropagation();
+      const i = +b.dataset.i;
+      p.photos.splice(i, 1);
+      renderMain();
+      renderList();
+      updateSaveBtn(p);
+    });
+  });
+  document.querySelectorAll('.ov-photo[data-start-edit]').forEach(el => {
+    el.addEventListener('click', () => { isEditing = true; renderMain(); });
+  });
+
+  // 工具箱卡
+  document.querySelectorAll('#toolbox .tool-card[data-tool]').forEach(c => {
+    c.addEventListener('click', e => {
+      if (c.closest('.toolbox.locked')) {
+        e.preventDefault(); e.stopPropagation();
+        Shell.toast('请先完成基本信息', '商品名 + 品类 + ≥1 张图');
+        return;
+      }
+      openPicker(c.dataset.tool);
+    });
+  });
+
+  // 资产 tab
+  document.querySelectorAll('.asset-tab').forEach(t => {
+    t.addEventListener('click', () => {
+      document.querySelectorAll('.asset-tab').forEach(x => x.classList.remove('active'));
+      t.classList.add('active');
+      $('asset-grid').innerHTML = renderAssetItems(p, t.dataset.tab);
+    });
+  });
+}
+
+function updateSaveBtn(p) {
+  const ok = p.name && p.cat && p.photos.length > 0;
+  const btn = $('save-new');
+  if (btn) btn.disabled = !ok;
+}
+
+function saveProduct(p, isFresh) {
+  if (!p.name || !p.cat || p.photos.length === 0) return;
+  if (isFresh) {
+    delete p.draft;
+    p.savedOnce = true;
+    p.showOnboard = true;
+    isEditing = false;
+    Shell.toast('商品已建档', `+ ${p.name}`);
+  } else {
+    isEditing = false;
+    Shell.toast('已保存', p.name);
+  }
+  renderAll();
+}
+
+// ════════════════════════════════════════════════════════
+//  Picker:白底/模特/平台
+// ════════════════════════════════════════════════════════
+function openPicker(kind) {
+  const p = current();
+  if (!p) return;
+
+  // 更新弹窗标题里的商品名
+  if (kind === 'white') $('white-prod-name').textContent = `// ${p.name}`;
+  if (kind === 'model') {
+    $('model-prod-name').textContent = `// ${p.name} · 选 1 位模特,每次生成 4 张`;
+    $('model-grid').innerHTML = MODELS.map(m => `
+      <div class="opt-card" data-id="${m.id}">
+        <div class="opt-thumb">${m.custom ? '+' : '◐'}</div>
+        <div class="opt-name">${m.name}</div>
+        <div class="opt-meta">${m.meta}</div>
+      </div>
+    `).join('');
+    pickerState.model.selected = '';
+    $('model-go-btn').disabled = true;
+    $('model-grid').querySelectorAll('.opt-card').forEach(c => {
+      c.addEventListener('click', () => {
+        $('model-grid').querySelectorAll('.opt-card').forEach(x => x.classList.remove('selected'));
+        c.classList.add('selected');
+        pickerState.model.selected = c.dataset.id;
+        $('model-go-btn').disabled = false;
+      });
+    });
+  }
+  if (kind === 'platform') {
+    $('platform-prod-name').textContent = `// ${p.name} · 选 1 个平台`;
+    $('platform-grid').innerHTML = PLATFORMS.map(pp => `
+      <div class="opt-card" data-id="${pp.id}">
+        <div class="opt-thumb">${pp.name[0]}</div>
+        <div class="opt-name">${pp.name}</div>
+        <div class="opt-meta">${pp.meta}</div>
+      </div>
+    `).join('');
+    pickerState.platform.selected = '';
+    $('platform-go-btn').disabled = true;
+    $('platform-grid').querySelectorAll('.opt-card').forEach(c => {
+      c.addEventListener('click', () => {
+        $('platform-grid').querySelectorAll('.opt-card').forEach(x => x.classList.remove('selected'));
+        c.classList.add('selected');
+        pickerState.platform.selected = c.dataset.id;
+        $('platform-go-btn').disabled = false;
+      });
+    });
+  }
+  $(`${kind}-picker-bg`).classList.add('show');
+}
+
+function closePicker(kind) {
+  $(`${kind}-picker-bg`).classList.remove('show');
+}
+
+// pillset
+document.addEventListener('click', e => {
+  const p = e.target.closest('.pillset .p');
+  if (!p) return;
+  const set = p.parentElement;
+  const key = set.dataset.key;
+  if (key === 'angles') {
+    p.classList.toggle('on');
+  } else {
+    set.querySelectorAll('.p').forEach(x => x.classList.remove('on'));
+    p.classList.add('on');
+  }
+});
+
+$('white-go-btn').addEventListener('click', () => {
+  const p = current();
+  if (!p) return;
+  const angles = [...document.querySelectorAll('#white-picker-bg .pillset[data-key="angles"] .p.on')].map(x => x.dataset.v);
+  if (!angles.length) return;
+  closePicker('white');
+  startGen(p, 'white', angles.map((a, i) => ({
+    name: `白底 · ${a}面`, meta: `512×512 · 刚刚`,
+    color: i === 0 ? '#fafafa' : i === 1 ? '#f5f5f5' : '#f0f0f0',
+  })));
+});
+$('model-go-btn').addEventListener('click', () => {
+  const p = current();
+  if (!p || !pickerState.model.selected) return;
+  const m = MODELS.find(x => x.id === pickerState.model.selected);
+  closePicker('model');
+  const palette = [
+    'linear-gradient(135deg,#fcd5ce,#f8edeb)',
+    'linear-gradient(135deg,#cfe1b9,#e9edc9)',
+    'linear-gradient(135deg,#bee3f8,#c3dafe)',
+    'linear-gradient(135deg,#fde2e4,#fad2e1)',
+  ];
+  startGen(p, 'model', palette.map((color, i) => ({
+    name: `${m.name} · 0${i+1}`, meta: `${m.name} · 1024 · 刚刚`, color,
+  })));
+});
+$('platform-go-btn').addEventListener('click', () => {
+  const p = current();
+  if (!p || !pickerState.platform.selected) return;
+  const pl = PLATFORMS.find(x => x.id === pickerState.platform.selected);
+  closePicker('platform');
+  const palette = [
+    'linear-gradient(135deg,#fff7ed,#ffedd5)',
+    'linear-gradient(135deg,#fef3c7,#fde68a)',
+    'linear-gradient(135deg,#ecfccb,#d9f99d)',
+    'linear-gradient(135deg,#cffafe,#a5f3fc)',
+  ];
+  startGen(p, 'platform', palette.map((color, i) => ({
+    name: `${pl.name} · 0${i+1}`, meta: `${pl.name} · 刚刚`, color,
+  })));
+});
+
+function startGen(p, kind, cards) {
+  // 任务进入运行中
+  p.task = 'running';
+  const skeletons = cards.map((_, i) => ({
+    id: `sk-${Date.now()}-${i}`, kind, skeleton: true,
+    name: '生成中', meta: 'pending', color: '',
+  }));
+  p.assets = [...skeletons, ...p.assets];
+  renderList();
+  renderMain();
+
+  // 1.5s 后完成
+  setTimeout(() => {
+    const newAssets = cards.map((c, i) => ({
+      id: `g-${Date.now()}-${i}`, kind, name: c.name, meta: c.meta, color: c.color,
+    }));
+    p.assets = p.assets.filter(a => !skeletons.find(s => s.id === a.id));
+    p.assets = [...newAssets, ...p.assets];
+    p.task = 'done';
+    renderList();
+    renderMain();
+    Shell.toast(`已生成 ${newAssets.length} 张`, p.name);
+    // 3s 后清掉 done 标
+    setTimeout(() => {
+      if (p.task === 'done') { p.task = null; renderList(); }
+    }, 3500);
+  }, 1500);
+}
+
+// ════════════════════════════════════════════════════════
+//  顶部 + 搜索 + Tab
+// ════════════════════════════════════════════════════════
+$('ws-new-btn').addEventListener('click', () => {
+  const id = 'new-' + Date.now().toString(36);
+  const newP = {
+    id, draft: true,
+    name: '', cat: '', price: '', target: '', sellPoints: [], photos: [],
+    task: null, assets: [],
+  };
+  products.unshift(newP);
+  currentId = id;
+  isEditing = false;
+  renderAll();
+});
+
+$('ws-search-input').addEventListener('input', e => {
+  listSearch = e.target.value.trim();
+  renderList();
+});
+
+document.querySelectorAll('.ws-tab').forEach(t => {
+  t.addEventListener('click', () => {
+    document.querySelectorAll('.ws-tab').forEach(x => x.classList.remove('active'));
+    t.classList.add('active');
+    listFilter = t.dataset.filter;
+    renderList();
+  });
+});
+
+// ESC 关弹窗
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    document.querySelectorAll('.picker-bg.show').forEach(p => p.classList.remove('show'));
+  }
+});
+
+function renderAll() {
+  renderList();
+  renderMain();
+}
+
+renderAll();
+</script>
+</body>
+</html>
diff --git a/v2/team.html b/v2/team.html
new file mode 100644
index 0000000..d5af136
--- /dev/null
+++ b/v2/team.html
@@ -0,0 +1,518 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>团队 · 流·Studio</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/restraint.css">
+<style>
+  /* ─── 团队信息卡(深色 banner · 上标题行 + 下统计行)─── */
+  .team-banner {
+    background: var(--accent-black);
+    color: var(--accent-white);
+    padding: 22px 28px 24px;
+    margin-bottom: 24px;
+    position: relative;
+    border: 1px solid var(--accent-black);
+    border-radius: var(--r-md);
+  }
+  /* 4 个装订线小十字(2 个 pseudo + 2 个 span)*/
+  .team-banner::before, .team-banner::after,
+  .team-banner > .corner-tr, .team-banner > .corner-bl {
+    content: ''; position: absolute; width: 14px; height: 14px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center;
+    background-size: contain; pointer-events: none;
+  }
+  .team-banner::before  { top: -7px;    left: -7px; }
+  .team-banner::after   { bottom: -7px; right: -7px; }
+  .team-banner > .corner-tr { top: -7px;    right: -7px; }
+  .team-banner > .corner-bl { bottom: -7px; left: -7px; }
+
+  /* 第 1 行:标题 + 主操作 */
+  .banner-head { display: flex; align-items: flex-start; gap: 20px; }
+  .banner-id { flex: 1; min-width: 0; }
+  .banner-id .lbl { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }
+  .banner-id .nm { font-size: 22px; font-weight: 700; letter-spacing: -.012em; margin-top: 4px; display: flex; align-items: baseline; gap: 10px; }
+  .banner-id .nm .tag { font-size: 10.5px; font-family: var(--font-mono); padding: 2px 8px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); letter-spacing: .04em; font-weight: 500; }
+  .banner-id .meta { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 6px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
+  .banner-actions .btn { background: var(--accent-white); color: var(--accent-black); border-color: var(--accent-white); }
+  .banner-actions .btn:hover { background: var(--background-base); }
+  .banner-actions .btn-ghost { background: transparent; color: var(--accent-white); border: 1px solid rgba(255,255,255,.25); }
+  .banner-actions .btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--accent-white); }
+
+  /* 分隔线 */
+  .banner-divider { height: 1px; background: rgba(255,255,255,.1); margin: 20px 0 18px; }
+
+  /* 第 2 行:4 列统计 */
+  .banner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
+  .banner-stats .stat { min-width: 0; }
+  .banner-stats .stat .lbl { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }
+  .banner-stats .stat .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.012em; margin-top: 6px; }
+  .banner-stats .stat .v.warn { color: #FFB870; }
+  .banner-stats .stat .sub { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 4px; font-family: var(--font-mono); letter-spacing: .02em; }
+
+  /* ─── 主体两栏 ─── */
+  .team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
+
+  .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
+  .pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
+  .pane h3 .ct { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); font-weight: 400; }
+  .pane h3 .spacer { margin-left: auto; }
+
+  /* ─── 成员表 ─── */
+  .members-table .av { width: 32px; height: 32px; border-radius: 50%; background: var(--background-lighter); display: inline-grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--accent-black); border: 1px solid var(--border-faint); }
+  .members-table .who { display: flex; align-items: center; gap: 10px; }
+  .members-table .nm { font-weight: 500; font-size: 13.5px; line-height: 1.2; }
+  .members-table .em { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); }
+  .members-table .role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; }
+  .members-table .role-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
+  .members-table .role-super { background: var(--heat-12); color: var(--heat); }
+  .members-table .role-super .dot { background: var(--heat); }
+  .members-table .role-admin { background: rgba(30,64,175,.1); color: #1E40AF; }
+  .members-table .role-admin .dot { background: #1E40AF; }
+  .members-table .role-member { background: var(--background-lighter); color: var(--black-alpha-56); }
+  .members-table .role-member .dot { background: var(--black-alpha-56); }
+  .members-table .quota-cell { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }
+  .members-table .quota-cell .lbl { color: var(--black-alpha-48); }
+  .members-table .quota-cell .v { color: var(--accent-black); font-weight: 600; }
+  .members-table .used-bar { width: 80px; height: 4px; background: var(--background-lighter); border-radius: 2px; overflow: hidden; margin-top: 4px; }
+  .members-table .used-bar > span { display: block; height: 100%; background: var(--heat); }
+  .members-table .used-bar > span.ok { background: var(--accent-forest); }
+  .members-table .used-bar > span.warn { background: #B45309; }
+  .members-table .acts { display: flex; gap: 4px; justify-content: flex-end; }
+  .members-table .icon-btn-sm { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; color: var(--black-alpha-56); transition: all var(--t-base); }
+  .members-table .icon-btn-sm:hover { color: var(--heat); border-color: var(--heat-20); }
+  .members-table .icon-btn-sm svg { width: 14px; height: 14px; }
+  .members-table .icon-btn-sm.danger:hover { color: var(--accent-crimson); border-color: var(--accent-crimson); }
+  .members-table tr.pending td { opacity: .65; }
+  .members-table tr.pending .nm::after { content: '· 待激活'; font-size: 11px; color: var(--black-alpha-48); margin-left: 6px; font-weight: 400; font-family: var(--font-mono); }
+
+  /* ─── 角色权限矩阵 ─── */
+  .perm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  .perm-table th, .perm-table td { padding: 8px 4px; border-bottom: 1px solid var(--border-faint); }
+  .perm-table th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; text-align: left; }
+  .perm-table th:not(:first-child), .perm-table td:not(:first-child) { text-align: center; }
+  .perm-table tbody td:first-child { color: var(--accent-black); }
+  .perm-table .yes { color: var(--accent-forest); font-weight: 600; }
+  .perm-table .no { color: var(--black-alpha-32); }
+
+  /* ─── 额度检查规则 ─── */
+  .quota-rules { font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.8; }
+  .quota-rules .step { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
+  .quota-rules .num { width: 18px; height: 18px; border-radius: 50%; background: var(--heat-12); color: var(--heat); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; flex: 0 0 18px; margin-top: 1px; }
+  .quota-rules .v { color: var(--accent-black); font-weight: 500; }
+  .quota-rules .formula { font-family: var(--font-mono); font-size: 11px; color: var(--heat); background: var(--heat-12); padding: 1px 6px; }
+
+  /* ─── 邀请 modal ─── */
+  .invite-modal { width: min(480px, 92vw); }
+  .invite-modal .field { margin-bottom: 14px; }
+  .invite-modal label.field-label { display: block; font-size: 12px; color: var(--black-alpha-56); margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .invite-modal label.field-label .req { color: var(--accent-crimson); margin-left: 2px; }
+  .role-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .role-choice { padding: 12px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-base); }
+  .role-choice:hover { background: var(--background-lighter); }
+  .role-choice.selected { border-color: var(--heat); background: var(--heat-12); }
+  .role-choice .title { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+  .role-choice .desc { font-size: 11px; color: var(--black-alpha-56); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .02em; }
+  .quota-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .quota-input-row .input { font-variant-numeric: tabular-nums; }
+</style>
+</head>
+<body>
+<div id="page">
+
+<div class="page-head">
+  <div>
+    <h1>团队管理</h1>
+    <div class="sub"><span class="mono">// 成员 · 角色 · 额度 · 共享资产库</span></div>
+  </div>
+  <div class="actions">
+    <button class="btn" onclick="Shell.toast('团队设置', '/team/settings')">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8 2 2 0 0 1-2.8 2.8 1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5 2 2 0 0 1-4 0 1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3 2 2 0 0 1-2.8-2.8 1.7 1.7 0 0 0 .3-1.8"/></svg>
+      团队设置
+    </button>
+    <button class="btn btn-primary" id="open-invite">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
+      邀请成员
+    </button>
+  </div>
+</div>
+
+<!-- 团队信息 banner -->
+<div class="team-banner">
+  <span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
+
+  <div class="banner-head">
+    <div class="banner-id">
+      <div class="lbl">[ TEAM ]</div>
+      <div class="nm">小李的店 <span class="tag">企业</span></div>
+      <div class="meta">// 团队 ID: T-2026-A8F2 · 创建于 2026-04-12 · 5 名成员</div>
+    </div>
+    <div class="banner-actions">
+      <button class="btn btn-sm" onclick="location.href='account.html'">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg>
+        充值
+      </button>
+      <button class="btn btn-ghost btn-sm" onclick="Shell.toast('编辑月限额', '/team/limit')">设置月限额</button>
+    </div>
+  </div>
+
+  <div class="banner-divider"></div>
+
+  <div class="banner-stats">
+    <div class="stat">
+      <div class="lbl">[ 充值余额 ]</div>
+      <div class="v">¥327.40</div>
+      <div class="sub">// 团队总池</div>
+    </div>
+    <div class="stat">
+      <div class="lbl">[ 月限额 ]</div>
+      <div class="v">¥3,000</div>
+      <div class="sub">// 自然月重置</div>
+    </div>
+    <div class="stat">
+      <div class="lbl">[ 当月已用 ]</div>
+      <div class="v">¥162.60</div>
+      <div class="sub">// 占月限 5.4%</div>
+    </div>
+    <div class="stat">
+      <div class="lbl">[ 当月剩余 ]</div>
+      <div class="v warn">¥2,837.40</div>
+      <div class="sub">// 还可生成约 280 个项目</div>
+    </div>
+  </div>
+</div>
+
+<div class="team-grid">
+  <!-- 左:成员表 -->
+  <div>
+    <div class="pane" style="padding: 0;">
+      <div style="display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-faint);">
+        <h3 style="margin: 0;">成员列表 <span class="ct">// 5 人 · 1 超管 / 1 团管 / 3 成员</span></h3>
+        <span class="spacer"></span>
+        <input class="input" id="member-search" placeholder="搜索姓名 / 手机号" style="height: 32px; font-size: 12px; width: 220px;">
+      </div>
+      <table class="t members-table" style="border: 0; border-radius: 0;">
+        <thead>
+          <tr>
+            <th>成员</th>
+            <th>角色</th>
+            <th>每日额度</th>
+            <th>月度额度</th>
+            <th style="width: 140px;">当月已用</th>
+            <th style="text-align: right; width: 88px;">操作</th>
+          </tr>
+        </thead>
+        <tbody id="members-tbody">
+          <!-- JS 注入 -->
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- 右:权限矩阵 + 额度规则 -->
+  <div>
+    <div class="pane">
+      <h3>角色权限</h3>
+      <div style="font-size: 12px; color: var(--black-alpha-48); margin-top: -10px; margin-bottom: 12px; font-family: var(--font-mono); letter-spacing: .02em;">// PRD §10.2 权限矩阵节选</div>
+      <table class="perm-table">
+        <thead>
+          <tr><th>能力</th><th>超管</th><th>团管</th><th>成员</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>邀请 / 移除成员</td><td class="yes">✓</td><td class="yes">✓</td><td class="no">—</td></tr>
+          <tr><td>设置成员额度</td><td class="yes">✓</td><td class="yes">✓</td><td class="no">—</td></tr>
+          <tr><td>团队充值</td><td class="yes">✓</td><td class="no">—</td><td class="no">—</td></tr>
+          <tr><td>设置月限额</td><td class="yes">✓</td><td class="no">—</td><td class="no">—</td></tr>
+          <tr><td>编辑别人项目</td><td class="yes">✓</td><td class="yes">✓</td><td class="no">—</td></tr>
+          <tr><td>团队共享资产库管理</td><td class="yes">✓</td><td class="yes">✓</td><td class="no">仅自传</td></tr>
+          <tr><td>查看团队消费明细</td><td class="yes">✓</td><td class="yes">✓</td><td class="no">仅自己</td></tr>
+          <tr style="border-bottom: 0;"><td>创建项目 / 用 AI 流程</td><td class="yes">✓</td><td class="yes">✓</td><td class="yes">✓</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="pane">
+      <h3>额度预检规则</h3>
+      <div style="font-size: 12px; color: var(--black-alpha-48); margin-top: -10px; margin-bottom: 12px; font-family: var(--font-mono); letter-spacing: .02em;">// 任一不通过即拦截</div>
+      <div class="quota-rules">
+        <div class="step"><span class="num">1</span><span><span class="v">个人日剩余</span> ≥ 任务预估 × <span class="formula">1.2</span></span></div>
+        <div class="step"><span class="num">2</span><span><span class="v">个人月剩余</span> ≥ 同上</span></div>
+        <div class="step"><span class="num">3</span><span><span class="v">团队月剩余</span> ≥ 同上</span></div>
+        <div class="step"><span class="num">4</span><span><span class="v">团队总余额</span> ≥ 同上</span></div>
+      </div>
+    </div>
+
+    <div class="pane" style="background: var(--heat-12); border-color: var(--heat-20);">
+      <h3 style="color: var(--heat);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
+        失败不扣费
+      </h3>
+      <div style="font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.7;">
+        所有生成任务<strong style="color: var(--accent-black);">仅在用户 <span class="mono" style="background: var(--surface); padding: 1px 5px; font-family: var(--font-mono); color: var(--heat); font-size: 11.5px;">[ 通过 ]</span> 时才扣费</strong>。失败 / 超时 / 重跑(旧版本作废)一律不扣。
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 邀请成员 modal -->
+<div class="modal-bg" id="invite-bg" onclick="if(event.target===this)Shell.closeModal('invite-bg')">
+  <div class="modal invite-modal">
+    <span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
+      </div>
+      <div class="ti">邀请成员<span>// 短信邀请 · 接受后自动加入团队</span></div>
+    </div>
+    <div class="modal-b">
+      <div class="field">
+        <label class="field-label">手机号 <span class="req">*</span></label>
+        <input class="input" id="inv-phone" placeholder="例: 138 0013 8000">
+      </div>
+      <div class="field">
+        <label class="field-label">备注姓名(可选)</label>
+        <input class="input" id="inv-name" placeholder="例: 张某">
+      </div>
+      <div class="field">
+        <label class="field-label">分配角色 <span class="req">*</span></label>
+        <div class="role-choices">
+          <div class="role-choice selected" data-role="member">
+            <div class="title">成员</div>
+            <div class="desc">// 创建项目 + 用资产</div>
+          </div>
+          <div class="role-choice" data-role="admin">
+            <div class="title">团管</div>
+            <div class="desc">// 管成员 + 改额度</div>
+          </div>
+        </div>
+      </div>
+      <div class="field" style="margin-bottom: 0;">
+        <label class="field-label">默认额度</label>
+        <div class="quota-input-row">
+          <input class="input" id="inv-daily" placeholder="每日 (¥)" value="100">
+          <input class="input" id="inv-monthly" placeholder="每月 (¥)" value="2000">
+        </div>
+      </div>
+    </div>
+    <div class="modal-f">
+      <button class="btn" type="button" onclick="Shell.closeModal('invite-bg')">取消</button>
+      <button class="btn btn-primary" type="button" id="inv-send">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="m22 2-11 11"/></svg>
+        发送邀请
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- 编辑成员 modal -->
+<div class="modal-bg" id="edit-member-bg" onclick="if(event.target===this)Shell.closeModal('edit-member-bg')">
+  <div class="modal invite-modal">
+    <span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
+    <div class="modal-h">
+      <div class="ic-m">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
+      </div>
+      <div class="ti" id="edit-title">编辑成员<span id="edit-sub">// 调整角色 / 额度</span></div>
+    </div>
+    <div class="modal-b">
+      <div class="field">
+        <label class="field-label">角色</label>
+        <div class="role-choices">
+          <div class="role-choice" data-edit-role="member">
+            <div class="title">成员</div>
+            <div class="desc">// 创建项目 + 用资产</div>
+          </div>
+          <div class="role-choice" data-edit-role="admin">
+            <div class="title">团管</div>
+            <div class="desc">// 管成员 + 改额度</div>
+          </div>
+        </div>
+      </div>
+      <div class="field" style="margin-bottom: 0;">
+        <label class="field-label">额度</label>
+        <div class="quota-input-row">
+          <input class="input" id="edit-daily" placeholder="每日 (¥)">
+          <input class="input" id="edit-monthly" placeholder="每月 (¥)">
+        </div>
+      </div>
+    </div>
+    <div class="modal-f">
+      <button class="btn" type="button" style="margin-right: auto; color: var(--accent-crimson); border-color: var(--accent-crimson);" id="edit-remove">移出团队</button>
+      <button class="btn" type="button" onclick="Shell.closeModal('edit-member-bg')">取消</button>
+      <button class="btn btn-primary" type="button" id="edit-save">保存</button>
+    </div>
+  </div>
+</div>
+
+</div>
+<script src="assets/shell.js"></script>
+<script>
+Shell.render({
+  active: 'team',
+  crumbs: [{ label: '工作台', href: 'index.html' }, { label: '团队' }]
+});
+
+/* ─── 团队成员 mock + 渲染 ─── */
+const ROLE_META = {
+  super:  { cls: 'role-super',  label: '超管' },
+  admin:  { cls: 'role-admin',  label: '团管' },
+  member: { cls: 'role-member', label: '成员' },
+};
+
+const MEMBERS = [
+  { id: 'u1', av: '李', name: '小李', email: 'li@shop.com',    role: 'super',  daily: 500, monthly: 10000, used: 162.60, pending: false, creator: true },
+  { id: 'u2', av: '张', name: '张运营', email: 'zhang@shop.com', role: 'admin',  daily: 300, monthly: 6000,  used:  98.40, pending: false },
+  { id: 'u3', av: '王', name: '王小姐', email: 'wang@shop.com',  role: 'member', daily: 100, monthly: 2000,  used:  45.20, pending: false },
+  { id: 'u4', av: '陈', name: '陈策划', email: 'chen@shop.com',  role: 'member', daily: 100, monthly: 2000,  used:  12.80, pending: false },
+  { id: 'u5', av: '林', name: '林新人', email: '186****1102',    role: 'member', daily: 100, monthly: 2000,  used:   0,     pending: true  },
+];
+
+function fmtMoney(n) { return '¥' + n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
+function usedClass(pct) { if (pct < 0.5) return 'ok'; if (pct < 0.85) return ''; return 'warn'; }
+
+function renderMembers(filter = '') {
+  const tb = document.getElementById('members-tbody');
+  const list = MEMBERS.filter(m => {
+    if (!filter) return true;
+    const q = filter.toLowerCase();
+    return m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q);
+  });
+  tb.innerHTML = list.map(m => {
+    const r = ROLE_META[m.role];
+    const pct = m.monthly > 0 ? m.used / m.monthly : 0;
+    return `
+      <tr data-id="${m.id}"${m.pending ? ' class="pending"' : ''}>
+        <td>
+          <div class="who">
+            <div class="av">${m.av}</div>
+            <div>
+              <div class="nm">${m.name}${m.creator ? ' <span style="font-family:var(--font-mono);font-size:10px;color:var(--black-alpha-48);">· 创建者</span>' : ''}</div>
+              <div class="em">${m.email}</div>
+            </div>
+          </div>
+        </td>
+        <td><span class="role-pill ${r.cls}"><span class="dot"></span>${r.label}</span></td>
+        <td><span class="quota-cell"><span class="v">${fmtMoney(m.daily)}</span></span></td>
+        <td><span class="quota-cell"><span class="v">${fmtMoney(m.monthly)}</span></span></td>
+        <td>
+          <div class="quota-cell"><span class="v">${fmtMoney(m.used)}</span> <span class="lbl">/ ${(pct * 100).toFixed(0)}%</span></div>
+          <div class="used-bar"><span class="${usedClass(pct)}" style="width: ${Math.min(100, pct * 100).toFixed(1)}%"></span></div>
+        </td>
+        <td>
+          <div class="acts">
+            ${m.creator ? '<span style="font-family:var(--font-mono);font-size:10.5px;color:var(--black-alpha-32);align-self:center;">不可编辑</span>' : `
+              <button class="icon-btn-sm" data-act="edit" data-id="${m.id}" title="编辑">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
+              </button>
+              <button class="icon-btn-sm danger" data-act="remove" data-id="${m.id}" title="移出">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+              </button>
+            `}
+          </div>
+        </td>
+      </tr>
+    `;
+  }).join('');
+
+  tb.querySelectorAll('[data-act="edit"]').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      openEdit(btn.dataset.id);
+    });
+  });
+  tb.querySelectorAll('[data-act="remove"]').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      const m = MEMBERS.find(x => x.id === btn.dataset.id);
+      if (!m) return;
+      if (confirm('确定将「' + m.name + '」移出团队?')) {
+        const i = MEMBERS.findIndex(x => x.id === m.id);
+        MEMBERS.splice(i, 1);
+        Shell.toast('已移除成员', m.name);
+        renderMembers(document.getElementById('member-search').value);
+      }
+    });
+  });
+}
+renderMembers();
+
+document.getElementById('member-search').addEventListener('input', e => {
+  renderMembers(e.target.value);
+});
+
+/* ─── 邀请 modal ─── */
+document.getElementById('open-invite').addEventListener('click', () => {
+  Shell.openModal('invite-bg');
+});
+document.querySelectorAll('#invite-bg .role-choice').forEach(c => {
+  c.addEventListener('click', () => {
+    document.querySelectorAll('#invite-bg .role-choice').forEach(x => x.classList.remove('selected'));
+    c.classList.add('selected');
+  });
+});
+document.getElementById('inv-send').addEventListener('click', () => {
+  const phone = document.getElementById('inv-phone').value.trim();
+  if (!phone) { Shell.toast('请填手机号', '邀请失败'); return; }
+  const role = document.querySelector('#invite-bg .role-choice.selected')?.dataset.role || 'member';
+  const name = document.getElementById('inv-name').value.trim() || '待激活成员';
+  const daily = Number(document.getElementById('inv-daily').value) || 100;
+  const monthly = Number(document.getElementById('inv-monthly').value) || 2000;
+  MEMBERS.push({
+    id: 'u' + Date.now(),
+    av: name[0] || '新',
+    name, email: phone, role,
+    daily, monthly, used: 0, pending: true,
+  });
+  renderMembers();
+  Shell.closeModal('invite-bg');
+  Shell.toast('邀请已发送', phone);
+  document.getElementById('inv-phone').value = '';
+  document.getElementById('inv-name').value = '';
+});
+
+/* ─── 编辑 modal ─── */
+let editingId = null;
+function openEdit(id) {
+  const m = MEMBERS.find(x => x.id === id);
+  if (!m) return;
+  editingId = id;
+  document.getElementById('edit-title').innerHTML = '编辑「' + m.name + '」<span id="edit-sub">// ' + m.email + '</span>';
+  document.querySelectorAll('#edit-member-bg .role-choice').forEach(c => {
+    c.classList.toggle('selected', c.dataset.editRole === (m.role === 'super' ? 'admin' : m.role));
+  });
+  document.getElementById('edit-daily').value = m.daily;
+  document.getElementById('edit-monthly').value = m.monthly;
+  Shell.openModal('edit-member-bg');
+}
+document.querySelectorAll('#edit-member-bg .role-choice').forEach(c => {
+  c.addEventListener('click', () => {
+    document.querySelectorAll('#edit-member-bg .role-choice').forEach(x => x.classList.remove('selected'));
+    c.classList.add('selected');
+  });
+});
+document.getElementById('edit-save').addEventListener('click', () => {
+  const m = MEMBERS.find(x => x.id === editingId);
+  if (!m) return;
+  m.role = document.querySelector('#edit-member-bg .role-choice.selected')?.dataset.editRole || m.role;
+  m.daily = Number(document.getElementById('edit-daily').value) || m.daily;
+  m.monthly = Number(document.getElementById('edit-monthly').value) || m.monthly;
+  Shell.closeModal('edit-member-bg');
+  Shell.toast('已保存', m.name);
+  renderMembers(document.getElementById('member-search').value);
+});
+document.getElementById('edit-remove').addEventListener('click', () => {
+  const m = MEMBERS.find(x => x.id === editingId);
+  if (!m) return;
+  if (confirm('确定将「' + m.name + '」移出团队?')) {
+    const i = MEMBERS.findIndex(x => x.id === m.id);
+    MEMBERS.splice(i, 1);
+    Shell.closeModal('edit-member-bg');
+    Shell.toast('已移除', m.name);
+    renderMembers(document.getElementById('member-search').value);
+  }
+});
+</script>
+</body>
+</html>