/* ==========================================================
   CreditVideo Studio - High Aesthetics Design System
   Vanilla CSS with Glassmorphism, Dark Mode & Micro-animations
   ========================================================== */

:root {
    --bg-base: #090D16;
    --bg-surface: #101626;
    --bg-surface-elevated: #162035;
    --bg-card: rgba(18, 26, 44, 0.7);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(99, 102, 241, 0.5);
    
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    
    --primary: #6366F1;
    --primary-glow: rgba(99, 102, 241, 0.4);
    --primary-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 50%, #3B82F6 100%);
    
    --emerald: #10B981;
    --emerald-glow: rgba(16, 185, 129, 0.3);
    --amber: #F59E0B;
    --rose: #F43F5E;
    
    --font-sans: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px var(--border-subtle);
    --shadow-glow: 0 0 25px var(--primary-glow);
    
    --header-height: 93px;
    --sidebar-width: 330px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 背景光效 */
.ambient-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.glow-1 {
    top: -200px;
    left: 10%;
    background: radial-gradient(circle, #6366F1, transparent);
}
.glow-2 {
    bottom: -200px;
    right: 5%;
    background: radial-gradient(circle, #06B6D4, transparent);
}

/* 顶部导航 */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 36px;
    background: rgba(9, 13, 22, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}

.header-left .logo-badge {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-icon {
    font-size: 28px;
    background: var(--bg-surface-elevated);
    padding: 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.logo-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.accent-text {
    background: linear-gradient(135deg, #818CF8, #38BDF8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.cloud-status-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 8px var(--emerald);
}

.status-indicator.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--emerald-glow); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px transparent; }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 transparent; }
}

.status-capsule-text {
    font-size: 12px;
    font-weight: 600;
    color: #34D399;
    letter-spacing: 0.2px;
}

/* 主内容布局：两栏式 */
.main-layout {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    max-width: 1680px;
    margin: 0 auto;
    padding: 28px 36px 60px;
}

/* 卡片通用样式 */
.panel-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

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

.card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-icon {
    font-size: 18px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.badge-pill {
    font-size: 11px;
    font-weight: 600;
    color: var(--emerald);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

/* 预置模板按钮 */
.preset-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preset-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.preset-btn:hover {
    background: var(--bg-surface-elevated);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(4px);
}

.preset-btn.active {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.preset-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #CBD5E1;
}

.preset-btn.active .preset-tag {
    background: var(--primary);
    color: #FFFFFF;
}

.preset-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* 分段选择器 (Segmented Control) */
.form-row {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.segment-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.segment-btn:hover {
    background: var(--bg-surface-elevated);
}

.segment-btn.active {
    background: rgba(99, 102, 241, 0.14);
    border-color: var(--primary);
}

.segment-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.segment-desc {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

/* 角色音色网格卡片选择器 */
.speaker-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.speaker-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.speaker-card:hover {
    background: var(--bg-surface-elevated);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.speaker-card.active {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--primary);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.25);
}

.spk-icon {
    font-size: 22px;
    background: var(--bg-surface-elevated);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spk-body {
    flex: 1;
    min-width: 0;
}

.spk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.spk-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.spk-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--primary);
    color: #FFFFFF;
}

.spk-badge.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.spk-desc {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 表单输入与文本域 */
.form-group {
    margin-bottom: 16px;
}

.input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.custom-input,
.custom-textarea {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-input:focus,
.custom-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.custom-textarea {
    line-height: 1.6;
    resize: vertical;
}

.textarea-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.action-link-btn {
    background: transparent;
    border: none;
    color: #818CF8;
    font-size: 12px;
    cursor: pointer;
}
.action-link-btn:hover {
    text-decoration: underline;
}

/* 拼音校准预览 */
.calibration-preview-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 22px;
}

.calib-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #CBD5E1;
    margin-bottom: 8px;
}

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

.calib-tag {
    font-size: 11px;
    background: rgba(99, 102, 241, 0.15);
    color: #C7D2FE;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.calib-tag strong {
    color: #38BDF8;
}

/* 生成主按钮 */
.generate-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--primary-gradient);
    border: none;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.generate-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.6);
}

.generate-cta-btn:active {
    transform: translateY(0);
}

.generate-cta-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cta-badge {
    font-size: 11px;
    background: rgba(0, 0, 0, 0.25);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

/* 右侧监视器与步进指示灯 */
.task-id-badge {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.stepper-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 10px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--border-subtle);
    margin: 0 8px -18px;
    transition: background 0.3s ease;
}

.step-item.active .step-dot {
    background: var(--primary);
    border-color: #818CF8;
    color: #FFFFFF;
    box-shadow: 0 0 12px var(--primary-glow);
    animation: pulse-step 1.5s infinite;
}

.step-item.active .step-label {
    color: #818CF8;
}

.step-item.completed .step-dot {
    background: var(--emerald);
    border-color: #34D399;
    color: #FFFFFF;
}

.step-item.completed .step-label {
    color: var(--emerald);
}

.step-line.completed {
    background: var(--emerald);
}

@keyframes pulse-step {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

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

.progress-bar-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.live-log-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #060911;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #94A3B8;
    line-height: 1.5;
}

.log-prefix {
    color: var(--emerald);
    font-weight: 700;
}

/* 手机剧场外框与播放器 */
.theater-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.phone-mockup {
    position: relative;
    width: 280px;
    height: 540px;
    background: #020617;
    border: 8px solid #1E293B;
    border-radius: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 20px;
    background: #1E293B;
    border-radius: 12px;
    z-index: 20;
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

.player-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: radial-gradient(circle at center, #1E293B 0%, #0B0F19 100%);
}

.placeholder-icon {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.8;
}

.placeholder-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.placeholder-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* 视频规格指标面板 */
.meta-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.meta-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
}

.meta-item.full-width {
    grid-column: 1 / -1;
}

.meta-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.meta-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.file-path {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #818CF8;
    word-break: break-all;
}

/* 音频波形模拟卡 */
.audio-waveform-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
}

.wave-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.wave-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #818CF8;
    padding: 2px 6px;
    border-radius: 4px;
}

.waveform-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 36px;
}

.waveform-bars .bar {
    flex: 1;
    background: var(--primary-gradient);
    border-radius: 2px;
    height: 20%;
    transition: height 0.2s ease;
}

/* 剧场操作区 & 历史视频选择器 */
.theater-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-select {
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    max-width: 260px;
    text-overflow: ellipsis;
}

.history-select:hover, .history-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

.history-select option {
    background: #0D1424;
    color: #F8FAFC;
}

/* 下载按钮 */
.icon-action-btn {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818CF8;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-action-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #FFFFFF;
}

.icon-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 1fr;
    }
    .theater-content {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ==========================================================
   THEME SELECTOR & CUSTOM BACKGROUND UPLOADER STYLES
   ========================================================== */
.theme-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.theme-card {
    background: rgba(16, 22, 38, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.theme-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(22, 32, 53, 0.8);
    transform: translateY(-2px);
}

.theme-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.25);
}

