/* ========================================
   智能混剪 Web 版 · 新设计（对标参考图）
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-top: #101115;
    --bg-primary: #1a1b1f;
    --bg-secondary: #212228;
    --bg-tertiary: #2b2d34;
    --bg-hover: #33353d;
    --bg-selected: #2e3a4e;
    --border-color: #35363e;
    --border-light: #45464f;
    --text-primary: #e6e7ea;
    --text-secondary: #a0a1a7;
    --text-tertiary: #6d6e75;
    --accent: #0fc3a0;
    --accent-dim: rgba(15,195,160,0.35);
    --accent-bg: rgba(15,195,160,0.10);
    --warn: #ff5a4d;
    --warn-dim: rgba(255,90,77,0.15);
    --radius: 6px;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    font-size: 13px;
    user-select: none;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; outline: none; }

/* ============ 顶栏 ============ */
.top-bar {
    height: 52px;
    background: var(--bg-top);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 16px;
    z-index: 10;
    position: relative;
}
.top-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 280px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-icon { font-size: 22px; }
.brand-title { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }
.link-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    border-radius: 4px;
    transition: all 0.15s;
}
.link-btn:hover { color: var(--text-primary); border-color: var(--border-light); }

.top-center {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.task-name { font-size: 14px; font-weight: 600; }
.edit-icon { font-size: 14px; cursor: pointer; color: var(--text-tertiary); }
.edit-icon:hover { color: var(--text-secondary); }

.top-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.top-tips {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.top-tip-text { color: var(--accent); }
.top-links { display: flex; gap: 14px; }
.top-link {
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s;
}
.top-link:hover { color: var(--text-primary); }
.quota-chip {
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.quota-chip strong { color: var(--accent); font-weight: 600; }
.btn-expand {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.btn-expand:hover { background: #0dab8c; }
.avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

/* ============ 主布局 ============ */
.main-layout {
    width: 100%;
    height: calc(100vh - 52px);
    display: flex;
    background: var(--bg-primary);
    overflow: hidden;
}

/* ============ 左侧导航 ============ */
.sidebar {
    width: 84px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    padding: 10px 0;
    overflow-y: auto;
}
.side-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 10px;
}
.side-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 11px;
    transition: all 0.15s;
    position: relative;
}
.side-nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}
.side-nav-item.active {
    color: var(--accent);
    background: var(--accent-bg);
    border-color: var(--accent-dim);
}
.chip-new {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ff4d4f;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1.2;
}

/* ============ 中间左侧：镜头编排 + 素材池 ============ */
.left-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

/* ==== 镜头编排区 ==== */
.shots-area {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.shots-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.shots-estimate {
    font-size: 13px;
    color: var(--text-secondary);
}
.shots-estimate strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}
.shots-toolbar {
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sort-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.15s;
}
.sort-toggle:hover { color: var(--text-primary); }
.btn-add-shot {
    background: var(--bg-top);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 22px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
}
.btn-add-shot:hover { background: var(--bg-tertiary); border-color: var(--accent-dim); color: var(--accent); }

.shots-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shot-row {
    display: flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.15s;
    cursor: pointer;
    padding: 10px 14px 10px 10px;
    gap: 14px;
}
.shot-row:hover {
    border-color: var(--border-light);
}
.shot-row.active {
    border: 2px solid var(--accent);
    background: var(--bg-secondary);
    padding: 9px 13px 9px 9px;
}

.shot-left { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.shot-mat-name {
    background: var(--bg-top);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
}
.shot-thumb {
    width: 152px;
    height: 92px;
    border-radius: 7px;
    background: var(--bg-top);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.shot-num {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}
.shot-thumb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 12px;
}
.shot-thumb.has-pic {
    padding: 0;
    background: var(--bg-top);
}
.shot-add-mat {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shot-add-preview {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #4a6278 0%, #2c3e52 50%, #1a2332 100%);
}
.shot-add-preview::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 75%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 100%), linear-gradient(180deg, #6b7a8f 0%, #3a4a5f 50%, #2a3545 100%);
    clip-path: polygon(30% 15%, 70% 15%, 75% 35%, 70% 45%, 70% 100%, 30% 100%, 30% 45%, 25% 35%);
}
.shot-add-btn {
    position: relative;
    z-index: 2;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.shot-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding-top: 2px; }
.shot-line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    gap: 10px;
    flex-wrap: wrap;
}
.shot-voice {
    color: var(--text-secondary);
    font-weight: 500;
}
.shot-warn {
    color: var(--warn);
    font-size: 12px;
    font-weight: 500;
}
.warn-dot {
    display: inline-block;
    margin-left: 2px;
    color: var(--warn);
}

.shot-line2 {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
}
.shot-duration {
    display: flex;
    align-items: center;
    gap: 5px;
}
.shot-dur-label { color: var(--text-secondary); }
.shot-dur-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}
.shot-action-link {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}
.shot-action-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.shot-orig-audio {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}
/* switch */
.switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.switch input { display: none; }
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #55575f;
    border-radius: 18px;
    transition: 0.2s;
}
.slider::before {
    position: absolute;
    content: "";
    width: 14px; height: 14px;
    left: 2px; top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }

.shot-more {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.15s;
}
.shot-more:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ==== 镜头素材池 ==== */
.material-pool {
    height: 220px;
    flex-shrink: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}
