/* ── VISUAL TAB ──────────────────────────────────────────────────────── */
.visual-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  background: var(--bg);
}

.visual-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Stage canvas wrap ───────────────────────────────────────────────── */
.visual-stage {
  flex: 1;
  position: relative;
  background: #050705;
  overflow: hidden;
  min-width: 0;
  cursor: default;
}
.visual-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Click-and-hold stacked-props popup on the stage. */
.v-stack-menu {
  position: fixed;
  z-index: 400;
  min-width: 150px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface, #0d120e);
  border: 1px solid var(--border2);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  padding: 4px;
}
.v-stack-menu-hdr {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--label);
  padding: 4px 6px 5px;
  text-transform: uppercase;
}
.v-stack-menu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.v-stack-menu-item:hover { background: rgba(0,229,255,0.12); }
.v-stack-menu-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 5px currentColor; }
.v-stack-menu-name { flex: 1; font-size: 10px; color: var(--text); white-space: nowrap; }
.v-stack-menu-type { font-size: 8px; color: var(--label); text-transform: uppercase; }
.visual-stage-tools {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  background: rgba(15, 18, 16, 0.7);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: var(--r-md);
}

/* Wizard launch button inside the stage tools overlay */
.visual-wizard-btn {
  color: var(--accent2) !important;
  border-color: rgba(0,232,143,0.4) !important;
  background: rgba(0,232,143,0.06) !important;
  letter-spacing: 1.5px;
}
.visual-wizard-btn:hover {
  background: rgba(0,232,143,0.15) !important;
  box-shadow: 0 0 10px rgba(0,232,143,0.2);
}

/* ── Left side: rule editor panel ───────────────────────────────────── */
.visual-editor {
  width: 460px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.visual-editor::-webkit-scrollbar { width: 6px; }
.visual-editor::-webkit-scrollbar-track { background: transparent; }
.visual-editor::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-pill); }

.v-editor-empty {
  padding: 60px 30px;
  text-align: center;
  color: var(--label);
}
.v-editor-empty-icon {
  font-size: 36px;
  color: var(--border2);
  margin-bottom: 12px;
}
.v-editor-empty-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--label);
  margin-bottom: 8px;
}
.v-editor-empty-hint {
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 1.6;
  color: var(--border2);
}

/* ── New-effect bar (always at the top of the rule editor) ───────────── */
.v-new-effect-bar {
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg2, rgba(255,255,255,0.02));
}
.v-ne-plus { font-size: 8px; letter-spacing: 2px; color: var(--accent2); text-transform: uppercase; }
.v-ne-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.v-ne-sel {
  flex: 1; min-width: 0; font-family: 'DM Mono', monospace; font-size: 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 4px 5px; outline: none; cursor: pointer;
}
.v-ne-sel.set { border-color: var(--accent2); color: var(--accent2); }
.v-ne-x { color: var(--label); font-size: 10px; }
.v-ne-create {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; padding: 5px 10px;
  background: var(--accent2); color: var(--bg); border: none; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
}
.v-ne-create:disabled { background: var(--surface2); color: var(--border2); cursor: not-allowed; }
.v-ne-hint { font-size: 8.5px; color: var(--label); margin-top: 5px; }
.v-editor-x { color: var(--label); font-weight: 400; }
.v-editor-pickgroup-hint {
  font-size: 8.5px; color: var(--label); padding: 6px 12px; border-bottom: 1px solid var(--border);
}
.v-dual-empty { padding: 30px 18px; text-align: center; color: var(--text); }
.v-dual-empty-title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}
.v-dual-empty-title strong { color: var(--accent2); font-weight: 700; }
.v-dual-empty-x { color: var(--text2); margin: 0 2px; }
.v-dual-empty-hint {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text2);
}

/* ── Editor header ───────────────────────────────────────────────────── */
.v-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.v-editor-track-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--track-color, var(--accent2));
  box-shadow: 0 0 12px var(--track-color, var(--accent2));
  flex-shrink: 0;
}
.v-editor-track-meta { flex: 1; min-width: 0; }
.v-editor-track-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--text);
}
.v-editor-track-sub {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--label);
  margin-top: 2px;
}

/* Toggle (custom checkbox) */
.v-editor-toggle {
  position: relative;
  cursor: pointer;
}
.v-editor-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.v-editor-toggle span {
  display: inline-block;
  width: 30px; height: 16px;
  background: var(--border);
  border-radius: 8px;
  position: relative;
  transition: background .15s;
}
.v-editor-toggle span::before {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  background: var(--label);
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
.v-editor-toggle input:checked + span {
  background: rgba(0, 255, 127, 0.25);
}
.v-editor-toggle input:checked + span::before {
  transform: translateX(13px);
  background: var(--accent2);
}

/* ── Layer stack ─────────────────────────────────────────────────────── */
.v-layer-list {
  display: flex;
  flex-direction: column;
}
.v-layer {
  border-bottom: 1px solid var(--border);
}
.v-layer.disabled .v-layer-body { opacity: 0.45; }
.v-layer.collapsed .v-layer-body { display: none; }

.v-layer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background var(--trans);
}
.v-layer-head:hover { background: rgba(255,255,255,0.025); }
.v-layer:not(.collapsed) > .v-layer-head { background: rgba(0,229,255,0.03); }