.theme-swatch {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.swatch-blue {
    background: radial-gradient(circle at 30% 30%, #1D4ED8 0%, #0F172A 100%);
    border: 1px solid #3B82F6;
}
.swatch-red {
    background: radial-gradient(circle at 30% 30%, #B91C1C 0%, #180507 100%);
    border: 1px solid #EF4444;
}
.swatch-green {
    background: radial-gradient(circle at 30% 30%, #047857 0%, #022c22 100%);
    border: 1px solid #10B981;
}
.swatch-gold {
    background: radial-gradient(circle at 30% 30%, #B45309 0%, #1c1304 100%);
    border: 1px solid #F59E0B;
}
.swatch-grid {
    background: #080B11;
    background-image: linear-gradient(rgba(0, 150, 255, 0.2) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 150, 255, 0.2) 1px, transparent 1px);
    background-size: 8px 8px;
    border: 1px solid #38BDF8;
}

.theme-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.theme-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-mini {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: rgba(99, 102, 241, 0.2);
    color: #A5B4FC;
    font-weight: 600;
}
.badge-mini.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
}
.badge-mini.success {
    background: rgba(16, 185, 129, 0.2);
    color: #6EE7B7;
}
.badge-mini.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #FDE68A;
}

.theme-desc {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 自定义背景上传器 */
.custom-bg-uploader {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    background: rgba(15, 23, 42, 0.4);
    padding: 20px 24px;
    transition: all 0.25s ease;
}

.custom-bg-uploader.dragover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.uploader-idle {
    display: flex;
    align-items: center;
    gap: 18px;
}

.upload-icon {
    font-size: 32px;
}

.upload-texts {
    flex: 1;
}

.upload-primary-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.upload-sub-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.btn-subtle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-subtle:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary);
    color: #FFFFFF;
}

.uploader-preview {
    display: flex;
    align-items: center;
    gap: 18px;
}

.preview-thumb {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.preview-meta {
    flex: 1;
}

.preview-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.preview-status {
    font-size: 12px;
    color: #10B981;
    margin-top: 4px;
    font-weight: 500;
}

.btn-danger-mini {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #F87171;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger-mini:hover {
    background: #EF4444;
    color: #FFFFFF;
}

/* 组件微章展示栏 */
.components-preview-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}

.comp-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

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

.comp-tag {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.comp-tag.new-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border-color: rgba(16, 185, 129, 0.3);
    font-weight: 600;
}

/* ==========================================================
   BATCH PRODUCTION WORKSPACE - STYLING SYSTEM
   ========================================================== */

/* 顶部导航模式切换 */
.studio-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.nav-tab.active {
    background: var(--primary-gradient);
    color: #FFFFFF;
    box-shadow: 0 4px 15px -3px var(--primary-glow);
}

.tab-badge {
    background: rgba(255, 255, 255, 0.2);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
}

.nav-tab.active .tab-badge {
    background: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}

/* 批量工作区容器 */
.batch-layout {
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px 36px 130px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.3s ease-out;
}

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

/* 统计指标卡片条 */
.batch-kpi-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr)) 2.2fr;
    gap: 16px;
}

.kpi-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}