.pool-header {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.pool-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pool-title strong { color: var(--text-primary); font-size: 13px; }
.pool-count strong { color: var(--accent); font-weight: 600; }
.pool-sep { color: var(--text-tertiary); margin-left: 4px; }
.pool-duration { color: var(--text-primary); font-weight: 500; }

.pool-actions { display: flex; gap: 8px; }
.btn-batch, .btn-add-mat, .btn-local {
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.btn-batch {
    background: transparent;
    color: var(--accent);
    border: 1px solid transparent;
}
.btn-batch:hover { background: var(--accent-bg); border-color: var(--accent-dim); }
.btn-add-mat, .btn-local {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-add-mat:hover, .btn-local:hover { border-color: var(--accent-dim); color: var(--accent); }

.pool-grid {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pool-card {
    flex-shrink: 0;
    width: 130px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
}
.pool-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.pool-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.pool-thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--bg-top);
    position: relative;
    background-size: cover;
    background-position: center;
}
.pool-thumb .video-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 20px;
    opacity: 0.6;
}
.pool-dur {
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
}

/* ============ 右侧预览区 ============ */
.preview-area-2 {
    width: 430px;
    background: var(--bg-primary);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 18px;
    gap: 12px;
}
.preview-top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pv-estimate {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    flex: 1;
}
.pv-count-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pv-count-ctrl {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.pv-count-ctrl input {
    width: 42px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    padding: 5px 0;
    text-align: center;
    font-size: 12px;
}
.pv-count-arrows {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
}
.pv-count-arrows button {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    padding: 1px 6px;
    font-size: 8px;
    line-height: 1;
}
.pv-count-arrows button:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.pv-count-arrows button:first-child { border-bottom: 1px solid var(--border-color); }

.btn-save {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 7px 16px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
}
.btn-save:hover { background: var(--bg-hover); border-color: var(--border-light); }
.btn-preview {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.btn-preview:hover { background: #0dab8c; }

.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    flex-shrink: 0;
}
.pt-size select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}
.pt-voice, .pt-music {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.pt-voice:hover, .pt-music:hover { border-color: var(--border-light); }
.pt-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--warn);
    color: #fff;
    font-size: 9px;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    padding: 0 3px;
    border-radius: 8px;
    font-weight: 600;
}
.pt-save-tpl {
    margin-left: auto;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.pt-save-tpl:hover { border-color: var(--warn-dim); color: var(--warn); }
.chip-new-small {
    background: var(--warn);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1.2;
}

.preview-stage-wrap {
    flex-shrink: 0;
    min-height: 0;
    max-height: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.preview-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    height: 100%;
}
.preview-canvas {
    height: 100%;
    aspect-ratio: 9 / 16;
    max-height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #000;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transition: aspect-ratio .25s ease;
}
.preview-canvas.ratio-9-16  { aspect-ratio: 9 / 16;  height: 100%; width: auto; }
.preview-canvas.ratio-16-9  { aspect-ratio: 16 / 9;  height: auto; width: 100%; max-height: 85vh; }
.preview-canvas.ratio-1-1   { aspect-ratio: 1 / 1;   height: auto; width: 80%; max-height: 85vh; }
.preview-video { width: 100%; height: 100%; position: relative; }
.pv-sample-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f2f2f5 0%, #ffffff 30%, #eaeaf0 100%);
}
.pv-sample-overlay {
    position: absolute;
    inset: 0;
}
.pv-sample-man {
    position: absolute;
    left: 38%;
    top: 15%;
    width: 30%;
    height: 75%;
    background: linear-gradient(180deg, #1b1e24 0%, #2a2e36 50%, #111319 100%),
                linear-gradient(180deg, #e6d5b8 0%, #d8c1a0 100%);
    clip-path: polygon(30% 0%, 70% 0%, 75% 15%, 65% 20%, 80% 45%, 70% 60%, 68% 100%, 32% 100%, 30% 60%, 20% 45%, 35% 20%, 25% 15%);
    background-blend-mode: multiply;
}
.pv-sample-man::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 20%;
    background: linear-gradient(180deg, #000 0%, #111 100%);
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}
.pv-subtitle {
    position: absolute;
    bottom: 28%;
    left: 8%;
    right: 8%;
    text-align: center;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    padding: 4px 6px;
    line-height: 1.4;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
}

.preview-side-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
}
.ps-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.ps-btn:first-child { height: 86px; }
.ps-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.ps-vertical-text {
    writing-mode: vertical-rl;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ------ 预览区全屏 ------ */
.preview-stage-wrap.is-fullscreen {
    background: #000;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.preview-stage-wrap.is-fullscreen .preview-stage {
    max-width: min(100vw, 100vh * 9 / 16);
    max-height: min(100vh, 100vw * 16 / 9);
    width: auto !important;
    height: 100% !important;
    box-shadow: none;
    border-radius: 0;
    margin: auto;
}
.preview-stage-wrap.is-fullscreen .preview-canvas {
    background-size: contain !important;
}
.preview-stage-wrap.is-fullscreen .preview-side-btns {
    position: fixed;
    top: 16px;
    right: 16px;
    flex-direction: row;
    z-index: 9999;
    gap: 8px;
    background: rgba(0,0,0,.55);
    padding: 6px;
    border-radius: 10px;
    backdrop-filter: blur(8px);
}
.preview-stage-wrap.is-fullscreen .ps-btn:first-child { height: 28px; }
.preview-stage-wrap.is-fullscreen .ps-btn {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
.preview-stage-wrap.is-fullscreen .ps-btn:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.preview-stage-wrap.is-fullscreen .ps-vertical-text {
    writing-mode: horizontal-tb;
    letter-spacing: 1px;
    font-size: 11px;
}

/* ------ 抖音预览模拟 ------ */
.dy-preview-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
}
.dy-preview-overlay.hidden { display: none; }
.dy-preview-phone {
    width: min(420px, 92vw);
    aspect-ratio: 9 / 19.5;
    max-height: 96vh;
    background: #111;
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 12px #0a0a0a, 0 0 0 14px #1a1a1a;
    display: flex; flex-direction: column;
    animation: dyPhoneShow .25s ease;
}
@keyframes dyPhoneShow {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.dy-preview-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    gap: 28px; padding: 16px 40px 8px;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
    color: #fff; font-size: 15px;
}
.dy-preview-tab { opacity: .7; }
.dy-preview-tab.dy-on { opacity: 1; font-weight: 700; position: relative; }
.dy-preview-tab.dy-on::after {
    content:''; position:absolute; bottom:-4px; left:20%; right:20%;
    height:3px; border-radius:2px; background:#fff;
}
.dy-preview-close {
    position: absolute; top: 12px; right: 12px; cursor: pointer;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.dy-preview-close:hover { background: rgba(255,255,255,.22); }
.dy-preview-body {
    position: relative; flex: 1; display: flex; align-items: stretch;
}
.dy-preview-stage {
    position: absolute; inset: 0;
    overflow: hidden; background: #000;
    display: flex; align-items: center; justify-content: center;
}
.dy-preview-stage .preview-canvas {
    transform: scale(.92);  /* 抖音手机内实际展示的缩放 */
    border-radius: 0 !important;
}
.dy-preview-side {
    position: absolute; right: 10px; bottom: 90px; z-index: 5;
    display: flex; flex-direction: column; gap: 22px;
    color: #fff; font-size: 11px;
}
.dy-side-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dy-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg,#ffb75e,#ed8f03);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    border: 1.5px solid rgba(255,255,255,.3);
}
.dy-plus {
    width: 20px; height: 20px; border-radius: 50%;
    background: #ff2b44; color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: -10px; border: 1.5px solid #111;
}
.dy-ic { font-size: 28px; }
.dy-num { font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dy-preview-bottom {
    position: absolute; left: 14px; right: 80px; bottom: 60px; z-index: 5;
    color: #fff; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.dy-author { font-weight: 700; font-size: 14px; }
.dy-caption { line-height: 1.5; }
.dy-music { font-size: 11.5px; opacity: .9; }
.dy-preview-navbar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-around;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0,0,0,.92);
    color: #fff; font-size: 11px;
    border-top: 0.5px solid rgba(255,255,255,.08);
}
.dy-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: .85; }
.dy-nav-add {
    width: 44px; height: 28px; border-radius: 9px;
    background: linear-gradient(90deg, #24f7ee 0%, #ff43f3 100%);
    color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.dy-preview-tip {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.55); font-size: 12px;
    white-space: nowrap;
}

.preview-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.pb-info {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}
.pb-info strong { color: var(--text-primary); font-size: 12px; }
.pb-actions { display: flex; gap: 6px; }
.btn-batch-sm, .btn-add-mat-sm, .btn-local-sm {
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.btn-batch-sm {
    background: transparent;
    color: var(--accent);
    border: none;
}
.btn-batch-sm:hover { background: var(--accent-bg); }
.btn-add-mat-sm, .btn-local-sm {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-add-mat-sm:hover, .btn-local-sm:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ============ 进度弹窗 ============ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    min-width: 400px;
    max-width: 580px;
}
.progress-modal h3 {
    font-size: 15px;
    margin-bottom: 14px;
    color: var(--text-primary);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.modal-header h3 { margin: 0; }
.modal-close {
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 16px;
    padding: 2px 6px;
    transition: color 0.15s;
}
.modal-close:hover { color: var(--text-primary); }
.progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.progress-text {
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 600;
}
.progress-message {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    min-height: 18px;
}
.progress-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.btn-secondary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-secondary:hover { background: #0dab8c; }

/* ============ 素材选择弹窗 ============ */
.mat-modal {
    width: 820px;
    max-width: 92vw;
    min-height: 540px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.mat-modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.mat-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.mat-modal-title strong {
    color: var(--accent);
}
.mat-modal-toolbar {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mat-cat-list {
    display: flex;
    gap: 6px;
}
.mat-cat-item {
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
}
.mat-cat-item:hover { color: var(--text-primary); border-color: var(--border-light); }
.mat-cat-item.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-dim);
    font-weight: 600;
}
.mat-search-input {
    flex: 1;
    max-width: 260px;
    margin-left: auto;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    transition: border-color 0.15s;
}
.mat-search-input:focus { border-color: var(--accent-dim); }

.mat-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    align-content: start;
    min-height: 260px;
}
.mat-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.mat-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
}
.mat-card.checked {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.mat-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
    transition: all 0.15s;
}
.mat-card.checked .mat-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.mat-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-top);
    position: relative;
    background-size: cover;
    background-position: center;
}
.mat-meta {
    padding: 6px 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.mat-name {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.mat-dur {
    font-size: 10px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.mat-type-tag {
    position: absolute;
    bottom: 32px;
    right: 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 1;
}

.mat-modal-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.mat-selected-info {
    font-size: 12px;
    color: var(--text-secondary);
}
.mat-selected-info strong {
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
}
.mat-modal-actions { display: flex; gap: 10px; }
.mat-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 7px 18px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.mat-btn-cancel:hover { background: var(--bg-hover); border-color: var(--border-light); }
.mat-btn-confirm {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 7px 20px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.mat-btn-confirm:hover { background: #0dab8c; }
.mat-btn-confirm:disabled {
    background: #4d4f57;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============ 增强版素材弹窗样式 ============ */
.mat-modal-lg {
    width: 1080px;
    max-width: 95vw;
    min-height: 620px;
}
.mat-modal-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}
.mat-upload-section {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow-y: auto;
    background: var(--bg-secondary);
}
.mat-library-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.mat-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mat-section-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
}

/* 拖拽区 */
.mat-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-tertiary);
}
.mat-drop-zone:hover,
.mat-drop-zone.is-dragging {
    border-color: var(--accent);
    background: rgba(15,195,160,0.08);
}
.mat-drop-icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.mat-drop-text {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 4px;
}
.mat-drop-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.mat-browse-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 7px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.mat-browse-btn:hover {
    background: #0dab8c;
}
.mat-drop-types {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.4;
}

/* 上传进度 */
.mat-upload-progress {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
}
.mat-upload-progress.hidden {
    display: none;
}
.mat-progress-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}
.mat-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s;
}
.mat-progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    text-align: center;
}

/* 上传历史 */
.mat-upload-history {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.mat-history-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.mat-history-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
}
.mat-history-empty {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 16px 0;
}
.mat-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 11px;
    transition: background 0.15s;
}
.mat-history-item:hover {
    background: var(--bg-hover);
}
.mat-history-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.mat-history-name {
    flex: 1;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.mat-history-meta {
    color: var(--text-tertiary);
    font-size: 10px;
    flex-shrink: 0;
}
.mat-history-add {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.mat-history-add:hover {
    background: var(--accent);
    color: #fff;
}

/* 素材卡片增强 */
.mat-local-badge {
    position: absolute;
    top: 8px;
    right: 22px;
    background: #f5a623;
    color: #fff;
    font-size: 8px;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 1;
    font-weight: 600;
}
.mat-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: rgba(255, 59, 48, 0.85);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    display: none;
    transition: all 0.2s;
    padding: 0;
    border: none;
}
.mat-card:hover .mat-delete-btn {
    display: block;
}
.mat-delete-btn:hover {
    background: #ff3b30;
    transform: scale(1.1);
}
.mat-thumb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.mat-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    z-index: 1;
}
.mat-audio-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    letter-spacing: 2px;
    z-index: 1;
}
.mat-thumb {
    overflow: hidden;
}

/* ============ 镜头模块新增样式（T0-T8） ============ */

/* 镜头行（拖拽相关） */
.shot-row {
    position: relative;
}
.shot-row.draggable {
    cursor: grab;
}
.shot-row.shot-dragging {
    opacity: 0.35 !important;
}
.shot-drop-line-top::before,
.shot-drop-line-bottom::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
}
.shot-drop-line-top::before { top: -2px; }
.shot-drop-line-bottom::after { bottom: -2px; }

.shot-row.drag-hover {
    border-color: var(--accent-dim) !important;
    box-shadow: 0 0 0 1px var(--accent-dim) inset;
}

/* 镜头缩略图 - 多段素材网格 */
.shot-clip-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    grid-auto-rows: minmax(40px, 1fr);
    gap: 2px;
    padding: 2px;
    overflow: hidden;
    position: relative;
}
.shot-clip-grid:empty::after {
    content: "＋ 添加素材";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 12px;
    pointer-events: none;
}
.shot-clip-item {
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    position: relative;
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s;
}
.shot-clip-item:hover {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 0 0 1px var(--accent-dim);
}
.shot-clip-item:nth-child(n+7) {
    /* 超过6段合并为紧凑条 */
}
.shot-clip-dur {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 9px;
    padding: 0 3px;
    border-radius: 2px;
    line-height: 14px;
    font-weight: 500;
    pointer-events: none;
}
.shot-clip-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--warn);
    color: #fff;
    border: none;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    display: block;
    z-index: 3;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.shot-clip-item:hover .shot-clip-remove,
.shot-clip-item:focus-within .shot-clip-remove {
    opacity: 1;
}
.shot-clip-remove:hover { background: #ff3322; opacity: 1 !important; }

/* 缩略图空态样式统一 */
.shot-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shot-thumb-inner {
    width: 100%;
    height: 100%;
}

/* 更多操作菜单 */
.shot-more-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 150px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    z-index: 1000;
    overflow: hidden;
    padding: 4px 0;
}
.shot-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.shot-more-item:hover { background: var(--bg-hover); }
.shot-more-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.shot-more-sep {
    height: 1px;
    background: var(--border-color);
    margin: 2px 0;
}
.shot-more-item.danger { color: var(--warn); }
.shot-more-item.danger:hover { background: var(--warn-dim); }

/* 时长控件 - 输入框+预设 */
.shot-duration-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.shot-dur-input {
    width: 56px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    text-align: right;
}
.shot-dur-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.shot-dur-unit {
    color: var(--text-secondary);
    font-size: 11px;
    margin-right: 2px;
}
.shot-dur-presets {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.12s;
}
.shot-dur-presets:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}
.shot-dur-preset-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.shot-dur-preset-item {
    padding: 4px 10px;
    font-size: 11px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.shot-dur-preset-item:hover {
    background: var(--accent-bg);
    border-color: var(--accent-dim);
    color: var(--accent);
}

/* 转场浮层 */
.shot-transition-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.transition-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    font-family: inherit;
    transition: all 0.12s;
    min-width: 48px;
}
.transition-item:hover {
    background: var(--bg-tertiary);
}
.transition-item.active {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.transition-item-icon {
    font-size: 18px;
}
.transition-item-label {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.transition-item.active .transition-item-label { color: var(--accent); }
.transition-sep {
    width: 1px;
    height: 36px;
    background: var(--border-color);
}
.transition-off {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    font-family: inherit;
    color: var(--text-tertiary);
    font-size: 10px;
    transition: all 0.12s;
}
.transition-off.active {
    border-color: var(--warn);
    background: var(--warn-dim);
    color: var(--warn);
}
.transition-off-icon {
    font-size: 18px;
}

/* 原音音量滑块 */
.shot-orig-vol {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    animation: fadeInVol 0.2s ease;
}
@keyframes fadeInVol {
    from { opacity: 0; max-width: 0; }
    to { opacity: 1; max-width: 200px; }
}
.shot-orig-vol input[type=range] {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-hover);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.shot-orig-vol input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
}
.shot-orig-vol input[type=range]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid #fff;
}
.ov-val {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 30px;
    text-align: right;
}

