@font-face {
    font-family: 'Gmarket Sans';
    src: url('./GmarketSansTTFMedium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

:root {
    --bg-dark: #0d0f12;
    --bg-panel: #171a21;
    --bg-panel-hover: #1c202a;
    --border-color: #2b2f3a;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --soft: #1e222d;
    --soft-hover: #262b38;
    --accent: #9a2a2a;
    --accent-hover: #8c2525;
    --yellow: #f5a623;
    --on: #10b981;
    --segment-on: #28a745;
    --off: #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { color: inherit; }
body.dark-theme {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 300;
    height: 100vh;
    overflow: hidden;
}
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 20px;
    min-height: 76px;
    padding: 0 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    z-index: 100;
}
.app-header h1 { font-family: 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 300; letter-spacing: -.5px; }
.app-brand-title { display: flex; margin: 0; align-items: center; gap: 0; white-space: nowrap; }
.app-brand-title img { display: block; width: auto; height: 48px; margin-right: -8px; object-fit: contain; }
.header-status-slot { display: flex; min-width: 0; align-items: center; justify-content: center; overflow: hidden; color: var(--on); font-size: 15px; font-weight: 300; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.header-controls { display: flex; align-items: center; gap: 8px; }
.header-edited-duration { display: inline-flex; height: 34px; flex: 0 0 auto; padding: 0 10px; align-items: center; gap: 7px; color: var(--yellow); background: rgba(6,8,12,.72); border: 1px solid rgba(245,166,35,.22); border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0,0,0,.38); font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-edited-duration-label { color: rgba(245,166,35,.78); font-size: 10px; font-weight: 500; }
.header-edited-duration strong { display: inline-flex; align-items: baseline; font-family: 'Gmarket Sans', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .5px; }
.header-edited-duration-milliseconds { margin-left: 1px; font-size: 10px; letter-spacing: .25px; opacity: .82; }
.main-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.panel { min-width: 0; height: 100%; overflow: hidden; }
.panel-left { flex: 0 0 520px; display: flex; flex-direction: column; background: var(--bg-panel); }
.panel-right { flex: 1; position: relative; display: flex; background: var(--bg-dark); container-type: inline-size; }
.resizer { flex: 0 0 3px; background: var(--border-color); cursor: col-resize; z-index: 10; }
.resizer:hover, body.is-resizing .resizer { background: var(--accent); }
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 66px;
    padding: 12px 16px;
    background: #18181b;
    border-bottom: 1px solid var(--border-color);
}
.toolbar-title { font-size: 14px; font-weight: 500; }
.toolbar-subtitle { margin-top: 3px; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sheet-action-stack { display: flex; flex-shrink: 0; flex-direction: column; gap: 5px; margin-left: 0; }
.btn.sequence-image-add-toolbar { flex-shrink: 0; align-self: center; height: 28px; margin-left: 0; padding: 0 8px; color: #fff; font-size: 11px; font-weight: 300; line-height: 1; white-space: nowrap; }
.sequence-image-add-toolbar { background: #1e293b; border: 1px solid #475569; }
.sequence-image-add-toolbar:hover:not(:disabled) { background: #334155; border-color: #64748b; }
.sheet-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0; overflow: hidden; background: var(--soft); border: 1px solid var(--border-color); border-radius: 4px; }
.sheet-actions-label { display: inline-flex; width: 90px; height: 26px; padding: 0 6px; align-items: center; color: var(--text-muted); border-right: 1px solid var(--border-color); font-size: 11px; white-space: nowrap; }
.sheet-action-buttons { display: inline-flex; overflow: hidden; }
.sheet-action-btn { display: inline-flex; width: 27px; height: 26px; align-items: center; justify-content: center; color: var(--text-muted); background: var(--soft); border: 0; font-size: 11px; }
.sheet-action-btn + .sheet-action-btn { border-left: 1px solid var(--border-color); }
.sheet-action-btn:disabled { opacity: .55; cursor: not-allowed; }
.sheet-actions:has(.sheet-action-btn:not(:disabled)) { background: var(--accent); border-color: var(--accent); }
.sheet-actions:has(.sheet-action-btn:not(:disabled)) .sheet-actions-label { color: #fff; border-right-color: rgba(255,255,255,.18); }
.sheet-action-btn:not(:disabled) { color: #fff; background: var(--accent); cursor: pointer; }
.sheet-action-btn:not(:disabled) + .sheet-action-btn { border-left-color: rgba(255,255,255,.18); }
.sheet-action-btn:not(:disabled):hover { background: var(--accent-hover); }
.toolbar-aspect-select { flex: 0 1 138px; width: 138px; margin-left: auto; }
.toolbar-aspect-select .effect-type-trigger { min-height: 28px; height: 28px; padding: 4px 8px; font-size: 11px; }
.toolbar-aspect-select .effect-type-menu { min-width: 150px; }
.toolbar-aspect-select .effect-type-option { padding: 7px 9px; font-size: 11px; }
.toolbar-aspect-select .effect-type-option.active { color: var(--yellow); }
.toolbar-aspect-select .effect-type-trigger:disabled { opacity: .5; cursor: not-allowed; }
.btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 4px; font-size: 13px; font-weight: 300; cursor: pointer; transition: all .2s; }
.btn-top { height: 36px; padding: 0 16px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); font-weight: 300; }
.btn-top:hover:not(:disabled) { background: var(--soft-hover); }
.btn:disabled, .ctrl-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-yellow { color: #000; background: var(--yellow); font-weight: 300; }
.btn-yellow:hover:not(:disabled) { background: #e59613; }
.btn-yellow:disabled { color: rgba(255,255,255,.46); background: #76520f; opacity: 1; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.square { width: 36px; justify-content: center; }
.shortcut-menu-wrapper { position: relative; }
.shortcut-trigger { white-space: nowrap; }
.shortcut-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; width: 340px; padding: 10px; background: #18181b; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.55); animation: shortcut-popover-in 120ms ease-out; }
.shortcut-popover-header { padding: 4px 6px 10px; color: var(--text-main); border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 600; }
.shortcut-list { display: flex; flex-direction: column; padding-top: 6px; }
.shortcut-item { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 20px; padding: 3px 6px; color: var(--text-muted); font-size: 12px; }
.shortcut-item kbd { flex-shrink: 0; padding: 5px 7px 3px; color: var(--text-main); background: var(--bg-dark); border: 1px solid #45454d; border-bottom-width: 2px; border-radius: 5px; font-family: inherit; font-size: 12px; line-height: 1.2; white-space: nowrap; }
@keyframes shortcut-popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.work-storage-menu-wrapper { position: relative; }
.work-save-button-group { display: inline-flex; }
.work-save-button-group .btn-top { border-radius: 0; }
.work-save-button-group .work-save-main { border-radius: 4px 0 0 4px; }
.work-save-button-group .work-save-settings { width: 38px; padding: 0; border-left: 0; border-radius: 0 4px 4px 0; justify-content: center; }
.work-storage-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; width: 400px; padding: 10px; background: #18181b; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.55); animation: shortcut-popover-in 120ms ease-out; }
.work-storage-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 10px; border-bottom: 1px solid var(--border-color); }
.work-storage-header > div { display: flex; flex-direction: column; gap: 3px; }
.work-storage-header strong { color: var(--text-main); font-size: 13px; font-weight: 600; }
.work-storage-header span, .work-storage-meta { color: var(--text-muted); font-size: 11px; }
.work-storage-delete-all, .work-storage-delete { flex-shrink: 0; color: var(--text-main); background: var(--soft); border-color: var(--border-color); }
.work-storage-delete-all { height: 30px; padding: 0 10px; font-size: 11px; }
.work-storage-delete-all:disabled { opacity: .35; cursor: default; }
.work-storage-list { max-height: 320px; overflow-y: auto; scrollbar-width: none; }
.work-storage-list::-webkit-scrollbar { display: none; }
.work-storage-item { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.work-storage-item:last-child { border-bottom: 0; }
.work-storage-item-main { flex: 1; min-width: 0; cursor: pointer; }
.work-storage-item-main:hover .work-storage-name { color: var(--yellow); }
.work-storage-name { overflow: hidden; color: var(--text-main); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.work-storage-filename { overflow: hidden; margin-top: 3px; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.work-storage-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.work-storage-delete { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border-radius: 4px; justify-content: center; }
.work-storage-delete:hover { background: var(--soft-hover); }
.work-storage-empty { padding: 24px 8px; color: var(--text-muted); font-size: 12px; text-align: center; }
.segment-container { flex: 1; overflow-y: auto; padding: 24px 12px 40px; scrollbar-width: none; }
.segment-container::-webkit-scrollbar { display: none; }
.segment-item { position: relative; transition: transform 160ms cubic-bezier(.2,.8,.2,1); }
.segment-item + .segment-item { margin-top: 10px; }
.segment-item.effect-bridge::after { content: ''; position: absolute; left: 50%; top: -13px; bottom: -10px; z-index: 3; width: 2px; background: var(--yellow); border-radius: 999px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); pointer-events: none; transform: translateX(-50%); }
.segment-item.effect-bridge-end::before { content: ''; position: absolute; left: 50%; bottom: -8px; z-index: 4; width: 9px; height: 9px; box-sizing: border-box; border-right: 1.28px solid var(--yellow); border-bottom: 1.28px solid var(--yellow); filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); pointer-events: none; transform: translateX(-50%) rotate(45deg); transform-origin: center; }
.segment-slot {
    position: relative;
    min-height: 82px;
    padding: 12px;
    background: rgba(40,167,69,.05);
    border: 1px solid rgba(40,167,69,.72);
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.segment-slot.off { background: rgba(239,68,68,.045); border-color: rgba(239,68,68,.68); }
.segment-slot:hover { z-index: 2; background: rgba(40,167,69,.085); border-color: #28a745; }
.segment-slot.off:hover { background: rgba(239,68,68,.075); border-color: var(--off); }
.segment-slot.selected { border-color: #10b981; background: rgba(16,185,129,.1); box-shadow: 0 0 10px rgba(16,185,129,.2); }
.segment-slot.selected.off { border-color: var(--off); background: rgba(239,68,68,.07); box-shadow: 0 0 11px rgba(239,68,68,.16); }
.segment-slot.is-sequence { cursor: default; }
.segment-slot.is-dragging { border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56,189,248,.3), 0 0 10px rgba(56,189,248,.2); }
.sequence-drag-handle { display: grid; width: 20px; height: 34px; flex: 0 0 20px; place-items: center; color: rgba(148,163,184,.68); cursor: grab; font-size: 14px; touch-action: none; }
.sequence-drag-dots { width: 12px; height: 30px; background-image: radial-gradient(circle at center, currentColor 1.5px, transparent 1.7px); background-size: 6px 6px; }
.sequence-drag-handle:hover { color: var(--yellow); }
.sequence-drag-handle:active { cursor: grabbing; }
.sequence-drop-end { display: none; }
.segment-container.is-sequence-dragging .boundary-actions { visibility: hidden; pointer-events: none; }
.boundary-actions { transition: transform 160ms cubic-bezier(.2,.8,.2,1); }
.sequence-drag-route { position: fixed; z-index: 9998; overflow: hidden; pointer-events: none; }
.sequence-drag-route-path { fill: none; stroke: #38bdf8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); }
.sequence-drag-route-start { fill: #38bdf8; filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); }
.sequence-drag-route-merge-end { fill: transparent; stroke: #38bdf8; stroke-width: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); }
.sequence-drag-route-insert { stroke: #38bdf8; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); }
.sequence-drag-route-reject { stroke: #ef4444; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.68)); }
.sequence-drag-route.is-invalid .sequence-drag-route-path { stroke: #ef4444; }
.sequence-drag-route.is-invalid .sequence-drag-route-start { fill: #ef4444; }
.sequence-drag-route-reason { position: fixed; z-index: 9999; max-width: 220px; padding: 6px 9px; color: #fff; background: rgba(127,29,29,.96); border: 1px solid #ef4444; border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.42); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; white-space: nowrap; transform: translate(-50%, -50%); pointer-events: none; }
.sequence-transparent-drag-image { position: fixed; top: -2px; left: -2px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segment-slot.is-image { background: rgba(37,99,235,.08); border-color: rgba(59,130,246,.78); }
.segment-slot.is-image.off { background: rgba(30,64,175,.045); border-color: rgba(96,165,250,.42); }
.segment-slot.is-image:hover, .segment-slot.is-image.selected { background: rgba(37,99,235,.14); border-color: #60a5fa; box-shadow: 0 0 11px rgba(59,130,246,.2); }
.segment-slot.is-color { color: var(--matte-contrast); background-color: var(--matte-color); background-image: var(--matte-gradient, none); border-color: var(--matte-contrast); }
.segment-slot.is-color.off { background-color: var(--matte-color); background-image: var(--matte-gradient, none); border-color: var(--matte-contrast); opacity: .45; }
.segment-slot.is-color:hover, .segment-slot.is-color.selected { background-color: var(--matte-color); background-image: var(--matte-gradient, none); border-color: var(--yellow); box-shadow: 0 0 0 1px var(--matte-contrast), 0 0 11px rgba(245,166,35,.28); }
.segment-slot.is-color .slot-name, .segment-slot.is-color .slot-audio-name,
.segment-slot.is-color .segment-duration, .segment-slot.is-color .sequence-drag-handle { color: var(--matte-contrast); }
.slot-header { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; }
.slot-title { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.slot-title-row { display: flex; align-items: center; gap: 7px; }
.slot-name { max-width: 190px; overflow: hidden; padding: 2px 0; color: var(--text-main); background: transparent; border: 0; outline: 0; cursor: text; font-size: 13px; font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.slot-name-input { width: min(190px, 100%); padding: 2px 0; color: var(--text-main); background: transparent; border: 0; outline: 0; font-size: 13px; font-weight: 500; }
.slot-source { overflow: hidden; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.slot-audio-name { display: flex; max-width: 190px; align-items: center; gap: 5px; overflow: hidden; color: rgba(148,163,184,.72); font-size: 10px; font-weight: 300; text-overflow: ellipsis; white-space: nowrap; }
.slot-audio-name i { flex: 0 0 auto; font-size: 9px; }
.slot-main-badge { display: inline-flex; padding: 2px 6px; color: #17100a; background: var(--yellow); border-radius: 999px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.slot-ad-badge { display: inline-flex; padding: 2px 6px; color: #07131a; background: #38bdf8; border-radius: 999px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.slot-split-badge { position: absolute; top: -7px; right: -7px; z-index: 4; display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; color: #fff; background: #dc2626; border: 0; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; }
.time-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.time-inputs { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.time-inputs.is-unlinked { gap: 2px; }
.slot-time-separator { color: var(--text-muted); font-size: 11px; }
.time-input-group { display: flex; align-items: stretch; overflow: hidden; background: #18181b; border: 1px solid var(--border-color); border-radius: 4px; transition: border-color .2s; }
.time-input-group:focus-within { border-color: var(--yellow); }
.time-input { width: 100px; padding: 4px 6px; color: var(--text-main); background: transparent; border: 0; outline: 0; caret-color: var(--yellow); font-family: monospace; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.segment-slot .time-input { font-family: 'Gmarket Sans', sans-serif; font-weight: 500; }
.time-input.is-locked { color: #64748b; cursor: not-allowed; caret-color: transparent; }
.time-input::selection { color: #000; background: var(--yellow); }
.link-btn { display: flex; align-items: center; justify-content: center; padding: 0 2px; color: var(--text-muted); background: transparent; border: 0; outline: 0; cursor: pointer; font-size: 11px; transition: color .15s, opacity .15s; }
.link-btn:hover { color: var(--text-main); }
.link-btn.is-unlinked { color: var(--text-main); }
.link-btn:not(.is-unlinked) svg { opacity: .32; }
.segment-duration { min-width: 66px; color: var(--text-muted); font-family: 'Gmarket Sans', sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.segment-effect-summary { position: absolute; left: 50%; z-index: 4; display: flex; align-items: center; gap: 10px; color: var(--yellow); font-size: 10px; font-weight: 300; line-height: 1; white-space: nowrap; transform: translateX(-50%); }
.segment-effect-summary.is-start { top: 6px; }
.segment-effect-summary.is-end { bottom: 6px; }
.segment-effect-track { display: inline-flex; align-items: center; gap: 4px; }
.boundary-actions { position: relative; z-index: 5; display: flex; height: 26px; margin: -7px 0; align-items: center; justify-content: center; gap: 6px; opacity: 0; }
.boundary-actions:hover, .boundary-actions:focus-within { opacity: 1; }
.boundary-actions.is-source-mode { pointer-events: none; }
.boundary-actions.is-source-mode:hover, .boundary-actions.is-source-mode:focus-within { opacity: 0; }
.boundary-actions::before { content: ''; position: absolute; left: 8px; right: 8px; z-index: 0; height: 1px; background: #3a404c; }
.boundary-actions.is-leading, .boundary-actions.is-trailing { margin-top: -13px; margin-bottom: -13px; }
.inter-segment-actions, .effect-boundary-action { position: relative; z-index: 2; display: flex; height: 100%; align-items: center; justify-content: center; }
.inter-segment-btn, .effect-boundary-btn { display: inline-flex; min-width: 86px; height: 26px; padding: 0 11px; align-items: center; justify-content: center; gap: 5px; color: var(--text-muted); background: var(--bg-panel); border: 1px solid #47505f; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 300; white-space: nowrap; transition: background-color 120ms ease; }
.inter-segment-btn:hover, .inter-segment-btn:focus-visible, .effect-boundary-btn:hover, .effect-boundary-btn:focus-visible { color: var(--text-muted); background: #1c202a; outline: none; }
.file-picker-input { display: none; }
.empty-state { margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--text-muted); text-align: center; line-height: 1.55; }
.empty-state i { color: #444; }
.empty-state.file-drop-empty { width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; }
.panel-right.drag-over::after { content: ''; position: absolute; inset: 10px; border: 3px dotted var(--yellow); border-radius: 16px; pointer-events: none; z-index: 999; }
.video-wrapper { display: flex; flex: 1; min-width: 0; flex-direction: column; background: #000; }
.playback-toolbar { position: relative; z-index: 72; display: flex; flex: 0 0 48px; min-width: 0; align-items: stretch; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); }
.play-mode-switch.play-mode-switch-top { align-self: center; margin-left: 0; border-left: 0; border-radius: 0 5px 5px 0; }
.play-mode-switch-top .mode-btn:first-child { border-radius: 0 3px 3px 0; }
.source-toolbar { display: flex; min-width: 0; flex: 1; align-items: stretch; gap: 10px; padding: 0 12px 0 8px; }
.source-tabs { display: flex; min-width: 0; flex: 1; align-self: stretch; align-items: flex-end; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.source-tabs::-webkit-scrollbar { display: none; }
.source-tab-nav { width: 24px; flex: 0 0 24px; align-self: center; height: 32px; padding: 0; color: var(--text-muted); background: transparent; border: 0; cursor: pointer; font-size: 10px; }
.source-tab-nav:hover:not(:disabled) { color: var(--text-main); background: rgba(255,255,255,.05); }
.source-tab-nav:disabled { opacity: .28; cursor: default; }
.source-tab { position: relative; bottom: -1px; display: inline-flex; min-width: 92px; max-width: 180px; height: 38px; padding: 0 14px; align-items: center; justify-content: center; gap: 7px; overflow: hidden; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 12px; white-space: nowrap; }
.source-tab span { overflow: hidden; text-overflow: ellipsis; }
.source-tab-name-input { min-width: 0; width: 86px; max-width: calc(100% - 20px); padding: 2px 0; color: var(--text-main); background: transparent; border: 0; outline: 0; font-size: 12px; text-align: center; }
.source-tab:hover { color: var(--text-main); background: rgba(255,255,255,.035); }
.source-tab:disabled { opacity: .38; cursor: default; }
.source-tab.active { color: inherit; background: transparent; border-color: var(--border-color); box-shadow: inset 0 1px 0 var(--yellow); }
.source-action-buttons { display: flex; flex-shrink: 0; align-self: center; gap: 6px; margin-left: auto; }
.source-add-btn, .source-delete-btn { flex-shrink: 0; }
.source-delete-btn { color: var(--text-muted); }
.source-delete-btn:hover:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); }
.video-main-area { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.video-inner { position: relative; display: inline-flex; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: hidden; }
.video-player { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; outline: 0; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.video-inner:empty::after { content: ''; }
.sequence-image-player { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; outline: 0; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.sequence-color-player { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; outline: 0; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.sequence-color-canvas { display: block; width: 100%; height: 100%; }
.video-inner.is-cover .video-player, .video-inner.is-cover .sequence-image-player { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.media-frame-outline { position: absolute; inset: 0; z-index: 10; box-sizing: border-box; border: 1px solid #38bdf8; box-shadow: inset 0 0 0 1px rgba(56,189,248,.16), 0 0 5px rgba(56,189,248,.28); pointer-events: none; }
.media-frame-segment-label { position: absolute; top: -1px; left: 50%; display: flex; max-width: calc(100% - 24px); padding: 5px 9px 6px 12px; align-items: center; gap: 6px; color: #0b1f33; background: #38bdf8; border-radius: 0 0 6px 6px; box-shadow: 0 3px 8px rgba(0,0,0,.32); font-size: 13px; font-weight: 600; line-height: 1.25; transform: translateX(-50%); white-space: nowrap; }
.media-frame-segment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.media-frame-transition-indicator { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: #38bdf8; background: #0b1f33; border: 0; border-radius: 50%; font-size: 10px; line-height: 1; }
.sequence-time-event-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.sequence-time-event-layer[hidden], .sequence-time-event-message[hidden], .sequence-time-event-more[hidden], .sequence-time-event-terminal[hidden] { display: none; }
.sequence-time-event-message { position: absolute; top: 16px; left: 50%; max-width: min(80%, 720px); padding: 7px 12px; color: #fff; background: rgba(4,11,24,.78); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.38); font-size: 13px; line-height: 1.45; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; transform: translateX(-50%); }
.video-inner.has-frame-outline-label .sequence-time-event-message { top: 48px; }
.sequence-time-event-more { position: absolute; top: 16px; right: 16px; padding: 7px 12px; color: #fff; background: rgba(4,11,24,.82); border: 1px solid rgba(255,255,255,.8); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.38); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.45; pointer-events: auto; }
.sequence-time-event-more:hover, .sequence-time-event-more:focus-visible { background: rgba(18,27,40,.94); border-color: #fff; outline: none; }
.sequence-time-event-terminal { position: absolute; left: 16px; bottom: 16px; z-index: 1; max-width: calc(100% - 32px); padding: 7px 10px; overflow: hidden; color: #86efac; background: rgba(2,6,12,.88); border: 1px solid rgba(148,163,184,.42); border-radius: 3px; box-shadow: 0 3px 12px rgba(0,0,0,.5); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; font-weight: 400; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.sequence-time-event-terminal::after { margin-left: 1px; color: #fff; content: '_'; }
.video-wrapper.no-media .video-inner { width: min(70%, 760px); aspect-ratio: 16 / 9; background: #08090b; border: 1px solid #20242d; }
.video-wrapper.no-media .video-player { visibility: hidden; }
.video-player-buffer { position: absolute; inset: 0; width: 100%; height: 100%; }
.split-preview-canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; outline: 0; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.video-inner.is-cover .split-preview-canvas { object-fit: cover; }
.split-preview-decoder { position: absolute; left: -2px; top: -2px; width: 1px; height: 1px; opacity: .001; pointer-events: none; }
.video-player.is-playback-active { z-index: 2; visibility: visible; opacity: 1; pointer-events: auto; }
.video-player.is-playback-standby { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; visibility: hidden; opacity: 0; pointer-events: none; }
.source-adjustment-filters { position: absolute; width: 0; height: 0; pointer-events: none; }
.source-color-compare-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.source-color-compare-canvas[hidden], .source-color-compare-divider[hidden] { display: none; }
.source-color-compare-divider { position: absolute; top: 0; bottom: 0; z-index: 44; width: 20px; margin-left: -10px; cursor: ew-resize; touch-action: none; }
.source-color-compare-divider::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.72), 0 0 6px rgba(0,0,0,.55); content: ''; transform: translateX(-50%); }
.source-adjustment-ui { position: absolute; top: 12px; left: 12px; z-index: 60; display: flex; align-items: flex-start; gap: 8px; pointer-events: auto; }
.source-adjustment-ui[hidden], .source-crop-panel[hidden], .source-color-panel[hidden], .source-crop-guide[hidden] { display: none; }
.source-adjustment-tools { display: flex; flex-direction: column; gap: 6px; }
.source-adjustment-tools button, .source-crop-panel button, .source-color-presets button, .source-adjustment-reset { min-width: 32px; height: 30px; padding: 0 8px; color: #e5e7eb; background: rgba(10,15,23,.88); border: 1px solid rgba(148,163,184,.45); border-radius: 4px; cursor: pointer; font: inherit; font-size: 11px; }
.source-adjustment-tools button { width: 32px; padding: 0; font-size: 13px; }
.source-adjustment-ui.is-edited #source-color-toggle.has-adjustment:not(.active) i { color: var(--yellow); }
.source-adjustment-tools button:hover, .source-crop-panel button:hover, .source-color-presets button:hover, .source-adjustment-reset:hover { border-color: var(--yellow); }
.source-adjustment-tools button.active, .source-crop-panel button.active, .source-color-presets button.active { color: #111827; background: var(--yellow); border-color: var(--yellow); }
.source-crop-panel { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; padding: 6px; background: rgba(4,9,16,.92); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(148,163,184,.35); border-radius: 5px; box-shadow: 0 5px 18px rgba(0,0,0,.4); }
.source-crop-panel button { background: rgba(10,15,23,.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.source-crop-panel button.active { background: rgba(245,166,35,.84); }
.source-color-panel { width: min(500px, calc(100vw - 100px)); padding: 8px; background: rgba(4,9,16,.92); border: 1px solid rgba(148,163,184,.35); border-radius: 5px; box-shadow: 0 5px 18px rgba(0,0,0,.4); }
html[lang="en"] .source-color-panel { width: min(560px, calc(100vw - 100px)); }
.source-adjustment-ui.is-color-comparing .source-color-panel { display: none; }
.split-layout-ui { position: absolute; top: 50%; left: 50%; z-index: 60; display: flex; flex-direction: column; align-items: center; pointer-events: auto; transform: translate(-50%, -50%); }
.split-layout-ui[hidden], .split-divider-settings[hidden], .split-preset-menu[hidden], .split-interpolation-menu[hidden] { display: none; }
.split-layout-toolbar { display: flex; padding: 3px; gap: 3px; background: rgba(4,9,16,.72); border: 1px solid rgba(148,163,184,.35); border-radius: 99px; box-shadow: 0 3px 10px rgba(0,0,0,.32); touch-action: none; }
.split-layout-ui.is-vertical-boundary .split-layout-toolbar { flex-direction: column; }
.split-layout-toolbar button { display: grid; width: 25px; height: 25px; padding: 0; place-items: center; color: #e5e7eb; background: rgba(31,41,55,.92); border: 1px solid rgba(148,163,184,.45); border-radius: 50%; cursor: pointer; font-size: 11px; }
.split-layout-toolbar button:not(:disabled):hover, .split-layout-toolbar button.active:not(:disabled) { color: #111827; background: var(--yellow); border-color: var(--yellow); }
.split-layout-toolbar button:disabled { opacity: .34; cursor: default; }
.split-layout-toolbar button:disabled:hover, .split-layout-toolbar button:disabled:focus-visible { color: #e5e7eb; background: rgba(31,41,55,.92); border-color: rgba(148,163,184,.45); outline: 0; }
#split-anchor-interpolation:disabled, #split-anchor-interpolation:disabled:hover, #split-anchor-interpolation:disabled:focus-visible { color: #e5e7eb; background: rgba(31,41,55,.92); border-color: rgba(148,163,184,.45); }
.split-preset-current-icon, .split-interpolation-current-icon { width: 15px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.split-preset-menu { position: absolute; top: calc(100% + 8px); left: 50%; display: flex; width: max-content; max-width: calc(100vw - 40px); padding: 6px; flex-wrap: nowrap; justify-content: flex-start; gap: 5px; overflow-x: auto; background: rgba(10,15,23,.96); border: 1px solid rgba(148,163,184,.36); border-radius: 8px; box-shadow: 0 5px 14px rgba(0,0,0,.4); scrollbar-width: thin; transform: translateX(-50%); }
.split-preset-option { display: grid; width: 42px; min-height: 34px; padding: 4px; place-items: center; color: #e5e7eb; background: rgba(31,41,55,.9); border: 1px solid rgba(148,163,184,.4); border-radius: 5px; cursor: pointer; }
.split-preset-option svg { width: 30px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.split-preset-icon-outline { stroke-width: 2px; vector-effect: non-scaling-stroke; }
.split-preset-icon-divider { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.split-preset-option:hover, .split-preset-option.active { color: #111827; background: var(--yellow); border-color: var(--yellow); }
.split-interpolation-menu { position: absolute; top: calc(100% + 8px); left: 50%; display: flex; width: max-content; padding: 6px; gap: 5px; background: rgba(10,15,23,.96); border: 1px solid rgba(148,163,184,.36); border-radius: 8px; box-shadow: 0 5px 14px rgba(0,0,0,.4); transform: translate(calc(-50% + var(--split-popup-shift-x, 0px)), var(--split-popup-shift-y, 0px)); }
.split-interpolation-menu.is-above { top: auto; bottom: calc(100% + 8px); }
.split-interpolation-menu.is-right { top: 50%; right: auto; left: calc(100% + 8px); transform: translate(var(--split-popup-shift-x, 0px), calc(-50% + var(--split-popup-shift-y, 0px))); }
.split-interpolation-menu.is-left { top: 50%; right: calc(100% + 8px); left: auto; transform: translate(var(--split-popup-shift-x, 0px), calc(-50% + var(--split-popup-shift-y, 0px))); }
.split-interpolation-option { display: grid; width: 36px; height: 30px; padding: 4px; place-items: center; color: #e5e7eb; background: rgba(31,41,55,.9); border: 1px solid rgba(148,163,184,.4); border-radius: 5px; cursor: pointer; }
.split-interpolation-option svg { width: 26px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.split-interpolation-option:hover, .split-interpolation-option.active { color: #111827; background: var(--yellow); border-color: var(--yellow); }
.split-focus-guides { position: absolute; inset: 0; z-index: 55; pointer-events: none; }
.split-focus-guides[hidden] { display: none; }
.split-focus-control { position: absolute; box-sizing: border-box; overflow: hidden; background: rgba(15,23,42,.78); border-radius: 999px; box-shadow: 0 2px 7px rgba(0,0,0,.38); pointer-events: auto; touch-action: none; }
.split-focus-control span { position: absolute; background: var(--yellow); border: 0; border-radius: 99px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.split-focus-control.is-horizontal { height: 14px; cursor: ew-resize; }
.split-focus-control.is-horizontal span { top: 3.5px; left: var(--focus-thumb-offset, 0); width: var(--focus-thumb-size, 7px); height: 7px; }
.split-focus-control.is-vertical { width: 14px; cursor: ns-resize; }
.split-focus-control.is-vertical span { top: var(--focus-thumb-offset, 0); left: 3.5px; width: 7px; height: var(--focus-thumb-size, 7px); }
.split-hidden-source-thumb { position: absolute; z-index: 4; display: grid; box-sizing: border-box; width: 26px; height: 18px; place-items: center; color: #111827; background: var(--yellow); border: 2px solid rgba(15,23,42,.92); box-shadow: 0 2px 7px rgba(0,0,0,.55); font-size: 9px; font-weight: 700; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); }
.split-hidden-source-thumb[hidden] { display: none; }
.split-hidden-source-thumb.is-height-hidden { width: 18px; height: 26px; }
.split-hidden-source-thumb.is-tab-right { border-radius: 0 9px 9px 0; }
.split-hidden-source-thumb.is-tab-left { border-radius: 9px 0 0 9px; }
.split-hidden-source-thumb.is-tab-down { border-radius: 0 0 9px 9px; }
.split-hidden-source-thumb.is-tab-up { border-radius: 9px 9px 0 0; }
.split-hidden-source-thumb.is-point-hidden { width: 24px; height: 18px; border-radius: 9px; }
.split-input-toolbar { position: absolute; display: flex; padding: 3px; gap: 3px; background: rgba(4,9,16,.78); border: 1px solid rgba(148,163,184,.35); border-radius: 99px; box-shadow: 0 3px 10px rgba(0,0,0,.38); pointer-events: auto; transform: translate(-100%, -100%); }
.split-input-toolbar > button { display: grid; width: 25px; height: 25px; padding: 0; place-items: center; color: #e5e7eb; background: rgba(31,41,55,.92); border: 1px solid rgba(148,163,184,.45); border-radius: 50%; cursor: pointer; font-size: 10px; }
.split-input-toolbar > button:hover, .split-input-toolbar > button:focus-visible { color: #111827; background: var(--yellow); border-color: var(--yellow); outline: 0; }
.split-input-toolbar > button:disabled { opacity: .38; cursor: default; }
.split-input-toolbar > button:disabled:hover { color: #e5e7eb; background: rgba(31,41,55,.92); border-color: rgba(148,163,184,.45); }
.split-input-fit-mode svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.split-input-toolbar button i { pointer-events: none; }
.split-input-toolbar button svg { pointer-events: none; }
.split-fit-mode-popover { position: absolute; right: 0; bottom: calc(100% + 7px); display: flex; gap: 4px; padding: 5px; background: rgba(4,9,16,.9); border: 1px solid rgba(148,163,184,.35); border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.38); }
.split-fit-mode-popover[hidden] { display: none; }
.split-fit-mode-option { display: grid; width: 34px; height: 29px; padding: 4px; place-items: center; color: #dbe4f0; background: rgba(31,41,55,.92); border: 1px solid rgba(148,163,184,.45); border-radius: 7px; cursor: pointer; }
.split-fit-mode-option:hover, .split-fit-mode-option:focus-visible, .split-fit-mode-option.active { color: #111827; background: var(--yellow); border-color: var(--yellow); outline: 0; }
.split-fit-mode-option svg { width: 24px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.split-volume-popover { position: absolute; right: 0; bottom: calc(100% + 7px); padding: 4px; background: rgba(4,9,16,.86); border: 1px solid rgba(148,163,184,.35); border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.38); }
.split-volume-popover[hidden] { display: none; }
.split-volume-control { position: relative; display: flex; box-sizing: border-box; align-items: center; gap: 10px; color: var(--yellow); background: rgba(15,23,42,.78); border-radius: 999px; pointer-events: auto; touch-action: none; }
.split-volume-control i { flex: 0 0 auto; width: 11px; font-size: 9px; text-align: center; pointer-events: none; }
.split-volume-value { width: 25px; flex: 0 0 auto; overflow: visible; color: #fff3c4; font-family: 'Gmarket Sans', sans-serif; font-size: 8px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: .25px; line-height: 1; text-align: right; pointer-events: none; }
.split-volume-track { position: relative; flex: 1 1 auto; background: linear-gradient(90deg, var(--yellow) 0 var(--volume-position, 100%), rgba(2,6,23,.72) var(--volume-position, 100%) 100%); border-radius: 99px; cursor: pointer; }
.split-volume-track span { position: absolute; width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }
.split-volume-control.is-horizontal { width: 128px; height: 26px; padding: 5px 11px; flex-direction: row; cursor: ew-resize; }
.split-volume-control.is-horizontal .split-volume-track { height: 3px; }
.split-volume-control.is-horizontal .split-volume-track span { top: -2.5px; left: calc(var(--volume-position, 100%) - 4px); }
.split-volume-control.is-vertical { width: 34px; padding: 8px 5px; flex-direction: column; cursor: ns-resize; }
.split-volume-control.is-vertical .split-volume-track { width: 3px; min-height: 12px; }
.split-volume-control.is-vertical .split-volume-track span { top: calc(100% - var(--volume-position, 100%) - 4px); left: -2.5px; }
.split-volume-control.is-vertical .split-volume-value { width: 100%; text-align: center; }
.split-divider-settings { position: absolute; top: calc(100% + 8px); left: 50%; display: flex; width: max-content; padding: 6px 8px; align-items: center; gap: 8px; color: #e5e7eb; background: rgba(10,15,23,.95); border: 1px solid rgba(148,163,184,.36); border-radius: 7px; box-shadow: 0 5px 14px rgba(0,0,0,.35); transform: translate(calc(-50% + var(--split-popup-shift-x, 0px)), var(--split-popup-shift-y, 0px)); }
.split-divider-settings.is-above { top: auto; bottom: calc(100% + 8px); }
.split-divider-settings.is-right { top: 50%; right: auto; left: calc(100% + 8px); transform: translate(var(--split-popup-shift-x, 0px), calc(-50% + var(--split-popup-shift-y, 0px))); }
.split-divider-settings.is-left { top: 50%; right: calc(100% + 8px); left: auto; transform: translate(var(--split-popup-shift-x, 0px), calc(-50% + var(--split-popup-shift-y, 0px))); }
.split-divider-settings label { display: flex; align-items: center; gap: 5px; font-size: 9px; white-space: nowrap; }
.split-divider-settings input[type="number"] { width: 30px; height: 20px; padding: 1px 3px; color: #e5e7eb; background: rgba(31,41,55,.9); border: 1px solid rgba(148,163,184,.38); border-radius: 4px; outline: 0; font: inherit; font-size: 9px; text-align: center; -moz-appearance: textfield; }
.split-divider-settings input[type="number"]::-webkit-inner-spin-button, .split-divider-settings input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.split-divider-settings input[type="number"]:focus { color: var(--yellow); border-color: var(--yellow); }
.split-divider-settings input[type="number"]::selection { color: #111827; background: var(--yellow); }
.split-divider-settings input[type="color"] { width: 27px; height: 20px; padding: 2px; background: rgba(31,41,55,.9); border: 1px solid rgba(148,163,184,.38); border-radius: 4px; cursor: pointer; }
.split-preview-canvas.is-boundary-ew { cursor: ew-resize; touch-action: none; }
.split-preview-canvas.is-boundary-ns { cursor: ns-resize; touch-action: none; }
.source-color-presets { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.source-color-presets::-webkit-scrollbar { display: none; }
.source-color-presets button { flex: 0 0 auto; white-space: nowrap; }
.source-color-presets .source-adjustment-reset { width: 30px; min-width: 30px; padding: 0; }
.source-color-presets .source-color-compare { width: 30px; min-width: 30px; margin-left: 6px; padding: 0; }
.source-color-presets .source-color-compare:disabled { opacity: .4; cursor: default; }
.source-color-sliders { display: grid; gap: 9px; padding: 3px 0; }
.source-color-sliders label { display: grid; min-height: 24px; grid-template-columns: 62px 1fr 24px; align-items: center; gap: 5px; color: #d1d5db; font-size: 11px; white-space: nowrap; }
.source-color-sliders input { width: 100%; height: 12px; margin: 0; padding: 2px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, rgba(239,68,68,.7) 0, rgba(239,68,68,.9) var(--range-progress, 50%), rgba(0,0,0,.25) var(--range-progress, 50%), rgba(0,0,0,.25) 100%); border: 1px solid rgba(255,255,255,.15); border-radius: 99px; box-shadow: 0 0 12px rgba(239,68,68,.18); cursor: pointer; outline: 0; }
.source-color-sliders input::-webkit-slider-runnable-track { height: 6px; background: transparent; border: 0; }
.source-color-sliders input::-moz-range-track { height: 6px; background: transparent; border: 0; }
.source-color-sliders input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4px; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: grab; transition: transform .15s, box-shadow .15s; }
.source-color-sliders input:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: 0 2px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px rgba(255,255,255,.1); transform: scale(1.2); }
.source-color-sliders input::-moz-range-thumb { width: 14px; height: 14px; box-sizing: border-box; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4); cursor: grab; }
.source-color-sliders input:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.2); }
.source-color-sliders output { color: #f8fafc; text-align: right; font-variant-numeric: tabular-nums; }
.source-adjustment-reset:disabled { opacity: .4; cursor: default; }
.source-crop-guide { position: absolute; z-index: 45; box-sizing: border-box; border: 2px solid var(--accent); background-image: linear-gradient(to right, transparent calc(33.333% - .5px), rgba(154,42,42,.72) 33.333%, transparent calc(33.333% + .5px)), linear-gradient(to right, transparent calc(66.666% - .5px), rgba(154,42,42,.72) 66.666%, transparent calc(66.666% + .5px)); box-shadow: 0 0 0 9999px rgba(0,0,0,.8); cursor: move; pointer-events: auto; touch-action: none; }
.source-crop-guide.is-source-playing { box-shadow: 0 0 0 9999px rgba(0,0,0,.9); }
.source-crop-guide::before, .source-crop-guide::after { position: absolute; inset: 33.333% 0 auto; border-top: 1px solid rgba(154,42,42,.72); content: ''; pointer-events: none; }
.source-crop-guide::after { top: 66.666%; }
.source-crop-guide > span { position: absolute; display: block; }
.source-crop-guide > [data-crop-handle="n"], .source-crop-guide > [data-crop-handle="s"] { left: 8px; right: 8px; height: 20px; cursor: ns-resize; }
.source-crop-guide > [data-crop-handle="n"] { top: -10px; }
.source-crop-guide > [data-crop-handle="s"] { bottom: -10px; }
.source-crop-guide > [data-crop-handle="e"], .source-crop-guide > [data-crop-handle="w"] { top: 8px; bottom: 8px; width: 20px; cursor: ew-resize; }
.source-crop-guide > [data-crop-handle="e"] { right: -10px; }
.source-crop-guide > [data-crop-handle="w"] { left: -10px; }
.source-crop-guide > [data-crop-handle="n"]::after, .source-crop-guide > [data-crop-handle="s"]::after, .source-crop-guide > [data-crop-handle="e"]::after, .source-crop-guide > [data-crop-handle="w"]::after { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; box-sizing: border-box; background: #fff; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,.45); content: ''; transform: translate(-50%, -50%); }
.source-crop-guide > [data-crop-handle="nw"], .source-crop-guide > [data-crop-handle="ne"], .source-crop-guide > [data-crop-handle="sw"], .source-crop-guide > [data-crop-handle="se"] { width: 12px; height: 12px; background: #fff; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,.45); }
.source-crop-guide > [data-crop-handle="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.source-crop-guide > [data-crop-handle="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.source-crop-guide > [data-crop-handle="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.source-crop-guide > [data-crop-handle="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.source-crop-guide.is-preview { border-width: 1px; background-image: none; cursor: default; pointer-events: none; }
.source-crop-guide.is-preview::before, .source-crop-guide.is-preview::after,
.source-crop-guide.is-preview > span { display: none; }
.sequence-overlay-source { display: flex; min-width: 0; flex: 1; height: 48px; padding: 6px 20px 6px 10px; align-items: stretch; justify-content: flex-start; }
.sequence-overlay-source > input[type="url"] { flex: 1; min-width: 0; padding: 0 12px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-right: 0; border-radius: 4px 0 0 4px; outline: 0; font-size: 12px; }
.sequence-overlay-source > input[type="url"]:focus { border-color: var(--yellow); }
.sequence-overlay-source-buttons { display: inline-flex; }
.sequence-overlay-source-buttons .btn { height: 100%; border-radius: 0; border-left: 1px solid rgba(0,0,0,.16); white-space: nowrap; }
.sequence-overlay-source-buttons .btn:last-child { border-radius: 0 4px 4px 0; }
.header-controls .text-overlay-open { white-space: nowrap; }
.sequence-overlay-stage { position: absolute; z-index: 20; overflow: hidden; pointer-events: none; }
.sequence-overlay-stage::after { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; content: ''; background-image: linear-gradient(to right, transparent calc(50% - .5px), var(--accent) 50%, transparent calc(50% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), var(--accent) 50%, transparent calc(50% + .5px)), repeating-linear-gradient(to right, rgba(255,255,255,.28) 0, rgba(255,255,255,.28) 1px, transparent 1px, transparent 5%), repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0, rgba(255,255,255,.28) 1px, transparent 1px, transparent 5%); }
.sequence-overlay-stage.is-dragging::after { display: block; }
.sequence-overlay-item { position: absolute; border: 2px solid transparent; cursor: move; pointer-events: auto; touch-action: none; user-select: none; }
.sequence-overlay-item:hover, .sequence-overlay-item.is-selected { border-color: var(--accent); }
.sequence-overlay-item img, .sequence-overlay-item canvas.sequence-overlay-animation { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.sequence-overlay-corner-preview { position: absolute; z-index: 0; box-sizing: border-box; border-style: solid; pointer-events: none; }
.sequence-overlay-corner-preview[hidden] { display: none; }
.sequence-overlay-corner-source-preview { position: absolute !important; inset: 0; z-index: 1; width: 100% !important; height: 100% !important; object-fit: fill; pointer-events: none; }
.sequence-overlay-corner-source-preview[hidden] { display: none; }
.sequence-overlay-item.is-chroma-picking canvas.sequence-overlay-animation { pointer-events: auto; cursor: crosshair; }
.sequence-overlay-delete { position: absolute; top: -10px; right: -10px; z-index: 3; display: grid; width: 20px; height: 20px; place-items: center; padding: 0 0 2px; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; }
.sequence-overlay-item:hover .sequence-overlay-delete, .sequence-overlay-item.is-selected .sequence-overlay-delete { opacity: 1; }
.sequence-overlay-duplicate { position: absolute; top: 14px; right: -10px; z-index: 3; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; opacity: 0; }
.sequence-overlay-item:hover .sequence-overlay-duplicate, .sequence-overlay-item.is-selected .sequence-overlay-duplicate { opacity: 1; }
.sequence-overlay-order { position: absolute; top: -10px; z-index: 3; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 8px; line-height: 1; opacity: 0; }
.sequence-overlay-order.is-forward { right: 14px; }
.sequence-overlay-order.is-backward { right: 38px; }
.sequence-overlay-item:hover .sequence-overlay-order, .sequence-overlay-item.is-selected .sequence-overlay-order { opacity: 1; }
.sequence-overlay-order:disabled { color: rgba(255,255,255,.4); cursor: default; }
.sequence-overlay-item:hover .sequence-overlay-order:disabled, .sequence-overlay-item.is-selected .sequence-overlay-order:disabled { opacity: .55; }
.sequence-overlay-edit { position: absolute; top: -10px; right: 62px; z-index: 3; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; opacity: 0; }
.sequence-overlay-item:hover .sequence-overlay-edit, .sequence-overlay-item.is-selected .sequence-overlay-edit { opacity: 1; }
.sequence-overlay-resize { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; box-sizing: border-box; background: #fff; border: 2px solid var(--accent); border-radius: 50%; cursor: nwse-resize; opacity: 0; }
.sequence-overlay-item:hover .sequence-overlay-resize, .sequence-overlay-item.is-selected .sequence-overlay-resize { opacity: 1; }
.sequence-overlay-edge-handle { position: absolute; z-index: 12; width: 16px; height: 16px; padding: 0; background: #fff; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.65); transform: translate(-50%, -50%); cursor: move; pointer-events: auto; touch-action: none; }
.sequence-overlay-edge-handle[hidden] { display: none; }
.sequence-overlay-opacity-toggle { position: absolute; left: -10px; top: -10px; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 1; opacity: 0; }
.sequence-overlay-item:hover .sequence-overlay-opacity-toggle, .sequence-overlay-item.is-selected .sequence-overlay-opacity-toggle { opacity: 1; }
.sequence-overlay-opacity { position: absolute; top: 0; left: 14px; z-index: 5; display: none; width: min(128px, calc(100% - 28px)); height: 18px; padding: 2px 7px; align-items: center; gap: 5px; color: #fff; background: var(--accent); border: 0; border-radius: 999px; box-shadow: none; transform: translateY(-50%); cursor: default; }
.sequence-overlay-opacity.is-open { display: flex; }
.sequence-overlay-opacity-value { position: relative; z-index: 3; width: 25px; flex: 0 0 auto; padding: 0; color: #fff3c4; background: transparent; border: 0; font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; text-shadow: none; }
.sequence-overlay-opacity-track { position: relative; z-index: 3; height: 100%; flex: 1; background: transparent; border: 0; box-shadow: none; }
.sequence-overlay-opacity-fill { display: none; }
.sequence-overlay-opacity input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; outline: 0; cursor: pointer; }
.sequence-overlay-opacity input::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-opacity input::-moz-range-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-opacity input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: 1px; appearance: none; -webkit-appearance: none; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-opacity input::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-fade-toggle { position: absolute; left: -10px; bottom: -10px; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 1; opacity: 0; }
.sequence-overlay-item:hover .sequence-overlay-fade-toggle, .sequence-overlay-item.is-selected .sequence-overlay-fade-toggle { opacity: 1; }
.sequence-overlay-fade { position: absolute; left: 14px; bottom: 0; z-index: 5; display: none; width: min(128px, calc(100% - 28px)); height: 18px; padding: 2px 7px; align-items: center; gap: 5px; color: #fff; background: var(--accent); border: 0; border-radius: 999px; box-shadow: none; transform: translateY(50%); cursor: default; }
.sequence-overlay-fade.is-open { display: flex; }
.sequence-overlay-fade-value { position: relative; z-index: 3; width: 25px; flex: 0 0 auto; color: #fff3c4; font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.sequence-overlay-fade-track { position: relative; z-index: 3; height: 100%; flex: 1; }
.sequence-overlay-fade input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; outline: 0; cursor: pointer; }
.sequence-overlay-fade input::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-fade input::-moz-range-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-fade input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: 1px; appearance: none; -webkit-appearance: none; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-fade input::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-radius-toggle { position: absolute; left: 14px; bottom: -10px; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; opacity: 0; }
.sequence-overlay-radius-toggle[hidden], .sequence-overlay-radius[hidden] { display: none; }
.sequence-overlay-item:hover .sequence-overlay-radius-toggle, .sequence-overlay-item.is-selected .sequence-overlay-radius-toggle { opacity: 1; }
.sequence-overlay-radius-icon { display: block; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 3px; }
.sequence-overlay-radius { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 7; display: none; width: min(260px, calc(100vw - 56px)); padding: 8px 10px; flex-direction: column; gap: 7px; box-sizing: border-box; color: #fff; background: rgba(132,25,30,.94); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; box-shadow: 0 5px 14px rgba(0,0,0,.35); transform: translateX(calc(-50% + var(--corner-panel-shift-x, 0px))); cursor: default; }
.sequence-overlay-radius.is-open { display: flex; }
.sequence-overlay-radius.opens-left { top: 50%; right: calc(100% + 14px); bottom: auto; left: auto; transform: translateY(calc(-50% + var(--corner-panel-shift-y, 0px))); }
.sequence-overlay-radius.opens-right { top: 50%; right: auto; bottom: auto; left: calc(100% + 14px); transform: translateY(calc(-50% + var(--corner-panel-shift-y, 0px))); }
.sequence-overlay-radius.opens-below { top: calc(100% + 14px); bottom: auto; transform: translateX(calc(-50% + var(--corner-panel-shift-x, 0px))); }
.sequence-overlay-radius-row, .sequence-overlay-radius-color-row { display: flex; min-height: 18px; align-items: center; gap: 6px; }
.sequence-overlay-radius-label { width: 58px; flex: 0 0 58px; overflow: hidden; color: #fff; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.sequence-overlay-radius-value { position: relative; z-index: 3; width: 25px; flex: 0 0 auto; color: #fff3c4; font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.sequence-overlay-radius-track { position: relative; z-index: 3; height: 14px; flex: 1; overflow: hidden; background: rgba(0,0,0,.28); border-radius: 999px; }
.sequence-overlay-radius input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; outline: 0; cursor: pointer; }
.sequence-overlay-radius input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-radius input[type="range"]::-moz-range-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-radius input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: 1px; appearance: none; -webkit-appearance: none; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-radius input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-radius-color { width: 34px; height: 18px; padding: 0; overflow: hidden; background: transparent; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; cursor: pointer; }
.sequence-overlay-radius-color:disabled { cursor: default; opacity: .35; }
.sequence-overlay-radius-alpha-track { position: relative; z-index: 3; width: 42px; height: 14px; flex: 0 0 42px; overflow: hidden; background: rgba(0,0,0,.28); border-radius: 999px; }
.sequence-overlay-radius-alpha-value { width: 24px; flex: 0 0 24px; color: #fff3c4; font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.sequence-overlay-radius-apply { min-width: 42px; height: 20px; margin-left: auto; padding: 0 8px; color: #fff; background: rgba(236,55,65,.92); border: 1px solid rgba(255,255,255,.32); border-radius: 4px; font-size: 9px; cursor: pointer; }
.sequence-overlay-radius-apply:disabled { color: rgba(255,255,255,.45); background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.12); cursor: default; }
.sequence-overlay-chroma-toggle { position: absolute; left: 38px; bottom: -10px; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: crosshair; font-size: 9px; line-height: 1; opacity: 0; }
.sequence-overlay-chroma-toggle[hidden] { display: none; }
.sequence-overlay-item:hover .sequence-overlay-chroma-toggle, .sequence-overlay-item.is-selected .sequence-overlay-chroma-toggle { opacity: 1; }
.sequence-overlay-chroma-toggle.has-key { background: var(--chroma-key-color, var(--accent)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
.sequence-overlay-chroma-toggle.is-picking { outline: 2px solid #fff; outline-offset: 2px; }
.sequence-overlay-loop-toggle { position: absolute; left: 38px; bottom: -10px; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: rgba(255,255,255,.62); background: rgba(95,20,25,.94); border: 1px solid rgba(190,55,62,.72); border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; opacity: 0; }
.sequence-overlay-loop-toggle.has-chroma { left: 62px; }
.sequence-overlay-loop-toggle[hidden] { display: none; }
.sequence-overlay-item:hover .sequence-overlay-loop-toggle, .sequence-overlay-item.is-selected .sequence-overlay-loop-toggle { opacity: 1; }
.sequence-overlay-loop-toggle.active { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: none; }
.sequence-overlay-speed-toggle { position: absolute; left: 14px; bottom: -10px; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 50%; cursor: pointer; font-size: 8px; line-height: 1; opacity: 0; }
.sequence-overlay-speed-toggle.has-chroma { left: 86px; }
.sequence-overlay-speed-toggle[hidden] { display: none; }
.sequence-overlay-item:hover .sequence-overlay-speed-toggle, .sequence-overlay-item.is-selected .sequence-overlay-speed-toggle { opacity: 1; }
.sequence-overlay-speed { position: absolute; left: 38px; bottom: 0; z-index: 9; display: flex; width: min(128px, calc(100% - 38px)); height: 18px; padding: 2px 7px; align-items: center; gap: 5px; color: #fff; background: var(--accent); border: 0; border-radius: 999px; box-shadow: none; transform: translateY(50%); cursor: default; }
.sequence-overlay-speed[hidden] { display: none; }
.sequence-overlay-speed-track { position: relative; z-index: 3; height: 100%; flex: 1; }
.sequence-overlay-speed-value { position: relative; z-index: 3; width: 25px; flex: 0 0 auto; color: #fff3c4; font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.sequence-overlay-speed input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; outline: 0; cursor: pointer; }
.sequence-overlay-speed input::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-speed input::-moz-range-track { height: 100%; background: transparent; border: 0; }
.sequence-overlay-speed input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: 1px; appearance: none; -webkit-appearance: none; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-speed input::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: 0; border-radius: 50%; box-shadow: none; }
.sequence-overlay-generation { position: absolute; inset: 0; z-index: 20; display: flex; box-sizing: border-box; min-width: 0; align-items: center; justify-content: center; gap: 7px; padding: 8px; overflow: hidden; color: #fff; background: rgba(8,11,16,.78); backdrop-filter: blur(2px); border-radius: inherit; cursor: wait; font-size: 11px; line-height: 1.3; text-align: center; pointer-events: auto; }
.sequence-overlay-generation[hidden] { display: none; }
.sequence-overlay-generation-spinner { width: 16px; height: 16px; flex: 0 0 16px; box-sizing: border-box; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--yellow); border-radius: 50%; animation: sequence-overlay-generation-spin .8s linear infinite; }
.sequence-overlay-generation-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@keyframes sequence-overlay-generation-spin { to { transform: rotate(360deg); } }
.sequence-overlay-stage.is-readonly .sequence-overlay-item { border-color: transparent; cursor: default; pointer-events: none; }
.sequence-overlay-stage.is-readonly .sequence-overlay-delete,
.sequence-overlay-stage.is-readonly .sequence-overlay-duplicate,
.sequence-overlay-stage.is-readonly .sequence-overlay-edit,
.sequence-overlay-stage.is-readonly .sequence-overlay-order,
.sequence-overlay-stage.is-readonly .sequence-overlay-resize,
.sequence-overlay-stage.is-readonly .sequence-overlay-edge-handle,
.sequence-overlay-stage.is-readonly .sequence-overlay-opacity-toggle,
.sequence-overlay-stage.is-readonly .sequence-overlay-opacity,
.sequence-overlay-stage.is-readonly .sequence-overlay-fade-toggle,
.sequence-overlay-stage.is-readonly .sequence-overlay-fade,
.sequence-overlay-stage.is-readonly .sequence-overlay-radius-toggle,
.sequence-overlay-stage.is-readonly .sequence-overlay-radius,
.sequence-overlay-stage.is-readonly .sequence-overlay-chroma-toggle,
.sequence-overlay-stage.is-readonly .sequence-overlay-loop-toggle,
.sequence-overlay-stage.is-readonly .sequence-overlay-speed-toggle,
.sequence-overlay-stage.is-readonly .sequence-overlay-speed { display: none; }
.custom-video-controls { position: relative; z-index: 50; flex: 0 0 auto; width: 100%; padding: 15px 20px; background: rgba(23,26,33,.85); backdrop-filter: blur(5px); border-top: 1px solid var(--border-color); }
.waveform-panel { position: relative; width: 100%; height: 60px; margin-bottom: 10px; overflow: hidden; background: rgba(0,0,0,.4); border-radius: 4px; cursor: pointer; }
#waveform-canvas, #waveform-ui { position: absolute; inset: 0; width: 100%; height: 100%; }
#waveform-ui { z-index: 2; }
.waveform-nav-btn { position: absolute; top: 0; z-index: 10; display: flex; width: 24px; height: 100%; align-items: center; justify-content: center; color: white; background: rgba(0,0,0,.4); border: 0; cursor: pointer; transition: background .2s; }
.waveform-nav-btn:hover { background: rgba(0,0,0,.8); }
.waveform-nav-btn.left { left: 0; border-right: 1px solid rgba(255,255,255,.1); }
.waveform-nav-btn.right { right: 0; border-left: 1px solid rgba(255,255,255,.1); }
.waveform-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: var(--text-muted); background: rgba(13,15,18,.7); font-size: 11px; pointer-events: none; }
.controls-top { --main-volume-rows: 0; --overlay-rows: 0; --bgm-rows: 0; --time-event-rows: 0; --time-event-track-top: 22px; --variable-track-top: 22px; --variable-track-height: 0px; --timeline-track-height: 18px; position: relative; width: 100%; height: 18px; margin-bottom: 13px; transition: height .15s ease; }
.controls-top.has-overlay-map { height: var(--timeline-track-height); }
.seek-progress-track { position: absolute; top: 1px; left: 0; width: 100%; height: 2px; overflow: hidden; background: rgba(255,255,255,.2); pointer-events: none; }
.seek-progress-value { width: 0; height: 100%; background: var(--yellow); }
.timeline-visualizer { position: absolute; top: 9px; left: 0; z-index: 3; width: 100%; height: 6px; overflow: visible; border-radius: 2px; pointer-events: none; }
.split-anchor-map { position: absolute; top: 6px; left: 0; z-index: 7; width: 100%; height: 12px; pointer-events: none; }
.split-anchor-map[hidden] { display: none; }
.split-anchor-marker { position: absolute; top: 3px; width: 6px; height: 6px; padding: 0; background: var(--yellow); border: 0; border-radius: 50%; box-shadow: none; cursor: ew-resize; pointer-events: auto; transform: translateX(-50%); touch-action: none; }
.split-anchor-marker.active { top: 0; width: 11px; height: 11px; background: var(--yellow); border: 2px solid #f8fafc; border-radius: 50% 50% 50% 0; box-shadow: 0 1px 4px rgba(0,0,0,.55); transform: translate(-50%, 0) rotate(-45deg); }
.timeline-block { position: absolute; top: 0; height: 100%; background: rgba(40,167,69,.8); border-right: 1px solid rgba(0,0,0,.45); }
.timeline-block.off { background: rgba(239,68,68,.88); }
.timeline-range-edge { position: absolute; top: -5px; z-index: 2; width: 9px; height: 16px; cursor: col-resize; pointer-events: auto; transform: translateX(-50%); }
.timeline-range-edge::after { position: absolute; top: 2px; bottom: 2px; left: 4px; width: 1px; content: ''; background: rgba(15,23,42,.95); }
.seek-bar { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 18px; background: transparent; cursor: pointer; }
.seek-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; background: transparent; opacity: 0; }
.seek-bar::-moz-range-thumb { width: 0; height: 0; border: 0; background: transparent; opacity: 0; }
.sequence-variable-track-scroll { position: absolute; top: var(--variable-track-top); left: 0; right: 0; display: flex; height: var(--variable-track-height); max-height: 180px; min-height: 0; flex-direction: column; gap: 3px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sequence-variable-track-scroll[hidden] { display: none; }
.sequence-variable-track-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sequence-variable-scroll-position { position: absolute; top: var(--variable-track-top); bottom: 0; left: -7px; z-index: 8; width: 3px; overflow: hidden; background: rgba(148,163,184,.14); border-radius: 2px; pointer-events: none; }
.sequence-variable-scroll-position[hidden] { display: none; }
.sequence-variable-scroll-position span { position: absolute; top: 0; left: 0; width: 100%; min-height: 18px; background: rgba(245,166,35,.86); border-radius: 2px; box-shadow: 0 0 4px rgba(245,166,35,.35); }
.sequence-overlay-map { display: contents; }
.sequence-overlay-map-row { display: flex; height: 27px; flex-direction: column; gap: 2px; }
.sequence-overlay-map-label { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: 9px; line-height: 11px; }
.sequence-overlay-map-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sequence-overlay-map-time { flex-shrink: 0; color: rgba(148,163,184,.82); font-family: 'Gmarket Sans', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sequence-overlay-map-row.is-selected .sequence-overlay-map-name,
.sequence-overlay-map-row.is-selected .sequence-overlay-map-time { color: var(--yellow); }
.sequence-overlay-map-track { position: relative; display: block; width: 100%; height: 12px; flex-shrink: 0; background: rgba(255,255,255,.07); border-radius: 2px; }
.sequence-overlay-map-range { position: absolute; top: 1px; height: 10px; min-width: 2px; background: rgba(239,68,68,.7); border-radius: 2px; }
.sequence-overlay-map-range.is-movable { cursor: grab; touch-action: none; }
.sequence-overlay-map-range.is-movable:active { cursor: grabbing; }
.sequence-overlay-map-handle { position: absolute; top: 0; width: 9px; height: 10px; background: transparent; border: 0; cursor: ew-resize; touch-action: none; }
.sequence-overlay-map-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: rgba(15,23,42,.86); }
.sequence-overlay-map-handle.is-start { left: -4px; }
.sequence-overlay-map-handle.is-end { right: -4px; }
.sequence-overlay-map.is-readonly .sequence-overlay-map-handle { pointer-events: none; }
.sequence-overlay-map-cursor { position: absolute; top: -1px; bottom: -1px; z-index: 4; width: 1px; background: var(--yellow); box-shadow: 0 0 3px rgba(245,166,35,.7); pointer-events: none; transform: translateX(-.5px); }
.sequence-bgm-map { display: contents; }
.sequence-bgm-map-row { display: flex; height: 49px; min-width: 0; flex-direction: column; gap: 2px; }
.sequence-bgm-map-label { display: flex; height: 14px; min-width: 0; align-items: center; gap: 8px; color: var(--text-muted); font-size: 9px; line-height: 12px; }
.sequence-bgm-map-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sequence-bgm-map-meta { flex-shrink: 0; margin-left: auto; color: rgba(148,163,184,.82); font-family: 'Gmarket Sans', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sequence-bgm-map-row.is-selected .sequence-bgm-map-name,
.sequence-bgm-map-row.is-selected .sequence-bgm-map-meta { color: var(--yellow); }
.sequence-bgm-map-track { position: relative; display: block; height: 32px; flex: 1; overflow: visible; background: rgba(255,255,255,.07); border-radius: 2px; }
.sequence-bgm-volume-envelope { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sequence-bgm-volume-envelope-shape { fill: rgba(239,68,68,.08); }
.sequence-bgm-volume-wave { fill: none; stroke: rgba(248,79,79,.92); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sequence-bgm-volume-segment { position: absolute; top: 0; bottom: 0; z-index: 2; min-width: 2px; background: transparent; cursor: ns-resize; touch-action: none; }
.sequence-bgm-volume-segment:hover { background: rgba(255,255,255,.04); }
.sequence-bgm-volume-point { position: absolute; bottom: 0; z-index: 3; width: 1px; min-height: 5%; background: rgba(255,255,255,.88); cursor: ew-resize; pointer-events: auto; touch-action: none; transform: translateX(-.5px); }
.sequence-bgm-volume-point i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: #fff; border: 2px solid #ef4444; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,.7); transform: translateX(-50%); }
.sequence-bgm-map-handle { position: absolute; top: 0; bottom: 0; z-index: 4; width: 9px; background: transparent; border: 0; cursor: ew-resize; touch-action: none; transform: translateX(-50%); }
.sequence-bgm-map-handle::after { position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: rgba(15,23,42,.86); content: ''; }
.sequence-bgm-map-cursor { position: absolute; top: -1px; bottom: -1px; z-index: 4; width: 1px; background: var(--yellow); box-shadow: 0 0 3px rgba(245,166,35,.7); pointer-events: none; transform: translateX(-.5px); }
.sequence-bgm-map.is-readonly .sequence-bgm-map-handle,
.sequence-bgm-map.is-readonly .sequence-bgm-volume-segment,
.sequence-bgm-map.is-readonly .sequence-bgm-volume-point,
.sequence-main-volume-map { position: absolute; top: 22px; left: 0; right: 0; height: 49px; }
.sequence-main-volume-row { display: flex; height: 49px; min-width: 0; flex-direction: column; gap: 2px; }
.sequence-main-volume-label { display: flex; height: 14px; min-width: 0; align-items: center; gap: 8px; color: #86efac; font-size: 9px; line-height: 12px; }
.sequence-main-volume-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sequence-main-volume-normalize { display: inline-flex; height: 14px; flex: 0 0 auto; align-items: center; gap: 4px; padding: 0 5px; color: #bbf7d0; background: rgba(22,163,74,.13); border: 1px solid rgba(134,239,172,.3); border-radius: 3px; cursor: pointer; font: inherit; line-height: 12px; }
.sequence-main-volume-normalize:hover:not(:disabled) { color: #fff; background: rgba(22,163,74,.28); }
.sequence-main-volume-normalize:disabled { opacity: .38; cursor: default; }
.sequence-main-volume-meta { flex-shrink: 0; margin-left: auto; color: rgba(134,239,172,.82); font-family: 'Gmarket Sans', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sequence-main-volume-reset { height: 14px; flex: 0 0 auto; padding: 0 5px; color: #fecaca; background: rgba(239,68,68,.13); border: 1px solid rgba(248,113,113,.36); border-radius: 3px; cursor: pointer; font: inherit; line-height: 12px; }
.sequence-main-volume-reset:hover { color: #fff; background: rgba(239,68,68,.3); }
.sequence-main-volume-track { position: relative; display: block; height: 32px; flex: 1; overflow: visible; background: rgba(255,255,255,.07); border-radius: 2px; }
.sequence-main-volume-track::after { position: absolute; top: 50%; left: 0; right: 0; z-index: 1; height: 1px; background: rgba(134,239,172,.16); content: ''; pointer-events: none; }
.sequence-main-volume-envelope { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sequence-main-volume-envelope-shape { fill: rgba(22,163,74,.07); }
.sequence-main-volume-wave { fill: none; stroke: rgba(22,163,74,.76); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sequence-main-volume-segment { position: absolute; top: 0; bottom: 0; z-index: 2; min-width: 2px; cursor: ns-resize; touch-action: none; }
.sequence-main-volume-segment:hover { background: rgba(134,239,172,.06); }
.sequence-main-volume-point { position: absolute; bottom: 0; z-index: 3; width: 1px; min-height: 1px; background: rgba(220,252,231,.92); cursor: ew-resize; touch-action: none; transform: translateX(-.5px); }
.sequence-main-volume-point i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: #dcfce7; border: 2px solid #22c55e; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,.7); transform: translateX(-50%); }
.sequence-main-volume-cursor { position: absolute; top: -1px; bottom: -1px; z-index: 4; width: 1px; background: var(--yellow); box-shadow: 0 0 3px rgba(245,166,35,.7); pointer-events: none; transform: translateX(-.5px); }
.sequence-main-volume-map.is-readonly .sequence-main-volume-segment,
.sequence-main-volume-map.is-readonly .sequence-main-volume-point { pointer-events: none; }
.sequence-time-event-map { position: absolute; top: var(--time-event-track-top); left: 0; right: 0; height: 31px; }
.sequence-time-event-map-label { position: absolute; top: 0; left: 0; z-index: 3; color: #38bdf8; font-size: 9px; line-height: 11px; pointer-events: none; }
.sequence-time-event-map-track { position: absolute; left: 0; right: 0; bottom: 0; height: 17px; background: transparent; }
.sequence-time-event-map-track::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: rgba(125,211,252,.28); pointer-events: none; }
.sequence-time-event-range { position: absolute; top: 7px; height: 3px; min-width: 2px; background: #38bdf8; border: 0; border-radius: 2px; cursor: pointer; }
.sequence-time-event-range.is-script { top: 3px; width: 10px !important; min-width: 10px; height: 10px; background: transparent; border: 0; transform: translateX(-50%); }
.sequence-time-event-range.is-invalid { background: rgba(239,68,68,.65); border-color: #f87171; }
.sequence-time-event-range.is-selected { box-shadow: 0 0 0 1px rgba(255,255,255,.86); }
.sequence-time-event-handle { position: absolute; top: 50%; z-index: 3; width: 10px; height: 10px; background: var(--bg-panel); border: 2px solid #7dd3fc; border-radius: 50%; cursor: ew-resize; touch-action: none; transform: translate(-50%,-50%); }
.sequence-time-event-handle.is-start { left: 0; }
.sequence-time-event-handle.is-end { left: 100%; }
.sequence-time-event-range.is-script .sequence-time-event-handle { top: 50%; left: 50%; border-color: #7dd3fc; }
.sequence-time-event-range.is-script.is-invalid { background: transparent; }
.sequence-time-event-range.is-script.is-selected { box-shadow: none; }
.sequence-time-event-range.is-script.is-selected .sequence-time-event-handle { box-shadow: 0 0 0 1px rgba(255,255,255,.86); }
.sequence-time-event-range.is-invalid .sequence-time-event-handle { border-color: #f87171; }
.sequence-time-event-map-cursor { position: absolute; top: -1px; bottom: -1px; z-index: 5; width: 1px; background: var(--yellow); box-shadow: 0 0 3px rgba(245,166,35,.7); pointer-events: none; transform: translateX(-.5px); }
.time-event-add-btn { flex-shrink: 0; white-space: nowrap; }
.controls-bottom { position: relative; display: grid; grid-template-columns: max-content minmax(100px,1fr) max-content; align-items: center; gap: 12px; padding-top: 15px; }
.controls-left, .controls-right { display: flex; align-items: center; gap: 10px; }
.controls-right { min-width: max-content; justify-content: flex-end; }
.controls-center { position: relative; text-align: center; }
.button-group { display: inline-flex; overflow: hidden; background: var(--soft); border-radius: 4px; }
.button-group > button { border-radius: 0; }
.button-group > button + button { border-left: 1px solid var(--border-color); }
.button-group > .btn-yellow + .btn-yellow { border-left-color: rgba(0,0,0,.1); }
.source-range-actions { flex-shrink: 0; }
.source-range-actions .btn { flex-shrink: 0; padding: 6px 8px; font-size: 11px; white-space: nowrap; }
.source-range-actions .range-cancel-btn { width: 29px; justify-content: center; color: #fff; background: var(--accent); border-left-color: rgba(255,255,255,.16); }
.source-range-actions .range-cancel-btn:hover { background: var(--accent-hover); }
.source-range-cursor-duration { position: absolute; left: 50%; bottom: 100%; color: var(--yellow); font-family: 'Space Mono', monospace; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 300; line-height: 12px; pointer-events: none; text-align: center; text-shadow: 0 0 5px rgba(245,166,35,.24); transform: translateX(-50%); white-space: nowrap; }
.source-range-duration { position: relative; display: inline-flex; min-width: 108px; padding: 0 8px; align-items: center; justify-content: center; gap: 6px; color: #17100a; background: var(--yellow); border: 0; border-left: 1px solid rgba(0,0,0,.1); font-family: 'Space Mono', monospace; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 300; white-space: nowrap; }
.source-range-duration i { width: 9px; font-size: 8px; }
.range-end-icon { transform: rotate(180deg); }
.ctrl-btn { display: flex; align-items: center; justify-content: center; padding: 5px; color: var(--text-main); background: none; border: 0; cursor: pointer; font-size: 16px; transition: color .2s; }
.ctrl-btn:hover { color: var(--accent); }
.text-btn { min-width: 0; padding: 5px 8px; background: var(--soft); border-radius: 4px; font-size: 12px; font-weight: 300; }
.text-btn:hover { color: var(--text-main); background: var(--soft-hover); }
.ctrl-divider { width: 1px; height: 16px; margin: 0 5px; background: var(--border-color); }
.time-display { margin-left: 10px; color: var(--text-muted); font-family: 'Gmarket Sans', sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; }
.controls-center .time-display { margin-left: 0; }
.play-mode-switch, .fit-mode-switch, .accessory-toggle-switch { display: inline-flex; flex-shrink: 0; padding: 2px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 5px; }
.fit-mode-switch[hidden], .accessory-toggle-switch[hidden] { display: none; }
.mode-btn, .fit-mode-btn, .accessory-toggle-btn { min-height: 26px; padding: 4px 8px; color: var(--text-muted); background: transparent; border: 0; border-radius: 3px; cursor: pointer; font-size: 11px; }
.mode-btn.active, .fit-mode-btn.active, .accessory-toggle-btn.active { color: #17100a; background: var(--yellow); font-weight: 500; }
.frame-outline-toggle { display: inline-grid; width: 29px; min-height: 26px; margin-left: 2px; flex: 0 0 29px; place-items: center; color: var(--text-muted); background: transparent; border: 0; border-left: 1px solid var(--border-color); border-radius: 0 3px 3px 0; cursor: pointer; font-size: 15px; }
.frame-outline-toggle[hidden] { display: none; }
.frame-outline-toggle.active { color: #38bdf8; }
.context-menu { position: fixed; z-index: 1000; min-width: 220px; padding: 6px; background: #20242d; border: 1px solid #3a404c; border-radius: 7px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
#bgm-context-menu, #main-volume-context-menu { min-width: 265px; }
.context-menu-item, .context-toggle { display: flex; width: 100%; min-height: 34px; align-items: center; gap: 9px; padding: 7px 9px; color: var(--text-main); background: transparent; border: 0; border-radius: 4px; cursor: pointer; font-size: 12px; text-align: left; }
.context-menu-item:hover, .context-toggle:hover { background: var(--soft-hover); }
.context-menu-item.danger { color: #fca5a5; }
.context-menu-item.active { color: var(--yellow); }
.context-menu-divider { height: 1px; margin: 5px 4px; background: var(--border-color); }
.context-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-slider { position: relative; width: 32px; height: 18px; margin-left: auto; background: #4b5563; border-radius: 999px; transition: .15s; }
.toggle-slider::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; background: white; border-radius: 50%; transition: .15s; }
.context-toggle input:checked + .toggle-slider { background: rgba(239,68,68,.8); }
.context-toggle input:checked + .toggle-slider::after { transform: translateX(14px); }
.modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal-content { min-width: 320px; padding: 24px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.5); text-align: center; }
.modal-content h3 { margin-bottom: 8px; font-weight: 500; }
.modal-content p { margin-bottom: 20px; color: var(--text-muted); font-size: 13px; }
.main-audio-normalize-modal { display: flex; width: 340px; min-width: 340px; flex-direction: column; align-items: center; gap: 14px; cursor: wait; }
.main-audio-normalize-modal p { margin: 0; color: var(--text-main); font-variant-numeric: tabular-nums; }
.main-audio-normalize-spinner { width: 28px; height: 28px; box-sizing: border-box; border: 3px solid rgba(255,255,255,.16); border-top-color: var(--yellow); border-radius: 50%; animation: sequence-overlay-generation-spin .8s linear infinite; }
.main-audio-normalize-progress-track { width: 100%; height: 5px; overflow: hidden; background: rgba(255,255,255,.1); border-radius: 99px; }
.main-audio-normalize-progress-track span { display: block; width: 0; height: 100%; background: var(--yellow); border-radius: inherit; transition: width .12s linear; }
.text-overlay-modal { width: min(940px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; text-align: left; }
.text-overlay-modal h3 { text-align: center; }
.text-overlay-layout { display: grid; grid-template-columns: minmax(430px, 1.2fr) minmax(280px, .8fr); gap: 18px; margin: 20px 0; }
.text-overlay-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-content: start; gap: 10px; }
.text-overlay-controls .wide, .text-overlay-text-field { grid-column: 1 / -1; }
.text-overlay-text-field, .text-overlay-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 11px; }
.text-overlay-text-field small { margin-left: 5px; color: rgba(148,163,184,.72); font-weight: 300; }
.text-overlay-rich-text, .text-overlay-field input, .text-overlay-field select, .text-overlay-custom-font textarea { width: 100%; min-width: 0; min-height: 34px; padding: 7px 9px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-radius: 4px; outline: 0; }
.text-overlay-rich-text { min-height: 82px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.text-overlay-rich-text.is-placeholder::before { color: var(--text-muted); content: attr(data-placeholder); pointer-events: none; }
.text-overlay-rich-text::selection, ::highlight(yotei-text-overlay-selection) { color: #17100a; background: rgba(245,166,35,.82); }
.text-overlay-rich-text:focus, .text-overlay-field input:focus, .text-overlay-field select:focus, .text-overlay-custom-font textarea:focus { border-color: var(--yellow); }
.text-overlay-field input[type="color"], .text-overlay-shadow-fields input[type="color"] { height: 34px; padding: 3px; cursor: pointer; }
.text-overlay-custom-font { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: start; gap: 7px; }
.text-overlay-custom-font textarea { resize: vertical; font: inherit; font-size: 11px; line-height: 1.35; }
.text-overlay-custom-font .btn { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.text-overlay-font-search { justify-content: center; color: var(--text-main); text-decoration: none; white-space: nowrap; }
.text-overlay-select .effect-type-trigger { min-height: 34px; }
.text-overlay-select-menu { z-index: 10020; max-height: min(250px, 40vh); overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; scrollbar-color: #596273 #1e222d; scrollbar-width: thin; }
.text-overlay-select-menu::-webkit-scrollbar { width: 8px; }
.text-overlay-select-menu::-webkit-scrollbar-track { background: #1e222d; }
.text-overlay-select-menu::-webkit-scrollbar-thumb { background: #596273; border: 2px solid #1e222d; border-radius: 8px; }
.text-overlay-select-menu::-webkit-scrollbar-thumb:hover { background: #737e91; }
.text-overlay-select-menu .effect-type-option.active { color: var(--yellow); }
.text-overlay-select-menu [data-custom-font="true"]::after { margin-left: auto; color: var(--text-muted); content: attr(data-font-source-label); font-size: 9px; }
.text-overlay-font-guide { margin-top: -3px; color: var(--text-muted); font-size: 10px; }
.text-overlay-shadow-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.text-overlay-shadow-toggle input { accent-color: var(--yellow); }
.text-overlay-shadow-fields { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.text-overlay-shadow-fields label { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 10px; }
.text-overlay-shadow-fields input { width: 100%; min-width: 0; height: 32px; padding: 5px 6px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-radius: 4px; outline: 0; }
.text-overlay-shadow-fields.is-disabled { opacity: .42; pointer-events: none; }
.text-overlay-animation-field { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,1fr) auto; align-items: end; gap: 10px; padding-top: 2px; }
.text-overlay-animation-field .effect-type-menu { top: auto; bottom: calc(100% + 4px); }
.text-overlay-animation-intensity { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr) 28px; align-items: center; gap: 7px; min-height: 34px; color: var(--text-muted); font-size: 11px; }
.text-overlay-animation-intensity[hidden] { display: none; }
.text-overlay-animation-intensity input { width: 100%; height: 12px; margin: 0; padding: 2px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, rgba(239,68,68,.7) 0, rgba(239,68,68,.9) var(--range-progress, 50%), rgba(0,0,0,.25) var(--range-progress, 50%), rgba(0,0,0,.25) 100%); border: 1px solid rgba(255,255,255,.15); border-radius: 99px; box-shadow: 0 0 12px rgba(239,68,68,.18); cursor: pointer; outline: 0; }
.text-overlay-animation-intensity input::-webkit-slider-runnable-track { height: 6px; background: transparent; border: 0; }
.text-overlay-animation-intensity input::-moz-range-track { height: 6px; background: transparent; border: 0; }
.text-overlay-animation-intensity input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4px; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: grab; transition: transform .15s, box-shadow .15s; }
.text-overlay-animation-intensity input:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: 0 2px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px rgba(255,255,255,.1); transform: scale(1.2); }
.text-overlay-animation-intensity input::-moz-range-thumb { width: 14px; height: 14px; box-sizing: border-box; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4); cursor: grab; }
.text-overlay-animation-intensity input:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.2); }
.text-overlay-animation-intensity output { color: #f8fafc; font-variant-numeric: tabular-nums; text-align: right; }
.text-overlay-animation-preview { width: 34px; min-height: 34px; padding: 0; justify-content: center; }
.text-overlay-animation-preview.active { color: #17100a; background: var(--yellow); }
.text-overlay-preview-wrap { display: flex; min-width: 0; min-height: 360px; flex-direction: column; gap: 8px; }
.text-overlay-preview { display: flex; min-height: 330px; flex: 1; align-items: center; justify-content: center; overflow: hidden; background-color: #fff; background-image: linear-gradient(45deg,#d7d7d7 25%,transparent 25%),linear-gradient(-45deg,#d7d7d7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7d7d7 75%),linear-gradient(-45deg,transparent 75%,#d7d7d7 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; border: 1px solid var(--border-color); border-radius: 6px; }
.text-overlay-preview canvas { display: block; max-width: 92%; max-height: 310px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }
.text-overlay-preview-wrap small { color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
.text-overlay-error { padding: 8px 10px; color: #fca5a5; background: rgba(127,29,29,.2); border: 1px solid rgba(239,68,68,.55); border-radius: 4px; font-size: 11px; }
.text-overlay-actions .btn { min-width: 0; }
.text-overlay-download-guide { margin: 10px 0 0 !important; color: var(--text-muted); font-size: 11px !important; text-align: center; }
@media (max-width: 820px) {
    .text-overlay-layout { grid-template-columns: 1fr; }
    .text-overlay-preview-wrap { min-height: 250px; }
    .text-overlay-preview { min-height: 220px; }
    .text-overlay-custom-font { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .text-overlay-custom-font textarea { grid-column: 1 / -1; }
}
.work-restore-modal { width: min(620px, calc(100vw - 40px)); text-align: left; }
.work-restore-modal h3, .work-restore-modal > p { text-align: center; }
.work-connect-list { display: flex; max-height: min(430px, 55vh); margin: 18px 0 20px; overflow-y: auto; flex-direction: column; gap: 8px; scrollbar-width: none; }
.work-connect-list::-webkit-scrollbar { display: none; }
.work-connect-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; min-height: 58px; padding: 10px 11px; align-items: center; gap: 10px; background: var(--soft); border: 1px solid var(--border-color); border-radius: 5px; }
.work-connect-icon { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-dark); border-radius: 50%; }
.work-connect-info { min-width: 0; }
.work-connect-name { overflow: hidden; color: var(--text-main); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.work-connect-meta { display: flex; margin-top: 4px; align-items: center; gap: 7px; color: var(--text-muted); font-size: 11px; }
.work-connect-status { color: var(--text-muted); }
.work-connect-item.connected { border-color: rgba(16,185,129,.55); }
.work-connect-item.connected .work-connect-icon, .work-connect-item.connected .work-connect-status { color: var(--on); }
.work-connect-item.error { border-color: rgba(239,68,68,.7); }
.work-connect-item.error .work-connect-icon, .work-connect-item.error .work-connect-status { color: var(--off); }
.work-connect-button { min-width: 72px; height: 32px; justify-content: center; }
.work-connect-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.work-restore-error { display: flex; min-height: 42px; margin: -8px 0 16px; padding: 10px 12px; align-items: flex-start; gap: 9px; color: #fca5a5; background: rgba(127,29,29,.22); border: 1px solid rgba(239,68,68,.65); border-radius: 5px; font-size: 12px; line-height: 1.55; }
.work-restore-error[hidden] { display: none; }
.work-restore-error i { margin-top: 3px; flex: 0 0 auto; }
.work-restore-error span { min-width: 0; overflow-wrap: anywhere; }
.work-save-modal { width: min(430px, calc(100vw - 40px)); text-align: left; }
.work-save-modal h3, .work-save-modal > p { text-align: center; }
.work-name-field { display: flex; margin: 18px 0 22px; flex-direction: column; gap: 7px; color: var(--text-muted); font-size: 12px; }
.work-name-field input { width: 100%; height: 40px; padding: 0 12px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-radius: 4px; outline: 0; }
.work-name-field input:focus { border-color: var(--yellow); }
.edited-playback-guide-modal { width: min(500px, calc(100vw - 40px)); text-align: left; }
.edited-playback-guide-modal h3 { text-align: center; }
.edited-playback-guide-desc { margin: 18px 0; }
.edited-playback-guide-desc p { margin-bottom: 10px; line-height: 1.65; }
.edited-playback-guide-desc p:last-child { margin-bottom: 0; }
.edited-playback-guide-tip { padding: 12px 14px; color: var(--text-muted) !important; background: rgba(148,163,184,.08); border-radius: 4px; }
.edited-playback-guide-dismiss { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.edited-playback-guide-dismiss input { width: 15px; height: 15px; margin: 0; accent-color: var(--yellow); }
.effect-settings-modal { width: min(470px, calc(100vw - 40px)); text-align: left; }
.effect-settings-modal h3 { text-align: center; }
.effect-settings-tracks { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.effect-settings-track { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 10px; }
.effect-track-title { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; }
.effect-track-title i { width: 14px; color: var(--yellow); text-align: center; }
.effect-settings-fields { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(108px,.75fr); align-items: center; gap: 10px; }
.effect-type-select { position: relative; min-width: 0; }
.effect-type-trigger { display: flex; width: 100%; min-height: 33px; padding: 6px 12px; align-items: center; color: #e2e8f0; background: #1e222d; border: 1px solid rgba(43,54,70,.72); border-radius: 4px; outline: 0; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.effect-type-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.effect-type-trigger i { margin-left: 8px; color: var(--text-muted); font-size: 12px; opacity: .8; }
.effect-type-select.open .effect-type-trigger { border-color: rgba(75,89,110,.95); }
.effect-type-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; overflow: hidden; background: #1e222d; border: 1px solid rgba(43,54,70,.72); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.effect-type-option { display: flex; width: 100%; padding: 10px 12px; align-items: center; color: #b0b3b8; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.05); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.effect-type-option:first-child { border-top: 0; }
.effect-type-option:hover, .effect-type-option.active { color: #e2e8f0; background: #262b38; }
.effect-duration-control { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.effect-duration-control input { width: 100%; min-width: 0; min-height: 33px; padding: 6px 8px; color: #e2e8f0; background: #1e222d; border: 1px solid rgba(43,54,70,.72); border-radius: 4px; outline: 0; font: inherit; font-size: 13px; text-align: right; }
.effect-duration-control input::selection { color: #000; background: var(--yellow); }
.effect-duration-control input:focus { border-color: rgba(75,89,110,.95); }
.effect-duration-control input:disabled { opacity: .42; cursor: not-allowed; }
.effect-duration-control span { color: var(--text-muted); }
.effect-apply-all { margin: 0 0 18px; }
.ui-toggle { display: inline-flex; align-items: center; gap: 32px; cursor: pointer; user-select: none; }
.ui-toggle.effect-apply-all { gap: 0; }
.ui-toggle input[type="checkbox"] { display: none; }
.ui-toggle-slider { position: relative; width: 40px; height: 22px; background-color: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 22px; transition: background-color .2s, border-color .2s; }
.ui-toggle-slider::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background-color: #94a3b8; border-radius: 50%; transition: left .2s cubic-bezier(.4,0,.2,1), background-color .2s; }
.ui-toggle input[type="checkbox"]:checked + .ui-toggle-slider { background-color: rgba(239,68,68,.8); border-color: #ef4444; }
.ui-toggle input[type="checkbox"]:checked + .ui-toggle-slider::after { left: 19px; background-color: #fff; }
.ui-toggle-label { margin-left: 8px; color: var(--text-muted); font-size: 13px; transition: color .2s; }
.ui-toggle input[type="checkbox"]:checked ~ .ui-toggle-label { color: #e2e8f0; font-weight: 500; }
.modal-buttons { display: flex; justify-content: center; gap: 12px; }
.modal-buttons .btn { flex: 1; justify-content: center; }
.sequence-image-audio-modal { width: min(430px, calc(100vw - 40px)); text-align: left; }
.sequence-image-audio-modal h3 { margin-bottom: 20px; text-align: center; }
.sequence-time-event-modal { width: min(430px, calc(100vw - 40px)); text-align: left; }
.sequence-time-event-modal h3 { margin-bottom: 18px; text-align: center; }
.sequence-time-event-modal label { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 12px; }
.sequence-time-event-type-select { margin-bottom: 14px; }
.sequence-time-event-type-select .effect-type-trigger { min-height: 36px; background: var(--soft); border-color: var(--border-color); }
.sequence-time-event-modal textarea { width: 100%; min-height: 96px; margin-bottom: 7px; padding: 10px 12px; resize: vertical; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-radius: 4px; outline: 0; }
.sequence-time-event-modal textarea:focus { border-color: var(--yellow); }
.sequence-time-event-guide { margin: 0 0 14px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.sequence-time-event-preview-wrap { margin-bottom: 18px; padding: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(43,54,70,.72); border-radius: 4px; }
.sequence-time-event-preview-wrap > span { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 11px; }
.sequence-time-event-preview { min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; color: var(--text-main); background: rgba(4,11,24,.78); border-radius: 4px; font-size: 12px; line-height: 1.45; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.sequence-time-event-preview.link { justify-content: flex-end; color: #fff; }
.sequence-time-event-preview.link > span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.8); border-radius: 4px; background: rgba(18,27,40,.94); }
.sequence-time-event-preview:empty::before { content: '\00a0'; }
.sequence-visual-modal { width: min(450px, calc(100vw - 40px)); text-align: left; }
.sequence-visual-modal h3 { text-align: center; }
.sequence-visual-kind { display: grid; margin: 20px 0 14px; grid-template-columns: 1fr 1fr; gap: 8px; }
.sequence-visual-kind .btn { justify-content: center; color: var(--text-muted); background: #1e222d; border-color: rgba(43,54,70,.72); }
.sequence-visual-kind .btn.active { color: #111827; background: var(--yellow); border-color: var(--yellow); }
.sequence-visual-panel { min-height: 112px; padding: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(43,54,70,.72); border-radius: 6px; }
.sequence-visual-panel p { margin-bottom: 16px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.sequence-visual-load { width: 100%; justify-content: center; }
.sequence-color-field { display: grid; grid-template-columns: auto 52px 1fr; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; }
.sequence-color-field input[type="color"] { width: 52px; height: 36px; padding: 2px; background: #1e222d; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; }
.sequence-color-field output { color: var(--text-main); font-family: monospace; text-transform: uppercase; }
.sequence-gradient-toggle { display: flex; align-items: center; margin-top: 14px; cursor: pointer; }
.sequence-gradient-fields { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sequence-gradient-editor { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 18px; }
.sequence-gradient-colors { display: grid; gap: 13px; }
.sequence-gradient-colors .sequence-color-field { grid-template-columns: 48px 52px minmax(64px, 1fr); }
.sequence-gradient-positions { display: grid; gap: 3px; color: var(--text-muted); font: 10px/1.3 monospace; }
.sequence-gradient-point-control { display: grid; justify-items: center; padding: 8px; }
.sequence-gradient-point-pad { position: relative; width: 94px; height: 94px; touch-action: none; cursor: crosshair; background-color: #171b24; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; box-shadow: inset 0 0 14px rgba(0,0,0,.25); }
.sequence-gradient-point-anchor { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; transform: translate(-50%, -50%); touch-action: none; cursor: grab; color: #fff; font: 700 8px/1 sans-serif; background: var(--point-color, #fff); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 6px rgba(0,0,0,.85); text-shadow: 0 1px 2px #000; }
.sequence-gradient-point-anchor:active { cursor: grabbing; }
.sequence-gradient-point-anchor:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sequence-gradient-point-anchor.is-end { border-color: #111827; }
.sequence-visual-modal .modal-buttons { margin-top: 18px; }
.bgm-source-modal { width: min(500px, calc(100vw - 40px)); text-align: left; }
.bgm-source-modal h3 { text-align: center; }
.bgm-source-range-section { margin: 22px 0 18px; padding: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(43,54,70,.72); border-radius: 6px; }
.bgm-source-range-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 12px; }
.bgm-source-range-heading > span:first-child { color: #e2e8f0; }
.bgm-source-range-heading i { margin-right: 6px; color: var(--yellow); }
.bgm-source-filename { display: flex; min-width: 0; align-items: center; }
.bgm-source-filename strong { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.bgm-source-seekbar { position: relative; height: 28px; margin: 13px 0 5px; cursor: pointer; touch-action: none; }
.bgm-source-seek-rail, .bgm-source-seek-selection { position: absolute; top: 11px; left: 0; right: 0; height: 6px; border-radius: 2px; }
.bgm-source-seek-rail { background: rgba(255,255,255,.14); }
.bgm-source-seek-selection { right: auto; background: rgba(239,68,68,.78); }
.bgm-source-preview-cursor { position: absolute; top: 5px; bottom: 5px; z-index: 4; width: 1px; background: #fff; box-shadow: 0 0 3px rgba(255,255,255,.7); pointer-events: none; transform: translateX(-.5px); }
.bgm-source-seekbar input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.bgm-source-seekbar input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.bgm-source-seekbar input[type="range"]::-webkit-slider-thumb { width: 14px; height: 24px; margin-top: -10px; appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: ew-resize; pointer-events: auto; }
.bgm-source-seekbar input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.bgm-source-seekbar input[type="range"]::-moz-range-thumb { width: 14px; height: 24px; background: transparent; border: 0; cursor: ew-resize; pointer-events: auto; }
#bgm-offset-start { z-index: 3; }
#bgm-offset-end { z-index: 2; }
.bgm-source-range-times { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bgm-source-range-times .time-input-group { width: 108px; }
.bgm-source-range-times .time-input-group:last-child { justify-self: end; }
.bgm-source-range-times .time-input { width: 106px; padding: 5px 4px; }
.bgm-source-range-times strong { padding: 2px 8px; color: var(--yellow); font-size: 11px; font-weight: 400; }
.bgm-source-range-actions { display: flex; width: max-content; margin: 13px auto 0; }
.bgm-source-range-actions .btn { min-width: 112px; justify-content: center; }
.bgm-source-range-actions .bgm-source-preview { min-width: 120px; }
.bgm-source-preview.is-playing { color: #111827; }
.bgm-source-settings-tracks { margin: 0 0 18px; }
.bgm-source-setting-track { grid-template-columns: 150px minmax(0,1fr); }
.bgm-source-setting-track .effect-track-title small { color: rgba(148,163,184,.72); font-size: 10px; font-weight: 300; }
.bgm-source-setting-track .effect-duration-control input { text-align: right; }
.bgm-source-setting-track .effect-duration-control em { color: var(--text-muted); font-style: normal; }
.bgm-loop-options { display: flex; align-items: center; gap: 24px; margin: 0 0 19px; }
.bgm-loop-toggle { gap: 0; }
.bgm-loop-toggle:has(input:disabled) { cursor: default; opacity: .45; }
.bgm-source-error { margin: -5px 0 16px; padding: 9px 11px; color: #fca5a5; background: rgba(127,29,29,.22); border: 1px solid rgba(239,68,68,.65); border-radius: 4px; font-size: 12px; }
.sequence-audio-source-row { display: grid; grid-template-columns: minmax(0,1fr) auto; margin-bottom: 10px; }
.sequence-audio-source-row input { min-width: 0; min-height: 38px; padding: 8px 10px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-right: 0; border-radius: 4px 0 0 4px; outline: 0; }
.sequence-audio-source-row input:focus { border-color: var(--yellow); }
.sequence-audio-source-row .btn { border-radius: 0 4px 4px 0; }
.sequence-audio-hint { margin: 0 0 20px; color: var(--text-muted); font-size: 11px; }
.sequence-setting-field { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 12px; margin-bottom: 14px; color: var(--text-muted); font-size: 13px; }
.sequence-setting-field input, .sequence-setting-field select { width: 100%; min-height: 36px; padding: 7px 10px; color: var(--text-main); background: var(--soft); border: 1px solid var(--border-color); border-radius: 4px; outline: 0; }
.sequence-setting-field input:focus, .sequence-setting-field select:focus { border-color: var(--yellow); }
.sequence-setting-input { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.sequence-setting-input em { color: var(--text-muted); font-style: normal; }
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover:not(:disabled) { background: #b33232; }
.btn-secondary { color: #fff; background: #3f3f46; }
.btn-secondary:hover:not(:disabled) { background: #52525b; }

@container (max-width: 800px) {
    .controls-bottom { grid-template-columns: 1fr auto; }
    .controls-center { grid-column: 1 / -1; grid-row: 1; }
    .controls-left, .controls-right { grid-row: 2; }
    .seek-buttons { display: none; }
}

@media (max-width: 1120px) {
    .panel-left { flex-basis: 420px; }
    .header-edited-duration-label { display: none; }
}
@media (max-width: 760px) {
    body.dark-theme { overflow: auto; }
    #app { min-height: 100vh; height: auto; overflow: visible; }
    .app-header { grid-template-columns: 1fr auto; min-height: 64px; }
    .header-status-slot { display: none; }
    .main-content { flex-direction: column; overflow: visible; }
    .panel-left { flex: none !important; width: 100%; height: 38vh; min-height: 260px; }
    .resizer { display: none; }
    .panel-right { min-height: 62vh; }
    .controls-bottom { display: flex; flex-wrap: wrap; }
    .controls-center { order: -1; width: 100%; }
    .controls-right { margin-left: auto; }
    .seek-buttons { display: none; }
}
.event-editor .sequence-drag-handle,
.event-editor .segment-effect-summary,
.event-editor .sequence-drop-end {
    display: none;
}

.event-editor .segment-slot {
    cursor: default;
}

.event-editor .source-toolbar .source-tab-nav,
.event-editor .source-toolbar .source-tabs,
.event-editor .source-toolbar .source-delete-btn {
    display: none;
}