.kpi-icon {
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.kpi-card.success .kpi-icon { background: rgba(16, 185, 129, 0.15); color: #34D399; }
.kpi-card.primary .kpi-icon { background: rgba(99, 102, 241, 0.15); color: #818CF8; }
.kpi-card.warning .kpi-icon { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.kpi-card.danger .kpi-icon { background: rgba(244, 63, 94, 0.15); color: #FB7185; }

.kpi-info {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.kpi-val {
    font-size: 24px;
    font-weight: 800;
    font-family: var(--font-sans);
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-card.success .kpi-val { color: #34D399; }
.kpi-card.primary .kpi-val { color: #818CF8; }
.kpi-card.warning .kpi-val { color: #FBBF24; }
.kpi-card.danger .kpi-val { color: #FB7185; }

/* 批量流水线总进度卡片 */
.kpi-progress-card {
    background: linear-gradient(135deg, rgba(22, 32, 53, 0.8) 0%, rgba(14, 21, 35, 0.8) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2);
}

.kpi-prog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-prog-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.kpi-prog-percent {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #818CF8;
}

.kpi-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.kpi-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366F1 0%, #38BDF8 50%, #10B981 100%);
    border-radius: var(--radius-pill);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}

.kpi-prog-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* 批量任务录入工具箱 */
.batch-toolbox-card {
    padding: 24px;
}

.toolbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.toolbox-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbox-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-tool {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tool:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-tool.primary {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 4px 15px -3px var(--primary-glow);
}

.btn-tool.primary:hover {
    box-shadow: 0 6px 20px -2px var(--primary-glow);
}

.btn-tool.subtle {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
}

/* 全局默认控制条 */
.batch-defaults-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-md);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.def-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.def-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.def-item label {
    font-size: 12px;
    color: var(--text-muted);
}

.custom-select-mini {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.custom-select-mini:focus {
    border-color: var(--primary);
}

.btn-apply-defaults {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-sm);
    color: #A5B4FC;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply-defaults:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: var(--primary);
    color: #FFFFFF;
}

/* 批量任务队列卡片 */
.batch-queue-card {
    padding: 24px;
}

.queue-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.queue-count-badge {
    font-size: 12px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-weight: 500;
}

.queue-header-actions {
    display: flex;
    gap: 8px;
}

.action-btn-sm {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn-sm:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.action-btn-sm.danger {
    color: #F87171;
    border-color: rgba(239, 68, 68, 0.2);
}

.action-btn-sm.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #EF4444;
}

/* 批量表格 */
.batch-table-container {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(9, 13, 22, 0.5);
}

.batch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.batch-table th {
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 14px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.batch-table td {
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.batch-table tbody tr {
    transition: background-color 0.15s ease;
}

.batch-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.batch-table tbody tr.row-processing {
    background: rgba(99, 102, 241, 0.06);
    box-shadow: inset 2px 0 0 var(--primary);
}

.batch-table tbody tr.row-completed {
    background: rgba(16, 185, 129, 0.03);
}

.batch-table tbody tr.row-failed {
    background: rgba(244, 63, 94, 0.04);
}

/* 表格内字段组件 */
.badge-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.15);
    color: #A5B4FC;
    border: 1px solid rgba(99, 102, 241, 0.3);
    white-space: nowrap;
}

.badge-cat.cat-car { background: rgba(245, 158, 11, 0.15); color: #FBBF24; border-color: rgba(245, 158, 11, 0.3); }
.badge-cat.cat-tax { background: rgba(52, 211, 153, 0.15); color: #34D399; border-color: rgba(52, 211, 153, 0.3); }
.badge-cat.cat-card { background: rgba(56, 189, 248, 0.15); color: #38BDF8; border-color: rgba(56, 189, 248, 0.3); }
.badge-cat.cat-law { background: rgba(167, 139, 250, 0.15); color: #C084FC; border-color: rgba(167, 139, 250, 0.3); }

.cell-content-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
}

.cell-title {
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cell-title:hover {
    color: #818CF8;
}

.cell-script-snippet {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

/* 背景缩略图与主题指示 */
.theme-cell-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cell-bg-thumb {
    width: 32px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #090D16;
}

.cell-theme-pill {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

/* 状态徽标与步骤 */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

.status-pill.pending {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.status-pill.processing {
    background: rgba(99, 102, 241, 0.15);
    color: #818CF8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.status-pill.completed {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pill.failed {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.table-step-msg {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: var(--font-mono);
}

.cell-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-table-action {
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-table-action:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.btn-table-action.primary {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #A5B4FC;
}

.btn-table-action.primary:hover {
    background: var(--primary);
    color: #FFFFFF;
}

.btn-table-action.success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34D399;
}

.btn-table-action.success:hover {
    background: #10B981;
    color: #FFFFFF;
}

/* 空状态 */
.empty-state-box {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.empty-icon {
    font-size: 44px;
    opacity: 0.6;
}

.empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
}

.empty-desc {
    font-size: 13px;
    color: var(--text-muted);
}

/* 底部悬浮控制底栏 */
.batch-controller-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(9, 13, 22, 0.92);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    padding: 16px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.dock-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dock-info-badge {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.dock-meta-text {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.dock-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dock-cta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--primary-gradient);
    border: none;
    border-radius: var(--radius-pill);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px -2px var(--primary-glow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dock-cta-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px 0 var(--primary-glow);
}

.dock-cta-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-cloud-gear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-pill);
    color: #A5B4FC;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cloud-gear:hover {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 0 16px var(--primary-glow);
}

.dock-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dock-action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
}

.dock-action-btn.warning {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    color: #FBBF24;
}

.dock-action-btn.danger {
    background: rgba(244, 63, 94, 0.2);
    border-color: rgba(244, 63, 94, 0.4);
    color: #FB7185;
}

.dock-action-btn.danger:hover:not(:disabled) {
    background: #F43F5E;
    color: #FFFFFF;
}

.dock-action-btn.primary {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #A5B4FC;
}

.dock-action-btn.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.3) 100%);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34D399;
}

.dock-action-btn.success:hover:not(:disabled) {
    background: #10B981;
    color: #FFFFFF;
}

.dock-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================
   MODALS & DIALOGS
   ========================================================== */
.studio-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.2s ease-out;
}

.studio-modal-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 820px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 1px 1px var(--border-subtle);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.modal-close-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
}

.modal-footer-right {
    display: flex;
    gap: 12px;
}

.btn-modal-cancel {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.btn-modal-confirm {
    padding: 8px 20px;
    background: var(--primary-gradient);
    border: none;
    border-radius: var(--radius-sm);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px -3px var(--primary-glow);
}

.btn-modal-confirm:hover {
    box-shadow: 0 6px 20px -2px var(--primary-glow);
}

/* 选题筛选选项卡 */
.topic-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.filter-tab.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #A5B4FC;
    font-weight: 600;
}

/* 选题列表项 */
.topic-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
}

.topic-item-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.topic-item-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.topic-item-row.selected {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
}

.topic-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topic-item-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic-item-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.topic-item-script-preview {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 粘贴弹窗 */
.paste-instructions {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.inst-tag {
    font-weight: 700;
    color: #818CF8;
}

.paste-instructions code {
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    color: #38BDF8;
    font-family: var(--font-mono);
}

.paste-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 14px;
    resize: vertical;
    outline: none;
    line-height: 1.6;
}

.paste-textarea:focus {
    border-color: var(--primary);
}

.paste-footer-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* 视频播放弹窗 */
.video-modal-dialog {
    max-width: 900px;
}

.video-modal-body {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 24px 32px;
}

.modal-phone-mockup {
    width: 280px;
    height: 497px;
    background: #000;
    border-radius: 28px;
    border: 4px solid #1E293B;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8);
    flex-shrink: 0;
}

.modal-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-video-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-meta-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-meta-row .meta-label {
    font-size: 12px;
    color: var(--text-muted);
}

.modal-meta-row .meta-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================================
   两阶段解耦工作流专属样式 (Audition & Storyboard)
   ========================================================== */
.audition-card {
    border-radius: var(--radius-lg);
    animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.15);
}

.storyboard-card {
    border-radius: var(--radius-lg);
    animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.15);
}

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

.storyboard-item {
    transition: all 0.2s ease;
    border: 1px solid #334155;
}

.storyboard-item:hover {
    border-color: var(--primary);
    background: #131d33 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scene-text-input:focus,
.scene-card-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.btn-doc-select {
    flex: 1;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-doc-select:hover,
.btn-doc-select.active {
    background: #DC2626;
    color: #FFFFFF;
    border-color: #EF4444;
}

.btn-doc-bg {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    font-size: 11px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-doc-bg:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #FFFFFF;
    border-color: var(--primary);
}

/* ==========================================================
   3-Step Pipeline Wizard Architecture Styles
   ========================================================== */
.studio-pipeline-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(16, 22, 38, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 28px;
    margin: 24px 36px 0;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 20;
}
.pipe-step {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.55;
    user-select: none;
}
.pipe-step:hover {
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.04);
}
.pipe-step.active {
    opacity: 1;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.45);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.25);
}
.pipe-step.completed {
    opacity: 0.95;
}
.pipe-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.pipe-step.active .pipe-num {
    background: var(--primary-gradient);
    color: #FFF;
    border-color: transparent;
    box-shadow: 0 0 12px var(--primary-glow);
}
.pipe-step.completed .pipe-num {
    background: var(--emerald);
    color: #FFF;
    border-color: transparent;
}
.pipe-content {
    display: flex;
    flex-direction: column;
}
.pipe-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.pipe-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}
.pipe-divider {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(99, 102, 241, 0.25), rgba(255,255,255,0.05));
    margin: 0 16px;
}

/* 步骤容器切换 */
.pipeline-view {
    display: none;
    animation: pipelineFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pipeline-view.active {
    display: grid;
}
@keyframes pipelineFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 步骤底栏操作条 */
.step-nav-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}
.btn-step-back {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.btn-step-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
}
.btn-step-next {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: none;
    color: #FFF;
    padding: 12px 26px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
}
.btn-step-next:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}
.btn-step-primary {
    background: var(--primary-gradient);
    border: none;
    color: #FFF;
    padding: 12px 26px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    transition: all 0.2s ease;
}
.btn-step-primary:hover {
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.6);
    transform: translateY(-1px);
}

/* 声音源切换 Tab */
.voice-source-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.voice-source-tab {
    flex: 1;
    padding: 10px 14px;
    background: rgba(16, 22, 38, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}
.voice-source-tab.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary);
    color: #FFF;
}

/* ==========================================================
   零样本人声克隆：提词器与直接录音控制中心样式
   ========================================================== */
.clone-container-card {
    background: rgba(16, 22, 38, 0.75);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.clone-sub-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.clone-sub-tab {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.clone-sub-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.clone-sub-tab.active {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
    color: #A5B4FC;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
}

/* 黄金提词卡片 */
.teleprompter-card {
    background: linear-gradient(145deg, rgba(26, 32, 53, 0.85) 0%, rgba(15, 20, 36, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.teleprompter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #6366F1, #8B5CF6);
}

.teleprompter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.teleprompter-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teleprompter-badge {
    font-size: 12px;
    font-weight: 700;
    color: #818CF8;
    background: rgba(99, 102, 241, 0.15);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.teleprompter-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.btn-switch-prompt {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-switch-prompt:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    color: #FFF;
    transform: rotate(1deg);
}

.teleprompter-body {
    font-size: 16px;
    line-height: 1.85;
    font-weight: 500;
    color: #F3F4F6;
    letter-spacing: 0.5px;
    padding: 8px 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}

.teleprompter-footer {
    margin-top: 10px;
}

.teleprompter-tip {
    font-size: 11.5px;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 录音仪表盘 */
.record-dashboard {
    background: rgba(13, 17, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.record-active-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.record-visualizer-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.record-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.record-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6B7280;
    display: inline-block;
    transition: all 0.3s ease;
}

.record-dot.recording {
    background: #EF4444;
    box-shadow: 0 0 12px #EF4444;
    animation: pulse-red 1.2s infinite ease-in-out;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px #EF4444; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

.record-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #E5E7EB;
}

/* 8 根跳动音量能量柱 */
.mic-volume-meter {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 24px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.vol-bar {
    width: 4px;
    height: 4px;
    min-height: 4px;
    max-height: 20px;
    background: linear-gradient(to top, #10B981, #F59E0B);
    border-radius: 2px;
    transition: height 0.08s ease;
}

.mic-volume-meter.active .vol-bar {
    background: linear-gradient(to top, #10B981, #EF4444);
}

.record-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* 录音按钮组 */
.record-btn-group {
    display: flex;
    gap: 10px;
}

.btn-record-action {
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-record-action.btn-start {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    border: 1px solid #EF4444;
    color: #FFF;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-record-action.btn-start:hover {
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.55);
    transform: translateY(-1px);
}

.btn-record-action.btn-stop {
    background: linear-gradient(135deg, #4B5563 0%, #374151 100%);
    border: 1px solid #6B7280;
    color: #FFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.btn-record-action.btn-stop:hover {
    background: linear-gradient(135deg, #374151 0%, #1F2937 100%);
}

/* 录音完成审听卡片 */
.record-review-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeIn 0.3s ease;
}

.review-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-tag {
    font-size: 12.5px;
    font-weight: 700;
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.review-duration {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
}

.review-player-wrap audio {
    border-radius: 6px;
    outline: none;
}

.review-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.btn-record-confirm {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: none;
    color: #FFF;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
}

.btn-record-confirm:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
    transform: translateY(-1px);
}

/* 录音/文件已挂载展示条 */
.clone-mounted-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    padding: 12px 18px;
}

.mounted-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mounted-icon {
    font-size: 24px;
}

.mounted-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mounted-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #34D399;
}

.mounted-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}

.btn-danger-mini {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #F87171;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger-mini:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #FFF;
}

/* Instruct 情绪语气快捷指令标签样式 */
.instruct-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.btn-instruct-tag {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-instruct-tag:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #60a5fa;
}

/* ⚡ 唤醒 4090 专属高科技微光按钮 */
.btn-wake-gpu {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.3) 100%);
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: var(--radius-pill);
    color: #34D399;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-wake-gpu:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.5) 100%);
    border-color: #34D399;
    color: #FFF;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px) scale(1.02);
}
.btn-wake-gpu:active {
    transform: translateY(0) scale(0.98);
}
.btn-wake-gpu.waking {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
    border-color: rgba(245, 158, 11, 0.5);
    color: #FBBF24;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
    cursor: wait;
}
.btn-wake-gpu.waking .wake-icon {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* ==========================================================
   用户登录/注册系统专属样式 (暗黑磨砂玻璃风)
   ========================================================== */

/* 顶部用户栏 */
.user-auth-bar {
    display: flex;
    align-items: center;
}
.btn-auth-entry {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(59, 130, 246, 0.2) 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: var(--radius-pill);
    color: #C7D2FE;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.btn-auth-entry:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(59, 130, 246, 0.35) 100%);
    border-color: #818CF8;
    color: #FFF;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}
.user-logged-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: var(--radius-pill);
    font-size: 13px;
}
.user-logged-badge .user-account-label {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #34D399;
}
.btn-user-logout {
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #FB7185;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-user-logout:hover {
    background: var(--rose);
    color: #FFF;
}

/* 模态框通用优化 */
.auth-modal-dialog {
    max-width: 480px;
    width: 90%;
    background: #0F172A;
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(15, 23, 42, 0.6);
}
.auth-tab-btn {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.auth-tab-btn.active {
    color: #818CF8;
    border-bottom-color: #6366F1;
    background: rgba(99, 102, 241, 0.08);
}
.auth-form-wrap {
    padding: 24px;
    display: none;
}
.auth-form-wrap.active {
    display: block;
}

/* 规则校验清单指示条 */
.validation-checklist {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.validation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    transition: color 0.2s;
}
.validation-item .v-icon {
    font-size: 11px;
    width: 14px;
    text-align: center;
}
.validation-item.valid {
    color: #34D399;
}
.validation-item.valid .v-icon {
    color: #10B981;
}
.validation-item.invalid {
    color: #FB7185;
}

/* 远端开机协同状态条 */
.wake-flow-banner {
    display: none;
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-md);
    color: #FCD34D;
    font-size: 13px;
    line-height: 1.6;
}
.wake-flow-banner.active {
    display: block;
}
.wake-flow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 6px;
}
.wake-progress-outer {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}
.wake-progress-inner {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #F59E0B, #10B981);
    border-radius: 4px;
    transition: width 0.3s ease;
    animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* ==========================================================
   Admin Console 用户管理 Tab 专属样式
   ========================================================== */
.user-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(16px);
}
.user-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(15, 23, 42, 0.4);
    gap: 12px;
    flex-wrap: wrap;
}
.user-table-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    width: 260px;
}
.user-table-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    width: 100%;
}
.user-table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-user-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-user-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.btn-user-action.primary {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #C7D2FE;
}
.btn-user-action.primary:hover {
    background: var(--primary);
    color: #FFF;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}
.data-table th {
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #E2E8F0;
}
.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
.user-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}
.user-badge-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.user-badge-status.disabled {
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
    border: 1px solid rgba(244, 63, 94, 0.3);
}
.table-btn-group {
    display: flex;
    gap: 6px;
}
.btn-tbl-sm {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-tbl-sm:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.12);
}
.btn-tbl-sm.danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #EF4444;
    color: #FCA5A5;
}

.btn-shutdown-gpu:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(185, 28, 28, 0.5) 100%);
    border-color: #ef4444;
    color: #FFF;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px) scale(1.02);
}
.btn-shutdown-gpu:active {
    transform: translateY(0) scale(0.98);
}
.btn-shutdown-gpu.shutting-down {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
    border-color: rgba(245, 158, 11, 0.5);
    color: #FBBF24;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
    cursor: wait;
}
.btn-shutdown-gpu.shutting-down .shutdown-icon {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* ==========================================================================
   全新重塑模块：高大上 VIP 创作者中心 & 专属历史作品资产库 & 极速创作套件
   ========================================================================== */

/* --- 1. 顶栏快捷作品库入口 --- */
.btn-history-gallery-entry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(56, 189, 248, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.35);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    color: #E2E8F0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.btn-history-gallery-entry:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(56, 189, 248, 0.3));
    border-color: #818CF8;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
}
.gallery-count-badge {
    background: #6366F1;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

/* --- 2. 顶栏 VIP 创作者卡片 --- */
.vip-creator-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(30, 27, 75, 0.8) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 5px 12px 5px 6px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    user-select: none;
}
.vip-creator-card:hover {
    border-color: #F59E0B;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}
.creator-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #EC4899);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    letter-spacing: -0.5px;
}
.creator-info-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.creator-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.creator-account-id {
    font-size: 13px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: 0.2px;
}
.creator-badge-pro {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.45);
    padding: 1px 6px;
    border-radius: 8px;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}