/* 素材池卡片「已加入」徽标 */
.pool-card {
    position: relative;
}
.pool-card-added-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2px;
}
.pool-card-added {
    opacity: 0.75;
}
.pool-card-added::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 6px;
    pointer-events: none;
}

/* 镜头警告文案 - 绿色满状态 */
.shot-warn.ok {
    color: var(--accent);
    opacity: 0.9;
}
.shot-warn.ok .warn-dot { color: var(--accent); }
.shot-warn:empty, .shot-warn.hidden { display: none !important; }

/* 重置按钮 */
.btn-reset-shots {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 22px;
    font-size: 12px;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-reset-shots:hover {
    color: var(--warn);
    border-color: var(--warn-dim);
    background: var(--warn-dim);
}

/* 预览区当前镜头 & 统计 */
.preview-current-shot {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.preview-current-shot::before {
    content: "🎬";
    font-size: 14px;
}
.preview-shot-stats {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    padding: 2px 0;
}
.preview-shot-stats strong {
    color: var(--accent);
    font-weight: 600;
}

/* 滚动条美化 */
.mat-upload-history::-webkit-scrollbar,
.mat-grid::-webkit-scrollbar {
    width: 6px;
}
.mat-upload-history::-webkit-scrollbar-thumb,
.mat-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.mat-upload-history::-webkit-scrollbar-thumb:hover,
.mat-grid::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}
.mat-upload-history::-webkit-scrollbar-track,
.mat-grid::-webkit-scrollbar-track {
    background: transparent;
}

/* ============ 音乐选择弹窗 ============ */
.music-modal {
    width: 760px;
    max-width: 90vw;
    min-height: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.music-modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.music-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.music-modal-toolbar {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.music-cat-list { display: flex; gap: 6px; }
.music-cat-item {
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
}
.music-cat-item:hover { color: var(--text-primary); border-color: var(--border-light); }
.music-cat-item.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-dim);
    font-weight: 600;
}
.music-search-input {
    flex: 1;
    max-width: 240px;
    margin-left: auto;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
}
.music-search-input:focus { border-color: var(--accent-dim); }

.music-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    align-content: start;
    min-height: 240px;
}
.music-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 88px;
}
.music-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
}
.music-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
    background: var(--bg-secondary);
}
.music-cover {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    font-size: 22px;
}
.music-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%);
}
.music-cover-icon {
    position: relative;
    z-index: 1;
}
.music-info {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.music-info-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.music-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.music-mood-tag {
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 9px;
    font-weight: 500;
    flex-shrink: 0;
}
.music-info-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.music-duration {
    font-size: 11px;
    color: var(--text-tertiary);
}
.music-genre {
    font-size: 10px;
    color: var(--text-tertiary);
    background: var(--bg-top);
    padding: 1px 5px;
    border-radius: 3px;
}
.music-play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    position: relative;
    z-index: 2;
    margin-left: 8px;
    flex-shrink: 0;
}
.music-card.selected .music-play {
    background: var(--accent);
    border-color: var(--accent);
}
.music-play:hover { background: rgba(255,255,255,0.2); }
.music-card.selected .music-play:hover { background: #0dab8c; }
.music-play.is-playing {
    animation: pulse-play 1.2s ease-in-out infinite;
}
@keyframes pulse-play {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15,195,160,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(15,195,160,0); }
}

.music-modal-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.music-selected-info {
    font-size: 12px;
    color: var(--text-secondary);
}
.music-selected-info strong {
    color: var(--accent);
    font-weight: 600;
}
.music-modal-actions { display: flex; gap: 10px; }
.music-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 7px 18px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.music-btn-cancel:hover { background: var(--bg-hover); border-color: var(--border-light); }
.music-btn-confirm {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 7px 20px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.music-btn-confirm:hover { background: #0dab8c; }
.music-btn-confirm:disabled {
    background: #4d4f57;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============ 音乐面板样式 ============ */
.music-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 16px;
    gap: 10px;
}
.music-upload-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 8px 0;
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.08), rgba(56, 239, 125, 0.08));
    border: 1px dashed var(--border-color, #11998e);
    border-radius: 8px;
    flex-shrink: 0;
}

.music-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.music-upload-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.35);
}

.music-upload-btn:active {
    transform: translateY(0);
}

.music-upload-icon {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.music-upload-hint {
    font-size: 12px;
    color: var(--text-tertiary, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-upload-bar.is-uploading .music-upload-btn {
    opacity: 0.6;
    pointer-events: none;
}

.music-upload-bar.is-uploading .music-upload-hint::after {
    content: "  上传中…";
    color: #11998e;
    font-weight: 600;
}

.music-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-shrink: 0;
}
.music-filter-bar .music-cat-list {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
}
.music-filter-bar .music-cat-item {
    white-space: nowrap;
    padding: 5px 12px;
    font-size: 12px;
}
.music-search-wrapper {
    flex-shrink: 0;
}
.music-search-wrapper .music-search-input {
    max-width: 220px;
    margin-left: 0;
}
.music-panel-content .music-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
}
.music-selected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-shrink: 0;
}
.music-selected-bar .music-selected-info {
    font-size: 12px;
}
.music-confirm-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.music-confirm-btn:hover { background: #0dab8c; }
.music-confirm-btn:disabled {
    background: #4d4f57;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============ 功能面板系统 ============ */
.left-area { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }

.feature-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.feature-panel.active { display: flex; }

.panel-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}
.panel-header h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 0 0 auto;
}
.panel-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
/* 配音面板：配音测试按钮条 */
.voice-actions-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.btn-voice-selftest {
    border: 1px solid var(--accent);
    background: rgba(15, 195, 160, 0.12);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-voice-selftest:hover:not(:disabled) {
    background: rgba(15, 195, 160, 0.22);
    transform: translateY(-1px);
}
.voice-selftest-result {
    font-size: 11px;
    color: var(--text-tertiary);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 通用控件样式 ---- */
.feature-split {
    flex: 1;
    display: flex;
    gap: 0;
    overflow: hidden;
}
.feature-controls {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    min-width: 0;
}
.feature-preview {
    width: 260px;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.preview-label {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}
.preview-box {
    flex: 1;
    background: #0a0b0e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 200px;
    overflow: hidden;
}
.preview-text {
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    transition: all 0.15s;
    line-height: 1.5;
}

.ctrl-group { margin-bottom: 14px; }
.ctrl-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.ctrl-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.ctrl-half { flex: 1; }
.ctrl-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.ctrl-input:focus { border-color: var(--accent-dim); outline: none; }
.ctrl-select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.ctrl-select:focus { border-color: var(--accent-dim); outline: none; }
.ctrl-color {
    width: 100%;
    height: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px;
    cursor: pointer;
}
.ctrl-color-sm {
    width: 36px;
    height: 26px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
}
.effect-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.param-slider-sm {
    flex: 1;
    max-width: 100px;
    height: 4px;
    -webkit-appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
}
.param-slider-sm::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.align-group {
    display: flex;
    gap: 4px;
}
.align-btn {
    width: 34px;
    height: 32px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.align-btn:hover { color: var(--text-primary); }
.align-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-dim);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-color);
    border-radius: 20px;
    transition: 0.15s;
}
.toggle-switch .slider::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.15s;
}
.toggle-switch input:checked + .slider { background: var(--accent); }
.toggle-switch input:checked + .slider::before { transform: translateX(16px); }

/* ---- 配音面板 ---- */
.voice-panel-content {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
}
.voice-section { margin-bottom: 24px; }
.voice-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.voice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.voice-card:hover { border-color: var(--border-light); }
.voice-card.active {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.voice-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-top);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.voice-info { flex: 1; min-width: 0; }
.voice-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.voice-tag { font-size: 11px; color: var(--text-tertiary); }
.voice-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    flex-shrink: 0;
}
.voice-params { display: flex; flex-direction: column; gap: 14px; max-width: 600px; }
.param-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.param-row label {
    width: 50px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.param-slider {
    flex: 1;
    max-width: 300px;
    height: 4px;
    -webkit-appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
}
.param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.param-value {
    width: 60px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: right;
    flex-shrink: 0;
}

/* ---- 背景面板 ---- */
.bg-panel-content {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
}
.bg-section { margin-bottom: 24px; }
.bg-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.bg-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-tertiary);
}
.bg-upload-area:hover {
    border-color: var(--accent-dim);
    background: var(--accent-bg);
}
.upload-icon { font-size: 36px; margin-bottom: 8px; }
.upload-text { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.upload-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.bg-card {
    height: 100px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.bg-card:hover { transform: translateY(-2px); }
.bg-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.bg-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.bg-card.selected .bg-check { display: flex; }
.bg-card-name {
    position: relative;
    width: 100%;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
    font-size: 11px;
}
.bg-solid .bg-card-name { color: var(--text-primary); background: linear-gradient(to top, rgba(0,0,0,0.3), transparent); }

/* ---- 模板面板 ---- */
.tpl-panel-content {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.tpl-cats {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.tpl-cat-item {
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
}
.tpl-cat-item:hover { color: var(--text-primary); }
.tpl-cat-item.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-dim);
    font-weight: 600;
}
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.tpl-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
}
.tpl-card:hover {
    border-color: var(--accent-dim);
}

/* ============ 音频质检面板样式 ============ */
.ac-action-area {
    padding: 16px 0;
}
.ac-section {
    margin-bottom: 20px;
}
.ac-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
}
.ac-upload-zone {
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ac-upload-zone:hover,
.ac-upload-zone.is-dragging {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.ac-upload-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.ac-upload-text {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.ac-upload-sub {
    color: var(--text-secondary);
    margin: 8px 0;
}
.ac-browse-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.ac-browse-btn:hover {
    background: var(--accent-hover);
}
.ac-upload-hint {
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 12px;
}
.ac-config-list {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
}
.ac-config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.ac-config-item:last-child {
    border-bottom: none;
}
.ac-config-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.ac-config-toggles {
    display: flex;
    gap: 16px;
}
.ac-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}
.ac-toggle input {
    display: none;
}
.ac-toggle .slider {
    width: 36px;
    height: 20px;
    background: var(--border-color);
    border-radius: 10px;
    position: relative;
    transition: all 0.2s;
}
.ac-toggle .slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
}
.ac-toggle input:checked + .slider {
    background: var(--accent);
}
.ac-toggle input:checked + .slider::before {
    left: 18px;
}
.ac-btn-group {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.ac-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ac-btn-primary {
    background: var(--accent);
    color: #fff;
}
.ac-btn-primary:hover {
    background: var(--accent-hover);
}
.ac-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.ac-btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.ac-btn-fix {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: #fff;
}
.ac-btn-fix:hover {
    opacity: 0.9;
}
.ac-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 质检结果区 */
.ac-result-area {
    margin-top: 20px;
}
.ac-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.ac-summary-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.ac-summary-item.ac-passed {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}
.ac-summary-item.ac-warning {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}
.ac-summary-item.ac-failed {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}
.ac-summary-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}
.ac-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
}
.ac-result-list {
    max-height: 300px;
    overflow-y: auto;
}
.ac-report-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}
.ac-report-card.status-passed {
    border-left: 4px solid #28a745;
}
.ac-report-card.status-warning {
    border-left: 4px solid #ffc107;
}
.ac-report-card.status-failed {
    border-left: 4px solid #dc3545;
}
.ac-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ac-report-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.ac-report-status {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.ac-report-status.passed {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}
.ac-report-status.warning {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}
.ac-report-status.failed {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}
.ac-report-details {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.ac-report-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
}
.ac-report-detail-item:last-child {
    border-bottom: none;
}

/* 历史报告区 */
.ac-reports-area {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.ac-reports-list {
    max-height: 200px;
    overflow-y: auto;
}
.ac-report-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.ac-report-item:hover {
    border-color: var(--accent);
}
.ac-report-item-name {
    font-size: 13px;
    color: var(--text-primary);
}
.ac-report-item-time {
    font-size: 11px;
    color: var(--text-secondary);
}
.ac-empty-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 20px;
}

/* 波形图样式 */
.ac-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    margin: 10px 0;
}
.ac-waveform-bar {
    width: 3px;
    background: var(--accent);
    border-radius: 1px;
    transition: height 0.2s;
}
.tpl-cover {
    height: 110px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 8px;
}
.tpl-duration {
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}
.tpl-info { padding: 10px 12px; }
.tpl-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tpl-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.tpl-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tpl-tags span {
    font-size: 10px;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 1px 6px;
    border-radius: 8px;
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #3a3b42;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4a4b52;
}

