/* ============================================================
   LiveForge Design System v3
   专业 SaaS 控制台 · 克制配色 · 清晰字阶 · 细腻层次
   ============================================================ */

:root {
  --font: "Inter", "PingFang SC", "Microsoft YaHei", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* 中性色阶 */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-soft: #f8f9fb;
  --ink: #16191f;
  --muted: #565e6b;
  --muted-2: #939aa6;
  --line: #e6e8ec;
  --line-dark: #d4d8e0;

  /* 强调色 */
  --accent: #e0533d;
  --accent-dark: #c54330;
  --accent-soft: #fdeee9;
  --accent-ink: #ad3a26;

  /* 侧栏 */
  --sidebar-bg: #10141d;
  --sidebar-bg-soft: #1a2029;
  --sidebar-ink: #eef1f6;
  --sidebar-muted: #828b9c;

  /* 语义色 */
  --green: #14793d;
  --green-soft: #e5f5ec;
  --orange: #a8520a;
  --orange-soft: #fcf0e0;
  --purple: #6f34d8;
  --purple-soft: #f0e9fd;
  --red: #d32626;
  --red-soft: #fceaea;
  --teal: #0c8d7d;

  /* 几何与阴影 */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .07), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 20px 48px -14px rgba(16, 24, 40, .2), 0 4px 12px -6px rgba(16, 24, 40, .08);
  --ring: 0 0 0 3.5px rgba(224, 83, 61, .15);
}

/* ---------- 主题色板 ---------- */
body[data-theme="cobalt"] {
  --bg: #f2f5f9; --surface-soft: #f6f8fb;
  --accent: #2f5fe0; --accent-dark: #244cba; --accent-soft: #eaf0fd; --accent-ink: #23469f;
  --ring: 0 0 0 3.5px rgba(47, 95, 224, .14);
}
body[data-theme="sage"] {
  --bg: #f3f6f3; --surface-soft: #f6f8f5;
  --accent: #c2662f; --accent-dark: #a4521f; --accent-soft: #faeee4; --accent-ink: #94491b;
  --ring: 0 0 0 3.5px rgba(194, 102, 47, .15);
}
body[data-theme="plum"] {
  --bg: #f6f3f6; --surface-soft: #f9f6f9;
  --accent: #a03d6e; --accent-dark: #852f5b; --accent-soft: #f8eaf2; --accent-ink: #7c2c55;
  --ring: 0 0 0 3.5px rgba(160, 61, 110, .14);
}
body[data-theme="paper"] {
  --bg: #f5f2ec; --surface: #fffdf9; --surface-soft: #f8f4ec;
  --ink: #1e1b16; --line: #e7e0d2; --line-dark: #d8cfbc;
  --accent: #b5452f; --accent-dark: #99371f; --accent-soft: #f8ebe4; --accent-ink: #8f3520;
  --ring: 0 0 0 3.5px rgba(181, 69, 47, .14);
}
body[data-theme="obsidian"] {
  --bg: #131417; --surface: #1b1d21; --surface-soft: #22252a;
  --ink: #edeae2; --muted: #a5a8b0; --muted-2: #787c86;
  --line: #2e3138; --line-dark: #3c4048;
  --accent: #d9a441; --accent-dark: #c08e2f; --accent-soft: #33301f; --accent-ink: #e3b45a;
  --sidebar-bg: #0c0d10; --sidebar-bg-soft: #14161a;
  --green-soft: #1c2b22; --orange-soft: #31261a; --purple-soft: #2a2333; --red-soft: #33201f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 22px -4px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 50px -12px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3.5px rgba(217, 164, 65, .18);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 13.5px; line-height: 1.6; font-synthesis: none; font-feature-settings: "cv11", "ss01"; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(100, 110, 125, .32); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 110, 125, .5); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
.topbar { height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 86%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.6); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark, .display-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.brand-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; }
.brand-subtitle { margin-top: 1px; color: var(--muted-2); font-size: 10.5px; font-weight: 550; letter-spacing: .01em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-name-label { font-size: 11.5px; font-weight: 700; color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 650; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.online, .live-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.status-dot.offline { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; animation: pulse-dot 1.6s ease infinite; }
@keyframes pulse-dot { 50% { opacity: .4; } }

/* ---------- 按钮体系 ---------- */
.ghost-button, .solid-button, .outline-button, .danger-button, .dark-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 16px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 650; letter-spacing: .005em; transition: all .16s ease; }
.ghost-button { border-color: var(--line); background: var(--surface); color: var(--muted); box-shadow: var(--shadow-sm); }
.ghost-button:hover, .outline-button:hover { border-color: var(--line-dark); color: var(--ink); background: var(--surface-soft); }
.solid-button { background: #1c2230; color: #fff; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08); }
.solid-button:hover { background: #2a3244; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.solid-button:active { transform: none; }
.solid-button.accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 96%, #fff), var(--accent)); }
.solid-button.accent:hover { background: var(--accent-dark); box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--accent) 55%, transparent); }
.outline-button { border-color: var(--line); background: var(--surface); color: var(--ink); }
.danger-button { border-color: color-mix(in srgb, var(--red) 18%, var(--red-soft)); background: var(--red-soft); color: var(--red); }
.danger-button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.dark-button { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .2); }
.dark-button:hover { background: rgba(255, 255, 255, .24); }
.compact-button { min-height: 28px; padding: 4px 11px; font-size: 11px; border-radius: 8px; }
.icon-button { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; transition: all .15s ease; }
.icon-button:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.link-button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 11.5px; font-weight: 700; }
.link-button:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(135deg, #2a3244, #10151f); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; transition: box-shadow .15s ease; }
.avatar:hover { box-shadow: 0 0 0 3.5px var(--accent-soft); }

/* ---------- 主题菜单 ---------- */
.theme-picker { position: relative; }
.theme-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 650; box-shadow: var(--shadow-sm); transition: all .15s ease; }
.theme-trigger:hover { border-color: var(--line-dark); color: var(--ink); }
.theme-trigger-dot { width: 10px; height: 10px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.theme-chevron { font-size: 10px; color: var(--muted-2); }
.theme-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 256px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease; z-index: 60; }
.theme-picker.open .theme-menu { opacity: 1; visibility: visible; transform: none; }
.theme-menu-title { padding: 8px 10px 9px; color: var(--muted-2); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.theme-option { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; transition: background .13s ease; }
.theme-option:hover { background: var(--surface-soft); }
.theme-option.active { background: var(--accent-soft); }
.theme-option strong { display: block; font-size: 12px; font-weight: 700; }
.theme-option small { color: var(--muted-2); font-size: 10px; }
.theme-option.active strong { color: var(--accent-ink); }
.theme-swatch { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.theme-swatch.atelier { background: linear-gradient(135deg, #fdf3f0 50%, #e0533d 50%); }
.theme-swatch.obsidian { background: linear-gradient(135deg, #17181c 50%, #d9a441 50%); }
.theme-swatch.cobalt { background: linear-gradient(135deg, #eef3fc 50%, #2f5fe0 50%); }
.theme-swatch.sage { background: linear-gradient(135deg, #eff5ee 50%, #c2662f 50%); }
.theme-swatch.plum { background: linear-gradient(135deg, #f6eef4 50%, #a03d6e 50%); }
.theme-swatch.paper { background: linear-gradient(135deg, #f5efe2 50%, #b5452f 50%); }

/* ---------- 工作区骨架 ---------- */
.workspace { display: flex; min-height: calc(100vh - 60px); }
.sidebar { width: 232px; flex: 0 0 232px; display: flex; flex-direction: column; padding: 20px 12px 16px; background: linear-gradient(180deg, var(--sidebar-bg) 0%, color-mix(in srgb, var(--sidebar-bg) 92%, #000) 100%); position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); background-clip: content-box; }
.sidebar-label { padding: 0 12px 8px; color: var(--sidebar-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; opacity: .8; }
.main-nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--sidebar-muted); font-size: 12.5px; font-weight: 600; text-align: left; transition: all .15s ease; }
.nav-item:hover { background: var(--sidebar-bg-soft); color: var(--sidebar-ink); }
.nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); color: #fff; box-shadow: inset 2.5px 0 0 var(--accent); }
.nav-item.active .nav-icon { opacity: 1; }
.nav-icon { width: 20px; text-align: center; font-size: 13px; opacity: .85; }
.sidebar-divider { height: 1px; margin: 18px 12px 16px; background: rgba(255, 255, 255, .07); }
.sidebar-footer { margin-top: auto; padding-top: 18px; }
.mini-session-card { padding: 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: linear-gradient(150deg, var(--sidebar-bg-soft), color-mix(in srgb, var(--sidebar-bg-soft) 70%, transparent)); }
.mini-session-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--accent); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.mini-session-card > div:nth-child(2) { color: var(--sidebar-ink); font-size: 12.5px; font-weight: 700; }
.mini-session-card > span { display: block; margin-top: 3px; color: var(--sidebar-muted); font-family: var(--mono); font-size: 9.5px; }
.session-state { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(220, 76, 76, .16); color: #f16a6a; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: none; }
.sidebar-session-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(255, 255, 255, .08); color: var(--sidebar-muted); font-size: 9.5px; }
.sidebar-session-stats b { color: var(--sidebar-ink); font-family: var(--mono); font-weight: 700; }
.sidebar-version { margin-top: 12px; padding: 0 12px; color: var(--sidebar-muted); font-size: 9.5px; opacity: .7; }
.main-content { flex: 1; min-width: 0; padding: 28px 32px 60px; }
.page-section { display: none; }
.page-section.active { display: block; animation: appear .3s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 页头 ---------- */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-kicker { margin-bottom: 7px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.page-title { font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.page-description { margin-top: 7px; max-width: 640px; color: var(--muted); font-size: 12.5px; }
.heading-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

/* ---------- 卡片体系 ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-title { font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; }
.card-caption { margin-top: 3px; color: var(--muted-2); font-size: 10.5px; }
.card-body { padding: 18px 20px; }
.empty-state { padding: 44px 20px; color: var(--muted-2); font-size: 12px; text-align: center; }
.compact-empty { padding: 22px 12px; }

/* ---------- 工作台 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card { position: relative; min-height: 116px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: all .18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-dark); }
.stat-card:after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); }
.stat-card:nth-child(2):after { background: linear-gradient(90deg, var(--purple), transparent); }
.stat-card:nth-child(3):after { background: linear-gradient(90deg, var(--teal), transparent); }
.stat-card:nth-child(4):after { background: linear-gradient(90deg, #d97f26, transparent); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-size: 15px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.stat-value { margin-top: 13px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-foot { margin-top: 6px; color: var(--muted-2); font-size: 10.5px; font-weight: 600; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.dash-main, .dash-side { display: grid; gap: 14px; align-content: start; }
.live-overview { position: relative; padding: 26px; border-radius: var(--radius); background: linear-gradient(125deg, #10151f 0%, #1b2432 55%, #232f40 100%); color: #fff; overflow: hidden; box-shadow: var(--shadow-md); }
.live-overview:after { content: ""; position: absolute; right: -70px; top: -70px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 36%, transparent), transparent 68%); }
.live-overline { display: flex; align-items: center; gap: 9px; color: #9aa5b5; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.live-overline span:last-child { margin-left: auto; letter-spacing: .02em; text-transform: none; }
.live-overview h2 { position: relative; margin-top: 14px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; z-index: 1; }
.live-overview p { position: relative; margin-top: 8px; max-width: 420px; color: #a8b2c2; font-size: 11.5px; z-index: 1; }
.live-overview-footer { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 22px; z-index: 1; }
.live-overview-meta { display: flex; gap: 20px; }
.live-overview-meta strong { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-overview-meta span { color: #8d98aa; font-size: 10px; }
.quick-list, .activity-list { display: grid; }
.quick-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.quick-item:last-child, .activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.quick-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; font-weight: 800; }
.quick-content { flex: 1; min-width: 0; }
.quick-content strong { display: block; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-content span { color: var(--muted-2); font-size: 10px; }
.quick-value { color: var(--muted); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.activity-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.activity-mark { width: 7px; height: 7px; margin-top: 5px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.activity-item strong { display: block; font-size: 12px; font-weight: 650; }
.activity-item span { color: var(--muted-2); font-size: 10px; }

/* ---------- 工具栏 / 搜索 / 状态徽标 ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 14px; flex-wrap: wrap; }
.search-box { position: relative; width: min(340px, 100%); }
.search-box input { width: 100%; padding: 9px 13px 9px 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 12px; transition: all .15s ease; }
.search-box input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 13px; pointer-events: none; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 话术列表：搜索框 + 状态 / 类型筛选 同一行紧凑（筛选区超宽时横向滚动，保持单行） */
.script-list-toolbar { flex-wrap: nowrap; }
.script-list-toolbar .search-box { flex: none; width: 240px; }
.script-filter-chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
.script-filter-chips .filter-chip { flex: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3.5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 10.5px; font-weight: 650; white-space: nowrap; }
.chip.green { border-color: transparent; background: var(--green-soft); color: var(--green); }
.chip.orange { border-color: transparent; background: var(--orange-soft); color: var(--orange); }
.chip.purple { border-color: transparent; background: var(--purple-soft); color: var(--purple); }
.chip.red { border-color: transparent; background: var(--red-soft); color: var(--red); }
.chip.gray { border-color: transparent; background: color-mix(in srgb, var(--muted-2) 12%, transparent); color: var(--muted-2); }
.chip.off { border-color: transparent; background: color-mix(in srgb, var(--muted-2) 12%, transparent); color: var(--muted-2); text-decoration: line-through; opacity: .8; }

/* ---------- 数据表 ---------- */
.data-table, .product-table { width: 100%; border-collapse: collapse; }
.data-table th, .product-table th { padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); color: var(--muted-2); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.data-table th:first-child, .product-table th:first-child { border-top-left-radius: var(--radius); }
.data-table th:last-child, .product-table th:last-child { border-top-right-radius: var(--radius); }
.data-table td, .product-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.data-table tr:last-child td, .product-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr, .product-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover, .product-table tbody tr:hover { background: var(--surface-soft); }
.item-cell { display: flex; align-items: center; gap: 11px; }
.item-thumb { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #2a3244, #10151f); color: #fff; font-size: 14px; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-cell strong { display: block; font-size: 12px; font-weight: 700; }
.item-cell span { color: var(--muted-2); font-size: 10px; }
.table-actions { display: flex; align-items: center; gap: 6px; }
.hidden-row { display: none !important; }

/* ---------- 表单体系 ---------- */
.form-panel { margin-bottom: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; align-items: end; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field { display: grid; gap: 6px; }
.form-field label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: color-mix(in srgb, var(--line-dark) 70%, var(--muted-2)); }
.form-field textarea { resize: vertical; line-height: 1.6; }
.form-field select[multiple] { padding: 6px; }
.form-field select[multiple] option { padding: 5px 8px; border-radius: 6px; }
.form-help { color: var(--muted-2); font-size: 10.5px; line-height: 1.55; }
.form-action { display: flex; align-items: center; gap: 9px; }

/* ---------- 话术库 ---------- */
.script-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.script-list { display: grid; gap: 9px; max-height: 640px; overflow-y: auto; padding: 14px; }
.script-card { display: block; width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; transition: all .16s ease; }
.script-card:hover { border-color: var(--line-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.script-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.script-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.script-card strong { font-size: 12.5px; font-weight: 700; }
.script-card.selected strong { color: var(--accent-ink); }
.script-card p { margin: 7px 0 10px; color: var(--muted); font-size: 11px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.script-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.script-detail { position: sticky; top: 80px; }
.script-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.script-detail h3 { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.script-detail-sub { margin-top: 5px; color: var(--muted-2); font-size: 10.5px; }
.block-list { display: grid; gap: 10px; margin-top: 16px; }
.script-block { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.block-index { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.block-label { font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.block-copy { color: var(--muted); font-size: 12px; line-height: 1.65; }
.block-duration { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; font-weight: 700; vertical-align: 1px; font-variant-numeric: tabular-nums; }

/* ---------- 素材库 ---------- */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.asset-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: all .18s ease; }
.asset-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-dark); }
.asset-preview { height: 148px; display: grid; place-items: center; background: linear-gradient(135deg, #171e2b, #0e131c); color: rgba(255, 255, 255, .85); font-size: 26px; overflow: hidden; }
.asset-preview.image { background: var(--surface-soft); }
.asset-preview img, .asset-preview video { width: 100%; height: 100%; object-fit: cover; }
.asset-preview.document { background: linear-gradient(135deg, #fdf1e2, #f8e2cf); color: var(--orange); }
.asset-document { display: grid; place-items: center; gap: 4px; color: inherit; }
.asset-document small { font-size: 9px; opacity: .75; }
.asset-placeholder { opacity: .8; }
/* 素材库「全部」表格视图 */
.asset-table-card { overflow-x: auto; }
.asset-table { min-width: 980px; }
.asset-thumb { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; }
.asset-thumb.asset-preview { height: 46px; font-size: 15px; }
.asset-thumb img, .asset-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-thumb .asset-document { width: 100%; height: 100%; }
.asset-meta-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asset-content { padding: 13px 14px; }
.asset-title-row, .asset-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.asset-content strong { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-content p { margin: 5px 0 9px; color: var(--muted-2); font-size: 10px; }
.asset-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.tag-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); color: var(--muted); font-size: 9.5px; font-weight: 650; }
.asset-card-footer { padding-top: 9px; border-top: 1px solid var(--line); }
.asset-reference-count { color: var(--muted-2); font-size: 10px; font-weight: 650; }

/* ---------- 场景库 ---------- */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.scene-card { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer; transition: all .18s ease; }
.scene-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-dark); }
.scene-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.scene-card.chat:before { background: linear-gradient(90deg, var(--teal), transparent); }
.scene-card.site:before { background: linear-gradient(90deg, var(--purple), transparent); }
.scene-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.scene-type { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.scene-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); font-size: 16px; }
.scene-card.chat .scene-icon { background: #e6f7f3; color: var(--teal); }
.scene-card.site .scene-icon { background: var(--purple-soft); color: var(--purple); }
body[data-theme="obsidian"] .scene-card.chat .scene-icon { background: #1c2b27; }
.scene-card h3 { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.scene-card p { margin: 7px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.scene-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.scene-assets { color: var(--muted-2); font-size: 10px; font-weight: 650; }

/* ---------- 直播控制台 ---------- */
.live-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.live-control-card { overflow: hidden; }
.live-control-head { padding: 22px 24px; background: linear-gradient(125deg, #10151f 0%, #1b2432 60%, #232f40 100%); color: #fff; }
.live-control-head .page-kicker { color: var(--accent); }
.live-control-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.live-control-head p { margin-top: 5px; color: #9aa5b5; font-size: 10.5px; }
.live-control-body { padding: 20px 24px; }
.live-product-row { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.live-product-image { width: 56px; height: 56px; flex: 0 0 56px; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #2a3244, #10151f); display: grid; place-items: center; color: #fff; }
.live-product-image img { width: 100%; height: 100%; object-fit: cover; }
.live-product-copy { flex: 1; min-width: 0; }
.live-product-copy strong { display: block; font-size: 13px; font-weight: 700; }
.live-product-copy span { color: var(--muted-2); font-size: 10.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.live-script-focus { margin-top: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.live-script-label { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 10.5px; font-weight: 650; }
.live-script-copy { margin: 10px 0; min-height: 44px; font-size: 13.5px; font-weight: 650; line-height: 1.65; }
.script-progress { height: 5px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.script-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width .3s ease; }
.live-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.button-pair { display: flex; gap: 8px; }
.live-scene-list { display: grid; gap: 9px; margin-top: 15px; }
.live-scene-button { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: left; transition: all .15s ease; }
.live-scene-button:hover { border-color: var(--line-dark); background: var(--surface-soft); }
.live-scene-button.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.live-scene-button > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 9px; background: var(--surface-soft); color: var(--accent-dark); font-size: 14px; }
.live-scene-button.active > span:first-child { background: var(--surface); }
.live-scene-button strong { display: block; font-size: 12px; font-weight: 700; }
.live-scene-button small { color: var(--muted-2); font-size: 9.5px; }

/* ---------- 设备 ---------- */
.device-summary { display: grid; gap: 11px; }
.device-row { display: flex; align-items: center; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.device-row:last-child { border-bottom: 0; padding-bottom: 0; }
.device-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-size: 14px; }
.device-copy { flex: 1; min-width: 0; }
.device-copy strong { display: block; font-size: 12px; font-weight: 700; }
.device-copy span { color: var(--muted-2); font-size: 10px; }
.device-online { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }

/* ---------- TAB 卡片 ---------- */
.tab-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.tab-card { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: all .17s ease; }
.tab-card:hover { border-color: var(--line-dark); color: var(--ink); transform: translateY(-1px); }
.tab-card.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.tab-card-icon { font-size: 13px; line-height: 1; }
.tab-count { min-width: 22px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.tab-card.active .tab-count { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface); color: var(--accent-dark); }

/* ---------- 模板库 / 话术块编辑器 ---------- */
.template-library { overflow: hidden; }
.template-filter-bar { display: flex; gap: 7px; flex-wrap: wrap; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.filter-chip { padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 650; transition: all .14s ease; }
.filter-chip:hover { border-color: var(--line-dark); color: var(--ink); }
.filter-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 14px; padding: 18px 20px; }
.template-card { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: all .17s ease; }
.template-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-dark); }
.template-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.template-card.is-off { opacity: .62; background: var(--surface-soft); border-style: dashed; }
.template-card.is-off h3 { color: var(--muted-2); }
.template-card-top { display: flex; gap: 6px; margin-bottom: 10px; }
.template-card h3 { font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; }
.template-card > p { margin: 6px 0 12px; color: var(--muted); font-size: 11px; }
.template-block-preview { display: grid; gap: 4px; padding: 10px 12px; border-radius: 9px; background: var(--surface-soft); }
.template-block-preview span { color: var(--muted); font-size: 10px; }
.template-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.template-count { color: var(--muted-2); font-size: 10px; font-weight: 650; }
.template-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; padding: 11px 15px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 11px; background: var(--accent-soft); font-size: 11.5px; }
.template-notice .link-button { margin-left: auto; }
.template-notice-body { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.template-use-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 10.5px; font-weight: 700; color: var(--ink); }
.template-use-remove { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; line-height: 1; cursor: pointer; }
.template-use-remove:hover { background: var(--accent); color: #fff; }
.template-blocks-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.template-blocks-head strong { color: var(--ink); font-size: 12px; font-weight: 750; }
.template-blocks-head span { color: var(--muted-2); font-size: 9.5px; }
#template-block-list, #script-block-list { display: grid; gap: 10px; }
.block-edit-row { display: grid; grid-template-columns: 30px 150px 92px minmax(0, 1fr) 34px; gap: 10px; align-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.block-edit-index { width: 24px; height: 24px; display: grid; place-items: center; margin-top: 6px; border-radius: 7px; color: var(--accent-dark); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.block-edit-row input, .block-edit-row textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line-dark); border-radius: 8px; color: var(--ink) !important; background: var(--surface) !important; font-size: 11px; }
.block-edit-row input:focus, .block-edit-row textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.block-edit-row input[name="blockDuration"] { text-align: center; }
.block-edit-row textarea { resize: vertical; min-height: 56px; }
.block-edit-row .icon-button { margin-top: 6px; }
.template-editor-actions { margin-top: 15px; }
.template-editor, .scene-editor { animation: appear .25s ease; }
.flex-spacer { flex: 1; }

/* ---------- 话术块内容与字数统计 ---------- */
.block-content-wrap { display: flex; flex-direction: column; gap: 4px; }
.block-char-count { align-self: flex-end; color: var(--muted-2); font-size: 9.5px; line-height: 1.4; }

/* ---------- 编辑器面板 ---------- */
.editor-panel { margin: 0 0 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.editor-header h2 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.editor-header p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.editor-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
/* 素材编辑弹窗 */
#asset-edit-modal-root .modal-card { width: min(920px, 94vw); padding: 0; }
#asset-edit-modal-root .editor-panel { margin: 0; border: 0; box-shadow: none; }
/* 素材新建弹窗 */
#asset-new-modal-root .modal-card { width: min(920px, 94vw); padding: 0; }
#asset-new-modal-root .editor-panel { margin: 0; border: 0; box-shadow: none; }
#asset-new-modal-root .role-tabs, #asset-edit-modal-root .role-tabs { margin-bottom: 16px; }
/* 话术查看 / 编辑弹窗 */
.script-view-modal .modal-card, .script-edit-modal .modal-card { width: min(960px, 94vw); padding: 0; }
.script-view-modal .modal-card .editor-panel, .script-edit-modal .modal-card .editor-panel { margin: 0; border: 0; box-shadow: none; }
.script-view-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.script-thumb { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #1d2638, #131a28); color: #d4b483; display: grid; place-items: center; font-size: 17px; flex: none; overflow: hidden; }
.script-thumb.has-img { background: var(--surface-soft); }
.script-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 素材场景预览：标签切换 */
.scene-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.scene-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; transition: all .15s ease; }
.scene-tab:hover { border-color: var(--line-dark); color: var(--ink); }
.scene-tab.on { background: var(--accent, #5869d8); color: #fff; border-color: transparent; }
/* 新建素材 / 话术：关联商品 + 播品系统查询 */
.product-pick-row { display: flex; gap: 8px; align-items: center; }
.product-pick-row select { flex: 1; min-width: 0; }
.product-pick-row .outline-button { flex: none; white-space: nowrap; }
/* 关联商品：通用 / 商品 单选 */
.radio-row { display: flex; gap: 16px; align-items: center; min-width: 0; }
.radio-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink); white-space: nowrap; }
.radio-opt input { accent-color: var(--accent, #5869d8); margin: 0; }
/* 商品删除弹窗：勾选删除项 */
.product-delete-modal .modal-card { width: 560px; max-width: 94vw; }
.delete-options { display: grid; gap: 10px; }
.del-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); white-space: normal; width: 100%; }
.del-opt:hover { border-color: var(--line-dark); }
.del-opt.disabled { opacity: .5; cursor: not-allowed; }
.del-opt input { margin-top: 2px; }
.del-opt span { display: grid; gap: 2px; min-width: 0; }
.del-opt strong { font-size: 13px; font-weight: 750; }
.del-opt em { font-style: normal; font-size: 11px; color: var(--muted-2); line-height: 1.5; }
.product-pick-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); min-width: 0; }
.product-pick-panel .product-pick-tools { display: flex; gap: 8px; align-items: center; }
.product-pick-panel .product-pick-tools .product-pick-search { flex: 1; min-width: 0; }
.product-pick-panel .product-pick-tools .outline-button { flex: none; white-space: nowrap; }
.product-pick-panel[hidden] { display: none; }
/* 商品素材：左列表右信息卡并排 */
.product-pick-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
/* 商品素材：可选商品列表（点击选中） */
.product-pick-list { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-pick-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: all .15s ease; text-align: left; }
.product-pick-item:hover { border-color: var(--line-dark); background: var(--surface-soft); }
.product-pick-item.on { border-color: var(--accent, #5869d8); background: var(--accent-soft, rgba(88, 105, 216, .08)); box-shadow: inset 0 0 0 1px var(--accent, #5869d8); }
.ppi-thumb { width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: #0e131c; display: grid; place-items: center; color: var(--muted-2); font-size: 12px; }
.ppi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ppi-main { flex: 1; min-width: 0; }
.ppi-main strong { display: block; font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppi-main em { font-style: normal; font-size: 10px; color: var(--muted-2); }
.ppi-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ppi-meta em { font-style: normal; font-size: 10px; color: var(--muted-2); }
.ppi-price { font-size: 12px; font-weight: 800; color: #e05c3d; }
.ppi-check { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; color: transparent; }
.product-pick-item.on .ppi-check { background: var(--accent, #5869d8); border-color: transparent; color: #fff; }
/* 商品信息卡：选择商品后加载展示 */
.product-info-slot { min-width: 0; }
.product-info-slot[hidden] { display: none; }
.product-info-slot .product-info-card { margin: 0; }
.product-info-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); min-width: 0; width: 100%; box-sizing: border-box; }
.product-info-card[hidden] { display: none; }
.product-info-head { display: flex; align-items: center; gap: 12px; }
.product-info-image { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: #0e131c; display: grid; place-items: center; color: var(--muted-2); }
.product-info-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-info-title { min-width: 0; }
.product-info-title strong { display: block; font-size: 13px; font-weight: 750; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-info-title span { font-size: 10px; color: var(--muted-2); }
.product-info-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; border-top: 1px dashed var(--line); padding-top: 10px; }
.pif-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pif-item span { flex: none; width: 30px; font-size: 10px; color: var(--muted-2); }
.pif-item strong { font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pif-item strong.pif-price { color: #e05c3d; font-weight: 800; }
.editor-preview { display: grid; gap: 10px; align-content: start; }
.editor-preview .asset-preview { height: 170px; border-radius: 11px; }
.editor-actions { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.editor-references { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 11px 13px; border-radius: 10px; background: var(--surface-soft); font-size: 11px; }
.reference-chip { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; font-weight: 650; }
.reference-chip.unused { background: var(--surface-2); color: var(--muted-2); }
.asset-reference-count.unused { color: #c98a2d; font-weight: 750; }
.cc-avatar-row { display: flex; gap: 8px; }
.cc-avatar-row select { flex: 0 0 46%; min-width: 0; }
.cc-avatar-row input { flex: 1; min-width: 0; }
/* 新建素材：已选文件预览（缩略图 / 视频 / 文档图标，点击打开） */
.file-pick-preview { margin-top: 8px; }
.file-pick-preview-list { display: flex; gap: 8px; flex-wrap: wrap; }
.file-pick-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: all .14s ease; }
.file-pick-item:hover { border-color: var(--accent); box-shadow: var(--ring); }
.file-pick-item img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; background: #0e131c; display: block; }
.file-pick-item .fpv-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 8px; background: #0e131c; color: #d4b483; font-size: 13px; font-weight: 800; }
.file-pick-item .fpv-icon.fpv-video { color: #e05c3d; font-size: 16px; }
.file-pick-item em { font-style: normal; font-size: 10px; color: var(--muted-2); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick-item { position: relative; }
.file-pick-edit { position: absolute; right: 5px; bottom: 24px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(88, 105, 216, .94); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; z-index: 2; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.file-pick-edit:hover { background: var(--accent); transform: scale(1.1); }
/* ---------- 素材库（素材组）样式 ---------- */
.asset-group-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #2ea574 45%, var(--line)); border-radius: 12px; background: #eaf8f2; font-size: 12px; color: #16693f; }
.asset-group-banner strong { font-weight: 800; }
.asset-group-banner .link-button { color: #16693f; text-decoration: underline; }
.ag-thumbs { display: flex; gap: 4px; }
.ag-thumb { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: #0e131c; color: #d4b483; font-size: 12px; font-weight: 800; border: 1px solid var(--line); }
.ag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-thumb.empty { color: var(--muted-2); border-style: dashed; }
.ag-file-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.ag-file-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ag-file-item img { width: 66px; height: 66px; object-fit: cover; border-radius: 8px; background: #0e131c; display: block; }
.ag-file-item .ag-video, .ag-file-item .ag-doc { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 8px; background: #0e131c; font-size: 14px; font-weight: 800; }
.ag-file-item .ag-video { color: #e05c3d; }
.ag-file-item .ag-doc { color: #d4b483; }
.ag-file-item em { font-style: normal; font-size: 10px; color: var(--muted-2); max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- 素材库平台 TAB（素材与内容一体管理） ---------- */
.lib-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.lib-tab { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .14s ease; }
.lib-tab:hover { border-color: var(--line-dark); color: var(--ink); }
.lib-tab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.lib-productbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lib-productbar .lib-label { color: var(--muted-2); font-size: 11px; font-weight: 700; }
.lib-productbar select { width: 280px; }
.lib-group-badge { padding: 4px 12px; border-radius: 999px; background: var(--surface-soft); color: var(--accent-dark); font-size: 11px; font-weight: 700; }
.lib-upload-panel { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.lib-grid { margin-top: 14px; }
.lib-content-panel { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lib-content-defaults { margin-bottom: 14px; padding: 10px 13px; border: 1px solid #f0c36d; border-radius: 10px; background: #fff7e6; color: #8a5a00; font-size: 12px; font-weight: 650; }
.lib-content-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lib-content-head strong { font-size: 15px; font-weight: 800; }
.lib-content-head span { color: var(--muted-2); font-size: 11px; }
.lib-content-panel .cc-actions { margin-top: 14px; }
.lib-mall-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lib-platform-chips { display: flex; gap: 8px; }
.lib-scope { display: flex; gap: 8px; }
.lib-scope-btn { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .14s ease; }
.lib-scope-btn:hover { border-color: var(--line-dark); color: var(--ink); }
.lib-scope-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.lib-scope-hint { margin: 0 0 12px; padding: 8px 12px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.6; }
.lib-mall-preview { margin-top: 18px; }
.lib-mall-preview .preview-frame { overflow: hidden; }
/* ---------- 聊天气泡编辑器 ---------- */
.ce-avatar-pick { display: flex; align-items: flex-start; gap: 12px; }
.ce-avatar-prev { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; background: var(--surface-soft); border: 1px solid var(--line); }
.ce-avatar-controls { display: grid; gap: 8px; flex: 1; min-width: 0; }
.ce-avatar-select { display: flex; gap: 8px; }
.ce-avatar-select select { flex: 0 0 46%; min-width: 0; }
.ce-avatar-select input { flex: 1; min-width: 0; }
.ce-avatar-upload { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 12px; border: 1px dashed var(--line-dark); border-radius: 999px; color: var(--accent-dark); font-size: 11px; font-weight: 650; cursor: pointer; }
.ce-avatar-upload input { display: none; }
.ce-list { display: grid; gap: 10px; max-height: 460px; overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.ce-row { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 10px; }
.ce-row.is-out { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ce-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ce-row-head select, .ce-row-head input { height: 28px; font-size: 11px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-dark); border-radius: 8px; padding: 2px 6px; }
.ce-side { flex: 0 0 74px; }
.ce-type { flex: 0 0 92px; }
.ce-time { flex: 0 0 110px; }
.ce-side-label { font-size: 11px; font-weight: 700; color: var(--muted); flex: 0 0 74px; }
.ce-actions { margin-left: auto; display: flex; gap: 2px; }
.ce-drag { cursor: grab; color: var(--muted-2); font-size: 13px; letter-spacing: -1px; user-select: none; padding: 0 2px; }
.ce-drag:hover { color: var(--accent-dark); }
.ce-row[draggable="true"] { cursor: grab; }
.ce-row.ce-dragging { opacity: .45; }
.ce-row.ce-drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.ce-row.ce-drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
.ce-row-body { margin-top: 8px; }
.ce-row-body textarea { width: 100%; }
.ce-media-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ce-media-thumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 7px; overflow: hidden; border: 1px dashed var(--line-dark); background: var(--surface); }
.ce-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-media-row input { flex: 0 0 180px; }
/* ---------- AI 生图 / AI 内容生成 ---------- */
.ai-gen-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px dashed var(--accent); border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ai-gen-btn:hover { background: var(--accent); color: #fff; }
.ai-gen-btn.sm { padding: 2px 8px; font-size: 10.5px; }
.ai-ref-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-ref-row input[type="file"] { flex: 1 1 220px; min-width: 0; }
.ai-ref-row input[type="text"] { flex: 1.4 1 240px; min-width: 0; }
.ai-ref-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ai-result { min-height: 120px; border: 1px dashed var(--line-dark); border-radius: 10px; display: grid; place-items: center; color: var(--muted-2); font-size: 12px; background: var(--surface-soft); overflow: hidden; }
.ai-result-ok { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; color: var(--muted); font-size: 12px; }
.ai-result-ok img { max-width: 260px; max-height: 260px; border-radius: 8px; border: 1px solid var(--line); }
.ai-result-warn { padding: 14px; color: var(--orange); font-size: 12px; text-align: center; }
.ce-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
/* 聊天记录编辑：左编辑器 + 右实时预览 */
.ce-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ce-editor-side { min-width: 0; }
.ce-preview-side { position: sticky; top: 12px; display: grid; gap: 8px; }
.ce-preview-label { font-size: 11px; font-weight: 750; color: var(--muted); }
.ce-preview { height: 620px; overflow: auto; border: 1px dashed var(--line-dark); border-radius: 12px; background: var(--surface-soft); }
.ce-preview .mobile-preview { width: 720px; transform: scale(.5); transform-origin: top left; }
/* 媒体轮播：下拉 + 引用素材名称 */
.media-ref-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.media-ref-layout select { width: 100%; min-width: 0; }
.media-ref-names { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); min-height: 46px; }
.media-ref-label { width: 100%; font-size: 11px; font-weight: 700; color: var(--muted); }
.media-ref-label em { font-style: normal; font-weight: 500; }
.media-ref-chip { padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent-dark); font-size: 11px; font-weight: 650; }
/* 轮播素材选择预览：按播放顺序显示缩略图 */
.media-ref-thumbs { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.media-ref-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); display: flex; align-items: center; justify-content: center; }
.media-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-ref-thumb.noimg img { display: none; }
.media-ref-thumb i { font-style: normal; color: #fff; background: rgba(0, 0, 0, .45); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.media-ref-thumb em { position: absolute; top: 3px; left: 3px; z-index: 2; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 999px; }
.media-ref-thumb b { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 9px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 头像 / 买家秀 复用已有图片下拉 */
.ce-reuse-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.ce-reuse-row span { flex: 0 0 auto; }
.ce-reuse-row select { flex: 1; min-width: 0; font-size: 11px; }
/* 商品列表：内容筛选 chips（勾选任一即显示，OR） */
.product-filter-row { margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-row-label { font-size: 11px; font-weight: 700; color: var(--muted); }
.product-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; transition: all .14s ease; }
.product-filter-chip input { accent-color: var(--accent); }
.product-filter-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.product-cover-chips { display: inline-flex; gap: 4px; }
/* 话术编辑弹窗：选用话术模板 */
.script-tpl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.script-tpl-row select { flex: 1; min-width: 0; }
/* 素材库 / 塑品场景 编辑：预览独立弹层窗口（不内嵌编辑页，避免被拉高 / 压矮） */
.lib-edit-layout { min-width: 0; }
.lib-edit-side { min-width: 0; }
.preview-overlay-modal .modal-card { width: 760px; max-width: 94vw; }
.lib-preview-overlay { overflow: auto; max-height: 82vh; display: flex; justify-content: center; align-items: flex-start; padding: 18px; background: var(--surface-soft); border: 1px dashed var(--line-dark); border-radius: 13px; }
.lib-preview-overlay .lib-preview-frame { border: 0; padding: 0; max-height: none; overflow: visible; background: transparent; display: flex; justify-content: center; align-items: flex-start; flex: 0 0 auto; min-width: 0; }
.lib-preview-overlay .mobile-preview { transform: none !important; min-height: 0 !important; margin: 0; flex: 0 0 auto; width: 430px; }
.lib-preview-overlay .mobile-preview.wide { width: min(100%, 880px); }
.lib-preview-overlay #ce-preview { height: auto; max-height: 76vh; border: 0; background: transparent; overflow: auto; width: 430px; }
.lib-preview-overlay .preview-frame { border: 0; background: transparent; padding: 0; display: flex; justify-content: center; }
.scene-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.scene-preview-panel { position: sticky; top: 80px; display: grid; gap: 10px; }
/* ---------- 预览二维码弹窗 ---------- */
.preview-qr-modal .modal-card { width: 560px; max-width: 94vw; }
.preview-qr-body { display: flex; gap: 20px; align-items: flex-start; }
.preview-qr-canvas { flex: 0 0 auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm, 0 1px 4px rgba(15, 23, 42, .08)); }
.preview-qr-canvas .qr-svg { display: block; width: 216px; height: 216px; }
.preview-qr-canvas .empty-state { width: 216px; height: 216px; display: grid; place-items: center; text-align: center; padding: 12px; box-sizing: border-box; }
.preview-qr-meta { flex: 1; min-width: 0; display: grid; gap: 10px; align-content: start; }
/* ---------- 图片编辑器 ---------- */
.img-editor-modal .modal-card { width: 1080px; max-width: 97vw; }
.img-editor-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.img-editor-tools .tool-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; transition: all .14s ease; }
.img-editor-tools .tool-btn:hover { border-color: var(--line-dark); color: var(--ink); }
.img-editor-tools .tool-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.img-editor-tools-sep { width: 1px; height: 22px; background: var(--line); margin: 0 8px; }
.img-editor-body { display: flex; gap: 16px; align-items: flex-start; }
.img-editor-stage { flex: 1; min-width: 0; min-height: 420px; max-height: 66vh; overflow: auto; display: grid; place-items: start center; padding: 16px; border: 1px dashed var(--line-dark); border-radius: 13px; background: var(--surface-soft); }
.img-editor-stage:has(.img-editor-canvas) { background: #1b2130; }
.img-editor-canvas { max-width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border-radius: 2px; cursor: crosshair; touch-action: none; }
.img-editor-side { width: 232px; flex: 0 0 232px; display: grid; gap: 10px; align-content: start; }
.img-side-field { display: grid; gap: 6px; }
.img-side-field > label { font-size: 11px; font-weight: 750; color: var(--muted); }
.img-side-field select, .img-side-field textarea { width: 100%; }
.img-side-field input[type="range"] { width: 100%; }
.img-editor-bottom { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.img-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.img-swatches .swatch { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.img-swatches .swatch.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.img-swatches input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; }
.img-zoom-row { display: flex; align-items: center; gap: 10px; }
.img-zoom-row input { flex: 1; }
.img-zoom-row span { font-size: 12px; font-weight: 750; color: var(--accent-dark); min-width: 44px; text-align: right; }
.img-grid-opts { display: flex; gap: 6px; }
.img-grid-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.img-grid-cell { padding: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; cursor: pointer; background: var(--surface); }
.img-grid-cell:hover { border-color: var(--accent); }
.img-grid-cell img { display: block; width: 100%; height: auto; }
.img-merge-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.img-merge-thumb { position: relative; width: 52px; height: 52px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.img-merge-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-merge-thumb b { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; cursor: pointer; }
.preview-label { color: var(--muted-2); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; }
.preview-frame { display: grid; place-items: center; padding: 16px; border: 1px dashed var(--line-dark); border-radius: 13px; background: var(--surface-soft); }
.preview-frame .mobile-preview { transform: scale(.62); transform-origin: top center; margin-bottom: -240px; }

/* ---------- 通用显隐 ---------- */
.hidden { display: none !important; }

/* ---------- 手机端（/?view=mobile） ---------- */
.mobile-shell { min-height: 100vh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; background: var(--surface); box-shadow: 0 0 60px rgba(0, 0, 0, .25); }
.mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; background: var(--surface); }
.mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.mobile-brand-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #5869d8, #7a5cd8); color: #fff; font-size: 12px; font-weight: 800; }
.mobile-top-actions { display: flex; align-items: center; gap: 10px; }
.mobile-top-actions .user-name-label { font-size: 11px; max-width: 90px; }
.mobile-session-label { font-size: 11px; color: var(--muted); }
.mobile-refresh { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .3s ease; }
.mobile-refresh:hover { color: var(--accent); border-color: var(--accent); }
.mobile-refresh:active { transform: rotate(180deg); }
.mobile-content { flex: 1; padding: 14px 14px 84px; }
.mobile-tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; display: flex; border-top: 1px solid var(--line); background: var(--surface); z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
.mobile-tab { flex: 1; padding: 13px 0 15px; background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; border-top: 2px solid transparent; }
.mobile-tab.on { color: var(--accent-dark); border-top-color: var(--accent); }
.mobile-page { display: grid; gap: 12px; }
.mobile-hero { padding: 6px 2px 2px; }
.mobile-hero h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.mobile-hero p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mobile-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mobile-stat { padding: 14px 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); text-align: center; cursor: pointer; }
.mobile-stat strong { display: block; font-size: 22px; font-weight: 800; color: var(--accent-dark); }
.mobile-stat span { font-size: 11px; color: var(--muted); }
.mobile-actions { display: grid; gap: 10px; }
.mobile-action { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: left; cursor: pointer; }
.mobile-action:hover { border-color: var(--line-dark); }
.mobile-action-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); font-size: 18px; }
.mobile-action div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mobile-action strong { font-size: 14px; font-weight: 750; }
.mobile-action span { font-size: 11px; color: var(--muted); line-height: 1.5; }
.mobile-action i { font-style: normal; color: var(--muted-2); font-size: 16px; }
.mobile-user { padding: 10px 4px; font-size: 11px; color: var(--muted); }
.mobile-user strong { color: var(--ink); }
.mobile-page-head { display: flex; align-items: baseline; justify-content: space-between; }
.mobile-page-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.mobile-page-head span { font-size: 11px; color: var(--muted); }
.mobile-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mobile-chip { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.mobile-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.mobile-list { display: grid; gap: 10px; }
.mobile-card { display: grid; gap: 8px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: left; cursor: pointer; }
.mobile-card:hover { border-color: var(--line-dark); }
.mobile-card-body { display: grid; gap: 3px; min-width: 0; }
.mobile-card-body strong { font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-card-body span { font-size: 11px; color: var(--muted); line-height: 1.5; }
.mobile-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mobile-add-btn { flex: none; margin-left: 8px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 750; cursor: pointer; }
.mobile-card-actions { display: flex; gap: 6px; }
.mobile-card-actions button { flex: 1; padding: 7px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.mobile-card-actions button:active { transform: scale(.98); }
.mobile-card-actions button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.mobile-card-actions button.danger { color: var(--red); }
.mobile-wizard { display: grid; gap: 10px; }
.mobile-wizard select { width: 100%; }
.mobile-file-list { display: grid; gap: 8px; }
.mobile-file-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.mobile-file-row div { display: grid; gap: 2px; min-width: 0; }
.mobile-file-row strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-file-row span:not(.ag-thumb) { font-size: 11px; color: var(--muted); }

/* ---------- 展示窗口（/?view=stage） ---------- */
.stage-shell { position: fixed; inset: 0; z-index: 60; background: #0b0e14; overflow: hidden; }
/* 关闭「模拟手机状态栏」时：隐藏各场景顶端的时间/信号/电量占位（电商 .mall-status、评论/轮播/独立站 .ph-status、聊天 .wx-status），移动展示窗口与展示端均生效 */
.stage-shell.hide-sb .ph-status, .stage-shell.hide-sb .mall-status, .stage-shell.hide-sb .wx-status,
.display-shell.hide-sb .ph-status, .display-shell.hide-sb .mall-status, .display-shell.hide-sb .wx-status { display: none; }
/* 隐藏模拟状态栏后，微信顶部预留状态栏占位（模拟真实 APP 界面，避免内容直接顶到屏幕顶端） */
.stage-shell.hide-sb .wx-top, .display-shell.hide-sb .wx-top { padding-top: 26px; background: #ededed; }
/* 移动端刘海屏安全区样式统一见文件末尾「移动端刘海屏安全区」一节（须置于各场景样式之后并提高特异性，级联才能生效） */
.stage-content { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.stage-content .app-stage { width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: flex-start; background: #0b0e14; }
.stage-content .mobile-preview { max-width: 100%; }
.stage-hud { position: fixed; top: 12px; right: 12px; left: auto; transform: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(10, 14, 20, .3); backdrop-filter: blur(6px); z-index: 80; opacity: .3; transition: opacity .2s ease; }
.stage-hud:hover { opacity: 1; }
.stage-hud-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); border: none; cursor: pointer; font-size: 13px; }
.stage-hud-btn:hover { background: rgba(255, 255, 255, .28); }
.stage-title { display: none; }
.stage-hud-spacer { width: 4px; }
/* 沉浸展示（iOS 主屏幕 standalone / 浏览器全屏）：隐藏舞台工具浮层，避免遮挡模拟 APP 界面；
   移动端（触摸设备）保留场景切换入口（底部 › 可展开图标），便于主播在手机上切换场景；桌面端全屏仍隐藏 */
.stage-shell.immersive .stage-hud { display: none; }
@media (hover: hover) and (pointer: fine) {
  .stage-shell.immersive .stage-scenes { display: none; }
}
.stage-scenes { position: fixed; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; z-index: 80; }
.stage-scenes-toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 14, 20, .5); color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); opacity: .55; transition: opacity .2s ease; }
.stage-scenes-toggle:hover { opacity: 1; }
.stage-scenes-bar { display: none; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(10, 14, 20, .55); backdrop-filter: blur(6px); }
.stage-scenes-bar.open { display: flex; }
.stage-scene-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; }
.stage-scene-btn.on { background: var(--accent); border-color: transparent; }
.stage-generic { position: absolute; inset: 0; }
.stage-generic-slide { position: absolute; inset: 0; display: none; place-items: center; }
.stage-generic-slide.on { display: grid; }
.stage-generic-slide img, .stage-generic-slide video { width: 100%; height: 100%; object-fit: contain; }
.stage-ios-hint { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5, 8, 12, .45); padding: 20px; }
.stage-ios-hint-card { width: min(320px, 92vw); padding: 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(14, 18, 26, .94); color: #fff; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.stage-ios-hint-card strong { display: block; margin-bottom: 8px; font-size: 14px; }
.stage-ios-hint-card p { margin: 0 0 14px; color: rgba(255, 255, 255, .75); font-size: 12px; line-height: 1.7; }
.stage-ios-hint-card b { color: #fff; }
.stage-ios-hint-card button { padding: 7px 22px; border-radius: 999px; border: none; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 750; cursor: pointer; }
/* 设置页：展示端场景配置 */
.stage-config { display: grid; gap: 8px; }
.stage-config-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }
.stage-config-option input { margin-top: 2px; accent-color: var(--accent); }
.stage-config-option div { display: grid; gap: 3px; }
.stage-config-option strong { font-size: 13px; }
.stage-config-option span { font-size: 11px; color: var(--muted); line-height: 1.5; }
.stage-config-list { display: grid; gap: 8px; }
.stage-config-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.stage-config-row strong { font-size: 13px; }
.stage-config-spacer { flex: 1; }

/* ---------- 认证遮罩 ---------- */
.auth-screen { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 28px; background: rgba(9, 13, 22, .72); backdrop-filter: blur(18px) saturate(1.2); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.auth-screen.visible { opacity: 1; pointer-events: auto; }
.auth-card { width: min(420px, 100%); padding: 34px 34px 24px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 22px; color: #f2f5fa; background: linear-gradient(155deg, #1e2635 0%, #10151f 100%); box-shadow: 0 30px 90px rgba(0, 0, 0, .45); transform: translateY(10px) scale(.98); transition: transform .22s ease; }
.auth-screen.visible .auth-card { transform: none; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.auth-brand strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: .02em; }
.auth-brand small { display: block; margin-top: 3px; color: #93a0b4; font-size: 10px; }
.auth-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.auth-card h1 { margin: 10px 0 8px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.auth-card > p { margin: 0 0 22px; color: #a9b4c6; font-size: 12px; line-height: 1.65; }
.auth-card .form-field label { color: #c5cfdd !important; }
.auth-card .form-field input { color: #17202e !important; background: #fff !important; border-color: transparent !important; }
.auth-submit { width: 100%; min-height: 42px; margin-top: 8px; }
.auth-close { width: 100%; margin-top: 13px; padding: 6px; border: 0; color: #8c98ac; background: transparent; font-size: 11px; transition: color .15s ease; }
.auth-close:hover { color: #fff; }
.auth-hint { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); color: #8c98ac; font-size: 10px; line-height: 1.6; }
.auth-hint.auth-error { color: #ff9d9d; border-top-color: rgba(255, 122, 122, .35); font-size: 11px; font-weight: 600; white-space: pre-wrap; }

/* ---------- Toast 通知 ---------- */
.toast-region { position: fixed; right: 24px; bottom: 22px; z-index: 90; display: grid; gap: 8px; }
.toast { min-width: 220px; max-width: 340px; padding: 11px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); font-size: 11.5px; font-weight: 600; animation: toast-in .2s ease; }
.toast.error { border-color: color-mix(in srgb, var(--red) 26%, transparent); color: var(--red); background: var(--red-soft); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 弹窗体系 ---------- */
.modal-root { position: fixed; inset: 0; z-index: 70; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9, 13, 22, .55); backdrop-filter: blur(8px); animation: modal-fade .18s ease; }
.modal-card { position: relative; width: min(880px, calc(100vw - 48px)); max-height: calc(100vh - 64px); margin: 32px auto; padding: 24px 26px; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); animation: modal-in .2s ease; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal-header h2 { margin: 5px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.modal-sub, .modal-subtitle { color: var(--muted); font-size: 11px; }
.modal-loading { display: grid; place-items: center; gap: 12px; min-height: 220px; color: var(--muted); font-size: 12px; }
.loading-spinner { width: 28px; height: 28px; border: 3px solid var(--line-dark); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 场景播放弹窗 ---------- */
.scene-play-modal { width: min(760px, 96vw); }
.scene-play-stage { display: flex; flex-direction: column; align-items: center; max-height: 64vh; overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.scene-play-stage .mobile-preview { width: min(100%, 460px); margin: 0 auto; min-height: 620px; border-width: 6px; box-shadow: var(--shadow-md); }
.scene-play-stage .wx-preview, .scene-play-stage .wa-preview, .scene-play-stage .ms-preview { height: 620px; }
.scene-play-frame { width: min(100%, 520px); animation: modal-in .35s ease both; }
.scene-play-assets { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; }
.scene-play-asset { display: grid; justify-items: center; gap: 5px; width: 72px; flex: 0 0 auto; }
.scene-play-asset img, .scene-play-asset video { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: 9px; }
.scene-play-asset .asset-placeholder, .scene-play-asset .asset-document { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: 20px; }
.scene-play-asset em { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; font-style: normal; }

/* ---------- 图片预览 ---------- */
.image-preview-stage { display: grid; place-items: center; min-height: 300px; max-height: 62vh; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #0e1424; }
.image-preview-stage img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.image-url-row { display: flex; gap: 10px; margin-top: 14px; }
.image-url-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-soft); font-family: var(--mono); font-size: 10.5px; }
.image-url-row input:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.image-url-row.compact-url { margin-top: 10px; }

/* ---------- 商品详情弹窗 ---------- */
.product-detail-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; margin-bottom: 18px; }
.product-detail-image { min-width: 0; }
.image-trigger { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, #e8ddd2, #c9b6a8); cursor: zoom-in; }
.image-trigger img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.image-trigger:hover img { transform: scale(1.05); }
.image-trigger > span:not(.image-zoom-hint) { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 30px; }
.image-zoom-hint { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgba(9, 13, 22, .72); font-size: 9px; font-weight: 700; }
.product-detail-summary { min-width: 0; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.detail-stat-grid > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.detail-stat-grid span { display: block; color: var(--muted-2); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.detail-stat-grid strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 12px; }
.detail-fields span { display: block; color: var(--muted-2); font-size: 9.5px; }
.detail-fields strong { font-size: 11.5px; font-weight: 700; }
.detail-description { margin: 0 0 10px; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.detail-section-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.detail-section-header h3 { font-size: 13px; font-weight: 800; }
.detail-section-header span { display: block; margin-top: 3px; color: var(--muted-2); font-size: 9.5px; }
.detail-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.detail-list-row + .detail-list-row { margin-top: 7px; }
.detail-list-row strong { display: block; font-size: 11.5px; font-weight: 700; }
.detail-list-row span { display: block; margin-top: 2px; color: var(--muted-2); font-size: 9.5px; }
.detail-list-row .detail-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.external-detail-section .external-json { margin-top: 4px; }
.external-source-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.external-source-row span { color: var(--muted-2); font-size: 9.5px; }
.external-source-row code { flex: 1; min-width: 0; overflow: hidden; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.external-json { max-height: 220px; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; color: #d8e1f0; background: #101827; font-family: var(--mono); font-size: 10px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }

/* ---------- 商品表格 ---------- */
.product-table-card { overflow-x: auto; }
.product-table { min-width: 1240px; }
.product-image-trigger { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.product-image-trigger .item-thumb { position: relative; }
.image-hover-icon { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: rgba(9, 13, 22, .72); font-size: 9px; opacity: 0; transition: opacity .15s ease; }
.product-image-trigger:hover .image-hover-icon { opacity: 1; }
.product-code-link { padding: 4px 9px; border: 1px solid var(--accent-soft); border-radius: 7px; color: var(--accent-ink); background: var(--accent-soft); font-family: var(--mono); font-size: 10px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.product-code-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.product-name-cell strong { display: block; font-size: 11.5px; font-weight: 700; }
.product-name-cell span { display: block; max-width: 300px; overflow: hidden; margin-top: 2px; color: var(--muted-2); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.product-image-column { width: 62px; }

/* ---------- 展示端 ---------- */
.display-shell { min-height: 100vh; background: var(--bg); }
.display-topbar { height: 58px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; color: var(--sidebar-ink); background: var(--sidebar-bg); }
.display-brand { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 850; letter-spacing: .11em; }
.display-brand-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 9px; }
.display-top-actions { display: flex; align-items: center; gap: 16px; color: var(--sidebar-muted); font-size: 10.5px; font-weight: 600; }
.display-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; color: #4ade80; background: rgba(34, 197, 94, .14); font-weight: 800; }
.display-exit { color: #c9d3e4; transition: color .15s ease; }
.display-exit:hover { color: #fff; }
.display-content { min-height: calc(100vh - 96px); padding: 36px 30px 64px; display: grid; place-items: start center; }
.display-bottom-status { position: fixed; right: 0; bottom: 0; left: 0; height: 36px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(10px); font-size: 10px; }

/* ---------- 手机场景预览 ---------- */
.mobile-preview { position: relative; width: min(100%, 430px); min-height: 650px; overflow: hidden; border: 8px solid #1c2331; border-radius: 24px; color: #333; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .18); font-size: 10px; }
.mobile-preview.wide { width: min(100%, 880px); border-width: 6px; border-radius: 16px; }
.mobile-status { height: 28px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: #303b4f; background: #fff; font-size: 9px; font-weight: 800; }

/* 商品页场景 */
.shop-preview { background: #fafafa; }
.shop-header { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; background: #fff; }
.shop-header strong { font-size: 13px; }
.shop-header span { color: #999; font-size: 16px; }
.shop-hero { height: 244px; position: relative; overflow: hidden; background: linear-gradient(135deg, #d1b69f, #6c5662); }
.shop-hero img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero .hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .4)); }
.shop-badge { position: absolute; left: 14px; bottom: 14px; padding: 5px 8px; border-radius: 5px; color: #fff; background: #dc5a43; font-size: 9px; font-weight: 800; }
.shop-dots { position: absolute; right: 15px; bottom: 16px; display: flex; gap: 4px; }
.shop-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.shop-dots span:first-child { background: #fff; }
.shop-copy { padding: 17px 16px 25px; }
.shop-kicker { color: #d55743; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.shop-copy h1 { margin: 8px 0 4px; font-size: 20px; letter-spacing: -.03em; }
.shop-subtitle { color: #777; font-size: 10px; }
.shop-rating { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: #a56d1c; font-size: 10px; }
.shop-rating span { color: #999; }
.shop-price { margin-top: 13px; color: #d8533f; font-size: 22px; font-weight: 850; }
.shop-options { display: flex; align-items: center; gap: 7px; margin-top: 13px; }
.shop-options span { padding: 7px 9px; border: 1px solid #ddd; border-radius: 6px; color: #666; font-size: 9px; }
.shop-options span.active { border-color: #d75843; color: #d75843; background: #fff5f2; }
.shop-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee; color: #555; font-size: 10px; line-height: 1.7; }
.shop-comments { margin-top: 15px; padding: 12px; border-radius: 9px; background: #f5f5f5; }
.shop-comments-title { font-size: 10px; font-weight: 800; }
.shop-comments p { margin: 8px 0 0; color: #737373; font-size: 9px; line-height: 1.55; }
.shop-cta { margin-top: 16px; padding: 12px; border-radius: 9px; color: #fff; background: #d75742; text-align: center; font-size: 10px; font-weight: 800; }

/* 聊天页场景 */
.chat-preview { background: #edf5f1; }
.chat-header { padding: 11px 13px; display: flex; align-items: center; gap: 9px; color: #fff; background: #1f9b79; }
.chat-avatar { width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: #c9ded7; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header strong { display: block; font-size: 11px; }
.chat-header span { display: block; margin-top: 3px; color: #c5eee0; font-size: 8px; }
.chat-body { min-height: 460px; padding: 18px 13px 24px; background: radial-gradient(circle at 5% 10%, rgba(255, 255, 255, .6), transparent 30%), #eaf4ef; }
.chat-date { width: fit-content; margin: 0 auto 19px; padding: 4px 7px; border-radius: 5px; color: #7c9a8f; background: #d6e9e1; font-size: 8px; }
.chat-message { max-width: 80%; margin-bottom: 11px; padding: 8px 10px; border-radius: 4px 11px 11px 11px; color: #33443f; background: #fff; box-shadow: 0 2px 4px rgba(28, 91, 72, .05); font-size: 10px; line-height: 1.45; }
.chat-message.outgoing { margin-left: auto; border-radius: 11px 4px 11px 11px; color: #fff; background: #21a07c; }
.chat-time { display: block; margin-top: 5px; color: rgba(0, 0, 0, .38); font-size: 8px; text-align: right; }
.chat-message.outgoing .chat-time { color: rgba(255, 255, 255, .65); }
.chat-input { display: flex; gap: 8px; padding: 10px; background: #f8fbfa; border-top: 1px solid #dceae3; }
.chat-input div { flex: 1; padding: 8px 9px; border-radius: 7px; color: #a4b8b1; background: #eaf1ee; font-size: 9px; }
.chat-input button { padding: 0 8px; border: 0; color: #1f9b79; background: transparent; font-size: 15px; }

/* 独立站场景 */
/* ---------- 独立站模板系统（10 套版式） ---------- */
.site-preview { display: flex; flex-direction: column; background: var(--s-bg, #f6f2ea); color: var(--s-ink, #25211b); font-size: 10px; }
.site-preview.s-font-serif .site-body h1, .site-preview.s-font-serif .site-price, .site-preview.s-font-serif .site-brand { font-family: Georgia, 'Times New Roman', serif; }
.site-preview.s-font-sans .site-body h1, .site-preview.s-font-sans .site-price, .site-preview.s-font-sans .site-brand { font-family: inherit; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 12%, transparent); }
.site-brand { font-size: 10.5px; font-weight: 850; letter-spacing: .16em; }
.site-nav { display: flex; gap: 11px; color: var(--s-sub); font-size: 8px; letter-spacing: .08em; }
.site-hero { position: relative; overflow: hidden; background: color-mix(in srgb, var(--s-ink) 8%, var(--s-bg)); }
.site-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-hero-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--s-radius); background: var(--s-accent); color: var(--s-bg); font-size: 7.5px; font-weight: 800; letter-spacing: .12em; }
.site-thumbs { display: none; gap: 8px; padding: 10px 18px 0; }
.site-thumbs span { width: 54px; height: 54px; overflow: hidden; border-radius: calc(var(--s-radius) / 2 + 2px); border: 1px solid color-mix(in srgb, var(--s-ink) 14%, transparent); }
.site-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-body { padding: 22px 20px 18px; }
.site-eyebrow { color: var(--s-accent); font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.site-body h1 { margin: 12px 0 8px; color: var(--s-ink); font-size: 27px; font-weight: 600; line-height: 1.08; }
.site-price { color: var(--s-ink); font-size: 15px; font-weight: 750; }
.site-desc { margin: 10px 0 0; color: var(--s-sub); font-size: 10.5px; line-height: 1.7; }
.site-cta { display: block; margin-top: 18px; padding: 12px 16px; border-radius: var(--s-radius); background: var(--s-ink); color: var(--s-bg); font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-align: center; }
.site-perks { display: flex; justify-content: center; gap: 14px; margin-top: 12px; color: var(--s-sub); font-size: 8px; }
.site-perks span:before { content: "· "; color: var(--s-accent); }
.site-note { margin-top: auto; padding: 14px 20px 16px; border-top: 1px solid color-mix(in srgb, var(--s-ink) 12%, transparent); color: var(--s-sub); font-size: 8.5px; line-height: 1.6; text-align: center; }
/* Atelier 画廊分屏 */
.site-atelier .site-hero { height: 300px; }
.site-atelier .site-body { padding-top: 24px; }
.site-atelier .site-cta { background: var(--s-ink); }
/* Noir 暗夜全屏 */
.site-noir .site-header { border-bottom-color: color-mix(in srgb, var(--s-ink) 16%, transparent); }
.site-noir .site-hero { height: 340px; }
.site-noir .site-hero img { opacity: .88; }
.site-noir .site-hero:after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(transparent, var(--s-bg)); }
.site-noir .site-body { margin-top: -46px; position: relative; z-index: 1; }
.site-noir .site-cta { background: var(--s-accent); color: #14100a; }
/* Editorial 杂志拼版 */
.site-editorial .site-hero { height: 260px; margin: 0 0 0 34px; }
.site-editorial .site-body h1 { margin-top: -38px; margin-left: -14px; padding: 6px 10px 6px 0; width: fit-content; background: var(--s-bg); font-size: 31px; font-style: italic; }
.site-editorial .site-cta { border: 2px solid var(--s-ink); background: transparent; color: var(--s-ink); }
/* Minimal 极简留白 */
.site-minimal .site-hero { height: 210px; margin: 18px 68px 0; }
.site-minimal .site-body { text-align: center; padding-top: 26px; }
.site-minimal .site-body h1 { font-size: 21px; font-weight: 500; letter-spacing: .04em; }
.site-minimal .site-eyebrow { color: var(--s-sub); }
.site-minimal .site-cta { border: 1px solid var(--s-ink); background: transparent; color: var(--s-ink); }
/* Gallery 画廊网格 */
.site-gallery .site-hero { height: 270px; }
.site-gallery .site-thumbs { display: flex; }
.site-gallery .site-cta { background: var(--s-accent); }
/* Boutique 玫瑰精品 */
.site-boutique .site-hero { height: 280px; margin: 12px 12px 0; border-radius: 22px; }
.site-boutique .site-hero-tag { left: auto; right: 12px; }
.site-boutique .site-body { text-align: center; }
.site-boutique .site-body h1 { font-style: italic; }
.site-boutique .site-cta { background: var(--s-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--s-accent) 35%, transparent); }
/* Mono 黑白硬朗 */
.site-mono .site-header { border-bottom: 2.5px solid var(--s-ink); }
.site-mono .site-hero { height: 290px; border-bottom: 2.5px solid var(--s-ink); }
.site-mono .site-hero-tag { border-radius: 0; background: var(--s-ink); color: var(--s-bg); }
.site-mono .site-body h1 { font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.site-mono .site-eyebrow { color: var(--s-ink); }
.site-mono .site-cta { border: 2.5px solid var(--s-ink); background: var(--s-ink); color: var(--s-bg); text-transform: uppercase; }
.site-mono .site-note { border-top: 2.5px solid var(--s-ink); }
/* Luxe 墨绿鎏金 */
.site-luxe .site-header { border-bottom-color: color-mix(in srgb, var(--s-accent) 35%, transparent); }
.site-luxe .site-hero { height: 310px; margin: 14px 14px 0; outline: 1px solid var(--s-accent); outline-offset: 5px; }
.site-luxe .site-body { text-align: center; }
.site-luxe .site-eyebrow { color: var(--s-accent); }
.site-luxe .site-price { color: var(--s-accent); }
.site-luxe .site-cta { background: transparent; border: 1px solid var(--s-accent); color: var(--s-accent); }
.site-luxe .site-note { border-top-color: color-mix(in srgb, var(--s-accent) 35%, transparent); }
/* Nordic 北欧浅灰 */
.site-nordic .site-hero { height: 250px; }
.site-nordic .site-body h1 { font-size: 23px; font-weight: 650; }
.site-nordic .site-body { border-top: 3px solid var(--s-accent); }
.site-nordic .site-cta { background: var(--s-accent); }
/* Vivid 渐变活力 */
.site-vivid .site-header { border-bottom: 0; }
.site-vivid .site-hero { height: 300px; margin: 0 12px; border-radius: 24px; background: linear-gradient(135deg, var(--s-accent), #ff5c8a); }
.site-vivid .site-hero img { mix-blend-mode: luminosity; opacity: .9; }
.site-vivid .site-body h1 { font-size: 28px; font-weight: 850; letter-spacing: -.02em; }
.site-vivid .site-eyebrow { background: linear-gradient(90deg, var(--s-accent), #ff5c8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-vivid .site-cta { background: linear-gradient(90deg, var(--s-accent), #ff5c8a); box-shadow: 0 8px 20px color-mix(in srgb, var(--s-accent) 32%, transparent); }

/* ---------- 模板库 / 模板编辑器 ---------- */
.stpl-modal .modal-card, .stpl-editor-modal .modal-card { width: min(1060px, 94vw); }
.stpl-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.stpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.stpl-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.stpl-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.stpl-preview { position: relative; height: 208px; overflow: hidden; background: #e9e7e2; pointer-events: none; }
.stpl-frame { position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(.34); transform-origin: top center; width: 430px; height: 614px; }
.stpl-frame .mobile-preview { width: 430px; min-height: 614px; border: 0; border-radius: 0; }
.stpl-info { display: grid; gap: 3px; padding: 12px 14px 6px; }
.stpl-info strong { font-size: 12px; }
.stpl-info span { color: var(--text-sub, #8a94a6); font-size: 10px; line-height: 1.5; }
.stpl-actions { display: flex; align-items: center; gap: 6px; padding: 10px 14px 12px; margin-top: auto; }
/* 提示词库卡片 */
.prompt-preview { padding: 2px 14px 6px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 提示词配置摘要：卡片显示 LLM 提示词拼接的上下文片段 */
.prompt-config-line { padding: 0 14px 8px; color: var(--accent); font-size: 9.5px; line-height: 1.5; }
.prompt-config-line::before { content: '⚙ 拼接：'; opacity: .7; }
/* 提示词编辑器：LLM 应用场景附加内容配置面板 */
.prompt-ctx-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prompt-ctx-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); cursor: pointer; }
.prompt-ctx-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.prompt-ctx-item input { margin-top: 3px; }
.prompt-ctx-item strong { display: block; font-size: 11.5px; }
.prompt-ctx-item em { color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.5; }
.prompt-ctx-item.field { padding: 6px 10px; }
.prompt-fields-box { margin-top: 8px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 8px; }
.prompt-fields-title { display: block; margin-bottom: 8px; color: var(--muted-2); font-size: 10px; font-weight: 700; }
/* 查看完成提示词弹窗：完整提示词展示区 */
.prompt-preview-body { display: grid; gap: 12px; min-width: 640px; max-width: 760px; }
.prompt-preview-text { width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.prompt-preview-modal .modal-card { max-width: 820px; }
/* 参考图管理（提示词库 → 参考图；AI 生图弹窗引用） */
.ref-card { padding: 0; overflow: hidden; }
.ref-card .stpl-info { padding: 8px 12px; }
.ref-thumb { height: 110px; overflow: hidden; display: grid; place-items: center; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-ref-lib { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ai-ref-lib-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.ai-ref-lib-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; }
.ref-pick-card { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-soft); padding: 0; cursor: pointer; transition: border-color .14s ease, transform .14s ease; }
.ref-pick-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-pick-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.stpl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.stpl-toolbar .filter-chip { margin: 0; }
.search-input { flex: 0 1 200px; min-width: 140px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; outline: none; transition: border-color .14s ease, box-shadow .14s ease; }
.search-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.search-input::placeholder { color: var(--muted-2); }
.stpl-editor { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.stpl-editor input[type="color"] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.stpl-editor input[type="range"] { width: 100%; accent-color: var(--accent); }
.stpl-live { position: sticky; top: 0; }
.stpl-live .preview-label { margin-bottom: 8px; color: var(--text-sub, #8a94a6); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.stpl-live-frame { height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #e9e7e2; pointer-events: none; }
.stpl-live-frame .mobile-preview { width: 430px; min-height: 650px; border: 0; border-radius: 0; transform: scale(.74); transform-origin: top left; }

/* ---------- 场景内容管理中心 ---------- */
.content-center-modal .modal-card { width: min(920px, 94vw); }
.cc-toolbar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.cc-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 2px; }
.cc-hint { margin-bottom: 14px; padding: 9px 12px; border-radius: 10px; background: var(--surface-soft); color: var(--text-sub, #8a94a6); font-size: 11px; }
.cc-import-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.cc-import-row .outline-button { flex-shrink: 0; margin-bottom: 1px; }
.cc-json-panel { display: none; margin-top: 12px; }
.cc-json-panel.open { display: block; }
.cc-json-panel textarea { width: 100%; font-family: var(--mono, monospace); font-size: 11px; }
.cc-json-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }



/* 直播弹幕 */
.barrage-layer { position: absolute; top: 48px; left: 0; right: 0; height: 118px; overflow: hidden; pointer-events: none; z-index: 6; }
.barrage-item { position: absolute; left: 100%; white-space: nowrap; padding: 3px 12px; border-radius: 999px; color: #fff; background: rgba(20, 26, 40, .72); box-shadow: 0 3px 10px rgba(15, 23, 42, .25); font-size: 10px; animation: barrageMove 9s linear infinite; }
@keyframes barrageMove { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 480px)); } }
.barrage-picker { display: flex; flex-wrap: wrap; gap: 8px; max-height: 136px; overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.barrage-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 10.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.barrage-chip:has(input:checked) { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); font-weight: 700; }
.barrage-chip input { margin: 0; accent-color: var(--accent); }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .live-layout, .script-layout { grid-template-columns: 1fr; }
  .script-detail, .scene-preview-panel { position: static; }
}
@media (max-width: 860px) {
  .topbar { padding: 0 16px; }
  .brand-subtitle, .connection-pill, .theme-trigger span:not(.theme-trigger-dot):not(.theme-chevron) { display: none; }
  .sidebar { width: 200px; flex-basis: 200px; }
  .main-content { padding: 20px 18px 48px; }
  .page-heading { flex-direction: column; align-items: flex-start; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-pick-body { grid-template-columns: 1fr; }
  .product-detail-hero { grid-template-columns: 1fr; }
  .scene-editor-grid { grid-template-columns: 1fr; }
  .block-edit-row { grid-template-columns: 30px minmax(0, 1fr) 34px; }
  .block-edit-row textarea { grid-column: 1 / -1; }
  .modal-card { width: calc(100vw - 24px); margin: 12px auto; padding: 18px; }
}

/* ============================================================
   App 1:1 场景复刻（淘宝 / 天猫 / 京东 / 抖店 / WhatsApp / 微信）
   ============================================================ */

/* ---------- 全屏展示舞台 ---------- */
.display-shell.app-full .display-topbar, .display-shell.app-full .display-bottom-status { display: none; }
.display-shell.app-full .display-content { padding: 0; display: block; min-height: 100vh; }
.app-stage { position: fixed; inset: 0; z-index: 45; overflow-y: auto; background: #000; display: flex; justify-content: center; }
.app-stage .mobile-preview { width: min(430px, 100vw); max-width: 100vw; min-height: 100%; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; }
.app-stage .mall-hero { height: auto; }
.app-exit { position: fixed; top: 10px; right: 12px; z-index: 60; padding: 5px 13px; border-radius: 999px; color: #fff; background: rgba(10, 14, 22, .45); backdrop-filter: blur(6px); font-size: 10px; font-weight: 650; opacity: .3; transition: opacity .2s ease; }
.app-exit:hover { opacity: 1; }

/* ---------- 电商商品页（平台像素级复刻） ---------- */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic svg { width: 100%; height: 100%; display: block; }
.mall-preview { --mall-accent: #ff5000; --mall-grad: linear-gradient(90deg, #ff9400, #ff5000); --mall-cart: linear-gradient(90deg, #ffc400, #ff9400); background: #f2f2f2; color: #1c1c1c; font-size: 10px; }
.mall--tmall { --mall-accent: #ff0036; --mall-grad: linear-gradient(90deg, #ff4d6a, #ff0036); --mall-cart: linear-gradient(90deg, #ff7a45, #ff0036); }
.mall--jd { --mall-accent: #e1251b; --mall-grad: linear-gradient(90deg, #f10215, #ff4f18); --mall-cart: #202020; }
.mall--doudian { --mall-accent: #fe2c55; --mall-grad: linear-gradient(90deg, #ff5c39, #fe2c55); --mall-cart: #ffe9ee; }
.mall-status { height: 26px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; position: relative; background: #fff; color: #1c1c1c; }
.mall-time { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.mall-signal { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; }
.mall-signal .ic { width: 11px; height: 11px; }
/* 设备系统状态栏：iOS 刘海 / Android 打孔 + 图标 */
.sb-icons { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; }
.sb-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 118px; height: 16px; background: #000; border-radius: 0 0 14px 14px; z-index: 6; }
.sb-hole { position: absolute; top: 5px; left: 9px; width: 9px; height: 9px; border-radius: 50%; background: #000; z-index: 6; }
.mall-bars { display: inline-flex; align-items: flex-end; gap: 1.2px; height: 9px; }
.mall-bars:before, .mall-bars:after, .mall-bars i { content: ""; display: none; }
.mall-bars { width: 12px; background: linear-gradient(to top, currentColor 0 25%, transparent 25%) 0 100% / 2.4px 25% no-repeat, linear-gradient(to top, currentColor 0 50%, transparent 50%) 3.2px 100% / 2.4px 50% no-repeat, linear-gradient(to top, currentColor 0 75%, transparent 75%) 6.4px 100% / 2.4px 75% no-repeat, linear-gradient(to top, currentColor 0 100%, transparent 100%) 9.6px 100% / 2.4px 100% no-repeat; }
.mall-batt { position: relative; width: 18px; height: 9px; flex: 0 0 18px; border: 1.4px solid currentColor; border-radius: 2.5px; }
.mall-batt:before { content: ""; position: absolute; top: 50%; right: -3.6px; transform: translateY(-50%); width: 2px; height: 4.5px; border-radius: 0 1.5px 1.5px 0; background: currentColor; }
.mall-batt:after { content: ""; position: absolute; top: 1.4px; left: 1.4px; bottom: 1.4px; right: 4px; background: currentColor; border-radius: 1px; }
/* ---------- 通用手机状态栏（评论页 / 独立站 / 媒体轮播） ---------- */
.ph-status { height: 26px; flex: 0 0 26px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; position: relative; background: #fff; color: #1c1c1c; }
.ph-status .ph-time { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.ph-status .ph-signal { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; }
.ph-status .mall-bars { display: inline-block; }
.rv-page .ph-status { background: #fff; color: #1c1c1c; }
.site-preview .ph-status { background: var(--s-bg, #f6f2ea); color: var(--s-ink, #25211b); }
.ms-preview .ph-status { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); color: #fff; }
.ms-preview .ph-status .mall-batt { border-color: rgba(255, 255, 255, .92); }
.ms-preview .ph-status .mall-batt:before, .ms-preview .ph-status .mall-batt:after { background: rgba(255, 255, 255, .92); }
.mall-nav { height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 12px; background: #fff; position: sticky; top: 0; z-index: 4; }
.mall-nav-ic { display: grid; place-items: center; color: #2b2b2b; }
.mall-nav-ic .ic { width: 19px; height: 19px; }
.mall-nav-tabs { flex: 1; display: flex; justify-content: center; gap: 22px; }
.mall-nav-tabs b { font-size: 11.5px; font-weight: 500; color: #4d4d4d; padding: 4px 0; position: relative; }
.mall-nav-tabs b.on { font-weight: 800; color: #1c1c1c; }
.mall-nav-tabs b.on:after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 18px; height: 2.5px; border-radius: 999px; background: var(--mall-accent); }
.mall-jd-sub { display: flex; gap: 14px; padding: 7px 14px; background: linear-gradient(90deg, #e1251b, #ff5f2e); color: rgba(255, 255, 255, .92); font-size: 8.5px; }
.mall-jd-sub span { position: relative; padding-left: 11px; }
.mall-jd-sub span:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; border: 1.2px solid rgba(255, 255, 255, .9); }
.mall-search { flex: 1; display: flex; align-items: center; gap: 6px; height: 29px; padding: 0 12px; border-radius: 999px; background: #f2f3f5; color: #9a9a9a; font-size: 10px; }
.mall-search .ic { width: 12px; height: 12px; color: #b5b5b5; }
.mall-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mall-hero { position: relative; aspect-ratio: 1 / 1; height: auto; background: linear-gradient(135deg, #e8e0d8, #c3b3a4); overflow: hidden; }
.mall-hero img { width: 100%; height: 100%; object-fit: cover; }
/* 电商场景主图轮播：多图 track 铺满 hero，划动 / 自动轮播切换 */
.mall-hero .ms-track { position: absolute; inset: 0; width: 100%; height: 100%; }
.mall-hero .ms-slide { background: transparent; }
.mall-hero .ms-slide img { width: 100%; height: 100%; object-fit: cover; }
.mall-hero-index { position: absolute; right: 12px; bottom: 10px; padding: 2px 7px; border-radius: 4px; color: #fff; background: rgba(0, 0, 0, .38); font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.mall-hero-badge { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 5px; color: #fff; background: var(--mall-grad); font-size: 9px; font-weight: 800; }
.mall-pricebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px 10px; background: #fff; }
.mall-pricebar.band { background: linear-gradient(90deg, #e1251b, #ff5f2e); color: #fff; }
.mall-price { display: flex; align-items: baseline; gap: 5px; color: var(--mall-accent); }
.mall-pricebar.band .mall-price { color: #fff; }
.mall-price em { font-style: normal; font-size: 11px; font-weight: 800; }
.mall-price strong { font-size: 23px; font-weight: 850; letter-spacing: -.02em; }
.mall-price-tag { align-self: center; padding: 2px 6px; border-radius: 3.5px; color: #fff; background: var(--mall-grad); font-size: 8px; font-weight: 800; }
.mall-pricebar.band .mall-price-tag { color: var(--mall-accent); background: #fff; }
.mall-price-orig { align-self: center; color: #b9b9b9; font-size: 9px; text-decoration: line-through; }
.mall-pricebar.band .mall-price-orig { color: rgba(255, 255, 255, .72); }
.mall-sold { color: #9a9a9a; font-size: 9px; }
.mall-band-side { display: grid; justify-items: end; color: #fff; }
.mall-band-side strong { font-size: 13px; font-weight: 850; }
.mall-band-side span { font-size: 8px; opacity: .85; }
.mall-title { display: flex; align-items: flex-start; gap: 6px; padding: 2px 14px 11px; background: #fff; }
.mall-title h1 { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.mall-title-tag { margin-top: 3px; padding: 1.5px 5px; border-radius: 3px; color: #fff; background: var(--mall-grad); font-size: 8px; font-weight: 800; white-space: nowrap; }
.mall-coupon { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-top: 1px solid #f6f6f6; font-size: 10px; }
.mall-coupon-label { color: #9a9a9a; flex: 0 0 30px; }
.mall-coupon-tags { flex: 1; display: flex; gap: 6px; }
.mall-coupon-tags em { padding: 1.5px 7px; border-radius: 3px; color: var(--mall-accent); background: color-mix(in srgb, var(--mall-accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--mall-accent) 30%, #fff); font-size: 8.5px; font-style: normal; font-weight: 700; }
.mall-coupon .ic, .mall-row > .ic { width: 11px; height: 11px; color: #c4c4c4; }
.mall-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border-top: 1px solid #f6f6f6; font-size: 10px; }
.mall-row-label { color: #9a9a9a; flex: 0 0 30px; }
.mall-row-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2b2b2b; }
.mall-row-value.dots { display: flex; gap: 12px; }
.mall-row-value.dots span { position: relative; padding-left: 11px; }
.mall-row-value.dots span:before { content: "✓"; position: absolute; left: 0; color: var(--mall-accent); font-size: 9px; font-weight: 800; }
.mall-row-sep { display: inline-block; width: 1px; height: 9px; margin: 0 7px; background: #e3e3e3; vertical-align: -1px; }
.mall-block { margin-top: 8px; padding: 12px 14px; background: #fff; }
.mall-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mall-block-head strong { font-size: 11px; font-weight: 800; }
.mall-block-more { display: flex; align-items: center; gap: 3px; color: var(--mall-accent); font-size: 9px; font-weight: 700; }
.mall-block-more .ic { width: 10px; height: 10px; }
.mall-review-tags { display: flex; gap: 7px; margin-bottom: 11px; flex-wrap: wrap; }
.mall-review-tags span { padding: 4px 9px; border-radius: 999px; background: #fdf0ec; color: #b4604a; font-size: 8.5px; }
.mall--jd .mall-review-tags span { background: #fdeceb; color: #c22f26; }
.mall--tmall .mall-review-tags span { background: #ffeaf0; color: #d11a48; }
.mall--doudian .mall-review-tags span { background: #ffeaf0; color: #d12b50; }
.mall-review { display: flex; gap: 8px; margin-bottom: 10px; }
.mall-review:last-child { margin-bottom: 0; }
.mall-review-avatar { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: linear-gradient(135deg, #c8d3e0, #8ba0b8); }
.mall-review-avatar.a2 { background: linear-gradient(135deg, #ecd2bd, #c08e63); }
.mall-review strong { display: block; font-size: 9px; font-weight: 700; color: #555; }
.mall-review p { margin-top: 3px; color: #333; font-size: 9.5px; line-height: 1.55; }
.mall-store-head { display: flex; align-items: center; gap: 9px; }
.mall-store-logo { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 9px; color: #fff; background: var(--mall-grad); font-size: 15px; font-weight: 800; }
.mall-store-info { flex: 1; min-width: 0; }
.mall-store-info strong { display: block; font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mall-store-info span { color: #9a9a9a; font-size: 8.5px; }
.mall-store-follow { padding: 5px 0; width: 44px; border: 0; border-radius: 999px; color: #fff; background: var(--mall-grad); font-size: 9px; font-weight: 700; }
.mall-store-btn { padding: 5px 0; width: 62px; border: 1px solid var(--mall-accent); border-radius: 999px; background: #fff; color: var(--mall-accent); font-size: 9px; font-weight: 700; }
.mall-store-scores { display: flex; margin-top: 11px; padding-top: 10px; border-top: 1px solid #f6f6f6; }
.mall-store-scores span { flex: 1; color: #9a9a9a; font-size: 8.5px; text-align: center; }
.mall-store-scores b { color: var(--mall-accent); font-weight: 800; }
.mall-detail-title { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px; color: #9a9a9a; font-size: 10px; font-weight: 700; }
.mall-detail-title span { width: 46px; height: 1px; background: #e0e0e0; }
.mall-detail-text { padding: 0 14px 16px; color: #555; font-size: 10px; line-height: 1.8; }

.mall-bottombar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #efefef; }
.mall-bb-icons { display: flex; gap: 15px; padding: 0 2px; }
.mall-bb-icons span { display: grid; justify-items: center; gap: 2px; color: #555; font-size: 7.5px; }
.mall-bb-icons .ic { width: 17px; height: 17px; }
.mall-bb-cart, .mall-bb-buy { flex: 1; height: 35px; border: 0; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.mall-bb-cart { color: var(--mall-accent); background: color-mix(in srgb, var(--mall-accent) 9%, #fff); border: 1px solid var(--mall-accent); }
.mall-bb-buy { background: var(--mall-grad); }
.mall--jd .mall-bb-cart { background: #202020; color: #fff; border-color: #202020; }

/* ---------- 平台独有区块 ---------- */
/* 淘宝：限时抢购 */
.mall-flash { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: linear-gradient(90deg, #ff7a2d, #ff5000); color: #fff; }
.mall-flash-title { font-size: 9.5px; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
.mall-flash-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.mall-flash-bar i { display: block; height: 100%; border-radius: 999px; background: #fff; }
.mall-flash-count { font-size: 8.5px; font-weight: 700; white-space: nowrap; }
/* 天猫：品牌认证 */
.mall-brand { display: flex; align-items: center; gap: 6px; padding: 8px 14px; margin-top: 8px; background: linear-gradient(90deg, #fff3f5, #ffe9ee); color: #b2224b; font-size: 9.5px; font-weight: 750; }
.mall-brand .ic { width: 13px; height: 13px; color: #ff0036; }
/* 京东：秒杀倒计时 */
.mall-seckill { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: #fff; color: #e1251b; }
.mall-seckill-title { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 850; }
.mall-seckill-title:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e1251b; }
.mall-seckill-clock { display: flex; align-items: center; gap: 3px; font-size: 8px; color: #999; }
.mall-seckill-clock b { min-width: 16px; padding: 2px 3px; border-radius: 3px; color: #fff; background: #e1251b; font-size: 8.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
/* 抖店：抢购社会证明 */
.mall-hurry { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; margin-top: 8px; background: #ffe9ee; color: #d12b50; }
.mall-hurry span { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; }
.mall-hurry-dot { width: 6px; height: 6px; border-radius: 50%; background: #fe2c55; box-shadow: 0 0 0 3px rgba(254, 44, 85, .18); }
.mall-hurry b { padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #fe2c55, #ff5c39); font-size: 8.5px; font-weight: 800; white-space: nowrap; }
body[data-theme="obsidian"] .mall-hurry { background: #33201f; }

/* ---------- WhatsApp 聊天页 1:1 ---------- */
.wa-preview { background: #ece5dd; color: #111b21; font-size: 10px; }
.wa-top { position: sticky; top: 0; z-index: 4; }
.wa-status { height: 22px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; position: relative; background: #008069; color: #fff; }
.wa-time { font-size: 0.95em; font-weight: 800; }
.wa-signal { display: flex; align-items: center; gap: 5px; font-size: 0.9em; font-weight: 700; }
.wa-signal .ic { width: 10px; height: 10px; }
.wa-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px 7px 4px; background: #008069; color: #fff; }
.wa-back { display: flex; align-items: center; color: #fff; }
.wa-back .ic { width: 21px; height: 21px; }
.wa-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; overflow: hidden; border-radius: 50%; background: #dfe5e7; color: #7c8a92; font-size: 1.3em; font-weight: 700; }
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wa-peer { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.wa-peer strong { font-size: 1.22em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-peer span { font-size: 0.82em; color: rgba(255, 255, 255, .82); }
.wa-actions { display: flex; gap: 17px; padding-right: 4px; }
.wa-actions .ic { width: 18px; height: 18px; }
.wa-preview, .wx-preview { display: flex; flex-direction: column; height: 650px; font-size: 15px; }
.app-stage .wa-preview, .app-stage .wx-preview { height: 100vh; font-size: 15px; }
.wa-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 10px 18px; background-color: #ece5dd; background-image: radial-gradient(rgba(17, 27, 33, .06) .9px, transparent 1.2px), radial-gradient(rgba(17, 27, 33, .05) .8px, transparent 1.1px); background-size: 26px 26px, 15px 15px; background-position: 0 0, 8px 12px; }
.wa-body:after { content: ""; display: block; clear: both; }
.wa-date { width: fit-content; margin: 0 auto 10px; padding: 5px 12px; border-radius: 7.5px; background: #e1f3fb; color: #54656f; font-size: 0.78em; font-weight: 700; letter-spacing: .05em; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-notice { width: fit-content; max-width: 90%; margin: 0 auto 13px; padding: 7px 11px; border-radius: 7.5px; background: #fdf3c6; color: #54656f; font-size: 0.82em; line-height: 1.5; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-notice b { font-weight: 400; }
.wa-msg { position: relative; max-width: 78%; margin-bottom: 7px; padding: 6px 7px 6px 9px; border-radius: 7.5px; background: #fff; color: #111b21; font-size: 1.05em; line-height: 1.45; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); clear: both; }
.wa-msg.in { float: left; border-top-left-radius: 0; }
.wa-msg.out { float: right; border-top-right-radius: 0; background: #d9fdd3; }
.wa-msg.in:before { content: ""; position: absolute; top: 0; left: -8px; border: 4px solid transparent; border-top: 6px solid #fff; border-right: 6px solid #fff; }
.wa-msg.out:before { content: ""; position: absolute; top: 0; right: -8px; border: 4px solid transparent; border-top: 6px solid #d9fdd3; border-left: 6px solid #d9fdd3; }
.wa-msg-text { display: inline; }
.wa-msg-time { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 7px 0 0 7px; color: #667781; font-size: 0.72em; }
.wa-ticks { color: #53bdeb; font-style: normal; font-size: 0.85em; letter-spacing: -1.5px; font-weight: 700; }
.wa-msg.media { padding: 3px; max-width: 62%; }
.wa-msg-media { position: relative; display: block; overflow: hidden; border-radius: 6px; cursor: zoom-in; }
.wa-msg-media img { width: 100%; display: block; user-select: none; }
.wa-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.wa-play svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }
.wa-msg-meta { position: absolute; right: 5px; bottom: 4px; padding: 1px 6px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .38); font-size: 0.72em; font-weight: 500; }
.wa-inputbar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 7px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: #f0f2f5; }
.wa-input { flex: 1; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .1); }
.wa-input .ic { width: 19px; height: 19px; color: #8696a0; }
.wa-input-hint { flex: 1; color: #8696a0; font-size: 1.05em; }
.wa-attach { display: flex; gap: 13px; }
.wa-attach .ic { width: 17px; height: 17px; color: #8696a0; }
.wa-mic { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 50%; background: #008069; color: #fff; box-shadow: 0 2px 5px rgba(11, 20, 26, .25); }
.wa-mic .ic { width: 17px; height: 17px; }


/* ---------- 微信聊天页 1:1 ---------- */
.wx-preview { background: #ededed; color: #111; }
.wx-top { position: sticky; top: 0; z-index: 4; }
.wx-status { height: 24px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; position: relative; background: #ededed; color: #111; }
.wx-status .wx-time { font-size: 0.95em; font-weight: 800; color: #111; }
.wx-signal { display: flex; align-items: center; gap: 5px; font-size: 0.9em; font-weight: 700; }
.wx-signal .ic { width: 10px; height: 10px; }
/* 微信头部：返回与更多分居两侧，昵称绝对居中（与真实微信一致） */
.wx-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 10px; background: #ededed; border-bottom: 1px solid #d8d8d8; }
.wx-header strong { position: absolute; left: 50%; transform: translateX(-50%); max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15em; font-weight: 700; }
.wx-back { display: flex; color: #111; flex: 0 0 40px; }
.wx-back .ic { width: 20px; height: 20px; }
.wx-more { display: flex; color: #111; flex: 0 0 40px; justify-content: flex-end; }
.wx-more .ic { width: 18px; height: 18px; }
.wx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 20px; }
.wx-body .wx-time { margin: 0 auto 13px; width: fit-content; color: #b2b2b2; font-size: 0.85em; }
.wx-msg { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.wx-msg.out { flex-direction: row-reverse; }
.wx-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; overflow: hidden; border-radius: 5.5px; background: linear-gradient(135deg, #d9e4f0, #a9bcd4); color: #4c6076; font-size: 1.1em; font-weight: 700; }
.wx-avatar.me { background: linear-gradient(135deg, #ffdfb0, #f0a84e); color: #7c4a08; }
.wx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wx-bubble { position: relative; max-width: 68%; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, .05); border-radius: 4.5px; background: #fff; color: #111; font-size: 1.1em; line-height: 1.5; }
.wx-msg.in .wx-bubble:before { content: ""; position: absolute; top: 11px; left: -4.5px; width: 9px; height: 9px; background: #fff; border-left: 1px solid rgba(0, 0, 0, .05); border-bottom: 1px solid rgba(0, 0, 0, .05); transform: rotate(45deg); }
.wx-msg.out .wx-bubble { background: #95ec69; }
.wx-msg.out .wx-bubble:before { content: ""; position: absolute; top: 11px; right: -4.5px; width: 9px; height: 9px; background: #95ec69; transform: rotate(45deg); }
.wx-media { position: relative; display: block; width: 150px; max-width: 46vw; overflow: hidden; border-radius: 6px; cursor: zoom-in; }
.wx-media img { display: block; width: 100%; user-select: none; }
.wx-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.wx-play svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }
.wx-dur { position: absolute; right: 6px; bottom: 5px; color: #fff; font-size: 0.75em; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.wx-inputbar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: #f7f7f7; border-top: 1px solid #e2e2e2; }
.wx-inputbar > .ic { width: 25px; height: 25px; color: #7a7a7a; }
.wx-input { flex: 1; height: 36px; border-radius: 8px; background: #fff; }

/* ---------- 全屏媒体轮播场景 ---------- */
.ms-preview { position: relative; display: flex; flex-direction: column; height: 650px; overflow: hidden; background: #000; }
.app-stage .ms-preview { height: 100vh; }
.ms-track { flex: 1; display: flex; min-height: 0; min-width: 0; touch-action: none; cursor: grab; }
.ms-track:active { cursor: grabbing; }
.ms-track.vertical { flex-direction: column; }
.ms-slide { position: relative; flex: 0 0 100%; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #000; }
.ms-slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.ms-slide video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.ms-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); pointer-events: none; transition: opacity .2s ease; }
.ms-play svg { width: 24px; height: 24px; }
.ms-slide.playing .ms-play { opacity: 0; }
.ms-slide.fake.playing img { filter: brightness(.82); }
.ms-counter { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; padding: 4px 11px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .45); font-size: 9px; font-variant-numeric: tabular-nums; pointer-events: none; }

/* ---------- 评论区（可交互） ---------- */
.mall-reviews .mall-block-head { cursor: pointer; }
.mall-reviews .mall-block-head:hover strong { color: var(--mall-accent); }
.rv-page { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #f5f5f5; transform: translateX(102%); transition: transform .28s cubic-bezier(.32, .72, .28, 1); }
.rv-page.open { transform: translateX(0); }
.rv-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #eee; }
.rv-back { display: grid; place-items: center; width: 26px; height: 26px; color: #2b2b2b; cursor: pointer; }
.rv-back .ic { width: 19px; height: 19px; }
.rv-page-head strong { font-size: 11.5px; font-weight: 800; color: #1c1c1c; }
.rv-rate { font-size: 8.5px; color: #999; }
.rv-tabs { display: flex; gap: 8px; padding: 9px 12px; background: #fff; }
.rv-tab { padding: 4px 11px; border: 0; border-radius: 999px; background: #f2f2f2; color: #666; font-size: 9px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; }
.rv-tab.on { background: var(--mall-accent); color: #fff; }
.rv-list { flex: 1; overflow-y: auto; padding: 10px 12px 16px; display: grid; gap: 10px; align-content: start; }
.rv-item { padding: 11px 12px; border-radius: 10px; background: #fff; }
.rv-page.filter-media .rv-item:not(.has-media) { display: none; }
.rv-item-head { display: flex; align-items: center; gap: 8px; }
.rv-avatar { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 26px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; }
.rv-avatar.a1 { background: linear-gradient(135deg, #ff9a5a, #ff5000); }
.rv-avatar.a2 { background: linear-gradient(135deg, #7aa8ff, #4a6fd8); }
.rv-avatar.a3 { background: linear-gradient(135deg, #6ecf9a, #1e9b78); }
.rv-item-meta { flex: 1; display: grid; gap: 2px; min-width: 0; }
.rv-item-meta strong { font-size: 9.5px; color: #333; }
.rv-stars { display: flex; gap: 1px; }
.rv-stars i { color: #ddd; font-size: 8.5px; font-style: normal; }
.rv-stars i.on { color: #ffb400; }
.rv-item-date { color: #bbb; font-size: 8px; }
.rv-item-spec { margin-top: 7px; color: #aaa; font-size: 8px; }
.rv-item-text { margin-top: 4px; color: #333; font-size: 9.5px; line-height: 1.6; }
.rv-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.rv-thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #f0f0f0; cursor: zoom-in; }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-thumb.is-video { cursor: pointer; }
.rv-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .22); }
.rv-thumb-play svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.rv-item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; color: #aaa; font-size: 8px; }
.rv-useful { color: #999; }
.rv-viewer { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; transition: opacity .2s ease; }
/* 展示窗口（?view=stage）：买家秀查看器铺满整个视口，图片居中完整展示，不被超高场景裁剪 */
.stage-content .rv-viewer { position: fixed; inset: 0; z-index: 90; }
.rv-viewer.open { opacity: 1; }
.rv-swipe { display: flex; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.rv-swipe:active { cursor: grabbing; }
.rv-slide { flex: 0 0 100%; height: 100%; display: grid; grid-template-rows: 100%; place-items: center; overflow: hidden; }
.rv-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 3px 10px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .18); font-size: 9px; font-variant-numeric: tabular-nums; pointer-events: none; }
/* ---------- 电商评价编辑器 & 评价头像/媒体预览 ---------- */
.rv-editor { display: flex; flex-direction: column; gap: 8px; }
.rv-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.rv-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-row-head input[data-rv-field="user"] { flex: 1; min-width: 120px; }
.rv-row-head label { color: var(--muted-2); font-size: 11px; }
.rv-avatar-pick { display: inline-flex; align-items: center; gap: 7px; }
.rv-avatar-pick img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface); }
.rv-media-row { display: flex; align-items: center; gap: 8px; }
.rv-media-row label { flex: 0 0 auto; color: var(--muted-2); font-size: 11px; }
.rv-media-picks { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-height: 40px; }
.rv-media-chip { position: relative; width: 52px; height: 52px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); background: #0e131c; }
.rv-media-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-media-chip b { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .62); font-size: 10px; font-weight: 800; cursor: pointer; }
.rv-media-chip b:hover { background: #e05c3d; }
.mall-review-avatar-wrap { width: 22px; height: 22px; flex: 0 0 22px; }
.mall-review-avatar-img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }
.mall-review-media { display: flex; gap: 4px; margin-top: 5px; }
.mall-review-media img { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; }
.rv-avatar-wrap { width: 26px; height: 26px; flex: 0 0 26px; }
.rv-avatar-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.rv-viewer-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .55); font-size: 16px; cursor: pointer; }
.rv-viewer-close:hover { background: rgba(0, 0, 0, .78); }
.rv-full { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; }
.rv-video { position: relative; width: 100%; height: 100%; max-height: 100%; min-height: 0; display: grid; grid-template-rows: 100%; place-items: center; cursor: pointer; }
.rv-video img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rv-play-btn { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); transition: opacity .2s ease; }
.rv-play-btn svg { width: 24px; height: 24px; }
.rv-video.playing .rv-play-btn { opacity: 0; }
.rv-video.playing img { filter: brightness(.82); }
.rv-progress { position: absolute; left: 14px; right: 14px; bottom: 34px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.rv-progress i { display: block; width: 0; height: 100%; border-radius: 999px; background: #fff; }
.rv-video.playing .rv-progress i { animation: rvProgress 12s linear forwards; }
@keyframes rvProgress { from { width: 0; } to { width: 100%; } }
.rv-video-time { position: absolute; right: 14px; bottom: 14px; color: rgba(255, 255, 255, .85); font-size: 9px; font-variant-numeric: tabular-nums; }

/* ---------- 场景卡片类型配色 ---------- */
.scene-card.taobao:before, .scene-card.shop:before { background: linear-gradient(90deg, #ff5000, transparent); }
.scene-card.tmall:before { background: linear-gradient(90deg, #ff0036, transparent); }
.scene-card.jd:before { background: linear-gradient(90deg, #e1251b, transparent); }
.scene-card.doudian:before { background: linear-gradient(90deg, #fe2c55, transparent); }
.scene-card.whatsapp:before, .scene-card.chat:before { background: linear-gradient(90deg, #25d366, transparent); }
.scene-card.wechat:before { background: linear-gradient(90deg, #07c160, transparent); }
.scene-card.taobao .scene-icon, .scene-card.shop .scene-icon { background: #fff1e8; color: #ff5000; }
.scene-card.tmall .scene-icon { background: #ffe8ec; color: #ff0036; }
.scene-card.jd .scene-icon { background: #ffe9e8; color: #e1251b; }
.scene-card.doudian .scene-icon { background: #ffe9ee; color: #fe2c55; }
.scene-card.whatsapp .scene-icon, .scene-card.chat .scene-icon { background: #e6f9ee; color: #128c7e; }
.scene-card.wechat .scene-icon { background: #e6f9ee; color: #07c160; }

/* ---------- AI 话术（LLM 生成 / 优秀话术学习 / 知识库） ---------- */
.ai-layout { display: grid; gap: 16px; margin-top: 16px; }
.ai-loading { padding: 26px; text-align: center; color: var(--muted); font-size: 12px; border: 1px dashed var(--line-dark); border-radius: 12px; }
.ai-result { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-soft); }
.ai-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ai-result-head strong { display: block; font-size: 13px; }
.ai-result-head span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.ai-block { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ai-block:last-child { border-bottom: 0; }
.ai-block-index { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.ai-block strong { font-size: 12px; }
.ai-block em { font-style: normal; color: var(--muted); font-weight: 600; }
.ai-block p { margin: 3px 0 0; font-size: 12px; line-height: 1.6; color: var(--text); }
.ai-knowledge-grid { display: grid; gap: 8px; }
.ai-knowledge-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); cursor: pointer; }
.ai-knowledge-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ai-knowledge-item input { margin-top: 3px; }
.ai-knowledge-item strong { display: block; font-size: 12px; }
.ai-knowledge-item span { color: var(--muted); font-size: 11px; }
.ai-knowledge-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ai-knowledge-row:last-child { border-bottom: 0; }
.ai-knowledge-row strong { display: block; font-size: 12.5px; }
.ai-knowledge-row span { color: var(--muted); font-size: 11px; }
.ai-knowledge-row p { margin: 4px 0 0; color: var(--text); font-size: 11.5px; line-height: 1.5; }

/* ---------- 直播平台（zdns）排品商品拉取 ---------- */
.zdns-body { padding: 4px 0; }
.zdns-products { margin-top: 14px; overflow: auto; max-height: 380px; }
.zdns-products .data-table { min-width: 960px; }
.zdns-products td img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-soft); }

/* ---------- 移动端刘海屏安全区 ----------
   状态栏避开顶部刘海/圆角（standalone 独立窗口下 env(safe-area-inset-top) 生效）。
   必须放在文件末尾并带 .mobile-preview 前缀提高特异性：各场景原始规则以同特异性或更低特异性定义了
   固定 height 与 padding 简写（padding-top: 0），若本组规则在其之前则会被级联覆盖导致留白失效。
   状态栏放开固定高度、按「原高度 + 安全区」计算 min-height，保证内容区高度不变、仅整体下移留白 */
.mobile-preview .mall-status, .mobile-preview .ph-status, .mobile-preview .wx-status, .mobile-preview .wa-status { height: auto; padding-top: env(safe-area-inset-top); }
.mobile-preview .mall-status, .mobile-preview .ph-status { min-height: calc(26px + env(safe-area-inset-top)); }
.mobile-preview .wx-status { min-height: calc(24px + env(safe-area-inset-top)); }
.mobile-preview .wa-status { min-height: calc(22px + env(safe-area-inset-top)); }
/* 电商导航栏 sticky 贴顶后同样需避开刘海 */
.mobile-preview .mall-nav { top: env(safe-area-inset-top); }

/* ---------- 移动端展示（?view=stage / ?view=display）场景文本加大一号 ----------
   仅作用于移动展示窗口 / 展示端（.app-stage 下的手机模拟预览），不影响编辑 / 预览缩略图。
   通过 --sb-bump 统一控制增量（当前 +3px），各场景原有固定字号逐条 +3px。 */
.app-stage .mobile-preview { font-size: 16px; --sb-bump: 3px; }
.app-stage .wa-preview, .app-stage .wx-preview { font-size: 18px; }

/* 状态栏（时间 / 信号 / 电量） */
.app-stage .mobile-preview .mall-time { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-signal { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .sb-icons { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .ph-status .ph-time { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .ph-status .ph-signal { font-size: calc(9px + var(--sb-bump)); }

/* 电商场景（淘宝 / 天猫 / 京东 / 抖店） */
.app-stage .mobile-preview .mall-nav-tabs b { font-size: calc(11.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-jd-sub { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-search { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-hero-index { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-hero-badge { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-price em { font-size: calc(11px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-price strong { font-size: calc(23px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-price-tag { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-price-orig { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-sold { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-band-side strong { font-size: calc(13px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-band-side span { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-title h1 { font-size: calc(12.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-title-tag { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-coupon { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-coupon-tags em { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-row { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-row-value.dots span:before { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-block-head strong { font-size: calc(11px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-block-more { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-review-tags span { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-review strong { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-review p { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-store-logo { font-size: calc(15px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-store-info strong { font-size: calc(11px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-store-info span { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-store-follow { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-store-btn { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-store-scores span { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-detail-title { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-detail-text { font-size: calc(10px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-bb-icons span { font-size: calc(7.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-bb-cart, .app-stage .mobile-preview .mall-bb-buy { font-size: calc(11px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-flash-title { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-flash-count { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-brand { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-seckill-title { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-seckill-clock { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-seckill-clock b { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-hurry span { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .mall-hurry b { font-size: calc(8.5px + var(--sb-bump)); }

/* 独立站场景（含各皮肤 h1 变体，保持相对层级） */
.app-stage .mobile-preview .site-brand { font-size: calc(10.5px + var(--sb-bump)); }
.app-stage .mobile-preview .site-nav { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .site-hero-tag { font-size: calc(7.5px + var(--sb-bump)); }
.app-stage .mobile-preview .site-eyebrow { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .site-body h1 { font-size: calc(27px + var(--sb-bump)); }
.app-stage .mobile-preview .site-editorial .site-body h1 { font-size: calc(31px + var(--sb-bump)); }
.app-stage .mobile-preview .site-minimal .site-body h1 { font-size: calc(21px + var(--sb-bump)); }
.app-stage .mobile-preview .site-mono .site-body h1 { font-size: calc(30px + var(--sb-bump)); }
.app-stage .mobile-preview .site-nordic .site-body h1 { font-size: calc(23px + var(--sb-bump)); }
.app-stage .mobile-preview .site-vivid .site-body h1 { font-size: calc(28px + var(--sb-bump)); }
.app-stage .mobile-preview .site-price { font-size: calc(15px + var(--sb-bump)); }
.app-stage .mobile-preview .site-desc { font-size: calc(10.5px + var(--sb-bump)); }
.app-stage .mobile-preview .site-cta { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .site-perks { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .site-note { font-size: calc(8.5px + var(--sb-bump)); }

/* 评论区（买家秀） */
.app-stage .mobile-preview .rv-page-head strong { font-size: calc(11.5px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-rate { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-tab { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-avatar { font-size: calc(9px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-item-meta strong { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-stars i { font-size: calc(8.5px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-item-date { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-item-spec { font-size: calc(8px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-item-text { font-size: calc(9.5px + var(--sb-bump)); }
.app-stage .mobile-preview .rv-item-foot { font-size: calc(8px + var(--sb-bump)); }

/* 媒体轮播 */
.app-stage .mobile-preview .ms-counter { font-size: calc(9px + var(--sb-bump)); }