@charset "UTF-8";

/* ------------------ 全局变量 ------------------ */
:root {
    --bg-color: rgba(10, 14, 28, 0.95);
    --fg-color: #f0f0f0;
    --muted-color: #a0a0a0;

    --accent-color: #4f9eff;
    --accent-hover: #3b7fd4;

    --panel-bg: rgba(20, 25, 40, 0.6);
    --clip-bg: rgba(30, 35, 55, 0.6);
    --border-color: rgba(255, 255, 255, 0.1);

    --btn-bg: rgba(79, 158, 255, 0.4);
    --btn-hover: rgba(79, 158, 255, 0.6);

    /* explicit preview spacing (regular / compact) */
    --preview-gap-regular: 12px;
    --preview-gap-compact: 6px;

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ------------------ 全局基础 ------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    color: var(--fg-color);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg-color);
    position: relative;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
    line-height: 1.6;
}

/* 背景图单独一层，便于淡入 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 900ms ease;
    z-index: -2;
}

/* 轻微暗角遮罩，增强毛玻璃对比度 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
    opacity: 1;
    z-index: -1;
}

body.bg-ready::before {
    opacity: 1;
}

.scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 16px;
}

/* ------------------ 滚动条样式 ------------------ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--accent-color);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

/* ------------------ 毛玻璃统一样式 ------------------ */
.glass {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);

}

/* ------------------ 面板 ------------------ */
.panel {
    padding: 20px;
    margin: 16px 0;
    display: flow-root;
    /* Creates a block formatting context that contains all children */
    height: auto;
    min-height: fit-content;
    max-height: none;
    overflow: visible;
}

.panel,
pre {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.video-placeholder-container {
    border-radius: var(--radius-md);
}

/* ------------------ 输入区域 ------------------ */
input[type="text"],
select {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    background: var(--clip-bg);
    border: 1px solid var(--border-color);
    color: var(--fg-color);
    outline: none;
    transition: all 0.2s;
}

input[type="range"] {
    outline: none;
    border: none;
}

input[type="range"]:focus {
    outline: none;
    box-shadow: none;
}

input:focus,
select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(79, 158, 255, 0.6);
}

/* ------------------ 按钮 ------------------ */
button {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease-in-out, transform 0.1s ease-in-out;
}

button:hover {
    background: var(--btn-hover);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.click-anim,
button:active {
    background: rgba(79, 158, 255, 0.3);
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ------------------ 视频控制按钮/组件禁用态 ------------------ */
.video-controls button:disabled,
.video-controls select:disabled,
.video-controls input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.video-controls button:disabled:hover,
.video-controls button:disabled:active,
.video-controls button:disabled.click-anim {
    background: var(--btn-bg);
    transform: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.video-controls .icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.video-controls .icon-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: none;
}

.video-controls .speed-select:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.video-controls .player-progress:disabled,
.video-controls .custom-range:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------ 视频播放器 ------------------ */
.video-placeholder-container {
    width: 100%;
    display: flow-root;
    position: relative;
    padding: 8px 0;
    box-sizing: border-box;
    height: auto;
    min-height: fit-content;
    max-height: none;
    overflow: visible;
}

/* Specific centering for the preview elements since we moved to display: block/flow-root */
.video-placeholder-container>* {
    margin-left: auto;
    margin-right: auto;
}

.video-placeholder-container.video-container-compact {

    padding: 8px 0;
}

.video-placeholder-container.video-container-expanded {

    padding: 10px 0;
}

.video-placeholder-text {
    text-align: left;
    padding: 0;
    color: var(--muted-color);
    font-weight: 700;
    word-break: break-all;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

.video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.video-header-actions {
    margin-left: 12px;
}



.select-video-btn {
    padding: 6px 10px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.24);
    /* 提高可触及按钮的可见性 */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: var(--fg-color);
}

/* 控制栏内的选择视频按钮，风格更紧凑，和 icon-btn 协调 */
.video-controls .select-video-btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-left: 6px;
}

.video-controls .select-video-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width:600px) {
    .select-video-btn {
        padding: 8px 10px;
        font-size: 13px;
    }

    .video-controls .select-video-btn {
        padding: 6px 8px;
        font-size: 12px;
        margin-left: 4px;
    }
}

#player {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
}

/* 预览区半透明 / 覆盖提示 */
.video-stage {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 200ms ease;
    /* 默认背景色防止透明空白 */
    background: #000;
}

/* 正在加载时增加深色背景层，避免出现透明效果 */
.video-stage.loading {
    background: #000;
}

.video-stage.dimmed {
    opacity: 0.6;
    /* 用户选择的不透明度 */
    transition: opacity 200ms ease;
}

.video-stage-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 200ms ease, background 200ms ease;
    background: transparent;
}

.video-stage.dimmed .video-stage-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.12);
}

/* Overlay 内部布局（垂直居中，文本+按钮） */
.video-stage-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
}


/* 文件树弹窗 - 优先 560px，但在小屏时不超过视窗 */
.filetree-modal {
    width: min(820px, calc(100vw - 48px));
    max-width: 820px;
    height: min(72vh, 720px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;

    /* 更宽、更留白的卡片 */
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(12, 16, 28, 0.98), rgba(18, 22, 40, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 40px 100px rgba(2, 6, 23, 0.6);
    overflow: hidden;
}

@media (max-height:520px) {
    .filetree-modal {
        height: calc(100vh - 40px);
        max-height: calc(100vh - 40px);
        width: calc(100vw - 32px);
    }
}

@media (max-width:480px) {
    .filetree-modal {
        width: calc(100vw - 24px);
    }
}

/* 保证在非常窄/矮的视口上仍有良好响应 */
@media (max-height:520px) {
    .filetree-modal {
        height: calc(100vh - 40px);
        max-height: calc(100vh - 40px);
        width: calc(100vw - 32px);
    }
}

@media (max-width:480px) {
    .filetree-modal {
        width: calc(100vw - 24px);
    }
}

/* 专用 header / close 按钮样式 */
.filetree-modal .modal-header {
    padding: 10px 12px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.filetree-modal .modal-header>span {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-color);
}

/* 圆形样式保留给右侧关闭按钮（.modal-btn），但返回按钮改为 pill 风格 */
.filetree-modal .modal-header .modal-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--muted-color);
}

.filetree-modal .modal-header .modal-btn:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--fg-color);
}

/* 特化：把模态顶栏的返回按钮调整为更紧凑的 pill（与路径对齐） */
.filetree-modal .modal-header .back-btn {
    width: auto;
    min-width: 44px;
    height: 32px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--fg-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 根目录时返回按钮禁用样式（与 file-tree-header 一致） */
.filetree-modal .modal-header .back-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.filetree-modal .modal-path {
    margin-top: 0;
    /* 与返回按钮垂直居中对齐 */
    font-size: 13px;
    color: var(--muted-color);
    background: rgba(255, 255, 255, 0.02);
    padding: 4px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    height: 32px;
}

/* 隐藏 file-tree 内部重复的路径显示（路径统一在模态顶栏展示） */
.filetree-modal .file-tree-header .path {
    display: none;
}

.filetree-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 10px;
    /* 让内部内容与面板边缘有呼吸空间 */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filetree-modal-body .file-tree {
    /* 使用 flex 布局以便在受限高度内正确滚动 */
    flex: 1 1 auto;
    height: auto;
    min-height: 120px;
    max-height: none;
    /* 由模态固定高度和 flex 决定实际高度 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* 视觉上与主面板区分开来 */
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);

    /* 允许在 flex 容器内正确收缩/滚动 */
    min-width: 0;
}

.filetree-modal .modal-actions {
    padding: 10px 12px;
    justify-content: flex-end;
    margin-top: auto;
    /* 把操作区推到底部 */
    border-top: none;
    /* 移除分隔线 */
    background: transparent;
    /* 移除背景 */
    z-index: 6;
}

.filetree-modal .modal-actions .modal-btn {
    min-width: 96px;
    border-radius: 10px;
}


/* ------------------ 文件树（重构：单列列表） ------------------ */
.file-tree {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.00));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01);
    -webkit-overflow-scrolling: touch;
}

/* loading indicators keep behavior (slimmed) */
.file-tree.loading,
.file-tree li.loading {
    position: relative;
}