/* ============ 响应式 ============ */
@media (max-width: 1300px) {
    .preview-area-2 { width: 380px; }
    .left-area { min-width: 520px; }
}
@media (max-width: 1100px) {
    .preview-area-2 { width: 340px; padding: 10px; }
    .shots-header { padding: 10px 12px; }
    .shots-list { padding: 8px 12px 14px; }
}

/* =======================================================
   Step 3 · 新面板全局样式（模板/文案/历史/标签/Apply工具栏/顶栏按钮）
   ======================================================= */
.panel-header-tools { display: flex; align-items: center; gap: 8px; }
.btn-tpl-refresh, .btn-copy-gen, .btn-copy-storyboard, .btn-copy-sync,
.btn-tag-scan, .btn-save, .btn-tpl-fill, .btn-apply-style,
.btn-apply-outline, .btn-apply-primary {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-tpl-refresh:hover, .btn-copy-sync:hover, .btn-tag-scan:hover,
.btn-save:hover, .btn-tpl-fill:hover, .btn-apply-outline:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
}
.btn-copy-gen, .btn-apply-primary, .btn-apply-style {
    background: linear-gradient(135deg, #0fc3a0 0%, #0ba887 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn-copy-gen:hover, .btn-apply-primary:hover, .btn-apply-style:hover {
    background: linear-gradient(135deg, #12d4b0 0%, #0ec09a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,195,160,0.3);
}
.btn-copy-storyboard {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn-copy-storyboard:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

/* ---------- Apply 工具栏（标题/字幕面板底部） ---------- */
.style-apply-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius) var(--radius);
}
.apply-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.apply-toggle input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.apply-hint { font-size: 12px; color: var(--text-tertiary); }
.apply-hint.synced { color: var(--accent); }

/* ---------- 顶栏右侧新按钮 ---------- */
.preview-top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.btn-save {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn-save:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.btn-tpl-fill {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn-tpl-fill:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* =======================================================
   模板面板 · 真实化卡片 & 分类 & 套用预览
   ======================================================= */
.tpl-panel-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.tpl-cats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.tpl-cat-item {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 16px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.tpl-cat-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.tpl-cat-item.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-dim);
    font-weight: 600;
}
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.tpl-loading-hint {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-tertiary);
    font-size: 13px;
}
/* 真实模板卡（增强原 tpl-card） */
.tpl-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.tpl-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.tpl-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.tpl-cover {
    height: 120px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}
.tpl-cover-gradient-0 { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); }
.tpl-cover-gradient-1 { background: linear-gradient(135deg, #14532d 0%, #16a34a 50%, #84cc16 100%); }
.tpl-cover-gradient-2 { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #fbbf24 100%); }
.tpl-cover-gradient-3 { background: linear-gradient(135deg, #581c87 0%, #9333ea 50%, #ec4899 100%); }
.tpl-cover-gradient-4 { background: linear-gradient(135deg, #18181b 0%, #3f3f46 50%, #71717a 100%); }
.tpl-collection-chip {
    align-self: flex-start;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-weight: 600;
}
.tpl-duration {
    align-self: flex-end;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.tpl-info { padding: 12px 14px; }
.tpl-name { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.tpl-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 6px;
}
.tpl-sep-dot {
    width: 3px; height: 3px;
    background: var(--text-tertiary);
    border-radius: 50%;
}
.tpl-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.tpl-tags span {
    font-size: 10px;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 500;
}

/* 套用模板预览区 */
.tpl-apply-preview {
    margin-top: 4px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
}
.tpl-apply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tpl-apply-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.tpl-apply-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.tpl-seg-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.tpl-seg-card {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.tpl-seg-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 5px;
}
.tpl-seg-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.tpl-seg-stat-row span:last-child { color: var(--text-tertiary); }

/* =======================================================
   文案面板 · 双栏布局 + 输入区 + 预览卡片
   ======================================================= */
.copy-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
@media (max-width: 1200px) {
    .copy-layout { grid-template-columns: 1fr; }
}
.copy-input-col, .copy-preview-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.ctrl-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctrl-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ctrl-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.copy-desc-ta {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.copy-desc-ta:focus { border-color: var(--accent); outline: none; }
.copy-direction-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dir-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.15s;
}
.dir-opt:hover { border-color: var(--border-light); color: var(--text-primary); }
.dir-opt.active {
    border-color: var(--accent-dim);
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}
.dir-opt input { accent-color: var(--accent); margin: 0; }
.copy-tpl-select {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
}
.copy-progress {
    padding: 10px 14px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.badge-sync {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--warn-dim);
    color: var(--warn);
    font-weight: 600;
}
.badge-sync.synced {
    background: var(--accent-bg);
    color: var(--accent);
}

/* 文案预览卡 */
.copy-hero-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.copy-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.copy-copy-btn {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.copy-copy-btn:hover { background: var(--accent-bg); }
.copy-hero-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}
.copy-hero-intro {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    word-break: break-word;
}
.copy-tags-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.copy-tag, .copy-tag-empty {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.copy-tag {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 500;
}
.copy-tag-empty { color: var(--text-tertiary); font-style: italic; }
.copy-seg-count {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}
.copy-seg-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.copy-seg-empty {
    padding: 30px;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
}
.copy-seg-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 0.15s;
}
.copy-seg-card:hover { border-color: var(--accent-dim); }
.copy-seg-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.copy-seg-idx {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 2px 9px;
    border-radius: 10px;
}
.copy-seg-len {
    font-size: 11px;
    color: var(--text-tertiary);
}
.copy-seg-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.7;
    word-break: break-word;
}

/* =======================================================
   任务历史面板
   ======================================================= */
.history-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 16px 8px;
}
.history-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.hs-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.hs-value.hs-ok { color: var(--accent); }
.hs-value.hs-warn { color: #f59e0b; }
.hs-value.hs-err { color: var(--warn); }
.hs-label {
    font-size: 11px;
    color: var(--text-tertiary);
}
.history-list {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.history-empty-hint {
    padding: 40px;
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
}
.history-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    transition: all 0.15s;
}
.history-card:hover {
    border-color: var(--accent-dim);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hist-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hist-status-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}
.hist-status-done { background: var(--accent-bg); color: var(--accent); }
.hist-status-warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.hist-status-error { background: var(--warn-dim); color: var(--warn); }
.hist-status-ongoing { background: rgba(96,165,250,0.15); color: #60a5fa; }
.hist-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 11px;
    color: var(--text-tertiary);
    grid-column: 1 / -1;
}
.hist-meta-row span strong {
    color: var(--text-secondary);
    font-weight: 500;
}
.hist-actions {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.btn-hist-redo, .btn-hist-detail {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-hist-redo {
    background: linear-gradient(135deg, #0fc3a0, #0ba887);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn-hist-redo:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(15,195,160,0.3);
}
.btn-hist-detail:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
}

/* =======================================================
   素材标签面板
   ======================================================= */
.tags-toolbar {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.tag-root-input {
    flex: 1;
    padding: 7px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
}
.tag-root-input:focus { border-color: var(--accent); outline: none; }

.tags-group-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    align-content: start;
}
.tags-empty-hint {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
}
.tag-group-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.tag-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tag-group-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.tag-group-count {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.tag-chips-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tag-chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.tag-chip:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.tag-chip.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-dim);
    font-weight: 600;
}
.tags-report-area {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.tags-coverage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.tag-coverage-row {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    gap: 10px;
    align-items: center;
    font-size: 12px;
}
.tag-cov-label { color: var(--text-secondary); }
.tag-cov-bar-wrap {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.tag-cov-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #06b6d4);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.tag-cov-value {
    text-align: right;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 11px;
}

/* ================================================================
   素材库：深色主题样式
   ================================================================ */
#panel-material-library { height: 100%; padding: 0; }
.lib-main { display:flex; flex-direction: row; height: calc(100% - 56px); overflow: hidden; }

/* ---------- 顶部全局素材导航（顶部全局4Tab + 统计 + 教程） ---------- */
.lib-global-nav {
    height: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px;
    background: linear-gradient(180deg, #1c1d23 0%, #17181d 100%);
    border-bottom: 1px solid var(--border);
}
.lib-global-nav-left { display:flex; align-items:center; gap: 28px; min-width: 0; }
.lib-logo {
    font-size: 15.5px; font-weight: 800; letter-spacing: .5px;
    color: var(--text-primary);
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(17,198,162,.16), rgba(99,102,241,.18));
    border: 1px solid rgba(17,198,162,.28);
    border-radius: 10px;
    white-space: nowrap;
}
.lib-main-type-tabs {
    display:flex; align-items:center; gap: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    padding: 4px;
    border-radius: 12px;
}
.lib-main-type-tab {
    display: inline-flex; align-items:center; gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.lib-main-type-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
.lib-main-type-tab.active {
    background: linear-gradient(135deg, #0fc3a0, #0bb687);
    color: #fff;
    box-shadow: 0 4px 14px rgba(11,182,135,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.lib-tab-icon { font-size: 15px; }
.lib-global-nav-right { display:flex; align-items:center; gap: 10px; }
.lib-nav-btn {
    display: inline-flex; align-items:center; gap: 6px;
    padding: 7.5px 14px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.lib-nav-btn:hover {
    color: var(--text-primary);
    border-color: rgba(17,198,162,.45);
    background: rgba(17,198,162,.06);
    transform: translateY(-1px);
}
.lib-nav-btn-accent {
    background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.24));
    color: #d5c7ff;
    border-color: rgba(139,92,246,.45);
}
.lib-nav-btn-accent:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(139,92,246,.44));
    border-color: rgba(139,92,246,.75);
}

/* ---------- 左侧分类栏 ---------- */
.lib-left-pane {
    width: 240px; flex-shrink:0; border-right:1px solid var(--border);
    background: linear-gradient(180deg, #22242b 0%, #1c1d22 100%);
    display:flex; flex-direction:column;
}
/* 需求：测试断言 .lib-left / .lib-topbar / .lib-grid 三个类存在（三区域）。
   现在 lib-left-pane/lib-toolbar/lib-material-grid 都已在 HTML 里追加对应别名 class，
   这里给别名 class 补零属性，确保 CSS 选择器命中。 */
.lib-left {}
.lib-topbar {}
.lib-grid {}

.lib-pane-header {
    padding: 14px 16px 8px; display:flex; align-items:center; justify-content: space-between;
}
.lib-pane-title { font-size:14px; font-weight:700; color:var(--text-primary); }
.lib-btn-icon {
    width:28px; height:28px; border-radius:6px; border:1px solid var(--border);
    background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer;
}
.lib-btn-icon:hover { color:var(--accent); border-color:var(--accent); }

/* 左栏：分类搜索 + 新建文件夹按钮（需求：顶部支持搜索与快速新建） */
.lib-left-searchbar {
    margin: 6px 12px 0;
    display:flex; align-items:center; gap:8px;
    padding: 8px 10px;
    background: #23252c; border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-tertiary);
}
.lib-left-searchbar:focus-within {
    border-color: rgba(17,198,162,.55);
    box-shadow: 0 0 0 3px rgba(17,198,162,.12);
}
.lib-left-search-input {
    flex:1; background: transparent; border:0; outline:0;
    color: var(--text-primary); font-size:12.5px;
}
.lib-left-search-input::placeholder { color: var(--text-tertiary); }

.lib-pane-actions {
    padding: 8px 12px 12px; display:flex; flex-direction:column; gap:8px;
    border-bottom:1px dashed var(--border); margin:8px 0 4px;
}
.lib-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding: 8px 14px; font-size:13px; font-weight:500; color:var(--text-primary);
    background: #2b2d34; border:1px solid var(--border); border-radius:8px;
    cursor:pointer; transition:all .18s ease; white-space:nowrap;
}
.lib-btn:hover:not(:disabled) { background:#343741; border-color:#3f424c; transform: translateY(-1px); }
.lib-btn:active:not(:disabled) { transform: translateY(0); }
.lib-btn:disabled { opacity:.45; cursor:not-allowed; }
.lib-btn-primary { background: linear-gradient(180deg, #11c6a2, #0ba78a); border-color:#11c6a2; color:#fff; }
.lib-btn-primary:hover:not(:disabled) { filter:brightness(1.05); border-color:#14d6b0; background: linear-gradient(180deg, #14d6b0, #0cbf9f); }
.lib-btn-block { width: 100%; }
.lib-btn-sm { padding: 6px 10px; font-size:12px; border-radius:6px; }
.lib-btn-danger { color:#ff6b6b; border-color: rgba(255,107,107,.3); }
.lib-btn-danger:hover:not(:disabled) { background: rgba(255,107,107,.12); border-color:#ff6b6b; }
.lib-help-btn { color:var(--text-tertiary); border-style: dashed; }

.lib-cat-list {
    flex:1; overflow-y:auto; padding: 6px 8px 16px;
    scrollbar-width: thin; scrollbar-color:#3b3e48 transparent;
}
.lib-cat-list::-webkit-scrollbar { width:6px; }
.lib-cat-list::-webkit-scrollbar-thumb { background:#3b3e48; border-radius:3px; }
.lib-cat-item {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 12px; border-radius:8px; cursor:pointer;
    color:var(--text-secondary); font-size:13px; line-height:1.4;
    margin-bottom:2px; user-select:none; position:relative;
}
.lib-cat-item:hover { background: rgba(15,195,160,.06); color:var(--text-primary); }
.lib-cat-item.active {
    background: linear-gradient(90deg, rgba(15,195,160,.18), rgba(15,195,160,.04));
    color: var(--accent); font-weight: 600;
}
.lib-cat-item.active::before {
    content:""; position:absolute; left:-8px; top:8px; bottom:8px; width:3px;
    background:var(--accent); border-radius:2px;
}
.lib-cat-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-cat-count {
    min-width:24px; padding:0 7px; height:18px; line-height:18px; border-radius:9px;
    background:#2e3038; color:var(--text-tertiary); font-size:11px; text-align:center;
}
.lib-cat-item.active .lib-cat-count { background: rgba(15,195,160,.2); color: var(--accent); }

/* 左栏底部：存储空间条（需求：直观掌握存储余量 + 扩容入口） */
.lib-storage-bar {
    padding: 14px 16px 18px;
    border-top: 1px dashed var(--border);
    margin-top: 6px;
}
.lib-storage-title {
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color: var(--text-secondary);
    margin-bottom: 8px;
}
.lib-storage-link {
    color: var(--accent); font-weight:600; cursor:pointer;
    text-decoration:none; font-size:12px;
}
.lib-storage-link:hover { filter: brightness(1.12); }
.lib-storage-track {
    height: 8px; border-radius: 4px;
    background: rgba(255,255,255,.06);
    overflow:hidden;
}
.lib-storage-fill {
    display:block; height: 100%;
    background: linear-gradient(90deg, #0fc3a0, #0bb687);
    border-radius: 4px;
    transition: width .35s ease;
}
.lib-storage-fill.is-warn { background: linear-gradient(90deg, #ffc048, #f39c12); }
.lib-storage-fill.is-danger { background: linear-gradient(90deg, #ff6b6b, #ee4040); }
.lib-storage-meta {
    display:flex; align-items:center; gap:4px;
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--text-tertiary);
}
.lib-storage-meta > span:first-child { color: var(--text-secondary); font-weight:600; }

/* ---------- 主区 ---------- */
.lib-center { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; position:relative; }

.lib-toolbar {
    padding: 14px 20px 10px; border-bottom:1px solid var(--border);
    background: var(--bg-secondary);
    display:flex; flex-direction:column; gap:10px; flex-shrink:0;
}
.lib-toolbar-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.lib-filter-row { padding-top:4px; border-top:1px dashed rgba(255,255,255,.05); margin-top:4px; }

.lib-type-tabs { display:flex; align-items:center; gap:2px; background:#23252c; padding:3px; border-radius:10px; }
.lib-type-tab {
    padding:7px 14px; font-size:13px; font-weight:500; color:var(--text-secondary);
    background: transparent; border:0; border-radius:8px; cursor:pointer; transition:all .18s;
}
.lib-type-tab:hover { color:var(--text-primary); }
.lib-type-tab.active { background: linear-gradient(180deg, #11c6a2, #0ba78a); color:#fff; box-shadow:0 2px 8px rgba(15,195,160,.35); }
.lib-count-badge { font-size:12px; color:var(--text-tertiary); padding-left:6px; }

.lib-tool-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lib-sort-select, .lib-select {
    background:#2b2d34; color:var(--text-primary); border:1px solid var(--border);
    border-radius:8px; padding:7px 28px 7px 10px; font-size:13px; cursor:pointer;
    appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 8px center;
}
.lib-sort-select:focus, .lib-select:focus { outline:none; border-color:var(--accent); }

.lib-batch-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lib-btn-outline {
    background: transparent !important;
    border-style: dashed !important;
    color: var(--text-secondary) !important;
}
.lib-btn-outline:hover:not(:disabled) {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.lib-search-input, .lib-text-input {
    width: 240px; padding:7px 12px; background:#2b2d34; border:1px solid var(--border);
    border-radius:8px; color:var(--text-primary); font-size:13px;
}
.lib-search-input::placeholder, .lib-text-input::placeholder { color:var(--text-tertiary); }
.lib-search-input:focus, .lib-text-input:focus { outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px rgba(15,195,160,.12); }

.lib-filter-chip-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lib-filter-divider { width:1px; height:22px; background:rgba(255,255,255,.08); }
.lib-filter-chip {
    display:inline-flex; align-items:center; gap:4px; padding:5px 12px; font-size:12px;
    color:var(--text-secondary); background:#2b2d34; border:1px solid var(--border);
    border-radius:16px; cursor:pointer; transition:all .18s;
}
.lib-filter-chip:hover { color:var(--text-primary); border-color:#3f424c; }
.lib-filter-chip.active {
    background: rgba(15,195,160,.14); color: var(--accent);
    border-color: rgba(15,195,160,.45); font-weight:600;
}

/* ---------- 网格 ---------- */
.lib-grid-wrap {
    flex:1; overflow-y:auto; padding: 16px 20px 24px;
    /* 首位引导上传卡片 + 网格，都走同一个 grid：
       引导卡占 2×2 大格；其余素材卡 1×1 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 18px;
}

/* 引导式上传卡片（首位常显） */
.lib-upload-guide-card {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 215px;
    position: relative;
    border-radius: 16px;
    padding: 20px 22px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    cursor: pointer;
    background:
      radial-gradient(circle at 20% 10%, rgba(17,198,162,.22), transparent 55%),
      radial-gradient(circle at 80% 90%, rgba(99,102,241,.25), transparent 55%),
      linear-gradient(180deg, #1e2028 0%, #181a21 100%);
    border: 2px dashed rgba(17,198,162,.38);
    transition: all .22s ease;
    overflow: hidden;
}
.lib-upload-guide-card:hover {
    border-color: rgba(17,198,162,.82);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(17,198,162,.18), 0 0 0 3px rgba(17,198,162,.08) inset;
}
.lib-upload-guide-card.is-dragover {
    border-color: #0fc3a0;
    background:
      radial-gradient(circle at 20% 10%, rgba(17,198,162,.45), transparent 60%),
      radial-gradient(circle at 80% 90%, rgba(99,102,241,.45), transparent 60%),
      linear-gradient(180deg, #1e2028, #15171d);
}
.lib-guide-cloud {
    font-size: 44px;
    line-height: 1;
    filter: drop-shadow(0 8px 18px rgba(15,195,160,.38));
    animation: libFloatY 2.4s ease-in-out infinite;
}
@keyframes libFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.lib-guide-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .3px;
}
.lib-guide-desc {
    font-size: 12.5px;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.6;
}
.lib-guide-formats {
    display:flex; align-items:center; gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 4px 0 2px;
}
.lib-guide-format-tag {
    display:inline-flex; align-items:center;
    padding: 3.5px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: .4px;
    color: #fff;
}
.lib-tag-mov  { background: linear-gradient(135deg, #ff6b6b, #ee4040); }
.lib-tag-webm { background: linear-gradient(135deg, #ffa94d, #f76707); }
.lib-tag-mp4  { background: linear-gradient(135deg, #11c6a2, #0bb687); }
.lib-tag-img  { background: linear-gradient(135deg, #4dabf7, #1c7ed6); }
.lib-tag-audio{ background: linear-gradient(135deg, #cc5de8, #9c36b5); }
.lib-tag-text { background: linear-gradient(135deg, #845ef7, #5f3dc4); }
.lib-guide-upload-btn {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #0fc3a0, #0bb687);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(11,182,135,.42);
    transition: all .18s ease;
}
.lib-guide-upload-btn:hover { transform: translateY(-1px) scale(1.03); filter: brightness(1.08); }
.lib-guide-tip {
    font-size: 11.5px;
    color: rgba(255,255,255,.4);
    margin-top: 4px;
}

/* 素材网格本体（被引导卡和素材卡容器包裹的 div）：
   由于 lib-grid-wrap 已经是 grid，这里让 libMatGrid 再嵌套一个内部子 grid，
   卡片都放在该内部 grid 上（引导卡占首位独立）。 */
.lib-material-grid.lib-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* 响应式：小屏调整为 3/2 列 */
@media (max-width: 1400px) {
    .lib-grid-wrap { grid-template-columns: repeat(3, 1fr); }
    .lib-material-grid.lib-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .lib-grid-wrap { grid-template-columns: repeat(2, 1fr); }
    .lib-material-grid.lib-grid { grid-template-columns: repeat(2, 1fr); }
    .lib-upload-guide-card { grid-column: span 2; }
}
.lib-grid-wrap::-webkit-scrollbar { width:8px; }
.lib-grid-wrap::-webkit-scrollbar-thumb { background:#3b3e48; border-radius:4px; }

.lib-material-grid {
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.lib-mat-card {
    position:relative; border-radius:12px; background:#22242b;
    border:1px solid var(--border); overflow:hidden; cursor:pointer;
    transition: all .2s ease; display:flex; flex-direction:column;
}
.lib-mat-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(15,195,160,.3);
}
.lib-mat-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(15,195,160,.45);
}
.lib-mat-thumb-wrap {
    position:relative; width:100%; aspect-ratio: 16 / 10; background:#000; overflow:hidden;
}
.lib-mat-thumb {
    width:100%; height:100%; object-fit: cover; display:block;
    transition: transform .25s ease;
}
.lib-mat-card:hover .lib-mat-thumb { transform: scale(1.04); }
.lib-mat-check {
    position:absolute; top:8px; left:8px; width:20px; height:20px;
    border-radius:6px; border: 1.5px solid rgba(255,255,255,.85);
    background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
    cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center;
    transition: all .15s;
}
.lib-mat-check.checked {
    background: var(--accent); border-color: var(--accent);
}
.lib-mat-check.checked::after {
    content:""; width: 10px; height:6px;
    border-left:2px solid #fff; border-bottom:2px solid #fff;
    transform: rotate(-45deg) translate(1px,-1px);
}
.lib-mat-duration {
    position:absolute; left:8px; bottom:8px; z-index:2;
    padding:2px 8px; font-size:11px; font-weight:600;
    color:#fff; background: rgba(0,0,0,.65); border-radius:10px;
    backdrop-filter: blur(4px);
}
.lib-mat-orient {
    position:absolute; top:8px; right:8px; z-index:2;
    padding:2px 6px; font-size:10px;
    color:#fff; background: rgba(0,0,0,.55); border-radius:8px;
}
.lib-mat-fav {
    position:absolute; top:8px; right:34px; z-index:2; cursor:pointer;
    width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.45); color:#fff; font-size:13px;
    transition: all .2s;
}
.lib-mat-fav:hover { background: rgba(255,215,0,.25); transform:scale(1.1); }
.lib-mat-fav.on { color: #ffd84d; text-shadow: 0 0 8px rgba(255,216,77,.55); }

.lib-mat-hover-mask {
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
    opacity:0; transition: opacity .2s;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
}
.lib-mat-card:hover .lib-mat-hover-mask { opacity:1; }
.lib-mat-play-btn {
    width:52px; height:52px; border-radius:50%;
    background: rgba(15,195,160,.9); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 20px rgba(15,195,160,.55);
    cursor:pointer; border:0; transform: scale(.9); transition: transform .18s;
}
.lib-mat-card:hover .lib-mat-play-btn { transform: scale(1); }
.lib-mat-play-btn:hover { background: #14d6b0; }

.lib-mat-del-quick-btn {
    padding: 6px 14px; border-radius: 20px; border: 0; cursor: pointer;
    background: rgba(255, 71, 87, 0.92); color: #fff;
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
    transform: translateY(6px); opacity: 0; transition: all .2s;
    box-shadow: 0 4px 14px rgba(255,71,87,.45);
}
.lib-mat-card:hover .lib-mat-del-quick-btn { transform: translateY(0); opacity: 1; }
.lib-mat-del-quick-btn:hover { background: #ff2b44; transform: translateY(-2px) !important; }

.lib-mat-del-btn {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 71, 87, 0.88); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all .18s;
    box-shadow: 0 2px 8px rgba(255,71,87,.4);
}
.lib-mat-card:hover .lib-mat-del-btn { opacity: 1; }
.lib-mat-del-btn:hover { background: #ff2b44; transform: scale(1.08); }

.lib-mat-more-btn {
    position:absolute; right:8px; bottom:8px; z-index:3;
    width:28px; height:28px; border-radius:6px; border:0;
    background: rgba(0,0,0,.55); color:#fff; font-size:14px; cursor:pointer;
    opacity:0; transition: opacity .18s;
}
.lib-mat-card:hover .lib-mat-more-btn { opacity:1; }
.lib-mat-more-btn:hover { background: rgba(15,195,160,.8); }

.lib-mat-foot {
    padding: 10px 12px 12px; display:flex; flex-direction:column; gap: 6px; flex:1;
}
.lib-mat-fname {
    font-size:13px; color:var(--text-primary); line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height: 34px;
    font-weight: 600;
}
.lib-meta-name {
    border-bottom: 1px dashed rgba(255,255,255,.06);
    padding-bottom: 6px;
}
/* 卡片新结构：3 行元数据展示 8 字段 */
.lib-mat-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.45;
}
.lib-meta-cell {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 6px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lib-meta-cell:hover {
    background: rgba(255,255,255,.06);
    color: var(--text-secondary);
}
/* 各 cell 配色（按字段类型） */
.lib-meta-uploader { color: #a8c5ff; border-color: rgba(99,102,241,.2); }
.lib-meta-cat      { color: #ffd6a5; border-color: rgba(255,169,77,.2); }
.lib-meta-res      { color: #8ce99a; border-color: rgba(140,233,154,.2); }
.lib-meta-format   { color: #faa2c1; border-color: rgba(250,162,193,.22); font-weight:700; }
.lib-meta-size     { color: #74c0fc; border-color: rgba(116,192,252,.22); }
.lib-meta-date     { color: #b197fc; border-color: rgba(177,151,252,.22); }

.lib-meta-row-bottom {
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,.06);
    margin-top: 2px;
}

/* 老样式兼容保留（卡片老 meta 布局） */
.lib-mat-meta {
    display:flex; align-items:center; justify-content:space-between; margin-top:auto;
    padding-top:6px; font-size:11px; color:var(--text-tertiary);
}

/* 使用次数徽章：非 0 → 绿色强显；0 → 弱化灰色 */
.lib-mat-use-count {
    display:inline-flex; align-items:center; gap:3px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(15,195,160,.14); color: var(--accent); font-weight:700;
    box-shadow: 0 0 0 1px rgba(15,195,160,.15) inset;
}
.lib-mat-use-count.lib-use-zero {
    background: rgba(255,255,255,.035);
    color: var(--text-tertiary);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
    font-weight: 500;
}

/* 缩略图左上角：文件格式角标（MOV/WEBM/MP4 等），与时长角标对称 */
.lib-mat-format-badge {
    position: absolute;
    top: 8px; left: 8px; z-index: 3;
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #fff;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
}

/* 空状态 */
.lib-empty { padding: 80px 20px; text-align:center; }
.lib-empty-icon { font-size: 64px; margin-bottom: 18px; opacity: .45; }
.lib-empty-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.lib-empty-desc { font-size:13px; color:var(--text-tertiary); }

/* ---------- 通用 Modal 深色 ---------- */
.lib-modal { background: var(--bg-primary); border:1px solid var(--border); border-radius: 14px; overflow: hidden; display:flex; flex-direction:column; max-height: 90vh; }
.lib-modal-lg { width: 720px; max-width: 92vw; }
.lib-modal-xl { width: 960px; max-width: 94vw; }
.lib-modal-header {
    padding: 14px 20px; display:flex; align-items:center; justify-content:space-between;
    background: linear-gradient(180deg, #24262e, #1e2028);
    border-bottom: 1px solid var(--border); flex-shrink:0;
}
.lib-modal-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.lib-close-btn {
    width: 28px; height: 28px; border-radius:6px; border:0; background: transparent;
    color:var(--text-secondary); font-size:16px; cursor:pointer;
}
.lib-close-btn:hover { background: rgba(255,255,255,.08); color:var(--text-primary); }

.lib-modal-body { padding: 18px 20px; overflow-y:auto; flex:1; }
.lib-modal-footer {
    padding: 12px 20px; display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--border); background: #1e2028; flex-shrink:0;
}
.lib-footer-left, .lib-footer-right { display:flex; gap:8px; }

/* ---------- 新建分类弹窗（addCategoryModal）---------- */
.add-cat-modal { width: 460px; max-width: 92vw; }
.add-cat-form { display:flex; flex-direction:column; gap: 10px; }
.add-cat-label {
    font-size: 12.5px; font-weight:600;
    color: var(--text-secondary);
    letter-spacing: .3px;
}
.add-cat-input-row {
    position: relative;
    display:flex; align-items:center; gap:8px;
}
.add-cat-input {
    flex:1;
    padding: 11px 56px 11px 13px;
    background:#23252c;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all .18s ease;
    outline: none;
}
.add-cat-input::placeholder {
    color: var(--text-tertiary);
    font-size: 12.5px;
}
.add-cat-input:focus {
    border-color: rgba(17,198,162,.6);
    box-shadow: 0 0 0 3px rgba(17,198,162,.14);
    background:#272932;
}
.add-cat-input.is-error {
    border-color: rgba(255,107,107,.7);
    box-shadow: 0 0 0 3px rgba(255,107,107,.12);
}
.char-count {
    position: absolute;
    right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 11.5px;
    color: var(--text-tertiary);
    background: rgba(255,255,255,.03);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.char-count.is-over {
    color: #ff6b6b;
    border-color: rgba(255,107,107,.45);
    background: rgba(255,107,107,.08);
    font-weight: 600;
}
.add-cat-tip {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.55;
}
.add-cat-tip b { color: var(--text-secondary); font-weight:600; }
.add-cat-err {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: rgba(255,107,107,.08);
    border: 1px solid rgba(255,107,107,.25);
    color: #ff8b8b;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}
.add-cat-err::before {
    content: '⚠';
    color: #ffb14a;
    font-weight: 700;
    flex-shrink: 0;
}
.add-cat-err.hidden { display:none; }

/* 新建分类弹窗的 footer 按钮右对齐 + 间距更紧凑 */
.add-cat-modal .lib-modal-footer {
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- 素材展示区右下角 AI 客服入口 ---------- */
.lib-ai-customer-service {
    position: absolute;
    right: 20px; bottom: 20px; z-index: 50;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(139,92,246,.45), 0 0 0 1px rgba(255,255,255,.1) inset;
    transition: all .2s ease;
}
.lib-ai-customer-service:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(139,92,246,.55), 0 0 0 1px rgba(255,255,255,.16) inset;
    filter: brightness(1.06);
}

/* ---------- 上传弹窗 ---------- */
.lib-upload-config { display:flex; gap:16px; margin-bottom:14px; }
.lib-ctrl-group { display:flex; flex-direction:column; gap:6px; }
.lib-ctrl-flex-1 { flex:1; }
.lib-ctrl-label { font-size:12px; color:var(--text-tertiary); font-weight:500; }
.lib-formats-hint { padding:8px 12px; background:#22242b; border-radius:8px; color:var(--text-secondary); font-size:12px; border:1px dashed var(--border); }

.lib-dropzone {
    border: 2px dashed #3a3d47; border-radius: 12px;
    background: linear-gradient(180deg, #20222a, #1a1c22);
    padding: 24px; text-align:center; transition: all .2s; cursor: pointer; margin-bottom: 14px;
}
.lib-dropzone.dragover {
    border-color: var(--accent); background: rgba(15,195,160,.08);
    box-shadow: inset 0 0 0 1px rgba(15,195,160,.2);
}
.lib-drop-icon { font-size: 38px; margin-bottom: 10px; }
.lib-drop-title { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.lib-drop-link { color: var(--accent); cursor:pointer; text-decoration: underline; text-underline-offset:3px; }
.lib-drop-link:hover { filter:brightness(1.15); }
.lib-drop-hint { font-size:12px; color:var(--text-tertiary); }

.lib-progress-summary { margin-bottom:12px; }
.lib-progress-bar {
    width:100%; height: 8px; border-radius:4px; background:#2b2d34; overflow:hidden; margin-bottom:8px;
}
.lib-progress-bar-fill {
    height:100%; background: linear-gradient(90deg, #11c6a2, #14d6b0);
    transition: width .3s ease; border-radius:4px;
}
.lib-progress-meta {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:12px; color:var(--text-secondary);
}
.lib-progress-meta strong { color:var(--text-primary); }
.lib-text-ok { color: #56d39d; }
.lib-text-err { color: #ff6b6b; }

.lib-upload-list { max-height: 300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.lib-upload-row {
    display:grid; grid-template-columns: 40px 1fr auto auto; gap:10px; align-items:center;
    padding: 8px 10px; background:#22242b; border:1px solid var(--border); border-radius: 10px;
}
.lib-upload-thumb {
    width:40px; height:40px; border-radius:6px; background:#0b0c0f; overflow:hidden; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--text-tertiary);
}
.lib-upload-thumb img { width:100%; height:100%; object-fit: cover; }
.lib-upload-info { min-width:0; display:flex; flex-direction:column; gap:4px; }
.lib-upload-name { font-size:12px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-upload-bar { width:100%; height:5px; background:#2f313a; border-radius:3px; overflow:hidden; }
.lib-upload-bar-fill { height:100%; background: linear-gradient(90deg, #11c6a2, #14d6b0); border-radius:3px; transition: width .2s; }
.lib-upload-size { font-size:11px; color:var(--text-tertiary); }
.lib-upload-status { font-size:11px; min-width:56px; text-align:right; font-weight:600; }
.lib-upload-status.ok { color:#56d39d; }
.lib-upload-status.dup { color:#60a5fa; }
.lib-upload-status.err { color:#ff6b6b; }
.lib-upload-status.uploading { color:var(--accent); }
.lib-upload-status.pending { color:var(--text-tertiary); }
.lib-upload-act { display:flex; gap:4px; }
.lib-icon-btn {
    width:26px; height:26px; border-radius:5px; border:0;
    background: #2b2d34; color:var(--text-secondary); cursor:pointer; font-size:12px;
    border:1px solid var(--border);
}
.lib-icon-btn:hover { background:#343741; color:var(--text-primary); border-color:#3f424c; }

/* ---------- 导入弹窗 ---------- */
.lib-help-hint {
    margin-top:6px; padding:10px 12px; background:#22242b; border:1px dashed var(--border);
    border-radius:8px; font-size:12px; color:var(--text-secondary); line-height:1.6;
}
.lib-import-progress { margin-top:12px; }
.lib-import-report {
    margin-top:14px; padding:14px 16px; background:#1e2028; border:1px solid var(--border); border-radius:10px;
    font-size:13px;
}
.lib-import-report h5 { margin:0 0 8px 0; color:var(--text-primary); font-size:14px; }
.lib-import-stats { display:flex; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.lib-import-stats span { color:var(--text-secondary); }
.lib-import-stats strong { font-size:16px; }
.lib-import-fail-list { max-height: 180px; overflow-y:auto; font-size:12px; color:#ff9e9e; }
.lib-import-fail-list div { padding: 3px 0; border-bottom:1px dashed rgba(255,255,255,.05); }

/* ---------- 预览弹窗 ---------- */
.lib-preview-body { display:grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
.lib-preview-media { display:flex; align-items:center; justify-content:center; background:#0b0c0f; border-radius:10px; overflow:hidden; min-height:300px; }
.lib-preview-meta { display:flex; flex-direction:column; gap:8px; }
.lib-meta-row {
    display:grid; grid-template-columns: 84px 1fr; gap:8px; align-items:start;
    padding: 8px 10px; background:#22242b; border-radius:8px; font-size:12px;
}
.lib-meta-key { color:var(--text-tertiary); font-weight:500; }
.lib-meta-val { color:var(--text-primary); line-height:1.5; word-break: break-all; }
.lib-mono { font-family: Consolas, monospace; color:var(--accent); }

/* ---------- 帮助弹窗 ---------- */
.lib-help-body h4 {
    margin: 16px 0 6px; color:var(--accent); font-size:14px; font-weight:700;
}
.lib-help-body h4:first-child { margin-top: 0; }
.lib-help-body p {
    margin: 0 0 10px; color:var(--text-secondary); line-height:1.75; font-size:13px;
}
.lib-help-body b { color:var(--text-primary); font-weight:600; }

/* ---------- 右键菜单 ---------- */
.lib-ctxmenu {
    position: fixed; z-index: 10000; min-width: 170px;
    background: #272931; border: 1px solid #3a3d47; border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: 6px;
}
.lib-ctx-item {
    padding: 8px 12px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text-primary);
}
.lib-ctx-item:hover { background: rgba(15,195,160,.14); color: var(--accent); }
.lib-ctx-item.lib-ctx-danger { color:#ff8686; }
.lib-ctx-item.lib-ctx-danger:hover { background: rgba(255,107,107,.14); color: #ff6b6b; }
.lib-ctx-sep { height:1px; background: var(--border); margin: 4px 2px; }

.hidden { display: none !important; }

/* ================================================================
   标题模块升级：多标题标签 / 划重点 / 样式预设 / 双预览
   ================================================================ */

/* ----- 顶部：标题面板头按钮 ----- */
.title-head-actions { display: flex; gap: 8px; margin-left: auto; }
.btn-tpl-outline {
    background: rgba(15,195,160,.08);
    color: var(--accent);
    border: 1px solid rgba(15,195,160,.35);
    padding: 6px 12px; border-radius: 6px; font-size: 12px;
    cursor: pointer; font-weight: 600; transition: all .15s;
}
.btn-tpl-outline:hover { background: rgba(15,195,160,.18); border-color: var(--accent); }

/* ----- 多标题标签栏 ----- */
.title-tabs-row {
    display: flex; align-items: center;
    padding: 10px 18px; gap: 10px;
    background: linear-gradient(180deg, #1c1e25, #171920);
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    overflow-x: auto;
}
.title-tabs { display:flex; gap:8px; flex-wrap: nowrap; }
.title-tab {
    display:flex; align-items:center; gap:8px;
    padding: 7px 10px 7px 12px;
    background: #2a2d37;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; user-select: none;
    white-space: nowrap; transition: all .15s;
}
.title-tab:hover { border-color: var(--accent-dim); color: var(--text-primary); }
.title-tab.active {
    background: linear-gradient(180deg, rgba(15,195,160,.22), rgba(15,195,160,.08));
    border-color: var(--accent); color: var(--accent); font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(15,195,160,.25);
}
.title-tab .tt-idx { font-weight: 700; min-width: 14px; }
.title-tab .tt-text {
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
    opacity: .9;
}
.title-tab .tt-close {
    width: 18px; height: 18px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: transparent; color: inherit;
    font-size: 14px; line-height: 1; cursor: pointer;
    border: none; opacity: .55;
}
.title-tab .tt-close:hover { background: rgba(255,77,79,.22); color:#ff4d4f; opacity: 1; }
.btn-tab-add {
    width: 30px; height: 30px; flex-shrink: 0;
    background: rgba(15,195,160,.12); color: var(--accent);
    border: 1px dashed rgba(15,195,160,.55);
    border-radius: 8px; font-size: 20px; line-height: 1;
    cursor: pointer; transition: all .15s;
}
.btn-tab-add:hover { background: var(--accent); color:#fff; border-style: solid; }

/* ----- 标题面板主网格 ----- */
.title-grid {
    flex: 1; display:grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.title-col-left, .title-col-right {
    padding: 16px 18px; overflow-y: auto; min-width: 0;
}
.title-col-left {
    border-right: 1px solid var(--border-color);
    background: linear-gradient(180deg, #191b22, #171920);
}
.title-col-right { background: linear-gradient(180deg, #181a21, #15171d); }

/* 文本输入：字数统计 + 划重点工具栏 */
.ctrl-label-row {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.char-counter {
    font-size: 11px; color: var(--text-tertiary);
    background: #24262e; padding: 2px 8px; border-radius: 10px;
    border: 1px solid var(--border-color);
}
.ctrl-textarea {
    width: 100%; min-height: 86px; resize: vertical;
    background: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 10px 12px; font-size: 13px; line-height: 1.55;
    font-family: inherit;
}
.ctrl-textarea:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(15,195,160,.12); }

.hl-toolbar {
    margin-top: 8px; display:flex; align-items:center; gap:6px; flex-wrap: wrap;
    padding: 8px 10px; background: #1f2129;
    border: 1px solid var(--border-color); border-radius: 8px;
}
.hl-toolbar-label { font-size: 12px; color: var(--text-secondary); margin-right: 4px; font-weight: 600; }
.hl-chip {
    padding: 3px 10px; border-radius: 6px; border: none;
    font-size: 12px; font-weight: 700; cursor:pointer; user-select: none;
    transition: transform .1s, box-shadow .15s;
}
.hl-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.hl-chip.hl-red    { background: #ff2d55; color:#fff; }
.hl-chip.hl-yellow { background: #ffcc00; color:#1a1b1f; }
.hl-chip.hl-green  { background: #0fc3a0; color:#fff; }
.hl-chip.hl-blue   { background: #1890ff; color:#fff; }
.hl-chip.hl-outline{ background: transparent; color:#fff; border: 1px solid #e2e8f0; }
.hl-chip.hl-clear  { background: #2a2d37; color:#b7bdc9; border:1px solid var(--border-color); }
.hl-hint { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }

/* ----- 样式预设分类 tab ----- */
.preset-tabs {
    display:flex; background: #1f2129;
    border:1px solid var(--border-color);
    border-radius: 8px; padding: 3px; margin-bottom: 10px;
}
.preset-tab {
    flex:1; padding:7px 8px;
    background: transparent; border: none;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 600;
    border-radius: 6px; cursor: pointer; transition: all .15s;
}
.preset-tab:hover { color: var(--text-primary); }
.preset-tab.active {
    background: linear-gradient(180deg, rgba(15,195,160,.25), rgba(15,195,160,.1));
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(15,195,160,.3);
}

.preset-grid {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 420px; overflow-y: auto;
    padding: 4px 2px 4px 0;
}
.preset-card {
    background: linear-gradient(180deg, #23252e, #1c1e25);
    border: 1px solid var(--border-color);
    border-radius: 10px; padding: 10px 10px 8px;
    cursor: pointer; transition: all .15s;
    position: relative; overflow: hidden;
}
.preset-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.preset-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(15,195,160,.4); }
.preset-card .pc-swatch {
    height: 46px; display:flex; align-items:center; justify-content:center;
    border-radius: 6px; font-size: 14px; font-weight: 800;
    overflow: hidden;
}
.preset-card .pc-name {
    font-size: 11px; color: var(--text-secondary);
    margin-top: 6px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-card .pc-del {
    position: absolute; top:4px; right: 4px;
    width: 18px; height: 18px; border-radius: 50%;
    border: none; background: rgba(255,77,79,.85); color:#fff;
    font-size: 11px; line-height: 1; display:none; cursor: pointer;
    align-items: center; justify-content: center;
}
.preset-card.mine:hover .pc-del { display: flex; }
.preset-empty {
    grid-column: 1 / -1;
    text-align:center; padding: 22px 10px;
    color: var(--text-tertiary); font-size: 12px;
    background: #1c1e25; border-radius: 10px;
    border: 1px dashed var(--border-color);
}

/* ----- 右侧精细参数：字号/加粗/斜体/主色 inline ----- */
.mini-toggle {
    display:inline-flex; align-items:center; gap:4px;
    font-size: 11px; color: var(--text-secondary);
    margin-left: 8px; padding: 2px 6px;
    background: #24262e; border-radius: 4px;
    cursor: pointer; white-space: nowrap;
}
.mini-toggle input { margin: 0; }
.mini-toggle span { font-weight: 500; }

.style-btn-row { display: flex; gap: 6px; }
.style-btn {
    flex:1; padding: 8px 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px; cursor: pointer;
    color: var(--text-secondary); font-size: 15px;
    transition: all .15s;
}
.style-btn:hover { color: var(--text-primary); }
.style-btn.active {
    background: rgba(15,195,160,.18);
    color: var(--accent); border-color: var(--accent-dim);
    box-shadow: inset 0 0 0 1px rgba(15,195,160,.25);
}

.color-row-inline {
    display:flex; align-items:center; gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px; padding: 3px 8px 3px 4px;
}
.color-row-inline .ctrl-color { width: 34px; height: 28px; border:none; padding:0; background: transparent; cursor: pointer; }
.color-row-inline span { font-size: 12px; color: var(--text-secondary); font-family: Consolas, monospace; }

.range-val { color: var(--accent); font-weight: 600; font-family: Consolas, monospace; font-size: 11px; }

/* ----- 视觉增强（投影/描边）重构 ----- */
.effect-group {
    background: #1f2129; border: 1px solid var(--border-color);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
}
.effect-detail-row {
    display:flex; align-items:center; gap: 10px; margin-top: 8px;
}
.slider-label-mini { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.range-val-sm { color: var(--accent); font-weight: 600; font-family: Consolas, monospace; }

/* 标题面板本层面板内预览，缩小版 */
.feature-preview-sm {
    width: auto; border: 1px solid var(--border-color);
    border-radius: 10px; padding: 12px;
    background: #15171d;
    margin-top: 4px;
}
.feature-preview-sm .preview-box { min-height: 160px; background: #0c0d10; border: 1px dashed #2e313a; }
.feature-preview-sm .preview-label { font-size: 11px; margin-bottom: 8px; }

/* 划重点 span 样式（预览） */
.hl-red, .hl-yellow, .hl-green, .hl-blue, .hl-outline { border-radius: 4px; padding: 1px 6px; margin: 0 2px; display: inline-block; }
.hl-red     { background:#ff2d55; color:#fff; }
.hl-yellow  { background:#ffcc00; color:#1a1b1f; }
.hl-green   { background:#0fc3a0; color:#fff; }
.hl-blue    { background:#1890ff; color:#fff; }
.hl-outline { color:#fff; -webkit-text-stroke: 0.5px #000; background: rgba(255,255,255,.05); }

/* apply bar 填充 */
.apply-bar-spacer { flex: 1; }

/* ================================================================
   右侧预览区：多层标题叠加层
   ================================================================ */
.pv-title-layer {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 3;
    display: flex; flex-direction: column;
}
.pv-title-layer.top    { justify-content: flex-start; padding-top: 18px; }
.pv-title-layer.center { justify-content: center; }
.pv-title-layer.bottom { justify-content: flex-end; padding-bottom: 60px; }

.pv-title-item {
    padding: 2px 16px; text-align: center;
    transition: all .2s;
    word-break: break-word;
    max-width: 100%;
}

/* 顶栏预览工具栏真实化（select + 按钮 hover） */
.pt-size {
    display:flex; align-items:center; gap:6px;
    padding: 4px 10px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px; color: var(--text-primary);
}
.pt-size select {
    background: transparent; border: none;
    color: var(--text-primary); font-size: 12px;
    outline: none; cursor: pointer;
}
.pt-size select option { background: #1a1b1f; color: var(--text-primary); }
.pt-voice, .pt-music {
    display:flex; align-items:center; gap:6px;
    padding: 4px 12px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px; font-size: 12px; cursor: pointer;
    color: var(--text-primary); transition: all .15s;
}
.pt-voice:hover, .pt-music:hover { border-color: var(--accent-dim); background: rgba(15,195,160,.08); }
.pt-save-tpl {
    display:flex; align-items:center; gap:6px;
    padding: 5px 12px; border: 1px solid rgba(15,195,160,.45);
    background: rgba(15,195,160,.14); color: var(--accent);
    border-radius: 18px; cursor: pointer;
    font-size: 12px; font-weight: 600; transition: all .15s;
}
.pt-save-tpl:hover { background: rgba(15,195,160,.25); }
.chip-new-small {
    background: #ff2d55; color:#fff;
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    letter-spacing: .5px;
}
.pt-badge {
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 0 5px; border-radius: 8px; min-width: 16px; text-align:center;
    line-height: 16px; height: 16px; display:inline-flex; align-items:center; justify-content:center;
}

/* 响应式：窄屏标题面板单列 */
@media (max-width: 1200px) {
    .title-grid { grid-template-columns: 1fr; }
    .title-col-left { border-right: none; border-bottom: 1px solid var(--border-color); }
}

/* ================================================================
   镜头模块升级：分段解说文案输入 + 右下素材池面板
   ================================================================ */

/* --- 镜头卡片内：解说文案 textarea --- */
.shot-narration {
    flex: 1;
    min-width: 0;
    min-height: 28px;
    max-height: 80px;
    resize: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.45;
    font-family: inherit;
    overflow: hidden;
    transition: border-color .15s;
}
.shot-narration:focus {
    outline: none;
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 2px rgba(15,195,160,.1);
}
.shot-narration::placeholder {
    color: var(--text-tertiary);
    font-size: 11px;
}
.shot-row.active .shot-narration {
    border-color: rgba(15,195,160,.3);
}

/* --- 右下：当前镜头素材池面板 --- */
.shot-pool-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1c23, #15171d);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 2px;
}
.spp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #1e2028, #1a1c23);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.spp-title {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--text-primary); font-weight: 600;
}
.spp-icon { font-size: 15px; }
.spp-shot-num { color: var(--accent); }
.spp-count {
    font-size: 11px; color: var(--text-secondary);
    background: #24262e; padding: 2px 8px; border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-left: 4px;
}
.spp-stats {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
}
.spp-stat-item { font-size: 11px; color: var(--text-tertiary); }
.spp-stat-item strong { color: var(--text-secondary); font-weight: 600; }
.spp-actions {
    display: flex; gap: 6px;
}
.spp-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: rgba(15,195,160,.08);
    color: var(--accent);
    border: 1px solid rgba(15,195,160,.25);
    border-radius: 6px;
    font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all .15s;
    white-space: nowrap;
}
.spp-btn:hover { background: rgba(15,195,160,.18); border-color: var(--accent); }
.spp-btn svg { flex-shrink: 0; }

/* 素材池网格区 */
.spp-grid {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-content: start;
}
.spp-card {
    background: #1e2028;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.spp-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.spp-card.selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px rgba(15,195,160,.35);
}
.spp-card-thumb {
    height: 56px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.spp-card-type {
    font-size: 18px; opacity: .8;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.spp-card-dur {
    position: absolute; bottom: 3px; right: 4px;
    font-size: 10px; font-weight: 700;
    color: #fff; background: rgba(0,0,0,.65);
    padding: 1px 5px; border-radius: 4px;
}
.spp-card-del {
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    border: none; background: rgba(255,77,79,.8); color: #fff;
    font-size: 10px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.spp-card:hover .spp-card-del { opacity: 1; }
.spp-card-name {
    font-size: 10px; color: var(--text-secondary);
    padding: 4px 6px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-top: 1px solid var(--border-color);
}

/* 空状态 */
.spp-empty {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    color: var(--text-tertiary);
}
.spp-empty-icon { font-size: 36px; opacity: .5; }
.spp-empty-text {
    font-size: 12px; text-align: center; line-height: 1.6;
}

/* 窄屏适配 */
@media (max-width: 1400px) {
    .spp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
    .preview-area-2 { width: 360px; }
    .spp-grid { grid-template-columns: repeat(2, 1fr); }
}