.creator-row-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #94A3B8;
}
.creator-stat-pill {
    color: #38BDF8;
    font-weight: 600;
}
.creator-level-dot {
    color: #34D399;
    font-size: 10px;
}
.creator-dropdown-arrow {
    font-size: 12px;
    color: #94A3B8;
    margin-left: 2px;
    transition: transform 0.2s;
}

/* --- 3. 创作者尊享中心浮层面板 --- */
.creator-profile-popover {
    position: absolute;
    top: 72px;
    right: 280px;
    width: 360px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.2);
    z-index: 1000;
    animation: popoverFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popoverFadeIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.popover-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.popover-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #EC4899);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}
.popover-user-meta {
    flex: 1;
}
.popover-account-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.popover-account {
    font-size: 16px;
    font-weight: 800;
    color: #FFF;
}
.popover-status-row {
    font-size: 12px;
    color: #94A3B8;
}
.popover-status-badge {
    color: #34D399;
    font-weight: 500;
}

/* 创作者多维数据大盘 */
.creator-stats-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}
.matrix-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
}
.matrix-card:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(99, 102, 241, 0.3);
}
.matrix-value {
    font-size: 20px;
    font-weight: 800;
    color: #38BDF8;
    margin-bottom: 2px;
}
.matrix-label {
    font-size: 11px;
    color: #94A3B8;
}

