/* ===== 全局变量 ===== */
:root {
  --bg-0: #0A0A0F;
  --bg-1: #111118;
  --bg-2: #1A1A24;
  --bg-3: #252530;
  --border: #3A3A4A;
  --text-0: #F0F0F5;
  --text-1: #D0D0E0;
  --text-2: #A0A0B0;
  --text-3: #6B6B80;
  --text-4: #4A4A5A;
  --accent: #6366F1;
  --accent-light: #818CF8;
  --accent-2: #8B5CF6;
  --accent-pink: #EC4899;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3b82f6;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --glow-primary: rgba(99, 102, 241, 0.4);
  --glow-secondary: rgba(139, 92, 246, 0.3);
  --glow-accent: rgba(236, 72, 153, 0.3);
}

/* ===== 朱砂红渐变主题（默认：黑底 + 朱砂红渐变） ===== */
:root[data-theme="cinnabar-dark"] {
  --bg-0: #0A0A0F;
  --bg-1: #111118;
  --bg-2: #1A1A24;
  --bg-3: #252530;
  --border: #3A3A4A;
  --text-0: #F0F0F5;
  --text-1: #D0D0E0;
  --text-2: #A0A0B0;
  --text-3: #6B6B80;
  --text-4: #4A4A5A;
  --accent: #C25B6A;
  --accent-light: #D78A93;
  --accent-2: #A8435C;
  --accent-pink: #EC4899;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3b82f6;
  --glow-primary: rgba(194, 91, 106, 0.42);
  --glow-secondary: rgba(168, 67, 92, 0.34);
  --glow-accent: rgba(200, 60, 50, 0.26);
}

/* ===== 亮色主题 ===== */
:root[data-theme="light"] {
  --bg-0: #f0f2f8;
  --bg-1: #ffffff;
  --bg-2: #f7f8fc;
  --bg-3: #eef0f6;
  --border: #dfe3ec;
  --text-0: #1a1d2e;
  --text-1: #2d3148;
  --text-2: #565b73;
  --text-3: #7a7f96;
  --text-4: #9da1b5;
  --accent: #5b5bd6;
  --accent-light: #7c7cf0;
  --accent-2: #7c3aed;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  --shadow: 0 4px 24px rgba(30, 35, 70, 0.08);
  --shadow-sm: 0 2px 8px rgba(30, 35, 70, 0.06);
  --glow-primary: rgba(91, 91, 214, 0.15);
  --glow-secondary: rgba(124, 58, 237, 0.12);
  --glow-accent: rgba(236, 72, 153, 0.12);
}

/* ===== 朱砂红渐变主题（A，对齐"紫红渐变"参考） ===== */
:root[data-theme="cinnabar-gradient"] {
  --bg-0: #160C10;
  --bg-1: #1B1115;
  --bg-2: #241920;
  --bg-3: #2E252C;
  --border: #4A3A42;
  --text-0: #F5F0F1;
  --text-1: #D8CED0;
  --text-2: #A89C9F;
  --text-3: #6E6064;
  --text-4: #4A3F43;
  --accent: #C25B6A;
  --accent-light: #D78A93;
  --accent-2: #A8435C;
  --accent-pink: #EC4899;
  --glow-primary: rgba(139, 92, 246, 0.42);
  --glow-secondary: rgba(236, 72, 153, 0.34);
  --glow-accent: rgba(200, 60, 50, 0.26);
}

/* ===== 纯朱砂磨砂主题（B，哑光沉稳） ===== */
:root[data-theme="cinnabar-matte"] {
  --bg-0: #140C0E;
  --bg-1: #1A1013;
  --bg-2: #221820;
  --bg-3: #2C2229;
  --border: #48393F;
  --text-0: #F5F0F1;
  --text-1: #D8CED0;
  --text-2: #A89C9F;
  --text-3: #6E6064;
  --text-4: #4A3F43;
  --accent: #C0392B;
  --accent-light: #D55C4E;
  --accent-2: #9E1C1C;
  --accent-pink: #EC4899;
  --glow-primary: rgba(200, 60, 50, 0.30);
  --glow-secondary: rgba(176, 44, 40, 0.24);
  --glow-accent: rgba(212, 72, 55, 0.28);
}

/* ===== 翡翠绿主题 ===== */
:root[data-theme="emerald"] {
  --bg-0: #0C1412;
  --bg-1: #101A17;
  --bg-2: #16221E;
  --bg-3: #202C26;
  --border: #3A4A42;
  --text-0: #F0F5F2;
  --text-1: #CFD8D2;
  --text-2: #9EABA4;
  --text-3: #66736C;
  --text-4: #404A45;
  --accent: #10B981;
  --accent-light: #34D399;
  --accent-2: #059669;
  --accent-pink: #EC4899;
  --glow-primary: rgba(16, 185, 129, 0.32);
  --glow-secondary: rgba(52, 211, 153, 0.24);
  --glow-accent: rgba(5, 150, 105, 0.22);
}

/* ===== 琥珀金主题 ===== */
:root[data-theme="amber"] {
  --bg-0: #14100A;
  --bg-1: #1A1510;
  --bg-2: #221C16;
  --bg-3: #2C2420;
  --border: #4A433A;
  --text-0: #F5F0EA;
  --text-1: #D8D0C6;
  --text-2: #A89F94;
  --text-3: #6E665C;
  --text-4: #4A433B;
  --accent: #F59E0B;
  --accent-light: #FBBF24;
  --accent-2: #D97706;
  --accent-pink: #EC4899;
  --glow-primary: rgba(245, 158, 11, 0.32);
  --glow-secondary: rgba(251, 191, 36, 0.24);
  --glow-accent: rgba(217, 119, 6, 0.24);
}

/* ===== 冰蓝主题 ===== */
:root[data-theme="ice"] {
  --bg-0: #0A0F16;
  --bg-1: #101620;
  --bg-2: #16202A;
  --bg-3: #202A36;
  --border: #3A4A5A;
  --text-0: #EFF4FA;
  --text-1: #CDD6E0;
  --text-2: #9AA6B4;
  --text-3: #626E7C;
  --text-4: #3D4752;
  --accent: #3b82f6;
  --accent-light: #60A5FA;
  --accent-2: #2563eb;
  --accent-pink: #EC4899;
  --glow-primary: rgba(59, 130, 246, 0.34);
  --glow-secondary: rgba(56, 189, 248, 0.24);
  --glow-accent: rgba(96, 165, 250, 0.26);
}

/* ===== 太阳金主题（朝阳暖黄） ===== */
:root[data-theme="sun"] {
  --bg-0: #171008;
  --bg-1: #201810;
  --bg-2: #2A2016;
  --bg-3: #362A1E;
  --border: #5A4A32;
  --text-0: #FBF7EE;
  --text-1: #E8DFCC;
  --text-2: #B6AA92;
  --text-3: #7C725E;
  --text-4: #544C3C;
  --accent: #F59E0B;
  --accent-light: #FBBF24;
  --accent-2: #D97706;
  --accent-pink: #F97316;
  --glow-primary: rgba(251, 191, 36, 0.40);
  --glow-secondary: rgba(245, 158, 11, 0.32);
  --glow-accent: rgba(249, 115, 22, 0.30);
}

/* ===== 正式商务蓝主题（纯色藏蓝，成熟商务感，去花哨） ===== */
:root[data-theme="corporate"] {
  --bg-0: #0B0E14;
  --bg-1: #10141C;
  --bg-2: #151B26;
  --bg-3: #1E2532;
  --border: #2F3A4D;
  --text-0: #F1F4F8;
  --text-1: #D2D9E2;
  --text-2: #99A3B2;
  --text-3: #646F7E;
  --text-4: #414B59;
  --accent: #2563EB;
  --accent-light: #3B82F6;
  --accent-2: #1D4ED8;
  --accent-pink: #3B82F6;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3b82f6;
  --glow-primary: rgba(37, 99, 235, 0.28);
  --glow-secondary: rgba(59, 130, 246, 0.20);
  --glow-accent: rgba(29, 78, 216, 0.22);
}

/* ===== 商务黑：纯黑底 + 低调金强调，全元素无渐变 ===== */
:root[data-theme="business-black"] {
  --bg-0: #000000;
  --bg-1: #0A0A0B;
  --bg-2: #101012;
  --bg-3: #16161A;
  --border: #26262B;
  --text-0: #F7F6F2;
  --text-1: #E0DFDA;
  --text-2: #A8A7A1;
  --text-3: #6E6D68;
  --text-4: #4A4945;
  --accent: #D6D8DB;
  --accent-light: #EEF0F2;
  --accent-2: #B8BCC0;
  --accent-pink: #D6D8DB;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #D6D8DB;
  --glow-primary: rgba(230, 232, 235, 0.18);
  --glow-secondary: rgba(220, 224, 228, 0.12);
  --glow-accent: rgba(210, 214, 218, 0.14);
}
:root[data-theme="business-black"] body {
  background: #000000;
}
/* 商务黑：彻底无渐变 —— 去掉背景光晕、渐变标题、彩色图标渐变 */
:root[data-theme="business-black"] body::before {
  display: none;
}
:root[data-theme="business-black"] .hero-title-gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  background-size: auto;
  animation: none;
  color: var(--accent);
}
:root[data-theme="business-black"] .feature-icon.ai,
:root[data-theme="business-black"] .feature-icon.video,
:root[data-theme="business-black"] .feature-icon.voice,
:root[data-theme="business-black"] .feature-icon.subtitle,
:root[data-theme="business-black"] .feature-icon.publish,
:root[data-theme="business-black"] .feature-icon.clone {
  background: var(--bg-3);
}

/* ===== 亮色主题：组件级覆盖（修复硬编码深色背景/白色边框导致的文字看不见问题） ===== */
:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .topnav a { color: var(--text-1); }
:root[data-theme="light"] .topnav a:hover { background: var(--bg-2); color: var(--text-0); }
:root[data-theme="light"] .topnav a.active {
  background: linear-gradient(135deg, rgba(91,91,214,0.12), rgba(124,58,237,0.12));
  color: var(--accent);
}
:root[data-theme="light"] .brand-tag { color: var(--text-3); }

/* 模态框 */
:root[data-theme="light"] .modal {
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  border: 1px solid var(--border) !important;
}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer {
  border-color: var(--border) !important;
}

/* 通用卡片 */
:root[data-theme="light"] .card {
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  border: 1px solid var(--border) !important;
}

/* 特性卡片 */
:root[data-theme="light"] .feature-card {
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  border: 1px solid var(--border) !important;
}

/* 向导侧边栏 */
:root[data-theme="light"] .wizard-sidebar {
  background: var(--bg-1) !important;
  border-right: 1px solid var(--border) !important;
}

/* 管理后台卡片 */
:root[data-theme="light"] .admin-dashboard-card {
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  border: 1px solid var(--border) !important;
}

/* 管理后台侧边栏 */
:root[data-theme="light"] .admin-sidebar {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 4px 0 16px rgba(30, 35, 70, 0.06) !important;
}
:root[data-theme="light"] .admin-sidebar-header {
  border-bottom: 1px solid var(--border) !important;
}
:root[data-theme="light"] .admin-sidebar-item {
  color: var(--text-1) !important;
}
:root[data-theme="light"] .admin-sidebar-item:hover {
  background: var(--bg-2) !important;
  color: var(--text-0) !important;
}
:root[data-theme="light"] .admin-sidebar-item.active {
  background: var(--glow-primary) !important;
  color: var(--accent) !important;
}
:root[data-theme="light"] .admin-sidebar-group-title {
  color: var(--text-3) !important;
}

/* 通用：白色半透明边框 → 浅色主题下用灰色边框 */
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-textarea {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
  color: var(--text-0) !important;
}
:root[data-theme="light"] .form-input::placeholder,
:root[data-theme="light"] .form-textarea::placeholder {
  color: var(--text-3) !important;
}

/* 表格 */
:root[data-theme="light"] table { color: var(--text-1); }
:root[data-theme="light"] th { background: var(--bg-2) !important; border-color: var(--border) !important; color: var(--text-0); }
:root[data-theme="light"] td { border-color: var(--border) !important; }
:root[data-theme="light"] tr:hover { background: var(--bg-2) !important; }

/* 进度条轨道 */
:root[data-theme="light"] .progress-bar,
:root[data-theme="light"] progress {
  background: var(--bg-3) !important;
}

/* 滚动条（浅色主题下用灰色） */
:root[data-theme="light"] .form-textarea:hover::-webkit-scrollbar-thumb,
:root[data-theme="light"] .form-textarea:focus::-webkit-scrollbar-thumb,
:root[data-theme="light"] .wizard-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--border) !important;
}

/* 下拉选项 */
:root[data-theme="light"] select option {
  background: var(--bg-1);
  color: var(--text-0);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* 全局隐藏 body/html 原生竖向滚动条（和 create-mode 保持一致的视觉体验）
   - Webkit/Chromium/Edge: ::-webkit-scrollbar 隐藏
   - Firefox: scrollbar-width: none
   - 依然允许内容溢出滚动，但不显示滚动条 */
html, body {
  overflow-x: hidden;
  /* Firefox */
  scrollbar-width: none;
}
/* WebKit / Chromium / Edge */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
/* 我的草稿列表：独立滚动区域 + 可见滚动条（页面级滚动条被全局隐藏，这里单独放开，保证草稿多时可滚动查看） */
.local-drafts-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, .45) transparent;
}
.local-drafts-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}
.local-drafts-list::-webkit-scrollbar-track {
  background: transparent;
}
.local-drafts-list::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, .45);
  border-radius: 3px;
}
.local-drafts-list::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, .7);
}
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-0);
  font-size: 14px;
  line-height: 1.6;
}
html.create-mode, body.create-mode {
  overflow: hidden !important;
}
body.create-mode {
  display: flex;
  flex-direction: column;
}
body.create-mode .main-view {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  /* ★ 2026-11-09 用户要求："当前任务"操作区比其他页面窄，需加宽约 20% 并与首页/草稿对齐。
     原 1200px → 1400px（与其他页 .main-view 一致）；侧栏 240px 固定，
     右侧可操作区由 960px 扩到 1160px（+20.8%）。 */
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.create-mode .topbar {
  flex-shrink: 0;
}
body.create-mode .topbar-inner {
  /* 导航栏宽度不随 create-mode 改变，保持与管理后台一致 */
  max-width: 1400px;
}
body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 20% 10%, var(--glow-primary) 0%, transparent 35%),
              radial-gradient(circle at 80% 90%, var(--glow-secondary) 0%, transparent 35%),
              radial-gradient(circle at 50% 50%, var(--glow-accent) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; }

/* ===== 全局滚动条：始终占位，透明度切换 ===== */
textarea,
input[type="text"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"] {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

textarea::-webkit-scrollbar,
input[type="text"]::-webkit-scrollbar,
input[type="search"]::-webkit-scrollbar,
input[type="url"]::-webkit-scrollbar,
input[type="tel"]::-webkit-scrollbar,
input[type="email"]::-webkit-scrollbar,
input[type="password"]::-webkit-scrollbar,
input[type="number"]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}

textarea::-webkit-scrollbar-track,
input[type="text"]::-webkit-scrollbar-track,
input[type="search"]::-webkit-scrollbar-track,
input[type="url"]::-webkit-scrollbar-track,
input[type="tel"]::-webkit-scrollbar-track,
input[type="email"]::-webkit-scrollbar-track,
input[type="password"]::-webkit-scrollbar-track,
input[type="number"]::-webkit-scrollbar-track {
  background: transparent;
}

textarea::-webkit-scrollbar-thumb,
input[type="text"]::-webkit-scrollbar-thumb,
input[type="search"]::-webkit-scrollbar-thumb,
input[type="url"]::-webkit-scrollbar-thumb,
input[type="tel"]::-webkit-scrollbar-thumb,
input[type="email"]::-webkit-scrollbar-thumb,
input[type="password"]::-webkit-scrollbar-thumb,
input[type="number"]::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

textarea:hover,
textarea:focus,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="text"]:focus,
input[type="search"]:focus {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

textarea:hover::-webkit-scrollbar-thumb,
textarea:focus::-webkit-scrollbar-thumb,
input[type="text"]:hover::-webkit-scrollbar-thumb,
input[type="search"]:hover::-webkit-scrollbar-thumb,
input[type="url"]:hover::-webkit-scrollbar-thumb,
input[type="email"]:hover::-webkit-scrollbar-thumb,
input[type="password"]:hover::-webkit-scrollbar-thumb,
input[type="number"]:hover::-webkit-scrollbar-thumb,
input[type="text"]:focus::-webkit-scrollbar-thumb,
input[type="search"]:focus::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

textarea:hover::-webkit-scrollbar-thumb:hover,
textarea:focus::-webkit-scrollbar-thumb:hover,
input[type="text"]:hover::-webkit-scrollbar-thumb:hover,
input[type="search"]:hover::-webkit-scrollbar-thumb:hover,
input[type="url"]:hover::-webkit-scrollbar-thumb:hover,
input[type="email"]:hover::-webkit-scrollbar-thumb:hover,
input[type="password"]:hover::-webkit-scrollbar-thumb:hover,
input[type="number"]:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

textarea:hover::-webkit-scrollbar-thumb:active,
input[type="text"]:hover::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.45);
}

/* 所有可滚动容器：始终占位，透明度切换 */
.wizard-subtitle-preview,
.voice-category-scroll,
.voice-picker-grid,
.wizard-card {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.wizard-subtitle-preview::-webkit-scrollbar,
.voice-category-scroll::-webkit-scrollbar,
.voice-picker-grid::-webkit-scrollbar,
.wizard-card ::-webkit-scrollbar {
  display: block;
  width: 6px;
  height: 6px;
}

.wizard-subtitle-preview::-webkit-scrollbar-track,
.voice-category-scroll::-webkit-scrollbar-track,
.voice-picker-grid::-webkit-scrollbar-track,
.wizard-card ::-webkit-scrollbar-track {
  background: transparent;
}

.wizard-subtitle-preview::-webkit-scrollbar-thumb,
.voice-category-scroll::-webkit-scrollbar-thumb,
.voice-picker-grid::-webkit-scrollbar-thumb,
.wizard-card ::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.wizard-subtitle-preview:hover,
.voice-category-scroll:hover,
.voice-picker-grid:hover,
.wizard-card:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.wizard-subtitle-preview:hover::-webkit-scrollbar-thumb,
.voice-category-scroll:hover::-webkit-scrollbar-thumb,
.voice-picker-grid:hover::-webkit-scrollbar-thumb,
.wizard-card:hover ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

.wizard-subtitle-preview:hover::-webkit-scrollbar-thumb:hover,
.voice-category-scroll:hover::-webkit-scrollbar-thumb:hover,
.voice-picker-grid:hover::-webkit-scrollbar-thumb:hover,
.wizard-card:hover ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== 全局兜底：所有可滚动容器统一滚动条样式 ===== */
.modal-body,
.admin-modal-body,
.admin-content,
.admin-sidebar-list,
.admin-error-box,
.admin-log-viewer,
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.modal-body::-webkit-scrollbar,
.admin-modal-body::-webkit-scrollbar,
.admin-content::-webkit-scrollbar,
.admin-sidebar-list::-webkit-scrollbar,
.admin-error-box::-webkit-scrollbar,
.admin-log-viewer::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}
.modal-body::-webkit-scrollbar-track,
.admin-modal-body::-webkit-scrollbar-track,
.admin-content::-webkit-scrollbar-track,
.admin-sidebar-list::-webkit-scrollbar-track,
.admin-error-box::-webkit-scrollbar-track,
.admin-log-viewer::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body::-webkit-scrollbar-thumb,
.admin-modal-body::-webkit-scrollbar-thumb,
.admin-content::-webkit-scrollbar-thumb,
.admin-sidebar-list::-webkit-scrollbar-thumb,
.admin-error-box::-webkit-scrollbar-thumb,
.admin-log-viewer::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}
.modal-body:hover,
.admin-modal-body:hover,
.admin-content:hover,
.admin-sidebar-list:hover,
.admin-error-box:hover,
.admin-log-viewer:hover,
.table-wrap:hover {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.modal-body:hover::-webkit-scrollbar-thumb,
.admin-modal-body:hover::-webkit-scrollbar-thumb,
.admin-content:hover::-webkit-scrollbar-thumb,
.admin-sidebar-list:hover::-webkit-scrollbar-thumb,
.admin-error-box:hover::-webkit-scrollbar-thumb,
.admin-log-viewer:hover::-webkit-scrollbar-thumb,
.table-wrap:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
.modal-body:hover::-webkit-scrollbar-thumb:hover,
.admin-modal-body:hover::-webkit-scrollbar-thumb:hover,
.admin-content:hover::-webkit-scrollbar-thumb:hover,
.admin-sidebar-list:hover::-webkit-scrollbar-thumb:hover,
.admin-error-box:hover::-webkit-scrollbar-thumb:hover,
.admin-log-viewer:hover::-webkit-scrollbar-thumb:hover,
.table-wrap:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== 工具类 ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gap-3 { gap: 12px; }
.gap-6 { gap: 24px; }
.font-mono { font-family: 'SF Mono', Monaco, 'Consolas', monospace; }

/* ===== 顶部导航 ===== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  /* 统一导航栏高度：所有页面保持一致 60px，不因页面模式切换而改变 */
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  overflow: hidden;
  flex-shrink: 0;
}
.topbar-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center;
  padding: 0 24px; height: 60px;
  min-height: 60px;
  gap: 32px;
  flex-wrap: nowrap;
  /* 防止内容溢出导致高度变化 */
  overflow: hidden;
}
/* create-mode 下导航栏高度依然保持 60px */
body.create-mode .topbar,
body.create-mode .topbar-inner {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 14px;
  box-shadow: 0 0 20px rgba(0,212,255,0.4);
}
.brand-name { font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand-tag { color: var(--text-3); font-size: 12px; padding-left: 8px; border-left: 1px solid var(--border); white-space: nowrap; flex-shrink: 0; }
.topnav { display: flex; gap: 4px; flex: 1; min-width: 0; align-items: center; }
.topnav a {
  padding: 8px 14px; border-radius: 8px;
  color: var(--text-1); font-size: 14px;
  transition: all 0.2s;
  /* 导航按钮文字强制单行，不因宽度不够而换行撑高导航栏 */
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  max-height: 36px;
}
.topnav a:hover { background: var(--bg-2); color: var(--text-0); }
.topnav a.active {
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));
  color: var(--accent);
}
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
  transition: all 0.2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,212,255,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,212,255,0.5); }
.btn-ghost {
  background: var(--bg-2); color: var(--text-0);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-3); border-color: var(--accent); }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline:hover { background: rgba(0,212,255,0.1); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: var(--success); color: #fff; }
.btn-secondary { background: var(--bg-3); color: var(--text-0); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-2); border-color: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* 按钮 loading spinner */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn.is-loading { position: relative; pointer-events: none; }
.btn.is-loading .btn-spinner { margin-right: 4px; }

/* ===== 进度条 ===== */
.progress-container {
  height: 8px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progress-shine 2s infinite;
}
@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.progress-text {
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}

/* ===== 主视图 ===== */
.main-view { max-width: 1400px; margin: 0 auto; padding: 32px 24px; min-height: calc(100vh - 60px); }

/* ===== 首页 Hero ===== */
.hero {
  text-align: center;
  padding: 80px 24px 60px;
  position: relative;
  z-index: 1;
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.hero-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 20px;
  font-size: 13px;
  color: var(--accent-light);
  font-weight: 500;
  margin-bottom: 24px;
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
}
.hero h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero-title-gradient {
  background: linear-gradient(135deg, var(--accent-light) 0%, #FFFFFF 30%, var(--accent-pink) 60%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-flow 6s ease infinite;
}
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero p {
  color: var(--text-2);
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.hero-highlight {
  color: var(--accent-light);
  font-weight: 600;
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
  padding: 28px;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
}
.stat-item {
  text-align: center;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 12px;
  color: var(--text-3);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.feature-card {
  background: linear-gradient(145deg, rgba(26, 26, 36, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
}
.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
  transform: scale(1.1);
}
.feature-icon.ai { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); }
.feature-icon.video { background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.2)); }
.feature-icon.voice { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(99, 102, 241, 0.2)); }
.feature-icon.subtitle { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2)); }
.feature-icon.publish { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(236, 72, 153, 0.2)); }
.feature-icon.clone { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(245, 158, 11, 0.2)); }
.feature-card h3 { font-size: 18px; font-weight: 600; color: white; margin-bottom: 12px; }
.feature-card p { color: var(--text-3); font-size: 14px; line-height: 1.6; }

/* ===== 工作流程 ===== */
.workflow-section {
  padding: 60px 24px;
  background: rgba(255,255,255,0.02);
  position: relative;
  z-index: 1;
  margin-top: 40px;
  border-radius: 16px;
}
.workflow-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-title {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
}
.section-subtitle {
  font-size: 15px;
  color: var(--text-3);
  max-width: 500px;
  margin: 0 auto;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
}
.workflow-steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-pink) 100%);
}
.workflow-step {
  text-align: center;
  position: relative;
  z-index: 2;
}
.step-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(26, 26, 36, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
  border: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  transition: all 0.3s ease;
  position: relative;
}
.step-circle::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ring-pulse 2s ease-out infinite;
}
@keyframes ring-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}
.step-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-light);
  margin-top: 4px;
}
.step-title {
  font-size: 13px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}
.step-desc {
  font-size: 11px;
  color: var(--text-4);
}

/* ===== CTA 区域 ===== */
.cta-section {
  padding: 60px 24px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-top: 40px;
}
.cta-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 32px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(236, 72, 153, 0.08) 100%);
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.cta-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
}
.cta-desc {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 28px;
}

/* ===== 页脚 ===== */
.footer {
  padding: 32px 24px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 1;
  margin-top: 40px;
}
.footer-text {
  color: var(--text-4);
  font-size: 12px;
}

/* ===== 卡片 ===== */
.card {
  background: linear-gradient(145deg, var(--bg-1) 0%, rgba(17, 17, 24, 0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(99,102,241,0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
  border-color: rgba(99,102,241,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(99,102,241,0.08);
}
.card-title {
  font-size: 16px; font-weight: 600; color: var(--text-0);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-subtitle {
  font-size: 13px; color: var(--text-3);
}
.card-footer {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: space-between;
}

/* ===== 表单 ===== */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; margin-bottom: 8px;
  font-size: 13px; color: var(--text-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.form-label .req { color: var(--danger); margin-left: 4px; }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 8px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; color: var(--text-0); font-size: 13px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-select option {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
}
.form-select option:hover,
.form-select option:focus,
.form-select option:active {
  background: var(--accent) !important;
  color: white !important;
}
.form-select option:checked {
  background: var(--accent) !important;
  color: white !important;
}
select {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
}
select option {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
}
select option:hover,
select option:focus,
select option:checked {
  background: var(--accent) !important;
  color: white !important;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--accent);
  background: rgba(99,102,241,0.06);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 0 20px rgba(99,102,241,0.05);
}
.form-textarea { min-height: 120px; resize: vertical; font-family: inherit; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.form-textarea::-webkit-scrollbar { width: 6px; height: 6px; display: block; }
.form-textarea::-webkit-scrollbar-track { background: transparent; }
.form-textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.3s ease; }
.form-textarea:hover, .form-textarea:focus { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
.form-textarea:hover::-webkit-scrollbar-thumb, .form-textarea:focus::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
.form-textarea:hover::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.form-textarea:hover::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,0.45); }
.form-hint { color: var(--text-3); font-size: 12px; margin-top: 6px; }
.form-error { color: var(--danger); font-size: 12px; margin-top: 6px; }
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--text-4);
}

/* 输入框组（带后缀按钮） */
.input-group {
  position: relative; display: flex; align-items: center;
}
.input-group .form-input {
  padding-right: 44px;
}
.input-suffix {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--bg-3); border-radius: 6px; font-size: 14px;
  color: var(--text-3); cursor: pointer;
  transition: all 0.2s;
}
.input-suffix:hover {
  background: var(--bg-2); color: var(--text-1);
}

/* 密码强度 */
.pwd-strength {
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg-2); border-radius: 6px;
}
.pwd-strength-label {
  font-size: 11px; color: var(--text-3); margin-bottom: 6px;
}
.pwd-strength-bar {
  display: flex; gap: 4px; height: 6px;
}
.pwd-strength-seg {
  flex: 1; border-radius: 3px; background: var(--bg-3);
  transition: all 0.3s;
}
.pwd-strength-text {
  font-size: 11px; margin-top: 4px; color: var(--text-3);
}

/* ===== 表格 ===== */
.table-wrap { overflow-x: auto; overflow-y: visible; border-radius: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 14px 20px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 14px;
}
th { 
  color: var(--text-3); font-weight: 700; font-size: 12px; 
  text-transform: uppercase; letter-spacing: 1px;
  background: linear-gradient(180deg, rgba(37,37,48,0.8) 0%, rgba(26,26,36,0.6) 100%);
  position: relative;
}
th::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}
tr:hover td { 
  background: rgba(99,102,241,0.06);
  color: var(--text-0);
}
tbody tr {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
tbody tr:hover {
  transform: translateY(-1px);
}

/* ===== 状态标签 ===== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 14px;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.tag-pending, .tag-queued { 
  background: rgba(148,163,184,0.12); color: var(--text-2);
  border-color: rgba(148,163,184,0.2);
}
.tag-processing, .tag-asr, .tag-llm, .tag-tts, .tag-lipsync, .tag-downloading {
  background: rgba(59,130,246,0.12); color: var(--info);
  border-color: rgba(59,130,246,0.2);
}
.tag-success { 
  background: rgba(16,185,129,0.12); color: var(--success);
  border-color: rgba(16,185,129,0.2);
}
.tag-failed { 
  background: rgba(239,68,68,0.12); color: var(--danger);
  border-color: rgba(239,68,68,0.2);
}
.tag-cancelled { 
  background: rgba(100,116,139,0.12); color: var(--text-3);
  border-color: rgba(100,116,139,0.2);
}
.tag-warning { 
  background: rgba(245,158,11,0.12); color: var(--warning);
  border-color: rgba(245,158,11,0.2);
}
.tag-info { 
  background: rgba(99,102,241,0.12); color: var(--accent-light);
  border-color: rgba(99,102,241,0.2);
}
.tag-danger { 
  background: rgba(239,68,68,0.12); color: var(--danger);
  border-color: rgba(239,68,68,0.2);
}
.tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.tag-processing::before, .tag-asr::before, .tag-llm::before, .tag-tts::before, .tag-lipsync::before {
  animation: tag-pulse 1.5s infinite;
}
@keyframes tag-pulse { 
  0%,100%{opacity:1; box-shadow: 0 0 8px currentColor;} 
  50%{opacity:0.4; box-shadow: 0 0 16px currentColor;} 
}

/* ===== 进度条 ===== */
.progress {
  height: 8px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px; transition: width 0.4s ease;
  position: relative;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progress-shine 2s infinite;
}
@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.progress-bar.failed { background: var(--danger); }
.progress-bar.success { background: var(--success); }

/* ===== 分页 ===== */
.pagination {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 24px; align-items: center;
}
.pagination button {
  min-width: 36px; height: 36px; padding: 0 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; font-size: 13px; color: var(--text-2);
  cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pagination button:hover:not(:disabled) { 
  background: rgba(99,102,241,0.08); 
  border-color: rgba(99,102,241,0.2);
  color: var(--text-0);
}
.pagination button.active { 
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); 
  color: #fff; 
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination span {
  font-size: 13px; color: var(--text-3);
  padding: 0 8px;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  place-items: center;
}
.modal-overlay.active {
  display: grid;
  animation: modal-fade-in 0.25s ease forwards;
}
@keyframes modal-fade-in {
  to { opacity: 1; }
}
.modal {
  background: linear-gradient(145deg, var(--bg-1) 0%, rgba(17, 17, 24, 0.98) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px; width: 100%; max-width: 480px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.05);
  transform: scale(0.95) translateY(20px);
  animation: modal-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes modal-slide-up {
  to { transform: scale(1) translateY(0); }
}
.modal-lg { max-width: 720px; }
.modal-header {
  padding: 24px; border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(37,37,48,0.5) 0%, transparent 100%);
}
.modal-title { font-size: 18px; font-weight: 600; color: var(--text-0); }
.modal-close {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--text-3); font-size: 22px;
  background: rgba(255,255,255,0.04);
  transition: all 0.2s;
}
.modal-close:hover { background: rgba(239,68,68,0.15); color: var(--danger); }
.modal-body { padding: 24px; max-height: 65vh; overflow-y: auto; }
.modal-footer {
  padding: 20px 24px; border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; justify-content: flex-end; gap: 12px;
  background: linear-gradient(0deg, rgba(37,37,48,0.3) 0%, transparent 100%);
}

/* ===== Toast ===== */
.toast-root {
  position: fixed; top: 80px; right: 24px; z-index: 20000;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  padding: 12px 18px; border-radius: 8px;
  background: var(--bg-1); border: 1px solid var(--border);
  box-shadow: var(--shadow); font-size: 14px;
  animation: slideIn 0.3s; max-width: 360px;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--info); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ===== Loader ===== */
.global-loader {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(10,14,26,0.6); backdrop-filter: blur(2px);
  display: grid; place-items: center;
}
.global-loader.hidden { display: none; }
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--bg-3); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 上传区 ===== */
.upload-zone {
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 28px; text-align: center; cursor: pointer;
  transition: all 0.2s; background: var(--bg-2);
}
.upload-zone:hover { border-color: var(--accent); background: rgba(99,102,241,0.05); }
.upload-zone.dragover { border-color: var(--accent); background: rgba(99,102,241,0.1); }
.upload-icon { font-size: 32px; color: var(--text-3); margin-bottom: 8px; }
.upload-text { color: var(--text-1); font-size: 14px; }
.upload-hint { color: var(--text-3); font-size: 12px; margin-top: 4px; }