.file-tree.loading::after,
.file-tree li.loading::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 14px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: fpSpin 1s linear infinite;
    /* 使用已定义的 fpSpin 动画 */
    z-index: 10;
}

.file-tree ul {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: block;
}

.file-tree li {
    margin: 6px 0;
}

/* 每一行（单列） */
.file-tree li span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    background: transparent;
}

.file-tree li span::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    /* 保持大小与对齐，移除背景色 */
    margin-right: 6px;
    font-size: 16px;
    /* 恢复到原始大小以消除偏移感 */
    line-height: 36px;
    /* 与容器高度一致，确保 emoji 垂直居中 */
    vertical-align: middle;
    /* 保证行内元素居中对齐 */
    background: transparent;
}

.file-tree li span:hover {
    background: rgba(255, 255, 255, 0.02);
    /* 已移除上浮（transform）和阴影（box-shadow）效果，保持背景高亮 */
}

.file-tree .file-label {
    flex: 1;
    min-width: 0;
}

.file-tree .file-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-color);
    line-height: 1.2;
}

.file-tree .file-duration {
    margin-left: 0;
    display: block;
    color: var(--muted-color);
    font-size: 12px;
    white-space: nowrap;
}

.file-tree .no-files {
    padding: 28px;
    text-align: center;
    color: var(--muted-color);
}

.file-tree-empty {
    padding: 28px;
    text-align: center;
    color: var(--muted-color);
}

@media (max-width:520px) {
    .file-tree li span {
        padding: 12px;
        gap: 10px;
    }

    .file-tree li span::before {
        width: 32px;
        height: 32px;
    }
}


/* 进入目录模式时的头部（返回 + 当前路径） */
.file-tree-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--muted-color);

    /* 固定在可滚动区域顶部，滚动时始终可见（保持在模态标题下方） */
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.00));
    backdrop-filter: blur(4px);
}

/* 确保返回按钮在粘性头部内保持可点击且对齐 */
.file-tree-header .back-btn {
    flex: 0 0 auto;
}

.file-tree-header .path {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fg-color);
    font-weight: 700;
}

.file-tree-header .back-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--fg-color);
    cursor: pointer;
}

.file-tree-header .back-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.file-tree-header .back-btn:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.02);
}

/* 小字号、低对比度的时长显示 */
.file-tree .file-duration {
    margin-top: 4px;
    margin-left: 0;
    /* 对齐到文件名 */
    display: block;
    font-size: 12px;
    color: var(--muted-color);
    opacity: 0.85;
}



.file-tree li span:hover {
    background: rgba(79, 158, 255, 0.1);
}

.file-tree li span.dir::before,
.file-tree li span.file::before,
.file-tree li span.file.video-file::before {
    display: inline-block;
    width: 22px;
    text-align: center;
    margin-right: 6px;
    font-size: 16px;
    opacity: 0.95;
    float: none;
}

.file-tree li span.dir::before {
    content: "\1F4C1";
}

.file-tree li span.file::before {
    content: "\1F4C4";
}

.file-tree li span.file.video-file::before {
    content: "\1F3A5";
}



.file-tree span.file.selected,
.file-tree li.selected span {
    background: linear-gradient(90deg, rgba(79, 158, 255, 0.08), rgba(79, 158, 255, 0.04));
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
}

/* 保持时长在已选中项中为小字、弱对比（不随父级加粗） */
.file-tree span.file.selected .file-duration,
.file-tree li.selected span .file-duration {
    color: var(--muted-color);
    font-weight: 400;
    opacity: 0.85;
    font-size: 12px;
    display: block;
}

.file-tree .no-files {
    padding: 26px;
    text-align: center;
    color: var(--muted-color);
    font-size: 14px;
}



.file-tree span.file.selected:hover {
    background: rgba(79, 158, 255, 0.35);
}


.file-tree span.file.selected .file-name {
    color: var(--accent-color);
    font-weight: bold;
    text-shadow: 0 0 8px rgba(79, 158, 255, 0.4);
}


.file-tree span.dir.parent-selected {
    color: var(--accent-color);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(79, 158, 255, 0.3);
    background: rgba(79, 158, 255, 0.1);

    border-radius: 4px;
}


.file-tree span.file.selected::after {
    content: "正在编辑视频";
    position: absolute;
    right: 8px;
    bottom: 5px;

    font-size: 11px;
    color: #fff;
    background: var(--accent-color);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    line-height: 1.2;
}

/* ------------------ 新版片段列表 ------------------ */
.clip-list-scroll {
    max-height: 400px;
    overflow-y: auto;


    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(0, 0, 0, 0.2);
}

.clip-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.clip-list-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.clip-list-scroll::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 3px;
}

.action-btn {
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.action-btn:active {
    transform: scale(0.98);
}

/* ------------------ 合并进度条（mergeStatus） ------------------ */
.merge-status-card {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.merge-status-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.merge-status-title {
    font-weight: 800;
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.merge-status-percent {
    font-variant-numeric: tabular-nums;
    opacity: 0.95;
}

.merge-status-actions {
    display: flex;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.merge-status-user {
    opacity: 0.85;
    font-size: 12px;
}

.merge-status-cancel {
    padding: 6px 12px;
    font-size: 12px;
    background: rgba(255, 100, 100, 0.22);
    border: 1px solid rgba(255, 120, 120, 0.25);
}

.merge-status-cancel:hover {
    background: rgba(255, 100, 100, 0.30);
}

.merge-status-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

/* ------------------ 合并结果（mergeResult） ------------------ */
/* ------------------ 结果卡片 (Result) Refreshed ------------------ */
.merge-result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.merge-result-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.merge-result-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}



.merge-result-label {
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}



.merge-result-path {
    font-family: 'Consolas', monospace;
    font-size: 13px;
    color: #a5d6a7;
    /* Success green tint */
    word-break: break-all;
    line-height: 1.5;
    user-select: all;
    /* Easier selection */
}

/* Responsive actions layout: desktop — inline compact grid; mobile — stacked full-width */
.merge-result-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 8px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    width: auto;
    margin: 12px auto 0;
}

/* 按钮文字居中：水平 + 垂直居中，移动端保持居中并占满宽度 */
.merge-result-actions button,
#downloadClipBtn,
#copyClipLinkBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .merge-result-actions {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        justify-items: stretch;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
    }

    .merge-result-actions button,
    #downloadClipBtn,
    #copyClipLinkBtn {
        width: 100%;
    }
}



.merge-result-card.error .merge-result-path {
    color: #ff8080;
}

.merge-result-error {
    width: 100%;
    margin-top: 0;
    padding: 12px;
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 10px;
    color: #ffcccc;
    font-family: monospace;
    font-size: 12px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.merge-result-form {
    margin-top: 12px;
}

.merge-result-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 100, 100, 0.10);
    border: 1px solid rgba(255, 120, 120, 0.18);
    white-space: pre-wrap;
    word-break: break-word;
}

.merge-status-bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent-color);
    transition: width 0.25s ease;
}

.merge-status-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    opacity: 0.9;
    font-size: 12px;
    flex-wrap: wrap;
}

.merge-status-meta-left {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.merge-status-meta-right {
    white-space: nowrap;
    opacity: 0.85;
}

@media (max-width: 520px) {
    .merge-status-actions {
        width: 100%;
        justify-content: space-between;
    }

    .merge-status-bar {
        height: 9px;
    }
}

/* ------------------ 输出结果 ------------------ */
pre {
    white-space: pre-wrap;
    padding: 14px;
    overflow-x: auto;
}

/* ------------------ 响应式 ------------------ */
@media (max-width: 768px) {
    h1 {
        font-size: 26px;
    }

    .panel {
        padding: 16px;
    }

    #player {
        max-height: 45vh;
    }

    .file-tree {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 22px;
    }

    #player {
        max-height: 35vh;
    }

    input,
    button,
    select {
        font-size: 14px;
        padding: 8px;
    }
}


@media (hover: none) {
    .file-tree span.dir:hover {
        background-color: transparent;
    }
}

/* ------------------ loading 层 ------------------ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 28, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #ffffff;

    z-index: 9999;
    transition: opacity 420ms ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ------------------ 网站说明全屏弹窗（启动 2 秒后显示） ------------------ */