/* 导航动作 */
.popover-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.popover-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #E2E8F0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.popover-action-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #FFF;
}
.popover-action-btn.primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
    border-color: rgba(99, 102, 241, 0.4);
}
.popover-action-btn.primary:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(6, 182, 212, 0.35));
    border-color: #818CF8;
}
.btn-tag {
    background: rgba(56, 189, 248, 0.2);
    color: #38BDF8;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
}
.popover-footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-popover-logout {
    width: 100%;
    padding: 9px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #F87171;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-popover-logout:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #EF4444;
    color: #FFF;
}

/* --- 4. 专属历史作品资产库大弹窗 --- */
.gallery-modal-dialog {
    max-width: 1000px !important;
    width: 90vw;
    height: 82vh;
    display: flex;
    flex-direction: column;
}
.modal-subtitle {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 2px;
    font-weight: normal;
}
.gallery-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.gallery-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 60px 20px;
}
.empty-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 16px;
}
.empty-main-text {
    font-size: 18px;
    font-weight: 700;
    color: #F1F5F9;
    margin-bottom: 8px;
}
.empty-sub-text {
    font-size: 13px;
    color: #94A3B8;
    max-width: 440px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.btn-load-demos {
    padding: 9px 20px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    border: none;
    border-radius: 20px;
    color: #FFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
.btn-load-demos:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.6);
}

/* 历史卡片网格 */
.history-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.history-card {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.history-card:hover {
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.2);
}
.history-thumb-box {
    position: relative;
    width: 100%;
    height: 170px;
    background: #0B101E;
    overflow: hidden;
    cursor: pointer;
}
.history-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 0.3s;
}
.history-thumb-box:hover .history-thumb-img {
    transform: scale(1.05);
    opacity: 1;
}
.history-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.2s;
}
.history-thumb-box:hover .history-play-overlay {
    background: rgba(0, 0, 0, 0.1);
}
.play-btn-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.9);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
    transition: transform 0.2s;
}
.history-thumb-box:hover .play-btn-circle {
    transform: scale(1.15);
}
.history-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #E2E8F0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.history-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.history-title {
    font-size: 14px;
    font-weight: 700;
    color: #F1F5F9;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.history-script-preview {
    font-size: 12px;
    color: #94A3B8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.history-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #64748B;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.history-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.6fr;
    gap: 6px;
    margin-top: 10px;
}
.btn-action-sm {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.05);
    color: #E2E8F0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.btn-action-sm:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFF;
}
.btn-action-sm.primary-reuse {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(6, 182, 212, 0.25));
    border-color: rgba(99, 102, 241, 0.4);
    color: #A5B4FC;
}
.btn-action-sm.primary-reuse:hover {
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    color: #FFF;
    border-color: transparent;
}
.btn-action-sm.danger-del:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
    color: #FCA5A5;
}

/* --- 5. 灵感选题常驻栏与一键成片 --- */
.inspiration-bar-container {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.inspiration-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #A5B4FC;
    margin-bottom: 10px;
}
.inspiration-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inspiration-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    color: #CBD5E1;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.inspiration-pill:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: #818CF8;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

/* 极速成片通道卡片 */
.express-generate-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.express-title {
    font-size: 14px;
    font-weight: 700;
    color: #F1F5F9;
    margin-bottom: 2px;
}
.express-desc {
    font-size: 12px;
    color: #94A3B8;
}
.btn-express-generate {
    padding: 10px 22px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    border: none;
    border-radius: 24px;
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.45);
    white-space: nowrap;
}
.btn-express-generate:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.7);
}
.btn-express-generate:active {
    transform: translateY(0) scale(0.98);
}

