/* ================================================================
   YunDuo AI — Linear-Inspired Design System
   设计理念：极简暗色、精细节奏、克制用色、流畅微动效
   ================================================================ */

/* -------- CSS Variables -------- */
:root, html[data-theme="dark"] {
    /* Background */
    --bg-base: #08080c;
    --bg-surface: #0d0d14;
    --bg-elevated: #12121a;
    --bg-overlay: #16161f;
    --bg-input: #0a0a10;
    --bg-body: #0a0a1a;
    --bg-card: #1a1a2e;
    --card-bg: #16213e;
    --bg-secondary: #0f3460;
    --bg-tertiary: #1a1a3e;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --input-bg: #1a1a3e;

    /* Text */
    --text-primary: #fcfcfd;
    --text-secondary: #9191a1;
    --text-tertiary: #5e5e6e;
    --text-disabled: #3d3d4d;

    /* Border */
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.10);
    --border-focus: rgba(232, 184, 75, 0.35);
    --border: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-mid: rgba(255, 255, 255, 0.15);

    /* Accent — 琥珀金（影视暗房方向，2026-08-30 UI 改版） */
    --accent: #E8B84B;
    --accent-rgb: 232, 184, 75;   /* 供 rgba(var(--accent-rgb), …) 使用，避免旧 fallback 紫色生效 */
    --accent-hover: #F2C14E;
    --accent-soft: rgba(232, 184, 75, 0.10);
    --accent-glow: rgba(232, 184, 75, 0.16);
    --accent-light: rgba(232, 184, 75, 0.15);

    /* Primary */
    --primary: #C9A227;
    --primary-hover: #B8860B;

    /* Surfaces */
    --surface: #1e1e3a;
    --surface-hover: #2a2a4a;
    --surface-secondary: #16162e;

    /* Semantic */
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.10);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.10);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.10);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.10);

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadow */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 280ms;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --font-serif: 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* 全局按钮/输入重置：防止浏览器（尤其是 iOS Safari）强制应用系统默认白底黑字样式 */
button, input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
}
/* 最终后备：任何按钮在 disabled 状态下都不应显示浏览器默认样式 */
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled {
    background: var(--bg-elevated, #12121a);
    color: var(--text-disabled, #3d3d4d);
    border-color: var(--border-subtle, rgba(255,255,255,0.04));
}


/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* 全局键盘焦点指示器（WCAG 2.1 无障碍标准） */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* -------- Background Ambient -------- */
.bg-particles {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-particles::before {
    content: '';
    position: absolute; inset: -50%;
    background:
        radial-gradient(circle at 25% 25%, rgba(232, 184, 75,0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 60%, rgba(96, 165, 250, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(232, 184, 75,0.03) 0%, transparent 40%);
    animation: bgFloat 30s ease-in-out infinite;
}
@keyframes bgFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(1.5%, -1.5%) scale(1.03); }
    66% { transform: translate(-1%, 1%) scale(0.97); }
}

/* -------- Scrollbar（v6：默认完全隐藏，hover/拖动也不显；即梦同款清洁感） -------- */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover,
*:hover::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 0 !important; }
* { scrollbar-color: transparent transparent !important; }
::selection { background: rgba(232, 184, 75,0.3); color: var(--text-primary); }


/* ================================================================
   HEADER — Fixed top bar
   ================================================================ */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 52px;
    background: rgba(12, 12, 18, 0.82);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid var(--border-subtle);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%; padding: 0 20px; max-width: 1600px; margin: 0 auto;
}
.header-left  { display: flex; align-items: center; gap: 10px; }
.header-right { display: flex; align-items: center; gap: 8px; }

/* —— HTML 实际使用的类名别名 —— */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 52px;
    background: rgba(12, 12, 18, 0.82);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid var(--border-subtle);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; max-width: 1600px; margin: 0 auto;
}
.topbar-left  { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.logo-subtitle { font-size: 10px; color: var(--text-tertiary); font-weight: 400; }
.credits-display { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: var(--bg-overlay); border: 1px solid var(--border-subtle); color: var(--warning); font-size: 11px; font-weight: 600; cursor: default; }
.credits-display svg { color: var(--warning); }
.btn-login { display: flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--radius-sm); border: none; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); font-family: var(--font-sans); }
.btn-login:hover { background: var(--accent-hover); box-shadow: 0 0 0 4px var(--accent-soft); }
.user-menu { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-subtle); }
.user-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* Logo */
.logo {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    user-select: none;
}
.logo-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    transition: opacity var(--duration-normal) var(--ease-out);
}
.logo-icon-v2 {
    width: 30px; height: 30px; border-radius: 7px;
    color: var(--accent);
    background: rgba(232, 184, 75, 0.06);
    border: 0.5px solid rgba(232, 184, 75, 0.45);
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.logo:hover .logo-icon-v2 {
    background: rgba(232, 184, 75, 0.14);
    border-color: rgba(232, 184, 75, 0.7);
}
.logo-text-group { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text {
    font-size: 16px; font-weight: 500; color: #F2EFE6;
    letter-spacing: 0.06em;
    font-family: var(--font-serif), 'Noto Serif SC', 'Source Han Serif SC', serif;
}
.logo-slogan {
    font-size: 10px; color: rgba(232, 184, 75, 0.65);
    font-weight: 400; letter-spacing: 0.14em;
    margin-top: 2px;
}

/* User area */
.user-area { display: flex; align-items: center; gap: 6px; }

.credits-display {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px;
    background: var(--bg-overlay); border: 1px solid var(--border-subtle);
    color: var(--warning); font-size: 11px; font-weight: 600;
    cursor: default; transition: all var(--duration-fast) var(--ease-out);
}
.credits-display svg { color: var(--warning); }

.header-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-secondary);
    font-size: 11px; font-weight: 500; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.header-btn:hover {
    background: var(--bg-overlay); color: var(--text-primary);
    border-color: var(--border-hover);
}
.btn-primary-sm {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: var(--radius-sm);
    border: none; background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.btn-primary-sm:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn-recharge {
    background: var(--warning-soft); border-color: rgba(251, 191, 36, 0.2);
    color: var(--warning);
}
.btn-recharge:hover {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 0 4px var(--warning-soft);
    color: var(--warning);
    background: rgba(251, 191, 36, 0.12);
}


/* ================================================================
   SIDE NAVIGATION — Left sidebar
   ================================================================ */
.side-nav {
    position: fixed; left: 0; top: 52px; bottom: 0; width: 64px;
    background: rgba(10, 10, 18, 0.9);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-subtle);
    z-index: 90; display: flex; flex-direction: column;
    align-items: center; padding: 12px 0;
    /* 抽屉式：默认收起滑出屏幕，点汉堡展开（2026-08-30） */
    transform: translateX(-100%);
    transition: transform .28s var(--ease-out);
}
body.nav-open .side-nav { transform: translateX(0); }
.side-nav-top {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; width: 100%;
}
.side-nav-bottom {
    margin-top: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; width: 100%; padding-bottom: 28px;
}
.side-nav-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    width: 50px; height: 50px; border-radius: var(--radius-md);
    border: none; background: transparent;
    /* 弱化：未选中几乎隐形，不抢主页面（2026-08-30 UI 改版） */
    color: rgba(255, 255, 255, 0.30);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}
.side-nav-item:hover {
    color: rgba(255, 255, 255, 0.60); background: transparent;
}
.side-nav-item.active {
    color: var(--accent); background: transparent;
}
.side-nav-item.active::before {
    content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px;
    width: 2px; background: var(--accent); border-radius: 1px;
    transition: all var(--duration-normal) var(--ease-out);
}
.side-nav-item span { font-size: 10px; font-weight: 500; }
a.side-nav-item { text-decoration: none; }

/* —— HTML 实际使用的类名别名 —— */
.sidebar {
    position: fixed; left: 0; top: 52px; bottom: 0; width: 64px;
    background: rgba(10, 10, 18, 0.9);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-subtle);
    z-index: 90; display: flex; flex-direction: column;
    align-items: center; padding: 12px 0;
}
.nav-group {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; width: 100%;
}
.nav-bottom { margin-top: auto; padding-bottom: 28px; }
.nav-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    width: 50px; height: 50px; border-radius: var(--radius-md);
    border: none; background: transparent; color: var(--text-tertiary);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    position: relative; font-family: var(--font-sans);
}
.nav-item:hover {
    color: var(--text-secondary); background: var(--bg-overlay);
}
.nav-item.active {
    color: var(--accent); background: var(--accent-soft);
}
.nav-item.active::before {
    content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px;
    width: 2px; background: var(--accent); border-radius: 1px;
    transition: all var(--duration-normal) var(--ease-out);
}
.nav-item span { font-size: 10px; font-weight: 500; }

/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */
.main-area {
    flex: 1; margin-left: 0; padding: 28px 36px 48px;
    min-height: calc(100vh - 52px); width: 100%; max-width: 1400px;
}
.app-layout { display: flex; padding-top: 52px; min-height: 100vh; justify-content: center; }
/* 大屏 / 超大屏：主内容区随屏放宽并居中，不再写死 1400px 靠左 */
@media (min-width: 1700px) { .main-area, .main-content { max-width: 1600px; } }
@media (min-width: 2200px) { .main-area, .main-content { max-width: 1900px; } }

/* ================================================================
   生成页第二层左栏（即梦式：开启创作 / 新对话 / 默认创作 / 最近）
   ================================================================ */
.gen-rail {
    display: none; position: fixed; left: 0; top: 52px; bottom: 0; width: 240px;
    background: rgba(16, 16, 28, 0.92); backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-subtle);
    z-index: 80; flex-direction: column; padding: 16px 12px; gap: 10px; overflow-y: auto;
}
.app-layout.show-gen-rail { --gen-rail-w: 240px; }
.app-layout.show-gen-rail .gen-rail { display: flex; }
.app-layout.show-gen-rail .main-area { margin-left: var(--gen-rail-w); }
.app-layout.gen-rail-collapsed { --gen-rail-w: 32px; }   /* —— 版本 an 2026-08-18：18→32，与 .gen-rail.collapsed 宽度同步，避免 main-area 余出 14px 缝隙 —— */
.gen-rail-collapse {
    position: absolute; top: 14px; right: 8px;
    background: transparent; border: none; color: var(--text-tertiary);
    cursor: pointer; font-size: 16px; line-height: 1; padding: 4px; border-radius: 6px;
}
.gen-rail-collapse:hover { color: var(--text-secondary); background: var(--bg-overlay); }
.gen-rail-head { padding: 2px 4px 2px; }
.gen-rail-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.gen-rail-newchat {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle); background: var(--accent-soft);
    color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600;
    transition: all var(--duration-fast) var(--ease-out);
}
.gen-rail-newchat:hover { background: var(--accent); color: #fff; }
.gen-rail-item {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: var(--radius-md); cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.gen-rail-item:hover { background: var(--bg-overlay); }
.gen-rail-item.active { background: var(--accent-soft); }
.gen-rail-thumb {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, #E8B84B, #F2C14E);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
}
.gen-rail-meta { min-width: 0; }
.gen-rail-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-rail-sub { font-size: 11px; color: var(--text-tertiary); }
.gen-rail-group { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.gen-rail-group-title { font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: 4px; }
.gen-rail-recent { display: flex; flex-direction: column; gap: 4px; }
.gen-rail-recent-item {
    display: flex; align-items: center; gap: 10px; padding: 6px;
    border-radius: var(--radius-md); cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;  /* ea：让 ⋯ 按钮 absolute 定位到右上角 */
}
.gen-rail-recent-item:hover { background: var(--bg-overlay); }
/* ea：最近列表 ⋯ 按钮（hover 卡片时浮现，复用资产库 openAssetMenu 置顶/重命名/删除） */
.gen-rail-recent-menu-btn {
    position: absolute; top: 2px; right: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; border: none;
    font-size: 14px; line-height: 22px; text-align: center; cursor: pointer;
    opacity: 0; transition: opacity var(--duration-fast) var(--ease-out);
    z-index: 5; padding: 0;
}
.gen-rail-recent-item:hover .gen-rail-recent-menu-btn { opacity: 1; }
.gen-rail-recent-menu-btn:hover { background: rgba(0,0,0,.85); }
.gen-rail-recent-thumb-wrap { position: relative; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-overlay); }
.gen-rail-recent-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg-overlay); flex-shrink: 0; display: block; }
.gen-rail-recent-thumb.gen-rail-recent-broken { display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-tertiary); }
/* 视频缩略图右下角播放角标 */
.gen-rail-recent-playbadge { position: absolute; right: 2px; bottom: 2px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 8px; line-height: 16px; text-align: center; pointer-events: none; }
.gen-rail-recent-name { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* fu/方案B：标题 + 时间垂直堆叠，占据剩余空间并允许省略 */
.gen-rail-recent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gen-rail-recent-meta { font-size: 10px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* eb2：最近列表置顶徽标（列表级置顶，仅显示层） */
.gen-rail-recent-pintag { margin-left: 4px; font-size: 10px; flex-shrink: 0; }
/* ee：「当前对话」固定入口（左抽屉顶部，可一键返回当前生成对话） */
.gen-rail-current-entry { border: 1px dashed var(--border-color, rgba(255,255,255,.18)); background: var(--bg-overlay); margin-bottom: 2px; }
.gen-rail-current-entry:hover { border-color: var(--accent, #E8B84B); }
.gen-rail-current-badge { display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--accent, #E8B84B); }
.gen-rail-current-tag { margin-left: 4px; font-size: 10px; color: var(--accent, #E8B84B); border: 1px solid var(--accent, #E8B84B); border-radius: 4px; padding: 0 3px; flex-shrink: 0; }
.gen-rail-recent-empty { font-size: 12px; color: var(--text-tertiary); padding: 8px 4px; }
/* 收起态：保持横向小箭头(⟨/⟩ 字符保持水平)，不再做竖排一长条 */
.gen-rail.collapsed { width: 32px; padding: 12px 4px; align-items: center; }   /* —— 版本 an：18px→32px，给横向按钮留容身区 —— */
.gen-rail.collapsed > *:not(.gen-rail-collapse) { display: none; }
.gen-rail.collapsed .gen-rail-collapse {
    position: static;
    writing-mode: horizontal-tb;   /* —— 版本 an：删 vertical-rl，让 `⟩` 保持水平向右，不再被旋转成竖排箭头/一长条 —— */
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 32px; padding: 0; margin: 0; border-radius: 8px;
}
@media (max-width: 1100px) {
    .app-layout.show-gen-rail { --gen-rail-w: 200px; }
    .gen-rail { width: 200px; }
    .app-layout.show-gen-rail .main-area { margin-left: var(--gen-rail-w); }
}

/* —— HTML 实际使用的类名别名 —— */
.main-content {
    flex: 1; margin-left: 0; padding: 28px 36px 48px;
    min-height: calc(100vh - 52px); width: 100%; max-width: 1400px;
}
.layout { display: flex; padding-top: 52px; min-height: 100vh; }
.content-wrapper { max-width: 1400px; margin: 0 auto; width: 100%; }

/* Page transitions */
.page { display: none; }
.page.active { display: block; opacity: 1; width: 100%; }
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Page header */
.page-header { margin-bottom: 28px; }
.page-header h1 {
    font-size: 26px; font-weight: 700; margin-bottom: 4px;
    letter-spacing: -0.03em; color: var(--text-primary);
}
.page-header p { font-size: 13px; color: var(--text-tertiary); }


/* ================================================================
   GENERATION SUB-NAV (Tabs)
   ================================================================ */
/* P1（即梦式改造）：顶部模式切换视觉降权为居中能力胶囊条 */
/* .gen-subnav / .gen-subnav-item 已移除（2026-08-18）：类型切换统一收进对话输入框的 chat-type-select，顶部不再重复 */


/* ================================================================
   GENERATION LAYOUT — two columns
   ================================================================ */
.gen-layout {
    /* —— 版本 2026-08-24：抽屉宽度 440→380（用户要求收窄，资产卡随 4 列网格自动缩小） —— */
    --drawer-w: 380px;
    display: flex; gap: 32px;
    /* —— 版本 ai 2026-08-18：ah 版删 footer 后 calc 残留 144 - 52 = 92px 空白 → 改为 52 (仅 header) —— */
    height: calc(100vh - 52px);
    min-height: 360px;
    overflow: hidden;
    position: relative;
}
/* —— 版本 ak 2026-08-18：生成页激活 + 宽屏时锁定整页高度，仅对话流(chat-stream)在对话框之上内部滚动。
   根因：.app-layout(padding-top:52 + min-height:100vh) 与 .main-area(min-height:calc(100vh-52) + padding 28/48)
   叠加后文档总高 = 100vh + 76px → body 整页滚动；ag 版只锁了 gen-layout 内部，没压住这层外溢。
   本段在「生成页激活且 ≥1201px 宽 / ≥641px 高」下把链压成严格 100vh，外部不再溢出；窄屏仍走下方 max-width:1200 / max-height:640 的整页滚动方案。 —— */
@media (min-width: 1201px) and (min-height: 641px) {
    body:has(#page-generate.active) { overflow: hidden; }
    .app-layout:has(#page-generate.active) {
        height: 100vh; min-height: 100vh; overflow: hidden;
    }
    .main-area:has(#page-generate.active) {
        height: calc(100vh - 52px); min-height: 0; overflow: hidden;
        padding-top: 0; padding-bottom: 0;
    }
    /* —— 版本 al/am：gen-layout 直接沿用其基础定义 height:calc(100vh-52px)（见 .gen-layout 第457行），本块不再覆盖它。
       若在此写 height:100%，因 #page-generate 是 .page.active 的自动高度，100% 会解析为 auto → gen-layout 坍缩 →
       对话框贴顶、整页锁死、对话流无法滚动。对话流滚动由 .chat-stream(overflow-y:auto)+ 父链确定高度保证，与两侧抽屉(gen-sidebar/gen-gallery)无关。 —— */
}
.gen-sidebar {
    flex: 1 1 auto; min-width: 0;
    min-height: 0; /* —— 版本 ag 2026-08-18：同上，防左抽屉内容撑破 gen-layout 导致整页滚 —— */
    overflow-y: auto; padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.gen-sidebar:hover {
    scrollbar-color: var(--bg-hover) transparent;
}
.gen-sidebar::-webkit-scrollbar { width: 4px; }
.gen-sidebar::-webkit-scrollbar-thumb {
    background: transparent; border-radius: 2px;
    transition: background 0.3s;
}
.gen-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
}
.gen-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.gen-gallery {
    display: flex; flex-direction: column;
    overflow: hidden; padding-left: 4px;
    min-height: 0;
}
.gen-gallery.gen-drawer {
    flex: 0 0 var(--drawer-w);
    width: var(--drawer-w);
    overflow: hidden auto;
    background: var(--bg-elevated, rgba(255,255,255,.03));
    border: 1px solid var(--border-tertiary, rgba(255,255,255,.08));
    border-radius: 14px;
    transition: flex-basis .26s cubic-bezier(.22,1,.36,1), width .26s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
/* 兜底：drawer-open 时强制 380px 展开（防 flex 压缩 / 浏览器缓存命中旧版 / 规则被覆盖） */
.gen-layout.drawer-open .gen-gallery.gen-drawer {
    width: 380px !important;
    min-width: 380px !important;
    flex: 0 0 380px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.gen-layout:not(.drawer-open) .gen-gallery.gen-drawer {
    flex: 0 0 0; width: 0; opacity: 0; pointer-events: none; overflow: hidden;
}
.gen-layout:not(.drawer-open) .gen-drawer > *:not(.drawer-strip) { display: none; }

/* ===== 中间对话流（对话式生成，替代原参数面板区） ===== */
/* ===== 对话式生成区（即梦风格） ===== */
.gen-chat {
    flex: 1 1 auto; min-width: 0;
    min-height: 0; /* —— 版本 ag 2026-08-18：flex 子项必须 min-height:0 才能被压缩，否则内容撑破 gen-layout → 整页跟滚；加这行后 chat-stream 内部 overflow:auto 才生效 —— */
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(1100px 560px at 50% -12%, rgba(232, 184, 75,.10), transparent 62%),
        var(--bg-base, #08080c);
}
/* —— 版本 bo 2026-08-18（取代 bn）：抽屉收起态右上角「素材」按钮（drawer-toggle, right:20, 宽约70 → 按钮左边缘 = 屏右 92px）会压住对话；
   解决：在 chat-stream 与 chat-input-bar 两个直接父级容器上各加 padding-right:92px，让整段对话与输入区整体避让按钮区域；
   各 chat-msg / msg / chat-input-card 不再被强制靠右（margin-left:auto）与 max-width（760/820）限制——保留 chat-msg-user flex-end / chat-msg-ai flex-start 的左右对开原则，
   由 chat-bubble max-width:90% 与 chat-media max-width:320px 自然约束气泡 / 图片宽度（不再"固定 760"），输入卡仍居中(max-width:820 margin:auto)。
   展开态 .drawer-open 保留默认不避让（与原始居中布局一致）。 —— */
.gen-layout:not(.drawer-open) .chat-stream { padding-right: 92px; }
.gen-layout:not(.drawer-open) .chat-input-bar { padding-right: 92px; }
/* —— 版本 af 2026-08-18：chat-stream 在 .gen-chat（flex column, overflow:hidden）里必须占剩余高度 + 自带滚动，否则会按内容撑高 → 把 .chat-input-bar 推出可视区 → 下半截被裁；同时溢出撑爆 body → 全局滚动条隐藏后体感是"页面跟滚"。 —— */
.chat-stream {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* —— 空状态中央欢迎卡（chat-stream 内；与 ab 版一致） —— */
.chat-empty {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; overflow: hidden;
    color: var(--text-secondary, #a1a1b5);
}
.chat-empty-glow {
    position: absolute; left: 50%; top: 50%;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 184, 75,.32), rgba(232, 184, 75,0) 68%);
    filter: blur(28px); transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
}
.chat-empty-content {
    position: relative; z-index: 1; max-width: 640px; width: 100%;
    text-align: center; display: flex; flex-direction: column; align-items: center;
}
.chat-empty-icon {
    font-size: 30px; margin-bottom: 18px;
    display: flex; width: 76px; height: 76px; align-items: center; justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(232, 184, 75,.20), rgba(201,162,39,.10));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 34px rgba(232, 184, 75,.28);
}
.chat-empty-badge {
    display: inline-block; font-size: 12px; letter-spacing: .6px;
    color: var(--accent, #E8B84B); background: var(--accent-soft, rgba(232, 184, 75,.12));
    border: 1px solid var(--border-focus, rgba(130,110,245,.35)); border-radius: 999px;
    padding: 5px 14px; margin-bottom: 18px;
}
.chat-empty h2 { font-size: 26px; color: var(--text-primary, #fff); margin: 0 0 12px; font-weight: 700; letter-spacing: -.4px; align-self: center; }
.chat-empty p { font-size: 14px; line-height: 1.8; margin: 0 auto 24px; max-width: 480px; color: var(--text-secondary, #9191a1); }
.chat-suggests { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 560px; }
.chat-suggest {
    appearance: none; cursor: pointer; font-size: 13px; font-family: inherit;
    color: var(--text-secondary, #9191a1); background: rgba(255,255,255,.04);
    border: 1px solid var(--border-default, rgba(255,255,255,.08)); border-radius: 999px;
    padding: 9px 16px; transition: all .16s var(--ease-out, ease);
}
.chat-suggest:hover {
    color: var(--text-primary, #fff); border-color: var(--accent, #E8B84B);
    background: var(--accent-soft, rgba(232, 184, 75,.12)); transform: translateY(-1px);
}
/* —— 底部输入卡片（即梦同款：顶部 textarea 多行 / 底部工具拆 2 行；版本 w 2026-08-18）—— */
.chat-input-bar {
    flex: 0 0 auto; padding: 0 0 18px;
    display: flex; justify-content: center;
}
.chat-input-card {
    max-width: 820px; width: 100%; margin: 0 auto;
    background: var(--bg-elevated, #12121a);
    border: 1px solid var(--border-default, rgba(255,255,255,.08)); border-radius: 20px; padding: 10px 14px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    /* 整卡片纵向分 2 段:顶部 textarea + 底部工具栏（工具栏再拆 row1 + row2） */
    display: flex; flex-direction: column; gap: 6px;
    transition: box-shadow .2s;
}
.chat-input-bar:focus-within .chat-input-card {
    box-shadow: inset 0 -1px 0 0 var(--accent, #E8B84B), 0 4px 16px rgba(0,0,0,.25);
}
.chat-input-card.drag-over {
    border-color: var(--accent, #E8B84B);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(232, 184, 75,.35)), 0 4px 16px rgba(0,0,0,.25);
}
/* 顶部:textarea 多行主区域 */
/* —— 版本 ai 2026-08-18：与新版 .chat-prompt 默认高对齐，避免卡片顶部多余空白 —— */
.chat-input-top { display: block; min-height: 64px; }
.chat-input-top .chat-prompt { display: block; width: 100%; box-sizing: border-box; }
/* 底部:工具栏拆 2 行（row1=trigger 行,row2=操作行） */
.chat-input-toolbar {
    display: flex; flex-direction: column; gap: 6px;
}
.chat-input-row1 {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    min-width: 0;
}
.chat-input-row2 {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-end;  /* 清空 / 积分 / 发送 靠右 */
}
.chat-params-zone {
    display: flex; align-items: center; gap: 3px;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    padding: 0; margin: 0;
    flex: 1 1 auto; min-width: 0;
}
.chat-toolbar-spacer { display: none; }
.chat-ref-btn { margin-left: 0; flex-shrink: 0; }
/* —— 一排式：所有控件同高 34px,trigger 圆角矩形 8px（与 _SHOW_u2d.png 一致）,select 伪装成 trigger —— */
.chat-type-select {
    flex: 0 0 auto; height: 34px; border-radius: 8px; line-height: 1;
    background: rgba(255,255,255,.05); color: var(--text-primary, #fff);
    border: 1px solid var(--border-default, rgba(255,255,255,.10)); padding: 0 28px 0 12px; font-size: 13px; cursor: pointer;
    font-family: inherit; white-space: nowrap;
    transition: background .15s, border-color .15s;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='%23a0a0b0'%3e%3cpath d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.chat-type-select:hover { background-color: rgba(255,255,255,.09); border-color: var(--border-hover); }
.chat-ref-btn {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; line-height: 1;
    background: rgba(255,255,255,.05); border: 1px solid var(--border-default, rgba(255,255,255,.10));
    color: var(--text-secondary, #9191a1); cursor: pointer; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.chat-ref-btn:hover { background: rgba(255,255,255,.1); color: var(--text-primary, #fff); }
/* —— 版本 ai 2026-08-18：textarea 默认 110 → 64，卡片整体砍 ~46px，让对话框靠底更紧凑 —— */
.chat-prompt {
    flex: 0 0 auto; min-width: 0; resize: none;
    height: 64px; min-height: 64px; max-height: 160px; border-radius: 10px;
    background: transparent; border: none;
    color: #f0f0f2 !important; padding: 8px 6px; font-size: 14px; line-height: 1.55;
    font-family: inherit;
}
/* 强制 contenteditable 内所有子元素继承亮色文字（防止粘贴/JS 带入深色内联样式） */
.chat-prompt * { color: inherit !important; }
.chat-prompt::placeholder { color: var(--text-tertiary, #5e5e6e) !important; }
.chat-prompt:focus { outline: none; }
/* eo：@ 引用缩略图（contenteditable 内嵌） */
.chat-prompt-thumb {
    display: inline-flex; align-items: center; gap: 4px;
    vertical-align: middle; position: relative;
    border: 1px solid rgba(232, 184, 75,.45); border-radius: 6px;
    padding: 1px 5px 1px 3px; margin: 0 2px;
    background: rgba(232, 184, 75,.12); cursor: pointer;
    white-space: nowrap; line-height: 20px;
}
.chat-prompt-thumb img.chat-prompt-thumb-img {
    width: 20px; height: 20px; object-fit: cover; border-radius: 4px;
    display: inline-block; vertical-align: middle; flex-shrink: 0;
    background: var(--bg-overlay, rgba(255,255,255,.08));
}
.chat-prompt-thumb .chat-prompt-thumb-label { font-size: 12px; color: var(--accent, #E8B84B); }
.chat-prompt-thumb.is-video .chat-prompt-thumb-img::after {
    content: '▶'; position: absolute; right: -2px; bottom: -2px;
    width: 12px; height: 12px; line-height: 12px; font-size: 7px; text-align: center;
    border-radius: 50%; background: rgba(0,0,0,.65); color: #fff;
}
/* eo：hover 灯箱预览（body 顶层 fixed，绕开 contenteditable 父级 overflow 截断） */
.chat-prompt-lightbox {
    position: fixed; z-index: 100000;
    border-radius: 10px;
    background-color: rgba(0,0,0,.88);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    pointer-events: none; /* 不挡 mouseenter/mouseleave */
    opacity: 0; transition: opacity .14s ease;
}
.chat-prompt-lightbox.is-show { opacity: 1; }
.chat-prompt-lightbox video,
.chat-prompt-lightbox img {
    width: 100%; height: 100%;
    object-fit: contain; border-radius: 10px;
    display: block; background: #000;
}

.chat-send {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: none;
    background: linear-gradient(135deg, #E8B84B, #C9A227); color: #fff;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(232, 184, 75,.45);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.chat-send:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 184, 75,.55); }
.chat-send:active { transform: translateY(0); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.chat-send-icon { display: block; color: #fff; }
/* en：生成中按钮变「停止」（金→警示红渐变），hover 提示可取消 */
.chat-send.is-generating { background: linear-gradient(135deg, #E8B84B, #d97706); box-shadow: 0 4px 14px rgba(217,119,6,.45); }
.chat-send.is-generating:hover { box-shadow: 0 6px 18px rgba(217,119,6,.6); }
.chat-stop-icon { color: #fff; }
/* 工具栏外置:清空 / 积分 */
.chat-clear-btn {
    flex: 0 0 auto; height: 34px; padding: 0 12px; border-radius: 8px; line-height: 1;
    background: transparent; border: 1px solid var(--border-default, rgba(255,255,255,.10));
    color: var(--text-muted, #6e6e80); font-size: 13px; cursor: pointer; font-family: inherit;
    transition: color .15s, background .15s, border-color .15s;
}
.chat-clear-btn:hover { color: var(--text-primary, #fff); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.chat-enhance-btn {
    flex: 0 0 auto; height: auto; padding: 2px 4px; border-radius: 4px; line-height: 1.4;
    background: transparent; border: none;
    color: var(--accent, #E8B84B); font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 500;
    transition: background .15s, color .15s;
}
.chat-enhance-btn:hover { background: rgba(232, 184, 75,.1); color: var(--accent, #E8B84B); }
.chat-enhance-btn:disabled { opacity: .5; cursor: not-allowed; }
.chat-cost { font-size: 13px; color: var(--text-secondary, #9191a1); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 4px; }
.chat-cost-num { color: var(--accent, #E8B84B); font-weight: 600; }
/* 旧 .chat-params 容器：去除边距,trigger 行内紧凑 */
.chat-params { margin: 0; padding: 0; display: contents; }
.chat-param-select {
    height: 30px; border-radius: 9px; background: rgba(255,255,255,.05);
    color: var(--text-secondary, #9191a1); border: 1px solid var(--border-default, rgba(255,255,255,.10));
    padding: 0 10px; font-size: 12px; cursor: pointer; transition: background .15s, color .15s;
}
.chat-param-select:hover { background: rgba(255,255,255,.1); color: var(--text-primary, #fff); }
/* —— 消息气泡（接 JS 后生效） —— */
.msg { display: flex; gap: 12px; margin: 0 auto 22px; max-width: 760px; width: 100%; align-items: flex-start; }
.msg-user { flex-direction: row-reverse; }
.msg-user .bubble {
    background: linear-gradient(135deg, rgba(232, 184, 75,.24), rgba(201,162,39,.12));
    border: 1px solid rgba(232, 184, 75,.32); color: var(--text-primary, #fff);
    border-radius: 18px 18px 6px 18px; padding: 12px 16px; font-size: 14px; line-height: 1.6; max-width: 72%;
}
.msg-ai .bubble {
    background: var(--bg-elevated, #12121a); border: 1px solid var(--border-default, rgba(255,255,255,.07));
    color: var(--text-primary, #fff); border-radius: 18px 18px 18px 6px; padding: 12px 16px; font-size: 14px; line-height: 1.6; max-width: 82%;
}
.msg-system { justify-content: center; }
.msg-system .bubble { background: transparent; border: none; color: var(--text-tertiary, #5e5e6e); font-size: 12px; }
/* 结果卡 */
.msg-result { margin: 0 auto 22px; max-width: 640px; width: 100%; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border-default, rgba(255,255,255,.08)); background: var(--bg-elevated, #12121a); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.6)); }
.msg-result img, .msg-result video { width: 100%; display: block; }
.msg-result .meta { padding: 10px 14px; font-size: 12px; color: var(--text-secondary, #9191a1); display: flex; justify-content: space-between; gap: 12px; }
/* 生成中进度卡 */
.msg-progress { margin: 0 auto 22px; max-width: 640px; width: 100%; border-radius: 16px; padding: 18px;
    background: var(--bg-elevated, #12121a); border: 1px solid var(--border-default, rgba(255,255,255,.08)); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.6)); }
.msg-progress .ptitle { font-size: 14px; color: var(--text-primary, #fff); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.msg-progress .ptitle .pct { color: var(--accent, #E8B84B); font-weight: 600; }
.msg-progress .bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.msg-progress .bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E8B84B, #C9A227); transition: width .4s var(--ease-out, ease); }
.msg-progress .pcancel { margin-top: 12px; font-size: 12px; color: var(--text-secondary, #9191a1); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.msg-progress .pcancel:hover { color: var(--danger, #f87171); }
/* 右栏内容（素材 + 创作历史）撑满整列，避免大屏下内容只居顶、下方留黑 */
.gen-gallery .results-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.gen-gallery:hover {
    scrollbar-color: var(--bg-hover) transparent;
}
.gen-gallery::-webkit-scrollbar { width: 4px; }
.gen-gallery::-webkit-scrollbar-thumb {
    background: transparent; border-radius: 2px;
    transition: background 0.3s;
}
.gen-gallery:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
}
.gen-gallery::-webkit-scrollbar-track {
    background: transparent;
}

/* —— 统一右侧抽屉：头部 / tab / 收起按钮 / 浮动开关 —— */
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto; padding: 2px 2px 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border-tertiary, rgba(255,255,255,.08));
}
.drawer-tabs { display: flex; gap: 4px; }
.drawer-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: var(--text-secondary, #9aa0ad); font-size: 14px; font-weight: 500;
    padding: 6px 14px; border-radius: 8px;
}
.drawer-tab.active { color: #fff; background: rgba(232,184,75,.18); }
.drawer-close {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: var(--text-secondary, #9aa0ad); font-size: 20px; line-height: 1;
    width: 30px; height: 30px; border-radius: 8px;
}
.drawer-close:hover { background: rgba(255,255,255,.08); color: #fff; }
/* 收起态：右上角单一胶囊（同左栏收缩小箭头风格，点开显示素材面板） */
.drawer-toggle {
    position: fixed; top: 76px; right: 20px; z-index: 35;
    display: none; align-items: center; gap: 6px; cursor: pointer;
    appearance: none; border: 1px solid var(--border-tertiary, rgba(255,255,255,.12));
    background: var(--bg-elevated, #fff); color: var(--text-primary);
    font-size: 13px; font-weight: 500; font-family: var(--font-sans);
    padding: 6px 14px; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.drawer-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg,#E8B84B,#F2C14E); }
.drawer-toggle:hover { filter: brightness(1.04); }
.gen-layout:not(.drawer-open) .drawer-toggle { display: inline-flex; }

/* —— 统一右侧抽屉：即梦式素材面板 —— */
.asset-panel { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.gen-gallery.show-asset #assetPanel { display: flex; flex: 0 0 auto; }
.gen-gallery.show-asset #imgCaseShowcaseSection,
.gen-gallery.show-asset #caseShowcaseSection { display: none !important; }
.asset-scope { display: flex; gap: 6px; padding: 2px 4px 10px; }
.scope-tab { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.scope-tab.active { background: var(--accent-soft, rgba(232,184,75,.18)); color: var(--accent, #E8B84B); }
.asset-search { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; }
.asset-search-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-tertiary, rgba(255,255,255,.12)); background: var(--bg-overlay, rgba(255,255,255,.06)); color: var(--text-primary); font-size: 13px; font-family: var(--font-sans); }
.asset-filter-btn { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--border-tertiary, rgba(255,255,255,.12)); background: var(--bg-overlay); color: var(--accent, #E8B84B); cursor: pointer; font-size: 13px; }
.asset-types { display: flex; gap: 16px; padding: 0 4px 10px; border-bottom: 1px solid var(--border-tertiary, rgba(255,255,255,.08)); }
.type-tab { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 4px 0; position: relative; }
.type-tab.active { color: var(--text-primary, #fff); }
.type-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--text-primary, #fff); border-radius: 2px; }
.asset-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 4px 14px; }
    .asset-section { margin-bottom: 22px; }
    .asset-section-title { font-size: 12px; color: var(--text-tertiary, #8a8f9c); margin-bottom: 10px; padding-top: 4px; letter-spacing: .02em; }
.asset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.asset-cell { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--bg-overlay, rgba(255,255,255,.06)); cursor: pointer; }
.asset-cell img, .asset-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-cell:hover { outline: 2px solid var(--accent, #E8B84B); }

/* 右抽屉「历史」tab：4 列小方格（与「素材」tab 同款观感，替代原双列大图） */
.gen-gallery.gen-drawer #resultsSection {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.gen-gallery.gen-drawer #resultsSection .section-header { flex: 0 0 auto; }
/* 4 列小方格：完全复用「素材」tab 的 asset-cell 机制（in-flow 媒体铺满，卡片靠 aspect-ratio 自撑正方形） */
.gen-gallery.gen-drawer .results-masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 8px;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}
.gen-gallery.gen-drawer .result-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-overlay, rgba(255,255,255,.06));
    border: 1px solid var(--border-subtle);
}
.gen-gallery.gen-drawer .result-card:hover {
    outline: 2px solid var(--accent, #E8B84B);
    box-shadow: none;
}
.gen-gallery.gen-drawer .result-card-img,
.gen-gallery.gen-drawer .result-card-video,
.gen-gallery.gen-drawer .result-card-audio {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gen-gallery.gen-drawer .result-card-audio { display: flex; align-items: center; justify-content: center; }
/* 小方格下隐藏文字信息与悬浮按钮；点击卡片即看详情（renderResults 已绑定 card click → viewDetail） */
.gen-gallery.gen-drawer .result-card-info,
.gen-gallery.gen-drawer .result-card-actions { display: none; }
/* 历史区视频/图片 src 404 占位（避免 ▶ 圆圈/破图漏出，统一显示 4 列方块） */
.gen-gallery.gen-drawer .result-card .result-card-broken {
    position: absolute; inset: 0;
    display: flex !important; flex-direction: column !important;
    align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, rgba(232,184,75,.08) 0%, rgba(217,169,59,.05) 100%);
    color: var(--text-tertiary, #8a8f9c);
    font-size: 11px;
}
.gen-gallery.gen-drawer .result-card .result-card-broken svg { width: 24px; height: 24px; opacity: .65; }
.gen-gallery.gen-drawer .result-card .result-card-broken span { opacity: .8; }
.asset-empty { color: var(--text-tertiary, #8a8f9c); font-size: 13px; text-align: center; padding: 40px 0; }
/* 收起态：18px 细边只留箭头（同左侧二级栏收缩形式），隐藏文字 */
.gen-layout:not(.drawer-open) .gen-drawer .drawer-strip { padding: 16px 0; gap: 0; }
.gen-layout:not(.drawer-open) .gen-drawer .drawer-strip > span:not(.chev) { display: none; }
.gen-layout:not(.drawer-open) .gen-drawer .drawer-strip .chev { font-size: 18px; }

/* tab 切换：素材 / 历史 */
.gen-gallery.show-history #imgCaseShowcaseSection,
.gen-gallery.show-history #caseShowcaseSection,
.gen-gallery:not(.show-history) #resultsSection { display: none !important; }
.gen-panel { display: none; }
.gen-panel.active { display: block; }
.panel-header { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.panel-header h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.panel-header p  { font-size: 12px; color: var(--text-tertiary); }
.panel-body-scroll {
    overflow-y: auto; max-height: calc(100vh - 280px);
    scrollbar-width: thin; padding-right: 4px;
}
.panel-body-scroll::-webkit-scrollbar { width: 4px; }
.panel-body-scroll::-webkit-scrollbar-thumb {
    background: var(--bg-hover); border-radius: 2px;
}


/* ================================================================
   INPUT CARD
   ================================================================ */
.input-card {
    background: var(--bg-surface); border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.input-card:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-top-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.prompt-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* Model select */
.model-select { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.model-label {
    font-size: 10px; color: var(--text-tertiary); font-weight: 500;
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
}
.model-dropdown {
    padding: 4px 8px; border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
    background: var(--bg-input); color: var(--text-secondary);
    font-size: 11px; font-weight: 500; cursor: pointer;
    outline: none; font-family: var(--font-sans);
    transition: all var(--duration-fast) var(--ease-out);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235e5e6e'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    padding-right: 24px;
}
.model-dropdown:hover { border-color: var(--border-hover); color: var(--text-primary); }
.model-dropdown:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Model select row - compact horizontal layout */
.input-top-row-compact {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 10px !important;
}
.input-top-row-compact .prompt-label { margin-bottom: 0; }

/* Video panel 2-column input card (方案A · 2026-08-04) */
.input-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr);
    gap: 18px;
    align-items: stretch;
}
.input-card-left,
.input-card-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.input-card-left .prompt-label { margin-bottom: 0; }
.input-card-left textarea { flex: 1; min-height: 96px; resize: vertical; }
.input-card-left .prompt-actions { margin-top: 2px; }
.input-card-right .model-select-row {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 0;
}
.input-card-right .model-select { flex: 0 0 auto; min-width: 0; }
.input-card-right .model-select .model-dropdown { width: 100%; }
.input-card-right .prompt-label {
    margin-bottom: 2px; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}
@media (max-width: 900px) {
    .input-card-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ================================================================
   PIPELINE BAR (flow indicator)
   ================================================================ */
.pipeline-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 10px 6px; margin: 4px 0 12px;
    background: var(--bg-elevated); border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.pipeline-step {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; padding: 0 2px;
    transition: all var(--duration-fast) var(--ease-out);
}
.pipeline-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--border-subtle);
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}
.pipeline-step.active .pipeline-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(124,77,255,0.2);
}
.pipeline-step.done .pipeline-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
}
.pipeline-label {
    font-size: 9px; font-weight: 500; color: var(--text-tertiary);
    white-space: nowrap; text-align: center; line-height: 1;
    transition: color var(--duration-fast) var(--ease-out);
}
.pipeline-step.active .pipeline-label { color: var(--accent); font-weight: 600; }
.pipeline-step.done .pipeline-label { color: #22c55e; }
.pipeline-line {
    flex: 1; height: 2px; min-width: 16px;
    background: var(--border-subtle); margin: 0 2px;
    margin-bottom: 16px; transition: background var(--duration-fast) var(--ease-out);
}
.pipeline-line.done { background: #22c55e; }

/* ================================================================
   UPLOAD REF ROW
   ================================================================ */
.upload-ref-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0 2px; flex-wrap: wrap;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
}
.upload-ref-row.dragover {
    background: var(--accent-soft);
    border: 1.5px dashed var(--accent);
    padding: 8px 10px;
}
.upload-ref-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    border: 1.5px dashed var(--border-subtle); background: var(--bg-input);
    color: var(--text-secondary); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.upload-ref-btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.upload-ref-hint {
    font-size: 10px; color: var(--text-tertiary);
}
.ref-preview-list {
    display: flex; gap: 6px; flex-wrap: wrap;
    width: 100%; margin-top: 4px;
}
.ref-preview-list .ref-thumb {
    width: 48px; height: 48px; border-radius: var(--radius-xs);
    object-fit: cover; border: 1px solid var(--border-subtle);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}
.ref-preview-list .ref-thumb:hover {
    border-color: var(--accent); opacity: 0.85;
}
.ref-preview-list .ref-thumb .ref-remove {
    position: absolute; top: -4px; right: -4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 10px; line-height: 14px; text-align: center;
    display: none; cursor: pointer;
}
.ref-preview-list .ref-thumb:hover .ref-remove { display: block; }

/* Textarea */
.input-card textarea {
    width: 100%; background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 12px 14px;
    color: var(--text-primary); font-size: 13px; line-height: 1.7;
    resize: vertical; min-height: 100px; font-family: var(--font-sans);
    transition: all var(--duration-fast) var(--ease-out);
}
.input-card textarea::placeholder { color: var(--text-disabled); }
.input-card textarea:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.prompt-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
    gap: 12px;
}
.prompt-actions-left,
.prompt-actions-right {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.prompt-actions-right {
    flex-shrink: 0; margin-left: auto;
}
@media (max-width: 640px) {
    .prompt-actions {
        align-items: flex-start;
        flex-direction: column;
    }
    .prompt-actions-right { margin-left: 0; }
}
.action-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--border-subtle); background: transparent;
    color: var(--text-tertiary); font-size: 11px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap; flex-shrink: 0;
}
.action-chip:hover {
    background: var(--bg-overlay); color: var(--text-primary);
    border-color: var(--border-hover);
}
.action-chip-opt {
    /* 2026-08-25：去掉胶囊外壳，改文字链接风（与右侧"24 积分"纯文字标签风格统一），解决文字长时错位
       !important 覆盖基础 .action-chip 的 border: 1px solid 简写（border-color 单独声明无法清除 width/style） */
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}
.action-chip-opt:hover {
    background: rgba(232, 184, 75,0.1) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
}
.action-chip-opt.active {
    background: rgba(232, 184, 75,0.15) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.action-chip-gen {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 500;
}
.action-chip-gen:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.btn-generate-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 22px;
    border-radius: 999px;
    background: var(--accent); color: #fff;
    border: 1px solid var(--accent);
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(232, 184, 75,0.25);
}
.btn-generate-pill:hover:not(:disabled) {
    background: var(--accent-hover); border-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(232, 184, 75,0.35);
}
.btn-generate-pill:disabled {
    opacity: 0.5; cursor: not-allowed;
    box-shadow: none;
}
.btn-generate-pill .credit-badge {
    margin-left: 4px; padding: 1px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.25); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1.4;
}
.char-indicator { font-size: 11px; color: var(--text-tertiary); }


/* ================================================================
   SECTION CARD
   ================================================================ */
.section-card {
    background: var(--bg-surface); border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
}
.section-title {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.section-card textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.section-card textarea:focus {
    border-color: var(--accent);
}
.section-card textarea::placeholder {
    color: var(--text-disabled);
}

/* -------- Aspect Ratio -------- */
.ratio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.ratio-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 11px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.ratio-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.ratio-btn.active {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.ratio-preview {
    width: 22px; background: var(--text-disabled); border-radius: 2px;
    transition: background var(--duration-fast) var(--ease-out);
}
.ratio-btn.active .ratio-preview { background: var(--accent); }
.ratio-auto  { height: 22px; width: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.ratio-auto::before { content: 'AI'; font-size: 8px; color: var(--text-disabled); }
.ratio-btn.active .ratio-auto::before { color: var(--accent); }
.ratio-21-9 { height: 9px;  width: 22px; }
.ratio-16-9 { height: 12px; width: 22px; }
.ratio-3-2  { height: 15px; width: 22px; }
.ratio-4-3  { height: 16px; width: 22px; }
.ratio-1-1  { height: 22px; width: 22px; }
.ratio-3-4  { height: 29px; width: 22px; }
.ratio-2-3  { height: 33px; width: 22px; }
.ratio-9-16 { height: 29px; width: 16px; }

/* -------- Resolution & Count Groups -------- */
.resolution-group, .count-group {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.res-btn, .count-btn {
    flex: 1; min-width: 80px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 13px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-align: center;
}
.res-btn:hover, .count-btn:hover {
    border-color: var(--border-hover); color: var(--text-secondary);
}
.res-btn:disabled, .count-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-elevated); color: var(--text-disabled);
    border-color: var(--border-subtle);
}
.res-btn.active, .count-btn.active {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}

/* -------- Text Enhance Button -------- */
.text-enhance-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.text-enhance-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}

.text-enhance-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: var(--bg-overlay);
}

.text-enhance-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.text-enhance-icon {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    line-height: 1;
    flex-shrink: 0;
}

.text-enhance-label {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* -------- Style Grid -------- */
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.style-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 10px; border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle); background: var(--bg-elevated);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.style-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.style-card.active {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.style-preview { width: 100%; height: 52px; border-radius: 6px; }
.style-name {
    font-size: 11px; color: var(--text-secondary); text-align: center;
    width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -------- 口播风格（9:16 竖版视频预览） -------- */
.style-grid-avatar {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.style-card-avatar {
    padding: 10px 8px;
    gap: 8px;
}
.style-preview-avatar {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 120px;
    border-radius: 8px;
    object-fit: cover;
}

/* -------- 真人出镜 Avatar Panel -------- */
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; border-radius: var(--radius-md);
    border: 2px solid var(--border-subtle); background: var(--bg-elevated);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.avatar-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.avatar-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.avatar-thumb {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.avatar-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.avatar-tag { font-size: 10px; color: var(--text-tertiary); background: var(--bg-surface); padding: 2px 8px; border-radius: 10px; }
.avatar-card.active .avatar-tag { background: var(--accent); color: #fff; }
.selected-label { font-size: 11px; font-weight: 600; color: var(--accent); margin-left: 6px; background: var(--accent-soft); padding: 2px 8px; border-radius: 10px; }

/* 数字人分区域 —— 火山授权 / 我的素材 */
.avatar-sub-section { margin-bottom: 16px; }
.avatar-sub-section:last-child { margin-bottom: 0; }
.avatar-sub-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 10px;
}
.sub-title-icon { font-size: 14px; }
.sub-title-tag {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: linear-gradient(135deg, #f97316, #ef4444); color: #fff;
}
.sub-title-tag.custom-tag {
    background: linear-gradient(135deg, #D9A93B, #C9A227); color: #fff;
}

/* 素材库状态标记 */
.asset-badge {
    font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 8px;
    line-height: 1.3; white-space: nowrap;
}
.asset-badge.configured { background: rgba(34,197,94,0.15); color: #86efac; }
.asset-badge.unconfigured { background: rgba(239,68,68,0.15); color: #fca5a5; }

/* ====== TTS 语音合成区域 ====== */
.tts-badge {
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;
    letter-spacing: 0.5px;
}
.tts-inline-row { display: flex; gap: 10px; margin-top: 12px; }
.tts-inline-field { flex: 1; min-width: 0; }
.tts-inline-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; display: block; }
.tts-inline-dropdown { position: relative; }
.tts-inline-dropdown-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px;
    padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
    background: var(--bg-input); color: var(--text-primary); font-size: 12px; cursor: pointer;
    transition: border-color var(--duration-fast);
}
.tts-inline-dropdown-trigger:hover { border-color: var(--border-hover); }
.tts-inline-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    margin-top: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
    background: var(--bg-elevated); box-shadow: var(--shadow-md); overflow: hidden;
    max-height: 180px; overflow-y: auto;
}
.tts-inline-dropdown.open .tts-inline-dropdown-menu { display: block; }
.tts-inline-dropdown-item {
    padding: 7px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer;
    transition: background var(--duration-fast);
}
.tts-inline-dropdown-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.tts-inline-dropdown-item.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); }

/* ====== 数字人来源切换标签 ====== */
.avatar-source-tabs {
    display: flex; gap: 8px; margin-bottom: 12px;
}
.avatar-source-tab {
    flex: 1; display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle); background: var(--bg-elevated);
    cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary);
    transition: all var(--duration-fast);
}
.avatar-source-tab:hover { border-color: var(--border-hover); }
.avatar-source-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
.avatar-source-icon { font-size: 14px; }
.avatar-source-badge {
    font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 8px;
    background: linear-gradient(135deg, #f97316, #ef4444); color: #fff;
    margin-left: auto;
}

/* ====== 素材库区域 ====== */
.avatar-library-section { margin-top: 8px; }
.avatar-library-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.avatar-library-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.avatar-library-empty { text-align: center; padding: 24px 16px; }
.avatar-library-empty-icon { font-size: 36px; margin-bottom: 8px; }
.avatar-library-empty p { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px 0; }
.avatar-library-empty-hint { font-size: 11px !important; color: var(--text-tertiary) !important; }
.avatar-library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ====== 真人素材管理 ====== */
.avatar-real-material-empty { text-align: center; padding: 20px 16px; }
.avatar-real-material-icon { font-size: 36px; margin-bottom: 8px; }
.avatar-real-material-empty p { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px 0; }
.avatar-real-material-hint { font-size: 11px !important; color: var(--text-tertiary) !important; }

/* ====== 数字人配音开关 ====== */
.avatar-digital-toggle-row {
    display: flex; align-items: center; gap: 10px; padding: 4px 0;
}
.avatar-digital-toggle-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.avatar-digital-toggle-hint { font-size: 11px; color: var(--text-tertiary); }

/* Small spinner for inline buttons */
.spinner-sm {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--border-subtle); border-top-color: var(--accent);
    border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 2px;
}

/* 真人出镜结果卡片 */
.result-card.avatar-result {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
}
.result-card-body { padding: 10px 12px; }
.result-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.result-card-meta .tag {
    font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.tag-model { background: rgba(217, 169, 59,0.15); color: #F2D98F; }
.tag-style  { background: rgba(56,189,248,0.15); color: #7dd3fc; }
.tag-duration { background: rgba(251,191,36,0.15); color: #fde68a; }
.result-card-prompt {
    font-size: 11px; color: var(--text-secondary);
    margin-bottom: 4px; line-height: 1.4;
}
.result-card-time { font-size: 10px; color: var(--text-tertiary); }

/* avatar card in gallery */
.avatar-gallery-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-gallery-card:hover { border-color: var(--primary); transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(201, 162, 39,0.25); }
.avatar-gallery-thumb {
    width: 100%; aspect-ratio: 9/16; background: var(--bg-secondary);
    position: relative; overflow: hidden;
}
.avatar-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.avatar-gallery-card:hover .avatar-gallery-thumb img { transform: scale(1.06); }
.avatar-gallery-body { padding: 10px 12px; }

/* -------- 真人资产库活体认证锁定 -------- */
.avatar-assets-wrap { position: relative; }
.avatar-lock-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(15, 15, 23, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border-color);
}
.avatar-lock-content { text-align: center; padding: 24px; }
.avatar-lock-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.8; }
.avatar-lock-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.avatar-lock-desc { font-size: 13px; color: var(--text-tertiary); margin-bottom: 18px; line-height: 1.5; max-width: 260px; }
.avatar-lock-btn {
    padding: 8px 24px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #C9A227, #D9A93B);
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.avatar-lock-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201, 162, 39,0.35); }

/* -------- 真人资产库header按钮 -------- */
.avatar-verify-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.05); color: var(--text-secondary);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.avatar-verify-btn:hover {
    background: rgba(255,255,255,0.1); color: var(--text-primary);
    border-color: var(--accent);
}
.avatar-upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(201, 162, 39,0.4);
    background: linear-gradient(135deg, rgba(201, 162, 39,0.15), rgba(217, 169, 59,0.15));
    color: #E8B84B;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.avatar-upload-btn:hover {
    background: linear-gradient(135deg, rgba(201, 162, 39,0.25), rgba(217, 169, 59,0.25));
    color: #c7d2fe;
}

/* -------- 真人资产库照片墙 -------- */
.avatar-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px; padding: 10px;
}
.avatar-photo-item {
    position: relative; aspect-ratio: 3/4; border-radius: 10px;
    overflow: hidden; background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.avatar-photo-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.avatar-photo-del {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; opacity: 0; transition: opacity 0.2s;
}
.avatar-photo-item:hover .avatar-photo-del { opacity: 1; }

/* -------- 活体认证拍照弹窗 -------- */
.liveness-modal-content {
    max-width: 480px;
}
.liveness-body { padding: 0; }
.liveness-camera-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
.liveness-camera-wrap video {
    width: 100%; height: 100%; object-fit: cover;
}
.liveness-guide-frame {
    position: absolute; inset: 10%;
    border: 1px dashed rgba(201, 162, 39,0.5);
    border-radius: 50%;
    pointer-events: none;
}
.liveness-corner {
    position: absolute; width: 20px; height: 20px;
    border-color: #C9A227;
    border-style: solid;
}
.liveness-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.liveness-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.liveness-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.liveness-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.liveness-status {
    padding: 14px 20px; text-align: center;
    color: var(--text-secondary); font-size: 13px;
}
.liveness-actions {
    display: flex; gap: 12px; padding: 0 20px 20px;
    justify-content: center;
}
.liveness-actions .btn-primary { min-width: 140px; }
.liveness-actions .btn-secondary { min-width: 100px; }

/* -------- 活体认证QR码阶段 -------- */
.liveness-qr-wrap {
    padding: 24px 20px;
    text-align: center;
    background: var(--bg-card, #1a1a2e);
    border-radius: 0;
}
.liveness-qr-container {
    padding: 20px;
}
.liveness-qr-placeholder {
    width: 200px; height: 200px;
    margin: 0 auto 16px;
    background: #fff;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.liveness-qr-placeholder img {
    width: 100%; height: 100%; object-fit: contain;
}
.liveness-qr-hint {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}
.liveness-qr-spinner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px;
    color: var(--color-primary, #C9A227);
    font-size: 13px;
}
.liveness-qr-spinner .spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border-color, #2a2a4a);
    border-top-color: var(--color-primary, #C9A227);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------- 真人资产库空白占位 -------- */
.avatar-assets-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary);
    font-size: 14px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    background: rgba(255,255,255,0.02);
}

/* -------- 真人资产库区域 1:1 布局 -------- */
.avatar-section-wrap {
    display: grid;
    grid-template-rows: 1.8fr 1fr;
    gap: 20px;
    height: calc(100vh - 100px);
}
.avatar-section-wrap > .material-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.avatar-section-wrap > .material-section .avatar-assets-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#avatarResultsSection {
    margin-top: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#avatarResultsSection .results-masonry {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* -------- 真人资产库历史创作区域 -------- */

#avatarResultsSection { margin-top: 24px; }

/* -------- Template Grid -------- */
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 10px; border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle); background: var(--bg-elevated);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.tpl-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.tpl-card.active {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.tpl-preview {
    width: 100%; height: 52px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.tpl-name {
    font-size: 11px; color: var(--text-secondary); text-align: center;
    width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selected-label { color: var(--accent); font-weight: 500; }


/* ================================================================
   GENERATE BUTTON
   ================================================================ */
.btn-generate-main {
    width: 100%; padding: 14px 20px; border-radius: var(--radius-lg); border: none;
    background: var(--accent); color: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative; overflow: hidden;
    letter-spacing: -0.01em;
}
.btn-generate-main:hover:not(:disabled) {
    background: var(--accent-hover); transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232, 184, 75,0.3);
}
.btn-generate-main:active:not(:disabled) { transform: scale(0.985); }
.btn-generate-main:disabled { opacity: 0.4; cursor: not-allowed; background: var(--bg-elevated); color: var(--text-disabled); }
.credit-cost {
    background: rgba(255, 255, 255, 0.18); padding: 3px 10px;
    border-radius: 20px; font-size: 12px; font-weight: 700;
    color: var(--warning); display: inline-flex; align-items: center;
}
.credit-detail {
    font-size: 10px; color: var(--text-tertiary);
    font-weight: 400; opacity: 0.8;
    margin-left: 2px;
}


/* ================================================================
   UPLOAD AREA
   ================================================================ */
.upload-area {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg); padding: 28px;
    text-align: center; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative; overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.upload-area:hover {
    border-color: var(--accent);
    background: rgba(232, 184, 75,0.03);
}
.upload-area.dragover {
    border-color: var(--accent);
    background: rgba(232, 184, 75,0.06);
}
.upload-icon { color: var(--text-disabled); margin-bottom: 10px; }
.upload-text strong {
    display: block; font-size: 13px; color: var(--text-secondary);
    margin-bottom: 3px;
}
.upload-text span { font-size: 11px; color: var(--text-tertiary); }
.upload-preview {
    width: 100%; max-height: 200px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.upload-preview img {
    max-width: 100%; max-height: 180px; border-radius: var(--radius-md);
    display: block; object-fit: contain;
}
.btn-change-img {
    margin-top: 10px; padding: 5px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 11px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all var(--duration-fast) var(--ease-out);
}
.btn-change-img:hover { background: var(--bg-overlay); color: var(--text-primary); }


/* ================================================================
   ONE-SHOT VIDEO
   ================================================================ */
.oneshot-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.oneshot-type-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-primary); cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.oneshot-type-card:hover {
    border-color: var(--border-hover); background: var(--bg-overlay);
    transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.oneshot-type-card.active {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(124,77,255,0.08);
}
.oneshot-type-icon {
    flex-shrink: 0; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); background: var(--bg-input);
    color: var(--text-secondary); transition: all var(--duration-fast) var(--ease-out);
}
.oneshot-type-card.active .oneshot-type-icon {
    background: rgba(124,77,255,0.15); color: var(--accent);
}
.oneshot-type-info { display: flex; flex-direction: column; gap: 2px; }
.oneshot-type-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.oneshot-type-desc { font-size: 10px; color: var(--text-tertiary); line-height: 1.2; }

/* ================================================================
   DURATION CHIPS (compact row)
   ================================================================ */
.selected-label { font-weight: 500; color: var(--accent); font-size: 13px; margin-left: 4px; }
.duration-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.duration-chip {
    flex: none; padding: 7px 16px; border-radius: 20px;
    border: 1.5px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.duration-chip:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.duration-chip.active, .duration-chip.selected {
    border-color: var(--accent); color: #fff;
    background: var(--accent);
}
.duration-chip:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-elevated); color: var(--text-disabled);
    border-color: var(--border-subtle);
}
.duration-group { display: flex; gap: 6px; }
.duration-btn {
    flex: 1; padding: 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.duration-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.duration-btn.active {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.duration-grid { display: flex; gap: 5px; flex-wrap: wrap; }
.duration-grid .duration-btn { flex: none; padding: 5px 12px; }

/* 时长选择器已改为单一下拉（原 chip 行），让 select 撑满容器宽度 */
.duration-chip-row, .duration-group { display: block; }
.duration-chip-row select.model-dropdown,
.duration-group select.model-dropdown,
.param-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.param-grid-3 .param-col { display: flex; flex-direction: column; gap: 6px; }
.param-grid-3 .param-label { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.param-grid-3 select.model-dropdown { width: 100%; }
@media (max-width: 900px) { .param-grid-3 { grid-template-columns: 1fr; } }
.param-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.param-grid-2 .param-col { display: flex; flex-direction: column; gap: 6px; }
.param-grid-2 .param-label { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.param-grid-2 select.model-dropdown { width: 100%; }
@media (max-width: 900px) { .param-grid-2 { grid-template-columns: 1fr; } }

/* 通用组合布局：左大输入框 + 右参数面板（方案A） */
.compose-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
.compose-main { display: flex; flex-direction: column; gap: 10px; }
.compose-main textarea { width: 100%; min-height: 280px; resize: vertical; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.compose-main textarea:focus { outline: none; border-color: var(--accent); }
#imgPrompt { resize: none; }
.param-sidebar { display: flex; flex-direction: column; gap: 14px; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px; }
.param-block { display: flex; flex-direction: column; gap: 6px; }
.param-block .param-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.param-block select.model-dropdown { width: 100%; }
@media (max-width: 900px) { .compose-grid { grid-template-columns: 1fr; } }

/* 数字人语音合成 */
.oneshot-avatar-body {
    padding: 12px 0 0 0; border-top: 1px solid var(--border-subtle); margin-top: 12px;
    animation: fadeSlideIn 0.25s var(--ease-out);
}
.oneshot-avatar-desc {
    font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px; line-height: 1.5;
}
.oneshot-voice-select-row, .oneshot-voice-speed-row {
    margin-bottom: 14px;
}
.oneshot-voice-label {
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
    margin-bottom: 8px; display: block;
}
.oneshot-voice-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.oneshot-voice-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 8px; border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle); background: var(--bg-elevated);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-align: center;
}
.oneshot-voice-card:hover { border-color: var(--border-hover); background: var(--bg-overlay); }
.oneshot-voice-card.active {
    border-color: var(--accent); background: var(--accent-soft);
}
.oneshot-voice-avatar { font-size: 24px; line-height: 1; }
.oneshot-voice-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.oneshot-voice-desc { font-size: 10px; color: var(--text-tertiary); line-height: 1.3; }
.oneshot-voice-play {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg-overlay); border: 1px solid var(--border-subtle);
    color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--duration-fast);
    opacity: 0;
}
.oneshot-voice-card:hover .oneshot-voice-play,
.oneshot-voice-card.active .oneshot-voice-play { opacity: 1; }
.oneshot-voice-play:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.oneshot-voice-play.playing { background: var(--accent); color: #fff; border-color: var(--accent); opacity: 1; }
.oneshot-speed-slider-wrap {
    display: flex; align-items: center; gap: 10px;
}
.oneshot-speed-slider {
    flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--bg-input); border-radius: 2px; outline: none;
    cursor: pointer;
}
.oneshot-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.oneshot-speed-value {
    font-size: 12px; font-weight: 600; color: var(--accent); min-width: 36px; text-align: right;
}


/* ================================================================
   GALLERY & RESULTS
   ================================================================ */
.gen-gallery { display: flex; flex-direction: column; gap: 32px; min-height: 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-header h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.section-subtitle { font-size: 11px; color: var(--text-tertiary); }
.section-actions { display: flex; align-items: center; gap: 10px; }
.result-count { font-size: 11px; color: var(--text-tertiary); }

/* Inspiration Grid */
.inspo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.inspo-card {
    background: var(--bg-surface); border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}
.inspo-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 184, 75,0.15);
}
.inspo-card-bg { width: 100%; height: 80px; }
.inspo-card-img-wrap {
    width: 100%; height: 120px; overflow: hidden; position: relative;
}
.inspo-card-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s var(--ease-out);
}
.inspo-card:hover .inspo-card-img {
    transform: scale(1.06);
}
.inspo-card-text {
    font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    padding: 10px 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.inspo-card-tag {
    font-size: 10px; color: var(--accent); font-weight: 500;
    padding: 0 12px 10px;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.btn-text-danger {
    background: none; border: none; color: var(--text-tertiary);
    font-size: 11px; cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}
.btn-text-danger:hover { color: var(--danger); }

/* Masonry */
.results-masonry {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: minmax(220px, auto);
    gap: 10px;
    align-items: stretch;
    align-content: start;
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px;
    max-height: calc(100vh - 280px);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.results-masonry::-webkit-scrollbar { width: 6px; }
.results-masonry::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.results-masonry::-webkit-scrollbar-track { background: transparent; }
.result-card {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out); position: relative;
}
.result-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
.result-card-img  { width: 100%; height: 160px; object-fit: cover; display: block; }
.result-card-video { width: 100%; height: 160px; object-fit: cover; display: block; background: #000; }
.result-card-audio { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(217, 169, 59,0.15), rgba(201, 162, 39,0.1)); }
.result-card-audio .audio-icon { width: 48px; height: 48px; color: var(--accent); opacity: 0.8; }
.result-card-info { padding: 10px 12px; }
.result-card-type {
    font-size: 10px; color: var(--accent); font-weight: 500; margin-bottom: 2px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.result-card-time { font-size: 10px; color: var(--text-tertiary); }
.result-card-actions {
    position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px;
    opacity: 1; transition: opacity var(--duration-fast) var(--ease-out);
    z-index: 2;
}
.result-card-actions:hover { opacity: 1; }
.result-card-action {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, 0.62);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px;
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.result-card-action:hover { background: rgba(232, 184, 75,.85); transform: translateY(-1px); }
.result-card-action:active { transform: translateY(0); }
/* 右抽屉历史 tab 小方格不显示角按钮（避免小卡片拥挤） */
.gen-gallery.gen-drawer .result-card-actions { display: none !important; }

/* 文生图生成中占位卡（替代大浮层，按所选比例同宽） */
.t2i-pending-card {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden; position: relative;
}
.t2i-pending-inner {
    position: relative; width: 100%;
    background: linear-gradient(135deg, #15151f 0%, #1d1d2b 100%);
}
.t2i-pending-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; padding: 12px;
    color: #cbd5e1; text-align: center;
}
.t2i-pending-spinner {
    width: 30px; height: 30px; border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--accent); border-radius: 50%;
    animation: t2i-spin 0.9s linear infinite;
}
@keyframes t2i-spin { to { transform: rotate(360deg); } }
.t2i-pending-status { font-size: 13px; font-weight: 500; }
.t2i-pending-timer { font-size: 12px; opacity: 0.65; }
.t2i-pending-progress {
    width: 72%; height: 4px; background: rgba(255,255,255,0.12);
    border-radius: 4px; overflow: hidden; margin-top: 2px;
}
.t2i-pending-bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.4s ease; }
.t2i-pending-pct { font-size: 11px; opacity: 0.65; }
.t2i-pending-failed .t2i-pending-overlay { color: #f87171; }
.t2i-pending-failicon { font-size: 30px; line-height: 1; }


/* ================================================================
   AGENT PAGE — 普通页面 + 左右抽屉
   ================================================================ */
#page-agent { overflow: hidden; }
#page-agent.active { display: flex; flex-direction: column; height: 100%; }
.agent-page-header {
    display: flex; align-items: flex-start;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
    background: var(--bg-card, #1a1a1a);
    flex-shrink: 0;
}
/* 顶栏确认键区已禁用，确认键统一放左下角 */
.agent-top-actions,
#agentTopActions {
    display: none !important;
}
.agent-header-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.agent-title-block {
    display: flex; align-items: baseline; gap: 12px;
    min-width: 0; overflow: hidden;
}
.agent-title-block h1 {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.agent-title-block p {
    font-size: 12px; color: var(--text-tertiary);
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
/* 启动后隐藏左侧输入配置区 */
.agent-input-section.hidden {
    display: none !important;
}
/* 启动后对话区展开 */
.agent-chat-log-expanded {
    flex: 1 1 auto !important;
    min-height: 180px !important;
    max-height: none !important;
}
/* 图片确认吸底按钮已迁移到顶栏 */
#msImgActionRow { display: none !important; }

/* Agent 页复用 gen-layout，中间主区域 */
#agentLayout.gen-layout {
    --drawer-w: 320px;
    position: relative;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;
    gap: 24px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.agent-main {
    flex: 1 1 auto !important;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}
/* 左侧 Agent 会话抽屉 */
#agentLayout aside.agent-session-sidebar {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    display: flex; flex-direction: column;
    gap: 10px;
}
.agent-session-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}
.agent-session-sidebar-head h3 {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin: 0;
}
.agent-session-new-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    background: var(--accent, #E8B84B); color: #fff;
    border-radius: 8px; padding: 5px 10px; font-size: 12px;
    cursor: pointer; transition: filter .15s;
}
.agent-session-new-btn:hover { filter: brightness(1.08); }
/* 左栏栏头收起按钮 */
.agent-sidebar-collapse-btn {
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    background: transparent; color: var(--text-tertiary, #8a8f9c);
    cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.agent-sidebar-collapse-btn:hover { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-primary); }
/* 左栏收起态 */
#agentLayout.gen-layout:not(.sidebar-open) aside.agent-session-sidebar {
    display: none !important;
}
/* 左栏收起后的悬浮开关（胶囊，同右栏「素材」风格） */
#agentLayout.gen-layout .sidebar-toggle {
    position: absolute; top: 12px; left: 12px; z-index: 35;
    display: none; align-items: center; gap: 6px; cursor: pointer;
    appearance: none; border: 1px solid var(--border-tertiary, rgba(255,255,255,.12));
    background: var(--bg-elevated, #fff); color: var(--text-primary);
    font-size: 13px; font-weight: 500; font-family: var(--font-sans);
    padding: 6px 14px; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#agentLayout.gen-layout .sidebar-toggle::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg,#E8B84B,#F2C14E);
}
#agentLayout.gen-layout:not(.sidebar-open) .sidebar-toggle { display: inline-flex !important; }
/* 左栏收起时，主区域不再整体让位，开关悬浮在内容上方 */
#agentLayout:not(.sidebar-open) .agent-main { padding-left: 0; }
/* 专业执行模式：强制隐藏左栏与其开关，恢复主区边距 */
#agentLayout.gen-layout.agent-pro-mode aside.agent-session-sidebar,
#agentLayout.gen-layout.agent-pro-mode .sidebar-toggle { display: none !important; }
#agentLayout.gen-layout.agent-pro-mode .agent-main { padding-left: 0 !important; }
.agent-session-list {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
}
.agent-session-list-loading,
.agent-session-list-empty {
    font-size: 12px; color: var(--text-tertiary, #8a8f9c);
    padding: 20px 4px; text-align: center;
}
.agent-session-item {
    position: relative;
    padding: 10px 34px 10px 10px; border-radius: 10px;
    cursor: pointer; transition: background .12s;
    border: 1px solid transparent;
}
.agent-session-item:hover { background: var(--bg-hover, rgba(255,255,255,.05)); }
.agent-session-item.current {
    background: var(--accent-soft, rgba(232, 184, 75,.12));
    border-color: var(--accent, rgba(232, 184, 75,.35));
}
.agent-session-item-title {
    font-size: 13px; color: var(--text-primary, #eee);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-session-item-meta {
    font-size: 11px; color: var(--text-tertiary, #7a7a8a); margin-top: 3px;
}
.agent-session-item-menu {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 5px; border: none;
    background: transparent; color: var(--text-tertiary, #7a7a8a); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.agent-session-item-menu:hover { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-secondary, #ccc); }

/* 右侧素材抽屉内容 */
.agent-right-drawer-body {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.agent-empty-assets-hint {
    font-size: 12px; color: var(--text-tertiary, #8a8f9c);
    text-align: center; padding: 10px 8px 0;
}
.agent-empty-assets-hint[style*="block"] { padding-bottom: 10px; }
/* 已选对话引用条 */
.agent-ref-strip {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--border-tertiary, rgba(255,255,255,.08));
}
.agent-ref-strip-title {
    font-size: 12px; color: var(--text-tertiary, #8a8f9c);
}
/* Agent 页资产库面板：复用生成页 .asset-* 全局样式，覆盖默认 display:none */
.agent-asset-panel { display: flex !important; flex: 1 1 auto; min-height: 0; }
.agent-asset-panel .asset-scroll { padding: 14px 4px 10px; }
.agent-asset-panel .asset-cell.picked { outline: 2px solid var(--accent, #E8B84B); }
.agent-asset-panel .asset-cell-check {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent, #E8B84B); color: #fff;
    font-size: 11px; line-height: 18px; text-align: center;
}

/* Agent 页在宽屏下锁定整页滚动，仅内部滚动 */
@media (min-width: 1201px) and (min-height: 641px) {
    body:has(#page-agent.active) { overflow: hidden; }
    .app-layout:has(#page-agent.active) {
        height: 100vh; min-height: 100vh; overflow: hidden;
    }
    .main-area:has(#page-agent.active) {
        height: calc(100vh - 52px); min-height: 0; overflow: hidden;
        padding-top: 0; padding-bottom: 0;
    }
}
/* 右侧素材抽屉在 Agent 页内固定 320px，覆盖全局 380px */
#agentLayout.gen-layout.drawer-open #agentRightDrawer.gen-gallery.gen-drawer {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden auto;
}
#agentLayout.gen-layout:not(.drawer-open) #agentRightDrawer.gen-gallery.gen-drawer {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
/* Agent 页内素材抽屉开关：用 absolute 避免 fixed 受 viewport/滚动影响 */
#agentLayout.gen-layout .drawer-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 35;
}
#agentLayout.gen-layout.drawer-open .drawer-toggle {
    display: none !important;
}
#agentLayout.gen-layout:not(.drawer-open) .drawer-toggle {
    display: inline-flex !important;
}
/* 收起右侧抽屉时，主区域不再整体让位，开关悬浮在内容上方 */
#agentLayout:not(.drawer-open) .agent-main { padding-right: 0; }

/* ================================================================
   AGENT PAGE — Chat layout (已废弃，保留兼容)
   ================================================================ */
.agent-layout {
    display: flex; flex-direction: column;
    height: calc(100vh - 220px); max-height: 700px;
}
.agent-chat {
    flex: 1; overflow-y: auto; padding: 20px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); margin-bottom: 14px;
}
.agent-welcome { text-align: center; padding: 48px 20px; }
.agent-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent); display: flex; align-items: center;
    justify-content: center; margin: 0 auto 14px; color: #fff;
    box-shadow: 0 0 0 8px var(--accent-soft);
}
.agent-welcome h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.agent-welcome p { font-size: 13px; color: var(--text-tertiary); margin-bottom: 24px; }
.agent-suggestions {
    display: flex; flex-direction: column; gap: 7px;
    max-width: 480px; margin: 0 auto;
}
.agent-suggestion {
    text-align: left; padding: 12px 16px; border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.agent-suggestion:hover {
    border-color: var(--accent); color: var(--text-primary);
    background: rgba(232, 184, 75,0.04);
}

/* Agent messages */
.agent-message { display: flex; gap: 10px; margin-bottom: 14px; }
.agent-message.user { flex-direction: row-reverse; }
.agent-avatar-small {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 12px;
}
.agent-message.user .agent-avatar-small { background: var(--accent); color: #fff; }
.agent-message.assistant .agent-avatar-small {
    background: var(--bg-overlay); color: var(--accent);
    border: 1px solid var(--border-subtle);
}
.agent-bubble {
    max-width: 70%; padding: 10px 14px; border-radius: var(--radius-md);
    font-size: 13px; line-height: 1.65; word-break: break-word;
}
.agent-message.user .agent-bubble {
    background: var(--accent); color: #fff;
    border-bottom-right-radius: 4px;
}
.agent-message.assistant .agent-bubble {
    background: var(--bg-overlay); border: 1px solid var(--border-subtle);
    color: var(--text-primary); border-bottom-left-radius: 4px;
}
.agent-bubble-actions { display: flex; gap: 6px; margin-top: 8px; }
.agent-bubble-action {
    padding: 4px 10px; border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 11px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.agent-bubble-action:hover { border-color: var(--accent); color: var(--accent); }

/* Agent input */
.agent-input-area { padding-top: 6px; }
.agent-input-box {
    display: flex; gap: 8px; background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); padding: 8px 14px;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.agent-input-box:focus-within { border-color: var(--border-focus); }
.agent-input-box textarea {
    flex: 1; background: transparent; border: none; color: var(--text-primary);
    font-size: 13px; resize: none; outline: none;
    min-height: 34px; max-height: 120px; font-family: var(--font-sans);
}
.agent-input-box textarea::placeholder { color: var(--text-disabled); }
.agent-send-btn {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    border: none; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.agent-send-btn:hover { background: var(--accent-hover); }
.agent-hint { text-align: center; font-size: 11px; color: var(--text-tertiary); margin-top: 8px; }

/* ===== Agent 聊天双栏增强 (2026-08-02) ===== */
.agent-chat-col { display: flex; flex-direction: column; }
.agent-chat-log {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  margin-bottom: 14px;
}
.agent-chat-log .agent-message { margin-bottom: 0; }

/* 初始空态：对话区折叠，给设置区留空间 */
.agent-chat-log.agent-chat-log-compact {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 0;
  padding: 0 12px;
  margin-bottom: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}
.agent-chat-log.agent-chat-log-compact:not(:empty) {
  max-height: 160px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.agent-artifact-col { display: flex; flex-direction: column; }
.agent-artifact-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.agent-artifact-header svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.agent-artifact-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  margin-bottom: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.agent-artifact-tab {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.agent-artifact-tab:hover { color: var(--text-primary); background: rgba(232, 184, 75,0.06); }
.agent-artifact-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }


/* ================================================================
   ASSETS PAGE
   ================================================================ */
.project-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.project-selector { display: flex; align-items: center; gap: 8px; }
.project-selector label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.project-selector select {
    background: var(--surface); color: var(--text-primary); border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 12px; font-size: 13px; min-width: 160px; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}
.project-selector select:focus { outline: none; border-color: var(--accent); }
.project-actions { display: flex; gap: 6px; }
.project-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 0.2s;
    background: var(--surface); color: var(--text-secondary);
}
.project-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.project-btn.btn-secondary { background: var(--accent); color: #fff; border-color: var(--accent); }
.project-btn.btn-secondary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.project-btn.btn-ghost { border-color: var(--border); }
.project-btn.btn-danger-ghost:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }
.project-btn.disabled {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #475569 !important;
    background: transparent !important;
}
.project-btn.disabled svg { stroke: #475569 !important; }

/* 项目弹出层 */
.project-actions { position: relative; }
.project-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 260px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: popoverIn 0.15s var(--ease-out);
}
@keyframes popoverIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.project-popover-title {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.project-popover-input {
    width: 100%; background: var(--bg-input);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 8px 10px; color: var(--text-primary); font-size: 12px;
    font-family: var(--font-sans); outline: none; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
}
.project-popover-input::placeholder { color: var(--text-tertiary); }
.project-popover-input:focus { border-color: var(--accent); }
.project-popover-actions {
    display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px;
}
.project-popover-btn {
    padding: 5px 12px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; cursor: pointer;
    border: 1px solid transparent; transition: all 0.15s;
}
.project-popover-btn.btn-ghost {
    background: transparent; color: var(--text-secondary); border-color: var(--border-subtle);
}
.project-popover-btn.btn-ghost:hover { background: var(--bg-overlay); color: var(--text-primary); }
.project-popover-btn.btn-primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.project-popover-btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ================================================================
   ASSETS PAGE — 资产库
   ================================================================ */

/* 页面标题 */
.assets-page-header { padding: 20px 24px 8px; }
.assets-page-header h1 {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    margin: 0; letter-spacing: -0.3px;
}

/* 顶部分类 Tab + 搜索 + 新增 */
.assets-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 24px 12px; gap: 16px; flex-wrap: wrap;
}
.assets-category-tabs {
    display: flex; align-items: center; gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 4px;
}
.actab-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 999px;
    border: none; background: transparent;
    color: var(--text-secondary); font-size: 13px;
    cursor: pointer; font-family: var(--font-sans);
    transition: all var(--duration-fast);
    white-space: nowrap;
}
.actab-btn svg { opacity: 0.6; }
.actab-btn:hover { color: var(--text-primary); }
.actab-btn.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.actab-btn.active svg { opacity: 1; }

.assets-topbar-right {
    display: flex; align-items: center; gap: 10px;
}

/* 项目选择器（内联） */
.project-selector-inline {
    display: flex; align-items: center; gap: 4px;
    position: relative;
}
.project-selector-inline select {
    padding: 6px 24px 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px; font-family: var(--font-sans);
    cursor: pointer; outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.project-btn-mini {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer; transition: all var(--duration-fast);
}
.project-btn-mini:hover { background: var(--bg-overlay); color: var(--text-primary); }
.project-btn-mini.disabled { opacity: 0.4; pointer-events: none; }

/* 新增按钮 */
.assets-btn-add {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 999px;
    border: none; background: var(--bg-elevated);
    color: var(--text-primary); font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: var(--font-sans);
    transition: all var(--duration-fast);
    white-space: nowrap;
}
.assets-btn-add:hover { background: var(--bg-overlay); transform: scale(1.02); }

/* 搜索框 */
.assets-search {
    position: relative;
}
.assets-search input {
    padding: 7px 32px 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 13px; font-family: var(--font-sans);
    width: 180px; outline: none; transition: all var(--duration-fast);
}
.assets-search input:focus {
    border-color: var(--accent);
    width: 220px;
}
.assets-search input::placeholder { color: var(--text-tertiary); }
.assets-search svg {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary); pointer-events: none;
}

/* 子筛选行 */
.assets-subbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px 16px; gap: 12px; flex-wrap: wrap;
}
.assets-sub-filters { display: flex; align-items: center; gap: 6px; }
.asub-btn {
    padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary); font-size: 12px;
    cursor: pointer; font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.asub-btn:hover { border-color: var(--accent); color: var(--accent); }
.asub-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: transparent; color: var(--text-disabled);
    border-color: var(--border-subtle);
}
.asub-btn.active {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.assets-sub-controls { display: flex; align-items: center; gap: 6px; }
.asub-control {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary); font-size: 12px;
    cursor: pointer; font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.asub-control:hover { border-color: var(--border-hover); color: var(--text-primary); }

/* 资产分类 Tab 导航 */
.assets-category-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 16px;
}
.actab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
    white-space: nowrap;
}
.actab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}
.actab-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(232, 184, 75,0.25);
}
.actab-btn svg {
    opacity: 0.7;
}
.actab-btn.active svg {
    opacity: 1;
}

/* 资产子工具栏 */
.assets-subbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.assets-subbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.assets-project-dropdown {
    position: relative;
}
.assets-project-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.assets-project-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.asub-icon-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.asub-icon-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: var(--bg-elevated);
}
.assets-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.assets-search-wrap svg {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    pointer-events: none;
}
.assets-search-input {
    padding: 6px 10px 6px 30px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-sans);
    width: 140px;
    outline: none;
    transition: all var(--duration-fast);
}
.assets-search-input:focus {
    border-color: var(--accent);
    width: 180px;
}
.assets-search-input::placeholder {
    color: var(--text-tertiary);
}

/* -------- 真人素材区域 -------- */
.assets-avatar-section {
    padding: 0 24px 24px;
    min-height: 400px;
    position: relative; overflow: hidden;
}
.assets-avatar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}
.assets-avatar-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.assets-avatar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.assets-avatar-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
}

/* 活体认证按钮 */
.btn-verify-liveness {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.btn-verify-liveness:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.btn-verify-liveness svg {
    opacity: 0.7;
}
.btn-verify-liveness:hover svg {
    opacity: 1;
}

/* 真人素材锁定状态 */
.avatar-lock-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}
.avatar-lock-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
}
.avatar-lock-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.avatar-lock-close:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}
.avatar-lock-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.avatar-lock-icon svg {
    color: var(--text-tertiary);
    opacity: 0.6;
}
.avatar-lock-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.avatar-lock-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 8px;
    max-width: 320px;
    line-height: 1.6;
}
.btn-verify-large {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-verify-large:hover {
    background: var(--accent-hover);
    color: #fff;
}
.btn-verify-large svg {
    color: #fff;
    opacity: 0.9;
}

/* 真人素材解锁后内容 */
.avatar-unlocked-content {
    min-height: 200px;
}
.assets-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

/* 资产网格 */
.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 0 24px 24px;
}
.assets-grid.view-list {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* 资产卡片 */
.asset-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--duration-fast);
    position: relative;
}
.asset-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.asset-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-elevated);
}
.asset-card-media img,
.asset-card-media video {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--duration-fast);
}
.asset-card:hover .asset-card-media img,
.asset-card:hover .asset-card-media video {
    transform: scale(1.03);
}
/* 媒体加载失败占位（与真实资产页一致：保留卡片，仅替换媒体区） */
.asset-media-error {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted, #9aa0a6);
    font-size: 13px; text-align: center; padding: 8px;
    line-height: 1.4;
}
.asset-card-duration {
    position: absolute; bottom: 8px; left: 8px;
    padding: 2px 8px; border-radius: 4px;
    background: rgba(0,0,0,0.65);
    color: #fff; font-size: 11px; font-weight: 500;
    pointer-events: none;
}
.asset-card-time {
    position: absolute; bottom: 8px; right: 8px;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(0,0,0,0.65);
    color: #fff; font-size: 11px; font-weight: 500;
    pointer-events: none;
}
.asset-card-type {
    position: absolute; top: 8px; right: 8px;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(0,0,0,0.5);
    color: #fff; font-size: 10px; font-weight: 500;
    text-transform: uppercase; pointer-events: none;
}
.asset-card-info {
    padding: 12px 14px;
}
.asset-card-name {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-card-name-row { display: flex; align-items: center; gap: 6px; }
.asset-card-name-row .asset-card-name { flex: 1; min-width: 0; }
.asset-rename-btn {
    flex: 0 0 auto; margin-left: auto;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-tertiary); font-size: 13px; line-height: 1;
    padding: 3px 5px; border-radius: 6px;
    opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.asset-card:hover .asset-rename-btn { opacity: 1; }
.asset-rename-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.asset-rename-input {
    flex: 1; min-width: 0; width: 100%;
    font-size: 13px; font-family: inherit;
    padding: 4px 6px; border-radius: 6px;
    border: 1px solid var(--accent);
    background: var(--bg-surface); color: var(--text-primary);
    outline: none;
}

/* ⑤ @角色卡调用：提示词 @ 提及下拉 */
.mention-pop {
    position: absolute; z-index: 9999; display: none;
    min-width: 240px; max-height: 280px; overflow-y: auto;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    padding: 6px;
}
.mention-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.mention-item.active, .mention-item:hover { background: var(--bg-elevated); }
.mention-thumb {
    width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
    background: var(--bg-elevated); flex: 0 0 auto;
}
.mention-name {
    font-size: 13px; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 图生视频 @ 提及：角色卡 + 资产库图片 分组下拉 */
.iv-mention-pop .mention-group-label {
    padding: 9px 8px 4px;
    font-size: 11px; font-weight: 600;
    color: var(--text-tertiary); letter-spacing: .04em;
    user-select: none;
}
.mention-pop .mention-loading, .iv-mention-pop .mention-loading {
    padding: 12px 8px; font-size: 13px;
    color: var(--text-tertiary); text-align: center;
}

/* P5（即梦式改造）：@ 引用收纳 chip 条（textarea 上方） */
.mention-chip-bar { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mention-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 3px; border-radius: 999px;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    font-size: 12px; color: var(--text-secondary); max-width: 220px;
    transition: border-color .15s ease;
}
.mention-chip:hover { border-color: var(--accent); }
.mention-chip-thumb { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; background: var(--bg-surface); }
.mention-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-chip-x {
    border: none; background: transparent; color: var(--text-tertiary);
    cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; flex: 0 0 auto;
}
.mention-chip-x:hover { color: #ff6b6b; }

/* 图生视频提示词框：拖拽外部图片高亮态 */
.img2video-prompt-wrap { position: relative; }
.img2video-prompt-wrap.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}
.img2video-drop-hint {
    position: absolute; left: 14px; bottom: 12px;
    font-size: 12px; color: var(--text-tertiary);
    pointer-events: none; opacity: 0; transition: opacity .2s;
}
.img2video-prompt-wrap.drag-over .img2video-drop-hint { opacity: 1; }
.asset-card-meta {
    font-size: 11px; color: var(--text-tertiary);
    display: flex; align-items: center; gap: 8px;
}

/* ② Phase3：资产库「设为分镜参考图」按钮（角色/产品/场景图片） */
.asset-ref-btn {
    margin: 4px 0 2px; width: 100%;
    border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-primary);
    font-size: 12px; font-weight: 600;
    padding: 6px 8px; border-radius: 8px; cursor: pointer;
    transition: .15s;
}
.asset-ref-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.asset-ref-btn.set, .asset-ref-btn:disabled {
    border-style: solid; border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); cursor: default;
}

/* 资产自动识别徽章（角色/商品/场景/风格） */
.asset-role-badge {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 9px; border-radius: 10px;
    font-size: 11px; font-weight: 600; line-height: 1.4;
    color: #fff; pointer-events: none;
    background: linear-gradient(135deg, #C9A227, #D9A93B);
    box-shadow: 0 2px 8px rgba(201, 162, 39,0.35);
    backdrop-filter: blur(4px);
}
.asset-badge-product { background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
.asset-badge-scene   { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.asset-badge-style   { background: linear-gradient(135deg, #E8B84B, #C9A227); box-shadow: 0 2px 8px rgba(232,184,75,0.3); }

/* 资产标签 chips */
.asset-card-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 2px 0 2px;
}
.asset-tag-chip {
    font-size: 10px; line-height: 1.3;
    padding: 2px 7px; border-radius: 8px;
    background: var(--bg-elevated, rgba(255,255,255,0.06));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    color: var(--text-secondary, #cbd5e1);
    white-space: nowrap;
}

/* 列表视图卡片 */
.assets-grid.view-list .asset-card {
    display: flex; align-items: center;
    padding: 10px 14px; gap: 14px;
}
.assets-grid.view-list .asset-card-media {
    width: 80px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md);
}
.assets-grid.view-list .asset-card-info {
    padding: 0; flex: 1;
}
.assets-grid.view-list .asset-card-name {
    margin-bottom: 2px;
}

/* 提示词文本卡片 */
.asset-card-prompt .asset-prompt-card-body {
    display: flex; flex-direction: column;
    padding: 16px; gap: 10px;
    min-height: 180px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.asset-prompt-icon {
    color: var(--primary);
    display: flex; align-items: center;
}
.asset-prompt-text {
    font-size: 13px; line-height: 1.6;
    color: var(--text-primary);
    word-break: break-word;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.asset-prompt-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.asset-prompt-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(201, 162, 39,0.12);
    color: var(--primary);
    white-space: nowrap;
}
.asset-card-prompt:hover .asset-prompt-card-body {
    border-color: var(--primary);
    background: rgba(201, 162, 39,0.04);
}
.asset-card-prompt .asset-card-info {
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
    margin-top: auto;
}
/* 详情弹窗中的提示词文本区域 */
.result-detail-text-media {
    width: 100%; min-height: 120px;
    display: flex; flex-direction: column;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 12px;
}
.result-detail-prompt-box {
    display: flex; gap: 12px;
    align-items: flex-start;
}
.result-detail-prompt-box p {
    font-size: 14px; line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
    white-space: pre-wrap; word-break: break-word;
    flex: 1;
}
.result-detail-prompt-icon {
    color: var(--primary);
    flex-shrink: 0; padding-top: 2px;
}

/* 空状态 */
.empty-state-full {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
    text-align: center;
}
.empty-state-full .empty-icon {
    margin-bottom: 16px;
    color: var(--text-tertiary);
}
.empty-state-full h3 {
    font-size: 15px; font-weight: 600;
    color: var(--text-secondary); margin: 0 0 6px;
}
.empty-state-full p {
    font-size: 13px; margin: 0;
}


/* ================================================================
   CANVAS PAGE — 画布创作界面
   ================================================================ */
#page-canvas {
    flex-direction: row;
    height: calc(100vh - 52px);
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: hidden;
}

/* 画布页面 active 状态 */
#page-canvas.active { display: flex; flex-direction: row; opacity: 1; }
#page-canvas .page-header { display: none; }

/* 左侧工具栏 */
.canvas-left-toolbar {
    width: 48px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    z-index: 60;
}
.clt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-sans);
}
.clt-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.clt-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.clt-divider {
    width: 24px;
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* 主工作区 */
.canvas-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.canvas-stage-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle, var(--bg-elevated) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: default;
}
.canvas-stage-area.pan-mode {
    cursor: grab;
}
.canvas-stage-area.pan-mode:active {
    cursor: grabbing;
}
.canvas-stage-area canvas {
    display: block;
}

/* 开始创作引导面板 */
.canvas-welcome-panel {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    pointer-events: auto;
}
.canvas-welcome-panel h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 32px;
}
.cw-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.cw-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    max-width: 380px;
}
.cw-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.cw-icon-agent {
    color: #f5a623;
}
.cw-option-body {
    padding-top: 2px;
}
.cw-label {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.5;
}
.cw-actions {
    display: flex;
    gap: 8px;
}
.cw-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.cw-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* 底部 AI 创作输入框 */
.canvas-bottom-bar {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 50;
    width: 720px;
    max-width: calc(100% - 80px);
}
.canvas-input-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 12px 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.canvas-input-box {
    min-height: 24px;
    max-height: 120px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    outline: none;
    margin-bottom: 10px;
}
.canvas-input-box:empty::before {
    content: attr(placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}
.canvas-input-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cia-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.cia-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.cia-btn.cia-agent {
    color: var(--accent);
}
.cia-btn.cia-agent:hover {
    background: var(--accent-soft);
}
.cia-btn.cia-at {
    padding: 5px 8px;
    font-weight: 600;
    color: var(--accent);
}
.cia-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    margin-left: auto;
    transition: all var(--duration-fast);
    font-family: var(--font-sans);
}
.cia-send:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

/* 底部缩放条 */
.canvas-zoombar {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1a1a1a;
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.cz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-sans);
}
.cz-btn:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}
.cz-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 38px;
    text-align: center;
    user-select: none;
}

/* 素材侧边栏 */
.canvas-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    transition: width var(--duration-fast), opacity var(--duration-fast);
    overflow: hidden;
}
.canvas-sidebar.collapsed {
    width: 0;
    border-left: none;
}
.csidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.csidebar-header h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.csidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
}
.csidebar-close:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.csidebar-filters {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    flex-shrink: 0;
}
.csfilter-btn {
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.csfilter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.csfilter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.csidebar-upload {
    padding: 0 14px 10px;
    flex-shrink: 0;
}
.csidebar-upload-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.csidebar-upload-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.csidebar-grid {
    flex: 1;
    padding: 0 12px 12px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: start;
}
.csidebar-grid.single-col {
    grid-template-columns: 1fr;
}
.csidebar-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 12px;
    color: var(--text-tertiary);
    font-size: 12px;
}
.csidebar-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-elevated);
    transition: all var(--duration-fast);
}
.csidebar-item:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.csidebar-item img,
.csidebar-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.csidebar-item .csitem-type {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    pointer-events: none;
}
.csidebar-add {
    padding: 10px 14px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.csidebar-url-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.csidebar-url-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Fabric Object Controls 覆盖 */
.canvas-stage-area .fabric-text-controls {
    position: fixed;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 100;
    pointer-events: auto;
}
.canvas-stage-area .fabric-text-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    transition: all var(--duration-fast);
}
.canvas-stage-area .fabric-text-controls button:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.canvas-stage-area .fabric-text-controls button.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.canvas-stage-area .fabric-text-controls input[type="color"] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 2px;
    background: transparent;
    cursor: pointer;
}
.canvas-stage-area .fabric-text-controls input[type="number"] {
    width: 42px;
    padding: 4px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
    font-family: var(--font-sans);
}
#page-canvas .agent-breadcrumb { display: none; }

/* ================================================================
   INSPIRATION PAGE — 星流AI风格
   ================================================================ */

/* Hero 区域 */
.insp-hero {
    text-align: center;
    margin-bottom: 32px;
    padding-top: 16px;
}
.hero-welcome {
    text-align: center;
    margin-bottom: 24px;
}
.hero-welcome h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hero-deco-cloud { color: var(--accent); }
.hero-deco-star { color: #f5a623; }
.hero-welcome p {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
}
.insp-hero-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: 0.02em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hero-deco-cloud { display: inline-block; vertical-align: middle; }
.hero-deco-star { display: inline-block; vertical-align: middle; }
/* Agent 内联下拉选择器（欢迎语） */
.insp-hero-agent-select {
    color: var(--accent);
    cursor: pointer;
    display: inline;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    border: none;
    border-bottom: 1.5px dashed var(--accent);
    background: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 20px 2px 0;
    margin: 0 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236C5CE7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    transition: opacity var(--duration-fast) var(--ease-out);
    min-width: auto;
}
.insp-hero-agent-select:hover {
    opacity: 0.7;
}
.insp-hero-agent-select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 13px;
}

/* 输入框 */
.insp-input-box {
    max-width: 720px;
    margin: 0 auto 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.insp-input-box:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.insp-input-upload {
    flex-shrink: 0;
}
.insp-upload-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-default);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.insp-upload-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.insp-input-box textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    min-height: 56px;
    font-family: var(--font-sans);
}
.insp-input-box textarea::placeholder {
    color: var(--text-disabled);
}
.insp-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out);
    margin-top: auto;
}
.insp-send-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* 工具栏 */
.insp-toolbar {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.insp-toolbar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.insp-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.insp-tool-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.insp-tool-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* 工具栏下拉选择器 */
.insp-tool-select {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 28px 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239191a1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 90px;
}
.insp-tool-select:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.insp-tool-select:focus {
    border-color: var(--border-focus);
    color: var(--text-primary);
}
.insp-tool-select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px;
    padding: 6px 10px;
}

/* 模式选择自定义下拉 */
.mode-dropdown {
    position: relative;
    display: inline-block;
}
.mode-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 28px 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    outline: none;
    font-family: var(--font-sans);
    line-height: 1;
}
.mode-dropdown-trigger:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.mode-dropdown-trigger:focus,
.mode-dropdown.open .mode-dropdown-trigger {
    border-color: var(--border-focus);
    color: var(--text-primary);
}
.mode-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.mode-dropdown-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}
.mode-dropdown-label {
    line-height: 1;
}
.mode-dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    transition: transform var(--duration-fast) var(--ease-out);
    pointer-events: none;
}
.mode-dropdown.open .mode-dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}
.mode-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 1px;
    animation: dropdownIn 0.12s var(--ease-out);
}
.mode-dropdown.open .mode-dropdown-menu {
    display: flex;
}
@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mode-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    line-height: 1;
}
.mode-dropdown-item:hover,
.mode-dropdown-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.mode-dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.mode-dropdown-item-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}
.mode-dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 3px 6px;
    flex-shrink: 0;
}

/* 快捷功能 */
.insp-quick-actions {
    display: flex;
    gap: 14px;
    margin-bottom: 36px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.insp-quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.insp-quick-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
    transform: translateY(-1px);
}
.insp-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.insp-quick-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.insp-quick-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.insp-quick-desc {
    font-size: 11px;
    color: var(--text-tertiary);
}
.insp-new-badge {
    display: inline-flex;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--success);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

/* 发现区 */
.insp-discover-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0;
}
.insp-tab {
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.insp-tab:hover {
    color: var(--text-secondary);
}
.insp-tab:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: transparent; color: var(--text-disabled);
}
.insp-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}
.insp-tab-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 14px;
    color: var(--text-tertiary);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}
.insp-tab-search:hover {
    color: var(--text-secondary);
}

.insp-discover-content {
    display: none;
}
.insp-discover-content.active {
    display: block;
}

/* 瀑布流网格 */
.insp-discover-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.insp-discover-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    transition: all var(--duration-fast) var(--ease-out);
    background: var(--bg-surface);
    position: relative;
}
.insp-discover-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.insp-card-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.insp-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.insp-card-img-wrap .insp-card-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-tertiary);
}
.insp-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    background: var(--bg-surface);
}
.insp-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    word-break: break-word;
}
.insp-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    font-size: 11px;
    font-weight: 500;
    width: fit-content;
    margin-top: auto;
    color: var(--accent);
    white-space: nowrap;
}
.insp-card-tag::before {
    content: '文生图';
    color: var(--text-tertiary);
    margin-right: 2px;
}
.insp-card-tag::after {
    content: ' · ';
    color: var(--text-tertiary);
}
/* 视频标签覆盖 */
.insp-card-tag[data-type="video"]::before { content: '文生视频'; }
.insp-card-tag[data-type="oneshot"]::before { content: '一键成片'; }
.insp-card-tag[data-type="img2video"]::before { content: '图生视频'; }
.insp-card-large .insp-card-img-wrap { aspect-ratio: 4 / 3; }

/* 响应式 */
@media (max-width: 1200px) {
    .insp-discover-grid { grid-template-columns: repeat(3, 1fr); }
    .insp-card-large { grid-column: span 2; grid-row: span 2; }
    .insp-quick-actions { gap: 10px; }
}
@media (max-width: 768px) {
    .insp-discover-grid { grid-template-columns: repeat(2, 1fr); }
    .insp-card-large { grid-column: span 2; grid-row: span 1; }
    .insp-hero-title { font-size: 22px; }
    .insp-quick-card { padding: 10px 12px; }
    .insp-quick-icon { width: 36px; height: 36px; }
    .insp-quick-name { font-size: 12px; }
}


/* ================================================================
   PROMPT OPTIMIZER
   ================================================================ */
.optimize-container { max-width: 860px; margin: 0 auto; }
.optimize-mode-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.opt-mode-tab {
    padding: 7px 18px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: transparent;
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.opt-mode-tab.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.opt-mode-tab:hover:not(.active) {
    border-color: var(--accent); color: var(--accent);
}
.optimize-input-section {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px;
    display: flex; flex-direction: column;
}
.opt-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-primary); margin-bottom: 10px;
}
.opt-textarea {
    width: 100%; display: block;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 14px;
    font-size: 13px; color: var(--text-primary);
    background: var(--bg-input); resize: vertical;
    min-height: 120px; line-height: 1.7;
    font-family: var(--font-sans);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.opt-textarea:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.opt-textarea::placeholder { color: var(--text-disabled); }
.opt-input-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px;
}
.opt-cost { font-size: 11px; color: var(--text-tertiary); margin-right: 12px; }
.opt-sparkle { font-size: 13px; }

.optimize-result-section {
    background: var(--bg-surface); border: 1px solid var(--accent);
    border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px;
}
.opt-result-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.opt-result-header h3 { font-size: 15px; color: var(--accent); margin: 0; }
.opt-result-actions { display: flex; gap: 6px; }
.opt-compare {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
    align-items: start; margin-bottom: 16px;
}
.opt-compare-arrow { font-size: 22px; color: var(--accent); align-self: center; }
.opt-compare-box {
    background: var(--bg-input); border-radius: var(--radius-md);
    padding: 14px; border: 1px solid var(--border-subtle);
}
.opt-compare-box.opt-after {
    border-color: var(--accent); border-width: 1px;
    background: rgba(232, 184, 75,0.03);
}
.opt-compare-label {
    font-size: 10px; font-weight: 600; color: var(--text-tertiary);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.opt-compare-text {
    font-size: 13px; line-height: 1.8; color: var(--text-primary);
    word-break: break-word;
}
.opt-improvements {
    display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}
.opt-improve-label {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap;
}
.opt-improv-tag {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    background: var(--accent-soft); color: var(--accent); font-size: 11px;
}
.opt-tips { margin-top: 36px; }
.opt-tips h4 { font-size: 14px; margin-bottom: 16px; color: var(--text-primary); }
.opt-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.opt-tip-card {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 18px 14px; text-align: center;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.opt-tip-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.opt-tip-icon { font-size: 26px; display: block; margin-bottom: 8px; }
.opt-tip-title {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-primary); margin-bottom: 3px;
}
.opt-tip-desc { display: block; font-size: 11px; color: var(--text-tertiary); }


/* ================================================================
   VIDEO REVERSE (反推)
   ================================================================ */
.reverse-layout { display: grid; grid-template-columns: minmax(520px, 1.6fr) 1fr; gap: 16px; align-items:stretch; }
/* 大屏 / 超大屏：间距随屏加大，避免两栏贴太紧 */
@media (min-width: 1700px) { .reverse-layout { gap: 28px; } }
@media (min-width: 2200px) { .reverse-layout { gap: 40px; } }
.reverse-upload-section { display: flex; flex-direction: column; gap: 14px; min-width:0; }
.reverse-upload-area {
    flex:1; background:var(--bg-surface);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-xl);
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:36px 28px; min-height:360px;
    cursor:pointer; position:relative; overflow:hidden;
    transition:all var(--duration-fast) var(--ease-out);
}
.reverse-upload-area.has-preview {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.reverse-upload-area::before {
    content:''; position:absolute; inset:0; border-radius:var(--radius-xl);
    background:radial-gradient(50% 50% at 50% 50%, var(--accent-soft) 0%, transparent 70%);
    opacity:0; transition:opacity var(--duration-normal) var(--ease-out); pointer-events:none;
}
.reverse-upload-area:hover, .reverse-upload-area.dragover {
    border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.reverse-upload-area:hover::before, .reverse-upload-area.dragover::before { opacity:1; }
.reverse-upload-area.dragover { border-style:solid; background:var(--accent-soft); }

.reverse-upload-content { display:flex; flex-direction:column; align-items:center; gap:14px; position:relative; z-index:1; width:100%; box-sizing:border-box; }
.reverse-upload-content[style*="none"] { display:none !important; }
.reverse-link-panel { display:none; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:1; width:100%; height:100%; box-sizing:border-box; }
.reverse-link-panel[style*="flex"], .reverse-link-panel:not([style*="none"]) { display:flex !important; }
.reverse-upload-ring {
    width:72px; height:72px; border-radius:50%;
    background:var(--bg-elevated); border:1px solid var(--border-subtle);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-tertiary); transition:all var(--duration-fast) var(--ease-out);
}
.reverse-upload-area:hover .reverse-upload-ring {
    border-color:var(--accent); color:var(--accent);
    box-shadow:0 0 20px var(--accent-soft);
}
.reverse-upload-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.reverse-upload-hint { font-size:13px; color:var(--text-tertiary); }
.reverse-upload-formats {
    font-size:11px; color:var(--text-disabled);
    padding:4px 14px; background:var(--bg-elevated);
    border-radius:20px; border:1px solid var(--border-subtle);
}
.reverse-upload-divider {
    display:flex; align-items:center; gap:10px;
    width:100%; max-width:260px; margin:10px 0 6px;
    color:var(--text-disabled); font-size:12px;
}
.reverse-upload-divider::before,
.reverse-upload-divider::after {
    content:''; flex:1; height:1px; background:var(--border-subtle);
}

/* 标签切换 */
.reverse-tabs {
    display:flex; gap:4px;
    background:var(--bg-elevated);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    padding:4px;
}
.reverse-tab {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 14px; border-radius:var(--radius-md); border:none;
    background:transparent; color:var(--text-secondary); font-size:13px; font-weight:500;
    cursor:pointer; transition:all var(--duration-fast); font-family:var(--font-sans);
}
.reverse-tab:hover { color:var(--text-primary); }
.reverse-tab.active {
    background:var(--bg-surface); color:var(--accent);
    box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
.reverse-tab svg { flex-shrink:0; }

/* 媒体类型切换（视频 / 图片） */
.reverse-media-tabs {
    display:flex; gap:8px; margin-bottom:16px;
}
.reverse-media-tab {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 16px; border-radius:var(--radius-lg);
    border:1px solid var(--border-subtle); background:var(--bg-surface);
    color:var(--text-secondary); font-size:14px; font-weight:600; cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out); font-family:var(--font-sans);
}
.reverse-media-tab:hover { color:var(--text-primary); border-color:var(--accent); }
.reverse-media-tab.active {
    background:var(--accent); color:#fff; border-color:var(--accent);
    box-shadow:0 2px 12px var(--accent-soft);
}
.reverse-media-tab svg { flex-shrink:0; }
.reverse-media-panel { display:flex; flex-direction:column; gap:16px; }

/* 链接面板 */
.reverse-link-panel {
    display:none; flex-direction:column; align-items:center; justify-content:center;
    position:relative; z-index:1; width:100%; height:100%; box-sizing:border-box;
}
.reverse-link-panel[style*="flex"], .reverse-link-panel:not([style*="none"]) {
    display:flex !important;
}
.reverse-link-panel-inner {
    display:flex; flex-direction:column; align-items:center; gap:14px;
    width:100%; max-width:340px; padding:20px;
}
.reverse-link-icon {
    width:56px; height:56px; border-radius:50%;
    background:var(--bg-elevated); border:1px solid var(--border-subtle);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
}
.reverse-link-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.reverse-link-hint { font-size:12px; color:var(--text-tertiary); margin-top:-6px; }
.reverse-link-platforms {
    display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
}
.platform-tag {
    font-size:11px; color:var(--text-disabled);
    padding:3px 10px; border-radius:12px;
    background:var(--bg-elevated); border:1px solid var(--border-subtle);
}

.reverse-link-input-wrap {
    display:flex; gap:8px; width:100%; max-width:100%;
}
.reverse-link-input {
    flex:1; min-width:0; padding:10px 14px; border-radius:var(--radius-md);
    border:1px solid var(--border-subtle); background:var(--bg-elevated);
    color:var(--text-primary); font-size:13px; outline:none;
    transition:border-color var(--duration-fast);
}
.reverse-link-input:focus { border-color:var(--accent); }
.reverse-link-input::placeholder { color:var(--text-disabled); }
.reverse-link-btn {
    padding:10px 16px; border-radius:var(--radius-md); border:none;
    background:var(--accent); color:#fff; font-size:13px; font-weight:600;
    cursor:pointer; white-space:nowrap; transition:all var(--duration-fast);
    font-family:var(--font-sans); flex-shrink:0;
}
.reverse-link-btn:hover:not(:disabled) { filter:brightness(1.1); }
.reverse-link-btn:disabled { opacity:0.6; cursor:not-allowed; background: var(--bg-elevated); color: var(--text-disabled); }

.reverse-upload-preview { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; box-sizing:border-box; }
.reverse-upload-preview video {
    width:100%; max-height:280px; border-radius:var(--radius-md);
    background:#000; border:1px solid var(--border-subtle); display:block; object-fit:contain;
}
.reverse-upload-preview img {
    width:100%; max-height:280px; border-radius:var(--radius-md);
    background:#000; border:1px solid var(--border-subtle); display:block; object-fit:contain;
}
.reverse-preview-info { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--text-secondary); }
.reverse-file-name { font-weight:500; color:var(--text-primary); max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reverse-file-size { color:var(--text-tertiary); flex-shrink:0; }

.btn-reverse-analyze {
    width:100%; padding:14px 20px; border-radius:var(--radius-lg); border:none;
    background:var(--accent); color:#fff;
    font-size:14px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition:all var(--duration-fast) var(--ease-out);
    box-shadow:0 2px 12px var(--accent-soft); font-family:var(--font-sans);
    white-space:nowrap;
}
.btn-reverse-analyze:hover:not(:disabled) {
    transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-soft); filter:brightness(1.1);
}
.btn-reverse-analyze:active:not(:disabled) { transform:translateY(0); }
.btn-reverse-analyze:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; background: var(--bg-elevated); color: var(--text-disabled); }
.btn-reverse-analyze .btn-reverse-main { font-size:15px; font-weight:700; }
.btn-reverse-analyze .btn-reverse-sub {
    display:inline-flex; align-items:center; gap:4px;
    font-size:12px; font-weight:500; opacity:0.85;
    background:rgba(255,255,255,0.15); padding:3px 10px; border-radius:12px;
}
.btn-reverse-analyze .credit-cost {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.25); font-size:11px; font-weight:700;
}

.reverse-analyze-row {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
/* 2026-09-04 反推按钮结合进度态：
   - [data-state="idle"]    显示 idle 按钮，隐藏 running 容器
   - [data-state="running"] 显示 running 容器（含进度环 + 状态 + 计时 + 停止按钮），隐藏 idle 按钮
*/
.btn-reverse-analyze-wrap {
    position:relative; display:inline-flex; align-items:center;
    border-radius:var(--radius-md); overflow:visible;
    transition:background .2s, border-color .2s;
}
.btn-reverse-analyze-wrap[data-state="running"] {
    background:rgba(234,179,8,0.08); border:1px solid rgba(234,179,8,0.3);
    padding:4px 4px 4px 10px;
}
.btn-reverse-analyze-wrap[data-state="idle"] .btn-reverse-running { display:none !important; }
.btn-reverse-analyze-wrap[data-state="running"] .btn-reverse-idle { display:none !important; }

.btn-reverse-analyze-sm {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 18px; border-radius:var(--radius-md); border:none;
    background:var(--accent); color:#fff; font-size:13px; font-weight:600;
    cursor:pointer; transition:all var(--duration-fast) var(--ease-out);
    font-family:var(--font-sans); white-space:nowrap;
    box-shadow:0 1px 8px var(--accent-soft);
}
.btn-reverse-analyze-sm:hover:not(:disabled) {
    filter:brightness(1.1); box-shadow:0 2px 12px var(--accent-soft);
}
.btn-reverse-analyze-sm:disabled {
    opacity:0.4; cursor:not-allowed; box-shadow:none;
    background:var(--bg-elevated); color:var(--text-disabled);
}

/* running 态容器 */
.btn-reverse-running {
    display:inline-flex; align-items:center; gap:10px; min-width:230px;
}
.btn-reverse-progress { position:relative; width:22px; height:22px; flex-shrink:0; }
.btn-reverse-ring { transform:rotate(-90deg); overflow:visible; }
.btn-reverse-ring-track {
    fill:none; stroke:rgba(234,179,8,0.18); stroke-width:2.5;
}
.btn-reverse-ring-bar {
    fill:none; stroke:#fbbf24; stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray:62.83; /* 2π·r, r=10 */
    stroke-dashoffset:62.83;
    transition:stroke-dashoffset .45s ease;
    transform-origin:12px 12px;
    animation:btn-reverse-ring-rotate 1.6s linear infinite;
}
@keyframes btn-reverse-ring-rotate {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}
.btn-reverse-info { display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0; }
.btn-reverse-info-status {
    font-size:13px; color:#fbbf24; font-weight:600; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}
.btn-reverse-info-timer { font-size:11px; color:rgba(251,191,36,0.78); margin-top:2px; }
.btn-reverse-stop {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; flex-shrink:0;
    border:1px solid rgba(251,191,36,0.35); background:rgba(239,68,68,0.12);
    color:#f87171; border-radius:8px; cursor:pointer;
    transition:all .15s var(--ease-out);
}
.btn-reverse-stop:hover {
    background:rgba(239,68,68,0.22); border-color:#f87171; color:#fff;
}
.btn-reverse-stop:active { transform:scale(0.94); }
.reverse-analyze-note {
    font-size:12px; color:var(--text-tertiary);
    display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.reverse-analyze-note .credit-cost {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--accent-soft); color:var(--accent);
    font-size:11px; font-weight:700;
}

.reverse-result-section {
    flex:1; background:var(--bg-surface); border:1px solid var(--border-subtle);
    border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center;
    min-height:340px; overflow-y:auto;
}
.reverse-result-empty { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 32px; }
.reverse-empty-visual { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.reverse-empty-ring {
    width:60px; height:60px; border-radius:50%;
    background:var(--bg-elevated); border:1px solid var(--border-subtle);
    display:flex; align-items:center; justify-content:center; color:var(--text-tertiary);
}
.reverse-empty-ring.ring-dim { width:48px; height:48px; opacity:0.5; }
.reverse-empty-divider {
    width:32px; height:1px;
    background:linear-gradient(to right, transparent, var(--border-subtle), transparent);
}
.reverse-empty-title { font-size:15px; font-weight:600; color:var(--text-primary); margin:0; }
.reverse-empty-desc { font-size:13px; color:var(--text-tertiary); line-height:1.7; margin:0; }

.reverse-result-content { width:100%; padding:24px; }
.reverse-result-content h4 {
    font-size:14px; font-weight:600; color:var(--text-primary);
    margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.reverse-result-content h4::before {
    content:''; display:inline-block; width:3px; height:16px; border-radius:2px; background:var(--accent);
}
.reverse-prompt-box {
    background:var(--bg-input); border:1px solid var(--border-subtle);
    border-radius:var(--radius-md); padding:16px; margin-bottom:14px;
    font-size:13px; line-height:1.8; color:var(--text-primary); white-space:pre-wrap;
}
/* 2026-09-03：分段式反推提示词卡片——按 ## 小节拆卡片，模仿原 prompt 模板的可读性 */
.rev-prompt-section {
    background:var(--bg-input); border:1px solid var(--border-subtle);
    border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px;
}
.rev-prompt-section + .rev-prompt-section { margin-top:-2px; }
.rev-prompt-section-title {
    font-size:13px; font-weight:600; color:var(--accent);
    letter-spacing:.02em; margin-bottom:6px;
    display:flex; align-items:center; gap:6px;
}
.rev-prompt-section-title::before {
    content:''; display:inline-block; width:3px; height:14px;
    background:var(--accent); border-radius:2px;
}
.rev-prompt-section-body {
    font-size:13px; line-height:1.85; color:var(--text-primary);
    white-space:pre-wrap; word-break:break-word;
}
.reverse-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.reverse-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:5px 14px; border-radius:20px;
    background:var(--bg-elevated); color:var(--text-secondary);
    border:1px solid var(--border-subtle); font-size:12px; font-weight:500;
    transition:all var(--duration-fast) var(--ease-out);
}
.reverse-tag::before { content:'#'; color:var(--accent); font-size:10px; opacity:0.7; }
.reverse-tag:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

.reverse-meta-row {
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.reverse-meta-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 12px; border-radius:20px;
    background:rgba(var(--accent-rgb,99,102,241),0.08); color:var(--accent);
    border:1px solid rgba(var(--accent-rgb,99,102,241),0.2);
    font-size:12px; font-weight:500;
}
.reverse-negative {
    background:var(--bg-elevated); border:1px solid var(--border-subtle);
    border-radius:var(--radius-md); padding:12px 14px;
    font-size:12px; line-height:1.7; color:var(--text-secondary);
    margin-bottom:14px;
}
.reverse-negative span { color:var(--text-primary); font-weight:600; margin-right:6px; }

.reverse-actions { display:flex; gap:10px; flex-wrap:wrap; }
.reverse-actions .btn-copy-rev {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 20px; border-radius:var(--radius-md);
    font-size:13px; font-weight:500; cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out);
    font-family:var(--font-sans);
    background:var(--bg-elevated); color:var(--text-secondary);
    border:1px solid var(--border-subtle);
}
.reverse-actions .btn-copy-rev:hover { background:var(--bg-overlay); color:var(--text-primary); border-color:var(--border-hover); }
.reverse-actions .btn-use-rev {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 20px; border-radius:var(--radius-md);
    font-size:13px; font-weight:500; cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out);
    font-family:var(--font-sans);
    background:var(--accent); color:#fff; border:none;
    box-shadow:0 1px 6px var(--accent-soft);
}
.reverse-actions .btn-use-rev:hover { filter:brightness(1.1); box-shadow:0 2px 12px var(--accent-soft); transform:translateY(-1px); }
.reverse-actions .btn-dl-rev {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 20px; border-radius:var(--radius-md);
    font-size:13px; font-weight:500; cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out);
    font-family:var(--font-sans);
    background:transparent; color:var(--accent);
    border:1px solid rgba(232, 184, 75,.4);
}
.reverse-actions .btn-dl-rev:hover { background:rgba(232, 184, 75,.1); border-color:var(--accent); }

/* 2026-08-25：反推结构化展示（Seedream 图片字段 / Seedance 视频分镜） */
.reverse-struct { margin-bottom:16px; }
.rev-struct-title {
    font-size:13px; font-weight:600; color:var(--text-primary);
    margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.rev-struct-title::before { content:''; width:3px; height:14px; border-radius:2px; background:var(--accent); }
.rev-field {
    display:flex; gap:8px; padding:6px 0;
    border-bottom:1px dashed var(--border-subtle);
    font-size:12px; line-height:1.5;
}
.rev-field:last-child { border-bottom:none; }
.rev-field-label { flex-shrink:0; min-width:76px; color:var(--text-tertiary); font-weight:500; }
.rev-field-val { color:var(--text-secondary); }
.rev-shot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-bottom:12px; }
.rev-shot-card {
    background:var(--bg-elevated); border:1px solid var(--border-subtle);
    border-radius:10px; padding:10px 12px;
}
.rev-shot-head {
    font-size:12px; font-weight:600; color:var(--accent);
    margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.rev-shot-head::before { content:'🎬'; font-size:11px; }
.rev-shot-item { display:flex; gap:6px; font-size:11px; line-height:1.5; padding:2px 0; }
.rev-shot-label { flex-shrink:0; min-width:60px; color:var(--text-tertiary); }
.rev-shot-val { color:var(--text-secondary); }
.rev-shot-extra { margin-top:4px; border-top:1px dashed var(--border-subtle); padding-top:6px; }

.reverse-tips-card {
    margin-top:24px; padding:20px 24px;
    background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
}
.reverse-tips-title { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:14px; }
.reverse-tips-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.reverse-tip-item { display:flex; gap:10px; align-items:flex-start; }
.reverse-tip-num {
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:var(--bg-elevated); color:var(--text-tertiary);
    font-size:11px; font-weight:700; border:1px solid var(--border-subtle);
}
.reverse-tip-item strong { display:block; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.reverse-tip-item p { font-size:11px; color:var(--text-tertiary); line-height:1.5; margin:0; }


/* ================================================================
   OVERLAY — Generating floating panel
   ================================================================ */
.gen-float-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: genFloatSlideIn 0.4s var(--ease-out);
    transition: all 0.3s var(--ease-out);
}
@keyframes genFloatSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.gen-float-panel.collapsed {
    width: auto;
    min-width: 220px;
}
.gen-float-panel.collapsed .gen-float-body {
    display: none;
}
.gen-float-panel.collapsed .gen-float-toggle svg {
    transform: rotate(180deg);
}
.gen-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}
.gen-float-header:hover {
    background: var(--bg-overlay);
}
.gen-float-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.gen-float-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: genFloatPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes genFloatPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}
.gen-float-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gen-float-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gen-float-timer {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-light);
    font-variant-numeric: tabular-nums;
}
.gen-float-cost {
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--bg-overlay);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.gen-float-toggle {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.gen-float-toggle:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}
.gen-float-toggle svg {
    transition: transform 0.3s var(--ease-out);
}
.gen-float-body {
    padding: 0 16px 14px;
    border-top: 1px solid var(--border-subtle);
}
.gen-float-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 8px;
}
.gen-float-progress-track {
    flex: 1;
    height: 4px;
    background: var(--bg-overlay);
    border-radius: 2px;
    overflow: hidden;
}
.gen-float-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 2px;
    transition: width 0.6s var(--ease-out);
}
.gen-float-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gen-float-subtitle {
    font-size: 11px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.5;
}
/* 多任务列表 */
.gen-task-list {
    max-height: 140px;
    overflow-y: auto;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gen-task-item {
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s var(--ease-out);
}
.gen-task-item.completed { border-left: 3px solid var(--success); }
.gen-task-item.failed { border-left: 3px solid var(--danger); }
.gen-task-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.gen-task-item-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.gen-task-item-status {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.gen-task-item-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gen-task-item-progress-track {
    flex: 1;
    height: 3px;
    background: var(--bg-base);
    border-radius: 2px;
    overflow: hidden;
}
.gen-task-item-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 2px;
    transition: width 0.6s var(--ease-out);
}
.gen-task-item-progress-bar.success { background: var(--success); }
.gen-task-item-progress-bar.error { background: var(--danger); }
.gen-task-item-progress-text {
    font-size: 10px;
    color: var(--text-tertiary);
    min-width: 24px;
    text-align: right;
}
.gen-task-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: rgba(239,68,68,0.15);
    color: var(--danger);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
}
.gen-task-cancel-btn:hover {
    background: var(--danger);
    color: #fff;
}

/* 生成中浮窗 — 右下角固定，不遮挡操作 */
.generating-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    animation: genFloatSlideIn 0.3s var(--ease-out);
}
.generating-overlay .generating-modal {
    pointer-events: auto;
}
.generating-overlay.collapsed {
    padding: 0;
}
.generating-overlay.collapsed .generating-modal {
    width: auto;
    min-width: 180px;
    padding: 0;
    animation: genFloatSlideIn 0.3s var(--ease-out);
}
/* 最小化时：只保留 header，隐藏所有主体内容 */
.generating-overlay.collapsed .gen-animation,
.generating-overlay.collapsed .gen-title,
.generating-overlay.collapsed .gen-subtitle,
.generating-overlay.collapsed .gen-progress,
.generating-overlay.collapsed .gen-timer-wrap,
.generating-overlay.collapsed .gen-task-list,
.generating-overlay.collapsed .gen-comfort-text,
.generating-overlay.collapsed #generatingCost {
    display: none;
}
/* 最小化时 header 更紧凑 */
.generating-overlay.collapsed .gen-float-header {
    padding: 8px 12px;
    border-radius: var(--radius-xl);
}
/* 最小化时切换按钮旋转180° 表示"展开" */
.generating-overlay.collapsed .gen-float-toggle svg {
    transform: rotate(180deg);
}
.generating-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl, 0 8px 32px rgba(0,0,0,0.35));
    padding: 16px 20px;
    max-width: 280px; width: 90%;
    text-align: center;
    animation: scaleIn 0.35s var(--ease-out);
}
@keyframes scaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.gen-animation {
    position: relative;
    width: 40px; height: 40px;
    margin: 0 auto 10px;
}
.gen-ring {
    position: absolute; inset: 0;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
.gen-ring-2 {
    inset: 6px;
    border-top-color: var(--info, #C9A227);
    animation-duration: 1.4s;
    animation-direction: reverse;
}
.gen-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.gen-icon svg {
    width: 20px; height: 20px;
}
.gen-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.gen-subtitle {
    font-size: 11px; color: var(--text-tertiary);
    margin: 0 0 2px;
    line-height: 1.4;
}
.gen-progress {
    margin: 10px 0 4px;
    position: relative;
    height: 4px;
    background: var(--bg-overlay, rgba(255,255,255,0.06));
    border-radius: 2px;
    overflow: hidden;
}
.gen-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--info, #C9A227));
    border-radius: 2px;
    transition: width 0.6s var(--ease-out);
}
.gen-progress-text {
    display: block;
    text-align: right;
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 3px;
}
.gen-timer-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; margin: 6px 0 4px;
    color: var(--text-tertiary);
}
.gen-timer-text {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: 600;
}
.gen-comfort-text {
    font-size: 10px; color: var(--text-tertiary);
    margin: 4px 0 0;
    opacity: 0.6;
}

/* API 并发通道状态面板 */
.concurrency-status {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--surface-secondary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}
.concurr-channel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.concurr-channel-icon { font-size: 13px; }
.concurr-channel-name { flex: 1; min-width: 80px; }
.concurr-channel-nums {
    font-weight: 600;
    font-size: 11px;
    color: var(--text-primary);
    min-width: 28px;
    text-align: right;
}
.concurr-busy {
    color: var(--danger);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.1);
}
.concurr-channel-bar-track {
    width: 100%;
    flex-basis: 100%;
    height: 3px;
    background: var(--border-subtle);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.concurr-channel-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s var(--ease-out);
}
.concurr-channel-bar.concurr-ok { background: var(--success); }
.concurr-channel-bar.concurr-high { background: var(--warning, #f59e0b); }
.concurr-channel-bar.concurr-full { background: var(--danger); }

/* 浮动并发指示器 */
.concurrency-indicator {
    position: fixed;
    right: 16px;
    top: 72px;
    z-index: 998;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
    transition: all 0.3s var(--ease-out);
}
.concurrency-indicator.ok { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.concurrency-indicator.congested { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.concurrency-indicator.busy { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.gen-task-count {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* ================================================================
   AUTH DROPDOWN — 登录下拉面板
   ================================================================ */
.auth-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.auth-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
    z-index: 1100;
    animation: dropdownSlideIn 0.2s ease;
    overflow: hidden;
}

@keyframes dropdownSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.auth-dropdown-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.auth-dropdown-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.auth-dropdown-close:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}

.auth-dropdown-body {
    padding: 16px 18px;
}

.auth-dropdown .form-group {
    margin-bottom: 12px;
}

.auth-dropdown .form-group label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    font-weight: 500;
}

.auth-dropdown .form-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.15s;
    outline: none;
    font-family: var(--font-sans);
}

.auth-dropdown .form-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-dropdown .btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    font-family: var(--font-sans);
}

.auth-dropdown .btn-primary {
    background: var(--accent);
    color: #fff;
}

.auth-dropdown .btn-primary:hover {
    background: var(--accent-hover);
}

.auth-dropdown .auth-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.auth-dropdown .auth-actions .btn {
    flex: 1;
}

.auth-dropdown .btn-outline {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.auth-dropdown .btn-outline:hover {
    background: var(--bg-overlay);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.auth-dropdown .auth-link {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.auth-dropdown .auth-link a {
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.auth-dropdown .auth-link a:hover {
    text-decoration: underline;
}

.auth-dropdown .error-msg {
    color: #ef4444;
    font-size: 11px;
    margin-top: 3px;
    display: none;
}

.auth-dropdown .code-row {
    display: flex;
    gap: 8px;
}

.auth-dropdown .code-row .form-input {
    flex: 1;
}

.auth-dropdown .code-row .btn-primary {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ================================================================
   MODAL — Generic
   ================================================================ */

/* 用户菜单弹窗 */
.user-menu-pop {
    position: fixed; z-index: 2100;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    min-width: 140px; padding: 4px;
    animation: popoverIn 0.12s var(--ease-out);
}
.user-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    font-size: 12px; color: var(--text-secondary); cursor: pointer;
    transition: all 0.12s;
}
.user-menu-item:hover { background: var(--bg-overlay); color: var(--text-primary); }

/* ================================================================
   ASSET PICKER MODAL
   ================================================================ */
.modal-asset-picker {
    width: min(720px, 95vw) !important;
    max-height: 80vh !important;
}
.modal-asset-picker .modal-body {
    display: flex; flex-direction: column;
    padding: 16px 20px 20px; gap: 0; overflow: hidden;
}
.asset-picker-filters {
    display: flex; gap: 8px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle); margin-bottom: 12px;
    flex-wrap: wrap;
}
.asset-picker-filter {
    padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-secondary); font-size: 12px;
    cursor: pointer; transition: all var(--duration-fast); font-family: var(--font-sans);
}
.asset-picker-filter:hover { border-color: var(--border-focus); color: var(--text-primary); }
.asset-picker-filter.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.asset-picker-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    overflow-y: auto; max-height: 360px; padding: 4px 2px;
}
.asset-picker-item {
    border-radius: var(--radius-md); border: 2px solid var(--border-subtle);
    overflow: hidden; cursor: pointer; transition: all var(--duration-fast);
    background: var(--bg-elevated);
    min-height: 120px; /* 防止 .asset-picker-thumb 的 aspect-ratio 在 grid auto 行 max-content 阶段塌缩，导致缩略图被裁成条状 */
}
.asset-picker-item:hover { border-color: var(--border-focus); transform: translateY(-1px); }
.asset-picker-item.selected {
    border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb,99,102,241), 0.3);
}
.asset-picker-thumb {
    aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
    background: var(--bg-input); overflow: hidden; color: var(--text-disabled);
}
.asset-picker-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.asset-picker-name {
    padding: 6px 8px; font-size: 11px; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-picker-type {
    padding: 0 8px 6px; font-size: 10px; color: var(--text-disabled);
    text-transform: uppercase;
}
.asset-picker-empty {
    grid-column: 1/-1; text-align: center; padding: 40px 20px;
    color: var(--text-disabled); font-size: 13px;
}
.asset-picker-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--border-subtle); margin-top: 12px;
}
.asset-picker-selected-info {
    font-size: 12px; color: var(--text-secondary);
}
.asset-picker-confirm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border-radius: 50%; border: none;
    background: var(--accent); color: #fff;
    cursor: pointer; transition: all var(--duration-fast); font-family: var(--font-sans);
    flex-shrink: 0;
}
.asset-picker-confirm-btn:hover:not(:disabled) { filter: brightness(1.1); }
.asset-picker-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-elevated); color: var(--text-disabled); }

/* P2: 资产库改为右侧抽屉（即梦式，不打断主创作流，仅作用于 #assetPickerModal） */
#assetPickerModal.modal-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    padding: 0;
    justify-content: flex-end !important;
    align-items: stretch !important;
}
#assetPickerModal .modal-dialog.modal-asset-picker {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: min(440px, 92vw) !important;
    max-width: none !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 16px 0 0 16px !important;
    border-right: none !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
    animation: assetDrawerIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
#assetPickerModal .modal-body { padding: 16px 18px 18px; }
#assetPickerModal .asset-picker-grid {
    max-height: none;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, 1fr);
}
@keyframes assetDrawerIn {
    from { transform: translateX(100%); opacity: 0.5; }
    to   { transform: translateX(0); opacity: 1; }
}
@media (max-width: 640px) {
    #assetPickerModal .modal-dialog.modal-asset-picker {
        width: 100vw !important; border-radius: 0 !important;
    }
}

/* 资产选取按钮样式 */
.asset-pick-btn {
    background: var(--bg-elevated); border: 1px dashed var(--border-subtle);
    color: var(--text-secondary);
}
.asset-pick-btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: rgba(var(--accent-rgb,99,102,241), 0.05);
}

/* 视频反推资产选取按钮 */
.reverse-asset-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; max-width: 320px; padding: 8px 14px; margin-top: 6px;
    border-radius: var(--radius-md); border: 1px dashed var(--border-subtle);
    background: var(--bg-elevated); color: var(--text-secondary); font-size: 12px;
    cursor: pointer; transition: all var(--duration-fast); font-family: var(--font-sans);
}
.reverse-asset-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 参考模式选择器 */
.ref-modes-row {
    display: flex; gap: 6px; margin-bottom: 12px;
}
.ref-mode-chip {
    flex: 1; padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--bg-input); border: 2px solid var(--border-default, transparent);
    color: var(--text-secondary); cursor: pointer; font-size: 13px; font-weight: 500;
    text-align: center; transition: all 0.2s ease;
}
.ref-mode-chip:hover {
    border-color: var(--accent); color: var(--accent);
}
.ref-mode-chip.active {
    background: var(--accent-bg); border-color: var(--accent);
    color: var(--accent); font-weight: 600;
}
/* 上传槽位（首帧/尾帧分组） */
.ref-upload-slot {
    display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
/* 标签提示 */
.ref-slot-label {
    font-size: 12px; font-weight: 600; color: var(--accent);
    min-width: 60px; flex-shrink: 0;
}
/* 多图参考预览项标签 */
.ref-preview-tag {
    position: absolute; bottom: 2px; left: 2px; right: 2px;
    background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; text-align: center;
    border-radius: 0 0 4px 4px; pointer-events: none; padding: 1px 0;
}

/* 参考图片预览 */
.ref-preview-item {
    position: relative; width: 80px; height: 80px;
    border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-subtle);
    background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;
}
.ref-preview-item img {
    width: 100%; height: 100%; object-fit: contain;
}
.ref-preview-remove {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.7); color: #fff; border: none;
    font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ref-preview-remove:hover {
    background: rgba(255,80,80,0.9);
}

/* 案例展示区域公共样式 */
.case-showcase-section {
    margin-bottom: 24px;
}

/* 3D预览图选择 */
.preview-3d-select-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    border-radius: var(--radius-sm);
}
.preview-3d-card:hover .preview-3d-select-overlay {
    opacity: 1;
    pointer-events: auto;
}
.btn-select-3d-preview {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
    white-space: nowrap;
}
.btn-select-3d-preview:hover {
    transform: scale(1.05);
    background: var(--accent-hover, #E8B84B);
}

.modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    padding: 16px;
}
.modal-dialog {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: min(400px, 100%);
    max-height: calc(100vh - 32px); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    flex-shrink: 0;
    margin: auto;
}
.modal-dialog.modal-large { max-width: 680px; }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 { font-size: 15px; font-weight: 600; }
.modal-close {
    width: 30px; height: 30px; border-radius: var(--radius-xs);
    border: none; background: transparent; color: var(--text-tertiary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.modal-close:hover { background: var(--bg-overlay); color: var(--text-primary); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-body textarea {
    width: 100%; background: var(--bg-input);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 12px; color: var(--text-primary); font-size: 13px;
    resize: vertical; font-family: var(--font-sans);
}
.modal-body textarea:focus {
    outline: none; border-color: var(--border-focus);
}
.modal-body input[type="text"], .modal-input {
    width: 100%; max-width: 100%; background: #151520 !important;
    border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px;
    padding: 10px 12px; color: #e2e8f0 !important; font-size: 13px;
    font-family: var(--font-sans); transition: border-color var(--duration-fast) var(--ease-out);
    -webkit-appearance: none; appearance: none; box-sizing: border-box !important;
    outline: none !important; box-shadow: none !important;
}
.modal-body input[type="text"]::placeholder, .modal-input::placeholder { color: #64748b; }
.modal-body input[type="text"]:focus, .modal-input:focus {
    outline: none !important; box-shadow: none !important; border-color: var(--accent) !important;
}
.modal-body .form-group { margin-bottom: 16px; }
.modal-body .form-group label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 6px;
}
.modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px; border-top: 1px solid var(--border-subtle);
}


/* ================================================================
   CREDIT LOG MODAL
   ================================================================ */
.credit-log-summary {
    display: flex; justify-content: center; padding: 16px 0 20px;
    border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px;
}
.credit-log-balance {
    display: flex; align-items: baseline; gap: 6px;
}
.credit-log-label {
    font-size: 13px; color: var(--text-secondary); font-weight: 500;
}
.credit-log-value {
    font-size: 28px; font-weight: 700; color: #fbbf24;
    font-variant-numeric: tabular-nums;
}
.credit-log-unit {
    font-size: 13px; color: var(--text-tertiary);
}
.credit-log-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 400px; overflow-y: auto;
}
.credit-log-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--bg-input); border: 1px solid var(--border-subtle);
    transition: background var(--duration-fast) var(--ease-out);
}
.credit-log-item:hover { background: var(--bg-overlay); }
.credit-log-icon {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.credit-log-icon.consume { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.credit-log-icon.refund { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.credit-log-icon.recharge { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.credit-log-content { flex: 1; min-width: 0; }
.credit-log-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.credit-log-desc {
    font-size: 11px; color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.credit-log-amount {
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.credit-log-amount.consume { color: #ef4444; }
.credit-log-amount.refund { color: #22c55e; }
.credit-log-amount.recharge { color: #fbbf24; }
/* 图生图参考图上传区 */
/* 图生图对话框式输入区：参考图缩略条 + 提示词框拖拽 */
.img2img-ref-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.img2img-ref-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
}
.img2img-ref-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img2img-ref-thumb .img2img-ref-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.img2img-ref-thumb.img2img-ref-add {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-subtle);
    color: var(--text-tertiary);
    font-size: 22px;
    cursor: pointer;
    background: var(--bg-subtle, rgba(255,255,255,.03));
    transition: border-color .2s, color .2s;
}
.img2img-ref-thumb.img2img-ref-add:hover {
    border-color: var(--accent, #C9A227);
    color: var(--accent, #C9A227);
}
.prompt-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.action-chip-upload {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    padding: 4px 10px;
}
.img2img-ref-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.img2img-prompt-wrap {
    position: relative;
}
.img2img-prompt-wrap.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}
.img2img-drop-hint {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.img2img-prompt-wrap.drag-over .img2img-drop-hint {
    opacity: 1;
}
.img2img-add-menu {
    position: absolute;
    z-index: 1200;
    min-width: 120px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
}
.img2img-add-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
    background: transparent; border: none;
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: all var(--duration-fast); font-family: var(--font-sans);
}
.img2img-add-menu-item:hover {
    background: var(--bg-hover); color: var(--text-primary);
}

.credit-log-time {
    font-size: 11px; color: var(--text-tertiary);
    flex-shrink: 0; min-width: 60px; text-align: right;
}
.credit-log-empty {
    text-align: center; padding: 40px 20px; color: var(--text-tertiary);
    font-size: 13px;
}
.credit-log-loading {
    text-align: center; padding: 40px 20px; color: var(--text-tertiary);
    font-size: 13px;
}

/* ================================================================
   RESULT DETAIL
   ================================================================ */
.result-detail { display: flex; flex-direction: column; gap: 16px; }
.result-detail-media {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--bg-input);
}
.result-detail-media img, .result-detail-media video {
    width: 100%; display: block;
}
.result-detail-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    padding: 10px 14px; background: var(--bg-input); border-radius: var(--radius-sm);
}
.rdm-badge {
    font-size: 11px; font-weight: 600; color: var(--accent-light);
    background: var(--accent-soft); padding: 2px 10px;
    border-radius: 10px; border: 1px solid rgba(232, 184, 75,0.15);
}
.rdm-item {
    font-size: 11px; color: var(--text-tertiary);
}
.result-detail-info h4 {
    font-size: 13px; font-weight: 600; margin-bottom: 6px;
    color: var(--text-secondary);
}
.result-detail-info p {
    font-size: 12px; color: var(--text-tertiary);
    line-height: 1.65; word-break: break-word;
}
.result-detail-actions { display: flex; gap: 6px; }
.result-detail-actions button {
    flex: 1; padding: 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.result-detail-actions button:hover {
    border-color: var(--accent); color: var(--accent);
}

/* 文生图详情：纯信息面板（无图片预览） */
.result-detail--no-media .result-detail-media { display: none; }
.result-detail-linkbox { margin: 2px 0; }
.result-detail-linkbox label { display: block; font-size: 12px; color: var(--text-tertiary); margin-bottom: 6px; }
.result-detail-linkbox .link-row { display: flex; gap: 8px; }
.result-detail-linkbox input {
    flex: 1; padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-input);
    color: var(--text-secondary); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-detail-linkbox .link-row button {
    flex: 0 0 auto; padding: 0 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.result-detail-linkbox .link-row button:hover { border-color: var(--accent); color: var(--accent); }

/* 图片资产：点击放大预览 */
.result-detail-media-clickable {
    position: relative;
    cursor: zoom-in;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.result-detail-media-clickable img {
    width: 100%;
    display: block;
    transition: transform var(--duration-normal) var(--ease-out);
}
.result-detail-media-clickable:hover img {
    transform: scale(1.02);
}
.result-detail-media-clickable::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.28);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
    border-radius: var(--radius-md);
    pointer-events: none;
}
.result-detail-media-clickable:hover::after { opacity: 1; }
.result-detail-media-clickable .zoom-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
    pointer-events: none;
    z-index: 1;
    color: #fff;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.result-detail-media-clickable:hover .zoom-icon { opacity: 1; }

/* 图片放大预览弹窗 */
.image-lightbox-modal {
    z-index: 2100;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
}
.image-lightbox-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-lightbox-content img {
    max-width: 100%;
    max-height: 92vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
    cursor: grab;
    transition: transform 0.08s ease-out;
    transform-origin: center center;
}
.image-lightbox-content img:active { cursor: grabbing; }

/* 创作历史卡片：右上角只保留详情按钮 */
.result-card-action-detail {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
}
.image-lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2200;
    color: #fff;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    width: 36px;
    height: 36px;
}
.image-lightbox-close:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* 图片详情（提示词）弹窗 */
.image-detail-prompt h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-secondary);
}
.image-detail-prompt p {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.75;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 移动到项目 - 项目选择列表 */
.project-select-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.project-select-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.project-select-item:hover {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.project-select-item svg {
    width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0;
}
.project-select-item.current {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}


/* ================================================================
   REGISTER & AUTH
   ================================================================ */
.register-benefits {
    background: var(--accent-soft); border-radius: var(--radius-md);
    padding: 16px; margin-bottom: 20px;
    border: 1px solid rgba(232, 184, 75,0.15);
}
.register-benefits h4 {
    font-size: 13px; font-weight: 600; margin-bottom: 10px;
    color: var(--accent);
}
.register-benefits ul {
    list-style: none; display: flex; flex-direction: column; gap: 5px;
}
.register-benefits li { font-size: 12px; color: var(--text-secondary); }
.register-form { display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
    font-size: 11px; font-weight: 500; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.form-group input {
    padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-input);
    color: var(--text-primary); font-size: 13px; outline: none;
    font-family: var(--font-sans);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.form-group input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
.code-row .btn-primary-sm { white-space: nowrap; }


/* ================================================================
   DISCOUNT / PLAN CARDS
   ================================================================ */
.discount-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-card {
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); padding: 22px 16px; text-align: center;
    transition: all var(--duration-normal) var(--ease-out);
}
.plan-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}
.plan-highlight {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.plan-badge {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 14px;
}
.plan-price {
    margin-bottom: 16px; display: flex; align-items: baseline;
    justify-content: center; gap: 2px;
}
.plan-amount { font-size: 26px; font-weight: 800; color: var(--accent); }
.plan-unit { font-size: 11px; color: var(--text-tertiary); }
.plan-features { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.plan-feat {
    font-size: 11px; color: var(--text-secondary); padding: 3px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.plan-feat:last-child { border-bottom: none; }
.plan-btn { width: 100%; padding: 9px; border-radius: var(--radius-sm); font-size: 12px; }


/* ================================================================
   RECHARGE
   ================================================================ */
.recharge-header-info { text-align: center; margin-bottom: 16px; }
.recharge-balance { font-size: 14px; color: var(--text-secondary); }
.recharge-balance strong { color: var(--warning); font-size: 20px; margin-left: 3px; }
.recharge-packages {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 20px;
}
.recharge-pack {
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 16px 10px; text-align: center;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}
.recharge-pack:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-xs);
}
.recharge-pack-active {
    border-color: var(--warning);
    background: var(--warning-soft);
}
.pack-icon { font-size: 22px; margin-bottom: 6px; }
.pack-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.pack-price { font-size: 15px; font-weight: 700; color: var(--warning); }
.pack-tag {
    position: absolute; top: -6px; right: -6px;
    background: var(--warning); color: #000;
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
}
.recharge-payment { margin-bottom: 16px; }
.recharge-payment h4 {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 8px;
}
.payment-methods { display: flex; gap: 6px; }
.payment-method {
    flex: 1; padding: 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-tertiary); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.payment-method:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.payment-method.active {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.pay-icon {
    width: 16px; height: 16px; border-radius: 3px; display: inline-block;
}
.pay-icon.wechat { background: #07C160; }
.pay-icon.alipay { background: #1677FF; }
.recharge-summary {
    display: flex; justify-content: space-between; padding: 12px 16px;
    background: var(--bg-elevated); border-radius: var(--radius-md);
    font-size: 13px; color: var(--text-secondary);
}
.recharge-summary strong { color: var(--warning); }


/* ================================================================
   CUSTOMER SERVICE
   ================================================================ */
.service-options {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;
}
.service-option {
    display: flex; align-items: center; gap: 12px; padding: 16px;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}
.service-option:hover { border-color: var(--border-hover); }
.service-icon { font-size: 26px; flex-shrink: 0; }
.service-info { flex: 1; }
.service-info h4 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.service-info p { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.btn-service {
    white-space: nowrap; font-size: 11px; padding: 7px 12px;
}
.service-faq { border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.service-faq h4 {
    font-size: 13px; font-weight: 600; margin-bottom: 12px;
    color: var(--text-secondary);
}
.faq-item { margin-bottom: 12px; }
.faq-item strong {
    display: block; font-size: 12px; color: var(--text-primary);
    margin-bottom: 3px;
}
.faq-item p {
    font-size: 11px; color: var(--text-tertiary); line-height: 1.65;
}


/* ================================================================
   TOAST
   ================================================================ */

/* ========== 账户管理页面 ========== */

.account-container { display: flex; flex-direction: column; gap: 20px; }
.account-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.account-stat-card {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.account-stat-card .stat-label { font-size: 12px; color: var(--text-tertiary); }
.account-stat-card .stat-value { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.stat-total .stat-value { color: var(--accent); }
.stat-allocated .stat-value { color: #f59e0b; }
.stat-subs .stat-value { color: #10b981; }
.stat-calls .stat-value { color: #E8B84B; }

.account-section {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 16px;
}
.account-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.account-section-header h3 { font-size: 14px; font-weight: 600; margin: 0; }

.account-filter {
    padding: 4px 8px; font-size: 12px; background: var(--bg-elevated);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    color: var(--text-secondary); outline: none;
}

/* 子账户列表 */
.account-sub-list { display: flex; flex-direction: column; gap: 6px; }
.account-sub-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--radius-md);
    background: var(--bg-base); border: 1px solid var(--border-subtle);
}
.sub-info { flex: 1; min-width: 0; }
.sub-name { font-size: 13px; font-weight: 600; }
.sub-username { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.sub-credits { font-size: 13px; font-weight: 600; color: var(--accent-light); white-space: nowrap; }
.sub-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.sub-status.active { background: rgba(16,185,129,0.15); color: #10b981; }
.sub-status.disabled { background: rgba(239,68,68,0.15); color: #ef4444; }
.sub-status.approved { background: rgba(16,185,129,0.15); color: #10b981; }
.sub-status.rejected { background: rgba(239,68,68,0.15); color: #ef4444; }
.section-hint { font-size: 11px; color: var(--text-tertiary); font-weight: 400; margin-left: auto; }
.sub-actions { display: flex; gap: 4px; white-space: nowrap; }
.sub-btn {
    padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px;
    border: 1px solid var(--border-subtle); background: transparent;
    color: var(--text-secondary); cursor: pointer; transition: all 0.12s;
}
.sub-btn:hover { background: var(--bg-overlay); color: var(--text-primary); }
.sub-btn.btn-allocate { color: var(--accent-light); border-color: rgba(201, 162, 39,0.3); }
.sub-btn.btn-allocate:hover { background: rgba(201, 162, 39,0.15); }
.sub-btn.btn-disable { color: #f59e0b; }
.sub-btn.btn-enable { color: #10b981; }
.account-empty { text-align: center; padding: 48px 20px; color: var(--text-tertiary); font-size: 13px; }
.account-empty .empty-icon { font-size: 42px; margin-bottom: 16px; display: block; }
.account-empty p { margin: 4px 0; line-height: 1.6; }
.account-empty .empty-sub { font-size: 12px; color: var(--text-disabled); }

/* 消费表格 */
.consumption-table { border-radius: var(--radius-md); overflow: hidden; }
.conso-header, .conso-row {
    display: flex; gap: 8px; padding: 8px 12px; align-items: center;
    font-size: 12px;
}
.conso-header { background: var(--bg-overlay); color: var(--text-tertiary); font-weight: 600; }
.conso-row { border-bottom: 1px solid var(--border-subtle); }
.conso-row:last-child { border-bottom: none; }
.conso-col-time { width: 130px; flex-shrink: 0; }
.conso-col-user { width: 70px; flex-shrink: 0; }
.conso-col-action { width: 70px; flex-shrink: 0; }
.conso-col-prompt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conso-col-cost { width: 50px; flex-shrink: 0; text-align: right; font-weight: 600; color: var(--accent-light); }
.conso-empty { text-align: center; padding: 24px; color: var(--text-tertiary); font-size: 13px; }

/* 分配积分弹窗 */
.allocate-input-group { display: flex; gap: 8px; align-items: center; }
.allocate-input {
    width: 100%; padding: 8px 10px; font-size: 13px;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); color: var(--text-primary); outline: none;
}
.allocate-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

/* 响应式 */
@media (max-width: 768px) {
    .account-stats { grid-template-columns: repeat(2, 1fr); }
    .conso-col-time, .conso-col-user, .conso-col-action { width: auto; }
}

/* 中央弹窗提示 */
.center-notice-overlay {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    animation: centerNoticeFadeIn 0.3s ease-out;
}
.center-notice-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 24px 32px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    max-width: 420px;
    animation: centerNoticeScale 0.3s ease-out;
}
.center-notice-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.center-notice-icon.warning { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.center-notice-icon.error { background: rgba(248, 113, 113, 0.12); color: var(--danger); }
.center-notice-icon.success { background: rgba(52, 211, 153, 0.12); color: var(--success); }
.center-notice-title {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
}
.center-notice-desc {
    font-size: 13px; color: var(--text-tertiary); text-align: center; line-height: 1.6;
}
@keyframes centerNoticeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes centerNoticeScale {
    from { opacity: 0; transform: scale(0.9) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.center-notice-overlay.removing {
    animation: centerNoticeFadeOut 0.4s ease-in forwards;
}
.center-notice-overlay.removing .center-notice-box {
    animation: centerNoticeScaleOut 0.4s ease-in forwards;
}
@keyframes centerNoticeFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes centerNoticeScaleOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
}

.toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 3000;
    display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.toast {
    padding: 10px 18px; border-radius: var(--radius-md);
    font-size: 12px; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    pointer-events: auto;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.25s var(--ease-out);
    backdrop-filter: blur(8px);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.toast.success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: var(--success);
}
.toast.error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--danger);
}
.toast.info {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: var(--info);
}


/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state-full {
    text-align: center; padding: 60px 20px; grid-column: 1 / -1;
}
.empty-icon { color: var(--text-disabled); margin-bottom: 14px; }
.empty-state-full h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.empty-state-full p {
    font-size: 13px; color: var(--text-tertiary); line-height: 1.8;
}


/* ================================================================
   BUTTONS (Global)
   ================================================================ */
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 22px; border-radius: var(--radius-md); border: none;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    letter-spacing: -0.01em;
}
.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn-primary:active { transform: scale(0.985); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 22px; border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle); background: transparent;
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover {
    border-color: var(--border-hover); color: var(--text-primary);
    background: var(--bg-overlay);
}
.btn-ghost:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: transparent; color: var(--text-disabled);
    border-color: var(--border-subtle);
}

/* 小型按钮 */
.btn-sm {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 16px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    border: 1px solid transparent;
    font-family: var(--font-sans);
}
.btn-sm:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-elevated); color: var(--text-disabled);
    border-color: var(--border-subtle);
}

/* 次要按钮 */
.btn-secondary {
    background: var(--bg-overlay); color: var(--text-secondary);
    border-color: var(--border-subtle);
}
.btn-secondary:hover {
    background: var(--bg-elevated); color: var(--text-primary);
    border-color: var(--border-hover);
}
.btn-secondary:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-elevated); color: var(--text-disabled);
    border-color: var(--border-subtle);
}

/* 线框按钮 */
.btn-outline {
    background: transparent; color: var(--text-secondary);
    border-color: var(--border-subtle);
}
.btn-outline:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.btn-outline:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: transparent; color: var(--text-disabled);
    border-color: var(--border-subtle);
}


/* ================================================================
   MESSAGE CENTER — 开发者交流中心 留言互动
   ================================================================ */
/* Floating action button (左下角) */
/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 992px) {
    .discount-plans { grid-template-columns: 1fr; }
    .recharge-packages { grid-template-columns: repeat(2, 1fr); }
    .inspiration-hero { grid-template-columns: repeat(2, 1fr); }
    .inspo-category-grid { grid-template-columns: repeat(3, 1fr); }
    .reverse-layout { grid-template-columns: 1fr; }
    .opt-compare { grid-template-columns: 1fr; }
    .opt-compare-arrow { transform: rotate(90deg); }
    .opt-tips-grid { grid-template-columns: repeat(2, 1fr); }
    .panel-body-scroll { max-height: none; overflow-y: visible; }
}
@media (max-width: 768px) {
    .side-nav { width: 52px; }
    .side-nav-item { width: 40px; height: 44px; }
    .side-nav-item span { display: none; }
    .main-area { margin-left: 52px; padding: 16px; }
    .user-area { gap: 3px; }
    .header-btn span, .btn-primary-sm span { display: none; }
    .inspiration-hero { grid-template-columns: 1fr; }
    .inspo-category-grid { grid-template-columns: repeat(2, 1fr); }
    .style-grid { grid-template-columns: repeat(2, 1fr); }
    .template-grid { grid-template-columns: repeat(2, 1fr); }
    .recharge-packages { grid-template-columns: repeat(2, 1fr); }
    .discount-plans { grid-template-columns: 1fr; }
    .inspo-grid { grid-template-columns: repeat(2, 1fr); }
    .gen-gallery.gen-drawer { max-height: calc(100vh - 52px); }
    .panel-body-scroll { max-height: none; overflow-y: visible; }
    .agent-layout { grid-template-columns: 1fr; }
}

/* —— 大屏 / 超大屏向上适配（生成页两栏） —— */
@media (min-width: 1700px) {
    .gen-layout { gap: 48px; }
    .gen-gallery .results-masonry { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ================================================================
   AGENT PAGE — 智能创意 Agent
   ================================================================ */

/* 六步法出片进度条（顶层展示） */
.agent-step-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    overflow-x: auto;
}
.agent-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 auto;
    min-width: 132px;
    opacity: 0.5;
    transition: opacity var(--duration-fast);
    cursor: pointer;
}
.agent-step-item:hover { opacity: 0.9; }
.agent-step-item:hover .agent-step-title { color: var(--accent); }
.agent-step-item.active,
.agent-step-item.done { opacity: 1; }
.agent-step-dot {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--bg-base);
    border: 2px solid var(--border-subtle);
    color: var(--text-tertiary);
    transition: all var(--duration-fast);
}
.agent-step-item.active .agent-step-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.agent-step-item.done .agent-step-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: transparent;
}
.agent-step-item.done .agent-step-dot::after {
    content: '\2713';
    position: absolute;
    font-size: 15px;
    color: #fff;
}
.agent-step-item.error .agent-step-dot {
    background: #ef4444; border-color: #ef4444; color: #fff;
    box-shadow: 0 0 0 4px rgba(239,68,68,0.18);
}
.agent-step-text { display: flex; flex-direction: column; line-height: 1.25; }
.agent-step-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.agent-step-item.active .agent-step-title { color: var(--accent); }
.agent-step-item.error .agent-step-title { color: #ef4444; }
.agent-step-sub { font-size: 11px; color: var(--text-tertiary); }
.agent-step-arrow {
    width: 26px; height: 2px;
    flex: 0 0 auto;
    background: var(--border-subtle);
    margin: 0 6px;
    position: relative;
}
.agent-step-arrow::after {
    content: '';
    position: absolute; right: -2px; top: -3px;
    border-left: 6px solid var(--border-subtle);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
@media (max-width: 1200px) {
    .agent-step-bar { flex-wrap: wrap; row-gap: 12px; }
    .agent-step-item { min-width: 120px; }
    .agent-step-arrow { display: none; }
}

.agent-layout {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 24px;
    height: calc(100vh - 180px);
    min-height: 420px;
    overflow: hidden;
}
/* 大屏 / 超大屏：左栏放宽、间距加大，避免比例失调 */
@media (min-width: 1700px) { .agent-layout { grid-template-columns: 520px 1fr; gap: 36px; } }
@media (min-width: 2200px) { .agent-layout { grid-template-columns: 600px 1fr; gap: 48px; } }
/* 矮屏：放弃一屏硬撑，整页自然滚动 */
@media (max-height: 640px) { .agent-layout { height: auto; min-height: 0; overflow: visible; } }

.agent-input-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.agent-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--border-subtle);
}

.agent-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* 左侧设置区紧凑布局 */
.agent-input-section {
    padding: 12px;
}
.agent-section-subtitle {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-tertiary);
    margin: -8px 0 10px 0;
}
.agent-input-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agent-input-main {
    width: 100%;
}
.agent-textarea.agent-textarea-compact {
    min-height: 96px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
}
.agent-input-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: start;
}
.agent-side-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.agent-side-full {
    grid-column: 1 / -1;
}
.agent-side-half {
    grid-column: span 1;
}
.agent-side-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-side-label svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.85;
}
.agent-input-side .agent-select {
    padding: 7px 9px;
    font-size: 12px;
    min-height: 34px;
}
.agent-input-side .agent-duration-group {
    gap: 6px;
}
.agent-input-side .agent-duration-group .duration-chip {
    flex: 1 1 0;
    padding: 6px 0;
    font-size: 12px;
    text-align: center;
}
.agent-input-side .agent-image-upload {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
}
.agent-input-side .agent-image-add-btn {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
}

.agent-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    line-height: 1.6;
    transition: border-color var(--duration-fast);
    font-family: inherit;
}
.agent-textarea:focus { border-color: var(--accent); }
.agent-textarea::placeholder { color: var(--text-tertiary); }

/* 图片上传 */
.agent-image-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.agent-image-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.agent-image-preview-item {
    position: relative;
    width: 72px; height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.agent-image-preview-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.agent-image-remove {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-fast);
}
.agent-image-preview-item:hover .agent-image-remove { opacity: 1; }

.agent-image-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 2px dashed var(--border-subtle);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-tertiary);
    transition: all var(--duration-fast);
    background: transparent;
    font-family: inherit;
}
.agent-image-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.agent-image-add-btn:disabled,
.agent-image-add-btn.orch-locked {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.agent-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* 配置选项 */
.agent-config-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
.agent-config-item label {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.agent-select {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}
.agent-select:focus { border-color: var(--accent); }
.agent-range-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.agent-range {
    flex: 1;
    accent-color: var(--accent);
    height: 4px;
}
.agent-range-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-light);
    min-width: 36px;
    text-align: right;
}

.agent-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}
.agent-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent);
}

/* 启动按钮 */
.agent-start-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--duration-fast);
    letter-spacing: 0.02em;
}
.agent-start-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(201, 162, 39,0.35);
}
.agent-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--bg-elevated);
    color: var(--text-disabled);
}
.agent-cost-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: -4px;
}
.agent-cost-hint strong {
    color: var(--accent-light);
}

/* 右侧结果面板 */
.agent-result-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding-right: 4px;
}
.agent-result-panel > .agent-empty-state,
.agent-result-panel > .agent-loading-state,
.agent-result-panel > .orch-step-result {
    flex: 1;
    min-height: 0;
}

.agent-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 60px 20px;
}
.agent-empty-icon { margin-bottom: 16px; }
.agent-empty-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}
.agent-empty-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.8;
    max-width: 360px;
}

/* 进度时间线 */
.agent-timeline {
    padding: 8px 0;
}
.agent-timeline-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.agent-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.agent-step-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}
.agent-step-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11.5px;
    top: 32px;
    bottom: -10px;
    width: 2px;
    background: var(--border-subtle);
}
.agent-step-item.completed:not(:last-child)::before {
    background: var(--success);
}
.agent-step-item.active:not(:last-child)::before {
    background: var(--accent);
}
.agent-step-dot {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    background: var(--bg-elevated);
    border: 2px solid var(--border-subtle);
    transition: all var(--duration-fast);
}
.agent-step-item.completed .agent-step-dot {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.agent-step-item.active .agent-step-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(201, 162, 39,0); }
}
/* 加载动画 */
.spinner, .spinner-mini {
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.spinner { width: 24px; height: 24px; }
.spinner-mini { width: 15px; height: 15px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.agent-step-info { flex: 1; min-width: 0; }
.agent-step-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--duration-fast);
}
.agent-step-item.completed .agent-step-name { color: var(--success); }
.agent-step-item.active .agent-step-name { color: var(--text-primary); }
.agent-step-msg {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 结果卡片 */
.agent-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.agent-result-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}
.agent-result-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast);
}
.agent-result-card-header:hover { background: var(--bg-overlay); }
.agent-result-card-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.agent-result-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.agent-result-card-subtitle {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.agent-result-card-toggle {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    transition: transform var(--duration-fast);
}
.agent-result-card-header.open .agent-result-card-toggle {
    transform: rotate(180deg);
}
.agent-result-card-body {
    padding: 0 16px 16px;
    line-height: 1.7;
    font-size: 13px;
    color: var(--text-secondary);
    display: none;
}
.agent-result-card-header.open + .agent-result-card-body {
    display: block;
}

/* 创意简报内容样式 */
.agent-brief-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.agent-brief-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.agent-brief-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.agent-brief-content {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.7;
}

/* Agent 历史创作区域 */
.agent-history-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}
.agent-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.agent-history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.agent-history-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
}
.agent-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.agent-history-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.agent-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.agent-history-card video,
.agent-history-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
.agent-history-card-info {
    padding: 10px 12px;
}
.agent-history-card-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    margin-bottom: 2px;
}
.agent-history-card-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Agent 时长选择 */
.agent-duration-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.agent-duration-group .duration-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.agent-duration-group .duration-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.agent-duration-group .duration-chip.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(217, 169, 59,0.3);
}

/* 分镜卡片 */
.orch-script-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.orch-script-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: all 0.2s;
}
.orch-script-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(217, 169, 59,0.2);
}
.script-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.script-card-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-light);
    background: rgba(217, 169, 59,0.12);
    padding: 2px 8px;
    border-radius: 4px;
}
.script-card-time {
    font-size: 11px;
    color: var(--text-tertiary);
}
.script-card-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    margin-left: auto;
}
.script-card-content {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.script-card-row {
    margin-bottom: 4px;
}
.script-card-row strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* 视图切换 */
.orch-editor-toggle {
    display: flex;
    gap: 0;
    margin: 12px 0 8px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
    padding: 3px;
    width: fit-content;
}
.orch-toggle-btn {
    padding: 5px 14px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.orch-toggle-btn.active {
    background: rgba(217, 169, 59,0.2);
    color: var(--accent-light);
}

/* 修改意见区 */
.orch-revise-section {
    margin-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 12px;
}
.orch-revise-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.orch-revise-chat {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.orch-revise-msg {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.5;
    max-width: 90%;
    word-break: break-word;
}
.orch-revise-msg.user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 2px;
}
.orch-revise-msg.agent {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    border-bottom-left-radius: 2px;
}
.orch-revise-msg[data-loading="1"] {
    opacity: 0.6;
    font-style: italic;
}
.orch-revise-input-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.orch-revise-input {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
}
.orch-revise-input:focus {
    border-color: var(--accent);
}
.orch-revise-input::placeholder {
    color: var(--text-tertiary);
}
.orch-revise-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.orch-revise-send-btn:hover {
    background: var(--accent-light);
    transform: scale(1.05);
}
.orch-revise-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 按钮行 */
.agent-btn-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.agent-back-step-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.agent-back-step-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-primary);
}

/* 分镜脚本内容 */
.agent-scene-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-base);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    border-left: 3px solid var(--accent);
}
.agent-scene-id {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-light);
    line-height: 1;
    min-width: 32px;
}
.agent-scene-info {
    flex: 1;
    font-size: 12px;
}
.agent-scene-info .scene-time {
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: 2px;
}
.agent-scene-info .scene-camera {
    color: var(--accent-light);
    font-size: 11px;
    margin-bottom: 4px;
}
.agent-scene-info .scene-desc {
    color: var(--text-secondary);
    line-height: 1.6;
}
.agent-scene-info .scene-audio {
    color: var(--text-tertiary);
    font-size: 11px;
    margin-top: 4px;
}
.agent-scene-info .scene-emotion {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent);
    margin-top: 4px;
}

/* 提示词列表 */
.agent-prompt-item {
    padding: 10px 12px;
    background: var(--bg-base);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    border-left: 3px solid var(--border-subtle);
}
.agent-prompt-item .prompt-num {
    font-weight: 600;
    color: var(--accent-light);
    margin-right: 4px;
}

/* 视频播放器 */
.agent-video-player {
    width: 100%;
    max-height: 400px;
    border-radius: var(--radius-sm);
    background: #000;
}
.agent-download-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--accent-light);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    transition: all var(--duration-fast);
}
.agent-download-link:hover {
    background: var(--accent);
    color: #fff;
}

/* 全局风格说明 */
.agent-global-style {
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* ================================================================
   新增：两步确认制 + 时长选择 + 分镜编辑
   ================================================================ */

/* 顶部步骤指示器 */
.agent-step-indicator {
    display: flex; align-items: center; gap: 0;
    font-size: 12px; color: var(--text-tertiary);
    flex-wrap: wrap;
}
.agent-steps-label { color: var(--text-tertiary); margin-right: 4px; }
.agent-step-badge { cursor: pointer;
    padding: 3px 10px; border-radius: 12px;
    background: var(--bg-base); border: 1px solid var(--border-subtle);
    color: var(--text-tertiary); transition: all .2s;
}
.agent-step-badge.active { border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: 0 0 12px rgba(232,184,75,0.35); font-weight: 600; }
.agent-step-badge:hover { border-color: var(--accent); color: var(--accent); background: rgba(201, 162, 39,0.08); }
.agent-step-badge.completed { border-color: var(--success); color: var(--success); background: rgba(16,185,129,0.08); }
.agent-step-badge.completed.no-edit { border-color: var(--success); color: var(--success); background: rgba(16,185,129,0.08); }
.agent-step-badge.completed.has-edit { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.08); }
.agent-step-arrow { margin: 0 6px; color: var(--border-mid); font-size: 11px; }

/* 时长选择按钮 */
.agent-duration-btns { display: flex; gap: 8px; }
.agent-dur-btn {
    padding: 8px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-base);
    color: var(--text-secondary); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .15s; font-family: inherit;
}
.agent-dur-btn:hover { border-color: var(--accent); color: var(--accent-light); }
.agent-dur-btn.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(201, 162, 39,.3);
}

/* 模型选择 */
.agent-model-select-group { display: flex; flex-direction: column; gap: 10px; }

/* 第二步区域 */
.agent-step2-section { margin-top: 4px; }
.agent-divider {
    display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
    color: var(--text-tertiary); font-size: 11px;
}
.agent-divider::before, .agent-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border-subtle);
}
.agent-gen-btn {
    background: linear-gradient(135deg, #0ea5e9, #C9A227) !important;
}

/* 分镜编辑卡片网格 */
.agent-scene-grid {
    display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.scene-card {
    background: var(--bg-base); border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); overflow: hidden;
}
.scene-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: var(--bg-overlay);
    border-bottom: 1px solid var(--border-subtle);
}
.scene-idx { font-size: 12px; font-weight: 600; color: var(--accent-light); }
.scene-time { font-size: 11px; color: var(--text-tertiary); }
.scene-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.scene-field { display: flex; flex-direction: column; gap: 3px; }
.scene-field label {
    font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em;
}
.scene-field-row { display: flex; gap: 10px; }
.scene-field-row .scene-field { flex: 1; }
.scene-edit, .agent-prompt-edit {
    width: 100%; padding: 7px 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-primary); font-size: 12px; outline: none;
    resize: vertical; font-family: inherit; line-height: 1.5;
    transition: border-color .15s;
}
.scene-edit:focus, .agent-prompt-edit:focus { border-color: var(--accent); }

/* 提示词编辑项 */
.agent-prompt-item {
    background: var(--bg-base); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border-subtle);
}
.agent-prompt-idx {
    font-size: 11px; font-weight: 600; color: var(--accent-light); margin-bottom: 6px;
}
.agent-prompt-edit { min-height: 48px; }

/* 创意简报内的变体 */
.agent-detail-grid {
    display: flex; flex-direction: column; gap: 10px;
}
.agent-detail-item strong {
    display: block; font-size: 11px; color: var(--accent-light); margin-bottom: 2px;
    text-transform: uppercase; letter-spacing: .02em;
}
.agent-detail-item p {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0;
}
.agent-variations {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 6px;
}
.agent-variation {
    font-size: 12px; color: var(--text-secondary); padding: 8px 12px;
    background: var(--bg-base); border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

@media (max-width: 900px) {
    .agent-step-indicator { display: none; }
    .agent-layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .scene-field-row { flex-direction: column; }
}
@media (max-width: 760px) {
    .agent-title-block { flex-direction: column; gap: 2px; }
    .agent-title-block h1 { font-size: 16px; }
    .agent-title-block p { white-space: normal; }
}
@media (max-width: 900px) {
    .agent-top-actions .agent-start-btn span,
    .agent-top-actions .agent-back-step-btn span { display: none; }
    .agent-top-actions .agent-start-btn svg,
    .agent-top-actions .agent-back-step-btn svg { margin: 0; }
    .agent-top-actions .agent-start-btn,
    .agent-top-actions .agent-back-step-btn { padding: 8px 10px; }
}
@media (max-width: 640px) {
    .agent-top-actions { gap: 6px; }
    .agent-top-actions .agent-start-btn,
    .agent-top-actions .agent-back-step-btn { padding: 7px 8px; }
}

/* ================================================================
   Orchestrator 云函数三步流程新样式
   ================================================================ */

/* 按钮区域 */
.agent-btn-zone {
    position: sticky;
    bottom: 0;
    margin-top: 0;
    padding: 6px 0 2px 0;
    background: var(--bg-surface);
    z-index: 10;
}
.agent-btn-zone .agent-start-btn {
    padding: 11px 14px;
    font-size: 14px;
}

/* 确认按钮 */
.agent-confirm-btn {
    background: linear-gradient(135deg, #E8B84B, #F2C14E) !important;
}
.agent-confirm-btn:hover {
    background: linear-gradient(135deg, #F2C14E, #E8B84B) !important;
}

/* 加载状态 */
.agent-loading-state {
    display: flex; flex-direction: column;
    gap: 0; padding: 0; text-align: left;
    flex: 1;
    overflow: hidden;
}
.agent-loading-spinner {
    display: flex; align-items: center; justify-content: center;
}
.agent-loading-spinner .spinner {
    width: 40px; height: 40px; border-width: 4px;
    border-top-color: var(--accent);
}
.agent-loading-text {
    font-size: 14px; color: var(--text-secondary);
}

/* Agent 推理过程实时流 */
.agent-reasoning-container {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 16px;
    text-align: left;
}
.agent-reasoning-container::-webkit-scrollbar { width: 6px; }
.agent-reasoning-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12); border-radius: 3px;
}
.agent-reasoning-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--accent);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.agent-reasoning-steps {
    display: flex; flex-direction: column;
    gap: 4px;
}
.agent-reasoning-step {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.3s;
}
.agent-reasoning-step.active {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
}
.agent-reasoning-step.completed {
    background: transparent;
}
.agent-reasoning-dot {
    width: 8px; height: 8px; min-width: 8px;
    border-radius: 50%; margin-top: 6px;
    background: var(--border-subtle);
    transition: all 0.3s;
}
.agent-reasoning-step.active .agent-reasoning-dot {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulseDot 1.5s ease-in-out infinite;
}
.agent-reasoning-step.completed .agent-reasoning-dot {
    background: #22c55e;
}
.agent-reasoning-text {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
}
.agent-reasoning-stage {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
}
.agent-reasoning-step.active .agent-reasoning-stage {
    color: var(--accent);
}
.agent-reasoning-step.completed .agent-reasoning-stage {
    color: #22c55e;
}
.agent-reasoning-msg {
    font-size: 11px; color: var(--text-tertiary);
    line-height: 1.4;
    word-break: break-word;
}
.agent-reasoning-footer {
    margin-top: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    flex-shrink: 0;
}
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 4px var(--accent); }
    50% { box-shadow: 0 0 12px var(--accent); }
}

/* A方案：去掉右侧与顶部六步条重复的“推理时间线”，进度统一看顶部六步 + 左侧气泡；
   保留计时器与“终止”按钮（在 .agent-reasoning-footer 内），不破坏终止能力 */
.agent-reasoning-container > .agent-reasoning-header,
.agent-reasoning-container > .agent-reasoning-steps { display: none; }
.agent-reasoning-container { padding: 0; }

/* Orchestrator 步骤结果卡片 */
.orch-step-result {
    display: none;  /* JS 会设为 flex */
    flex-direction: column;
    gap: 0;
    padding: 0;
    flex: 1;
    overflow: hidden;
    height: 100%;
    animation: fadeInUp 0.3s ease;
}
.orch-step-scrollable {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.orch-step-scrollable::-webkit-scrollbar { width: 6px; }
.orch-step-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12); border-radius: 3px;
}
.agent-result-panel .orch-revise-section {
    flex-shrink: 0;
    margin-top: 0;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    background: var(--bg-card);
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.orch-result-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.orch-result-icon { font-size: 22px; line-height: 1; }
.orch-result-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.orch-result-subtitle { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* 脚本编辑器 */
.orch-script-editor {
    width: 100%; min-height: 400px; padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary); font-size: 13px; line-height: 1.7;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    resize: vertical; outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.orch-script-editor:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* 锁定状态 */
.orch-locked {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.3);
}
textarea.orch-locked, input.orch-locked {
    background: var(--bg-tertiary);
    border-color: var(--border-default);
}
select.orch-locked {
    background: var(--bg-tertiary);
    border-color: var(--border-default);
}

/* Agent 修改意见对话区 */
.orch-revise-section {
    margin-top: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    overflow: hidden;
}
.orch-revise-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}
.orch-revise-chat {
    max-height: 240px;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.orch-revise-chat:empty { display: none; }
.orch-revise-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}
.orch-revise-msg.user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.orch-revise-msg.agent {
    align-self: flex-start;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-bottom-left-radius: 4px;
}
.orch-revise-input-row {
    display: flex; gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-subtle);
}
.orch-revise-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.orch-revise-input:focus { border-color: var(--accent); }
.orch-revise-send-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.orch-revise-send-btn:hover { opacity: 0.85; }
.orch-revise-send-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-elevated); color: var(--text-disabled); }
.orch-revise-hint {
    font-size: 11px; color: var(--text-tertiary);
    padding: 0 14px 10px;
}

/* 等待期修改意见区 */
.agent-loading-revise {
    margin-top: 0;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    background: var(--bg-card);
    flex-shrink: 0;
}
.agent-abort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.agent-abort-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
}
.agent-reasoning-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.agent-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

/* 双栏提示词布局 */
.orch-prompt-dual {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    align-items: start;
}
/* 步骤2布局：提示词左 + 参考图中 + 分镜结果右 */
.orch-step2-layout {
    display: flex; gap: 10px; align-items: stretch;
}
.orch-step2-layout.is-tabbed .orch-prompt-dual,
.orch-step2-layout.is-tabbed .orch-img-panel,
.orch-step2-layout.is-tabbed .orch-shots-panel {
    flex: 1; width: 100%; min-width: 0;
}
.orch-step2-layout .orch-prompt-dual {
    flex: 1.6; min-width: 0;
}
.orch-prompt-dual.single-col {
    grid-template-columns: 1fr;
}
.orch-img-panel {
    width: 240px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 0;
    overflow: hidden;
    /* 占位：即使内容为空也保持布局空间 */
    min-height: 200px;
}
.orch-img-scrollable {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 2px;
}
.orch-img-panel .ms-action-row {
    flex-shrink: 0;
    margin-top: 0;
    padding: 12px 0 0 0;
    position: sticky;
    bottom: 0;
    background: var(--bg-surface);
    z-index: 5;
}
.orch-img-panel .ms-action-row .agent-confirm-btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 12px;
}
.orch-shots-panel {
    width: 320px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    min-height: 200px;
}
.orch-shots-panel .orch-result-header {
    padding: 10px 14px;
}
.orch-shots-panel .ms-shots-list {
    max-height: 520px;
    overflow-y: auto;
}
.orch-img-panel .orch-result-header {
    padding: 10px 14px;
}
.orch-prompt-col {
    display: flex; flex-direction: column; gap: 8px;
}
.orch-prompt-col-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    letter-spacing: 0.2px;
}
.orch-prompt-edit {
    width: 100%; min-height: 260px; padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary); font-size: 13px; line-height: 1.7;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    resize: vertical; outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.orch-prompt-edit:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.orch-prompt-sub-label {
    font-size: 11px; font-weight: 500; color: var(--text-tertiary);
    padding: 0 2px; margin-top: 4px;
}
.orch-prompt-en {
    border-color: rgba(201, 162, 39,0.15);
    background: rgba(201, 162, 39,0.02);
    font-size: 13px;
}
.orch-prompt-en:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(201, 162, 39,0.1);
}
/* 同步英文按钮 */
.orch-sync-en-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 500;
    color: var(--primary);
    background: rgba(201, 162, 39,0.08);
    border: 1px solid rgba(201, 162, 39,0.15);
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.orch-sync-en-btn:hover {
    background: rgba(201, 162, 39,0.15);
    border-color: var(--primary);
}
.orch-sync-en-btn:disabled {
    opacity: 0.6; cursor: not-allowed;
}
.orch-sync-spin {
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid rgba(201, 162, 39,0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: orchSyncSpin 0.6s linear infinite;
}
@keyframes orchSyncSpin {
    to { transform: rotate(360deg); }
}

/* 视频生成进度 */
.orch-video-progress {
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.orch-video-progress-bar {
    width: 100%; height: 6px;
    background: var(--bg-base);
    border-radius: 3px;
    overflow: hidden;
}
.orch-video-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent), #F2D98F);
    border-radius: 3px;
    transition: width 0.5s ease;
    animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.orch-video-progress-text {
    font-size: 13px; color: var(--text-secondary); text-align: center; margin: 0;
}

/* 视频预览 */
.orch-video-preview {
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    animation: fadeInUp 0.4s ease;
}

/* P3: TTS 配音区域 */
.orch-tts-section {
    padding: 14px 16px;
    background: rgba(var(--accent-rgb, 59,130,246), 0.06);
    border: 1px solid rgba(var(--accent-rgb, 59,130,246), 0.2);
    border-radius: var(--radius-sm);
    animation: fadeInUp 0.4s ease;
    margin-top: 12px;
}
.orch-tts-player-wrap {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px;
}
.agent-tts-player {
    flex: 1;
    max-width: 340px;
    height: 36px;
    border-radius: var(--radius-sm);
}
.agent-tts-player::-webkit-media-controls-panel {
    background: var(--bg-card);
}
.orch-tts-section .orch-result-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.orch-tts-section .orch-result-icon {
    font-size: 20px;
}
.orch-tts-section .orch-result-title {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.orch-tts-section .orch-result-subtitle {
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}

.orch-composed-section {
    padding: 14px 16px;
    background: rgba(var(--accent-rgb, 59,130,246), 0.06);
    border: 1px solid rgba(var(--accent-rgb, 59,130,246), 0.2);
    border-radius: var(--radius-sm);
    animation: fadeInUp 0.4s ease;
    margin-top: 12px;
}
.orch-composed-player-wrap {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px; flex-wrap: wrap;
}
.agent-composed-player {
    width: 100%;
    max-width: 280px;
    border-radius: var(--radius-sm);
    background: #000;
}
.orch-composed-section .orch-result-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.orch-composed-section .orch-result-icon {
    font-size: 20px;
}
.orch-composed-section .orch-result-title {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.orch-composed-section .orch-result-subtitle {
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}

/* 视频生成错误信息 */
.orch-video-error {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    animation: fadeInUp 0.3s ease;
}
.orch-video-error-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}
.orch-video-error-content {
    flex: 1;
    min-width: 0;
}
.orch-video-error-title {
    font-size: 14px;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 4px;
}
.orch-video-error-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}
.orch-video-error-log {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 220px;
    overflow-y: auto;
}
.orch-video-error-log-title {
    font-size: 12px;
    font-weight: 600;
    color: #f87171;
    margin-bottom: 8px;
}
.orch-shot-log {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(239, 68, 68, 0.15);
}
.orch-shot-log:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.orch-shot-log-head {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
    margin-bottom: 3px;
}
.orch-shot-log-row {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    margin-left: 6px;
    line-height: 1.5;
}

/* ============================================================
   多分镜工作流（Multi-Shot）
   ============================================================ */
.ms-image-section { margin-bottom: 20px; }
.ms-image-label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.ms-image-card { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 12px; border: 1px solid var(--border-color); }
.ms-image-preview-wrap { flex-shrink: 0; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: var(--bg-card); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); }
.ms-image-preview { width: 100%; height: 100%; object-fit: contain; }
.ms-image-placeholder { color: var(--text-tertiary); font-size: 12px; text-align: center; }
.ms-image-actions { display: flex; flex-direction: column; gap: 8px; }
.ms-btn-regenerate { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s; }
.ms-btn-regenerate:hover { border-color: var(--primary); color: var(--primary); }
.ms-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ms-scene-card { background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 8px; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.ms-scene-card .ms-image-preview-wrap { width: 100%; height: 100px; }
.ms-scene-label { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; text-align: center; word-break: break-all; }
.ms-btn-scene-refresh { margin-top: 6px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 4px; background: transparent; color: var(--text-tertiary); font-size: 11px; cursor: pointer; transition: all 0.2s; text-align: center; }
.ms-btn-scene-refresh:hover { border-color: var(--primary); color: var(--primary); background: rgba(232,184,75,0.08); }
.ms-btn-scene-refresh:disabled { opacity: 0.6; cursor: not-allowed; }
.ms-scene-card.error { border-color: #ef4444; background: rgba(239,68,68,0.04); }
.ms-scene-card .ms-scene-error { font-size: 11px; color: #ef4444; margin-top: 4px; text-align: center; }
/* 角色图/场景图可点击放大查看细节 */
.ms-image-preview { cursor: zoom-in; }
.ms-image-preview:hover { filter: brightness(1.1); }
/* 图片点击放大预览弹窗 */
.img-preview-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(4px);
}
.img-preview-inner {
  position: relative; max-width: 92vw; max-height: 92vh;
  display: flex; align-items: center; justify-content: center;
}
.img-preview-inner img {
  max-width: 92vw; max-height: 92vh; border-radius: 10px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6); background: #fff;
}
.img-preview-close {
  position: absolute; top: -16px; right: -16px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #fff; color: #111; font-size: 18px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.img-preview-close:hover { background: #f0f0f0; }
.img-preview-hint {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 12px; white-space: nowrap;
}
.ms-action-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ms-shots-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ms-progress-sticky {
    position: sticky;
    bottom: 0;
    background: var(--bg-elevated);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-top: 12px;
    z-index: 10;
}
.ms-shot-item { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; }
.ms-shot-item.success { border-color: #22c55e40; }
.ms-shot-item.failed { border-color: #ef444440; background: rgba(239,68,68,0.04); }
.ms-shot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ms-shot-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ms-shot-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.ms-shot-status.done { background: rgba(34,197,94,0.12); color: #22c55e; }
.ms-shot-status.generating { background: rgba(232,184,75,0.12); color: #E8B84B; animation: pulse 1.5s infinite; }
.ms-shot-status.failed-status { background: rgba(239,68,68,0.12); color: #ef4444; }
.ms-shot-status.pending-status { background: rgba(156,163,175,0.12); color: #9ca3af; }
.ms-shot-body { display: flex; gap: 12px; align-items: flex-start; }
.ms-shot-preview { width: 160px; height: 120px; border-radius: 6px; overflow: hidden; background: #000; flex-shrink: 0; position: relative; }
.ms-shot-preview video { width: 100%; height: 100%; object-fit: cover; }
.ms-shot-preview-clickable { cursor: pointer; }
.ms-shot-preview-clickable:hover .ms-shot-play-overlay { opacity: 1; }
.ms-shot-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35);
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}
.ms-shot-play-overlay svg { color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.ms-shot-preview-error { display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,0.08); border: 1px dashed #ef444440; }
.ms-btn-skip { color: #9ca3af; border-color: var(--border-subtle); }
.ms-btn-skip:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.06); }
.ms-shot-info { flex: 1; min-width: 0; }
.ms-shot-prompt { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; word-break: break-word; max-height: 60px; overflow-y: auto; }
.ms-shot-error {
    font-size: 11px;
    color: #ef4444;
    line-height: 1.4;
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(239,68,68,0.08);
    border-radius: var(--radius-sm);
    border-left: 2px solid #ef4444;
    word-break: break-word;
}
.ms-shot-actions { display: flex; gap: 8px; margin-top: 8px; }
.ms-btn-rerun { padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 11px; cursor: pointer; transition: all 0.2s; }
.ms-btn-rerun:hover { border-color: var(--primary); color: var(--primary); }

/* 响应式 */
@media (max-width: 900px) {
    .orch-prompt-dual {
        grid-template-columns: 1fr;
    }
    .orch-step2-layout {
        flex-direction: column;
    }
    .orch-img-panel,
    .orch-shots-panel {
        width: 100%;
        min-height: auto;
    }
    .orch-script-editor { min-height: 300px; }
    .orch-prompt-edit { min-height: 180px; }
}

/* ============================================================
   爆款视频素材库
   ============================================================ */
.material-section { margin-bottom: 32px; }
.material-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.material-title-group { display: flex; flex-direction: column; gap: 4px; }
.material-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.material-subtitle { font-size: 12px; color: var(--text-tertiary); }
.material-header-actions { display: flex; align-items: center; gap: 12px; }
.material-count { font-size: 12px; color: var(--text-tertiary); }
.btn-refresh-materials { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.btn-refresh-materials:hover { border-color: var(--primary); color: var(--primary); }
.btn-refresh-materials svg { transition: transform 0.3s; }
.btn-refresh-materials:hover svg { transform: rotate(180deg); }
.refresh-cost-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: rgba(239,68,68,0.12); color: #ef4444; font-weight: 500; }
.btn-refresh-materials:hover .refresh-cost-badge { background: rgba(239,68,68,0.2); }
.material-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.material-filter-chip { padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s; }
.material-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.material-filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.material-grid { display: flex; flex-direction: column; gap: 0; max-height: 520px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.material-grid:hover { scrollbar-color: var(--bg-hover) transparent; }
.material-grid::-webkit-scrollbar { width: 4px; }
.material-grid::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.material-grid:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }

/* 素材分组区域：我的刷新 / 精选推荐 */
.material-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; margin-top: 4px; }
.material-section-icon { font-size: 16px; }
.material-section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.material-section-count { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 10px; }
.material-section-hint { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.material-grid-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 4px; }
@media (max-width: 600px) { .material-grid-row { grid-template-columns: 1fr; } }

/* 用户个人素材「我的」标签 */
.material-source-badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #C9A227, #D9A93B); z-index: 2; }
/* 动态渐变封面动画 */
.material-thumb-placeholder { animation: gradientShift 3s ease infinite; position: relative; overflow: hidden; }
.mat-anim-0 { animation-duration: 2.8s; }
.mat-anim-1 { animation-duration: 3.5s; }
.mat-anim-2 { animation-duration: 2.5s; }
.mat-anim-3 { animation-duration: 4s; }
.mat-anim-4 { animation-duration: 3.2s; }
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* 封面浮动光点 */
.material-thumb-placeholder::before {
    content: ''; position: absolute; width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
    border-radius: 50%; top: -40px; left: -40px;
    animation: floatOrb 5s ease-in-out infinite;
    pointer-events: none;
}
.material-thumb-placeholder::after {
    content: ''; position: absolute; width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%; bottom: -20px; right: -20px;
    animation: floatOrb 7s ease-in-out infinite reverse;
    pointer-events: none;
}
@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    33% { transform: translate(30px, 20px) scale(1.2); opacity: 0.9; }
    66% { transform: translate(-20px, 10px) scale(0.9); opacity: 0.5; }
}
/* 播放按钮 */
.mat-play-btn {
    position: absolute; width: 48px; height: 48px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.5); color: #fff; font-size: 20px;
    opacity: 0; transform: scale(0.8); transition: all 0.3s ease;
    pointer-events: none; z-index: 3;
}
.material-card:hover .mat-play-btn { opacity: 1; transform: scale(1); }
/* 卡片更强 hover */
.material-card { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.material-card:hover { border-color: var(--primary); transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 32px rgba(201, 162, 39,0.2); }
/* 视频预览浮层 */
.video-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10001; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); animation: fadeIn 0.2s ease; }
.video-preview-container { position: relative; display: flex; flex-direction: column; align-items: center; }
.video-preview-close { position: absolute; top: -36px; right: 0; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.video-preview-close:hover { background: rgba(255,255,255,0.3); }
@media (max-width: 900px) { .material-grid { grid-template-columns: 1fr; } }

/* 积分确认弹窗 */
.credit-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease; }
.credit-confirm-dialog { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px 32px; max-width: 380px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.25s ease; }
.credit-confirm-icon { font-size: 40px; margin-bottom: 12px; }
.credit-confirm-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; }
.credit-confirm-msg { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px 0; line-height: 1.5; }
.credit-confirm-cost { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15); border-radius: 10px; margin-bottom: 12px; }
.credit-confirm-cost .cost-label { font-size: 12px; color: var(--text-tertiary); }
.credit-confirm-cost .cost-value { font-size: 24px; font-weight: 700; color: #ef4444; }
.credit-confirm-cost .cost-value small { font-size: 13px; font-weight: 400; opacity: 0.8; }
.credit-confirm-balance { font-size: 12px; color: var(--text-tertiary); margin-bottom: 20px; }
.credit-confirm-balance strong { color: var(--text-primary); }
.insufficient-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(239,68,68,0.15); color: #ef4444; font-size: 10px; }
.credit-confirm-actions { display: flex; gap: 10px; }
.credit-confirm-actions button { flex: 1; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.credit-confirm-actions .btn-cancel { background: var(--bg-hover); color: var(--text-secondary); }
.credit-confirm-actions .btn-cancel:hover { background: var(--bg-active); }
.credit-confirm-actions .btn-confirm { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; }
.credit-confirm-actions .btn-confirm:hover { opacity: 0.9; transform: translateY(-1px); }
.credit-confirm-actions .btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: var(--bg-elevated); color: var(--text-disabled); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.material-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.material-card:hover { border-color: var(--primary); transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(201, 162, 39,0.25); }
.material-thumb { width: 100%; aspect-ratio: 16/9; background: var(--bg-secondary); position: relative; overflow: hidden; }
.material-thumb img, .material-thumb video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.material-card:hover .material-thumb img { transform: scale(1.08); }
.material-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.material-badge.hot { background: rgba(239,68,68,0.9); color: #fff; }
.material-badge.new { background: rgba(34,197,94,0.9); color: #fff; }
.material-badge.rising { background: rgba(245,158,11,0.9); color: #fff; }
.material-duration { position: absolute; bottom: 8px; right: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; }
.material-info { padding: 12px; }
.material-info-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.material-info-meta { display: flex; align-items: center; justify-content: space-between; }
.material-info-category { font-size: 11px; color: var(--text-tertiary); }
.material-info-popularity { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #f59e0b; }
.material-empty { text-align: center; padding: 40px 20px; color: var(--text-tertiary); }
.material-empty svg { margin-bottom: 16px; }
.material-empty p { margin-bottom: 16px; font-size: 14px; }
.btn-generate-materials { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: var(--primary); color: #fff; border: none; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-generate-materials:hover { background: var(--primary-hover); }
.material-card-thumb { position: relative; width: 100%; height: 140px; background: var(--bg-secondary); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.material-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.material-thumb-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-hover)); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.material-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; opacity: 0; transition: opacity 0.3s ease; }
.material-card:hover .material-thumb-overlay { opacity: 1; }
/* 视频进度条 */
.mat-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.15); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.material-card:hover .mat-progress-bar { opacity: 1; }
.mat-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ef4444, #f97316); border-radius: 2px; }
.material-card:hover .mat-progress-fill { animation: matProgress 2s ease-in-out infinite; }
@keyframes matProgress { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
/* 中央播放按钮 */
.mat-center-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8); width: 44px; height: 44px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.6); color: #fff; font-size: 16px; opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 5; }
.material-card:hover .mat-center-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.mat-center-play::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); animation: playPulse 1.5s ease-out infinite; }
@keyframes playPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
.material-card-body { padding: 12px; }
.material-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.material-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.material-card-tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; background: var(--bg-secondary); color: var(--text-secondary); }
.material-card-tag.accent { background: var(--accent-soft); color: var(--accent); }
.material-card-footer { display: flex; align-items: center; justify-content: space-between; }
.material-score { font-size: 12px; font-weight: 600; color: #f59e0b; }
.clone-btn-mini { padding: 4px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); transition: all 0.2s; }
.clone-btn-mini:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   API 生成结果卡片
   ============================================================ */
.gen-result-thumb { height: 160px; }
.gen-result-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gen-result-thumb video { width: 100%; height: 100%; object-fit: cover; }
.gen-result-card:hover .gen-result-thumb img { transform: scale(1.05); }
.gen-type-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 2; }
.gen-model-badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #F2D98F; background: rgba(201, 162, 39,0.2); backdrop-filter: blur(4px); z-index: 2; }
.gen-fallback { background: linear-gradient(135deg, #C9A227, #D9A93B); display: flex; align-items: center; justify-content: center; }
.gen-fallback::after { content: '\uD83D\uDDBC'; font-size: 32px; opacity: 0.5; }

/* ============================================================
   一键复刻弹窗
   ============================================================ */
.clone-modal-dialog {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 92vw; max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.25s ease;
}
.clone-modal-subtitle {
    display: block;
    font-size: 13px; color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 400;
}
.clone-modal-body { padding: 0 24px 24px; }
.clone-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}
.clone-preview-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
}
.clone-preview-thumb {
    width: 100%; height: 160px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; border-radius: 8px;
}
.clone-preview-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clone-preview-thumb:hover img { transform: scale(1.06); }
.clone-preview-thumb::after {
    content: '\25B6'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.9);
    width: 40px; height: 40px; background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.5); color: #fff; font-size: 14px;
    opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clone-preview-thumb:hover::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.clone-preview-placeholder {
    width: 100%; height: 100%;
}
.clone-meta { padding: 12px; }
.clone-meta-title {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}
.clone-meta-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.clone-tag {
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 500;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}
.clone-meta-desc {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.clone-form-panel {
    display: flex; flex-direction: column; gap: 14px;
}
.clone-form-group label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.clone-form-group .required { color: #ef4444; }
.clone-input, .clone-textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.clone-input:focus, .clone-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.clone-textarea { resize: vertical; }
.clone-upload-area {
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.clone-upload-area:hover {
    border-color: var(--accent);
    background: var(--accent-soft, rgba(201, 162, 39,0.04));
}
.clone-upload-content {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
}
.clone-upload-hint { font-size: 11px; opacity: 0.6; }
.clone-upload-preview {
    position: relative; width: 100%; max-height: 160px;
}
.clone-upload-preview img {
    width: 100%; max-height: 160px;
    object-fit: contain;
    border-radius: 8px;
}
.clone-upload-remove {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
/* 多图上传网格预览 */
.clone-upload-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}
.clone-upload-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
}
.clone-upload-preview-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.clone-upload-preview-item .clone-upload-remove {
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    font-size: 14px;
    z-index: 2;
}
.clone-upload-add-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px dashed var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 4px;
}
.clone-upload-add-more:hover {
    border-color: var(--accent);
    background: var(--accent-soft, rgba(201, 162, 39,0.04));
}
.duration-chip-row { display: flex; gap: 8px; }
.duration-chip {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.duration-chip:hover { border-color: var(--accent); color: var(--accent); }
.duration-chip.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.clone-cost-info {
    font-size: 12px; color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

/* ================================================================
   图生视频 (Img2Video) - 新增组件样式
   ================================================================ */

/* 提示词操作按钮 */
.action-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; font-size: 12px; color: var(--text-tertiary);
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: 16px; cursor: pointer; transition: all var(--duration-fast);
}
.action-chip:hover {
    border-color: var(--border-hover); color: var(--text-secondary);
}

/* 模式切换标签 */
.mode-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    padding: 4px; background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}
.mode-tab {
    flex: 1; padding: 8px 16px; font-size: 13px; font-weight: 500;
    color: var(--text-tertiary); background: transparent;
    border: none; border-radius: 6px; cursor: pointer;
    transition: all var(--duration-fast);
}
.mode-tab:hover { color: var(--text-secondary); }
.mode-tab.active {
    background: var(--accent); color: #fff;
    box-shadow: 0 2px 8px rgba(232, 184, 75,0.25);
}
.mode-tab:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: transparent; color: var(--text-disabled);
}
.mode-panel {
    transition: opacity var(--duration-fast);
}

/* 上传区域拖拽高亮 */
.upload-area.dragover {
    border-color: var(--accent) !important;
    background: var(--accent-soft, rgba(201, 162, 39,0.06)) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39,0.12);
}

/* 资产库选取行 */
.upload-ref-row {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.upload-ref-hint {
    font-size: 11px; color: var(--text-tertiary); line-height: 1.4;
}
.asset-pick-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 6px 14px; font-size: 12px; color: var(--text-secondary);
    background: var(--bg-elevated); border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: all var(--duration-fast);
}
.asset-pick-btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft, rgba(201, 162, 39,0.04));
}

/* 双栏上传（首尾帧模式） */
.dual-upload-row {
    display: flex; gap: 16px;
}
.dual-upload-half {
    flex: 1; display: flex; flex-direction: column;
}
.dual-upload-label {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 8px;
}
.dual-upload-half .upload-area {
    min-height: 140px;
}

/* 多图参考网格 */
.multi-ref-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding: 10px 0;
}
.multi-ref-card {
    position: relative; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    max-height: 180px; display: flex; align-items: center; justify-content: center;
}
.multi-ref-card img {
    max-width: 100%; max-height: 180px;
    object-fit: contain; display: block;
}
.multi-ref-remove-btn {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    border-radius: 50%; font-size: 14px; cursor: pointer;
    line-height: 1; transition: background 0.2s;
}
.multi-ref-remove-btn:hover { background: var(--danger, #ef4444); }

/* 图生视频参考图紧凑条（放在输入框下方） */
.img2video-ref-inline {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px;
}
.img2video-ref-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 10px;
}
.img2video-ref-header .mode-tabs { margin-bottom: 0; flex: 0 0 auto; }

/* 上传卡片（未选图状态）：明显可点 */
.img2video-ref-upload {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    position: relative; overflow: hidden;
    background: var(--bg-elevated);
}
.img2video-ref-upload:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow); }
.img2video-ref-upload.dragover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow); }
.img2video-ref-upload .upload-content { display: block; }
/* o 版：图生视频第二排工具入口 + 空状态提示 */
.iv-ref-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* ═══════════ 图生视频参考区按钮 — 精致扁平风 ═══════════ */
button.iv-ref-tool,
.iv-ref-tool {
    display: inline-flex !important; align-items: center !important; gap: 6px;
    padding: 8px 16px !important; border-radius: 12px !important; font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important; appearance: none !important;
    border: 1.5px solid transparent !important;
    font-family: inherit !important; outline: none !important;
    line-height: 1.3 !important; text-decoration: none !important;
    letter-spacing: 0.02em !important;
    box-sizing: border-box !important;
}
/* ── + 参考：金色虚线次按钮 ── */
button.iv-ref-tool.iv-ref-add,
.iv-ref-tool.iv-ref-add {
    border-color: #E8B84B !important;
    border-style: dashed !important;
    background: rgba(232,184,75,0.10) !important;
    color: #E8B84B !important;
}
button.iv-ref-tool.iv-ref-add:hover,
.iv-ref-tool.iv-ref-add:hover {
    border-style: solid !important;
    border-color: #C9A227 !important;
    background: rgba(201, 162, 39,0.18) !important;
    color: #c7d2fe !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(201, 162, 39,0.25) !important;
}
button.iv-ref-tool.iv-ref-add:active,
.iv-ref-tool.iv-ref-add:active { transform: translateY(0) !important; }
/* ── 资产库：主色实心渐变主按钮 ── */
button.iv-ref-tool.iv-ref-asset,
.iv-ref-tool.iv-ref-asset {
    border-color: transparent !important;
    background: linear-gradient(135deg, #E8B84B 0%, #C9A227 50%, #D9A93B 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    box-shadow: 0 2px 8px rgba(201, 162, 39,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
button.iv-ref-tool.iv-ref-asset:hover,
.iv-ref-tool.iv-ref-asset:hover {
    background: linear-gradient(135deg, #D9A93B 0%, #E8B84B 50%, #F2D98F 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 162, 39,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
button.iv-ref-tool.iv-ref-asset:active,
.iv-ref-tool.iv-ref-asset:active { transform: translateY(0) !important; }
/* ── 禁用态 ── */
button.iv-ref-tool:disabled,
.iv-ref-tool:disabled {
    opacity: 0.4 !important; cursor: not-allowed !important;
    transform: none !important; box-shadow: none !important;
    filter: grayscale(1);
}
.iv-panel-hint { font-size: 11px; color: var(--text-tertiary); margin-bottom: 8px; }
.img2video-ref-upload .upload-content.iv-empty-hint { display: flex; align-items: center; justify-content: center; padding: 14px 16px; min-height: 56px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

/* CTA 文案区 */
.upload-cta {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 14px 16px; text-align: left;
}
.upload-cta-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
}
.upload-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upload-cta-text strong { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.upload-cta-text span { font-size: 12px; color: var(--text-tertiary); }

/* 已选图：缩略图条 */
.img2video-ref-upload .upload-preview {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; text-align: left;
}
.upload-thumb {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: var(--radius-sm); object-fit: cover; display: block;
    background: var(--bg-input);
}
.upload-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.upload-fname {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-meta-actions { display: flex; align-items: center; gap: 14px; }
.btn-text {
    font-size: 12px; color: var(--accent); background: none; border: none;
    cursor: pointer; padding: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 3px;
}
.btn-text:hover { text-decoration: underline; }
.btn-text-danger { color: var(--danger); }

.img2video-ref-dual { display: flex; gap: 10px; }
.img2video-ref-upload.half { flex: 1; }
.img2video-ref-inline .upload-ref-row { margin-top: 8px; gap: 8px; flex-wrap: wrap; }
.img2video-ref-inline .upload-ref-hint { font-size: 11px; }
.img2video-ref-inline .multi-ref-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 0;
}
.img2video-ref-inline .multi-ref-card { max-height: 64px; }
.img2video-ref-inline .multi-ref-card img { max-height: 64px; }

/* 图生视频 k 版：底部主按钮积分徽章 + 首尾帧/多图入口紧凑化 */
.credit-badge {
    margin-left: 6px; padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.22); font-size: 12px; font-weight: 500; line-height: 1.4;
}
/* 首尾帧：CTA 收小、隐藏格式提示 */
.img2video-ref-dual .upload-cta { padding: 10px 12px; gap: 8px; }
.img2video-ref-dual .upload-cta-icon { width: 26px; height: 26px; }
.img2video-ref-dual .upload-cta-text strong { font-size: 13px; }
.img2video-ref-dual .upload-preview { padding: 6px 10px; }
.img2video-ref-dual .upload-thumb { width: 48px; height: 48px; }
/* 多图：CTA 收小 + 横排缩略图 + 末尾添加框 */
#img2videoMultiRefZone .upload-cta { padding: 10px 12px; gap: 8px; }
#img2videoMultiRefZone .upload-cta-icon { width: 26px; height: 26px; }
#img2videoMultiRefZone .upload-cta-text strong { font-size: 13px; }
#img2videoMultiRefZone .multi-ref-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 6px 0; }
#img2videoMultiRefZone .multi-ref-grid { display: flex; flex-wrap: wrap; gap: 8px; }
#img2videoMultiRefZone .multi-ref-card { width: 56px; height: 56px; max-height: 56px; border-radius: var(--radius-md); }
#img2videoMultiRefZone .multi-ref-card img,
#img2videoMultiRefZone .multi-ref-card video { width: 100%; height: 100%; object-fit: cover; max-height: none; max-width: none; }
#img2videoMultiRefZone .multi-ref-remove-btn { width: 18px; height: 18px; font-size: 12px; }
.multi-ref-add-more {
    width: 56px; height: 56px; flex-shrink: 0; display: none;
    border: 1px dashed var(--border-default); border-radius: var(--radius-md);
    background: var(--bg-elevated); color: var(--text-tertiary);
    align-items: center; justify-content: center; cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.multi-ref-add-more:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* 图生视频 k 版：紧凑布局（去掉大块空上传区，模式+按钮单行，预览栈动态渲染） */
.img2video-ref-inline { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 12px; }
.iv-ref-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-ref-row .mode-tabs { margin-bottom: 0; flex: 0 0 auto; }
.iv-ref-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
/* 预览栈：未上传时零额外空间，仅在有参考图时展开 */
.iv-preview-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.iv-ref-hint { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin-top: 8px; padding: 8px 10px; background: var(--bg-input); border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); }
.iv-param-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 10px; padding: 8px 10px; background: rgba(201, 162, 39,0.07); border: 1px solid rgba(201, 162, 39,0.20); border-radius: var(--radius-md); }
.iv-prev-card {
    position: relative; width: 72px; height: 72px; flex-shrink: 0;
    border-radius: var(--radius-md); overflow: hidden; background: var(--bg-input);
    border: 1px solid var(--border-subtle);
}
.iv-prev-card img, .iv-prev-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-prev-remove {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; line-height: 16px;
    border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
    font-size: 13px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.iv-prev-remove:hover { background: var(--danger); }
.iv-prev-label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px;
    font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.6));
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-prev-add {
    width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border-default); border-radius: var(--radius-md);
    background: var(--bg-elevated); color: var(--text-tertiary); cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.iv-prev-add:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.img2video-ref-inline.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* 底部操作行与文生图风格一致 */
.img2video-ref-inline + .prompt-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }

/* 图生视频 @ 引用资产：提示词框下方小缩略图卡（带名称，直接以 URL 显示，规避云地址 CORS 取图问题） */
/* 图生视频资产托盘（参考图统一入口，位于提示词框上方） */
.img2video-tray { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 12px; }
.img2video-tray-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.img2video-tray-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.img2video-tray-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.img2video-tray-items { display: flex; flex-wrap: wrap; gap: 10px; }
.img2video-tray-empty { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; padding: 10px 12px; border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); }
.img2video-tray-hint { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; margin-top: 8px; }
.iv-tray-card { position: relative; width: 84px; flex-shrink: 0; }
.iv-tray-thumb { width: 84px; height: 84px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-input); border: 1px solid var(--border-subtle); object-fit: cover; display: block; }
.iv-tray-card.is-video .iv-tray-thumb { border-color: var(--accent); }
.iv-tray-num { font-size: 10px; line-height: 1.2; color: var(--text-secondary); margin-top: 3px; text-align: center; word-break: break-all; }
.iv-tray-role { position: absolute; top: 4px; left: 4px; border: none; border-radius: 6px; background: rgba(0,0,0,0.55); color: #fff; font-size: 10px; line-height: 1; padding: 3px 6px; cursor: pointer; }
.iv-tray-role:hover { background: var(--accent); }
.iv-tray-remove { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.iv-tray-remove:hover { background: var(--danger); }

/* 高级设置 */
.advanced-options {
    display: flex; flex-direction: column; gap: 12px;
}
.advanced-option {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; user-select: none;
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    transition: border-color var(--duration-fast);
}
.advanced-option:hover { border-color: var(--border-hover); }
.advanced-option input[type="checkbox"] {
    margin-top: 2px; accent-color: var(--accent);
    width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
.option-text {
    display: flex; flex-direction: column; gap: 2px;
}
.option-title {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.option-desc {
    font-size: 11px; color: var(--text-tertiary);
}

/* 案例展示区 */
.case-showcase-section {
    margin-bottom: 24px;
}
.case-showcase-section .section-header {
    margin-bottom: 12px;
}
.case-showcase-section .section-header h3 {
    font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px 0;
}
.case-showcase-section .section-subtitle {
    font-size: 12px; color: var(--text-tertiary); display: block;
}
.case-showcase-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    box-sizing: border-box;
}
.case-showcase-grid > * {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
.case-showcase-grid img,
.case-showcase-grid video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
}
/* ARK动态渲染的案例缩略图 — 填充容器保持16:9 */
.case-showcase-thumb img,
.case-showcase-thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0; left: 0;
}
.case-showcase-thumb .case-play-icon,
.case-showcase-thumb .play-icon {
    display: none !important;
    opacity: 0 !important;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}
.case-showcase-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    cursor: pointer; transition: all var(--duration-fast);
    overflow: hidden;
}
.case-showcase-card:hover {
    border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.case-showcase-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.case-showcase-thumb .play-icon {
    color: rgba(255,255,255,0.85);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform var(--duration-fast), opacity var(--duration-fast);
    opacity: 0.8;
}
.case-showcase-card:hover .case-showcase-thumb .play-icon {
    transform: scale(1.1);
    opacity: 1;
}
.case-showcase-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.case-showcase-name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    line-height: 1.4;
}
.case-showcase-desc {
    font-size: 11px; color: var(--text-tertiary); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 图生视频/文生视频案例展示 - 渐变卡片网格 */
#caseShowcaseSection .case-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
#caseShowcaseSection .case-showcase-card {
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: all var(--duration-fast);
}
#caseShowcaseSection .case-showcase-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
#caseShowcaseSection .case-showcase-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 100px;
    border-radius: 0;
    flex-shrink: 0;
}
#caseShowcaseSection .case-showcase-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#caseShowcaseSection .case-showcase-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
#caseShowcaseSection .case-showcase-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* 真人出镜案例展示 - 视频模板卡片 */
#avatarCaseShowcaseSection .case-showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
#avatarCaseShowcaseSection .case-showcase-card {
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: all var(--duration-fast);
    overflow: hidden;
}
#avatarCaseShowcaseSection .case-showcase-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
#avatarCaseShowcaseSection .case-showcase-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 120px;
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#avatarCaseShowcaseSection .case-showcase-thumb .play-icon {
    width: 40px;
    height: 40px;
    color: rgba(255,255,255,0.9);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    transition: transform var(--duration-fast), opacity var(--duration-fast);
    opacity: 0.85;
}
#avatarCaseShowcaseSection .case-showcase-card:hover .case-showcase-thumb .play-icon {
    transform: scale(1.12);
    opacity: 1;
}
#avatarCaseShowcaseSection .case-showcase-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#avatarCaseShowcaseSection .case-showcase-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
#avatarCaseShowcaseSection .case-showcase-desc {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.45;
}

/* 文生图案例展示 - overlay 标签卡片布局 */
#imgCaseShowcaseGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#imgCaseShowcaseGrid .case-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
}

#imgCaseShowcaseGrid .case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

#imgCaseShowcaseGrid .case-card:hover img {
    transform: scale(1.05);
}

#imgCaseShowcaseGrid .case-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.5);
    padding: 5px 12px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    pointer-events: none;
}

#imgCaseShowcaseGrid .case-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    z-index: 2;
}

/* 加载动画 */
.spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.6s linear infinite; vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.clone-btn-generate {
    width: 100%; padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.clone-btn-generate:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.clone-btn-generate:disabled {
    opacity: 0.5; cursor: not-allowed; background: var(--bg-elevated); color: var(--text-disabled);
}
.clone-progress {
    padding: 24px 0; text-align: center;
}
.clone-progress-bar {
    width: 100%; height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}
.clone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #D9A93B);
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;
}
.clone-progress-text {
    font-size: 13px; color: var(--text-secondary);
}
.clone-result { padding: 8px 0; }
.clone-result-actions {
    display: flex; gap: 12px; margin-top: 16px;
    justify-content: center;
}
.clone-result-actions .btn-primary {
    padding: 10px 20px;
    border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.clone-result-actions .btn-secondary {
    padding: 10px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text-primary);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
@media (max-width: 700px) {
    .clone-layout { grid-template-columns: 1fr; }
    .clone-preview-panel { display: none; }
    .material-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================
   爆款视频素材库 - 卡片样式
   ============================================================ */
.material-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.material-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.material-thumb { width: 100%; aspect-ratio: 16/9; background: var(--bg-secondary); position: relative; overflow: hidden; }
.material-thumb img, .material-thumb video { width: 100%; height: 100%; object-fit: cover; }
.material-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.material-badge.hot { background: rgba(239,68,68,0.9); color: #fff; }
.material-badge.new { background: rgba(34,197,94,0.9); color: #fff; }
.material-badge.rising { background: rgba(245,158,11,0.9); color: #fff; }
.material-duration { position: absolute; bottom: 8px; right: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; }
.material-info { padding: 12px; }
.material-info-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.material-info-meta { display: flex; align-items: center; justify-content: space-between; }
.material-info-category { font-size: 11px; color: var(--text-tertiary); }
.material-info-popularity { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #f59e0b; }
.material-empty { text-align: center; padding: 40px 20px; color: var(--text-tertiary); }
.material-empty svg { margin-bottom: 16px; }
.material-empty p { margin-bottom: 16px; font-size: 14px; }
.btn-generate-materials { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: var(--primary); color: #fff; border: none; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-generate-materials:hover { background: var(--primary-hover); }

/* ============================================================
   火山 ARK 素材库专用样式
   ============================================================ */
/* 素材来源切换下拉框 */
.material-source-tabs {
    display: flex;
    margin-bottom: 12px;
}
.material-source-select {
    width: 100%;
    min-width: 140px;
    height: 38px;
    padding: 0 32px 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background-color: rgba(30,30,45,0.85);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.7)' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 36px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.25);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.material-source-select:hover {
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
.material-source-select:focus {
    border-color: rgba(232, 184, 75,0.6);
    box-shadow: 0 0 0 2px rgba(232, 184, 75,0.2);
}
.material-source-select option {
    background: #12121a;
    color: #ffffff;
    font-size: 13px;
}

/* ARK 搜索栏 */
.material-ark-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
}
.material-ark-search-input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(30,30,58,0.8);
    color: #e2e2e8;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.material-ark-search-input::placeholder { color: #6b7280; }
.material-ark-search-input:focus { border-color: #E8B84B; }

.material-ark-type-select {
    height: 36px;
    padding: 0 8px;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(30,30,58,0.8);
    color: #e2e2e8;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    min-width: 70px;
}
.material-ark-type-select:focus { border-color: #E8B84B; }
.material-ark-type-select option {
    background: #1a1a2e;
    color: #e2e2e8;
}

/* ARK 分页 */
.material-ark-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0 4px;
}
.material-ark-pagination .btn-page {
    padding: 6px 14px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.material-ark-pagination .btn-page:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.material-ark-pagination .btn-page:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
    color: var(--text-disabled);
}
.material-ark-pagination .page-info {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 140px;
    text-align: center;
}

/* ARK 素材卡片 */
.ark-material-card {
    border-color: rgba(232, 184, 75,0.15) !important;
}
.ark-material-card:hover {
    border-color: #E8B84B !important;
    box-shadow: 0 4px 24px rgba(232, 184, 75,0.2) !important;
}
.ark-material-thumb {
    background: linear-gradient(135deg, rgba(232, 184, 75,0.08), rgba(217, 169, 59,0.04));
}
.ark-source-badge {
    background: linear-gradient(135deg, #E8B84B, #D9A93B) !important;
    color: #fff !important;
    font-size: 9px !important;
    padding: 2px 8px !important;
}
.ark-actions-overlay {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ark-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ark-action-btn:hover {
    background: rgba(232, 184, 75,0.7);
    border-color: #E8B84B;
    transform: scale(1.1);
}
.ark-card-body {
    background: rgba(20,20,40,0.5);
}
.ark-card-title {
    color: #e2e2e8 !important;
}
.ark-card-tags { margin-top: 4px; }
.ark-tag:hover { background: rgba(232, 184, 75,0.15) !important; color: #F2D98F !important; }

/* ARK 加载态 */
.material-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}
.material-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(232, 184, 75,0.2);
    border-top-color: #E8B84B;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
.material-loading p {
    margin-top: 12px;
    font-size: 13px;
}

/* ARK 素材叠加层预览 */
.ark-preview-overlay .video-preview-container {
    max-width: 95vw;
    max-height: 90vh;
}

/* ============================================================
   克隆弹窗
   ============================================================ */
.clone-modal { max-width: 560px; }
.clone-modal-body { padding: 0; }
.clone-preview { display: flex; gap: 16px; padding: 20px 24px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.clone-preview-thumb { width: 120px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-tertiary); }
.clone-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.clone-preview-info { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 1; min-width: 0; }
.clone-preview-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.clone-preview-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); }
.clone-meta-sep { opacity: 0.4; }
.clone-form { padding: 20px 24px; }
.clone-field { margin-bottom: 16px; }
.clone-field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.clone-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--input-bg); color: var(--text-primary); font-size: 13px; line-height: 1.5; resize: vertical; transition: border-color 0.2s; }
.clone-field textarea:focus { outline: none; border-color: var(--primary); }
.clone-field textarea[readonly] { background: var(--bg-secondary); cursor: default; }
.clone-field-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-tertiary); }
.clone-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px; }
.clone-actions .btn-secondary { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.clone-actions .btn-secondary:hover { border-color: var(--text-primary); color: var(--text-primary); }
.clone-actions .btn-primary { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 8px; border: none; background: var(--primary); color: #fff; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.clone-actions .btn-primary:hover { background: var(--primary-hover); }

/* ================================================================
   ADVANCED VIDEO SETTINGS - 高级视频设置（Toggle开关 & 克隆设置网格）
   ================================================================ */
/* Toggle 开关（Seedance 2.0 有声视频/水印控制 + 设置弹窗） */
.toggle-row {
    display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.toggle-item {
    display: flex; align-items: center; gap: 8px;
}
.toggle-switch {
    position: relative;
    display: inline-flex;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: 26px;
    transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    transition: transform 0.25s var(--ease-out);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px rgba(0,0,0,0.18);
}
.toggle-label { font-size: 13px; color: var(--text-secondary); user-select: none; }
.toggle-label small { font-size: 11px; color: var(--text-tertiary); margin-left: 4px; }

/* 设置弹窗内独立开关增强 */
.profile-setting-row .toggle-switch {
    width: 48px;
    height: 28px;
}
.profile-setting-row .toggle-slider {
    border-radius: 28px;
}
.profile-setting-row .toggle-slider::before {
    width: 22px;
    height: 22px;
    top: 2px;
    left: 2px;
}
.profile-setting-row .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* ============ 个人主页抽屉 ============ */
.profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1200; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.profile-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
/* ============ 个人主页侧滑抽屉（参考小云雀左侧抽屉） ============ */
.profile-bottom-sheet {
    position: fixed; left: 0; top: 0; bottom: 0; width: 260px; max-width: 85vw; z-index: 1201;
    background: var(--bg-elevated, #12121a); color: var(--text-primary);
    display: flex; flex-direction: column; padding: 16px 0;
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.16,1,.3,1);
    border-radius: 0 16px 0 0;
    box-shadow: 8px 0 40px rgba(0,0,0,.28);
    border-right: 1px solid var(--border-subtle);
}
.profile-bottom-sheet.open { transform: translateX(0); }
.profile-sheet-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px 12px; margin: 0 14px 6px; border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}
.profile-sheet-header .profile-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#f59e0b,#ef4444); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 16px; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(232,184,75,.3), 0 0 12px rgba(232,184,75,.12); }
.profile-sheet-header .profile-meta { flex: 1; min-width: 0; overflow: hidden; }
.profile-sheet-header .profile-name { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-primary); font-size: 15px; white-space: nowrap; overflow: hidden; }
.profile-sheet-header .profile-badge { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; color: #F2D98F; background: rgba(232, 184, 75,.14); border: 1px solid rgba(232, 184, 75,.28); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; line-height: 1.4; }
.profile-sheet-header .profile-uid { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; opacity: .55; }
.profile-sheet-toggle { flex-shrink: 0; transition: transform .2s; color: var(--text-tertiary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.profile-bottom-sheet.open .profile-sheet-toggle { transform: rotate(180deg); }
.profile-sheet-body { display: flex; flex-direction: column; padding: 4px 14px; overflow-y: auto; }
.profile-sheet-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 10px; border-radius: 8px; color: var(--text-primary); font-size: 14px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.profile-sheet-item + .profile-sheet-item { border-top: none; }
.profile-sheet-item:hover { background: rgba(255,255,255,.05); }
.profile-sheet-item.sub { padding-left: 40px; font-size: 13px; color: var(--text-secondary); }
.profile-sheet-item.sub + .profile-sheet-item { border-top: none; }
.profile-sheet-icon { flex-shrink: 0; color: var(--text-tertiary); opacity:.75; transition: color .15s, opacity .15s; }
.profile-sheet-item:hover .profile-sheet-icon { color: var(--accent,#E8B84B); opacity:1; }
.profile-sheet-label { flex: 1; }
.profile-sheet-extra { font-size: 12px; color: var(--text-tertiary); }
.profile-sheet-arrow { flex-shrink: 0; color: var(--text-tertiary); }
.profile-sheet-item.logout { color: var(--danger, #f87171); margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.profile-sheet-item.logout .profile-sheet-label { color: var(--danger, #f87171); }
.profile-sheet-item.logout .profile-sheet-icon { color: var(--danger, #f87171); opacity:.8; }
.profile-sheet-item.logout:hover { background: rgba(248,113,113,.08); box-shadow:none; }
.profile-submenu { display: flex; flex-direction: column; }
.profile-submenu .profile-sheet-item { border-top: none; }
.profile-more-arrow { transition: transform .2s; }
.profile-sheet-item[data-action="more"].open .profile-more-arrow { transform: rotate(90deg); }

/* ============ 设置弹窗（高级） ============ */
#profileSettingsModal {
    position: fixed; inset: 0; z-index: 1300;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0); backdrop-filter: blur(0px);
    transition: background .25s var(--ease-out), backdrop-filter .25s var(--ease-out);
    padding: 16px;
}
#profileSettingsModal.open {
    display: flex;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
#profileSettingsModal .modal-dialog {
    transform: scale(0.96) translateY(12px);
    opacity: 0;
    transition: transform .28s var(--ease-out), opacity .24s var(--ease-out);
}
#profileSettingsModal.open .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.profile-settings-dialog {
    width: min(480px, 100%);
    max-width: 480px; max-height: 86vh;
    display: flex; flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle);
    overflow: hidden;
}
.profile-settings-dialog .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.profile-settings-dialog .modal-header h3 {
    font-size: 17px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.profile-settings-dialog .modal-close {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-tertiary);
    border: none; font-size: 20px; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.profile-settings-dialog .modal-close:hover {
    background: var(--bg-hover); color: var(--text-primary); transform: rotate(90deg);
}
.profile-settings-tabs {
    display: flex; gap: 4px;
    padding: 10px 22px 0;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    overflow-x: auto; scrollbar-width: none;
}
.profile-settings-tabs::-webkit-scrollbar { display: none; }
.profile-settings-tab {
    padding: 12px 16px;
    font-size: 14px; font-weight: 500;
    color: var(--text-tertiary); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap; position: relative;
}
.profile-settings-tab:hover { color: var(--text-secondary); }
.profile-settings-tab.active {
    color: var(--accent); font-weight: 600;
    border-bottom-color: var(--accent);
}
.profile-settings-body {
    padding: 24px 22px;
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 28px;
}
.profile-settings-section { display: flex; flex-direction: column; gap: 12px; }
.profile-settings-section-title {
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.profile-setting-row {
    display: flex; align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.profile-setting-row:hover {
    border-color: var(--border-hover);
    background: var(--bg-overlay);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.profile-setting-row.column {
    flex-direction: column; align-items: stretch;
    gap: 14px;
}
.profile-setting-icon-wrap {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    overflow: hidden;
}
.profile-setting-icon {
    width: 18px; height: 18px;
    min-width: 18px; min-height: 18px;
    display: block;
    flex-shrink: 0;
}
.profile-setting-text { flex: 1; min-width: 0; }
.profile-setting-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.profile-setting-desc { font-size: 13px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.5; }
.profile-radio-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.profile-radio {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: var(--text-secondary); cursor: pointer;
    padding: 11px 12px; border-radius: var(--radius-md);
    transition: background .15s, color .15s;
    border: 1px solid transparent;
}
.profile-radio:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-subtle); }
.profile-radio input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 2px solid var(--border-mid);
    border-radius: 50%;
    background: transparent;
    position: relative; flex-shrink: 0;
    transition: border-color .15s, background .15s;
    margin: 0;
}
.profile-radio input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); }
.profile-radio input[type="radio"]:checked::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 7px; height: 7px; background: #fff;
    border-radius: 50%; transform: translate(-50%, -50%);
}
.profile-radio input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.profile-threshold {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--text-secondary);
    padding: 10px 12px; margin-left: 32px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color .15s, background .15s;
}
.profile-threshold:focus-within { border-color: var(--accent); background: var(--bg-overlay); }
.profile-threshold input {
    width: 100px; padding: 7px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary); font-size: 14px; font-weight: 500;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
.profile-threshold input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.profile-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-size: 14px; color: var(--text-tertiary);
    text-align: center; padding: 40px 20px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
}
.profile-placeholder-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; display: block; opacity: 0.6; }

/* 浅色主题（深色模式关闭时） */
html[data-theme="light"] { --bg-base:#f5f5f7; --bg-surface:#ffffff; --bg-elevated:#f0f0f4; --bg-overlay:#e8e8ee; --bg-input:#f7f7fa; --text-primary:#18181b; --text-secondary:#3f3f46; --text-tertiary:#71717a; --border-subtle:rgba(0,0,0,.1); --bg-hover:rgba(0,0,0,.04); }

/* 克隆弹窗高级设置网格 */
.clone-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.clone-select {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    background: var(--bg-elevated); color: var(--text-primary);
    font-size: 13px; cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b8b8b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    padding-right: 28px;
}
.clone-select:focus { outline: none; border-color: var(--primary); }

/* 克隆进度条 */
.clone-progress { display: none; margin-top: 12px; }

/* ================================================================
   TTS 语音合成样式
   ================================================================ */

/* 音色选择网格 */
.tts-speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.tts-speaker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all 0.2s;
}
.tts-speaker-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-overlay);
}
.tts-speaker-card.active {
    border-color: var(--primary);
    background: rgba(232, 184, 75,0.08);
}
.tts-speaker-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
    color: #fff;
}
.tts-speaker-name {
    font-size: 12px; font-weight: 500;
    color: var(--text-primary);
}
.tts-speaker-tag {
    font-size: 10px; color: var(--text-tertiary);
}

/* 参考音频上传 */
.tts-ref-upload { margin-top: 10px; }
.tts-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}
.tts-upload-label:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.tts-upload-label svg { opacity: 0.6; }
.tts-upload-hint { font-size: 11px; color: var(--text-tertiary); }
.tts-ref-preview {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.tts-ref-name { font-size: 13px; color: var(--text-primary); }
.tts-ref-remove {
    background: none; border: none; color: var(--text-tertiary);
    cursor: pointer; font-size: 18px; line-height: 1;
    padding: 0 4px;
}
.tts-ref-remove:hover { color: var(--danger); }

/* 高级设置 */
.tts-advanced-content { padding-top: 12px; }
.tts-advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.tts-advanced-item { display: flex; flex-direction: column; gap: 6px; }
.tts-advanced-label {
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
    display: flex; justify-content: space-between;
}
.tts-advanced-label span {
    color: var(--primary); font-size: 11px;
}
.tts-advanced-item input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-overlay);
    border-radius: 2px;
    outline: none;
}
.tts-advanced-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}
.tts-toggle-row {
    display: flex; gap: 24px;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.tts-toggle-item {
    display: flex; align-items: center; gap: 10px;
}
.tts-toggle-label {
    font-size: 12px; color: var(--text-secondary);
}

/* 生成按钮区 */
.tts-generate-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px;
}

/* 结果展示 */
.tts-result {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.tts-result-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.tts-result-title {
    font-size: 13px; font-weight: 500;
    color: var(--text-primary);
}
.tts-result-duration {
    font-size: 12px; color: var(--text-tertiary);
    background: var(--bg-overlay); padding: 2px 8px;
    border-radius: 4px;
}
.tts-audio-player {
    width: 100%; height: 40px;
    border-radius: var(--radius-sm);
    outline: none;
}
.tts-audio-player:focus { outline: none; }
.tts-result-actions {
    display: flex; gap: 8px; margin-top: 12px;
}
.tts-subtitle-display {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 12px; color: var(--text-secondary);
    max-height: 150px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-all;
}

/* -------- 真人素材区域（资产库） -------- */
.avatar-assets-section {
    margin-top: 16px;
}
.avatar-assets-section .avatar-assets-wrap {
    position: relative;
    min-height: 320px;
    overflow-y: auto;
}
.avatar-assets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.avatar-assets-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.avatar-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.avatar-asset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.avatar-asset-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.avatar-asset-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.avatar-asset-card-preview {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-asset-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-asset-card-placeholder {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.avatar-asset-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.avatar-asset-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-asset-card-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    width: fit-content;
}
.avatar-asset-card-status.configured {
    color: var(--success);
    background: rgba(16, 185, 129, 0.12);
}
.avatar-asset-card-status.unchecked {
    color: var(--text-tertiary);
    background: var(--bg-input);
}
.avatar-asset-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.avatar-asset-card-btn {
    flex: 1;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.avatar-asset-card-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.avatar-assets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: var(--text-tertiary);
    text-align: center;
}
.avatar-assets-empty h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 0 4px;
}
.avatar-assets-empty p {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* -------- 真人出镜面板：素材选取区域 -------- */
.avatar-asset-picker {
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--bg-elevated);
}
.avatar-asset-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    text-align: center;
}
.avatar-asset-picker-empty svg {
    color: var(--text-tertiary);
    opacity: 0.5;
}
.avatar-asset-picker-empty p {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}
.avatar-asset-picker-empty .hint {
    font-size: 11px;
    color: var(--text-tertiary);
}
.avatar-asset-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

/* 内嵌 TTS 区域（真人出镜面板内） */
.tts-inline-section {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary);
    transition: border-color 0.2s;
}
.tts-inline-section:hover {
    border-color: var(--primary-muted);
}
.tts-inline-controls {
    margin-top: 4px;
}
.tts-inline-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.tts-inline-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tts-inline-col-speaker { flex: 2; min-width: 140px; }
.tts-inline-col-model   { flex: 1.2; min-width: 100px; }
.tts-inline-col-format  { flex: 1; min-width: 80px; }

.tts-inline-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* 自定义下拉组件 */
.tts-inline-dropdown {
    position: relative;
}
.tts-inline-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, color 0.15s;
    min-height: 32px;
}
.tts-inline-dropdown-trigger:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.tts-inline-dropdown-trigger.open {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.tts-inline-dropdown-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tts-inline-dropdown-arrow {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}
.tts-inline-dropdown-trigger.open .tts-inline-dropdown-arrow {
    transform: rotate(180deg);
}

.tts-inline-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    display: none;
    padding: 4px 0;
}
.tts-inline-dropdown-menu.open {
    display: block;
}
.tts-inline-dropdown-item {
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tts-inline-dropdown-item:hover {
    background: var(--accent-soft);
    color: var(--text-primary);
}
.tts-inline-dropdown-item.active {
    color: var(--primary);
    font-weight: 600;
    background: var(--accent-soft);
}

.tts-inline-advanced-toggle:hover {
    color: var(--primary) !important;
}
.tts-inline-result {
    animation: fadeInUp 0.3s ease;
}
.tts-inline-result .tts-audio-player {
    height: 36px;
}
.tts-inline-result .tts-result-actions .btn-secondary-sm {
    font-size: 11px;
    padding: 4px 10px;
}

/* TTS 语音合成试听 inline 区域（真人出镜面板） */
.tts-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--primary);
    vertical-align: middle;
    margin-left: 4px;
}

.btn-generate-inline-tts {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast);
}
.btn-generate-inline-tts:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.btn-generate-inline-tts:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--bg-elevated);
    color: var(--text-disabled);
}

.tts-slider-row {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.tts-slider-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tts-slider-item .tts-inline-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tts-slider-item input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-subtle);
    outline: none;
    cursor: pointer;
}
.tts-slider-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    transition: transform 0.15s;
}
.tts-slider-item input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.inline-tts-advanced-toggle {
    transition: color var(--duration-fast);
}
.inline-tts-advanced-toggle:hover {
    color: var(--primary) !important;
}

.inline-tts-advanced-content {
    animation: fadeInDown 0.25s ease;
}

.inline-tts-result {
    animation: fadeInUp 0.3s ease;
}

/* 操作芯片按钮 */
.action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-size: 12px;
}
.action-chip:hover {
    background: var(--bg-overlay);
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.action-chip-opt:hover {
    /* 2026-08-25：与 1189 行新 .action-chip-opt 保持一致，禁用旧描边色（避免与基础 .action-chip:hover 冲突） */
    background: rgba(232, 184, 75,0.1);
    color: var(--accent);
    border-color: transparent;
}


/* 选中的音色标签 */
.selected-label {
    font-size: 12px; font-weight: 400;
    color: var(--primary); margin-left: 8px;
}

/* 模型选择行 */
.model-select-row {
    display: flex; gap: 20px; margin-bottom: 10px;
    align-items: flex-start;
}
.model-select {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 0;
    min-width: 120px;
}
.model-label {
    font-size: 11px; color: var(--text-tertiary);
    font-weight: 500;
}
.model-dropdown {
    width: 100%;
}

/* ================================================================
   VOICE CLONE 声音复刻样式
   ================================================================ */

/* 表单网格 */
.vc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}
.vc-form-item {
    display: flex; flex-direction: column; gap: 6px;
}
.vc-form-full { grid-column: 1 / -1; }
.vc-form-label {
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
}
.vc-form-label .required { color: var(--danger); font-size: 11px; }
.vc-form-label .optional { color: var(--text-tertiary); font-size: 10px; font-weight: 400; }
.vc-form-hint {
    font-size: 11px; color: var(--text-tertiary);
    line-height: 1.4;
}
.vc-form-hint a {
    color: var(--primary); text-decoration: none;
}
.vc-input {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.vc-input:focus {
    border-color: var(--primary);
}
.vc-input::placeholder { color: var(--text-tertiary); }

/* 音频上传区域 */
.vc-upload-area { margin-top: 10px; }
.vc-upload-label {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 28px 20px;
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}
.vc-upload-label:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: var(--bg-overlay);
}
.vc-upload-label svg { opacity: 0.5; }
.vc-upload-text { font-size: 14px; font-weight: 500; }
.vc-upload-hint { font-size: 11px; color: var(--text-tertiary); }

/* 音频预览 */
.vc-audio-preview {
    margin-top: 10px; padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.vc-audio-info {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.vc-audio-name {
    font-size: 13px; color: var(--text-primary); font-weight: 500;
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-audio-size {
    font-size: 11px; color: var(--text-tertiary);
    background: var(--bg-overlay); padding: 2px 8px; border-radius: 4px;
}
.vc-audio-player {
    width: 100%; height: 32px; border-radius: 4px;
}
.vc-audio-remove {
    background: none; border: none; color: var(--text-tertiary);
    cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px;
    margin-left: 8px;
}
.vc-audio-remove:hover { color: var(--danger); }

/* 音色选择 */
.vc-speaker-row {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.vc-speaker-input {
    flex: 1; min-width: 180px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 10px 14px; font-size: 13px;
    transition: border-color var(--duration-fast);
}
.vc-speaker-input:focus {
    outline: none; border-color: var(--accent);
}
.vc-speaker-info {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 8px 12px;
    background: var(--accent-soft); border-radius: var(--radius-sm);
}
.vc-speaker-name {
    font-size: 13px; font-weight: 600; color: var(--accent);
}
.vc-speaker-lang {
    font-size: 11px; color: var(--text-tertiary);
    background: var(--bg-overlay); padding: 2px 8px; border-radius: 4px;
}

/* 处理选项 */
.vc-options {
    display: flex; flex-direction: column; gap: 10px;
}
.vc-option-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; user-select: none;
}
.vc-option-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px; height: 16px; cursor: pointer;
}

/* Demo & 状态 */
.vc-demo-section .vc-audio-player,
.vc-status-section .vc-audio-player { margin-top: 8px; }
.vc-status-display {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.vc-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}
.vc-voice-names {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
}
.vc-voice-name-tag {
    font-size: 11px; padding: 4px 10px;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: 12px; color: var(--text-secondary);
    cursor: pointer; transition: all var(--duration-fast);
}
.vc-voice-name-tag:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}

/* 辅助按钮 */
.btn-action-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
    transition: all var(--duration-fast);
}
.btn-action-secondary:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-soft);
}
.btn-action-secondary:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-elevated); color: var(--text-disabled);
    border-color: var(--border-subtle);
}

/* 参考文本 */
.vc-textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px; resize: vertical;
    margin-top: 10px; outline: none;
}
.vc-textarea:focus { border-color: var(--primary); }
.vc-textarea::placeholder { color: var(--text-tertiary); }

/* 高级选项 */
.vc-advanced-content { padding-top: 12px; }
.vc-toggle-row {
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.vc-toggle-item {
    display: flex; align-items: center; gap: 8px;
}
.vc-toggle-label { font-size: 12px; color: var(--text-secondary); }
.vc-toggle-desc { font-size: 11px; color: var(--text-tertiary); }

/* 训练结果 */
.vc-result {
    margin-top: 20px; padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.vc-result-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.vc-result-title {
    font-size: 14px; font-weight: 500;
    color: var(--text-primary);
}
.vc-result-badge {
    font-size: 12px; font-weight: 500;
    padding: 2px 10px; border-radius: 12px;
    color: #fff;
}
.vc-result-body { margin-bottom: 12px; }
.vc-result-info { display: flex; flex-direction: column; gap: 6px; }
.vc-info-row {
    display: flex; justify-content: space-between;
    font-size: 12px; padding: 4px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.vc-info-label { color: var(--text-tertiary); }
.vc-polling-hint {
    font-size: 12px; color: var(--primary);
    margin-top: 8px; padding: 8px 12px;
    background: rgba(232, 184, 75,0.06);
    border-radius: var(--radius-sm);
}
.vc-result-actions {
    display: flex; gap: 8px; margin-top: 12px;
}
.vc-demo-player {
    width: 100%; height: 36px;
    margin-top: 8px; border-radius: 4px;
}

/* 我的复刻音色列表 */
.vc-clone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px; margin-top: 12px;
}
.vc-clone-card {
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}
.vc-clone-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-overlay);
}
.vc-clone-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.vc-clone-card-name {
    font-size: 13px; font-weight: 500;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-clone-card-status {
    font-size: 11px; font-weight: 500;
}
.vc-clone-card-body {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-tertiary);
}
.vc-clone-card-audio {
    width: 100%; height: 28px;
    margin-top: 8px; border-radius: 4px;
}

/* ================================================================
   资产库 - 声音素材区域（声音复刻 + 声音资产网格）
   ================================================================ */
.assets-voice-section {
    display: flex; flex-direction: column; gap: 28px;
}
.assets-voice-clone-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 24px;
}
.assets-voice-header {
    margin-bottom: 20px;
}
.assets-voice-header h2 {
    margin: 0 0 6px 0;
}
.assets-voice-form {
    display: flex; flex-direction: column; gap: 16px;
}
.assets-voice-result {
    padding: 0;
}
.assets-voice-result h3 {
    margin-bottom: 12px;
}

/* 声音素材卡片网格 */
.assets-voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.voice-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.voice-card:hover {
    border-color: var(--border-hover);
}
.voice-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    color: var(--accent);
}
.voice-card-info {
    display: flex; flex-direction: column; gap: 4px;
}
.voice-card-name {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voice-card-status {
    font-size: 11px; font-weight: 500; color: #5cb85c;
}
.voice-card-time {
    font-size: 11px; color: var(--text-tertiary);
}
.voice-card-audio {
    width: 100%; height: 36px; border-radius: 4px; margin-top: 4px;
}

/* 声音资产空状态 */
.voice-assets-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px 20px;
    text-align: center; color: var(--text-tertiary);
}
.voice-assets-empty svg { margin-bottom: 16px; }
.voice-assets-empty h3 {
    font-size: 15px; color: var(--text-secondary); margin: 0 0 4px 0;
}
.voice-assets-empty p { font-size: 13px; margin: 0; }

/* ================================================================
   AVATAR ASSET MANAGEMENT - 素材管理弹窗 & 绑定流程
   ================================================================ */

/* ================================================================
   DIGITAL AVATAR & VOICE SYNTHESIS - 数字人/语音合成选择区
   ================================================================ */
.avatar-voice-select-area {
    padding: 8px 0;
}
.avatar-voice-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.avatar-voice-section-label::before {
    content: '';
    width: 4px;
    height: 14px;
    background: var(--accent);
    border-radius: 2px;
    display: inline-block;
}

/* 数字人预置模板网格 */
.avatar-preset-grid,
.voice-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

/* 数字人模板卡片 */
.avatar-preset-card,
.voice-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 0;
}
.avatar-preset-card:hover,
.voice-preset-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(232, 184, 75,0.15);
}
.avatar-preset-card.active,
.voice-preset-card.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(232, 184, 75,0.1), rgba(217, 169, 59,0.08));
    box-shadow: 0 0 0 2px rgba(232, 184, 75,0.2);
}

/* 数字人/音色图标 */
.avatar-preset-icon,
.voice-preset-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* 数字人/音色名称 */
.avatar-preset-name,
.voice-preset-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* 数字人/音色标签 */
.avatar-preset-tag,
.voice-preset-tag {
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 音色试听播放图标 */
.voice-play-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    animation: voicePulse 1s ease-in-out infinite;
}
.voice-preset-card {
    position: relative;
}
.voice-preset-card.playing {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(232, 184, 75,0.08), rgba(217, 169, 59,0.04));
}
@keyframes voicePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* 选中的数字人预览卡片 */
.selected-avatar-preview-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(232, 184, 75,0.06), rgba(217, 169, 59,0.03));
}

/* Agent面板中的数字人选择区适配 */
.agent-section .avatar-preset-grid,
.agent-section .voice-preset-grid {
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 6px;
}
.agent-section .avatar-preset-card,
.agent-section .voice-preset-card {
    padding: 8px 4px;
    gap: 3px;
}
.agent-section .avatar-preset-icon,
.agent-section .voice-preset-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.agent-section .avatar-preset-name,
.agent-section .voice-preset-name {
    font-size: 10px;
}
.agent-section .avatar-preset-tag,
.agent-section .voice-preset-tag {
    font-size: 9px;
}



/* ============================================================
   案例详情弹窗
   ============================================================ */
.case-detail-overlay {
    position: fixed; inset: 0; z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.case-detail-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    max-width: 900px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    animation: slideUp 0.3s ease;
    position: relative;
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.case-detail-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}
.case-detail-close:hover {
    background: rgba(239, 68, 68, 0.7);
    transform: scale(1.1);
}
.case-detail-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.case-detail-image-wrap {
    flex: 1;
    min-width: 0;
    background: #0a0a0f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.case-detail-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}
.case-detail-right {
    width: 360px;
    flex-shrink: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    border-left: 1px solid var(--border-subtle);
}
.case-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.case-detail-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.5;
}
.case-detail-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}
.case-detail-prompt-box {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.7;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.case-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}
.case-detail-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-align: center;
}
.case-detail-btn-copy {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.case-detail-btn-copy:hover {
    border-color: var(--border-hover);
    background: var(--bg-overlay);
}
.case-detail-btn-use {
    background: var(--accent);
    color: #fff;
}
.case-detail-btn-use:hover {
    background: var(--accent-hover, #E8B84B);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 162, 39,0.4);
}

/* 弹窗响应式 */
@media (max-width: 768px) {
    .case-detail-content {
        flex-direction: column;
    }
    .case-detail-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        max-height: 50vh;
    }
    .case-detail-image-wrap {
        max-height: 40vh;
    }
    .case-detail-image {
        max-height: 35vh;
    }
}

/* ===== 对话内联产物卡片（阶段预览直接进对话流） ===== */
.agent-artifact-card {
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 12px;
    background: var(--bg-elevated, #1e1e2a);
    padding: 12px 14px;
    max-width: 100%;
}
.agent-artifact-head { margin-bottom: 8px; }
.agent-artifact-title { font-size: 13px; font-weight: 500; color: var(--text-primary, #f0f0f5); }
.agent-artifact-preview { font-size: 13px; color: var(--text-secondary, #c5c8d4); }
.agent-artifact-pre {
    margin: 0; max-height: 200px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
    background: var(--bg-card, #14141b); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: 8px;
    padding: 10px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; color: var(--text-secondary, #c5c8d4);
}
.agent-artifact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.agent-artifact-thumb { display: flex; flex-direction: column; gap: 4px; }
.agent-artifact-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color, rgba(255,255,255,0.08)); background: var(--bg-card, #14141b); }
.agent-artifact-thumb span { font-size: 11px; color: var(--text-tertiary, #8b92a8); text-align: center; }
.agent-artifact-video { width: 100%; max-height: 280px; border-radius: 8px; background: #000; }
.agent-artifact-empty { color: var(--text-tertiary, #8b92a8); font-size: 12px; }
.agent-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.agent-card-btn {
    border: 1px solid var(--border-color, rgba(255,255,255,0.12)); background: var(--bg-card, #14141b); color: var(--text-primary, #f0f0f5);
    border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.agent-card-btn:hover { border-color: var(--primary, #3b6cf6); color: var(--primary, #3b6cf6); }
.agent-card-btn.primary { background: var(--primary, #3b6cf6); border-color: var(--primary, #3b6cf6); color: #fff; }
.agent-card-btn.primary:hover { background: #2f5be0; color: #fff; }
.agent-card-done { color: #22c55e; font-size: 12px; font-weight: 500; }
.artifact-done { opacity: 0.62; }
.artifact-flash { outline: 3px solid var(--primary, #3b6cf6); outline-offset: 2px; }
/* 右侧产物索引条 */
.agent-index-bar { align-items: center; }

/* 平台合规编辑拦截（抖音/小红书规则） */
.compliance-violation { outline: 2px solid #e34d4d !important; outline-offset: 1px; border-color: #e34d4d !important; }
.compliance-warning { color: #e34d4d; font-size: 12px; line-height: 1.4; margin: 4px 2px 10px; padding: 4px 8px; background: rgba(227,77,77,0.10); border-radius: 6px; }

/* ================================================================
   网站备案公示页脚（ICP + 公安备案号占位） —— ah 版起
   全局 footer 已移除，备案信息移入"我的→网站备案"弹窗
   ================================================================ */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
}
.beian-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.4;
    transition: color .15s ease;
}
.beian-item + .beian-item { margin-left: 16px; }
a.beian-item:hover { color: var(--text-primary); }
.beian-pending { color: var(--text-tertiary); font-style: italic; }

/* —— ah 版：备案弹窗专用样式（替代原全局 footer 展示） —— */
.beian-dialog { padding: 0; }
.beian-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-input, rgba(255,255,255,0.03));
    margin-bottom: 10px;
    transition: background .15s ease;
}
.beian-row:hover { background: var(--bg-overlay, rgba(255,255,255,0.06)); }
.beian-row-label {
    flex-shrink: 0;
    font-size: 12px; color: var(--text-tertiary);
    min-width: 56px;
}
.beian-link {
    flex: 1; min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    word-break: break-all;
    transition: color .15s ease;
}
a.beian-link:hover { color: var(--accent-primary, #7c5ce7); }
.beian-police-icon {
    display: inline-block; vertical-align: middle;
    width: 14px; height: 14px;
    margin-right: 4px;
}
.beian-divider {
    height: 1px; background: var(--border-subtle, rgba(255,255,255,0.08));
    margin: 14px 0 12px;
}
.beian-copyright {
    text-align: center;
    font-size: 12px; color: var(--text-tertiary);
}
.beian-hint {
    margin-top: 12px;
    font-size: 11px; color: var(--text-tertiary);
    line-height: 1.55;
    text-align: center;
}

/* ================================================================
   展厅视频上传弹窗样式
   ================================================================ */
.showcase-upload-card {
    width: 880px; max-width: 94vw;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    animation: modalIn .2s ease-out;
}
/* 2026-08-24：上传展厅弹窗横屏两栏（左素材 / 右表单）；按需占高避免右栏空白。
   注意：元素 class="modal-body su-body"，模板内联 .modal-body 与 .showcase-upload-card .modal-body 均有
   display:flex;flex-direction:column，必须用 .showcase-upload-card .modal-body.su-body (0,3,0) 压过它们 */
.showcase-upload-card .modal-body.su-body { display: grid; grid-template-columns: 42fr 58fr; gap: 22px; align-items: start; }
.su-col-media { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 不强行设 min-height——预览区 display:none（未选）时不撑高，弹窗按内容自适应 */
.su-col-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.su-col-form .su-label { margin-bottom: 2px; }
.su-col-form .su-input { padding: 9px 11px; }
.su-col-form textarea.su-input { min-height: 56px; }
/* 覆盖通用 .modal-body flex:1——本弹窗按内容自适应，不强行撑到 90vh 留空白 */
.showcase-upload-card .modal-body { flex: 0 0 auto; }
@media (max-width: 768px) {
    .showcase-upload-card { width: 480px; max-width: 94vw; }
    .showcase-upload-card .modal-body.su-body { grid-template-columns: 1fr; gap: 16px; }
    .su-col-media .su-preview { min-height: 160px; }
}
.showcase-upload-card .modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle);
}
.showcase-upload-card .modal-head h3 {
    margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em;
}
.showcase-upload-card .modal-x {
    width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-tertiary); font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.showcase-upload-card .modal-x:hover { background: var(--bg-overlay); color: var(--text-primary); }
.showcase-upload-card .modal-body {
    padding: 18px 22px; display: flex; flex-direction: column; gap: 12px;
}
/* 表单标签 */
.su-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 4px; letter-spacing: -0.01em;
}
/* 输入框 */
.su-input {
    width: 100%; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border-subtle); background: var(--bg-elevated);
    color: var(--text-primary); font-size: 14px; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.su-input::placeholder { color: var(--text-disabled); }
.su-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.su-input[type="text"]:focus, textarea.su-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.su-input { resize: vertical; min-height: 72px; line-height: 1.5; }
/* 文件选择器（美化版） */
.su-file-picker {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    border: 1.5px dashed var(--border-hover); background: var(--bg-elevated);
    cursor: pointer; transition: all .15s ease;
}
.su-file-picker:hover {
    border-color: var(--accent); background: rgba(201, 162, 39,.04);
}
.su-file-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 8px;
    border: none; background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all .15s ease;
    flex-shrink: 0;
}
.su-file-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.su-file-btn:active { transform: scale(.97); }
/* 2026-08-24：最多 2 行省略号（避免超长文件名截断看不出选了啥） */
.su-file-name {
    font-size: 13px; color: var(--text-tertiary); min-width: 0;
    transition: color .15s ease;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all;
}
.su-file-name.has-file { color: var(--text-primary); font-weight: 500; }
/* 2026-08-24：展厅上传素材预览区（本地文件 / 资产库 URL 均可） */
.su-preview {
    margin-top: 10px; border-radius: 10px; overflow: hidden;
    background: rgba(0,0,0,.25); border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    display: flex; align-items: center; justify-content: center; min-height: 60px;
}
.su-preview img, .su-preview video { max-width: 100%; max-height: 260px; object-fit: contain; display: block; }
.su-preview .su-preview-empty { font-size: 12px; color: var(--text-tertiary, #888); padding: 16px; }
/* 消息提示 */
.su-msg {
    font-size: 13px; min-height: 20px; color: #f87171; text-align: center;
    margin-top: 2px; word-break: break-word;
}
/* 底部按钮栏 */
.modal-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--border-subtle);
}

/* ==================== 用户决定：去掉右抽屉「历史」tab（2026-08-17） ==================== */
.gen-layout .drawer-tab[data-dtab="history"],
.gen-layout #resultsSection { display: none !important; }
.gen-layout .drawer-tabs { gap: 0 !important; }

/* ================================================================
   P6 即梦同款 参数浮层（模型 / 比例 / 分辨率 / 版本）+ 数量胶囊
   注：原生 <select> 保留为数据源（display:none），浮层只写值+派发 change
   ================================================================ */
.pf-hidden-select { display: none !important; }

/* 触发按钮（替代原生下拉） */
.pf-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: 14px;
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pf-trigger:hover { border-color: var(--border-hover); }
.pf-trigger.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 184, 75,.15); }
.pf-trigger-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-caret { flex: none; color: var(--text-tertiary); transition: transform var(--duration-fast); }
.pf-trigger.open .pf-caret { transform: rotate(180deg); }

/* 浮层容器 */
.pf-flyout {
    position: fixed; z-index: 1000; padding: 8px;
    background: var(--bg-surface); border: 1.5px solid var(--border-hover);
    border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.35);
    max-height: 340px; overflow-y: auto;
}
.pf-flyout-title { font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: 6px 10px 8px; }
.pf-flyout-body { display: flex; flex-direction: column; gap: 4px; }
.pf-flyout-body.pf-body-ratio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; }

/* 卡片型选项（模型 / 版本 / 分辨率） */
.pf-option {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit; font-size: 14px;
    background: transparent; color: var(--text-primary);
    border: 1.5px solid transparent; border-radius: var(--radius-md);
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.pf-option:hover { background: var(--bg-elevated); }
.pf-option.active { background: rgba(232, 184, 75,.12); border-color: var(--accent); }
.pf-option-main { flex: 1; }
.pf-check { color: var(--accent); opacity: 0; font-weight: 700; }
.pf-option.active .pf-check { opacity: 1; }

/* 比例型选项（可视化矩形） */
.pf-ratio {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; cursor: pointer; text-align: center; font-family: inherit; font-size: 12px;
    background: transparent; color: var(--text-primary);
    border: 1.5px solid transparent; border-radius: var(--radius-md);
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.pf-ratio:hover { background: var(--bg-elevated); }
.pf-ratio.active { background: rgba(232, 184, 75,.12); border-color: var(--accent); }
.pf-ratio-box {
    background: linear-gradient(135deg, rgba(232,184,75,.30), rgba(232,184,75,.08));
    border: 1.5px solid var(--border-hover); border-radius: 4px;
}
.pf-ratio.active .pf-ratio-box { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 184, 75,.25); }
.pf-ratio-label { color: var(--text-secondary); }
.pf-ratio.active .pf-ratio-label { color: var(--text-primary); font-weight: 600; }

/* 数量胶囊 */
.param-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.param-pill {
    flex: 1; min-width: 44px; padding: 9px 6px; cursor: pointer; text-align: center; font-family: inherit; font-size: 13px;
    background: var(--bg-elevated); color: var(--text-secondary);
    border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
    transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.param-pill:hover { border-color: var(--border-hover); color: var(--text-primary); }
.param-pill.active { background: rgba(232, 184, 75,.15); border-color: var(--accent); color: var(--text-primary); font-weight: 600; }

/* ========== 对话式生成气泡（即梦同款，版本 k）========== */
.chat-msg { display: flex; padding: 10px 4px; animation: chatFadeIn .25s ease; }
/* dq2 修复：用户消息改为纵向堆叠（时间戳在上、气泡在下，都靠右），
   避免 dp 加时间戳后与提示词在 flex 行内并排被压缩（提示词消失） */
.chat-msg-user { justify-content: flex-end; flex-direction: column; align-items: flex-end; }
.chat-msg-ai { justify-content: flex-start; }
/* dt：时长滑块 popover（即梦同款拖拽选时长） */
.chat-param-slider-pop { background: #1f2230; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px; min-width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,.35); color: #f0f0f5; pointer-events: auto; }
.chat-param-slider-pop[hidden] { display: none; }
.chat-param-slider-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: #f0f0f5; }
.chat-param-slider-row { display: flex; align-items: center; gap: 14px; }
.chat-param-slider-input { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: linear-gradient(to right, #4b5168 var(--p, 33%), #3a3e4e var(--p, 33%)); border-radius: 3px; outline: none; }
.chat-param-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.chat-param-slider-input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: grab; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.chat-param-slider-input:active::-webkit-slider-thumb { cursor: grabbing; }
.chat-param-slider-display { display: flex; align-items: baseline; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 4px 10px; min-width: 56px; justify-content: center; }
.chat-param-slider-num { font-size: 18px; font-weight: 700; color: #fff; }
.chat-param-slider-unit { font-size: 13px; color: #b8bcc8; }
/* dt：老面板文生视频时长滑块（同款外观） */
.gen-duration-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: linear-gradient(to right, #4b5168 var(--p, 20%), #3a3e4e var(--p, 20%)); border-radius: 3px; outline: none; }
.gen-duration-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gen-duration-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: grab; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gen-duration-display { display: inline-flex; align-items: baseline; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 4px 10px; min-width: 56px; justify-content: center; }
.gen-duration-display span:first-child { font-size: 16px; font-weight: 700; color: #fff; }
.gen-duration-display .gen-duration-unit { font-size: 13px; color: #b8bcc8; }
/* do 极简版：消息上方时间戳（灰色小字，靠右） */
.chat-msg-time { font-size: 11px; color: var(--text-muted, #888); margin: 0 4px 6px 0; }
.chat-bubble { max-width: 90%; border-radius: 18px; padding: 12px 14px; font-size: 14px; line-height: 1.6; word-break: break-word; }
.chat-bubble-user { background: transparent; border: none; padding: 0; color: inherit; border-bottom-right-radius: 6px; }
.chat-bubble-user .chat-bubble-text { white-space: pre-line; }
/* do：隐藏 chat-bubble-tag（即梦风格不要气泡底部的「图生视频」等小标签） */
.chat-bubble-tag { display: none; }
.chat-bubble-tag { margin-top: 6px; font-size: 11px; opacity: .8; text-align: right; }
/* do 极简版：去掉 chat-bubble-ai 容器背景与边框 */
.chat-bubble-ai { background: transparent; border: none; padding: 0; }
.chat-ai-head { display: none; }  /* do：去掉「AI 创作助手 ✨」标识 */
.chat-meta { display: none; }     /* do：去掉「消耗 X 积分 · 时间」+ 重新生成行 */
.chat-ai-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#E8B84B,#F2C14E); font-size: 13px; }
.chat-ai-name { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.chat-loading { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; padding: 4px 0; }
.chat-spinner { width: 16px; height: 16px; border: 2px solid rgba(232, 184, 75,.25); border-top-color: var(--accent); border-radius: 50%; animation: chatSpin .8s linear infinite; }
.chat-error { color: #f87171; font-size: 13px; padding: 4px 0; }
/* fa：历史快照（老会话回看时的占位提示）—— 中性灰，避开红字+⚠️的「报错」观感 */
.chat-info { color: #a0a0b8; font-size: 13px; padding: 4px 0; font-style: italic; }
.chat-info .chat-info-regen { color: var(--accent); cursor: pointer; margin-left: 8px; font-style: normal; }
.chat-info .chat-info-regen:hover { text-decoration: underline; }
.chat-media-grid { display: grid; gap: 8px; margin-top: 10px; }
.chat-media-grid-1 { grid-template-columns: 1fr; }
.chat-media { width: 100%; max-width: 480px; border-radius: 12px; display: block; background: #000; max-height: 480px; object-fit: contain; }
.chat-media-item { display: block; overflow: hidden; border-radius: 12px; }
.chat-media-item .chat-media { transition: transform .2s ease; }
.chat-media-item:hover .chat-media { transform: scale(1.02); }
.chat-meta { margin-top: 8px; font-size: 11px; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-meta-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* gp：生成参数纯文字行（模型 · 比例 · 分辨率 · 时长）——媒体上方，左对齐，无图标无装饰 */
.chat-meta-params { justify-content: flex-start; color: var(--text-secondary); }
/* bh 版：聊天流成片图交互——放大预览(灯箱) + 视频⛶放大 + 右下角重新生成(圆形图标) */
.chat-media-wrap { position: relative; display: block; overflow: hidden; border-radius: 12px; cursor: pointer; }
.chat-media-wrap-video { cursor: default; }
.chat-media-wrap:hover .chat-media { transform: scale(1.02); }
.chat-media-zoom { position: absolute; top: 8px; right: 8px; z-index: 3; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-default, rgba(255,255,255,.18)); background: rgba(0,0,0,.45); color: #fff; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .16s ease; }
.chat-media-zoom:hover { background: var(--accent-soft, rgba(232, 184, 75,.5)); border-color: var(--accent, #E8B84B); }
/* bm 版修订：↻ 重新生成挪到 chat-meta 行内（消耗/时间同一行最右侧），24×24 行内圆形，对齐右侧基线 */
/* fe→clean：对话流成片即梦式悬浮操作条——默认隐藏，hover 媒体才浮现，图标式不喧宾夺主 */
.chat-media-actions {
    position: absolute; bottom: 8px; right: 8px; z-index: 5;
    display: inline-flex; gap: 6px; padding: 4px;
    border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.chat-media-wrap:hover .chat-media-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chat-media-act {
    width: 28px; height: 28px; border-radius: 50%;
    border: 0; background: transparent; color: #fff; line-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background .16s ease;
}
.chat-media-act svg { width: 15px; height: 15px; display: block; }
.chat-media-act:hover { background: rgba(255,255,255,.18); }
.chat-media-act.chat-act-regen:hover { background: var(--accent, #E8B84B); }
/* bq 版：对话流视频→原地播放三角形（取代灯箱放大） */
.chat-media-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 3; cursor: pointer;
    width: 46px; height: 46px; border-radius: 50%;
    border: 0; background: rgba(0,0,0,.5); color: #fff;
    font-size: 18px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .16s, transform .16s;
}
.chat-media-play:hover { background: var(--accent, #E8B84B); transform: translate(-50%, -50%) scale(1.06); }
.chat-media-wrap-video.playing .chat-media-play { display: none; }
/* fh：会话视频素材只保留一个常驻「下载」按钮（原生播放器已有播放/进度/全屏等按键，无需悬浮条） */
.chat-media-dl { position: absolute; top: 8px; right: 8px; z-index: 4; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: #fff; font-size: 15px; line-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .16s ease; }
.chat-media-dl svg { width: 15px; height: 15px; display: block; }
.chat-media-dl:hover { background: var(--accent, #E8B84B); border-color: var(--accent, #E8B84B); }
/* fe→clean：下载/重做已并入 .chat-media-actions 悬浮条，移除旧常驻角标与元信息行按钮规则 */
.lightbox-download { position: absolute; top: 14px; right: 54px; z-index: 5; cursor: pointer; font-size: 13px; font-family: inherit; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 14px; transition: all .16s ease; }
.lightbox-download:hover { background: var(--accent, #E8B84B); border-color: var(--accent, #E8B84B); }
.lightbox-replay { position: absolute; top: 14px; right: 132px; z-index: 5; cursor: pointer; font-size: 13px; font-family: inherit; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 14px; transition: all .16s ease; }
.lightbox-replay:hover { background: var(--accent, #E8B84B); border-color: var(--accent, #E8B84B); }
.lightbox-detail { position: absolute; top: 14px; right: 132px; z-index: 5; cursor: pointer; font-size: 13px; font-family: inherit; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 14px; transition: all .16s ease; }
.lightbox-detail:hover { background: var(--accent, #E8B84B); border-color: var(--accent, #E8B84B); }

/* 资产生成详情弹窗 */
.asset-detail-preview { text-align: center; margin-bottom: 16px; }
.asset-detail-prompt { margin-bottom: 14px; }
.asset-detail-prompt-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.asset-detail-prompt-text { font-size: 14px; line-height: 1.7; color: var(--text-primary); white-space: pre-wrap; background: var(--color-background-secondary); border-radius: 8px; padding: 12px 14px; }
.asset-detail-block { margin-bottom: 14px; }
.asset-detail-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.asset-detail-refs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border-tertiary); }
.asset-detail-params { border-top: 1px solid var(--color-border-tertiary); padding-top: 12px; }
.asset-detail-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border-tertiary); font-size: 13px; }
.asset-detail-key { flex: 0 0 88px; color: var(--text-secondary); }
.asset-detail-val { flex: 1; color: var(--text-primary); word-break: break-word; }
.asset-detail-session { margin-top: 14px; }
.asset-detail-session-btn { cursor: pointer; font-size: 13px; font-family: inherit; color: #fff; background: var(--accent, #E8B84B); border: none; border-radius: 999px; padding: 8px 16px; transition: all .16s ease; }
.asset-detail-session-btn:hover { opacity: .9; }
.chat-ref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-ref-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(232, 184, 75,.12); border: 1px solid rgba(232, 184, 75,.3); color: var(--text-secondary); font-size: 12px; padding: 4px 8px; border-radius: 999px; max-width: 220px; }
.chat-ref-chip .chat-ref-del { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.chat-ref-hint { font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.chat-send.is-generating { opacity: .6; pointer-events: none; }
@keyframes chatSpin { to { transform: rotate(360deg); } }
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 对话式参数行（即梦同款下拉式，版本 n，2026-08-18）========== */
.chat-params {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    margin: 0; padding: 0;
}
.chat-param { position: relative; display: inline-flex; }
.chat-param-trigger {
    /* 一排式：圆角矩形 8px,高度 34px；2026-08-31 压缩 padding/字号，确保 7 个参数一行放下 */
    display: inline-flex; align-items: center; gap: 4px;
    height: 32px; padding: 0 10px; border-radius: 8px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border-default, rgba(255,255,255,.10));
    color: var(--text-secondary); font-size: 12.5px; line-height: 1;
    font-family: inherit; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    /* 一排紧凑:触发按钮不收缩 */
    flex-shrink: 0;
    white-space: nowrap;
}
.chat-param-trigger:hover { background: rgba(255,255,255,.1); color: var(--text-primary); border-color: var(--border-hover); }
.chat-param-ico { font-size: 14px; line-height: 1; }
.chat-param-val { font-size: 12.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.chat-param-caret { font-size: 10px; opacity: .75; line-height: 1; }
.chat-param-toggle.is-on { color: var(--accent); border-color: rgba(232, 184, 75,.4); background: rgba(232, 184, 75,.08); }
.chat-menu-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.chat-param-menu {
    /* position/top/left 由 JS 注入（fixed 定位,逃出父级 stacking context） */
    min-width: 116px; padding: 5px;
    /* 2026-08-25：max-height 同时受视口约束——弹层在视口底部时防止“最下面只显示一半字” */
    max-height: min(280px, calc(100vh - 24px)); overflow-y: auto;
    background: var(--bg-popover, #1a1a24); border: 1px solid var(--border-default, rgba(255,255,255,.12));
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: chatMenuIn .14s ease;
    pointer-events: auto;
}
.chat-param-menu[hidden] { display: none; }
.chat-param-opt {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 7px 10px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-secondary); font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s;
}
.chat-param-opt:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.chat-param-opt.active { background: rgba(232, 184, 75,.18); color: var(--text-primary); font-weight: 600; }
@keyframes chatMenuIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.chat-param-meta { display: inline-flex; align-items: center; gap: 4px; padding-left: 4px; flex-shrink: 0; }
.chat-param-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px; transition: color .15s, background .15s; font-family: inherit; }
.chat-param-clear:hover { color: var(--text-primary); background: rgba(255,255,255,.04); }
.chat-param-cost { font-size: 11px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chat-param-cost-num { color: var(--accent); font-weight: 600; }

/* ========== 对话式附件行 + 上传/@ 弹层（即梦同款，版本 x，2026-08-18）========== */
/* textarea 左下角附件行：＋ 上传 / @ 素材 + 参考图 chips + 提示（+ 右侧操作组：清空/积分/发送） */
/* —— 版本 aj 2026-08-18：把原 chat-input-row2 操作组合并到 attach 行右靠，整卡片砍 ~34px —— */
.chat-input-attach {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 2px 2px;
}
/* 行末右靠的操作组：margin-left:auto 推到最右，自动避让左附件 */
.chat-input-attach .chat-input-actions {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;          /* 关键：推到右靠 */
    flex-shrink: 0;
}
/* 提示文字自动伸缩，挤压时 ellipsis，不挤占操作组位置 */
.chat-input-attach .chat-attach-hint {
    flex: 1 1 auto; min-width: 60px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ＋ / @ 圆形小按钮 */
.chat-attach-btn {
    width: 30px; height: 30px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border-default, rgba(255,255,255,.10));
    color: var(--text-secondary); font-size: 16px; line-height: 1;
    font-family: inherit; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.chat-attach-btn:hover { background: rgba(255,255,255,.1); color: var(--text-primary); border-color: var(--border-hover); }
.chat-attach-btn:active { transform: translateY(1px); }
/* 附件行右侧提示语 */
.chat-attach-hint { font-size: 12px; color: var(--text-muted); margin-left: 2px; }
/* 上传 / @ 弹层（fixed 定位,JS 注入 top/left,逃离父级 overflow） */
.chat-popover {
    position: fixed; z-index: 10000; min-width: 150px; padding: 5px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-popover, #1a1a24); border: 1px solid var(--border-default, rgba(255,255,255,.12));
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: chatMenuIn .14s ease;
}
.chat-popover[hidden] { display: none; }
.chat-popover-item {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 9px 12px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-secondary); font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s;
}
.chat-popover-item:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }

/* === 输入框上方独立大尺寸预览托盘（即梦同款） === */
.chat-tray {
    flex: 0 0 auto;
    align-self: flex-start;        /* 左对齐对话框左边界，不拉伸铺满 */
    width: fit-content;            /* 宽度按缩略图数量向右加宽 */
    max-width: 100%;
    margin: 10px 0 0;
    padding: 8px;
    background: var(--bg-overlay, rgba(255,255,255,.04));
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
    animation: chatMenuIn .14s ease;
}
.chat-tray[hidden] { display: none !important; }
.chat-tray-thumb-item {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 10px; overflow: hidden;
    background: #000; flex: 0 0 auto;
    border: 1px solid var(--border-subtle);
    cursor: pointer; padding: 0; margin: 0;
    transition: transform .15s, border-color .15s;
}
.chat-tray-thumb-item:hover { transform: translateY(-1px); border-color: var(--accent, #E8B84B); }
.chat-tray-thumb-item img,
.chat-tray-thumb-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-tray-thumb-x {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,0,0,.6); color: #fff; border: 0; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.chat-tray-thumb-x:hover { background: rgba(220,38,38,.9); }
.chat-tray-thumb-role {
    position: absolute; left: 3px; bottom: 3px;
    padding: 1px 4px; border-radius: 4px;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: 9px; line-height: 1.4; pointer-events: none;
}

/* === gr：成片上方「会话时托盘参考图」回显（即梦同款，只读悬停预览） === */
.chat-refs-snap {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 2px 0 8px;
}
.chat-refs-snap-item {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 10px; overflow: hidden;
    background: #000; flex: 0 0 auto;
    border: 1px solid var(--border-subtle);
    cursor: default; padding: 0; margin: 0;
    transition: border-color .15s, transform .15s;
}
.chat-refs-snap-item:hover { transform: translateY(-1px); border-color: var(--accent, #E8B84B); }
.chat-refs-snap-item img,
.chat-refs-snap-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.chat-refs-snap-item.is-video-empty { background: linear-gradient(135deg, #1f2230 0%, #2a2d4a 100%); position: relative; }
.chat-refs-snap-item.is-video-empty::before { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,0.85); font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: none; }
.chat-refs-hover-preview {
    position: fixed; z-index: 3000; display: none;
    max-width: 300px; max-height: 300px;
    border-radius: 12px; overflow: hidden;
    background: rgba(0,0,0,.92);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    pointer-events: none;
}
.chat-refs-hover-preview img,
.chat-refs-hover-preview video { max-width: 300px; max-height: 300px; display: block; }

/* === contenteditable 输入框（替换原 textarea）=== */
.chat-prompt[contenteditable] {
    min-height: 64px; max-height: 160px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word; outline: none; height: auto;
}
.chat-prompt[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: var(--text-tertiary, #5e5e6e); pointer-events: none;
}
/* === 行内缩略图芯片（素材引用直接进输入框，与提示词混排）=== */
.chat-inline-chip {
    display: inline-block; width: 26px; height: 26px; border-radius: 6px;
    overflow: hidden; vertical-align: middle; position: relative;
    margin: 0 2px; border: 1px solid var(--border-subtle, rgba(255,255,255,.15)); background: #000;
}
.chat-inline-chip-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-inline-chip-x {
    position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%;
    background: rgba(0,0,0,.72); color: #fff; border: 0; font-size: 10px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* 主体芯片（可能@的内容 → 缩略图 + 名称，无 ×） */
.chat-inline-chip.subject-chip {
    width: auto; min-width: 44px; max-width: 120px; height: 26px; padding: 0 4px 0 0;
    display: inline-flex; align-items: center; gap: 4px; border-radius: 13px;
    background: var(--accent-soft, rgba(232, 184, 75,.14)); border-color: rgba(232, 184, 75,.35);
}
.chat-inline-chip.subject-chip .chat-inline-chip-media {
    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
}
.chat-inline-chip-name {
    font-size: 12px; color: var(--text-primary, #fff); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; line-height: 1;
}
/* 图生图下，素材引用面板中的视频项禁用选择 */
.picker-cell-disabled { opacity: .35; cursor: not-allowed; }
.picker-cell-disabled .picker-check { display: none; }

/* ===== ＋/ @ 素材选择器（即梦同款暗色模态，不联动右抽屉） ===== */
.picker-mask { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.picker-mask[hidden] { display: none; }
.picker-mask-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.picker-box {
    position: relative; width: min(900px, 94vw); max-height: 86vh;
    background: var(--bg-elevated, #12121a); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.picker-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.picker-tabs { display: flex; gap: 6px; }
.picker-tab { background: transparent; border: none; color: var(--text-muted, #b9b9c2); font-size: 14px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.picker-tab.active { background: rgba(255,255,255,.08); color: #fff; }
.picker-top-right { display: flex; align-items: center; gap: 8px; }
.picker-search { background: var(--bg-input, #0a0a10); border: 1px solid rgba(255,255,255,.1); color: #eee; border-radius: 8px; padding: 7px 10px; width: 160px; outline: none; }
.picker-newbtn { background: #3a2b6e; color: #fff; border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.picker-grid { flex: 1; overflow: auto; max-height: 60vh; padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; align-items: start; min-width: 0; }
.picker-empty { color: #888; grid-column: 1 / -1; text-align: center; padding: 40px 0; font-size: 14px; }
.picker-cell { position: relative; width: 100%; height: 0; padding-bottom: 100%; border-radius: 10px; overflow: hidden; background: #101014; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; }
.picker-cell > .picker-check, .picker-cell > .picker-del { position: absolute; z-index: 2; }
.picker-cell > img, .picker-cell > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-cell.selected { border-color: #E8B84B; }
.picker-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.4); border: 2px solid #fff; display: none; }
.picker-cell.selected .picker-check { display: block; background: #E8B84B; border-color: #fff; }
.picker-del { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.picker-bottom { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.picker-selcount { color: var(--text-muted, #b9b9c2); font-size: 13px; }
.picker-btns { display: flex; gap: 10px; }
.picker-btn-cancel { background: transparent; color: #b9b9c2; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 8px 18px; cursor: pointer; }
.picker-btn-ok { background: #E8B84B; color: #fff; border: none; border-radius: 8px; padding: 8px 22px; cursor: pointer; }
/* @ 双栏弹窗 */
.picker-box-at { width: min(820px, 94vw); max-width: 100%; flex-direction: row; flex-wrap: wrap; }
.picker-box-at .picker-side { order: 1; width: 150px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid rgba(255,255,255,.08); }
.picker-side-item { background: transparent; border: none; color: #b9b9c2; text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.picker-side-item.active { background: rgba(255,255,255,.08); color: #fff; }
.picker-box-at .picker-main { order: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.picker-box-at .picker-main .picker-grid { flex: 1; }
.picker-box-at .picker-bottom { order: 3; width: 100%; }

/* ===== ＋ 弹窗复刻真实资产库（独立 UI，不联动资产页） ===== */
.picker-box-assetlib { width: min(960px, 95vw); }
.picker-cattabs { display: flex; align-items: center; gap: 4px; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.08); overflow-x: auto; }
.picker-cattab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary, #b9b9c2); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); white-space: nowrap; transition: all var(--duration-fast); }
.picker-cattab svg { opacity: .7; }
.picker-cattab:hover { color: var(--text-primary, #fff); background: var(--bg-elevated, #1a1a24); border-color: rgba(255,255,255,.08); }
.picker-cattab.active { color: var(--accent, #E8B84B); background: var(--accent-soft, rgba(232, 184, 75,.12)); border-color: rgba(232, 184, 75,.25); }
.picker-cattab.active svg { opacity: 1; }
.picker-subbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.06); }
.picker-subbar-left, .picker-subbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.picker-asub { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-subtle, rgba(255,255,255,.12)); background: transparent; color: var(--text-secondary, #b9b9c2); font-size: 12px; cursor: pointer; font-family: var(--font-sans); transition: all var(--duration-fast); }
.picker-asub:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); }
.picker-asub.active { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); background: var(--accent-soft, rgba(232, 184, 75,.12)); }
.picker-asub-icon { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-subtle, rgba(255,255,255,.12)); background: transparent; color: var(--text-secondary, #b9b9c2); font-size: 12px; cursor: pointer; font-family: var(--font-sans); transition: all var(--duration-fast); }
.picker-asub-icon:hover { border-color: rgba(255,255,255,.2); color: var(--text-primary, #fff); background: var(--bg-elevated, #1a1a24); }
.picker-search-wrap { position: relative; display: flex; align-items: center; }
.picker-search-wrap svg { position: absolute; left: 10px; color: var(--text-tertiary, #777); pointer-events: none; }
.picker-search-input { padding: 6px 10px 6px 30px; border-radius: 20px; border: 1px solid var(--border-subtle, rgba(255,255,255,.12)); background: var(--bg-input, #0a0a10); color: var(--text-primary, #eee); font-size: 12px; font-family: var(--font-sans); width: 140px; outline: none; transition: all var(--duration-fast); }
.picker-search-input:focus { border-color: var(--accent, #E8B84B); width: 180px; }
.picker-search-input::placeholder { color: var(--text-tertiary, #777); }
/* 复用 .assets-grid 的 240px 自适应网格 + .asset-card 卡片外观，这里只补滚动与间距 */
.picker-assetlib-grid { flex: 1 1 auto; min-height: 480px; overflow: auto; padding: 16px 16px 20px; gap: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picker-assetlib-grid .asset-card.selected { border-color: var(--accent, #E8B84B); box-shadow: 0 0 0 2px var(--accent, #E8B84B); }
/* 防止 .asset-card-media 的 aspect-ratio 在 flex-column + overflow:auto 滚动容器里被网格 auto 行 max-content sizing 吞掉而塌成"口香糖"细条；复用 line 5439 同款 min-height 兜底模式 */
.picker-assetlib-grid .asset-card { min-height: 150px; }

/* di：登录态徽章（已登录时绿色 ✓） */
.chat-empty-login-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; background: rgba(34, 197, 94, .12); color: #22c55e; font-size: 12px; font-weight: 600; margin-bottom: 12px; border: 1px solid rgba(34, 197, 94, .35); }
.chat-empty-login-badge[hidden] { display: none; }

/* ===== 可能@的内容（主体选择，即梦同款） ===== */
.picker-box-subject { width: min(420px, 92vw); padding: 0; overflow: hidden; }
.picker-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; }
.picker-head-title { font-size: 15px; font-weight: 600; color: var(--text-primary, #fff); }
.picker-head-close { background: transparent; border: none; color: var(--text-tertiary, #888); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.picker-head-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.subject-create-card { padding: 4px 16px; }
.subject-create-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.2); background: transparent; color: var(--text-primary, #fff); font-size: 14px; cursor: pointer; font-family: var(--font-sans); transition: all var(--duration-fast); }
.subject-create-btn:hover { border-color: var(--accent, #E8B84B); background: var(--accent-soft, rgba(232, 184, 75,.1)); }
.subject-create-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--accent, #E8B84B); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; }
.subject-list { flex: 1; overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; }
.subject-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-subtle, rgba(255,255,255,.08)); background: var(--bg-elevated, #17171f); cursor: pointer; transition: all var(--duration-fast); }
.subject-item:hover { border-color: rgba(255,255,255,.18); background: var(--bg-elevated-2, #1d1d28); }
.subject-item.selected { border-color: var(--accent, #E8B84B); box-shadow: 0 0 0 2px var(--accent, #E8B84B); }
.subject-item-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #0a0a10; }
.subject-item-thumb-video { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #0a0a10; }
.subject-item-thumb-wrap { position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; }
.subject-item-thumb-wrap.thumb-failed { background: #1a1a24; display: flex; align-items: center; justify-content: center; }
.subject-item-thumb-wrap.thumb-failed::before { content: '▦'; color: var(--text-tertiary, #555); font-size: 22px; }
/* dy8：视频主体无 posterUrl 时显示「▶ 视频」占位（之前是黑方块） */
.subject-item-thumb-wrap.is-video-empty { background: linear-gradient(135deg, #1f2230 0%, #2a2d4a 100%); display: flex; align-items: center; justify-content: center; }
.subject-item-thumb-wrap.is-video-empty::before { content: '▶'; color: rgba(255,255,255,0.8); font-size: 20px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
/* dy8：托盘里视频/图片 src 加载失败时显示 ▶ 占位（之前黑方块） */
.chat-tray-thumb-item.is-video-empty { background: linear-gradient(135deg, #1f2230 0%, #2a2d4a 100%); position: relative; }
.chat-tray-thumb-item.is-video-empty::before { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,0.85); font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: none; }
.subject-item-dur-badge { position: absolute; left: 4px; bottom: 4px; font-size: 10px; color: #fff; background: rgba(0,0,0,.6); padding: 2px 5px; border-radius: 6px; line-height: 1; }
.subject-item-info { flex: 1; min-width: 0; }
.subject-item-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subject-item-desc { font-size: 12px; color: var(--text-tertiary, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.subject-item-dur { font-size: 11px; color: var(--text-tertiary, #888); flex-shrink: 0; background: rgba(255,255,255,.06); padding: 3px 8px; border-radius: 10px; }
.subject-item-menu-btn { flex-shrink: 0; background: transparent; border: none; color: var(--text-tertiary, #888); font-size: 20px; line-height: 1; padding: 0 6px; cursor: pointer; border-radius: 6px; }
.subject-item-menu-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.subject-item-menu-pop { position: absolute; z-index: 11000; min-width: 140px; background: var(--bg-elevated-2, #1d1d28); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.subject-item-menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--text-primary, #fff); font-size: 13px; cursor: pointer; border-radius: 8px; font-family: var(--font-sans); text-align: left; }
.subject-item-menu-pop button:hover { background: rgba(255,255,255,.08); }
.subject-item-menu-pop button svg { flex-shrink: 0; color: var(--text-secondary, #b9b9c2); }

/* dz：资产卡片 ⋯ 弹窗（置顶/重命名/删除） */
.asset-menu-pop { position: absolute; z-index: 11000; min-width: 140px; background: var(--bg-elevated-2, #1d1d28); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.asset-menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--text-primary, #fff); font-size: 13px; cursor: pointer; border-radius: 8px; font-family: var(--font-sans); text-align: left; }
.asset-menu-pop button:hover { background: rgba(255,255,255,.08); }
.asset-menu-pop button svg { flex-shrink: 0; color: var(--text-secondary, #b9b9c2); }
/* dz：置顶资产角标 */
.asset-card-pinned-badge { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,.9); color: #A8842A; font-size: 14px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); pointer-events: none; }

/* ===== 创建主体：从本地/资产 ===== */
.picker-box-sources { width: min(360px, 90vw); padding: 0; overflow: hidden; }
.subject-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 18px 20px; }
.subject-source-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; border-radius: 14px; border: 1px solid var(--border-subtle, rgba(255,255,255,.1)); background: var(--bg-elevated, #17171f); color: var(--text-primary, #fff); font-size: 13px; cursor: pointer; font-family: var(--font-sans); transition: all var(--duration-fast); }
.subject-source-item svg { color: var(--accent, #E8B84B); }
.subject-source-item:hover { border-color: var(--accent, #E8B84B); background: var(--accent-soft, rgba(232, 184, 75,.1)); }

/* ===== 设置主体 ===== */
.picker-box-subject-edit { width: min(440px, 94vw); padding: 0; overflow: hidden; }
.subject-edit-body { padding: 8px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.subject-edit-field { position: relative; }
.subject-edit-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary, #fff); margin-bottom: 8px; }
.subject-edit-label em { color: #ff6b6b; font-style: normal; }
.subject-edit-media { min-height: 120px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.18); background: var(--bg-input, #0a0a10); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.subject-edit-media-empty { color: var(--text-tertiary, #777); font-size: 13px; }
.subject-edit-media img, .subject-edit-media video { width: 100%; max-height: 220px; object-fit: contain; }
.subject-edit-media-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: none; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.subject-edit-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-subtle, rgba(255,255,255,.14)); background: var(--bg-input, #0a0a10); color: var(--text-primary, #eee); font-size: 14px; font-family: var(--font-sans); outline: none; box-sizing: border-box; }
.subject-edit-input:focus { border-color: var(--accent, #E8B84B); }
.subject-edit-count { position: absolute; right: 10px; bottom: 10px; font-size: 11px; color: var(--text-tertiary, #777); }
.subject-edit-textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-subtle, rgba(255,255,255,.14)); background: var(--bg-input, #0a0a10); color: var(--text-primary, #eee); font-size: 13px; font-family: var(--font-sans); outline: none; resize: none; box-sizing: border-box; }
.subject-edit-textarea:focus { border-color: var(--accent, #E8B84B); }
.subject-edit-tip { font-size: 12px; color: var(--text-tertiary, #888); align-self: center; }

/* et：统一「原始原生 select」暗色化（projectSelect / cp-select / 其它遗漏下拉）——
   与 .model-dropdown 同风格：appearance:none + 自定义箭头 + 深色主题 */
.project-selector select,
select.projectSelect,
select.cp-select {
    appearance: none; -webkit-appearance: none;
    padding: 5px 24px 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.14));
    background-color: var(--bg-input, #0a0a10);
    color: var(--text-primary, #eee);
    font-size: 12px; font-weight: 500; font-family: var(--font-sans);
    cursor: pointer; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888899'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
    transition: border-color var(--duration-fast, .15s) var(--ease-out, ease);
}
.project-selector select:hover,
select.projectSelect:hover,
select.cp-select:hover { border-color: var(--border-hover, rgba(255,255,255,.3)); }
.project-selector select:focus,
select.projectSelect:focus,
select.cp-select:focus { border-color: var(--accent, #E8B84B); box-shadow: 0 0 0 3px rgba(232, 184, 75,.18); }
/* 深色下拉面板（Chrome 系支持 color-scheme） */
.project-selector select,
select.projectSelect,
select.cp-select { color-scheme: dark; }

/* et2：投稿弹窗表单暗色化（原为系统原生控件） */
.submission-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.submission-label { font-size: 12px; color: var(--text-secondary, #8b8b9e); font-weight: 500; }
.submission-field input[type="text"],
.submission-field textarea {
    appearance: none; -webkit-appearance: none;
    width: 100%; box-sizing: border-box;
    padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.14));
    background: var(--bg-input, #0a0a10); color: var(--text-primary, #eee);
    font-size: 13px; font-family: var(--font-sans); outline: none;
    transition: border-color var(--duration-fast, .15s) ease;
}
.submission-field textarea { resize: vertical; min-height: 64px; }
.submission-field input[type="text"]::placeholder,
.submission-field textarea::placeholder { color: var(--text-tertiary, #5e5e6e); }
.submission-field input[type="text"]:focus,
.submission-field textarea:focus { border-color: var(--accent, #E8B84B); box-shadow: 0 0 0 3px rgba(232, 184, 75,.18); }
.submission-field input[type="file"] {
    color: var(--text-secondary, #8b8b9e); font-size: 12px;
    border: 1px dashed var(--border-subtle, rgba(255,255,255,.18));
    border-radius: 8px; padding: 10px; width: 100%; box-sizing: border-box;
    background: var(--bg-overlay, rgba(255,255,255,.04)); cursor: pointer;
}
.submission-field input[type="file"]::-webkit-file-upload-button {
    background: var(--accent, #E8B84B); color: #fff; border: none;
    border-radius: 6px; padding: 5px 12px; margin-right: 10px; cursor: pointer; font-size: 12px;
}

/* ===== 虚拟人像库（2026-08-23j） ===== */
.asset-card-avatar .asset-card-media { position: relative; background: var(--bg-surface, #15151d); }
/* asset:// 协议浏览器无法加载 → 不露黑底，改用浅色占位渐变 */
.asset-card-avatar .asset-card-media.no-img { background: linear-gradient(135deg, #23233a, #2c2c46); }
.asset-card-avatar .asset-card-media.no-img::after {
    content: '虚拟人预览'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #8b8ba6; font-size: 12px;
}
.asset-badge-avatar { background: linear-gradient(135deg, #E8B84B, #b06cff); color: #fff; }
.avatar-rename-btn { position: absolute; top: 6px; right: 6px; z-index: 3; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; }
.avatar-rename-btn:hover { background: rgba(0,0,0,.8); }
/* —— 关键修复：虚拟人区块是 #assetsGrid(grid 容器) 的直接子项，必须跨满整行，
   否则只占 1 个 track，内部 4 列网格被压窄 → 横向溢出 → 资产网格左溢页面 —— */
.asset-section-avatar { margin-bottom: 18px; grid-column: 1 / -1; min-width: 0; }
.asset-section-avatar .asset-section-title { color: #b06cff; font-weight: 600; margin-bottom: 10px; }
/* 内部网格用自适应列（与左侧资产网格一致），避免固定 4 列在窄容器内溢出 */
.asset-section-avatar > .asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px; padding: 0; box-sizing: border-box;
}

/* 虚拟人详情弹窗 */
.avatar-group-box { max-width: 680px; max-height: 86vh; overflow-y: auto; }
.avatar-group-meta { padding: 12px 16px; border-bottom: 1px solid var(--border, #2a2a3a); font-size: 13px; line-height: 1.7; }
.avatar-group-meta b { color: var(--text-dim, #9aa); font-weight: 500; }
.avatar-group-tags { color: #c9b6ff; }
.avatar-group-id { margin-top: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-dim, #9aa); }
.avatar-copy-id { margin-left: 6px; background: var(--bg-elevated, #2a2a3a); color: var(--text, #ddd); border: 1px solid var(--border, #3a3a4a); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px; }
.avatar-group-assets-title { padding: 12px 16px 4px; font-size: 13px; color: var(--text-dim, #9aa); }
.avatar-group-assets { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 16px 16px; }
.avatar-detail-asset { width: 150px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--bg-elevated, #1e1e2a); cursor: pointer; transition: border-color .15s; }
.avatar-detail-asset.selected { border-color: #E8B84B; }
.avatar-detail-asset-media { position: relative; aspect-ratio: 3/4; background: #000; }
.avatar-detail-asset-media.no-img { background: linear-gradient(135deg, #23233a, #2c2c46); }
.avatar-detail-asset-media.no-img::after { content: '无预览'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b8ba6; font-size: 12px; }
.avatar-detail-asset-media img { width: 100%; height: 100%; object-fit: cover; }
.avatar-use-btn { position: absolute; bottom: 6px; right: 6px; background: rgba(232, 184, 75,.92); color: #fff; border: none; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.avatar-detail-asset-label { padding: 6px 8px; font-size: 12px; color: var(--text-dim, #9aa); text-align: center; }
.avatar-group-foot { padding: 12px 16px; border-top: 1px solid var(--border, #2a2a3a); display: flex; justify-content: flex-end; }
.avatar-use-selected { background: linear-gradient(135deg, #E8B84B, #b06cff); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 14px; cursor: pointer; }
.avatar-rename-btn-2 { margin-left: auto; background: var(--bg-elevated, #2a2a3a); color: var(--text, #ddd); border: 1px solid var(--border, #3a3a4a); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }

/* 虚拟人参考托盘（生成界面） */
.avatar-ref-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 4px; }
.avatar-ref-chip { display: flex; align-items: center; gap: 6px; background: var(--bg-elevated, #1e1e2a); border: 1px solid #E8B84B55; border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.avatar-ref-chip img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; }
.avatar-ref-noimg { width: 28px; height: 28px; border-radius: 5px; background: linear-gradient(135deg, #E8B84B, #b06cff); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.avatar-ref-del { background: none; border: none; color: var(--text-dim, #9aa); cursor: pointer; font-size: 14px; padding: 0 2px; }

/* ===== Agent 对话模式（agent-chat.js / 2026-08-29）===== */
.agent-mode-toggle {
    display: flex; align-items: center; gap: 4px;
    margin-left: 18px; padding: 3px;
    background: var(--bg-overlay, rgba(232, 184, 75,.08));
    border: 1px solid var(--border-subtle, #3a3a4a);
    border-radius: var(--radius-xs, 8px);
    flex-shrink: 0;
}
.agent-mode-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 4px 12px; font-size: 12px; color: var(--text-tertiary, #9aa);
    border-radius: 6px; transition: all .15s ease;
    white-space: nowrap;
}
.agent-mode-btn.active {
    background: var(--accent, #E8B84B); color: #fff;
}
.agent-mode-btn:not(.active):hover { color: var(--text-primary, #eee); }

.agent-freechat-wrap {
    display: flex; flex-direction: column;
    height: 100%; width: 100%;
    min-height: 0;
    background: var(--bg-elevated, #1e1e2a);
    border: 1px solid var(--border-subtle, #3a3a4a);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    position: relative;
}
.agent-freechat-log {
    flex: 1; overflow-y: auto;
    min-height: 0;
    padding: 20px 22px;
}
.agent-freechat-welcome { padding: 28px 8px; text-align: center; }
.agent-freechat-welcome h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: var(--text-primary, #eee); }
.agent-freechat-welcome p { font-size: 13px; line-height: 1.7; color: var(--text-tertiary, #9aa); margin: 0 auto; max-width: 460px; }
.agent-freechat-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.agent-freechat-example {
    border: 1px solid var(--border-subtle, #3a3a4a); background: var(--bg-overlay, rgba(232, 184, 75,.06));
    color: var(--text-secondary, #ccd); border-radius: 16px;
    padding: 6px 14px; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.agent-freechat-example:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); }

.agent-freechat-bar {
    position: relative;  /* 让发送按钮 + 托盘方块都能绝对定位到 textarea 内部 */
    padding: 10px 14px; border-top: 1px solid var(--border-subtle, #3a3a4a);
    background: var(--bg-elevated, #1e1e2a);
}
.agent-freechat-bar textarea {
    position: relative;  /* 让内嵌的托盘方块可以相对 textarea 定位 */
    display: block; width: 100%; box-sizing: border-box;
    resize: none;
    background: var(--bg-overlay, rgba(255,255,255,.04));
    border: 1px solid var(--border-subtle, #3a3a4a);
    border-radius: 10px; color: var(--text-primary, #eee);
    font-size: 13px; line-height: 1.6;
    /* 顶 50px 让位给左上角托盘方块（36+14），底 9 文字左右边距，左 48 给方块， 右 52 给发送键 */
    padding: 9px 52px 9px 88px;
    font-family: inherit; max-height: 120px; min-height: 80px;
}
.agent-freechat-bar textarea:focus { outline: none; border-color: var(--accent, #E8B84B); }
/* 发送按钮：内置到 textarea 右下角，圆形小飞机图标 */
.agent-freechat-send {
    position: absolute; right: 22px; bottom: 18px;
    border: none; background: var(--accent, #E8B84B); color: #fff;
    border-radius: 50%;  /* 圆形 */
    width: 36px; height: 36px; padding: 0;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: opacity .15s ease, transform .1s ease;
    box-shadow: 0 2px 8px rgba(232, 184, 75,0.3);
}
.agent-freechat-send:disabled { opacity: .5; cursor: not-allowed; }
.agent-freechat-send:hover:not(:disabled) { transform: scale(1.05); background: var(--accent-hover, #F2C14E); }
/* 新对话按钮已移至左抽屉的 agent 会话侧栏入口（"+ 新对话"按钮在 1952 行），此规则不再使用。*/

/* 对话模式气泡复用 .agent-message/.agent-bubble，补充打字指示 */
.agent-freechat-typing { display: flex; gap: 5px; align-items: center; padding: 4px 2px; }
.agent-freechat-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-tertiary, #9aa);
    animation: agentTypingBlink 1.2s infinite;
}
.agent-freechat-typing span:nth-child(2) { animation-delay: .2s; }
.agent-freechat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes agentTypingBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* 方案卡片 */
.agent-brief-card {
    max-width: 92%;
    background: var(--bg-elevated, #1e1e2a);
    border: 1px solid var(--accent, #E8B84B);
    border-radius: var(--radius-md, 12px);
    padding: 14px 16px;
    font-size: 13px; line-height: 1.65;
}
.agent-brief-card .brief-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #eee); margin-bottom: 2px; }
.agent-brief-card .brief-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.agent-brief-card .brief-tag {
    background: var(--bg-overlay, rgba(232, 184, 75,.1));
    color: var(--text-secondary, #ccd);
    border-radius: 5px; padding: 2px 8px; font-size: 11px;
}
.agent-brief-card table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.agent-brief-card th { text-align: left; color: var(--text-tertiary, #9aa); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--border-subtle, #3a3a4a); }
.agent-brief-card td { padding: 5px 6px; border-bottom: 1px solid var(--border-subtle, #3a3a4a); color: var(--text-secondary, #ccd); vertical-align: top; }
.agent-brief-card .brief-summary { color: var(--text-tertiary, #9aa); font-size: 12px; margin: 8px 0 10px; }
.agent-brief-card .brief-params {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 10px 0; margin: 8px 0 10px;
    border-top: 1px solid var(--border-subtle, #3a3a4a);
    border-bottom: 1px solid var(--border-subtle, #3a3a4a);
}
.agent-brief-card .brief-params label {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-secondary, #ccd);
    white-space: nowrap;
}
.agent-brief-card .brief-params select {
    background: var(--bg-elevated, #1e1e2a);
    border: 1px solid var(--border-subtle, #3a3a4a);
    border-radius: 6px; color: var(--text-secondary, #ccd);
    font-size: 12px; padding: 3px 6px;
    font-family: inherit; cursor: pointer;
    outline: none;
}
.agent-brief-card .brief-params select:focus { border-color: var(--accent, #E8B84B); }
.agent-brief-card .brief-actions { display: flex; gap: 8px; margin-top: 10px; }
.agent-brief-go {
    border: none; background: var(--accent, #E8B84B); color: #fff;
    border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.agent-brief-go:disabled { opacity: .5; cursor: not-allowed; }
.agent-brief-note { font-size: 11px; color: var(--text-tertiary, #9aa); align-self: center; }
.agent-brief-error { color: #ff9a9a; font-size: 12px; margin-top: 6px; }

/* ===== Agent 对话模式选项条与素材托盘（2026-08-29）===== */
.agent-freechat-assets {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, #3a3a4a);
    background: var(--bg-elevated, #1e1e2a);
    min-height: 42px;
}
.agent-freechat-add-asset {
    border: 1px dashed var(--border-subtle, #3a3a4a);
    background: transparent; color: var(--text-tertiary, #9aa);
    border-radius: 8px; padding: 5px 10px; font-size: 12px;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.agent-freechat-add-asset:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); }
.agent-freechat-asset-list {
    display: flex; align-items: center; gap: 6px;
    flex: 1; overflow-x: auto;
}
.agent-freechat-asset-list:empty { display: none; }
.agent-freechat-asset-item {
    position: relative; display: inline-flex; align-items: center;
    gap: 4px; padding: 2px 20px 2px 6px;
    background: var(--bg-overlay, rgba(232, 184, 75,.08));
    border: 1px solid var(--border-subtle, #3a3a4a);
    border-radius: 6px; font-size: 11px; color: var(--text-secondary, #ccd);
    white-space: nowrap; flex-shrink: 0;
}
.agent-freechat-asset-item img,
.agent-freechat-asset-item video {
    width: 22px; height: 22px; object-fit: cover; border-radius: 3px; background: #000;
}
.agent-freechat-asset-remove {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; color: var(--text-tertiary, #9aa);
    cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px;
}
.agent-freechat-asset-remove:hover { color: #ff9a9a; }
.agent-freechat-empty-assets { color: var(--text-tertiary, #9aa); font-size: 12px; }

/* Agent 对话模式历史会话下拉 */
.agent-freechat-history-btn {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: auto; padding: 6px 10px; border-radius: 8px;
    border: 1px solid var(--border-default, rgba(255,255,255,.06));
    background: var(--bg-elevated, #12121a); color: var(--text-secondary, #9191a1);
    font-size: 12px; cursor: pointer; transition: all .15s;
}
.agent-freechat-history-btn:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); }
.agent-session-list-pop {
    position: absolute; min-width: 260px; max-width: 320px; max-height: 360px; overflow-y: auto;
    background: var(--bg-surface, #0d0d14); border: 1px solid var(--border-default, rgba(255,255,255,.06));
    border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
    padding: 8px; z-index: 9999;
}
.agent-session-list-header {
    font-size: 12px; font-weight: 600; color: var(--text-secondary, #9191a1);
    padding: 6px 8px 8px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.04));
    margin-bottom: 4px;
}
.agent-session-list-empty, .agent-session-list-loading {
    font-size: 12px; color: var(--text-tertiary, #5e5e6e); padding: 14px; text-align: center;
}
.agent-session-list-item {
    position: relative; padding: 10px 34px 10px 10px; border-radius: 8px; cursor: pointer;
    transition: background .12s;
}
.agent-session-list-item:hover { background: var(--bg-hover, rgba(255,255,255,.05)); }
.agent-session-list-item.current { background: var(--accent-soft, rgba(232, 184, 75,.10)); }
.agent-session-list-title {
    font-size: 13px; color: var(--text-primary, #fcfcfd); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-session-list-meta {
    font-size: 11px; color: var(--text-tertiary, #5e5e6e); margin-top: 3px;
}
.agent-session-list-cur {
    display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px;
    background: var(--accent, #E8B84B); color: #fff; font-size: 10px; font-weight: 500;
}
.agent-session-list-menu {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 5px; border: none;
    background: transparent; color: var(--text-tertiary, #5e5e6e); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.agent-session-list-menu:hover { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-secondary, #9191a1); }
@media (max-width: 640px) {
    .agent-session-list-pop { left: 16px !important; right: 16px !important; max-width: none; }
}

/* ============================================================
   A4：加厚结果可视化与编辑面板（红线：展示加厚→用户编辑→确认）
   ============================================================ */
.script-card-thicken { border-top: 1px dashed var(--border, rgba(255,255,255,.12)); margin-top: 10px; padding-top: 8px; }
.script-card-thicken-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 4px 2px; user-select: none; gap: 8px; }
.script-card-thicken-title { font-size: 13px; color: #e8c46e; flex: 1; }
.script-card-thicken.open .script-card-thicken-body { display: block; }
.script-card-thicken-body { display: none; padding: 8px 2px; }
.thicken-row { margin-bottom: 10px; }
.thicken-row-label { font-size: 12px; color: var(--text-secondary, #9191a1); margin-bottom: 4px; }
.thicken-summary-input { width: 100%; box-sizing: border-box; min-height: 72px; background: var(--bg-elev, rgba(255,255,255,.06)); border: 1px solid var(--border, rgba(255,255,255,.15)); border-radius: 8px; color: var(--text-primary, #eee); padding: 8px 10px; font-size: 13px; line-height: 1.6; resize: vertical; }
.thicken-intensity-select { background: var(--bg-elev, rgba(255,255,255,.08)); border: 1px solid var(--border, rgba(255,255,255,.15)); border-radius: 6px; color: var(--text-primary, #eee); font-size: 12px; padding: 2px 6px; cursor: pointer; }
.thicken-dims { display: flex; flex-direction: column; gap: 6px; }
.thicken-dim-block { background: var(--bg-elev, rgba(255,255,255,.04)); border-radius: 6px; padding: 6px 8px; }
.thicken-dim-name { font-size: 11px; font-weight: 600; color: var(--text-secondary, #9191a1); margin-bottom: 2px; }
.thicken-dim-item { font-size: 12px; color: var(--text-primary, #ddd); line-height: 1.6; }
.thicken-actions { display: flex; gap: 8px; margin-top: 8px; }
.thicken-btn { border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; cursor: pointer; transition: opacity .2s; }
.thicken-btn:disabled { opacity: .5; cursor: not-allowed; }
.thicken-btn-regen { background: rgba(232,196,110,.15); color: #e8c46e; }
.thicken-btn-apply { background: rgba(88,166,255,.15); color: #58a6ff; }
.thicken-btn:hover:not(:disabled) { opacity: .85; }

/* Agent 顶部标题居中：让 title-block 改为列布局，"创意 Agent"独立居中到主区中央
   避开左抽屉收起后露出的"会话"开关按钮（前面 text-align: center 对 flex 容器无效，必须改布局） */
.agent-page-header .agent-title-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; overflow: visible; }
.agent-page-header .agent-title-block h1 { display: block; }
.agent-page-header .agent-title-block p { white-space: normal; max-width: 100%; }

/* 两阶段：内容未确认时参数区占位提示 */
.brief-params-pending {
    margin: 8px 0 4px;
    padding: 8px 12px;
    background: rgba(232, 184, 75,0.08);
    border: 1px dashed rgba(232, 184, 75,0.35);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary, #9aa);
    line-height: 1.6;
}

/* 两阶段：第一轮方案卡的角色/场景块 */
.brief-block {
    margin: 6px 0;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary, #ddd);
}
.brief-block-label {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(232, 184, 75,.15);
    color: #F2D98F;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 6px;
    min-width: 32px;
    text-align: center;
}

/* ============================================================
   参数选项卡（生成前最后决策弹窗）：内容确认后弹出
   ============================================================ */
.agent-param-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.agent-param-card {
    width: min(560px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg-elevated, #22222f);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.agent-param-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.agent-param-head h3 { margin: 0; font-size: 16px; color: var(--text-primary, #eee); }
.agent-param-close {
    background: transparent; border: none; color: var(--text-tertiary, #888);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;
}
.agent-param-close:hover { color: var(--text-primary, #eee); }
.agent-param-content { display: flex; flex-direction: column; gap: 10px; }
.agent-param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent-param-grid .agent-param-full { grid-column: 1 / -1; }
.agent-param-field label {
    display: block; font-size: 12px; color: var(--text-secondary, #9aa);
    margin-bottom: 4px;
}
.agent-param-field select {
    width: 100%; box-sizing: border-box;
    background: var(--bg-overlay, rgba(255,255,255,.06));
    border: 1px solid var(--border-subtle, rgba(255,255,255,.14));
    border-radius: 8px; color: var(--text-primary, #eee);
    font-size: 13px; padding: 8px 10px;
}
.agent-param-preview {
    background: var(--bg-overlay, rgba(255,255,255,.04));
    border-radius: 10px; padding: 10px 12px;
    max-height: 160px; overflow-y: auto;
    font-size: 12px; line-height: 1.7; color: var(--text-secondary, #bbb);
}
.agent-param-preview b { color: var(--text-primary, #eee); }
.agent-param-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.agent-param-btn {
    border: none; border-radius: 10px; padding: 10px 22px;
    font-size: 14px; cursor: pointer; transition: opacity .15s;
}
.agent-param-btn:disabled { opacity: .5; cursor: not-allowed; }
.agent-param-btn-primary { background: var(--accent, #E8B84B); color: #fff; }
.agent-param-btn-ghost { background: transparent; border: 1px solid var(--border-subtle, rgba(255,255,255,.2)); color: var(--text-secondary, #9aa); }
.agent-param-btn:hover:not(:disabled) { opacity: .85; }

/* 内容卡「九维度加厚」按钮组 */
.brief-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-subtle, rgba(255,255,255,.12)); }
.brief-thicken-btn,
.brief-confirm-btn {
    border: none; border-radius: 8px; padding: 8px 14px; font-size: 12px;
    cursor: pointer; transition: opacity .15s, transform .1s;
}
.brief-thicken-btn { background: rgba(232,196,110,.15); color: #e8c46e; }
.brief-confirm-btn { background: rgba(88,166,255,.18); color: #58a6ff; }
.brief-thicken-btn:hover:not(:disabled),
.brief-confirm-btn:hover { opacity: .85; transform: translateY(-1px); }
.brief-thicken-btn:disabled { opacity: .6; cursor: not-allowed; }
.brief-thicken-status { font-size: 11px; color: var(--text-secondary, #888); margin-left: auto; }

/* 表格化的镜头列表 */
.brief-shots-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.brief-shots-table th, .brief-shots-table td {
    text-align: left; padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    vertical-align: top; font-size: 12px; line-height: 1.6;
}
.brief-shots-table th { color: var(--text-tertiary, #888); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.brief-shots-table tr:first-child td:first-child { font-weight: 700; color: var(--text-tertiary, #888); }
.brief-shot-desc { color: var(--text-primary, #ddd); }
.brief-shot-desc.thickened {
    background: rgba(232,196,110,.05);
    border-left: 3px solid #e8c46e;
    padding: 6px 8px;
    margin: -2px 0;
    border-radius: 0 6px 6px 0;
    color: #d9c08a;
    line-height: 1.7;
}

/* ============================================================
   B 方案：对话式加厚弹窗（每个分镜一个「展开描述」对话）
   ============================================================ */
.brief-shot-actions { margin-top: 6px; }
.brief-shot-expand {
    border: none; border-radius: 6px; padding: 4px 10px;
    font-size: 11px; cursor: pointer;
    background: rgba(232,196,110,.12); color: #e8c46e;
    transition: opacity .15s;
}
.brief-shot-expand:hover { opacity: .85; }

.thicken-chat-overlay {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.thicken-chat-card {
    width: min(640px, 94vw);
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--bg-elevated, #22222f);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
    overflow: hidden;
}
.thicken-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.1));
}
.thicken-chat-head h3 { margin: 0; font-size: 15px; color: var(--text-primary, #eee); }
.thicken-chat-close {
    background: transparent; border: none; color: var(--text-tertiary, #888);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;
}
.thicken-chat-close:hover { color: var(--text-primary, #eee); }
.thicken-chat-original {
    padding: 10px 18px; font-size: 12px; line-height: 1.7;
    color: var(--text-secondary, #bbb);
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.06));
    max-height: 90px; overflow-y: auto;
}
.thicken-chat-original b { color: var(--text-tertiary, #888); }
.thicken-chat-log {
    flex: 1; min-height: 220px; max-height: 420px;
    overflow-y: auto; padding: 14px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.thicken-chat-msg { display: flex; }
.thicken-chat-msg.ai { justify-content: flex-start; }
.thicken-chat-msg.user { justify-content: flex-end; }
.thicken-chat-bubble {
    max-width: 82%;
    padding: 9px 13px; border-radius: 10px;
    font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.thicken-chat-msg.ai .thicken-chat-bubble {
    background: var(--bg-overlay, rgba(255,255,255,.06));
    color: var(--text-primary, #eee);
    border-top-left-radius: 2px;
}
.thicken-chat-msg.user .thicken-chat-bubble {
    background: var(--accent, #E8B84B);
    color: #fff;
    border-top-right-radius: 2px;
}
.thicken-chat-input-row {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 10px 18px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}
.thicken-chat-input {
    flex: 1; resize: none;
    background: var(--bg-overlay, rgba(255,255,255,.05));
    border: 1px solid var(--border-subtle, rgba(255,255,255,.14));
    border-radius: 10px; color: var(--text-primary, #eee);
    font-size: 13px; line-height: 1.6; padding: 9px 12px;
    font-family: inherit; min-height: 38px; max-height: 100px;
}
.thicken-chat-input:focus { outline: none; border-color: var(--accent, #E8B84B); }
.thicken-chat-send {
    border: none; background: var(--accent, #E8B84B); color: #fff;
    border-radius: 10px; padding: 9px 18px; font-size: 13px;
    cursor: pointer; white-space: nowrap;
}
.thicken-chat-send:disabled { opacity: .5; cursor: not-allowed; }
.thicken-chat-foot {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}
.thicken-chat-apply {
    border: none; border-radius: 10px; padding: 9px 20px;
    font-size: 13px; cursor: pointer; font-weight: 600;
    background: rgba(88,166,255,.2); color: #58a6ff;
}
.thicken-chat-apply:hover { opacity: .85; }
.thicken-chat-tip { font-size: 11px; color: var(--text-tertiary, #777); flex: 1; }

/* ============================================================
   对话流里的「素材引用」消息卡（拖入/@引用的素材在这里显示）
   ============================================================ */
.agent-msg-assets { padding: 4px 2px; }
.agent-msg-assets-head {
    font-size: 12px; color: var(--text-tertiary, #888);
    margin-bottom: 8px; padding: 0 2px;
    background: none;
    border-left: none;
    border-radius: 0;
}
.agent-msg-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.agent-msg-asset-card {
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: 8px;
    overflow: hidden;
    transition: transform .15s, border-color .15s;
}
.agent-msg-asset-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #E8B84B);
}
.agent-msg-asset-card img,
.agent-msg-asset-card video {
    display: block; width: 100%; aspect-ratio: 1 / 1;
    object-fit: cover; background: #000;
}
.agent-msg-asset-card.is-video video { aspect-ratio: 16/9; }
.agent-msg-asset-name {
    display: block;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-secondary, #aaa);
    background: rgba(0,0,0,.4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-msg-asset-fail {
    padding: 20px 8px; text-align: center;
    color: var(--text-tertiary, #888); font-size: 11px;
    background: rgba(0,0,0,.2);
}

/* ============================================================
   输入框上方「素材托盘」（生成界面同款交互：选中/拖入进托盘）
   ============================================================ */
.agent-ref-tray {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.07));
    background: rgba(0,0,0,.08);
    overflow-x: auto;
    min-height: 0;
}
.agent-ref-tray.dragover {
    outline: 2px dashed var(--accent, #E8B84B);
    outline-offset: -4px;
    background: rgba(232, 184, 75,.08);
}
.agent-ref-tray-title {
    font-size: 11px; color: var(--text-tertiary, #888);
    white-space: nowrap; flex-shrink: 0;
}
.agent-ref-tray-list {
    display: flex; gap: 8px; flex: 1; overflow-x: auto;
    align-items: center;
}
.agent-ref-tray-item {
    position: relative; flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
    cursor: pointer; transition: transform .15s, border-color .15s;
}
.agent-ref-tray-item:hover { transform: translateY(-2px); border-color: var(--accent, #E8B84B); }
.agent-ref-tray-item img,
.agent-ref-tray-item video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.agent-ref-tray-item.is-video video { object-fit: contain; }
.agent-ref-tray-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2px 4px; font-size: 9px;
    color: #fff; background: rgba(0,0,0,.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center;
}
.agent-ref-tray-remove {
    position: absolute; top: 2px; right: 2px;
    width: 16px; height: 16px; line-height: 14px; text-align: center;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff; font-size: 11px;
    cursor: pointer; opacity: 0; transition: opacity .15s;
    padding: 0;
}
.agent-ref-tray-item:hover .agent-ref-tray-remove { opacity: 1; }
.agent-ref-tray-add {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border: 1px dashed var(--border-subtle, rgba(255,255,255,.2));
    border-radius: 8px;
    background: transparent; color: var(--text-tertiary, #888);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s;
}
.agent-ref-tray-add:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); }
/* 托盘 "+" 弹出菜单 */
.agent-tray-menu-overlay {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
}
.agent-tray-menu {
    width: min(300px, 90vw);
    background: var(--bg-elevated, #22222f);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.agent-tray-menu-title { font-size: 13px; color: var(--text-secondary, #9aa); margin-bottom: 4px; }
.agent-tray-menu-item {
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    background: var(--bg-overlay, rgba(255,255,255,.04));
    color: var(--text-primary, #eee);
    border-radius: 8px; padding: 10px 14px;
    font-size: 13px; cursor: pointer; text-align: left;
    transition: background .15s;
}
.agent-tray-menu-item:hover { background: rgba(232, 184, 75,.12); }

/* ============================================================
   输入框最左侧「素材小方块」（+ 即托盘：上传/管理二合一）
   ============================================================ */
.agent-freechat-bar { position: relative; }
.agent-tray-fab {
    /* 输入框内部左侧内嵌列：top+bottom 同时设置 → 高度自动跟随输入框，占 2 行左右、不超出 */
    position: absolute;
    left: 12px; top: 12px; bottom: 12px;
    width: 62px;
    border: 1px dashed var(--border-subtle, rgba(255,255,255,.22));
    border-radius: 10px;
    background: var(--bg-overlay, rgba(255,255,255,.04));
    color: var(--text-tertiary, #888);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: border-color .15s, color .15s, background .15s;
}
.agent-tray-fab:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); background: rgba(232, 184, 75,.08); }
.agent-tray-fab.dragover {
    outline: 2px dashed var(--accent, #E8B84B);
    outline-offset: -3px;
    background: rgba(232, 184, 75,.12);
}
.agent-tray-fab-stack {
    /* 扇子式堆叠：每张卡绝对定位居中，rotate 展开成扇形 */
    position: relative;
    width: 100%; height: 100%;
}
.agent-tray-fab-thumb {
    position: absolute;
    left: 50%; top: 50%;
    width: 40px; height: 54px;   /* 扑克牌竖版比例 */
    margin-left: -20px; margin-top: -27px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
    /* 折叠态：全部叠在方块中心（rotate 0），hover 时按 --deg 扇形展开 */
    transform: rotate(0deg) translateY(0);
    transition: transform .28s ease;
}
.agent-tray-fab-thumb img,
.agent-tray-fab-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-tray-fab-thumb.is-video video { object-fit: contain; }
/* 鼠标悬停方块 → 扇子展开（每张沿自身角度 translateY 散开，卡片自身旋转成扇形） */
.agent-tray-fab:hover .agent-tray-fab-thumb,
.agent-tray-fab.fan-open .agent-tray-fab-thumb {
    transform: rotate(var(--deg, 0deg)) translateY(-74px);
}
/* 每张素材卡右上角 X：直接删除（hover 方块或卡片时显示） */
.agent-tray-fab-x {
    position: absolute; top: 2px; right: 2px;
    width: 15px; height: 15px; line-height: 13px;
    text-align: center; border: none; border-radius: 50%;
    background: rgba(0,0,0,.72); color: #fff; font-size: 11px;
    cursor: pointer; padding: 0;
    opacity: 0; transition: opacity .15s;
    z-index: 3;
}
.agent-tray-fab-x:hover { background: rgba(255,80,80,.85); }
.agent-tray-fab:hover .agent-tray-fab-x,
.agent-tray-fab-thumb:hover .agent-tray-fab-x { opacity: 1; }
.agent-tray-fab-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 16px; height: 16px; line-height: 16px;
    padding: 0 4px; text-align: center;
    border-radius: 10px;
    background: var(--accent, #E8B84B); color: #fff;
    font-size: 10px; font-weight: 700;
    z-index: 5;
}
/* 有素材时弹窗：托盘面板 */
.agent-tray-panel-overlay {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.agent-tray-panel {
    width: min(520px, 94vw);
    max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--bg-elevated, #22222f);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
    overflow: hidden;
}
.agent-tray-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.1));
}
.agent-tray-panel-head b { font-size: 14px; color: var(--text-primary, #eee); }
.agent-tray-panel-close {
    background: transparent; border: none; color: var(--text-tertiary, #888);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;
}
.agent-tray-panel-close:hover { color: var(--text-primary, #eee); }
.agent-tray-panel-grid {
    flex: 1; overflow-y: auto; padding: 14px 18px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.agent-tray-panel-item {
    background: var(--bg-overlay, rgba(255,255,255,.04));
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: 10px; overflow: hidden;
}
.agent-tray-panel-thumb img,
.agent-tray-panel-thumb video {
    display: block; width: 100%; aspect-ratio: 1 / 1;
    object-fit: cover; background: #000;
}
.agent-tray-panel-item.is-video .agent-tray-panel-thumb video { aspect-ratio: 16/9; object-fit: contain; }
.agent-tray-panel-name {
    display: block; padding: 4px 8px;
    font-size: 11px; color: var(--text-secondary, #aaa);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-tray-panel-remove {
    display: block; width: 100%;
    border: none; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    background: rgba(255,80,80,.08); color: #ff8080;
    padding: 6px; font-size: 11px; cursor: pointer;
}
.agent-tray-panel-remove:hover { background: rgba(255,80,80,.18); }
.agent-tray-panel-foot {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}
.agent-tray-panel-add {
    border: 1px dashed var(--border-subtle, rgba(255,255,255,.25));
    background: transparent; color: var(--text-secondary, #9aa);
    border-radius: 8px; padding: 7px 16px; font-size: 12px; cursor: pointer;
}
.agent-tray-panel-add:hover { border-color: var(--accent, #E8B84B); color: var(--accent, #E8B84B); }
.agent-tray-panel-tip { font-size: 11px; color: var(--text-tertiary, #777); flex: 1; }

/* 优先级补丁：覆盖 .agent-textarea-agent-textarea-compact，把文字推到方块右侧 */
.agent-freechat-bar textarea.agent-textarea,
.agent-freechat-bar textarea.agent-textarea-compact {
    padding: 9px 52px 9px 88px !important;
    min-height: 80px !important;
}

/* 消息卡（带素材）走中性样式：去掉 user 紫色气泡背景，纯裸素材展示 */
.agent-message.is-assets .agent-bubble {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}
.agent-msg-assets-grid { gap: 6px; }
.agent-msg-asset-card {
    position: relative;
    background: none;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    transition: transform .15s;
}
.agent-msg-asset-card:hover { transform: translateY(-1px); }
.agent-msg-asset-card img,
.agent-msg-asset-card video {
    display: block; width: 100%; height: auto;
    max-height: 200px;               /* 高度上限，防止超长素材占满 */
    aspect-ratio: auto;              /* 不强制比例 */
    object-fit: contain;             /* 保持原比例完整显示，不裁切 */
    background: transparent;
    margin: 0 auto;
}
.agent-msg-asset-card.is-video video { aspect-ratio: auto; max-height: 160px; }
.agent-msg-asset-name {
    display: block;
    padding: 2px 2px 0;
    font-size: 10px;
    color: var(--text-tertiary, #888);
    background: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   优先级补丁（放在末尾保证覆盖）：
   - 输入框 padding 推走文字避免被方块挡（覆盖 .agent-textarea-compact）
   - 素材消息气泡去掉 user 紫色背景
   ============================================================ */
.agent-freechat-bar textarea.agent-textarea,
.agent-freechat-bar textarea.agent-textarea-compact {
    padding: 9px 52px 9px 88px !important;
    min-height: 80px !important;
    position: relative !important;
}
.agent-message.is-assets .agent-bubble {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   @ 引用素材浮层（输入框输入 @ 弹出）
   ============================================================ */
.agent-mention-pop {
    position: fixed; z-index: 1450;
    width: 280px; max-height: 300px;
    display: flex; flex-direction: column;
    background: var(--bg-elevated, #22222f);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.14));
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    overflow: hidden;
}
.agent-mention-head {
    padding: 9px 12px; font-size: 12px;
    color: var(--text-tertiary, #888);
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    background: rgba(232, 184, 75,.08);
}
.agent-mention-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.agent-mention-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; cursor: pointer;
    transition: background .12s;
}
.agent-mention-item:hover { background: rgba(232, 184, 75,.12); }
.agent-mention-thumb {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden; background: #000;
}
.agent-mention-thumb img,
.agent-mention-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-mention-thumb.is-video video { object-fit: contain; }
.agent-mention-name {
    font-size: 12px; color: var(--text-primary, #eee);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-mention-empty {
    padding: 18px 14px; text-align: center;
    font-size: 12px; color: var(--text-tertiary, #888); line-height: 1.7;
}
.agent-mention-foot {
    padding: 8px 12px; font-size: 11px;
    color: var(--text-tertiary, #888);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}
.agent-mention-asset-link { color: var(--accent, #E8B84B); cursor: pointer; }
.agent-mention-asset-link:hover { text-decoration: underline; }

/* ============================================================
   右抽屉资产库「确认条」：点选素材后出现，确认批量加入托盘
   ============================================================ */
.asset-confirm-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    background: var(--bg-elevated, #22222f);
    position: sticky; bottom: 0;
}
.asset-confirm-count { font-size: 12px; color: var(--text-secondary, #9aa); flex: 1; }
.asset-confirm-count b { color: var(--accent, #E8B84B); font-size: 14px; }
.asset-confirm-btn {
    border: none; border-radius: 8px; padding: 7px 16px;
    font-size: 12px; cursor: pointer;
    background: var(--accent, #E8B84B); color: #fff;
    transition: opacity .15s;
}
.asset-confirm-btn:hover { opacity: .85; }
.asset-clear-btn {
    border: 1px solid var(--border-subtle, rgba(255,255,255,.2));
    background: transparent; color: var(--text-tertiary, #888);
    border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer;
}
.asset-clear-btn:hover { color: var(--text-primary, #eee); border-color: var(--accent, #E8B84B); }

/* 全局取消成功类绿色 toast（保留 error/warning/info） */
.toast.success { display: none !important; }

/* 全局取消所有 toast 提示（success/error/warning/info 全隐藏） */
.toast { display: none !important; }

/* ============================================================
   灵感页 Hero V2 —— 取景框 + 云海（2026-08-30 UI 改版）
   设计语言：影视暗房 · 细线云朵符号 · 测光刻度 · 动态为主
   ============================================================ */
.insp-hero-v2 {
    position: relative; overflow: hidden;
    height: calc(100vh - 52px);
    min-height: 600px;
    margin: 0 18px 14px 18px;
    padding: 20px 22px 24px;
    border-radius: 14px;
    /* 影院黑场：银幕方向微暖、四周压暗，制造空间纵深 */
    background:
        radial-gradient(ellipse 72% 46% at 50% 38%, rgba(38,30,18,.20), transparent 62%),
        radial-gradient(ellipse 130% 100% at 50% 50%, transparent 38%, rgba(0,0,0,.52) 96%),
        #08080b;
    border: 0.5px solid rgba(255,255,255,.07);
    text-align: left;
    display: flex; flex-direction: column;
}
/* 三分法参考线（极淡，暗示构图） */
.insp-gridlines { position: absolute; inset: 0; opacity: .35; pointer-events: none; }
.insp-gridlines::before,
.insp-gridlines::after {
    content: ''; position: absolute; background: rgba(255,255,255,.07);
}
.insp-gridlines::before { left: 0; right: 0; top: 33.33%; height: 1px; box-shadow: 0 220px 0 rgba(255,255,255,.07); }
.insp-gridlines::after  { top: 0; bottom: 0; left: 33.33%; width: 1px; box-shadow: 220px 0 0 rgba(255,255,255,.07); }
/* 细线云朵符号（品牌水印） */
.insp-cloud-mark {
    position: absolute; left: 22px; top: 20px;
    color: var(--accent); opacity: .9; z-index: 2;
}
/* 设备参数 HUD */
.insp-hud {
    position: absolute; right: 22px; top: 18px;
    font-size: 11px; font-family: var(--font-mono);
    color: rgba(232,184,75,.85); letter-spacing: .08em; z-index: 2;
}
.insp-hud-rec {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #E8B84B; margin-right: 6px; vertical-align: middle;
    animation: inspRec 2.2s ease-in-out infinite;
}
@keyframes inspRec { 0%,70% { opacity: 1; } 75%,100% { opacity: .15; } }
/* 胶片滚动播放器（v8：影院银幕 · 三层画框，2026-08-30） */
.insp-film-reel {
    position: relative; flex: 1 1 auto; min-height: 0;
    margin: 24px 0 0;
    overflow: hidden; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.85);
    background: #0a0a0d;
    display: flex; align-items: center;
    /* 三层画框：金-黑-金 + 银幕投影 + 内阴影（电影海报装裱感） */
    box-shadow:
        0 0 0 1px rgba(232,184,75,.60),    /* 内层金细线 */
        0 0 0 5px rgba(0,0,0,.7),           /* 中层黑宽线 */
        0 0 0 6px rgba(232,184,75,.25),     /* 外层金细线 */
        0 30px 80px rgba(0,0,0,.85),         /* 银幕投影（向后） */
        0 0 120px rgba(232,184,75,.06),      /* 金色环境光晕 */
        inset 0 0 80px rgba(0,0,0,.55);      /* 银幕内暗角 */
}
.insp-film-track {
    display: flex; gap: 12px; padding: 12px;
    width: max-content;
    animation: inspFilmReel 38s linear infinite;
    will-change: transform;
}
.insp-film-reel:hover .insp-film-track,
.insp-film-reel:focus-within .insp-film-track { animation-play-state: paused; }
.insp-film-frame {
    position: relative; flex: 0 0 350px; height: 197px;
    border-radius: 5px; overflow: hidden;
    border: 0.5px solid rgba(255,255,255,.16);
    background: #0c0c14;
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 0 34px rgba(0,0,0,.35);
}
.insp-film-frame img, .insp-film-frame video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 胶片齿孔边：帧上下边缘各一排方孔（sprocket holes） */
.insp-film-frame::before,
.insp-film-frame::after {
    content: ''; position: absolute; left: 0; right: 0; height: 10px;
    background-color: rgba(232,184,75,.07);
    background-image: repeating-linear-gradient(90deg,
        rgba(0,0,0,.92) 0px, rgba(0,0,0,.92) 5px,
        rgba(232,184,75,.12) 5px, rgba(232,184,75,.12) 14px);
    z-index: 2; pointer-events: none;
}
.insp-film-frame::before { top: 0; }
.insp-film-frame::after { bottom: 0; }
/* 帧内场记小字（TAKE 编号 + 参数，胶片边孔感） */
.insp-film-take {
    position: absolute; left: 7px; bottom: 16px; z-index: 2;
    font-size: 9px; font-family: var(--font-mono);
    color: rgba(255,255,255,.6); letter-spacing: .08em;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 96%;
}
@keyframes inspFilmReel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 云海占位帧内复用云片 */
.insp-film-frame .insp-cloud-sky { position: absolute; inset: 0; overflow: hidden; background: #101014; }
.insp-film-frame .insp-cloud { position: absolute; height: 26px; border-radius: 60px; filter: blur(6px); animation: inspDrift 11s ease-in-out infinite; }
.insp-film-frame .insp-cloud:nth-child(2) { animation-duration: 14s; animation-direction: reverse; }
.insp-film-frame .insp-cloud:nth-child(3) { animation-duration: 9s; }
@keyframes inspDrift { 0%,100% { transform: translateX(-12px); } 50% { transform: translateX(12px); } }
/* 测光刻度（v5 移除：齿孔条本身就是测光/刻度语言，避免与字幕区重叠） */
/* 文案区（银幕下方 · 电影片头字幕，与胶片框拉开距离） */
.insp-hero-copy {
    position: static; text-align: center; z-index: 2;
    margin-top: 32px;
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.insp-hero-copy-rule {
    width: 150px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,75,.5), transparent);
}
.insp-hero-slogan {
    font-size: 18px; font-weight: 500; color: #F2EFE6; letter-spacing: .04em;
    line-height: 1.4;
}
.insp-hero-sub {
    font-size: 11px; color: rgba(255,255,255,.38); margin-top: 6px;
    letter-spacing: .12em;
}
.insp-hero-cta {
    margin-top: 2px; display: inline-block;
    font-size: 12px; letter-spacing: .08em;
    background: transparent; color: var(--accent);
    border: 0.5px solid rgba(232,184,75,.55); border-radius: 4px;
    padding: 7px 22px; cursor: pointer; transition: background .2s;
}
.insp-hero-cta:hover { background: rgba(232,184,75,.12); }
/* 响应式：窄屏收起参考线与 HUD，取景框撑满 */
@media (max-width: 720px) {
    .insp-hero-v2 { min-height: 0; }
    .insp-film-reel { margin-top: 50px; }
    .insp-hero-copy { position: static; text-align: center; margin-top: 16px; }
}

/* ============================================================
   灵感页 Hero V2.1 —— 80 年代胶卷放映元素（2026-08-30）
   ============================================================ */
/* 放映光束：从右上放映机射向银幕的锥形光（影院空间感） */
.insp-beam {
    position: absolute; right: -40px; top: -60px; z-index: 1;
    width: 560px; height: 380px;
    background: conic-gradient(from 208deg at 100% 0%, rgba(232,184,75,.17), rgba(232,184,75,.05) 24deg, transparent 44deg);
    filter: blur(9px);
    transform-origin: right top;
    pointer-events: none;
    animation: inspBeam 7s ease-in-out infinite;
}
@keyframes inspBeam { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
/* 地板反光：银幕下方暖金光晕（影院地面反射） */
.insp-hero-v2::after {
    content: ''; position: absolute; left: 16%; right: 16%; bottom: 92px; height: 84px;
    background: radial-gradient(ellipse at 50% 100%, rgba(232,184,75,.13), transparent 68%);
    filter: blur(16px); pointer-events: none; z-index: 0;
}
/* 胶片齿孔条：上下两条，齿孔缓慢走片（唯一行进动态） */
.insp-filmstrip {
    position: absolute; left: 22px; right: 22px; height: 15px;
    background: rgba(255,255,255,.035);
    border: 0.5px solid rgba(255,255,255,.09);
    overflow: hidden; z-index: 1;
}
.insp-filmstrip-top { top: 44px; }
.insp-filmstrip::before {
    content: ''; position: absolute; top: 3px; bottom: 3px; left: 0;
    width: 7px; border-radius: 2px;
    background: rgba(232,184,75,.55);
    box-shadow: 25px 0 0 rgba(232,184,75,.55), 50px 0 0 rgba(232,184,75,.55),
                75px 0 0 rgba(232,184,75,.55), 100px 0 0 rgba(232,184,75,.55),
                125px 0 0 rgba(232,184,75,.55), 150px 0 0 rgba(232,184,75,.55),
                175px 0 0 rgba(232,184,75,.55), 200px 0 0 rgba(232,184,75,.55),
                225px 0 0 rgba(232,184,75,.55), 250px 0 0 rgba(232,184,75,.55),
                275px 0 0 rgba(232,184,75,.55), 300px 0 0 rgba(232,184,75,.55),
                325px 0 0 rgba(232,184,75,.55), 350px 0 0 rgba(232,184,75,.55),
                375px 0 0 rgba(232,184,75,.55), 400px 0 0 rgba(232,184,75,.55),
                425px 0 0 rgba(232,184,75,.55), 450px 0 0 rgba(232,184,75,.55),
                475px 0 0 rgba(232,184,75,.55), 500px 0 0 rgba(232,184,75,.55),
                525px 0 0 rgba(232,184,75,.55), 550px 0 0 rgba(232,184,75,.55);
    animation: inspFilmRun 14s linear infinite;
}
@keyframes inspFilmRun { from { transform: translateX(0); } to { transform: translateX(-25px); } }
.insp-film-nums {
    position: absolute; left: 0; top: 0; bottom: 0;
    display: flex; align-items: center; gap: 0;
    font-size: 9px; font-family: var(--font-mono);
    color: rgba(232,184,75,.30); letter-spacing: .14em;
    white-space: nowrap;
    animation: inspFilmNums 28s linear infinite;
}
@keyframes inspFilmNums { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 测光点静态化（v5 已移除 meter 元素，保留无害） */
@media (max-width: 720px) {
    .insp-film-frame { flex: 0 0 250px; height: 141px; }
    .insp-hero-copy { margin-top: 20px; }
    .insp-hero-slogan { font-size: 19px; letter-spacing: .08em; }
    .insp-hero-copy-rule { width: 110px; }
}

/* ================================================================
   【第一批】生成页 + Agent 页 · 影视暗房品牌化增强（2026-08-30）
   作用域限定 #page-generate / #page-agent，不影响其他页面
   ================================================================ */

/* ---- 生成页：面板标题 衬线化 + 金色左刻度线 + 顶部测光分隔 ---- */
#page-generate .panel-header {
    position: relative;
    padding-left: 16px;
    border-bottom-color: rgba(232,184,75,0.14);
}
#page-generate .panel-header::before {
    content: "";
    position: absolute; left: 0; top: 2px; bottom: 12px;
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, #E8B84B, rgba(232,184,75,0.10));
}
#page-generate .panel-header h2 {
    font-family: var(--font-serif);
    font-size: 20px; font-weight: 600;
    letter-spacing: 0.03em;
    color: #f5efe0;
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
}
#page-generate .panel-header h2::after {
    content: "";
    width: 34px; height: 1px;
    background: linear-gradient(90deg, rgba(232,184,75,0.55), transparent);
    margin-top: 4px;
}
#page-generate .panel-header p { padding-left: 2px; }

/* ---- 生成页：参数栏 暗房测光卡 ---- */
#page-generate .param-sidebar {
    position: relative;
    border-color: rgba(232,184,75,0.12);
    background: linear-gradient(180deg, rgba(232,184,75,0.035), transparent 42%), var(--bg-surface);
    padding-top: 20px;
}
#page-generate .param-sidebar::before {
    content: "";
    position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,75,0.45), transparent);
}
#page-generate .param-block {
    position: relative;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}
#page-generate .param-block:last-child { border-bottom: none; padding-bottom: 2px; }
#page-generate .param-block .param-label {
    display: flex; align-items: center; gap: 6px;
    color: #d8b96a; letter-spacing: 0.08em;
}
#page-generate .param-block .param-label::before {
    content: "";
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); opacity: 0.75;
    flex-shrink: 0;
}
#page-generate .param-block select.model-dropdown:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(232,184,75,0.14);
}
/* 时长滑块刻度金 */
#page-generate .gen-duration-slider { accent-color: var(--accent); }

/* ---- 生成页：开始生成按钮 金渐变 + 微光 ---- */
#page-generate .action-chip-gen {
    background: linear-gradient(135deg, #E8B84B, #C9A227);
    border-color: #E8B84B;
    box-shadow: 0 2px 10px rgba(232,184,75,0.22);
}
#page-generate .action-chip-gen:hover:not(:disabled) {
    background: linear-gradient(135deg, #F2C14E, #D9A93B);
    border-color: #F2C14E;
    box-shadow: 0 4px 14px rgba(232,184,75,0.32);
}

/* ---- 生成页：活跃面板 左侧金色指示条（导演监视器语言） ---- */
#page-generate .gen-sidebar .gen-panel.active { position: relative; }
#page-generate .gen-sidebar .gen-panel.active::before {
    content: "";
    position: absolute; left: -14px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #E8B84B, rgba(232,184,75,0.08));
    opacity: 0.9;
}

/* ---- 生成页：文生视频管线 金色节拍 ---- */
#page-generate .pipeline-step.active .pipeline-dot {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(232,184,75,0.5);
}
#page-generate .pipeline-step.active .pipeline-label { color: var(--accent); }
#page-generate .pipeline-line { background: rgba(232,184,75,0.18); }

/* ---- 生成页：对话区 空态欢迎 衬线标题 + 金色氛围 ---- */
#page-generate .chat-empty h2 {
    font-family: var(--font-serif);
    letter-spacing: 0.02em;
}
#page-generate .chat-empty-badge {
    border-color: rgba(232,184,75,0.35);
    color: #E8B84B;
    background: rgba(232,184,75,0.08);
}
#page-generate .chat-suggest:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(232,184,75,0.07);
}

/* ================================================================
   Agent 页 · 品牌化（标题衬线 / 步骤条胶片节拍 / 氛围金化）
   ================================================================ */

/* ---- Agent 页：主标题 衬线化 + 金色点缀 ---- */
#page-agent .agent-title-block h1 {
    font-family: var(--font-serif);
    font-size: 22px; font-weight: 600;
    letter-spacing: 0.04em;
    color: #f5efe0;
    position: relative;
    padding-left: 14px;
}
#page-agent .agent-title-block h1::before {
    content: "";
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, #E8B84B, rgba(232,184,75,0.12));
}
#page-agent .agent-page-header {
    background: linear-gradient(180deg, rgba(232,184,75,0.05), transparent 70%), var(--bg-card);
    border-bottom-color: rgba(232,184,75,0.12);
}

/* ---- Agent 页：流程步骤条 → 胶片节拍指示 ---- */
#page-agent .agent-step-indicator {
    gap: 2px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(232,184,75,0.10);
}
#page-agent .agent-steps-label {
    letter-spacing: 0.14em;
    color: #9a8a5c;
    margin-right: 6px;
    font-size: 11px;
}
#page-agent .agent-step-badge {
    position: relative;
    border-radius: 6px;               /* 方孔胶囊 → 胶片节拍方孔 */
    border-color: rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    padding: 4px 12px;
    letter-spacing: 0.04em;
}
#page-agent .agent-step-badge.active {
    background: linear-gradient(135deg, #E8B84B, #C9A227);
    border-color: #E8B84B;
    color: #15120a;
    box-shadow: 0 2px 12px rgba(232,184,75,0.35);
}
#page-agent .agent-step-badge:hover {
    border-color: var(--accent);
    color: #E8B84B;
    background: rgba(232,184,75,0.08);
}
#page-agent .agent-step-badge.completed,
#page-agent .agent-step-badge.completed.no-edit {
    border-color: rgba(232,184,75,0.5);
    color: #E8B84B;
    background: rgba(232,184,75,0.10);
}
#page-agent .agent-step-arrow {
    color: rgba(232,184,75,0.35);
    font-size: 12px;
}

/* ---- Agent 页：会话抽屉 标题衬线 + 金色按钮 ---- */
#page-agent .agent-session-sidebar-head h3 {
    font-family: var(--font-serif);
    font-size: 15px; letter-spacing: 0.06em;
    color: #f5efe0;
    display: flex; align-items: center; gap: 8px;
}
#page-agent .agent-session-sidebar-head h3::before {
    content: "";
    width: 14px; height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, #E8B84B, transparent);
}
#page-agent .agent-session-new-btn {
    background: linear-gradient(135deg, #E8B84B, #C9A227);
    border-color: #E8B84B;
    color: #15120a;
    font-weight: 600;
}
#page-agent .agent-session-new-btn:hover {
    background: linear-gradient(135deg, #F2C14E, #D9A93B);
}

/* ---- Agent 页：欢迎语 衬线 + 示例按钮金化 ---- */
#page-agent .agent-freechat-welcome h3 {
    font-family: var(--font-serif);
    font-size: 19px; font-weight: 600;
    letter-spacing: 0.04em;
    color: #f5efe0;
}
#page-agent .agent-freechat-example {
    border-color: rgba(232,184,75,0.22);
    background: rgba(232,184,75,0.045);
}
#page-agent .agent-freechat-example:hover {
    border-color: var(--accent);
    background: rgba(232,184,75,0.10);
}

/* ---- Agent 页：时长/风格 选择按钮 金色激活 ---- */
#page-agent .agent-dur-btn.active {
    border-color: var(--accent);
    background: rgba(232,184,75,0.12);
    color: #E8B84B;
}

/* ================================================================
   【第一批·方案3】生成页对话流 · 影视暗房语言深化（2026-08-30）
   取景框输入区 + 胶片消息气泡 + 结果卡 REC 时间码
   ================================================================ */

/* ---- 空态修复：图标金紫渐变 → 纯金；badge 金化 ---- */
#page-generate .chat-empty-icon {
    background: linear-gradient(135deg, rgba(232,184,75,.22), rgba(201,162,39,.12));
    border-color: rgba(232,184,75,.16);
}
#page-generate .chat-empty-badge {
    color: #E8B84B;
    background: rgba(232,184,75,.08);
    border-color: rgba(232,184,75,.35);
}

/* ---- 消息气泡：胶片齿孔 + 暗房质感 ---- */
/* 用户气泡：纯金渐变（修复金紫渐变） */
#page-generate .msg-user .bubble {
    background: linear-gradient(135deg, rgba(232,184,75,.20), rgba(201,162,39,.12));
    border-color: rgba(232,184,75,.34);
}
/* AI 气泡：顶部胶片齿孔条 + 金色细边 */
#page-generate .msg-ai .bubble {
    position: relative;
    background: linear-gradient(180deg, rgba(232,184,75,.05), transparent 30%), var(--bg-elevated);
    border-color: rgba(232,184,75,.14);
    border-radius: 14px 14px 14px 6px;
    overflow: hidden;
}
#page-generate .msg-ai .bubble::before {
    content: "";
    position: absolute; top: 0; left: 14px; right: 14px; height: 5px;
    background: repeating-linear-gradient(90deg,
        transparent 0 8px,
        rgba(232,184,75,.32) 8px 10px,
        transparent 10px 20px);
    opacity: .6; pointer-events: none;
}
/* 用户气泡：右缘金色细线（对话方向感） */
#page-generate .msg-user .bubble {
    position: relative;
    background: linear-gradient(135deg, rgba(232,184,75,.20), rgba(201,162,39,.12));
    border-color: rgba(232,184,75,.34);
}

/* ---- 结果卡：胶片顶条 + REC 时间码 ---- */
#page-generate .msg-result {
    position: relative;
    border-color: rgba(232,184,75,.16);
    background: linear-gradient(180deg, rgba(232,184,75,.04), transparent 24%), var(--bg-elevated);
}
#page-generate .msg-result::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2;
    background: repeating-linear-gradient(90deg,
        transparent 0 9px,
        rgba(232,184,75,.34) 9px 11px,
        transparent 11px 22px);
    opacity: .55; pointer-events: none;
}
#page-generate .msg-result .meta {
    border-top: 1px solid rgba(232,184,75,.10);
    font-family: var(--font-mono);
    letter-spacing: .05em;
}
#page-generate .msg-result .meta::before {
    content: "REC";
    color: #E8B84B; font-size: 10px; font-weight: 600;
    letter-spacing: .16em; margin-right: auto;
    display: inline-flex; align-items: center; gap: 4px;
}
#page-generate .msg-result .meta::before::marker { content: ""; }
#page-generate .msg-result .meta .rc-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #E8B84B; box-shadow: 0 0 6px rgba(232,184,75,.7);
    display: inline-block; margin-right: 4px;
}

/* ---- 进度条：百分比金色（去 fallback 紫） ---- */
#page-generate .msg-progress .ptitle .pct { color: #E8B84B; }

/* ---- 输入卡：取景框化（左上/右下 L 角标 + 内描边 + 聚焦金辉） ---- */
#page-generate .chat-input-card {
    position: relative;
    border-color: rgba(232,184,75,.16);
    background: linear-gradient(180deg, rgba(232,184,75,.04), transparent 26%), var(--bg-elevated);
    border-radius: 18px;
}
/* 内描边（取景框感） */
#page-generate .chat-input-card {
    outline: 1px solid rgba(232,184,75,.10);
    outline-offset: 4px;
}
/* 左上角 L 角标 */
#page-generate .chat-input-card::before {
    content: "";
    position: absolute; top: -1px; left: -1px;
    width: 15px; height: 15px;
    border-top: 2px solid rgba(232,184,75,.55);
    border-left: 2px solid rgba(232,184,75,.55);
    border-top-left-radius: 18px;
    pointer-events: none; transition: border-color .2s;
}
/* 右下角 L 角标 */
#page-generate .chat-input-card::after {
    content: "";
    position: absolute; bottom: -1px; right: -1px;
    width: 15px; height: 15px;
    border-bottom: 2px solid rgba(232,184,75,.55);
    border-right: 2px solid rgba(232,184,75,.55);
    border-bottom-right-radius: 18px;
    pointer-events: none; transition: border-color .2s;
}
/* 聚焦时角标提亮 */
#page-generate .chat-input-bar:focus-within .chat-input-card::before,
#page-generate .chat-input-bar:focus-within .chat-input-card::after {
    border-color: #F2C14E;
}
#page-generate .chat-input-bar:focus-within .chat-input-card {
    border-color: rgba(232,184,75,.30);
}

/* ---- 附件/参数 chips：hover 金化 ---- */
#page-generate .chat-attach-btn:hover {
    background: rgba(232,184,75,.08);
    color: #E8B84B;
    border-color: rgba(232,184,75,.35);
}
#page-generate .chat-param-trigger:hover {
    background: rgba(232,184,75,.06);
    color: var(--text-primary);
    border-color: rgba(232,184,75,.30);
}
/* 参数弹层选项 hover 金 */
#page-generate .chat-param-menu .chat-param-opt:hover {
    background: rgba(232,184,75,.08);
    color: #E8B84B;
}

/* ---- @ 引用缩略图：label 金色（去 fallback 紫） ---- */
#page-generate .chat-prompt-thumb .chat-prompt-thumb-label { color: #E8B84B; }

/* ================================================================
   【第一批·v2精修】生成页对话流 · 字体/排布/风格（2026-08-30）
   字体加大 · 排布贴侧 · 头像（取景框小方框）· 胶片齿孔加粗
   ================================================================ */

/* ---- 字体层级强化 ---- */
#page-generate .msg-ai .bubble {
    font-size: 15px; line-height: 1.72;
}
#page-generate .msg-ai .bubble b,
#page-generate .msg-ai .bubble strong {
    color: #f5efe0; font-weight: 600; letter-spacing: 0.01em;
}
#page-generate .msg-user .bubble { font-size: 14.5px; line-height: 1.62; }
#page-generate .chat-prompt { font-size: 15px; line-height: 1.6; }
#page-generate .chat-empty h2 { font-size: 28px; letter-spacing: 0.02em; }
#page-generate .chat-empty p { font-size: 14.5px; line-height: 1.85; }
#page-generate .msg-result .meta::before { font-size: 11px; }  /* REC 稍大 */
#page-generate .msg-result .meta { font-size: 12.5px; }
#page-generate .msg-progress .ptitle { font-size: 14.5px; }
#page-generate .msg-progress .pct { font-size: 16px; font-weight: 700; }

/* ---- 排布：消息铺满贴左右两侧（不再居中固定宽） ---- */
#page-generate .msg {
    max-width: 100%; padding: 0 32px; gap: 12px;
    margin-bottom: 18px; align-items: flex-end;
}
#page-generate .msg-ai { justify-content: flex-start; }
#page-generate .msg-user { justify-content: flex-end; }
#page-generate .msg-ai .bubble { max-width: min(74%, 760px); }
#page-generate .msg-user .bubble { max-width: min(64%, 620px); }

/* ---- 风格：AI/用户 头像（取景框小方框 + 等宽字）---- */
#page-generate .msg-ai::before {
    content: "AI"; flex: 0 0 34px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(232,184,75,0.40);
    background: linear-gradient(135deg, rgba(232,184,75,.14), rgba(201,162,39,.06));
    color: #E8B84B; font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; border-radius: 8px;
    font-family: var(--font-mono);
    box-shadow: inset 0 0 0 2px rgba(232,184,75,.08);
}
#page-generate .msg-user::after {
    content: "你"; flex: 0 0 34px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #c8c2b3; font-size: 12px; font-weight: 500;
    border-radius: 8px;
    order: 2;  /* row-reverse 下 ::after 自然在最右 */
}

/* ---- 胶片齿孔条加粗（5px → 6px，更精致）---- */
#page-generate .msg-ai .bubble::before { height: 6px; opacity: 0.7; }
#page-generate .msg-result::before { height: 6px; opacity: 0.6; }

/* ---- 输入卡加宽（760 → 900，参数按钮一行放下不换行）---- */
#page-generate .chat-input-card { max-width: 900px; margin: 0 auto; }

/* ---- 消息间分隔（更清晰的对话节奏）---- */
#page-generate .msg + .msg { margin-top: 4px; }

/* ---- 对齐修复：输入卡与消息流同 padding（左右 32px）---- */
#page-generate .chat-input-bar { padding-left: 32px; padding-right: 32px; }
#page-generate .chat-input-card { margin-left: 0; margin-right: 0; }

/* ================================================================
   首页封面品牌强化（2026-08-30）—— 云朵AI 出品字标 + slogan 价值化
   影视片头"出品方"语言：品牌字标登场
   ================================================================ */

/* ---- 左上角品牌字标（片头出品感）---- */
.insp-brand-mark {
    position: absolute; left: 22px; top: 16px; z-index: 3;
    display: flex; align-items: center; gap: 9px;
    pointer-events: none;
}
.insp-brand-mark .insp-cloud-mark {
    position: static; opacity: 1;
}
.insp-brand-name {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 600; letter-spacing: .12em;
    color: #F2EFE6; line-height: 1;
    display: inline-flex; align-items: baseline;
}
.insp-brand-name .insp-brand-en {
    color: var(--accent); font-size: 12px; letter-spacing: .22em;
    margin-left: 2px; font-family: var(--font-mono);
}
.insp-brand-tag {
    font-size: 9px; letter-spacing: .26em; color: rgba(232,184,75,.65);
    border: 0.5px solid rgba(232,184,75,.28); border-radius: 2px;
    padding: 2px 6px; margin-left: 2px;
    font-family: var(--font-mono); opacity: 0;
    animation: inspBrandTag 0.6s ease-out 1.2s forwards;
}
@keyframes inspBrandTag { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* ---- slogan：电影字幕大字（衬线 + 宽字距）---- */
.insp-hero-slogan {
    font-family: var(--font-serif);
    font-size: 27px; font-weight: 500; letter-spacing: .12em;
    color: #F6F2E8; line-height: 1.45;
    text-shadow: 0 0 24px rgba(232,184,75,.22);
}
.insp-hero-sub {
    font-size: 11.5px; letter-spacing: .16em;
    color: rgba(255,255,255,.46); margin-top: 0;
}

/* ---- 窄屏：品牌字标保持可读，tag 隐藏 ---- */
@media (max-width: 720px) {
    .insp-brand-mark { left: 16px; top: 12px; }
    .insp-brand-tag { display: none; }
    .insp-hero-slogan { font-size: 17px; }
}

/* ================================================================
   【B方案】灵感页：Hero 第一屏全屏 + 下方展厅可滚动（2026-08-30）
   ================================================================ */
/* 灵感页 Hero 第一屏锁高（下方展厅可正常滚动） */
.main-area:has(#page-inspiration.active) { padding-top: 0; padding-bottom: 0; }
.insp-hero-v2 { height: calc(100vh - 52px); min-height: 560px; }
@media (max-width: 720px) {
    .insp-hero-v2 { min-height: 0; }
}

/* ================================================================
   左导航抽屉化（2026-08-30）—— 默认收起，汉堡按钮展开
   ================================================================ */
.nav-drawer-toggle {
    flex: 0 0 auto; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: rgba(255,255,255,.55); cursor: pointer;
    border-radius: 8px; transition: all .2s var(--ease-out);
    margin-right: 4px;
}
.nav-drawer-toggle:hover { color: var(--accent); background: rgba(232,184,75,.08); }
/* 展开时汉堡变 × */
body.nav-open .nav-drawer-toggle svg { transform: rotate(90deg); transition: transform .25s var(--ease-out); }
body.nav-open .nav-drawer-toggle { color: var(--accent); }

/* 遮罩：点击空白关闭抽屉 */
.nav-mask {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
body.nav-open .nav-mask { opacity: 1; visibility: visible; }

/* 灵感页全屏时遮罩同样覆盖（不破坏 hero 锁定） */
body.nav-open:has(#page-inspiration.active) .nav-mask { inset: 52px 0 0 0; }

/* ================================================================
   灵感页 Hero · 概念稿C移植（2026-08-30）—— 影院黑场 + 大片标题 + 放映窗
   ================================================================ */
/* 容器：保持全屏锁定（height calc(100vh-52px)），flex 纵向布局 */
.insp-hero-v2 {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    text-align: center;
}
/* 影院黑场背景：银幕方向微暖 + 颗粒质感 */
.insp-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 62% at 50% 36%, #16130e 0%, #000 78%); }
.insp-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 34% at 50% 42%, rgba(232,184,75,.12), transparent 72%); }
.insp-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
/* 边缘压暗（只暗 hero 边缘 120px，中心区文字清晰） */
.insp-vignette { position: absolute; inset: 0; z-index: 0; box-shadow: inset 0 0 0 120px rgba(0,0,0,.88); pointer-events: none; }

/* 主内容：kicker + 标题 + 副标 + CTA */
.insp-content { position: relative; z-index: 2; padding: 88px 24px 40px; }
.insp-kicker { font-size: 12px; letter-spacing: .5em; color: #E8B84B; margin-bottom: 28px; text-transform: uppercase; position: relative; z-index: 2; }
.insp-title {
    font-size: clamp(48px, 7vw, 92px); font-weight: 500; letter-spacing: .12em; line-height: 1.32; margin: 0;
    font-family: var(--font-serif);
    background: linear-gradient(180deg, #ffffff 12%, #f4eed8 40%, #cfc29a 72%, #a89a6f 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 30px rgba(232,184,75,.18)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.insp-title em {
    font-style: normal;
    font-family: var(--font-serif) !important;
    font-feature-settings: normal;
    background: linear-gradient(100deg, #b8860b, #f5d97a 25%, #fff3c4 42%, #d4a017 58%, #f5d97a 75%, #b8860b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 220% auto; animation: inspGoldflow 5.5s linear infinite;
}
@keyframes inspGoldflow { from { background-position: 0% center; } to { background-position: 220% center; } }

.insp-desc { margin: 16px auto 0; max-width: 480px; font-size: 14px; line-height: 2; color: rgba(255,255,255,.92); letter-spacing: .08em; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6); }
.insp-cta-row { margin-top: 22px; display: flex; gap: 16px; justify-content: center; }
.insp-hero-cta {
    padding: 15px 44px; font-size: 13px; letter-spacing: .18em;
    border: 1.5px solid #E8B84B; background: rgba(15,13,8,.55); color: #E8B84B;
    border-radius: 2px; cursor: pointer; text-decoration: none; transition: all .3s;
    text-shadow: 0 1px 2px rgba(0,0,0,.8); font-family: inherit;
}
.insp-hero-cta:hover { background: #E8B84B; color: #14110a; }
.insp-hero-cta-ghost { border-color: rgba(232,184,75,.55); color: rgba(255,255,255,.85); }
.insp-hero-cta-ghost:hover { border-color: #E8B84B; color: #E8B84B; background: rgba(15,13,8,.7); }

/* 放映窗：多帧胶片横向滚动（hover 暂停）
   修复：从 absolute 脱离文档流改为 relative + margin-top:auto
   让放映窗参与 flex 纵向布局，内容区自动留出空间不再重叠 */
.insp-cinema { position: relative; left: auto; right: auto; bottom: auto; margin-top: auto; padding: 0 24px; z-index: 2; flex-shrink: 0; }
.insp-cinema-frame { position: relative; border: 1px solid rgba(232,184,75,.28); background: #0a0a0c; box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 90px rgba(232,184,75,.05); overflow: hidden; }
.insp-cinema-strip { display: flex; gap: 10px; padding: 10px; width: max-content; animation: inspFilmroll 38s linear infinite; will-change: transform; }
.insp-cinema-frame:hover .insp-cinema-strip { animation-play-state: paused; }
@keyframes inspFilmroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.insp-cinema-cell { flex: 0 0 280px; height: 158px; position: relative; border-right: 1px solid rgba(255,255,255,.06); overflow: hidden; background: #050505; border-radius: 3px; }
/* 视频铺满窗口（object-fit:cover 裁剪适配，不放大局部） */
.insp-cinema-cell video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 0; }
.insp-cinema-cell:last-child { border-right: none; }
/* 帧内：天空层（3 色调 × 2 双份循环） */
.insp-cell-sky { position: absolute; inset: 0; will-change: transform; }
.insp-cinema-strip .insp-cinema-cell:nth-child(1) .insp-cell-sky, .insp-cinema-strip .insp-cinema-cell:nth-child(4) .insp-cell-sky { background: linear-gradient(180deg,#1c1408 0%,#080604 100%); }
.insp-cinema-strip .insp-cinema-cell:nth-child(2) .insp-cell-sky, .insp-cinema-strip .insp-cinema-cell:nth-child(5) .insp-cell-sky { background: linear-gradient(180deg,#0e1018 0%,#060608 100%); }
.insp-cinema-strip .insp-cinema-cell:nth-child(3) .insp-cell-sky, .insp-cinema-strip .insp-cinema-cell:nth-child(6) .insp-cell-sky { background: linear-gradient(180deg,#181010 0%,#080608 100%); }
.insp-cell-cloud { position: absolute; height: 14px; border-radius: 30px; filter: blur(4px); will-change: transform; }
.insp-cell-c1 { top: 28%; left: 8%; width: 58%; background: rgba(255,255,255,.09); animation: inspCcdrift 9s ease-in-out infinite; }
.insp-cell-c2 { top: 52%; right: 6%; width: 50%; background: rgba(232,184,75,.12); animation: inspCcdrift 12s ease-in-out infinite reverse; }
.insp-cell-c3 { top: 70%; left: 30%; width: 44%; background: rgba(255,255,255,.06); animation: inspCcdrift 8s ease-in-out infinite; }
@keyframes inspCcdrift { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
.insp-cell-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(232,184,75,.10), transparent 70%); }
.insp-cell-scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); animation: inspCcscan 5s linear infinite; pointer-events: none; }
@keyframes inspCcscan { from { background-position: 0 0; } to { background-position: 0 6px; } }
.insp-cell-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%); }
.insp-cell-corners { position: absolute; inset: 0; }
.insp-cell-corners i { position: absolute; width: 8px; height: 8px; border-color: rgba(232,184,75,.55); border-style: solid; }
.insp-cell-corners i:nth-child(1) { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.insp-cell-corners i:nth-child(2) { top: 7px; right: 7px; border-width: 1px 1px 0 0; }
.insp-cell-corners i:nth-child(3) { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; }
.insp-cell-corners i:nth-child(4) { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }
.insp-cell-rail { position: absolute; left: 0; right: 0; height: 6px; background-color: rgba(232,184,75,.08); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.92) 0 4px, rgba(232,184,75,.12) 4px 11px); z-index: 2; }
.insp-cell-rail-top { top: 0; }
.insp-cell-rail-bot { bottom: 0; }
.insp-cinema-cell .frame-label { position: absolute; bottom: 12px; left: 12px; z-index: 3; font-size: 9px; letter-spacing: .18em; color: rgba(232,184,75,.75); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); }
/* 放映窗底部 REC 条 */
.insp-cinema-meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06); font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.4); font-family: var(--font-mono); }
.insp-cinema-meta .insp-rec { display: flex; align-items: center; gap: 7px; color: rgba(232,184,75,.8); }
.insp-cinema-meta .insp-rec i { width: 6px; height: 6px; border-radius: 50%; background: #E8B84B; display: inline-block; animation: inspCblink 2s infinite; }
@keyframes inspCblink { 0%,70% { opacity: 1; } 75%,100% { opacity: .15; } }

/* 场记条 + 走片齿孔条（hero 内底部）
   修复：从 absolute 改为 relative，参与 flex 流 */
.insp-foot { position: relative; left: auto; right: auto; bottom: auto; z-index: 3; display: flex; justify-content: space-between; padding: 0 5vw; font-size: 10px; letter-spacing: .24em; color: rgba(255,255,255,.28); font-family: var(--font-mono); flex-shrink: 0; }
.insp-film-strip { position: relative; left: auto; right: auto; bottom: auto; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(232,184,75,.4) 16px 20px, transparent 20px 36px); opacity: .55; z-index: 3; flex-shrink: 0; }

/* 响应式：窄屏收缩 */
@media (max-width: 720px) {
    .insp-content { padding: 76px 16px 0; }
    .insp-title { font-size: clamp(34px, 9vw, 46px); letter-spacing: .08em; }
    .insp-desc { font-size: 12.5px; }
    .insp-hero-cta { padding: 12px 30px; font-size: 12px; }
    .insp-cinema { padding: 0 12px; }
    .insp-cinema-cell { flex: 0 0 210px; height: 118px; }
    .insp-foot { font-size: 9px; }
}

/* ================================================================
   电影放映厅 / 展厅 管理按钮（2026-08-30）
   ================================================================ */
/* 放映厅 REC 条右上「＋ 上传视频」（主账户） */
.insp-cinema-admin {
    margin-left: auto;
    font-size: 10.5px; letter-spacing: .08em;
    color: #E8B84B; background: rgba(232,184,75,.08);
    border: 1px solid rgba(232,184,75,.35); border-radius: 4px;
    padding: 3px 10px; cursor: pointer; font-family: inherit;
    transition: all .2s;
}
.insp-cinema-admin:hover { background: #E8B84B; color: #14110a; }

/* 放映窗帧右上删除 ✕（主账户 hover 显示） */
.insp-cell-del {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.85); font-size: 10px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: opacity .2s, background .2s;
}
.insp-cinema-cell:hover .insp-cell-del { opacity: 1; }
.insp-cell-del:hover { background: rgba(232,60,60,.8); border-color: #e84a4a; }
/* 管理员模式下始终显示操作按钮 */
.insp-cinema-strip.admin-mode .insp-cell-del { opacity: .7; }
.insp-cinema-strip.admin-mode .insp-cell-del:hover { opacity: 1; }

/* 放映窗拖拽手柄（管理员） */
.insp-cell-drag {
    position: absolute; top: 8px; left: 8px; z-index: 4;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5);
    color: rgba(255,255,255,.6); font-size: 9px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; opacity: 0; transition: opacity .2s;
}
.insp-cinema-strip.admin-mode .insp-cell-drag { opacity: .7; }
.insp-cinema-strip.admin-mode .insp-cell-drag:hover { opacity: 1; color: #E8B84B; }
.insp-cell-drag:active { cursor: grabbing; }

/* 放映窗拖拽中状态 */
.insp-cinema-cell.dragging { opacity: .4; transform: scale(.96); }
.insp-cinema-cell.drag-over { outline: 2px solid #E8B84B; outline-offset: -2px; }

/* 瀑布流卡片右上删除 ✕（主账户 hover 显示） */
.vs-mdel {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.85); font-size: 10px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: opacity .2s, background .2s;
}
.vs-mcard:hover .vs-mdel { opacity: 1; }
.vs-mdel:hover { background: rgba(232,60,60,.8); border-color: #e84a4a; }