/* ===== 视频预览 ===== */
.video-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: all 0.3s;
}
.video-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.video-thumb {
  width: 100%; background: var(--bg-3);
  display: grid; place-items: center; color: var(--text-3);
  position: relative; overflow: hidden;
  /* 2026-09-08：视频区固定 3:4 比例，卡片高度统一（与口型素材卡一致），文件名/信息/删除对齐 */
  aspect-ratio: 3 / 4;
}
.video-thumb video { width: 100%; height: 100%; max-height: none; object-fit: contain; background: #000; }
/* ===== 混剪库：文件夹卡 1:1 正方形、详情素材卡 4:3 横版（避免"文件夹好大"占屏） ===== */
.mixlib-folder-card { max-width: 168px; }
.mixlib-folder-card .video-thumb { aspect-ratio: 1 / 1; }
#mixlib-material-grid .video-thumb { aspect-ratio: 3 / 4; }
#mixlib-picker-grid .video-thumb { aspect-ratio: auto !important; height: 300px; flex-shrink: 0; }
.video-thumb.audio-thumb {
  aspect-ratio: 3 / 4;
  min-height: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-meta { padding: 6px 10px 8px; }
.video-title { font-size: 12px; font-weight: 500; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-info { color: var(--text-3); font-size: 11px; display: flex; gap: 8px; }
.video-meta .btn { padding: 3px 8px; font-size: 11px; }
.video-meta .flex.mt-8 { margin-top: 5px; }

/* ===== 统计面板 ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}
.stat-label { color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 700; }
.stat-value.accent { color: var(--accent); }
.stat-value.success { color: var(--success); }
.stat-value.warning { color: var(--warning); }

/* ===== 创建任务步骤式 UI ===== */
.create-wizard {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.wizard-sidebar {
  width: 240px;
  background: rgba(17, 17, 24, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.wizard-sidebar::-webkit-scrollbar { width: 5px; display: block; }
.wizard-sidebar::-webkit-scrollbar-track { background: transparent; }
.wizard-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}
.wizard-sidebar:hover { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; }
.wizard-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.wizard-sidebar:hover::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

.wizard-progress-overview {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.wizard-progress-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.wizard-progress-bar-container {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.wizard-progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-0);
  font-weight: 600;
}

.wizard-steps-nav {
  padding: 0;
  flex: 1;
}

.wizard-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  border: 1px solid transparent;
  position: relative;
  margin-bottom: 2px;
  overflow: hidden;
}

.wizard-step-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.25s;
  border-radius: 0 2px 2px 0;
}

.wizard-step-item.active::before {
  transform: scaleY(1);
}

.wizard-step-item:hover {
  background: var(--bg-2);
  transform: translateX(2px);
}

.wizard-step-item.active {
  background: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.35);
}

.wizard-step-item.completed {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.25);
}

.wizard-step-item.completed .wizard-step-number {
  background: var(--success);
  color: white;
}

.wizard-step-number {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: none;
  color: var(--text-0);
  transition: all 0.25s;
}

.wizard-step-item.active .wizard-step-number {
  background: white;
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.4);
}

.wizard-step-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.wizard-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-step-item.completed .wizard-step-title {
  color: var(--success);
}

.wizard-step-desc {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-step-status {
  position: absolute;
  right: 12px;
  font-size: 12px;
  transition: all 0.3s;
}

.wizard-step-item.active .wizard-step-status {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.wizard-content-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 20px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#wizard-step-container {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  /* ★ 2026-11-09 随容器加宽放开内容上限：1080 → 1160，
     与 1400px 容器 + 240px 侧栏 + 32px 内边距后的可用宽度匹配（原 896px → 约 1096px，+22%）。 */
  max-width: 1160px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.wizard-nav {
  flex-shrink: 0;
}
.source-section {
  transition: opacity 0.25s ease, height 0.25s ease;
  overflow: hidden;
}

.source-sections {
  min-height: 60px;
}

#wizard-step-container::-webkit-scrollbar {
  width: 5px;
  display: block;
}
#wizard-step-container::-webkit-scrollbar-track {
  background: transparent;
}
#wizard-step-container::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}
#wizard-step-container:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
#wizard-step-container:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
#wizard-step-container:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.wizard-step-header {
  margin-bottom: 20px;
}

.wizard-step-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-0);
}

.wizard-step-header h1::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: 2px;
}

.wizard-step-header p {
  color: var(--text-2);
  font-size: 13px;
}

.wizard-smart-tip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-smart-tip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
}

.wizard-smart-tip::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -15%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
  animation: tipGlow 4s ease-in-out infinite;
}

@keyframes tipGlow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

.wizard-smart-tip-icon {
  font-size: 24px;
  flex-shrink: 0;
  display: inline-block;
  /* 更柔和的呼吸感：上下浮动 + 微缩放 + 光晕脉动 */
  animation: iconBreath 2.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.3));
  will-change: transform;
}

.wizard-smart-tip-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.wizard-smart-tip-title {
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 4px;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.wizard-smart-tip-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

.wizard-smart-tip-meta {
  font-size: 11px;
  color: var(--warning);
  margin-top: 6px;
  font-weight: 500;
}

.wizard-card {
  background: rgba(26, 26, 36, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.wizard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.wizard-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.15) inset, 0 0 30px rgba(99, 102, 241, 0.08);
  transform: translateY(-3px);
}

.wizard-card:hover::before {
  opacity: 1;
}

.wizard-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.2px;
}

.wizard-card-title .icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 默认静止，鼠标悬停到卡片容器时才呼吸（见 :hover 规则） */
  will-change: transform;
}

/* 只有当鼠标悬停到卡片容器上时，卡片标题图标才开始呼吸起伏 */
.wizard-card:hover .wizard-card-title .icon {
  animation: cardIconBreath 3.2s ease-in-out infinite;
  transform: scale(1.05) rotate(-3deg);
  box-shadow: 0 8px 20px rgba(129, 140, 248, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.wizard-step-content {
  display: none;
}

.wizard-step-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
  max-width: 1080px;
  width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#wizard-step-container {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 20px 0 8px;
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 1080px;
}

.wizard-btn-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ★ 2026-10-28 「开始XX」主操作按钮 + 一键发布：固定与顶部项目进度条同色（橙→金黄，不随主题）+ 呼吸闪烁提醒点击 */
#wizard-action,
#wizard-next.btn-publish {
  background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(249, 115, 22, 0.35);
  animation: btn-gold-pulse 2.2s ease-in-out infinite;
}
#wizard-action:hover,
#wizard-next.btn-publish:hover { filter: brightness(1.08); }
#wizard-action.is-loading,
#wizard-action[disabled] {
  background: var(--bg-3);
  color: var(--text-2);
  box-shadow: none;
  filter: none;
  animation: none;
}
@keyframes btn-gold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.25); filter: brightness(1); }
  50% { box-shadow: 0 0 10px 2px rgba(249, 115, 22, 0.38); filter: brightness(1.05); }
}

.wizard-data-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(90, 216, 166, 0.08);
  border: 1px solid rgba(90, 216, 166, 0.15);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-0);
}

.wizard-data-source-link {
  color: var(--success);
  cursor: pointer;
  font-weight: 500;
}

.wizard-data-source-link:hover {
  text-decoration: underline;
}

.wizard-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.wizard-param-card {
  background: rgba(37, 37, 48, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s;
}

.wizard-param-card:hover {
  border-color: var(--border);
  background: var(--bg-2);
}

.wizard-param-card h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 8px;
}

.wizard-platform-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.wizard-platform-checkbox:hover {
  border-color: var(--accent);
  background: var(--bg-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.wizard-platform-checkbox.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.18) 0%, rgba(129, 140, 248, 0.06) 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25), inset 0 0 0 1px rgba(129, 140, 248, 0.2);
}

.wizard-platform-checkbox input {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  opacity: 0;
  pointer-events: none;
}

.wizard-platform-checkbox.selected input {
  opacity: 1;
}

.wizard-platform-icon {
  font-size: 20px;
  line-height: 1;
}

.wizard-platform-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  text-align: center;
}

.wizard-platform-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  text-align: center;
  white-space: nowrap;
}

.wizard-platform-desc {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wizard-compare-layout {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

.wizard-compare-col-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.wizard-compare-col-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wizard-compare-card {
  flex: 1;
  background: rgba(26, 26, 36, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.wizard-compare-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.wizard-compare-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.15) inset, 0 0 30px rgba(99, 102, 241, 0.08);
  transform: translateY(-3px);
}

.wizard-compare-card:hover::before {
  opacity: 1;
}

.wizard-compare-card-header {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.wizard-compare-card-header.polished {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}

.wizard-compare-card-body {
  padding: 0;
  font-size: 14px;
  color: var(--text-0);
  line-height: 1.7;
  max-height: 580px;
  overflow-y: scroll;
  white-space: pre-wrap;
  box-sizing: border-box;
}

/* 如果 card-body 里面是纯文本节点（没有套 textarea / placeholder），恢复统一内边距保证对齐 */
.wizard-compare-card-body:not(:has(textarea)):not(:has(.wizard-compare-placeholder)) {
  padding: 12px 16px;
}

.wizard-compare-card-body.editable {
  padding: 0;
}

.wizard-compare-textarea {
  width: 100%;
  min-height: 340px;
  max-height: 70vh;
  resize: vertical;
  /* 左右两卡统一内边距：上下 12px / 左右 16px，保证第一行文字起始完全对齐 */
  padding: 12px 16px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--text-0);
  font-size: 14px;
  line-height: 1.7;
  outline: none;
  font-family: inherit;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.wizard-compare-textarea::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}

.wizard-compare-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.wizard-compare-textarea::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.wizard-compare-textarea:hover,
.wizard-compare-textarea:focus {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.wizard-compare-textarea:hover::-webkit-scrollbar-thumb,
.wizard-compare-textarea:focus::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

.wizard-compare-textarea:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.wizard-compare-textarea:hover::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.45);
}

.wizard-compare-textarea::placeholder {
  color: var(--text-2);
}

.wizard-compare-placeholder {
  color: var(--text-2);
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
}

.wizard-upload-zone {
  border: none;
  border-radius: 20px;
  padding: 45px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.wizard-upload-zone:hover {
  background: rgba(129, 140, 248, 0.04);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.2);
}

.wizard-upload-zone.dragover {
  background: rgba(129, 140, 248, 0.06);
  box-shadow: inset 0 0 0 2px rgba(129, 140, 248, 0.4);
}

.wizard-upload-zone.has-file {
  background: rgba(16, 185, 129, 0.04);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.2);
  cursor: default;
}

.wizard-upload-zone.has-file .wizard-upload-icon {
  color: var(--success);
}

.wizard-upload-icon {
  font-size: 52px;
  margin-bottom: 16px;
  color: var(--accent);
}

.wizard-upload-text {
  font-size: 17px;
  color: var(--text-0);
  margin-bottom: 8px;
}

.wizard-upload-hint {
  font-size: 13px;
  color: var(--text-2);
}

.wizard-file-preview {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-file-preview-icon {
  font-size: 24px;
}

.wizard-file-preview-info {
  flex: 1;
}

.wizard-file-preview-name {
  font-size: 14px;
  color: var(--text-0);
}

.wizard-file-preview-size {
  font-size: 12px;
  color: var(--text-3);
}

.wizard-file-preview-duration {
  font-size: 12px;
  color: var(--accent);
  margin-top: 2px;
}

.wizard-file-preview-remove {
  color: var(--danger);
  cursor: pointer;
  font-size: 18px;
}

.wizard-result-box {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  margin-top: 24px;
}

.wizard-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.wizard-result-title {
  font-weight: 700;
  color: var(--text-0);
  font-size: 16px;
}

.wizard-progress-container {
  margin: 24px 0;
}

.wizard-progress-bar {
  height: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: 6px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wizard-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.wizard-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-2);
  transition: all 0.3s ease;
  font-weight: 500;
}

.wizard-progress-step .wps-icon {
  font-size: 14px;
}

.wizard-progress-step.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
  animation: pulse 1.5s ease-in-out infinite;
}

.wizard-progress-step.done {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6); }
}

.wizard-progress-text {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
}

.publish-resource-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.publish-resource-item:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.publish-resource-item span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

#publish-progress-steps .wizard-progress-step.active {
  position: relative;
}

#publish-progress-steps .wizard-progress-step.done {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
}

#publish-progress-steps .wizard-progress-step.done::after {
  content: '✓';
  margin-left: 4px;
  font-size: 11px;
  color: #22c55e;
  font-weight: 700;
}

#publish-progress-steps .wizard-progress-step.active::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  margin-right: 2px;
  animation: pulse 1s ease-in-out infinite;
}

.wizard-video-preview {
  border-radius: 10px;
  margin-top: 12px;
  max-width: 100%;
}

.wizard-audio-player {
  width: 100%;
  margin-top: 12px;
}

.wizard-audio-player audio {
  width: 100%;
}

.wizard-audio-player audio::-webkit-media-controls {
  background: var(--bg-2);
  border-radius: 8px;
}

.wizard-audio-player audio::-webkit-media-controls-panel {
  background: var(--bg-2);
  border-radius: 8px;
}

/* ===== 音频预览卡片（步骤3 TTS 输出 / 步骤4 克隆生成 共享样式）===== */
.audio-preview-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  transition: border-color 0.2s ease;
}
.audio-preview-card.is-empty {
  border-style: dashed;
  background: transparent;
}
.audio-preview-card.is-ready {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}
.audio-preview-card.is-loading {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.audio-preview-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.audio-preview-card__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.audio-preview-card__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.audio-preview-card__titles {
  min-width: 0;
}
.audio-preview-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-preview-card__meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}
.audio-preview-card__badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.audio-preview-card__badge--ready {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.audio-preview-card__badge--loading {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.audio-preview-card__player {
  width: 100%;
}
.audio-preview-card__player audio {
  width: 100%;
}
.audio-preview-card__player audio::-webkit-media-controls-panel {
  background: var(--bg-3);
  border-radius: 8px;
}
.audio-preview-card__progress {
  height: 6px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.audio-preview-card__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px;
  transition: width 0.3s ease;
}
.audio-preview-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
  text-align: center;
}
.audio-preview-card__empty-icon {
  font-size: 26px;
  opacity: 0.7;
}
.audio-preview-card__empty-text {
  font-size: 13px;
  color: var(--text-2);
}
.audio-preview-card__empty-hint {
  font-size: 11px;
  color: var(--text-3);
}
.audio-preview-card__url-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
}


/* ===== 音频预览卡片 · 自定义播放条（2026-09-12 替换原生 audio 控件）===== */
.vplayer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #24242f, #191923);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 0;
  box-sizing: border-box;
}
.vplayer-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.2s ease;
  line-height: 1;
  padding: 0;
}
.vplayer-btn:hover { background: rgba(255, 255, 255, 0.18); }
.vplayer-play-ico { line-height: 1; font-size: 13px; margin-left: 1px; }
.vplayer-time {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.vplayer-time .vplayer-sep { margin: 0 3px; color: rgba(255, 255, 255, 0.35); }
.vplayer-seek {
  flex: 1;
  min-width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin: 0;
}
.vplayer-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent, #7c8cf8);
  border: 2px solid #fff;
  cursor: pointer;
}
.vplayer-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent, #7c8cf8);
  border: 2px solid #fff;
  cursor: pointer;
}
.vplayer-mute { font-size: 13px; }
.vplayer-menu-wrap { position: relative; flex-shrink: 0; }
.vplayer-more { font-size: 16px; letter-spacing: 1px; }
.vplayer-menu[hidden] { display: none; }
.vplayer-menu:not([hidden]) { display: block; }
.vplayer-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  background: #2a2a38;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 150px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 50;
}
.vplayer-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 12px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.vplayer-menu-item:hover { background: rgba(255, 255, 255, 0.12); }


.speed-slider {
  width: 100%;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
}

.speed-slider::-webkit-slider-thumb:hover {
  background: var(--accent);
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.speed-slider::-webkit-slider-thumb:active {
  background: var(--accent);
  transform: scale(1.1);
}

.speed-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.speed-slider::-moz-range-thumb:hover {
  background: var(--accent);
  transform: scale(1.15);
}

.radio-group {
  display: flex;
  gap: 12px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.radio-item:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

.radio-item.selected {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
}

.radio-item.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-item .radio-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.radio-item:hover .radio-indicator {
  border-color: var(--accent);
}

.radio-item.selected .radio-indicator {
  border-color: var(--accent);
}

.radio-item.selected .radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

.radio-item .radio-icon {
  font-size: 28px;
}

.cyber-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cyber-icon svg {
  width: 100%;
  height: 100%;
}

.cyber-icon .cyber-glow {
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.radio-item:hover .cyber-glow,
.radio-item.selected .cyber-glow {
  opacity: 1;
}

.radio-item .radio-content {
  flex: 1;
}

.radio-item .radio-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-0);
  margin-bottom: 2px;
}

.radio-item .radio-desc {
  font-size: 12px;
  color: var(--text-2);
}

input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}

input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* ===== 口型同步来源选择器 ===== */
.lipsync-source-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lipsync-source-item {
  flex: 1;
  min-width: 180px;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  gap: 12px;
}

.lipsync-source-item:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
  transform: translateY(-1px);
}

.lipsync-source-item.selected {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}

.lipsync-source-item.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.lipsync-source-item .radio-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.lipsync-source-item .radio-content {
  flex: 1;
  min-width: 0;
}

.lipsync-source-item .radio-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-0);
  margin-bottom: 2px;
}

.lipsync-source-item .radio-desc {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.lipsync-source-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lipsync-source-status.ready {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.lipsync-source-status.muted {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
  border: 1px dashed var(--border-2);
}

.radio-disabled-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

.radio-item.is-disabled {
  pointer-events: none;
}

.radio-item.is-disabled input[type="radio"] {
  cursor: not-allowed;
}

.lipsync-source-upload-row {
  margin-top: 12px;
}

.lipsync-source-upload-row .wizard-upload-zone {
  padding: 24px;
  border-radius: 14px;
  min-height: 80px;
}

.lipsync-source-upload-row .wizard-upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.lipsync-source-upload-row .wizard-upload-text {
  font-size: 14px;
  margin-bottom: 4px;
}

.lipsync-source-upload-row .wizard-upload-hint {
  font-size: 12px;
}

/* 素材库选择 - 已选展示 */
.lipsync-library-selected {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid var(--border-2);
}

.lipsync-library-thumb {
  flex: 0 0 140px;
  height: 90px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lipsync-library-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lipsync-library-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lipsync-library-name {
  font-size: 14px;
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================================================
 * 内嵌素材库面板（步骤4 视频来源 - 素材库选择）
 * 参考 CapCut/剪映 素材库设计：工具栏 + 当前选中 + 网格 + 分页
 * ================================================================ */
.lipsync-library-panel {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lipsync-library-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lipsync-library-toolbar .lipsync-library-search {
  flex: 1;
  min-width: 0;
  height: 34px;
  font-size: 13px;
}
.lipsync-library-toolbar .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 当前选中素材卡片 */
.lipsync-library-current {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  position: relative;
}
.lipsync-library-current-thumb {
  flex: 0 0 96px;
  height: 60px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.lipsync-library-current-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.4);
}
.lipsync-library-current-info {
  flex: 1;
  min-width: 0;
}
.lipsync-library-current-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lipsync-library-current-hint {
  font-size: 11px;
  color: var(--success);
  margin-top: 2px;
}
.lipsync-library-current .btn-xs {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-3);
}
.lipsync-library-current .btn-xs:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* 网格 - 高度限制 + 滚动 */
.lipsync-library-grid {
  display: grid;
  /* 2026-09-08：200px -> 150px，一行 5-6 个卡片（整体缩小，视频预览等比跟随） */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 80px;
  max-height: 360px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 4px;
  margin: -4px;
  /* 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.lipsync-library-grid::-webkit-scrollbar {
  width: 6px;
}
.lipsync-library-grid::-webkit-scrollbar-track {
  background: transparent;
}
.lipsync-library-grid::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 3px;
}
.lipsync-library-grid::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

.lipsync-library-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.lipsync-library-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.lipsync-library-item.is-selected {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4), 0 4px 16px rgba(16, 185, 129, 0.2);
}

.lipsync-library-item-thumb {
  position: relative;
  width: 100%;
  /* 2026-09-08：统一 3:4 竖版比例——横竖视频混排时卡片高度整齐（视频 contain 完整显示，黑边融入背景） */
  aspect-ratio: 3 / 4;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.lipsync-library-item-thumb video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  background: rgba(0, 0, 0, 0.4);
}
.lipsync-library-item:hover .lipsync-library-item-thumb video {
  transform: none;
}
.lipsync-library-item.is-playing .lipsync-library-item-thumb video {
  transform: none;
}

/* 播放按钮 */
.lipsync-library-item-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}
.lipsync-library-item:hover .lipsync-library-item-play,
.lipsync-library-item.is-playing .lipsync-library-item-play {
  opacity: 1;
  pointer-events: auto;
}
.lipsync-library-item-play:hover {
  background: rgba(0, 0, 0, 0.85);
}
.lipsync-library-item-play.playing {
  opacity: 1;
  pointer-events: auto;
  background: rgba(16, 185, 129, 0.85);
}

/* 放大按钮（浮空播放） */
.lipsync-library-item-enlarge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.lipsync-library-item:hover .lipsync-library-item-enlarge {
  opacity: 1;
}
.lipsync-library-item-enlarge:hover {
  background: var(--accent);
  transform: scale(1.1);
}
.lipsync-library-item-nothumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  opacity: 0.5;
}
.lipsync-library-item-dur {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.lipsync-library-item-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
}

.lipsync-library-item-info {
  padding: 6px 8px 8px;
}
.lipsync-library-item-name {
  font-size: 12px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lipsync-library-item-meta {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

/* 空状态/加载占位 */
.lipsync-library-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 16px;
  color: var(--text-3);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px dashed var(--border-2);
}

/* 分页 */
.lipsync-library-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.lipsync-library-page-info {
  font-size: 11px;
  color: var(--text-3);
}

/* 响应式：小屏单列 */
@media (max-width: 640px) {
  .lipsync-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .lipsync-library-toolbar {
    flex-wrap: wrap;
  }
  .lipsync-library-toolbar .lipsync-library-search {
    flex: 1 1 100%;
  }
}

/* ================================================================
 * 浮空视频播放器（点击放大按钮弹出）
 * ================================================================ */
.video-float-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.video-float-overlay.is-visible {
  opacity: 1;
}

.video-float-card {
  background: #0a0a0a;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  max-width: min(90vw, 960px);
  max-height: 88vh;
  width: 100%;
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-float-overlay.is-visible .video-float-card {
  transform: scale(1);
}

.video-float-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}
.video-float-title {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.video-float-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.video-float-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fff;
}

.video-float-body {
  position: relative;
  background: #000;
  flex: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video-float-body video {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}
.video-float-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-3);
  font-size: 14px;
}

.video-float-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid var(--border-2);
  flex-shrink: 0;
}
.video-float-controls button {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-1);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.video-float-controls button:hover {
  background: var(--accent);
  color: #000;
}

.vfp-time {
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}

/* 进度条 */
.vfp-progress {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  min-width: 100px;
  transition: height 0.15s ease;
}
.vfp-progress:hover {
  height: 8px;
}
.vfp-progress-buffered {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  transition: width 0.2s ease;
}
.vfp-progress-played {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.05s linear;
}
.vfp-progress-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.vfp-progress:hover .vfp-progress-thumb {
  opacity: 1;
}

/* 音量滑块 */
.vfp-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.vfp-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.vfp-volume::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.vfp-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* 响应式：小屏隐藏音量滑块 */
@media (max-width: 640px) {
  .video-float-overlay {
    padding: 0;
  }
  .video-float-card {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .vfp-volume {
    display: none;
  }
  .video-float-controls {
    gap: 6px;
    padding: 8px 10px;
  }
}

/* 素材库弹窗 */
.library-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.library-picker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.library-picker-content {
  position: relative;
  width: 90%;
  max-width: 1080px;
  max-height: 85vh;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.library-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-2);
}

.library-picker-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.library-picker-close {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 18px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.library-picker-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
}

.library-picker-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* ★ 2026-09-18 导航行上移一丢丢，滚动只发生在卡片网格区 */
  padding: 0 20px 16px;
}

.library-picker-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
  /* ★ 2026-09-18 导航行固定不参与滚动（滚动区只在下方卡片网格） */
  flex-shrink: 0;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border-2);
}

/* ★ 2026-09-18 选择器右侧操作组（选中后显示：清除选中 + 添加选中） */
.library-picker-actions {
  align-items: center;
  gap: 8px;
}

.library-picker-count {
  font-size: 13px;
  color: var(--text-2);
  margin-right: 4px;
}

/* ★ 2026-09-18 已选过：浅色半透明标识 */
.mix-picker-item.is-added {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.mix-picker-item.is-added .mix-picker-added-badge {
  position: absolute;
  right: 6px;
  top: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #9aa0b0;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
}

.library-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  /* ★ 2026-09-18 固定高度 + 强制滚动：不依赖 flex 链路，任何环境滚动条必现 */
  height: calc(85vh - 180px);
  min-height: 260px;
  overflow-y: scroll;
  padding: 12px 2px 8px;
  align-content: start;
  grid-auto-rows: max-content;
  align-items: start;
}
/* ★ 2026-09-18 滚动条常显（桌面/WebView 可见） */
.library-picker-grid::-webkit-scrollbar { width: 6px; }
.library-picker-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; }
.library-picker-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }
.library-picker-grid::-webkit-scrollbar-track { background: transparent; }
.library-picker-grid { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; }

.library-picker-item {
  position: relative;  /* ★ 2026-10-14 B1 hover 素材名浮层定位 */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

/* ★ 2026-10-15 素材铺排方式（画中画布局）选择区：六个手机图标 */
.mix-layout-picker { margin-bottom: 12px; }
.mix-layout-title { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.mix-layout-opts { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.mix-layout-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 8px 4px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.mix-layout-opt:hover { border-color: var(--text-2); }
.mix-layout-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mix-layout-opt .phone {
  position: relative;
  width: 30px; height: 52px;
  border: 2px solid var(--text-2);
  border-radius: 5px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
}
.mix-layout-opt.active .phone { border-color: var(--accent); }
.mix-layout-opt .box { position: absolute; background: var(--accent); border-radius: 2px; }
/* ★ 2026-10-15 布局图标尺寸：全屏满铺 26×48（手机内框），80/50/20 按宽高比例逐级拉开，档位一眼可辨 */
.mix-layout-opt .b-full { left: 0; top: 0; width: 26px; height: 48px; }
.mix-layout-opt .b-center80 { left: 3px; top: 5px; width: 21px; height: 38px; }
.mix-layout-opt .b-center50 { left: 6px; top: 12px; width: 13px; height: 24px; }
.mix-layout-opt .b-center20 { left: 10px; top: 19px; width: 5px; height: 10px; }
/* ★ 2026-10-15 四角实际居中在角点(向内缩进自身宽/高的一半)，非贴死角 */
.mix-layout-opt .b-tr { right: 5px; top: 5px; width: 10px; height: 10px; }
.mix-layout-opt .b-tl { left: 5px; top: 5px; width: 10px; height: 10px; }
.mix-layout-opt .b-br { right: 5px; bottom: 5px; width: 10px; height: 10px; }
.mix-layout-opt .b-bl { left: 5px; bottom: 5px; width: 10px; height: 10px; }
/* ★ 2026-10-15 素材卡片「放置方式」快捷图标排：小号手机图标，点击即切换该素材放置方式 */
.mix-card-layout-row { align-items: flex-start; }
.mix-card-layout-opts { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.mix-card-layout-opt {
  position: relative;
  padding: 2px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.12s ease;
}
.mix-card-layout-opt:hover { border-color: var(--accent); }
.mix-card-layout-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mix-card-layout-opt .phone {
  position: relative;
  display: block;
  width: 20px; height: 34px;
  border: 1px solid var(--text-2);
  border-radius: 3px;
  box-sizing: border-box;
}
.mix-card-layout-opt.active .phone { border-color: var(--accent); }
.mix-card-layout-opt .box { position: absolute; background: var(--accent); border-radius: 1px; }
.mix-card-layout-opt .b-full { left: 0; top: 0; width: 18px; height: 32px; }
.mix-card-layout-opt .b-center80 { left: 2px; top: 3px; width: 14px; height: 25px; }
.mix-card-layout-opt .b-center50 { left: 4px; top: 8px; width: 9px; height: 16px; }
.mix-card-layout-opt .b-center20 { left: 7px; top: 13px; width: 4px; height: 7px; }
.mix-card-layout-opt .b-tr { right: 3.5px; top: 3.5px; width: 7px; height: 7px; }
.mix-card-layout-opt .b-tl { left: 3.5px; top: 3.5px; width: 7px; height: 7px; }
.mix-card-layout-opt .b-br { right: 3.5px; bottom: 3.5px; width: 7px; height: 7px; }
.mix-card-layout-opt .b-bl { left: 3.5px; bottom: 3.5px; width: 7px; height: 7px; }
.mix-card-layout-opt .b-topHalf { left: 0; top: -1px; width: 18px; height: 16px; }
.mix-card-layout-opt .b-bottomHalf { left: 0; bottom: -1px; width: 18px; height: 16px; }
.mix-card-layout-opt .b-top80 { left: 0; top: -1px; width: 18px; height: 26px; }
.mix-card-layout-opt .b-bottom80 { left: 0; bottom: -1px; width: 18px; height: 26px; }

/* ★ 2026-10-15 上下铺图标：色块延伸贴手机外框顶/底(top/bottom:-2px 抵消边框)，宽度铺满，高度=屏幕 50%/80% */
.mix-layout-opt .b-topHalf { left: 0; top: -2px; width: 26px; height: 26px; }
.mix-layout-opt .b-bottomHalf { left: 0; bottom: -2px; width: 26px; height: 26px; }
.mix-layout-opt .b-top80 { left: 0; top: -2px; width: 26px; height: 42px; }
.mix-layout-opt .b-bottom80 { left: 0; bottom: -2px; width: 26px; height: 42px; }
.mix-layout-opt .lbl { font-size: 11px; color: var(--text-2); line-height: 1; }
.mix-layout-opt.active .lbl { color: var(--accent); }


.library-picker-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.library-picker-item.is-selected {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
}

.library-picker-item-thumb {
  position: relative;
  width: 100%;
  /* ★ 2026-09-18 与混剪库素材卡片一致：3:4 竖版 */
  aspect-ratio: 3 / 4;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.library-picker-item-thumb video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.library-picker-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.library-picker-item-info {
  padding: 8px 10px;
}

.library-picker-item-name {
  font-size: 13px;
  color: var(--text-1);
  /* ★ 2026-09-11 修复：长文件名不再单行截断成"..."，改为最多显示2行，内容尽量显示全 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.35;
}

.library-picker-item-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ★ 2026-10-14 B1 文件夹卡片 hover 显示素材名列表（浮层，不撑高布局） */
.library-picker-item-preview {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  padding: 8px 10px;
  background: rgba(18, 22, 38, 0.97);
  border-radius: 0 0 12px 12px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.6;
  word-break: break-all;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
.library-picker-item:hover .library-picker-item-preview {
  display: block;
}

.library-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 0;
  color: var(--text-3);
  font-size: 14px;
}

.library-picker-pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-2);
}

/* ★ 2026-09-17 混剪库添加素材多选：底部批量添加操作栏 */
.library-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-2);
}

/* 来源选择器在窄屏下改为单列 */
@media (max-width: 640px) {
  .lipsync-source-group {
    flex-direction: column;
  }
  .lipsync-source-item {
    min-width: 100%;
  }
}

/* ================================================================
 * 视频混剪（画中画叠加）步骤5 专用样式
 * ================================================================ */

/* 工作区布局:左预览 + 右控制 */
/* ★ 2026-09-14 左右等高：预览面板与素材容器对齐 */
.mix-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .mix-workspace {
    grid-template-columns: 1fr;
  }
}

/* 左侧:预览画布 */
/* ★ 2026-09-14 补常驻阴影，与字幕音乐预览面板观感统一 */
.mix-preview-panel {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
/* ★ 2026-09-14 顶部橙金渐变线（与 .wizard-card 金边一致，hover 亮起） */
.mix-preview-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.32), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.mix-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.2);
}
.mix-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mix-preview-actions {
  display: flex;
  gap: 6px;
}
/* ★ 2026-09-14 混剪预览面板 hover 浮起，与其他容器一致 */
/* ★ 2026-09-14 混剪预览面板 hover：暖橙金边 + 浮起（与其他容器一致） */
.mix-preview-panel:hover::before {
  opacity: 1;
}
.mix-preview-panel:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(249, 115, 22, 0.15) inset,
              0 0 30px rgba(249, 115, 22, 0.1);
  transform: translateY(-3px);
}

.mix-preview-canvas {
  position: relative;
  background: #000;
  /* ★ 2026-09-14 与字幕预览 .sv-preview-canvas 同一套限高规则：
     高度 max 480px（视口内自适应），宽度随比例收缩 —— 混剪预览放大，两边一致 */
  aspect-ratio: 16 / 9;
  width: auto;
  max-width: 100%;
  height: min(calc((100vw - 470px) * 9 / 16), calc(100vh - 340px), 480px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}
.mix-preview-canvas video#mix-preview-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mix-preview-overlays {
  position: absolute;
  pointer-events: none;
  /* 尺寸和位置由 JS 动态设置,对齐视频实际显示区域 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.mix-preview-overlays > .mix-preview-layer {
  pointer-events: auto;
}
.mix-preview-layer {
  position: absolute;
  border: 2px dashed transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.mix-preview-layer:hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}
.mix-preview-layer.is-selected {
  border-color: var(--accent);
  border-style: solid;
}
.mix-preview-layer video,
.mix-preview-layer img {
  width: 100%;
  height: auto;
  display: block;
}
.mix-preview-layer-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}
/* 冲突自动避让状态 */
.mix-preview-layer.is-conflict {
  border-color: rgba(239, 68, 68, 0.6);
  border-style: dashed;
}
.mix-preview-layer.is-conflict:hover {
  border-color: rgba(239, 68, 68, 0.9);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}
.mix-preview-conflict-tip {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
/* 拖拽中状态 */
.mix-preview-layer.is-dragging {
  cursor: grabbing !important;
  border-color: var(--accent) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.92;
  z-index: 999 !important;
}
/* 拖拽调整大小手柄(右下角) */
.mix-preview-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: rgba(16, 185, 129, 0.85);
  border-radius: 4px 0 0 0;
  cursor: nwse-resize;
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 3px;
  transition: background 0.15s ease;
}
.mix-preview-resize-handle::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.mix-preview-resize-handle:hover {
  background: rgba(16, 185, 129, 1);
}
.mix-preview-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-2);
  border-top: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.2);
}
.mix-preview-divider {
  opacity: 0.4;
}

/* 右侧:控制面板 */
.mix-control-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
/* ★ 2026-09-14 画中画素材容器 hover 浮起 */
/* ★ 2026-09-14 撑满右列，与预览面板等高 */
.mix-section {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
/* ★ 2026-09-14 顶部橙金渐变线（hover 亮起） */
.mix-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.32), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
/* ★ 2026-09-14 混剪素材容器 hover：暖橙金边 + 浮起 */
.mix-section:hover::before {
  opacity: 1;
}
.mix-section:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(249, 115, 22, 0.15) inset,
              0 0 30px rgba(249, 115, 22, 0.1);
  transform: translateY(-2px);
}
.mix-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.2);
}
.mix-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mix-section-count {
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* ★ 2026-10-14 快速模板可折叠：折叠态最小化贴右下角，展开态全宽贴底 */
.mix-tpl-section {
  flex: 0 0 auto;            /* 不占满剩余空间（素材区占满），内容多高就多高 */
  min-height: 0;
}
.mix-tpl-toggle {
  cursor: pointer;
  user-select: none;
}
.mix-tpl-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}
.mix-tpl-arrow {
  font-size: 12px;
  color: var(--text-2);
  transition: transform 0.2s;
}
/* 折叠态：最小化成一条标题栏（高度最小），全宽与混剪素材一致，贴面板底部 */
.mix-tpl-collapsed {
  margin-top: auto;
}
.mix-tpl-collapsed .mix-templates {
  display: none;
}
.mix-tpl-collapsed .mix-section-header {
  border-bottom: none;
}

/* 素材列表(高度由JS同步到视频画布高度,内部滚动) */
.mix-overlays-list {
  overflow-y: scroll;
  max-height: none;
  flex: 1;
  min-height: 0;
  padding: 8px 8px 16px 8px;  /* 底部多留空间避免最后卡片贴边 */
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-2);
}
.mix-overlays-list::-webkit-scrollbar { width: 8px; }
.mix-overlays-list::-webkit-scrollbar-track { background: var(--bg-2); border-radius: 4px; }
.mix-overlays-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
  border: 1px solid var(--bg-2);
}
.mix-overlays-list::-webkit-scrollbar-thumb:hover { background: #10b981; }
.mix-overlays-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-3);
  font-size: 13px;
}

/* 预设模板 */
.mix-templates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}
.mix-template-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-2);
}
.mix-template-btn:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.mix-template-icon { font-size: 20px; }
.mix-template-name { font-size: 11px; font-weight: 500; }

/* 添加按钮 */
/* ★ 2026-09-14 混剪素材按钮区：文件夹 + 手动添加 横排 */
.mix-add-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}
.mix-add-actions .mix-add-overlay-btn {
  flex: 1;
}
.mix-add-overlay-btn {
  width: 100%;
  margin-top: 8px;
  border: 1px dashed var(--border-2) !important;
  background: transparent !important;
  justify-content: center;
  padding: 10px;
}
.mix-add-overlay-btn:hover {
  border-color: var(--accent) !important;
  background: rgba(16, 185, 129, 0.05) !important;
  color: var(--accent) !important;
}

/* 时间轴卡片 */
.mix-timeline-card {
  margin-bottom: 16px;
}
.mix-timeline-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
}
/* ★ 2026-11-09 时间轴标题旁的「播放/暂停」按钮（单按钮切换 ▶/⏸，无外圈，纯图标） */
.mix-timeline-header .tl-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  border: 0;
  background: transparent;
  color: var(--text-2, #8a8aa0);
  font-size: 12px;
  line-height: 1;
  border-radius: 0;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.mix-timeline-header .tl-play-btn:hover {
  color: var(--text-1, #e6e6f0);
  transform: scale(1.12);
}
.mix-timeline-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
/* ★ 2026-09-14 字幕音乐时间轴卡片标题（复用 mix-timeline-header 样式） */
.sv-timeline-card-header {
  border-radius: 14px 14px 0 0;
}
/* ★ 2026-09-15 时间轴独立卡片：与上方"字幕类型与样式"卡片拉开间距，明确不属于该容器 */
.sv-timeline-card {
  margin-top: 18px;
}

/* ★ 2026-09-15 布局加固：字幕音乐步骤内所有卡片强制纵向全宽，
   杜绝时间轴/背景音乐/最终视频预览被旧样式挤成并排或变窄 */
#wizard-step-container .wizard-card,
#wizard-step-container .sv-timeline-card {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: none;
}
/* ★ 2026-09-14 混剪双击反馈：素材卡片高亮闪烁 */
@keyframes mixCardFlash {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(249, 115, 22, 0.45); }
}
.mix-overlay-card.mix-card-flash {
  animation: mixCardFlash 0.45s ease-in-out 2;
  border-radius: 12px;
}

/* 空状态 - 未检测到主视频 */
/* ★ 2026-09-17 统一空态提示样式：亮色橙金渐变（与口型同步「前往步骤3」提示一致，更醒目），
     视频混剪 / 字幕音乐 / 一键发布三处共用 */
.step-empty-state {
  text-align: center;
  padding: 36px 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
}
.step-empty-icon { font-size: 40px; }
.step-empty-title { font-size: 17px; font-weight: 700; color: var(--warning); }
.step-empty-desc { font-size: 13px; color: var(--text-2); max-width: 420px; }
.mix-empty-state {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mix-empty-icon { font-size: 48px; }
.mix-empty-title { font-size: 18px; font-weight: 600; color: var(--text-1); }
.mix-empty-desc { font-size: 13px; color: var(--text-3); max-width: 420px; }

/* 主视频预览卡 */
.mix-main-preview {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.mix-main-thumb {
  flex: 0 0 240px;
  aspect-ratio: 9 / 16;
  max-height: 280px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-2);
}
.mix-main-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-3);
  font-size: 14px;
}
.mix-main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.mix-main-name {
  font-size: 15px;
  color: var(--text-1);
  font-weight: 600;
  word-break: break-all;
}
.mix-main-meta {
  font-size: 13px;
  color: var(--text-2);
}
.mix-main-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.6;
}

/* 叠加素材列表(滚动样式见上方 .mix-overlays-list) */
.mix-overlays-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  border: 1px dashed var(--border-2);
  border-radius: 10px;
}
.mix-add-overlay-btn {
  width: 100%;
  padding: 14px;
  border: 2px dashed var(--border-2) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-2) !important;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.mix-add-overlay-btn:hover {
  border-color: var(--accent) !important;
  background: rgba(16, 185, 129, 0.05) !important;
  color: var(--accent) !important;
}

/* 单个画中画卡片 */
.mix-overlay-card {
  flex-shrink: 0;  /* 禁止flex压缩,保持完整高度,避免互相叠压 */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
}
.mix-overlay-card::before {
  /* 左侧色带:颜色取自 --card-color, 与时间轴条形一致 */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-color, var(--accent));
  z-index: 1;
}
/* ★ 2026-09-14 素材卡片 hover 升级为浮起 */
/* ★ 2026-09-14 素材卡片 hover：暖橙金边 */
.mix-overlay-card:hover {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(249, 115, 22, 0.12);
  transform: translateY(-2px);
}
.mix-overlay-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: mix-card-pulse 0.5s ease;
}
/* ★ 2026-10-14 A3 素材失效红标：加载失败/链接失效的卡片 */
.mix-overlay-card.mix-card-error {
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}
.mix-card-error-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 6px;
  color: #fff;
  background: rgba(239, 68, 68, 0.85);
  vertical-align: middle;
}
@keyframes mix-card-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5); }
}
.mix-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.2);
}
.mix-overlay-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mix-overlay-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.mix-overlay-icon { font-size: 16px; flex-shrink: 0; }
.mix-overlay-name {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-overlay-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.mix-overlay-remove {
  color: var(--text-3) !important;
  font-size: 14px !important;
}
.mix-overlay-remove:hover { color: var(--danger) !important; }
.mix-overlay-duplicate {
  color: var(--text-3) !important;
  font-size: 14px !important;
}
.mix-overlay-duplicate:hover { color: var(--accent) !important; }
/* 层级调整按钮(上移/下移) */
.mix-overlay-up,
.mix-overlay-down {
  color: var(--text-3) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  line-height: 1 !important;
}
.mix-overlay-up:hover,
.mix-overlay-down:hover {
  color: var(--accent) !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.mix-overlay-up:disabled,
.mix-overlay-down:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 素材预览 */
.mix-material-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  position: relative;
  cursor: pointer;
}
.mix-material-preview video,
.mix-material-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mix-material-type-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}
.mix-material-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
.mix-material-preview:hover .mix-material-play { opacity: 1; }
.mix-material-play:hover { background: var(--accent); color: #000; }
.mix-material-play.playing { opacity: 1; background: var(--accent); color: #000; }

/* 空素材占位 */
.mix-material-empty {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.mix-material-empty:hover {
  border-color: var(--accent);
  background: rgba(16, 185, 129, 0.05);
  color: var(--accent);
}
.mix-material-empty-icon { font-size: 24px; opacity: 0.6; }
.mix-material-empty-text { font-size: 11px; color: var(--text-3); }

.mix-overlay-body {
  display: flex;
  gap: 16px;
  padding: 14px;
}
.mix-overlay-material {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mix-material-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.mix-overlay-config {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mix-config-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 拖拽定位信息面板样式 */
.mix-position-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.mix-pos-indicator {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
}
.mix-pos-coord {
  color: var(--text-2);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  font-weight: 500;
}
.mix-pos-hint {
  color: var(--text-3);
  font-size: 11px;
  margin-left: auto;
  font-style: italic;
}

.mix-config-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.mix-time-row {
  display: grid;
  /* ★ 2026-10-14 开始/结束/动画 改单列竖排（一行一项，上下排列） */
  grid-template-columns: 1fr;
  gap: 8px;
}
.mix-time-field {
  display: flex;
  flex-direction: row;   /* ★ 2026-10-14 label 与输入框同一行（开始/结束/动画 三项仍各占一行上下排） */
  align-items: center;
  gap: 6px;
}
/* ★ 2026-10-14 时间字段 label 字号稍小（仅开始/结束/动画三项） */
.mix-time-field .mix-config-label {
  font-size: 11px;
  flex: 0 0 auto;
  min-width: 52px;
}
.mix-time-field .form-input {
  padding: 6px 8px;
  font-size: 12px;
  flex: 1;
  min-width: 0;
}

/* 素材裁剪信息 */
.mix-source-trim-row {
  grid-column: 1 / -1;
}
/* ★ 2026-10-14 复位到初始时间按钮（紧凑一行） */
.mix-reset-row {
  grid-column: 1 / -1;
  padding: 0 2px 2px;
}
.mix-reset-row .mix-time-reset {
  font-size: 12px;
  padding: 3px 8px;
  color: var(--text-2);
  border: 1px dashed var(--border-2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.mix-reset-row .mix-time-reset:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(16, 185, 129, 0.06);
}
.mix-source-trim-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
}
.trim-info-item {
  font-size: 12px;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 4px;
}
.trim-value {
  font-weight: 600;
  color: #10b981;
  font-variant-numeric: tabular-nums;
}
.trim-hint {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 2px;
}
.trim-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.trim-actions .trim-hint {
  flex: 1;
}
.mix-trim-reset {
  font-size: 11px;
  padding: 4px 10px;
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}
.mix-trim-reset:hover {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

/* 大小滑块 */
.mix-size-range {
  width: 100%;
  height: 6px;
  background: var(--border-2);
  border-radius: 3px;
  appearance: none;
  outline: none;
  cursor: pointer;
}
.mix-size-range::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.mix-size-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.mix-size-hint {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
}
.mix-size-hint span:nth-child(2) {
  color: var(--text-2);
}

/* 时间轴预览 */
.mix-timeline {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
}
/* 时间轴工具栏(缩放/分割/撤销重做) */
.mix-timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 8px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 6px;
}
.mix-zoom-controls,
.mix-undo-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mix-zoom-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
}
.mix-zoom-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mix-zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.mix-zoom-label {
  font-size: 11px;
  color: var(--text-3);
  min-width: 50px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mix-zoom-fit { font-size: 11px !important; }
.mix-split-btn {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--accent);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.mix-split-btn:hover {
  background: var(--accent);
  color: #fff;
}
/* 时间轴横向滚动容器(zoom后可滚动查看) */
.mix-timeline-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}
.mix-timeline-scroll::-webkit-scrollbar { height: 8px; }
.mix-timeline-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.mix-timeline-inner {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}
.mix-timeline-ruler {
  position: relative;
  height: 18px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 6px;
}
.mix-timeline-tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-3);
  padding-bottom: 2px;
  white-space: nowrap;
}
/* 首刻度(0s): 不用 -50% 居中, 避免文字左半边被容器裁掉 */
.mix-timeline-tick.is-first {
  transform: translateX(0);
}
/* 尾刻度(最后一个): 右对齐, 避免右边被裁 */
.mix-timeline-tick.is-last {
  transform: translateX(-100%);
}
.mix-timeline-tick::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--border-2);
}
/* 次刻度(只显示短竖线,无数字) */
.mix-timeline-tick-minor {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 3px;
  background: var(--border-2);
  opacity: 0.6;
  pointer-events: none;
}
.mix-timeline-track {
  position: relative;
  /* 左右 10px padding: 容纳 handle ±9px 的伸出和 box-shadow 扩散;
     上下不设 padding (避免 content-box 高度在 border-box 模式下被压缩,导致 bar 视觉微下移) */
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}
/* 轨道行背景(交替条纹) */
.mix-timeline-row {
  position: absolute;
  /* 与 bar 同一坐标系: bar 的 left/width 相对 track padding-box, row 也用 padding-box 全宽 */
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  pointer-events: none;
  transition: background 0.15s;
}
.mix-timeline-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}
.mix-timeline-row.sort-target-row {
  background: rgba(16, 185, 129, 0.2) !important;
  box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.6);
}
/* 同轨道时间重叠冲突 */
.mix-timeline-bar.is-track-conflict {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6) !important;
  outline: 1px dashed rgba(239, 68, 68, 0.8);
}
.mix-timeline-bar {
  position: absolute;
  /* 通过CSS变量驱动位置和宽度: 缩放时只改--mix-zoom,所有bar自动跟随,不重建DOM */
  left: calc(var(--mix-zoom, 50) * var(--s, 0) * 1px);
  width: max(4px, calc(var(--mix-zoom, 50) * (var(--e, 0) - var(--s, 0)) * 1px));
  max-width: none;
  min-width: 32px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  opacity: 0.9;
  cursor: grab;
  /* 仅过渡视觉效果,不过渡left/width(否则缩放时有动画延迟) */
  transition: opacity 0.15s, box-shadow 0.15s;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* 优化合成层:transform/opacity 由 GPU 处理 */
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;  /* ★ 2026-10-15 缩略图/内容不溢出条外 */
}
/* ★ 2026-10-15 时间轴素材条缩略图（素材大致内容预览；img + width:auto 保持原始宽高比，不变形不裁切）
   ★ 2026-10-15 修正2：去掉右边距与描边，画面尽量顶到素材条，不留边距
   ★ 2026-10-15 修正3：去掉 max-width，宽度完全按原始比例（防超宽图被压窄变形）
   ★ 2026-10-15 修正4：高度 22px → 28px 与时间轨道（素材条）高度一致，顶满不留上下空隙 */
.mix-bar-thumb {
  height: 28px;
  width: auto;
  margin-right: 0;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.25);
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.95;
  box-sizing: content-box;
}
.mix-timeline-bar:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.mix-timeline-bar:active { cursor: grabbing; }
/* 拖拽中状态:提升合成层,去除过渡以保证跟手 */
.mix-timeline-bar.is-dragging {
  cursor: grabbing;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: none;
  z-index: 100;
}
.mix-timeline-bar-label {
  font-size: 11px;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  flex: 1;
}
.mix-timeline-bar-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'SF Mono', 'Consolas', monospace;
  margin-left: auto;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* 左右拖拽手柄(调整素材时长) - 增大点击区域，更容易抓取 */
.mix-timeline-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  cursor: ew-resize;
  z-index: 8;
}

/* 已裁剪素材视觉指示: 斜条纹背景 */
.mix-timeline-bar.is-trimmed {
  background-image: 
    linear-gradient(180deg, 
      rgba(16, 185, 129, 0.35) calc(var(--src-start-pct, 0) * 1%), 
      rgba(16, 185, 129, 0.35) calc(var(--src-end-pct, 100) * 1%)
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 4px,
      transparent 4px,
      transparent 8px
    );
}
/* 裁剪左边缘指示 */
.mix-timeline-bar.is-trimmed::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f97316, #ea580c);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 4px rgba(249, 115, 22, 0.6);
  z-index: 2;
}
/* 裁剪右边缘指示 */
.mix-timeline-bar.is-trimmed::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f97316, #ea580c);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 4px rgba(249, 115, 22, 0.6);
  z-index: 2;
}
/* 裁剪范围视觉指示 - 源素材进度条 */
.mix-timeline-bar.is-trimmed .mix-timeline-bar-source-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}
.mix-timeline-bar.is-trimmed .mix-timeline-bar-source-indicator::before {
  content: '';
  position: absolute;
  left: calc(var(--src-start-pct, 0) * 1%);
  width: calc((var(--src-end-pct, 100) - var(--src-start-pct, 0)) * 1%);
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 2px;
}
.mix-timeline-handle-l {
  left: -9px;
  border-radius: 4px 0 0 4px;
}
.mix-timeline-handle-r {
  right: -9px;
  border-radius: 0 4px 4px 0;
}
.mix-timeline-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 18px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity 0.15s, height 0.15s, background 0.15s, width 0.15s;
}
.mix-timeline-handle:hover::before {
  opacity: 1;
  height: 24px;
  width: 6px;
  background: #10b981;
}
.mix-timeline-bar:hover .mix-timeline-handle::before { opacity: 0.95; }
.mix-timeline-handle:hover {
  background: rgba(16, 185, 129, 0.25);
}
/* bar边缘hover时显示可拖拽指示 */
.mix-timeline-bar:hover .mix-timeline-handle-l::after,
.mix-timeline-bar:hover .mix-timeline-handle-r::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(16, 185, 129, 0.5);
  border-radius: 2px;
}
.mix-timeline-bar:hover .mix-timeline-handle-l::after { left: 50%; transform: translateX(-50%); }
.mix-timeline-bar:hover .mix-timeline-handle-r::after { left: 50%; transform: translateX(-50%); }
/* 播放游标 */
.mix-timeline-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.4);
  pointer-events: auto;
  cursor: ew-resize;
  z-index: 10;
  display: none;
}
.mix-timeline-cursor::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}
.mix-timeline-cursor:hover::before,
.mix-timeline-cursor.dragging::before {
  transform: rotate(-45deg) scale(1.25);
  background: var(--accent);
}
/* 操作提示 */
.mix-timeline-legend-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
}
/* 标尺可点击+可拖动 */
.mix-timeline-ruler {
  cursor: pointer;
  user-select: none;
}
.mix-timeline-ruler.is-scrubbing {
  cursor: ew-resize;
  background: rgba(16, 185, 129, 0.08);
}
.mix-timeline-main.is-scrubbing {
  cursor: ew-resize;
  box-shadow: 0 0 0 2px var(--accent);
}

/* 主视频缩略图帧带 */
.mix-timeline-main {
  position: relative;
  height: 36px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 4px;
}
.mix-timeline-main::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
}
.mix-mainframes {
  position: absolute;
  inset: 0;
}
.mix-mainframe {
  position: absolute;
  top: 0;
  bottom: 0;
  /* 通过CSS变量驱动位置/宽度: 缩放时自动跟随,不重建DOM */
  left: calc(var(--mix-zoom, 50) * var(--t, 0) * 1px);
  width: calc(var(--mix-zoom, 50) * var(--step, 10) * 1px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.mix-mainframe:last-child { border-right: none; }
.mix-timeline-main-label {
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 轨道拖拽手柄(前后平移+上下切换轨道) - 放在bar内部左上角 */
.mix-track-drag-handle {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  cursor: grab;   /* ★ 2026-09-16 整列拖拽: 与轨道行统一为手型 */
  z-index: 4;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
.mix-track-drag-handle::before,
.mix-track-drag-handle::after {
  display: none;  /* 内部小圆点不需要条纹 */
}
.mix-timeline-bar:hover .mix-track-drag-handle {
  opacity: 1;
  background: rgba(16, 185, 129, 0.6);
}
.mix-track-drag-handle:hover {
  background: rgba(16, 185, 129, 0.9) !important;
  opacity: 1 !important;
}

/* 拖拽排序中状态 */
.mix-timeline-bar.is-sorting {
  opacity: 0.85;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--accent) !important;
  cursor: ns-resize;
}
.mix-timeline-bar.sort-target {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
/* 选中态高亮(bar联动) */
.mix-timeline-bar.is-selected {
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(16, 185, 129, 0.4) !important;
  opacity: 1 !important;
}

/* 时间轴条形上的快速删除按钮 */
.mix-tl-del {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 4;
  pointer-events: auto;
}
.mix-timeline-bar:hover .mix-tl-del { opacity: 0.85; }
.mix-tl-del:hover {
  background: rgba(239, 68, 68, 0.95) !important;
  opacity: 1 !important;
}

/* 游标时间码 */
.mix-timeline-cursor-time {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937;
  font-size: 10px;
  font-family: 'SF Mono', 'Consolas', monospace;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 磁吸对齐线(垂直贯穿主轴+轨道) */
.mix-timeline-snap-line {
  position: absolute;
  top: -42px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 20px rgba(251, 191, 36, 0.4);
  pointer-events: none;
  z-index: 9;
  display: none;
  animation: snapLinePulse 0.6s ease-in-out infinite alternate;
}
@keyframes snapLinePulse {
  from { opacity: 0.8; }
  to { opacity: 1; }
}
.mix-timeline-snap-line::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
}
.mix-timeline-snap-line::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

/* 时间轴背景网格 */
.mix-timeline-track {
  background-image: 
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: calc(var(--mix-zoom, 50) * 10px) 100%;
}

/* 播放头时间标签优化 */
.mix-timeline-cursor-time {
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
  animation: cursorTimePop 0.15s ease-out;
}
@keyframes cursorTimePop {
  from { transform: translateX(-50%) scale(0.8); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* 拖拽时间tooltip(跟随鼠标) */
.mix-timeline-tooltip {
  position: fixed;
  background: rgba(17, 24, 39, 0.95);
  color: #fff;
  font-size: 11px;
  font-family: 'SF Mono', 'Consolas', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.mix-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-2);
}
.mix-timeline-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
}
.mix-timeline-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* 时间轴主体布局（左侧标签列 + 右侧滚动区） */
.mix-timeline-body {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.mix-timeline-labels {
  position: relative;
  width: 120px;
  min-width: 120px;
  padding: 0 8px 0 0;
  border-right: 1px solid var(--border-2);
  margin-right: 4px;
}

.mix-timeline-labels-header {
  height: 18px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  line-height: 18px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 6px;
}

.mix-timeline-label {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  overflow: hidden;
  cursor: default;
  white-space: nowrap;
}

.mix-timeline-label:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mix-timeline-label-main {
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.02);
  font-weight: 500;
}

/* ★ 2026-09-16 混剪轨道列: 整列可拖(悬停变手型) + 拖拽高亮 + 让位过渡动画(参考字幕音乐轨道) */
.mix-timeline-label:not(.mix-timeline-label-main) { cursor: grab; }
.mix-timeline-label:not(.mix-timeline-label-main):active { cursor: grabbing; }
.mix-timeline-label:hover:not(.mix-timeline-label-main) {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.35);
}
.mix-timeline-label.is-sorting {
  background: rgba(99, 102, 241, 0.28) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.6), 0 0 12px rgba(99, 102, 241, 0.4) !important;
  z-index: 100;
  cursor: grabbing;
}
.mix-timeline-bar.is-sorting {
  opacity: 0.95;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.7), 0 4px 14px rgba(99, 102, 241, 0.45) !important;
  cursor: grabbing;
}
.mix-track-reorder {
  transition: top 0.16s ease !important;
}

.mix-timeline-label-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  background: var(--bg-3);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-1);
}

.mix-timeline-label-icon {
  font-size: 12px;
  line-height: 1;
}

.mix-timeline-label-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 结果区域 */
.mix-result-progress {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mix-result-progress .mix-result-actions {
  width: 100%;
  justify-content: center;
}
.mix-progress-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--p, 0%), rgba(255, 255, 255, 0.08) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mix-progress-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--bg-1);
  border-radius: 50%;
}
.mix-progress-percent {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.mix-progress-stage {
  font-size: 13px;
  color: var(--text-2);
}
.mix-progress-bar {
  width: 100%;
  max-width: 320px;
  height: 6px;
  background: var(--border-2);
  border-radius: 3px;
  overflow: hidden;
}
.mix-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #34d399);
  transition: width 0.3s ease;
}

/* 混剪结果查看器 */
.mix-result-viewer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mix-viewer-container {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.mix-viewer-container:fullscreen {
  max-height: 100vh;
  border-radius: 0;
}

.mix-viewer-video {
  max-width: 100%;
  max-height: none;
  display: block;
  cursor: pointer;
}

.mix-viewer-container:fullscreen .mix-viewer-video {
  max-height: 100vh;
}

/* 自定义控制层 */
.mix-viewer-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6), transparent);
  padding: 40px 16px 12px;
  opacity: 1;
  transition: opacity 0.3s;
}

.mix-viewer-container:not(:hover) .mix-viewer-controls {
  opacity: 0;
}

.mix-viewer-container:fullscreen:not(:hover) .mix-viewer-controls {
  opacity: 1;
}

/* 进度条 */
.mix-viewer-progress {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: height 0.2s;
}

.mix-viewer-progress:hover {
  height: 6px;
}

.mix-viewer-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transition: width 0.1s;
}

.mix-viewer-progress-played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 2px;
  transition: width 0.1s;
}

.mix-viewer-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--accent, #6366f1);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
  opacity: 0;
  transition: opacity 0.2s, left 0.1s;
}

.mix-viewer-progress:hover .mix-viewer-progress-thumb {
  opacity: 1;
}

/* 控制按钮行 */
.mix-viewer-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.mix-control-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}

.mix-control-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.mix-icon-play, .mix-icon-pause {
  font-size: 14px;
}

.mix-viewer-volume {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mix-volume-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}

.mix-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.mix-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.mix-viewer-time {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.9);
}

.mix-viewer-info-inline {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  gap: 4px;
}

/* 信息面板 */
.mix-viewer-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mix-info-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 16px;
}

.mix-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-2);
}

.mix-info-icon {
  font-size: 18px;
}

.mix-info-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}

.mix-info-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-radius: 4px;
  font-weight: 500;
}

.mix-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mix-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mix-info-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mix-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mix-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mix-result-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
}

.mix-result-failed {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mix-result-failed .mix-result-actions {
  width: 100%;
  justify-content: center;
}
.mix-result-failed-icon { font-size: 36px; }
.mix-result-failed-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--danger);
}
.mix-result-failed-msg {
  font-size: 12px;
  color: var(--text-3);
  max-width: 480px;
  line-height: 1.6;
}

