/**
 * 剪辑工作台主题样式（do01：默认浅色语义 token）
 * 文件名 historical：`editing_board_dark_theme.css`；契约变量名保持兼容。
 * 2026-01-29 深色基线 → 2026-04-01 浅色默认 → 2026-04 与审核台 collaboration_light_tokens 对齐
 * 加载顺序：页面须先链入 collaboration_light_tokens.css（--review-ui-*），再链入本文件。
 */

/* ============================================
   全局设置
   ============================================ */

/* 禁用非可编辑区域的文本选择和光标 */
.editing-board-container,
.editing-board-container *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

/* 允许输入框和文本域选择 */
.editing-board-container input,
.editing-board-container textarea,
.editing-board-container select,
.editing-board-container [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

/* 按钮保持 pointer 光标 */
.editing-board-container button,
.editing-board-container [role="button"],
.editing-board-container .btn,
.editing-board-container .clickable {
    cursor: pointer;
}

/* ============================================
   CSS变量定义
   ============================================ */
:root {
    /* 背景：与 --review-ui-* 同源；剪辑专用冷灰阶梯（时间线井 / 预览井） */
    --editor-bg-page: var(--review-ui-bg-page);
    --editor-bg-darkest: #e4eaf5;
    --editor-bg-dark: #eef2f9;
    --editor-bg-panel: var(--review-ui-bg-panel);
    --editor-bg-hover: #e8eef9;
    --editor-bg-active: #dce4f4;
    --editor-bg-main: var(--review-ui-bg-card);
    --editor-preview-well: #d8e0ef;

    /* 边框（冷灰蓝，与审核台一致） */
    --editor-border: var(--review-ui-border);
    --editor-border-light: #e8eef9;
    --editor-border-dark: #b8c5df;
    --editor-border-strong: #9ca8c4;
    --editor-accent-soft: rgba(113, 62, 255, 0.12);

    /* 文字（与审核台一致） */
    --editor-text-primary: var(--review-ui-text-primary);
    --editor-text-secondary: var(--review-ui-text-secondary);
    --editor-text-muted: var(--review-ui-text-muted);
    --editor-text-disabled: #9ca3af;

    /* 主强调（与审核台 --review-ui-accent 一致） */
    --editor-accent: var(--review-ui-accent);
    --editor-accent-hover: #5f2ee6;
    --editor-accent-active: #5228cc;
    --editor-accent-rgb: 113, 62, 255;
    --editor-on-accent: #ffffff;

    /* AI / 候选态（主色同系） */
    --editor-ai-accent: #7c5cff;
    --editor-ai-accent-soft: rgba(113, 62, 255, 0.12);
    --editor-ai-border: rgba(113, 62, 255, 0.4);
    --editor-ai-rgb: 113, 62, 255;

    /* 品牌色（与主 CTA 对齐） */
    --editor-brand: var(--review-ui-accent);
    --editor-brand-hover: #5f2ee6;
    
    /* 功能色（低饱和） */
    --editor-success: #16a34a;
    --editor-warning: #ca8a04;
    --editor-error: #dc2626;
    --editor-info: #2563eb;
    
    /* 轨道语义：视频蓝青 / 音频暖橙 / 字幕柔和紫 / 其余辅助 */
    --track-subtitle: #a855f7;
    --track-image: #ca8a04;
    --track-video: #0d9488;
    --track-audio: #ea580c;
    --track-narration: #ea580c;
    --track-bgm: #c026d3;
    --track-sfx: #0891b2;
    
    /* 中线 */
    --timeline-centerline: #9ca3af;
    
    /* 尺寸变量 */
    --task-panel-width: 180px;
    --task-panel-collapsed-width: 40px;
    --asset-panel-width: 220px;
    --property-panel-width: 260px;
    --menubar-height: 40px;
    --toolbar-height: 36px;
    --preview-controls-height: 80px;
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
}

/* ============================================
   全局导航栏（协作壳层，浅色 token）
   ============================================ */

/* 二级导航栏深色 */
.collaboration-main-container .sub-nav {
    background: var(--editor-bg-panel) !important;
    border-bottom: 1px solid var(--editor-border) !important;
    box-shadow: none !important;
}

.collaboration-main-container .sub-nav-item {
    color: var(--editor-text-muted) !important;
    border-bottom-color: transparent !important;
}

.collaboration-main-container .sub-nav-item:hover {
    color: var(--editor-text-primary) !important;
    background: var(--editor-bg-hover) !important;
}

.collaboration-main-container .sub-nav-item.active {
    color: var(--editor-accent) !important;
    border-bottom-color: var(--editor-accent) !important;
    background: var(--editor-bg-panel) !important;
}

/* 协作壳层：浅色页底 */
.collaboration-main-container {
    background: var(--editor-bg-page) !important;
}

.collaboration-content {
    background: var(--editor-bg-page) !important;
}

/* ============================================
   加载状态指示器
   ============================================ */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 247, 251, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--editor-border);
    border-top-color: var(--editor-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    margin-top: 16px;
    font-size: 14px;
    color: var(--editor-text-secondary);
}

/* 错误提示样式 */
.error-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--editor-error);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.error-toast.active {
    opacity: 1;
    visibility: visible;
}

/* 成功提示样式 */
.success-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--editor-success);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.success-toast.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   全局基础样式
   ============================================ */
.editing-board-container {
    background: var(--editor-bg-page) !important;
    color: var(--editor-text-primary);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    /* V05-07 Bug5 修复：明确设置 width:100% 确保容器铺满视口宽度，防止右侧出现空隙。
       block 元素在某些父级 flex/grid 容器中不会自动 stretch。 */
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   四栏布局
   ============================================ */
.editor-main-layout {
    display: flex;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    background: var(--editor-bg-dark);
    /* Bug5-fix: 确保四栏布局横向撑满，不留右侧空白 */
    width: 100%;
    box-sizing: border-box;
}

/* 任务栏面板（最左侧） */
.task-list-panel {
    width: var(--task-panel-width);
    min-width: var(--task-panel-collapsed-width);
    flex-shrink: 0;  /* 防止被 flex 布局压缩 */
    background: var(--editor-bg-panel);
    border-right: 1px solid var(--editor-border);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-normal);
    overflow: hidden;
}

.task-list-panel.collapsed {
    width: var(--task-panel-collapsed-width);
}

.task-list-panel .panel-header {
    padding: 12px;
    border-bottom: 1px solid var(--editor-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

.task-list-panel .panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--editor-text-primary);
    white-space: nowrap;
    overflow: hidden;
}

.task-list-panel.collapsed .panel-title {
    display: none;
}

.task-list-panel .toggle-btn {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--editor-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.task-list-panel .toggle-btn.has-icon {
    font-size: 0;
}

.task-list-panel .toggle-btn .ui-icon {
    width: 12px;
    height: 12px;
}

.task-list-panel .toggle-btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.task-list-panel .task-list-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.task-list-panel.collapsed .task-list-content {
    display: none;
}

/* 任务项样式 */
.task-item {
    padding: 10px 12px;
    margin-bottom: 4px;
    background: var(--editor-bg-dark);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.task-item:hover {
    background: var(--editor-bg-hover);
    border-color: var(--editor-border-light);
}

.task-item.active {
    background: var(--editor-ai-accent-soft);
    border-color: var(--editor-ai-border);
}

.task-item .task-name {
    font-size: 12px;
    color: var(--editor-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-item .task-status {
    font-size: 10px;
    color: var(--editor-text-muted);
    margin-top: 4px;
}

/* 素材库面板 */
.asset-library-panel {
    width: var(--asset-panel-width);
    min-width: 180px;
    flex-shrink: 0;  /* 防止被 flex 布局压缩 */
    background: var(--editor-bg-panel);
    border-right: 1px solid var(--editor-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 中间预览+时间线区域 */
.preview-timeline-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--editor-bg-darkest);
    overflow: hidden;
    min-width: 0;
    /* Bug5-fix: 确保中间列始终横向撑满，不留右侧空隙 */
    align-self: stretch;
    box-sizing: border-box;
    max-width: none;
}

/* 属性/导出面板（最右侧） */
.property-export-panel {
    width: var(--property-panel-width, 220px);
    min-width: 120px;
    max-width: min(420px, 48%);
    flex-shrink: 0;  /* 防止被 flex 布局压缩 */
    background: var(--editor-bg-panel);
    border-left: 1px solid var(--editor-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 属性面板标题区域 */
/* V05-28 #10: 压缩属性面板标题行高度，从 ~24px 降至 ~20px */
.property-panel-header {
    padding: 3px 12px 2px;
    border-bottom: 1px solid var(--editor-border);
    flex-shrink: 0;
}
.property-panel-header h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--editor-text-primary);
}
.property-panel-subtitle {
    margin: 1px 0 0;
    font-size: 10px;
    line-height: 1.2;
    color: var(--editor-text-secondary);
    opacity: 0.7;
}

/* ============================================
   可拖拽分隔条
   ============================================ */
.resizer {
    background: var(--editor-border);
    cursor: col-resize;
    width: 4px;
    position: relative;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.resizer:hover,
.resizer.active {
    background: var(--editor-accent);
}

.resizer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(var(--editor-accent-rgb), 0.26);
    background:
        linear-gradient(90deg, transparent 5px, rgba(var(--editor-accent-rgb), 0.78) 5px 7px, transparent 7px 11px, rgba(var(--editor-accent-rgb), 0.78) 11px 13px, transparent 13px),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 8;
}

.resizer:hover::after,
.resizer.active::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.resizer.horizontal {
    cursor: row-resize;
    width: auto;
    height: 4px;
}

.resizer.horizontal::after {
    width: 34px;
    height: 18px;
    background:
        linear-gradient(0deg, transparent 5px, rgba(var(--editor-accent-rgb), 0.78) 5px 7px, transparent 7px 11px, rgba(var(--editor-accent-rgb), 0.78) 11px 13px, transparent 13px),
        rgba(255, 255, 255, 0.94);
}

/* ============================================
   菜单栏
   ============================================ */
.editor-menubar {
    height: var(--menubar-height);
    background: var(--editor-bg-main);
    border-bottom: 1px solid var(--editor-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
}

/* do02：项目状态 + 关键动作 + 更多（主模板 #editorMenubarNew） */
.editor-menubar--project-first {
    min-height: var(--menubar-height);
    height: var(--menubar-height);
    flex-wrap: nowrap;
    row-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.editor-menubar--project-first .menubar-leading {
    flex: 0 0 auto;
}

.editor-menubar--project-first .menubar-status--primary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--editor-text-secondary);
}

.editor-menubar--project-first .menubar-project--block {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-content: center;
}

.editor-menubar--project-first .menubar-project-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.editor-menubar--project-first .project-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.editor-menubar--project-first .menubar-status--pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--editor-border);
    border-radius: 999px;
    background: var(--editor-bg-hover);
    color: var(--editor-text-secondary);
    white-space: nowrap;
}

.editor-menubar--project-first .menubar-project-text .project-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--editor-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42vw;
}

.editing-board-async-inline-host {
    display: none;
    min-width: 0;
}

.editing-board-async-inline-host .editing-board-async-bar {
    margin: 0;
}

.editor-menubar--project-first .menubar-primary-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.editor-menubar--project-first .menubar-trailing {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.btn-menubar-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--editor-border);
    background: var(--editor-bg-panel);
    color: var(--editor-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-menubar-key:hover {
    background: var(--editor-bg-hover);
    border-color: var(--editor-accent);
}

.btn-menubar-key--accent {
    background: var(--editor-accent);
    border-color: var(--editor-accent);
    color: var(--editor-on-accent);
}

.btn-menubar-key--accent:hover {
    background: var(--editor-accent-hover);
    border-color: var(--editor-accent-hover);
    color: var(--editor-on-accent);
}

.btn-menubar-key--ai {
    border-color: var(--editor-ai-border);
    background: var(--editor-ai-accent-soft);
    color: var(--editor-ai-accent);
}

.btn-menubar-key--ai:hover {
    background: rgba(var(--editor-ai-rgb), 0.18);
    border-color: var(--editor-ai-accent);
}

.resource-level-select--compact {
    max-width: 112px;
    font-size: 11px;
    padding: 4px 6px;
}

.menu-trigger--more .menu-trigger-label {
    font-weight: 500;
}

/* 点击展开「更多」：触摸设备无 hover 时生效（与 hover 规则并存） */
.menu-trigger.open .menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* legacy 注入条（editing_board_layout.getEditorMenubarHTML） */
.menubar-project-first-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 8px 12px;
    background: var(--editor-bg-main);
    border-bottom: 1px solid var(--editor-border);
}

.menubar-project-first-row .menubar-legacy-menu-hint {
    font-size: 11px;
    color: var(--editor-text-muted);
    margin-left: auto;
}

@media (max-width: 720px) {
    .editor-menubar--project-first .menubar-trailing {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .editor-menubar--project-first .menubar-primary-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .editor-menubar--project-first .project-title-row {
        flex-wrap: wrap;
    }
}

/* 菜单按钮 */
.menu-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--editor-bg-panel);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-md);
    color: var(--editor-text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.menu-trigger:hover {
    background: var(--editor-bg-hover);
    border-color: var(--editor-accent);
}

.menu-trigger .menu-arrow {
    transition: transform var(--transition-fast);
}

.menu-trigger .menu-arrow .ui-icon {
    width: 12px;
    height: 12px;
}

.menu-trigger:hover .menu-arrow {
    transform: rotate(180deg);
}

/* 一级菜单下拉 - 深色主题强制 */
.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--editor-bg-panel) !important;
    border: 1px solid var(--editor-border) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(28, 25, 23, 0.12);
    min-width: 160px;
    z-index: 10120;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
}

.menu-trigger:hover .menu-dropdown,
.menu-dropdown:hover,
.menu-trigger.open .menu-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 菜单项 - 深色主题强制 */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: var(--editor-text-primary) !important;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
    background: transparent;
}

.menu-item:hover {
    background: var(--editor-bg-hover) !important;
}

.menu-item:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.menu-item:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.menu-item .shortcut {
    color: var(--editor-text-muted);
    font-size: 11px;
    margin-left: 24px;
}

.ui-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
}

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

.btn.has-icon,
.btn-export-quick.has-icon,
.playback-btn.has-icon,
.toolbar-btn.has-icon,
.toolbar-help.has-icon,
.volume-icon.has-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.has-icon,
.btn-export-quick.has-icon,
.btn-menubar-key.has-icon {
    gap: 8px;
}

.ui-icon-label {
    line-height: 1;
    font-size: inherit;
}

.menu-item.has-submenu::after {
    content: '▸';
    color: var(--editor-text-muted);
}

.menu-divider {
    height: 1px;
    background: var(--editor-border);
    margin: 4px 0;
}

/* 二级菜单 */
.submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 4px;
    background: var(--editor-bg-panel) !important;
    border: 1px solid var(--editor-border) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(28, 25, 23, 0.12);
    min-width: 160px;
    z-index: 10121;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: all var(--transition-fast);
}

.menu-item.has-submenu:hover .submenu,
.menu-item.has-submenu:focus-within .submenu,
.menu-item.has-submenu.open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 右对齐触发器（顶栏"更多"）下的子菜单向左翻转，避免超出视口右边 */
.menu-trigger--more .menu-item.has-submenu > .submenu,
.menu-item.has-submenu.submenu-flip-left > .submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
    transform: translateX(8px);
}

.menu-trigger--more .menu-item.has-submenu:hover > .submenu,
.menu-trigger--more .menu-item.has-submenu:focus-within > .submenu,
.menu-trigger--more .menu-item.has-submenu.open > .submenu,
.menu-item.has-submenu.submenu-flip-left:hover > .submenu,
.menu-item.has-submenu.submenu-flip-left:focus-within > .submenu,
.menu-item.has-submenu.submenu-flip-left.open > .submenu {
    transform: translateX(0);
}

/* 菜单栏状态信息 */
.menubar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--editor-text-secondary);
}

.menubar-status .status-icon {
    color: var(--editor-success);
}

/* 项目名称（居中） */
.menubar-project {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.menubar-project .project-icon {
    display: inline-flex;
}

.menubar-project .project-icon .ui-icon,
.resource-level-indicator-icon .ui-icon {
    width: 14px;
    height: 14px;
}

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

.menubar-project .project-source {
    font-size: 12px;
    color: var(--editor-text-muted);
    padding: 2px 8px;
    background: var(--editor-bg-hover);
    border-radius: var(--radius-sm);
}

/* 菜单栏右侧控制 */
.menubar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resource-level-select {
    padding: 4px 8px;
    background: var(--editor-bg-panel);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-sm);
    color: var(--editor-text-primary);
    font-size: 12px;
    cursor: pointer;
}

.resource-level-select:hover {
    border-color: var(--editor-accent);
}

.btn-export-quick {
    padding: 6px 16px;
    background: var(--editor-accent);
    color: var(--editor-on-accent);
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-export-quick:hover {
    background: var(--editor-accent-hover);
}

/* ============================================
   预览区
   ============================================ */
.preview-section {
    flex: 0 0 clamp(220px, 38vh, 320px);
    display: flex;
    flex-direction: column;
    background: var(--editor-bg-dark);
    border-bottom: 1px solid var(--editor-border);
    min-height: 0;
}

/* 预览区标题行：标题居左，加载状态居右 */
.preview-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    height: 28px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--editor-border);
}

.preview-section-header .preview-section-title {
    font-size: 11px;
    color: var(--editor-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 异步加载状态行（内联到标题右侧） */
.preview-section-header .editing-board-async-inline-host {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--editor-text-muted);
    min-width: 0;
}

/* 预览区Tab */
.preview-tabs {
    display: flex;
    background: var(--editor-bg-panel);
    border-bottom: 1px solid var(--editor-border);
}

/* 模板内嵌预览 Tab 条（替代历史 inline 黑底） */
.preview-tabs.preview-tabs--embedded {
    padding: 4px 8px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    gap: 4px;
}

.preview-tabs.preview-tabs--embedded .preview-tab {
    border: none;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 13px;
    background: transparent;
}

.preview-tab {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--editor-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
}

.preview-tab:hover {
    color: var(--editor-text-primary);
    background: var(--editor-bg-hover);
}

.preview-tab.active {
    color: var(--editor-text-primary);
    border-bottom-color: var(--editor-accent);
}

/* 预览视频容器 */
/* ── 层1：外框（弹性壳，不设 aspect-ratio，居中渲染框） ──────────────
 * 职责：适应面板 resize，把渲染框居中展示；自身比例浮动是期望行为
 * 背景：与整体预览窗口同色（editor-preview-well），表示"帧外区域"
 * ⛔ 不在此处设 aspect-ratio，否则 flex:1 + aspect-ratio 互相竞争导致比例漂移
 * ------------------------------------------------------------------*/
.preview-video-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--editor-preview-well) !important;
    position: relative;
    min-height: 140px;
    max-height: min(26vh, 260px);
    overflow: hidden;
    border-radius: 6px;
}

/* ── 层2：渲染框（三层架构 SSOT V05-13C：JS ResizeObserver 精确控制尺寸） ──
 * 职责：固定输出比例，overflow:hidden 裁切超出的视频变换；
 * ⛔ width/height 不在 CSS 设置，由 _syncRenderFrameSize() 精确写入 px
 *    这实现了 object-fit:contain 效果：外框任意比例时渲染框始终维持输出比例
 * ------------------------------------------------------------------*/
.preview-render-frame {
    position: relative;
    flex-shrink: 0;          /* 防止 flex 压缩导致尺寸计算失效 */
    overflow: hidden;        /* 裁切：视频变换超出渲染帧的内容 */
    contain: paint;          /* 强制合成层，修复 <video>+transform 不触发 overflow clip 的 bug */
    border-radius: 4px;
    /* width/height 由 JS _syncRenderFrameSize() 实时注入 */
}

/* ── 输出帧底纹（stage-canvas-bg 棋盘格）──────────────────────────
 * 目的：区分"帧内 letterbox/pillarbox 空白"与"实际视频黑色画面"
 * 逻辑：两格颜色差异极小（亮度差 ~3%），视频充满时几乎不可见；
 *        视频缩小/比例不匹配时，底纹清晰标示"此处导出为黑色/透明"
 * ------------------------------------------------------------------*/
#stage-canvas-bg {
    background:
        repeating-conic-gradient(
            #1c1c1c 0% 25%,
            #222222 0% 50%
        )
        0 0 / 14px 14px !important;
}

/* ── 输出帧边界指示器 ─────────────────────────────────────────────
 * 位置：容器内侧，z-index 高于视频槽，pointer-events none
 * 作用：明确标记"容器边缘 = 最终导出视频边缘"
 * 设计：2px 白边（亮度 55%）+ 内阴影黑边，两色对比确保在深/浅内容上均可见
 *       平时 opacity:0.8 → 总是清晰可见；播放中提升到 1.0
 * ------------------------------------------------------------------*/
.preview-output-frame-border {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.60);
    pointer-events: none;
    z-index: 22;
    border-radius: inherit;
    opacity: 0.8;
}

/* 视频播放中：边框完全不透明，对比度更高 */
.preview-video-container.is-playing .preview-output-frame-border {
    opacity: 1;
}

.preview-video-container .preview-video-slot,
.preview-video-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.preview-video-container .preview-video-slot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.preview-video-container .preview-video-slot.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

.preview-video-container .preview-video-slot.is-standby {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.preview-video-container video,
.preview-video-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.preview-placeholder {
    color: var(--editor-text-muted) !important;
    font-size: 14px;
    text-align: center;
}

/* ── 预览占位结构化卡片（V0510b · 统一错误/空态展示） ──────────────── */
.preview-placeholder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
}
.preview-placeholder-card--empty {
    gap: 0;
}
.preview-placeholder-icon {
    font-size: 22px;
    line-height: 1;
    opacity: 0.65;
    margin-bottom: 2px;
}
.preview-placeholder-title {
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
    line-height: 1.3;
}
.preview-placeholder-reason {
    font-size: 12px;
    color: #9ca3af;
    max-width: 260px;
    text-align: center;
    line-height: 1.5;
}
.preview-placeholder-hint {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    max-width: 240px;
}
.preview-placeholder-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.preview-placeholder-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}
.preview-placeholder-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f9fafb;
}
.preview-placeholder-btn--primary {
    background: rgba(113, 62, 255, 0.72);
    border-color: rgba(113, 62, 255, 0.9);
    color: #fff;
}
.preview-placeholder-btn--primary:hover {
    background: rgba(113, 62, 255, 0.88);
}

/* do01：覆盖脚本写入的预览区内联深色底（不改业务 JS） */
.editing-board-theme-light .preview-video-container .asset-preview-content {
    background: var(--editor-preview-well) !important;
}

.editing-board-theme-light .preview-video-container .preview-image-overlay-layer,
.editing-board-theme-light .preview-video-container .preview-overlay-image-frame,
.editing-board-theme-light .preview-video-container .preview-overlay-image {
    background: transparent !important;
}

/* 预览 Tab：覆盖脚本对 #888 / #fff 的内联色 */
.editing-board-theme-light #previewTabEdit.preview-tab,
.editing-board-theme-light #previewTabAsset.preview-tab {
    color: var(--editor-text-secondary) !important;
}
.editing-board-theme-light #previewTabEdit.preview-tab.active,
.editing-board-theme-light #previewTabAsset.preview-tab.active {
    color: var(--editor-text-primary) !important;
    border-bottom-color: var(--editor-accent) !important;
}

/* AI 媒体标记（提升到 preview-video-container 直接子级，脱离 contain:paint 隔离） */
.editing-board-container .aigc-media-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    color: var(--editor-ai-accent);
    background: var(--editor-ai-accent-soft);
    border: 1px solid var(--editor-ai-border);
    border-radius: 4px;
    padding: 2px 8px;
    z-index: 30;
    pointer-events: none;
}

/* 播放控制条 */
/* EB-DENSITY-3a · 播放控制区纵向省白：8/16 → 4/16（释放 8px 纵向） */
.preview-controls {
    padding: 4px 16px;
    background: var(--editor-bg-panel);
    border-top: 1px solid var(--editor-border);
}

.timeline-focus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--editor-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,247,251,0.98));
}

.timeline-focus-summary {
    font-size: 12px;
    font-weight: 600;
    color: var(--editor-text-secondary);
    white-space: nowrap;
}

.timeline-focus-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.timeline-focus-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--editor-border);
    border-radius: 999px;
    background: var(--editor-bg-panel);
    color: var(--editor-text-primary);
    font-size: 12px;
    font-weight: 600;
}

.timeline-focus-action:hover {
    background: var(--editor-bg-hover);
    border-color: var(--editor-accent);
}

.timeline-focus-action--accent {
    background: var(--editor-ai-accent-soft);
    border-color: var(--editor-ai-border);
    color: var(--editor-ai-accent);
}

.preview-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
}

.preview-controls-row > * {
    min-width: 0;
}

/* EB-DENSITY-3b · 播放控制两行间距：8 → 4（再释放 4px 纵向） */
.preview-controls-row:first-child {
    margin-bottom: 4px;
}

/* 播放按钮组 */
.playback-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.playback-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--editor-text-secondary);
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.playback-btn.has-icon,
.toolbar-btn.has-icon,
.toolbar-help.has-icon {
    font-size: 0;
}

.playback-btn .ui-icon {
    width: 14px;
    height: 14px;
}

.playback-btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.playback-btn.play-btn {
    width: 36px;
    height: 36px;
    background: var(--editor-accent);
    color: var(--editor-on-accent);
    border-radius: 50%;
}

.playback-btn.play-btn .ui-icon {
    width: 16px;
    height: 16px;
}

.playback-btn.play-btn:hover {
    background: var(--editor-accent-hover);
}

/* 时间码显示 */
.timecode-display {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: var(--editor-text-primary);
    padding: 4px 8px;
    background: var(--editor-bg-dark);
    border-radius: var(--radius-sm);
    min-width: 132px;
    width: fit-content;
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 音量控制 */
.volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
}

.volume-loop-controls {
    min-width: 0;
}

.volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    background: var(--editor-bg-hover);
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--editor-accent);
    border-radius: 50%;
    cursor: pointer;
}

/* 画质/比例选择 */
.preview-settings {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.setting-select {
    padding: 4px 8px;
    background: var(--editor-bg-dark);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-sm);
    color: var(--editor-text-primary);
    font-size: 11px;
    cursor: pointer;
}

.setting-select:hover {
    border-color: var(--editor-accent);
}

/* ============================================
   时间线区域
   ============================================ */
.timeline-section {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    background: var(--editor-bg-darkest);
    overflow: hidden;
    min-height: 320px;
    /* Bug6-fix: 显式 100% 宽度防止右侧空隙 */
    width: 100%;
    box-sizing: border-box;
}

/* 时间线工具栏 */
.timeline-toolbar {
    min-height: var(--toolbar-height);
    height: auto;
    background: var(--editor-bg-panel);
    border-bottom: 1px solid var(--editor-border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.toolbar-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--editor-text-secondary);
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.toolbar-btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.toolbar-btn:active,
.toolbar-btn.active {
    background: var(--editor-accent);
    color: var(--editor-on-accent);
}

.toolbar-btn:disabled {
    color: var(--editor-text-disabled);
    cursor: not-allowed;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--editor-border);
    margin: 0 8px;
}

.toolbar-spacer {
    flex: 1;
}

.zoom-display {
    font-size: 11px;
    color: var(--editor-text-muted);
    min-width: 40px;
    text-align: center;
    padding: 0 4px;
}

.toolbar-help {
    width: 24px;
    height: 24px;
    background: var(--editor-bg-hover);
    border: 1px solid var(--editor-border);
    border-radius: 50%;
    color: var(--editor-text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-help:hover {
    border-color: var(--editor-accent);
    color: var(--editor-accent);
}

.btn-export-quick.has-icon,
.export-actions .btn.has-icon {
    justify-content: flex-start;
}

/* 时间线主体 */
.timeline-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 时间刻度尺 */
.timeline-ruler {
    height: 24px;
    background: var(--editor-bg-panel);
    border-bottom: 1px solid var(--editor-border);
    position: relative;
    overflow: hidden;
}

.time-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--editor-border);
}

.time-label {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 10px;
    color: var(--editor-text-muted);
    white-space: nowrap;
}

/* 轨道区域 */
.timeline-tracks-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* 中线 */
.timeline-centerline {
    height: 2px;
    background: var(--timeline-centerline);
    position: relative;
    flex-shrink: 0;
    margin: 8px 0;
}

/* 中线标签已移除 - 强制覆盖 */
.timeline-centerline::before,
.timeline-centerline::after {
    content: none !important;
    display: none !important;
}

/* 轨道组（中线上方：视觉轨道） */
.tracks-visual {
    display: flex;
    flex-direction: column-reverse; /* 字幕在最上 */
    min-height: 100px;
}

/* 轨道组（中线下方：音频轨道） */
.tracks-audio {
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

/* 轨道行 */
.track-row {
    display: flex;
    height: 50px;
    border-bottom: 1px solid var(--editor-border-dark);
    background: var(--editor-bg-darkest);
    transition: background var(--transition-fast);
}

.track-row:hover {
    background: var(--editor-bg-dark);
}

/* 轨道标签 */
.track-label {
    width: 100px;
    min-width: 100px;
    padding: 8px;
    background: var(--editor-bg-panel);
    border-right: 1px solid var(--editor-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    /* 必须压在 playhead (z-index:50) 之上 · 防止播放头越过 headerWidth 时压住标签 */
    position: relative;
    z-index: 60;
}

/* timeline-header 里的轨道头也要高过 playhead · 同理 */
.timeline-header .track-header {
    position: relative;
    z-index: 60;
}

.track-label .track-name {
    font-size: 11px;
    color: var(--editor-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-label .track-controls {
    display: flex;
    gap: 4px;
}

.track-control-btn {
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    color: var(--editor-text-muted);
    font-size: 10px;
    cursor: pointer;
    border-radius: var(--radius-sm, 3px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
    padding: 0;
}

.track-control-btn:hover {
    color: var(--editor-text-primary);
    background: var(--editor-bg-hover);
}

.track-control-btn.active {
    color: var(--editor-accent);
}

/* 轨道控制按钮内 SVG 图标统一尺寸 */
.track-control-btn .ui-icon svg,
.track-control-btn .track-ctrl-icon svg {
    width: 12px;
    height: 12px;
}

/* 轨道类型图标（轨道标签前的 SVG） */
.track-name .ui-icon,
.track-name .track-type-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 3px;
    opacity: 0.75;
}

.track-name .ui-icon svg,
.track-name .track-type-icon svg {
    width: 12px;
    height: 12px;
}

/* 轨道内容 */
.track-content {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.track-content::-webkit-scrollbar {
    height: 0;
}

.track-content-canvas {
    position: relative;
    min-height: 100%;
}

/* 片段样式 */
.segment {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    border-radius: var(--radius-sm);
    cursor: move;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast);
    display: flex;
    align-items: center;
    padding: 0 4px;
    overflow: hidden;
    /* Bug3-fix: 去掉全局 opacity 叠加（JS 侧已移除 88 alpha），改用 brightness 暗化代替透明叠色，
       hover/selected 用 brightness 升亮（保持 opacity=1 避免与轨道底色二次叠色）。 */
    opacity: 1;
    filter: saturate(0.8) brightness(0.88);
    /* Bug1-fix: 极短素材在低缩放时保留最小可见宽度 */
    min-width: 2px;
    box-sizing: border-box;
}

.segment:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28, 25, 23, 0.15);
    opacity: 1;
    /* hover 比 normal 亮 — 符合直觉 */
    filter: saturate(1) brightness(1.05);
}

.segment.selected {
    opacity: 1;
    filter: saturate(1);
    box-shadow: 0 0 0 2px var(--editor-ai-border), 0 10px 18px rgba(28, 25, 23, 0.16);
}

.segment.dragging {
    opacity: 0.85;
    filter: saturate(1);
    z-index: 100;
}

.segment-label {
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* V06-04: 转场徽章基础样式 */
.transition-badge {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background: rgba(139, 92, 246, 0.22);
    border: 1px solid rgba(139, 92, 246, 0.55);
    border-radius: 4px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #8b5cf6;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* V06-04: 转场徽章高光选中态 */
.transition-badge--selected {
    background: rgba(139, 92, 246, 0.38) !important;
    border-color: rgba(167, 139, 250, 0.85) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.55), 0 0 3px rgba(167, 139, 250, 0.7);
    color: #c4b5fd;
    font-weight: 600;
    z-index: 5;
}

/* V06-04: 吸附引导线 */
.snap-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffd166;
    box-shadow: 0 0 8px 2px rgba(255, 209, 102, 0.5);
    z-index: 49;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

/* V06-04: 材质侧吸附引导线（虚线，表示被拖素材的边界） */
.snap-guide--material {
    background: rgba(255, 209, 102, 0.6);
    box-shadow: 0 0 4px 1px rgba(255, 209, 102, 0.3);
    border-left: 1px dashed #ffd166;
    z-index: 48;
}

/* V06-04: 吸附引导线闪烁动画 */
@keyframes snapGuidePulse {
    0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 209, 102, 0.5); }
    50% { box-shadow: 0 0 14px 4px rgba(255, 209, 102, 0.75); }
}

.snap-guide--pulse {
    animation: snapGuidePulse 0.4s ease-in-out 2;
}

/* V06-04: 素材拖拽边界光标 */
.snap-boundary-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 209, 102, 0.7);
    z-index: 48;
    pointer-events: none;
    border-left: 1px dashed #ffd166;
}