.site-intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 10000;
    opacity: 0; /* 初始透明，以便动画 */
}

/* 专门为说明弹窗遮罩层定义的进入/退出动画 */
@keyframes siteIntroOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes siteIntroOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.site-intro-overlay.show {
    display: flex;
    animation: siteIntroOverlayIn 400ms ease forwards;
}

.site-intro-overlay.hiding {
    /* keep display:flex until animation completes */
    display: flex;
    pointer-events: none;
    animation: siteIntroOverlayOut 400ms ease forwards;
}

/* visible 类用于触发 modal 的进入动画；与 show 分开便于强制重排。
   JS 会在 show 后的一个或两个 animation frames 中加入该类。 */
.site-intro-overlay.visible .site-intro-modal {
    opacity: 1;
    animation: siteIntroModalIn 400ms ease forwards;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(18, 22, 40, 0.75);
    /*稍微调低不透明度以展示毛玻璃*/
}

@keyframes siteIntroModalIn {
    /* 先淡入并略微放大，然后快速抖动模拟“弹动”效果 */
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.02);
    }
    80% {
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.site-intro-modal {
    width: min(860px, calc(100vw - 24px));
    max-height: min(82vh, 720px);
    background: rgba(18, 22, 40, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);

    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 400ms ease;
    transform: translateY(8px) scale(0.985);
}

.site-intro-header {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.site-intro-title {
    font-weight: 900;
    letter-spacing: 0.5px;
}

.site-intro-body {
    padding: 12px 14px;
    overflow: auto;
}

.site-intro-actions {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.site-intro-nomore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    opacity: 0.9;
}

.site-intro-nomore input {
    margin: 0;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        transition: none !important;
    }

    .loading-overlay {
        transition: none !important;
    }
}

/* ------------------ 视频控制栏优化（紧凑/更好响应） ------------------ */
.video-controls {
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.60);
    /* 提高不透明度以增强可读性 */
    padding: 8px 10px;
    border-radius: calc(var(--radius-sm) - 2px);
    width: 100%;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 维持控制区整体透明观感（仅缩略图保持不透明） */
#videoControlsContainer>.progress-row,
#videoControlsContainer>.buttons-row,
#videoControlsContainer>.clip-ctrl-bar,
#videoControlsContainer .timeline-container-title,
#videoControlsContainer .timeline-clip,
#videoControlsContainer .timeline-selection,
#videoControlsContainer .timeline-playhead,
#videoControlsContainer .timeline-time-cursor,
#videoControlsContainer .timeline-empty-hint,
#videoControlsContainer .timeline-box-select {
    opacity: 0.8;
}

#videoControlsContainer .timeline-container {
    background: rgba(0, 0, 0, 0.16);
    border-color: rgba(255, 255, 255, 0.048);
}

#videoControlsContainer .timeline-thumbs,
#videoControlsContainer .timeline-thumb {
    opacity: 1;
}

.progress-row {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    position: relative;
}

.custom-range {
    width: 100%;
    cursor: pointer;
    height: 6px;
    background: rgba(255, 255, 255, 0.20);
    /* 轨道透明度提高以便更易识别 */
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.custom-range:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 6px 18px rgba(79, 158, 255, 0.03);
}

.custom-range::-webkit-slider-thumb {
    height: 14px;
    width: 14px;
    margin-top: -4px;
    border: 2px solid var(--accent-color);
}

.player-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.20);
    /* 提高可见性 */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
    transition: height 120ms ease, box-shadow 120ms ease;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.player-progress:hover {
    height: 6px;
    background: rgba(255, 255, 255, 0.24);
    /* hover 时更明显 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02), 0 6px 18px rgba(79, 158, 255, 0.03);
}

.player-progress:focus {
    outline: none;
    box-shadow: 0 0 0 6px rgba(79, 158, 255, 0.06);
}

.player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 0;
}

.player-progress::-moz-range-thumb {
    visibility: hidden;
    width: 0;
    height: 0;
    border: none;
    background: transparent;
}

.player-progress::-ms-thumb {
    width: 0;
    height: 0;
    border: none;
    background: transparent;
}

.progress-tooltip {
    position: absolute;
    top: -32px;
    left: 0;
    transform: translateX(-50%) translateY(0);
    padding: 5px 7px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.progress-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

.progress-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.85);
}

@media (max-width: 480px) {
    .progress-tooltip {
        top: -30px;
        font-size: 11px;
        padding: 5px 7px;
    }
}

/* 视频控制行布局：左侧播放/时间 + 右侧倍速/选择视频/全屏 */
.buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    width: 100%;
}

.buttons-row .ctrl-group.left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}

.buttons-row .ctrl-group.right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.buttons-row.main-ctrls .ctrl-group.right {
    align-content: flex-start;
}

.buttons-row.main-ctrls .main-ctrl-pinned {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
    order: -1;
    margin-left: auto;
}

.buttons-row.main-ctrls .main-ctrl-pinned>button {
    flex: 0 0 auto;
}

.time-text {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buttons-row .ctrl-group.left,
.buttons-row .ctrl-group.right {
    white-space: normal;
}

/* 兼容窄屏：在较窄视口上已通过 flex-wrap 处理 */
@media (max-width: 520px) {
    .buttons-row .ctrl-group.right {
        justify-content: flex-end;
    }
}

/* videoControlsContainer 自适应压缩：宽度或高度不足时缩小内部元素 */
@media (max-width: 760px),
(max-height: 760px) {
    #videoControlsContainer.video-controls {
        padding: 6px 8px;
        margin-top: 6px;
    }

    #videoControlsContainer .buttons-row {
        gap: 6px 8px;
    }

    #videoControlsContainer .icon-btn {
        padding: 4px 8px;
        min-width: 32px;
        font-size: 12px;
    }

    #videoControlsContainer .icon-btn.small {
        padding: 3px 7px;
        min-width: 28px;
        font-size: 11px;
    }

    #videoControlsContainer .time-text {
        font-size: 12px;
        max-width: 170px;
    }

    #videoControlsContainer .clip-ctrl-bar {
        gap: 4px;
        margin-top: 4px;
    }

    #videoControlsContainer .clip-ctrl-mark {
        padding: 4px 5px;
        font-size: 10px;
    }

    #videoControlsContainer .clip-ctrl-mark-label {
        font-size: 9px;
    }

    #videoControlsContainer .clip-ctrl-mark-time {
        font-size: 11px;
    }

    #videoControlsContainer .clip-ctrl-action {
        padding: 4px 10px;
        font-size: 11px;
    }

    #videoControlsContainer .timeline-in-controls {
        margin: 4px 0 1px;
    }

    #videoControlsContainer .timeline-in-controls .timeline-container {
        padding: 6px 8px 5px;
    }

    #videoControlsContainer .timeline-in-controls .timeline-track {
        height: 40px;
    }

    #videoControlsContainer .timeline-in-controls .timeline-selection {
        top: 2px;
        height: 33px;
    }

    #videoControlsContainer .timeline-toolbar,
    #videoControlsContainer .timeline-toolbar-left,
    #videoControlsContainer .timeline-toolbar-center,
    #videoControlsContainer .timeline-toolbar-right {
        gap: 6px;
    }

    #videoControlsContainer .tl-zoom-btn {
        font-size: 10px;
        padding: 3px 8px;
    }

    #videoControlsContainer .tl-zoom-toggle {
        min-width: 58px;
    }

    #videoControlsContainer .tl-zoom-menu-item {
        font-size: 10px;
        padding: 4px 8px;
    }
}

@media (max-width: 560px),
(max-height: 620px) {
    #videoControlsContainer.video-controls {
        padding: 5px 6px;
    }

    #videoControlsContainer .buttons-row {
        gap: 5px 6px;
    }

    #videoControlsContainer .icon-btn {
        padding: 3px 7px;
        min-width: 28px;
        font-size: 11px;
    }

    #videoControlsContainer .time-text {
        font-size: 11px;
        max-width: 140px;
    }

    #videoControlsContainer .clip-ctrl-action {
        padding: 3px 8px;
        font-size: 10px;
    }

    #videoControlsContainer .timeline-in-controls .timeline-track {
        height: 36px;
    }

    #videoControlsContainer .timeline-in-controls .timeline-selection {
        height: 30px;
    }

    #videoControlsContainer .tl-zoom-btn {
        font-size: 10px;
        padding: 3px 7px;
    }

    #videoControlsContainer .tl-zoom-toggle {
        min-width: 52px;
    }
}