.mix-result-empty {
  text-align: center;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mix-result-empty-icon { font-size: 40px; opacity: 0.6; }
.mix-result-empty-text {
  font-size: 13px;
  color: var(--text-3);
  max-width: 360px;
  line-height: 1.6;
}

/* 素材库选择器 tab */
.mix-picker-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 4px;
}
.mix-picker-tab {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.mix-picker-tab:hover { color: var(--text-1); }
.mix-picker-tab.is-active {
  background: var(--accent);
  color: #fff;
}
/* 2026-09-11 画中画素材选择器：缩略图容器 16:9 → 3:4（与素材库/口型库一致）
   原因：竖屏素材(9:16)在 16:9 容器 contain 后只剩中间窄条+大片黑边，画面"显示不全/大小不一"；
   3:4 容器下竖屏画面更高更大、横屏画面完整显示，长宽均可见 */
.mix-picker-item .library-picker-item-thumb {
  /* ★ 2026-09-18 与混剪库素材卡片一致：3:4 竖版；height:0+padding-top 保证任何情况下 3:4 都生效 */
  aspect-ratio: 3 / 4;
  height: 0;
  padding-top: 133.3333%;
  background: #000;
}
.mix-picker-item .library-picker-item-thumb video,
.mix-picker-item .library-picker-item-thumb img {
  object-fit: contain;
  background: #000;
}
/* ★ 2026-09-18 加固：thumb-video-wrap 绝对覆盖，防止 wrap 撑破 3:4 比例 */
.mix-picker-item .thumb-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.mix-picker-item .thumb-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.mix-picker-item .mix-picker-type-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* 混剪响应式 */
@media (max-width: 768px) {
  .mix-overlay-body { flex-direction: column; }
  .mix-overlay-material { flex: none; flex-direction: row; align-items: center; }
  .mix-material-preview, .mix-material-empty { width: 100px; aspect-ratio: 1; flex-shrink: 0; }
  .mix-material-actions { flex-direction: row; flex: 1; }
  /* 开始/结束/动画 保持单列竖排（与默认一致） */
  .mix-main-preview { flex-direction: column; }
  .mix-main-thumb { flex: none; width: 100%; max-width: 280px; margin: 0 auto; }
}

.wizard-card textarea:focus,
.wizard-card input:focus,
.wizard-card select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.wizard-card textarea {
  font-family: inherit;
}

/* ===== 工具类 ===== */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-2 { color: var(--text-2); font-size: 13px; }
.empty {
  text-align: center; padding: 60px 20px; color: var(--text-3);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }

/* ===== 管理后台布局 ===== */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 60px);
  gap: 0;
}
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(17, 17, 24, 0.98) 0%, rgba(26, 26, 36, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2);
}
.admin-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
              radial-gradient(ellipse at bottom, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.admin-sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 1;
}
.admin-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-sidebar-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.admin-sidebar-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.3px;
}
.admin-sidebar-nav {
  flex: 1;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: scroll;
  position: relative;
  z-index: 1;
}
.admin-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-sidebar-group-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px 4px;
}
.admin-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.admin-sidebar-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 0 3px 3px 0;
  transition: height 0.25s;
}
.admin-sidebar-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--text-1);
  transform: translateX(2px);
}
.admin-sidebar-item:hover::before {
  height: 60%;
}
.admin-sidebar-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12));
  color: var(--accent-light);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}
.admin-sidebar-item.active::before {
  height: 70%;
}
.admin-sidebar-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.admin-sidebar-label {
  flex: 1;
  text-align: left;
}

.admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.95) 0%, rgba(10, 10, 15, 0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.admin-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-header-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-0);
  margin: 0;
  letter-spacing: -0.5px;
}
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.admin-header-time {
  font-size: 13px;
  color: var(--text-3);
  font-family: 'SF Mono', Monaco, monospace;
}
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.admin-breadcrumb-item {
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.2s;
}
.admin-breadcrumb-item:hover {
  color: var(--accent-light);
}
.admin-breadcrumb-item.active {
  color: var(--text-0);
  font-weight: 600;
}
.admin-breadcrumb-sep {
  color: var(--text-4);
}
.admin-search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s;
  min-width: 220px;
}
.admin-search-box:focus-within {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}
.admin-search-input {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-1);
  padding: 8px 10px;
  flex: 1;
}
.admin-search-input::placeholder {
  color: var(--text-4);
}
.admin-search-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-3);
  transition: all 0.2s;
}
.admin-search-btn:hover {
  color: var(--accent-light);
}

.admin-content {
  flex: 1;
  padding: 32px;
  overflow-y: scroll;
  background: var(--bg-0);
}

.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-3);
}
.admin-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.admin-card-animate {
  animation: slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-card-animate:nth-child(1) { animation-delay: 0.05s; }
.admin-card-animate:nth-child(2) { animation-delay: 0.1s; }
.admin-card-animate:nth-child(3) { animation-delay: 0.15s; }
.admin-card-animate:nth-child(4) { animation-delay: 0.2s; }
.admin-card-animate:nth-child(5) { animation-delay: 0.25s; }
.admin-card-animate:nth-child(6) { animation-delay: 0.3s; }
.admin-status-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}
.admin-status-dot.online { 
  background: var(--success); 
  box-shadow: 0 0 12px var(--success);
  animation: pulse-glow 2s ease-in-out infinite;
}
.admin-status-dot.offline { 
  background: var(--text-4); 
}
.admin-status-dot.warning { 
  background: var(--warning); 
  box-shadow: 0 0 12px var(--warning);
  animation: pulse-glow 1.5s ease-in-out infinite;
}
.admin-status-dot.danger { 
  background: var(--danger); 
  box-shadow: 0 0 12px var(--danger);
  animation: pulse-glow 1s ease-in-out infinite;
}

/* ===== 管理后台仪表盘样式 ===== */
.admin-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}
.admin-dashboard-card {
  background: linear-gradient(145deg, rgba(26, 26, 36, 0.8) 0%, rgba(17, 17, 24, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-dashboard-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
}
.admin-dashboard-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.1);
}
.admin-dashboard-card:hover::before {
  opacity: 1;
}
.admin-dashboard-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.admin-dashboard-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.admin-dashboard-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}
.admin-dashboard-icon {
  font-size: 20px;
}
.admin-dashboard-value {
  font-size: 42px;
  font-weight: 800;
  color: var(--text-0);
  line-height: 1.1;
  letter-spacing: -1.5px;
  position: relative;
  z-index: 1;
}
.admin-dashboard-value.accent { color: var(--accent-light); }
.admin-dashboard-value.success { color: var(--success); }
.admin-dashboard-value.warning { color: var(--warning); }
.admin-dashboard-value.danger { color: var(--danger); }
.admin-dashboard-change {
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.admin-dashboard-change.up { color: var(--success); }
.admin-dashboard-change.down { color: var(--danger); }

.admin-chart-card {
  background: linear-gradient(145deg, rgba(26, 26, 36, 0.8) 0%, rgba(17, 17, 24, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 24px;
}
.admin-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.admin-chart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
}
.admin-chart-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 160px;
  padding: 20px 0;
  position: relative;
}
.admin-chart-bar::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.admin-chart-item {
  flex: 1;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%);
  border-radius: 8px 8px 0 0;
  position: relative;
  min-height: 8px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}
.admin-chart-item:hover {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
  transform: scaleY(1.05);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}
.admin-chart-item::after {
  content: attr(data-value);
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  opacity: 0;
  transition: all 0.25s;
  background: rgba(17, 17, 24, 0.9);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-chart-item:hover::after {
  opacity: 1;
  top: -36px;
}
.admin-chart-labels {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.admin-chart-label {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.admin-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.admin-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-tab:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
}
.admin-tab.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(145deg, rgba(26, 26, 36, 0.9) 0%, rgba(17, 17, 24, 0.95) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.admin-table th {
  background: linear-gradient(180deg, rgba(37, 37, 48, 0.9) 0%, rgba(26, 26, 36, 0.8) 100%);
  padding: 18px 24px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.admin-table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}
.admin-table td {
  padding: 16px 24px;
  font-size: 14px;
  color: var(--text-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-table tbody tr {
  transition: all 0.25s;
}
.admin-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.06);
  transform: translateY(-1px);
}
.admin-table tbody tr:hover td {
  color: var(--text-0);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* ===== 任务列表下拉菜单样式 ===== */
.retry-dropdown button {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.retry-dropdown button:hover {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: var(--accent) !important;
}
.retry-dropdown button:active {
  background-color: rgba(99, 102, 241, 0.25) !important;
  transform: scale(0.98);
}
.retry-dropdown button:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.admin-status-dot.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
.admin-status-dot.offline { background: var(--text-4); }
.admin-status-dot.warning { background: var(--warning); box-shadow: 0 0 8px var(--warning); }

.admin-error-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.admin-error-card:hover {
  border-color: var(--danger);
  transform: translateY(-1px);
}
.admin-error-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(239, 68, 68, 0.06);
  border-bottom: 1px solid var(--border);
}
.admin-error-type {
  font-weight: 600;
  color: var(--text-0);
}
.admin-error-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--danger);
}
.admin-error-percent-bar {
  height: 4px;
  background: var(--bg-3);
}
.admin-error-percent-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--warning));
  transition: width 0.5s;
}
.admin-error-detail {
  padding: 14px 16px;
}
.admin-error-example {
  font-family: monospace;
  font-size: 12px;
  color: var(--danger);
  padding: 10px;
  background: var(--bg-2);
  border-radius: 6px;
  max-height: 80px;
  overflow-y: scroll;
  margin-bottom: 10px;
}
.admin-error-tasks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-error-task-btn {
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}
.admin-error-task-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-log-container {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  max-height: 500px;
  overflow-y: scroll;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.admin-log-line {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.admin-log-line.error { color: var(--danger); }
.admin-log-line.warning { color: var(--warning); }
.admin-log-line.info { color: var(--success); }
.admin-log-line.debug { color: var(--info); }

.admin-worker-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.admin-worker-card.online {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.04);
}
.admin-worker-card.offline {
  opacity: 0.5;
}
.admin-worker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.admin-worker-id {
  font-weight: 600;
  color: var(--text-0);
}
.admin-worker-status {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.admin-worker-status.online {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}
.admin-worker-status.offline {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-3);
}
.admin-worker-metrics {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.admin-vram-bar {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.admin-vram-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.admin-vram-fill.low { background: var(--success); }
.admin-vram-fill.medium { background: var(--warning); }
.admin-vram-fill.high { background: var(--danger); }

/* 流水线步骤 */
.admin-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-pipeline-step {
  display: flex;
  gap: 12px;
  min-height: 48px;
}
.admin-pipeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.admin-pipeline-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--bg-2);
  border: 2px solid var(--border);
  flex-shrink: 0;
  z-index: 1;
}
.admin-pipeline-step.success .admin-pipeline-icon { border-color: var(--success); background: rgba(16,185,129,0.1); }
.admin-pipeline-step.processing .admin-pipeline-icon { border-color: var(--warning); background: rgba(245,158,11,0.1); animation: pulse 1.5s infinite; }
.admin-pipeline-step.failed .admin-pipeline-icon { border-color: var(--danger); background: rgba(239,68,68,0.1); }
.admin-pipeline-step.pending .admin-pipeline-icon { border-color: var(--text-4); opacity: 0.5; }
.admin-pipeline-line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: var(--border);
  margin: 4px 0;
}
.admin-pipeline-step.success .admin-pipeline-line { background: var(--success); }
.admin-pipeline-step.failed .admin-pipeline-line { background: var(--danger); }
.admin-pipeline-content {
  flex: 1;
  padding-bottom: 16px;
}
.admin-pipeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-pipeline-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.admin-pipeline-status {
  font-size: 12px;
  font-weight: 500;
}
.admin-pipeline-cost {
  font-size: 12px;
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-2);
}
.admin-pipeline-time {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}
.admin-pipeline-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(239,68,68,0.08);
  border-radius: 6px;
  border-left: 3px solid var(--danger);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Worker 统计卡片 */
.admin-worker-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.admin-worker-stat-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  text-align: center;
  transition: all 0.3s;
}
.admin-worker-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.admin-worker-stat-value {
  font-size: 24px;
  font-weight: 700;
}
.admin-worker-stat-value.success { color: var(--success); }
.admin-worker-stat-value.danger { color: var(--danger); }
.admin-worker-stat-value.warning { color: var(--warning); }
.admin-worker-stat-value.accent { color: var(--accent); }
.admin-worker-stat-label {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

.admin-health-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s;
}
.admin-health-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
}
.admin-health-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.admin-health-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
}
.admin-health-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.admin-health-status.ok {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}
.admin-health-status.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}
.admin-health-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}
.admin-health-details {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.8;
}

.admin-alarm-item {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s;
}
.admin-alarm-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.admin-alarm-item.error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.04);
}
.admin-alarm-item.warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.04);
}
.admin-alarm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-alarm-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.admin-alarm-icon.error {
  background: rgba(239, 68, 68, 0.15);
}
.admin-alarm-icon.warning {
  background: rgba(245, 158, 11, 0.15);
}
.admin-alarm-level {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.admin-alarm-level.error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}
.admin-alarm-level.warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}
.admin-alarm-message {
  font-size: 14px;
  color: var(--text-0);
  margin-bottom: 8px;
}
.admin-alarm-meta {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-ops-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}
.admin-ops-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 16px;
}
.admin-ops-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-ops-info {
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 12px;
}
.admin-ops-info.info {
  background: var(--bg-2);
  color: var(--text-3);
}
.admin-ops-info.warning {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}
.admin-ops-info.danger {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s;
}
.admin-stat-card:hover {
  border-color: var(--accent);
}
.admin-stat-value {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
}
.admin-stat-label {
  font-size: 12px;
  color: var(--text-3);
}

/* ===== 管理后台增强优化 ===== */
/* 亮色主题适配 - 让硬编码的暗色背景跟随主题变量 */
:root[data-theme="light"] .admin-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 250, 0.95) 100%);
  border-right-color: rgba(0, 0, 0, 0.06);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .admin-sidebar::before {
  background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
              radial-gradient(ellipse at bottom, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
}
:root[data-theme="light"] .admin-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 250, 0.85) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .admin-content {
  background: var(--bg-0);
}
:root[data-theme="light"] .admin-dashboard-card,
:root[data-theme="light"] .admin-chart-card,
:root[data-theme="light"] .admin-table {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .admin-table th {
  background: linear-gradient(180deg, rgba(238, 238, 245, 0.9) 0%, rgba(229, 229, 236, 0.8) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .admin-table td {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .admin-search-box {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .admin-tabs {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

/* 自定义滚动条 - 始终占位，透明度切换 */
.admin-sidebar-nav,
.admin-content,
.admin-log-container {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.admin-sidebar-nav::-webkit-scrollbar,
.admin-content::-webkit-scrollbar,
.admin-log-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}

.admin-sidebar-nav::-webkit-scrollbar-track,
.admin-content::-webkit-scrollbar-track,
.admin-log-container::-webkit-scrollbar-track {
  background: transparent;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb,
.admin-content::-webkit-scrollbar-thumb,
.admin-log-container::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.admin-sidebar-nav:hover,
.admin-content:hover,
.admin-log-container:hover {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.admin-sidebar-nav:hover::-webkit-scrollbar-thumb,
.admin-content:hover::-webkit-scrollbar-thumb,
.admin-log-container:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

.admin-sidebar-nav:hover::-webkit-scrollbar-thumb:hover,
.admin-content:hover::-webkit-scrollbar-thumb:hover,
.admin-log-container:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.35);
}
:root[data-theme="light"] .admin-sidebar-nav:hover::-webkit-scrollbar-thumb,
:root[data-theme="light"] .admin-content:hover::-webkit-scrollbar-thumb,
:root[data-theme="light"] .admin-log-container:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

/* 可访问性 - 键盘焦点状态 */
.admin-sidebar-item:focus-visible,
.admin-tab:focus-visible,
.admin-breadcrumb-item:focus-visible,
.admin-search-btn:focus-visible,
.admin-search-input:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* 无障碍 - 减弱动画支持 */
@media (prefers-reduced-motion: reduce) {
  .admin-card-animate,
  .admin-dashboard-card,
  .admin-chart-item,
  .admin-status-dot.online,
  .admin-status-dot.warning,
  .admin-status-dot.danger,
  .admin-pipeline-step.processing .admin-pipeline-icon {
    animation: none !important;
    transition: none !important;
  }
  .admin-dashboard-card:hover,
  .admin-chart-item:hover,
  .admin-table tbody tr:hover {
    transform: none !important;
  }
}

/* 骨架屏加载 - 替代旋转 spinner，视觉更流畅 */
.admin-skeleton {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.admin-skeleton-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  height: 140px;
  position: relative;
  overflow: hidden;
}
.admin-skeleton-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
:root[data-theme="light"] .admin-skeleton-card::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
}
.admin-skeleton-line {
  height: 12px;
  background: var(--bg-3);
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.admin-skeleton-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
:root[data-theme="light"] .admin-skeleton-line::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}
.admin-skeleton-line.short { width: 40%; }
.admin-skeleton-line.medium { width: 70%; }
.admin-skeleton-line.long { width: 90%; }
.admin-skeleton-value {
  height: 36px;
  width: 60%;
  background: var(--bg-3);
  border-radius: 6px;
  margin: 14px 0 8px;
  position: relative;
  overflow: hidden;
}
.admin-skeleton-value::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 提取常用内联样式为类 - 队列项 */
.admin-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  transition: all 0.2s;
}
.admin-queue-item:hover {
  transform: translateX(2px);
  background: rgba(99, 102, 241, 0.12);
}
.admin-queue-item.warning { background: rgba(245, 158, 11, 0.08); }
.admin-queue-item.warning:hover { background: rgba(245, 158, 11, 0.12); }
.admin-queue-item.success { background: rgba(16, 185, 129, 0.08); }
.admin-queue-item.success:hover { background: rgba(16, 185, 129, 0.12); }
.admin-queue-item.neutral { background: rgba(148, 163, 184, 0.08); }
.admin-queue-item.neutral:hover { background: rgba(148, 163, 184, 0.12); }
.admin-queue-item-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-queue-item-icon { font-size: 16px; }
.admin-queue-item-label {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.admin-queue-item-value {
  font-size: 20px;
  font-weight: 700;
}
.admin-queue-item-value.warning { color: var(--warning); }
.admin-queue-item-value.accent { color: var(--accent-light); }
.admin-queue-item-value.success { color: var(--success); }
.admin-queue-item-value.neutral { color: var(--text-2); }

/* 状态分布条 - 提取自内联样式 */
.admin-status-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-status-bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-status-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.admin-status-bar-label {
  color: var(--text-2);
  font-weight: 500;
}
.admin-status-bar-value {
  color: var(--text-3);
}
.admin-status-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
:root[data-theme="light"] .admin-status-bar-track {
  background: rgba(0, 0, 0, 0.05);
}
.admin-status-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-status-bar-fill.warning { background: var(--warning); }
.admin-status-bar-fill.info { background: var(--info); }
.admin-status-bar-fill.success { background: var(--success); }
.admin-status-bar-fill.danger { background: var(--danger); }
.admin-status-bar-fill.neutral { background: var(--text-4); }
.admin-status-bar-fill.accent { background: var(--accent); }

/* 阶段耗时项 - 提取自内联样式 */
.admin-stage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
:root[data-theme="light"] .admin-stage-row {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
.admin-stage-name {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.admin-stage-cost {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
}

/* 资源指标条 - 6px 进度条（用于 CPU/内存/磁盘/GPU 等监控） */
.admin-metric-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.admin-metric-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-metric-bar-fill.success { background: var(--success); }
.admin-metric-bar-fill.warning { background: var(--warning); }
.admin-metric-bar-fill.danger { background: var(--danger); }
.admin-metric-bar-fill.accent { background: var(--accent); }
.admin-metric-info {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* 资源监控头部 - 实时状态指示 */
.admin-resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.admin-resource-header-text {
  font-size: 12px;
  color: var(--text-3);
}
.admin-resource-header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
}

/* 服务状态卡片 */
.admin-service-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.25s;
}
.admin-service-card.healthy {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.2);
}
.admin-service-card.unhealthy {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}
.admin-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.admin-service-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.admin-service-msg {
  font-size: 12px;
  color: var(--text-3);
}

/* GPU 状态卡片 */
.admin-gpu-card {
  padding: 20px;
  background: var(--bg-2);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.25s;
}
.admin-gpu-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.admin-gpu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.admin-gpu-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.admin-gpu-temp {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.admin-gpu-temp.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.admin-gpu-temp.warning { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.admin-gpu-temp.danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.admin-gpu-metric {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}
.admin-gpu-metric-label { color: var(--text-3); }
.admin-gpu-metric-value { font-weight: 600; }
.admin-gpu-metric-value.success { color: var(--success); }
.admin-gpu-metric-value.warning { color: var(--warning); }
.admin-gpu-metric-value.danger { color: var(--danger); }
.admin-gpu-metric-section { margin-bottom: 12px; }
.admin-gpu-metric-section:last-child { margin-bottom: 0; }

/* 任务步骤徽章 - 用于任务列表的当前步骤显示 */
.admin-step-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

/* 任务类型标签 - 用于任务列表的任务类型显示 */
.admin-task-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* 任务进度条 - 复用指标条样式 */
.admin-task-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-task-progress-bar {
  flex: 1;
  min-width: 50px;
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.admin-task-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-task-progress-fill.success { background: var(--success); }
.admin-task-progress-fill.warning { background: var(--warning); }
.admin-task-progress-fill.danger { background: var(--danger); }
.admin-task-progress-fill.neutral { background: var(--text-4); }
.admin-task-progress-text {
  font-size: 11px;
  color: var(--text-3);
  min-width: 28px;
}

/* 任务操作列多行显示 */
.admin-task-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: stretch !important;
  width: 100%;
}
.admin-task-actions > button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* 任务ID 等宽显示 */
.admin-mono {
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 12px;
}
.admin-task-id-cell {
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 10px;
  line-height: 1.3;
  white-space: pre-line;
  word-break: break-all;
  color: var(--text-2);
  width: 100px;
  min-width: 100px;
  max-width: 120px;
  padding: 6px 10px;
  vertical-align: middle;
}
.admin-text-muted {
  font-size: 12px;
  color: var(--text-3);
}

/* 筛选工具栏 - 管理后台任务列表 */
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.admin-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 移动端侧边栏切换按钮 */
.admin-sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-sidebar-toggle:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--accent);
}

/* 响应式 - 平板适配 */
@media (max-width: 1024px) {
  .admin-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.3);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-sidebar-toggle {
    display: inline-flex;
  }
  /* 侧边栏遮罩 */
  .admin-sidebar-overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 89;
    backdrop-filter: blur(2px);
  }
  .admin-sidebar-overlay.show {
    display: block;
    animation: fade-in 0.2s;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .admin-content {
    padding: 20px;
  }
  .admin-header {
    padding: 16px 20px;
  }
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* 响应式 - 手机适配增强 */
@media (max-width: 768px) {
  .admin-header-right {
    gap: 8px;
  }
  .admin-search-box {
    min-width: 140px;
    padding: 4px 10px;
  }
  .admin-search-input {
    padding: 6px 6px;
    font-size: 13px;
  }
  .admin-header-title {
    font-size: 20px;
  }
  .admin-breadcrumb {
    font-size: 12px;
  }
  .admin-header-time {
    display: none;
  }
  .admin-dashboard {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .admin-dashboard-card {
    padding: 14px;
  }
  .admin-dashboard-value {
    font-size: 24px;
  }
  .admin-dashboard-icon-wrap {
    width: 36px;
    height: 36px;
  }
  .admin-chart-card {
    padding: 16px;
  }
  .admin-table {
    font-size: 13px;
  }
  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
  }
  .admin-content {
    padding: 14px;
  }
}

/* 打印样式 - 方便运维导出报告 */
@media print {
  .topbar,
  .admin-sidebar,
  .admin-sidebar-toggle,
  .admin-sidebar-overlay,
  .admin-header-right,
  .admin-search-box,
  #admin-refresh {
    display: none !important;
  }
  .admin-layout {
    display: block;
  }
  .admin-main {
    overflow: visible;
  }
  .admin-content {
    overflow: visible;
    padding: 0;
  }
  .admin-dashboard-card,
  .admin-chart-card,
  .admin-table {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body::before {
    display: none;
  }
}

.wizard-subtitle-preview {
  padding: 12px;
  background: var(--bg-2);
  border-radius: 10px;
  max-height: 320px;
  overflow-y: scroll;
  border: 1px solid var(--border);
}
.wizard-subtitle-sample {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.wizard-subtitle-line {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s, transform 0.15s;
  border-radius: 6px;
  align-items: flex-start;
}
.wizard-subtitle-line:hover {
  background: rgba(99, 102, 241, 0.08);
  transform: translateX(2px);
}
.wizard-subtitle-line:last-child {
  border-bottom: none;
}
.wizard-subtitle-time {
  font-family: 'Consolas', 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  min-width: 88px;
  flex-shrink: 0;
  padding: 3px 6px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
  text-align: center;
  line-height: 1;
}
.wizard-subtitle-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.6;
  flex: 1;
  word-break: break-word;
}

/* ===== BGM 开关样式 ===== */
.wizard-bgm-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 12px;
}
.wizard-bgm-toggle:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06));
}
.wizard-bgm-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.wizard-bgm-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}
.wizard-bgm-toggle-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
}
/* ★ 2026-10-14 背景音乐启用勾选：与标题同行靠右、无提示文字 */
.wizard-bgm-toggle-inline {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.08);
  transition: all 0.2s;
}
.wizard-bgm-toggle-inline:hover {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.14);
}
.wizard-bgm-toggle-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.wizard-bgm-toggle-inline .wizard-bgm-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

/* ===== BGM 音乐库浏览 ===== */
.bgm-selected-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 8px;
  margin-bottom: 10px;
  min-height: 34px;
  transition: all 0.25s;
  flex-wrap: wrap;
}
.bgm-selected-bar:hover { border-color: rgba(99, 102, 241, 0.4); }
.bgm-selected-bar.has-selection {
  padding: 7px 12px;
  align-items: center;
}
.bgm-selected-label {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.bgm-selected-bar .bgm-selected-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.bgm-selected-bar .bgm-selected-actions {
  margin-left: auto;
}
/* 选中卡片样式 */
.bgm-selected-card {
  display: flex;
  gap: 12px;
  width: 100%;
}
.bgm-selected-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.bgm-selected-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bgm-selected-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bgm-selected-name-row .bgm-selected-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bgm-selected-cat {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
/* 选中卡片波形 */
.bgm-selected-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 2px 0;
  overflow: hidden;
}
.bgm-selected-waveform.empty .bgm-wave-bar {
  opacity: 0.35;
  animation: none !important;
}
/* 选中卡片进度条 */
.bgm-selected-progress {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bgm-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
  border-radius: 2px;
  transition: width 0.2s linear;
}
/* 选中卡片底部 */
.bgm-selected-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.bgm-selected-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bgm-selected-actions .btn-sm {
  font-size: 11px;
  padding: 3px 10px;
  height: auto;
  min-height: 0;
}
.bgm-selected-actions .bgm-clear-btn {
  width: 28px;
  height: 28px;
}
/* 波形条动画 */
@keyframes barDance {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}
.bgm-wave-bar {
  display: inline-block;
  width: 3px;
  min-width: 3px;
  background: linear-gradient(180deg, #a5b4fc, #6366f1);
  border-radius: 2px;
  transform-origin: center;
  transition: height 0.1s ease;
}
/* 列表项波形 */
.bgm-waveform {
  display: flex;
  align-items: center;
  gap: 1.5px;
  height: 22px;
  margin: 4px 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.bgm-item.selected .bgm-waveform {
  opacity: 1;
}
.bgm-item.playing .bgm-waveform {
  opacity: 1;
}
/* 列表项播放进度条（★ 2026-10-14 波形图改进度条：卡片底部灰色轨道 + 播放时紫色进度推进） */
.bgm-item-progress-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.bgm-item-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
  border-radius: 2px;
  transition: width 0.15s linear;
}
/* 选中卡片波形的波形条（更大） */
.bgm-selected-waveform .bgm-wave-bar {
  width: 4px;
  min-width: 4px;
  background: linear-gradient(180deg, #c4b5fd, #6366f1);
  box-shadow: 0 0 4px rgba(99,102,241,0.4);
}
.bgm-selected-icon { font-size: 20px; line-height: 1; }
.bgm-selected-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bgm-selected-name {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bgm-selected-hint { font-size: 11px; color: var(--text-3); }
.bgm-clear-btn {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.bgm-clear-btn:hover { background: rgba(239, 68, 68, 0.25); transform: scale(1.1); }

.bgm-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.bgm-category-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1; min-width: 0;
}
.bgm-cat-tab {
  padding: 5px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: var(--bg-2, rgba(0,0,0,0.04));
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.bgm-cat-tab:hover { border-color: rgba(99, 102, 241, 0.4); color: var(--text-1); }
.bgm-cat-tab.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.bgm-toolbar-right {
  display: flex; gap: 6px; align-items: center;
  flex-shrink: 0;
}
.bgm-search-input {
  width: 130px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-1);
  background: var(--bg-2, rgba(0,0,0,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
}
.bgm-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
  width: 160px;
}
.bgm-upload-btn, .bgm-refresh-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.bgm-upload-btn:hover, .bgm-refresh-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
}
.bgm-refresh-btn { padding: 6px 9px; font-size: 14px; }

.bgm-list-wrapper {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1, rgba(0,0,0,0.02));
  min-height: 80px;
  max-height: 320px;
  overflow: hidden;
}
.bgm-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 340px;
  overflow-y: scroll;
  padding: 8px;
}
/* ★ 2026-09-16 v104 BGM 每行最多 4 个、随窗口宽度自适应（宽→4列，窄→3/2/1列） */
@media (max-width: 1500px) {
  .bgm-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1150px) {
  .bgm-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .bgm-list { grid-template-columns: repeat(1, 1fr); }
}
.bgm-list::-webkit-scrollbar { width: 6px; }
.bgm-list::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 3px; }
.bgm-list::-webkit-scrollbar-track { background: transparent; }

.bgm-empty, .bgm-loading {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.bgm-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
}

.bgm-item {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px;
  padding: 10px;
  /* ★ 2026-10-14 卡片大小固定统一（避免内容差异导致高低不齐） */
  min-height: 104px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: var(--bg-2, rgba(0,0,0,0.02));
}
.bgm-item:hover { background: rgba(99, 102, 241, 0.07); border-color: rgba(99, 102, 241, 0.3); transform: translateY(-1px); }
.bgm-item.selected {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}
.bgm-item-body { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; text-align: center; }
.bgm-play-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.bgm-play-btn:hover { background: rgba(99, 102, 241, 0.25); transform: scale(1.08); }
.bgm-play-btn.playing {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.bgm-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.bgm-item-name {
  font-size: 13px; font-weight: 500; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.bgm-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-radius: 50%;
  font-size: 10px; font-weight: 700;
}
.bgm-item-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: var(--text-3);
}
.bgm-cat-tag {
  padding: 1px 7px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  border-radius: 8px;
  font-size: 10px; font-weight: 500;
}
.bgm-dur { font-variant-numeric: tabular-nums; }
.bgm-fmt { opacity: 0.7; font-size: 10px; }
.bgm-select-btn {
  width: 100%;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.bgm-select-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent);
}
.bgm-select-btn.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

@media (max-width: 640px) {
  .bgm-toolbar { flex-direction: column; align-items: stretch; }
  .bgm-toolbar-right { justify-content: space-between; }
  .bgm-search-input { flex: 1; width: auto; }
  .bgm-list { max-height: 260px; }
  .bgm-list-wrapper { max-height: 260px; }
}

.wizard-video-preview {
  padding: 0;
  background: #000;
  border-radius: 8px;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 320px;
}
.wizard-video-placeholder {
  text-align: center;
  color: var(--text-3);
}
.wizard-video-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.wizard-video-text {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.wizard-video-hint {
  font-size: 12px;
}

.sm-result-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 260px;
}
.sm-result-video-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 220px;
}
.sm-result-video-wrap video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.sm-result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-3);
  background: rgba(255,255,255,0.03);
  border-radius: 0 0 8px 8px;
}

/* 视频混剪预览 - 更大显示区域 */
.sm-result-container.mix-preview {
  max-height: none;
}
.sm-result-container.mix-preview .sm-result-video-wrap {
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  padding: 8px;
}
.sm-result-container.mix-preview .sm-result-video-wrap video {
  max-height: 520px;
  width: auto;
  margin: 0 auto;
}

/* 混剪结果预览容器 - 覆盖 wizard-video-preview 限制 */
.wizard-video-preview.mix-result-preview {
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  overflow: visible;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 12px;
}
.wizard-video-preview.mix-result-preview .sm-result-container {
  flex: none;
}
.wizard-video-preview.mix-result-preview .mix-result-actions {
  margin-top: 12px;
  width: 100%;
}

.wizard-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
.wizard-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.wizard-summary-item:last-child {
  border-bottom: none;
}
.wizard-summary-label {
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
  width: 80px;
}
.wizard-summary-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  flex: 1;
  word-break: break-all;
}

/* ===== 发布界面平台选择优化 ===== */
.wizard-platform-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.wizard-platform-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.wizard-platform-checkbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--platform-color, var(--accent)), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.wizard-platform-checkbox:hover {
  border-color: var(--accent);
  background: var(--bg-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.wizard-platform-checkbox:hover::after {
  opacity: 0.6;
}
.wizard-platform-checkbox.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.18) 0%, rgba(129, 140, 248, 0.06) 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25), inset 0 0 0 1px rgba(129, 140, 248, 0.2);
}
.wizard-platform-checkbox.selected::after {
  opacity: 1;
}
.wizard-platform-checkbox.selected .wizard-platform-icon-wrap {
  background: var(--platform-color, var(--accent));
  color: white;
  transform: scale(1.05);
}
.wizard-platform-checkbox.selected .wizard-platform-auth-badge.unauthorized {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}
.wizard-platform-checkbox.selected .wizard-platform-info {
  color: var(--text-0);
}
.wizard-platform-checkbox input {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.wizard-platform-checkbox.selected input {
  opacity: 1;
}
.wizard-platform-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(129, 140, 248, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.wizard-platform-icon {
  font-size: 20px;
  line-height: 1;
}
.wizard-platform-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  text-align: center;
}
.wizard-platform-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  text-align: center;
  white-space: nowrap;
}
.wizard-platform-desc {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wizard-platform-auth-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
  line-height: 1;
}
.wizard-platform-auth-badge.unauthorized {
  background: rgba(107, 107, 128, 0.15);
  color: var(--text-3);
  border-color: var(--border);
}
.wizard-platform-auth-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}
.wizard-platform-checkbox .wizard-platform-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  border: 2px solid transparent;
  transition: all 0.3s;
}
.wizard-platform-checkbox.selected .wizard-platform-icon-wrap::after {
  border-color: var(--platform-color, var(--accent));
  opacity: 0.5;
}

/* ===== 发布进度卡片优化 ===== */
#publish-progress-card .wizard-card-title {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wizard-progress-bar {
  height: 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.wizard-progress-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  background-size: 200% 100%;
  animation: progressGlow 2s linear infinite;
  pointer-events: none;
}
@keyframes progressGlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-pink) 100%);
  border-radius: 7px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}
.wizard-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  animation: shimmer 1.5s infinite;
}
.wizard-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.wizard-progress-text span:first-child {
  color: var(--text-0);
  font-weight: 600;
}
.wizard-progress-text span:last-child {
  color: var(--accent);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

/* 发布结果卡片 */
#publish-result-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
#publish-result-card .wizard-card-title {
  color: #22c55e;
}
#publish-result-card .wizard-card-title .icon {
  background: linear-gradient(135deg, #22c55e, #10b981);
}
.publish-resource-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.publish-resource-item:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2);
}

/* ===== 发布页整体卡片紧凑化 ===== */
.wizard-step-content .wizard-data-source {
  /* 确保数据来源卡片不被上方/下方卡片覆盖，保留足够的 margin */
  margin-bottom: 16px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.wizard-step-content .wizard-smart-tip {
  padding: 14px 18px;
  margin-bottom: 16px;
  margin-top: 0;
  /* 避免负 margin 导致与前一个卡片重叠 */
  gap: 12px;
  border-radius: 12px;
  position: relative;
  z-index: 2;
}
.wizard-step-content .wizard-smart-tip::before {
  /* 渐变光晕不遮挡实际内容，限制伪元素层级 */
  z-index: 0;
  pointer-events: none;
}
.wizard-step-content .wizard-smart-tip > * {
  /* 实际内容在光晕之上 */
  position: relative;
  z-index: 1;
}
.wizard-step-content .wizard-smart-tip-icon {
  font-size: 24px;
  /* 恢复上下起伏的呼吸感：bounce + 轻微脉动光晕，和全局 smart-tip-icon 一致但更柔和 */
  animation: iconBreath 2.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.35));
  display: inline-block;
  will-change: transform;
}

/* 图标通用呼吸/起伏动画：上下浮动 + 轻微缩放，制造"呼吸感" */
@keyframes iconBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.3));
  }
  50% {
    transform: translateY(-5px) scale(1.04);
    filter: drop-shadow(0 8px 14px rgba(245, 158, 11, 0.55));
  }
}
.wizard-step-content .wizard-smart-tip-title {
  font-size: 14px;
  margin-bottom: 4px;
}
.wizard-step-content .wizard-smart-tip-desc {
  font-size: 12px;
  line-height: 1.5;
}
.wizard-step-content .wizard-smart-tip-meta {
  font-size: 11px;
  margin-top: 6px;
}
.wizard-step-content .wizard-card {
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: 12px;
}
.wizard-step-content .wizard-card-title {
  font-size: 14px;
  margin-bottom: 10px;
}
.wizard-step-content .wizard-card-title .icon {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 8px;
  /* 默认静止，悬停卡片时才呼吸 */
  will-change: transform;
}

.wizard-step-content .wizard-card:hover .wizard-card-title .icon {
  animation: cardIconBreath 3.2s ease-in-out infinite;
}

/* 卡片内图标呼吸动画：节奏更慢、起伏更小，避免和 smart-tip-icon 完全雷同 */
@keyframes cardIconBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3));
  }
  50% {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 6px 12px rgba(129, 140, 248, 0.5));
  }
}

/* 发布页底部提示 */
.wizard-publish-hint {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard-publish-hint::before {
  content: '💡';
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== 字幕预设快选 ===== */
.wizard-param-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wizard-param-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
  width: 70px;
  padding-top: 8px;
}
.wizard-preset-chips {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.wizard-preset-chip {
  flex: 1;
  min-width: 100px;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.wizard-preset-chip:hover {
  border-color: var(--accent);
  background: var(--bg-2);
  transform: translateY(-1px);
}
.wizard-preset-chip.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.15) 0%, rgba(129, 140, 248, 0.05) 100%);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2);
}
.wizard-preset-chip .preset-preview {
  line-height: 1.4;
}

/* ===== 视频质量选项 ===== */
.wizard-quality-options {
  display: flex;
  gap: 10px;
}
.wizard-quality-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.wizard-quality-option input[type="radio"] {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  opacity: 0;
}
.wizard-quality-option:hover {
  border-color: var(--accent);
  background: var(--bg-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.wizard-quality-option.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.15) 0%, rgba(129, 140, 248, 0.05) 100%);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2);
}
.wizard-quality-option.active input[type="radio"] {
  opacity: 1;
}
.wizard-quality-icon {
  font-size: 22px;
  line-height: 1;
}
.wizard-quality-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.wizard-quality-desc {
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
}

/* ===== 音色库 ===== */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.voice-card {
  background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.voice-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.45), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.voice-card:hover {
  border-color: rgba(37, 99, 235, 0.5);
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(37, 99, 235, 0.16);
}
.voice-card:hover::before {
  opacity: 1;
}
.voice-card.selected {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.14), rgba(29, 78, 216, 0.08));
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.22), inset 0 0 30px rgba(37, 99, 235, 0.05);
}
.voice-card.selected::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.tab-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-3);
  transition: all 0.25s;
}
.tab-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.tab-btn:hover:not(.active) {
  color: var(--text-0);
}

.add-voice-btn {
  width: 100%;
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.add-voice-btn:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
}
.add-voice-btn .add-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  transition: all 0.3s;
}
.add-voice-btn:hover .add-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.add-voice-btn .add-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.file-upload-area {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--bg-2);
}
.file-upload-area:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
}
.file-upload-area.dragover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  transform: scale(1.02);
}

/* ===== 音色库搜索栏 ===== */
.voice-search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.voice-search-input-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.voice-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.5;
}

.voice-search-input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 14px;
  transition: all 0.25s;
  box-sizing: border-box;
}

.voice-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.voice-search-input::placeholder {
  color: var(--text-3);
}

.voice-result-count {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 500;
}

.voice-sort-select {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s;
  outline: none;
  flex-shrink: 0;
}

.voice-sort-select:hover {
  border-color: var(--accent);
}

.voice-sort-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* ===== 音色分类标签 ===== */
.voice-category-scroll {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.voice-category-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}

.voice-category-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.voice-category-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ===== 音色卡片增强 ===== */
.voice-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.voice-card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-0);
}

/* 音色卡中性方形占位图（素材库风格：深灰底 + 图标，无彩色渐变） */
.voice-card-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--text-2);
}

.voice-system-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.voice-quality-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.08));
  color: var(--accent-light);
  letter-spacing: 0.3px;
  border: 1px solid rgba(37, 99, 235, 0.32);
}

.voice-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voice-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.voice-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-1);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.voice-card-playing {
  border-color: var(--accent) !important;
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12)) !important;
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.3), inset 0 0 20px rgba(99, 102, 241, 0.06) !important;
}
.voice-card-playing::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
}

.voice-sample-box {
  background: var(--bg-1);
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
}
.voice-sample-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}
.voice-sample-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.voice-sample-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.voice-mini-btn {
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.06);
  color: var(--accent-light);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.voice-mini-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  color: var(--accent);
  border-color: var(--accent);
}
.voice-mini-btn.copied {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--success);
  color: var(--success);
}
.voice-sample-textarea {
  width: 100%;
  min-height: 52px;
  max-height: 120px;
  resize: vertical;
  font-size: 12px;
  color: var(--text-1);
  line-height: 1.65;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.voice-sample-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.voice-sample-textarea::placeholder {
  color: var(--text-3);
  font-style: italic;
}

.voice-progress-row {
  margin: 0 0 12px;
  padding: 0 2px;
}
.voice-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.voice-progress-info .info-status {
  color: var(--accent-light);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.voice-progress-info .info-pct {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.voice-progress-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.voice-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  border-radius: 99px;
  width: 0%;
  transition: width 0.35s ease;
  position: relative;
}
.voice-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.voice-player-slot {
  margin-bottom: 12px;
}

.voice-card-actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(99, 102, 241, 0.1);
}
.voice-action-btn {
  flex: 1;
  font-size: 13px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  color: var(--accent-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  font-weight: 500;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}
.voice-action-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.voice-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.voice-action-btn.primary-btn {
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}
.voice-action-btn.primary-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
  color: white;
}
.voice-action-btn.is-playing {
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}
.voice-action-btn.is-playing:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #10b981) !important;
}
.voice-action-btn.is-generating {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: var(--warning) !important;
  color: var(--warning) !important;
  animation: pulse-generate 1.3s ease-in-out infinite;
}
@keyframes pulse-generate {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.voice-btn-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.voice-btn-label {
  white-space: nowrap;
}
.voice-btn-progress {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 99px;
  margin-left: 2px;
}

/* 播放中波形动画 */
.waveform {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.waveform .bar {
  width: 3px;
  min-height: 2px;
  background: currentColor;
  border-radius: 2px;
  animation: wave-bounce 0.9s ease-in-out infinite;
}
.waveform .bar:nth-child(1) { animation-delay: -0.9s; height: 45%; }
.waveform .bar:nth-child(2) { animation-delay: -0.75s; height: 90%; }
.waveform .bar:nth-child(3) { animation-delay: -0.6s; height: 60%; }
.waveform .bar:nth-child(4) { animation-delay: -0.45s; height: 100%; }
.waveform .bar:nth-child(5) { animation-delay: -0.3s; height: 70%; }
@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* 生成中三个点跳动 */
.voice-bounce-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
}
.voice-bounce-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: bounce-dot 1s ease-in-out infinite;
  opacity: 0.75;
}
.voice-bounce-dots span:nth-child(2) { animation-delay: 0.15s; }
.voice-bounce-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* 播放头像覆盖层 */
.voice-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.85));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  animation: overlay-pulse 1.4s ease-in-out infinite;
}
@keyframes overlay-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

/* ===== createAudioPlayer 自定义播放器样式 ===== */
.audio-player {
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.10), rgba(17, 17, 24, 0.6));
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audio-player-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
}
.audio-player-title {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.audio-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audio-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.audio-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.audio-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.audio-progress-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  cursor: pointer;
  overflow: hidden;
}
.audio-progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  border-radius: 99px;
  transition: width 0.1s linear;
}
.audio-time-current,
.audio-time-total {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}
.audio-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.audio-volume-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}
.audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
  transition: transform 0.15s;
}
.audio-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}
.audio-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

@media (max-width: 560px) {
  .audio-volume-slider { display: none; }
  .audio-time-total { display: none; }
}

.voice-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-3);
  font-size: 14px;
}

/* ===== 小贴士卡片 ===== */
.voice-tip-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  width: 140px;
  text-align: center;
  transition: all 0.3s;
}

.voice-tip-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ===== 创建页音色选择器 ===== */
.voice-source-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--bg-2);
  padding: 6px;
  border-radius: 12px;
}

.voice-source-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.25s;
  border: none;
  background: transparent;
}

.voice-source-tab:hover {
  color: var(--text-0);
  background: var(--bg-3);
}

.voice-source-tab.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.vs-tab-icon {
  font-size: 18px;
}

.voice-picker-search {
  margin-bottom: 12px;
}

.voice-picker-search-wrap {
  position: relative;
}

.voice-picker-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
}

.voice-picker-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 13px;
  transition: all 0.25s;
  box-sizing: border-box;
}

.voice-picker-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.voice-picker-cats {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.vp-cat-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}

.vp-cat-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.vp-cat-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.voice-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: scroll;
  padding-right: 4px;
}

.vp-voice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}

.vp-voice-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: var(--bg-3);
  transform: translateY(-1px);
}

.vp-voice-card.selected {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.10);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}

.vp-voice-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.vp-voice-info {
  flex: 1;
  min-width: 0;
}

.vp-voice-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vp-quality {
  font-size: 11px;
}

.vp-voice-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.vp-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  background: var(--bg-1);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.vp-tag-custom {
  background: rgba(37, 99, 235, 0.14);
  color: var(--accent);
  border-color: rgba(37, 99, 235, 0.32);
}

.vp-fav-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  opacity: 0;
  color: var(--text-3);
}

.vp-voice-card:hover .vp-fav-btn {
  opacity: 1;
}

.vp-fav-btn:hover {
  transform: scale(1.15);
  color: var(--warning);
}

.vp-fav-btn.active {
  opacity: 1;
  color: var(--warning);
}

.vp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vp-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  opacity: 0;
  color: var(--text-3);
}

.vp-voice-card:hover .vp-action-btn {
  opacity: 1;
}

.vp-action-btn:hover {
  background: var(--bg-3);
  color: var(--accent);
  transform: scale(1.1);
}

.vp-play-btn {
  font-size: 10px;
  padding-left: 1px;
}

.vp-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.vp-voice-card.selected .vp-check {
  opacity: 1;
}

.vp-voice-desc {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-picker-loading,
.voice-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 16px;
  color: var(--text-3);
  font-size: 13px;
}

/* ===== Create 向导步骤3：系统音色选择器【简洁版】（音色库详细、这里保持紧凑） ===== */
.voice-picker-grid {
  max-height: 440px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .voice-picker-grid { max-height: 400px; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }
}

/* 【简洁版】紧凑小卡片：头像 + 名字/标签 + 右侧操作（收藏 / 试听 / 勾选） 一行搞定，高度约 60px */
.vp-voice-card.compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 60px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}
.vp-voice-card.compact:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.vp-voice-card.compact.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.26);
  background: linear-gradient(135deg, rgba(37,99,235,0.10), var(--bg-2));
}
.vp-voice-card.compact.vp-card-generating-mini {
  opacity: 0.9;
  cursor: default;
}
.vp-voice-card.compact.vp-card-playing-mini {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, rgba(16,185,129,0.10), var(--bg-2));
}

/* 头像、名字、标签：左中三列，紧凑排布 */
.vp-voice-card.compact .vp-voice-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
}
.vp-voice-card.compact .vp-voice-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.vp-voice-card.compact .vp-voice-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vp-voice-card.compact .vp-quality {
  font-size: 12px;
  color: #f59e0b;
}
.vp-voice-card.compact .vp-voice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vp-voice-card.compact .vp-tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-2);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* 右侧按钮组：收藏⭐ / 试听▶ / 勾选✓ 从右往左排 */
.vp-voice-card.compact .vp-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vp-voice-card.compact .vp-fav-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.vp-voice-card.compact:hover .vp-fav-btn { opacity: 1; }
.vp-voice-card.compact .vp-fav-btn.active { opacity: 1; color: #f59e0b; background: rgba(245,158,11,0.08); }
.vp-voice-card.compact .vp-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  color: transparent;
  background: transparent;
  border: 1px solid var(--border-2);
  transition: all 0.15s;
  font-weight: 700;
}
.vp-voice-card.compact.selected .vp-check {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}

/* ===== 试听按钮 · 极简版（.simple：create 向导步骤3 系统音色卡用）
   - 不依赖 voices.js 的 5 态机，短平快：图标直接写死 innerHTML，颜色靠 class 切
   - 尺寸：小胶囊 34x30，和 vp-preview-btn.compact 一致
   - 4 个 class：.primary-btn（没缓存=生成试听）/ .is-playing（播放中）/ .is-generating（生成中）/ 默认（有缓存=试听）
====================================================================== */
.vp-preview-btn.voice-action-btn.simple {
  min-width: 34px;
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-1);
  position: relative;
  user-select: none;
}
.vp-preview-btn.voice-action-btn.simple:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  color: var(--text-0);
}
/* 默认（有缓存 = 🔊 试听）：灰底灰边 */

/* primary-btn（没缓存 = 🎙️ 生成试听）：蓝紫渐变胶囊 */
.vp-preview-btn.voice-action-btn.simple.primary-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(99,102,241,0.22);
}
.vp-preview-btn.voice-action-btn.simple.primary-btn:hover {
  box-shadow: 0 6px 14px rgba(99,102,241,0.32);
}
/* is-playing（播放中 = ⏸）：绿青渐变胶囊 */
.vp-preview-btn.voice-action-btn.simple.is-playing {
  background: linear-gradient(135deg, var(--success) 0%, #06b6d4 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(16,185,129,0.22);
}
/* is-generating（生成中 = …/....）：灰虚线禁用态 */
.vp-preview-btn.voice-action-btn.simple.is-generating {
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px dashed var(--border-2);
  cursor: not-allowed;
  opacity: 0.95;
}
.vp-preview-btn.voice-action-btn.simple[disabled] { cursor: not-allowed; opacity: 0.95; }

/* ===== 音色收藏按钮 ===== */
.voice-fav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  flex-shrink: 0;
}

.voice-fav-btn:hover {
  transform: scale(1.1);
  border-color: var(--warning);
}

.voice-fav-btn.active {
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--warning);
}

/* ===== 音色详情弹窗 ===== */
.voice-detail-modal {
  max-width: 560px !important;
}

.voice-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.voice-detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

.voice-detail-info {
  flex: 1;
  min-width: 0;
}

.voice-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 8px;
}

.voice-detail-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.voice-detail-fav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  flex-shrink: 0;
}

.voice-detail-fav:hover {
  transform: scale(1.08);
  border-color: var(--warning);
}

.voice-detail-fav.active {
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--warning);
}

.voice-detail-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
}

.voice-detail-section {
  margin-bottom: 18px;
}

.voice-detail-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 10px;
}

.voice-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-detail-scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-detail-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.voice-param-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-light);
}

.voice-param-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}

.voice-param-value {
  font-size: 14px;
  color: var(--text-0);
  font-weight: 600;
}

.voice-scene-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.voice-detail-sample {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
  font-style: italic;
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: 10px;
  position: relative;
}

.voice-detail-sample::before {
  content: '"';
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 28px;
  color: var(--accent);
  opacity: 0.4;
  font-family: Georgia, serif;
}

.voice-detail-preview {
  display: flex;
  gap: 10px;
}

.voice-detail-preview .form-input {
  flex: 1;
}

.voice-detail-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.voice-detail-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .topbar-inner { padding: 0 12px; gap: 12px; flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .brand-tag { display: none; }
  .topnav { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
  .topnav a { white-space: nowrap; font-size: 13px; padding: 6px 10px; }
  .main-view { padding: 16px 12px; }
  .hero h1 { font-size: 32px; }
  .hero { padding: 40px 16px 32px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .workflow-steps { grid-template-columns: repeat(3, 1fr); }
  .workflow-steps::before { display: none; }
  .btn-lg { padding: 12px 20px; font-size: 14px; }

  /* 管理后台表格横向滚动 */
  .admin-table { font-size: 13px; }
  .admin-table th, .admin-table td { padding: 8px 6px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 创建向导侧边栏折叠 */
  .create-wizard { flex-direction: column; }
  .wizard-sidebar { width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--border); padding: 12px; }
  .wizard-steps-nav { flex-direction: row; overflow-x: auto; gap: 8px; }
  .wizard-step-item { min-width: 120px; flex-shrink: 0; }
  .wizard-step-desc { display: none; }
  .wizard-content-area { flex: 1; padding: 16px; }

  /* 仪表盘卡片单列 */
  .admin-dashboard { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .admin-dashboard-card { padding: 14px; }
  .admin-dashboard-value { font-size: 22px; }

  /* 对比布局垂直排列 */
  .wizard-compare-layout { grid-template-columns: 1fr !important; }
  .wizard-params-grid { grid-template-columns: 1fr !important; }

  /* 模态框适配 */
  .modal { width: 95vw !important; max-width: 95vw !important; margin: 10px; }

  /* 表单输入框全宽 */
  .form-input, .form-select { width: 100%; }

  /* 音色库响应式 */
  .voice-grid { grid-template-columns: 1fr; gap: 12px; }
  .voice-card { padding: 16px; }
  .voice-search-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .voice-search-input-wrap { width: 100%; }
  .voice-sort-select { width: 100%; }
  .voice-result-count { text-align: right; }
  .voice-detail-modal { max-width: 95vw !important; }
  .voice-detail-header { flex-direction: column; text-align: center; gap: 12px; }
  .voice-card-actions { flex-wrap: wrap; }
  .voice-action-btn { flex: 1 1 calc(50% - 4px); min-width: 80px; }
}

/* ===== 商业级管理后台优化样式 ===== */

/* 仪表盘卡片增强效果 */
.admin-dashboard-card {
  position: relative;
  overflow: hidden;
}

.admin-dashboard-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.35s;
}

.admin-dashboard-card:hover::after {
  opacity: 1;
}

.admin-dashboard-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 状态进度条 */
.admin-status-bar-row {
  margin-bottom: 16px;
}

.admin-status-bar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}

.admin-status-bar-label {
  color: var(--text-2);
}

.admin-status-bar-value {
  color: var(--text-0);
  font-weight: 600;
}

.admin-status-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.admin-status-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.admin-status-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: progress-shine 2s infinite;
}

.admin-status-bar-fill.accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.admin-status-bar-fill.success {
  background: linear-gradient(90deg, var(--success), #34d399);
}

.admin-status-bar-fill.warning {
  background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.admin-status-bar-fill.danger {
  background: linear-gradient(90deg, var(--danger), #f87171);
}

.admin-status-bar-fill.info {
  background: linear-gradient(90deg, var(--info), #60a5fa);
}

.admin-status-bar-fill.neutral {
  background: linear-gradient(90deg, var(--text-3), var(--text-4));
}

/* 队列状态项 */
.admin-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s;
}

.admin-queue-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.2);
}

.admin-queue-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-queue-item-icon {
  font-size: 18px;
}

.admin-queue-item-label {
  font-size: 14px;
  color: var(--text-1);
}

.admin-queue-item-value {
  font-size: 24px;
  font-weight: 700;
}

.admin-queue-item-value.accent {
  color: var(--accent-light);
}

.admin-queue-item-value.success {
  color: var(--success);
}

.admin-queue-item-value.warning {
  color: var(--warning);
}

.admin-queue-item-value.neutral {
  color: var(--text-3);
}

/* 阶段耗时行 */
.admin-stage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-stage-row:last-child {
  border-bottom: none;
}

.admin-stage-name {
  font-size: 14px;
  color: var(--text-2);
}

.admin-stage-cost {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-light);
}

/* 操作按钮组 */
.admin-action-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.admin-action-btn:hover {
  transform: translateY(-1px);
}

.admin-action-btn-primary {
  background: var(--accent);
  color: white;
}

.admin-action-btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.admin-action-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
}

.admin-action-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.admin-action-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  border-color: rgba(255, 255, 255, 0.06);
}

.admin-action-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-0);
}

/* 表格增强样式 */
.admin-table tbody tr {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.04);
  transform: translateY(-1px);
}

.admin-table tbody tr td {
  position: relative;
}

.admin-table tbody tr td:first-child {
  position: relative;
}

.admin-table tbody tr td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: height 0.25s;
}

.admin-table tbody tr:hover td:first-child::before {
  height: 60%;
}

/* 筛选标签 */
.admin-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent-light);
  cursor: pointer;
  transition: all 0.2s;
}

.admin-filter-tag:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
}

.admin-filter-tag.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* 批量选择框 */
.admin-batch-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* 空状态增强 */
.admin-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.admin-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.admin-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 8px;
}

.admin-empty-desc {
  font-size: 14px;
  color: var(--text-3);
}

/* 刷新按钮 */
.admin-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}

.admin-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  color: var(--text-0);
}

.admin-refresh-btn.is-refreshing {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 分页增强 */
.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.admin-pagination-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.25s;
}

.admin-pagination-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--accent);
  color: var(--text-0);
}

.admin-pagination-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.admin-pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.admin-pagination-info {
  font-size: 13px;
  color: var(--text-3);
  padding: 0 12px;
}

/* 统计数字动画 */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-stat-value {
  animation: count-up 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 颜色指示器 */
.admin-color-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.admin-color-indicator.online {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.admin-color-indicator.offline {
  background: var(--text-4);
}

.admin-color-indicator.warning {
  background: var(--warning);
  box-shadow: 0 0 8px var(--warning);
}

.admin-color-indicator.danger {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}

/* 数据标签 */
.admin-data-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.admin-data-tag.success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.admin-data-tag.warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.admin-data-tag.danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.admin-data-tag.info {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-light);
}

/* 搜索框增强 */
.admin-search-wrapper {
  position: relative;
}

.admin-search-wrapper::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-3);
}

.admin-search-input {
  padding-left: 36px;
}

/* 时间格式化 */
.admin-time-relative {
  font-size: 12px;
  color: var(--text-3);
}

/* 模态框增强 */
.admin-modal {
  max-width: 800px;
}

.admin-modal-large {
  max-width: 1080px;
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== 任务操作下拉菜单 ===== */
.retry-dropdown {
  animation: fadeIn 0.15s ease-out;
  min-width: 180px !important;
  padding: 6px 0 !important;
  z-index: 9999 !important;
}
.retry-dropdown button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
.retry-dropdown button:hover {
  background: var(--bg-2);
  color: var(--accent);
}
.retry-dropdown button:active {
  background-color: rgba(99, 102, 241, 0.25) !important;
  transform: scale(0.98);
}

#task-batch-retry-menu {
  animation: fadeIn 0.15s ease-out;
  min-width: 180px !important;
  padding: 6px 0 !important;
  z-index: 9999 !important;
}
#task-batch-retry-menu button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
#task-batch-retry-menu button:hover {
  background: var(--bg-2);
  color: var(--accent);
}

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

.admin-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-0);
}

.admin-modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: scroll;
}

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 骨架屏 */
.admin-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s infinite;
  border-radius: 8px;
}

@keyframes skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.admin-skeleton-card {
  height: 120px;
  margin-bottom: 16px;
}

.admin-skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.admin-skeleton-text.short {
  width: 60%;
}

.admin-skeleton-text.medium {
  width: 80%;
}

.admin-skeleton-text.full {
  width: 100%;
}

/* Toast 提示框 */
.admin-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: toast-in 0.3s ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

.admin-toast-info {
  background: linear-gradient(135deg, var(--info), #3b82f6);
}

.admin-toast-success {
  background: linear-gradient(135deg, var(--success), #10b981);
}

.admin-toast-warning {
  background: linear-gradient(135deg, var(--warning), #f59e0b);
}

.admin-toast-error {
  background: linear-gradient(135deg, var(--danger), #ef4444);
}

/* 滚动到顶部按钮 */
.admin-scroll-top:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.admin-scroll-top:active {
  transform: scale(0.95);
}

/* 进度条闪光动画 */
@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.admin-status-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shine 2s infinite;
}

/* 卡片入场动画 */
.admin-card-animate {
  animation: card-in 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 按钮点击效果 */
.btn:active {
  transform: scale(0.98);
}

.btn-primary:active {
  transform: scale(0.96);
}

/* 表格行过渡 */
.admin-table tbody tr {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 模态框动画 */
.modal-overlay {
  animation: fade-in 0.2s ease-out;
}

.modal {
  animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 标签页切换动画 */
.admin-tab {
  position: relative;
  overflow: hidden;
}

.admin-tab::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.admin-tab.active::before {
  transform: scaleX(1);
}

/* 复选框美化 */
.admin-batch-checkbox {
  cursor: pointer;
  transition: all 0.2s;
}

.admin-batch-checkbox:hover {
  transform: scale(1.1);
}

.admin-batch-checkbox:checked {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* 图标悬停效果 */
.admin-dashboard-icon-wrap {
  transition: transform 0.3s ease;
}

.admin-dashboard-card:hover .admin-dashboard-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}

/* 统计数字动画 */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-stat-value {
  animation: count-up 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 颜色指示器脉冲动画 */
.admin-color-indicator.online {
  animation: pulse-green 2s infinite;
}

.admin-color-indicator.warning {
  animation: pulse-yellow 1s infinite;
}

.admin-color-indicator.danger {
  animation: pulse-red 0.5s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@keyframes pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* 数据标签动画 */
.admin-data-tag {
  animation: tag-in 0.3s ease-out;
}

@keyframes tag-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* 筛选标签过渡 */
.admin-filter-tag {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-filter-tag:hover {
  transform: translateY(-2px);
}

.admin-filter-tag.active {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 分页按钮过渡 */
.admin-pagination-btn {
  transition: all 0.2s;
}

.admin-pagination-btn.active {
  transform: scale(1.05);
}

/* 操作按钮组布局 */
.admin-action-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.admin-action-btn:hover {
  transform: translateY(-1px);
}

.admin-action-btn-primary {
  background: var(--accent);
  color: white;
}

.admin-action-btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.admin-action-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
}

.admin-action-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.admin-action-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  border-color: rgba(255, 255, 255, 0.06);
}

.admin-action-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-0);
}

@media (max-width: 480px) {
  .topnav a { font-size: 12px; padding: 4px 8px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 14px; }
  .admin-dashboard { grid-template-columns: 1fr; }
  .wizard-step-info { display: none; }
  .wizard-step-item { min-width: 40px; }
  .card { padding: 12px; }
  .btn { font-size: 13px; padding: 8px 14px; }

  /* 音色库小屏适配 */
  .voice-avatar { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .voice-card-name { font-size: 15px; }
  .voice-action-btn { flex: 1 1 100%; }
  .voice-detail-avatar { width: 56px; height: 56px; font-size: 28px; }
  .voice-detail-actions { flex-direction: column; }
  .voice-detail-actions .btn { width: 100%; }
}


/* ============ 字幕类型系统样式 ============ */
.subtitle-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.subtitle-type-tab {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subtitle-type-tab:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.subtitle-type-tab.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(99,102,241,0.14), rgba(99,102,241,0.04));
  box-shadow: 0 0 0 2px rgba(99,102,241,0.25), 0 8px 20px rgba(99,102,241,0.2);
}
.subtitle-type-tab.disabled { opacity: 0.55; }
.st-tab-header { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.st-tab-icon { font-size: 16px; }
.st-tab-name { font-weight: 600; font-size: 13px; color: var(--text-1); flex: 1; }
.st-tab-desc { font-size: 11px; color: var(--text-3); line-height: 1.35; }
.st-tab-toggle { position: relative; display: inline-block; width: 34px; height: 20px; cursor: pointer; }
.st-tab-toggle input { opacity: 0; width: 0; height: 0; }
.st-toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.12); border-radius: 20px; transition: 0.2s; }
.st-toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.st-tab-toggle input:checked + .st-toggle-slider { background: var(--accent); }
.st-tab-toggle input:checked + .st-toggle-slider::before { transform: translateX(14px); }
.subtitle-visual-section { margin-top: 12px; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.08)); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.subtitle-visual-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sv-title { font-weight: 600; font-size: 13px; color: var(--text-1); }
.sv-hint { font-size: 11px; color: var(--text-3); }
.subtitle-visual-preview { position: relative; width: 100%; aspect-ratio: 16/9; background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%); border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); cursor: default; }
.subtitle-visual-preview::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 33.33% 33.33%; pointer-events: none; opacity: 0.4; z-index: 5; }

/* 预览视频层 */
.subtitle-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background: #000;
}
.subtitle-preview-video:not([src]) {
  display: none;
}
/* 视频加载 fallback */
.subtitle-preview-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
  pointer-events: none;
  background: rgba(0,0,0,0.3);
}
.subtitle-preview-video-fallback .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.subtitle-preview-video-placeholder { position: relative; width: 100%; height: 100%; }