/* Arrow indicator embedded in the layer title — mirrors .v-effect-expand-arrow */
.v-layer-expand-arrow {
  display: inline-block;
  font-size: 8px;
  line-height: 1;
  color: var(--border2);
  margin-right: 4px;
  vertical-align: middle;
  transition: color var(--trans);
}
.v-layer-expand-arrow::before         { content: '▸'; }
.v-layer-expand-arrow.expanded::before { content: '▾'; }
.v-layer:not(.collapsed) .v-layer-expand-arrow { color: var(--accent); }
.v-layer-slot {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--accent2);
  width: 22px;
  text-align: center;
}
.v-layer-meta { flex: 1; min-width: 0; }
.v-layer-title {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text);
  text-transform: uppercase;
}
.v-layer-sub {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--label);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-layer-remove {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--label);
  padding: 3px 7px;
  cursor: pointer;
  transition: all .12s;
}
.v-layer-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.v-layer-body {
  padding: 14px 18px 18px;
}
.v-add-layer-row {
  padding: 14px 18px 18px;
}
.v-add-layer-btn {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 10px;
  border: 1px dashed var(--border2);
  background: transparent;
  color: var(--label);
  cursor: pointer;
  transition: all .12s;
}
.v-add-layer-btn:hover {
  border-color: var(--accent2);
  color: var(--accent2);
  border-style: solid;
}
.v-add-layer-hint {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--border2);
  line-height: 1.6;
  margin-top: 8px;
  text-align: center;
}

/* ── Editor sections ─────────────────────────────────────────────────── */
.v-editor-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.v-section-label {
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--label);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.v-section-hint {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--border2);
  line-height: 1.6;
  margin-top: 12px;
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  background: var(--bg);
}

/* ── Group section (collapsible header + body) ───────────────────────── */
.v-group-section {
  margin-bottom: 14px;
}
.v-group-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  user-select: none;
}
.v-group-section-collapse {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--label);
  background: transparent;
  border: none;
  padding: 0;
  width: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s;
}
.v-group-section-collapse:hover { color: var(--accent2); }
.v-group-section.collapsed .v-group-section-body { display: none; }

/* Compact body: one selected card + a CHANGE pill, side by side. */
.v-group-section-body.compact {
  /* No grid — let .v-group-compact lay out flex-row */
}
.v-group-compact {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.v-group-compact .v-group-card {
  flex: 1;
  min-width: 0;
}
.v-group-change {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--label);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .12s;
  white-space: nowrap;
}
.v-group-change:hover {
  border-color: var(--accent2);
  color: var(--accent2);
}

/* ── Group grid ──────────────────────────────────────────────────────── */
.v-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.v-group-empty {
  font-size: 9px;
  color: var(--border2);
  letter-spacing: 1px;
  line-height: 1.6;
  padding: 16px;
  border: 1px dashed var(--border);
  text-align: center;
}

.v-group-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  font-family: 'DM Mono', monospace;
  text-align: left;
  color: var(--text);
  transition: border-color .15s, transform .12s;
}
.v-group-card:hover {
  border-color: var(--accent2);
  transform: translateY(-1px);
}
.v-group-card.selected {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2), 0 0 12px rgba(0, 255, 127, 0.2);
}
.v-group-preview {
  width: 100%;
  height: 70px;
  display: block;
  background: #060a06;
  border-bottom: 1px solid var(--border);
}
.v-group-meta {
  padding: 6px 8px 8px;
}
.v-group-name {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-group-sub {
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--label);
  margin-top: 2px;
}


/* ── Pattern selector ────────────────────────────────────────────────── */
.v-pattern-select {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  outline: none;
  letter-spacing: 1px;
  cursor: pointer;
}
.v-pattern-select:focus { border-color: var(--accent2); }
.v-pattern-n-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.v-pattern-n-row[hidden] { display: none; }
.v-inline-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--label);
}
.v-pattern-n {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  width: 60px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 8px;
  outline: none;
}
.v-pattern-n:focus { border-color: var(--accent2); }
.v-inline-hint {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--border2);
}

/* ── Effects cycle list ──────────────────────────────────────────────── */
.v-effects-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v-effects-empty {
  font-size: 9px;
  color: var(--border2);
  letter-spacing: 1px;
  padding: 10px;
  border: 1px dashed var(--border);
  text-align: center;
}
.v-effect-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
  border-radius: var(--r-sm);
}
.v-effect-slot {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: var(--accent2);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.v-effect-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Inline color picker that doubles as the effect swatch.
   Matches .v-effect-dot size so chip layout is unchanged. */
.v-effect-color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
.v-effect-color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.v-effect-color-swatch::-webkit-color-swatch         { border: none; border-radius: 50%; }
.v-effect-color-swatch::-moz-color-swatch            { border: none; border-radius: 50%; }
.v-effect-color-swatch:hover { border-color: rgba(255,255,255,0.45); }
.v-effect-label {
  flex: 1;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-effect-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.v-effect-actions button {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--label);
  padding: 3px 6px;
  cursor: pointer;
  transition: all var(--trans);
  border-radius: var(--r-xs);
}
.v-effect-actions button:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}

/* Click-to-expand effect row */
.v-effect-row--expandable {
  cursor: pointer;
  user-select: none;
  transition: background var(--trans);
}
.v-effect-row--expandable:hover {
  background: rgba(255, 255, 255, 0.03);
}
.v-effect-row--open {
  background: rgba(0, 229, 255, 0.04);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
/* Small arrow indicator embedded in the label */
.v-effect-expand-arrow {
  display: inline-block;
  font-size: 8px;
  line-height: 1;
  color: var(--border2);
  margin-right: 3px;
  vertical-align: middle;
  transition: color var(--trans), transform var(--trans);
}
.v-effect-expand-arrow::before  { content: '▸'; }
.v-effect-expand-arrow.expanded::before { content: '▾'; }
.v-effect-row--open .v-effect-expand-arrow { color: var(--accent); }
/* The effect the user landed on in the cycle (clicked its track / bar). */
.v-effect-row--selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.v-effect-row--selected .v-effect-slot { color: var(--accent); }
/* Focused cycle effect — the one whose firings carry the dotted timeline outline.
   A dashed ring on the row ties it to the dashed bars in the timeline. */
.v-effect-row--focus {
  outline: 1px dashed rgba(255,255,255,0.85);
  outline-offset: -2px;
}
.v-effect-actions button[data-eff-action="remove"]:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Ladder options panel — appears below an effect row when the 3-state
   ladder button is in its OPEN state.  Cyan tint distinguishes it
   from the general inline params panel. */
.v-ladder-panel {
  padding: 8px 12px 10px;
  margin: -2px 0 4px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* Inline effect parameter panel (expanded from ▸ toggle in effect row) */
.v-effect-inline-params {
  padding: 10px 12px 12px;
  margin: -2px 0 4px;
  background: rgba(0,229,255,0.03);
  border: 1px solid rgba(0,229,255,0.15);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.v-add-effect-row { margin-top: 10px; display: flex; gap: 6px; }
.v-add-effect-btn {
  flex: 1;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  background: rgba(0,229,255,0.04);
  color: var(--accent);
  border: 1px dashed rgba(0,229,255,0.35);
  padding: 8px 10px;
  outline: none;
  letter-spacing: 1.5px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
}
.v-add-effect-btn:hover {
  background: rgba(0,229,255,0.10);
  border-color: rgba(0,229,255,0.6);
}
/* COPY EFFECT — amber tint to distinguish from ADD */
.v-copy-effect-btn {
  flex: 0 0 auto;
  background: rgba(255,200,40,0.04);
  color: #ffcc28;
  border-color: rgba(255,200,40,0.35);
}
/* RE-ATTACH detached effect(s) back to the beat track */
.eff-ve-reattach-btn {
  width: 100%;
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 3px;
  color: #ffb14a;
  background: rgba(255,150,40,0.06);
  border: 1px dashed rgba(255,150,40,0.4);
  transition: background 0.15s, border-color 0.15s;
}
.eff-ve-reattach-btn:hover { background: rgba(255,150,40,0.14); border-color: rgba(255,150,40,0.7); }
.eff-ve-delete-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.eff-ve-delete-btn {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 3px;
  color: #ff6b6b;
  background: rgba(255,70,70,0.06);
  border: 1px solid rgba(255,70,70,0.35);
  transition: background 0.15s, border-color 0.15s;
}
.eff-ve-delete-btn:hover { background: rgba(255,70,70,0.16); border-color: rgba(255,70,70,0.75); }
/* Silence-this-section button — amber to distinguish from the red delete-effect */
.eff-ve-delsec-btn {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px; letter-spacing: 1px;
  padding: 6px 8px; cursor: pointer; border-radius: 3px;
  color: #ffb454; background: rgba(255,160,40,0.06);
  border: 1px solid rgba(255,160,40,0.35);
  transition: background 0.15s, border-color 0.15s;
}
.eff-ve-delsec-btn:hover { background: rgba(255,160,40,0.16); border-color: rgba(255,160,40,0.75); }
/* Re-add variant: the section is deleted, click to bring the effect back (green). */
.eff-ve-delsec-btn.eff-ve-delsec-restore {
  color: #6fe08f; background: rgba(60,200,120,0.07);
  border-color: rgba(60,200,120,0.4);
}
.eff-ve-delsec-btn.eff-ve-delsec-restore:hover { background: rgba(60,200,120,0.18); border-color: rgba(60,200,120,0.8); }
.v-copy-effect-btn:hover {
  background: rgba(255,200,40,0.12);
  border-color: rgba(255,200,40,0.7);
}
.v-preset-row { margin-bottom: 2px; }

/* ── Group "add track" picker ────────────────────────────────────────── */
.v-group-add-track-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.v-group-add-track-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--track-color, var(--accent));
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  color: var(--text);
  font-size: 11px;
}
.v-group-add-track-btn:hover { background: rgba(255,255,255,0.08); }
.v-group-add-track-btn.hit {
  background: rgba(255,255,255,0.11);
  border-left-color: var(--track-color, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--track-color, var(--accent)) 55%, transparent),
              0 0 8px color-mix(in srgb, var(--track-color, var(--accent)) 40%, transparent);
}
.v-group-add-track-name { flex: 1; }
.v-group-add-track-cnt {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--label);
}

/* Inline new-tap-track form — hidden until "＋ ADD NEW TRACK" is clicked */
.v-group-new-track-form {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 0 2px;
  width: 100%;
}
.v-group-new-track-form.open { display: flex; }

/* ── Save-preset button ──────────────────────────────────────────────── */
.v-eff-save-btn {
  font-size: 11px !important;
  color: rgba(255,220,80,0.7) !important;
  transition: color 0.12s;
}
.v-eff-save-btn:hover { color: #ffdc50 !important; }

/* ── Section tab bar ─────────────────────────────────────────────────── */
.v-section-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px 6px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--border);
}
.v-section-tab {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--label);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.v-section-tab:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.v-section-tab.active {
  background: rgba(0,229,255,0.15);
  border-color: rgba(0,229,255,0.6);
  color: var(--accent);
}
/* Dot shown on tabs that have a section-specific override */
.v-section-tab.has-override { border-color: rgba(0,229,255,0.35); color: var(--text); }
.v-section-tab.has-override.active { border-color: rgba(0,229,255,0.7); }
.v-sec-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Clickable "active" dot → deactivates the section (bigger hit area + hover). */
.v-sec-dot[role="button"] {
  cursor: pointer;
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow 0.12s, background 0.12s;
}
.v-sec-dot[role="button"]:hover {
  background: var(--danger, #ff5a4a);
  box-shadow: 0 0 0 3px rgba(255,90,74,0.25);
}
/* Deactivated section: red dot that stays red; hovering hints reactivation (blue). */
.v-sec-dot--off { background: var(--danger, #ff5a4a); }
.v-sec-dot--off[role="button"]:hover {
  background: var(--accent, #00e5ff);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.25);
}
/* Just-toggled dot: hold the color it switched TO even while the cursor is still
   on it — the next-state preview only returns after you leave and re-hover. */
.v-sec-dot--held[role="button"]:hover {
  background: var(--accent, #00e5ff);
  box-shadow: 0 0 0 3px transparent;
}
.v-sec-dot--off.v-sec-dot--held[role="button"]:hover {
  background: var(--danger, #ff5a4a);
  box-shadow: 0 0 0 3px transparent;
}
/* Deactivated-section notice sits like the inherit note but tinted. */
.eff-ve-deactivated-row .eff-ve-inherit-note { color: var(--danger, #ff5a4a); }
/* Inheriting-section row: note + a button to fork a unique per-section cycle */
.eff-ve-inherit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
}
.eff-ve-inherit-note {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--border2);
  line-height: 1.4;
  flex: 1;
}
.eff-ve-make-unique {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 4px 8px;
  background: rgba(0,229,255,0.05);
  color: var(--accent);
  border: 1px dashed rgba(0,229,255,0.4);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.eff-ve-make-unique:hover {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.65);
}
/* ✕ Reset button sits at the right of the tab bar */
.v-sec-delete-override {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border: 1px solid rgba(255,80,80,0.3);
  background: rgba(255,80,80,0.05);
  color: rgba(255,100,100,0.8);
  border-radius: 3px;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.12s, border-color 0.12s;
}
.v-sec-delete-override:hover {
  background: rgba(255,80,80,0.14);
  border-color: rgba(255,80,80,0.7);
  color: #ff6060;
}

/* ── Section sub-tabs (individual sections within a type) ────────────── */
.v-section-subtabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 14px 6px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid var(--border);
}
.v-section-subtab {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--label);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.v-section-subtab:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.v-section-subtab.active {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.5);
  color: var(--accent);
}
.v-section-subtab.has-override { border-color: rgba(0,229,255,0.3); color: var(--text); }

/* ── Tap track ───────────────────────────────────────────────────────── */
.v-tap-track { border-style: dashed; }
.v-tap-track.tapping { animation: v-tap-pulse 0.9s ease-in-out infinite; }
@keyframes v-tap-pulse {
  0%, 100% { border-color: rgba(255,100,0,0.4); }
  50%       { border-color: rgba(255,100,0,0.9); }
}
.v-tap-badge {
  color: #ff6600;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Add-track button ────────────────────────────────────────────────── */
.v-add-track-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: transparent;
  color: var(--label);
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  margin-left: 4px;
  align-self: center;
}
.v-add-track-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.5);
  color: var(--text);
}

/* ── Add-track popup panel ───────────────────────────────────────────── */
/* position/bottom/right are set inline by JS (fixed, above the + button) */
.v-add-track-panel {
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 10px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v-atp-section {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--label);
  text-transform: uppercase;
}
.v-atp-beat-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 140px;
  overflow-y: auto;
}
.v-atp-beat-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--track-color, var(--accent));
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.v-atp-beat-item:hover { background: rgba(255,255,255,0.07); }
.v-atp-divider { border-top: 1px solid var(--border); margin: 2px 0; }
.v-atp-create:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Add-track modal (effects view) ─────────────────────────────────────── */
.atm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.atm-overlay.visible { opacity: 1; }

.atm-modal {
  width: min(560px, calc(100vw - 48px));
  max-height: min(620px, calc(100vh - 64px));
  overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.atm-head { display: flex; flex-direction: column; gap: 6px; position: relative; }
.atm-step-chip {
  align-self: flex-start;
  font-size: 8px; letter-spacing: 2px;
  color: var(--accent);
  background: rgba(0,217,255,0.08);
  border: 1px solid rgba(0,217,255,0.25);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.atm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 3px;
  color: var(--fg);
}
.atm-close {
  position: absolute; top: 0; right: 0;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--r-xs);
  color: var(--label);
  cursor: pointer;
  transition: all .12s;
}
.atm-close:hover { border-color: var(--danger); color: var(--danger); }

.atm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.atm-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.atm-card:hover {
  border-color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0,232,143,0.12);
}
.atm-card.selected {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px rgba(0,232,143,0.35), 0 0 14px rgba(0,232,143,0.10);
}
.atm-card-canvas {
  width: 100%; height: 72px; display: block;
  background: #060a06;
  border-radius: var(--r-xs);
}
.atm-card-name {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: 1px;
  color: var(--fg); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atm-card-sub { font-size: 8px; letter-spacing: 1px; color: var(--label); }

.atm-track-list { display: flex; flex-direction: column; gap: 6px; }
.atm-track {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.atm-track:hover { border-color: var(--accent2); background: var(--surface3); }
/* "New tap track" — same row shape, dashed to read as an add action */
.atm-track-new { border-style: dashed; }
.atm-track-new .atm-track-name { color: var(--label); }
.atm-track-new:hover .atm-track-name { color: var(--text); }
.atm-track-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.atm-track-name {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: 1px;
  color: var(--text); text-transform: uppercase;
}
.atm-track-sub { margin-left: auto; font-size: 8.5px; color: var(--label); }

.atm-empty {
  padding: 22px;
  text-align: center;
  font-size: 10px; letter-spacing: 0.5px;
  color: var(--text2); line-height: 1.7;
  border: 1px dashed var(--border2);
  border-radius: var(--r-sm);
}

.atm-foot {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  flex-wrap: wrap;
}
.atm-alt { font-size: 8.5px; letter-spacing: 0.5px; color: var(--label); }
.atm-tap-form { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.atm-back {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--label);
  cursor: pointer;
  transition: all .12s;
}
.atm-back:hover { border-color: var(--accent2); color: var(--accent2); }

/* ── Wizard role mapper ─────────────────────────────────────────────────── */
.rm-modal { width: min(640px, calc(100vw - 48px)); }
.rm-sub {
  font-size: 9px; letter-spacing: 0.5px;
  color: var(--text2); line-height: 1.6;
}

.rm-warn {
  border: 1px solid rgba(255,178,36,0.4);
  background: rgba(255,178,36,0.05);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.rm-warn-title { font-size: 9px; letter-spacing: 1.5px; color: var(--warn); }
.rm-warn-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 9.5px; letter-spacing: 0.3px; color: var(--text);
  line-height: 1.55;
}
.rm-warn-row strong { color: var(--warn); font-weight: 500; }
.rm-warn-fix {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: 1px;
  padding: 5px 10px;
  background: rgba(255,178,36,0.10);
  border: 1px solid rgba(255,178,36,0.45);
  border-radius: var(--r-pill);
  color: var(--warn);
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
}
.rm-warn-fix:hover { background: rgba(255,178,36,0.2); }
.rm-warn-nofix { font-size: 8px; letter-spacing: 0.5px; color: var(--label); font-style: italic; }

.rm-rows { display: flex; flex-direction: column; gap: 6px; }
.rm-row {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
}
.rm-row.unresolved { border-style: dashed; }
.rm-row-main {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background var(--trans);
}
.rm-row-main:hover { background: var(--surface3); }
.rm-role-icon { font-size: 15px; width: 22px; text-align: center; color: var(--accent); flex-shrink: 0; }
.rm-role-info { flex: 1; min-width: 0; }
.rm-role-name {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: 1px;
  color: var(--fg); text-transform: uppercase;
}
.rm-role-expect {
  font-size: 8.5px; letter-spacing: 0.3px;
  color: var(--label); line-height: 1.45;
}
.rm-thumb {
  width: 74px; height: 42px;
  background: #060a06;
  border-radius: var(--r-xs);
  flex-shrink: 0;
}
.rm-binding { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; min-width: 90px; }
.rm-group-name {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.5px;
  color: var(--text);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-badge {
  font-size: 7px; letter-spacing: 1.5px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border2);
  color: var(--label);
}
.rm-badge.custom { border-color: rgba(0,232,143,0.45); color: var(--accent2); background: rgba(0,232,143,0.07); }
.rm-badge.none   { border-color: rgba(255,178,36,0.4);  color: var(--warn); }
.rm-chevron { color: var(--label); font-size: 10px; flex-shrink: 0; }

.rm-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.rm-pick-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--trans);
}
.rm-pick-card:hover { border-color: var(--accent2); }
.rm-pick-card.selected {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px rgba(0,232,143,0.35);
}
.rm-pick-canvas { height: 52px; }
.rm-pick-auto { align-items: center; justify-content: center; text-align: center; }
.rm-pick-auto-icon { font-size: 18px; padding: 8px 0 2px; }

.v-atp-tap-form {
  display: flex;
  gap: 5px;
  align-items: center;
}
.v-atp-label {
  flex: 1;
  padding: 4px 7px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 10px;
  outline: none;
}
.v-atp-label:focus { border-color: var(--accent); }
.v-atp-color { width: 24px; height: 24px; border: none; border-radius: 3px; cursor: pointer; padding: 0; }
.v-atp-create {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 4px 8px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.35);
  color: var(--accent);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.v-atp-create:hover { background: rgba(0,229,255,0.18); }
.v-atp-hint {
  font-size: 9px;
  color: var(--label);
  line-height: 1.4;
  opacity: 0.75;
}

/* ── Section inherit panel (no override yet) ─────────────────────────── */
.v-sec-inherit-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px;
  gap: 8px;
  text-align: center;
}
.v-sec-inherit-icon {
  font-size: 28px;
  color: var(--label);
  opacity: 0.5;
  line-height: 1;
}
.v-sec-inherit-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
}
.v-sec-inherit-sub {
  font-size: 10px;
  color: var(--accent);
  opacity: 0.75;
}
.v-sec-inherit-hint {
  font-size: 10px;
  color: var(--label);
  max-width: 260px;
  line-height: 1.5;
}
.v-sec-create-override-btn {
  margin-top: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 9px 18px;
  border: 1px dashed rgba(0,229,255,0.45);
  background: rgba(0,229,255,0.05);
  color: var(--accent);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.v-sec-create-override-btn:hover {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.75);
}

/* (legacy timeline styles removed — replaced by .visual-timeline-area) */

/* ── Combined timeline area (chord blocks + scrub bar) ───────────────── */
.visual-timeline-area {
  flex-shrink: 0;
  height: 93px;           /* waveform strip 66px + 26px scrub — matches the timeline ruler
                             (66px row) + structure strip (26px) so nothing jumps on switch */
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  user-select: none;
  overflow: hidden;   /* clip content when dragged small */
}
/* Header row */
.vta-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  height: 28px;
  flex-shrink: 0;
}
.vta-transport {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  width: 26px;
  height: 22px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: all var(--trans);
  border-radius: var(--r-sm);
}
.vta-transport:hover {
  border-color: var(--accent2);
  background: rgba(0, 255, 127, 0.08);
}
.vta-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Segmented FULL/SOLO playback render-mode control */
.vta-mode {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0;
  flex-shrink: 0;
}
.vta-mode-btn {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--label);
  cursor: pointer;
  transition: all .12s;
  min-width: 38px;
  height: 22px;
}
.vta-mode-btn + .vta-mode-btn { border-left: 1px solid var(--border); }
.vta-mode-btn:hover {
  color: var(--accent2);
}
.vta-mode-btn.active {
  background: rgba(0, 255, 127, 0.10);
  color: var(--accent2);
  text-shadow: 0 0 6px rgba(0, 255, 127, 0.5);
}
.vta-toggle {
  font-size: 10px;
  color: var(--label);
  width: 14px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}
.vta-title {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text2);
  text-transform: uppercase;
}
.vta-subtitle {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--label);
}
.vta-spacer { flex: 1; }
.vta-action {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--label);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
  border-radius: var(--r-sm);
}
.vta-action:not(:disabled):hover {
  border-color: var(--accent2);
  color: var(--accent2);
}
.vta-action:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.vta-zoom-readout {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
  padding: 0 4px;
}
.vta-time {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

/* Body — color strip stacked above timeline.  Both children fill the row
   exactly so chord-block at time T sits above timeline at time T.
   overflow:visible so the playhead's triangle/disc can extend slightly
   past the body's bounds for visual punch.  Inner rows do their own
   clipping via .vta-color-strip's overflow:hidden. */
.vta-body {
  position: relative;
  background: var(--bg);
  flex: 1;               /* grow to fill space below vta-head */
  min-height: 0;
  display: flex;
  flex-direction: row;   /* [header box] [waveform column] */
}
/* Left header box on the waveform line — mirrors the timeline track-header. */
.vta-header-box {
  width: 140px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.vta-header-box .hdr-view-toggle { border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* Waveform / sections / chords view buttons (SVG icons, like the timeline) */
.vta-strip-views { border: none; border-radius: 0; margin: 0; flex: 1;
  border-bottom: 1px solid var(--border); }
.vta-strip-views .ruler-view-btn { padding: 1px 0; }
.vta-strip-views .ruler-view-btn svg { height: 12px; }
.vta-strip-views .ruler-view-btn + .ruler-view-btn { border-left: 1px solid var(--border); }
/* Full / Solo below the view buttons, full width of the box */
.vta-header-box .vta-mode { display: flex; flex-shrink: 0; padding: 3px 5px; gap: 0; }
.vta-header-box .vta-mode-btn { flex: 1; }
/* Waveform + scrub + playhead column (own stacking context for the playhead) */
.vta-wave-col {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; cursor: crosshair;
}
/* Slim contextual bar (section/chord edit controls only).  Hidden by default
   (waveform mode) so the waveform sits at the same height as the ruler; shown
   only in sections/chords mode by _applyStripMode(). */
.vta-head-slim { min-height: 0; padding: 0 14px; display: none; }
/* Color/waveform strip — starts at 36px, grows to fill space when timeline area
   is made taller via the vResizeTimeline drag handle. */
.vta-color-strip {
  position: relative;
  flex: 1 1 36px;        /* flex-basis 36px; grows when timeline area is taller */
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  transition: flex-basis .15s;
}
.visual-timeline-area.chords-collapsed .vta-color-strip {
  flex-basis: 0;
  border-bottom-color: transparent;
}
.vta-color-empty {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--border2);
  text-align: center;
  padding: 9px;
}
.vta-color-block {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--c1, #7a9a7a) 32%, transparent);
  border-left:  1px solid color-mix(in srgb, var(--c1) 60%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--c1) 60%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: filter .12s;
}
.vta-color-block:hover { filter: brightness(1.4); }
.vta-color-block.selected {
  background: color-mix(in srgb, var(--c1, #7a9a7a) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--c1);
}
.vta-color-block-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--c1);
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.vta-color-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 2;
  touch-action: none;
}
.vta-color-seam::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 2px;
  width: 2px;
  background: var(--accent2);
  opacity: 0;
  border-radius: 1px;
  transition: opacity .12s;
}
.vta-color-seam:hover::after,
.vta-color-seam.dragging::after {
  opacity: 0.85;
  box-shadow: 0 0 8px var(--accent2);
}

/* Timeline row underneath — same width, so chord blocks line up with it */
.vta-timeline {
  position: relative;
  height: 26px;
  flex-shrink: 0;        /* scrub bar always 26px (matches the timeline strip); only the strip grows */
  background: var(--bg);
  cursor: pointer;
  touch-action: none;
}
.vta-timeline-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* ── Strip mode tabs (SECTIONS / CHORDS) ──────────────────────────────── */
.vta-strip-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 4px;
}
.vta-strip-tab {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--label);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.vta-strip-tab:hover {
  background: var(--hover);
  color: var(--fg);
}
.vta-strip-tab.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Section blocks ────────────────────────────────────────────────────── */
.vta-section-block {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--sc, #666) 22%, transparent);
  border-left:  2px solid color-mix(in srgb, var(--sc) 70%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--sc) 25%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: filter .12s;
  border-radius: var(--r-xs);
}
.vta-section-block:hover {
  filter: brightness(1.5);
  background: color-mix(in srgb, var(--sc, #666) 35%, transparent);
}
.vta-section-block-label {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--sc);
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}
.vta-section-block.selected {
  background: color-mix(in srgb, var(--sc, #666) 42%, transparent);
  border-left:  2px solid var(--sc, #666);
  border-right: 1px solid color-mix(in srgb, var(--sc) 50%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 55%, transparent);
  filter: brightness(1.35);
}

/* ── Section type buttons (shown in vta-head when a section is selected) ── */
.vta-section-type-btn {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.vta-section-type-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--fg);
  border-color: var(--fg-dim);
}
.vta-section-type-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Playhead ─────────────────────────────────────────────────────────
   A high-contrast vertical line that cuts through both the chord row
   and the timeline.  Positioned as a child of .vta-body so it can span
   the full height without being clipped by the color strip.  A pointed
   "head" at the top (above the chord blocks) and a glowing disc at the
   bottom (on the scrub bar) make it instantly readable as a playhead. */
.vta-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    rgba(0, 255, 127, 0.95) 0%,
    rgba(0, 255, 127, 1)    100%
  );
  box-shadow:
    0 0 10px rgba(0, 255, 127, 0.85),
    0 0 24px rgba(0, 255, 127, 0.45);
  pointer-events: none;
  transform: translateX(-1.5px);
  z-index: 3;
}
/* Triangle pointer at the top — overlays the top of the chord row */
.vta-playhead::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -7px;
  width: 0;
  height: 0;
  border-left:  8.5px solid transparent;
  border-right: 8.5px solid transparent;
  border-top:   10px  solid var(--accent2);
  filter: drop-shadow(0 0 6px rgba(0, 255, 127, 0.8));
}
/* Disc at the bottom — sits on the scrub bar */
.vta-playhead::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -5.5px;
  width: 14px;
  height: 14px;
  background: var(--accent2);
  border: 2px solid #061;
  border-radius: 50%;
  box-shadow:
    0 0 10px var(--accent2),
    0 0 22px rgba(0, 255, 127, 0.55);
}

/* ── Top area: tracks row + groups row ───────────────────────────────── */
.visual-bottom {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;   /* clip when dragged small */
}

.visual-strip-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
}
.visual-strip-row:first-child { border-top: none; }

.visual-strip-label {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 2.5px;
  color: var(--label);
  background: var(--bg);
  border-right: 1px solid var(--border);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  user-select: none;
}

.visual-strip {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface);
  overflow-x: auto;
  flex: 1;
  min-height: 58px;
}
.visual-strip::-webkit-scrollbar { height: 4px; }
.visual-strip::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-pill); }

.v-strip-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--border2);
}

.v-track {
  --track-color: var(--label);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  text-align: left;
  color: var(--text);
  transition: border-color .15s, transform .1s;
  min-width: 150px;
  flex-shrink: 0;
  position: relative;
}
.v-track:hover { border-color: var(--track-color); }
/* A track that carries any effect (only shown when nothing is selected) —
   the faintest state: a dim tint of its own colour on the border. */
.v-track.has-effect { border-color: color-mix(in srgb, var(--track-color), transparent 55%); }
/* HIGHLIGHTED / related — connected to the current selection on the OTHER axis.
   A dashed cyan outline + soft glow reads clearly as "linked, not chosen". */
.v-track.related {
  border-style: dashed;
  border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 62%);
}
/* SELECTED — the chip you actually clicked.  Solid thick ring in the track's
   own colour, a faint fill and a strong glow so it clearly outranks a mere
   highlight.  Declared last so it wins when a chip is both selected & related. */
.v-track.selected {
  border-style: solid;
  border-color: var(--track-color);
  background: color-mix(in srgb, var(--track-color), var(--bg) 85%);
  box-shadow: 0 0 0 2px var(--track-color), 0 0 18px color-mix(in srgb, var(--track-color), transparent 50%);
}

.v-track-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--track-color);
  box-shadow: 0 0 6px var(--track-color);
  flex-shrink: 0;
  transition: transform .08s, box-shadow .08s;
}
.v-track-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.v-track-name {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-track-sub {
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-track-pulse {
  width: 4px;
  align-self: stretch;
  background: var(--border);
  border-radius: 2px;
  flex-shrink: 0;
  transition: background .08s, box-shadow .08s;
}

/* Live pulse — applied per-frame from JS via the `.hit` class */
.v-track.hit .v-track-dot {
  transform: scale(1.4);
  box-shadow: 0 0 14px var(--track-color), 0 0 22px var(--track-color);
}
.v-track.hit .v-track-pulse {
  background: var(--track-color);
  box-shadow: 0 0 10px var(--track-color);
}

/* ── Group strip cards ───────────────────────────────────────────────── */
.v-group-strip-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  text-align: left;
  color: var(--text);
  transition: border-color var(--trans), box-shadow var(--trans);
  min-width: 140px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
}
.v-group-strip-card:hover {
  border-color: var(--accent2);
}
/* A group that carries any effect (only shown when nothing is selected). */
.v-group-strip-card.has-effect { border-color: color-mix(in srgb, var(--accent2), transparent 55%); }
/* HIGHLIGHTED / related — dashed cyan outline + soft glow: "linked, not chosen". */
.v-group-strip-card.related {
  border-style: dashed;
  border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 62%);
}
/* SELECTED — solid thick green ring + faint fill + strong glow.  Declared last
   so it wins over `related` when a card is both. */
.v-group-strip-card.selected {
  border-style: solid;
  border-color: var(--accent2);
  background: color-mix(in srgb, var(--accent2), var(--bg) 88%);
  box-shadow: 0 0 0 2px var(--accent2), 0 0 18px rgba(0,232,143,0.45);
}
/* Drag-reorder drop indicator (item 12) */
.v-track.reorder-before, .v-group-strip-card.reorder-before { box-shadow: -3px 0 0 0 var(--accent2); }

.v-group-strip-canvas {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg);
}

/* ── Group header canvas in the rule editor ──────────────────────────── */
.v-editor-group-canvas {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border2);
  background: var(--bg);
}

/* ── Group rule editor: list of tracks using this group ──────────────── */
.v-group-rules-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.v-group-rule-row {
  --track-color: var(--label);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
  transition: background .1s;
}
.v-group-rule-row > div[style] {
  padding: 0 16px 0 0;
}

.v-group-rule-drag-handle {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--border2);
  cursor: grab;
  user-select: none;
  padding: 4px 0;
  align-self: stretch;
  transition: color .15s;
}
.v-group-rule-drag-handle:hover { color: var(--text2); }
.v-group-rule-drag-handle:active { cursor: grabbing; }

.v-group-rule-priority {
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--border2);
  margin-right: 4px;
  min-width: 16px;
}

.v-group-rule-dragging {
  opacity: 0.45;
}

.v-group-rule-drop-above {
  border-top: 2px solid var(--accent);
}

.v-group-rule-track {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.v-group-rule-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--track-color);
  box-shadow: 0 0 5px var(--track-color);
  flex-shrink: 0;
}

.v-group-rule-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text);
  flex: 1;
}

.v-group-rule-goto {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1.5px;
  color: var(--accent2);
  border: 1px solid rgba(0,232,143,0.3);
  background: rgba(0,232,143,0.05);
  padding: 3px 8px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.v-group-rule-goto:hover {
  background: rgba(0,232,143,0.15);
  border-color: var(--accent2);
}

.v-group-rule-effects {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
}

.v-group-rule-effect {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text2);
}

.v-group-rule-effect-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.v-group-rule-effect-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-group-rule-no-effects {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--border2);
  padding: 2px 0;
}

/* ── Prop-centric rule view ──────────────────────────────────────────────── */
.v-prop-group-block {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.v-prop-group-block:last-child { border-bottom: none; margin-bottom: 0; }

.v-prop-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
}

.v-prop-group-canvas {
  width: 48px;
  height: 36px;
  border-radius: var(--r-xs);
  background: var(--surface2);
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.v-prop-group-meta {
  flex: 1;
  min-width: 0;
}

.v-prop-group-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-prop-group-sub {
  font-size: 7.5px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  margin-top: 1px;
}

.v-prop-no-effects {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  color: var(--border2);
  letter-spacing: 1px;
  padding: 3px 10px 6px;
}

/* ── Visual-tab resize handles ───────────────────────────────────────────── */
.v-resize {
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  background: transparent;
  transition: background var(--trans);
}
.v-resize-vert  { width: 5px; cursor: ew-resize; }
.v-resize-horiz { height: 5px; cursor: ns-resize; }

/* Subtle centre-line hint */
.v-resize::after {
  content: '';
  position: absolute;
  border-radius: var(--r-pill);
  background: var(--border2);
  transition: background var(--trans), opacity var(--trans);
  opacity: 0.5;
}
.v-resize-vert::after  { width: 2px; height: 36px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.v-resize-horiz::after { height: 2px; width: 36px; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.v-resize:hover,
.v-resize.v-resize--active {
  background: rgba(0,232,143,0.1);
}
.v-resize:hover::after,
.v-resize.v-resize--active::after {
  background: var(--accent2);
  opacity: 0.7;
  width: 3px;
}
.v-resize-horiz:hover::after,
.v-resize-horiz.v-resize--active::after {
  width: 36px;
  height: 3px;
}

/* vResizeTimeline is the main user-facing waveform resize handle — make it
   taller and add visible grip dots so it's obvious and easy to grab. */
#vResizeTimeline {
  height: 10px;
  cursor: ns-resize;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#vResizeTimeline::after { display: none; }   /* suppress the generic line */
#vResizeTimeline::before {
  content: '• • • • •';
  font-size: 5px;
  letter-spacing: 2px;
  color: var(--border2);
  transition: color var(--trans);
  pointer-events: none;
}
#vResizeTimeline:hover,
#vResizeTimeline.v-resize--active {
  background: rgba(0,232,143,0.06);
  border-top-color: var(--accent2);
  border-bottom-color: var(--accent2);
}
#vResizeTimeline:hover::before,
#vResizeTimeline.v-resize--active::before {
  color: var(--accent2);
}

/* ── Tap-track record / delete buttons (inside .v-track chips) ───────── */
.v-tap-rec-btn {
  flex-shrink: 0;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,100,0,0.3);
  background: transparent;
  color: rgba(255,120,0,0.55);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .12s;
}
.v-tap-rec-btn:hover {
  border-color: rgba(255,100,0,0.75);
  color: #ff6600;
  background: rgba(255,100,0,0.07);
}
.v-tap-rec-btn.active {
  background: rgba(255,60,0,0.18);
  border-color: #ff4400;
  color: #ff7700;
  animation: v-tap-pulse 0.9s ease-in-out infinite;
}

.v-tap-del-btn {
  flex-shrink: 0;
  font-size: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,80,80,0.18);
  background: transparent;
  color: rgba(255,100,100,0.35);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .12s;
}
.v-tap-del-btn:hover {
  border-color: var(--danger, #ff4444);
  color: var(--danger, #ff5555);
  background: rgba(255,60,60,0.1);
}

/* ── Timeline tap-track editing toolbar ──────────────────────────────── */
.v-tap-edit-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255,100,0,0.05);
  border-bottom: 1px solid rgba(255,100,0,0.16);
  flex-shrink: 0;
  min-height: 30px;
  flex-wrap: wrap;
}
.v-tap-edit-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff7722;
  flex-shrink: 0;
}
.v-tap-edit-count {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--label);
  flex-shrink: 0;
}
.v-tap-edit-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  margin: 0 1px;
}
.v-tap-edit-btn {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--label);
  border-radius: 3px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  height: 22px;
}
.v-tap-edit-btn:hover:not(:disabled) {
  border-color: rgba(255,100,0,0.65);
  color: #ff8833;
  background: rgba(255,100,0,0.06);
}
.v-tap-edit-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.v-tap-edit-btn.v-tap-del:hover:not(:disabled) {
  border-color: var(--danger, #ff4444);
  color: var(--danger, #ff5555);
  background: rgba(255,60,60,0.08);
}
.v-tap-q-select {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  height: 22px;
}
.v-tap-q-select:focus { border-color: rgba(255,100,0,0.55); }
.v-tap-edit-hint {
  font-size: 7.5px;
  letter-spacing: 0.8px;
  color: var(--border2);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}