.segment.segment--tiny .segment-resize-handle,
.segment.segment--tiny .segment-transition-marker,
.segment.segment--tiny .segment-keyframe-dot,
.segment.segment--tiny .segment-volume-line {
    display: none;
}
/* V0514-tiny-fix: 极小段（width<8px）升为全高竖条，确保短音频片段在低缩放下可见。
   top:0/height:100% 覆盖基础 .segment 的 top:4px/height:calc(100%-8px)，
   padding:0 避免 overflow 裁切背景色，brightness 稍微提亮增强与轨道底的对比。 */
.segment.segment--tiny {
    top: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    padding: 0 !important;
    filter: saturate(0.9) brightness(0.9) !important;
    min-width: 3px;
}
/* V0512-fix: segment--tiny 标签由 JS showLabel 控制，label 已被 JS 抑制，此条保留防御 */
.segment.segment--tiny .segment-label {
    display: none;
}

/* 轨道类型颜色 */
.track-row[data-track-type="subtitle"] .segment { background: var(--track-subtitle); }
.track-row[data-track-type="image"] .segment { background: var(--track-image); }
.track-row[data-track-type="video"] .segment { background: var(--track-video); }
.track-row[data-track-type="audio"] .segment,
.track-row[data-track-type="narration"] .segment { background: var(--track-narration); }
.track-row[data-track-type="bgm"] .segment { background: var(--track-bgm); }
.track-row[data-track-type="sfx"] .segment { background: var(--track-sfx); }

.transition-library-panel {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.transition-library-title {
    font-size: 12px;
    color: var(--editor-text-muted, #6b7280);
    margin-bottom: 6px;
}

.transition-effect-item {
    padding: 10px 12px;
    border: 1px solid var(--editor-border, #d9e1f2);
    border-radius: 10px;
    background: var(--editor-bg-card, rgba(255,255,255,0.72));
    color: var(--editor-text-primary, #1f2937);
    cursor: grab;
    font-size: 13px;
}

.transition-effect-item:active {
    cursor: grabbing;
}

.preview-transform-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    border: 2px solid rgba(59, 130, 246, 0.85);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 12px rgba(59,130,246,0.25);
    cursor: move;
    touch-action: none;
    pointer-events: auto;
    /* 渲染帧边界：inset:0 = 与容器完全对齐，transform 在此框内生效，溢出被父级裁切 */
}

.preview-transform-overlay[hidden] {
    display: none;
}

.preview-transform-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid #3b82f6;
}

.preview-transform-handle--scale {
    right: -9px;
    bottom: -9px;
    cursor: nwse-resize;
}

.preview-transform-handle--rotate {
    top: 6px;
    right: 6px;
    left: auto;
    transform: none;
    cursor: grab;
    /* 旋转手柄移至框内右上角，避免被 overflow:hidden 裁切；与缩放手柄（右下角）可辨别 */
}
.preview-transform-handle--rotate::after {
    content: '↻';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #3b82f6;
    pointer-events: none;
}

/* 播放头 */
.timeline-wrapper .time-scale-container {
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.timeline-wrapper .time-scale-container::-webkit-scrollbar {
    height: 0;
}

.timeline-wrapper .time-scale-content {
    position: relative;
    min-height: 100%;
}

.timeline-wrapper.has-timeline-bottom-scroll .timeline-tracks-wrapper {
    padding-bottom: 30px;
}

.timeline-bottom-scroll-host {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 35;
    height: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 999px;
    scrollbar-gutter: stable;
}

.timeline-bottom-scroll-host::-webkit-scrollbar {
    height: 12px;
}

.timeline-bottom-scroll-host::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
}

.timeline-bottom-scroll-host::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.82);
    border-radius: 999px;
}

.timeline-bottom-scroll-spacer {
    height: 1px;
}

.timeline-wrapper .playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--timeline-playhead-hit-width, 18px);
    background: transparent;
    z-index: 50;
    pointer-events: auto;
    cursor: ew-resize;
    transform: translateX(calc(var(--timeline-playhead-hit-width, 18px) / -2));
    touch-action: none;
    user-select: none;
}

.timeline-wrapper .playhead::before {
    display: none;
}

.timeline-wrapper .playhead-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--editor-accent);
    border-radius: 999px;
    box-shadow: none;
    pointer-events: none;
}

.timeline-wrapper .playhead-grip {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 8px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 0 0 6px 6px;
    background: var(--editor-accent);
    box-shadow: 0 1px 4px rgba(31, 41, 55, 0.16);
    pointer-events: none;
}

.timeline-wrapper .playhead.is-scrubbing .playhead-grip {
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.24);
}

/* 空状态提示 */
.empty-track-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--editor-text-muted);
    pointer-events: none;
}

/* ============================================
   素材库面板
   ============================================ */
.asset-library {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--editor-bg-panel);
    color: var(--editor-text-primary);
}

.asset-library-header {
    padding: 12px;
    border-bottom: 1px solid var(--editor-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.asset-library-header h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--editor-text-primary);
}

.asset-library-actions {
    display: flex;
    gap: 6px;
}

.asset-library-actions button {
    padding: 4px 8px;
    background: var(--editor-bg-hover);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-sm);
    color: var(--editor-text-primary);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.asset-library-actions button:hover {
    background: var(--editor-accent);
    border-color: var(--editor-accent);
    color: var(--editor-on-accent);
}

/* 素材库Tab */
.asset-library-tabs {
    display: flex;
    border-bottom: 1px solid var(--editor-border);
}

.asset-library-tabs .tab-btn {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--editor-text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.asset-library-tabs .tab-btn:hover {
    color: var(--editor-text-primary);
    background: var(--editor-bg-hover);
}

.asset-library-tabs .tab-btn.active {
    color: var(--editor-text-primary);
    border-bottom-color: var(--editor-accent);
}

/* 素材库内容 */
.asset-library-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* 素材分组 - 可折叠 */
.asset-group {
    margin-bottom: 8px;
}

.asset-group-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--editor-bg-hover);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    margin-bottom: 4px;
}

.asset-group-header:hover {
    background: var(--editor-bg-active);
}

.asset-group-header .collapse-icon {
    width: 16px;
    font-size: 0;
    color: var(--editor-text-muted);
    margin-right: 6px;
}

.asset-group-header .collapse-icon .ui-icon,
.property-section-header .collapse-icon .ui-icon {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-fast);
}

.asset-group-header.collapsed .collapse-icon .ui-icon {
    transform: rotate(-90deg);
}