/* 视频实际显示区域wrapper：尺寸=object-fit:contain后的视频可视尺寸，字幕帧定位相对于此区域，消除letterbox偏差 */
.subtitle-video-display-area {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.subtitle-video-display-area > * {
  pointer-events: auto;
}

.subtitle-preview-frame {
  position: absolute;
  max-width: 120%;
  user-select: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
  padding: 0;
  border-radius: 0;
  line-height: 1.0;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, opacity 0.2s;
  z-index: 10;
  cursor: grab;
  border: 1px dashed transparent;
  box-sizing: border-box;
}

/* 对话字幕：仅在激活/悬停时显示边框标识 */
.subtitle-preview-frame.dialog-frame {
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.subtitle-preview-frame.dialog-frame.active,
.subtitle-preview-frame.dialog-frame:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: transparent;
}

/* 标签字幕：仅在激活/悬停时显示边框标识 */
.subtitle-preview-frame.label-frame {
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.subtitle-preview-frame.label-frame.active,
.subtitle-preview-frame.label-frame:hover {
  border-color: rgba(255, 215, 0, 0.3);
  background: transparent;
}

/* 自定义字幕：激活时显示边框标识 */
.subtitle-preview-frame.custom-entry-frame {
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.subtitle-preview-frame:hover {
  /* 2026-10-14 不再修改 transform（原 scale(1.01) 在个别情况下会覆盖定位，导致 hover 时字幕跳到左上角）。
     与对话字幕一致：hover 仅高亮边框，绝不动位置。 */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65);
}
/* ★ 2026-10-14 自定义字幕 hover 专属规则（更高优先级）：只高亮边框，transform 强制 none，杜绝任何位置跳动 */
.subtitle-preview-frame.custom-entry-frame:hover {
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65);
}
.subtitle-preview-frame:active {
  cursor: grabbing;
}
.subtitle-preview-frame.active { 
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(99,102,241,0.4); 
  z-index: 20; 
}
.subtitle-preview-frame .subtitle-badge { 
  position: absolute; 
  top: -20px; 
  right: -10px; 
  font-size: 10px; 
  padding: 2px 8px; 
  border-radius: 10px; 
  background: linear-gradient(135deg, #6366f1, #8b5cf6); 
  color: white; 
  white-space: nowrap; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.2s, transform 0.2s; 
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.subtitle-preview-frame.active .subtitle-badge,
.subtitle-preview-frame:hover .subtitle-badge {
  opacity: 1;
  transform: translateY(-2px);
}
/* 字号调整手柄（参考混剪 resize handle） - 默认隐藏，激活/悬停时显示 */
.subtitle-resize-handle {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: rgba(99, 102, 241, 0.85);
  border-radius: 4px 0 0 0;
  cursor: nwse-resize;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2px;
  transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
  z-index: 21;
  opacity: 0;
  pointer-events: none;
}
.subtitle-preview-frame.active .subtitle-resize-handle,
.subtitle-preview-frame:hover .subtitle-resize-handle {
  opacity: 1;
  pointer-events: auto;
}
.subtitle-resize-handle::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.subtitle-resize-handle:hover {
  background: rgba(99, 102, 241, 1);
  transform: scale(1.2);
}
/* 宽度调整手柄（左右两侧，控制每行字数） - 默认隐藏，激活/悬停时显示 */
.subtitle-width-handle {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 28px;
  background: rgba(34, 197, 94, 0.85);
  border-radius: 3px;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
  z-index: 21;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.subtitle-preview-frame.active .subtitle-width-handle,
.subtitle-preview-frame:hover .subtitle-width-handle {
  opacity: 1;
  pointer-events: auto;
}
.subtitle-width-handle.handle-left {
  left: -12px;
  border-radius: 3px 0 0 3px;
}
.subtitle-width-handle.handle-right {
  right: -12px;
  border-radius: 0 3px 3px 0;
}
.subtitle-width-handle::after {
  content: '';
  width: 2px;
  height: 10px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.subtitle-width-handle:hover {
  background: rgba(34, 197, 94, 1);
  transform: translateY(-50%) scale(1.15);
}
.subtitle-preview-frame .dialog-text-content {
  display: inline-block;
  transition: opacity 0.3s;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.subtitle-preview-grid { 
  position: absolute; 
  top: 8px; 
  left: 8px; 
  right: 8px; 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  pointer-events: none; 
  z-index: 15;
  gap: 8px;
}
.preview-hint { 
  font-size: 11px; 
  color: rgba(255,255,255,0.8); 
  background: rgba(0,0,0,0.35); 
  padding: 3px 8px; 
  border-radius: 6px; 
  backdrop-filter: blur(6px); 
  font-weight: 500; 
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.3;
  max-width: 60%;
}
.preview-coords { 
  font-size: 11px; 
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; 
  color: #a78bfa; 
  background: rgba(99,102,241,0.12); 
  border: 1px solid rgba(139,92,246,0.3); 
  padding: 3px 8px; 
  border-radius: 6px; 
  font-weight: 600; 
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.subtitle-preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.subtitle-position-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.subtitle-position-shortcuts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.pos-shortcut { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-2); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.pos-shortcut:hover { background: var(--accent); color: white; border-color: var(--accent); }
.subtitle-type-settings { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.wizard-param-card .st-range[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.1); outline: none; cursor: pointer; }
.wizard-param-card .st-range[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: white; border: 2px solid var(--accent); cursor: pointer; box-shadow: 0 2px 6px rgba(99,102,241,0.4); transition: transform 0.12s; }
.wizard-param-card .st-range[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.st-color { cursor: pointer; }
@keyframes subtitleFadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ==== 字幕音乐位置预览增强样式 ==== */

/* 预览面板 - 优化版 */
/* ★ 2026-09-14 补 hover 浮起，与其他容器一致 */
.sv-preview-panel {
  background: linear-gradient(180deg, var(--bg-1), rgba(30,30,50,0.5));
  border: 1px solid var(--border-2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  min-height: 0;
  /* ★ 2026-09-16 v101 删除 max-height: calc(100vh-150px)：矮窗口时不再裁剪预览，内容始终完整显示 */
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
/* ★ 2026-09-14 顶部橙金渐变线（与 .wizard-card 金边一致，hover 亮起） */
.sv-preview-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.32), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
/* ★ 2026-09-14 字幕音乐预览面板 hover：暖橙金边 + 浮起（与其他容器一致） */
.sv-preview-panel:hover::before {
  opacity: 1;
}
.sv-preview-panel:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(249, 115, 22, 0.15) inset,
              0 0 30px rgba(249, 115, 22, 0.1);
  transform: translateY(-3px);
}
.sv-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
  flex-shrink: 0;
}
.sv-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
}
.sv-preview-title .icon {
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(99,102,241,0.5));
}
.sv-preview-actions {
  display: flex;
  gap: 8px;
}
.sv-preview-canvas {
  position: relative;
  background: #000;
  /* ★ 2026-09-14 用户反馈：字幕类型与样式卡片太大把页面撑满。
     保留 16:9，但高度受限（视口内自适应），宽度随比例收缩，卡片到背景音乐上方自然收住 */
  aspect-ratio: 16 / 9;
  width: auto;
  max-width: 100%;
  /* ★ 2026-09-16 与视频混剪 .mix-preview-canvas 完全同款固定视口公式：
     高度只由窗口尺寸决定（不随右列字幕内容多少伸缩），预览不再忽大忽小 */
  height: min(calc((100vw - 470px) * 9 / 16), calc(100vh - 340px), 480px);
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}
.sv-preview-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 25% 25%;
  pointer-events: none;
  z-index: 5;
}
.sv-preview-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4));
  pointer-events: none;
  z-index: 6;
}
.sv-preview-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-2);
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.sv-preview-divider {
  opacity: 0.3;
}
.sv-meta-action {
  margin-left: auto;
  font-size: 12px;
  color: white;
  background: linear-gradient(135deg, rgba(99,102,241,0.8), rgba(139,92,246,0.7));
  border: 1px solid rgba(139,92,246,0.5);
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.sv-meta-action:hover {
  background: linear-gradient(135deg, rgba(99,102,241,1), rgba(139,92,246,0.9));
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.sv-preview-guides-overlay {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 30;
  pointer-events: none;
}
.sv-guide-btn {
  pointer-events: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.15s;
}
.sv-guide-btn:hover {
  background: rgba(99,102,241,0.3);
  border-color: var(--accent);
  color: white;
}

/* 快捷定位栏 - 优化版 */
.sv-preview-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sv-shortcuts-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
}
.sv-custom-name {
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.sv-custom-name:hover { color: #fff; }
.sv-shortcut-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.sv-shortcut {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.sv-shortcut:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.3));
  color: white;
  border-color: var(--accent);
  /* ★ 2026-10-14 位置快捷定位：hover 仅高亮，不做位移/阴影，避免"悬停即变位"错觉（点击才应用位置） */
}

/* 控制面板 - 右侧优化 */
.sv-control-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* ★ 2026-09-16 v103 删除 max-height:100%（grid 百分比解析异常风险）：高度完全由 grid stretch 跟随左预览列 */
  overflow-y: scroll;
  padding-right: 4px;
}

.sv-control-panel::-webkit-scrollbar {
  width: 6px;
}

.sv-control-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.sv-control-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.sv-control-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,0.4);
}

/* 控制面板分区 - 优化版 */
.sv-section {
  background: linear-gradient(180deg, var(--bg-2), rgba(40,40,60,0.5));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.sv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(90deg, rgba(99,102,241,0.1), rgba(139,92,246,0.05));
}

.sv-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}

/* 对齐辅助线（静态，可切换） */
.subtitle-preview-guides {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.subtitle-preview-guides.show {
  display: flex;
}
.subtitle-preview-guides::before {
  content: '';
  position: absolute;
  left: 33.33%;
  right: 33.33%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(255,255,255,0.15);
  border-right: 1px dashed rgba(255,255,255,0.15);
}
.subtitle-preview-guides::after {
  content: '';
  position: absolute;
  top: 33.33%;
  bottom: 33.33%;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255,255,255,0.15);
  border-bottom: 1px dashed rgba(255,255,255,0.15);
}

/* 拖拽时的十字辅助线 */
.subtitle-drag-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}
.drag-guide-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
  box-shadow: 0 0 8px var(--accent);
}
.drag-guide-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.8;
  box-shadow: 0 0 8px var(--accent);
}

/* 自定义字幕条目颜色标识 */
.entry-color-strip {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  z-index: -1;
}
.subtitle-preview-frame.custom-entry-frame {
  padding-left: 12px;
}

/* 自定义字幕条目增强样式 */
.custom-entry-item {
  transition: all 0.2s ease;
}
.custom-entry-item:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.custom-entry-item.dragging {
  opacity: 0.4;
  transform: scale(0.98);
}
.custom-entry-item.drag-over-top {
  border-top: 3px solid var(--accent) !important;
}
.custom-entry-item.drag-over-bottom {
  border-bottom: 3px solid var(--accent) !important;
}

.custom-entry-drag-handle {
  opacity: 0.4;
  transition: opacity 0.15s;
}
.custom-entry-item:hover .custom-entry-drag-handle {
  opacity: 0.8;
}

.custom-entry-color-bar {
  border-radius: 0;
}

.custom-entry-controls {
  margin-top: 4px;
}
.custom-entry-pos-input input {
  transition: border-color 0.15s, background 0.15s;
}
.custom-entry-pos-input input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(99,102,241,0.1);
}

.custom-entry-snap {
  transition: all 0.15s;
}
.custom-entry-snap:hover {
  background: rgba(99,102,241,0.15);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-add-custom-entry {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: white;
  border: none;
  border-radius: 8px;
  transition: all 0.2s;
}
.btn-add-custom-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.btn-add-custom-entry:active {
  transform: translateY(0);
}

/* 字幕预览网格增强 - 提示在左，坐标在右，两端对齐 */
.subtitle-preview-grid {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 20;
  gap: 8px;
}
.preview-coords {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.preview-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.35);
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  font-weight: 500;
  line-height: 1.3;
  max-width: 60%;
}

/* 字幕条目列表过渡 */
.custom-entries-list { transition: all 0.2s; }
.custom-entries-list .custom-entry-item { animation: slideIn 0.2s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* 字幕音乐合成进度步骤可视化 */
.sm-progress-container {
  padding: 20px;
  background: var(--bg-2);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}
.sm-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.sm-progress-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}
.sm-progress-stage {
  font-size: 12px;
  color: var(--text-3);
  background: rgba(255,255,255,0.05);
  padding: 3px 10px;
  border-radius: 10px;
}
.sm-progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 0;
}
.sm-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}
.sm-stage-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(255,255,255,0.08);
  color: var(--text-3);
  position: relative;
  transition: all 0.3s;
  border: 2px solid transparent;
}
.sm-stage.pending .sm-stage-dot {
  background: rgba(255,255,255,0.05);
  color: var(--text-3);
  border-color: rgba(255,255,255,0.08);
}
.sm-stage.active .sm-stage-dot {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: white;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 4px 14px rgba(99,102,241,0.5);
  transform: scale(1.1);
}
.sm-stage.done .sm-stage-dot {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-color: rgba(16,185,129,0.3);
}
.sm-stage-dot .sm-stage-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0.5;
  animation: ringPulse 1.4s ease-out infinite;
}
@keyframes ringPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.sm-stage-label {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}
.sm-stage.active .sm-stage-label {
  color: var(--accent);
  font-weight: 600;
}
.sm-stage.done .sm-stage-label {
  color: #10b981;
}
.sm-stage-connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.08);
  margin: 0 4px;
  margin-bottom: 24px;
  border-radius: 1px;
  transition: background 0.3s;
  min-width: 8px;
}
.sm-stage-connector.done {
  background: linear-gradient(90deg, #10b981, #059669);
}
.sm-progress-bar-wrap {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sm-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(99,102,241,0.4);
}
.sm-progress-pct {
  position: absolute;
  right: -44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-2);
  font-family: ui-monospace, monospace;
  font-weight: 600;
}
.sm-progress-info {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
  text-align: center;
}
@media (max-width: 768px) {
  .sm-stage-label { font-size: 10px; max-width: 56px; }
  .sm-stage-dot { width: 30px; height: 30px; font-size: 13px; }
}

/* 对话字幕预览样本列表 */
.dialog-samples-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.dialog-sample-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.dialog-sample-line .sample-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.dialog-sample-line .sample-text {
  flex: 1;
  color: var(--text-1);
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) { .subtitle-type-tabs { grid-template-columns: 1fr; } }

/* ============ 草稿箱样式（本地草稿 / 恢复提示） ============ */

/* 草稿恢复提示横幅（create 页面顶部） */
.draft-restore-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(139,92,246,0.08));
  box-shadow: 0 4px 16px rgba(99,102,241,0.15);
  animation: draft-banner-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes draft-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.draft-restore-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(99,102,241,0.2);
}
.draft-restore-content { flex: 1; min-width: 0; }
.draft-restore-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.draft-restore-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.draft-restore-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* 任务列表页草稿卡片 */
#local-drafts-card {
  transition: opacity 0.25s ease;
}
.local-drafts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: scroll;
  padding-right: 4px;
}
.local-drafts-list::-webkit-scrollbar { width: 6px; }
.local-drafts-list::-webkit-scrollbar-track { background: transparent; }
.local-drafts-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}

.local-draft-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.03));
  transition: all 0.2s;
  cursor: pointer;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.local-draft-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), #8b5cf6);
  opacity: 0.8;
}
.local-draft-item:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 6px 18px rgba(99,102,241,0.18);
}
.local-draft-item:hover .draft-delete-btn {
  opacity: 1;
  visibility: visible;
}
.local-draft-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.3), 0 8px 20px rgba(99,102,241,0.22);
}

.draft-delete-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  font-size: 18px;
  background: rgba(255,255,255,0.05);
  transition: all 0.15s;
  border: none;
  opacity: 0.55;
  visibility: visible;
  cursor: pointer;
}
.draft-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  opacity: 1;
  transform: scale(1.08);
}

/* 草稿步骤徽章（小圆角方块显示步数） */
.draft-step-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}

@media (max-width: 480px) {
  .draft-restore-banner { flex-wrap: wrap; }
  .draft-restore-actions { width: 100%; justify-content: flex-end; }
  .local-draft-item { padding: 10px 12px; }
  .local-draft-item .draft-continue-btn { padding: 6px 10px; font-size: 12px; }
}

/* ==== 字幕音乐 - 混剪风格布局 ==== */

/* 工作区容器 - 左右布局 */
/* ★ 2026-09-14 与视频混剪 .mix-workspace 完全一致（minmax(0,1fr) 380px + start 对齐），
   保证字幕预览与混剪预览"左右对齐"、大小一致 */
.sv-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 8px 16px;  /* v105 vertical gap halved (row 8px), column keeps 16px */
  margin-top: 12px;
  /* ★ 2026-09-15 与视频混剪 .mix-workspace 一致：左右等高，右列不随窗口缩小被压扁 */
  align-items: stretch;
}
/* ★ 2026-09-16 v101 取消左右列视口高度封顶：
   用户要求"字幕预览不管高度怎么调始终显示全，不能裁剪成半格"——
   ① 左预览列高度由内容（toolbar+16:9画布+meta）自然决定，矮窗口时画布随 100vh 公式收缩但仍完整显示，页面整体纵向滚动；
   ② 右设置列 grid stretch 与左列始终等高（最大化/任意窗口一致），内容超出时在 .sv-control-inner 内部滚动 */
@media (max-width: 1024px) {
  .sv-workspace {
    grid-template-columns: 1fr;
  }
}
/* ★ 2026-09-16 v97 终极修复: 时间轴/背景音乐卡跨满 grid 全列 ——
   父容器 .sv-workspace 是两列 grid(minmax(0,1fr) 380px), 此前时间轴/背景音乐被自动流
   排成左右并排(时间轴在左列、背景音乐在右列), 导致"时间轴与背景音乐跑一行"反复出现;
   grid-column: 1/-1 强制两者各占一整行, 无论窗口宽度如何都不可能再并排 */
.sv-workspace > .sv-timeline-card,
.sv-workspace > .sv-bgm-card,
.sv-workspace > .sv-template-card {
  grid-column: 1 / -1 !important;
}
.sv-workspace > .sv-final-card {
  grid-column: 1 / -1 !important;
}

/* 预览面板 - 左侧 */
.sv-workspace .sv-preview-panel {
  margin-top: 0;
}

/* 控制面板 - 右侧（★ 2026-09-16 重构：外层容器 + 内部 .sv-control-inner 滚动。
   与左预览面板同套自适应（外层 overflow:hidden、内层 flex:1 滚动）：
   ① 内容再多在 inner 内部滚动，绝不向上溢出盖住类型 Tab；
   ② 高度由 workspace 行高封顶 + stretch 与左预览底部平齐，不无限长） */
.sv-control-panel {
  display: flex;
  flex-direction: column;
  /* ★ 2026-09-16 v101 删除 max-height: min(100%, calc(100vh-420px))：高度完全由 grid stretch 跟随左预览列，
     最大化/任意窗口下左右底部始终平齐；内容超出在 .sv-control-inner 内部滚动 */
  min-height: 0;
  overflow: hidden;
  /* ★ 2026-09-15 position: static：清除旧 sticky，sticky 会阻止 grid stretch 拉伸导致左右不齐 */
  position: static;
}
/* ★ 2026-09-16 类型选择 + 设置 合并容器：flex 撑满外层剩余空间，内部滚动 */
.sv-control-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  padding-right: 4px;
}
.sv-control-inner::-webkit-scrollbar {
  width: 5px;
}

.sv-control-panel::-webkit-scrollbar {
  width: 5px;
}

.sv-control-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.sv-control-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.sv-control-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 控制面板分区 */
.sv-section {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
}
/* ★ 2026-09-15 右列设置区撑满剩余高度：对话字幕/自定义字幕设置与左预览底部始终对齐 */
.sv-control-panel > .sv-section:last-child {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sv-control-panel > .sv-section:last-child > .sv-section-header {
  flex-shrink: 0;
}
/* ★ 2026-09-15 内部卡片纵向撑满：prop-body/列表占满剩余高度，底部始终与左预览齐平 */
.sv-prop-samples > .sv-prop-header,
.sv-prop-entries > .sv-prop-header {
  flex-shrink: 0;
}
.sv-prop-samples > .sv-prop-body,
.sv-prop-entries > .sv-prop-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.sv-control-panel > .sv-section:last-child .sv-type-settings {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  /* ★ 2026-09-15 内容撑满到底：卡片/列表纵向填满剩余高度，底部与左预览齐平 */
  display: flex;
  flex-direction: column;
}
/* v105: 设置区纵向撑满（wrap 转 flex 列，type-settings flex:1，prop-card 填满与左预览等高的剩余空间） */
.sv-control-inner > .sv-section.sv-type-settings-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.sv-type-settings {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sv-type-settings > .sv-prop-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* v105 prop-card stretch to fill settings area (was flex-shrink:0 -> short leg) */
}
.sv-type-settings .sv-prop-samples,
.sv-type-settings .sv-prop-entries {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sv-prop-samples > .sv-prop-body,
.sv-prop-entries > .sv-prop-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.sv-samples-list,
.sv-entries-list {
  flex: 1 1 0%;  /* v109 basis 0: 列表高度=分配剩余空间(非内容高), 内容多时列表内滚动 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-width: thin;
}
.sv-samples-list .sv-dialog-entry {
  flex: 0 0 auto;  /* ★ v138 条目按内容高度排列，不拉伸（条数少时避免被 flex-grow 拉高，自定义与对话字幕高度一致） */
}
.sv-entries-list .sv-entry-item {
  flex: 1 0 auto;
}

/* ★ 2026-09-16 v102 自定义字幕：X/Y 位置提示小字 + ⏱ 展开的 X/Y 编辑行（复刻对话字幕组件后） */
.sv-custom-pos-hint {
  font-size: 10px;
  opacity: 0.45;
  color: var(--text-2);
  margin-left: 2px;
  white-space: nowrap;
}
.sv-custom-pos-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  font-size: 11px;
  color: var(--text-2);
}
.sv-custom-pos-controls input {
  width: 52px;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 11px;
  text-align: center;
  outline: none;
}
.sv-custom-pos-controls input:focus {
  border-color: rgba(99, 102, 241, 0.6);
}
.sv-samples-list,
.sv-entries-list {
  /* ★ 2026-09-15 底部留白，滚动时最后一条完整可见 */
  padding-bottom: 12px;
  scrollbar-gutter: stable;
}
.sv-dialog-toolbar {
  flex-shrink: 0;
}
.sv-samples-hint {
  flex-shrink: 0;
}
/* ★ 2026-09-15 sv-prop-card hover：暖橙金边 + 浮起（与其他容器一致） */
.sv-prop-card {
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.sv-prop-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.32), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.sv-prop-card:hover::before {
  opacity: 1;
}
.sv-prop-card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(249, 115, 22, 0.15) inset,
              0 0 30px rgba(249, 115, 22, 0.1);
  transform: translateY(-3px);
}

.sv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.2);
}

.sv-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 字幕类型选择器 - 优化版 */
.sv-type-section {
  padding: 12px;
  background: linear-gradient(180deg, rgba(99,102,241,0.08), transparent);
}
/* ★ 2026-09-16 v96 字幕类型选择 + 设置 合并大容器：一个框整体包裹，避免嵌套错位 */
.sv-type-settings-wrap {
  overflow: hidden;
}
.sv-type-settings-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.sv-type-settings-head .sv-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* 紧凑横向 tab（靠右、缩小），原顶部大 tab 移入设置容器头部 */
.sv-type-switcher-compact {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.sv-type-switcher-compact .sv-type-btn {
  flex-direction: row;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 6px;
  flex: 0 1 auto;
  min-width: 0;
}
.sv-type-switcher-compact .sv-type-btn-icon {
  font-size: 13px;
  line-height: 1;
}
.sv-type-switcher-compact .sv-type-btn-label {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-type-switcher-compact .sv-type-count {
  position: static;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9px;
  border-radius: 8px;
}
/* 类型描述行（合并容器内） */
.sv-type-settings-wrap .sv-type-desc {
  margin: 8px 12px 0;
  flex-shrink: 0;
}

.sv-type-switcher {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ★ 2026-09-14 类型切换按钮更紧凑，内容区更小 */
.sv-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  font-family: inherit;
  overflow: hidden;
}

.sv-type-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
}

.sv-type-btn:hover {
  color: var(--text-2);
  border-color: rgba(99,102,241,0.3);
  transform: translateY(-2px);
}

.sv-type-btn:hover::before {
  opacity: 1;
}

.sv-type-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(139, 92, 246, 0.25));
  color: white;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: rgba(139, 92, 246, 0.5);
}

.sv-type-btn.active::before {
  opacity: 1;
}

.sv-type-btn.is-disabled {
  opacity: 0.45;
}

.sv-type-btn.is-disabled:hover {
  opacity: 0.65;
  transform: none;
  border-color: transparent;
}

.sv-type-btn-icon {
  font-size: 16px;
  line-height: 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.sv-type-btn.active .sv-type-btn-icon {
  filter: drop-shadow(0 2px 8px rgba(139,92,246,0.5));
}

.sv-type-btn-label {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.sv-type-btn.active .sv-type-btn-label {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sv-type-status-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
  z-index: 2;
}

.sv-type-status-dot.active {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8), 0 0 16px rgba(52, 211, 153, 0.4);
  animation: pulse-dot 2s ease-in-out infinite;
}

.sv-type-btn.active .sv-type-status-dot.active {
  background: #c4b5fd;
  box-shadow: 0 0 10px rgba(196, 181, 253, 0.9), 0 0 20px rgba(196, 181, 253, 0.5);
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.sv-type-count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(99,102,241,0.4);
  z-index: 2;
}

.sv-type-btn.active .sv-type-count {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  box-shadow: 0 2px 8px rgba(139,92,246,0.6);
}

/* 类型描述栏 - 优化版 */
.sv-type-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.sv-type-desc-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.sv-type-desc-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

.sv-type-enable {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px 10px;
  background: rgba(99,102,241,0.15);
  border-radius: 6px;
  border: 1px solid rgba(99,102,241,0.3);
  transition: all 0.2s;
}

.sv-type-enable:hover {
  background: rgba(99,102,241,0.25);
  border-color: var(--accent);
}

.sv-type-enable input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.sv-type-enable-label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}

.sv-type-enable input:checked + .sv-type-enable-label {
  color: #a78bfa;
  font-weight: 600;
}

/* 样式设置区域 */
/* ★ 2026-09-16 去掉 max-height: calc(100vh - 520px)：窗口非最大化时该值钳制内容区高度，
   而外层 .sv-section 由预览列撑高(flex:1)，导致内容区底部露出黑框。改为 flex 撑满 + 内部滚动 */
.sv-type-settings {
  padding: 12px;
  max-height: none;
  overflow-y: scroll;
}

.sv-type-settings::-webkit-scrollbar {
  width: 4px;
}

.sv-type-settings::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.sv-type-settings::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .sv-workspace {
    grid-template-columns: 1fr;
  }
  
  .sv-control-panel {
    max-height: none;
    position: static;
  }
  
  .sv-type-settings {
    max-height: none;
  }
}

/* ==== 字幕属性卡片样式 ==== */

/* 属性卡片 */
.sv-prop-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
}

.sv-prop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.15);
}

.sv-prop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}

.sv-prop-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}

.sv-prop-body {
  padding: 10px 12px;
}

/* 网格布局 */
.sv-prop-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ★ 2026-10-14 进阶选项折叠：分隔线 + "更多选项"按钮（傻瓜式，默认收起） */
.sv-prop-advanced {
  border-top: 1px dashed rgba(148, 163, 184, 0.25);
  padding-top: 10px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-prop-more {
  width: 100%;
  padding: 6px 10px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-family: inherit;
}
.sv-prop-more:hover {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.55);
}

.sv-prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sv-label-text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sv-label-text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.sv-label-text-input::placeholder {
  color: var(--text-3);
  opacity: 0.7;
}

.sv-prop-label {
  font-size: 11px;
  color: var(--text-3);
  min-width: 60px;
  flex-shrink: 0;
}

.sv-prop-control {
  flex: 1;
  min-width: 0;
}

/* 滑块控件 */
.sv-range-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-range-control input[type="range"] {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.sv-range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
  transition: transform 0.15s;
}

.sv-range-control input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.sv-range-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  min-width: 36px;
  text-align: right;
}

/* 颜色控件 */
.sv-color-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-color-control input[type="color"] {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.sv-color-value {
  font-size: 11px;
  font-family: monospace;
  color: var(--text-3);
}

/* 选择控件 */
.sv-select {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--bg-1);
  color: var(--text-1);
  cursor: pointer;
  outline: none;
}

.sv-select:focus {
  border-color: var(--accent);
}

/* 复选框控件 */
.sv-style-control {
  display: flex;
  gap: 12px;
}

.sv-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.sv-check-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.sv-check-label {
  font-size: 12px;
  color: var(--text-2);
}

.sv-check-label.bold {
  font-weight: 700;
}

.sv-check-label.shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 开关控件 */
.sv-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  margin-left: auto;
}

.sv-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sv-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  transition: 0.2s;
}

.sv-switch-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

.sv-switch input:checked + .sv-switch-slider {
  background: var(--accent);
}

.sv-switch input:checked + .sv-switch-slider::before {
  transform: translateX(16px);
}

/* 禁用状态 */
.sv-prop-body.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 语言选项 */
.sv-lang-options {
  display: flex;
  gap: 6px;
}

.sv-lang-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-3);
  transition: all 0.15s;
}

.sv-lang-opt input {
  display: none;
}

.sv-lang-opt:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-2);
}

.sv-lang-opt.active {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent);
}

/* 对话样本 */
.sv-samples-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 120px;
  overflow-y: scroll;
}

.sv-samples-scroll {
  /* ★ 2026-09-15 取消 max-height 硬限制：高度由 flex 撑满（与左预览底部齐平），条目多时列表内滚动 */
  overflow-y: scroll;
  scrollbar-width: thin;
}

.sv-sample-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}

.sv-sample-item:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
  transform: translateX(2px);
}

.sv-sample-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.sv-sample-time {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(99, 102, 241, 0.15);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.sv-sample-item.active .sv-sample-time {
  background: rgba(255,255,255,0.25);
  color: white;
}

.sv-sample-text {
  line-height: 1.4;
  word-break: break-all;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sv-sample-item.active .sv-sample-text {
  color: white;
  font-weight: 500;
}

.sv-samples-hint {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 6px;
  text-align: center;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ===== 对话字幕可编辑条目 ===== */
.sv-editable-list {
  max-height: none;  /* v108: 放开 260px 硬锁，列表 flex 撑满设置卡剩余高度 */
}

.sv-dialog-entry {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-2);
  transition: all 0.15s;
  position: relative;
}

.sv-dialog-entry:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}

.sv-dialog-entry-select {
  display: flex;
  align-items: flex-start;
  padding-top: 16px;
  flex-shrink: 0;
}

.sv-dialog-entry-select input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.sv-dialog-entry-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sv-dialog-entry-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sv-dialog-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  background: rgba(255,255,255,0.05);
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sv-dialog-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(99, 102, 241, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s;
}

.sv-dialog-time:hover {
  background: rgba(99, 102, 241, 0.3);
}

.sv-dialog-time-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.sv-dialog-time-inputs input {
  width: 55px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-1);
  padding: 2px 4px;
}

.sv-dialog-time-inputs input:focus {
  outline: none;
  border-color: var(--accent);
}

.sv-time-edit-btn {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 10px;
  transition: background 0.15s;
}

.sv-time-edit-btn[data-action="save-time"] {
  color: #10b981;
}

.sv-time-edit-btn[data-action="save-time"]:hover {
  background: rgba(16, 185, 129, 0.15);
}

.sv-time-edit-btn[data-action="cancel-time"] {
  color: #ef4444;
}

.sv-time-edit-btn[data-action="cancel-time"]:hover {
  background: rgba(239, 68, 68, 0.15);
}

.sv-dialog-text {
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-1);
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  padding: 2px 0;
  font-family: inherit;
  min-height: 20px;
}

.sv-dialog-text:focus {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ★ 2026-09-16 v141 自定义字幕输入框与对话字幕一致：禁用拖拽拉大、最小单行高、随内容自动增高（JS 限制 max-height 120px） */
.sv-custom-text {
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-1);
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  padding: 2px 0;
  font-family: inherit;
  min-height: 20px;
}

.sv-custom-text:focus {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  padding: 2px 6px;
}

.sv-dialog-entry-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
  padding-top: 14px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.sv-dialog-entry:hover .sv-dialog-entry-actions {
  opacity: 1;
}

.sv-action-btn {
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  color: var(--text-3);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}

.sv-action-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--text-1);
}

.sv-action-btn.sv-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

/* 批量操作工具栏 */
.sv-dialog-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 11px;
}

/* ★ 2026-09-16 v104 全选后紧跟的条数（去掉"已选"字样） */
.sv-count-num {
  opacity: 0.65;
  font-size: 11px;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

.sv-select-all {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  cursor: pointer;
}

.sv-select-all input {
  accent-color: var(--accent);
}

.sv-selected-count {
  color: var(--accent);
  font-weight: 600;
}

.sv-batch-action-btn {
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.sv-batch-action-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.25);
  color: var(--text-1);
}

.sv-batch-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ★ 2026-09-16 v102 "＋"增加条数按钮：批量工具栏最右，绿色突出 */
.sv-add-count-btn {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.sv-add-count-btn:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.6);
  color: #6ee7b7;
}
.sv-add-count-btn:active {
  transform: scale(0.95);
}

.sv-batch-btn {
  padding: 3px 8px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.sv-batch-btn:hover {
  background: rgba(99, 102, 241, 0.3);
}

.sv-export-btn {
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 5px;
  color: #10b981;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.sv-export-btn:hover {
  background: rgba(16, 185, 129, 0.25);
}

.sv-prop-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sv-prop-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-clickable {
  cursor: pointer;
}

.sv-clickable:hover {
  filter: brightness(1.2);
}

/* ===== 音乐轨道样式 ===== */
.sv-track-music {
  background: rgba(16, 185, 129, 0.03);
  border-top: 1px solid rgba(16, 185, 129, 0.1);
}

.sv-track-music .sv-track-label {
  color: #10b981;
}

.sv-entry-music {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(6, 182, 212, 0.2));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.sv-entry-music::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.03) 4px,
    rgba(255, 255, 255, 0.03) 8px
  );
  pointer-events: none;
}

.sv-entry-music .sv-entry-text {
  color: #10b981;
  font-weight: 600;
}

.sv-entry-music .sv-entry-time {
  color: rgba(255, 255, 255, 0.7);
}

.sv-music-volume {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.sv-music-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #10b981, #06b6d4);
  border-radius: 2px;
  transition: height 0.2s;
}

.sv-music-fade-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}

.sv-fade-in {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 100%;
  background: linear-gradient(to right, rgba(16, 185, 129, 0.5), transparent);
  border-radius: 0 2px 0 0;
}

.sv-fade-out {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15%;
  height: 100%;
  background: linear-gradient(to left, rgba(16, 185, 129, 0.5), transparent);
  border-radius: 2px 0 0 0;
}

.sv-entry-music:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(6, 182, 212, 0.3));
  border-color: rgba(16, 185, 129, 0.6);
}

.sv-entry-music .sv-entry-handle {
  background: rgba(16, 185, 129, 0.5);
}

.sv-entry-music .sv-entry-handle:hover {
  background: rgba(16, 185, 129, 0.9);
}

.sv-empty-tip {
  font-size: 11px;
  color: var(--text-4);
  text-align: center;
  padding: 12px 0;
}

/* 自定义条目列表 */
.sv-add-entry-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}

.sv-add-entry-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.sv-empty-state {
  text-align: center;
  padding: 16px 10px;
  color: var(--text-4);
}

.sv-empty-icon {
  font-size: 24px;
  opacity: 0.3;
  margin-bottom: 4px;
}

.sv-empty-text {
  font-size: 11px;
}

/* ========== TTS 时间戳导入 UI ========== */
.sv-import-tts-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sv-import-tts-btn:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* TTS 提示横条（已有字幕时显示在列表上方） */
.sv-tts-hint-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04));
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
}
.sv-tts-hint-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.sv-tts-hint-text {
  flex: 1;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.45;
}
.sv-tts-hint-text b {
  color: #059669;
  font-weight: 700;
}
.sv-tts-hint-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sv-tts-hint-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

/* TTS 空状态卡片（没有字幕时的大按钮卡片） */
.sv-tts-empty-state {
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
  border: 1px dashed rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 20px 16px !important;
  text-align: center;
}
.sv-tts-empty-icon {
  font-size: 36px !important;
  opacity: 0.9 !important;
  margin-bottom: 10px !important;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.35));
}
.sv-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: #059669;
  margin-bottom: 6px;
}
.sv-tts-empty-state .sv-empty-text {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 14px;
}
.sv-tts-empty-state .sv-empty-text b {
  color: #059669;
  font-weight: 700;
}
.sv-tts-import-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  margin-bottom: 10px;
}
.sv-tts-import-main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}
.sv-tts-import-main-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.sv-tts-import-icon {
  font-size: 16px;
}
.sv-empty-sub {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 2px;
}

.sv-entries-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sv-entry-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  cursor: grab;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}

.sv-entry-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sv-entry-item.active {
  border-color: var(--entry-color, var(--accent));
  background: color-mix(in srgb, var(--entry-color, var(--accent)) 10%, transparent);
}

.sv-entry-color-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--entry-color, var(--accent));
}

.sv-entry-drag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  color: var(--text-4);
  font-size: 12px;
  cursor: grab;
  opacity: 0.5;
}

.sv-entry-item:hover .sv-entry-drag {
  opacity: 0.8;
}

.sv-entry-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--entry-color, var(--accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.sv-entry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sv-entry-text {
  width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--bg-1);
  color: var(--text-1);
  resize: vertical;
  outline: none;
  line-height: 1.4;
}

.sv-entry-text:focus {
  border-color: var(--accent);
}

.sv-entry-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sv-entry-pos {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-4);
}

.sv-entry-pos label {
  font-weight: 600;
}

.sv-entry-pos input {
  width: 38px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--bg-1);
  color: var(--text-2);
  text-align: center;
  outline: none;
}

.sv-entry-pos input:focus {
  border-color: var(--accent);
}

.sv-entry-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  font-size: 14px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.15s;
}

.sv-entry-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 滚动条 */
.sv-samples-list::-webkit-scrollbar,
.sv-control-panel::-webkit-scrollbar {
  width: 4px;
}

.sv-samples-list::-webkit-scrollbar-thumb,
.sv-control-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.sv-samples-list::-webkit-scrollbar-thumb:hover,
.sv-control-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==== 字幕时间轴样式 - 优化版 ==== */

.sv-timeline {
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(20,20,40,0.45));
  padding: 8px 18px 14px;
  flex-shrink: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* 时间轴在workspace外面时，全宽显示 */
.wizard-card > .sv-timeline {
  margin-top: 6px;
}

.sv-timeline.is-empty .sv-timeline-scroll {
  opacity: 0.4;
  pointer-events: none;
}

/* ===== 工具栏：混剪风格 ===== */
.sv-timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 8px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 6px;
}
.sv-zoom-controls,
.sv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sv-timeline-header-hint {
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}
.sv-reset-pos-btn {
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
  font-family: inherit;
}
.sv-reset-pos-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #fff;
  border-color: rgba(99, 102, 241, 0.6);
}

/* 缩放控制 */
.sv-zoom-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
  font-family: inherit;
}

.sv-zoom-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.sv-zoom-btn:active {
  transform: scale(0.95);
}

.sv-fit-btn {
  font-size: 11px !important;
  min-width: 40px !important;
}

.sv-zoom-level {
  font-size: 11px;
  color: var(--text-3);
  min-width: 50px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sv-zoom-hint {
  font-size: 10px;
  color: var(--text-4);
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border-2);
}

/* ===== 主体：左右分栏（标签列 + 滚动区） ===== */
.sv-timeline-body {
  display: flex;
  align-items: flex-start; /* 子项随内容高，避免被容器拉伸后内部再滚动 */
  width: 100%;
  /* ★ 2026-09-16 保守治理：自定义字幕轨道多时 body 区内部垂直滚动，
     不依赖 flex 高度分配（auto 高度容器下 flex-grow 无效会塌成 0）；
     直接限制 body 高度，窗口矮时随视口收缩 */
  max-height: min(320px, calc(100vh - 480px));
  overflow-y: scroll;
}

/* 左侧标签列 */
.sv-timeline-labels {
  position: relative;
  width: 120px;
  min-width: 120px;
  padding: 0 8px 0 0;
  border-right: 1px solid var(--border-2);
  margin-right: 4px;
  display: flex;
  flex-direction: column;
}
.sv-labels-header {
  height: 20px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  line-height: 20px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 6px;
  flex-shrink: 0;
}
.sv-track-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
  height: 36px;          /* 与右侧 .sv-track 高度对齐 */
  min-height: 36px;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.sv-label-dialog { border-left-color: #6366f1; color: #a5b4fc; }
.sv-label-custom { border-left-color: #f97316; color: #fdba74; }
.sv-label-music  { border-left-color: #10b981; color: #6ee7b7; }
.sv-track-label:hover { background: rgba(255,255,255,0.08); }
.sv-label-icon   { font-size: 12px; line-height: 1; }
/* ★ 2026-09-15 轨道标签拖拽换序反馈 */
.sv-track-label { cursor: grab; }
.sv-track-label:active { cursor: grabbing; }
.sv-track-label.sv-track-sorting {
  background: rgba(99, 102, 241, 0.22);
  border: 1px dashed rgba(165, 180, 252, 0.7);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
}

/* 右侧滚动时间轴 */
.sv-timeline-scroll {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  background: linear-gradient(180deg, rgba(15, 15, 25, 0.6), rgba(10, 10, 20, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  /* 高度随内容，避免自定义多 lane 被裁切（上限防止过长） */
  height: auto;
  min-height: 180px;
  /* 高度随内容：外层 .sv-timeline-body 统一滚动，避免内部再出现纵向滚动条导致轨道名与轨道错位 */
  max-height: none;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.sv-timeline-inner {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

/* 时间轴单独一行时，轨道更高 */
.wizard-card > .sv-timeline .sv-track {
  min-height: 36px;
}

.wizard-card > .sv-timeline .sv-track-content {
  height: 36px;
}

.sv-timeline-scroll::-webkit-scrollbar {
  height: 6px;
}

.sv-timeline-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

.sv-timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.sv-timeline-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.6);
}
/* ★ 2026-09-15 字幕音乐步骤：时间轴卡片与背景音乐等所有卡片任何时候强制分两行（防御性布局） */
.create-wizard .wizard-step-content .wizard-card,
.create-wizard .wizard-step-content .sv-timeline-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ★ 2026-09-16 字幕音乐步骤内容容器：强制块级纵向流，杜绝窗口缩放/布局变化导致
   时间轴与背景音乐等卡片并排同行（父级防御，双保险） */
.create-wizard .wizard-step-content.active {
  display: block !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  grid-template-columns: none !important;
}
/* ★ 2026-09-16 步骤1「识别语言」卡片：上方 block !important 会覆盖 inline display:none，这里针对 id 强制恢复隐藏 */
#extract-lang-card {
  display: none !important;
}
/* ★ 2026-09-16 字幕音乐「视频质量」卡片：同上，inline display:none 会被 .wizard-card block !important 覆盖，强制隐藏(后端默认 medium 逻辑保留) */
.create-wizard .wizard-step-content .sv-quality-card {
  display: none !important;
}
/* 时间轴卡片标题条与内容同宽 */
.sv-timeline-card .sv-timeline-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sv-timeline-card .mix-timeline-hint {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  padding: 2px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}

/* 时间刻度 - 混剪风格（不再左偏100px，由分栏控制） */
.sv-timeline-ruler {
  position: relative;
  height: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  margin-bottom: 6px;
}

.sv-timeline-ruler:hover {
  background: rgba(16, 185, 129, 0.08);
}

.sv-ruler-tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
}

.sv-ruler-tick.major {
  width: 1px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.sv-ruler-tick.minor {
  width: 1px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.sv-ruler-label {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
  transform: translateX(-50%);
}

.sv-ruler-tick.is-first .sv-ruler-label {
  transform: translateX(0);
}

.sv-ruler-tick.is-last .sv-ruler-label {
  transform: translateX(-100%);
}

/* 轨道容器 - 混剪风格（不左偏，由分栏控制） */
.sv-timeline-tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex: 1;
}

.sv-timeline-tracks:hover {
  background: rgba(99, 102, 241, 0.02);
}

/* 单条轨道 - 更高更清晰（不再需要绝对定位 label） */
.sv-track {
  display: flex;
  align-items: stretch;
  min-height: 32px;
  position: relative;
}

.sv-track-content {
  position: relative;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 32px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.sv-track-entries {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 不同轨道的背景色区分 */
.sv-track-dialog .sv-track-content {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.12);
}

.sv-track-label-anchor .sv-track-content {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.12);
}

.sv-track-custom .sv-track-content {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.12);
}

/* 自定义字幕多 lane 子轨道 */
.sv-sub-track {
  position: relative;
  height: 32px;
  margin-bottom: 4px;
}
.sv-sub-track:last-child {
  margin-bottom: 0;
}
.sv-sub-track .sv-track-entries {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 多 lane 时 custom 轨道内容区自动撑开高度 */
.sv-track-custom .sv-track-content:has(.sv-sub-track) {
  height: auto;
  min-height: 32px;
  padding: 2px 0;
}

.sv-track-music .sv-track-content {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.12);
}

/* 轨道条目 - 混剪风格 */
.sv-track-entry {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s;
  overflow: hidden;
  z-index: 2;
  min-width: 6px;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 对话字幕 - 靛蓝渐变 */
.sv-track-entry.sv-entry-dialog {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* 标签字幕 - 绿色渐变 */
.sv-track-entry.sv-entry-label {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* 自定义字幕 - 橙色渐变 */
.sv-track-entry.sv-entry-custom {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* 音乐 - 紫色渐变 */
.sv-track-entry.sv-entry-music {
  background: linear-gradient(135deg, #a855f7, #9333ea);
}

/* ★ 2026-10-14 统一：所有字幕条目 hover 不位移（消除"往左上角跑/撇"），仅高亮提示；
   字幕条目（对话/自定义/标签）两端 resize 手柄已在渲染层移除（拖拽一律移动，与对话字幕一致） */
.sv-track-entry:hover {
  opacity: 1;
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 5;
}

/* ★ 2026-10-14 窄条目与对话字幕行为一致：禁用 hover 位移（消除窄条 hover 抖动闪烁）、
   隐藏两端 resize 手柄与右上操作按钮（避免窄条上误触缩放/按钮 hover 循环），拖拽一律按移动 */
.sv-track-entry.sv-entry-narrow:hover {
  transform: none;
}
.sv-track-entry.sv-entry-narrow .sv-entry-handle {
  display: none;
}
.sv-track-entry.sv-entry-narrow .sv-entry-actions {
  display: none;
}

.sv-track-entry.is-dragging {
  opacity: 0.95;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(16, 185, 129, 0.5);
  transition: none;
  z-index: 100;
  cursor: grabbing;
  transform: none;
}

/* 当前播放条目高亮（不位移，与 hover 一致避免跳动） */
.sv-track-entry.is-current {
  box-shadow: 0 0 0 2px #10b981, 0 0 16px rgba(16, 185, 129, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 20;
  transform: none;
}

/* 激活条目（选中状态） */
.sv-track-entry.is-active {
  box-shadow: 0 0 0 2px #fbbf24, 0 4px 14px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 15;
}

/* 拖拽调整手柄 - 始终可见 */
.sv-entry-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-entry-handle::before {
  content: '';
  width: 3px;
  height: 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sv-handle-left {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.sv-handle-right {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.sv-entry-handle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.sv-track-entry:hover .sv-entry-handle,
.sv-track-entry.is-current .sv-entry-handle,
.sv-track-entry.is-active .sv-entry-handle {
  opacity: 1;
}

.sv-track-entry .sv-entry-text {
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  pointer-events: none;
  flex: 1;
  letter-spacing: 0.2px;
}

/* 可编辑的文本样式 */
.sv-track-entry .sv-entry-text-editable {
  pointer-events: auto;
  cursor: text;
}

.sv-track-entry .sv-entry-text-editable:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  padding: 1px 3px;
}

.sv-track-entry .sv-entry-text-editable[contenteditable="true"] {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
  text-shadow: none;
  padding: 2px 4px;
  border-radius: 3px;
  outline: none;
  min-width: 80px;
  white-space: normal;
  overflow: visible;
  word-break: break-all;
}

/* 操作按钮容器 */
.sv-track-entry .sv-entry-actions {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 5;
}

.sv-track-entry:hover .sv-entry-actions,
.sv-track-entry.is-current .sv-entry-actions,
.sv-track-entry.is-dragging .sv-entry-actions {
  opacity: 1;
}

.sv-track-entry .sv-entry-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, transform 0.15s;
  padding: 0;
}

.sv-track-entry .sv-entry-btn:hover {
  background: #ff4757;
  color: white;
  transform: scale(1.1);
}

.sv-track-entry .sv-entry-btn:active {
  transform: scale(0.95);
}

.sv-track-entry .sv-entry-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'SF Mono', 'Consolas', monospace;
  flex-shrink: 0;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 2px;
}

.sv-track-entry .sv-entry-time-editable {
  pointer-events: auto;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 2px;
  transition: background 0.15s;
}

.sv-track-entry .sv-entry-time-editable:hover {
  background: rgba(255, 255, 255, 0.2);
}

.sv-track-entry .sv-entry-time-sep {
  opacity: 0.7;
  font-size: 9px;
}

.sv-track-entry .sv-entry-time-start,
.sv-track-entry .sv-entry-time-end {
  font-size: 9px;
}

/* 设置面板样式 */
.sv-entry-settings-panel {
  position: fixed;
  width: 800px;
  max-width: calc(100vw - 24px);
  /* ★ 2026-09-15 面板改为 flex 纵向布局：header 固定、body 内部滚动、footer 常驻，
     修复"弹窗下方内容被黑块吞掉/滚动不到底部"（原双层 max-height+overflow 嵌套失效） */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(20, 20, 35, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: svEspSlideIn 0.2s ease-out;
}

@keyframes svEspSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sv-entry-settings-panel .sv-esp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-entry-settings-panel .sv-esp-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}

.sv-entry-settings-panel .sv-esp-close {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.sv-entry-settings-panel .sv-esp-close:hover {
  background: rgba(255, 71, 87, 0.8);
  color: #fff;
}

.sv-entry-settings-panel .sv-esp-body {
  padding: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
}

.sv-entry-settings-panel .sv-esp-section {
  margin-bottom: 12px;
}

.sv-entry-settings-panel .sv-esp-section-half {
  flex: 1;
  min-width: 0;
}

.sv-entry-settings-panel .sv-esp-section-half .sv-esp-field {
  min-width: 0;
}

.sv-entry-settings-panel .sv-esp-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.sv-entry-settings-panel .sv-esp-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.sv-entry-settings-panel .sv-esp-textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}

.sv-entry-settings-panel .sv-esp-textarea:focus {
  border-color: rgba(99, 102, 241, 0.6);
  background: rgba(255, 255, 255, 0.12);
}

.sv-entry-settings-panel .sv-esp-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.sv-entry-settings-panel .sv-esp-input:focus {
  border-color: rgba(99, 102, 241, 0.6);
}

.sv-entry-settings-panel .sv-esp-range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  outline: none;
}

.sv-entry-settings-panel .sv-esp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #6366f1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.sv-entry-settings-panel .sv-esp-range::-webkit-slider-thumb:hover {
  background: #818cf8;
}

.sv-entry-settings-panel .sv-esp-color {
  width: 100%;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.sv-entry-settings-panel .sv-esp-pos-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-entry-settings-panel .sv-esp-pos-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-entry-settings-panel .sv-esp-pos-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 32px;
}

.sv-entry-settings-panel .sv-esp-pos-item .sv-esp-range {
  flex: 1;
}

.sv-entry-settings-panel .sv-esp-pos-value {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  min-width: 35px;
  text-align: right;
  font-family: 'SF Mono', monospace;
}

.sv-entry-settings-panel .sv-esp-toggles {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sv-entry-settings-panel .sv-esp-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s;
}

.sv-entry-settings-panel .sv-esp-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sv-entry-settings-panel .sv-esp-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #6366f1;
}

.sv-entry-settings-panel .sv-esp-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-entry-settings-panel .sv-esp-footer-right {
  display: flex;
  gap: 8px;
}

.sv-entry-settings-panel .sv-esp-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.sv-entry-settings-panel .sv-esp-btn-save {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.sv-entry-settings-panel .sv-esp-btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.sv-entry-settings-panel .sv-esp-btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.sv-entry-settings-panel .sv-esp-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

.sv-entry-settings-panel .sv-esp-btn-delete {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.sv-entry-settings-panel .sv-esp-btn-delete:hover {
  background: #ff4757;
  color: #fff;
}

/* 面板滚动条样式 */
.sv-entry-settings-panel .sv-esp-body::-webkit-scrollbar {
  width: 6px;
}

.sv-entry-settings-panel .sv-esp-body::-webkit-scrollbar-track {
  background: transparent;
}

.sv-entry-settings-panel .sv-esp-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sv-entry-settings-panel .sv-esp-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 可编辑文本样式 - 保持兼容 */
.sv-track-entry .sv-entry-text-editable {
  cursor: pointer;
}

/* 面板增强样式 */
.sv-esp-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-esp-icon {
  font-size: 18px;
}

.sv-esp-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
}

.sv-esp-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin: 16px 0;
}

.sv-esp-textarea-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

.sv-esp-time-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sv-esp-time-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  min-width: 32px;
}

.sv-esp-duration-display {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.sv-esp-duration-value {
  color: #6366f1;
  font-weight: 600;
  font-family: 'SF Mono', monospace;
}

.sv-esp-preset-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.sv-esp-preset {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.sv-esp-preset:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.sv-esp-preset.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #fff;
}

.sv-esp-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sv-esp-field-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.sv-esp-select {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.sv-esp-select:focus {
  border-color: rgba(99, 102, 241, 0.6);
}

.sv-esp-range-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-esp-range-value {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 36px;
  text-align: right;
  font-family: 'SF Mono', monospace;
}

.sv-esp-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.sv-esp-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sv-esp-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  border-radius: 22px;
}

.sv-esp-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: 0.3s;
  border-radius: 50%;
}

.sv-esp-switch input:checked + .sv-esp-switch-slider {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.sv-esp-switch input:checked + .sv-esp-switch-slider:before {
  transform: translateX(18px);
}

.sv-esp-toggles-section {
  display: flex;
  gap: 12px;
}

.sv-esp-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.sv-esp-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sv-esp-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #6366f1;
}

.sv-esp-toggle:has(input:checked) {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
}

.sv-esp-toggle-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.sv-esp-btn-icon {
  font-size: 14px;
}

.sv-esp-btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  min-width: 120px;
}

.sv-esp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.sv-esp-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.sv-esp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

.sv-esp-btn-danger {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.sv-esp-btn-danger:hover {
  background: #ff4757;
  color: #fff;
  border-color: #ff4757;
}

.sv-esp-color:disabled,
.sv-esp-range:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sv-track-entry .sv-entry-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 40, 0.95);
  color: white;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sv-track-entry:hover .sv-entry-tooltip {
  opacity: 1;
}

/* 对话字幕条目 - 紫色主题 */
.sv-entry-dialog {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.8));
}

.sv-entry-dialog:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.sv-entry-dialog.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.7), 0 0 0 2px rgba(167, 139, 250, 0.8);
  z-index: 6;
}

/* 标签字幕条目 - 绿色主题 */
.sv-entry-label {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), rgba(16, 185, 129, 0.8));
}

.sv-entry-label:hover {
  background: linear-gradient(135deg, #22c55e, #10b981);
}

.sv-entry-label.active {
  background: linear-gradient(135deg, #22c55e, #10b981);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.7);
  z-index: 6;
}

/* 自定义字幕条目 - 橙色主题 */
.sv-entry-custom {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.85), rgba(239, 68, 68, 0.8));
}

.sv-entry-custom:hover {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.sv-entry-custom.active {
  background: linear-gradient(135deg, #f97316, #ef4444);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.7);
  z-index: 6;
}

/* 播放指针 - 借鉴混剪时间轴样式 */
.sv-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8), 0 0 16px rgba(16, 185, 129, 0.4);
  pointer-events: none;
  z-index: 10;
  display: block;
}

.sv-playhead::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -7px;
  width: 16px;
  height: 16px;
  background: #10b981;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.9), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}

.sv-playhead::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 10px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0));
  pointer-events: none;
}

/* 拖拽时允许接收事件 */
.sv-playhead.is-draggable,
.sv-playhead.is-dragging {
  pointer-events: auto;
  cursor: ew-resize;
}

.sv-playhead.is-draggable::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 22px;
  background: transparent;
}

.sv-playhead.is-playing {
  display: block;
}

.sv-playhead.is-playing::before {
  background: #10b981;
  transform: rotate(-45deg) scale(1.15);
  animation: sv-playhead-pulse 1.2s ease-in-out infinite;
}

@keyframes sv-playhead-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.9), 0 2px 6px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 20px rgba(16, 185, 129, 1), 0 2px 8px rgba(0, 0, 0, 0.5); }
}

.sv-playhead.is-paused {
  display: block;
  opacity: 0.75;
}

.sv-playhead.is-paused::before {
  background: #94a3b8;
}

.sv-playhead.is-dragging::before {
  transform: rotate(-45deg) scale(1.3);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 时间轴底部信息区：★ 2026-09-15 与视频混剪一致，时间/当前文字/提示合并为一条（透明+分隔线） */
.sv-current-time {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  font-size: 12px;
  flex-shrink: 0;
}

.sv-current-text {
  color: var(--text-1);
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.4;
}

.sv-timeline.is-empty .sv-timeline-legend {
  opacity: 0.5;
}

/* 底部操作提示条（参考混剪 mix-legend：无背景、上边框分隔、单条提示） */
.sv-timeline-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-2);
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.6;
}
.sv-timeline-legend-hint {
  color: var(--text-2);
}
.sv-timeline-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==== 声音指示器 ==== */

.sv-sound-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.sv-sound-indicator:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.sv-sound-icon {
  font-size: 14px;
  line-height: 1;
}

/* ==== 对话字幕动态样式 ==== */

.dialog-frame {
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.dialog-text-content {
  display: inline-block;
  transition: opacity 0.3s ease;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.dialog-frame[style*="opacity: 0.5"] .dialog-text-content {
  opacity: 0.6;
}

/* 对话字幕淡入动画 */
@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.dialog-frame.active {
  animation: dialogFadeIn 0.3s ease;
}

/* ==== 时间轴优化样式 ==== */

.sv-timeline-track {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sv-timeline-entry {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sv-timeline-entry:hover {
  transform: scaleY(1.15);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.sv-timeline-entry.active {
  animation: activePulse 1.5s ease-in-out infinite;
}

@keyframes activePulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
  }
  50% {
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.8);
  }
}

.sv-timeline-progress {
  background: linear-gradient(90deg, 
    rgba(99, 102, 241, 0.4) 0%, 
    rgba(139, 92, 246, 0.4) 50%,
    rgba(236, 72, 153, 0.4) 100%);
}

/* 当前时间指示器 */
.sv-timeline-progress::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}

/* 当前播放信息栏优化（★ 2026-09-15 已并入 .sv-timeline-legend 单条提示） */
/* ===== ���������ǿ�����֡���ͷ������ ===== */

/* ��͸�����ֲ� */
.sv-esp-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  animation: svEspBackdropIn 0.18s ease-out;
  transition: opacity 0.16s ease;
}

.sv-esp-backdrop.is-fading-out {
  opacity: 0;
}

@keyframes svEspBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* �۽�����Ŀ������ */
.sv-track-entry.sv-entry-focused {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.9), 0 0 18px rgba(99, 102, 241, 0.55);
  z-index: 5;
  transform: translateY(-1px);
  transition: box-shadow 0.2s, transform 0.2s;
}

/* ���رն��� */
.sv-entry-settings-panel.is-closing {
  animation: svEspSlideOut 0.16s ease-in forwards;
}

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

/* ��ͷָʾ�� */
.sv-entry-settings-panel .sv-esp-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(20, 20, 35, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}

.sv-entry-settings-panel.sv-esp-panel-below .sv-esp-arrow {
  top: -7px;
  border-right: none;
  border-bottom: none;
}

.sv-entry-settings-panel.sv-esp-panel-above .sv-esp-arrow {
  bottom: -7px;
  border-left: none;
  border-top: none;
}

/* ����Ϸ���ʱ��Ӱ��ǿ */
.sv-entry-settings-panel.sv-esp-panel-above {
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ���水ť�Ľ���״̬ */
.sv-entry-settings-panel .sv-esp-btn-save:disabled {
  cursor: not-allowed;
}

/* ������Ŀ��ͣ������ʾ */
.sv-entry-music:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 40px 100%;
  animation: svMusicShimmer 1.2s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes svMusicShimmer {
  from { background-position: -40px 0; }
  to { background-position: 40px 0; }
}

/* ˫��������ʾ��� */
.sv-track-entry {
  cursor: pointer;
}

.sv-track-entry .sv-entry-handle,
.sv-track-entry .sv-entry-btn {
  cursor: ew-resize;
}

.sv-entry-music .sv-entry-handle {
  cursor: pointer;
}

/* ============================================================
   【太阳主题】创建任务向导配色覆盖
   仅作用于 .create-wizard 作用域，不影响全局其他页面
   配色：太阳橙 #F97316 / 亮橙 #FB923C / 金黄 #F59E0B / 琥珀 #FBBF24
   ============================================================ */

/* ---- 侧边栏进度总览卡片：暖阳渐变 ---- */
.create-wizard .wizard-progress-overview {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(245, 158, 11, 0.06) 100%);
  border: 1px solid rgba(249, 115, 22, 0.3);
}

/* ---- 进度条填充：太阳橙 → 金黄 ---- */
.create-wizard .wizard-progress-fill {
  background: linear-gradient(90deg, #F97316 0%, #FBBF24 100%);
}

/* ★ 2026-10-28 步骤侧边栏可点击跳转 */
.create-wizard .wizard-step-item { cursor: pointer; }

/* ---- 当前步骤左竖条 ---- */
.create-wizard .wizard-step-item::before {
  background: #F97316;
}

/* ---- 当前步骤高亮背景与边框 ---- */
.create-wizard .wizard-step-item.active {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
}

/* ---- 当前步骤编号圆点：暖白底 + 太阳橙字 + 暖光晕 ---- */
.create-wizard .wizard-step-item.active .wizard-step-number {
  background: #FFF7ED;
  color: #EA580C;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.45);
}

/* ---- 当前步骤标题 / 状态文字：亮橙 ---- */
.create-wizard .wizard-step-item.active .wizard-step-title {
  color: #FDBA74;
}
.create-wizard .wizard-step-item.active .wizard-step-status {
  color: #FB923C;
}

/* ---- 已完成步骤：琥珀金 ---- */
.create-wizard .wizard-step-item.completed {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}

/* ---- 已完成步骤编号圆点：橙金渐变 ---- */
.create-wizard .wizard-step-item.completed .wizard-step-number {
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
}

/* ---- 已完成步骤标题：暖金 ---- */
.create-wizard .wizard-step-item.completed .wizard-step-title {
  color: #F59E0B;
}

/* ---- 步骤标题竖条：橙金渐变 ---- */
.create-wizard .wizard-step-header h1::before {
  background: linear-gradient(180deg, #F97316 0%, #F59E0B 100%);
}

/* ---- 卡片顶部渐变线：暖橙 ---- */
.create-wizard .wizard-card::before {
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.32), transparent);
}