.icon-btn {
    padding: 5px 10px;
    min-width: 36px;
    text-align: center;
    background: rgba(255, 255, 255, 0.24);
    /* 按钮背景不透明度提高 */
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.icon-btn:hover {
    background: var(--btn-hover);
}

.icon-btn.small {
    padding: 4px 8px;
    min-width: 30px;
    font-size: 12px;
}

.icon-btn.small:hover {
    background: rgba(255, 255, 255, 0.15);
}


.icon-btn:focus {
    outline: none;
    box-shadow: none;
}

.icon-btn:focus-visible {
    outline: 2px solid rgba(79, 158, 255, 0.9);
    box-shadow: 0 0 0 4px rgba(79, 158, 255, 0.15);
}

.time-text {
    font-family: 'Consolas', monospace;
    font-size: 13px;
    color: var(--muted-color);
    letter-spacing: 0.5px;
}

.speed-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    min-width: 66px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    background-clip: padding-box;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.speed-select:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Hide mouse/touch focus but keep keyboard focus visible for accessibility */
.speed-select:focus,
.speed-select:active {
    outline: none;
    box-shadow: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* suppress focus visuals when the control was focused via pointer/touch */
.speed-select.suppress-focus,
.speed-select.suppress-focus:focus {
    outline: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

.speed-select:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* remove native dropdown arrow focus artifacts on some platforms */
.speed-select::-ms-expand {
    display: none;
}

.speed-select::-moz-focus-inner {
    border: 0;
}

.speed-select option {
    background: #222;
    color: #fff;
}

.native-speed-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}

#speedSelectGroup {
    position: relative;
}

#speedSelectGroup .tl-zoom-menu {
    left: auto;
    right: 0;
    z-index: 60;
}


#playerWrapper:fullscreen {
    background: #000;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    padding: 0;
}

#playerWrapper:fullscreen video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    margin: 0;
}

/* 全屏时解除 .video-stage 的 16:9 / max-height 限制，确保真正铺满屏幕 */
#playerWrapper:fullscreen .video-stage,
#playerWrapper::-webkit-full-screen .video-stage {
    aspect-ratio: auto !important;
    max-height: none !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
}

/* Hide focus outline for player container (prevents visible ring after shortcut/ programmatic focus) */
#playerWrapper:focus {
    outline: none;
    box-shadow: none;
}

#playerWrapper:fullscreen .video-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    background: rgba(20, 20, 30, 0.85);

    z-index: 2147483647;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s;
}


#playerWrapper:fullscreen:hover .video-controls {
    opacity: 0.4;
}


#playerWrapper:fullscreen .video-controls:hover {
    opacity: 1;
}


#playerWrapper:fullscreen.controls-force-dim .video-controls {
    opacity: 0.4 !important;
}

/* 在全屏时通过 JS 强制显示控制组件（用于触摸进度条等场景） */
#playerWrapper:fullscreen.controls-visible .video-controls {
    opacity: 1 !important;
}

#playerWrapper::-webkit-full-screen {
    background: #000;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#playerWrapper::-webkit-full-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


@media (max-width: 600px) {
    #playerWrapper:fullscreen .video-controls {
        width: 96%;
        bottom: 10px;
        padding: 8px;
    }
}



/* Moved from inline style */
:root {
    --accent-color: rgb(79, 158, 255);
    --btn-bg: rgba(79, 158, 255, 0.4);
    --btn-hover: rgba(79, 158, 255, 0.6);
}


.bili-tags-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    cursor: text;
}

.bili-tags-editor:focus-within {
    border-color: rgba(79, 158, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(79, 158, 255, 0.18);
}

.bili-tags-editor.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.bili-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    line-height: 1;
    user-select: none;
    background: rgba(79, 158, 255, 0.18);
    border: 1px solid rgba(79, 158, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
}

.bili-tag-remove {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    padding: 0;
    line-height: 18px;
}

.bili-tag-remove:hover {
    background: rgba(255, 255, 255, 0.26);
}

.bili-tags-input {
    flex: 1;
    min-width: 160px;
    border: 0;
    outline: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    padding: 6px 4px;
}

.bili-tags-hint {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 6px;
}


.toast {
    position: relative;
    pointer-events: auto;
    width: fit-content;
    max-width: min(380px, calc(100vw - 32px));
    box-sizing: border-box;
    border-radius: 10px;
    color: #fff;
    background: rgba(18, 22, 40, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    padding: 10px 12px;
    overflow: hidden;

    transform: translateY(0);
    opacity: 1;
    max-height: 400px;
    will-change: transform, opacity, max-height, padding;
    transition:
        max-height 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
        padding-top 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
        padding-bottom 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.toast.toast-enter {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(6px);
}

.toast.toast-hiding {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(6px);
}

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

.toast-title {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 2px;
}

.toast-msg {
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
}


.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* upload overlay should sit above history/preexisting modals */
.upload-modal-overlay {
    z-index: 10090;
}


#modalOverlay {
    z-index: 10080;
}



.modal-overlay.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.modal {
    width: min(520px, calc(100vw - 40px));
    border-radius: 14px;
    background: rgba(18, 22, 40, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    color: #fff;
    overflow: hidden;
    opacity: 0;
    transition: opacity 180ms ease;
}

.modal-overlay.show .modal {
    opacity: 1;
}

/* 进度弹窗专用：限制最大高度 + 内容滚动 */
#progressModalOverlay .modal {
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    /* start hidden to allow fade-in */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#progressModalOverlay.show .modal {
    opacity: 1;
}

/* exit animation state */
#progressModalOverlay.hiding .modal {
    opacity: 0;
}

#progressModalOverlay.hiding {
    display: flex; /* keep visible until animation ends */
    pointer-events: none;
}

#progressModalOverlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#progressModalBody {
    overflow-y: auto;
    /* 移除底部内边距，使滚动到底部时不出现额外空白；将主体设为伸缩区域 */
    padding: 12px 20px 0 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ------------------ 进度详情卡片 (MP) ------------------ */
/* ------------------ 进度详情卡片 (MP) Refreshed ------------------ */
.mp-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    /* 移除内边距，利用 modal-body 的内边距 */
    background: none;
    border: none;
    box-shadow: none;
}

.mp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0;
    /* 对齐到边缘 */
}

.mp-stage {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 0%, #ccc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mp-percent {
    font-size: 42px;
    font-weight: 900;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--accent-color);
    line-height: 0.9;
    letter-spacing: -1px;
    text-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.mp-bar-wrapper {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    min-width: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--accent-color), #6fc3ff);
    background-size: 200% 100%;
    animation: mpBarShimmer 2s linear infinite;
    box-shadow: 0 0 16px rgba(79, 158, 255, 0.4);
    transition: width 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes mpBarShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.mp-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
}

.mp-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.mp-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.mp-action {
    display: none;
    /* Hide old container if any */
}

/* 危险操作按钮（红色） */
.modal-btn-danger {
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.3);
    color: #ffcccc;
}

/* 禁止悬停时改变颜色，保持与默认状态一致（仅保留非颜色的 hover 反馈） */
.modal-btn-danger:hover {
    background: rgba(255, 80, 80, 0.1);
    border-color: rgba(255, 80, 80, 0.3);
}

.modal-btn-danger:active {
    background: rgba(255, 60, 60, 0.25);
}

/* 确认模式（绿色）- 覆盖危险红色 */
.modal-btn[data-mode="ack"] {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
    color: #81c784;
}

/* 悬停时不改变颜色（不使用 !important），保留阴影等非颜色反馈 */
.modal-btn[data-mode="ack"]:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
    color: #81c784;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}


.mp-cancel-btn:hover:not(:disabled) {
    background: rgba(255, 90, 90, 0.2);
}

.mp-cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
    color: rgba(255, 255, 255, 0.3);
}

