/* ============================================================
   Grok Video Studio
   视觉体系对齐 ai18.online 视频创作中心「基准页规范」
   （中性、清晰、生产力工具化的浅色设计系统）
   ============================================================ */
:root {
    /* ===== 基础色板（light = 线上当前值，确保浅色外观完全不变） ===== */
    --primary: #2E6CEC;
    --primary-dark: #1F57C7;
    --primary-light: #EEF4FF;
    --primary-rgb: 46, 108, 236;
    /* 主 CTA 渐变（2026-10-04 用户拍板 A 方案）：蓝→紫同族渐变，浅深两主题共用（深色块不覆盖＝继承）。
       中间停靠点 #5E63F5 保证按钮文字落在 4.6:1 以上的区域，紫色尾巴只做装饰收尾。 */
    --grad-cta: linear-gradient(100deg, #2E6CEC 0%, #5E63F5 55%, #8B5CF6 100%);
    --grad-cta-hover: linear-gradient(100deg, #356FF2 0%, #6B6EF8 55%, #9A6BFF 100%);
    /* 中级动作按钮 / 收官动作的「主题感知」别名：浅色=原实心色（行为不变），深色=渐变族。
       供智能剪辑 body.html 的内联样式引用（var 回退兜底独立页场景）。 */
    --grad-soft-bg: #2E6CEC;
    --grad-soft-border: #2E6CEC;
    --grad-apply: #16a34a;
    --page: #F5F6F8;
    --card: #FFFFFF;
    --text: #1F2329;
    --muted: #646A73;
    --line: #E5E6EB;
    /* R113 文案标签高亮色：浅色用饱和橙红，与正文深色形成强对比 */
    --tag: #C2410C;
    --soft: #F7F8FA;
    --danger: #C9363E;
    --warning: #B26A00;
    --success: #16845B;
    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --text-secondary: #8F959E;
    --text-tertiary: #B0B5BF;
    --hover-border: #94B4F5;
    --hover-text: #1F57C7;
    --hover-bg: #F7FAFF;
    --border-subtle: #F0F1F2;
    /* ★ 列流光描边墨色（rgb 三元组，2026-10-09 用户拍板入标）：光标悬浮在列上的框由「淡蓝」改「白色系」，
       与视频换脸 / 人脸打码 / 内容替换统一。深色主题覆盖为纯白（见 :root[data-theme="dark"]）；
       浅色主题取同色系中性灰——纯白描边落在白卡 #FFFFFF 上不可见，灰是浅色下唯一可见的「白色系」。
       仅 .dh-col-beam 列流光读此令牌；作品详情弹窗 .work-modal 于 2026-10-21
       用户拍板后同改白色系（1580 行起）；IP 弹窗 .dhv-modal 仍为淡蓝，未在范围内。 */
    --dh-beam-ink: 203, 207, 214;

    /* ===== 语义别名（light = 等价于实体色；dark 模式统一切换） ===== */
    --bg: var(--page);
    --surface: var(--card);
    --surface-2: var(--soft);
    --surface-3: #FFFFFF;
    --fg: var(--text);
    --fg-muted: var(--muted);
    --fg-subtle: var(--text-secondary);
    --fg-faint: var(--text-tertiary);
    --border: var(--line);
    --border-strong: #D0D3D9;
    /* 便签节点配色（P2 token 化：基础黄底在深色下由 #canvasStage 深色覆盖接管） */
    --note-bg: #FFF9DB;
    --note-border: #EBD98A;
    --note-text: #5C4A00;
    --note-title: #B29000;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);
    --header-bg: var(--card);
    --sidebar-bg: var(--card);
    --brand-fg: var(--text);
    --icon-on-primary: #FFFFFF;
    --chip-bg: var(--soft);
    --overlay: rgba(0, 0, 0, .45);
    --skeleton: rgba(0, 0, 0, .06);
    color-scheme: light;
}

/* ===== 深色主题（由 <html data-theme="dark"> 触发；默认开启） ===== */
:root[data-theme="dark"] {
    --primary: #4C8DFF;
    --primary-dark: #2E6CEC;
    --primary-light: #16243F;
    --primary-rgb: 76, 141, 255;
    /* P3v2（2026-10-04）：对标即梦/剪映深色 —— 近黑底 + 微亮面板，层差收窄到 4~6 级，
       整体压暗找回深色系的大气感（v1 #1E222B/#262B34/#2A2F39 偏亮偏灰，用户反馈"惨白"） */
    --page: #0C0E11;
    --card: #161920;          /* v1 #1E222B / 初版 #181B21：比底色只亮一档，靠描边分层 */
    --soft: #1D212A;          /* v1 #262B34：嵌套面板，仍略高于卡片 */
    /* P4：文字三档灰阶 —— 标题/数值近乎白、正文/标签可读、辅助说明不低于 6:1 */
    --text: #F2F4F7;
    --muted: #B4BDC9;         /* 表单标签、次要正文 */
    /* R113 文案标签高亮色：深色用暖橙，与近白正文拉开层次 */
    --tag: #FF9F43;
    --text-secondary: #9AA5B4; /* 说明段落 */
    --text-tertiary: #6E7987; /* 快捷键等极弱提示 */
    --line: #272C35;          /* v1 #363C48：低对比描边，大气感的关键 */
    --hover-bg: #262C37;      /* v1 #2C323C */
    --border-subtle: #232833; /* v1 #2B313C */
    /* ★ 列流光描边墨色：深色 = 纯白（2026-10-09 用户拍板「列 hover 框改白色」） */
    --dh-beam-ink: 255, 255, 255;
    --danger: #F0616B;
    --warning: #E0A23C;
    --success: #3FB985;
    --hover-border: #3E63A8;
    --hover-text: #8FB4FF;

    --bg: var(--page);
    --surface: var(--card);
    --surface-2: var(--soft);
    --surface-3: #222630;   /* v1 #2A2F39：输入框/悬浮块，保持在卡片之上 */
    --fg: var(--text);
    --fg-muted: var(--muted);
    --fg-subtle: var(--text-secondary);
    --fg-faint: var(--text-tertiary);
    --border: var(--line);
    --border-strong: #2D323D;
    /* 首尾帧已上传态边框（浅色=浅蓝高亮 #C8D8FA，深色=同族蓝描边，避免深色页面刺眼浅蓝） */
    --fl-hasfile-border: #3E63A8;
    /* 便签节点配色：深色下黄底失效，交由 #canvasStage 深色覆盖（var(--surface-2)/var(--warning)） */
    --note-bg: var(--surface-2);
    --note-border: var(--warning);
    --note-text: var(--fg);
    --note-title: var(--warning);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, .6);
    --header-bg: #101318;
    --sidebar-bg: #101318;
    --brand-fg: var(--text);
    --icon-on-primary: #FFFFFF;
    --chip-bg: var(--soft);
    --overlay: rgba(0, 0, 0, .6);
    --skeleton: rgba(255, 255, 255, .06);
    color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-width: 1020px; height: 100%; }
body {
    overflow: hidden; color: var(--text); background: var(--page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, textarea, input, select { font: inherit; }
svg.ico { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.13em; }
svg.ico.big { width: 26px; height: 26px; }

.jimeng-main { position: relative; width: 100%; height: 100%; }
.page-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; }

/* ============ 页头 ============ */
.page-head {
    min-height: 64px; padding: 10px 22px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
/* margin-right:auto 吸收弹性空间：原先由页头 .page-help 的 margin-left:auto 承担（2026-10-06 该提示行已移除） */
.page-heading { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.page-title-icon {
    width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 8px; color:#fff; background: var(--primary); font-size: 17px;
}
.page-title-icon .ico { width: 18px; height: 18px; }
.page-title { font-size: 17px; font-weight: 650; letter-spacing: 0; }
.page-sub { margin-top: 3px; color: var(--fg-subtle); font-size: 12px; }
/* ★ 2026-10-22：页头「回退」按钮（手机端用，部分手机无滑动回退手势）。
   桌面端隐藏（桌面有侧栏可切页），手机端在 mobile.css 里显示。 */
.page-back-btn { display: none; }
/* .page-help（页头顺序描述提示行）样式已随该提示行一并移除，2026-10-06 */

/* 顶部不再显示模型 Tab / 平台（已移到左侧菜单） */
.page-switch, .provider-select { display: none; }

.head-right { display: flex; align-items: center; gap: 8px; margin-left: 16px; }

.ghost-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface);
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s;
}
.ghost-btn:hover { border-color: var(--hover-border); color: var(--hover-text); background: var(--hover-bg); }
.primary-ghost-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
    border: 1px solid rgba(var(--primary-rgb),.28); border-radius: 6px;
    color: var(--primary-dark); background: var(--primary-light); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; text-decoration: none;
}
.primary-ghost-btn:hover { background: var(--hover-bg); border-color: var(--primary); }
.primary-ghost-btn.need-config { color: var(--danger); background: #FDECEE; border-color: #F5B8C0; }

/* ============ 布局 ============ */
.jm-layout { flex: 1; min-height: 0; display: flex; align-items: stretch; }

/* 左侧功能菜单 */
.sidebar {
    width: 250px; flex: 0 0 250px; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--border);
}
/* 品牌位：与左侧栏同宽同列（顶栏最左段），LOGO + 站点名称；分站白标由 brand.js 注入。
   负 margin 抵消顶栏内边距，使品牌位真正贴边、右分隔线与侧栏边线连成一条 */
.brand-head {
    width: 250px; flex: 0 0 250px;
    height: 100px; margin: -10px 0 -46px -22px; /* 品牌区独立加高：向下延伸覆盖侧栏顶部（2026-10-04 用户要求，终值 100px） */
    position: relative; z-index: 6;
    /* 2026-10-06 用户要求：LOGO 与站名整体放大 0.5 倍（×1.5）。基准值＝放大前 logo 36px / 图标 21px / 站名 17px */
    display: flex; align-items: center; gap: 15px; padding: 0 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text); font-size: 25.5px; font-weight: 800; letter-spacing: .75px;
}
.brand-logo {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; color: var(--primary); background: var(--primary-light); font-size: 30px;
  }
.brand-logo .ico { width: 31.5px; height: 31.5px; }
/* 2026-10-15：品牌 LOGO 图盒内 contain 不裁剪；盒定尺 54×54 正圆，宽图两侧留白居中 */
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-logo.brand-has-img { width: 54px; height: 54px; background: none; border-radius: 50%; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot {
    margin-top: auto; padding: 12px 25px; /* 左右内缩 25px，与一级菜单 .nav-tree 对齐（2026-10-04 用户要求联系客服与一级菜单同款） */
    border-top: 1px solid var(--border-subtle);
}
.sidebar-link {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 7px;
    color: var(--muted); background: var(--surface-2); font-size: 13px; text-decoration: none;
    transition: all .15s;
}
.sidebar-link:hover { background: var(--primary-light); color: var(--primary-dark); }
.sidebar-link .ico { font-size: 15px; }

/* 侧栏固定位（我的资产 / 我的作品，2026-09-24 用户要求）：不属于一级菜单，恒贴侧栏底部。
   .nav-tree 是 flex:1（吃掉全部剩余高度、自身可滚动），本区块 flex:0 0 auto
   → 菜单增加或减少只压缩菜单区高度，固定位位置不变。 */
.sidebar-pinned {
    flex: 0 0 auto;
    padding: 8px 25px; /* 左右内缩 25px，与一级菜单 .nav-tree 对齐（2026-10-04 用户要求底部三项与一级菜单同款） */
    border-top: 1px solid var(--border-subtle);
}
.sidebar-pinned:empty { display: none; }
.sidebar-pinned .nav-item { margin-bottom: 0; }
.sidebar-pinned .nav-item + .nav-item { margin-top: 10px; /* 与一级菜单项间距一致（2026-10-04 由 6px 改为 10px） */ }
.sidebar-pinned { margin-bottom: 64px; /* 2026-10-04 用户要求整块上移 64px，与联系客服之间留出空档 */ }

.nav-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 44px 25px 8px; /* 顶部留白 = 品牌区下探的 36px + 原 8px 间距，避免首个菜单项被盖住；左右内缩 25px（2026-10-04 用户要求，由 10px 扩至 25px） */ }
.nav-tree::-webkit-scrollbar { width: 5px; }
.nav-tree::-webkit-scrollbar-thumb { background: #D9DDE9; border-radius: 3px; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 10px; border-radius: 7px;
    color: var(--fg-muted); font-size: 13px; font-weight: 500; text-decoration: none;
    transition: all .15s; cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { color: var(--primary-dark); background: var(--primary-light); font-weight: 600; }
.nav-item .ico { font-size: 16px; }

.nav-group { margin-bottom: 10px; }
.nav-parent {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 7px;
    color: var(--fg-muted); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
    text-decoration: none; /* 2026-10-04 修：nav-parent 是 <a>，漏写这条导致有子菜单的一级项（视频制作/图片制作/AI工具）文字带默认下划线，被当成"菜单横线" */
    transition: all .15s;
}
.nav-parent:hover { background: var(--surface-2); color: var(--text); }
.nav-parent.active { color: var(--primary-dark); background: var(--primary-light); font-weight: 600; }
.nav-parent .ico { font-size: 16px; }
.nav-arrow {
    margin-left: auto; width: auto; height: auto; line-height: 1; display: grid; place-items: center;
    /* 始终指向右：提示二级菜单向右飞出（替代原手风琴向下箭头） */
    color: var(--fg-subtle); font-size: 22px; transition: transform .2s, color .2s;
}
.nav-arrow::after { content: '▸'; }
.nav-group:hover > .nav-parent .nav-arrow,
.nav-group.open > .nav-parent .nav-arrow { transform: translateX(3px); color: var(--primary-dark); }

/* 2026-11-01：一级菜单悬浮/展开 → 二级菜单向右飞出（不再向下展开）
   .nav-children 改为 position:fixed 浮层，坐标由 app.js 按一级项位置实时计算，
   以此绕过 .nav-tree 的 overflow 裁切；桌面 hover 或触屏 .open 都触发显示。 */
.nav-children {
    position: fixed; display: none; z-index: 80;
    flex-direction: column; gap: 10px;            /* 与一级菜单项间距（margin-bottom:10px）一致 */
    min-width: 215px; max-height: 82vh; overflow-y: auto;
    padding: 8px;
    background: var(--surface); border-radius: 10px;
    box-shadow: 0 12px 34px rgba(20,23,28,.18);
}
@media (hover: hover) {
    .nav-group:hover > .nav-children { display: flex; }
}
.nav-group.open > .nav-children { display: flex; }
/* 二级飞出层常驻白色双流光边框：复用全站「弹窗双流光」标准
   （--dh-beam-a/b 旋转动画 + --dh-beam-ink 墨色令牌：深色=纯白 / 浅色=中性灰；
    conic-gradient + mask-composite:exclude 只透 1.5px 边框环、不扫内容）。
   飞出层仅 hover/展开时 display:flex，流光随之显现；opacity .9 不抢二级项。 */
.nav-children::after,
.nav-children::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .9; pointer-events: none; z-index: 2;
}
.nav-children::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.nav-children::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.nav-children::before { animation: dh-beam-b-spin 6.5s linear infinite; }
.nav-children .nav-child {
    /* 与 B11 一级菜单（.nav-parent）同款：padding / 字号 / 间距 / 圆角 / 图标尺寸一致，消除"小气"感 */
    padding: 17px 14px 17px 24px; margin: 0; gap: 22px;
    font-size: 15px; font-weight: 500; line-height: 1.2; border-radius: 10px;
}
.nav-children .nav-child .ico { font-size: 22px; }
.nav-child {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 6px;
    color: var(--muted); font-size: 15px; text-decoration: none;
    transition: all .15s; cursor: pointer;
}
.nav-child:hover { background: var(--surface-2); color: var(--text); }
.nav-child.active { color: var(--primary-dark); background: var(--primary-light); font-weight: 600; }

/* 首页（固定首位）与第二个一级菜单之间：30px 间距 + 分隔小横线（2026-10-04 用户要求） */
.nav-tree > .nav-item:first-child { margin-bottom: 0; }
.nav-sep { height: 0; border-top: 1px solid var(--border); margin: 15px 14px 14px; }

/* 主工作区 */
.main-stage { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: stretch; }
.jm-left {
    width: 488px; flex: 0 0 488px; min-height: 0; overflow-y: auto;
    padding: 16px 18px 16px; display: flex; flex-direction: column;
    border-right: 1px solid var(--border); background: var(--surface-2); scrollbar-gutter: stable;
}
.jm-left::-webkit-scrollbar, .jm-right::-webkit-scrollbar { width: 6px; }
.jm-left::-webkit-scrollbar-thumb, .jm-right::-webkit-scrollbar-thumb { background: #D9DDE9; border-radius: 3px; }
.jm-right { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 22px 36px; }

/* 非视频模块占位页 */
.placeholder-area {
    flex: 1; min-width: 0; min-height: 0;
    display: none; align-items: center; justify-content: center;
    padding: 40px;
}
.placeholder-area .empty.big { min-height: auto; padding: 60px 40px; }

/* ============ 卡片 ============ */
.card {
    margin-bottom: 10px; flex-shrink: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); transition: border-color .15s;
}
.card:hover { border-color: #D7D9DE; }
.card-head { padding: 14px 16px 8px; }
.card-head h3 { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; font-weight: 650; }
.card-head h3 .ico { color: var(--muted); font-size: 16px; }
.card-head p { margin-top: 4px; padding-left: 24px; color: var(--fg-subtle); font-size: 12px; }

/* 电商套图第 4 步「生成结果」列头：标题在左、AI标识开关在右（与首页结果头一致） */
.ecom-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ecom-result-head .card-head-main { min-width: 0; }
.ecom-result-head .card-head-actions { flex: none; padding-top: 2px; }

/* AIGC 显式标识开关（2026-09-20，GB 45438-2025）：每个生成结果页的「AI标识」开关。
   视觉为 iOS 风滑块；切换由 app.js 接管并写回 /api/aigc/label（按用户留档）。
   关闭的只是「AI生成」可见水印，文件元数据隐式标识始终写入、不可去除。
   2026-10-22 用户要求：组件从 <label>+checkbox 改为 <button>（checkbox/滑轨已随
   「直写状态字」方案废弃），点击不再直接切换，改为弹出状态弹窗（app.js aigcOpenStatus）。 */
.aigc-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 12px; color: var(--muted); line-height: 1; font-family: inherit; appearance: none; }
.aigc-tg-text { white-space: nowrap; }
/* 2026-10-21 滑块小圆点看不出开还是关 → 去掉滑轨，直写「当前开/当前关」状态字；
   2026-10-22 用户再要求：状态字去掉，改点击弹「状态弹窗」（当前状态 + 开启/关闭按钮）。
   按钮本体保留状态色胶囊：开=绿、关=橙警示（合规风险态），手机/电脑一眼可辨。
   状态源 = body.aigc-off（app.js aigcApplyToggleState 全局同步）。全站共用一处改全部生效。 */
.aigc-toggle { gap: 4px; padding: 4px 10px; border: 1px solid rgba(47, 164, 113, .5); border-radius: 999px; background: rgba(47, 164, 113, .08); }
.aigc-tg-text { font-weight: 600; }
body.aigc-off .aigc-toggle { border-color: rgba(224, 162, 60, .55); background: rgba(224, 162, 60, .1); }
/* 2026-10-17 用户要求：开关从图片结果抽屉移入页头（积分按钮前），全站可见。
   贴齐右侧胶囊组的视觉节奏：内边距 + 圆角 + hover 轻底色（主题自适应）。 */
.head-right .aigc-toggle { padding: 5px 10px; border-radius: 9px; transition: background .15s ease; }
.head-right .aigc-toggle:hover { background: var(--surface-2); }
/* ★ 音频的显式标识：GB 45438-2025 §5.3 允许音频在「交互场景界面」添加显著提示
   （不必在音轨里合成语音提示）。与图片水印共用一个用户开关：body.aigc-off 时隐藏。 */
.aigc-audio-note {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px;
  border-radius: 999px; background: rgba(0, 0, 0, .45); color:#fff;
  font-size: 12px; line-height: 1.5; letter-spacing: .2px;
}
.aigc-audio-note::before {
  content: 'AI'; flex: none; display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface); color: var(--text);
  font-size: 10px; font-weight: 700;
}
body.aigc-off .aigc-audio-note { display: none; }
.card-body { padding: 7px 16px 16px; }
.card-step {
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 1px;
    /* ★ 2026-09-20（用户拍板）：全站步骤序号统一蓝底（与生成按钮 var(--primary) 一致），原灰底 var(--fg-subtle) */
    border-radius: 50%; color:#fff; background: var(--primary); font-size: 10px; font-weight: 600;
}
.jm-left > .card:last-child {
    position: sticky; bottom: 0; z-index: 12; margin-top: auto; margin-bottom: 0;
    border-color: #D7E2F7; background: var(--surface);
    box-shadow: 0 -8px 18px rgba(31,35,41,.06);
}

/* ============ 模式胶囊 ============ */
.mode-capsule { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.mode-item {
    flex: 1; padding: 10px 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-radius: 6px; color: #777E90; background: transparent;
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s;
}
.mode-item .ico { font-size: 15px; }
.mode-item:hover { color: var(--fg-muted); }
.mode-item.active { color: var(--primary-dark); background: var(--surface); box-shadow: 0 1px 3px rgba(31,35,41,.12); }

/* ============ 上传框 ============ */
.upload-wrap { margin-bottom: 12px; }
.upload-wrap .plus-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-light); }
.upload-wrap .plus-icon .ico { width: 20px; height: 20px; }
.upload-wrap .t1 { font-size: 13px; font-weight: 600; color: var(--text); }
.upload-wrap .t2 { font-size: 11px; color: var(--fg-subtle); line-height: 1.6; }
.upload-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.upload-status { color: var(--fg-subtle); font-size: 11px; }
.upload-status.err { color: var(--danger); }
.upload-status.ok { color: var(--success); }
.link-btn { color: var(--primary); font-size: 11px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.url-row { display: flex; gap: 6px; margin-top: 8px; }
.text-input {
    flex: 1; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); background: var(--surface);
    font-size: 12px; outline: none; transition: all .15s;
}
.text-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.1); }
.mini-btn {
    flex: 0 0 auto; height: 32px; padding: 0 14px; border: 0; border-radius: 6px;
    color:#fff; background: var(--primary); font-size: 12px; cursor: pointer;
}
.mini-btn:hover { background: #1F5FD7; }

/* ============ 首尾帧开关 ============ */
.fl-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; margin-bottom: 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.fl-toggle-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.fl-toggle-label .ico { color: var(--primary); font-size: 16px; }
.fl-toggle-sub { font-size: 11px; font-weight: 400; color: var(--fg-subtle); }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #D1D5DB; border-radius: 22px; transition: .2s;
}
.switch-slider:before {
    content: ''; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px;
    background: var(--surface); border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider:before { transform: translateX(18px); }

/* ============ 参考生视频上传 ============ */
.ref-uploader { display: flex; flex-direction: column; gap: 14px; }
.ref-section { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.ref-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.ref-title span { font-size: 11px; font-weight: 500; color: var(--fg-subtle); }
.ref-over-warn {
    margin: 0 0 2px; padding: 7px 10px; border-radius: 8px;
    background: rgba(201,54,62,.10); border: 1px solid rgba(201,54,62,.35);
    box-shadow: inset 3px 0 0 var(--danger);
    color: var(--danger); font-size: 12px; line-height: 1.5; font-weight: 600;
}
:root[data-theme="dark"] .ref-over-warn { background: rgba(240,97,107,.12); border-color: rgba(240,97,107,.36); }
.ref-url-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ref-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 5px 9px; border-radius: 6px; background: var(--primary-light); color: var(--primary-dark);
    font-size: 11px; word-break: break-all;
}
.ref-chip span:first-child { flex: 1; min-width: 0; }
.ref-chip-remove {
    flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(201,54,62,.12); color: var(--danger); cursor: pointer; font-size: 12px;
}
.ref-chip-remove:hover { background: var(--danger); color:#fff; }
.ref-url-row { display: flex; gap: 8px; }
.ref-url-row .text-input { flex: 1; min-width: 0; }

/* ---- 参考生视频：三类素材「合并上传区」（2026-10-09 用户要求，版式对齐首页视频生成）----
   改前：参考图片 / 参考视频 / 参考音频 = 三个各自独立的大区块，各带一张虚线大添加框 + 一组
   「选择文件 / 从资产库选择」，同一列里重复三遍、纵向占满一屏，且上传后素材分散在三个区块里分不清类型。
   改后：一个 .rgm-slots 混排槽位区 —— 已上传素材统一成 72×72 卡片（左上角常驻类型角标），
   尾部跟三个紧凑「＋」入口（复用首页 .qc-add 版式）；下方一行共用操作条。
   ★ 卡片尺寸 72×72 与首页 .qc-thumb / .qc-add 刻意保持一致，两处观感统一，改尺寸时一起改 */
.rgm-merge { display: flex; flex-direction: column; gap: 10px; }
/* 三个紧凑入口沿用首页 .qc-add（72×72 / 虚线 / 右上计数），这里只补与卡片共有的定位属性，
   不重写尺寸 —— 一旦重写就与首页版式脱钩，且会踩到图片制作页同名 .ref-add 的坑（见本块顶部注释） */
.rgm-add { position: relative; flex: 0 0 auto; }
.rgm-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.rgm-thumb {
    position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2); flex: 0 0 auto;
}
.rgm-thumb img, .rgm-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rgm-thumb.is-audio { display: grid; place-items: center; background: var(--primary-light); }
.rgm-thumb .rgm-audio-ico { width: 26px; height: 26px; color: var(--primary); opacity: .9; display: block; }
.rgm-thumb .rgm-audio-ico .ico { width: 100%; height: 100%; }
/* 类型角标：常驻左上角，一眼分清是图片 / 视频 / 音频（用户明确要求「上传好的卡片上标注类型」） */
.rgm-thumb .rgm-badge {
    position: absolute; left: 3px; top: 3px; z-index: 2; pointer-events: none;
    display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; height: 15px;
    border-radius: 5px; background: rgba(0,0,0,.62); color: #fff;
    font-size: 9.5px; line-height: 15px; font-weight: 600; white-space: nowrap;
}
.rgm-thumb .rgm-badge .ico { width: 9px; height: 9px; }
.rgm-thumb .rgm-remove {
    position: absolute; top: 2px; right: 2px; z-index: 3;
    width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    font-size: 12px; line-height: 18px; text-align: center; cursor: pointer;
}
.rgm-thumb .rgm-remove:hover { background: var(--danger); }
.rgm-thumb .rgm-tag {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
    padding: 1px 5px; background: rgba(0,0,0,.5); color: #fff;
    font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 「地址准备中」角标（2026-10-24）：卡片已渲染、公网地址还在后台转换时的诚实状态提示。
   与 rgm-tag 同样压在缩略图上（深底白字），亮/暗主题都清晰；小黄点做呼吸动画表示进行中。 */
.rgm-pending {
    position: absolute; top: 4px; left: 4px; z-index: 3; pointer-events: none;
    display: inline-flex; align-items: center; gap: 3px;
    max-width: calc(100% - 8px);
    padding: 1px 6px; border-radius: 999px;
    background: rgba(0,0,0,.66); color: #fff;
    font-size: 10px; line-height: 15px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.rgm-pending::before {
    content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%;
    background: #ffc857; animation: rgmPendingPulse 1s ease-in-out infinite;
}
@keyframes rgmPendingPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.img-thumb .rgm-pending, .fl-slot .rgm-pending { top: 4px; left: 4px; }
.rgm-link-row { display: flex; gap: 8px; }
.rgm-link-row .text-input { flex: 1; min-width: 0; }
.rgm-oprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rgm-oprow .pv-btn .ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.rgm-lib { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rgm-lib-label { font-size: 12px; color: var(--fg-subtle); }
.rgm-lib-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-2); font-size: 12px;
    font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s;
}
.rgm-lib-btn:hover { border-color: var(--primary); color: var(--primary); }
.rgm-lib-btn .ico { width: 13px; height: 13px; }

/* ============ 多图上传网格 ============ */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 8px; }
.img-grid.dragover { outline: 2px dashed var(--primary); outline-offset: 4px; border-radius: 8px; }
.img-thumb {
    position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
    border: 1px solid #E3E6EC; background: var(--surface-2); cursor: default;
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb .img-remove {
    position: absolute; top: 5px; right: 5px; z-index: 5; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(0,0,0,.55); color:#fff; font-size: 14px; cursor: pointer; line-height: 1;
}
.img-thumb .img-remove:hover { background: var(--danger); }
.img-thumb .img-idx {
    position: absolute; left: 5px; bottom: 5px; min-width: 18px; height: 18px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; border-radius: 9px;
    background: rgba(var(--primary-rgb),.9); color:#fff; font-size: 11px; font-weight: 600;
}
.img-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 3 / 4; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2);
    cursor: pointer; text-align: center; transition: all .16s;
}
.img-add:hover { border-color: var(--primary); background: var(--hover-bg); }

/* ============ 首尾帧上传 ============ */
.fl-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.fl-slot {
    position: relative; display: flex; flex-direction: column; min-height: 168px; overflow: hidden;
    border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); cursor: pointer;
    transition: all .16s;
}
.fl-slot:hover { border-color: var(--primary); background: var(--hover-bg); }
/* 已上传态边框：浅色=原浅蓝高亮，深色=同族蓝描边（令牌化，浅深两主题都正确，不再写死刺眼的浅蓝） */
.fl-slot.has-file { border-style: solid; border-color: var(--fl-hasfile-border, #C8D8FA); }
.fl-slot .fl-label {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--fg);
    border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.fl-slot .fl-label span { font-size: 11px; font-weight: 400; color: var(--fg-subtle); }
.fl-slot .fl-body {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center;
}
.fl-slot.has-file .fl-body { padding: 0; }
.fl-slot .fl-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-slot .fl-remove {
    position: absolute; top: 8px; right: 8px; z-index: 5; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(0,0,0,.55); color:#fff; font-size: 15px; cursor: pointer; line-height: 1;
}
.fl-slot .fl-remove:hover { background: var(--danger); }
.img-hint { font-size: 11px; color: var(--fg-subtle); line-height: 1.6; }

/* ============ 参考视频上传网格 ============ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.video-thumb {
    position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
    border: 1px solid #E3E6EC; background: var(--surface-2); cursor: default;
}
.video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb .video-name {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 6px 8px; background: rgba(0,0,0,.55); color:#fff;
    font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-thumb .video-remove {
    position: absolute; top: 5px; right: 5px; z-index: 5; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(0,0,0,.55); color:#fff; font-size: 14px; cursor: pointer; line-height: 1;
}
.video-thumb .video-remove:hover { background: var(--danger); }
.video-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 16 / 9; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2);
    cursor: pointer; text-align: center; transition: all .16s;
}
.video-add:hover { border-color: var(--primary); background: var(--hover-bg); }
/* 参考音频上传块（与视频块同风格，音频无缩略图故用横条） */
.audio-add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 54px; margin-bottom: 8px; border: 1.5px dashed var(--border-strong); border-radius: 8px;
    background: var(--surface-2); cursor: pointer; text-align: center; transition: all .16s;
}
.audio-add:hover { border-color: var(--primary); background: var(--hover-bg); }
.audio-add .t1 { font-size: 15px; font-weight: 600; color: var(--text); }
.audio-add .t2 { font-size: 11px; color: var(--fg-subtle); }
/* 参考素材上传块的「+」号：此前 .img-add/.video-add 里的 .plus-icon 无任何样式（空 div，+ 不可见），此处统一补上 */
.img-add .plus-icon, .video-add .plus-icon, .audio-add .plus-icon {
    width: 16px; height: 16px; position: relative; color: var(--primary);
}
.img-add .plus-icon::before, .video-add .plus-icon::before, .audio-add .plus-icon::before,
.img-add .plus-icon::after, .video-add .plus-icon::after, .audio-add .plus-icon::after {
    content: ''; position: absolute; background: currentColor; border-radius: 1px;
}
.img-add .plus-icon::before, .video-add .plus-icon::before, .audio-add .plus-icon::before { left: 7px; top: 2px; width: 2px; height: 12px; }
.img-add .plus-icon::after, .video-add .plus-icon::after, .audio-add .plus-icon::after { left: 2px; top: 7px; width: 12px; height: 2px; }

/* ============ 提示词 ============ */
textarea.prompt-textarea {
    width: 100%; min-height: 138px; padding: 13px 15px;
    border: 1px solid var(--border-strong); border-radius: 8px; resize: vertical;
    font-size: 15px; line-height: 1.75; color: var(--text); background: var(--surface); outline: none; transition: all .18s;
}
textarea.prompt-textarea:hover { border-color: var(--border-strong); }
textarea.prompt-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.1); }
textarea.prompt-textarea::placeholder { color: var(--text-tertiary); }
.char-count { position: relative; margin-top: -30px; padding: 0 10px 8px 0; text-align: right; font-size: 10px; color: #A6ABB5; pointer-events: none; }
/* 超出模型提示词字节上限（如 grok 4096 字节）：与 pvideo 分镜字数超限同一套警示色 */
.char-count.over { color: var(--danger); font-weight: 600; }
.prompt-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.prompt-bar-left { display: flex; align-items: center; gap: 6px; }
.prompt-bar-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px;
    border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface);
    font-size: 12px; cursor: pointer; transition: all .16s;
}
.prompt-bar-btn:hover { border-color: #CBD4E6; color: var(--text); background: var(--soft); }
.prompt-bar-btn .ico { font-size: 13px; }
.prompt-bar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.prompt-bar-opt { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--primary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .16s; }
.prompt-bar-opt:hover { background: var(--primary-light); }
.prompt-bar-opt:disabled { opacity: .55; cursor: not-allowed; }
.prompt-bar-opt .ico { width: 13px; height: 13px; }
.prompt-tip { color: var(--fg-faint); font-size: 10px; }

/* ============ 参数 ============ */
.param-row { margin-bottom: 18px; }
.param-row:last-of-type { margin-bottom: 0; }
.param-label { display: block; margin-bottom: 9px; color: var(--fg-muted); font-size: 11px; font-weight: 650; }
/* 「固定 720P / 固定 30 秒」标注标签 */
.fixed-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px;
  background: var(--border-subtle); color: var(--fg-subtle); font-size: 10px; font-weight: 600; vertical-align: 1px;
}
.duration-slider:disabled { opacity: .45; cursor: not-allowed; }
.pill-row { display: flex; gap: 7px; flex-wrap: wrap; }

/* 时长滑条（即梦 Seedance 等连续时长模型） */
.duration-slider-row { display: flex; align-items: center; gap: 14px; }
.duration-slider {
    flex: 1; height: 4px; appearance: none; -webkit-appearance: none;
    /* 填充段用 CTA 同族渐变（蓝→紫压缩到已填充宽度内），2026-10-04 */
    background: linear-gradient(to right, #2E6CEC 0%, #8B5CF6 var(--fill, 30%), var(--surface-2) var(--fill, 30%));
    border-radius: 2px; outline: none; cursor: pointer;
}
.duration-slider::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--primary-dark);
    box-shadow: 0 1px 4px rgba(31,87,199,.35);
    cursor: grab; transition: transform .12s;
}
.duration-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.duration-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.duration-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--primary-dark);
    box-shadow: 0 1px 4px rgba(31,87,199,.35); cursor: grab;
}
.duration-value {
    min-width: 52px; height: 34px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    background: var(--text); color:#fff; border-radius: 7px;
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.duration-value .dv-unit { font-size: 11px; font-weight: 500; color: #B9BEC9; }
.duration-scale {
    display: flex; justify-content: space-between; margin-top: 6px;
    color: #9AA0AE; font-size: 10.5px;
}
/* 范围标注中间加长横线：2s——30s（2026-09-22 用户拍板；.param-row 现为全局 flex，
   刻度紧跟排列，无横线会误读成「2s30s」。伪元素实现，index.html 内容替换与
   video-gen.js 各模型滑条共用本类，一处生效） */
.duration-scale span + span::before { content: '——'; margin-right: 2px; }
/* 参数行下方的说明小字（如「动态优化」的补充说明）：独占一行，浅灰、不抢视觉 */
.param-hint { flex: 1 0 100%; margin-top: -4px; color: var(--fg-subtle); font-size: 11.5px; line-height: 1.5; }
.pill {
    position: relative; min-height: 38px; padding: 8px 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    border: 1px solid var(--surface-2); border-radius: 7px; color: var(--fg-muted); background: var(--surface-2);
    font-size: 13px; cursor: pointer; transition: all .16s; user-select: none;
}
.pill:hover { border-color: #BFC3F7; color: #5559D9; background: #F7F7FF; }
.pill.active { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),.06); }
.pill .pill-cost { font-size: 11px; opacity: .65; }
.pill.locked { cursor: default; }
.pill.locked:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
.pill .ico.lock { width: 12px; height: 12px; opacity: .55; }

/* 双行画面比例 pill（上名称、下比例值） */
.pill.pill-ratio { flex-direction: column; gap: 1px; min-width: 64px; padding: 7px 14px; line-height: 1.35; }
.pill.pill-ratio .ratio-name { font-size: 14px; font-weight: 600; }
.pill.pill-ratio .ratio-value { font-size: 11px; opacity: .7; }
.pill.pill-ratio .ico.lock { position: absolute; right: 6px; top: 6px; }

/* 页面内模型选择 */
.model-picker .card-body { padding-top: 12px; }
.model-list { display: flex; flex-direction: column; gap: 8px; }
.model-empty { padding: 18px; text-align: center; color: var(--fg-subtle); font-size: 12px; background: var(--surface-2); border-radius: 8px; }
.model-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-radius: 8px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--surface-2);
    transition: all .15s;
}
.model-item:hover { border-color: #BFC3F7; background: #F7F7FF; }
.model-item.active { border-color: var(--primary); background: var(--primary-light); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),.06); }
.model-item .mi-main { display: flex; align-items: center; gap: 11px; }
.model-item .mi-icon {
    width: 32px; height: 32px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 8px;
    color: var(--primary); background: var(--primary-light);
}
.model-item .mi-icon .ico { width: 16px; height: 16px; }
.model-item .mi-info { display: flex; flex-direction: column; gap: 2px; }
.model-item .mi-name { font-size: 13px; font-weight: 600; color: var(--text); }
.model-item .mi-meta { font-size: 11px; color: var(--fg-subtle); }
.model-item .mi-check {
    width: 20px; height: 20px; flex: 0 0 auto;
    display: none; align-items: center; justify-content: center;
    border-radius: 50%; color:#fff; background: var(--primary);
}
.model-item.active .mi-check { display: flex; }
.model-item .mi-check .ico { width: 12px; height: 12px; }

.settings-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; color: var(--fg-subtle); font-size: 10px; }
.settings-summary::before { content: '当前配置'; margin-right: 2px; }
.settings-summary span { padding: 3px 6px; border-radius: 4px; background: var(--surface-2); }

/* ============ 生成按钮 ============ */
.generate-summary { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 11px; }
.generate-summary-label { color: var(--fg-subtle); }
.generate-summary-value { color: var(--text); font-weight: 500; }
.generate-btn {
    position: relative; width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border: 0; border-radius: 7px; cursor: pointer;
    color:#fff; background: var(--primary); font-size: 15px; font-weight: 600; transition: all .18s;
}
.generate-btn .ico { font-size: 17px; }
.generate-btn:hover { background: #1F5FD7; }
.generate-btn:active { background: #184FB8; }
.generate-btn:disabled, .generate-btn.disabled { opacity: .55; cursor: not-allowed; background: var(--primary); }
.generate-btn .cost-badge { display: inline-flex; align-items: center; margin-left: auto; padding: 2px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 11px; font-weight: 500; }
.generate-tip { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: #A0A5AD; font-size: 10px; }
.generate-tip .ico { font-size: 13px; }

/* ============ AI 去字幕（与去水印同组，沿用站点令牌） ============ */
.se-dropzone {
    border: 1.5px dashed var(--border-strong); border-radius: 9px; background: var(--surface-2); padding: 22px;
    display: flex; align-items: center; justify-content: center; transition: all .18s; cursor: pointer;
}
.se-dropzone.drag { border-color: var(--primary); background: var(--primary-light); }
.se-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--fg-subtle); }
.se-drop-inner .ico.big { font-size: 34px; color: var(--text-tertiary); }
.se-drop-inner p { margin: 0; font-size: 13px; }
.se-drop-inner .gv-up-actions { margin-top: 4px; }
/* 数字人·视频仿写：已选文件信息条（2026-09-28 上传框统一 se-dropzone 风格时补齐） */
.script-file-info { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); }
.script-file-size { color: var(--fg-subtle); font-size: 12px; flex: 0 0 auto; }
/* 源视频预览播放器（选中/上传后即可核看，避免选错文件）：去字幕 / 视频换脸 / 人脸打码 三页共用 */
/* 源视频预览：直接嵌进上传虚线框内（选中后框内播放，去字幕 / 视频换脸 / 人脸打码 三页共用） */
.se-dropzone.has-video { padding: 10px; cursor: default; flex-direction: column; align-items: stretch; }
/* 源视频缩略（2026-10-10 对齐 cr 页 .cr-upload-preview 口径）：撑满列宽 + height:auto 按视频比例完整显示（不裁切、不留黑边） */
.se-drop-video { position: relative; width: 100%; height: auto; border-radius: 8px; overflow: hidden; background: #000; }
.se-drop-video video { display: block; width: 100%; height: auto; border-radius: 8px; background: #000; }
.se-drop-inner.has-video { margin-top: 10px; }
.se-drop-inner.has-video .ico.big, .se-drop-inner.has-video > p { display: none; }
.se-drop-inner.has-video .gv-up-actions { margin-top: 0; }

/* 视频换脸：合规声明卡 */
.fs-compliance { border: 1px solid #FBE3D6; }
.fs-compliance-head { display: flex; align-items: center; gap: 8px; color: #C25B16; font-weight: 600; margin-bottom: 8px; }
.fs-compliance-head .ico { font-size: 18px; }
.fs-compliance-text { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: #7A5230; }
.fs-compliance-text strong { color: #C25B16; }
.fs-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; line-height: 1.5; }
.fs-agree input { margin-top: 2px; width: 15px; height: 15px; flex-shrink: 0; }

/* 上传状态 + 进度条 */
.se-up-status { margin-top: 10px; }
.se-up-status-text { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.se-up-status-text.ready { color: var(--primary); }
.se-up-status-text.ok { color: var(--success); }
.se-up-track { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.se-up-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 4px; transition: width .2s ease; }

/* 分段选择器（版本 / 标定方式 / 算法） */
.se-seg { display: flex; gap: 10px; flex-wrap: wrap; }
.se-seg-item {
    flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer;
    transition: all .15s; color: var(--text);
}
.se-seg-item b { font-size: 14px; font-weight: 600; }
.se-seg-item span { font-size: 11px; color: var(--fg-subtle); }
.se-seg-item:hover { border-color: #BFD0F5; }
.se-seg-item.active { border-color: var(--primary); background: var(--primary-light); }
.se-seg-item.active b { color: var(--primary); }
.se-seg-sm .se-seg-item { flex: 1; min-width: 0; padding: 8px 10px; }
.se-seg-sm .se-seg-item b { font-size: 13px; }
.se-fine-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.se-sub { display: flex; flex-direction: column; gap: 7px; }
.se-sub-label { font-size: 13px; font-weight: 600; color: var(--text); }

/* 手动框选抽帧画框 */
.se-frame {
    position: relative; width: 100%; max-width: 480px; margin: 0 auto; background: #0e0f12;
    border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9;
}
.se-canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.se-frame-tip {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #9aa0ab; font-size: 13px; background: #0e0f12;
}
.se-frame-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.se-frame-bar .pv-btn { height: 30px; padding: 0 12px; font-size: 12px; }
.se-frame-bar input[type=range] { flex: 1; accent-color: var(--primary); }
.se-frame-time { font-size: 12px; color: var(--muted); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.se-boxes { margin-top: 12px; }
.se-boxes-head { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.se-boxes-head b { color: var(--primary); }
.se-box-clear { margin-left: auto; border: 0; background: transparent; color: var(--danger); font-size: 12px; cursor: pointer; }
.se-box-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.se-box-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--surface-2); font-size: 11px; color: var(--text);
}
.se-box-chip em { font-style: normal; color: var(--fg-subtle); font-size: 10px; }
.se-box-chip i { font-style: normal; cursor: pointer; color: var(--danger); font-weight: 700; }
.se-box-empty { font-size: 12px; color: var(--fg-subtle); }

/* ============ AI 去字幕（suberase）三列脚手架（2026-10-09 UI 改造，对齐 .cr-col/.fs-col/.voice-col 同源） ============ */
.se-stage-wrap { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 0; padding: 18px 22px 36px; overflow-y: auto; }
.se-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器（列流光直接挂全局 .dh-col-beam；此处只管外观，与 .cr-col / .fs-col / .voice-col 同款） */
.se-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.se-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
.se-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.se-col:first-child .se-col-head { font-size: 18px; }
.se-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
/* 第三列：预览区占满列体 */
.se-col[data-sestep="3"] .se-col-body { justify-content: stretch; }
/* 第三列：视频预览（实时预览当前已选 / 生成中 / 最新成片；结果列表已迁入专属抽屉） */
.se-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.se-live-preview:hover { border-color: #D7D9DE; }
.se-live-card .se-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding-top: 8px; }
.se-live-card .se-live-preview video { flex: 0 0 auto; height: auto; object-position: 50% 0; }
.se-live-card .se-live-empty { margin: auto 0; }
.se-live-preview video { display: block; flex: 1 1 auto; min-height: 0; align-self: stretch; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #10131A; border-radius: 8px; }
.se-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.se-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.se-live-empty span { font-size: 14px; font-weight: 600; }
.se-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.se-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
.se-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.se-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.se-live-mask span { font-size: 13.5px; font-weight: 600; }
/* 列内文字整体 +1px（scoped 到 .se-col，对齐 .cr-col / .fs-col / .voice-col 口径；按钮 / cost-badge 不动） */
.se-col .card-head h3 { font-size: 15px; }
.se-col .card-head p { font-size: 14px; }
.se-col .generate-summary { font-size: 12px; }
.se-col .generate-tip { font-size: 11px; }
/* 第一列（2026-10-10 用户要求，对齐 cr 页 .cr-upload-preview）：
   ① 空态：上传框撑满列体（与第三列预览等高，不留突兀空白）；
   ② 已选态：只保留视频本体（.se-drop-inner 整体隐藏 → 不再多出「选择文件/从资产库选择」一行），
      高度改为按视频比例自然撑开（flex:0 0 auto + height:auto），视频完整显示不裁切。 */
.se-stage-wrap .se-col[data-sestep="1"] .se-col-body > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
.se-stage-wrap .se-col[data-sestep="1"] .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.se-stage-wrap .se-col[data-sestep="1"] .se-dropzone { flex: 1 1 auto; min-height: 320px; }
.se-stage-wrap .se-col[data-sestep="1"] .se-dropzone.has-video { flex: 0 0 auto; min-height: 0; }
.se-stage-wrap .se-col[data-sestep="1"] .se-dropzone.has-video .se-drop-inner { display: none; }
/* 去水印（dewm）第一列专用隔离（2026-10-10）：该页第一列含三张卡（介绍 / 解析链接 / 提交），
   不适用上面「单张上传卡逐级撑满」的口径 —— 三卡一律按内容高度自然排列（不再被拉高）；
   介绍卡恢复「图标在标题前」的行方向 flex，且内容靠左上（顶对齐），不再竖排居中。 */
.dw-stage .se-col[data-sestep="1"] .se-col-body > .card { flex: 0 0 auto; }
.dw-stage .se-col[data-sestep="1"] .se-col-body > .card.music-head-card { display: flex; flex-direction: row; align-items: flex-start; padding: 14px 16px; }
.dw-stage .se-col[data-sestep="1"] .card-body { flex: 0 0 auto; }
/* 第三列：预览卡撑满列体（消除底部空白），视频「顶对齐」按比例完整显示
   （2026-10-10 用户要求顶对齐；对齐 .cr-live-card / .fs-live-card / .vg-live-card 同源口径：
    预览区 justify-content:flex-start + 视频 flex:0 0 auto/height:auto/object-position:50% 0） */
.se-stage-wrap .se-col[data-sestep="3"] .se-col-body > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
.se-stage-wrap .se-col[data-sestep="3"] .se-live-card .card-head { flex: 0 0 auto; }
.se-stage-wrap .se-col[data-sestep="3"] .se-live-preview { flex: 1 1 auto; min-height: 0; justify-content: flex-start; }
/* 响应式：窄屏收列（同 .fs-grid / .cr-grid / .voice-grid） */
@media (max-width: 1180px) { .se-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .se-grid { grid-template-columns: 1fr; } .se-col { min-height: 0; } }

/* 去字幕抽屉空态：相对 .dh-right 绝对定位铺满 works 区（2026-10-20 用户反馈：空态框沉到抽屉底部；
   补齐 #imageEmptyState / #crEmptyState / #fsEmptyState 同款口径，缺这条时 .empty 会按普通流
   排在 flex:1 的作品列表之后被挤到底部，桌面/移动端一致） */
.dh-right #seEmptyState {
  position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0;
  background: var(--card); z-index: 2;
}

/* 结果卡：状态徽标 / 成本 / 占位 */
/* 2026-09-24 修「已完成徽标底色横贯整卡」：.rc-status 在本文件有两处定义（本行 + 下方 rc-cover 区那段）。
   absolute 元素若同时拿到 left 与 right 且 width:auto，宽度会被拉伸填满容器 —— 两处定义各贡献一个方向，
   合起来就把徽标撑成了长条。故本行不再声明 left，定位一律由下方那段（右上角）说了算。 */
.rc-status { position: absolute; top: 8px; z-index: 3; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.rc-status.success { background: rgba(43,178,110,.92); color:#fff; }
.rc-status.fail { background: rgba(229,77,66,.92); color:#fff; }
.rc-status.processing { background: rgba(var(--primary-rgb),.92); color:#fff; }
.rc-cost { color: var(--primary); font-weight: 600; }
.rc-thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--text); color: #6B7280; }
.rc-thumb-placeholder .ico { font-size: 40px; }
/* 无封面占位时徽标挪到左下角；必须显式 right:auto，否则仍会继承右上角的 right 而被拉宽 */
.rc-thumb-placeholder .rc-status { top: auto; bottom: 8px; left: 8px; right: auto; }

/* ============ 右侧结果 ============ */
.result-head {
    position: sticky; top: -18px; z-index: 10; display: flex; align-items: center; justify-content: space-between;
    margin: -18px -22px 16px; padding: 13px 22px 12px;
    border-bottom: 1px solid var(--border); background: var(--page);
}
.result-head-left { display: flex; align-items: center; gap: 10px; }
.result-head h3 { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 16px; font-weight: 650; }
.result-head h3 .ico { color: var(--muted); font-size: 18px; }
.result-count { color: var(--fg-subtle); font-size: 12px; }
.result-hint { color: #A9AEB8; font-size: 12px; padding-left: 10px; border-left: 1px solid var(--border); }
.result-actions { display: flex; align-items: center; gap: 8px; }
.refresh-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface);
    font-size: 12px; cursor: pointer; transition: all .15s;
}
.refresh-btn:hover { border-color: var(--hover-border); color: var(--hover-text); background: var(--hover-bg); }
.refresh-btn .ico { font-size: 13px; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: start; }
/* R176→R177（2026-10-07 用户反馈 hover 仍抖）：translateZ/will-change 没能根治，回退。
   抖动触发器是 hover 的 translateY 位移本身（叠加在重叠边缘上反复重绘），
   数字人卡片改为 hover 只提亮边框+阴影、不位移——观感仍是「浮起」，但物理上无移动、必然不抖。
   智能剪辑等其它模块的结果卡维持原 float 不变。 */
.result-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 3px rgba(31,35,41,.04); transition: border-color .18s, box-shadow .18s, transform .18s; }
.result-card.can-play { cursor: pointer; }
.result-card.can-play:hover { border-color: var(--hover-border); box-shadow: 0 6px 16px rgba(31,35,41,.08); transform: translateY(-2px); }
.dh-work-rc.result-card.can-play:hover { transform: none; box-shadow: 0 8px 20px rgba(0,0,0,.22); }

/* 封面统一 1:1 正方形（2026-09-19）：此前用 var(--cover-ratio) 按作品自身比例撑高，
   9:16 / 1:1 / 16:9 混排时同一行卡片高度差极大、网格零乱。统一为正方形后网格齐平，
   裁切交由下面的 object-fit: cover 承担；如需按页面差异化比例，只改这一行即可。 */
.rc-cover { position: relative; aspect-ratio: 1 / 1; background: #ECEEF2; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rc-cover video, .rc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.result-card:hover .rc-cover video, .result-card:hover .rc-cover img { transform: scale(1.03); }
.rc-cover video, .rc-cover img { transition: transform .35s ease; }

.rc-cover.pending { background: linear-gradient(135deg, #EAEEF6, var(--surface-2)); }
.rc-cover.pending::after {
    content: ''; display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.12) 58%, transparent 75%);
    background-size: 240% 100%; animation: coverPendingFlow 2.2s ease-in-out infinite;
}
@keyframes coverPendingFlow { 0% { background-position: 200% 0; } 100% { background-position: -40% 0; } }
.rc-cover.fresh video, .rc-cover.fresh img { animation: coverReveal 1.1s ease-out both; }
@keyframes coverReveal { 0% { opacity: .15; filter: blur(6px); } 100% { opacity: 1; filter: blur(0); } }

/* 徽标唯一的位置来源（右上角，与「我的作品」页 .wk-status 一致）。只给 right、不给 left，
   宽度即内容宽；nowrap 防止「处理中 30%」这类文案折行。 */
.rc-status { position: absolute; top: 9px; right: 9px; z-index: 4; padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rc-status.success { color: var(--success); background: #E8F7F0; }
.rc-status.pending { color: var(--fg-subtle); background: var(--surface-2); }
.rc-status.failed { color: var(--danger); background: #FDECEE; }

/* 文档卡片封面：文档类作品没有封面图，用居中文本图标 + 淡蓝底占位（与站点色板一致） */
.rc-doc-thumb { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--primary); background: linear-gradient(135deg, var(--primary-light), var(--surface-2)); }
.rc-doc-thumb .ico { width: 40px; height: 40px; opacity: .82; }

.rc-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-muted); font-size: 11px; }
.rc-loading .ico { width: 34px; height: 34px; color: var(--primary); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.rc-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; height: 3px; background: rgba(0,0,0,.1); }
.rc-progress-bar { height: 100%; background: var(--primary); transition: width .4s; }
.rc-progress-text { position: absolute; right: 8px; bottom: 7px; z-index: 5; color: var(--text); font-size: 10px; font-weight: 600; }

.rc-play {
    position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
    background: rgba(20,26,40,.28); opacity: 0; transition: opacity .18s;
}
.result-card.can-play:hover .rc-play { opacity: 1; }
.rc-play i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--primary); }
.rc-play i .ico { width: 22px; height: 22px; }

.rc-info { padding: 10px 12px 8px; border-top: 1px solid var(--border-subtle); background: var(--surface); }
/* min-height 与 max-height 同为 40px：标题无论 1 行还是 2 行都占满两行高度，
   消除封面统一后仅剩的卡片高度差，让同行卡片完全齐平。 */
.rc-title { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 500; line-height: 20px; max-height: 40px; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc-doc-preview { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 16px; max-height: 32px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 文案提取文档卡片：没有封面图，去掉封面区、整卡成正方形，只保留文案主体 */
.result-card.rc-doc { display: flex; flex-direction: column; aspect-ratio: 1 / 1; }
.result-card.rc-doc .rc-info { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: none; padding: 12px 12px 8px; }
.result-card.rc-doc .rc-doc-preview { flex: 1; min-height: 0; margin-top: 8px; max-height: none; font-size: 12px; line-height: 19px; -webkit-line-clamp: 6; }
.result-card.rc-doc .rc-tags { margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.result-card.rc-doc .rc-meta { border-top: 1px solid var(--surface-2); }
.rc-tags { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.rc-tag { padding: 2px 6px; border-radius: 4px; color: var(--muted); background: var(--surface-2); font-size: 10px; }
.rc-tag.err { color: var(--danger); background: #FDECEE; }
.rc-tag.cost { color: #D4380D; background: #FFF1E9; font-weight: 600; }
.rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 12px; border-top: 1px solid var(--surface-2); color: var(--fg-subtle); font-size: 11px; }
.rc-actions { display: flex; align-items: center; gap: 5px; }
.rc-action { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface); cursor: pointer; transition: all .15s; }
.rc-action:hover { border-color: var(--hover-border); color: var(--primary); background: var(--hover-bg); }
.rc-action.danger:hover { border-color: #F5B8C0; color: var(--danger); background: #FDECEE; }
.rc-action .ico { font-size: 14px; }
.linkish { color: var(--primary); cursor: pointer; font-size: 11px; }
.linkish:hover { text-decoration: underline; }

/* ============ 空状态 ============ */
.empty {
    grid-column: 1 / -1; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 50px 20px; border: 1px dashed #DDE0EA; border-radius: 10px; background: var(--surface-2); color: var(--fg-subtle); text-align: center;
}
.empty .empty-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 12px; color: var(--fg-subtle); background: var(--border-subtle); }
.empty h4 { color: var(--text); font-size: 14px; }
.empty p { margin-top: 2px; color: #9CA2B1; font-size: 12px; }

/* ============ 弹窗 ============ */
.mask { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(18,21,34,.58); }
.mask.show { display: flex; }
.dialog { width: 440px; max-width: 92vw; padding: 24px; border-radius: 10px; background: var(--surface); box-shadow: 0 16px 48px rgba(31,35,41,.2); animation: pop .18s ease; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dialog .d-icon { width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; }
.dialog .d-icon.warn { color: var(--primary); background: var(--primary-light); }
.dialog .d-icon .ico { width: 22px; height: 22px; }
.dialog h3 { font-size: 16px; font-weight: 680; text-align: center; margin-bottom: 6px; }
.dialog p { font-size: 12px; color: var(--muted); line-height: 1.6; text-align: center; }
.dialog code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); font-size: 11px; }
.dialog .d-info { margin: 16px 0 0; padding: 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; }
.dialog .d-info .row { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--fg-muted); }
.dialog .d-info .row > span:first-child { flex: 0 0 64px; color: var(--fg-subtle); }
.dialog .d-info .row .v { flex: 1; min-width: 0; display: flex; font-weight: 600; color: var(--text); }
.d-actions { display: flex; gap: 10px; margin-top: 18px; }
.d-btn { flex: 1; height: 38px; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .18s; }
.d-btn.primary { color:#fff; background: var(--primary); }
.d-btn.primary:hover { background: #1F5FD7; }
  .d-btn.ghost { color: var(--fg-muted); background: var(--surface-2); }
  .d-btn.ghost:hover { background: var(--surface-2); }
  /* AI 标识关闭前的合规提示弹窗 */
  .aigc-off-dialog { max-width: 460px; max-height: 86vh; overflow-y: auto; }
  .aigc-off-dialog .d-icon.warn { color: #C97A12; background: #FDF3E6; }
  .aigc-off-dialog p { text-align: left; margin: 0 2px 12px; }
  .aigc-off-dialog .d-info { text-align: left; }
  .aigc-off-dialog .d-info .row .v { font-weight: 600; color: var(--text); }
  /* 2026-10-22：AI标识状态弹窗（点页头「AI标识」按钮弹出）——当前状态行 + 单按钮。
     图标随状态换色：当前开启（按钮=关闭，警示语境）= 橙；当前关闭（按钮=开启）= 绿。 */
  .aigc-status-dialog .d-icon.warn { color: #C97A12; background: #FDF3E6; }
  .aigc-status-dialog .d-icon.ok { color: #27a567; background: #E8F6EF; }
  .aigc-status-dialog .aigc-status-line { text-align: center; font-size: 15px; color: var(--fg-muted); margin: 2px 2px 4px; }
  .aigc-status-dialog .aigc-status-line b { font-size: 18px; font-weight: 700; margin-left: 6px; }
  .aigc-status-dialog .aigc-status-line b.on { color: #27a567; }
  .aigc-status-dialog .aigc-status-line b.off { color: #C97A12; }
  /* 管理后台：AI 标识申请记录标签 */
  .aigc-tag { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 600; }
  .aigc-tag.tag-off { color: #C97A12; background: #FDF3E6; }
  .aigc-tag.tag-on { color: var(--success); background: #E8F6EF; }
  /* 水印申请记录：操作列纯彩字（无底色） */
  .aigc-txt { font-size: 15px; font-weight: 500; }
  .aigc-txt.tag-off { color: #E6A23C; }
  .aigc-txt.tag-on { color: #1DAF6C; }

/* 多服务商：Tab + 模型列表 */
.prov-tabs { display: flex; gap: 6px; margin: 14px 0 4px; flex-wrap: wrap; }
.prov-tab {
  padding: 6px 14px; border-radius: 7px; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--surface-2); border: 1px solid transparent; transition: all .15s;
}
.prov-tab:hover { color: var(--text); }
.prov-tab.active { color: var(--primary-dark); background: var(--primary-light); border-color: rgba(var(--primary-rgb),.28); }

.d-extra { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: 12px; }
.d-extra .muted-hint { color: var(--fg-faint); }

.models-box { margin: 8px 0 2px; padding: 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid #EDEFF3; max-height: 168px; overflow-y: auto; }
.models-box .mb-title { font-size: 11.5px; color: var(--fg-subtle); margin-bottom: 8px; }
.model-chip {
  display: inline-block; margin: 0 6px 6px 0; padding: 3px 9px; border-radius: 20px; font-size: 11.5px;
  color: var(--primary-dark); background: var(--primary-light); border: 1px solid rgba(var(--primary-rgb),.18); cursor: pointer; transition: all .15s;
}
.model-chip:hover { background: var(--hover-bg); }

/* 设置弹窗顶层 Tab（模型 / 平台） */
.top-tabs { display: flex; gap: 4px; margin: 8px 0 14px; padding: 3px; background: var(--surface-2); border-radius: 8px; }
.top-tab { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; color: var(--muted); border-radius: 6px; cursor: pointer; transition: all .15s; }
.top-tab:hover { color: var(--text); }
.top-tab.active { background: var(--surface); color: var(--primary-dark); font-weight: 600; box-shadow: 0 1px 2px rgba(31,35,41,.1); }

/* 模型管理行 */
.mt-hint { font-size: 11.5px; color: var(--fg-subtle); margin-bottom: 10px; line-height: 1.6; }
.model-row { padding: 12px; border: 1px solid #EDEFF3; border-radius: 10px; margin-bottom: 10px; background: #FBFBFD; }
.model-row:last-child { margin-bottom: 0; }
.mr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mr-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mr-id { font-size: 11px; color: var(--fg-faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
.mr-cur { margin-left: auto; font-size: 11px; color: var(--success); background: #EAF6EF; padding: 2px 8px; border-radius: 12px; }
.mr-body { display: flex; gap: 12px; flex-wrap: wrap; }
.mr-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; }
.mr-field > span { font-size: 11.5px; color: var(--fg-subtle); }
.mr-prov, .mr-name { width: 100%; }
.add-model-btn { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 12px; padding: 7px 14px; border: 1px dashed var(--primary); border-radius: 8px; background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.add-model-btn:hover { background: #EAF2FF; }
.mr-del { margin-left: auto; padding: 3px 10px; border: 1px solid #F2C9CD; border-radius: 6px; background: #FFF5F6; color: var(--danger); font-size: 11.5px; cursor: pointer; transition: all .15s; }
.mr-del:hover { background: #FDECEE; border-color: #EAA9B0; }
.price-input { width: 84px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.price-input:focus { border-color: var(--primary); outline: none; }
.add-mask { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; background: rgba(10,12,20,.5); }
.add-dialog .d-form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 4px; }
.add-dialog .d-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.add-dialog .d-form .text-input { width: 100%; }

/* 主生成区只读平台标识 */
.provider-select .ps-value { font-size: 15px; color: var(--text); font-weight: 500; padding: 3px 10px; background: var(--surface-2); border-radius: 6px; }

.video-mask { position: fixed; inset: 0; z-index: 1001; display: none; align-items: center; justify-content: center; background: rgba(10,12,20,.86); }
.video-mask.show { display: flex; }
.video-box { position: relative; width: min(430px, 88vw); }
.video-box video { width: 100%; max-height: 84vh; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); display: block; }
.video-box .v-close { position: absolute; top: -34px; right: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color:#fff; background: rgba(255,255,255,.16); font-size: 20px; cursor: pointer; }
.video-box .v-close:hover { background: rgba(255,255,255,.3); }

/* ============ Toast ============ */
/* 2026-10-14：toast 提到 4000（此前 2000，低于会员中心 .uc-mask 2100 / 裁切弹窗 3000，会被弹窗遮挡） */
/* 2026-10-30：四态改「色相底 + 高对比字 + 左侧强调条 + 1px 描边」。
   原先 info（无 type 时也走这条）是 #20232A 深灰底 + 白字，深色页面底是 #0C0E11，
   整块只比背景亮两三档，用户反馈「提醒看不见」。现在按语义分四色，深浅主题各配一套，
   并把左侧 3px 色条做进 inset 阴影（不用 border-left，圆角处不会出现直角毛刺）。 */
#toast { position: fixed; top: 22px; left: 50%; z-index: 4000; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast-item {
    display: flex; align-items: flex-start; gap: 9px; max-width: min(620px, 78vw);
    padding: 11px 16px 11px 14px; border-radius: 10px;
    font-size: 15px; line-height: 1.55; font-weight: 500;
    animation: toastIn .2s ease;
    /* 默认 = info（蓝色过程提示）：浅底深字，白卡与深色页上都压得住 */
    background: #E6F0FF; color: #1B4BB0; border: 1px solid #B3CCFF;
    box-shadow: inset 3px 0 0 #2E6CEC, 0 14px 40px rgba(24,24,27,.18);
}
.toast-item .ico { font-size: 17px; flex: 0 0 auto; margin-top: 2px; }
.toast-item > span { min-width: 0; overflow-wrap: break-word; }
/* warn（琥珀）：不处理就会提交失败 / 素材被截断的提醒 —— 比 info 高一级，强制用户看见 */
.toast-item.warn {
    background: #FFF0CE; color: #8A5300; border-color: #EFC77A;
    box-shadow: inset 3px 0 0 #E08B0C, 0 14px 40px rgba(24,24,27,.18);
}
.toast-item.success {
    background: #E2F7EC; color: #0C6242; border-color: #A0D9BD;
    box-shadow: inset 3px 0 0 #16845B, 0 14px 40px rgba(24,24,27,.18);
}
.toast-item.error {
    background: #FFE7E9; color: #A2212A; border-color: #F3B5BC;
    box-shadow: inset 3px 0 0 #C9363E, 0 14px 40px rgba(24,24,27,.18);
}
/* 深色主题：深底 + 亮字（不用浅色卡片，避免在近黑页面上闪白） */
:root[data-theme="dark"] .toast-item {
    background: #16304F; color: #B9D5FF; border-color: #35598F;
    box-shadow: inset 3px 0 0 #4C8DFF, 0 16px 44px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .toast-item.warn {
    background: #45320D; color: #FFD98F; border-color: #7D5E1B;
    box-shadow: inset 3px 0 0 #E0A23C, 0 16px 44px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .toast-item.success {
    background: #123A2B; color: #7FE3BA; border-color: #236349;
    box-shadow: inset 3px 0 0 #3FB985, 0 16px 44px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .toast-item.error {
    background: #4A1C22; color: #FFADB4; border-color: #8A3840;
    box-shadow: inset 3px 0 0 #F0616B, 0 16px 44px rgba(0,0,0,.55);
}
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* 素材区常驻提醒条：夹在灰色小字里根本看不见，单独成块（琥珀） */
.hint-warn {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; padding: 7px 10px;
    border-radius: 7px; background: #FFF0CE; border: 1px solid #EFC77A;
    color: #8A5300; font-size: 12px; line-height: 1.55; font-weight: 500;
}
.hint-warn .ico { font-size: 13px; flex: 0 0 auto; margin-top: 2px; }
:root[data-theme="dark"] .hint-warn { background: #3A2A0B; border-color: #6E5217; color: #FFD482; }

@media (max-width: 1360px) {
    .jm-left { width: 440px; flex-basis: 440px; }
    .image-stage .jm-left, .tools-stage .jm-left, .dh-left { width: 440px; flex-basis: 440px; }
    .result-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 1100px) {
    .jm-left { width: 400px; flex-basis: 400px; }
    .image-stage .jm-left, .tools-stage .jm-left, .dh-left { width: 400px; flex-basis: 400px; }
    .dh-body { grid-template-columns: 1fr; }
    .dh-ph { display: none; }
    .result-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .rc-cover.pending::after { animation: none !important; opacity: .18; }
    .rc-loading .ico { animation-duration: 2s; }
    .dh-body .dh-pane { animation: none !important; }
    .dh-step-btn, .dh-step-btn .dh-step { transition: none !important; transform: none !important; }
    .dh-step-btn.active .dh-step { animation: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------- 登录态账号信息块 ---------------- */
.acct-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary-dark);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid #D6E4FF;
}
.acct-chip .acct-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-chip .acct-bal { color: var(--danger); font-weight: 700; }
.acct-chip .acct-unit { color: #8aa3d6; font-weight: 500; font-size: 12px; }

/* ---------------- 系统公告横幅 ---------------- */
.site-notice {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 42px 12px 16px;
  background: #FFF7E8; border: 1px solid #FFE1B3; border-radius: 8px;
  color: #8a5b00; font-size: 19px; line-height: 1.6;
}
.site-notice .ico { flex: 0 0 auto; color: #E6A23C; }
.site-notice-text { flex: 1; min-width: 0; text-align: center; font-weight: 700; }
.site-notice-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: #8a5b00;
  font-size: 22px; line-height: 1; cursor: pointer; opacity: .7;
}
.site-notice-close:hover { background: rgba(230, 162, 60, .15); opacity: 1; }
[data-theme="dark"] .site-notice { background: #2a2215; border-color: #5c4518; color: #f0c070; }
[data-theme="dark"] .site-notice .ico { color: #f0c070; }
[data-theme="dark"] .site-notice-close { color: #f0c070; }
[data-theme="dark"] .site-notice-close:hover { background: rgba(240, 192, 112, .15); }

/* ================= 版面重构：内容列 + 二级菜单 + 首页 ================= */
.content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.main-stage { flex: 1; min-height: 0; }
.placeholder-area { flex: 1; }

/* ---------- 二级菜单（内容区上方横排） ---------- */
.subbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.sub-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 8px; font-size: 14.5px; color: var(--text);
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
}
.sub-item:hover { background: var(--surface-2); }
.sub-item.active { background: var(--primary); color:#fff; font-weight: 600; }
.sub-item .ico { width: 15px; height: 15px; }

/* ---------- 首页 ---------- */
.home-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 6px 4px 20px; }
/* 底部备案信息：固定悬浮在视口最下方（2026-10-15 用户要求，不随内容多少移动）。
   元素已于 2026-10-15 移至 body 级 —— 原先放在 #worksStage 内，会随「我的作品」视图
   display:none 一起被藏掉（总站首页看不到备案号的根因）；渲染由 brand.js 统一负责。
   2026-10-15 三改：背景透明 + 去分隔线（用户要求与页面主背景融为一体） */
.site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; box-sizing: border-box; width: 100%; margin: 0; padding: 9px 22px; text-align: right; font-size: 13px; line-height: 1.6; color: var(--text-tertiary); background: transparent; border-top: none; }
.site-footer[hidden] { display: none; }
/* 固定备案号占位（2026-10-15）：侧栏与各工作区底部留出备案号高度，避免内容被遮挡 */
.sidebar { padding-bottom: 48px; }
.main-stage, .home-stage, .works-stage .wk-scroll, .ecom-stage, .pv-stage, .sv-stage,
.dh-stage, .tools-stage, .chat-stage, .assets-stage, .se-stage, .cvhub-stage, .canvas-stage, .tpl-section { padding-bottom: 52px; }
.site-footer a { color: var(--text-tertiary); text-decoration: none; }
.site-footer a:hover { color: var(--primary); text-decoration: underline; }
.home-hero { text-align: center; padding: 26px 0 4px; }
.home-hero .hero-title { font-size: 46px; font-weight: 750; color: var(--text); letter-spacing: .5px; }
/* 逐字动画：JS 把标题拆成 .hc 字符 span，纯文字用 --text，渐变段用 .em/.gold */
.home-hero .hero-title .hc { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.home-hero .hero-title .hc.em,
.home-hero .hero-title .hc.gold { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 220% 100%; background-position: 0% 50%; }
.home-hero .hero-title .hc.em { background-image: var(--grad-cta); }
.home-hero .hero-title .hc.gold { background-image: linear-gradient(100deg, #FFE08A 0%, #F5C043 50%, #E89B2D 100%); }
/* 阶段一：逐字从远处「打」上来（模糊+缩放+上移淡入，左→右依次） */
@keyframes hcIn { 0% { opacity: 0; transform: translateY(-26px) scale(.55); filter: blur(16px); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
/* 阶段二：整行波动一次（一道波纹左→右横扫） */
@keyframes hcWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
/* 阶段三：高亮从左上→右下扫过一次（亮色+轻下移，随延迟向右下推进） */
@keyframes hcShine { 0%, 100% { filter: brightness(1); transform: translateY(0); } 50% { filter: brightness(2.1) drop-shadow(0 0 7px rgba(255,255,255,.55)); transform: translateY(7px); } }
/* 持续：渐变缓慢流动（入场/波动/高亮结束后继续） */
@keyframes heroGradDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .home-hero .hero-title .hc { opacity: 1 !important; animation: none !important; } }
.home-hero .hero-sub { margin-top: 12px; color: var(--fg-subtle); font-size: 20px; }

.home-type-capsule {
  margin: 0 auto; display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: 999px;
}
.ht-item { padding: 8px 26px; border-radius: 999px; font-size: 14px; color: var(--fg-muted); cursor: pointer; user-select: none; }
.ht-item.active { background: var(--surface); color: var(--text); font-weight: 650; box-shadow: 0 1px 4px rgba(31,35,41,.12); }

.quick-card {
  width: min(860px, 100%); margin: 0 auto; padding: 16px 18px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 4px 20px rgba(31,35,41,.06);
  display: flex; flex-direction: column; gap: 12px;
}
.qc-uploader { display: flex; gap: 8px; flex-wrap: wrap; }
.qc-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.qc-thumb img, .qc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qc-thumb .qc-remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.55); color:#fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer;
}
.qc-thumb .qc-tag {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 1px 6px;
  background: rgba(0,0,0,.45); color:#fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qc-add {
  width: 72px; height: 72px; border-radius: 10px; border: 1px dashed var(--border-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--fg-subtle); font-size: 11px; cursor: pointer; background: var(--surface-2);
}
.qc-add:hover { border-color: var(--primary); color: var(--primary); }
.qc-add .plus-icon { width: 16px; height: 16px; position: relative; }
.qc-add .plus-icon::before, .qc-add .plus-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; }
.qc-add .plus-icon::before { left: 7px; top: 2px; width: 2px; height: 12px; }
.qc-add .plus-icon::after { left: 2px; top: 7px; width: 12px; height: 2px; }

.qc-prompt {
  width: 100%; min-height: 88px; resize: vertical; border: none; outline: none;
  font-size: 15px; line-height: 1.7; color: var(--text); background: transparent; font-family: inherit;
}
.qc-prompt::placeholder { color: var(--text-tertiary); }
.qc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qc-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-model {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; background: var(--primary-light); color: var(--primary);
  font-size: 15px; font-weight: 600; cursor: pointer; user-select: none;
}
.qc-model .qc-arrow { font-size: 10px; opacity: .8; }
.qc-model-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(31,35,41,.16); padding: 6px;
}
.qc-model-panel .qm-head { padding: 6px 10px; font-size: 11px; color: var(--fg-subtle); }
.qc-model-panel .qm-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 15px; color: var(--text); cursor: pointer;
}
.qc-model-panel .qm-item:hover { background: var(--primary-light); }
.qc-model-panel .qm-item.active { color: var(--primary); font-weight: 600; }
.qc-model-panel .qm-item .ico { width: 14px; height: 14px; }
.qc-model-panel .qm-item .qm-check { margin-left: auto; width: 14px; height: 14px; color: var(--primary); }
/* 首页创作卡模型下拉（#homeModelPanel）：2026-10-09 用户要求复用视频生成页同款降噪口径——
   面板加宽（260→400px）、能力关键词去蓝胶囊改灰色纯文字并与模型名同行右对齐、
   模型名 12.5→14px、悬停/选中改中性 soft 底（主题色只落选中模型名 + 对勾） */
#homeModelPanel { width: 540px; max-width: calc(100vw - 48px); padding: 8px; border-radius: 14px; }
#homeModelPanel .qm-head { padding: 4px 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
#homeModelPanel .qm-item { padding: 10px 12px; border-radius: 10px; }
#homeModelPanel .qm-item + .qm-item { margin-top: 2px; }
#homeModelPanel .qm-item:hover { background: var(--soft); }
#homeModelPanel .qm-item.active { background: var(--soft); color: var(--text); }
#homeModelPanel .qm-item.active .qm-label { color: var(--primary); }
/* 2026-10-09 二次调整：400px 仍不够，最长模型名+关键词（如 Nano Banana 2 + 五个关键词）
   会折成两行；加宽到 540px 并强制单行（去 flex-wrap），溢出侧用 ellipsis 兜底 */
#homeModelPanel .qm-item-main { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 4px 10px; overflow: hidden; }
#homeModelPanel .qm-label { font-size: 14px; font-weight: 600; gap: 8px; white-space: nowrap; flex-shrink: 0; }
#homeModelPanel .qm-label .ico { width: 15px; height: 15px; }
#homeModelPanel .qm-caps { margin-left: auto; flex-shrink: 1; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; min-width: 0; gap: 0; overflow: hidden; text-overflow: ellipsis; }
#homeModelPanel .cap { background: transparent; color: var(--fg-subtle); padding: 0; font-size: 10.5px; line-height: 1.5; border-radius: 0; white-space: nowrap; }
#homeModelPanel .cap + .cap::before { content: '·'; margin: 0 4px; opacity: .55; }
.qc-select {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  font-size: 15px; color: var(--text); cursor: pointer; max-width: 130px;
}
.qc-select:focus { border-color: var(--primary); outline: none; }

/* ---------- 首页参数：胶囊按钮 + 上拉弹窗（2026-10-30 改版） ----------
   原来并排 5 个原生 <select>，窄屏折行、视觉也杂。现压成两枚胶囊，
   点开向上弹出面板（工具栏在卡片底部，只能向上长）。
   面板宽度固定而不用 100%：面板是子元素，靠 left:0/bottom:100% 贴住按钮。 */
.qp-param { position: relative; display: inline-flex; }
.qp-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 13.5px; font-family: inherit; cursor: pointer; max-width: 46vw; transition: border-color .12s, background .12s;
}
.qp-pill:hover { border-color: var(--border-strong); }
.qp-pill.open { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.qp-pill .ico { width: 14px; height: 14px; flex-shrink: 0; }
.qp-pill-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-pill .qc-arrow { font-size: 10px; opacity: .7; flex-shrink: 0; transition: transform .15s; }
.qp-pill.open .qc-arrow { transform: rotate(180deg); }

.qp-pop {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 70;
  width: 320px; max-width: calc(100vw - 32px);
  /* 向上弹：.home-stage 是 overflow-y:auto 的滚动容器，面板太高会被顶到内容区外而看不到，
     所以给自己封顶并允许内部滚动（图片模型的分辨率档位可能很多） */
  max-height: min(70vh, 440px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28); padding: 14px;
}
.qp-pop-sm { width: 268px; }
/* 注：不用写窄屏断点 —— ≤760px 时 .quick-card 整卡隐藏（mobile.css L242），
   手机端走的是另一套 H5 入口，参数胶囊不会出现。 */
.qp-sec + .qp-sec { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.qp-sec.dis { opacity: .42; pointer-events: none; }
.qp-sec-hd { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 9px; letter-spacing: .02em; }
.qp-hint { margin-top: 8px; font-size: 11px; line-height: 1.55; color: var(--fg-subtle); }
.qp-hint b { color: var(--warning); font-weight: 700; }
.qp-empty { padding: 10px 2px; font-size: 12.5px; color: var(--fg-subtle); }

/* 等分胶囊（画质 / 动态优化 关·开） */
.qp-chips {
  /* 用 grid 而不是 flex：既要「同排等宽」（好看），又要「放不下就整颗换行」（不裁字）。
     flex:1 1 0 会把长文字（1024×1536 这类分辨率档）压扁裁掉；flex:1 1 auto 又排不齐。
     minmax(84px,1fr) 是两者的平衡：够宽就等分，不够就换行。 */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px;
}
.qp-chip {
  min-width: 0; padding: 8px 8px; border-radius: 9px; border: 1px solid transparent;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit;
  cursor: pointer; text-align: center; white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
}
.qp-chip:hover { background: var(--soft); }
.qp-chip.on { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 650; }

/* 画幅：三列网格，每格带一个按真实长宽比画的缩略框 */
.qp-ratios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qp-ratio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px 7px; border-radius: 9px; border: 1px solid transparent; background: var(--surface-2);
  color: var(--text); font-size: 11.5px; font-family: inherit; cursor: pointer; line-height: 1.2;
  transition: background .12s, color .12s, border-color .12s;
}
.qp-ratio:hover { background: var(--soft); }
.qp-ratio.on { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 650; }
.qp-ratio .rg { height: 16px; display: grid; place-items: center; }
.qp-ratio .rg i { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.qp-ratio .rl { white-space: nowrap; }

/* 拖拽轴（时长 / 动作速度）：保留 UA 原生外观，只用 accent-color 上主题色。
   ★ 不要加 -webkit-appearance:none —— 那会把轨道一起抹掉，只剩一个孤零零的蓝色圆点（已踩过）。 */
.qp-slide { display: flex; align-items: center; gap: 12px; }
.qp-range { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: var(--primary); cursor: pointer; }
.qp-num {
  flex-shrink: 0; min-width: 54px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2);
  text-align: center; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.qp-num small { margin-left: 1px; font-size: 11px; font-weight: 500; opacity: .65; }
.qp-static { font-size: 13px; color: var(--fg-subtle); }
.qc-right { display: flex; align-items: center; gap: 12px; }
.qc-count { color: var(--fg-subtle); font-size: 12px; }
.qc-cost { color: var(--warning); font-size: 15px; font-weight: 600; white-space: nowrap; }
.qc-generate {
  width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--primary); color:#fff; display: grid; place-items: center;
}
.qc-generate:hover { background: #245BD0; }
.qc-generate:disabled { opacity: .55; cursor: default; }
.qc-generate .ico { width: 18px; height: 18px; }
.qc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qc-foot a {
  display: inline-flex; align-items: center; gap: 6px; color: var(--fg-subtle); font-size: 15px;
  text-decoration: none; cursor: pointer;
}
.qc-foot a:hover { color: var(--primary); }

/* ---------- 创作模板 ---------- */
.tpl-section { width: min(1100px, 100%); margin: 0 auto; }
.tpl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tpl-head h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.tpl-sub { color: var(--fg-subtle); font-size: 12px; }
/* 精选案例使用下方「精选案例」段的 column-count 瀑布流布局（此处不再定义 grid） */
.tpl-card {
  position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); transition: transform .15s ease, box-shadow .15s ease;
}
.tpl-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,35,41,.14); }
.tpl-cover { position: relative; background: var(--surface-2); }
.tpl-cover img { width: 100%; height: auto; object-fit: cover; display: block; }
.tpl-cover .tpl-type {
  position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 5px;
  background: rgba(0,0,0,.5); color:#fff; font-size: 11px;
}
.tpl-cover.tpl-empty { display: grid; place-items: center; color: var(--fg-faint); }
.tpl-cover.tpl-empty .ico { width: 30px; height: 30px; }
.tpl-info { padding: 10px 12px 12px; }
.tpl-title { font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-desc { margin-top: 4px; color: var(--fg-subtle); font-size: 12px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; }
.tpl-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 12px; font-weight: 600; }

/* ---------- 首页快捷创作：参考 / 首尾帧模式 ---------- */
.qc-uploader { flex-direction: column; align-items: stretch; }
/* 头部行恒定占位：有「参考/首尾帧」Tab 时实测高 26px，无 Tab 时靠 min-height 撑到同样高，
   保证各模型之间、视频与图片之间创作框高度一致（2026-09-13 用户要求，勿删 min-height） */
.qc-modes { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.qc-mode {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 7px; font-size: 15px; color: var(--fg-muted);
  cursor: pointer; user-select: none;
}
.qc-mode .ico { width: 14px; height: 14px; }
.qc-mode:hover { background: var(--surface-2); }
.qc-mode.active { background: var(--primary-light); color: var(--primary); font-weight: 650; }
.qc-clear { margin-left: auto; color: var(--fg-subtle); font-size: 12px; cursor: pointer; user-select: none; }
.qc-clear:hover { color: var(--danger); }
/* 「从资产库选择」入口（2026-10-25）：与「清空素材」同一行，图标 + 两字，克制不抢主视觉；
   与右侧「清空」之间靠 .qc-clear 的 margin-left:auto 自然分开（入口靠左、清空靠右） */
.qc-lib {
  display: inline-flex; align-items: center; gap: 4px; color: var(--primary);
  font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap;
}
.qc-lib .ico { width: 13px; height: 13px; }
.qc-lib:hover { opacity: .78; }
.qc-slots { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qc-count-tag {
  font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--fg-subtle);
  background: var(--surface-2); border-radius: 4px; padding: 0 5px; line-height: 16px;
}
.qc-add { position: relative; }
.qc-add .qc-count-tag { position: absolute; right: 5px; top: 5px; }
.qc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 10px; border-radius: 8px; background: var(--primary-light);
  color: var(--primary); font-size: 12px; font-weight: 600; max-width: 160px;
}
.qc-chip .ico { width: 14px; height: 14px; flex: 0 0 auto; }
.qc-chip span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-audio-row { display: flex; gap: 8px; }
.qc-audio-row input {
  flex: 1; height: 32px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 15px; outline: none;
}
.qc-audio-row input:focus { border-color: var(--primary); }
.qc-hint { color: var(--fg-subtle); font-size: 11.5px; line-height: 1.6; }
/* 首页创作卡（视频/图片两模式共用）所有文字 +1px（2026-10-09 用户要求）。
   scoped 到 .quick-card，不影响视频生成页复用的 .qc-model-panel 下拉与全站 .upload-status */
.quick-card .qc-add { font-size: 12px; }
.quick-card .qc-thumb .qc-tag, .quick-card .qc-fl-slot .qc-tag { font-size: 11px; }
.quick-card .qc-count-tag { font-size: 11.5px; }
.quick-card .qc-fl-slot .qc-req { font-size: 11px; }
.quick-card .qc-prompt { font-size: 15px; }
.quick-card .qc-mode { font-size: 13.5px; }
.quick-card .qc-clear { font-size: 13px; }
.quick-card .qc-model { font-size: 13.5px; }
/* 2026-10-09 用户要求：模型按钮去掉蓝底，改成与右侧时长/画质/比例下拉一致的中性描边样式；
   品牌图标放大到 16px（14px 下 Grok 斜杠+环形细节糊成圆圈，辨识度差） */
.quick-card .qc-model {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 6px 11px;
}
.quick-card .qc-model:hover { border-color: var(--border-strong); }
.quick-card .qc-model .ico { width: 16px; height: 16px; }
.quick-card .qc-select { font-size: 13.5px; }
.quick-card .qc-count { font-size: 13px; }
.quick-card .qc-cost { font-size: 13.5px; }
.quick-card .qc-foot a { font-size: 13.5px; }
.quick-card .upload-status { font-size: 12px; }
.quick-card .qc-hint { font-size: 15px; }
.quick-card .qc-chip { font-size: 13px; }
.quick-card .qc-fl-slot { font-size: 12px; }
.quick-card .qc-audio-row input { font-size: 13.5px; }
/* 首尾帧槽位尺寸必须与参考图槽位 .qc-add 完全一致（72×72），
   否则切到 Veo 3.1 这类「首尾帧」模型时创作框里两块框明显偏大（2026-09-13 用户要求，改尺寸时两处一起改） */
.qc-fl-slot {
  position: relative; width: 72px; height: 72px; border-radius: 10px;
  border: 1px dashed var(--border-strong); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--fg-subtle); font-size: 11px; cursor: pointer; overflow: hidden;
}
.qc-fl-slot:hover { border-color: var(--primary); color: var(--primary); }
.qc-fl-slot.has-file { border-style: solid; }
.qc-fl-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qc-fl-slot .plus-icon { width: 16px; height: 16px; position: relative; }
.qc-fl-slot .plus-icon::before, .qc-fl-slot .plus-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; }
.qc-fl-slot .plus-icon::before { left: 7px; top: 2px; width: 2px; height: 12px; }
.qc-fl-slot .plus-icon::after { left: 2px; top: 7px; width: 12px; height: 2px; }
.qc-fl-slot .qc-remove {
  position: absolute; top: 2px; right: 2px; z-index: 3; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.55); color:#fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer;
}
.qc-fl-slot .qc-tag {
  position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; padding: 1px 6px;
  background: rgba(0,0,0,.45); color:#fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qc-fl-slot .qc-req {
  position: absolute; right: 4px; top: 4px; z-index: 2;
  font-style: normal; font-size: 10px; color: var(--danger); background: #FDECEE;
  border-radius: 4px; padding: 0 5px; line-height: 16px;
}
.qc-fl-slot .qc-req.opt { color: var(--fg-subtle); background: var(--surface-2); }
.qc-fl-arrow { color: var(--fg-faint); font-size: 18px; font-weight: 700; }

/* ---------- 精选案例 ---------- */
.tpl-section { width: min(1680px, 100%); }
.tpl-head { align-items: center; }
.tpl-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 6px; }
.tpl-tab {
  padding: 5px 14px; border-radius: 999px; font-size: 15px; color: var(--fg-muted);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.tpl-tab:hover { background: var(--surface-2); }
.tpl-tab.active { background: var(--grad-cta); color:#fff; font-weight: 600; box-shadow: 0 4px 14px rgba(94,99,245,.35); }
.tpl-tab-dropdown { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.tpl-tab-dropdown .tpl-dropdown-arrow { font-size: 10px; opacity: .75; }
.tpl-tab-dropdown .tpl-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 150px;
  background: #1B1F27; border-radius: 10px; padding: 6px; display: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.22); z-index: 50;
}
.tpl-tab-dropdown.open .tpl-dropdown { display: block; }
.tpl-dropdown-item {
  color: rgba(255,255,255,.9); padding: 7px 12px; border-radius: 6px;
  font-size: 15px; cursor: pointer; white-space: nowrap;
}
.tpl-dropdown-item:hover { background: rgba(255,255,255,.12); color:#fff; }
.tpl-dropdown-item.active { background: rgba(255,255,255,.2); color:#fff; font-weight: 600; }

/* display 必须是 block：grid 容器会忽略 column-count，且同行卡片被拉伸等高，矮卡片下方出现大片空白 */
/* 瀑布流布局：column-count 多列 + 卡片 break-inside 避免截断 */
.tpl-grid { column-count: 6; column-gap: 12px; padding-bottom: 4px; }
.tpl-empty-tip { color: var(--fg-subtle); font-size: 14px; padding: 48px 16px; text-align: center; line-height: 1.8; }
.tpl-card {
  width: 100%; margin: 0 0 12px; break-inside: avoid;
  border-radius: 12px; overflow: hidden; cursor: pointer; position: relative;
  background: var(--surface); border: 1px solid var(--border); transition: transform .15s ease, box-shadow .15s ease;
}
.tpl-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,35,41,.14); }
.tpl-cover { position: relative; width: 100%; background: var(--surface-2); }
/* 封面按媒体原始比例完整显示：1:1 图片显示正方形、9:16 视频满高、横屏视频矮条，不再统一裁切 */
.tpl-cover img, .tpl-cover video { width: 100%; height: auto; display: block; background: var(--surface-2); }
.tpl-cover.tpl-empty { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--fg-faint); }
.tpl-cover.tpl-empty .ico { width: 30px; height: 30px; }
.tpl-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s ease;
}
.tpl-card:hover .tpl-hover { opacity: 1; }
.tpl-hover span {
  padding: 7px 18px; border-radius: 999px; background: var(--grad-cta);
  color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(46,108,236,.4);
}
.tpl-cover .tpl-type { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 5px; background: rgba(0,0,0,.5); color:#fff; font-size: 11px; z-index: 2; }
.tpl-info { padding: 10px 12px 12px; }
.tpl-title { font-size: 13px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-desc { margin-top: 3px; color: var(--fg-subtle); font-size: 11.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 案例详情弹窗 ---------- */
.tpl-modal-mask {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 8, 12, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 24px;
}
.tpl-modal-mask.show { display: flex; }
/* IP 档案库标准（2026-10-11）：外壳 overflow:hidden 承载双流光（.dh-dlg-beam，HTML 已挂），
   滚动交给内层 .tpl-scroll，流光描边不会被滚走/裁切；描边 + 大投影拉开层次 */
.tpl-modal {
  position: relative; width: min(880px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
}
.tpl-scroll { overflow-y: auto; min-height: 0; }
:root[data-theme="dark"] .tpl-modal { background: var(--soft); }   /* 深色下面板提亮一级（IP 档案库口径） */
.tm-close {
  position: absolute; right: 14px; top: 10px; z-index: 5; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(0,0,0,.45); color:#fff; font-size: 18px;
  display: grid; place-items: center; cursor: pointer;
}
.tm-media { background: #101215; border-radius: 16px 16px 0 0; min-height: 120px; }
.tm-media video, .tm-media img { width: 100%; max-height: 460px; object-fit: contain; display: block; }
.tm-media.tm-empty { display: grid; place-items: center; color: var(--fg-muted); height: 160px; }
.tm-audio-cover { max-width: 240px; max-height: 240px; border-radius: 10px; display: block; margin: 10px auto 0; }
.tm-audio { width: 100%; margin: 10px 0; }
.tm-body { padding: 16px 20px 20px; }
.tm-title { font-size: 17px; font-weight: 700; color: var(--text); }
.tm-desc { margin-top: 6px; color: var(--fg-subtle); font-size: 13px; line-height: 1.6; }
.tm-refs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tm-refs img, .tm-refs video { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.tm-prompt-box { margin-top: 12px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.tm-prompt-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg-subtle); }
.tm-copy { color: var(--primary); cursor: pointer; font-weight: 600; user-select: none; }
.tm-prompt { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--text); max-height: 120px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
.tm-go {
  margin-top: 14px; width: 100%; padding: 11px 0; border: none; border-radius: 10px;
  background: var(--primary); color:#fff; font-size: 14px; font-weight: 650; cursor: pointer;
}
.tm-go:hover { background: #245BD0; }

/* 弹窗内容过长时内部滚动，不超出屏幕 */
.dialog { max-height: 86vh; overflow-y: auto; }
.dialog .d-form video { max-width: 100%; }

/* ---------- 作品详情弹窗 ---------- */
.work-modal-mask {
  display: none; position: fixed; inset: 0; z-index: 210;
  background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 24px;
}
.work-modal-mask.show { display: flex; }
.work-modal {
  position: relative; width: min(960px, 100%); max-height: 92vh; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  display: flex; flex-direction: column;
}
:root[data-theme="dark"] .work-modal { background: var(--soft); }
/* 作品详情弹窗常驻双流光边框（2026-10-05 R90i 淡蓝；2026-10-21 用户拍板改为
   「视频生成列流光效果，白色的」⇒ 配色与角度曲线全对齐 .dh-col-beam 标准组件：
   墨色走令牌 --dh-beam-ink（:root 浅色中性灰 / :root[data-theme=dark] 纯白），
   中段最亮两头暗；弹窗为常驻（opacity .85），列流光为 hover 显现，配方同源） */
.work-modal::after,
.work-modal::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    opacity: .85; pointer-events: none; z-index: 2;
}
.work-modal::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.work-modal::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.work-modal::before { animation: dh-beam-b-spin 6.5s linear infinite; }

/* 会员 / OEM 权益弹窗（app.js openOemIntro · dist.js 分销端同款）：回退即关 + 统一白色双流光 + 背景模糊
   - 2026-10-23：① mask 加 -mask 类（oem-intro-mask / dist-oem-intro-mask），接入 layer-back.js 自动「返回关弹层」；
     ② 面板拆外层 .oem-intro-panel(overflow:hidden 承载双流光) + 内层 .oem-intro-scroll(滚动)，避免 beam 随内容滚走
       （同 .work-modal 思路，也同本会话早前修的 .qc-model-panel>.qm-scroll）；
     ③ 双流光复用 .work-modal 标准配方：墨色走 --dh-beam-ink 令牌（:root[data-theme=dark]=纯白），手机/电脑端同效。 */
.oem-intro-mask, .dist-oem-intro-mask {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.oem-intro-panel {
  position: relative; display: flex; flex-direction: column;
  max-width: 680px; width: 100%; max-height: 86vh;
  background: #101218; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
}
.oem-intro-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 22px; color: #e8eaf0;
}
/* 统一白色双流光边框（配方对齐 .work-modal，墨色走 --dh-beam-ink，深色主题=纯白） */
.oem-intro-panel::after,
.oem-intro-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--dh-beam-a),
      rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
      rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: .85; pointer-events: none; z-index: 2;
}
.oem-intro-panel::before {
  background: conic-gradient(from var(--dh-beam-b),
      rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
      rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.oem-intro-panel::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.oem-intro-panel::before { animation: dh-beam-b-spin 6.5s linear infinite; }

/* 用户中心「积分明细 / 我的订单」弹窗（2026-10-23）：回退即关 + 背景模糊
   - mask 加 uc-logs-mask / uc-orders-mask（-mask 结尾、不在 layer-back 排除名单）→ MutationObserver
     自动「返回关弹层」，与 app.js 自管的用户中心 {__wm:'uc'} 各管一层：先关明细/订单，再返回才关用户中心；
   - 白色双流光：面板改挂标准组件 .dh-dlg-beam 即得（基类 3807 行已走 --dh-beam-ink 白色系令牌，无需再覆盖）；
   - 背景模糊对齐 ⑦ OEM 弹窗（blur 6px，双类选择器压过 .uc-mask 既有的 blur(4px)）。 */
.uc-mask.uc-logs-mask, .uc-mask.uc-orders-mask {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wm-close {
  position: absolute; right: 12px; top: 10px; z-index: 6; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(0,0,0,.45); color:#fff; font-size: 18px;
  display: grid; place-items: center; cursor: pointer;
}
.wm-left { position: relative; display: flex; flex-direction: column; background: #101215; min-height: 0; }
/* 播放区用上下 auto 外边距：让视频/大图在剩余空间里垂直居中，同时把下方的分享条压到列底。
   （2026-09-19 修：横屏视频原本贴顶，分享条紧跟其后悬在半空、下面一大片黑；实测此写法弹窗高度与竖屏视频尺寸均不变） */
.wm-player { flex: 0 0 auto; max-height: 72vh; margin: auto 0; display: grid; place-items: center; }
.wm-player video, .wm-player img { width: 100%; max-height: 72vh; object-fit: contain; display: block; }
.wm-player img { background: #101215; }
.wm-player.wm-empty { height: 220px; color: var(--fg-muted); }
/* 「查看原图」入口（图片区右上角，仅图片作品显示；点击开全站统一的放大预览 common.js openMediaViewer） */
.wm-zoom {
  position: absolute; right: 12px; top: 12px; z-index: 5; width: 34px; height: 34px;
  border: 0; border-radius: 9px; background: rgba(0, 0, 0, .5); color:#fff;
  display: none; place-items: center; cursor: pointer; transition: background .16s ease;
}
.wm-zoom.on { display: grid; }
.wm-zoom:hover { background: rgba(0, 0, 0, .74); }
.wm-zoom .ico { width: 17px; height: 17px; }
.wm-player.can-zoom img { cursor: zoom-in; }
.wm-share-bar { padding: 10px 16px; background: #FFFBF0; border-top: 1px solid #F5E6C4; }
.wm-share { display: inline-flex; align-items: center; gap: 6px; color: #8a5b00; font-size: 15px; cursor: pointer; }
.wm-share:hover { color: var(--warning); }
/* 数字人弹窗左右翻页箭头 */
.wm-nav { position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between; pointer-events: none; padding: 0 8px; }
.wm-nav-btn { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color:#fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; }
.wm-nav-btn:hover { background: rgba(0,0,0,.7); }
.wm-nav-btn.disabled { opacity: .25; cursor: default; }
.wm-nav-btn:not(.disabled):active { transform: scale(.92); }

.wm-share .ico { width: 15px; height: 15px; }
.wm-share strong { color: var(--danger); }
.wm-right { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.wm-user { display: flex; align-items: center; gap: 10px; }
.wm-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color:#fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.wm-uname { font-size: 14px; font-weight: 650; color: var(--text); }
.wm-usub { font-size: 11.5px; color: var(--fg-subtle); }
.wm-user .wm-btn { margin-left: auto; }
.wm-btn { border-radius: 8px; font-size: 13px; cursor: pointer; padding: 8px 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.wm-btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 650; }
.wm-btn.primary:hover { background: #245BD0; }
.wm-sec { border-top: 1px solid var(--surface-2); padding-top: 12px; }
.wm-sec-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 8px; }
.wm-copy { color: var(--primary); font-size: 12px; cursor: pointer; font-weight: 500; }
.wm-prompt { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.7; color: var(--text); max-height: 275px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
.wm-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; color: var(--fg-subtle); }
.wm-kv b { color: var(--text); font-weight: 500; }
.wm-kv .wm-cost, .wm-kv b.cost { color: var(--warning); font-weight: 700; }
.wm-kv b.ok { color: var(--success); }
.wm-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.wm-refs img, .wm-refs video { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.wm-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding-top: 12px; border-top: 1px solid var(--surface-2); }
.wm-dls { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; }
.wm-dls:empty { display: none; }
@media (min-width: 760px) {
  .work-modal { flex-direction: row; }
  .wm-left { flex: 1.2; border-radius: 16px 0 0 16px; }
  .wm-right { flex: 1; border-radius: 0 16px 16px 0; }
}

/* ---------- 分享投稿弹窗（2026-10-11 外壳对齐 IP 档案库标准） ----------
   外壳复用 .dhv-mask/.dhv-modal（「标准组件：弹窗双流光」）→ 自带双流光边框，
   禁止在本块重复声明 ::after/::before；遮罩加深 + 背景模糊、830×1060 定尺、
   字号 +2 档，逐项对齐 cvpl-save-modal / #dhIpMask 规格。 */
#shareModalMask {
  background: rgba(6, 8, 12, .72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dhv-modal.share-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] .dhv-modal.share-modal { background: var(--soft); }
#shareModalMask .dhv-title { font-size: 18px; }
#shareModalMask .dh-ex-tip { font-size: 14px; line-height: 1.75; margin: 12px 0 2px; }
/* 定高后内容区撑满余高、内部滚动；底部按钮固定 */
.sm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0 0; display: flex; flex-direction: column; gap: 14px; }
.sm-foot { flex: 0 0 auto; padding: 12px 0 2px; border-top: 1px solid var(--line); }
/* 字号 +2 档 / 颜色对齐 #dhIpMask（6547~6560） */
.sm-label { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 650; color: var(--text); }
.sm-lab-t { display: inline-flex; align-items: center; gap: 6px; }
.sm-lab-t i { font-style: normal; flex: none; font-size: 11px; font-weight: 600; line-height: 1; color: #FF8587; background: rgba(255,77,79,.14); border: 1px solid rgba(255,77,79,.28); border-radius: 999px; padding: 3px 8px; }
.sm-lab-t i.opt { color: #FFC96B; background: rgba(255,170,0,.12); border-color: rgba(255,170,0,.26); }
.sm-label .text-input { font-weight: 400; font-size: 15px; }
/* 弹窗内单行输入框/下拉加高（标题/分类/积分/标签），文本域不在此列。
   注意：.text-input 基类带 flex:1（=flex-basis:0%），在 .sm-label 纵向 flex 中
   flex-basis 会压过 height，必须同时重置 flex 才能让 48px 生效 */
#shareModalMask .sm-body input.text-input,
#shareModalMask .sm-body select.text-input { height: 48px; min-height: 48px; flex: 0 0 auto; padding: 0 12px; }
/* 兜底：直接按字段 id 强制，覆盖任何潜在优先级冲突/缓存残留 */
#shareModalMask #smTitle, #shareModalMask #smCost, #shareModalMask #smTags, #shareModalMask #smCategory {
  height: 48px !important; min-height: 48px !important; flex: 0 0 auto !important; padding: 0 12px !important; box-sizing: border-box !important;
}
.sm-hint { font-size: 13px; color: var(--text-tertiary); font-weight: 400; }
.sm-media-tip { color: var(--text-tertiary); font-size: 13px; padding: 26px 10px; }
.sm-note { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text-tertiary); line-height: 1.7; }
.sm-media-box { position: relative; border: 1px dashed var(--border-strong); border-radius: 10px; background: #101215; min-height: 90px; display: grid; place-items: center; overflow: hidden; }
.sm-media-box video, .sm-media-box img { width: 100%; max-height: min(500px, 56vh); object-fit: contain; display: block; }
.sm-media-box audio { width: 100%; margin: 8px 0; }
.sm-media-ops { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 10px; }
.sm-media-ops .mini-btn { border: none; height: 34px; padding: 0 18px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.sm-media-ops #smReplace { background: var(--primary); color: #fff; }
.sm-media-ops #smReplace:hover { background: #1F5FD7; }
.sm-media-ops #smRemoveMedia { background: rgba(22,26,32,.88); color: #FF8587; border: 1px solid rgba(255,120,124,.4); }
.sm-media-ops #smRemoveMedia:hover { background: rgba(60,20,24,.92); color: #FFA9AB; }
/* 主按钮：渐变由文件末尾统一规则（.sm-submit → --grad-cta）提供，这里只管尺寸 */
.sm-submit {
  width: 100%; padding: 13px 0; border: none; border-radius: 10px; cursor: pointer;
  color:#fff; font-size: 15px; font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sm-submit:disabled { opacity: .6; cursor: default; }
.sm-submit .ico { width: 16px; height: 16px; }

/* 用户模板角标 */
.tpl-card .tpl-user-badge {
  position: absolute; right: 8px; top: 8px; z-index: 2; padding: 2px 8px; border-radius: 5px;
  background: rgba(var(--primary-rgb),.92); color:#fff; font-size: 11px;
}
.tpl-card .tpl-cost-badge {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 2px 8px; border-radius: 5px;
  background: rgba(0,0,0,.55); color: #FFC24B; font-size: 11px; font-weight: 600;
}
.tpl-card .tpl-canvas-badge {
  position: absolute; right: 8px; top: 8px; z-index: 2; padding: 2px 8px; border-radius: 5px;
  background: rgba(var(--primary-rgb),.92); color:#fff; font-size: 11px;
}

/* 宽屏下限制封面最大高度，避免超宽卡片的 1:1 封面把卡片撑得过高；
   同行卡片宽度一致，此限制对所有卡片同等生效，不会造成高度参差。 */
.rc-cover { max-height: 420px; }
.result-card .rc-title { font-size: 15px; }
.result-card .rc-meta { font-size: 10.5px; padding: 6px 10px; }
.result-card .rc-action { width: 24px; height: 24px; }

/* 悬停时深色遮罩改为底部浅渐变，不挡预览画面 */
.tpl-cover .tpl-hover { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4)); align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.tpl-cover .tpl-hover span { padding: 5px 14px; font-size: 12px; }
.tpl-cover .tpl-hover { z-index: 3; }

/* ============ 模型能力标签 ============ */
.qm-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.qm-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.qm-label .ico { width: 14px; height: 14px; color: var(--fg-subtle); }
.qm-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.cap {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary); font-style: normal; font-size: 10.5px; line-height: 16px; white-space: nowrap;
}
.qm-desc { font-size: 11px; color: var(--fg-subtle); line-height: 1.5; }

/* ============ 模型选择器：两列（左厂商族 / 右版本卡）============
   2026-10-30 全站模型下拉统一到这一套，DOM 由 modules/model-picker.js 产出。
   类名用 mk- 前缀：mp- 已被音乐模块 .mp-warn 占用、qp- 是首页参数面板、qc- 是素材区。
   ★ 两列共用的高度是写死的（344px），只有一两个版本时右列会留白 —— 这是刻意的：
     左列切厂商时面板不跳动，比「内容自适应高度」更重要（首页参数弹窗那次就是抖得难受）。 */
.mk {
  position: relative;            /* 双流光描边伪元素 inset:0 绑定到本面板（而非透明外壳） */
  display: flex; flex-direction: column; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(24, 24, 27, .18); overflow: hidden;
  color: var(--fg); text-align: left;
}
.mk-head { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--border); }
.mk-head .mk-ico { width: 16px; height: 16px; color: var(--fg-subtle); flex: 0 0 auto; }
.mk-q {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 14px; color: var(--fg); padding: 0; line-height: 22px;
}
.mk-q::placeholder { color: var(--fg-faint); }
.mk-n { flex: 0 0 auto; font-size: 12px; color: var(--fg-subtle); }

.mk-body { display: flex; align-items: stretch; max-height: 372px; min-height: 208px; }
/* 视口比面板矮时（手机横屏 / 小屏笔记本）place() 给 .mk 加 is-short 并设 max-height，
   此时必须放开 body 的 208 下限、让它吃掉剩余高度，两列都在内部滚动；
   否则 min-height 顶着，面板压不下去，底部照样越过视口。 */
.mk.is-short .mk-body { flex: 1 1 auto; min-height: 0; max-height: none; }
.mk-side {
  flex: 0 0 178px; width: 178px; overflow-y: auto; overflow-x: hidden;
  padding: 7px; border-right: 1px solid var(--border); background: var(--surface-2);
}
.mk-cards { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 5px; }
/* 右列高度锁死成「4 张卡」的高度：厂商版本数少时底部留白，切厂商面板不跳动、
   卡片位置也不动（2026-10-30 用户反馈：Nano Banana 只有 2 个模型时弹框缩一半，点起来难受）。
   搜索结果 / flat 模式（is-flat，没有厂商列，不会因切厂商而跳）仍按内容自适应。 */
.mk-cards:not(.is-flat) { height: 372px; }
/* 小屏：place() 给 .mk 加 is-short 压高度时，右列必须放开固定高度改内部滚动 */
.mk.is-short .mk-cards { height: auto; }
.mk-cards.is-flat { padding: 9px 9px 11px; }
.mk-cards-g + .mk-cards-g { margin-top: 11px; }
.mk-cards-gn { display: block; padding: 0 4px 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg-subtle); }

/* 左列厂商 */
.mk-v {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--fg);
}
.mk-v + .mk-v { margin-top: 2px; }
.mk-v:hover { background: var(--surface); }
.mk-v.is-on { background: var(--surface); box-shadow: inset 2px 0 0 var(--primary); }
.mk-v.is-on b { color: var(--primary); }
.mk-v-ico { flex: 0 0 auto; width: 18px; height: 18px; }
.mk-v-tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.mk-v-tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-v-tx em { font-style: normal; font-size: 11px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-v-n { flex: 0 0 auto; font-size: 11.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.mk-v-recent { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; margin-bottom: 4px !important; }
/* 首字母色块：后台新加的未知厂商走这里，不显示破图 */
.mk-mk {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  background: #8A8F98; color: #fff; font-size: 10.5px; font-weight: 700; font-style: normal; line-height: 1;
}

/* 右列卡片 */
.mk-c {
  position: relative; display: block; width: 100%; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  cursor: pointer; font-family: inherit; text-align: left; color: var(--fg);
}
.mk-c:hover { background: var(--surface-2); }
.mk-c.is-on { background: rgba(var(--primary-rgb), .09); border-color: rgba(var(--primary-rgb), .32); }
.mk-c-top { display: flex; align-items: center; gap: 8px; }
.mk-c-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--fg-subtle); }
.mk-c-nm { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pr { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.mk-c-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--fg-muted); line-height: 1.5; }
.mk-c-line i { font-style: normal; }
.mk-c-line s { text-decoration: none; color: var(--fg-faint); }
/* 胶囊默认中性灰（图片卡的「画幅 3 档」这类普通规格走这里）；
   参考素材上限（图 N / 视频 N / 音频 N）加 .is-media 上琥珀色 —— 这组数字是「能喂多少素材」的
   关键决策信息，混在灰字里看不出来（用户 2026-10-30 要求区分）。
   用琥珀而不是主色：既能与蓝色积分、灰色能力行拉开，也不会与 .mk-c.is-on 的蓝底撞。 */
.mk-c-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mk-c-chips i {
  font-style: normal; font-size: 11.5px; font-weight: 500; line-height: 18px; padding: 0 7px; border-radius: 5px;
  background: var(--surface-2); color: var(--fg-subtle);
}
.mk-c-chips.is-media i { background: rgba(245, 158, 11, .16); color: #92400E; }
.mk-c.is-on .mk-c-chips.is-media i { background: rgba(245, 158, 11, .24); color: #78350F; }
:root[data-theme="dark"] .mk-c-chips.is-media i { background: rgba(251, 191, 36, .18); color: #FCD34D; }
:root[data-theme="dark"] .mk-c.is-on .mk-c-chips.is-media i { background: rgba(251, 191, 36, .26); color: #FDE68A; }
.mk-c-warn { display: block; margin-top: 5px; font-size: 11.5px; color: var(--warning); }
.mk-c-ck { position: absolute; right: 10px; top: 10px; width: 15px; height: 15px; color: var(--primary); }
/* 选中勾是 absolute 挂在右上角，而价格（✦ 1.5–2.5/秒）也贴卡片右边界 → 两箱相交 14px，
   勾的左斜笔正好盖在最后一个字「秒」上，看着像下面多了一个「/」（用户 2026-10-30 报）。
   必须给 **整行** 留位：.mk-c-nm 是 flex:1 1 auto，只给它加 padding 只会挤文字区、价格位置不动。 */
.mk-c.is-on .mk-c-top { padding-right: 20px; }
/* 置灰**不能**挂在卡片上：opacity 会把整棵子树合成一个图层，子元素写 opacity:1 也拉不回来
   （合成组的 alpha 是祖先连乘）。原来 `.mk-c.is-dim { opacity:.62 }` 的后果是胶囊「图 7」
   跟着变暗，和正常模型的胶囊明显不同色（用户 2026-10-30 报 Grok 那张）。
   改成逐项降透明度：名称 / 图标 / 能力行 / 积分变淡表示「当前模式不支持」，
   胶囊（能喂多少素材）保持原色，与其它模型一致。
   放在各子项定义之后：状态覆盖写在基础样式后面，顺序才对、也便于阅读。 */
.mk-c.is-dim .mk-c-ico,
.mk-c.is-dim .mk-c-nm,
.mk-c.is-dim .mk-c-line { opacity: .58; }
.mk-c.is-dim .mk-pr { opacity: .72; }
.mk-c.is-dim:hover .mk-c-ico,
.mk-c.is-dim:hover .mk-c-nm,
.mk-c.is-dim:hover .mk-c-line { opacity: .8; }
.mk-c.is-dim:hover .mk-pr { opacity: .88; }
.mk-empty { padding: 28px 14px; text-align: center; font-size: 13.5px; color: var(--fg-subtle); }
/* 宿主外壳退成透明：原来的 .qc-model-panel / .cv-sel-menu 自带背景+边框+内边距，
   换成两列面板后必须让位，否则会套两层框（.is-mk 由 model-picker.js 渲染时打上） */
.qc-model-panel.is-mk, .cv-sel-menu.is-mk {
  padding: 0; background: transparent; border: 0; box-shadow: none;
  min-width: 0; border-radius: 12px; overflow: visible;
  width: auto;            /* 旧单列面板靠 CSS 定宽（#homeModelPanel 是 540），两列宽 660 由 .mk 自己给 */
  max-width: none;
  max-height: none;       /* 旧面板固定 320 高（.vg-model-btn 那条），两列面板要靠内容自适应 */
}
/* 首页这个 ID 选择器把面板钉成 540px，比里面的 .mk（660）窄 120px —— 容器与内容错位，
   窄的那截靠 overflow:visible 露出来，hit-test / 阴影都对不齐。这里按 ID 特异性覆盖。 */
#homeModelPanel.is-mk { width: auto; max-width: none; }
/* 文本节点面板的模型浮层同样让位（它自己的 max-width:320 会把两列压扁） */
.cv-text-model-pop.is-mk {
  padding: 0; background: transparent; border: 0; box-shadow: none;
  min-width: 0; max-width: none; max-height: none; overflow: visible;
}
/* 深色：左侧底色与卡片区分度靠 transparent→surface 的层级，不再叠加额外颜色 */
:root[data-theme="dark"] .mk-v.is-on { background: var(--surface-3); }
:root[data-theme="dark"] .mk-c.is-on { background: rgba(var(--primary-rgb), .18); }
@media (max-width: 520px) {
  .mk-side { flex-basis: 112px; width: 112px; }
  .mk-v-tx em { display: none; }
  .mk-v-tx b { font-size: 12.5px; }
}

/* ============ 首页：AI 对话 ============ */
.chat-card {
  width: min(880px, 100%); margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 20px rgba(31,35,41,.06);
  display: flex; flex-direction: column; overflow: visible;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #F0F1F5;
}
.chat-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--text); }
.chat-title .ico { width: 18px; height: 18px; color: var(--primary); }
.chat-clear {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-subtle);
  cursor: pointer; user-select: none;
}
.chat-clear:hover { color: var(--danger); }
.chat-clear .ico { width: 14px; height: 14px; }
.chat-msgs {
  flex: 1; min-height: 320px; max-height: none; overflow-y: auto; padding: 0;
  display: flex; flex-direction: column; gap: 0; background: var(--surface-2);
}
.chat-empty { margin: auto; text-align: center; color: var(--fg-subtle); max-width: 320px; padding: 40px 16px; }
.chat-empty p { font-size: 13px; line-height: 1.7; }
.chat-row { display: flex; flex-direction: column; }
.chat-row.user { align-items: flex-end; text-align: right; }
.chat-row.assistant { align-items: flex-start; text-align: left; }
.chat-bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.75; word-break: break-word;
}
/* 用户问题紧贴右侧，AI 回复紧贴左侧 */
.chat-row.user .chat-bubble { margin-left: auto; background: var(--primary); color:#fff; border: 1px solid var(--primary); box-shadow: none; border-bottom-right-radius: 4px; }
.chat-row.assistant .chat-bubble { margin-right: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chat-row.user .chat-files { justify-content: flex-end; }
.chat-row.assistant .chat-files { justify-content: flex-start; }
.chat-file-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px; border-radius: 6px; }
.chat-row.user .chat-file-chip { background: rgba(255,255,255,.22); color:#fff; }
.chat-row.assistant .chat-file-chip { background: #F0F2F5; color: var(--fg-subtle); }
.chat-cost-line { font-size: 12px; color: #9AA0A6; margin-top: 8px; text-align: left; }
.chat-round { padding: 18px 22px; }
.chat-round .chat-row + .chat-row { margin-top: 22px; }
.chat-round:nth-child(odd) { background: var(--surface-2); }
.chat-round:nth-child(even) { background: var(--surface-2); }
.chat-text img { max-width: 100%; border-radius: 8px; margin: 4px 0; }
.chat-attach-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 0; }
.chat-attach-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px;
  background: var(--primary-light); border: 1px solid #E1EAFD; font-size: 12px; color: var(--primary); max-width: 180px;
}
.chat-attach-chip img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.chat-attach-chip .ca-ico { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 4px; background: var(--primary); color:#fff; }
.chat-attach-chip .ca-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-chip .ca-del { cursor: pointer; color: #9AA0AB; font-weight: 700; padding: 0 2px; }
.chat-attach-chip .ca-del:hover { color: var(--danger); }
.chat-input-wrap { border-top: 1px solid #F0F1F5; padding: 12px 14px 14px; background: var(--surface); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
/* 两段式输入区（2026-09-17 改版）：上输入区 + 下工具条，参考豆包样式 */
.chat-input-body { position: relative; }
.chat-input-box {
  min-width: 0; position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  padding: 4px 6px 0; transition: border-color .15s, box-shadow .15s;
}
.chat-input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }
.chat-input {
  flex: 1; min-height: 92px; max-height: 320px; resize: none; border: 0; border-radius: 20px;
  padding: 12px 12px 4px; font-family: inherit; font-size: 15px; line-height: 1.65; color: var(--text); outline: none; background: transparent;
}
.chat-input::placeholder { color: var(--text-tertiary); }
/* 底部工具条：＋ / 新对话 / 历史 / 清空 —— 弹性空白 —— 预计积分 / 模型 / 发送 */
.chat-input-tools {
  /* position:relative = 模型上拉面板的包含块（面板宽 ≤ 本行宽度 → 永不向右溢出被裁） */
  position: relative;
  min-height: 46px; padding: 6px 6px 8px; display: flex; align-items: center; gap: 10px;
}
.chat-add-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-subtle);
}
.chat-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--hover-bg); }
.chat-add-btn .ico { width: 16px; height: 16px; }
.chat-bar-sep { flex: 0 0 auto; width: 1px; height: 16px; background: var(--border); }
.chat-bar-spacer { flex: 1; min-width: 0; }
.chat-bar-item {
  flex: 0 0 auto; border: 0; background: transparent; padding: 4px 6px; border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--fg-subtle); cursor: pointer;
}
.chat-bar-item:hover { color: var(--primary); background: #F5F8FF; }
/* ⚠️ 此处**不设** position:relative —— 模型面板的包含块要落在整条 .chat-input-tools 上
   （见该规则），面板右对齐才不会溢出被裁。若给他加回 relative，面板会改挂到这个 152px 的窄胶囊上。 */
.chat-model {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 32px; border-radius: 9px; background: var(--primary-light); color: var(--primary); font-size: 15px; font-weight: 600; cursor: pointer; user-select: none;
  max-width: 152px;
}
.chat-model .ico { flex: 0 0 auto; width: 14px; height: 14px; }
.chat-model #chatModelLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-model .qc-arrow { flex: 0 0 auto; font-size: 10px; opacity: .8; }
.chat-send {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--primary); color:#fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-send:hover { background: #245AD1; }
.chat-send .ico { width: 18px; height: 18px; }
.chat-send[disabled] { background: #C4D5F7; cursor: not-allowed; }
.chat-cost { font-size: 12px; color: var(--warning); font-weight: 600; white-space: nowrap; padding-right: 2px; }
.chat-hint { margin-top: 8px; font-size: 11.5px; color: var(--fg-subtle); text-align: center; }
/* 附件行：输入区下方、工具条上方 */
.chat-input-box .chat-attach-row { flex: 0 0 auto; min-width: 0; padding: 0 8px 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-input-box .chat-attach-row:empty { display: none; }
/* 对话 @ 引用已上传文件弹窗（复用画布 mention 样式） */
.chat-mention-pop { position: absolute; left: 12px; right: auto; top: auto; bottom: auto; z-index: 60; min-width: 172px; max-width: 260px; max-height: 236px; overflow-y: auto; padding: 5px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(31,35,41,.16); }
.chat-mention-pop[hidden] { display: none !important; }
.chat-mention-pop .chat-mention-title { padding: 4px 8px 6px; color: #9AA0A8; font-size: 11px; }
.chat-mention-pop .chat-mention-item { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 8px; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; }
.chat-mention-pop .chat-mention-item.active, .chat-mention-pop .chat-mention-item:hover { background: var(--primary-light); color: var(--primary); }
.chat-mention-pop .chat-mention-item img { display: block; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--surface-2); border-radius: 7px; object-fit: cover; background: var(--surface-2); }
.chat-mention-pop .chat-mention-doc-ico { display: block; flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--surface-2); border-radius: 7px; background: var(--surface-2); font-size: 18px; }
.chat-mention-pop .chat-mention-empty { padding: 2px 0; color: #A0A5AD; font-size: 12px; font-weight: 400; }
.chat-mention-pop .chat-mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 对话模型选择面板（复用 qc-model-panel 基础样式） */
.qc-model-panel.chat .qm-item { flex-wrap: wrap; align-items: flex-start; }
/* 两段式改版后模型选择器移到输入区底部工具条，面板改为向上弹（向下会被卡片裁掉） */
/* 2026-09-19 修正「面板右侧被裁掉」：面板原本 left:0 挂在 .chat-model 胶囊上，而该胶囊
   max-width 仅 152px、又位于输入条最右端 —— 300px 宽的面板必然向右溢出（实测溢出 150~289px），
   被 .chat-main 的 overflow:hidden 裁掉右侧一截（文字被切一半）。
   改法：把包含块换成整条 .chat-input-tools（见下方该规则的 position:relative），
   面板改为「右对齐到输入区右缘 + 宽度上限 = 输入条宽度」，任何窗口宽度都不会再溢出。 */
.qc-model-panel.chat {
  min-width: 0; width: 300px; max-width: 100%;
  left: auto; right: 0; top: auto; bottom: calc(100% + 8px);
}
.qc-model-panel.chat .qm-item-main { gap: 4px; }
.qc-model-panel.chat .qm-caps .cap { background: #F0F2F5; color: var(--fg-subtle); }
.qc-model-panel.chat .qm-item.active .qm-caps .cap { background: var(--primary-light); color: var(--primary); }

/* 一级「AI 对话」独立页面布局 */
/* 2026-09-19 定稿：宽度取内容列的一半并居中（用户：全宽太宽，改成画面的一半宽）。
   ⚠️ 必须写成「显式 width + margin:0 auto」——只写 max-width + auto 外边距会让 flex 子项
   取消 stretch、改为「按内容收缩」，宽度随消息长短变化（2026-09-19 上午踩过的坑）。
   max(50%, 640px) 兜底：窄窗口下取 640px，保证对话区仍可用；max-width:100% 防溢出。 */
.chat-stage { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 6px 4px 28px; width: max(50%, 640px); max-width: 100%; margin: 0 auto; }
/* 手机端 AI 对话顶栏（历史抽屉入口 + 当前模型名 + 新对话）：桌面隐藏，≤760px 由 mobile.css 展示（2026-10-22） */
.chat-mbar { display: none; }
.chat-drawer-mask { display: none; }
.chat-sidebar {
  flex: 0 0 264px; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.chat-sidebar-head { padding: 12px; border-bottom: 1px solid #F0F1F5; }
.new-chat-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.new-chat-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.new-chat-btn .ico { width: 16px; height: 16px; }
.chat-history { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.chat-hist-empty { color: var(--fg-subtle); font-size: 15px; text-align: center; padding: 30px 10px; line-height: 1.7; }
.chat-hist-item {
  border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; cursor: pointer;
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.chat-hist-item:hover { border-color: #C9D6F7; box-shadow: 0 2px 10px rgba(var(--primary-rgb),.08); }
.chat-hist-item.active { border-color: var(--primary); background: #F5F8FF; }
.chi-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-sub { font-size: 11.5px; color: var(--fg-subtle); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.chi-time { font-size: 11px; color: var(--fg-subtle); }
.chi-cost { font-size: 11px; color: var(--warning); font-weight: 600; }
.chi-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; color: var(--fg-faint); cursor: pointer;
  transition: color .15s, background .15s;
}
.chi-del:hover { color: var(--danger); background: #FDEEEF; }
.chi-del .ico { width: 14px; height: 14px; }
.chat-main {
  /* 2026-09-17 用户要求：对话主区撑满 stage 内除侧栏外的全部宽度（280 = 侧栏 264 + 间距 16） */
  /* 底部与左侧历史栏(.chat-sidebar)齐平：两侧同为 stretch，故不可带 margin-bottom（原 24px 会让主区比侧栏高出一截） */
  flex: 1; width: auto; min-width: 0; max-width: none; min-height: 76vh;
  margin: 0; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  /* 作为容器供下方 @container 查询：窄栏时给输入工具条减负，避免其溢出被本元素裁掉 */
  container-type: inline-size;
  box-shadow: 0 6px 28px rgba(31,35,41,.06);
}
.chat-main-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* 滚动容器改为 chat-main-scroll，chat-msgs 自身不再独立滚动 */
.chat-main-scroll .chat-msgs { flex: 1; min-height: 0; max-height: none; overflow: visible; }

/* 窄栏下给输入工具条减负（2026-09-19 随「对话区收窄到一半」一起加）：
   整条工具条的固有宽度约 440~490px（＋ / 新对话 / 历史 / 清空 / 积分 / 模型胶囊 / 发送键 + 间距），
   而 .chat-main 只有 352~565px。窄栏时工具条会被挤出右缘，被 .chat-main 的 overflow:hidden
   连「发送键」一起裁掉（实测窗宽 1380 时发送键整体不可见）。
   新对话 / 历史在左侧栏已有同功能入口，故窄栏下隐藏这两个 + 分隔线，并收窄模型胶囊。
   （用 ID 精确指定，保留「清空」——它在别处没有入口。） */
@container (max-width: 540px) {
  .chat-input-tools { gap: 6px; }
  .chat-input-tools .chat-bar-sep,
  .chat-input-tools #chatBarNewBtn,
  .chat-input-tools #chatBarHistBtn { display: none; }
  .chat-model { max-width: 104px; }
}

/* 极窄栏（窗口 ~760~840px 区间的收窄兜底）：不再隐藏功能，改为让工具条换行 ——
   模型胶囊与发送键落到第二行，避免被 .chat-main 裁掉。 */
@container (max-width: 340px) {
  .chat-input-tools { flex-wrap: wrap; row-gap: 4px; }
  .chat-input-tools .chat-bar-spacer { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .chat-stage { flex-direction: column; max-width: 100%; }
  .chat-sidebar { flex: 0 0 auto; max-height: 170px; }
}

/* 视频页模型列表能力标签 */
.mi-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ==================== 图片制作 ==================== */
.image-stage { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: stretch; }
.image-stage .jm-left { display: flex; flex-direction: column; overflow-y: auto; width: 488px; flex: 0 0 488px; padding: 18px 16px 36px; border-right: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 1100px) { .image-stage .jm-left { width: 400px; flex-basis: 400px; } }

/* 参考图上传 */
.ref-thumb { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(31,35,41,.62); color:#fff; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ref-del:hover { background: var(--danger); }
.ref-add { width: 92px; height: 92px; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--fg-subtle); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; transition: all .15s; }
.ref-add:hover { border-color: var(--primary); color: var(--primary); background: #F5F8FF; }
.ref-add .ico { width: 22px; height: 22px; }

/* 图片结果卡片 */
.res-card { border: 1px solid #ECEEF2; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 3px rgba(31,35,41,.06); }
.res-card.pending, .res-card.err { padding: 28px 16px; text-align: center; color: var(--fg-subtle); font-size: 12px; }
.res-card.err { color: var(--danger); }
.res-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 3px; background: #0c0c0c; min-height: 180px; }
.res-img { position: relative; aspect-ratio: 1 / 1; min-height: 180px; background: #f5f5f5; }
.res-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-img.broken img { display: none; }
.res-img.broken::after { content: '图片已失效'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--danger); font-size: 12px; background: #FAF0F0; }
.res-dl { position: absolute; right: 6px; bottom: 6px; padding: 3px 9px; border-radius: 6px; font-size: 11px; color:#fff; background: rgba(0,0,0,.55); text-decoration: none; }
.res-dl:hover { background: rgba(0,0,0,.78); }
.res-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 11px 2px; font-size: 11px; color: var(--muted); }
.res-meta span { padding: 2px 7px; border-radius: 4px; background: var(--surface-2); }
.res-prompt { padding: 4px 11px 11px; color: var(--text); font-size: 12px; line-height: 1.5; word-break: break-word; }
.res-status { color: var(--fg-subtle); font-size: 12px; }

/* ================= 创作画布（无限画布） ================= */
.canvas-stage { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cv-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cv-name-wrap { position: relative; display: inline-flex; align-items: center; width: 240px; }
.cv-name { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 8px; padding: 5px 28px 5px 10px; font-size: 14px; font-weight: 600; color: var(--text); background: transparent; }
.cv-name-wrap:hover .cv-name { border-color: var(--border); }
.cv-name:focus { border-color: var(--primary); outline: none; background: var(--surface); }
.cv-name::placeholder { color: var(--fg-subtle); font-weight: 500; }
.cv-name-edit { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--fg-subtle); pointer-events: none; opacity: 0; transition: opacity .16s; }
.cv-name-wrap:hover .cv-name-edit, .cv-name-wrap:focus-within .cv-name-edit { opacity: 1; }
.cv-save-state { font-size: 12px; color: var(--fg-subtle); white-space: nowrap; }
.cv-save-state.saving { color: var(--warning); }
.cv-save-btn { padding: 5px 10px; font-size: 12px; }
.cv-save-btn .ico { width: 13px; height: 13px; }
.cv-flex { flex: 1; }
.cv-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; white-space: nowrap; }
.cv-btn:hover { border-color: var(--hover-border, #B8C4E0); color: var(--primary, var(--primary)); background: var(--hover-bg, #F3F7FF); }
.cv-btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; }
.cv-btn.primary:hover { background: #245AD1; color:#fff; }
.cv-btn.ghost { border-color: transparent; background: transparent; }
.cv-btn.danger { color: var(--danger); }
.cv-btn.danger:hover { border-color: #F5B8C0; background: #FDECEE; color: var(--danger); }
/* 画布工具栏「一键分享」：金色高亮（对应投稿赚积分入口，样式与生成结果弹窗的分享横幅同色调） */
.cv-btn.cv-share-btn { color: #F5C56B; border-color: rgba(245,197,107,.45); background: rgba(245,197,107,.08); }
.cv-btn.cv-share-btn:hover { color: #FFDA96; border-color: rgba(245,197,107,.8); background: rgba(245,197,107,.16); }
.cv-btn.cv-share-btn .ico { width: 16px; height: 16px; }

.cv-workarea { flex: 1; position: relative; display: flex; min-height: 0; }
/* max-height：左侧栏条目较多时，窗口较矮必须能滚动，否则「历史/帮助」会掉出可视区点不到 */
.cv-leftbar { position: absolute; left: 14px; top: 14px; z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(20,30,50,.08); max-height: calc(100% - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cv-leftbar::-webkit-scrollbar { width: 6px; }
.cv-leftbar::-webkit-scrollbar-track { background: transparent; }
.cv-leftbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.cv-leftbar::-webkit-scrollbar-thumb:hover { background: var(--hover-border); }
.cv-lb-item { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border: none; border-radius: 10px; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 11px; line-height: 1.2; }
.cv-lb-item:hover { background: var(--hover-bg); color: var(--primary); }
.cv-lb-item.active { background: var(--primary-light); color: var(--primary); }
.cv-lb-item .ico { width: 18px; height: 18px; }
.cv-lb-sep { height: 1px; background: var(--border); margin: 4px 6px; }

.cv-add-pop { position: absolute; left: 76px; top: 14px; z-index: 21; min-width: 184px; padding: 8px 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(20,30,50,.12); }
.cv-add-pop[hidden] { display: none !important; }
.cv-add-section + .cv-add-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.cv-add-title { padding: 6px 16px 4px; font-size:12px; color: var(--fg-subtle); font-weight: 500; }
.cv-add-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; text-align: left; }
.cv-add-item:hover { background: var(--hover-bg); color: var(--primary); }
.cv-add-item .ico { width: 16px; height: 16px; color: var(--fg-subtle); }
.cv-add-item:hover .ico { color: var(--primary); }

.cv-viewport { flex: 1; overflow: hidden; position: relative; cursor: grab; background: var(--surface-2); background-image: radial-gradient(#D9DDE3 1px, transparent 1px); background-size: 22px 22px; }
.cv-viewport.panning { cursor: grabbing; }
.cv-viewport.linking { cursor: crosshair; }
.cv-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cv-edges { position: absolute; left: -50000px; top: -50000px; width: 100000px; height: 100000px; overflow: visible; pointer-events: none; }
.cv-edge { pointer-events: stroke; cursor: pointer; }
.cv-edge-path { fill: none; stroke: var(--cv-edge-stroke); stroke-width: 2; }
.cv-edge-hit { fill: none; stroke: rgba(0,0,0,0); stroke-width: 20; pointer-events: stroke; cursor: pointer; }
.cv-edge:hover .cv-edge-path, .cv-edge.selected .cv-edge-path { stroke: var(--primary); stroke-width: 2.5; }
.cv-edge-arrow { fill: var(--cv-edge-stroke); }
.cv-edge:hover .cv-edge-arrow, .cv-edge.selected .cv-edge-arrow { fill: var(--primary); }
.cv-edge-linking .cv-edge-path { stroke-dasharray: 7 5; stroke: var(--primary); }
/* 连线流动高亮：与列双流光同构——「中间亮、两头暗」的明暗剖面烘焙进 linearGradient，
   渐变沿连线方向平移（animateTransform，见 canvas.js），墨色复用令牌 --dh-beam-ink */
.cv-eg-stop { /* 颜色由 canvas.js 内联 stop-color 控制（蓝紫渐变），不再走 --dh-beam-ink 令牌 */ }
/* 连线颜色：浅色 / 深色 用不同配色。浅色底需更深的蓝才明显，深色沿用亮蓝。 */
:root { --cv-flow-a:#2563EB; --cv-flow-b:#3B82F6; --cv-flow-arrow:#2563EB; --cv-flow-glow:rgba(37,99,235,.5); --cv-flow-path:#9AA6C0; --cv-edge-stroke:#9AA6C0; }
:root[data-theme="dark"] { --cv-flow-a:#4DA6FF; --cv-flow-b:#7FD0FF; --cv-flow-arrow:#4DA6FF; --cv-flow-glow:rgba(77,166,255,.65); --cv-flow-path:#9FB4E8; --cv-edge-stroke:rgba(255,255,255,.35); }
/* 光斑内联 stop-color 由 CSS 变量接管（CSS 优先级高于 SVG presentation 属性） */
.cv-eg-stop { stop-color: var(--cv-flow-a); }
.cv-eg-stop-mid { stop-color: var(--cv-flow-b); }
.cv-edge-flow { fill: none; stroke-linecap: round; opacity: 0; pointer-events: none; }
.cv-edge-flow-glow { filter: blur(1.25px); }
.cv-edge-flow-core { filter: drop-shadow(0 0 4px var(--cv-flow-glow)); }
.cv-edge.flow .cv-edge-path { stroke: var(--cv-flow-path); stroke-width: 2.5; }
.cv-edge.flow .cv-edge-arrow { fill: var(--cv-flow-arrow); }
.cv-edge.flow .cv-edge-flow { opacity: 1; }

.cv-node { position: absolute; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(20,30,50,.07); user-select: none; }
.cv-node.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.22), 0 2px 8px rgba(20,30,50,.1); }
.cv-node .cv-node-tools { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; z-index: 10; padding: 3px; background: rgba(255,255,255,.95); border: 1px solid rgba(229,230,235,.85); border-radius: 8px; box-shadow: 0 2px 8px rgba(20,30,50,.10); }
.cv-node:hover .cv-node-tools, .cv-node.selected .cv-node-tools { display: flex; }
.cv-node-tools button { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12px; }
.cv-node-tools button:hover { color: var(--primary); border-color: #B8C4E0; }
.cv-node-tools button.danger:hover { color: var(--danger); border-color: #F5B8C0; background: #FDECEE; }

.cv-node.image .cv-node-media { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; }
.cv-node.image img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cv-node.image .cv-img-empty { display: grid; place-items: center; width: 100%; height: 100%; color: #B8BEC7; }
.cv-node .cv-port { position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color:var(--surface);
  background-image: linear-gradient(#98A2B3, #98A2B3), linear-gradient(#98A2B3, #98A2B3);
  background-size: 8px 2px, 2px 8px; background-position: center center; background-repeat: no-repeat;
  border: 2px solid var(--border); right: -8px; top: 50%; transform: translateY(-50%); cursor: crosshair; opacity: 0; z-index: 12;
  box-shadow: 0 1px 3px rgba(20,30,50,.14); transition: opacity .15s, border-color .15s, background-color .15s, transform .15s; }
.cv-node .cv-port::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.cv-node .cv-port.in { left: -8px; right: auto; }
.cv-node:hover .cv-port, .cv-node.selected .cv-port, .cv-viewport.linking .cv-port { opacity: 1; }
.cv-node .cv-port:hover, .cv-node .cv-port.dragging { border-color: var(--primary); background-color: var(--primary-light);
  background-image: linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)); transform: translateY(-50%) scale(1.15); }
.cv-node.link-target { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.35), 0 2px 8px rgba(20,30,50,.12); }

.cv-node.note { background: var(--note-bg); border-color: var(--note-border); }
.cv-node.note .cv-note-text { width: 100%; height: 100%; border: none; background: transparent; resize: none; outline: none; padding: 10px 12px; font-size: 15px; line-height: 1.55; color: var(--note-text); font-family: inherit; }
.cv-node.note .cv-note-title { font-size: 11px; font-weight: 700; color: var(--note-title); padding: 8px 12px 0; }

.cv-zoombar { position: absolute; right: 16px; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(20,30,50,.08); }
.cv-zbtn { min-width: 26px; height: 26px; display: grid; place-items: center; border: none; border-radius: 6px; background: transparent; color: #5A6068; cursor: pointer; font-size: 13px; }
.cv-zbtn:hover { background: var(--hover-bg); color: var(--primary); }
.cv-zbtn.wide { padding: 0 8px; font-size: 12px; }
.cv-zoom-val { min-width: 44px; text-align: center; font-size: 12px; color: var(--text); }

.cv-modal-mask { position: fixed; inset: 0; z-index: 300; background: rgba(15,22,35,.45); display: none; align-items: center; justify-content: center; }
.cv-modal-mask.show { display: flex; }
.cv-modal { width: min(680px, 92vw); max-height: 76vh; background: var(--surface); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 50px rgba(10,20,40,.25); }
.cv-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cv-modal-head h3 { margin: 0; font-size: 15px; color: var(--text); }
.cv-modal-body { padding: 14px 18px 18px; overflow-y: auto; }
.cv-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.cv-item:hover { border-color: #D7D9DE; background: var(--hover-bg); }
.cv-item .cvi-main { flex: 1; min-width: 0; }
.cv-item .cvi-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item .cvi-time { font-size: 11.5px; color: var(--fg-subtle); margin-top: 3px; }
.cv-item .cvi-acts { display: flex; gap: 6px; }
.cv-empty-tip { text-align: center; color: var(--fg-subtle); font-size: 13px; padding: 30px 0; }

/* ---------- 保存提示词 / 我的提示词（画布制作框，2026-10-11 对标北斗） ----------
   外壳复用 IP 档案库 .dhv-mask / .dhv-modal 标准（见 3433 行「标准组件：弹窗双流光」）
   → 自动获得双流光边框，禁止在本块重复声明 ::after/::before。
   尺寸 / 深色背景 / 字号 +2 档规范逐行抄 #dhIpMask（6526~6560）。 */
/* 尺寸对齐 IP 档案库主弹窗标准：830×1060 定尺（同 .dh-ip-modal / .dh-add-modal，2026-10-11 用户要求「大小一样」） */
.dhv-modal.cvpl-save-modal,
.dhv-modal.cvpl-lib-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
/* 遮罩加深 + 背景模糊（逐项抄 #dhIpMask R69 规格） */
#cvPromptSaveMask, #cvPromptLibMask {
  background: rgba(6, 8, 12, .72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .dhv-modal.cvpl-save-modal,
:root[data-theme="dark"] .dhv-modal.cvpl-lib-modal { background: var(--soft); }
/* 定高后内容区撑满余高：保存弹窗 textarea 撑满；列表弹窗卡片网格撑满并内部滚动 */
#cvPromptSaveMask .dh-aiw-grid { flex: 1 1 auto; min-height: 0; }
#cvPromptSaveMask .dh-aiw-field:last-child { flex: 1 1 auto; min-height: 0; }
#cvPromptSaveMask .dh-aiw-field:last-child .cvpl-ta { flex: 1 1 auto; min-height: 0; resize: none; }
#cvPromptLibMask .cvpl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
:root[data-theme="dark"] #cvPromptLibMask .cvpl-card { background: var(--surface); }
/* 内容 textarea（保存弹窗） */
.cvpl-ta { width: 100%; min-height: 220px; padding: 10px 12px; line-height: 1.6; resize: vertical; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 15px; outline: none; }
.cvpl-ta:focus { border-color: var(--primary); }
.cvpl-ta::placeholder { color: var(--text-tertiary); }
/* 保存失败内联错误 */
.cvpl-save-err { color: var(--danger); font-size: 13px; line-height: 1.5; margin-top: 10px; }
/* 卡片网格（我的提示词弹窗） */
.cvpl-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; min-height: 120px; margin-top: 14px; align-content: start; align-items: start; }
/* —— 卡片（视觉同 IP 档案库 .dh-ip-card：圆角/描边/hover 白描边 #D7D9DE，2026-10-09 标准色） —— */
.cvpl-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-height: 120px; }
.cvpl-card:hover { border-color: #D7D9DE; background: var(--hover-bg); }
.cvpl-head { display: flex; align-items: center; gap: 6px; }
.cvpl-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvpl-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.cvpl-card:hover .cvpl-acts { opacity: 1; }
.cvpl-ico { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.cvpl-ico:hover { background: var(--hover-bg); color: var(--text); }
.cvpl-ico.del-arm { color: var(--danger); font-size: 11px; font-weight: 600; width: auto; padding: 0 6px; }
.cvpl-ico svg { width: 14px; height: 14px; }
.cvpl-meta { display: flex; gap: 6px; align-items: center; }
.cvpl-tag { font-size: 12px; color: var(--muted); background: var(--hover-bg); border-radius: 999px; padding: 1px 8px; }
.cvpl-date { font-size: 12px; color: var(--fg-subtle); }
.cvpl-text { flex: 1; min-height: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cvpl-foot { display: flex; justify-content: flex-end; }
.cvpl-ins { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; padding: 4px 14px; cursor: pointer; }
.cvpl-ins:hover { border-color: var(--primary); color: var(--primary); }
/* —— ID 作用域：字号 +2 档 / 间距 / 深色按钮色，逐行对齐 #dhIpMask（6547~6560） —— */
#cvPromptSaveMask .dhv-title, #cvPromptLibMask .dhv-title { font-size: 18px; }
#cvPromptSaveMask .dh-ex-tip, #cvPromptLibMask .dh-ex-tip { font-size: 14px; line-height: 1.75; margin: 14px 0; }
#cvPromptSaveMask .dh-aiw-field > span, #cvPromptLibMask .dh-aiw-field > span { font-size: 14.5px; }
#cvPromptSaveMask .dh-aiw-input, #cvPromptLibMask .dh-aiw-input { font-size: 15px; }
#cvPromptSaveMask .cvpl-ta, #cvPromptLibMask .cvpl-ta { font-size: 15px; }
#cvPromptSaveMask .dh-btn-mini, #cvPromptLibMask .dh-btn-mini { font-size: 14px; height: 34px; }
/* 主按钮统一渐变（2026-10-11 用户要求：纯色按钮 → --grad-cta；取消/编辑/删除保持中性，同 IP 档案库先例） */
#cvPromptSaveMask .dh-btn-mini.primary { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; }
#cvPromptSaveMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
#cvPromptLibMask .cvpl-ins { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; }
#cvPromptLibMask .cvpl-ins:hover { background: var(--grad-cta-hover, var(--primary-dark)); border-color: transparent; color: #fff; }
/* 搜索框：单行（基类 flex-basis 220px 在纵向 flex 里会变成高度 220px，2026-10-11 用户反馈「太大」，改回一行全宽） */
#cvPromptLibMask .dhv-search { flex: 0 0 auto; width: 100%; height: 34px; font-size: 13.5px; }
#cvPromptLibMask .cvpl-title { font-size: 14.5px; }
#cvPromptLibMask .cvpl-text { font-size: 13.5px; }
#cvPromptLibMask .cvpl-tag, #cvPromptLibMask .cvpl-date { font-size: 12px; }
#cvPromptLibMask .cvpl-ins { font-size: 13.5px; }
/* ---------- 角色管理弹窗（画布文本制作框「选择角色」，2026-10-11 对标北斗） ----------
   外壳 .dhv-mask/.dhv-modal → 自带 IP 档案库双流光（禁止重复声明伪元素）；卡片视觉同 .cvpl/.dh-ip-card 族。 */
.cvrole-modal { width: min(680px, 94vw); }
:root[data-theme="dark"] .dhv-modal.cvrole-modal { background: var(--soft); }
:root[data-theme="dark"] #cvRoleMask .cvrole-card { background: var(--surface); }
/* 页签：我的角色 / 创建角色 */
.cvrole-tabs { display: flex; gap: 8px; margin-top: 14px; }
.cvrole-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cvrole-tab:hover { color: var(--text); border-color: var(--hover-border); }
.cvrole-tab.active { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; box-shadow: 0 4px 20px rgba(94, 99, 245, .38); }
.cvrole-tab.active:hover { background: var(--grad-cta-hover, var(--primary-dark)); color: #fff; }
/* 取消选择 */
.cvrole-clear { display: inline-flex; align-items: center; gap: 5px; margin: 12px 0 0; padding: 0; border: 0; background: transparent; color: var(--text-tertiary); font: inherit; font-size: 13px; cursor: pointer; }
.cvrole-clear:hover { color: var(--danger); }
/* 角色卡片列表（单列大卡，同北斗） */
.cvrole-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; overflow-y: auto; min-height: 120px; max-height: 46vh; padding: 2px; }
.cvrole-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; font: inherit; }
.cvrole-card:hover { border-color: #D7D9DE; background: var(--hover-bg); }
.cvrole-card.selected { border-color: var(--primary); box-shadow: 0 0 0 1.5px rgba(var(--primary-rgb),.30); background: var(--primary-light); }
.cvrole-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; overflow: hidden; }
/* 官方角色卡通头像：内联 SVG，内容自带圆形裁剪，底色是角色主色，两种主题下都不需要换色 */
svg.cvrole-avatar { background: none; }
.cv-role-ava-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cvrole-ava-txt { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #5B6472; color: #fff; font-size: 18px; font-weight: 700; }
.cvrole-info { flex: 1; min-width: 0; }
.cvrole-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 650; color: var(--text); }
.cvrole-tag { font-style: normal; font-size: 11px; font-weight: 600; color: var(--warning); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; line-height: 16px; flex: 0 0 auto; }
.cvrole-sel { font-style: normal; font-size: 11px; font-weight: 600; color: var(--primary); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; line-height: 16px; flex: 0 0 auto; }
.cvrole-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvrole-del { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; padding: 0; }
.cvrole-card:hover .cvrole-del { opacity: 1; }
.cvrole-del:hover { background: var(--hover-bg); color: var(--danger); }
.cvrole-del.del-arm { color: var(--danger); font-size: 11px; font-weight: 600; width: auto; padding: 0 6px; opacity: 1; }
.cvrole-empty { text-align: center; color: var(--fg-subtle); font-size: 13px; padding: 30px 0; }
/* 创建角色表单 */
.cvrole-form-tip { margin: 14px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--primary-light); color: var(--warning); font-size: 13.5px; line-height: 1.6; }
.cvrole-ta { min-height: 180px; resize: vertical; }
.cvrole-count { text-align: right; font-size: 12px; color: var(--fg-subtle); margin-top: 6px; }
.cvrole-save-err { color: var(--danger); font-size: 13px; line-height: 1.5; margin-top: 10px; }
/* —— ID 作用域：字号 +2 档，逐行对齐 #dhIpMask（同 cvPrompt* 两弹窗） —— */
#cvRoleMask .dhv-title { font-size: 18px; }
#cvRoleMask .dh-ex-tip { font-size: 14px; line-height: 1.75; margin: 14px 0; }
#cvRoleMask .dh-aiw-field > span { font-size: 14.5px; }
#cvRoleMask .dh-aiw-input { font-size: 15px; }
#cvRoleMask .cvpl-ta { font-size: 15px; }
#cvRoleMask .dh-btn-mini { font-size: 14px; height: 34px; }
#cvRoleMask .dh-btn-mini.primary { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; }   /* 统一渐变主按钮（同 #dhAvTrimMask 先例） */
#cvRoleMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
.cv-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.cv-picker-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface); }
.cv-picker-item:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.15); }
.cv-picker-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cv-picker-item .cvp-prompt { padding: 6px 8px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 资产选择器：类型筛选胶囊 + 音频占位 */
.cv-picker-filter { display: flex; gap: 8px; margin-bottom: 12px; }
.cv-picker-chip { padding: 5px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer; }
.cv-picker-chip:hover { border-color: var(--primary); color: var(--primary); }
.cv-picker-chip.on { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 600; }
.cv-picker-item .cvp-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; aspect-ratio: 1; background: var(--surface-2); color: var(--fg-subtle); font-size: 12px; }
.cv-picker-item .cvp-audio .ico { width: 22px; height: 22px; }

/* ---- 画布二期：顶栏积分 / 框选 / 空态提示 / 右键菜单 ---- */
.cv-balance { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: #FFF7E8; color: var(--warning); font-size: 15px; font-weight: 600; white-space: nowrap; }
.cv-balance .ico { width: 15px; height: 15px; }
.cv-marquee { position: absolute; border: 1px solid var(--primary); background: rgba(var(--primary-rgb),.10); pointer-events: none; z-index: 15; }
/* 多选浮动工具条（深色，浮在选区上方） */
.cv-multi-bar { position: absolute; left: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 11px; background: #2B333F; box-shadow: 0 8px 22px rgba(15,20,30,.28); color:#fff; font-size: 13px; line-height: 1; white-space: nowrap; }
.cv-multi-bar[hidden] { display: none !important; }
.cvmb-count { padding: 0 8px; font-weight: 600; color:#fff; }
.cvmb-sep { width: 1px; height: 16px; margin: 0 6px; background: rgba(255,255,255,.18); flex: 0 0 auto; }
.cvmb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 0; border-radius: 8px; background: transparent; color: #EDF0F4; font: inherit; font-size: 13px; cursor: pointer; }
.cvmb-btn:hover { background: rgba(255,255,255,.13); color:#fff; }
.cvmb-btn.danger:hover { background: rgba(240,90,90,.25); color: #FFD9D9; }
.cvmb-btn .ico { width: 16px; height: 16px; }
.cv-empty-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #B0B6BF; font-size: 13px; pointer-events: none; }
.cv-empty-hint[hidden] { display: none; }
.cv-ctxmenu { position: fixed; z-index: 400; min-width: 168px; padding: 5px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 26px rgba(20,30,50,.16); }
.cv-ctxmenu[hidden] { display: none; }
.cv-ctxmenu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; text-align: left; }
.cv-ctxmenu button:hover { background: #F2F5FA; color: var(--primary); }
.cv-ctxmenu button.danger:hover { background: #FDECEE; color: var(--danger); }
.cv-ctxmenu button .ico { width: 15px; height: 15px; }
.cv-ctxmenu .cvm-sep { height: 1px; background: #EEF0F3; margin: 4px 6px; }
.cv-ctxmenu .cvm-key { margin-left: auto; font-size: 11px; color: #9AA0A8; }

/* ---- 节点类型扩展 ---- */
.cv-node.video { background: #10131A; }
.cv-node.video .cv-node-media { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; }
.cv-node.video video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #10131A; }
.cv-node.video .cv-vid-foot { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; z-index: 5; }
.cv-node.video .cv-vid-badge { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.55); color:#fff; font-size: 10.5px; }
.cv-node.video .cv-vid-badge .ico { width: 11px; height: 11px; }
.cv-node.video .cv-vid-sound { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: rgba(0,0,0,.55); color:#fff; cursor: pointer; opacity: 0; transition: opacity .16s, background .16s; }
.cv-node.video:hover .cv-vid-sound, .cv-node.video .cv-vid-sound.on { opacity: 1; }
.cv-node.video .cv-vid-sound:hover { background: rgba(var(--primary-rgb),.9); }
.cv-node.video .cv-vid-sound .ico { width: 13px; height: 13px; }
.cv-node.audio { background: #1b2030; }
.cv-node.audio .cv-node-media { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px; box-sizing: border-box; }
.cv-node.audio audio.cv-audio { width: 100%; }
.cv-node.group { background: rgba(var(--primary-rgb),.045); border: 1px dashed #9DB6EA; border-radius: 14px; box-shadow: none; pointer-events: auto; }
.cv-node.group.selected { border-color: var(--primary); background: rgba(var(--primary-rgb),.09); }
.cv-node.group .cv-group-label { position: absolute; left: 10px; top: -11px; padding: 1px 8px; border-radius: 6px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; }
.cv-node.app { background: var(--surface); border-color: #C9D7F5; }
.cv-node.app .cv-app { display: flex; flex-direction: column; height: 100%; padding: 10px 12px; gap: 8px; }
.cv-node.app .cv-app-head { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--primary); }
.cv-node.app .cv-app-head .ico { width: 13px; height: 13px; }
.cv-node.app .cv-app-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-node.app .cv-app-sel, .cv-node.app .cv-app-prompt, .cv-node.app .cv-app-meta { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font-size: 11.5px; color: var(--text); font-family: inherit; outline: none; background: var(--surface); }
.cv-node.app .cv-app-prompt { flex: 1; resize: none; line-height: 1.5; }
.cv-node.app .cv-app-meta { display: flex; align-items: center; gap: 6px; border: none; padding: 0; background: transparent; }
.cv-node.app .cv-app-refs { display: flex; gap: 4px; flex-wrap: wrap; min-height: 20px; }
.cv-node.app .cv-ref-chip { position: relative; width: 22px; height: 22px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.cv-node.app .cv-ref-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-node.app .cv-ref-none { font-size: 11px; color: #9AA0A8; }
.cv-node.app .cv-app-run { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border: none; border-radius: 8px; background: var(--grad-cta); background-color: var(--primary); color:#fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.cv-node.app .cv-app-run:hover { background: var(--grad-cta-hover); }
.cv-node.app .cv-app-run[disabled] { background: #A9BDE8; cursor: default; }
.cv-node.app .cv-app-cost { font-size: 11px; color: var(--warning); font-weight: 600; white-space: nowrap; }
.cv-node.app .cv-app-status { font-size: 11px; color: var(--fg-subtle); }
.cv-node.app.running { border-color: #E0A94A; }
.cv-node-size { position: absolute; right: 6px; bottom: 5px; padding: 1px 5px; border-radius: 4px; background: rgba(20,26,38,.55); color:#fff; font-size: 10px; letter-spacing: .3px; pointer-events: none; }
.cv-node.note .cv-node-size { background: rgba(140,110,0,.16); color: #8A6D00; }
.cv-node.group .cv-node-size { display: none; }

/* ---- 图片节点制作面板：复用首页「图片制作」同款组件（pill / 添加参考图瓦片 / 立即生成按钮） ----
   宽度 = 图片节点宽度 × 3；挂在 .cv-workarea（不随 world 变换），故画布缩放时本框尺寸不变 ---- */
.cv-make-panel { position: fixed; left: 0; top: 0; width: 660px; max-width: calc(100% - 16px); z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(31,35,41,.14); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cv-make-panel[hidden] { display: none !important; }
.cv-make-main { display: flex; align-items: stretch; gap: 12px; }
/* 提示词框：参考图缩略图行在框内第一行，下面是文字输入区 */
.cv-make-input { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--surface-2); transition: border-color .16s, background .16s, box-shadow .16s; }
.cv-make-input:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }
.cv-ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 0; }
.cv-ref-row:empty { display: none; }
.cv-ref-item { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
#cvMakeRefs .cv-ref-item { cursor: pointer; }
#cvTextPanelRefs .cv-ref-item { cursor: pointer; }
.cv-ref-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-ref-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cv-ref-item .cv-ref-del { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color:#fff; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .16s, background .16s; }
.cv-ref-item:hover .cv-ref-del { opacity: 1; }
.cv-ref-item .cv-ref-del:hover { background: var(--danger); }
.cv-ref-item .cv-ref-tag { position: absolute; left: 2px; bottom: 3px; display: flex; align-items: center; max-width: 46px; height: 15px; padding: 0 4px; border-radius: 8px; background: rgba(var(--primary-rgb),.9); color:#fff; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.cv-ref-add { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 52px; min-width: 86px; padding: 0 10px; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg-subtle); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .16s; }
.cv-ref-add:hover { border-color: var(--primary); background: var(--hover-bg); color: var(--primary); }
.cv-ref-add .ico { width: 15px; height: 15px; font-size: 15px; }
.cv-ref-add em { color: #A0A5AD; font-size: 10px; font-style: normal; font-weight: 500; }
.cv-ref-add:hover em { color: var(--primary); }
.cv-ref-more { align-self: center; color: var(--warning); font-size: 10.5px; font-weight: 500; }
/* 当前模型不支持参考视频：参考区视频 chip 置灰 + 红色警示条 */
/* 模型不支持参考视频：仅视频素材打标（图片/文档素材不受影响）——轻降饱和 + 「不支持」水印遮罩 */
.cv-ref-item.cv-ref-unsup video { filter: saturate(.35) opacity(.8); }
.cv-ref-unsup-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #ff9a9a; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; pointer-events: none; z-index: 1; }
.cv-ref-vid-warn { color: var(--danger); font-weight: 600; }
.cv-make-panel #cvMakePrompt { flex: 1; width: 100%; min-width: 0; min-height: 72px; max-height: 260px; padding: 10px 13px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.7; outline: none; overflow-y: auto; white-space: pre-wrap; word-break: break-word; cursor: text; }
.cv-make-panel #cvMakePrompt:empty::before { content: attr(data-ph); color: var(--text-tertiary); pointer-events: none; }
.cv-make-panel.expanded #cvMakePrompt { min-height: 180px; }
/* 底部操作行：右侧优化描述（运镜已移到外框右上角） */
.cv-optimize-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 10px 8px; }
.cv-optimize-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-left: auto; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--primary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .16s; }
.cv-optimize-btn:hover { background: var(--primary-light); }
.cv-optimize-btn:disabled { opacity: .55; cursor: not-allowed; }
.cv-optimize-btn .ico { width: 13px; height: 13px; }
/* @ 引用：提示词里的参考图胶囊（缩略图 + 图片N） */
.cv-mention-chip { display: inline-flex; align-items: center; gap: 5px; height: 21px; margin: 0 1px; padding: 0 7px 0 3px; border-radius: 6px; background: rgba(var(--primary-rgb),.10); color: var(--primary); font-size: 12px; font-weight: 600; line-height: 1; vertical-align: -3px; white-space: nowrap; user-select: none; }
.cv-mention-chip img, .cv-mention-chip video { display: block; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 4px; object-fit: cover; background: var(--surface-2); }
/* @ 候选列表 */
.cv-mention-pop { position: absolute; z-index: 60; min-width: 172px; max-width: 260px; max-height: 236px; overflow-y: auto; padding: 5px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(31,35,41,.16); }
.cv-mention-pop[hidden] { display: none !important; }
.cv-mention-pop .cv-mention-title { padding: 4px 8px 6px; color: #9AA0A8; font-size: 11px; }
.cv-mention-item { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 8px; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; }
.cv-mention-item.active, .cv-mention-item:hover { background: var(--primary-light); color: var(--primary); }
.cv-mention-item img, .cv-mention-item video { display: block; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--surface-2); border-radius: 7px; object-fit: cover; background: var(--surface-2); }
.cv-mention-item .cv-mention-doc-ico { display: block; flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--surface-2); border-radius: 7px; background: var(--surface-2); font-size: 18px; }
.cv-mention-item .cv-mention-empty { padding: 2px 0; color: var(--text-tertiary); font-size: 12px; font-weight: 400; }
/* 视频描述 @ 引用素材候选弹窗（移植自画布 cv-mention-*，position:fixed 适配普通 textarea；全程用主题令牌，浅色/深色自动适配） */
.vg-mention-pop { position: fixed; z-index: 9999; min-width: 208px; max-width: 300px; max-height: 264px; overflow-y: auto; padding: 5px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(31,35,41,.18); }
.vg-mention-pop[hidden] { display: none !important; }
.vg-mention-pop .vg-mention-title { padding: 4px 8px 6px; color: var(--fg-subtle); font-size: 11px; }
.vg-mention-item { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 8px; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; }
.vg-mention-item.active, .vg-mention-item:hover { background: var(--primary-light); color: var(--primary); }
.vg-mention-thumb { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--surface-2); border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.vg-mention-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vg-mention-thumb video { width: 100%; height: 100%; object-fit: cover; }
.vg-mention-thumb .vg-mention-ico { font-size: 18px; line-height: 1; }
.vg-mention-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vg-mention-meta b { font-size: 14px; font-weight: 600; }
.vg-mention-meta i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.vg-mention-item.active .vg-mention-meta i, .vg-mention-item:hover .vg-mention-meta i { color: var(--primary); }
.vg-mention-item .vg-mention-empty { padding: 2px 0; color: var(--text-tertiary); font-size: 12px; font-weight: 400; }
/* 缩略图悬浮放大预览 */
.cv-ref-zoom { position: fixed; z-index: 9999; padding: 5px; border: 1px solid var(--surface-2); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 42px rgba(31,35,41,.22); pointer-events: none; }
.cv-ref-zoom[hidden] { display: none !important; }
.cv-ref-zoom img { display: block; width: 220px; height: 220px; border-radius: 8px; object-fit: contain; background: var(--surface-2); }
.cv-ref-zoom video { display: none; width: 220px; height: 220px; border-radius: 8px; object-fit: contain; background: var(--surface-2); }
.cv-ref-zoom.video img { display: none; }
.cv-ref-zoom.video video { display: block; }
.cv-make-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cv-make-ico { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: #9AA0A8; cursor: pointer; transition: all .16s; }
.cv-make-ico .ico { width: 16px; height: 16px; font-size: 16px; }
.cv-make-ico:hover { color: var(--primary); background: #F2F5FA; }
/* 制作框右上角「隐藏」按钮：悬浮在面板角落的圆形关闭徽标；只隐藏不删除，点击节点可再次打开 */
.cv-panel-hide { position: absolute; top: -11px; right: -11px; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: #9AA0A8; cursor: pointer; z-index: 6; box-shadow: 0 2px 10px rgba(31,35,41,.22); transition: color .16s, border-color .16s, transform .16s; }
.cv-panel-hide .ico { width: 12px; height: 12px; display: block; }
.cv-panel-hide:hover { color: var(--primary); border-color: var(--primary); transform: scale(1.08); }
/* 参数胶囊 + 立即生成 同一行 */
.cv-make-params { position: relative; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.cv-make-params:empty { display: none; }
/* 参数：一行紧凑胶囊，点开后在按钮上方「上拉」展开选项 */
.cv-sel-bar { position: relative; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cv-sel { display: inline-flex; align-items: center; gap: 5px; max-width: 280px; height: 32px; padding: 0 10px; border: 1px solid var(--surface-2); border-radius: 8px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color .16s, color .16s, box-shadow .16s; }
.cv-sel:hover { border-color: #D7D9DE; color: var(--primary); }
.cv-sel.open { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }
.cv-sel.locked { color: var(--fg-subtle); background: var(--surface-2); cursor: default; }
.cv-sel.locked .caret { opacity: .35; }
.cv-sel-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「参数」「动态优化」胶囊 → 上拉面板（2026-10-30：与首页同构，把并排的多枚胶囊合并成一座面板）
   面板内部复用首页 .qp-* 组件（section / 胶囊 / 画幅网格 / 拖拽轴），宽度比首页窄一点以贴合 660px 制作框。
   ★ 不要给 .cv-sel-wrap 设 overflow —— 面板要能溢出胶囊外。 */
.cv-sel-wrap { position: relative; display: inline-flex; min-width: 0; }
.cv-sel-wrap > .cv-sel { max-width: 340px; }
.cv-pop { width: 300px; max-width: calc(100vw - 40px); }
/* 制作框贴视口顶部时上方放不下 → 由 cvOpenMakePop 加 .down 改成向下弹（否则面板跑到视口外看不见） */
.cv-pop.down { bottom: auto; top: calc(100% + 6px); }
.cv-pop .qp-sec:first-child { margin-top: 0; }
/* 模型胶囊/选项的品牌图标（Grok/即梦/GPT…，与首页模型下拉同一套品牌标） */
.cv-sel .cv-sel-ico { flex: 0 0 auto; width: 13px; height: 13px; color: var(--fg-subtle); }
.cv-sel-opt .cv-sel-ico { flex: 0 0 auto; width: 14px; height: 14px; color: var(--fg-subtle); }
.cv-sel-opt.active .cv-sel-ico { color: var(--primary); }
.cv-sel .caret { flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .65; transition: transform .16s; }
.cv-sel.open .caret { transform: rotate(180deg); }
.cv-sel-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 6; min-width: 150px; max-width: 300px; max-height: 220px; overflow-y: auto; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(31,35,41,.18); }
.cv-sel-menu::-webkit-scrollbar { width: 6px; }
.cv-sel-menu::-webkit-scrollbar-thumb { background: #D8DCE3; border-radius: 3px; }
.cv-sel-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; color: var(--text); font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.cv-sel-opt > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cv-sel-opt:hover { background: #F2F5FA; color: var(--text); }
.cv-sel-opt.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.cv-sel-opt .ck { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.cv-sel-opt.active .ck { visibility: visible; }
/* 生成按钮：与胶囊同行，靠右 */
.cv-make-run { width: auto; flex: 0 0 auto; min-height: 36px; padding: 7px 15px; border-radius: 8px; font-size: 13.5px; gap: 6px; white-space: nowrap; }
.cv-make-run .cost-badge { margin-left: 2px; padding: 2px 8px; }
.cv-make-run .ico { font-size: 15px; }

/* ---- 运镜（仅视频节点）：按钮把「运镜提示词」插入到输入框光标处，可插入多段 ---- */
/* 工具条挂在面板外框右上角（提示词输入框之外），右侧 20px 给关闭按钮让位 */
.cv-motion-row { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: -4px 0 -6px; padding-right: 20px; min-width: 0; }
.cv-motion-row[hidden] { display: none !important; }
.cv-motion-label { flex: 0 0 auto; color: var(--fg-subtle); font-size: 12px; font-weight: 600; }
.cv-motion-cur { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--fg-subtle); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .16s, color .16s, box-shadow .16s, background .16s; }
.cv-motion-cur::before { content: ''; width: 9px; height: 9px; border: 1.6px solid currentColor; border-radius: 50%; opacity: .75; }
.cv-motion-cur::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; transition: transform .16s; }
.cv-motion-cur:hover { border-color: var(--primary); color: var(--primary); }
.cv-motion-cur.on { color: var(--primary); border-color: rgba(var(--primary-rgb),.5); background: var(--primary-light); }
.cv-motion-cur.open { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }
.cv-motion-cur.open::after { transform: rotate(180deg); }
.cv-motion-count { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; }
.cv-motion-count[hidden] { display: none !important; }
/* ---- 提示词模板：按钮与运镜同款（图标用方块区分）+ 列表式弹层（图标 / 名称+「模板」标签 / 说明） ---- */
.cv-frag-cur::before { border-radius: 2px; opacity: .85; }
.cv-frag-cur::after { border-top-width: 4.5px; }
.cv-tpl-pop { width: 420px; }
.cv-tpl-opt { align-items: flex-start; gap: 10px; padding: 9px 10px; }
.cv-tpl-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-subtle); }
.cv-tpl-ico .ico { font-size: 15px; }
.cv-tpl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cv-tpl-head { display: flex; align-items: center; gap: 6px; }
.cv-tpl-name { color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.cv-tpl-tag { flex: 0 0 auto; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-subtle); font-size: 11px; font-weight: 500; }
.cv-tpl-desc { color: var(--text-tertiary); font-size: 12.5px; font-weight: 400; line-height: 1.35; white-space: normal; }
.cv-tpl-opt:hover .cv-tpl-name { color: var(--primary); }
/* 提示词里的运镜胶囊（内联、原子节点，点一下可更换/移除） */
.cv-motion-chip { display: inline-flex; align-items: center; gap: 4px; height: 21px; margin: 0 1px; padding: 0 6px 0 7px; border-radius: 6px; background: rgba(var(--primary-rgb),.10); color: var(--primary); font-size: 12px; font-weight: 600; line-height: 1; vertical-align: -3px; white-space: nowrap; user-select: none; cursor: pointer; }
.cv-motion-chip:hover { background: rgba(var(--primary-rgb),.18); }
.cv-motion-chip::before { content: ''; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .7; }
.cv-motion-chip-car { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .6; }
/* 风格胶囊：与运镜同款内联胶囊，只能有一个、固定在提示词最前面；图标用圆环区分 */
.cv-style-chip { display: inline-flex; align-items: center; gap: 4px; height: 21px; margin: 0 1px; padding: 0 6px 0 7px; border-radius: 6px; background: rgba(var(--primary-rgb),.10); color: var(--primary); font-size: 12px; font-weight: 600; line-height: 1; vertical-align: -3px; white-space: nowrap; user-select: none; cursor: pointer; }
.cv-style-chip:hover { background: rgba(var(--primary-rgb),.18); }
.cv-style-chip::before { content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .75; }
.cv-style-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
/* 按钮上的取消叉：有风格时才出现 */
.cv-style-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 1px; border-radius: 50%; color: var(--text-tertiary); font-size: 12px; font-weight: 400; line-height: 1; cursor: pointer; }
.cv-style-x:hover { background: rgba(var(--primary-rgb),.16); color: var(--primary); }
.cv-style-x[hidden] { display: none !important; }
.cv-motion-pop { position: fixed; left: 0; top: 0; z-index: 60; width: 420px; max-width: calc(100vw - 20px); max-height: min(620px, 76vh); overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(31,35,41,.18); box-sizing: border-box; }
.cv-motion-pop[hidden] { display: none !important; }
.cv-motion-pop::-webkit-scrollbar { width: 6px; }
.cv-motion-pop::-webkit-scrollbar-thumb { background: #D8DCE3; border-radius: 3px; }
.cv-motion-grp { padding: 8px 8px 4px; color: var(--text-tertiary); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.cv-motion-opt { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .12s; }
.cv-motion-opt:hover { background: var(--hover-bg); }
.cv-motion-opt.on { background: var(--primary-light); color: var(--primary); }
.cv-motion-opt.cv-motion-clear { color: var(--fg-subtle); }
.cv-motion-name { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.cv-motion-opt.on .cv-motion-name { font-weight: 700; }
.cv-motion-desc { flex: 1; min-width: 0; color: var(--text-tertiary); font-size: 12.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-motion-opt.on .cv-motion-desc { color: var(--primary); opacity: .8; }

/* ---- 图片节点「风格 / 预设」：与运镜同一套按钮与弹层，图标换成调色板 / 网格 ---- */
.cv-style-cur::before, .cv-preset-cur::before { display: none; }
.cv-style-cur .ico, .cv-preset-cur .ico { flex: 0 0 auto; width: 13px; height: 13px; opacity: .85; }
/* 选中风格后按钮直接显示风格名（截图形态：图标 + 名称 + ×），过长截断，别把「预设」挤出去 */
.cv-style-cur { max-width: 196px; }
.cv-style-cur .cv-motion-cur-txt { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 弹层整体放大一号：宽度 420（字号大了要留出说明位）、高度上限放宽到创作面板底边由 JS 再收 */
.cv-style-pop, .cv-preset-pop { width: 420px; max-height: min(620px, 76vh); box-sizing: border-box; }
.cv-style-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px 7px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
.cv-style-hd-tip { color: var(--text-tertiary); font-size: 12.5px; font-weight: 400; }
.cv-style-edit-btn { flex: 0 0 auto; height: 25px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--fg-subtle); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .16s, color .16s; }
.cv-style-edit-btn:hover { border-color: var(--primary); color: var(--primary); }
.cv-style-back { flex: 0 0 auto; padding: 2px 6px 2px 0; border: 0; background: transparent; color: var(--primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
/* 分组 / 条目 / 说明的字号与内边距已统一到 .cv-motion-grp / .cv-motion-opt / .cv-motion-desc 基础规则 */
.cv-style-opt { align-items: center; gap: 8px; }
.cv-style-ck { flex: 0 0 auto; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 4px; color: #fff; font-size: 11px; line-height: 1; }
.cv-motion-opt.on .cv-style-ck { background: var(--primary); border-color: var(--primary); }
.cv-style-edititem { padding: 7px 7px 9px; }
.cv-style-editname { padding: 2px 3px 6px; color: var(--primary); font-size: 13.5px; font-weight: 600; }
.cv-style-ta { width: 100%; box-sizing: border-box; min-height: 84px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.62; resize: vertical; }
/* 微调视图：文本框吃掉弹层剩余高度（弹层已撑到创作框底边，不浪费空间） */
.cv-style-pop.is-edit { display: flex; flex-direction: column; }
.cv-style-pop.is-edit .cv-style-hd { flex: 0 0 auto; }
.cv-style-pop.is-edit .cv-style-edititem { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cv-style-pop.is-edit .cv-style-ta { flex: 1 1 auto; min-height: 84px; resize: none; }
.cv-style-ta:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }

/* ---- 文本节点创作面板：与图片节点面板风格一致 ---- */
.cv-text-panel { position: fixed; left: 0; top: 0; z-index: 30; width: 660px; max-width: calc(100% - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(31,35,41,.14); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.cv-text-panel[hidden] { display: none !important; }
/* 文本节点输入框：边框/焦点样式给外层容器；参考文件行 + 添加按钮行 + textarea 自上而下 */
.cv-text-input { position: relative; display: flex; flex-direction: column; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--surface-2); transition: border-color .16s, background .16s, box-shadow .16s; }
.cv-text-input:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.10); }
.cv-text-input .cv-ref-row { padding: 10px 12px 6px; gap: 8px; }
/* 添加按钮并入参考文件同一行：包装层透明化，按钮作为 ref-row 的 flex 项参与排布/换行 */
.cv-ref-row .cv-text-add-row { display: contents; }
.cv-ref-row .cv-text-ref-full { align-self: center; }
.cv-text-input .cv-ref-row:empty { display: none; }
.cv-text-add-row { display: flex; padding: 0 12px 10px; }
.cv-text-panel-add { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 52px; min-width: 96px; padding: 0 10px; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg-subtle); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .16s; }
.cv-text-panel-add:hover { border-color: var(--primary); background: var(--hover-bg); color: var(--primary); }
.cv-text-panel-add .ico { width: 15px; height: 15px; }
.cv-text-panel-add em { color: #A0A5AD; font-size: 10px; font-style: normal; font-weight: 500; }
.cv-text-panel-add:hover em { color: var(--primary); }
.cv-text-ref-full { padding: 6px 0; font-size: 12px; color: #A0A5AD; }
/* —— 素材上限提示（2026-10-11 对标北斗）：计数 ≥80% 变橙、达上限变红；hover 弹出「支持的文件类型」明细卡 —— */
.cv-ref-add.cvl-warn em, .cv-text-panel-add.cvl-warn em { color: var(--warning); font-weight: 650; }
.cv-ref-add.is-full, .cv-text-panel-add.is-full { border-color: var(--danger); cursor: not-allowed; }
.cv-ref-add.is-full:hover, .cv-text-panel-add.is-full:hover { border-color: var(--danger); background: var(--surface); color: var(--fg-subtle); }
.cv-ref-add.is-full em, .cv-text-panel-add.is-full em { color: var(--danger); font-weight: 650; }
.cv-ref-add.is-full:hover em, .cv-text-panel-add.is-full:hover em { color: var(--danger); }
/* 明细卡：深色浮层（浅深主题统一深色，同北斗「支持的文件类型」卡与 IP 档案深色面板） */
.cv-limit-pop { position: fixed; z-index: 500; min-width: 230px; max-width: 300px; padding: 12px 14px 10px; border-radius: 12px; background: #22262E; border: 1px solid #3A404B; box-shadow: 0 14px 36px rgba(0, 0, 0, .42); color: #E8EAEE; font-size: 13px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; }
.cv-limit-pop.show { opacity: 1; transform: translateY(0); }
.cv-limit-pop .cvl-head { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.cv-limit-pop .cvl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 2.5px 0; }
.cv-limit-pop .cvl-row .cvl-k { color: #C6CBD4; }
.cv-limit-pop .cvl-row .cvl-v { font-weight: 650; }
.cv-limit-pop .cvl-row .cvl-v.ok { color: #34D399; }
.cv-limit-pop .cvl-row .cvl-v.warn { color: #FBBF24; }
.cv-limit-pop .cvl-row .cvl-v.full { color: #F87171; }
.cv-limit-pop .cvl-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .10); color: #9AA0A8; font-size: 12px; line-height: 1.65; }
.cv-limit-pop .cvl-foot .cvl-err { color: #F87171; }
/* ---- 文本制作框提示词编辑器：contenteditable，与制作框同一套 @ 引用胶囊机制 ---- */
.cv-text-panel-ed { width: 100%; min-height: 96px; max-height: 260px; padding: 10px 12px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.65; outline: none; overflow-y: auto; white-space: pre-wrap; word-break: break-word; cursor: text; box-sizing: border-box; scrollbar-gutter: stable; }
.cv-text-panel-ed:empty::before { content: attr(data-ph); color: var(--text-tertiary); pointer-events: none; }
/* 文本节点面板里的文档参考项 */
.cv-ref-item.cv-ref-doc { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--surface-2); }
.cv-ref-doc-ico { font-size: 18px; line-height: 1; }
.cv-ref-doc-name { max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: var(--fg-muted); padding: 0 3px; text-align: center; }
/* 模型不支持文档(PDF/Word)附件：参考区下方整行警示条 */
.cv-ref-doc-warn { flex: 1 0 100%; margin-top: 6px; padding: 7px 10px; border-radius: 7px; background: rgba(201,54,62,.10); border: 1px solid rgba(201,54,62,.32); box-shadow: inset 3px 0 0 var(--danger); color: var(--danger); font-size: 12px; font-weight: 600; line-height: 1.5; }
:root[data-theme="dark"] .cv-ref-doc-warn { background: rgba(240,97,107,.12); border-color: rgba(240,97,107,.34); }
.cv-text-panel-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-text-panel-model { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; background: #F2F5FA; border: 1px solid var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; }
.cv-text-panel-model:hover { background: var(--primary-light); border-color: #D7D9DE; color: var(--primary); }
.cv-text-panel-model .ico { width: 13px; height: 13px; color: inherit; }
.cv-text-panel-model .cv-caret { font-size: 10px; color: var(--fg-subtle); }
/* 选择角色按钮（文本制作框底部栏，对标北斗；选中后显示角色名 + 高亮态） */
.cv-text-role-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; background: #F2F5FA; border: 1px solid var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; max-width: 200px; }
.cv-text-role-btn:hover { background: var(--primary-light); border-color: #D7D9DE; color: var(--primary); }
.cv-text-role-btn .ico { width: 13px; height: 13px; color: inherit; flex: 0 0 auto; }
.cv-text-role-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.cv-text-role-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-text-panel-cost { font-size: 12px; color: var(--danger); font-weight: 600; }
.cv-text-panel-count { font-size: 12px; color: var(--fg-subtle); }
.cv-text-panel-send { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--grad-cta); color:#fff; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cv-text-panel-send:hover { background: var(--grad-cta-hover); }
.cv-text-panel-send .ico { width: 15px; height: 15px; }
.cv-text-panel-send:disabled, .cv-text-panel-send.is-busy { opacity: .6; cursor: default; }
.cv-text-model-pop { position: absolute; left: 0; bottom: 38px; z-index: 35; min-width: 220px; max-width: 320px; max-height: 320px; background: var(--surface); border: 1px solid var(--surface-2); border-radius: 10px; box-shadow: 0 8px 24px rgba(31,35,41,.14); padding: 6px; }
.cv-text-model-pop .qm-head { padding: 6px 8px; font-size: 13px; color: var(--fg-subtle); }
.cv-text-model-pop .qm-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.cv-text-model-pop .qm-item:hover { background: #F2F5FA; }
.cv-text-model-pop .qm-item.active { background: var(--primary-light); color: var(--primary); }
.cv-text-model-pop .qm-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-text-model-pop .qm-label { font-size: 13.5px; font-weight: 600; }
.cv-text-model-pop .qm-label .ico { color: var(--text); }
.cv-text-model-pop .qm-caps { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-text-model-pop .qm-caps .cap { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--fg-muted); font-size: 10px; font-style: normal; }
.cv-text-model-pop .qm-desc { font-size: 11px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-text-model-pop .qm-check { width: 14px; height: 14px; }

/* ---- 节点类型标签：悬浮在节点框上方，不遮挡内容 ---- */
.cv-node-head { position: absolute; left: 4px; top: -24px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: rgba(234,241,255,.95); border: 1px solid #D6E2FA; color: var(--primary); font-size: 11px; font-weight: 700; z-index: 5; pointer-events: none; }
.cv-node-head .ico { width: 12px; height: 12px; }
/* 文本节点改为「显示区 + 双击/点击展开面板」，不再在节点内直接 textarea */
.cv-node.text { background: var(--surface); border-color: var(--border); display: flex; flex-direction: column; }
.cv-node.text .cv-text-display { flex: 1; padding: 10px 12px; font-size: 15px; line-height: 1.65; color: var(--text); overflow-y: auto; word-break: break-word; white-space: pre-wrap; }
.cv-node.text .cv-text-display:empty::before { content: '双击编辑内容'; color: var(--text-tertiary); pointer-events: none; }
.cv-node.text .cv-text-output { flex: 1 1 auto; min-height: 0; padding: 10px 12px; border-top: 1px dashed var(--border); font-size: 15px; line-height: 1.65; color: var(--text); overflow-y: auto; word-break: break-word; white-space: pre-wrap; }
.cv-node.text .cv-text-output:empty { display: none; } /* 占位 div 常驻 DOM 供流式写入，但空时不占高度、不显示分隔线 */
.cv-node.text .cv-text-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 3; opacity: 0; transition: opacity .15s; }
.cv-node.text .cv-text-resize::before { content: ''; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-right: 2px solid #8FA3BF; border-bottom: 2px solid #8FA3BF; border-radius: 1px; }
.cv-node.text:hover .cv-text-resize, .cv-node.text.selected .cv-text-resize { opacity: 1; }
/* 图片/视频节点右下角等比例缩放手柄（同文本节点样式语言） */
.cv-node.image .cv-media-resize, .cv-node.video .cv-media-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 6; opacity: 0; transition: opacity .15s; }
.cv-node.image .cv-media-resize::before, .cv-node.video .cv-media-resize::before { content: ''; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-right: 2px solid #8FA3BF; border-bottom: 2px solid #8FA3BF; border-radius: 1px; }
.cv-node.image:hover .cv-media-resize, .cv-node.video:hover .cv-media-resize,
.cv-node.image.selected .cv-media-resize, .cv-node.video.selected .cv-media-resize { opacity: 1; }
/* 图片/视频节点把尺寸角标放到右上角 */
.cv-node-size { right: 6px; top: 6px; bottom: auto; }

/* ---- 历史 / 日志 / 帮助面板 ---- */
.cv-modal.narrow { width: min(440px, 92vw); }
.cv-select { height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; color: var(--text); background: var(--surface); outline: none; }
.cv-hist-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.cv-hist-item:hover { background: var(--surface-2); }
.cv-hist-item .chi-ico { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--primary-light); color: var(--primary); flex: 0 0 auto; }
.cv-hist-item .chi-ico .ico { width: 14px; height: 14px; }
.cv-hist-item .chi-main { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.cv-hist-item .chi-main small { display: block; color: var(--fg-subtle); font-size: 11px; margin-top: 2px; }
.cv-hist-item .chi-restore { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.cv-hist-item .chi-restore:hover { color: var(--primary); border-color: #D7D9DE; }
.cv-log-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius:10px; margin-bottom: 8px; }
.cv-log-item .clg-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex: 0 0 auto; }
.cv-log-item .clg-main { flex: 1; min-width: 0; }
.cv-log-item .clg-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-log-item .clg-sub { font-size: 11.5px; color: var(--fg-subtle); margin-top: 3px; }
.cv-tag-status { padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.cv-tag-status.running { background: #FFF4E0; color: var(--warning); }
.cv-tag-status.succeeded { background: #E8F6EC; color: #1F8A4C; }
.cv-tag-status.failed { background: #FDECEE; color: var(--danger); }
.cv-tag-status.pending { background: var(--surface-2); color: var(--muted); }
.cv-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.cv-help-grid .chg-title { grid-column: 1 / -1; font-size: 15px; font-weight: 700; color: var(--primary); margin: 8px 0 2px; }
.cv-help-grid .chg-row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); padding: 2px 0; }
.cv-help-grid kbd { min-width: 74px; text-align: center; padding: 2px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); font-size: 11px; color: var(--fg-muted); font-family: inherit; }

/* ============================================================
   我的资产（素材库）：容量条 / 搜索上传 / 类型 tab / 素材网格 / 预览浮层
   ============================================================ */
.assets-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.as-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 6px; }

.as-head { display: flex; align-items: center; gap: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.as-head-main { flex: 1; min-width: 0; }
.as-head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.as-head-row h3 { font-size: 16.5px; font-weight: 700; color: var(--text); }
.as-quota { font-size: 13px; color: var(--muted); }
.as-quota b, .as-free b { color: var(--text); font-weight: 650; }
.as-quota-note { margin-left: 4px; font-style: normal; font-size: 12px; color: var(--muted); opacity: .85; }
.as-free { font-size: 13px; color: var(--muted); }
.as-bar { margin-top: 10px; width: 100%; max-width: 560px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.as-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--primary), #5B8DEF); transition: width .32s ease; }
.as-bar.warn i { background: linear-gradient(90deg, #E4572E, #F0854F); }
.as-buy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .16s; }
.as-buy:hover { border-color: var(--hover-border); color: var(--primary-dark); background: var(--hover-bg); }

/* 购买存储空间弹窗（复用 .as-preview-mask / .as-dialog 外壳） */
.sp-cur { margin: 2px 0 14px; font-size: 13px; color: var(--fg-muted); }
.sp-cur b { color: var(--text); font-weight: 700; }
.sp-packs { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; }
.sp-pack { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: all .15s; }
.sp-pack:hover { border-color: var(--hover-border); background: var(--hover-bg); }
.sp-pack.disabled { opacity: .5; cursor: not-allowed; }
.sp-pack input { width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; }
.sp-pack-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-pack-main > b { font-size: 15px; color: var(--text); }
.sp-pack-desc { font-size: 12px; color: var(--fg-muted); }
.sp-pack-credit { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.sp-err { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: #ff6b6b; }

.as-toolbar { display: flex; align-items: center; gap: 10px; }
.as-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-tertiary); transition: border-color .16s, box-shadow .16s; }
.as-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); }
.as-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--text); }
.as-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .16s; }
.as-btn:hover { border-color: var(--hover-border); color: var(--primary-dark); background: var(--hover-bg); }
.as-btn.primary { border-color: var(--primary); background: var(--primary); color:#fff; }
.as-btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color:#fff; }

.as-tabs { display: flex; align-items: center; gap: 8px; }
.as-tab { height: 34px; padding: 0 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .16s; }
.as-tab:hover { border-color: var(--hover-border); color: var(--primary-dark); }
.as-tab.active { border-color: var(--primary); background: var(--primary); color:#fff; }
.as-count { margin-left: auto; font-size: 15px; color: var(--text-secondary); }

.as-hint { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 15px; }
.as-hint .ico { color: var(--text-tertiary); }

.as-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 14px 2px; }
.as-scroll::-webkit-scrollbar { width: 6px; }
.as-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.as-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }

.as-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .16s, box-shadow .18s, transform .18s; }
.as-card:hover { border-color: var(--hover-border); box-shadow: 0 8px 20px rgba(20, 30, 50, .09); transform: translateY(-1px); }
/* 封面统一 1:1（2026-09-19 晚修正）：原为 display:grid + place-items:center，
   会让子元素的 height:100% 陷入循环依赖而回退为 auto —— 图片/视频按固有高度渲染、
   从顶部溢出后被 overflow:hidden 裁掉下半，视觉上就成了"从顶部算正方形"（已用无头浏览器实测确认：
   9:16 素材只显示源图顶部 5/8）。改为与 .wk-cover 一致的 block 写法后 height:100% 生效，
   object-fit:cover 正常居中裁切。音频占位改用绝对定位填满并自行居中。 */
.as-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.as-thumb img, .as-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-thumb .as-ph { position: absolute; inset: 0; color: var(--fg-faint); font-size: 30px; display: grid; place-items: center; gap: 6px; }
.as-thumb .as-ph span { font-size: 11.5px; color: var(--text-tertiary); }
.as-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 6px; background: rgba(27, 31, 39, .72); color:#fff; font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.as-ops { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .16s; }
.as-card:hover .as-ops { opacity: 1; }
.as-op { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(27, 31, 39, .68); color:#fff; font-size: 14px; cursor: pointer; transition: background .16s; }
.as-op:hover { background: var(--primary); }
.as-op.danger:hover { background: var(--danger); }
.as-info { padding: 9px 11px 11px; }
.as-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-size { margin-top: 3px; font-size: 11.5px; color: var(--text-secondary); }
.as-empty { padding: 64px 0; text-align: center; color: var(--text-secondary); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.as-empty .ico { font-size: 34px; color: #D5D9E0; }
/* ★ 必须配合 [hidden]：.as-empty 设了 display:flex，会盖掉浏览器默认的 [hidden]{display:none}，
   否则隐藏态失效——切换分类时空状态文案会残留在有素材的分类里（如「还没有贴纸素材」）。 */
.as-empty[hidden] { display: none; }

.as-preview-mask { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.as-preview-mask.show { display: flex; }
.as-preview { display: flex; flex-direction: column; width: min(880px, 86vw); max-height: 88vh; border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: 0 22px 64px rgba(10, 15, 25, .38); }
.as-preview-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.as-preview-name { font-size: 14px; font-weight: 650; color: var(--text); max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-preview-meta { font-size: 12px; color: var(--text-secondary); }
.as-flex { flex: 1; }
.as-ico-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 14px; cursor: pointer; transition: all .16s; }
.as-ico-btn:hover { border-color: var(--hover-border); color: var(--primary); background: var(--hover-bg); }
.as-preview-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; background: var(--surface-2); overflow: auto; }
.as-preview-body img { max-width: 100%; max-height: 70vh; display: block; border-radius: 8px; }
.as-preview-body video { max-width: 100%; max-height: 70vh; border-radius: 8px; background: #000; display: block; }
.as-preview-body audio { width: min(560px, 82%); }

/* ── 我的资产：上传 / 编辑标签弹窗 + 标签体系（2026-09-25 智能剪辑对接） ──
   分类胶囊由 JS 按 ASSET_CATEGORIES 渲染（与智能剪辑素材库共用同一份清单），
   标签随素材走：这里改标签 = 改 assets 行，智能剪辑素材库同步可见。 */
.as-dialog { display: flex; flex-direction: column; width: min(560px, 90vw); max-height: 88vh; border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: 0 22px 64px rgba(10, 15, 25, .38); }
.as-dlg-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.as-dlg-label { font-size: 15px; font-weight: 650; color: var(--text-secondary); }
.as-dlg-tip { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.as-dlg-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.as-dlg-foot .as-btn { height: 38px; padding: 0 18px; }
.as-tabs { flex-wrap: wrap; row-gap: 8px; }         /* 分类变多（7 个）后允许换行，不再挤成一行 */
.as-count { margin-left: auto; }

/* 标签输入：已选标签 + 输入框，回车/逗号/分号分隔，退格删最后一个 */
.as-tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.as-tagbox:focus-within { border-color: var(--primary); }
.as-tagbox input { flex: 1; min-width: 120px; height: 28px; border: 0; outline: none; font-size: 13px; background: transparent; }
.as-tag-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; background: var(--hover-bg); color: var(--text); font-size: 15px; font-weight: 600; }
.as-tag-chip i { font-style: normal; cursor: pointer; color: var(--text-secondary); padding: 0 2px; }
.as-tag-chip i:hover { color: var(--danger, #E5484D); }
.as-tag-old { display: flex; flex-wrap: wrap; gap: 6px; }
.as-tag-old .as-tag-old-t { font-size: 12px; color: var(--text-secondary); }
.as-tag-sug { height: 26px; padding: 0 10px; border: 1px dashed var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer; }
.as-tag-sug:hover { border-color: var(--primary); color: var(--primary); }

/* 文件清单（批量上传） */
.as-filelist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.as-file-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 15px; }
.as-file-row .as-file-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-file-row .as-file-size { color: var(--text-secondary); }
.as-file-row.bad { border-color: #F0B4B4; background: #FFF6F6; color: var(--danger); }
.as-file-row .as-ico-btn { width: 24px; height: 24px; }
/* 上传中：行内进度条 + 百分比（完成绿 / 失败红） */
.as-file-row.uping { flex-wrap: wrap; }
.as-file-row .as-file-bar { flex: 1 1 100%; height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.as-file-row .as-file-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--primary); transition: width .2s; }
/* 100% 但仍未结束（合并入库/OSS 落盘）：条纹流动，明确"还在动"而不是卡死 */
.as-file-row .as-file-bar i.pending {
  background-image: linear-gradient(90deg, rgba(255,255,255,.55) 0 18%, transparent 18% 36%);
  background-size: 200% 100%; background-repeat: repeat-x;
  animation: asBarFlow .9s linear infinite;
}
@keyframes asBarFlow { from { background-position: 0 0; } to { background-position: -200% 0; } }
.as-file-row .as-file-pct { min-width: 56px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-file-row.done { border-color: #BFE3C6; background: #F4FBF5; }
.as-file-row.done .as-file-pct { color: var(--success); font-weight: 600; }
.as-file-row.failed { border-color: #F0B4B4; background: #FFF6F6; }
.as-file-row.failed .as-file-pct { color: var(--danger); font-weight: 600; }

/* 列表顶部标签筛选行 */
.as-tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.as-tag-pill { height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .16s; }
.as-tag-pill:hover { border-color: var(--hover-border); color: var(--primary-dark); }
.as-tag-pill.active { border-color: var(--primary); background: var(--primary); color:#fff; }

/* 标签筛选行 + 管理按钮（同一行横向排列） */
.as-tagbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
/* ★ 必须配合 [hidden]：.as-tagbar-row 设了 display:flex，会盖掉浏览器默认的 [hidden]{display:none}，
   无标签时 hidden 不生效会导致「管理」按钮和空行仍显示（同 .as-empty[hidden] 的老问题） */
.as-tagbar-row[hidden] { display: none; }
.as-tag-manage-btn { height: 28px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .16s; }
.as-tag-manage-btn:hover { border-color: var(--primary); color: var(--primary); }

/* 标签管理弹窗列表 */
.as-tag-manage-list { display: flex; flex-direction: column; gap: 8px; }
.as-tag-manage-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.as-tag-manage-name { max-width: 60%; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-tag-manage-row .as-btn.sm { height: 30px; padding: 0 14px; font-size: 12.5px; }
.as-tag-manage-row .as-btn.sm.danger { color: var(--danger, #E5484D); border-color: color-mix(in srgb, var(--danger, #E5484D) 40%, var(--line)); }
.as-tag-manage-row .as-btn.sm.danger:hover { background: var(--danger, #E5484D); border-color: var(--danger, #E5484D); color: #fff; }

/* 卡片上的标签（最多显示 2 个，其余折叠成 +N） */
.as-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.as-card-tag { max-width: 100%; padding: 0 6px; height: 19px; line-height: 19px; border-radius: 5px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   画布素材预览（原始尺寸查看）：顶栏缩放控件 + 可缩放拖动的舞台
   ============================================================ */
.cv-preview-mask { position: fixed; inset: 0; z-index: 1400; display: none; flex-direction: column; background: rgba(17, 21, 28, .88); }
.cv-preview-mask.show { display: flex; }
.cv-preview-mask.no-zoom #cvPreviewZoomBox, .cv-preview-mask.no-zoom #cvPreviewFit { display: none; }
.cv-preview-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cv-preview-tag { color: var(--primary); }
.cv-preview-name { max-width: 32%; font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-preview-meta { font-size: 15px; color: var(--muted); white-space: nowrap; }
.cv-preview-flex { flex: 1; min-width: 8px; }
.cv-preview-zoom { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.cv-preview-pct { min-width: 58px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.cv-preview-pct:hover { background: var(--surface-2); }
.cv-preview-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
.cv-preview-btn.sm { width: 28px; height: 28px; border: 0; border-radius: 7px; }
.cv-preview-btn:hover { border-color: var(--hover-border); color: var(--primary); background: var(--hover-bg); }
.cv-preview-zoom .cv-preview-btn:hover { background: var(--surface-2); }
.cv-preview-stage { flex: 1; min-height: 0; display: flex; overflow: auto; cursor: grab; overscroll-behavior: contain; }
.cv-preview-stage.grabbing { cursor: grabbing; }
.cv-preview-stage::-webkit-scrollbar { width: 10px; height: 10px; }
.cv-preview-stage::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.cv-preview-stage::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .48); background-clip: padding-box; }
.cv-preview-inner { flex: 0 0 auto; margin: auto; padding: 28px; }
.cv-preview-inner img, .cv-preview-inner video { display: block; border-radius: 4px; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.cv-preview-inner audio { display: block; width: min(600px, 78vw); }
.cv-preview-inner.is-audio { padding: 70px 28px; }
.cv-preview-foot { flex: 0 0 auto; padding: 9px 0 11px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ============================================================
   我的作品（统一作品库：视频制作 / 图片制作 / 创作画布）
   ============================================================ */
.works-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* 智能剪辑（整机平移进来的独立整页应用，iframe 承载；不套用创作中心主题）
   ★ 命名注意：.se-frame 已被带货视频「手动框选抽帧画框」占用，这里用 .se-embed-frame */
.se-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.se-embed-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #f5f5f7; border-radius: 12px; }
.wk-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 6px; }
.wk-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.wk-tabs { display: flex; align-items: center; gap: 8px; }
.wk-tab { height: 36px; padding: 0 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .16s; }
.wk-tab:hover { border-color: var(--hover-border); color: var(--primary-dark); }
.wk-tab.active { border-color: var(--primary); background: var(--primary); color:#fff; }
.wk-flex { flex: 1; min-width: 8px; }
/* ★ 2026-10-22：统计行 + 「我的分享模板」的包裹层。
   桌面端用 display:contents 把子项摊平回 .wk-head 的 flex 流 → 布局与改造前完全一致（零变化）；
   手机端改成普通 flex 容器，两块强制同行不换行（详见 mobile.css）。 */
.wk-meta { display: contents; }
.wk-stats { display: flex; align-items: center; gap: 16px; }
.wk-stat { font-size: 15px; color: var(--text-secondary); white-space: nowrap; }
.wk-stat b { margin-left: 4px; font-size: 14.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.wk-new-wrap { position: relative; }
.wk-new { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color:#fff; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .16s; }
.wk-new:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.wk-newmenu { position: absolute; top: 44px; right: 0; z-index: 60; min-width: 150px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(20, 30, 50, .14); }
.wk-newmenu[hidden] { display: none; }
.wk-newmenu button { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; text-align: left; }
.wk-newmenu button:hover { background: var(--hover-bg); color: var(--primary-dark); }
/* 作品保留期提示：文案改为「7 天 + 及时下载」口径并提亮为警示色（用户 2026-10-13 要求醒目） */
.wk-hint { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed rgba(224, 162, 60, .45); border-radius: 10px; background: var(--surface-2); color: var(--warning); font-size: 15px; font-weight: 600; }
.wk-hint .ico { color: var(--warning); }
.wk-space { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.wk-space-text { font-size: 13.5px; color: var(--fg-muted); }
.wk-space-text b { color: var(--text); font-weight: 700; }
.wk-buy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .16s; }
.wk-buy:hover { border-color: var(--hover-border); color: var(--primary-dark); background: var(--hover-bg); }
.wk-buy .ico { width: 16px; height: 16px; }
.wk-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
/* 卡片网格统一（2026-09-19）：原为瀑布流（column-width + 图片按自身比例撑高），
   横屏/竖屏/方形混排时错落严重。改为等高网格 + 统一 1:1 封面，与「我的资产」「生成结果」观感一致。 */
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.wk-loading { padding: 60px 0; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.wk-empty { padding: 74px 0; text-align: center; color: var(--text-secondary); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wk-empty[hidden] { display: none; }
.wk-empty .ico { font-size: 36px; color: #D5D9E0; }

.wk-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .16s, box-shadow .18s, transform .18s; }
.wk-card:hover { border-color: var(--hover-border); box-shadow: 0 8px 20px rgba(20, 30, 50, .09); transform: translateY(-1px); }
/* 封面统一 1:1 正方形（2026-09-19）：与 .rc-cover / .as-thumb 保持同一比例规则，
   裁切交给 object-fit: cover。竖屏视频上下、横屏左右各裁约 22%，缩略图场景可接受。 */
.wk-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--surface-2); cursor: pointer; overflow: hidden; }
.wk-cover img, .wk-cover video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.wk-cover.is-broken::after { content: '媒体已失效'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-subtle); font-size: 15px; }
.wk-badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 6px; }
.wk-src { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(15, 19, 25, .62); color:#fff; font-size: 11.5px; font-weight: 600; }
.wk-src.is-canvas { background: rgba(var(--primary-rgb), .88); }
.wk-status { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; color:#fff; font-size: 11.5px; font-weight: 600; }
.wk-status.success { background: rgba(22, 132, 91, .92); }
.wk-status.pending { background: rgba(178, 106, 0, .92); }
.wk-status.failed { background: rgba(201, 54, 62, .92); }
.wk-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.wk-play span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(15, 19, 25, .5); color:#fff; }
.wk-play .ico { font-size: 20px; }
.wk-ops { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; opacity: 0; transition: opacity .16s; }
.wk-card:hover .wk-ops { opacity: 1; }
.wk-op { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(10, 12, 18, .62); color: #fff; font-size: 14px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .16s, color .16s, border-color .16s; }
.wk-op:hover { background: rgba(10, 12, 18, .88); border-color: rgba(255, 255, 255, .3); color: #fff; }
.wk-op.danger:hover { color: var(--danger); }

.wk-info { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.wk-title { height: 38px; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-title.is-empty { color: var(--text-tertiary); font-weight: 500; }
.wk-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary); }
.wk-meta .wk-model { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 作品卡片到期角标（与「我的资产」同款式样）：永久=绿、≤3 天/已过期=红、其余=灰 */
.wk-expire { font-size: 11px; line-height: 1.3; }
.wk-expire.permanent { color: #16a34a; }
.wk-expire.soon { color: #dc2626; }
.wk-expire.normal { color: #9ca3af; }
.wk-cover .wk-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-subtle); font-size: 15px; }
/* 卡片副标题（文档 subtitle） */
.wk-sub { font-size: 12px; color: var(--muted); padding: 0 10px 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 文档 / AI 音乐 只读预览弹窗 */
.wk-preview-mask { position: fixed; inset: 0; z-index: 1200; background: rgba(6,8,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.wk-preview-mask[hidden] { display: none; }
.wk-preview-box { position: relative; width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(15,22,35,.28); }
.wk-preview-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(15,22,35,.06); color: #45506A; font-size: 22px; line-height: 1; cursor: pointer; }
.wk-preview-close:hover { background: rgba(15,22,35,.12); }
.wk-preview-body { padding: 28px 30px 32px; }
.wkp-empty { color: var(--fg-subtle); font-size: 13px; padding: 10px 0; }
.wkp-music { display: flex; flex-direction: column; gap: 14px; }
.wkp-music-cover { width: 168px; height: 168px; border-radius: 14px; overflow: hidden; background: var(--surface-2); flex: 0 0 auto; }
.wkp-music-cover img { width: 100%; height: 100%; object-fit: cover; }
.wkp-music-info h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.wkp-music-tags { font-size: 13px; color: var(--primary); margin-bottom: 4px; }
.wkp-music-status { font-size: 15px; color: var(--danger); }
.wkp-audio { width: 100%; margin-top: 4px; }
.wkp-lyrics { margin-top: 6px; }
.wkp-lyrics b { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.wkp-lyrics pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px; line-height: 1.7; color: var(--fg-muted); background: var(--surface-2); border-radius: 10px; padding: 14px 16px; margin: 0; }

/* 我的分享模板弹窗（2026-10-12 由用户中心迁入） */
.wk-tpl-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .16s; }
.wk-tpl-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.wk-tpl-btn .ico { width: 16px; height: 16px; }
.wk-tpl-mask { position: fixed; inset: 0; z-index: 1210; background: rgba(6,8,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.wk-tpl-mask[hidden] { display: none; }
.wk-tpl-box { position: relative; width: min(560px, 94vw); max-height: 80vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(15,22,35,.28); overflow: hidden; }
.wk-tpl-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(15,22,35,.06); color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; }
.wk-tpl-close:hover { background: rgba(15,22,35,.12); }
.wk-tpl-head { padding: 20px 24px 12px; border-bottom: 1px solid var(--line); }
.wk-tpl-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.wk-tpl-count { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.wk-tpl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.wk-tpl-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 10px 12px; background: var(--soft); border-radius: 10px; }
.wk-tpl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.wk-tpl-meta { color: var(--text-tertiary); flex: none; font-size: 12.5px; }
@media (max-width: 768px) {
  .wk-tpl-item { flex-wrap: wrap; gap: 6px 10px; }
  .wk-tpl-meta { width: 100%; }
}

/* ================= 无限画布列表页（精选模板 / 我的画布） ================= */
.cvhub-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; justify-content: center; }
.cvhub-wrap { width: 72%; padding: 20px 4px 48px; display: flex; flex-direction: column; gap: 16px; }
.cvhub-tabs { align-self: center; display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px rgba(15,22,35,.05); }
.cvhub-tab { border: 0; background: transparent; padding: 7px 20px; border-radius: 999px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.cvhub-tab:hover { color: var(--primary); }
.cvhub-tab.active { background: var(--primary); color:#fff; font-weight: 600; }
.cvhub-toolbar { display: flex; align-items: center; gap: 10px; }
.cvhub-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cvhub-cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cvhub-cat { height: 30px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 15px; cursor: pointer; white-space: nowrap; }
.cvhub-cat:hover { color: var(--primary); border-color: #D7D9DE; background: var(--hover-bg); }
.cvhub-cat.active { background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 600; }
.cvhub-cat .cvhub-cat-pen { width: 0; height: 13px; opacity: 0; margin-left: 0; overflow: hidden; transition: width .15s ease, opacity .15s ease, margin-left .15s ease; flex: 0 0 auto; }
.cvhub-cat:hover .cvhub-cat-pen { width: 13px; opacity: .8; margin-left: 6px; }
.cvhub-cat .cvhub-cat-pen:hover { opacity: 1; }
.cvhub-cat-add { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 1px dashed var(--text-tertiary); background: var(--surface); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cvhub-cat-add:hover { color: var(--primary); border-color: var(--primary); background: var(--hover-bg); }
.cvhub-cat-add .ico { width: 15px; height: 15px; }
.cvhub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.cvhub-card { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cvhub-card:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(15,22,35,.16); border-color: #D7D9DE; z-index: 2; }
.cvhub-cover { position: absolute; inset: 0; background: var(--soft); }
.cvhub-cover-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvhub-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--primary-light), var(--surface-2)); color: var(--text-tertiary); }
.cvhub-cover-empty .ico { width: 34px; height: 34px; }
.cvhub-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(180deg, rgba(15,22,35,0), rgba(15,22,35,.72)); color:#fff; pointer-events: none; }
.cvhub-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvhub-date { font-size: 11.5px; opacity: .82; margin-top: 2px; }
.cvhub-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(15,22,35,.6); backdrop-filter: blur(4px); opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; }
.cvhub-card:hover .cvhub-acts { opacity: 1; transform: translateY(0); }
.cvhub-acts button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color:#fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cvhub-acts button .ico { width: 14px; height: 14px; }
.cvhub-acts button:hover { background: rgba(255,255,255,.22); }
.cvhub-acts button[data-op="del"]:hover { background: var(--danger); }
.cvhub-card.new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); border: 1px dashed var(--text-tertiary); background: var(--card); }
.cvhub-card.new:hover { color: var(--primary); border-color: var(--primary); box-shadow: 0 14px 34px rgba(var(--primary-rgb),.12); }
.cvhub-new-plus { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cvhub-new-plus .ico { width: 22px; height: 22px; }
.cvhub-new-label { font-size: 13px; }
.cvhub-tpl-tip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 60px 0; color: var(--text-tertiary); font-size: 13.5px; }
.cvhub-tpl-tip .ico { width: 16px; height: 16px; }
/* 画布表单弹窗（重命名 / 新建分类） */
.cv-form-label { display: block; font-size: 15px; color: var(--muted); margin: 14px 0 6px; }
.cv-form-label:first-child { margin-top: 0; }
.cv-form-input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--text); background: var(--surface); outline: none; }
.cv-form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); }
.cv-form-acts { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.cv-form-link { font-size: 15px; cursor: pointer; }
.cv-form-link.danger { color: var(--danger); }
.cv-form-link.danger:hover { text-decoration: underline; }

/* ================= 精选模板面板（对标参考站：左侧类型筛选 + 精致卡片） ================= */
.cvhub-tplpane { display: flex; align-items: flex-start; gap: 16px; }
.cvhub-tplpane .tpl-side { flex: 0 0 148px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.cvhub-tplpane .tpl-side-item { border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cvhub-tplpane .tpl-side-item:hover { color: var(--primary); background: var(--hover-bg); }
.cvhub-tplpane .tpl-side-item.active { background: var(--primary); color:#fff; font-weight: 600; }
.cvhub-tplpane .tpl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cvhub-tplpane .cvhub-tplbar { display: flex; align-items: center; gap: 10px; }
.cvhub-tplpane .cvhub-search { display: flex; align-items: center; gap: 6px; width: 260px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.cvhub-tplpane .cvhub-search .ico { width: 15px; height: 15px; color: var(--text-tertiary); flex: 0 0 auto; }
.cvhub-tplpane .cvhub-search input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 13px; color: var(--text); background: transparent; }
.cvhub-tplpane .cvhub-search input::placeholder { color: var(--text-tertiary); }
.cvhub-tplpane .tpl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; min-width: 0; }
@media (max-width: 1240px) { .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .tpl-grid { grid-template-columns: 488px minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px)  { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cvhub-tplpane .tpl-card { position: relative; width: auto; flex: none; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cvhub-tplpane .tpl-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 34px rgba(15,22,35,.18); border-color: #D7D9DE; z-index: 2; }
.cvhub-tplpane .tpl-card.loading { opacity: .6; pointer-events: none; }
.cvhub-tplpane .tpl-cover { position: absolute; inset: 0; }
.cvhub-tplpane .tpl-cover img, .cvhub-tplpane .tpl-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvhub-tplpane .tpl-cover video { display: none; }
.cvhub-tplpane .tpl-card.has-video.playing .tpl-cover video { display: block; }
.cvhub-tplpane .tpl-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--primary-light), var(--surface-2)); color: var(--text-tertiary); }
.cvhub-tplpane .tpl-cover-empty .ico { width: 34px; height: 34px; }
/* 角标：左上「上新」，右上 价签 + 官方 + 已解锁 */
.cvhub-tplpane .tpl-flag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color:#fff; background: rgba(15,22,35,.6); backdrop-filter: blur(4px); }
.cvhub-tplpane .tpl-badges { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.cvhub-tplpane .tpl-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color:#fff; background: rgba(15,22,35,.55); backdrop-filter: blur(4px); white-space: nowrap; }
.cvhub-tplpane .tpl-badge.free { background: rgba(34,160,90,.92); }
.cvhub-tplpane .tpl-badge.vip { background: rgba(214,143,22,.92); }
.cvhub-tplpane .tpl-badge.credit { background: rgba(var(--primary-rgb),.92); }
.cvhub-tplpane .tpl-badge.offi { background: rgba(15,22,35,.55); font-weight: 500; }
.cvhub-tplpane .tpl-badge.ok { background: rgba(15,22,35,.55); }
/* 底部信息：分类标签 / 名称 / 权益行 / 作者+统计 */
.cvhub-tplpane .tpl-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 12px 10px; background: linear-gradient(180deg, rgba(15,22,35,0), rgba(15,22,35,.55) 30%, rgba(15,22,35,.85)); color:#fff; pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
.cvhub-tplpane .tpl-cat { align-self: flex-start; display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 5px; background: rgba(var(--primary-rgb),.85); font-size: 10.5px; font-weight: 500; }
.cvhub-tplpane .tpl-name { font-size: 14px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvhub-tplpane .tpl-benefit { font-size: 11.5px; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvhub-tplpane .tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 11px; opacity: .78; }
.cvhub-tplpane .tpl-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvhub-tplpane .tpl-stat { flex: 0 0 auto; }

/* ================= 模板详情弹窗（点击精选模板卡片弹出） ================= */
.cv-td-mask { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(15,22,35,.5); backdrop-filter: blur(2px); padding: 24px; }
.cv-td-mask.show { display: flex; }
.cv-td-card { width: 900px; max-width: 100%; max-height: 90vh; overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.28); display: flex; flex-direction: column; }
.cv-td-loading { padding: 80px 0; text-align: center; color: var(--muted); font-size: 14px; }
.cv-td-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; }
.cv-td-name { font-size: 18px; font-weight: 700; color: var(--text); }
.cv-td-sub { font-size: 15px; color: var(--muted); margin-top: 3px; }
.cv-td-close { border: 0; background: var(--soft); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cv-td-close:hover { background: var(--hover-bg); color: var(--text); }
.cv-td-banner { margin: 0 22px 12px; padding: 9px 14px; border-radius: 10px; font-size: 13px; background: rgba(var(--primary-rgb),.08); color: var(--primary); border: 1px solid rgba(var(--primary-rgb),.18); }
.cv-td-body { display: flex; gap: 18px; padding: 4px 22px 16px; }
.cv-td-left { flex: 1 1 56%; min-width: 0; background: #0E1116; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cv-td-left video, .cv-td-left img { width: 100%; max-height: 280px; object-fit: contain; display: block; background: #000; }
.cv-td-nomedia { color: #8A8F99; padding: 40px; font-size: 13px; }
.cv-td-right { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cv-td-author { display: flex; gap: 12px; align-items: flex-start; }
.cv-td-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #7C3AED); color:#fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex: 0 0 auto; }
.cv-td-aname { font-size: 15px; font-weight: 700; color: var(--text); }
.cv-td-bio { font-size: 15px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.cv-td-rows { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.cv-td-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.cv-td-row span { color: var(--muted); }
.cv-td-row b { color: var(--text); font-weight: 600; }
.cv-td-canvaswrap { margin: 0 22px 16px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2); }
.cv-td-canvas-title { font-size: 15px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.cv-td-canvasviewport { width: 100%; height: 280px; display: block; background: var(--surface); border-radius: 8px; overflow: hidden; position: relative; }
.cv-td-nocanvas { color: var(--muted); font-size: 13px; text-align: center; padding: 110px 0; }
.cv-td-canvassheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cv-td-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cv-td-nodes { position: absolute; left: 0; top: 0; }
.cv-td-node { position: absolute; box-sizing: border-box; border-radius: 9px; overflow: hidden; border: 2px solid; box-shadow: 0 2px 10px rgba(0,0,0,.08); pointer-events: none; user-select: none; }
.cv-td-nodebody { width: 100%; height: 100%; overflow: hidden; border-radius: 7px; border: 1px solid; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cv-td-node img, .cv-td-node video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cv-td-nodeplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.45); color:#fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
/* 迷你画布（首页模板详情 + 后台审核预览共用）：视频节点恢复可交互（原生控制条可播放/拖进度） */
.cv-td-canvasviewport .cv-td-node video { pointer-events: auto; }
.cv-td-canvasviewport .cv-td-node video::-webkit-media-controls { display: flex !important; }
.cv-td-nicon { font-size: 34px; color: inherit; opacity: .55; line-height: 1; }
.cv-td-ntitle { font-size: 13px; color: var(--text); margin-top: 8px; padding: 0 10px; text-align: center; word-break: break-all; line-height: 1.35; }
.cv-td-txt { font-size: 12px; color: var(--text); padding: 10px 12px; line-height: 1.55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-align: left; width: 100%; box-sizing: border-box; }
.cv-td-nlabel { position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; color:#fff; padding: 4px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-td-prompt { font-size: 11px; color: var(--muted); margin-top: 6px; padding: 0 10px; text-align: center; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.cv-td-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--fg-muted); font-size: 13px; }
.cv-td-foot { padding: 4px 22px 22px; display: flex; justify-content: flex-end; }
.cv-td-unlock { border: 0; background: var(--primary); color:#fff; font-size: 14px; font-weight: 600; padding: 11px 26px; border-radius: 10px; cursor: pointer; }
.cv-td-unlock:hover { filter: brightness(.96); }
.cv-td-unlock:disabled { background: var(--border-strong); cursor: not-allowed; }

/* ============================================================
   数字人（对口型）—— 左参数 + 右生成记录
   ============================================================ */
.dh-stage { width: 100%; height: 100%; display: flex; gap: 12px; padding: 12px 25px; overflow: hidden; }
.dh-wrap { position: relative; overflow: hidden; display: flex; gap: 12px; width: 100%; height: 100%; min-height: 0; }

.dh-left {
    /* 创作区标准宽度（2026-09-17 用户定标）：常规 488px，≤1360px 440px，≤1100px 400px，与 .jm-left 全系列一致 */
    width: 488px; flex: 0 0 488px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 0;
}
/* 第二步三列（2026-10-05）：文案预览 / 音频生成 / 视频生成，均复用 .dh-ph.dh-col-on 网格列样式 */
/* —— 向导式单步布局（2026-10-04）：顶部 stepper + 单步显隐 + View Transitions 飞入 —— */
.dh-wrap { display: flex; flex-direction: column; }
/* 三列弹性宽（2026-10-06，与智能剪辑 min272/max400 同思路）：下限 300 防挤压、上限 530 防超宽屏无限拉宽。
   注：minmax(300px,530px) 在「可用宽 940~1630」区间与等分 1fr 结果完全一致（自由空间平均分配到增长上限），
   只在可用宽 >1630（视口约 1930+）才真正封顶 530；低于 940 必须回落，否则 overflow:hidden 会裁掉第三列。 */
.dh-body { position: relative; display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; flex: 1; min-height: 0; overflow: hidden; }
/* 封顶后剩余空间不居中：保持左对齐（用户 2026-10-06 拍板），留白留在右侧 */
/* 窄屏兜底：可用宽不足 940（视口约 1240 以下）时回落等分，避免 300 下限把第三列顶出容器被裁。
   ★ 必须写在基础规则之后——旧的那条 @media (max-width:1100px) 单列断点写在基础规则之前，同优先级被覆盖，实测从未生效。 */
@media (max-width: 1240px) {
  .dh-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dh-body .dh-pane { grid-column: 1; grid-row: 1; min-width: 0; width: auto; overflow-y: auto; min-height: 0; }
/* 预留第二/三列占位（2026-10-04 三列布局）：虚线卡片，等后续填内容 */
.dh-ph { grid-row: 1; min-width: 0; min-height: 0; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.dh-ph-t { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .65; user-select: none; }
/* 三列悬浮「走马灯」流光边框（2026-10-04 参考站效果，纯 CSS）：双流光 + 暗调 + 中段最亮两头暗，仅 hover 显现 */
@property --dh-beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --dh-beam-b { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* ===== 标准组件：列流光边框（.dh-col-beam）=====
   数字人 .dh-ph / 带货 .pv-col / 智能剪辑 .panel-* 三模块共用同一套列流光；
   以后任何「列 / 卡片容器」要加 hover 流光，直接挂 .dh-col-beam 即可，禁止各模块再写一套。
   - 静息 opacity:0（不可见）+ animation-play-state:paused（零重绘）；hover 时淡入并续跑（不猛闪）。
   - ★★ 配色＝「白色系」（2026-10-09 用户拍板入标，原文案「淡蓝」作废）：光标悬浮在列上的框一律白色，
     与视频换脸 / 人脸打码 / 内容替换统一。墨色由令牌 --dh-beam-ink 下发（:root 浅色 / :root[data-theme="dark"] 深色）：
       深色 = 纯白 rgb(255,255,255)；浅色 = 同色系中性灰 rgb(203,207,214)
       （浅色卡片是白卡 #FFFFFF，纯白描边直接隐形 ⇒ 浅色取灰，仍是无色系、不偏蓝）。
     ★ 改色只改令牌或这一处的 rgba(var(--dh-beam-ink), …)，禁止各页面再写死颜色。
     ★ 弹窗流光（.dhv-modal / .work-modal，见 1580 行）已于 2026-10-21 用户拍板同改白色系（同令牌同配方）。 */
.dh-col-beam, .dh-left, .dh-body .dh-ph { position: relative; overflow: hidden; }
.dh-col-beam::after, .dh-col-beam::before,
.dh-left::after, .dh-left::before,
.dh-body .dh-ph::after, .dh-body .dh-ph::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 3;
}
.dh-col-beam::before, .dh-left::before, .dh-body .dh-ph::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.dh-col-beam::after, .dh-left::after, .dh-body .dh-ph::after { animation: dh-beam-a-spin 6.5s linear infinite; animation-play-state: paused; }
.dh-col-beam::before, .dh-left::before, .dh-body .dh-ph::before { animation: dh-beam-b-spin 6.5s linear infinite; animation-play-state: paused; }
.dh-col-beam:hover::after, .dh-col-beam:hover::before,
.dh-left:hover::after, .dh-left:hover::before,
.dh-body .dh-ph:hover::after, .dh-body .dh-ph:hover::before { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
    .dh-col-beam::after, .dh-col-beam::before,
    .dh-left::after, .dh-left::before,
    .dh-body .dh-ph::after, .dh-body .dh-ph::before { animation: none; }
}
@keyframes dh-beam-a-spin { from { --dh-beam-a: 315deg; } to { --dh-beam-a: 675deg; } }
@keyframes dh-beam-b-spin { from { --dh-beam-b: 135deg; } to { --dh-beam-b: 495deg; } }
/* 第二列激活态（人设IP「生成文案」列）：虚线占位变实体列，装入迁移的 AI 写内容框 */
.dh-ph-body { display: none; flex: 1; min-height: 0; width: 100%; flex-direction: column; }
.dh-ph.dh-col-on { border-style: solid; align-items: stretch; justify-content: flex-start; }
.dh-ph.dh-col-on .dh-ph-t { display: none; }
.dh-ph.dh-col-on .dh-ph-body { display: flex; }
/* 步骤显隐：第一步只看 step1 三列；第二步只看 step2 三列（文案预览 / 音频生成 / 视频生成） */
.dh-wrap[data-step="1"] .dh-step2 { display: none; }
.dh-wrap[data-step="2"] .dh-left,
.dh-wrap[data-step="2"] .dh-ph[data-ph="2"],
.dh-wrap[data-step="2"] .dh-ph[data-ph="3"] { display: none; }

/* 第二步第一列：只读文案预览（按当前渠道显示整理后的文案） */
.dh-prev-channel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); background: var(--soft); padding: 4px 10px; border-radius: var(--radius-md); margin-bottom: 12px; }
.dh-prev-empty { display: none; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.75; padding: 28px 8px; }
.dh-prev-lines { display: flex; flex-direction: column; gap: 10px; counter-reset: dhprev; }
.dh-prev-line { position: relative; padding-left: 2.6em; font-size: 14px; line-height: 1.65; color: var(--text); }
.dh-prev-line::before { counter-increment: dhprev; content: counter(dhprev, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--text-tertiary); font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; pointer-events: none; }
.dh-stepper { flex: none; display: flex; align-items: center; justify-content: center; width: 100%; }
.dh-step-btn { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 1px solid transparent; cursor: pointer; padding: 7px 18px; border-radius: 999px; color: var(--text-2); font-size: 16px; font-weight: 600; transition: color .2s, background .25s, border-color .25s, box-shadow .25s, transform .2s; font-family: inherit; }
.dh-step-btn:hover { color: var(--text); background: var(--soft); border-color: var(--line); transform: translateY(-1px); }
.dh-step-btn .dh-step { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.dh-step-btn:hover .dh-step { box-shadow: 0 0 0 3px rgba(96, 141, 255, .25); transform: scale(1.1); }
.dh-step-btn.active { color: #fff; background: var(--grad-cta, var(--accent)); border-color: transparent; box-shadow: 0 4px 20px rgba(94, 99, 245, .38); }
.dh-step-btn.active:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(94, 99, 245, .48); }
.dh-step-btn.active .dh-step { background: rgba(255, 255, 255, .24); color: #fff; animation: dh-step-pop .35s ease; }
@keyframes dh-step-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
.dh-step-sep { flex: 0 0 72px; width: 72px; height: 2px; background: var(--line); margin: 0 14px; position: relative; border-radius: 2px; overflow: hidden; }
.dh-step-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent); transition: width .35s ease; }
/* 手机端小步骤条（2026-10-22）：桌面隐藏，.dh-stepper 原样；手机端样式见 mobile.css ≤760px 块 */
.dh-subnav { display: none; }
/* 转场：方向性滑动 + 飞入；shared-element morph 由同名 view-transition-name 驱动 */
/* 去掉 dh-pane-in 入场动画：该动画会在每次刷新/重渲染时把第一列先下移 12px 再滑回，造成整列「向上浮动」的视觉抖动；步骤切换动画由下方 ::view-transition-* 负责，不依赖它 */\n.dh-body .dh-pane { view-transition-name: dh-pane; }
@keyframes dh-pane-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dh-vt-in-r { from { transform: translateX(44px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dh-vt-out-l { from { transform: none; opacity: 1; } to { transform: translateX(-44px); opacity: 0; } }
@keyframes dh-vt-in-l { from { transform: translateX(-44px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dh-vt-out-r { from { transform: none; opacity: 1; } to { transform: translateX(44px); opacity: 0; } }
.dh-wrap[data-anim="next"] ::view-transition-old(dh-pane) { animation: dh-vt-out-l .34s cubic-bezier(.22,.61,.36,1) both; }
.dh-wrap[data-anim="next"] ::view-transition-new(dh-pane) { animation: dh-vt-in-r .34s cubic-bezier(.22,.61,.36,1) both; }
.dh-wrap[data-anim="prev"] ::view-transition-old(dh-pane) { animation: dh-vt-out-r .34s cubic-bezier(.22,.61,.36,1) both; }
.dh-wrap[data-anim="prev"] ::view-transition-new(dh-pane) { animation: dh-vt-in-l .34s cubic-bezier(.22,.61,.36,1) both; }
/* 列头：数字顺序圆标 + 列名（2026-09-28 对标剪辑页步骤条） */
.dh-colhead {
    display: flex; align-items: center; gap: 8px; padding: 12px 20px;
    border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; flex: 0 0 auto;
}
/* ★ 2026-10-09 收窄作用域：原裸 .dh-step（20px 圆标）与步骤条标准 .dh-steps 系列的 .dh-step 撞类名，
   会把换脸页等新步骤条压成 20px 小圆、文字溢出胶囊。列头圆标只存在于 .dh-colhead 内，收窄即互不干扰。 */
.dh-colhead .dh-step {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: var(--primary);
    color:#fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.dh-rname { display: flex; align-items: center; gap: 8px; }
/* 第二列里的整宽动作按钮（生成试听 / 生成口播视频）：脱离 dock 后单独铺满 */
.dh-gen-full { width: 100%; flex: none; }

/* R86：列底「下一步 / 上一步」导航。footer 钉在 .dh-ph-body 底部（.dh-scroll 之后），右对齐；
   按钮走 CTA 渐变大号样式，比 .dh-btn-mini 更大气 */
.dh-ph-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--card); }
/* 六页向导翻页 footer（2026-10-22）：四列新 footer 与两枚新按钮仅手机端（>760px 隐藏）；桌面维持原两处边界钮（2v 上一步 / ph3 下一步） */
@media (min-width: 761px) {
  .dh-left .dh-ph-foot, .dh-ph[data-ph="2"] .dh-ph-foot,
  .dh-ph[data-ph="2p"] .dh-ph-foot, .dh-ph[data-ph="2a"] .dh-ph-foot { display: none; }
  .dh-ph[data-ph="2v"] .dh-step-next, .dh-ph[data-ph="3"] .dh-step-prev { display: none; }
}
.dh-step-nav {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 30px;
  font-size: 15.5px; font-weight: 600; font-family: inherit; letter-spacing: .5px;
  color: #fff; background-image: var(--grad-cta); border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(94, 99, 245, .32);
  transition: transform .18s, box-shadow .25s, background-image .25s, filter .2s;
}
.dh-step-nav:hover { background-image: var(--grad-cta-hover); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(94, 99, 245, .42); }
.dh-step-nav:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(94, 99, 245, .35); }
.dh-step-nav .ico { width: 18px; height: 18px; }

.dh-tab {
    flex: 1; text-align: center; padding: 12px 8px; text-decoration: none; color: var(--muted);
    font-size: 14px; display: flex; flex-direction: column; gap: 3px; border-bottom: 2px solid transparent;
}
.dh-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.dh-tab-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 400; }
.dh-tab.active .dh-tab-sub { color: var(--hover-border); }
/* （2026-09-16 已删）口型对齐模型切换分段按钮：口型已固定火山，页面不再提供选择 */

.dh-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 20px; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; }
.dh-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* R90s：音视频生成第二列（音频生成）区块间距加大，使音频区底部与第一列 565px 内容框底部对齐 */
.dh-block { margin-bottom: 16px; }
.dh-ph[data-ph="2a"] .dh-block { margin-bottom: 24px; }
.dh-block-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.dh-mini { font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 400; }
.dh-mini:hover { text-decoration: underline; }
.dh-count { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }

/* 形象网格 */
.dh-avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dh-avatar {
    position: relative; border: 1px solid var(--line); border-radius: var(--radius-md);
    overflow: hidden; cursor: pointer; background: var(--soft); aspect-ratio: 3 / 4;
}
.dh-avatar:hover { border-color: var(--hover-border); }
.dh-avatar.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.dh-avatar video, .dh-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-av-name {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; color:#fff;
    background: linear-gradient(transparent, rgba(0,0,0,.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-empty { padding: 18px 10px; text-align: center; color: var(--text-tertiary); font-size: 12px; line-height: 1.7; }
.dh-empty-sub { color: var(--text-tertiary); font-size: 11px; }

/* ── 形象区：单一平铺列表（原「公共/我的」双 tab 已合并，2026-09-15；官方形象由后台上传进本列表，不再单独分组） ── */
.dh-myav-row { display: block; }
.dh-myav-head {
    display: flex; align-items: center; justify-content: space-between; /* 标题「选择数字人形象」并入本行左侧，与右侧「查看全部」同行（2026-09-29） */
    margin-bottom: 8px;
}
.dh-myav-label { font-size: 13px; font-weight: 600; color: var(--text); }
.dh-myav-cards {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
}
.dh-myav-upload {
    flex: 0 0 auto; width: 110px; aspect-ratio: 3 / 4;
    border: 1.5px dashed var(--line); border-radius: var(--radius-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; cursor: pointer; background: var(--soft); color: var(--text-tertiary);
    transition: border-color .15s, background .15s;
}
/* R98d：hover 底色原写死 #f0f6ff（浅蓝白），深色主题下是一块刺眼亮蓝——改用主题变量，
   深色 = #16243F 暗蓝微光，浅色 = #EEF4FF 淡蓝，两边都柔和 */
.dh-myav-upload:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.dh-myav-plus { width: 28px; height: 28px; }
.dh-myav-upload span { font-size: 12px; white-space: nowrap; }
.dh-myav-card {
    position: relative; flex: 0 0 auto; width: 110px; border: 1.5px solid var(--line); border-radius: var(--radius-md);
    overflow: hidden; cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.dh-myav-card:hover { border-color: var(--hover-border); }
.dh-myav-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.dh-myav-thumb {
    position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--soft);
}
.dh-myav-thumb img, .dh-myav-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 官方形象角标（2026-09-29）：与后台模板库 / 智能剪辑素材弹窗的「官方」角标同一口径（蓝底白字小胶囊） */
.dh-av-offbadge {
    position: absolute; top: 4px; left: 4px; z-index: 2;
    background: #2563EB; color:#fff; font-size: 10px; line-height: 1;
    border-radius: 4px; padding: 2px 5px; pointer-events: none;
}
.dh-myav-name {
    padding: 5px 6px; font-size: 11.5px; color: var(--text); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
/* 形象视频失效（图床过期 / 文件被清理）：卡片给出可读提示，不再是一片空白 */
.dh-av-dead {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    color: var(--muted); background: var(--soft);
}
.dh-av-dead .ico { width: 22px; height: 22px; opacity: .5; }
.dh-av-dead span { font-size: 11.5px; }
.dh-myav-card.broken .dh-myav-thumb, .dh-avatar.broken { position: relative; }
.dh-myav-card.broken .dh-myav-name, .dh-avatar.broken .dh-av-name { color: var(--danger); }
/* 卡片右上角删除：常显低透明（触屏也能点到），hover 变红 */
.dh-myav-del {
    position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    color:#fff; background: rgba(0, 0, 0, .4); opacity: .62;
    transition: opacity .15s, background .15s; cursor: pointer;
}
.dh-myav-del svg { width: 11px; height: 11px; }
.dh-myav-card:hover .dh-myav-del { opacity: 1; }
.dh-myav-del:hover { background: var(--danger); }

/* 上传形象弹窗统一为 IP 档案库弹窗风格（2026-10-05 用户要求：
   大小、样式、流光等全对齐）：830×1060 定尺 + 遮罩加深虚化 +
   深色面板提亮 + 常驻双流光边框 + 字号 +2 档 + 主按钮渐变 +
   表单区 flex 撑满余高并垂直居中
   ============================================================ */
#dhAddMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; }
/* R98f：拍摄要求面板（填标题下方余高；内容提炼自火山引擎官方拍摄指引） */
.dh-shoot-tips {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 10px 0 12px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
}
.dh-shoot-tips-t { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.dh-shoot-tips ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.dh-shoot-tips li { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary, var(--text)); }
.dh-shoot-tips li b { color: var(--text); }
.dhv-modal.dh-add-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 14px;
  display: flex; flex-direction: column;
}
:root[data-theme="dark"] .dhv-modal.dh-add-modal { background: var(--soft); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
.dh-add-modal .dh-addbox { border: 0; padding: 0; margin: 0; background: transparent; }

/* 弹窗内形象卡的「标签」按钮（2026-09-29）：自己的形象可改归类标签，官方形象不显示 */
.dh-av-tagbtn {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    margin: 0 6px 5px; padding: 2px 6px; font-size: 10.5px; line-height: 1.4;
    border: 1px solid var(--line); border-radius: 4px; color: var(--fg-subtle);
    cursor: pointer; transition: color .15s, border-color .15s;
}
.dh-av-tagbtn svg { width: 11px; height: 11px; }
.dh-av-tagbtn:hover { color: var(--primary); border-color: var(--primary); }

/* 卡片右下角「查看」：默认半透明显示，hover 变实，点击打开形象视频预览 */.dh-myav-view {
    position: absolute; bottom: 5px; right: 5px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 5px; border-radius: 10px;
    font-size: 10.5px; font-weight: 500; color:#fff;
    background: rgba(0, 0, 0, .55);
    cursor: pointer; opacity: .72; transition: opacity .15s, background .15s;
    pointer-events: auto;
}
.dh-myav-view svg { width: 11px; height: 11px; }
.dh-myav-view b { font-weight: 500; }
.dh-myav-card:hover .dh-myav-view { opacity: 1; }
.dh-myav-view:hover { background: rgba(0, 0, 0, .78); }

/* 形象卡左下角「✂ 裁切」（2026-09-29 多形象接力·阶段1）：标记形象视频的有效素材区间，
   缩短上游口型处理耗时（口型按音频时长计费，所以扣点不变）。已设区间时按钮高亮并显示 2.0s-12.0s */
.dh-myav-trim {
    position: absolute; bottom: 5px; left: 5px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    max-width: calc(100% - 72px); padding: 3px 5px; border-radius: 10px;
    font-size: 10.5px; font-weight: 500; color:#fff;
    background: rgba(0, 0, 0, .55);
    cursor: pointer; opacity: .72; transition: opacity .15s, background .15s;
    pointer-events: auto;
}
.dh-myav-trim svg { width: 11px; height: 11px; flex: 0 0 auto; }
.dh-myav-trim b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-myav-card:hover .dh-myav-trim { opacity: 1; }
.dh-myav-trim:hover { background: rgba(0, 0, 0, .78); }
.dh-myav-trim.on { background: var(--primary); opacity: 1; }
.dh-myav-trim.on:hover { background: #2456D0; }

/* ══ 多形象接力·阶段3 前端（2026-09-30）══
   ① 卡片右下角的接力序号：选中才显形，位置避开左上「官方」角标、右上删除、左下「✂ 裁切」 */
.dh-av-seq {
    position: absolute; right: 4px; bottom: 5px; z-index: 3;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    display: none; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; line-height: 1; color:#fff;
    background: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.dh-av-seq.on { display: flex; }

/* ② 已选形象条（缩略图卡片，2026-09-30 由文字 chips 改为与上方形象区同款卡片）：
     复用 .dh-myav-card 全套（缩略图/官方角标/接力序号/移除×）；2026-10-05 尺寸与上方形象区对齐（110px，不再缩小）
     R98（2026-10-06）：上排「选择数字人形象」卡片区取消，本条成为视频生成列首个区块——29px 让位间距归零，
     「查看全部」按钮收进 sel-head 右侧、「添加数字人」虚线卡落在已选卡末尾（见 avatar.js dhRenderSelBar） */
.dh-sel-bar { margin-top: 0; }
.dh-sel-head-r { display: inline-flex; align-items: center; gap: 8px; }
/* R99b（2026-10-06 用户要求）：预览区向下拉伸填满列内剩余高度，视频变大 */
.dh-ph[data-ph="2v"] .dh-scroll { display: flex; flex-direction: column; }
.dh-ph[data-ph="2v"] .dh-ls-block { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* 抵消 .dh-btn.primary{flex:1.6}（L3512，特异性更高）：本列按钮不参与抢高，剩余空间全给预览区 */
.dh-ph[data-ph="2v"] .dh-ls-block .dh-gen-full { flex: 0 0 auto; }
/* R103（2026-10-06 用户要求）：预览区继续向下拉，下边界贴到列底那条分隔线（「上一步」按钮上方的横线）。
   原本预览区底部离该线 30px（滚动区 padding-bottom 14px + .dh-block 下外边距 16px），两处一并归零让视频更大。 */
.dh-ph[data-ph="2v"] .dh-scroll { padding-bottom: 0; }
.dh-ph[data-ph="2v"] .dh-ls-block { margin-bottom: 0; }
.dh-preview {
  margin-top: 14px; padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--soft);
  flex: 1; display: flex; flex-direction: column; min-height: 300px;
}
.dh-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.dh-preview-sub { font-size: 12px; font-weight: 400; color: var(--text-tertiary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ★ 2026-10-10 预览头部右上角「下载」小图标（与音乐/音色预览卡的 .mp-dl / .vp-dl 同款规格） */
.dh-preview-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dh-preview-dl { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.dh-preview-dl:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.dh-preview-dl .ico { width: 16px; height: 16px; }
/* ★ 2026-10-22 用户要求：视频生成预览下方加「智能剪辑」按钮（送入智能剪辑）。
   两处共用：①预览头部右上角（与下载图标钮同排）②视频生成列底部 footer（红框位置）。
   外观沿用 .dh-preview-dl 图标钮的规格，但带文字。 */
.dh-se-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.dh-se-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.dh-se-btn .ico { width: 15px; height: 15px; }
/* footer 里的变体：与「上一步/下一步」导航钮同排，margin-right:auto 把它顶到左侧 */
.dh-se-btn-foot { margin-right: auto; }
.dh-preview-body { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
#dhPreviewVideo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: #000; }
.dh-preview-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 12px;
  border: 1px dashed var(--line); border-radius: 8px;
  font-size: 13px; color: var(--text-tertiary); text-align: center; line-height: 1.6;
}
/* 视频生成列（2026-10-05）：生成通道区块上方插入 20px（用 padding 避免与上一区块 margin-bottom 折叠） */
/* R99（2026-10-06 用户要求）：生成通道上下空白各减 20px——上方 padding-top 归零；下方是 dhLsRow 内联 margin-bottom 34→14（见 avatar.js） */
.dh-ls-block { padding-top: 0; }
.dh-sel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dh-sel-label { font-size: 12px; color: var(--text-secondary); }
.dh-sel-link { font-size: 12px; color: var(--primary); cursor: pointer; user-select: none; }
.dh-sel-link:hover { text-decoration: underline; }
/* R105（2026-10-06 用户要求）：已选形象一行横排、最先选的在最左，装不下走横向滚动不换行，滚动条用细的 */
.dh-sel-cards {
  display: flex; flex-wrap: nowrap; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;                 /* 给细滚动条留位置，避免压到卡片 */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: var(--border-strong) transparent;
  overscroll-behavior-x: contain;
}
.dh-sel-cards::-webkit-scrollbar { height: 5px; }
.dh-sel-cards::-webkit-scrollbar-track { background: transparent; }
.dh-sel-cards::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.dh-sel-cards::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.dh-myav-card.dh-sel-card { width: 110px; flex: 0 0 auto; cursor: default; }
/* 移除×：常显（这里是「移出已选」不是「删除形象」，不能只 hover 才出现） */
.dh-sel-card .dh-myav-del { opacity: .62; }
.dh-sel-card .dh-myav-del:hover { opacity: 1; }
.dh-sel-empty { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; }

/* ③ 文案绑定配置弹窗（2026-09-30）：左栏字幕脚本（按住划选多行）+ 右栏数字人，
     点右边某个数字人 → 把左边选中的那批行绑给它（参考站点的「1 对 1、2 对 2」玩法） */
.dh-trim-modal.dh-seg-modal { width: min(1066px, 96vw); padding: 20px 24px 16px; }
.dh-seg-err { color: var(--danger); }
.dh-bind-wrap { display: flex; gap: 14px; margin: 10px 0 4px; align-items: stretch; }
.dh-bind-col {
    flex: 0 0 480px; min-width: 0; display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow: hidden;
}
/* 左栏加宽到 480px（红线位置）；右栏基准宽 520px，横排 4 张数字人卡片；右栏在弹窗内向右对齐（2026-09-30） */
.dh-bind-col.right { flex: 0 0 520px; margin-left: auto; }
.dh-bind-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.dh-bind-t { font-size: 13px; font-weight: 600; color: var(--text); }
.dh-bind-tools { display: inline-flex; gap: 12px; }
.dh-bind-tools a { font-size: 12px; color: var(--primary); cursor: pointer; }
.dh-bind-tools a:hover { opacity: .82; }
.dh-bind-rows {
    flex: 1 1 auto; max-height: 56vh; overflow-y: auto; padding: 8px;
    display: flex; flex-direction: column; gap: 6px;
}
.dh-bind-row {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px;
    border: 1px solid var(--line); border-left: 3px solid var(--sec, #2FA36B);
    border-radius: 8px; background: var(--sebg, var(--surface)); cursor: pointer; user-select: none;
    transition: border-color .12s, background .12s;
}
.dh-bind-row:hover { border-color: var(--hover-border); }
/* 颜色关联（2026-09-30）：已绑行用段色（--sec）描边 + 段色 8% 浅底（--sebg）；未绑行白底灰条 */
.dh-bind-row.sel { border-color: var(--sec, var(--primary)); background: var(--sebg, var(--primary-light)); }
.dh-bind-row.unbound { border-left-color: #D6D3CD; }
.dh-bind-no {
    flex: 0 0 auto; width: 19px; height: 19px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color:#fff; background: var(--sec, #2FA36B);
}
.dh-bind-no.q { background: #C9C6BE; }
.dh-bind-txt {
    flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-bind-dur { flex: 0 0 auto; font-size: 11px; color: var(--text-tertiary); }
.dh-bind-dur.warn { color: var(--danger); }
/* 右栏数字人：2026-09-30 由横条卡改缩略图卡片网格（3 列，与形象区同款 dh-myav-card 体系） */
.dh-bind-avs {
    flex: 1 1 auto; max-height: 56vh; overflow-y: auto; padding: 8px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    align-content: start;
}
.dh-myav-card.dh-seg-card { width: auto; }
/* 颜色关联（2026-09-30）：右卡 #角标 / 描边 / 选中态都跟随该形象段色（--sec / --sebg） */
.dh-bind-avno.in-card {
    left: auto; top: 4px; right: 4px;   /* 卡内右上：避开左上「官方」角标与左下剪刀 */
    background: var(--sec, #2FA36B);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.dh-myav-card.dh-seg-card.active { border-color: var(--sec, var(--primary)); box-shadow: 0 0 0 2px var(--sebg, var(--primary-light)); }
.dh-seg-card .dh-myav-trim b, .dh-sel-card .dh-myav-trim b { display: none; }  /* 窄卡只留剪刀图标（区间值在 title/弹窗里看） */
.dh-sel-card .dh-myav-trim { max-width: none; }
.dh-seg-card-stat {
    padding: 0 6px 5px; font-size: 10.5px; color: var(--text-tertiary);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-seg-card.active .dh-seg-card-stat { color: var(--sec, var(--primary)); }
.dh-bind-avno {
    position: absolute; left: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #2FA36B; color:#fff; font-size: 10.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}

/* 裁切弹窗（形象视频区间）：窄弹窗垂直居中，统一 IP 弹窗风格（2026-10-05 R90j） */
.dh-trim-mask {
    position: fixed; inset: 0; z-index: 3000; display: none;
    align-items: center; justify-content: center;
    background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    padding: 16px;
}
.dh-trim-modal {
    position: relative; width: min(620px, 96vw); max-height: 92vh; overflow: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px 22px 14px;
    box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] .dh-trim-modal { background: var(--soft); }
/* 双流光：2026-10-22 起并入标准组（#dhAvTrimMask .dh-trim-modal，见「标准组件：弹窗双流光」）；
   此前注释称「已统一到 .dhv-modal 基类」与实情不符——本弹窗外壳从未挂 .dhv-modal，流光一直缺失（本次补上）。 */
/* 标题居中、关闭按钮固定在右上角（文案绑定弹窗与裁切弹窗共用此头部） */
.dh-trim-head { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.dh-trim-head b { font-size: 18px; color: var(--text); text-align: center; }
.dh-trim-x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-secondary); font-size: 17px; line-height: 1; padding: 2px 4px; }
.dh-trim-x:hover { color: var(--text); }
.dh-trim-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 10px; }
.dh-trim-sub b { color: var(--primary); }
.dh-trim-modal video { display: block; width: 100%; max-height: 40vh; background: #000; border-radius: 10px; }
.dh-trim-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dh-trim-row label { font-size: 15px; color: var(--text-secondary); flex: 0 0 auto; }
.dh-trim-row input {
    width: 96px; padding: 5px 8px; font-size: 15px;
    border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface-2);
}
.dh-trim-info { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.dh-trim-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#dhAvTrimMask .dh-btn-mini { font-size: 14px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
#dhAvTrimMask .dh-btn-mini.primary {
    background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhAvTrimMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }

/* 「选择我的数字人」弹窗：大版面一行 8 卡、整体位置偏上 */
.dh-myav-mask { align-items: flex-start; padding-top: 4vh; }
.dh-myav-modal { width: min(1440px, 96vw); max-height: 90vh; }
/* 胶囊标签筛选：全部 / 官方 / 我上传的 / 自定义标签（管理员悬停出现 ✎ 改名） */
.dh-avtags {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px; padding: 2px 0;
}
.dh-avtag {
    position: relative; padding: 4px 14px; border-radius: 999px; font-size: 15px;
    color: var(--text-secondary); background: var(--soft); border: 1px solid var(--line);
    cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.dh-avtag:hover { border-color: var(--primary); color: var(--primary); }
.dh-avtag.active { background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 600; }
.dh-avtag-edit {
    display: none; margin-left: 5px; font-style: normal; font-size: 11px; opacity: .85; cursor: pointer;
}
.dh-avtag:hover .dh-avtag-edit { display: inline-block; }
.dh-avtag-edit:hover { opacity: 1; transform: scale(1.15); }
.dh-myav-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
    flex: 1; min-height: 0; overflow-y: auto; margin-top: 12px; padding: 4px 0;
    /* 与音色弹窗同理：显式上限兜底，不依赖内核的 flex 收缩 */
    max-height: calc(90vh - 190px);
}
.dh-myav-grid .dh-myav-card { width: 100%; cursor: pointer; }
.dh-myav-foot {
    display: flex; justify-content: center; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px;
}
.dh-myav-foot .dh-btn-mini { min-width: 80px; }
/* 左对齐变体：视频仿写「开始识别」按钮行（2026-09-28），其余 dh-myav-foot 保持居中 */
.dh-myav-foot.dh-foot-left { justify-content: flex-start; }

/* 视频文案提取弹窗（口播文案区「视频提取文案」入口） */
.dh-ex-modal { width: min(560px, 92vw); }
.dh-ex-tip { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; margin: 8px 0 10px; }
.dh-ex-row { display: flex; gap: 8px; }
.dh-ex-input {
    flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 13px; color: var(--text); background: var(--bg-soft); outline: none;
}
.dh-ex-input:focus { border-color: var(--primary); }
.dh-ex-status { min-height: 18px; font-size: 15px; margin: 10px 0 6px; color: var(--text-secondary); }
.dh-ex-status.ok { color: #2e9e5b; }
.dh-ex-status.err { color: #d64541; }
.dh-ex-result {
    width: 100%; box-sizing: border-box; height: 180px; resize: vertical;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 13px; line-height: 1.7; color: var(--text); background: var(--bg-soft); outline: none;
}
.dh-ex-result:focus { border-color: var(--primary); }
.dh-ex-fill { color:#fff; background: var(--primary); border-color: var(--primary); }
/* 三档输入（分享链接 / 上传文件 / 公网直链）：模式胶囊 + 多行输入框 */
.dh-ex-modal .dewm-tabs { margin-bottom: 10px; }

/* ───────────── 去水印 / 共用组件（2026-09-24 重建：原段被误删，按项目记忆 §05/§三十 权威描述恢复） ───────────── */
/* 分段胶囊 Tab（共用组件）：去水印作品区 + 口播文案弹窗；选中态铁律（§五十）= 蓝底白字 */
.dewm-tabs { display: flex; width: 100%; padding: 4px; border-radius: 10px; background: var(--surface-2); margin: 0 0 14px; }
.dewm-tab {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 8px; border: none; outline: none; font-family: inherit;
  font-size: 13.5px; font-weight: 500; color: var(--text); background: transparent; cursor: pointer; transition: all .15s;
}
.dewm-tab:hover { color: var(--primary); background: var(--surface); }
.dewm-tab.active { color:#fff; background: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(var(--primary-rgb),.28); }
.dewm-tab.active:hover { color:#fff; background: var(--primary); }

/* 提示 / 选中回显 / 错误条 */
.dewm-tip { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: #A0A5AD; font-size: 12px; line-height: 1.7; text-align: center; white-space: pre-line; }
.dewm-picked { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); word-break: break-all; }
.dewm-picked.ok { color: var(--primary); background: rgba(var(--primary-rgb),.08); border-color: rgba(var(--primary-rgb),.25); }
.dewm-picked.warn { color: #B26B00; background: #FDF3E7; border-color: #F5DAB8; }
.dewm-err { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: #D54941; background: #FDECEC; border: 1px solid #F5C9C6; }
/* ===== 去水印：支持平台 30+ 文字按钮 + 平台清单弹窗（2026-10-10 新增）=====
   按钮落在「解析链接」卡注释文字（.dewm-tip）下方，点击开标准 .mask/.dialog 弹窗；
   弹窗内为 4 列平台网格，每格列出该平台支持的「视频 / 图集 / 实况」（高亮＝支持）。 */
.dewm-plat-link { display: flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; margin: 10px auto 0; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer; color: var(--primary); font-size: 15px; font-weight: 600; line-height: 1.6; transition: background .18s, border-color .18s; }
.dewm-plat-link:hover { background: rgba(var(--primary-rgb),.07); border-color: rgba(var(--primary-rgb),.22); }
.dewm-plat-link .ico { width: 14px; height: 14px; }
.dewm-plat-link .ico.chev { width: 12px; height: 12px; transform: rotate(-90deg); opacity: .7; }
.dialog.dewm-plat-dialog { width: 760px; max-width: 94vw; padding: 22px 22px 18px; }
.dialog.dewm-plat-dialog .dpl-head { display: flex; align-items: center; gap: 12px; }
.dpl-ico { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--grad-cta); }
.dpl-ico .ico { width: 21px; height: 21px; }
.dialog.dewm-plat-dialog .dpl-htxt h3 { margin-bottom: 2px; text-align: left; font-size: 15px; }
.dialog.dewm-plat-dialog .dpl-htxt p { text-align: left; font-size: 12px; }
.dpl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 14px 0 10px; color: var(--muted); font-size: 11.5px; }
.dpl-legend > span { margin-left: 3px; }
.dpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 54vh; overflow-y: auto; padding-right: 2px; }
.dpl-item { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.dpl-name { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }
.dpl-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.dpl-cap { padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--fg-subtle); font-size: 10.5px; font-style: normal; line-height: 1.55; }
.dpl-cap.on { border-color: rgba(var(--primary-rgb),.24); background: rgba(var(--primary-rgb),.10); color: var(--primary); font-weight: 600; }
.dialog.dewm-plat-dialog .d-actions { justify-content: center; }
.dialog.dewm-plat-dialog .d-btn { flex: 0 0 150px; }
@media (max-width: 720px) { .dpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 按钮内 spinner（白圈，配蓝底按钮；去水印/去字幕共用） */
.dewm-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius: 50%; vertical-align: -2px; animation: dewmSpin .7s linear infinite; }
@keyframes dewmSpin { to { transform: rotate(360deg); } }

/* 示例 / 教学说明块 */
.dewm-note { padding: 16px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.9; }
.dewm-note b { color: #1D2129; }

/* 教学示例卡片 */
/* 2026-10-10 用户要求：「获取豆包链接方法」上方插入 25px —— 原间距 4px，现 4+25=29px（净增 25px）。
   本类全站仅去水印页（dewm.js 的 renderDewmGuide）使用，改这里不影响其他页。 */
.dewm-guide { margin-top: 29px; }
.dewm-guide-head { margin-bottom: 12px; }
.dewm-guide-head b { display: block; font-size: 14px; color: #1D2129; }
.dewm-guide-head span { display: block; margin-top: 2px; font-size: 15px; color: #86909C; }
.dewm-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dewm-guide-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.dgc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.dgc-head b { font-size: 13px; color: var(--fg); }  /* 2026-10-10：原 #1D2129 深色主题下近乎隐形，改跟随主题 */
.dgc-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(var(--primary-rgb),.08); color: var(--primary); font-size: 11px; font-weight: 600; }
.dgc-tag .ico { width: 12px; height: 12px; }
.dgc-shot { position: relative; cursor: zoom-in; background: var(--page); }
.dgc-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dgc-zoom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 8px 6px; font-size: 11px; color:#fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .15s; }
.dgc-zoom .ico { width: 13px; height: 13px; }
.dgc-shot:hover .dgc-zoom, .dgc-shot:focus-visible .dgc-zoom { opacity: 1; }
.dgc-foot { padding: 10px 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* 图集 / 视频查看弹窗（.dialog 修饰层；去水印图片 + 去字幕视频共用） */
.dewm-viewer { width: min(920px, 92vw); }
.dv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #EEF0F3; }
.dv-title { font-size: 15px; font-weight: 700; color: #1D2129; }
.dv-count { font-size: 15px; color: #86909C; }
.dv-stage { display: flex; align-items: center; justify-content: center; background: #141414; min-height: 200px; max-height: 62vh; overflow: hidden; }
.dv-img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }
.dv-video { display: block; width: 100%; max-height: 62vh; background: #000; }
.dv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid #EEF0F3; }
.dv-nav { display: flex; gap: 8px; }
.dv-acts { display: flex; gap: 8px; }
.dv-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; transition: all .15s; font-family: inherit; }
.dv-btn:hover { color: var(--primary); border-color: rgba(var(--primary-rgb),.4); }
.dv-btn:disabled { opacity: .45; cursor: not-allowed; }
.dv-btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 600; }
.dv-btn.primary:hover { background: #2A62D8; border-color: #2A62D8; color:#fff; }
.dh-ex-ta {
    width: 100%; box-sizing: border-box; min-height: 78px; resize: vertical;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg-soft); outline: none;
    font-family: inherit;
}
.dh-ex-ta::placeholder { color: var(--text-tertiary); }
.dh-ex-ta:focus { border-color: var(--primary); }
/* 视频仿写·分享链接框（2026-10-05）：占位改短句一行放下；隐藏滚动条与右下拉伸角（内容超高时滚轮仍可滚）；显式圆弧角（原 var(--radius) 未定义失效成直角） */
#dhVidUrl { resize: none; scrollbar-width: none; -ms-overflow-style: none; border-radius: 8px; }
#dhVidUrl::-webkit-scrollbar { display: none; }

/* 形象视频预览浮层 */
.dh-myav-preview {
    display: none; position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 24px;
}

/* 上传形象 / 复刻声音 */
.dh-addbox, .dh-clonebox {
    border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px;
    margin-bottom: 10px; background: var(--soft);
}
.dh-input {
    width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-size: 13px; outline: none; margin-bottom: 8px;
}
.dh-input:focus { border-color: var(--primary); }
.dh-addrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dh-addrow:last-child { margin-bottom: 0; }
.dh-right-btns { justify-content: flex-end; }
.dh-btn-mini {
    height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer;
}
.dh-btn-mini:hover { border-color: var(--hover-border); color: var(--hover-text); }
.dh-btn-mini.primary { background: var(--primary); border-color: var(--primary); color:#fff; }
.dh-btn-mini.primary:hover { background: var(--primary-dark); }
.dh-hint { font-size: 11px; color: var(--text-tertiary); }
.dh-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; cursor: pointer; }
.dh-check input { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }

/* 上传形象弹窗的「同时克隆声音」开关（2026-09-29）：默认关闭，勾选后展开说明与授权确认 */
.dh-clone-switch { margin: 2px 0 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.dh-clone-switch .dh-check { margin-bottom: 0; }
.dh-clone-switch .dh-hint { display: block; margin-top: 6px; line-height: 1.6; }
.dh-consent { margin-top: 6px; color: var(--text-secondary); }

/* 音色选择 */
.dh-voice-bar {
    display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font-size: 13px;
}
.dh-voice-bar:hover { border-color: var(--hover-border); }
.dh-arrow { color: var(--text-tertiary); font-size: 12px; }
/* 音色选择弹窗（形态对齐参考站：分类胶囊 + 5 列网格卡 + 卡内试听） */
.dhv-mask {
    position: fixed; inset: 0; z-index: 240; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(27,31,39,.55);
}
.dhv-mask.show { display: flex; }
/* R98e：我的资产选择弹窗（dhpMask）从「上传形象」弹窗内部打开，两者同为 .dhv-mask（z-index 240），
   同层时按 DOM 顺序后者在上 → 资产弹窗被上传弹窗整个盖住；提到 260 保证子弹窗在父弹窗之上 */
#dhpMask { z-index: 260; }
.dhv-modal {
    position: relative; width: min(1140px, 96vw); max-height: 88vh;
    background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.28);
    display: flex; flex-direction: column; padding: 18px 22px 14px;
}
/* ===== 标准组件：弹窗双流光边框（IP 档案库弹窗基准）=====
   所有 .dhv-modal 自动获得，无需各类型重复声明。模态无法 hover，故常驻显现、opacity .85 不抢内容。
   色值/动画与列流光 .dh-col-beam 同源（--dh-beam-a/b + dh-beam-*-spin，见 2528 行）。
   新增弹窗只要挂 .dhv-modal 即自带流光；禁止再写 ::after/::before 重复定义。
   ★ 2026-10-10 扩展：老 .dialog 家族（无 .dhv-modal 外壳的纯文本弹窗，如「支持平台 30+」
     与 .dewm-viewer 长图/视频查看器）**挂 .dh-dlg-beam 即获得同一套双流光**。
     说明：.dialog 基类本身无 position，故 .dh-dlg-beam 需自带 position:relative 作为绝对定位参照。
   ★ 2026-10-22 扩展：数字人「裁切形象视频」弹窗（#dhAvTrimMask .dh-trim-modal）——
     自建外壳未挂 .dhv-modal（基类带 1140px 宽/内边距等布局会打架），故按 id 圈定并入本组；
     该外壳已有 position:relative + 16px 圆角，inherit 即可。只用 id 圈定、不带 .dh-trim-modal
     裸类，避免波及共用该类的文案绑定弹窗 .dh-seg-modal。 */
.dh-dlg-beam { position: relative; }
.dhv-modal::after,
.dhv-modal::before,
.dh-dlg-beam::after,
.dh-dlg-beam::before,
#dhAvTrimMask .dh-trim-modal::after,
#dhAvTrimMask .dh-trim-modal::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .85; pointer-events: none; z-index: 2;
}
.dhv-modal::before,
.dh-dlg-beam::before,
#dhAvTrimMask .dh-trim-modal::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.dhv-modal::after, .dh-dlg-beam::after, #dhAvTrimMask .dh-trim-modal::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.dhv-modal::before, .dh-dlg-beam::before, #dhAvTrimMask .dh-trim-modal::before { animation: dh-beam-b-spin 6.5s linear infinite; }
/* ★ 创作画布确认弹窗（.cv-confirm）白色系双流光描边（2026-10-10 用户拍板）
   与列流光 .dh-col-beam 同族：复用 --dh-beam-a/b 动画 + --dh-beam-ink 令牌（深=纯白 / 浅=中性灰），
   作用域仅限画布确认弹窗，不动现有淡蓝 .dh-dlg-beam / .work-modal / .dhv-modal。
   模态无法 hover，故常驻显现、opacity .9 不抢内容；mask-composite:exclude 只透 1.5px 边框、不扫内容。
   .cv-td-beam＝精选模板详情弹窗外壳：卡片本体 overflow:auto 可滚动，流光挂外壳才不随内容滚走；
   外壳圆角对齐卡片 16px。 */
.cv-confirm, .cv-td-beam { position: relative; }
.cv-td-beam { display: flex; flex-direction: column; max-width: 100%; max-height: 90vh; border-radius: 16px; }
.cv-confirm::after, .cv-td-beam::after,
.cv-confirm::before, .cv-td-beam::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .9; pointer-events: none; z-index: 2;
}
.cv-confirm::before, .cv-td-beam::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.cv-confirm::after, .cv-td-beam::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.cv-confirm::before, .cv-td-beam::before { animation: dh-beam-b-spin 6.5s linear infinite; }
/* ★ 创作画布节点制作框（.cv-make-panel 图片/视频 + .cv-text-panel 文本）常驻双流光描边（2026-10-10 用户拍板）
   与 .cv-confirm 同族同参数：复用 --dh-beam-a/b 动画 + --dh-beam-ink 令牌，mask-composite:exclude 只透 1.5px 边框。
   面板本体已 position:absolute（挂 .cv-workarea、不在 world 变换内），伪元素直接 inset:0 贴边即可；
   hidden 时 display:none，伪元素自然不渲染，无需额外开关。 */
.cv-make-panel::after, .cv-text-panel::after,
.cv-make-panel::before, .cv-text-panel::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .9; pointer-events: none;
}
.cv-make-panel::before, .cv-text-panel::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.cv-make-panel::after, .cv-text-panel::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.cv-make-panel::before, .cv-text-panel::before { animation: dh-beam-b-spin 6.5s linear infinite; }
/* ★ 创作画布 所有节点 悬浮/选中双流光描边（与制作框同族同参数：--dh-beam-a/b + --dh-beam-ink，mask-composite:exclude 只透 1.5px 边）
   与制作框“常驻”不同：默认 opacity:0 隐藏，仅 .cv-node:hover / .cv-node.selected 时才亮起。 */
.cv-node::after, .cv-node::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.cv-node::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.cv-node::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.cv-node::before { animation: dh-beam-b-spin 6.5s linear infinite; }
.cv-node:hover::after, .cv-node:hover::before,
.cv-node.selected::after, .cv-node.selected::before { opacity: .95; }
/* ★ 创作画布 历史/帮助/任务日志 弹窗常驻双流光描边（2026-10-10 用户拍板，2026-10-11 扩到任务日志）
   与 .cv-confirm 同族同参数（--dh-beam-a/b + --dh-beam-ink，mask-composite:exclude 只透 1.5px 边）；
   只挂 #cvHistMask / #cvHelpMask / #cvLogMask 三壳内的 .cv-modal，其他 cv-modal（改名/分类）不受影响。 */
#cvHistMask .cv-modal, #cvHelpMask .cv-modal, #cvLogMask .cv-modal { position: relative; }
#cvHistMask .cv-modal::after, #cvHelpMask .cv-modal::after, #cvLogMask .cv-modal::after,
#cvHistMask .cv-modal::before, #cvHelpMask .cv-modal::before, #cvLogMask .cv-modal::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .9; pointer-events: none; z-index: 2;
}
#cvHistMask .cv-modal::before, #cvHelpMask .cv-modal::before, #cvLogMask .cv-modal::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
#cvHistMask .cv-modal::after, #cvHelpMask .cv-modal::after, #cvLogMask .cv-modal::after { animation: dh-beam-a-spin 6.5s linear infinite; }
#cvHistMask .cv-modal::before, #cvHelpMask .cv-modal::before, #cvLogMask .cv-modal::before { animation: dh-beam-b-spin 6.5s linear infinite; }
.dhv-close {
    position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: var(--text-secondary);
    font-size: 20px; line-height: 1; cursor: pointer; user-select: none;
}
.dhv-close:hover { background: var(--soft); color: var(--text); }
.dhv-title { flex: 0 0 auto; text-align: center; font-size: 16px; font-weight: 650; color: var(--text); }

.dhv-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.dhv-tabs { flex: 1; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dhv-tab {
    padding: 5px 14px; border-radius: 14px; font-size: 13px; color: var(--muted);
    cursor: pointer; user-select: none; white-space: nowrap;
}
.dhv-tab:hover { background: var(--soft); color: var(--text); }
.dhv-tab.active { background: var(--primary); color:#fff; font-weight: 600; }
.dhv-search {
    flex: 0 0 220px; height: 32px; padding: 0 12px; border: 1px solid var(--line);
    border-radius: 16px; background: var(--soft); color: var(--text); font-size: 15px; outline: none;
}
.dhv-search:focus { border-color: var(--primary); background: var(--surface); }

.dhv-tags {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
    max-height: 68px; overflow-y: auto; padding-right: 4px;
}
.dhv-tag {
    padding: 3px 10px; border-radius: 12px; font-size: 12px; color: var(--muted);
    background: var(--surface-2); cursor: pointer; user-select: none; white-space: nowrap;
}
.dhv-tag:hover { background: #E8F0FE; }
.dhv-tag.active { background: var(--primary); color:#fff; }

.dhv-grid {
    flex: 1; min-height: 0; overflow-y: auto; margin-top: 14px; padding-right: 4px;
    /* 显式上限：部分内核 flex 收缩不生效时，网格也绝不会把弹窗顶穿（弹窗总高恒 ≤ 88vh） */
    max-height: calc(88vh - 280px);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(52px, auto); gap: 10px; align-content: start;
}
.dhv-card {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
    cursor: pointer; overflow: hidden;
}
.dhv-card:hover { border-color: var(--hover-border); background: var(--hover-bg); }
.dhv-card.active { border-color: var(--primary); background: var(--primary-light); }
.dhv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.dhv-name {
    font-size: 15px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dhv-card.active .dhv-name { color: var(--primary); font-weight: 600; }
.dhv-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dhv-card-tags i {
    font-style: normal; font-size: 10px; color: var(--fg-subtle); background: var(--surface-2);
    border-radius: 8px; padding: 1px 5px; line-height: 1.3;
}
.dhv-card.active .dhv-card-tags i { background: rgba(26,92,229,.12); color: var(--primary); }
.dhv-play {
    flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%;
    display: grid; place-items: center; color: var(--text-tertiary); background: var(--surface);
}
.dhv-play:hover { border-color: var(--primary); color: var(--primary); }
.dhv-play svg { width: 8px; height: 8px; margin-left: 1px; }
.dhv-play.playing { border-color: var(--primary); color: var(--primary); }
.dhv-play.loading { border-color: var(--primary); }
.dhv-play .dhv-spin {
    width: 9px; height: 9px; border-radius: 50%; display: block;
    border: 1.5px solid var(--primary-light); border-top-color: var(--primary);
    animation: dhvSpin .7s linear infinite;
}
@keyframes dhvSpin { to { transform: rotate(360deg); } }
.dhv-empty { grid-column: 1 / -1; padding: 44px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.9; }

.dhv-foot { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.dhv-custom {
    height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.dhv-custom:hover { border-color: var(--hover-border); color: var(--hover-text); }
.dhv-custom svg { width: 14px; height: 14px; }

/* 文案 */
.dh-textarea {
    width: 100%; min-height: 132px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); color: var(--text); font-size: 15px; line-height: 2; resize: vertical; outline: none;
}
.dh-textarea::placeholder { color: var(--text-tertiary); }
/* R102（2026-10-06 用户要求）：数字人文案内容框行距 1.7 → 2 倍
   （第二/三列字号被定为 15px ⇒ 行高 30px；整理文案 .dh-pl 继承该值） */
.dh-ph[data-ph="2"] .dh-textarea, .dh-ph[data-ph="3"] .dh-textarea,
.dh-ph[data-ph="2p"] .dh-textarea, .dh-left .dh-textarea { line-height: 2; }
.dh-textarea:focus { border-color: var(--primary); }
.dh-textbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* AI优化「期望字数」输入框：窄数字框，贴在 AI优化 按钮左侧 */
.dh-opt-words {
  width: 88px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; color: var(--text); background: var(--bg-soft); outline: none; text-align: center;
}
.dh-opt-words:focus { border-color: var(--primary); }
.dh-opt-words::placeholder { color: var(--text-tertiary); }
.dh-tb {
    height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer;
}
.dh-tb:hover { border-color: var(--hover-border); color: var(--hover-text); }
/* ★ 2026-09-24 统一约定：凡是消耗积分的按钮一律蓝底（primary）——用户点之前必须一眼看出「这是要花钱的动作」 */
.dh-tb.primary { background: var(--primary); border-color: var(--primary); color:#fff; }
.dh-tb.primary:hover { background: var(--primary-dark); color:#fff; }
.dh-tb.right { margin-left: auto; }
/* —— R113 文案编辑工具条按渠道变形 + 标签彩色高亮 —— */
.dh-tag { color: var(--tag); font-weight: 600; }
.dh-pause-wrap { position: relative; display: inline-block; }
.dh-menu { position: absolute; top: 30px; left: 0; z-index: 30; min-width: 116px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.dh-menu .dh-mi { display: block; padding: 6px 10px; font-size: 12px; color: var(--text); border-radius: 6px; cursor: pointer; }
.dh-menu .dh-mi:hover { background: var(--primary-light); color: var(--primary); }
.dh-tb.dh-cap { border-radius: 14px; }
.dh-tb.dh-homo { color: var(--primary); border-color: var(--primary); }
.dh-tb.dh-homo:hover { background: var(--primary-light); }
.dh-tb.dh-dis { opacity: .5; cursor: not-allowed; text-decoration: line-through; color: var(--muted); }
.dh-tb.dh-dis:hover { border-color: var(--line); color: var(--muted); }
.dh-s2-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-tertiary); }
/* AI 优化口播文案：与图/视频页「优化描述」同款蓝色文字按钮 */
/* 字数计数：在各通道 textbar 内、清空按钮前（2026-09-28 从块头移入），auto 顶到右侧 */
.dh-textbar .dh-char-cnt { margin-left: auto; }
/* 断句按钮：在通道按钮行右端（2026-09-28） */
.dh-myav-foot .dh-resplit { margin-left: auto; }

/* 翻译下拉（2026-09-29）：三通道按钮行「翻译 ▾」+ 方言/外语/恢复原文菜单 */
.dh-tr-wrap { position: relative; display: inline-block; }
.dh-tr-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    width: 208px; max-height: 320px; overflow-y: auto; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31, 35, 41, .12);
}
.dh-tr-menu.show { display: block; }
.dh-tr-group { font-size: 11px; color: var(--fg-subtle); padding: 5px 8px 3px; }
.dh-tr-item {
    display: block; width: 100%; text-align: left; padding: 6px 10px; margin: 1px 0;
    border: 0; background: none; border-radius: 6px; cursor: pointer;
    font-size: 13px; color: var(--text); font-family: inherit;
}
.dh-tr-item:hover { background: var(--surface-2); }
.dh-tr-item:disabled { color: #C3C9D4; cursor: default; background: none; }
.dh-tr-restore { color: var(--primary); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 8px; }
.dh-tr-restore:disabled:hover { background: none; }
.dh-tr-foot { font-size: 11px; color: #A8AEB8; padding: 6px 8px 2px; }

/* 发音指令行（2026-09-29）：音色块内、复刻框下方，透传百炼 instruction */
.dh-instruct-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dh-instruct-row .dh-hint { flex: 0 0 auto; }
.dh-instruct-row .dh-input { flex: 1; height: 32px; padding: 0 10px; }
/* 发音指令四下拉（2026-09-29 由自由文本框改为受控选择：语言/情绪/特点/用途） */
#dhInstructRow { margin-top: 8px; }
.dh-sel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dh-sel { display: flex; flex-direction: column; gap: 4px; }
/* R112（2026-10-06 用户要求）：语言/情绪/特点/用途、生成通道 统一为「加粗纯白」，与 .dh-vd-label 一致 */
.dh-sel span { font-size: 13px; font-weight: 700; color: var(--text); }
#dhPubLangRow .dh-sel span { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.dh-ls-label { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
#dhPubLangRow { padding-top: 11px; }
.dh-sel select { height: 30px; padding: 0 6px; font-size: 13px; border: 1px solid #D9DCE3; border-radius: 6px; background: var(--surface); color: inherit; }
.dh-sel select:focus { outline: none; border-color: var(--primary); }
.dh-instr-preview { margin-top: 8px; font-size: 12px; color: #8A8F99; line-height: 1.5; }

/* —— 配音链路 Tab：文本配音 / 本地音频直驱（2026-09-29）——
   第二列顶部的两选一链路开关，选中态用主色实心，与全站分段控件观感一致 */
.dh-vtabs { display: flex; gap: 8px; }
.dh-vtab {
    flex: 1; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--muted); font-size: 13px; font-family: inherit; cursor: pointer;
    transition: all .15s;
}
.dh-vtab:hover { border-color: var(--primary); color: var(--primary); }
.dh-vtab.active { background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 600; }

/* —— 音色设计链路（R106，2026-10-06）：把「AI 音色设计」页的 design 档搬进数字人 ——
   只搬「音色设计」这一档（音色复刻 / 预置音色 / 多角色对话不在数字人范围内）；
   控件全部复用数字人自己的 token，深浅主题自动跟随，不另写一套配色。 */
/* 字段标签（R107 用户指定）：加粗 + 主文字色（深色下即近纯白，浅色下自动转深字，不会白底白字） */
.dh-vd-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.dh-vd-label:first-of-type { margin-top: 10px; }
.dh-vd-req {
    margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 500;
    border: 1px solid var(--line); background: var(--soft); color: var(--primary);
}
/* R168（2026-10-07 用户要求）：音色描述标签行 flex 化 + 右侧「清空」小按钮——
   低调描边款（透明底 + token 字色），hover 才亮，与站内小按钮语言一致 */
.dh-vd-label-row { display: flex; align-items: center; justify-content: space-between; }
.dh-vd-clear {
    height: 22px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: transparent; color: var(--text-tertiary); font-size: 12px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.dh-vd-clear:hover { border-color: var(--hover-border); color: var(--hover-text); }
.dh-vd-ta {
    width: 100%; min-height: 96px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.7;
    resize: vertical; outline: none; transition: border-color .15s;
}
.dh-vd-ta:focus { border-color: var(--primary); }
.dh-vd-ta::placeholder { color: var(--text-tertiary); }
.dh-vd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.dh-vd-chip {
    padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft);
    font-size: 15px; color: var(--text-secondary); cursor: pointer; user-select: none; white-space: nowrap;
    transition: all .15s;
}
.dh-vd-chip:hover { border-color: var(--primary); color: var(--primary); }
/* 音色设计「生成试听」（R107 用户指定）：走主 CTA 渐变，与「生成口播视频」同一条色带。
   用 id 选择器（优先级高于 .dh-btn.ghost）压掉 ghost 的浅底描边，且不影响其它按钮。 */
#dhBtnDesignPrev {
    background-image: var(--grad-cta); background-color: var(--primary); border-color: transparent;
    color: #fff; font-weight: 600;
}
#dhBtnDesignPrev:hover { background-image: var(--grad-cta-hover); background-color: var(--primary-dark); filter: brightness(1.06); }
#dhBtnDesignPrev:active { filter: brightness(.94); }
#dhVdErr { margin-top: 8px; color: #F53F3F; }

/* —— 本地音频直驱上传卡（2026-09-29）：虚线拖拽框 → 已选文件条 ——
   拖拽框与全站 se-dropzone 同款（虚线 + 浅底 + 拖拽高亮），选中后整块替换为文件条 + 试听播放器 */
.dh-local-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 22px 16px; border: 1.5px dashed var(--border-strong); border-radius: 9px; background: var(--surface-2);
    cursor: pointer; transition: all .18s; text-align: center;
}
.dh-local-drop:hover { border-color: var(--primary); background: var(--surface-3); }
.dh-local-drop.drag { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.dh-local-ic { width: 30px; height: 30px; color: #C3C9D4; }
.dh-local-t1 { font-size: 13px; font-weight: 600; color: var(--text); }
.dh-local-t2 { font-size: 12px; color: var(--fg-subtle); }
.dh-local-picked {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft);
}
.dh-local-info { flex: 1; min-width: 0; }
.dh-local-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-local-meta { margin-top: 2px; font-size: 12px; color: var(--muted); }
.dh-local-x { flex: 0 0 auto; padding: 0 4px; font-size: 18px; line-height: 1; color: var(--text-tertiary); cursor: pointer; }
.dh-local-x:hover { color: var(--danger); }
.dh-local-change { flex: 0 0 auto; height: 26px; padding: 0 12px; font-size: 12px; background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; }
.dh-local-change:hover { background: var(--grad-cta-hover, var(--primary-dark)); color: #fff; }

/* 列头文字（2026-09-29）：跟随 .dh-colhead 的主字号，避免被后续通用 span 规则压小 */
.dh-colhead .dh-step-t { font-size: 16px; font-weight: 600; color: var(--text); }
/* R117（2026-10-06 用户要求）：列头标题右侧的补充说明（如「生成文案（或自定义文案）」）。
   初版随标题字号（18px），后用户要求「改小两号」→ 按项目字号档（一档=2px）小两档＝14px；
   仅颜色/字重弱化为副标题，避免与主标题抢层级。 */
.dh-colhead .dh-col-sub { font-size: 14px; font-weight: 400; color: var(--text-secondary); }


.dh-tb-opt { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--primary); font-weight: 600; }
.dh-tb-opt:hover { border-color: transparent; background: var(--primary-light); color: var(--primary); }
.dh-tb-opt:disabled { opacity: .55; cursor: not-allowed; }
.dh-tb-opt .ico { width: 13px; height: 13px; }

/* 语速 / 音量 */
.dh-inline { display: flex; gap: 12px; }
.dh-field { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.dh-select {
    flex: 1; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-size: 13px; outline: none;
}
/* 语速/音量/音调：滑杆 + 数字框 */
.dh-slider { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dh-slider label { flex: 0 0 auto; white-space: nowrap; }
.dh-slider label b { color: var(--text); font-weight: 600; }
.dh-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--primary); }
.dh-num {
    width: 64px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-size: 13px; outline: none; text-align: center;
}
.dh-num:focus { border-color: var(--primary); }
/* 高级设置面板 */
.dh-block .dh-slider + .dh-slider { margin-top: 10px; }
.dh-block .dh-slider label { min-width: 64px; }
/* —— 多音字设置弹窗 —— */
.dhy-modal { width: 520px; max-width: 92vw; }
.dhy-list { max-height: 56vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.dhy-row { display: flex; align-items: center; gap: 10px; }
.dhy-char {
    flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft);
    font-size: 16px; font-weight: 600; color: var(--text);
}
.dhy-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dhy-chip {
    padding: 5px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
    font-size: 13px; color: var(--text); cursor: pointer; user-select: none; transition: all .15s;
}
.dhy-chip:hover { border-color: var(--primary); color: var(--primary); }
.dhy-chip.on { background: var(--primary); border-color: var(--primary); color:#fff; }
.dhy-empty { padding: 26px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.dhy-foot { margin-top: 12px; }
.dhy-done {
    width: 100%; height: 38px; border: none; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--primary); color:#fff; font-size: 14px; font-weight: 600;
}
.dhy-done:hover { filter: brightness(1.06); }
/* —— 多音字「按出现位置区分」：按字分组 + 每处一行（2026-09-28）—— */
.dhy-tip { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 2px 0 10px; }
.dhy-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px 10px; }
/* R113 同音字替换弹窗：读音标签 + 暂无收录提示 */
.dhy-py { display: inline-block; min-width: 46px; font-size: 12px; color: var(--muted); font-family: var(--mono, monospace); margin-right: 4px; }
.dhy-nohomo { font-size: 12px; color: var(--text-tertiary); }
.dhy-ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dhy-gchar {
    flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--primary-light, var(--primary-light)); color: var(--primary);
    font-size: 15px; font-weight: 700;
}
.dhy-gn { font-size: 12px; color: var(--muted); }
.dhy-occ { padding: 8px 0 2px; border-top: 1px dashed var(--line); }
.dhy-occ:first-of-type { border-top: none; }
.dhy-occhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.dhy-pos {
    flex: 0 0 auto; padding: 1px 7px; border-radius: 6px; background: var(--soft);
    font-size: 12px; color: var(--muted);
}
.dhy-ctx { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhy-hit { color: var(--primary); font-weight: 700; font-style: normal; }

.dh-audio { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; background: var(--soft); }
.dh-dur { margin-top: 6px; font-size: 12px; color: var(--muted); }
.dh-dur-tip { color: var(--warning); display: block; margin-top: 3px; }

/* —— AI 合规体检结果面板（2026-09-28 融合北斗 P0-A2）——
   命中高危词会拦住生成：面板里给「一键采纳改写」与「仍要生成」两条出路，
   所以这块必须显眼但不能盖住文案框，做成紧跟文案框的浅色卡片。 */
.dh-legal { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 10px; }
.dh-lg-head { font-size: 15px; color: var(--text); line-height: 1.6; }
.dh-lg-hi { color: var(--danger); }
.dh-lg-sum { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.dh-lg-list { margin-top: 8px; max-height: 176px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.dh-lg-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; background: var(--soft); }
.dh-lg-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; }
.dh-lg-tag { flex: 0 0 auto; font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.dh-lg-tag.high { background: #FEE2E2; color: var(--danger); }
.dh-lg-tag.mid { background: #FEF3C7; color: #92400E; }
.dh-lg-word { color: var(--text); }
.dh-lg-arrow { color: var(--text-tertiary); }
.dh-lg-sug { color: var(--success); }
.dh-lg-why { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.dh-lg-acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* —— AI 写口播文案弹窗（P0-A1）与 IP 档案（A6）共用字段样式 —— */
.dh-aiw-modal, .dh-ip-modal { width: 620px; max-width: 94vw; }
.dh-aiw-grid { display: flex; flex-direction: column; gap: 10px; }
.dh-aiw-field { display: flex; flex-direction: column; gap: 4px; }
.dh-aiw-field > span { font-size: 15px; color: var(--muted); }
.dh-aiw-input {
  height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 15px; outline: none;
}
.dh-aiw-input:focus { border-color: var(--primary); }
.dh-aiw-input::placeholder { color: var(--text-tertiary); }
.dh-aiw-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dh-aiw-label { font-size: 15px; color: var(--muted); }
.dh-aiw-hint { font-size: 12px; color: var(--text-tertiary); }
.dh-aiw-status { min-height: 18px; margin-top: 8px; font-size: 15px; color: var(--muted); }
.dh-aiw-status.err { color: var(--danger); }
.dh-aiw-status.ok { color: var(--success); }
.dh-aiw-fill { background: var(--primary); border-color: var(--primary); color:#fff; }
.dh-aiw-fill:hover { filter: brightness(1.06); color:#fff; }

/* —— IP 档案库（2026-09-28）—— */
.dh-ip-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--soft);
}
.dh-ip-label { flex: 0 0 auto; font-size: 15px; color: var(--muted); }
.dh-ip-cur {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-ip-list { max-height: 54vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.dh-ip-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; background: var(--surface); }
.dh-ip-card.on { border-color: var(--primary); background: var(--soft); }
.dh-ip-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.dh-ip-on { flex: 0 0 auto; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--primary); color:#fff; }
.dh-ip-sub { margin-top: 4px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.dh-ip-dim { color: var(--text-tertiary); }
.dh-ip-acts { margin-top: 8px; display: flex; gap: 8px; }
.dh-ip-empty { padding: 26px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.8; }

/* —— 创作草稿提示条（2026-09-28：本地草稿恢复 / 清空）—— */
.dh-draft-bar {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 7px 10px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--soft);
}
.dh-draft-tip {
  flex: 1; min-width: 0; font-size: 15px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-draft-bar .dh-tb { flex: 0 0 auto; font-size: 12px; padding: 4px 10px; }

/* —— 我的配音（P0-A4）—— */
.dh-audio-acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dh-auh-modal { width: 560px; max-width: 94vw; }
.dh-auh-list { max-height: 56vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.dh-auh-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; background: var(--surface); }
.dh-auh-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dh-auh-meta { margin-top: 2px; font-size: 12px; color: var(--muted); }
.dh-auh-acts { margin-top: 8px; display: flex; gap: 8px; }
.dh-auh-empty { padding: 26px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.8; }

/* 底部生成卡 */
.dh-dock {
    flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 14px;
    border-top: 1px solid var(--line); background: var(--card); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.dh-btn {
    flex: 1; height: 40px; border-radius: var(--radius-md); font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line);
}
.dh-btn.ghost { background: var(--surface); color: var(--text); }
.dh-btn.ghost:hover { border-color: var(--hover-border); color: var(--hover-text); }
.dh-btn.primary { flex: 1.6; background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 600; }
.dh-btn.primary:hover { background: var(--primary-dark); }
.dh-btn:disabled { opacity: .6; cursor: not-allowed; }
.dh-badge {
    font-size: 11px; font-weight: 400; padding: 2px 7px; border-radius: 10px;
    background: rgba(255,255,255,.22);
}
/* ===== 全站通栏生成按钮统一标准（2026-10-09，对齐内容替换 #crBtnGenerate）=====
   结构：<svg #i-sparkle> + <span>生成文字</span> + <span class="*-badge">✦ N 积分</span>
   版式：星号+文字在左、积分徽章在右（徽章 margin-left:auto 吸收全部富余空间）；
   渐变/配色/圆角沿用各页现状，此处只管结构与版式。已接入：数字人 #dhBtnGen、
   智能剪辑 #renderBtn（内联版式）、带货/探店专业与极简（pv/sv 注入 CSS 内 margin-left:auto）。 */
/* 2026-11-01 对齐视频生成页 .generate-btn（padding:12px）：原 .dh-btn 无 padding，
   星标+文字贴左缘、积分徽章贴右缘，显得「留白不够」。这里补左右内边距给呼吸感。 */
#dhBtnGen { padding: 0 16px; }
#dhBtnGen .dh-badge { margin-left: auto; }
#dhBtnGen .ico { font-size: 15px; }
#renderBtn .ico { font-size: 15px; }

/* 右侧生成记录 */
/* 生成结果区改为抽屉式（2026-10-04）：默认收起在右侧，点竖标签向左滑出 */
.dh-right {
    position: fixed; top: 0; right: 0; bottom: 0; width: 570px; max-width: 90vw; flex: none;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg); display: flex; flex-direction: column; min-height: 0;
    transform: translateX(100%); transition: transform .3s ease; z-index: 60;
    box-shadow: -10px 0 28px rgba(0,0,0,.18); overflow: visible;
}
.dh-right.dh-open { transform: translateX(0); }
/* ★ R120（2026-10-06）：右侧「生成结果」竖标签重新设计（用户：不够大气，再设计一下）。
   原＝13px 纯色蓝窄条，只有一行竖排文字；现＝**纵向三件套**（30px 图标徽章 / 竖排标题 / 条数胶囊），
   蓝色斜向渐变 + 顶部高光 + 透明白描边 + 抬升投影，hover 整条向左滑出 3px 并加亮。
   宽度 44px（原 36px）、圆角 10→18px，颜色在浅/深色下都是同一套渐变（深色 --primary 更亮，仍协调）。
   仅改样式与标签内部结构，JS（classList 开关 / 点击 / #dhRtCount 计数）一行未动。 */
/* ===== 标准组件：生成结果竖标签（dh-result-tab）=====
   数字人 / 带货视频 / 智能剪辑 三模块共用，样式同源、完全一致的「生成结果」竖标签。
   新增页面要加此标签，直接套用以下结构即可，无需各自写样式：
     <div class="dh-result-tab" id="xxxResultTab" title="展开 / 收起生成结果">
       <span class="dh-rt-ico"><svg class="ico" ...><use href="#i-grid"></use></svg></span>
       <span class="dh-rt-text">生成结果</span>
       <span class="dh-rt-count" id="xxxRtCount">0</span>
     </div>
   - 配色/顶部高光/悬浮左浮/按下回落/呼吸灯 全在此定义，深浅主题自适应（var(--grad-cta)）。
   - ★ 呼吸灯（两次闪烁）触发标准（2026-10-09 立标并验证可用）：呼吸灯 .dh-hint 必须由「显式事件」
       主动触发，禁止只靠渲染 diff（仅靠渲染判断极容易漏触发，已踩坑）。每个模块须在以下三处调用同一个
       触发函数（范本 pvideo.js 2094/2644/2700、video-replace.js crHintResultTab）：
         ① 模块初始化（bindEvents / 抽屉绑定）时闪一次 → 进页面即见，验证效果可用；
         ② 点「生成」提交成功后闪一次；
         ③ 新成片落袋（render 时判断「未提示过的成功 id」集合）闪一次（首屏/刷新只建集合不闪）。
       触发函数范式（动画可重播）：el.classList.remove('dh-hint') → 强制回流 → el.classList.add('dh-hint')
       → 绑 animationend 自清理（移除 .dh-hint）。keyframes 见 dhTabHint（1.5s×2 + brightness 脉冲）。
   - ★ 双流光（2026-10-09 升级）：::before/::after 常驻反向旋转流光描边（同源 .dh-col-beam 的
     --dh-beam-a/b + dh-beam-*-spin，白色系适配渐变底），随标准自带，新页面零成本继承。
   - 定位由各自容器决定（父级 position:fixed/absolute 时，left:-44px 贴在右缘外侧），本类只管视觉。
   ====================================================================== */

/* ======================================================================
   设计标准总览（2026-10-08 立标）—— 以下 7 类组件已统一，新增页面/弹窗直接套用，禁止各模块另造一套
   ----------------------------------------------------------------------
   ① 生成结果竖标签      → .dh-result-tab（图标徽章 + 竖排标题 + 条数胶囊 + 呼吸灯 .dh-hint + 常驻双流光）
                           呼吸灯须由「三处显式事件」触发：①初始化 ②点生成 ③新成片落袋（见 3632 行说明）
                           drop-in：<div class="dh-result-tab" id="xResultTab">…</div>（结构见下 3675 行）
   ② 生成结果抽屉页      → .dh-right / .dh-rhead / .dh-works（头部标题 + N 条 + [刷新] + [清空记录] + 三列网格）
                           drop-in：<div class="dh-right" id="xRight"><div class="dh-result-tab">…</div>
                                     <div class="dh-rhead"><span class="dh-rname">…</span>
                                       <span class="dh-rhead-count" id="xWorkCount">0 条</span>
                                       <span class="dh-rhead-act">
                                         <button class="refresh-btn" id="xRefresh"><svg viewBox="0 0 24 24" class="ico"><use href="#i-refresh"></use></svg>刷新</button>
                                         <button class="dh-btn-mini dh-btn-danger">清空记录</button>
                                       </span></div>
                                     <div class="dh-works" id="xWorkList"></div></div>
                           ★ 2026-10-10 标准升级：.dh-rhead-act 内固定先放「刷新」.refresh-btn，再放「清空记录」.dh-btn-mini.dh-btn-danger。
                             无清空按钮的模块（如人脸打码/换脸）也必须有「刷新」。刷新只重载/重渲染列表，不清空。
   ③ 生成结果卡片 / 弹窗  → 卡片直接写 .result-card .dh-work-rc（封面 9:16 + 单行标题 + 无位移）；
                           动作行首位「智能剪辑」按钮 + 下载 + 删除（2026-10-09 入标，结构见下「标准完成卡」）；
                           点卡片弹「作品详情弹窗」统一调 openWorkModal()（app.js 全局，#workModalMask / .work-modal，
                           左视频右信息面板；数字人/带货/智能剪辑/作品库共用同一套）。
   ④ 弹窗标准（以 IP 档案库弹窗为准）→ .dhv-mask / .dhv-modal：深遮罩 rgba(6,8,12,.72)+blur(4px)、
                           面板 830×1060 定尺（max 94vw/94vh 兜底）、14px 圆角、1px 描边 + 大投影、
                           深色面板提亮（:root[data-theme=dark] 下 background:var(--soft)）、常驻双流光边框。
                           ★ 挂 .dhv-modal 即自动获得双流光（见 3189 行「标准组件：弹窗双流光」），禁止再写 ::after/::before。
   ⑤ 流光（弹窗）        → 由 ④ 的 .dhv-modal 基类统一提供，色值走 --dh-beam-ink 令牌（白色系，深=纯白/浅=中性灰），同依赖 --dh-beam-a/b。
   ⑥ 列流光（hover）      → .dh-col-beam（见 2530 行「标准组件：列流光边框」）：任何列/卡片容器挂此类即获得
                           hover 双流光（静息不可见 + 续跑不闪）。数字人 .dh-ph / 带货 .pv-col / 智能剪辑 .panel-* 已统一挂此。
                           ★ 描边配色＝白色系（2026-10-09 用户拍板入标）：光标悬浮在列上的框一律「白色」，
                             禁止再用淡蓝。墨色唯一来源＝令牌 --dh-beam-ink（深色纯白 rgb(255,255,255) /
                             浅色中性灰 rgb(203,207,214)），作用于 .dh-col-beam / .dh-left / .dh-body .dh-ph。
                           ★★ 勿混淆：列「内容器」.card 的 hover 边框**不属本条** —— 深色下不得为蓝（不得取
                             --hover-border），统一回落 #D7D9DE 白/灰描边；fs / fb 两页已排除、仅 .tools-stage 保留
                             （见 5627 行「card hover / sticky 浅线 → token 深线」）。新 stage 勿加回那条深色规则。
   ⑦ 导航步骤条（胶囊）   → .dh-steps / .dh-step(.active) / .dh-step-no / .dh-step-sep（2026-10-09 立标，
                           内容替换页历史类名 .cr-step* 为等效别名）：静态流程指示，激活步 = --grad-cta 渐变胶囊
                           + 白字 + 白24%徽标 + 投影；未激活 = 透明胶囊 + 灰数字圆点；步间 72px 连线。drop-in 结构见 4187 行。
   依赖令牌（全局，禁止重复定义）：@property --dh-beam-a/b（2528 行）+ @keyframes dh-beam-a-spin / dh-beam-b-spin（2553 行）
   + --dh-beam-ink（列流光描边墨色，rgb 三元组；:root 浅色 / :root[data-theme="dark"] 深色各定义一次）。
   ====================================================================== */

/* ===== 标准组件：生成结果抽屉（dh-right）=====
   数字人 / 带货视频 / 智能剪辑 三模块共用同一套「生成结果」侧边抽屉（点 .dh-result-tab 滑出）。
   新增页面要加此抽屉，直接套用以下结构（.dh-right 已是 position:fixed 右缘抽屉，内部为 头部 + 结果网格）：
     <div class="dh-right" id="xxxRight">
       <div class="dh-result-tab" id="xxxResultTab" ...> ...（竖标签结构见上） ... </div>
       <div class="dh-rhead">
         <span class="dh-rname"><span class="dh-col-ico"><svg ...i-grid></svg></span>生成结果</span>
         <span class="dh-rhead-count" id="xxxWorkCount">0 条</span>
         <span class="dh-rhead-act">
           <button class="refresh-btn" id="xxxRefresh"><svg viewBox="0 0 24 24" class="ico"><use href="#i-refresh"></use></svg>刷新</button>
           <button class="dh-btn-mini dh-btn-danger" id="xxxClear">清空记录</button>
         </span>
       </div>
       <div class="dh-works" id="xxxWorkList"></div>   <!-- 卡片直接作为子节点；空态由 JS 写入 .dh-empty -->
     </div>
   - .dh-rhead：标题(左) → 条数(标题后空两字=32px) → 工具(右，.dh-rhead-act 先「刷新」.refresh-btn，
     后「清空记录」.dh-btn-mini.dh-btn-danger)；条数文案统一「N 条」（各模块一致）。
     ★ 2026-10-10 入标：所有含「生成结果」抽屉的模块必须有刷新按钮，行为为重载/重渲染结果列表。
     ★ 2026-10-09 标准升级（用户：条数要贴在标题后面，空两字）：条数胶囊挂 .dh-rhead 直接子级、
     紧跟 .dh-rname 之后，用标准类 .dh-rhead-count（margin-left:32px 自带），
     禁止再塞进 .dh-rhead-act 尾部。历史页面用内联 margin-left:32px / ID 规则
     （#dhWorkCount / #svWorkCount 等）实现同款效果，等效兼容、不必回改。
   - .dh-works：定高滚动 + 三列网格（repeat(3,minmax(0,1fr))，grid-auto-rows:max-content 防重叠）；
     卡片用全局 .result-card 体系（见下）。
   - 单条完成卡结构（三模块同款「标准完成卡」，范本 pvRcCard / video-replace.js crRcCard）：
       <div class="dh-work dh-work-rc result-card can-play" data-xxx="...">
         <div class="rc-cover"><video .../><div class="rc-play">...</div><span class="rc-status success">已完成</span></div>
         <div class="rc-info"><div class="rc-title">标题</div><div class="rc-tags"><span class="rc-time">副标题</span></div></div>
         <div class="rc-meta"><div class="rc-actions">
           <button class="dh-btn-mini" data-xxxedit="url">智能剪辑</button>   ← 首位动作
           <div class="rc-action" data-act="download">下载图标</div>
           <div class="rc-action danger" data-act="delete">删除图标</div>
         </div></div>
       </div>
     ★ 2026-10-09 标准升级（用户：卡片要和带货视频的一样，包括「智能剪辑」按钮）：
     ① 动作行首位固定「智能剪辑」dh-btn-mini 按钮 → C.openSmartEditor(url)（带货 data-pvedit 同款，
        各模块自定 data-*-edit 属性，点击委托里先于卡片点击/openWorkModal 分流）；
     ② .rc-meta 只放动作行，不输出作者/时间 meta（那是主网格 cardHTML 的样式，不进抽屉）；
     ③ 副标题收敛为单个 .rc-time（如「9:16 · 720P」），不再铺多枚 .rc-tag；
     ④ 「存入我的资产」图标不进抽屉卡（转存入口保留在作品弹窗/我的作品）。
     竖版成片封面由 .dh-work-rc .rc-cover 统一钉为 9:16 + contain（铺满且完整）。
   ====================================================================== */
.dh-result-tab {
    position: absolute; left: -44px; top: 50%; transform: translateY(-50%);
    width: 44px; padding: 16px 0;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    /* 顶部斜向高光并入背景第一层（原占 ::before，现让位给双流光）：让纯色块有体积感，不至于「一块塑料蓝」 */
    background:
        linear-gradient(196deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 36%, rgba(255,255,255,0) 62%),
        var(--grad-cta, linear-gradient(100deg, #2E6CEC 0%, #5E63F5 55%, #8B5CF6 100%));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .26); border-right: 0;
    border-radius: 18px 0 0 18px;
    cursor: pointer; user-select: none; overflow: hidden;
    box-shadow: -9px 10px 28px rgba(14, 38, 104, .38), inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: filter .22s ease, box-shadow .25s ease, transform .25s ease;
}
/* ★ 双流光（2026-10-09 标准升级）：与列流光 .dh-col-beam 同源（--dh-beam-a/b + dh-beam-*-spin），
   但标签为常驻旋转（不依赖 hover）——「生成结果」是全站灯塔位，双流光随标准自带，新页面零成本继承。
   配色用白色系（蓝紫渐变底上淡蓝流光不可见，白色才有「闪」的对比）。 */
.dh-result-tab::before,
.dh-result-tab::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--dh-beam-a),
        rgba(255,255,255,.95) 0deg, rgba(255,255,255,.38) 16deg, rgba(255,255,255,0) 32deg,
        rgba(255,255,255,0) 328deg, rgba(255,255,255,.38) 344deg, rgba(255,255,255,.95) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .9; pointer-events: none; z-index: 3;
}
.dh-result-tab::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(255,255,255,.95) 0deg, rgba(255,255,255,.38) 16deg, rgba(255,255,255,0) 32deg,
        rgba(255,255,255,0) 328deg, rgba(255,255,255,.38) 344deg, rgba(255,255,255,.95) 360deg);
    animation: dh-beam-b-spin 6.5s linear infinite;
}
.dh-result-tab::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.dh-result-tab > * { position: relative; z-index: 1; }
.dh-result-tab:hover {
    filter: brightness(1.08);
    transform: translateY(-50%) translateX(-3px);
    box-shadow: -12px 12px 32px rgba(14, 38, 104, .46), 0 10px 24px -10px rgba(74, 134, 247, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.dh-result-tab:active { transform: translateY(-50%) translateX(-1px); }
/* 图标徽章：与抽屉内 .dh-rhead 的 grid 图标同款，形成视觉呼应 */
.dh-rt-ico {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .24);
}
.dh-rt-ico .ico { width: 17px; height: 17px; }
.dh-rt-text {
    writing-mode: vertical-rl;
    font-size: 14.5px; font-weight: 600; line-height: 1; letter-spacing: 4px;
    /* 竖排时字距会加在最后一个字之后（视觉上偏上 2px），用负下边距吃掉它 */
    margin-bottom: -4px;
    text-shadow: 0 1px 2px rgba(9, 26, 66, .35);
}
.dh-rt-count {
    writing-mode: horizontal-tb; flex: 0 0 auto; min-width: 22px; padding: 1px 6px;
    background: #fff; color: #1B49B0; border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 16px;
    text-align: center; letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(9, 26, 66, .26);
}
@keyframes dhTabHint {
    0%, 100% { box-shadow: -9px 10px 28px rgba(14, 38, 104, .38), inset 0 1px 0 rgba(255, 255, 255, .24); filter: brightness(1); }
    50%      { box-shadow: -9px 12px 32px rgba(47, 108, 236, .72), 0 0 0 6px rgba(76, 141, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .35); filter: brightness(1.32); }
}
/* 两次闪烁呼吸灯：明亮脉冲（box-shadow + brightness）+ 持续 1.5s×2，animationend 自动移除 .dh-hint */
.dh-result-tab.dh-hint { animation: dhTabHint 1.5s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
    .dh-right { transition: none; }
    .dh-result-tab { transition: none; }
    .dh-result-tab.dh-hint { animation: none; }
    .dh-result-tab::before, .dh-result-tab::after { animation: none; opacity: 0; }
}
.dh-rhead {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; flex: 0 0 auto;
    flex-wrap: wrap; row-gap: 6px;   /* ★ 2026-10-21：保留期提示独占第二行（见 .dh-keep-tip） */
    /* ★ 2026-10-25 修「保留期提示第二行被空态盖住下半截」：10-21 头部 wrap 出第二行后
       头部 53px→约 74px，但全站 10 处空态规则（.vg-stage #emptyState / .cr-stage #crEmptyState /
       .fs-stage #fsEmptyState / .music-stage #musicEmptyState 等）仍写死 top:53px，且空态
       带不透明背景 + z-index 1~2——绝对定位空态从 53px 起画，正好盖住提示行下半截。
       抬头部到 z-3（高于最高空态 z-2）一劳永逸：空态 top 写多少都不会再盖头部，
       后续头部若再变高也无需回头改空态偏移。 */
    position: relative; z-index: 3;
}
.dh-rhead span { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
/* .dh-rhead span 特异性高于 .dh-step 会把圆圈数字盖成暗灰，这里抬回白色 */
.dh-rhead .dh-step { color: #fff; }
/* 带货视频「生成结果」抽屉头部：从素材库找回按钮（push 到最右，与条数胶囊同行） */
/* 抽屉头部右侧工具区（清空记录 + 条数胶囊）：标准名 .dh-rhead-act，.pv-rhead-act 为历史别名，两者等价 */
.dh-rhead-act, .pv-rhead-act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dh-rhead-act .dh-btn-mini, .pv-rhead-act .dh-btn-mini { font-size: 12px; padding: 4px 10px; }
/* ★ 2026-10-09 标准升级：头部条数胶囊挂标题后（空两字=32px，同数字人 #dhWorkCount 口径）。
   结构：.dh-rhead > .dh-rname → .dh-rhead-count → .dh-rhead-act(右推)。新页面直接挂类即得，
   历史页面的内联 margin-left:32px / ID 规则与此等效。 */
.dh-rhead-count { margin-left: 32px; }
/* 「清空记录」危险按钮（2026-10-08）：数字人/带货视频抽屉头部共用，视觉对齐智能剪辑 .se-rbtn-danger */
.dh-btn-mini.dh-btn-danger { color: #e5484d; border-color: rgba(229, 72, 77, .45); }
.dh-btn-mini.dh-btn-danger:hover { background: rgba(229, 72, 77, .12); border-color: rgba(229, 72, 77, .7); }
.dh-btn-mini.dh-btn-danger:disabled { opacity: .55; cursor: default; }
/* ★ 2026-10-13 全站「生成结果」保留期提示（用户：面板上方加提示 + 卡片剩 3 天起提醒 + 过期删卡）：
   ① 面板头部 .dh-keep-tip——由 common.js 统一注入进每个 .dh-rhead（含运行时懒加载的面板）。
      注意：`.dh-rhead span`（0,1,1）会把 span 压成 12px 暗灰，这里用 `.dh-rhead .dh-keep-tip`（0,2,0）
      抬回警示色；min-width:0 + ellipsis 保证抽屉很窄时是截断而不是撑破头部。
   ② 卡片顶部 .rc-expire-soon——只在剩 ≤3 天时由 common.js 插入（还剩 3/2/1 天），剩 1 天转红。 */
/* ★ 2026-10-21 用户拍板：提示固定在「标题+刷新+清空记录」那一行的**下方**独占一行
   （DOM 顺序是 name→count→tip→act，用 order:2 把 tip 排到 act 之后；
   flex:1 1 100% 强制换行铺满，margin-left 归零不再贴标题）。
   桌面与手机端同一套结构，不再需要各写一套。 */
.dh-rhead .dh-keep-tip { order: 2; flex: 1 1 100%; margin-left: 0; min-width: 0; color: var(--warning); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-expire-soon {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.2;
    color: var(--warning); background: rgba(224, 162, 60, .15);
    border-bottom: 1px solid rgba(224, 162, 60, .32);
}
.dh-work:not(.dh-work-rc) > .rc-expire-soon { margin: -10px -10px 10px; }   /* 旧式 .dh-work 有 10px 内边距，抵掉才与卡片等宽 */
.rc-expire-soon.urgent { color: #fff; background: #E5484D; border-bottom-color: #E5484D; }
.rc-expire-soon .rxs-ico { font-size: 11px; line-height: 1; }
/* R177（2026-10-07 用户反馈「两行卡片重叠 + hover 抖动」）：
   ① grid-auto-rows:max-content —— .dh-works 是定高滚动容器（flex:1+overflow:auto+min-height:0），
   其内自动行轨对 aspect-ratio(9/16) 子元素的高度推算不足（Chromium 已知缺陷），
   行轨比卡片实际矮几 px ⇒ 下一行压上来（重叠）、hover 浮动时重叠边缘反复重绘（抖动）。
   强制行轨按内容 max-content 取高，根治重叠。
   ② 行距 12 → 16px（对齐智能剪辑结果区的宽松观感）。 */
.dh-works { flex: 1; overflow-y: auto; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; align-items: start; align-content: start; min-height: 0; grid-auto-rows: max-content; }
.dh-work {
    border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; background: var(--surface);
    position: relative;   /* 流光伪元素定位基准（与作品详情弹窗同款） */
}
/* R169（2026-10-07 用户要求）：生成结果卡片「流光取消」——原 ::after/::before 双流光边框整块删除。
   完成卡改「智能剪辑生成结果卡」同款：复用全局 .result-card 体系（缩略图铺满 rc-cover、
   文件名在图下 rc-title、hover 上浮 translateY(-2px)），此处只做差异修正——
   去掉 .dh-work 自带的 10px 内边距（result-card 是零内边距铺满结构）、裁掉圆角溢出。
   生成中/失败卡仍走原 .dh-work 结构（dh-w-head / dh-media-hold / dh-w-acts），不受影响。 */
.dh-work-rc { padding: 0; overflow: hidden; }
/* R173（2026-10-07 用户要求）：缩略图完整显示——全局 .rc-cover 是 1:1 方框 + object-fit:cover
   居中裁切，竖版数字人成片会被裁掉上下。数字人抽屉内改 9/16 框 + contain（不裁剪），
   底色走 var(--soft)（深浅主题跟随），避免全局写死的浅灰 #ECEEF2 / 视频自带 #000 黑边。 */
.dh-work-rc .rc-cover { aspect-ratio: 9 / 16; background: var(--soft); }
.dh-work-rc .rc-cover video { object-fit: contain; background: transparent; }
.dh-work-rc .rc-cover video { pointer-events: none; }  /* 点击视频区＝点卡片，统一开作品弹窗 */
.dh-work-rc .rc-meta { min-height: 36px; }
/* R174（2026-10-07 用户要求）：「成片」标签去掉，时长+日期上移到 rc-tags 行（跟在「数字人」标签后），
   底部 rc-meta 只剩按钮组 → 由 space-between 改 flex-end 右对齐。 */
.dh-work-rc .rc-meta { justify-content: flex-end; }
.dh-work-rc .rc-time { font-size: 11px; color: var(--fg-subtle, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* R175（2026-10-07 用户要求）：标题取消两行预留（全局 .rc-title min-height:40px 是给智能剪辑
   双行标题对齐用的），数字人卡名单行即可，避免「本人」下方空出一截。
   R176（2026-10-08 用户要求）：数字人卡标题只显示第一行（原来仍保留两行截断上限）。 */
.dh-work-rc .rc-title { min-height: 0; -webkit-line-clamp: 1; max-height: 20px; }
.dh-work-rc .dh-btn-mini { height: 26px; padding: 0 10px; font-size: 12px; flex: 0 0 auto; }
.dh-w-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dh-w-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-w-st { flex: 0 0 auto; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.dh-w-st.run { background: var(--primary-light); color: var(--primary); }
.dh-w-st.done { background: #E8F6EF; color: var(--success); }
.dh-w-st.fail { background: #FCEDED; color: var(--danger); }
/* 生成中/排队中占位媒体区：按成品竖版视频（约 9:16）预留同高，避免完成后卡片猛然变高跳一下 */
.dh-media-hold {
    aspect-ratio: 9 / 16; width: 100%; border-radius: 8px; background: var(--soft);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px; box-sizing: border-box; gap: 2px;
}
.dh-media-hold .dh-prog { width: 100%; background: rgba(0,0,0,.1); }
.dh-prog { position: relative; height: 7px; background: rgba(0,0,0,.08); border-radius: 99px; overflow: hidden; }
.dh-prog-bar {
  height: 100%; width: 0; background: var(--primary);
  /* 流光：即使宽度不变也持续扫过，制造「正在生成」的活跃观感 */
  background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  background-size: 220% 100%; background-repeat: no-repeat;
  border-radius: 99px;
  transition: width .9s cubic-bezier(.4,0,.2,1);
  animation: dhProgShimmer 1.5s linear infinite;
}
@keyframes dhProgShimmer { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }
.dh-prog.err .dh-prog-bar { background: var(--danger); animation: none; background-image: none; }
.dh-prog-txt { margin-top: 6px; font-size: 11px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.dh-prog-txt .dh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: dhDotPulse 1s ease-in-out infinite; }
.dh-prog.err .dh-prog-txt .dh-dot { background: var(--danger); }
@keyframes dhDotPulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.dh-retry { color: var(--primary); cursor: pointer; text-decoration: underline; }
.dh-err { font-size: 12px; color: var(--danger); line-height: 1.6; }
.dh-w-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--text-tertiary); }
.dh-w-acts { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; }
.dh-w-acts a { color: var(--primary); text-decoration: none; }
.dh-w-acts a:hover { text-decoration: underline; }
.dh-w-del { color: var(--text-tertiary); cursor: pointer; margin-left: auto; }
.dh-w-del:hover { color: var(--danger); }
/* 作品卡增强（2026-09-28 融合北斗 P0-A5）：积分 / 复制 ID / 重新生成 */
.dh-w-cost { color: var(--primary); font-weight: 600; }
.dh-w-copy { color: var(--text-tertiary); cursor: pointer; }
.dh-w-copy:hover { color: var(--primary); }
/* 重新生成会重新扣口型积分 —— 用主色提示「这是要花钱的动作」 */
.dh-w-redo { color: var(--primary); cursor: pointer; font-weight: 600; }
.dh-w-redo:hover { text-decoration: underline; }
.dh-rhide { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); cursor: pointer; font-weight: 400; }
.dh-rhide input { margin: 0; accent-color: var(--primary); cursor: pointer; }
.dh-rhide:hover { color: var(--muted); }
/* 一键转到智能剪辑：与「配音音频 / 下载视频」同排在作品卡底部，样式对齐 link（不是删除那种灰色） */
.dh-w-edit { color: var(--primary); cursor: pointer; }
.dh-w-edit:hover { text-decoration: underline; }
.dh-w-edit[disabled], .dh-w-edit.is-busy { color: var(--text-tertiary); cursor: default; }
.dh-w-edit[disabled]:hover, .dh-w-edit.is-busy:hover { text-decoration: none; }

/* 上传形象：已选素材（来自我的资产 / 刚上传） */
.dh-picked {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 7px 10px;
    border: 1px solid var(--primary); border-radius: var(--radius-sm);
    background: var(--primary-light); font-size: 12px; color: var(--primary);
}
.dh-picked-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-picked-x {
    flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; line-height: 1; cursor: pointer; color: var(--primary);
}
.dh-picked-x:hover { background: var(--surface); }

/* 形象素材选择器（弹窗，外观沿用音色弹窗） */
.dhp-modal { width: min(880px, 94vw); }
.dhp-grid {
    flex: 1; min-height: 0; overflow-y: auto; margin-top: 14px; padding-right: 4px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; align-content: start;
}
.dhp-card {
    position: relative; border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; background: var(--soft); cursor: pointer;
}
.dhp-card:hover { border-color: var(--hover-border); }
.dhp-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.dhp-card video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #10131A; }
.dhp-tag {
    position: absolute; right: 6px; top: 6px; padding: 2px 7px; border-radius: 6px;
    background: var(--primary); color:#fff; font-size: 10px; font-weight: 600;
}
.dhp-name {
    padding: 6px 8px; font-size: 12px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 「我的资产」里数字人形象素材的角标 */
.as-badge.is-dh { background: var(--primary); }

/* ============================================================
   AI 工具模块 —— 统一版面（左创作区 / 右生成结果）
   用户 2026-09-16 要求：AI 工具的版面改成与「图片制作」完全一致的两栏，
   以后新增工具页一律沿用本版面（布局 / 风格 / 字体 / 颜色统一）。
   ——改这块前先读 .workbuddy/memory/MEMORY.md「AI 工具版面统一」约定。
   ============================================================ */
.tools-stage { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: stretch; }
.tools-stage .jm-left {
    display: flex; flex-direction: column; overflow-y: auto;
    width: 488px; flex: 0 0 488px; padding: 18px 16px 36px;
    border-right: 1px solid var(--border); background: var(--surface-2);
}
@media (max-width: 1100px) { .tools-stage .jm-left { width: 400px; flex-basis: 400px; } }

/* ============ 描述区「范例」上拉面板（2026-09-17 方案 D，对齐参考站的范例锚定）============
 * 位于 .prompt-bar-left 内部，向上展开；点击面板外或 Esc 收起。
 * 2026-10-09 用户反馈「范例里底色不对」：原写死的浅色 #F0F1F3 / #F4F7FE 在深色主题下会变成
 *  一条刺眼亮线 + hover 时整条白块蓝字。改用主题令牌（与首页模型下拉 .qc-model-panel
 *  .qm-item:hover 完全同款）：浅色主题下取值几乎不变，深色主题下自动跟随。 */
.exp-drop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60; display: none; width: 340px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 28px rgba(31, 35, 41, .14); }
.exp-drop.show { display: block; }
.exp-drop-head { padding: 6px 8px 8px; font-size: 11px; font-weight: 600; color: var(--fg-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.exp-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; font-family: inherit; font-size: 15px; line-height: 1.55; color: var(--text); cursor: pointer; transition: background .14s, color .14s; }
.exp-item:hover { background: var(--primary-light); color: var(--primary); }
.exp-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.exp-wrap { position: relative; display: inline-flex; }

/* ============ AI 音色设计（AI 工具 · 二级菜单，2026-09-17 新增）============
 * 版面沿用 §三十「左创作区 / 右生成结果」；配色全部走站内设计令牌，不自带皮肤。 */
.voice-label { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.voice-label:first-of-type { margin-top: 12px; }
.voice-req { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #F4F7FE; font-size: 11px; font-weight: 500; color: var(--primary); }
.voice-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.voice-chip { padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; transition: all .14s; }
.voice-chip:hover { border-color: var(--primary); background: #F4F7FE; color: var(--primary); }
.voice-counter { margin-top: 6px; text-align: right; font-size: 12px; color: var(--fg-subtle); }
.voice-counter.over { color: #F53F3F; }
.voice-select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); outline: none; }
.voice-select:focus { border-color: var(--primary); }
/* 预置音色行：选择器 + 试听按钮（上游不提供试听素材，首次点击由站内合成并全局缓存） */
.voice-preset-row { display: flex; align-items: center; gap: 8px; }
.voice-preset-row .voice-select { flex: 1; min-width: 0; }
.voice-pv-btn { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; transition: all .18s; }
.voice-pv-btn .ico { width: 14px; height: 14px; }
.voice-pv-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: #F5F8FF; }
.voice-pv-btn.playing { border-color: var(--primary); background: var(--primary); color:#fff; }
.voice-pv-btn.playing:hover { border-color: #2560D8; background: #2560D8; color:#fff; }
.voice-pv-btn.loading:disabled { color: #A9AEB8; cursor: default; background: var(--surface); border-color: var(--border); }

/* 结果卡：音频封面 —— 结构复用 §八 .result-card，封面区绘制黑胶唱片（纯 CSS，零图片资源）。
   唱片默认静止，鼠标悬浮卡片（或播放中）才旋转 —— 诉求：「光标经过会悬浮旋转」 */
.rc-voice .rc-cover { background: radial-gradient(circle at 50% 40%, #F4F7FE 0%, #E9EEF8 56%, #DBE3F2 100%); cursor: pointer; }
.rc-vinyl { position: relative; width: min(64%, 190px); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.rc-vinyl-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #262A31 0 2px, #2E333C 2px 3px, #1F232A 3px 5px);
  box-shadow: 0 12px 26px rgba(23, 27, 34, .26), inset 0 0 0 1px rgba(255, 255, 255, .08);
  animation: vinylSpin 4s linear infinite;
  animation-play-state: paused;   /* 默认暂停 → 移开光标停在当前角度，不会跳回 0° */
  will-change: transform;
}
/* 中心贴纸（唱片标签）：即使被播放按钮盖住中心，也能露出一圈彩色 */
.rc-vinyl-disc::before {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--primary), #7FA5FF, #4C82F0, var(--primary));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38);
}
/* 中心轴孔 */
.rc-vinyl-disc::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8%; height: 8%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--surface-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
}
/* 斜向高光（不随唱片旋转），增强黑胶质感 */
.rc-vinyl::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .10) 100%);
}
@keyframes vinylSpin { to { transform: rotate(360deg); } }
.rc-voice:hover .rc-vinyl-disc,
.rc-voice.is-playing .rc-vinyl-disc { animation-play-state: running; }
/* 播放中隐藏封面播放按钮，露出黑胶 */
.rc-voice.is-playing .rc-play { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rc-vinyl-disc { animation: none !important; } }
/* 生成中占位卡：沿用既有的 shimmer + 进度条，仅把封面底色显式钉住（否则被 .rc-voice .rc-cover 覆盖） */
.rc-voice .rc-cover.pending { background: linear-gradient(135deg, #EAEEF6, var(--surface-2)); }
.rc-voice-ph { pointer-events: none; }

/* ---------- AI 音色设计：作品详情弹窗（左播放 + 右信息，版式对齐 .work-modal） ---------- */
.vm-mask {
  display: none; position: fixed; inset: 0; z-index: 215;
  background: rgba(27,31,39,.6); align-items: center; justify-content: center; padding: 24px;
}
.vm-mask.show { display: flex; }
.vm-modal {
  position: relative; width: min(880px, 100%); max-height: 92vh; overflow: hidden;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
}
.vm-close {
  position: absolute; right: 12px; top: 10px; z-index: 6; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(0,0,0,.45); color:#fff; font-size: 18px;
  display: grid; place-items: center; cursor: pointer;
}
.vm-left {
  position: relative;
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 28px 28px; background: linear-gradient(160deg, #171B22 0%, #101215 100%);
}
/* 弹窗左侧封面：与卡片同源的唱片（§三十 同型组件同源）。播放时旋转、暂停即停 */
.vm-art { position: relative; width: 136px; height: 136px; display: grid; place-items: center; }
.vm-art::before {
  content: ''; position: absolute; inset: -20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .38), rgba(var(--primary-rgb), 0) 70%);
}
.vm-art .rc-vinyl { width: 100%; }
.vm-art .rc-vinyl-disc { box-shadow: 0 12px 32px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.vm-art.spinning .rc-vinyl-disc { animation-play-state: running; }
.vm-who { text-align: center; }
.vm-title { font-size: 15px; font-weight: 650; color:#fff; line-height: 1.5; max-width: 320px; word-break: break-word; }
.vm-sub { margin-top: 4px; font-size: 12px; color: #8E96A3; }
.vm-ctrl { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 340px; }
.vm-toggle {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--primary); color:#fff; cursor: pointer; display: grid; place-items: center; transition: background .15s;
}
.vm-toggle:hover { background: #245BD0; }
.vm-toggle .ico { width: 20px; height: 20px; }
.vm-track { position: relative; flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vm-track-bg { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.vm-track-fill { position: absolute; left: 0; width: 0; height: 4px; border-radius: 2px; background: #5A8BFF; }
.vm-track-dot { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18); transform: translateY(-50%); pointer-events: none; }
.vm-time { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9AA1AC; font-variant-numeric: tabular-nums; }
.vm-time i { font-style: normal; color: #5C6470; }
.vm-right { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.vm-sec { border-top: 1px solid var(--surface-2); padding-top: 12px; }
.vm-sec:first-child { border-top: none; padding-top: 0; }
.vm-sec-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 8px; }
.vm-copy { color: var(--primary); font-size: 12px; cursor: pointer; font-weight: 500; }
.vm-text {
  background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.8;
  color: var(--text); max-height: 220px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.vm-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; color: var(--fg-subtle); }
.vm-kv b { color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }
.vm-foot { display: flex; gap: 10px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--surface-2); margin-top: auto; }
.vm-btn { border-radius: 8px; font-size: 13px; cursor: pointer; padding: 8px 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.vm-btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; font-weight: 650; }
.vm-btn.primary:hover { background: #245BD0; }
@media (min-width: 760px) {
  .vm-modal { flex-direction: row; }
  .vm-left { flex: 1; padding: 28px 32px; }
  .vm-right { flex: 1.05; }
}
/* 音乐弹窗分享条：对齐图片/视频弹窗——钉死在左栏最底部、米色通栏、单行文字+红色「积分奖励」。
   .vm-left 是垂直居中布局，分享条不能占位在堆栈里（会浮在中间），改绝对定位贴底；
   显示时 JS 给左栏加 .has-sharebar，底部留出条高避免遮挡居中内容 */
.vm-left .wm-share-bar { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 28px; }
.vm-left.has-sharebar { padding-bottom: calc(28px + 44px); }
.vm-left .wm-share { white-space: nowrap; font-size: 13px; }
@media (min-width: 760px) {
  .vm-left .wm-share-bar { padding: 10px 32px; }
  .vm-left.has-sharebar { padding-bottom: calc(28px + 44px); }
  .vm-left .wm-share { font-size: 13.5px; }
}

/* ══ AI 音乐创作（music）═══ 与音色设计同构；主色 var(--primary)（§五十 同源）═══ */
.voice-chip.active { border-color: var(--primary); background: var(--primary); color:#fff; font-weight: 600; }
.voice-chip.active:hover { border-color: var(--primary); background: var(--primary); color:#fff; }
.rc-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.55); }
.rc-loading .ico { width: 26px; height: 26px; color: var(--primary); }
.music-ver-row { display: flex; flex-wrap: wrap; gap: 8px; }
.music-ver { padding: 7px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; transition: all .14s; }
.music-ver:hover { border-color: var(--primary); color: var(--primary); background: #F4F7FE; }
/* 选中态铁律（§五十）：蓝底白字 + hover 收口不破底 */
.music-ver.active { color:#fff; background: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(var(--primary-rgb),.28); }
.music-ver.active:hover { color:#fff; background: var(--primary); }
.music-lyr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.music-opt-btn { float: right; border: none; background: none; color: var(--primary); font-size: 12px; cursor: pointer; padding: 0 2px; }
.music-opt-btn:hover { text-decoration: underline; }
.music-opt-btn:disabled { color: #A8ABB2; cursor: wait; }
.music-act-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.music-mini-form { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 10px 34px 10px 12px; }
.music-mini-form label { font-size: 12px; color: var(--muted); }
.music-mini-form input { width: 90px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.music-mini-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; }
.music-mini-close:hover { opacity: 1; background: var(--surface-3); }
.music-dash { color: #A8ABB2; }

/* ── AI 音乐创作 · 分步卡片布局（2026-09-17 用户要求对齐参考站 ai18 样式）──
   注意：模式 Tab 选中态 = 白底蓝字（参考站样式），是 §五十「蓝底白字」铁律的用户豁免。
   2026-09-17 晚起升级为通用 .mode-tabs（音乐/提取文案/音色设计三处共用），
   三个工具的生成模式选择框全部白底蓝字，其他未迁移模块仍守 §五十。 */
.music-head-card { display: flex; align-items: center; gap: 14px; }
.music-head-ico {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 12px; background: linear-gradient(135deg, #3D7BFF, var(--primary));
  box-shadow: 0 4px 12px rgba(var(--primary-rgb),.32);
}
.music-head-ico .ico { width: 24px; height: 24px; color:#fff; }
.music-head-txt h3 { margin: 0; font-size: 17px; font-weight: 700; color: #1D2129; }
.music-head-txt p { margin: 3px 0 0; font-size: 15px; color: #86909C; }
.mode-tabs { display: flex; width: 100%; padding: 4px; border-radius: 10px; background: var(--surface-2); margin: 0 0 14px; }
.mode-tabs .dewm-tab {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 8px; border: none; outline: none; font-family: inherit;
  font-size: 13.5px; font-weight: 500; color: var(--text); background: transparent; cursor: pointer; transition: all .15s;
}
.mode-tabs .dewm-tab:hover { color: var(--primary); background: rgba(var(--primary-rgb),.06); }
.mode-tabs .dewm-tab.active {
  color: var(--primary); background: var(--surface); font-weight: 600;
  box-shadow: 0 2px 8px rgba(29,33,41,.08);
}
.mode-tabs .dewm-tab.active:hover { color: var(--primary); background: var(--surface); }
/* 「选」字徽章（可选步骤）：与 .card-step 同形，灰底白字 */
.card-step.card-step-opt { background: var(--border-strong); font-size: 10px; }

/* ── 音乐歌词结构标签：英文标记 + 中文短名 + 悬浮注释（2026-09-17 用户要求）── */
.music-lyr-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.music-lyr-chip b { font-weight: 600; color: var(--text); }
.music-lyr-chip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 260px; padding: 8px 12px;
  background: #1D2129; color:#fff; font-size: 12px; line-height: 1.6; font-weight: 400;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.38);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease; z-index: 30; white-space: normal; text-align: left;
}
.music-lyr-chip::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent; border-top-color: #1D2129;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease; z-index: 30;
}
.music-lyr-chip:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.music-lyr-chip:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 深色主题：chip hover 不能沿用浅色主题的 #F4F7FE 浅底（--text 白字会白底白字消失），改深蓝玻璃底 */
:root[data-theme="dark"] .voice-chip:hover:not(.active) { background: rgba(46,108,236,.18); color: #A8C1F8; }
:root[data-theme="dark"] .voice-chip:hover:not(.active) b { color: #FFFFFF; }

/* 气泡防裁边变体：左缘标签气泡左对齐(箭头随位)，右缘标签气泡右对齐 */
.music-lyr-chip.tip-align-left::after { left: 0; transform: translateX(0) translateY(4px); }
.music-lyr-chip.tip-align-left:hover::after { transform: translateX(0) translateY(0); }
.music-lyr-chip.tip-align-left::before { left: 18px; transform: translateX(0) translateY(4px); }
.music-lyr-chip.tip-align-left:hover::before { transform: translateX(0) translateY(0); }
.music-lyr-chip.tip-align-right::after { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.music-lyr-chip.tip-align-right:hover::after { transform: translateX(0) translateY(0); }
.music-lyr-chip.tip-align-right::before { left: auto; right: 18px; transform: translateX(0) translateY(4px); }
.music-lyr-chip.tip-align-right:hover::before { transform: translateX(0) translateY(0); }

/* ── 音乐歌名输入框：与 textarea.prompt-textarea 同款边框/文字（2026-09-17 用户要求统一）── */
input#musicTitleInput {
    width: 100%; box-sizing: border-box; padding: 12px 15px;
    border: 1px solid var(--border-strong); border-radius: 8px;
    font-size: 15px; line-height: 1.75; color: var(--text); background: var(--surface); outline: none; transition: all .18s;
    font-family: inherit;
}
input#musicTitleInput:hover { border-color: var(--border-strong); }
input#musicTitleInput:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.1); }
input#musicTitleInput::placeholder { color: #A6ABB5; }

/* ================= 内容替换（换模特 / 换产品） ================= */
/* 三列极简（对标 pvideo 极简版）：flex 纵向（步骤条 + 三列网格），总宽 1630，列头 18/17px */
.cr-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
/* ===== 标准组件：导航步骤条（胶囊步骤条）★ 2026-10-09 立标（全站第 7 类标准） =====
   ★ 定位：全站标准组件，新增功能页/弹窗直接套用，禁止各模块另造一套。大流程页（带货/探店等步骤
     可点击、带下一步）仍用 .pv-step* 那套；本 .dh-steps 系列用于「无下一步、纯静态流程指示」的页面。
   首用：内容替换页（历史类名 .cr-step* 继续有效、与本标准等效别名）；新页面直接套 .dh-steps 系列。
   语义：静态流程指示条（不可点击切换；激活由各模块 JS 控制——点列驱动 / 进度驱动均可）。
   激活步 = --grad-cta 渐变胶囊 + 白字 + 白24%数字徽标 + 投影；未激活 = 透明胶囊 + 灰数字圆点；步间 72px 横线连接。
   drop-in：
     <div class="dh-steps" id="xStepBar">
       <div class="dh-step active"><span class="dh-step-no">1</span><span class="dh-step-tx">上传素材</span></div>
       <span class="dh-step-sep"></span>
       <div class="dh-step"><span class="dh-step-no">2</span><span class="dh-step-tx">替换素材|视频设置</span></div>
       <span class="dh-step-sep"></span>
       <div class="dh-step"><span class="dh-step-no">3</span><span class="dh-step-tx">视频预览</span></div>
     </div> */
.dh-steps, .cr-step-bar { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; margin: 0 0 14px; flex-wrap: wrap; }
/* ★ 2026-10-09 晚补：全系列收窄到 .dh-steps / .cr-step-bar 容器作用域。
   裸 .dh-step 与数字人老步骤条数字圆圈（.dh-step-btn .dh-step，26px）、列头圆标（.dh-colhead .dh-step，20px）
   撞类名——胶囊 padding:7px 18px 漏进去把 26px 圆撑成 38×26 椭圆（用户截图报「序号圈变椭圆」），
   .dh-step-sep 漏进去还会盖掉数字人 sep 的 position:relative 使进度条错位。标准标记永远带容器，收窄零副作用。 */
.dh-steps .dh-step, .cr-step-bar .cr-step { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 7px 18px; font-size: 16px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.dh-steps .dh-step .dh-step-no, .cr-step-bar .cr-step .cr-step-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--text-2); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dh-steps .dh-step.active, .cr-step-bar .cr-step.active { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; box-shadow: 0 4px 20px rgba(94, 99, 245, .38); }
.dh-steps .dh-step.active .dh-step-no, .cr-step-bar .cr-step.active .cr-step-no { background: rgba(255, 255, 255, .24); color: #fff; }
.dh-steps .dh-step-sep, .cr-step-bar .cr-step-sep { flex: 0 0 72px; width: 72px; height: 2px; background: var(--line); border-radius: 2px; }
/* 三列网格 */
.cr-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器（列流光直接挂全局 .dh-col-beam，见 2530 行标准组件；此处只管外观） */
/* 两页三列默认高度统一（2026-10-09 实测内容替换列 773px；原先 540px 靠列2 内容撑高，
   换脸列内容少只有 682px，两页看起来不齐 → 统一钉 773px，避免各自被内容拉扯漂移） */
.cr-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.cr-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .card-step 同形（2026-09-20 用户拍板全站步骤序号统一蓝底） */
.cr-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.cr-col:first-child .cr-col-head { font-size: 18px; }
.cr-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
/* 第三列：预览区占满列体（与第一列卡片同占位），视频由预览区内部 flex 居中 */
.cr-col[data-crstep="3"] .cr-col-body { justify-content: stretch; }
/* 第三列：视频预览（实时预览当前参考 / 生成中 / 选中结果；结果列表已迁入专属抽屉） */
/* 第三列预览区：做成与第一列 .card 同款的「卡片式」区域——实线边框、占满列体、悬浮白框；视频在其中纵向居中 */
.cr-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
/* ★ 2026-10-09 列3 白框包含标题+注释：.cr-live-card 卡壳内含 card-head + 预览区，预览区去自身边框占满余高 */
.cr-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.cr-live-card .cr-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding-top: 8px; }
.cr-live-card .card-head { flex: 0 0 auto; }
/* ★ 2026-10-09 与换脸列3 统一口径：列3 视频与列1 同款向上对齐（不再垂直居中），
   画面顶部对齐卡头、宽度铺满列宽，空态仍在余空间居中 */
.cr-live-card .cr-live-preview video { width: 100%; max-width: 100%; max-height: 560px; margin: 0 auto; }
.cr-live-card .cr-live-empty { margin: auto 0; }
/* 悬浮白框：与全站 .card:hover（border-color:#D7D9DE）同款反馈 */
.cr-live-preview:hover { border-color: #D7D9DE; }
.cr-live-preview video { display: block; width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; background: #10131A; border-radius: 8px; }
.cr-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.cr-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.cr-live-empty span { font-size: 14px; font-weight: 600; }
.cr-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.cr-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
/* 生成中遮罩：覆盖在第三列预览区上显示进度（与抽屉卡片进度同源） */
.cr-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.cr-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.cr-live-mask span { font-size: 13.5px; font-weight: 600; }
/* 拖拽上传高亮：拖入上传框时高亮边框（与 hover 同款 + 蓝色辉光） */
.cr-upload.drag-over { border-color: var(--primary); background: var(--hover-bg); box-shadow: 0 0 0 3px rgba(var(--ring), .22); }
@keyframes spin { to { transform: rotate(360deg); } }
/* 响应式：窄屏收列，避免三列横向溢出 / 被压缩崩坏 */
@media (max-width: 1180px) { .cr-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .cr-grid { grid-template-columns: 1fr; } .cr-col { min-height: 0; } }
/* 上传框：虚线框，内含图标 + 主文案 + 辅助文案；有预览时切换为预览态（除按钮外文字 +1px） */
.cr-upload { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .16s, background .16s; overflow: hidden; }
.cr-upload:hover { border-color: var(--primary); background: var(--hover-bg); }
/* 上传卡片 hover 双流光边框（复用 .work-modal 同款 mask-composite 技术，只透边框不扫内容） */
.cr-upload::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; border: 1.5px solid transparent; background: linear-gradient(135deg, rgba(var(--dh-beam-ink), .7) 0%, rgba(var(--dh-beam-ink), 0) 50%, rgba(var(--dh-beam-ink), .7) 100%) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .18s; pointer-events: none; }
.cr-upload:hover::before { opacity: 1; }
.cr-upload.uploading { pointer-events: none; opacity: .65; }
.cr-upload-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 12px; color: var(--fg-subtle); font-size: 14px; font-weight: 600; text-align: center; }
.cr-upload-empty .ico.big { width: 26px; height: 26px; color: var(--fg-subtle); }
.cr-upload-empty em { color: var(--fg-subtle); font-size: 12px; font-style: normal; font-weight: 500; }
.cr-upload.small .cr-upload-empty { padding: 18px 10px; }
/* 小上传框宽度有限：双按钮竖排（参考视频大框保持横排） */
.cr-upload.small .gv-up-actions { flex-direction: column; align-items: stretch; margin-top: 10px; }
.cr-upload.small .gv-up-actions .pv-btn { justify-content: center; }
.cr-upload-row { display: flex; gap: 10px; margin-top: 12px; }
.cr-upload-row .cr-upload { flex: 1; min-width: 0; }
/* ★ 2026-10-09 用户要求：双槽等宽（原背景槽固定 44%） */
.cr-upload-row .cr-upload.optional { flex: 1; }
/* 预览态 */
.cr-upload-preview { position: relative; }
.cr-upload-preview img { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #10131A; }
/* ★ 2026-10-09 双槽预览高度固定 300px（不随图片比例变化）：容器写死高，img 撑满 + contain 居中。
   口径：150(max) → 300(max) → 定稿固定高（与换脸人脸图 490 固定高同套路）。
   ★ 必须用 id 选择器：.cr-upload.small .cr-upload-preview img（0,3,1）会盖过任何两条类的规则 */
#crImageDrop .cr-upload-preview img,
#crBgDrop .cr-upload-preview img { max-height: 300px; }
#crImagePreview, #crBgPreview { height: 300px; }
#crImagePreview img, #crBgPreview img { height: 100%; max-height: none; }
/* 参考视频预览：平铺整个容器（width:100% 撑满列宽），height:auto 按视频比例完整显示不裁切、不留黑边（2026-10-09 用户拍板） */
.cr-upload-preview video { display: block; width: 100%; height: auto; background: #10131A; }
.cr-upload.small .cr-upload-preview img { max-height: 150px; background: var(--surface-2); }
.cr-preview-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: rgba(16,19,26,.62); color:#fff; cursor: pointer; }
.cr-preview-del:hover { background: var(--danger); }
.cr-preview-del .ico { width: 13px; height: 13px; }
/* 模式切换（换模特 / 换产品）：复用 mode-capsule 基础样式，占满一行 */
.cr-mode-capsule { width: 100%; }
.cr-mode-capsule .mode-item { flex: 1; justify-content: center; }
/* 「可选」小标签 */
.cr-opt-tag { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; vertical-align: 1px; }
/* 内容替换列内文字整体加大一号（+1px，2026-10-09 用户要求）。
   只 scoped 到 .cr-col，不动全站 .card-head / .mode-item 标准；三列的卡片标题、副标题、上传区文案、模式胶囊、可选标签同步 +1px */
.cr-col .card-head h3 { font-size: 15px; }
/* 副标题取消 24px 图标缩进（cr 卡片标题无图标），左对齐一行放下（2026-10-09 用户要求） */
.cr-col .card-head p { font-size: 13px; padding-left: 0; }
.cr-col .cr-upload-empty { font-size: 15px; }
.cr-col .cr-upload-empty em { font-size: 13px; }
.cr-col .cr-mode-capsule .mode-item { font-size: 13px; }
.cr-col .cr-opt-tag { font-size: 12px; }
/* 滑块刻度「2s——30s」加大一号（scoped，全局 .duration-scale 10.5px 不动） */
.cr-col .duration-scale { font-size: 11.5px; }
/* 视频设置卡内参数行间距 20px（scoped，不动全局 .param-row 标准；首行贴卡头、末行贴卡底） */
.cr-col .param-row { margin: 0 0 20px; }
.cr-col .param-row:last-of-type { margin-bottom: 0; }
/* 第二轮 +1px（2026-10-09 用户圈选：三列副标题/上传区提示/本次生成摘要/按钮下方提示再加大一号，对齐 .vg-col 口径） */
.cr-col .card-head p { font-size: 14px; }
.cr-col .cr-upload-empty em { font-size: 14px; }
.cr-col .generate-summary { font-size: 12px; }
.cr-col .generate-tip { font-size: 11px; }
/* 提交行 */
.cr-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 换产品模式：背景图入口隐藏 */
.cr-stage.bg-hidden #crBgDrop { display: none; }
/* 生成 CTA：蓝→紫渐变由全局 .generate-btn 统一覆盖（style.css:5363 段），本段不重复；仅防御性确认不反向覆盖 */
.cr-stage #crBtnGenerate { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.cr-stage #crBtnGenerate:hover { background-image: var(--grad-cta-hover); }
/* 生成结果专属抽屉空态（相对 .dh-right 绝对定位，覆盖 works 区） */
.cr-stage #crEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }

/* ================= AI 模特换装（outfit） =================
   2026-10-16 新建。样本＝docs/内容替换-UI改造方案与标准-2026-10-08.md（与 cr / fs / fb 同源）。
   逐条对齐：三列 1630 / 列头 18-17 / +1px / 列流光白系 / 卡片 hover 描边白灰 / CTA 蓝紫渐变 /
   专属 .dh-right 抽屉。前缀锁 .of-*（天然不与 .cr-* / .pv-* 污染）。
   ★ 铁律：不要把 .of-stage 加进 [data-theme='dark'] .card:hover 那条蓝色规则 ——
     深色下 hover 变蓝即视为不合规（详见标准 §1.4）。 */
/* 页面基座：flex 纵向（步骤条在上、三列网格在下）—— ★ 2026-10-17 修：
   此前漏写本条，.main-stage 的默认 flex 行向生效 → 步骤条被当作「行内兄弟」挤在左侧、
   吃掉三列宽度（用户截图报「导航条位置不对，挤占了三列的空间」）。
   与 .cr-stage / .fs-stage / .fb-stage / .vg-stage 四条逐字同口径，不另造一套。 */
.of-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
.of-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器（列流光直接挂全局 .dh-col-beam，此处只管外观；min-height 与 cr / fs / fb 统一 773px，避免各自被内容拉扯漂移） */
.of-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.of-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .card-step / .cr-col-no 同形（全站步骤序号统一蓝底） */
.of-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.of-col:first-child .of-col-head { font-size: 18px; }
.of-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
.of-col[data-ofstep="3"] .of-col-body { justify-content: stretch; }

/* 列3：换装效果预览（实时预览最新成片；结果列表在专属抽屉） */
.of-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.of-live-card .card-head { flex: 0 0 auto; }
.of-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.of-live-card .of-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding: 8px 0 0; }
/* 列3 预览：满屏（铺满卡片宽度 + 按原比例自适应高，不裁切、不留四周空档）
   与列1 同口径：成片是竖版电商模特图，cover 会裁掉头/脚，故撑满宽度而不裁切。
   卡片内作用域去掉圆角（贴边铺满，圆角交给卡片自己）。 */
.of-live-preview > img { display: block; flex: 0 0 auto; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; border-radius: 10px; }
.of-live-card .of-live-preview > img { border-radius: 0; }
.of-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.of-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.of-live-empty span { font-size: 14px; font-weight: 600; }
.of-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.of-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
.of-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.of-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.of-live-mask span { font-size: 13.5px; font-weight: 600; }

/* 上传槽：虚线框 + 双流光 hover（只透边框不扫内容；墨色走全局令牌 --dh-beam-ink，白色系不偏蓝） */
.of-upload { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .16s, background .16s; overflow: hidden; }
.of-upload::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; border: 1.5px solid transparent; background: linear-gradient(135deg, rgba(var(--dh-beam-ink), .7) 0%, rgba(var(--dh-beam-ink), 0) 50%, rgba(var(--dh-beam-ink), .7) 100%) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .18s; pointer-events: none; }
.of-upload:hover { border-color: var(--primary); background: var(--hover-bg); }
.of-upload:hover::before { opacity: 1; }
.of-upload.drag-over { border-color: var(--primary); background: var(--hover-bg); box-shadow: 0 0 0 3px rgba(var(--ring), .22); }
.of-upload.uploading { pointer-events: none; opacity: .65; }
.of-upload-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 12px; color: var(--fg-subtle); font-size: 14px; font-weight: 600; text-align: center; }
.of-upload-empty .ico.big { width: 26px; height: 26px; color: var(--fg-subtle); }
.of-upload-empty em { color: var(--fg-subtle); font-size: 12px; font-style: normal; font-weight: 500; }
.of-upload.small .of-upload-empty { padding: 18px 10px; }
.of-upload.small .gv-up-actions { flex-direction: column; align-items: stretch; margin-top: 10px; }
.of-upload.small .gv-up-actions .pv-btn { justify-content: center; }
.of-upload-row { display: flex; gap: 10px; margin-top: 12px; }
.of-upload-row .of-upload { flex: 1; min-width: 0; }
.of-upload-row .of-upload.optional { flex: 1; }
/* 预览态 */
.of-upload-preview { position: relative; }
.of-upload-preview img { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #10131A; }
.of-upload.small .of-upload-preview img { max-height: 150px; background: var(--surface-2); }
/* 列1 模特图：满屏（铺满列宽 + 按原比例自适应高，不裁切、不留两侧空档）
   口径变更（R167-2 / 2026-10-17 用户要求）：原为「容器写死 300px + img height:100% + contain」，
   竖版模特图被压到 300px 高、左右各空一截。改容器高度自适应、img 撑满列宽、高度按原比例。
   ★ 为什么不走 cover：模特原图是 AI 换装的「输入素材」，头/脚被裁会直接毁掉换装结果；
     且沿用 R173（style.css:4468）确立的「竖版内容 contain 不裁剪」口径。 */
#ofModelPreview { height: auto; }
#ofModelPreview img { width: 100%; height: auto; max-height: none; }
.of-preview-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: rgba(16,19,26,.62); color: #fff; cursor: pointer; }
.of-preview-del:hover { background: var(--danger); }
.of-preview-del .ico { width: 13px; height: 13px; }
/* 套装 / 多件 模式胶囊 */
.of-mode-capsule { width: 100%; }
.of-mode-capsule .mode-item { flex: 1; justify-content: center; }
/* 「可选」小标签 */
.of-opt-tag { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; vertical-align: 1px; }
/* 列内文字整体加大一号（+1px 口径）：按钮 / 成本徽标 / 渐变 CTA 不动 */
.of-col .card-head h3 { font-size: 15px; }
.of-col .card-head p { font-size: 14px; padding-left: 0; }
.of-col .of-upload-empty { font-size: 15px; }
.of-col .of-upload-empty em { font-size: 14px; }
.of-col .of-mode-capsule .mode-item { font-size: 13px; }
.of-col .of-opt-tag { font-size: 12px; }
.of-col .param-row { margin: 0 0 20px; }
.of-col .param-row:last-of-type { margin-bottom: 0; }
.of-col .generate-summary { font-size: 12px; }
.of-col .generate-tip { font-size: 11px; }
.of-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 生成 CTA：蓝→紫渐变由全局 .generate-btn 统一覆盖（style.css:5363 段），此处仅确认不反向覆盖 */
.of-stage #ofBtnGenerate { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.of-stage #ofBtnGenerate:hover { background-image: var(--grad-cta-hover); }
/* 生成结果专属抽屉空态（相对 .dh-right 绝对定位，覆盖 works 区） */
.of-stage #ofEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
/* 响应式：窄屏收列，避免三列横向溢出 */
@media (max-width: 1180px) { .of-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }

/* ================= 图片复刻（clone） ================= */
/* 2026-10-17 新建：样式逐条拷贝 .of-*（模特换装）段 —— 那是逐条对齐
   docs/内容替换-UI改造方案与标准-2026-10-08.md 的现行范本，改 .cl- 前缀隔离。
   步骤条用全站标准 .dh-steps；列流光挂全局 .dh-col-beam（白色系，不偏蓝）；
   抽屉复用全局 .dh-right shell —— 三者均不在此重复。
   ★ 铁律：不要把 .cl-stage 加进 [data-theme='dark'] .card:hover 那条蓝色规则 ——
     深色下 hover 变蓝即视为不合规（详见标准 §1.4）。 */
/* 页面基座：flex 纵向（步骤条在上、三列网格在下）—— ★ 这条必写：
   .main-stage 只给行向 flex，漏了本条步骤条会被当成「行内兄弟」并排到三列左边、
   吃掉列宽（R167 模特换装就栽在这里，用户截图报「导航条位置不对，挤占了三列的空间」）。
   与 .cr-stage / .fs-stage / .fb-stage / .vg-stage / .of-stage 五条逐字同参，不另造一套。 */
.cl-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
.cl-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器（列流光直接挂全局 .dh-col-beam，此处只管外观；min-height 与 cr/fs/fb/of 统一 773px，避免各自被内容拉扯漂移） */
.cl-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.cl-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .card-step / .cr-col-no / .of-col-no 同形（全站步骤序号统一蓝底） */
.cl-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.cl-col:first-child .cl-col-head { font-size: 18px; }
.cl-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
.cl-col[data-clstep="3"] .cl-col-body { justify-content: stretch; }

/* 列3：复刻效果预览（实时预览最新成片；结果列表在专属抽屉） */
.cl-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.cl-live-card .card-head { flex: 0 0 auto; }
.cl-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.cl-live-card .cl-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding: 8px 0 0; }
/* ★ 列3 预览满屏（与 .of-live-preview 逐字同参）：
   铺满卡片宽度 + 按原比例自适应高，不裁切、不留四周空档。
   卡片内作用域去掉圆角（贴边铺满，圆角交给卡片自己）。
   flex:0 0 auto 是防「纵向 flex 容器把 9:16 长图压扁」—— 子图默认 flex-shrink:1 会压扁，R167 已踩。
   为什么不走 cover：成片是竖版电商图，cover 会裁掉头/脚；沿用 R173（style.css:4468）不裁剪口径。 */
.cl-live-preview > img { display: block; flex: 0 0 auto; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; border-radius: 10px; }
.cl-live-card .cl-live-preview > img { border-radius: 0; }
/* 列3 预览区左右内边距归零：图才能真正铺到卡片两边（R167-2 口径） */
.cl-live-card .cl-live-preview { padding-left: 0; padding-right: 0; }
.cl-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.cl-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.cl-live-empty span { font-size: 14px; font-weight: 600; }
.cl-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.cl-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
.cl-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.cl-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.cl-live-mask span { font-size: 13.5px; font-weight: 600; }

/* 多图缩略图网格（商品图 ≤4 / 参考图 ≤5，2 列铺满列宽）
   ★ 图用 contain 不裁切：商品图与参考图都是复刻的「输入素材」，裁掉边角会毁掉结果。 */
.cl-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* 上传槽外壳（视频换脸同款）：空态＝虚线框包住「图标 + 提示 + 按钮组」整体居中；有图＝退化为无框容器 */
.cl-upload { position: relative; border-radius: 10px; transition: background .16s, box-shadow .16s; }
.cl-upload.is-empty { border: 1.5px dashed var(--border-strong); background: var(--surface); cursor: pointer; padding: 26px 12px 18px; }
.cl-upload.is-empty:hover { border-color: var(--primary); background: var(--hover-bg); }
.cl-upload.drag-over { background: var(--hover-bg); box-shadow: 0 0 0 3px rgba(var(--ring), .22); }
.cl-upload.is-empty.drag-over { border-color: var(--primary); }
.cl-upload.is-empty .gv-up-actions { display: flex; justify-content: center; align-items: center; margin-top: 14px; }
.cl-upload.is-empty .cl-thumbs-count { margin-left: 8px; }
.cl-upload-hint { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--fg-subtle); font-size: 14px; font-weight: 600; text-align: center; }
.cl-upload-hint .ico.big { width: 26px; height: 26px; color: var(--fg-subtle); }
.cl-thumb { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.cl-thumb > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cl-thumb-no { position: absolute; left: 4px; bottom: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: rgba(16,19,26,.62); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
.cl-thumb-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: rgba(16,19,26,.62); color: #fff; cursor: pointer; }
.cl-thumb-del:hover { background: var(--danger); }
.cl-thumb-del .ico { width: 12px; height: 12px; }
.cl-thumbs-count { align-self: center; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--fg-subtle); }

/* 卖点 / 统一要求输入框 */
.cl-ta { width: 100%; min-height: 104px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.6; font-family: inherit; }
.cl-ta.small { min-height: 76px; }
.cl-ta::placeholder { color: var(--fg-subtle); }
.cl-ta:focus { border-color: var(--primary); outline: none; }
/* 选填小标签（与 .of-opt-tag 同形） */
.cl-opt-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; vertical-align: 1px; }
/* 三套下拉（平台 9 / 市场 6 / 语言 11）：选项多用「上拉」下拉，不平铺 pill */
.cl-select { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font-size: 13px; color: var(--text); background: var(--surface); cursor: pointer; }
.cl-select:focus { border-color: var(--primary); outline: none; }
.cl-model-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fg-subtle); }
.cl-model-hint.cl-warn { color: #f5483b; font-weight: 600; }
/* 固定模型展示（R181：不再提供下拉，只显示当前模型） */
.cl-model-fixed { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cl-model-fixed .cl-opt-tag { margin-left: 0; }
.cl-model-name { font-size: 13px; font-weight: 600; color: var(--text); }
/* 复刻程度双卡（高度复刻 / 参考排版） */
.cl-mode-capsule { width: 100%; }
.cl-mode-capsule .mode-item { flex: 1; justify-content: center; }
/* 列内文字整体加大一号（+1px 口径）：按钮 / 成本徽标 / 渐变 CTA / 控件尺寸不动 */
.cl-col .card-head h3 { font-size: 15px; }
.cl-col .card-head p { font-size: 14px; padding-left: 0; }
.cl-col .cl-upload-hint { font-size: 14px; }
.cl-col .cl-thumbs-count { font-size: 14px; }
.cl-col .cl-opt-tag { font-size: 12px; }
.cl-col .cl-mode-capsule .mode-item { font-size: 13px; }
.cl-col .param-row { margin: 0 0 16px; }
.cl-col .param-row:last-of-type { margin-bottom: 0; }
.cl-col .gv-up-actions { gap: 8px; }
.cl-col .generate-summary { font-size: 12px; }
.cl-col .generate-tip { font-size: 11px; }
.cl-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 生成 CTA：蓝→紫渐变由全局 .generate-btn 统一覆盖（style.css:5363 段），此处仅确认不反向覆盖 */
.cl-stage #clBtnGenerate { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.cl-stage #clBtnGenerate:hover { background-image: var(--grad-cta-hover); }
/* 生成结果专属抽屉空态（相对 .dh-right 绝对定位，覆盖 works 区） */
.cl-stage #clEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
/* 响应式：窄屏收列，避免三列横向溢出 */
@media (max-width: 1180px) { .cl-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .cl-grid { grid-template-columns: 1fr; } .cl-col { min-height: 0; } }
/* ================= 海报生成（poster） ================= */
/* 2026-10-17 新建：样式逐条拷贝 .cl-*（图片复刻）段 —— 那是逐条对齐
   docs/内容替换-UI改造方案与标准-2026-10-08.md 的现行范本，改 .pt- 前缀隔离。
   步骤条用全站标准 .dh-steps；列流光挂全局 .dh-col-beam（白色系，不偏蓝）；
   抽屉复用全局 .dh-right shell —— 三者均不在此重复。
   ★ 铁律：不要把 .pt-stage 加进 [data-theme='dark'] .card:hover 那条蓝色规则 ——
     深色下 hover 变蓝即视为不合规（详见标准 §1.4）。 */
/* 页面基座：flex 纵向（步骤条在上、三列网格在下）—— ★ 这条必写：
   .main-stage 只给行向 flex，漏了本条步骤条会被当成「行内兄弟」并排到三列左边、
   吃掉列宽（R167 模特换装就栽在这里，用户截图报「导航条位置不对，挤占了三列的空间」）。
   与 .cr-/ .fs-/ .fb-/ .vg-/ .of-/ .cl- 六条逐字同参，不另造一套。 */
.pt-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器（列流光直接挂全局 .dh-col-beam，此处只管外观；min-height 与 cr/fs/fb/of 统一 773px，避免各自被内容拉扯漂移） */
.pt-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.pt-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .card-step / .cr-col-no / .of-col-no 同形（全站步骤序号统一蓝底） */
.pt-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.pt-col:first-child .pt-col-head { font-size: 18px; }
.pt-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
.pt-col[data-ptstep="3"] .pt-col-body { justify-content: stretch; }

/* 列3：海报效果预览（实时预览最新成片；结果列表在专属抽屉） */
.pt-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.pt-live-card .card-head { flex: 0 0 auto; }
.pt-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.pt-live-card .pt-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding: 8px 0 0; }
/* ★ 列3 预览满屏（与 .of-live-preview 逐字同参）：
   铺满卡片宽度 + 按原比例自适应高，不裁切、不留四周空档。
   卡片内作用域去掉圆角（贴边铺满，圆角交给卡片自己）。
   flex:0 0 auto 是防「纵向 flex 容器把 9:16 长图压扁」—— 子图默认 flex-shrink:1 会压扁，R167 已踩。
   为什么不走 cover：成片是竖版电商图，cover 会裁掉头/脚；沿用 R173（style.css:4468）不裁剪口径。 */
.pt-live-preview > img { display: block; flex: 0 0 auto; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; border-radius: 10px; }
.pt-live-card .pt-live-preview > img { border-radius: 0; }
/* 列3 预览区左右内边距归零：图才能真正铺到卡片两边（R167-2 口径） */
.pt-live-card .pt-live-preview { padding-left: 0; padding-right: 0; }
.pt-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.pt-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.pt-live-empty span { font-size: 14px; font-weight: 600; }
.pt-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.pt-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
.pt-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.pt-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.pt-live-mask span { font-size: 13.5px; font-weight: 600; }

/* 商品图缩略图（R214：卡片太大，改为一排 3 张的小卡片）
   ★ 图用 contain 不裁切：商品图与参考图都是复刻的「输入素材」，裁掉边角会毁掉结果。 */
/* R217：每个上传卡槽固定单张（商品图/参考图/风格参考图各 1 张），缩略图网格改单列，让那 1 张图铺满卡片宽度 */
.pt-thumbs { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* 中文海报「参考图」槽与商品图槽统一单列网格（R217 起单卡槽，上限由 poster.js ptSlotMax() 返回 1 控制） */
/* .pt-thumbs.two 两列修饰类已随 R214 统一三列、R217 再统一单列而废弃（保留占位防旧 HTML 引用报错） */
/* 上传槽外壳（视频换脸同款，拷贝 .cl-upload）：空态＝虚线框整体居中；有图＝无框容器 */
.pt-upload { position: relative; border-radius: 10px; transition: background .16s, box-shadow .16s; }
.pt-upload.is-empty { border: 1.5px dashed var(--border-strong); background: var(--surface); cursor: pointer; padding: 26px 12px 18px; }
.pt-upload.is-empty:hover { border-color: var(--primary); background: var(--hover-bg); }
.pt-upload.drag-over { background: var(--hover-bg); box-shadow: 0 0 0 3px rgba(var(--ring), .22); }
.pt-upload.is-empty.drag-over { border-color: var(--primary); }
.pt-upload.is-empty .gv-up-actions { display: flex; justify-content: center; align-items: center; margin-top: 14px; }
/* R217：卡片改一行两卡后变窄，按钮组放不下时换行堆叠，禁止按钮被压成竖排文字 */
.pt-upload .gv-up-actions { flex-wrap: wrap; }
.pt-upload .gv-up-actions .pv-btn { flex: 0 0 auto; white-space: nowrap; }
.pt-upload.is-empty .pt-thumbs-count { margin-left: 8px; }
.pt-upload-hint { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--fg-subtle); font-size: 14px; font-weight: 600; text-align: center; }
.pt-upload-hint .ico.big { width: 26px; height: 26px; color: var(--fg-subtle); }
.pt-thumb { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pt-thumb > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pt-thumb-no { position: absolute; left: 4px; bottom: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: rgba(16,19,26,.62); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
.pt-thumb-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: rgba(16,19,26,.62); color: #fff; cursor: pointer; }
.pt-thumb-del:hover { background: var(--danger); }
.pt-thumb-del .ico { width: 12px; height: 12px; }
.pt-thumbs-count { align-self: center; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--fg-subtle); }

/* 卖点 / 统一要求输入框 */
.pt-ta { width: 100%; min-height: 104px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.6; font-family: inherit; }
.pt-ta.small { min-height: 76px; }
.pt-ta::placeholder { color: var(--fg-subtle); }
.pt-ta:focus { border-color: var(--primary); outline: none; }
/* 选填小标签（与 .of-opt-tag 同形） */
.pt-opt-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; vertical-align: 1px; }
/* 三套下拉（平台 9 / 市场 6 / 语言 11）：选项多用「上拉」下拉，不平铺 pill */
.pt-select { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font-size: 13px; color: var(--text); background: var(--surface); cursor: pointer; }
.pt-select:focus { border-color: var(--primary); outline: none; }
/* 中文海报「自定义」输入框：在 .param-row（flex-wrap）内整行换行，贴在下拉正下方 */
.pt-custom-input { flex: 1 1 100%; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font-size: 13px; color: var(--text); background: var(--surface); }
.pt-custom-input:focus { border-color: var(--primary); outline: none; }
.pt-model-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fg-subtle); }
.pt-model-hint.pt-warn { color: #f5483b; font-weight: 600; }
/* 海报类型双卡（电商海报 / 中文海报） */
.pt-mode-capsule { width: 100%; }
.pt-mode-capsule .mode-item { flex: 1; justify-content: center; }
/* 列内文字整体加大一号（+1px 口径）：按钮 / 成本徽标 / 渐变 CTA / 控件尺寸不动 */
.pt-col .card-head h3 { font-size: 15px; }
.pt-col .card-head p { font-size: 14px; padding-left: 0; }
.pt-col .pt-upload-hint { font-size: 14px; }
.pt-col .pt-thumbs-count { font-size: 14px; }
.pt-col .pt-opt-tag { font-size: 12px; }
.pt-col .pt-mode-capsule .mode-item { font-size: 13px; }
.pt-col .param-row { margin: 0 0 16px; }
.pt-col .param-row:last-of-type { margin-bottom: 0; }
.pt-col .gv-up-actions { gap: 8px; }
.pt-col .generate-summary { font-size: 12px; }
.pt-col .generate-tip { font-size: 11px; }
.pt-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 生成 CTA：蓝→紫渐变由全局 .generate-btn 统一覆盖（style.css:5363 段），此处仅确认不反向覆盖 */
.pt-stage #ptBtnGenerate { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.pt-stage #ptBtnGenerate:hover { background-image: var(--grad-cta-hover); }
/* 生成结果专属抽屉空态（相对 .dh-right 绝对定位，覆盖 works 区） */
.pt-stage #ptEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
/* 响应式：窄屏收列，避免三列横向溢出 */
@media (max-width: 1180px) { .pt-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .pt-grid { grid-template-columns: 1fr; } .pt-col { min-height: 0; } }
/* 单行输入（中文海报「主题」） */
.pt-input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; }
.pt-input::placeholder { color: var(--fg-subtle); }
.pt-input:focus { border-color: var(--primary); outline: none; }


/* 上传区：一行两卡（电商＝商品图 | 宣传＝参考图，与风格参考图并排） */
.pt-uploads-row { display: flex; gap: 25px; }
.pt-uploads-row > .card { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 760px) { .pt-uploads-row { flex-direction: column; } }

/* ================= 视频换脸（face-swap） ================= */
/* 2026-10-09 UI 改造：样式逐条拷贝内容替换 .cr-* 段（三列极简 + 抽屉），改 .fs- 前缀隔离。
   步骤条直接用全站标准 .dh-steps；列流光挂全局 .dh-col-beam；抽屉复用全局 .dh-right shell —— 三者均不在此重复。 */
.fs-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
/* 三列网格（列宽 / gap / 总宽 1630 与 .cr-grid 完全一致） */
.fs-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器 */
.fs-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.fs-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .card-step 同形（全站步骤序号统一蓝底） */
.fs-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.fs-col:first-child .fs-col-head { font-size: 18px; }
.fs-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
/* 第三列：预览区占满列体，视频由预览区内部 flex 居中 */
.fs-col[data-fsstep="3"] .fs-col-body { justify-content: stretch; }
/* 第三列视频预览：卡片式区域，实时预览当前已选视频 / 换脸中 / 最新结果（结果列表在专属抽屉） */
.fs-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.fs-live-preview:hover { border-color: #D7D9DE; }
/* ★ 2026-10-09 列3 白框包含标题+注释：.fs-live-card 卡壳内含 card-head + 预览区，预览区去自身边框占满余高 */
.fs-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.fs-live-card .fs-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding-top: 8px; }
.fs-live-card .card-head { flex: 0 0 auto; }
/* ★ 2026-10-09 用户拍板：列3 视频与列1 同款向上对齐（撤销本轮早前的"纵向居中"口径）——
   视频盒子高度跟随视频比例（不再撑满整卡垂直居中），空态用 margin:auto 在余空间居中 */
.fs-live-card .fs-live-preview video { flex: 0 0 auto; height: auto; object-position: 50% 0; }
.fs-live-card .fs-live-empty { margin: auto 0; }
/* ★ 2026-10-09 平铺 + 纵向居中：元素盒撑满预览卡（flex:1 + align-self:stretch），
   画面用 object-fit:contain 等比缩放并显式居中（object-position 50% 50%），深底补边，不再居中悬浮一小块 */
.fs-live-preview video { display: block; flex: 1 1 auto; min-height: 0; align-self: stretch; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #10131A; border-radius: 8px; }
.fs-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.fs-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.fs-live-empty span { font-size: 14px; font-weight: 600; }
.fs-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.fs-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
/* 换脸中遮罩：覆盖第三列预览区显示进度 */
.fs-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.fs-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.fs-live-mask span { font-size: 13.5px; font-weight: 600; }
/* ★ 2026-10-09 预览悬浮操作：左上「智能剪辑」/ 右上「删除」（z-index 2 在遮罩之下，换脸中自动被盖住） */
/* 预览悬浮操作标准组件（视频创作四模块共用：左上「智能剪辑」/ 右上「下载 + 删除」） */
.live-pv-acts { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
/* 右上按钮分组（2026-10-10）：父级 space-between 只把「智能剪辑」和这一组分开，
   组内「下载 + 删除」按 8px 间距并排，与图片页 .img-live 的右上排布同款 */
.live-pv-acts-r { display: flex; align-items: flex-start; gap: 8px; }
.live-pv-act { pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; background: rgba(16, 19, 26, .55); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s, border-color .15s, color .15s; }
.live-pv-act .ico { width: 13px; height: 13px; }
.live-pv-act:hover { background: rgba(16, 19, 26, .8); border-color: rgba(255, 255, 255, .55); }
.live-pv-act.icon-only { padding: 6px; }
.live-pv-act.icon-only:hover { border-color: #FF7A7A; color: #FF9B9B; }
/* 下载图标不是危险操作，hover 用中性白（覆盖上面的红）+ 下箭头下落微动效，与图片页 #imgLiveDl 同口径 */
.live-pv-act.live-pv-act-dl:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }
.live-pv-act.live-pv-act-dl:hover .ico { animation: live-dl-drop .5s ease; }
@keyframes live-dl-drop { 0% { transform: translateY(-2px); } 55% { transform: translateY(2px); } 100% { transform: translateY(0); } }
/* 拖拽上传高亮（与 .cr-upload.drag-over 同款） */
.fs-upload.drag-over { border-color: var(--primary); background: var(--hover-bg); box-shadow: 0 0 0 3px rgba(var(--ring), .22); }
/* 上传框：虚线框 + hover 双流光边框（mask-composite 只透边框，拷贝 .cr-upload） */
.fs-upload { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .16s, background .16s; overflow: hidden; }
.fs-upload:hover { border-color: var(--primary); background: var(--hover-bg); }
.fs-upload::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; border: 1.5px solid transparent; background: linear-gradient(135deg, rgba(var(--dh-beam-ink), .7) 0%, rgba(var(--dh-beam-ink), 0) 50%, rgba(var(--dh-beam-ink), .7) 100%) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .18s; pointer-events: none; }
.fs-upload:hover::before { opacity: 1; }
.fs-upload.uploading { pointer-events: none; opacity: .65; }
.fs-upload-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 12px; color: var(--fg-subtle); font-size: 14px; font-weight: 600; text-align: center; }
.fs-upload-empty .ico.big { width: 26px; height: 26px; color: var(--fg-subtle); }
.fs-upload-empty em { color: var(--fg-subtle); font-size: 12px; font-style: normal; font-weight: 500; }
/* 预览态 */
/* ★ 2026-10-09 人脸图预览区高度固定 490px（不随图片比例变化）：容器写死高，img 撑满 + contain 居中。
   口径演进 240(max) → 560(max) → 510 → 490 → 定稿为固定高。
   ★ 固定高只能挂 #fsFacePreview（列2 人脸图专属容器）——共享类 .fs-upload-preview 也是列1 视频预览的容器，
     在上面写死高会把视频比例压死，视频仍走其自身 height:auto。 */
.fs-upload-preview { position: relative; }
.fs-upload img { display: block; width: 100%; max-height: 490px; object-fit: contain; object-position: 50% 50%; background: #10131A; }
#fsFacePreview { height: 490px; }
#fsFacePreview img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #10131A; }
/* 视频预览平铺容器：width:100% 撑满列宽，height:auto 按比例完整显示（与 .cr-upload-preview video 同款） */
.fs-upload-preview video { display: block; width: 100%; height: auto; background: #10131A; }
.fs-preview-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: rgba(16,19,26,.62); color:#fff; cursor: pointer; }
.fs-preview-del:hover { background: var(--danger); }
.fs-preview-del .ico { width: 13px; height: 13px; }
/* 列内文字整体 +1px（scoped 到 .fs-col，对齐 .cr-col 口径；按钮 / cost-badge 不动） */
.fs-col .card-head h3 { font-size: 15px; }
.fs-col .card-head p { font-size: 13px; padding-left: 0; }
.fs-col .fs-upload-empty { font-size: 15px; }
.fs-col .fs-upload-empty em { font-size: 13px; }
.fs-col .fs-agree { font-size: 14px; }
.fs-col .fs-compliance-text { font-size: 14px; }
/* 第二轮 +1px（2026-10-09 用户圈选：三列副标题/上传区提示/本次换脸摘要/按钮下方提示再加大一号，对齐 .cr-col / .vg-col 口径） */
.fs-col .card-head p { font-size: 14px; }
.fs-col .fs-upload-empty em { font-size: 14px; }
.fs-col .generate-summary { font-size: 12px; }
.fs-col .generate-tip { font-size: 11px; }
/* 提交行 */
.fs-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 生成 CTA：蓝→紫渐变（对齐 .cr-stage #crBtnGenerate） */
.fs-stage #fsRun { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.fs-stage #fsRun:hover { background-image: var(--grad-cta-hover); }
/* 生成结果抽屉空态（相对 .dh-right 绝对定位，同 .cr-stage #crEmptyState） */
.fs-stage #fsEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
/* 响应式：窄屏收列（同 .cr-grid） */
@media (max-width: 1180px) { .fs-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .fs-grid { grid-template-columns: 1fr; } .fs-col { min-height: 0; } }

/* ================= 人脸打码（face-blur） ================= */
/* 2026-10-09 UI 改造：对齐视频换脸 .fs-* 段（三列极简 + 抽屉 + 标准步骤条 / 列流光 / CTA 渐变），
   仅改 .fb- 前缀隔离；第三列视频预览整套搬自视频换脸。步骤条 / 列流光 / 抽屉复用全站标准组件，不重写。 */
.fb-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
/* 三列网格（列宽 / gap / 总宽 1630 与 .fs-grid / .cr-grid 完全一致） */
.fb-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器 */
.fb-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.fb-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .card-step 同形（全站步骤序号统一蓝底） */
.fb-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.fb-col:first-child .fb-col-head { font-size: 18px; }
.fb-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
/* 2026-10-09：列体内卡片间距由 gap(25) 单一控制，归零全局 .card{margin-bottom:10px} 的隐藏叠加，杜绝非预期 35/60px 间距 */
.fb-col-body .card { margin-bottom: 0; }
/* 第三列：预览区占满列体，视频由预览区内部 flex 居中 */
.fb-col[data-fbstep="3"] .fb-col-body { justify-content: stretch; }
/* 第三列视频预览：卡片式区域，实时预览当前已选视频 / 打码中 / 最新结果（结果列表在专属抽屉） */
.fb-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.fb-live-preview:hover { border-color: #D7D9DE; }
/* 列3 白框包含标题+注释：.fb-live-card 卡壳内含 card-head + 预览区，预览区去自身边框占满余高 */
.fb-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.fb-live-card .fb-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding-top: 8px; }
.fb-live-card .card-head { flex: 0 0 auto; }
/* 列3 视频与列1 同款向上对齐：视频盒子高度跟随视频比例，空态用 margin:auto 在余空间居中 */
.fb-live-card .fb-live-preview video { flex: 0 0 auto; height: auto; object-position: 50% 0; }
.fb-live-card .fb-live-empty { margin: auto 0; }
/* 预览区平铺 + 纵向居中：元素盒撑满预览卡，画面用 object-fit:contain 等比缩放并显式居中，深底补边 */
.fb-live-preview video { display: block; flex: 1 1 auto; min-height: 0; align-self: stretch; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #10131A; border-radius: 8px; }
.fb-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; }
.fb-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.fb-live-empty span { font-size: 14px; font-weight: 600; }
.fb-live-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.fb-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
/* 打码中遮罩：覆盖第三列预览区显示进度 */
.fb-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.fb-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.fb-live-mask span { font-size: 13.5px; font-weight: 600; }
/* 拖拽上传高亮（与 .fs-upload.drag-over 同款） */
.fb-upload.drag-over { border-color: var(--primary); background: var(--hover-bg); box-shadow: 0 0 0 3px rgba(var(--ring), .22); }
/* 上传框：虚线框 + hover 双流光边框（mask-composite 只透边框，拷贝 .fs-upload） */
.fb-upload { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .16s, background .16s; overflow: hidden; }
.fb-upload:hover { border-color: var(--primary); background: var(--hover-bg); }
.fb-upload::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; border: 1.5px solid transparent; background: linear-gradient(135deg, rgba(var(--dh-beam-ink), .7) 0%, rgba(var(--dh-beam-ink), 0) 50%, rgba(var(--dh-beam-ink), .7) 100%) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .18s; pointer-events: none; }
.fb-upload:hover::before { opacity: 1; }
.fb-upload.uploading { pointer-events: none; opacity: .65; }
.fb-upload-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 12px; color: var(--fg-subtle); font-size: 14px; font-weight: 600; text-align: center; }
.fb-upload-empty .ico.big { width: 26px; height: 26px; color: var(--fg-subtle); }
.fb-upload-empty em { color: var(--fg-subtle); font-size: 12px; font-style: normal; font-weight: 500; }
/* 预览态 */
.fb-upload-preview { position: relative; }
.fb-upload-preview video { display: block; width: 100%; height: auto; background: #10131A; }
.fb-preview-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: rgba(16,19,26,.62); color:#fff; cursor: pointer; }
.fb-preview-del:hover { background: var(--danger); }
.fb-preview-del .ico { width: 13px; height: 13px; }
/* 列内文字整体 +1px（scoped 到 .fb-col，对齐 .cr-col / .fs-col 口径；按钮 / cost-badge 不动） */
.fb-col .card-head h3 { font-size: 15px; }
.fb-col .card-head p { font-size: 13px; padding-left: 0; }
.fb-col .fb-upload-empty { font-size: 15px; }
.fb-col .fb-upload-empty em { font-size: 13px; }
/* 第二轮 +1px（2026-10-09 用户圈选：三列副标题/本次打码摘要/按钮下方提示再加大一号，对齐 .cr-col / .fs-col / .vg-col 口径） */
.fb-col .card-head p { font-size: 14px; }
.fb-col .generate-summary { font-size: 12px; }
.fb-col .generate-tip { font-size: 11px; }
/* 2026-10-09：分段选择器「标题字 / 注释字」再 +1px（打码方式 / 打码强度、选项说明），对齐列内 +1px 口径 */
.fb-col .se-sub-label { font-size: 14px; }
.fb-col .se-seg-item span { font-size: 12px; }
/* 2026-10-09：打码方式 / 打码强度 上方统一插入 25px 间距（移除原内联 12px，scoped 到列内） */
.fb-col .se-sub { margin-top: 25px; }
/* 2026-10-09：打码强度上方间距对齐打码方式——抵消 .card-body 顶 padding(7px) 带来的 7px 差，使两块标签上方均为 32px */
.fb-col .se-sub + .se-sub { margin-top: 32px; }
/* 2026-10-09：打码方式（马赛克 / 高斯模糊）选择框高度 ×2 + 文字纵向/横向居中（仅作用列2 模式段，不动强度段） */
.fb-col #fbModeSeg .se-seg-item {
  min-height: 120px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 2026-10-09：打码强度（低 / 中 / 高）选择框文字横向居中（仅作用列2 强度段，不动模式段/共用组件） */
.fb-col #fbStrengthSeg .se-seg-item {
  align-items: center;
  text-align: center;
}
/* 提交行 */
.fb-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 2026-10-09：按钮区（提交卡）上方插入 25px —— 列体 gap 已为 25px，叠加此 inset 共 50px（全局 .card margin-bottom 已在 .fb-col-body .card 处归零，避免非预期 60px） */
.fb-col .fb-submit-card { margin-top: 25px; }
/* 生成 CTA：蓝→紫渐变（对齐 .fs-stage #fsRun / .cr-stage #crBtnGenerate） */
.fb-stage #fbRun { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.fb-stage #fbRun:hover { background-image: var(--grad-cta-hover); }
/* 生成结果抽屉空态（相对 .dh-right 绝对定位，同 .fs-stage #fsEmptyState / .cr-stage #crEmptyState） */
.fb-stage #fbEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
/* 响应式：窄屏收列（同 .fs-grid / .cr-grid） */
@media (max-width: 1180px) { .fb-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .fb-grid { grid-template-columns: 1fr; } .fb-col { min-height: 0; } }

/* ================= 视频生成（合并页：Grok / VEO / 即梦 / 万相 四模型分类共用单基座，
   标准三列 + 模型下拉 + 列3 预览 + 结果抽屉；样式与 .cr-stage / .fs-stage / .fb-stage 同源同款） ================= */
.vg-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; scrollbar-gutter: stable; }
/* ★ 2026-10-09 步骤条防跳：文生视频列①较矮不触发滚动条，图生/参考生会触发 →
   居中的 .dh-steps 内容随滚动条出现整体横移半根滚动条宽（实测 5px）＝用户看到的「跳动」。
   scrollbar-gutter: stable 恒预留滚动条槽位，三种模式内容宽度一致，步骤条纹丝不动（探针 _vg_stepbar_*）。 */
/* 三列网格（列宽 / gap / 总宽 1630 与 .fs-grid / .cr-grid / .fb-grid 完全一致） */
.vg-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器（列流光直接挂全局 .dh-col-beam；此处只管外观，与 .cr-col / .fs-col / .fb-col 同款） */
.vg-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.vg-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
.vg-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.vg-col:first-child .vg-col-head { font-size: 18px; }
.vg-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
/* 列体内卡片间距由 gap(25) 单一控制，归零全局 .card{margin-bottom:10px} 的隐藏叠加（对齐 .fb-col-body .card） */
.vg-col-body .card { margin-bottom: 0; }
/* 第三列：预览区占满列体 */
.vg-col[data-vgstep="3"] .vg-col-body { justify-content: stretch; }
/* 首列 overflow:visible —— 容纳卡片内浮层逃逸（列① 视频描述卡的「范例」下拉 .exp-drop 宽 340px，
   在 ≤340px 窄列上会横向溢出）。列流光边框为 inset:0、特异性低于本规则，不受影响；
   其余列保持 .dh-col-beam / .vg-col 的 overflow:hidden，裁剪流光外溢。
   注：模型下拉已随卡片移入列②，宽度自带 100% 上限（见下 .qc-model-panel），不依赖列级放开。 */
.vg-grid > .vg-col:first-child { overflow: visible; }
/* 列内文字整体 +1px（对齐 .cr-col / .fs-col / .fb-col 口径；按钮 / cost-badge 不动）
   2026-10-09 用户要求：卡头副标题等辅助说明文字再加大一号（13→14px） */
.vg-col .card-head h3 { font-size: 15px; }
.vg-col .card-head p { font-size: 14px; padding-left: 0; }
/* 同批 +1px 的辅助说明（均为多页共用类，必须 scoped 在 .vg-col，不波及换脸/打码/去水印等页）：
   .img-hint 上传提示（最多上传 N 张…）11→12 / .link-btn 使用图片链接 11→12 /
   .settings-summary 当前配置行 10→11 / .generate-summary 本次生成行 11→12 / .generate-tip 底部提示 10→11 */
.vg-col .img-hint { font-size: 12px; }
.vg-col .upload-actions .link-btn { font-size: 12px; }
.vg-col .settings-summary { font-size: 11px; }
.vg-col .generate-summary { font-size: 12px; }
.vg-col .generate-tip { font-size: 11px; }

/* 生成模式三枚胶囊（文生 / 图生 / 参考生，合并页固定常显）：文字不换行，窄列下不折行 */
.vg-stage .mode-capsule .mode-item { white-space: nowrap; }
/* 「参考生视频」常显但受模型能力约束：当前模型不支持时灰显为禁用态（仍可点击 → 提示「请更换模型」）。
   加 .vg-stage 限定，避免波及内容替换（.cr-stage）/ AI 绘画（.imageStage）复用 .mode-item 的胶囊 */
.vg-stage .mode-item.is-disabled,
.vg-stage .mode-item.is-disabled:hover { color: var(--fg-subtle); opacity: .5; cursor: not-allowed; }
.vg-stage .mode-item.is-disabled .ico { opacity: .85; }

/* 「已保存」提示（2026-10-09 补持久化：输入变更防抖落盘后于描述框右下角闪现） */
.vg-saved { position: absolute; right: 10px; bottom: 8px; z-index: 5; font-size: 10px; line-height: 1; color: var(--fg-subtle); opacity: 0; transition: opacity .3s; pointer-events: none; }
.vg-saved.show { opacity: 1; }

/* 视频描述输入框（2026-10-09 用户要求）：字号「加大一号」13px→15px（与电商/简版页文本域一致），
   行高同步提到 1.85（22.75px→27.75px）保证字大行距比例不变；高度「扩大一倍」138px→276px 并作为默认高度。
   限定 .vg-stage 只作用于视频生成页（#prompt 专属 id，AI 绘画 #imagePrompt 不受影响）；
   resize:vertical 沿用基类，用户仍可手动拉高 */
.vg-stage textarea.prompt-textarea#prompt { font-size: 15px; line-height: 1.85; min-height: 276px; }
/* 2026-10-09 用户要求：图生视频 / 参考生视频（两者上半区已有上传素材卡片）描述框默认高度降低 20%
   —— 276 × 0.8 ≈ 221px；文生视频（text2video）保持 276px 不变。
   data-mode 由 video-gen.js setMode() 打在 .vg-stage 上；resize:vertical 仍在，用户可自行拉高 */
.vg-stage[data-mode="image2video"] textarea.prompt-textarea#prompt,
.vg-stage[data-mode="reference2video"] textarea.prompt-textarea#prompt { min-height: 221px; }

/* 选择模型（2026-10-09 起由列①移入列②顶部）：复用首页 .qc-model / .qm-*；宽度拉满、箭头右推 */
/* ★ 下拉面板须逃逸卡片向外展开：全局 .card{overflow:hidden}（line 297）会把绝对定位的 .qc-model-panel
   整个裁掉（面板 top 起点在卡片底边之下 → 完全不可见，表现为「点击下拉无反应」）。
   故本卡片单独放开 overflow 并抬高层级，避免被下方「生成设置」卡片盖住。 */
.vg-col .vg-model-card, .vr-stage .vg-model-card { overflow: visible; position: relative; z-index: 30; }
.vg-model-card .card-body { padding-top: 6px; padding-bottom: 6px; }
.vg-model-btn { width: 100%; justify-content: flex-start; cursor: pointer; padding: 13.5px 12px; font-size: 13.5px; background: transparent; border: 1px solid var(--border-strong, var(--border)); }
.vg-model-btn .qc-arrow { margin-left: auto; }
/* 合并页模型名 + 能力标签较长，加宽下拉面板并保证可滚动；
   max-width:100%（= 按钮宽）确保任何列宽下面板都不会横向超出列体被 overflow:hidden 裁掉。
   ★ 2026-10-30：必须排除 .is-mk（两列新面板）。这条与 .qc-model-panel.is-mk 特异性相同、
   位置在后，会盖掉让位规则：max-height:320 把 375 高的面板裁掉底部（最后一家厂商只露半截），
   min-width:100% 让透明外壳撑到整行 1280，挂在它上面的双流光描边就跑到面板外去。
   旧单列面板仍需本条（它靠 320 高滚动），故用 :not(.is-mk) 精确排除。 */
.vg-model-btn .qc-model-panel:not(.is-mk) { min-width: 100%; width: 320px; max-width: 100%; max-height: 320px; overflow: hidden; }
/* 兜底：即使将来又有人在后面加规则，这条 (0,3,0) 也压得住两列面板的容器尺寸 */
.vg-model-btn .qc-model-panel.is-mk {
  min-width: 0; width: auto; max-width: none; max-height: none;
  overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none;
}
/* ★ 下拉面板降噪重设计（2026-10-09 用户反馈「太杂、蓝色字不好看」；scoped 到视频生成页，不动首页/对话/画布）：
   ① 能力标签去胶囊化——蓝底胶囊改为灰色纯文字、条目间用 · 分隔，一行读完不花；
   ② 悬停/选中改中性 soft 底（不再整行蓝 tint），主题色只落在选中项模型名 + 对勾上；
   ③ 条目内边距加大、圆角统一，标题字距微调。 */
.vg-model-btn .qc-model-panel { padding: 0; border-radius: 14px; }
/* 滚动层：内容超出 max-height(320px) 时内部滚动；内边距移到滚动层内，
   确保最后一项滚到底也有 8px 呼吸空间、不被面板边界裁切（2026-10-30 修复「最后一个模型显示不全」） */
.vg-model-btn .qc-model-panel > .qm-scroll {
  max-height: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  box-sizing: border-box;
}
.vg-model-btn .qm-head { padding: 4px 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.vg-model-btn .qm-item { padding: 10px 12px; border-radius: 10px; }
.vg-model-btn .qm-item + .qm-item { margin-top: 2px; }
.vg-model-btn .qm-item:hover { background: var(--soft); }
.vg-model-btn .qm-item.active { background: var(--soft); color: var(--text); }
.vg-model-btn .qm-item.active .qm-label { color: var(--primary); }
.vg-model-btn .qm-label { font-size: 14px; font-weight: 600; gap: 8px; }
.vg-model-btn .qm-label .ico { width: 15px; height: 15px; }
.vg-model-btn .qm-caps { gap: 0; margin-top: 1px; }
.vg-model-btn .qm-caps .cap {
  background: transparent; color: var(--fg-subtle); padding: 0;
  font-size: 11px; line-height: 1.5; border-radius: 0;
}
.vg-model-btn .qm-caps .cap + .cap::before { content: '·'; margin: 0 4px; opacity: .55; }
/* 2026-10-09 用户要求：能力关键词与模型名同行、右对齐；模型名字号 +1px（13→14，见上）。
   万相（5 个关键词）在 320px 面板放不下：名字禁止换行，放不下时关键词整行落到第二行仍右对齐（其余模型均单行） */
.vg-model-btn .qm-item-main { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.vg-model-btn .qm-label { white-space: nowrap; flex-shrink: 0; }
.vg-model-btn .qm-caps { margin-top: 0; margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; min-width: 0; }
.vg-model-btn .qm-caps .cap { font-size: 10.5px; }

/* 生成设置卡（settingsFields）：参数行之间、卡头副标题到首行均留 20px 空白
   （scoped，只影响视频页列②，不动全局 .param-row；末行贴底不额外加距） */
#settingsFields .param-row { margin: 20px 0; }
#settingsFields .param-row:first-child { margin-top: 0; }
#settingsFields .param-row:last-of-type { margin-bottom: 0; }

/* 第三列视频预览（实时预览当前参考 / 生成中 / 选中结果；结果列表已迁入专属抽屉） */
.vg-live-card { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.vg-live-card .card-head { flex: 0 0 auto; }
.vg-live-preview { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px; overflow: hidden; transition: border-color .15s; }
.vg-live-preview:hover { border-color: #D7D9DE; }
.vg-live-card .vg-live-preview { border: 0; border-radius: 0; justify-content: flex-start; padding-top: 8px; }
/* 预览视频：铺满列宽、纵向顶部对齐（与列1 同款），空态用 margin:auto 在余空间居中 */
.vg-live-preview video { display: block; flex: 1 1 auto; min-height: 0; align-self: stretch; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #10131A; border-radius: 8px; }
.vg-live-card .vg-live-preview video { flex: 0 0 auto; height: auto; object-position: 50% 0; }
.vg-live-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; margin: auto 0; }
.vg-live-empty .ico.big { width: 30px; height: 30px; color: var(--fg-subtle); }
.vg-live-empty span { font-size: 15px; font-weight: 600; }
.vg-live-empty em { font-size: 13px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
.vg-live-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; background: linear-gradient(0deg, var(--card), transparent); }
/* 生成中遮罩：覆盖第三列预览区显示进度（与抽屉卡片进度同源） */
.vg-live-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .62); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.vg-live-mask .ico { width: 30px; height: 30px; color: var(--primary); animation: spin 1s linear infinite; }
.vg-live-mask span { font-size: 13.5px; font-weight: 600; }

/* 列2 提交卡（生成区） */
.vg-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
.vg-col .vg-submit-card { margin-top: 25px; }
/* 生成 CTA：蓝→紫渐变（对齐 .fs-stage #fsRun / .cr-stage #crBtnGenerate / .fb-stage #fbRun） */
.vg-stage #btnGenerate { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.vg-stage #btnGenerate:hover { background-image: var(--grad-cta-hover); }

/* 生成结果抽屉空态（相对 .dh-right 绝对定位，铺满抽屉工作区；同 .fs-stage #fsEmptyState / .cr-stage #crEmptyState） */
.vg-stage #emptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
/* 响应式：窄屏收列（同 .fs-grid / .cr-grid / .fb-grid） */
@media (max-width: 1180px) { .vg-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .vg-grid { grid-template-columns: 1fr; } .vg-col { min-height: 0; } }

/* ================= 电商套图 ================= */
.ecom-stage { padding: 18px 22px 36px; align-items: flex-start; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ecom-wrap { display: flex; gap: 18px; align-items: flex-start; width: 100%; }
.ecom-col-cfg { width: 360px; flex: 0 0 360px; }
.ecom-col-params { width: 360px; flex: 0 0 360px; }
.ecom-col-briefs { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1280px) { .ecom-col-cfg, .ecom-col-params { width: 320px; flex: 0 0 320px; } .ecom-col-results { width: 280px; flex: 0 0 280px; } }
@media (max-width: 1080px) { .ecom-wrap { flex-direction: column; } .ecom-col-cfg, .ecom-col-params, .ecom-col-results { width: 100%; flex: 1 1 auto; } }
.ecom-uploader { margin-bottom: 8px; }
.ecom-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
/* ★ 上传区改版（2026-09-20，用户拍板）：7 个角色分框太占位置 → 单个大上传框 + 标签下拉。
   流程：下拉选标签 → 点击/拖拽上传即打该标签；缩略图下方带标签下拉可随时改。 */
.ecom-upload-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ecom-upload-label { font-size: 12px; color: #374151; font-weight: 500; white-space: nowrap; }
.ecom-role-picker { max-width: 200px; font-size: 12px; }
.ecom-upload-quota { margin-left: auto; font-size: 11px; color: var(--fg-subtle); }
.ecom-upload-zone { border: 1.5px dashed #c7ccd4; border-radius: 10px; background: var(--surface-2); padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.ecom-upload-zone:hover { border-color: var(--primary); background: #f3f6ff; }
.ecom-upload-zone:hover .ecom-upload-plus { color: var(--primary); }
.ecom-upload-zone.ecom-drag-over { border-color: var(--primary); background: var(--primary-light); box-shadow: inset 0 0 0 2px var(--primary); }
/* 2026-10-23 用户要求：缺主图提醒态不再用琥珀黄，与默认态同色（#c7ccd4）——全站上传框虚线统一灰色系。
   is-missing 类仍由 ecom.js 切换（保留语义），只是不再变色；hover/drag 的 primary 高亮不受影响。 */
.ecom-upload-zone.is-missing { border-color: #c7ccd4; background: var(--surface-2); }
.ecom-upload-plus { font-size: 22px; line-height: 1; color: var(--fg-subtle); }
.ecom-upload-text { font-size: 13px; color: #374151; }
.ecom-upload-sub { font-size: 11px; color: var(--fg-subtle); }
.ecom-thumb-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* ★ 缩略图挪进上传框（2026-09-25）：有图时隐藏大上传图标与说明小字，框内直接展示图片（与探店 / 带货视频一致） */
.ecom-upload-zone.has-imgs .ecom-upload-plus,
.ecom-upload-zone.has-imgs .ecom-upload-text,
.ecom-upload-zone.has-imgs .ecom-upload-sub { display: none; }
.ecom-upload-zone.has-imgs { align-items: stretch; }
.ecom-ref-summary { font-size: 12px; color: var(--fg-subtle); margin-bottom: 8px; min-height: 16px; line-height: 1.5; }
.ecom-ref-summary .ecom-warn { color: #c2410c; }
.ecom-thumb-wrap { position: relative; width: 72px; border-radius: 8px; overflow: visible; border: 1px solid #e5e7eb; background: var(--surface); }
.ecom-thumb-wrap img { width: 100%; height: 72px; object-fit: cover; display: block; border-radius: 7px 7px 0 0; }
.ecom-thumb-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color:#fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ecom-thumb-role { display: block; width: 100%; border: none; border-top: 1px solid #e5e7eb; border-radius: 0 0 7px 7px; font-size: 11px; color: #374151; background: var(--surface); padding: 3px 2px; cursor: pointer; }
.ecom-thumb-role:hover { background: #f3f6ff; }
.ecom-add { display: flex; align-items: center; gap: 6px; justify-content: center; height: 72px; border: 1.5px dashed #c7ccd4; border-radius: 8px; color: var(--fg-subtle); font-size: 13px; cursor: pointer; background: var(--surface-2); }
.ecom-add:hover { border-color: var(--primary); color: var(--primary); }
.ecom-add .ico { width: 18px; height: 18px; }
.ecom-tip { margin-top: 10px; font-size: 15px; color: var(--primary); min-height: 16px; }
.ecom-hint { margin-bottom: 10px; font-size: 12px; color: var(--fg-subtle); line-height: 1.55; padding: 8px 10px; background: #f3f6ff; border-radius: 8px; }
/* 本地留存：已保存提示 + 清空重来 */
.ecom-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ecom-saved { font-size: 12px; color: #9aa0a8; }
.ecom-saved:not(:empty)::before { content: '· '; }
.ecom-reset-btn { flex: 0 0 auto; border: none; background: none; padding: 2px 2px; font-size: 12px; color: #9aa0a8; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.ecom-reset-btn:hover { color: var(--danger); }
.ecom-empty { color: #9aa0a8; font-size: 13px; padding: 18px 4px; text-align: center; }
.param-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.param-label { font-size: 13px; color: var(--fg-subtle); min-width: 38px; }
.ecom-select, .ecom-count { height: 32px; border: 1px solid #e5e7eb; border-radius: 7px; padding: 0 8px; font-size: 13px; color: #374151; background: var(--surface); }
.ecom-count { width: 64px; }
.ecom-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--surface); }
.ecom-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* ★ 2026-09-20：图卡徽标与四步标题的圆形数字徽章（.card-step）区分——
   改为圆角方块、浅蓝底、版式专属线条图标；序号弱化为右侧小灰字 */
/* ★ 第三步图卡序号（2026-09-20 二改）：圆圈数字 + 浅色轮换底色（内联指定），不用蓝——主步骤序号已是蓝底 */
.ecom-card-idx { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; }
.ecom-card-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1f2937; }
.ecom-card-tag { flex: 0 0 auto; font-size: 11.5px; color: var(--fg-subtle); background: var(--surface-2); border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
/* 图需三栏：图片主题 / 画面要求 / 文案需求（对齐 ClawHouse 布局） */
/* ★ 2026-09-20 三轮定稿（用户拍板）：第 4 步「生成结果」是**单独一列（独立卡片）**，
   与第 2/3 步之间一样断开（.ecom-wrap 里第 4 个 .ecom-col），不再是第 3 步卡片内部的右半栏。
   第 3 步卡（#ecomCards）= 锚点框 + 图需卡；第 4 步卡（#ecomResults）= 一键生成块 + 每张的生成/重规划/消耗/已出图。
   表头复用 .card-head / .card-step，与第 3 步完全同款。 */
.ecom-col-results { width: 300px; flex: 0 0 300px; }
/* ★ 锚点框在第 3 步卡内、与图需卡同宽对齐 */
.ecom-briefs-anchor { margin-bottom: 12px; }
/* 生成块顶置第 4 步卡内：去掉原「卡底分隔条」形态 */
.ecom-col-results .ecom-genall { padding: 2px 0 4px; border-top: none; }
/* 出图模型 + 分辨率同行（2026-09-20 用户拍板；画质已写死 hd 去掉下拉）：模型占满剩余宽，分辨率定宽 */
.ecom-col-results .ecom-model-row { flex-wrap: nowrap; }
.ecom-col-results .ecom-model-row #ecomModel { flex: 1 1 auto; min-width: 0; }
.ecom-col-results .ecom-model-row #ecomRes { flex: 0 0 74px; width: 74px; }
.ecom-card-result { border: 1px dashed #e3e8f0; border-radius: 8px; background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 12px; }
.ecom-card-result:last-child { margin-bottom: 0; }
.ecom-card-result .ecom-card-actions { margin-top: 0; }
.ecom-card-result .ecom-card-imgs { margin-top: 0; }
.ecom-card-grid { display: flex; flex-direction: column; gap: 25px; margin-top: 4px; align-items: stretch; }
.ecom-wrap .ecom-card-grid .ecom-field { width: 100%; max-width: none; min-width: 0; }
.ecom-wrap .ecom-card-grid .ecom-field-ctrl { width: 100%; max-width: none; box-sizing: border-box; }
.ecom-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ecom-field > label { font-size: 12px; font-weight: 600; color: var(--fg-subtle); }
.ecom-field-ctrl { width: 100%; box-sizing: border-box; border: 1px solid #eef0f3; border-radius: 7px; padding: 7px 9px; font-size: 15px; color: #374151; font-family: inherit; line-height: 1.5; outline: none; background: var(--surface); }
.ecom-field-ctrl:focus { border-color: var(--primary); }
.ecom-field textarea.ecom-field-ctrl { resize: vertical; min-height: 64px; }
/* ★ 2026-09-20（用户拍板）：直接取消滚动条——框高已自适应内容，内容不会被裁切看不见 */
.ecom-field textarea.ecom-field-ctrl { scrollbar-width: none; -ms-overflow-style: none; overflow-y: auto; }
.ecom-field textarea.ecom-field-ctrl::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ecom-card-prompt { margin-top: 8px; min-height: 60px; background: var(--surface-2); resize: vertical; }
.ecom-prompt-wrap { margin-top: 8px; border: 1px dashed #e3e8f0; border-radius: 7px; background: var(--surface-2); padding: 4px 8px; }
.ecom-prompt-wrap > summary { cursor: pointer; font-size: 12px; color: var(--primary); user-select: none; padding: 2px 0; }
.ecom-prompt-preview { margin-top: 6px; font-size: 12px; line-height: 1.6; color: #4b5563; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 980px) {
  .ecom-card-grid { flex-direction: column; }
}
.ecom-card-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ecom-card-cost { font-size: 12px; color: var(--danger); font-weight: 600; }
.ecom-card-status { font-size: 12px; color: var(--fg-subtle); }
/* ★ 2026-09-20（用户拍板）：生成结果图保持约 2/3（66.7%）宽并居中，原始比例展示；
   多张图纵向堆叠，点击图在新标签页打开原图；序号在图片左侧顶部、下载按钮在图片右侧底部，均不遮挡图片 */
.ecom-card-imgs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: center; }
.ecom-img-item { display: flex; align-items: stretch; justify-content: center; gap: 8px; width: 100%; }
.ecom-thumb { flex: 0 1 66.7%; min-width: 0; height: auto; display: block; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; background: var(--surface); }
.ecom-thumb img { width: 100%; height: auto; display: block; }
/* 序号徽标：图片左侧、顶部对齐，不遮挡图片；颜色与图需预览列一致（底色/文字色由 JS 内联指定） */
.ecom-img-no { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; margin-top: 4px; align-self: flex-start; }
.ecom-img-dl {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; align-self: flex-end; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: var(--primary);
  border: 1px solid #E5E7EB; background: var(--surface); box-shadow: 0 1px 3px rgba(31,35,41,.12); transition: all .15s;
}
.ecom-img-dl:hover { background: var(--primary); color:#fff; }
.ecom-img-dl:active { background: #1F5FD7; }
.ecom-genall { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-top: 1px dashed #e5e7eb; }
/* ★ 2026-09-20（用户拍板）：「生成全套」不再占满整行，收窄靠左；右侧「下载全套」 */
.ecom-genall-row { display: flex; gap: 10px; align-items: stretch; }
/* 2026-09-20（用户拍板）：窄列里「生成全套」按钮不换行，字号与徽标收小 */
.ecom-genall-row #ecomBtnGenAll { width: auto; flex: 0 1 auto; padding-left: 12px; padding-right: 12px; font-size: 13.5px; white-space: nowrap; }
.ecom-genall-row #ecomBtnGenAll .cost-badge { margin-left: 6px; font-size: 10.5px; padding: 2px 7px; white-space: nowrap; }
.ecom-genall-row .ecom-btn-dlall { margin-left: auto; align-self: stretch; display: inline-flex; align-items: center; white-space: nowrap; }
.ecom-model-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--fg-subtle); }
.ecom-model-row label { min-width: auto; font-size: 15px; color: #fff; }
.ecom-model-row .ecom-select { font-size: 14.5px; color: #fff; }


/* ============================================================
   用户中心弹层（点击右上角用户名胶囊打开）— 2026-09-21
   复用既有 .text-input / .ghost-btn / .mini-btn / 色彩变量
   ============================================================ */
.acct-chip.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.acct-chip.clickable:hover { box-shadow: 0 2px 10px rgba(59, 130, 246, .25); transform: translateY(-1px); }

.uc-mask { position: fixed; inset: 0; z-index: 2100; display: none; align-items: flex-start; justify-content: center; background: rgba(15, 23, 42, .45); padding: 48px 16px; overflow-y: auto; }
/* 积分明细/我的订单/充值子弹窗（2026-10-16）：叠在用户中心之上打开，关闭后回到用户中心。
   三者与 ucMask 同为 .uc-mask（2100）且 DOM 顺序在 ucMask 之前（会绘在下层），必须显式 +10 置顶 */
#logsMask, #ordersMask, #creditMask { z-index: 2110; }
.uc-panel { position: relative; width: 560px; max-width: 100%; background: var(--card, var(--surface)); border-radius: 16px; padding: 24px 26px 18px; box-shadow: 0 18px 50px rgba(15, 23, 42, .22); display: flex; flex-direction: column; gap: 16px; }
.uc-close { position: absolute; top: 14px; right: 18px; font-size: 22px; line-height: 1; color: var(--text-tertiary, var(--fg-subtle)); cursor: pointer; user-select: none; }
.uc-close:hover { color: var(--text, #111827); }

.uc-head { display: flex; align-items: center; gap: 14px; }
.uc-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--primary, #3b82f6), #7c3aed); color:#fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.uc-uname { font-size: 17px; font-weight: 700; color: var(--text, #111827); }
.uc-uid { margin-top: 2px; color: var(--muted, var(--fg-subtle)); font-size: 12px; }
.uc-tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.uc-tags:empty { margin: 0; }
.uc-tag { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.uc-tag.red { background: #FEE2E2; color: #DC2626; }
.uc-tag.blue { background: #DBEAFE; color: #2563EB; }
.uc-tag.green { background: #E8F6EF; color: #059669; }
.uc-tag.gold { background: #FEF3C7; color: #B45309; }

.uc-stats { display: grid; grid-template-columns: 1fr; gap: 10px; }
.uc-stat { background: var(--soft, #f6f7f9); border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-md, 10px); padding: 12px 14px; text-align: center; }
.uc-stat b { display: block; font-size: 18px; color: var(--primary, #3b82f6); font-weight: 700; }
.uc-stat span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted, var(--fg-subtle)); }

.uc-kvs { display: flex; flex-direction: column; }
.uc-kv { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border-subtle, #f0f1f3); font-size: 13px; }
.uc-kv:last-child { border-bottom: none; }
.uc-kv > span:first-child { width: 84px; flex: none; color: var(--muted, var(--fg-subtle)); }
.uc-kv b { color: var(--text, #111827); font-weight: 600; }
.uc-kv b.uc-code { letter-spacing: 1px; }
.uc-kv b.uc-promo-link { letter-spacing: 0; word-break: break-all; line-height: 1.4; min-width: 0; }
.uc-copy { margin-left: auto; color: var(--primary, #3b82f6); font-size: 12px; cursor: pointer; user-select: none; }
.uc-copy:hover { text-decoration: underline; }

.uc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uc-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-md, 10px); font-size: 13px; color: var(--text, #111827); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.uc-link:hover { border-color: var(--primary, #3b82f6); background: var(--primary-light, #eff6ff); }
.uc-link .ico { width: 15px; height: 15px; color: var(--primary, #3b82f6); flex: none; }
.uc-link em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-tertiary, var(--fg-subtle)); }

/* 会员 VIP 卡 / OEM 卡（2026-10-15 · 用户中心）：替代原「购买会员」入口，点击进权益弹窗。
   卡片质感沿用 portal 进货订单 .pkg-card（黑金=会员 / 藏蓝=OEM，身份证比例 85.6:54），两卡并排 */
.uc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uc-card {
  position: relative; aspect-ratio: 85.6 / 54; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; padding: 12px 14px 10px;
  border-radius: 12px; color: #F5F7FA; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #23262e 0%, #3a3325 55%, #4a3f28 100%);
  box-shadow: 0 8px 20px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.uc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.36), inset 0 1px 0 rgba(255,255,255,.14); }
.uc-card:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; }
/* 卡面高光斜带 + 右上柔光 */
.uc-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 40%),
              radial-gradient(130% 100% at 100% 0%, rgba(255,255,255,.10), transparent 55%);
}
/* 右下角类型水印 */
.uc-card::after {
  content: attr(data-mark); position: absolute; right: 12px; bottom: 4px;
  font-size: 30px; font-weight: 800; font-style: italic; letter-spacing: 2px;
  line-height: 1; color: rgba(255,255,255,.08); pointer-events: none;
}
/* 类型主题：会员卡=黑金 / OEM 卡=藏蓝（与 .pkg-card 一致） */
.uc-card[data-type="vip"] { background: linear-gradient(135deg, #211e19 0%, #3b3223 60%, #5a4b2c 100%); }
.uc-card[data-type="vip"] .uc-card-chip { background: linear-gradient(135deg, #f0d9a6, #c9a45c); }
.uc-card[data-type="vip"] .uc-card-price { color: #EFCB84; }
.uc-card[data-type="oem"] { background: linear-gradient(135deg, #101d38 0%, #1c3a6e 60%, #2d5bab 100%); }
.uc-card[data-type="oem"] .uc-card-chip { background: linear-gradient(135deg, #b8cff5, #7fa3dd); }
.uc-card[data-type="oem"] .uc-card-price { color: #9DC1FF; }
.uc-card-head, .uc-card-name, .uc-card-price, .uc-card-desc, .uc-card-go { position: relative; z-index: 1; }
.uc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 芯片 */
.uc-card-chip { width: 24px; height: 18px; border-radius: 4px; flex: none; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.uc-card-chip::after { content: ''; position: absolute; inset: 3px 5px; border: 1px solid rgba(0,0,0,.24); border-radius: 2px; }
.uc-card-type { font-size: 10.5px; color: rgba(255,255,255,.92); background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 1px 8px; }
.uc-card-name { font-weight: 700; font-size: 13.5px; color: #fff; letter-spacing: .5px; margin-top: 7px; }
.uc-card-price { font-size: 21px; font-weight: 800; margin: 3px 0 1px; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .5px; }
.uc-card-price small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.55); }
.uc-card-desc { color: rgba(255,255,255,.62); font-size: 10.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uc-card-go { margin-top: auto; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85); }
/* 移动端：≤600px 两卡改竖排——定高卡片（aspect-ratio）并排时内容超出高度，flex 会把
   .uc-card-desc 压成 0 高直接看不见（2026-10-16 实测 375px 复现：descCH=0，价格行也被挤）；
   竖排后单卡 ≈288px 宽，4 要点描述两行完整显示。≤520px 再收一档字号/内距防溢出。 */
@media (max-width: 600px) {
  .uc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .uc-cards { gap: 8px; }
  .uc-card { padding: 10px 11px 8px; }
  .uc-card-name { font-size: 12.5px; }
  .uc-card-price { font-size: 18px; }
}

.uc-sec-title { font-size: 13px; font-weight: 700; color: var(--text, #111827); margin-bottom: 8px; }
.uc-tpl-count { font-weight: 400; font-size: 11px; color: var(--muted, var(--fg-subtle)); margin-left: 6px; }
.uc-tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; }
.uc-tpl-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; background: var(--soft, #f6f7f9); border-radius: 8px; }
.uc-tpl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, #111827); font-weight: 600; }
.uc-tpl-meta { color: var(--text-tertiary, var(--fg-subtle)); flex: none; }
.uc-empty { padding: 8px 0; color: var(--text-secondary, var(--fg-subtle)); font-size: 12px; }

.uc-pwd { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line, #e5e7eb); padding-top: 14px; }
.uc-pwd .text-input { width: 100%; box-sizing: border-box; }
.uc-pwd-ops { display: flex; justify-content: flex-end; }

/* 注销账号（2026-10-24）：入口用危险色与普通功能区分；面板沿用 uc-pwd 的栅格与间距，
   警告区走浅红底，避免用户把它当成又一个「设置项」随手点过去。 */
.uc-link.uc-link-danger { color: #dc2626; border-color: var(--line, #e5e7eb); }
.uc-link.uc-link-danger:hover { border-color: #dc2626; background: #fef2f2; }
.uc-link.uc-link-danger .ico { color: #dc2626; }
.uc-closeacct { display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--line, #e5e7eb); padding-top: 14px; }
.uc-ca-title { display: flex; align-items: center; gap: 6px; color: #dc2626; }
.uc-ca-title .ico { width: 16px; height: 16px; }
.uc-ca-warn { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md, 10px); padding: 10px 12px; font-size: 12.5px; line-height: 1.75; color: #7f1d1d; }
.uc-ca-warn p { margin: 0; }
.uc-ca-warn ul { margin: 6px 0 6px; padding-left: 18px; }
.uc-ca-warn li { margin: 2px 0; }
.uc-ca-note { color: #9a3412; font-size: 11.5px; }
.uc-closeacct .text-input { width: 100%; box-sizing: border-box; }
.uc-ca-ck { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text-secondary, #4b5563); line-height: 1.6; cursor: pointer; }
.uc-ca-ck input { margin: 2px 0 0; flex: none; }
.uc-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.uc-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.uc-btn-danger:disabled { opacity: .45; cursor: not-allowed; }

.uc-agree { border-top: 1px dashed var(--line, #e5e7eb); padding-top: 14px; font-size: 12px; color: var(--text-secondary, #4b5563); line-height: 1.8; }
.uc-agree p { margin: 0 0 6px; }

.uc-foot { border-top: 1px solid var(--border-subtle, #f0f1f3); padding-top: 12px; display: flex; justify-content: center; }

/* ============================================================
   胶囊拆分（积分 / 用户）+ 积分充值弹层 — 2026-09-21
   ============================================================ */
.acct-chip.credit-chip { cursor: pointer; gap: 5px; transition: box-shadow .15s, transform .15s; }
.acct-chip.credit-chip:hover { box-shadow: 0 2px 10px rgba(59, 130, 246, .25); transform: translateY(-1px); }
.credit-ico { width: 14px; height: 14px; color: #F59E0B; }
.acct-chip.user-chip { cursor: pointer; gap: 7px; transition: box-shadow .15s, transform .15s; }
.acct-chip.user-chip:hover { box-shadow: 0 2px 10px rgba(59, 130, 246, .25); transform: translateY(-1px); }
.user-mini-avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--primary, #3b82f6), #7c3aed); color:#fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* 积分充值弹层 — 2026-10-12 对齐 IP 档案库弹窗标准：
   830×1060 定尺、深遮罩+backdrop blur（随 .uc-mask 改造已生效）、双流光边框（HTML 已挂 .dh-dlg-beam）、
   border var(--line) + 深阴影；字号整体 +2 档；主按钮走 --grad-cta；卡片/支付方式 hover 白描边 #D7D9DE；
   深色主题面板提亮为 var(--soft)。 */
.credit-panel {
  width: 830px; min-height: 1060px; max-width: 94vw;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 32px 96px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  padding: 28px 32px 22px; gap: 18px;
}
:root[data-theme="dark"] .credit-panel { background: var(--soft); }
/* ★ 2026-10-21 用户要求：充值弹窗双流光由「淡蓝」改「视频生成列流光同款白色系」。
   与列流光 .dh-col-beam / .cv-confirm / .sup-modal 同族：复用 --dh-beam-a/b 动画 +
   --dh-beam-ink 令牌（深色=纯白 / 浅色=中性灰），只覆盖 .credit-panel 一处，
   其余 .dh-dlg-beam 弹窗仍淡蓝不动。 */
.credit-panel.dh-dlg-beam::after,
.credit-panel.dh-dlg-beam::before {
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.credit-panel.dh-dlg-beam::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
/* ★ 2026-10-21 用户要求：个人中心弹窗（#ucMask）双流光由「淡蓝」改「视频生成列流光同款白色系」。
   与列流光 .dh-col-beam / .cv-confirm / .sup-modal / .credit-panel 同族：复用 --dh-beam-a/b 动画 +
   --dh-beam-ink 令牌（深色=纯白 / 浅色=中性灰），只覆盖 #ucMask 个人中心这一处，
   其余 .dh-dlg-beam 弹窗（会员权益/流水/订单等）仍淡蓝不动。 */
#ucMask .uc-panel.dh-dlg-beam::after,
#ucMask .uc-panel.dh-dlg-beam::before {
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
#ucMask .uc-panel.dh-dlg-beam::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
/* 关闭按钮：面板底色随主题变，按钮色也必须随主题变。
   原实现两种主题都硬编码白色 —— 浅色主题面板是白卡，白 × 落在白底上等于不可见。 */
.credit-panel .uc-close { color: var(--text-tertiary, var(--fg-subtle)); }
.credit-panel .uc-close:hover { color: var(--text, #1F2329); }
:root[data-theme="dark"] .credit-panel .uc-close { color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
:root[data-theme="dark"] .credit-panel .uc-close:hover { color: #fff; }

/* 2026-10-12 用户反馈「头部这块颜色太抢眼」：由高饱和实心蓝块 → 与面板同族的「静谧淡染头部」。
   原因：原头部 #4F7CFF→#4338F0 实心渐变与主 CTA「立即支付」（--grad-cta）同为蓝紫渐变且色域更亮更饱，
   在深色面板上成了整屏最亮元素，与主按钮互相抢戏、层级倒挂。
   改法：浅色＝极浅蓝紫染底 + 深色标题（1px 淡蓝描边）；深色＝面板提亮一档 + 左上淡蓝光晕 + 1px 淡蓝描边。
   文案色不再依赖 opacity（改按主题显式给色），副标题在深色下从纯白降为 --text-secondary。 */
.credit-banner {
  position: relative;
  border: 1px solid #E1E9FB;
  border-radius: 12px;
  padding: 24px 18px 26px;
  text-align: center;
  color: var(--text, #1F2329);
  background: linear-gradient(135deg, #F2F6FF 0%, #F7F4FF 100%);
}
.credit-banner-title { font-size: 26px; font-weight: 800; letter-spacing: 4px; }
.credit-banner-sub { margin-top: 8px; font-size: 14px; letter-spacing: 1px; color: var(--muted, #646A73); }
:root[data-theme="dark"] .credit-banner {
  border-color: rgba(76, 141, 255, .24);
  color: var(--text, #F2F4F7);
  background:
    radial-gradient(120% 180% at 6% 0%, rgba(76, 141, 255, .22) 0%, rgba(76, 141, 255, 0) 62%),
    linear-gradient(135deg, rgba(139, 92, 246, .10) 0%, rgba(255, 255, 255, 0) 62%),
    rgba(255, 255, 255, .035);
}
:root[data-theme="dark"] .credit-banner-sub { color: var(--text-secondary, #9AA5B4); }
.credit-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.credit-feat { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 11px 6px; font-size: 17px; font-weight: 600; color: var(--text, #111827); background: var(--card, var(--surface)); }
.cf-ico { font-size: 16px; line-height: 1; }
.cf-gold { color: #F59E0B; } .cf-purple { color: #8B5CF6; } .cf-green { color: #10B981; } .cf-blue { color: #3B82F6; }

.credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.credit-card { position: relative; border: 1.5px solid var(--line, #e5e7eb); border-radius: 12px; padding: 18px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; background: var(--card, var(--surface)); transition: border-color .15s, box-shadow .15s; }
.credit-card:hover { border-color: #D7D9DE; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.credit-card.selected { border-color: var(--primary, #2E5BFF); box-shadow: 0 4px 16px rgba(46, 91, 255, .15); }
.credit-radio { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line, #d1d5db); background: var(--surface); }
.credit-card.selected .credit-radio { border-color: var(--primary, #2E5BFF); background: radial-gradient(circle, var(--primary, #2E5BFF) 0 42%, var(--surface) 46%); }
.cc-coin-ico { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color:#fff; }
.cc-coin-ico.blue { background: linear-gradient(135deg, #38BDF8, #2E5BFF); }
.cc-coin-ico.purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.cc-name { font-size: 15px; font-weight: 600; color: var(--text, #111827); }
.cc-credits { font-size: 14px; color: var(--muted, var(--fg-subtle)); }
.cc-credits b { font-size: 32px; font-weight: 800; color: var(--text, #111827); margin-right: 4px; letter-spacing: -1px; }
.cc-desc { font-size: 13.5px; color: #8B5CF6; }
.cc-price { margin-top: 5px; display: flex; align-items: baseline; gap: 7px; }
.cc-price em { font-style: normal; color: var(--primary, #2E5BFF); font-size: 22px; font-weight: 800; }
.cc-price s { color: var(--text-tertiary, var(--fg-subtle)); font-size: 14px; }

/* 会员充值赠送（2026-10-15新增：会员优惠由「充值打折」改为「按比例赠送积分」）
   会员/代理的实发赠分角标；普通用户则渲染「开通会员赠 X%」转化钩子（绿色调，区别于会员金/代理金）。 */
.cc-vip-tag { margin-top: 1px; padding: 3px 9px; border-radius: 999px; font-size: 12px; line-height: 1.5; font-weight: 500; color: #B7791F; background: linear-gradient(135deg, rgba(250, 214, 165, .38), rgba(250, 236, 214, .18)); border: 1px solid rgba(214, 158, 46, .38); white-space: nowrap; }
/* 普通用户转化钩子：开通会员可多赠的绿色提示，引导升级 */
.cc-vip-tag.cc-vip-promo { color: #1F8A4C; background: linear-gradient(135deg, rgba(154, 230, 180, .42), rgba(214, 240, 220, .22)); border-color: rgba(46, 158, 96, .42); }
.credit-card.vip-member { border-color: rgba(214, 158, 46, .32); }
.credit-card.vip-member.selected { border-color: var(--primary, #2E5BFF); box-shadow: 0 4px 16px rgba(46, 91, 255, .15); }
/* 深色主题：加深金字底与文字对比，保证可读 */
[data-theme="dark"] .cc-vip-tag { color: #f0c070; background: rgba(240, 192, 112, .12); border-color: rgba(240, 192, 112, .34); }
[data-theme="dark"] .cc-vip-tag.cc-vip-promo { color: #6ee7a0; background: rgba(110, 231, 160, .12); border-color: rgba(110, 231, 160, .38); }
[data-theme="dark"] .credit-card.vip-member { border-color: rgba(240, 192, 112, .30); }

.credit-pay-title { font-size: 15px; font-weight: 600; color: var(--text, #111827); }
.credit-pays { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.credit-pay { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 10px; border: 1.5px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--card, var(--surface)); font-size: 16px; font-weight: 600; color: var(--text, #111827); cursor: pointer; transition: border-color .15s; }
.credit-pay:hover { border-color: #D7D9DE; }
.credit-pay.active { border-color: var(--primary, #2E5BFF); color: var(--primary, #2E5BFF); }
.cp-ico { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.cp-ico svg { width: 100%; height: 100%; display: block; }
.cp-wechat { background: #07C160; }
.cp-alipay { background: #1677FF; }

.credit-agree { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; color: var(--muted, var(--fg-subtle)); cursor: pointer; user-select: none; }
.credit-agree input { accent-color: var(--primary, #2E5BFF); width: 15px; height: 15px; cursor: pointer; }
.credit-agree a { color: var(--primary, #2E5BFF); text-decoration: none; font-weight: 600; }
.credit-agree a:hover { text-decoration: underline; }

.credit-paybtn { width: 100%; border: none; border-radius: 12px; padding: 15px; background: var(--grad-cta, linear-gradient(90deg, #4F8CFF, #2E5BFF)); color:#fff; font-size: 18px; font-weight: 700; letter-spacing: 2px; cursor: pointer; transition: filter .15s, transform .1s, background .15s; }
.credit-paybtn:hover { filter: brightness(1.06); }
.credit-paybtn:active { transform: translateY(1px); }
.credit-paybtn:disabled { opacity: .55; cursor: not-allowed; }
/* 立即支付 + 开通会员 双按钮行（2026-10-28）：普通用户并排展示，会员仅显支付按钮 */
.credit-payrow { display: flex; align-items: stretch; gap: 12px; }
.credit-payrow .credit-paybtn { width: auto; flex: 1 1 auto; }
.credit-vipbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--primary, #2E5BFF); border-radius: 12px; padding: 15px 18px; background: transparent; color: var(--primary, #2E5BFF); font-size: 16px; font-weight: 700; letter-spacing: 1px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .1s; }
.credit-vipbtn:hover { background: var(--primary, #2E5BFF); color: #fff; }
.credit-vipbtn:active { transform: translateY(1px); }

.credit-redeem-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--text, #111827); cursor: pointer; user-select: none; }
.credit-redeem-toggle:hover { color: var(--primary, #2E5BFF); }
.cr-ico { color: #F59E0B; font-size: 16px; }
.credit-redeem { display: flex; gap: 12px; align-items: center; border: 1px dashed var(--line, #e5e7eb); border-radius: 10px; padding: 12px; background: var(--soft, #f8f9fb); }
.credit-redeem .text-input { flex: 1 1 auto; min-width: 0; }
.credit-redeem-btn { flex: none; border: none; border-radius: 9px; padding: 11px 20px; background: var(--grad-cta, linear-gradient(90deg, #4F8CFF, #2E5BFF)); color:#fff; font-size: 15.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s; }
.credit-redeem-btn:hover { filter: brightness(1.06); }

.redeem-desc { font-size: 14px; color: var(--text-tertiary, var(--fg-subtle)); text-align: center; margin-top: 10px; }
.credit-note { font-size: 13px; color: var(--text-tertiary, var(--fg-subtle)); line-height: 1.7; text-align: center; }

/* ============================================================================
   带货视频（pvideo）—— 独立二级页基座（2026-09-23 建立）
   形态：顶部六步条 + 内容区六个步骤卡片分三列（①② / ③④ / ⑤⑥）
   ========================================================================== */
.pv-stage { padding: 18px 22px 36px; align-items: flex-start; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pv-wrap { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.pv-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pv-step { display: flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: var(--surface); border-radius: 999px; padding: 6px 12px 6px 6px; font-size: 15px; color: #374151; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pv-step:hover { border-color: var(--primary); color: var(--primary); }
.pv-step-no { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pv-step.done .pv-step-no { background: #E5F6EC; color: #1F9D55; }
.pv-step.locked { opacity: .5; cursor: not-allowed; }
.pv-step.locked:hover { border-color: #e5e7eb; color: #374151; }
.pv-step-sep { width: 14px; height: 1px; background: #dfe3e8; flex: 0 0 auto; }
/* 内容区：2026-10-07 改造，从「五步三列同屏」改为「两步、一次只显示一步」的面板布局。
   第 1 步「产品与参数」= 三列（产品素材 / 产品信息 / 视频参数）；
   第 2 步「分镜与生成交付」= 两列（左：生成分镜；右：视频生成与交付）。每步一个 .pv-pane；
   面板默认隐藏，只有 [data-step] 命中的那一个显示。
   ★ 全部锁在 .pv-wrap-pvideo 前缀下：探店视频(svideo.js)/电商套图(ecom.js) 共用 .pv-step* 类名与 #pvStage，
      不锁前缀会污染它们的步骤条。功能规则在 PV_LAYOUT_CSS（带 !important，随 JS 到，防 CSS 缓存旧版）；
      下面这份不带 !important，仅作文档/兜底，两份必须同步维护。 */
.pv-wrap-pvideo .pv-body { display: block; width: 100%; }
.pv-wrap-pvideo .pv-pane { display: none; max-width: 960px; margin: 0 auto; }
.pv-wrap-pvideo[data-step="1"] .pv-pane[data-pane="1"],
.pv-wrap-pvideo[data-step="2"] .pv-pane[data-pane="2"] { display: block; }
.pv-wrap-pvideo .pv-step.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pv-wrap-pvideo .pv-step.active .pv-step-no { background: rgba(255, 255, 255, .22); color: #fff; }
.pv-wrap-pvideo .pv-step-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--primary); transition: width .3s ease; }
.pv-wrap-pvideo .pv-step-nav-row { display: flex; gap: 12px; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.pv-wrap-pvideo .pv-step-nav { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: #374151; transition: .15s; }
.pv-wrap-pvideo .pv-step-nav:hover { border-color: var(--primary); color: var(--primary); }
.pv-wrap-pvideo .pv-step-nav .ico { width: 16px; height: 16px; }
.pv-wrap-pvideo .pv-step-next { background: var(--primary); border-color: var(--primary); color: #fff; }
.pv-wrap-pvideo .pv-step-next:hover { filter: brightness(1.06); color: #fff; }
.pv-wrap-pvideo .pv-step-prev { background: var(--surface); border-color: var(--border); color: #374151; }
.pv-wrap-pvideo .pv-step-nav.disabled { opacity: .45; cursor: not-allowed; }
/* 2026-10-07：第①步数字人同款三列（功能规则在 PV_LAYOUT_CSS，随 JS 到，防缓存旧版；下方仅作文档/兜底，两份同步维护）。
   列一 产品素材 / 列二 产品信息（含参数·售后）/ 列三 视频参数（原第②步并入）。
   列宽 repeat(3,minmax(300px,530px)) · 列间距 20px · 列头下划线 1px var(--line) · 表头 16px(首列 18px) · 步骤条到列 12px。 */
.pv-wrap-pvideo { gap: 12px; }
.pv-wrap-pvideo .pv-pane[data-pane="1"] { max-width: none; margin: 0; }
.pv-wrap-pvideo .pv-cols { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; align-items: stretch; }
@media (max-width: 1240px) { .pv-wrap-pvideo .pv-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ★ 2026-10-07 第②步两列（生成分镜 | 视频生成与交付），与 pvideo.js PV_LAYOUT_CSS 同款兜底：
   右列 = 第一屏单列宽（封顶 530）；左列 = 第一屏两列宽（封顶 1080 = 2×530+20gap）；gap 20 → 总宽 1630 = 第一屏三列封顶总宽。
   pane2 取消 960 限制、左对齐；列头字号同第①屏（首列 18 / 其余 17）。 */
.pv-wrap-pvideo .pv-pane[data-pane="2"] { max-width: none; margin: 0; }
.pv-wrap-pvideo .pv-cols-2 { display: grid; grid-template-columns: minmax(300px, 1080px) minmax(300px, 530px); gap: 20px; align-items: start; max-width: 1630px; margin: 0; }
@media (max-width: 1240px) { .pv-wrap-pvideo .pv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-col:first-child .pv-col-head { font-size: 18px; }
.pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-col:not(:first-child) .pv-col-head { font-size: 17px; }
/* ★ 2026-10-07 分镜单卡翻页兜底（与 pvideo.js PV_LAYOUT_CSS 同款；无 !important，仅防内联缓存缺口）。
   翻页控件仅第②步左列出现，前缀已锁 .pv-wrap-pvideo，不污染探店/套图模块。 */
.pv-wrap-pvideo .pv-shot-pager { display: flex; align-items: stretch; gap: 8px; }
.pv-wrap-pvideo .pv-shot-stage { flex: 1 1 auto; min-width: 0; }
.pv-wrap-pvideo .pv-pager-btn { flex: 0 0 auto; width: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg-subtle); font-size: 24px; line-height: 1; cursor: pointer; align-self: stretch; display: flex; align-items: center; justify-content: center; user-select: none; transition: color .15s, border-color .15s; }
.pv-wrap-pvideo .pv-pager-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.pv-wrap-pvideo .pv-pager-btn:disabled { opacity: .35; cursor: default; }
.pv-wrap-pvideo .pv-shot-nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pv-wrap-pvideo .pv-shot-count { font-size: 13.5px; color: var(--fg-subtle); white-space: nowrap; }
.pv-wrap-pvideo .pv-shot-dots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-wrap-pvideo .pv-dot { flex: 0 0 auto; width: 9px; height: 9px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; transition: all .15s; }
.pv-wrap-pvideo .pv-dot.on { background: var(--primary); border-color: var(--primary); width: 11px; height: 11px; }
.pv-wrap-pvideo .pv-shot-gap { font-size: 13px; color: var(--fg-subtle); line-height: 1; padding: 0 1px; }
.pv-wrap-pvideo .pv-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pv-wrap-pvideo .pv-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; flex: 0 0 auto; color: var(--text); }
.pv-wrap-pvideo .pv-col:first-child .pv-col-head { font-size: 18px; }
.pv-wrap-pvideo .pv-col-head .ico { width: 18px; height: 18px; color: var(--primary); }
.pv-wrap-pvideo .pv-col-body { padding: 14px 20px; }
/* ★ 2026-10-07 「清空重来」由页脚移入第一列外框底部（与 pvideo.js PV_LAYOUT_CSS 同款兜底）：
   第一列 .pv-col-body 转 flex 列，.pv-col-foot 用 margin-top:auto 钉到列底。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-col:first-child > .pv-col-body { display: flex; flex-direction: column; flex: 1 1 auto; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-col-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 14px; }
/* ★ 2026-10-07 第①屏字号整体加大一号（与 pvideo.js 的 PV_LAYOUT_CSS 同款，这里是兜底副本）。
   不动：所有按钮 + 第一列表头「产品素材」(18px)；第二列表头 16 → 17px。
   加 #pvStage 前缀是为了盖过 #pvStage .pv-thumb-role 这类 id 级旧规则。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-upload-label { font-size: 14.5px; font-weight: 700; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-upload-quota { font-size: 12px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-role-row .pv-select { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-role-tip { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-upload-text { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-upload-sub { font-size: 12px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-status { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-thumb-gflag { font-size: 12px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-thumb-role { font-size: 12px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-variant-input { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-label { font-size: 14.5px; font-weight: 700; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-input,
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-textarea { font-size: 14px; }
/* ★ 2026-10-07 第三列「视频参数」里的字整体加大一号（与 pvideo.js PV_LAYOUT_CSS 同款兜底）。
   字段名 12.5→13.5 / 下拉当前值 13→14 / 下拉展开项 13→14 / 提示条 12→13。
   必须锁 [data-pane="1"]：第②/③步里也有 .pv-hint，不能连带放大。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-field-label { font-size: 13.5px; flex: 0 0 72px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-drop-btn { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-drop-item { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-hint { font-size: 13px; }
/* ★ 2026-10-07 第二列文本框默认高度 ×2（与 pvideo.js PV_LAYOUT_CSS 同款兜底）。
   实测 rows=3 时该框高 81px → 定高 162px。（rows=6 只有 146px，约 1.8 倍，故不走 rows。）
   三个框（产品资料 #pvInfo / 产品卖点 #pvPoints / 参数 · 售后 #pvParams）统一 162px。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvInfo,
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvPoints,
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvParams { height: 162px; }
/* ★ 2026-10-07 第三列两个微调（与 pvideo.js PV_LAYOUT_CSS 同款兜底）：
   ①「产品视觉锚点」块上方插入 50px —— 用 padding-top，避免与上方 .pv-hint 的 margin:8px 折叠后净增只剩 42px。
   ② 锚点框 #pvAnchor 定高 162px = 第二列「产品卖点」#pvPoints 的高度（pvStep2Html 已把它换成 .pv-textarea）。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-anchor-block { padding-top: 50px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvAnchor { height: 162px; }
/* ★ 2026-10-07 第二列三处「插入 25px 空白」（与 pvideo.js PV_LAYOUT_CSS 同款兜底）：
   第 1/2/3 个 .pv-block（商品名称 / 产品资料 / 产品卖点）下沿各 +25px，下方内容整体下移。
   用 padding-bottom 是因为相邻兄弟 margin 会折叠，净增会变成 0；padding 恒等于 25px。
   第 4 块「参数 · 售后」不在圈选范围内，不动。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-col:nth-child(2) .pv-col-body > .pv-block:nth-child(-n+3) { padding-bottom: 25px; }
/* ★ 2026-10-07 第①屏「标题字」加粗 + 加大一号兜底副本（与 pvideo.js PV_LAYOUT_CSS 同款）。
   对象只限**小标题**：.pv-label 与 .pv-upload-label（第一列「产品图」）。
   ★ 列头 .pv-col-head（产品素材 / 产品信息 / 规格售后）不动：维持 18px(首列) / 17px(其余) / 600。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] .pv-col:not(:first-child) .pv-col-head { font-size: 17px; }
/* ★ 2026-10-07 第②屏（分镜与生成交付）「除按钮外全部文字 +1px」（与 pvideo.js PV_LAYOUT_CSS 同款兜底）。
   范围：第②步面板 [data-pane="2"] 的左列分镜卡 + 右列视频生成与交付。
   不动：所有按钮（生成分镜 / 手动加镜头 / 本地校验 / 重生成 / 添加分片 / 送入智能剪辑 / 翻页箭头 / × / 垃圾桶）
        与按钮内的 .pv-cost-badge。底部翻页定位提示 .pv-shot-count / .pv-shot-gap 的兜底值已在上方翻页规则里同步。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-hint { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-empty { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot-no { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot-clip,
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot-time { font-size: 15px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot-grid label { font-size: 15px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot-grid label.pv-check { font-size: 13.5px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-sel,
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-num { font-size: 13.5px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-dash { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-lines-head { font-size: 14px; font-weight: 600; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-lines-head .pv-chars { font-weight: 400; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-chars { font-size: 15px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-textarea { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-ref-label { font-size: 14px; font-weight: 600; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-ref-card .pv-ref-name { font-size: 12px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-ref-tip { font-size: 12px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-cost { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-status { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-switch { font-size: 13.5px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-clip-no { font-size: 13.5px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-clip-dur { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-clip-time { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-clip-gen { font-size: 14px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-clip-state { font-size: 13px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-clip-link { font-size: 13.5px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-validate { font-size: 13.5px; }
/* ★ 2026-10-07 分镜卡（与 pvideo.js PV_LAYOUT_CSS 同款兜底）：
   ① 卡头下方加分隔线（规格对齐列头 .pv-col-head 的横线）；
   ②③ 控件行下沿 / 画面文本域下沿各插入 25px（用 padding 恒增，避开兄弟 margin 折叠）。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot .pv-shot-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot .pv-shot-grid { padding-bottom: 0; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="2"] .pv-shot .pv-lines-head { padding-top: 25px; margin-top: 0; }
/* ★ 2026-10-07 第一列缩略图卡片放大到「一行正好三张」（与 pvideo.js 的 PV_LAYOUT_CSS 同款，这里是兜底副本）。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; align-items: start; width: 100%; box-sizing: border-box; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-group { width: auto; min-width: 0; }
/* ★ 2026-10-07 槽位旗标改为「每张图各自一个」（与 pvideo.js PV_LAYOUT_CSS 同款兜底）：
   原来整组只渲染一个、挂在 .pv-thumb-gtitle 上，多图组（规格 3 张）整行宽居中 → 落在中间那张上方。
   现挂在每张 .pv-thumb-cell 里、卡片图之上，逐张自带标注。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-cell > .pv-thumb-gflag { display: inline-block; margin-bottom: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-strip { display: block; width: 100%; margin-top: 0; }
/* 一个槽位有 ≥2 张图时（规格 ≤3 / 其他 ≤2）：该组独占一整行，组内仍按「一行三张」的节拍排，卡片尺寸与单图卡一致。 */
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-group:has(.pv-thumb-cell + .pv-thumb-cell) { grid-column: 1 / -1; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-group:has(.pv-thumb-cell + .pv-thumb-cell) .pv-thumb-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; align-items: start; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-cell { display: block; width: 100%; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-wrap { width: 100%; height: auto; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-wrap img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-thumb-role { width: 100%; height: 24px; }
#pvStage .pv-wrap-pvideo .pv-pane[data-pane="1"] #pvThumbs .pv-variant-input { width: 100%; }
.pv-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px 14px; background: var(--surface); }
/* 中等宽度：三列保持，但收紧间距/内边距，避免挤成一团
   ★ 必须写在 .pv-card 之后，否则会被后面的 .pv-card padding 覆盖掉 */
@media (max-width: 1200px) {
  .pv-body { gap: 12px; }
  .pv-card { padding: 10px 10px 12px; }
}
.pv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pv-step-badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pv-card-title { font-size: 14px; font-weight: 600; color: #1f2937; }
.pv-card-sub { font-size: 11.5px; color: #9aa0a8; }
.pv-block { margin-bottom: 10px; }
.pv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-label { font-size: 15px; color: #374151; font-weight: 500; margin-bottom: 5px; display: block; }
.pv-label-tip { font-weight: 400; color: #9aa0a8; margin-left: 4px; }
.pv-input, .pv-textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 9px; font-size: 13px; color: #1f2937; background: var(--surface); font-family: inherit; box-sizing: border-box; }
.pv-textarea { resize: vertical; line-height: 1.55; }
.pv-input:focus, .pv-textarea:focus { outline: none; border-color: var(--primary); }
.pv-hint { font-size: 12px; color: var(--fg-subtle); line-height: 1.6; padding: 8px 10px; background: #f3f6ff; border-radius: 8px; margin: 8px 0; }
.pv-hint b { color: var(--primary); font-weight: 600; }
.pv-empty { color: #9aa0a8; font-size: 13px; padding: 18px 4px; text-align: center; }
.pv-btn { border: 1px solid #dfe3e8; background: var(--surface); color: #374151; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, background .15s; }
.pv-btn:hover { border-color: var(--primary); color: var(--primary); }
.pv-btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; }
.pv-btn.primary:hover { filter: brightness(1.06); color:#fff; }
/* 按钮内嵌扣点徽标（真实扣费动作必须让用户在点之前就看见价格） */
.pv-cost-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11.5px; font-weight: 600; letter-spacing: .2px; }
/* ★ 禁用态统一灰（2026-09-24 用户对照截图反馈）：扣费按钮的蓝 var(--primary) 是全站统一信号色，
   禁用一律灰底，不再用「半透明蓝」——半透明叠白卡会变成第二种蓝，用户会以为配色不统一 */
.pv-btn.primary:disabled, .dh-btn:disabled, .dh-tb.primary:disabled,
.generate-btn:disabled, .generate-btn.disabled, .mini-btn:disabled,
.ecom-small-btn:disabled, .chat-send:disabled, .sm-submit:disabled {
  background: #BFC7D2; border-color: #BFC7D2; color:#fff; opacity: 1; cursor: not-allowed;
}
/* 上传区 */
.pv-upload-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pv-upload-label { font-size: 15px; color: #374151; font-weight: 500; }
.pv-upload-quota { margin-left: auto; font-size: 11px; color: #9aa0a8; }
.pv-upload-zone { border: 1.5px dashed #c7ccd4; border-radius: 10px; background: var(--surface-2); padding: 16px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.pv-upload-zone:hover, .pv-drag-over { border-color: var(--primary); background: #f3f6ff; }
.pv-upload-zone > .ico { width: 22px; height: 22px; color: var(--fg-subtle); } /* 直接子选择器：2026-09-25 缩略图挪进上传框后，.ico 后代选择器会误伤框内删除按钮的 ×（灰 × 画在黑圆上不可见） */
.pv-upload-zone:hover > .ico { color: var(--primary); }
/* ★ 2026-09-25 缩略图挪进上传框：有图时隐藏图标与说明小字，缩略图占满宽度，按钮行保留在框内底部 */
.pv-upload-zone.has-imgs > .ico,
.pv-upload-zone.has-imgs .pv-upload-sub { display: none; } /* > 直接子：只藏大上传图标；删除按钮里的 × 是后代 .ico，不能藏 */
.pv-upload-zone.has-imgs { align-items: stretch; padding-top: 14px; }
.pv-upload-zone.has-imgs .pv-thumb-groups { margin-bottom: 4px; }
.pv-upload-text { font-size: 13px; color: #374151; }
.pv-upload-sub { font-size: 11px; color: #9aa0a8; }
.pv-thumb-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pv-thumb-wrap { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; background: var(--surface); }
.pv-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color:#fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pv-thumb-del .ico { width: 12px; height: 12px; }
.pv-status { font-size: 12px; color: #9aa0a8; min-height: 16px; margin-top: 4px; }
/* 快速内容点 */
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pv-chip { border: 1px solid #e5e7eb; background: var(--surface); color: var(--fg-subtle); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.pv-chip:hover { border-color: var(--primary); color: var(--primary); background: #f3f6ff; }
/* 参数区：下拉框（单档位为锁定态） */
.pv-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pv-field { display: flex; align-items: center; gap: 8px; }
.pv-field-label { font-size: 15px; color: var(--fg-subtle); flex: 0 0 68px; }
.pv-drop { position: relative; flex: 1 1 auto; min-width: 0; }
.pv-drop-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid #e5e7eb; background: var(--surface); border-radius: 8px; padding: 6px 9px; font-size: 13px; color: #374151; cursor: pointer; font-family: inherit; }
.pv-drop-btn:hover { border-color: var(--primary); }
.pv-drop-arrow { width: 14px; height: 14px; color: #9aa0a8; transform: rotate(-90deg); flex: 0 0 auto; }
.pv-drop.is-locked .pv-drop-btn { background: var(--surface-2); color: #9aa0a8; cursor: default; }
.pv-drop.is-locked .pv-drop-arrow { display: none; }
.pv-drop-panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 6px 18px rgba(17,24,39,.10); padding: 4px; max-height: 240px; overflow-y: auto; }
.pv-drop.open .pv-drop-panel { display: block; }
/* 模型项换成两列选择器后，浮层让位给 .mk 自己的背景与定位（其余档位下拉不受影响） */
/* 电商图「出图模型」：原来原生 select，现改为两列选择器（宿主 + 触发按钮） */
.ecom-model-pick { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; }
.ecom-pick-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-align: left; }
.ecom-pick-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecom-caret { margin-left: auto; font-size: 10px; opacity: .65; }
.pv-drop-panel.is-mk { left: auto; right: auto; max-height: none; overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pv-drop-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; border: none; background: none; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: #374151; cursor: pointer; text-align: left; font-family: inherit; }
.pv-drop-item:hover { background: #f3f6ff; }
.pv-drop-item.on { color: var(--primary); font-weight: 600; }
.pv-drop-item .ico { width: 14px; height: 14px; flex: 0 0 auto; }
/* 分镜表 */
.pv-shots { display: flex; flex-direction: column; gap: 10px; }
.pv-shot { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; background: var(--surface-2); }
.pv-shot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-shot-no { font-size: 13px; font-weight: 600; color: #1f2937; }
.pv-shot-clip { font-size: 11.5px; color: var(--primary); background: var(--primary-light); border-radius: 10px; padding: 2px 9px; }
.pv-shot-time { font-size: 11.5px; color: #9aa0a8; }
.pv-shot-del { margin-left: auto; border: none; background: none; color: #9aa0a8; cursor: pointer; padding: 2px; display: flex; }
.pv-shot-del:hover { color: var(--danger); }
.pv-shot-del .ico { width: 15px; height: 15px; }
.pv-shot-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pv-shot-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--fg-subtle); }
.pv-shot-grid label.pv-check { flex-direction: row; align-items: center; gap: 5px; align-self: flex-end; padding-bottom: 6px; font-size: 15px; }
.pv-sel, .pv-num { height: 30px; border: 1px solid #e5e7eb; border-radius: 7px; padding: 0 6px; font-size: 15px; color: #374151; background: var(--surface); font-family: inherit; }
.pv-num { width: 62px; }
.pv-shot-grid label .pv-range { display: flex; align-items: center; gap: 4px; }
.pv-shot-grid label .pv-range .pv-dash { color: var(--fg-subtle); font-size: 12px; }
.pv-lines-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 4px; font-size: 12px; color: #374151; font-weight: 500; }
.pv-chars { font-weight: 400; font-size: 11.5px; color: #9aa0a8; }
.pv-chars.over { color: var(--danger); font-weight: 600; }
/* 字数低于留白提示线：只是提醒（慢节奏广告的留白是合法设计），用琥珀色而非红色 */
.pv-chars.under { color: var(--warning); }
/* 极简/专家 分段切换（2026-10-04 重设计：此前无任何 CSS，渲染成浏览器默认灰按钮） */
.pv-mode-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pv-mode-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.pv-mode-btn { appearance: none; border: 0; background: transparent; padding: 5px 18px; border-radius: 999px; font-size: 13px; font-family: inherit; color: var(--fg-subtle); cursor: pointer; transition: color .15s, background .15s, box-shadow .15s; }
.pv-mode-btn:hover { color: var(--fg); }
/* 选中态走主题感知别名：浅色=实心 #2E6CEC，深色=半透明渐变（与站内小控件选中态同一配方） */
.pv-mode-btn.on { background: var(--grad-soft-bg); box-shadow: inset 0 0 0 1px var(--grad-soft-border); color: #fff; font-weight: 600; }
.pv-mode-tip { font-size: 15px; color: var(--fg-subtle); }
/* 极简/专业 切换（大气版，2026-10-08 重做：取代 svideo 原小药丸 .pv-mode-*，svideo 后续也切到这套） */
.gv-mode-switch{display:inline-flex;align-items:center;gap:18px;margin:2px 0 18px;flex-wrap:wrap}
.gv-mode-card{position:relative;display:inline-flex;padding:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.gv-mode-thumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;background:linear-gradient(135deg,#7C5CFF 0%,#4D8BFF 100%);box-shadow:0 6px 18px rgba(94,99,245,.45);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.gv-mode-card[data-active="expert"] .gv-mode-thumb{transform:translateX(100%)}
.gv-mode-opt{position:relative;z-index:1;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:128px;padding:11px 30px;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:600;color:var(--fg-subtle);cursor:pointer;border-radius:999px;transition:color .25s}
.gv-mode-card[data-active="simple"] .gv-mode-opt[data-mode="simple"],
.gv-mode-card[data-active="expert"] .gv-mode-opt[data-mode="expert"]{color:#fff}
.gv-mode-opt .ico{width:18px;height:18px}
.gv-mode-tip{font-size:13px;color:var(--fg-subtle);max-width:440px;line-height:1.5}
.gv-mode-tip b{color:var(--fg)}
/* 高级设置折叠按钮（同上：此前无样式）：幽灵按钮，hover 亮起 */
.pv-adv-head { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg-subtle); font-size: 13px; font-family: inherit; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: color .15s, border-color .15s; }
.pv-adv-head:hover { color: var(--fg); border-color: var(--grad-soft-border); }
/* 校验结果 */
.pv-validate { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.pv-validate ul { margin: 4px 0 8px; padding-left: 18px; }
.pv-validate li { margin-bottom: 3px; }
.pv-vt-title { font-weight: 600; margin-top: 6px; }
.pv-vt-title.err { color: var(--danger); }
.pv-vt-title.ok { color: #1F9D55; }
.pv-vt-title.warn { color: #C9741A; }
.pv-vt-meta { color: #9aa0a8; font-size: 11.5px; margin-top: 6px; }
/* 故事板 / 生成 / 合成 */
.pv-keyvisual { border: 1px dashed #e3e8f0; border-radius: 10px; background: var(--surface-2); min-height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-keyvisual img { max-width: 100%; max-height: 320px; display: block; }
.pv-cost { font-size: 13px; color: #374151; padding: 8px 10px; background: #fff8f0; border: 1px solid #f5ddc0; border-radius: 8px; margin-bottom: 8px; }
.pv-cost b { color: #C9741A; }
/* 分片网格（2026-09-30）：多分片并排，一行放不下自动换行；空态提示占满整行 */
.pv-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pv-clips .pv-empty { grid-column: 1 / -1; }
.pv-clips .pv-clip { margin-bottom: 0; }
.pv-clips { margin-top: 8px; }
.pv-switches { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pv-switch { display: flex; align-items: center; gap: 7px; font-size: 15px; color: #374151; cursor: pointer; }
/* AIGC 标识门控关（§3 #19 上线前延后）：勾选框置灰不可点，避免「勾了也不烧」的假开关 */
.pv-switch.pv-off, .pv-switch.pv-off input[type="checkbox"] { color: #9aa1ab; cursor: default; }
.pv-off-tip { margin-left: 6px; font-size: 12px; color: #9aa1ab; }
.pv-off-tip:empty { display: none; }
/* ★ 2026-10-01：.pv-final / .pv-final-head / .pv-final-meta（历史成片回放卡样式）随卡片一并下线 */
/* 第 6 步分片列表 */
.pv-clip { border: 1px solid #e3e8f0; border-radius: 10px; padding: 8px; margin-bottom: 8px; background: var(--surface); }
.pv-clip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pv-clip-no { font-size: 15px; font-weight: 500; color: var(--text); }
.pv-clip-dur { font-size: 12px; color: #185FA5; background: #E6F1FB; border-radius: 5px; padding: 1px 6px; }
.pv-clip-time { font-size: 12px; color: #9aa0a8; }
.pv-clip-del { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: #9aa0a8; padding: 0 4px; }
.pv-clip-del:hover { color: var(--danger); }
/* ★ 2026-10-10 分片预览头部「下载当前分片」小图标（靠右、排在删除按钮左侧） */
.pv-clip-dl { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid #E5E6EB; border-radius: 6px; background: var(--surface); color: #9aa0a8; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pv-clip-dl .ico { width: 14px; height: 14px; }
.pv-clip-dl:hover { border-color: var(--primary); color: var(--primary); background: var(--hover-bg); }
/* 删除按钮紧随下载之后时不再吃 margin-left:auto（右对齐由下载按钮承担），只留 4px 间距 */
.pv-clip-dl + .pv-clip-del { margin-left: 4px; }
.pv-clip video { width: auto; height: 400px; aspect-ratio: 3 / 4; object-fit: contain; margin: 0 auto; border-radius: 8px; background: #000; display: block; }
.pv-clip-gen { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e3e8f0; border-radius: 8px; margin-bottom: 6px; background: var(--surface); font-size: 13px; }
.pv-clip-gen .pv-clip-no { font-weight: 500; color: var(--text); }
.pv-clip-state { font-size: 12px; padding: 1px 8px; border-radius: 12px; background: var(--surface-2); color: var(--fg-subtle); }
.pv-clip-state.generating { background: #E6F1FB; color: #185FA5; }
.pv-clip-state.done { background: #E7F6EC; color: #1B8A4B; }
.pv-clip-state.failed { background: #FDECEC; color: var(--danger); }
.pv-clip-link { margin-left: auto; color: #185FA5; text-decoration: none; font-size: 15px; }
.pv-clip-link:hover { text-decoration: underline; }
/* 页脚 */
.pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv-saved { font-size: 12px; color: #9aa0a8; }
.pv-reset-btn { border: none; background: none; padding: 2px; font-size: 12px; color: #9aa0a8; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.pv-reset-btn:hover { color: var(--danger); }
.credit-redeem-btn:disabled { opacity: .55; cursor: not-allowed; }
/* 用户中心内的卡密核销区（2026-09-22）：与积分弹层同源，常驻展开、无折叠开关 */
.uc-redeem-tip { font-weight: 400; font-size: 11px; color: var(--muted, var(--fg-subtle)); margin-left: 6px; }
.uc-redeem .credit-redeem { background: var(--soft, #f6f7f9); }
/* 核销说明行（2026-09-22）：三类卡的去向说明太长，放输入框里必被截断，改为框下方常显 */
.credit-redeem-box { display: block; }
.redeem-desc { margin-top: 7px; font-size: 11.5px; line-height: 1.65; color: var(--muted, var(--fg-subtle)); }
.credit-note { font-size: 11px; color: var(--text-tertiary, var(--fg-subtle)); line-height: 1.7; border-top: 1px dashed var(--line, #e5e7eb); padding-top: 10px; }

/* ============================================================
   B1b（2026-10-02）：北斗式布局壳——顶栏按钮 / 侧栏高亮 / 首页 Bento
   全部用双主题 token；弹层面板为浅色卡片，文字用固定深色保证 dark 下可读
   ============================================================ */

/* ---------- 顶栏按钮：每日福利（描边）+ 充值（橙色 CTA） ---------- */
.top-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-3); color: var(--fg);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.top-btn:hover { border-color: var(--hover-border); box-shadow: var(--shadow-sm); }
.welfare-btn { color: var(--primary-dark); border-color: var(--hover-border); }
/* 2026-10-04 用户要求 P1：深色主题选中态统一「实心蓝底 + 白字」。
   原先选中＝蓝底纹(primary-light #16243F) + 蓝字(#2E6CEC)，色相差为 0、对比度仅约 3.2:1。
   改为实心填充 #2E6CEC（与浅色品牌蓝同色号）+ 纯白字，对比度 ≈ 4.7:1 达标；
   边框用更亮的 #4C8DFF 描一圈，让实心块在深色卡面上仍然边缘清晰。 */
:root[data-theme="dark"] .pill.active,
:root[data-theme="dark"] .mode-item.active,
:root[data-theme="dark"] .prov-tab.active,
:root[data-theme="dark"] .top-tab.active {
  background: #2E6CEC; border-color: #4C8DFF; color: #FFFFFF; font-weight: 600;
  box-shadow: none;
}
:root[data-theme="dark"] .pill.active .ico,
:root[data-theme="dark"] .mode-item.active .ico,
:root[data-theme="dark"] .prov-tab.active .ico { color: #FFFFFF; }
/* 模型卡片是带缩略图的大卡，整块实心会过重：只提亮边框与底色、标题转白 */
:root[data-theme="dark"] .model-item.active {
  border-color: #4C8DFF; background: #1B2E52; color: #FFFFFF;
}
/* 上面这条会被 #mainStage / #imageStage 的 id 级规则压掉边框，这里补同权覆盖 */
:root[data-theme="dark"] #mainStage .pill.active,
:root[data-theme="dark"] #imageStage .pill.active,
:root[data-theme="dark"] #mainStage .model-item.active,
:root[data-theme="dark"] #imageStage .model-item.active { border-color: #4C8DFF; }
/* 二级页签（如 Grok 视频 / VEO 视频）：原本实心亮蓝 #4C8DFF + 白字仅 3.2:1，统一到 #2E6CEC（4.7:1） */
:root[data-theme="dark"] .sub-item.active { background: #2E6CEC; border-color: #4C8DFF; }
:root[data-theme="dark"] .model-item.active .mi-name { color: #FFFFFF; }
/* 2026-10-04 用户要求 P2：① 积分余额不再用红色（红＝警告/扣分语义），改纯白加粗；
   ② 顶栏「管理后台」改中性描边款——蓝色在深色主题下只留给真正的行动控件（生成/充值/链接/滑块）。 */
:root[data-theme="dark"] .acct-chip .acct-bal { color: #FFFFFF; }
:root[data-theme="dark"] .primary-ghost-btn {
  color: rgba(255,255,255,.82); background: transparent; border-color: rgba(255,255,255,.16);
}
:root[data-theme="dark"] .primary-ghost-btn:hover {
  color: #FFFFFF; background: var(--hover-bg); border-color: rgba(255,255,255,.28);
}
.primary-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 14px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #FF8A3D, #FF5E3A); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(255, 94, 58, .35);
  transition: transform .15s, box-shadow .15s;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(255, 94, 58, .45); }

/* ---------- 侧栏导航：v3 高亮（左侧主色条 + 辉光），不位移布局 ---------- */
.sidebar .nav-item.active {
  box-shadow: inset 3px 0 0 var(--primary), 0 2px 10px rgba(var(--primary-rgb), .15);
}

/* ===== B11 · 侧栏风格改造（2026-10-03：参考深色导航栏样式） =====
   参考特征：导航项「图标+文字+右侧›箭头」、当前项中性圆角灰块（无主色条）、
   分组分隔线、深色下近黑底。只动侧栏，不影响其他区域。 */
/* -- 导航项：加大尺寸 + 右侧箭头（nav-item 无子菜单，用 ::after 补箭头；
      nav-parent 已有 .nav-arrow，不重复加） -- */
.nav-item, .nav-parent {
  position: relative; padding: 17px 14px 17px 24px; gap: 22px; border-radius: 10px;
  font-size: 15px; margin-bottom: 10px;
}
.nav-item .ico, .nav-parent .ico { font-size: 22px; }
.nav-child { font-size: 14.5px; gap: 20px; position: relative; padding-left: 24px; }
.nav-child .ico { font-size: 19px; }
.nav-item::after {
  content: '›'; margin-left: auto; font-size: 20px; line-height: 1;
  font-weight: 400; color: var(--fg-subtle); opacity: .5;
  transition: opacity .15s; font-family: Arial, sans-serif;
}
.nav-item:hover::after { opacity: .95; }
/* -- 当前项：中性圆角块，替换原蓝色高亮 + 左主色条（v3） -- */
.sidebar .nav-item.active { box-shadow: none; }
.nav-item.active, .nav-parent.active {
  color: var(--text); background: #E9EBF2; font-weight: 600;
}
/* -- 当前项前导指示（2026-10-04 ㊸ 用户要求：去掉彩色渐变菱形，改纯白圆弧竖条 --
      两端全圆角（border-radius 拉满成胶囊形），浅深主题通用，白色自带柔和光晕 -- */
.nav-item.active::before, .nav-parent.active::before, .nav-child.active::before {
  content: ''; position: absolute; left: 6px; top: 50%;
  width: 4px; height: 16px; margin-top: -8px;
  background: #FFFFFF; border-radius: 4px;
  box-shadow: 0 0 6px rgba(255, 255, 255, .45);
}
/* -- 分组分隔线：2026-10-03 02:06 用户要求去掉一级菜单下方的横线，已移除 -- */
/* -- 联系客服与整体底部边界加深一点 -- */
.sidebar-foot { padding: 12px 25px; }

/* -- 深色主题：侧栏换星空延伸底（半透明暗罩透出全屏 #starfield 层）+ 配套高亮/分隔线；
      文字与图标全白提亮（2026-10-03 用户要求：字号+1、全白更醒目） -- */
:root[data-theme="dark"] { background: #0C0E11; } /* html 深色兜底：星空被「外观设置」关闭时不透白 */
:root[data-theme="dark"] .sidebar { background: rgba(10, 12, 16, .25); border-right-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .sidebar-pinned,
:root[data-theme="dark"] .sidebar-foot { border-top-color: rgba(255,255,255,.06); }
/* 顶栏底边线：2026-10-04 用户要求去掉（该线横跨整个窗口、压在侧栏第一个菜单项上方，
   看起来就像侧栏里多了一条横线；深色顶栏本就是半透明透星空，去掉后与主体更融合）。
   浅色主题保留该边框（白底顶栏需要一条分隔），只去深色。 */
:root[data-theme="dark"] .page-head { background: rgba(10, 12, 16, .25); border-bottom-color: transparent; }
:root[data-theme="dark"] .brand-head { border-right-color: rgba(255,255,255,.06); background: rgba(10, 12, 16, .25); }
:root[data-theme="dark"] .nav-item,
:root[data-theme="dark"] .nav-parent,
:root[data-theme="dark"] .nav-child { color: #FFFFFF; }
:root[data-theme="dark"] .nav-item .ico,
:root[data-theme="dark"] .nav-parent .ico,
:root[data-theme="dark"] .nav-child .ico { color: #FFFFFF; }
:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] .nav-parent:hover,
:root[data-theme="dark"] .nav-child:hover { background: rgba(44, 49, 62, .55); color: #FFFFFF; }
:root[data-theme="dark"] .nav-item.active,
:root[data-theme="dark"] .nav-parent.active,
:root[data-theme="dark"] .nav-child.active { background: rgba(48, 53, 66, .92); color: #FFFFFF; }
:root[data-theme="dark"] .nav-item::after { color: #FFFFFF; opacity: .55; }
:root[data-theme="dark"] .nav-item:hover::after { opacity: 1; }
:root[data-theme="dark"] .nav-parent .nav-arrow { color: #FFFFFF; opacity: .7; }
:root[data-theme="dark"] .sidebar-link { color: #FFFFFF; background: rgba(22, 25, 32, .45); font-size: 15px; }
:root[data-theme="dark"] .sidebar-link .ico { color: #FFFFFF; font-size: 20px; }
:root[data-theme="dark"] .sidebar-link:hover { background: rgba(48, 53, 66, .92); color: #FFFFFF; }
:root[data-theme="dark"] .nav-tree::-webkit-scrollbar-thumb { background: #2A2E36; }

/* ---------- 首页 Bento 功能卡簇 ---------- */
.bento-section { margin: 26px auto 0; width: min(1680px, 100%); }
.bento-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bento-card {
  display: flex; align-items: flex-end; gap: 12px; padding: 18px;
  min-height: 220px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 14px;
  text-decoration: none; color: var(--fg);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bento-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--hover-border); }
.bento-big {
  flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px;
  background: linear-gradient(135deg, var(--primary-light), var(--surface-3));
}
.bc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-name { font-weight: 700; font-size: 15px; color: var(--text); }
.bento-big .bc-name { font-size: 16px; }
.bc-desc { font-size: 15px; color: var(--fg-subtle); line-height: 1.45; }
/* 广告卡背景（前端装修-广告管理上传的图片/视频铺底层，文字浮于其上） */
.bento-card { position: relative; overflow: hidden; }
.ba-bg-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}
.bento-card.has-bg::after {
  /* 2026-10-12 用户反馈整卡黑遮罩把素材压黑 → 取消遮罩，文字改用投影保可读 */
  content: none;
}
.bento-card.has-bg .bc-body { position: relative; z-index: 1; }
.bento-card.has-bg .bc-name, .bento-card.has-bg .bc-desc { color: #fff; }
.bento-card.has-bg .bc-name { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35); }
.bento-card.has-bg .bc-desc { opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.3); }

/* ---------- 每日福利弹层（浅色面板，固定深色文字，dark 下也清晰） ---------- */
/* 2026-10-27 修复（UI 2.0 四项回归发现）：本面板刻意固定浅色（白卡深字），但后来 8698 行
   `.uc-panel{width:830px; min-height:1060px}`（为 IP 档案库设的定尺）与 8706 行
   `[data-theme="dark"] .uc-panel{background:var(--soft)}` 把它误伤了：
     ① 高度被撑到 1060 → 1440×900 下底部约 400px 空白，笔记本屏还得滚动才能看到关闭按钮；
     ② 深色主题变成「深底 #1D212A + 标题色 #1B1F27」→「每日福利」几个字**几乎不可见**。
   两处都靠特异性取胜（0,1,0 打不过 0,3,0），故用 .uc-panel.welfare-panel(0,2,0) 与
   :root[data-theme="dark"] .uc-panel.welfare-panel(0,4,0) 显式复位，不依赖文件顺序。 */
.uc-panel.welfare-panel {
  width: 520px; max-width: 94vw;
  min-height: 0;                    /* 复位 .uc-panel 的 1060px 定尺 */
  max-height: calc(100vh - 96px);   /* 遮罩上下 padding 48px × 2 */
  overflow-y: auto;                 /* 内容超高时在面板内滚，不带动整页 */
  background: #fff; color: #1F2329;
}
:root[data-theme="dark"] .uc-panel.welfare-panel { background: #fff; color: #1F2329; }
.welfare-head { padding: 22px 24px 6px; }
.welfare-banner-title { font-size: 20px; font-weight: 750; color: #1B1F27; }
.welfare-banner-sub { margin-top: 6px; color: #6B7280; font-size: 13px; }
.welfare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 24px; }
.welfare-card { padding: 16px; border: 1px solid #ECEEF1; border-radius: 12px; background: #FBFCFE; }
.welfare-card .wc-ico {
  display: inline-flex; width: 34px; height: 34px; border-radius: 9px;
  align-items: center; justify-content: center; color: #fff; margin-bottom: 10px;
}
.wc-gift { background: linear-gradient(135deg, #FF8A3D, #FF5E62); }
.wc-users { background: linear-gradient(135deg, #4C8DFF, #2E6CEC); }
.wc-film { background: linear-gradient(135deg, #7C5CFF, #5B3DF5); }
.wc-plus { background: linear-gradient(135deg, #34C77B, #1FA85E); }
.wc-name { font-weight: 700; font-size: 15px; color: #1B1F27; }
.wc-desc { margin-top: 4px; font-size: 15px; color: #6B7280; line-height: 1.45; }
.welfare-note { padding: 4px 24px 22px; color: #9CA3AF; font-size: 12px; }

/* ============================================================
   B2（2026-10-02）：视频生成簇视觉统一
   1) 顶部 sub 导航 tab 精致化（双主题）        2) 通用结果卡增强
   3) pvideo/svideo（.pv-*）深色可读性修复       4) 视频主页 #mainStage 创作区轻量卡片感
   纯 CSS，不碰模块 JS；#mainStage 作用域避免污染 imageStage
   ============================================================ */

/* 1) 顶部 sub 导航 tab */
.sub-item { border-radius: 9px; transition: background .15s, color .15s, box-shadow .15s; }
.sub-item.active { box-shadow: 0 3px 10px rgba(var(--primary-rgb), .35); }
.sub-item .ico { opacity: .9; }
:root[data-theme="dark"] .sub-item:hover { background: var(--hover-bg); color: var(--hover-text); }

/* 2) 通用结果卡增强（已 token 化，双主题安全） */
.result-card { border-radius: 12px; box-shadow: var(--shadow-sm); }
.result-card.can-play:hover { box-shadow: var(--shadow-md); }

/* 3) pvideo / svideo 深色主题适配（浅色原样式不动，全覆盖 + 半透明状态色）
   ★ 2026-10-04 D1：原覆盖块只写了 8 组，页面 60+ 组件类多数硬编码浅色未跟；
      现补齐，全部走 token（近黑配方见 :root[data-theme=dark]），状态/语义色改半透明配方
      （对标 B5′ .as-file-row：42% 边 + 12% 底），不新发明配色。 */
:root[data-theme="dark"] .pv-card { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .pv-card-title { color: var(--text); }
:root[data-theme="dark"] .pv-card-sub { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-label { color: var(--fg); }
:root[data-theme="dark"] .pv-label-tip { color: var(--fg-faint); }
:root[data-theme="dark"] .pv-input,
:root[data-theme="dark"] .pv-textarea { color: var(--fg); background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] .pv-btn { color: var(--fg); background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .pv-btn:hover { border-color: var(--hover-border); color: var(--hover-text); }
:root[data-theme="dark"] .pv-btn.primary { color: var(--icon-on-primary); background: var(--primary); border-color: var(--primary); }
:root[data-theme="dark"] .pv-btn.primary:hover { filter: brightness(1.08); color: var(--icon-on-primary); }
:root[data-theme="dark"] .pv-sel,
:root[data-theme="dark"] .pv-num { color: var(--fg); background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] .pv-hint { color: var(--fg-muted); background: var(--primary-light); }
:root[data-theme="dark"] .pv-status { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-vt-title { color: var(--text); }
:root[data-theme="dark"] .pv-vt-title.err { color: var(--danger); }
:root[data-theme="dark"] .pv-vt-title.ok { color: var(--success); }
:root[data-theme="dark"] .pv-vt-title.warn { color: var(--warning); }
:root[data-theme="dark"] .pv-vt-meta { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-cost-badge { background: rgba(255, 255, 255, .2); }
/* 六步条 / 步骤徽章 */
:root[data-theme="dark"] .pv-step { border-color: var(--border); background: var(--surface); color: var(--fg); }
:root[data-theme="dark"] .pv-step:hover { border-color: var(--hover-border); color: var(--hover-text); }
:root[data-theme="dark"] .pv-step.locked { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-step-sep { background: var(--border); }
:root[data-theme="dark"] .pv-step.done .pv-step-no { background: rgba(63, 185, 133, .16); color: var(--success); }
:root[data-theme="dark"] .pv-step-badge { color: var(--primary); }
/* 空态 / 上传区 */
:root[data-theme="dark"] .pv-empty { color: var(--fg-faint); }
:root[data-theme="dark"] .pv-upload-label { color: var(--fg); }
:root[data-theme="dark"] .pv-upload-quota { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-upload-zone { border-color: var(--border); background: var(--surface-2); }
:root[data-theme="dark"] .pv-upload-zone:hover,
:root[data-theme="dark"] .pv-drag-over { border-color: var(--hover-border); background: var(--surface-3); }
:root[data-theme="dark"] .pv-upload-text { color: var(--fg); }
:root[data-theme="dark"] .pv-upload-sub { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-thumb-wrap { border-color: var(--border); background: var(--surface); }
/* chips / 参数 */
:root[data-theme="dark"] .pv-chip { border-color: var(--border); background: var(--surface); color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-chip:hover { border-color: var(--hover-border); color: var(--hover-text); background: var(--surface-3); }
:root[data-theme="dark"] .pv-field-label { color: var(--fg); }
:root[data-theme="dark"] .pv-lines-head { color: var(--fg); }
/* 下拉框（单档位锁定态） */
:root[data-theme="dark"] .pv-drop-btn { border-color: var(--border); background: var(--surface); color: var(--fg); }
:root[data-theme="dark"] .pv-drop-btn:hover { border-color: var(--hover-border); }
:root[data-theme="dark"] .pv-drop-arrow { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-drop.is-locked .pv-drop-btn { background: var(--surface-2); color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-drop-panel { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .pv-drop-item { color: var(--fg); }
:root[data-theme="dark"] .pv-drop-item:hover { background: var(--surface-3); }
/* 分镜表 / 分片卡 */
:root[data-theme="dark"] .pv-shot { border-color: var(--border); background: var(--surface-2); }
:root[data-theme="dark"] .pv-shot-no { color: var(--text); }
:root[data-theme="dark"] .pv-shot-time { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-shot-del { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-shot-del:hover { color: var(--danger); }
:root[data-theme="dark"] .pv-shot-grid label { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-clip { border-color: var(--border); background: var(--surface); }
:root[data-theme="dark"] .pv-clip-time { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-clip-del { color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-clip-del:hover { color: var(--danger); }
:root[data-theme="dark"] .pv-clip-link { color: var(--hover-text); }
:root[data-theme="dark"] .pv-clip-link:hover { color: var(--primary); }
:root[data-theme="dark"] .pv-clip-dur { background: rgba(76, 141, 255, .14); color: #8FB4FF; }
:root[data-theme="dark"] .pv-clip-gen { border-color: var(--border); background: var(--surface); }
:root[data-theme="dark"] .pv-clip-state { background: var(--surface-2); color: var(--fg-subtle); }
:root[data-theme="dark"] .pv-clip-state.generating { background: rgba(76, 141, 255, .14); color: #8FB4FF; }
:root[data-theme="dark"] .pv-clip-state.done { background: rgba(63, 185, 133, .14); color: #5FD0A0; }
:root[data-theme="dark"] .pv-clip-state.failed { background: rgba(240, 97, 107, .14); color: #F0919A; }
/* 预估成本框（原 #fff8f0 米白底，深色下刺眼） + 开关 */
:root[data-theme="dark"] .pv-cost { background: rgba(224, 162, 60, .12); border-color: rgba(224, 162, 60, .42); color: var(--fg); }
:root[data-theme="dark"] .pv-cost b { color: var(--warning); }
:root[data-theme="dark"] .pv-switch { color: var(--fg); }
:root[data-theme="dark"] .pv-switch.pv-off,
:root[data-theme="dark"] .pv-switch.pv-off input[type="checkbox"] { color: var(--fg-subtle); }

/* 4) 视频主页（#mainStage）创作区轻量卡片感：仅视频，不污染 imageStage */
#mainStage .model-item { border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, box-shadow .15s, transform .15s; }
#mainStage .model-item:hover { border-color: var(--hover-border); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
#mainStage .pill { border: 1px solid var(--border); }

/* ============================================================
   B3（2026-10-02）：图片+数字人+画布+电商簇 深色可读性修复 + 视觉统一
   纯 CSS，不碰模块 JS；以 #imageStage/#ecomStage/#dhStage/#canvasStage 作用域隔离
   浅色模式（:root 无[data-theme="dark"]）原样式完全不动
   ============================================================ */

/* 1) 图片簇 #imageStage */
:root[data-theme="dark"] #imageStage .img-thumb,
:root[data-theme="dark"] #imageStage .img-add,
:root[data-theme="dark"] #imageStage .fl-slot,
:root[data-theme="dark"] #imageStage .video-thumb,
:root[data-theme="dark"] #imageStage .video-add,
:root[data-theme="dark"] #imageStage .audio-add { border-color: var(--border); background: var(--surface-2); }
:root[data-theme="dark"] #imageStage .fl-slot.has-file { border-color: var(--hover-border); }
:root[data-theme="dark"] #imageStage .fl-slot .fl-label { color: var(--fg); border-bottom-color: var(--border); background: var(--surface-2); }
:root[data-theme="dark"] #imageStage .fl-slot .fl-label span,
:root[data-theme="dark"] #imageStage .img-hint,
:root[data-theme="dark"] #imageStage .audio-add .t2 { color: var(--fg-faint); }
:root[data-theme="dark"] #imageStage .audio-add .t1 { color: var(--fg); }
/* 图片簇创作区轻量卡片感（与 B2 #mainStage 同款） */
:root[data-theme="dark"] #imageStage .model-item { border-color: var(--border); }
:root[data-theme="dark"] #imageStage .pill { border-color: var(--border); }

/* 2) 电商簇 #ecomStage */
:root[data-theme="dark"] #ecomStage .ecom-upload-label,
:root[data-theme="dark"] #ecomStage .ecom-upload-text { color: var(--fg); }
:root[data-theme="dark"] #ecomStage .ecom-upload-quota,
:root[data-theme="dark"] #ecomStage .ecom-ref-summary,
:root[data-theme="dark"] #ecomStage .ecom-hint,
:root[data-theme="dark"] #ecomStage .param-label,
:root[data-theme="dark"] #ecomStage .ecom-card-status,
:root[data-theme="dark"] #ecomStage .ecom-model-row { color: var(--fg-subtle); }
:root[data-theme="dark"] #ecomStage .ecom-upload-zone,
:root[data-theme="dark"] #ecomStage .ecom-add,
:root[data-theme="dark"] #ecomStage .ecom-card-result,
:root[data-theme="dark"] #ecomStage .ecom-card-prompt,
:root[data-theme="dark"] #ecomStage .ecom-prompt-wrap { border-color: var(--border); background: var(--surface-2); }
:root[data-theme="dark"] #ecomStage .ecom-upload-zone:hover,
:root[data-theme="dark"] #ecomStage .ecom-hint,
:root[data-theme="dark"] #ecomStage .ecom-thumb-role:hover { background: var(--primary-light); }
/* 2026-10-23 用户要求：暗色同样去掉琥珀黄警告色，is-missing 与暗色默认态（var(--border)）同色 */
:root[data-theme="dark"] #ecomStage .ecom-upload-zone.is-missing { background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] #ecomStage .ecom-upload-plus,
:root[data-theme="dark"] #ecomStage .ecom-upload-sub,
:root[data-theme="dark"] #ecomStage .ecom-saved,
:root[data-theme="dark"] #ecomStage .ecom-reset-btn,
:root[data-theme="dark"] #ecomStage .ecom-empty { color: var(--fg-faint); }
:root[data-theme="dark"] #ecomStage .ecom-thumb-wrap,
:root[data-theme="dark"] #ecomStage .ecom-thumb-role,
:root[data-theme="dark"] #ecomStage .ecom-select,
:root[data-theme="dark"] #ecomStage .ecom-count,
:root[data-theme="dark"] #ecomStage .ecom-card,
:root[data-theme="dark"] #ecomStage .ecom-card-tag,
:root[data-theme="dark"] #ecomStage .ecom-thumb,
:root[data-theme="dark"] #ecomStage .ecom-img-dl,
:root[data-theme="dark"] #ecomStage .ecom-genall { border-color: var(--border); }
:root[data-theme="dark"] #ecomStage .ecom-thumb-role,
:root[data-theme="dark"] #ecomStage .ecom-select,
:root[data-theme="dark"] #ecomStage .ecom-count { color: var(--fg); }
:root[data-theme="dark"] #ecomStage .ecom-card-name { color: var(--text); }
:root[data-theme="dark"] #ecomStage .ecom-card-result,
:root[data-theme="dark"] #ecomStage .ecom-card-prompt,
:root[data-theme="dark"] #ecomStage .ecom-prompt-wrap,
:root[data-theme="dark"] #ecomStage .ecom-card-tag { background: var(--surface-2); }
:root[data-theme="dark"] #ecomStage .ecom-prompt-preview { color: var(--fg-subtle); }

/* 3) 数字人簇 #dhStage */
:root[data-theme="dark"] #dhStage .dh-ex-input { color: var(--text); background: var(--surface-2); }

/* 4) 画布簇 #canvasStage */
:root[data-theme="dark"] #canvasStage .cv-name,
:root[data-theme="dark"] #canvasStage .cv-btn,
:root[data-theme="dark"] #canvasStage .cv-zoom-val,
:root[data-theme="dark"] #canvasStage .cv-modal-head h3,
:root[data-theme="dark"] #canvasStage .cv-item .cvi-name,
:root[data-theme="dark"] .cv-sel,
:root[data-theme="dark"] .cv-sel-opt,
:root[data-theme="dark"] .cv-mention-item,
:root[data-theme="dark"] .cv-make-panel #cvMakePrompt,
:root[data-theme="dark"] .cv-text-panel-ed,
:root[data-theme="dark"] .cv-text-panel-model,
:root[data-theme="dark"] #canvasStage .cv-node.app .cv-app-sel,
:root[data-theme="dark"] #canvasStage .cv-node.app .cv-app-prompt,
:root[data-theme="dark"] #canvasStage .cv-node.app .cv-app-meta { color: var(--text); }
:root[data-theme="dark"] #canvasStage .cv-lb-item,
:root[data-theme="dark"] #canvasStage .cv-add-title,
:root[data-theme="dark"] #canvasStage .cv-add-item .ico,
:root[data-theme="dark"] #canvasStage .cv-zbtn,
:root[data-theme="dark"] #canvasStage .cv-empty-tip,
:root[data-theme="dark"] #canvasStage .cv-picker-item .cvp-audio,
:root[data-theme="dark"] .cv-mention-pop .cv-mention-title,
:root[data-theme="dark"] .cv-make-ico,
:root[data-theme="dark"] .cv-ref-add,
:root[data-theme="dark"] .cv-text-panel-add,
:root[data-theme="dark"] .cv-text-ref-full,
:root[data-theme="dark"] #canvasStage .cv-node.app .cv-ref-none,
:root[data-theme="dark"] .cv-ref-doc-name,
:root[data-theme="dark"] .cv-text-model-pop .qm-caps .cap { color: var(--fg-subtle); }
:root[data-theme="dark"] .cv-sel-opt:hover { color: var(--text); }
:root[data-theme="dark"] .cv-ref-add em,
:root[data-theme="dark"] .cv-make-panel #cvMakePrompt:empty::before,
:root[data-theme="dark"] .cv-text-panel-ed:empty::before,
:root[data-theme="dark"] .cv-text-panel-add em { color: var(--text-tertiary); }
:root[data-theme="dark"] .cv-text-panel-result { background: rgba(255,255,255,.05); border-color: var(--border); }
/* 画布：浅底卡片/输入框 → 深底 */
:root[data-theme="dark"] .cv-make-panel,
:root[data-theme="dark"] .cv-text-panel,
:root[data-theme="dark"] .cv-mention-pop,
:root[data-theme="dark"] .cv-sel-menu,
:root[data-theme="dark"] .cv-text-model-pop { border-color: var(--border); }
:root[data-theme="dark"] .cv-make-input,
:root[data-theme="dark"] .cv-text-input,
:root[data-theme="dark"] .cv-ref-item,
:root[data-theme="dark"] .cv-ref-item.cv-ref-doc,
:root[data-theme="dark"] .cv-mention-item img,
:root[data-theme="dark"] .cv-mention-item .cv-mention-doc-ico,
:root[data-theme="dark"] .cv-ref-zoom,
:root[data-theme="dark"] .cv-sel,
:root[data-theme="dark"] .cv-text-panel-model,
:root[data-theme="dark"] .cv-text-role-btn { border-color: var(--border); background: var(--surface-2); }
:root[data-theme="dark"] .cv-ref-add,
:root[data-theme="dark"] .cv-text-panel-add { border-color: var(--border); color: var(--fg-subtle); background: var(--surface); }
/* 画布：hover/active 浅蓝底 → token */
:root[data-theme="dark"] #canvasStage .cv-lb-item:hover,
:root[data-theme="dark"] #canvasStage .cv-lb-item.active,
:root[data-theme="dark"] #canvasStage .cv-add-item:hover,
:root[data-theme="dark"] #canvasStage .cv-zbtn:hover,
:root[data-theme="dark"] #canvasStage .cv-item:hover,
:root[data-theme="dark"] .cv-sel-opt:hover,
:root[data-theme="dark"] .cv-optimize-btn:hover,
:root[data-theme="dark"] .cv-mention-item.active,
:root[data-theme="dark"] .cv-mention-item:hover,
:root[data-theme="dark"] .cv-text-panel-model:hover,
:root[data-theme="dark"] .cv-text-role-btn:hover,
:root[data-theme="dark"] .cv-text-model-pop .qm-item:hover,
:root[data-theme="dark"] .cv-text-model-pop .qm-item.active,
:root[data-theme="dark"] .cv-make-ico:hover { background: var(--hover-bg); }
:root[data-theme="dark"] #canvasStage .cv-lb-item.active,
:root[data-theme="dark"] .cv-sel-opt.active,
:root[data-theme="dark"] .cv-mention-item.active,
:root[data-theme="dark"] .cv-text-model-pop .qm-item.active { background: var(--primary-light); }
/* 画布：连线/网格点/滚动条 深色调 */
:root[data-theme="dark"] #canvasStage .cv-viewport { background-color: #000; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); }
:root[data-theme="dark"] #canvasStage .cv-edge-path { stroke: rgba(255,255,255,.35); }
:root[data-theme="dark"] #canvasStage .cv-edge-arrow { fill: rgba(255,255,255,.35); }
:root[data-theme="dark"] #canvasStage .cv-leftbar::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .cv-sel-menu::-webkit-scrollbar-thumb { background: var(--border); }
:root[data-theme="dark"] #canvasStage .cv-leftbar::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .cv-sel-menu::-webkit-scrollbar-thumb:hover { background: var(--hover-border); }
/* 画布：节点工具/标签 深色调 */
:root[data-theme="dark"] #canvasStage .cv-node-tools { background: rgba(20,25,35,.95); border-color: var(--border); }
:root[data-theme="dark"] #canvasStage .cv-node-tools button { border-color: var(--border); }
:root[data-theme="dark"] #canvasStage .cv-node-tools button:hover { border-color: var(--hover-border); }
:root[data-theme="dark"] #canvasStage .cv-node .cv-img-empty { color: var(--fg-faint); }
:root[data-theme="dark"] #canvasStage .cv-node.link-target .cv-port,
:root[data-theme="dark"] #canvasStage .cv-node:hover .cv-port,
:root[data-theme="dark"] #canvasStage .cv-node.selected .cv-port { background-color: var(--primary-light); }
:root[data-theme="dark"] #canvasStage .cv-node.note { background: var(--surface-2); border-color: var(--warning); }
:root[data-theme="dark"] #canvasStage .cv-node.note .cv-note-text { color: var(--fg); }
:root[data-theme="dark"] #canvasStage .cv-node.note .cv-note-title { color: var(--warning); }
:root[data-theme="dark"] #canvasStage .cv-node.note .cv-node-size { background: rgba(224,162,60,.2); color: var(--warning); }
:root[data-theme="dark"] #canvasStage .cv-group-label { background: var(--primary-light); color: var(--primary); }
:root[data-theme="dark"] #canvasStage .cv-node-head { background: rgba(var(--primary-rgb),.2); border-color: var(--primary-dark); color: var(--text); }
/* 画布：平衡/分隔 深色调 */
:root[data-theme="dark"] #canvasStage .cv-balance { background: rgba(224,162,60,.14); }
:root[data-theme="dark"] #canvasStage .cv-ctxmenu button { color: var(--fg); }
:root[data-theme="dark"] #canvasStage .cv-ctxmenu button:hover { background: var(--hover-bg); }
:root[data-theme="dark"] #canvasStage .cv-ctxmenu button.danger:hover { background: rgba(240,97,107,.15); }
:root[data-theme="dark"] #canvasStage .cv-ctxmenu .cvm-sep { background: var(--border); }
:root[data-theme="dark"] #canvasStage .cv-ctxmenu .cvm-key { color: var(--fg-faint); }
:root[data-theme="dark"] .cv-make-params { border-top-color: var(--border); }

/* ============ B4：AI 工具簇深色可读性统一（2026-10-02） ============
   作用域：工具三大 stage（.tools-stage / .fs-stage / .fb-stage）。纯深色覆盖，不动浅色。
   修复：① 左侧栏 jm-left 硬编码亮底 #FAFBFC → 深底 token；
   ② 卡内/标题/说明 硬编码深字（#3A3F47/#252938/#4E5969/#1D2129/#454A5C/#1B1F27）→ token 浅字；
   ③ 分段胶囊 Tab 亮条 #F2F3F5 → 深底；④ card hover / sticky 浅线 → token 深线；
   ⑤ 全局 wm-btn / dv-btn 深字 → 浅字（工具页及他处通用）。 */
[data-theme='dark'] .tools-stage .jm-left,
[data-theme='dark'] .fs-stage .jm-left,
[data-theme='dark'] .fb-stage .jm-left {
  background: var(--surface-2);
  border-right-color: var(--border);
}
[data-theme='dark'] .tools-stage .jm-left::-webkit-scrollbar-thumb,
[data-theme='dark'] .fs-stage .jm-left::-webkit-scrollbar-thumb,
[data-theme='dark'] .fb-stage .jm-left::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

/* 卡内 / 标题 / 说明 硬编码深字 → token 浅字（深底深字修复） */
[data-theme='dark'] .tools-stage .generate-summary-value,
[data-theme='dark'] .fs-stage .generate-summary-value,
[data-theme='dark'] .fb-stage .generate-summary-value { color: var(--text); }

[data-theme='dark'] .tools-stage .result-head h3,
[data-theme='dark'] .fs-stage .result-head h3,
[data-theme='dark'] .fb-stage .result-head h3 { color: var(--text); }

[data-theme='dark'] .tools-stage .dewm-picked:not(.ok):not(.warn),
[data-theme='dark'] .fs-stage .dewm-picked:not(.ok):not(.warn),
[data-theme='dark'] .fb-stage .dewm-picked:not(.ok):not(.warn) { color: var(--text); }

[data-theme='dark'] .tools-stage .dewm-note b,
[data-theme='dark'] .fs-stage .dewm-note b,
[data-theme='dark'] .fb-stage .dewm-note b { color: var(--text); }

[data-theme='dark'] .tools-stage .dewm-guide-head b,
[data-theme='dark'] .fs-stage .dewm-guide-head b,
[data-theme='dark'] .fb-stage .dewm-guide-head b { color: var(--fg); }

[data-theme='dark'] .tools-stage .empty h4,
[data-theme='dark'] .fs-stage .empty h4,
[data-theme='dark'] .fb-stage .empty h4 { color: var(--text); }

[data-theme='dark'] .tools-stage .music-head-txt h3,
[data-theme='dark'] .fs-stage .music-head-txt h3,
[data-theme='dark'] .fb-stage .music-head-txt h3 { color: var(--text); }
[data-theme='dark'] .tools-stage .music-head-txt p,
[data-theme='dark'] .fs-stage .music-head-txt p,
[data-theme='dark'] .fb-stage .music-head-txt p { color: var(--fg-subtle); }

[data-theme='dark'] .tools-stage .wm-sec-head,
[data-theme='dark'] .fs-stage .wm-sec-head,
[data-theme='dark'] .fb-stage .wm-sec-head { color: var(--text); }

/* 分段胶囊 Tab 亮条 #F2F3F5 → 深底（避免深底上的突兀亮条） */
[data-theme='dark'] .tools-stage .dewm-tabs,
[data-theme='dark'] .fs-stage .dewm-tabs,
[data-theme='dark'] .fb-stage .dewm-tabs,
[data-theme='dark'] .tools-stage .mode-tabs,
[data-theme='dark'] .fs-stage .mode-tabs,
[data-theme='dark'] .fb-stage .mode-tabs { background: var(--surface-2); }
[data-theme='dark'] .tools-stage .dewm-tab:not(.active):not(:hover),
[data-theme='dark'] .fs-stage .dewm-tab:not(.active):not(:hover),
[data-theme='dark'] .fb-stage .dewm-tab:not(.active):not(:hover) { color: var(--fg-muted); }
[data-theme='dark'] .tools-stage .mode-tabs .dewm-tab:not(.active):not(:hover),
[data-theme='dark'] .fs-stage .mode-tabs .dewm-tab:not(.active):not(:hover),
[data-theme='dark'] .fb-stage .mode-tabs .dewm-tab:not(.active):not(:hover) { color: var(--fg-muted); }

/* card hover / sticky 浅线 → token 深线（换脸页 / 人脸打码页 2026-10-09 起排除：
   hover 不再变蓝，回落 .card:hover 的 #D7D9DE 白/灰描边，与 fs/cr 三页统一） */
[data-theme='dark'] .tools-stage .card:hover { border-color: var(--hover-border); }
[data-theme='dark'] .tools-stage .jm-left > .card:last-child,
[data-theme='dark'] .fs-stage .jm-left > .card:last-child,
[data-theme='dark'] .fb-stage .jm-left > .card:last-child { border-color: var(--hover-border); }

/* 全局按钮：深字 → 浅字（wm-btn / dv-btn 工具页及他处通用） */
[data-theme='dark'] .wm-btn { color: var(--text); }
[data-theme='dark'] .dv-btn { color: var(--text); }

/* ============================================================
   B5（2026-10-02）：全站硬编码浅色 → 语义 token 扫尾 + 深色残留补丁
   做法说明：本轮不写「dark 副本」，而是把源规则里的硬编码值换成等价 token
   （token 的 light 取值与原值几乎相同 → 浅色外观不变；dark 取值统一由
   :root[data-theme="dark"] 接管），避免同一条样式两份源、日后必然漂移。
   批量替换由 _verify/tokenize_css.js 完成（含反色组合护栏）。
   以下 3 类无法用「换值」解决，仍以 dark 覆盖处理：
     ① 反色 chip（深底白字）→ 深底白字在下发到 dark 时会变「浅底白字」
     ② 暖色提示块（亮橙/亮棕面片）→ 改为半透明暖调
     ③ 深色下过亮的白 tooltip / 提示条
   ============================================================ */

/* ① 反色 chip：原写法「background: var(--text); color:#fff」依赖 light 下 text 是深色 */
:root[data-theme="dark"] .duration-value {
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border);
}
:root[data-theme="dark"] .duration-value .dv-unit { color: var(--fg-subtle); }
:root[data-theme="dark"] .rc-thumb-placeholder { background: var(--surface-2); color: var(--fg-subtle); }
/* 反向 chip 的另一路：深底 + 白字徽标（.tpl-tab.active / .tpl-dropdown）本身已是深 chip，
   dark 下与深色页面几乎同色 → 提亮为 token 面 + 浅字，保证可辨认 */
:root[data-theme="dark"] .tpl-tab.active { background: var(--grad-cta); color: #fff; }
:root[data-theme="dark"] .tpl-dropdown { background: var(--surface-2); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .tpl-dropdown-item { color: var(--fg-muted); }
:root[data-theme="dark"] .tpl-dropdown-item:hover { background: var(--hover-bg); color: var(--hover-text); }
:root[data-theme="dark"] .tpl-dropdown-item.active { background: var(--primary-light); color: var(--hover-text); }

/* ② 暖色提示块：原「亮橙/亮棕实底面片」在深色页上是刺眼的补丁 → 半透明暖调 + token 字色 */
:root[data-theme="dark"] .fs-compliance { border-color: rgba(224, 162, 60, .26); }
:root[data-theme="dark"] .fs-compliance-head { color: var(--warning); }
:root[data-theme="dark"] .fs-compliance-text { color: var(--fg-muted); }
:root[data-theme="dark"] .site-notice { background: rgba(224, 162, 60, .12); border-color: rgba(224, 162, 60, .28); color: #E9C98A; }
:root[data-theme="dark"] .site-notice .ico { color: var(--warning); }
:root[data-theme="dark"] .wm-share-bar { background: rgba(224, 162, 60, .10); border-top-color: rgba(224, 162, 60, .26); }
:root[data-theme="dark"] .wm-share { color: #E9C98A; }

/* ③ 其它 dark 下偏亮的浅色残留 */
:root[data-theme="dark"] .rc-tag.cost { color: #FFA45C; background: rgba(224, 162, 60, .14); }
:root[data-theme="dark"] .mr-del { background: rgba(240, 97, 107, .12); border-color: rgba(240, 97, 107, .32); }


/* ============================================================
   B5′ · 资产 + 作品 深色收口（2026-10-02）
   —— 交接文档批次表 B5（资产+作品）。本区绝大部分已由「全站 token 化」
      自动接管（.as-card/.wk-card 已走 var(--surface)/var(--line)），
      这里只补 token 化解决不了的三类：
      ① 空状态图标色（浅灰在深底偏暗）　② 文件行状态底色（固定浅红/浅绿＝白补丁）
      ③ 预览关闭按钮（原本就用深蓝 rgba(15,22,35,…)＝为深色场景留的坑）
   —— .as-btn.primary / .as-tab.active / .wk-tab.active / .as-badge 等「有色底 + 白字」
      是刻意保留的反色组合，**不要**改成 token（改了会变成浅底浅字）。
   ============================================================ */
[data-theme='dark'] .as-empty .ico,
[data-theme='dark'] .wk-empty .ico { color: var(--fg-subtle); }

[data-theme='dark'] .as-file-row.bad,
[data-theme='dark'] .as-file-row.failed { border-color: rgba(240, 97, 107, .42); background: rgba(240, 97, 107, .12); }
[data-theme='dark'] .as-file-row.done { border-color: rgba(63, 185, 133, .42); background: rgba(63, 185, 133, .12); }

[data-theme='dark'] .wk-preview-close { background: rgba(255, 255, 255, .1); color: var(--text); }
[data-theme='dark'] .wk-preview-close:hover { background: rgba(255, 255, 255, .18); }

/* ============================================================
   主 CTA 渐变（2026-10-04 用户拍板：A 方案「蓝→紫同族」）
   —— 范围＝各面板的**主操作按钮**；**刻意不含**选中态：
      tab / chip / pill / .active 一律保持实心蓝底白字（小控件上渐变会削弱可辨识度，见 P1 决策），
      大卡片选中维持半透明蓝底 + 描边。层次靠**浓度**分，不靠换色相。
      橙色 .primary-btn（充值营销位）按 P2 约定保持原样，不参与。
   —— 放文件末尾：靠「后来者 + 同权」压掉前面类里写死的 hover 实心色（.generate-btn:hover 等）。
   ============================================================ */
.generate-btn, .qc-generate, .tm-go, .sm-submit, .cv-td-unlock,
.d-btn.primary, .cv-btn.primary, .as-btn.primary, .wk-new,
.dv-btn.primary, .dh-btn.primary, .dh-tb.primary, .vm-btn.primary,
.pv-btn.primary, .wm-btn.primary {
    background-image: var(--grad-cta);
    background-color: var(--primary);
}
.generate-btn:hover, .qc-generate:hover, .tm-go:hover, .sm-submit:hover, .cv-td-unlock:hover,
.d-btn.primary:hover, .cv-btn.primary:hover, .as-btn.primary:hover, .wk-new:hover,
.dv-btn.primary:hover, .dh-btn.primary:hover, .dh-tb.primary:hover, .vm-btn.primary:hover,
.pv-btn.primary:hover, .wm-btn.primary:hover {
    background-image: var(--grad-cta-hover);
    background-color: var(--primary-dark);
    filter: brightness(1.06);
}
.generate-btn:active, .qc-generate:active { filter: brightness(.94); }
.generate-btn:disabled, .generate-btn.disabled { background-image: none; filter: none; }

/* ============================================================
   【试点版，待用户拍板】小控件选中态 → 半透明渐变（2026-10-04）
   —— 用户要求：小按钮（pill/tab/chip 的选中态）也用渐变，但要是**半透明**的，
      和主 CTA 保持同一条蓝→紫色带（100deg，同端点），透明度 38% 叠在深底上。
   —— ① 同一条色带 → 与主按钮血缘一致；② 半透明 → 不跟主 CTA 抢视觉重量；
      ③ 叠色后有效底色约 rgb(31,57,110)，白字对比 ≈ 8:1，可读性反而比实心更稳。
   —— 只作用于深色主题；集中一块，用户不满意时整块删除即回退。
   ============================================================ */
:root[data-theme="dark"] {
    --grad-cta-soft: linear-gradient(100deg, rgba(46,108,236,.38) 0%, rgba(94,99,245,.38) 55%, rgba(139,92,246,.38) 100%);
    --grad-cta-soft-border: rgba(96, 141, 255, .55);
    /* 深色下的主题感知别名（浅色值在 :root）：中级动作=半透明渐变，收官动作=全渐变 */
    --grad-soft-bg: var(--grad-cta-soft);
    --grad-soft-border: var(--grad-cta-soft-border);
    --grad-apply: var(--grad-cta);
}
:root[data-theme="dark"] .pill.active,
:root[data-theme="dark"] .mode-item.active,
:root[data-theme="dark"] .prov-tab.active,
:root[data-theme="dark"] .top-tab.active,
:root[data-theme="dark"] .sub-item.active,
:root[data-theme="dark"] .as-tab.active,
:root[data-theme="dark"] .as-tag-pill.active,
:root[data-theme="dark"] .wk-tab.active,
:root[data-theme="dark"] .cvhub-tab.active,
:root[data-theme="dark"] .cvhub-cat.active,
:root[data-theme="dark"] .cvhub-tplpane .tpl-side-item.active,
:root[data-theme="dark"] .dh-avtag.active,
:root[data-theme="dark"] .dhv-tab.active,
:root[data-theme="dark"] .dhv-tag.active,
:root[data-theme="dark"] .dh-vtab.active,
:root[data-theme="dark"] .dhy-chip.on,
:root[data-theme="dark"] .dewm-tab.active,
:root[data-theme="dark"] .dewm-tab.active:hover,
:root[data-theme="dark"] .voice-chip.active,
:root[data-theme="dark"] .voice-chip.active:hover,
:root[data-theme="dark"] .music-ver.active,
:root[data-theme="dark"] .music-ver.active:hover,
:root[data-theme="dark"] .pv-btn.primary {
    background-color: rgba(46, 108, 236, .12);
    background-image: var(--grad-cta-soft);
    border-color: var(--grad-cta-soft-border);
    color: #FFFFFF;
    box-shadow: none;
}
/* #mainStage / #imageStage 的 id 级边框规则会压过上面类级 border-color，补同权覆盖 */
:root[data-theme="dark"] #mainStage .pill.active,
:root[data-theme="dark"] #imageStage .pill.active { border-color: var(--grad-cta-soft-border); }

/* 参数标签（视频时长/画质参数/画面比例等 .param-label）深色下纯白，2026-10-04
   —— 3713 行的全局 .param-label 与 4337 行 #ecomStage id 级规则都压不住白字，两档一起覆盖 */
:root[data-theme="dark"] .param-label,
:root[data-theme="dark"] #ecomStage .param-label { color: #FFFFFF; }

/* ============================================================
   顶栏按钮收口（2026-10-04 用户要求）：
   ① 「充值」按钮已从 index.html 移除（入口收敛到积分胶囊）；
   ② 顶栏其余按钮文字全白；
   ③ 外框统一成「管理后台」那款——透明底 + rgba(255,255,255,.16) 描边。
   全部深色作用域，浅色主题不受影响；集中一块，不满意整块删除即回退。
   ============================================================ */
:root[data-theme="dark"] .top-btn,
:root[data-theme="dark"] .welfare-btn {
  color: #FFFFFF; border-color: rgba(255,255,255,.16); background: transparent;
}
:root[data-theme="dark"] .top-btn:hover,
:root[data-theme="dark"] .welfare-btn:hover { border-color: rgba(255,255,255,.28); }
:root[data-theme="dark"] .acct-chip {
  color: #FFFFFF; background: transparent; border-color: rgba(255,255,255,.16);
}
:root[data-theme="dark"] .acct-chip .acct-unit,
:root[data-theme="dark"] .acct-chip .acct-name { color: #FFFFFF; }
:root[data-theme="dark"] .ghost-btn {
  color: #FFFFFF; border-color: rgba(255,255,255,.16); background: transparent;
}
:root[data-theme="dark"] .ghost-btn:hover { color: #FFFFFF; border-color: rgba(255,255,255,.28); }
:root[data-theme="dark"] .primary-ghost-btn {
  color: #FFFFFF; border-color: rgba(255,255,255,.16);
}
:root[data-theme="dark"] .primary-ghost-btn:hover { color: #FFFFFF; border-color: rgba(255,255,255,.28); }

/* ============================================================
   渐变描边卡（2026-10-04，参考用户提供的鼠标海报）
   —— 范围＝仅首页快捷创作大卡(.quick-card)；热门创作(.bento-card) /
      精选案例(.tpl-card) 已按用户要求改回原样式（2026-10-04 ㉔）。
   —— 技法＝双背景：padding-box 一层原卡底色、border-box 一层渐变，
      border-color 置 transparent 让渐变从 1px 边框里透出来
      （border-image 不认圆角，故不用）。
   —— 深色作用域；不满意整块删除即回退。
   ============================================================ */
:root[data-theme="dark"] {
  /* 二次暗化：仅快捷创作大卡使用，隐约彩边不抢戏 */
  --grad-border: linear-gradient(135deg, #1D3D85 0%, #1D6173 32%, #4E338C 68%, #6E2A7E 100%);
}
:root[data-theme="dark"] .quick-card {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--grad-border) border-box;
}
/* 快捷创作大卡·模型选择器文字全白（原为 var(--primary) 蓝字） */
:root[data-theme="dark"] .qc-model { color: #FFFFFF; }

/* ============================================================
   快捷创作大卡·双流光描边（2026-10-09 用户要求）
   —— 范围＝首页视频生成 / 图片生成共用的大卡 .quick-card
   —— 技法＝::before 画一个 1px 圆环（mask-composite 挖空中心），
      环上是 conic-gradient 的两道光带（蓝/紫，相隔 180°，与静态渐变同色系），
      注册 @property 让角度可插值，光带绕边框匀速流转。
   —— 不支持 @property 的浏览器自动退化为静态双光带，不破相。
   —— 不满意删除本段即回退（上面的静态渐变描边不受影响）。
   ============================================================ */
@property --qf-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.quick-card { position: relative; }
.quick-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--qf-angle),
    transparent 0deg,
    rgba(59,130,246,0) 12deg, rgba(59,130,246,.55) 38deg, transparent 72deg,
    transparent 180deg,
    rgba(139,92,246,0) 192deg, rgba(139,92,246,.55) 218deg, transparent 252deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: qc-flow 7s linear infinite;
  pointer-events: none;
}
@keyframes qc-flow { to { --qf-angle: 360deg; } }
/* 暗色下光带更亮（底是暗色渐变描边，需要更高对比才可见） */
:root[data-theme="dark"] .quick-card::before {
  background: conic-gradient(from var(--qf-angle),
    transparent 0deg,
    rgba(96,165,250,0) 12deg, rgba(96,165,250,.95) 38deg, transparent 72deg,
    transparent 180deg,
    rgba(196,141,255,0) 192deg, rgba(196,141,255,.95) 218deg, transparent 252deg);
}

/* ===== 数字人向导·第一列（文案获取）整列字号 +2px（2026-10-04 用户试效果，只作用第一列，不碰二/三列） ===== */
.dh-left .dh-colhead .dh-step-t { font-size: 18px; }
.dh-left .dh-block-head { font-size: 15px; }
.dh-left .dewm-tab { font-size: 15.5px; }
.dh-left .dh-draft-tip { font-size: 14.5px; }
.dh-left .dh-btn-mini { font-size: 14px; height: 32px; }
.dh-left .dh-aiw-field > span { font-size: 14.5px; }
.dh-left .dh-ex-ta { font-size: 15px; }
.dh-left .dh-aiw-input { font-size: 15px; }
.dh-left .dh-textarea { font-size: 15px; }
.dh-left .dh-tb { font-size: 14px; height: 30px; }
.dh-left .dh-count { font-size: 14px; }
.dh-left .dh-ex-tip { font-size: 14px; }
.dh-left .dh-ex-status { font-size: 14.5px; }
.dh-left .dh-aiw-status { font-size: 14.5px; }

/* ===== 数字人第一列四字段区：圆角输入框 + 标签底色（2026-10-04，间距在 avatar.js 内联 gap:8→24px） ===== */
/* 注：原 .dh-ex-ta 写的 var(--radius) 从未定义过，解析失败才是直角元凶；这里显式给 8px */
.dh-left .dh-aiw-field .dh-ex-ta { border-radius: var(--radius-md); }
.dh-left .dh-aiw-field > span {
  align-self: flex-start; padding: 0; border-radius: 0;
  background: none; color: #fff; font-weight: 600;
}

/* ===== 2026-10-04 追加：草稿条钉列底 + 人设面板与导航条间隔两行 ===== */
/* 草稿条作为 .dh-left 直接子元素（footer）：flex 列布局下自动贴底，不随 .dh-scroll 滚动 */
.dh-left > .dh-draft-bar { flex: 0 0 auto; margin: 8px 14px 14px; }
/* 人设IP 面板与渠道 tabs 之间空约两行（tabs 自带 margin-bottom:10px，合计约 50px） */
.dh-left #dhMpPane { margin-top: 40px; }

/* ===== 数字人向导·第二/三列（生成文案 / 整理文案）整列字号 +2px + 去工具条上分隔线（2026-10-04，两列同款式） ===== */
.dh-ph[data-ph="2"] .dh-colhead .dh-step-t, .dh-ph[data-ph="3"] .dh-colhead .dh-step-t { font-size: 18px; }
/* 第二步「视频生成」列（2v）列头字号同步 18px，与文案预览/音频生成对齐（2026-10-05） */
.dh-ph[data-ph="2v"] .dh-colhead .dh-step-t { font-size: 18px; }
/* R90e（2026-10-05）：文案预览（2p）/ 音频生成（2a）列头字号也同步 18px，与视频生成（2v）一致 */
.dh-ph[data-ph="2p"] .dh-colhead .dh-step-t,
.dh-ph[data-ph="2a"] .dh-colhead .dh-step-t { font-size: 18px; }
/* 2026-10-04 修正：用户要删的是工具条（AI写行）上方的分隔线（.dh-myav-foot 的 border-top），不是列头下边线；列头线恢复以与第一列对齐 */
/* R90m：第二步「文案编辑」列（2p）与第一、二步同款整理/文案列（2/3）保持一致的列内字号/按钮规格 */
.dh-ph[data-ph="2"] .dh-myav-foot, .dh-ph[data-ph="3"] .dh-myav-foot, .dh-ph[data-ph="2p"] .dh-myav-foot { border-top: none; padding-top: 0; margin-top: 0; }
.dh-ph[data-ph="2"] .dh-btn-mini, .dh-ph[data-ph="3"] .dh-btn-mini, .dh-ph[data-ph="2p"] .dh-btn-mini { font-size: 14px; height: 32px; }
.dh-ph[data-ph="2"] .dh-opt-words, .dh-ph[data-ph="3"] .dh-opt-words { font-size: 14.5px; }
.dh-ph[data-ph="2"] .dh-aiw-hint, .dh-ph[data-ph="3"] .dh-aiw-hint { font-size: 14px; }
.dh-ph[data-ph="2"] .dh-tr-item, .dh-ph[data-ph="3"] .dh-tr-item { font-size: 15px; }
.dh-ph[data-ph="2"] .dh-textarea, .dh-ph[data-ph="3"] .dh-textarea, .dh-ph[data-ph="2p"] .dh-textarea { font-size: 15px; }
.dh-ph[data-ph="2"] .dh-textbar .dh-tb, .dh-ph[data-ph="3"] .dh-textbar .dh-tb, .dh-ph[data-ph="2p"] .dh-textbar .dh-tb { font-size: 14px; height: 30px; }
.dh-ph[data-ph="2"] .dh-count, .dh-ph[data-ph="3"] .dh-count, .dh-ph[data-ph="2p"] .dh-count { font-size: 14px; }
.dh-ph[data-ph="2"] .dh-aiw-status, .dh-ph[data-ph="3"] .dh-aiw-status { font-size: 14.5px; }
/* 第二列只留字数：计数贴右（2026-10-04 功能按钮迁入第三列后保持原视觉位置） */
.dh-ph[data-ph="2"] .dh-textbar .dh-char-cnt { margin-left: auto; }
/* 内容框默认高度（R91，2026-10-05）：默认高度由样式层兜底，不再依赖 JS 内联高度——
   此前 565px 只写在 JS 里，切页/切步后内联高度一丢就缩成内容高度（R90r/R90u 反复踩）。
   JS 的 dhAlignCol2Ta 现在只负责「底边对齐」的增量，量不准也只是没对齐，不会塌成 132px。 */
.dh-wrap { --dh-col-h: 565px; }
.dh-ph[data-ph="2"] .dh-textarea,
.dh-ph[data-ph="3"] .dh-textarea,
.dh-ph[data-ph="2p"] .dh-textarea { min-height: var(--dh-col-h); }

/* 七按钮统一渐变（2026-10-04 起；2026-10-05 加入视频仿写的 开始识别/开始仿写、AI帮写的 AI帮写按钮随三列迁移入列、数字人生成试听）：
   IP档案库 / AI写 / 整理 / 开始识别 / 开始仿写 / AI帮写 / 生成试听 */
#dhIpEntry, #dhMpWrite, #dhPolishSplit, #dhPolishSplitS2, #dhVidExtract, #dhVidGo, #dhAiWriteGo, #dhBtnPreview {
  background: var(--grad-cta, var(--primary));
  border-color: transparent;
  color: #fff;
}
#dhIpEntry:hover, #dhMpWrite:hover, #dhPolishSplit:hover, #dhVidExtract:hover, #dhVidGo:hover, #dhAiWriteGo:hover, #dhBtnPreview:hover {
  background: var(--grad-cta-hover, var(--primary-dark));
}

/* R90n/R90q 曾移除第一步第三列列头下边线（当时工具条贴着列头避免双线）；
   后因列头下方加了 20px 间距块，工具条不再贴列头，缺线显得突兀——R97 恢复默认下边线（2026-10-06） */

/* ===== 第三列整理框：contenteditable 悬挂缩进 + 合规检测贴右（2026-10-04 ㉝/㊻） ===== */
/* 序号用 CSS 计数器渲染（.dh-pl::before，decimal-leading-zero → 01/02…），
   数字根本不存在于可编辑 DOM（是 ::before 伪元素），退格永远删不到；
   句块增删由 counter 自动重排，不会叠号/跳号/漏号。textarea 做不到悬挂缩进，故为 contenteditable div */
.dh-ph[data-ph="3"] #dhTextPolish,
.dh-ph[data-ph="2p"] #dhTextPolishS2 {
  counter-reset: dhpl;
  overflow-y: auto; overflow-wrap: break-word; cursor: text;
}
.dh-ph[data-ph="3"] #dhTextPolish:focus,
.dh-ph[data-ph="2p"] #dhTextPolishS2:focus { border-color: var(--primary); }
.dh-ph[data-ph="3"] #dhTextPolish:empty::before,
.dh-ph[data-ph="2p"] #dhTextPolishS2:empty::before {
  content: attr(data-pholder);
  color: var(--text-tertiary);
  pointer-events: none;
}
.dh-ph[data-ph="3"] #dhTextPolish .dh-pl,
.dh-ph[data-ph="2p"] #dhTextPolishS2 .dh-pl {
  position: relative;
  padding-left: 2.6em;
  counter-increment: dhpl;
}
.dh-ph[data-ph="3"] #dhTextPolish .dh-pl::before,
.dh-ph[data-ph="2p"] #dhTextPolishS2 .dh-pl::before {
  content: counter(dhpl, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  user-select: none;            /* 序号惰性：不可选中、不响应指针、非 DOM 节点 → 退格删不到（2026-10-04 ㊻） */
  -webkit-user-select: none;
  pointer-events: none;
}
/* 合规检测贴到内容框右上角：整理按钮行内推到最右（按钮规格与下方工具条一致） */
.dh-ph[data-ph="3"] .dh-pol-head .dh-tb,
.dh-ph[data-ph="2p"] .dh-pol-head .dh-tb { margin-left: auto; font-size: 14px; height: 30px; }

/* ============================================================
   IP 档案库弹窗强化（2026-10-05 R69，用户反馈：深色下弹窗与背景融在一起不明显）
   ① 更明显：遮罩加深 + 毛玻璃虚化背景；弹窗面板提亮一级（深色用 --soft）+ 描边 + 大投影，与页面拉开层次；
   ② 尺寸：宽度 620 → 827（+1/3）；高度改为定高 min(88vh, 1200px)（约为原来自适应高度的 3 倍，视口不够时收缩），
      档案列表 flex 撑满弹窗余高，不再受 54vh 限制；
   ③ 弹窗内主按钮（+ 新增档案 / 保存 / 启用）统一走 --grad-cta 渐变；编辑 / 删除保持中性按钮。
   ============================================================ */
#dhIpMask { background: rgba(6,8,12,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dhv-modal.dh-ip-modal {
  width: 830px;   /* 定尺 830×1060（2026-10-05 用户要求改整数）；小屏下用 max-* 兜底不溢出 */
  height: 1060px;
  max-width: 94vw;
  max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] .dhv-modal.dh-ip-modal { background: var(--soft); }
:root[data-theme="dark"] #dhIpMask .dh-ip-card { background: var(--surface); }
#dhIpMask #dhIpListView { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#dhIpMask .dh-ip-list { flex: 1 1 auto; max-height: none; min-height: 0; }
#dhIpMask .dh-btn-mini.primary {
  background: var(--grad-cta, var(--primary));
  border-color: transparent;
  color: #fff;
}
#dhIpMask .dh-btn-mini.primary:hover {
  background: var(--grad-cta-hover, var(--primary-dark));
}
/* ④ 全部文字字号 +2 档（2026-10-05 用户两轮要求「所有文字的字号增加一号」，按各元素基线累计 +2px；按钮高度同步 34px 防挤字） */
#dhIpMask .dhv-title { font-size: 18px; }
#dhIpMask .dh-ex-tip { font-size: 14px; }
#dhIpMask .dh-btn-mini { font-size: 14px; height: 34px; }
#dhIpMask .dh-aiw-field > span { font-size: 14.5px; }
#dhIpMask .dh-aiw-input { font-size: 15px; }
#dhIpMask .dh-ip-top { font-size: 15.5px; }
#dhIpMask .dh-ip-on { font-size: 13px; }
#dhIpMask .dh-ip-sub { font-size: 14.5px; }
#dhIpMask .dh-ip-empty { font-size: 15px; }
#dhIpMask .dh-ip-label { font-size: 14.5px; }
#dhIpMask .dh-ip-cur { font-size: 14.5px; }
/* ⑤ 说明文字与上下区域拉开一行间距（2026-10-05 用户要求） */
#dhIpMask .dh-ex-tip { margin-top: 14px; margin-bottom: 14px; }
/* 翻译下拉菜单滚动条改细线式（2026-10-05 用户反馈：太宽） */
.dh-tr-menu { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.dh-tr-menu::-webkit-scrollbar { width: 5px; }
.dh-tr-menu::-webkit-scrollbar-track { background: transparent; }
.dh-tr-menu::-webkit-scrollbar-thumb { background: var(--line, #3a4048); border-radius: 3px; }
.dh-tr-menu::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle, #6b7280); }
/* 多音字 / 同音字弹窗列表滚动条同样改细线式（2026-10-05 用户要求；2026-10-06 补 #dhhMask） */
#dhyMask .dhy-list, #dhhMask .dhy-list { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#dhyMask .dhy-list::-webkit-scrollbar, #dhhMask .dhy-list::-webkit-scrollbar { width: 5px; }
#dhyMask .dhy-list::-webkit-scrollbar-track, #dhhMask .dhy-list::-webkit-scrollbar-track { background: transparent; }
#dhyMask .dhy-list::-webkit-scrollbar-thumb, #dhhMask .dhy-list::-webkit-scrollbar-thumb { background: var(--line, #3a4048); border-radius: 3px; }
#dhyMask .dhy-list::-webkit-scrollbar-thumb:hover, #dhhMask .dhy-list::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle, #6b7280); }
/* 全局细滚动条约定（2026-10-05 用户要求：今后所有可见滚动区默认细线式）。
   放在此处作为「默认基底」：后续任何滚动区不写 scrollbar 样式即自动为细滚动条；
   已显式隐藏的（.dh-scroll / #dhVidUrl / .ecom-field 等用 scrollbar-width:none+width:0）因选择器特异性更高，仍保持隐藏。 */
* { scrollbar-width: thin; scrollbar-color: var(--line, #c9cfd9) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line, #c9cfd9); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--hover-border, #aab2c0); }

/* IP 档案库弹窗：双流光边框由 .dhv-modal 基类统一提供（见 3189 行「标准组件：弹窗双流光」），本块不再重复声明 */

/* ============================================================
   多音字弹窗统一为 IP 档案库弹窗风格（2026-10-05 用户要求：大小/字号/配色/行距全对齐）
   作用域 #dhyMask + #dhhMask（2026-10-06 用户反馈：同音字弹窗字号比多音字弹窗小一档、
   注释与标题/下框贴太近 —— 根因是本块只挂了 #dhyMask，同音字弹窗 #dhhMask 一个都没吃到，
   两弹窗共用同一套 dhy-* 类名与 dhy-modal 外壳，故此处统一为双作用域共享同一份规格）
   与上方 R69 的 #dhIpMask 块逐项同规格：830×1060 定尺 + 流光边框 +
   遮罩加深虚化 + 深色面板提亮 + 字号 +2 档 + 说明行距/间距 + 主按钮统一渐变 + 细线滚动条
   ============================================================ */
#dhyMask, #dhhMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dhv-modal.dhy-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 14px;
}
:root[data-theme="dark"] .dhv-modal.dhy-modal { background: var(--soft); }
:root[data-theme="dark"] #dhyMask .dhy-group,
:root[data-theme="dark"] #dhhMask .dhy-group { background: var(--surface); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 字号 +2 档、行距与间距对齐 IP 弹窗（两弹窗共用同一份规格，逐条并列以保证像素级一致） */
#dhyMask .dhv-title, #dhhMask .dhv-title { font-size: 18px; }
/* 注释文字与上方标题、下方列表各让出一整行（2026-10-06 用户要求：间隔大一点） */
#dhyMask .dhy-tip, #dhhMask .dhy-tip { font-size: 14px; line-height: 1.75; margin: 16px 0; }
#dhyMask .dhy-list, #dhhMask .dhy-list { flex: 1 1 auto; max-height: none; min-height: 0; gap: 12px; padding: 4px 2px; }
#dhyMask .dhy-group, #dhhMask .dhy-group { padding: 12px 14px 14px; }
#dhyMask .dhy-ghead, #dhhMask .dhy-ghead { margin-bottom: 8px; }
#dhyMask .dhy-gchar, #dhhMask .dhy-gchar { flex: 0 0 32px; height: 32px; font-size: 17px; border-radius: 8px; }
#dhyMask .dhy-gn, #dhhMask .dhy-gn { font-size: 14px; }
#dhyMask .dhy-pos, #dhhMask .dhy-pos { font-size: 14px; padding: 2px 9px; }
#dhyMask .dhy-ctx, #dhhMask .dhy-ctx { font-size: 15px; line-height: 1.6; }
#dhyMask .dhy-chip, #dhhMask .dhy-chip { font-size: 14px; padding: 6px 14px; border-radius: 16px; }
#dhyMask .dhy-empty, #dhhMask .dhy-empty { font-size: 15px; }
/* 同音字弹窗专属结构（读音行 / 读音标签 / 暂无收录）：与多音字弹窗内容同字号，避免「标签小一号」 */
#dhyMask .dhy-opts, #dhhMask .dhy-opts { align-items: center; gap: 8px; }
#dhyMask .dhy-opts + .dhy-opts, #dhhMask .dhy-opts + .dhy-opts { margin-top: 10px; }
#dhyMask .dhy-py, #dhhMask .dhy-py { font-size: 14px; min-width: 54px; margin-right: 2px; }
#dhyMask .dhy-nohomo, #dhhMask .dhy-nohomo { font-size: 14px; }
/* 选中态与主按钮统一走主 CTA 渐变 */
#dhyMask .dhy-chip.on, #dhhMask .dhy-chip.on {
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhyMask .dhy-done, #dhhMask .dhy-done {
  height: 40px; font-size: 14px;
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhyMask .dhy-done:hover, #dhhMask .dhy-done:hover { background: var(--grad-cta-hover, var(--primary-dark)); filter: none; }
#dhyMask .dhy-foot, #dhhMask .dhy-foot { margin-top: 16px; }

/* ============================================================
   R113 自定义输入弹窗（替换原生 prompt：自定义语气 / 自定义停顿）
   深色面板 + 遮罩虚化 + 常驻双流光边框，对齐 IP 档案库弹窗（dhy-modal）风格
   ============================================================ */
#dhS2CustomMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#dhS2CustomMask .dh-s2custom-modal {
  width: 440px; max-width: 92vw; height: auto; max-height: 90vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 16px; display: flex; flex-direction: column;
}
:root[data-theme="dark"] #dhS2CustomMask .dh-s2custom-modal { background: var(--soft); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
#dhS2CustomMask .dhv-title { font-size: 18px; }
#dhS2CustomMask .dhy-tip { font-size: 14px; line-height: 1.7; margin: 12px 0; }
#dhS2CustomMask .dh-s2custom-input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
  font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; outline: none;
}
#dhS2CustomMask .dh-s2custom-input:focus { border-color: var(--primary); }
#dhS2CustomMask .dhy-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
#dhS2CustomMask .dh-s2custom-btn {
  height: 38px; padding: 0 18px; font-size: 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text);
}
#dhS2CustomMask .dh-s2custom-btn:hover { border-color: var(--hover-border); color: var(--hover-text); }
#dhS2CustomMask .dh-s2custom-btn.primary { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; }
#dhS2CustomMask .dh-s2custom-btn.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); filter: none; }

/* ============================================================
   选择配音音色弹窗统一为 IP 档案库弹窗风格（2026-10-05 用户要求：
   样式 / 风格 / 大小全对齐）：830×1060 定尺 + 遮罩加深虚化 +
   深色面板提亮 + 字号 +2 档 + 主按钮渐变 + 常驻双流光边框
   ============================================================ */
#dhvMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dhv-modal.dh-voice-modal {
  width: 830px; height: 1060px;
  max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 14px;
}
:root[data-theme="dark"] .dhv-modal.dh-voice-modal { background: var(--soft); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 字号 +2 档、间距与主按钮对齐 IP 弹窗 */
#dhvMask .dhv-title { font-size: 18px; }
#dhvMask .dhv-bar { margin-top: 18px; }
#dhvMask .dhv-tab { font-size: 14px; padding: 6px 15px; }
#dhvMask .dhv-search { flex: 0 0 200px; height: 34px; font-size: 13.5px; }
#dhvMask .dhv-tags { margin-top: 12px; max-height: 78px; }
#dhvMask .dhv-tag { font-size: 13px; padding: 4px 11px; }
#dhvMask .dhv-grid {
  flex: 1 1 auto; min-height: 0; max-height: none; margin-top: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(58px, auto); gap: 12px;
}
#dhvMask .dhv-card { padding: 7px 10px 7px 13px; border-radius: var(--radius-md); }
#dhvMask .dhv-name { font-size: 14px; }
#dhvMask .dhv-card-tags i { font-size: 11px; }
#dhvMask .dhv-empty { font-size: 15px; }
#dhvMask .dhv-foot { margin-top: 14px; padding-top: 14px; display: flex; justify-content: center; }
#dhvMask .dhv-custom {
  height: 36px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px;
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhvMask .dhv-custom:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
/* 音色网格滚动条改细线式（与 IP 弹窗一致，2026-10-05 用户要求） */
#dhvMask .dhv-grid { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#dhvMask .dhv-grid::-webkit-scrollbar { width: 5px; }
#dhvMask .dhv-grid::-webkit-scrollbar-track { background: transparent; }
#dhvMask .dhv-grid::-webkit-scrollbar-thumb { background: var(--line, #3a4048); border-radius: 3px; }
#dhvMask .dhv-grid::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle, #6b7280); }

/* ============================================================
   声音克隆弹窗统一为 IP 档案库弹窗风格（2026-10-05 用户要求：
   由内联复刻盒子迁入弹窗，样式/风格全对齐 IP 档案库）
   830×1060 定尺 + 遮罩加深虚化 + 深色面板提亮 + 常驻双流光边框 +
   字号 +2 档 + 主按钮渐变；表单区居中放置，小屏 max-* 兜底
   ============================================================ */
#dhClMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dhv-modal.dh-cl-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 14px;
  display: flex; flex-direction: column;
}
:root[data-theme="dark"] .dhv-modal.dh-cl-modal { background: var(--soft); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 字号 +2 档、行距与间距对齐 IP 弹窗 */
#dhClMask .dhv-title { font-size: 18px; }
#dhClMask .dh-ex-tip { font-size: 14px; line-height: 1.75; margin: 14px 0; }
/* 表单区：去掉内联盒子时期的描边底色，flex 撑满并垂直居中 */
#dhClMask .dh-cl-form {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  border: none; background: transparent; padding: 0 12px; margin: 0;
}
#dhClMask .dh-cl-field { display: flex; flex-direction: column; gap: 8px; }
#dhClMask .dh-cl-label { font-size: 14.5px; color: var(--muted); }
#dhClMask .dh-addrow { margin-bottom: 0; gap: 12px; }
#dhClMask .dh-btn-mini { font-size: 14px; height: 40px; padding: 0 18px; }
#dhClMask .dh-hint { font-size: 13.5px; }
#dhClMask .dh-input { height: 40px; font-size: 15px; padding: 0 12px; margin-bottom: 0; }
/* 主按钮统一走主 CTA 渐变 */
#dhClMask .dh-btn-mini.primary {
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhClMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
#dhClMask .dh-btn-mini.primary:disabled { opacity: .6; cursor: default; }
#dhClMask .dh-cl-foot { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }

/* 上传形象弹窗 IP 风格补充：字号 +2 档、表单区撑满居中、按钮渐变 */
#dhAddMask .dhv-title { font-size: 18px; }
#dhAddMask .dh-addbox {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  border: none; background: transparent; padding: 0 12px; margin: 0;
}
#dhAddMask .dh-input {
  width: 100%; height: 40px; font-size: 15px; padding: 0 12px; margin-bottom: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); outline: none;
}
#dhAddMask .dh-input:focus { border-color: var(--primary); }
#dhAddMask .dh-addrow { margin-bottom: 0; gap: 12px; }
#dhAddMask .dh-addrow:last-child { margin-bottom: 0; }
#dhAddMask .dh-right-btns { justify-content: flex-end; margin-top: 4px; }
#dhAddMask .dh-btn-mini {
  height: 40px; padding: 0 18px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer;
  /* 2026-10-22 按钮统一版式：inline-flex + gap，容纳「▦ 资产库」次按钮的网格图标（同内容替换页 .pv-btn 口径） */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
#dhAddMask .dh-btn-mini:hover { border-color: var(--hover-border); color: var(--hover-text); }
#dhAddMask .dh-btn-mini.primary {
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhAddMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
#dhAddMask .dh-hint { font-size: 13.5px; }
#dhAddMask .dh-check { font-size: 14px; gap: 8px; margin-bottom: 0; }
#dhAddMask .dh-clone-switch {
  margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-md);
  background: var(--surface-2);
}
#dhAddMask .dh-clone-switch .dh-hint { line-height: 1.75; }
#dhAddMask .dh-picked {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
#dhAddMask .dh-picked-txt { font-size: 14px; }

/* ============================================================
   我的配音弹窗统一为 IP 档案库弹窗风格（2026-10-05 用户要求：
   大小、样式、流光等全对齐）：830×1060 定尺 + 遮罩加深虚化 +
   深色面板提亮 + 常驻双流光边框 + 字号 +2 档 + 主按钮渐变 +
   列表 flex 撑满余高 + 细线滚动条
   ============================================================ */
#dhAuMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dhv-modal.dh-auh-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 14px;
}
:root[data-theme="dark"] .dhv-modal.dh-auh-modal { background: var(--soft); }
:root[data-theme="dark"] #dhAuMask .dh-auh-item { background: var(--surface); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 字号 +2 档、行距与间距对齐 IP 弹窗 */
#dhAuMask .dhv-title { font-size: 18px; }
#dhAuMask .dh-ex-tip { font-size: 14px; line-height: 1.75; margin: 14px 0; }
/* 列表：脱离 56vh 限制，flex 撑满弹窗余高 + 细线滚动条 */
#dhAuMask .dh-auh-list {
  flex: 1 1 auto; max-height: none; min-height: 0;
  gap: 12px; padding: 4px 2px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#dhAuMask .dh-auh-list::-webkit-scrollbar { width: 5px; }
#dhAuMask .dh-auh-list::-webkit-scrollbar-track { background: transparent; }
#dhAuMask .dh-auh-list::-webkit-scrollbar-thumb { background: var(--line, #3a4048); border-radius: 3px; }
#dhAuMask .dh-auh-list::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle, #6b7280); }
#dhAuMask .dh-auh-item { padding: 12px 14px 14px; }
#dhAuMask .dh-auh-name { font-size: 15.5px; }
#dhAuMask .dh-auh-meta { font-size: 14px; }
#dhAuMask .dh-auh-empty { font-size: 15px; }
#dhAuMask .dh-btn-mini { font-size: 14px; height: 34px; }
/* 复用（primary）统一走主 CTA 渐变；改名/删除/关闭保持中性 */
#dhAuMask .dh-btn-mini.primary {
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhAuMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }

/* ============================================================
   选择我的数字人弹窗统一为 IP 档案库弹窗风格（2026-10-05 用户要求：
   大小、样式、流光等全对齐）：830×1060 定尺 + 居中 + 遮罩加深虚化 +
   深色面板提亮 + 常驻双流光边框 + 字号 +2 档 + 网格 8 列改 4 列 +
   列表 flex 撑满余高 + 细线滚动条
   ============================================================ */
#dhMyAvMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; padding-top: 24px; }
.dhv-modal.dh-myav-modal {
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 18px 22px 14px;
}
:root[data-theme="dark"] .dhv-modal.dh-myav-modal { background: var(--soft); }
:root[data-theme="dark"] #dhMyAvMask .dh-myav-card { background: var(--surface); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 字号 +2 档、行距与间距对齐 IP 弹窗 */
#dhMyAvMask .dhv-title { font-size: 18px; }
#dhMyAvMask .dh-avtags { margin-top: 14px; align-items: center; }
#dhMyAvMask .dh-avtag { font-size: 13.5px; padding: 5px 15px; }
#dhMyAvMask .dh-avtag-edit { font-size: 12px; }
/* 网格：8 列改 4 列（830 宽下卡片不再过窄），脱离 90vh 上限改 flex 撑满余高 + 细线滚动条 */
#dhMyAvMask .dh-myav-grid {
  grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-height: none; margin-top: 14px;
  align-content: start; align-items: start;  /* 卡片行高贴内容，不随网格余高拉伸 */
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#dhMyAvMask .dh-myav-grid::-webkit-scrollbar { width: 5px; }
#dhMyAvMask .dh-myav-grid::-webkit-scrollbar-track { background: transparent; }
#dhMyAvMask .dh-myav-grid::-webkit-scrollbar-thumb { background: var(--line, #3a4048); border-radius: 3px; }
#dhMyAvMask .dh-myav-grid::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle, #6b7280); }
#dhMyAvMask .dh-myav-name { font-size: 14px; }
#dhMyAvMask .dh-myav-foot { padding-top: 14px; margin-top: 14px; }
#dhMyAvMask .dh-btn-mini { font-size: 14px; height: 34px; }
/* 胶囊筛选行右侧「上传数字人」按钮（2026-10-05 用户要求）：与全部/官方/我上传的标签同一行，靠右 */
.dh-myav-upload-btn { margin-left: auto; }
/* R99c（2026-10-06 用户要求）：弹窗内「上传数字人」与底部「完成」统一为全站 CTA 渐变风格（--grad-cta，与生成口播视频按钮同款） */
#dhMyAvMask .dh-myav-upload-btn,
#dhMyAvMask .dh-myav-foot .dh-btn-mini {
  color: #fff; background-image: var(--grad-cta, var(--primary)); border-color: transparent;
  box-shadow: 0 4px 20px rgba(94, 99, 245, .38);
}
#dhMyAvMask .dh-myav-upload-btn:hover,
#dhMyAvMask .dh-myav-foot .dh-btn-mini:hover {
  background-image: var(--grad-cta-hover, var(--primary)); transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(94, 99, 245, .44);
}
/* R99d（2026-10-06 用户要求）：「从我的资产选择形象」弹窗统一弹窗风格（同 #dhvMask 音色弹窗先例 + R99c 渐变按钮） */
#dhpMask .dhv-title { font-size: 18px; }
#dhpMask .dhv-tab { font-size: 14px; padding: 6px 15px; }
#dhpMask .dhv-search { flex: 0 0 200px; height: 34px; font-size: 13.5px; }
#dhpMask .dhv-foot { display: flex; justify-content: center; }
#dhpMask .dhv-custom {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px;
  font-size: 14px; font-weight: 600; color: #fff;
  background-image: var(--grad-cta, var(--primary)); border: none; border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(94, 99, 245, .38);
}
#dhpMask .dhv-custom:hover {
  background-image: var(--grad-cta-hover, var(--primary)); transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(94, 99, 245, .44);
}

/* ============================================================
   R101（2026-10-06 用户要求）：「从我的资产选择形象」弹窗补齐 IP 档案库弹窗标准
   （R99d 只做了字号/搜索框/CTA，缺遮罩虚化、深色提亮、描边投影、双流光）：
   ① 遮罩加深 + 毛玻璃虚化；② 面板 830×1060 定尺 + 1px 描边 + 大投影；
   ③ 深色主题面板提亮一级（--soft）；④ 常驻双流光边框（复用 --dh-beam-a/b 动画）
   ============================================================ */
#dhpMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dhv-modal.dhp-modal {
  position: relative;
  width: 830px; height: 1060px; max-width: 94vw; max-height: 94vh;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] .dhv-modal.dhp-modal { background: var(--soft); }
:root[data-theme="dark"] #dhpMask .dhp-card { background: var(--surface); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 830 宽定尺下网格与底部行距对齐其他 IP 风格弹窗 */
#dhpMask .dhv-bar { margin-top: 18px; }
#dhpMask .dhp-grid { margin-top: 14px; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#dhpMask .dhp-grid::-webkit-scrollbar { width: 5px; }
#dhpMask .dhp-grid::-webkit-scrollbar-track { background: transparent; }
#dhpMask .dhp-grid::-webkit-scrollbar-thumb { background: var(--line, #3a4048); border-radius: 3px; }
#dhpMask .dhp-grid::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle, #6b7280); }
#dhpMask .dhv-foot { padding-top: 14px; }

/* ============================================================
   文案绑定配置弹窗统一 IP 档案库弹窗风格（2026-10-05 用户要求：
   大小保持现状，其他样式与 IP 档案一样）：
   遮罩加深虚化 + 深色面板提亮 + 常驻双流光边框 + 字号 +2 档 +
   确定按钮渐变；深色下字幕脚本行底色改为段色 color-mix 暗色调
   （原内联 --sebg 浅粉彩在深色下刺眼），未绑行/徽标同步暗色化
   ============================================================ */
#dhSegMask { background: rgba(6, 8, 12, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dh-trim-modal.dh-seg-modal {
  position: relative;
  border: 1px solid var(--line);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] #dhSegMask .dh-trim-modal.dh-seg-modal { background: var(--soft); }
/* 双流光边框已统一到 .dhv-modal 基类（见 3189 行「标准组件：弹窗双流光」） */
/* 字号 +2 档；标题/关闭改主题变量色（原硬编码浅色系在深色下发灰） */
#dhSegMask .dh-trim-head b { font-size: 18px; color: var(--text); }
#dhSegMask .dh-trim-x { color: var(--text-secondary); font-size: 17px; }
#dhSegMask .dh-trim-x:hover { color: var(--text); }
#dhSegMask .dh-trim-sub { font-size: 14px; line-height: 1.75; }
#dhSegMask .dh-bind-t { font-size: 14.5px; }
#dhSegMask .dh-bind-tools a { font-size: 13px; }
#dhSegMask .dh-bind-txt { font-size: 14px; }
#dhSegMask .dh-bind-dur { font-size: 15px; }
#dhSegMask .dh-bind-no { font-size: 12px; }
#dhSegMask .dh-seg-card-stat { font-size: 11.5px; }
#dhSegMask .dh-btn-mini { font-size: 14px; height: 34px; }
.dh-trim-foot .dh-btn-mini { display: inline-flex; align-items: center; justify-content: center; }
/* 确定按钮统一走主 CTA 渐变 */
#dhSegMask .dh-btn-mini.primary {
  background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff;
}
#dhSegMask .dh-btn-mini.primary:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
/* 深色下字幕脚本底色优化（2026-10-05 用户反馈）：内联 --sebg 是浅色主题的粉彩底，
   深色下改为按段色 color-mix 调暗色调 —— 已绑行 = 段色 16% 混 --surface；
   划选中 = 段色 26% 提亮一档；未绑行 = --soft 中性底；段色只保留 3px 左边条与徽标 */
:root[data-theme="dark"] #dhSegMask .dh-bind-col { background: var(--surface); }
:root[data-theme="dark"] #dhSegMask .dh-bind-hd { background: var(--soft); }
:root[data-theme="dark"] #dhSegMask .dh-bind-row { background: var(--soft); }
:root[data-theme="dark"] #dhSegMask .dh-bind-row:not(.unbound) {
  background: color-mix(in srgb, var(--sec, #2FA36B) 16%, var(--surface));
}
:root[data-theme="dark"] #dhSegMask .dh-bind-row.sel {
  background: color-mix(in srgb, var(--sec, var(--primary)) 26%, var(--surface));
}
:root[data-theme="dark"] #dhSegMask .dh-bind-row.unbound { border-left-color: var(--line); }
:root[data-theme="dark"] #dhSegMask .dh-bind-no.q { background: var(--line); color: var(--text-secondary); }
:root[data-theme="dark"] #dhSegMask .dh-myav-card.dh-seg-card.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sec, var(--primary)) 45%, transparent);
}

/* ===== R81（2026-10-05）：声音克隆按钮纳入统一渐变 + 查看全部/文案绑定改按钮 ===== */
/* 声音克隆入口（音色栏旁）：原实心蓝 → 主 CTA 渐变（与七按钮清单同款，ID 特异性压过 .dh-btn-mini.primary） */
#dhCloneVoice {
  background: var(--grad-cta, var(--primary));
  border-color: transparent;
  color: #fff;
}
#dhCloneVoice:hover {
  background: var(--grad-cta-hover, var(--primary-dark));
  color: #fff;
}
#dhCloneVoice:disabled { opacity: .6; cursor: default; }
/* 「查看全部」「文案绑定」由文字链接改为迷你按钮（2026-10-05）：统一渐变风格（同七按钮清单） */
.dh-myav-head .dh-btn-mini, .dh-sel-head .dh-btn-mini {
  flex: 0 0 auto; height: 26px; padding: 0 12px; font-size: 12px;
  background: var(--grad-cta, var(--primary));
  border-color: transparent;
  color: #fff;
}
.dh-myav-head .dh-btn-mini:hover, .dh-sel-head .dh-btn-mini:hover {
  background: var(--grad-cta-hover, var(--primary-dark));
  color: #fff;
}

/* ===== R84（2026-10-05）：数字人表头图标徽章（R85 起通用化：colhead 与 rhead 共用）===== */
.dh-col-ico {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.dh-col-ico .ico { width: 15px; height: 15px; }
:root[data-theme="dark"] .dh-col-ico {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: #8FB0FF;
}

/* ===== R85（2026-10-05）：生成结果卡片操作图标化 =====
   下载=i-download、删除=i-trash（「配音音频」「复制ID」按要求移除，数量徽章不显示） */
.dh-w-acts { display: flex; align-items: center; gap: 12px; }
.dh-w-acts .dh-w-ico {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--text-secondary);
  background: transparent; cursor: pointer; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.dh-w-acts .dh-w-ico .ico { width: 14px; height: 14px; }
.dh-w-acts a.dh-w-ico:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); text-decoration: none; }
.dh-w-acts .dh-w-ico-dl { margin-left: auto; }
.dh-w-acts .dh-w-ico-del { margin-left: 0; }
.dh-w-acts .dh-w-ico-del:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.dh-w-acts .dh-btn-mini { height: 26px; padding: 0 10px; font-size: 12px; }
.dh-w-acts .dh-w-edit { text-decoration: none; }
/* R85b：rhead 标题「生成结果」与外部列头（.dh-colhead 16px/600）字号字重颜色对齐
   （.dh-rhead span 的 0,1,1 特异性会把它压成 12px 灰字，这里用 0,2,0 抬回） */
.dh-rhead .dh-rname { font-size: 16px; font-weight: 600; color: var(--text); }
/* R85c（2026-10-05）：rhead 布局——「N 条」计数徽章紧跟标题右移两字（32px），
   「隐藏失败」改 margin-left:auto 保持靠右（base 的 space-between 会让计数漂到中间） */
.dh-rhead { justify-content: flex-start; }
.dh-rhead #dhWorkCount { margin-left: 32px; }
.dh-rhead .dh-rhide { margin-left: auto; }

/* ============================================================
   探店视频（svideo.js）两步版式 style.css 兜底
   —— 与 public/modules/svideo.js 内联 SV_LAYOUT_CSS 同源（不带 !important，作缓存失效兜底）。
   全部锁 .pv-wrap-svideo 前缀，不污染 pvideo / ecom。
   生效结构：① 门店信息与参数（三列）② 分镜与生成交付（两列）。
   ============================================================ */
.pv-wrap-svideo .pv-body { display: block; width: 100%; }
.pv-wrap-svideo .pv-pane { display: none; max-width: 960px; margin: 0 auto; }
.pv-wrap-svideo[data-step="1"] .pv-pane[data-pane="1"],
.pv-wrap-svideo[data-step="2"] .pv-pane[data-pane="2"] { display: block; }
.pv-wrap-svideo .pv-toprow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 0 0 16px; }
.pv-wrap-svideo .pv-steps { justify-content: center; gap: 0; }
.pv-wrap-svideo .pv-step { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 1px solid transparent; padding: 7px 18px; font-size: 16px; font-weight: 600; color: var(--text-2); }
.pv-wrap-svideo .pv-step.active { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; box-shadow: 0 4px 20px rgba(94,99,245,.38); }
.pv-wrap-svideo .pv-step.active .pv-step-no { background: rgba(255,255,255,.24); color: #fff; }
.pv-wrap-svideo .pv-step-sep { flex: 0 0 72px; width: 72px; height: 2px; background: var(--line); position: relative; border-radius: 2px; overflow: hidden; }
.pv-wrap-svideo .pv-step-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--grad-cta, var(--primary)); transition: width .3s ease; }
.pv-wrap-svideo .pv-step-nav { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: #374151; transition: .15s; }
.pv-wrap-svideo .pv-step-nav:hover { border-color: var(--primary); color: var(--primary); }
.pv-wrap-svideo .pv-step-next { height: 40px; padding: 0 22px; border: none; border-radius: 12px; background: var(--grad-cta, var(--primary)); color: #fff; box-shadow: 0 4px 20px rgba(94,99,245,.38); }
.pv-wrap-svideo .pv-step-prev { height: 46px; padding: 0 30px; border: none; border-radius: 12px; background: var(--grad-cta, var(--primary)); color: #fff; font-size: 15.5px; letter-spacing: .5px; box-shadow: 0 6px 20px rgba(94,99,245,.32); }
.pv-wrap-svideo .pv-col-nav { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); background: var(--card); padding: 12px 20px 18px; margin-top: auto; }
.pv-wrap-pvideo .pv-col-nav { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); background: var(--card); padding: 12px 20px 18px; margin-top: auto; }
.pv-wrap-svideo { gap: 12px; }
.pv-wrap-svideo .pv-pane[data-pane="1"] { max-width: none; margin: 0; }
.pv-wrap-svideo .pv-cols { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; align-items: stretch; }
.pv-wrap-svideo .pv-pane[data-pane="2"] { max-width: none; margin: 0; }
.pv-wrap-svideo .pv-cols-2 { display: grid; grid-template-columns: minmax(300px, 1080px) minmax(300px, 530px); gap: 20px; align-items: stretch; max-width: 1630px; margin: 0; }
.pv-wrap-svideo .pv-pane[data-pane="2"] .pv-col:first-child .pv-col-head { font-size: 18px; }
.pv-wrap-svideo .pv-pane[data-pane="2"] .pv-col:not(:first-child) .pv-col-head { font-size: 17px; }
/* 分镜单卡翻页 */
.pv-wrap-svideo .pv-shot-pager { display: flex; align-items: stretch; gap: 8px; }
.pv-wrap-svideo .pv-shot-stage { flex: 1 1 auto; min-width: 0; }
.pv-wrap-svideo .pv-pager-btn { flex: 0 0 auto; width: auto; height: auto; align-self: center; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; padding: 12px 9px; border: none; border-radius: 12px; background: var(--grad-cta, #5E63F5); color: #fff; cursor: pointer; user-select: none; box-shadow: 0 4px 20px rgba(94,99,245,.38); transition: filter .15s, transform .15s, box-shadow .15s; }
.pv-wrap-svideo .pv-pager-btn .pv-pager-txt { display: block; writing-mode: vertical-rl; text-orientation: upright; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 3px; white-space: nowrap; }
.pv-wrap-svideo .pv-pager-btn .pv-pager-arr { flex: 0 0 auto; font-size: 22px; font-weight: 700; line-height: 1; opacity: 1; }
.pv-wrap-svideo .pv-pager-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(94,99,245,.48); }
.pv-wrap-svideo .pv-pager-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.pv-wrap-svideo .pv-shot-nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pv-wrap-svideo .pv-shot-count { font-size: 13.5px; color: var(--fg-subtle); white-space: nowrap; }
.pv-wrap-svideo .pv-shot-dots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-wrap-svideo .pv-dot { flex: 0 0 auto; width: 9px; height: 9px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; transition: all .15s; }
.pv-wrap-svideo .pv-dot.on { background: var(--primary); border-color: var(--primary); width: 11px; height: 11px; }
.pv-wrap-svideo .pv-shot-gap { font-size: 13px; color: var(--fg-subtle); line-height: 1; padding: 0 1px; }
/* 列系统 */
.pv-wrap-svideo .pv-col { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pv-wrap-svideo .pv-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; flex: 0 0 auto; color: var(--text); }
.pv-wrap-svideo .pv-col:first-child .pv-col-head { font-size: 18px; }
.pv-wrap-svideo .pv-col-body { padding: 14px 20px; }
.pv-wrap-svideo .pv-pane[data-pane="1"] .pv-col:first-child > .pv-col-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* 参数区下拉独占整行（如极简视图「出镜方式」文字较长时避免换行） */
.pv-wrap-svideo .pv-param-full { grid-column: 1 / -1; }
/* 带货视频：参数区「出镜方式」独占整行（2026-10-08 对标探店，作用域锁 .pv-wrap-pvideo 两视图通用） */
.pv-wrap-pvideo .pv-param-full { grid-column: 1 / -1; }
.pv-wrap-svideo .pv-pane[data-pane="1"] .pv-col-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 14px; }
/* 第①屏第一列产品图：一行三张网格 */
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 10px; align-items: start; width: 100%; box-sizing: border-box; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-group { width: auto; min-width: 0; display: contents; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-strip { display: contents; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-cell { display: block; width: 100%; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-wrap { width: 100%; height: auto; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-wrap img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-role { width: 100%; height: 24px; }
.pv-wrap-svideo .pv-pane[data-pane="1"] #svThumbs .pv-thumb-cell > .pv-thumb-gflag { display: inline-block; margin-bottom: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 第①屏第三列：门店视觉锚点块上方插入 50px 空白（与 pvideo 同款兜底） */
.pv-wrap-svideo .pv-pane[data-pane="1"] .pv-anchor-block { padding-top: 50px; }
.pv-wrap-svideo .pv-pane[data-pane="1"] .pv-present-mode-block { padding-top: 50px; }
/* 第①屏第二列各字段块之间统一 40px 间距 */
.pv-wrap-svideo .pv-pane[data-pane="1"] .pv-col:nth-child(2) .pv-col-body > .pv-block + .pv-block { margin-top: 30px; }
/* 极简视图（sv-wrap-simple）复用同一套列系统 */
.pv-wrap-svideo.pv-wrap-simple { gap: 12px; max-width: none; margin: 0; }
.pv-wrap-svideo.pv-wrap-simple .pv-cols { max-width: 1630px; margin: 0; }
.pv-wrap-svideo.pv-wrap-simple > .pv-body > .pv-cols > .pv-col:first-child > .pv-col-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.pv-wrap-svideo.pv-wrap-simple .pv-col:first-child .pv-col-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.pv-wrap-svideo.pv-wrap-simple #svThumbs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px 10px; align-items: start; width: 100%; box-sizing: border-box; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-group { width: auto; min-width: 0; display: contents; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-strip { display: contents; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-cell { display: block; width: 100%; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-wrap { width: 100%; height: auto; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-wrap img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-role { width: 100%; height: 24px; }
.pv-wrap-svideo.pv-wrap-simple #svThumbs .pv-thumb-cell > .pv-thumb-gflag { display: inline-block; margin-bottom: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 生成分片合并预览（gen + 手动，一次一张卡） */
.pv-wrap-svideo .pv-clip-wrap { display: flex; align-items: flex-start; gap: 10px; }
.pv-wrap-svideo .pv-clip-thumbs { flex: 0 0 auto; width: 100px; display: flex; flex-direction: column; gap: 8px; }
.pv-wrap-svideo .pv-clip-thumb { width: 100%; height: 133px; aspect-ratio: 3/4; padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-3); cursor: pointer; font-family: inherit; transition: border-color .15s; }
.pv-wrap-svideo .pv-clip-thumb:hover { border-color: var(--primary); }
.pv-wrap-svideo .pv-clip-thumb.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .25); }
.pv-wrap-svideo .pv-clip-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #000; }
.pv-wrap-svideo .pv-clip-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: var(--fg-faint); text-align: center; padding: 0 4px; box-sizing: border-box; }
.pv-wrap-svideo .pv-clip-main { flex: 0 0 75%; min-width: 0; }
.pv-wrap-svideo .pv-clip-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-wrap-svideo .pv-clip-head { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.pv-wrap-svideo .pv-clip video { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block; margin: 0; background: #000; border-radius: 8px; }
/* 生成结果抽屉微调（对标数字人） */
.pv-wrap-svideo .dh-rhead #svWorkCount { margin-left: 32px; }
.pv-wrap-svideo .rc-title { -webkit-line-clamp: 1; max-height: 20px; min-height: 0; }


/* ===== 电商套图 UI 改造 兜底样式（2026-10-08）：与 ecom.js 内联 ECOM_LAYOUT_CSS / ECOM_SIMPLE_CSS 同源、无 !important 的兜底副本；
   仅在 JS 未注入模块样式时生效，正常由内联 <style id=ecomModuleStyle> 的 !important 规则接管。 ===== */
/* ★ 2026-10-08 ②屏固定区兜底：「生成图需预览」小号 CTA + 固定「产品锁定锚点」块（不随翻页重建） */
.ecom-wrap #ecomBtnBrief { background: var(--grad-cta, linear-gradient(100deg, #2E6CEC 0%, #5E63F5 55%, #8B5CF6 100%)); border: none; color: #fff; box-shadow: 0 4px 20px rgba(94, 99, 245, .38); }
.ecom-wrap #ecomBtnBrief:hover { background: var(--grad-cta-hover, linear-gradient(100deg, #356FF2 0%, #6B6EF8 55%, #9A6BFF 100%)); filter: none; color: #fff; }
.ecom-wrap #ecomAnchorBlock { margin: 0 0 12px; }
.ecom-wrap .ecom-briefs-anchor { border-color: var(--border); background: var(--surface); }
.ecom-wrap .ecom-brief-row .ecom-tip { min-height: 0; margin: 6px 0 0; }
.ecom-wrap .ecom-brief-row .ecom-tip:empty { display: none; }
.ecom-wrap{gap:12px;display:flex;flex-direction:column;align-items:flex-start;width:100%}.ecom-wrap .ecom-body{display:block;width:100%}.ecom-wrap .ecom-pane{display:none}.ecom-wrap .ecom-pane[data-pane="1"]{display:block;max-width:1630px;margin:0}.ecom-wrap .ecom-pane[data-pane="2"]{display:block;max-width:1630px;margin:0}.ecom-wrap[data-step="2"] .ecom-pane[data-pane="1"]{display:none}.ecom-wrap[data-step="1"] .ecom-pane[data-pane="2"]{display:none}.ecom-wrap .ecom-toprow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:100%;margin:0 0 16px}.ecom-wrap .ecom-toprow .gv-mode-switch{margin:2px 0 0;justify-self:start}.ecom-wrap .ecom-toprow .gv-mode-tip{display:none}.ecom-wrap .ecom-toprow .ecom-steps{margin:0;justify-self:center}.ecom-wrap .ecom-steps{display:flex;align-items:center;justify-content:center;gap:0}.ecom-wrap .ecom-step{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 18px;font-size:16px;font-weight:600;color:var(--text-2);cursor:pointer;font-family:inherit;transition:color .2s,background .25s,border-color .25s,box-shadow .25s,transform .2s}.ecom-wrap .ecom-step:hover{color:var(--text);background:var(--soft);border-color:var(--line);transform:translateY(-1px)}.ecom-wrap .ecom-step .ecom-step-no{width:26px;height:26px;background:var(--line);color:var(--text-2);font-size:13px;display:inline-grid;place-items:center;border-radius:50%;flex:none}.ecom-wrap .ecom-step.active{background:var(--grad-cta,var(--primary));border-color:transparent;color:#fff;box-shadow:0 4px 20px rgba(94,99,245,.38)}.ecom-wrap .ecom-step.active:hover{color:#fff;background:var(--grad-cta-hover,var(--primary))}.ecom-wrap .ecom-step.active .ecom-step-no{background:rgba(255,255,255,.24);color:#fff}.ecom-wrap .ecom-step.done:not(.active) .ecom-step-no{background:var(--line);color:var(--text-2)}.ecom-wrap .ecom-step.locked:hover{background:transparent;border-color:transparent;color:var(--text-2);cursor:not-allowed}.ecom-wrap .ecom-step-sep{flex:0 0 72px;width:72px;height:2px;background:var(--line);position:relative;border-radius:2px;overflow:hidden}.ecom-wrap .ecom-step-prog{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--grad-cta,var(--primary));transition:width .3s ease}.ecom-wrap .ecom-cols{display:grid;grid-template-columns:repeat(3,minmax(300px,530px));gap:20px;align-items:stretch;max-width:1630px;margin:0}@media (max-width:1240px){.ecom-wrap .ecom-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}.ecom-wrap .ecom-cols-2{display:grid;grid-template-columns:minmax(300px,1080px) minmax(300px,530px);gap:20px;align-items:stretch;max-width:1630px;margin:0}@media (max-width:1240px){.ecom-wrap .ecom-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.ecom-wrap .ecom-col{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;flex-direction:column;min-width:0;overflow:hidden}.ecom-wrap .ecom-col-head{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;flex:0 0 auto;color:var(--text)}.ecom-wrap .ecom-col:first-child .ecom-col-head{font-size:18px}.ecom-wrap .ecom-col:not(:first-child) .ecom-col-head{font-size:17px}.ecom-wrap .ecom-col-head .ecom-col-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:700;flex-shrink:0;line-height:1}.ecom-wrap .ecom-col-body{padding:14px 20px}.ecom-wrap .ecom-col-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:auto;padding:12px 20px;border-top:1px solid var(--line);background:var(--card)}.ecom-wrap .ecom-step-nav{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:var(--surface);color:#374151;transition:.15s}.ecom-wrap .ecom-step-nav:hover{border-color:var(--primary);color:var(--primary)}.ecom-wrap .ecom-step-next{height:40px;padding:0 22px;border:none;border-radius:12px;background:var(--grad-cta,var(--primary));color:#fff;box-shadow:0 4px 20px rgba(94,99,245,.38)}.ecom-wrap .ecom-step-next:hover{background:var(--grad-cta-hover,var(--primary));color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:0 6px 24px rgba(94,99,245,.48)}.ecom-wrap .ecom-step-prev{height:46px;padding:0 30px;border:none;border-radius:12px;background:var(--grad-cta,var(--primary));color:#fff;font-size:15.5px;letter-spacing:.5px;box-shadow:0 6px 20px rgba(94,99,245,.32)}.ecom-wrap .ecom-step-prev:hover{background:var(--grad-cta-hover,var(--primary));border-color:transparent;transform:translateY(-2px);box-shadow:0 10px 28px rgba(94,99,245,.42)}.ecom-wrap .ecom-step-nav.disabled{opacity:.45;cursor:not-allowed}.ecom-wrap .ecom-brief-row{margin-bottom:12px}.ecom-wrap .ecom-shot-pager{display:flex;align-items:stretch;gap:8px}.ecom-wrap .ecom-shot-stage{flex:1 1 auto;min-width:0}.ecom-wrap .ecom-pager-btn{flex:0 0 auto;align-self:center;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;padding:12px 9px;border:none;border-radius:12px;background:var(--grad-cta,linear-gradient(100deg,#2E6CEC 0%,#5E63F5 55%,#8B5CF6 100%));color:#fff;cursor:pointer;user-select:none;box-shadow:0 4px 20px rgba(94,99,245,.38);transition:filter .15s,transform .15s,box-shadow .15s}.ecom-wrap .ecom-pager-btn .ecom-pager-txt{display:block;writing-mode:vertical-rl;text-orientation:upright;font-size:13px;font-weight:700;line-height:1;letter-spacing:3px;white-space:nowrap}.ecom-wrap .ecom-pager-btn .ecom-pager-arr{flex:0 0 auto;font-size:22px;font-weight:700;line-height:1}.ecom-wrap .ecom-pager-btn:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 6px 24px rgba(94,99,245,.48)}.ecom-wrap .ecom-pager-btn:disabled{opacity:.35;cursor:default;box-shadow:none}.ecom-wrap .ecom-pager{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.ecom-wrap .ecom-pager-info{font-size:13.5px;color:var(--fg-subtle);white-space:nowrap}.ecom-wrap .ecom-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ecom-wrap .ecom-dot{flex:0 0 auto;width:9px;height:9px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;transition:all .15s}.ecom-wrap .ecom-dot.on{background:var(--primary);border-color:var(--primary);width:11px;height:11px}.ecom-wrap .ecom-pager-gap{font-size:13px;color:var(--fg-subtle);line-height:1;padding:0 1px}.ecom-wrap .ecom-preview-area{display:flex;flex-direction:column;align-items:stretch;gap:10px}.ecom-wrap .ecom-thumbs{flex:0 0 auto;width:100%;max-height:none;display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}.ecom-wrap .ecom-thumb-item{flex:0 0 auto;width:96px;aspect-ratio:1/1;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-3);cursor:pointer;padding:0;font-family:inherit;position:relative}.ecom-wrap .ecom-thumb-item.on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.25)}.ecom-wrap .ecom-thumb-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.ecom-wrap .ecom-thumb-item .ecom-thumb-no{position:absolute;left:3px;top:3px;font-size:10px;line-height:1;padding:2px 5px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;z-index:1}.ecom-wrap .ecom-preview{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}.ecom-wrap .ecom-preview-main{flex:1 1 auto;min-height:200px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.ecom-wrap .ecom-preview-main img{max-width:100%;max-height:none;border-radius:8px;background:var(--surface-3)}.ecom-wrap .ecom-preview-main .ecom-img-item{flex:1 1 auto;width:auto;min-width:0;min-height:0;height:100%;aspect-ratio:auto;display:flex;border-radius:8px}.ecom-wrap .ecom-preview-main .ecom-img-item .ecom-thumb{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0}.ecom-wrap .ecom-preview-main .ecom-img-item .ecom-thumb img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.ecom-wrap .ecom-preview-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ecom-wrap .ecom-card-result{border:1px solid var(--border);border-radius:9px;background:var(--surface);box-shadow:0 1px 3px rgba(31,35,41,.04);margin-bottom:12px;padding:12px}.ecom-wrap .ecom-genall{margin-bottom:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}.ecom-wrap .generate-btn{background-image:var(--grad-cta,var(--primary));border:none;color:#fff}.ecom-wrap .generate-btn:hover{background-image:var(--grad-cta-hover,var(--primary))}.ecom-wrap .generate-btn{justify-content:center;gap:8px}.ecom-wrap .generate-btn .cost-badge{margin-left:0;flex:none}.ecom-wrap .ecom-small-btn{background:var(--grad-cta,var(--primary));border:1px solid transparent;color:#fff;font-size:12.5px;padding:6px 12px;border-radius:6px;cursor:pointer}.ecom-wrap .ecom-small-btn:hover{background:var(--grad-cta-hover,var(--primary))}.ecom-wrap .ecom-small-btn:disabled{opacity:.55;cursor:default}.ecom-wrap .mini-btn.ecom-btn-dlall,.ecom-wrap .ecom-reset-btn{border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:8px;cursor:pointer;font-family:inherit;padding:7px 14px;font-size:13px}.ecom-wrap .mini-btn.ecom-btn-dlall:hover,.ecom-wrap .ecom-reset-btn:hover{border-color:var(--primary);color:var(--primary)}.ecom-wrap .ecom-reset-btn{border:none;background:none;padding:2px 2px;font-size:12px;color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px;border-radius:0}.ecom-wrap .ecom-reset-btn:hover{border:none;background:none;color:var(--danger,#e5484d)}.ecom-wrap .ecom-pane .ecom-field-label{font-size:14px;font-weight:700}.ecom-wrap .ecom-field-label{color:var(--text);margin:25px 0 6px}:root[data-theme="dark"] .ecom-wrap .ecom-field-label{color:#fff}.ecom-wrap .ecom-col-body>.ecom-field-label:first-child{margin-top:0}.ecom-wrap #ecomChips{margin-top:2px}.ecom-wrap .param-row .ecom-select{flex:1;min-width:110px}.ecom-wrap .ecom-pane .ecom-hint{font-size:13px}.ecom-wrap .ecom-pane .param-label{font-size:14px}.ecom-wrap .ecom-pane .ecom-select,.ecom-wrap .ecom-pane .text-input,.ecom-wrap .ecom-pane .prompt-textarea{font-size:15px}.ecom-wrap .ecom-pane .ecom-upload-label{font-size:14.5px;font-weight:700}.ecom-wrap .ecom-pane .ecom-upload-text{font-size:15px}.ecom-wrap .ecom-pane .ecom-upload-sub,.ecom-wrap .ecom-pane .ecom-upload-quota{font-size:13px}.ecom-wrap .ecom-pane .ecom-chips .ecom-chip{font-size:13.5px}.ecom-wrap .ecom-pane .ecom-plan-count{font-size:13px}.ecom-wrap .ecom-pane .ecom-switch{font-size:13.5px}.ecom-wrap .ecom-pane .ecom-switch-note{font-size:12.5px}.ecom-wrap .ecom-pane .ecom-styleref-note{font-size:12.5px}.ecom-wrap .ecom-pane .ecom-styleref-title{font-size:13px}.ecom-wrap .ecom-pane .ecom-kv{font-size:13px}.ecom-wrap .ecom-thumb-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ecom-wrap .ecom-thumb-wrap{width:auto}.ecom-wrap .ecom-thumb-wrap img{height:auto;aspect-ratio:1/1}.ecom-wrap.ecom-wrap-simple .ecom-thumb-strip{grid-template-columns:repeat(5,1fr)}.ecom-wrap .ecom-upload-zone .gv-up-actions{margin-top:10px}.ecom-wrap #ecomProductName{width:100%}.ecom-wrap.ecom-wrap-simple{gap:12px;max-width:none;margin:0}.ecom-wrap-simple .ecom-cols{max-width:1630px;margin:0;grid-template-columns:repeat(3,minmax(300px,530px))}.ecom-wrap-simple .ecom-col:first-child .ecom-col-foot{margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:14px;border-top:1px solid var(--line)}.ecom-wrap-simple .ecom-col-head{font-size:18px}.ecom-wrap-simple .ecom-field-label{font-size:15.5px;font-weight:700}.ecom-wrap-simple .text-input,.ecom-wrap-simple .prompt-textarea{font-size:15px}.ecom-wrap-simple textarea.prompt-textarea{min-height:0}.ecom-wrap-simple .param-label{font-size:14.5px}.ecom-wrap-simple .ecom-select{font-size:16px}.ecom-wrap-simple .ecom-hint{font-size:14px}.ecom-wrap-simple .ecom-upload-label{font-size:14.5px;font-weight:700}.ecom-wrap-simple .ecom-upload-text{font-size:15px}.ecom-wrap-simple .ecom-upload-sub,.ecom-wrap-simple .ecom-upload-quota{font-size:13px}.ecom-wrap-simple .ecom-chips .ecom-chip{font-size:13.5px}.ecom-wrap-simple .ecom-switch{font-size:13.5px}.ecom-wrap-simple .ecom-col-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--primary-soft,#eff6ff);color:var(--primary,#2E6CEC);font-size:11px;font-weight:700;flex-shrink:0;line-height:1}[data-theme="dark"] .ecom-wrap-simple .ecom-col-num{background:var(--primary,#2E6CEC);color:var(--icon-on-primary,#fff)}.ecom-wrap-simple #ecomBtnSimpleGen{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;font-size:15px;padding:11px 14px;background:var(--grad-cta,linear-gradient(100deg,#2E6CEC 0%,#5E63F5 55%,#8B5CF6 100%));border:none;color:#fff;box-shadow:0 4px 20px rgba(94,99,245,.38)}.ecom-wrap-simple #ecomBtnSimpleGen:hover{background:var(--grad-cta-hover,linear-gradient(100deg,#356FF2 0%,#6B6EF8 55%,#9A6BFF 100%))}
/* 生成全套按钮高度对齐 mini-btn（2026-10-08，仅专业版 #ecomBtnGenAll，极简版黑盒 CTA 不受影响） */
.ecom-wrap #ecomBtnGenAll { min-height: 32px; height: 32px; padding: 0 14px; font-size: 15px; border-radius: 6px; width: auto; }
/* 图片生成页描述框：高度加倍并固定为默认高度（2026-10-09，仅 #imagePrompt，不影响视频/其他页共用 .prompt-textarea） */
.img-stage textarea.prompt-textarea#imagePrompt { min-height: 276px; height: 276px; font-size: 15px; line-height: 1.85; }
.ecom-wrap #ecomBtnGenAll .cost-badge { padding: 1px 8px; font-size: 11px; }
/* 第②屏图需区文字整体加大一号（2026-10-08，翻页竖排按钮除外） */
.ecom-wrap .ecom-card .ecom-card-idx { font-size: 13px; }
.ecom-wrap .ecom-card .ecom-card-name { font-size: 15px; }
.ecom-wrap .ecom-card .ecom-card-tag, .ecom-wrap .ecom-card .ecom-card-banned { font-size: 15px; }
.ecom-wrap .ecom-card .ecom-field > label, .ecom-wrap .ecom-briefs-anchor .ecom-field > label { font-size: 14.5px; }
.ecom-wrap .ecom-card .ecom-field-ctrl, .ecom-wrap .ecom-briefs-anchor .ecom-field-ctrl { font-size: 15px; }
.ecom-wrap .ecom-prompt-wrap > summary, .ecom-wrap .ecom-prompt-preview { font-size: 13px; }
.ecom-wrap .ecom-pager-info { font-size: 14.5px; }
/* 重新规划按钮移入图需卡头 + 渐变统一风格（2026-10-08） */
.ecom-wrap .ecom-card-head .ecom-btn-replan { flex-shrink: 0; margin-left: 2px; background: var(--grad-cta, linear-gradient(100deg, #2E6CEC 0%, #5E63F5 55%, #8B5CF6 100%)); border: none; color: #fff; box-shadow: 0 4px 20px rgba(94, 99, 245, .38); padding: 4px 10px; font-size: 15px; border-radius: 8px; }
.ecom-wrap .ecom-card-head .ecom-btn-replan:hover { background: var(--grad-cta-hover, linear-gradient(100deg, #356FF2 0%, #6B6EF8 55%, #9A6BFF 100%)); color: #fff; filter: none; }
.ecom-wrap .ecom-card-head .ecom-btn-replan .pv-cost-badge { margin-left: 6px; padding: 1px 7px; font-size: 11px; background: rgba(255, 255, 255, .2); border-radius: 999px; }
/* 「生成单图」按钮移入图需卡底部右侧（2026-10-08） */
.ecom-wrap .ecom-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ecom-wrap .ecom-card-foot .ecom-card-status { margin-right: auto; font-size: 15px; color: var(--text-2); }
.ecom-wrap .ecom-btn-gen1 .pv-cost-badge { margin-left: 6px; padding: 1px 7px; font-size: 11px; background: rgba(255, 255, 255, .2); border-radius: 999px; }
/* 生成结果抽屉卡片：下载/删除图标挂图片右下角（2026-10-08，去掉重生成按钮行） */
.ecom-wrap .ecom-drawer-card .rc-cover { position: relative; cursor: pointer; }
.ecom-wrap .ecom-drawer-ico { position: absolute; bottom: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; z-index: 2; padding: 0; opacity: .85; transition: opacity .15s, background .15s; }
.ecom-wrap .ecom-drawer-ico:hover { opacity: 1; background: rgba(0, 0, 0, .75); color: #fff; }
.ecom-wrap .ecom-drawer-ico.ecom-drawer-dl { right: 34px; }
.ecom-wrap .ecom-drawer-ico.ecom-drawer-del { right: 6px; }
.ecom-wrap .ecom-drawer-ico.ecom-drawer-del:hover { background: rgba(220, 38, 38, .85); }

/* 上传说明折叠（2026-10-08）：进场全显 3 秒后收成一行，点下拉按钮切换；兜底副本（无 !important） */
.ecom-wrap .ecom-hint-fold { position: relative; padding-right: 26px; cursor: pointer; }
.ecom-wrap .ecom-hint-fold .ecom-hint-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.ecom-wrap .ecom-hint-fold.open .ecom-hint-body { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.ecom-wrap .ecom-hint-toggle { position: absolute; top: -1px; right: 0; width: 22px; height: 22px; border: none; background: transparent; color: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity .15s; }
.ecom-wrap .ecom-hint-toggle:hover { opacity: 1; }
.ecom-wrap .ecom-hint-arrow { display: block; transition: transform .2s; }
.ecom-wrap .ecom-hint-fold:not(.open) .ecom-hint-arrow { transform: rotate(-90deg); }

/* 极简图型序列：行收窄左对齐 + 「生成单张」按钮（2026-10-08，兜底副本无 !important） */
.ecom-wrap .ecom-type-row { max-width: 460px; margin-right: auto; }
.ecom-wrap .ecom-type-gen1 { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--text-secondary); font-size: 11.5px; line-height: 1; padding: 5px 10px; border-radius: 10px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.ecom-wrap .ecom-type-gen1:hover { border-color: var(--primary); background: var(--grad-cta, var(--primary)); color: #fff; }
.ecom-wrap .ecom-type-gen1:disabled { opacity: .55; cursor: default; }
.ecom-wrap .ecom-type-gen1 .pv-cost-badge { background: rgba(125,145,180,.18); border-radius: 999px; padding: 2px 7px; font-size: 11px; }
.ecom-wrap .ecom-type-gen1:hover .pv-cost-badge { background: rgba(255,255,255,.22); }

/* 图型序列块上方间距 25px（2026-10-08，兜底副本无 !important） */
.ecom-wrap .ecom-cards-plan { margin: 25px 0 4px; }

/* ================= 图片生成合并页（2026-10-09）=================
 * 复用视频生成合并页的全部标准组件（.vg-stage / .vg-grid / .dh-col-beam /
 * .dh-right / .dh-result-tab / .dh-works / .result-card / .qc-model 下拉），
 * 以下仅为图片侧差异补丁：列3 预览图为 <img>（视频侧为 <video>）+ 抽屉空态定位。 */

/* 列3 图片预览：视频生成页用 <video>，图片生成页用 <img>，统一 contain 完整显示 */
.vg-live-preview.img-live img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 8px; background: #10131A;
}
/* 预览图可点击放大（有大图时显示 zoom-in 光标，2026-10-09） */
.vg-live-preview.img-live img[src] { cursor: zoom-in; }
/* 图片预览悬浮操作（2026-10-09）：下载改为小图标，与删除并排右上（仅图片页作用域，视频/换脸等页共用 .live-pv-acts 不受影响） */
.vg-live-preview.img-live .live-pv-acts { justify-content: flex-end; gap: 8px; }
.vg-live-preview.img-live #imgLiveDl:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }

/* 抽屉空态：相对 .dh-right 绝对定位，覆盖 works 区（对标 .cr-stage #crEmptyState） */
.dh-right #imageEmptyState {
  position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0;
  background: var(--card); z-index: 2;
}

/* 图片结果卡 →「标准完成卡」（2026-10-09，对齐带货视频 .dh-work-rc 口径）：
   封面 9:16 由 .dh-work-rc .rc-cover 统一钉死，这里把 <img> 从全局 cover 改为
   contain 完整显示（同 .dh-work-rc .rc-cover video 规则），去黑底避免 1:1 图留黑边。 */
.dh-work-rc .rc-cover img { object-fit: contain; background: transparent; }
.dh-work-rc .rc-cover img { pointer-events: none; }  /* 点击封面区＝点卡片，统一开作品弹窗 */

/* ============================================================
   AI 音乐（music）UI 改造（2026-10-09）
   —— 对齐内容替换 .cr-* / 视频换脸 .fs-* 三列极简 + 抽屉 + 标准步骤条 / 列流光 / CTA 渐变；
      仅改 .music- 前缀隔离。步骤条用全站标准 .dh-steps；列流光挂全局 .dh-col-beam；
      抽屉复用全局 .dh-right shell —— 三者均不在此重写。
   —— 音乐挂载于 toolsStage（.tools-stage）内 JS 渲染，故外层包 .music-stage 作用域隔离。
   ============================================================ */
/* 音乐挂载于 .tools-stage（display:flex 行向）内，故 .music-stage 需显式成为 flex 列容器并撑满，
   否则 .cr-stage 那种靠 .main-stage 类带 display:flex 的福利这里没有（对照 .cr-stage / .fs-stage） */
.music-stage { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; width: 100%; min-height: 0; padding: 18px 22px 36px; overflow-y: auto; }
/* 三列网格（列宽 / gap / 总宽 1630 与 .cr-grid / .fs-grid / .fb-grid 完全一致） */
.music-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
/* 列容器 */
.music-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.music-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
/* 表头序号徽章：与 .cr-col-no / .fs-col-no 同形（全站步骤序号统一蓝底） */
.music-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.music-col:first-child .music-col-head { font-size: 18px; }
.music-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
/* 列体内卡片间距由 gap(25) 单一控制（对齐 fb-col-body 口径，归零 .card margin-bottom 隐藏叠加） */
.music-col-body .card { margin-bottom: 0; }
/* 第三列预览区占满列体 */
.music-col[data-musicstep="3"] .music-col-body { justify-content: stretch; }

/* 列内文字整体 +1px（scoped 到 .music-col，对齐 .cr-col / .fs-col 口径；按钮 / cost-badge 不动） */
.music-col .card-head h3 { font-size: 15px; }
.music-col .card-head p { font-size: 13px; padding-left: 0; }
.music-col .card-head p { font-size: 14px; }   /* 第二轮 +1px（副标题再加大一号，同上两页口径） */
.music-col .credit-input,
.music-col .prompt-textarea { font-size: 15px; }
.music-col .voice-chip,
.music-col .dewm-tab { font-size: 13px; }
.music-col .voice-counter { font-size: 12px; }
.music-col .generate-summary { font-size: 12px; }
.music-col .generate-tip { font-size: 11px; }
/* 提交行 */
.music-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 生成 CTA：蓝→紫渐变（对齐 .cr-stage #crBtnGenerate / .fs-stage #fsRun） */
.music-stage #musicRun { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.music-stage #musicRun:hover { background-image: var(--grad-cta-hover); }
.music-stage #musicRun:disabled { opacity: .6; cursor: default; }

/* 列3 音乐预览卡 */
.music-preview-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.music-preview-card .card-head { position: relative; padding-right: 44px; }
.music-preview-card .mp-dl { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.music-preview-card .mp-dl:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.music-preview-card .mp-dl .ico { width: 16px; height: 16px; }
.music-preview-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; position: relative; min-height: 0; }
/* 黑胶封面：放大并居中 */
.music-preview-body .mp-cover { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; display: grid; place-items: center; margin: 0 auto; }
.music-preview-body .mp-cover .rc-vinyl { width: 100%; }
/* 列3 黑胶唱片（.rc-vinyl，与音色设计作品卡同款）：播放时旋转 */
.music-preview-card.is-playing .rc-vinyl-disc { animation-play-state: running; }
/* 标题 / 副标题 */
.mp-info { width: 100%; text-align: center; }
.mp-title { font-size: 15px; font-weight: 700; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sub { font-size: 12px; color: var(--fg-subtle); margin-top: 4px; }
/* 续写片段未合并（concat 失败降级）提示 */
.mp-warn, .vm-warn { font-size: 12px; line-height: 1.5; color: #e0a23b; background: rgba(224,162,59,.12); border: 1px solid rgba(224,162,59,.3); border-radius: 8px; padding: 6px 10px; margin-top: 6px; box-shadow: inset 3px 0 0 #E0A23C; }
/* 浅色主题：#e0a23b 落在白底上只有 ~2:1，看不清 —— 改用与 .hint-warn 同色（深棕字 + 浅琥珀底） */
:root:not([data-theme="dark"]) .mp-warn,
:root:not([data-theme="dark"]) .vm-warn { color: #8A5300; background: #FFF0CE; border-color: #EFC77A; }
.mp-warn:empty, .vm-warn:empty { display: none; }
/* 播放 / 暂停 圆钮 */
.mp-toggle { width: 52px; height: 52px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background-image: var(--grad-cta); box-shadow: 0 8px 22px rgba(94, 99, 245, .38); transition: filter .15s, transform .15s; }
.mp-toggle:hover { filter: brightness(1.06); }
.mp-toggle:active { transform: scale(.96); }
.mp-toggle .ico { width: 24px; height: 24px; }
/* 进度条 */
.mp-track { position: relative; width: 100%; height: 6px; border-radius: 999px; cursor: pointer; }
.mp-track-bg { position: absolute; inset: 0; border-radius: inherit; background: var(--line); }
.mp-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background-image: var(--grad-cta); }
.mp-track-dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18); transform: translateY(-50%); pointer-events: none; }
.mp-time { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.mp-time i { font-style: normal; opacity: .6; }
.mp-time #musicPreviewDur { margin-left: auto; }
/* 空态 */
.mp-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-subtle); text-align: center; padding: 18px; }
/* ★ 2026-10-25：同 .voice-preview-body.is-empty——隐藏无音频时无意义的控件组，
   空态浮层转正常流排到光盘下方，消除与光盘的重叠。有作品后移除 .is-empty 即恢复原布局。 */
.music-preview-body.is-empty .mp-info,
.music-preview-body.is-empty .mp-toggle,
.music-preview-body.is-empty .mp-track,
.music-preview-body.is-empty .mp-time { display: none; }
.music-preview-body.is-empty .mp-empty { position: static; margin-top: 2px; }
.mp-empty .ico.big { width: 34px; height: 34px; color: var(--fg-subtle); }
.mp-empty span { font-size: 14px; font-weight: 600; }
.mp-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
/* 生成中遮罩 */
.mp-mask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(16, 19, 26, .55); color: #fff; border-radius: inherit; backdrop-filter: blur(1px); }
.mp-mask .ico { width: 30px; height: 30px; color: #fff; animation: spin 1s linear infinite; }
.mp-mask span { font-size: 13.5px; font-weight: 600; }
/* 列3 预览歌词区 */
.mp-lyrics { width: 100%; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; text-align: center; mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); }
.mp-lyric-line { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-subtle); opacity: .7; transition: color .2s, opacity .2s, transform .2s; }
.mp-lyric-line.tag { font-size: 11px; letter-spacing: .6px; color: var(--primary); font-weight: 600; opacity: .85; }
.mp-lyric-line.active { color: var(--text); opacity: 1; font-weight: 600; transform: scale(1.03); }
.mp-lyrics:empty { display: none; }
/* 列3 预览操作按钮区：弹窗里的非下载类操作按钮都集中在此 */
.mp-acts { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.mp-acts:empty { display: none; }
.mp-acts .music-act-row { margin-bottom: 0; }
.mp-acts .wm-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; font-size: 15px; padding: 7px 12px; }
.mp-form { width: 100%; margin-top: 8px; }
.mp-form:empty { display: none; }
/* 悬浮白框：与全站 .card:hover（border-color:#D7D9DE）同款反馈 */
.music-preview-card:hover { border-color: #D7D9DE; }

/* 生成结果抽屉空态（相对 .dh-right 绝对定位，覆盖 works 区，同 .cr-stage #crEmptyState） */
.music-stage #musicEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }

/* 响应式：窄屏收列（同 .cr-grid / .fs-grid / .fb-grid） */
@media (max-width: 1180px) { .music-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .music-grid { grid-template-columns: 1fr; } .music-col { min-height: 0; } }

/* AI 音乐（music）深色白框覆盖：音乐挂载于 .tools-stage 内，排除深色 .card:hover 变蓝规则，
   回落通用 .card:hover 的 #D7D9DE 白/灰描边，与 cr/fs/fb 三页口径一致（2026-10-09 立标）。
   —— 置于文件末尾、同权压过 5897 行 [data-theme='dark'] .tools-stage .card:hover 蓝色规则。 */
[data-theme='dark'] .music-stage .card:hover { border-color: #D7D9DE; }

/* 音乐结果卡封面：专辑封面多为 1:1，覆盖全站 .dh-work-rc 的 9:16 为正方形（仅音乐页作用域） */
.music-stage .dh-work-rc .rc-cover { aspect-ratio: 1 / 1; }

/* R177（2026-10-09 用户要求）：音乐页「必填」标签改深色半透明底 + 柔光文字，
   避免全局 .voice-req 的 #F4F7FE（近白底）在暗色主题下过于突兀。 */
.music-stage .voice-req { background: rgba(46, 108, 236, .16); color: #8CB2FF; }

/* R178（2026-10-09）：生成进度封顶 95% 后切不确定态脉冲，避免像卡死 */
.music-stage .rc-progress-bar.is-indeterminate {
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  background-size: 55% 100%; background-repeat: no-repeat;
  animation: musicProgShimmer 1.1s linear infinite;
}
@keyframes musicProgShimmer { 0% { background-position: -55% 0; } 100% { background-position: 155% 0; } }

/* ===== AI 音色设计（voice）UI 改造：对齐 AI 音乐创作（music）统一标准（2026-10-10） =====
   生成结果抽屉 / 列流光 / 步骤条 / 弹窗 全部复用全局 .dh-* 标准，本段只补 voice 专属脚手架，
   数值与 .music-* / .cr-* / .fs-* 同源（列宽 repeat(3,minmax(300px,530px))、gap 20、总宽 1630、列头 18/17px、列体 +1px）。 */
.voice-stage { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; width: 100%; min-height: 0; padding: 18px 22px 36px; overflow-y: auto; }
.voice-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 530px)); gap: 20px; width: 100%; align-items: stretch; }
.voice-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; min-height: 773px; }
.voice-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); background: var(--soft); }
.voice-col-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.voice-col:first-child .voice-col-head { font-size: 18px; }
.voice-col-body { display: flex; flex-direction: column; gap: 25px; padding: 16px; flex: 1 1 auto; }
.voice-col-body .card { margin-bottom: 0; }
.voice-col[data-voicestep="3"] .voice-col-body { justify-content: stretch; }
/* 列内文字 +1px（对齐 music/cr/fs/fb 口径；按钮 / cost-badge 不动） */
.voice-col .card-head h3 { font-size: 15px; }
.voice-col .card-head p { font-size: 14px; padding-left: 0; }
.voice-col .credit-input, .voice-col .prompt-textarea { font-size: 15px; }
.voice-col .voice-label { font-size: 13px; }
.voice-col .voice-chips, .voice-col .voice-chip, .voice-col .dewm-tab { font-size: 13px; }
.voice-col .voice-counter { font-size: 12px; }
.voice-col .generate-summary { font-size: 12px; }
.voice-col .generate-tip { font-size: 11px; }
/* 提交行 */
.voice-submit-card .card-body { display: flex; flex-direction: column; gap: 6px; }
/* 生成 CTA：蓝→紫渐变（对齐 music #musicRun / .cr-stage #crBtnGenerate） */
.voice-stage #voiceRun { background-image: var(--grad-cta); border-color: transparent; color: #fff; }
.voice-stage #voiceRun:hover { background-image: var(--grad-cta-hover); }
.voice-stage #voiceRun:disabled { opacity: .6; cursor: default; }

/* 第三列 音频预览卡 */
.voice-preview-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.voice-preview-card .card-head { position: relative; padding-right: 16px; }
.voice-preview-card .card-head.has-dl { padding-right: 44px; }
.voice-preview-card .vp-dl { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.voice-preview-card .vp-dl:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.voice-preview-card .vp-dl .ico { width: 16px; height: 16px; }
.voice-preview-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; position: relative; min-height: 0; }
.voice-preview-body .vp-cover { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; display: grid; place-items: center; margin: 0 auto; }
.voice-preview-body .vp-cover .rc-vinyl { width: 100%; }
.voice-preview-card.is-playing .rc-vinyl-disc { animation-play-state: running; }
.vp-info { width: 100%; text-align: center; }
.vp-title { font-size: 15px; font-weight: 700; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-sub { font-size: 12px; color: var(--fg-subtle); margin-top: 4px; }
.vp-toggle { width: 52px; height: 52px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background-image: var(--grad-cta); box-shadow: 0 8px 22px rgba(94, 99, 245, .38); transition: filter .15s, transform .15s; }
.vp-toggle:hover { filter: brightness(1.06); }
.vp-toggle:active { transform: scale(.96); }
.vp-toggle .ico { width: 24px; height: 24px; }
.vp-track { position: relative; width: 100%; height: 6px; border-radius: 999px; cursor: pointer; }
.vp-track-bg { position: absolute; inset: 0; border-radius: inherit; background: var(--line); }
.vp-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background-image: var(--grad-cta); }
.vp-track-dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18); transform: translateY(-50%); pointer-events: none; }
.vp-time { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.vp-time i { font-style: normal; opacity: .6; }
.vp-time #voicePreviewDur { margin-left: auto; }
.vp-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-subtle); text-align: center; padding: 18px; }
/* ★ 2026-10-25：空态（JS 在 body 上切 .is-empty）——无音频时标题/播放钮/进度条/时间本无意义，
   隐藏之；空态浮层由「铺满居中」改为正常流排到光盘下方，彻底消除与光盘的重叠（用户回报截图实锤）。
   有作品后移除 .is-empty，布局与本规则出现之前完全一致。 */
.voice-preview-body.is-empty .vp-info,
.voice-preview-body.is-empty .vp-toggle,
.voice-preview-body.is-empty .vp-track,
.voice-preview-body.is-empty .vp-time { display: none; }
.voice-preview-body.is-empty .vp-empty { position: static; margin-top: 2px; }
.vp-empty .ico.big { width: 34px; height: 34px; color: var(--fg-subtle); }
.vp-empty span { font-size: 14px; font-weight: 600; }
.vp-empty em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--fg-subtle); }
/* 悬浮白框：与全站 .card:hover（border-color:#D7D9DE）同款反馈 */
.voice-preview-card:hover { border-color: #D7D9DE; }

/* 深色下：列内 .card 悬浮边框回落白/灰（不偏蓝，对齐 music/cr/fs/fb 口径，2026-10-09 立标） */
[data-theme='dark'] .voice-stage .card:hover { border-color: #D7D9DE; }
/* 深色主题下「必填」标签改深色半透明底（对齐 music R177） */
[data-theme='dark'] .voice-stage .voice-req { background: rgba(46, 108, 236, .16); color: #8CB2FF; }

/* 响应式：窄屏收列（对齐 .music-grid / .cr-grid） */
@media (max-width: 1180px) { .voice-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 760px)  { .voice-grid { grid-template-columns: 1fr; } .voice-col { min-height: 0; } }

/* 音色复刻 · 参考音频上传框（script-upload-*）：此前零样式渲染成裸文本，按全站上传框标准（.cr-upload 同款）补齐（2026-10-10） */
.voice-stage .script-upload-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px 12px; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: center; transition: border-color .16s, background .16s; }
.voice-stage .script-upload-box:hover, .voice-stage .script-upload-box:focus-visible { border-color: var(--primary); background: var(--hover-bg); outline: none; }
.voice-stage .script-upload-box .ico { width: 24px; height: 24px; color: var(--fg-subtle); }
.voice-stage .script-upload-main { color: var(--fg); font-size: 14px; font-weight: 600; }
.voice-stage .script-upload-sub { color: var(--fg-subtle); font-size: 12px; font-weight: 500; }
.voice-stage .script-file-info { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--hover-bg); color: var(--fg-subtle); font-size: 12px; line-height: 1.5; word-break: break-all; }

/* 音色结果卡 .rc-text：合成文本只露两行（对齐 music 标准卡紧凑版式，全文在弹窗）（2026-10-10） */
.voice-stage .rc-text { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 18px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.voice-stage .dh-work-rc .rc-cover { aspect-ratio: 1 / 1; }  /* 音色卡封面方图，对齐 music-stage 同款覆盖（2026-10-10） */
/* 合成文本框：高度加倍并固定为默认高度（2026-10-10，仅 #voiceText，同图片生成页 #imagePrompt 先例；基础 min-height:138 → 276） */
.voice-stage textarea.prompt-textarea#voiceText { min-height: 276px; height: 276px; }
/* 音色页：cfg.tip 提示（#voiceTip）移至列 1 底部，margin-top:auto 贴住列底（2026-10-10） */
.voice-col-body > .dewm-tip { margin-top: auto; align-self: center; }

/* AI 去字幕（suberase）深色白框覆盖：挂载于 .tools-stage 内，排除深色 .card:hover 变蓝规则，
   回落通用 .card:hover 的 #D7D9DE 白/灰描边，与 music/cr/fs/fb/voice 口径一致（2026-10-09 立标）。
   —— 置于文件末尾、同权压过 [data-theme='dark'] .tools-stage .card:hover 蓝色规则。 */
[data-theme='dark'] .se-stage-wrap .card:hover { border-color: #D7D9DE; }

/* ============ AI 文案提取（script）UI 改造（2026-10-10，对齐去水印/带货视频标准） ============ */
/* 上传框：此前仅 .voice-stage 有样式；script 复用 .se-stage-wrap，按全站 .cr-upload 同款补齐 */
.se-stage-wrap .script-upload-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px 12px; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: center; transition: border-color .16s, background .16s; }
.se-stage-wrap .script-upload-box:hover, .se-stage-wrap .script-upload-box:focus-visible { border-color: var(--primary); background: var(--hover-bg); outline: none; }
.se-stage-wrap .script-upload-box .ico { width: 24px; height: 24px; color: var(--fg-subtle); }
.se-stage-wrap .script-upload-main { color: var(--fg); font-size: 14px; font-weight: 600; }
.se-stage-wrap .script-upload-sub { color: var(--fg-subtle); font-size: 12px; font-weight: 500; }

/* 列2 教学示例卡 */
.sc-ex-illu { display: flex; align-items: center; justify-content: center; height: 116px; border-radius: 10px; background: var(--surface-2); margin-bottom: 12px; }
.sc-ex-illu svg { width: 72px; height: 72px; color: var(--primary); }
.sc-ex-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text); }
.sc-ex-desc { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.sc-ex-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* 列3 文案预览 */
.sc-preview-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.sc-preview-card > .card-body { flex: 1 1 auto; display: flex; min-height: 0; }
/* 2026-10-12：预览正文与「复制/下载」条拆两层——正文区自适应占位并独立滚动，操作条固定钉在卡片底部（用户要求把下载这一行放到下方） */
.sc-preview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.9; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.sc-preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.sc-preview.sc-empty { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.sc-preview-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-preview-empty .ico { width: 38px; height: 38px; color: var(--fg-subtle); }
.sc-preview-empty p { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.sc-preview-empty em { font-style: normal; font-size: 12px; color: var(--fg-subtle); }
.sc-preview-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.sc-preview-meta { font-size: 12px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-preview-acts { display: flex; gap: 8px; flex: 0 0 auto; }

/* 生成结果卡：文案封面图标（对齐带货视频 .dh-work-rc 9:16 封面） */
.dh-work-rc .rc-cover .sc-doc-ico { width: 40px; height: 40px; color: var(--primary); opacity: .85; }
/* 提取文案生成结果卡：封面改 1:1 正方形（2026-10-10 用户要求；覆盖全局 .dh-work-rc 的 9:16，
   仅作用本页抽屉 #scResultPanel，不影响带货视频等其他页） */
#scResultPanel .dh-work-rc .rc-cover { aspect-ratio: 1 / 1; }
/* 提取文案「功能说明」列头图标徽标（不用序号，尺寸对齐 .se-col-no 圆徽） */
.se-col-no.se-col-ico svg { width: 12px; height: 12px; display: block; }

/* ===== 提取文案 · 文档弹窗对齐「IP 档案库弹窗」标准（2026-10-10 用户要求） =====
   外壳复用 .dhv-mask/.dhv-modal（自带双流光边框），遮罩 / 尺寸 / 标题 / 底钮逐项抄 #dhIpMask 规格；
   正文区为自动换行文本（pre-wrap + break-word），不再单行排布。 */
.sc-doc-mask { background: rgba(6,8,12,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sc-doc-modal { width: 620px; max-width: 94vw; }
.sc-doc-stage {
  flex: 1 1 auto; min-height: 220px; max-height: 56vh; overflow: auto;
  background: var(--soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin: 4px 0 12px;
}
.sc-doc-text {
  margin: 0; font-family: inherit; font-size: 14px; line-height: 1.9; color: var(--text);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}

/* ===== 去水印三个弹窗遮罩对齐「IP 档案库弹窗」标准（2026-10-10 用户要求：背景虚化更明显） =====
   基础 .mask(.58) / .add-mask(.5) 既不够暗也无 blur；此处按 #dhIpMask 规格提暗 + blur(4px)。
   仅作用于去水印三个弹窗：平台清单(#dwPlatMask)、删除确认(dwConfirmDialog/#dwConfirmMask)、预览(viewer)。 */
#dwPlatMask, #dwConfirmMask, .dw-viewer-mask {
  background: rgba(6,8,12,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 提取文案：提示区拆分为「后台提示块 + 模式说明块」（2026-10-10，对齐全站「尽量不用 emoji」调性） */
.sc-tip-box { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sc-tip-cfg {
  display: none; padding: 9px 12px; border-radius: 10px;
  background: var(--soft); border: 1px solid var(--line);
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
.sc-tip-box .dewm-tip { margin: 0; }


/* ====== AI 对话页 UI 改造 P0+P1+P2 · 2026-10-10 ====== */
/* 侧栏与主区为两张独立卡片，中间留 16px 缝（2026-10-10 用户拍板：不直接连、也不通栏） */
.chat-stage { gap: 16px; padding: 6px 4px 28px; width: max(50%, 640px); max-width: 100%; margin: 0 auto; }
.chat-sidebar { flex: 0 0 240px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.chat-sidebar-head { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
/* 新对话 → 渐变 CTA */
.new-chat-btn { flex: 1; min-width: 0; width: auto; border: none; background: var(--grad-cta); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), .25); }
.new-chat-btn:hover { color: #fff; background: var(--grad-cta-hover); }
.chat-clear-btn { flex: 0 0 auto; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-subtle); font-size: 15px; cursor: pointer; font-family: inherit; }
.chat-clear-btn:hover { color: var(--danger); border-color: var(--danger); }
/* 会话列表：紧凑行 + 选中蓝底白字 + 删除键钉右上 (R163) */
.chat-history { padding: 8px; gap: 6px; }
.chat-hist-item { position: relative; border: 1px solid transparent; border-radius: 10px; padding: 9px 10px 9px 12px; background: var(--surface); transition: background .15s, border-color .15s; }
.chat-hist-item:hover { border-color: var(--line); }
.chat-hist-item.active { background: var(--soft); border-color: rgba(var(--primary-rgb), .45); }
.chat-hist-item.active .chi-title { color: var(--primary); }
.chat-hist-item.active .chi-sub,
.chat-hist-item.active .chi-time,
.chat-hist-item.active .chi-cost { color: var(--fg-subtle); }
.chi-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 22px; }
.chi-sub { font-size: 12px; color: var(--fg-subtle); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 22px; }
.chi-foot { margin-top: 6px; }
.chi-del { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 6px; color: var(--fg-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chat-hist-item.active .chi-del { color: var(--fg-faint); }
.chi-del:hover { color: var(--danger); background: var(--hover-bg); }
.chat-hist-item.active .chi-del:hover { color: var(--danger); background: var(--hover-bg); }
.chi-del .ico { width: 13px; height: 13px; }
/* 主区独立卡片（原口径：radius 18 + 淡阴影）+ 常驻双流光（.dh-dlg-beam 挂在 index.html，见标准组件 3362 行） */
.chat-main { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 28px rgba(31,35,41,.06); min-height: 70vh; }
.chat-main-scroll { background: var(--surface); }
/* 消息区 */
.chat-msgs { background: var(--surface); padding: 18px 20px; gap: 0; }
.chat-msgs > .chat-row + .chat-row { margin-top: 22px; }
.chat-row.assistant { flex-direction: row; align-items: flex-start; gap: 10px; text-align: left; }
.chat-row.user { align-items: flex-end; }
.chat-ava { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.chat-msg-body { min-width: 0; flex: 1; }
.chat-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chat-msg-name { font-size: 14px; font-weight: 600; color: var(--text); }
.chat-msg-model { font-size: 12px; color: var(--fg-subtle); }
.chat-row.assistant .chat-bubble { margin: 0; background: transparent; border: none; color: var(--text); border-radius: 0; max-width: 100%; padding: 0; }
.chat-bubble { font-size: 15px; line-height: 1.8; }
.chat-row.user .chat-bubble { max-width: 80%; background: rgba(var(--primary-rgb), .14); color: var(--text); border-color: rgba(var(--primary-rgb), .35); }
.chat-cost-badge { display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--fg-subtle); background: var(--surface-2); border-radius: 999px; padding: 2px 9px; }
/* 轮次底部行：消耗徽标 + 整轮复制按钮（2026-10-10 用户拍板，只复制当前这条回复） */
.chat-msg-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.chat-msg-foot .chat-cost-badge { margin-top: 0; }
.chat-msg-copy { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; color: var(--fg-faint); font-size: 12px; font-family: inherit; cursor: pointer; padding: 3px 8px; border-radius: 8px; transition: color .15s, background .15s; }
.chat-msg-copy .ico { width: 13px; height: 13px; }
.chat-msg-copy:hover { color: var(--primary); background: var(--hover-bg); }
.chat-cost-line { display: none; }
/* Markdown 元素 */
.chat-text { font-size: 15px; line-height: 1.85; }
.chat-text .chat-h { margin: 14px 0 6px; font-weight: 600; color: var(--text); line-height: 1.5; }
.chat-text h3.chat-h { font-size: 17px; }
.chat-text h4.chat-h { font-size: 15.5px; }
.chat-text .chat-ul, .chat-text .chat-ol { margin: 6px 0; padding-left: 22px; }
.chat-text .chat-ul li, .chat-text .chat-ol li { margin: 3px 0; }
.chat-inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; background: var(--surface-2); color: var(--primary); padding: 1px 5px; border-radius: 5px; }
.chat-code { position: relative; margin: 8px 0; background: #0F1318; border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.chat-code pre { margin: 0; }
.chat-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #E6EDF3; white-space: pre; }
.chat-code-copy { position: absolute; top: 8px; right: 8px; border: none; background: rgba(255,255,255,.12); color: #E6EDF3; font-size: 11px; padding: 3px 9px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.chat-code-copy:hover { background: rgba(255,255,255,.22); }
/* 细滚动条（全站口径） */
.chat-code::-webkit-scrollbar, .chat-msgs::-webkit-scrollbar, .chat-history::-webkit-scrollbar { width: 6px; height: 6px; }
.chat-code::-webkit-scrollbar-thumb, .chat-msgs::-webkit-scrollbar-thumb, .chat-history::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.chat-code::-webkit-scrollbar-thumb:hover, .chat-msgs::-webkit-scrollbar-thumb:hover, .chat-history::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
/* 空状态 + 快捷提问 */
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; margin: 0 auto; max-width: none; width: 100%; }
.chat-empty p { font-size: 14px; line-height: 1.8; margin: 0 0 18px; text-align: center; }
.chat-suggests { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 460px; }
.chat-suggest { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 15px; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s; }
.chat-suggest:hover { border-color: var(--primary); color: var(--primary); }
/* 输入区 */
.chat-input-wrap { border-top: 1px solid var(--line); background: var(--surface); border-radius: 0; padding: 12px 14px 14px; }
.chat-input-box { background: var(--surface-2); border-color: var(--line); }
.chat-input { background: transparent; color: var(--text); }
.chat-input-tools { gap: 8px; min-height: 44px; padding: 8px 2px 2px; }
.chat-cost { color: var(--fg-subtle); font-weight: 500; }
.chat-send { background: var(--grad-cta); }
.chat-send:hover { background: var(--grad-cta-hover); }
.chat-send[disabled] { background: var(--fg-faint); opacity: .5; cursor: not-allowed; }
.chat-hint { margin-top: 8px; font-size: 12px; color: var(--fg-subtle); text-align: center; }
/* 2026-10-10 用户拍板：除按钮外文字整体加大一号（按钮字号不动） */
.chat-input { font-size: 16px; }
.chat-input::placeholder { font-size: 15px; }
.chat-cost { font-size: 13px; }
.chat-attach-row .chat-attach-chip { font-size: 13px; }
.chat-mention-pop .chat-mention-title { font-size: 12px; }
.chat-mention-pop .chat-mention-item { font-size: 13.5px; }
/* 模型面板：单行紧凑列表（2026-10-10 用户拍板，对齐 #homeModelPanel 口径：左品牌图标+模型名 · 右能力点 · 选中打勾） */
.qc-model-panel.chat { width: 420px; max-width: calc(100vw - 48px); }
.qc-model-panel.chat .qm-item { flex-wrap: nowrap; align-items: center; padding: 9px 12px; border-radius: 10px; }
.qc-model-panel.chat .qm-item + .qm-item { margin-top: 2px; }
.qc-model-panel.chat .qm-item:hover { background: var(--soft); }
.qc-model-panel.chat .qm-item.active { background: var(--soft); color: var(--text); }
.qc-model-panel.chat .qm-item.active .qm-label { color: var(--primary); }
.qc-model-panel.chat .qm-item-main { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; overflow: hidden; }
.qc-model-panel.chat .qm-label { font-size: 14.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; gap: 7px; }
.qc-model-panel.chat .qm-label .ico { width: 15px; height: 15px; color: var(--fg-subtle); flex-shrink: 0; }
.qc-model-panel.chat .qm-item.active .qm-label .ico { color: var(--primary); }
.qc-model-panel.chat .qm-caps { margin-left: auto; flex-shrink: 1; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; min-width: 0; gap: 0; overflow: hidden; text-overflow: ellipsis; }
/* ★ 覆盖 1806 行旧规则（.qm-caps .cap 白底胶囊，特异性同级靠后者胜）：能力点一律透明底灰字 */
.qc-model-panel.chat .qm-caps .cap { background: transparent; color: var(--fg-subtle); padding: 0; font-size: 11.5px; line-height: 1.5; border-radius: 0; white-space: nowrap; }
.qc-model-panel.chat .qm-item.active .qm-caps .cap { background: transparent; color: var(--fg-subtle); }
.qc-model-panel.chat .cap + .cap::before { content: '·'; margin: 0 4px; opacity: .55; }
/* 底部模型触发胶囊：去主题蓝底，改中性卡片色（2026-10-10 用户拍板「下方的蓝色底也要改掉」） */
.chat-model { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.chat-model .ico { color: var(--fg-subtle); }
/* 长对话提示条（2026-10-10 用户需求：内容多时建议新建对话省算力） */
.chat-long-hint { display: flex; align-items: center; gap: 8px; margin: 0 2px 9px; padding: 8px 10px; border-radius: 10px; background: var(--soft); border: 1px solid rgba(var(--primary-rgb), .18); color: var(--fg-subtle); font-size: 15px; line-height: 1.55; }
.chat-long-hint .clh-ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--primary); }
.chat-long-hint .clh-text { flex: 1; min-width: 0; }
.chat-long-hint .clh-new { border: none; background: transparent; color: var(--primary); font-size: 15px; font-weight: 600; font-family: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.chat-long-hint .clh-new:hover { opacity: .8; }
.chat-long-hint .clh-close { flex: 0 0 auto; width: 20px; height: 20px; border: none; background: transparent; color: var(--fg-faint); font-size: 16px; line-height: 1; border-radius: 6px; cursor: pointer; }
.chat-long-hint .clh-close:hover { color: var(--text); background: var(--hover-bg); }
/* 窄栏（≤760px）侧栏转顶部时仍为独立卡片 */
@media (max-width: 760px) {
  .chat-sidebar { flex-basis: auto; }
}

/* ===== 联系客服弹窗（2026-10-11，对齐参考站卡片布局 + IP档案库弹窗标准）=====
   外壳 .dhv-mask.sup-mask（深遮罩 rgba(6,8,12,.72) + backdrop blur 4px，同 .as-preview-mask 口径）
   + .dhv-modal.sup-modal（自带双流光边框，禁止再写 ::after/::before）。
   内部布局：渐变头部（--grad-cta）→ 联系方式行（彩色圆角图标：微=微信绿 / 码=CTA渐变 /
   电=橙 / QQ=青 / 邮=紫）→ 二维码块 → 提示胶囊 → 渐变关闭钮。深浅主题均适配（面板用 --surface/--soft）。 */
.dhv-mask.sup-mask {
    background: rgba(6,8,12,.72);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    z-index: 10000; /* ★ 最顶层：高于 OEM 介绍弹窗内联 z-index(9999)，从任何弹窗内拉起客服都稳定置顶可见 */
}
.dhv-modal.sup-modal {
    width: min(400px, 92vw); padding: 0; overflow: hidden; /* 流光为 inset:0 描边式，不会被裁 */
}
/* ★ 2026-10-21 用户要求：客服弹窗双流光由「淡蓝」改「视频生成列流光同款白色系」。
   与列流光 .dh-col-beam / .cv-confirm 同族：复用 --dh-beam-a/b 动画 + --dh-beam-ink 令牌
   （深色=纯白 / 浅色=中性灰），只覆盖 .sup-modal 一处，其余 .dhv-modal 仍为淡蓝不动。 */
.dhv-modal.sup-modal::after,
.dhv-modal.sup-modal::before {
    background: conic-gradient(from var(--dh-beam-a),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.dhv-modal.sup-modal::before {
    background: conic-gradient(from var(--dh-beam-b),
        rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
        rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
/* 右上角关闭钮（2026-10-21 用户要求）：浮在渐变头部之上，不占布局 */
.sup-close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); color: #fff;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: background .18s;
}
.sup-close:hover { background: rgba(255,255,255,.36); }
.sup-head {
    padding: 26px 20px 20px; text-align: center; color: #fff;
    background: var(--grad-cta);
    border-radius: 14px 14px 0 0;
}
.sup-ava {
    width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.55);
    font-size: 22px; font-weight: 800;
}
.sup-title { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.sup-sub { margin-top: 5px; font-size: 12.5px; opacity: .88; letter-spacing: .5px; }
/* ★ 2026-10-21 修复：.sup-modal 是 overflow:hidden 的 flex 列，内容超高时被直接裁掉、无法滚动
   （手机端 QR + 提示胶囊 + 底部按钮常被切）。给 body 加 flex:1+min-height:0+overflow-y:auto，
   超高时内部滚动，桌面端内容不超时行为不变。 */
.sup-body { padding: 4px 22px 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sup-row {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 0; border-bottom: 1px solid var(--line);
}
.sup-row:last-child { border-bottom: 0; }
.sup-ic {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; font-weight: 800;
}
.sup-ic.wechat { background: #07C160; }
.sup-ic.code   { background: var(--grad-cta); align-self: flex-start; }
.sup-ic.phone  { background: #FF8F1F; }
.sup-ic.qq     { background: #12B7F5; }
.sup-ic.mail   { background: #8B5CF6; }
.sup-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sup-label { font-size: 12px; color: var(--text-tertiary); }
.sup-value {
    font-size: 15.5px; font-weight: 700; color: var(--text);
    cursor: pointer; word-break: break-all;
    transition: color .15s;
}
.sup-value:hover { color: var(--hover-border, #2E6CEC); }
.sup-value:hover::after { content: "（点击复制）"; font-size: 11px; font-weight: 400; color: var(--text-tertiary); }
.sup-hint { font-size: 12px; color: var(--text-tertiary); }
.sup-qr-row { align-items: flex-start; }
.sup-qr-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 2px; }
.sup-qr-box img {
    width: 150px; height: 150px; object-fit: cover; border-radius: 12px;
    border: 1px solid var(--line); background: #fff; padding: 6px;
}
.sup-qr-cap { font-size: 12px; color: var(--text-tertiary); }
.sup-empty { padding: 22px 0 14px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.sup-note {
    margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px;
    background: var(--soft); font-size: 12px; line-height: 1.6;
    color: var(--text-tertiary); text-align: center;
}
.sup-foot { padding: 10px 22px 18px; }
.sup-foot .d-btn.primary {
    width: 100%; height: 40px; border: 0; border-radius: 999px;
    background: var(--grad-cta); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: opacity .18s;
}
.sup-foot .d-btn.primary:hover { opacity: .9; }

/* ===== 个人中心弹窗 → IP档案库标准（2026-10-11 用户要求）=====
   逐项对齐 #dhIpMask 规格：① 深遮罩 rgba(6,8,12,.72)+blur(4px)；② 面板 830×1060 定尺
   + border var(--line) + 深阴影；③ 双流光（HTML 已挂 .dh-dlg-beam，标准组件自带，禁止重复声明伪元素）；
   ④ 全部文字字号 +2 档（同 6665 行 #dhIpMask 口径）；⑤ 主按钮（确认核销）走 --grad-cta；
   ⑥ 卡片 hover 白描边 #D7D9DE；⑦ 深色主题面板 var(--soft)。 */
.uc-mask { background: rgba(6,8,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.uc-panel {
  width: 830px; max-width: 94vw; min-height: 1060px;   /* 定尺同 .dh-ip-modal / .cvpl-* */
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 32px 96px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  padding: 28px 32px 22px; gap: 18px;
}
.uc-mask .uc-foot { margin-top: auto; }                /* 定高后「退出登录」沉底 */
.uc-close { font-size: 24px; }
:root[data-theme="dark"] .uc-panel { background: var(--soft); }
/* —— 字号 +2 档 —— */
.uc-avatar { width: 60px; height: 60px; font-size: 24px; }
.uc-uname { font-size: 19px; }
.uc-uid { font-size: 14px; }
.uc-tag { font-size: 13px; padding: 3px 11px; }
.uc-stat { padding: 16px; }
.uc-stat b { font-size: 22px; }
.uc-stat span { font-size: 13px; }
.uc-kv { font-size: 15px; padding: 10px 2px; }
.uc-kv > span:first-child { width: 104px; font-size: 14.5px; }
.uc-copy { font-size: 14px; }
.uc-link { font-size: 15px; padding: 12px 14px; }
.uc-link .ico { width: 17px; height: 17px; }
.uc-link em { font-size: 13px; }
.uc-sec-title { font-size: 15px; }
.uc-tpl-count { font-size: 13px; }
.uc-tpl-item { font-size: 14px; padding: 8px 10px; }
.uc-empty { font-size: 14px; }
.uc-agree { font-size: 14px; }
#ucMask .text-input { font-size: 15px; }
/* —— 主按钮渐变（IP 档案库主按钮口径）—— */
#ucMask .credit-redeem-btn { background: var(--grad-cta, var(--primary)); border-color: transparent; color: #fff; }
#ucMask .credit-redeem-btn:hover { background: var(--grad-cta-hover, var(--primary-dark)); }
/* —— 卡片 hover 白描边（标准色 #D7D9DE）—— */
.uc-link:hover { border-color: #D7D9DE; }

/* ===== 我的资产优化（2026-10-11）===== */
/* ① 加载更多（分页，避免一次渲染过多卡片；grid-column 占满整行） */
.as-more {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 10px auto 4px;
  padding: 9px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s, color .16s;
}
.as-more:hover { border-color: var(--hover-border); color: var(--text); }
/* ② 移动端操作按钮常显（触摸设备无 hover，否则无法呼出预览/标签/删除等） */
@media (max-width: 768px) {
  .as-card .as-ops { opacity: 1; }
}
/* ③ 站内确认 / 重命名弹窗（替换原生 confirm/prompt，IP 档案库标准：深遮罩+模糊+双流光） */
.as-confirm-mask {
  position: fixed; inset: 0; z-index: 1300;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 8, 12, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.as-confirm-mask.show { display: flex; }
.as-confirm {
  width: min(380px, 92vw);
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(10, 15, 25, .4);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
:root[data-theme="dark"] .as-confirm { background: var(--soft); }
.as-confirm-msg, .as-confirm-title { font-size: 15px; line-height: 1.6; color: var(--text); }
.as-confirm-title { font-weight: 700; }
.as-confirm-input {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font-size: 15px; outline: none;
}
.as-confirm-input:focus { border-color: var(--primary); }
.as-confirm-acts { display: flex; gap: 10px; justify-content: flex-end; }
.as-confirm-acts .as-btn { min-width: 84px; height: 36px; border-radius: 999px; font-size: 14px; }
.as-confirm-acts .as-btn.primary { background: var(--grad-cta); border-color: transparent; color: #fff; }
.as-confirm-acts .as-btn.primary:hover { opacity: .92; }

/* ===== 我的作品优化（2026-10-11）===== */
/* ① 移动端操作按钮常显（触摸设备无 hover，否则无法呼出预览/下载/删除） */
@media (max-width: 768px) {
  .wk-card .wk-ops { opacity: 1; }
}
/* ② 视频缩略图懒加载占位（src 由 IntersectionObserver 注入前先显示灰底，避免空洞） */
.wk-vid-lazy { background: var(--surface-2); }

/* ===== 用户中心「积分行」（2026-10-12 改造）=====
   用户要求：积分这一行向左缩进、左边显示积分框；右边突出放「充值 / 套餐」按钮（原先在六宫格第 1 行
   右格，现上移）；六宫格里空出来的那格改放「积分明细」。
   改动前是 .uc-stats/.uc-stat 通栏且文字居中，两端大片留白、注意力被摊薄。 */
.uc-credit-row { display: flex; align-items: stretch; gap: 12px; }
.uc-credit-box {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--soft, #f6f7f9); border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius-md, 12px);
}
.uc-credit-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light, #eff6ff); color: var(--primary, #3b82f6);
}
.uc-credit-ico .ico { width: 21px; height: 21px; }
.uc-credit-num { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.uc-credit-num b { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--primary, #3b82f6); }
.uc-credit-num i { font-style: normal; font-size: 13px; color: var(--muted, var(--fg-subtle)); }
/* 右侧按钮：「突出」= 实心渐变 + 投影，从整行里跳出来 */
.uc-recharge-btn {
  flex: 0 0 auto; min-width: 190px; padding: 0 26px;
  border: none; border-radius: var(--radius-md, 12px);
  background: var(--grad-cta, var(--primary)); color: #fff;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 16px rgba(46, 108, 236, .28);
  transition: opacity .15s, transform .15s;
}
.uc-recharge-btn:hover { opacity: .92; }
.uc-recharge-btn:active { transform: translateY(1px); }
@media (max-width: 560px) {
  .uc-credit-row { flex-direction: column; }
  .uc-recharge-btn { height: 44px; }
}

/* ===== 积分明细弹层（用户中心 → 积分明细 · 2026-10-12）=====
   用户要求「弹窗后的内容，和管理后台用户流水弹窗一样」，故把后台 admin.html 内联的那套
   .lg-* / .log-table / .cl-pager 原样搬到 style.css（index.html 不加载 admin.html 的样式），
   两边类名与观感一致；唯一差别是数据源（后台 /api/admin/logs?userId=，这里 /api/credit-logs 只查自己）。 */
.uc-panel.lg-dialog {
  width: 1000px; max-width: 94vw;
  min-height: 0;                    /* 覆盖 .uc-panel 的 1060px 定尺（那是 IP 档案库口径，明细弹层不需要） */
  height: 88vh; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 24px 28px 18px; gap: 0;
}
.lg-title { font-size: 17px; font-weight: 680; text-align: center; margin: 0 0 6px; color: var(--text, #111827); }
.lg-sub { font-size: 13px; color: var(--muted, #8F959E); line-height: 1.6; text-align: center; margin: 0; }
.lg-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; text-align: left; }
.lg-toolbar .spacer { flex: 1; }
.lg-quick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lg-range { display: inline-flex; align-items: center; gap: 6px; color: #8F959E; font-size: 13px; }
.lg-date { height: 30px; padding: 0 8px; border: 1px solid #E5E6EB; border-radius: 6px; background: #fff; color: #1D2129; font-size: 13px; font-family: inherit; outline: none; }
.lg-date:focus { border-color: #2E6CEC; }
.lg-go { height: 30px; padding: 0 18px; border: 1px solid transparent; border-radius: 6px; background: var(--grad-cta, var(--primary)); color: #fff; font-size: 13px; font-family: inherit; cursor: pointer; }
.lg-go:hover { opacity: .92; }
.lg-sum { margin: 12px 0 8px; font-size: 13px; color: #8F959E; text-align: left; }
.lg-sum b { color: #1D2129; }
.lg-sum .lg-in { color: #16845B; font-weight: 600; }
.lg-sum .lg-out { color: #C9363E; font-weight: 600; }

.cl-pill { padding: 5px 14px; border-radius: 15px; border: 1px solid #E5E6EB; background: #fff; color: #646A73; font-size: 12.5px; font-family: inherit; cursor: pointer; transition: all .15s; }
.cl-pill:hover { border-color: #B8BCC4; }
.cl-pill.active { border-color: #2E6CEC; background: #2E6CEC; color: #fff; font-weight: 600; }
.cl-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cl-pager-left { display: flex; align-items: center; gap: 6px; color: #646A73; font-size: 14px; }
.cl-pagesize { height: 30px; padding: 0 8px; border: 1px solid #E5E6EB; border-radius: 6px; background: #fff; color: #1D2129; font-size: 13px; cursor: pointer; }
.cl-pagesize:hover { border-color: #B8BCC4; }
.cl-pager-right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cl-page-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #E5E6EB; border-radius: 6px; background: #fff; color: #1D2129; font-size: 13px; font-family: inherit; cursor: pointer; transition: all .15s; }
.cl-page-btn:hover:not(.active):not(.disabled):not(.dots) { border-color: #2E6CEC; color: #2E6CEC; }
.cl-page-btn.active { border-color: #2E6CEC; background: #2E6CEC; color: #fff; font-weight: 600; cursor: default; }
.cl-page-btn.disabled { color: #C9CDD4; cursor: not-allowed; border-color: #F0F1F3; background: #FAFBFC; }
.cl-page-btn.dots { border-color: transparent; background: transparent; cursor: default; min-width: 18px; padding: 0; }

.log-scroll { max-height: 340px; overflow: auto; }
.log-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; margin-top: 10px; }
.log-table th, .log-table td { padding: 8px 10px; border-bottom: 1px solid #F0F1F3; text-align: left; white-space: nowrap; }
.log-table th { color: #8F959E; font-weight: 600; background: #FAFBFC; }
.log-table .in { color: #16845B; font-weight: 600; }
.log-table .out { color: #C9363E; font-weight: 600; }
.log-table td.dim { color: #9296A0; }
/* 明细弹层里表体自己滚、表头吸顶，工具栏与分页器固定不滚 */
.lg-dialog .log-scroll { flex: 1 1 auto; min-height: 140px; max-height: none; overflow: auto; border: 1px solid #F0F1F3; border-radius: 8px; }
.lg-dialog .log-table { margin-top: 0; }
.lg-dialog .log-table th { position: sticky; top: 0; z-index: 1; }
.lg-dialog .cl-pager { margin-top: 12px; }

/* —— 深色主题（与后台那份同源） —— */
[data-theme="dark"] .uc-credit-box { background: #20242C; border-color: #2A2E36; }
[data-theme="dark"] .uc-credit-ico { background: #232A38; color: #4C8DFF; }
[data-theme="dark"] .uc-credit-num b { color: #6E9EFF; }
[data-theme="dark"] .cl-pill { border: 1px solid #2A2E36; background: #181B21; color: #9AA1AC; }
[data-theme="dark"] .cl-pill:hover { border-color: #353B45; }
[data-theme="dark"] .cl-pill.active { border-color: #4C8DFF; background: #4C8DFF; color: #fff; }
[data-theme="dark"] .cl-pager-left { color: #9AA1AC; }
[data-theme="dark"] .cl-pagesize { border: 1px solid #2A2E36; background: #181B21; color: #E6E8EB; }
[data-theme="dark"] .cl-pagesize:hover { border-color: #353B45; }
[data-theme="dark"] .cl-page-btn { border: 1px solid #2A2E36; background: #181B21; color: #E6E8EB; }
[data-theme="dark"] .cl-page-btn:hover:not(.active):not(.disabled):not(.dots) { border-color: #4C8DFF; color: #4C8DFF; }
[data-theme="dark"] .cl-page-btn.active { border-color: #4C8DFF; background: #4C8DFF; }
[data-theme="dark"] .cl-page-btn.disabled { color: #5A606B; border-color: #2A2E36; background: #20242C; }
[data-theme="dark"] .log-table { background: #181B21; }
[data-theme="dark"] .log-table th, [data-theme="dark"] .log-table td { border-bottom: 1px solid #2A2E36; }
[data-theme="dark"] .log-table th { color: #7B828C; background: #20242C; }
[data-theme="dark"] .log-table .in { color: #3FB985; }
[data-theme="dark"] .log-table .out { color: #F0616B; }
[data-theme="dark"] .log-table td.dim { color: #9AA1AC; }
[data-theme="dark"] .lg-title { color: #E6E8EB; }
[data-theme="dark"] .lg-sub { color: #7B828C; }
[data-theme="dark"] .lg-range { color: #7B828C; }
[data-theme="dark"] .lg-date { border: 1px solid #2A2E36; background: #181B21; color: #E6E8EB; color-scheme: dark; }  /* 原生日期面板也走深色 */
[data-theme="dark"] .lg-date:focus { border-color: #4C8DFF; }
[data-theme="dark"] .lg-sum { color: #7B828C; }
[data-theme="dark"] .lg-sum b { color: #E6E8EB; }
[data-theme="dark"] .lg-sum .lg-in { color: #3FB985; }
[data-theme="dark"] .lg-sum .lg-out { color: #F0616B; }
[data-theme="dark"] .lg-dialog .log-scroll { border-color: #2A2E36; }

/* ===== 我的订单弹层（用户中心 → 我的订单 · 2026-10-16）=====
   版式复用积分明细那套（lg-dialog/log-table/cl-pager），仅宽度收紧到 880px（8 列订单表够用）；
   筛选栏为订单表新增（积分明细是日期区间，这里是 订单号搜索 + 类型 + 状态）。 */
.uc-panel.uo-dialog { width: 880px; max-width: 94vw; }
.uo-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.uo-filter-bar .text-input { height: 30px; padding: 0 10px; border: 1px solid #E5E6EB; border-radius: 6px; background: #fff; color: #1D2129; font-size: 13px; font-family: inherit; outline: none; }
.uo-filter-bar .text-input:focus { border-color: #2E6CEC; }
.uo-filter-bar .uo-kw { width: 220px; }
.uo-filter-bar select { width: 130px; cursor: pointer; }
.uo-filter-bar .d-btn { flex: none; height: 30px; padding: 0 16px; border: 1px solid #E5E6EB; border-radius: 6px; background: #fff; color: #1D2129; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.uo-filter-bar .d-btn:hover { border-color: #2E6CEC; color: #2E6CEC; }
[data-theme="dark"] .uo-filter-bar .text-input,
[data-theme="dark"] .uo-filter-bar .d-btn { border: 1px solid #2A2E36; background: #181B21; color: #E6E8EB; }
/* 订单状态徽章：待支付琥珀 / 已到账·已兑换绿 / 已取消灰 / 已退款红 */
.uo-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; line-height: 18px; }
.uo-tag.warn { background: #FAEEDA; color: #854F0B; }
.uo-tag.ok { background: #EAF3DE; color: #3B6D11; }
.uo-tag.muted { background: #F1EFE8; color: #5F5E5A; }
.uo-tag.refund { background: #FCEBEB; color: #A32D2D; }
[data-theme="dark"] .uo-tag.warn { background: #412402; color: #EF9F27; }
[data-theme="dark"] .uo-tag.ok { background: #173404; color: #97C459; }
[data-theme="dark"] .uo-tag.muted { background: #2C2C2A; color: #B4B2A9; }
[data-theme="dark"] .uo-tag.refund { background: #501313; color: #F09595; }
/* 佣金转积分行淡蓝底：只读镜像记录，与线上订单视觉区分 */
.log-table tr.uo-cv { background: #F5F8FD; }
[data-theme="dark"] .log-table tr.uo-cv { background: #1A2233; }
/* 订单表内联操作：去支付（蓝框）/ 删除（红字） */
.uo-op { height: 26px; padding: 0 12px; border: 1px solid #B5D4F4; border-radius: 6px; background: #fff; color: #185FA5; font-size: 12px; font-family: inherit; cursor: pointer; }
.uo-op:hover { border-color: #2E6CEC; }
.uo-op.del { border-color: #F7C1C1; color: #A32D2D; }
.uo-op.del:hover { border-color: #E24B4A; }
.uo-op:disabled { opacity: .5; cursor: not-allowed; }
[data-theme="dark"] .uo-op { border: 1px solid #2E4A66; background: #181B21; color: #85B7EB; }
[data-theme="dark"] .uo-op.del { border: 1px solid #5A2A2A; color: #F09595; }
/* 去支付视图（订单弹层内覆盖）：通道二选一 + 二维码/跳转 + 轮询到账 */
.uo-pay { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 16px; text-align: center; }
.uo-pay-amt { font-size: 13px; color: #8F959E; }
.uo-pay-amt b { font-size: 22px; color: #1D2129; font-weight: 600; }
.uo-pay-channels { display: flex; gap: 12px; }
.uo-pay-ch { min-width: 130px; height: 38px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; color: #1D2129; font-size: 13px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.uo-pay-ch .cp-ico { width: 20px; height: 20px; border-radius: 5px; }
.uo-pay-ch:hover { border-color: #2E6CEC; color: #2E6CEC; }
.uo-pay-back { border: none; background: none; color: #8F959E; font-size: 12px; font-family: inherit; cursor: pointer; text-decoration: underline; }
.uo-pay-qr { background: #fff; padding: 12px; border-radius: 10px; line-height: 0; }
.uo-pay-note { font-size: 12px; color: #8F959E; line-height: 1.7; }
[data-theme="dark"] .uo-pay-amt b { color: #E6E8EB; }
[data-theme="dark"] .uo-pay-ch { border: 1px solid #2A2E36; background: #181B21; color: #E6E8EB; }
[data-theme="dark"] .uo-pay-qr { background: #fff; }

/* ============================================================
 * 视频复刻（爆款复刻）专属样式
 * 其余全部复用全站标准件：.card / .pill / .cr-upload / .dh-col-beam /
 * .dh-work-rc / .dh-right / .qc-model / .generate-btn / .cost-badge / .result-card
 * ============================================================ */
/* 页面基座：flex 纵向（步骤条独占一行在上、三列网格在下）—— ★ 2026-10-18 修：
   .main-stage 默认 align-items:stretch 的**行向** flex，漏了 flex-direction:column 时
   步骤条会被当成「行内兄弟」与三列并排 → 挤在左侧吃掉三列宽度（用户截图「导航条占用了三列的宽度」）。
   与 .cr-stage / .fs-stage / .fb-stage / .of-stage / .vg-stage 五条逐字同参，不另造一套。 */
.vr-stage { flex-direction: column; align-items: flex-start; padding: 18px 22px 36px; overflow-y: auto; }
/* 模型卡定位在列②中段，面板（≤320px）仍在列体高度内，因此列级保持 .cr-col 的 overflow:hidden
   （保住圆角与流光裁剪），只放开卡片自身——否则面板被 .card{overflow:hidden} 切掉，点了像没反应。 */
.vr-stage [data-vrstep="3"] .cr-col-body { justify-content: stretch; }
/* 生成结果抽屉空态（相对 .dh-right 绝对定位，与 .cr-stage #crEmptyState / .fs-stage #fsEmptyState 同参） */
.vr-stage #vrEmptyState { position: absolute; left: 0; right: 0; top: var(--dh-rhead-h, 53px); bottom: 0; background: var(--card); z-index: 1; }
.vr-textarea { width:100%; min-height:120px; resize:vertical; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.65; background:var(--surface); color:var(--text); font-family:inherit; box-sizing:border-box; }
.vr-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.vr-textarea::placeholder { color:var(--fg-subtle); }

/* 商品素材缩略网格（2026-10-18 用户要求：素材卡片移入上传虚线框内部）
   网格挂在 #vrMatDrop（.cr-upload）里，宽度由框体决定；框体有自己的 border/radius/overflow，
   所以网格只补左右下内边距，不再自带上外边距。:empty 必须彻底隐藏，否则空网格的 padding
   会在空态按钮下多撑出一块留白。 */
.vr-mat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0 12px 12px; }
.vr-mat-grid:empty { display:none; }
/* 有图时：缩略网格在上（顶到框内上沿），空态收窄成一条「继续添加」落到下方
   （2026-10-18 用户要求：卡片在上、选择文件按钮在下。上下间距全部由空态内边距承担，网格不留底距） */
.vr-stage #vrMatDrop.has-items .vr-mat-grid { padding:12px 12px 0; }
.vr-stage #vrMatDrop.has-items .cr-upload-empty { padding:12px 12px 14px; gap:6px; }
.vr-stage #vrMatDrop.has-items .cr-upload-empty .ico.big { display:none; }
.vr-stage #vrMatDrop.has-items .cr-upload-empty em { display:none; }
.vr-stage #vrMatDrop.has-items .gv-up-actions { margin-top:8px; }
.vr-thumb { position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--surface-2); }
.vr-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vr-thumb-del { position:absolute; top:4px; right:4px; width:22px; height:22px; border:none; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.vr-thumb-del .ico { width:13px; height:13px; }

/* 风格选项（提示词取自爆款复刻配置） */
.vr-opt-group { margin-bottom:12px; }
.vr-opt-group:last-child { margin-bottom:0; }
.vr-opt-title { font-size:12px; color:var(--fg-subtle); margin-bottom:6px; font-weight:600; }

/* 以原视频为参考 */
.vr-ref-toggle { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--text); cursor:pointer; user-select:none; }
.vr-ref-toggle input { width:16px; height:16px; accent-color:var(--primary); }
.vr-ref-toggle span { color:var(--fg-subtle); }

/* AI分析 / 解析素材 / 生成脚本 按钮（复用 .pv-btn.primary，仅补满宽与间距） */
.vr-analyze-btn { margin-top:12px; width:100%; justify-content:center; }
/* 「生成脚本」卡是按钮在上、脚本框在下：.vr-analyze-btn 只有 margin-top（用于贴卡头），
   紧邻的 textarea 必须自己补下间距，否则按钮与内容框会贴在一起。 */
.vr-analyze-btn + .vr-textarea { margin-top:12px; }

/* ===== 上传原视频预览（2026-10-18 用户反馈：框太大）=====
   选中视频后上传框不再按列宽撑满（9:16 视频 460 宽会撑到 820 高），
   改为「收成视频自身尺寸 + 整框水平居中」：高度上限 240px（与 .cr-upload-preview img 既有上限同口径），宽度按视频比例自适应。
   删除按钮 .cr-preview-del 相对 .cr-upload-preview 绝对定位，随框一起贴到视频右上角。 */
.vr-stage #vrVideoDrop.has-video { width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px; }
.vr-stage #vrVideoDrop.has-video .cr-upload-preview { width: auto; }
.vr-stage #vrVideoDrop video { display: block; width: auto; height: auto; max-width: 100%; max-height: 240px; border-radius: 6px; background: #10131A; }

/* ===== 视频预览卡：成片顶对齐铺满列宽（2026-10-18 二次修正，与 .vg-live-card 同口径）=====
   ★ 顶对齐的根因：原先写 width/height 都是 100%（撑满预览区），再靠 contain 居中 —— 只要视频比例
   与预览区不一致（1:1 / 16:9 视频放进 9:16 左右的列），画面就会在容器里**垂直居中**，上下各留一段
   纯黑边，看起来「悬在半空」。视频生成页（.vg-live-card）的正确口径是：宽度铺满列宽、高度按比例
   （height:auto）、`object-position:50% 0` 顶对齐，比例不符时留白全落在**下方**（卡片背景），
   画面顶部永远紧贴卡头。这里照抄，仍保留 padding:0 让画面左右铺满（不改回 18px 内边距）。 */
.vr-stage .cr-live-card .cr-live-preview { padding: 0; justify-content: flex-start; }
.vr-stage .cr-live-card .cr-live-preview video {
  flex: 0 0 auto; align-self: stretch;
  width: 100%; height: auto;
  max-width: 100%; max-height: none;
  margin: 0; border-radius: 0;
  object-fit: contain; object-position: 50% 0;
  background: #000;
}

/* ===== 模特图片（可选 · 限 1 张 · 不参与素材分析，2026-10-18 新增）=====
   单图语义：有图后不再显示「继续添加」空态，框体收成图片自身尺寸并水平居中（同 #vrVideoDrop.has-video 口径），
   避免 9:16 竖图按列宽撑到 800+ px 高。 */
.vr-opt-tag { margin-left:6px; padding:1px 6px; border-radius:6px; font-size:11px; font-weight:600; line-height:18px; color:var(--fg-subtle); background:var(--surface-2); border:1px solid var(--border); vertical-align:middle; }
.vr-stage #vrModelDrop.has-image { width:fit-content; max-width:100%; margin:0 auto; padding:8px; }
.vr-stage #vrModelDrop .cr-upload-preview img { display:block; width:auto; max-width:100%; max-height:240px; border-radius:6px; background:#10131A; object-fit:contain; }

/* ===== 原视频 + 模特图片：一行两块、各占一半（2026-10-18 用户要求）=====
   列1 宽度由 .cr-grid 决定（上限 530），列体内边距 16 → 单块可用宽约 243。
   ★ 用 grid 等分而不是 flex-basis:50%：flex 里两个 50% + gap 必然溢出换行。
   ★ 半宽卡里必须收紧卡头/卡身左右内边距与辅助字号，否则标题说明被挤成三四行；
     两个上传按钮改竖向堆叠（横排两个按钮在 240 宽的卡里必然折行且左右错位）。
   ★ 前缀 .vr-stage 是为了压过 .cr-col .cr-upload-empty（0,2,1）这类既有规则，
     不靠书写顺序碰运气。 */
.vr-stage .vr-up-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:stretch; }
.vr-stage .vr-up-row > .card { display:flex; flex-direction:column; min-width:0; margin-bottom:0; }
.vr-stage .vr-up-row > .card > .card-body { flex:1 1 auto; display:flex; flex-direction:column; }
.vr-stage .vr-up-row .card-head { padding:14px 12px 8px; }
.vr-stage .vr-up-row .card-head p { padding-left:0; }
.vr-stage .vr-up-row .card-body { padding:7px 12px 14px; }
.vr-stage .vr-up-row .cr-upload-empty { padding:20px 10px; }
.vr-stage .vr-up-row .cr-upload-empty em { font-size:12px; line-height:1.5; }
.vr-stage .vr-up-row .gv-up-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:10px; width:100%; }
.vr-stage .vr-up-row .gv-up-actions .pv-btn { width:100%; justify-content:center; }
/* 窄屏列变单列时，一行两块也退回上下堆叠，避免每块只剩 110px 宽 */
@media (max-width: 760px) { .vr-stage .vr-up-row { grid-template-columns:1fr; } }

/* ===== 生成秒数行（2026-10-18 动态渲染，按模型时长来源分三种形态）=====
   #vrDurRow 内只放一个 .param-row，因此永远命中 .cr-col .param-row:last-of-type（margin-bottom:0），
   会把「生成秒数」和下面「画质参数」拉成零间距，这里补回 20px；空容器不占位。 */
#vrStage #vrDurRow .param-row,
#vrStage #vrDurRow .param-row:last-of-type { margin: 0 0 20px; }
#vrStage #vrDurRow:empty { display: none; }
/* 固定时长：整行只有一颗锁定 pill（灰化、不可点），表达「这个模型不能调时长」 */
#vrStage #vrDurRow .pill.locked { opacity: .9; cursor: default; }

/* ===== 2026-10-21 电脑端批次 ===== */
/* ★ AI标识关闭确认弹窗：背景模糊 + 白色系双流光边框（用户要求，对齐 IP 档案库弹窗/画布确认弹窗口径）
   复用 --dh-beam-ink 令牌（深色主题=纯白/浅色=中性灰）+ dh-beam-*-spin 动画，与 .cv-confirm 同族。
   .dialog 基类无 position，此处自带 relative 作伪元素参照；mask-composite 只透 1.5px 边、不扫内容。 */
.aigc-off-mask {
  background: rgba(6, 8, 12, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.aigc-off-dialog { position: relative; }
.aigc-off-dialog::after,
.aigc-off-dialog::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--dh-beam-a),
    rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
    rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .9; pointer-events: none; z-index: 2;
}
.aigc-off-dialog::before {
  background: conic-gradient(from var(--dh-beam-b),
    rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
    rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.aigc-off-dialog::after { animation: dh-beam-a-spin 6.5s linear infinite; }
.aigc-off-dialog::before { animation: dh-beam-b-spin 6.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .aigc-off-dialog::after, .aigc-off-dialog::before { animation: none; }
}

/* ★ AI对话主卡片流光改白（用户要求：与视频生成列流光亮度一致）
   chat-main 挂的 .dh-dlg-beam 标准组件是淡蓝 rgba(135,155,255,…)，观感偏暗；
   此处仅作用 .chat-main 作用域，覆盖为 --dh-beam-ink 白色系（与 .dh-col-beam/.cv-confirm 同源同参数）。 */
.chat-main.dh-dlg-beam::after,
.chat-main.dh-dlg-beam::before {
  background: conic-gradient(from var(--dh-beam-a),
    rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
    rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}
.chat-main.dh-dlg-beam::before {
  background: conic-gradient(from var(--dh-beam-b),
    rgba(var(--dh-beam-ink), .80) 0deg, rgba(var(--dh-beam-ink), .28) 16deg, rgba(var(--dh-beam-ink), 0) 32deg,
    rgba(var(--dh-beam-ink), 0) 328deg, rgba(var(--dh-beam-ink), .28) 344deg, rgba(var(--dh-beam-ink), .80) 360deg);
}

/* ============================================================================
   实用工具（kit）—— 分类卡片墙（2026-10-31 新增一级菜单「实用工具」）
   ----------------------------------------------------------------------------
   作用域只在 #kitStage 内，全用语义变量（--surface / --fg / --border …），
   深色主题无需单独覆盖（:root[data-theme="dark"] 已改这些变量）。
   ★ 卡片是 <button>，所以必须显式 font: inherit、text-align: left，否则会继承
     浏览器按钮默认样式（灰底 + 居中 + 系统字体），深色下格外突兀。
   ========================================================================== */
.kit-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kit-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px 28px; }

/* ---------- 最近使用 / 本次生成 / 常用工具（2026-10-31） ----------
   三块紧跟分类标题，做成紧凑条状；**空块整块不渲染**，新用户进来不会看到三条空壳。
   ★ 「本次生成」的产物存在用户自己浏览器的 IndexedDB 里（30 天 / 1GB），
     所以正文必须明写「存在你的浏览器」，否则用户会以为在云端。
   ★ 2026-10-31 22:4x 按用户要求删掉了顶部「实用工具」横幅（kit-hero），
     页头已有分类名，多一块大卡只是白占首屏高度。
   ========================================================================== */
.kit-blks { display: flex; flex-direction: row; gap: 10px; margin: 0 0 18px; align-items: stretch; }
.kit-blk {
  flex: 1 1 0; min-width: 0;            /* 同一行左右两张卡片，等宽 */
  border: 1px solid var(--border, #E5E6EB); border-radius: 12px;
  background: var(--surface, #FFFFFF); padding: 11px 13px 12px;
}
.kit-blk-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.kit-blk-ico {
  width: 21px; height: 21px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3, #EEEFF3); color: var(--fg-muted, #646A73);
}
.kit-blk-ico .ico { width: 13px; height: 13px; }
.kit-blk-hd b { font-size: 12.5px; font-weight: 600; color: var(--fg, #1F2329); }
.kit-blk-right { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kit-blk-note { font-size: 11px; color: var(--fg-faint, #B0B5BF); white-space: nowrap; }
.kit-blk-clear,
.kit-blk-act {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 3px 8px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--fg-subtle, #8F959E);
  white-space: nowrap;
}
.kit-blk-clear:hover { color: var(--danger, #F0616B); border-color: currentColor; }
.kit-blk-act { border-color: var(--border, #E5E6EB); color: var(--primary, #2E6CEC); }
.kit-blk-act:hover { background: var(--primary-light, #EEF4FF); }
.kit-blk-act:disabled { opacity: .5; cursor: wait; }

/* 工具 chip（最近使用 / 常用工具共用） */
.kit-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kit-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  border: 1px solid var(--border, #E5E6EB); background: var(--surface-2, #F7F8FA); color: var(--fg, #1F2329);
  transition: border-color .15s, color .15s, background .15s;
}
.kit-chip .ico { width: 13px; height: 13px; color: var(--primary, #2E6CEC); flex: none; }
.kit-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 常用工具的次数徽标：让「常用」和「最近使用」不是两份一样的列表 */
.kit-chip-n {
  font-style: normal; font-size: 10px; line-height: 1; font-weight: 600;
  padding: 2px 5px; border-radius: 999px; flex: none;
  background: var(--surface-3, #EEEFF3); color: var(--fg-subtle, #8F959E);
}
.kit-chip:hover .kit-chip-n { background: var(--primary, #2E6CEC); color: #fff; }
.kit-chip:hover { border-color: var(--hover-border, #94B4F5); color: var(--primary, #2E6CEC); background: var(--primary-light, #EEF4FF); }

/* ---------- 「生成结果」右侧抽屉（2026-10-31 22:5x 用户要求：统一成站内 .dh-right 标准） ----------
   shell 全部复用全站标准（.dh-right / .dh-result-tab / .dh-rhead / .dh-works / .dh-work-rc / .result-card），
   这里只写「文件产物」与「视频成片」不同的那几处：
     ① 封面不钉 9:16（成片口径），改 4:3 —— 图片/PDF/音频的产物卡是横向看的；
     ② 标题单行、动作行只有「下载 / 删除」，没有全站的「智能剪辑」（本地文件没有云端剪辑入口）；
     ③ 底部固定「打包下载」条（≥2 个文件才出现），一次拿全比逐个点强。
   ★ 抽屉挂 data-keep-local，common.js 的服务器保留期逻辑会跳过它（这里全是本地 IndexedDB）。 */
.kit-right .dh-keep-tip { color: var(--fg-subtle, #8F959E); font-weight: 400; }
.kit-right .dh-works { align-content: start; }
.kit-right.is-empty .dh-works { display: none; }
.kit-right .dh-empty { padding: 34px 16px; }
/* ★ 实用工具「生成结果」竖标签：常驻呼吸灯（对齐视频生成等全站呼吸灯观感，让本地产物入口常亮）。
   事件脉冲仍走标准 .dh-hint（用 :not(.dh-hint) 排除，使其 .dh-result-tab.dh-hint 动画优先，避免覆盖）；
   hover 时暂停本动画，保留 :hover 的位移与高光阴影。 */
.kit-right .dh-result-tab:not(.dh-hint) {
  animation: kitTabBreath 2.6s ease-in-out infinite;
}
.kit-right .dh-result-tab:hover { animation-play-state: paused; }
@keyframes kitTabBreath {
  0%, 100% { box-shadow: -9px 10px 28px rgba(14, 38, 104, .38), inset 0 1px 0 rgba(255, 255, 255, .24); filter: brightness(1); }
  50%      { box-shadow: -9px 12px 34px rgba(47, 108, 236, .62), 0 0 0 5px rgba(76, 141, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35); filter: brightness(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-right .dh-result-tab:not(.dh-hint) { animation: none; }
}

.kit-work-cover,
.kit-work .rc-cover { aspect-ratio: 4 / 3; }
.kit-work .rc-cover img { object-fit: cover; cursor: zoom-in; }
.kit-work-ext {
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--fg-subtle, #8F959E);
}
.kit-work-n,
.kit-work-zip {
  position: absolute; font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .3px;
  color: #fff; background: rgba(10, 12, 18, .62); padding: 1px 4px;
}
.kit-work-n { left: 0; top: 0; border-bottom-right-radius: 6px; }   /* 「×9」＝这条里有多少个文件 */
.kit-work-zip { right: 0; bottom: 0; border-top-left-radius: 6px; } /* 「ZIP」＝点下载拿到压缩包 */
.kit-work .rc-title { min-height: 0; -webkit-line-clamp: 1; max-height: 20px; }
.kit-work .rc-time { font-size: 11px; color: var(--fg-subtle, #8F959E); }

/* 底部打包条：抽屉里唯一的主操作 */
.kit-dbar { flex: none; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--card); }
.kit-dbar[hidden] { display: none; }
.kit-dbar-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: #fff; border: 1px solid transparent; background: var(--grad-cta, var(--primary, #2E6CEC));
}
.kit-dbar-btn .ico { width: 15px; height: 15px; }
.kit-dbar-btn:hover { filter: brightness(1.06); }
.kit-dbar-btn:disabled { opacity: .6; cursor: wait; }

.kit-cat-hd { display: flex; align-items: center; gap: 9px; margin: 2px 0 12px; }
.kit-cat-ico {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light, #EEF4FF); color: var(--primary, #2E6CEC);
}
.kit-cat-ico .ico { width: 16px; height: 16px; }
.kit-cat-name { font-size: 14px; font-weight: 600; color: var(--fg, #1F2329); }
.kit-cat-hint { font-size: 12px; color: var(--fg-subtle, #8F959E); }
.kit-cat-count { margin-left: auto; font-size: 11.5px; color: var(--fg-faint, #B0B5BF); }

.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 12px; }
.kit-card {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  font: inherit; text-align: left; cursor: pointer;
  padding: 13px 13px 12px; border-radius: 12px;
  border: 1px solid var(--border, #E5E6EB); background: var(--surface, #FFFFFF);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kit-card:hover {
  border-color: var(--hover-border, #94B4F5);
  box-shadow: 0 8px 20px -12px rgba(var(--primary-rgb, 46, 108, 236), .55);
  transform: translateY(-1px);
}
.kit-card:active { transform: none; }
.kit-card-name { font-size: 13.5px; font-weight: 600; color: var(--fg, #1F2329); padding-right: 62px; }
.kit-card-desc { font-size: 12px; line-height: 1.5; color: var(--fg-muted, #646A73); }
.kit-card-badge {
  position: absolute; top: 11px; right: 11px;
  font-size: 10.5px; line-height: 1; padding: 4px 7px; border-radius: 999px;
  background: var(--soft, #F7F8FA); border: 1px solid var(--border, #E5E6EB); color: var(--fg-subtle, #8F959E);
}
.kit-card-go { font-size: 11.5px; font-weight: 600; color: var(--primary, #2E6CEC); }
.kit-empty { padding: 44px 0; text-align: center; font-size: 13px; color: var(--fg-subtle, #8F959E); }
.kit-foot { margin-top: 18px; font-size: 11.5px; line-height: 1.6; color: var(--fg-faint, #B0B5BF); }

/* ============================================================================
   实用工具（kit）· 工具面板（2026-10-31 P0 批次：10 个图片工具接入）
   ----------------------------------------------------------------------------
   与上方卡片墙同一作用域（只在 #kitStage 内），颜色全走语义变量，深色自动跟随。
   ★ 这批控件是自己写的一套 class，不复用全局表单样式：全局 input 样式带
     固定高度/边框，在 2 列网格里会把提示文字挤到控件右侧，很难看。
   ========================================================================== */
.kit-hero-tags span.is-live { background: var(--primary-light, #EEF4FF); border-color: transparent; color: var(--primary, #2E6CEC); font-weight: 600; }

.kit-card.is-soon { cursor: default; }
.kit-card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--border, #E5E6EB); }

/* ---------- 工具面板头（弹窗顶栏，固定不滚） ---------- */
.kit-tool-hd {
  flex: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px 22px;
  border-bottom: 1px solid var(--border-subtle, var(--border, #E5E6EB));
}
.kit-tool-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light, #EEF4FF); color: var(--primary, #2E6CEC);
}
.kit-tool-ico .ico { width: 19px; height: 19px; }
/* 右上角关闭（保留 .kit-back 类名：e2e 与既有交互都靠它退回卡片墙） */
.kit-back {
  flex: none; margin-left: auto; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; cursor: pointer; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--fg-subtle, #8F959E);
  transition: background .15s, color .15s;
}
.kit-back:hover { background: var(--surface-3, #EEEFF3); color: var(--fg, #1F2329); }
.kit-back .ico { width: 17px; height: 17px; }
.kit-tool-hd-txt { min-width: 0; flex: 1; }
.kit-tool-title { font-size: 16px; font-weight: 600; color: var(--fg, #1F2329); }
.kit-tool-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--fg-muted, #646A73); }

/* ---------- 面板主体 ---------- */
/* ---------- 弹窗外壳 ----------
   2026-10-31 用户要求：工具页不再整宽铺满，改「居中弹窗 + 左原图右结果双栏大图预览」。
   ★ 白色双流光不自造：盒子挂站内标准组件 .dh-dlg-beam（见 4205 行基类），
     它常驻显现、给 1.5px 双色环，墨色走 --dh-beam-ink 令牌（深色主题=纯白），浅色主题自动降为中性灰。
     .dh-dlg-beam 的 ::before/::after 用 inset:0 贴边，所以外壳必须 position:relative + overflow:hidden，
     否则流光会溢出圆角。内容滚动放在内层 .kit-body —— 外壳不滚，流光就不会跟着内容滚走。
   ★ 遮罩背景模糊沿用站内弹窗标准：rgba(6,8,12,.72) + blur(4px)（与 #dhAddMask / .wk-preview-mask 同款）。 */
.kit-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 8, 12, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: kit-mask-in .16s ease both;
}
@keyframes kit-mask-in { from { opacity: 0; } to { opacity: 1; } }
body.kit-lock { overflow: hidden; }

.kit-panel {
  position: relative; overflow: hidden;
  width: 100%; max-width: 1044px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  border: 1px solid var(--border, #E5E6EB); border-radius: 16px;
  background: var(--surface, #FFFFFF);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
  animation: kit-panel-in .2s cubic-bezier(.2, .8, .3, 1) both;
}
/* ★ 高度：2026-10-31 用户要求「弹窗高度设成原来的 1.5 倍」。
   改前空态实测 426px（带参数区）→ 640px ≈ 1.5 倍。用 min-height 而不是 height：
   选了文件/跑了结果以后还能继续长高，只是绝不会比 640 更扁。
   min() 兜住矮屏（100vh-48 不够 640 时按视口算，不溢出屏幕）。
   只给「带上传框」的工具（.is-file）——「无文件输入」类工具没有双栏，铺 640 会留一大片空白。 */
.kit-panel.is-file { min-height: min(calc(100vh - 48px), 640px); }
@keyframes kit-panel-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kit-modal, .kit-panel { animation: none; }
}
/* ★ 必须显式兜底：.kit-drop / .kit-cols / .kit-dl-all 这些自己带 display 的元素，
   原生 [hidden] 的 display:none 会被自身的 display:flex/grid/inline-flex 覆盖掉 → 该藏的不藏
   （实测就是「选了文件投放区还在」「底栏多个空圆角块」两个现象）。 */
.kit-modal [hidden] { display: none !important; }

/* 弹窗主体（唯一滚动区） */
.kit-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.kit-body.is-plain { gap: 12px; }

/* 投放区（左栏内，空态时铺满整栏） */
.kit-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 auto; min-height: 200px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--border-strong, #D5D9E2); border-radius: 12px;
  background: var(--surface-2, #F7F8FA); transition: border-color .15s, background .15s;
}
.kit-drop:hover, .kit-drop:focus-visible, .kit-drop.is-over {
  border-color: var(--primary, #2E6CEC); background: var(--primary-light, #EEF4FF); outline: none;
}
.kit-drop-ico { width: 26px; height: 26px; color: var(--primary, #2E6CEC); }
.kit-drop-t { font-size: 13.5px; font-weight: 600; color: var(--fg, #1F2329); }
.kit-drop-s { font-size: 11.5px; color: var(--fg-subtle, #8F959E); }

/* ---------- 双栏：左「上传框 / 原图」右「处理结果」 ----------
   ★ 2026-10-31 用户指定：双栏常驻。空态时左栏里就是那块虚线投放区，右栏是结果占位，
     不再有「整宽投放区 ↔ 双栏」的切换（切一次高度就跳一次）。
   auto-fit（不是 auto-fill）：选 1 张图时轨道会被折叠，单张直接铺满整栏 = 大图预览；
   选多张时按 150px 起自动分列。auto-fill 会让单张只占 1/3 栏宽，看着像缩略图。 */
.kit-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 18px;
  /* 两栏等高拉满弹窗主体：空态那块投放区才有「大框」的体量，不是一条扁条 */
  align-items: stretch; flex: 1 1 auto; min-height: 0;
}
.kit-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.kit-col-hd { display: flex; align-items: baseline; gap: 8px; }
.kit-col-hd b { font-size: 12.5px; font-weight: 600; color: var(--fg, #1F2329); }
.kit-col-meta { font-size: 11.5px; color: var(--fg-faint, #B0B5BF); font-variant-numeric: tabular-nums; }
.kit-col-out .kit-out { margin-top: 0; border-top: 0; padding-top: 0; }

/* 已选文件（左栏大图） */
.kit-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-content: start; }
/* 只选 1 个 → 单列铺满整栏，这才叫「原图预览」；多选才排网格 */
.kit-files.is-one { grid-template-columns: 1fr; }
/* 张数标准与右栏结果一致：1 张铺满 / 2 张两列 / 3 张起最多三列 */
.kit-files[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.kit-files[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-files[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-file-item {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border, #E5E6EB); background: var(--surface-2, #F7F8FA);
}
.kit-file-thumb { display: block; line-height: 0; background: var(--surface-3, #EEEFF3); }
.kit-file-thumb img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; }
.kit-file-ext {
  display: flex; align-items: center; justify-content: center; height: 96px;
  background: var(--surface-3, #EEEFF3); color: var(--fg-muted, #646A73);
  font-size: 11px; font-weight: 700; letter-spacing: .6px; font-style: normal;
}
.kit-audio-hd { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.kit-audio-hd b { font-size: 13px; color: var(--fg, #1F2329); }
.kit-audio-hd span { font-size: 12px; color: var(--fg-subtle, #8F959E); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-audio { width: 100%; height: 38px; display: block; }
.kit-file-meta { min-width: 0; padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; }
.kit-file-meta b { font-size: 11.5px; font-weight: 500; color: var(--fg, #1F2329); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-file-meta span { font-size: 10.5px; color: var(--fg-subtle, #8F959E); font-variant-numeric: tabular-nums; }
.kit-file-x {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
  color: #fff; background: rgba(10, 12, 18, .58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .15s, background .15s;
}
.kit-file-item:hover .kit-file-x, .kit-file-x:focus-visible { opacity: 1; }
.kit-file-x:hover { background: var(--danger, #F0616B); }
.kit-file-add {
  align-self: flex-start; font: inherit; font-size: 12px; cursor: pointer;
  padding: 7px 12px; border-radius: 9px; border: 1px dashed var(--border-strong, #D5D9E2);
  background: transparent; color: var(--fg-muted, #646A73);
}
.kit-file-add:hover { border-color: var(--primary, #2E6CEC); color: var(--primary, #2E6CEC); }
/* 右栏空态占位（还没跑过）：和左边投放区等高，两栏像一对框 */
.kit-out-ph {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-height: 200px; padding: 20px 14px; border-radius: 10px;
  border: 1px dashed var(--border, #E5E6EB); background: var(--surface-2, #F7F8FA);
  font-size: 12px; color: var(--fg-faint, #B0B5BF); text-align: center;
}

/* 表单 */
.kit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 16px; }
.kit-f { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.kit-f-l { font-size: 12.5px; color: var(--fg-muted, #646A73); }
.kit-f-c { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kit-f-tip { grid-column: 2; font-size: 11px; line-height: 1.5; color: var(--fg-faint, #B0B5BF); }
.kit-f-c select, .kit-f-c input[type="text"], .kit-f-c input[type="number"] {
  width: 100%; min-width: 0; box-sizing: border-box;
  height: 30px; padding: 0 9px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--border, #E5E6EB); border-radius: 8px;
  background: var(--surface-2, #F7F8FA); color: var(--fg, #1F2329); outline: none;
}
.kit-f-c select:focus, .kit-f-c input:focus { border-color: var(--primary, #2E6CEC); background: var(--surface, #FFFFFF); }
.kit-f-c input[type="range"] { flex: 1; min-width: 0; height: 30px; accent-color: var(--primary, #2E6CEC); }
.kit-f-val { flex: none; min-width: 40px; text-align: right; font-size: 12px; font-weight: 600; color: var(--primary, #2E6CEC); }
.kit-f-unit { font-style: normal; flex: none; font-size: 11.5px; color: var(--fg-subtle, #8F959E); }
.kit-f-c input[type="color"] {
  width: 42px; height: 28px; padding: 2px; border: 1px solid var(--border, #E5E6EB);
  border-radius: 7px; background: var(--surface-2, #F7F8FA); cursor: pointer;
}
/* 开关（纯 CSS，不依赖框架） */
.kit-sw { display: inline-flex; cursor: pointer; }
.kit-sw input { display: none; }
.kit-sw i { width: 38px; height: 21px; border-radius: 999px; background: var(--border-strong, #D5D9E2); position: relative; transition: background .16s; }
.kit-sw i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s;
}
.kit-sw input:checked + i { background: var(--primary, #2E6CEC); }
.kit-sw input:checked + i::after { transform: translateX(17px); }

/* 底部固定操作栏（弹窗内不随内容滚动） */
.kit-act {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-top: 1px solid var(--border-subtle, var(--border, #E5E6EB));
  background: var(--surface, #FFFFFF);
}
.kit-run {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 10px 22px; border: 0; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, #5B9BFF, var(--primary-dark, #2E6CEC));
}
.kit-run:disabled { cursor: not-allowed; opacity: .45; }
.kit-reset {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 9px 15px;
  border-radius: 10px; border: 1px solid var(--border, #E5E6EB);
  background: transparent; color: var(--fg-muted, #646A73);
}
.kit-reset:hover { border-color: var(--primary, #2E6CEC); color: var(--primary, #2E6CEC); }
.kit-hint { font-size: 12px; color: var(--fg-subtle, #8F959E); min-width: 0; }
/* 右下角体积对比，如「265.9 KB → 147.0 KB（省 45%）」 */
.kit-size { margin-left: auto; flex: none; font-size: 12px; color: var(--fg-muted, #646A73); font-variant-numeric: tabular-nums; }
.kit-size b { color: var(--primary, #2E6CEC); font-weight: 600; }

/* 结果区 */
.kit-out { min-width: 0; }
.kit-note { font-size: 12.5px; line-height: 1.7; color: var(--fg-muted, #646A73); }
.kit-note b { color: var(--fg, #1F2329); }
.kit-report { margin-top: 10px; }
.kit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kit-table th, .kit-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle, var(--border, #E5E6EB)); }
.kit-table th { width: 120px; font-weight: 500; color: var(--fg-subtle, #8F959E); white-space: nowrap; }
.kit-table td { color: var(--fg, #1F2329); word-break: break-all; }
.kit-out-hd { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.kit-out-hd b { font-size: 12.5px; color: var(--fg, #1F2329); }
.kit-out-hd span { font-size: 11.5px; color: var(--fg-faint, #B0B5BF); }
/* 结果大图网格：列数由 data-cols 决定（kit.js 的 gridCols 按张数算，左右两栏同一套标准） */
.kit-out-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.kit-out-list[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.kit-out-list[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-out-list[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-note + .kit-out-list { margin-top: 8px; }
.kit-out-item {
  display: flex; flex-direction: column; min-width: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border, #E5E6EB); background: var(--surface-2, #F7F8FA);
}
.kit-out-thumb { display: block; line-height: 0; background: var(--surface-3, #EEEFF3); }
.kit-out-thumb img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; cursor: zoom-in; }
.kit-out-meta { min-width: 0; padding: 7px 9px 5px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.kit-out-meta b { font-size: 11.5px; font-weight: 500; color: var(--fg, #1F2329); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-out-meta span { flex: none; font-size: 10.5px; color: var(--fg-subtle, #8F959E); font-variant-numeric: tabular-nums; }
.kit-dl {
  width: calc(100% - 16px); margin: 0 8px 8px; padding: 6px 0;
  font: inherit; font-size: 12px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--primary, #2E6CEC); background: transparent; color: var(--primary, #2E6CEC);
}
.kit-dl:hover { background: var(--primary, #2E6CEC); color: #fff; }
.kit-dl-all {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--primary, #2E6CEC);
  background: transparent; color: var(--primary, #2E6CEC);
}
.kit-dl-all:hover { background: var(--primary-light, #EEF4FF); }
.kit-dl-all .ico { width: 15px; height: 15px; }
.kit-dl-all:disabled { opacity: .5; cursor: wait; }

/* 点击结果大图全屏放大（本地 objectURL，不上传） */
.kit-zoom {
  position: fixed; inset: 0; z-index: 1300; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: kit-mask-in .14s ease both;
}
.kit-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; display: block; }

/* ----------------------------------------------------------------------------
   实用工具 · 第二批（文本类 / 结果文本 / markdown 预览）
   ---------------------------------------------------------------------------- */
.kit-form.is-plain { margin-top: 0; }
/* 多行文本框：整行铺开，标签在上（82px 的标签列会把输入框压成一条缝） */
.kit-f-area { grid-column: 1 / -1; grid-template-columns: 1fr; }
.kit-f-area .kit-f-l { display: flex; align-items: baseline; gap: 8px; font-weight: 500; color: var(--fg, #1F2329); }
.kit-f-tip-inline { font-style: normal; font-weight: 400; font-size: 11px; color: var(--fg-faint, #B0B5BF); }
.kit-f-area textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px;
  padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.65;
  border: 1px solid var(--border, #E5E6EB); border-radius: 10px;
  background: var(--surface-2, #F7F8FA); color: var(--fg, #1F2329); outline: none;
}
.kit-f-area textarea:focus { border-color: var(--primary, #2E6CEC); background: var(--surface, #FFFFFF); }

/* 文本结果 */
.kit-pre-hd { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.kit-pre-hd b { font-size: 13px; color: var(--fg, #1F2329); }
.kit-pre-hd span { font-size: 11.5px; color: var(--fg-faint, #B0B5BF); }
.kit-copy {
  margin-left: auto; font: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--border, #E5E6EB); background: var(--surface, #FFFFFF); color: var(--fg-muted, #646A73);
}
.kit-copy:hover { border-color: var(--primary, #2E6CEC); color: var(--primary, #2E6CEC); }
.kit-copy:disabled { opacity: .6; cursor: default; }
.kit-pre {
  max-height: 320px; overflow: auto; margin: 0; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border, #E5E6EB); background: var(--surface-2, #F7F8FA);
  color: var(--fg, #1F2329); font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
}

/* 非图片产物（.txt / .pdf / .json / .zip）的缩略图位：显示扩展名。
   必须是 flex + 固定高度：单张结果铺满整栏时，否则只剩一行 10px 的字悬在 509px 宽的空白里。 */
.kit-out-thumb.is-file { display: flex; height: 96px; background: var(--surface-3, #EEEFF3); align-items: center; justify-content: center; }
.kit-out-ext { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--fg-subtle, #8F959E); }

/* Markdown 预览 */
.kit-md {
  margin-top: 10px; padding: 4px 16px; max-height: 420px; overflow: auto;
  border: 1px solid var(--border, #E5E6EB); border-radius: 10px; background: var(--surface, #FFFFFF);
  font-size: 13.5px; line-height: 1.75; color: var(--fg, #1F2329);
}
.kit-md h1, .kit-md h2, .kit-md h3, .kit-md h4, .kit-md h5, .kit-md h6 { margin: 16px 0 8px; font-weight: 600; line-height: 1.4; }
.kit-md h1 { font-size: 20px; } .kit-md h2 { font-size: 17px; } .kit-md h3 { font-size: 15px; }
.kit-md h4, .kit-md h5, .kit-md h6 { font-size: 14px; }
.kit-md p { margin: 8px 0; }
.kit-md ul, .kit-md ol { margin: 8px 0; padding-left: 22px; }
.kit-md li { margin: 3px 0; }
.kit-md code {
  background: var(--surface-2, #F7F8FA); padding: 1px 5px; border-radius: 4px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kit-md pre.md-code { background: var(--surface-2, #F7F8FA); border: 1px solid var(--border, #E5E6EB); border-radius: 8px; padding: 12px; overflow: auto; }
.kit-md pre.md-code code { background: none; padding: 0; }
.kit-md blockquote { margin: 10px 0; padding: 4px 12px; border-left: 3px solid var(--primary, #2E6CEC); background: var(--primary-light, #EEF4FF); color: var(--fg-muted, #646A73); }
.kit-md table.md-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.kit-md table.md-table th, .kit-md table.md-table td { border: 1px solid var(--border, #E5E6EB); padding: 6px 10px; text-align: left; }
.kit-md table.md-table th { background: var(--surface-2, #F7F8FA); font-weight: 600; }
.kit-md hr { border: 0; border-top: 1px solid var(--border, #E5E6EB); margin: 14px 0; }
.kit-md a { color: var(--primary, #2E6CEC); }
.kit-md del { color: var(--fg-subtle, #8F959E); }