body.mode-stage-movement {
  height: 100vh;
  overflow: hidden;
}

body.mode-stage-movement header,
body.mode-stage-movement footer { flex: 0 0 auto; }

body.mode-stage-movement #mainContent {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px clamp(8px, 1vw, 16px);
  overflow: hidden;
}

.smv-root {
  --smv-panel: rgba(15, 18, 37, .98);
  --smv-panel-soft: rgba(20, 24, 48, .95);
  --smv-line: rgba(255, 255, 255, .095);
  --smv-muted: #9da2ba;
  --smv-text: #f5f6fb;
  --smv-violet: #9b87ff;
  --smv-cyan: #52e2d0;
  --smv-danger: #ff7285;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(320px, 1fr) minmax(190px, 26vh);
  overflow: hidden;
  color: var(--smv-text);
  background: #090b18;
  border: 1px solid var(--smv-line);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}

.smv-root *, .smv-root *::before, .smv-root *::after { box-sizing: border-box; }
.smv-root button, .smv-root input, .smv-root select, .smv-root textarea { font: inherit; }
.smv-root button { color: inherit; }

.smv-toolbar {
  z-index: 8;
  display: grid;
  min-height: 62px;
  padding: 8px 12px;
  grid-template-columns: minmax(190px, .7fr) auto minmax(180px, .7fr);
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(20, 24, 48, .99), rgba(11, 14, 30, .99));
  border-bottom: 1px solid var(--smv-line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.smv-toolbar-brand { display: grid; min-width: 0; gap: 2px; }
.smv-toolbar-kicker { color: var(--smv-cyan); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.smv-name-input { width: min(310px, 100%); height: 30px; padding: 0 8px; color: #fff; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 15px; font-weight: 800; letter-spacing: -.025em; }
.smv-name-input:hover, .smv-name-input:focus { background: rgba(255,255,255,.04); border-color: var(--smv-line); outline: none; }
.smv-toolbar-actions { display: flex; align-items: center; justify-content: center; gap: 5px; }
.smv-toolbar-actions-right { justify-content: flex-end; }
.smv-toolbar-divider { width: 1px; height: 32px; margin: 0 5px; background: var(--smv-line); }
.smv-icon-button { position: relative; display: grid; min-width: 44px; height: 44px; padding: 4px 7px; place-items: center; gap: 1px; background: rgba(255,255,255,.035); border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: .16s ease; }
.smv-icon-button > span { color: #d8d2ff; font-size: 19px; line-height: 1; }
.smv-icon-button small { color: #b8bdcf; font-size: 8px; font-weight: 750; white-space: nowrap; }
.smv-icon-button:hover { background: rgba(155,135,255,.11); border-color: rgba(155,135,255,.28); transform: translateY(-1px); }

.smv-workspace { display: grid; min-width: 0; min-height: 0; grid-template-columns: 220px minmax(420px, 1fr) 300px; overflow: hidden; }
.smv-panel { min-width: 0; min-height: 0; overflow: hidden; background: var(--smv-panel); }
.smv-left-panel { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; border-right: 1px solid var(--smv-line); }
.smv-right-panel { display: grid; grid-template-rows: auto minmax(0,1fr); border-left: 1px solid var(--smv-line); }
.smv-panel-tabs { display: grid; padding: 7px; grid-template-columns: repeat(auto-fit,minmax(62px,1fr)); gap: 4px; border-bottom: 1px solid var(--smv-line); }
.smv-panel-tabs button { min-height: 30px; padding: 5px; color: var(--smv-muted); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 700; }
.smv-panel-tabs button:hover, .smv-panel-tabs button.is-active { color: #fff; background: rgba(155,135,255,.12); border-color: rgba(155,135,255,.22); }
.smv-panel-heading { display: flex; min-height: 42px; padding: 8px 11px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--smv-line); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.smv-mini-primary { width: 27px; height: 27px; padding: 0; color: #07120f !important; background: var(--smv-cyan); border: 0; border-radius: 8px; cursor: pointer; font-size: 17px !important; }
.smv-left-list, .smv-inspector { min-height: 0; overflow: auto; }
.smv-left-list { padding: 7px; }
.smv-left-footer { display: grid; padding: 8px; gap: 6px; border-top: 1px solid var(--smv-line); }
.smv-wide-action { min-height: 34px; padding: 7px 9px; color: #cdd0df; background: rgba(255,255,255,.035); border: 1px solid var(--smv-line); border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 700; text-align: left; }
.smv-wide-action:hover { color: #fff; background: rgba(155,135,255,.09); border-color: rgba(155,135,255,.26); }

.smv-list-card { display: grid; min-height: 50px; padding: 7px; grid-template-columns: 31px minmax(0,1fr) 23px 23px; align-items: center; gap: 5px; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.smv-list-card:hover { background: rgba(255,255,255,.035); }
.smv-list-card.is-selected { background: linear-gradient(90deg, rgba(155,135,255,.16), rgba(82,226,208,.05)); border-color: rgba(155,135,255,.26); }
.smv-list-icon { display: grid; width: 29px; height: 29px; color: #c9c0ff; background: rgba(155,135,255,.1); border: 1px solid rgba(155,135,255,.18); border-radius: 8px; place-items: center; }
.smv-list-copy { display: grid; min-width: 0; gap: 3px; }
.smv-list-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.smv-list-copy small, .smv-asset-card small { overflow: hidden; color: var(--smv-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smv-list-card > button { width: 22px; height: 22px; padding: 0; color: var(--smv-muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 10px; }
.smv-list-card > button:hover { color: #fff; background: rgba(255,255,255,.07); }
.smv-marker-dot { width: 12px; height: 12px; margin-left: 8px; background: var(--marker); border: 2px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 12px var(--marker); }
.smv-asset-card { display: grid; padding: 8px; grid-template-columns: 38px minmax(0,1fr); gap: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.smv-asset-card > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.smv-asset-preview { display: grid; width: 36px; height: 36px; color: var(--smv-cyan); background: rgba(82,226,208,.08); border: 1px solid rgba(82,226,208,.18); border-radius: 9px; place-items: center; }
.smv-asset-actions { display: flex; grid-column: 1/-1; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.smv-asset-actions button { padding: 4px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--smv-line); border-radius: 7px; cursor: pointer; font-size: 8px; }
.smv-asset-actions button.danger { color: var(--smv-danger); }

.smv-viewport-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: 40px minmax(0,1fr); background: #070914; }
.smv-viewport-toolbar { z-index: 4; display: flex; padding: 5px 8px; align-items: center; justify-content: space-between; gap: 7px; background: rgba(14,17,34,.96); border-bottom: 1px solid var(--smv-line); }
.smv-tool-group { display: flex; align-items: center; gap: 4px; }
.smv-tool-group button { height: 28px; min-width: 30px; padding: 4px 8px; color: var(--smv-muted); background: rgba(255,255,255,.03); border: 1px solid var(--smv-line); border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 700; }
.smv-view-tool { font-size: 15px !important; }
.smv-tool-group button:hover, .smv-tool-group button.is-active { color: #fff; background: rgba(155,135,255,.14); border-color: rgba(155,135,255,.32); }
.smv-toggle-buttons label { display: flex; align-items: center; gap: 3px; color: var(--smv-muted); font-size: 8px; }
.smv-toggle-buttons input { accent-color: var(--smv-violet); }
.smv-canvas-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#smvCanvas { display: block; width: 100%; height: 100%; touch-action: none; }
.smv-axis-legend { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; pointer-events: none; }
.smv-axis-legend span { display: grid; width: 20px; height: 20px; color: #fff; border-radius: 6px; place-items: center; font-size: 9px; font-weight: 900; }
.smv-axis-legend .x { background: #d94d64; }.smv-axis-legend .y { background: #2aa56c; }.smv-axis-legend .z { background: #347bc1; }
.smv-canvas-help { position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; color: rgba(226,229,241,.8); background: rgba(7,8,20,.82); border: 1px solid var(--smv-line); border-radius: 9px; pointer-events: none; font-size: 9px; backdrop-filter: blur(8px); }
.smv-fp-pad { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: grid; width: 126px; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 34px); gap: 4px; }
.smv-fp-pad[hidden] { display: none; }
.smv-fp-pad button { min-width: 0; min-height: 0; padding: 0; color: #eef7ff; background: rgba(13,18,36,.84); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 900; backdrop-filter: blur(8px); }
.smv-fp-pad button:hover { background: rgba(82,226,208,.16); border-color: rgba(82,226,208,.45); }
.smv-fp-forward { grid-column: 2; grid-row: 1; }
.smv-fp-left { grid-column: 1; grid-row: 2; }
.smv-fp-right { grid-column: 3; grid-row: 2; }
.smv-fp-backward { grid-column: 2; grid-row: 3; }
.smv-fp-up { grid-column: 3; grid-row: 1; }
.smv-fp-down { grid-column: 3; grid-row: 3; }
.smv-fp-forward span, .smv-fp-left span, .smv-fp-right span, .smv-fp-backward span { display: inline-block; transform: rotate(var(--smv-fp-yaw, 0rad)); transform-origin: center; }
.smv-fp-hint { position: absolute; top: 14px; left: 50%; z-index: 5; padding: 7px 10px; color: #07120f; background: rgba(82,226,208,.92); border-radius: 9px; box-shadow: 0 12px 28px rgba(0,0,0,.25); font-size: 9px; font-weight: 850; pointer-events: none; transform: translateX(-50%); }
.smv-fp-hint[hidden] { display: none; }

.smv-chip { padding: 4px 7px; color: #d8d1ff; background: rgba(155,135,255,.1); border: 1px solid rgba(155,135,255,.18); border-radius: 999px; font-size: 8px; }
.smv-inspector { padding: 9px; }
.smv-inspector-section { display: grid; padding: 0 0 12px; margin: 0 0 12px; gap: 8px; border-bottom: 1px solid var(--smv-line); }
.smv-inspector-section h3 { margin: 0; color: #d9dce8; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.smv-field { display: grid; gap: 4px; color: var(--smv-muted); font-size: 8px; font-weight: 700; }
.smv-field input, .smv-field select, .smv-field textarea, .smv-vector-field input { width: 100%; min-height: 30px; padding: 6px 8px; color: #fff; background: rgba(7,9,20,.82); border: 1px solid var(--smv-line); border-radius: 8px; outline: none; font-size: 10px; }
.smv-field textarea { resize: vertical; }
.smv-field input:focus, .smv-field select:focus, .smv-field textarea:focus, .smv-vector-field input:focus { border-color: rgba(82,226,208,.52); box-shadow: 0 0 0 2px rgba(82,226,208,.08); }
.smv-field input[type="color"] { padding: 3px; }
.smv-vector-field { display: grid; padding: 7px; margin: 0; grid-template-columns: repeat(3,1fr); gap: 5px; background: rgba(255,255,255,.018); border: 1px solid var(--smv-line); border-radius: 9px; }
.smv-vector-field legend { padding: 0 5px; color: var(--smv-muted); font-size: 8px; font-weight: 700; }
.smv-vector-field label { display: grid; min-width: 0; grid-template-columns: 17px minmax(0,1fr); align-items: center; }
.smv-vector-field label span { font-size: 8px; font-weight: 900; }.smv-vector-field .axis-x span { color: #ff7185; }.smv-vector-field .axis-y span { color: #66e9a7; }.smv-vector-field .axis-z span { color: #6ab6ff; }
.smv-vector-field input { min-width: 0; padding-inline: 5px; }
.smv-check { display: flex; align-items: center; gap: 7px; color: #c7cad8; font-size: 9px; }
.smv-check input { accent-color: var(--smv-violet); }
.smv-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: rgba(7,9,20,.75); border: 1px solid var(--smv-line); border-radius: 9px; }
.smv-segmented button { min-height: 28px; color: var(--smv-muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 800; }
.smv-segmented button.is-active { color: #fff; background: rgba(155,135,255,.18); }
.smv-curve-presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; }
.smv-curve-presets button { min-height: 28px; padding: 5px 4px; color: #cfd3e7; background: rgba(255,255,255,.035); border: 1px solid var(--smv-line); border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 800; }
.smv-curve-presets button:hover { color: #fff; background: rgba(82,226,208,.1); border-color: rgba(82,226,208,.28); }
.smv-keyframe-tools { display: grid; gap: 4px; }
.smv-keyframe-tools .smv-wide-action { min-height: 30px; text-align: center; }
.smv-note { padding: 8px; margin: 0; color: var(--smv-muted); background: rgba(82,226,208,.035); border-left: 2px solid rgba(82,226,208,.5); font-size: 8px; line-height: 1.45; }
.smv-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.smv-inspector-actions button { min-height: 32px; background: rgba(255,255,255,.04); border: 1px solid var(--smv-line); border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 700; }
.smv-inspector-actions button.danger { color: var(--smv-danger); border-color: rgba(255,114,133,.22); }

.smv-bottom-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0,1fr); background: #0b0d1b; border-top: 1px solid var(--smv-line); }
.smv-transport { display: grid; min-height: 100px; padding: 6px 8px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 10px; border-bottom: 1px solid var(--smv-line); }
.smv-transport-primary, .smv-transport-points, .smv-transport-audio { display: flex; min-width: 0; align-items: center; gap: 7px; }
.smv-transport-points { justify-content: flex-end; overflow-x: auto; }
.smv-transport-audio { grid-column: 1/-1; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.055); }
.smv-audio-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.smv-audio-actions > strong { color: var(--smv-cyan); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.smv-playback-buttons { display: flex; gap: 3px; }
.smv-playback-buttons button, .smv-transport-action, .smv-audio-action { min-height: 30px; padding: 5px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--smv-line); border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; }
.smv-play-primary { color: #08130f !important; background: var(--smv-cyan) !important; border-color: transparent !important; }
.smv-time-readout { display: flex; min-width: 120px; align-items: center; gap: 5px; color: var(--smv-muted); font-family: ui-monospace, Consolas, monospace; font-size: 9px; }
.smv-time-readout strong { color: #fff; }
.smv-transport-primary > label { display: flex; align-items: center; gap: 4px; color: var(--smv-muted); font-size: 8px; white-space: nowrap; }
.smv-transport input[type="number"], .smv-transport select { width: 68px; height: 28px; padding: 4px 6px; color: #fff; background: rgba(7,9,20,.82); border: 1px solid var(--smv-line); border-radius: 7px; font-size: 9px; }
.smv-transport input[type="range"] { width: 96px; accent-color: var(--smv-violet); cursor: pointer; }
.smv-audio-action { color: #baffdd; background: rgba(72,190,122,.12); border-color: rgba(82,226,150,.25); }
.smv-transport-action.is-active { color: #07120f; background: var(--smv-cyan); border-color: transparent; }
.smv-transport-action:disabled { opacity: .38; cursor: not-allowed; }
.smv-transport-divider { width: 1px; height: 28px; flex: 0 0 1px; margin: 0 2px; background: var(--smv-line); }
.smv-audio-status { max-width: 145px; overflow: hidden; color: var(--smv-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smv-stage-audio-player {
  display: grid;
  flex: 1 1 auto;
  min-width: 360px;
  min-height: 56px;
  padding: 8px 10px;
  grid-template-columns: auto minmax(180px,1fr) auto;
  align-items: center;
  gap: 12px;
  background:
    radial-gradient(circle at 7% 50%, rgba(155,135,255,.12), transparent 26%),
    linear-gradient(90deg, rgba(13,16,34,.96), rgba(8,10,22,.96));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.smv-audio-transport, .smv-audio-volume { display: flex; align-items: center; gap: 6px; }
.smv-audio-button { display: grid; width: 32px; height: 32px; padding: 0; color: #d9dbea; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; cursor: pointer; place-items: center; font-family: inherit; font-size: 9px; font-weight: 800; }
.smv-audio-button:hover:not(:disabled) { background: rgba(155,135,255,.13); border-color: rgba(155,135,255,.32); }
.smv-audio-button:disabled { cursor: not-allowed; opacity: .38; }
.smv-audio-play { width: 40px; height: 40px; color: #fff; background: linear-gradient(135deg, var(--smv-violet), #9277ff); border-color: rgba(255,255,255,.17); border-radius: 12px; font-size: 13px; }
.smv-audio-play.is-playing { color: #07130e; background: linear-gradient(135deg, var(--smv-cyan), #7df0ba); }
.smv-audio-center { min-width: 0; }
.smv-audio-meta, .smv-audio-times { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.smv-audio-meta { margin-bottom: 5px; }
.smv-audio-track { display: flex; min-width: 0; align-items: center; gap: 7px; }
.smv-audio-track strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.smv-audio-status-dot { width: 6px; height: 6px; flex: 0 0 auto; background: #686d84; border-radius: 50%; }
.smv-stage-audio-player.has-audio .smv-audio-status-dot { background: var(--smv-cyan); box-shadow: 0 0 9px rgba(82,226,208,.65); }
.smv-stage-audio-player.is-playing .smv-audio-status-dot { animation: smvAudioPulse 1.2s ease-in-out infinite; }
.smv-stage-audio-player.has-error .smv-audio-status-dot { background: var(--smv-danger); box-shadow: 0 0 9px rgba(255,114,133,.55); }
.smv-audio-state { flex: 0 0 auto; color: var(--smv-muted); font-size: 8px; }
.smv-audio-range { --sm-range-progress: 0%; width: 100%; height: 5px; margin: 0; appearance: none; background: linear-gradient(90deg, var(--smv-violet) var(--sm-range-progress), rgba(255,255,255,.09) var(--sm-range-progress)); border-radius: 999px; cursor: ew-resize; }
.smv-audio-range:disabled { cursor: not-allowed; opacity: .45; }
.smv-audio-range::-webkit-slider-thumb { width: 14px; height: 14px; appearance: none; background: #f6f5ff; border: 3px solid #7457ff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.smv-audio-range::-moz-range-thumb { width: 10px; height: 10px; background: #f6f5ff; border: 3px solid #7457ff; border-radius: 50%; }
.smv-audio-times { margin-top: 4px; color: #777c94; font-size: 8px; font-variant-numeric: tabular-nums; }
.smv-audio-volume { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.08); }
.smv-audio-mute { width: 42px; font-size: 8px; }
.smv-audio-mute.is-muted { color: var(--smv-danger); }
.smv-audio-volume-range { width: 74px; background: linear-gradient(90deg, var(--smv-cyan) var(--sm-range-progress), rgba(255,255,255,.09) var(--sm-range-progress)); }
.smv-audio-volume-range::-webkit-slider-thumb { border-color: var(--smv-cyan); }
@keyframes smvAudioPulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }
.smv-danger-text { color: var(--smv-danger) !important; }
.smv-timeline-layout { display: grid; min-width: 0; min-height: 0; grid-template-columns: 195px minmax(0,1fr); }
.smv-track-labels { min-height: 0; overflow: hidden auto; background: #0f1225; border-right: 1px solid var(--smv-line); }
.smv-track-label { display: grid; padding: 5px 9px; grid-template-columns: 25px minmax(0,1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 7px; border-bottom: 1px solid rgba(255,255,255,.055); cursor: pointer; }
.smv-track-label:hover { background: rgba(255,255,255,.025); }
.smv-track-label.is-selected { background: linear-gradient(90deg, rgba(155,135,255,.17), rgba(82,226,208,.04)); box-shadow: inset 3px 0 0 var(--smv-violet); }
.smv-track-object-icon { display: grid; width: 24px; height: 24px; grid-row: 1/3; color: var(--smv-cyan); background: rgba(82,226,208,.08); border: 1px solid rgba(82,226,208,.16); border-radius: 7px; place-items: center; font-size: 10px; }
.smv-track-label > span:not(.smv-track-object-icon) { overflow: hidden; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.smv-track-label small { overflow: hidden; color: var(--smv-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.smv-wave-label { display: grid; padding: 8px; align-content: center; gap: 4px; border-bottom: 1px solid var(--smv-line); }
.smv-wave-label span { font-size: 9px; font-weight: 800; }.smv-wave-label small { color: var(--smv-muted); font-size: 7px; }
.smv-timeline-scroll { position: relative; min-width: 0; min-height: 0; overflow: auto; }
.smv-timeline-content { position: relative; min-height: 100%; background-color: #090b17; background-image: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-position: 0 0; background-size: var(--timeline-step, 75px) 100%; }
.smv-ruler { position: sticky; z-index: 5; top: 0; background: rgba(13,16,32,.97); border-bottom: 1px solid var(--smv-line); }
.smv-ruler span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.13); }
.smv-ruler b { position: absolute; top: 6px; left: 5px; color: var(--smv-muted); font-size: 7px; font-weight: 600; white-space: nowrap; }
.smv-timeline-row { position: absolute; right: 0; left: 0; background: rgba(255,255,255,.006); border-bottom: 1px solid rgba(255,255,255,.055); }
.smv-timeline-row:hover { background: rgba(155,135,255,.025); }
.smv-timeline-row.is-selected { background: linear-gradient(90deg, rgba(155,135,255,.07), transparent 70%); }
.smv-motion-bar { position: absolute; z-index: 2; top: 9px; height: 26px; min-width: 7px; padding: 0 12px; overflow: visible; color: #e9e6ff; background: linear-gradient(90deg, rgba(116,87,255,.78), rgba(82,226,208,.72)); border: 1px solid rgba(255,255,255,.2); border-radius: 7px; box-shadow: 0 5px 13px rgba(0,0,0,.22); cursor: grab; }
.smv-motion-bar:hover { filter: brightness(1.12); }
.smv-motion-bar:active { cursor: grabbing; }
.smv-motion-bar.is-selected { z-index: 3; border-color: #fff; box-shadow: 0 0 0 2px rgba(82,226,208,.28), 0 0 18px rgba(82,226,208,.28); }
.smv-motion-bar > span { display: block; overflow: hidden; font-size: 7px; font-weight: 800; line-height: 24px; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.smv-motion-resize { position: absolute; z-index: 4; top: 3px; width: 6px; height: 18px; background: rgba(255,255,255,.72); border-radius: 3px; cursor: ew-resize; }
.smv-motion-resize-left { left: 3px; }.smv-motion-resize-right { right: 3px; }
.smv-motion-point { position: absolute; z-index: 5; top: 50%; display: grid; width: 16px; height: 16px; padding: 0; color: #0a0d19; background: #f2f0ff; border: 2px solid #7457ff; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,.35); cursor: ew-resize; place-items: center; transform: translate(-50%,-50%); }
.smv-motion-point span { font-size: 6px; font-weight: 900; pointer-events: none; }
.smv-motion-point:hover, .smv-motion-point.is-selected { width: 19px; height: 19px; color: #07120f; background: var(--smv-cyan); border-color: #fff; box-shadow: 0 0 14px rgba(82,226,208,.7); }
.smv-particle-point { background: var(--marker, #52e2d0); border-color: rgba(255,255,255,.82); box-shadow: 0 0 14px var(--marker, #52e2d0); }
.smv-particle-point:hover, .smv-particle-point.is-selected { background: #fff; color: #07120f; border-color: var(--marker, #52e2d0); box-shadow: 0 0 18px var(--marker, #52e2d0); }
.smv-waveform-row { position: absolute; right: 0; left: 0; overflow: hidden; background: #090b17; border-bottom: 1px solid var(--smv-line); cursor: ew-resize; }
#smvWaveformCanvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.smv-playhead { position: absolute; z-index: 7; top: 0; bottom: 0; width: 1px; pointer-events: none; background: #ffd264; box-shadow: 0 0 8px rgba(255,210,100,.65); }
.smv-playhead::before { position: absolute; top: 0; left: -5px; width: 11px; height: 7px; content: ''; background: #ffd264; clip-path: polygon(0 0,100% 0,50% 100%); }
.smv-audio-marker { position: absolute; z-index: 4; top: 0; bottom: 0; width: 1px; padding: 0; background: var(--marker); border: 0; cursor: pointer; }
.smv-audio-marker::before { position: absolute; top: 2px; left: -4px; width: 9px; height: 9px; content: ''; background: var(--marker); border-radius: 50%; }

.smv-modal-backdrop { position: fixed; z-index: 2000; inset: 0; display: grid; padding: 24px; background: rgba(2,3,10,.78); backdrop-filter: blur(8px); place-items: center; }
.smv-modal { width: min(470px, 100%); max-height: min(720px, 88vh); overflow: hidden; background: linear-gradient(150deg, #171b35, #0c0f21); border: 1px solid rgba(155,135,255,.28); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.smv-modal-wide { width: min(760px, 100%); }
.smv-modal-regie { width: min(1120px, 96vw); max-height: min(820px, 92vh); }
.smv-modal > header, .smv-modal > footer { display: flex; padding: 14px 16px; align-items: center; justify-content: space-between; background: rgba(255,255,255,.018); }
.smv-modal > header { border-bottom: 1px solid var(--smv-line); }.smv-modal > footer { justify-content: flex-end; gap: 8px; border-top: 1px solid var(--smv-line); }
.smv-modal h2 { margin: 0; font-size: 15px; }.smv-modal > header button { width: 28px; height: 28px; background: transparent; border: 0; cursor: pointer; font-size: 20px; }
.smv-modal > header p { margin: 3px 0 0; color: var(--smv-muted); font-size: 10px; font-weight: 650; }
.smv-modal-body { max-height: 62vh; padding: 16px; overflow: auto; }
.smv-modal > footer button { min-height: 34px; padding: 7px 13px; background: rgba(255,255,255,.05); border: 1px solid var(--smv-line); border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 700; }
.smv-modal > footer button.primary { color: #08120f; background: var(--smv-cyan); border-color: transparent; }
.smv-modal-regie .smv-modal-body { max-height: calc(92vh - 130px); padding: 14px; }
.smv-camera-regie { display: grid; min-height: min(620px, 68vh); grid-template-columns: minmax(320px, .88fr) minmax(430px, 1.35fr); gap: 14px; }
.smv-camera-monitor, .smv-camera-board { min-width: 0; background: rgba(6,8,20,.62); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.smv-camera-monitor { display: grid; padding: 12px; align-content: start; gap: 12px; }
.smv-camera-monitor-screen { position: relative; display: grid; min-height: 250px; overflow: hidden; padding: 16px; align-content: end; gap: 4px; background: radial-gradient(circle at 50% 38%, rgba(82,226,208,.2), transparent 28%), linear-gradient(180deg, #171b34 0 48%, #0b1023 48% 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; box-shadow: inset 0 0 42px rgba(0,0,0,.34); }
.smv-camera-monitor-screen strong { position: relative; z-index: 2; font-size: 17px; }
.smv-camera-monitor-screen small { position: relative; z-index: 2; color: var(--smv-cyan); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.smv-camera-monitor-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; transform: rotate(var(--camera-yaw)); }
.smv-camera-monitor-reticle { position: absolute; top: calc(50% + var(--camera-pitch)); left: 50%; width: 62px; height: 62px; border: 1px solid rgba(82,226,208,.85); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 18px rgba(82,226,208,.26); }
.smv-camera-monitor-reticle::before, .smv-camera-monitor-reticle::after { position: absolute; content: ""; background: rgba(82,226,208,.78); }
.smv-camera-monitor-reticle::before { top: 50%; left: -18px; right: -18px; height: 1px; }
.smv-camera-monitor-reticle::after { top: -18px; bottom: -18px; left: 50%; width: 1px; }
.smv-camera-monitor-data { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smv-camera-monitor-data div { display: grid; min-width: 0; gap: 3px; padding: 9px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; }
.smv-camera-monitor-data span { color: var(--smv-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.smv-camera-monitor-data strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.smv-camera-regie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.smv-camera-regie-actions button, .smv-camera-board header button { min-height: 32px; padding: 7px 9px; color: #e7e9f7; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 800; }
.smv-camera-regie-actions button:hover, .smv-camera-board header button:hover { background: rgba(155,135,255,.13); border-color: rgba(155,135,255,.32); }
.smv-camera-regie-actions button:disabled { cursor: not-allowed; opacity: .42; }
.smv-camera-board { display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.smv-camera-board header { display: flex; min-height: 52px; padding: 11px 12px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.075); }
.smv-camera-board header div { display: grid; gap: 2px; }
.smv-camera-board header strong { font-size: 12px; }.smv-camera-board header span { color: var(--smv-muted); font-size: 9px; }
.smv-camera-board header button { width: 34px; padding: 0; color: #08120f; background: var(--smv-cyan); border-color: transparent; font-size: 17px; }
.smv-camera-grid { display: grid; max-height: 100%; padding: 10px; align-content: start; gap: 8px; overflow: auto; }
.smv-camera-card { display: grid; min-height: 82px; padding: 9px; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 10px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.075); border-radius: 12px; cursor: pointer; }
.smv-camera-card:hover { background: rgba(155,135,255,.07); border-color: rgba(155,135,255,.25); }
.smv-camera-card.is-selected { background: linear-gradient(90deg, rgba(155,135,255,.18), rgba(82,226,208,.055)); border-color: rgba(82,226,208,.42); box-shadow: inset 3px 0 0 var(--smv-cyan); }
.smv-camera-card-preview { position: relative; width: 82px; height: 58px; overflow: hidden; background: linear-gradient(180deg, #1b2040 0 52%, #0a0d1c 52% 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; }
.smv-camera-card-preview span { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 20px 20px; transform: rotate(var(--camera-yaw)); }
.smv-camera-card-preview b { position: absolute; top: calc(50% + var(--camera-pitch)); left: 50%; width: 24px; height: 24px; border: 1px solid var(--smv-cyan); border-radius: 50%; transform: translate(-50%,-50%); }
.smv-camera-card-main { display: grid; min-width: 0; gap: 4px; }
.smv-camera-card-main input { width: 100%; min-height: 30px; padding: 6px 8px; color: #fff; background: rgba(7,9,20,.82); border: 1px solid rgba(255,255,255,.085); border-radius: 8px; outline: none; font-size: 11px; font-weight: 800; }
.smv-camera-card-main input:focus { border-color: rgba(82,226,208,.52); box-shadow: 0 0 0 2px rgba(82,226,208,.08); }
.smv-camera-card-main small { overflow: hidden; color: var(--smv-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smv-camera-card-actions { display: grid; width: 76px; gap: 4px; }
.smv-camera-card-actions button { min-height: 24px; padding: 4px 6px; color: #dfe2f0; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 850; }
.smv-camera-card-actions button:hover { color: #fff; background: rgba(82,226,208,.11); border-color: rgba(82,226,208,.26); }
.smv-camera-card-actions button.danger { color: var(--smv-danger); }
.smv-library-list { display: grid; gap: 7px; }.smv-library-list article { display: grid; padding: 9px; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 6px; background: rgba(255,255,255,.025); border: 1px solid var(--smv-line); border-radius: 10px; }
.smv-library-list article > div { display: grid; gap: 3px; }.smv-library-list small { color: var(--smv-muted); font-size: 8px; }
.smv-library-list button { min-height: 28px; padding: 5px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--smv-line); border-radius: 7px; cursor: pointer; font-size: 8px; }.smv-library-list button.danger { color: var(--smv-danger); }
.smv-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smv-settings-subsection { display: grid; padding: 10px; gap: 8px; background: rgba(255,255,255,.025); border: 1px solid var(--smv-line); border-radius: 10px; }
.smv-settings-subsection h3 { margin: 0; color: #d9dce8; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

.smv-context-menu { position: fixed; z-index: 2200; display: grid; width: 180px; padding: 6px; gap: 2px; background: #161a34; border: 1px solid rgba(155,135,255,.3); border-radius: 11px; box-shadow: 0 18px 48px rgba(0,0,0,.48); }
.smv-context-menu[hidden] { display: none; }.smv-context-menu button { padding: 8px 9px; background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 9px; text-align: left; }.smv-context-menu button:hover { background: rgba(155,135,255,.12); }.smv-context-menu button.danger { color: var(--smv-danger); }
.smv-toast { position: fixed; z-index: 2300; right: 22px; bottom: 22px; max-width: 360px; padding: 11px 14px; color: #fff; background: #1b203d; border: 1px solid var(--smv-line); border-radius: 11px; box-shadow: 0 18px 45px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; font-size: 10px; font-weight: 700; }
.smv-toast.is-visible { opacity: 1; transform: translateY(0); }.smv-toast[data-type="success"] { border-color: rgba(82,226,155,.45); }.smv-toast[data-type="error"] { border-color: rgba(255,114,133,.5); }
.smv-empty { padding: 22px 12px; color: var(--smv-muted); font-size: 9px; line-height: 1.5; text-align: center; }

@media (max-width: 1280px) {
  .smv-workspace { grid-template-columns: 205px minmax(320px,1fr) 270px; }
  .smv-toolbar { grid-template-columns: minmax(150px,.6fr) auto minmax(140px,.5fr); gap: 6px; }
  .smv-icon-button { min-width: 39px; padding-inline: 4px; }.smv-icon-button small { display: none; }
  .smv-view-buttons button { padding-inline: 5px; }.smv-toggle-buttons label { font-size: 0; }.smv-toggle-buttons input { width: 14px; height: 14px; }
  .smv-transport { gap: 5px 7px; }.smv-transport-primary, .smv-transport-points, .smv-transport-audio { gap: 5px; }.smv-transport-action { padding-inline: 6px; }
  .smv-transport-audio { align-items: stretch; flex-wrap: wrap; }
  .smv-stage-audio-player { min-width: min(100%, 360px); }
}

@media (max-width: 980px) {
  .smv-root { grid-template-rows: auto minmax(300px,1fr) minmax(210px,30vh); }
  .smv-workspace { grid-template-columns: 180px minmax(300px,1fr); }
  .smv-right-panel { display: none; }
  .smv-toolbar-actions-right { display: none; }
  .smv-toolbar { grid-template-columns: minmax(150px,1fr) auto; }
  .smv-camera-regie { grid-template-columns: 1fr; }
  .smv-camera-card { grid-template-columns: 72px minmax(0,1fr); }
  .smv-camera-card-actions { width: auto; grid-column: 1/-1; grid-template-columns: repeat(4,minmax(0,1fr)); }
}


/* Typographie compacte : les repères restent dans leur géométrie de timeline. */
.smv-toolbar-kicker,
.smv-icon-button small,
.smv-panel-heading span,
.smv-inspector-section h3,
.smv-audio-actions > strong { font-size: 9px; }
.smv-panel-tabs button,
.smv-wide-action,
.smv-list-card > button,
.smv-asset-actions button,
.smv-tool-group button,
.smv-toggle-buttons label,
.smv-field,
.smv-check,
.smv-segmented button,
.smv-inspector-actions button,
.smv-playback-buttons button,
.smv-transport-action,
.smv-audio-action,
.smv-context-menu button { font-size: 10px; }
.smv-field input,
.smv-field select,
.smv-field textarea,
.smv-vector-field input,
.smv-transport input[type="number"],
.smv-transport select { font-size: 11px; line-height: 1.3; }
.smv-list-copy strong,
.smv-panel-heading strong,
.smv-track-label > span:not(.smv-track-object-icon),
.smv-wave-label span { font-size: 10px; }
.smv-list-copy small,
.smv-asset-card small,
.smv-panel-heading small,
.smv-track-label small,
.smv-wave-label small,
.smv-audio-status,
.smv-library-list small,
.smv-empty { font-size: 9px; }
.smv-note,
.smv-time-readout,
.smv-transport-primary > label,
.smv-toast { font-size: 10px; }
.smv-ruler b,
.smv-motion-bar > span { font-size: 8px; }
.smv-motion-point span { font-size: 7px; }
.smv-modal > footer button,
.smv-library-list button { font-size: 10px; }