/* 确认模式（绿色） */
.mp-cancel-btn[data-mode="ack"] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    border-color: rgba(76, 175, 80, 0.3);
    color: #81c784;
}

.mp-cancel-btn[data-mode="ack"]:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.2));
    border-color: rgba(76, 175, 80, 0.5);
    color: #a5d6a7;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}


.modal-header {
    padding: 14px 16px 8px 16px;
    font-weight: 800;
    font-size: 14px;
}

.modal-body {
    padding: 0 16px 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.95;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px 16px 16px;
}

.modal-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.modal-btn:hover {
    /* 禁止颜色变化：保持与 .modal-btn 默认背景一致 */
    background: rgba(255, 255, 255, 0.08);
}

.modal-btn-primary {
    background: var(--accent-color);
    border-color: transparent;
}

/* 主按钮：悬停时不改变颜色（不使用 !important） */
.modal-btn-primary:hover {
    background: var(--accent-color);
    border-color: transparent;
    filter: none;
}

.modal.restore-modal .modal-header {
    font-size: 16px;
    padding: 18px 20px 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal.restore-modal .modal-header .modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    font-size: 18px;
}

/* 使恢复弹窗可响应高度：固定 header/actions，列表区可滚动 */
.modal.restore-modal {
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100vw - 32px));
}

.modal.restore-modal .modal-body {
    padding: 0 20px 12px 20px;
    font-size: 14px;
    color: #e9eefc;
    overflow: auto;
}

/* 列表区单独可滚动，避免弹窗溢出视窗 */
.modal.restore-modal #restoreClipsList {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: min(56vh, calc(100vh - 220px));
    scrollbar-width: thin;
}

.modal.restore-modal .modal-actions {
    flex: 0 0 auto;
}

@media (max-width:480px) {
    .modal.restore-modal {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 64px);
    }

    .modal.restore-modal #restoreClipsList {
        max-height: 50vh;
    }
}


.upload-modal {
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.upload-modal .modal-body {
    overflow: auto;

    max-height: calc(100vh - 160px);
}

.upload-modal-body {
    white-space: normal;
}

.upload-modal-body input {
    width: 100%;
    margin-bottom: 8px;
}


.upload-modal-body #uploadModalTagsEditor {
    margin-bottom: 8px;
}

.upload-modal-body #uploadModalTags.bili-tags-input {
    width: auto;
    margin-bottom: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}


.cover-upload-wrapper {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cover-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.cover-upload-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}


.cover-selected-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    max-width: 100%;
}

.cover-filename {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
    opacity: 0.9;
    margin-right: 4px;
}

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

.cover-action-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--accent-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cover-action-btn:hover {
    background: rgba(79, 158, 255, 0.1);
    border-color: var(--accent-color);
}

.cover-action-btn.remove {
    color: #ff8888;
    border-color: rgba(255, 100, 100, 0.2);
    padding: 2px 6px;
    min-width: 24px;
}

.cover-action-btn.remove:hover {
    background: rgba(255, 50, 50, 0.15);
    border-color: #ff6666;
}

.upload-modal-result pre {
    white-space: pre-wrap;
    word-break: break-word;
}

.upload-progress {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    padding: 10px 12px;
}

.upload-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 8px;
}

.upload-progress-title {
    font-weight: 800;
}

.upload-progress-percent {
    font-variant-numeric: tabular-nums;
    opacity: 0.95;
}

.upload-progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.upload-progress-bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent-color);
    transition: width 0.25s ease;
}

.upload-progress-meta {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.9;
    min-height: 16px;
}

.upload-progress-rawline {
    margin-top: 6px;
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.95;
    min-height: 16px;
}

.upload-progress-logs {
    margin-top: 10px;
    max-height: min(38vh, 320px);
    overflow: auto;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1.35;
    white-space: pre-wrap;
}


.history-modal {
    width: min(920px, calc(100vw - 40px));
}

.history-modal-body {
    white-space: normal;
    max-height: min(70vh, 560px);
    overflow: auto;
}


.merge-preview-overlay {
    z-index: 10055;
    overflow: auto;
    /* align-items: flex-start; Removed to vertically center the modal */
}

.merge-preview-modal {
    width: min(1200px, 94vw);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.merge-preview-body {
    white-space: normal;
    overflow: auto;
}

.merge-preview-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 12px;
    align-items: start;
    min-height: 0;
}

.merge-preview-left {
    min-width: 0;
    min-height: 0;
}

.merge-preview-now {
    font-size: 12px;
    opacity: 0.9;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-bottom: 8px;
}

.merge-preview-video {
    width: 100%;
    max-height: min(64vh, 680px);
    border-radius: 12px;
}

.merge-preview-controls {
    margin-top: 10px;
}

.merge-preview-right {
    min-width: 0;
    min-height: 0;
}

.merge-preview-queue {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    padding: 10px;
    max-height: min(64vh, 680px);
    overflow: auto;
}

.merge-preview-queue-title {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.9;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.merge-preview-queue-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    margin-bottom: 8px;
}

.merge-preview-queue-item:hover {
    background: rgba(79, 158, 255, 0.16);
    border-color: rgba(79, 158, 255, 0.25);
}

.merge-preview-queue-item.active {
    background: rgba(79, 158, 255, 0.25);
    border-color: rgba(79, 158, 255, 0.45);
}

.merge-preview-queue-item .row1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.merge-preview-queue-item .name {
    font-size: 12px;
    font-weight: 800;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.merge-preview-queue-item .row2 {
    margin-top: 4px;
    font-family: Consolas, monospace;
    font-size: 12px;
    opacity: 0.8;
    white-space: pre-wrap;
    line-height: 1.35;
}

@media (max-width: 820px) {
    .merge-preview-grid {
        grid-template-columns: 1fr;
    }

    .merge-preview-queue {
        max-height: min(28vh, 260px);
    }

    .merge-preview-video {
        max-height: min(48vh, 420px);
    }
}


.merge-submit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "user name"
        "source source"
        "cut cut"
        /* 新增 */
        "action action";
    gap: 16px 24px;
    align-items: stretch;
}

.merge-submit-field {
    display: block;
    margin-bottom: 0;
}

.merge-submit-field label {
    display: block;
    margin-bottom: 6px;
}

.merge-submit-field:nth-child(1) {
    grid-area: user;
}

.merge-submit-field:nth-child(2) {
    grid-area: name;
}

.merge-submit-field:nth-child(3) {
    grid-area: source;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.merge-submit-field:nth-child(4) {
    grid-area: cut;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.merge-submit-field input {
    width: 100%;
}

.merge-submit-actions {
    grid-area: action;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}


#mergeStatus {
    margin-top: 12px;
}

#mergeStatus:empty {
    margin-top: 0;
}

@media (max-width: 720px) {
    .merge-submit-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "user"
            "name"
            "source"
            "cut"
            "action";
        gap: 16px;
    }
}


.select-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.select-preview-left {
    min-width: 0;
}

.select-preview-right {
    min-width: 0;
}

.select-preview-panel .file-tree {
    /* 固定高度（桌面）：420px；超出时内部滚动 */
    height: 420px;
    max-height: 420px;
    min-height: 420px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 响应式：小屏幕使用视口高度比例，避免遮挡整个页面 */
@media (max-width: 720px) {
    .select-preview-panel .file-tree {
        height: 48vh;
        max-height: 48vh;
    }
}

#videoContainer,
.select-preview-panel #videoContainer {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* hide redundant video-header so it doesn't add spacing */
#videoContainer .video-header {
    display: none;
}

.preview-panel {
    margin-top: 18px;

    /* 由固定填充改为按内容收缩，同时保留最小高度以兼容不同屏幕 */
    height: auto;
    min-height: 60dvh;
    max-height: 100dvh;

    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    /* 防止子元素被拉伸造成底部空白 */
    overflow: visible;
}

/* 通用面板标题（统一各功能区样式） */
.panel-title,
.preview-panel h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-color);
    white-space: nowrap;
    /* 保持单行 */
    overflow: hidden;
    /* 超出省略 */
    text-overflow: ellipsis;
    text-align: left;
    /* 默认左对齐 */
    width: 100%;
    align-self: flex-start;
    /* 当父为 flex 时生效，保证左对齐 */
}

