:root { --pink:#f6488c; --pink2:#ff7ab0; --ink:#23222a; --muted:#9a97a5; --line:#ecebf0; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; background:#f5f4f7; color:var(--ink); }
#app { max-width:480px; margin:0 auto; background:#fff; min-height:100vh; display:flex; flex-direction:column; }

/* 顶部商品切换（演示用，真实店匠由后台配置决定）*/
.demo-sw { padding:8px 12px 0; }
.demo-sw label { font-size:11px; color:var(--muted); margin-right:6px; }
.demo-sw select { width:100%; padding:8px; border:1px solid var(--line); border-radius:10px; font-size:13px; margin-top:4px; }
.demo-sw .demo-admin { display:inline-block; margin-top:6px; background:var(--pink); color:#fff; border-radius:18px; padding:5px 12px; font-size:12px; font-weight:700; text-decoration:none; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; position:sticky; top:0; background:#fff; z-index:6; box-shadow:0 1px 0 var(--line); }
.topbar .title { font-weight:700; font-size:15px; }
.topbar .back { font-size:20px; color:#777; cursor:pointer; }
.btn-next { background:var(--pink); color:#fff; border:none; border-radius:8px; padding:7px 16px; font-weight:700; font-size:14px; cursor:pointer; }
.btn-next:disabled { opacity:.4; cursor:not-allowed; }

.stepper { display:flex; gap:4px; padding:10px 12px 0; overflow-x:auto; }
.step-dot { flex:0 0 auto; font-size:11px; color:var(--muted); background:#f1f0f4; border-radius:12px; padding:4px 9px; white-space:nowrap; }
.step-dot.active { background:var(--pink); color:#fff; font-weight:700; }
.step-dot.done { color:var(--pink); background:#fff0f5; }

.canvas-wrap { position:relative; margin:10px 12px; border-radius:14px; overflow:hidden; background:#fafafa; box-shadow:inset 0 0 0 1px var(--line); }
.canvas-wrap canvas { width:100%; display:block; touch-action:none; }
.avatar-handles { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.avatar-handles .h-wrap { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; }
.avatar-handles .h-circle { position:absolute; width:34px; height:34px; border-radius:50%; background:var(--pink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.25); user-select:none; border:2px solid #fff; }
.avatar-handles .h-box { position:absolute; inset:0; border:2px dashed rgba(246,72,140,.95); border-radius:6px; pointer-events:none; }
.avatar-handles .h-del { background:#e23; }
.hint { text-align:center; color:var(--muted); font-size:12px; padding:6px 12px; }

.panel { padding:0 12px 16px; }
.panel.hidden { display:none; }
.sec-title { display:flex; align-items:center; gap:6px; font-weight:700; font-size:13px; margin:8px 0 8px; }
.sec-title .dot { color:var(--pink); }
.addnew { border:1.5px dashed var(--pink); color:var(--pink); border-radius:12px; width:76px; height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; cursor:pointer; }
.addnew .plus { font-size:26px; line-height:1; }
.must { color:#e23; font-size:11px; margin-top:6px; display:none; }
.strip { display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px; }
.thumb { width:74px; height:74px; border-radius:12px; overflow:hidden; flex:0 0 auto; border:3px solid #eee; cursor:pointer; background:#f0f0f0; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb.sel { border-color:var(--pink); }
.tmpl-card { width:92px; height:124px; flex:0 0 auto; border-radius:12px; overflow:hidden; border:3px solid #eee; cursor:pointer; background:#f0f0f0; position:relative; }
.tmpl-card canvas { width:100%; height:100%; }
.tmpl-card.sel { border-color:var(--pink); }
.tmpl-card .tmpl-name { position:absolute; left:0; right:0; bottom:0; font-size:9px; line-height:1.2; color:#fff; background:rgba(0,0,0,.55); padding:2px 3px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tmpl-group { margin-top:10px; }
.tmpl-group-label { font-size:12px; color:#888; margin-bottom:6px; }
.tmpl-group-row { display:flex; gap:8px; overflow-x:auto; }
/* 常驻区父级/子级名称行：子级缩进、弱化颜色；模板名仍显示在每张卡上 */
#tplGroups .tmpl-group { margin-top:8px; }
#tplGroups .tmpl-group-label { font-weight:700; color:#333; margin:8px 0 4px; }
#tplGroups .tmpl-group.child-group { margin-left:10px; }
#tplGroups .tmpl-group.child-group .tmpl-group-label { font-weight:600; color:#777; font-size:12px; }
#tplGroups .tmpl-group-row { padding-bottom:4px; }
/* 常驻区父级/普通分类横排选择卡：显示分类名称（可选封面图） */
.tpl-parent-label { font-size:12px; color:#666; margin:8px 0 6px; }
.tpl-parent-row { display:flex; gap:8px; overflow-x:auto; }
.tpl-parent { width:88px; height:96px; flex:0 0 auto; border-radius:12px; overflow:hidden; border:3px solid #eee; cursor:pointer; background:#f0f0f0 center/cover no-repeat; position:relative; }
.tpl-parent.sel { border-color:var(--pink); }
.tpl-parent .tpl-parent-label { position:absolute; left:0; right:0; bottom:0; font-size:9px; line-height:1.2; color:#fff; background:rgba(0,0,0,.55); padding:2px 3px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pill { border:1.5px solid #e6e6e6; border-radius:20px; padding:6px 12px; font-size:12px; cursor:pointer; color:#333; }
.pill.sel { border-color:var(--pink); color:var(--pink); font-weight:700; }
.btn-more { background:var(--pink); color:#fff; border:none; border-radius:22px; padding:10px 18px; font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-more .more-count { background:rgba(255,255,255,.28); border-radius:10px; padding:1px 8px; font-size:12px; }
.swatch { width:30px; height:30px; border-radius:50%; border:2px solid #eee; cursor:pointer; }
.swatch.sel { border-color:var(--pink); box-shadow:0 0 0 2px #fff inset; }
.text-input { width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; margin-top:6px; }
.label-row { font-size:12px; color:#888; margin:10px 0 4px; }
.font-chip { width:96px; height:48px; border-radius:10px; border:2px solid #eee; overflow:hidden; cursor:pointer; background:#fff; }
.font-chip.sel { border-color:var(--pink); }
.font-chip canvas { width:100%; height:100%; display:block; }
.edit-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.edit-row .lbl { font-size:12px; color:#888; min-width:34px; }
.pill.chk { display:inline-flex; align-items:center; gap:4px; border-radius:20px; padding:6px 12px; font-size:12px; }
.pill.chk input { accent-color:var(--pink); }

.bottom-bar { position:sticky; bottom:0; padding:10px 12px; background:#fff; display:flex; gap:8px; border-top:1px solid var(--line); z-index:5; }
.btn-preview { flex:1; background:#fff; border:1.5px solid var(--pink); color:var(--pink); border-radius:26px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; }
.btn-ghost { flex:1; background:#fff; border:1.5px solid #ddd; color:#666; border-radius:26px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:20; }
.overlay.show { display:flex; }
.preview-card { background:#fff; border-radius:16px; padding:18px; max-width:380px; width:90%; text-align:center; }
.preview-card img { max-width:100%; border-radius:12px; }
.preview-card .actions { display:flex; gap:10px; margin-top:12px; }
.preview-card button { flex:1; border:none; border-radius:10px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; }
.preview-card .act-edit { background:#eee; color:#333; }
.preview-card .act-next { background:var(--pink); color:#fff; }

/* 模板库弹层：进入「模板页」，选完模板点返回回设计页（参考同行图2：左分类 + 右模板网格）*/
.tpl-lib { position:fixed; inset:0; background:#fff; z-index:22; display:flex; flex-direction:column; }
.tpl-lib .lib-head { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.tpl-lib .lib-head .lib-title { font-weight:700; font-size:15px; }
.tpl-lib .lib-back { background:var(--pink); color:#fff; border:none; border-radius:22px; padding:8px 14px; font-weight:700; font-size:13px; cursor:pointer; }
.tpl-lib .lib-body { flex:1; display:flex; min-height:0; overflow:hidden; }
.tpl-lib .lib-side { width:112px; flex:0 0 112px; overflow-y:auto; border-right:1px solid var(--line); padding:10px 0; }
.tpl-lib .lib-side .cat { display:block; width:100%; text-align:left; padding:10px 12px; font-size:13px; color:#333; background:transparent; border:none; border-left:3px solid transparent; cursor:pointer; }
.tpl-lib .lib-side .cat small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.tpl-lib .lib-side .cat.sel { background:#fff0f5; color:var(--pink); font-weight:700; border-left-color:var(--pink); }
.tpl-lib .lib-side .cat.child { padding-left:26px; font-size:12px; }
.tpl-lib .lib-side .cat.child small { font-size:10px; }
.tpl-lib .lib-grid-wrap { flex:1; overflow-y:auto; padding:14px; }
.tpl-lib .lib-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:12px; }
.tpl-lib .lib-col { display:block; }
.tpl-lib .lib-col .tmpl-group { margin-top:0; margin-bottom:16px; }
.tpl-lib .lib-col .tmpl-group-label { font-weight:700; color:#333; font-size:13px; }
.tpl-lib .lib-col .tmpl-group.child-group { margin-bottom:12px; }
.tpl-lib .lib-col .tmpl-group.child-group .tmpl-group-label { font-weight:600; color:#666; font-size:12px; padding-left:10px; border-left:2px solid var(--pink); }
.tpl-lib .lib-col .tmpl-group.cat-header .tmpl-group-label { font-weight:800; color:var(--pink); font-size:14px; }

.cart-screen { padding:16px; display:none; position:fixed; inset:0; background:#fff; z-index:16; overflow:auto; }
.cart-screen .row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:13px; }
.cart-screen .price { font-weight:700; color:var(--pink); }
.btn-primary { background:var(--pink); color:#fff; width:100%; border:none; border-radius:12px; padding:13px; font-weight:700; font-size:15px; margin-top:14px; cursor:pointer; }
.btn-plain { background:#f0f0f0; color:#333; width:100%; border:none; border-radius:12px; padding:11px; font-weight:700; margin-top:8px; cursor:pointer; }
.json-box { background:#111; color:#9fe; padding:12px; border-radius:10px; font-size:10.5px; margin-top:12px; white-space:pre-wrap; word-break:break-all; max-height:240px; overflow:auto; }
.loading { position:absolute; inset:0; background:rgba(255,255,255,.9); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; color:#888; }
.related-item { display:flex; justify-content:space-between; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:12px; padding:10px; margin-bottom:8px; }
.related-item .name { font-size:13px; font-weight:700; }
.related-item .price { color:var(--pink); font-weight:700; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#111; color:#fff; padding:9px 16px; border-radius:20px; font-size:13px; opacity:0; transition:.2s; z-index:30; pointer-events:none; }
.toast.show { opacity:1; }
input[type=file] { display:none; }

/* 后台“实时预览”模式：复用同一引擎，隐藏前台演示/导航/加购等 chrome，聚焦设计画布。 */
.preview-mode .demo-sw,
.preview-mode .bottom-bar,
.preview-mode .topbar .back,
.preview-mode #nextBtn,
.preview-mode .cart-screen { display:none !important; }
.preview-mode .hint { display:none; }