/* ===== 有赞式页面装修器（多端 × 多页面） · 水擎暖棕；PC 为淘宝式宽屏 ===== */
.decorator {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--tg-beian-h, 0px) - 92px); min-height: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}

/* ========== 顶部工具条 ========== */
.dec-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; background: var(--plate); border-bottom: 1px solid var(--line);
}
.dec-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.dec-h5url { display: flex; align-items: center; gap: 6px; }
.dec-h5url input {
border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
  font-size: 12px; width: 210px; background: #fff;
}
.dec-h5btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 12px; font-size: 11.5px; cursor: pointer; color: var(--cyan); }
.dec-top-actions { display: flex; gap: 8px; }
.dec-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 7px;
padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: all .13s;
}
.dec-btn:hover { border-color: var(--cyan-d); color: var(--cyan-d); }
.dec-btn:active { transform: translateY(1px) scale(.98); }
.dec-btn.primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.dec-btn.primary:hover { background: var(--cyan-d); color: #fff; }
.dec-btn.warn { border-color: var(--orange); color: var(--cyan-d); background: var(--orange-soft); }
.dec-btn.warn:hover { background: var(--orange-soft); color: var(--orange-d); }
.dec-draft-tag {
  font-size: 12px; color: var(--orange-d); background: var(--orange-soft); border: 1px solid rgba(232,104,28,.3);
padding: 4px 12px; border-radius: 7px; white-space: nowrap;
}

/* 顶部页面清单 */
.dec-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dec-page-btn {
padding: 4px 12px; font-size: 12.5px; color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer; user-select: none; transition: all .15s;
}
.dec-page-btn:hover { border-color: var(--cyan-d); color: var(--cyan-d); }
.dec-page-btn.on { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.dec-page-btn.add { font-weight: 700; color: var(--cyan-d); padding: 4px 12px; }
.dec-page-mini { font-size: 11.5px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.dec-page-mini:hover { background: var(--cyan-soft); color: var(--cyan); }
.dec-page-mini.danger:hover { color: var(--red); background: #fbe9e8; }

.dec-main { flex: 1; display: flex; min-height: 0; }

/* ========== 左：模块库 ========== */
.dec-lib { width: 196px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--line); background: #fff; }
.dec-lib-group { padding: 12px 12px 4px; }
.dec-lib-title { font-size: 11px; color: var(--muted); margin: 8px 0 8px; letter-spacing: .5px; }
.dec-lib-item {
  display: flex; align-items: center; gap: 6px;
padding: 8px 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--ink);
  background: var(--plate); border: 1px solid var(--line); border-radius: 7px;
  cursor: grab; user-select: none; transition: all .15s;
}
.dec-lib-item:hover { background: var(--cyan-soft); border-color: var(--cyan-d); transform: translateY(-1px); }
.dec-lib-item:active { cursor: grabbing; transform: scale(.97); }
.dli-ic { width: 18px; text-align: center; font-size: 12px; color: var(--cyan); }

/* ========== 中：画布 ========== */
.dec-canvas {
  flex: 1; overflow: auto; background: var(--bg); padding: 24px;
  display: flex; justify-content: center; align-items: flex-start;
}
.phone-frame {
  width: 375px; height: 752px; flex-shrink: 0;
  background: #fff; border: 9px solid #1c1c1e; border-radius: 42px;
  box-shadow: 0 18px 44px rgba(60, 40, 20, .28); overflow: hidden; position: relative;
}
.phone-statusbar {
  height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; font-size: 12px; font-weight: 600; color: #222; background: #fff;
}
.psb-right { font-size: 9px; letter-spacing: -1px; }
.phone-body { height: calc(100% - 34px); overflow-y: auto; background: #fff; position: relative; }

/* PC 画布（宽屏） */
.pc-frame {
  width: 1180px; min-height: 720px; flex-shrink: 0;
  background: #fff; border: 10px solid #1c1c1e; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(40, 50, 70, .28); overflow: hidden;
  position: relative; display: flex; flex-direction: column;
}
.pc-bar { height: 42px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; background: var(--plate); padding: 0 16px; color: var(--muted); font-size: 12px; }
.pc-bar i { font-style: normal; color: #777; }
.pc-body { flex: 1; overflow-y: auto; background: #fff; position: relative; min-height: 620px; }

/* ========== 文档流模块包裹（手机 / PC） ========== */
.mod-item.flow {
position: relative; margin: 8px 12px; padding: 4px;
  border: 2px solid transparent; border-radius: 8px; transition: border-color .12s;
  cursor: grab;
}
.mod-item.flow:active { cursor: grabbing; }
.mod-item.pc-flow {
  position: relative; margin: 0; padding: 0;
  border: 2px solid transparent; cursor: grab;
}
.mod-item.pc-flow:active { cursor: grabbing; }
.mod-item.sel { border-color: var(--blue); }
/* 块级：上下插入蓝线 */
.mod-item.ins-before { box-shadow: 0 -3px 0 var(--blue); }
.mod-item.ins-after { box-shadow: 0 3px 0 var(--blue); }
.mod-tool {
  position: absolute; top: -12px; right: -6px; z-index: 5; display: flex; gap: 4px;
background: var(--blue); border-radius: 6px; padding: 4px 8px;
}
.mod-tool .mt-btn { cursor: pointer; font-size: 11px; color: #fff; line-height: 1.5; }
.mod-tool .mt-btn.danger:hover { color: #fbe9e8; }

/* 手机：功能项并排（可单独拖） */
.mod-item.flow.is-fn {
  display: inline-block; width: 25%; margin: 0; padding: 6px 2px;
  vertical-align: top; box-sizing: border-box; text-align: center;
}
/* 功能网格：左右插入蓝线（覆盖上下线） */
.mod-item.flow.is-fn.ins-before { box-shadow: inset 4px 0 0 var(--blue); }
.mod-item.flow.is-fn.ins-after { box-shadow: inset -4px 0 0 var(--blue); }
.mod-item.flow.is-mn { margin: 4px 12px; padding: 0; cursor: grab; }

/* 悬浮层 */
.float-layer { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 12; }
.phone-frame .float-layer { top: 34px; }
.mod-float {
  position: absolute; pointer-events: auto; cursor: move; overflow: hidden;
  border: 2px solid transparent; border-radius: 50%; background: var(--cyan-d);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.mod-float .mf-cs { color: #fff; font-size: 20px; }
.mod-float img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 搜索 ---- */
.pv-search { display: flex; align-items: center; gap: 7px; padding: 8px 12px; color: #9b9b9b; font-size: 12px; }
.pvs-ic { font-size: 13px; opacity: .8; }

/* ---- 轮播 / 图片广告 ---- */
.pv-swiper, .pv-ad { position: relative; background: var(--plate); overflow: hidden; }
.pv-swiper img, .pv-ad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-swiper-empty, .pv-ad-empty, .pv-video-empty {
  display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--muted); font-size: 11.5px; text-align: center; padding: 12px;
  background: var(--plate); border: 1px dashed var(--line);
}
.pvs-dots { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; color: rgba(0,0,0,.25); font-size: 8px; }

/* ---- 标题 ---- */
.pv-title { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px; color: var(--cus-tc,var(--ink)); }
.pvt-bar { width: 4px; height: 14px; border-radius: 2px; background: var(--cus-accent,var(--cyan-d)); }
.pv-title b { font-weight: 700; }
.pvt-more { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: auto; }

/* ---- 富文本 ---- */
.pv-rich { font-size: 12.5px; color: var(--cus-tc,#555); line-height: 1.6; word-break: break-word; }
.pv-rich img { max-width: 100%; }

/* ---- 视频（可在线播放） ---- */
.pv-video2 { width: 100%; background: #000; border-radius: 6px; overflow: hidden; }
.pv-video2 video { border-radius: 6px; }
.pv-video2 .pv-video-empty { border-radius: 6px; height: 160px; }

/* ---- 分割线 / 留白 ---- */
.pv-divider { border-top: 1px solid var(--line); }

/* ---- 商品组 / 商品列表 ---- */
.pv-goods { width: 100%; }
.pvg-title { font-size: 14px; font-weight: 700; padding: 4px 4px 8px; color: var(--cus-tc,var(--ink)); }
.pvg-grid { display: grid; gap: 8px; }
.pvg-card { min-width: 0; }
.pvg-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; background: var(--line); }
.pvg-name { font-size: 11.5px; color: var(--cus-tc,var(--ink)); line-height: 1.4; height: 32px; overflow: hidden; margin-top: 4px; }
.pvg-price { font-size: 13px; color: var(--cus-accent,var(--cyan-d)); font-weight: 700; margin-top: 4px; }
.pvg-empty { grid-column: 1/-1; text-align: center; color: var(--muted); font-size: 11.5px; padding: 20px; background: var(--plate); border: 1px dashed var(--line); border-radius: 8px; }

/* ---- 分类金刚区 ---- */
.pv-kk { display: grid; gap: 4px; }
.pvkk-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; min-width: 0; }
.pvkk-ic {
  width: 40px; height: 40px; border-radius: 50%; background: var(--plate); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--cyan); overflow: hidden;
}
.pvkk-ic img { width: 100%; height: 100%; object-fit: cover; }
.pvkk-tx { font-size: 10.5px; color: var(--cus-tc,var(--ink-2)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 店铺信息 ---- */
.pv-shop { display: flex; align-items: center; gap: 11px; background: var(--plate); border-radius: 10px; padding: 12px; }
.pvs-logo {
  width: 48px; height: 48px; border-radius: 12px; background: var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--cus-accent,var(--cyan-d)); font-size: 18px; overflow: hidden;
}
.pvs-logo img { width: 100%; height: 100%; object-fit: cover; }
.pvs-meta { flex: 1; min-width: 0; }
.pvs-meta b { font-size: 14px; color: var(--cus-tc,var(--ink)); }
.pvs-desc { font-size: 11.5px; color: var(--cus-tc,var(--muted)); margin-top: 4px; line-height: 1.5; word-break: break-word; }

/* ---- 营销宫格 ---- */
.pv-act { display: grid; gap: 6px; }
.pva-card { border-radius: 10px; padding: 12px 8px; text-align: center; color: #fff; min-width: 0; }
.pva-card b { display: block; font-size: 13px; font-weight: 700; }
.pva-card span { display: block; font-size: 10.5px; opacity: .9; margin-top: 4px; }

/* ---- 会员卡头部 ---- */
.pv-hero {
  display: flex; align-items: flex-start; gap: 12px;
padding: 20px 16px 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-d));
}
.pvh-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.85);
  border: 2px solid rgba(255,255,255,.6); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 18px;
}
.pvh-info { flex: 1; min-width: 0; }
.pvh-info b { color: #fff; font-size: 15px; font-weight: 600; }
.pvh-tag {
  display: inline-block; margin-top: 8px; background: #fff; color: var(--cyan);
font-size: 10px; border-radius: 20px; padding: 4px 12px;
}
.pvh-growth { color: rgba(255,255,255,.9); font-size: 10px; margin-top: 8px; }

/* ---- 资产条 ---- */
.pv-asset { display: flex; background: var(--plate); border-radius: 10px; padding: 16px 0; }
.pva-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
.pva-item b { font-size: 18px; font-weight: 700; color: var(--cus-accent,var(--cyan)); }
.pva-item span { font-size: 11px; color: var(--cus-tc,var(--muted)); margin-top: 4px; }

/* ---- 我的订单 ---- */
.pv-order { background: var(--plate); border-radius: 10px; padding: 12px; display: flex; }
.pvo-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; color: var(--cus-tc,#555); }
.pvo-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--plate); color: var(--cus-accent,var(--cyan)); display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---- 个人功能项（宫格单元：图标在上、文字在下） ---- */
.pv-fn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px; text-align: center; }
.pvf-ic {
  width: 38px; height: 38px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.pvf-tx {
  font-size: 11px; line-height: 1.25; color: var(--cus-tc,var(--ink)); width: 100%;
  white-space: normal; word-break: keep-all; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pvf-arrow { color: var(--muted); font-size: 16px; }

/* ---- 整行菜单 ---- */
.pv-mn {
  display: flex; justify-content: space-between; align-items: center;
padding: 12px 4px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--cus-tc,var(--ink));
}
.pv-mn .pvf-arrow { color: var(--muted); font-size: 17px; }

/* ---- 动态容器（购物车 / 消息） ---- */
.pv-box { width: 100%; }
.pvb-sk { text-align: center; color: var(--muted); font-size: 11.5px; background: var(--plate); border: 1px dashed var(--line); border-radius: 8px; padding: 28px; }
.pvb-msg { display: flex; align-items: center; gap: 10px; padding: 12px 4px; }
.pvb-ava.sk { width: 42px; height: 42px; border-radius: 8px; background: var(--line); flex-shrink: 0; }
.pvb-line { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pvb-line .sk { height: 10px; width: 70%; background: var(--line); border-radius: 3px; }
.pvb-line small.sk { width: 40%; }

/* ===================== PC 淘宝式宽屏 ===================== */
.pc-topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; background: #f7f7f5; border-bottom: 1px solid #eee; font-size: 11.5px; color: var(--muted); }
.pct-links { color: var(--muted); letter-spacing: 2px; }

.pc-header { display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: #fff; }
.pch-logo { width: 200px; flex-shrink: 0; }
.pch-logo b { font-size: 27px; color: var(--cyan); letter-spacing: 1px; }
.pch-logo img { max-height: 56px; max-width: 100%; object-fit: contain; }
.pch-search { flex: 1; min-width: 0; }
.pch-box { display: flex; }
.pch-box input {
flex: 1; border: 2px solid var(--cyan); border-right: 0; padding: 12px 16px;
  font-size: 13px; outline: none; border-radius: 0;
}
.pch-box button { background: var(--cyan); color: #fff; border: 0; padding: 0 32px; font-size: 15px; cursor: pointer; }
.pch-hot { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.pch-hot i { font-style: normal; color: var(--muted); margin-right: 4px; }
.pch-cart { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; font-size: 12.5px; color: #555; flex-shrink: 0; }
.pch-cart b { color: var(--cyan); margin-left: 4px; }

.pc-nav { display: flex; align-items: stretch; background: var(--cyan); height: 42px; }
.pcn-all { background: var(--ink); color: #fff; display: flex; align-items: center; padding: 0 24px; font-size: 14px; }
.pcn-c { color: rgba(255,255,255,.88); display: flex; align-items: center; padding: 0 24px; font-size: 13.5px; cursor: pointer; }
.pcn-c:hover { background: rgba(255,255,255,.1); }

.pc-hero { display: flex; gap: 10px; padding: 12px 24px; height: 400px; box-sizing: border-box; }
.pch-side { width: 200px; background: var(--plate); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.pchs-cate { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 40px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.pchs-cate:hover { background: var(--cyan); color: #fff; }
.pch-banner { flex: 1; background: var(--plate); border-radius: 4px; overflow: hidden; position: relative; min-width: 0; }
.pch-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pch-banner .pchb-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pchb-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 12px; background: var(--plate); border: 1px dashed var(--line); }
.pch-adside { width: 236px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.pcha-ad { flex: 1; background: var(--plate); border: 1px dashed var(--line); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.pcha-ad img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pc-actbar { margin: 8px 24px; background: var(--orange-soft); border: 1px solid rgba(232,104,28,.3); border-radius: 6px; padding: 11px 16px; font-size: 13px; color: var(--orange-d); }
.pc-actbar .pca-dot { margin-right: 8px; }
.pc-actbar a { float: right; color: var(--cyan-d); cursor: pointer; font-size: 12.5px; }

.pc-floor { margin: 24px 24px 8px; }
.pcf-head { display: flex; align-items: baseline; border-bottom: 2px solid var(--cyan); padding-bottom: 8px; }
.pcf-head b { font-size: 19px; color: var(--ink); }
.pcf-head i { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 12px; }
.pcf-more { margin-left: auto; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.pcf-grid { display: grid; gap: 10px; margin-top: 16px; }
.pcf-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; min-width: 0; transition: box-shadow .15s, transform .15s; }
.pcf-card:hover { box-shadow: 0 8px 22px rgba(122,74,36,.14); transform: translateY(-2px); }
.pcf-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--plate); }
.pcfc-name { padding: 8px 12px 4px; font-size: 12.5px; color: var(--ink); line-height: 1.4; height: 36px; overflow: hidden; }
.pcfc-bottom { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 12px; }
.pcfc-bottom b { font-size: 16px; color: var(--cyan-d); }
.pcfc-bottom button { background: var(--cyan); color: #fff; border: 0; border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.pcfc-bottom button:active { transform: scale(.94); }

.pc-adbanner { margin: 16px 24px; border-radius: 6px; overflow: hidden; background: var(--plate); border: 1px dashed var(--line); }
.pc-adbanner img { width: 100%; display: block; object-fit: cover; }
.pc-adbanner span { display: flex; align-items: center; justify-content: center; height: 120px; color: var(--muted); font-size: 12.5px; }

.pc-title2 { display: flex; align-items: center; gap: 9px; margin: 20px 24px 4px; }
.pct2-bar { width: 4px; height: 17px; border-radius: 2px; background: var(--cyan); }
.pc-title2 b { font-size: 16.5px; color: var(--ink); }
.pc-rich2 { margin: 12px 24px; font-size: 13px; color: #555; line-height: 1.7; word-break: break-word; }
.pc-rich2 img { max-width: 100%; }

.pc-brand { display: flex; margin: 24px; border: 1px solid var(--line); border-radius: 8px; padding: 20px 0; background: var(--plate); }
.pcb-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.pcb-ic { font-size: 21px; color: var(--cyan); }

.pc-footer { background: #f7f7f5; border-top: 1px solid var(--line); margin-top: 20px; }
.pcf-links { display: flex; padding: 28px 24px 20px; }
.pcfl-col { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.pcfl-col b { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.pcfl-col i { font-style: normal; font-size: 12px; color: var(--muted); cursor: pointer; }
.pcfl-col i:hover { color: var(--cyan); }
.pcf-copy { border-top: 1px solid var(--line); padding: 16px; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.8; }

/* PC 右侧悬浮：客服 + 回顶 */
.pc-float { position: absolute; top: 42px; right: 0; bottom: 0; pointer-events: none; z-index: 14; }
.pcf-sidefloat { position: sticky; top: 220px; margin-right: 0; display: flex; flex-direction: column; pointer-events: auto; }
.pcfs-btn {
  width: 62px; background: #fff; border: 1px solid var(--line); border-right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 0; cursor: pointer; color: var(--cyan);
}
.pcfs-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pcfs-btn span { font-size: 19px; }
.pcfs-btn i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.pcfs-btn:hover { background: var(--plate); }
.pcfs-btn:active { transform: scale(.95); }

/* ========== 右：属性面板 ========== */
.dec-prop { width: 282px; flex-shrink: 0; overflow-y: auto; border-left: 1px solid var(--line); background: #fff; padding: 16px; }
.prop-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 56px 12px; line-height: 1.8; }
.pe-ic { font-size: 34px; opacity: .5; }
.prop-mname { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pf-label { font-size: 12px; color: var(--ink-2); margin: 12px 0 8px; }
.pf-tip { font-size: 11.5px; color: var(--muted); background: var(--plate); border-radius: 8px; padding: 8px; line-height: 1.7; margin-top: 12px; }
.pf-thumb { display: inline-block; width: 60px; height: 60px; border-radius: 7px; border: 1px solid var(--line); overflow: hidden; position: relative; margin: 0 8px 8px 0; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-thumb span { position: absolute; top: 0; right: 2px; color: #fff; background: rgba(0,0,0,.45); border-radius: 50%; width: 15px; height: 15px; line-height: 14px; text-align: center; font-size: 11px; cursor: pointer; }
.pf-fullimg { width: 100%; border-radius: 8px; border: 1px solid var(--line); margin: 8px 0; display: block; }

.pf-upload {
  display: block; width: 100%; border: 1px dashed var(--cyan-d); background: var(--plate);
color: var(--cyan); border-radius: 7px; padding: 8px; font-size: 12.5px; cursor: pointer; margin: 6px 0; text-align: center;
}
.pf-upload:hover { background: var(--plate); }
.pf-upload.ghost { border-color: var(--line); color: var(--muted); background: var(--plate); }
.pf-upload:active { transform: scale(.98); }

/* 已选商品/分类行 */
.pf-pick { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; background: var(--plate); border-radius: 6px; padding: 5px 8px; }
.pf-pick img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.pf-pick span { flex: 1; font-size: 11.5px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick i { font-style: normal; color: #c00; cursor: pointer; padding: 0 4px; }
.pfp-move { font-size: 11px; color: var(--muted); cursor: pointer; padding: 0 4px; }
.pfp-move:hover { color: var(--cyan); }

/* 手动金刚项 */
.pf-kk { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: var(--plate); }
.pfkk-top { display: flex; align-items: center; gap: 6px; }
.pfkk-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--line); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--cyan); cursor: pointer; }
.pfkk-ic img { width: 100%; height: 100%; object-fit: cover; }
.pfkk-name { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; font-size: 11.5px; }
.pfkk-link { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; font-size: 11px; margin-top: 6px; }

.pf-act { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pf-act i { font-style: normal; color: #c00; cursor: pointer; }

/* 通用外观 */
.pf-appearance { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.pfa-title { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.pfa-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.pfa-reset { font-size: 11.5px; color: var(--muted); cursor: pointer; background: none; border: 0; padding: 0; margin-top: 2px; }
.pfa-reset:hover { color: var(--cyan); }

/* ==================== 四端预览（preview.js） ==================== */
.pv4-wrap { display:flex; flex-direction:column; height:calc(100vh - var(--tg-beian-h, 0px) - 92px); min-height:560px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pv4-bar { display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--plate); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pv4-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--bg); padding:28px; overflow:auto; }
.pv4-badge { flex-shrink:0; background:var(--orange-soft); color:var(--cyan-d); font-size:11px; text-align:center; padding:4px 8px; border-bottom:1px solid var(--line); }
.pv4-note { color:var(--muted); font-size:12px; }
.pv4-mp { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; gap:10px; }
.pv4-mp-qr { width:168px; height:168px; border:1px dashed var(--muted); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; background:var(--plate); }
.pv4-mp-t { font-size:16px; font-weight:700; }
.pv4-mp-d { font-size:12px; color:var(--muted); text-align:center; line-height:1.8; }
.pv4-pc { width:100%; max-width:1080px; height:100%; min-height:520px; border:1px solid #cdd3da; border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(60,40,20,.2); }
.pv4-pc-bar { display:flex; align-items:center; gap:7px; background:var(--line); padding:8px 16px; flex-shrink:0; }
.pv4-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.pv4-dot.r{background:var(--red)}.pv4-dot.y{background:var(--yellow)}.pv4-dot.g{background:var(--green)}
.pv4-pc-url { flex:1; margin-left:12px; background:#fff; border-radius:6px; padding:4px 12px; font-size:12px; color:#666; }
.pv4-iframe { flex:1; width:100%; border:0; display:block; }