/* Editor (Phase 3): full-window dockable workspace */
:root {
    --vx-editor-bg: #16181c;
    --vx-panel-bg: #1f2126;
    --vx-panel-border: #30333a;
    --vx-panel-text: #d8dadf;
    --vx-panel-muted: #8b9099;
    --vx-accent: #4ea1ff;
    --vx-timeline-bg: #1d1f24;
    --vx-timeline-lane: #25282e;
    --vx-timeline-ruler: #2d3037;
    --vx-timeline-text: #e6e6e6;
    --vx-timeline-accent: #4ea1ff;
}

.vx-editor {
    position: fixed;
    inset: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    background: var(--vx-editor-bg);
    color: var(--vx-panel-text);
    font-size: 0.85rem;
}

.vx-editor .text-muted { color: var(--vx-panel-muted) !important; }
.vx-editor .form-control, .vx-editor .form-select { background-color: #14161a; color: var(--vx-panel-text); border-color: var(--vx-panel-border); }
.vx-editor .btn-outline-secondary { color: var(--vx-panel-text); border-color: var(--vx-panel-border); }
.vx-editor .table { --bs-table-bg: transparent; --bs-table-color: var(--vx-panel-text); --bs-table-hover-color: #fff; --bs-table-active-color: #fff; }
.vx-editor a { color: var(--vx-accent); }

.vx-editor-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--vx-panel-border); flex-wrap: wrap; }

