/* ── TAB PANELS ── */
.tab-panel { display:none; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.tab-panel.active { display:flex; }

/* ── SEQUENCER SPLIT LAYOUT ── */
.seq-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.seq-timeline-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── SEQ SUBBAR ── */
.seq-subbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── BEAT MARKERS ── */
#beatMarkersBtn.active { border-color: var(--warn); color: var(--warn); background: rgba(255,170,0,.05); }
#editBeatsBtn.active   { border-color: var(--warn); color: var(--warn); background: rgba(255,170,0,.08); }

.beat-marker-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.beat-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,170,0,0.18);
  pointer-events: all;
  cursor: ew-resize;
}
.beat-marker.bar {
  background: rgba(255,170,0,0.35);
  width: 1px;
}
.beat-marker:hover { background: rgba(255,170,0,0.6) !important; }
.beat-marker.dragging { background: rgba(255,170,0,0.85) !important; }

/* ── SEQ VIEW TOGGLE (HITS / EFFECTS) ── */
.seq-view-toggle {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.seq-view-btn {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--border2);
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}
.seq-view-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.seq-view-btn.active {
  color: var(--accent);
  background: rgba(0,229,255,0.08);
}
.seq-view-btn + .seq-view-btn { border-left: 1px solid var(--border); }

/* TIMELINE / VISUAL toggle relocated into the track-header box (top of the
   left column, above "TRACK").  Full-width, flush with the header edges. */