/* ---- 卡片 hover：暖橙边框 + 暖光晕 ---- */
.create-wizard .wizard-card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(249, 115, 22, 0.15) inset,
              0 0 30px rgba(249, 115, 22, 0.1);
}

/* ---- 卡片标题图标：太阳橙金渐变 ---- */
.create-wizard .wizard-card-title .icon {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.create-wizard .wizard-card:hover .wizard-card-title .icon {
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

/* ---- 主按钮（开始改写/开始合成等）：太阳橙金渐变 ---- */
.create-wizard .btn-primary {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}
.create-wizard .btn-primary:hover {
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.5);
}

/* ---- 智能提示：暖阳化（原本已是 amber，微调更暖） ---- */
.create-wizard .wizard-smart-tip {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(245, 158, 11, 0.06) 100%);
  border: 1px solid rgba(249, 115, 22, 0.28);
}
.create-wizard .wizard-smart-tip:hover {
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.12);
}

/* ---- 向导内输入框 / 文本域聚焦：暖橙描边 ---- */
.create-wizard .wizard-card textarea:focus,
.create-wizard .wizard-card input:focus,
.create-wizard .wizard-card select:focus {
  border-color: #F97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* ---- 向导内时间轴滚动条 / 刻度 hover：暖橙 ---- */
.create-wizard .sv-timeline-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.6);
}
.create-wizard .sv-timeline-ruler:hover {
  background: rgba(249, 115, 22, 0.08);
}

/* ---- 浅色主题下侧边栏微调（保持暖色主调） ---- */
:root[data-theme="light"] .create-wizard .wizard-progress-overview {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(249, 115, 22, 0.25);
}

/* ---- 向导内次级主按钮（字幕音乐等步骤的 sv-esp 按钮）：太阳橙金 ---- */
.create-wizard .sv-esp-btn-primary {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  color: #fff;
}
.create-wizard .sv-esp-btn-primary:hover {
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

/* ---- 向导侧边栏：任务进行中步骤（实时进度高亮）---- */
.create-wizard .wizard-step-item.running {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.55);
}
.create-wizard .wizard-step-item.running .wizard-step-number {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  color: #fff;
  animation: runningPulse 1.6s ease-in-out infinite;
}
.create-wizard .wizard-step-item.running .wizard-step-status {
  color: #F97316;
  font-weight: 600;
}
@keyframes runningPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 12px 2px rgba(249, 115, 22, 0.5); }
}

/* ============================================================
   【太阳主题】创建任务流水线：深色残留 → 浅底深字
   太阳模式(data-theme=light)下，把创建任务向导里仍深色的容器
   统一改成浅色底 + 深色字，保证对比度。
   仅作用于 .create-wizard 作用域，不影响深色主题。
   ============================================================ */
:root[data-theme="light"] .create-wizard .wizard-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb;
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .create-wizard .wizard-progress-bar-container {
  background: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] .create-wizard .wizard-progress-stats {
  color: #334155;
}
:root[data-theme="light"] .create-wizard .wizard-step-item:hover {
  background: #FEF3E2;
}
:root[data-theme="light"] .create-wizard .wizard-step-item.active {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.45);
}
:root[data-theme="light"] .create-wizard .wizard-step-item.active .wizard-step-title {
  color: #C2410C;
}
:root[data-theme="light"] .create-wizard .wizard-step-item.active .wizard-step-status {
  color: #C2410C;
}
:root[data-theme="light"] .create-wizard .wizard-step-item.completed .wizard-step-title {
  color: #B45309;
}
:root[data-theme="light"] .create-wizard .wizard-step-number {
  background: #F1F5F9;
  color: #334155;
}
:root[data-theme="light"] .create-wizard .wizard-step-item.completed .wizard-step-number {
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  color: #ffffff;
}
/* ---- 卡片：白底 + 浅边框 ---- */
:root[data-theme="light"] .create-wizard .wizard-card,
:root[data-theme="light"] .create-wizard .wizard-param-card,
:root[data-theme="light"] .create-wizard .wizard-compare-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
:root[data-theme="light"] .create-wizard .wizard-compare-card-header {
  background: #F8FAFC;
  color: #334155;
  border-bottom: 1px solid #e5e7eb;
}
:root[data-theme="light"] .create-wizard .wizard-compare-card-header.polished {
  color: #B45309;
}
:root[data-theme="light"] .create-wizard .wizard-compare-textarea {
  color: #1e293b;
}
/* ---- 输入控件：浅底深字 ---- */
:root[data-theme="light"] .create-wizard .wizard-card textarea,
:root[data-theme="light"] .create-wizard .wizard-card input[type="text"],
:root[data-theme="light"] .create-wizard .wizard-card input[type="number"],
:root[data-theme="light"] .create-wizard .wizard-card select,
:root[data-theme="light"] .create-wizard .wizard-param-card input,
:root[data-theme="light"] .create-wizard .wizard-param-card select {
  background: #F8FAFC;
  color: #1e293b;
  border-color: #d1d5db;
}
:root[data-theme="light"] .create-wizard .wizard-param-card h4 {
  color: #1e293b;
}
:root[data-theme="light"] .create-wizard .wizard-data-source {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
  color: #065f46;
}
:root[data-theme="light"] .create-wizard .wizard-smart-tip {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.10) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(249, 115, 22, 0.25);
}
:root[data-theme="light"] .create-wizard .wizard-smart-tip-title {
  color: #C2410C;
}
:root[data-theme="light"] .create-wizard .wizard-smart-tip-desc,
:root[data-theme="light"] .create-wizard .wizard-smart-tip-meta {
  color: #475569;
}

/* 2026-09-08：口型同步素材卡视频容器统一 3:4，避免竖屏/横屏撑高不一导致网格错乱 */
.lipsync-library-item .thumb-video-wrap {
  aspect-ratio: 3 / 4 !important;
  max-height: none;
}


/* 2026-09-09 播放原音按钮：播放中样式（绿色高亮 + 暂停图标） */
.vp-play-btn--active { background: rgba(16, 185, 129, 0.16) !important; color: #10b981 !important; transform: scale(1.15); border-radius: 50%; }

/* ★ 2026-09-14 混剪素材设置弹窗（复用 .sv-entry-settings-panel 基础样式，仅补充专属元素） */
.mix-esp-material {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-bottom: 6px;
}
.mix-esp-material-icon { font-size: 18px; flex-shrink: 0; }
.mix-esp-material-name {
  font-size: 13px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-esp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mix-esp-actions .btn { flex: 1 1 auto; }
.sv-esp-size-hint {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  padding: 0 2px;
}

.mix-esp-footer {
  /* ★ 2026-09-14 完成按钮固定可见：面板内容滚动时 footer 吸底，不再需要滚到底才能看到"完成" */
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 4px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(20, 20, 35, 0), rgba(20, 20, 35, 0.96) 45%);
  z-index: 3;
}
.mix-esp-footer .btn-primary {
  min-width: 96px;
}

/* ★ 2026-09-15 混剪 / 字幕音乐统一进度条样式（结果区环形百分比 + 阶段 + 横条） */
.mix-result-progress{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px;}
.mix-progress-ring{position:relative;width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.mix-progress-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;border:5px solid rgba(59,130,246,.14);border-top-color:#3b82f6;animation:mix-ring-spin 1.1s linear infinite;}
.mix-progress-percent{position:relative;z-index:1;font-size:16px;font-weight:700;color:#1e3a8a;}
.mix-progress-stage{font-size:13px;color:#6b7280;text-align:center;}
.mix-progress-bar{width:100%;max-width:380px;height:8px;border-radius:99px;background:rgba(59,130,246,.12);overflow:hidden;}
.mix-progress-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transition:width .3s ease;}
@keyframes mix-ring-spin{to{transform:rotate(360deg);}}


/* ===== 混剪预览播放动画特效（2026-09-15）===== */
@keyframes mix-bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  55% { transform: scale(1.08); opacity: 1; }
  75% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes mix-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ★ 2026-09-15 可折叠卡片标题（合成设置/同步设置）hover 手感 */
.sv-card-toggle {
  user-select: none;
}
.sv-card-toggle:hover .advanced-arrow {
  transform: translateY(1px);
}
.sv-card-toggle .advanced-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 11px;
  margin-left: 6px;
  color: var(--text-3);
}


/* ★ 2026-09-15 高级设置折叠行（合成设置/同步设置内）：手型 + hover 反馈 */
.advanced-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.advanced-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ★ 2026-09-15 字幕时间轴轨道整行：抓取手感（可上下拖调整层级） */
.sv-track {
  cursor: grab;
}
.sv-track:active {
  cursor: grabbing;
}

/* ★ 2026-09-15 混剪轨道拖拽手柄：统一为抓取手感（原 move） */
.mix-track-drag-handle {
  cursor: grab;
}
.mix-track-drag-handle:active {
  cursor: grabbing;
}


/* ★ 2026-09-15 混剪库素材双击放大预览（图片/视频） */
.mixlib-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.mixlib-lightbox-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.75);
  backdrop-filter: blur(3px);
}
.mixlib-lightbox-body {
  position: relative; z-index: 1; max-width: 88vw; max-height: 88vh;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.mixlib-lightbox-close {
  position: absolute; top: 8px; right: 10px; cursor: pointer;
  font-size: 16px; color: var(--text-2); width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(255,255,255,0.08);
  transition: background 0.15s;
}
.mixlib-lightbox-close:hover { background: rgba(255,255,255,0.18); }
.mixlib-lightbox-title {
  font-size: 13px; color: var(--text-2); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ★ 2026-09-15 自定义字幕批量模式：勾选框 + 条目状态 */
.sv-entry-check-wrap { display: flex; align-items: center; padding-left: 4px; flex-shrink: 0; }
.sv-entry-check-wrap input {
  width: 14px; height: 14px; cursor: pointer;
  accent-color: #f97316;
}
.sv-entry-item.sv-batch-mode .sv-entry-drag { opacity: 0.35; }
.sv-entry-item.sv-batch-mode { border-color: rgba(249, 115, 22, 0.35); }


/* ★ 2026-09-15 混剪库素材卡片拖拽排序：grab/grabbing 鼠标样式 + 拖拽高亮 */
/* ★ 2026-09-15 混剪库素材拖拽排序强化：
   悬停下半部分(meta)=手掌+提示；按下=抓取；拖动=浮起立体金边发光；目标位=亮起高亮 */
.mixlib-drag-card { cursor: default; user-select: none; -webkit-user-select: none; }
.mixlib-drag-card .video-thumb { cursor: default; }
.mixlib-drag-card .video-thumb.mixlib-lightbox-open { cursor: zoom-in; }
.mixlib-drag-card .video-thumb video { cursor: pointer; }
/* meta 区域：悬停手掌 */
.mixlib-drag-card .video-meta { cursor: grab; position: relative; }
.mixlib-drag-card .video-meta:active { cursor: grabbing; }
/* "按住拖动换顺序"提示 */
.mixlib-drag-hint {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; padding: 2px 8px;
  font-size: 10px; line-height: 1.5; color: rgba(148, 163, 184, 0.85);
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}
.mixlib-drag-card .video-meta:hover .mixlib-drag-hint {
  opacity: 1; color: var(--accent);
  background: rgba(99, 102, 241, 0.16);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
}
/* 按下：抓取 + 轻微下沉 */
.mixlib-drag-card.mixlib-press { cursor: grabbing; }
.mixlib-drag-card.mixlib-press .video-meta { cursor: grabbing; }
.mixlib-drag-card.mixlib-press {
  transform: scale(0.985);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
/* 拖动：脱离文档流跟随鼠标，缩放 105% 表示选中（★ 2026-09-15 抓哪跟哪：去掉 translate(-50%,-50%) 中心偏移，定位由 JS 按按下偏移计算） */
.mixlib-drag-card.mixlib-dragging {
  position: fixed;
  pointer-events: none;
  cursor: grabbing;
  z-index: 60;
  opacity: 0.96;
  transform: scale(1.05);
  border-color: rgba(99, 102, 241, 0.9);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(99, 102, 241, 0.6),
    0 0 18px rgba(99, 102, 241, 0.3);
  transition: box-shadow 0.12s ease, opacity 0.12s ease;
}
/* ★ 2026-09-15 拖动时只显示缩略图，隐藏文件名/来源/按钮（避免"整卡特别大"挡视线） */
.mixlib-drag-card.mixlib-dragging .video-meta {
  display: none !important;
}
.mixlib-drag-card.mixlib-dragging .video-thumb,
.mixlib-drag-card.mixlib-dragging .mixlib-thumb {
  border-radius: 12px;
  margin: 0;
}
/* 其他卡片让位时的 FLIP 动画目标态 */
#mixlib-material-grid .video-card {
  will-change: transform;
}
/* 目标位置：亮起高亮 */
.mixlib-drop-target {
  outline: 2px solid rgba(99, 102, 241, 0.95);
  outline-offset: -2px;
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), inset 0 0 20px rgba(99, 102, 241, 0.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}


/* ★ 2026-09-15 混剪库拖拽排序增强 */


/* ★ 2026-09-15 字幕样式设置弹窗（右侧面板瘦身后的设置入口） */
.sv-style-modal {
  position: fixed; inset: 0; z-index: 10020;
  display: flex; align-items: center; justify-content: center;
}
.sv-style-modal-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
}
.sv-style-modal-body {
  position: relative; z-index: 1; width: 380px; max-height: 84vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(20, 20, 35, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
/* ★ 2026-11-04 样式设置弹窗加宽（用户：显示不全，宽度×2.5）：380→950px，超高滚动（content 原有 overflow-y:auto）。
   仅 is-wide 生效，"添加字幕"等小弹窗（无此 class）保持 380px 不受影响。 */
.sv-style-modal.is-wide .sv-style-modal-body { width: min(950px, 94vw); }
/* 卡片内控件行左右双列（用户：加宽后按行的改左右排，压总高度）；
   进阶折叠区与"更多选项"按钮横跨两列，折叠区内部同样双列 */
.sv-style-modal.is-wide .sv-prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.sv-style-modal.is-wide .sv-prop-grid > .sv-prop-advanced,
.sv-style-modal.is-wide .sv-prop-grid > .sv-prop-more { grid-column: 1 / -1; }
.sv-style-modal.is-wide .sv-prop-grid > .sv-prop-advanced { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
/* ★ 2026-11-09 弹窗内容改为"分组纵向排列"（文字外观 / 描边与背景 / 动效与音效），
   每组一个标题 + 卡片纵向堆叠，层次清晰、不堆满两列；卡片内控件仍保持双列。 */
.sv-style-modal.is-wide .sv-style-modal-content { display: flex; flex-direction: column; gap: 16px; align-content: start; }
.sv-style-modal.is-wide .sv-group { display: flex; flex-direction: column; gap: 10px; }
.sv-style-modal.is-wide .sv-group-title {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px; font-size: 13px; font-weight: 700; color: var(--text-1, #f1f5f9);
}
.sv-style-modal.is-wide .sv-group-title .sv-group-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.5);
}
.sv-style-modal.is-wide .sv-group-title .sv-group-sub {
  font-size: 11px; font-weight: 400; color: var(--text-3, #94a3b8);
}
.sv-style-modal.is-wide .sv-group-body { display: flex; flex-direction: column; gap: 12px; }
.sv-style-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.sv-style-modal-header .sv-style-batch-tip { font-size: 11px; font-weight: 400; color: #fbbf24; white-space: nowrap; }
.sv-style-modal-close {
  cursor: pointer; font-size: 15px; color: rgba(255, 255, 255, 0.7);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.sv-style-modal-close:hover { background: rgba(255, 255, 255, 0.15); }
.sv-style-modal-content {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 12px;
}
.sv-style-modal-footer {
  flex-shrink: 0; display: flex; justify-content: flex-end;
  padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* 设置入口按钮 */
.sv-open-style-btn {
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px; background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.sv-open-style-btn:hover { border-color: #6366f1; background: rgba(99, 102, 241, 0.25); }
.sv-remove-entry-btn { margin-left: 4px; }


/* ★ 2026-09-15 字幕勾选框常显 + 每条样式设置按钮 */
.sv-dialog-entry-select { display: flex; align-items: center; padding: 0 6px 0 2px; }
.sv-entry-check-wrap { display: flex; align-items: center; padding: 0 4px; }
.sv-dialog-entry-select input[type=checkbox], .sv-entry-check-wrap input[type=checkbox] {
  width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0;
}
.sv-entry-style-btn {
  background: none; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75);
  border-radius: 6px; width: 22px; height: 22px; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; margin: 0 4px; flex-shrink: 0;
  transition: all .15s;
}
.sv-entry-style-btn:hover { border-color: #6366f1; color: #fff; background: rgba(99,102,241,0.25); }
.sv-action-btn[data-action="style"] { color: rgba(255,255,255,0.7); }
.sv-action-btn[data-action="style"]:hover { color: #a5b4fc; border-color: #6366f1; }

/* ★ 2026-09-15 混剪轨道拖拽把手可见性增强 */
.mix-timeline-label .mix-track-drag-handle {
  color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 1px;
  padding: 2px 5px; border-radius: 4px; user-select: none; line-height: 1; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.mix-timeline-label .mix-track-drag-handle:hover {
  color: #fff; background: rgba(255,255,255,0.15);
}
.mix-timeline-label { display: flex; align-items: center; gap: 4px; }

/* ★ 2026-09-15 对话字幕条目三按钮：右上角一行显示（⚙样式/⏱改时间/🗑删除），让列表多显示几行 */
.sv-dialog-entry-actions {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.sv-dialog-entry:hover .sv-dialog-entry-actions {
  opacity: 1;
}
.sv-dialog-entry-actions .sv-action-btn {
  width: 20px;
  height: 18px;
  font-size: 10px;
}
.sv-dialog-entry-actions .sv-action-btn[data-action="style"] {
  color: #a5b4fc;
}
.sv-dialog-entry-actions .sv-action-btn[data-action="style"]:hover {
  background: rgba(99,102,241,0.25);
  border-color: #6366f1;
}

/* ★ v148 时间轴点击→右侧字幕列表滚动定位高亮 */
.sv-dialog-entry.sv-entry-flash { outline: 2px solid #6366f1; outline-offset: -2px; border-radius: 8px; background: rgba(99,102,241,0.08); transition: background 0.3s ease; }


/* ===== 字幕入场动画 keyframes（★ 2026-09-18 v10，供字幕预览播放时展示特效） ===== */
@keyframes svFadeIn { from { opacity: 0; } }
@keyframes svSlideUp { from { opacity: 0; transform: translateY(36px); } }
@keyframes svSlideDown { from { opacity: 0; transform: translateY(-36px); } }
@keyframes svSlideLeft { from { opacity: 0; transform: translateX(36px); } }
@keyframes svSlideRight { from { opacity: 0; transform: translateX(-36px); } }
@keyframes svZoomIn { from { opacity: 0; transform: scale(0.2); } }
@keyframes svTypeIn { from { opacity: 0; transform: scale(0.5); } }
/* ★ v147 真正的逐字弹入：每字一个 span，逐个缩放+上浮淡入 */
@keyframes svTypeChar { from { opacity: 0; transform: translateY(0.35em) scale(0.6); } }
.sv-type-char { display: inline-block; opacity: 0; animation: svTypeChar 0.35s ease both; white-space: pre; }

@keyframes svTypewriterChar { from { opacity: 0; } to { opacity: 1; } }
.sv-typewriter-char { display: inline-block; opacity: 0; animation: svTypewriterChar 0.3s ease both; white-space: pre; }
.sv-esp-field-wide { width: 100%; }
.sv-esp-anim-wide { width: 100%; }
.sv-esp-reset-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sv-esp-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: #fff; cursor: pointer; transition: background .15s ease; }
.sv-esp-btn:hover { background: rgba(255,255,255,0.18); }
.sv-esp-field-tip { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.4; }



/* ★ 2026-09-23 素材库拖拽排序精修（作用域限定 .asset-grid，不干扰混剪库）：
   更丝滑手感：弹性回弹 + 浮起发光 + 目标位呼吸脉冲 + 压感反馈 */
.asset-grid .video-card {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  will-change: transform;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.asset-grid .video-card:hover {
  transform: translateY(-3px);
  border-color: rgba(129, 140, 248, 0.55);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(99, 102, 241, 0.12),
    0 0 16px rgba(99, 102, 241, 0.14);
}
/* 按下：压感（轻微下沉 + 抓取光晕） */
.asset-grid .mixlib-drag-card.mixlib-press {
  transform: scale(0.98);
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(99, 102, 241, 0.4);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}
/* 拖动：拾起浮起（轻微倾斜 + 霓虹发光 + 双层投影），抓取点缩放不偏移 */
.asset-grid .mixlib-drag-card.mixlib-dragging {
  transform: scale(1.06) rotate(1.5deg);
  border-radius: 14px;
  background: rgba(18, 20, 30, 0.94);
  border-color: rgba(129, 140, 248, 0.95);
  box-shadow:
    0 26px 52px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(129, 140, 248, 0.75),
    0 0 28px rgba(99, 102, 241, 0.42),
    0 0 72px rgba(99, 102, 241, 0.16);
  transition: box-shadow 0.14s ease, border-color 0.14s ease;
}
/* 拖动中缩略图：圆角统一 + 内描边更精致 */
.asset-grid .mixlib-drag-card.mixlib-dragging .video-thumb {
  border-radius: 12px;
  margin: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* 松手回弹：从浮起状态弹回原位（弹性过冲一丢丢更"活"） */
@keyframes assetSettleBounce {
  0%   { transform: scale(1.06); }
  55%  { transform: scale(0.985); }
  75%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.asset-grid .mixlib-drag-card.mixlib-settling {
  animation: assetSettleBounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 目标位：呼吸脉冲（金边 + 内发光波动），替代生硬的 static 高亮 */
@keyframes assetDropPulse {
  0%, 100% {
    outline-color: rgba(129, 140, 248, 0.95);
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.16),
      inset 0 0 16px rgba(99, 102, 241, 0.1);
  }
  50% {
    outline-color: rgba(165, 180, 252, 1);
    box-shadow:
      0 0 0 7px rgba(99, 102, 241, 0.3),
      inset 0 0 28px rgba(99, 102, 241, 0.22);
  }
}
.asset-grid .mixlib-drop-target {
  outline: 2px solid rgba(129, 140, 248, 0.95);
  outline-offset: -2px;
  border-radius: 14px;
  animation: assetDropPulse 1.05s ease-in-out infinite;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 提示徽章：hover 上浮，更"可拖" */
.asset-grid .mixlib-drag-hint {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.asset-grid .mixlib-drag-card .video-meta:hover .mixlib-drag-hint {
  transform: translateY(-1px);
}

/* ==========================================================================
   视觉升级层 V-1（2026-10-08）· 第一印象游戏化增强
   --------------------------------------------------------------------------
   说明：本段为增量追加的视觉增强层，只覆盖样式，不改动任何功能逻辑。
   目标：让第一眼"眼前一亮"——动态星空、流动光带、发光按钮、玻璃质感。
   如需整体回退，删除本段即可（自文件末尾向上至本注释块）。
   ========================================================================== */

/* ---- 动态星空粒子背景（替换静态 body::before 光晕，叠加粒子 + 流动光带） ---- */
body::before {
  background:
    radial-gradient(circle at 15% 15%, var(--glow-primary) 0%, transparent 30%),
    radial-gradient(circle at 85% 25%, var(--glow-accent) 0%, transparent 32%),
    radial-gradient(circle at 45% 75%, var(--glow-secondary) 0%, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(59,130,246,0.15) 0%, transparent 28%);
}

/* 星空粒子：利用多背景径向渐变 + 移动动画营造漂浮感 */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 80% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 10% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 50% 90%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 70% 10%, rgba(255,255,255,0.6), transparent);
  background-size: 480px 480px;
  animation: star-drift 90s linear infinite;
  opacity: 0.45;
}
@keyframes star-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 480px 480px, -480px 240px, 240px -480px, 480px 0, 0 480px, -240px -240px, 480px -480px, -480px 480px; }
}

/* 流动光带：顶部一道缓慢扫过的霓虹光弧 */
body .main-view::before {
  content: '';
  position: fixed;
  top: -40%;
  left: -50%;
  width: 200%;
  height: 60%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(99,102,241,0.06) 40%,
    rgba(236,72,153,0.10) 50%,
    rgba(99,102,241,0.06) 60%,
    transparent 80%
  );
  animation: light-sweep 14s ease-in-out infinite;
  transform: rotate(-6deg);
}
@keyframes light-sweep {
  0%, 100% { transform: rotate(-6deg) translateX(-30%); opacity: 0.6; }
  50% { transform: rotate(-6deg) translateX(30%); opacity: 1; }
}

/* ---- 顶栏：发光渐变底边 + 品牌脉冲 ---- */
.topbar {
  background: rgba(8, 8, 14, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 0 rgba(99,102,241,0.25), 0 8px 24px rgba(0,0,0,0.35);
}
.topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-light) 30%, var(--accent-pink) 60%, transparent);
  animation: bar-glow 4s ease-in-out infinite;
}
@keyframes bar-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* 品牌标记：呼吸发光 */
.brand-mark {
  animation: brand-breathe 3s ease-in-out infinite;
}
@keyframes brand-breathe {
  0%, 100% { box-shadow: 0 0 16px rgba(99,102,241,0.5); }
  50% { box-shadow: 0 0 28px rgba(139,92,246,0.9), 0 0 40px rgba(236,72,153,0.4); }
}

/* 导航项：hover 光晕上浮 */
.topnav a {
  position: relative;
}
.topnav a:hover {
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25), 0 4px 14px rgba(99,102,241,0.18);
  transform: translateY(-1px);
}
.topnav a.active {
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.35), 0 4px 18px rgba(99,102,241,0.25);
}

/* ---- 主按钮：渐变 + 发光呼吸 ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-pink) 120%);
  box-shadow: 0 4px 18px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(139,92,246,0.5), 0 0 22px rgba(236,72,153,0.25);
}
.btn-primary:active { transform: translateY(0); }
/* 按钮扫光 */
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3.2s ease-in-out infinite;
}
@keyframes btn-shine {
  0% { left: -80%; }
  55% { left: 130%; }
  100% { left: 130%; }
}

/* ---- 卡片：玻璃质感 + hover 上浮 ---- */
.card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.12);
}

/* ==========================================================================
   首页 Hero 游戏化增强（2026-10-08）· 配套 home.js
   ========================================================================== */

/* hero 保持相对定位承载装饰层 */
.hero { overflow: hidden; }

/* 斜等轴测装饰粒子：旋转方块，营造"伪等轴测"悬浮感 */
.iso-decor {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 10px;
  transform: rotate(45deg) scaleY(0.58);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.iso-d1 {
  left: 8%; top: 22%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-pink));
  box-shadow: 0 0 30px rgba(99,102,241,0.5);
  animation: iso-float 6s ease-in-out infinite;
}
.iso-d2 {
  right: 10%; top: 30%;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-2));
  box-shadow: 0 0 24px rgba(236,72,153,0.5);
  animation: iso-float 7.5s ease-in-out 0.8s infinite;
}
.iso-d3 {
  left: 18%; bottom: 8%;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-light));
  box-shadow: 0 0 18px rgba(139,92,246,0.5);
  animation: iso-float 5.4s ease-in-out 1.6s infinite;
}
@keyframes iso-float {
  0%, 100% { transform: rotate(45deg) scaleY(0.58) translateY(0); }
  50% { transform: rotate(45deg) scaleY(0.58) translateY(-16px); }
}

/* hero 顶部光晕 */
.hero-halo {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 520px; height: 300px;
  background: radial-gradient(closest-side, rgba(99,102,241,0.18), transparent);
  pointer-events: none;
  z-index: 0;
}

/* CTA 主按钮箭头动效 */
.btn-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s;
}
.btn-primary:hover .btn-arrow { transform: translateX(4px); }


/* ==========================================================================
   登录页游戏化增强（2026-10-08）· 配套 login.js
   ========================================================================== */

/* 登录卡片：发光边框 + 玻璃质感 + 氛围光晕 */
.login-card {
  position: relative;
  border: 1px solid rgba(99,102,241,0.3) !important;
  box-shadow: 0 0 40px rgba(99,102,241,0.18), 0 16px 50px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 32px 28px !important;
  animation: login-card-in 0.5s ease;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 品牌行 */
.login-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.login-brand-mark {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 18px;
  box-shadow: 0 0 24px rgba(99,102,241,0.6);
  animation: login-brand-pulse 3s ease-in-out infinite;
}
@keyframes login-brand-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(99,102,241,0.5); }
  50% { box-shadow: 0 0 32px rgba(139,92,246,0.9), 0 0 48px rgba(236,72,153,0.4); }
}
.login-brand-name { font-weight: 700; font-size: 18px; color: var(--text-0); }
.login-brand-tag { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* 登录按钮：全宽渐变发光 */
.login-card .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-pink));
  box-shadow: 0 6px 24px rgba(99,102,241,0.4);
}


/* ==========================================================================
   视觉提亮层 V-2（2026-10-08）· 更亮、更吸引人 + iso 方块缩小30%
   --------------------------------------------------------------------------
   说明：增量追加，只覆盖默认深色主题的亮度与光效，不影响功能逻辑。
   目标：界面从"偏暗"提亮到"明亮抓人"，斜等轴测装饰方块整体缩小 30%。
   ========================================================================== */

/* ---- 默认主题提亮（仅深色主题 :root，不影响亮色/朱砂主题） ---- */
:root {
  /* 背景提亮一档：从近黑提到明显的深蓝灰，保留对比又不压抑 */
  --bg-0: #12121c;
  --bg-1: #191924;
  --bg-2: #22222f;
  --bg-3: #2d2d3c;
  --border: #45455a;
  --text-0: #ffffff;
  --text-1: #e0e0ee;
  --text-2: #b4b4c6;
  --text-3: #84849c;
  --text-4: #5c5c72;
  /* 光晕更亮更浓，增强"吸引人"的氛围 */
  --glow-primary: rgba(99, 102, 241, 0.55);
  --glow-secondary: rgba(139, 92, 246, 0.45);
  --glow-accent: rgba(236, 72, 153, 0.4);
  --shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

/* ---- 背景氛围：更多层次 + 更亮的光斑 ---- */
body {
  background:
    radial-gradient(circle at 20% 15%, rgba(99, 102, 241, 0.20) 0%, transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(236, 72, 153, 0.16) 0%, transparent 36%),
    radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.16) 0%, transparent 40%),
    linear-gradient(160deg, #14141f 0%, #1b1b2b 55%, #12121c 100%);
}
body::before {
  background:
    radial-gradient(circle at 15% 15%, var(--glow-primary) 0%, transparent 30%),
    radial-gradient(circle at 85% 25%, var(--glow-accent) 0%, transparent 32%),
    radial-gradient(circle at 45% 75%, var(--glow-secondary) 0%, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.20) 0%, transparent 28%);
}
body::after {
  opacity: 0.55;
}

/* ---- hero 光晕更强 ---- */
.hero-halo {
  width: 620px;
  height: 340px;
  background: radial-gradient(ellipse closest-side at 50% 32%, rgba(99,102,241,0.10) 0%, rgba(99,102,241,0.04) 50%, rgba(99,102,241,0) 74%);
}

/* ---- 斜等轴测装饰方块：整体缩小 30% + 更亮更醒目 ---- */
.iso-decor {
  opacity: 0.7;
}
.iso-d1 {
  width: 32px;   /* 46px * 0.7 */
  height: 32px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-pink));
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent-light) 75%, transparent);
}
.iso-d2 {
  width: 22px;   /* 32px * 0.7 */
  height: 22px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-2));
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent-pink) 70%, transparent);
}
.iso-d3 {
  width: 17px;   /* 24px * 0.7 */
  height: 17px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-light));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2) 70%, transparent);
}

/* ---- 副标题文字提亮 ---- */
.hero p {
  color: var(--text-2);
}

/* ---- 主按钮更亮、光晕更强 ---- */
.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #ec4899 120%);
  box-shadow: 0 6px 26px rgba(99, 102, 241, 0.55), 0 0 18px rgba(236, 72, 153, 0.2);
}

/* ---- 网站底部 ICP 备案号（2026-11-13） ---- */
.site-footer {
  width: 100%;
  padding: 20px 16px 28px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
}
.site-footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.site-footer-sep { color: var(--text-4); }
@media (max-width: 640px) {
  .site-footer { padding: 14px 12px 22px; font-size: 11px; }
}