/* 预览面板标题（重构为网格：标题行 + 次行） */
.preview-panel .panel-title {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--preview-gap-regular) 12px;
    /* row-gap / column-gap */
    align-items: center;
    margin-bottom: var(--preview-gap-regular);
}

.preview-panel .panel-title .panel-title-text {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 0;
    font-weight: 800;
    font-size: 16px;
    color: var(--accent-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-panel .panel-title .select-video-btn.compact {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: none;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--fg-color);
}

.preview-panel .panel-title .preview-empty-hint {
    display: none;
}

.preview-panel .panel-title .select-video-btn.compact {
    display: none;
    margin-left: auto;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--fg-color);
}

/* 默认隐藏：确保即使该节点意外留在 #videoContainer 中，非紧凑视图下也不会显示 */
.preview-panel #videoContainer>.select-video-btn.compact {
    display: none;
}

/* 文件名 / 小提示：单独一行，可换行（在宽度受限时自动换行） */
.preview-panel .panel-title .panel-title-filename {
    grid-column: 1 / -1;
    /* 占满整行 */
    display: block;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--muted-color);
    opacity: 0.95;
    max-width: 100%;
    white-space: normal;
    /* 允许换行 */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
}

/* 默认隐藏小屏提示，只有在紧凑模式下显示 */
.preview-panel .panel-title .preview-empty-hint {
    grid-column: 1 / -1;
    display: none;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-color);
    opacity: 0.95;
}

/* 兼容旧类名（若仍有使用） */
.preview-panel .preview-panel-title {
    display: block;
    margin: 0 0 10px;
}

/* 专用于 video-placeholder 内部的标题：左对齐并占满宽度（覆盖父容器的居中对齐） */
.preview-panel .preview-panel-title {
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--accent-color);
    text-align: left;
    align-self: flex-start;
    /* override centered parent */
    width: 100%;
}

.preview-panel #previewActionArea {
    flex: 0 0 auto;
}

.preview-panel #playerWrapper {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

.preview-panel .video-stage {
    aspect-ratio: 16 / 9;
    /* 固定 16:9：避免视频加载时高度跳动 */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: height 160ms ease, max-height 160ms ease;
    /* 平滑过渡，减小视觉突变 */
    max-height: 52vh;
    /* 缩小预览高度，减少下方空白 */
    /* 防止极端高的视频撑满视口 */
}

.preview-panel .video-controls {
    flex: 0 0 auto;
    margin-top: 6px;
    /* 更紧凑，减小视频与控件间距 */
    overflow: visible;
    position: relative;
}

/* 确保嵌入的 video 在预览面板内完整显示（覆盖 inline max-height） */
.preview-panel #player {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

#playerWrapper,
#playerWrapper,
.select-preview-panel #playerWrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    /* required for video-loading overlay */
}

.video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: transparent;
    /* 与其它面板一致，降低不透明度 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 响应式：宽 < 330px 或 高 < 530px 时，仅保留标题并提示"空间不足"
   注意：全屏播放时（body.fullscreen-active）跳过这些隐藏规则，确保视频可见 */
@media (max-width:329.98px),
(max-height: 529.98px) {
    /* ---- 以下隐藏/收缩规则仅在非全屏时生效 ---- */

    /* 隐藏预览区域中的所有直接子项（只保留标题"视频预览"） */
    body:not(.fullscreen-active) .preview-panel #videoContainer> :not(.panel-title) {
        display: none !important;
    }

    /* 额外覆盖常见预览子模块，确保全部隐藏 */
    body:not(.fullscreen-active) .preview-panel #playerWrapper,
    body:not(.fullscreen-active) .preview-panel #videoControlsContainer,
    body:not(.fullscreen-active) .preview-panel .video-stage,
    body:not(.fullscreen-active) .preview-panel #previewActionArea {
        display: none !important;
    }

    /* 在标题与按钮之间显示提示文本（仅小屏可见） */
    body:not(.fullscreen-active) .preview-panel .panel-title .preview-empty-hint {
        display: block;
    }

    /* 收缩面板高度，保持页面布局紧凑 */
    body:not(.fullscreen-active) .preview-panel {
        min-height: 0 !important;
        padding-bottom: 8px !important;
    }

    /* 小屏：把 panel-title 改成单列 grid（compact gap） */
    body:not(.fullscreen-active) .preview-panel .panel-title {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--preview-gap-compact);
        margin-bottom: var(--preview-gap-compact);
    }

    /* 在紧凑（小屏）模式中：
       - 隐藏标题内的 compact 按钮（我们会把同一个 DOM 节点移动到容器底部）
       - 当该按钮成为 #videoContainer 的直接子元素时，将其显示为位于预览下方的完整宽度按钮 */
    body:not(.fullscreen-active) .preview-panel .panel-title .select-video-btn.compact {
        display: none !important;
    }

    /* 仅当容器处于紧凑状态时，才把按钮显示为位于预览下方的完整宽度按钮。
       这样即使该节点意外留在 #videoContainer 中，也不会在非紧凑/大屏上显示。 */
    body:not(.fullscreen-active) .preview-panel #videoContainer.video-container-compact>.select-video-btn.compact {
        display: block !important;
        margin-top: var(--preview-gap-compact);
        width: 100%;
        padding: 8px 12px;
        box-sizing: border-box;
        align-self: center;
        justify-self: stretch;
    }

    body:not(.fullscreen-active) .preview-panel .panel-title .panel-title-text {
        white-space: normal;
    }
}

/* 将“预览”按钮居中显示在视频上 */
.video-stage .preview-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.video-stage .preview-btn:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* 视频加载中提示（居中显示） */
.video-loading-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    will-change: opacity, transform;
}

.video-loading-hint.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.video-loading-hint.hiding {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.98);
}

#player,
.select-preview-panel #player {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}


/* ------------------ Segmented Control ------------------ */
.source-mode-switch {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: 4px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.source-mode-option {
    flex: 1;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.source-mode-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mode-label {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-color);
    border-radius: var(--radius-sm);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.source-mode-option input:checked+.mode-label {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.source-mode-option:hover .mode-label {
    color: var(--fg-color);
}

.source-mode-option input:checked+.mode-label:hover {
    color: #fff;
}

/* ------------------ Source Selection ------------------ */
.source-selection-group {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.source-option {
    flex: 1;
    cursor: pointer;
    position: relative;
}

.source-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.source-content {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    height: 100%;
}

.source-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--fg-color);
}

.source-desc {
    font-size: 12px;
    color: var(--muted-color);
    line-height: 1.4;
}

/* ---------------- 移动端快捷键区域优化 ---------------- */
.shortcuts-grid {
    margin-top: 10px;
    display: grid;
    gap: 10px;
    align-items: stretch;
    grid-template-columns: 1fr 1fr 0.8fr 0.8fr;
    /* Desktop Default */
}

.shortcut-btn-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: auto;
    padding: 6px;
}

.shortcut-btn-group>span:first-child {
    font-size: 12px;
    font-weight: bold;
}

.shortcut-btn-group>span:last-child {
    font-size: 11px;
    font-family: monospace;
}

/* 移动端适配 */

@media (max-width: 600px) {
    .shortcuts-grid {
        /* 在小屏幕上稍微调整比例，给 Add/Play 更多空间，或者直接均分 */
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 6px;
    }

    /* 针对里面的 icon-btn */
    .shortcuts-grid .icon-btn {
        padding: 4px 2px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        /* 允许比默认 min-width 更小 */
    }

    /* 针对 Start/End 按钮内部结构 */
    .shortcuts-grid .icon-btn>span:first-child {
        font-size: 11px;
        margin-bottom: -2px;
        /* 紧凑一点 */
    }

    .shortcuts-grid .icon-btn>span:last-child {
        font-size: 9px;
        transform: scale(0.9);
        /* 进一步缩小时间显示 */
    }

}


/* Hover State */
.source-option:hover .source-content {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Checked State */
.source-option input[type="radio"]:checked+.source-content {
    background: rgba(79, 158, 255, 0.15);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.source-option input[type="radio"]:checked+.source-content .source-title {
    color: var(--accent-color);
}

/* ------------------ 动画效果 ------------------ */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.anim-fade-in {
    animation: fadeIn 500ms ease forwards;
}

/* 弹窗显示时的动画：单独的进入效果 */
/* 这里不再重复 overlay 的布局/滤镜，主动画在上方定义。
   modal 的弹出效果仍由 visible 类控制。 */
.site-intro-overlay.show .site-intro-modal {
    /* 仅与上方 visible 类共存时才触发动画；
       如果 show 本身被添加到已有 visible，但未对 modal 施加
       动画属性时，也能立即保持可见，从而避免闪烁。 */
    opacity: 1;
    animation: siteIntroModalIn 400ms ease forwards;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(18, 22, 40, 0.75);
    /*稍微调低不透明度以展示毛玻璃*/
}

/* 退出动画 */
.site-intro-overlay.hiding .site-intro-modal {
    opacity: 0;
}

.site-intro-overlay.hiding {
    display: flex;
    /* 保持显示直到动画结束 */
    pointer-events: none;
    animation: siteIntroOverlayOut 400ms ease forwards;
}



@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* 悬浮进度挂件 */
.floating-progress-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(30, 30, 40, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    user-select: none;
}

.floating-progress-widget:hover {
    transform: translateY(-2px);
    background: rgba(40, 40, 50, 0.95);
}

.floating-progress-widget:active {
    transform: translateY(0);
}

.fp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: fpSpin 1s linear infinite;
}

.fp-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

@keyframes fpSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 进度弹窗内的样式适配 */
#progressModalBody .merge-progress-bar-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    margin: 10px 0;
}

#progressModalBody .merge-progress-bar-fill {
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.3s ease;
}

