:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --ink: #1f2329;
  --muted: #8a9099;
  --line: #e6e9ef;
  --primary: #4c6ef5;
  --primary-d: #3b5bdb;
  --blue: #409eff;
  --red: #e03131;
  --green: #2f9e44;
  --shadow: 0 2px 12px rgba(20, 30, 60, 0.06);
  --radius: 16px;
  /* 侧栏宽度：固定 260px（面板本身及内部内容均不缩放，只有中间预览区等比缩放） */
  --side-w: 260px;
  /* 顶栏「1.1元开通会员」与「下载」按钮的统一高度，两者必须完全等高 */
  --top-btn-h: 31px;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink);  margin: 0; padding: 0; }

/* 隐藏滚动条但保留滚动能力（需要时可正常下拉） */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { background: var(--bg); color: var(--ink); 
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 最顶层透明栏：LOGO 左上、下载/会员/头像 右上，与底图同层（无独立横条背景） */
/* 顶栏：上下内边距各 15px。
   下载按钮变矮后顶栏内容高度由品牌区（37px）决定，上下留白各 15px，
   使「品牌区底 → 主体内容顶」= 15px，与「LOGO → 浏览器顶」= 15px 精确一致。 */
.app-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; background: transparent; position: relative; }
.app-brand { display: flex; align-items: center; gap: 11px; }
.app-brand .logo { font-size: 28px; }
.app-brand h1 { margin: 0; font-size: 17px; color: var(--ink); }
.app-brand .sub { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.app-actions { display: flex; align-items: center; gap: 10px; }
.app-left { display: flex; align-items: center; gap: 16px; }
.app-center { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
/* 撤销/重做：脱离顶栏左右分栏的居中计算，固定对齐到「中间预览区」水平中心。
   --hist-center-x 由 app.js 实测当前激活面板的中间预览列中心后写入（相对 .app-top 左边缘的 px），
   使窗口缩放、左右面板折叠、页签切换、全屏预览时都精确居中于预览区。 */
.top-history { position: absolute; left: var(--hist-center-x, 50%); top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; z-index: 6; }
.top-history .btn-icon { width: 34px; height: 34px; padding: 0; border: none; background: transparent; box-shadow: none; font-size: 20px; color: var(--muted); }
.top-history .btn-icon:hover:not(:disabled) { border: none; background: rgba(20,30,60,.06); color: var(--primary-d); transform: none; }

/* 主体：左导航 + 内容，铺满顶栏以下 */
.app-body { background: var(--bg); color: var(--ink);  flex: 1 1 auto; display: flex; min-height: 0; }

/* 最左侧竖向导航（与中间背景同色一体，无分隔线；窄、图标在上文字在下）
   顶部不留白，与左/中/右面板顶边对齐（面板顶边即 app-top 底边）。 */
.sidenav { flex: 0 0 84px; width: 84px; height: 100%; background: var(--bg); border-right: none; display: flex; flex-direction: column; padding: 0 8px 16px; gap: 6px; }
.nav-items { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; background: transparent; padding: 6px 4px; border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: center; transition: .15s; }
.nav-item:hover { background: transparent; color: var(--muted); }
.nav-item.active { background: transparent; color: var(--muted); box-shadow: none; }
.nav-item.active:hover { background: transparent; color: var(--muted); }
.nav-item .ni-ico { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 50%; background: transparent; transition: background .12s, color .12s; }
.nav-item:hover .ni-ico { background: #eceef2; color: var(--ink); }
.nav-item.active .ni-ico { background: #2b2b2b; color: #fff; }
.nav-item.active:hover .ni-ico { background: #2b2b2b; color: #fff; }
.nav-settings .ni-ico { padding: 0; border-radius: 0; background: transparent; }
.nav-settings:hover .ni-ico { background: transparent; color: var(--muted); }
.nav-item .ni-ico svg { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.nav-bottom { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.nav-bottom .usage-pill, .nav-bottom .member-badge { display: none; }
.nav-bottom .usage-pill { align-self: flex-start; }
.nav-settings { margin-top: 2px; }

.btn-icon { width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 11px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: .15s; }
.btn-icon:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-d); transform: translateY(-1px); }
.btn-icon:disabled { opacity: .38; cursor: not-allowed; }
.usage-pill { font-size: 12px; padding: 6px 12px; background: #eef2ff; color: var(--primary-d); border-radius: 999px; font-weight: 600; }
.member-badge { font-size: 12px; padding: 6px 12px; background: linear-gradient(135deg,#ffd43b,#fab005); color: #5c3b00; border-radius: 999px; font-weight: 700; }

/* 顶栏到主体的间距：由 .app-top 的 padding-bottom 提供（与 LOGO 到浏览器顶的距离一致），
   这里不再叠加第二层留白，保证 logo 行上下留白相等。 */
main { flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; padding: 0 24px 0 0; display: flex; flex-direction: column; }
.panel { display: none; }
.panel.active { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; }
#tab-help.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#tab-help .help { max-width: 900px; margin: 0 auto; }

/* 小屏：左侧导航收为纯图标 */
@media (max-width: 760px) {
  .sidenav { flex-basis: 68px; width: 68px; padding: 0 8px 16px; }
  .nav-item .ni-label, .app-brand-text { display: none; }
  .nav-item { justify-content: center; padding: 7px 0; }
}

/* 自动双栏（右设置面板随视口比例自适应，永远保持中右两栏，各自内部滚动） */
.layout-auto { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(100px, 1fr) var(--side-w); gap: 18px; align-items: stretch; grid-template-rows: minmax(0, 1fr); }

.card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card h2 { font-size: 14px; margin: 4px 0 12px; color: var(--ink); }
.card h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
.card hr { border: none; border-top: 1px dashed var(--line); margin: 12px 0; }

/* 控件 */
.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: 13px; }
.field > span { color: var(--muted); white-space: nowrap; }
.field input[type="number"], .field input[type="text"], .field select { width: 140px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
.field input[type="color"] { width: 46px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 2px; }
.field.check { justify-content: flex-start; gap: 8px; }
.field.path-row { justify-content: flex-start; gap: 8px; align-items: center; }
.field.path-row .path-input { flex: 1 1 auto; width: auto; min-width: 0; }
.btn-path { flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; }
.btn-sm { padding: 6px 12px; font-size: 12px; height: auto; line-height: 1.4; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 9px 14px; border-radius: 9px; font-size: 13px; cursor: pointer; font-weight: 600; transition: .15s; }
.btn:hover { border-color: var(--primary); color: var(--primary-d); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-d); color: #fff; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-random { width: 225px; height: 30px; box-sizing: border-box; border: none; background: #eceef2; color: var(--ink); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; transition: .15s; }
.btn-random:hover { background: #e2e6ea; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.btn-group.right { justify-content: flex-end; }

/* 图片托盘 */
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; max-height: 150px; overflow: auto; }
.thumbs .thumb { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); cursor: grab; }
.thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .thumb .del { position: absolute; top: 1px; right: 1px; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; cursor: pointer; line-height: 1; }
.thumbs .muted { width: 100%; }

.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.6; }
.log-box { font-size: 12px; line-height: 1.6; color: #303133; margin: 4px 0 0; height: 190px; overflow-y: auto; overflow-x: hidden; padding: 8px 10px; background: #f7f8fa; border: 1px solid var(--line); border-radius: 8px; scrollbar-width: thin; scrollbar-color: #cfd4dc transparent; }
/* 在等高布局下让日志框填充所在列高度（至少 190px，内容超长仍可滚动，不变形） */
.auto-settings .log-box { flex: 1 1 auto; min-height: 190px; }
.log-box::-webkit-scrollbar { width: 6px; }
.log-box::-webkit-scrollbar-track { background: transparent; }
.log-box::-webkit-scrollbar-thumb { background: #cfd4dc; border-radius: 3px; }
.log-line { padding: 2px 0; border-bottom: 1px dashed #e7e9ee; word-break: break-all; white-space: pre-wrap; }
.log-line:last-child { border-bottom: none; }
.log-line.log-ok { color: #1a7f37; }
.log-line.log-err { color: #d92626; }
.log-line.log-warn { color: #b58100; }
.log-line.log-info { color: #5a6573; }
.log-line .fname { font-weight: 700; }
.log-open { display: inline-block; margin-left: 8px; color: #1677ff; cursor: pointer; text-decoration: none; border: 1px solid #cfe0ff; border-radius: 6px; padding: 0 6px; font-size: 11px; }
.log-open:hover { background: #eaf2ff; }
.status-line { font-size: 13px; color: var(--muted); margin: 10px 0; }
.muted { color: var(--muted); font-size: 12px; }

/* 批量页原有的「对话 / 语音 / 发送」相关样式已随功能一并移除 */

.help p, .help li { font-size: 13px; line-height: 1.7; color: #444; }
.help ul { margin: 4px 0 4px 18px; }
.help code { background: #f1f3f5; padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.help-card p, .help-card li { font-size: 13px; line-height: 1.7; color: #444; }
.help-card ul { margin: 4px 0 4px 18px; }
.help-card code { background: #f1f3f5; padding: 1px 6px; border-radius: 5px; font-size: 12px; }

/* 使用说明浮层（中部预览区，不切换页面） */
#help-overlay { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; }
#help-overlay.hidden { display: none; }
.help-scrim { position: absolute; inset: 0; background: rgba(245,247,250,.86); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.help-card { position: relative; width: min(720px, 92%); max-height: 88%; overflow: auto; background: #fff; border-radius: 16px; padding: 24px 28px; box-shadow: 0 18px 50px rgba(20,30,60,.20); }
.help-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none; background: #f1f3f5; border-radius: 50%; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.help-close:hover { background: #e3e6ea; color: var(--ink); }

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(20,30,60,.4); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: #fff; border-radius: 16px; padding: 24px; width: 380px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.modal-box h2 { margin: 0 0 14px; font-size: 17px; }
.modal-box h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
.modal-box .row { align-items: center; }
.modal-box input[type="text"], .modal-box input[type="number"] { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; }

.hidden { display: none !important; }

/* ===== 手动三栏（锁定视口高度，左右随视口比例自适应但永远保持三栏，各自内部滚动） ===== */
.layout-manual { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--side-w) minmax(100px, 1fr) var(--side-w); grid-template-rows: minmax(0, 1fr); gap: 18px; align-items: stretch; position: relative; transition: grid-template-columns .22s ease; }

/* 左右侧栏折叠 / 展开：单一开关 .side-toggle（贴内缘，始终可见，点击收起 / 再点击展开） */
/* 左右面板折叠按钮：极简细箭头（chevron），无背景块 / 边框 / 阴影，仅深灰箭头 + hover 微底色 */
.side-toggle { position: absolute; top: 50%; z-index: 7; width: 23px; height: 85px; border: none; background: transparent; box-shadow: none; cursor: pointer; color: #2b3038; padding: 0; transition: left .22s ease, right .22s ease, color .15s, background .15s; }
.side-toggle:hover { color: #111418; background: rgba(20,30,60,.06); }
.side-toggle svg { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 10px; height: 12px; display: block; }
.side-toggle svg path { fill: currentColor; stroke: none; }
.side-toggle.flipped svg { transform: translateY(-50%) rotate(180deg); }
/* 左开关：默认贴左栏右缘（与中间分界处），收起后贴布局左缘 */
#btn-toggle-left, #auto-toggle-left { left: calc(var(--side-w) + 9px); transform: translate(-50%,-50%); border-radius: 0 8px 8px 0; }
.layout-manual.left-collapsed #btn-toggle-left, .layout-manual.left-collapsed #auto-toggle-left { left: 0; transform: translateY(-50%); }
/* 右开关：默认贴右栏左缘，收起后贴布局右缘 */
#btn-toggle-right, #auto-toggle-right { right: calc(var(--side-w) + 9px); transform: translate(50%,-50%); border-radius: 8px 0 0 8px; }
.layout-manual.right-collapsed #btn-toggle-right, .layout-manual.right-collapsed #auto-toggle-right { right: 0; transform: translateY(-50%); }

/* 收起侧栏：保持网格列宽不变（中间预览区尺寸与位置完全不动），仅把该侧面板内容隐藏，
   面板区露出与中间同色的背景，视觉上即“面板消失、预览不变”。点击内缘开关可重新展开。 */
.layout-manual.left-collapsed { grid-template-columns: var(--side-w) minmax(100px, 1fr) var(--side-w); }
.layout-manual.left-collapsed .col-left { visibility: hidden; pointer-events: none; }
.layout-manual.right-collapsed { grid-template-columns: var(--side-w) minmax(100px, 1fr) var(--side-w); }
.layout-manual.right-collapsed .col-right { visibility: hidden; pointer-events: none; }

/* 效果预览：隐藏两侧面板，预览独占最大块 */
body.preview-only .col-left, body.preview-only .col-right { display: none !important; }
body.preview-only .layout-manual { grid-template-columns: 1fr !important; }
body.preview-only .side-toggle { display: none !important; }

/* 自动版：左开关隐藏避免游离按钮（右开关保留，右栏仍在） */
#auto-toggle-left { display: none; }

/* ===== 批量页（自动版）：右栏保留原样，「生成设置 + 日志」移入中间预览下方 ===== */
/* 三栏布局：左模板 + 中预览/生成设置 + 右画布设置（沿用 .layout-manual 默认三栏） */
/* 预览区占最大块，剩余高度留给下方的生成设置面板 */
#auto-stage-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
/* 中间下方面板：横向平铺「生成设置」「日志」两块。
   —— 无论窗口缩到多小都不出现滚动条：两列以 minmax(0,…) 等比收缩（而非固定最小宽导致横向滚动），
      日志区也不设最大高度与 overflow，内容随长短自然展开，不再出现下拉/横向滚动条。 */
.auto-settings {
  flex: 0 0 auto;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  /* 底部两角直角，与浏览器底边齐平；仅顶部圆角 */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.auto-settings .sec {
  border-top: none;
  padding: 10px 14px;
  border-radius: 10px 10px 0 0; /* 底部两角不圆角：与中间区域底边齐平 */
  background: #f7f8fa;
  /* 两列等高：以较高的一列（生成设置）为基准，另一列拉伸补齐，内容不变形 */
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
/* 正文区占满列高，使较短的「日志」列在拉伸后无空洞、日志框自然填充 */
.auto-settings .sec-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.auto-settings .sec:first-of-type { padding-top: 10px; }
/* 面板内字段：永远单行显示，窗口缩小时不换行（超长文本截断而非撑高变形） */
.auto-settings .btn { white-space: nowrap; flex-shrink: 0; }
.auto-settings .field { flex-wrap: nowrap; margin: 5px 0; gap: 6px; min-width: 0; }
.auto-settings .field > span { font-size: 11px; flex: 0 1 auto; min-width: 0; }
.auto-settings .field select { flex: 0 1 auto; width: 100px; max-width: 100%; min-width: 0; font-size: 12px; padding: 6px 9px; border-radius: 7px; }
/* 路径行：按钮与输入框等高，且窗口缩小时仍保持同一行（输入框收缩而非换行） */
.auto-settings .field.path-row { flex-wrap: nowrap; min-width: 0; }
.auto-settings .field.path-row .btn-path { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.auto-settings .field.path-row .btn-path,
.auto-settings .field.path-row .path-input { height: 34px; box-sizing: border-box; }
/* 底部三行（状态提示 / 复选框 / 格式）固定高度、永不换行变形，各自独立成行 */
.auto-settings .sec-title { margin: 0 0 8px; }
.auto-settings .status-line { margin: 6px 0; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-settings .field.check { white-space: nowrap; overflow: hidden; }
.auto-settings #btn-run { margin-top: 6px; }
/* 隐私保护提示：浅绿底、单行紧凑，紧贴「上传文件夹」行下方，告知用户图片仅本地处理不上传 */
.auto-settings .privacy-note { display: flex; align-items: center; gap: 5px; margin: 5px 0 2px; padding: 4px 8px; background: #eef6ee; border: 1px solid #cfe8cf; border-radius: 7px; font-size: 11px; line-height: 1.3; color: #2f7d32; }
.auto-settings .privacy-note .pn-ico { flex: 0 0 auto; font-size: 12px; }
.auto-settings .privacy-note .pn-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-settings .privacy-note strong { color: #1f6b22; font-weight: 700; }

/* 抠图面板：内嵌同源 iframe，撑满内容区，与拼图共享会员/额度 */
#tab-koutu.panel { display: none; }
#tab-koutu.panel.active { display: block; padding: 0; height: 100%; }
.koutu-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
/* 全屏预览模式下隐藏生成设置面板，让预览真正铺满 */
body.preview-only .auto-settings { display: none; }

/* 左栏（单框：模板区）；两侧面板位于预览上层，底部直角直达浏览器底部 */
.col-left { display: flex; flex-direction: column; min-height: 0; padding: 14px; font-size: 16px; position: relative; border-radius: var(--radius) var(--radius) 0 0; z-index: 5; overflow-y: auto; }
.left-head { flex: 0 0 auto; }
.layout-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.count-row { display: flex; gap: 6px; flex: 1; }
.count-tab { flex: 1; border: 1px solid var(--line); background: #fff; height: 30px; box-sizing: border-box; padding: 0; border-radius: 9px; font-size: 13px; cursor: pointer; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: .12s; }
.count-tab:hover { border-color: #aebfff; }
.count-tab.active { background: #eceef2; color: var(--ink); border-color: #d0d4dc; }
.more-wrap { position: relative; }
.count-tab.more { flex: 0 0 auto; height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.count-tab.more .chev { font-size: 10px; }
.count-tab.more.open { border-color: var(--primary); color: var(--primary-d); }
.more-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,30,60,.14); padding: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 132px; }
.more-item { border: none; background: #fff; height: 30px; box-sizing: border-box; padding: 0; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink); font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; }
.more-item:hover { background: #f1f3f5; }
.more-item.active { background: #eceef2; color: var(--primary-d); }
/* 多边形「更多」里的解除分类锁定项：跨两列，与数量档区分开 */
.more-item-all { grid-column: 1 / -1; height: 32px; margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.more-item-all:hover { background: #f1f3f5; color: var(--ink); }
.custom-chip { margin-bottom: 10px; align-self: flex-start; border: 1px solid var(--line); background: #fff; height: 30px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; font-size: 12px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.custom-chip.active { border-color: var(--primary); color: var(--primary-d); }
.custom-chip .pin { font-size: 12px; }
/* 「自定义」与「清空已填充图片」并排一行 */
.custom-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.custom-row .custom-chip { margin-bottom: 0; }
.custom-chip.clear-filled { color: #b8533f; border-color: #f0d6d0; }
.custom-chip.clear-filled:hover { border-color: #e39a8b; background: #fff7f5; }

.custom-panel { margin: 6px 0 10px; }
.custom-panel .field input[type="number"] { width: 70px; }

/* 中间滚动区：所有图片数分区竖向滚动 */
.left-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; padding: 2px 6px 2px 2px; }
.tpl-gallery { display: block; }
.tpl-section { margin-bottom: 14px; }
.tpl-section-head { font-size: 14px; color: #303133; font-weight: 700; margin: 12px 2px 10px; position: sticky; top: 0; background: linear-gradient(#fff 72%, rgba(255,255,255,0)); padding: 2px 0; z-index: 2; }
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl-card { position: relative; border: 2px solid #e4e7ed; background: #eef0f3; border-radius: 10px; padding: 4px; cursor: pointer; transition: .12s; }
.tpl-card:hover { border-color: #aebfff; }
.tpl-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(76,110,245,.20); }
.tpl-card svg { display: block; width: 100%; aspect-ratio: 1/1; background: transparent; border-radius: 6px; }
/* VIP 模板缩略图右上角角标：所有画廊共用，pointer-events:none 不影响点选。
   vip.png 原图为 53×32 的横向圆角胶囊，必须等比显示；旧版强塞 21×21 圆形导致 VIP 字被压扁变形。
   用户要求「小一点、无白边、外边与卡片外框外沿齐平」：24px 等比、无描边阴影；
   right/top:-2px 抵消 2px 边框，让角标外边压在框边外沿；右上角 10px 圆角与卡片圆角吻合，不露出弧线外。 */
.tpl-vip-badge { position: absolute; right: -2px; top: -2px; display: block; width: 24px; height: auto; object-fit: contain; border-radius: 4px 10px 4px 4px; pointer-events: none; z-index: 4; }
.tpl-card.selected .tpl-vip-badge { right: -2px; top: -2px; }

.left-foot { flex: 0 0 auto; display: flex; justify-content: center; margin-top: 12px; }
.left-foot .btn { width: 100%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; padding: 11px; font-weight: 600; }

/* ===== 图片暂存框（暂存框 / 批量 / 自动填充） ===== */
.shelf { flex: 0 0 auto; display: flex; flex-direction: column; max-height: 42vh; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.shelf-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.shelf-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.shelf-count { font-size: 11px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.shelf-sub { font-size: 11px; color: var(--muted); }
.shelf-collapse { margin-left: auto; border: 1px solid var(--line); background: #fff; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 12px; line-height: 1; }
.shelf-collapse:hover { border-color: #aebfff; color: var(--primary-d); }
.shelf-body { background: var(--bg); color: var(--ink);  display: flex; flex-direction: column; min-height: 0; margin-top: 10px; }
.shelf-body.hidden { display: none; }
.btn-add-dark { background: #444; color: #ededed; border: none; width: 100%; height: 26px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.btn-add-dark:hover { background: #555; }
.btn-add-dark .ic-plus { width: 14px; height: 14px; display: block; flex: 0 0 auto; }

.shelf-grid { display: flex; gap: 6px; overflow-y: auto; padding: 8px; margin-top: 10px; min-height: 70px; flex: 1 1 auto; align-items: flex-start; }
.shelf-grid:empty::after { content: "还没有图片，点上方「＋ 添加图片」或把本地图片直接拖到这里"; display: block; width: 100%; font-size: 11px; color: var(--muted); text-align: center; padding: 18px 6px; line-height: 1.6; }
.shelf-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shelf-thumb { position: relative; border-radius: 5px; overflow: hidden; background: #f1f3f5; cursor: pointer; border: 2px solid transparent; transition: .12s; }
.shelf-thumb:hover { border-color: #aebfff; }
.shelf-thumb img { width: 100%; height: auto; display: block; }
.shelf-thumb.selected { border-color: #ff5b8d; box-shadow: 0 0 0 3px rgba(255,91,141,.20); }
.shelf-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: #ff5b8d; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 3; }

.shelf-actions { flex: 0 0 auto; display: flex; gap: 8px; margin-top: 10px; }
.shelf-btn { flex: 1; border: 1px solid var(--line); background: #fff; padding: 9px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.shelf-btn:hover { border-color: #aebfff; color: var(--primary-d); }
.shelf-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 批量工具条：无边框、透明底，整体居中，一排显示：全选圆圈 + 已选 N 个 + 删除 + 分隔 + 填充 + 关闭（整体缩小） */
.batch-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 4px 2px; background: transparent; border: none; }
.batch-check { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid #c9ced4; background: #fff; cursor: pointer; position: relative; transition: .12s; }
.batch-check:hover { border-color: #ff5b8d; }
.batch-check.on { background: #ff5b8d; border-color: #ff5b8d; }
.batch-check.on::after { content: ''; position: absolute; left: 4px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.batch-info { font-size: 12px; color: #555; font-weight: 600; white-space: nowrap; }
.batch-action { border: none; background: none; color: #555; font-size: 12px; cursor: pointer; font-weight: 600; padding: 4px 3px; }
.batch-action:hover { color: #ff5b8d; }
.batch-divider { width: 1px; height: 14px; background: #e3e6ea; margin: 0 2px; }
.batch-fill { flex: 0 0 auto; width: 56px; height: 20px; padding: 0; border: none; background: linear-gradient(135deg,#ff7eb3,#ff5b8d); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.batch-fill:hover { filter: brightness(1.04); }
.batch-close { border: 1px solid #e3e6ea; background: #fff; color: #868e96; width: 11px; height: 11px; border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.batch-close:hover { background: #f1f3f5; color: #495057; }

/* 左栏图片缓存视图（点导航「添加图片」进入） */
#shelf-view { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; gap: 8px; padding: 2px; }
#shelf-view.hidden { display: none; }
/* 从系统拖文件进入暂存区时的高亮提示层（不吃鼠标事件，drop 仍落到 #shelf-view） */
#shelf-view.shelf-drop-active::after {
  content: "松开即可加入图片暂存（支持多张 / 整个文件夹）";
  position: absolute; inset: 2px; z-index: 20; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; box-sizing: border-box;
  border: 2px dashed #4c6ef5; border-radius: 12px;
  background: rgba(76, 110, 245, .10);
  color: #2f4bd8; font-size: 13px; font-weight: 700; line-height: 1.6;
}
#shelf-view.shelf-drop-active .shelf-grid { outline: 2px solid rgba(76,110,245,.35); outline-offset: -2px; border-radius: 8px; }
.shelf-head { flex: 0 0 auto; display: flex; gap: 8px; }
.shelf-head .btn-add-dark { flex: 1 1 auto; }
.shelf-back { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.shelf-back .ic-back { width: 16px; height: 16px; display: block; }
.shelf-back:hover { border-color: var(--primary); color: var(--primary-d); }
.shelf-back:hover .ic-back { color: var(--primary-d); }

/* 中栏（无外框，直接融入整体背景） */
.col-mid { display: flex; flex-direction: column; min-height: 0; position: relative; }
.stage-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; padding: 24px; background: transparent; overflow: hidden; z-index: 1; cursor: default; }
.stage { position: relative; background: #fff; box-shadow: 0 2px 14px rgba(20,30,60,.10); flex: 0 0 auto; cursor: default; }
/* 中间预览区整体统一为正常鼠标（覆盖单元格/图片原本的手型、移动光标） */
.stage-wrap, .stage-wrap * { cursor: default !important; }
.stage { position: relative; background: #fff; box-shadow: 0 2px 14px rgba(20,30,60,.10); flex: 0 0 auto; }
.stage img.auto-prev-img { width: 100%; height: 100%; display: block; }
/* 批量预览编辑态参考线：SVG 覆盖层，与预览图同坐标同尺寸（viewBox 用 canvas 内部像素）。
   non-scaling-stroke 让线宽恒为屏幕 1px，不被预览图的 transform 缩放稀释；颜色与正常框边一致(#d7dbe2)。
   仅屏幕预览可见，导出图不含此层；不挡交互。 */
.stage .auto-guide { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.stage .auto-guide path, .stage .auto-guide rect { fill: none; stroke: #d7dbe2; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* VIP 免费模板水印：整张画布铺满斜纹文字（canvas 叠层，与导出共用 drawWatermark）。
   水印层 pointer-events:none，完全不挡画布的拖拽 / 删除 / 文字交互；
   底部「开通会员去水印」按钮只占一小块，点击弹会员窗，其余区域照常操作。 */
.vip-watermark-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 25; pointer-events: none; }
.vip-watermark-cta {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 45;
  line-height: 16px; padding: 6px 10px; border: none; border-radius: 999px;
  /* 用户参考图：浅橙纯色胶囊、白字、不加粗、无渐变无阴影（约 104×28px，比旧版 150×32 更小） */
  background: #ffc8a3;
  color: #fff; font-size: 12px; font-weight: 400; letter-spacing: 0; white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.vip-watermark-cta:hover { filter: brightness(.96); }
.vip-watermark-cta:active { transform: translateX(-50%) scale(.98); }

/* 预览区底部浮动控制条（半透明） */
.stage-toolbar { position: absolute; right: 54px; bottom: 16px; display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 6px; background: rgba(45,49,57,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; box-shadow: 0 6px 18px rgba(20,30,60,.22); border-radius: 999px; z-index: 8; }
.stage-toolbar button { border: none; background: transparent; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1; color: #fff; display: flex; align-items: center; justify-content: center; transition: .12s; }
.stage-toolbar button:hover { background: rgba(255,255,255,.18); color: #fff; }
.stage-toolbar button svg { width: 16px; height: 16px; display: block; }
/* 帮助按钮：独立于工具栏之外、更大一点的圆形（深色半透明，保证在任意背景上都可见） */
.tb-help-fab {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(45,49,57,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  transition: background .12s;
}
.tb-help-fab:hover { background: rgba(45,49,57,.82); }
.stage-toolbar .tb-zoom-label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; border-radius: 8px; padding: 5px 4px; user-select: none; }
.stage-toolbar .tb-zoom-label:hover { background: rgba(255,255,255,.18); }
.stage-toolbar .tb-sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); margin: 0 2px; }
/* 底部工具栏悬浮提示：深色胶囊 + 下箭头，悬停时显示在按钮上方 */
.stage-toolbar .tb-tip { position: relative; }
.tb-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(45,49,57,.6);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  z-index: 40;
  box-shadow: 0 4px 12px rgba(20,30,60,.25);
}
.tb-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(45,49,57,.6);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  z-index: 40;
}
.tb-tip:hover::after,
.tb-tip:hover::before {
  opacity: 1;
  visibility: visible;
}
.zoom-menu { position: fixed; background: rgba(45,49,57,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; min-width: 124px; z-index: 40; }
/* 指向百分比数字的小三角（菜单在数字上方，三角朝下） */
.zoom-menu::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -5px; border: 5px solid transparent; border-top-color: rgba(45,49,57,.6); }
.zoom-menu .zm-item { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: #fff; cursor: default; text-align: center; white-space: nowrap; transition: .12s; }
.zoom-menu .zm-item:hover { background: rgba(255,255,255,.16); }
/* 帮助菜单：与缩放菜单同款 60% 半透明灰底白字，两项「在线咨询 / 意见反馈」 */
#help-menu, #auto-help-menu { position: absolute; right: 16px; bottom: 52px; background: rgba(45,49,57,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 5px; display: flex; flex-direction: column; min-width: 96px; z-index: 41; }
#help-menu .hm-item, #auto-help-menu .hm-item { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; height: 26px; border: none; background: transparent; padding: 0 10px; border-radius: 7px; font-size: 12px; color: #fff; cursor: pointer !important; text-align: center; white-space: nowrap; transition: .12s; }
#help-menu .hm-item:hover, #auto-help-menu .hm-item:hover { background: rgba(255,255,255,.16); }
/* 透明背景：棋盘格提示 */
.stage.transparent { background: repeating-conic-gradient(#ffffff 0% 25%, #e9ecef 0% 50%) 50% / 16px 16px !important; }
/* 关键：.stage-cell 只是同包围盒大小的定位容器，多边形格子的可见形状由 .cell-shape 的 clip-path 决定。
   若容器本身接收指针事件，后面格子的「矩形空白区」会盖住前面格子的可见形状
   （异形格包围盒大量重叠），导致前面格子 hover 不到、拖不动图。
   这里让容器不吃事件，只由 .cell-shape（clip-path 内）/ 图片 / 按钮 / 文字接收；
   绑定在 .stage-cell 上的 click / dragover / drop / pointer* 仍可通过子元素冒泡正常触发。 */
.stage-cell { position: absolute; cursor: default; pointer-events: none; transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease; }
/* 视觉内容容器：承载图片/填充/占位，承担圆角与多边形 clip-path；边框/底色放这里，删除按钮与文字层挂在 .stage-cell 上不被裁剪 */
.stage-cell .cell-shape { position: absolute; inset: 0; background: #fff; border: 1px solid #d7dbe2; border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: auto; transition: border-radius .12s ease, border-color .12s ease; }
.stage-cell.filled .cell-shape { border-color: transparent; }
.stage-cell.poly-cell .cell-shape { border: none; background: #fff; }
/* 间距=0（无缝）：已填图的小框去掉 CSS 边框，照片贴边不露白缝（与导出一致）。
   空格子的轮廓改由下面的 .cell-guide 显示，所以「无缝」不等于「看不见框位」。
   用 :where() 压低特异性，保证下面 hover / 选中 / 拖放的蓝色高亮在无缝模式下依然生效。 */
:where(.stage.no-edge) .stage-cell .cell-shape { border: none; }
/* 编辑态格子边界参考线：默认不显示，仅在 hover / 选中 / 拖放时描蓝色高亮。
   线色与正常框边 .cell-shape 同色(#d7dbe2)；pointer-events:none 不挡交互；
   z-index:2 低于 hover/选中态 shape(3/4)，高亮时该格自动让位给蓝框。 */
.stage-cell .cell-guide { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; display: none; }
/* 未填图的空格子靠这条淡灰描边显形，与批量页 auto-guide、多边形空格子同一条线、同一种颜色；
   已填图格子一律不画，避免照片之间出现白缝 / 灰分隔线。
   - 多边形格子无法用 CSS border 贴合斜边，始终走 guide；
   - 网格间距=0 时 .cell-shape 边框被 no-edge 去掉，也改走 guide，
     于是「已填格无缝、空格子仍看得见框位」，与批量 / 多边形效果一致。 */
.stage-cell.poly-cell:not(.filled) .cell-guide,
.stage.no-edge .stage-cell:not(.filled) .cell-guide { display: block; }
.stage-cell .cell-guide path { fill: none; stroke: #d7dbe2; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* 鼠标悬停 / 拖放高亮：统一走 SVG guide 沿「真实形状」描边，鼠标离开立刻恢复无选中效果。
   高亮不再依赖 CSS :hover（异形格包围盒重叠时 :hover 会漏），改由 app.js 用 Path2D
   对「实际 clip-path 形状」做精确命中，命中的格子加 .hover-cell。
   注意：点击选中的 .selected 只保留逻辑状态（方向键微调图片位置），不再画常驻蓝框。 */
.stage-cell.hover-cell .cell-guide,
.stage-cell.del-visible .cell-guide,
.stage-cell.dragover .cell-guide { display: block; z-index: 6; }
.stage-cell.hover-cell .cell-guide path,
.stage-cell.del-visible .cell-guide path,
.stage-cell.dragover .cell-guide path { stroke: var(--primary); stroke-width: 2; }
/* 高亮交给 guide：形状本身不再画 CSS border，避免被 clip-path 裁出半截蓝线或与 guide 叠成双线 */
.stage-cell.hover-cell .cell-shape,
.stage-cell.del-visible .cell-shape { border-color: transparent; }
.stage-cell.dragover .cell-shape { border-color: transparent; background: #e7ecff; box-shadow: none; z-index: 3; }
.stage-cell img.cell-img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: auto; transform-origin: center center; will-change: transform; -webkit-user-drag: none; user-select: none; cursor: default; }
.stage-cell.selected img.cell-img { cursor: default; }
/* 占位「＋」：默认在包围盒正中；多边形格子由 JS 改写 left/top 到形状视觉中心 */
.stage-cell .cell-ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 30px; color: #c4c9d2; font-weight: 300; line-height: 1; pointer-events: none; }
/* 图片删除按钮：12×12 白色圆底 + 细线叉（1px 笔画，不加粗）；常态 40%、悬停 80% 透明度，
   两态尺寸完全一致（不缩放、不加阴影），仅靠透明度区分明显程度。
   默认完全隐藏且不吃鼠标事件；只有鼠标落在框内图片/填充内容（或按钮自身）上时，
   JS 给格子加 .del-visible 才显示。叉号用两条伪元素斜线绘制，避免字体差异导致粗细不一。 */
.stage-cell .cell-del { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border: none; border-radius: 50%; padding: 0; background: #fff; box-shadow: none; cursor: pointer; z-index: 14; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .12s; }
.stage-cell .cell-del::before,
.stage-cell .cell-del::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 1px; border-radius: 0; background: #3f3a36; }
.stage-cell .cell-del::before { transform: translate(-50%, -50%) rotate(45deg); }
.stage-cell .cell-del::after { transform: translate(-50%, -50%) rotate(-45deg); }
.stage-cell.del-visible .cell-del { opacity: .4; pointer-events: auto; }
/* 鼠标移到 × 上：只把整体透明度提到 80%，位置、大小、颜色都不变 */
.stage-cell .cell-del:hover { opacity: .8; }
/* 触屏 / 无鼠标悬停能力的设备：没有 hover 就没有显示的时机，
   已填图的格子保持显示 ×，否则这类设备无法删除单张图片。 */
@media (hover: none) {
  .stage-cell.filled .cell-del { opacity: .4; pointer-events: auto; }
}
/* 跨格拖拽图片：跟随指针的缩略浮层 + 目标格高亮 */
.cell-drag-ghost { position: fixed; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 2px solid #fff; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 6px 20px rgba(0,0,0,.32); pointer-events: none; z-index: 9999; opacity: .92; }
.stage-cell.cell-drop { z-index: 20; }
.stage-cell.cell-drop::after { content: ''; position: absolute; inset: 0; border: 2px dashed var(--primary); border-radius: 8px; background: rgba(76,110,245,.10); pointer-events: none; z-index: 15; }
/* 图片缩放/平移/旋转时一律裁剪在形状内：.cell-shape 保持 overflow:hidden，不越界、不盖住邻格 */

/* 格子内文字层（添加文字功能）：每格可放多组文字，各自绝对定位在格子中心 + tx/ty */
.stage-cell .cell-text { position: absolute; inset: 0; pointer-events: none; z-index: 13; }
.stage-cell .cell-text-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto; cursor: default; user-select: none; -webkit-user-select: none; text-align: center; color: #222; font-size: clamp(13px, 4.2cqw, 30px); line-height: 1.25; word-break: break-word; text-shadow: 0 1px 2px rgba(255,255,255,.7); will-change: transform; max-width: calc(100% - 12px); }
/* 内容单独一层：实时预览改文字时不会把右上角删除按钮清掉 */
.stage-cell .cell-text-content { display: block; white-space: pre-wrap; }
/* 双击选中正在编辑的那一组（仅屏幕预览，不进入导出） */
.stage-cell .cell-text-inner.editing { outline: 1px dashed rgba(76, 110, 245, .8); outline-offset: 3px; border-radius: 2px; }
.stage-cell .cell-text-del { position: absolute; top: -5px; right: -6px; width: 12px; height: 12px; padding: 0; border-radius: 3px; border: none; background: transparent; color: #9aa0a8; font-size: 10px; font-weight: 400; line-height: 1; cursor: pointer; z-index: 9; display: flex; align-items: center; justify-content: center; transition: .12s; opacity: 0; }
.stage-cell .cell-text-inner:hover .cell-text-del { opacity: 1; }
.stage-cell .cell-text-del:hover { color: #3f444b; }
.stage-cell .cell-text-del:active { color: #1f2329; }
.stage-cell { container-type: inline-size; }

/* 右栏分区可折叠 */
.sec-title.sec-toggle, .bg-head.sec-toggle { display: flex; align-items: center; cursor: pointer; user-select: none; }
.bg-head.sec-toggle { justify-content: flex-start; gap: 8px; }
.sec-chev { margin-left: auto; color: var(--muted); font-size: 13px; transition: transform .2s ease; flex: 0 0 auto; }
.sec.collapsed .sec-chev { transform: rotate(-90deg); }
.sec.collapsed .sec-body { background: var(--bg); color: var(--ink);  display: none; }

/* 右栏（按参考样式：白底、分区细线、滑块白柄蓝填充）；底部直角直达浏览器底部 */
.col-right { display: flex; flex-direction: column; gap: 0; padding: 14px 18px; font-size: 16px; position: relative; min-height: 0; overflow-y: auto; border-radius: var(--radius) var(--radius) 0 0; z-index: 5; }

/* 侧栏内容直接落在固定宽 260px 的列内，不做 zoom 缩放（面板与内容均保持原始尺寸，仅中间预览区缩放） */
.r-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
/* 会员按钮：圆角 10%，并带一道自左向右划过的白色高光 */
.member-pill { border: none; background: #F4E5C6; color: #D6700A; padding: 7px 14px; border-radius: 10%; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; box-shadow: none; height: var(--top-btn-h); position: relative; overflow: hidden; }
.member-pill .heart-ico { width: 14px; height: 14px; display: block; flex: 0 0 auto; }
/* 高光光带：宽度取按钮的 38%，从左侧滑出 → 掠过按钮 → 从右侧滑出，循环播放 */
.member-pill::after { content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 38%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,0) 100%); transform: translateX(-120%) skewX(-16deg); animation: member-shine 2.4s ease-in-out infinite; pointer-events: none; z-index: 0; }
/* 文字与图标压在光带之上：光效划过时字始终清晰 */
.member-pill > span, .member-pill .heart-ico { position: relative; z-index: 1; }
@keyframes member-shine {
  0%, 4% { transform: translateX(-120%) skewX(-16deg); }
  78%, 100% { transform: translateX(300%) skewX(-16deg); }
}
.member-pill.glow { animation: member-glow 2.2s ease-in-out infinite; }
@keyframes member-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,150,40,0); }
  50% { box-shadow: 0 0 14px 3px rgba(255,150,40,.55); }
}
/* 「拼图」徽标：用 -5px 负外边距抵消 flex gap，让徽标贴近标题（不影响 emoji 与标题的间距） */
.brand-mode { display: inline-block; margin-left: -5px; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--ink); background: #eef2ff; padding: 1px 10px; border-radius: 999px; vertical-align: middle; }
.btn-download { background: #F864A0; color: #fff; border-color: #F864A0; border-radius: 999px; box-shadow: none; height: var(--top-btn-h); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn-download:hover { background: #ec4f8c; color: #fff; }
.btn-download .dl-ico { font-size: 13px; }
.avatar { width: var(--top-btn-h); height: var(--top-btn-h); border-radius: 50%; background: #eef0f3; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.app-actions .btn-download { margin-left: 0; }

.sec { padding: 14px 0; border-top: 1px solid var(--line); }
.sec:first-of-type { border-top: none; padding-top: 8px; }
/* 右侧首屏「画布」与左侧内容顶部对齐：去掉首段上内边距（左侧也无） */
.col-right .sec:first-of-type { padding-top: 0; }
/* 全部手动页：移除右栏「图片」与「导出到文件夹」（导出统一走右上角下载） */
.col-right #sec-manual-thumbs, .col-right #sec-manual-export { display: none; }
.sec-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #303133; }
/* 画布标题：比右侧其它文字大两号、加粗、深色（覆盖 .card h3 的灰色小字与 14px 上边距，使其与左侧内容顶部平行对齐） */
.card h3.sec-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #303133; }

/* 画布尺寸：输入框内嵌「宽/高」单位 */
.size-row { display: flex; align-items: center; gap: 8px; }
.num-wrap { position: relative; flex: 1; }
.size-num { width: 100%; height: 22px; box-sizing: border-box; padding: 0 24px 0 8px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 12px; color: var(--ink); background: #fff; outline: none; -moz-appearance: textfield; }
.size-num::-webkit-outer-spin-button,
.size-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.size-num:focus { border-color: var(--blue); }
.size-unit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
.lock { border: none; background: #f4f4f5; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .12s; }
.lock:hover { background: #e9ebef; }
.lock-ico { width: 14px; height: 14px; display: block; opacity: .5; transition: opacity .12s; }
.lock.active .lock-ico { opacity: 1; }
.lock.active .lock-ico { opacity: 1; }

/* 滑块：标签+数字在上，滑块在下；白柄蓝填充 */
.slider-block { margin: 16px 0; }
.slider-block:first-child { margin-top: 4px; }
.slider-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.slider-top label { font-size: 12px; color: var(--ink); }
.num-sm { width: 62px; height: 22px; box-sizing: border-box; padding: 0 8px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 12px; text-align: center; color: var(--ink); background: #fff; outline: none; -webkit-appearance: none; -moz-appearance: textfield; }
.num-sm:focus { border-color: var(--blue); }
.num-sm::-webkit-outer-spin-button, .num-sm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--blue) var(--pct, 0%), #e4e7ed var(--pct, 0%)); outline: none; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #c0c4cc; box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #c0c4cc; cursor: pointer; }
.range::-moz-range-track { height: 4px; border-radius: 999px; background: #e4e7ed; }

/* 画布背景 */
.bg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bg-title { font-size: 14px; color: #909399; }
.link-reset { border: none; background: none; color: #303133; font-size: 13px; font-weight: 400; cursor: pointer; padding: 0; margin-left: auto; transition: font-weight .12s ease, color .12s ease; }
.link-reset:hover { font-weight: 700; color: #303133; }
/* 画布背景 · 分段切换（颜色 / 图片），按钮 116×30 */
.bg-seg { display: flex; gap: 2px; background: #f4f4f5; border-radius: 7px; padding: 2px; margin-bottom: 12px; }
.bg-seg .seg-btn { flex: 1 1 0; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; background: transparent; color: #606266; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; }
.bg-seg .seg-btn:hover { color: #303133; }
.bg-seg .seg-btn.active { background: #fff; color: #303133; border-color: #e4e7ed; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* 颜色填充 */
.bg-colors { display: flex; flex-direction: column; gap: 10px; }
.bg-custom-row { display: flex; align-items: center; justify-content: space-between; }
.bg-clabel { font-size: 13px; color: #606266; }
.bg-cpick { display: inline-flex; align-items: center; gap: 8px; }
.bg-ball { width: 20px; height: 20px; flex: none; border: none; background: none; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .12s; box-sizing: border-box; }
.bg-ball:hover { transform: scale(1.12); }
.bg-ball-img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.bg-prev { width: 44px; height: 20px; flex: none; border: 1px solid #dcdfe6; border-radius: 5px; background: transparent; cursor: pointer; padding: 0; box-sizing: border-box; transition: .12s; overflow: hidden; }
.bg-prev:hover { border-color: #c0c4cc; }
.bg-prev-fill { display: block; width: 100%; height: 100%; border-radius: 4px; background: #ffffff; }
.bg-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.bg-pswatch { width: 100%; height: 30px; border-radius: 7px; border: 1px solid #dcdfe6; cursor: pointer; padding: 0; transition: .12s; }
.bg-pswatch:hover { transform: scale(1.06); }
.bg-pswatch.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(64,158,255,.3); }

/* 自定义颜色选择器弹层 */
.cp-pop { position: fixed; z-index: 9999; width: 236px; background: #fff; border: 1px solid #e4e7ed; border-radius: 12px; box-shadow: 0 12px 34px rgba(20,30,60,.22); padding: 12px; display: none; box-sizing: border-box; }
.cp-pop.show { display: block; }
.cp-sv { position: relative; width: 100%; height: 130px; border-radius: 8px; cursor: crosshair; background: #f00; overflow: hidden; }
.cp-sv::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.cp-sv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.cp-sv-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%,-50%); pointer-events: none; }
.cp-hue { position: relative; height: 12px; margin-top: 10px; border-radius: 6px; cursor: pointer; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cp-hue-handle { position: absolute; top: 50%; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%,-50%); pointer-events: none; }
.cp-presets { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 10px; }
.cp-pre { width: 100%; height: 18px; border-radius: 5px; border: 1px solid #ebeef2; cursor: pointer; padding: 0; transition: .12s; }
.cp-pre:hover { transform: scale(1.12); }
.cp-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cp-hex { flex: 1 1 auto; min-width: 0; height: 30px; border: 1px solid #dcdfe6; border-radius: 6px; padding: 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; text-transform: uppercase; box-sizing: border-box; }
.cp-hex:focus { outline: none; border-color: var(--blue); }
.cp-ok { height: 30px; padding: 0 16px; border: none; background: var(--blue); color: #fff; border-radius: 6px; font-size: 13px; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.cp-ok:hover { filter: brightness(.95); }

/* 图片背景 */
.bg-images { display: flex; flex-direction: column; gap: 10px; }
.bg-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bg-cat { height: 26px; padding: 0; border: 1px solid #e4e7ed; background: #fff; color: #606266; border-radius: 6px; font-size: 12px; cursor: pointer; text-align: center; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .12s; }
.bg-cat:hover { border-color: #c0c4cc; color: #303133; }
.bg-cat.active { background: #909399; border-color: #909399; color: #fff; font-weight: 600; }
.bg-cat-more { color: var(--blue); }
.bg-cat-more:hover { color: var(--blue); border-color: var(--blue); }

.bg-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-thumb { position: relative; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid #dcdfe6; cursor: pointer; padding: 0; overflow: hidden; transition: .12s; background-size: cover; background-position: center; }
.bg-thumb:hover { border-color: #c0c4cc; }
.bg-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(64,158,255,.3); }
.bg-vip { position: absolute; right: 4px; bottom: 4px; background: linear-gradient(135deg,#ff9a3c,#ff5e62); color: #fff; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 4px; font-weight: 700; }
.bg-end { text-align: center; color: #c0c4cc; font-size: 12px; margin: 2px 0 0; }

/* 悬浮提示 */
.ui-tip { position: fixed; z-index: 80; display: none; max-width: 220px; padding: 6px 10px; background: rgba(48,49,51,.92); color: #fff; font-size: 12px; line-height: 1.4; border-radius: 6px; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.ui-tip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -5px; border: 5px solid transparent; border-top-color: rgba(48,49,51,.92); }
.ui-tip.top::after { bottom: auto; top: -5px; border-top-color: transparent; border-bottom-color: rgba(48,49,51,.92); }

/* 顶部居中通知条（下载等操作反馈，任何面板都可见，自动消失） */
.ui-notify { position: fixed; z-index: 200; left: 50%; top: 22px; transform: translate(-50%,-14px); max-width: min(520px,86vw); padding: 11px 18px; border-radius: 10px; background: #32353a; color: #fff; font-size: 14px; line-height: 1.5; text-align: center; box-shadow: 0 10px 30px rgba(20,30,60,.3); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ui-notify.show { opacity: 1; transform: translate(-50%,0); }
.ui-notify.warn { background: #b26a00; }
.ui-notify.ok { background: #2f8f5b; }

/* 顶栏下载被点到批量页时，脉冲高亮「▶ 开始拼图」按钮，明确引导 */
@keyframes dlPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(76,110,245,.55); } 50% { box-shadow: 0 0 0 9px rgba(76,110,245,0); } }
.btn.dl-pulse { animation: dlPulse .8s ease-out 2; }

/* 更多分类弹出 */
.bg-more-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.35); }
.bg-more-pop { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(420px, 86vw); max-height: 76vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 16px 48px rgba(20,30,60,.28); padding: 18px; }
.bg-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.bg-more-grid .bg-cat { width: 100%; min-width: 0; }
.bg-more-close { display: block; width: 100%; padding: 9px 0; border: none; background: #f4f4f5; color: #606266; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bg-more-close:hover { background: #ebeef2; color: #303133; }

/* 格子内填充色块：也要能命中，鼠标放在纯色填充上时才显示右上角 × */
.stage-cell .cell-fill { position: absolute; inset: 0; pointer-events: auto; }

/* 格子右键菜单 */
.ctx-menu { position: fixed; z-index: 60; background: #fff; border: 1px solid #e8eaee; border-radius: 10px; box-shadow: 0 8px 24px rgba(30,40,70,.12); padding: 6px; min-width: 132px; }
.ctx-menu::before { content: ''; position: absolute; top: -5px; left: 24px; width: 9px; height: 9px; background: #fff; border-left: 1px solid #e8eaee; border-top: 1px solid #e8eaee; transform: rotate(45deg); }
.ctx-item { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: #fff; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #333; cursor: pointer; text-align: left; transition: .12s; }
.ctx-item:hover { background: #f4f6f8; }
.ctx-item .ico { font-size: 14px; line-height: 1; }

/* 填充颜色选择器（点格子右键 → 填充颜色 弹出，留白充足、美观） */
.color-pop { position: fixed; z-index: 61; width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 36px rgba(20,30,60,.22); padding: 16px; }
.color-pop-title { font-size: 14px; font-weight: 700; color: #303133; margin: 0 0 12px; }
.color-pop-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.color-pop-swatches .cc-swatch { width: 100%; aspect-ratio: 1/1; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; padding: 0; transition: .12s; }
.color-pop-swatches .cc-swatch:hover { transform: scale(1.08); border-color: var(--blue); }
.color-pop-custom { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #909399; margin-bottom: 12px; }
.color-pop-custom input[type="color"] { width: 50px; height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.color-pop-clear { width: 100%; border: 1px solid var(--line); background: #fff; color: var(--muted); padding: 10px; border-radius: 9px; font-size: 13px; cursor: pointer; transition: .12s; }
.color-pop-clear:hover { border-color: var(--primary); color: var(--primary-d); }

/* 格子内添加文字弹层：整个窗口可拖动（标题栏为把手），表单控件仍可正常交互 */
#cell-text-pop { position: fixed; z-index: 61; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 36px rgba(20,30,60,.22); padding: 16px; }
#cell-text-pop.tp-dragging { user-select: none; -webkit-user-select: none; box-shadow: 0 18px 48px rgba(20,30,60,.32); }
#cell-text-pop .tp-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #303133; margin: 0 0 10px; cursor: grab; user-select: none; -webkit-user-select: none; }
#cell-text-pop.tp-dragging .tp-title { cursor: grabbing; }
#cell-text-pop .tp-grip { color: #c0c4cc; font-size: 15px; line-height: 1; }
#cell-text-pop .tp-drag-tip { margin-left: auto; font-size: 11px; font-weight: 400; color: #b6bcc6; }
/* 输入框本身用所选字体渲染，打字时即可实时查看字体效果（不再需要弹窗内深色预览条） */
#cell-text-pop textarea { width: 100%; height: 58px; resize: vertical; box-sizing: border-box; border: 1px solid #dcdfe6; border-radius: 8px; padding: 8px; font-size: 15px; line-height: 1.35; font-family: inherit; outline: none; }
#cell-text-pop textarea:focus { border-color: var(--blue); }
#cell-text-pop .font-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; color: #606266; }
#cell-text-pop .font-row > span:first-child { flex: 0 0 30px; }
#cell-text-pop select, #cell-text-pop input[type="text"] { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 13px; background: #fff; outline: none; }
#cell-text-pop select:focus, #cell-text-pop input[type="text"]:focus { border-color: var(--blue); }
/* 字体选择框：点击即弹出列表（已选字体也能再次展开重选），每项用该字体自身渲染 */
#cell-text-pop .tp-font-select { position: relative; flex: 1; min-width: 0; }
#cell-text-pop #cell-text-font { width: 100%; box-sizing: border-box; padding-right: 26px; cursor: pointer; background: #fff; }
#cell-text-pop #cell-text-font::placeholder { color: #a8aeb8; }
#cell-text-pop .tp-font-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #909399; font-size: 12px; pointer-events: none; line-height: 1; }
#cell-text-pop .tp-font-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; background: #fff; border: 1px solid #dcdfe6; border-radius: 10px; box-shadow: 0 12px 30px rgba(20,30,60,.22); padding: 8px; }
#cell-text-pop .tp-font-panel.hidden { display: none; }
#cell-text-pop #cell-font-search { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 6px 8px; border: 1px solid #dcdfe6; border-radius: 7px; font-size: 12px; outline: none; }
#cell-text-pop #cell-font-search:focus { border-color: var(--blue); }
#cell-text-pop .tp-font-options { max-height: 216px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
#cell-text-pop .tp-font-opt { flex: 0 0 auto; display: block; width: 100%; text-align: left; padding: 7px 9px; border: none; border-radius: 6px; background: #fff; color: #303133; font-size: 15px; line-height: 1.25; cursor: pointer; transition: background .1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cell-text-pop .tp-font-opt:hover { background: #eef2ff; }
#cell-text-pop .tp-font-opt.active { background: var(--blue); color: #fff; }
#cell-text-pop .tp-font-opt-tip { padding: 6px 9px; font-size: 11px; color: #a0a6ae; line-height: 1.4; }
#cell-text-pop .tp-mini { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; color: #606266; font-size: 16px; line-height: 1; cursor: pointer; transition: .12s; }
#cell-text-pop .tp-mini:hover { border-color: var(--blue); color: var(--blue); }
#cell-text-pop .tp-font-status { font-size: 11px; color: #a0a6ae; margin: -4px 0 8px 38px; line-height: 1.3; }
#cell-text-pop input[type="color"] { flex: 0 0 auto; width: 34px; height: 30px; padding: 2px; border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; cursor: pointer; }
#cell-text-pop .tp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; flex: 1; min-width: 0; }
#cell-text-pop .tp-swatch { width: 100%; aspect-ratio: 1/1; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; padding: 0; transition: .12s; }
#cell-text-pop .tp-swatch:hover { transform: scale(1.12); }
#cell-text-pop .tp-swatch.active { outline: 2px solid var(--blue); outline-offset: 1px; }
#cell-text-pop .tp-toggle { flex: 0 0 auto; width: 38px; height: 28px; padding: 0; border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; color: #909399; font-size: 12px; cursor: pointer; transition: .12s; }
#cell-text-pop .tp-toggle.active { background: var(--blue); border-color: var(--blue); color: #fff; }
#cell-text-pop .tp-ellipsis { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
#cell-text-pop .tp-actions { display: flex; gap: 8px; margin-top: 8px; }
#cell-text-pop .tp-actions .btn { flex: 1; justify-content: center; text-align: center; }
#cell-text-pop .tp-clear { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 8px 0; }
#cell-text-pop .tp-clear:hover { color: var(--red); }
#cell-text-pop .tp-unit { font-size: 13px; color: #999; }
#cell-text-pop input[type="number"] { width: 62px; padding: 6px 8px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 13px; outline: none; }
#cell-text-pop input[type="number"]:focus { border-color: var(--blue); }
#cell-text-pop .tp-bold { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; font-weight: 800; font-family: Georgia, serif; cursor: pointer; font-size: 15px; color: #303133; transition: .12s; }
#cell-text-pop .tp-bold.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ===== 右侧「边框样式」预设（由左侧「框架」子视图迁入）：一行 5 个小图标，风格对齐右栏 ===== */
#tpl-view { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#tpl-view.hidden { display: none; }
.frame-presets { display: flex; gap: 5px; }
.fp-item {
  flex: 1 1 0; min-width: 0; height: 50px; box-sizing: border-box; padding: 4px 1px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid #e4e7ed; border-radius: 7px; background: #fff;
  cursor: pointer; transition: .12s;
}
.fp-item:hover { border-color: #aebfff; background: #f8faff; }
.fp-item.active { border-color: var(--primary); background: #eef2ff; box-shadow: 0 0 0 2px rgba(76,110,245,.10); }
.fp-ico { width: 24px; height: 24px; display: block; border-radius: 4px; }
.fp-label { font-size: 10px; line-height: 1.1; color: #606266; white-space: nowrap; }
.fp-item.active .fp-label { color: var(--primary-d); font-weight: 600; }

/* ===== 右侧红包 / 会员促销条（对齐参考界面的营销条） ===== */
.promo-banner { display: block; background: linear-gradient(135deg, #fff3e8, #ffe4d2); border: 1px solid #ffd6ad; border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }
.promo-main { min-width: 0; }
.promo-row { display: flex; align-items: center; gap: 8px; }
.promo-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(214,51,51,.25)); }
.promo-title { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; color: #b34700; white-space: nowrap; }
.promo-sub-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.promo-sub { font-size: 11px; color: #c4660d; line-height: 1.3; }
.promo-bar { height: 4px; border-radius: 999px; background: #ffd8b0; overflow: hidden; margin-top: 6px; }
.promo-fill { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, #ff9f43, #ff6a00); }
.promo-btn { border: none; background: linear-gradient(135deg, #ff9f43, #ff6a00); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 13px; border-radius: 999px; cursor: pointer; flex: 0 0 auto; margin-left: auto; box-shadow: 0 2px 8px rgba(255,122,24,.28); }
.promo-btn:hover { filter: brightness(1.05); }

/* ===== 页面内文件夹选择弹层（不依赖系统对话框） ===== */
.fm-overlay { position: fixed; inset: 0; background: rgba(15,18,24,.45); display: flex; align-items: center; justify-content: center; z-index: 1200; }
.fm-overlay[hidden] { display: none; }
.fm-box { width: min(600px, 94vw); max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.25); overflow: hidden; }
.fm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 600; color: #303133; border-bottom: 1px solid var(--line); }
.fm-x { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: #8a919c; padding: 2px 8px; }
.fm-x:hover { color: #303133; }
.fm-pathrow { display: flex; gap: 8px; padding: 12px 14px 0; }
.fm-pathrow input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: #303133; }
.fm-pathrow input:focus { outline: none; border-color: #7aa7ff; }
.fm-tools { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; }
.fm-current { flex: 1; min-width: 140px; font-size: 12px; color: #8a919c; word-break: break-all; }
.fm-list { flex: 1; overflow-y: auto; margin: 10px 14px; border: 1px solid var(--line); border-radius: 8px; min-height: 220px; max-height: 46vh; background: #fbfcfe; }
.fm-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: #303133; border-bottom: 1px dashed #eef0f4; word-break: break-all; }
.fm-item:hover { background: #eef4ff; }
.fm-item .fm-ico { flex: 0 0 auto; }
.fm-empty { padding: 26px 14px; text-align: center; color: #98a0ab; font-size: 13px; word-break: break-all; }
.fm-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px 14px; }
.fm-tip { flex: 1; font-size: 12px; color: #98a0ab; }

/* ===== 拼数字：顶部导航 =====
   与「拼图」数量导航完全共用 .count-row / .count-tab / .more-wrap / .more-panel / .more-item，
   保证一行 5 个文字标签 + 同行「更多 ▾」下拉、同样的尺寸圆角与 .active 选中态。 */
.num-picker { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
/* 下拉里的造型标签（0~9 / 爱心…）沿用 .more-item，不再用大缩略图卡片 */
.num-more-panel .more-item { white-space: nowrap; }
/* 爱心类造型：导航里用符号代替「爱心 / 胖心 / 瘦心 / 空心」文字。
   心形符号字形视觉高度约为字号的 3/4，故用 16px 与 13px 的汉字标签看起来差不多大。
   --num-heart 由 renderNumPicker 写入，取自 NumTemplates.COLORS.heart，
   与画廊里的爱心像素块严格同色；选中/悬停时符号保持该色，不被按钮文字色覆盖。 */
.num-picker .num-item.sym-label .sym-heart {
  display: inline-block; font-size: 16px; font-weight: 400; line-height: 1;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Arial Unicode MS", sans-serif;
  color: var(--num-heart, #e64980);
  transform-origin: center center;
}
/* 胖心拉宽、瘦心收窄，空心由 ♡ 本身表达；只变形字符，不动标签按钮尺寸 */
.num-picker .num-item.sym-label .heart-fat { transform: scaleX(1.3); }
.num-picker .num-item.sym-label .heart-slim { transform: scaleX(0.72); }
/* 空心 ♡ 是细线字形，上色后补一点同色描边，保证在白底/浅灰选中底上都看得清 */
.num-picker .num-item.sym-label .heart-hollow { -webkit-text-stroke: .35px currentColor; }

/* 拼数字：自定义数字输入框（仅数字） */
.num-custom-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; }
.num-custom-row .nci-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.num-custom-row .nci-input {
  flex: 1; min-width: 0; height: 32px; padding: 0 8px;
  border: 2px solid var(--line); border-radius: 8px; font-size: 14px;
  color: var(--ink); background: #fff; outline: none; transition: border-color .15s;
}
.num-custom-row .nci-input:focus { border-color: var(--accent); }
.num-custom-row .nci-input::placeholder { color: #b6bcc6; }

/* 拼数字·风格切换（普通 / 粗体） */
.num-style-row { display: flex; gap: 6px; margin: 6px 0 4px; }
.num-style-row .style-tab {
  flex: 1; height: 32px; border: 2px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.num-style-row .style-tab:hover { border-color: #b9c4ff; color: var(--ink); }
.num-style-row .style-tab.active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(76,110,245,.08); box-shadow: 0 0 0 3px rgba(76,110,245,.12);
}