.asset-group-header h4 {
    flex: 1;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--editor-text-primary);
}

.asset-group-header .asset-count {
    font-size: 11px;
    color: var(--editor-text-muted);
    padding: 1px 6px;
    background: var(--editor-bg-dark);
    border-radius: 10px;
}

.asset-group-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.asset-group-header.collapsed + .asset-group-content {
    max-height: 0;
}

/* 素材列表 */
.asset-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 8px;
}

/* 素材项 */
.asset-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--editor-bg-dark);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

/* 按素材类型设置不同背景色 */
.asset-item[data-asset-type="subtitle"],
.asset-item[data-asset-type="text"] {
    background: rgba(168, 85, 247, 0.14);
    border-left: 3px solid var(--track-subtitle);
}

.asset-item[data-asset-type="image"] {
    background: rgba(202, 138, 4, 0.14);
    border-left: 3px solid var(--track-image);
}

.asset-item[data-asset-type="video"] {
    background: rgba(13, 148, 136, 0.14);
    border-left: 3px solid var(--track-video);
}

.asset-item[data-asset-type="audio"],
.asset-item[data-asset-type="narration"],
.asset-item[data-asset-type="bgm"],
.asset-item[data-asset-type="sfx"] {
    background: rgba(234, 88, 12, 0.12);
    border-left: 3px solid var(--track-audio);
}

.asset-item:hover {
    filter: brightness(1.1);
    border-color: var(--editor-border-light);
}

.asset-item:active,
.asset-item.dragging {
    cursor: grabbing;
    filter: brightness(1.2);
    border-color: var(--editor-accent);
}

.asset-item .asset-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.asset-item .asset-label {
    flex: 1;
    font-size: 11px;
    color: var(--editor-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-item .asset-duration {
    font-size: 10px;
    color: var(--editor-text-muted);
}

.empty-assets {
    padding: 20px;
    text-align: center;
    color: var(--editor-text-muted);
    font-size: 12px;
}

/* 拖拽悬停效果 */
.asset-library-content.drag-over {
    background: rgba(var(--editor-accent-rgb), 0.1);
    border: 2px dashed var(--editor-accent);
}

/* ============================================
   属性/导出面板
   ============================================ */
/* V06-02 #6: 面板收矮 — 紧凑化属性面板垂直间距 */
.property-export-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 6px;  /* V06-02: 8px → 4px 6px */
}

/* 属性区块 */
.property-section {
    margin-bottom: 1px;  /* V06-02: 4px → 2px; V06-04: → 1px */
}

.property-section-header {
    display: flex;
    align-items: center;
    padding: 1px 0;  /* V06-02: 2px → 1px */
    cursor: pointer;
}

.property-section-header .collapse-icon {
    width: 16px;
    font-size: 0;
    color: var(--editor-text-muted);
}

.property-section-header.collapsed .collapse-icon .ui-icon {
    transform: rotate(-90deg);
}

.property-section-header h4 {
    flex: 1;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--editor-text-primary);
}

.property-section-content {
    padding-left: 10px;  /* V05-29 #10: 16px → 10px */
}

/* ── P1-11: 三段折叠 section（手风琴：展开一个收拢其他） ── */
.property-section-collapsible {
    margin-bottom: 1px;   /* V06-12: 2px → 1px 进一步收矮 */
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-md);
    background: var(--editor-bg-panel);
    overflow: hidden;
}

.property-section-collapsible-title {
    display: flex;
    align-items: center;
    padding: 2px 4px;  /* V06-02: 4px 8px → 3px 6px; V06-04: → 2px 4px 再收30% */
    font-size: 11px;   /* V06-02: 12px → 11px 收矮 */
    font-weight: 600;
    color: var(--editor-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.property-section-collapsible-title::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--editor-text-muted);
    margin-right: 8px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.property-section-collapsible--open .property-section-collapsible-title::before {
    transform: rotate(-90deg);
}

.property-section-collapsible-title:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.property-section-collapsible-body {
    display: none;
    padding: 1px 4px 2px 4px;  /* V06-12: 2px 6px 4px 6px → 进一步收矮 */
    border-top: 1px solid var(--editor-border);
}

.property-section-collapsible--open .property-section-collapsible-body {
    display: block;
}

.property-section-collapsible--open .property-section-collapsible-title {
    color: var(--editor-text-primary);
    background: var(--editor-bg-hover);
}

/* 属性行 */
.property-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px;  /* V06-12: 4px → 2px 进一步收矮 */
}

.property-row label {
    width: 60px;
    font-size: 11px;
    color: var(--editor-text-secondary);
}

.property-row input[type="number"],
.property-row input[type="text"] {
    flex: 1;
    padding: 4px 8px;
    background: var(--editor-bg-dark);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-sm);
    color: var(--editor-text-primary);
    font-size: 11px;
}

.property-row input:focus {
    outline: none;
    border-color: var(--editor-accent);
}

.property-row input[type="range"] {
    flex: 1;
    margin: 0 8px;
}

.property-row select {
    flex: 1;
    padding: 4px 8px;
    background: var(--editor-bg-dark);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-sm);
    color: var(--editor-text-primary);
    font-size: 11px;
    cursor: pointer;
}

/* EB-11: 模板保存/套用行 */
.property-template-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;     /* V06-12: 10px → 4px */
    padding-top: 4px;    /* V06-12: 10px → 4px */
    border-top: 1px solid var(--editor-border);
}

.property-template-row select {
    flex: 1;
    padding: 4px 8px;
    background: var(--editor-bg-dark);
    border: 1px solid var(--editor-border);
    border-radius: var(--radius-sm);
    color: var(--editor-text-primary);
    font-size: 11px;
    cursor: pointer;
    min-width: 0;
}

.property-template-row .btn-compact {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* 属性面板控件单一源：动态渲染与静态模板统一命中 */
.property-export-panel .property-input,
.property-export-panel .property-select,
.property-export-panel .property-row input[type="number"],
.property-export-panel .property-row input[type="text"],
.property-export-panel .property-row select {
    background: var(--editor-bg-dark);
    border: 1px solid var(--editor-border);
    color: var(--editor-text-primary);
}

.property-export-panel .property-input:focus,
.property-export-panel .property-select:focus,
.property-export-panel .property-row input:focus,
.property-export-panel .property-row select:focus {
    outline: none;
    border-color: var(--editor-accent);
    box-shadow: 0 0 0 2px rgba(var(--editor-accent-rgb), 0.22);
}

/* 导出按钮组 */
.export-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.export-actions .btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.export-actions .btn-primary {
    background: var(--editor-accent);
    color: var(--editor-on-accent);
}

.export-actions .btn-primary:hover {
    background: var(--editor-accent-hover);
}

.export-actions .btn-secondary {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
    border: 1px solid var(--editor-border);
}

.export-actions .btn-secondary:hover {
    background: var(--editor-bg-active);
    border-color: var(--editor-border-light);
}

.export-actions hr {
    border: none;
    border-top: 1px solid var(--editor-border);
    margin: 4px 0;
}

/* 属性面板次级子节标题 */
.property-subsection-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--editor-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px 0 2px 0;  /* V06-04: 12px 0 4px 0 → 进一步收矮 */
    padding: 0 4px;
}