/* 结果卡片样式 */
.merge-result-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.merge-result-header {
    margin-bottom: 16px;
}

.merge-result-title {
    font-size: 18px;
    font-weight: bold;
    color: #4CAF50;
    /* Green for success */
    margin-bottom: 4px;
}

.merge-result-sub {
    font-size: 13px;
    color: var(--muted-color);
}



.merge-result-label {
    font-size: 12px;
    color: var(--muted-color);
    margin-bottom: 4px;
}

.merge-result-path {
    font-family: monospace;
    font-size: 14px;
    word-break: break-all;
    color: var(--text-color);
}

.merge-result-error {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff9999;
    padding: 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    text-align: left;
    max-height: 200px;
    overflow-y: auto;
}

/* -------------------------------------------------------------------------- */
/*                               进度弹窗美化                                  */
/* -------------------------------------------------------------------------- */
.mp-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px 4px;
}

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

.mp-stage {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

.mp-percent {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent-color);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1;
}

.mp-bar-wrapper {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    margin: 8px 0 12px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.mp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    min-width: 6px;
    /* 确保极小进度也可见 */
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-color), #6fc3ff);
    box-shadow: 0 0 12px rgba(79, 158, 255, 0.25);
    transition: width 300ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 180ms ease;
    display: block;
    will-change: width, transform;
    opacity: 1;
    z-index: 1;
}

.mp-secondary-btn {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--fg-color);
    border-radius: 10px;
    margin-right: 8px;
    font-weight: 600;
}

.mp-action {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 480px) {
    .mp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mp-percent {
        font-size: 20px;
    }

    .mp-bar-wrapper {
        height: 6px;
    }

    .mp-action {
        flex-direction: column;
        gap: 8px;
    }
}

.mp-details {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.mp-label {
    color: var(--muted-color);
    flex-shrink: 0;
}

.mp-value {
    color: var(--text-color);
    text-align: right;
    font-weight: 500;
}


.mp-action {
    margin-top: 8px;
}

.mp-cancel-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 90, 90, 0.3);
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mp-cancel-btn:hover {
    background: rgba(255, 90, 90, 0.1);
    border-color: rgba(255, 90, 90, 0.5);
}

/* ================== 时间轴编辑器 ================== */

.timeline-section {
    margin-bottom: 16px;
}

.timeline-video-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

.timeline-wrap {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: crosshair;
    user-select: none;
}

/* 主轨道（放置片段色块） */
.timeline-track {
    position: relative;
    height: 48px;
    overflow: visible;
}

.timeline-thumbs {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.timeline-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 缩略图始终不透明 */
    opacity: 1;
    /* 去掉滤镜，避免看起来暗淡/半透明 */
    filter: none;
}

/* 片段色块 */
.timeline-clip {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    background: rgba(var(--tl-clip-rgb, 79, 158, 255), 0.5);
    border: 1.5px solid rgba(var(--tl-clip-rgb, 79, 158, 255), 0.85);
    box-shadow: 0 2px 8px rgba(var(--tl-clip-rgb, 79, 158, 255), 0.25);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 1px;
}

.timeline-clip:hover {
    background: rgba(var(--tl-clip-rgb, 79, 158, 255), 0.7);
    border-color: rgba(var(--tl-clip-rgb, 79, 158, 255), 1);
    transform: scaleY(1.08);
    z-index: 10;
}

.timeline-track.has-thumbs .timeline-clip {
    background: rgb(var(--tl-clip-rgb, 79, 158, 255));
    opacity: 1;
}

.timeline-track.has-thumbs .timeline-clip:hover {
    background: rgb(var(--tl-clip-rgb, 79, 158, 255));
    opacity: 1;
}

#videoControlsContainer .timeline-track.has-thumbs .timeline-clip,
#videoControlsContainer .timeline-track.has-thumbs .timeline-clip:hover {
    opacity: 1;
}

.timeline-clip.selected {
    /* 使用 inset 形式的阴影，在元素内部绘制边框，这样即便父级 overflow:hidden
       也不会剪掉；保持 z-index 保证覆盖顺序 */
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.timeline-box-select {
    position: absolute;
    border: 1px dashed rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 30;
}

/* 起终点选区（半透明绿色） */
.timeline-selection {
    position: absolute;
    top: 4px;
    height: 40px;
    background: rgba(100, 220, 120, 0.2);
    border: 1.5px solid rgba(100, 220, 120, 0.6);
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
}

/* 播放指示线 */
.timeline-playhead {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 8;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* 播放头箭头顶部 */
.timeline-playhead-arrow-top,
.timeline-playhead-arrow-bottom {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    z-index: 10;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
}

.timeline-playhead-arrow-top {
    top: 0;
    transform: translateX(-50%);
    border-bottom: 8px solid #fff;
}

.timeline-playhead-arrow-bottom {
    bottom: 0;
    transform: translateX(-50%) rotate(180deg);
    border-bottom: 8px solid #fff;
}

/* Tooltip */
.timeline-tooltip {
    position: fixed;
    background: rgba(10, 14, 28, 0.95);
    border: 1px solid rgba(79, 158, 255, 0.4);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-family: monospace;
    color: var(--fg-color);
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    display: none;
}

.timeline-tooltip.visible {
    display: block;
}

/* hover时间提示（跟随鼠标） */
.timeline-time-cursor {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 7;
}

/* 时间轴空状态提示 */
.timeline-empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    font-style: italic;
}

/* 时间轴整体容器（含标签+轨道） */
.timeline-container {
    margin-bottom: 20px;
    padding: 12px 14px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.timeline-container-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--muted-color);
    font-weight: 600;
}

.timeline-container-title span {
    color: var(--muted-color);
}

.timeline-meta {
    display: flex;
    align-items: center;
    min-width: 0;
}

.timeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    min-width: 0;
    width: 100%;
}

.timeline-toolbar-left,
.timeline-toolbar-center,
.timeline-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.timeline-toolbar-left>*,
.timeline-toolbar-center>*,
.timeline-toolbar-right>* {
    flex-shrink: 0;
}

.timeline-toolbar-left {
    justify-content: flex-start;
}

.timeline-toolbar-center {
    justify-content: center;
    flex: 1 1 auto;
    min-width: 200px;
    overflow: visible;
    position: relative;
}

.timeline-toolbar-right {
    justify-content: flex-end;
}