/* --- 6. 全局 Toast 提示容器 --- */
.global-toast-container {
    position: fixed;
    /* 悬浮在页头下方，而不是盖住页头。
       原值 top:24px 正好压在顶部导航标签上——三个工作区标签比原来两个更宽，
       提示气泡频繁遮挡导航，用户想切工作区时被挡住。--header-height 由 JS 动态同步。 */
    top: calc(var(--header-height, 93px) + 14px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}
.toast-bubble {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    color: #F8FAFC;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.3);
    animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.3s, transform 0.3s;
}
.toast-bubble.success {
    border-color: rgba(52, 211, 153, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(52, 211, 153, 0.3);
}
.toast-bubble.warning {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(251, 191, 36, 0.3);
}
.toast-bubble.error {
    border-color: rgba(248, 113, 113, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(248, 113, 113, 0.3);
}
@keyframes toastSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. 工业级全局模态框组件系统 (Studio Modal Base System)
   ========================================================================== */
.studio-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 15, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.studio-modal-dialog {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(99, 102, 241, 0.15);
    color: #F8FAFC;
    max-width: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #F8FAFC;
    margin: 0;
    line-height: 1.3;
}

.modal-subtitle {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 2px;
    display: block;
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #F87171;
    transform: rotate(90deg);
}

.modal-body {
    padding: 24px;
    color: #CBD5E1;
    font-size: 14px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
}

.btn-modal-cancel {
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #CBD5E1;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFF;
}

.btn-modal-confirm {
    padding: 8px 22px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.35);
}

.btn-modal-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.55);
}

/* ==========================================================================
   8. 顶栏右侧用户身份系统与作品库入口 (Header User Auth & Gallery Entrance)
   ========================================================================== */
.btn-history-gallery-entry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    padding: 7px 15px;
    border-radius: 22px;
    color: #C7D2FE;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    outline: none;
}

.btn-history-gallery-entry:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: #818CF8;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
}

.gallery-icon {
    font-size: 15px;
}

.gallery-count-badge {
    background: #4F46E5;
    color: #FFFFFF;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 12px;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    text-align: center;
}

.user-auth-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-auth-entry {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.4);
    padding: 7px 16px;
    border-radius: 20px;
    color: #E2E8F0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-auth-entry:hover {
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

/* 💎 VIP 创作者尊享卡片 */
.vip-creator-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 5px 14px 5px 6px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    user-select: none;
    flex-shrink: 0;
}

.vip-creator-card:hover {
    border-color: #F59E0B;
    background: linear-gradient(135deg, rgba(30, 41, 59, 1) 0%, rgba(20, 29, 50, 1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25);
}

.creator-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.creator-info-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.2;
    text-align: left;
}

.creator-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.creator-account-id {
    font-size: 13px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: 0.5px;
    font-family: 'JetBrains Mono', monospace;
}

.creator-badge-pro {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.5);
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.2px;
}

.creator-row-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #94A3B8;
}

.creator-stat-pill {
    background: rgba(99, 102, 241, 0.2);
    color: #A5B4FC;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.creator-level-dot {
    color: #34D399;
    font-size: 11px;
    font-weight: 500;
}

.creator-dropdown-arrow {
    font-size: 12px;
    color: #94A3B8;
    margin-left: 2px;
    transition: transform 0.2s;
}

/* ==========================================================================
   9. 创作者尊享中心悬浮大面板 (Creator Profile HUD Popover)
   ========================================================================== */
.creator-profile-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.15);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.popover-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.popover-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFF;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.popover-user-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.popover-account-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.popover-account {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    font-family: 'JetBrains Mono', monospace;
}

.popover-status-row {
    margin-top: 2px;
}

.popover-status-badge {
    font-size: 11px;
    color: #34D399;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}

/* 创作者多维数据大盘 */
.creator-stats-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}

.matrix-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}

.matrix-value {
    font-size: 18px;
    font-weight: 800;
    color: #F1F5F9;
    font-family: 'Outfit', sans-serif;
}

.matrix-label {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}

.popover-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.popover-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #E2E8F0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    box-sizing: border-box;
}

.popover-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.popover-action-btn.primary {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.35);
    color: #C7D2FE;
}

.popover-action-btn.primary:hover {
    background: rgba(99, 102, 241, 0.28);
    border-color: #818CF8;
    color: #FFFFFF;
}

.popover-action-btn .btn-tag {
    font-size: 11px;
    background: #4F46E5;
    color: #FFF;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}

.popover-footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-popover-logout {
    width: 100%;
    padding: 9px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #F87171;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-popover-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
    color: #FFFFFF;
}

/* ==========================================================================
   10. 专属历史作品资产库大弹窗 (Video Heritage Gallery Dialog)
   ========================================================================== */
.gallery-modal-dialog {
    width: 92vw;
    max-width: 1160px;
    height: 86vh;
    max-height: 860px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gallery-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.gallery-modal-body::-webkit-scrollbar {
    width: 6px;
}
.gallery-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* 历史作品瀑布流网格 */
.history-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 20px;
    align-content: start;
    width: 100%;
}

/* 作品卡片 */
.history-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    position: relative;
}

.history-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(99, 102, 241, 0.25);
}

/* 缩略图容器与图片尺寸绝对防护 */
.history-thumb-box {
    position: relative;
    width: 100%;
    height: 148px;
    background: #020617;
    overflow: hidden;
    cursor: pointer;
}

.history-thumb-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    transition: transform 0.4s ease;
}

.history-card:hover .history-thumb-img {
    transform: scale(1.05);
}

.history-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-card:hover .history-play-overlay {
    opacity: 1;
}

.play-btn-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.9);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.history-card:hover .play-btn-circle {
    transform: scale(1);
}

.history-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #F8FAFC;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 卡片内容排版 */
.history-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.history-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-script-preview {
    font-size: 12px;
    color: #94A3B8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.history-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #64748B;
    margin-top: auto;
    padding-top: 4px;
}

.history-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-action-sm {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #CBD5E1;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.btn-action-sm:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.btn-action-sm.primary-reuse {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
    color: #C7D2FE;
    font-weight: 600;
    flex: 1.3;
}

.btn-action-sm.primary-reuse:hover {
    background: rgba(99, 102, 241, 0.35);
    border-color: #818CF8;
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.btn-action-sm.danger-del {
    flex: 0 0 32px;
    color: #F87171;
    border-color: rgba(239, 68, 68, 0.2);
}

.btn-action-sm.danger-del:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
}

/* 空作品库展示 */
.gallery-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
}

.empty-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 20px;
}

.empty-main-text {
    font-size: 18px;
    font-weight: 700;
    color: #F1F5F9;
    margin-bottom: 8px;
}

.empty-sub-text {
    font-size: 13px;
    color: #94A3B8;
    max-width: 440px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.btn-load-demos {
    padding: 10px 24px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    border: none;
    border-radius: 20px;
    color: #FFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.btn-load-demos:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
}

/* ==========================================================================
   11. 用户注册与登录弹窗 (User Auth Modal Dialog)
   ========================================================================== */
.auth-modal-dialog {
    max-width: 440px;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.auth-tab-btn {
    flex: 1;
    padding: 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab-btn:hover {
    color: #F1F5F9;
}

.auth-tab-btn.active {
    color: #818CF8;
    border-bottom-color: #6366F1;
    background: rgba(99, 102, 241, 0.08);
}

.auth-form-wrap {
    display: none;
    padding: 24px;
}

.auth-form-wrap.active {
    display: block;
}

.validation-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 14px;
}

.validation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748B;
    transition: color 0.2s;
}

.validation-item .v-icon {
    font-weight: 700;
    font-size: 11px;
}

.validation-item.valid {
    color: #34D399;
}

.validation-item.valid .v-icon {
    color: #10B981;
}

.wake-flow-banner {
    display: none;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 14px;
}

.wake-flow-banner.active {
    display: block;
}

.wake-flow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #FBBF24;
    margin-bottom: 4px;
}

#wakeFlowDesc {
    font-size: 11px;
    color: #CBD5E1;
    line-height: 1.5;
}

.wake-progress-outer {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.wake-progress-inner {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #10B981);
    animation: wakeIndeterminate 1.5s infinite linear;
}

@keyframes wakeIndeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* ==========================================================================
   12. 其它辅助模态框配套样式 (Batch Video Modal & Lightbox)
   ========================================================================== */
.video-modal-dialog {
    max-width: 760px;
}

.video-modal-body {
    display: flex;
    gap: 24px;
}

.modal-phone-mockup {
    width: 240px;
    height: 426px;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.modal-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-video-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-meta-row {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label {
    color: #94A3B8;
    font-size: 11px;
}

.meta-val {
    color: #F1F5F9;
    font-weight: 600;
}

.meta-val.file-path {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    word-break: break-all;
    color: #818CF8;
}

.paste-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #F8FAFC;
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

.paste-instructions {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    color: #CBD5E1;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.paste-footer-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #94A3B8;
}

/* ==========================================================
   微信登录（方式二）：小程序授权 / PC 扫码
   ========================================================== */
.wechat-login-zone {
    padding: 0 22px 22px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 14px;
    color: #64748B;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.25);
}

.wechat-login-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(7, 193, 96, 0.45);
    background: rgba(7, 193, 96, 0.12);
    color: #34D399;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.wechat-login-btn:hover:not(:disabled) {
    background: rgba(7, 193, 96, 0.2);
    border-color: rgba(7, 193, 96, 0.7);
}

.wechat-login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wechat-login-btn .wx-icon {
    font-size: 15px;
}

.wechat-hint {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #64748B;
    text-align: center;
}

.wechat-hint.is-error {
    color: #F87171;
}

.wechat-hint.is-ok {
    color: #34D399;
}

.wechat-qr-box {
    margin-top: 12px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-align: center;
}

.wechat-qr-title {
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 10px;
}

.wechat-qr-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 148px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
    color: #64748B;
    word-break: break-all;
    padding: 8px;
}

.wechat-qr-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    color: #38BDF8;
    text-decoration: none;
}

.wechat-qr-link:hover {
    text-decoration: underline;
}

.wechat-bind-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 12px;
}

/* ==========================================================================
   13. 右侧独立常驻用户信息栏系统 (Fixed Independent User Info Sidebar)
   - position: fixed 锁定右侧，绝不随页面主体上下滚动
   - 独立滚动容器 (overscroll-behavior: contain) 隔离滚动链
   - 包含：账号信息、VIP创作者卡片、积分额度、充值、数据大盘、作品库入口、4090中台
   ========================================================================== */

.main-workspace-wrapper {
    margin-right: var(--sidebar-width);
    min-width: 0;
    position: relative;
    transition: margin-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.batch-control-dock {
    right: var(--sidebar-width) !important;
}

/* 侧边栏整体容器 */
.user-info-sidebar {
    position: fixed;
    top: var(--header-height, 93px);
    right: 0;
    bottom: 0;
    width: var(--sidebar-width, 330px);
    background: rgba(11, 17, 30, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 16px 14px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    user-select: none;
}

/* 优雅暗黑极细滚动条 */
.user-info-sidebar::-webkit-scrollbar {
    width: 5px;
}
.user-info-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.user-info-sidebar::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.25);
    border-radius: 4px;
}
.user-info-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.55);
}

/* 标头 */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-title-group .sb-icon {
    font-size: 16px;
}

.sidebar-title-group .sb-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: 0.3px;
}

.sb-live-capsule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 10px;
    border-radius: 20px;
}

.sb-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: pulse 2s infinite;
}

.sb-live-text {
    font-size: 11px;
    font-weight: 600;
    color: #34D399;
}

/* 侧边栏卡片基础样式 */
.sidebar-card {
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 13px 13px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
}

/* 1. 身份卡片 */
.identity-card {
    background: linear-gradient(145deg, rgba(26, 34, 56, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.sb-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #EC4899);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.sb-identity-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb-account-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-account-id {
    font-size: 14.5px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
    letter-spacing: -0.3px;
}

.sb-badge-diamond {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.5);
    padding: 1px 6px;
    border-radius: 6px;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
    white-space: nowrap;
}

.sb-status-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-tier-pill {
    font-size: 11px;
    color: #34D399;
    font-weight: 600;
}

.sb-device-pill {
    font-size: 10px;
    color: #94A3B8;
    font-family: var(--font-mono);
}

.sb-user-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-sb-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #CBD5E1;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sb-action:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: #818CF8;
    color: #FFFFFF;
}

.btn-sb-action.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
    color: #F87171;
}

/* 访客态 */
.sb-guest-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sb-guest-icon {
    font-size: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-guest-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
}
.sb-guest-sub {
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.3;
}
.btn-sb-primary {
    width: 100%;
    padding: 8px 14px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.35);
    transition: all 0.2s ease;
}
.btn-sb-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.55);
}
.btn-sb-subtle {
    width: 100%;
    margin-top: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #94A3B8;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-sb-subtle:hover {
    border-color: #818CF8;
    color: #C7D2FE;
}

/* 2. 积分与充值卡片 */
.points-card {
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.4) 0%, rgba(20, 24, 45, 0.7) 100%);
    border: 1px solid rgba(245, 158, 11, 0.28);
}
.sb-card-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.sb-label-text {
    font-size: 12px;
    font-weight: 700;
    color: #CBD5E1;
}
.sb-rate-tag {
    font-size: 10px;
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
}
.sb-points-highlight {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sb-points-number {
    font-size: 26px;
    font-weight: 900;
    color: #FBBF24;
    font-family: var(--font-mono);
    line-height: 1;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}
.sb-points-unit {
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
    margin-left: 2px;
}
.sb-quota-desc {
    font-size: 11.5px;
    color: #94A3B8;
}
.btn-sb-recharge {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-sb-recharge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.65);
}
.btn-sb-recharge .recharge-badge {
    background: rgba(0, 0, 0, 0.2);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}
.sb-billing-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 10.5px;
    color: #64748B;
    line-height: 1.4;
}
.sb-billing-tip .tip-dot {
    color: #10B981;
    font-weight: 700;
}

/* 3. 创作者数据大盘 */
.sb-data-tag {
    font-size: 10px;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
}
.sb-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sb-matrix-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    transition: all 0.2s ease;
}
.sb-matrix-box:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}
.sb-matrix-num {
    font-size: 17px;
    font-weight: 800;
    color: #38BDF8;
    font-family: var(--font-mono);
    line-height: 1.2;
}
.sb-matrix-num.success {
    color: #34D399;
}
.sb-matrix-sub {
    font-size: 10.5px;
    color: #94A3B8;
    margin-top: 2px;
}

/* 4. 作品库快捷入口 */
.gallery-card {
    padding: 6px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.12) 100%);
    border: 1px solid rgba(99, 102, 241, 0.35);
}
.btn-sb-gallery {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #FFF;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-sb-gallery:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: #818CF8;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35);
}
.gallery-btn-left {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.gallery-big-icon {
    font-size: 18px;
}
.gallery-btn-texts {
    display: flex;
    flex-direction: column;
}
.gallery-main-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #F8FAFC;
}
.gallery-sub-title {
    font-size: 10.5px;
    color: #94A3B8;
}
.gallery-badge-count {
    background: #4F46E5;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* 5. 云端算力引擎规格卡片 */
.sb-status-ready {
    font-size: 10px;
    color: #34D399;
}
.sb-spec-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    color: #94A3B8;
    margin: 8px 0 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.sb-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.spec-k {
    color: #64748B;
}
.spec-v {
    color: #E2E8F0;
    font-family: var(--font-mono);
    font-weight: 600;
}
.sb-channel-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    color: #34D399;
    font-size: 11px;
    font-weight: 600;
}

.sb-channel-guarantee .guarantee-icon {
    font-size: 13px;
}

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 290px;
    }
    .user-info-sidebar {
        width: var(--sidebar-width);
    }
    .main-workspace-wrapper {
        margin-right: var(--sidebar-width);
    }
}

/* ==========================================================================
   一键极速成片工作区 (Express One-Click Workspace)
   --------------------------------------------------------------------------
   设计约束：
   1. 复用既有设计令牌（--primary / --border-subtle / --radius-* / --shadow-card），
      不引入新的配色体系，保证与单片工坊、批量产线视觉语言一致。
   2. 与 .main-layout 使用同一套宽度与内边距，切换工作区时页面骨架不跳动。
   3. 极速页的主行动按钮是全页唯一的高饱和 CTA，其余元素保持克制的冷色玻璃感。
   ========================================================================== */

.express-layout {
    position: relative;
    z-index: 10;
    max-width: 1680px;
    margin: 0 auto;
    padding: 28px 36px 60px;
    animation: fadeIn 0.3s ease-out;
}

/* —— 顶部价值说明 —— */
.express-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 28px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(6, 182, 212, 0.10) 100%);
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    margin-bottom: 26px;
    box-shadow: var(--shadow-card);
    flex-wrap: wrap;
}

.express-hero-main {
    flex: 1 1 520px;
    min-width: 0;
}

.express-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #C7D2FE;
    background: rgba(99, 102, 241, 0.22);
    border: 1px solid rgba(129, 140, 248, 0.4);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.express-hero-title {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.28;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.express-hero-sub {
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--text-secondary);
    max-width: 760px;
    margin-bottom: 16px;
}

.express-hero-sub b {
    color: #A5B4FC;
    font-weight: 600;
}

.express-flow-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.express-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #E2E8F0;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--border-subtle);
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.express-flow-chip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
}

.express-flow-arrow {
    color: var(--text-muted);
    font-size: 13px;
}

/* —— 右侧规格速览 —— */
.express-hero-facts {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    background: rgba(9, 13, 22, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 6px 16px;
}

.express-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.express-fact:last-child {
    border-bottom: none;
}

.express-fact-k {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}

.express-fact-v {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* —— 主体两栏 —— */
.express-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    align-items: start;
}

/* —— 进阶设定：默认折叠，展开与否都不改变「一键」主路径 —— */
.express-advanced {
    margin: 4px 0 14px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.express-advanced > summary {
    cursor: pointer;
    list-style: none;
    padding: 11px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.express-advanced > summary::-webkit-details-marker {
    display: none;
}

.express-advanced > summary:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.express-advanced[open] > summary {
    color: #A5B4FC;
    border-bottom: 1px solid var(--border-subtle);
}

.express-advanced-body {
    padding: 16px 16px 4px;
}

.express-advanced-body .form-group:last-child {
    margin-bottom: 12px;
}

/* select 复用 .custom-input 时补齐下拉箭头与光标 */
select.custom-input {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #94A3B8 50%),
                      linear-gradient(135deg, #94A3B8 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 1px),
                         calc(100% - 15px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

select.custom-input option {
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
}

/* —— 时长档位偏离提示（提示而非拦截） —— */
.express-advisory {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
}

/* —— 单片工坊内的跨工作区引导卡 —— */
.express-crosslink-card {
    border-style: dashed;
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.09) 0%, rgba(6, 182, 212, 0.06) 100%);
}

/* —— 进度面板 —— */
.express-progress-track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    margin-top: 4px;
}

.express-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-pill);
    background: var(--primary-gradient);
    box-shadow: 0 0 12px var(--primary-glow);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.express-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.express-progress-percent {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.express-task-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.express-progress-meta {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    min-height: 40px;
}

/* —— 阶段灯 —— */
.express-stage-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.express-stage {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.express-stage-dot {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.28);
    border: 2px solid rgba(148, 163, 184, 0.35);
    transition: all 0.25s ease;
}

.express-stage-body {
    min-width: 0;
}

.express-stage-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.25s ease;
}

.express-stage-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.55;
}

/* 进行中 */
.express-stage.is-active {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.express-stage.is-active .express-stage-dot {
    background: #818CF8;
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
    animation: expressPulse 1.3s ease-in-out infinite;
}

.express-stage.is-active .express-stage-name {
    color: var(--text-primary);
}

/* 已完成 */
.express-stage.is-done .express-stage-dot {
    background: var(--emerald);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 0 4px var(--emerald-glow);
}

.express-stage.is-done .express-stage-name {
    color: var(--text-primary);
}

/* 失败 */
.express-stage.is-failed {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.3);
}

.express-stage.is-failed .express-stage-dot {
    background: var(--rose);
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.18);
}

.express-stage.is-failed .express-stage-name {
    color: #FDA4AF;
}

@keyframes expressPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.72; }
}

/* —— 状态胶囊色调 —— */
.badge-pill.is-running {
    color: #A5B4FC;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.3);
}

.badge-pill.is-ok {
    color: var(--emerald);
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

.badge-pill.is-bad {
    color: #FDA4AF;
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.28);
}

/* —— 成片播放与交付明细 —— */
.express-player-shell {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #05070C;
    border: 1px solid var(--border-subtle);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.express-player-shell .player-video {
    width: 100%;
    max-height: 62vh;
    display: block;
}

.express-result-meta {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(9, 13, 22, 0.45);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 6px 14px;
}

.express-result-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.express-result-row:last-child {
    border-bottom: none;
}

.express-result-k {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}

.express-result-v {
    font-size: 12.5px;
    color: var(--text-primary);
    text-align: right;
    word-break: break-all;
}

@media (max-width: 1200px) {
    .express-grid {
        grid-template-columns: 1fr;
    }
    .express-hero {
        padding: 22px 24px;
    }
    .express-hero-facts {
        flex: 1 1 100%;
    }
    .express-layout {
        padding: 22px 24px 50px;
    }
}