/* 属性面板横向 tab 栏 */
.property-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;          /* V06-02: 2px → 1px */
    padding: 2px 4px 0 4px;  /* V06-02: 4px → 2px 顶部 */
    border-bottom: 1px solid var(--editor-border);
}
.property-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 4px;  /* V06-02: 6px 8px → 4px 6px; V06-04: → 2px 4px 再收30% */
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: var(--editor-text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: all 120ms ease;
}
.property-tab:hover {
    color: var(--editor-text-primary);
    background: var(--editor-bg-hover);
}
.property-tab--active {
    color: var(--editor-accent);
    background: var(--editor-bg-panel);
    border-color: var(--editor-border);
    border-bottom-color: var(--editor-bg-panel);
    font-weight: 600;
}
.property-tab-bodies {
    padding: 0;
}
.property-tab-body {
    display: none;
    padding: 1px 2px;  /* V06-12: 2px 4px → 1px 2px 进一步收矮 */
}
.property-tab-body--active {
    display: block;
}
/* 每个 tab 内部的应用/重置按钮组 */
.tab-actions {
    display: flex;
    gap: 4px;              /* V06-02: 6px → 4px */
    padding: 2px 2px 0 2px; /* V06-12: 4px 4px 0 4px → 2px 2px 0 2px */
    border-top: 1px solid var(--editor-border);
    margin-top: 2px;       /* V06-12: 4px → 2px */
}
.tab-actions .btn {
    flex: 1;
    padding: 4px 8px;  /* V06-02: 6px 10px → 4px 8px */
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tab-actions .btn-primary {
    background: var(--editor-accent);
    color: var(--editor-on-accent);
}
.tab-actions .btn-primary:hover {
    background: var(--editor-accent-hover);
}
.tab-actions .btn-secondary {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
    border: 1px solid var(--editor-border);
}
.tab-actions .btn-secondary:hover {
    background: var(--editor-bg-active);
    border-color: var(--editor-border-light);
}

/* 导出预览遮罩 */
.export-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}
.export-preview-modal {
    background: #1c1c1e;
    border-radius: 12px;
    padding: 20px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.export-preview-close {
    align-self: flex-end;
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.export-preview-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
.export-preview-player {
    width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    background: #000;
}
.export-preview-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}
.export-preview-actions .btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
.export-preview-download {
    background: #4a7cff;
    color: #fff;
}
.export-preview-download:hover {
    background: #5a8cff;
}
.export-preview-close-btn {
    background: #3a3a3c;
    color: #ccc;
}
.export-preview-close-btn:hover {
    background: #4a4a4c;
    color: #fff;
}

/* ============================================
   上传进度
   ============================================ */
.upload-status-container {
    padding: 8px 12px;
    background: var(--editor-bg-dark);
    border-bottom: 1px solid var(--editor-border);
}

.upload-progress-bar {
    height: 4px;
    background: var(--editor-bg-hover);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.upload-progress-fill {
    height: 100%;
    background: var(--editor-accent);
    transition: width var(--transition-fast);
}

.upload-status-text {
    font-size: 11px;
    color: var(--editor-text-secondary);
}

.upload-status-text.success {
    color: var(--editor-success);
}

.upload-status-text.error {
    color: var(--editor-error);
}

/* ============================================
   滚动条样式
   ============================================ */
.editing-board-container::-webkit-scrollbar,
.editing-board-container *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.editing-board-container::-webkit-scrollbar-track,
.editing-board-container *::-webkit-scrollbar-track {
    background: var(--editor-bg-darkest);
}

.editing-board-container::-webkit-scrollbar-thumb,
.editing-board-container *::-webkit-scrollbar-thumb {
    background: var(--editor-bg-hover);
    border-radius: 4px;
}

.editing-board-container::-webkit-scrollbar-thumb:hover,
.editing-board-container *::-webkit-scrollbar-thumb:hover {
    background: var(--editor-bg-active);
}

/* ============================================
   响应式调整
   ============================================ */
@media (max-height: 768px) {
    .preview-video-container {
        min-height: 150px;
        max-height: 200px;
    }
    
    .track-row {
        height: 40px;
    }
}

@media (max-width: 1200px) {
    :root {
        --task-panel-width: 150px;
        --asset-panel-width: 180px;
        --property-panel-width: 220px;
    }
}

/* ============================================
   弹窗样式（居中显示）
   ============================================ */
.modal-overlay,
.asset-preview-modal,
.asset-context-menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 25, 23, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-overlay.active,
.asset-preview-modal {
    display: flex;
}

.modal-overlay .modal-content,
.asset-preview-modal .modal-content {
    background: var(--editor-bg-panel);
    border: 1px solid var(--editor-border);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(28, 25, 23, 0.14);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    color: var(--editor-text-primary);
}

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

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--editor-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--editor-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--editor-text-primary);
}

.modal-body {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--editor-text-secondary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--editor-border);
}

.modal-actions .btn {
    min-width: 80px;
}

/* 新建项目弹窗 */
.new-project-modal .modal-content {
    max-width: 400px;
}

.new-project-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 16px;
}

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

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--editor-bg-panel);
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    color: var(--editor-text-primary);
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--editor-accent);
}

/* 素材预览弹窗 */
.asset-preview-modal .modal-content {
    max-width: 800px;
    max-height: 90vh;
}

.asset-preview-modal .preview-container {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #000;
}

.asset-preview-modal video,
.asset-preview-modal img,
.asset-preview-modal audio {
    max-width: 100%;
    max-height: 60vh;
}

/* RC-02c: 素材缓存加载中 shimmer 动画 */
.segment.is-loading-cache {
    position: relative;
    overflow: hidden;
}
.segment.is-loading-cache::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.10) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: shimmer-cache 1.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}
@keyframes shimmer-cache {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 预览窗口：时间轴拖动缓冲提示卡片 ────────────────────────────── */
.preview-buffer-card {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 10px;
    background: rgba(17, 24, 39, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f9fafb;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    z-index: 22;
    pointer-events: none;
    white-space: nowrap;
    /* 出入场渐变 */
    opacity: 1;
    transition: opacity 180ms ease;
}
.preview-buffer-card[hidden] {
    display: none;
}
.preview-buffer-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: preview-buffer-pulse 1.4s ease-in-out infinite;
}
@keyframes preview-buffer-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.85); }
}