.timeline-in-controls .timeline-toolbar-right {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.timeline-in-controls .timeline-toolbar-right>* {
    flex: 0 0 auto;
}

.timeline-toolbar-left>.tl-zoom-group {
    background: transparent;
    border: none;
    padding: 0;
}

.timeline-toolbar-center .tl-compact-actions {
    display: none;
}

.timeline-toolbar-center.compact-actions-on .tl-follow-btn,
.timeline-toolbar-center.compact-actions-on .tl-thumb-btn {
    display: none;
}

.timeline-toolbar-center.compact-actions-on .tl-compact-actions {
    display: flex;
}

/* ======= 时间轴嵌入视频控制区 ======= */

.timeline-in-controls {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 2px;
}

.timeline-in-controls .timeline-container {
    margin-bottom: 0;
    padding: 8px 10px 6px;
    border-radius: 8px;
    position: relative;
    overflow: visible;
}

.timeline-in-controls .timeline-container-title {
    margin-bottom: 6px;
    font-size: 11px;
    gap: 8px;
    flex-wrap: nowrap;
    position: relative;
    z-index: 50;
}

.timeline-in-controls .timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.timeline-in-controls .timeline-toolbar-left {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.timeline-in-controls .timeline-toolbar-center {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: visible;
}

.timeline-in-controls .timeline-toolbar-right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-left: auto;
}

.timeline-in-controls .timeline-toolbar-right>* {
    flex: 0 0 auto;
}

.timeline-in-controls .timeline-toolbar.two-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
}

.timeline-in-controls .timeline-toolbar.two-row .timeline-toolbar-left {
    grid-column: 1;
    grid-row: 1;
}

.timeline-in-controls .timeline-toolbar.two-row .timeline-toolbar-right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
}

.timeline-in-controls .timeline-toolbar.two-row .timeline-toolbar-center {
    grid-column: 1 / span 2;
    grid-row: 2;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
}

.timeline-in-controls .timeline-toolbar.two-row .timeline-toolbar-center::-webkit-scrollbar {
    display: none;
}

.timeline-in-controls .timeline-track {
    height: 44px;
}

.timeline-in-controls .timeline-clip {
    top: 0;
    height: 100%;
}

.timeline-in-controls .timeline-selection {
    top: 3px;
    height: 36px;
}

/* ---- Q / W 拖拽手柄 ---- */
.timeline-handle {
    position: absolute;
    top: 0;
    width: 14px;
    height: 100%;
    z-index: 9;
    cursor: ew-resize;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: all;
}

.timeline-handle-line {
    width: 2px;
    height: 100%;
    pointer-events: none;
    border-radius: 1px;
}

.timeline-handle-start .timeline-handle-line {
    background: rgba(80, 220, 100, 0.9);
    box-shadow: 0 0 5px rgba(80, 220, 100, 0.5);
}

.timeline-handle-end .timeline-handle-line {
    background: rgba(255, 180, 50, 0.9);
    box-shadow: 0 0 5px rgba(255, 180, 50, 0.5);
}

.timeline-handle-cap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.timeline-handle-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.timeline-handle-start .timeline-handle-arrow {
    border-top: 8px solid rgba(80, 220, 100, 0.95);
}

.timeline-handle-end .timeline-handle-arrow {
    border-top: 8px solid rgba(255, 180, 50, 0.95);
}

.timeline-handle-key {
    font-size: 9px;
    font-weight: 800;
    font-family: monospace;
    margin-top: 1px;
    line-height: 1;
}

.timeline-handle-start .timeline-handle-key {
    color: rgba(80, 220, 100, 0.95);
}

.timeline-handle-end .timeline-handle-key {
    color: rgba(255, 180, 50, 0.95);
}

.timeline-handle.dragging .timeline-handle-line {
    width: 3px;
}

.timeline-handle.dragging {
    opacity: 0.95;
}

/* ---- 裁切控制行 ---- */
.clip-ctrl-bar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.clip-ctrl-mark {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 6px;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.2;
}

.clip-ctrl-mark:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.clip-ctrl-mark-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-color);
    white-space: nowrap;
}

.clip-ctrl-mark-time {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
}

.clip-ctrl-action {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    white-space: nowrap;
}

.clip-ctrl-add {
    background: rgba(79, 158, 255, 0.2);
    border-color: rgba(79, 158, 255, 0.4);
    color: rgba(79, 158, 255, 1);
}

.clip-ctrl-add:hover {
    background: rgba(79, 158, 255, 0.35);
    border-color: rgba(79, 158, 255, 0.6);
}

/* ---- 时间轴片段 hover 删除按钮 ---- */
.timeline-clip-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    border-radius: 50%;
    background: rgba(220, 60, 60, 0.85);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 12;
    pointer-events: all;
    user-select: none;
}

.timeline-clip:hover .timeline-clip-del {
    opacity: 1;
}

.timeline-clip-del:hover {
    background: rgba(240, 30, 30, 1);
    transform: scale(1.15);
}

/* ---- 缩放挡位按钮组 ---- */
.tl-zoom-group {
    display: flex;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 2px;
}

.tl-zoom-group.tl-zoom-collapsed {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 60;
}

.tl-zoom-toggle {
    min-width: 66px;
}

.tl-zoom-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: none;
    flex-direction: column;
    min-width: 74px;
    padding: 2px;
    border-radius: 6px;
    background: rgba(10, 14, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    z-index: 120;
}

.tl-zoom-group.tl-zoom-collapsed.open .tl-zoom-menu {
    display: flex;
}

.tl-zoom-menu-item {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.tl-zoom-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tl-zoom-menu-item.active {
    background: var(--accent-color);
    color: #fff;
}

.tl-zoom-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.tl-zoom-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.tl-zoom-btn.active {
    color: #fff;
    background: var(--accent-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tl-zoom-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---- 自定义时间轴滚动条 ---- */
.tl-scrollbar {
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    margin: 4px 12px 0 12px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.tl-scrollbar-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    cursor: grab;
    transition: background 0.2s;
}

.tl-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.tl-scrollbar-thumb:active {
    cursor: grabbing;
    background: var(--accent-color);
}

/* ---- 时间轴 inner（缩放后的可滚动内容区）---- */
.timeline-inner {
    position: relative;
    /* width 由 JS 动态设置 */
}

/* ========== 移动端 / 窄屏响应式优化 ========== */

/* ---- 裁切控制行：≤360px 进一步紧凑 ---- */
@media (max-width: 360px) {
    .clip-ctrl-bar {
        gap: 3px;
    }

    .clip-ctrl-mark {
        gap: 1px;
    }
}

/* ---- 工具栏进一步紧凑 ---- */
@media (max-width: 400px) {
    .timeline-toolbar {
        gap: 3px 6px;
    }

    .timeline-toolbar-center {
        gap: 3px;
    }

    .timeline-in-controls .timeline-container-title {
        margin-bottom: 4px;
        gap: 4px;
    }

    .timeline-in-controls .timeline-track {
        height: 32px;
    }

    .timeline-in-controls .timeline-selection {
        height: 26px;
    }
}

/* ---- 主控制行：≤400px 缩减时间显示 ---- */
@media (max-width: 400px) {
    #videoControlsContainer .time-text {
        max-width: 110px;
    }
}

/* ---- 主控制行：≤360px ---- */
@media (max-width: 360px) {
    #videoControlsContainer .time-text {
        max-width: 90px;
    }
}

/* ========== 被显式要求的预览区高度适配修复 ========== */
.preview-panel,
.video-placeholder-container,
#playerWrapper,
#videoContainer {
    height: auto;
    min-height: fit-content;
    max-height: none;
    overflow: visible;
}

#playerWrapper {
    display: flex;
    flex-direction: column;
}

/* timeDisplay 保持完整显示，不做省略截断 */
#videoControlsContainer .buttons-row.main-ctrls #timeDisplay.time-text,
#videoControlsContainer .timeline-toolbar-left #timeDisplay.time-text {
    max-width: none !important;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-stats-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: calc(100% - 24px);
    max-width: 860px;
    margin: 0 auto 18px;
    padding: 0 12px 0;
    font-size: 13px;
    color: var(--muted-color);
}

.site-stats-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--clip-bg);
    border: 1px solid var(--border-color);
    line-height: 1.2;
}

.site-stats-footer strong {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
}

@media (max-width: 560px) {
    .site-stats-footer {
        width: calc(100% - 16px);
        margin-bottom: 14px;
        padding: 0 10px 0;
        gap: 8px;
    }

    .site-stats-footer span {
        width: auto;
        justify-content: center;
    }
}