/* Video editor uses the existing shell, colours, panels and controls. */
#view-video-editor { overflow: auto; }
.ve-toolbar, .ve-workspace, .ve-timeline, .ve-status { flex-shrink: 0; }
.ve-toolbar { gap: 8px; flex-wrap: wrap; }
.ve-title { width: 180px; max-width: 100%; }
.ve-workspace { display: grid; grid-template-columns: 176px minmax(260px, 1fr) 290px; grid-template-rows: minmax(0, 1fr); height: clamp(440px, 60vh, 780px); min-height: 0; }
.ve-media, .ve-inspector { padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.ve-media { border-right: 1px solid var(--border-soft); min-height: 0; overflow: auto; }
.ve-inspector { border-left: 1px solid var(--border-soft); min-height: 0; max-height: 100%; overflow: auto; }
.ve-inspector-primary { position: sticky; top: -14px; z-index: 12; margin: -14px -14px 0; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--border-soft); }
.ve-inspector-primary .btn { width: 100%; }
.ve-media .btn, .ve-media select { width: 100%; }
.ve-source { padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); text-align: left; overflow-wrap: anywhere; }
.ve-source:hover { border-color: var(--accent); }
.ve-source b { display: block; font-size: 12px; margin-bottom: 5px; }
.ve-source-remove { margin-top: 6px; color: var(--muted); font-size: 10px; }
.ve-source-remove:hover { color: var(--danger); }
.ve-stage-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.ve-stage-tools { display: flex; gap: 10px 12px; align-items: center; padding: 8px 12px; flex-wrap: wrap; flex-shrink: 0; }
.ve-stage-tools select { width: 190px; max-width: 100%; }
.ve-stage-area { flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; position: relative; }
.ve-frame { position: relative; background: #000; flex: none; box-shadow: 0 0 0 1px #33384a, 0 8px 45px #0005; }
.ve-frame canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ve-safe-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none !important; z-index: 8; }
.ve-selection { position: absolute; border: 1.5px solid #d9d2ff; pointer-events: none; transform-origin: center; z-index: 9; }
.ve-handle { position: absolute; width: 11px; height: 11px; border: 1px solid var(--accent); background: white; pointer-events: auto; touch-action: none; padding: 0; }
.ve-handle:nth-child(1) { left: -6px; top: -6px; cursor: nwse-resize; }
.ve-handle:nth-child(2) { right: -6px; top: -6px; cursor: nesw-resize; }
.ve-handle:nth-child(3) { right: -6px; bottom: -6px; cursor: nwse-resize; }
.ve-handle:nth-child(4) { left: -6px; bottom: -6px; cursor: nesw-resize; }
.ve-text-side { width: 6px; height: 8px; top: calc(50% - 4px); cursor: ew-resize; }
.ve-text-side.left { left: -4px; }
.ve-text-side.right { right: -4px; }
.ve-alignment { position: absolute; background: #b4ff00; z-index: 10; pointer-events: none; }
.ve-alignment.center { background: #68dce5; box-shadow: 0 0 3px #102d35; }
.ve-playback { display: flex; align-items: center; gap: 10px; padding: 12px 18px; flex-shrink: 0; }
.ve-playback input { min-width: 70px; flex: 1; }
.ve-time { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; color: var(--muted); }
#veExpand { font-size: 23px; line-height: 1; min-width: 36px; padding: 5px; flex-shrink: 0; }
.ve-expanded-dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #222424; color: var(--text); overflow: hidden; }
.ve-expanded-dialog::backdrop { background: #000; }
.ve-stage-column.expanded { position: relative; width: 100%; height: 100%; background: #222424; }
.expanded .ve-stage-tools, .expanded .ve-selection, .expanded .ve-alignment { display: none !important; }
.expanded .ve-stage-area { flex: 1; height: 100%; padding: 0; }
.expanded .ve-frame { box-shadow: none; }
.expanded .ve-playback { position: absolute; z-index: 20; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); padding: 10px 12px; border-radius: 9px; background: #101212db; box-shadow: 0 4px 24px #0006; }
.ve-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; margin-top: 5px; }
.ve-control { display: flex; flex-direction: column; gap: 7px; }
.ve-control label { font-size: 12px; color: var(--muted); }
.ve-control-line { display: flex; align-items: center; gap: 8px; }
.ve-control-line input[type=range] { min-width: 40px; flex: 1; }
.ve-control-line .input { width: 72px; padding: 6px 7px; text-align: right; }
.ve-control-line .btn { padding: 5px 7px; }
.ve-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ve-inspector textarea { min-height: 76px; resize: vertical; }
.ve-inspector .input { max-width: 100%; }
.ve-colour { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 8px; }
.ve-colour input { width: 36px; height: 27px; padding: 0; border: 0; background: transparent; }
.ve-text-item { display: flex; gap: 6px; }
.ve-text-item .btn:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-text-item.selected .btn:first-child { border-color: var(--accent); }
.ve-timeline { border-top: 1px solid var(--border-soft); padding: 14px 18px 8px; background: var(--surface); min-height: 375px; }
.ve-tabs-bar { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-soft); margin: -14px -18px 12px; padding: 0 10px; }
.ve-timeline-tabs { display: flex; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.ve-tab { display: flex; align-items: center; flex: none; border-right: 1px solid var(--border-soft); border-bottom: 2px solid transparent; }
.ve-tab.active { background: var(--surface-2); border-bottom-color: var(--accent); }
.ve-timeline-tab { padding: 11px 10px; font-size: 11px; white-space: nowrap; color: var(--muted); max-width: 240px; text-overflow: ellipsis; overflow: hidden; }
.ve-tab.active .ve-timeline-tab { color: var(--text); }
.ve-tab-remove { padding: 5px 8px 5px 2px; color: var(--dim); }
.ve-tab-remove:hover:not(:disabled) { color: var(--danger); }
.ve-tab-remove:disabled { visibility: hidden; }
.ve-tabs-bar > .btn { flex: none; font-size: 20px; }
.ve-timeline-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ve-timeline-tools input[type=range] { width: 90px; }
.ve-timeline-tools > label { white-space: nowrap; }
.ve-timeline-tools select { width: 78px; }
.ve-track-layout { display: grid; grid-template-columns: 72px minmax(0, 1fr); max-height: 420px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--r-sm); }
.ve-track-scroll { overflow-x: auto; overflow-y: hidden; min-width: 0; }
.ve-track { position: relative; min-height: 310px; min-width: 100%; background: var(--bg); touch-action: none; user-select: none; }
.ve-lane-labels { position: relative; background: var(--surface-2); border-right: 1px solid var(--border); }
.ve-lane-label { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--border-soft); }
.ve-lane-bg { position: absolute; left: 0; right: 0; background: #ffffff03; border-bottom: 1px solid var(--border-soft); pointer-events: none; }
.ve-lane-empty { position: absolute; left: 12px; color: var(--dim); font-size: 11px; pointer-events: none; white-space: nowrap; }
.ve-ruler { position: absolute; left: 0; right: 0; top: 0; height: 29px; cursor: ew-resize; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ve-tick { position: absolute; top: 0; height: 22px; border-left: 1px solid #34394b; font-size: 10px; padding-left: 4px; color: var(--dim); pointer-events: none; }
.ve-clip { position: absolute; height: 88px; background: #293321; border: 1px solid #61744f; border-radius: 6px; cursor: grab; min-width: 3px; overflow: hidden; color: var(--text); }
.ve-overlay-clip { position: absolute; height: 30px; background: #6b493c; border: 1px solid #ad7963; border-radius: 4px; cursor: grab; min-width: 3px; overflow: hidden; color: var(--text); }
.ve-overlay-clip.captions { background: #725631; border-color: #b68d51; }
.ve-overlay-clip.selected { border: 2px solid var(--accent); }
.ve-overlay-label { display: block; padding: 5px 10px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; pointer-events: none; }
.ve-overlay-clip .ve-trim { width: 5px; opacity: .2; }
.ve-clip.selected { border: 2px solid var(--accent); background: #394730; }
.ve-clip-label { padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; pointer-events: none; }
.ve-clip-label small { display: block; margin-top: 6px; color: var(--muted); }
.ve-trim { position: absolute; top: 0; bottom: 0; width: 7px; background: var(--accent); opacity: .55; cursor: ew-resize; z-index: 6; }
.ve-trim.left { left: 0; } .ve-trim.right { right: 0; }
.ve-playhead { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; margin-left: -6px; cursor: ew-resize; z-index: 5; will-change: transform; touch-action: none; }
.ve-playhead::after { content: ''; position: absolute; top: 10px; bottom: 0; left: 5px; width: 2px; background: #f0f2eb; pointer-events: none; }
.ve-playhead::before { content: ''; position: absolute; left: 1px; top: 0; width: 10px; height: 13px; border: 2px solid #f0f2eb; border-radius: 2px 2px 5px 5px; background: var(--bg); pointer-events: none; }
.ve-playhead-grip { position: absolute; top: 0; width: 100%; height: 28px; cursor: ew-resize; pointer-events: auto; }
.ve-track.cutting .ve-playhead { pointer-events: none; }
.ve-marquee { position: absolute; border: 1px solid #d5ded8; background: #d5ded81f; pointer-events: none; z-index: 12; }
.ve-snap-line { position: absolute; top: 0; bottom: 0; width: 2px; pointer-events: none; }
.ve-snap-line { background: #b4ff00; z-index: 6; }
.ve-cut-guide { position: absolute; top: 28px; bottom: 0; width: 1px; background: #e7d459; z-index: 7; pointer-events: none; }
.ve-cut-guide::before { content: attr(data-time); position: absolute; top: 2px; left: 5px; padding: 2px 4px; font-size: 10px; color: #ece1a2; background: #1b1e1e; white-space: nowrap; }
.ve-track.cutting, .ve-track.cutting .ve-clip, .ve-track.cutting .ve-overlay-clip, .ve-track.cutting .ve-trim { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M8 1v26' stroke='%23101212' stroke-width='3'/%3E%3Cpath d='M8 1v26' stroke='%23fff'/%3E%3Cpath d='m12 8 7 5-7 5' fill='none' stroke='%23e7d459' stroke-width='2'/%3E%3C/svg%3E") 8 14, crosshair; }
.ve-tool-picker { position: relative; }
.ve-tool-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 200px; z-index: 30; padding: 5px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
.ve-tool-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px; border-radius: 5px; font-size: 12px; }
.ve-tool-menu button:hover, .ve-tool-menu [aria-checked=true] { background: #d5ef8a18; color: var(--accent); }
.ve-tool-menu kbd { color: var(--dim); font-size: 11px; }
.ve-timeline-hint { padding-top: 8px; font-size: 10px; color: var(--dim); }
.ve-status { padding: 10px 18px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ve-status.error { color: var(--danger); }
.ve-status progress { flex: 1; min-width: 100px; accent-color: var(--accent); height: 6px; }
.ve-check { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; cursor: pointer; color: var(--muted); }
.ve-check input { accent-color: var(--accent); }
.ve-light-option { margin-bottom: 12px; }
.ve-light-strength { max-width: 360px; margin: 10px 0 16px 21px; display: grid; gap: 8px; }
.ve-light-strength-label, .ve-light-strength-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ve-light-strength-label { font-size: 12px; color: var(--muted); }
.ve-light-strength-label output { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.ve-light-strength input { width: 100%; min-width: 0; }
.ve-light-strength-hint { font-size: 10px; color: var(--dim); }
.ve-light-strength.is-disabled { opacity: .45; }
.ve-preview-box { position: relative; margin: 0 auto; width: min(100%, 310px); background: black; }
.ve-preview-box video { width: 100%; height: 100%; display: block; object-fit: contain; }
.ve-preview-box.landscape { width: min(100%, 650px); }
.ve-variants { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.ve-variants .selected { border-color: var(--accent); }
.ve-words { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ve-word { display: grid; grid-template-columns: minmax(60px, 1fr) 66px 66px 25px; gap: 5px; align-items: center; }
.ve-word .input { width: 100%; min-width: 0; padding: 6px; }
.ve-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.ve-empty { color: var(--dim); font-size: 13px; padding: 18px 4px; line-height: 1.6; }
@media(max-width: 1250px) { .ve-workspace { grid-template-columns: minmax(260px,1fr) 270px; grid-template-rows: auto minmax(0,1fr); } .ve-media { grid-column: 1 / -1; max-height: 100px; flex-direction: row; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-soft); } .ve-media > * { max-width: 200px; } .ve-media .btn { width: auto; } }
@media(max-width: 760px) { .ve-workspace { display: flex; flex-direction: column; height: auto; } .ve-inspector { max-height: 320px; border-left: 0; border-top: 1px solid var(--border-soft); } .ve-stage-area { flex: none; height: 340px; } .ve-toolbar { padding: 14px; } .ve-toolbar .grow { display: none; } .ve-title { width: 135px; } .ve-playback { flex-wrap: wrap; } .ve-timeline { padding: 12px; } }
@media(max-width: 760px) { .rail-btn > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }