/* ============================================================
     主题令牌（日夜模式的唯一色源）
     浅色取值与改造前完全一致；深色由 html.dark 覆盖同一批变量。
     命名按「角色」而非「颜色」：surface=卡片面 / canvas=页面底 /
     fill=凹陷填充 / line=描边 / ink=文字（数字越大越弱）。
     ============================================================ */
  :root {
    --sf-surface: #FFFFFF;        /* 卡片、面板、弹窗 */
    --sf-surface-2: #FAFAFB;      /* 次级面（表头、底栏） */
    --sf-canvas: #EDEDF0;         /* 页面底色 */
    --sf-fill: #F5F5F7;           /* 凹陷填充 / 占位块 */
    --sf-fill-soft: rgba(245, 245, 247, .45);
    --sf-fill-2: #F1F1F3;         /* 更重一档的填充 */
    --sf-fill-3: #E8E8EC;         /* 分段控件底 */
    --sf-line: #E0E0E0;           /* 主描边 */
    --sf-line-2: #EFEFF1;         /* 极轻分隔 */
    --sf-line-3: #F0F0F2;
    --sf-line-mid: #D2D2D7;
    --sf-line-strong: #C7C7CC;    /* hover 描边 */
    --sf-line-input: #D6D6DB;
    --sf-ph: #E5E7EB;             /* 占位图底 */
    --sf-ink: #1D1D1F;            /* 主文字 */
    --sf-ink-2: #6E6E73;          /* 次文字 */
    --sf-ink-3: #86868B;          /* 弱文字 */
    --sf-ink-4: #9A9AA0;          /* 更弱 */
    --sf-ink-5: #A1A1A6;          /* 最弱 / 提示 */
    --sf-bar: rgba(250, 250, 252, .92);
    --sf-bar-auto: rgba(240, 247, 255, .94);
    --sf-accent-soft: #F5F9FF;    /* 强调色浅底 */
    --sf-accent-deep: #0057AD;    /* 强调色按下 / hover（比 Action Blue 深一档） */
    --sf-warn-soft: #FEF6EC;
    --sf-warn-ink: #B45309;
    --sf-shadow: rgba(0, 0, 0, .14);
    --sf-scrim: rgba(29, 29, 31, .42);   /* 弹窗遮罩 */
    --sf-violet-soft: #F3F0FB;    /* 角色线品牌紫浅底 / 浅字 */
    --sf-violet-ink: #6E56CF;
  }

  html.dark {
    --sf-surface: #1C1C1E;
    --sf-surface-2: #202023;
    --sf-canvas: #0E0E10;
    --sf-fill: #17171A;
    --sf-fill-soft: rgba(23, 23, 26, .55);
    --sf-fill-2: #212124;
    --sf-fill-3: #26262A;
    --sf-line: #3A3A3D;
    --sf-line-2: #2E2E31;
    --sf-line-3: #303033;
    --sf-line-mid: #4A4A4E;
    --sf-line-strong: #5A5A5F;
    --sf-line-input: #4E4E53;
    --sf-ph: #232327;
    --sf-ink: #F2F2F4;
    --sf-ink-2: #A8A8AE;
    --sf-ink-3: #94949A;
    --sf-ink-4: #838389;
    --sf-ink-5: #74747A;
    --sf-bar: rgba(36, 36, 39, .94);
    --sf-bar-auto: rgba(18, 34, 54, .94);
    --sf-accent-soft: #16283C;
    --sf-accent-deep: #79B4FF;
    --sf-warn-soft: #3A2A14;
    --sf-warn-ink: #F0B357;
    --sf-shadow: rgba(0, 0, 0, .5);
    --sf-scrim: rgba(0, 0, 0, .58);
    --sf-violet-soft: rgba(110, 86, 207, .22);
    --sf-violet-ink: #B4A5F5;
    color-scheme: dark;
  }

  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC',
      'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .mono { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; }

  /* 串行门禁锁定行（B/C/D/E 未解锁时显示） */
  .gt-lockrow {
    height: 52px; padding: 0 16px; border-radius: 12px;
    border: 1px dashed var(--sf-line); background: var(--sf-fill-soft);
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--sf-ink-3);
  }
  .gt-in { animation: modeIn .25s ease-out; }
  .gt-chip-locked { opacity: .32; pointer-events: none; }
  .gt-confirm-done {
    background: #16A34A !important; box-shadow: none !important;
    pointer-events: none;
  }

  /* 推演模式开关（.md- 前缀）：逐步确认 ┃ 自动生成。
     明显性三招：控件加大带图标 / 自动模式整条变蓝 / 跟随滚动（不悬浮）。 */
  .md-bar {
    position: static;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; margin: 18px 0 10px;
    border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-bar);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25);
    transition: border-color .2s ease, background .2s ease;
  }
  .md-bar.is-auto { border-color: rgba(0,102,204,.45); background: var(--sf-bar-auto); }
  .md-label { font-size: 13px; font-weight: 600; color: var(--sf-ink); }
  .md-seg { display: flex; background: var(--sf-fill-3); border-radius: 999px; padding: 3px; }
  .md-opt {
    height: 34px; padding: 0 18px; border-radius: 999px; border: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; font-size: 13px; font-weight: 500; color: var(--sf-ink-2);
    cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  .md-opt.is-on {
    background: var(--sf-surface); color: var(--sf-ink); font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
  }
  .md-opt .md-ico { color: var(--sf-ink-3); transition: color .18s ease; }
  .md-opt.is-on .md-ico { color: #0066CC; }
  .md-hint { font-size: 12px; color: var(--sf-ink-2); }

  /* B–E 出图设置（.sp- 前缀）：画面比例 / 清晰度 / 质量，置于推演模式条正下方。
     只作用于 B / C / D / E 五镜里的后四张，A 保持原图。 */
  .sp-card {
    display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap;
    padding: 15px 20px; margin: 0 0 24px;
    border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-surface);
  }
  .sp-group { display: flex; align-items: center; gap: 11px; }
  .sp-group-full { flex: 1 1 100%; }
  .sp-label { font-size: 12.5px; font-weight: 600; color: var(--sf-ink-3); flex: none; }
  .sp-seg { display: flex; gap: 6px; }
  .sp-div { width: 1px; height: 22px; background: var(--sf-line-2); flex: none; }
  .sp-note { font-size: 11.5px; color: var(--sf-ink-3); margin-left: auto; flex: none; }
  .sp-p {
    height: 34px; padding: 0 15px; border-radius: 9px; border: 1px solid var(--sf-line);
    background: var(--sf-surface); font-size: 12.5px; font-weight: 500; color: var(--sf-ink-2); cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .sp-p:hover { background: var(--sf-fill); color: var(--sf-ink); }
  .sp-p.is-on { border: 2px solid #0066CC; background: rgba(0, 102, 204, .06); color: #0066CC; font-weight: 600; }
  /* 画面比例：自适应方格（形状缩略图 + 比例文字）。
     auto-fit 保证宽屏一行排满 10 档、窄屏自动折成多行，每档不小于 76px，避免挤成一团；
     选中＝强调色描边 + 淡底 */
  .sp-ratios {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px;
    flex: 1 1 auto; min-width: 0;
  }
  .sp-r {
    height: 46px; padding: 0; border: 1px solid var(--sf-line); border-radius: 9px; background: var(--sf-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; transition: background .15s ease, border-color .15s ease;
  }
  .sp-r:hover { background: var(--sf-fill); }
  .sp-r.is-on { border: 2px solid #0066CC; background: rgba(0, 102, 204, .06); }
  .sp-r-shape { display: block; border-radius: 2px; background: var(--sf-line-strong); }
  .sp-r-t { font-size: 11px; line-height: 1; color: var(--sf-ink-2); }
  .sp-r.is-on .sp-r-shape { background: #0066CC; }
  .sp-r.is-on .sp-r-t { color: #0066CC; font-weight: 600; }
  /* 模型分类：双行信息卡（名称 + 右侧短标签 / 下行灰描述），
     版式与 /image-gen 的模型弹层一致；选中＝强调色描边 + 淡底 + 强调色名称 */
  .sp-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; width: 100%; }
  .sp-m {
    padding: 8px 10px; border-radius: 9px; border: 1px solid var(--sf-line); background: var(--sf-surface);
    text-align: left; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .sp-m:hover { background: var(--sf-fill); }
  .sp-m.is-on { border: 2px solid #0066CC; background: rgba(0, 102, 204, .06); }
  .sp-m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .sp-m-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--sf-ink); }
  .sp-m-badge { font-size: 11px; line-height: 1.35; color: var(--sf-ink-4); white-space: nowrap; }
  .sp-m-desc { margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--sf-ink-4); }
  .sp-m.is-on .sp-m-name { color: #0066CC; font-weight: 600; }
  /* 价格徽标（2026-09-25 重设计）：右侧胶囊，固定不换行不挤压——
     名称过长时名称自己折行，价格永远完整显示在一颗药丸里 */
  .sp-m-price {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px; line-height: 1; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sf-ink-2);
    background: var(--sf-fill);
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    padding: 4px 9px;
  }
  .sp-m.is-on .sp-m-price {
    color: #0066CC;
    background: rgba(0, 102, 204, .08);
    border-color: rgba(0, 102, 204, .28);
  }
  /* 右标签只由「点下后的选中态」驱动：只有选中卡显「当前」，其余卡不带标签。
     不做悬停提示——「当前」只在点击切换后转移 */
  .sp-m-cur { display: none; }
  .sp-m.is-on .sp-m-cur { display: inline; }
  .sp-m.is-on .sp-m-badge { color: #0066CC; }

  /* 画板自适应：内部仍是 1440px 设计稿，整体等比缩放填充可用宽度 */
  .board-fit { --scale: 1; width: 100%; position: relative; }
  .board-fit > .board { transform: scale(var(--scale)); transform-origin: top left; }
  .board {
    width: 1440px;
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
    overflow: hidden;
  }
  /* 整屏画板（入口登录页）：按 1440 × 1040 设计稿等比缩放，
     同时受可用宽度与可用高度约束，保证一屏完整可见、不裁切 */
  .board-fit > .board.board-screen {
    height: 1040px;
  }
  .board-label {
    font-size: 13px; font-weight: 600; color: var(--sf-ink-2);
    letter-spacing: .01em; margin-bottom: 10px; padding: 0 20px;
  }
  .hairline-b { border-bottom: 1px solid var(--sf-line); }
  .hairline-t { border-top: 1px solid var(--sf-line); }
  .hairline-r { border-right: 1px solid var(--sf-line); }
  .hairline-l { border-left: 1px solid var(--sf-line); }

  /* 占位图（对应设计稿里的灰色标签框） */
  .ph {
    background: var(--sf-ph); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sf-ink-4); font-size: 12px; font-weight: 500;
    letter-spacing: .02em; user-select: none;
  }

  /* 滚动条 */
  .thin::-webkit-scrollbar { width: 8px; height: 8px; }
  .thin::-webkit-scrollbar-thumb { background: var(--sf-line-mid); border-radius: 4px; }
  .thin::-webkit-scrollbar-track { background: transparent; }
  #pageTabs::-webkit-scrollbar { height: 0; }

  .sec-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }

  /* 左侧大类卡片 */
  .cat-entry:hover { border-color: var(--sf-line-strong) !important; }
  /* 多页面版：导航壳 */
  .nav-shell-link { transition: color .15s, background .15s; }
  .cat-entry { transition: border-color .15s, background .15s, box-shadow .15s; }
  .cat-entry:hover { border-color: var(--sf-line-strong) !important; }
  #pageTabs::-webkit-scrollbar { height: 0; }
  a { text-decoration: none; }
  /* 页面主体的真实按钮可点击提示 */
  .live-link { cursor: pointer; }

  /* 提示词输入框：可按住底部手柄向下拖动放大（双击复位） */
  .prompt-box { transition: border-color .15s, box-shadow .15s; }
  .prompt-box:hover { border-color: var(--sf-line-strong) !important; }
  .prompt-box.is-resizing {
    border-color: #0066CC !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, .12);
  }
  .prompt-box textarea { scrollbar-width: thin; }
  .prompt-box textarea::-webkit-scrollbar { width: 8px; }
  .prompt-box textarea::-webkit-scrollbar-thumb { background: var(--sf-line-mid); border-radius: 4px; }
  .prompt-box textarea::-webkit-scrollbar-track { background: transparent; }
  .prompt-resize {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    height: 16px; margin-top: 4px; border-radius: 5px; flex-shrink: 0;
    color: var(--sf-ink-4); font-size: 10.5px; line-height: 1;
    cursor: ns-resize; user-select: none; -webkit-user-select: none;
    transition: background .15s, color .15s;
  }
  .prompt-resize:hover { background: var(--sf-fill); color: #0066CC; }
  .prompt-resize svg { display: block; }

  /* A 的来源：文字生成 / 上传图片 —— 两张选项卡，二选一，选中态一眼可辨 */
  .mode-card {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 10px;
    border: 1px solid var(--sf-line); background: var(--sf-surface);
    cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .mode-card:hover { border-color: var(--sf-line-strong) !important; }
  .mode-card .mc-ico {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-fill); color: var(--sf-ink-2); transition: background .15s, color .15s;
  }
  .mode-card .mc-t { font-size: 13px; font-weight: 600; color: var(--sf-ink); line-height: 1.25; }
  .mode-card .mc-d { font-size: 11px; color: var(--sf-ink-3); line-height: 1.5; margin-top: 2px; }
  .mode-card .mc-dot {
    width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
    border: 1.5px solid var(--sf-line-mid); position: relative; transition: border-color .15s;
  }
  .mode-card.is-on {
    border-color: #0066CC !important; background: var(--sf-accent-soft);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, .10);
  }
  .mode-card.is-on .mc-ico { background: #0066CC; color: #fff; }
  .mode-card.is-on .mc-t { color: #0055AA; }
  .mode-card.is-on .mc-dot { border-color: #0066CC; }
  .mode-card.is-on .mc-dot::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #0066CC;
  }

  /* Tailwind CDN 的 `.hidden { display: none }` 只是单类选择器，且本文件在它之后加载，
     下列单类规则（.asrc-bar / .adl-del）会把它压掉，导致
     classList.toggle("hidden") 只改了 class、视觉上不隐藏。这里用双类提高特异性兜住。 */
  .asrc-bar.hidden, .adl-del.hidden { display: none; }
  /* A–E 确认按钮同理会与 Tailwind 的 `.flex` 争 display，双类兜住 */
  #btn-confirm-a.hidden, #btn-confirm-b.hidden, #btn-confirm-c.hidden,
  #btn-confirm-d.hidden, #btn-confirm-e.hidden { display: none; }
  /* B–E「重新生成 / 生成图片」按钮：出图请求在飞时收起，防连点重复扣分 */
  #btn-regen-b.hidden, #btn-regen-c.hidden,
  #btn-regen-d.hidden, #btn-regen-e.hidden { display: none; }
  /* 按钮前的扣分提示（1 点）与按钮同进同退，同样与 Tailwind 的 `.flex` 争 display */
  #cost-regen-b.hidden, #cost-regen-c.hidden,
  #cost-regen-d.hidden, #cost-regen-e.hidden { display: none; }

  /* A 图上悬浮操作条（从电脑上传 / 生成图片 / 场景库添加） */
  .asrc-bar {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 4px; z-index: 3;
    padding: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .65);
  }
  .asrc-btn {
    height: 36px; padding: 0 16px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6.5px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: #1D1D1F;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
    cursor: pointer; user-select: none;
    transition: background .15s, color .15s, box-shadow .15s, transform .15s;
  }
  .asrc-btn svg { flex: 0 0 auto; opacity: .78; }
  .asrc-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
  .asrc-btn:active { transform: scale(.97); }
  .asrc-btn.is-on {
    background: #0066CC; color: #fff;
    box-shadow: 0 3px 12px rgba(0, 102, 204, .4);
  }
  .asrc-btn.is-on svg { opacity: 1; }
  .asrc-btn.is-added {
    background: #16A34A; color: #fff;
    box-shadow: 0 3px 12px rgba(22, 163, 74, .35);
  }
  .asrc-btn.is-added svg { opacity: 1; }
  .asrc-btn:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; }

  /* A 图右上角删除按钮：有图后出现，点击清空当前 A 重新选择 */
  .adl-del {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 32px; height: 32px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.86); color: #1D1D1F;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: none; cursor: pointer; padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.10);
    transition: background .18s ease, transform .18s ease;
  }
  .adl-del:hover { background: #fff; transform: scale(1.06); }
  .adl-del:active { transform: scale(.96); }

  /* 生成中遮罩：该机位图尚未就绪时（分析中 / 出图在飞）整块铺黑，
     居中显示已用时长与「生成中」提示，让等待有明确进度感 */
  .gen-mask {
    position: absolute; inset: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; background: #0A0A0B; color: #fff;
    animation: genMaskIn .22s ease-out;
  }
  @keyframes genMaskIn { from { opacity: 0; } to { opacity: 1; } }
  .gen-spin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .22); border-top-color: #fff;
    animation: genSpin .9s linear infinite;
  }
  @keyframes genSpin { to { transform: rotate(360deg); } }
  .gen-time {
    font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  }
  .gen-tip { font-size: 12.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .62); }
  /* 生成失败态：与「生成中」同位置铺黑，但换成红色告警图标 + 原因 + 下一步指引，
     避免失败时图位静悄悄回到「尚未生成」，客户误以为还在等待 */
  .gen-fail {
    position: absolute; inset: 0; z-index: 7;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 0 32px; text-align: center;
    background: #171011; color: #fff;
    animation: genMaskIn .22s ease-out;
  }
  .gen-fail::before {
    content: "!";
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #C0392B; color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
  }
  .gen-fail .gf-title { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #FF8A7A; }
  .gen-fail .gf-msg {
    font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .86);
    max-width: 520px;
  }
  .gen-fail .gf-hint { font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .5); }
  /* 遮罩按图位绝对定位：图位本身需为定位上下文 */
  #img-a-main, #img-b-main, #img-c-main, #img-d-main, #img-e-main { position: relative; }

  /* 断网横幅：后端不可达（或浏览器离线）时从顶部滑入，告知「连接已断开 · 正在重连」
     并提供手动重试入口；网络恢复后自动收起 */
  .net-bar {
    position: fixed; left: 50%; top: 14px; z-index: 400;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: 999px;
    background: rgba(192, 57, 43, .96); color: #fff;
    font-size: 12.5px; letter-spacing: .02em;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none;
    transform: translate(-50%, -14px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .net-bar.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .net-bar .nb-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: #fff; animation: nbPulse 1.1s ease-in-out infinite;
  }
  @keyframes nbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  .net-bar .nb-txt { white-space: nowrap; }
  .net-bar .nb-act {
    padding: 3px 9px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .18); font-weight: 600;
    transition: background .15s ease;
  }
  .net-bar .nb-act:hover { background: rgba(255, 255, 255, .3); }

  /* 提示词输入框内的参考图小格（已填 chip + 添加位） */
  .ref-chip, .ref-add {
    width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
    background-size: cover; background-position: center;
    cursor: pointer; position: relative; overflow: hidden;
    transition: border-color .15s, background .15s, color .15s;
  }
  .ref-chip { border: 1px solid var(--sf-line); }
  .ref-chip > span {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .36); color: #fff; font-size: 10px; font-weight: 500;
  }
  .ref-chip:hover > span { display: flex; }
  .ref-add {
    border: 1px dashed var(--sf-line); display: flex; align-items: center; justify-content: center;
    color: var(--sf-ink-5);
  }
  .ref-add:hover { border-color: #0066CC; background: rgba(0, 102, 204, .03); color: #0066CC; }
  .ref-add svg { width: 13px; height: 13px; }
  .mode-panel { animation: modeIn .16s ease-out; }
  @keyframes modeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
  .drop-zone { transition: border-color .15s, background .15s; }
  .drop-zone:hover { border-color: #0066CC !important; background: rgba(0, 102, 204, .03); }
  /* 已选择图片：拖拽框青绿描边 + 提示文字变色，不显示图（上传成功才在图 A 主位） */
  .drop-zone.is-picked { border-color: #0066CC !important; background: rgba(0, 102, 204, .05); }
  .drop-zone.is-picked .up-hint { color: #0066CC; }

  /* 顶栏应用导航：三项一组。当前项＝当前资产线的亮色（与正下方进度轨同色同源），
     黑底通栏的语言是「半透明白 + 品牌色点缀」，所以当前项用同色淡底 + 同色字，
     而不是一块实心白——先保证协调，再靠色相 / 字重 / 描边把「我在这里」讲清楚 */
  .appnav-item {
    height: 30px; padding: 0 14px; border-radius: 999px;
    display: flex; align-items: center; flex: 0 0 auto;
    font-size: 13px; letter-spacing: .01em; font-weight: 500;
    color: rgba(255, 255, 255, .60);
    transition: color .18s, background .18s, box-shadow .18s;
  }
  .appnav-item:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
  .appnav-item.is-on { font-weight: 600; }

  /* 「资产库」分组小标 + 竖分隔线：把三菜单标成存放性质，和品牌区隔开 */
  .appnav-cap {
    flex: 0 0 auto; font-size: 11px; letter-spacing: .08em;
    color: rgba(255, 255, 255, .38); margin: 0 4px 0 8px;
    user-select: none;
  }
  .appnav-sep {
    flex: 0 0 auto; width: 1px; height: 16px;
    background: rgba(255, 255, 255, .16); margin: 0 8px 0 2px;
  }
  /* 库存量徽标：有存货数字的地方＝仓库，流程步骤不会有数字 */
  .appnav-count {
    min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0;
    color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .14);
  }

  /* 输入框下方的参数栏（原右侧「生成设置」栏并入）：胶囊 + 气泡 */
  .pill {
    height: 32px; padding: 0 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sf-fill-2); color: var(--sf-ink);
    font-size: 12px; font-weight: 500; letter-spacing: .01em;
    cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
    transition: background .15s, color .15s, box-shadow .15s;
  }
  .pill:hover { background: var(--sf-fill-3); }
  .pill.is-on { background: rgba(0, 102, 204, .10); color: #0066CC; box-shadow: inset 0 0 0 1px rgba(0, 102, 204, .35); }
  .pill .pill-ico { color: var(--sf-ink-2); flex: 0 0 auto; transition: color .15s; }
  .pill.is-on .pill-ico { color: #0066CC; }
  .pill .pill-chev { color: var(--sf-ink-4); flex: 0 0 auto; transition: transform .18s, color .15s; }
  .pill.is-on .pill-chev { color: #0066CC; transform: rotate(180deg); }
  .pill-t { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pop-wrap { position: relative; }
  .pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
    display: none; padding: 12px; background: var(--sf-surface);
    border: 1px solid var(--sf-line); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
  }
  .pop.is-open { display: block; }
  .pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .mdl { padding: 8px 10px; border-radius: 9px; }
  .mdl + .mdl { margin-top: 6px; }
  .pop .mdl .mdl-n { color: var(--sf-ink); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
  .pop .mdl.text-action .mdl-n { color: #0066CC; font-weight: 600; }
  .pop .mdl .mdl-c, .pop .mdl .mdl-d { color: var(--sf-ink-4); font-size: 11px; line-height: 1.35; }
  .pop .mdl .mdl-d { margin-top: 2px; }
  /* 模型气泡的右标签：与 #spCard 同规则——只由点下后的选中态驱动，
     只有选中项显「当前」，其余项不带标签，不做悬停提示 */
  .pop .mdl .mdl-cur { display: none; }
  .pop .mdl.border-action .mdl-cur { display: inline; }
  /* 工作台 A 机位气泡里的比例缩略图：底色与文字由选中态驱动
     （未选＝灰形状 / 灰字；选中＝强调色形状 / 强调色字），与 /image-gen 同源 */
  [data-pop="look"] [data-sum="3"] [data-opt] > div { background: var(--sf-line-strong); }
  [data-pop="look"] [data-sum="3"] [data-opt] > span { color: var(--sf-ink-2); }
  [data-pop="look"] [data-sum="3"] [data-opt].border-action > div { background: #0066CC; }
  [data-pop="look"] [data-sum="3"] [data-opt].border-action > span { color: #0066CC; }

  /* ============================================================
     积分充值弹窗（点顶栏额度胶囊弹出）
     结构：账户余额 → 套餐档位 → 支付方式 → 底栏确认支付
     配色沿用本框架：
       Action Blue #0066CC · Ink #1D1D1F · Parchment #F5F5F7 · Hairline #E0E0E0
     ============================================================ */
  .cm-mask {
    position: fixed; inset: 0; z-index: 80; display: none;
    align-items: center; justify-content: center; padding: 26px 24px;
    background: var(--sf-scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .cm-mask.is-open { display: flex; }

  .cm-panel {
    width: min(940px, 100%); max-height: calc(100vh - 52px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sf-surface); border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
    animation: cm-in .22s cubic-bezier(.22, .8, .3, 1);
  }
  @keyframes cm-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

  /* ---- 头部：标题 + 说明 + 关闭 ---- */
  .cm-head { position: relative; padding: 22px 30px 0; text-align: center; }
  .cm-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--sf-ink); }
  .cm-sub { font-size: 12.5px; color: var(--sf-ink-3); margin-top: 6px; padding-bottom: 14px; }

  .cm-close {
    position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-fill); color: var(--sf-ink-2); cursor: pointer; transition: background .16s, color .16s;
  }
  .cm-close:hover { background: var(--sf-fill-3); color: var(--sf-ink); }

  /* ---- 主体：账户 / 套餐档位 / 支付方式 ---- */
  .cm-body {
    padding: 18px 30px; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 14px;
  }
  /* 整屏能一次看全（含支付方式）比「每块都宽松」更重要，所以纵向节奏统一收紧 */
  .cm-block { padding: 14px 18px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: 16px; }
  .cm-block-slim { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
  .cm-block-t { font-size: 12.5px; font-weight: 600; color: var(--sf-ink); flex: 0 0 auto; }
  .cm-block-x { font-size: 11px; color: var(--sf-ink-5); margin-left: auto; }
  .cm-acc { font-size: 12.5px; color: var(--sf-ink-3); }

  .cm-pays { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  .cm-pay {
    height: 46px; min-width: 168px; padding: 0 18px;
    border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface);
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 500; color: var(--sf-ink); cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .cm-pay:hover { border-color: var(--sf-line-strong); background: var(--sf-surface-2); }
  .cm-pay.is-on { border-color: #0066CC; background: rgba(0, 102, 204, .07); box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }
  /* 后台没上传该渠道收款码：置灰不可选（.is-off 由 loadPayChannels 按接口结果打上）。
     必须排在 .is-on 之后 —— 万一两者同时命中，灰态要赢，否则用户还是能点进一张空码。 */
  .cm-pay.is-off,
  .cm-pay.is-off:hover {
    border-color: var(--sf-line); background: var(--sf-fill-3);
    color: var(--sf-ink-5); cursor: not-allowed; box-shadow: none;
  }
  .cm-pay.is-off .cm-pay-ico { opacity: .45; }
  .cm-pay.is-off .cm-pay-x { color: var(--sf-ink-5); }
  .cm-pay-ico {
    width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #FFFFFF; line-height: 1;
  }

  /* ---- 兑换码：KEY 输入 + 兑换按钮 ---- */
  /* 置顶那块：主体是两列网格，这枚跨满两列，压在余额与套餐之上 */
  .cm-code-box {
    grid-column: 1 / -1;
    padding: 14px 16px; border: 1px solid var(--sf-line); border-radius: 14px;
    background: var(--sf-surface);
  }
  .cm-code-head { display: flex; align-items: center; gap: 14px; }
  .cm-code-sub { font-size: 11.5px; color: var(--sf-ink-3); line-height: 1.6; margin-top: 6px; }
  .cm-code-row { display: flex; gap: 10px; margin-top: 10px; }
  .cm-code-row input {
    flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px;
    border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface);
    font-size: 14px; color: var(--sf-ink); font-family: inherit; outline: none;
    letter-spacing: .04em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, box-shadow .15s;
  }
  .cm-code-row input::placeholder { color: var(--sf-ink-5); letter-spacing: 0; text-transform: none; }
  .cm-code-row input:focus {
    border-color: #0066CC; box-shadow: 0 0 0 3px rgba(0, 102, 204, .12);
  }
  .cm-code-row button {
    flex: 0 0 auto; height: 46px; padding: 0 24px; border: 1px solid #0066CC; border-radius: 12px;
    background: #0066CC; color: #FFFFFF; font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .16s, border-color .16s;
  }
  .cm-code-row button:hover { background: #0057AD; border-color: #0057AD; }
  /* 未填兑换码：灰底灰字不可点（与实心主按钮同规格，只换配色） */
  .cm-code-row button[disabled] {
    background: var(--sf-fill-3); border-color: var(--sf-line);
    color: var(--sf-ink-5); cursor: not-allowed;
  }

  /* ---- 底部：说明 + 确认支付（充值） ---- */
  .cm-foot {
    display: flex; flex-direction: column; gap: 9px;
    padding: 12px 30px 16px; border-top: 1px solid var(--sf-line-3); background: var(--sf-surface-2);
  }
  .cm-foot-note { font-size: 12px; color: var(--sf-ink-3); }
  .cm-foot-note.is-live { color: #0066CC; font-weight: 500; }

  /* 支付按钮通栏压在底栏上 */
  .cm-cta {
    display: flex; height: 48px; width: 100%; border: 0; border-radius: 999px;
    align-items: center; justify-content: center;
    background: #0066CC; color: #FFFFFF; font-size: 15px; font-weight: 600; font-family: inherit;
    letter-spacing: .01em; cursor: pointer;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 20px rgba(0, 102, 204, .26);
    transition: background .16s, box-shadow .16s;
  }
  .cm-cta:hover { background: #0057AD; }
  .cm-cta[disabled] { background: #BCD8F3; box-shadow: none; cursor: not-allowed; }

  @media (max-width: 720px) {
    .cm-head, .cm-body, .cm-foot { padding-left: 18px; padding-right: 18px; }
    .cm-pay { min-width: 0; flex: 1; }
  }

  /* ============================================================
     积分充值弹窗 · 卡片式布局（注册用户与游客共用一张）
     与上面积分弹窗同族类名（.cm-*），这里补的是设计稿新增的那批：
       .cm-plans 套餐卡 / .cm-side 结算栏，
     并覆盖三处结构性差异：主体两栏（左选量 / 右结算）、底栏横向、CTA 定宽。
     .rc-mask 是本弹窗专属布局钩子（身份差异不在这里，在 JS 里条件渲染）。
     配色同框架：Action Blue #0066CC · Ink #1D1D1F · Parchment #F5F5F7
     ============================================================ */

  /* ---- 主体：左选量 / 右结算（覆盖积分弹窗的单列 flex） ---- */
  .rc-mask .cm-body {
    padding: 16px 30px 4px;
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px;
    align-items: start;
  }
  .cm-sec {
    font-size: 12.5px; font-weight: 600; color: var(--sf-ink); margin: 2px 0 9px;
    display: flex; align-items: center; gap: 8px;
  }
  .cm-sec em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--sf-ink-5); }

  /* ---- 套餐卡：一行一档，选中态由 .is-on 驱动 ---- */
  .cm-plans { display: flex; flex-direction: column; gap: 10px; }
  .cm-plan {
    position: relative; width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 13px 16px; border: 1px solid var(--sf-line); border-radius: 14px;
    background: var(--sf-surface); font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .cm-plan:hover { border-color: var(--sf-line-strong); background: var(--sf-surface-2); }
  .cm-plan.is-on {
    border-color: #0066CC; background: rgba(0, 102, 204, .05);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, .10);
  }
  .cm-plan.is-none {
    font-size: 12.5px; color: var(--sf-ink-3); cursor: default; justify-content: center;
  }
  .cm-radio {
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    border: 1.5px solid var(--sf-line-strong);
    display: flex; align-items: center; justify-content: center;
  }
  .cm-plan.is-on .cm-radio { border-color: #0066CC; }
  .cm-plan.is-on .cm-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #0066CC; }
  .cm-p-mid { flex: 1 1 auto; min-width: 0; }
  .cm-p-nm { display: block; font-size: 13px; font-weight: 600; color: var(--sf-ink); }
  .cm-p-tag {
    font-size: 11px; padding: 3px 8px; border-radius: 6px; margin-left: 8px;
    color: var(--sf-warn-ink); background: var(--sf-warn-soft);
  }
  .cm-p-qty {
    display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em;
    color: var(--sf-ink); margin-top: 2px; font-variant-numeric: tabular-nums;
  }
  .cm-p-qty s { font-size: 11.5px; font-weight: 400; color: var(--sf-ink-5); margin-left: 6px; }
  .cm-p-qty span { font-size: 12px; font-weight: 500; color: var(--sf-ink-3); margin-left: 3px; }
  .cm-p-qty .cm-p-bonus {
    display: inline-block; font-size: 11px !important; font-weight: 500; line-height: 1;
    color: var(--sf-warn-ink); background: var(--sf-warn-soft);
    padding: 4px 8px; border-radius: 6px; margin-left: 8px !important; vertical-align: 2px;
  }
  /* 「到手 N 积分」主数字：有赠送时蓝显，替代裸积分数 */
  .cm-p-qty .cm-p-get { font-style: normal; font-size: 12px; font-weight: 500; color: var(--sf-ink-3); }
  .cm-p-qty .cm-p-total { color: #0066CC; }
  .cm-p-base { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; }
  .cm-p-base s { color: var(--sf-ink-5); margin-right: 8px; }
  .cm-p-eq {
    display: block; font-size: 11px; font-weight: 400; line-height: 1.4;
    color: var(--sf-ink-5); margin-top: 3px; font-variant-numeric: tabular-nums;
  }
  .cm-p-price { text-align: right; flex: 0 0 auto; }
  .cm-p-price b {
    font-size: 19px; font-weight: 700; letter-spacing: -.02em;
    color: var(--sf-ink); font-variant-numeric: tabular-nums;
  }
  .cm-p-price i { display: block; font-style: normal; font-size: 11px; color: var(--sf-ink-5); margin-top: 3px; }
  .cm-p-hot {
    position: absolute; right: -1px; top: -1px; font-size: 10.5px; font-weight: 600;
    color: #FFFFFF; background: #0066CC; padding: 3px 9px; border-radius: 0 13px 0 10px;
  }

  /* ---- 右栏：支付方式（竖排）+ 订单摘要 ---- */
  .cm-side { display: flex; flex-direction: column; gap: 16px; }
  .rc-mask .cm-pays { display: flex; flex-direction: column; gap: 9px; margin-top: 0; }
  .rc-mask .cm-pay {
    height: 46px; min-width: 0; padding: 0 14px; flex: 0 0 auto;
    font-size: 13.5px; font-weight: 500; font-family: inherit; width: 100%;
  }
  .cm-pay-x { margin-left: auto; font-size: 11px; color: var(--sf-ink-5); }

  .cm-sum {
    border: 1px solid var(--sf-line); border-radius: 14px;
    padding: 14px 16px; background: var(--sf-surface-2);
  }
  .cm-sum-r {
    display: flex; justify-content: space-between; padding: 4px 0;
    font-size: 12.5px; color: var(--sf-ink-2);
  }
  .cm-sum-r b { color: var(--sf-ink); font-variant-numeric: tabular-nums; }
  .cm-sum-r.gift b { color: var(--sf-violet-ink); }
  .cm-sum-hr { height: 1px; background: var(--sf-line-2); margin: 9px 0; }
  .cm-sum-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: var(--sf-ink-2);
  }
  .cm-sum-total b {
    font-size: 22px; font-weight: 700; letter-spacing: -.02em;
    color: var(--sf-ink); font-variant-numeric: tabular-nums;
  }

  /* ---- 底栏：说明在左、支付按钮定宽在右（覆盖积分弹窗的纵排通栏） ---- */
  .rc-mask .cm-foot { flex-direction: row; align-items: center; gap: 16px; padding: 14px 30px 16px; }
  .cm-note { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--sf-ink-3); line-height: 1.6; }
  .cm-note.is-live { color: #0066CC; font-weight: 500; }
  .rc-mask .cm-cta { flex: 0 0 300px; width: auto; }
  .cm-cta:hover { background: var(--sf-accent-deep); }

  @media (max-width: 820px) {
    .rc-mask .cm-body { grid-template-columns: 1fr; padding: 16px 18px 4px; }
    .rc-mask .cm-foot { flex-direction: column; align-items: stretch; padding-left: 18px; padding-right: 18px; }
    .rc-mask .cm-cta { flex: 1 1 auto; width: 100%; }
  }

  /* ============================================================
     收款码弹层（点「支付」后弹出，压在充值弹窗之上）
     沿用 .cm-* 骨架（头部 / 主体 / 底栏），这里补的只有收款码那一列：
     左＝收款码 + 应付金额，右＝订单摘要。
     z-index 高过充值弹窗（.cm-mask 80）：两者会同时存在，这张必须在上层。
     ============================================================ */
  .pq-mask { z-index: 90; }
  .pq-mask .cm-panel { width: min(660px, 100%); }
  .pq-mask .cm-body {
    padding: 20px 30px 6px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px; align-items: start;
  }
  /* 左列：收款码本体（白底卡片，扫码时对比度最高）+ 应付金额 */
  .pq-code { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .pq-code-box {
    width: 100%; max-width: 260px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 12px; border: 1px solid var(--sf-line); border-radius: 16px;
    background: #FFFFFF;
  }
  .pq-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pq-missing { text-align: center; padding: 0 12px; }
  .pq-missing-t { font-size: 14px; font-weight: 600; color: var(--sf-ink); }
  .pq-missing-s { font-size: 12px; color: var(--sf-ink-3); margin-top: 8px; line-height: 1.6; }
  .pq-amount {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px; color: var(--sf-ink-3);
  }
  .pq-amount b {
    font-size: 24px; font-weight: 700; letter-spacing: -.02em;
    color: var(--sf-ink); font-variant-numeric: tabular-nums;
  }
  .pq-tip {
    font-size: 11.5px; color: var(--sf-ink-5); line-height: 1.6; text-align: center;
  }
  .pq-tip b { color: var(--sf-ink-3); font-weight: 600; }
  /* 易支付线：二维码有效期倒计时（上游收银台 5 分钟超时，过期扫码付不进去） */
  .pq-clock {
    font-size: 12px; color: var(--sf-ink-2); text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .pq-clock.is-over { color: var(--sf-warn-ink); font-weight: 500; }
  /* 服务端没装 qrcode 库时的兜底入口：跳上游收银台，样式与深色主题下的次要按钮一致 */
  .pq-golink {
    display: block; text-align: center; text-decoration: none;
    padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
    color: #0066CC; background: rgba(0, 102, 204, .1);
  }
  .pq-golink:hover { background: rgba(0, 102, 204, .16); }
  /* 支付宝直连：电脑网站支付没有二维码，左列换成一张「去支付宝付款」跳转卡 */
  .pq-jump {
    width: 100%; max-width: 260px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 18px; border: 1px solid var(--sf-line); border-radius: 16px;
    background: #FFFFFF; text-align: center;
  }
  .pq-jump-ico {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #FFFFFF; background: #1677FF;
  }
  .pq-jump-t { font-size: 14px; font-weight: 600; color: var(--sf-ink); }
  .pq-jump-s { font-size: 12px; color: var(--sf-ink-3); line-height: 1.6; }
  .pq-jump-btn {
    display: block; width: 100%; box-sizing: border-box; text-decoration: none;
    padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    color: #FFFFFF; background: #1677FF;
  }
  .pq-jump-btn:hover { background: #0E5FD8; }
  /* 收款人：让付款人核对「钱确实付给了这个人」，是人工核对链路里唯一可信的锚点 */
  .pq-payee {
    font-size: 12px; color: var(--sf-ink-3); text-align: center;
  }
  .pq-payee b { color: var(--sf-ink); font-weight: 600; }
  /* 被驳回：把运营者写的驳回原因顶在收款码上方，用户重提交前一定看得到 */
  .pq-reject {
    font-size: 11.5px; color: var(--sf-warn-ink); line-height: 1.6; text-align: center;
    background: var(--sf-warn-soft); border-radius: 10px; padding: 9px 12px;
  }
  /* 右列：订单摘要（复用 .cm-sum 样式，只调间距） */
  .pq-side { padding-top: 2px; }

  /* ---- 建单中 / 建单失败：单列窄文案，不摆收款码（此时还没有收款码可摆） ---- */
  .pq-mask .cm-body.is-solo { display: block; padding: 34px 30px 30px; }
  .pq-loading {
    text-align: center; font-size: 13px; color: var(--sf-ink-3); line-height: 1.7;
  }

  /* ---- 付款步骤：扫码 → 点「我已支付」→ 运营对账 ----
     压在订单摘要下面，和上面那段用一条浅分隔线断开（摘要=核对信息，步骤=要做什么）。
     用序号计数器而非 <li> 默认序号：默认序号在深色主题下颜色不可控，也不便对齐。 */
  .pq-steps {
    margin: 18px 0 0; padding: 16px 0 0; list-style: none;
    border-top: 1px solid var(--sf-line-2);
    counter-reset: pq-step;
  }
  .pq-steps > li {
    position: relative; padding-left: 28px;
    counter-increment: pq-step;
  }
  .pq-steps > li + li { margin-top: 12px; }
  .pq-steps > li::before {
    content: counter(pq-step);
    position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 102, 204, .1); color: #0066CC;
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .pq-steps b { display: block; font-size: 12.5px; font-weight: 600; color: var(--sf-ink); }
  .pq-steps span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--sf-ink-3); line-height: 1.6; }

  /* ---- 已通知对账 / 已到账：单列回执 ---- */
  .pq-done { text-align: center; }
  .pq-done-ico {
    width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 102, 204, .1); color: #0066CC;
  }
  .pq-done-t { font-size: 15px; font-weight: 600; color: var(--sf-ink); }
  .pq-done-s {
    font-size: 12px; color: var(--sf-ink-3); line-height: 1.7;
    margin: 9px auto 0; max-width: 400px;
  }
  .pq-done-no {
    display: inline-block; margin-top: 14px; padding: 8px 14px;
    border: 1px solid var(--sf-line-2); border-radius: 10px; background: var(--sf-surface-2);
    font-size: 12px; color: var(--sf-ink-3); font-variant-numeric: tabular-nums;
  }
  .pq-done-no b { color: var(--sf-ink); font-weight: 600; }
  /* 底栏：说明在左、CTA 定宽在右（与充值弹窗同构，宽度收窄一档） */
  .pq-mask .cm-foot { flex-direction: row; align-items: center; gap: 16px; padding: 14px 30px 16px; }
  .pq-mask .cm-cta { flex: 0 0 240px; width: auto; }

  @media (max-width: 720px) {
    .pq-mask .cm-body { grid-template-columns: 1fr; padding: 18px 18px 4px; }
    .pq-mask .cm-body.is-solo { padding: 30px 18px 26px; }
    .pq-mask .cm-foot {
      flex-direction: column; align-items: stretch;
      padding-left: 18px; padding-right: 18px;
    }
    .pq-mask .cm-cta { flex: 1 1 auto; width: 100%; }
    .pq-code-box { max-width: 220px; }
  }

  /* ================= 顶栏「登录」按钮 =================
     位置：右侧簇末位（头像右侧），只在未登录 / 游客态出现。
     收在队尾的理由：已登录时它整体消失，右侧簇前面的额度胶囊与头像不会跟着位移。
     克制理由：本页唯一主 CTA 是「生成」，登录是次要入口，
     所以用描边幽灵款（透明底 + 白描边），不做实心，不与额度胶囊抢主位。
     规格对齐额度胶囊：同高 28px、同胶囊圆角、12px 字。
     —— 状态：default / hover / active / focus-visible（白环）/ hidden */
  .tbl-login {
    height: 28px; padding: 0 11px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
    background: transparent; color: #FFFFFF;
    font-size: 12px; font-weight: 500; font-family: inherit; white-space: nowrap;
    cursor: pointer;
    transition: background .16s, border-color .16s;
  }
  .tbl-login:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .48); }
  .tbl-login:active { background: rgba(255, 255, 255, .22); }
  .tbl-login:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
  .tbl-login[hidden] { display: none; }
  .tbl-login svg { width: 13px; height: 13px; flex: 0 0 auto; }
  /* 「注册」在描边款基础上升级为实心主按钮：Action Blue 底 + 白字，是游客转注册的主 CTA */
  .tbl-signup {
    border-color: #0066CC; background: #0066CC;
  }
  .tbl-signup:hover { background: #0057AD; border-color: #0057AD; }
  .tbl-signup:active { background: #004E9C; }
  /* 窄屏只留图标，避免和额度胶囊挤成两行 */
  @media (max-width: 640px) {
    .tbl-login { padding: 0 9px; }
    .tbl-login-t { display: none; }
  }

  /* ================= 账号菜单（右上角头像下拉） ================= */
  /* 头像入口：通栏上的深底元素，hover 只加一层 13% 白，避免抢额度胶囊的主位 */
  .um-avatar {
    display: flex; align-items: center; gap: 1px; padding: 2px 3px 2px 2px;
    border: 0; background: transparent; border-radius: 999px;
    color: rgba(255, 255, 255, .55); cursor: pointer; font-family: inherit;
    transition: background .16s, color .16s;
  }
  .um-avatar:hover, .um-avatar.is-on { background: rgba(255, 255, 255, .13); color: #FFFFFF; }
  .um-avatar-c {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #0F766E 0%, #064E4A 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    color: #FFFFFF; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  }
  .um-avatar-x { transition: transform .18s; }
  .um-avatar.is-on .um-avatar-x { transform: rotate(180deg); }

  /* 面板：白底 16 圆角 + 细描边，和充值弹窗同一套面料；fixed 定位免被顶栏 overflow 裁切 */
  .um-panel {
    position: fixed; top: 70px; right: 20px; width: 292px; z-index: 70;
    background: var(--sf-surface); border: 1px solid var(--sf-line-2); border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .17), 0 2px 8px rgba(0, 0, 0, .05);
    opacity: 0; transform: translateY(-7px) scale(.98); transform-origin: top right;
    pointer-events: none; overflow: hidden;
    transition: opacity .16s ease, transform .18s cubic-bezier(.22, .8, .3, 1);
  }
  .um-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }

  /* ① 身份区 */
  .um-head { display: flex; align-items: center; gap: 11px; padding: 15px 16px 13px; }
  .um-av {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #0F766E 0%, #064E4A 100%);
    color: #FFFFFF; font-size: 15px; font-weight: 600;
  }
  .um-id { min-width: 0; }
  .um-name {
    display: flex; align-items: center; gap: 7px;
    font-size: 14.5px; font-weight: 600; color: var(--sf-ink); letter-spacing: -.01em;
  }
  .um-badge {
    height: 18px; padding: 0 7px; border-radius: 999px;
    display: flex; align-items: center; font-size: 10.5px; font-weight: 600;
    background: rgba(0, 102, 204, .10); color: #0066CC;
  }
  .um-phone {
    font-size: 11.5px; color: var(--sf-ink-3); margin-top: 3px;
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
  }

  /* ② 额度块：数字同源于顶栏胶囊，进度条 = 剩余 / 体验额度 */
  .um-quota {
    margin: 0 10px 2px; padding: 11px 12px 10px;
    background: rgba(0, 102, 204, .055);
    border: 1px solid rgba(0, 102, 204, .13);
    border-radius: 12px;
  }
  .um-quota-top { display: flex; align-items: baseline; justify-content: space-between; }
  .um-quota-k { font-size: 11.5px; color: var(--sf-ink-2); }
  .um-quota-v { font-size: 12px; font-weight: 600; color: #0066CC; font-variant-numeric: tabular-nums; }
  .um-quota-v b { font-size: 16px; letter-spacing: -.02em; }
  .um-bar {
    height: 5px; border-radius: 999px; margin-top: 8px; overflow: hidden;
    background: rgba(0, 102, 204, .16);
  }
  .um-bar > i {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: #0066CC; transition: width .3s cubic-bezier(.22, .8, .3, 1);
  }
  .um-quota-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
  .um-quota-bot > span:first-child { font-size: 10.5px; color: var(--sf-ink-3); }
  .um-topup {
    flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; color: #0066CC; cursor: pointer;
    background: var(--sf-surface); border: 1px solid rgba(0, 102, 204, .3);
    transition: background .16s, color .16s, border-color .16s;
  }
  .um-topup:hover { background: #0066CC; color: #FFFFFF; border-color: #0066CC; }

  /* ③ 分组菜单 */
  .um-list { padding: 8px 8px 6px; }
  .um-group {
    padding: 8px 8px 5px; font-size: 10px; font-weight: 700;
    letter-spacing: .12em; color: var(--sf-ink-5);
  }
  .um-list > .um-group:first-child { padding-top: 3px; }
  .um-item {
    display: flex; align-items: center; gap: 10px; height: 35px; padding: 0 8px;
    border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--sf-ink);
    transition: background .13s, color .13s;
  }
  .um-item:hover, .um-item:focus-visible { background: var(--sf-fill); outline: none; }
  .um-ico {
    width: 16px; height: 16px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; color: var(--sf-ink-3);
    transition: color .13s;
  }
  .um-item:hover .um-ico, .um-item:focus-visible .um-ico { color: #0066CC; }
  .um-label { flex: 1; min-width: 0; }
  .um-note { font-size: 11px; color: var(--sf-ink-5); }
  .um-item.is-danger, .um-item.is-danger .um-ico { color: #D70015; }
  .um-item.is-danger:hover { background: rgba(215, 0, 21, .07); }
  .um-item.is-danger:hover .um-ico { color: #D70015; }

  .um-foot {
    padding: 9px 16px 11px; border-top: 1px solid var(--sf-line-3); background: var(--sf-surface-2);
    font-size: 10.5px; color: var(--sf-ink-5); letter-spacing: .01em;
  }

  /* ================= 消费日志弹窗（账号菜单 →「消费日志」） =================
     与充值弹窗同一套面料（白底 20 圆角 + 细描边 + 同一段 cm-in 入场动画）；
     z-index 比充值弹窗（80）高一档，两者不会叠着开。 */
  .cl-mask {
    position: fixed; inset: 0; z-index: 90; display: none;
    align-items: center; justify-content: center; padding: 26px 24px;
    background: var(--sf-scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .cl-mask.is-open { display: flex; }

  .cl-panel {
    width: min(820px, 100%); max-height: calc(100vh - 52px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sf-surface); border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
    animation: cm-in .22s cubic-bezier(.22, .8, .3, 1);
  }

  .cl-head { position: relative; padding: 22px 30px 16px; text-align: center; }
  .cl-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--sf-ink); }
  .cl-sub { font-size: 12.5px; color: var(--sf-ink-3); margin-top: 6px; }
  .cl-close {
    position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-fill); color: var(--sf-ink-2); cursor: pointer; transition: background .16s, color .16s;
  }
  .cl-close:hover { background: var(--sf-fill-3); color: var(--sf-ink); }

  /* 表头 / 数据行共用同一套列宽，保证时间·项目·点数·结余 四列纵向严格对齐 */
  .cl-cols, .cl-row {
    display: grid; grid-template-columns: 88px 1fr 76px 92px;
    align-items: center; gap: 14px; padding: 0 30px;
    font-variant-numeric: tabular-nums;
  }
  .cl-cols {
    height: 34px; background: var(--sf-surface-2);
    border-top: 1px solid var(--sf-line-3); border-bottom: 1px solid var(--sf-line-3);
  }
  /* 显式盖掉表头文字继承了数据行样式（否则「时间」会比其它标签更黑更大） */
  .cl-cols span { font-size: 11.5px; color: var(--sf-ink-5); }
  .cl-cols .cl-time { font-size: 11.5px; color: var(--sf-ink-5); }

  .cl-body { overflow-y: auto; min-height: 0; }
  .cl-row { height: 45px; border-bottom: 1px solid #F5F5F7; transition: background .14s; }
  .cl-row:last-child { border-bottom: 0; }
  .cl-row:hover { background: var(--sf-surface-2); }

  .cl-time { font-size: 12px; color: var(--sf-ink-3); }
  .cl-name { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--sf-ink); min-width: 0; }
  .cl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cl-tag {
    flex: 0 0 auto; height: 19px; padding: 0 8px; border-radius: 999px;
    display: flex; align-items: center; font-size: 11px; font-weight: 600;
  }
  .cl-tag.is-in { background: rgba(0, 102, 204, .10); color: #0066CC; }
  .cl-tag.is-out { background: var(--sf-fill-2); color: var(--sf-ink-2); }

  .cl-d, .cl-bal { text-align: right; }
  .cl-d { font-size: 13.5px; font-weight: 600; color: var(--sf-ink); }
  .cl-d.is-in { color: #0066CC; }
  .cl-bal b { font-size: 14px; font-weight: 600; color: var(--sf-ink); }
  .cl-bal i { font-size: 11.5px; font-style: normal; color: var(--sf-ink-3); margin-left: 3px; }

  .cl-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 30px 16px; border-top: 1px solid var(--sf-line-3); background: var(--sf-surface-2);
  }
  .cl-foot-note { font-size: 12px; color: var(--sf-ink-3); }
  .cl-topup {
    flex: 0 0 auto; height: 34px; padding: 0 16px; border-radius: 999px;
    display: flex; align-items: center;
    background: #0066CC; color: #FFFFFF; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: background .16s;
  }
  .cl-topup:hover { background: #0057AD; }

  @media (max-width: 720px) {
    .cl-cols, .cl-row { grid-template-columns: 74px 1fr 62px 78px; gap: 10px; padding: 0 18px; }
    .cl-head { padding-left: 18px; padding-right: 18px; }
    .cl-foot { padding-left: 18px; padding-right: 18px; }
  }

  /* ================= 帮助与反馈（账号菜单 →「帮助与反馈」） =================
     站内聊天窗：客户发一条 → 后端落库并推到运营者微信 / 邮箱。
     与消费日志同一套面料（白底 20 圆角 + cm-in 入场），z-index 同为 90。 */
  .ct-mask {
    position: fixed; inset: 0; z-index: 90; display: none;
    align-items: center; justify-content: center; padding: 26px 24px;
    background: var(--sf-scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .ct-mask.is-open { display: flex; }

  .ct-panel {
    width: min(560px, 100%); height: min(620px, calc(100vh - 52px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sf-surface); border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
    animation: cm-in .22s cubic-bezier(.22, .8, .3, 1);
  }

  .ct-head { position: relative; padding: 22px 30px 16px; text-align: center; border-bottom: 1px solid var(--sf-line-3); }
  .ct-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--sf-ink); }
  .ct-sub { font-size: 12.5px; color: var(--sf-ink-3); margin-top: 6px; }
  .ct-close {
    position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-fill); color: var(--sf-ink-2); cursor: pointer; transition: background .16s, color .16s;
  }
  .ct-close:hover { background: var(--sf-fill-3); color: var(--sf-ink); }

  .ct-thread {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 18px 22px; background: var(--sf-surface-2);
  }
  .ct-sys {
    max-width: 84%; margin: 0 auto 14px; padding: 10px 14px;
    background: var(--sf-surface); border: 1px solid var(--sf-line-3); border-radius: 12px;
    font-size: 12.5px; line-height: 1.6; color: var(--sf-ink-3); text-align: center;
  }
  .ct-row { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 14px; }
  /* 客服回复靠左：与客户自己的蓝气泡分列两侧，谁说的看得清 */
  .ct-row.is-staff { align-items: flex-start; }
  .ct-bubble {
    max-width: 84%; padding: 10px 14px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  }
  .ct-bubble.is-me { background: #0066CC; color: #FFFFFF; border-bottom-right-radius: 4px; }
  .ct-bubble.is-staff {
    background: var(--sf-surface); color: var(--sf-ink);
    border: 1px solid var(--sf-line-3); border-bottom-left-radius: 4px;
  }
  .ct-bubble-tx { white-space: pre-wrap; word-break: break-word; }
  .ct-bubble-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ct-bubble-imgs:first-child { margin-top: 0; }
  .ct-bubble-img {
    width: 84px; height: 84px; object-fit: cover; border-radius: 8px;
    background: rgba(255, 255, 255, .18); display: block;
  }
  .ct-at { font-size: 11px; color: var(--sf-ink-5); margin-top: 5px; }

  /* 待发图片：横向缩略图条，超出可横滑 */
  .ct-attach {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 12px 22px 0; background: var(--sf-surface);
  }
  .ct-attach[hidden] { display: none; }
  .ct-thumb { position: relative; flex: 0 0 auto; width: 62px; height: 62px; }
  .ct-thumb img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 9px;
    border: 1px solid var(--sf-line-3); display: block;
  }
  .ct-thumb-x {
    position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; padding: 0;
    border: 2px solid var(--sf-surface); border-radius: 50%; background: #3F4650; color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .ct-thumb-x:hover { background: #C0392B; }

  .ct-foot {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--sf-line-3); background: var(--sf-surface);
  }
  .ct-attach:not([hidden]) + .ct-foot { border-top-color: transparent; }
  .ct-clip {
    flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
    border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface);
    color: var(--sf-ink-3); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .16s, color .16s, border-color .16s;
  }
  .ct-clip:hover { background: var(--sf-fill); color: #0066CC; border-color: #BCD8F3; }
  .ct-input {
    flex: 1 1 auto; min-width: 0; min-height: 86px; max-height: 170px; overflow-y: auto;
    padding: 11px 14px; border: 1px solid var(--sf-line); border-radius: 12px;
    background: var(--sf-surface); font-family: inherit; font-size: 13.5px; line-height: 1.5;
    color: var(--sf-ink); outline: none; resize: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .ct-input::placeholder { color: var(--sf-ink-5); }
  .ct-input:focus { border-color: #0066CC; box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }
  .ct-send {
    flex: 0 0 auto; height: 42px; padding: 0 22px; border: 1px solid #0066CC; border-radius: 12px;
    background: #0066CC; color: #FFFFFF; font-family: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .16s, border-color .16s;
  }
  .ct-send:hover { background: #0057AD; border-color: #0057AD; }
  .ct-send[disabled] { background: #BCD8F3; border-color: #BCD8F3; cursor: not-allowed; }

  .ct-note {
    min-height: 0; padding: 0 22px; font-size: 12px; color: var(--sf-ink-3);
    transition: padding .16s;
  }
  .ct-note:not(:empty) { padding: 0 22px 14px; }
  .ct-note.is-ok { color: #0F766E; }
  .ct-note.is-warn { color: #B45309; }
  .ct-note.is-err { color: #C0392B; }

  @media (max-width: 720px) {
    .ct-mask { padding: 14px 12px; }
    .ct-panel { height: calc(100vh - 28px); }
    .ct-head { padding-left: 18px; padding-right: 18px; }
    .ct-thread, .ct-foot { padding-left: 16px; padding-right: 16px; }
  }

  /* ================= 画廊信息流（图片生成页 · 生成记录） =================
     一条记录 = 输入块（参考图 · 提示词 · 元信息）→ 输出块（结果图 · 操作行）。
     提示词默认只露 2 行：末行右侧压一层白渐隐，渐隐上摆「展开」；
     点开后按钮落到文本下方换成「收起」（.gx-say:not(.is-clamp) 那条）。
     组件用中性灰，强调色由页面作用域注入（本页＝青绿）。 */
  .gx-item + .gx-item { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--sf-line-3); }

  /* 记录序号徽标（新建生成那颗用 .is-new 换实心强调色） */
  .gx-badge {
    width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--sf-fill-2); color: var(--sf-ink-2);
  }
  .gx-badge.is-new { background: #0066CC; color: #FFFFFF; font-size: 14px; font-weight: 600; }

  /* 小标签：参考图 / 上一张 · 提示词 */
  .gx-lbl {
    flex: 0 0 auto; height: 19px; padding: 0 7px; border-radius: 6px;
    display: flex; align-items: center;
    font-size: 10.5px; font-weight: 600;
    background: var(--sf-fill-2); color: var(--sf-ink-2);
  }
  .gx-lbl.is-prev { background: rgba(0, 102, 204, .10); color: #0066CC; }

  /* 参考图缩略图：正方形，几张参考图就几个框（首张＝主参考，描 2px 强调边）。
     框里放参考图本身，左下角压一个编号角标（01 / 02 …）；图拿不到时退回纯编号。 */
  .gx-ref {
    position: relative;
    width: 34px; height: 34px; border-radius: 7px; overflow: hidden; flex: 0 0 auto;
    border: 1px solid var(--sf-line); background: var(--sf-fill-2); cursor: pointer;
    transition: border-color .15s, transform .15s;
  }
  .gx-ref:hover { transform: translateY(-1px); }
  .gx-ref.is-src { border: 2px solid #0066CC; }
  .gx-ref img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .gx-ref-no {
    position: absolute; left: 0; bottom: 0; padding: 0 3px 1px;
    font-size: 8.5px; line-height: 1.35; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF; background: rgba(0, 0, 0, .55);
    border-top-right-radius: 4px; pointer-events: none;
  }

  /* 提示词：折 2 行 + 渐隐 + 展开 */
  .gx-say { position: relative; }
  .gx-say-t { font-size: 13.5px; line-height: 1.75; color: var(--sf-ink); word-break: break-word; }
  .gx-say.is-clamp .gx-say-t { max-height: 3.5em; overflow: hidden; }
  .gx-say.is-clamp::after {
    content: ""; position: absolute; right: 0; bottom: 0; width: 152px; height: 1.75em;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--sf-surface) 46%);
  }
  .gx-more {
    position: absolute; right: 0; bottom: 0; height: 1.75em;
    display: flex; align-items: center; gap: 3px;
    font-size: 13.5px; font-weight: 500; color: #0066CC;
    white-space: nowrap; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    /* ::after 是最后一个生成子节点，不抬层级的话渐隐会盖住「展开」 */
    z-index: 1;
  }
  .gx-more svg { transition: transform .18s; }
  .gx-more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .gx-say:not(.is-clamp) .gx-more {
    position: static; margin-top: 5px; justify-content: flex-end;
  }

  /* 复制提示词 */
  .gx-copy {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--sf-ink-2); cursor: pointer; transition: color .15s;
  }
  .gx-copy:hover { color: #0066CC; }
  .gx-copy.is-ok { color: #0F766E; }

  /* 结果图下方的操作行 */
  .gx-act {
    height: 32px; padding: 0 13px; border-radius: 999px; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--sf-line); background: var(--sf-surface);
    font-size: 12.5px; font-weight: 500; color: var(--sf-ink); cursor: pointer;
    user-select: none; -webkit-user-select: none;
    transition: background .15s, border-color .15s;
  }
  .gx-act:hover { background: var(--sf-fill); border-color: var(--sf-line-strong); }
  .gx-act .gx-act-i { display: flex; color: var(--sf-ink-2); }
  .gx-act.is-icon { width: 44px; padding: 0; justify-content: center; color: var(--sf-ink-2); }
  .gx-act.is-icon.is-on { background: var(--sf-fill-2); border-color: var(--sf-line-strong); color: var(--sf-ink); }

  /* ⋯ 下拉：贴右缘向下开，菜单项沿用同一套中性灰 */
  .gx-menu { left: auto; right: 0; width: 176px; padding: 6px; }
  .gx-mi {
    display: flex; align-items: center; gap: 9px; height: 33px; padding: 0 9px;
    border-radius: 8px; font-size: 12.5px; color: var(--sf-ink); cursor: pointer;
    transition: background .13s, color .13s;
  }
  .gx-mi:hover { background: var(--sf-fill); }
  .gx-mi svg { flex: 0 0 auto; color: var(--sf-ink-3); }
  .gx-mi.is-danger, .gx-mi.is-danger svg { color: #D70015; }
  .gx-mi.is-danger:hover { background: rgba(215, 0, 21, .07); }

  /* ================= 参考图 9 格上传入口（图片生成页 · 新建生成） =================
     一行 9 格：空格＝虚线 + ＋ + 左上角序号；落位＝灰底占位图 + 悬停出现的移除键。
     最靠前落位的那格＝主参考（描边加粗、标签换成「主参考 NN」）——它是构图与光影的基准。
     组件用中性灰，强调色由页面作用域注入（本页＝青绿）。 */
  .ig-rfs { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
  .ig-slot {
    position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--sf-line-mid); background: var(--sf-surface-2); color: var(--sf-ink-5);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: border-color .15s, background .15s, color .15s;
  }
  .ig-slot:hover { border-color: var(--sf-line-strong); background: var(--sf-fill); color: var(--sf-ink-2); }
  .ig-slot-no {
    position: absolute; left: 6px; top: 5px; line-height: 1;
    font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--sf-ink-5);
  }
  .ig-slot-add { display: flex; }
  .ig-slot.is-on { border: 1px solid var(--sf-line); background: var(--sf-surface); cursor: default; }
  .ig-slot.is-on:hover { border-color: var(--sf-line); background: var(--sf-surface); }
  .ig-slot.is-on .ig-slot-no, .ig-slot.is-on .ig-slot-add { display: none; }
  /* 主参考：用 inset 描边而不是加粗边框，落位前后尺寸不跳 */
  .ig-slot.is-src { border-color: #0066CC; box-shadow: inset 0 0 0 1px #0066CC; }
  .ig-slot-x {
    position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: rgba(29, 29, 31, .58); color: #FFFFFF; cursor: pointer;
    transition: background .15s;
  }
  .ig-slot.is-on:hover .ig-slot-x { display: flex; }
  .ig-slot-x:hover { background: rgba(29, 29, 31, .88); }
  @media (max-width: 1080px) { .ig-rfs { grid-template-columns: repeat(5, 1fr); } }
  @media (max-width: 640px) { .ig-rfs { grid-template-columns: repeat(3, 1fr); } }

/* ── 下载位置（三个资产库共用：选本机文件夹 → 点下载直接写入）────── */
.dl-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sf-line-strong); flex: none; }
.dl-dot.is-ok { background: #1DA462; }
.dl-dot.is-wait { background: #D97706; }
.dl-mask { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.32);
           display: none; opacity: 0; transition: opacity .18s; }
.dl-mask.is-in { opacity: 1; }
.dl-panel {
  position: fixed; z-index: 91; left: 50%; top: 50%; display: none;
  transform: translate(-50%, -48%) scale(.985); width: 520px; max-width: calc(100vw - 40px);
  background: var(--sf-surface); border-radius: 12px; overflow: hidden; opacity: 0;
  box-shadow: 0 24px 70px -22px rgba(0,0,0,.45);
  transition: opacity .18s, transform .18s;
  --dl-accent: #0066CC; --dl-soft: #EAF3FC;
}
.dl-panel.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dl-head { height: 52px; padding: 0 20px; display: flex; align-items: center;
           justify-content: space-between; border-bottom: 1px solid var(--sf-line); }
.dl-title { font-size: 15px; font-weight: 600; color: var(--sf-ink); }
.dl-x { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center;
        justify-content: center; font-size: 12px; color: var(--sf-ink-3); cursor: pointer; transition: background .15s, color .15s; }
.dl-x:hover { background: var(--sf-line-3); color: var(--sf-ink); }
.dl-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
/* ── 表单字段（Windows 对话框习惯：左上标签 → 控件 → 状态行）────── */
.dl-field { display: flex; flex-direction: column; gap: 6px; }
.dl-flabel { font-size: 12px; font-weight: 600; color: var(--sf-ink); }
.dl-pathrow { display: flex; align-items: stretch; gap: 8px; }
.dl-pathbox { flex: 1; min-width: 0; height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 9px;
              border: 1px solid var(--sf-line-input); border-radius: 8px; background: var(--sf-surface); }
.dl-pathbox svg { flex: none; color: var(--dl-accent, #0066CC); }
.dl-pathbox.is-empty svg { color: var(--sf-ink-4); }
.dl-path-txt { font-size: 13px; font-weight: 600; color: var(--sf-ink);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-pathbox.is-empty .dl-path-txt { color: var(--sf-ink-3); font-weight: 400; }
/* 完整磁盘地址（手输备注）：浏览器只给文件夹名，真实路径靠用户填一次 */
.dl-input { height: 38px; width: 100%; padding: 0 12px; border: 1px solid var(--sf-line-input); border-radius: 8px;
            background: var(--sf-surface); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            color: var(--sf-ink); transition: border-color .15s, box-shadow .15s; }
.dl-input::placeholder { font-family: inherit; color: var(--sf-ink-4); }
.dl-input:hover { border-color: var(--sf-line-strong); }
.dl-input:focus { outline: none; border-color: var(--dl-accent, #0066CC);
                  box-shadow: 0 0 0 3px var(--dl-soft, #EAF3FC); }
.dl-hint b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px;
             color: var(--sf-ink); font-weight: 600; }
.dl-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.5; color: var(--sf-ink-2); }
.dl-hint.dl-hint-top { align-items: flex-start; }
.dl-hint.dl-hint-top svg { margin-top: 1px; }
.dl-hint svg { flex: none; color: var(--sf-ink-3); }
.dl-hint.is-ok svg { color: #1DA462; }
.dl-hint.is-wait svg { color: #D97706; }

/* ── 弹窗控件（Windows 化：8px 圆角矩形按钮 + 原生下拉框）──────── */
.dl-btn2 { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
           height: 38px; padding: 0 14px; border: 1px solid var(--sf-line-input); border-radius: 8px;
           background: var(--sf-surface); font-size: 12.5px; font-weight: 500; color: var(--sf-ink); cursor: pointer; white-space: nowrap;
           font-family: inherit; transition: background .15s, border-color .15s; }
.dl-btn2:hover { background: var(--sf-fill); border-color: var(--sf-line-strong); }
.dl-btn2 svg { color: var(--sf-ink-2); flex: none; }
.dl-btn2.is-primary { background: var(--dl-accent, #0066CC); border-color: var(--dl-accent, #0066CC); color: #FFFFFF; font-weight: 600; }
.dl-btn2.is-primary:hover { filter: brightness(1.08); }
.dl-btn2.is-primary svg { color: #FFFFFF; }
.dl-btn2:focus-visible, .dl-select:focus-visible, .dl-linkbtn:focus-visible {
  outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--dl-accent, #0066CC); }
.dl-select { height: 38px; width: 250px; max-width: 100%; padding: 0 32px 0 12px;
             border: 1px solid var(--sf-line-input); border-radius: 8px; background: var(--sf-surface);
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2386868B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
             background-repeat: no-repeat; background-position: right 11px center;
             font-size: 12.5px; font-family: inherit; color: var(--sf-ink); cursor: pointer;
             appearance: none; -webkit-appearance: none; }
.dl-select:hover { border-color: var(--sf-line-strong); }
.dl-linkbtn { border: none; background: transparent; padding: 0 6px; height: 26px;
              font-size: 11.5px; color: var(--sf-ink-3); cursor: pointer; border-radius: 6px; font-family: inherit;
              transition: color .15s, background .15s; }
.dl-linkbtn:hover { color: var(--sf-ink); background: var(--sf-line-3); }

.dl-stat { font-size: 11.5px; color: var(--sf-ink-3); line-height: 1.6; }
.dl-stat b { color: var(--sf-ink); font-weight: 600; }
.dl-note { font-size: 11.5px; line-height: 1.7; color: var(--sf-ink-2); background: var(--sf-fill);
           border-radius: 10px; padding: 11px 13px; }
.dl-note b { color: var(--sf-ink); font-weight: 600; }
.dl-warn { font-size: 11px; line-height: 1.6; color: var(--sf-warn-ink); background: var(--sf-warn-soft);
           border-radius: 10px; padding: 9px 12px; }
.dl-warn b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* ── 底部按钮栏（Windows 对话框：次要操作在左，主要操作在右）────── */
.dl-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px;
           border-top: 1px solid var(--sf-line-2); background: var(--sf-surface-2); }
.dl-foot-sp { flex: 1; }
.dl-toast {
  position: fixed; z-index: 95; left: 50%; bottom: 30px; max-width: 70vw;
  transform: translate(-50%, 10px); padding: 11px 16px; border-radius: 999px;
  background: rgba(29,29,31,.94); color: #FFFFFF; font-size: 12.5px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); opacity: 0;
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.dl-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.dl-toast.is-warn { background: rgba(180,83,9,.96); }

/* ── 顶栏下载按钮：一枚实心胶囊，始终是顶栏最重的元素 ──────────── */
.dl-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: none; white-space: nowrap;
  background: var(--dl-accent, #0066CC); color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: box-shadow .16s, filter .16s;
}
/* ── 顶栏保存位置：macOS 分段胶囊（与排序/视图分段控件同一语言） ──
   已设置 = 一枚分段：左段文件夹名+状态点（点击进设置），右段打开图标
   未设置 = 一枚静默灰胶囊「设置本地保存位置」
   唯一主 CTA 永远是「新建场景」。                                */
.dl-segbtn { display: inline-flex; align-items: center; height: 34px;
             border-radius: 999px; background: var(--sf-fill); padding: 0 4px; }
.dl-segbtn-item { display: inline-flex; align-items: center; gap: 6px; height: 26px;
                  padding: 0 11px; border-radius: 999px; border: none; background: transparent;
                  font-size: 12.5px; font-weight: 500; color: var(--sf-ink); cursor: pointer;
                  white-space: nowrap;
                  transition: background .16s, box-shadow .16s, color .16s; }
.dl-segbtn-item:hover { background: var(--sf-surface); box-shadow: 0 1px 2.5px rgba(0, 0, 0, .16); }
.dl-segbtn-item svg { color: var(--sf-ink-2); flex: none; }
.dl-segbtn-item:hover svg { color: var(--sf-ink); }
.dl-segbtn-ico { padding: 0 9px; }
.dl-segbtn-div { width: 1px; height: 16px; background: var(--sf-line-mid); flex: none; }

.dl-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  border: none; white-space: nowrap;
  background: var(--sf-fill); color: var(--sf-ink);
  transition: background .16s, color .16s;
}
.dl-btn:hover { background: var(--sf-fill-3); }
.dl-btn svg { color: var(--sf-ink-2); }
.dl-btn-txt { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 文件夹内容视图 ────────────────────────────────────────────── */
.dl-head.dl-fhead { padding: 0 14px 0 10px; gap: 9px; justify-content: flex-start; }
.dl-back { width: 28px; height: 28px; }
.dl-fname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--sf-ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-fbar { display: flex; align-items: center; gap: 7px; }
.dl-fsum { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sf-ink-3);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-mini { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--sf-line);
           background: var(--sf-surface); font-size: 11.5px; color: var(--sf-ink-2); cursor: pointer;
           display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
           transition: border-color .16s, background .16s, color .16s; }
.dl-mini:hover { border-color: var(--sf-line-strong); color: var(--sf-ink); }
.dl-mini.is-on { border-color: var(--dl-accent, #0066CC); background: var(--dl-soft, var(--sf-accent-soft));
                 color: var(--dl-accent, #0066CC); font-weight: 600; }
.dl-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
           margin: 0 -2px; padding: 1px 2px; }
.dl-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px;
          border: 1px solid var(--sf-line-2); border-radius: 11px; background: var(--sf-surface);
          transition: border-color .15s, background .15s; }
.dl-row:hover { border-color: var(--sf-line-input); background: var(--sf-surface-2); }
.dl-thumb { width: 52px; height: 52px; border-radius: 8px; flex: none; overflow: hidden;
            background: var(--sf-fill); border: 1px solid var(--sf-line-2); cursor: zoom-in;
            display: flex; align-items: center; justify-content: center; color: var(--sf-ink-5); }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-rname { font-size: 12.5px; font-weight: 600; color: var(--sf-ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-rsub { font-size: 11px; color: var(--sf-ink-3); }
.dl-ract { display: flex; align-items: center; gap: 3px; flex: none; }
.dl-ic { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent;
         background: transparent; display: inline-flex; align-items: center; justify-content: center;
         gap: 4px; cursor: pointer; color: var(--sf-ink-3);
         transition: background .14s, color .14s, border-color .14s; }
.dl-ic:hover { background: var(--sf-line-3); color: var(--sf-ink); }
.dl-ic.is-danger:hover { background: #FDECEC; color: #C0392B; }
.dl-ic.is-armed { width: auto; padding: 0 9px; background: #FDECEC; color: #C0392B;
                  border-color: #F3B7B7; font-size: 11px; font-weight: 600; }
.dl-empty { padding: 34px 20px; text-align: center; color: var(--sf-ink-3); font-size: 12px; line-height: 1.8; }
.dl-empty b { color: var(--sf-ink); font-weight: 600; }
.dl-view { position: fixed; inset: 0; z-index: 96; background: rgba(0,0,0,.74);
           display: none; align-items: center; justify-content: center; padding: 44px;
           cursor: zoom-out; }
.dl-view.is-in { display: flex; }
.dl-view img { max-width: 100%; max-height: 100%; border-radius: 10px;
               box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
/* ── 场景工作台：登录弹层 ─────────────────────────────────── */
.ws-mask {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--sf-scrim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ws-mask.is-hidden { display: none; }
.ws-login {
  width: min(400px, 100%); background: var(--sf-surface); border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3); padding: 26px 28px 24px;
}
.ws-login-title { font-size: 19px; font-weight: 700; color: var(--sf-ink); letter-spacing: -.01em; }
.ws-login-sub { font-size: 12px; color: var(--sf-ink-3); margin-top: 6px; line-height: 1.6; }
.ws-input {
  width: 100%; height: 44px; margin-top: 14px; padding: 0 14px;
  border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface);
  font-size: 14px; color: var(--sf-ink); outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ws-input:focus { border-color: #0066CC; box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }
.ws-input::placeholder { color: var(--sf-ink-5); }
.ws-login-err { font-size: 12px; color: #C0392B; margin-top: 10px; min-height: 16px; }
.ws-login-acts { display: flex; gap: 10px; margin-top: 12px; }
.ws-btn-primary {
  flex: 1; height: 44px; border: 0; border-radius: 999px;
  background: #0066CC; color: #FFFFFF; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 102, 204, .26);
  transition: background .16s, box-shadow .16s;
}
.ws-btn-primary:hover { background: #0057AD; }
.ws-btn-primary.is-loading { opacity: .65; pointer-events: none; }
.ws-btn-primary.is-ghost { background: var(--sf-fill); color: var(--sf-ink-2); box-shadow: none; }
.ws-btn-primary.is-ghost:hover { background: var(--sf-fill-3); }
/* 从场景库导入列表 */
.ws-import-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.ws-import-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: 12px;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ws-import-item:hover { border-color: #0066CC; background: var(--sf-surface-2); box-shadow: 0 0 0 3px rgba(0,102,204,.10); }
.ws-import-name { font-size: 13.5px; font-weight: 600; color: var(--sf-ink); }
.ws-import-arrow { font-size: 11.5px; color: #0066CC; font-weight: 500; }
/* 弹层打开时禁用页面滚动 */
.ws-mask.is-open { display: flex; }
/* ── 场景库添加弹窗 ─────────────────────────────────── */
.ws-lib {
  width: min(720px, 100%); background: var(--sf-surface); border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3); display: flex; flex-direction: column;
  max-height: 84vh;
}
.ws-lib-head {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--sf-line-3);
}
.ws-lib-title { font-size: 17px; font-weight: 700; color: var(--sf-ink); letter-spacing: -.01em; }
.ws-lib-sub { font-size: 12px; color: var(--sf-ink-3); line-height: 1.6; }
.ws-lib-x {
  position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--sf-ink-3); cursor: pointer;
  background: var(--sf-fill); transition: background .15s, color .15s;
}
.ws-lib-x:hover { background: var(--sf-fill-3); color: var(--sf-ink); }
.ws-lib-body {
  padding: 18px 24px; overflow-y: auto; flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.ws-lib-item {
  border: 1px solid var(--sf-line); border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--sf-surface); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ws-lib-item:hover { border-color: #0066CC; box-shadow: 0 0 0 3px rgba(0,102,204,.10); transform: translateY(-1px); }
.ws-lib-thumb { aspect-ratio: 21 / 9; background: var(--sf-fill); overflow: hidden; }
.ws-lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-lib-name {
  font-size: 11.5px; color: var(--sf-ink); padding: 8px 10px 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-lib-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--sf-ink-3);
  font-size: 12.5px; line-height: 1.8;
}
.ws-lib-foot {
  padding: 12px 24px 14px; border-top: 1px solid var(--sf-line-3); background: var(--sf-surface-2);
  font-size: 11px; color: var(--sf-ink-3);
}
@media (max-width: 640px) { .ws-lib-body { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
     日夜模式 · 顶栏切换按钮
     顶栏通栏在两种模式下都是深色面料，所以按钮恒为「白字 + 半透明白底」，
     与紧邻的额度胶囊同一套视觉；图标按当前模式切太阳 / 月亮。
     ============================================================ */
.tm-btn {
  width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  color: #FFFFFF; background: rgba(255, 255, 255, .10);
  transition: background .16s ease;
  -webkit-appearance: none; appearance: none;
}
.tm-btn:hover { background: rgba(255, 255, 255, .20); }
.tm-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 1px; }
.tm-btn svg { display: block; }
.tm-ico-moon { display: none; }
html.dark .tm-ico-sun { display: none; }
html.dark .tm-ico-moon { display: block; }

/* ============================================================
     日夜模式 · Tailwind 工具类的深色覆盖
     ① 令牌色（parchment / canvas / ink / hairline …）已指向 CSS 变量，自动跟随；
     ② 这里只补两类：Tailwind 内置的 bg-white，以及模板里尚未令牌化的
        任意色类（bg-[#F5F5F7] 等）与浅色页面上不该泛白的深色面料。
     ============================================================ */
html.dark .bg-white { background-color: var(--sf-surface); }
/* 顶栏通栏、E 视角示意图上的深色徽标：两种模式下都保持深色（深色面料不切换） */
html.dark .bg-ink { background-color: #1D1D1F; }

/* 模板内联的任意色工具类：中性色跟随令牌 */
html.dark .bg-\[\#EDEDF0\] { background-color: var(--sf-canvas); }
html.dark .bg-\[\#F5F5F7\] { background-color: var(--sf-fill); }
html.dark .bg-\[\#EFEFF0\] { background-color: var(--sf-fill-2); }
html.dark .bg-\[\#F5F7FA\] { background-color: var(--sf-surface-2); }
html.dark .bg-\[\#FAFAFB\] { background-color: var(--sf-surface-2); }
html.dark .bg-\[\#EAF3FC\] { background-color: var(--sf-accent-soft); }
html.dark .bg-\[\#FEF6EC\] { background-color: var(--sf-warn-soft); }
html.dark .bg-\[\#F3F0FB\] { background-color: var(--sf-violet-soft); }
html.dark .bg-\[\#C7C7CC\] { background-color: var(--sf-line-strong); }
html.dark .text-\[\#C7C7CC\] { color: var(--sf-line-strong); }
html.dark .text-\[\#9AA0A6\] { color: var(--sf-ink-4); }
html.dark .text-\[\#B45309\] { color: var(--sf-warn-ink); }
html.dark .text-\[\#6E56CF\] { color: var(--sf-violet-ink); }
html.dark .border-\[\#E0E0E0\] { border-color: var(--sf-line); }
html.dark .border-\[\#C7C7CC\] { border-color: var(--sf-line-strong); }
/* Tailwind 的 ring-offset 默认色是白：深色下改成页面底，避免出现白色光圈 */
html.dark .ring-offset-1 { --tw-ring-offset-color: var(--sf-canvas); }
/* 图片上的白色磨砂片（.lb-act / asrc-bar 等）与遮罩保持原样：那是压在图片上的面料 */


/* ==== 顶栏「定价」入口（游客可见 / 已登录收起） =====================================
   点击走全局 [data-credits-open] 委托 → 直接弹出「充值额度」弹窗（套餐即图片定价），
   不设中间窗口。hidden 显隐由 app.js syncPricingEntry() 按 /api/me 结果同步。 ==== */
.pr-entry {
  height: 28px; padding: 0 11px; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 999px;
  background: #0066CC; color: #FFFFFF;
  font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer;
  transition: background .16s;
}
.pr-entry:hover { background: #0057AD; }
.pr-entry:active { background: #004E9C; }
.pr-entry:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
/* 这条必须显式写：上面声明了 display:inline-flex，会盖掉 [hidden] 的 UA 默认
   display:none —— 不补的话已登录时 hidden 属性形同虚设（与 .tbl-login[hidden] 同一处理）。 */
.pr-entry[hidden] { display: none; }
/* 窄屏收窄（按钮里没有内层 span，文字保留：金额胶囊在旁边，两个字仍放得下） */
@media (max-width: 900px) {
  .pr-entry { padding: 0 8px; }
}
/* ==== 「图片定价」说明弹窗（.pr-mask）================================================
   骨架继承站内 .cm-mask / .cm-panel / .cm-head / .cm-body / .cm-foot / .cm-cta；
   这里只做三件事：面板加宽、表格样式、降级提示。 ==== */
.pr-mask .cm-panel { width: min(640px, 100%); }
.pr-mask .cm-body { padding: 14px 30px 4px; }
.pr-mask .cm-foot { padding: 12px 30px 16px; }
/* 关闭键用真 <button>（站内其它弹窗的 .cm-close 是 <div>，键盘用户跳不进去）：
   清零按钮默认外观，其余外观继续吃 .cm-close */
.pr-mask .cm-close { border: 0; padding: 0; font-family: inherit; background: none; cursor: pointer; }

/* 价目表 / 套餐表：数字列右对齐 + 表格数字等宽，方便上下对比单价 */
.pr-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pr-tbl th {
  text-align: left; font-weight: 600; font-size: 11.5px;
  color: var(--sf-ink-3); padding: 7px 10px;
  border-bottom: 1px solid var(--sf-line);
  white-space: nowrap;
}
.pr-tbl td {
  padding: 7px 10px; color: var(--sf-ink-2); line-height: 1.5;
  border-bottom: 1px solid var(--sf-line-2);
  font-variant-numeric: tabular-nums;
}
.pr-tbl tbody tr:last-child td { border-bottom: 0; }
.pr-tbl .pr-num { text-align: right; white-space: nowrap; }
.pr-tbl .pr-na { color: var(--sf-ink-5); }
.pr-note { margin-top: 10px; font-size: 11.5px; color: var(--sf-ink-5); line-height: 1.6; }

/* 取价失败：整块换成可解释的提示，CTA 一起禁用（不给用户点空的余地） */
.pr-err {
  margin: 4px 0 0; padding: 12px 14px; border-radius: 14px;
  background: var(--sf-warn-soft); color: var(--sf-warn-ink);
  font-size: 12.5px; line-height: 1.6;
}
/* 窄屏：面板收窄 */
@media (max-width: 720px) {
  .pr-mask .cm-body { padding: 14px 18px 4px; }
  .pr-mask .cm-foot { padding: 12px 18px 16px; }
}
/* [hidden] 属性兜底：Tailwind 的 display:flex 等工具类（作者样式）会压过浏览器
   默认的 [hidden]{display:none}（UA 样式），导致带 hidden 的 flex 块仍然可见
   （2026-09-25 工作台「示例墙 + 画布同时显示」的根因）。 */
[hidden] { display: none !important; }