diff --git a/.gitea/workflows/ds-gate.yml b/.gitea/workflows/ds-gate.yml
new file mode 100644
index 0000000..f82d190
--- /dev/null
+++ b/.gitea/workflows/ds-gate.yml
@@ -0,0 +1,22 @@
+name: Design System Gate
+
+# 原型设计系统守门闸（单一真源，12 道检查）。
+# 改了原型（tokens/atoms/screens/index）就跑，确保颜色/排版/层级/圆角/字体/图标
+# 全走 tokens.css/atoms.css，组件已在 index.html 登记且未 fork。
+on:
+  push:
+    branches: ['**']
+    paths:
+      - '.superpowers/prototype/**'
+  pull_request:
+    paths:
+      - '.superpowers/prototype/**'
+
+jobs:
+  check-ds:
+    runs-on: mac
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: 设计系统守门（check-ds.mjs · 12 道闸）
+        run: node .superpowers/prototype/tools/check-ds.mjs
diff --git a/.gitignore b/.gitignore
index 05acde2..ddbae71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -67,8 +67,10 @@ backend/gencode
 # iOS 证书私钥（绝不入库）
 .ios-certs/
 
-# brainstorming visual companion
-.superpowers/
+# superpowers 工作目录：brainstorm/sdd 是草稿不入库；
+# prototype 是设计像素真源 + 设计系统守门闸（check-ds.mjs），入库供 CI 跑。
+.superpowers/*
+!.superpowers/prototype/
 
 # design-distill 保真目检对比图（可重生，见 tools/ds-compare.mjs）
 design/_compare/
diff --git a/.superpowers/prototype/atoms.css b/.superpowers/prototype/atoms.css
new file mode 100644
index 0000000..e42dc27
--- /dev/null
+++ b/.superpowers/prototype/atoms.css
@@ -0,0 +1,472 @@
+/* ============================================================
+   岩美酒库 · 组件层（原子）
+   仅引用 tokens.css 的 var()，被设计系统文档与所有屏幕复用。
+   ============================================================ */
+*{box-sizing:border-box;}
+svg{fill:none; stroke:currentColor;}
+
+/* ---- 按钮 ---- */
+.btn{height:38px; padding:0 16px; border-radius:var(--r-md); font-size:var(--fs-body); font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent; transition:background-color .15s,border-color .15s,color .15s; font-family:var(--font);}
+.btn svg{width:16px; height:16px; stroke-width:1.8;}
+.btn.ghost{background:var(--surface); border-color:var(--border); color:var(--text);}
+.btn.ghost:hover{background:var(--bg);}
+.btn.primary{background:var(--primary); color:var(--on-primary);}
+.btn.primary:hover{background:var(--primary-dark);}
+.btn.danger{background:var(--danger); color:#fff;}
+.btn.sm{height:32px; padding:0 12px; font-size:var(--fs-sm);}
+.btn.lg{height:44px; padding:0 22px; font-size:14px;}
+
+/* ---- 输入 / 控件 ---- */
+.input{height:38px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:0 11px; font-size:var(--fs-body); color:var(--text); outline:none; font-family:var(--font);}
+.input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+.input::placeholder{color:var(--faint);}
+.input[readonly]{background:var(--bg); color:var(--muted); cursor:default;}
+.input[readonly]:focus{border-color:var(--border); box-shadow:none;}
+.ctrl{height:38px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:0 11px; font-size:var(--fs-body); color:var(--text); display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-family:var(--font);}
+.ctrl.input-like{cursor:text;} .ctrl input{border:none; outline:none; background:transparent; width:100%; font-size:var(--fs-body); color:var(--text); font-family:var(--font);}
+.ctrl .ph{color:var(--faint);}
+.searchbox{height:34px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); display:flex; align-items:center; gap:8px; padding:0 11px;}
+.searchbox svg{width:14px; height:14px; stroke-width:2; color:var(--faint); flex:none;}
+.searchbox input{border:none; background:transparent; outline:none; font-size:var(--fs-body); color:var(--text); width:100%; font-family:var(--font);}
+.searchbox input::placeholder{color:var(--faint);}
+
+/* ---- 日期字段（触发器）+ 滚轮日期选择器（年月日，单据/生产/明细共用） ---- */
+.datefield{height:38px; width:100%; box-sizing:border-box; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:0 11px; display:flex; align-items:center; gap:8px; cursor:pointer; outline:none; transition:border-color .15s,box-shadow .15s;}
+.datefield:hover{border-color:var(--brand400);}
+.datefield:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+.datefield.error{border-color:var(--danger);}
+.datefield.disabled{background:var(--bg); color:var(--muted); pointer-events:none; opacity:.7;}
+.datefield .dval{flex:1; min-width:0; font-size:var(--fs-body); color:var(--text); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.datefield .dval.ph{color:var(--faint); font-family:var(--font);}
+.datefield svg{width:15px; height:15px; stroke-width:1.8; color:var(--faint); flex:none;}
+/* 网格单元格变体：默认无边、矮，hover/focus 才显形（对齐 .combo.cell） */
+.datefield.gci-date{height:32px; border-color:transparent; background:transparent; border-radius:5px; padding:0 8px;}
+.datefield.gci-date:hover{background:var(--bg);}
+.datefield.gci-date:focus{background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 2px var(--brand50);}
+.datefield.gci-date.error{border-color:var(--danger); background:var(--danger-bg); box-shadow:none;}
+.wheel-pop{position:fixed; z-index:var(--z-pop); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:8px; width:248px; display:none;}
+.wheel-pop.show{display:block;}
+.wheel-cols{position:relative; display:flex; height:180px; overflow:hidden;}
+.wheel-center{position:absolute; left:4px; right:4px; top:72px; height:36px; border-radius:var(--r-md); background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); pointer-events:none; z-index:0;}
+.wheel-col{position:relative; z-index:1; flex:1; height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; padding:72px 0; text-align:center; scrollbar-width:none; -ms-overflow-style:none;}
+.wheel-col::-webkit-scrollbar{display:none;}
+.wheel-item{height:36px; line-height:36px; scroll-snap-align:center; font-size:var(--fs-body); color:var(--muted); font-family:var(--font-mono); transition:color .12s,font-size .12s;}
+.wheel-item.on{color:var(--primary); font-weight:700; font-size:16px;}
+.wheel-foot{display:flex; justify-content:space-between; align-items:center; padding:8px 4px 2px; margin-top:6px; border-top:1px solid var(--border-subtle);}
+.wheel-foot .wheel-today{font-size:var(--fs-sm); color:var(--muted); cursor:pointer; padding:4px 10px; border-radius:var(--r-sm);}
+.wheel-foot .wheel-today:hover{background:var(--bg); color:var(--text);}
+.wheel-foot .wheel-ok{font-size:var(--fs-sm); color:var(--on-primary); background:var(--primary); font-weight:600; cursor:pointer; padding:5px 16px; border-radius:var(--r-sm);}
+.wheel-foot .wheel-ok:hover{background:var(--primary-dark);}
+
+/* ---- Chip（筛选） ---- */
+.chip{height:34px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-sm); color:var(--text); display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:border-color .15s;}
+.chip:hover{border-color:var(--brand400);}
+.chip.on{border-color:var(--primary);}
+.chip .cv{color:var(--primary); font-weight:600;}
+.chip svg{width:14px; height:14px; stroke-width:1.8; color:var(--faint);}
+
+/* ---- 状态徽章 ---- */
+.badge{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600;}
+.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
+.b-在售{background:var(--success-bg); color:var(--success);}
+.b-缺货{background:var(--danger-bg); color:var(--danger);}
+.b-预警{background:var(--warn-bg); color:var(--warn);}
+/* 单据状态 */
+.b-草稿{background:var(--info-soft); color:var(--muted);}
+.b-待审核{background:var(--warn-bg); color:var(--warn);}
+.b-已通过{background:var(--success-bg); color:var(--success);}
+.b-已驳回{background:var(--danger-bg); color:var(--danger);}
+/* 财务 / 往来 / 用户角色 */
+.b-收款,.b-启用{background:var(--success-bg); color:var(--success);}
+.b-付款{background:var(--danger-bg); color:var(--danger);}
+.b-供应商,.b-管理员{background:var(--info-soft); color:var(--primary);}
+.b-超级管理员{background:var(--danger-bg); color:var(--danger);}
+.b-操作员{background:var(--ok-soft); color:var(--success);}
+.b-客户{background:var(--accent-soft); color:var(--accent);}
+.b-两者,.b-只读{background:var(--warn-bg); color:var(--warn);}
+.b-停用,.b-普通,.b-离线{background:var(--border-subtle); color:var(--muted);}
+/* 流水 / 设备 */
+.b-入库,.b-在线{background:var(--success-bg); color:var(--success);}
+.b-出库{background:var(--danger-bg); color:var(--danger);}
+/* 待定价：入库进价留空/0（暂估），确认进价后回填真实成本 */
+.pending-price{color:var(--warn); font-weight:600;}
+.b-待定价{background:var(--warn-bg); color:var(--warn);}
+
+/* ---- KPI 卡 ---- */
+.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px; transition:background-color .28s,border-color .15s,box-shadow .15s;}
+.kpi.click{cursor:pointer;} .kpi.click:hover{border-color:var(--brand400); box-shadow:var(--sh-1);}
+.kpi .t{font-size:var(--fs-sm); color:var(--muted);}
+.kpi .v{font-size:24px; font-weight:700; color:var(--heading); margin-top:7px; letter-spacing:.3px; font-family:var(--font-mono);}
+.kpi.alert .v{color:var(--accent);}
+.kpi .d{font-size:var(--fs-xs); margin-top:5px; display:inline-flex; align-items:center; gap:4px;}
+.up{color:var(--success);} .down{color:var(--danger);}
+.ic{width:30px; height:30px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; float:right; margin-top:-2px;}
+.ic svg{width:17px; height:17px; stroke-width:1.8;}
+.ic-info{background:var(--info-soft); color:var(--primary);} .ic-ok{background:var(--ok-soft); color:var(--success);}
+.ic-blue{background:var(--info-soft); color:var(--brand400);} .ic-alert{background:var(--accent-soft); color:var(--accent);}
+
+/* ---- 表格 ---- */
+.table{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:background-color .28s,border-color .28s;}
+.table.flush-top{border-radius:0 0 var(--r-lg) var(--r-lg); border-top:none;}
+table{width:100%; border-collapse:collapse;}
+thead th{background:var(--th-bg); text-align:left; font-size:var(--fs-sm); font-weight:600; color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;}
+th.num,td.num{text-align:right;}
+th.act,td.act{width:78px;}
+thead th .fh{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
+thead th .fh.filtered{color:var(--primary);}
+.funnel{width:12px; height:12px; stroke-width:1.6;}
+tbody td{padding:12px 14px; font-size:var(--fs-body); border-bottom:1px solid var(--border-subtle); color:var(--text); white-space:nowrap;}
+tbody tr:last-child td{border-bottom:none;}
+tbody tr.click{cursor:pointer;} tbody tr:hover{background:var(--row-hover);}
+.pname{font-weight:600; color:var(--heading);}
+.pcode{font-size:var(--fs-xs); color:var(--faint); margin-top:2px; font-family:var(--font-mono);}
+.qty{font-weight:600; font-family:var(--font-mono);} .qty.low{color:var(--accent);}
+td.num{font-family:var(--font-mono);}
+.row-act{display:flex; gap:8px; color:var(--muted);}
+.row-act svg{width:16px; height:16px; stroke-width:1.7; cursor:pointer;}
+.row-act svg:hover{color:var(--primary);}
+.empty{padding:48px; text-align:center; color:var(--muted); font-size:var(--fs-body);}
+
+/* ---- 分页 ---- */
+.pager{display:flex; align-items:center; gap:12px; padding:13px 4px 2px; font-size:var(--fs-sm); color:var(--muted);}
+.pager .pg{margin-left:auto; display:flex; gap:4px;}
+.pg button{min-width:30px; height:30px; padding:0 6px; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm); color:var(--text); font-size:var(--fs-sm); cursor:pointer; font-family:var(--font-mono);}
+.pg button.cur{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}
+.pg button:disabled{color:var(--faint); cursor:default;}
+.pager .pg-size{display:inline-flex; align-items:center; gap:6px;}
+.pgsize-btn{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 8px 0 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:var(--fs-sm); font-family:var(--font-mono); cursor:pointer;}
+.pgsize-btn:hover{border-color:var(--primary);}
+.pgsize-caret{width:12px; height:12px; color:var(--muted); flex:none;}
+
+/* ---- 下拉菜单（JS 定位） ---- */
+.menu{position:fixed; z-index:var(--z-menu); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:6px; min-width:160px;}
+.menu-item{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm); font-size:var(--fs-body); color:var(--text); cursor:pointer;}
+.menu-item:hover{background:var(--bg);}
+.menu-item .ck{width:16px; height:16px; color:var(--primary);}
+.menu-item .mi-ic{width:16px; height:16px; flex:none; stroke-width:1.8;}
+.menu-item.sel{color:var(--primary); font-weight:600;}
+/* 用户菜单（侧栏底部弹出）：比激活导航略浅的同色系 + 浅色字 */
+.menu.user-menu{background:var(--menu-user-bg); border-color:var(--menu-user-bg);}
+.menu.user-menu .menu-item{color:var(--menu-user-fg);}
+.menu.user-menu .menu-item .mi-ic{color:var(--menu-user-fg);}
+.menu.user-menu .menu-item:hover{background:var(--menu-user-hover);}
+
+/* ---- 弹窗 ---- */
+.overlay{position:fixed; inset:0; background:var(--scrim); display:none; align-items:center; justify-content:center; z-index:var(--z-overlay);}
+.overlay.show{display:flex;}
+.modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); width:680px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 70px var(--shadow); overflow:hidden;}
+.modal.narrow{width:520px;}
+.modal-head{display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border);}
+.modal-head h3{margin:0; font-size:var(--fs-h2); color:var(--heading);}
+.modal-head .x, .drawer-head .x{margin-left:auto; cursor:pointer; color:var(--muted); width:22px; height:22px;}
+.modal-body{padding:18px 20px; overflow:auto;}
+.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border);}
+.frow{display:flex; gap:14px; margin-bottom:14px;}
+.field{flex:1;} .field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
+.lines{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin-bottom:6px;}
+.lines .lh, .lines .lr{display:grid; grid-template-columns:1fr 80px 90px 90px 30px; gap:8px; align-items:center; padding:9px 12px; font-size:var(--fs-sm);}
+.lines .lh{background:var(--th-bg); color:var(--muted); font-weight:600;}
+.lines .lr{border-top:1px solid var(--border-subtle);}
+.lines .lr input{height:30px; border:1px solid var(--border); border-radius:5px; padding:0 8px; font-size:var(--fs-sm); background:var(--bg); color:var(--text); width:100%; outline:none; font-family:var(--font);}
+.lines .lr .amt{font-weight:600; color:var(--heading); text-align:right; font-family:var(--font-mono);}
+.lines .lr .del{color:var(--faint); cursor:pointer; text-align:center;}
+.lines .lr .del:hover{color:var(--danger);}
+.ltotal{display:flex; justify-content:flex-end; gap:10px; align-items:center; font-size:var(--fs-body); color:var(--muted); padding:8px 4px 0;}
+.ltotal b{font-size:18px; color:var(--accent); font-family:var(--font-mono);}
+
+/* ---- 抽屉 ---- */
+.drawer{position:fixed; top:0; right:0; height:100vh; width:480px; max-width:94vw; background:var(--surface); border-left:1px solid var(--border); box-shadow:-16px 0 50px var(--shadow); transform:translateX(100%); transition:transform .25s; z-index:var(--z-drawer); display:flex; flex-direction:column;}
+.drawer.show{transform:translateX(0);}
+.drawer.wide{width:600px;}
+/* 抽屉遮罩：点击空白处关闭抽屉（z-index 在抽屉之下） */
+.drawer-mask{position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s; z-index:var(--z-drawer-scrim);}
+.drawer-mask.show{opacity:1; pointer-events:auto;}
+.drawer-head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center;}
+.drawer-head h3{margin:0; font-size:var(--fs-h2); color:var(--heading);}
+.drawer-body{padding:18px 20px; overflow:auto;}
+.drow{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body);}
+.drow span{color:var(--muted);} .drow b{color:var(--text); font-weight:600;}
+/* ---- 商品编辑抽屉 .pe-*（product-editor.js 注入，库存/基础数据共用）---- */
+.pe-card{border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:14px; overflow:hidden; background:var(--surface);}
+.pe-h{display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body); font-weight:600; color:var(--heading);}
+.pe-h .pe-ic{width:22px; height:22px; border-radius:var(--r-sm); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
+.pe-h .pe-ic svg{width:14px; height:14px; stroke-width:1.9;}
+.pe-h .pe-manage{margin-left:auto; font-size:var(--fs-sm); color:var(--primary); cursor:pointer;}
+.pe-b{padding:13px;}
+.pe-note{font-size:var(--fs-xs); color:var(--faint); margin-top:9px; line-height:1.6;}
+.pe-gallery{display:flex; gap:9px; flex-wrap:wrap;}
+.pe-tile{width:86px; height:106px; border:1.5px dashed var(--border); border-radius:var(--r-md); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; color:var(--faint); font-size:var(--fs-xs); position:relative; overflow:hidden;}
+.pe-tile:hover{border-color:var(--primary); color:var(--primary);}
+.pe-tile svg{width:20px; height:20px; stroke-width:1.6;}
+.pe-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
+.pe-tile.has{border-style:solid; border-color:var(--border);}
+.pe-tile .rm{position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff; display:none; align-items:center; justify-content:center;}
+.pe-tile.has .rm{display:flex;}
+.pe-tile .cap{position:absolute; bottom:0; left:0; right:0; background:var(--scrim); color:#fff; font-size:var(--fs-xs); text-align:center; padding:1px 0;}
+.pe-pick{display:flex; align-items:center; gap:8px; height:38px; padding:0 11px; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; color:var(--text); font-size:var(--fs-body); background:var(--surface);}
+.pe-pick:hover{border-color:var(--primary);}
+.pe-pick .ph{color:var(--faint);}
+.pe-pick svg{margin-left:auto; width:14px; height:14px; color:var(--muted);}
+.pe-text{width:100%; box-sizing:border-box; min-height:84px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-md); padding:10px 11px; font-size:var(--fs-body); color:var(--text); background:var(--surface); outline:none; font-family:var(--font); line-height:1.7; margin-top:10px;}
+.pe-text:focus{border-color:var(--primary);}
+.pe-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:6px;}
+/* 明细行三行式：商品名 / 编码 / 系列·规格 */
+.lcell{min-width:0;}
+.lcell .ln{display:block; color:var(--heading); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.lcell .lcode{display:block; font-family:var(--font-mono); color:var(--muted); font-size:var(--fs-xs); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.lcell .lspec{display:block; color:var(--muted); font-size:var(--fs-xs); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.lcell .lser{display:block; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+/* 抽屉底部操作分组：审核类 / 打印类 */
+.dactions{margin-top:18px; display:flex; flex-direction:column; gap:14px;}
+.dact-group{display:flex; flex-direction:column; gap:8px;}
+.dact-label{font-size:var(--fs-xs); color:var(--muted); font-weight:600; letter-spacing:.4px;}
+.dact-row{display:flex; flex-wrap:wrap; gap:10px;}
+
+/* ---- Toast ---- */
+.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--toast-bg); color:#fff; padding:11px 18px; border-radius:var(--r-md); font-size:var(--fs-body); opacity:0; pointer-events:none; transition:.25s; z-index:var(--z-toast);}
+.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
+
+/* ---- 底部状态栏（app-shell 底，statusbar.js 注入） ---- */
+.statusbar{flex:none; height:34px; display:flex; align-items:center; padding:0 6px; background:var(--statusbar-bg); color:var(--statusbar-fg); font-size:var(--fs-xs); border-top:1px solid var(--statusbar-div); overflow:hidden;}
+.statusbar .sb-group{display:flex; align-items:center; min-width:0;}
+.statusbar .sb-group.right{margin-left:auto;}
+.statusbar .sb-i{display:inline-flex; align-items:center; gap:6px; padding:0 13px; white-space:nowrap;}
+.statusbar .sb-group .sb-i + .sb-i{border-left:1px solid var(--statusbar-div);}
+.statusbar .sb-i svg{width:13px; height:13px; stroke-width:1.8; color:var(--statusbar-muted); flex:none;}
+.statusbar .sb-i b{color:var(--statusbar-strong); font-weight:600; font-family:var(--font-mono);}
+.statusbar .sb-i.ok, .statusbar .sb-i.ok svg, .statusbar .sb-i.ok b{color:var(--statusbar-ok);}
+@media(max-width:760px){ .statusbar .sb-hideable{display:none;} }
+
+/* ---- 顶栏通知（小喇叭 + 下拉面板） ---- */
+.nbadge{position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 4px; border-radius:var(--r-pill); background:var(--danger); color:#fff; font-size:var(--fs-xs); font-weight:700; line-height:15px; text-align:center; box-shadow:0 0 0 2px var(--top-bg); pointer-events:none;}
+.notify-pop{position:fixed; z-index:var(--z-pop); width:330px; max-width:92vw; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-3); display:none; flex-direction:column; overflow:hidden;}
+.notify-pop.show{display:flex;}
+.notify-pop .np-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border-subtle);}
+.notify-pop .np-head h4{margin:0; font-size:var(--fs-title); color:var(--heading);}
+.notify-pop .np-head .np-clear{font-size:var(--fs-sm); color:var(--primary); cursor:pointer;}
+.notify-pop .np-list{max-height:340px; overflow:auto;}
+.notify-pop .np-item{display:flex; gap:11px; padding:11px 14px; border-bottom:1px solid var(--border-subtle); cursor:pointer; transition:background-color .12s;}
+.notify-pop .np-item:hover{background:var(--bg);}
+.notify-pop .np-item.unread{background:var(--brand50);}
+.notify-pop .np-item.unread:hover{background:var(--brand50);}
+.notify-pop .np-ic{width:30px; height:30px; border-radius:var(--r-md); flex:none; display:flex; align-items:center; justify-content:center;}
+.notify-pop .np-ic svg{width:16px; height:16px; stroke-width:1.8;}
+.notify-pop .np-ic.warn{background:var(--warn-bg); color:var(--warn);}
+.notify-pop .np-ic.info{background:var(--info-soft); color:var(--primary);}
+.notify-pop .np-ic.ok{background:var(--success-bg); color:var(--success);}
+.notify-pop .np-tx{flex:1; min-width:0;}
+.notify-pop .np-tx .np-t{font-size:var(--fs-body); color:var(--heading); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.notify-pop .np-tx .np-d{font-size:var(--fs-xs); color:var(--muted); margin-top:2px;}
+.notify-pop .np-time{font-size:var(--fs-xs); color:var(--faint); flex:none;}
+.notify-pop .np-empty{padding:30px; text-align:center; color:var(--muted); font-size:var(--fs-sm);}
+.notify-pop .np-foot{padding:9px 14px; text-align:center; border-top:1px solid var(--border-subtle); font-size:var(--fs-sm); color:var(--primary); cursor:pointer; background:var(--bg);}
+
+/* ---- 通知中心 .nt-*（列表行 + 类型图标，桌面/移动共用，登记于 index.html）---- */
+.nt-item{display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); cursor:pointer; text-decoration:none; color:var(--text); transition:border-color .15s,background-color .15s;}
+.nt-item+.nt-item{margin-top:10px;}
+.nt-item:hover{border-color:var(--brand400);}
+.nt-item.unread{background:var(--brand50);}
+.nt-ic{width:38px; height:38px; border-radius:var(--r-md); flex:none; display:flex; align-items:center; justify-content:center;}
+.nt-ic svg{width:19px; height:19px; stroke-width:1.8;}
+.nt-ic.warn{background:var(--warn-bg); color:var(--warn);}
+.nt-ic.info{background:var(--info-soft); color:var(--primary);}
+.nt-ic.ok{background:var(--success-bg); color:var(--success);}
+.nt-ic.danger{background:var(--danger-bg); color:var(--danger);}
+.nt-ic.lg{width:50px; height:50px; border-radius:var(--r-lg);}
+.nt-ic.lg svg{width:25px; height:25px;}
+.nt-bd{flex:1; min-width:0;}
+.nt-t{display:flex; align-items:center; gap:7px;}
+.nt-t .nt-dot{width:7px; height:7px; border-radius:50%; background:var(--primary); flex:none;}
+.nt-t .nt-tt{flex:1; min-width:0; font-size:var(--fs-body); font-weight:600; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.nt-t .nt-time{font-size:var(--fs-xs); color:var(--faint); flex:none; white-space:nowrap;}
+.nt-d{font-size:var(--fs-sm); color:var(--muted); margin-top:3px; line-height:1.55;}
+
+/* ============================================================
+   录单表单新增原子（入库 / 出库录单屏复用）
+   仍只引用 tokens.css 的 var()，禁硬编码 hex。
+   ============================================================ */
+
+/* ---- 分段切换 .seg（入库 / 出库 等二三选一）---- */
+.seg{display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:3px; gap:3px;}
+.seg button{height:30px; padding:0 16px; border:none; background:transparent; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer; font-family:var(--font); transition:color .15s,background-color .15s;}
+.seg button.on{background:var(--surface); color:var(--primary); box-shadow:var(--sh-1);}
+
+/* ---- 可搜索选择器 .combo（单据头全尺寸 + 网格单元格变体 .cell）---- */
+.combo{position:relative; height:38px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); display:flex; align-items:center; cursor:text; transition:border-color .15s,box-shadow .15s;}
+.combo input{border:none; outline:none; background:transparent; width:100%; height:100%; padding:0 30px 0 11px; font-size:var(--fs-body); color:var(--text); font-family:var(--font); cursor:text; border-radius:inherit;}
+.combo input::placeholder{color:var(--faint);}
+.combo .caf{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--faint); display:flex; align-items:center; justify-content:center;}
+.combo .caf svg{width:14px; height:14px; stroke-width:2;}
+.combo.has .caf{cursor:pointer;}
+.combo.has .caf:hover{color:var(--danger);}
+.combo:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+.combo.error{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg);}
+/* 网格单元格变体：默认无边、矮，hover/focus 才显形 */
+.combo.cell{height:32px; border-color:transparent; background:transparent; border-radius:5px;}
+.combo.cell input{padding:0 24px 0 8px; font-size:var(--fs-body);}
+.combo.cell:hover{background:var(--bg);}
+.combo.cell:focus-within{background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 2px var(--brand50);}
+.combo.cell.error{border-color:var(--danger); background:var(--danger-bg); box-shadow:none;}
+.combo.cell .caf{right:6px;}
+
+/* combo 浮层（JS fixed 定位，视觉承袭 .menu）---- */
+.combo-pop{position:fixed; z-index:var(--z-pop); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2); display:flex; flex-direction:column; overflow:hidden; min-width:200px;}
+.combo-pop .cp-list{overflow:auto; padding:5px; max-height:264px;}
+.combo-pop .cp-grp{font-size:var(--fs-xs); color:var(--faint); font-weight:600; letter-spacing:.5px; padding:8px 9px 4px;}
+.combo-pop .cp-item{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm); font-size:var(--fs-body); color:var(--text); cursor:pointer; white-space:nowrap;}
+.combo-pop .cp-item .nm{overflow:hidden; text-overflow:ellipsis;}
+.combo-pop .cp-item small{color:var(--faint); font-family:var(--font-mono); font-size:var(--fs-xs); margin-left:auto; padding-left:12px;}
+.combo-pop .cp-item.cur{background:var(--row-hover);}
+.combo-pop .cp-item.sel{color:var(--primary); font-weight:600;}
+.combo-pop .cp-item .ck{width:15px; height:15px; color:var(--primary); flex:none;}
+.combo-pop .cp-item .hl{color:var(--primary); font-weight:700;}
+.combo-pop .cp-new{display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--border-subtle); color:var(--primary); font-size:var(--fs-sm); font-weight:600; cursor:pointer;}
+.combo-pop .cp-new.cur{background:var(--row-hover);}
+.combo-pop .cp-new svg{width:14px; height:14px; stroke-width:2; flex:none;}
+.combo-pop .cp-empty{padding:20px; text-align:center; color:var(--muted); font-size:var(--fs-sm);}
+/* 弹层置顶搜索框（单据头供应商/仓库等显式搜索下拉用） */
+.combo-pop .cp-search{display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--border-subtle); flex:none;}
+.combo-pop .cp-search svg{width:14px; height:14px; stroke-width:2; color:var(--faint); flex:none;}
+.combo-pop .cp-search input{border:none; outline:none; background:transparent; width:100%; font-size:var(--fs-body); color:var(--text); font-family:var(--font);}
+.combo-pop .cp-search input::placeholder{color:var(--faint);}
+.combo-pop .cp-body{display:flex; flex-direction:column; overflow:hidden;}
+/* 弹层底部结果统计（内容多时启用：显示总返回条数） */
+.combo-pop .cp-foot{flex:none; padding:7px 12px; border-top:1px solid var(--border-subtle); font-size:var(--fs-xs); color:var(--muted); background:var(--bg);}
+.combo-pop .cp-foot b{color:var(--text); font-weight:600; font-family:var(--font-mono);}
+
+/* ---- 可编辑明细网格 .grid ---- */
+.grid{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); display:flex; flex-direction:column; min-height:0; overflow:hidden; transition:background-color .28s,border-color .28s;}
+.grid-scroll{overflow:auto; flex:1; min-height:0;}
+.grid table{width:100%; border-collapse:separate; border-spacing:0; min-width:920px;}
+.grid thead th{position:sticky; top:0; z-index:3; background:var(--th-bg); color:var(--muted); font-size:var(--fs-sm); font-weight:600; text-align:left; padding:10px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
+.grid th.req::after{content:"*"; color:var(--danger); margin-left:3px;}
+.grid th.num, .grid td.num{text-align:right;}
+.grid tbody td{border-bottom:1px solid var(--border-subtle); background:var(--surface); vertical-align:middle; transition:background-color .15s;}
+.grid tbody tr.gr:hover td{background:var(--row-hover);}
+.grid td.cpad{padding:4px 6px;}
+.grid td.gidx{width:38px; text-align:center; color:var(--faint); font-family:var(--font-mono); font-size:var(--fs-sm);}
+.grid tr.gr.error td{box-shadow:inset 3px 0 0 var(--danger);}
+.grid .gci{height:32px; width:100%; border:1px solid transparent; background:transparent; border-radius:5px; padding:0 8px; font-size:var(--fs-body); color:var(--text); outline:none; font-family:var(--font);}
+.grid td.num .gci{text-align:right; font-family:var(--font-mono);}
+.grid .gci:hover{background:var(--bg);}
+.grid .gci:focus{background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 2px var(--brand50);}
+.grid .gci.error{border-color:var(--danger); background:var(--danger-bg);}
+.grid td.ro{color:var(--muted); padding:0 10px; font-size:var(--fs-body); white-space:nowrap;}
+.grid td.ro.num{font-family:var(--font-mono);}
+.grid td.amt{font-family:var(--font-mono); font-weight:600; color:var(--heading); padding:0 12px; white-space:nowrap;}
+.grid td.gact, .grid th.gact{width:92px;}
+.grid .gact-in{display:flex; gap:8px; justify-content:center; color:var(--muted);}
+.grid .gact-in svg{width:16px; height:16px; stroke-width:1.7; cursor:pointer;}
+.grid .gact-in svg:hover{color:var(--primary);} .grid .gact-in .gdel:hover{color:var(--danger);}
+.grid-add{display:flex; align-items:center; gap:8px; padding:11px 14px; color:var(--primary); font-size:var(--fs-body); font-weight:600; cursor:pointer; border-top:1px solid var(--border-subtle); flex:none;}
+.grid-add:hover{background:var(--row-hover);}
+.grid-add svg{width:16px; height:16px; stroke-width:2;}
+.grid-add kbd{margin-left:6px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--faint); font-weight:500;}
+
+/* ---- 状态徽章（单据状态，承袭 .badge 机制）---- */
+.b-草稿{background:var(--bg); color:var(--muted);}
+.b-待审核{background:var(--info-soft); color:var(--primary);}
+.b-已通过{background:var(--success-bg); color:var(--success);}
+.b-已驳回{background:var(--danger-bg); color:var(--danger);}
+
+/* ---- 提示条 .notice（草稿恢复 / 驳回理由）---- */
+.notice{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-md); font-size:var(--fs-body); margin-bottom:14px; border:1px solid var(--border-subtle);}
+.notice svg{width:17px; height:17px; stroke-width:1.8; flex:none;}
+.notice .nb{margin-left:auto; display:flex; gap:8px; flex:none;}
+.notice.info{background:var(--info-soft); color:var(--primary);}
+.notice.danger{background:var(--danger-bg); color:var(--danger);}
+.notice .lk{cursor:pointer; font-weight:600; text-decoration:underline; text-underline-offset:2px;}
+
+/* ---- 移动端明细卡 .mcard ---- */
+.mcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:border-color .15s;}
+.mcard.error{border-color:var(--danger);}
+.mcard-head{display:flex; align-items:center; padding:11px 14px; background:var(--th-bg); border-bottom:1px solid var(--border-subtle);}
+.mcard-head .mt{font-weight:600; color:var(--heading); font-size:var(--fs-body);}
+.mcard-head .msub{margin-left:9px; color:var(--faint); font-size:var(--fs-xs); font-family:var(--font-mono);}
+.mcard-head .mact{margin-left:auto; display:flex; gap:14px; color:var(--muted);}
+.mcard-head .mact svg{width:18px; height:18px; stroke-width:1.7; cursor:pointer;}
+.mcard-head .mact .gdel:hover{color:var(--danger);}
+.mcard-body{padding:4px 14px 12px;}
+.mrow{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border-subtle); min-height:46px;}
+.mrow:last-child{border-bottom:none;}
+.mrow > label{width:64px; flex:none; font-size:var(--fs-sm); color:var(--muted);}
+.mrow > label.req::after{content:"*"; color:var(--danger); margin-left:2px;}
+.mrow .mv{flex:1; min-width:0;}
+.mrow .mv.amt{text-align:right; font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:var(--fs-h2);}
+.mrow .mv input{height:36px; width:100%; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md); padding:0 10px; font-size:var(--fs-body); color:var(--text); outline:none; font-family:var(--font);}
+.mrow .mv input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+.mrow .mv input.error{border-color:var(--danger);}
+
+/* ---- 行内选填折叠区（入库：产地/保质期/储存/介绍文档）---- */
+.grid .gexp{transition:transform .2s;} .grid .gexp.on{transform:rotate(180deg); color:var(--primary);}
+.grid tr.gsub td{background:var(--info-soft); box-shadow:inset 3px 0 0 var(--primary);}
+.grid .gsub-pad{padding:12px 16px 14px;}
+.opt-head{font-size:var(--fs-sm); color:var(--muted); margin-bottom:10px;}
+.opt-grid{display:flex; flex-wrap:wrap; gap:14px;}
+.opt-field{width:210px;} .opt-field label{display:block; font-size:var(--fs-xs); color:var(--muted); margin-bottom:5px;}
+
+/* ---- 从库存批量挑货（出库）---- */
+.pick-head, .pick-row{display:grid; grid-template-columns:28px minmax(0,1fr) 86px 84px 92px; gap:10px; align-items:center;}
+.pick-head{padding:9px 12px; background:var(--th-bg); font-size:var(--fs-sm); color:var(--muted); font-weight:600; border:1px solid var(--border); border-bottom:none; border-radius:var(--r-md) var(--r-md) 0 0;}
+.pick-list{border:1px solid var(--border); border-radius:0 0 var(--r-md) var(--r-md); max-height:46vh; overflow-y:auto;}
+.pick-row{padding:9px 12px; border-bottom:1px solid var(--border-subtle); cursor:pointer; font-size:var(--fs-body);}
+.pick-row:last-child{border-bottom:none;}
+.pick-row:hover{background:var(--row-hover);}
+.pick-row.on{background:var(--info-soft);}
+.pick-row .ck{width:18px; height:18px; border:1.5px solid var(--border); border-radius:5px; display:flex; align-items:center; justify-content:center; color:#fff;}
+.pick-row.on .ck{background:var(--primary); border-color:var(--primary);}
+.pick-row .pn{font-weight:600; color:var(--heading);}
+.pick-row .ps{color:var(--muted); font-size:var(--fs-sm);}
+.pick-row .pm{text-align:right; font-family:var(--font-mono); color:var(--text);}
+.pick-row .pq{text-align:right; font-family:var(--font-mono); font-weight:600;}
+
+/* ---- 状态徽章补全（兑换券 / 盘点 / 账单结清，对齐 schema 真实枚举）---- */
+.b-未使用{background:var(--info-soft); color:var(--primary);}
+.b-已兑换{background:var(--success-bg); color:var(--success);}
+.b-作废{background:var(--bg); color:var(--muted);}
+.b-进行中{background:var(--warn-bg); color:var(--warn);}
+.b-已完成{background:var(--success-bg); color:var(--success);}
+.b-未结清{background:var(--warn-bg); color:var(--warn);}
+.b-已结清{background:var(--success-bg); color:var(--success);}
+
+/* ============================================================
+   app-shell（顶栏 + 侧栏）—— 单一真源，shell.js 注入；所有管理屏复用
+   ============================================================ */
+.top{height:56px; background:var(--top-bg); border-bottom:1px solid var(--top-border); display:flex; align-items:center; gap:16px; padding:0 18px; flex:none; z-index:var(--z-header); transition:background-color .28s,border-color .28s;}
+.brand-prod{display:flex; align-items:center; gap:7px;}
+.brand-prod .prod-mk{width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:none;}
+.brand-prod .prod-mk svg{width:30px; height:30px;}
+.brand-prod .prod-nm{font-weight:700; font-size:var(--fs-h2); color:var(--top-fg); letter-spacing:.3px; white-space:nowrap;}
+.brand-sep{width:1px; height:20px; background:var(--top-border); flex:none; margin:0 8px;}
+.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:var(--fs-body); color:var(--top-fg);}
+.logo .mk{width:26px; height:26px; border-radius:8px; background:var(--top-mark-bg); color:var(--top-mark-fg); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-body);}
+.logo .shop-nm{font-weight:600;}
+.gsearch{flex:1; max-width:400px; height:36px; background:var(--top-control); border:1px solid var(--top-border); border-radius:var(--r-md); display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--top-faint); font-size:var(--fs-body); cursor:text;}
+.gsearch svg{stroke-width:2; color:var(--top-faint); flex:none;}
+.top-right{margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--top-fg);}
+.theme-pill{display:flex; align-items:center; gap:7px; height:30px; padding:0 11px; border:1px solid var(--top-border); border-radius:var(--r-pill); font-size:var(--fs-sm); color:var(--top-fg); background:var(--top-control); cursor:pointer;}
+.theme-pill .dot{width:11px; height:11px; border-radius:50%; background:var(--top-fg);}
+.theme-pill .tp-shirt{color:var(--side-fg); flex:none;}
+.icon-btn{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--top-fg); cursor:pointer;}
+.icon-btn:hover{background:var(--top-control);}
+
+.body{flex:1; display:flex; min-height:0;}
+.side{width:218px; background:var(--side-bg); border-right:1px solid var(--side-border); padding:12px 12px 0; display:flex; flex-direction:column; flex:none; transition:background-color .28s,border-color .28s;}
+.nav-label{font-size:var(--fs-xs); color:var(--side-muted); font-weight:600; letter-spacing:.6px; padding:10px 10px 6px;}
+.nav{display:flex; align-items:center; gap:11px; height:40px; padding:0 11px; border-radius:var(--r-md); color:var(--side-fg); font-size:var(--fs-body); font-weight:500; margin-bottom:2px; cursor:pointer; text-decoration:none; transition:background-color .15s,color .15s;}
+.nav svg{width:19px; height:19px; flex:none; stroke-width:1.7;}
+.nav:hover{background:var(--side-hover); color:var(--side-active-fg);}
+.nav.active{background:var(--side-active-bg); color:var(--side-active-fg); font-weight:600;}
+.side-bottom{margin-top:auto; padding-bottom:8px;}
+.side-div{height:1px; background:var(--side-border); margin:8px 4px;}
+.side-user{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-md); cursor:pointer; transition:background-color .15s;}
+.side-user:hover{background:var(--side-hover);}
+.su-pic{width:34px; height:34px; border-radius:50%; background:var(--side-active-bg); color:var(--side-active-fg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none;}
+.su-who{flex:1; min-width:0; line-height:1.3;}
+.su-who b{display:block; color:var(--side-active-fg); font-size:var(--fs-body); font-weight:600;}
+.su-who span{color:var(--side-muted); font-size:var(--fs-xs);}
+.su-caret{width:14px; height:14px; color:var(--side-muted); flex:none;}
+.main{flex:1; min-width:0; overflow:auto; padding:22px 26px;}
+/* 侧栏右侧内容列：主区 + 底部状态栏（状态栏不贯穿侧栏） */
+.content-col{flex:1; min-width:0; display:flex; flex-direction:column;}
+.content-col > .main, .content-col > .work{flex:1; min-height:0;}
diff --git a/.superpowers/prototype/index.html b/.superpowers/prototype/index.html
new file mode 100644
index 0000000..77fbdcc
--- /dev/null
+++ b/.superpowers/prototype/index.html
@@ -0,0 +1,544 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>岩美酒库 · 设计系统</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="atoms.css">
+<link rel="stylesheet" href="mobile-atoms.css">
+<style>
+  body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); transition:background-color .28s; overflow-x:hidden;}
+  /* 顶部条 */
+  .ds-top{position:sticky; top:0; z-index:50; height:58px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:0 22px;}
+  .ds-brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--heading); font-size:15px;}
+  .ds-brand .mk{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-weight:800;}
+  .ds-tag{font-size:var(--fs-sm); color:var(--muted); padding-left:6px; border-left:1px solid var(--border);}
+  .theme-seg{margin-left:auto; display:flex; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px;}
+  .theme-seg button{border:none; background:transparent; height:28px; padding:0 14px; border-radius:var(--r-pill); font-size:var(--fs-sm); color:var(--muted); cursor:pointer; font-family:var(--font); display:flex; align-items:center; gap:6px;}
+  .theme-seg button .d{width:10px; height:10px; border-radius:50%;}
+  .theme-seg button.on{background:var(--primary); color:var(--on-primary);}
+
+  .doc{display:flex; align-items:flex-start; max-width:1340px; margin:0 auto;}
+  .doc-nav{width:236px; flex:none; position:sticky; top:58px; height:calc(100vh - 58px); overflow:auto; border-right:1px solid var(--border); padding:18px 14px;}
+  .dgroup{font-size:var(--fs-xs); font-weight:700; color:var(--faint); letter-spacing:.6px; padding:14px 10px 6px;}
+  .dnav{display:block; padding:7px 10px; border-radius:var(--r-md); font-size:var(--fs-body); color:var(--muted); text-decoration:none; cursor:pointer;}
+  .dnav:hover{background:var(--bg); color:var(--text);}
+  .dnav.on{background:var(--brand50); color:var(--primary); font-weight:600;}
+
+  .doc-main{flex:1; min-width:0; padding:30px 40px 80px; max-width:1080px;}
+  .section{margin-bottom:46px; scroll-margin-top:74px;}
+  .section > h2{margin:0 0 4px; font-size:var(--fs-h1); color:var(--title);}
+  .section > .desc{margin:0 0 18px; font-size:var(--fs-body); color:var(--muted);}
+  .pcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden;}
+  .pcard-h{display:flex; align-items:baseline; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border-subtle);}
+  .pcard-h h3{margin:0; font-size:var(--fs-title); color:var(--heading);}
+  .pcard-h .tk{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono);}
+  .pcard-b{padding:18px 16px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
+
+  /* 色板 */
+  .sw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; width:100%;}
+  .sw{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface);}
+  .sw .band{display:block; width:100%; height:58px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);}
+  .sw .m{padding:8px 10px;}
+  .sw .m .n{font-size:var(--fs-sm); color:var(--text); font-weight:600;}
+  .sw .m .v{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono);}
+
+  /* 字体梯度 */
+  .type-row{display:flex; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid var(--border-subtle); width:100%;}
+  .type-row .tk{width:160px; font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono); flex:none;}
+  /* 间距/圆角 */
+  .scale{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; width:100%;}
+  .scale .box{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted);}
+  .scale .sq{background:var(--primary);}
+  .scale .rq{background:var(--brand50); border:1px solid var(--primary);}
+  .scale .sh{width:64px; height:48px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);}
+
+  /* UI Kit 卡 */
+  .kit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; width:100%;}
+  .kit{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s; text-decoration:none; color:inherit; display:block;}
+  .kit:hover{border-color:var(--brand400); box-shadow:var(--sh-2);}
+  .kit .thumb{height:130px; background:linear-gradient(135deg,var(--side-bg),var(--top-bg)); display:flex; align-items:center; justify-content:center; color:var(--on-primary);}
+  .kit .thumb svg{width:34px; height:34px; stroke-width:1.4; opacity:.92;}
+  .kit .kt{padding:12px 14px;}
+  .kit .kt b{display:block; font-size:var(--fs-body); color:var(--heading);}
+  .kit .kt span{font-size:var(--fs-xs); color:var(--muted);}
+  .kit.todo{opacity:.62;}
+  .kit.todo .thumb{background:var(--bg); color:var(--faint);}
+
+  .logo-lockup{display:flex; gap:16px; flex-wrap:wrap; width:100%;}
+  .lock{flex:1; min-width:220px; border-radius:var(--r-lg); padding:24px; display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px;}
+  .lock .mk{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:900;}
+  .lock.light{background:#F5F7FA; color:#1B2430;} .lock.light .mk{background:linear-gradient(135deg,#2563AC,#154072); color:#fff;}
+  .lock.dark{background:#15151C; color:#F6F6F9;} .lock.dark .mk{background:linear-gradient(135deg,#F5A300,#D98C00); color:#1A1408;}
+  .appicon{width:96px; height:96px; border-radius:22px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:900; box-shadow:var(--sh-2);}
+
+  /* 图标库网格 */
+  .icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; width:100%;}
+  .icell{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);}
+  .icell svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; color:var(--heading);}
+  .icell span{font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); text-align:center; word-break:break-all;}
+
+  /* 屏幕分组标签 + 移动端预览（registry 用：把 .m-* 固定定位收进手机框内） */
+  .kit-sub{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:700; color:var(--muted); margin:4px 2px 12px; letter-spacing:.4px;}
+  .kit-sub:not(:first-child){margin-top:26px;}
+  .kit-sub .ks-dot{width:7px; height:7px; border-radius:50%; background:var(--brand400);}
+  .mdemo{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; width:100%;}
+  .mphone{position:relative; width:328px; height:600px; flex:none; border:1px solid var(--border); border-radius:26px; overflow:hidden; background:var(--page); box-shadow:var(--sh-2);}
+  .mphone .m-top, .mphone .m-tabbar{position:absolute; left:0; right:0; transform:none; max-width:none;}
+  .mphone .m-fab{position:absolute; left:auto; right:16px; transform:none;}
+  .mphone .m-page{height:100%; overflow:auto;}
+  .mcol{flex:1; min-width:248px; display:flex; flex-direction:column; gap:18px;}
+  .mcol .mlab{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono); margin-bottom:-8px;}
+  .msheet-demo{position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);}
+</style>
+</head>
+<body>
+  <div class="ds-top">
+    <div class="ds-brand"><span class="mk">岩</span>岩美酒库</div>
+    <span class="ds-tag">设计系统 · Phase 0</span>
+    <div class="theme-seg" id="seg">
+      <button data-t="a"><span class="d" style="background:#2563AC"></span>A 经典蓝</button>
+      <button data-t="b"><span class="d" style="background:#F5A300"></span>B 琥珀</button>
+      <button data-t="c"><span class="d" style="background:#7C1F2C"></span>C 酒窖</button>
+    </div>
+  </div>
+
+  <div class="doc">
+    <nav class="doc-nav" id="docNav">
+      <div class="dgroup">UI Kit · 屏幕</div>
+      <a class="dnav" data-s="kit">桌面屏 · Desktop</a>
+      <a class="dnav" data-s="kit-m">移动屏 · Mobile</a>
+      <div class="dgroup">概览</div>
+      <a class="dnav" data-s="overview">Readme · 三层方法</a>
+      <div class="dgroup">品牌 Brand</div>
+      <a class="dnav" data-s="brand">Logo 锁版 / App 图标</a>
+      <div class="dgroup">色彩 Colors</div>
+      <a class="dnav" data-s="c-brand">品牌主色</a>
+      <a class="dnav" data-s="c-status">语义状态色</a>
+      <a class="dnav" data-s="c-neutral">中性 / 文本 / 描边</a>
+      <a class="dnav" data-s="c-chrome">导航 Chrome</a>
+      <div class="dgroup">字体 Type</div>
+      <a class="dnav" data-s="type">字体族 / 字号梯度</a>
+      <div class="dgroup">间距 Spacing</div>
+      <a class="dnav" data-s="spacing">圆角 / 间距 / 阴影</a>
+      <div class="dgroup">组件 Components</div>
+      <a class="dnav" data-s="comp">公用组件 · 桌面/移动共用</a>
+      <a class="dnav" data-s="m-comp">移动专属组件 .m-*</a>
+      <div class="dgroup">图标 Icons</div>
+      <a class="dnav" data-s="icons">图标库 · 全部</a>
+    </nav>
+
+    <main class="doc-main">
+      <section class="section" id="kit">
+        <h2>UI Kit · 桌面屏</h2><p class="desc">由原子组合而成的完整屏，点击进入可交互页面（随主题换色）。<b>桌面与移动共用同一套 tokens + 公用原子</b>，仅外壳/布局不同。</p>
+        <div class="kit-grid">
+          <a class="kit" href="screens/inventory.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg></div><div class="kt"><b>库存管理</b><span>桌面 · 筛选/弹窗/抽屉/分页</span></div></a>
+          <a class="kit" href="screens/stock-in-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></div><div class="kt"><b>入库单列表</b><span>KPI / 状态筛选 / 单据抽屉</span></div></a>
+          <a class="kit" href="screens/stock-out-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg></div><div class="kt"><b>出库单列表</b><span>客户 / 状态 / 明细抽屉</span></div></a>
+          <a class="kit" href="screens/partners.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></div><div class="kt"><b>往来单位</b><span>供应商/客户 · 应收应付</span></div></a>
+          <a class="kit" href="screens/products.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></div><div class="kt"><b>商品基础数据</b><span>名/系列/规格 · 香型筛选</span></div></a>
+          <a class="kit" href="screens/finance.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg></div><div class="kt"><b>财务管理</b><span>概览 · 趋势 / 应收应付 / 流水</span></div></a>
+          <a class="kit" href="screens/settings.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic58"/></svg></div><div class="kt"><b>系统设置</b><span>门店/用户/授权兑换券/偏好</span></div></a>
+          <a class="kit" href="screens/login.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg></div><div class="kt"><b>登录</b><span>双栏品牌 + 表单 · 三主题</span></div></a>
+          <a class="kit" href="screens/stock-in.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>新增入库单</b><span>录单 · 三级商品搜索/实时合计</span></div></a>
+          <a class="kit" href="screens/stock-out.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>新增出库单</b><span>录单 · 出库前库存校验</span></div></a>
+          <a class="kit" href="screens/inventory-check.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg></div><div class="kt"><b>库存盘点</b><span>实盘录入 · 差异盈亏</span></div></a>
+          <a class="kit" href="screens/product-detail.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg></div><div class="kt"><b>商品详情</b><span>库存分布 · 流水 · 价格历史</span></div></a>
+          <a class="kit" href="screens/devices.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg></div><div class="kt"><b>设备管理</b><span>打印机/扫码枪 · 连接状态</span></div></a>
+          <a class="kit" href="screens/notifications.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知中心</b><span>列表 · 类型筛选 / 未读</span></div></a>
+          <a class="kit" href="screens/notification.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知详情</b><span>正文 · 关联单据 / 操作</span></div></a>
+          <a class="kit" href="screens/about.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg></div><div class="kt"><b>关于我们</b><span>版本 · 更新日志 · 授权</span></div></a>
+          <a class="kit" href="screens/public-product.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic64"/></svg></div><div class="kt"><b>公开商品页 · 对外</b><span>扫码防伪验证（移动）</span></div></a>
+          <a class="kit" href="screens/public-shop.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic65"/></svg></div><div class="kt"><b>门店公开页 · 对外</b><span>门店商品目录（移动）</span></div></a>
+          <a class="kit" href="screens/register.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic66"/></svg></div><div class="kt"><b>注册新门店</b><span>开通向导 · 门店/管理员/授权</span></div></a>
+          <a class="kit" href="screens/users.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></div><div class="kt"><b>用户管理</b><span>成员/角色 · 新增编辑弹窗</span></div></a>
+          <a class="kit" href="screens/pricing.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg></div><div class="kt"><b>购买授权</b><span>时长套餐 · 版本档位</span></div></a>
+          <a class="kit" href="screens/checkout.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic67"/></svg></div><div class="kt"><b>确认订单</b><span>下单 · 开票 · 无支付占位</span></div></a>
+        </div>
+
+      </section>
+
+      <section class="section" id="kit-m">
+        <h2>UI Kit · 移动屏</h2><p class="desc">移动端外壳：底部 tab 栏 / 顶栏 / 底部 sheet。<b>窄窗或设备模式（⌘⌥M · 390px）查看最佳</b>；宽屏会自动居中成手机列。</p>
+        <div class="kit-grid">
+          <a class="kit" href="screens/m-inventory.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg></div><div class="kt"><b>库存 · 移动</b><span>KPI / 卡片流 / 筛选 sheet</span></div></a>
+          <a class="kit" href="screens/m-stock-in-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></div><div class="kt"><b>入库列表 · 移动</b><span>单据卡 / 状态 pill</span></div></a>
+          <a class="kit" href="screens/m-stock-in.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>入库录单 · 移动</b><span>全屏表单 / 底部操作条</span></div></a>
+          <a class="kit" href="screens/m-stock-out-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg></div><div class="kt"><b>出库列表 · 移动</b><span>客户 / 状态 pill</span></div></a>
+          <a class="kit" href="screens/m-stock-out.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>出库录单 · 移动</b><span>库存校验 / 底部操作条</span></div></a>
+          <a class="kit" href="screens/m-finance.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg></div><div class="kt"><b>财务 · 移动</b><span>KPI / 应收应付 / 流水</span></div></a>
+          <a class="kit" href="screens/m-me.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg></div><div class="kt"><b>我的 · 移动</b><span>hub 入口 / 账号</span></div></a>
+          <a class="kit" href="screens/m-partners.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></div><div class="kt"><b>往来单位 · 移动</b><span>供应商/客户 · 应收应付</span></div></a>
+          <a class="kit" href="screens/m-products.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></div><div class="kt"><b>基础数据 · 移动</b><span>商品档案 / 商品介绍 tab</span></div></a>
+          <a class="kit" href="screens/m-inventory-check.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg></div><div class="kt"><b>库存盘点 · 移动</b><span>盘点单 / 盈亏差异</span></div></a>
+          <a class="kit" href="screens/m-devices.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg></div><div class="kt"><b>设备管理 · 移动</b><span>打印机/扫码枪 · 在线状态</span></div></a>
+          <a class="kit" href="screens/m-settings.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg></div><div class="kt"><b>系统设置 · 移动</b><span>门店/偏好/数据 分组</span></div></a>
+          <a class="kit" href="screens/m-users.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></div><div class="kt"><b>用户管理 · 移动</b><span>成员 / 角色</span></div></a>
+          <a class="kit" href="screens/m-notifications.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知中心 · 移动</b><span>列表 / 类型 pill / 未读</span></div></a>
+          <a class="kit" href="screens/m-notification.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知详情 · 移动</b><span>正文 / 关联单据 / 操作</span></div></a>
+          <a class="kit" href="screens/m-about.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg></div><div class="kt"><b>关于 · 移动</b><span>版本 / 更新日志 / 授权</span></div></a>
+          <a class="kit" href="screens/m-login.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg></div><div class="kt"><b>登录 · 移动</b><span>品牌 + 表单</span></div></a>
+          <a class="kit" href="screens/m-register.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic66"/></svg></div><div class="kt"><b>注册新门店 · 移动</b><span>开通向导</span></div></a>
+        </div>
+      </section>
+
+      <section class="section" id="overview">
+        <h2>岩美酒库 · 设计系统</h2>
+        <p class="desc">三层方法：① <b>令牌层</b>（tokens.css，单源，按主题换色）→ ② <b>组件层</b>（atoms.css，所有屏复用）→ ③ <b>页面层</b>（screens/，只引用前两层）。先定底层原子，再组屏。右上角切 A/B/C 三主题，全站实时换色——这就是「改一处、全局生效」。</p>
+
+        <div class="pcard" style="border-color:var(--danger)">
+          <div class="pcard-h"><h3 style="color:var(--danger)">⛔ 设计系统铁律（单一真源）</h3><span class="tk">single source of truth</span></div>
+          <div class="pcard-b" style="display:block; color:var(--text); font-size:var(--fs-body); line-height:1.95;">
+            <div><b>1. 唯一来源。</b>所有页面用到的元素、组件、CSS 样式、颜色，<b>必须出自本设计系统</b>——颜色/间距/圆角/字号取自 <code>tokens.css</code> 的 CSS 变量，组件类取自 <code>atoms.css</code>，且都能在本页查到实样。</div>
+            <div><b>2. 先登记、后使用。</b>需要新元素/组件/样式/颜色时，<b>先加到本设计系统</b>（变量进 <code>tokens.css</code>、组件类进 <code>atoms.css</code>）并在本页登记展示，<b>之后</b>才能在 <code>screens/</code> 里引用。</div>
+            <div><b>3. 禁止系统外内容。</b>页面里<b>不允许</b>出现本系统不存在的类、硬编码颜色（<code>#hex</code>/<code>rgb()</code>，品牌 logo SVG 除外）、或一次性写死的内联尺寸/配色。<code>screens/*</code> 只 import <code>tokens.css</code> + <code>atoms.css</code>，只用已登记的变量与类。</div>
+            <div style="color:var(--muted)">违反任意一条即视为未完成——颜色不走 token、用了本页没有的组件、页面自带样式，都要先回到这里补登记。</div>
+          </div>
+        </div>
+
+        <div class="pcard"><div class="pcard-h"><h3>结构</h3><span class="tk">tokens.css · atoms.css · screens/*</span></div>
+          <div class="pcard-b" style="display:block; color:var(--muted); font-size:var(--fs-body); line-height:1.9;">
+            <div><code>tokens.css</code> — 三主题色阶 + 间距/圆角/阴影/字号（令牌层）</div>
+            <div><code>atoms.css</code> — 按钮·输入·Chip·徽章·KPI·表格·弹窗·抽屉·菜单（组件层）</div>
+            <div><code>screens/inventory.html</code> — 库存屏（页面层，import 上面两层）</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section" id="brand">
+        <h2>品牌 Brand</h2><p class="desc">三级品牌架构：<b>公司 岩美科技</b> → <b>产品 岩美酒库</b> → <b>门店租户</b>。下方为基于现有 logo 精修的标识系统。品牌色固定，不随界面 A/B/C 主题变化（仅提供反白变体）。</p>
+        <style>
+          .bmark{display:block;} .bmark svg{display:block;}
+          .arch{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; width:100%; min-width:0;}
+          .arch .lvl{border:1px solid var(--border); border-radius:var(--r-md); padding:14px; background:var(--surface);}
+          .arch .lvl .k{font-size:var(--fs-xs); color:var(--faint); font-weight:700; letter-spacing:.5px;}
+          .arch .lvl .n{font-size:var(--fs-title); color:var(--heading); font-weight:700; margin:4px 0 2px;}
+          .arch .lvl .u{font-size:var(--fs-sm); color:var(--muted);}
+          .lock2{display:flex; align-items:center; gap:14px;}
+          .lock2 .wm{display:flex; flex-direction:column; line-height:1;}
+          .lock2 .wm .big{font-size:30px; font-weight:800; color:#0F3057; letter-spacing:3px;}
+          .lock2 .wm .big sup{font-size:12px; font-weight:600; letter-spacing:0;}
+          .lock2 .wm .sub{font-size:11px; font-weight:500; color:#6E7888; letter-spacing:2px; margin-top:5px;}
+          .lock2.prod .wm .big{font-size:26px; letter-spacing:2px;}
+          .panel-dark{background:#0F3057; border-radius:var(--r-md);}
+          .panel-dark .big{color:#fff!important;} .panel-dark .sub{color:#ADC9EA!important;}
+          .mono-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
+          .vchip{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted);}
+          .vtile{border-radius:14px; overflow:hidden;}
+          .tenant{display:flex; gap:22px; flex-wrap:wrap;}
+          .tenant .row{display:flex; align-items:center; gap:11px;}
+          .tmono{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:19px;}
+          .tenant .row b{color:var(--heading); font-size:var(--fs-body);} .tenant .row span{color:var(--muted); font-size:var(--fs-xs); display:block;}
+          .clear{position:relative; display:inline-block; padding:22px; background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 6px,transparent 6px,transparent 12px); border:1px dashed var(--border); border-radius:var(--r-md);}
+          .ico-sizes{display:flex; gap:18px; align-items:flex-end;}
+          .ico{border-radius:22%; overflow:hidden; box-shadow:var(--sh-2);}
+        </style>
+
+        <div class="pcard"><div class="pcard-h"><h3>品牌架构</h3><span class="tk">公司 / 产品 / 门店 三级</span></div>
+          <div class="pcard-b"><div class="arch">
+            <div class="lvl"><div class="k">公司 COMPANY</div><div class="n">岩美科技</div><div class="u">软件厂商 · 官网/宣传/about · 企业 logo + 商标</div></div>
+            <div class="lvl"><div class="k">产品 PRODUCT</div><div class="n">岩美酒库</div><div class="u">SaaS 软件 · 窗口标题/登录/App 图标</div></div>
+            <div class="lvl"><div class="k">门店 TENANT</div><div class="n">鼎晟酒行 …</div><div class="u">购买软件的 toB 商店 · App 内左上角，每户自有名+标记</div></div>
+          </div></div></div>
+
+        <div class="pcard"><div class="pcard-h"><h3>企业 Logo · 现状（精修参考）</h3><span class="tk">现有标记 · 含商标 ™</span></div>
+          <div class="pcard-b" style="gap:30px">
+            <div class="lock2"><span class="bmark"><svg width="52" height="52" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
+              <div class="wm"><div class="big">岩美<sup>™</sup></div><div class="sub">岩美科技 · YANMEI TECH</div></div></div>
+            <div class="lock2 panel-dark" style="padding:18px 26px"><span class="bmark"><svg width="52" height="52" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#fff"/><g stroke="#0F3057" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
+              <div class="wm"><div class="big">岩美<sup>™</sup></div><div class="sub">岩美科技 · YANMEI TECH</div></div></div>
+          </div></div>
+
+        <div class="pcard"><div class="pcard-h"><h3>产品 Logo · 岩美酒库</h3><span class="tk">现有锁版精修</span></div>
+          <div class="pcard-b" style="gap:30px">
+            <div class="lock2 prod"><span class="bmark"><svg width="50" height="50" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
+              <div class="wm"><div class="big">岩美酒库</div><div class="sub">酒水进销存管理系统</div></div></div>
+          </div></div>
+
+        <div class="pcard"><div class="pcard-h"><h3>门店标识 · 自动字号</h3><span class="tk">取门店名首字 · App 内左上角</span></div>
+          <div class="pcard-b"><div class="tenant">
+            <div class="row"><div class="tmono" style="background:linear-gradient(135deg,#1B4F8E,#0F3057)">鼎</div><div><b>鼎晟酒行</b><span>DINGSHENG</span></div></div>
+            <div class="row"><div class="tmono" style="background:linear-gradient(135deg,#7C1F2C,#4A1420)">茅</div><div><b>茅韵名酒</b><span>MAOYUN</span></div></div>
+            <div class="row"><div class="tmono" style="background:linear-gradient(135deg,#D98C00,#9A6200)">老</div><div><b>老李酒水批发</b><span>LAOLI</span></div></div>
+          </div></div></div>
+
+        <div class="pcard"><div class="pcard-h"><h3>标记变体 / App 图标</h3><span class="tk">主体 / 反白 / 单色 · 圆角图标</span></div>
+          <div class="pcard-b" style="gap:28px">
+            <div class="mono-row">
+              <div class="vchip"><span class="vtile"><svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>主体</div>
+              <div class="vchip"><span class="vtile"><svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#fff" stroke="#DCE2EB"/><g stroke="#0F3057" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>反白</div>
+              <div class="vchip"><span class="vtile"><svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="none"/><g stroke="#232934" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#232934"/></svg></span>单色</div>
+            </div>
+            <div class="ico-sizes">
+              <div class="vchip"><span class="ico"><svg width="84" height="84" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>App 图标 · 1024</div>
+              <div class="vchip"><span class="ico"><svg width="48" height="48" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g></svg></span>64 · 省略酒滴</div>
+              <div class="vchip"><span class="ico"><svg width="30" height="30" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M16 32L23 18L32 26L41 18L48 32"/></g></svg></span>28 · 仅山形</div>
+            </div>
+          </div></div>
+
+        <div class="pcard"><div class="pcard-h"><h3>安全区 / 最小尺寸</h3><span class="tk">留白 = 标记高度的 1/3 · 最小 20px</span></div>
+          <div class="pcard-b"><span class="clear"><svg width="56" height="56" viewBox="0 0 64 64" style="display:block"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span></div></div>
+      </section>
+
+      <section class="section" id="c-brand"><h2>品牌主色</h2><p class="desc">主操作色与品牌色阶，随主题切换。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--primary,--primary-dark,--brand400,--brand50,--on-primary,--accent"></div></div></div></section>
+      <section class="section" id="c-status"><h2>语义状态色</h2><p class="desc">在售 / 预警 / 缺货 等状态。前景色与浅底成对。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--success,--success-bg,--warn,--warn-bg,--danger,--danger-bg"></div></div></div></section>
+      <section class="section" id="c-neutral"><h2>中性 / 文本 / 描边</h2><p class="desc">背景层级、文本层级与分隔线。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--page,--bg,--surface,--border,--border-subtle,--heading,--text,--muted,--faint"></div></div></div></section>
+      <section class="section" id="c-chrome"><h2>导航 Chrome</h2><p class="desc">顶栏与侧栏专属角色（与内容 surface 分离，故每主题可独立染色）。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--top-bg,--top-fg,--side-bg,--side-fg,--side-active-bg,--side-active-fg"></div></div></div></section>
+
+      <section class="section" id="type">
+        <h2>字体 Type</h2><p class="desc">正文/中文系统字体；数据用等宽（库存数、金额）。下面是字号梯度。</p>
+        <div class="pcard"><div class="pcard-h"><h3>字号梯度</h3><span class="tk">--fs-display … --fs-xs</span></div>
+          <div class="pcard-b" style="display:block">
+            <div class="type-row"><span class="tk">--fs-display 28</span><span style="font-size:28px; font-weight:700; color:var(--heading)">岩美酒库 Display</span></div>
+            <div class="type-row"><span class="tk">--fs-h1 21</span><span style="font-size:21px; font-weight:700; color:var(--title)">页面标题 库存管理</span></div>
+            <div class="type-row"><span class="tk">--fs-h2 17</span><span style="font-size:17px; font-weight:600; color:var(--heading)">区块标题</span></div>
+            <div class="type-row"><span class="tk">--fs-title 15</span><span style="font-size:15px; font-weight:600; color:var(--heading)">卡片标题</span></div>
+            <div class="type-row"><span class="tk">--fs-body 13</span><span style="font-size:13px; color:var(--text)">正文与表格内容 · 茅台飞天 53°</span></div>
+            <div class="type-row"><span class="tk">--fs-sm 12</span><span style="font-size:12px; color:var(--muted)">次要说明 / 标签</span></div>
+            <div class="type-row"><span class="tk">mono</span><span style="font-size:15px; color:var(--heading); font-family:var(--font-mono)">¥2,640,000 · 1,284 SKU</span></div>
+          </div></div>
+      </section>
+
+      <section class="section" id="spacing">
+        <h2>间距 Spacing</h2><p class="desc">圆角 / 间距网格 / 阴影系统，全主题统一。</p>
+        <div class="pcard"><div class="pcard-h"><h3>圆角</h3><span class="tk">--r-sm … --r-xl</span></div><div class="pcard-b"><div class="scale" id="scaleRadius"></div></div></div>
+        <div class="pcard"><div class="pcard-h"><h3>间距网格</h3><span class="tk">--sp-1 … --sp-8</span></div><div class="pcard-b"><div class="scale" id="scaleSpace"></div></div></div>
+        <div class="pcard"><div class="pcard-h"><h3>阴影</h3><span class="tk">--sh-1 / --sh-2 / --sh-3</span></div><div class="pcard-b"><div class="scale">
+          <div class="box"><div class="sh" style="box-shadow:var(--sh-1)"></div>sh-1</div>
+          <div class="box"><div class="sh" style="box-shadow:var(--sh-2)"></div>sh-2</div>
+          <div class="box"><div class="sh" style="box-shadow:var(--sh-3)"></div>sh-3</div>
+        </div></div></div>
+      </section>
+
+      <section class="section" id="comp">
+        <h2>公用组件 Components</h2><p class="desc">来自 <code>atoms.css</code> 的原子，<b>桌面与移动共用</b>（按钮 / 输入 / 徽章 / 分段 / 菜单 / 弹窗等）。随主题换色。移动专属原子见下一节。</p>
+        <div class="pcard"><div class="pcard-h"><h3>按钮</h3><span class="tk">.btn .primary/.ghost/.danger/.sm</span></div><div class="pcard-b">
+          <div class="btn primary"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增入库</div>
+          <div class="btn ghost">导出</div><div class="btn ghost sm">列设置</div><div class="btn danger">删除</div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>输入 / 搜索</h3><span class="tk">.input .searchbox .ctrl</span></div><div class="pcard-b">
+          <input class="input" style="max-width:220px" placeholder="商品名 / 拼音 / 编码">
+          <div class="searchbox" style="width:240px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="搜索"></div>
+          <div class="ctrl" style="max-width:200px"><span class="ph">选择往来单位…</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>分段切换 / 可搜索选择器</h3><span class="tk">.seg · .combo（录单网格用）</span></div><div class="pcard-b">
+          <div class="seg"><button class="on">入库</button><button>出库</button></div>
+          <div class="combo has" style="width:240px; flex:none"><input value="茅台 飞天 53°" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-close"/></svg></span></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>搜索下拉框（弹层）</h3><span class="tk">.combo + .combo-pop > .cp-search / .cp-body（单据头供应商/客户/仓库）</span></div><div class="pcard-b" style="align-items:flex-start; gap:20px">
+          <div class="combo" style="max-width:220px"><input placeholder="选择或搜索供应商…" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></span></div>
+          <div class="combo-pop" style="position:static; box-shadow:var(--sh-2); width:248px; display:flex">
+            <div class="cp-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input value="mt" readonly></div>
+            <div class="cp-body"><div class="cp-list">
+              <div class="cp-item sel"><span class="nm">茅台<span class="hl">华东</span>总代</span><small>GYS002</small><svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
+              <div class="cp-item cur"><span class="nm">名烟名酒城</span><small>GYS004</small></div>
+              <div class="cp-item"><span class="nm">华润万家配送</span><small>GYS005</small></div>
+            </div><div class="cp-new"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-plus"/></svg>新增「mt」到基础数据</div></div>
+          </div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>搜索下拉框 · 带结果统计</h3><span class="tk">data-summary="1" → .combo-pop > … + .cp-foot（内容多时启用，底部显示总返回条数）</span></div><div class="pcard-b" style="align-items:flex-start; gap:20px">
+          <div class="combo" style="max-width:220px"><input placeholder="选择或搜索供应商…" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></span></div>
+          <div class="combo-pop" style="position:static; box-shadow:var(--sh-2); width:248px; display:flex">
+            <div class="cp-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="搜索供应商…" readonly></div>
+            <div class="cp-body"><div class="cp-list">
+              <div class="cp-item sel"><span class="nm">鼎晟供应链</span><small>GYS001</small><svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
+              <div class="cp-item"><span class="nm">茅台华东总代</span><small>GYS002</small></div>
+              <div class="cp-item"><span class="nm">川酒集团批发</span><small>GYS003</small></div>
+              <div class="cp-item"><span class="nm">名烟名酒城</span><small>GYS004</small></div>
+              <div class="cp-item"><span class="nm">华润万家配送</span><small>GYS005</small></div>
+            </div></div>
+            <div class="cp-foot">共 <b>5</b> 条结果</div>
+          </div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>日期字段（滚轮选择）</h3><span class="tk">.datefield + .wheel-pop（年月日 · 单据/生产共用）· datewheel.js</span></div><div class="pcard-b" style="align-items:flex-start">
+          <div class="datefield" style="max-width:200px" data-val="2026-06-22"><span class="dval">2026-06-22</span><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg></div>
+          <div class="datefield" style="max-width:200px"><span class="dval ph">选择日期</span><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg></div>
+          <div class="wheel-pop show" style="position:static; box-shadow:none; width:248px"><div class="wheel-cols"><div class="wheel-center"></div>
+            <div class="wheel-col" style="overflow:hidden"><div class="wheel-item">2024</div><div class="wheel-item">2025</div><div class="wheel-item on">2026</div><div class="wheel-item">2027</div><div class="wheel-item">2028</div></div>
+            <div class="wheel-col" style="overflow:hidden"><div class="wheel-item">04</div><div class="wheel-item">05</div><div class="wheel-item on">06</div><div class="wheel-item">07</div><div class="wheel-item">08</div></div>
+            <div class="wheel-col" style="overflow:hidden"><div class="wheel-item">20</div><div class="wheel-item">21</div><div class="wheel-item on">22</div><div class="wheel-item">23</div><div class="wheel-item">24</div></div>
+          </div><div class="wheel-foot"><span class="wheel-today">今天</span><span class="wheel-ok">确定</span></div></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>筛选 Chip</h3><span class="tk">.chip · 内嵌列头筛选入口</span></div><div class="pcard-b">
+          <div class="chip">全部品类</div>
+          <div class="chip on">分类 <span class="cv">浓香</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+          <div class="chip">时间范围 <svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>状态徽章 · 全部</h3><span class="tk">.badge .b-* · 对齐 schema 真实枚举</span></div><div class="pcard-b" style="display:block">
+          <div style="display:flex;flex-direction:column;gap:13px">
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">库存 · 按 min_stock 派生</span><span class="badge b-在售">在售</span><span class="badge b-预警">预警</span><span class="badge b-缺货">缺货</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">单据 · 入库/出库</span><span class="badge b-草稿">草稿</span><span class="badge b-待审核">待审核</span><span class="badge b-已通过">已通过</span><span class="badge b-已驳回">已驳回</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">往来单位 · 启用停用</span><span class="badge b-启用">启用</span><span class="badge b-停用">停用</span><span class="badge b-供应商">供应商</span><span class="badge b-客户">客户</span><span class="badge b-两者">两者</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">用户角色</span><span class="badge b-管理员">管理员</span><span class="badge b-普通">普通</span><span class="badge b-只读">只读</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">设备在线状态</span><span class="badge b-在线">在线</span><span class="badge b-离线">离线</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">库存盘点</span><span class="badge b-进行中">进行中</span><span class="badge b-已完成">已完成</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">授权兑换券</span><span class="badge b-未使用">未使用</span><span class="badge b-已兑换">已兑换</span><span class="badge b-作废">作废</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">账单结清 · 收付</span><span class="badge b-未结清">未结清</span><span class="badge b-已结清">已结清</span><span class="badge b-收款">收款</span><span class="badge b-付款">付款</span></div>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">进价待定 · 调货暂估</span><span class="badge b-待定价">待定价</span><span class="pending-price">待定价</span><span style="font-size:var(--fs-xs);color:var(--faint)">（入库进价留空/0，确认进价后回填）</span></div>
+          </div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>KPI 卡</h3><span class="tk">.kpi</span></div><div class="pcard-b">
+          <div class="kpi" style="width:200px"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">SKU 总数</div><div class="v">1,284</div><div class="d up">▲ 2.3%</div></div>
+          <div class="kpi alert" style="width:200px"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="t">缺货预警</div><div class="v">17</div><div class="d down">需补货 6 项</div></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>表格行</h3><span class="tk">.table thead/tbody</span></div><div class="pcard-b" style="display:block">
+          <div class="table"><table><thead><tr><th>商品</th><th>分类</th><th class="num">库存</th><th><span class="fh filtered">状态 <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic68"/></svg></span></th></tr></thead><tbody>
+            <tr class="click"><td><div class="pname">茅台 飞天 53°</div><div class="pcode">MT-FT-500</div></td><td>酱香</td><td class="num"><span class="qty">128</span></td><td><span class="badge b-在售">在售</span></td></tr>
+            <tr class="click"><td><div class="pname">剑南春 水晶剑</div><div class="pcode">JNC-SJ-500</div></td><td>浓香</td><td class="num"><span class="qty low">8</span></td><td><span class="badge b-缺货">缺货</span></td></tr>
+          </tbody></table></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>提示条</h3><span class="tk">.notice info/danger（草稿恢复 / 驳回）</span></div><div class="pcard-b" style="display:block">
+          <div class="notice info"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg><div>检测到未提交的入库单草稿（06-21 11:20），是否恢复？</div><div class="nb"><span class="lk">恢复</span><span class="lk" style="color:var(--muted)">放弃</span></div></div>
+          <div class="notice danger" style="margin-bottom:0"><svg viewBox="0 0 24 24"><use href="#i-ic69"/></svg><div>单据被驳回：单价高于近期采购价，请核实后重报。</div></div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>单据明细行（商品 / 系列规格分列）</h3><span class="tk">.lines .lr · .lcell .ln/.lcode/.lser/.lspec</span></div><div class="pcard-b" style="display:block">
+          <div class="lines" style="max-width:480px"><div class="lh" style="grid-template-columns:1fr 124px 40px 64px 78px"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">单价</span><span style="text-align:right">金额</span></div>
+            <div class="lr" style="grid-template-columns:1fr 124px 40px 64px 78px;align-items:start"><span class="lcell"><span class="ln">泸州老窖 特曲</span><span class="lcode">LZLJ-TQ-52-500</span></span><span class="lcell"><span class="lser">特曲</span><span class="lspec">52° 500ml×6</span></span><span style="text-align:right;font-family:var(--font-mono)">48</span><span style="text-align:right;font-family:var(--font-mono)">¥320</span><span class="amt">¥15,360</span></div>
+          </div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>抽屉操作分组</h3><span class="tk">.dactions · .dact-group/.dact-label/.dact-row（审核类 / 打印类）</span></div><div class="pcard-b" style="display:block">
+          <div class="dactions" style="margin-top:0">
+            <div class="dact-group"><span class="dact-label">单据审核</span><div class="dact-row"><div class="btn primary sm">审核通过</div><div class="btn danger sm">驳回</div><div class="btn ghost sm">结清</div><div class="btn danger sm">退单</div><div class="btn primary sm">提交审核</div></div></div>
+            <div class="dact-group"><span class="dact-label">打印</span><div class="dact-row"><div class="btn ghost sm"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg>打印标签</div><div class="btn ghost sm"><svg viewBox="0 0 24 24"><use href="#i-ic50"/></svg>打印单据</div></div></div>
+          </div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>覆盖层（交互）</h3><span class="tk">.menu · .overlay/.modal · .drawer · .toast</span></div><div class="pcard-b">
+          <div class="btn ghost" onclick="demoMenu(event)">下拉菜单</div>
+          <div class="btn ghost" onclick="document.getElementById('demoModal').classList.add('show')">弹窗</div>
+          <div class="btn ghost" onclick="document.getElementById('demoDrawer').classList.add('show')">抽屉</div>
+          <div class="btn ghost" onclick="toast('操作成功 ✓')">Toast</div>
+        </div></div>
+        <div class="pcard"><div class="pcard-h"><h3>分页 / 移动卡 / 状态栏 / 通知 / 遮罩</h3><span class="tk">.pager · .mcard · .statusbar · .notify-pop · .drawer-mask （列表/壳层原子）</span></div><div class="pcard-b" style="display:block">
+          <div class="pager" style="max-width:360px"><span>每页 8 条 · 共 24</span><div class="pg"><button disabled>‹</button><button class="cur">1</button><button>2</button><button>3</button><button>›</button></div></div>
+          <div class="mcard" style="max-width:360px;margin-top:14px"><div class="mcard-head"><span class="mt">茅台 飞天 53°</span><span class="msub">MT-FT-500</span><span class="badge b-在售" style="margin-left:auto">在售</span></div></div>
+          <div style="margin-top:16px"><div class="statusbar" style="position:static;border-radius:var(--r-md)"><div class="sb-group"><span class="sb-i"><svg viewBox="0 0 24 24"><use href="#i-ic44"/></svg><b>DSJH-001</b></span><span class="sb-i"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg>当前 18:00:00</span></div><div class="sb-group right"><span class="sb-i ok"><svg viewBox="0 0 24 24"><use href="#i-cloud"/></svg>已连接</span></div></div></div>
+          <div style="margin-top:16px"><div class="notify-pop show" style="position:static;width:330px"><div class="np-head"><h4>通知</h4><span class="np-clear">全部已读</span></div><div class="np-list"><div class="np-item unread"><div class="np-ic warn"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="np-tx"><div class="np-t">入库单 待审核</div><div class="np-d">茅台华东总代 · 3 项</div></div><div class="np-time">10 分钟前</div></div></div><div class="np-foot">查看全部</div></div></div>
+          <p style="font-size:var(--fs-xs);color:var(--muted);margin:18px 0 8px"><b>通知中心列表行</b> <code>.nt-item</code> / 类型图标 <code>.nt-ic</code>（warn / danger / info / ok）—— 通知列表页与详情页共用，桌面/移动一致：</p>
+          <div style="max-width:460px"><a class="nt-item unread" style="cursor:default"><span class="nt-ic warn"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg></span><div class="nt-bd"><div class="nt-t"><span class="nt-dot"></span><span class="nt-tt">入库单 RK-20260620-001 待审核</span><span class="nt-time">10 分钟前</span></div><div class="nt-d">茅台华东总代 · 3 项 · ¥48,360</div></div></a>
+            <a class="nt-item" style="cursor:default"><span class="nt-ic danger"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></span><div class="nt-bd"><div class="nt-t"><span class="nt-tt">五粮液 普五 库存预警</span><span class="nt-time">1 小时前</span></div><div class="nt-d">当前 6 件，低于安全库存 6</div></div></a></div>
+          <p style="font-size:var(--fs-xs);color:var(--muted);margin:14px 0 0">遮罩 <code>.drawer-mask</code>：抽屉/弹层背后的半透明背板，点击关闭。</p>
+        </div></div>
+      </section>
+
+    
+      <section class="section" id="m-comp">
+        <h2>移动专属组件 .m-*</h2><p class="desc">来自 <code>mobile-atoms.css</code> 的移动专属原子，由 <code>mobile-shell.js</code> 装配外壳。<b>复用上方公用原子</b>（按钮/徽章/分段/输入），此处只展示移动新增的 <code>.m-*</code>。</p>
+        <div style="margin:0 0 16px"><a class="btn ghost" href="screens/mobile-kit.html"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg>打开移动 UI Kit · 全部 .m-* 实机展示</a></div>
+        <div class="pcard"><div class="pcard-h"><h3>移动壳 + 列表（实机预览）</h3><span class="tk">.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row · .m-fab</span></div>
+          <div class="pcard-b" style="align-items:flex-start"><div class="mdemo">
+            <div class="mphone">
+              <div class="m-top"><div class="m-title">库存</div><div class="m-actions"><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-shirt"/></svg></div><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg><span class="m-dot">3</span></div><div class="m-av">王</div></div></div>
+              <div class="m-page has-tabs"><div class="m-scroll">
+                <div class="m-kpi">
+                  <div class="k"><div class="kl">SKU 总数</div><div class="kv">1,284</div><div class="kd up">▲ 2.3%</div></div>
+                  <div class="k"><div class="kl">库存货值</div><div class="kv">¥264万</div><div class="kd up">▲ 1.5%</div></div>
+                  <div class="k"><div class="kl">在库数量</div><div class="kv">18,920</div><div class="kd">件</div></div>
+                  <div class="k"><div class="kl">缺货预警</div><div class="kv">17</div><div class="kd warn">需补货 6</div></div>
+                </div>
+                <div class="m-search" style="margin-top:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="商品名 / 拼音 / 编码"></div>
+                <div class="m-filters"><div class="m-pill on">全部</div><div class="m-pill">酱香</div><div class="m-pill">浓香</div><div class="m-pill">清香</div></div>
+                <div class="m-section">商品 · 共 10</div>
+                <a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">茅台 飞天 53°</div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
+                <a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">剑南春 水晶剑</div><div class="mc-sub">JNC-SJ-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-缺货">缺货</span><span class="mc-amt">8 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
+              </div></div>
+              <nav class="m-tabbar">
+                <a class="m-tab on"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg><span>库存</span></a>
+                <a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg><span>入库</span></a>
+                <a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg><span>出库</span></a>
+                <a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg><span>财务</span></a>
+                <a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg><span>我的</span></a>
+              </nav>
+              <div class="m-fab"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+            </div>
+
+            <div class="mcol">
+              <div><div class="mlab">.m-form · .m-field · .m-input · .m-select</div>
+                <div class="m-form" style="margin-top:10px">
+                  <div class="m-field"><label>商品名称</label><input class="m-input" placeholder="如：茅台 飞天"></div>
+                  <div class="m-field"><label>分类（香型）</label><div class="m-select"><span>酱香</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+                  <div class="m-field" style="margin-bottom:0"><label>备注</label><textarea class="m-input" placeholder="选填…"></textarea></div>
+                </div></div>
+
+              <div><div class="mlab">.m-sheet-h · .m-opt（底部 sheet 内容）</div>
+                <div class="msheet-demo" style="margin-top:10px">
+                  <div class="m-sheet-h"><h3>筛选 · 香型</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2"><use href="#i-close"/></svg></div>
+                  <div style="padding:4px 16px 8px">
+                    <div class="m-opt sel">全部<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
+                    <div class="m-opt">酱香<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
+                    <div class="m-opt">浓香<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
+                  </div>
+                </div></div>
+
+              <div><div class="mlab">.m-hub（我的 · 功能入口）</div>
+                <div class="m-hub" style="margin-top:10px">
+                  <a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></span>往来单位<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+                  <a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></span>基础数据<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+                  <a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg></span>系统设置<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+                </div></div>
+
+              <div><div class="mlab">.m-actionbar（全屏表单底部操作条）</div>
+                <div style="position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-top:10px">
+                  <div class="m-actionbar" style="position:relative; padding-bottom:12px">
+                    <div style="flex:1; display:flex; flex-direction:column; line-height:1.2"><span style="font-size:var(--fs-xs); color:var(--muted)">合计</span><b style="font-size:var(--fs-title); color:var(--heading); font-family:var(--font-mono)">¥10,500</b></div>
+                    <div class="btn ghost">存草稿</div><div class="btn primary">提交审核</div>
+                  </div>
+                </div></div>
+            </div>
+          </div></div>
+        </div>
+      </section>
+
+      <section class="section" id="icons">
+        <h2>图标 Icons</h2><p class="desc">全部 92 个图标登记在 <code>screens/icons.js</code> 的 SVG sprite（单一真源）。各屏用 <code>&lt;svg&gt;&lt;use href="#i-xxx"/&gt;&lt;/svg&gt;</code> 引用——<b>改一处、全局生效</b>。新增图标先在此登记 symbol，再用 use 引用；门禁 ❽ 禁止内联图标。</p>
+        <div class="pcard"><div class="pcard-h"><h3>图标库 · 92 个</h3><span class="tk">icons.js &lt;symbol&gt; · &lt;use href="#i-*"&gt;</span></div><div class="pcard-b" style="display:block"><div class="icon-grid"><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg><span>i-arrow-left</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span>i-bottle</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg><span>i-box</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg><span>i-box-2</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg><span>i-check</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg><span>i-chevron-down</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-chevron-left"/></svg><span>i-chevron-left</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg><span>i-chevron-right</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-close"/></svg><span>i-close</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg><span>i-download</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg><span>i-edit</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-eye"/></svg><span>i-eye</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg><span>i-gear</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-megaphone"/></svg><span>i-megaphone</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-menu"/></svg><span>i-menu</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg><span>i-plus</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg><span>i-refresh</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><span>i-search</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-shield"/></svg><span>i-shield</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-shield-2"/></svg><span>i-shield-2</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg><span>i-upload</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-bug"/></svg><span>i-bug</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-lightbulb"/></svg><span>i-lightbulb</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic01"/></svg><span>i-ic01</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic02"/></svg><span>i-ic02</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic03"/></svg><span>i-ic03</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg><span>i-ic04</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic05"/></svg><span>i-ic05</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg><span>i-ic06</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg><span>i-ic07</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg><span>i-ic08</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic09"/></svg><span>i-ic09</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic10"/></svg><span>i-ic10</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic11"/></svg><span>i-ic11</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic12"/></svg><span>i-ic12</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic13"/></svg><span>i-ic13</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic14"/></svg><span>i-ic14</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic15"/></svg><span>i-ic15</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic16"/></svg><span>i-ic16</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg><span>i-ic17</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg><span>i-ic18</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic19"/></svg><span>i-ic19</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic20"/></svg><span>i-ic20</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic21"/></svg><span>i-ic21</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic22"/></svg><span>i-ic22</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic23"/></svg><span>i-ic23</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg><span>i-ic24</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic25"/></svg><span>i-ic25</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic26"/></svg><span>i-ic26</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg><span>i-ic27</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg><span>i-ic28</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic29"/></svg><span>i-ic29</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic30"/></svg><span>i-ic30</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic31"/></svg><span>i-ic31</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic32"/></svg><span>i-ic32</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg><span>i-ic33</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic34"/></svg><span>i-ic34</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic35"/></svg><span>i-ic35</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic36"/></svg><span>i-ic36</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg><span>i-ic37</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic38"/></svg><span>i-ic38</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic39"/></svg><span>i-ic39</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic40"/></svg><span>i-ic40</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic41"/></svg><span>i-ic41</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg><span>i-ic42</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic43"/></svg><span>i-ic43</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic44"/></svg><span>i-ic44</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg><span>i-ic45</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic46"/></svg><span>i-ic46</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg><span>i-ic47</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg><span>i-ic48</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg><span>i-ic49</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic50"/></svg><span>i-ic50</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic51"/></svg><span>i-ic51</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic52"/></svg><span>i-ic52</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic53"/></svg><span>i-ic53</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic54"/></svg><span>i-ic54</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic55"/></svg><span>i-ic55</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg><span>i-ic56</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg><span>i-ic57</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic58"/></svg><span>i-ic58</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg><span>i-ic59</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg><span>i-ic60</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg><span>i-ic61</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg><span>i-ic62</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg><span>i-ic63</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic64"/></svg><span>i-ic64</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic65"/></svg><span>i-ic65</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic66"/></svg><span>i-ic66</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic67"/></svg><span>i-ic67</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic68"/></svg><span>i-ic68</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic69"/></svg><span>i-ic69</span></div></div></div></div>
+      </section>
+    </main>
+  </div>
+
+  <!-- 组件演示：弹窗 / 抽屉 / toast -->
+  <div class="overlay" id="demoModal"><div class="modal"><div class="modal-head"><h3>弹窗示例</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="this.closest('.overlay').classList.remove('show')"><use href="#i-close"/></svg></div><div class="modal-body" style="color:var(--muted); font-size:var(--fs-body)">这是 <code>.modal</code> 原子。库存的「新增入库」即基于它。</div><div class="modal-foot"><div class="btn ghost" onclick="this.closest('.overlay').classList.remove('show')">取消</div><div class="btn primary" onclick="this.closest('.overlay').classList.remove('show'); toast('已保存 ✓')">保存</div></div></div></div>
+  <div class="drawer" id="demoDrawer"><div class="drawer-head"><h3>抽屉示例</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="this.closest('.drawer').classList.remove('show')"><use href="#i-close"/></svg></div><div class="drawer-body"><div class="drow"><span>编码</span><b>MT-FT-500</b></div><div class="drow"><span>库存</span><b>128 件</b></div><div class="drow"><span>状态</span><b><span class="badge b-在售">在售</span></b></div></div></div>
+  <div class="toast" id="toast"></div>
+
+<script>
+const THEMES={a:{n:'经典蓝'},b:{n:'琥珀'},c:{n:'酒窖'}};
+function setTheme(t){ document.documentElement.dataset.theme=t; document.querySelectorAll('#seg button').forEach(b=>b.classList.toggle('on',b.dataset.t===t)); localStorage.setItem('jiu-theme',t); renderTokens(); }
+document.querySelectorAll('#seg button').forEach(b=>b.onclick=()=>setTheme(b.dataset.t));
+
+// 色板从实际 CSS 变量读取（换主题刷新）
+function renderTokens(){
+  const cs=getComputedStyle(document.documentElement);
+  document.querySelectorAll('[data-swatches]').forEach(grid=>{
+    grid.innerHTML = grid.dataset.swatches.split(',').map(tok=>{
+      const v=cs.getPropertyValue(tok).trim();
+      return `<div class="sw"><div class="band" style="background:var(${tok})"></div><div class="m"><div class="n">${tok.replace('--','')}</div><div class="v">${v||'—'}</div></div></div>`;
+    }).join('');
+  });
+}
+// 圆角 / 间距 比例尺
+function renderScales(){
+  const radii=[['sm',4],['md',6],['lg',10],['xl',14]];
+  document.getElementById('scaleRadius').innerHTML = radii.map(([n,px])=>`<div class="box"><div class="rq" style="width:56px;height:56px;border-radius:var(--r-${n})"></div>r-${n} · ${px}</div>`).join('');
+  const sp=[['1',4],['2',8],['3',12],['4',16],['5',20],['6',24],['8',32]];
+  document.getElementById('scaleSpace').innerHTML = sp.map(([n,px])=>`<div class="box"><div class="sq" style="width:var(--sp-${n});height:36px;border-radius:2px"></div>sp-${n} · ${px}</div>`).join('');
+}
+
+// 文档导航 scrollspy
+const navLinks=[...document.querySelectorAll('.dnav')];
+navLinks.forEach(a=>a.onclick=(e)=>{ e.preventDefault(); document.getElementById(a.dataset.s).scrollIntoView({behavior:'smooth',block:'start'}); });
+const obs=new IntersectionObserver(es=>{ es.forEach(en=>{ if(en.isIntersecting){ const id=en.target.id; navLinks.forEach(a=>a.classList.toggle('on',a.dataset.s===id)); } }); },{rootMargin:'-60px 0px -75% 0px'});
+document.querySelectorAll('.section').forEach(s=>obs.observe(s));
+
+// 组件演示
+let menuEl=null;
+function demoMenu(e){ if(menuEl){menuEl.remove();menuEl=null;return;} const r=e.currentTarget.getBoundingClientRect(); menuEl=document.createElement('div'); menuEl.className='menu'; menuEl.style.left=r.left+'px'; menuEl.style.top=(r.bottom+6)+'px'; menuEl.innerHTML=['酱香','浓香','清香'].map((x,i)=>`<div class="menu-item ${i==1?'sel':''}">${i==1?'<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg>':'<span style="width:16px"></span>'}${x}</div>`).join(''); document.body.appendChild(menuEl); }
+document.addEventListener('click',e=>{ if(menuEl && !menuEl.contains(e.target) && !e.target.closest('[onclick^="demoMenu"]')) {menuEl.remove();menuEl=null;} });
+let toastT; function toast(m){ const t=document.getElementById('toast'); t.textContent=m; t.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>t.classList.remove('show'),2000); }
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){ document.querySelectorAll('.overlay.show,.drawer.show').forEach(x=>x.classList.remove('show')); } });
+
+setTheme(localStorage.getItem('jiu-theme')||'a'); renderScales();
+</script>
+<script src="screens/icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/mobile-atoms.css b/.superpowers/prototype/mobile-atoms.css
new file mode 100644
index 0000000..a11e262
--- /dev/null
+++ b/.superpowers/prototype/mobile-atoms.css
@@ -0,0 +1,127 @@
+/* ============================================================
+   移动端原子层 .m-*  —— 复用 tokens.css（颜色/3主题/间距/圆角/字号），
+   仅新增移动专属组件（顶栏 / 底 tab / 页面骨架 / KPI / 列表卡 / sheet / 表单 / 搜索 / FAB / 筛选 pill）。
+   单一真源：颜色一律走 var(--*)，禁硬编码。kit 展示见 mobile-kit.html。
+   ============================================================ */
+
+/* ---- 移动壳：顶部 app 栏 ---- */
+.m-top{position:fixed; top:0; left:0; right:0; height:52px; display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--top-bg); color:var(--top-fg); z-index:var(--z-header);}
+.m-top .m-back{width:30px; height:30px; margin-left:-6px; display:flex; align-items:center; justify-content:center; color:var(--top-fg); cursor:pointer;}
+.m-top .m-back svg{width:22px; height:22px; stroke-width:2;}
+.m-top .m-title{font-size:var(--fs-title); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.m-top .m-actions{margin-left:auto; display:flex; align-items:center; gap:13px;}
+.m-top .m-ic{width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--top-fg); position:relative; cursor:pointer;}
+.m-top .m-ic svg{width:20px; height:20px; stroke-width:1.9;}
+.m-top .m-dot{position:absolute; top:-2px; right:-2px; min-width:15px; height:15px; padding:0 3px; box-sizing:border-box; border-radius:var(--r-pill); background:var(--danger); color:#fff; font-size:var(--fs-xs); display:flex; align-items:center; justify-content:center;}
+.m-top .m-av{width:28px; height:28px; border-radius:50%; background:var(--brand-mid); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); cursor:pointer;}
+
+/* ---- 移动壳：底部 tab 栏 ---- */
+.m-tabbar{position:fixed; bottom:0; left:0; right:0; min-height:56px; display:flex; background:var(--surface); border-top:1px solid var(--border); z-index:var(--z-header); padding-bottom:env(safe-area-inset-bottom);}
+.m-tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 0; color:var(--muted); font-size:var(--fs-xs); text-decoration:none; cursor:pointer;}
+.m-tab svg{width:22px; height:22px; stroke-width:1.8;}
+.m-tab.on{color:var(--primary);}
+.m-tab.on svg{stroke-width:2;}
+
+/* ---- 页面骨架（固定顶 + 滚动体 + 固定底）---- */
+.m-page{min-height:100vh; background:var(--page); padding-top:52px; padding-bottom:64px; box-sizing:border-box;}
+.m-page.has-tabs{padding-bottom:calc(56px + env(safe-area-inset-bottom) + 8px);}
+.m-scroll{padding:14px;}
+
+/* ---- KPI 卡（2×2）---- */
+.m-kpi{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
+.m-kpi .k{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px;}
+.m-kpi .k .kl{font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:5px;}
+.m-kpi .k .kl svg{width:13px; height:13px; stroke-width:1.9; color:var(--brand400);}
+.m-kpi .k .kv{font-size:var(--fs-h2); font-weight:800; color:var(--heading); margin-top:5px; letter-spacing:.2px;}
+.m-kpi .k .kd{font-size:var(--fs-xs); margin-top:3px; color:var(--muted);}
+.m-kpi .k .kd.up{color:var(--success);} .m-kpi .k .kd.down{color:var(--danger);} .m-kpi .k .kd.warn{color:var(--warn);}
+
+/* ---- 列表项卡片 ---- */
+.m-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:13px 14px; margin-bottom:10px; text-decoration:none; color:inherit;}
+.m-card:active{border-color:var(--primary);}
+.m-row{display:flex; align-items:center; gap:12px;}
+.m-row .mc-main{min-width:0; flex:1;}
+.m-row .mc-nm{font-weight:600; color:var(--heading); font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.m-row .mc-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:3px; font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.m-row .mc-right{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none;}
+.m-row .mc-amt{font-weight:700; color:var(--heading); font-size:var(--fs-body); font-family:var(--font-mono);}
+.m-row .mc-chev{color:var(--faint); flex:none;}
+.m-row .mc-chev svg{width:18px; height:18px; stroke-width:2;}
+.m-card .mc-foot{display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:var(--fs-xs); color:var(--muted);}
+
+/* ---- 底部 sheet（筛选 / 选择 / 动作）---- */
+.m-sheet-mask{position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s; z-index:var(--z-drawer-scrim);}
+.m-sheet-mask.show{opacity:1; pointer-events:auto;}
+.m-sheet{position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(100%); transition:transform .26s; z-index:var(--z-drawer); max-height:86vh; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom);}
+.m-sheet.show{transform:translateY(0);}
+.m-sheet .grip{width:36px; height:4px; border-radius:var(--r-pill); background:var(--border); margin:8px auto 2px;}
+.m-sheet-h{display:flex; align-items:center; padding:10px 16px 12px; border-bottom:1px solid var(--border-subtle);}
+.m-sheet-h h3{margin:0; font-size:var(--fs-title); color:var(--heading);}
+.m-sheet-h .x{margin-left:auto; width:22px; height:22px; color:var(--muted); cursor:pointer;}
+.m-sheet-b{padding:14px 16px; overflow:auto;}
+.m-opt{display:flex; align-items:center; gap:10px; padding:13px 4px; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body); color:var(--text); cursor:pointer;}
+.m-opt:last-child{border-bottom:none;}
+.m-opt .ck{margin-left:auto; color:var(--primary); width:18px; height:18px; opacity:0;}
+.m-opt.sel .ck{opacity:1;} .m-opt.sel{color:var(--primary); font-weight:600;}
+.m-opt .oic{width:20px; height:20px; color:var(--muted); flex:none;}
+
+/* ---- 移动表单（全宽堆叠，触控高度 44）---- */
+.m-form{display:block;}
+.m-field{margin-bottom:14px;}
+.m-field > label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px; font-weight:600;}
+.m-input{width:100%; box-sizing:border-box; height:44px; border:1px solid var(--border); border-radius:var(--r-md); padding:0 12px; font-size:var(--fs-body); color:var(--text); background:var(--surface); outline:none; font-family:var(--font);}
+.m-input:focus{border-color:var(--primary);}
+textarea.m-input{height:auto; min-height:88px; padding:10px 12px; resize:vertical; line-height:1.7;}
+.m-select{display:flex; align-items:center; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--text); font-size:var(--fs-body); cursor:pointer;}
+.m-select .ph{color:var(--faint);}
+.m-select svg{margin-left:auto; width:16px; height:16px; color:var(--muted);}
+
+/* ---- 移动搜索条 ---- */
+.m-search{display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);}
+.m-search svg{width:17px; height:17px; stroke-width:2; color:var(--muted); flex:none;}
+.m-search input{border:none; outline:none; background:transparent; flex:1; min-width:0; font-size:var(--fs-body); color:var(--text); font-family:var(--font);}
+
+/* ---- 横向筛选 pill 行 ---- */
+.m-filters{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-top:10px;}
+.m-filters::-webkit-scrollbar{display:none;}
+.m-pill{flex:none; height:32px; padding:0 13px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
+.m-pill svg{width:13px; height:13px; stroke-width:2;}
+.m-pill.on{background:var(--brand50); border-color:var(--primary); color:var(--primary); font-weight:600;}
+
+/* ---- 悬浮新增 FAB ---- */
+.m-fab{position:fixed; right:16px; bottom:74px; width:52px; height:52px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-3); z-index:var(--z-fab); cursor:pointer;}
+.m-fab svg{width:24px; height:24px; stroke-width:2.2;}
+
+/* ---- 返回设计系统 悬浮球（左下，低调）---- */
+/* 调试用「返回设计系统」球：默认右下，宽屏时移到手机框外的视口右下角（真实 app 不含此球） */
+.m-ds-fab{position:fixed; left:auto; right:16px; bottom:134px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.9; text-decoration:none;}
+.m-ds-fab:active{color:var(--primary); border-color:var(--primary);}
+.m-ds-fab svg{width:20px; height:20px; stroke-width:2;}
+
+/* ---- 分组标题 / 空态 ---- */
+.m-section{font-size:var(--fs-sm); font-weight:700; color:var(--muted); margin:16px 2px 8px; letter-spacing:.4px;}
+.m-empty{text-align:center; color:var(--muted); padding:48px 16px; font-size:var(--fs-sm);}
+.m-empty svg{width:38px; height:38px; stroke-width:1.4; color:var(--faint); display:block; margin:0 auto 10px;}
+
+/* ---- 底部固定操作条（表单提交）---- */
+.m-actionbar{position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px; padding:12px 14px; background:var(--surface); border-top:1px solid var(--border); z-index:var(--z-header); padding-bottom:calc(12px + env(safe-area-inset-bottom));}
+.m-actionbar .btn{flex:1; justify-content:center;}
+
+/* ---- 我的：hub 列表行 ---- */
+.m-hub{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;}
+.m-hub a{display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--border-subtle); text-decoration:none; color:var(--text); font-size:var(--fs-body);}
+.m-hub a:last-child{border-bottom:none;}
+.m-hub a .hic{width:34px; height:34px; border-radius:var(--r-md); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
+.m-hub a .hic svg{width:18px; height:18px; stroke-width:1.8;}
+.m-hub a .hchev{margin-left:auto; color:var(--faint);}
+.m-hub a .hchev svg{width:18px; height:18px; stroke-width:2;}
+
+/* ---- 桌面预览：窄屏(<600=真机)全宽；宽屏(≥600)整套居中成 430px 手机列，不拉伸 ---- */
+@media (min-width:600px){
+  .m-top, .m-tabbar, .m-actionbar{ left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:430px; }
+  .m-page{ max-width:430px; margin:0 auto; min-height:100vh; box-shadow:var(--sh-3); }
+  .m-fab{ right:auto; left:50%; transform:translateX(147px); }
+  .m-ds-fab{ left:auto; right:24px; bottom:24px; transform:none; }
+  .m-sheet{ left:50%; right:auto; max-width:430px; width:100%; transform:translateX(-50%) translateY(100%); }
+  .m-sheet.show{ transform:translateX(-50%) translateY(0); }
+}
diff --git a/.superpowers/prototype/screens/about-preview.html b/.superpowers/prototype/screens/about-preview.html
new file mode 100644
index 0000000..d597d1b
--- /dev/null
+++ b/.superpowers/prototype/screens/about-preview.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>关于我们 · 5 套设计预览 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+
+  /* 预览切换条 */
+  .vbar{display:flex; align-items:center; gap:8px; padding:14px 26px; border-bottom:1px solid var(--border); background:var(--surface); flex:none; flex-wrap:wrap;}
+  .vbar .vt{font-size:var(--fs-sm); color:var(--muted); margin-right:6px;}
+  .vbar .vbtn{height:32px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-family:var(--font);}
+  .vbar .vbtn.on{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}
+  .stage{flex:1; min-height:0; overflow:auto; background:var(--bg);}
+
+  /* ===== 共用品牌 mark ===== */
+  .ymk{display:inline-flex;}
+  .ymk svg{display:block;}
+
+  /* ====== 样式 A：极简居中 ====== */
+  .vA{max-width:680px; margin:0 auto; padding:64px 24px; text-align:center;}
+  .vA .logo{width:84px; height:84px; margin:0 auto 22px;}
+  .vA h1{margin:0; font-size:var(--fs-display); font-weight:800; color:var(--heading); letter-spacing:1px;}
+  .vA .ver{display:inline-block; margin-top:10px; padding:3px 12px; border-radius:var(--r-pill); background:var(--brand50); color:var(--primary); font-size:var(--fs-sm); font-weight:600; font-family:var(--font-mono);}
+  .vA .tag{margin:18px auto 0; max-width:440px; font-size:var(--fs-h2); color:var(--muted); line-height:1.7; font-weight:400;}
+  .vA .cta{margin-top:28px; display:flex; gap:12px; justify-content:center;}
+  .vA .meta{margin-top:46px; display:flex; gap:0; justify-content:center; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden;}
+  .vA .meta .m{flex:1; padding:18px 10px; border-right:1px solid var(--border-subtle);}
+  .vA .meta .m:last-child{border-right:none;}
+  .vA .meta .mv{font-size:var(--fs-h1); font-weight:800; color:var(--heading); font-family:var(--font-mono);}
+  .vA .meta .mk{font-size:var(--fs-xs); color:var(--muted); margin-top:4px;}
+  .vA .foot{margin-top:40px; font-size:var(--fs-xs); color:var(--faint);}
+
+  /* ====== 样式 B：左右分栏 Hero ====== */
+  .vB{max-width:1000px; margin:0 auto; padding:44px 26px;}
+  .vB .row{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;}
+  .vB .lead .logo{width:64px; height:64px; margin-bottom:18px;}
+  .vB .lead h1{margin:0 0 4px; font-size:var(--fs-display); font-weight:800; color:var(--heading);}
+  .vB .lead .by{font-size:var(--fs-body); color:var(--muted); font-family:var(--font-mono);}
+  .vB .lead .mission{margin:18px 0 0; font-size:var(--fs-h2); color:var(--text); line-height:1.75; font-weight:400;}
+  .vB .lead .cta{margin-top:24px; display:flex; gap:12px;}
+  .vB .stats{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
+  .vB .stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px;}
+  .vB .stat .sv{font-size:var(--fs-display); font-weight:800; color:var(--primary); font-family:var(--font-mono);}
+  .vB .stat .sk{font-size:var(--fs-sm); color:var(--muted); margin-top:5px;}
+  .vB .caps{margin-top:30px; display:flex; flex-wrap:wrap; gap:9px;}
+  .vB .cap{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); font-size:var(--fs-sm); color:var(--text); font-weight:600;}
+  .vB .cap svg{width:14px; height:14px; stroke-width:1.9; color:var(--brand400);}
+
+  /* ====== 样式 C：数据驱动（数字墙）====== */
+  .vC .band{background:linear-gradient(150deg,var(--side-bg),var(--side-active-bg)); color:var(--side-active-fg); padding:50px 26px 56px; text-align:center;}
+  .vC .band .logo{width:60px; height:60px; margin:0 auto 16px;}
+  .vC .band h1{margin:0; font-size:var(--fs-display); font-weight:800; letter-spacing:.5px;}
+  .vC .band .tag{margin:12px auto 0; max-width:460px; font-size:var(--fs-body); color:var(--side-fg); line-height:1.7;}
+  .vC .wall{max-width:980px; margin:-30px auto 0; padding:0 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
+  .vC .num{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 16px; text-align:center; box-shadow:var(--sh-1);}
+  .vC .num .nv{font-size:30px; font-weight:800; color:var(--heading); font-family:var(--font-mono);}
+  .vC .num .nk{font-size:var(--fs-sm); color:var(--muted); margin-top:5px;}
+  .vC .body{max-width:980px; margin:34px auto 0; padding:0 26px 44px;}
+  .vC .sh{font-size:var(--fs-h2); font-weight:700; color:var(--heading); margin:0 0 14px;}
+  .vC .vals{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
+  .vC .val{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px;}
+  .vC .val .vi{width:38px; height:38px; border-radius:var(--r-md); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
+  .vC .val .vi svg{width:20px; height:20px; stroke-width:1.8;}
+  .vC .val b{display:block; font-size:var(--fs-title); color:var(--heading); margin-bottom:5px;}
+  .vC .val span{font-size:var(--fs-sm); color:var(--muted); line-height:1.6;}
+
+  /* ====== 样式 D：杂志长卷 ====== */
+  .vD{max-width:760px; margin:0 auto; padding:48px 26px 56px;}
+  .vD .dhead{display:flex; align-items:center; gap:16px; padding-bottom:30px; border-bottom:1px solid var(--border);}
+  .vD .dhead .logo{width:56px; height:56px; flex:none;}
+  .vD .dhead h1{margin:0; font-size:var(--fs-h1); font-weight:800; color:var(--heading);}
+  .vD .dhead .by{font-size:var(--fs-sm); color:var(--muted); margin-top:3px;}
+  .vD .sec{padding:30px 0; border-bottom:1px solid var(--border-subtle);}
+  .vD .sec .label{font-size:var(--fs-xs); color:var(--brand400); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px;}
+  .vD .sec h2{margin:0 0 12px; font-size:var(--fs-h1); font-weight:700; color:var(--heading);}
+  .vD .sec p{margin:0; font-size:var(--fs-h2); color:var(--text); line-height:1.85; font-weight:400;}
+  .vD .inline-stats{display:flex; gap:34px; margin-top:20px;}
+  .vD .inline-stats .s b{font-size:26px; font-weight:800; color:var(--primary); font-family:var(--font-mono);}
+  .vD .inline-stats .s span{display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:3px;}
+  .vD .clist{display:flex; flex-direction:column; gap:11px; margin-top:6px;}
+  .vD .ci{display:flex; gap:11px; font-size:var(--fs-body); color:var(--text);}
+  .vD .ci svg{width:18px; height:18px; stroke-width:1.9; color:var(--success); flex:none; margin-top:1px;}
+
+  /* ====== 样式 E：卡片仪表盘 ====== */
+  .vE{max-width:1000px; margin:0 auto; padding:34px 26px 44px;}
+  .vE .hero{background:linear-gradient(135deg,var(--brand50),var(--surface)); border:1px solid var(--border); border-radius:var(--r-xl); padding:30px 28px; display:flex; align-items:center; gap:20px; margin-bottom:18px;}
+  .vE .hero .logo{width:64px; height:64px; flex:none;}
+  .vE .hero h1{margin:0; font-size:var(--fs-h1); font-weight:800; color:var(--heading);}
+  .vE .hero .by{font-size:var(--fs-body); color:var(--muted); margin-top:4px;}
+  .vE .hero .ver{margin-left:auto; text-align:right;}
+  .vE .hero .ver .vv{font-size:var(--fs-title); font-weight:700; color:var(--primary); font-family:var(--font-mono);}
+  .vE .hero .ver .vs{font-size:var(--fs-xs); color:var(--success); margin-top:3px;}
+  .vE .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
+  .vE .gc{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px;}
+  .vE .gc.full{grid-column:1 / -1;}
+  .vE .gc h3{margin:0 0 14px; font-size:var(--fs-title); color:var(--heading); display:flex; align-items:center; gap:8px;}
+  .vE .gc h3 svg{width:16px; height:16px; stroke-width:1.9; color:var(--brand400);}
+  .vE .kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body);}
+  .vE .kv:last-child{border-bottom:none;}
+  .vE .kv .k{color:var(--muted);} .vE .kv .v{color:var(--heading); font-weight:600;}
+  .vE .kv .v.ok{color:var(--success);}
+  .vE .lk{display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body); color:var(--text); cursor:pointer;}
+  .vE .lk:last-child{border-bottom:none;}
+  .vE .lk svg{width:16px; height:16px; stroke-width:1.8; color:var(--muted);}
+  .vE .lk .ar{margin-left:auto; color:var(--faint);}
+
+  .ds-fab{position:fixed; right:22px; bottom:46px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="about"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="content-col" style="flex:1;min-width:0;display:flex;flex-direction:column">
+      <div class="vbar">
+        <span class="vt">关于我们 · 5 套设计预览：</span>
+        <button class="vbtn on" data-v="A" onclick="show('A')">样式 A · 极简居中</button>
+        <button class="vbtn" data-v="B" onclick="show('B')">样式 B · 左右分栏</button>
+        <button class="vbtn" data-v="C" onclick="show('C')">样式 C · 数据墙</button>
+        <button class="vbtn" data-v="D" onclick="show('D')">样式 D · 杂志长卷</button>
+        <button class="vbtn" data-v="E" onclick="show('E')">样式 E · 卡片仪表盘</button>
+      </div>
+      <div class="stage" id="stage"></div>
+    </div>
+  </div>
+</div>
+
+<script src="shell.js"></script>
+<script>
+const MK=(s)=>`<span class="ymk"><svg width="${s}" height="${s}" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>`;
+const CAPS=['进销存','财务对账','多门店','防伪溯源','多端覆盖'];
+const ICN={box:'<path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/>',shield:'<path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/>',money:'<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/>',phone:'<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/>',shop:'<path d="M3 9l1.5-5h15L21 9M4 9h16v11H4z"/>',check:'<path d="M20 6 9 17l-5-5"/>'};
+
+const V = {
+  A: () => `<div class="vA">
+    <div class="logo">${MK(84)}</div>
+    <h1>岩美酒库</h1>
+    <div class="ver">v1.0.72</div>
+    <div class="tag">为酒行打造的进销存、财务与防伪溯源一体化管理系统</div>
+    <div class="cta"><div class="btn primary"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>检查更新</div><div class="btn ghost">联系客服</div></div>
+    <div class="meta">
+      <div class="m"><div class="mv">1200+</div><div class="mk">服务门店</div></div>
+      <div class="m"><div class="mv">380万</div><div class="mk">防伪验证</div></div>
+      <div class="m"><div class="mv">5 端</div><div class="mk">多端覆盖</div></div>
+      <div class="m"><div class="mv">99.9%</div><div class="mk">服务在线率</div></div>
+    </div>
+    <div class="foot">© 2026 岩美科技 · YANMEI TECH · 保留所有权利</div>
+  </div>`,
+
+  B: () => `<div class="vB"><div class="row">
+    <div class="lead">
+      <div class="logo">${MK(64)}</div>
+      <h1>岩美酒库</h1>
+      <div class="by">岩美科技 · YANMEI TECH</div>
+      <div class="mission">让每一家酒行的进销存、财务对账与防伪溯源都简单可靠地数字化。</div>
+      <div class="cta"><div class="btn primary">检查更新</div><div class="btn ghost">官网 yanmei.tech</div></div>
+    </div>
+    <div class="stats">
+      <div class="stat"><div class="sv">1200+</div><div class="sk">服务门店</div></div>
+      <div class="stat"><div class="sv">380万</div><div class="sk">防伪验证次数</div></div>
+      <div class="stat"><div class="sv">v1.0.72</div><div class="sk">当前版本</div></div>
+      <div class="stat"><div class="sv">99.9%</div><div class="sk">服务在线率</div></div>
+    </div>
+  </div>
+  <div class="caps">${CAPS.map(c=>`<span class="cap"><svg viewBox="0 0 24 24">${ICN.check}</svg>${c}</span>`).join('')}</div>
+  </div>`,
+
+  C: () => `<div class="vC">
+    <div class="band"><div class="logo">${MK(60)}</div><h1>岩美酒库</h1><div class="tag">酒水进销存 · 财务 · 防伪溯源一体化 · 岩美科技出品</div></div>
+    <div class="wall">
+      <div class="num"><div class="nv">1200+</div><div class="nk">服务门店</div></div>
+      <div class="num"><div class="nv">380万</div><div class="nk">防伪验证</div></div>
+      <div class="num"><div class="nv">5 端</div><div class="nk">Web/Mac/Win/iOS/安卓</div></div>
+      <div class="num"><div class="nv">99.9%</div><div class="nk">服务在线率</div></div>
+    </div>
+    <div class="body">
+      <h2 class="sh">核心能力</h2>
+      <div class="vals">
+        <div class="val"><div class="vi"><svg viewBox="0 0 24 24">${ICN.box}</svg></div><b>进销存一体</b><span>入库出库、库存预警、批次与序列号全流程管理。</span></div>
+        <div class="val"><div class="vi"><svg viewBox="0 0 24 24">${ICN.money}</svg></div><b>财务对账</b><span>应收应付、收支流水、往来对账一目了然。</span></div>
+        <div class="val"><div class="vi"><svg viewBox="0 0 24 24">${ICN.shield}</svg></div><b>防伪溯源</b><span>一瓶一码，扫码验真、上链存证，守护品牌。</span></div>
+      </div>
+    </div>
+  </div>`,
+
+  D: () => `<div class="vD">
+    <div class="dhead"><div class="logo">${MK(56)}</div><div><h1>岩美酒库</h1><div class="by">岩美科技 · YANMEI TECH · v1.0.72</div></div></div>
+    <div class="sec"><div class="label">About</div><h2>关于岩美</h2><p>岩美酒库是岩美科技为酒水批发与零售门店打造的进销存管理系统，把入库出库、库存、财务对账、防伪溯源与多端协同整合在一套简洁可靠的产品里。</p></div>
+    <div class="sec"><div class="label">Mission</div><h2>我们的使命</h2><p>让每一家酒行都能用得起、用得好数字化工具，把繁琐的台账与对账交给系统，把时间还给生意。</p>
+      <div class="inline-stats"><div class="s"><b>1200+</b><span>服务门店</span></div><div class="s"><b>380万</b><span>防伪验证</span></div><div class="s"><b>99.9%</b><span>在线率</span></div></div>
+    </div>
+    <div class="sec" style="border-bottom:none"><div class="label">Capabilities</div><h2>核心能力</h2>
+      <div class="clist">${['进销存：入库出库 / 库存预警 / 批次序列号','财务：应收应付 / 收支流水 / 往来对账','防伪溯源：一瓶一码 / 扫码验真 / 上链存证','多端覆盖：Web / macOS / Windows / iOS / 安卓'].map(t=>`<div class="ci"><svg viewBox="0 0 24 24">${ICN.check}</svg>${t}</div>`).join('')}</div>
+    </div>
+  </div>`,
+
+  E: () => `<div class="vE">
+    <div class="hero"><div class="logo">${MK(64)}</div><div><h1>岩美酒库</h1><div class="by">酒水进销存 · 财务 · 防伪溯源 · 岩美科技出品</div></div><div class="ver"><div class="vv">v1.0.72</div><div class="vs">● 已是最新版</div></div></div>
+    <div class="grid">
+      <div class="gc"><h3><svg viewBox="0 0 24 24">${ICN.shield}</svg>授权信息</h3>
+        <div class="kv"><span class="k">授权状态</span><span class="v ok">已授权</span></div>
+        <div class="kv"><span class="k">到期日</span><span class="v">2027-03-15</span></div>
+        <div class="kv"><span class="k">剩余天数</span><span class="v">267 天</span></div>
+      </div>
+      <div class="gc"><h3><svg viewBox="0 0 24 24">${ICN.box}</svg>产品信息</h3>
+        <div class="kv"><span class="k">当前版本</span><span class="v">v1.0.72</span></div>
+        <div class="kv"><span class="k">多端覆盖</span><span class="v">Web/Mac/Win/iOS/安卓</span></div>
+        <div class="kv"><span class="k">出品方</span><span class="v">岩美科技</span></div>
+      </div>
+      <div class="gc full"><h3><svg viewBox="0 0 24 24">${ICN.shop}</svg>公司与支持</h3>
+        <div class="lk"><svg viewBox="0 0 24 24"><use href="#i-ic01"/></svg>官网 yanmei.tech<span class="ar">›</span></div>
+        <div class="lk"><svg viewBox="0 0 24 24"><use href="#i-ic02"/></svg>微信客服 yanmei-kf<span class="ar">›</span></div>
+        <div class="lk"><svg viewBox="0 0 24 24"><use href="#i-ic03"/></svg>隐私政策 / 服务条款<span class="ar">›</span></div>
+      </div>
+    </div>
+  </div>`,
+};
+
+function show(v){ document.querySelectorAll('.vbtn').forEach(b=>b.classList.toggle('on',b.dataset.v===v)); document.getElementById('stage').innerHTML=V[v](); document.getElementById('stage').scrollTop=0; }
+show('A');
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/about.html b/.superpowers/prototype/screens/about.html
new file mode 100644
index 0000000..844ce11
--- /dev/null
+++ b/.superpowers/prototype/screens/about.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>关于我们 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+
+  .col{max-width:760px; margin:0 auto;}
+
+  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:18px; transition:background-color .28s,border-color .28s;}
+  .card-h{font-size:var(--fs-h2); font-weight:700; color:var(--heading); margin:0 0 16px; display:flex; align-items:center; gap:8px;}
+  .card-h svg{width:18px; height:18px; stroke-width:1.8; color:var(--primary);}
+
+  /* ---- Hero 卡（logo 在最上） ---- */
+  .hero-card{background:linear-gradient(135deg,var(--brand50),var(--surface));}
+  .hero-top{display:flex; align-items:center; gap:18px;}
+  .hero-top .mk{display:inline-flex; flex:none;}
+  .hero-top .hx{flex:1; min-width:0;}
+  .hero-top h1{margin:0; font-size:var(--fs-h1); font-weight:800; color:var(--heading); letter-spacing:.3px;}
+  .hero-top .by{font-size:var(--fs-body); color:var(--muted); margin-top:4px;}
+  .hero-top .ver-badge{flex:none; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 13px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); font-size:var(--fs-sm); font-weight:700; color:var(--primary); font-family:var(--font-mono);}
+  .hero-top .ver-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--success);}
+  .hero-acts{display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border-subtle); flex-wrap:wrap;}
+  .hero-acts .fb-intro{flex:1; min-width:180px;}
+  .hero-acts .fb-h{font-size:var(--fs-title); font-weight:700; color:var(--heading);}
+  .hero-acts .fb-d{font-size:var(--fs-sm); color:var(--muted); margin-top:3px;}
+  .hero-acts .fb-acts{display:flex; gap:10px; flex:none;}
+  .hero-links{margin-top:14px; padding-top:16px; border-top:1px solid var(--border-subtle);}
+
+  /* ---- 产品信息（卡片网格） ---- */
+  .info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
+  .info-cell{background:var(--bg); border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:14px 16px;}
+  .info-cell .ik{font-size:var(--fs-xs); color:var(--muted);}
+  .info-cell .iv{font-size:var(--fs-title); font-weight:700; color:var(--heading); margin-top:7px; line-height:1.4;}
+  .info-cell .iv.mono{font-family:var(--font-mono);}
+
+  /* ---- 更新日志时间线 ---- */
+  .timeline{position:relative; padding-left:24px;}
+  .timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--border);}
+  .tl-item{position:relative; padding-bottom:22px;}
+  .tl-item:last-child{padding-bottom:0;}
+  .tl-item::before{content:""; position:absolute; left:-23px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--primary);}
+  .tl-item.cur::before{background:var(--primary);}
+  .tl-head{display:flex; align-items:baseline; gap:10px;}
+  .tl-ver{font-size:var(--fs-body); font-weight:700; color:var(--heading); font-family:var(--font-mono);}
+  .tl-date{font-size:var(--fs-xs); color:var(--faint);}
+  .tl-tag{font-size:var(--fs-xs); font-weight:600; padding:1px 7px; border-radius:var(--r-pill); margin-bottom:6px; display:inline-block;}
+  .tl-feat{background:var(--success-bg); color:var(--success);}
+  .tl-impr{background:var(--info-soft); color:var(--primary);}
+  .tl-fix{background:var(--warn-bg); color:var(--warn);}
+  .tl-group{margin-top:8px;}
+  .tl-list{margin:4px 0 0; padding-left:18px;}
+  .tl-list li{font-size:var(--fs-sm); color:var(--text); line-height:1.7;}
+  .timeline:not(.expanded) .tl-item.extra{display:none;}
+  .tl-morebar{margin-top:14px; display:flex; justify-content:center;}
+  .tl-morebar .btn svg{width:14px; height:14px; transition:transform .2s;}
+  .timeline.expanded ~ .tl-morebar .btn svg{transform:rotate(180deg);}
+
+  /* ---- 授权信息（原样式） ---- */
+  .lic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
+  .lic-cell{background:var(--bg); border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:14px;}
+  .lic-cell .lk{font-size:var(--fs-xs); color:var(--muted);}
+  .lic-cell .lv{font-size:var(--fs-h2); font-weight:700; color:var(--heading); margin-top:6px; font-family:var(--font-mono);}
+  .lic-cell .lv.ok{color:var(--success);}
+
+  /* ---- 公司 / 支持（原样式） ---- */
+  .links{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
+  .link-row{display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); color:var(--text); font-size:var(--fs-body); cursor:pointer; transition:border-color .15s;}
+  .link-row:hover{border-color:var(--brand400);}
+  .link-row svg{width:17px; height:17px; stroke-width:1.7; color:var(--primary); flex:none;}
+  .link-row .arr{margin-left:auto; color:var(--faint);}
+  .co-line{font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px; line-height:1.6;}
+
+  .foot{text-align:center; font-size:var(--fs-xs); color:var(--faint); margin-top:24px;}
+
+  /* 反馈弹窗 */
+  .fb-modal{width:520px;}
+  .fb-modal textarea{width:100%; box-sizing:border-box; min-height:120px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-md); padding:11px; font-size:var(--fs-body); color:var(--text); background:var(--surface); outline:none; font-family:var(--font); line-height:1.7;}
+  .fb-modal textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+  .fb-types{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
+
+  .ds-fab{position:fixed; right:22px; bottom:46px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="about"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="col">
+
+        <!-- Hero 卡：logo + 检查更新/问题反馈 + 公司与支持（合并） -->
+        <div class="card hero-card">
+          <div class="hero-top">
+            <span class="mk"><svg width="62" height="62" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
+            <div class="hx"><h1>岩美酒库</h1><div class="by">酒水进销存 · 财务对账 · 防伪溯源一体化 · 岩美科技出品</div></div>
+          </div>
+          <div class="hero-links">
+            <div class="links">
+              <div class="link-row" onclick="toast('打开官网 yanmei.tech（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic01"/></svg>官网<span class="arr">›</span></div>
+              <div class="link-row" onclick="toast('微信客服：yanmei-kf（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic02"/></svg>微信客服<span class="arr">›</span></div>
+              <div class="link-row" onclick="toast('查看隐私政策（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic03"/></svg>隐私政策<span class="arr">›</span></div>
+              <div class="link-row" onclick="toast('查看服务条款（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg>服务条款<span class="arr">›</span></div>
+            </div>
+          </div>
+          <div class="hero-acts">
+            <div class="fb-intro"><div class="fb-h">意见反馈</div><div class="fb-d">遇到 Bug 或有功能建议，欢迎告诉我们</div></div>
+            <div class="fb-acts">
+              <div class="btn primary" onclick="openFeedback('Bug 报告')"><svg viewBox="0 0 24 24"><use href="#i-bug"/></svg>反馈 Bug</div>
+              <div class="btn ghost" onclick="openFeedback('功能建议')"><svg viewBox="0 0 24 24"><use href="#i-lightbulb"/></svg>功能建议</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 产品信息 -->
+        <div class="card">
+          <h3 class="card-h"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>产品信息</h3>
+          <div class="info-grid">
+            <div class="info-cell" style="display:flex;align-items:center;justify-content:space-between;gap:12px"><div><div class="ik">当前版本</div><div class="iv mono">v1.0.72</div></div><div class="btn ghost sm" onclick="toast('已是最新版 v1.0.72 ✓')"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>检查更新</div></div>
+            <div class="info-cell"><div class="ik">出品方</div><div class="iv">岩美科技 · YANMEI TECH</div></div>
+            <div class="info-cell"><div class="ik">多端覆盖</div><div class="iv">Web · macOS · Windows · iOS · 安卓</div></div>
+            <div class="info-cell"><div class="ik">产品定位</div><div class="iv">酒水进销存 / 财务 / 防伪溯源</div></div>
+          </div>
+        </div>
+
+        <!-- 授权信息（原样式） -->
+        <div class="card">
+          <h3 class="card-h"><svg viewBox="0 0 24 24"><use href="#i-shield"/></svg>授权信息</h3>
+          <div class="lic-grid">
+            <div class="lic-cell"><div class="lk">授权状态</div><div class="lv ok">已授权</div></div>
+            <div class="lic-cell"><div class="lk">到期日</div><div class="lv">2027-03-15</div></div>
+            <div class="lic-cell"><div class="lk">剩余天数</div><div class="lv">267 天</div></div>
+          </div>
+        </div>
+
+        <!-- 更新日志（最近 2 条 + 更多） -->
+        <div class="card">
+          <h3 class="card-h"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg>更新日志</h3>
+          <div class="timeline" id="timeline"></div>
+          <div class="tl-morebar" id="tlMoreBar"><div class="btn ghost" onclick="toggleMore()"><span id="tlMoreLabel">更多历史更新</span><svg id="tlMoreCaret" viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+        </div>
+
+        <div class="foot">© 2026 岩美科技 · 保留所有权利</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 问题反馈 -->
+<div class="overlay" id="ovFb"><div class="modal fb-modal">
+  <div class="modal-head"><h3>问题反馈</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeFeedback()"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="fb-types" id="fbTypes">
+      <div class="chip on" data-t="功能建议" onclick="pickFb('功能建议')">功能建议</div>
+      <div class="chip" data-t="使用问题" onclick="pickFb('使用问题')">使用问题</div>
+      <div class="chip" data-t="Bug 报告" onclick="pickFb('Bug 报告')">Bug 报告</div>
+      <div class="chip" data-t="其他" onclick="pickFb('其他')">其他</div>
+    </div>
+    <textarea id="fbText" placeholder="请描述你遇到的问题或建议，我们会尽快跟进…"></textarea>
+    <div style="margin-top:12px"><input class="input" id="fbContact" placeholder="联系方式（手机 / 微信，选填）"></div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeFeedback()">取消</div><div class="btn primary" onclick="submitFb()">提交反馈</div></div>
+</div></div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const CHANGELOG=[
+  {ver:'v1.0.72',date:'2026-06-22',cur:true,groups:[
+    {tag:'feat',label:'新功能',items:['用户管理新增四级角色：超级管理员 / 管理员 / 操作员 / 只读','商品公开页编辑器：图片、品鉴笔记、适饮建议可视化编辑并实时预览']},
+    {tag:'impr',label:'改进',items:['顶栏 / 侧栏 / 状态栏统一为单一来源，全局一处生效','金额卡片改用「万」单位展示，更符合阅读习惯']},
+  ]},
+  {ver:'v1.0.66',date:'2026-06-18',groups:[
+    {tag:'feat',label:'新功能',items:['入库 / 出库列表新增搜索框，支持单号、商品、往来单位关键字检索','入库 / 出库 / 库存页新增一键刷新']},
+    {tag:'fix',label:'修复',items:['入库审核库存沿用明细真实快照名','库存列表过滤软删商品，修复历史导入占位顶替']},
+  ]},
+  {ver:'v1.0.63',date:'2026-06-05',groups:[
+    {tag:'feat',label:'新功能',items:['新增设备管理：标签机 / 小票机 / 扫码枪 / 电子秤接入与测试打印','商品名搜索支持全拼与首字母']},
+    {tag:'impr',label:'改进',items:['移动端列表改为卡片流，窄屏不再横向溢出']},
+  ]},
+  {ver:'v1.0.60',date:'2026-05-22',groups:[
+    {tag:'feat',label:'新功能',items:['往来单位对账单与应收应付明细抽屉']},
+    {tag:'impr',label:'改进',items:['三套主题（经典蓝 / 琥珀 / 酒窖）一键切换并记忆']},
+    {tag:'fix',label:'修复',items:['修复出库审核库存不足时未正确回滚的问题']},
+  ]},
+];
+const SHOWN=2;
+function renderLog(){
+  const tagCls={feat:'tl-feat',impr:'tl-impr',fix:'tl-fix'};
+  document.getElementById('timeline').innerHTML=CHANGELOG.map((v,i)=>`
+    <div class="tl-item ${v.cur?'cur':''} ${i>=SHOWN?'extra':''}">
+      <div class="tl-head"><span class="tl-ver">${v.ver}</span><span class="tl-date">${v.date}</span></div>
+      ${v.groups.map(g=>`<div class="tl-group"><span class="tl-tag ${tagCls[g.tag]}">${g.label}</span><ul class="tl-list">${g.items.map(i=>`<li>${i}</li>`).join('')}</ul></div>`).join('')}
+    </div>`).join('');
+  document.getElementById('tlMoreBar').hidden = CHANGELOG.length<=SHOWN;
+}
+function toggleMore(){
+  const tl=document.getElementById('timeline');
+  const on=tl.classList.toggle('expanded');
+  document.getElementById('tlMoreLabel').textContent = on ? '收起' : '更多历史更新';
+}
+
+let fbType='功能建议';
+function openFeedback(t){ if(t) pickFb(t); document.getElementById('ovFb').classList.add('show'); }
+function closeFeedback(){ document.getElementById('ovFb').classList.remove('show'); }
+function pickFb(t){ fbType=t; document.querySelectorAll('#fbTypes .chip').forEach(c=>c.classList.toggle('on',c.dataset.t===t)); }
+function submitFb(){ const txt=document.getElementById('fbText').value.trim(); if(!txt){ toast('请先填写反馈内容'); return; } closeFeedback(); document.getElementById('fbText').value=''; toast('已提交反馈（'+fbType+'），感谢你的反馈 ✓'); }
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closeFeedback();} });
+renderLog();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/checkout.html b/.superpowers/prototype/screens/checkout.html
new file mode 100644
index 0000000..a5c2054
--- /dev/null
+++ b/.superpowers/prototype/screens/checkout.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>确认订单 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== App-shell ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .crumb{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:12px;}
+  .crumb a{color:var(--muted); text-decoration:none;}
+  .crumb a:hover{color:var(--primary);}
+  .head h1{margin:0 0 18px; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+
+  .checkout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; max-width:960px;}
+  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:18px; transition:background-color .28s,border-color .28s;}
+  .card h2{margin:0 0 14px; font-size:var(--fs-h2); color:var(--heading);}
+
+  /* 订单明细 */
+  .item{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border-subtle);}
+  .item:last-child{border-bottom:none;}
+  .item .ic{width:46px; height:46px; border-radius:var(--r-md); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
+  .item .ic svg{width:24px; height:24px; stroke-width:1.7;}
+  .item .meta b{display:block; font-size:var(--fs-body); color:var(--heading); font-weight:600;}
+  .item .meta span{font-size:var(--fs-sm); color:var(--muted);}
+  .item .amt{margin-left:auto; font-size:18px; font-weight:700; color:var(--heading); font-family:var(--font-mono);}
+
+  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
+  .form-grid .field.full{grid-column:1/-1;}
+
+  /* 付款方式（占位） */
+  .pay{display:flex; flex-direction:column; gap:10px;}
+  .pm{display:flex; align-items:center; gap:12px; border:1.5px solid var(--border); border-radius:var(--r-md); padding:13px 15px; cursor:pointer; transition:.15s;}
+  .pm:hover{border-color:var(--brand400);}
+  .pm.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+  .pm .pic{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff;}
+  .pm .pic svg{width:19px; height:19px; stroke-width:1.8;}
+  .pm .nm b{display:block; font-size:var(--fs-body); color:var(--heading); font-weight:600;}
+  .pm .nm span{font-size:var(--fs-xs); color:var(--muted);}
+  .pm .radio{margin-left:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex:none; position:relative;}
+  .pm.on .radio{border-color:var(--primary);}
+  .pm.on .radio::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--primary);}
+  .soon{font-size:var(--fs-xs); color:var(--warn); background:var(--warn-bg); padding:2px 8px; border-radius:var(--r-pill); margin-left:6px;}
+
+  /* 汇总侧栏 */
+  .summary{position:sticky; top:0;}
+  .sum-row{display:flex; justify-content:space-between; font-size:var(--fs-body); color:var(--text); padding:7px 0;}
+  .sum-row.muted{color:var(--muted); font-size:var(--fs-sm);}
+  .sum-div{height:1px; background:var(--border-subtle); margin:8px 0;}
+  .sum-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:6px;}
+  .sum-total .lab{font-size:var(--fs-body); color:var(--heading); font-weight:600;}
+  .sum-total .val{font-size:var(--fs-display); font-weight:800; color:var(--primary); font-family:var(--font-mono); letter-spacing:-.5px;}
+  .summary .btn.primary{width:100%; justify-content:center; margin-top:16px;}
+  .summary .fine{font-size:var(--fs-xs); color:var(--faint); text-align:center; margin-top:12px; line-height:1.6;}
+
+  /* 成功态 */
+  .done{display:none; text-align:center; padding:40px 20px; max-width:520px; margin:0 auto;}
+  .done.on{display:block;}
+  .done .ring{width:72px; height:72px; border-radius:50%; background:var(--ok-soft); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
+  .done .ring svg{width:38px; height:38px; stroke-width:2.4;}
+  .done h2{margin:0 0 8px; font-size:var(--fs-h1); color:var(--heading);}
+  .done p{margin:0 0 22px; font-size:var(--fs-body); color:var(--muted); line-height:1.7;}
+  .done .ono{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-body); background:var(--bg); border:1px dashed var(--border); border-radius:var(--r-md); padding:10px 16px; color:var(--heading); margin-bottom:22px;}
+  .done .acts{display:flex; gap:10px; justify-content:center;}
+
+  @media (max-width:760px){ .checkout{grid-template-columns:1fr;} .form-grid{grid-template-columns:1fr;} }
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active=""></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <!-- 确认态 -->
+      <div id="confirm">
+        <div class="crumb"><a href="pricing.html">购买授权</a><span>/</span><span>确认订单</span></div>
+        <div class="head"><h1>确认订单</h1></div>
+
+        <div class="checkout">
+          <div>
+            <div class="card">
+              <h2>订单内容</h2>
+              <div class="item">
+                <div class="ic"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg></div>
+                <div class="meta"><b id="itName">标准版授权</b><span id="itDur">365 天授权 · 时长兑换券</span></div>
+                <div class="amt" id="itAmt">¥888</div>
+              </div>
+            </div>
+
+            <div class="card">
+              <h2>开票信息</h2>
+              <div class="form-grid">
+                <div class="field"><label>抬头类型</label>
+                  <div class="ctrl" onclick="openInvType(event)"><span id="invType">企业单位</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div>
+                </div>
+                <div class="field"><label>发票抬头</label><input class="input" value="鼎晟酒行"></div>
+                <div class="field full"><label>税号</label><input class="input" placeholder="统一社会信用代码"></div>
+                <div class="field full"><label>接收邮箱</label><input class="input" placeholder="用于接收电子发票"></div>
+              </div>
+            </div>
+
+            <div class="card">
+              <h2>付款方式</h2>
+              <div class="pay">
+                <div class="pm on" data-m="transfer" onclick="pickPay('transfer')">
+                  <div class="pic" style="background:#1677FF"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg></div>
+                  <div class="nm"><b>对公转账</b><span>下单后顾问提供收款账户与合同</span></div>
+                  <div class="radio"></div>
+                </div>
+                <div class="pm" data-m="wx" onclick="toast('在线支付通道暂未接入')">
+                  <div class="pic" style="background:#07C160"><svg viewBox="0 0 24 24"><use href="#i-ic09"/></svg></div>
+                  <div class="nm"><b>微信 / 支付宝<span class="soon">即将上线</span></b><span>在线即时到账</span></div>
+                  <div class="radio"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 汇总 -->
+          <div class="card summary">
+            <h2>费用汇总</h2>
+            <div class="sum-row"><span id="sumName">标准版授权</span><span id="sumBase">¥888</span></div>
+            <div class="sum-row muted"><span>优惠</span><span>- ¥0</span></div>
+            <div class="sum-div"></div>
+            <div class="sum-total"><span class="lab">应付总额</span><span class="val" id="sumTotal">¥888</span></div>
+            <div class="btn primary lg" onclick="placeOrder()">提交订单</div>
+            <div class="fine">提交即生成待付款订单，支付完成后自动下发时长兑换券短码。当前为原型，未接入真实支付。</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 成功态 -->
+      <div class="done" id="done">
+        <div class="ring"><svg viewBox="0 0 24 24"><use href="#i-ic10"/></svg></div>
+        <h2>订单已提交</h2>
+        <p>顾问将在 1 个工作日内与你对接收款与开票。<br>收款确认后，时长兑换券短码会下发到你的账号，在「系统设置 · 授权兑换券」激活即可续期。</p>
+        <div class="ono"><svg width="16" height="16" viewBox="0 0 24 24" stroke-width="1.8" fill="none" stroke="currentColor"><use href="#i-ic11"/></svg>订单号 <b id="orderNo">—</b></div>
+        <div class="acts">
+          <a class="btn ghost" href="pricing.html">返回套餐</a>
+          <a class="btn primary" href="settings.html">去激活兑换券</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+  /* 读 query 参数填充订单 */
+  const q=new URLSearchParams(location.search);
+  const nm=q.get('nm')||'标准版', dur=q.get('dur')||'365 天授权', amt=q.get('amt')||'888', cat=q.get('cat')||'time';
+  const isTier=cat==='tier';
+  const title=isTier?(nm+'授权'):(nm+'时长券');
+  const durTxt=isTier?(dur+' · 版本授权'):(dur+' · 时长兑换券');
+  document.getElementById('itName').textContent=title;
+  document.getElementById('itDur').textContent=durTxt;
+  document.getElementById('itAmt').textContent='¥'+amt;
+  document.getElementById('sumName').textContent=title;
+  document.getElementById('sumBase').textContent='¥'+amt;
+  document.getElementById('sumTotal').textContent='¥'+amt;
+
+  let payMethod='transfer';
+  function pickPay(m){ payMethod=m; document.querySelectorAll('.pm').forEach(p=>p.classList.toggle('on',p.dataset.m===m)); }
+
+  function placeOrder(){
+    const no='JM'+new Date().toISOString().slice(0,10).replace(/-/g,'')+'-'+Math.floor(1000+Math.random()*9000);
+    document.getElementById('orderNo').textContent=no;
+    document.getElementById('confirm').style.display='none';
+    document.getElementById('done').classList.add('on');
+    document.querySelector('.main').scrollTop=0;
+  }
+
+  /* Toast / Menu / 主题 */
+  function openInvType(e){ const cur=document.getElementById('invType').textContent; openMenu(e.currentTarget,['企业单位','个人 / 非企业'].map(v=>({v,label:v,sel:v===cur})),v=>{ document.getElementById('invType').textContent=v; closeMenus(); }); }
+
+  document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeMenus(); });
+  </script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/datewheel.js b/.superpowers/prototype/screens/datewheel.js
new file mode 100644
index 0000000..1ec91a8
--- /dev/null
+++ b/.superpowers/prototype/screens/datewheel.js
@@ -0,0 +1,47 @@
+// 滚轮日期选择器 —— 年月日，单据日期/生产日期/明细共用（单一真源）
+// 用法：在任意 .datefield 元素上点击（或聚焦后按 Enter/空格）打开滚轮；
+//   元素持有 data-val="YYYY-MM-DD"；选定后写回 data-val + .dval 文本，并派发 'datechange' 事件（detail.value）。
+// 三列滚轮（年/月/日）滚动吸附，年/月变化自动重算当月天数。
+(function(){
+  const ITEM=36;
+  const now=new Date();
+  const YEARS=[]; for(let y=now.getFullYear()-15;y<=now.getFullYear()+2;y++) YEARS.push(y);
+  let pop, yCol, mCol, dCol, target=null, building=false;
+
+  const pad=n=>String(n).padStart(2,'0');
+  const dim=(y,m)=>new Date(y,m,0).getDate(); // m: 1-12
+
+  function ensure(){
+    if(pop) return;
+    pop=document.createElement('div'); pop.className='wheel-pop';
+    pop.innerHTML='<div class="wheel-cols"><div class="wheel-center"></div>'
+      +'<div class="wheel-col" data-k="y"></div><div class="wheel-col" data-k="m"></div><div class="wheel-col" data-k="d"></div></div>'
+      +'<div class="wheel-foot"><span class="wheel-today">今天</span><span class="wheel-ok">确定</span></div>';
+    document.body.appendChild(pop);
+    yCol=pop.querySelector('[data-k="y"]'); mCol=pop.querySelector('[data-k="m"]'); dCol=pop.querySelector('[data-k="d"]');
+    [yCol,mCol,dCol].forEach(col=>{
+      let t; col.addEventListener('scroll',()=>{ if(building) return; markOn(col); clearTimeout(t); t=setTimeout(()=>{ if(col.dataset.k!=='d') rebuildDays(); },110); });
+    });
+    pop.querySelector('.wheel-today').onclick=()=>setSel(now.getFullYear(),now.getMonth()+1,now.getDate());
+    pop.querySelector('.wheel-ok').onclick=commit;
+    document.addEventListener('mousedown',e=>{ if(pop.classList.contains('show') && !pop.contains(e.target) && e.target!==target && !(target&&target.contains(e.target))) close(); });
+    window.addEventListener('resize',close);
+  }
+  const items=col=>col.querySelectorAll('.wheel-item');
+  const idxOf=col=>{ const n=items(col).length; return Math.max(0,Math.min(n-1,Math.round(col.scrollTop/ITEM))); };
+  function markOn(col){ const idx=idxOf(col); items(col).forEach((el,i)=>el.classList.toggle('on',i===idx)); }
+  function fill(col,arr,selIdx){ building=true; col.innerHTML=arr.map(t=>`<div class="wheel-item">${t}</div>`).join(''); col.scrollTop=selIdx*ITEM; markOn(col); requestAnimationFrame(()=>{ building=false; }); }
+  function rebuildDays(){ const y=YEARS[idxOf(yCol)], m=idxOf(mCol)+1, n=dim(y,m); const cur=Math.min(idxOf(dCol),n-1); fill(dCol,Array.from({length:n},(_,i)=>pad(i+1)),cur); }
+  function setSel(y,m,d){ const yi=Math.max(0,YEARS.indexOf(y)); fill(yCol,YEARS.map(String),yi); fill(mCol,Array.from({length:12},(_,i)=>pad(i+1)),m-1); const n=dim(y,m); fill(dCol,Array.from({length:n},(_,i)=>pad(i+1)),Math.min(d-1,n-1)); }
+
+  function position(el){ const r=el.getBoundingClientRect(); const w=248; pop.style.width=w+'px'; pop.style.left=Math.max(8,Math.min(r.left,window.innerWidth-w-8))+'px'; pop.style.top=(r.bottom+4)+'px'; const ph=pop.getBoundingClientRect(); if(r.bottom+ph.height+8>window.innerHeight && r.top-ph.height-4>0) pop.style.top=(r.top-ph.height-4)+'px'; }
+  function open(el){ ensure(); target=el; let y,m,d; const v=el.dataset.val; if(v && /^\d{4}-\d{2}-\d{2}$/.test(v)){ [y,m,d]=v.split('-').map(Number); } else { y=now.getFullYear(); m=now.getMonth()+1; d=now.getDate(); }
+    pop.classList.add('show'); position(el); // 先显示获得布局，scrollTop 才能生效
+    setSel(y,m,d); }
+  function close(){ if(pop) pop.classList.remove('show'); target=null; }
+  function commit(){ if(!target) return; const y=YEARS[idxOf(yCol)], m=idxOf(mCol)+1, d=idxOf(dCol)+1; const val=y+'-'+pad(m)+'-'+pad(d); target.dataset.val=val; const dv=target.querySelector('.dval'); if(dv){ dv.textContent=val; dv.classList.remove('ph'); } target.classList.remove('error'); target.dispatchEvent(new CustomEvent('datechange',{bubbles:true,detail:{value:val}})); close(); }
+
+  document.addEventListener('click',e=>{ const f=e.target.closest('.datefield'); if(f && !f.classList.contains('disabled')){ if(pop && pop.classList.contains('show') && target===f){ close(); return; } open(f); } });
+  document.addEventListener('keydown',e=>{ const f=e.target.closest && e.target.closest('.datefield'); if(f && (e.key==='Enter'||e.key===' ') && !f.classList.contains('disabled')){ e.preventDefault(); open(f); } });
+  window.DateWheel={ open, close };
+})();
diff --git a/.superpowers/prototype/screens/design-system.html b/.superpowers/prototype/screens/design-system.html
new file mode 100644
index 0000000..b2e37b0
--- /dev/null
+++ b/.superpowers/prototype/screens/design-system.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>组件总览已并入设计系统首页</title>
+<!-- 组件总览已整合进 index.html（设计系统首页 · 组件 Components 段），此页重定向过去。 -->
+<script>location.replace('../index.html#comp');</script>
+</head>
+<body></body>
+</html>
diff --git a/.superpowers/prototype/screens/devices.html b/.superpowers/prototype/screens/devices.html
new file mode 100644
index 0000000..bd4b87f
--- /dev/null
+++ b/.superpowers/prototype/screens/devices.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>设备管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+
+  .sec-title{font-size:var(--fs-h2); color:var(--heading); font-weight:700; margin:26px 0 14px; display:flex; align-items:center; gap:8px;}
+  .sec-title:first-of-type{margin-top:4px;}
+  .sec-title small{font-size:var(--fs-sm); color:var(--muted); font-weight:400;}
+
+  /* ---- 登录设备 / 会话管理 ---- */
+  .self-tag{display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--r-pill); background:var(--info-soft); color:var(--primary); font-size:var(--fs-xs); font-weight:600; margin-left:8px;}
+  .ip{font-family:var(--font-mono); color:var(--muted);}
+  .sess-time{font-family:var(--font-mono); color:var(--muted);}
+  .kick{color:var(--danger); font-weight:600; cursor:pointer;}
+  .kick:hover{text-decoration:underline;}
+  .cur-dev{color:var(--faint);}
+
+  /* ---- 设备卡片网格（页面级组合，原子色） ---- */
+  .dev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
+  .dev-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; transition:border-color .15s,box-shadow .15s,background-color .28s;}
+  .dev-card:hover{border-color:var(--brand400); box-shadow:var(--sh-1);}
+  .dev-top{display:flex; align-items:flex-start; gap:12px;}
+  .dev-ic{width:42px; height:42px; border-radius:var(--r-md); background:var(--info-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
+  .dev-ic svg{width:22px; height:22px; stroke-width:1.7;}
+  .dev-meta{flex:1; min-width:0;}
+  .dev-name{font-size:var(--fs-title); font-weight:700; color:var(--heading); line-height:1.3;}
+  .dev-type{font-size:var(--fs-sm); color:var(--muted); margin-top:2px;}
+  .dev-rows{margin-top:14px; padding-top:12px; border-top:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:8px;}
+  .dev-row{display:flex; justify-content:space-between; font-size:var(--fs-sm);}
+  .dev-row span{color:var(--muted);} .dev-row b{color:var(--text); font-weight:600;}
+  .dev-row b.mono{font-family:var(--font-mono); font-weight:500;}
+  .dev-foot{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;}
+  .dev-foot .btn{flex:1; justify-content:center; min-width:88px;}
+  /* 离线徽章 */
+  .b-在线{background:var(--success-bg); color:var(--success);}
+  .b-离线{background:var(--border-subtle); color:var(--muted);}
+
+  /* ---- 打印模板卡 ---- */
+  .tpl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
+  .tpl-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; gap:14px; align-items:center; transition:border-color .15s,background-color .28s;}
+  .tpl-card:hover{border-color:var(--brand400);}
+  .tpl-prev{width:64px; height:64px; border-radius:var(--r-md); border:1px dashed var(--border); background:var(--th-bg); display:flex; align-items:center; justify-content:center; color:var(--faint); flex:none;}
+  .tpl-prev svg{width:26px; height:26px; stroke-width:1.5;}
+  .tpl-body{flex:1; min-width:0;}
+  .tpl-name{font-size:var(--fs-body); font-weight:700; color:var(--heading);}
+  .tpl-desc{font-size:var(--fs-xs); color:var(--muted); margin-top:3px; line-height:1.4;}
+  .tpl-acts{display:flex; gap:8px; margin-top:10px;}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="devices"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>设备管理</h1><span class="sub" id="sub">外设连接与打印配置</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="render(); renderSessions(); toast('设备状态已刷新 ✓')"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>刷新</div>
+          <div class="btn primary" onclick="openAdd()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>添加设备</div>
+        </div>
+      </div>
+
+      <div class="sec-title" style="margin-top:4px">登录设备管理 <small>管理员可强制下线其他登录设备</small></div>
+      <div class="table"><table>
+        <thead><tr><th>用户</th><th>平台</th><th>设备</th><th>IP</th><th>登录时间</th><th>最近活跃</th><th>状态</th><th class="act">操作</th></tr></thead>
+        <tbody id="sessBody"></tbody>
+      </table></div>
+
+      <div class="sec-title">外设设备 <small id="devCount"></small></div>
+      <div class="dev-grid" id="devGrid"></div>
+
+      <div class="sec-title">打印模板 <small>标签与小票排版</small></div>
+      <div class="tpl-grid">
+        <div class="tpl-card">
+          <div class="tpl-prev"><svg viewBox="0 0 24 24"><use href="#i-ic12"/></svg></div>
+          <div class="tpl-body">
+            <div class="tpl-name">标签模板 · 商品价签</div>
+            <div class="tpl-desc">40×30mm · 品名 / 规格 / 条码 / 零售价</div>
+            <div class="tpl-acts">
+              <div class="btn ghost sm" onclick="toast('打开标签模板预览（原型）')"><svg viewBox="0 0 24 24"><use href="#i-eye"/></svg>预览</div>
+              <div class="btn ghost sm" onclick="toast('编辑标签模板（原型）')"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg>编辑</div>
+            </div>
+          </div>
+        </div>
+        <div class="tpl-card">
+          <div class="tpl-prev"><svg viewBox="0 0 24 24"><use href="#i-ic13"/></svg></div>
+          <div class="tpl-body">
+            <div class="tpl-name">小票模板 · 出库单据</div>
+            <div class="tpl-desc">58mm 热敏 · 抬头 / 明细 / 合计 / 经手人</div>
+            <div class="tpl-acts">
+              <div class="btn ghost sm" onclick="toast('打开小票模板预览（原型）')"><svg viewBox="0 0 24 24"><use href="#i-eye"/></svg>预览</div>
+              <div class="btn ghost sm" onclick="toast('编辑小票模板（原型）')"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg>编辑</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 添加设备 -->
+<div class="overlay" id="ovAdd"><div class="modal" style="width:560px">
+  <div class="modal-head"><h3>添加设备</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovAdd')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="frow">
+      <div class="field"><label>设备类型 *</label><div class="ctrl" onclick="pickKind(event)"><span id="addKind">标签打印机</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="field"><label>连接方式 *</label><div class="ctrl" onclick="pickConn(event)"><span id="addConn">USB</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>设备名称 *</label><div class="ctrl input-like"><input placeholder="如：前台标签机"></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>型号 / 地址</label><div class="ctrl input-like"><input placeholder="如：Zebra GK888t 或 192.168.1.50"></div></div>
+    </div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovAdd')">取消</div><div class="btn primary" onclick="closeOverlay('ovAdd'); toast('设备已添加并连接（原型）✓')">保存并连接</div></div>
+</div></div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const DEVICES=[
+  {name:'前台标签打印机',kind:'标签打印机',status:'在线',model:'Zebra GK888t',conn:'USB',last:'2 分钟前',d:'M6 9V3h12v6 M6 14h12v7H6z M6 18h12 M9 3v6'},
+  {name:'收银台小票机',kind:'小票打印机',status:'在线',model:'佳博 GP-58MB',conn:'蓝牙',last:'刚刚',d:'M6 3h12v18l-3-2-3 2-3-2-3 2V3z M9 8h6 M9 12h6'},
+  {name:'入库扫码枪',kind:'扫码枪',status:'在线',model:'Honeywell 1900',conn:'USB',last:'5 分钟前',d:'M3 5v14 M7 5v14 M11 5v14 M15 5v14 M19 5v14'},
+  {name:'仓库电子秤',kind:'电子秤',status:'离线',model:'香山 ACS-30',conn:'WiFi 192.168.1.66',last:'昨天 17:42',d:'M5 7h14l2 12H3L5 7z M9 7a3 3 0 016 0 M8 13h8'},
+  {name:'备用标签机',kind:'标签打印机',status:'离线',model:'Brother QL-820',conn:'网络 192.168.1.51',last:'3 天前',d:'M6 9V3h12v6 M6 14h12v7H6z M6 18h12 M9 3v6'},
+];
+const KINDS=['标签打印机','小票打印机','扫码枪','电子秤'];
+const CONNS=['USB','蓝牙','WiFi','网络'];
+
+// 登录设备 / 会话
+const SESSIONS=[
+  {user:'王经理',self:true, platform:'macOS · 桌面端', dev:'macos', ip:'192.168.1.20', login:'06-20 11:23', active:'06-22 17:40', status:'在线'},
+  {user:'王经理',self:false, platform:'Windows · 桌面端', dev:'windows', ip:'192.168.1.21', login:'06-20 10:47', active:'06-22 17:40', status:'在线'},
+  {user:'李采购',self:false, platform:'Windows · 桌面端', dev:'windows', ip:'192.168.1.35', login:'06-20 09:13', active:'06-22 17:11', status:'离线'},
+  {user:'张前台',self:false, platform:'iOS · 移动端', dev:'ios', ip:'10.0.0.8', login:'06-21 17:09', active:'06-22 16:32', status:'离线'},
+];
+function renderSessions(){
+  document.getElementById('sessBody').innerHTML=SESSIONS.map((s,i)=>`<tr>
+    <td><b style="color:var(--heading)">${s.user}</b>${s.self?'<span class="self-tag">本机</span>':''}</td>
+    <td>${s.platform}</td>
+    <td><span class="ip">${s.dev}</span></td>
+    <td><span class="ip">${s.ip}</span></td>
+    <td class="sess-time">${s.login}</td>
+    <td class="sess-time">${s.active}</td>
+    <td><span class="badge b-${s.status}">${s.status}</span></td>
+    <td class="act">${s.self?'<span class="cur-dev">当前设备</span>':`<span class="kick" onclick="kick(${i})">强制下线</span>`}</td>
+  </tr>`).join('');
+}
+function kick(i){ const s=SESSIONS[i]; if(s.status==='离线'){ toast('该设备已离线'); return; } s.status='离线'; renderSessions(); toast('已强制下线 · '+s.user+' · '+s.platform); }
+
+
+function render(){
+  const on=DEVICES.filter(d=>d.status==='在线').length;
+  document.getElementById('devCount').textContent=`共 ${DEVICES.length} 台 · 在线 ${on}`;
+  document.getElementById('sub').textContent=`外设连接与打印配置 · 在线 ${on}/${DEVICES.length}`;
+  document.getElementById('devGrid').innerHTML=DEVICES.map((d,i)=>`
+    <div class="dev-card">
+      <div class="dev-top">
+        <div class="dev-ic">${navSvg(d.d)}</div>
+        <div class="dev-meta">
+          <div class="dev-name">${d.name}</div>
+          <div class="dev-type">${d.kind}</div>
+        </div>
+        <span class="badge b-${d.status}">${d.status}</span>
+      </div>
+      <div class="dev-rows">
+        <div class="dev-row"><span>型号</span><b>${d.model}</b></div>
+        <div class="dev-row"><span>连接方式</span><b class="mono">${d.conn}</b></div>
+        <div class="dev-row"><span>最近活动</span><b>${d.last}</b></div>
+      </div>
+      <div class="dev-foot">
+        <div class="btn ghost sm" onclick="testDevice(${i})"><svg viewBox="0 0 24 24"><use href="#i-ic14"/></svg>测试打印</div>
+        <div class="btn ghost sm" onclick="toast('配置 · '+'${d.name}'+'（原型）')"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg>配置</div>
+        <div class="btn ghost sm" onclick="unbind(${i})"><svg viewBox="0 0 24 24"><use href="#i-ic15"/></svg>解绑</div>
+      </div>
+    </div>`).join('');
+}
+function testDevice(i){ const d=DEVICES[i]; toast(d.status==='离线'?'设备离线，无法测试 · '+d.name:'已发送测试打印 → '+d.name); }
+function unbind(i){ toast('已解绑 · '+DEVICES[i].name+'（原型）'); }
+
+function openAdd(){ document.getElementById('addKind').textContent='标签打印机'; document.getElementById('addConn').textContent='USB'; document.getElementById('ovAdd').classList.add('show'); }
+function pickKind(e){ openMenu(e.currentTarget, KINDS.map(v=>({v,label:v,sel:document.getElementById('addKind').textContent===v})), v=>{ document.getElementById('addKind').textContent=v; closeMenus(); }); }
+function pickConn(e){ openMenu(e.currentTarget, CONNS.map(v=>({v,label:v,sel:document.getElementById('addConn').textContent===v})), v=>{ document.getElementById('addConn').textContent=v; closeMenus(); }); }
+function closeOverlay(id){ document.getElementById(id).classList.remove('show'); }
+
+
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();document.querySelectorAll('.overlay.show').forEach(o=>o.classList.remove('show'));} });
+
+render(); renderSessions();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/fab.js b/.superpowers/prototype/screens/fab.js
new file mode 100644
index 0000000..9bab6ba
--- /dev/null
+++ b/.superpowers/prototype/screens/fab.js
@@ -0,0 +1,60 @@
+// 设计期返回悬浮球 —— 可拖动 + 抓取光标（单一真源，所有屏共用）
+// 行为：hover 显示 grab 光标；按下拖动显示 grabbing；松手记忆位置（localStorage）。
+// 仅当发生真实拖动时拦截那次点击，避免拖完误触跳转；纯点击仍正常返回设计系统。
+(function(){
+  function initFab(){
+    var fab=document.querySelector('.ds-fab');
+    if(!fab||fab.dataset.drag)return;
+    fab.dataset.drag='1';
+    fab.style.cursor='grab';
+    fab.style.touchAction='none';
+    var dragging=false, moved=false, startX=0, startY=0, ox=0, oy=0;
+
+    function clamp(x,y){
+      var w=fab.offsetWidth, h=fab.offsetHeight;
+      x=Math.max(6, Math.min(window.innerWidth-w-6, x));
+      y=Math.max(6, Math.min(window.innerHeight-h-6, y));
+      return [x,y];
+    }
+    function place(x,y){
+      var c=clamp(x,y);
+      fab.style.left=c[0]+'px'; fab.style.top=c[1]+'px';
+      fab.style.right='auto'; fab.style.bottom='auto';
+    }
+    // 恢复上次拖到的位置
+    try{ var sv=JSON.parse(localStorage.getItem('jiu-fab-pos')||'null'); if(sv&&typeof sv.x==='number') place(sv.x,sv.y); }catch(e){}
+
+    fab.addEventListener('pointerdown',function(e){
+      dragging=true; moved=false;
+      startX=e.clientX; startY=e.clientY;
+      var r=fab.getBoundingClientRect();
+      ox=e.clientX-r.left; oy=e.clientY-r.top;
+      try{ fab.setPointerCapture(e.pointerId); }catch(_){}
+      fab.style.cursor='grabbing';
+      fab.style.transition='none';
+      e.preventDefault();
+    });
+    fab.addEventListener('pointermove',function(e){
+      if(!dragging)return;
+      if(!moved && Math.hypot(e.clientX-startX, e.clientY-startY)>4) moved=true;
+      if(moved) place(e.clientX-ox, e.clientY-oy);
+    });
+    function end(e){
+      if(!dragging)return;
+      dragging=false;
+      fab.style.cursor='grab';
+      fab.style.transition='';
+      try{ fab.releasePointerCapture(e.pointerId); }catch(_){}
+      if(moved){
+        var r=fab.getBoundingClientRect();
+        try{ localStorage.setItem('jiu-fab-pos',JSON.stringify({x:r.left,y:r.top})); }catch(_){}
+        // 拖动结束后拦截紧随的 click，避免误跳转
+        fab.addEventListener('click',function ph(ev){ ev.preventDefault(); ev.stopPropagation(); fab.removeEventListener('click',ph,true); },true);
+      }
+    }
+    fab.addEventListener('pointerup',end);
+    fab.addEventListener('pointercancel',end);
+  }
+  if(document.readyState!=='loading') initFab();
+  else document.addEventListener('DOMContentLoaded',initFab);
+})();
diff --git a/.superpowers/prototype/screens/finance.html b/.superpowers/prototype/screens/finance.html
new file mode 100644
index 0000000..516b653
--- /dev/null
+++ b/.superpowers/prototype/screens/finance.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>财务管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+
+  /* 时间范围筛选行 */
+  .timerow{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
+  .timerow .lbl{font-size:var(--fs-sm); color:var(--muted); margin-right:2px;}
+
+  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
+
+  /* 段标题 */
+  .sec-head{display:flex; align-items:baseline; gap:10px; margin:0 0 12px;}
+  .sec-head h2{margin:0; font-size:var(--fs-h2); color:var(--heading); font-weight:700;}
+  .sec-head .sh-sub{font-size:var(--fs-xs); color:var(--muted);}
+  .block{margin-bottom:22px;}
+
+  /* ====== 新增原子：条形图 .barchart / .bar ====== */
+  .chart-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px 14px; transition:background-color .28s,border-color .28s;}
+  .chart-legend{display:flex; gap:18px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px;}
+  .chart-legend .lg{display:inline-flex; align-items:center; gap:7px;}
+  .chart-legend .sw{width:11px; height:11px; border-radius:3px;}
+  .sw-in{background:var(--primary);} .sw-out{background:var(--brand400);}
+  .barchart{display:flex; align-items:flex-end; gap:18px; height:180px; padding-top:6px;}
+  .barchart .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
+  .bar-pair{display:flex; align-items:flex-end; gap:6px; height:100%; width:100%; justify-content:center;}
+  .bar{width:26px; border-radius:var(--r-sm) var(--r-sm) 0 0; transition:height .35s ease, background-color .28s; position:relative;}
+  .bar.in{background:var(--primary);}
+  .bar.out{background:var(--brand400);}
+  .bar:hover{opacity:.85;}
+  .bar .bv{position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); white-space:nowrap;}
+  .col .cl{font-size:var(--fs-sm); color:var(--muted);}
+
+  /* ====== 新增原子：收款/付款 badge 变体 ====== */
+  .b-收款{background:var(--success-bg); color:var(--success);}
+  .b-付款{background:var(--danger-bg); color:var(--danger);}
+
+  .net-pos{color:var(--success); font-weight:600;} .net-neg{color:var(--danger); font-weight:600;}
+  .link{color:var(--primary); cursor:pointer; font-weight:600;}
+  .link:hover{text-decoration:underline;}
+  .ref{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--muted);}
+  .toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; transition:background-color .28s,border-color .28s;}
+  .toolbar .sp{margin-left:auto;}
+  .table.flush-top{border-radius:0 0 var(--r-lg) var(--r-lg); border-top:none;}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="finance"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>财务管理</h1><span class="sub" id="finSub">应收/应付概览 · 本月</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="toast('已导出财务报表 ✓')"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg>导出报表</div>
+          <div class="btn primary" onclick="toast('登记收支（原型）')"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>登记收支</div>
+        </div>
+      </div>
+
+      <!-- 1. 时间范围筛选 -->
+      <div class="timerow">
+        <span class="lbl">时间范围</span>
+        <div class="chip on" data-range="本月" onclick="setRange('本月')">本月</div>
+        <div class="chip" data-range="本季" onclick="setRange('本季')">本季</div>
+        <div class="chip" data-range="自定义" onclick="setRange('自定义')">自定义 <svg viewBox="0 0 24 24"><use href="#i-ic16"/></svg></div>
+      </div>
+
+      <!-- 2. KPI 条 -->
+      <div class="kpis">
+        <div class="kpi"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">本月销售额</div><div class="v">¥186万</div><div class="d up">▲ 8.4% 较上月</div></div>
+        <div class="kpi"><div class="ic ic-blue"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg></div><div class="t">本月采购额</div><div class="v">¥132万</div><div class="d down">▼ 3.1% 较上月</div></div>
+        <div class="kpi alert"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="t">应收账款 · 偏高</div><div class="v">¥48.6万</div><div class="d down">逾期 ¥9.2万</div></div>
+        <div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic19"/></svg></div><div class="t">应付账款</div><div class="v">¥31.8万</div><div class="d up">本周到期 ¥4.8万</div></div>
+      </div>
+
+      <!-- 3. 近 6 个月 收/支 趋势 -->
+      <div class="block">
+        <div class="sec-head"><h2>收支趋势</h2><span class="sh-sub">近 6 个月 · 单位 万元</span></div>
+        <div class="chart-card">
+          <div class="chart-legend">
+            <span class="lg"><span class="sw sw-in"></span>收入</span>
+            <span class="lg"><span class="sw sw-out"></span>支出</span>
+          </div>
+          <div class="barchart" id="barchart"></div>
+        </div>
+      </div>
+
+      <!-- 4. 应收/应付 汇总表 -->
+      <div class="block">
+        <div class="sec-head"><h2>应收 / 应付 汇总</h2><span class="sh-sub">按往来单位 · 点击行查看流水</span></div>
+        <div class="table"><table>
+          <thead><tr><th>往来单位</th><th class="num">应收</th><th class="num">应付</th><th class="num">净额</th><th class="act">操作</th></tr></thead>
+          <tbody id="sumBody"></tbody>
+        </table></div>
+      </div>
+
+      <!-- 5. 收支流水 -->
+      <div class="block">
+        <div class="sec-head"><h2>收支流水</h2><span class="sh-sub" id="flowSub"></span></div>
+        <div class="toolbar">
+          <span class="lbl" style="font-size:var(--fs-sm);color:var(--muted)">类型</span>
+          <div class="chip on" data-flt="全部" onclick="setFlowFilter('全部')">全部</div>
+          <div class="chip" data-flt="收款" onclick="setFlowFilter('收款')">收款</div>
+          <div class="chip" data-flt="付款" onclick="setFlowFilter('付款')">付款</div>
+          <div class="sp"></div>
+          <span class="ref" id="flowCount"></span>
+        </div>
+        <div class="table flush-top"><table>
+          <thead><tr><th>日期</th><th>类型</th><th>往来单位</th><th class="num">金额</th><th>关联单号</th><th>备注</th></tr></thead>
+          <tbody id="flowBody"></tbody>
+        </table></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="drawer" id="drawer"><div class="drawer-head"><h3 id="dTitle">往来流水</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeDrawer()"><use href="#i-close"/></svg></div><div class="drawer-body" id="drawerBody"></div></div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+/* ---- 1. 时间范围 ---- */
+function setRange(r){ document.querySelectorAll('.chip[data-range]').forEach(c=>c.classList.toggle('on',c.dataset.range===r)); document.getElementById('finSub').textContent='应收/应付概览 · '+r; if(r==='自定义')toast('自定义区间选择器（原型略）'); }
+
+/* ---- 3. 趋势图数据（万元） ---- */
+const TREND=[
+  {m:'1月',in:142,out:118},{m:'2月',in:96,out:88},{m:'3月',in:168,out:121},
+  {m:'4月',in:154,out:109},{m:'5月',in:172,out:136},{m:'6月',in:186,out:132}
+];
+function buildChart(){
+  const max=Math.max(...TREND.flatMap(t=>[t.in,t.out]));
+  document.getElementById('barchart').innerHTML=TREND.map(t=>{
+    const hi=Math.round(t.in/max*100), ho=Math.round(t.out/max*100);
+    return `<div class="col"><div class="bar-pair">
+      <div class="bar in" style="height:${hi}%"><span class="bv">${t.in}</span></div>
+      <div class="bar out" style="height:${ho}%"><span class="bv">${t.out}</span></div>
+    </div><div class="cl">${t.m}</div></div>`;
+  }).join('');
+}
+
+/* ---- 4. 应收/应付 汇总 ---- */
+const SUMMARY=[
+  {name:'华东酒类批发',recv:128400,pay:0},
+  {name:'金樽商贸',recv:86200,pay:0},
+  {name:'茅台华南经销',recv:0,pay:142800},
+  {name:'鸿运餐饮连锁',recv:74600,pay:0},
+  {name:'五粮液省级代理',recv:0,pay:96400},
+  {name:'盛世名酒城',recv:52300,pay:18600},
+  {name:'御品烟酒行',recv:31800,pay:0},
+  {name:'川渝糖酒集团',recv:0,pay:60400}
+];
+function yuan(n){ return '¥'+n.toLocaleString(); }
+function buildSummary(){
+  document.getElementById('sumBody').innerHTML=SUMMARY.map((s,i)=>{
+    const net=s.recv-s.pay;
+    const netCls=net>0?'net-pos':(net<0?'net-neg':'');
+    const netTxt=(net>0?'+':'')+yuan(net);
+    return `<tr class="click" onclick="openPartner(${i})">
+      <td class="pname">${s.name}</td>
+      <td class="num">${s.recv?yuan(s.recv):'—'}</td>
+      <td class="num">${s.pay?yuan(s.pay):'—'}</td>
+      <td class="num ${netCls}">${netTxt}</td>
+      <td class="act" onclick="event.stopPropagation()"><span class="link" onclick="openPartner(${i})">查看</span></td>
+    </tr>`;
+  }).join('');
+}
+
+/* ---- 5. 收支流水 ---- */
+const FLOWS=[
+  {date:'2026-06-20',type:'收款',party:'华东酒类批发',amt:68000,ref:'SK-20260620-03',note:'飞天茅台货款'},
+  {date:'2026-06-19',type:'付款',party:'茅台华南经销',amt:142800,ref:'FK-20260619-01',note:'6月采购结算'},
+  {date:'2026-06-18',type:'收款',party:'金樽商贸',amt:42600,ref:'SK-20260618-07',note:'五粮液尾款'},
+  {date:'2026-06-17',type:'收款',party:'鸿运餐饮连锁',amt:31500,ref:'SK-20260617-02',note:'宴会用酒'},
+  {date:'2026-06-16',type:'付款',party:'五粮液省级代理',amt:96400,ref:'FK-20260616-04',note:'普五补货'},
+  {date:'2026-06-15',type:'收款',party:'盛世名酒城',amt:23800,ref:'SK-20260615-05',note:'国窖1573'},
+  {date:'2026-06-14',type:'付款',party:'川渝糖酒集团',amt:60400,ref:'FK-20260614-01',note:'剑南春进货'},
+  {date:'2026-06-13',type:'收款',party:'御品烟酒行',amt:18900,ref:'SK-20260613-09',note:'习酒窖藏'},
+  {date:'2026-06-12',type:'付款',party:'盛世名酒城',amt:18600,ref:'FK-20260612-02',note:'退换货补差'},
+  {date:'2026-06-11',type:'收款',party:'华东酒类批发',amt:55200,ref:'SK-20260611-06',note:'梦之蓝M6'}
+];
+let flowFilter='全部';
+function setFlowFilter(f){ flowFilter=f; document.querySelectorAll('.chip[data-flt]').forEach(c=>c.classList.toggle('on',c.dataset.flt===f)); renderFlows(); }
+function renderFlows(){
+  const rows=FLOWS.filter(f=>flowFilter==='全部'||f.type===flowFilter);
+  const tb=document.getElementById('flowBody');
+  if(rows.length===0){ tb.innerHTML=`<tr><td colspan="6"><div class="empty">没有匹配的流水记录</div></td></tr>`; }
+  else { tb.innerHTML=rows.map(f=>`<tr>
+    <td>${f.date}</td>
+    <td><span class="badge b-${f.type}">${f.type}</span></td>
+    <td>${f.party}</td>
+    <td class="num"><span class="qty">${f.type==='收款'?'+':'-'}${yuan(f.amt)}</span></td>
+    <td class="ref">${f.ref}</td>
+    <td>${f.note}</td>
+  </tr>`).join(''); }
+  document.getElementById('flowCount').textContent=`共 ${rows.length} 条`;
+  document.getElementById('flowSub').textContent=`本月 ${FLOWS.length} 笔 · 收 ${FLOWS.filter(f=>f.type==='收款').length} / 付 ${FLOWS.filter(f=>f.type==='付款').length}`;
+}
+
+/* ---- 抽屉：某往来单位流水 ---- */
+function openPartner(i){
+  const s=SUMMARY[i];
+  const flows=FLOWS.filter(f=>f.party===s.name);
+  document.getElementById('dTitle').textContent=s.name;
+  const net=s.recv-s.pay;
+  let h=`<div class="drow"><span>应收账款</span><b>${s.recv?yuan(s.recv):'¥0'}</b></div>
+    <div class="drow"><span>应付账款</span><b>${s.pay?yuan(s.pay):'¥0'}</b></div>
+    <div class="drow"><span>净额</span><b class="${net>0?'net-pos':(net<0?'net-neg':'')}">${(net>0?'+':'')+yuan(net)}</b></div>
+    <div style="font-size:var(--fs-sm);color:var(--muted);margin:18px 0 8px;">近期流水</div>`;
+  if(flows.length){
+    h+=flows.map(f=>`<div class="drow"><span>${f.date} · <span class="badge b-${f.type}" style="height:18px">${f.type}</span></span><b>${f.type==='收款'?'+':'-'}${yuan(f.amt)}</b></div>`).join('');
+  } else {
+    h+=`<div class="drow"><span style="color:var(--faint)">本期暂无流水记录</span><b></b></div>`;
+  }
+  h+=`<div style="display:flex;gap:10px;margin-top:18px"><div class="btn ghost sm" onclick="toast('登记收款（原型）')">登记收款</div><div class="btn ghost sm" onclick="toast('登记付款（原型）')">登记付款</div></div>`;
+  document.getElementById('drawerBody').innerHTML=h;
+  document.getElementById('drawer').classList.add('show');
+}
+function closeDrawer(){ document.getElementById('drawer').classList.remove('show'); }
+
+/* ---- 菜单 / 主题 / toast（复用 inventory.html 实现） ---- */
+
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closeDrawer();} });
+
+buildChart(); buildSummary(); renderFlows();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/icons.js b/.superpowers/prototype/screens/icons.js
new file mode 100644
index 0000000..7d784f0
--- /dev/null
+++ b/.superpowers/prototype/screens/icons.js
@@ -0,0 +1,8 @@
+// 图标 sprite —— 单一真源（Lucide 官方图标，ISC 许可）
+// 所有屏用 <svg><use href="#i-xxx"/></svg> 引用；改此处一个 symbol，全局生效。
+// 共 97 个，源自 lucide-static。新增图标先在此登记 symbol，再用 use 引用。
+(function(){
+  var SPRITE='<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true"><symbol id="i-bug" viewBox="0 0 24 24"><path d="m8 2 1.88 1.88" /> <path d="M14.12 3.88 16 2" /> <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" /> <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" /> <path d="M12 20v-9" /> <path d="M6.53 9C4.6 8.8 3 7.1 3 5" /> <path d="M6 13H2" /> <path d="M3 21c0-2.1 1.7-3.9 3.8-4" /> <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" /> <path d="M22 13h-4" /> <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" /></symbol><symbol id="i-lightbulb" viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" /> <path d="M9 18h6" /> <path d="M10 22h4" /></symbol><symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7" /> <path d="M19 12H5" /></symbol><symbol id="i-bottle" viewBox="0 0 24 24"><path d="M8 22h8" /> <path d="M7 10h10" /> <path d="M12 15v7" /> <path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" /></symbol><symbol id="i-box" viewBox="0 0 24 24"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" /> <path d="M12 22V12" /> <polyline points="3.29 7 12 12 20.71 7" /> <path d="m7.5 4.27 9 5.15" /></symbol><symbol id="i-box-2" viewBox="0 0 24 24"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /> <path d="m7 16.5-4.74-2.85" /> <path d="m7 16.5 5-3" /> <path d="M7 16.5v5.17" /> <path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /> <path d="m17 16.5-5-3" /> <path d="m17 16.5 4.74-2.85" /> <path d="M17 16.5v5.17" /> <path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" /> <path d="M12 8 7.26 5.15" /> <path d="m12 8 4.74-2.85" /> <path d="M12 13.5V8" /></symbol><symbol id="i-check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></symbol><symbol id="i-chevron-down" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></symbol><symbol id="i-chevron-left" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></symbol><symbol id="i-chevron-right" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></symbol><symbol id="i-close" viewBox="0 0 24 24"><path d="M18 6 6 18" /> <path d="m6 6 12 12" /></symbol><symbol id="i-download" viewBox="0 0 24 24"><path d="M12 15V3" /> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> <path d="m7 10 5 5 5-5" /></symbol><symbol id="i-edit" viewBox="0 0 24 24"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /> <path d="m15 5 4 4" /></symbol><symbol id="i-eye" viewBox="0 0 24 24"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /> <circle cx="12" cy="12" r="3" /></symbol><symbol id="i-gear" viewBox="0 0 24 24"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /> <circle cx="12" cy="12" r="3" /></symbol><symbol id="i-megaphone" viewBox="0 0 24 24"><path d="M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" /> <path d="M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14" /> <path d="M8 6v8" /></symbol><symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 5h16" /> <path d="M4 12h16" /> <path d="M4 19h16" /></symbol><symbol id="i-plus" viewBox="0 0 24 24"><path d="M5 12h14" /> <path d="M12 5v14" /></symbol><symbol id="i-refresh" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /> <path d="M21 3v5h-5" /> <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /> <path d="M8 16H3v5" /></symbol><symbol id="i-search" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34" /> <circle cx="11" cy="11" r="8" /></symbol><symbol id="i-shield" viewBox="0 0 24 24"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /></symbol><symbol id="i-shield-2" viewBox="0 0 24 24"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /></symbol><symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 3v12" /> <path d="m17 8-5-5-5 5" /> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /></symbol><symbol id="i-ic01" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /> <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /> <path d="M2 12h20" /></symbol><symbol id="i-ic02" viewBox="0 0 24 24"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" /></symbol><symbol id="i-ic03" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /> <path d="M7 11V7a5 5 0 0 1 10 0v4" /></symbol><symbol id="i-ic04" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /> <path d="M12 6v6l4 2" /></symbol><symbol id="i-ic05" viewBox="0 0 24 24"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></symbol><symbol id="i-ic06" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /> <path d="M10 9H8" /> <path d="M16 13H8" /> <path d="M16 17H8" /></symbol><symbol id="i-ic07" viewBox="0 0 24 24"><path d="M16 7h6v6" /> <path d="m22 7-8.5 8.5-5-5L2 17" /></symbol><symbol id="i-ic08" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2" /> <line x1="2" x2="22" y1="10" y2="10" /></symbol><symbol id="i-ic09" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /></symbol><symbol id="i-ic10" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></symbol><symbol id="i-ic11" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2" /> <line x1="2" x2="22" y1="10" y2="10" /></symbol><symbol id="i-ic12" viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /> <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" /></symbol><symbol id="i-ic13" viewBox="0 0 24 24"><path d="M12 17V7" /> <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8" /> <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" /></symbol><symbol id="i-ic14" viewBox="0 0 24 24"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" /> <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" /> <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" /></symbol><symbol id="i-ic15" viewBox="0 0 24 24"><path d="M12 2v10" /> <path d="M18.4 6.6a9 9 0 1 1-12.77.04" /></symbol><symbol id="i-ic16" viewBox="0 0 24 24"><path d="M8 2v4" /> <path d="M16 2v4" /> <rect width="18" height="18" x="3" y="4" rx="2" /> <path d="M3 10h18" /></symbol><symbol id="i-ic17" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3" /> <path d="M3 5V19A9 3 0 0 0 21 19V5" /> <path d="M3 12A9 3 0 0 0 21 12" /></symbol><symbol id="i-ic18" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /> <path d="M12 9v4" /> <path d="M12 17h.01" /></symbol><symbol id="i-ic19" viewBox="0 0 24 24"><path d="M12 22V12" /> <path d="M16 17h6" /> <path d="M19 14v6" /> <path d="M21 10.535V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.675-.955" /> <path d="M3.29 7 12 12l8.71-5" /> <path d="m7.5 4.27 8.997 5.148" /></symbol><symbol id="i-ic20" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></symbol><symbol id="i-ic21" viewBox="0 0 24 24"><path d="M21 5H3" /> <path d="M15 12H3" /> <path d="M17 19H3" /></symbol><symbol id="i-ic22" viewBox="0 0 24 24"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" /></symbol><symbol id="i-ic23" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /> <path d="m9 12 2 2 4-4" /></symbol><symbol id="i-ic24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /> <path d="M12 16v-4" /> <path d="M12 8h.01" /></symbol><symbol id="i-ic25" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /> <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></symbol><symbol id="i-ic26" viewBox="0 0 24 24"><path d="M15 3h6v6" /> <path d="M10 14 21 3" /> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></symbol><symbol id="i-ic27" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /> <circle cx="9" cy="9" r="2" /> <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /></symbol><symbol id="i-ic28" viewBox="0 0 24 24"><path d="M3 5h18" /> <path d="M3 12h18" /> <path d="M3 19h18" /></symbol><symbol id="i-ic29" viewBox="0 0 24 24"><path d="M8 22h8" /> <path d="M7 10h10" /> <path d="M12 15v7" /> <path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" /></symbol><symbol id="i-ic30" viewBox="0 0 24 24"><path d="M12 12 4.207 4.207A.707.707 0 0 1 4.707 3h14.586a.707.707 0 0 1 .5 1.207z" /> <path d="M12 12v10" /> <path d="M7 22h10" /></symbol><symbol id="i-ic31" viewBox="0 0 24 24"><path d="M3 7V5a2 2 0 0 1 2-2h2" /> <path d="M17 3h2a2 2 0 0 1 2 2v2" /> <path d="M21 17v2a2 2 0 0 1-2 2h-2" /> <path d="M7 21H5a2 2 0 0 1-2-2v-2" /></symbol><symbol id="i-ic32" viewBox="0 0 24 24"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" /> <circle cx="12" cy="8" r="6" /></symbol><symbol id="i-ic33" viewBox="0 0 24 24"><path d="M12 3v18" /> <rect width="18" height="18" x="3" y="3" rx="2" /> <path d="M3 9h18" /> <path d="M3 15h18" /></symbol><symbol id="i-ic34" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /> <path d="M12 9v4" /> <path d="M12 17h.01" /></symbol><symbol id="i-ic35" viewBox="0 0 24 24"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2" /> <path d="M7 2v20" /> <path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7" /></symbol><symbol id="i-ic36" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /> <path d="M10 9H8" /> <path d="M16 13H8" /> <path d="M16 17H8" /></symbol><symbol id="i-ic37" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /> <circle cx="12" cy="7" r="4" /></symbol><symbol id="i-ic38" viewBox="0 0 24 24"><path d="m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8" /> <path d="M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7" /> <path d="m2.1 21.8 6.4-6.3" /> <path d="m19 5-7 7" /></symbol><symbol id="i-ic39" viewBox="0 0 24 24"><path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z" /></symbol><symbol id="i-ic40" viewBox="0 0 24 24"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" /> <circle cx="12" cy="8" r="6" /></symbol><symbol id="i-ic41" viewBox="0 0 24 24"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /> <circle cx="12" cy="10" r="3" /></symbol><symbol id="i-ic42" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /> <path d="M12 6v6l4 2" /></symbol><symbol id="i-ic43" viewBox="0 0 24 24"><path d="M13 2a9 9 0 0 1 9 9" /> <path d="M13 6a5 5 0 0 1 5 5" /> <path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" /></symbol><symbol id="i-ic44" viewBox="0 0 24 24"><path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5" /> <path d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244" /> <path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05" /></symbol><symbol id="i-ic45" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /> <circle cx="9" cy="7" r="4" /> <line x1="19" x2="19" y1="8" y2="14" /> <line x1="22" x2="16" y1="11" y2="11" /></symbol><symbol id="i-ic46" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /> <path d="M12 18a6 6 0 0 0 0-12v12z" /></symbol><symbol id="i-ic47" viewBox="0 0 24 24"><line x1="12" x2="12" y1="2" y2="22" /> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></symbol><symbol id="i-ic48" viewBox="0 0 24 24"><path d="M8 2v4" /> <path d="M16 2v4" /> <rect width="18" height="18" x="3" y="4" rx="2" /> <path d="M3 10h18" /></symbol><symbol id="i-ic49" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2" /> <line x1="2" x2="22" y1="10" y2="10" /></symbol><symbol id="i-ic50" viewBox="0 0 24 24"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" /> <path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6" /> <rect x="6" y="14" width="12" height="8" rx="1" /></symbol><symbol id="i-ic51" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6" /></symbol><symbol id="i-ic52" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6" /></symbol><symbol id="i-ic53" viewBox="0 0 24 24"><path d="M12 3v12" /> <path d="m17 8-5-5-5 5" /> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /></symbol><symbol id="i-ic54" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34" /> <circle cx="11" cy="11" r="8" /></symbol><symbol id="i-ic55" viewBox="0 0 24 24"><path d="M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" /> <path d="M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14" /> <path d="M8 6v8" /></symbol><symbol id="i-ic56" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /> <path d="M16 3.128a4 4 0 0 1 0 7.744" /> <path d="M22 21v-2a4 4 0 0 0-3-3.87" /> <circle cx="9" cy="7" r="4" /></symbol><symbol id="i-ic57" viewBox="0 0 24 24"><rect width="7" height="7" x="3" y="3" rx="1" /> <rect width="7" height="7" x="14" y="3" rx="1" /> <rect width="7" height="7" x="14" y="14" rx="1" /> <rect width="7" height="7" x="3" y="14" rx="1" /></symbol><symbol id="i-ic58" viewBox="0 0 24 24"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /> <circle cx="12" cy="12" r="3" /></symbol><symbol id="i-ic59" viewBox="0 0 24 24"><path d="m10 17 5-5-5-5" /> <path d="M15 12H3" /> <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /></symbol><symbol id="i-ic60" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /> <path d="M10 9H8" /> <path d="M16 13H8" /> <path d="M16 17H8" /></symbol><symbol id="i-ic61" viewBox="0 0 24 24"><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /> <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /> <path d="m9 14 2 2 4-4" /></symbol><symbol id="i-ic62" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /></symbol><symbol id="i-ic63" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="3" rx="2" /> <line x1="8" x2="16" y1="21" y2="21" /> <line x1="12" x2="12" y1="17" y2="21" /></symbol><symbol id="i-ic64" viewBox="0 0 24 24"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /></symbol><symbol id="i-ic65" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /> <circle cx="9" cy="9" r="2" /> <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /></symbol><symbol id="i-ic66" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /> <circle cx="9" cy="7" r="4" /> <line x1="19" x2="19" y1="8" y2="14" /> <line x1="22" x2="16" y1="11" y2="11" /></symbol><symbol id="i-ic67" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2" /> <line x1="2" x2="22" y1="10" y2="10" /></symbol><symbol id="i-ic68" viewBox="0 0 24 24"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" /></symbol><symbol id="i-ic69" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /> <path d="M12 9v4" /> <path d="M12 17h.01" /></symbol><symbol id="i-cloud" viewBox="0 0 24 24"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" /></symbol><symbol id="i-log-out" viewBox="0 0 24 24"><path d="m16 17 5-5-5-5" /> <path d="M21 12H9" /> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /></symbol><symbol id="i-bell" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0" /> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></symbol><symbol id="i-tag" viewBox="0 0 24 24"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /> <circle cx="7.5" cy="7.5" r=".5" fill="currentColor" /></symbol><symbol id="i-shirt" viewBox="0 0 24 24"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z" /></symbol></svg>';
+  function inject(){ if(document.getElementById('ym-icon-sprite'))return; var d=document.createElement('div'); d.id='ym-icon-sprite'; d.style.cssText='position:absolute;width:0;height:0'; d.innerHTML=SPRITE; document.body.insertBefore(d,document.body.firstChild); }
+  if(document.readyState!=='loading')inject(); else document.addEventListener('DOMContentLoaded',inject);
+})();
diff --git a/.superpowers/prototype/screens/inventory-check.html b/.superpowers/prototype/screens/inventory-check.html
new file mode 100644
index 0000000..cf9281e
--- /dev/null
+++ b/.superpowers/prototype/screens/inventory-check.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>库存盘点 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ===== app shell（与 inventory.html 一致）===== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+  /* ===== 盘点页 ===== */
+  .crumb{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--fs-sm); text-decoration:none; margin-bottom:10px;}
+  .crumb:hover{color:var(--primary);}
+  .head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title);}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; transition:background-color .28s,border-color .28s;}
+  .card-h{display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-subtle);}
+  .card-h h3{margin:0; font-size:var(--fs-title); color:var(--heading);}
+  .card-h .hint{margin-left:auto; font-size:var(--fs-xs); color:var(--faint);}
+  .card-b{padding:16px;}
+  .fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
+  .field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
+
+  .toolbar2{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
+  .toolbar2 .searchbox{width:300px;}
+
+  /* 盘点表格 */
+  .chk{min-width:820px;}
+  .chk-h, .chk-r{display:grid; grid-template-columns:2.4fr 1fr 1.1fr 1fr 1.6fr; gap:12px; align-items:center; padding:11px 16px;}
+  .chk-h{color:var(--muted); font-size:var(--fs-sm); font-weight:600; background:var(--th-bg); border-bottom:1px solid var(--border);}
+  .chk-r{border-bottom:1px solid var(--border-subtle);}
+  .chk-r:last-child{border-bottom:none;}
+  .chk-r:hover{background:var(--row-hover);}
+  .chk .num{text-align:right; font-family:var(--font-mono);}
+  .chk-r .book{font-family:var(--font-mono); font-weight:600; color:var(--heading); text-align:right;}
+  .chk-r input.cnt{height:34px; border:1px solid var(--border); border-radius:var(--r-sm); padding:0 9px; font-size:var(--fs-body); background:var(--bg); color:var(--text); outline:none; width:100%; text-align:right; font-family:var(--font-mono);}
+  .chk-r input.cnt:focus{border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px var(--brand50);}
+  .chk-r input.note{height:34px; border:1px solid var(--border); border-radius:var(--r-sm); padding:0 9px; font-size:var(--fs-body); background:var(--bg); color:var(--text); outline:none; width:100%; font-family:var(--font);}
+  .chk-r input.note:focus{border-color:var(--primary); background:var(--surface);}
+  .diff{font-family:var(--font-mono); font-weight:700; text-align:right;}
+  .diff.up{color:var(--success);} .diff.down{color:var(--danger);} .diff.zero{color:var(--faint);}
+  .chk-empty{padding:34px; text-align:center; color:var(--faint); font-size:var(--fs-body);}
+
+  /* 底部盘点汇总栏 */
+  .formbar{position:sticky; bottom:0; margin:18px -26px -22px; padding:14px 26px; background:var(--surface); border-top:1px solid var(--border); display:flex; align-items:center; gap:22px; box-shadow:0 -4px 14px var(--shadow); flex-wrap:wrap;}
+  .sumitem{font-size:var(--fs-body); color:var(--muted); display:flex; align-items:baseline; gap:7px;}
+  .sumitem b{font-size:20px; font-family:var(--font-mono);}
+  .sumitem b.cnt{color:var(--heading);} .sumitem b.up{color:var(--success);} .sumitem b.down{color:var(--danger);}
+  .formbar .sp{margin-left:auto;}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="inventory"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <a class="crumb" href="inventory.html"><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-left"/></svg>库存管理</a>
+      <div class="head">
+        <h1>库存盘点</h1><span class="badge b-草稿">盘点中</span>
+        <div class="actions">
+          <a class="btn ghost" href="inventory.html">取消</a>
+          <div class="btn ghost" onclick="saveDraft()">暂存</div>
+          <div class="btn primary" onclick="submitCheck()"><svg viewBox="0 0 24 24"><use href="#i-ic20"/></svg>提交盘点</div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-h"><h3>盘点单信息</h3></div>
+        <div class="card-b"><div class="fgrid">
+          <div class="field"><label>盘点单号</label><input class="input" value="PD-20260621-001" readonly></div>
+          <div class="field"><label>盘点仓库</label><div class="ctrl" id="whCtrl" onclick="pickWarehouse(this)"><span id="whLbl">主仓</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2" style="color:var(--faint)"><use href="#i-chevron-down"/></svg></div></div>
+          <div class="field"><label>盘点日期</label><input class="input" value="2026-06-21"></div>
+          <div class="field"><label>盘点人</label><input class="input" value="王经理"></div>
+        </div></div>
+      </div>
+
+      <div class="card">
+        <div class="card-h"><h3>盘点明细</h3><span class="hint">输入实盘数量自动计算差异 · 盈绿亏红</span></div>
+        <div class="card-b" style="padding-bottom:0">
+          <div class="toolbar2">
+            <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="商品名 / 拼音 / 编码" oninput="state.q=this.value; renderRows()"></div>
+          </div>
+        </div>
+        <div style="overflow-x:auto"><div class="chk">
+          <div class="chk-h"><span>商品(名/编码)</span><span class="num">账面库存</span><span class="num">实盘数量</span><span class="num">差异</span><span>备注</span></div>
+          <div id="rows"></div>
+        </div></div>
+      </div>
+
+      <div class="formbar">
+        <div class="sumitem">差异项 <b class="cnt" id="sumDiffCnt">0</b> 项</div>
+        <div class="sumitem">盘盈 <b class="up" id="sumUp">+0</b></div>
+        <div class="sumitem">盘亏 <b class="down" id="sumDown">-0</b></div>
+        <div class="sp"></div>
+        <div class="btn ghost" onclick="saveDraft()">暂存</div>
+        <div class="btn primary" onclick="submitCheck()">提交盘点</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+// ---- 盘点明细数据（白酒） ----
+const ITEMS=[
+  {name:'茅台 飞天 53°',code:'MT-FT-500',book:128,py:'maotai feitian'},
+  {name:'五粮液 普五 52°',code:'WLY-PW-500',book:64,py:'wuliangye puwu'},
+  {name:'国窖 1573',code:'GJ-1573-500',book:42,py:'guojiao 1573'},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',book:36,py:'jiannanchun shuijingjian'},
+  {name:'洋河 梦之蓝 M6',code:'YH-M6-500',book:23,py:'yanghe mengzhilan m6'},
+  {name:'泸州老窖 特曲',code:'LZLJ-TQ-500',book:156,py:'luzhoulaojiao tequ'},
+  {name:'习酒 窖藏 1988',code:'XJ-JC1988',book:31,py:'xijiu jiaocang 1988'},
+  {name:'汾酒 青花 20',code:'FJ-QH20-500',book:48,py:'fenjiu qinghua 20'},
+  {name:'郎酒 红花郎 15',code:'LJ-HHL15',book:54,py:'langjiu honghualang 15'},
+  {name:'西凤酒 旗舰版',code:'XF-QJ-500',book:88,py:'xifengjiu qijian'},
+];
+// counted: null 表示未盘
+ITEMS.forEach(it=>it.counted=null);
+const WAREHOUSES=['主仓','二号仓','冷藏库'];
+const state={q:'', warehouse:'主仓'};
+
+function diffOf(it){ return it.counted===null ? null : it.counted-it.book; }
+function filtered(){ const q=state.q.toLowerCase(); return ITEMS.filter(it=>!q||it.name.toLowerCase().includes(q)||it.code.toLowerCase().includes(q)||it.py.includes(q)); }
+
+function renderRows(){
+  const box=document.getElementById('rows');
+  const rows=filtered();
+  if(rows.length===0){ box.innerHTML='<div class="chk-empty">没有匹配的商品 · 试试调整搜索</div>'; recalc(); return; }
+  box.innerHTML=rows.map(it=>{
+    const i=ITEMS.indexOf(it);
+    const d=diffOf(it);
+    let diffHtml;
+    if(d===null) diffHtml='<span class="diff zero">—</span>';
+    else if(d>0) diffHtml=`<span class="diff up">+${d}</span>`;
+    else if(d<0) diffHtml=`<span class="diff down">${d}</span>`;
+    else diffHtml='<span class="diff zero">0</span>';
+    return `<div class="chk-r">
+      <span><div class="pname">${it.name}</div><div class="pcode">${it.code}</div></span>
+      <span class="book">${it.book}</span>
+      <span class="num"><input class="cnt" type="number" min="0" placeholder="${it.book}" value="${it.counted===null?'':it.counted}" oninput="setCount(${i},this.value)"></span>
+      <span class="num" id="diff${i}">${diffHtml}</span>
+      <span><input class="note" type="text" placeholder="选填:破损/赠样/差异说明" value="${it.note||''}" oninput="ITEMS[${i}].note=this.value"></span>
+    </div>`;
+  }).join('');
+  recalc();
+}
+function setCount(i,v){
+  ITEMS[i].counted = v==='' ? null : (+v||0);
+  const d=diffOf(ITEMS[i]);
+  const cell=document.getElementById('diff'+i);
+  if(cell){
+    if(d===null) cell.innerHTML='<span class="diff zero">—</span>';
+    else if(d>0) cell.innerHTML=`<span class="diff up">+${d}</span>`;
+    else if(d<0) cell.innerHTML=`<span class="diff down">${d}</span>`;
+    else cell.innerHTML='<span class="diff zero">0</span>';
+  }
+  recalc();
+}
+function recalc(){
+  let diffCnt=0, up=0, down=0;
+  ITEMS.forEach(it=>{ const d=diffOf(it); if(d===null||d===0)return; diffCnt++; if(d>0)up+=d; else down+=d; });
+  document.getElementById('sumDiffCnt').textContent=diffCnt;
+  document.getElementById('sumUp').textContent='+'+up;
+  document.getElementById('sumDown').textContent = down===0 ? '-0' : String(down); // down 已为负
+}
+
+// ---- 仓库选择 ----
+function pickWarehouse(t){ openMenu(t, WAREHOUSES.map(w=>({v:w,label:w})), w=>{ state.warehouse=w; document.getElementById('whLbl').textContent=w; closeMenus(); }); }
+
+// ---- 动作 ----
+function saveDraft(){ toast('盘点已暂存 ✓'); }
+function submitCheck(){
+  const counted=ITEMS.filter(it=>it.counted!==null).length;
+  if(counted===0){ toast('请至少录入一项实盘数量'); return; }
+  let diffCnt=0; ITEMS.forEach(it=>{ const d=diffOf(it); if(d!==null&&d!==0)diffCnt++; });
+  toast(`已提交盘点 ✓ ${counted} 项实盘，${diffCnt} 项差异待审核`);
+}
+
+// ---- 主题 / 导航 ----
+const HREF={'stock-in':'stock-in-list.html','stock-out':'stock-out-list.html','inventory':'inventory.html','finance':'finance.html','partners':'partners.html','products':'products.html','settings':'settings.html'};
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeMenus(); });
+
+renderRows();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/inventory.html b/.superpowers/prototype/screens/inventory.html
new file mode 100644
index 0000000..b0d43a9
--- /dev/null
+++ b/.superpowers/prototype/screens/inventory.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>库存管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+  .avatar{display:flex; align-items:center; gap:9px; padding-left:6px; border-left:1px solid var(--top-border); height:34px; cursor:pointer;}
+  .avatar .pic{width:30px; height:30px; border-radius:50%; background:var(--top-mark-bg); color:var(--top-mark-fg); font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; justify-content:center;}
+  .avatar .who{font-size:var(--fs-sm); color:var(--top-fg); line-height:1.2;} .avatar .who small{color:var(--top-faint); font-size:var(--fs-xs);}
+
+
+  .view{display:none;} .view.active{display:block;}
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
+  .toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; transition:background-color .28s,border-color .28s;}
+  .toolbar .searchbox{width:240px;}
+  .toolbar .searchbox.code{width:180px;}
+  .toolbar .sp{margin-left:auto;}
+  .placeholder{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:60vh; color:var(--muted);}
+  .placeholder .pi{width:54px; height:54px; border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary);}
+  .placeholder .pi svg{width:26px; height:26px; stroke-width:1.6;} .placeholder h2{margin:6px 0 0; font-size:var(--fs-h2); color:var(--heading);}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="inventory"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="view active" data-view="inventory">
+        <div class="head">
+          <h1>库存管理</h1><span class="sub" id="invSub">共 1,284 个 SKU · 数据实时</span>
+          <div class="actions">
+            <div class="btn ghost" id="colBtn"><svg viewBox="0 0 24 24"><use href="#i-ic21"/></svg>列设置</div>
+            <div class="btn ghost" onclick="toast('已导出当前筛选结果 ✓')"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg>导出</div>
+            <div class="btn primary" onclick="openStockIn()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增入库</div>
+          </div>
+        </div>
+        <div class="kpis">
+          <div class="kpi click" onclick="clearFilters()"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">SKU 总数</div><div class="v">1,284</div><div class="d up">▲ 2.3% 较上月</div></div>
+          <div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg></div><div class="t">库存货值</div><div class="v">¥264万</div><div class="d up">▲ 1.1% 较上月</div></div>
+          <div class="kpi"><div class="ic ic-blue"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">在库数量</div><div class="v">18,920</div><div class="d down">▼ 0.6% 较上月</div></div>
+          <div class="kpi alert click" onclick="filterStatus('缺货')"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="t">缺货预警 · 点击筛选</div><div class="v">17</div><div class="d down">需补货 6 项</div></div>
+        </div>
+        <div class="toolbar">
+          <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="商品名 / 拼音" oninput="state.q=this.value; state.page=1; render()"></div>
+          <div class="searchbox code"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="codeInput" placeholder="商品编码" oninput="state.code=this.value; state.page=1; render()"></div>
+          <div class="chip" id="chipStatus">状态 <span class="cv" id="statusVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+          <div class="sp"></div>
+          <div class="btn ghost sm" onclick="clearFilters()">重置</div>
+        </div>
+        <div class="table flush-top"><table><thead id="thead"></thead><tbody id="tbody"></tbody></table></div>
+        <div class="pager"><div class="pg-size">每页 <button class="pgsize-btn" id="pageSizeBtn" onclick="openPageSize(event)"><span id="pageSizeVal">10</span><svg class="pgsize-caret" viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></button> 条</div><span id="pagerInfo"></span><div class="pg" id="pager"></div></div>
+      </div>
+      <div class="view" data-view="placeholder">
+        <div class="placeholder"><div class="pi" id="phIcon"></div><h2 id="phTitle"></h2>
+          <div>此页布局将在对应 Phase 细化 · 当前先验证导航与主题骨架</div>
+          <div class="btn primary" style="margin-top:8px" onclick="navTo('inventory')">返回库存管理</div></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="overlay" id="ovStockIn"><div class="modal">
+  <div class="modal-head"><h3 id="siTitle">新增入库单</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovStockIn')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="frow">
+      <div class="field"><label>供应商 *</label><div class="ctrl" onclick="toast('可搜索下拉 · 支持新建（原型略）')"><span class="ph">选择或搜索往来单位…</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="field"><label>入库仓库 *</label><div class="ctrl" onclick="toast('仓库下拉（原型略）')"><span>主仓</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>单据日期</label><div class="ctrl input-like"><input value="2026-06-20"></div></div>
+      <div class="field"><label>经手人</label><div class="ctrl input-like"><input value="王经理"></div></div>
+    </div>
+    <label style="display:block; font-size:var(--fs-sm); color:var(--muted); margin:4px 0 8px;">入库明细</label>
+    <div class="lines"><div class="lh"><span>商品</span><span>数量</span><span>单价</span><span style="text-align:right">金额</span><span></span></div><div id="lineRows"></div></div>
+    <div class="btn ghost sm" style="margin-top:8px" onclick="addLine()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>添加商品</div>
+    <div class="ltotal">合计金额 <b id="lineTotal">¥0</b></div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovStockIn')">取消</div><div class="btn primary" onclick="closeOverlay('ovStockIn'); toast('入库单已保存（原型）✓')">保存入库单</div></div>
+</div></div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const ITEMS=[
+  {name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',cat:'酱香',qty:128,unit:'件',cost:'¥2,680',price:'¥2680.00',prodDate:'2024-07-11',inDate:'2026-06-14',supplier:'贵州茅台经销',value:'¥34.3万',status:'在售'},
+  {name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',cat:'浓香',qty:64,unit:'件',cost:'¥1,050',price:'¥1050.00',prodDate:'2024-04-28',inDate:'2026-06-14',supplier:'宜宾五粮液',value:'¥6.7万',status:'在售'},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',cat:'浓香',qty:8,unit:'件',cost:'¥438',price:'¥438.00',prodDate:'2023-11-15',inDate:'2026-06-12',supplier:'绵竹剑南春',value:'¥3,500',status:'缺货'},
+  {name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',cat:'浓香',qty:42,unit:'件',cost:'¥980',price:'¥980.00',prodDate:'2024-02-08',inDate:'2026-06-10',supplier:'泸州老窖',value:'¥4.1万',status:'在售'},
+  {name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'500ml×6',series:'梦之蓝M6',batch:'PZ240520',cat:'绵柔',qty:23,unit:'件',cost:'¥620',price:'¥620.00',prodDate:'2024-05-20',inDate:'2026-06-09',supplier:'洋河股份',value:'¥1.4万',status:'预警'},
+  {name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',cat:'浓香',qty:156,unit:'件',cost:'¥320',price:'¥320.00',prodDate:'2024-06-30',inDate:'2026-06-08',supplier:'泸州老窖',value:'¥5万',status:'在售'},
+  {name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',cat:'酱香',qty:31,unit:'件',cost:'¥760',price:'¥760.00',prodDate:'2023-09-18',inDate:'2026-06-05',supplier:'贵州习酒',value:'¥2.4万',status:'在售'},
+  {name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',cat:'清香',qty:0,unit:'件',cost:'¥420',price:'¥420.00',prodDate:'2024-01-12',inDate:'2026-06-03',supplier:'山西杏花村',value:'¥0',status:'缺货'},
+  {name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',cat:'酱香',qty:54,unit:'件',cost:'¥560',price:'¥560.00',prodDate:'2024-03-25',inDate:'2026-06-01',supplier:'四川郎酒',value:'¥3万',status:'在售'},
+  {name:'古井贡 年份原浆',code:'GJG-NF-500',spec:'500ml×6',series:'年份原浆',batch:'PZ240802',cat:'浓香',qty:12,unit:'件',cost:'¥390',price:'¥390.00',prodDate:'2024-08-02',inDate:'2026-05-28',supplier:'古井贡酒',value:'¥4,700',status:'预警'},
+  {name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',cat:'凤香',qty:88,unit:'件',cost:'¥280',price:'¥280.00',prodDate:'2024-06-14',inDate:'2026-05-25',supplier:'陕西西凤',value:'¥2.5万',status:'在售'},
+  {name:'水井坊 井台',code:'SJF-JT-500',spec:'500ml×6',series:'井台',batch:'PZ231209',cat:'浓香',qty:6,unit:'件',cost:'¥680',price:'¥680.00',prodDate:'2023-12-09',inDate:'2026-05-20',supplier:'四川水井坊',value:'¥4,100',status:'缺货'},
+];
+const STATUS=['全部','在售','预警','缺货'];
+const COLS=[{key:'product',label:'商品',fixed:true},{key:'spec',label:'规格'},{key:'series',label:'系列'},{key:'batch',label:'批次号'},{key:'qty',label:'库存',num:true},{key:'cost',label:'成本价',num:true},{key:'price',label:'单价',num:true},{key:'prodDate',label:'生产日期'},{key:'inDate',label:'入库时间'},{key:'supplier',label:'供应商'},{key:'status',label:'状态',filter:'status'},{key:'act',label:'操作',fixed:true}];
+const state={q:'',code:'',status:'全部',page:1,perPage:10,hidden:new Set()};
+
+function setActive(k){ document.querySelectorAll('.nav[data-k]').forEach(e=>e.classList.toggle('active',e.dataset.k===k)); }
+function navTo(k){ setActive(k); const inv=document.querySelector('[data-view="inventory"]'), ph=document.querySelector('[data-view="placeholder"]'); if(k==='inventory'){inv.classList.add('active');ph.classList.remove('active');return;} inv.classList.remove('active');ph.classList.add('active'); const nav=NAVS.find(n=>n.k===k); document.getElementById('phTitle').textContent=nav.label; document.getElementById('phIcon').innerHTML=navSvg(nav.d); }
+
+function visibleCols(){ return COLS.filter(c=>!state.hidden.has(c.key)); }
+function filtered(){ return ITEMS.filter(it=>{ if(state.status!=='全部'&&it.status!==state.status)return false; if(state.q){const q=state.q.toLowerCase(); if(!it.name.toLowerCase().includes(q))return false;} if(state.code){const c=state.code.toLowerCase(); if(!it.code.toLowerCase().includes(c))return false;} return true; }); }
+function render(){
+  document.getElementById('statusVal').textContent=state.status==='全部'?'':state.status;
+  document.getElementById('chipStatus').classList.toggle('on',state.status!=='全部');
+  const cols=visibleCols();
+  document.getElementById('thead').innerHTML='<tr>'+cols.map(c=>{ const cls=(c.num?'num ':'')+(c.key==='act'?'act ':''); if(c.filter){const on=state.status!=='全部'; return `<th class="${cls}"><span class="fh ${on?'filtered':''}" onclick="openFilter('${c.filter}',this)">${c.label} <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic22"/></svg></span></th>`;} return `<th class="${cls}">${c.label}</th>`; }).join('')+'</tr>';
+  const rows=filtered(); const start=(state.page-1)*state.perPage; const pageRows=rows.slice(start,start+state.perPage); const tb=document.getElementById('tbody');
+  if(rows.length===0){ tb.innerHTML=`<tr><td colspan="${cols.length}"><div class="empty">没有匹配的商品 · 试试调整筛选或搜索</div></td></tr>`; }
+  else { tb.innerHTML=pageRows.map(it=>{ const idx=ITEMS.indexOf(it); return '<tr class="click" onclick="openProduct('+idx+')">'+cols.map(c=>{ if(c.key==='product')return `<td><div class="pname">${it.name}</div><div class="pcode">${it.code}</div></td>`; if(c.key==='qty')return `<td class="num"><span class="qty ${it.qty<=10?'low':''}">${it.qty}</span></td>`; if(c.key==='prodDate')return `<td style="font-family:var(--font-mono);color:var(--text)">${it.prodDate}</td>`; if(c.key==='inDate')return `<td style="font-family:var(--font-mono);color:var(--muted)">${it.inDate}</td>`; if(c.key==='status')return `<td><span class="badge b-${it.status}">${it.status}</span></td>`; if(c.key==='act')return `<td class="act"><div class="row-act" onclick="event.stopPropagation()"><svg viewBox="0 0 24 24" onclick="openProduct(${idx})"><use href="#i-eye"/></svg></div></td>`; return `<td class="${c.num?'num':''}">${it[c.key]}</td>`; }).join('')+'</tr>'; }).join(''); }
+  document.getElementById('pagerInfo').textContent=`显示 ${rows.length?start+1:0}–${Math.min(start+state.perPage,rows.length)}，共 ${rows.length}`;
+  const pages=Math.max(1,Math.ceil(rows.length/state.perPage)); let pg=`<button ${state.page<=1?'disabled':''} onclick="go(${state.page-1})">‹</button>`; for(let p=1;p<=pages;p++)pg+=`<button class="${p===state.page?'cur':''}" onclick="go(${p})">${p}</button>`; pg+=`<button ${state.page>=pages?'disabled':''} onclick="go(${state.page+1})">›</button>`; document.getElementById('pager').innerHTML=pg;
+  document.getElementById('invSub').textContent=`共 ${rows.length} 个 SKU · 数据实时`;
+}
+function go(p){ const pages=Math.max(1,Math.ceil(filtered().length/state.perPage)); state.page=Math.min(Math.max(1,p),pages); render(); }
+const PAGE_SIZES=[10,20,50,100];
+function openPageSize(e){ openMenu(e.currentTarget, PAGE_SIZES.map(n=>({v:String(n),label:String(n),sel:n===state.perPage})), v=>{ closeMenus(); setPerPage(v); }, 'pgsize-menu', 88); }
+function setPerPage(v){ state.perPage=+v; state.page=1; const el=document.getElementById('pageSizeVal'); if(el)el.textContent=v; render(); }
+function filterStatus(s){ state.status=s; state.page=1; navTo('inventory'); render(); }
+function clearFilters(){ state.q='';state.code='';state.status='全部';state.page=1; document.getElementById('searchInput').value=''; document.getElementById('codeInput').value=''; render(); }
+
+function openFilter(kind,t){ openMenu(t,STATUS.map(v=>({v,label:v,sel:v===state.status})),v=>{ state.status=v; state.page=1; closeMenus(); render(); }); }
+document.getElementById('chipStatus').onclick=e=>openFilter('status',e.currentTarget);
+const COL_KEY='jiu-inv-hidden';
+function saveHidden(){ try{ localStorage.setItem(COL_KEY, JSON.stringify([...state.hidden])); }catch(e){} }
+function openColMenu(t){ const opts=COLS.filter(c=>!c.fixed).map(c=>({v:c.key,label:c.label,sel:!state.hidden.has(c.key)})); openMenu(t,opts,v=>{ state.hidden.has(v)?state.hidden.delete(v):state.hidden.add(v); saveHidden(); render(); openColMenu(t); }); }
+document.getElementById('colBtn').onclick=e=>openColMenu(e.currentTarget);
+
+
+function openStockIn(title){ document.getElementById('siTitle').textContent=title||'新增入库单'; lines=[]; addLine(); document.getElementById('ovStockIn').classList.add('show'); }
+function closeOverlay(id){ document.getElementById(id).classList.remove('show'); }
+let lines=[];
+function addLine(){ lines.push({name:'',qty:1,price:0}); renderLines(); }
+function renderLines(){ document.getElementById('lineRows').innerHTML=lines.map((l,i)=>`<div class="lr"><input placeholder="搜索商品…" value="${l.name}" oninput="lines[${i}].name=this.value"><input type="number" value="${l.qty}" oninput="lines[${i}].qty=+this.value||0;calcTotal()"><input type="number" value="${l.price}" oninput="lines[${i}].price=+this.value||0;calcTotal()"><span class="amt" id="amt${i}">¥${(l.qty*l.price).toLocaleString()}</span><span class="del" onclick="lines.splice(${i},1);renderLines()">✕</span></div>`).join(''); calcTotal(); }
+function calcTotal(){ lines.forEach((l,i)=>{const a=document.getElementById('amt'+i); if(a)a.textContent='¥'+(l.qty*l.price).toLocaleString();}); document.getElementById('lineTotal').textContent='¥'+lines.reduce((s,l)=>s+l.qty*l.price,0).toLocaleString(); }
+
+// 商品抽屉走共享模块 product-editor.js（openProductEditor / closePubDrawer 全局）
+function openProduct(idx){ openProductEditor(ITEMS[idx]); }
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closePubDrawer();document.querySelectorAll('.overlay.show').forEach(o=>o.classList.remove('show'));} });
+
+try{ const saved=JSON.parse(localStorage.getItem(COL_KEY)||'[]'); if(Array.isArray(saved)) state.hidden=new Set(saved); }catch(e){}
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="product-editor.js"></script>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/login.html b/.superpowers/prototype/screens/login.html
new file mode 100644
index 0000000..2e0567b
--- /dev/null
+++ b/.superpowers/prototype/screens/login.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>登录 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--page); display:flex; align-items:center; justify-content:center; padding:24px; transition:background-color .28s;}
+
+  /* 主题切换器（右上角） */
+  .theme-switch{position:fixed; top:18px; right:20px; display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; box-shadow:var(--sh-1); z-index:var(--z-shell-scrim);}
+  .theme-switch button{width:30px; height:30px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--muted); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:var(--font); transition:.15s;}
+  .theme-switch button:hover{background:var(--bg);}
+  .theme-switch button.on{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}
+
+  /* 两栏卡片 */
+  .auth{display:grid; grid-template-columns:minmax(0,1fr) 420px; width:100%; max-width:880px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3);}
+
+  /* 左：品牌面板 */
+  .brand{background:linear-gradient(150deg,var(--side-bg),var(--side-active-bg)); color:var(--side-active-fg); padding:48px 40px; display:flex; flex-direction:column; min-height:480px;}
+  .brand .mk{width:64px; height:64px;}
+  .brand .name{font-size:var(--fs-display); font-weight:800; letter-spacing:1px; margin:24px 0 8px;}
+  .brand .tag{font-size:var(--fs-body); color:var(--side-fg); line-height:1.7; max-width:280px;}
+  .brand .pts{margin-top:auto; display:flex; flex-direction:column; gap:14px;}
+  .brand .pt{display:flex; align-items:center; gap:11px; font-size:var(--fs-sm); color:var(--side-fg);}
+  .brand .pt .pi{width:30px; height:30px; border-radius:var(--r-md); background:var(--hero-glass); display:flex; align-items:center; justify-content:center; flex:none;}
+  .brand .pt svg{width:16px; height:16px; stroke:var(--side-active-fg); stroke-width:1.8;}
+
+  /* 右：表单 */
+  .form{padding:48px 40px; display:flex; flex-direction:column; justify-content:center;}
+  .form h1{margin:0 0 6px; font-size:var(--fs-h1); color:var(--heading); font-weight:700;}
+  .form .lead{margin:0 0 26px; font-size:var(--fs-sm); color:var(--muted);}
+  .form .field{flex:none; margin-bottom:16px;}
+
+  /* 记住我行 */
+  .remember{display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px;}
+  .check{display:flex; align-items:center; gap:8px; font-size:var(--fs-body); color:var(--text); cursor:pointer; user-select:none;}
+  .check .box{width:18px; height:18px; border:1.5px solid var(--border); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--surface); flex:none; transition:.15s;}
+  .check .box svg{width:13px; height:13px; stroke:var(--on-primary); stroke-width:2.4; opacity:0;}
+  .check.on .box{background:var(--primary); border-color:var(--primary);}
+  .check.on .box svg{opacity:1;}
+  .link{font-size:var(--fs-sm); color:var(--primary); text-decoration:none; cursor:pointer;}
+  .link:hover{text-decoration:underline;}
+
+  .form .btn.primary{width:100%; justify-content:center;}
+  .foot{margin-top:24px; text-align:center; font-size:var(--fs-xs); color:var(--faint);}
+
+  @media (max-width:760px){
+    .auth{grid-template-columns:1fr; max-width:440px;}
+    .brand{min-height:auto; padding:36px 32px;}
+    .brand .pts{display:none;}
+    .form{padding:34px 32px;}
+  }
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+  <div class="theme-switch" id="themeSwitch">
+    <button data-t="a" title="经典蓝">A</button>
+    <button data-t="b" title="琥珀">B</button>
+    <button data-t="c" title="酒窖">C</button>
+  </div>
+
+  <div class="auth">
+    <div class="brand">
+      <span class="mk">
+        <svg width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg>
+      </span>
+      <div class="name">岩美酒库</div>
+      <div class="tag">酒水进销存 · 审核驱动业务流</div>
+      <div class="pts">
+        <div class="pt"><span class="pi"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></span>入库出库 · 审核后实时改库存</div>
+        <div class="pt"><span class="pi"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg></span>往来对账 · 财务一目了然</div>
+        <div class="pt"><span class="pi"><svg viewBox="0 0 24 24"><use href="#i-ic23"/></svg></span>多端协同 · 多租户安全隔离</div>
+      </div>
+    </div>
+
+    <div class="form">
+      <h1>登录</h1>
+      <p class="lead">欢迎回来，请输入账号信息</p>
+      <div class="field"><label>门店编号</label><input class="input" id="shop" placeholder="例如 DSJH-001" value="DSJH-001"></div>
+      <div class="field"><label>登录账号</label><input class="input" id="user" placeholder="请输入登录账号" value="wang"></div>
+      <div class="field"><label>密码</label><input class="input" id="pass" type="password" placeholder="请输入密码" value="········"></div>
+      <div class="remember">
+        <div class="check on" id="remember" onclick="this.classList.toggle('on')">
+          <span class="box"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg></span>记住我
+        </div>
+        <a class="link" onclick="toast('找回密码请联系门店管理员（原型）')">忘记密码？</a>
+      </div>
+      <div class="btn primary lg" onclick="toast('登录中…（原型）')">登录</div>
+      <div class="foot">还没有门店账号？<a class="link" href="register.html" style="font-weight:600;text-decoration:none">注册新门店 →</a></div>
+      <div class="foot" style="margin-top:8px">岩美酒库 © 2026 · 仅授权门店可登录</div>
+    </div>
+  </div>
+
+  <div class="toast" id="toast"></div>
+
+<script>
+  const THEMES={a:'经典蓝',b:'琥珀',c:'酒窖'};
+  function setTheme(t){ document.documentElement.dataset.theme=t; localStorage.setItem('jiu-theme',t); document.querySelectorAll('#themeSwitch button').forEach(b=>b.classList.toggle('on',b.dataset.t===t)); }
+  document.querySelectorAll('#themeSwitch button').forEach(b=>b.onclick=()=>setTheme(b.dataset.t));
+  let toastT; function toast(m){ const t=document.getElementById('toast'); t.textContent=m; t.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>t.classList.remove('show'),2000); }
+  setTheme(localStorage.getItem('jiu-theme')||'a');
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-about.html b/.superpowers/prototype/screens/m-about.html
new file mode 100644
index 0000000..90e0778
--- /dev/null
+++ b/.superpowers/prototype/screens/m-about.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>关于我们 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .ab-hero{display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 16px;}
+  .ab-ico{width:72px; height:72px; border-radius:18px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2);}
+  .ab-ico svg{width:40px; height:40px;}
+  .ab-nm{font-size:var(--fs-h1); font-weight:800; color:var(--heading); margin-top:14px;}
+  .ab-ver{font-size:var(--fs-sm); color:var(--muted); margin-top:4px; font-family:var(--font-mono);}
+  .ab-btns{display:flex; gap:10px; margin-top:18px; width:100%;}
+  .tl{position:relative; padding-left:18px;}
+  .tl-item{position:relative; padding:0 0 16px 14px; border-left:2px solid var(--border-subtle);}
+  .tl-item:last-child{border-left-color:transparent;}
+  .tl-item::before{content:''; position:absolute; left:-5px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--primary);}
+  .tl-v{font-weight:700; color:var(--heading); font-size:var(--fs-body);} .tl-v small{color:var(--faint); font-weight:400; font-family:var(--font-mono); margin-left:8px;}
+  .tl-li{font-size:var(--fs-sm); color:var(--muted); margin-top:4px; line-height:1.7;}
+  .tl-grp{margin-top:8px;}
+  .tlt{display:inline-block; font-size:var(--fs-xs); font-weight:600; padding:1px 7px; border-radius:var(--r-pill);}
+  .tlt-feat{background:var(--success-bg); color:var(--success);}
+  .tlt-impr{background:var(--info-soft); color:var(--primary);}
+  .tlt-fix{background:var(--warn-bg); color:var(--warn);}
+  .tl-ul{margin:5px 0 0; padding-left:18px;}
+  .tl-ul li{font-size:var(--fs-sm); color:var(--text); line-height:1.7;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="关于我们"></div>
+<div class="m-page">
+  <div class="m-scroll">
+    <div class="ab-hero">
+      <div class="ab-ico"><svg viewBox="0 0 64 64"><g stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3.4" fill="#C97B86"/></svg></div>
+      <div class="ab-nm">岩美酒库</div>
+      <div class="ab-ver">v1.0.72 · 酒水进销存管理系统</div>
+      <div style="margin-top:10px"><div class="btn ghost sm" onclick="mToast('已是最新版本 ✓')"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>检查更新</div></div>
+      <div class="ab-btns"><div class="btn primary" style="flex:1; justify-content:center" onclick="mToast('感谢反馈，我们会尽快跟进 ✓')"><svg viewBox="0 0 24 24"><use href="#i-bug"/></svg>反馈 Bug</div><div class="btn ghost" style="flex:1; justify-content:center" onclick="mToast('感谢建议，我们会认真考虑 ✓')"><svg viewBox="0 0 24 24"><use href="#i-lightbulb"/></svg>功能建议</div></div>
+    </div>
+
+    <div class="m-section">产品信息</div>
+    <div class="pe-card"><div class="pe-b" style="padding-top:2px;padding-bottom:2px">
+      <div class="drow"><span>出品方</span><b style="text-align:right">岩美科技 · YANMEI TECH</b></div>
+      <div class="drow"><span>多端覆盖</span><b style="text-align:right">Web · macOS · Windows · iOS · 安卓</b></div>
+      <div class="drow" style="border-bottom:none"><span>产品定位</span><b style="text-align:right">酒水进销存 / 财务 / 防伪溯源</b></div>
+    </div></div>
+
+    <div class="m-section">授权信息</div>
+    <div class="pe-card"><div class="pe-b" style="padding-top:2px;padding-bottom:2px">
+      <div class="drow"><span>授权状态</span><b><span class="badge b-在售">已授权</span></b></div>
+      <div class="drow"><span>到期日</span><b style="font-family:var(--font-mono)">2027-03-15</b></div>
+      <div class="drow" style="border-bottom:none"><span>剩余天数</span><b>267 天</b></div>
+    </div></div>
+
+    <div class="m-section">更新日志</div>
+    <div class="pe-card" style="padding:14px"><div class="tl" id="tl"></div></div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const CHANGELOG=[
+  {ver:'v1.0.72',date:'2026-06-22',groups:[
+    {tag:'feat',label:'新功能',items:['用户管理新增四级角色：超级管理员 / 管理员 / 操作员 / 只读','商品公开页编辑器：图片、品鉴笔记、适饮建议可视化编辑并实时预览']},
+    {tag:'impr',label:'改进',items:['顶栏 / 侧栏 / 状态栏统一为单一来源，全局一处生效','金额卡片改用「万」单位展示，更符合阅读习惯']},
+  ]},
+  {ver:'v1.0.66',date:'2026-06-18',groups:[
+    {tag:'feat',label:'新功能',items:['入库 / 出库列表新增搜索框，支持单号、商品、往来单位关键字检索','入库 / 出库 / 库存页新增一键刷新']},
+    {tag:'fix',label:'修复',items:['入库审核库存沿用明细真实快照名','库存列表过滤软删商品，修复历史导入占位顶替']},
+  ]},
+  {ver:'v1.0.63',date:'2026-06-05',groups:[
+    {tag:'feat',label:'新功能',items:['新增设备管理：标签机 / 小票机 / 扫码枪 / 电子秤接入与测试打印','商品名搜索支持全拼与首字母']},
+    {tag:'impr',label:'改进',items:['移动端列表改为卡片流，窄屏不再横向溢出']},
+  ]},
+  {ver:'v1.0.60',date:'2026-05-22',groups:[
+    {tag:'feat',label:'新功能',items:['往来单位对账单与应收应付明细抽屉']},
+    {tag:'impr',label:'改进',items:['三套主题（经典蓝 / 琥珀 / 酒窖）一键切换并记忆']},
+    {tag:'fix',label:'修复',items:['修复出库审核库存不足时未正确回滚的问题']},
+  ]},
+];
+const tagCls={feat:'tlt-feat',impr:'tlt-impr',fix:'tlt-fix'};
+document.getElementById('tl').innerHTML=CHANGELOG.map(v=>`<div class="tl-item"><div class="tl-v">${v.ver}<small>${v.date}</small></div>${v.groups.map(g=>`<div class="tl-grp"><span class="tlt ${tagCls[g.tag]}">${g.label}</span><ul class="tl-ul">${g.items.map(it=>`<li>${it}</li>`).join('')}</ul></div>`).join('')}</div>`).join('');
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-devices.html b/.superpowers/prototype/screens/m-devices.html
new file mode 100644
index 0000000..50bed2b
--- /dev/null
+++ b/.superpowers/prototype/screens/m-devices.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>设备管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="设备管理"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="m-section">已连接设备</div>
+    <div id="list"></div>
+  </div>
+</div>
+<div class="m-fab" onclick="mToast('添加设备（原型）')"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const DEV=[
+  {name:'热敏标签打印机',model:'佳博 GP-1124T',type:'打印机',status:'在线'},
+  {name:'单据针式打印机',model:'爱普生 LQ-630K',type:'打印机',status:'在线'},
+  {name:'蓝牙扫码枪',model:'新大陆 NLS-BS80',type:'扫码枪',status:'离线'},
+];
+document.getElementById('list').innerHTML=DEV.map(d=>`<div class="m-card" onclick="openD('${d.name}')"><div class="m-row">
+  <div class="mc-main"><div class="mc-nm">${d.name}</div><div class="mc-sub">${d.model} · ${d.type}</div></div>
+  <div class="mc-right"><span class="badge b-${d.status}">${d.status}</span></div>
+  <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+</div></div>`).join('');
+function openD(n){ const d=DEV.find(x=>x.name===n);
+  openSheet(d.name, `<div class="drow"><span>型号</span><b>${d.model}</b></div><div class="drow"><span>类型</span><b>${d.type}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${d.status}">${d.status}</span></b></div>
+  <div style="display:flex;gap:10px;margin-top:16px"><div class="btn ghost" style="flex:1;justify-content:center" onclick="mToast('测试打印（原型）')">测试</div><div class="btn primary" style="flex:1;justify-content:center" onclick="mToast('重新连接（原型）');closeSheet()">重新连接</div></div>`);
+}
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-finance.html b/.superpowers/prototype/screens/m-finance.html
new file mode 100644
index 0000000..b5cb254
--- /dev/null
+++ b/.superpowers/prototype/screens/m-finance.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>财务管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-title="财务管理"></div>
+<div class="m-page has-tabs">
+  <div class="m-scroll">
+    <div class="m-kpi">
+      <div class="k"><div class="kl">本月收入</div><div class="kv">¥86.4万</div><div class="kd up">▲ 8.2% 较上月</div></div>
+      <div class="k"><div class="kl">本月支出</div><div class="kv">¥52.1万</div><div class="kd down">▲ 3.1% 较上月</div></div>
+      <div class="k"><div class="kl">应收合计</div><div class="kv">¥23.8万</div><div class="kd warn">12 笔未结</div></div>
+      <div class="k"><div class="kl">应付合计</div><div class="kv">¥9.6万</div><div class="kd warn">5 笔未结</div></div>
+    </div>
+    <div class="seg" style="width:100%; margin-top:14px"><button class="on" style="flex:1" onclick="setTab('ar')">应收</button><button style="flex:1" onclick="setTab('ap')">应付</button><button style="flex:1" onclick="setTab('flow')">流水</button></div>
+    <div class="m-section" id="cnt">应收账款</div>
+    <div id="list"></div>
+  </div>
+</div>
+<nav class="m-tabbar" data-m-tabs data-active="finance"></nav>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const AR=[
+  {party:'城东烟酒行',amt:'¥86,200',status:'未结清',date:'账期 06-30'},
+  {party:'金樽会所',amt:'¥41,000',status:'未结清',date:'账期 07-05'},
+  {party:'宴汇大酒店',amt:'¥12,400',status:'已结清',date:'已收 06-18'},
+];
+const AP=[
+  {party:'鼎晟供应链',amt:'¥52,800',status:'未结清',date:'账期 06-28'},
+  {party:'贵州茅台经销',amt:'¥43,200',status:'已结清',date:'已付 06-15'},
+];
+const FLOW=[
+  {party:'城东烟酒行 · 收款',amt:'+¥18,600',status:'收款',date:'2026-06-20 14:22'},
+  {party:'鼎晟供应链 · 付款',amt:'−¥80,400',status:'付款',date:'2026-06-20 10:05'},
+  {party:'宴汇大酒店 · 收款',amt:'+¥6,400',status:'收款',date:'2026-06-19 16:40'},
+];
+let tab='ar';
+const FTABS=['ar','ap','flow'];
+function setTab(t){ tab=t; const idx=FTABS.indexOf(t); document.querySelectorAll('.seg button').forEach((b,i)=>b.classList.toggle('on',i===idx)); render(); }
+function render(){
+  const cfg={ar:['应收账款',AR],ap:['应付账款',AP],flow:['资金流水',FLOW]}[tab];
+  document.getElementById('cnt').textContent=`${cfg[0]} · 共 ${cfg[1].length}`;
+  document.getElementById('list').innerHTML=cfg[1].map(r=>`<div class="m-card"><div class="m-row">
+    <div class="mc-main"><div class="mc-nm">${r.party}</div><div class="mc-sub">${r.date}</div></div>
+    <div class="mc-right"><span class="badge b-${r.status}">${r.status}</span><span class="mc-amt">${r.amt}</span></div>
+  </div></div>`).join('');
+}
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-inventory-check.html b/.superpowers/prototype/screens/m-inventory-check.html
new file mode 100644
index 0000000..970af97
--- /dev/null
+++ b/.superpowers/prototype/screens/m-inventory-check.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>库存盘点 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;} .diff{color:var(--danger); font-family:var(--font-mono); font-weight:700;} .diff.ok{color:var(--success);}</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="库存盘点"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="m-section">盘点单</div>
+    <div id="list"></div>
+  </div>
+</div>
+<div class="m-fab" onclick="mToast('新建盘点单（原型）')"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const CHECKS=[
+  {no:'PD-20260620-002',scope:'主仓 · 全部品类',items:128,diff:'-3',status:'进行中',date:'2026-06-20'},
+  {no:'PD-20260615-001',scope:'主仓 · 酱香',items:42,diff:'+1',status:'已完成',date:'2026-06-15'},
+  {no:'PD-20260601-003',scope:'主仓 · 全部品类',items:130,diff:'0',status:'已完成',date:'2026-06-01'},
+];
+document.getElementById('list').innerHTML=CHECKS.map(c=>`<div class="m-card" onclick="openC('${c.no}')">
+  <div class="m-row"><div class="mc-main"><div class="mc-nm">${c.no}</div><div class="mc-sub">${c.scope} · ${c.items} 项</div></div>
+  <div class="mc-right"><span class="badge b-${c.status}">${c.status}</span><span class="diff ${c.diff==='0'?'ok':''}">差异 ${c.diff}</span></div>
+  <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div>
+  <div class="mc-foot"><svg width="13" height="13" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-ic24"/></svg>${c.date}</div>
+</div>`).join('');
+function openC(no){ const c=CHECKS.find(x=>x.no===no);
+  openSheet('盘点单详情', `<div class="drow"><span>单号</span><b style="font-family:var(--font-mono)">${c.no}</b></div><div class="drow"><span>范围</span><b>${c.scope}</b></div><div class="drow"><span>商品项数</span><b>${c.items} 项</b></div><div class="drow"><span>盈亏差异</span><b class="diff ${c.diff==='0'?'ok':''}">${c.diff}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${c.status}">${c.status}</span></b></div>
+  <div style="display:flex;gap:10px;margin-top:16px">${c.status==='进行中'?'<div class="btn primary" style="flex:1;justify-content:center" onclick="mToast(\'继续盘点（原型）\')">继续录入</div>':'<div class="btn ghost" style="flex:1;justify-content:center" onclick="closeSheet()">关闭</div>'}</div>`);
+}
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-inventory.html b/.superpowers/prototype/screens/m-inventory.html
new file mode 100644
index 0000000..c73d297
--- /dev/null
+++ b/.superpowers/prototype/screens/m-inventory.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>库存 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .qty-low{color:var(--danger); font-weight:700;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-title="库存"></div>
+<div class="m-page has-tabs">
+  <div class="m-scroll">
+    <div class="m-kpi">
+      <div class="k"><div class="kl">SKU 总数</div><div class="kv">1,284</div><div class="kd up">▲ 2.3% 较上月</div></div>
+      <div class="k"><div class="kl">库存货值</div><div class="kv">¥264万</div><div class="kd up">▲ 1.5% 较上月</div></div>
+      <div class="k"><div class="kl">在库数量</div><div class="kv">18,920</div><div class="kd">件 · 实时</div></div>
+      <div class="k"><div class="kl">缺货预警</div><div class="kv">17</div><div class="kd warn">需补货 6 项</div></div>
+    </div>
+
+    <div style="margin-top:14px" class="m-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="商品名 / 拼音 / 编码" oninput="state.q=this.value;render()"></div>
+
+    <div class="m-section" id="cnt">商品</div>
+    <div id="list"></div>
+  </div>
+</div>
+<nav class="m-tabbar" data-m-tabs data-active="inventory"></nav>
+<div class="m-fab" onclick="openCreate()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const ITEMS=[
+  {name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',qty:128,unit:'件',cost:'¥2,680',supplier:'贵州茅台经销',status:'在售'},
+  {name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',qty:64,unit:'件',cost:'¥1,050',supplier:'宜宾五粮液',status:'在售'},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',qty:8,unit:'件',cost:'¥438',supplier:'绵竹剑南春',status:'缺货'},
+  {name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',qty:42,unit:'件',cost:'¥980',supplier:'泸州老窖',status:'在售'},
+  {name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'550ml×6',series:'梦之蓝M6',batch:'PZ240520',qty:23,unit:'件',cost:'¥620',supplier:'洋河股份',status:'预警'},
+  {name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',qty:156,unit:'件',cost:'¥320',supplier:'泸州老窖',status:'在售'},
+  {name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',qty:31,unit:'件',cost:'¥760',supplier:'贵州习酒',status:'在售'},
+  {name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',qty:0,unit:'件',cost:'¥420',supplier:'山西杏花村',status:'缺货'},
+  {name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',qty:54,unit:'件',cost:'¥560',supplier:'四川郎酒',status:'在售'},
+  {name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',qty:88,unit:'件',cost:'¥280',supplier:'陕西西凤',status:'在售'},
+];
+const state={q:''};
+
+function filtered(){ return ITEMS.filter(it=>{ if(state.q){const q=state.q.toLowerCase(); if(!it.name.toLowerCase().includes(q)&&!it.code.toLowerCase().includes(q))return false;} return true; }); }
+function render(){
+  const rows=filtered();
+  document.getElementById('cnt').textContent=`商品 · 共 ${rows.length}`;
+  const L=document.getElementById('list');
+  if(!rows.length){ L.innerHTML=`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>没有匹配的商品 · 调整筛选或搜索</div>`; return; }
+  L.innerHTML=rows.map((it,i)=>`<a class="m-card" onclick="openItem(${ITEMS.indexOf(it)})">
+    <div class="m-row">
+      <div class="mc-main"><div class="mc-nm">${it.name}</div><div class="mc-sub">${it.code} · ${it.spec}</div></div>
+      <div class="mc-right"><span class="badge b-${it.status}">${it.status}</span><span class="mc-amt"><span class="${it.qty<=10?'qty-low':''}">${it.qty}</span> ${it.unit}</span></div>
+      <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+    </div>
+  </a>`).join('');
+}
+function openItem(idx){ const it=ITEMS[idx];
+  if(!peEdit||peEdit.idx!==idx) peEdit={idx,imgs:[PE_SAMPLE[0],'',''],introName:'',introBody:''};
+  const hasIntro=!!peEdit.introName;
+  openSheet(it.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${it.code}</b></div><div class="drow"><span>规格</span><b>${it.spec}</b></div><div class="drow"><span>系列</span><b>${it.series}</b></div><div class="drow"><span>批次号</span><b style="font-family:var(--font-mono)">${it.batch}</b></div><div class="drow"><span>当前库存</span><b>${it.qty} ${it.unit}</b></div><div class="drow"><span>成本价</span><b>${it.cost}</b></div><div class="drow"><span>供应商</span><b>${it.supplier}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${it.status}">${it.status}</span></b></div>
+  <div class="pe-card" style="margin-top:14px"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg></span>商品图片</div>
+    <div class="pe-b"><div class="pe-gallery" id="mGallery"></div><div class="pe-note">建议主图为白底产品图，可再加细节图（瓶身/防伪）与场景图。</div></div></div>
+  <div class="pe-card"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg></span>商品介绍 / 卖点</div>
+    <div class="pe-b"><div class="pe-pick" onclick="pickIntroM()"><span class="${hasIntro?'':'ph'}" id="mIntroName">${hasIntro?peEdit.introName:'从介绍库选择…'}</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+      <textarea class="pe-text" id="mIntroText" placeholder="一句话卖点 + 商品介绍，可在选用后直接编辑…">${peEdit.introBody}</textarea></div></div>
+  <div style="display:flex;gap:10px;margin-top:4px"><div class="btn ghost" style="flex:1;justify-content:center" onclick="mToast('公开页已保存（原型）✓')"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>保存公开页</div><div class="btn primary" style="flex:1;justify-content:center" onclick="closeSheet();location.href='m-stock-in.html'">入库</div></div>`);
+  renderMGallery();
+}
+function openCreate(){
+  openSheet('新建单据', `<div class="m-opt" onclick="location.href='m-stock-in.html'"><span class="oic"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></span>新增入库单</div><div class="m-opt" onclick="mToast('出库录单（M2 实现）');closeSheet()"><span class="oic"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg></span>新增出库单</div>`);
+}
+
+// ---- 公开页编辑（与桌面 product-editor.js 同款：商品图片 + 商品介绍/卖点，复用 .pe-* 原子，直接嵌在详情抽屉内）----
+const INTRO_LIB=[
+  {t:'酱香经典 · 宴请送礼',body:'酱香突出、醇厚协调，空杯留香持久，是商务宴请与节庆馈赠之选。'},
+  {t:'浓香绵柔 · 口粮优选',body:'入口绵甜、诸味协调、尾净味长，日常聚饮与口粮自饮皆宜。'},
+  {t:'高端收藏 · 限量原浆',body:'精选原浆、限量出品，酒体丰满、陈香雅致，兼具品饮与收藏价值。'},
+  {t:'清香纯净 · 入门友好',body:'清香纯正、入口净爽、回味甘冽，适合清淡口味与入门饮用。'},
+];
+const PE_TILE=['主图','细节图','场景图'];
+const PE_IMG=(bg,c)=>`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Crect width='100' height='130' fill='%23${bg}'/%3E%3Crect x='40' y='18' width='20' height='97' rx='5' fill='%23${c}'/%3E%3Crect x='37' y='52' width='26' height='34' rx='2' fill='%23F5ECD9'/%3E%3C/svg%3E`;
+const PE_SAMPLE=[PE_IMG('E9DCC0','8B2331'),PE_IMG('D9E2EC','2D4A66'),PE_IMG('EAD9C2','7A4A1E')];
+let peEdit=null;
+
+function renderMGallery(){ const g=document.getElementById('mGallery'); if(!g)return;
+  g.innerHTML=peEdit.imgs.map((u,i)=>`<div class="pe-tile ${u?'has':''}" onclick="mTile(${i})">${u?`<img src="${u}" alt="">`:`<svg viewBox="0 0 24 24"><use href="#i-plus"/></svg><span>${PE_TILE[i]}</span>`}<div class="rm" onclick="event.stopPropagation();mRm(${i})"><svg width="11" height="11" viewBox="0 0 24 24" stroke-width="3"><use href="#i-close"/></svg></div>${u?`<span class="cap">${PE_TILE[i]}</span>`:''}</div>`).join('');
+}
+function mTile(i){ if(!peEdit.imgs[i]){ peEdit.imgs[i]=PE_SAMPLE[i]; renderMGallery(); } }
+function mRm(i){ peEdit.imgs[i]=''; renderMGallery(); }
+function pickIntroM(){ openSheet('选择介绍 / 卖点', INTRO_LIB.map((x,i)=>`<div class="m-opt" onclick="onPickIntro(${i})"><div style="min-width:0"><div style="font-weight:600;color:var(--heading)">${x.t}</div><div style="font-size:var(--fs-xs);color:var(--muted);line-height:1.5;margin-top:3px">${x.body}</div></div></div>`).join('')); }
+function onPickIntro(i){ const x=INTRO_LIB[i]; peEdit.introName=x.t; peEdit.introBody=x.body; openItem(peEdit.idx); }
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-login.html b/.superpowers/prototype/screens/m-login.html
new file mode 100644
index 0000000..b8fc221
--- /dev/null
+++ b/.superpowers/prototype/screens/m-login.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>登录 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased; min-height:100vh;}
+  .lg-wrap{max-width:430px; margin:0 auto; min-height:100vh; box-sizing:border-box; padding:64px 24px 32px; display:flex; flex-direction:column;}
+  .lg-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:34px;}
+  .lg-ico{width:78px; height:78px; border-radius:20px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2);}
+  .lg-ico svg{width:44px; height:44px;}
+  .lg-nm{font-size:var(--fs-display); font-weight:800; color:var(--heading); margin-top:16px; letter-spacing:1px;}
+  .lg-sub{font-size:var(--fs-sm); color:var(--muted); margin-top:6px;}
+  .lg-foot{margin-top:auto; text-align:center; font-size:var(--fs-sm); color:var(--muted); padding-top:24px;}
+  .lg-foot a{color:var(--primary); text-decoration:none; font-weight:600;}
+</style>
+</head>
+<body>
+<div class="lg-wrap">
+  <div class="lg-brand">
+    <div class="lg-ico"><svg viewBox="0 0 64 64"><g stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3.4" fill="#C97B86"/></svg></div>
+    <div class="lg-nm">岩美酒库</div>
+    <div class="lg-sub">酒水进销存管理系统</div>
+  </div>
+  <div class="m-form">
+    <div class="m-field"><label>手机号</label><input class="m-input" inputmode="tel" value="13800138000"></div>
+    <div class="m-field"><label>密码</label><input class="m-input" type="password" value="123456"></div>
+  </div>
+  <div class="btn primary" style="width:100%; justify-content:center; height:46px; margin-top:6px" onclick="mToast('登录中…');setTimeout(()=>location.href='m-inventory.html',700)">登录</div>
+  <div class="lg-foot">还没有门店账号？<a href="m-register.html">注册新门店</a></div>
+</div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-me.html b/.superpowers/prototype/screens/m-me.html
new file mode 100644
index 0000000..db9edc5
--- /dev/null
+++ b/.superpowers/prototype/screens/m-me.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>我的 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .me-hd{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px;}
+  .me-hd .av{width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--brand-mid),var(--brand-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; flex:none;}
+  .me-hd .nm{font-size:var(--fs-h2); font-weight:700; color:var(--heading);}
+  .me-hd .sub{font-size:var(--fs-sm); color:var(--muted); margin-top:3px;}
+  .me-hd .role{margin-left:auto;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-title="我的"></div>
+<div class="m-page has-tabs">
+  <div class="m-scroll">
+    <div class="me-hd">
+      <div class="av">王</div>
+      <div><div class="nm">王经理</div><div class="sub">鼎晟酒行 · 13800138000</div></div>
+      <span class="badge b-管理员 role">管理员</span>
+    </div>
+
+    <div class="m-section">经营管理</div>
+    <div class="m-hub">
+      <a href="m-partners.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></span>往来单位<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-products.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></span>基础数据<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-inventory-check.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg></span>库存盘点<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+    </div>
+
+    <div class="m-section">系统</div>
+    <div class="m-hub">
+      <a href="m-users.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></span>用户管理<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-devices.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg></span>设备管理<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-settings.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg></span>系统设置<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a onclick="openThemeSheet()"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-shirt"/></svg></span>主题外观<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-about.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg></span>关于我们<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+    </div>
+
+    <div style="margin-top:18px"><div class="btn ghost" style="width:100%; justify-content:center; color:var(--danger)" onclick="location.href='m-login.html'">退出登录</div></div>
+  </div>
+</div>
+<nav class="m-tabbar" data-m-tabs data-active="me"></nav>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-notification.html b/.superpowers/prototype/screens/m-notification.html
new file mode 100644
index 0000000..6942bad
--- /dev/null
+++ b/.superpowers/prototype/screens/m-notification.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>通知详情 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .nhero{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 16px;}
+  .nhero .nx{flex:1; min-width:0;}
+  .nhero h1{margin:0; font-size:var(--fs-h2); font-weight:700; color:var(--heading); line-height:1.4;}
+  .nhero .nmeta{font-size:var(--fs-sm); color:var(--muted); margin-top:6px;}
+  .nbody{font-size:var(--fs-body); color:var(--text); line-height:1.8; margin-top:14px;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="通知详情"></div>
+<div class="m-page" style="padding-bottom:24px">
+  <div class="m-scroll" id="scroll"></div>
+</div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script src="notify-data.js"></script>
+<script>
+function getId(){ const m=location.search.match(/id=(\d+)/); return m?+m[1]:1; }
+function render(){
+  const n=noteById(getId()); n.unread=false;
+  const meta=n.meta.map((m,i)=>`<div class="drow"${i===n.meta.length-1?' style="border-bottom:none"':''}><span>${m[0]}</span><b style="text-align:right">${m[1]}</b></div>`).join('');
+  document.getElementById('scroll').innerHTML=`
+    <div class="nhero">
+      <span class="nt-ic lg ${n.type}"><svg viewBox="0 0 24 24"><use href="#${n.icon}"/></svg></span>
+      <div class="nx"><h1>${n.title}</h1><div class="nmeta">${n.cat} · ${n.at}</div></div>
+    </div>
+    <div class="nbody">${n.body}</div>
+    <div class="m-section">关联信息</div>
+    <div class="pe-card"><div class="pe-b" style="padding-top:2px;padding-bottom:2px">${meta}</div></div>
+    <div style="display:flex;gap:10px;margin-top:18px">
+      <div class="btn ghost" style="flex:none;justify-content:center" onclick="mToast('已标为未读')"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg></div>
+      <a class="btn primary" style="flex:1;justify-content:center" href="${n.ref.href}"><svg viewBox="0 0 24 24"><use href="#${n.ref.icon}"/></svg>${n.ref.label}</a>
+    </div>`;
+}
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-notifications.html b/.superpowers/prototype/screens/m-notifications.html
new file mode 100644
index 0000000..b236ade
--- /dev/null
+++ b/.superpowers/prototype/screens/m-notifications.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>通知 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .nbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 12px;}
+  .nbar .nu{font-size:var(--fs-sm); color:var(--muted);}
+  .nt-filters{flex-wrap:wrap; overflow:visible;}
+  .nt-day{font-size:var(--fs-sm); color:var(--muted); font-weight:600; margin:16px 0 10px;}
+  .m-empty2{padding:50px 0; text-align:center; color:var(--muted); font-size:var(--fs-sm);}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="通知"></div>
+<div class="m-page">
+  <div class="m-scroll">
+    <div class="nbar"><span class="nu" id="nu"></span><div class="btn ghost sm" id="readAll" onclick="markAll()"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>全部已读</div></div>
+    <div class="m-filters nt-filters" id="pills"></div>
+    <div id="list"></div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script src="notify-data.js"></script>
+<script>
+const FILTERS=['全部','未读','审核待办','库存','单据','财务','系统'];
+let curFilter='全部';
+function unread(){ return NOTES.filter(n=>n.unread).length; }
+function pass(n){ if(curFilter==='全部')return true; if(curFilter==='未读')return n.unread; return n.cat===curFilter; }
+function render(){
+  const u=unread();
+  document.getElementById('nu').textContent = u? `共 ${NOTES.length} 条 · ${u} 条未读` : `共 ${NOTES.length} 条 · 全部已读`;
+  document.getElementById('readAll').classList.toggle('primary', u>0);
+  document.getElementById('pills').innerHTML=FILTERS.map(f=>`<div class="m-pill ${f===curFilter?'on':''}" onclick="setFilter('${f}')">${f}</div>`).join('');
+  const rows=NOTES.filter(pass);
+  const L=document.getElementById('list');
+  if(!rows.length){ L.innerHTML='<div class="m-empty2">没有匹配的通知</div>'; return; }
+  const days=['今天','昨天','更早']; let html='';
+  days.forEach(d=>{ const ds=rows.filter(n=>n.day===d); if(!ds.length)return; html+=`<div class="nt-day">${d}</div>`+ds.map(n=>ntRow(n)).join(''); });
+  L.innerHTML=html;
+}
+function ntRow(n){ return `<a class="nt-item ${n.unread?'unread':''}" onclick="openNote(${n.id})"><span class="nt-ic ${n.type}"><svg viewBox="0 0 24 24"><use href="#${n.icon}"/></svg></span><div class="nt-bd"><div class="nt-t">${n.unread?'<span class="nt-dot"></span>':''}<span class="nt-tt">${n.title}</span><span class="nt-time">${n.time}</span></div><div class="nt-d">${n.desc}</div></div></a>`; }
+function setFilter(f){ curFilter=f; render(); }
+function markAll(){ NOTES.forEach(n=>n.unread=false); render(); mToast('已全部标为已读 ✓'); }
+function openNote(id){ location.href='m-notification.html?id='+id; }
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-partners.html b/.superpowers/prototype/screens/m-partners.html
new file mode 100644
index 0000000..a2c182d
--- /dev/null
+++ b/.superpowers/prototype/screens/m-partners.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>往来单位 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="往来单位"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="m-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="名称 / 拼音 / 编码" oninput="state.q=this.value;render()"></div>
+    <div class="m-filters" id="pills"></div>
+    <div class="m-section" id="cnt">往来单位</div>
+    <div id="list"></div>
+  </div>
+</div>
+<div class="m-fab" onclick="mToast('新增往来单位（原型）')"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const PARTNERS=[
+  {name:'鼎晟供应链',code:'GYS001',type:'供应商',bal:'应付 ¥52,800',status:'启用'},
+  {name:'城东烟酒行',code:'KH002',type:'客户',bal:'应收 ¥86,200',status:'启用'},
+  {name:'贵州茅台经销',code:'GYS003',type:'供应商',bal:'已结清',status:'启用'},
+  {name:'金樽会所',code:'KH004',type:'客户',bal:'应收 ¥41,000',status:'启用'},
+  {name:'喜宴婚庆',code:'KH005',type:'客户',bal:'已结清',status:'停用'},
+  {name:'川酒集团批发',code:'GYS006',type:'两者',bal:'已结清',status:'启用'},
+];
+const F=['全部','供应商','客户','两者'];
+const state={q:'',type:'全部'};
+function filtered(){ return PARTNERS.filter(p=>{ if(state.type!=='全部'&&p.type!==state.type)return false; if(state.q){const q=state.q.toLowerCase(); if(!p.name.toLowerCase().includes(q)&&!p.code.toLowerCase().includes(q))return false;} return true; }); }
+function render(){
+  document.getElementById('pills').innerHTML=F.map(f=>`<div class="m-pill ${f===state.type?'on':''}" onclick="state.type='${f}';render()">${f}</div>`).join('');
+  const rows=filtered();
+  document.getElementById('cnt').textContent=`往来单位 · 共 ${rows.length}`;
+  document.getElementById('list').innerHTML=rows.length?rows.map(p=>`<div class="m-card" onclick="openP('${p.code}')"><div class="m-row">
+    <div class="mc-main"><div class="mc-nm">${p.name}</div><div class="mc-sub">${p.code} · ${p.bal}</div></div>
+    <div class="mc-right"><span class="badge b-${p.type}">${p.type}</span><span class="badge b-${p.status}">${p.status}</span></div>
+    <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+  </div></div>`).join(''):`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>没有匹配的往来单位</div>`;
+}
+function openP(code){ const p=PARTNERS.find(x=>x.code===code);
+  openSheet(p.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${p.code}</b></div><div class="drow"><span>类型</span><b><span class="badge b-${p.type}">${p.type}</span></b></div><div class="drow"><span>往来余额</span><b>${p.bal}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${p.status}">${p.status}</span></b></div>
+  <div style="display:flex;gap:10px;margin-top:16px"><div class="btn ghost" style="flex:1;justify-content:center" onclick="mToast('对账（原型）')">对账</div><div class="btn primary" style="flex:1;justify-content:center" onclick="mToast('编辑（原型）');closeSheet()">编辑</div></div>`);
+}
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-products.html b/.superpowers/prototype/screens/m-products.html
new file mode 100644
index 0000000..d6f4cab
--- /dev/null
+++ b/.superpowers/prototype/screens/m-products.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>基础数据 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .intro-sum{font-size:var(--fs-sm); color:var(--muted); line-height:1.6; margin-top:6px;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="基础数据"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="seg" style="width:100%; font-size:var(--fs-sm)"><button data-t="arch" class="on" style="flex:1" onclick="setTab('arch')">档案</button><button data-t="intro" style="flex:1" onclick="setTab('intro')">介绍</button><button data-t="series" style="flex:1" onclick="setTab('series')">系列</button><button data-t="spec" style="flex:1" onclick="setTab('spec')">规格</button><button data-t="cat" style="flex:1" onclick="setTab('cat')">香型</button></div>
+    <div id="archView">
+      <div class="m-search" style="margin-top:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="商品名 / 拼音 / 编码" oninput="state.q=this.value;render()"></div>
+      <div class="m-section" id="cnt">商品档案</div>
+      <div id="list"></div>
+    </div>
+    <div id="introView" hidden>
+      <div class="m-section" id="icnt" style="margin-top:14px">商品介绍库</div>
+      <div id="ilist"></div>
+    </div>
+    <div id="configView" hidden>
+      <div class="m-section" id="ccnt" style="margin-top:14px">系列</div>
+      <div id="clist"></div>
+    </div>
+  </div>
+</div>
+<div class="m-fab" onclick="onAdd()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const PRODUCTS=[
+  {name:'茅台 飞天',code:'MT-FT-500',series:'飞天',spec:'500ml×6 · 53°',cat:'酱香',cost:'¥2,680',status:'在售'},
+  {name:'茅台 飞天',code:'MT-FT-100',series:'飞天',spec:'100ml×24 · 53°',cat:'酱香',cost:'¥620',status:'在售'},
+  {name:'五粮液 普五',code:'WLY-PW-500',series:'第八代',spec:'500ml×6 · 52°',cat:'浓香',cost:'¥1,050',status:'在售'},
+  {name:'国窖 1573',code:'GJ-1573-500',series:'经典装',spec:'500ml×6 · 52°',cat:'浓香',cost:'¥980',status:'在售'},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',series:'水晶剑',spec:'500ml×6 · 52°',cat:'浓香',cost:'¥438',status:'在售'},
+  {name:'洋河 梦之蓝',code:'YH-M6-500',series:'M6+',spec:'550ml×6 · 45°',cat:'绵柔',cost:'¥620',status:'在售'},
+  {name:'泸州老窖 特曲',code:'LZLJ-TQ-500',series:'第十代',spec:'500ml×6 · 52°',cat:'浓香',cost:'¥320',status:'在售'},
+  {name:'习酒 窖藏',code:'XJ-JC1988',series:'1988',spec:'500ml×6 · 53°',cat:'酱香',cost:'¥760',status:'在售'},
+  {name:'汾酒 青花',code:'FJ-QH20-500',series:'青花20',spec:'500ml×6 · 53°',cat:'清香',cost:'¥420',status:'在售'},
+  {name:'郎酒 红花郎',code:'LJ-HHL15',series:'红花郎15',spec:'500ml×6 · 53°',cat:'酱香',cost:'¥560',status:'在售'},
+  {name:'西凤酒 旗舰版',code:'XF-QJ-500',series:'旗舰',spec:'500ml×6 · 52°',cat:'凤香',cost:'¥280',status:'停用'},
+  {name:'古井贡 年份原浆',code:'GJG-NF-500',series:'古16',spec:'500ml×6 · 50°',cat:'浓香',cost:'¥390',status:'在售'},
+];
+const INTROS=[
+  {title:'酱香经典 · 宴请送礼',cat:'酱香',body:'酱香突出、醇厚协调，空杯留香持久，是商务宴请与节庆馈赠之选。'},
+  {title:'浓香绵柔 · 口粮优选',cat:'浓香',body:'入口绵甜、诸味协调、尾净味长，日常聚饮与口粮自饮皆宜。'},
+  {title:'高端收藏 · 限量原浆',cat:'通用',body:'精选原浆、限量出品，酒体丰满、陈香雅致，兼具品饮与收藏价值。'},
+  {title:'清香纯净 · 入门友好',cat:'清香',body:'清香纯正、入口净爽、回味甘冽，适合清淡口味与入门饮用。'},
+];
+const DICTS={
+  series:{label:'系列', items:[
+    {name:'飞天',note:'茅台主力系列'},{name:'第八代',note:'五粮液当前主力'},{name:'经典装',note:'国窖 1573 经典'},
+    {name:'水晶剑',note:'剑南春核心'},{name:'M6+',note:'梦之蓝高端'},{name:'青花20',note:'汾酒青花系列'},
+  ]},
+  spec:{label:'规格', items:[
+    {name:'500ml×6',note:'整箱 · 标准装'},{name:'100ml×24',note:'小瓶 · 品鉴装'},{name:'550ml×6',note:'整箱 · 加量装'},
+  ]},
+  cat:{label:'香型', items:[
+    {name:'酱香',note:'茅台 / 习酒 / 郎酒'},{name:'浓香',note:'五粮液 / 国窖 / 剑南春'},{name:'清香',note:'汾酒'},{name:'绵柔',note:'洋河'},{name:'凤香',note:'西凤'},
+  ]},
+};
+let tab='arch', curDict='series', dictEdit=-1; const state={q:''};
+function setTab(t){ tab=t; document.querySelectorAll('.seg button').forEach(b=>b.classList.toggle('on',b.dataset.t===t));
+  const isCfg=!!DICTS[t];
+  document.getElementById('archView').hidden=t!=='arch';
+  document.getElementById('introView').hidden=t!=='intro';
+  document.getElementById('configView').hidden=!isCfg;
+  if(t==='intro')renderIntro(); else if(isCfg){curDict=t;renderConfig();} else render(); }
+function render(){
+  const rows=PRODUCTS.filter(p=>{ if(state.q){const q=state.q.toLowerCase(); if(!p.name.toLowerCase().includes(q)&&!p.code.toLowerCase().includes(q))return false;} return true; });
+  document.getElementById('cnt').textContent=`商品档案 · 共 ${rows.length}`;
+  document.getElementById('list').innerHTML=rows.map(p=>`<div class="m-card" onclick="openP('${p.code}')"><div class="m-row">
+    <div class="mc-main"><div class="mc-nm">${p.name}</div><div class="mc-sub">${p.code} · ${p.spec}</div></div>
+    <div class="mc-right"><span class="badge b-${p.status}">${p.status}</span><span class="mc-amt">${p.cost}</span></div>
+    <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+  </div></div>`).join('');
+}
+function renderIntro(){
+  document.getElementById('icnt').textContent=`商品介绍库 · 共 ${INTROS.length}`;
+  document.getElementById('ilist').innerHTML=INTROS.map(x=>`<div class="m-card" onclick="mToast('编辑介绍（原型）')">
+    <div class="m-row"><div class="mc-main"><div class="mc-nm">${x.title}</div></div><div class="mc-right"><span class="badge b-在售">${x.cat}</span></div></div>
+    <div class="intro-sum">${x.body}</div></div>`).join('');
+}
+function openP(code){ const p=PRODUCTS.find(x=>x.code===code);
+  openSheet(p.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${p.code}</b></div><div class="drow"><span>系列</span><b>${p.series}</b></div><div class="drow"><span>规格</span><b>${p.spec}</b></div><div class="drow"><span>分类</span><b>${p.cat}</b></div><div class="drow"><span>默认成本价</span><b style="font-family:var(--font-mono)">${p.cost}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${p.status}">${p.status}</span></b></div>
+  <div style="display:flex;gap:10px;margin-top:16px"><div class="btn ghost" style="flex:1;justify-content:center" onclick="mToast('编辑公开页（原型）')">编辑公开页</div><div class="btn primary" style="flex:1;justify-content:center" onclick="mToast('编辑（原型）');closeSheet()">编辑</div></div>`);
+}
+function dictUsage(kind,name){ return PRODUCTS.filter(p=> kind==='series'?p.series===name : kind==='cat'?p.cat===name : p.spec.includes(name)).length; }
+function renderConfig(){ const d=DICTS[curDict]; document.getElementById('ccnt').textContent=`${d.label} · 共 ${d.items.length}`;
+  document.getElementById('clist').innerHTML=d.items.map((x,i)=>`<div class="m-card" onclick="openDictEdit('${curDict}',${i})"><div class="m-row">
+    <div class="mc-main"><div class="mc-nm">${x.name}</div><div class="mc-sub">${x.note||'—'}</div></div>
+    <div class="mc-right"><span class="mc-amt">${dictUsage(curDict,x.name)} 个</span></div>
+    <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+  </div></div>`).join('');
+}
+function openDictEdit(kind,i){ curDict=kind; dictEdit=(typeof i==='number')?i:-1; const d=DICTS[kind]; const x=dictEdit>=0?d.items[dictEdit]:{name:'',note:''};
+  openSheet((dictEdit>=0?'编辑':'新增')+d.label, `<div class="m-form">
+    <div class="m-field"><label>${d.label}名称 *</label><input class="m-input" id="dName" value="${x.name}" placeholder="请输入名称"></div>
+    <div class="m-field"><label>说明（选填）</label><input class="m-input" id="dNote" value="${x.note||''}" placeholder="备注说明，如适用品牌 / 用途"></div>
+  </div>
+  <div style="display:flex;gap:10px;margin-top:16px">${dictEdit>=0?'<div class="btn ghost" style="flex:1;justify-content:center" onclick="delDict()">删除</div>':''}<div class="btn primary" style="flex:1;justify-content:center" onclick="saveDict()">保存</div></div>`); }
+function saveDict(){ const n=document.getElementById('dName').value.trim(), note=document.getElementById('dNote').value.trim(); if(!n){mToast('请填写名称');return;} const d=DICTS[curDict]; if(dictEdit>=0)d.items[dictEdit]={name:n,note}; else d.items.unshift({name:n,note}); closeSheet(); renderConfig(); mToast(d.label+'已保存 ✓'); }
+function delDict(){ DICTS[curDict].items.splice(dictEdit,1); closeSheet(); renderConfig(); mToast('已删除'); }
+function onAdd(){ if(DICTS[tab])openDictEdit(tab); else mToast(tab==='intro'?'新增商品介绍（原型）':'新增商品（原型）'); }
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-register.html b/.superpowers/prototype/screens/m-register.html
new file mode 100644
index 0000000..53bff2f
--- /dev/null
+++ b/.superpowers/prototype/screens/m-register.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>注册新门店 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .rg-note{font-size:var(--fs-sm); color:var(--muted); line-height:1.7; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:13px 14px; margin-bottom:16px;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="注册新门店"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="rg-note">填写门店与管理员信息，提交后即可开通。授权兑换码可稍后在「系统设置」补充。</div>
+    <div class="m-form">
+      <div class="m-field"><label>门店名称 *</label><input class="m-input" placeholder="如：鼎晟酒行"></div>
+      <div class="m-field"><label>所在地区</label><div class="m-select" onclick="pickRegion()"><span class="ph" id="region">选择省 / 市 / 区…</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="m-field"><label>管理员姓名 *</label><input class="m-input" placeholder="如：王经理"></div>
+      <div class="m-field"><label>管理员手机 *</label><input class="m-input" inputmode="tel" placeholder="11 位手机号"></div>
+      <div class="m-field"><label>登录密码 *</label><input class="m-input" type="password" placeholder="至少 6 位"></div>
+      <div class="m-field"><label>授权兑换码（选填）</label><input class="m-input" placeholder="可稍后补充"></div>
+    </div>
+  </div>
+</div>
+<div class="m-actionbar">
+  <div class="btn ghost" style="flex:1; justify-content:center" onclick="history.back()">返回登录</div>
+  <div class="btn primary" style="flex:2; justify-content:center" onclick="mToast('门店已开通 ✓');setTimeout(()=>location.href='m-inventory.html',900)">开通门店</div>
+</div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+function pickRegion(){ openSheet('选择地区', ['北京市','上海市','广东省 · 深圳市','浙江省 · 杭州市','四川省 · 成都市'].map(r=>`<div class="m-opt" onclick="document.getElementById('region').textContent='${r}';document.getElementById('region').classList.remove('ph');closeSheet()">${r}</div>`).join('')); }
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-settings.html b/.superpowers/prototype/screens/m-settings.html
new file mode 100644
index 0000000..4d719a2
--- /dev/null
+++ b/.superpowers/prototype/screens/m-settings.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>系统设置 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="系统设置"></div>
+<div class="m-page">
+  <div class="m-scroll">
+    <div class="m-section">门店</div>
+    <div class="m-hub">
+      <a onclick="mToast('门店信息（原型）')"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></span>门店信息<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-users.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></span>用户与角色<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a onclick="mToast('授权兑换券（原型）')"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg></span>授权兑换券<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+    </div>
+    <div class="m-section">偏好</div>
+    <div class="m-hub">
+      <a onclick="openThemeSheet()"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-shirt"/></svg></span>主题外观<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a onclick="mToast('打印偏好（原型）')"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg></span>打印偏好<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-devices.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg></span>设备管理<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+    </div>
+    <div class="m-section">数据</div>
+    <div class="m-hub">
+      <a onclick="mToast('数据备份（原型）')"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-cloud"/></svg></span>数据备份<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a href="m-about.html"><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg></span>关于与版本<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-stock-in-list.html b/.superpowers/prototype/screens/m-stock-in-list.html
new file mode 100644
index 0000000..06e88cd
--- /dev/null
+++ b/.superpowers/prototype/screens/m-stock-in-list.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>入库管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-title="入库管理"></div>
+<div class="m-page has-tabs">
+  <div class="m-scroll">
+    <div class="m-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="搜索单号 / 供应商 / 酒名" oninput="state.q=this.value;render()"></div>
+    <div class="m-filters" id="pills"></div>
+    <div class="m-section" id="cnt">入库单</div>
+    <div id="list"></div>
+  </div>
+</div>
+<nav class="m-tabbar" data-m-tabs data-active="stock-in"></nav>
+<div class="m-fab" onclick="location.href='m-stock-in.html'"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const ORDERS=[
+  {no:'RK-20260620-009',party:'鼎晟调货',items:2,amount:'¥5,360',status:'已通过',date:'2026-06-20',by:'王经理',goods:'茅台 飞天 53°、五粮液 普五 52°',pending:1,lines:[{n:'茅台 飞天 53°',s:'500ml×6',q:1,a:'¥2,680'},{n:'五粮液 普五 52°',s:'500ml×6',q:1,a:'¥2,680'}]},
+  {no:'RK-20260620-006',party:'鼎晟供应链',items:3,amount:'¥12,800',status:'待审核',date:'2026-06-20',by:'王经理',goods:'茅台 王子酒、习酒 窖藏 1988',lines:[{n:'茅台 王子酒',s:'500ml×6',q:4,a:'¥4,800'},{n:'习酒 窖藏 1988',s:'500ml×6',q:2,a:'¥4,000'},{n:'茅台 迎宾酒',s:'500ml×6',q:4,a:'¥4,000'}]},
+  {no:'RK-20260620-005',party:'贵州茅台经销',items:2,amount:'¥80,400',status:'已通过',date:'2026-06-20',by:'王经理',goods:'茅台 飞天 53°、茅台 1935',lines:[{n:'茅台 飞天 53°',s:'500ml×6',q:20,a:'¥53,600'},{n:'茅台 1935',s:'500ml×6',q:10,a:'¥26,800'}]},
+  {no:'RK-20260619-004',party:'五粮液华东仓',items:2,amount:'¥33,600',status:'已通过',date:'2026-06-19',by:'李采购',goods:'五粮液 普五 52°、五粮液 1618',lines:[{n:'五粮液 普五 52°',s:'500ml×6',q:8,a:'¥16,800'},{n:'五粮液 1618',s:'500ml×6',q:8,a:'¥16,800'}]},
+  {no:'RK-20260619-003',party:'剑南春直营',items:1,amount:'¥4,380',status:'已驳回',date:'2026-06-19',by:'李采购',goods:'剑南春 水晶剑',lines:[{n:'剑南春 水晶剑',s:'500ml×6',q:10,a:'¥4,380'}]},
+  {no:'RK-20260618-002',party:'泸州老窖仓',items:2,amount:'¥16,000',status:'已通过',date:'2026-06-18',by:'王经理',goods:'泸州老窖 特曲、国窖 1573',lines:[{n:'泸州老窖 特曲',s:'500ml×6',q:25,a:'¥8,000'},{n:'国窖 1573',s:'500ml×6',q:8,a:'¥8,000'}]},
+  {no:'RK-20260618-001',party:'洋河股份',items:2,amount:'¥14,800',status:'草稿',date:'2026-06-18',by:'王经理',goods:'洋河 梦之蓝 M6、洋河 海之蓝',lines:[{n:'洋河 梦之蓝 M6',s:'500ml×6',q:12,a:'¥7,440'},{n:'洋河 海之蓝',s:'500ml×6',q:16,a:'¥7,360'}]},
+];
+const ST=['全部','草稿','待审核','已通过','已驳回'];
+const state={q:'',status:'全部'};
+
+function filtered(){ return ORDERS.filter(o=>{ if(state.status!=='全部'&&o.status!==state.status)return false; if(state.q){const q=state.q.toLowerCase(); if(!o.no.toLowerCase().includes(q)&&!o.party.toLowerCase().includes(q)&&!(o.goods||'').toLowerCase().includes(q))return false;} return true; }); }
+function render(){
+  document.getElementById('pills').innerHTML=ST.map(s=>`<div class="m-pill ${s===state.status?'on':''}" onclick="setSt('${s}')">${s}</div>`).join('');
+  const rows=filtered();
+  document.getElementById('cnt').textContent=`入库单 · 共 ${rows.length}`;
+  const L=document.getElementById('list');
+  if(!rows.length){ L.innerHTML=`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>没有匹配的入库单</div>`; return; }
+  L.innerHTML=rows.map(o=>`<a class="m-card" onclick="openOrder('${o.no}')">
+    <div class="m-row">
+      <div class="mc-main"><div class="mc-nm">${o.no}</div><div class="mc-sub">${o.party} · ${o.items} 项</div></div>
+      <div class="mc-right"><span class="badge b-${o.status}">${o.status}</span>${o.pending?'<span class="badge b-待定价">待定价</span>':''}<span class="mc-amt">${o.amount}</span></div>
+      <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+    </div>
+    <div class="mc-foot"><svg width="13" height="13" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-ic24"/></svg>${o.date} · 经手人 ${o.by}</div>
+  </a>`).join('');
+}
+function setSt(s){ state.status=s; render(); }
+function actions(st){
+  if(st==='草稿')   return '<div class="btn primary" style="flex:1;justify-content:center" onclick="mToast(\'已提交审核 ✓\');closeSheet()">提交审核</div>';
+  if(st==='待审核') return '<div class="btn danger" style="flex:1;justify-content:center" onclick="mToast(\'已驳回\');closeSheet()">驳回</div><div class="btn primary" style="flex:1;justify-content:center" onclick="mToast(\'已审核通过 ✓\');closeSheet()">通过</div>';
+  if(st==='已驳回') return '<div class="btn primary" style="flex:1;justify-content:center" onclick="mToast(\'已重新提交 ✓\');closeSheet()">重新提交</div>';
+  return '<div class="btn ghost" style="flex:1;justify-content:center" onclick="closeSheet()">关闭</div>';
+}
+function openOrder(no){ const o=ORDERS.find(x=>x.no===no);
+  const pendRow=o.pending?`<div class="drow"><span>成本</span><b><span class="badge b-待定价">含待定价</span></b></div>`:'';
+  const confirmBtn=(o.pending&&o.status==='已通过')?`<div class="btn primary" style="flex:1;justify-content:center" onclick="mToast('进价已确认，已补应付差额 ✓');closeSheet()"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg>确认进价</div>`:'';
+  const lns=o.lines||[];
+  const lineRows=lns.map((l,i)=>`<div class="drow"${i===lns.length-1?' style="border-bottom:none"':''}><span style="color:var(--text);line-height:1.45">${l.n}<br><span style="color:var(--faint);font-size:var(--fs-xs)">${l.s} · ×${l.q}</span></span><b style="font-family:var(--font-mono)">${l.a}</b></div>`).join('');
+  openSheet('入库单详情', `<div class="drow"><span>单号</span><b style="font-family:var(--font-mono)">${o.no}</b></div><div class="drow"><span>供应商</span><b>${o.party}</b></div><div class="drow"><span>单据日期</span><b>${o.date}</b></div><div class="drow"><span>经手人</span><b>${o.by}</b></div><div class="drow"><span>合计金额</span><b style="font-family:var(--font-mono)">${o.amount}</b></div>${pendRow}<div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${o.status}">${o.status}</span></b></div>
+  <div class="pe-card" style="margin-top:14px"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg></span>商品明细 · ${lns.length} 项</div><div class="pe-b" style="padding-top:2px;padding-bottom:2px">${lineRows}</div></div>
+  ${o.pending?'<div style="margin-top:12px;font-size:var(--fs-sm);line-height:1.6;color:var(--warn)">调货「先卖后定价」：进价待定，价格确定后点「确认进价」前向补齐成本与应付。</div>':''}
+  <div style="display:flex;gap:10px;margin-top:16px">${confirmBtn}${actions(o.status)}</div>`);
+}
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-stock-in.html b/.superpowers/prototype/screens/m-stock-in.html
new file mode 100644
index 0000000..0183a3f
--- /dev/null
+++ b/.superpowers/prototype/screens/m-stock-in.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>新增入库单 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .li-del{width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none;}
+  .li-del svg{width:18px; height:18px; stroke-width:1.9;}
+  .li-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-top:11px;}
+  .li-grid label{display:block; font-size:var(--fs-xs); color:var(--muted); margin-bottom:4px;}
+  .li-amt{display:flex; justify-content:space-between; align-items:center; margin-top:11px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:var(--fs-sm); color:var(--muted);}
+  .li-amt b{font-size:var(--fs-title); color:var(--heading); font-family:var(--font-mono);}
+  .li-pick{display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer;}
+  .li-pick .nm{font-weight:600; color:var(--heading);} .li-pick .ph{color:var(--faint);}
+  .li-pick .cd{font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); margin-top:2px;}
+  .li-pick svg{margin-left:auto; width:16px; height:16px; color:var(--muted);}
+  .addline{display:flex; align-items:center; justify-content:center; gap:6px; height:46px; border:1.5px dashed var(--border); border-radius:var(--r-lg); color:var(--primary); font-weight:600; font-size:var(--fs-body); cursor:pointer;}
+  .addline svg{width:18px; height:18px; stroke-width:2;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="新增入库单"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="m-form">
+      <div class="m-field"><label>供应商 *</label><div class="m-select" onclick="pickParty()"><span class="ph" id="party">选择或搜索往来单位…</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="m-field"><label>入库仓库</label><div class="m-select" onclick="mToast('仓库选择（原型）')"><span>主仓</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="m-field"><label>单据日期</label><input class="m-input" value="2026-06-20"></div>
+      <div class="m-field"><label>经手人</label><input class="m-input" value="王经理"></div>
+    </div>
+
+    <div class="m-section">入库明细</div>
+    <div id="lines"></div>
+    <div class="addline" onclick="addLine()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>添加商品</div>
+  </div>
+</div>
+<div class="m-actionbar">
+  <div style="flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.2"><span style="font-size:var(--fs-xs);color:var(--muted)">合计</span><b id="total" style="font-size:var(--fs-title);color:var(--heading);font-family:var(--font-mono)">¥0</b></div>
+  <div class="btn ghost" onclick="mToast('已存草稿（原型）')">存草稿</div>
+  <div class="btn primary" onclick="submitOrder()">提交审核</div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const NAMES=[
+  {name:'茅台 飞天 53°',code:'MT-FT-500',cost:2680,sale:3200},
+  {name:'五粮液 普五 52°',code:'WLY-PW-500',cost:1050,sale:1280},
+  {name:'国窖 1573',code:'GJ-1573-500',cost:980,sale:1180},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',cost:438,sale:560},
+  {name:'洋河 梦之蓝 M6',code:'YH-M6-500',cost:620,sale:780},
+];
+let lines=[];
+const money=n=>'¥'+(+n||0).toLocaleString();
+function newRow(){ return {name:'',code:'',qty:'1',price:'',sale:''}; }
+function addLine(){ lines.push(newRow()); renderLines(); }
+function rmLine(i){ lines.splice(i,1); renderLines(); }
+function setField(i,k,v){ lines[i][k]=v; recalc(); }
+function renderLines(){
+  document.getElementById('lines').innerHTML=lines.map((r,i)=>`<div class="m-card">
+    <div class="m-row">
+      <div class="li-pick" onclick="pickProduct(${i})">${r.name?`<div><div class="nm">${r.name}</div><div class="cd">${r.code}</div></div>`:`<span class="ph">选择商品…</span>`}<svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+      <div class="li-del" onclick="rmLine(${i})"><svg viewBox="0 0 24 24"><use href="#i-close"/></svg></div>
+    </div>
+    <div class="li-grid">
+      <div><label>数量</label><input class="m-input" inputmode="numeric" value="${r.qty}" oninput="setField(${i},'qty',this.value)"></div>
+      <div><label>单价（可待定）</label><input class="m-input" inputmode="decimal" value="${r.price}" placeholder="留空=待定价" oninput="setField(${i},'price',this.value)"></div>
+      <div><label>出售价</label><input class="m-input" inputmode="decimal" value="${r.sale}" placeholder="0.00" oninput="setField(${i},'sale',this.value)"></div>
+    </div>
+    <div class="li-amt"><span>金额（数量 × 单价）</span><b>${(+r.price||0)<=0?'<span class="pending-price">待定价</span>':money((+r.qty||0)*(+r.price||0))}</b></div>
+  </div>`).join('');
+  recalc();
+}
+function recalc(){ const t=lines.reduce((s,r)=>s+(+r.qty||0)*(+r.price||0),0); document.getElementById('total').textContent=money(t); }
+const PARTIES=['鼎晟供应链','贵州茅台经销','五粮液华东仓','剑南春直营','泸州老窖仓'];
+function pickParty(){ openSheet('选择供应商', `<div class="m-search" style="margin-bottom:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="partyQ" placeholder="名称 / 拼音 / 编码" oninput="renderParty(this.value)"></div><div id="partyList"></div>`); renderParty(''); }
+function renderParty(q){ const L=document.getElementById('partyList'); if(!L) return; const rows=PARTIES.filter(p=>p.toLowerCase().includes((q||'').trim().toLowerCase())); L.innerHTML = rows.length ? rows.map(p=>`<div class="m-opt" onclick="document.getElementById('party').textContent='${p}';document.getElementById('party').classList.remove('ph');closeSheet()">${p}</div>`).join('') : `<div class="m-empty" style="padding:24px 0">无匹配往来单位</div>`; }
+function pickProduct(i){ openSheet('选择商品', NAMES.map((n,k)=>`<div class="m-opt" onclick="onPick(${i},${k})"><div style="min-width:0"><div style="font-weight:600;color:var(--heading)">${n.name}</div><div style="font-size:var(--fs-xs);color:var(--muted);font-family:var(--font-mono)">${n.code} · 进价¥${n.cost} · 售价¥${n.sale}</div></div></div>`).join('')); }
+function onPick(i,k){ const n=NAMES[k]; lines[i].name=n.name; lines[i].code=n.code; lines[i].price=String(n.cost); lines[i].sale=String(n.sale); closeSheet(); renderLines(); }
+function submitOrder(){ if(!lines.length){ mToast('请先添加商品'); return; } if(document.getElementById('party').classList.contains('ph')){ mToast('请选择供应商'); return; } mToast('入库单已提交审核 ✓'); setTimeout(()=>location.href='m-stock-in-list.html',900); }
+addLine();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-stock-out-list.html b/.superpowers/prototype/screens/m-stock-out-list.html
new file mode 100644
index 0000000..6c0142a
--- /dev/null
+++ b/.superpowers/prototype/screens/m-stock-out-list.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>出库管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-title="出库管理"></div>
+<div class="m-page has-tabs">
+  <div class="m-scroll">
+    <div class="m-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="搜索单号 / 客户 / 酒名" oninput="state.q=this.value;render()"></div>
+    <div class="m-filters" id="pills"></div>
+    <div class="m-section" id="cnt">出库单</div>
+    <div id="list"></div>
+  </div>
+</div>
+<nav class="m-tabbar" data-m-tabs data-active="stock-out"></nav>
+<div class="m-fab" onclick="location.href='m-stock-out.html'"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const ORDERS=[
+  {no:'CK-20260620-008',party:'城东烟酒行',items:2,amount:'¥18,600',status:'待审核',date:'2026-06-20',by:'王经理',goods:'茅台 飞天 53°、五粮液 普五 52°',lines:[{n:'茅台 飞天 53°',s:'500ml×6',q:4,a:'¥12,600'},{n:'五粮液 普五 52°',s:'500ml×6',q:3,a:'¥6,000'}]},
+  {no:'CK-20260620-007',party:'宴汇大酒店',items:2,amount:'¥6,400',status:'已通过',date:'2026-06-20',by:'李销售',goods:'剑南春 水晶剑、洋河 海之蓝',lines:[{n:'剑南春 水晶剑',s:'500ml×6',q:4,a:'¥3,200'},{n:'洋河 海之蓝',s:'500ml×6',q:8,a:'¥3,200'}]},
+  {no:'CK-20260619-006',party:'金樽会所',items:2,amount:'¥41,000',status:'已通过',date:'2026-06-19',by:'王经理',goods:'茅台 飞天 53°、国窖 1573',lines:[{n:'茅台 飞天 53°',s:'500ml×6',q:10,a:'¥28,000'},{n:'国窖 1573',s:'500ml×6',q:13,a:'¥13,000'}]},
+  {no:'CK-20260619-005',party:'喜宴婚庆',items:2,amount:'¥9,900',status:'已驳回',date:'2026-06-19',by:'李销售',goods:'泸州老窖 特曲、汾酒 青花 20',lines:[{n:'泸州老窖 特曲',s:'500ml×6',q:10,a:'¥5,000'},{n:'汾酒 青花 20',s:'500ml×6',q:7,a:'¥4,900'}]},
+  {no:'CK-20260618-004',party:'城东烟酒行',items:2,amount:'¥12,500',status:'已通过',date:'2026-06-18',by:'王经理',goods:'西凤酒 旗舰版、郎酒 红花郎 15',lines:[{n:'西凤酒 旗舰版',s:'500ml×6',q:13,a:'¥6,500'},{n:'郎酒 红花郎 15',s:'500ml×6',q:10,a:'¥6,000'}]},
+];
+const ST=['全部','待审核','已通过','已驳回'];
+const state={q:'',status:'全部'};
+function filtered(){ return ORDERS.filter(o=>{ if(state.status!=='全部'&&o.status!==state.status)return false; if(state.q){const q=state.q.toLowerCase(); if(!o.no.toLowerCase().includes(q)&&!o.party.toLowerCase().includes(q)&&!(o.goods||'').toLowerCase().includes(q))return false;} return true; }); }
+function render(){
+  document.getElementById('pills').innerHTML=ST.map(s=>`<div class="m-pill ${s===state.status?'on':''}" onclick="setSt('${s}')">${s}</div>`).join('');
+  const rows=filtered();
+  document.getElementById('cnt').textContent=`出库单 · 共 ${rows.length}`;
+  const L=document.getElementById('list');
+  if(!rows.length){ L.innerHTML=`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>没有匹配的出库单</div>`; return; }
+  L.innerHTML=rows.map(o=>`<a class="m-card" onclick="openOrder('${o.no}')">
+    <div class="m-row">
+      <div class="mc-main"><div class="mc-nm">${o.no}</div><div class="mc-sub">${o.party} · ${o.items} 项</div></div>
+      <div class="mc-right"><span class="badge b-${o.status}">${o.status}</span><span class="mc-amt">${o.amount}</span></div>
+      <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+    </div>
+    <div class="mc-foot"><svg width="13" height="13" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-ic24"/></svg>${o.date} · 经手人 ${o.by}</div>
+  </a>`).join('');
+}
+function setSt(s){ state.status=s; render(); }
+function actions(st){
+  if(st==='待审核') return '<div class="btn danger" style="flex:1;justify-content:center" onclick="mToast(\'已驳回\');closeSheet()">驳回</div><div class="btn primary" style="flex:1;justify-content:center" onclick="mToast(\'已审核通过 ✓\');closeSheet()">通过</div>';
+  if(st==='已驳回') return '<div class="btn primary" style="flex:1;justify-content:center" onclick="mToast(\'已重新提交 ✓\');closeSheet()">重新提交</div>';
+  if(st==='已通过') return '<div class="btn ghost" style="flex:1;justify-content:center" onclick="mToast(\'已退单\');closeSheet()">退单</div>';
+  return '<div class="btn ghost" style="flex:1;justify-content:center" onclick="closeSheet()">关闭</div>';
+}
+function openOrder(no){ const o=ORDERS.find(x=>x.no===no);
+  const lns=o.lines||[];
+  const lineRows=lns.map((l,i)=>`<div class="drow"${i===lns.length-1?' style="border-bottom:none"':''}><span style="color:var(--text);line-height:1.45">${l.n}<br><span style="color:var(--faint);font-size:var(--fs-xs)">${l.s} · ×${l.q}</span></span><b style="font-family:var(--font-mono)">${l.a}</b></div>`).join('');
+  openSheet('出库单详情', `<div class="drow"><span>单号</span><b style="font-family:var(--font-mono)">${o.no}</b></div><div class="drow"><span>客户</span><b>${o.party}</b></div><div class="drow"><span>单据日期</span><b>${o.date}</b></div><div class="drow"><span>合计金额</span><b style="font-family:var(--font-mono)">${o.amount}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b><span class="badge b-${o.status}">${o.status}</span></b></div>
+  <div class="pe-card" style="margin-top:14px"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg></span>商品明细 · ${lns.length} 项</div><div class="pe-b" style="padding-top:2px;padding-bottom:2px">${lineRows}</div></div>
+  <div style="display:flex;gap:10px;margin-top:16px">${actions(o.status)}</div>`);
+}
+render();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-stock-out.html b/.superpowers/prototype/screens/m-stock-out.html
new file mode 100644
index 0000000..b6e6983
--- /dev/null
+++ b/.superpowers/prototype/screens/m-stock-out.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>新增出库单 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .li-del{width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none;}
+  .li-del svg{width:18px; height:18px; stroke-width:1.9;}
+  .li-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px;}
+  .li-grid label{display:block; font-size:var(--fs-xs); color:var(--muted); margin-bottom:4px;}
+  .li-amt{display:flex; justify-content:space-between; align-items:center; margin-top:11px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:var(--fs-sm); color:var(--muted);}
+  .li-amt b{font-size:var(--fs-title); color:var(--heading); font-family:var(--font-mono);}
+  .li-pick{display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer;}
+  .li-pick .nm{font-weight:600; color:var(--heading);} .li-pick .ph{color:var(--faint);}
+  .li-pick .cd{font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); margin-top:2px;}
+  .li-pick svg{margin-left:auto; width:16px; height:16px; color:var(--muted);}
+  .li-stk{font-size:var(--fs-xs); color:var(--muted); margin-top:8px;}
+  .li-stk b{color:var(--heading); font-family:var(--font-mono);}
+  .li-stk.low b{color:var(--danger);}
+  .addline{display:flex; align-items:center; justify-content:center; gap:6px; height:46px; border:1.5px dashed var(--border); border-radius:var(--r-lg); color:var(--primary); font-weight:600; font-size:var(--fs-body); cursor:pointer;}
+  .addline svg{width:18px; height:18px; stroke-width:2;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="新增出库单"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="m-form">
+      <div class="m-field"><label>客户 *</label><div class="m-select" onclick="pickParty()"><span class="ph" id="party">选择或搜索往来单位…</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="m-field"><label>出库仓库</label><div class="m-select" onclick="mToast('仓库选择（原型）')"><span>主仓</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="m-field"><label>单据日期</label><input class="m-input" value="2026-06-20"></div>
+      <div class="m-field"><label>经手人</label><input class="m-input" value="王经理"></div>
+    </div>
+    <div class="m-section">出库明细</div>
+    <div id="lines"></div>
+    <div class="addline" onclick="addLine()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>添加商品</div>
+  </div>
+</div>
+<div class="m-actionbar">
+  <div style="flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.2"><span style="font-size:var(--fs-xs);color:var(--muted)">合计</span><b id="total" style="font-size:var(--fs-title);color:var(--heading);font-family:var(--font-mono)">¥0</b></div>
+  <div class="btn ghost" onclick="mToast('已存草稿（原型）')">存草稿</div>
+  <div class="btn primary" onclick="submitOrder()">提交审核</div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const NAMES=[
+  {name:'茅台 飞天 53°',code:'MT-FT-500',sale:3200,stock:128},
+  {name:'五粮液 普五 52°',code:'WLY-PW-500',sale:1280,stock:64},
+  {name:'国窖 1573',code:'GJ-1573-500',sale:1180,stock:42},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',sale:560,stock:8},
+];
+let lines=[];
+const money=n=>'¥'+(+n||0).toLocaleString();
+function newRow(){ return {name:'',code:'',qty:'1',price:'',stock:null}; }
+function addLine(){ lines.push(newRow()); renderLines(); }
+function rmLine(i){ lines.splice(i,1); renderLines(); }
+function setField(i,k,v){ lines[i][k]=v; recalc(); }
+function renderLines(){
+  document.getElementById('lines').innerHTML=lines.map((r,i)=>{ const low=r.stock!=null&&(+r.qty||0)>r.stock; return `<div class="m-card">
+    <div class="m-row">
+      <div class="li-pick" onclick="pickProduct(${i})">${r.name?`<div><div class="nm">${r.name}</div><div class="cd">${r.code}</div></div>`:`<span class="ph">选择商品…</span>`}<svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+      <div class="li-del" onclick="rmLine(${i})"><svg viewBox="0 0 24 24"><use href="#i-close"/></svg></div>
+    </div>
+    <div class="li-grid">
+      <div><label>数量</label><input class="m-input" inputmode="numeric" value="${r.qty}" oninput="setField(${i},'qty',this.value)"></div>
+      <div><label>出库单价</label><input class="m-input" inputmode="decimal" value="${r.price}" placeholder="0.00" oninput="setField(${i},'price',this.value)"></div>
+    </div>
+    ${r.stock!=null?`<div class="li-stk ${low?'low':''}">可用库存 <b>${r.stock}</b> 件${low?' · 超出库存！':''}</div>`:''}
+    <div class="li-amt"><span>金额（数量 × 单价）</span><b>${money((+r.qty||0)*(+r.price||0))}</b></div>
+  </div>`; }).join('');
+  recalc();
+}
+function recalc(){ const t=lines.reduce((s,r)=>s+(+r.qty||0)*(+r.price||0),0); document.getElementById('total').textContent=money(t); }
+const PARTIES=['城东烟酒行','宴汇大酒店','金樽会所','喜宴婚庆','名酒荟'];
+function pickParty(){ openSheet('选择客户', `<div class="m-search" style="margin-bottom:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="partyQ" placeholder="名称 / 拼音 / 编码" oninput="renderParty(this.value)"></div><div id="partyList"></div>`); renderParty(''); }
+function renderParty(q){ const L=document.getElementById('partyList'); if(!L) return; const rows=PARTIES.filter(p=>p.toLowerCase().includes((q||'').trim().toLowerCase())); L.innerHTML = rows.length ? rows.map(p=>`<div class="m-opt" onclick="document.getElementById('party').textContent='${p}';document.getElementById('party').classList.remove('ph');closeSheet()">${p}</div>`).join('') : `<div class="m-empty" style="padding:24px 0">无匹配往来单位</div>`; }
+function pickProduct(i){ openSheet('选择商品', NAMES.map((n,k)=>`<div class="m-opt" onclick="onPick(${i},${k})"><div style="min-width:0"><div style="font-weight:600;color:var(--heading)">${n.name}</div><div style="font-size:var(--fs-xs);color:var(--muted);font-family:var(--font-mono)">${n.code} · 售价¥${n.sale} · 库存${n.stock}</div></div></div>`).join('')); }
+function onPick(i,k){ const n=NAMES[k]; lines[i].name=n.name; lines[i].code=n.code; lines[i].price=String(n.sale); lines[i].stock=n.stock; closeSheet(); renderLines(); }
+function submitOrder(){ if(!lines.length){ mToast('请先添加商品'); return; } if(document.getElementById('party').classList.contains('ph')){ mToast('请选择客户'); return; } if(lines.some(r=>r.stock!=null&&(+r.qty||0)>r.stock)){ mToast('有商品超出可用库存'); return; } mToast('出库单已提交审核 ✓'); setTimeout(()=>location.href='m-stock-out-list.html',900); }
+addLine();
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/m-users.html b/.superpowers/prototype/screens/m-users.html
new file mode 100644
index 0000000..22cfc72
--- /dev/null
+++ b/.superpowers/prototype/screens/m-users.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>用户管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .uav{width:40px; height:40px; border-radius:50%; background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-back data-title="用户管理"></div>
+<div class="m-page" style="padding-bottom:84px">
+  <div class="m-scroll">
+    <div class="m-section">成员 · 共 4</div>
+    <div id="list"></div>
+  </div>
+</div>
+<div class="m-fab" onclick="mToast('新增成员（原型）')"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+const USERS=[
+  {name:'王经理',phone:'138****8000',role:'管理员'},
+  {name:'李采购',phone:'139****2233',role:'普通'},
+  {name:'张销售',phone:'137****6677',role:'普通'},
+  {name:'赵会计',phone:'135****1199',role:'只读'},
+];
+document.getElementById('list').innerHTML=USERS.map(u=>`<div class="m-card" onclick="openU('${u.name}')"><div class="m-row">
+  <div class="uav">${u.name[0]}</div>
+  <div class="mc-main"><div class="mc-nm">${u.name}</div><div class="mc-sub">${u.phone}</div></div>
+  <div class="mc-right"><span class="badge b-${u.role}">${u.role}</span></div>
+</div></div>`).join('');
+function openU(n){ const u=USERS.find(x=>x.name===n);
+  openSheet(u.name, `<div class="drow"><span>手机号</span><b style="font-family:var(--font-mono)">${u.phone}</b></div><div class="drow" style="border-bottom:none"><span>角色</span><b><span class="badge b-${u.role}">${u.role}</span></b></div>
+  <div style="display:flex;gap:10px;margin-top:16px"><div class="btn ghost" style="flex:1;justify-content:center" onclick="mToast('重置密码（原型）')">重置密码</div><div class="btn primary" style="flex:1;justify-content:center" onclick="mToast('编辑（原型）');closeSheet()">编辑</div></div>`);
+}
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/mobile-kit.html b/.superpowers/prototype/screens/mobile-kit.html
new file mode 100644
index 0000000..b22c263
--- /dev/null
+++ b/.superpowers/prototype/screens/mobile-kit.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>移动 UI Kit · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<link rel="stylesheet" href="../mobile-atoms.css">
+<style>
+  body{margin:0; font-family:var(--font); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased;}
+  .kit-lab{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono); margin:18px 2px 8px; letter-spacing:.3px;}
+  .kit-lab:first-child{margin-top:4px;}
+  .btn-row{display:flex; gap:10px; flex-wrap:wrap;}
+</style>
+</head>
+<body>
+<div class="m-top" data-m-top data-title="移动 UI Kit"></div>
+<div class="m-page has-tabs">
+  <div class="m-scroll">
+
+    <div class="kit-lab">.m-kpi —— KPI 卡（2×2）</div>
+    <div class="m-kpi">
+      <div class="k"><div class="kl">SKU 总数</div><div class="kv">1,284</div><div class="kd up">▲ 2.3% 较上月</div></div>
+      <div class="k"><div class="kl">库存货值</div><div class="kv">¥264万</div><div class="kd up">▲ 1.5% 较上月</div></div>
+      <div class="k"><div class="kl">在库数量</div><div class="kv">18,920</div><div class="kd down">▼ 0.6% 较上月</div></div>
+      <div class="k"><div class="kl">缺货预警</div><div class="kv">17</div><div class="kd warn">需补货 6 项</div></div>
+    </div>
+
+    <div class="kit-lab">.m-search + .m-filters / .m-pill</div>
+    <div class="m-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="商品名 / 拼音 / 编码"></div>
+    <div class="m-filters">
+      <div class="m-pill on">全部</div><div class="m-pill">酱香</div><div class="m-pill">浓香</div><div class="m-pill">清香</div><div class="m-pill">缺货</div>
+    </div>
+
+    <div class="kit-lab">.m-card / .m-row —— 列表项卡片</div>
+    <a class="m-card">
+      <div class="m-row">
+        <div class="mc-main"><div class="mc-nm">茅台 飞天 53°</div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div>
+        <div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div>
+        <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+      </div>
+    </a>
+    <a class="m-card">
+      <div class="m-row">
+        <div class="mc-main"><div class="mc-nm">RK-20260620-003</div><div class="mc-sub">鼎晟供应链 · 6 项</div></div>
+        <div class="mc-right"><span class="badge b-待审核">待审核</span><span class="mc-amt">¥12,800</span></div>
+        <div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
+      </div>
+      <div class="mc-foot"><svg width="13" height="13" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-ic24"/></svg>2026-06-20 · 经手人 王经理</div>
+    </a>
+
+    <div class="kit-lab">.m-field / .m-input / .m-select —— 表单</div>
+    <div class="m-form">
+      <div class="m-field"><label>商品名称</label><input class="m-input" placeholder="如：茅台 飞天"></div>
+      <div class="m-field"><label>分类（香型）</label><div class="m-select"><span>酱香</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="m-field"><label>备注</label><textarea class="m-input" placeholder="选填…"></textarea></div>
+    </div>
+
+    <div class="kit-lab">.btn —— 按钮（复用桌面原子）</div>
+    <div class="btn-row">
+      <div class="btn primary">主操作</div>
+      <div class="btn ghost">次操作</div>
+      <div class="btn danger">危险</div>
+    </div>
+
+    <div class="kit-lab">.seg —— 分段切换（复用）</div>
+    <div class="seg" style="width:100%"><button class="on" style="flex:1">入库</button><button style="flex:1">出库</button></div>
+
+    <div class="kit-lab">.m-sheet —— 底部 sheet（点按钮弹出）</div>
+    <div class="btn ghost" onclick="demoSheet()">打开筛选 sheet</div>
+
+    <div class="kit-lab">.m-hub —— 我的：功能入口</div>
+    <div class="m-hub">
+      <a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></span>往来单位<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></span>基础数据<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+      <a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg></span>系统设置<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
+    </div>
+
+    <div class="kit-lab">.m-section / .m-empty</div>
+    <div class="m-section">今日待办</div>
+    <div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>暂无数据 · 下拉刷新或调整筛选</div>
+
+  </div>
+</div>
+<nav class="m-tabbar" data-m-tabs data-active="me"></nav>
+<div class="m-fab" onclick="mToast('新增（原型）')"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
+<div class="toast" id="toast"></div>
+
+<script src="icons.js"></script>
+<script src="mobile-shell.js"></script>
+<script>
+  function demoSheet(){ openSheet('筛选 · 香型', ['全部','酱香','浓香','清香','绵柔','凤香'].map((v,i)=>`<div class="m-opt ${i===0?'sel':''}" onclick="closeSheet()">${v}<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>`).join('')); }
+</script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/mobile-shell.js b/.superpowers/prototype/screens/mobile-shell.js
new file mode 100644
index 0000000..4c103a8
--- /dev/null
+++ b/.superpowers/prototype/screens/mobile-shell.js
@@ -0,0 +1,92 @@
+// ============================================================
+// 移动壳 单一真源 —— 顶部 app 栏 + 底部 tab 栏 + 主题 + 底部 sheet + toast
+// 用法：<div class="m-top" data-m-top data-title="库存" [data-back]></div>
+//        <div class="m-page has-tabs"> …内容… </div>
+//        <nav class="m-tabbar" data-m-tabs data-active="inventory"></nav>
+//        末尾 <script src="mobile-shell.js"></script>
+// 改顶栏/底 tab/主题 = 只改此文件。
+// ============================================================
+(function () {
+  const TABS = [
+    { k: 'inventory', label: '库存', href: 'm-inventory.html', icon: 'i-box-2' },
+    { k: 'stock-in', label: '入库', href: 'm-stock-in-list.html', icon: 'i-download' },
+    { k: 'stock-out', label: '出库', href: 'm-stock-out-list.html', icon: 'i-upload' },
+    { k: 'finance', label: '财务', href: 'm-finance.html', icon: 'i-ic08' },
+    { k: 'me', label: '我的', href: 'm-me.html', icon: 'i-ic37' },
+  ];
+  const THEMES = { a: '经典蓝', b: '琥珀', c: '酒窖' };
+
+  function icon(id, cls) { return `<svg ${cls ? `class="${cls}" ` : ''}viewBox="0 0 24 24"><use href="#${id}"/></svg>`; }
+
+  function setTheme(t) { document.documentElement.dataset.theme = t; localStorage.setItem('jiu-theme', t); }
+
+  // ---- 底部 sheet ----
+  let sheetEl = null, maskEl = null;
+  function closeSheet() { if (sheetEl) sheetEl.classList.remove('show'); if (maskEl) maskEl.classList.remove('show'); }
+  function openSheet(title, bodyHTML) {
+    if (!maskEl) {
+      maskEl = document.createElement('div'); maskEl.className = 'm-sheet-mask'; maskEl.onclick = closeSheet; document.body.appendChild(maskEl);
+      sheetEl = document.createElement('div'); sheetEl.className = 'm-sheet'; document.body.appendChild(sheetEl);
+    }
+    sheetEl.innerHTML = `<div class="grip"></div><div class="m-sheet-h"><h3>${title}</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeSheet()"><use href="#i-close"/></svg></div><div class="m-sheet-b">${bodyHTML}</div>`;
+    requestAnimationFrame(() => { maskEl.classList.add('show'); sheetEl.classList.add('show'); });
+  }
+
+  // ---- toast ----
+  let toastT;
+  function mToast(m) {
+    let t = document.getElementById('toast');
+    if (!t) { t = document.createElement('div'); t.id = 'toast'; t.className = 'toast'; document.body.appendChild(t); }
+    t.textContent = m; t.classList.add('show'); clearTimeout(toastT); toastT = setTimeout(() => t.classList.remove('show'), 2200);
+  }
+
+  function openThemeSheet() {
+    const cur = document.documentElement.dataset.theme || 'a';
+    openSheet('切换主题', Object.entries(THEMES).map(([k, v]) =>
+      `<div class="m-opt ${k === cur ? 'sel' : ''}" onclick="setTheme('${k}');closeSheet()">${k.toUpperCase()} · ${v}<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><path d="M5 12l5 5 9-9"/></svg></div>`).join(''));
+  }
+
+  function mountTop() {
+    const top = document.querySelector('[data-m-top]');
+    if (!top) return;
+    const back = top.dataset.back !== undefined;
+    const title = top.dataset.title || '';
+    top.innerHTML =
+      (back ? `<div class="m-back" onclick="history.back()">${icon('i-chevron-left')}</div>` : '') +
+      `<div class="m-title">${title}</div>` +
+      `<div class="m-actions">` +
+      `<div class="m-ic" onclick="openThemeSheet()" title="主题">${icon('i-shirt')}</div>` +
+      `<div class="m-ic" onclick="location.href='m-notifications.html'" title="通知">${icon('i-bell')}<span class="m-dot">3</span></div>` +
+      `<div class="m-av" onclick="location.href='m-me.html'">王</div>` +
+      `</div>`;
+  }
+
+  function mountTabs() {
+    const bar = document.querySelector('[data-m-tabs]');
+    if (!bar) return;
+    const active = bar.dataset.active || '';
+    bar.innerHTML = TABS.map(t => `<a class="m-tab ${t.k === active ? 'on' : ''}" href="${t.href}">${icon(t.icon)}<span>${t.label}</span></a>`).join('');
+  }
+
+  function mountDsFab() {
+    if (document.getElementById('mDsFab')) return;
+    const a = document.createElement('a');
+    a.id = 'mDsFab'; a.className = 'm-ds-fab'; a.href = '../index.html'; a.title = '返回设计系统'; a.setAttribute('aria-label', '返回设计系统');
+    a.innerHTML = icon('i-arrow-left');
+    document.body.appendChild(a);
+  }
+
+  function mount() { setTheme(localStorage.getItem('jiu-theme') || 'a'); mountTop(); mountTabs(); mountDsFab(); }
+
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSheet(); });
+
+  window.setTheme = setTheme;
+  window.openSheet = openSheet;
+  window.closeSheet = closeSheet;
+  window.openThemeSheet = openThemeSheet;
+  window.mToast = mToast;
+  window.toast = window.toast || mToast;
+
+  if (document.readyState !== 'loading') mount();
+  else document.addEventListener('DOMContentLoaded', mount);
+})();
diff --git a/.superpowers/prototype/screens/notification.html b/.superpowers/prototype/screens/notification.html
new file mode 100644
index 0000000..5999efc
--- /dev/null
+++ b/.superpowers/prototype/screens/notification.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>通知详情 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  .col{max-width:720px; margin:0 auto;}
+  .back{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--muted); cursor:pointer; margin-bottom:14px;}
+  .back:hover{color:var(--primary);}
+  .back svg{width:15px; height:15px; stroke-width:2;}
+  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; margin-bottom:18px;}
+  .nhero{display:flex; gap:16px; align-items:flex-start;}
+  .nhero .nx{flex:1; min-width:0;}
+  .nhero h1{margin:0; font-size:var(--fs-h2); font-weight:700; color:var(--heading); line-height:1.4;}
+  .nhero .nmeta{font-size:var(--fs-sm); color:var(--muted); margin-top:6px;}
+  .nbody{font-size:var(--fs-body); color:var(--text); line-height:1.8; margin-top:18px; padding-top:18px; border-top:1px solid var(--border-subtle);}
+  .card-h{font-size:var(--fs-title); font-weight:700; color:var(--heading); margin:0 0 12px; display:flex; align-items:center; gap:8px;}
+  .card-h svg{width:17px; height:17px; stroke-width:1.8; color:var(--primary);}
+  .nacts{display:flex; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border-subtle); flex-wrap:wrap;}
+  .nacts .sp{margin-left:auto;}
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active=""></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="col" id="col"></div>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script src="notify-data.js"></script>
+<script>
+const CAT_LABEL={warn:'审核待办',danger:'库存',info:'单据 / 财务',ok:'系统'};
+function getId(){ const m=location.search.match(/id=(\d+)/); return m?+m[1]:1; }
+function render(){
+  const n=noteById(getId()); n.unread=false;
+  const meta=n.meta.map((m,i)=>`<div class="drow"${i===n.meta.length-1?' style="border-bottom:none"':''}><span>${m[0]}</span><b>${m[1]}</b></div>`).join('');
+  const others=NOTES.filter(x=>x.id!==n.id).slice(0,4).map(x=>`<a class="nt-item ${x.unread?'unread':''}" href="notification.html?id=${x.id}"><span class="nt-ic ${x.type}"><svg viewBox="0 0 24 24"><use href="#${x.icon}"/></svg></span><div class="nt-bd"><div class="nt-t">${x.unread?'<span class="nt-dot"></span>':''}<span class="nt-tt">${x.title}</span><span class="nt-time">${x.time}</span></div><div class="nt-d">${x.desc}</div></div></a>`).join('');
+  document.getElementById('col').innerHTML=`
+    <div class="back" onclick="location.href='notifications.html'"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg>返回通知列表</div>
+    <div class="card">
+      <div class="nhero">
+        <span class="nt-ic lg ${n.type}"><svg viewBox="0 0 24 24"><use href="#${n.icon}"/></svg></span>
+        <div class="nx"><h1>${n.title}</h1><div class="nmeta">${n.cat} · ${n.at}</div></div>
+      </div>
+      <div class="nbody">${n.body}</div>
+      <div class="nacts">
+        <a class="btn primary" href="${n.ref.href}"><svg viewBox="0 0 24 24"><use href="#${n.ref.icon}"/></svg>${n.ref.label}</a>
+        <div class="sp"></div>
+        <div class="btn ghost" onclick="toast('已标为未读')"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg>标为未读</div>
+        <div class="btn ghost" onclick="location.href='notifications.html'"><svg viewBox="0 0 24 24"><use href="#i-close"/></svg>删除</div>
+      </div>
+    </div>
+    <div class="card">
+      <h3 class="card-h"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg>关联信息</h3>
+      <div>${meta}</div>
+    </div>
+    <div class="card">
+      <h3 class="card-h"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg>其他通知</h3>
+      ${others}
+    </div>`;
+}
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/notifications.html b/.superpowers/prototype/screens/notifications.html
new file mode 100644
index 0000000..ccb07cb
--- /dev/null
+++ b/.superpowers/prototype/screens/notifications.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>通知中心 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  .col{max-width:760px; margin:0 auto;}
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
+  .nt-day{font-size:var(--fs-sm); color:var(--muted); font-weight:600; margin:20px 0 10px;}
+  .nt-day:first-child{margin-top:0;}
+  .empty{padding:60px 0; text-align:center; color:var(--muted); font-size:var(--fs-sm);}
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active=""></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="col">
+        <div class="head">
+          <h1>通知中心</h1><span class="sub" id="sub"></span>
+          <div class="actions">
+            <div class="btn ghost" onclick="render()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>刷新</div>
+            <div class="btn ghost" id="readAllBtn" onclick="markAll()"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>全部已读</div>
+          </div>
+        </div>
+        <div class="filters" id="filters"></div>
+        <div id="list"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script src="notify-data.js"></script>
+<script>
+const FILTERS=['全部','未读','审核待办','库存','单据','财务','系统'];
+let curFilter='全部';
+function unread(){ return NOTES.filter(n=>n.unread).length; }
+function pass(n){ if(curFilter==='全部')return true; if(curFilter==='未读')return n.unread; return n.cat===curFilter; }
+function render(){
+  const u=unread();
+  document.getElementById('sub').textContent = u? `${u} 条未读 · 共 ${NOTES.length} 条` : `全部已读 · 共 ${NOTES.length} 条`;
+  document.getElementById('readAllBtn').classList.toggle('primary', u>0);
+  document.getElementById('filters').innerHTML=FILTERS.map(f=>{ const c=f==='未读'?unread():(f==='全部'?NOTES.length:NOTES.filter(n=>n.cat===f).length); return `<div class="chip ${f===curFilter?'on':''}" onclick="setFilter('${f}')">${f}${c?` <span class="cv">${c}</span>`:''}</div>`; }).join('');
+  const rows=NOTES.filter(pass);
+  const L=document.getElementById('list');
+  if(!rows.length){ L.innerHTML='<div class="empty">没有匹配的通知</div>'; return; }
+  const days=['今天','昨天','更早']; let html='';
+  days.forEach(d=>{ const ds=rows.filter(n=>n.day===d); if(!ds.length)return; html+=`<div class="nt-day">${d}</div>`+ds.map(n=>ntRow(n)).join(''); });
+  L.innerHTML=html;
+}
+function ntRow(n){ return `<a class="nt-item ${n.unread?'unread':''}" onclick="openNote(${n.id})"><span class="nt-ic ${n.type}"><svg viewBox="0 0 24 24"><use href="#${n.icon}"/></svg></span><div class="nt-bd"><div class="nt-t">${n.unread?'<span class="nt-dot"></span>':''}<span class="nt-tt">${n.title}</span><span class="nt-time">${n.time}</span></div><div class="nt-d">${n.desc}</div></div></a>`; }
+function setFilter(f){ curFilter=f; render(); }
+function markAll(){ NOTES.forEach(n=>n.unread=false); render(); toast('已全部标为已读 ✓'); }
+function openNote(id){ location.href='notification.html?id='+id; }
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/notify-data.js b/.superpowers/prototype/screens/notify-data.js
new file mode 100644
index 0000000..e6ee860
--- /dev/null
+++ b/.superpowers/prototype/screens/notify-data.js
@@ -0,0 +1,46 @@
+// 通知中心数据（单一来源）—— 通知列表页 / 详情页（桌面 + 移动）共用
+// type 决定 .nt-ic 配色：warn(待办) / danger(库存) / info(单据·财务) / ok(系统)
+// 引入：<script src="notify-data.js"></script> 后即可读全局 NOTES。
+const NOTES = [
+  { id:1, type:'warn', cat:'审核待办', icon:'i-ic42', day:'今天', time:'10 分钟前', at:'2026-06-22 14:20', unread:true,
+    title:'入库单 RK-20260620-001 待审核', desc:'茅台华东总代 · 3 项 · ¥48,360',
+    body:'王经理 于 14:20 提交了入库单 RK-20260620-001，含 3 个商品、合计 ¥48,360，正在等待审核。请尽快进入入库管理完成审核，避免影响后续库存与对账。',
+    ref:{ label:'查看入库单', href:'stock-in-list.html', icon:'i-download' },
+    meta:[['单号','RK-20260620-001'],['供应商','茅台华东总代'],['商品数','3 项'],['合计金额','¥48,360'],['提交人','王经理']] },
+  { id:2, type:'danger', cat:'库存', icon:'i-ic18', day:'今天', time:'1 小时前', at:'2026-06-22 13:05', unread:true,
+    title:'五粮液 普五 库存预警', desc:'当前 6 件，低于安全库存 6',
+    body:'商品「五粮液 普五 52°」当前库存 6 件，已达到安全库存阈值（6 件）。建议尽快补货，以免缺货影响出库发货。',
+    ref:{ label:'去补货 · 新增入库', href:'stock-in.html', icon:'i-plus' },
+    meta:[['商品','五粮液 普五 52°'],['编码','WLY-PW-500'],['当前库存','6 件'],['安全库存','6 件'],['建议补货','≥ 24 件']] },
+  { id:3, type:'info', cat:'单据', icon:'i-ic06', day:'今天', time:'今天 09:20', at:'2026-06-22 09:20', unread:true,
+    title:'出库单 CK-20260619-003 已通过', desc:'张主管 审核通过',
+    body:'出库单 CK-20260619-003 已由 张主管 审核通过，库存已实时扣减，可进行后续发货与对账。',
+    ref:{ label:'查看出库单', href:'stock-out-list.html', icon:'i-upload' },
+    meta:[['单号','CK-20260619-003'],['客户','城东烟酒行'],['商品数','2 项'],['合计金额','¥18,600'],['审核人','张主管']] },
+  { id:4, type:'danger', cat:'库存', icon:'i-ic18', day:'今天', time:'今天 08:10', at:'2026-06-22 08:10', unread:true,
+    title:'汾酒 青花 20 已缺货', desc:'当前 0 件，请及时补货',
+    body:'商品「汾酒 青花 20」当前库存为 0，已处于缺货状态，相关出库将被拦截。请尽快补货以恢复销售。',
+    ref:{ label:'去补货 · 新增入库', href:'stock-in.html', icon:'i-plus' },
+    meta:[['商品','汾酒 青花 20'],['编码','FJ-QH20-500'],['当前库存','0 件'],['安全库存','8 件']] },
+  { id:5, type:'info', cat:'财务', icon:'i-ic47', day:'昨天', time:'昨天 17:40', at:'2026-06-21 17:40', unread:false,
+    title:'城东烟酒行 账单已结清', desc:'¥18,600 已收讫',
+    body:'往来单位「城东烟酒行」本期应收 ¥18,600 已全部结清，账单状态更新为已结清。',
+    ref:{ label:'查看对账单', href:'partners.html', icon:'i-ic56' },
+    meta:[['往来单位','城东烟酒行'],['结清金额','¥18,600'],['账单状态','已结清'],['经办人','李销售']] },
+  { id:6, type:'warn', cat:'审核待办', icon:'i-ic42', day:'昨天', time:'昨天 11:05', at:'2026-06-21 11:05', unread:false,
+    title:'盘点单 PD-20260618-002 存在差异', desc:'盘盈 2 · 盘亏 5，待复核',
+    body:'盘点单 PD-20260618-002 已完成实盘，存在盘盈 2 件、盘亏 5 件的差异，请复核并确认库存调整。',
+    ref:{ label:'查看盘点单', href:'inventory-check.html', icon:'i-ic61' },
+    meta:[['盘点单','PD-20260618-002'],['盘盈','2 件'],['盘亏','5 件'],['仓库','主仓']] },
+  { id:7, type:'ok', cat:'系统', icon:'i-refresh', day:'更早', time:'2 天前', at:'2026-06-20 10:00', unread:false,
+    title:'系统已更新至 v1.0.72', desc:'退单按钮等体验优化',
+    body:'岩美酒库已更新至 v1.0.72，本次带来用户四级角色、商品公开页编辑器、统一壳层等改进。查看更新日志了解全部内容。',
+    ref:{ label:'查看更新日志', href:'about.html', icon:'i-ic24' },
+    meta:[['当前版本','v1.0.72'],['发布日期','2026-06-22']] },
+  { id:8, type:'ok', cat:'系统', icon:'i-shield', day:'更早', time:'3 天前', at:'2026-06-19 09:00', unread:false,
+    title:'授权兑换券剩余 30 天', desc:'到期前可在系统设置续期',
+    body:'当前门店授权将在 30 天后到期。为避免影响使用，请在到期前于「系统设置 · 授权」中完成续期。',
+    ref:{ label:'去续期', href:'settings.html', icon:'i-shield' },
+    meta:[['授权状态','已授权'],['到期日','2027-03-15'],['剩余天数','30 天']] },
+];
+function noteById(id){ return NOTES.find(n=>n.id===+id) || NOTES[0]; }
diff --git a/.superpowers/prototype/screens/notify.js b/.superpowers/prototype/screens/notify.js
new file mode 100644
index 0000000..742ad75
--- /dev/null
+++ b/.superpowers/prototype/screens/notify.js
@@ -0,0 +1,58 @@
+// 顶栏通知（小喇叭）—— 共用通知机制（单一真源，所有 app-shell 屏复用）
+// 用法：顶栏放 <div class="icon-btn" data-notify><svg 小喇叭/><span class="nbadge"></span></div>
+//   本脚本接管点击 → 弹出 .notify-pop 通知面板；未读数写进 .nbadge；「全部已读」清零。
+(function(){
+  const NOTES = [
+    { ic:'warn', t:'入库单 RK-20260620-001 待审核', d:'茅台华东总代 · 3 项 · ¥48,360', time:'10 分钟前', unread:true },
+    { ic:'warn', t:'五粮液 普五 库存预警', d:'当前 6 件，低于安全库存 6', time:'1 小时前', unread:true },
+    { ic:'info', t:'出库单 CK-20260619-003 已通过', d:'李销售 审核通过', time:'今天 09:20', unread:true },
+    { ic:'ok',   t:'授权兑换券剩余 30 天', d:'到期前可在「系统设置」续期', time:'昨天', unread:false },
+  ];
+  const ICONS = {
+    warn:'<use href="#i-ic18"/>',
+    info:'<use href="#i-ic06"/>',
+    ok:'<use href="#i-check"/>',
+  };
+  let pop, trigger;
+
+  function unread(){ return NOTES.filter(n => n.unread).length; }
+  function paintBadge(){
+    if(!trigger) return;
+    let b = trigger.querySelector('.nbadge');
+    const n = unread();
+    if(n > 0){ if(!b){ b = document.createElement('span'); b.className='nbadge'; trigger.appendChild(b); } b.textContent = n; }
+    else if(b){ b.remove(); }
+  }
+  function render(){
+    const list = NOTES.length ? NOTES.map((n,i) =>
+      `<div class="np-item ${n.unread?'unread':''}" data-i="${i}"><div class="np-ic ${n.ic}"><svg viewBox="0 0 24 24">${ICONS[n.ic]}</svg></div><div class="np-tx"><div class="np-t">${n.t}</div><div class="np-d">${n.d}</div></div><div class="np-time">${n.time}</div></div>`
+    ).join('') : '<div class="np-empty">暂无通知</div>';
+    pop.innerHTML = `<div class="np-head"><h4>通知</h4><span class="np-clear">全部已读</span></div><div class="np-list">${list}</div><div class="np-foot">查看全部</div>`;
+    pop.querySelector('.np-clear').onclick = (e) => { e.stopPropagation(); NOTES.forEach(n => n.unread = false); paintBadge(); render(); };
+    pop.querySelector('.np-foot').onclick = () => { close(); location.href = 'notifications.html'; };
+    pop.querySelectorAll('.np-item').forEach(el => el.onclick = () => { const n = NOTES[+el.dataset.i]; if(n.unread){ n.unread = false; paintBadge(); } el.classList.remove('unread'); });
+  }
+  function position(){
+    const r = trigger.getBoundingClientRect();
+    const w = pop.offsetWidth || 330;
+    pop.style.left = Math.max(8, Math.min(r.right - w, window.innerWidth - w - 8)) + 'px';
+    pop.style.top = (r.bottom + 8) + 'px';
+  }
+  function open(){ render(); pop.classList.add('show'); position(); }
+  function close(){ if(pop) pop.classList.remove('show'); }
+  function toggle(e){ e.stopPropagation(); if(pop.classList.contains('show')) close(); else open(); }
+
+  function init(){
+    trigger = document.querySelector('[data-notify]');
+    if(!trigger) return;
+    trigger.style.position = 'relative';
+    pop = document.createElement('div'); pop.className = 'notify-pop'; document.body.appendChild(pop);
+    paintBadge();
+    trigger.addEventListener('click', toggle);
+    document.addEventListener('mousedown', e => { if(pop.classList.contains('show') && !pop.contains(e.target) && !trigger.contains(e.target)) close(); });
+    document.addEventListener('keydown', e => { if(e.key === 'Escape') close(); });
+    window.addEventListener('resize', close);
+  }
+  if(document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})();
diff --git a/.superpowers/prototype/screens/partners.html b/.superpowers/prototype/screens/partners.html
new file mode 100644
index 0000000..0d150e1
--- /dev/null
+++ b/.superpowers/prototype/screens/partners.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>往来单位 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; transition:background-color .28s,border-color .28s;}
+  .toolbar .searchbox{width:260px;}
+  .toolbar .sp{margin-left:auto;}
+  /* 往来单位类型徽章（accent / brand 软色） */
+  .b-供应商{background:var(--info-soft); color:var(--primary);}
+  .b-客户{background:var(--accent-soft); color:var(--accent);}
+  .b-两者{background:var(--warn-bg); color:var(--warn);}
+  .dsec{font-size:var(--fs-xs); color:var(--muted); font-weight:600; letter-spacing:.4px; margin:18px 0 4px;}
+  .dlist{margin-top:4px;}
+  .dli{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-sm);}
+  .dli .dl-l{color:var(--text);} .dli .dl-l small{display:block; color:var(--faint); font-size:var(--fs-xs); margin-top:2px; font-family:var(--font-mono);}
+  .dli .dl-r{font-family:var(--font-mono); font-weight:600; color:var(--heading);}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="partners"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>往来单位</h1><span class="sub" id="sub">供应商与客户档案</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="render()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>刷新</div>
+          <div class="btn primary" onclick="openAdd()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增往来单位</div>
+        </div>
+      </div>
+      <div class="toolbar">
+        <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="名称 / 拼音" oninput="state.q=this.value; render()"></div>
+        <div class="chip" data-t="全部" onclick="setType('全部')">全部</div>
+        <div class="chip" data-t="供应商" onclick="setType('供应商')">供应商</div>
+        <div class="chip" data-t="客户" onclick="setType('客户')">客户</div>
+        <div class="sp"></div>
+        <div class="btn ghost sm" onclick="clearFilters()">重置</div>
+      </div>
+      <div class="table flush-top"><table>
+        <thead><tr><th>名称</th><th>类型</th><th>联系人</th><th>电话</th><th class="num">应收</th><th class="num">应付</th><th class="act">操作</th></tr></thead>
+        <tbody id="tbody"></tbody>
+      </table></div>
+      <div class="pager"><span id="pagerInfo"></span></div>
+    </div>
+  </div>
+</div>
+
+<!-- 新增往来单位 -->
+<div class="overlay" id="ovAdd"><div class="modal">
+  <div class="modal-head"><h3>新增往来单位</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovAdd')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="frow">
+      <div class="field"><label>名称 *</label><div class="ctrl input-like"><input placeholder="如：茅台华东总代"></div></div>
+      <div class="field"><label>类型 *</label><div class="ctrl" onclick="pickType(event)"><span id="addType">供应商</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>联系人</label><div class="ctrl input-like"><input placeholder="姓名"></div></div>
+      <div class="field"><label>电话</label><div class="ctrl input-like"><input placeholder="手机 / 座机"></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>地址</label><div class="ctrl input-like"><input placeholder="省 / 市 / 详细地址"></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>期初余额</label><div class="ctrl input-like"><input type="number" placeholder="0.00"></div></div>
+      <div class="field"></div>
+    </div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovAdd')">取消</div><div class="btn primary" onclick="closeOverlay('ovAdd'); toast('往来单位已保存（原型）✓')">保存</div></div>
+</div></div>
+
+<div class="drawer" id="drawer"><div class="drawer-head"><h3 id="dTitle">往来单位</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeDrawer()"><use href="#i-close"/></svg></div><div class="drawer-body" id="drawerBody"></div></div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const PARTNERS=[
+  {name:'茅台华东总代',type:'供应商',contact:'张伟',phone:'138-0011-2233',addr:'上海市青浦区华新镇酒类商城A12',recv:'¥0',pay:'¥486,200',docs:[{t:'入库单 RK-20260618-007',d:'飞天53° ×20件',a:'¥536,000'},{t:'付款单 FK-20260612-003',d:'结清 5 月货款',a:'-¥320,000'}]},
+  {name:'老李酒水批发',type:'两者',contact:'李建国',phone:'139-2200-7788',addr:'江苏省南京市江宁区秣陵街道',recv:'¥38,400',pay:'¥152,600',docs:[{t:'出库单 CK-20260619-014',d:'普五52° ×6件',a:'¥9,480'},{t:'入库单 RK-20260610-021',d:'水晶剑 ×30件',a:'¥78,900'}]},
+  {name:'鼎丰超市',type:'客户',contact:'王芳',phone:'137-6655-4321',addr:'浙江省杭州市拱墅区大关路88号',recv:'¥126,800',pay:'¥0',docs:[{t:'出库单 CK-20260620-002',d:'国窖1573 ×12件',a:'¥23,520'},{t:'收款单 SK-20260615-009',d:'收回部分货款',a:'-¥60,000'}]},
+  {name:'五粮液川南运营中心',type:'供应商',contact:'刘德海',phone:'135-8899-0011',addr:'四川省宜宾市翠屏区岷江路',recv:'¥0',pay:'¥298,500',docs:[{t:'入库单 RK-20260617-011',d:'普五52° ×50件',a:'¥315,000'}]},
+  {name:'金樽酒楼',type:'客户',contact:'陈静',phone:'136-2211-9900',addr:'江苏省苏州市姑苏区观前街',recv:'¥54,200',pay:'¥0',docs:[{t:'出库单 CK-20260618-008',d:'剑南春 ×8件',a:'¥4,200'},{t:'出库单 CK-20260605-031',d:'梦之蓝M6 ×10件',a:'¥7,400'}]},
+  {name:'恒昌名酒行',type:'两者',contact:'赵明',phone:'138-7766-5544',addr:'安徽省合肥市蜀山区长江西路',recv:'¥72,900',pay:'¥41,000',docs:[{t:'入库单 RK-20260614-005',d:'年份原浆 ×40件',a:'¥15,600'},{t:'出库单 CK-20260616-019',d:'飞天53° ×3件',a:'¥9,800'}]},
+  {name:'汾酒山西直营',type:'供应商',contact:'孙立',phone:'134-5566-7788',addr:'山西省吕梁市汾阳市杏花村',recv:'¥0',pay:'¥88,400',docs:[{t:'入库单 RK-20260611-016',d:'青花20 ×60件',a:'¥25,200'}]},
+  {name:'喜宴婚庆服务',type:'客户',contact:'周丽',phone:'139-3344-5566',addr:'江苏省无锡市梁溪区中山路',recv:'¥19,600',pay:'¥0',docs:[{t:'出库单 CK-20260619-022',d:'红花郎15 ×6件',a:'¥3,600'}]},
+  {name:'郎酒华东仓储',type:'供应商',contact:'吴强',phone:'137-9900-1122',addr:'江苏省南京市六合区雄州街道',recv:'¥0',pay:'¥134,700',docs:[{t:'入库单 RK-20260613-009',d:'红花郎15 ×80件',a:'¥44,800'}]},
+  {name:'万家乐连锁便利',type:'客户',contact:'郑涛',phone:'135-1122-3344',addr:'浙江省宁波市海曙区中山东路',recv:'¥93,500',pay:'¥0',docs:[{t:'出库单 CK-20260620-006',d:'西凤旗舰 ×20件',a:'¥5,600'},{t:'收款单 SK-20260610-012',d:'账期结算',a:'-¥40,000'}]},
+];
+const TYPES=['供应商','客户','两者'];
+const state={q:'',type:'全部'};
+
+
+function setType(t){ state.type=t; render(); }
+function clearFilters(){ state.q='';state.type='全部'; document.getElementById('searchInput').value=''; render(); }
+function matchType(it){ if(state.type==='全部')return true; if(state.type==='供应商')return it.type==='供应商'||it.type==='两者'; if(state.type==='客户')return it.type==='客户'||it.type==='两者'; return true; }
+function filtered(){ return PARTNERS.filter(it=>{ if(!matchType(it))return false; if(state.q){const q=state.q.toLowerCase(); if(!it.name.toLowerCase().includes(q)&&!(it.contact||'').toLowerCase().includes(q))return false;} return true; }); }
+function render(){
+  document.querySelectorAll('.chip[data-t]').forEach(c=>c.classList.toggle('on',c.dataset.t===state.type));
+  const rows=filtered(); const tb=document.getElementById('tbody');
+  if(rows.length===0){ tb.innerHTML=`<tr><td colspan="7"><div class="empty">没有匹配的往来单位 · 试试调整筛选或搜索</div></td></tr>`; }
+  else { tb.innerHTML=rows.map(it=>{ const idx=PARTNERS.indexOf(it); return `<tr class="click" onclick="openDetail(${idx})">
+    <td><div class="pname">${it.name}</div><div class="pcode">${it.addr.slice(0,12)}…</div></td>
+    <td><span class="badge b-${it.type}">${it.type}</span></td>
+    <td>${it.contact}</td>
+    <td style="font-family:var(--font-mono)">${it.phone}</td>
+    <td class="num">${it.recv}</td>
+    <td class="num">${it.pay}</td>
+    <td class="act"><div class="row-act" onclick="event.stopPropagation()">
+      <svg viewBox="0 0 24 24" onclick="openDetail(${idx})"><use href="#i-eye"/></svg>
+      <svg viewBox="0 0 24 24" onclick="toast('编辑 · '+'${it.name}')"><use href="#i-edit"/></svg>
+    </div></td></tr>`; }).join(''); }
+  document.getElementById('pagerInfo').textContent=`共 ${rows.length} 个往来单位`;
+  document.getElementById('sub').textContent=`供应商与客户档案 · 共 ${PARTNERS.length} 个`;
+}
+
+function openDetail(idx){ const it=PARTNERS[idx]; document.getElementById('dTitle').textContent=it.name;
+  const docs=it.docs.map(d=>`<div class="dli"><div class="dl-l">${d.t}<small>${d.d}</small></div><div class="dl-r">${d.a}</div></div>`).join('');
+  document.getElementById('drawerBody').innerHTML=`
+    <div class="dsec">联系信息</div>
+    <div class="drow"><span>类型</span><b><span class="badge b-${it.type}">${it.type}</span></b></div>
+    <div class="drow"><span>联系人</span><b>${it.contact}</b></div>
+    <div class="drow"><span>电话</span><b style="font-family:var(--font-mono)">${it.phone}</b></div>
+    <div class="drow"><span>地址</span><b style="text-align:right;max-width:200px">${it.addr}</b></div>
+    <div class="dsec">应收 / 应付</div>
+    <div class="drow"><span>应收账款</span><b style="font-family:var(--font-mono);color:var(--success)">${it.recv}</b></div>
+    <div class="drow"><span>应付账款</span><b style="font-family:var(--font-mono);color:var(--accent)">${it.pay}</b></div>
+    <div class="dsec">近期单据</div>
+    <div class="dlist">${docs}</div>
+    <div style="display:flex;gap:10px;margin-top:18px"><div class="btn ghost sm" onclick="toast('对账单（原型）')">对账单</div><div class="btn ghost sm" onclick="closeDrawer();toast('编辑 · '+'${it.name}')">编辑</div></div>`;
+  document.getElementById('drawer').classList.add('show'); }
+function closeDrawer(){ document.getElementById('drawer').classList.remove('show'); }
+
+function openAdd(){ document.getElementById('addType').textContent='供应商'; document.getElementById('ovAdd').classList.add('show'); }
+function pickType(e){ openMenu(e.currentTarget.querySelector('span')?e.currentTarget:e.currentTarget, TYPES.map(v=>({v,label:v,sel:document.getElementById('addType').textContent===v})), v=>{ document.getElementById('addType').textContent=v; closeMenus(); }); }
+function closeOverlay(id){ document.getElementById(id).classList.remove('show'); }
+
+
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closeDrawer();document.querySelectorAll('.overlay.show').forEach(o=>o.classList.remove('show'));} });
+
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/pricing.html b/.superpowers/prototype/screens/pricing.html
new file mode 100644
index 0000000..9503be7
--- /dev/null
+++ b/.superpowers/prototype/screens/pricing.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>购买授权 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== App-shell ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:6px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+
+  /* 当前授权条 */
+  .lic-bar{display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 20px; margin:18px 0 24px; transition:background-color .28s,border-color .28s;}
+  .lic-bar .ico{width:42px; height:42px; border-radius:var(--r-md); background:var(--ok-soft); color:var(--success); display:flex; align-items:center; justify-content:center; flex:none;}
+  .lic-bar .ico svg{width:23px; height:23px; stroke-width:1.7;}
+  .lic-bar .stat{flex:none;}
+  .lic-bar .stat .t{font-size:var(--fs-xs); color:var(--muted); margin-bottom:4px;}
+  .lic-bar .stat .v{font-size:18px; font-weight:700; color:var(--heading); font-family:var(--font-mono);}
+  .lic-bar .stat .v.warn{color:var(--warn);}
+  .lic-bar .grow{flex:1;}
+  .lic-bar .redeem-link{font-size:var(--fs-sm); color:var(--primary); text-decoration:none; font-weight:600; cursor:pointer;}
+
+  /* 周期切换 */
+  .seg{display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; margin-bottom:20px;}
+  .seg button{border:none; background:transparent; padding:7px 16px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer; font-family:var(--font); transition:.15s;}
+  .seg button.on{background:var(--surface); color:var(--heading); box-shadow:var(--sh-1);}
+  .seg .save{font-size:var(--fs-xs); color:var(--success); margin-left:4px;}
+
+  /* 套餐卡 */
+  .plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
+  .plan{position:relative; border:1.5px solid var(--border); border-radius:var(--r-xl); padding:22px 20px; background:var(--surface); cursor:pointer; transition:.16s; display:flex; flex-direction:column;}
+  .plan:hover{border-color:var(--brand400); transform:translateY(-2px);}
+  .plan.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+  .plan.best{border-color:var(--primary);}
+  .plan .flag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--on-primary); font-size:var(--fs-xs); font-weight:700; padding:3px 12px; border-radius:var(--r-pill); white-space:nowrap;}
+  .plan .nm{font-size:var(--fs-h2); font-weight:700; color:var(--heading);}
+  .plan .dur{font-size:var(--fs-sm); color:var(--muted); margin:3px 0 16px;}
+  .plan .price{display:flex; align-items:baseline; gap:2px;}
+  .plan .price .cur{font-size:18px; color:var(--heading); font-weight:600;}
+  .plan .price .amt{font-size:34px; font-weight:800; color:var(--heading); font-family:var(--font-mono); letter-spacing:-1px;}
+  .plan .per{font-size:var(--fs-sm); color:var(--muted); margin-top:4px;}
+  .plan .orig{font-size:var(--fs-xs); color:var(--faint); text-decoration:line-through; margin-top:2px; min-height:16px;}
+  .plan ul{list-style:none; margin:16px 0 18px; padding:0; display:flex; flex-direction:column; gap:9px;}
+  .plan li{display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-sm); color:var(--text);}
+  .plan li svg{width:15px; height:15px; stroke:var(--success); stroke-width:2.4; flex:none; margin-top:2px;}
+  .plan .pick{margin-top:auto; text-align:center; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:var(--fs-body); border:1px solid var(--primary); color:var(--primary); transition:.15s;}
+  .plan.on .pick,.plan.best .pick{background:var(--primary); color:var(--on-primary);}
+
+  .note{font-size:var(--fs-sm); color:var(--muted); display:flex; align-items:center; gap:8px; padding:14px 16px; background:var(--bg); border:1px solid var(--border-subtle); border-radius:var(--r-md); max-width:760px;}
+  .note svg{width:17px; height:17px; stroke:var(--muted); stroke-width:1.8; flex:none;}
+
+  @media (max-width:1080px){ .plans{grid-template-columns:1fr 1fr;} }
+  @media (max-width:600px){ .plans{grid-template-columns:1fr;} }
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active=""></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head"><h1>购买授权</h1><span class="sub">按时长购买兑换券，续期门店授权 · 无订阅、不自动扣费</span></div>
+
+      <div class="lic-bar">
+        <div class="ico"><svg viewBox="0 0 24 24"><use href="#i-ic23"/></svg></div>
+        <div class="stat"><div class="t">当前授权</div><div class="v">标准版 · 生效中</div></div>
+        <div class="stat"><div class="t">到期日</div><div class="v">2026-09-16</div></div>
+        <div class="stat"><div class="t">剩余天数</div><div class="v warn">剩余 87 天</div></div>
+        <div class="grow"></div>
+        <a class="redeem-link" href="settings.html">已有兑换券？去激活 →</a>
+      </div>
+
+      <div class="seg" id="seg">
+        <button data-c="time" class="on" onclick="switchCat('time')">按时长</button>
+        <button data-c="tier" onclick="switchCat('tier')">按版本档位</button>
+      </div>
+
+      <div class="plans" id="plans"></div>
+
+      <div class="note">
+        <svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg>
+        购买后系统生成「时长兑换券」短码，在「系统设置 · 授权兑换券」输入即可叠加续期，到期日顺延。支付通道暂未接入，下单后由顾问对接开票与收款。
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+  /* 套餐数据：两类目 */
+  const DATA={
+    time:[
+      {key:'m1', nm:'1 个月', dur:'30 天授权', amt:99, per:'¥3.3 / 天', orig:'', best:false, feats:['全部功能不限','成员席位不限','多端同步']},
+      {key:'m3', nm:'1 季度', dur:'90 天授权', amt:268, per:'¥2.98 / 天', orig:'原价 ¥297', best:false, feats:['全部功能不限','成员席位不限','多端同步']},
+      {key:'m12', nm:'1 年', dur:'365 天授权', amt:888, per:'¥2.43 / 天', orig:'原价 ¥1188', best:true, feats:['全部功能不限','成员席位不限','优先技术支持']},
+      {key:'m36', nm:'3 年', dur:'1095 天授权', amt:2280, per:'¥2.08 / 天', orig:'原价 ¥3564', best:false, feats:['全部功能不限','成员席位不限','专属客户成功']},
+    ],
+    tier:[
+      {key:'std', nm:'标准版', dur:'当前版本', amt:888, per:'/ 年', orig:'', best:true, feats:['入库出库 · 审核流','库存 · 盘点 · 流水','往来对账 · 财务','多端 + 多用户']},
+      {key:'pro', nm:'专业版', dur:'进阶档位', amt:1680, per:'/ 年', orig:'', best:false, feats:['标准版全部能力','多仓库 · 调拨','数据导出 · 报表','开放 API（规划中）']},
+    ],
+  };
+  let cat='time', selected=null;
+
+  function switchCat(c){ cat=c; selected=null; document.querySelectorAll('#seg button').forEach(b=>b.classList.toggle('on',b.dataset.c===c)); renderPlans(); }
+  function renderPlans(){
+    const list=DATA[cat];
+    document.getElementById('plans').innerHTML=list.map(p=>`
+      <div class="plan ${p.best?'best':''} ${selected===p.key?'on':''}" data-k="${p.key}" onclick="pickPlan('${p.key}')">
+        ${p.best?'<div class="flag">最受欢迎</div>':''}
+        <div class="nm">${p.nm}</div>
+        <div class="dur">${p.dur}</div>
+        <div class="price"><span class="cur">¥</span><span class="amt">${p.amt}</span></div>
+        <div class="per">${p.per}</div>
+        <div class="orig">${p.orig}</div>
+        <ul>${p.feats.map(f=>`<li><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>${f}</li>`).join('')}</ul>
+        <div class="pick">${selected===p.key?'已选择 ✓':'选择'}</div>
+      </div>`).join('');
+  }
+  function pickPlan(k){
+    const p=DATA[cat].find(x=>x.key===k);
+    selected=k; renderPlans();
+    const params=new URLSearchParams({cat,key:k,nm:p.nm,dur:p.dur,amt:p.amt});
+    setTimeout(()=>location.href='checkout.html?'+params.toString(),180);
+  }
+
+  /* Toast / Menu / 主题 */
+
+  document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeMenus(); });
+  renderPlans();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/product-detail.html b/.superpowers/prototype/screens/product-detail.html
new file mode 100644
index 0000000..30f391a
--- /dev/null
+++ b/.superpowers/prototype/screens/product-detail.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>商品详情 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ===== app shell（与 inventory.html 一致）===== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+  /* ===== 商品详情 ===== */
+  .crumb{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--fs-sm); text-decoration:none; margin-bottom:10px;}
+  .crumb:hover{color:var(--primary);}
+  .head{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title);}
+  .head .pcode-h{font-size:var(--fs-sm); color:var(--faint); font-family:var(--font-mono);}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+
+  .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px;}
+
+  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; transition:background-color .28s,border-color .28s;}
+  .card-h{display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-subtle);}
+  .card-h h3{margin:0; font-size:var(--fs-title); color:var(--heading);}
+  .card-h .hint{margin-left:auto; font-size:var(--fs-xs); color:var(--faint);}
+  .card-b{padding:16px;}
+
+  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
+  @media(max-width:760px){ .grid2{grid-template-columns:1fr;} .kpis{grid-template-columns:1fr;} }
+
+  .info{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 24px;}
+  .info .row{display:flex; flex-direction:column; gap:4px;}
+  .info .row .k{font-size:var(--fs-sm); color:var(--muted);}
+  .info .row .v{font-size:var(--fs-body); color:var(--heading); font-weight:600;}
+  .info .row .v.mono{font-family:var(--font-mono);}
+
+  .price-list{display:flex; flex-direction:column;}
+  .price-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body);}
+  .price-row:last-child{border-bottom:none;}
+  .price-row .pd{color:var(--muted); font-size:var(--fs-sm); font-family:var(--font-mono); width:92px; flex:none;}
+  .price-row .pv{font-family:var(--font-mono); font-weight:700; color:var(--heading);}
+  .price-row .pt{color:var(--muted); font-size:var(--fs-sm); margin-left:auto;}
+  .price-row .pv.up{color:var(--success);} .price-row .pv.down{color:var(--danger);}
+
+  .b-入库{background:var(--success-bg); color:var(--success);}
+  .b-出库{background:var(--danger-bg); color:var(--danger);}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="products"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <a class="crumb" href="products.html"><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-left"/></svg>基础数据</a>
+      <div class="head">
+        <h1>茅台 飞天 53°</h1>
+        <span class="pcode-h">MT-FT-500</span>
+        <span class="badge b-在售">在售</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="toast('编辑商品（原型）')"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg>编辑</div>
+          <div class="btn ghost" onclick="toast('入库 · 茅台 飞天 53°（原型）')"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg>入库</div>
+          <div class="btn primary" onclick="toast('出库 · 茅台 飞天 53°（原型）')"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg>出库</div>
+        </div>
+      </div>
+
+      <div class="kpis">
+        <div class="kpi"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">当前库存</div><div class="v">128 <span style="font-size:var(--fs-body);color:var(--muted)">件</span></div><div class="d up">▲ 12 件 较上周</div></div>
+        <div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg></div><div class="t">库存货值</div><div class="v">¥34.3万</div><div class="d up">▲ 1.4% 较上月</div></div>
+        <div class="kpi"><div class="ic ic-blue"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg></div><div class="t">近 30 天出库</div><div class="v">86 <span style="font-size:var(--fs-body);color:var(--muted)">件</span></div><div class="d down">▼ 4.5% 较上月</div></div>
+      </div>
+
+      <div class="grid2">
+        <div class="card">
+          <div class="card-h"><h3>基本信息</h3></div>
+          <div class="card-b"><div class="info">
+            <div class="row"><span class="k">系列</span><span class="v">飞天</span></div>
+            <div class="row"><span class="k">规格</span><span class="v mono">53° 500ml×6</span></div>
+            <div class="row"><span class="k">分类</span><span class="v">酱香</span></div>
+            <div class="row"><span class="k">单位</span><span class="v">件 (6 瓶/件)</span></div>
+            <div class="row"><span class="k">默认成本价</span><span class="v mono">¥2,680 / 件</span></div>
+            <div class="row"><span class="k">条码</span><span class="v mono">6901234567890</span></div>
+          </div></div>
+        </div>
+
+        <div class="card">
+          <div class="card-h"><h3>价格历史</h3><span class="hint">成本价变更</span></div>
+          <div class="card-b"><div class="price-list" id="priceList"></div></div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-h"><h3>各仓库库存分布</h3><span class="hint">合计 128 件 · ¥34.3万</span></div>
+        <div class="table" style="border:none;border-radius:0"><table><thead>
+          <tr><th>仓库</th><th class="num">数量</th><th class="num">货值</th></tr>
+        </thead><tbody id="whBody"></tbody></table></div>
+      </div>
+
+      <div class="card">
+        <div class="card-h"><h3>近期流水</h3><span class="hint">最近 8 条出入库记录</span></div>
+        <div class="table" style="border:none;border-radius:0"><table><thead>
+          <tr><th>日期</th><th>类型</th><th class="num">数量</th><th>单号</th><th>经手人</th></tr>
+        </thead><tbody id="logBody"></tbody></table></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+// ---- 详情数据 ----
+const WAREHOUSES=[
+  {name:'主仓',qty:92,value:'¥24.7万'},
+  {name:'二号仓',qty:28,value:'¥7.5万'},
+  {name:'冷藏库',qty:8,value:'¥2.1万'},
+];
+const LOGS=[
+  {date:'2026-06-20',type:'入库',qty:'+24',no:'RK-20260620-014',by:'王经理'},
+  {date:'2026-06-18',type:'出库',qty:'-12',no:'CK-20260618-031',by:'李销售'},
+  {date:'2026-06-15',type:'出库',qty:'-18',no:'CK-20260615-022',by:'李销售'},
+  {date:'2026-06-12',type:'入库',qty:'+36',no:'RK-20260612-008',by:'王经理'},
+  {date:'2026-06-09',type:'出库',qty:'-20',no:'CK-20260609-017',by:'张前台'},
+  {date:'2026-06-05',type:'出库',qty:'-14',no:'CK-20260605-009',by:'李销售'},
+  {date:'2026-06-02',type:'入库',qty:'+48',no:'RK-20260602-003',by:'王经理'},
+  {date:'2026-05-28',type:'出库',qty:'-22',no:'CK-20260528-041',by:'张前台'},
+];
+const PRICES=[
+  {date:'2026-06-12',price:'¥2,680',trend:'up',note:'供货上调'},
+  {date:'2026-04-20',price:'¥2,620',trend:'down',note:'渠道让利'},
+  {date:'2026-02-08',price:'¥2,700',trend:'up',note:'春节备货'},
+  {date:'2025-11-15',price:'¥2,580',trend:null,note:'初始建档'},
+];
+
+function render(){
+  document.getElementById('whBody').innerHTML=WAREHOUSES.map(w=>`<tr><td>${w.name}</td><td class="num"><span class="qty">${w.qty}</span></td><td class="num">${w.value}</td></tr>`).join('');
+  document.getElementById('logBody').innerHTML=LOGS.map(l=>`<tr><td class="num" style="text-align:left;font-family:var(--font-mono);color:var(--muted)">${l.date}</td><td><span class="badge b-${l.type}">${l.type}</span></td><td class="num"><span class="qty ${l.type==='出库'?'low':''}">${l.qty}</span></td><td style="font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-sm)">${l.no}</td><td>${l.by}</td></tr>`).join('');
+  document.getElementById('priceList').innerHTML=PRICES.map(p=>`<div class="price-row"><span class="pd">${p.date}</span><span class="pv ${p.trend||''}">${p.price}</span><span class="pt">${p.note}</span></div>`).join('');
+}
+
+// ---- 主题 / 导航 ----
+const HREF={'stock-in':'stock-in-list.html','stock-out':'stock-out-list.html','inventory':'inventory.html','finance':'finance.html','partners':'partners.html','products':'products.html','settings':'settings.html'};
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeMenus(); });
+
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/product-editor.js b/.superpowers/prototype/screens/product-editor.js
new file mode 100644
index 0000000..56dcfbd
--- /dev/null
+++ b/.superpowers/prototype/screens/product-editor.js
@@ -0,0 +1,104 @@
+// ============================================================
+// 商品编辑抽屉 单一真源 —— 商品信息 + 商品图片 + 商品介绍 + 预览
+// 用法：任意屏引入 <script src="product-editor.js"></script>（需先引 shell.js 取 openMenu/toast），
+//        行点击调用 openProductEditor(item)。item 字段按需：{name,code,series,spec,cat,qty,unit,cost,value,status}
+// 改这个抽屉（库存 / 基础数据共用）= 只改此文件 + atoms.css 的 .pe-* 样式。
+// ============================================================
+(function () {
+  const INTRO_LIB = [
+    { t: '酱香经典 · 宴请送礼', body: '酱香突出、醇厚协调，空杯留香持久，是商务宴请与节庆馈赠之选。' },
+    { t: '浓香绵柔 · 口粮优选', body: '入口绵甜、诸味协调、尾净味长，日常聚饮与口粮自饮皆宜。' },
+    { t: '高端收藏 · 限量原浆', body: '精选原浆、限量出品，酒体丰满、陈香雅致，兼具品饮与收藏价值。' },
+    { t: '清香纯净 · 入门友好', body: '清香纯正、入口净爽、回味甘冽，适合清淡口味与入门饮用。' },
+  ];
+  const PE_TILE = ['主图', '细节图', '场景图'];
+  const PE_IMG = (bg, c) => `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Crect width='100' height='130' fill='%23${bg}'/%3E%3Crect x='40' y='18' width='20' height='97' rx='5' fill='%23${c}'/%3E%3Crect x='37' y='52' width='26' height='34' rx='2' fill='%23F5ECD9'/%3E%3C/svg%3E`;
+  const PE_SAMPLE = [PE_IMG('E9DCC0', '8B2331'), PE_IMG('D9E2EC', '2D4A66'), PE_IMG('EAD9C2', '7A4A1E')];
+  const peState = { imgs: ['', '', ''] };
+
+  const DRAWER_HTML = `
+<div class="drawer-mask" id="pubMask" onclick="closePubDrawer()"></div>
+<div class="drawer" id="pubDrawer">
+  <div class="drawer-head"><h3 id="peTitle">商品</h3>
+    <div style="margin-left:auto; display:flex; gap:10px; align-items:center">
+      <div class="btn ghost sm" onclick="window.open('public-product.html','_blank')"><svg viewBox="0 0 24 24"><use href="#i-eye"/></svg>预览</div>
+      <svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closePubDrawer()"><use href="#i-close"/></svg>
+    </div>
+  </div>
+  <div class="drawer-body">
+    <div class="pe-card">
+      <div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg></span>商品信息</div>
+      <div class="pe-b" style="padding-top:2px;padding-bottom:2px"><div id="peInfo"></div></div>
+    </div>
+    <div class="pe-card">
+      <div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg></span>商品图片</div>
+      <div class="pe-b"><div class="pe-gallery" id="peGallery"></div><div class="pe-note">建议主图为白底产品图，可再加细节图（瓶身/防伪）与场景图。</div></div>
+    </div>
+    <div class="pe-card">
+      <div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg></span>商品介绍 / 卖点<span class="pe-manage" onclick="location.href='products.html?tab=intro'">管理介绍库</span></div>
+      <div class="pe-b">
+        <div class="pe-pick" onclick="pickIntro(event)"><span class="ph" id="peIntroName">从介绍库选择…</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <textarea class="pe-text" id="peIntroText" placeholder="一句话卖点 + 商品介绍，可在选用后直接编辑…"></textarea>
+      </div>
+    </div>
+    <div class="pe-foot">
+      <div class="btn ghost" onclick="closePubDrawer()">取消</div>
+      <div class="btn primary" onclick="closePubDrawer();toast('公开页已保存（原型）✓')"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>保存</div>
+    </div>
+  </div>
+</div>`;
+
+  function ensure() {
+    if (document.getElementById('pubDrawer')) return;
+    const wrap = document.createElement('div');
+    wrap.innerHTML = DRAWER_HTML.trim();
+    while (wrap.firstChild) document.body.appendChild(wrap.firstChild);
+  }
+
+  function infoRows(it) {
+    const r = [];
+    if (it.code) r.push(['编码', `<b style="font-family:var(--font-mono)">${it.code}</b>`]);
+    if (it.series) r.push(['系列', `<b>${it.series}</b>`]);
+    if (it.spec) r.push(['规格', `<b>${it.spec}</b>`]);
+    if (it.cat) r.push(['分类', `<b>${it.cat}</b>`]);
+    if (it.qty != null) r.push(['当前库存', `<b>${it.qty} ${it.unit || ''}</b>`]);
+    if (it.cost) r.push(['成本价', `<b>${it.cost}</b>`]);
+    if (it.value) r.push(['库存货值', `<b>${it.value}</b>`]);
+    if (it.status) r.push(['状态', `<b><span class="badge b-${it.status}">${it.status}</span></b>`]);
+    return r.map((x, i) => `<div class="drow"${i === r.length - 1 ? ' style="border-bottom:none"' : ''}><span>${x[0]}</span>${x[1]}</div>`).join('');
+  }
+
+  function renderPeGallery() {
+    document.getElementById('peGallery').innerHTML = peState.imgs.map((u, i) =>
+      `<div class="pe-tile ${u ? 'has' : ''}" onclick="peTile(${i})">${u ? `<img src="${u}" alt="">` : `<svg viewBox="0 0 24 24"><use href="#i-plus"/></svg><span>${PE_TILE[i]}</span>`}<div class="rm" onclick="event.stopPropagation();peRemove(${i})"><svg width="11" height="11" viewBox="0 0 24 24" stroke-width="3"><use href="#i-close"/></svg></div>${u ? `<span class="cap">${PE_TILE[i]}</span>` : ''}</div>`).join('');
+  }
+
+  function openProductEditor(it) {
+    ensure();
+    document.getElementById('peTitle').textContent = it.name || '商品';
+    document.getElementById('peInfo').innerHTML = infoRows(it);
+    peState.imgs = [PE_SAMPLE[0], '', ''];
+    const nm = document.getElementById('peIntroName');
+    nm.textContent = '从介绍库选择…'; nm.classList.add('ph');
+    document.getElementById('peIntroText').value = '';
+    renderPeGallery();
+    document.getElementById('pubDrawer').classList.add('show');
+    document.getElementById('pubMask').classList.add('show');
+  }
+
+  // 全局暴露（注入 HTML 的 onclick 直接调用）
+  window.openProductEditor = openProductEditor;
+  window.closePubDrawer = () => { const d = document.getElementById('pubDrawer'); if (d) d.classList.remove('show'); const m = document.getElementById('pubMask'); if (m) m.classList.remove('show'); };
+  window.peTile = i => { if (!peState.imgs[i]) { peState.imgs[i] = PE_SAMPLE[i]; renderPeGallery(); } };
+  window.peRemove = i => { peState.imgs[i] = ''; renderPeGallery(); };
+  window.pickIntro = e => {
+    const nm = document.getElementById('peIntroName');
+    openMenu(e.currentTarget, INTRO_LIB.map((x, i) => ({ v: String(i), label: x.t, sel: nm.textContent === x.t })), v => {
+      const x = INTRO_LIB[+v]; nm.textContent = x.t; nm.classList.remove('ph');
+      document.getElementById('peIntroText').value = x.body; closeMenus();
+    });
+  };
+
+  if (document.readyState !== 'loading') ensure();
+  else document.addEventListener('DOMContentLoaded', ensure);
+})();
diff --git a/.superpowers/prototype/screens/products.html b/.superpowers/prototype/screens/products.html
new file mode 100644
index 0000000..f712eeb
--- /dev/null
+++ b/.superpowers/prototype/screens/products.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>基础数据 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; flex-wrap:wrap; transition:background-color .28s,border-color .28s;}
+  .toolbar .searchbox{width:260px;}
+  .toolbar .sp{margin-left:auto;}
+  /* 商品状态徽章（在售复用 b-在售；停用为中性灰） */
+  .b-停用{background:var(--border-subtle); color:var(--muted);}
+  .intro-ta{width:100%; box-sizing:border-box; min-height:96px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-md); padding:10px 11px; font-size:var(--fs-body); color:var(--text); background:var(--surface); outline:none; font-family:var(--font); line-height:1.7;}
+  .intro-ta:focus{border-color:var(--primary);}
+  .intro-sum{color:var(--muted); max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+  .dsec{font-size:var(--fs-xs); color:var(--muted); font-weight:600; letter-spacing:.4px; margin:18px 0 4px;}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="products"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>基础数据</h1><span class="sub" id="sub">商品名 → 系列 → 规格</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="refreshCur()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>刷新</div>
+          <div class="btn primary" id="addBtn" onclick="openAdd()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增商品</div>
+        </div>
+      </div>
+      <div class="seg" id="tabSeg" style="margin-bottom:14px"><button data-tab="archive" class="on" onclick="switchTab('archive')">商品档案</button><button data-tab="intro" onclick="switchTab('intro')">商品介绍</button><button data-tab="series" onclick="switchTab('series')">系列</button><button data-tab="spec" onclick="switchTab('spec')">规格</button><button data-tab="cat" onclick="switchTab('cat')">香型</button></div>
+      <div id="archiveView">
+      <div class="toolbar">
+        <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="商品名 / 拼音 / 编码" oninput="state.q=this.value; render()"></div>
+        <div id="chips"></div>
+        <div class="sp"></div>
+        <div class="btn ghost sm" onclick="clearFilters()">重置</div>
+      </div>
+      <div class="table flush-top"><table>
+        <thead><tr><th>商品</th><th>系列</th><th>规格</th><th>分类</th><th>单位</th><th class="num">默认成本价</th><th>状态</th><th class="act">操作</th></tr></thead>
+        <tbody id="tbody"></tbody>
+      </table></div>
+      <div class="pager"><span id="pagerInfo"></span></div>
+      </div><!-- /archiveView -->
+      <div id="introView" hidden>
+        <div class="toolbar">
+          <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="introSearch" placeholder="搜索介绍标题 / 内容" oninput="introQ=this.value;renderIntros()"></div>
+          <div class="sp"></div>
+          <div class="btn ghost sm" onclick="introQ='';document.getElementById('introSearch').value='';renderIntros()">重置</div>
+        </div>
+        <div class="table flush-top"><table>
+          <thead><tr><th>标题</th><th>适用分类</th><th>内容摘要</th><th class="act">操作</th></tr></thead>
+          <tbody id="introBody"></tbody>
+        </table></div>
+        <div class="pager"><span id="introInfo"></span></div>
+      </div>
+      <div id="configView" hidden>
+        <div class="toolbar">
+          <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="configSearch" placeholder="搜索名称 / 说明" oninput="configQ=this.value;renderConfig()"></div>
+          <div class="sp"></div>
+          <div class="btn ghost sm" onclick="configQ='';document.getElementById('configSearch').value='';renderConfig()">重置</div>
+        </div>
+        <div class="table flush-top"><table>
+          <thead><tr><th id="configCol">名称</th><th>说明</th><th class="num">关联商品</th><th class="act">操作</th></tr></thead>
+          <tbody id="configBody"></tbody>
+        </table></div>
+        <div class="pager"><span id="configHint"></span></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 新增商品 -->
+<div class="overlay" id="ovAdd"><div class="modal">
+  <div class="modal-head"><h3>新增商品</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovAdd')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="frow">
+      <div class="field"><label>商品名 *</label><div class="ctrl input-like"><input placeholder="如：茅台 飞天"></div></div>
+      <div class="field"><label>系列</label><div class="ctrl" onclick="pickDict('series',event)"><span id="addSeries">飞天</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>规格 *</label><div class="ctrl" onclick="pickDict('spec',event)"><span id="addSpec">500ml×6</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="field"><label>分类（香型）</label><div class="ctrl" onclick="pickCat(event)"><span id="addCat">酱香</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+    </div>
+    <div class="frow">
+      <div class="field"><label>单位</label><div class="ctrl" onclick="pickUnit(event)"><span id="addUnit">件</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+      <div class="field"><label>默认成本价</label><div class="ctrl input-like"><input type="number" placeholder="0.00"></div></div>
+    </div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovAdd')">取消</div><div class="btn primary" onclick="closeOverlay('ovAdd'); toast('商品已保存（原型）✓')">保存</div></div>
+</div></div>
+
+<!-- 新增 / 编辑商品介绍 -->
+<div class="overlay" id="ovIntro"><div class="modal">
+  <div class="modal-head"><h3 id="introModalTitle">新增商品介绍</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovIntro')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="frow">
+      <div class="field"><label>标题 *</label><div class="ctrl input-like"><input id="introT" placeholder="如：酱香经典 · 宴请送礼"></div></div>
+      <div class="field"><label>适用分类</label><div class="ctrl" onclick="pickIntroCat(event)"><span id="introCat">通用</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div></div>
+    </div>
+    <div class="field" style="margin-top:12px"><label>介绍内容 *</label><textarea id="introBodyInput" class="intro-ta" placeholder="一句话卖点 + 商品介绍，例如产地、工艺、口感、适用场景…"></textarea></div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovIntro')">取消</div><div class="btn primary" onclick="saveIntro()">保存</div></div>
+</div></div>
+
+<!-- 新增 / 编辑 字典项（系列 / 规格 / 香型） -->
+<div class="overlay" id="ovDict"><div class="modal">
+  <div class="modal-head"><h3 id="dictTitle">新增系列</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovDict')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="field"><label id="dictLabel">系列名称 *</label><div class="ctrl input-like"><input id="dictName" placeholder="请输入名称"></div></div>
+    <div class="field" style="margin-top:12px"><label>说明（选填）</label><div class="ctrl input-like"><input id="dictNote" placeholder="备注说明，如适用品牌 / 用途"></div></div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovDict')">取消</div><div class="btn primary" onclick="saveDict()">保存</div></div>
+</div></div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const PRODUCTS=[
+  {name:'茅台 飞天',code:'MT-FT-500',series:'飞天',spec:'500ml×6 · 53°',cat:'酱香',unit:'件',cost:'¥2,680',status:'在售'},
+  {name:'茅台 飞天',code:'MT-FT-100',series:'飞天',spec:'100ml×24 · 53°',cat:'酱香',unit:'件',cost:'¥620',status:'在售'},
+  {name:'五粮液 普五',code:'WLY-PW-500',series:'第八代',spec:'500ml×6 · 52°',cat:'浓香',unit:'件',cost:'¥1,050',status:'在售'},
+  {name:'国窖 1573',code:'GJ-1573-500',series:'经典装',spec:'500ml×6 · 52°',cat:'浓香',unit:'件',cost:'¥980',status:'在售'},
+  {name:'剑南春 水晶剑',code:'JNC-SJ-500',series:'水晶剑',spec:'500ml×6 · 52°',cat:'浓香',unit:'件',cost:'¥438',status:'在售'},
+  {name:'洋河 梦之蓝',code:'YH-M6-500',series:'M6+',spec:'550ml×6 · 45°',cat:'绵柔',unit:'件',cost:'¥620',status:'在售'},
+  {name:'泸州老窖 特曲',code:'LZLJ-TQ-500',series:'第十代',spec:'500ml×6 · 52°',cat:'浓香',unit:'件',cost:'¥320',status:'在售'},
+  {name:'习酒 窖藏',code:'XJ-JC1988',series:'1988',spec:'500ml×6 · 53°',cat:'酱香',unit:'件',cost:'¥760',status:'在售'},
+  {name:'汾酒 青花',code:'FJ-QH20-500',series:'青花20',spec:'500ml×6 · 53°',cat:'清香',unit:'件',cost:'¥420',status:'在售'},
+  {name:'郎酒 红花郎',code:'LJ-HHL15',series:'红花郎15',spec:'500ml×6 · 53°',cat:'酱香',unit:'件',cost:'¥560',status:'在售'},
+  {name:'西凤酒 旗舰版',code:'XF-QJ-500',series:'旗舰',spec:'500ml×6 · 52°',cat:'凤香',unit:'件',cost:'¥280',status:'停用'},
+  {name:'古井贡 年份原浆',code:'GJG-NF-500',series:'古16',spec:'500ml×6 · 50°',cat:'浓香',unit:'件',cost:'¥390',status:'在售'},
+];
+// 字典配置表（系列 / 规格 / 香型 各自独立维护，驱动商品录入与筛选）
+const DICTS={
+  series:{label:'系列', items:[
+    {name:'飞天',note:'茅台主力系列'},
+    {name:'第八代',note:'五粮液当前主力'},
+    {name:'经典装',note:'国窖 1573 经典'},
+    {name:'水晶剑',note:'剑南春核心'},
+    {name:'M6+',note:'梦之蓝高端'},
+    {name:'青花20',note:'汾酒青花系列'},
+  ]},
+  spec:{label:'规格', items:[
+    {name:'500ml×6',note:'整箱 · 标准装'},
+    {name:'100ml×24',note:'小瓶 · 品鉴装'},
+    {name:'550ml×6',note:'整箱 · 加量装'},
+  ]},
+  cat:{label:'香型', items:[
+    {name:'酱香',note:'茅台 / 习酒 / 郎酒'},
+    {name:'浓香',note:'五粮液 / 国窖 / 剑南春'},
+    {name:'清香',note:'汾酒'},
+    {name:'绵柔',note:'洋河'},
+    {name:'凤香',note:'西凤'},
+  ]},
+};
+const CATS=DICTS.cat.items.map(x=>x.name);
+const UNITS=['件','瓶','箱','提'];
+const state={q:'',cat:'全部'};
+
+
+function buildChips(){ const all=['全部',...CATS]; document.getElementById('chips').innerHTML=all.map(c=>`<div class="chip" data-c="${c}" onclick="setCat('${c}')" style="margin-right:8px">${c}</div>`).join(''); }
+function setCat(c){ state.cat=c; render(); }
+function clearFilters(){ state.q='';state.cat='全部'; document.getElementById('searchInput').value=''; render(); }
+function filtered(){ return PRODUCTS.filter(it=>{ if(state.cat!=='全部'&&it.cat!==state.cat)return false; if(state.q){const q=state.q.toLowerCase(); if(!it.name.toLowerCase().includes(q)&&!it.code.toLowerCase().includes(q)&&!it.series.toLowerCase().includes(q))return false;} return true; }); }
+function render(){
+  document.querySelectorAll('.chip[data-c]').forEach(c=>c.classList.toggle('on',c.dataset.c===state.cat));
+  const rows=filtered(); const tb=document.getElementById('tbody');
+  if(rows.length===0){ tb.innerHTML=`<tr><td colspan="8"><div class="empty">没有匹配的商品 · 试试调整筛选或搜索</div></td></tr>`; }
+  else { tb.innerHTML=rows.map(it=>{ const idx=PRODUCTS.indexOf(it); return `<tr class="click" onclick="openProductEditor(PRODUCTS[${idx}])">
+    <td><div class="pname">${it.name}</div><div class="pcode">${it.code}</div></td>
+    <td>${it.series}</td>
+    <td>${it.spec}</td>
+    <td>${it.cat}</td>
+    <td>${it.unit}</td>
+    <td class="num">${it.cost}</td>
+    <td><span class="badge b-${it.status}">${it.status}</span></td>
+    <td class="act"><div class="row-act" onclick="event.stopPropagation()">
+      <svg viewBox="0 0 24 24" onclick="openProductEditor(PRODUCTS[${idx}])"><use href="#i-eye"/></svg>
+      <svg viewBox="0 0 24 24" onclick="toast('编辑 · '+'${it.name}')"><use href="#i-edit"/></svg>
+    </div></td></tr>`; }).join(''); }
+  document.getElementById('pagerInfo').textContent=`共 ${rows.length} 个商品`;
+  document.getElementById('sub').textContent=`基础数据 · 商品名 → 系列 → 规格 · 共 ${PRODUCTS.length} 个`;
+}
+
+// 商品抽屉走共享模块 product-editor.js（openProductEditor 全局）
+
+function openAdd(){ document.getElementById('addCat').textContent=DICTS.cat.items[0]?.name||'酱香'; document.getElementById('addUnit').textContent='件'; document.getElementById('addSeries').textContent=DICTS.series.items[0]?.name||''; document.getElementById('addSpec').textContent=DICTS.spec.items[0]?.name||''; document.getElementById('ovAdd').classList.add('show'); }
+function pickCat(e){ openMenu(e.currentTarget, CATS.map(v=>({v,label:v,sel:document.getElementById('addCat').textContent===v})), v=>{ document.getElementById('addCat').textContent=v; closeMenus(); }); }
+function pickDict(kind,e){ const span=e.currentTarget.querySelector('span'); openMenu(e.currentTarget, DICTS[kind].items.map(x=>({v:x.name,label:x.name,sel:span.textContent===x.name})), v=>{ span.textContent=v; closeMenus(); }); }
+function pickUnit(e){ openMenu(e.currentTarget, UNITS.map(v=>({v,label:v,sel:document.getElementById('addUnit').textContent===v})), v=>{ document.getElementById('addUnit').textContent=v; closeMenus(); }); }
+function closeOverlay(id){ document.getElementById(id).classList.remove('show'); }
+
+
+
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closePubDrawer&&closePubDrawer();document.querySelectorAll('.overlay.show').forEach(o=>o.classList.remove('show'));} });
+
+// ===== 商品介绍库（基础数据 · 标签页） =====
+let curTab='archive', introQ='', introEdit=-1;
+const INTRO_CATS=['通用','酱香','浓香','清香','绵柔','凤香'];
+const INTROS=[
+  {title:'酱香经典 · 宴请送礼', cat:'酱香', body:'酱香突出、醇厚协调，空杯留香持久，是商务宴请与节庆馈赠之选。'},
+  {title:'浓香绵柔 · 口粮优选', cat:'浓香', body:'入口绵甜、诸味协调、尾净味长，日常聚饮与口粮自饮皆宜。'},
+  {title:'高端收藏 · 限量原浆', cat:'通用', body:'精选原浆、限量出品，酒体丰满、陈香雅致，兼具品饮与收藏价值。'},
+  {title:'清香纯净 · 入门友好', cat:'清香', body:'清香纯正、入口净爽、回味甘冽，适合清淡口味与入门饮用。'},
+];
+const PLUS='<svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>';
+function refreshCur(){ if(curTab==='intro')renderIntros(); else if(DICTS[curTab])renderConfig(); else render(); }
+function switchTab(t){ curTab=t;
+  document.querySelectorAll('#tabSeg button').forEach(b=>b.classList.toggle('on',b.dataset.tab===t));
+  const isConfig=!!DICTS[t];
+  document.getElementById('archiveView').hidden = t!=='archive';
+  document.getElementById('introView').hidden = t!=='intro';
+  document.getElementById('configView').hidden = !isConfig;
+  const add=document.getElementById('addBtn'), sub=document.getElementById('sub');
+  if(t==='intro'){ add.innerHTML=PLUS+'新增介绍'; add.onclick=()=>openAddIntro(); sub.textContent='商品介绍库 · 上架时可直接选用'; renderIntros(); }
+  else if(isConfig){ curDictKind=t; const d=DICTS[t]; add.innerHTML=PLUS+'新增'+d.label; add.onclick=()=>openAddDict(t); sub.textContent=`${d.label}配置 · 字典维护，驱动商品录入`; configQ=''; const cs=document.getElementById('configSearch'); if(cs)cs.value=''; document.getElementById('configCol').textContent=d.label; renderConfig(); }
+  else { add.innerHTML=PLUS+'新增商品'; add.onclick=()=>openAdd(); sub.textContent=`商品名 → 系列 → 规格 · 共 ${PRODUCTS.length} 个`; render(); }
+}
+function renderIntros(){ const q=introQ.toLowerCase(); const rows=INTROS.filter(x=>!q||x.title.toLowerCase().includes(q)||x.body.toLowerCase().includes(q)); const tb=document.getElementById('introBody');
+  if(!rows.length){ tb.innerHTML=`<tr><td colspan="4"><div class="empty">还没有商品介绍 · 点「新增介绍」创建</div></td></tr>`; }
+  else tb.innerHTML=rows.map(x=>{ const i=INTROS.indexOf(x); return `<tr>
+    <td><div class="pname">${x.title}</div></td>
+    <td>${x.cat}</td>
+    <td><div class="intro-sum">${x.body}</div></td>
+    <td class="act"><div class="row-act" onclick="event.stopPropagation()"><svg viewBox="0 0 24 24" onclick="openAddIntro(${i})"><use href="#i-edit"/></svg><svg viewBox="0 0 24 24" onclick="delIntro(${i})"><use href="#i-close"/></svg></div></td></tr>`; }).join('');
+  document.getElementById('introInfo').textContent=`共 ${rows.length} 条商品介绍`;
+}
+function openAddIntro(i){ introEdit=(typeof i==='number')?i:-1; const x=introEdit>=0?INTROS[introEdit]:{title:'',cat:'通用',body:''}; document.getElementById('introModalTitle').textContent=introEdit>=0?'编辑商品介绍':'新增商品介绍'; document.getElementById('introT').value=x.title; document.getElementById('introCat').textContent=x.cat; document.getElementById('introBodyInput').value=x.body; document.getElementById('ovIntro').classList.add('show'); }
+function pickIntroCat(e){ openMenu(e.currentTarget, INTRO_CATS.map(v=>({v,label:v,sel:document.getElementById('introCat').textContent===v})), v=>{ document.getElementById('introCat').textContent=v; closeMenus(); }); }
+function saveIntro(){ const t=document.getElementById('introT').value.trim(), c=document.getElementById('introCat').textContent, b=document.getElementById('introBodyInput').value.trim(); if(!t||!b){ toast('请填写标题和内容'); return; } if(introEdit>=0) INTROS[introEdit]={title:t,cat:c,body:b}; else INTROS.unshift({title:t,cat:c,body:b}); closeOverlay('ovIntro'); renderIntros(); toast('商品介绍已保存（原型）✓'); }
+function delIntro(i){ INTROS.splice(i,1); renderIntros(); toast('已删除（原型）'); }
+
+// ===== 字典配置表（系列 / 规格 / 香型） =====
+let curDictKind='series', dictEdit=-1, configQ='';
+function dictUsage(kind,name){ return PRODUCTS.filter(p=> kind==='series'?p.series===name : kind==='cat'?p.cat===name : p.spec.includes(name)).length; }
+function renderConfig(){ const d=DICTS[curDictKind]; const q=configQ.toLowerCase();
+  const rows=d.items.map((x,i)=>({x,i})).filter(({x})=>!q||x.name.toLowerCase().includes(q)||(x.note||'').toLowerCase().includes(q));
+  const tb=document.getElementById('configBody');
+  if(!rows.length){ tb.innerHTML=`<tr><td colspan="4"><div class="empty">还没有${d.label} · 点「新增${d.label}」创建</div></td></tr>`; }
+  else tb.innerHTML=rows.map(({x,i})=>`<tr>
+    <td><div class="pname">${x.name}</div></td>
+    <td>${x.note||'—'}</td>
+    <td class="num">${dictUsage(curDictKind,x.name)}</td>
+    <td class="act"><div class="row-act" onclick="event.stopPropagation()"><svg viewBox="0 0 24 24" onclick="openAddDict('${curDictKind}',${i})"><use href="#i-edit"/></svg><svg viewBox="0 0 24 24" onclick="delDict('${curDictKind}',${i})"><use href="#i-close"/></svg></div></td></tr>`).join('');
+  document.getElementById('configHint').textContent=`共 ${rows.length} 项${d.label}`;
+}
+function openAddDict(kind,i){ curDictKind=kind; dictEdit=(typeof i==='number')?i:-1; const d=DICTS[kind]; const x=dictEdit>=0?d.items[dictEdit]:{name:'',note:''};
+  document.getElementById('dictTitle').textContent=(dictEdit>=0?'编辑':'新增')+d.label;
+  document.getElementById('dictLabel').textContent=d.label+'名称 *';
+  document.getElementById('dictName').value=x.name; document.getElementById('dictNote').value=x.note||'';
+  document.getElementById('ovDict').classList.add('show'); }
+function saveDict(){ const n=document.getElementById('dictName').value.trim(), note=document.getElementById('dictNote').value.trim();
+  if(!n){ toast('请填写名称'); return; }
+  const d=DICTS[curDictKind]; if(dictEdit>=0) d.items[dictEdit]={name:n,note}; else d.items.unshift({name:n,note});
+  closeOverlay('ovDict'); renderConfig(); toast(d.label+'已保存（原型）✓'); }
+function delDict(kind,i){ DICTS[kind].items.splice(i,1); renderConfig(); toast('已删除（原型）'); }
+
+buildChips();
+if(new URLSearchParams(location.search).get('tab')==='intro') switchTab('intro'); else render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="product-editor.js"></script>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/public-edit.html b/.superpowers/prototype/screens/public-edit.html
new file mode 100644
index 0000000..07a3893
--- /dev/null
+++ b/.superpowers/prototype/screens/public-edit.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>编辑公开页 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ===== app shell ===== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+
+
+  /* ===== 编辑器主体：左表单 + 右预览 ===== */
+  .work{flex:1; min-width:0; display:flex; flex-direction:column;}
+  .ehead{display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--border); background:var(--surface); flex:none; flex-wrap:wrap;}
+  .ehead .crumb{display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:var(--fs-sm); text-decoration:none;}
+  .ehead .crumb:hover{color:var(--primary);}
+  .ehead h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title);}
+  .ehead .pcode{font-size:var(--fs-sm); color:var(--faint); font-family:var(--font-mono);}
+  .ehead .sp{margin-left:auto;}
+  .ehead .acts{display:flex; gap:10px;}
+
+  .split{flex:1; display:flex; min-height:0;}
+  .form-col{flex:1; min-width:0; overflow:auto; padding:20px 24px;}
+  .prev-col{width:430px; flex:none; border-left:1px solid var(--border); background:var(--page); display:flex; flex-direction:column; align-items:center; padding:20px 0; overflow:auto; transition:background-color .28s;}
+  @media(max-width:1080px){ .prev-col{display:none;} }
+
+  .ecard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden; transition:background-color .28s,border-color .28s;}
+  .ecard-h{display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--border-subtle);}
+  .ecard-h .ei{width:24px; height:24px; border-radius:var(--r-sm); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
+  .ecard-h .ei svg{width:15px; height:15px; stroke-width:1.9;}
+  .ecard-h h3{margin:0; font-size:var(--fs-title); color:var(--heading);}
+  .ecard-h .tag-edit{margin-left:auto; font-size:var(--fs-xs); color:var(--accent); background:var(--accent-soft); padding:2px 8px; border-radius:var(--r-pill); font-weight:600;}
+  .ecard-h .tag-auto{margin-left:auto; font-size:var(--fs-xs); color:var(--muted); background:var(--bg); padding:2px 8px; border-radius:var(--r-pill);}
+  .ecard-b{padding:16px;}
+  .fld{margin-bottom:14px;}
+  .fld:last-child{margin-bottom:0;}
+  .fld label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px; font-weight:600;}
+  .fld textarea{width:100%; box-sizing:border-box; min-height:74px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-md); padding:10px 11px; font-size:var(--fs-body); color:var(--text); background:var(--surface); outline:none; font-family:var(--font); line-height:1.7;}
+  .fld textarea:focus, .fld .input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
+
+  /* 图片上传 */
+  .gallery{display:flex; gap:10px; flex-wrap:wrap;}
+  .uptile{width:96px; height:120px; border:1.5px dashed var(--border); border-radius:var(--r-md); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; color:var(--faint); font-size:var(--fs-xs); position:relative; overflow:hidden; transition:border-color .15s;}
+  .uptile:hover{border-color:var(--primary); color:var(--primary);}
+  .uptile svg{width:22px; height:22px; stroke-width:1.6;}
+  .uptile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
+  .uptile .rm{position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff; display:none; align-items:center; justify-content:center; z-index:1;}
+  .uptile.has .rm{display:flex;} .uptile.has{border-style:solid; border-color:var(--border);}
+  .uptile .cap{position:absolute; bottom:0; left:0; right:0; background:var(--scrim); color:#fff; font-size:var(--fs-xs); text-align:center; padding:2px 0;}
+
+  /* 风味标签编辑 */
+  .chips-edit{display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
+  .chip-x{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 11px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); font-size:var(--fs-sm); font-weight:600;}
+  .chip-x .x{width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--accent);}
+  .chip-x .x:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);}
+  .chip-add{height:28px; border:1px dashed var(--border); background:transparent; border-radius:var(--r-pill); padding:0 12px; font-size:var(--fs-sm); color:var(--muted); cursor:pointer; outline:none; min-width:120px; font-family:var(--font);}
+
+  /* 派生只读字段 */
+  .auto-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px 20px;}
+  .auto-grid .a{display:flex; flex-direction:column; gap:3px;}
+  .auto-grid .a .k{font-size:var(--fs-xs); color:var(--muted);}
+  .auto-grid .a .v{font-size:var(--fs-body); color:var(--heading); font-weight:600;}
+  .auto-grid .a .v.mono{font-family:var(--font-mono);}
+  .auto-note{font-size:var(--fs-xs); color:var(--faint); margin-top:12px; display:flex; align-items:center; gap:6px;}
+  .auto-note svg{width:13px; height:13px; stroke-width:1.8; flex:none;}
+
+  /* 手机预览框 */
+  .prev-bar{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:14px;}
+  .prev-bar .lk{color:var(--primary); text-decoration:none; display:inline-flex; align-items:center; gap:4px;}
+  .phone{width:390px; height:760px; border-radius:34px; background:var(--heading); padding:11px; box-shadow:var(--sh-3); flex:none;}
+  .phone .screen{width:100%; height:100%; border-radius:24px; overflow:hidden; background:var(--bg);}
+  .phone iframe{width:100%; height:100%; border:0; display:block;}
+
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="inventory"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="work">
+      <div class="ehead">
+        <a class="crumb" href="inventory.html"><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-left"/></svg>库存管理</a>
+        <h1>茅台 飞天 53°</h1>
+        <span class="pcode">MT-FT-500</span>
+        <span class="badge b-在售">在售</span>
+        <div class="sp"></div>
+        <div class="acts">
+          <div class="btn ghost" onclick="copyLink()"><svg viewBox="0 0 24 24"><use href="#i-ic25"/></svg>复制公开链接</div>
+          <div class="btn ghost" onclick="window.open('public-product.html','_blank')"><svg viewBox="0 0 24 24"><use href="#i-ic26"/></svg>新窗口预览</div>
+          <div class="btn primary" onclick="toast('已保存公开页（原型）')"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>保存</div>
+        </div>
+      </div>
+
+      <div class="split">
+        <!-- 左：编辑表单 -->
+        <div class="form-col">
+          <!-- 图片 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg></span><h3>商品图片</h3><span class="tag-edit">商家录入</span></div>
+            <div class="ecard-b">
+              <div class="gallery" id="gallery"></div>
+              <div class="auto-note"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg>建议：主图白底产品图，另可加细节图（瓶身/防伪）与场景图（宴请/送礼）。</div>
+            </div>
+          </div>
+
+          <!-- 商品描述 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg></span><h3>商品介绍 / 卖点</h3><span class="tag-edit">商家录入</span></div>
+            <div class="ecard-b"><div class="fld"><textarea id="f_desc" data-k="desc" placeholder="一句话卖点 + 商品介绍，例如产地、工艺、口感、适用场景…"></textarea></div></div>
+          </div>
+
+          <!-- 品鉴笔记 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic29"/></svg></span><h3>品鉴笔记</h3><span class="tag-edit">商家录入</span></div>
+            <div class="ecard-b">
+              <div class="fld"><label>香气（Nose）</label><textarea id="f_aroma" data-taste="0" placeholder="如：酱香纯正、幽雅细腻…"></textarea></div>
+              <div class="fld"><label>口感（Palate）</label><textarea id="f_palate" data-taste="1" placeholder="如：入口醇厚、绵柔甘冽…"></textarea></div>
+              <div class="fld"><label>尾韵（Finish）</label><textarea id="f_finish" data-taste="2" placeholder="如：回味悠长、余味净爽…"></textarea></div>
+              <div class="fld"><label>风味标签</label><div class="chips-edit" id="ftagsEdit"></div></div>
+            </div>
+          </div>
+
+          <!-- 适饮建议 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic30"/></svg></span><h3>适饮建议</h3><span class="tag-edit">商家录入</span></div>
+            <div class="ecard-b">
+              <div class="fld"><label>适饮场景</label><input class="input" id="f_scene" data-serve="scene" placeholder="如：商务宴请 · 节庆送礼 · 收藏"></div>
+              <div class="grid2">
+                <div class="fld"><label>搭配建议</label><input class="input" id="f_pair" data-serve="pair" placeholder="如：红烧肉、卤味、川菜"></div>
+                <div class="fld"><label>最佳温度</label><input class="input" id="f_temp" data-serve="temp" placeholder="如：18–22℃ 常温"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 品牌故事 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic31"/></svg></span><h3>品牌故事 · 工艺</h3><span class="tag-edit">商家录入</span></div>
+            <div class="ecard-b"><div class="fld"><textarea id="f_story" data-k="story" placeholder="品牌渊源、产区、酿造工艺、窖藏故事…"></textarea></div></div>
+          </div>
+
+          <!-- 获奖荣誉 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic32"/></svg></span><h3>获奖荣誉</h3><span class="tag-edit">商家录入</span></div>
+            <div class="ecard-b"><div class="fld"><textarea id="f_awards" data-k="awards" placeholder="每行一项荣誉，例如：1915 巴拿马万国博览会金奖"></textarea></div></div>
+          </div>
+
+          <!-- 派生只读 -->
+          <div class="ecard">
+            <div class="ecard-h"><span class="ei"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg></span><h3>商品资料</h3><span class="tag-auto">来自商品 · 自动展示</span></div>
+            <div class="ecard-b">
+              <div class="auto-grid" id="autoGrid"></div>
+              <div class="auto-note"><svg viewBox="0 0 24 24"><use href="#i-ic34"/></svg>这些字段由商品/门店资料派生，在「基础数据」中维护，公开页自动展示。</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右：手机实时预览 -->
+        <div class="prev-col">
+          <div class="prev-bar"><svg width="15" height="15" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-eye"/></svg>顾客扫码看到的公开页（实时预览）</div>
+          <div class="phone"><div class="screen"><iframe id="preview" src="public-product.html?embed=1"></iframe></div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+  // ===== merchant 字段初始值（与公开页样例一致；编辑即覆盖预览）=====
+  const IMG = (h)=>`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Crect width='100' height='130' fill='%23${h.bg}'/%3E%3Crect x='44' y='8' width='12' height='14' rx='2' fill='%23${h.c}'/%3E%3Crect x='40' y='20' width='20' height='95' rx='5' fill='%23${h.c}'/%3E%3Crect x='37' y='52' width='26' height='34' rx='2' fill='%23F5ECD9'/%3E%3C/svg%3E`;
+  const SAMPLE = [ IMG({bg:'E9DCC0',c:'8B2331'}), IMG({bg:'D9E2EC',c:'2D4A66'}), IMG({bg:'EAD9C2',c:'7A4A1E'}) ];
+  const TILE_LABELS = ['主图','细节图','场景图'];
+
+  const state = {
+    imgs: [SAMPLE[0], '', ''],
+    desc: '茅台酒以本地优质糯高粱为原料，经传统固态发酵、九次蒸煮、八次发酵、七次取酒，再经三年以上陶坛窖藏精心勾调而成。酒体醇厚、酱香突出、空杯留香持久，是宴请与馈赠之选。',
+    taste: ['酱香纯正、幽雅细腻，焦香与花果香交织，空杯留香持久。','入口醇厚饱满、绵柔甘冽，层次丰富，酱香与陈香协调。','回味悠长、余味净爽，喉韵舒适不刺激。'],
+    ftags: ['酱香浓郁','空杯留香','绵柔回甘','陈香协调'],
+    serve: { scene:'商务宴请 · 节庆送礼 · 收藏', pair:'红烧肉、酱牛肉、卤味、川菜', temp:'18–22℃ 常温饮用' },
+    story: '贵州茅台酒产于赤水河畔的茅台镇，依托独特的地理气候与微生物环境，沿用端午制曲、重阳下沙的古法工艺，一个生产周期长达一年，再经数年窖藏方得佳酿。',
+    awards: ['1915 巴拿马万国博览会金奖','历届国家名酒评选金质奖'],
+  };
+  // 派生（只读）
+  const AUTO = [['系列','飞天'],['规格','500ml × 6'],['香型','酱香型'],['酒精度','53% vol'],['品牌','贵州茅台'],['产地','贵州 · 仁怀市茅台镇'],['生产日期','2024-03-18'],['批次号','MT-FT-2024-08-A0931'],['保质期','适宜长期存放'],['储存方式','阴凉干燥、避光直立']];
+
+  // 渲染图片瓦片
+  function renderGallery(){
+    document.getElementById('gallery').innerHTML = state.imgs.map((u,i)=>
+      `<div class="uptile ${u?'has':''}" onclick="tileClick(${i})">${u?`<img src="${u}" alt="">`:`<svg viewBox="0 0 24 24"><use href="#i-plus"/></svg><span>${TILE_LABELS[i]}</span>`}<div class="rm" onclick="event.stopPropagation();removeImg(${i})"><svg width="11" height="11" viewBox="0 0 24 24" stroke-width="3" stroke="#fff"><use href="#i-close"/></svg></div>${u?`<span class="cap">${TILE_LABELS[i]}</span>`:''}</div>`).join('');
+  }
+  function tileClick(i){ if(!state.imgs[i]){ state.imgs[i]=SAMPLE[i]; renderGallery(); push(); } }
+  function removeImg(i){ state.imgs[i]=''; renderGallery(); push(); }
+
+  // 风味标签编辑
+  function renderFtags(){
+    const box=document.getElementById('ftagsEdit');
+    box.innerHTML = state.ftags.map((t,i)=>`<span class="chip-x">${t}<span class="x" onclick="rmTag(${i})"><svg width="11" height="11" viewBox="0 0 24 24" stroke-width="3"><use href="#i-close"/></svg></span></span>`).join('') + `<input class="chip-add" id="tagAdd" placeholder="+ 添加标签，回车">`;
+    document.getElementById('tagAdd').onkeydown=e=>{ if(e.key==='Enter'&&e.target.value.trim()){ state.ftags.push(e.target.value.trim()); renderFtags(); document.getElementById('tagAdd').focus(); push(); } };
+  }
+  function rmTag(i){ state.ftags.splice(i,1); renderFtags(); push(); }
+
+  // 收集 → 推送预览
+  function push(){
+    const iframe=document.getElementById('preview');
+    if(!iframe || !iframe.contentWindow) return;
+    iframe.contentWindow.postMessage({ type:'ympreview', fields:{
+      img: state.imgs[0],
+      thumbs: state.imgs.slice(1).filter(Boolean),
+      desc: state.desc,
+      taste: [['香气',state.taste[0]],['口感',state.taste[1]],['尾韵',state.taste[2]]],
+      ftags: state.ftags,
+      serve: state.serve,
+      story: state.story,
+      awards: state.awards.filter(Boolean),
+    }}, '*');
+  }
+
+  // 表单绑定
+  function bindInputs(){
+    document.querySelectorAll('[data-k]').forEach(el=>{ el.value = el.id==='f_awards'? state.awards.join('\n') : state[el.dataset.k]; el.addEventListener('input',()=>{ const k=el.dataset.k; state[k]= k==='awards'? el.value.split('\n').map(s=>s.trim()).filter(Boolean): el.value; push(); }); });
+    document.querySelectorAll('[data-taste]').forEach(el=>{ el.value=state.taste[+el.dataset.taste]||''; el.addEventListener('input',()=>{ state.taste[+el.dataset.taste]=el.value; push(); }); });
+    document.querySelectorAll('[data-serve]').forEach(el=>{ el.value=state.serve[el.dataset.serve]||''; el.addEventListener('input',()=>{ state.serve[el.dataset.serve]=el.value; push(); }); });
+  }
+  function copyLink(){ toast('已复制：https://jiu.51yanmei.com/product/8ae93029…'); }
+
+  // 初始化
+  renderGallery(); renderFtags(); bindInputs();
+  document.getElementById('autoGrid').innerHTML = AUTO.map(([k,v])=>`<div class="a"><span class="k">${k}</span><span class="v ${/批次|日期/.test(k)?'mono':''}">${v}</span></div>`).join('');
+  document.getElementById('preview').addEventListener('load', push);
+
+  // ===== 主题 / 导航 / 菜单 =====
+  document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeMenus(); });
+  </script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/public-product.html b/.superpowers/prototype/screens/public-product.html
new file mode 100644
index 0000000..0fe2b1a
--- /dev/null
+++ b/.superpowers/prototype/screens/public-product.html
@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>茅台 飞天 53° · 鼎晟酒行</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--page); display:flex; justify-content:center; padding:0 0 28px; transition:background-color .28s; -webkit-font-smoothing:antialiased;}
+  body.embed{padding:0; background:var(--bg);}
+
+  /* 主题切换器（右上角悬浮；嵌入预览时隐藏） */
+  .theme-switch{position:fixed; top:14px; right:14px; display:flex; gap:5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; box-shadow:var(--sh-2); z-index:var(--z-header);}
+  .theme-switch button{width:28px; height:28px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--muted); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:var(--font); transition:.15s;}
+  .theme-switch button:hover{background:var(--bg);}
+  .theme-switch button.on{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}
+  body.embed .theme-switch, body.embed .ds-fab{display:none;}
+
+  .page{width:100%; max-width:480px; min-height:100vh; background:var(--bg); box-shadow:var(--sh-3);}
+  body.embed .page{box-shadow:none; max-width:none;}
+
+  /* 门店顶部标识条 */
+  .shop-bar{display:flex; align-items:center; gap:11px; padding:14px 18px; background:var(--top-bg); color:var(--top-fg);}
+  .shop-bar .mono{width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; flex:none; background:linear-gradient(135deg,var(--brand-mid),var(--brand-deep));}
+  .shop-bar .sn{font-size:var(--fs-title); font-weight:700; line-height:1.3;}
+  .shop-bar .se{font-size:var(--fs-xs); color:var(--top-faint); margin-top:1px;}
+  .shop-bar .seal{margin-left:auto; display:flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--top-faint);}
+  .shop-bar .seal svg{width:14px; height:14px; stroke:var(--top-faint); stroke-width:1.8;}
+
+  /* 商品 hero */
+  .hero{padding:22px 18px 6px; text-align:center;}
+  .hero .img{width:172px; height:212px; margin:0 auto; border-radius:var(--r-lg); background:linear-gradient(160deg,var(--brand50),var(--surface)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--brand400); position:relative; overflow:hidden;}
+  .hero .img img{width:100%; height:100%; object-fit:cover;}
+  .hero .img svg{width:58px; height:58px; stroke-width:1.3; opacity:.85;}
+  .hero .img .ph{position:absolute; bottom:9px; font-size:var(--fs-xs); color:var(--faint);}
+  /* 缩略图条 */
+  .thumbs{display:flex; gap:8px; justify-content:center; margin-top:12px;}
+  .thumbs .tb{width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--faint); overflow:hidden;}
+  .thumbs .tb.on{border-color:var(--primary); box-shadow:0 0 0 2px var(--brand50);}
+  .thumbs .tb img{width:100%; height:100%; object-fit:cover;}
+  .thumbs .tb svg{width:18px; height:18px; stroke-width:1.5;}
+  .hero .pname{font-size:var(--fs-h1); font-weight:800; color:var(--heading); margin-top:16px; letter-spacing:.3px;}
+  .hero .psub{font-size:var(--fs-body); color:var(--muted); margin-top:6px;}
+  /* 关键属性 chips */
+  .keychips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:13px;}
+  .keychips .kc{display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 11px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); font-size:var(--fs-sm); color:var(--text); font-weight:600;}
+  .keychips .kc b{color:var(--primary); font-family:var(--font-mono);}
+
+  /* 区块标题 */
+  .sec-h{font-size:var(--fs-sm); font-weight:700; color:var(--muted); letter-spacing:.6px; margin:24px 18px 8px; display:flex; align-items:center; gap:7px;}
+  .sec-h svg{width:15px; height:15px; stroke-width:1.9; color:var(--brand400);}
+  .sec{margin:0 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;}
+  .sec.pad{padding:15px 16px;}
+
+  /* 商品介绍 / 品牌故事 段落 */
+  .prose{font-size:var(--fs-body); color:var(--text); line-height:1.85;}
+  .prose.muted{color:var(--muted);}
+
+  /* 品鉴笔记 */
+  .taste{display:flex; flex-direction:column;}
+  .taste .tr{display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border-subtle);}
+  .taste .tr:last-child{border-bottom:none;}
+  .taste .tr .ti{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none;}
+  .taste .tr .ti svg{width:16px; height:16px; stroke-width:1.8;}
+  .taste .tr .tc .tl{font-size:var(--fs-sm); color:var(--muted); font-weight:600;}
+  .taste .tr .tc .tv{font-size:var(--fs-body); color:var(--text); line-height:1.7; margin-top:3px;}
+  /* 风味标签 */
+  .ftags{display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px 2px;}
+  .ftag{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); font-size:var(--fs-sm); font-weight:600;}
+
+  /* 适饮建议 */
+  .serve{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-subtle);}
+  .serve .sv{background:var(--surface); padding:13px 16px;}
+  .serve .sv.full{grid-column:1 / -1;}
+  .serve .sv .sl{font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:5px;}
+  .serve .sv .sl svg{width:13px; height:13px; stroke-width:1.9;}
+  .serve .sv .sx{font-size:var(--fs-body); color:var(--heading); font-weight:600; margin-top:5px;}
+
+  /* 规格参数表 */
+  .spec .r{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body);}
+  .spec .r:last-child{border-bottom:none;}
+  .spec .r .k{color:var(--muted); flex:none;}
+  .spec .r .v{color:var(--text); font-weight:600; text-align:right;}
+  .spec .r .v.mono{font-family:var(--font-mono);}
+
+  /* 获奖 */
+  .awards{display:flex; flex-direction:column; gap:0;}
+  .awards .aw{display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-body);}
+  .awards .aw:last-child{border-bottom:none;}
+  .awards .aw .am{width:28px; height:28px; border-radius:50%; background:var(--warn-bg); color:var(--warn); display:flex; align-items:center; justify-content:center; flex:none;}
+  .awards .aw .am svg{width:16px; height:16px; stroke-width:1.8;}
+
+  /* 防伪验证（缩为一块） */
+  .verify{margin:0 18px; background:var(--success-bg); border:1px solid color-mix(in srgb,var(--success) 30%,transparent); border-radius:var(--r-lg); padding:14px 16px; display:flex; align-items:center; gap:12px;}
+  .verify .shield{width:38px; height:38px; border-radius:50%; background:var(--success); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
+  .verify .shield svg{width:21px; height:21px; stroke:#fff; stroke-width:2.2;}
+  .verify .vt{font-size:var(--fs-body); font-weight:800; color:var(--success);}
+  .verify .vs{font-size:var(--fs-xs); color:var(--success); opacity:.85; margin-top:2px;}
+  .verify .vchev{margin-left:auto; color:var(--success);}
+
+  .pfoot{margin-top:24px; padding:20px 18px 6px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;}
+  .pfoot .by{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--muted);}
+  .pfoot .by .mk{width:24px; height:24px;}
+  .pfoot .by b{color:var(--heading); font-weight:700;}
+  .pfoot .fine{font-size:var(--fs-xs); color:var(--faint);}
+
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  .hide{display:none !important;}
+</style>
+</head>
+<body>
+  <div class="theme-switch" id="themeSwitch">
+    <button data-t="a" title="经典蓝">A</button>
+    <button data-t="b" title="琥珀">B</button>
+    <button data-t="c" title="酒窖">C</button>
+  </div>
+
+  <div class="page">
+    <!-- 门店标识（派生自门店） -->
+    <div class="shop-bar">
+      <div class="mono">鼎</div>
+      <div>
+        <div class="sn">鼎晟酒行</div>
+        <div class="se">DINGSHENG · 授权正品门店</div>
+      </div>
+      <div class="seal"><svg viewBox="0 0 24 24"><use href="#i-shield-2"/></svg>防伪溯源</div>
+    </div>
+
+    <!-- 商品 hero -->
+    <div class="hero">
+      <div class="img" id="pImg">
+        <svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg>
+        <span class="ph">商品图</span>
+      </div>
+      <div class="thumbs" id="pThumbs"></div>
+      <div class="pname" id="pName">茅台 飞天 53°</div>
+      <div class="psub" id="pSub">飞天系列 · 酱香型白酒 · 500ml × 6</div>
+      <div class="keychips" id="pChips"></div>
+    </div>
+
+    <!-- 商品介绍（商家录入） -->
+    <div id="secDesc">
+      <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg>商品介绍</div>
+      <div class="sec pad"><div class="prose" id="pDesc"></div></div>
+    </div>
+
+    <!-- 品鉴笔记（商家录入） -->
+    <div id="secTaste">
+      <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-ic29"/></svg>品鉴笔记</div>
+      <div class="sec">
+        <div class="taste" id="pTaste"></div>
+        <div class="ftags" id="pFtags"></div>
+      </div>
+    </div>
+
+    <!-- 适饮建议（商家录入） -->
+    <div id="secServe">
+      <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-ic35"/></svg>适饮建议</div>
+      <div class="sec"><div class="serve" id="pServe"></div></div>
+    </div>
+
+    <!-- 规格参数（派生） -->
+    <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg>规格参数</div>
+    <div class="sec spec" id="pSpec"></div>
+
+    <!-- 品牌故事 / 工艺（商家录入） -->
+    <div id="secStory">
+      <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-ic36"/></svg>品牌故事 · 工艺</div>
+      <div class="sec pad"><div class="prose muted" id="pStory"></div></div>
+    </div>
+
+    <!-- 获奖荣誉（商家录入，可空） -->
+    <div id="secAwards">
+      <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-ic32"/></svg>获奖荣誉</div>
+      <div class="sec awards" id="pAwards"></div>
+    </div>
+
+    <!-- 防伪验证（派生，缩为一块） -->
+    <div class="sec-h"><svg viewBox="0 0 24 24"><use href="#i-shield"/></svg>防伪验证</div>
+    <a class="verify" href="#" onclick="return false">
+      <div class="shield"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg></div>
+      <div>
+        <div class="vt">已通过岩美防伪验证</div>
+        <div class="vs">门店授权正品 · 批次 MT-FT-2024-08-A0931 · 扫码已上链</div>
+      </div>
+      <svg class="vchev" width="18" height="18" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-right"/></svg>
+    </a>
+
+    <div class="pfoot">
+      <div class="by"><span class="mk"><svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>由 <b>岩美酒库</b> 提供技术支持</div>
+      <div class="fine">YANMEI TECH · 酒水进销存与防伪溯源</div>
+    </div>
+  </div>
+
+<script>
+  // ---- 默认数据（派生字段来自商品/门店；merchant 字段为商家录入示例） ----
+  const DATA = {
+    // 派生
+    name:'茅台 飞天 53°', sub:'飞天系列 · 酱香型白酒 · 500ml × 6',
+    aroma:'酱香型', abv:'53', net:'500ml',
+    spec:[['系列','飞天'],['规格','500ml × 6'],['净含量','500ml'],['酒精度','53% vol'],['香型','酱香型'],['品牌','贵州茅台'],['产地','贵州 · 仁怀市茅台镇'],['原料','高粱、小麦、水'],['产品标准号','GB/T 18356'],['生产日期','2024-03-18'],['批次号','MT-FT-2024-08-A0931'],['保质期','适宜长期存放'],['储存方式','阴凉干燥、避光直立']],
+    // 商家录入
+    img:'', thumbs:[],
+    desc:'茅台酒以本地优质糯高粱为原料，经传统固态发酵、九次蒸煮、八次发酵、七次取酒，再经三年以上陶坛窖藏精心勾调而成。酒体醇厚、酱香突出、空杯留香持久，是宴请与馈赠之选。',
+    taste:[['香气','酱香纯正、幽雅细腻，焦香与花果香交织，空杯留香持久。'],['口感','入口醇厚饱满、绵柔甘冽，层次丰富，酱香与陈香协调。'],['尾韵','回味悠长、余味净爽，喉韵舒适不刺激。']],
+    ftags:['酱香浓郁','空杯留香','绵柔回甘','陈香协调'],
+    serve:{ scene:'商务宴请 · 节庆送礼 · 收藏', pair:'红烧肉、酱牛肉、卤味、川菜', temp:'18–22℃ 常温饮用' },
+    story:'贵州茅台酒产于赤水河畔的茅台镇，依托独特的地理气候与微生物环境，沿用端午制曲、重阳下沙的古法工艺，一个生产周期长达一年，再经数年窖藏方得佳酿，被誉为中国酱香型白酒的典范。',
+    awards:['1915 巴拿马万国博览会金奖','历届国家名酒评选金质奖'],
+  };
+
+  function setImg(el, url){
+    if(url){ el.innerHTML = `<img src="${url}" alt="">`; }
+    else { el.innerHTML = `<svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="ph">商品图</span>`; }
+  }
+  function esc(s){ return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function toggle(id, show){ document.getElementById(id).classList.toggle('hide', !show); }
+
+  function render(d){
+    document.getElementById('pName').textContent = d.name;
+    document.getElementById('pSub').textContent = d.sub;
+    setImg(document.getElementById('pImg'), d.img);
+    // 缩略图
+    const thumbs = [d.img, ...(d.thumbs||[])].filter(Boolean);
+    document.getElementById('pThumbs').innerHTML = thumbs.length>1 ? thumbs.map((u,i)=>`<div class="tb ${i===0?'on':''}"><img src="${u}" alt=""></div>`).join('') : '';
+    // 关键属性 chips
+    document.getElementById('pChips').innerHTML =
+      `<span class="kc">香型 <b>${esc(d.aroma)}</b></span><span class="kc">酒精度 <b>${esc(d.abv)}°</b></span><span class="kc">净含量 <b>${esc(d.net)}</b></span>`;
+    // 商品介绍
+    toggle('secDesc', !!(d.desc||'').trim());
+    document.getElementById('pDesc').textContent = d.desc||'';
+    // 品鉴
+    const hasTaste = (d.taste||[]).some(t=>t[1]&&t[1].trim()) || (d.ftags||[]).length;
+    toggle('secTaste', !!hasTaste);
+    const TI = { '香气':'<path d="M12 2C8 7 7 9 7 13a5 5 0 0010 0c0-4-1-6-5-11z"/>', '口感':'<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01M15 9h.01"/>', '尾韵':'<path d="M3 12h4l3 8 4-16 3 8h4"/>' };
+    document.getElementById('pTaste').innerHTML = (d.taste||[]).filter(t=>t[1]&&t[1].trim()).map(([l,v])=>
+      `<div class="tr"><div class="ti"><svg viewBox="0 0 24 24">${TI[l]||TI['口感']}</svg></div><div class="tc"><div class="tl">${esc(l)}</div><div class="tv">${esc(v)}</div></div></div>`).join('');
+    document.getElementById('pFtags').innerHTML = (d.ftags||[]).map(t=>`<span class="ftag">${esc(t)}</span>`).join('');
+    document.getElementById('pFtags').classList.toggle('hide', !(d.ftags||[]).length);
+    // 适饮
+    const s = d.serve||{};
+    const hasServe = (s.scene||s.pair||s.temp||'').trim?.() || s.scene||s.pair||s.temp;
+    toggle('secServe', !!(s.scene||s.pair||s.temp));
+    document.getElementById('pServe').innerHTML =
+      (s.scene?`<div class="sv full"><div class="sl"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg>适饮场景</div><div class="sx">${esc(s.scene)}</div></div>`:'') +
+      (s.pair?`<div class="sv"><div class="sl"><svg viewBox="0 0 24 24"><use href="#i-ic38"/></svg>搭配建议</div><div class="sx">${esc(s.pair)}</div></div>`:'') +
+      (s.temp?`<div class="sv"><div class="sl"><svg viewBox="0 0 24 24"><use href="#i-ic39"/></svg>最佳温度</div><div class="sx">${esc(s.temp)}</div></div>`:'');
+    // 规格参数
+    document.getElementById('pSpec').innerHTML = (d.spec||[]).map(([k,v])=>`<div class="r"><span class="k">${esc(k)}</span><span class="v ${/批次|标准号|日期/.test(k)?'mono':''}">${esc(v)}</span></div>`).join('');
+    // 品牌故事
+    toggle('secStory', !!(d.story||'').trim());
+    document.getElementById('pStory').textContent = d.story||'';
+    // 获奖
+    toggle('secAwards', !!(d.awards||[]).length);
+    document.getElementById('pAwards').innerHTML = (d.awards||[]).map(a=>`<div class="aw"><div class="am"><svg viewBox="0 0 24 24"><use href="#i-ic40"/></svg></div><div>${esc(a)}</div></div>`).join('');
+  }
+
+  let STATE = JSON.parse(JSON.stringify(DATA));
+  render(STATE);
+
+  // 预览接口：编辑器通过 postMessage 推送 merchant 字段
+  window.addEventListener('message', e=>{
+    const d = e.data; if(!d || d.type!=='ympreview') return;
+    Object.assign(STATE, d.fields||{});
+    render(STATE);
+  });
+
+  // 嵌入模式（编辑器 iframe）
+  const qp = new URLSearchParams(location.search);
+  if(qp.get('embed')==='1') document.body.classList.add('embed');
+
+  function setTheme(t){ document.documentElement.dataset.theme=t; localStorage.setItem('jiu-theme',t); document.querySelectorAll('#themeSwitch button').forEach(b=>b.classList.toggle('on',b.dataset.t===t)); }
+  document.querySelectorAll('#themeSwitch button').forEach(b=>b.onclick=()=>setTheme(b.dataset.t));
+  setTheme(localStorage.getItem('jiu-theme')||'a');
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/public-shop.html b/.superpowers/prototype/screens/public-shop.html
new file mode 100644
index 0000000..d891918
--- /dev/null
+++ b/.superpowers/prototype/screens/public-shop.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>鼎晟酒行 · 在售商品</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--page); display:flex; justify-content:center; padding:0 0 28px; transition:background-color .28s; -webkit-font-smoothing:antialiased;}
+
+  /* 主题切换器（右上角悬浮） */
+  .theme-switch{position:fixed; top:14px; right:14px; display:flex; gap:5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; box-shadow:var(--sh-2); z-index:var(--z-header);}
+  .theme-switch button{width:28px; height:28px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--muted); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:var(--font); transition:.15s;}
+  .theme-switch button:hover{background:var(--bg);}
+  .theme-switch button.on{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}
+
+  .page{width:100%; max-width:480px; min-height:100vh; background:var(--bg); box-shadow:var(--sh-3);}
+
+  /* 门店头部 */
+  .shop-head{background:linear-gradient(155deg,var(--side-bg),var(--side-active-bg)); color:var(--side-active-fg); padding:22px 18px 20px;}
+  .shop-head .top{display:flex; align-items:center; gap:12px;}
+  .shop-head .mono{width:48px; height:48px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:22px; flex:none; background:linear-gradient(135deg,var(--brand-mid),var(--brand-deep)); box-shadow:var(--sh-1);}
+  .shop-head .name{font-size:var(--fs-h1); font-weight:800; letter-spacing:.4px;}
+  .shop-head .verified{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--side-fg); margin-top:3px;}
+  .shop-head .verified svg{width:13px; height:13px; stroke:var(--side-fg); stroke-width:2;}
+  .shop-head .desc{font-size:var(--fs-sm); color:var(--side-fg); line-height:1.7; margin-top:14px;}
+  .shop-head .meta{display:flex; flex-direction:column; gap:7px; margin-top:13px;}
+  .shop-head .mrow{display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--side-fg);}
+  .shop-head .mrow svg{width:15px; height:15px; stroke:var(--side-fg); stroke-width:1.8; flex:none; opacity:.9;}
+  .shop-head .call{display:inline-flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; height:40px; padding:0 18px; border-radius:var(--r-md); background:var(--hero-glass); border:1px solid var(--hero-glass-strong); color:#fff; font-size:var(--fs-body); font-weight:600; cursor:pointer; text-decoration:none; transition:.15s; width:100%;}
+  .shop-head .call:hover{background:var(--hero-glass-strong);}
+  .shop-head .call svg{width:16px; height:16px; stroke:#fff; stroke-width:1.9;}
+
+  /* 搜索 + 标题栏 */
+  .catalog-bar{padding:16px 18px 6px; position:sticky; top:0; background:var(--bg); z-index:var(--z-sticky);}
+  .catalog-bar .searchbox{height:40px; background:var(--surface);}
+  .ctitle{display:flex; align-items:baseline; gap:8px; padding:14px 18px 4px;}
+  .ctitle b{font-size:var(--fs-h2); color:var(--heading); font-weight:700;}
+  .ctitle span{font-size:var(--fs-sm); color:var(--muted);}
+
+  /* 商品网格 2 列 */
+  .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:6px 18px 8px;}
+  .pcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:border-color .15s, box-shadow .15s; text-decoration:none; color:inherit; display:flex; flex-direction:column;}
+  .pcard:hover{border-color:var(--brand400); box-shadow:var(--sh-2);}
+  .pcard .img{height:118px; background:linear-gradient(160deg,var(--brand50),var(--surface)); display:flex; align-items:center; justify-content:center; color:var(--brand400); position:relative;}
+  .pcard .img svg{width:40px; height:40px; stroke-width:1.3; opacity:.8;}
+  .pcard .img .b{position:absolute; top:8px; right:8px;}
+  .pcard .body{padding:11px 12px 13px; display:flex; flex-direction:column; flex:1;}
+  .pcard .pn{font-size:var(--fs-body); font-weight:700; color:var(--heading); line-height:1.35;}
+  .pcard .ps{font-size:var(--fs-xs); color:var(--muted); margin-top:4px;}
+  .pcard .price{margin-top:auto; padding-top:10px; display:flex; align-items:baseline; gap:2px;}
+  .pcard .price .cur{font-size:var(--fs-sm); color:var(--accent); font-weight:700;}
+  .pcard .price .amt{font-size:var(--fs-h2); color:var(--accent); font-weight:800; font-family:var(--font-mono); letter-spacing:.2px;}
+  .pcard .price .unit{font-size:var(--fs-xs); color:var(--faint); margin-left:2px;}
+
+  /* 页脚 */
+  .pfoot{margin-top:18px; padding:22px 18px 6px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;}
+  .pfoot .by{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--muted);}
+  .pfoot .by .mk{width:24px; height:24px;}
+  .pfoot .by b{color:var(--heading); font-weight:700;}
+  .pfoot .fine{font-size:var(--fs-xs); color:var(--faint);}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+  <div class="theme-switch" id="themeSwitch">
+    <button data-t="a" title="经典蓝">A</button>
+    <button data-t="b" title="琥珀">B</button>
+    <button data-t="c" title="酒窖">C</button>
+  </div>
+
+  <div class="page">
+    <!-- 门店头部 -->
+    <div class="shop-head">
+      <div class="top">
+        <div class="mono">鼎</div>
+        <div>
+          <div class="name">鼎晟酒行</div>
+          <div class="verified">
+            <svg viewBox="0 0 24 24"><use href="#i-shield"/></svg>
+            岩美认证门店
+          </div>
+        </div>
+      </div>
+      <div class="desc">十年老店，专营名优白酒与进口洋酒，正品保障、明码标价、支持扫码防伪溯源。</div>
+      <div class="meta">
+        <div class="mrow"><svg viewBox="0 0 24 24"><use href="#i-ic41"/></svg>江苏省南京市建邺区江东中路 88 号</div>
+        <div class="mrow"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg>营业时间 09:00 - 21:30（全年无休）</div>
+      </div>
+      <a class="call" href="tel:02583331234">
+        <svg viewBox="0 0 24 24"><use href="#i-ic43"/></svg>
+        联系门店 · 025-8333 1234
+      </a>
+    </div>
+
+    <!-- 搜索 -->
+    <div class="catalog-bar">
+      <div class="searchbox">
+        <svg viewBox="0 0 24 24"><use href="#i-search"/></svg>
+        <input placeholder="搜索商品 · 茅台 / wutai / wlj">
+      </div>
+    </div>
+
+    <div class="ctitle"><b>在售商品</b><span>共 8 款白酒</span></div>
+
+    <!-- 商品网格 -->
+    <div class="grid">
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-在售">在售</span></span></div>
+        <div class="body"><div class="pn">茅台 飞天 53°</div><div class="ps">飞天系列 · 500ml × 6</div><div class="price"><span class="cur">¥</span><span class="amt">2,680</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-在售">在售</span></span></div>
+        <div class="body"><div class="pn">五粮液 普五 52°</div><div class="ps">第八代 · 500ml × 6</div><div class="price"><span class="cur">¥</span><span class="amt">1,099</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-在售">在售</span></span></div>
+        <div class="body"><div class="pn">国窖 1573 52°</div><div class="ps">浓香型 · 500ml</div><div class="price"><span class="cur">¥</span><span class="amt">980</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-缺货">缺货</span></span></div>
+        <div class="body"><div class="pn">剑南春 水晶剑 52°</div><div class="ps">浓香型 · 500ml × 6</div><div class="price"><span class="cur">¥</span><span class="amt">468</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-在售">在售</span></span></div>
+        <div class="body"><div class="pn">青花郎 53°</div><div class="ps">酱香型 · 500ml</div><div class="price"><span class="cur">¥</span><span class="amt">920</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-在售">在售</span></span></div>
+        <div class="body"><div class="pn">汾酒 青花 20 53°</div><div class="ps">清香型 · 500ml</div><div class="price"><span class="cur">¥</span><span class="amt">388</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-在售">在售</span></span></div>
+        <div class="body"><div class="pn">洋河 梦之蓝 M6+</div><div class="ps">浓香型 · 550ml</div><div class="price"><span class="cur">¥</span><span class="amt">628</span><span class="unit">/瓶</span></div></div>
+      </a>
+      <a class="pcard" href="public-product.html">
+        <div class="img"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span class="b"><span class="badge b-缺货">缺货</span></span></div>
+        <div class="body"><div class="pn">习酒 窖藏 1988</div><div class="ps">酱香型 · 500ml</div><div class="price"><span class="cur">¥</span><span class="amt">658</span><span class="unit">/瓶</span></div></div>
+      </a>
+    </div>
+
+    <!-- 页脚 -->
+    <div class="pfoot">
+      <div class="by">
+        <span class="mk"><svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
+        由 <b>岩美酒库</b> 提供技术支持
+      </div>
+      <div class="fine">YANMEI TECH · 参考价仅供参考，以门店实际报价为准</div>
+    </div>
+  </div>
+
+<script>
+  function setTheme(t){ document.documentElement.dataset.theme=t; localStorage.setItem('jiu-theme',t); document.querySelectorAll('#themeSwitch button').forEach(b=>b.classList.toggle('on',b.dataset.t===t)); }
+  document.querySelectorAll('#themeSwitch button').forEach(b=>b.onclick=()=>setTheme(b.dataset.t));
+  setTheme(localStorage.getItem('jiu-theme')||'a');
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/register.html b/.superpowers/prototype/screens/register.html
new file mode 100644
index 0000000..1867b2f
--- /dev/null
+++ b/.superpowers/prototype/screens/register.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>注册门店 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  body{margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--page); display:flex; align-items:center; justify-content:center; padding:24px; transition:background-color .28s;}
+
+  .theme-switch{position:fixed; top:18px; right:20px; display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; box-shadow:var(--sh-1); z-index:var(--z-shell-scrim);}
+  .theme-switch button{width:30px; height:30px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--muted); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:var(--font); transition:.15s;}
+  .theme-switch button:hover{background:var(--bg);}
+  .theme-switch button.on{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}
+
+  .auth{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); width:100%; max-width:940px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3);}
+
+  /* 左：品牌面板 */
+  .brand{background:linear-gradient(150deg,var(--side-bg),var(--side-active-bg)); color:var(--side-active-fg); padding:46px 38px; display:flex; flex-direction:column; min-height:560px;}
+  .brand .mk{width:60px; height:60px;}
+  .brand .name{font-size:var(--fs-display); font-weight:800; letter-spacing:1px; margin:22px 0 8px;}
+  .brand .tag{font-size:var(--fs-body); color:var(--side-fg); line-height:1.7; max-width:260px;}
+  .steps{margin-top:36px; display:flex; flex-direction:column; gap:0;}
+  .step{display:flex; gap:13px; position:relative; padding-bottom:22px;}
+  .step:last-child{padding-bottom:0;}
+  .step:not(:last-child)::before{content:''; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--hero-glass);}
+  .step .si{width:29px; height:29px; border-radius:50%; background:var(--hero-glass); color:var(--side-active-fg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-body); flex:none; z-index:1;}
+  .step.done .si{background:var(--side-active-fg); color:var(--side-active-bg);}
+  .step .st{font-size:var(--fs-sm); line-height:1.45;}
+  .step .st b{display:block; color:var(--side-active-fg); font-weight:600; font-size:var(--fs-body);}
+  .step .st span{color:var(--side-fg);}
+
+  /* 右：表单 */
+  .form{padding:44px 42px; display:flex; flex-direction:column; justify-content:center;}
+  .form h1{margin:0 0 6px; font-size:var(--fs-h1); color:var(--heading); font-weight:700;}
+  .form .lead{margin:0 0 24px; font-size:var(--fs-sm); color:var(--muted);}
+  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
+  .form .field{margin-bottom:14px;}
+  .form .field.full{grid-column:1/-1;}
+  .hint{font-size:var(--fs-xs); color:var(--faint); margin-top:5px;}
+  .agree{display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-sm); color:var(--text); cursor:pointer; user-select:none; margin:6px 0 20px;}
+  .agree .box{width:18px; height:18px; border:1.5px solid var(--border); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--surface); flex:none; margin-top:1px; transition:.15s;}
+  .agree .box svg{width:13px; height:13px; stroke:var(--on-primary); stroke-width:2.4; opacity:0;}
+  .agree.on .box{background:var(--primary); border-color:var(--primary);}
+  .agree.on .box svg{opacity:1;}
+  .agree a{color:var(--primary); text-decoration:none;}
+  .form .btn.primary{width:100%; justify-content:center;}
+  .foot{margin-top:20px; text-align:center; font-size:var(--fs-sm); color:var(--muted);}
+  .foot a{color:var(--primary); text-decoration:none; font-weight:600;}
+
+  @media (max-width:760px){
+    .auth{grid-template-columns:1fr; max-width:480px;}
+    .brand{min-height:auto; padding:34px 32px;}
+    .steps{display:none;}
+    .form{padding:32px 30px;}
+    .grid2{grid-template-columns:1fr;}
+  }
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+</style>
+</head>
+<body>
+  <div class="theme-switch" id="themeSwitch">
+    <button data-t="a" title="经典蓝">A</button>
+    <button data-t="b" title="琥珀">B</button>
+    <button data-t="c" title="酒窖">C</button>
+  </div>
+
+  <div class="auth">
+    <div class="brand">
+      <span class="mk">
+        <svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg>
+      </span>
+      <div class="name">开通门店</div>
+      <div class="tag">几分钟创建你的酒水进销存门店，立即开始入库出库</div>
+      <div class="steps">
+        <div class="step done"><span class="si">1</span><div class="st"><b>填写门店信息</b><span>店名、编号与联系人</span></div></div>
+        <div class="step"><span class="si">2</span><div class="st"><b>创建管理员账号</b><span>用于登录与管理成员</span></div></div>
+        <div class="step"><span class="si">3</span><div class="st"><b>激活授权</b><span>输入兑换券，或先试用</span></div></div>
+      </div>
+    </div>
+
+    <div class="form">
+      <h1>注册新门店</h1>
+      <p class="lead">已有门店账号？<a href="login.html" style="font-weight:600;text-decoration:none">直接登录 →</a></p>
+
+      <div class="grid2">
+        <div class="field full"><label>门店名称 <span style="color:var(--danger)">*</span></label><input class="input" id="shopName" placeholder="例如 鼎晟酒行" value=""></div>
+        <div class="field"><label>门店编号</label><input class="input" id="shopCode" placeholder="留空自动分配"><div class="hint">用于登录与单据抬头</div></div>
+        <div class="field"><label>联系电话 <span style="color:var(--danger)">*</span></label><input class="input" id="phone" placeholder="11 位手机号"></div>
+        <div class="field full"><label>门店地址</label><input class="input" id="addr" placeholder="省 / 市 / 区 详细地址（选填）"></div>
+      </div>
+
+      <div style="height:1px;background:var(--border-subtle);margin:6px 0 16px"></div>
+
+      <div class="grid2">
+        <div class="field"><label>管理员姓名 <span style="color:var(--danger)">*</span></label><input class="input" id="adminName" placeholder="例如 王经理"></div>
+        <div class="field"><label>登录账号 <span style="color:var(--danger)">*</span></label><input class="input" id="adminUser" placeholder="字母 / 数字"></div>
+        <div class="field"><label>登录密码 <span style="color:var(--danger)">*</span></label><input class="input" id="pass" type="password" placeholder="至少 8 位"></div>
+        <div class="field"><label>确认密码 <span style="color:var(--danger)">*</span></label><input class="input" id="pass2" type="password" placeholder="再次输入"></div>
+        <div class="field full"><label>授权兑换券</label><input class="input" id="voucher" placeholder="有兑换券请输入，激活授权时长（选填）"><div class="hint">留空将以试用模式创建，可在「系统设置 · 授权兑换券」随时激活</div></div>
+      </div>
+
+      <div class="agree on" id="agree" onclick="this.classList.toggle('on')">
+        <span class="box"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg></span>
+        <span>我已阅读并同意 <a onclick="event.stopPropagation();toast('服务条款（原型）')">服务条款</a> 与 <a onclick="event.stopPropagation();toast('隐私政策（原型）')">隐私政策</a></span>
+      </div>
+
+      <div class="btn primary lg" onclick="submitReg()">创建门店并进入</div>
+      <div class="foot">创建即代表你将成为该门店的管理员</div>
+    </div>
+  </div>
+
+  <div class="toast" id="toast"></div>
+
+<script>
+  const THEMES={a:'经典蓝',b:'琥珀',c:'酒窖'};
+  function setTheme(t){ document.documentElement.dataset.theme=t; localStorage.setItem('jiu-theme',t); document.querySelectorAll('#themeSwitch button').forEach(b=>b.classList.toggle('on',b.dataset.t===t)); }
+  document.querySelectorAll('#themeSwitch button').forEach(b=>b.onclick=()=>setTheme(b.dataset.t));
+  let toastT; function toast(m){ const t=document.getElementById('toast'); t.textContent=m; t.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>t.classList.remove('show'),2200); }
+
+  function submitReg(){
+    const v=id=>document.getElementById(id).value.trim();
+    if(!v('shopName')){ toast('请填写门店名称'); return; }
+    if(!v('phone')){ toast('请填写联系电话'); return; }
+    if(!v('adminName')||!v('adminUser')){ toast('请填写管理员姓名与登录账号'); return; }
+    if(!v('pass')||v('pass').length<8){ toast('密码至少 8 位'); return; }
+    if(v('pass')!==v('pass2')){ toast('两次密码不一致'); return; }
+    if(!document.getElementById('agree').classList.contains('on')){ toast('请先同意服务条款与隐私政策'); return; }
+    toast('门店创建成功，正在进入…（原型）');
+    setTimeout(()=>location.href='inventory.html',900);
+  }
+  setTheme(localStorage.getItem('jiu-theme')||'a');
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/settings.html b/.superpowers/prototype/screens/settings.html
new file mode 100644
index 0000000..4bfb286
--- /dev/null
+++ b/.superpowers/prototype/screens/settings.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>系统设置 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== App-shell（沿用 inventory.html） ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+
+  /* ====== 设置：左子导航 + 右内容 ====== */
+  .settings{display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:start;}
+  .subnav{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:8px; transition:background-color .28s,border-color .28s;}
+  .subnav .sn{display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:var(--r-md); font-size:var(--fs-body); color:var(--text); cursor:pointer; transition:.15s; margin-bottom:2px;}
+  .subnav .sn svg{width:17px; height:17px; stroke-width:1.7; color:var(--muted); flex:none;}
+  .subnav .sn:hover{background:var(--bg);}
+  .subnav .sn.on{background:var(--brand50); color:var(--primary); font-weight:600;}
+  .subnav .sn.on svg{color:var(--primary);}
+
+  .panel{display:none;}
+  .panel.on{display:block;}
+  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:18px; transition:background-color .28s,border-color .28s;}
+  .card h2{margin:0 0 4px; font-size:var(--fs-h2); color:var(--heading);}
+  .card .desc{margin:0 0 18px; font-size:var(--fs-sm); color:var(--muted);}
+  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:620px;}
+  .form-grid .field.full{grid-column:1 / -1;}
+  .form-actions{display:flex; gap:10px; margin-top:20px;}
+
+  /* 用户管理徽章 */
+  .b-管理员{background:var(--info-soft); color:var(--primary);}
+  .b-普通{background:var(--ok-soft); color:var(--success);}
+  .b-只读{background:var(--warn-bg); color:var(--warn);}
+  .b-启用{background:var(--success-bg); color:var(--success);}
+  .b-停用{background:var(--danger-bg); color:var(--danger);}
+
+  /* 授权兑换券 */
+  .lic{display:flex; gap:24px; flex-wrap:wrap; align-items:center; padding:18px 20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); margin-bottom:20px;}
+  .lic .stat{flex:none;}
+  .lic .stat .t{font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
+  .lic .stat .v{font-size:24px; font-weight:700; color:var(--heading); font-family:var(--font-mono); letter-spacing:.3px;}
+  .lic .stat .v.warn{color:var(--warn);}
+  .lic .ico{width:46px; height:46px; border-radius:var(--r-md); background:var(--ok-soft); color:var(--success); display:flex; align-items:center; justify-content:center; margin-left:auto; flex:none;}
+  .lic .ico svg{width:24px; height:24px; stroke-width:1.7;}
+  .redeem{display:flex; gap:10px; max-width:520px; align-items:flex-end;}
+  .redeem .field{flex:1;}
+
+  /* 主题卡 */
+  .theme-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:620px; margin-bottom:22px;}
+  .tcard{border:1.5px solid var(--border); border-radius:var(--r-lg); padding:14px; cursor:pointer; transition:.15s; background:var(--surface);}
+  .tcard:hover{border-color:var(--brand400);}
+  .tcard.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+  .tcard .swatch{height:54px; border-radius:var(--r-md); margin-bottom:11px; display:flex; overflow:hidden; border:1px solid var(--border-subtle);}
+  .tcard .swatch span{flex:1;}
+  .tcard .nm{font-size:var(--fs-body); font-weight:600; color:var(--heading); display:flex; align-items:center; justify-content:space-between;}
+  .tcard .nm .ck{width:16px; height:16px; stroke:var(--primary); stroke-width:2.4; opacity:0;}
+  .tcard.on .nm .ck{opacity:1;}
+  .tcard .meta{font-size:var(--fs-xs); color:var(--muted); margin-top:3px;}
+  /* 三主题色板（固定 hex 仅用于预览缩略，不影响实际主题） */
+  .sw-a span:nth-child(1){background:#2563AC;} .sw-a span:nth-child(2){background:#163A6C;} .sw-a span:nth-child(3){background:#F5F7FA;} .sw-a span:nth-child(4){background:#8B2331;} /* ds-allow 主题色板预览：需展示各主题真实色 */
+  .sw-b span:nth-child(1){background:#F5A300;} .sw-b span:nth-child(2){background:#1A1A22;} .sw-b span:nth-child(3){background:#15151C;} .sw-b span:nth-child(4){background:#F87171;} /* ds-allow 主题色板预览 */
+  .sw-c span:nth-child(1){background:#7C1F2C;} .sw-c span:nth-child(2){background:#4A1420;} .sw-c span:nth-child(3){background:#FAF5EC;} .sw-c span:nth-child(4){background:#B5862F;} /* ds-allow 主题色板预览 */
+
+  @media (max-width:760px){
+    .settings{grid-template-columns:1fr;}
+    .form-grid{grid-template-columns:1fr;}
+    .theme-cards{grid-template-columns:1fr;}
+  }
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="settings"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head"><h1>系统设置</h1><span class="sub">门店配置 · 用户与授权 · 个性化偏好</span></div>
+
+      <div class="settings">
+        <div class="subnav">
+          <div class="sn on" data-p="store" onclick="showPanel('store')"><svg viewBox="0 0 24 24"><use href="#i-ic44"/></svg>门店信息</div>
+          <div class="sn" data-p="users" onclick="showPanel('users')"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg>用户管理</div>
+          <div class="sn" data-p="license" onclick="showPanel('license')"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg>授权兑换券</div>
+          <div class="sn" data-p="pref" onclick="showPanel('pref')"><svg viewBox="0 0 24 24"><use href="#i-ic46"/></svg>偏好设置</div>
+        </div>
+
+        <div>
+          <!-- 门店信息 -->
+          <div class="panel on" data-p="store">
+            <div class="card">
+              <h2>门店信息</h2>
+              <p class="desc">用于单据抬头、对账与多端展示</p>
+              <div class="form-grid">
+                <div class="field"><label>门店名称</label><input class="input" value="鼎晟酒行"></div>
+                <div class="field"><label>门店编号</label><input class="input" value="DSJH-001" readonly><div style="font-size:var(--fs-xs);color:var(--faint);margin-top:5px;display:flex;align-items:center;gap:5px"><svg width="12" height="12" viewBox="0 0 24 24" stroke-width="2" style="color:var(--faint)"><use href="#i-ic03"/></svg>系统分配，不可修改</div></div>
+                <div class="field"><label>联系电话</label><input class="input" value="0571-8888 6666"></div>
+                <div class="field"><label>微信</label><input class="input" value="dingsheng-wine" placeholder="微信号 / 客服微信"></div>
+                <div class="field full"><label>门店地址</label><input class="input" value="浙江省杭州市拱墅区运河路 168 号 1 幢"></div>
+              </div>
+              <div class="form-actions">
+                <div class="btn primary" onclick="toast('门店信息已保存 ✓')">保存</div>
+                <div class="btn ghost" onclick="toast('已撤销修改')">撤销</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 用户管理 -->
+          <div class="panel" data-p="users">
+            <div class="card">
+              <div style="display:flex;align-items:center;margin-bottom:14px">
+                <div><h2>用户管理</h2><p class="desc" style="margin:0">管理门店成员与权限角色</p></div>
+                <a class="btn primary sm" href="users.html" style="margin-left:auto;text-decoration:none"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>管理全部用户</a>
+              </div>
+              <div class="table">
+                <table>
+                  <thead><tr><th>用户</th><th>角色</th><th>状态</th><th class="act">操作</th></tr></thead>
+                  <tbody>
+                    <tr><td><div class="pname">王经理</div><div class="pcode">wang</div></td><td><span class="badge b-管理员">管理员</span></td><td><span class="badge b-启用">启用</span></td><td class="act"><div class="row-act"><svg viewBox="0 0 24 24" onclick="toast('编辑用户（原型）')"><use href="#i-edit"/></svg></div></td></tr>
+                    <tr><td><div class="pname">李采购</div><div class="pcode">li</div></td><td><span class="badge b-普通">普通</span></td><td><span class="badge b-启用">启用</span></td><td class="act"><div class="row-act"><svg viewBox="0 0 24 24" onclick="toast('编辑用户（原型）')"><use href="#i-edit"/></svg></div></td></tr>
+                    <tr><td><div class="pname">赵会计</div><div class="pcode">zhao</div></td><td><span class="badge b-只读">只读</span></td><td><span class="badge b-启用">启用</span></td><td class="act"><div class="row-act"><svg viewBox="0 0 24 24" onclick="toast('编辑用户（原型）')"><use href="#i-edit"/></svg></div></td></tr>
+                    <tr><td><div class="pname">钱仓管</div><div class="pcode">qian</div></td><td><span class="badge b-普通">普通</span></td><td><span class="badge b-停用">停用</span></td><td class="act"><div class="row-act"><svg viewBox="0 0 24 24" onclick="toast('编辑用户（原型）')"><use href="#i-edit"/></svg></div></td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <!-- 授权兑换券 -->
+          <div class="panel" data-p="license">
+            <div class="card">
+              <h2>授权兑换券</h2>
+              <p class="desc">本系统以「时长兑换券」授权，输入兑换券短码即可续期，无需订阅</p>
+              <div class="lic">
+                <div class="stat"><div class="t">授权到期日</div><div class="v">2026-09-16</div></div>
+                <div class="stat"><div class="t">剩余天数</div><div class="v warn">剩余 87 天</div></div>
+                <div class="ico"><svg viewBox="0 0 24 24"><use href="#i-ic23"/></svg></div>
+              </div>
+              <div class="redeem">
+                <div class="field"><label>兑换券短码</label><input class="input" id="voucher" placeholder="输入兑换券短码"></div>
+                <div class="btn primary" onclick="redeem()">兑换续期</div>
+              </div>
+              <p class="desc" style="margin:16px 0 0">没有兑换券？<a href="pricing.html" style="color:var(--primary);text-decoration:none;font-weight:600">购买授权时长 →</a></p>
+            </div>
+          </div>
+
+          <!-- 偏好设置 -->
+          <div class="panel" data-p="pref">
+            <div class="card">
+              <h2>偏好设置</h2>
+              <p class="desc">主题与默认值，仅影响当前账号在本端的体验</p>
+              <label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px;font-weight:600">主题选择</label>
+              <div class="theme-cards" id="themeCards">
+                <div class="tcard" data-t="a" onclick="pickTheme('a')"><div class="swatch sw-a"><span></span><span></span><span></span><span></span></div><div class="nm">A 经典蓝<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="meta">浅色 · 默认</div></div>
+                <div class="tcard" data-t="b" onclick="pickTheme('b')"><div class="swatch sw-b"><span></span><span></span><span></span><span></span></div><div class="nm">B 琥珀<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="meta">深色</div></div>
+                <div class="tcard" data-t="c" onclick="pickTheme('c')"><div class="swatch sw-c"><span></span><span></span><span></span><span></span></div><div class="nm">C 酒窖<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="meta">暖浅色</div></div>
+              </div>
+              <div class="field" style="max-width:300px"><label>默认仓库</label>
+                <div class="ctrl" onclick="openWarehouse(event)"><span id="whVal">主仓</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div>
+              </div>
+              <div class="form-actions">
+                <div class="btn primary" onclick="toast('偏好已保存 ✓')">保存</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+  /* 子导航切换 */
+  function showPanel(p){
+    document.querySelectorAll('.subnav .sn').forEach(e=>e.classList.toggle('on',e.dataset.p===p));
+    document.querySelectorAll('.panel').forEach(e=>e.classList.toggle('on',e.dataset.p===p));
+  }
+
+  /* Toast / Menu（沿用 inventory 模式） */
+
+  /* 用户菜单 */
+
+  /* 默认仓库下拉 */
+  function openWarehouse(e){ const cur=document.getElementById('whVal').textContent; openMenu(e.currentTarget,['主仓','二号仓','门店展厅','临时调拨仓'].map(v=>({v,label:v,sel:v===cur})),v=>{ document.getElementById('whVal').textContent=v; closeMenus(); }); }
+
+  /* 顶栏主题 pill */
+  function syncThemeCards(t){ document.querySelectorAll('.tcard').forEach(c=>c.classList.toggle('on',c.dataset.t===t)); }
+  /* 偏好设置主题卡 → 切换整站 */
+  function pickTheme(t){ setTheme(t); toast('已切换为 '+THEMES[t].name+' 主题'); }
+
+  /* 兑换券 */
+  function redeem(){ const v=document.getElementById('voucher').value.trim(); if(!v){ toast('请输入兑换券短码'); return;} document.getElementById('voucher').value=''; toast('兑换成功，已续期'); }
+
+  document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeMenus(); });
+
+  </script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/shell.js b/.superpowers/prototype/screens/shell.js
new file mode 100644
index 0000000..a4c49a0
--- /dev/null
+++ b/.superpowers/prototype/screens/shell.js
@@ -0,0 +1,113 @@
+// ============================================================
+// app-shell 单一真源 —— 顶栏 + 侧栏 + 主题/用户菜单 + 共享 openMenu/toast
+// 用法：<div class="top" data-shell-top data-active="inventory" [data-search]></div>
+//        <div class="body"><div class="side" id="side"></div><div class="main">…</div></div>
+//        末尾引入 <script src="shell.js"></script>（其余页面脚本可直接用全局 openMenu/closeMenus/toast）
+// 改顶栏/侧栏/主题/菜单 = 只改此文件。
+// ============================================================
+(function () {
+  const NAVS = [
+    { g: '单据' },
+    { k: 'stock-in', label: '入库管理', href: 'stock-in-list.html', d: 'M12 3v12 M8 11l4 4 4-4 M4 21h16' },
+    { k: 'stock-out', label: '出库管理', href: 'stock-out-list.html', d: 'M12 15V3 M8 7l4-4 4 4 M4 21h16' },
+    { g: '经营' },
+    { k: 'inventory', label: '库存管理', href: 'inventory.html', d: 'M3 7l9-4 9 4-9 4-9-4z M3 7v10l9 4 9-4V7 M12 11v10' },
+    { k: 'finance', label: '财务管理', href: 'finance.html', d: 'M3 5h18v14H3z M3 10h18' },
+    { k: 'partners', label: '往来单位', href: 'partners.html', d: 'M9 8a3 3 0 100-0.01 M3 20c0-3 3-5 6-5s6 2 6 5' },
+    { k: 'products', label: '基础数据', href: 'products.html', d: 'M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z' },
+    { g: '系统' },
+    { k: 'devices', label: '设备管理', href: 'devices.html', d: 'M4 4h16v12H4z M8 20h8 M12 16v4' },
+    { k: 'settings', label: '系统设置', href: 'settings.html', d: 'M12 9a3 3 0 100 6 3 3 0 000-6z M4 12h2 M18 12h2 M12 4v2 M12 18v2' },
+    { k: 'about', label: '关于我们', href: 'about.html', d: 'M12 16v-4 M12 8h.01 M12 3a9 9 0 100 18 9 9 0 000-18z' },
+  ];
+  const THEMES = { a: { name: '经典蓝' }, b: { name: '琥珀' }, c: { name: '酒窖' } };
+  // 侧栏导航图标（引用 icons.js sprite 的 Lucide 图标）
+  const NAV_ICON = { 'stock-in': 'i-download', 'stock-out': 'i-upload', inventory: 'i-box-2', finance: 'i-ic08', partners: 'i-ic56', products: 'i-ic57', devices: 'i-ic63', settings: 'i-gear', about: 'i-ic24' };
+
+  const BRAND = '<div class="brand-prod"><span class="prod-mk"><svg viewBox="0 0 64 64"><g stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3.4" fill="#C97B86"/></svg></span><span class="prod-nm">岩美酒库</span></div><span class="brand-sep"></span><div class="logo" title="当前门店"><span class="mk">鼎</span><span class="shop-nm">鼎晟酒行</span></div>';
+  const TOP_RIGHT = '<div class="top-right"><div class="theme-pill" id="themePill"><svg class="tp-shirt" width="15" height="15" viewBox="0 0 24 24" stroke-width="1.9"><use href="#i-shirt"/></svg><span id="themeName">经典蓝</span><svg width="12" height="12" viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div><div class="icon-btn" data-notify title="通知"><svg width="19" height="19" viewBox="0 0 24 24"><use href="#i-bell"/></svg></div></div>';
+
+  function navSvg(d) { return `<svg viewBox="0 0 24 24">${d.split(' M').map((p, i) => `<path d="${i ? 'M' + p : p}"/>`).join('')}</svg>`; }
+
+  // ---- 共享菜单 ----
+  let menuEl = null;
+  function closeMenus() { if (menuEl) { menuEl.remove(); menuEl = null; } }
+  function openMenu(t, items, onPick, cls, minW) {
+    closeMenus();
+    const r = t.getBoundingClientRect();
+    const w = Math.max(r.width, minW || 168);
+    menuEl = document.createElement('div'); menuEl.className = 'menu' + (cls ? ' ' + cls : '');
+    menuEl.style.left = Math.max(8, Math.min(r.left, window.innerWidth - w - 8)) + 'px';
+    menuEl.style.minWidth = w + 'px';
+    menuEl.innerHTML = items.map(it => {
+      const lead = it.sel ? '<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><path d="M5 12l5 5 9-9"/></svg>'
+        : it.icon ? `<svg class="mi-ic" viewBox="0 0 24 24"><use href="#${it.icon}"/></svg>`
+        : '<span style="width:16px"></span>';
+      return `<div class="menu-item ${it.sel ? 'sel' : ''}" data-v="${it.v}">${lead}${it.label}</div>`;
+    }).join('');
+    menuEl.querySelectorAll('.menu-item').forEach(el => el.onclick = e => { e.stopPropagation(); onPick(el.dataset.v); });
+    document.body.appendChild(menuEl);
+    // 空间不够则向上翻（如侧栏底部的用户菜单）
+    const h = menuEl.offsetHeight;
+    const below = r.bottom + 6, above = r.top - h - 6;
+    menuEl.style.top = (below + h > window.innerHeight && above > 6 ? above : below) + 'px';
+  }
+
+  // ---- toast（若页面无 #toast 自动注入） ----
+  let toastT;
+  function toast(m) {
+    let t = document.getElementById('toast');
+    if (!t) { t = document.createElement('div'); t.id = 'toast'; t.className = 'toast'; document.body.appendChild(t); }
+    t.textContent = m; t.classList.add('show'); clearTimeout(toastT); toastT = setTimeout(() => t.classList.remove('show'), 2200);
+  }
+
+  // ---- 主题 ----
+  function setTheme(t) {
+    document.documentElement.dataset.theme = t;
+    localStorage.setItem('jiu-theme', t);
+    const nm = document.getElementById('themeName'); if (nm) nm.textContent = THEMES[t].name;
+  }
+
+  function buildSide(active) {
+    let h = '';
+    for (const n of NAVS) {
+      if (n.g) { h += `<div class="nav-label">${n.g}</div>`; continue; }
+      h += `<a class="nav ${n.k === active ? 'active' : ''}" href="${n.href}"><svg viewBox="0 0 24 24"><use href="#${NAV_ICON[n.k] || 'i-ic24'}"/></svg>${n.label}</a>`;
+    }
+    h += '<div class="side-bottom"><div class="side-div"></div><div class="side-user" onclick="openUserMenu(event)"><div class="su-pic">王</div><div class="su-who"><b>王经理</b><span>鼎晟酒行 · 管理员</span></div><svg class="su-caret" viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>';
+    return h;
+  }
+  function openUserMenu(e) {
+    openMenu(e.currentTarget, [{ v: 'profile', label: '个人设置', icon: 'i-ic37' }, { v: 'logout', label: '退出登录', icon: 'i-log-out' }], v => { closeMenus(); if (v === 'logout') location.href = 'login.html'; else toast('个人设置（待 Phase 4）'); }, 'user-menu');
+  }
+
+  function mountShell(opts) {
+    opts = opts || {};
+    const top = document.querySelector('[data-shell-top]');
+    const active = opts.active || (top && top.dataset.active) || '';
+    if (top) {
+      top.innerHTML = BRAND + TOP_RIGHT;
+      const pill = top.querySelector('#themePill');
+      if (pill) pill.onclick = e => openMenu(e.currentTarget, Object.entries(THEMES).map(([k, v]) => ({ v: k, label: k.toUpperCase() + ' · ' + v.name, sel: k === document.documentElement.dataset.theme })), v => { setTheme(v); closeMenus(); });
+    }
+    const side = document.getElementById('side');
+    if (side) side.innerHTML = buildSide(active);
+    setTheme(localStorage.getItem('jiu-theme') || 'a');
+  }
+
+  // 关菜单：mousedown（避免点触发器时瞬开瞬关）
+  document.addEventListener('mousedown', e => { if (menuEl && !menuEl.contains(e.target) && !e.target.closest('#themePill,.side-user')) closeMenus(); });
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeMenus(); });
+
+  // 暴露给页面脚本复用
+  window.openMenu = openMenu;
+  window.closeMenus = closeMenus;
+  window.toast = window.toast || toast;
+  window.setTheme = setTheme;
+  window.openUserMenu = openUserMenu;
+  window.navSvg = navSvg;
+  window.mountShell = mountShell;
+
+  if (document.readyState !== 'loading') mountShell();
+  else document.addEventListener('DOMContentLoaded', () => mountShell());
+})();
diff --git a/.superpowers/prototype/screens/statusbar.js b/.superpowers/prototype/screens/statusbar.js
new file mode 100644
index 0000000..8a6b12e
--- /dev/null
+++ b/.superpowers/prototype/screens/statusbar.js
@@ -0,0 +1,50 @@
+// 底部状态栏 —— app-shell 共用（单一真源，注入 .app 底部；当前时间每秒走字）
+// 左：门店编号 / 操作员 / 登录时间 / 当前时间   右：连接状态 / 版本 / 授权
+(function(){
+  const ICON = {
+    shop:'<svg viewBox="0 0 24 24"><use href="#i-ic44"/></svg>',
+    user:'<svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg>',
+    login:'<svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg>',
+    clock:'<svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg>',
+    cloud:'<svg viewBox="0 0 24 24"><use href="#i-cloud"/></svg>',
+    tag:'<svg viewBox="0 0 24 24"><use href="#i-tag"/></svg>',
+    shield:'<svg viewBox="0 0 24 24"><use href="#i-ic64"/></svg>',
+  };
+  const pad = n => String(n).padStart(2,'0');
+  const hms = d => pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
+
+  function init(){
+    const app = document.querySelector('.app');
+    if(!app || document.querySelector('.statusbar')) return;
+    const login = hms(new Date());
+    const bar = document.createElement('div');
+    bar.className = 'statusbar';
+    bar.innerHTML =
+      `<div class="sb-group">`
+        + `<span class="sb-i">${ICON.shop}<b>DSJH-001</b></span>`
+        + `<span class="sb-i">${ICON.user}王经理</span>`
+        + `<span class="sb-i sb-hideable">${ICON.login}登录 <b>${login}</b></span>`
+        + `<span class="sb-i">${ICON.clock}当前 <b id="sbNow">${login}</b></span>`
+      + `</div>`
+      + `<div class="sb-group right">`
+        + `<span class="sb-i ok sb-hideable">${ICON.cloud}已连接</span>`
+        + `<span class="sb-i ok sb-hideable">${ICON.tag}<b>v1.0.72</b></span>`
+        + `<span class="sb-i ok">${ICON.shield}授权正常 · 到期 <b>2026-07-13</b></span>`
+      + `</div>`;
+    // 不贯穿侧栏：把主内容列(.main/.work)与状态栏包进右侧内容列，侧栏占满整列高
+    const body = app.querySelector('.body');
+    const main = body && body.querySelector(':scope > .main, :scope > .work');
+    if (body && main) {
+      const col = document.createElement('div'); col.className = 'content-col';
+      main.parentNode.insertBefore(col, main);
+      col.appendChild(main);
+      col.appendChild(bar);
+    } else {
+      app.appendChild(bar);
+    }
+    const now = bar.querySelector('#sbNow');
+    setInterval(() => { now.textContent = hms(new Date()); }, 1000);
+  }
+  if(document.readyState !== 'loading') init();
+  else document.addEventListener('DOMContentLoaded', init);
+})();
diff --git a/.superpowers/prototype/screens/stock-in-list.html b/.superpowers/prototype/screens/stock-in-list.html
new file mode 100644
index 0000000..da8f9de
--- /dev/null
+++ b/.superpowers/prototype/screens/stock-in-list.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>入库管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px;}
+  .toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; flex-wrap:wrap; transition:background-color .28s,border-color .28s;}
+  .toolbar .searchbox{width:260px;}
+  .toolbar .daterange{display:flex; align-items:center; gap:6px; height:34px; padding:0 11px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-sm); color:var(--text); cursor:pointer;}
+  .toolbar .daterange svg{width:14px; height:14px; stroke-width:1.8; color:var(--faint);}
+  .toolbar .daterange .dv{color:var(--text);}
+  .toolbar .sp{margin-left:auto;}
+
+  /* ---- 状态徽章（新增变体，待提升至 atoms.css） ---- */
+  .badge.b-草稿{background:var(--info-soft); color:var(--muted);}
+  .badge.b-待审核{background:var(--warn-bg); color:var(--warn);}
+  .badge.b-已通过{background:var(--success-bg); color:var(--success);}
+  .badge.b-已驳回{background:var(--danger-bg); color:var(--danger);}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="stock-in"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>入库管理</h1><span class="sub" id="subInfo">本月 28 笔入库单</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="render()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>刷新</div>
+          <div class="btn ghost" onclick="toast('已导出当前筛选结果 ✓')"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg>导出</div>
+          <a class="btn primary" href="stock-in.html"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增入库</a>
+        </div>
+      </div>
+      <div class="kpis">
+        <div class="kpi"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></div><div class="t">本月入库笔数</div><div class="v">28</div><div class="d up">▲ 12% 较上月</div></div>
+        <div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg></div><div class="t">本月入库金额</div><div class="v">¥186万</div><div class="d up">▲ 8.4% 较上月</div></div>
+        <div class="kpi alert click" onclick="filterStatus('待审核')"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg></div><div class="t">待审核单数 · 点击筛选</div><div class="v">4</div><div class="d down">需尽快处理</div></div>
+      </div>
+      <div class="toolbar">
+        <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="搜索单号 / 供应商 / 酒名" oninput="state.q=this.value; state.page=1; render()"></div>
+        <div class="chip" id="chipParty" onclick="openPartyFilter(this)">供应商 <span class="cv" id="partyVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <div class="chip" id="chipWh" onclick="openWhFilter(this)">仓库 <span class="cv" id="whVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <div class="chip" id="chipStatus" onclick="openStatusFilter(this)">状态 <span class="cv" id="statusVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <div class="chip" id="chipDate" onclick="openDateFilter(this)"><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg>入库时间 <span class="cv" id="dateVal"></span></div>
+        <div class="sp"></div>
+        <div class="btn ghost sm" id="resetBtn" onclick="clearFilters()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>重置</div>
+      </div>
+      <div class="table flush-top"><table><thead id="thead"></thead><tbody id="tbody"></tbody></table></div>
+      <div class="pager"><div class="pg-size">每页 <button class="pgsize-btn" id="pageSizeBtn" onclick="openPageSize(event)"><span id="pageSizeVal">10</span><svg class="pgsize-caret" viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></button> 条</div><span id="pagerInfo"></span><div class="pg" id="pager"></div></div>
+    </div>
+  </div>
+</div>
+
+<div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
+<div class="drawer wide" id="drawer"><div class="drawer-head"><h3 id="dTitle">入库单详情</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeDrawer()"><use href="#i-close"/></svg></div><div class="drawer-body" id="drawerBody"></div></div>
+
+<div class="overlay" id="ovConfirm"><div class="modal">
+  <div class="modal-head"><h3>确认进价</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOverlay('ovConfirm')"><use href="#i-close"/></svg></div>
+  <div class="modal-body">
+    <div class="notice info" style="margin-bottom:14px"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg><div>调货「先卖后定价」：填写真实进价后，系统前向补齐库存成本、已出库成本快照，并按差额补一条应付流水——不反审核、不影响售价 / 应收。</div></div>
+    <div id="confirmRows"></div>
+  </div>
+  <div class="modal-foot"><div class="btn ghost" onclick="closeOverlay('ovConfirm')">取消</div><div class="btn primary" onclick="saveConfirmCost()">确认并补差额</div></div>
+</div></div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const ORDERS=[
+  {no:'RK-20260620-009',date:'2026-06-20',party:'鼎晟调货',wh:'主仓',count:2,amount:5360,status:'已通过',op:'王经理',auditor:'张主管',lines:[{name:'茅台 飞天 53°',qty:2,price:0},{name:'五粮液 普五 52°',qty:5,price:1072}]},
+  {no:'RK-20260620-001',date:'2026-06-20',party:'茅台华东总代',wh:'名酒仓',count:3,amount:48360,status:'待审核',op:'王经理',auditor:'',lines:[{name:'茅台 飞天 53°',qty:12,price:2680},{name:'茅台 1935',qty:8,price:1180},{name:'茅台 王子酒',qty:20,price:328}]},
+  {no:'RK-20260619-003',date:'2026-06-19',party:'五粮液经销',wh:'主仓',count:2,amount:33600,status:'已通过',op:'李采购',auditor:'张主管',lines:[{name:'五粮液 普五 52°',qty:24,price:1050},{name:'五粮液 1618',qty:12,price:680}]},
+  {no:'RK-20260619-001',date:'2026-06-19',party:'剑南春西南仓',wh:'主仓',count:2,amount:12640,status:'已通过',op:'王经理',auditor:'张主管',lines:[{name:'剑南春 水晶剑',qty:24,price:438},{name:'剑南春 珍藏级',qty:4,price:520}]},
+  {no:'RK-20260618-002',date:'2026-06-18',party:'国窖直营',wh:'名酒仓',count:1,amount:23520,status:'草稿',op:'李采购',auditor:'',lines:[{name:'国窖 1573',qty:24,price:980}]},
+  {no:'RK-20260617-004',date:'2026-06-17',party:'洋河股份华东',wh:'一号仓',count:3,amount:29760,status:'已通过',op:'张主管',auditor:'王经理',lines:[{name:'洋河 梦之蓝 M6',qty:24,price:620},{name:'洋河 海之蓝',qty:36,price:188},{name:'洋河 天之蓝',qty:24,price:328}]},
+  {no:'RK-20260617-001',date:'2026-06-17',party:'泸州老窖经销',wh:'主仓',count:2,amount:18720,status:'待审核',op:'王经理',auditor:'',lines:[{name:'泸州老窖 特曲',qty:48,price:320},{name:'泸州老窖 头曲',qty:24,price:140}]},
+  {no:'RK-20260616-002',date:'2026-06-16',party:'习酒贵州仓',wh:'一号仓',count:1,amount:18240,status:'已驳回',op:'李采购',auditor:'张主管',lines:[{name:'习酒 窖藏 1988',qty:24,price:760}]},
+  {no:'RK-20260615-003',date:'2026-06-15',party:'汾酒山西总代',wh:'主仓',count:2,amount:15120,status:'已通过',op:'张主管',auditor:'王经理',lines:[{name:'汾酒 青花 20',qty:24,price:420},{name:'汾酒 老白汾',qty:36,price:140}]},
+  {no:'RK-20260615-001',date:'2026-06-15',party:'郎酒集团华东',wh:'名酒仓',count:1,amount:13440,status:'待审核',op:'王经理',auditor:'',lines:[{name:'郎酒 红花郎 15',qty:24,price:560}]},
+  {no:'RK-20260614-002',date:'2026-06-14',party:'古井贡安徽仓',wh:'一号仓',count:2,amount:11400,status:'已通过',op:'李采购',auditor:'张主管',lines:[{name:'古井贡 年份原浆',qty:24,price:390},{name:'古井贡 古5',qty:24,price:85}]},
+  {no:'RK-20260613-001',date:'2026-06-13',party:'西凤酒陕西总代',wh:'主仓',count:1,amount:6720,status:'草稿',op:'张主管',auditor:'',lines:[{name:'西凤酒 旗舰版',qty:24,price:280}]},
+  {no:'RK-20260612-003',date:'2026-06-12',party:'水井坊川渝仓',wh:'名酒仓',count:1,amount:16320,status:'待审核',op:'王经理',auditor:'',lines:[{name:'水井坊 井台',qty:24,price:680}]},
+];
+const STATUS=['全部','草稿','待审核','已通过','已驳回'];
+const COLS=[{key:'no',label:'单号'},{key:'party',label:'供应商'},{key:'wh',label:'仓库'},{key:'amount',label:'合计金额',num:true},{key:'status',label:'状态',filter:true},{key:'op',label:'入库员'},{key:'auditor',label:'审核员'},{key:'act',label:'操作',fixed:true}];
+const state={q:'',party:'全部',wh:'全部',status:'全部',dateFrom:'',dateTo:'',page:1,perPage:10};
+const PARTIES=['全部',...Array.from(new Set(ORDERS.map(o=>o.party)))];
+const WAREHOUSES=['全部',...Array.from(new Set(ORDERS.map(o=>o.wh)))];
+
+const PARTY_LABEL='供应商';
+
+
+function money(n){ return '¥'+n.toLocaleString(); }
+function filtered(){ return ORDERS.filter(o=>{
+  if(state.status!=='全部'&&o.status!==state.status)return false;
+  if(state.party!=='全部'&&o.party!==state.party)return false;
+  if(state.wh!=='全部'&&o.wh!==state.wh)return false;
+  if(state.dateFrom&&o.date<state.dateFrom)return false;
+  if(state.dateTo&&o.date>state.dateTo)return false;
+  if(state.q){const q=state.q.toLowerCase(); if(!(o.no.toLowerCase().includes(q)||o.party.toLowerCase().includes(q)||(o.lines||[]).some(l=>l.name.toLowerCase().includes(q))))return false;}
+  return true; }); }
+function syncChips(){
+  const set=(id,chipId,val)=>{ document.getElementById(id).textContent=val||''; document.getElementById(chipId).classList.toggle('on',!!val); };
+  set('partyVal','chipParty',state.party==='全部'?'':state.party);
+  set('whVal','chipWh',state.wh==='全部'?'':state.wh);
+  set('statusVal','chipStatus',state.status==='全部'?'':state.status);
+  set('dateVal','chipDate',state.dateLabel||'');
+  const any=state.q||state.party!=='全部'||state.wh!=='全部'||state.status!=='全部'||state.dateFrom||state.dateTo;
+  document.getElementById('resetBtn').classList.toggle('primary',!!any);
+}
+function render(){
+  syncChips();
+  const cols=COLS;
+  document.getElementById('thead').innerHTML='<tr>'+cols.map(c=>{ const cls=(c.num?'num ':'')+(c.key==='act'?'act ':''); if(c.filter){const on=state.status!=='全部'; return `<th class="${cls}"><span class="fh ${on?'filtered':''}" onclick="openFilter(this)">${c.label} <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic22"/></svg></span></th>`;} return `<th class="${cls}">${c.label}</th>`; }).join('')+'</tr>';
+  const rows=filtered(); const start=(state.page-1)*state.perPage; const pageRows=rows.slice(start,start+state.perPage); const tb=document.getElementById('tbody');
+  if(rows.length===0){ tb.innerHTML=`<tr><td colspan="${cols.length}"><div class="empty">没有匹配的入库单 · 试试调整筛选或搜索</div></td></tr>`; }
+  else { tb.innerHTML=pageRows.map(o=>{ const idx=ORDERS.indexOf(o); return '<tr class="click" onclick="openDetail('+idx+')">'+cols.map(c=>{ if(c.key==='no')return `<td><span class="pcode" style="font-size:var(--fs-body)">${o.no}</span></td>`; if(c.key==='party')return `<td class="pname">${o.party}</td>`; if(c.key==='wh')return `<td>${o.wh}</td>`; if(c.key==='amount')return `<td class="num">${money(o.amount)}</td>`; if(c.key==='status')return `<td><span class="badge b-${o.status}">${o.status}</span></td>`; if(c.key==='op')return `<td>${o.op}</td>`; if(c.key==='auditor')return `<td>${o.auditor?o.auditor:'<span style="color:var(--faint)">—</span>'}</td>`; if(c.key==='act')return `<td class="act"><div class="row-act" onclick="event.stopPropagation()"><svg viewBox="0 0 24 24" onclick="openDetail(${idx})"><use href="#i-eye"/></svg></div></td>`; return `<td>${o[c.key]}</td>`; }).join('')+'</tr>'; }).join(''); }
+  document.getElementById('pagerInfo').textContent=`显示 ${rows.length?start+1:0}–${Math.min(start+state.perPage,rows.length)}，共 ${rows.length}`;
+  const pages=Math.max(1,Math.ceil(rows.length/state.perPage)); let pg=`<button ${state.page<=1?'disabled':''} onclick="go(${state.page-1})">‹</button>`; for(let p=1;p<=pages;p++)pg+=`<button class="${p===state.page?'cur':''}" onclick="go(${p})">${p}</button>`; pg+=`<button ${state.page>=pages?'disabled':''} onclick="go(${state.page+1})">›</button>`; document.getElementById('pager').innerHTML=pg;
+  document.getElementById('subInfo').textContent=`本月 ${rows.length} 笔入库单`;
+}
+function go(p){ const pages=Math.max(1,Math.ceil(filtered().length/state.perPage)); state.page=Math.min(Math.max(1,p),pages); render(); }
+const PAGE_SIZES=[10,20,50,100];
+function openPageSize(e){ openMenu(e.currentTarget, PAGE_SIZES.map(n=>({v:String(n),label:String(n),sel:n===state.perPage})), v=>{ closeMenus(); setPerPage(v); }, 'pgsize-menu', 88); }
+function setPerPage(v){ state.perPage=+v; state.page=1; const el=document.getElementById('pageSizeVal'); if(el)el.textContent=v; render(); }
+function filterStatus(s){ state.status=s; state.page=1; render(); }
+function clearFilters(){ state.q='';state.party='全部';state.wh='全部';state.status='全部';state.dateFrom='';state.dateTo='';state.dateLabel='';state.page=1; document.getElementById('searchInput').value=''; render(); }
+
+function openFilter(t){ openStatusFilter(t); }
+function openStatusFilter(t){ openMenu(t,STATUS.map(v=>({v,label:v,sel:v===state.status})),v=>{ state.status=v; state.page=1; closeMenus(); render(); }); }
+function openPartyFilter(t){ openMenu(t,PARTIES.map(v=>({v,label:v,sel:v===state.party})),v=>{ state.party=v; state.page=1; closeMenus(); render(); }); }
+function openWhFilter(t){ openMenu(t,WAREHOUSES.map(v=>({v,label:v,sel:v===state.wh})),v=>{ state.wh=v; state.page=1; closeMenus(); render(); }); }
+const TODAY='2026-06-22';
+function dateMinus(days){ const d=new Date(TODAY); d.setDate(d.getDate()-days); return d.toISOString().slice(0,10); }
+const DATE_PRESETS=[
+  {v:'all',label:'全部时间'},
+  {v:'7',label:'近 7 天'},
+  {v:'30',label:'近 30 天'},
+  {v:'month',label:'本月'},
+];
+function openDateFilter(t){ openMenu(t,DATE_PRESETS.map(p=>({v:p.v,label:p.label,sel:p.v===(state.datePreset||'all')})),v=>{ applyDatePreset(v); state.page=1; closeMenus(); render(); }); }
+function applyDatePreset(v){ state.datePreset=v; if(v==='all'){state.dateFrom='';state.dateTo='';state.dateLabel='';}
+  else if(v==='month'){state.dateFrom=TODAY.slice(0,7)+'-01';state.dateTo=TODAY;state.dateLabel='本月';}
+  else {state.dateFrom=dateMinus(Number(v)-1);state.dateTo=TODAY;state.dateLabel='近'+v+'天';} }
+
+
+const PINFO={
+'茅台 飞天 53°':{code:'MT-FT-53-500',series:'飞天',spec:'53° 500ml×6'},
+'茅台 1935':{code:'MT-1935-53-500',series:'1935',spec:'53° 500ml×6'},
+'茅台 王子酒':{code:'MT-WZ-53-500',series:'王子',spec:'53° 500ml×6'},
+'五粮液 普五 52°':{code:'WLY-P8-52-500',series:'第八代',spec:'52° 500ml×6'},
+'五粮液 1618':{code:'WLY-1618-52-500',series:'1618',spec:'52° 500ml×6'},
+'剑南春 水晶剑':{code:'JNC-SJ-52-500',series:'水晶剑',spec:'52° 500ml×6'},
+'剑南春 珍藏级':{code:'JNC-ZC-52-500',series:'珍藏',spec:'52° 500ml×6'},
+'国窖 1573':{code:'GJ-1573-52-500',series:'经典装',spec:'52° 500ml×6'},
+'洋河 梦之蓝 M6':{code:'YH-M6-45-500',series:'梦之蓝',spec:'45° 500ml×6'},
+'洋河 海之蓝':{code:'YH-HZL-42-480',series:'海之蓝',spec:'42° 480ml×6'},
+'洋河 天之蓝':{code:'YH-TZL-42-480',series:'天之蓝',spec:'42° 480ml×6'},
+'泸州老窖 特曲':{code:'LZLJ-TQ-52-500',series:'特曲',spec:'52° 500ml×6'},
+'泸州老窖 头曲':{code:'LZLJ-TOUQ-52-500',series:'头曲',spec:'52° 500ml×6'},
+'习酒 窖藏 1988':{code:'XJ-JC-53-500',series:'窖藏',spec:'53° 500ml×6'},
+'汾酒 青花 20':{code:'FJ-QH20-53-500',series:'青花',spec:'53° 500ml×6'},
+'汾酒 老白汾':{code:'FJ-LBF-53-475',series:'老白汾',spec:'53° 475ml×6'},
+'郎酒 红花郎 15':{code:'LJ-HHL15-53-500',series:'红花郎',spec:'53° 500ml×6'},
+'古井贡 年份原浆':{code:'GJG-NF-50-500',series:'年份原浆',spec:'50° 500ml×6'},
+'古井贡 古5':{code:'GJG-G5-50-500',series:'古5',spec:'50° 500ml×6'},
+'西凤酒 旗舰版':{code:'XF-QJ-52-500',series:'旗舰',spec:'52° 500ml×6'},
+'水井坊 井台':{code:'SJF-JT-52-500',series:'井台',spec:'52° 500ml×6'},
+};
+function auditBtns(o){
+  if(o.status==='草稿')   return '<div class="btn primary sm" onclick="toast(\'已提交审核 ✓\');closeDrawer()">提交审核</div>';
+  if(o.status==='待审核') return '<div class="btn primary sm" onclick="toast(\'已审核通过 ✓\');closeDrawer()">审核通过</div><div class="btn danger sm" onclick="toast(\'已驳回\');closeDrawer()">驳回</div>';
+  if(o.status==='已通过') return '<div class="btn ghost sm" onclick="toast(\'已结清 ✓\');closeDrawer()">结清</div><div class="btn danger sm" onclick="toast(\'已退单\');closeDrawer()">退单</div>';
+  if(o.status==='已驳回') return '<div class="btn primary sm" onclick="toast(\'已重新提交 ✓\');closeDrawer()">重新提交</div>';
+  return '';
+}
+function openDetail(idx){ const o=ORDERS[idx]; document.getElementById('dTitle').textContent=o.no;
+  let lh=`<div class="lines"><div class="lh" style="grid-template-columns:1fr 124px 40px 64px 78px"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">单价</span><span style="text-align:right">金额</span></div>`;
+  o.lines.forEach(l=>{ const pi=PINFO[l.name]||{}; const pend=(l.price||0)<=0; const priceC=pend?'<span class="pending-price">待定价</span>':money(l.price); const amtC=pend?'<span class="pending-price">待定价</span>':money(l.qty*l.price); lh+=`<div class="lr" style="grid-template-columns:1fr 124px 40px 64px 78px;align-items:start"><span class="lcell"><span class="ln">${l.name}</span><span class="lcode">${pi.code||'—'}</span></span><span class="lcell"><span class="lser">${pi.series||'—'}</span><span class="lspec">${pi.spec||''}</span></span><span style="text-align:right;font-family:var(--font-mono)">${l.qty}</span><span style="text-align:right;font-family:var(--font-mono)">${priceC}</span><span class="amt">${amtC}</span></div>`; }); lh+='</div>';
+  const pendCount=o.lines.filter(l=>(l.price||0)<=0).length;
+  const auditor=o.auditor?o.auditor:'<span style="color:var(--faint)">—</span>';
+  document.getElementById('drawerBody').innerHTML=`<div class="drow"><span>单据日期</span><b>${o.date}</b></div><div class="drow"><span>${PARTY_LABEL}</span><b>${o.party}</b></div><div class="drow"><span>仓库</span><b>${o.wh}</b></div><div class="drow"><span>商品数</span><b>${o.count}</b></div><div class="drow"><span>入库员</span><b>${o.op}</b></div><div class="drow"><span>审核员</span><b>${auditor}</b></div><div class="drow"><span>状态</span><b><span class="badge b-${o.status}">${o.status}</span></b></div><label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin:16px 0 8px;">入库明细</label>${lh}<div class="ltotal">合计金额 <b>${money(o.amount)}</b></div>`+
+    `<div class="dactions"><div class="dact-group"><span class="dact-label">单据审核</span><div class="dact-row">${auditBtns(o)}</div></div>${(o.status==='已通过'&&pendCount>0)?`<div class="dact-group"><span class="dact-label">成本 · ${pendCount} 项待定价</span><div class="dact-row"><div class="btn primary sm" onclick="openConfirmCost(${idx})"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg>确认进价</div></div></div>`:''}<div class="dact-group"><span class="dact-label">打印</span><div class="dact-row"><div class="btn ghost sm" onclick="toast('打印标签（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg>打印标签</div><div class="btn ghost sm" onclick="toast('打印单据（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic50"/></svg>打印单据</div></div></div></div>`;
+  document.getElementById('drawer').classList.add('show'); document.getElementById('drawerMask').classList.add('show'); }
+function closeDrawer(){ document.getElementById('drawer').classList.remove('show'); document.getElementById('drawerMask').classList.remove('show'); }
+let confirmOrder=-1;
+function openConfirmCost(idx){ confirmOrder=idx; const o=ORDERS[idx]; const pend=o.lines.map((l,i)=>({l,i})).filter(({l})=>(l.price||0)<=0);
+  document.getElementById('confirmRows').innerHTML=pend.map(({l,i})=>`<div class="frow" style="align-items:center;gap:12px;margin-bottom:10px"><div style="flex:1"><div class="pname">${l.name}</div><div class="pcode">数量 ${l.qty}</div></div><div class="ctrl input-like" style="width:150px"><input type="number" inputmode="decimal" data-li="${i}" placeholder="真实进价 0.00"></div></div>`).join('');
+  document.getElementById('ovConfirm').classList.add('show'); }
+function saveConfirmCost(){ closeOverlay('ovConfirm'); closeDrawer(); toast('进价已确认，已前向补齐成本并补应付差额 ✓'); }
+function closeOverlay(id){ document.getElementById(id).classList.remove('show'); }
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();document.querySelectorAll('.overlay.show').forEach(o=>o.classList.remove('show'));closeDrawer();} });
+
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/stock-in.html b/.superpowers/prototype/screens/stock-in.html
new file mode 100644
index 0000000..65cab07
--- /dev/null
+++ b/.superpowers/prototype/screens/stock-in.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>录单 · 入库 / 出库 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* —— 顶栏 / 侧栏 shell（承袭 inventory.html）—— */
+  .top{height:56px; background:var(--top-bg); border-bottom:1px solid var(--top-border); display:flex; align-items:center; gap:14px; padding:0 18px; flex:none; transition:background-color .28s,border-color .28s; z-index:var(--z-header);}
+  .ham{display:none; width:34px; height:34px; border-radius:8px; align-items:center; justify-content:center; color:var(--top-fg); cursor:pointer;}
+  .ham:hover{background:var(--top-control);}
+  .back{display:flex; align-items:center; gap:6px; color:var(--top-faint); font-size:var(--fs-sm); text-decoration:none; padding-right:12px; border-right:1px solid var(--top-border);}
+  .back:hover{color:var(--top-fg);}
+  .logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:var(--fs-title); color:var(--top-fg);}
+  .logo .mk{width:28px; height:28px; border-radius:8px; background:var(--top-mark-bg); color:var(--top-mark-fg); display:flex; align-items:center; justify-content:center; font-weight:800;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+  .brand-prod{display:flex; align-items:center; gap:7px;}
+  .brand-prod .prod-mk{width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:none;}
+  .brand-prod .prod-mk svg{width:30px; height:30px;}
+  .brand-prod .prod-nm{font-weight:700; font-size:var(--fs-h2); color:var(--top-fg); letter-spacing:.3px; white-space:nowrap;}
+  .brand-sep{width:1px; height:20px; background:var(--top-border); flex:none; margin:0 8px;}
+  .logo{font-size:var(--fs-body); gap:9px;}
+  .logo .mk{width:26px; height:26px; border-radius:8px; font-size:var(--fs-body);}
+  .logo .shop-nm{font-weight:600;}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  .top-right{margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--top-fg);}
+  .theme-pill{display:flex; align-items:center; gap:7px; height:30px; padding:0 11px; border:1px solid var(--top-border); border-radius:var(--r-pill); font-size:var(--fs-sm); color:var(--top-fg); background:var(--top-control); cursor:pointer;}
+  .theme-pill .dot{width:11px; height:11px; border-radius:50%; background:var(--top-fg);}
+  .icon-btn{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--top-fg); cursor:pointer;}
+  .icon-btn:hover{background:var(--top-control);}
+
+  .body{flex:1; display:flex; min-height:0;}
+  .side{width:218px; background:var(--side-bg); border-right:1px solid var(--side-border); padding:12px 12px 0; display:flex; flex-direction:column; flex:none; transition:background-color .28s,border-color .28s,transform .25s;}
+  .nav-label{font-size:var(--fs-xs); color:var(--side-muted); font-weight:600; letter-spacing:.6px; padding:10px 10px 6px;}
+  .nav{display:flex; align-items:center; gap:11px; height:40px; padding:0 11px; border-radius:var(--r-md); color:var(--side-fg); font-size:var(--fs-body); font-weight:500; margin-bottom:2px; cursor:pointer; transition:background-color .15s,color .15s;}
+  .nav svg{width:19px; height:19px; flex:none; stroke-width:1.7;}
+  .nav:hover{background:var(--side-hover); color:var(--side-active-fg);}
+  .nav.active{background:var(--side-active-bg); color:var(--side-active-fg); font-weight:600;}
+  .side-foot{margin-top:auto; border-top:1px solid var(--side-border); padding:10px 4px;}
+  .side-user{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-md); cursor:pointer; transition:background-color .15s;}
+  .side-user:hover{background:var(--side-hover);}
+  .su-pic{width:34px; height:34px; border-radius:50%; background:var(--side-active-bg); color:var(--side-active-fg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none;}
+  .su-who{flex:1; min-width:0; line-height:1.3;}
+  .su-who b{display:block; color:var(--side-active-fg); font-size:var(--fs-body); font-weight:600;}
+  .su-who span{color:var(--side-muted); font-size:var(--fs-xs);}
+  .su-caret{width:14px; height:14px; color:var(--side-muted); flex:none;}
+  .scrim{display:none; position:fixed; inset:56px 0 0; background:var(--scrim); z-index:var(--z-shell-scrim);}
+
+  /* —— 录单主区（整页表单：上头 + 中网格 + 下底栏）—— */
+  .main{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;}
+  .page-head{display:flex; align-items:center; gap:14px; padding:16px 26px 14px; flex:none;}
+  .page-head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px; white-space:nowrap;}
+  .page-head .ph-actions{margin-left:auto; display:flex; gap:10px;}
+  .ph-overflow{position:relative;}
+
+  .form-wrap{flex:1; min-height:0; overflow:auto; padding:0 26px 18px; display:flex; flex-direction:column;}
+  .dochead{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:14px; flex:none; transition:background-color .28s,border-color .28s;}
+  .dochead-top{display:flex; align-items:center; margin-bottom:14px;}
+  .dochead-top .dt{font-size:var(--fs-title); font-weight:600; color:var(--heading);}
+  .dochead-top .collapse{margin-left:auto; display:flex; align-items:center; gap:5px; font-size:var(--fs-sm); color:var(--muted); cursor:pointer;}
+  .dochead-top .collapse svg{width:14px; height:14px; stroke-width:2; transition:transform .2s;}
+  .dochead.folded .dochead-grid, .dochead.folded .remark-row{display:none;}
+  .dochead.folded{padding:13px 18px;}
+  .dochead-summary{display:none; font-size:var(--fs-body); color:var(--muted);}
+  .dochead-summary b{color:var(--text); font-weight:600;}
+  .dochead.folded .dochead-summary{display:block; margin-left:18px;}
+  .dochead-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;}
+  .field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
+  .field label .req{color:var(--danger); margin-left:2px;}
+  .field .ro-val{height:38px; display:flex; align-items:center; padding:0 11px; font-size:var(--fs-body); color:var(--text); background:var(--bg); border:1px solid var(--border-subtle); border-radius:var(--r-md);}
+  .remark-row{margin-top:14px;}
+  .remark-row textarea{width:100%; min-height:46px; resize:vertical; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:9px 11px; font-size:var(--fs-body); color:var(--text); outline:none; font-family:var(--font);}
+  .remark-row textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+
+  .detail-head{display:flex; align-items:center; margin-bottom:10px; flex:none;}
+  .detail-head .dt{font-size:var(--fs-title); font-weight:600; color:var(--heading);}
+  .detail-head .hint{margin-left:12px; font-size:var(--fs-sm); color:var(--faint);}
+  .detail-head .hint kbd{font-family:var(--font-mono); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 5px; font-size:var(--fs-xs); color:var(--muted);}
+  .detail-head .dh-act{margin-left:auto; display:flex; gap:10px;}
+  #detail{flex:1; min-height:0; display:flex; flex-direction:column;}
+  .mcards{display:flex; flex-direction:column; gap:12px;}
+
+  .form-foot{flex:none; display:flex; align-items:center; gap:16px; padding:13px 26px; background:var(--surface); border-top:1px solid var(--border); transition:background-color .28s,border-color .28s;}
+  .form-foot .rows-n{font-size:var(--fs-sm); color:var(--muted);}
+  .form-foot .total{margin-left:auto; display:flex; align-items:baseline; gap:10px; font-size:var(--fs-body); color:var(--muted);}
+  .form-foot .total b{font-size:24px; color:var(--accent); font-family:var(--font-mono); letter-spacing:.3px;}
+  .form-foot .foot-act{display:flex; gap:10px;}
+  .ph-actions .desk, .ph-actions .mob, .foot-act .desk, .foot-act .mob{display:flex; gap:10px;}
+  .btn.ghost.danger-txt{color:var(--danger);}
+
+  @media (max-width:600px){
+    .ham{display:flex;} .back{display:none;}
+    .side{position:fixed; left:0; top:56px; bottom:0; z-index:var(--z-shell-panel); transform:translateX(-100%);}
+    .side.open{transform:none;} .scrim.show{display:block;}
+    .avatar .who{display:none;}
+    .page-head{padding:13px 16px 10px;} .form-wrap{padding:0 16px 14px;} .form-foot{padding:12px 16px;}
+    .page-head h1{font-size:var(--fs-h2);}
+    .dochead-grid{grid-template-columns:1fr;}
+    .ph-actions .desk{display:none;}
+    .form-foot .foot-act .desk{display:none;}
+  }
+  @media (min-width:601px){ .ph-actions .mob, .form-foot .foot-act .mob{display:none;} }
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top">
+    <div class="ham" id="ham"><svg width="20" height="20" viewBox="0 0 24 24" stroke-width="2"><use href="#i-menu"/></svg></div>
+    <div class="brand-prod"><span class="prod-mk"><svg viewBox="0 0 64 64"><use href="#i-ic51"/></svg></span><span class="prod-nm">岩美酒库</span></div><span class="brand-sep"></span><div class="logo" title="当前门店"><span class="mk">鼎</span><span class="shop-nm">鼎晟酒行</span></div>
+    <div class="top-right">
+      <div class="theme-pill" id="themePill"><span class="dot"></span><span id="themeName">经典蓝</span><svg width="12" height="12" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div>
+      <div class="icon-btn" data-notify title="通知"><svg width="19" height="19" viewBox="0 0 24 24" stroke-width="1.7"><use href="#i-megaphone"/></svg></div>
+    </div>
+  </div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="scrim" id="scrim"></div>
+    <div class="main">
+      <div class="page-head">
+        <a class="back" href="../index.html" style="border:none;padding:0" title="返回"><svg width="20" height="20" viewBox="0 0 24 24" stroke-width="2" style="color:var(--muted)"><use href="#i-chevron-left"/></svg></a>
+        <h1 id="pageTitle">新建入库单</h1>
+        <span class="badge" id="statusBadge" style="display:none"></span>
+        <div class="seg" id="modeSeg">
+          <button data-mode="in" class="on">入库</button>
+          <button data-mode="out">出库</button>
+        </div>
+        <div class="ph-actions" id="pageActions"></div>
+      </div>
+
+      <div class="form-wrap">
+        <div id="noticeSlot"></div>
+
+        <div class="dochead" id="dochead">
+          <div class="dochead-top">
+            <span class="dt">单据信息</span>
+            <span class="dochead-summary" id="docSummary"></span>
+            <span class="collapse" id="docCollapse"><span id="collapseTxt">收起</span><svg viewBox="0 0 24 24"><use href="#i-ic52"/></svg></span>
+          </div>
+          <div class="dochead-grid">
+            <div class="field"><label id="partnerLabel">供应商 <span class="req">*</span></label>
+              <div class="combo" data-scope="doc" data-field="partner" data-dict="suppliers" data-create="1" data-summary="1"><input placeholder="选择或搜索往来单位…" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></span></div>
+            </div>
+            <div class="field"><label>入库仓库 <span class="req">*</span></label>
+              <div class="combo" data-scope="doc" data-field="warehouse" data-dict="warehouses" data-create="0"><input placeholder="选择仓库…" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></span></div>
+            </div>
+            <div class="field"><label>单据日期 <span class="req">*</span></label>
+              <div class="datefield" id="orderDate" tabindex="0" data-val=""><span class="dval ph">选择日期</span><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg></div>
+            </div>
+            <div class="field"><label id="handlerLabel">入库员</label>
+              <div class="ro-val">王经理</div>
+            </div>
+          </div>
+          <div class="remark-row">
+            <label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px;">备注</label>
+            <textarea id="remark" placeholder="选填，如有特殊说明请在此注明"></textarea>
+          </div>
+        </div>
+
+        <div class="detail-head">
+          <span class="dt">商品明细</span>
+          <span class="hint" id="kbdHint"><kbd>Enter</kbd> 下一格 · 末格自动加行 · <kbd>⌘D</kbd> 复制行 · <kbd>⌘↵</kbd> 提交</span>
+          <div class="dh-act" id="dhAct"></div>
+        </div>
+        <div id="detail"></div>
+      </div>
+
+      <div class="form-foot">
+        <span class="rows-n" id="rowsN">明细 0 行</span>
+        <div class="total">合计金额 <b id="grandTotal">¥0.00</b></div>
+        <div class="foot-act" id="footActions"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="overlay" id="ov"><div class="modal" style="width:440px"><div class="modal-head"><h3 id="ovTitle"></h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeOv()"><use href="#i-close"/></svg></div><div class="modal-body" id="ovBody"></div><div class="modal-foot" id="ovFoot"></div></div></div>
+<div class="toast" id="toast"></div>
+
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="datewheel.js"></script>
+<script src="stock-in.js"></script>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/stock-in.js b/.superpowers/prototype/screens/stock-in.js
new file mode 100644
index 0000000..8ea5711
--- /dev/null
+++ b/.superpowers/prototype/screens/stock-in.js
@@ -0,0 +1,515 @@
+/* ============================================================
+   岩美酒库 · 录单表单（入库为主 / 出库镜像）
+   页面级逻辑：复用 atoms.css 的 .combo / .grid / 状态徽章 / .mcard。
+   ============================================================ */
+
+/* ---------------- 字典数据（原型内置；真实环境走基础数据接口）---------------- */
+let SEQ = 1000;
+const SERIES = [
+  {id:'s53',name:'53度',py:'53du',init:'53'},{id:'s52',name:'52度',py:'52du',init:'52'},
+  {id:'s45',name:'45度',py:'45du',init:'45'},{id:'s42',name:'42度',py:'42du',init:'42'},
+  {id:'s38',name:'38度',py:'38du',init:'38'},
+];
+const SPECS = [
+  {id:'p5006',name:'500ml×6',py:'500ml',init:'500'},{id:'p500',name:'500ml',py:'500ml',init:'500'},
+  {id:'p250',name:'250ml',py:'250ml',init:'250'},{id:'p1000',name:'1000ml',py:'1000ml',init:'1000'},
+  {id:'p100',name:'100ml',py:'100ml',init:'100'},
+];
+const NAMES = [
+  ['n1','茅台飞天','maotaifeitian','mtft','s53','p5006',2680,2980,128],
+  ['n2','茅台五星','maotaiwuxing','mtwx','s53','p5006',2380,2680,40],
+  ['n3','五粮液普五','wuliangyepuwu','wlypw','s52','p5006',1050,1280,64],
+  ['n4','五粮液1618','wuliangye1618','wly1618','s52','p5006',1180,1420,22],
+  ['n5','剑南春水晶剑','jiannanchunshuijingjian','jncsjj','s52','p5006',438,560,8],
+  ['n6','国窖1573','guojiao1573','gj1573','s52','p5006',980,1180,42],
+  ['n7','洋河梦之蓝M6','yanghemengzhilanm6','yhmzlm6','s45','p5006',620,780,23],
+  ['n8','泸州老窖特曲','luzhoulaojiaotequ','lzljtq','s52','p5006',320,420,156],
+  ['n9','习酒窖藏1988','xijiujiaocang1988','xjjc1988','s53','p5006',760,920,31],
+  ['n10','汾酒青花20','fenjiuqinghua20','fjqh20','s53','p5006',420,520,0],
+  ['n11','郎酒红花郎15','langjiuhonghualang15','ljhhl15','s53','p5006',560,720,54],
+  ['n12','古井贡年份原浆','gujinggongnianfenyuanjiang','gjgnfyj','s42','p5006',390,490,12],
+  ['n13','西凤酒旗舰版','xifengjiuqijianban','xfjqjb','s45','p5006',280,360,88],
+  ['n14','水井坊井台','shuijingfangjingtai','sjfjt','s52','p5006',680,860,6],
+].map(a=>({id:a[0],name:a[1],py:a[2],init:a[3],dSeries:a[4],dSpec:a[5],cost:a[6],sale:a[7],stock:a[8]}));
+const SUPPLIERS = [
+  ['g1','鼎晟供应链','dingshenggongyinglian','dsgyl','GYS001'],['g2','茅台华东总代','maotaihuadongzongdai','mthdzd','GYS002'],
+  ['g3','川酒集团批发','chuanjiujituanpifa','cjjtpf','GYS003'],['g4','名烟名酒城','mingyanmingjiucheng','mymjc','GYS004'],
+  ['g5','华润万家配送','huarunwanjiapeisong','hrwjps','GYS005'],
+].map(a=>({id:a[0],name:a[1],py:a[2],init:a[3],code:a[4]}));
+const CUSTOMERS = [
+  ['c1','老张烟酒行','laozhangyanjiuhang','lzyjh','KH001'],['c2','城东餐饮集团','chengdongcanyinjituan','cdcyjt','KH002'],
+  ['c3','喜来登酒店','xilaidengjiudian','xldjd','KH003'],['c4','婚庆批发王','hunqingpifawang','hqpfw','KH004'],
+  ['c5','社区团购站','shequtuangouzhan','sqtgz','KH005'],
+].map(a=>({id:a[0],name:a[1],py:a[2],init:a[3],code:a[4]}));
+const WAREHOUSES = [{id:'w1',name:'主仓'},{id:'w2',name:'二号仓'},{id:'w3',name:'冷藏库'}];
+const ORIGINS=[['o1','贵州茅台镇'],['o2','四川宜宾'],['o3','四川泸州'],['o4','江苏宿迁'],['o5','山西汾阳'],['o6','安徽亳州']].map(a=>({id:a[0],name:a[1],py:'',init:''}));
+const SHELF=[['h1','长期'],['h2','36个月'],['h3','24个月'],['h4','18个月']].map(a=>({id:a[0],name:a[1],py:'',init:''}));
+const STORAGE=[['t1','常温避光'],['t2','阴凉干燥'],['t3','防潮防晒']].map(a=>({id:a[0],name:a[1],py:'',init:''}));
+const DOCS=[['d1','酱香型产品说明'],['d2','浓香型产品说明'],['d3','清香型产品说明']].map(a=>({id:a[0],name:a[1],py:'',init:''}));
+const DICT = {series:SERIES,specs:SPECS,names:NAMES,suppliers:SUPPLIERS,customers:CUSTOMERS,warehouses:WAREHOUSES,origins:ORIGINS,shelf:SHELF,storage:STORAGE,docs:DOCS};
+const OPTFIELDS=[{k:'origin',label:'产地',dict:'origins'},{k:'shelfLife',label:'保质期',dict:'shelf'},{k:'storage',label:'储存方式',dict:'storage'},{k:'doc',label:'介绍文档',dict:'docs'}];
+
+/* ---------------- 模式配置（入库 / 出库镜像差异）---------------- */
+const MODES = {
+  in:{ title:'入库单', partnerLabel:'供应商', partnerDict:'suppliers', handler:'入库员',
+       cols:['idx','name','series','spec','prodDate','batch','qty','price','sale','amount','act'] },
+  out:{ title:'出库单', partnerLabel:'客户', partnerDict:'customers', handler:'出库员',
+        cols:['idx','name','series','spec','avail','qty','price','sale','amount','act'] },
+};
+const COLDEF = {
+  idx:{type:'idx',w:38},
+  name:{type:'combo',label:'商品名称',dict:'names',req:true,create:true,grow:true},
+  series:{type:'combo',label:'系列',dict:'series',req:true,create:true,w:104,common:true},
+  spec:{type:'combo',label:'规格',dict:'specs',req:true,create:true,w:116,common:true},
+  prodDate:{type:'date',label:'生产日期',req:true,w:150},
+  batch:{type:'text',label:'批次号',req:true,w:108,ph:'必填'},
+  avail:{type:'avail',label:'可用库存',w:92,num:true},
+  qty:{type:'num',label:'数量',req:true,w:78,num:true},
+  price:{type:'num',label:'单价',req:true,w:96,num:true,money:true},
+  sale:{type:'num',label:'出售价格',req:true,w:104,num:true,money:true},
+  amount:{type:'amount',label:'金额',w:104,num:true},
+  act:{type:'act',w:62},
+};
+// 录单可聚焦字段顺序（出库的 series/spec/avail 只读，不进流）
+function editFields(mode){ return MODES[mode].cols.filter(k=>['combo','date','text','num'].includes(COLDEF[k].type) && !(mode==='out'&&(k==='series'||k==='spec'))); }
+function reqFields(mode){ return editFields(mode).filter(k=>COLDEF[k].req); }
+
+/* ---------------- 状态 ---------------- */
+let mode='in', status='new';
+const state = { doc:{partner:null,warehouse:null,date:today(),remark:''}, rows:[], docErr:new Set() };
+function today(){ const d=new Date(); return d.toISOString().slice(0,10); }
+function newRow(){ return {id:'r'+(++SEQ), name:null,series:null,spec:null,prodDate:'',batch:'',qty:'1',price:'',sale:'',avail:null,expanded:false,origin:null,shelfLife:null,storage:null,doc:null,_err:new Set()}; }
+
+/* ---------------- 工具 ---------------- */
+function idName(dictKey,id){ if(id==null) return ''; const o=(DICT[dictKey]||[]).find(x=>x.id===id); return o?o.name:''; }
+function fmt(n){ return '¥'+(Number(n)||0).toLocaleString('zh-CN',{minimumFractionDigits:2,maximumFractionDigits:2}); }
+function rowAmount(r){ return (parseFloat(r.qty)||0)*(parseFloat(r.price)||0); }
+function grandTotal(){ return state.rows.reduce((s,r)=>s+rowAmount(r),0); }
+// 入库进价留空/0 = 待定价（暂估），金额显示「待定价」橙色；确认进价后回填
+function isPending(r){ return mode==='in' && (!r.price || (parseFloat(r.price)||0)<=0); }
+function amtHTML(r){ return isPending(r) ? '<span class="pending-price">待定价</span>' : fmt(rowAmount(r)); }
+function esc(s){ return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;'); }
+function match(o,kw){ kw=(kw||'').trim().toLowerCase(); if(!kw)return true; return o.name.toLowerCase().includes(kw)||(o.py&&o.py.includes(kw))||(o.init&&o.init.includes(kw))||(o.code&&o.code.toLowerCase().includes(kw)); }
+function highlight(name,kw){ kw=(kw||'').trim(); if(!kw)return esc(name); const i=name.toLowerCase().indexOf(kw.toLowerCase()); if(i<0)return esc(name); return esc(name.slice(0,i))+'<span class="hl">'+esc(name.slice(i,i+kw.length))+'</span>'+esc(name.slice(i+kw.length)); }
+
+/* ---------------- 选项来源（按模式过滤）---------------- */
+function optionsFor(combo){
+  const dict=combo.dataset.dict, field=combo.dataset.field;
+  if(field==='partner') return mode==='in'?SUPPLIERS:CUSTOMERS;
+  if(dict==='names') return mode==='out'?NAMES.filter(n=>n.stock>0):NAMES;
+  return DICT[dict]||[];
+}
+function commonIdsFor(combo){
+  if(combo.dataset.scope!=='row') return null;
+  const i=+combo.dataset.row, r=state.rows[i]; if(!r||!r.name) return null;
+  const nm=NAMES.find(n=>n.id===r.name); if(!nm) return null;
+  if(combo.dataset.field==='series') return [nm.dSeries];
+  if(combo.dataset.field==='spec') return [nm.dSpec];
+  return null;
+}
+function curValueOf(combo){
+  const f=combo.dataset.field;
+  if(combo.dataset.scope==='doc') return state.doc[f];
+  return state.rows[+combo.dataset.row][f];
+}
+function displayOf(combo){ return idName(combo.dataset.dict, curValueOf(combo)); }
+
+/* ---------------- combo 控制器 ---------------- */
+let activeCombo=null, comboState=null;
+const pop=document.createElement('div'); pop.className='combo-pop'; pop.style.display='none'; document.body.appendChild(pop);
+
+function openCombo(combo){
+  if(activeCombo===combo) return;
+  closeCombo();
+  activeCombo=combo;
+  const input=combo.querySelector('input');
+  if(!input.dataset.ph0) input.dataset.ph0=input.getAttribute('placeholder')||'搜索…';
+  const sel=displayOf(combo);
+  input.value='';
+  input.placeholder=sel||input.dataset.ph0;
+  combo.classList.add('open');
+  renderPop(combo);
+}
+function renderPop(combo){
+  const input=combo.querySelector('input'); const kw=input.value;
+  const opts=optionsFor(combo); const common=commonIdsFor(combo);
+  const cur=curValueOf(combo);
+  const matched=opts.filter(o=>match(o,kw));
+  const create=combo.dataset.create==='1' && kw.trim() && !opts.some(o=>o.name===kw.trim());
+  let html=''; const list=[];
+  const itemHTML=(o)=>{ const sel=o.id===cur; list.push({type:'opt',id:o.id}); const code=o.code?`<small>${esc(o.code)}</small>`:''; const ck=sel?'<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><path d="M5 12l5 5 9-9"/></svg>':''; return `<div class="cp-item ${sel?'sel':''}" data-i="${list.length-1}"><span class="nm">${highlight(o.name,kw)}</span>${code}${ck}</div>`; };
+  if(common && !kw.trim()){
+    const com=matched.filter(o=>common.includes(o.id)); const rest=matched.filter(o=>!common.includes(o.id));
+    if(com.length){ html+='<div class="cp-grp">常用</div>'+com.map(itemHTML).join(''); }
+    if(rest.length){ html+='<div class="cp-grp">全部</div>'+rest.map(itemHTML).join(''); }
+  } else {
+    html += matched.length? matched.map(itemHTML).join('') : (create?'':'<div class="cp-empty">无匹配结果</div>');
+  }
+  let listHtml='<div class="cp-list">'+html+'</div>';
+  if(create){ list.push({type:'new',kw:kw.trim()}); listHtml+=`<div class="cp-new" data-i="${list.length-1}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>新增「${esc(kw.trim())}」到基础数据</div>`; }
+  // 单据头 combo（供应商/仓库）：弹层置顶显式搜索框（持久，避免重渲染丢焦点）；网格 combo 仍用「输入即搜+键盘流」
+  if(combo.dataset.scope==='doc'){
+    const withSummary=combo.dataset.summary==='1';
+    let body=pop.querySelector('.cp-body');
+    if(!body){
+      const ph=combo.dataset.field==='partner'?('搜索'+(mode==='in'?'供应商':'客户')+'…'):'搜索仓库…';
+      pop.innerHTML=`<div class="cp-search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg><input class="cps-input" placeholder="${ph}"></div><div class="cp-body"></div>${withSummary?'<div class="cp-foot"></div>':''}`;
+      const cps=pop.querySelector('.cps-input'); const fieldInput=combo.querySelector('input');
+      cps.value=fieldInput.value;
+      cps.addEventListener('input',()=>{ fieldInput.value=cps.value; renderPop(combo); });
+      setTimeout(()=>{ cps.focus(); cps.setSelectionRange(cps.value.length,cps.value.length); },0);
+      body=pop.querySelector('.cp-body');
+    }
+    body.innerHTML=listHtml;
+    if(withSummary){ const foot=pop.querySelector('.cp-foot'); if(foot) foot.innerHTML = kw.trim()? `匹配 <b>${matched.length}</b> 条 · 共 <b>${opts.length}</b> 条` : `共 <b>${opts.length}</b> 条结果`; }
+  } else {
+    pop.innerHTML=listHtml;
+  }
+  // 位置
+  const r=combo.getBoundingClientRect();
+  const w=Math.max(r.width, 220);
+  pop.style.display='flex'; pop.style.width=w+'px'; pop.style.left=Math.min(r.left, window.innerWidth-w-8)+'px';
+  pop.style.top=(r.bottom+4)+'px';
+  const ph=pop.getBoundingClientRect();
+  if(r.bottom+ph.height+8>window.innerHeight && r.top-ph.height-4>0){ pop.style.top=(r.top-ph.height-4)+'px'; }
+  // 当前高亮：选中项优先，否则首项
+  let curIdx=list.findIndex(x=>x.type==='opt'&&x.id===cur); if(curIdx<0) curIdx=list.length?0:-1;
+  comboState={combo,list,cur:curIdx};
+  paintCur();
+}
+function paintCur(){ pop.querySelectorAll('.cp-item,.cp-new').forEach(el=>el.classList.toggle('cur', +el.dataset.i===comboState.cur)); const el=pop.querySelector('.cur'); if(el) el.scrollIntoViewIfNeeded?.(); }
+function moveCur(d){ if(!comboState||!comboState.list.length) return; comboState.cur=(comboState.cur+d+comboState.list.length)%comboState.list.length; paintCur(); }
+pop.addEventListener('mousedown',e=>{ const it=e.target.closest('[data-i]'); if(!it) return; e.preventDefault(); comboState.cur=+it.dataset.i; pickCur(); });
+pop.addEventListener('mousemove',e=>{ const it=e.target.closest('[data-i]'); if(it && comboState){ comboState.cur=+it.dataset.i; paintCur(); } });
+
+function pickCur(){ if(!comboState) return; const item=comboState.list[comboState.cur]; if(!item) return; pickCombo(activeCombo,item); }
+function pickCombo(combo,item){
+  const field=combo.dataset.field, scope=combo.dataset.scope;
+  let id=item.id;
+  if(item.type==='new'){ id=addDict(combo.dataset.dict,item.kw); }
+  if(scope==='doc'){
+    state.doc[field]=id; state.docErr.delete(field);
+    closePop(); const input=combo.querySelector('input'); input.value=idName(combo.dataset.dict,id); combo.classList.add('has'); combo.classList.remove('error'); paintCaf(combo);
+    refreshSummary(); draftSave();
+    return;
+  }
+  // row
+  const i=+combo.dataset.row, r=state.rows[i];
+  r[field]=id; r._err.delete(field);
+  if(field==='name'){ const nm=NAMES.find(n=>n.id===id);
+    if(mode==='in'){ if(!r.series)r.series=nm.dSeries; if(!r.spec)r.spec=nm.dSpec; if(!r.price)r.price=String(nm.cost); if(!r.sale)r.sale=String(nm.sale); }
+    else { r.series=nm.dSeries; r.spec=nm.dSpec; r.price=String(nm.sale); r.sale=String(nm.sale); r.avail=nm.stock; }
+  }
+  closePop();
+  renderDetail(); updateTotals(); draftSave();
+  if(editFields(mode).includes(field)) advance(i, field);
+}
+function addDict(key,name){ const id='x'+(++SEQ); const o={id,name,py:name.toLowerCase(),init:name.toLowerCase()}; if(key==='names'){Object.assign(o,{dSeries:'s53',dSpec:'p500',cost:0,sale:0,stock:0});} (DICT[key]||DICT.names).push(o); toast('已新增「'+name+'」到基础数据'); return id; }
+function comboCaf(span){ const combo=span.closest('.combo'); if(combo.classList.contains('has')){ // 清除
+    const f=combo.dataset.field;
+    if(combo.dataset.scope==='doc'){ state.doc[f]=null; combo.classList.remove('has'); combo.querySelector('input').value=''; paintCaf(combo); refreshSummary(); draftSave(); }
+    else { const i=+combo.dataset.row; state.rows[i][f]=null; renderDetail(); }
+  } else { combo.querySelector('input').focus(); }
+}
+function paintCaf(combo){ const has=combo.classList.contains('has'); const svg=combo.querySelector('.caf svg'); if(svg) svg.innerHTML = has? '<path d="M6 6l12 12M18 6L6 18"/>' : '<path d="M6 9l6 6 6-6"/>'; }
+function closePop(){ pop.style.display='none'; pop.innerHTML=''; if(activeCombo) activeCombo.classList.remove('open'); activeCombo=null; comboState=null; }
+function closeCombo(){ if(!activeCombo) return; const combo=activeCombo, input=combo.querySelector('input'); input.value=displayOf(combo); closePop(); }
+
+/* ---------------- 键盘流 ---------------- */
+function focusCell(rowIdx,field){
+  const host=document.querySelector(`[data-row="${rowIdx}"][data-field="${field}"]`);
+  if(!host) return false;
+  if(host.classList&&host.classList.contains('datefield')){ host.focus(); return true; }
+  const input = host.matches('input')? host : host.querySelector('input');
+  if(input){ input.focus(); input.select&&input.select(); return true; }
+  return false;
+}
+function advance(rowIdx,fromField){
+  const flds=editFields(mode), reqs=reqFields(mode);
+  let start=flds.indexOf(fromField)+1;
+  for(let k=start;k<flds.length;k++){ if(reqs.includes(flds[k]) && !state.rows[rowIdx][flds[k]]){ focusCell(rowIdx,flds[k]); return; } }
+  // 本行已满足 → 找后续行第一个空必填
+  for(let i=rowIdx+1;i<state.rows.length;i++){ for(const f of flds){ if(reqs.includes(f)&&!state.rows[i][f]){ focusCell(i,f); return; } } }
+  // 末行末格 → 加行
+  if(rowIdx===state.rows.length-1){ addRow(true); }
+  else focusCell(rowIdx+1, flds[0]);
+}
+function retreat(rowIdx,fromField){
+  const flds=editFields(mode); let k=flds.indexOf(fromField)-1;
+  if(k>=0) return focusCell(rowIdx,flds[k]);
+  if(rowIdx>0) return focusCell(rowIdx-1, flds[flds.length-1]);
+}
+
+/* ---------------- 行操作 ---------------- */
+function addRow(focusIt){ state.rows.push(newRow()); renderDetail(); updateTotals(); draftSave(); if(focusIt){ const i=state.rows.length-1; focusCell(i, editFields(mode)[0]); } }
+function delRow(i){ if(state.rows.length<=1){ state.rows=[newRow()]; } else state.rows.splice(i,1); renderDetail(); updateTotals(); draftSave(); }
+function copyRow(i){ const s=state.rows[i]; const r=newRow(); r.name=s.name; r.series=s.series; r.spec=s.spec; r.price=s.price; r.sale=s.sale; r.avail=s.avail; state.rows.splice(i+1,0,r); renderDetail(); updateTotals(); draftSave(); focusCell(i+1, mode==='in'?'prodDate':'qty'); }
+function copyLast(){ if(state.rows.length) copyRow(state.rows.length-1); }
+function copyRowFromFocus(){ const el=document.activeElement; const host=el&&el.closest&&el.closest('[data-row]'); if(host) copyRow(+host.dataset.row); else if(state.rows.length) copyRow(state.rows.length-1); }
+
+/* ---------------- 渲染：明细（网格 / 卡片）---------------- */
+const detail=document.getElementById('detail');
+function readonlyMode(){ return status==='pending'||status==='approved'; }
+function comboHTML(i,field,dict,create,cell,ph){ const r=state.rows[i]; const val=idName(dict,r[field]); const has=!!r[field]; const err=(r._err&&r._err.has(field))?'error':''; const xsvg=has?'<path d="M6 6l12 12M18 6L6 18"/>':'<path d="M6 9l6 6 6-6"/>';
+  return `<div class="combo ${cell?'cell':''} ${has?'has':''} ${err}" data-scope="row" data-row="${i}" data-field="${field}" data-dict="${dict}" data-create="${create?1:0}"><input data-row="${i}" data-field="${field}" placeholder="${esc(ph)}" value="${esc(val)}" autocomplete="off"><span class="caf" onclick="event.stopPropagation();comboCaf(this)"><svg viewBox="0 0 24 24" stroke-width="2">${xsvg}</svg></span></div>`; }
+function comboCellHTML(i,field,cell){ const def=COLDEF[field]; const ph=field==='name'?'搜索名称/拼音…':'选择'+def.label; return comboHTML(i,field,def.dict,!!def.create,cell,ph); }
+function optRowHTML(i,nCols){ const fields=OPTFIELDS.map(f=>`<div class="opt-field"><label>${f.label}</label>${comboHTML(i,f.k,f.dict,false,false,'选择'+f.label+'（可选）')}</div>`).join(''); return `<tr class="gsub"><td class="gsub-pad" colspan="${nCols}"><div class="opt-head">选填信息 · 产地 / 保质期 / 储存方式 / 介绍文档</div><div class="opt-grid">${fields}</div></td></tr>`; }
+
+let curLayout=null;
+function viewportW(){ return document.documentElement.clientWidth || window.innerWidth || 1024; }
+function renderDetail(){
+  closePop(); renderDetailHead();
+  const layout = viewportW()<600?'cards':'grid';
+  curLayout=layout;
+  detail.innerHTML = layout==='grid'? gridHTML() : cardsHTML();
+}
+function relayout(){ const layout=viewportW()<600?'cards':'grid'; if(layout!==curLayout) renderDetail(); }
+function renderDetailHead(){ const el=document.getElementById('dhAct'); if(!el) return; let h=''; if(readonlyMode()){ el.innerHTML=''; return; } if(mode==='out') h+=`<div class="btn ghost sm" onclick="openStockPicker()"><svg viewBox="0 0 24 24"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/></svg>从库存批量选择</div>`; h+=`<div class="btn ghost sm" onclick="copyLast()"><svg viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/></svg>复制上一行</div>`; el.innerHTML=h; }
+function toggleExpand(i){ state.rows[i].expanded=!state.rows[i].expanded; renderDetail(); }
+function gridHTML(){
+  const cols=MODES[mode].cols; const ro=readonlyMode();
+  let head='<tr>'+cols.map(k=>{ const d=COLDEF[k]; if(k==='idx')return '<th class="gidx">#</th>'; if(k==='act')return '<th class="gact"></th>'; const req=d.req&&!(mode==='in'&&k==='price'); const cls=(d.num?'num ':'')+(req?'req':''); const style=d.w?`style="width:${d.w}px"`:''; const lbl=(mode==='in'&&k==='price')?'单价<small style="color:var(--faint);font-weight:400">（可待定）</small>':(d.label||''); return `<th class="${cls}" ${style}>${lbl}</th>`; }).join('')+'</tr>';
+  let body=state.rows.map((r,i)=>{
+    const rerr=r._err.size?'error':'';
+    const tds=cols.map(k=>{ const d=COLDEF[k];
+      if(k==='idx') return `<td class="gidx">${i+1}</td>`;
+      if(k==='name') return `<td class="cpad">${comboCellHTML(i,'name',true)}</td>`;
+      if(k==='series'||k==='spec'){ if(mode==='out') return `<td class="ro">${esc(idName(d.dict,r[k]))||'<span style="color:var(--faint)">—</span>'}</td>`; return `<td class="cpad">${comboCellHTML(i,k,true)}</td>`; }
+      if(k==='avail'){ const v=r.avail; const c=v==null?'color:var(--faint)':(v<=0?'color:var(--danger)':''); return `<td class="ro num" style="${c}">${v==null?'—':v}</td>`; }
+      if(k==='prodDate'){ const ph=r.prodDate?'':' ph'; return `<td class="cpad"><div class="datefield gci-date ${r._err.has('prodDate')?'error':''} ${ro?'disabled':''}" tabindex="0" data-row="${i}" data-field="prodDate" data-val="${esc(r.prodDate)}"><span class="dval${ph}">${r.prodDate?esc(r.prodDate):'选择日期'}</span><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg></div></td>`; }
+      if(k==='batch') return `<td class="cpad"><input class="gci ${r._err.has('batch')?'error':''}" data-row="${i}" data-field="batch" value="${esc(r.batch)}" placeholder="批次号" ${ro?'disabled':''}></td>`;
+      if(k==='qty') return `<td class="cpad num"><input class="gci ${r._err.has('qty')?'error':''}" inputmode="decimal" data-row="${i}" data-field="qty" value="${esc(r.qty)}" ${ro?'disabled':''}></td>`;
+      if(k==='price') return `<td class="cpad num"><input class="gci ${r._err.has('price')?'error':''}" inputmode="decimal" data-row="${i}" data-field="price" value="${esc(r.price)}" placeholder="0.00" ${ro?'disabled':''}></td>`;
+      if(k==='sale') return `<td class="cpad num"><input class="gci ${r._err.has('sale')?'error':''}" inputmode="decimal" data-row="${i}" data-field="sale" value="${esc(r.sale)}" placeholder="0.00" ${ro?'disabled':''}></td>`;
+      if(k==='amount') return `<td class="amt num" data-amt="${i}">${amtHTML(r)}</td>`;
+      if(k==='act'){ const exp = mode==='in'?`<svg class="gexp ${r.expanded?'on':''}" title="选填项（产地/保质期/储存/介绍）" onclick="toggleExpand(${i})" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>`:''; return `<td class="gact"><div class="gact-in">${exp}<svg title="复制本行" onclick="copyRow(${i})" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/></svg><svg class="gdel" title="删除" onclick="delRow(${i})" viewBox="0 0 24 24"><path d="M4 7h16M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></svg></div></td>`; }
+      return '<td></td>';
+    }).join('');
+    return `<tr class="gr ${rerr}" data-rowtr="${i}">${tds}</tr>` + (mode==='in'&&r.expanded?optRowHTML(i,cols.length):'');
+  }).join('');
+  const add = ro?'':`<div class="grid-add" onclick="addRow(true)"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>添加商品<kbd>末格 Enter 自动加行</kbd></div>`;
+  return `<div class="grid"><div class="grid-scroll"><table><thead>${head}</thead><tbody>${body}</tbody></table></div>${add}</div>`;
+}
+function cardsHTML(){
+  const ro=readonlyMode();
+  const cards=state.rows.map((r,i)=>{
+    const rerr=r._err.size?'error':'';
+    const sub=[idName('series',r.series),idName('specs',r.spec)].filter(Boolean).join(' · ');
+    let rows='';
+    rows+=mrow('名称',true,comboCellHTML(i,'name',false));
+    if(mode==='in'){ rows+=mrow('系列',true,comboCellHTML(i,'series',false)); rows+=mrow('规格',true,comboCellHTML(i,'spec',false));
+      rows+=mrow('生产日期',true,`<div class="datefield ${r._err.has('prodDate')?'error':''} ${ro?'disabled':''}" tabindex="0" data-row="${i}" data-field="prodDate" data-val="${esc(r.prodDate)}"><span class="dval${r.prodDate?'':' ph'}">${r.prodDate?esc(r.prodDate):'选择日期'}</span><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg></div>`);
+      rows+=mrow('批次号',true,`<input data-row="${i}" data-field="batch" value="${esc(r.batch)}" class="${r._err.has('batch')?'error':''}" placeholder="批次号" ${ro?'disabled':''}>`);
+      rows+=`<div class="mrow"><label></label><div class="mv"><span style="color:var(--muted);cursor:pointer;font-size:var(--fs-sm)" onclick="toggleExpand(${i})">${r.expanded?'⌃ 收起选填项':'⌄ 展开选填项（产地/保质期/储存…）'}</span></div></div>`;
+      if(r.expanded){ OPTFIELDS.forEach(f=>{ rows+=mrow(f.label,false,comboHTML(i,f.k,f.dict,false,false,'选择'+f.label)); }); }
+    } else {
+      rows+=mrow('系列',false,`<span style="color:var(--muted)">${esc(idName('series',r.series))||'—'}</span>`);
+      rows+=mrow('规格',false,`<span style="color:var(--muted)">${esc(idName('specs',r.spec))||'—'}</span>`);
+      rows+=mrow('可用库存',false,`<span style="color:${r.avail<=0?'var(--danger)':'var(--muted)'}">${r.avail==null?'—':r.avail}</span>`);
+    }
+    rows+=mrow('数量',true,`<input inputmode="decimal" data-row="${i}" data-field="qty" value="${esc(r.qty)}" class="${r._err.has('qty')?'error':''}" ${ro?'disabled':''}>`);
+    rows+=mrow(mode==='in'?'单价（可待定）':'单价',mode!=='in',`<input inputmode="decimal" data-row="${i}" data-field="price" value="${esc(r.price)}" placeholder="${mode==='in'?'留空=待定价':'0.00'}" class="${r._err.has('price')?'error':''}" ${ro?'disabled':''}>`);
+    rows+=mrow('出售价格',true,`<input inputmode="decimal" data-row="${i}" data-field="sale" value="${esc(r.sale)}" placeholder="0.00" class="${r._err.has('sale')?'error':''}" ${ro?'disabled':''}>`);
+    rows+=`<div class="mrow"><label>金额</label><div class="mv amt" data-amt="${i}">${amtHTML(r)}</div></div>`;
+    const act=ro?'':`<div class="mact"><svg title="复制" onclick="copyRow(${i})" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/></svg><svg class="gdel" title="删除" onclick="delRow(${i})" viewBox="0 0 24 24"><path d="M4 7h16M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></svg></div>`;
+    return `<div class="mcard ${rerr}"><div class="mcard-head"><span class="mt">商品 ${i+1}</span>${sub?`<span class="msub">${esc(sub)}</span>`:''}${act}</div><div class="mcard-body">${rows}</div></div>`;
+  }).join('');
+  const add=ro?'':`<div class="btn ghost" style="justify-content:center" onclick="addRow(true)"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>添加商品</div>`;
+  return `<div class="mcards">${cards}${add}</div>`;
+}
+function mrow(label,req,inner){ return `<div class="mrow"><label class="${req?'req':''}">${label}</label><div class="mv">${inner}</div></div>`; }
+
+function updateTotals(){
+  state.rows.forEach((r,i)=>{ const el=document.querySelector(`[data-amt="${i}"]`); if(el) el.innerHTML=amtHTML(r); });
+  document.getElementById('grandTotal').textContent=fmt(grandTotal());
+  document.getElementById('rowsN').textContent='明细 '+state.rows.length+' 行';
+}
+
+/* ---------------- 单据头 ---------------- */
+function refreshSummary(){
+  const p=idName(MODES[mode].partnerDict,state.doc.partner)||'—';
+  const w=idName('warehouses',state.doc.warehouse)||'—';
+  document.getElementById('docSummary').innerHTML=`<b>${esc(w)}</b> · ${esc(p)} · ${esc(state.doc.date)}`;
+}
+function syncDocCombos(){
+  document.querySelectorAll('.combo[data-scope="doc"]').forEach(c=>{ const v=curValueOf(c); const t=idName(c.dataset.dict,v); c.querySelector('input').value=t; c.classList.toggle('has',!!v); c.classList.toggle('error',state.docErr.has(c.dataset.field)); paintCaf(c); });
+}
+
+/* ---------------- 校验 ---------------- */
+function validate(asDraft){
+  state.docErr.clear(); state.rows.forEach(r=>r._err.clear());
+  let first=null; const flag=(msg,focusFn)=>{ if(!first) first={msg,focusFn}; };
+  // 仓库：草稿也校验
+  if(!state.doc.warehouse){ state.docErr.add('warehouse'); flag(mode==='in'?'请选择入库仓库':'请选择出库仓库',()=>focusDoc('warehouse')); }
+  if(!state.rows.length){ flag('请至少添加一条明细',()=>{}); }
+  // 数量>0：草稿也校验
+  state.rows.forEach((r,i)=>{ if((parseFloat(r.qty)||0)<=0){ r._err.add('qty'); flag(`第 ${i+1} 行数量必须大于 0`,()=>focusCell(i,'qty')); } });
+  if(!asDraft){
+    if(!state.doc.partner){ state.docErr.add('partner'); flag(`请选择${MODES[mode].partnerLabel}`,()=>focusDoc('partner')); }
+    state.rows.forEach((r,i)=>{
+      if(!r.name){ r._err.add('name'); flag(`第 ${i+1} 行请选择商品名称`,()=>focusCell(i,'name')); }
+      if(mode==='in'){
+        if(!r.series){ r._err.add('series'); flag(`第 ${i+1} 行请选择系列`,()=>focusCell(i,'series')); }
+        if(!r.spec){ r._err.add('spec'); flag(`第 ${i+1} 行请选择规格`,()=>focusCell(i,'spec')); }
+        if(!r.prodDate){ r._err.add('prodDate'); flag(`第 ${i+1} 行请填写生产日期`,()=>focusCell(i,'prodDate')); }
+        if(!r.batch || !r.batch.trim()){ r._err.add('batch'); flag(`第 ${i+1} 行请填写批次号`,()=>focusCell(i,'batch')); }
+      } else {
+        if(r.avail!=null && (parseFloat(r.qty)||0)>r.avail){ r._err.add('qty'); flag(`第 ${i+1} 行数量超出可用库存（${r.avail}）`,()=>focusCell(i,'qty')); }
+      }
+      if(mode!=='in' && (!r.price || (parseFloat(r.price)||0)<=0)){ r._err.add('price'); flag(`第 ${i+1} 行请填写单价`,()=>focusCell(i,'price')); }
+      if(!r.sale || (parseFloat(r.sale)||0)<=0){ r._err.add('sale'); flag(`第 ${i+1} 行请填写出售价格`,()=>focusCell(i,'sale')); }
+    });
+  }
+  renderDetail(); syncDocCombos();
+  if(first){ toast(first.msg); setTimeout(()=>first.focusFn&&first.focusFn(),30); return false; }
+  return true;
+}
+function focusDoc(field){ const c=document.querySelector(`.combo[data-scope="doc"][data-field="${field}"]`); if(c) c.querySelector('input').focus(); }
+
+/* ---------------- 状态机 + 操作栏 ---------------- */
+function setStatus(s){ status=s; renderActions(); renderDetail(); syncDocLock(); }
+function syncDocLock(){ const ro=readonlyMode(); document.getElementById('remark').disabled=ro; document.getElementById('orderDate').classList.toggle('disabled',ro); document.querySelectorAll('.combo[data-scope="doc"] input').forEach(i=>i.readOnly=ro); }
+const STBADGE={draft:'草稿',pending:'待审核',approved:'已通过',rejected:'已驳回'};
+function renderActions(){
+  const b=document.getElementById('statusBadge');
+  if(STBADGE[status]){ b.style.display='inline-flex'; b.className='badge b-'+STBADGE[status]; b.textContent=STBADGE[status]; } else b.style.display='none';
+  document.getElementById('pageTitle').textContent=(status==='new'?'新建':'')+MODES[mode].title;
+  let desk='',mob='';
+  if(status==='pending'){
+    desk=`<div class="btn ghost" onclick="withdraw()">撤回</div><div class="btn ghost danger-txt" onclick="reject()">驳回</div><div class="btn primary" onclick="approve()">审核通过</div>`;
+    mob=`<div class="btn primary" onclick="approve()">通过</div><div class="btn ghost" id="ovfBtn" onclick="overflowMenu(this)">⋯</div>`;
+  } else if(status==='approved'){
+    desk=`<div class="btn ghost" onclick="toast('打印预览（原型）')"><svg viewBox="0 0 24 24"><path d="M6 9V2h12v7M6 18H4v-6h16v6h-2M8 14h8v7H8z"/></svg>打印</div><div class="btn ghost" onclick="resetForm()">复制为新单</div>`;
+    mob=`<div class="btn ghost" onclick="toast('打印预览（原型）')">打印</div>`;
+  } else {
+    const submitLabel=status==='rejected'?'重新提交':'提交审核';
+    desk=`<div class="btn ghost" onclick="doSubmit(true)">暂存草稿</div><div class="btn primary" onclick="doSubmit(false)"><svg viewBox="0 0 24 24"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>${submitLabel}</div><div class="btn ghost" onclick="exitGuard()">取消</div>`;
+    mob=`<div class="btn primary" onclick="doSubmit(false)">${submitLabel}</div><div class="btn ghost" onclick="overflowMenu(this)">⋯</div>`;
+  }
+  document.getElementById('pageActions').innerHTML=`<div class="desk">${desk}</div><div class="mob">${mob}</div>`;
+  document.getElementById('footActions').innerHTML=`<div class="desk">${desk}</div>`;
+}
+function overflowMenu(btn){ const items= status==='pending'?[['撤回','withdraw'],['驳回','reject']]:[['暂存草稿','draft'],['取消','cancel']]; openSmallMenu(btn,items); }
+function doSubmit(asDraft){
+  if(asDraft){ // 暂存草稿：不做任何校验，直接存
+    state.docErr.clear(); state.rows.forEach(r=>r._err.clear());
+    setStatus('draft'); syncDocCombos(); toast('已保存为草稿'); draftClear(); draftSave(); return;
+  }
+  if(!validate(false)) return;
+  setStatus('pending'); toast(MODES[mode].title+'已提交审核'); draftClear();
+}
+function approve(){ setStatus('approved'); toast('审核通过 · 库存已更新、流水已记账（后端事务）'); renderNotice(); }
+function withdraw(){ setStatus('draft'); toast('已撤回到草稿'); }
+function reject(){ openOv('驳回单据', `<label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px;">驳回理由</label><textarea id="rejReason" class="remark" style="width:100%;min-height:70px;border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;font-size:var(--fs-body);color:var(--text);background:var(--surface);outline:none;font-family:var(--font);" placeholder="请说明驳回原因，便于录单员修改…">单价高于近期采购价，请核实后重报。</textarea>`,
+  [['取消','ghost','closeOv()'],['确认驳回','danger','confirmReject()']]); }
+let rejectReason='';
+function confirmReject(){ rejectReason=document.getElementById('rejReason').value.trim()||'（未填写理由）'; closeOv(); setStatus('rejected'); renderNotice(); toast('已驳回'); }
+
+/* ---------------- 提示条（草稿恢复 / 驳回理由）---------------- */
+function renderNotice(){
+  const slot=document.getElementById('noticeSlot'); slot.innerHTML='';
+  if(status==='rejected'){ slot.innerHTML=`<div class="notice danger"><svg viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9L2 18a2 2 0 001.7 3h16.6a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z"/></svg><div>单据被驳回：${esc(rejectReason)}</div></div>`; return; }
+  if(status==='approved'){ slot.innerHTML=`<div class="notice info"><svg viewBox="0 0 24 24"><path d="M5 12l5 5 9-9"/></svg><div>已通过审核，库存与流水已由后端在同一事务更新。本单据现为只读。</div></div>`; return; }
+}
+
+/* ---------------- 草稿持久化 ---------------- */
+let draftT=null;
+function draftKey(){ return 'jiu-recdoc-'+mode; }
+function isDirty(){ if(state.doc.partner||state.doc.warehouse||state.doc.remark.trim()) return true; return state.rows.some(r=>r.name||r.batch||r.prodDate||(r.price&&+r.price>0)); }
+function draftSave(){ if(readonlyMode()) return; clearTimeout(draftT); draftT=setTimeout(()=>{ if(!isDirty()){ localStorage.removeItem(draftKey()); return; } localStorage.setItem(draftKey(), JSON.stringify({doc:state.doc,rows:state.rows.map(r=>({...r,_err:undefined})),ts:Date.now()})); },400); }
+function draftClear(){ localStorage.removeItem(draftKey()); }
+function maybeRestore(){
+  const slot=document.getElementById('noticeSlot'); slot.innerHTML='';
+  const raw=localStorage.getItem(draftKey()); if(!raw) return;
+  let d; try{ d=JSON.parse(raw); }catch(e){ return; }
+  if(!d.rows||!d.rows.some(r=>r.name||r.price)) return;
+  const t=new Date(d.ts).toLocaleString('zh-CN',{month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit'});
+  slot.innerHTML=`<div class="notice info"><svg viewBox="0 0 24 24"><path d="M12 8v4l3 2M3 12a9 9 0 1018 0 9 9 0 00-18 0z"/></svg><div>检测到未提交的${MODES[mode].title}草稿（${t}），是否恢复？</div><div class="nb"><span class="lk" onclick="restoreDraft()">恢复</span><span class="lk" style="color:var(--muted)" onclick="discardDraft()">放弃</span></div></div>`;
+}
+function restoreDraft(){ const d=JSON.parse(localStorage.getItem(draftKey())); state.doc=Object.assign({remark:''},d.doc); state.rows=d.rows.map(r=>Object.assign(newRow(),r,{_err:new Set()})); document.getElementById('noticeSlot').innerHTML=''; setDateField(document.getElementById('orderDate'),state.doc.date); document.getElementById('remark').value=state.doc.remark||''; syncDocCombos(); refreshSummary(); renderDetail(); updateTotals(); toast('已恢复草稿'); }
+function discardDraft(){ draftClear(); document.getElementById('noticeSlot').innerHTML=''; }
+
+/* ---------------- 退出守卫 ---------------- */
+function exitGuard(){ if(!isDirty()){ resetForm(); toast('已取消'); return; } openOv('未保存的内容', `<div style="font-size:var(--fs-body);color:var(--text);line-height:1.6">当前${MODES[mode].title}尚未提交。是否保存为草稿，以免内容丢失？</div>`, [['继续编辑','ghost','closeOv()'],['放弃','danger','discardAndReset()'],['保存草稿','primary','closeOv();doSubmit(true)']]); }
+function discardAndReset(){ closeOv(); draftClear(); resetForm(); toast('已放弃录入'); }
+function resetForm(){ status='new'; state.doc={partner:null,warehouse:null,date:today(),remark:''}; state.docErr.clear(); state.rows=[newRow()]; setDateField(document.getElementById('orderDate'),state.doc.date); document.getElementById('remark').value=''; document.getElementById('noticeSlot').innerHTML=''; renderActions(); syncDocCombos(); syncDocLock(); refreshSummary(); renderDetail(); updateTotals(); }
+
+/* ---------------- 模式切换（入库 / 出库镜像）---------------- */
+function switchMode(m){ if(m===mode) return; mode=m; status='new';
+  document.querySelectorAll('#modeSeg button').forEach(b=>b.classList.toggle('on',b.dataset.mode===m));
+  document.getElementById('partnerLabel').innerHTML=MODES[m].partnerLabel+' <span class="req">*</span>';
+  const pc=document.querySelector('.combo[data-scope="doc"][data-field="partner"]'); pc.dataset.dict=MODES[m].partnerDict; pc.querySelector('input').setAttribute('placeholder', m==='in'?'选择或搜索供应商…':'选择或搜索客户…'); pc.querySelector('input').dataset.ph0='';
+  document.getElementById('handlerLabel').textContent=MODES[m].handler;
+  document.querySelector('.dochead-grid .field:nth-child(2) label').innerHTML=(m==='in'?'入库仓库':'出库仓库')+' <span class="req">*</span>';
+  document.getElementById('kbdHint').style.display = m==='in'?'':''; 
+  state.doc={partner:null,warehouse:null,date:today(),remark:''}; state.docErr.clear(); state.rows=[newRow()];
+  setDateField(document.getElementById('orderDate'),state.doc.date); document.getElementById('remark').value='';
+  renderActions(); syncDocCombos(); syncDocLock(); refreshSummary(); renderDetail(); updateTotals(); maybeRestore();
+}
+
+/* ---------------- 侧栏 / 主题 / 通用（承袭 inventory.html）---------------- */
+const NAVS=[{g:'单据'},{k:'stock-in',label:'入库管理',d:'M12 3v12 M8 11l4 4 4-4 M4 21h16'},{k:'stock-out',label:'出库管理',d:'M12 15V3 M8 7l4-4 4 4 M4 21h16'},{g:'经营'},{k:'inventory',label:'库存管理',d:'M3 7l9-4 9 4-9 4-9-4z M3 7v10l9 4 9-4V7 M12 11v10'},{k:'finance',label:'财务管理',d:'M3 5h18v14H3z M3 10h18'},{k:'partners',label:'往来单位',d:'M9 8a3 3 0 100-0.01 M3 20c0-3 3-5 6-5s6 2 6 5'},{k:'products',label:'基础数据',d:'M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z'},{g:'系统'},{k:'devices',label:'设备管理',d:'M4 4h16v12H4z M8 20h8 M12 16v4'},{k:'settings',label:'系统设置',d:'M12 9a3 3 0 100 6 3 3 0 000-6z M4 12h2 M18 12h2 M12 4v2 M12 18v2'},{k:'about',label:'关于我们',d:'M12 16v-4 M12 8h.01 M12 3a9 9 0 100 18 9 9 0 000-18z'}];
+function navSvg(d){ return `<svg viewBox="0 0 24 24">${d.split(' M').map((p,i)=>`<path d="${i?'M'+p:p}"/>`).join('')}</svg>`; }
+function buildNav(){ let h=''; for(const n of NAVS){ if(n.g){h+=`<div class="nav-label">${n.g}</div>`;continue;} const active=(n.k==='stock-in'&&mode==='in')||(n.k==='stock-out'&&mode==='out'); const HREF={inventory:'inventory.html',finance:'finance.html',partners:'partners.html',products:'products.html',settings:'settings.html',devices:'devices.html',about:'about.html'}; h+= HREF[n.k] ? `<a class="nav" href="${HREF[n.k]}">${navSvg(n.d)}${n.label}</a>` : `<div class="nav ${active?'active':''}" data-k="${n.k}" onclick="navClick('${n.k}')">${navSvg(n.d)}${n.label}</div>`; } h+=`<div class="side-foot"><div class="side-user" onclick="openUserMenu(event)"><div class="su-pic">王</div><div class="su-who"><b>王经理</b><span>鼎晟酒行 · 管理员</span></div><svg class="su-caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div></div>`; document.getElementById('side').innerHTML=h; }
+function navClick(k){ closeSide(); if(k==='stock-in'){ switchMode('in'); buildNav(); } else if(k==='stock-out'){ switchMode('out'); buildNav(); } }
+function closeSide(){ document.getElementById('side').classList.remove('open'); document.getElementById('scrim').classList.remove('show'); }
+document.getElementById('ham').onclick=()=>{ document.getElementById('side').classList.toggle('open'); document.getElementById('scrim').classList.toggle('show'); };
+document.getElementById('scrim').onclick=closeSide;
+
+const THEMES={a:{name:'经典蓝'},b:{name:'琥珀'},c:{name:'酒窖'}};
+document.getElementById('themePill').onclick=e=>{ const cur=document.documentElement.dataset.theme; openSmallMenu(e.currentTarget,Object.entries(THEMES).map(([k,v])=>[k.toUpperCase()+' · '+v.name,'theme:'+k]),true); };
+function setTheme(t){ document.documentElement.dataset.theme=t; document.getElementById('themeName').textContent=THEMES[t].name; localStorage.setItem('jiu-theme',t); }
+
+/* 小菜单（主题 / 溢出）*/
+let menuEl=null;
+function closeMenus(){ if(menuEl){menuEl.remove();menuEl=null;} }
+function openSmallMenu(t,items,isTheme){ closeMenus(); const r=t.getBoundingClientRect(); menuEl=document.createElement('div'); menuEl.className='menu'; menuEl.style.left=Math.min(r.left,window.innerWidth-180)+'px'; menuEl.style.top=(r.bottom+6)+'px'; menuEl.innerHTML=items.map(([label,act])=>`<div class="menu-item" data-act="${act}">${label}</div>`).join(''); menuEl.querySelectorAll('.menu-item').forEach(el=>el.onclick=()=>{ const a=el.dataset.act; closeMenus(); if(a.startsWith('theme:'))setTheme(a.slice(6)); else if(a==='draft')doSubmit(true); else if(a==='cancel')exitGuard(); else if(a==='withdraw')withdraw(); else if(a==='reject')reject(); else if(a==='profile')toast('个人设置（待 Phase 4）'); else if(a==='logout')toast('退出登录（原型）'); }); document.body.appendChild(menuEl); }
+function openUserMenu(e){ openSmallMenu(e.currentTarget, [['个人设置','profile'],['退出登录','logout']]); }
+
+/* 弹窗 */
+function openOv(title,body,acts,opts){ const m=document.querySelector('#ov .modal'); if(m) m.style.width=(opts&&opts.width)||'440px'; document.getElementById('ovTitle').textContent=title; document.getElementById('ovBody').innerHTML=body; document.getElementById('ovFoot').innerHTML=acts.map(([l,c,fn])=>`<div class="btn ${c==='danger'?'danger':c}" onclick="${fn}">${l}</div>`).join(''); document.getElementById('ov').classList.add('show'); }
+function closeOv(){ document.getElementById('ov').classList.remove('show'); }
+
+/* Toast */
+let toastT; function toast(m){ const t=document.getElementById('toast'); t.textContent=m; t.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>t.classList.remove('show'),2200); }
+
+/* ---------------- 出库：从库存批量挑货 ---------------- */
+let pickSel=new Set(), pickKw='';
+function openStockPicker(){ pickSel=new Set(); pickKw=''; openOv('从库存选择商品（出库）', pickerBody(), [['取消','ghost','closeOv()'],['加入明细','primary','pickerConfirm()']], {width:'640px'}); pickerRender(); setTimeout(()=>{const s=document.getElementById('pickSearch'); if(s)s.focus();},60); }
+function pickerBody(){ return `<div class="searchbox" style="width:100%;margin-bottom:12px"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg><input id="pickSearch" placeholder="搜索商品名 / 全拼 / 首字母（如 wlypw）" oninput="pickKw=this.value;pickerRender()"></div><div class="pick-head"><span></span><span>商品</span><span style="text-align:right">系列</span><span style="text-align:right">售价</span><span style="text-align:right">可用库存</span></div><div class="pick-list" id="pickList"></div><div id="pickCount" style="margin-top:10px;font-size:var(--fs-sm);color:var(--muted)"></div>`; }
+function pickerRender(){ const el=document.getElementById('pickList'); if(!el) return; const list=NAMES.filter(n=>n.stock>0&&match(n,pickKw)); el.innerHTML = list.length? list.map(n=>{ const on=pickSel.has(n.id); const ck=on?'<svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" fill="none"><path d="M5 12l5 5 9-9"/></svg>':''; return `<div class="pick-row ${on?'on':''}" onclick="pickerToggle('${n.id}')"><span class="ck">${ck}</span><span><div class="pn">${highlight(n.name,pickKw)}</div><div class="ps">${idName('specs',n.dSpec)}</div></span><span class="ps" style="text-align:right">${idName('series',n.dSeries)}</span><span class="pm">${fmt(n.sale)}</span><span class="pq" style="color:${n.stock<=10?'var(--danger)':'var(--text)'}">${n.stock}</span></div>`; }).join('') : '<div class="empty">无匹配的在库商品</div>'; document.getElementById('pickCount').textContent='已选 '+pickSel.size+' 项'+(pickSel.size?' · 将加入明细':''); }
+function pickerToggle(id){ pickSel.has(id)?pickSel.delete(id):pickSel.add(id); pickerRender(); }
+function pickerConfirm(){ if(!pickSel.size){ toast('请先勾选商品'); return; } const ids=[...pickSel]; ids.forEach(id=>{ const nm=NAMES.find(n=>n.id===id); let r=state.rows.find(x=>!x.name); if(!r){ r=newRow(); state.rows.push(r); } r.name=nm.id; r.series=nm.dSeries; r.spec=nm.dSpec; r.price=String(nm.sale); r.sale=String(nm.sale); r.avail=nm.stock; if(!r.qty||+r.qty<=0) r.qty='1'; }); closeOv(); renderDetail(); updateTotals(); draftSave(); toast('已加入 '+ids.length+' 项商品'); }
+
+/* ---------------- 全局事件 ---------------- */
+document.addEventListener('focusin',e=>{ const c=e.target.closest&&e.target.closest('.combo'); if(c&&e.target.tagName==='INPUT'&&!e.target.readOnly){ openCombo(c); } });
+document.addEventListener('input',e=>{ const t=e.target; if(t.closest&&t.closest('.combo')&&t.tagName==='INPUT'){ if(activeCombo)renderPop(activeCombo); return; }
+  if(t.dataset&&t.dataset.field!==undefined&&t.closest('#detail')){ const i=+t.dataset.row,f=t.dataset.field; state.rows[i][f]=t.value; state.rows[i]._err.delete(f); t.classList.remove('error'); if(f==='qty'||f==='price')updateTotals(); draftSave(); } });
+function setDateField(el,val){ if(!el) return; el.dataset.val=val||''; const dv=el.querySelector('.dval'); if(!dv) return; if(val){ dv.textContent=val; dv.classList.remove('ph'); } else { dv.textContent='选择日期'; dv.classList.add('ph'); } }
+document.addEventListener('datechange',e=>{ const el=e.target;
+  if(el.id==='orderDate'){ state.doc.date=e.detail.value; refreshSummary(); draftSave(); return; }
+  if(el.dataset&&el.dataset.field==='prodDate'&&el.closest&&el.closest('#detail')){ const i=+el.dataset.row; state.rows[i].prodDate=e.detail.value; state.rows[i]._err.delete('prodDate'); el.classList.remove('error'); draftSave(); advance(i,'prodDate'); }
+});
+document.getElementById('remark').addEventListener('input',e=>{ state.doc.remark=e.target.value; draftSave(); });
+document.getElementById('docCollapse').onclick=()=>{ const dh=document.getElementById('dochead'); dh.classList.toggle('folded'); document.getElementById('collapseTxt').textContent=dh.classList.contains('folded')?'展开':'收起'; document.querySelector('#docCollapse svg').style.transform=dh.classList.contains('folded')?'rotate(180deg)':''; };
+document.querySelectorAll('#modeSeg button').forEach(b=>b.onclick=()=>{ switchMode(b.dataset.mode); buildNav(); });
+
+document.addEventListener('keydown',e=>{
+  if((e.metaKey||e.ctrlKey)&&e.key==='Enter'){ e.preventDefault(); if(!readonlyMode())doSubmit(false); return; }
+  if((e.metaKey||e.ctrlKey)&&(e.key==='d'||e.key==='D')){ e.preventDefault(); if(!readonlyMode())copyRowFromFocus(); return; }
+  if(e.key==='Escape'){ if(activeCombo){closeCombo();return;} closeMenus(); closeOv(); closeSide(); return; }
+  if(activeCombo){ if(e.key==='ArrowDown'){e.preventDefault();moveCur(1);} else if(e.key==='ArrowUp'){e.preventDefault();moveCur(-1);} else if(e.key==='Enter'){e.preventDefault();pickCur();} else if(e.key==='Tab'){e.preventDefault(); const combo=activeCombo,i=+combo.dataset.row,f=combo.dataset.field,scope=combo.dataset.scope; pickCur(); if(scope==='row'&&e.shiftKey)retreat(i,f);} return; }
+  const t=e.target; if(t.dataset&&t.dataset.field!==undefined&&t.closest&&t.closest('#detail')&&(t.tagName==='INPUT')){ const i=+t.dataset.row,f=t.dataset.field; if(e.key==='Enter'){e.preventDefault();advance(i,f);} else if(e.key==='Tab'){e.preventDefault(); e.shiftKey?retreat(i,f):advance(i,f);} }
+});
+document.addEventListener('mousedown',e=>{ if(activeCombo && !e.target.closest('.combo') && !e.target.closest('.combo-pop')) closeCombo(); if(menuEl && !e.target.closest('.menu') && !menuEl.contains(e.target)) closeMenus(); });
+let rzT; window.addEventListener('resize',()=>{ clearTimeout(rzT); rzT=setTimeout(relayout,150); });
+
+/* ---------------- 启动 ---------------- */
+function init(){ setTheme(localStorage.getItem('jiu-theme')||'a'); buildNav(); state.rows=[newRow()]; setDateField(document.getElementById('orderDate'),state.doc.date); renderActions(); syncDocCombos(); syncDocLock(); refreshSummary(); renderDetail(); updateTotals(); maybeRestore(); }
+init();
+const __qp=new URLSearchParams(location.search); if(__qp.get('mode')==='out'){ switchMode('out'); buildNav(); }
+// 初次加载 iframe 宽度可能尚未稳定：用 ResizeObserver 在 body 有真实宽度的那一刻纠正布局，避免卡片闪烁
+if(window.ResizeObserver){ new ResizeObserver(()=>relayout()).observe(document.body); }
+window.addEventListener('load',relayout);
+if(window.matchMedia) matchMedia('(max-width:600px)').addEventListener('change',relayout);
+requestAnimationFrame(relayout);
diff --git a/.superpowers/prototype/screens/stock-out-list.html b/.superpowers/prototype/screens/stock-out-list.html
new file mode 100644
index 0000000..617c2c5
--- /dev/null
+++ b/.superpowers/prototype/screens/stock-out-list.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>出库管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== 页面层：仅屏幕级组合，原子全部来自 atoms.css ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .actions{margin-left:auto; display:flex; gap:10px;}
+  .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px;}
+  .toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; flex-wrap:wrap; transition:background-color .28s,border-color .28s;}
+  .toolbar .searchbox{width:260px;}
+  .toolbar .daterange{display:flex; align-items:center; gap:6px; height:34px; padding:0 11px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-sm); color:var(--text); cursor:pointer;}
+  .toolbar .daterange svg{width:14px; height:14px; stroke-width:1.8; color:var(--faint);}
+  .toolbar .daterange .dv{color:var(--text);}
+  .toolbar .sp{margin-left:auto;}
+
+  /* ---- 状态徽章（新增变体，待提升至 atoms.css） ---- */
+  .badge.b-草稿{background:var(--info-soft); color:var(--muted);}
+  .badge.b-待审核{background:var(--warn-bg); color:var(--warn);}
+  .badge.b-已通过{background:var(--success-bg); color:var(--success);}
+  .badge.b-已驳回{background:var(--danger-bg); color:var(--danger);}
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="stock-out"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>出库管理</h1><span class="sub" id="subInfo">本月 31 笔出库单</span>
+        <div class="actions">
+          <div class="btn ghost" onclick="render()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>刷新</div>
+          <div class="btn ghost" onclick="toast('已导出当前筛选结果 ✓')"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg>导出</div>
+          <a class="btn primary" href="stock-out.html"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增出库</a>
+        </div>
+      </div>
+      <div class="kpis">
+        <div class="kpi"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-ic53"/></svg></div><div class="t">本月出库笔数</div><div class="v">31</div><div class="d up">▲ 9% 较上月</div></div>
+        <div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg></div><div class="t">本月出库金额</div><div class="v">¥214万</div><div class="d up">▲ 6.2% 较上月</div></div>
+        <div class="kpi alert click" onclick="filterStatus('待审核')"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg></div><div class="t">待审核单数 · 点击筛选</div><div class="v">3</div><div class="d down">需尽快处理</div></div>
+      </div>
+      <div class="toolbar">
+        <div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="搜索单号 / 客户 / 酒名" oninput="state.q=this.value; state.page=1; render()"></div>
+        <div class="chip" id="chipParty" onclick="openPartyFilter(this)">客户 <span class="cv" id="partyVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <div class="chip" id="chipWh" onclick="openWhFilter(this)">仓库 <span class="cv" id="whVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <div class="chip" id="chipStatus" onclick="openStatusFilter(this)">状态 <span class="cv" id="statusVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
+        <div class="chip" id="chipDate" onclick="openDateFilter(this)"><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg>出库时间 <span class="cv" id="dateVal"></span></div>
+        <div class="sp"></div>
+        <div class="btn ghost sm" id="resetBtn" onclick="clearFilters()"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg>重置</div>
+      </div>
+      <div class="table flush-top"><table><thead id="thead"></thead><tbody id="tbody"></tbody></table></div>
+      <div class="pager"><div class="pg-size">每页 <button class="pgsize-btn" id="pageSizeBtn" onclick="openPageSize(event)"><span id="pageSizeVal">10</span><svg class="pgsize-caret" viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></button> 条</div><span id="pagerInfo"></span><div class="pg" id="pager"></div></div>
+    </div>
+  </div>
+</div>
+
+<div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
+<div class="drawer wide" id="drawer"><div class="drawer-head"><h3 id="dTitle">出库单详情</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="closeDrawer()"><use href="#i-close"/></svg></div><div class="drawer-body" id="drawerBody"></div></div>
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+const ORDERS=[
+  {no:'CK-20260621-002',date:'2026-06-21',party:'金悦大酒店',wh:'名酒仓',count:3,amount:39600,status:'待审核',op:'王经理',auditor:'',lines:[{name:'茅台 飞天 53°',qty:10,price:2880},{name:'五粮液 普五 52°',qty:8,price:1180},{name:'国窖 1573',qty:6,price:1080}]},
+  {no:'CK-20260620-004',date:'2026-06-20',party:'万达广场名烟名酒',wh:'主仓',count:2,amount:21120,status:'已通过',op:'李销售',auditor:'张主管',lines:[{name:'剑南春 水晶剑',qty:24,price:528},{name:'洋河 海之蓝',qty:36,price:228}]},
+  {no:'CK-20260620-001',date:'2026-06-20',party:'喜来登宴会厅',wh:'名酒仓',count:2,amount:35400,status:'已通过',op:'王经理',auditor:'张主管',lines:[{name:'茅台 1935',qty:12,price:1480},{name:'习酒 窖藏 1988',qty:24,price:740}]},
+  {no:'CK-20260619-003',date:'2026-06-19',party:'城东烟酒批发部',wh:'主仓',count:1,amount:14400,status:'草稿',op:'李销售',auditor:'',lines:[{name:'泸州老窖 特曲',qty:36,price:400}]},
+  {no:'CK-20260618-005',date:'2026-06-18',party:'锦江饭店采购',wh:'一号仓',count:3,amount:27840,status:'已通过',op:'张主管',auditor:'王经理',lines:[{name:'汾酒 青花 20',qty:24,price:480},{name:'郎酒 红花郎 15',qty:18,price:640},{name:'西凤酒 旗舰版',qty:24,price:200}]},
+  {no:'CK-20260618-001',date:'2026-06-18',party:'东方明珠酒楼',wh:'主仓',count:2,amount:19680,status:'待审核',op:'王经理',auditor:'',lines:[{name:'洋河 梦之蓝 M6',qty:24,price:720},{name:'古井贡 年份原浆',qty:24,price:100}]},
+  {no:'CK-20260617-002',date:'2026-06-17',party:'连锁超市配送中心',wh:'一号仓',count:1,amount:13680,status:'已驳回',op:'李销售',auditor:'张主管',lines:[{name:'水井坊 井台',qty:18,price:760}]},
+  {no:'CK-20260616-004',date:'2026-06-16',party:'婚庆礼仪公司',wh:'名酒仓',count:2,amount:24000,status:'已通过',op:'张主管',auditor:'王经理',lines:[{name:'五粮液 1618',qty:24,price:780},{name:'剑南春 珍藏级',qty:12,price:520}]},
+  {no:'CK-20260616-001',date:'2026-06-16',party:'高新区企业团购',wh:'主仓',count:1,amount:18720,status:'待审核',op:'王经理',auditor:'',lines:[{name:'国窖 1573',qty:18,price:1040}]},
+  {no:'CK-20260615-003',date:'2026-06-15',party:'老街餐饮连锁',wh:'一号仓',count:2,amount:12960,status:'已通过',op:'李销售',auditor:'张主管',lines:[{name:'洋河 天之蓝',qty:24,price:380},{name:'汾酒 老白汾',qty:24,price:160}]},
+  {no:'CK-20260614-002',date:'2026-06-14',party:'国际会展中心',wh:'主仓',count:1,amount:8400,status:'草稿',op:'张主管',auditor:'',lines:[{name:'西凤酒 旗舰版',qty:24,price:350}]},
+  {no:'CK-20260613-005',date:'2026-06-13',party:'凯悦酒店宴会',wh:'名酒仓',count:1,amount:32400,status:'已通过',op:'王经理',auditor:'张主管',lines:[{name:'茅台 飞天 53°',qty:12,price:2700}]},
+];
+const STATUS=['全部','草稿','待审核','已通过','已驳回'];
+const COLS=[{key:'no',label:'单号'},{key:'party',label:'客户'},{key:'wh',label:'仓库'},{key:'amount',label:'合计金额',num:true},{key:'status',label:'状态',filter:true},{key:'op',label:'出库员'},{key:'auditor',label:'审核员'},{key:'act',label:'操作',fixed:true}];
+const state={q:'',party:'全部',wh:'全部',status:'全部',dateFrom:'',dateTo:'',page:1,perPage:10};
+const PARTIES=['全部',...Array.from(new Set(ORDERS.map(o=>o.party)))];
+const WAREHOUSES=['全部',...Array.from(new Set(ORDERS.map(o=>o.wh)))];
+
+const PARTY_LABEL='客户';
+
+
+function money(n){ return '¥'+n.toLocaleString(); }
+function filtered(){ return ORDERS.filter(o=>{
+  if(state.status!=='全部'&&o.status!==state.status)return false;
+  if(state.party!=='全部'&&o.party!==state.party)return false;
+  if(state.wh!=='全部'&&o.wh!==state.wh)return false;
+  if(state.dateFrom&&o.date<state.dateFrom)return false;
+  if(state.dateTo&&o.date>state.dateTo)return false;
+  if(state.q){const q=state.q.toLowerCase(); if(!(o.no.toLowerCase().includes(q)||o.party.toLowerCase().includes(q)||(o.lines||[]).some(l=>l.name.toLowerCase().includes(q))))return false;}
+  return true; }); }
+function syncChips(){
+  const set=(id,chipId,val)=>{ document.getElementById(id).textContent=val||''; document.getElementById(chipId).classList.toggle('on',!!val); };
+  set('partyVal','chipParty',state.party==='全部'?'':state.party);
+  set('whVal','chipWh',state.wh==='全部'?'':state.wh);
+  set('statusVal','chipStatus',state.status==='全部'?'':state.status);
+  set('dateVal','chipDate',state.dateLabel||'');
+  const any=state.q||state.party!=='全部'||state.wh!=='全部'||state.status!=='全部'||state.dateFrom||state.dateTo;
+  document.getElementById('resetBtn').classList.toggle('primary',!!any);
+}
+function render(){
+  syncChips();
+  const cols=COLS;
+  document.getElementById('thead').innerHTML='<tr>'+cols.map(c=>{ const cls=(c.num?'num ':'')+(c.key==='act'?'act ':''); if(c.filter){const on=state.status!=='全部'; return `<th class="${cls}"><span class="fh ${on?'filtered':''}" onclick="openFilter(this)">${c.label} <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic22"/></svg></span></th>`;} return `<th class="${cls}">${c.label}</th>`; }).join('')+'</tr>';
+  const rows=filtered(); const start=(state.page-1)*state.perPage; const pageRows=rows.slice(start,start+state.perPage); const tb=document.getElementById('tbody');
+  if(rows.length===0){ tb.innerHTML=`<tr><td colspan="${cols.length}"><div class="empty">没有匹配的出库单 · 试试调整筛选或搜索</div></td></tr>`; }
+  else { tb.innerHTML=pageRows.map(o=>{ const idx=ORDERS.indexOf(o); return '<tr class="click" onclick="openDetail('+idx+')">'+cols.map(c=>{ if(c.key==='no')return `<td><span class="pcode" style="font-size:var(--fs-body)">${o.no}</span></td>`; if(c.key==='party')return `<td class="pname">${o.party}</td>`; if(c.key==='wh')return `<td>${o.wh}</td>`; if(c.key==='amount')return `<td class="num">${money(o.amount)}</td>`; if(c.key==='status')return `<td><span class="badge b-${o.status}">${o.status}</span></td>`; if(c.key==='op')return `<td>${o.op}</td>`; if(c.key==='auditor')return `<td>${o.auditor?o.auditor:'<span style="color:var(--faint)">—</span>'}</td>`; if(c.key==='act')return `<td class="act"><div class="row-act" onclick="event.stopPropagation()"><svg viewBox="0 0 24 24" onclick="openDetail(${idx})"><use href="#i-eye"/></svg></div></td>`; return `<td>${o[c.key]}</td>`; }).join('')+'</tr>'; }).join(''); }
+  document.getElementById('pagerInfo').textContent=`显示 ${rows.length?start+1:0}–${Math.min(start+state.perPage,rows.length)}，共 ${rows.length}`;
+  const pages=Math.max(1,Math.ceil(rows.length/state.perPage)); let pg=`<button ${state.page<=1?'disabled':''} onclick="go(${state.page-1})">‹</button>`; for(let p=1;p<=pages;p++)pg+=`<button class="${p===state.page?'cur':''}" onclick="go(${p})">${p}</button>`; pg+=`<button ${state.page>=pages?'disabled':''} onclick="go(${state.page+1})">›</button>`; document.getElementById('pager').innerHTML=pg;
+  document.getElementById('subInfo').textContent=`本月 ${rows.length} 笔出库单`;
+}
+function go(p){ const pages=Math.max(1,Math.ceil(filtered().length/state.perPage)); state.page=Math.min(Math.max(1,p),pages); render(); }
+const PAGE_SIZES=[10,20,50,100];
+function openPageSize(e){ openMenu(e.currentTarget, PAGE_SIZES.map(n=>({v:String(n),label:String(n),sel:n===state.perPage})), v=>{ closeMenus(); setPerPage(v); }, 'pgsize-menu', 88); }
+function setPerPage(v){ state.perPage=+v; state.page=1; const el=document.getElementById('pageSizeVal'); if(el)el.textContent=v; render(); }
+function filterStatus(s){ state.status=s; state.page=1; render(); }
+function clearFilters(){ state.q='';state.party='全部';state.wh='全部';state.status='全部';state.dateFrom='';state.dateTo='';state.dateLabel='';state.page=1; document.getElementById('searchInput').value=''; render(); }
+
+function openFilter(t){ openStatusFilter(t); }
+function openStatusFilter(t){ openMenu(t,STATUS.map(v=>({v,label:v,sel:v===state.status})),v=>{ state.status=v; state.page=1; closeMenus(); render(); }); }
+function openPartyFilter(t){ openMenu(t,PARTIES.map(v=>({v,label:v,sel:v===state.party})),v=>{ state.party=v; state.page=1; closeMenus(); render(); }); }
+function openWhFilter(t){ openMenu(t,WAREHOUSES.map(v=>({v,label:v,sel:v===state.wh})),v=>{ state.wh=v; state.page=1; closeMenus(); render(); }); }
+const TODAY='2026-06-22';
+function dateMinus(days){ const d=new Date(TODAY); d.setDate(d.getDate()-days); return d.toISOString().slice(0,10); }
+const DATE_PRESETS=[{v:'all',label:'全部时间'},{v:'7',label:'近 7 天'},{v:'30',label:'近 30 天'},{v:'month',label:'本月'}];
+function openDateFilter(t){ openMenu(t,DATE_PRESETS.map(p=>({v:p.v,label:p.label,sel:p.v===(state.datePreset||'all')})),v=>{ applyDatePreset(v); state.page=1; closeMenus(); render(); }); }
+function applyDatePreset(v){ state.datePreset=v; if(v==='all'){state.dateFrom='';state.dateTo='';state.dateLabel='';}
+  else if(v==='month'){state.dateFrom=TODAY.slice(0,7)+'-01';state.dateTo=TODAY;state.dateLabel='本月';}
+  else {state.dateFrom=dateMinus(Number(v)-1);state.dateTo=TODAY;state.dateLabel='近'+v+'天';} }
+
+
+const PINFO={
+'茅台 飞天 53°':{code:'MT-FT-53-500',series:'飞天',spec:'53° 500ml×6'},
+'茅台 1935':{code:'MT-1935-53-500',series:'1935',spec:'53° 500ml×6'},
+'茅台 王子酒':{code:'MT-WZ-53-500',series:'王子',spec:'53° 500ml×6'},
+'五粮液 普五 52°':{code:'WLY-P8-52-500',series:'第八代',spec:'52° 500ml×6'},
+'五粮液 1618':{code:'WLY-1618-52-500',series:'1618',spec:'52° 500ml×6'},
+'剑南春 水晶剑':{code:'JNC-SJ-52-500',series:'水晶剑',spec:'52° 500ml×6'},
+'剑南春 珍藏级':{code:'JNC-ZC-52-500',series:'珍藏',spec:'52° 500ml×6'},
+'国窖 1573':{code:'GJ-1573-52-500',series:'经典装',spec:'52° 500ml×6'},
+'洋河 梦之蓝 M6':{code:'YH-M6-45-500',series:'梦之蓝',spec:'45° 500ml×6'},
+'洋河 海之蓝':{code:'YH-HZL-42-480',series:'海之蓝',spec:'42° 480ml×6'},
+'洋河 天之蓝':{code:'YH-TZL-42-480',series:'天之蓝',spec:'42° 480ml×6'},
+'泸州老窖 特曲':{code:'LZLJ-TQ-52-500',series:'特曲',spec:'52° 500ml×6'},
+'泸州老窖 头曲':{code:'LZLJ-TOUQ-52-500',series:'头曲',spec:'52° 500ml×6'},
+'习酒 窖藏 1988':{code:'XJ-JC-53-500',series:'窖藏',spec:'53° 500ml×6'},
+'汾酒 青花 20':{code:'FJ-QH20-53-500',series:'青花',spec:'53° 500ml×6'},
+'汾酒 老白汾':{code:'FJ-LBF-53-475',series:'老白汾',spec:'53° 475ml×6'},
+'郎酒 红花郎 15':{code:'LJ-HHL15-53-500',series:'红花郎',spec:'53° 500ml×6'},
+'古井贡 年份原浆':{code:'GJG-NF-50-500',series:'年份原浆',spec:'50° 500ml×6'},
+'古井贡 古5':{code:'GJG-G5-50-500',series:'古5',spec:'50° 500ml×6'},
+'西凤酒 旗舰版':{code:'XF-QJ-52-500',series:'旗舰',spec:'52° 500ml×6'},
+'水井坊 井台':{code:'SJF-JT-52-500',series:'井台',spec:'52° 500ml×6'},
+};
+function auditBtns(o){
+  if(o.status==='草稿')   return '<div class="btn primary sm" onclick="toast(\'已提交审核 ✓\');closeDrawer()">提交审核</div>';
+  if(o.status==='待审核') return '<div class="btn primary sm" onclick="toast(\'已审核通过 ✓\');closeDrawer()">审核通过</div><div class="btn danger sm" onclick="toast(\'已驳回\');closeDrawer()">驳回</div>';
+  if(o.status==='已通过') return '<div class="btn ghost sm" onclick="toast(\'已结清 ✓\');closeDrawer()">结清</div><div class="btn danger sm" onclick="toast(\'已退单\');closeDrawer()">退单</div>';
+  if(o.status==='已驳回') return '<div class="btn primary sm" onclick="toast(\'已重新提交 ✓\');closeDrawer()">重新提交</div>';
+  return '';
+}
+function openDetail(idx){ const o=ORDERS[idx]; document.getElementById('dTitle').textContent=o.no;
+  let lh=`<div class="lines"><div class="lh" style="grid-template-columns:1fr 124px 40px 64px 78px"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">单价</span><span style="text-align:right">金额</span></div>`;
+  o.lines.forEach(l=>{ const pi=PINFO[l.name]||{}; lh+=`<div class="lr" style="grid-template-columns:1fr 124px 40px 64px 78px;align-items:start"><span class="lcell"><span class="ln">${l.name}</span><span class="lcode">${pi.code||'—'}</span></span><span class="lcell"><span class="lser">${pi.series||'—'}</span><span class="lspec">${pi.spec||''}</span></span><span style="text-align:right;font-family:var(--font-mono)">${l.qty}</span><span style="text-align:right;font-family:var(--font-mono)">${money(l.price)}</span><span class="amt">${money(l.qty*l.price)}</span></div>`; }); lh+='</div>';
+  const auditor=o.auditor?o.auditor:'<span style="color:var(--faint)">—</span>';
+  document.getElementById('drawerBody').innerHTML=`<div class="drow"><span>单据日期</span><b>${o.date}</b></div><div class="drow"><span>${PARTY_LABEL}</span><b>${o.party}</b></div><div class="drow"><span>仓库</span><b>${o.wh}</b></div><div class="drow"><span>商品数</span><b>${o.count}</b></div><div class="drow"><span>出库员</span><b>${o.op}</b></div><div class="drow"><span>审核员</span><b>${auditor}</b></div><div class="drow"><span>状态</span><b><span class="badge b-${o.status}">${o.status}</span></b></div><label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin:16px 0 8px;">出库明细</label>${lh}<div class="ltotal">合计金额 <b>${money(o.amount)}</b></div>`+
+    `<div class="dactions"><div class="dact-group"><span class="dact-label">单据审核</span><div class="dact-row">${auditBtns(o)}</div></div><div class="dact-group"><span class="dact-label">打印</span><div class="dact-row"><div class="btn ghost sm" onclick="toast('打印标签（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg>打印标签</div><div class="btn ghost sm" onclick="toast('打印单据（原型）')"><svg viewBox="0 0 24 24"><use href="#i-ic50"/></svg>打印单据</div></div></div></div>`;
+  document.getElementById('drawer').classList.add('show'); document.getElementById('drawerMask').classList.add('show'); }
+function closeDrawer(){ document.getElementById('drawer').classList.remove('show'); document.getElementById('drawerMask').classList.remove('show'); }
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closeDrawer();} });
+
+render();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/screens/stock-out.html b/.superpowers/prototype/screens/stock-out.html
new file mode 100644
index 0000000..513785e
--- /dev/null
+++ b/.superpowers/prototype/screens/stock-out.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>新建出库单 · 岩美酒库</title>
+<!-- 出库录单已与入库合并为同一张「录单」表单（入/出库镜像），此页定向到出库模式。 -->
+<script>location.replace('stock-in.html?mode=out' + location.hash);</script>
+</head>
+<body></body>
+</html>
diff --git a/.superpowers/prototype/screens/users.html b/.superpowers/prototype/screens/users.html
new file mode 100644
index 0000000..f68a66f
--- /dev/null
+++ b/.superpowers/prototype/screens/users.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="a">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>用户管理 · 岩美酒库</title>
+<link rel="stylesheet" href="../tokens.css">
+<link rel="stylesheet" href="../atoms.css">
+<style>
+  /* ====== App-shell（沿用 settings/inventory） ====== */
+  body{margin:0; height:100vh; overflow:hidden; font-family:var(--font); color:var(--text); background:var(--bg); transition:background-color .28s;}
+  .app{height:100vh; display:flex; flex-direction:column;}
+  /* 产品品牌（岩美酒库）+ 门店并置 */
+
+
+  .head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
+  .head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
+  .head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
+  .head .grow{flex:1;}
+
+  /* KPI 行 */
+  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
+  /* .kpi 复用 atoms（仅子元素微调） */
+  .kpi .t{font-size:var(--fs-sm); color:var(--muted); margin-bottom:7px;}
+  .kpi .v{font-size:26px; font-weight:700; color:var(--heading); font-family:var(--font-mono);}
+  .kpi .v small{font-size:var(--fs-body); color:var(--muted); font-weight:500; font-family:var(--font); margin-left:3px;}
+
+  /* 工具栏 */
+  .toolbar{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
+  .toolbar .grow{flex:1;}
+
+  /* 表格卡 */
+  .tcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:background-color .28s,border-color .28s;}
+  .uname{display:flex; align-items:center; gap:11px;}
+  .uname .av{width:34px; height:34px; border-radius:50%; background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-body); flex:none;}
+  .uname .who b{display:block; font-size:var(--fs-body); color:var(--heading); font-weight:600;}
+  .uname .who span{font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono);}
+  /* 角色徽章 b-超级管理员/b-管理员/b-操作员/b-只读 复用 atoms */
+  .row-act svg{cursor:pointer;}
+
+  /* 模态 */
+  /* .overlay / .modal 复用 atoms（.modal narrow 取窄宽；本屏仅保留 .on 显隐与子结构样式） */
+  .overlay.on{display:flex;}
+  .modal .mh{padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center;}
+  .modal .mh h3{margin:0; font-size:var(--fs-h2); color:var(--heading);}
+  .modal .mh .x{margin-left:auto; cursor:pointer; color:var(--muted); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px;}
+  .modal .mh .x:hover{background:var(--bg);}
+  .modal .mb{padding:20px 22px; overflow:auto;}
+  .modal .mf{padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end;}
+  .mgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
+  .mgrid .field.full{grid-column:1/-1;}
+  /* 角色单选 */
+  .roles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
+  .rcard{border:1.5px solid var(--border); border-radius:var(--r-md); padding:11px 12px; cursor:pointer; transition:.15s;}
+  .rcard:hover{border-color:var(--brand400);}
+  .rcard.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
+  .rcard b{display:block; font-size:var(--fs-body); color:var(--heading); margin-bottom:3px;}
+  .rcard span{font-size:var(--fs-xs); color:var(--muted); line-height:1.4;}
+  /* 开关 */
+  .switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none;}
+  .switch .track{width:40px; height:23px; border-radius:12px; background:var(--border); position:relative; transition:.18s; flex:none;}
+  .switch .track::after{content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:.18s;}
+  .switch.on .track{background:var(--success);}
+  .switch.on .track::after{left:19px;}
+  .switch .lab{font-size:var(--fs-body); color:var(--text);}
+
+  @media (max-width:760px){
+    .kpis{grid-template-columns:1fr 1fr;}
+    .mgrid,.roles{grid-template-columns:1fr;}
+  }
+  /* 设计期返回悬浮球（右下角，非侵入） */
+  .ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:opacity .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; text-decoration:none;}
+  .ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary); box-shadow:var(--sh-3); transform:translateY(-2px);}
+  .ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
+  /* 顶栏品牌层级 v4：软件(岩美酒库)主视觉在前 · 门店(酒行)次级在后 */
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="top" data-shell-top data-active="settings"></div>
+  <div class="body">
+    <div class="side" id="side"></div>
+    <div class="main">
+      <div class="head">
+        <h1>用户管理</h1><span class="sub">门店成员与权限角色</span>
+        <div class="grow"></div>
+        <div class="btn primary" onclick="openUser()"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增用户</div>
+      </div>
+
+      <div class="kpis">
+        <div class="kpi"><div class="t">成员总数</div><div class="v" id="kTotal">4</div></div>
+        <div class="kpi"><div class="t">启用中</div><div class="v" id="kActive">3</div></div>
+        <div class="kpi"><div class="t">管理员</div><div class="v">1</div></div>
+        <div class="kpi"><div class="t">只读账号</div><div class="v">1</div></div>
+      </div>
+
+      <div class="toolbar">
+        <div class="searchbox" style="max-width:300px"><svg viewBox="0 0 24 24"><use href="#i-ic54"/></svg><input id="search" placeholder="搜索姓名 / 账号" oninput="renderRows()"></div>
+        <div class="grow"></div>
+        <div class="ctrl" id="roleFilter" onclick="openRoleFilter(event)"><span id="roleFilterVal">全部角色</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div>
+      </div>
+
+      <div class="tcard">
+        <div class="table">
+          <table>
+            <thead><tr><th>用户</th><th>角色</th><th>状态</th><th>最近登录</th><th class="act">操作</th></tr></thead>
+            <tbody id="rows"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 新增 / 编辑用户 -->
+<div class="overlay" id="ov">
+  <div class="modal narrow">
+    <div class="mh"><h3 id="mTitle">新增用户</h3><div class="x" onclick="closeUser()"><svg width="18" height="18" viewBox="0 0 24 24" stroke-width="2"><use href="#i-close"/></svg></div></div>
+    <div class="mb">
+      <div class="mgrid">
+        <div class="field"><label>姓名 <span style="color:var(--danger)">*</span></label><input class="input" id="fName" placeholder="例如 李采购"></div>
+        <div class="field"><label>登录账号 <span style="color:var(--danger)">*</span></label><input class="input" id="fUser" placeholder="字母 / 数字"></div>
+        <div class="field full" id="passRow"><label>初始密码 <span style="color:var(--danger)">*</span></label><input class="input" id="fPass" type="password" placeholder="至少 8 位，成员首次登录可改"></div>
+        <div class="field full"><label>角色</label>
+          <div class="roles" id="roleCards">
+            <div class="rcard" data-r="超级管理员" onclick="pickRole('超级管理员')"><b>超级管理员</b><span>最高权限 · 含系统参数与数据管理</span></div>
+            <div class="rcard" data-r="管理员" onclick="pickRole('管理员')"><b>管理员</b><span>全部业务权限 + 用户与授权管理</span></div>
+            <div class="rcard on" data-r="操作员" onclick="pickRole('操作员')"><b>操作员</b><span>日常入库出库与查询</span></div>
+            <div class="rcard" data-r="只读" onclick="pickRole('只读')"><b>只读</b><span>仅查看，禁所有写操作</span></div>
+          </div>
+        </div>
+        <div class="field full"><label>账号状态</label>
+          <div class="switch on" id="fStatus" onclick="this.classList.toggle('on');this.querySelector('.lab').textContent=this.classList.contains('on')?'启用':'停用'"><span class="track"></span><span class="lab">启用</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="mf">
+      <div class="btn ghost" id="resetBtn" onclick="toast('已发送密码重置（原型）')" style="margin-right:auto;display:none">重置密码</div>
+      <div class="btn ghost" onclick="closeUser()">取消</div>
+      <div class="btn primary" onclick="saveUser()">保存</div>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script src="shell.js"></script>
+<script>
+  /* 数据 */
+  let USERS=[
+    {name:'王经理', user:'wang', role:'超级管理员', active:true, last:'今天 09:12'},
+    {name:'张主管', user:'zhang', role:'管理员', active:true, last:'今天 08:50'},
+    {name:'李采购', user:'li', role:'操作员', active:true, last:'昨天 18:40'},
+    {name:'赵会计', user:'zhao', role:'只读', active:true, last:'06-19 10:05'},
+    {name:'钱仓管', user:'qian', role:'操作员', active:false, last:'06-10 14:22'},
+  ];
+  let roleFilter='全部角色', editIdx=-1, draftRole='操作员';
+
+  function badgeClass(r){ return 'b-'+r; }
+  function renderRows(){
+    const q=document.getElementById('search').value.trim().toLowerCase();
+    const rows=USERS.map((u,i)=>({u,i}))
+      .filter(({u})=>(roleFilter==='全部角色'||u.role===roleFilter))
+      .filter(({u})=>!q||u.name.toLowerCase().includes(q)||u.user.toLowerCase().includes(q));
+    document.getElementById('rows').innerHTML = rows.length? rows.map(({u,i})=>`
+      <tr>
+        <td><div class="uname"><div class="av">${u.name[0]}</div><div class="who"><b>${u.name}</b><span>${u.user}</span></div></div></td>
+        <td><span class="badge ${badgeClass(u.role)}">${u.role}</span></td>
+        <td><span class="badge ${u.active?'b-启用':'b-停用'}">${u.active?'启用':'停用'}</span></td>
+        <td style="color:var(--muted);font-size:var(--fs-sm)">${u.last}</td>
+        <td class="act"><div class="row-act">
+          <svg viewBox="0 0 24 24" title="编辑" onclick="openUser(${i})"><use href="#i-edit"/></svg>
+          <svg viewBox="0 0 24 24" title="${u.active?'停用':'启用'}" onclick="toggleActive(${i})"><use href="#i-ic55"/></svg>
+        </div></td>
+      </tr>`).join('') : `<tr><td colspan="5" style="text-align:center;color:var(--faint);padding:34px">没有匹配的成员</td></tr>`;
+    document.getElementById('kTotal').textContent=USERS.length;
+    document.getElementById('kActive').textContent=USERS.filter(u=>u.active).length;
+  }
+  function toggleActive(i){ USERS[i].active=!USERS[i].active; renderRows(); toast(USERS[i].active?'已启用 '+USERS[i].name:'已停用 '+USERS[i].name); }
+
+  /* 模态 */
+  function pickRole(r){ draftRole=r; document.querySelectorAll('#roleCards .rcard').forEach(c=>c.classList.toggle('on',c.dataset.r===r)); }
+  function openUser(idx){
+    editIdx = (typeof idx==='number')?idx:-1;
+    const isEdit=editIdx>=0;
+    document.getElementById('mTitle').textContent=isEdit?'编辑用户':'新增用户';
+    document.getElementById('passRow').style.display=isEdit?'none':'block';
+    document.getElementById('resetBtn').style.display=isEdit?'inline-flex':'none';
+    const u=isEdit?USERS[editIdx]:{name:'',user:'',role:'操作员',active:true};
+    document.getElementById('fName').value=u.name;
+    document.getElementById('fUser').value=u.user;
+    document.getElementById('fPass').value='';
+    pickRole(u.role);
+    const sw=document.getElementById('fStatus'); sw.classList.toggle('on',u.active); sw.querySelector('.lab').textContent=u.active?'启用':'停用';
+    document.getElementById('ov').classList.add('on');
+  }
+  function closeUser(){ document.getElementById('ov').classList.remove('on'); }
+  function saveUser(){
+    const name=document.getElementById('fName').value.trim();
+    const user=document.getElementById('fUser').value.trim();
+    if(!name||!user){ toast('请填写姓名与登录账号'); return; }
+    const active=document.getElementById('fStatus').classList.contains('on');
+    if(editIdx>=0){ Object.assign(USERS[editIdx],{name,user,role:draftRole,active}); toast('已保存 '+name); }
+    else{
+      const pass=document.getElementById('fPass').value;
+      if(pass.length<8){ toast('初始密码至少 8 位'); return; }
+      USERS.push({name,user,role:draftRole,active,last:'—'}); toast('已新增 '+name);
+    }
+    closeUser(); renderRows();
+  }
+
+  /* Toast / Menu */
+  function openRoleFilter(e){ openMenu(e.currentTarget,['全部角色','超级管理员','管理员','操作员','只读'].map(v=>({v,label:v,sel:v===roleFilter})),v=>{ roleFilter=v; document.getElementById('roleFilterVal').textContent=v; closeMenus(); renderRows(); }); }
+
+  /* 主题 */
+
+  document.addEventListener('keydown',e=>{ if(e.key==='Escape'){closeMenus();closeUser();} });
+  document.getElementById('ov').addEventListener('click',e=>{ if(e.target.id==='ov')closeUser(); });
+
+  renderRows();
+</script>
+<a class="ds-fab" href="../index.html" title="返回设计系统" aria-label="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
+<script src="fab.js"></script>
+<script src="notify.js"></script>
+<script src="statusbar.js"></script>
+<script src="icons.js"></script>
+</body>
+</html>
diff --git a/.superpowers/prototype/serve.mjs b/.superpowers/prototype/serve.mjs
new file mode 100644
index 0000000..de7d6c2
--- /dev/null
+++ b/.superpowers/prototype/serve.mjs
@@ -0,0 +1,96 @@
+// 零依赖本地热重载静态服务器
+// 用法: node serve.mjs [port]   默认 5180
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.dirname(fileURLToPath(import.meta.url));
+const PORT = Number(process.argv[2]) || 5180;
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.woff2': 'font/woff2',
+};
+
+const clients = new Set();
+const RELOAD_SNIPPET = `\n<script>
+(function(){ try{
+  var es=new EventSource('/__reload');
+  es.onmessage=function(){ location.reload(); };
+}catch(e){} })();
+</script>\n`;
+
+const server = http.createServer((req, res) => {
+  if (req.url === '/__reload') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    });
+    res.write('retry: 500\n\n');
+    clients.add(res);
+    req.on('close', () => clients.delete(res));
+    return;
+  }
+
+  let urlPath = decodeURIComponent(req.url.split('?')[0]);
+  if (urlPath === '/') urlPath = '/index.html';
+  const filePath = path.join(ROOT, urlPath);
+  if (!filePath.startsWith(ROOT)) { res.writeHead(403); res.end('forbidden'); return; }
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) { res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' }); res.end('<h1>404</h1>'); return; }
+    const ext = path.extname(filePath).toLowerCase();
+    const mime = MIME[ext] || 'application/octet-stream';
+    const noCache = { 'Cache-Control': 'no-store, no-cache, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' };
+    if (ext === '.html') {
+      const html = data.toString('utf8').replace('</body>', RELOAD_SNIPPET + '</body>');
+      res.writeHead(200, { 'Content-Type': mime, ...noCache });
+      res.end(html);
+    } else {
+      res.writeHead(200, { 'Content-Type': mime, ...noCache });
+      res.end(data);
+    }
+  });
+});
+
+// 设计系统守门：启动 + 每次改动自动跑 check-ds.mjs，控制台报 PASS/FAIL
+import { spawn } from 'node:child_process';
+function runDsCheck() {
+  const p = spawn(process.execPath, [path.join(ROOT, 'tools', 'check-ds.mjs')], { cwd: ROOT });
+  let out = '';
+  p.stdout.on('data', d => out += d);
+  p.stderr.on('data', d => out += d);
+  p.on('close', code => {
+    const t = new Date().toLocaleTimeString();
+    if (code === 0) console.log(`\x1b[32m[设计系统 ✓ ${t}] screens 颜色全部走 token、变量均已定义\x1b[0m`);
+    else {
+      const m = out.match(/❶[^\n]*共 (\d+)[\s\S]*?❷[^\n]*共 (\d+)/);
+      const sum = m ? `硬编码颜色 ${m[1]} · 未定义 token ${m[2]}` : '存在违规';
+      console.log(`\x1b[31m[设计系统 ✗ ${t}] ${sum} —— 运行 node tools/check-ds.mjs 看详情\x1b[0m`);
+    }
+  });
+}
+
+let debounce;
+fs.watch(ROOT, { recursive: true }, (_ev, file) => {
+  if (file && file.endsWith('serve.mjs')) return;
+  clearTimeout(debounce);
+  debounce = setTimeout(() => {
+    for (const c of clients) c.write('data: reload\n\n');
+    if (file && /\.(html|css|js)$/.test(file)) runDsCheck();
+  }, 80);
+});
+
+server.listen(PORT, () => {
+  console.log(`prototype live at http://localhost:${PORT}/  (watching ${ROOT})`);
+  runDsCheck();
+});
diff --git a/.superpowers/prototype/tokens.css b/.superpowers/prototype/tokens.css
new file mode 100644
index 0000000..8db1721
--- /dev/null
+++ b/.superpowers/prototype/tokens.css
@@ -0,0 +1,70 @@
+/* ============================================================
+   岩美酒库 · 令牌层（单一真源）
+   颜色按主题切换；间距/圆角/阴影/字号 全主题统一。
+   规则：屏幕与组件只引用 var(--token)，禁硬编码 hex。
+   ============================================================ */
+
+:root{
+  /* 间距（4px 基） */
+  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
+  /* 圆角 */
+  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
+  /* 字号梯度 */
+  --fs-display:28px; --fs-h1:21px; --fs-h2:17px; --fs-title:15px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
+  /* 字体族 */
+  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Inter",sans-serif;
+  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
+  /* 阴影系统（用各主题 --shadow 染色） */
+  --sh-1:0 1px 3px var(--shadow); --sh-2:0 4px 14px var(--shadow); --sh-3:0 18px 50px var(--shadow);
+  /* 遮罩 / 玻璃叠加（主题无关：弹窗·抽屉背板、hero 上的半透明白） */
+  --scrim:rgba(15,20,30,.42); --hero-glass:rgba(255,255,255,.16); --hero-glass-strong:rgba(255,255,255,.24);
+  /* 品牌标识色（logo / 门店字标，固定不随主题） */
+  --brand-deep:#0F3057; --brand-mid:#1B4F8E; --brand-wine:#8B2331;
+  /* 底部状态栏（深石板灰绿，主题无关的 chrome 条） */
+  --statusbar-bg:#37423D; --statusbar-fg:rgba(255,255,255,.82); --statusbar-muted:rgba(255,255,255,.46); --statusbar-strong:#FFFFFF; --statusbar-div:rgba(255,255,255,.13); --statusbar-ok:#7BC49A;
+  /* Toast 深底（主题无关） */
+  --toast-bg:#1F2330;
+  /* z-index 层级阶梯（全局唯一来源，禁止裸写 z-index≥10） */
+  --z-sticky:20; --z-shell-scrim:30; --z-shell-panel:35; --z-header:40; --z-fab:45;
+  --z-drawer-scrim:65; --z-drawer:70; --z-overlay:80; --z-pop:85; --z-menu:88; --z-toast:90;
+}
+
+/* ---------- A 经典蓝（浅 · 基准/默认） ---------- */
+:root[data-theme="a"]{
+  --page:#E7EBF1; --bg:#F5F7FA; --surface:#FFFFFF; --border:#DCE2EB; --border-subtle:#ECEFF4;
+  --text:#232934; --heading:#1B2430; --title:#1B2430; --muted:#6E7888; --faint:#99A3B3;
+  --primary:#2563AC; --primary-dark:#154072; --on-primary:#FFFFFF; --brand400:#4F86C6; --brand50:#EEF4FB; --accent:#8B2331;
+  --success:#2E8B57; --danger:#D14343; --warn:#E08E00;
+  --info-soft:#EEF4FB; --ok-soft:#E8F5EE; --accent-soft:#FAEEF0;
+  --success-bg:#E8F5EE; --danger-bg:#FDECEC; --warn-bg:#FFF4DB;
+  --th-bg:#F7F9FC; --row-hover:#EEF4FB; --shadow:rgba(20,40,70,.20);
+  --top-bg:#2563AC; --top-fg:#FFFFFF; --top-faint:rgba(255,255,255,.72); --top-border:#1E5594; --top-control:rgba(255,255,255,.16); --top-mark-bg:rgba(255,255,255,.22); --top-mark-fg:#FFFFFF;
+  --side-bg:#163A6C; --side-fg:#C4D6ED; --side-muted:#7C9FCB; --side-active-bg:#2C6BB3; --side-active-fg:#FFFFFF; --side-border:#1E4A86; --side-hover:#1C4680;
+  --menu-user-bg:#3C79C0; --menu-user-fg:#FFFFFF; --menu-user-hover:#4D88CC;
+}
+/* ---------- B 琥珀（深） ---------- */
+:root[data-theme="b"]{
+  --page:#0B0B10; --bg:#15151C; --surface:#1E1E27; --border:#2B2B37; --border-subtle:#26262F;
+  --text:#E8E8EE; --heading:#F6F6F9; --title:#F6F6F9; --muted:#9A9AA8; --faint:#6E6E7E;
+  --primary:#F5A300; --primary-dark:#D98C00; --on-primary:#1A1408; --brand400:#E0A23A; --brand50:#2A2212; --accent:#F87171;
+  --success:#34D399; --danger:#F87171; --warn:#FBBF24;
+  --info-soft:#1F2530; --ok-soft:#16312A; --accent-soft:#33181A;
+  --success-bg:#16312A; --danger-bg:#3A1A1C; --warn-bg:#332811;
+  --th-bg:#1A1A22; --row-hover:#24242F; --shadow:rgba(0,0,0,.55);
+  --top-bg:#1A1A22; --top-fg:#E8E8EE; --top-faint:#6E6E7E; --top-border:#2B2B37; --top-control:#15151C; --top-mark-bg:linear-gradient(135deg,#F5A300,#D98C00); --top-mark-fg:#1A1408;
+  --side-bg:#121219; --side-fg:#9A9AA8; --side-muted:#5E5E6C; --side-active-bg:#2A2212; --side-active-fg:#F5A300; --side-border:#24242E; --side-hover:#1E1E27;
+  --menu-user-bg:#3A3120; --menu-user-fg:#F0E7D6; --menu-user-hover:#473B27;
+}
+/* ---------- C 酒窖（暖浅） ---------- */
+:root[data-theme="c"]{
+  --page:#E9DECB; --bg:#FAF5EC; --surface:#FFFDF8; --border:#EADDC9; --border-subtle:#F1E8D8;
+  --text:#33271F; --heading:#241A14; --title:#9E3B30; --muted:#917A64; --faint:#B9A488;
+  --primary:#7C1F2C; --primary-dark:#5F1621; --on-primary:#F7E9D6; --brand400:#B5862F; --brand50:#F3E7D2; --accent:#A23522;
+  --success:#2E6B43; --danger:#B23A3A; --warn:#B07A12;
+  --info-soft:#F1E6D2; --ok-soft:#E7F0E6; --accent-soft:#F3E0D5;
+  --success-bg:#E7F0E6; --danger-bg:#F6E4DD; --warn-bg:#FBEFCF;
+  --th-bg:#F6EEDF; --row-hover:#F5ECDB; --shadow:rgba(74,20,32,.22);
+  --top-bg:#7C1F2C; --top-fg:#F7E9D6; --top-faint:rgba(247,233,214,.72); --top-border:#671E2C; --top-control:rgba(255,255,255,.14); --top-mark-bg:rgba(255,255,255,.20); --top-mark-fg:#F7E9D6;
+  --side-bg:#4A1420; --side-fg:#E0C9B2; --side-muted:#B58E76; --side-active-bg:#671E2C; --side-active-fg:#F7E9D6; --side-border:#5A2330; --side-hover:#5A1B28;
+  --menu-user-bg:#7E2B3B; --menu-user-fg:#F7E9D6; --menu-user-hover:#8E3344;
+}
diff --git a/.superpowers/prototype/tools/check-ds.mjs b/.superpowers/prototype/tools/check-ds.mjs
new file mode 100644
index 0000000..083b5d2
--- /dev/null
+++ b/.superpowers/prototype/tools/check-ds.mjs
@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+// 设计系统守门检查器（单一真源强制）—— 扫描 screens/* + atoms.css + 共享 JS，强制走 tokens.css。
+// 用法：node tools/check-ds.mjs   违规则 exit 1
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = f => fs.readFileSync(path.join(ROOT, f), 'utf8');
+const screens = fs.readdirSync(path.join(ROOT, 'screens')).filter(f => f.endsWith('.html'));
+// 共享 JS 模块（运行时生成 UI，也纳入颜色/数值扫描；tokens.css 是令牌之源，不扫）
+const SHARED_JS = ['shell.js', 'mobile-shell.js', 'statusbar.js', 'notify.js', 'fab.js', 'datewheel.js'].filter(f => fs.existsSync(path.join(ROOT, 'screens', f)));
+
+const COLOR_ALLOW = new Set(['#fff', '#ffffff', '#1677ff', '#07c160']);
+const definedVars = new Set();
+for (const f of ['tokens.css', 'atoms.css']) for (const m of read(f).matchAll(/--([a-z0-9-]+)\s*:/gi)) definedVars.add('--' + m[1]);
+const ATOM_CSS = ['atoms.css', 'mobile-atoms.css'].filter(f => fs.existsSync(path.join(ROOT, f)));
+const atomClasses = new Set();
+for (const f of ATOM_CSS) for (const m of read(f).matchAll(/\.([a-zA-Z][\w-]*)/g)) atomClasses.add(m[1]);
+const iconIds = new Set();
+for (const m of read('screens/icons.js').matchAll(/<symbol id="(i-[\w-]+)"/g)) iconIds.add(m[1]);
+const indexSrc = read('index.html');
+
+const COLOR_RE = /#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)/g;
+const VAR_RE = /var\(\s*(--[a-z0-9-]+)/gi;
+const FS_NAME = { 28: '--fs-display', 21: '--fs-h1', 17: '--fs-h2', 15: '--fs-title', 13: '--fs-body', 12: '--fs-sm', 11: '--fs-xs' };
+const R_NAME = { 4: '--r-sm', 6: '--r-md', 10: '--r-lg', 14: '--r-xl', 999: '--r-pill' };
+const BREAKPOINTS = new Set([600, 760, 1080]); // 规范断点；其余视为魔法数
+const COMPONENT_ATOMS = new Set(['btn', 'input', 'ctrl', 'searchbox', 'datefield', 'wheel-pop', 'chip', 'badge', 'kpi', 'combo', 'combo-pop', 'table', 'lines', 'drawer', 'drawer-mask', 'overlay', 'modal', 'menu', 'toast', 'seg', 'grid', 'mcard', 'notice', 'pager', 'dactions', 'statusbar', 'notify-pop', 'nt-item', 'nt-ic', 'datefield']);
+const CLASS_WHITELIST = new Set(['hl']);
+
+let colorViol = [], varViol = [], classViol = [], fsViol = [], zViol = [], forkViol = [], importViol = [], iconViol = [], radiusViol = [], ffViol = [], bpViol = [], regViol = [];
+
+// ---- 颜色/变量/font-size/z-index/圆角/字体族（screens + atoms.css + 共享 JS）----
+function valueScan(label, src) {
+  const lines = src.split('\n');
+  let svgDepth = 0;
+  lines.forEach((line, i) => {
+    const depthBefore = svgDepth;
+    if (!line.includes('ds-allow')) {
+      for (const m of line.matchAll(COLOR_RE)) {
+        const c = m[0];
+        if (COLOR_ALLOW.has(c.toLowerCase())) continue;
+        const before = line.slice(0, m.index);
+        if (depthBefore > 0 || /(?:fill|stroke)\s*=\s*["']?$/.test(before)) continue;
+        colorViol.push(`${label}:${i + 1}  ${c}`);
+      }
+      for (const m of line.matchAll(VAR_RE)) if (!definedVars.has(m[1])) varViol.push(`${label}:${i + 1}  var(${m[1]})`);
+      for (const m of line.matchAll(/font-size:\s*(\d+)px/g)) if (FS_NAME[+m[1]]) fsViol.push(`${label}:${i + 1}  font-size:${m[1]}px → var(${FS_NAME[+m[1]]})`);
+      for (const m of line.matchAll(/z-index:\s*(\d+)\b/g)) if (+m[1] >= 10) zViol.push(`${label}:${i + 1}  z-index:${m[1]} → var(--z-*)`);
+      for (const m of line.matchAll(/border-radius:\s*(\d+)px/g)) if (R_NAME[+m[1]]) radiusViol.push(`${label}:${i + 1}  border-radius:${m[1]}px → var(${R_NAME[+m[1]]})`);
+      for (const m of line.matchAll(/font-family:\s*([^;}\n]+)/g)) if (!/var\(--font/.test(m[1])) ffViol.push(`${label}:${i + 1}  font-family 未走 var(--font*)`);
+    }
+    svgDepth += (line.match(/<svg/g) || []).length - (line.match(/<\/svg>/g) || []).length;
+    if (svgDepth < 0) svgDepth = 0;
+  });
+}
+for (const f of screens) valueScan('screens/' + f, read('screens/' + f));
+for (const f of ATOM_CSS) valueScan(f, read(f));
+for (const f of SHARED_JS) valueScan('screens/' + f, read('screens/' + f));
+
+// ---- HTML 专项检查（screens）----
+function localClassesOf(src) { const set = new Set(); for (const sm of src.matchAll(/<style[\s\S]*?<\/style>/gi)) for (const m of sm[0].matchAll(/\.([a-zA-Z][\w-]*)/g)) set.add(m[1]); return set; }
+function usedClassTokens(src) {
+  const found = [];
+  for (const m of src.matchAll(/class\s*=\s*"([^"]*)"/g)) for (const t of m[1].split(/\s+/)) found.push(t);
+  for (const m of src.matchAll(/className\s*=\s*['"]([^'"]*)['"]/g)) for (const t of m[1].split(/\s+/)) found.push(t);
+  for (const m of src.matchAll(/classList\.(?:add|toggle|remove)\(([^)]*)\)/g)) for (const sm of m[1].matchAll(/['"]([\w-]+)['"]/g)) found.push(sm[1]);
+  return found.filter(t => t && !t.includes('${') && !t.includes('{') && /^[a-zA-Z][\w-]*$/.test(t));
+}
+function forkAtoms(src) {
+  const out = new Set();
+  for (const sm of src.matchAll(/<style[\s\S]*?<\/style>/gi)) for (const rm of sm[0].matchAll(/([^{}]+)\{/g)) for (let sel of rm[1].split(','))
+    { const m = sel.trim().match(/^\.([a-zA-Z][\w-]*)$/); if (m && COMPONENT_ATOMS.has(m[1])) out.add(m[1]); }
+  return out;
+}
+for (const file of screens) {
+  const src = read('screens/' + file);
+  const isStub = /location\.replace/.test(src) && !/<body>[\s\S]*\S[\s\S]*<\/body>/.test(src.replace(/<body><\/body>/, ''));
+  const local = localClassesOf(src);
+  for (const t of new Set(usedClassTokens(src))) if (!atomClasses.has(t) && !local.has(t) && !CLASS_WHITELIST.has(t)) classViol.push(`screens/${file}  .${t}`);
+  for (const c of forkAtoms(src)) forkViol.push(`screens/${file}  .${c}{}`);
+  if (!isStub && (!src.includes('tokens.css') || !src.includes('atoms.css'))) importViol.push(`screens/${file}`);
+  for (const m of src.matchAll(/<svg([^>]*)>([\s\S]*?)<\/svg>/g)) {
+    const inner = m[2];
+    if (/rect width="64"/.test(inner) || /viewBox="0 0 64 64"/.test(m[1])) continue;
+    const u = inner.match(/<use[^>]*href="#(i-[\w-]+)"/);
+    if (u) { if (!iconIds.has(u[1])) iconViol.push(`screens/${file}  <use #${u[1]}> 未登记`); continue; }
+    if (/<(path|circle|rect|line|polyline|ellipse)\b/.test(inner)) iconViol.push(`screens/${file}  内联图标`);
+  }
+  // 响应式断点魔法数（仅 @media max-width）
+  for (const m of src.matchAll(/@media[^{]*max-width:\s*(\d+)px/g)) if (!BREAKPOINTS.has(+m[1])) bpViol.push(`screens/${file}  @media max-width:${m[1]}px（规范断点：${[...BREAKPOINTS].join('/')}）`);
+}
+// 同样扫 atoms.css / mobile-atoms.css 的断点
+for (const f of ATOM_CSS) for (const m of read(f).matchAll(/@media[^{]*max-width:\s*(\d+)px/g)) if (!BREAKPOINTS.has(+m[1])) bpViol.push(`${f}  @media max-width:${m[1]}px`);
+
+// ---- 新原子登记：组件原子必须在 index.html 出现（活文档）----
+for (const c of COMPONENT_ATOMS) {
+  const re = new RegExp(`class="[^"]*\\b${c}\\b|\\.${c}[\\s{:.,]`);
+  if (!re.test(indexSrc)) regViol.push(`.${c}  ← 未在 index.html 登记展示`);
+}
+
+const banner = s => `\n${'='.repeat(60)}\n${s}\n${'='.repeat(60)}`;
+const sec = (n, arr) => { console.log(banner(`${n}  共 ${arr.length}`)); console.log(arr.length ? arr.join('\n') : '（无）✓'); };
+console.log(banner('设计系统守门检查（单一真源）'));
+console.log(`token: ${definedVars.size} · 原子类: ${atomClasses.size} · 图标: ${iconIds.size} · 扫描: screens(${screens.length}) + atoms.css + 共享JS(${SHARED_JS.length})`);
+sec('❶ 硬编码颜色', colorViol);
+sec('❷ 未定义 token', varViol);
+sec('❸ 未登记组件类', classViol);
+sec('❹ font-size 未走 --fs-*', fsViol);
+sec('❺ z-index 未走阶梯', zViol);
+sec('❻ fork 了 atoms 组件', forkViol);
+sec('❼ 缺 tokens/atoms 引入', importViol);
+sec('❽ 图标未走 sprite', iconViol);
+sec('❾ border-radius 未走 --r-*', radiusViol);
+sec('❿ font-family 未走 --font', ffViol);
+sec('⓫ 响应式断点魔法数', bpViol);
+sec('⓬ 组件原子未在 index.html 登记', regViol);
+
+const all = [colorViol, varViol, classViol, fsViol, zViol, forkViol, importViol, iconViol, radiusViol, ffViol, bpViol, regViol];
+const fail = all.reduce((s, a) => s + a.length, 0);
+console.log(banner(fail ? `✗ 未通过：${fail} 处违规` : '✓ 通过：颜色/排版/层级/圆角/字体/图标走单一来源，组件已登记未 fork，断点规范'));
+process.exit(fail ? 1 : 0);