/* Dock layout */
.vx-dock { position: relative; flex: 1 1 auto; min-height: 0; display: flex; padding: 2px; }
.vx-dock > .vx-split, .vx-dock > .vx-tabs { flex: 1 1 auto; }
.vx-split { display: flex; min-width: 0; min-height: 0; width: 100%; height: 100%; }
.vx-split-row { flex-direction: row; }
.vx-split-column { flex-direction: column; }
.vx-split-child { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.vx-split-child > * { flex: 1 1 auto; }
.vx-splitter { flex: 0 0 4px; background: var(--vx-editor-bg); touch-action: none; }
.vx-split-row > .vx-splitter { cursor: col-resize; }
.vx-split-column > .vx-splitter { cursor: row-resize; }
.vx-splitter:hover { background: var(--vx-accent); }

.vx-tabs { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--vx-panel-bg); border: 1px solid var(--vx-panel-border); border-radius: 3px; }
.vx-tabstrip { display: flex; align-items: center; gap: 2px; padding: 0 2px; border-bottom: 1px solid var(--vx-panel-border); min-height: 1.75rem; overflow: hidden; }
.vx-tab { display: flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border-radius: 3px 3px 0 0; cursor: pointer; white-space: nowrap; color: var(--vx-panel-muted); user-select: none; }
.vx-tab.active { color: #fff; box-shadow: inset 0 -2px 0 var(--vx-accent); }
.vx-tab-button { border: 0; background: none; color: inherit; padding: 0 0.25rem; line-height: 1; }
.vx-tab-button:hover { color: #fff; }
.vx-tab-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; }

.vx-drop-zones { position: absolute; inset: 0; z-index: 5; }
.vx-drop-zone { position: absolute; background: rgba(78, 161, 255, 0.08); }
.vx-drop-zone:hover { background: rgba(78, 161, 255, 0.35); outline: 2px solid var(--vx-accent); outline-offset: -2px; }
.vx-drop-center { inset: 25%; }
.vx-drop-left { left: 0; top: 0; bottom: 0; width: 25%; }
.vx-drop-right { right: 0; top: 0; bottom: 0; width: 25%; }
.vx-drop-top { left: 25%; right: 25%; top: 0; height: 25%; }
.vx-drop-bottom { left: 25%; right: 25%; bottom: 0; height: 25%; }

.vx-float { position: absolute; z-index: 20; display: flex; flex-direction: column; background: var(--vx-panel-bg); border: 1px solid var(--vx-accent); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
.vx-float-title { padding: 0.15rem 0.5rem; cursor: move; background: #2a2d34; touch-action: none; user-select: none; }
.vx-float-body { flex: 1 1 auto; display: flex; min-height: 0; }
.vx-float-body > .vx-tabs { flex: 1 1 auto; border: 0; }
.vx-float-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; }

/* Panels */
.vx-panel-toolbar { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem; flex-wrap: wrap; }
.vx-panel-heading { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vx-panel-muted); margin: 0.5rem 0.5rem 0.25rem; }
.vx-timecode { width: 8.5rem; }

.vx-timeline-panel { display: flex; flex-direction: column; height: 100%; }
.vx-timeline-body { flex: 1 1 auto; display: flex; min-height: 0; }
.vx-track-headers { position: relative; flex: 0 0 11rem; overflow: hidden; border-right: 1px solid var(--vx-panel-border); }
.vx-track-header { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 2px; padding: 0 2px; border-bottom: 1px solid var(--vx-panel-border); overflow: hidden; }
.vx-track-header.targeted { background: #262a31; }
.vx-track-name { flex: 1 1 auto; min-width: 0; }
.vx-flag { border: 1px solid var(--vx-panel-border); background: none; color: var(--vx-panel-muted); border-radius: 3px; padding: 0 0.25rem; font-size: 0.7rem; line-height: 1.3; }
.vx-flag.on { background: #3a5ea8; border-color: #3a5ea8; color: #fff; }
.vx-timeline-canvas-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.vx-timeline-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

.vx-monitor { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem; height: 100%; }
.vx-monitor.active .vx-viewer { outline: 1px solid var(--vx-accent); }
.vx-viewer { position: relative; flex: 1 1 auto; min-height: 6rem; max-height: 100%; margin: 0 auto; width: 100%; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vx-viewer-frame { text-align: center; padding: 1rem; }
.vx-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vx-viewer-title { position: absolute; top: 0; left: 0; right: 0; padding: 0.15rem 0.4rem; font-size: 0.8rem; color: #fff; background: rgba(0, 0, 0, 0.45); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-render-bar { pointer-events: none; }
.vx-scopes-panel { display: flex; flex-direction: column; height: 100%; min-height: 8rem; }
.vx-scope-canvas { flex: 1 1 auto; width: 100%; min-height: 6rem; background: #101114; display: block; }
.vx-transparency { background-image: conic-gradient(#444 25%, #666 0 50%, #444 0 75%, #666 0); background-size: 16px 16px; }
.vx-safe-action, .vx-safe-title { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.5); pointer-events: none; }
.vx-safe-action { inset: 5%; }
.vx-safe-title { inset: 10%; }
.vx-multicam-grid { display: grid; gap: 2px; width: 100%; height: 100%; }
.vx-camera { background: #111; color: #ddd; border: 2px solid transparent; }
.vx-camera.live { border-color: #e03b3b; }
.vx-scrub { margin: 0; }
.vx-monitor-times, .vx-transport, .vx-trim-bar { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.vx-transport-gap { width: 0.5rem; }
.vx-drag-handle { cursor: grab; padding: 0.1rem 0.35rem; border: 1px dashed var(--vx-panel-border); border-radius: 3px; user-select: none; }
.vx-trim-bar { background: #3b2f12; padding: 0.25rem; border-radius: 3px; }

.vx-project-panel .vx-asset-table { font-size: 0.8rem; }
.vx-sequence-links li { padding-top: 0.1rem; padding-bottom: 0.1rem; }
.vx-tools { display: flex; flex-direction: column; gap: 2px; padding: 2px; align-items: stretch; }
.vx-tools .btn { font-size: 1rem; line-height: 1.2; }
.vx-info dt { color: var(--vx-panel-muted); font-weight: normal; }
.vx-info dd { margin-bottom: 0.35rem; }

/* Dialogs */
.vx-dialog-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; }
.vx-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; background: var(--vx-panel-bg); color: var(--vx-panel-text); border: 1px solid var(--vx-panel-border); border-radius: 6px; }
.vx-dialog-header, .vx-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; }
.vx-dialog-header { border-bottom: 1px solid var(--vx-panel-border); }
.vx-dialog-footer { border-top: 1px solid var(--vx-panel-border); justify-content: flex-end; }
.vx-dialog-body { padding: 0.75rem; }
.vx-dialog .btn-close { filter: invert(1); }

/* Effects panel (EFX-001) */
.vx-effects-panel { display: flex; flex-direction: column; height: 100%; }
.vx-effects-kinds { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 0.25rem 0.25rem; }
.vx-effects-tree { flex: 1; overflow: auto; padding: 0 0.25rem; }
.vx-effects-folder { font-weight: 600; text-decoration: none; }
.vx-effects-item { display: flex; justify-content: space-between; align-items: center; padding: 0.05rem 0.25rem 0.05rem 1.1rem; cursor: default; border-radius: 0.2rem; }
.vx-effects-item.selected { background: var(--vx-accent, #1b6ec2); color: #fff; }
.vx-effects-item.unavailable > span:first-child { opacity: 0.6; }
.vx-effect-badges .badge { font-size: 0.6rem; margin-left: 0.2rem; }

/* Effect Controls panel (EFX-002, EFX-003) */
.vx-effect-controls { height: 100%; overflow: auto; }
.vx-fx { border-bottom: 1px solid var(--vx-panel-border); padding: 0.2rem 0.4rem; }
.vx-fx-off .vx-fx-param { opacity: 0.5; }
.vx-fx-header { display: flex; align-items: center; gap: 0.35rem; }
.vx-fx-param { display: grid; grid-template-columns: 1.2rem minmax(6rem, 9rem) 1fr auto; align-items: center; gap: 0.35rem; padding: 0.1rem 0 0.1rem 0.6rem; }
.vx-fx-value { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.vx-fx-value .form-control[type=number] { width: 5.5rem; }
.vx-fx-value .form-range { flex: 1; min-width: 4rem; }
.vx-fx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.vx-fx-keys { display: flex; gap: 0.2rem; }
.vx-stopwatch { text-decoration: none; opacity: 0.5; }
.vx-stopwatch.on { opacity: 1; color: var(--vx-accent, #1b6ec2); }
.vx-key-on { color: var(--vx-accent, #1b6ec2); }