.hdr-view-toggle { border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.hdr-view-toggle .seq-view-btn { flex: 1; padding: 8px 0; text-align: center; }
.hdr-view-toggle .seq-view-btn.active { background: rgba(0,229,255,0.12); }

/* View toggle in the timeline track-header box (below TIMELINE/VISUAL).
   Holds the HITS / EFFECTS switch — full-width, flush like the tab toggle. */
.hdr-mode { display: flex; padding: 3px 5px; gap: 0; }
.hdr-mode .vta-mode-btn { flex: 1; }
.hdr-mode.seq-mode-toggle { padding: 4px 5px; }
.hdr-mode .seq-mode-btn { flex: 1; text-align: center; padding: 9px 2px; letter-spacing: 0.5px; }

/* Workspace nav: FX / HITS stacked (the timeline modes) + VISUAL, replacing the
   old TIMELINE/VISUAL + HITS/EFFECTS toggles.  Sized to match the old two-toggle
   stack height so the waveform strip below it stays put. */
.seq-nav-toggle {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.seq-nav-modes { display: flex; flex-direction: column; flex: 1; }
.seq-nav-modes .seq-nav-btn { flex: 1; }
.seq-nav-modes .seq-nav-btn + .seq-nav-btn { border-top: 1px solid var(--border); }
.seq-nav-visual { flex: 1; border-left: 1px solid var(--border); }
.seq-nav-btn {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--border2);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 6px 8px;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s;
}
.seq-nav-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.seq-nav-btn.active { color: var(--accent); background: rgba(0,229,255,0.12); }
/* Header variant — flush, full width, bottom divider like hdr-view-toggle. */
.hdr-nav { border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.hdr-nav .seq-nav-btn { padding: 10px 6px; }

/* EDIT / VIZ buttons on the mode row — compact so they fit the 26px row */
.seq-mode-row > .btn { font-size: 8px; padding: 3px 9px; margin: 3px 4px 3px 0; align-self: center; }
.seq-mode-row > .btn:last-child { margin-right: 8px; }
/* Active EDIT / VIZ / MAP toggles were too faint to read — fill them in solidly
   (item request) so it's obvious when they're engaged. */
.seq-mode-row > .btn.active {
  background: rgba(0,232,143,0.32);
  border-color: var(--accent2);
  color: #ecfff6;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0,232,143,0.35) inset, 0 0 8px rgba(0,232,143,0.25);
}
/* MAP toggle keeps its blue accent hue but with the same solid fill. */
.seq-mode-row > .btn#scrubMapBtn.active {
  background: rgba(74,170,255,0.32);
  border-color: var(--accent, #4af);
  color: #eaf4ff;
  box-shadow: 0 0 0 1px rgba(74,170,255,0.35) inset, 0 0 8px rgba(74,170,255,0.25);
}

/* Timeline sub-mode row (hits / effects / hybrid) below the waveform.
   position:relative so the whole-song overview scrub strip can sit behind the
   ADD EFFECT / EDIT / VIZ buttons. */
.seq-mode-row {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 26px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}
/* Structure scrub strip — spans from the label column to the right edge, behind
   everything else on the row (the buttons float on top, item request).  The
   inner is TOTAL_WIDTH wide and scroll-synced to the ruler so it zooms/pans in
   lockstep with the timeline; the wrap clips it to the visible window. */
.seq-scrub-wrap {
  position: absolute;
  left: 140px; right: 0; top: 0; bottom: 0;
  z-index: 0;
  overflow: hidden;
}
.seq-scrub-inner {
  position: absolute;
  top: 0; left: 0;
  height: 100%;                 /* width set to TOTAL_WIDTH in drawTimelineScrub */
}
.seq-scrub-canvas {
  position: absolute; top: 0; left: 0;
  display: block;
  cursor: pointer;
}
.seq-scrub-playhead {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: var(--accent, #4af);
  box-shadow: 0 0 4px var(--accent, #4af);
  pointer-events: none;
  z-index: 1;
}
/* Overview zoom-scrollbar window (minimap mode): the draggable viewport with a
   resize/zoom handle on each edge.  Floats above the overview canvas. */
.seq-scrub-viewport {
  position: absolute; top: 1px; bottom: 1px;
  z-index: 2;
  box-sizing: border-box;
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.55);
  border-radius: 3px;
  cursor: grab;
  min-width: 16px;
}
.seq-scrub-viewport:active { cursor: grabbing; }
.seq-scrub-viewport .sv-handle {
  position: absolute; top: -1px; bottom: -1px;
  width: 7px;
  background: rgba(0,229,255,0.85);
  cursor: ew-resize;
}
.seq-scrub-viewport .sv-handle-l { left: -1px;  border-radius: 3px 0 0 3px; }
.seq-scrub-viewport .sv-handle-r { right: -1px; border-radius: 0 3px 3px 0; }
.seq-scrub-viewport .sv-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 1px; height: 40%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  box-shadow: -2px 0 0 rgba(0,0,0,0.5), 2px 0 0 rgba(0,0,0,0.5);
}
/* Keep the toggle column and the buttons above the scrub overview. */
.seq-mode-spacer { position: relative; z-index: 1; background: var(--surface); }
.seq-mode-row > .btn { position: relative; z-index: 1; }
.seq-mode-spacer {
  width: 140px;                 /* aligns with .track-label-spacer */
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 6px;
}
/* Sections/chords row toggles when placed on the mode row (track column).
   Match the Visual tab's .vta-strip-views exactly: flush (no border/radius),
   1px button padding — so the waveform bar reads identically on both tabs. */
.seq-mode-spacer .ruler-view-toggle { margin: 0; flex: 1; height: 20px; border: none; border-radius: 0; }
.seq-mode-spacer .ruler-view-btn { padding: 1px 0; }
.seq-mode-spacer .ruler-view-btn svg { height: 12px; }

/* Match the Visual tab's waveform-bar surfaces: header column on --surface (like
   .vta-header-box), scrub strip on --bg (like .vta-timeline). */
.ruler-row .track-label-spacer { background: var(--surface); }
.seq-scrub-wrap { background: var(--bg); }
.seq-mode-spacer .ruler-view-btn[data-view="chords"] svg,
.seq-mode-spacer .ruler-view-btn:last-child svg { width: 13px; }
/* HITS / EFFECTS toggle now lives in the track column — fill it evenly */
.seq-mode-spacer .seq-mode-toggle { flex: 1; padding: 0; }
.seq-mode-spacer .seq-mode-btn {
  flex: 1;
  padding: 2px 2px;
  letter-spacing: 0.5px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.seq-mode-toggle {
  display: flex;
  align-items: stretch;
  padding: 3px 6px;
  gap: 0;
}
.seq-mode-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 2px 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .12s, background .12s, border-color .12s;
  white-space: nowrap;
}
.seq-mode-btn:first-child { border-radius: 3px 0 0 3px; }
.seq-mode-btn:last-child  { border-radius: 0 3px 3px 0; }
.seq-mode-btn + .seq-mode-btn { border-left: none; }
.seq-mode-btn:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.seq-mode-btn.active {
  color: var(--accent);
  background: rgba(0,217,255,0.10);
  border-color: rgba(0,217,255,0.4);
}

/* Wizard launcher — sits next to the view toggle in the subbar */
.seq-wizard-btn {
  border-color: rgba(0,232,143,0.35);
  color: var(--accent2);
  background: rgba(0,232,143,0.05);
  flex-shrink: 0;
}
.seq-wizard-btn:hover { background: rgba(0,232,143,0.12); }

/* Visual tab's mirror of the sequencer subbar */
.visual-subbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hit inspector popover (click a hit in Hits / Hybrid) */
.hit-inspector {
  position: fixed;
  z-index: 9998;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-family: 'DM Mono', monospace;
  padding: 8px;
  animation: stem-bar-in 0.12s ease;
}
.hit-inspector .hi-head {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 4px 8px;
}
.hi-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hi-title { flex: 1; font-size: 10px; letter-spacing: 1px; color: var(--fg); text-transform: uppercase; }
.hi-close {
  background: transparent; border: 1px solid var(--border2); border-radius: var(--r-xs);
  color: var(--label); width: 20px; height: 20px; cursor: pointer; font-size: 10px;
}
.hi-close:hover { border-color: var(--danger); color: var(--danger); }
.hi-sub { font-size: 7px; letter-spacing: 2px; color: var(--text2); padding: 0 4px 5px; }
.hi-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.hi-eff {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.hi-eff:hover { border-color: var(--accent2); background: var(--surface3); }
.hi-eff-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hi-eff-name { font-size: 10px; color: var(--text); flex-shrink: 0; }
.hi-eff-meta { font-size: 7.5px; color: var(--label); margin-left: auto; letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-empty { font-size: 9px; letter-spacing: .5px; color: var(--label); padding: 10px 8px; text-align: center;
  border: 1px dashed var(--border2); border-radius: var(--r-sm); }
.hi-actions { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.hi-gen {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid rgba(0,232,143,0.35); background: rgba(0,232,143,0.06);
  color: var(--accent2); cursor: pointer; text-align: left;
  transition: all .12s;
}
.hi-gen:hover { background: rgba(0,232,143,0.14); border-color: var(--accent2); }

/* Hybrid divider between hit tracks and the effect rows */
.eff-hybrid-divider {
  display: flex;
  align-items: center;
  height: 20px;
  background: linear-gradient(90deg, rgba(0,217,255,0.06), transparent 60%);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
}
.eff-hybrid-divider span {
  font-size: 7px;
  letter-spacing: 3px;
  color: var(--accent);
  padding: 0 12px 0 14px;
}

/* Empty-state effect track row */
.eff-empty-row {
  display: flex;
  align-items: stretch;
  height: 60px;
  border-bottom: 1px solid var(--border);
}
.eff-empty-label {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--label);
}
.eff-empty-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
}
.eff-empty-lane {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: sticky;
  left: 140px;
}
.eff-empty-add {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 8px 18px;
  border: 1px dashed var(--border2);
  border-radius: var(--r-sm);
  background: rgba(0,217,255,0.04);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--trans);
}
.eff-empty-add:hover {
  border-color: var(--accent);
  background: rgba(0,217,255,0.12);
  border-style: solid;
}

/* ── EFFECTS VIEW ROWS ── */
.eff-view-row .track-label { gap: 4px; }
/* Hover must stay OPAQUE — a translucent white here let the effect bars behind
   the sticky label column bleed through and made the text unreadable. */
.eff-view-row .track-label:hover { background: var(--surface2); }

/* ── EFFECTS VIEW — GROUP LAYOUT ── */
/* Marquee rubber-band for click-drag multi-select of effect bars */
.eff-marquee {
  position: absolute; top: 3px; bottom: 3px;
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.6);
  border-radius: 2px;
  pointer-events: none; z-index: 6;
}
/* Container-level 2-D selection box (spans rows, positioned in viewport). */
.eff-marquee-box {
  position: fixed; top: auto; bottom: auto;
  background: rgba(0,229,255,0.10);
  border: 1px solid rgba(0,229,255,0.7);
  z-index: 9999;
}
.eff-group-row { }
.eff-group-label {
  background: var(--bg) !important;
  border-radius: 0 !important;
  cursor: pointer;
  gap: 5px !important;
}
.eff-group-label:hover { background: var(--surface2) !important; }
.eff-group-chevron {
  font-size: 7px;
  color: var(--border2);
  width: 10px;
  flex-shrink: 0;
}
.eff-group-name {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eff-group-count {
  font-size: 7px;
  color: var(--border2);
  flex-shrink: 0;
  min-width: 14px;
  text-align: right;
}
/* Firing-pattern badge on a combo row (cycle / every-N / alternate) — shows how
   the row's effects step across the timing marks right on the timeline. */
.eff-group-pattern {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent2, #ffb454);
  flex-shrink: 0;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 180, 84, 0.14);
  white-space: nowrap;
}
/* Section-driven combo badge (different effect per section) */
.eff-group-sections {
  font-size: 8px;
  font-weight: 700;
  color: var(--accent, #6cf);
  flex-shrink: 0;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(120, 180, 255, 0.14);
  letter-spacing: 0.3px;
}
/* Item 6: highlight the selected per-effect combo sub-row */
.eff-sub-selected .eff-ladder-label {
  background: var(--surface2) !important;
}
.eff-group-line {
  flex-shrink: 0;
  background: rgba(255,255,255,0.015);
  border-left: 1px solid var(--border2);
}

/* Effect row label */
.eff-effect-label { cursor: pointer; border-radius: 0 !important; }
.eff-effect-label:hover { background: var(--surface2) !important; }

/* Ladder expand button */
.eff-expand-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--border2);
  font-size: 7px;
  padding: 1px 4px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s;
}
.eff-expand-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Ladder sub-rows */
.eff-ladder-row { opacity: 0.82; }
.eff-ladder-label {
  padding-left: 18px !important;
  gap: 4px !important;
  border-radius: 0 !important;
}
.eff-ladder-indent {
  font-size: 8px;
  color: var(--border2);
  flex-shrink: 0;
  opacity: 0.6;
}
/* ── Overlay layers: blackout / colour-mask rows ── */
.eff-overlay-row { background: rgba(255,255,255,0.02); }
.eff-overlay-row.ov-drop { box-shadow: inset 0 2px 0 0 var(--accent2); }
.eff-overlay-label {
  gap: 5px !important;
  align-items: center;
  border-left: 3px solid var(--ov-color, #000);
}
.eff-ov-grip { cursor: grab; color: var(--border2); font-size: 10px; flex-shrink: 0; }
.eff-ov-badge {
  font-size: 6px; letter-spacing: 1px; font-weight: 700;
  padding: 1px 4px; border-radius: 2px; flex-shrink: 0;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.eff-ov-badge.black { background: #000; color: #ccc; border: 1px solid #444; }
.eff-ov-badge.mask  { background: var(--ov-color, #ff3366); color: #000; border: 1px solid transparent; }
/* Mode tint (item request): whole-song reads brighter/cooler, during-effects
   is dimmer/warmer, so you can tell the mode at a glance from the badge. */
.eff-ov-badge.black.ov-mode-all { color: #eaf6ff; border-color: #4a6b7a; box-shadow: inset 0 0 0 1px rgba(120,200,255,0.25); }
.eff-ov-badge.black.ov-mode-fx  { color: #c9b48a; border-color: #6b5a3a; }
.eff-ov-badge:hover { outline: 1px solid var(--accent2); }
.eff-ov-color { width: 16px; height: 16px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; }
.eff-ov-group {
  flex: 1; min-width: 0; font-size: 7px; background: var(--bg);
  color: var(--text2); border: 1px solid var(--border); border-radius: 2px; padding: 1px;
}
.eff-ov-params {
  flex-shrink: 0; background: none; border: none; color: var(--border2);
  cursor: pointer; font-size: 11px; line-height: 1; padding: 0 1px;
}
.eff-ov-params:hover { color: var(--accent2); }
.eff-ov-del {
  flex-shrink: 0; background: none; border: none; color: var(--border2);
  cursor: pointer; font-size: 10px; line-height: 1; padding: 0 2px;
}
.eff-ov-del:hover { color: #ff5544; }
/* An always-on overlay row draws a full-width box on its canvas now, so keep it
   at full opacity (it used to be dimmed to 0.5, which made it hard to see). */
.eff-overlay-row.ov-always .track-canvas { opacity: 1; }

/* Blackout / mask settings popup */
.overlay-params-pop { min-width: 232px; max-width: 288px; padding: 8px; }
.overlay-params-pop .ovp-modes,
.sip-overlay-settings .ovp-modes { display: flex; gap: 0; margin-bottom: 6px; }
.overlay-params-pop .ovp-mode,
.sip-overlay-settings .ovp-mode {
  flex: 1; font-family: inherit; font-size: 9px; letter-spacing: .3px;
  padding: 5px 4px; cursor: pointer; color: var(--text2);
  background: var(--bg); border: 1px solid var(--border); border-right: none;
}
.overlay-params-pop .ovp-mode:last-child,
.sip-overlay-settings .ovp-mode:last-child { border-right: 1px solid var(--border); border-radius: 0 4px 4px 0; }
.overlay-params-pop .ovp-mode:first-child,
.sip-overlay-settings .ovp-mode:first-child { border-radius: 4px 0 0 4px; }
.overlay-params-pop .ovp-mode.active,
.sip-overlay-settings .ovp-mode.active { color: var(--bg); background: var(--accent2); border-color: var(--accent2); font-weight: 600; }
.overlay-params-pop .ovp-mode-desc,
.sip-overlay-settings .ovp-mode-desc { font-size: 9px; line-height: 1.5; color: var(--text2); padding: 0 2px 7px; }
.overlay-params-pop .ovp-row,
.sip-overlay-settings .ovp-row { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--text); padding: 3px 2px; }
.overlay-params-pop .ovp-row > span,
.sip-overlay-settings .ovp-row > span { flex-shrink: 0; }
.overlay-params-pop .ovp-trans,
.sip-overlay-settings .ovp-trans { flex: 1; min-width: 0; }
.overlay-params-pop .ovp-trans-val,
.sip-overlay-settings .ovp-trans-val { flex-shrink: 0; color: var(--accent2); font-size: 9px; min-width: 30px; text-align: right; }
.overlay-params-pop .ovp-desc-sm,
.sip-overlay-settings .ovp-desc-sm { font-size: 7.5px; color: var(--border2); letter-spacing: .3px; padding: 0 2px 6px; line-height: 1.5; }
.overlay-params-pop .ovp-grid,
.sip-overlay-settings .ovp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.overlay-params-pop .ovp-num,
.sip-overlay-settings .ovp-num { width: 46px; font-family: inherit; font-size: 9px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 3px 4px; }
.overlay-params-pop .ovp-row b,
.sip-overlay-settings .ovp-row b { font-size: 8px; color: var(--label); }
.overlay-params-pop.is-always .ovp-during,
.sip-overlay-settings.is-always .ovp-during { display: none; }
.sip-overlay-settings .ovs-group,
.sip-overlay-settings .ovs-color { font-family: inherit; font-size: 9px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px; }
.sip-overlay-settings .ovs-color { width: 26px; height: 20px; padding: 0; cursor: pointer; }
.sip-overlay-settings .ovs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sip-overlay-settings .ovs-back { background: none; border: 1px solid var(--border2); color: var(--text2); cursor: pointer; border-radius: 4px; width: 22px; height: 20px; font-size: 12px; line-height: 1; }
.sip-overlay-settings .ovs-back:hover { border-color: var(--accent2); color: var(--accent2); }
/* clean header on the blackout/mask timeline row */
.eff-ov-name { font-size: 8px; letter-spacing: .5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Selected blackout/mask row: no coloured highlight (it read as a selection
   bar) — just a slight indent + faint fill so it's clearly the active one. */
.eff-overlay-label.selected { padding-left: 10px; background: rgba(255,255,255,0.045); }
.eff-add-overlay-btn { font-size: 8px !important; opacity: 0.85; flex-shrink: 0; }

/* Row drag-reorder: grip handle, floating ghost, drop line (item 1) */
.eff-row-grip {
  cursor: grab;
  color: var(--border2);
  font-size: 10px;
  flex-shrink: 0;
  margin-right: 1px;
  user-select: none;
}
.eff-row-grip:hover { color: var(--accent); }
.eff-row-dragging { opacity: 0.35; }
.eff-row-ghost {
  position: fixed;
  z-index: 9998;
  opacity: 0.85;
  pointer-events: none;
  display: flex;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
  outline: 1px solid var(--accent2);
  border-radius: 3px;
  overflow: hidden;
}
.eff-row-drop-line {
  position: fixed;
  height: 3px;
  margin-top: -1px;
  background: var(--accent2);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 8px var(--accent2);
  border-radius: 2px;
}
/* Floating pill that follows the cursor while dragging a footer adder button. */
.eff-footer-drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  padding: 4px 9px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--accent2);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  white-space: nowrap;
}

/* Chevron on a track sub-row that carries ladder-logic effects (item 23) */
.eff-track-chevron {
  font-size: 7px;
  color: var(--border2);
  width: 9px;
  flex-shrink: 0;
}
.eff-ladder-label:hover .eff-track-chevron { color: var(--accent); }
/* "ladder" tag next to a track that fires ladder effects */
.eff-ladder-tag {
  font-size: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0 3px;
  opacity: 0.7;
  vertical-align: middle;
}

/* ── Hits-mode track effect-expander (item 4/5) ── */
.track-eff-expand {
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--border2);
  font-size: 7px;
  line-height: 1;
  padding: 1px 3px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.track-eff-expand:hover,
.track-eff-expand.open { color: var(--accent); border-color: var(--accent); }

/* Per-effect sub-rows injected under an expanded hits track */
.hits-eff-subrow { opacity: 0.9; background: rgba(255,255,255,0.012); }
.hits-eff-subrow.selected-eff { opacity: 1; background: rgba(0,229,255,0.06); }
.hits-eff-subrow.selected-eff .hits-eff-label { box-shadow: inset 2px 0 0 var(--accent2); }
.hits-eff-subrow .track-label:hover { background: var(--surface2); }
.hits-eff-label {
  padding-left: 18px !important;
  gap: 4px !important;
  border-radius: 0 !important;
  align-items: center;
}
.hits-eff-swatch {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
/* Sub-row label: group name (primary) over the effect name (secondary) */
.hits-eff-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}
.hits-eff-group {
  font-size: 8.5px;
  color: var(--text);
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hits-eff-name {
  font-size: 7px;
  color: var(--border2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hits-eff-proprow { opacity: 0.72; }

/* ── Hits-mode: track carries effects (light highlight + ✦ marker) ── */
.track-label.has-fx { box-shadow: inset 3px 0 0 0 var(--accent2); }
.track-label.has-fx.fx-open { background: var(--surface2); }
.track-fx-indicator {
  flex-shrink: 0;
  margin-left: 2px;
  font-size: 9px;
  line-height: 1;
  color: var(--accent2);
  text-shadow: 0 0 5px var(--accent2);
}

/* ── Add-effect flow ── */
body.add-eff-arming .track-label { cursor: pointer !important; }
body.add-eff-arming .track-row:not(.beat-row):not(.chords-row) .track-label {
  outline: 1px dashed rgba(0,232,143,0.4); outline-offset: -2px;
}
body.add-eff-arming .track-row:not(.beat-row):not(.chords-row) .track-label:hover {
  outline: 2px solid var(--accent2); outline-offset: -2px; background: var(--surface2);
}
.add-eff-hint {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 10000;
  background: var(--accent2); color: #04120b;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px;
  padding: 7px 14px; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: flex; align-items: center;
}
.add-eff-hint button {
  background: none; border: none; color: #04120b;
  cursor: pointer; font-size: 12px; margin-left: 8px; line-height: 1;
}
.add-eff-group-pop {
  position: fixed; z-index: 10001;
  background: var(--surface2); border: 1px solid var(--accent2);
  border-radius: 6px; padding: 6px; min-width: 150px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 3px;
  font-family: 'DM Mono', monospace;
}
.aegp-title { font-size: 8px; letter-spacing: 1px; color: var(--text2); padding: 2px 4px 5px; text-transform: uppercase; }
.aegp-title b { color: var(--accent2); }
/* Blackout / mask group prompt — centred, with a description + group buttons. */
.overlay-group-pop { left: 50%; top: 28%; transform: translateX(-50%); min-width: 220px; max-width: 300px; }
.overlay-group-pop .aegp-desc { font-size: 9px; line-height: 1.5; color: var(--text2); padding: 0 4px 8px; letter-spacing: .3px; }
.overlay-group-pop .aegp-groups { display: flex; flex-wrap: wrap; gap: 4px; }
.overlay-group-pop .aegp-group {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 9px; letter-spacing: .5px; padding: 5px 9px; border-radius: 4px; cursor: pointer;
}
.overlay-group-pop .aegp-group:hover { border-color: var(--accent2); color: var(--accent2); }
.aegp-empty { font-size: 8px; color: var(--border2); padding: 4px; line-height: 1.5; }
.aegp-item {
  text-align: left; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 9px; letter-spacing: 0.5px; padding: 5px 8px;
  border-radius: 3px; cursor: pointer;
}
.aegp-item:hover { border-color: var(--accent2); color: var(--accent2); background: var(--surface); }
.aegp-cancel {
  margin-top: 3px; background: none; border: none; color: var(--border2);
  font-size: 8px; letter-spacing: 1px; cursor: pointer; padding: 3px;
}
.aegp-cancel:hover { color: #ff5544; }

/* ── CHORD TAP BUTTON ── */
#chordTapBtn.active {
  color: #ff4444 !important;
  border-color: #ff4444 !important;
  background: rgba(255,68,68,0.08) !important;
  animation: eff-rec-pulse 1s ease-in-out infinite;
}

/* Tap rec / del buttons inside effects-view labels */
.eff-tap-rec-btn,
.eff-tap-del-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--border2);
  font-size: 8px;
  padding: 2px 5px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.eff-tap-rec-btn:hover { color: var(--accent); border-color: var(--accent); }
.eff-tap-rec-btn.active {
  color: #ff4444;
  border-color: #ff4444;
  background: rgba(255,68,68,0.08);
  animation: eff-rec-pulse 1s ease-in-out infinite;
}
.eff-tap-del-btn:hover { color: #ff4d00; border-color: #ff4d0066; }

@keyframes eff-rec-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Tap track header: record button on the left + group name under the label */
.eff-tap-rec-left  { margin-right: 5px; }
/* Effects-mode combo rows put the record button on the RIGHT edge of the header. */
.eff-tap-rec-right { margin-left: 6px; }
.tap-name-col { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.tap-group-name { font-size: 7px; letter-spacing: 1px; color: var(--label); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tap-tempo how-to prompt */
.tap-help-modal { width: min(420px, calc(100vw - 48px)); }
.tap-help-body { padding: 6px 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tap-help-body p { font-size: 11px; line-height: 1.6; color: var(--text2); text-align: center; margin: 0; }
.tap-help-body strong { color: var(--text); }
.tap-help-rec {
  font-size: 12px; letter-spacing: 2px; padding: 9px 20px; cursor: pointer;
  background: rgba(255,68,68,0.08); color: #ff5555; border: 1px solid #ff444488; border-radius: var(--r-sm);
}
.tap-help-rec:hover { background: rgba(255,68,68,0.16); }
.tap-help-rec.active { animation: eff-rec-pulse 1s ease-in-out infinite; }
.tap-help-dismiss { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: 1px;
  color: var(--label); cursor: pointer; }
.tap-help-dismiss input { accent-color: var(--accent2); }

/* Add-track footer */
.eff-add-track-footer {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
/* The three adders sit in one sticky group so they scroll together past the
   140px label column and never overlap (was: only ADD NEW TRACK was sticky, so
   it slid over the blackout/mask buttons). */
.eff-add-track-btns {
  position: sticky;
  left: 148px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eff-add-track-btn {
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-color: var(--border);
  color: var(--label);
  flex-shrink: 0;
}
.eff-add-track-btn:hover { color: var(--accent); border-color: rgba(0,229,255,0.4); }

#snapBtn { display: none; }

/* ── FILE INPUTS hidden ── */
#audioInput, #jsonInput { display:none; }

/* ── SELECTION TOOLBAR ── */
.sel-toolbar {
  display:none;
  align-items:center;
  gap:8px;
  padding:6px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border2);
  flex-wrap:wrap;
  flex-shrink:0;
}
.sel-toolbar.visible { display:flex; }
.sel-info { font-size:9px; letter-spacing:2px; color:var(--accent2); }
.sel-label { font-size:9px; color:var(--label); letter-spacing:1px; }

.track-select {
  font-family:'DM Mono',monospace;
  font-size:9px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  padding:4px 8px;
  cursor:pointer;
  outline:none;
  border-radius:var(--r-xs);
}
.track-select:focus { border-color:var(--accent2); }

/* ── TIMELINE ── */
.timeline-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.ruler-row { display:flex; border-bottom:1px solid var(--border); background:var(--bg); overflow:hidden; flex-shrink:0; }
.track-label-spacer { width:140px; flex-shrink:0; border-right:1px solid var(--border); display:flex; align-items:center; padding:0 12px; }

/* Ruler view toggle (waveform / sections / chords) — mirrors seq-view-toggle */
.ruler-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin: 3px 4px 2px;
}
.ruler-view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--label);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 5px 0;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.ruler-view-btn + .ruler-view-btn { border-left: 1px solid var(--border); }
.ruler-view-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.ruler-view-btn.active { color: var(--accent); background: rgba(0,229,255,0.10); }
.ruler-view-btn svg { width: 20px; height: 15px; display: block; }
.ruler-view-btn[data-view="chords"] svg { width: 15px; }
.track-label-spacer-text { font-size:8px; letter-spacing:2px; color:var(--border2); text-transform:uppercase; }
.ruler-outer { flex:1; overflow:hidden; cursor:col-resize; }
.ruler-outer:hover { background:rgba(0,229,255,.04); }
/* Fill the ruler row (which is sized by the taller label column) so the
   waveform has no dead gap below it — keeps the waveform+scrub strip the same
   height as the Visual tab's, so it doesn't jump on tab switch. */
.ruler { height:100%; min-height:52px; position:relative; }

.ruler-playhead { position:absolute; top:0; left:0; width:2px; background:rgba(0,229,255,.85); box-shadow:0 0 8px rgba(0,229,255,.6); z-index:4; pointer-events:none; border-radius:var(--r-pill); }
.ruler-outer { cursor:grab; }
.ruler-outer:active { cursor:grabbing; }
.ruler-tick { position:absolute; bottom:0; display:flex; flex-direction:column; align-items:center; z-index:1; }
.ruler-tick .tick-line { width:1px; background:var(--border); height:7px; }
.ruler-tick.major .tick-line { height:12px; background:var(--border2); }
.ruler-tick .tick-label { position:absolute; bottom:14px; font-size:8px; color:var(--border2); letter-spacing:1px; transform:translateX(-50%); white-space:nowrap; }

/* ── SCROLLBAR ── */
.timeline-scrollbar-row { display:flex; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; }
.scrollbar-spacer { width:110px; flex-shrink:0; border-right:1px solid var(--border); }
.timeline-scrollbar-outer { flex:1; padding:5px 6px; }
input[type=range].timeline-scrollbar { -webkit-appearance:none; width:100%; height:22px; background:transparent; outline:none; cursor:pointer; }
input[type=range].timeline-scrollbar::-webkit-slider-runnable-track { height:20px; background:#10160f; border:1px solid #223022; border-radius:var(--r-pill); }
input[type=range].timeline-scrollbar::-webkit-slider-thumb { -webkit-appearance:none; width:60px; height:18px; margin-top:1px; background:#2f6b2f; border:1px solid #47a047; border-radius:var(--r-pill); cursor:grab; box-shadow:0 0 5px rgba(0,232,143,0.25); }
input[type=range].timeline-scrollbar::-webkit-slider-thumb:hover { background:#3a833a; }
input[type=range].timeline-scrollbar::-webkit-slider-thumb:active { cursor:grabbing; background:#47a047; }
input[type=range].timeline-scrollbar::-moz-range-track { height:20px; background:#10160f; border:1px solid #223022; border-radius:var(--r-pill); }
input[type=range].timeline-scrollbar::-moz-range-thumb { width:60px; height:18px; background:#2f6b2f; border:1px solid #47a047; border-radius:var(--r-pill); cursor:grab; }

.tracks-area-row { display:flex; flex:1; min-height:0; overflow:hidden; }
/* Horizontal panning is driven programmatically (drag / wheel / the footer
   zoom-scrollbar), so hide the native horizontal scrollbar that used to sit as a
   thin grey bar just above the footer map — the overlaid zoom bar replaces it
   (item request).  Vertical scrolling of the track stack stays. */
.tracks-scroll { flex:1; overflow-x:hidden; overflow-y:auto; min-width:0; }
.tracks-scroll::-webkit-scrollbar { width:6px; height:0; }
.tracks-scroll::-webkit-scrollbar:horizontal { display:none; height:0; }
.tracks-scroll::-webkit-scrollbar-track { background:transparent; }
.tracks-scroll::-webkit-scrollbar-thumb { background:var(--border2); border-radius:var(--r-pill); }
/* min-height:100% makes the container fill the timeline window even when the
   tracks don't, so the empty area below the last track is clickable for
   deselect (item request) — the marquee handlers are wired here. */
.tracks-inner { display:flex; flex-direction:column; position:relative; min-height:100%; }

/* ── Chords & Sections inline side panel ──────────────────────────── */
.seq-chord-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.seq-chord-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.seq-chord-body::-webkit-scrollbar { width: 5px; }
.seq-chord-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-pill); }

/* ── Effects-view side editor panel ─────────────────────────────────── */
.eff-view-editor {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.eff-ve-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.eff-ve-title {
  flex: 1;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--label);
  text-transform: uppercase;
}
.eff-ve-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--border2);
  font-size: 9px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
}
.eff-ve-close:hover { color: var(--fg); border-color: var(--border2); }
.eff-ve-scope-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.eff-ve-scope-btn {
  flex: 1;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 6px 4px;
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--label);
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.1s, color 0.1s;
}
.eff-ve-scope-btn:last-child { border-right: none; }
.eff-ve-scope-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.eff-ve-scope-btn.active {
  background: rgba(0,229,255,0.07);
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.eff-ve-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.eff-ve-body::-webkit-scrollbar { width: 5px; }
.eff-ve-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-pill); }
.eff-ve-effect-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.eff-ve-effect-block:last-child { border-bottom: none; margin-bottom: 0; }
.eff-ve-effect-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.eff-ve-effect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eff-ve-effect-name {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--text);
  text-transform: uppercase;
  flex: 1;
}
.eff-ve-rule-ctx {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--border2);
  padding: 4px 0 8px;
  text-transform: uppercase;
}

/* ── Effects-view side editor — richer context block ─────────────────── */
.eff-ve-ctx-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 10px 8px;
  margin-bottom: 10px;
}
.eff-ve-ctx-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}
.eff-ve-ctx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eff-ve-ctx-track-name {
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: var(--text);
  text-transform: uppercase;
}
/* Trigger-track reassignment dropdown in the effect editor */
.eff-ve-track-select {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 2px 4px;
  max-width: 130px;
  cursor: pointer;
}
.eff-ve-track-select:hover  { border-color: var(--accent2); }
.eff-ve-track-select:focus  { outline: none; border-color: var(--accent2); }
/* Group reassignment dropdown — matches the track dropdown, kept from overflowing */
.eff-ve-group-select {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 2px 4px;
  max-width: 120px;
  min-width: 0;
  flex-shrink: 1;
  cursor: pointer;
}
.eff-ve-group-select:hover { border-color: var(--accent2); }
.eff-ve-group-select:focus { outline: none; border-color: var(--accent2); }
.eff-ve-ctx-arrow {
  font-size: 8px;
  color: var(--border2);
  padding: 0 2px;
}
.eff-ve-ctx-group {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--label);
  text-transform: uppercase;
}
.eff-ve-ctx-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.eff-ve-ctx-pattern {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--accent);
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  text-transform: uppercase;
}
.eff-ve-ctx-cycle-count {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--border2);
  text-transform: uppercase;
}
/* Mini effect preview (item 5) */
.eff-ve-preview-wrap {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #060a06;
  overflow: hidden;
}
.eff-ve-preview-label {
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--border2);
  text-transform: uppercase;
  padding: 4px 8px 3px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eff-ve-preview {
  display: block;
  width: 100%;
  height: 96px;
}
.eff-ve-cycle-hdr {
  font-size: 7px;
  letter-spacing: 2.5px;
  color: var(--border2);
  text-transform: uppercase;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
/* In-app prompt / confirm dialog (replaces the browser prompt()/confirm()). */
.app-dialog-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.app-dialog {
  min-width: 300px; max-width: 92vw;
  background: var(--surface, #0d120e);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 16px;
}
.app-dialog-title { font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
.app-dialog-input {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 12px;
  padding: 8px 10px; margin-bottom: 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border2); border-radius: 4px; outline: none;
}
.app-dialog-input:focus { border-color: var(--accent, #6cf); }
.app-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog-btn {
  font-family: inherit; font-size: 11px; letter-spacing: 0.5px;
  padding: 7px 14px; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--label); border: 1px solid var(--border2);
}
.app-dialog-btn:hover { color: var(--text); border-color: var(--border); }
.app-dialog-ok     { background: rgba(0,229,255,0.14); color: var(--accent, #6cf); border-color: rgba(0,229,255,0.5); }
.app-dialog-ok:hover { background: rgba(0,229,255,0.22); }
.app-dialog-danger { background: #4a1410; color: #ffd7cf; border-color: #ff5a4a; }
.app-dialog-danger:hover { background: #7a231b; }
/* "No effects on this section" banner in the effect editor. */
.eff-ve-no-section {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--label);
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--border2);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 4px 0 8px;
  text-align: center;
}
/* Whole cycle selected → header lights up so it's clear the selection is the
   entire cycle, not one effect. */
.eff-ve-cycle-hdr--active {
  color: var(--accent, #6cf);
  border-bottom-color: rgba(0,229,255,0.5);
  text-shadow: 0 0 8px rgba(0,229,255,0.4);
}
.eff-ve-cycle-num {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--border2);
  font-family: 'DM Mono', monospace;
  min-width: 18px;
  flex-shrink: 0;
}

.track-row { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; position:relative; }
.track-label {
  width:140px; flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  padding:0 8px;
  border-right:1px solid var(--border);
  background:var(--surface);
  position:sticky; left:0; z-index:5;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
}

/* AI Beat Track sticks to the top of the timeline as the shared grid ref */
.track-row.beat-row { position:sticky; top:0; z-index:7; background:var(--bg); }
.track-row.beat-row .track-label { z-index:8; cursor:pointer; }
.track-row.beat-row .track-label:hover { background:var(--surface2); }
.beat-grid-btn {
  margin-left:auto; flex-shrink:0;
  width:18px; height:18px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1;
  border:1px solid var(--border2); border-radius:var(--r-xs);
  background:var(--surface2); color:var(--label); cursor:pointer;
  transition:all var(--trans);
}
.beat-grid-btn:hover { border-color:var(--accent); color:var(--accent); }
.beat-grid-btn.active { border-color:#00ffcc; color:#00ffcc; background:rgba(0,255,204,0.14); }

/* Stem track header: column layout so sens rows sit below the name row */
.track-label.has-stem {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 3px 6px;
  gap: 2px;
}
.track-label-top-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  overflow: hidden;
}

/* S/M buttons inside main track headers */
.track-sm-btns { display:flex; gap:2px; margin-left:auto; flex-shrink:0; }
.track-sm-btn {
  width:14px; height:14px;
  font-size:7px; font-family:inherit;
  padding:0; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border);
  color:var(--border2); cursor:pointer; border-radius:2px; letter-spacing:0;
  flex-shrink:0;
}
.track-sm-btn:hover { color:#fff; border-color:var(--border2); }
.track-sm-btn.solo-active { background:#ffd93d; color:#000; border-color:#ffd93d; }
.track-sm-btn.mute-active { background:#ff6b6b; color:#000; border-color:#ff6b6b; }

/* Sensitivity section inside track header — hidden until toggle is on */
.track-sens-section {
  display: none;
  flex-direction: column;
  gap: 1px;
}
body.stem-sliders-visible .track-label.has-stem .track-sens-section { display:flex; }
.track-sens-row {
  display: flex; align-items: center; gap: 3px; height: 13px;
}
.track-sens-label {
  font-size:6px; letter-spacing:0.5px; color:var(--border2);
  width:22px; flex-shrink:0; text-transform:uppercase;
}

/* Pulsing "Processing" overlay shown while MIDI analysis is in flight */
.stem-processing-overlay {
  position: absolute;
  inset: 8px 8px 8px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  pointer-events: none;
  z-index: 6;
  animation: stem-proc-pulse 1.4s ease-in-out infinite;
}
.stem-processing-overlay span {
  font-size: 7px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--border2);
}
@keyframes stem-proc-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}

/* Waveform background canvas that sits behind the MIDI notes canvas */
.track-stem-bg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  display: block;
}
/* ── Track row height resize handle ── */
.track-row-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  cursor: row-resize;
  z-index: 7;
  background: transparent;
  transition: background 0.1s;
}
.track-row-resize-handle:hover {
  background: rgba(0, 229, 255, 0.18);
}
.track-row-resize-handle:active {
  background: rgba(0, 229, 255, 0.32);
}
.track-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.track-name { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--label); }
.track-canvas { position:relative; background:var(--surface2); flex-shrink:0; }
.playhead { position:absolute; top:0; bottom:0; width:2px; background:rgba(0,229,255,.8); box-shadow:0 0 8px rgba(0,229,255,.5); pointer-events:none; z-index:10; border-radius:var(--r-pill); }
/* Beat-grid overlay — one layer of vertical lines ON TOP of every row
   (sections, chords, notes) so the whole timeline shares one grid.  Sits below
   the sticky labels (z5) and playhead (z10) but above the track canvases;
   semi-transparent so notes stay legible where a line crosses them. */
.beat-grid-overlay { position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none; z-index:4; }
.beat-grid-line { position:absolute; top:0; bottom:0; width:1px; background:rgba(0,255,204,0.30); }
.beat-grid-line.bar { background:rgba(0,255,204,0.5); }

/* Play-from-marker cue line — a thin light line down the ruler & track list,
   aligned with the beat-grid lines.  Sits below the sticky track labels. */
.cue-line { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,200,80,0.55); box-shadow:0 0 4px rgba(255,178,36,.35); pointer-events:none; z-index:4; }
.cue-line::before { content:''; position:absolute; top:0; left:-3px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid rgba(255,200,80,0.9); }
.chord-block { position:absolute; top:5px; bottom:5px; border-radius:var(--r-sm); display:flex; align-items:center; padding:0 5px; font-size:9px; letter-spacing:1px; white-space:nowrap; overflow:hidden; }

.track-canvas.selecting { cursor:crosshair !important; }

/* ── INFO BAR ── */
.info-bar {
  display:flex; gap:20px; padding:7px 20px;
  border-top:1px solid var(--border);
  background:var(--bg);
  font-size:8px; letter-spacing:2px; color:var(--border2);
  text-transform:uppercase; flex-wrap:wrap; flex-shrink:0;
}
.info-item span { color:var(--label); }

/* ── LEGEND ── */
/* Footer strip: relocated toolbar buttons (left) + edit flag + colour key. */
/* padding-top reserves a band across the top of the footer map for the overview
   zoom-scrollbar; the buttons/legend sit below it. */
.seq-footer-row { position:relative; display:flex; align-items:center; gap:10px; padding-top:18px; border-top:1px solid var(--border); background:var(--bg); flex-shrink:0; }
/* MAP overview drawn behind the footer content, faint so the buttons stay readable. */
.seq-footer-map { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.4; z-index:0; }
/* Playback playhead over the footer map (whole-song fraction); click/drag scrubs. */
.seq-footer-map-playhead { position:absolute; top:0; bottom:0; width:2px; background:var(--accent2,#0e8); box-shadow:0 0 6px var(--accent2,#0e8); pointer-events:none; z-index:1; }
/* Overview zoom-scrollbar: the visible-window brush across the top of the footer
   map.  Drag the body to pan, drag an edge handle to resize the window = zoom. */
.seq-footer-viewport {
  position:absolute; top:2px; height:14px;
  z-index:3; box-sizing:border-box;
  background:rgba(0,229,255,0.14);
  border:1px solid rgba(0,229,255,0.6);
  border-radius:3px;
  cursor:grab; min-width:20px;
}
.seq-footer-viewport:active { cursor:grabbing; }
.seq-footer-viewport .sv-handle {
  position:absolute; top:-2px; bottom:-2px; width:9px;
  background:rgba(0,229,255,0.9); cursor:ew-resize;
}
.seq-footer-viewport .sv-handle-l { left:-1px;  border-radius:3px 0 0 3px; }
.seq-footer-viewport .sv-handle-r { right:-1px; border-radius:0 3px 3px 0; }
.seq-footer-viewport .sv-handle::after {
  content:''; position:absolute; top:50%; left:50%;
  width:1px; height:56%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.55);
  box-shadow:-2px 0 0 rgba(0,0,0,0.55), 2px 0 0 rgba(0,0,0,0.55);
}
.seq-footer-row > .seq-footer-btns,
.seq-footer-row > .edit-mode-flag,
.seq-footer-row > .btn,
.seq-footer-row > .legend { position:relative; z-index:1; }
/* MAP button on the far right of the footer. */
.seq-footer-row > #scrubMapBtn { margin: 0 12px 0 0; font-size:8px; padding:3px 9px; }
/* Transparent so the MAP overview overlay behind it stays visible — the solid
   background was the dark bar blocking the map (item request). */
.seq-footer-row > .legend { border-top:none; flex:1; min-width:0; background:transparent; }
.seq-footer-btns { display:flex; align-items:center; gap:4px; padding:5px 0 5px 12px; flex-shrink:0; }
.seq-footer-btns > .btn { font-size:8px; padding:3px 9px; margin:0; }
/* Match the solid active fill the buttons had on the mode row. */
.seq-footer-btns > .btn.active {
  background: rgba(0,232,143,0.32); border-color: var(--accent2); color:#ecfff6; font-weight:600;
  box-shadow: 0 0 0 1px rgba(0,232,143,0.35) inset, 0 0 8px rgba(0,232,143,0.25);
}
.seq-footer-btns > .btn#scrubMapBtn.active {
  background: rgba(74,170,255,0.32); border-color: var(--accent,#4af); color:#eaf4ff;
  box-shadow: 0 0 0 1px rgba(74,170,255,0.35) inset, 0 0 8px rgba(74,170,255,0.25);
}
.edit-mode-flag {
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:8px; font-weight:700; letter-spacing:1.5px; white-space:nowrap;
  padding:3px 9px; border-radius:var(--r-pill);
  color:#ff5a3c; background:rgba(255,77,0,.16); border:1px solid rgba(255,77,0,.5);
  box-shadow:0 0 8px rgba(255,77,0,.25), inset 0 0 0 1px rgba(255,77,0,.15);
  animation: editflag-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes editflag-pulse { from { opacity:.72; } to { opacity:1; } }
.legend { display:flex; gap:14px; padding:7px 20px; border-top:1px solid var(--border); flex-wrap:wrap; background:var(--bg); flex-shrink:0; }
.legend-item { display:flex; align-items:center; gap:4px; font-size:8px; letter-spacing:1px; color:var(--border2); text-transform:uppercase; }
.legend-dot { width:5px; height:5px; border-radius:50%; }

/* FX bar-colour toggle in the legend footer (colour bars by track vs effect). */
.legend-barcolor-toggle {
  display: flex; align-items: center; gap: 5px; margin-left: auto;
  background: none; border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 8px; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--border2);
  transition: border-color .12s;
}
.legend-barcolor-toggle:hover { border-color: var(--border2); }
.legend-barcolor-toggle .lbc-lbl { color: var(--label); margin-right: 1px; }
.legend-barcolor-toggle .lbc-opt { color: var(--border2); transition: color .12s; }
.legend-barcolor-toggle .lbc-track  { color: var(--accent); }         /* default = track */
.legend-barcolor-toggle.by-effect .lbc-track  { color: var(--border2); }
.legend-barcolor-toggle.by-effect .lbc-effect { color: var(--accent); }
.legend-barcolor-toggle .lbc-switch {
  position: relative; width: 22px; height: 12px; border-radius: 7px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border); flex-shrink: 0;
}
.legend-barcolor-toggle .lbc-knob {
  position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); transition: left .14s;
}
.legend-barcolor-toggle.by-effect .lbc-knob { left: 11px; }

/* ── TIMING TRACK DROPDOWN MENU ── */
.timing-menu {
  position: fixed;
  z-index: 9999;
  background: #0c180c;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  min-width: 210px;
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  font-family: 'DM Mono', monospace;
  user-select: none;
}
.timing-menu-section {
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--text2);
  padding: 6px 10px 2px;
  text-transform: uppercase;
}
.timing-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 3px 0;
}
.timing-menu-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-xs);
  margin: 1px 4px;
}
.timing-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.timing-menu-item.active { color: var(--accent2); }
.timing-menu-item.danger { color: #ff6060; }
.timing-menu-item.danger:hover { background: rgba(255,60,60,0.1); }
.timing-menu-item.disabled { opacity: 0.35; pointer-events: none; }
.timing-menu-check { width: 10px; font-size: 8px; color: var(--accent2); flex-shrink: 0; }
.timing-menu-icon  { width: 12px; text-align: center; font-size: 9px; flex-shrink: 0; opacity: 0.7; }

/* ── EMPTY STATE ── */
.empty-state {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:40px;
}
.empty-state.hidden { display:none; }
.empty-title {
  font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:6px;
  color:var(--text2);
}
.empty-steps {
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:22px 28px;
  box-shadow:var(--shadow-sm);
}
.empty-step { font-size:10px; color:var(--label); letter-spacing:.5px; line-height:1.6; }
.empty-step strong { color:var(--accent2); }
.empty-step code { background:var(--surface2); color:var(--warn); padding:1px 5px; border:1px solid var(--border2); font-size:9px; border-radius:var(--r-xs); }

/* ── INLINE LIVE INDICATORS ── */
.track-live-bar {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  height: 3px;
  background: var(--tc, #ffffff);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .04s ease-out;
  opacity: .85;
  pointer-events: none;
}
.track-live-flash {
  position: absolute;
  inset: 0;
  background: var(--tc, #ffffff);
  opacity: 0;
  pointer-events: none;
  transition: opacity .04s ease-out;
}
.track-label.live-active .track-live-flash { opacity: .12; }
.track-label.live-active {
  border-right-color: var(--tc) !important;
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--tc) 20%, transparent);
}
.track-live-note {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--tc, #ffffff);
  pointer-events: none;
  opacity: 0;
  transition: opacity .04s;
  white-space: nowrap;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-label.live-active .track-live-note { opacity: 1; }

/* ── STEM SEPARATION PANEL ───────────────────────────────── */
.stems-panel {
  flex-direction: column;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.stem-row {
  display: flex;
  min-height: 52px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stem-row--drums { min-height: 84px; }
.stem-row:last-child { border-bottom: none; }

.stem-label-cell {
  width: 130px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 4px 6px 4px 6px;
  gap: 2px;
}

.stem-label-top {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
}

.stem-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stem-name {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--label);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stem-btns { display: flex; gap: 3px; }

.stem-btn {
  width: 16px;
  height: 16px;
  font-size: 8px;
  font-family: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--border2);
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 0;
}
.stem-btn:hover { color: #fff; border-color: var(--border2); }
.stem-btn.solo-active { background: #ffd93d; color: #000; border-color: #ffd93d; }
.stem-btn.mute-active { background: #ff6b6b; color: #000; border-color: #ff6b6b; }

/* Sensitivity controls */
.stem-sens-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stem-sens-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.stem-sens-label {
  font-size: 6px;
  letter-spacing: 0.5px;
  color: var(--border2);
  width: 24px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.stem-sens-slider {
  flex: 1;
  height: 2px;
  cursor: pointer;
  accent-color: #4ecdc4;
  min-width: 0;
}
.stem-sens-count {
  font-size: 7px;
  color: var(--border2);
  width: 26px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* AUTO sensitivity badge — lit when the server calibrates the threshold */
.stem-auto-btn {
  font-family: inherit;
  font-size: 7px;
  font-weight: 700;
  width: 13px;
  height: 13px;
  line-height: 11px;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: transparent;
  color: var(--border2);
  cursor: pointer;
  flex-shrink: 0;
}
.stem-auto-btn:hover  { border-color: #4ecdc4; color: #4ecdc4; }
.stem-auto-btn.active { border-color: #4ecdc4; color: #041b18; background: #4ecdc4; }
.stem-sens-count.analyzing {
  opacity: 1;
  color: #4ecdc4;
  animation: spin-count 0.8s linear infinite;
}
@keyframes spin-count {
  from { opacity: 1; }
  50%  { opacity: 0.3; }
  to   { opacity: 1; }
}

.stem-waveform-outer {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.stem-waveform-inner {
  position: relative;
  height: 100%;
}

.stem-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.stem-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.7);
  pointer-events: none;
  z-index: 2;
}

.stems-status {
  padding: 6px 12px;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--border2);
  align-items: center;
  height: 36px;
}
.stems-error { color: #ff6b6b; }

/* ── SEQUENCER RULE PANEL ─────────────────────────────────
   Slides in on the right of the tracks-area-row when a track
   label is clicked in EDIT mode.  The visual-editor class is
   NOT on this element (index.html) so there is no cascade
   conflict.  All layout is owned here.                       */
.seq-rule-panel {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;               /* nav fixed; .seq-rule-inner scrolls */
  border-left: 1px solid var(--border);
  background: var(--surface);
}

/* ── Track nav strip ─────────────────────────────────────── */
.seq-rule-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.seq-rule-nav-btn {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--tc, var(--label));
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.seq-rule-nav-btn:hover {
  background: color-mix(in srgb, var(--tc, var(--accent2)) 15%, transparent);
  border-color: color-mix(in srgb, var(--tc, var(--accent2)) 70%, transparent);
  color: var(--text);
}
.seq-rule-nav-btn.active {
  background: color-mix(in srgb, var(--tc, var(--accent2)) 22%, transparent);
  border-color: color-mix(in srgb, var(--tc, var(--accent2)) 80%, transparent);
  color: var(--text);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tc, var(--accent2)) 35%, transparent);
}

/* ── Rule editor inner zone (scrollable content) ─────────── */
/* Mirrors the behaviour of #vRuleEditor (.visual-editor) in the Visual tab */
.seq-rule-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.seq-rule-inner::-webkit-scrollbar       { width: 6px; }
.seq-rule-inner::-webkit-scrollbar-track  { background: transparent; }
.seq-rule-inner::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-pill); }

/* ── TAP RECORD ─────────────────────────────────────────── */
.tap-rec-dot {
  display: none;
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3030;
  box-shadow: 0 0 5px #ff303088;
  pointer-events: none;
}
.track-label.tap-armed .tap-rec-dot {
  display: block;
  animation: tap-rec-pulse 0.9s ease-in-out infinite;
}
@keyframes tap-rec-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px #ff3030cc; }
  50%       { opacity: 0.2; box-shadow: none; }
}
.track-label.tap-armed {
  box-shadow: inset -3px 0 0 #ff3030, inset 0 0 14px rgba(255,48,48,0.07);
}
/* Brief white-red flash when a note is tapped */
.track-label.tap-flash {
  background: rgba(255, 60, 60, 0.22) !important;
  transition: background 0s !important;
}
.track-label.tap-flash .tap-rec-dot {
  animation: none;
  opacity: 1;
  box-shadow: 0 0 10px #ff3030;
}

/* ── Edit-mode tool palette (Song Info panel) ───────────────────────────── */
.edit-tool-palette {
  margin-bottom: 12px; padding: 8px; border: 1px solid var(--border2);
  border-radius: var(--r-sm, 6px); background: rgba(255,80,80,0.05);
}
.etp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.etp-title { font-size: 9px; letter-spacing: 2px; color: #ff8a7a; }
.etp-exit {
  background: none; border: 1px solid rgba(255,90,80,0.4); color: #ff8a7a;
  border-radius: var(--r-xs, 4px); width: 18px; height: 18px; line-height: 1;
  font-size: 11px; cursor: pointer; padding: 0; flex-shrink: 0;
}
.etp-exit:hover { background: rgba(255,90,80,0.15); color: #fff; }
.etp-tools { display: flex; gap: 5px; }
.etp-tool {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xs, 4px); color: var(--text2); cursor: pointer;
  font-family: inherit; transition: background .1s, border-color .1s;
}
.etp-tool:hover { border-color: var(--border2); color: var(--text); }
.etp-tool.active { border-color: var(--accent2); color: var(--text); background: rgba(0,232,143,0.08); box-shadow: 0 0 0 1px var(--accent2) inset; }
.etp-ico { font-size: 14px; line-height: 1; }
.etp-lbl { font-size: 9px; letter-spacing: .5px; }
.etp-tool kbd {
  font-size: 8px; padding: 0 4px; border: 1px solid var(--border2); border-radius: 3px;
  color: var(--label); background: rgba(0,0,0,.25); font-family: 'DM Mono', monospace;
}
.etp-tool.active kbd { color: var(--accent2); border-color: var(--accent2); }
.etp-hint { margin-top: 6px; font-size: 9px; color: var(--text2); }
.etp-snap {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 9px; color: var(--text2); cursor: pointer;
  user-select: none;
}
.etp-snap input { accent-color: var(--accent, #4af); cursor: pointer; margin: 0; }
.etp-note { margin-top: 3px; font-size: 8px; line-height: 1.4; color: var(--label); }

/* Custom FX-row label: name big, group name beneath (item request) */
.eff-group-names { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; overflow: hidden; }
.eff-group-names .eff-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eff-group-subname { font-size: 7px; color: var(--label); letter-spacing: .4px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Effect editor: render-order buttons (item request) */
.eff-ve-render-order { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.eff-ve-ro-lbl { font-size: 8px; letter-spacing: 1px; color: var(--label); margin-right: 2px; }
.eff-ve-render-order button {
  font-size: 8px; letter-spacing: .5px; padding: 3px 6px; cursor: pointer;
  background: var(--bg); color: var(--text2); border: 1px solid var(--border);
  border-radius: var(--r-xs, 4px); font-family: inherit;
}
.eff-ve-render-order button:hover { border-color: var(--accent2); color: var(--text); }

/* ── Render Order mode (item request) ──────────────────────────────────── */
#tracksContainer.render-order-active { position: relative; }
.render-order-overlay {
  /* Pinned to the timeline VIEWPORT (top/left/width/height set in JS from the
     tracks-scroll rect) so it stays on screen even when the timeline is zoomed in
     and scrolled — the exit button is always visible (item request). */
  position: fixed; z-index: 60;
  background: rgba(6,10,8,0.94);
  border: 2px solid #ff5a4a; box-shadow: 0 0 0 9999px rgba(0,0,0,0.25) inset;
  display: flex; flex-direction: column; overflow: hidden;
  animation: roBorderPulse 1.1s ease-in-out infinite;
}
@keyframes roBorderPulse { 0%,100% { border-color: #ff5a4a; } 50% { border-color: #ffb0a0; } }
.render-order-overlay .ro-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border2); flex-shrink: 0;
  background: rgba(255,80,70,0.08);
}
.render-order-overlay .ro-title { font-size: 11px; letter-spacing: 2px; color: #ff8a7a; display: flex; flex-direction: column; }
.render-order-overlay .ro-hint { font-size: 8px; letter-spacing: 1px; color: var(--label); }
.render-order-overlay .ro-exit {
  font-size: 10px; letter-spacing: 1px; padding: 6px 12px; cursor: pointer;
  background: #4a1410; color: #ffd7cf; border: 1px solid #ff5a4a; border-radius: var(--r-pill);
  font-family: inherit; animation: roExitFlash 0.9s ease-in-out infinite;
}
@keyframes roExitFlash { 0%,100% { background:#4a1410; box-shadow:0 0 0 rgba(255,90,74,0); } 50% { background:#7a231b; box-shadow:0 0 12px rgba(255,90,74,0.6); } }
.render-order-overlay .ro-list { overflow-y: auto; padding: 8px; }
.render-order-overlay .ro-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px;
  background: var(--panel, #0d1410); border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
}
.render-order-overlay .ro-pos { font-size: 9px; color: var(--label); width: 18px; text-align: center; flex-shrink: 0; }
.render-order-overlay .ro-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.render-order-overlay .ro-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.render-order-overlay .ro-name { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.render-order-overlay .ro-sub { font-size: 8px; color: var(--label); }
.render-order-overlay .ro-arrows { display: flex; gap: 3px; flex-shrink: 0; }
.render-order-overlay .ro-arrows button {
  width: 24px; height: 24px; font-size: 10px; cursor: pointer; padding: 0;
  background: var(--bg); color: var(--text2); border: 1px solid var(--border); border-radius: var(--r-xs, 4px);
}
.render-order-overlay .ro-arrows button:hover:not(:disabled) { border-color: var(--accent2); color: var(--text); }
.render-order-overlay .ro-arrows button:disabled { opacity: 0.3; cursor: default; }
/* Render-order page: drag handle, "FX as master" toggle + linked note (item req) */
.render-order-overlay .ro-head-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.render-order-overlay .ro-master {
  font-size: 9px; letter-spacing: 1px; padding: 6px 10px; cursor: pointer;
  background: var(--bg); color: var(--text2); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-family: inherit;
}
.render-order-overlay .ro-master:hover { border-color: var(--accent2); color: var(--text); }
.render-order-overlay .ro-master.active {
  background: rgba(0,229,255,0.14); color: var(--accent, #00e5ff); border-color: var(--accent, #00e5ff);
}
.render-order-overlay .ro-master-note {
  font-size: 9px; letter-spacing: 0.5px; color: var(--accent, #00e5ff); padding: 6px 12px;
  background: rgba(0,229,255,0.08); border-bottom: 1px solid var(--border2); flex-shrink: 0;
}
.render-order-overlay .ro-drag { cursor: grab; color: var(--label); font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; touch-action: none; }
.render-order-overlay .ro-row--dragging { opacity: 0.85; border-color: var(--accent, #00e5ff); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.render-order-overlay .ro-row--locked { opacity: 0.75; }
/* FX-mode "order = render order" status bar shown below the last track when the
   FX page is the render-order master (item request). */
.eff-ro-master-bar { display: flex; align-items: stretch; height: 20px; margin-top: 2px; }
.eff-ro-master-bar-label { width: 140px; flex-shrink: 0; }
.eff-ro-master-bar-fill {
  flex: 1; display: flex; align-items: center; padding: 0 10px;
  font-size: 9px; letter-spacing: 1px; color: var(--accent, #00e5ff);
  background: rgba(0,229,255,0.12); border: 1px solid rgba(0,229,255,0.35); border-radius: var(--r-xs, 4px);
}
.render-order-overlay .ro-empty { padding: 20px; text-align: center; color: var(--label); font-size: 10px; }

/* Sticky Edit Tools header at the top of the right rail (items 9 + 16) */
.edit-tools-header { position: sticky; top: 0; z-index: 20; flex-shrink: 0; }
.edit-tools-header:empty { display: none; }
.edit-tools-header.active {
  background: rgba(255,80,70,0.07);
  border-bottom: 2px solid #ff5a4a;
  box-shadow: 0 3px 12px rgba(255,90,74,0.22);
}
.edit-tools-header .edit-tool-palette { margin: 0; border: none; border-radius: 0; background: transparent; }

/* Song Info → chord list (item request) */
.chord-info-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chord-info-close { background: none; border: 1px solid var(--border2); color: var(--label); width: 20px; height: 20px; border-radius: var(--r-xs,4px); cursor: pointer; font-size: 11px; line-height: 1; }
.chord-info-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.chord-info-edit { padding: 6px 8px; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm,6px); }
.chord-info-colrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--text2); }
.chord-info-colrow input[type=color] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--border2); border-radius: 4px; cursor: pointer; background: none; }
.chord-info-hint { font-size: 8px; line-height: 1.4; color: var(--label); margin-top: 5px; }
.chord-info-list { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; }
.chord-info-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-xs,4px); cursor: pointer; border: 1px solid transparent; }
.chord-info-row:hover { background: rgba(255,255,255,.04); }
.chord-info-row.selected { border-color: var(--accent2); background: rgba(0,232,143,.08); }
.chord-info-sw { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.4); }
.chord-info-lbl { flex: 1; font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chord-info-t { font-size: 9px; color: var(--label); flex-shrink: 0; }

/* Effect editor: firing-pattern selector (item request) */
.eff-ve-pattern-sel {
  font-size: 8px; letter-spacing: .5px; padding: 2px 4px; border-radius: var(--r-xs,4px);
  background: var(--bg); color: var(--text); border: 1px solid var(--border); font-family: inherit; cursor: pointer;
}
.eff-ve-pattern-n {
  width: 42px; font-size: 8px; padding: 2px 4px; border-radius: var(--r-xs,4px);
  background: var(--bg); color: var(--text); border: 1px solid var(--border); font-family: inherit;
}
.eff-ve-pattern-off-lbl {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; letter-spacing: .5px; color: var(--label);
}
.eff-ve-pattern-off {
  width: 38px; font-size: 8px; padding: 2px 4px; border-radius: var(--r-xs,4px);
  background: var(--bg); color: var(--text); border: 1px solid var(--border); font-family: inherit;
}
.eff-ve-ctx-rule { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }