/* ═══════════════════════════════════════════════════════════════════════
   MelodinAI Studio DAW Pro — studio-daw-pro.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
.sdpro {
  --sdpro-bg: #0d0d14;
  --sdpro-surface: #111118;
  --sdpro-surface2: #16161f;
  --sdpro-surface3: #1a1a26;
  --sdpro-border: #1e1e2e;
  --sdpro-border2: #252535;
  --sdpro-text: #e2e2f0;
  --sdpro-text2: #c4c4d4;
  --sdpro-text3: #888;
  --sdpro-accent: #ff9f5a;
  --sdpro-accent2: #ff4b8b;
  --sdpro-gradient: linear-gradient(90deg, #ff4b8b, #ff9f5a);
  --sdpro-arrange-h: 58%;
  --sdpro-mixer-h: 0%;
  --sdpro-detail-h: 42%;
  --sdpro-header-w: 148px;
  --sdpro-ruler-h: 36px;
  --sdpro-track-h: 52px;
  --sdpro-resize-h: 4px;
  --sdpro-tb-h: 44px;
  --sdpro-mixer-strip-w: 80px;
  --sdpro-sidebar-w: 248px;
  --sdpro-sidebar-rail-w: 52px;
  --sdpro-inspector-w: 228px;
}

/* ── Root layout ────────────────────────────────────────────────────────── */
#viewStudio {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sdpro-bg, #0d0d14);
}
#viewStudio.hidden { display: none !important; }

.sdpro {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sdpro-bg);
  color: var(--sdpro-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  user-select: none;
}

/* ── Compact / laptop UI ─────────────────────────────────────────────────── */
.sdpro.is-compact {
  --sdpro-tb-h: 40px;
  --sdpro-header-w: 136px;
  --sdpro-track-h: 48px;
  --sdpro-ruler-h: 32px;
  --sdpro-mixer-strip-w: 68px;
  --sdpro-sidebar-w: 220px;
  --sdpro-inspector-w: 210px;
  font-size: 11px;
}
.sdpro.is-compact .sdpro-toolbar {
  gap: 2px;
  padding: 0 4px;
}
.sdpro.is-compact .sdpro-btn {
  height: 24px;
  padding: 0 6px;
  font-size: 10px;
}
.sdpro.is-compact .sdpro-btn-icon { width: 24px; }
.sdpro.is-compact .sdpro-tbtn { width: 28px; height: 28px; }
.sdpro.is-compact .sdpro-len-input { width: 40px; height: 22px; }
.sdpro.is-compact .sdpro-projname { max-width: 110px; font-size: 11px; }
.sdpro.is-compact .sdpro-track-input-row,
.sdpro.is-compact .sdpro-track-vol-mini,
.sdpro.is-compact .sdpro-track-len-row { display: none !important; }
.sdpro.is-compact .sdpro-hdr-btn { width: 18px; height: 18px; font-size: 8px; }
.sdpro.is-compact .sdpro-detail-tabs { height: 24px; min-height: 24px; }
.sdpro.is-compact .sdpro-dtab { padding: 2px 8px; height: 20px; font-size: 10px; }
.sdpro.is-compact .sdpro-mixer-section { min-height: 0; }
.sdpro.is-compact .sdpro-channel { width: var(--sdpro-mixer-strip-w); }
@media (max-width: 1366px), (max-height: 820px) {
  .sdpro:not(.is-comfortable-forced) {
    /* hint only — JS toggles is-compact */
  }
}

/* Focus helpers */
.sdpro.is-focus-edit .sdpro-detail-section {
  border-top: 2px solid var(--sdpro-accent2);
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.sdpro-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--sdpro-tb-h);
  min-height: var(--sdpro-tb-h);
  background: var(--sdpro-surface);
  border-bottom: 1px solid var(--sdpro-border);
  padding: 0 8px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  top: 0;
  z-index: 40;
}
.sdpro-toolbar::-webkit-scrollbar { height: 2px; }
.sdpro-toolbar::-webkit-scrollbar-track { background: transparent; }
.sdpro-toolbar::-webkit-scrollbar-thumb { background: var(--sdpro-border2); }

.sdpro-tb-sep {
  width: 1px;
  height: 24px;
  background: var(--sdpro-border2);
  flex-shrink: 0;
  margin: 0 3px;
}

.sdpro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  height: 28px;
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-surface2);
  color: var(--sdpro-text2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.sdpro-btn:hover { background: var(--sdpro-border2); color: var(--sdpro-text); }
.sdpro-btn.active, .sdpro-btn--active {
  background: var(--sdpro-accent2);
  border-color: var(--sdpro-accent2);
  color: #fff;
}
.sdpro-len-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--sdpro-text3);
}
.sdpro-len-input {
  width: 48px;
  height: 26px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
  font-family: inherit;
}
.sdpro-len-unit { font-size: 9px; color: var(--sdpro-text3); }
.sdpro-len-preset {
  min-width: 22px;
  padding: 0 5px !important;
  height: 26px;
  font-size: 10px;
}
.sdpro-track-len-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 9px;
  color: var(--sdpro-text3);
}
.sdpro-track-len-bars {
  width: 44px;
  height: 18px;
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 10px;
  font-family: inherit;
}
.sdpro-track-len-unit { font-size: 9px; }

.sdpro-btn-icon { padding: 0; width: 28px; }

/* Transport buttons */
.sdpro-transport { display: flex; align-items: center; gap: 2px; }
.sdpro-tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-surface2);
  color: var(--sdpro-text2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.sdpro-tbtn:hover { background: var(--sdpro-border2); color: var(--sdpro-text); }
.sdpro-tbtn.play-active { background: #22c55e; border-color: #22c55e; color: #fff; }
.sdpro-tbtn.rec-armed { background: var(--sdpro-accent2); border-color: var(--sdpro-accent2); color: #fff; }
.sdpro-tbtn.loop-on { background: var(--sdpro-accent); border-color: var(--sdpro-accent); color: #fff; }
.sdpro-tbtn.metro-on { background: #a78bfa; border-color: #a78bfa; color: #fff; }

/* Timecode */
.sdpro-timecode {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--sdpro-accent);
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border2);
  border-radius: 4px;
  padding: 4px 8px;
  letter-spacing: 0.05em;
  min-width: 120px;
  text-align: center;
  flex-shrink: 0;
}

/* BPM */
.sdpro-bpm-wrap {
  display: flex; align-items: center; gap: 3px;
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border2);
  border-radius: 4px;
  padding: 0 6px;
  height: 28px;
}
.sdpro-bpm-wrap span { color: var(--sdpro-text3); font-size: 10px; }
.sdpro-bpm-input {
  background: transparent; border: none; outline: none;
  color: var(--sdpro-text); font-family: inherit; font-size: 13px; font-weight: 600;
  width: 38px; text-align: center;
}
.sdpro-bpm-input::-webkit-inner-spin-button,
.sdpro-bpm-input::-webkit-outer-spin-button { opacity: 0.4; }

.sdpro-tap-btn {
  padding: 0 7px; height: 22px; font-size: 10px;
  background: var(--sdpro-surface3); border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text3); border-radius: 3px; cursor: pointer;
  transition: background 0.1s;
}
.sdpro-tap-btn:hover { background: var(--sdpro-border2); color: var(--sdpro-text); }

/* Time sig select */
.sdpro-timesig {
  background: var(--sdpro-bg); border: 1px solid var(--sdpro-border2);
  border-radius: 4px; color: var(--sdpro-text); padding: 4px 6px;
  font-family: inherit; font-size: 12px; height: 28px; cursor: pointer;
}
.sdpro-timesig:focus { outline: 1px solid var(--sdpro-accent2); }

/* Snap select */
.sdpro-snap-sel {
  background: var(--sdpro-bg); border: 1px solid var(--sdpro-border2);
  border-radius: 4px; color: var(--sdpro-text); padding: 4px 6px;
  font-family: inherit; font-size: 11px; height: 28px; cursor: pointer;
}
.sdpro-snap-sel:focus { outline: 1px solid var(--sdpro-accent2); }

#sdproAudioInput,
#sdproMidiInput {
  min-width: 170px;
  max-width: 220px;
}

/* Project name */
.sdpro-projname {
  background: transparent; border: none; border-bottom: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text); font-family: inherit; font-size: 12px; font-weight: 600;
  width: 120px; padding: 3px 4px; outline: none;
}
.sdpro-projname:focus { border-bottom-color: var(--sdpro-accent2); }

/* ── Zoom ───────────────────────────────────────────────────────────────── */
.sdpro-zoom-wrap { display: flex; align-items: center; gap: 2px; }

/* ── Workspace + right sidebar ──────────────────────────────────────────── */
.sdpro-workspace {
  display: flex;
  flex-direction: row;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.sdpro-inspector {
  display: none;
  flex-direction: column;
  width: var(--sdpro-inspector-w);
  min-width: var(--sdpro-inspector-w);
  border-left: 1px solid var(--sdpro-border);
  background: var(--sdpro-surface);
  overflow: hidden;
}
.sdpro.inspector-open .sdpro-inspector { display: flex; }
.sdpro.ws-mixer .sdpro-inspector { display: none !important; }
.sdpro-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid var(--sdpro-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sdpro-text3);
  flex-shrink: 0;
}
.sdpro-insp-close {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--sdpro-text3);
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
}
.sdpro-insp-close:hover { background: var(--sdpro-surface3); color: #fff; }
.sdpro-inspector-body {
  flex: 1 1 0;
  overflow: auto;
  padding: 10px 12px 16px;
  font-size: 12px;
}
.sdpro-inspector-body .sdpro-info-grid {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px 8px;
  font-size: 12px;
}
.sdpro-inspector-body .sdpro-info-clip {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sdpro-border);
}
.sdpro-inspector-body .sdpro-info-clip-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sdpro-text3);
  margin-bottom: 8px;
}
.sdpro-inspector-body .sdpro-info-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--sdpro-text3);
}
.sdpro-inspector-body .sdpro-info-edit input {
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-bg);
  color: var(--sdpro-text);
  padding: 0 8px;
  font: inherit;
}
.sdpro-inspector-body .sdpro-info-clip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sdpro-insp-block { margin-bottom: 4px; }
.sdpro-insp-type {
  font-size: 11px;
  color: var(--sdpro-text3);
  margin: -4px 0 10px;
}
.sdpro-insp-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sdpro-insp-vol-row input[type="range"] {
  flex: 1 1 0;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.sdpro-insp-vol-row span {
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sdpro-text2);
}
.sdpro-insp-toggles {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.sdpro.ws-mixer {
  --sdpro-mixer-strip-w: 92px;
}
.sdpro.ws-mixer .sdpro-vu {
  height: 96px;
  max-height: 96px;
  flex: 0 0 96px;
}
.sdpro.ws-mixer .sdpro-fader-wrap {
  flex: 0 0 168px;
  height: 168px;
  min-height: 168px;
  max-height: 168px;
}
.sdpro.ws-mixer .sdpro-fader {
  flex: none;
  height: 148px;
  min-height: 148px;
}
.sdpro-mixer.sdpro-mixer-ssl360 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #1c1e22;
}
.ssl360 {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.ssl360-legend {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  gap: 0;
  border-right: 1px solid #2e3238;
  background: #16181c;
  color: #6a7078;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ssl360-leg-spacer { height: 54px; flex-shrink: 0; }
.ssl360-leg {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  border-bottom: 1px solid #2a2e34;
  padding: 6px 0;
}
.ssl360-leg[data-zone="input"] { height: 52px; }
.ssl360-leg[data-zone="comp"] { height: 78px; }
.ssl360-leg[data-zone="filt"] { height: 52px; }
.ssl360-leg[data-zone="eq"] { flex: 1; min-height: 140px; }
.ssl360-leg[data-zone="send"] { height: 58px; }
.ssl360-leg[data-zone="out"] { height: 150px; }
.ssl360-rail {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  align-items: stretch;
  gap: 3px;
  padding: 6px 8px 10px;
}
.sdpro.ws-mixer .sdpro-channel.ssl360-ch {
  width: 86px;
  min-width: 86px;
  height: auto;
  min-height: 100%;
  padding: 6px 4px 8px;
  gap: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2e34 0%, #22262c 100%);
  border: 1px solid #3a4048;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sdpro.ws-mixer .sdpro-channel.ssl360-ch.selected {
  border-color: #c4a35a;
  box-shadow: 0 0 0 1px rgba(196,163,90,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ssl360-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}
.ssl360-led {
  height: 8px;
  border-radius: 2px;
  background: #0b0d10;
  overflow: hidden;
  border: 1px solid #111;
}
.ssl360-led i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1a5c3a, #3dff9a 55%, #ffb020 82%, #ff3b3b);
}
.ssl360-zone {
  width: 100%;
  padding: 3px 0;
  border-top: 1px solid rgba(0,0,0,0.35);
}
.ssl360-zone-title {
  font-size: 7px;
  letter-spacing: 0.12em;
  color: #7a828c;
  text-align: center;
  margin-bottom: 2px;
  font-weight: 700;
}
.ssl360-pots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 3px;
}
.ssl360-eq-band {
  width: 100%;
  justify-content: space-around;
  margin-bottom: 1px;
}
.ssl360-ch .sdpro-pot {
  min-width: 30px;
  gap: 0;
}
.ssl360-ch .sdpro-pot.is-large {
  min-width: 52px;
}
.ssl360-ch .sdpro-pot-label {
  font-size: 7px;
  max-width: 36px;
  color: #9aa1aa;
}
.ssl360-ch .sdpro-pot-val {
  font-size: 7px;
  opacity: 0.7;
}
.ssl360-ch .sdpro-pot-canvas {
  cursor: ns-resize;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
.ssl360-gr {
  width: 6px;
  height: 36px;
  border-radius: 2px;
  background: #0b0d10;
  overflow: hidden;
  align-self: center;
  border: 1px solid #111;
}
.ssl360-gr i {
  display: block;
  width: 100%;
  height: 0%;
  margin-top: auto;
  background: #ffb020;
}
.ssl360-btns {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin: 4px 0;
}
.ssl360-btn {
  min-width: 24px;
  height: 18px;
  border: 1px solid #3a4048;
  border-radius: 3px;
  background: #1a1d22;
  color: #8a929c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0 4px;
}
.ssl360-btn.solo.on { background: #d4b84a; color: #111; border-color: #d4b84a; }
.ssl360-btn.mute.on { background: #ff6b4a; color: #111; border-color: #ff6b4a; }
.ssl360-btn.arm.on { background: #ff3b3b; color: #fff; border-color: #ff3b3b; }
.ssl360-vol {
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
}
.ssl360-db {
  font-size: 8px;
  color: #8a929c;
  font-variant-numeric: tabular-nums;
}
.ssl360-master {
  margin-left: 6px;
  border-color: #5a4030 !important;
  background: linear-gradient(180deg, #2a241c 0%, #1e1810 100%) !important;
}
.ssl360-master-vu {
  height: 120px;
  margin: 8px auto;
}
.sdpro.is-beginner .ssl360-zone.z-send { display: flex; }
.sdpro.is-beginner .sdpro-sends { display: none !important; }

.sdpro-ws-switch {
  display: inline-flex;
  align-items: center;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.sdpro-ws-btn {
  height: 26px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--sdpro-text3);
  border-radius: 999px;
  font: 650 11px/1 inherit;
  cursor: pointer;
}
.sdpro-ws-btn:hover { color: var(--sdpro-text); }
.sdpro-ws-btn.active {
  background: var(--sdpro-surface3);
  color: #fff;
}

.sdpro.ws-mixer .sdpro-mixer-section {
  display: flex !important;
  flex: 1 1 0;
  min-height: 0;
  height: 100% !important;
  border-top: none;
}
.sdpro.ws-editor .sdpro-detail-section {
  display: flex !important;
  flex: 1 1 0;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  border-top: none;
}
.sdpro.ws-editor .sdpro-detail-tabs {
  height: 36px;
  min-height: 36px;
  padding: 4px 8px;
  gap: 4px;
  background: var(--sdpro-surface);
  border-bottom: 1px solid var(--sdpro-border);
}
.sdpro.ws-editor .sdpro-dtab {
  border-radius: 999px;
  height: 26px;
  padding: 0 12px;
  border: 0;
}
.sdpro.ws-editor .sdpro-dtab.active {
  background: var(--sdpro-surface3);
  border: 0;
  color: #fff;
}
.sdpro.ws-arrange .sdpro-arrange-section {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
.sdpro.ws-arrange.is-both-dock .sdpro-arrange-section {
  flex: 1 1 0;
  min-height: 120px;
  height: auto;
}
.sdpro.ws-arrange.is-both-dock .sdpro-detail-section,
.sdpro.ws-arrange.detail-min .sdpro-detail-section {
  display: flex !important;
}
.sdpro.ws-arrange.is-both-dock #sdproResizeMixDetail {
  display: block !important;
}
.sdpro-dtab[data-tab="mixer"] { display: none !important; }
.sdpro-track-len-row,
.sdpro-track-input-row,
.sdpro-track-vol-mini { display: none !important; }
.sdpro-resize-h { display: none; }
.sdpro.is-both-dock #sdproResizeMixDetail { display: block !important; }

.sdpro-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--sdpro-bg);
}

.sdpro-sidebar {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  width: calc(var(--sdpro-sidebar-rail-w) + var(--sdpro-sidebar-w));
  min-width: calc(var(--sdpro-sidebar-rail-w) + var(--sdpro-sidebar-w));
  border-left: 1px solid var(--sdpro-border);
  background: var(--sdpro-surface);
  overflow: hidden;
  transition: width 0.18s ease, min-width 0.18s ease;
}
.sdpro.sidebar-collapsed .sdpro-sidebar {
  width: var(--sdpro-sidebar-rail-w);
  min-width: var(--sdpro-sidebar-rail-w);
}
.sdpro.sidebar-collapsed .sdpro-sidebar-panel {
  display: none;
}

.sdpro-sidebar-rail {
  display: flex;
  flex-direction: column;
  width: var(--sdpro-sidebar-rail-w);
  min-width: var(--sdpro-sidebar-rail-w);
  padding: 6px 4px;
  gap: 4px;
  border-right: 1px solid var(--sdpro-border);
  background: var(--sdpro-surface2);
}
.sdpro-sbrail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sdpro-text3);
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  line-height: 1.1;
}
.sdpro-sbrail-btn:hover {
  color: var(--sdpro-text);
  background: var(--sdpro-surface3);
}
.sdpro-sbrail-btn.active {
  color: var(--sdpro-accent);
  border-color: var(--sdpro-border2);
  background: var(--sdpro-surface3);
}
.sdpro-sbrail-spacer { flex: 1 1 auto; }

.sdpro-sidebar-panel {
  flex: 1 1 0;
  width: var(--sdpro-sidebar-w);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px 16px;
}
.sdpro-sb-page { display: flex; flex-direction: column; gap: 14px; }
.sdpro-sb-page.hidden { display: none !important; }
.sdpro-sb-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sdpro-text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sdpro-border);
}
.sdpro-sb-section { display: flex; flex-direction: column; gap: 6px; }
.sdpro-sb-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sdpro-text3);
}
.sdpro-sb-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}
.sdpro-sb-row.wrap { flex-wrap: wrap; }
.sdpro-sb-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.sdpro-sb-full {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.sdpro-sb-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--sdpro-text3);
}
.sdpro-len-ctrl-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.sdpro-library-placeholder {
  min-height: 160px;
  border: 1px dashed var(--sdpro-border2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sdpro-bg);
}
.sdpro-library-empty {
  font-size: 11px;
  color: var(--sdpro-text3);
  padding: 10px 6px;
  text-align: center;
}
.sdpro-lib-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
  border: 1px solid var(--sdpro-border);
  border-radius: 6px;
  background: var(--sdpro-bg);
}
.sdpro-lib-tip {
  font-size: 10px;
  color: #f59e0b;
  padding: 4px 6px;
}
.sdpro-lib-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--sdpro-surface2);
  color: var(--sdpro-text);
  cursor: pointer;
  font-family: inherit;
}
.sdpro-lib-item:hover {
  border-color: var(--sdpro-border2);
  background: #1a1a24;
}
.sdpro-lib-item.is-active {
  border-color: rgba(255, 75, 139, 0.55);
  background: rgba(255, 75, 139, 0.1);
}
.sdpro-lib-item.is-current {
  border-color: rgba(75, 159, 255, 0.45);
}
.sdpro-lib-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sdpro-lib-item-name {
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdpro-lib-item-meta {
  font-size: 9px;
  color: var(--sdpro-text3);
}
.sdpro-lib-item-when {
  font-size: 9px;
  color: var(--sdpro-text3);
  flex-shrink: 0;
  max-width: 72px;
  text-align: right;
  line-height: 1.25;
}
.sdpro-lib-sample {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--sdpro-surface2);
  cursor: grab;
  border: 1px solid transparent;
}
.sdpro-lib-sample:hover { border-color: var(--sdpro-accent2); }
.sdpro-lib-sample:active { cursor: grabbing; }
.sdpro-lib-sample-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sdpro-text);
}
.sdpro-lib-sample-meta {
  font-size: 9px;
  color: var(--sdpro-text3);
}
body.sdpro-lib-dragging .sdpro-tracks-vp {
  outline: 2px dashed #4b9fff;
  outline-offset: -2px;
}

@media (max-width: 1100px) {
  .sdpro {
    --sdpro-sidebar-w: 220px;
  }
}

/* ── Arrange Section ────────────────────────────────────────────────────── */
.sdpro-arrange-section {
  display: flex;
  flex-direction: row;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sdpro-bg);
  position: relative;
}

.sdpro-session-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sdpro-bg);
}

.sdpro-session-grid-wrap {
  flex: 1 1 0;
  overflow: auto;
  padding: 10px;
}

.sdpro-session-grid {
  display: grid;
  grid-auto-rows: minmax(38px, auto);
  gap: 6px;
  min-width: max-content;
}

.sdpro-session-cell {
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-surface2);
  color: var(--sdpro-text2);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  min-height: 36px;
  padding: 4px 6px;
  text-align: left;
}
.sdpro-session-cell:hover { border-color: var(--sdpro-accent); }
.sdpro-session-cell.is-empty { opacity: 0.7; }
.sdpro-session-cell.is-loaded { border-color: #3b82f6; }
.sdpro-session-cell.is-queued { border-color: #f59e0b; background: rgba(245,158,11,0.18); }
.sdpro-session-cell.is-playing { border-color: #22c55e; background: rgba(34,197,94,0.16); color: #d8ffe5; }

.sdpro-session-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--sdpro-text3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sdpro-session-scene-btn,
.sdpro-session-track-btn {
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-surface3);
  color: var(--sdpro-text2);
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
  min-height: 36px;
}
.sdpro-session-scene-btn:hover,
.sdpro-session-track-btn:hover { border-color: var(--sdpro-accent2); color: var(--sdpro-text); }

.sdpro-session-corner {
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  justify-content: center;
  padding: 4px;
}
.sdpro-session-stop-all {
  border: 1px solid #553;
  background: #2a1515;
  color: #fca5a5;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  padding: 4px 6px;
}
.sdpro-session-stop-all:hover { border-color: #e53e3e; color: #fff; }
.sdpro-session-cap-badge {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: #e53e3e;
  border-radius: 3px;
  padding: 2px 5px;
  text-align: center;
  animation: armPulse 1.2s ease-in-out infinite;
}

.sdpro-session-track-head {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 4px;
}
.sdpro-session-track-stop {
  border: 1px solid #553;
  background: #1a1010;
  color: #f87171;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.sdpro-session-track-stop:hover { background: #e53e3e; color: #fff; border-color: #e53e3e; }

.sdpro-clip-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--sdpro-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
}
.sdpro-clip-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sdpro-clip-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.sdpro-clip-meta {
  font-size: 9px;
  color: var(--sdpro-text3);
  margin-top: 2px;
}

.sdpro-clip-controls {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.sdpro-clip-sel {
  flex: 1 1 0;
  min-width: 0;
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border);
  color: var(--sdpro-text3);
  border-radius: 3px;
  font-size: 9px;
  padding: 1px 2px;
  cursor: pointer;
}
.sdpro-clip-sel:focus { border-color: var(--sdpro-accent); outline: none; }

.sdpro-session-scene-wrap {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 4px;
}
.sdpro-session-scene-stop {
  border: 1px solid #553;
  background: #1a1010;
  color: #f87171;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.sdpro-session-scene-stop:hover { background: #e53e3e; color: #fff; border-color: #e53e3e; }

.sdpro-session-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#sdproSessionCapture.active {
  background: #e53e3e !important;
  border-color: #c53030 !important;
  color: #fff !important;
  animation: armPulse 1.2s ease-in-out infinite;
}

/* Track headers */
.sdpro-track-headers {
  width: var(--sdpro-header-w);
  min-width: var(--sdpro-header-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sdpro-surface);
  border-right: 1px solid var(--sdpro-border);
  overflow: hidden;
}

.sdpro-header-ruler-corner {
  height: var(--sdpro-ruler-h);
  min-height: var(--sdpro-ruler-h);
  border-bottom: 1px solid var(--sdpro-border);
  background: var(--sdpro-surface);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  flex-shrink: 0;
}

.sdpro-header-corner-label { font-size: 10px; color: var(--sdpro-text3); flex: 1; }
.sdpro-add-track-group {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.sdpro-add-track-group .sdpro-btn {
  height: 22px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
}

.sdpro-track-add-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--sdpro-border);
  background: var(--sdpro-surface2);
  z-index: 3;
  min-height: 36px;
  box-sizing: border-box;
}
.sdpro-track-add-bar[hidden] { display: none !important; }
.sdpro-track-add-bar .sdpro-add-track-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4px;
}
.sdpro-track-add-bar .sdpro-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  padding: 0 4px;
  font-size: 10px;
}

.sdpro-hdr-btn.sdpro-fold-btn {
  width: 18px;
  height: 18px;
  font-size: 11px;
  flex-shrink: 0;
  color: var(--sdpro-text2);
}
.sdpro-track-header.is-min {
  min-height: 28px !important;
  padding: 0 4px;
  align-items: center;
}
.sdpro-track-header.is-min .sdpro-track-len-row,
.sdpro-track-header.is-min .sdpro-track-vol-mini,
.sdpro-track-header.is-min .sdpro-track-input-row,
.sdpro-track-header.is-min .sdpro-track-hresize {
  display: none !important;
}
.sdpro-track-header.is-min .sdpro-track-name-row { margin-bottom: 0; }
.sdpro-track-header.is-min .sdpro-track-hdr-btns { margin-top: 0; }
.sdpro-track-header.is-min .sdpro-track-hdr-main {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sdpro-track-header.is-min .sdpro-track-name-row { flex: 1 1 0; margin-bottom: 0; }
.sdpro-track-header.is-min .sdpro-track-name-input { font-size: 11px; }
.sdpro-btn-add-audio {
  border-color: #3d6a9a !important;
  color: #8ec5ff !important;
}
.sdpro-btn-add-audio:hover {
  background: rgba(75, 159, 255, 0.18) !important;
  color: #cfe7ff !important;
}
.sdpro-btn-add-midi {
  border-color: #6a4a9a !important;
  color: #d2b4ff !important;
}
.sdpro-btn-add-midi:hover {
  background: rgba(180, 75, 255, 0.18) !important;
  color: #ead9ff !important;
}
.sdpro-btn-add-drum {
  border-color: #9a6a2a !important;
  color: #ffc878 !important;
}
.sdpro-btn-add-drum:hover {
  background: rgba(255, 159, 90, 0.18) !important;
  color: #ffe0b0 !important;
}
.sdpro-track-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-bottom: 4px;
}
.sdpro-track-name-row .sdpro-track-name-input {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.sdpro-track-type-badge {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text3);
  line-height: 1.2;
}
.sdpro-track-type-badge.is-audio {
  color: #8ec5ff;
  border-color: #3d6a9a;
}
.sdpro-track-type-badge.is-midi {
  color: #d2b4ff;
  border-color: #6a4a9a;
}
.sdpro-track-type-badge.is-drum {
  color: #ffc878;
  border-color: #9a6a2a;
}

.sdpro-headers-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.sdpro-track-header {
  display: flex;
  align-items: center;
  padding: 4px 6px 4px 4px;
  border-bottom: 1px solid var(--sdpro-border);
  background: var(--sdpro-surface);
  cursor: default;
  position: relative;
  transition: background 0.1s;
  box-sizing: border-box;
  min-height: var(--sdpro-track-h);
}
.sdpro-track-header:hover { background: var(--sdpro-surface2); }
.sdpro-track-header.selected { background: var(--sdpro-surface3); }

.sdpro-track-color-bar {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 6px;
}

.sdpro-track-hdr-main { flex: 1 1 0; overflow: hidden; }

.sdpro-track-name-input {
  background: transparent; border: none; outline: none;
  color: var(--sdpro-text); font-family: inherit; font-size: 11px; font-weight: 600;
  width: 100%; padding: 0; margin-bottom: 2px;
  cursor: text;
}
.sdpro-track-name-input:focus { border-bottom: 1px solid var(--sdpro-accent2); }

.sdpro-track-hdr-btns {
  display: flex; align-items: center; gap: 3px;
}

.sdpro-hdr-btn {
  width: 20px; height: 20px;
  border-radius: 3px;
  border: 1px solid var(--sdpro-border2);
  background: transparent;
  color: var(--sdpro-text3);
  font-size: 9px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  font-family: inherit;
}
.sdpro-hdr-btn:hover { background: var(--sdpro-border2); color: var(--sdpro-text); }
.sdpro-hdr-btn.muted { background: #f59e0b; border-color: #f59e0b; color: #000; }
.sdpro-hdr-btn.soloed { background: #22c55e; border-color: #22c55e; color: #000; }
.sdpro-hdr-btn.fx-on { background: var(--sdpro-accent2); border-color: var(--sdpro-accent2); color: #fff; }
.sdpro-hdr-btn.auto-on { background: #a78bfa; border-color: #a78bfa; color: #fff; }

/* ARM button — piros, figyelmeztető */
.sdpro-arm-btn { font-size: 7px !important; color: #555 !important; }
.sdpro-arm-btn.armed { background: #e53e3e !important; border-color: #c53030 !important; color: #fff !important; animation: armPulse 1.2s ease-in-out infinite; }
@keyframes armPulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }

/* MONITOR button */
.sdpro-mon-btn { font-size: 10px !important; }
.sdpro-mon-btn.mon-on { background: var(--sdpro-accent) !important; border-color: var(--sdpro-accent) !important; color: #000 !important; }

/* ── Input routing row in track header ──────────────────────────────────── */
.sdpro-track-input-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 3px;
  align-items: center;
  padding: 2px 0 0 0;
  min-width: 0;
}
.sdpro-track-input-row.has-gain:not(.has-device) {
  /* Off + Gain on one row */
  grid-template-columns: 52px minmax(0, 1fr);
}
.sdpro-track-input-row.has-gain.has-device {
  /* Aud + device on row 1, Gain full-width on row 2 */
  grid-template-columns: 52px minmax(0, 1fr);
}
.sdpro-track-input-sel {
  background: var(--sdpro-surface3);
  border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text2);
  font-size: 9px;
  border-radius: 3px;
  padding: 1px 2px;
  cursor: pointer;
  outline: none;
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.sdpro-track-input-sel--type {
  grid-column: 1;
}
.sdpro-track-input-sel--device {
  grid-column: 2;
}
.sdpro-track-input-sel:focus { border-color: var(--sdpro-accent); }

.sdpro-ingain-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  color: var(--sdpro-text3);
  min-width: 0;
}
.sdpro-track-input-row.has-gain:not(.has-device) .sdpro-ingain-wrap {
  grid-column: 2;
}
.sdpro-track-input-row.has-gain.has-device .sdpro-ingain-wrap {
  grid-column: 1 / -1;
}
.sdpro-ingain-wrap .sdpro-track-ingain {
  flex: 1 1 0;
  width: auto;
  min-width: 40px;
  margin-left: 0;
}

.sdpro-track-vol-mini {
  -webkit-appearance: none;
  appearance: none;
  width: 52px; height: 3px;
  background: var(--sdpro-border2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin-left: 4px;
}
.sdpro-track-vol-mini::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sdpro-accent);
  cursor: pointer;
}

/* height drag handle */
.sdpro-track-hresize {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; cursor: ns-resize;
  background: transparent;
}
.sdpro-track-hresize:hover { background: var(--sdpro-accent); opacity: 0.4; }

/* ── Arrange (canvas area) ───────────────────────────────────────────────── */
.sdpro-arrange-wrap {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.sdpro-ruler {
  height: var(--sdpro-ruler-h);
  min-height: var(--sdpro-ruler-h);
  display: block;
  background: var(--sdpro-surface);
  border-bottom: 1px solid var(--sdpro-border);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  /* width set in JS to content width; scrolls via translateX */
  max-width: none;
  will-change: transform;
}

.sdpro-tracks-vp {
  flex: 1 1 0;
  overflow: auto;
  position: relative;
  background: var(--sdpro-bg);
}
.sdpro-tracks-vp::-webkit-scrollbar { width: 8px; height: 8px; }
.sdpro-tracks-vp::-webkit-scrollbar-track { background: var(--sdpro-surface); }
.sdpro-tracks-vp::-webkit-scrollbar-thumb { background: var(--sdpro-border2); border-radius: 4px; }

.sdpro-canvas { display: block; position: relative; z-index: 1; }

.sdpro-playhead {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--sdpro-accent2);
  pointer-events: none; z-index: 10;
  box-shadow: 0 0 6px var(--sdpro-accent2);
  transform: translateX(-1px);
}

.sdpro-loop-bracket {
  position: absolute; top: 0; bottom: 0;
  background: rgba(255, 159, 90, 0.05);
  border-left: 2px solid rgba(255, 159, 90, 0.55);
  border-right: 2px solid rgba(255, 159, 90, 0.55);
  pointer-events: none; z-index: 8;
  box-sizing: border-box;
}
.sdpro-loop-bracket.is-active {
  background: rgba(255, 159, 90, 0.09);
  border-left-color: #ff9f5a;
  border-right-color: #ff9f5a;
}

/* ── Resize handles (horizontal = between vertical sections) ─────────────── */
.sdpro-resize-h {
  height: var(--sdpro-resize-h);
  min-height: var(--sdpro-resize-h);
  background: var(--sdpro-border);
  cursor: ns-resize;
  flex-shrink: 0;
  transition: background 0.1s;
  z-index: 20;
}
.sdpro-resize-h:hover, .sdpro-resize-h.dragging { background: var(--sdpro-accent); }

/* ── Mixer Section ──────────────────────────────────────────────────────── */
.sdpro-mixer-section {
  display: none;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sdpro-surface);
  flex-direction: column;
}

.sdpro-mixer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  padding: 8px 6px 12px;
  gap: 4px;
  box-sizing: border-box;
}
.sdpro-mixer.sdpro-ssl-mixer-host,
.sdpro-mixer[data-ssl-mounted="1"] {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #1a1c1f;
}
.sdpro-mixer.sdpro-ssl-mixer-host > *,
.sdpro-mixer[data-ssl-mounted="1"] > * {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Melodin Console (vanilla SSL mixer) */
.mconsole {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #1a1c1f;
  color: #c8ccd2;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}
.mconsole-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #3a3f48;
  flex-shrink: 0;
}
.mconsole-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c4a35a;
}
.mconsole-modes {
  display: flex;
  border: 1px solid #3a3f48;
  border-radius: 4px;
  overflow: hidden;
}
.mconsole-modes button {
  background: transparent;
  border: 0;
  color: #7a808a;
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
}
.mconsole-modes button.on {
  background: rgba(196, 163, 90, 0.18);
  color: #c4a35a;
}
.mconsole-hint {
  font-size: 10px;
  color: #7a808a;
}
.mconsole-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.mconsole-rail {
  display: flex;
  gap: 6px;
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.mconsole-strip {
  width: 78px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid #3a3f48;
  border-radius: 6px;
  background: #22252a;
  cursor: pointer;
}
.mconsole-strip.selected {
  border-color: #c4a35a;
  box-shadow: inset 0 0 0 1px rgba(196, 163, 90, 0.35);
}
.mconsole-strip.is-master {
  background: #1e1810;
}
.mconsole-color {
  height: 3px;
  width: 100%;
  border-radius: 2px;
}
.mconsole-name {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mconsole-meters {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
}
.mconsole-vu {
  width: 6px;
  height: 100%;
  background: #0b0c0e;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.mconsole-vu i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(to top, #3dff9a, #ffb020 80%, #ff3b3b);
}
.mconsole-fader {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px;
  height: 140px;
  padding: 0;
  cursor: ns-resize;
  accent-color: #d4d8de;
}
.mconsole-db {
  font-size: 9px;
  color: #7a808a;
  font-variant-numeric: tabular-nums;
}
.mconsole-pan {
  width: 100%;
  height: 4px;
  accent-color: #c4a35a;
}
.mconsole-btns {
  display: flex;
  gap: 3px;
}
.m-btn {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 0;
  background: #2a2e34;
  color: #7a808a;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.m-btn.on.mute { background: #ffb020; color: #111; }
.m-btn.on.solo { background: #f5d76e; color: #111; }
.m-btn.on.arm { background: #ff3b3b; color: #fff; }
.mconsole-insp {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid #3a3f48;
  background: #22252a;
  overflow-y: auto;
  padding: 12px;
}
.mconsole-insp-head { margin-bottom: 12px; }
.mconsole-insp-name { font-size: 14px; font-weight: 700; }
.mconsole-insp-sub {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a808a;
  margin-top: 2px;
}
.mconsole-macro {
  display: grid;
  grid-template-columns: 52px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4a35a;
}
.mconsole-macro input { width: 100%; accent-color: #c4a35a; }
.mconsole-macro em {
  font-style: normal;
  color: #7a808a;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mconsole-pots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-start;
}
.mconsole-pots.is-tight { gap: 6px 8px; }
.mconsole-pots .sdpro-pot {
  min-width: 44px;
}
.mconsole-eq-band-pots {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #3a3f48;
  border-radius: 4px;
  background: rgba(0,0,0,0.22);
}
.mconsole-pan-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.mconsole-pan-knob {
  cursor: ns-resize;
  border-radius: 50%;
}
.mconsole-ai {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #3a3f48;
}
.mconsole-ai button,
.mconsole-presets button {
  border: 1px solid #3a3f48;
  background: #1a1c1f;
  color: #c8ccd2;
  border-radius: 4px;
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
}
.mconsole-ai button:hover,
.mconsole-presets button:hover {
  border-color: #c4a35a;
  color: #c4a35a;
}
.mconsole-sec {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #3a3f48;
}
.mconsole-sec h4 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c4a35a;
}
.mconsole-sec label {
  display: none;
}
.mconsole-eq-band {
  display: none;
}
.mconsole-eq-title {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.mconsole-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mconsole-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #7a808a;
  font-size: 12px;
}
.sdpro.is-beginner .mconsole-strip .mconsole-pan { display: block; }

.sdpro-mixer::-webkit-scrollbar { height: 6px; width: 6px; }
.sdpro-mixer::-webkit-scrollbar-track { background: var(--sdpro-surface); }
.sdpro-mixer::-webkit-scrollbar-thumb { background: var(--sdpro-border2); border-radius: 3px; }

/* Channel strip */
.sdpro-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--sdpro-mixer-strip-w);
  min-width: var(--sdpro-mixer-strip-w);
  height: auto;
  min-height: 0;
  padding: 6px 4px 8px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  gap: 4px;
  cursor: default;
  transition: border-color 0.1s;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: visible;
}
.sdpro-channel:hover { border-color: var(--sdpro-border2); }
.sdpro-channel.selected { border-color: var(--sdpro-accent2); }
.sdpro-channel.master-ch { border-color: var(--sdpro-accent); background: #1a1208; }

.sdpro-ch-colorbar {
  width: 100%; height: 3px; border-radius: 2px;
}

.sdpro-ch-name {
  background: transparent; border: none; outline: none;
  color: var(--sdpro-text2); font-family: inherit; font-size: 10px;
  width: 100%; text-align: center; cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0;
}
.sdpro-ch-name:focus { color: var(--sdpro-text); border-bottom: 1px solid var(--sdpro-accent2); }

/* Sends */
.sdpro-sends { display: flex; gap: 3px; align-items: center; width: 100%; justify-content: center; }
.sdpro-send-knob { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; }
.sdpro-send-label { font-size: 8px; color: var(--sdpro-text3); text-align: center; }

/* VU meters */
.sdpro-vu {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 80px;
  min-height: 64px;
  max-height: 80px;
  flex: 0 0 80px;
  width: 100%;
  justify-content: center;
}
.sdpro-vu-bar {
  width: 8px; flex-shrink: 0;
  background: var(--sdpro-bg);
  border-radius: 2px;
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sdpro-border);
}
.sdpro-vu-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 0%;
  min-height: 0;
  border-radius: 2px;
  background: linear-gradient(to top, #22c55e 0%, #84cc16 55%, #f59e0b 78%, #ef4444 95%);
  transition: height 0.05s linear;
  will-change: height;
}
.sdpro-vu-peak {
  position: absolute; left: 0; right: 0; height: 2px;
  background: #ff4b8b;
  opacity: 0;
  pointer-events: none;
}

/* Fader */
.sdpro-fader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 148px;
  width: 100%;
  height: 148px;
  min-height: 148px;
  max-height: 148px;
}
.sdpro-fader {
  -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  flex: none;
  height: 128px;
  min-height: 128px;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.sdpro-fader::-webkit-slider-runnable-track {
  width: 4px; background: var(--sdpro-border2); border-radius: 2px;
}
.sdpro-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 8px;
  background: var(--sdpro-text2); border-radius: 2px;
  cursor: grab; margin-left: -10px;
  border: 1px solid var(--sdpro-border2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.sdpro-fader::-webkit-slider-thumb:active { cursor: grabbing; background: var(--sdpro-accent); }

.sdpro-fader-db {
  font-size: 9px; color: var(--sdpro-text3); text-align: center; font-family: monospace;
}

/* Pan knob canvas */
.sdpro-pan-canvas { cursor: pointer; display: block; }

/* Channel MS buttons */
.sdpro-ch-btns { display: flex; gap: 3px; flex-shrink: 0; }
.sdpro-ch-btn {
  width: 20px; height: 16px;
  border-radius: 3px;
  border: 1px solid var(--sdpro-border2);
  background: transparent;
  color: var(--sdpro-text3);
  font-size: 9px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
  flex-shrink: 0;
}
.sdpro-ch-btn:hover { background: var(--sdpro-border2); }
.sdpro-ch-btn.muted { background: #f59e0b; border-color: #f59e0b; color: #000; }
.sdpro-ch-btn.soloed { background: #22c55e; border-color: #22c55e; color: #000; }

/* Mixer strip ARM + input label */
.sdpro-ch-arm-btn {
  width: 100%; height: 18px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 3px;
  color: #444;
  font-size: 8px;
  cursor: pointer;
  margin-bottom: 3px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sdpro-ch-arm-btn.armed {
  background: #e53e3e;
  border-color: #c53030;
  color: #fff;
  animation: armPulse 1.2s ease-in-out infinite;
}
.sdpro-ch-arm-btn:hover { border-color: #e53e3e; color: #e53e3e; }

.sdpro-ch-input-lbl {
  font-size: 8px;
  color: var(--sdpro-text3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-bottom: 3px;
  padding: 1px 2px;
  background: var(--sdpro-surface3);
  border-radius: 2px;
  border: 1px solid var(--sdpro-border);
}

/* ── Detail Section ──────────────────────────────────────────────────────── */
.sdpro-detail-section {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--sdpro-surface);
  min-height: 0;
}

.sdpro.is-both-dock .sdpro-detail-section {
  display: flex !important;
  flex: 0 0 268px;
  height: 268px;
  min-height: 268px;
  max-height: 268px;
  border-top: 1px solid var(--sdpro-border);
}
.sdpro.is-both-dock .sdpro-tab-panel[data-panel="fx"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px 8px 8px;
}
.sdpro.is-both-dock .sdpro-mixer-section {
  display: none !important;
}

.sdpro-detail-tabs {
  display: flex;
  align-items: center;
  height: 28px;
  min-height: 28px;
  background: var(--sdpro-surface2);
  border-bottom: 1px solid var(--sdpro-border);
  padding: 0 4px;
  gap: 2px;
  flex-shrink: 0;
}

.sdpro-detail-tabs-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.sdpro-dock-btn {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}
.sdpro-dock-btn.active {
  background: var(--sdpro-surface3);
  color: var(--sdpro-text);
  border-color: var(--sdpro-border2);
}

.sdpro.detail-min .sdpro-detail-content { display: none !important; }
.sdpro.detail-min .sdpro-detail-section {
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
}
.sdpro.detail-min #sdproResizeMixDetail { display: none !important; }

.sdpro-dtab {
  padding: 4px 10px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sdpro-text3);
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition: background 0.1s, color 0.1s;
}
.sdpro-dtab:hover { color: var(--sdpro-text2); background: var(--sdpro-surface3); }
.sdpro-dtab.active {
  background: var(--sdpro-surface);
  border-color: var(--sdpro-border) var(--sdpro-border) transparent;
  color: var(--sdpro-text);
}
.sdpro-dtab.is-hidden { display: none !important; }

.sdpro-detail-content {
  flex: 1 1 0;
  overflow: hidden;
  position: relative;
}

.sdpro-tab-panel {
  position: absolute; inset: 0;
  overflow: auto;
  padding: 6px;
  box-sizing: border-box;
}
.sdpro-tab-panel.hidden { display: none !important; }
.sdpro-tab-panel.sdpro-mixer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: auto;
  padding: 8px 6px 12px;
  gap: 4px;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Dock: squeeze channel chrome so M/S stay visible without clipping */
.sdpro.is-both-dock .sdpro-tab-panel.sdpro-mixer .sdpro-channel,
.sdpro.is-both-dock .sdpro-mixer .sdpro-channel {
  min-height: 0;
  height: auto;
}
.sdpro.is-both-dock .sdpro-fader-wrap {
  flex-basis: 120px;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
}
.sdpro.is-both-dock .sdpro-fader {
  height: 100px;
  min-height: 100px;
}
.sdpro.is-both-dock .sdpro-vu {
  height: 64px;
  max-height: 64px;
  flex: 0 0 64px;
}
.sdpro.is-both-dock .sdpro-sends { gap: 2px; flex-shrink: 0; }
.sdpro.is-both-dock .sdpro-pan-canvas { width: 28px !important; height: 28px !important; flex-shrink: 0; }
.sdpro.is-both-dock .sdpro-ch-input-lbl { display: none; }
.sdpro.is-both-dock .sdpro-detail-content {
  min-height: 0;
}

/* FX Chain */
.sdpro-tab-panel[data-panel="fx"]:not(.hidden) {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 6px 8px 8px;
}
.sdpro-fx-chain {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: none;
}
.sdpro-fx-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 8px;
  cursor: default;
  width: 176px;
  min-width: 176px;
  min-height: 132px;
  flex-shrink: 0;
}
.sdpro-fx-slot:hover { border-color: var(--sdpro-border2); }
.sdpro-fx-slot.is-drop-target { outline: 1px dashed #ff4b8b; }
.sdpro-fx-slot.bypassed { opacity: 0.5; }

.sdpro-fx-drag { color: var(--sdpro-text3); cursor: grab; font-size: 10px; padding: 2px 4px; flex-shrink: 0; }
.sdpro-fx-drag:active { cursor: grabbing; }
.sdpro-fx-bypass {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sdpro-accent2);
  border: 2px solid var(--sdpro-border2);
  cursor: pointer; flex-shrink: 0;
  padding: 0;
}
.sdpro-fx-bypass.off { background: var(--sdpro-border2); }
.sdpro-fx-slot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.sdpro-fx-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--sdpro-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdpro-fx-quick {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}
.sdpro-fx-quick-tip {
  font-size: 10px;
  color: var(--sdpro-text3);
  align-self: center;
}
.sdpro-fx-open {
  font-size: 10px; color: var(--sdpro-text3); cursor: pointer;
  padding: 3px 8px; border: 1px solid var(--sdpro-border); border-radius: 3px;
  background: transparent; font-family: inherit; flex-shrink: 0;
}
.sdpro-fx-open:hover { background: var(--sdpro-border2); color: var(--sdpro-text); }
.sdpro-fx-remove {
  width: 18px; height: 18px; border-radius: 3px;
  background: transparent; border: 1px solid var(--sdpro-border);
  color: var(--sdpro-text3); cursor: pointer; font-size: 12px; font-family: inherit;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sdpro-fx-remove:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

.sdpro-fx-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 92px;
  padding: 8px;
  border: 1px dashed var(--sdpro-border2);
  border-radius: 8px; color: var(--sdpro-text3); cursor: pointer;
  font-size: 11px; font-family: inherit; background: transparent;
  align-self: stretch;
  flex-shrink: 0;
}
.sdpro-fx-add-btn:hover { border-color: var(--sdpro-accent2); color: var(--sdpro-accent2); }

/* Potmeters */
.sdpro-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  user-select: none;
}
.sdpro-pot.is-compact { min-width: 36px; }
.sdpro-pot-canvas {
  display: block;
  cursor: ns-resize;
  touch-action: none;
}
.sdpro-pot-label {
  font-size: 9px;
  color: var(--sdpro-text3);
  line-height: 1.1;
  text-align: center;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdpro-pot.is-compact .sdpro-pot-label { font-size: 8px; max-width: 40px; }
.sdpro-pot-val {
  font-size: 9px;
  font-family: monospace;
  color: var(--sdpro-text2);
  line-height: 1.1;
  text-align: center;
}
.sdpro-pot.is-compact .sdpro-pot-val { font-size: 8px; }
.sdpro-fx-pot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px 10px;
  padding: 8px 4px 4px;
  justify-items: center;
}

/* Gain reduction meters */
.sdpro-fx-gr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 36px;
}
.sdpro-fx-gr.is-compact { min-width: 28px; }
.sdpro-fx-gr-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--sdpro-text3);
  letter-spacing: 0.04em;
}
.sdpro-fx-gr-track {
  width: 10px;
  height: 40px;
  border-radius: 3px;
  background: #0a0a10;
  border: 1px solid #2a2a3a;
  position: relative;
  overflow: hidden;
}
.sdpro-fx-gr.is-compact .sdpro-fx-gr-track { height: 32px; width: 8px; }
.sdpro-fx-gr-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(to top, #22c55e 0%, #f59e0b 55%, #ef4444 100%);
  transition: height 0.05s linear;
}
.sdpro-fx-gr.is-active .sdpro-fx-gr-label { color: #f59e0b; }
.sdpro-fx-gr-val {
  font-size: 8px;
  font-family: monospace;
  color: var(--sdpro-text2);
  min-width: 28px;
  text-align: center;
}
.sdpro-fx-meter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 6px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sdpro-border);
}
.sdpro-fx-meter-row .sdpro-fx-gr-track {
  width: 18px;
  height: 72px;
}
.sdpro-fx-meter-row .sdpro-fx-gr-val { font-size: 11px; }
.sdpro-fx-meter-hint {
  font-size: 11px;
  color: var(--sdpro-text3);
  line-height: 1.35;
  max-width: 220px;
}

.sdpro-eq-shell { display: flex; flex-direction: column; gap: 8px; }
.sdpro-eq-drag-tip {
  font-size: 10px;
  color: var(--sdpro-text3);
  padding: 0 2px;
}
.sdpro-eq-band-idx {
  width: 16px;
  font-size: 10px;
  font-weight: 700;
  color: var(--sdpro-text3);
  text-align: center;
}
.sdpro-eq-band-row.is-selected {
  background: rgba(255, 75, 139, 0.1);
  border-radius: 4px;
  outline: 1px solid rgba(255, 75, 139, 0.35);
}

/* EQ canvas */
.sdpro-eq-canvas {
  display: block;
  width: 100%;
  height: 240px;
  background: #0a0a10;
  border-radius: 6px;
  border: 1px solid var(--sdpro-border);
  cursor: crosshair;
  touch-action: none;
}

/* Plugin editor overlay */
.sdpro-plugin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.5);
}
.sdpro-plugin-editor {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #14141c;
  border: 1px solid var(--sdpro-border2);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.75);
  padding: 14px 16px 16px;
  min-width: 320px;
  max-width: min(560px, 94vw);
  max-height: min(80vh, 640px);
  overflow: auto;
}
.sdpro-plugin-editor.is-eq {
  min-width: min(820px, 96vw);
  max-width: min(920px, 96vw);
  max-height: min(90vh, 820px);
}
.sdpro-plugin-picker-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sdpro-text3);
  margin: 8px 0 4px;
}
.sdpro-plugin-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}
.sdpro-plugin-picker [data-instrument] {
  border-color: rgba(255, 159, 90, 0.45);
  color: #ffc08a;
}
.sdpro-plugin-editor-title {
  font-size: 13px; font-weight: 700; color: var(--sdpro-text); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.sdpro-plugin-editor-close {
  background: transparent; border: none; color: var(--sdpro-text3); cursor: pointer;
  font-size: 16px; font-family: inherit; line-height: 1;
  padding: 2px 6px;
}
.sdpro-plugin-editor-close:hover { color: var(--sdpro-text); }

.sdpro-eq-bands {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.sdpro-eq-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--sdpro-border);
}
.sdpro-eq-band-pots {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
}
.sdpro-eq-type {
  background: #111118;
  border: 1px solid #1e1e2e;
  color: #e2e2f0;
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 4px;
  max-width: 88px;
}
.sdpro-eq-knob {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--sdpro-text3);
}
.sdpro-eq-knob input[type="range"] {
  width: 72px;
  height: 4px;
  accent-color: var(--sdpro-accent);
}
.sdpro-eq-knob-val {
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sdpro-text2);
}

/* Info panel */
.sdpro-info-text { color: var(--sdpro-text3); font-size: 12px; padding: 8px; }
.sdpro-info-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 6px; }
.sdpro-info-key { color: var(--sdpro-text3); font-size: 11px; }
.sdpro-info-val { color: var(--sdpro-text); font-size: 11px; }
.sdpro-info-clip {
  margin: 8px 6px;
  padding: 8px;
  border: 1px solid var(--sdpro-border);
  border-radius: 6px;
  background: var(--sdpro-surface2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sdpro-info-clip-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--sdpro-accent);
}
.sdpro-info-edit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--sdpro-text3);
}
.sdpro-info-edit input {
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
}
.sdpro-info-clip-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.sdpro-info-key { color: var(--sdpro-text3); font-size: 11px; }
.sdpro-info-val { color: var(--sdpro-text2); font-size: 11px; }

/* ── Context Menu ────────────────────────────────────────────────────────── */
.sdpro-ctx {
  position: fixed; z-index: 9999;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border2);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  padding: 4px;
  min-width: 140px;
}
.sdpro-ctx.hidden { display: none; }

.sdpro-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  cursor: pointer; border-radius: 4px;
  font-size: 12px; color: var(--sdpro-text2);
  transition: background 0.1s, color 0.1s;
}
.sdpro-ctx-item:hover { background: var(--sdpro-accent2); color: #fff; }
.sdpro-ctx-item.danger:hover { background: #ef4444; color: #fff; }
.sdpro-ctx-sep {
  height: 1px; background: var(--sdpro-border); margin: 3px 0;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.sdpro-modal {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.sdpro-modal.hidden { display: none; }

.sdpro-modal-box {
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border2);
  border-radius: 10px;
  padding: 24px;
  min-width: 300px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.sdpro-modal-box h3 {
  margin: 0 0 16px; font-size: 15px; font-weight: 700;
  background: var(--sdpro-gradient); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sdpro-modal-box label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--sdpro-text3); margin-bottom: 12px;
}
.sdpro-modal-box select {
  background: var(--sdpro-bg); border: 1px solid var(--sdpro-border2);
  border-radius: 4px; color: var(--sdpro-text); padding: 6px;
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.sdpro-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.sdpro-btn-primary {
  padding: 8px 16px;
  background: var(--sdpro-gradient); border: none;
  border-radius: 6px; color: #fff; font-family: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer;
  transition: opacity 0.1s;
}
.sdpro-btn-primary:hover { opacity: 0.88; }
.sdpro-modal-actions button:not(.sdpro-btn-primary) {
  padding: 8px 14px;
  background: transparent; border: 1px solid var(--sdpro-border2);
  border-radius: 6px; color: var(--sdpro-text3); font-family: inherit;
  font-size: 12px; cursor: pointer;
}
.sdpro-modal-actions button:not(.sdpro-btn-primary):hover { background: var(--sdpro-border2); color: var(--sdpro-text); }

.sdpro-progress { margin-top: 12px; }
.sdpro-progress.hidden { display: none; }
.sdpro-progress-bar {
  height: 6px; background: var(--sdpro-gradient); border-radius: 3px;
  width: 0%; transition: width 0.15s; margin-bottom: 6px;
}
.sdpro-progress span { font-size: 11px; color: var(--sdpro-text3); }

/* ── Piano Roll ──────────────────────────────────────────────────────────── */
/* Chord / key palette */
.sdpro-chord-palette {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  flex-shrink: 0;
}
.sdpro-chord-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.sdpro-chord-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sdpro-text3);
  flex-shrink: 0;
  width: 42px;
}
.sdpro-chord-keys,
.sdpro-chord-octs,
.sdpro-chord-invs,
.sdpro-chord-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}
.sdpro-chord-key,
.sdpro-chord-oct,
.sdpro-chord-inv,
.sdpro-chord-chip {
  appearance: none;
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-surface);
  color: var(--sdpro-text2);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 5px 7px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.sdpro-chord-key:hover,
.sdpro-chord-oct:hover,
.sdpro-chord-inv:hover,
.sdpro-chord-chip:hover {
  border-color: var(--sdpro-accent2);
  color: #fff;
}
.sdpro-chord-key.active,
.sdpro-chord-oct.active,
.sdpro-chord-inv.active {
  background: var(--sdpro-accent2);
  border-color: var(--sdpro-accent2);
  color: #fff;
}
.sdpro-chord-chip {
  background: #1a1520;
  border-color: #3a2a45;
  font-weight: 600;
  cursor: grab;
}
.sdpro-chord-chip:active { cursor: grabbing; }
.sdpro-chord-hint {
  font-size: 10px;
  color: var(--sdpro-text3);
  margin-left: auto;
  white-space: nowrap;
}

.sdpro-piano-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 4px;
}
.sdpro-piano-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px 6px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  flex-shrink: 0;
}
.sdpro-piano-tool.active {
  background: var(--sdpro-accent2);
  border-color: var(--sdpro-accent2);
  color: #fff;
}
.sdpro-piano-lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--sdpro-text3);
}
.sdpro-piano-meta {
  font-size: 10px;
  color: var(--sdpro-text3);
  margin-left: auto;
}
.sdpro-piano-roll {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  background: var(--sdpro-bg);
}
.sdpro-piano-keyboard {
  width: 48px;
  min-width: 48px;
  flex-shrink: 0;
  overflow: hidden;
  border-right: 1px solid var(--sdpro-border);
}
.sdpro-piano-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sdpro-piano-roll-canvas-wrap {
  flex: 1 1 0;
  overflow: auto;
  min-height: 0;
}
.sdpro-piano-roll-canvas { display: block; }
.sdpro-piano-vel-wrap {
  display: flex;
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
  border-top: 1px solid var(--sdpro-border);
  background: #0a0a12;
}
.sdpro-piano-vel-label {
  width: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--sdpro-text3);
  border-right: 1px solid var(--sdpro-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sdpro-midi-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--sdpro-border);
  padding: 2px 4px 4px;
}
.sdpro-midi-tab {
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sdpro-text3);
  font-size: 11px;
  font-family: inherit;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}
.sdpro-midi-tab:hover { color: var(--sdpro-text); background: rgba(255,255,255,0.04); }
.sdpro-midi-tab.active {
  color: #fff;
  background: #1e2430;
  border-color: var(--sdpro-border);
  border-bottom-color: transparent;
}
.sdpro-piano-fold {
  width: 100%;
}
.sdpro-piano-fold > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  color: var(--sdpro-text2);
  list-style: none;
  padding: 2px 0;
}
.sdpro-piano-fold > summary::-webkit-details-marker { display: none; }
.sdpro-piano-fold > summary::before {
  content: '▸ ';
  color: var(--sdpro-text3);
}
.sdpro-piano-fold[open] > summary::before { content: '▾ '; }
.sdpro-piano-fold-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}
.sdpro.is-beginner .sdpro-midi-inspector.is-folded {
  padding: 2px 8px;
}
.sdpro.is-beginner .sdpro-piano-toolbar {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.sdpro.is-beginner .sdpro-chord-palette {
  padding: 2px 8px;
  border: none;
  background: transparent;
}
.sdpro.is-beginner .sdpro-piano-more-sel { margin-left: 6px; }
.sdpro-midi-inspector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--sdpro-text3);
}
.sdpro-midi-inspector input[type="range"] {
  width: 72px;
  vertical-align: middle;
}
.sdpro-midi-inspector b { color: var(--sdpro-text); font-weight: 600; }
.sdpro-piano-vel-scroll {
  flex: 1 1 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.sdpro-piano-vel-canvas { display: block; }
.sdpro-piano-keyboard canvas { display: block; }

/* ── Step Sequencer ──────────────────────────────────────────────────────── */
.sdpro-seq-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 6px;
  padding: 4px;
  box-sizing: border-box;
}
.sdpro-seq-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 6px;
  background: var(--sdpro-surface2);
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  flex-shrink: 0;
}
.sdpro-seq-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  align-items: flex-start;
}
.sdpro-seq-grid-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  background: #0d0d14;
}
.sdpro-seq-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-width: max-content;
}
.sdpro-seq-row {
  display: grid;
  grid-template-columns: 64px repeat(var(--seq-steps, 16), 28px);
  gap: 3px;
  align-items: center;
}
.sdpro-seq-row.is-muted { opacity: 0.35; }
.sdpro-seq-row-label {
  height: 26px;
  border: 1px solid var(--sdpro-border2);
  background: var(--sdpro-surface2);
  color: var(--sdpro-text2);
  border-radius: 3px;
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdpro-seq-row-label:hover { color: var(--sdpro-text); border-color: var(--sdpro-accent); }
.sdpro-seq-step-num {
  height: 16px;
  font-size: 9px;
  color: var(--sdpro-text3);
  text-align: center;
  line-height: 16px;
}
.sdpro-seq-step-num.is-beat { color: var(--sdpro-text2); font-weight: 700; }
.sdpro-seq-step-num.is-playhead { color: #ff4b8b; }
.sdpro-seq-cell {
  width: 28px;
  height: 26px;
  border: 1px solid #222233;
  background: #14141e;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.sdpro-seq-cell.is-beat { border-color: #2e2e42; background: #171722; }
.sdpro-seq-cell.is-on {
  background: color-mix(in srgb, var(--sdpro-accent) calc(var(--vel, 0.8) * 100%), #1a1a26);
  border-color: var(--sdpro-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.sdpro-seq-cell.is-playhead {
  outline: 1px solid #ff4b8b;
  outline-offset: 0;
}
.sdpro-seq-cell:hover { border-color: var(--sdpro-accent2); }
.sdpro-seq-cell.has-prob.is-on {
  background: linear-gradient(180deg,
    rgba(75, 159, 255, calc(var(--prob, 0.7) * 0.55)) 0%,
    rgba(255, 75, 139, calc(var(--vel, 0.7) * 0.55)) 100%);
}
.sdpro-seq-cell.has-ratchet { box-shadow: inset 0 0 0 1px rgba(255, 159, 90, 0.55); }
.sdpro-seq-cell.has-micro { outline: 1px dashed rgba(120, 220, 180, 0.45); outline-offset: -2px; }
.sdpro-seq-ratchet {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 8px;
  font-weight: 700;
  color: #ffc08a;
  line-height: 1;
  pointer-events: none;
}
.sdpro-seq-cell { position: relative; }
.sdpro-seq-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 6px;
  flex-shrink: 0;
}
.sdpro-seq-groove {
  font-size: 11px;
  padding: 4px 8px;
}
.sdpro-seq-ai {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 200px;
  align-items: center;
}
.sdpro-seq-ai-input {
  flex: 1;
  min-width: 140px;
  background: #12121a;
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  color: var(--sdpro-text);
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
}
.sdpro-seq-ai-input:focus {
  outline: none;
  border-color: var(--sdpro-accent);
}
.sdpro-drum-macros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 10px;
  width: 100%;
  padding: 4px 2px 6px;
}
.sdpro-seq-macros {
  padding: 2px 8px 6px;
  flex-shrink: 0;
}
.sdpro-drum-macro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--sdpro-text3);
  text-transform: capitalize;
}
.sdpro-drum-macro input[type="range"] {
  width: 100%;
  accent-color: #ff9f5a;
}
.sdpro-drum-kit-row {
  width: 100%;
  margin-bottom: 4px;
}
.sdpro-drum-kit-row select { width: 100%; }
.sdpro-drum-pad-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--sdpro-border);
}
.sdpro-drum-pad-edit-title {
  width: 100%;
  font-size: 11px;
  font-weight: 650;
  color: var(--sdpro-text2);
  margin-bottom: 2px;
}
.sdpro-instr-mini-pads.sdpro-drum-pads .sdpro-drum-pad {
  min-height: 36px;
  font-size: 9px;
}
.sdpro-seq-hint {
  font-size: 10px;
  color: var(--sdpro-text3);
  flex-shrink: 0;
}
.sdpro-seq-loop-drag {
  cursor: grab;
  background: #2a1520 !important;
  border-color: #ff4b8b !important;
  color: #ffb3c8 !important;
  font-weight: 700;
  touch-action: none;
  user-select: none;
}
.sdpro-seq-loop-drag:hover {
  background: #3a1a28 !important;
  color: #fff !important;
}
.sdpro-seq-loop-drag.is-dragging {
  cursor: grabbing;
  opacity: 0.7;
}
.sdpro-seq-pats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 2px;
}
.sdpro-seq-pat {
  appearance: none;
  border: 1px solid #2e2e42;
  background: #1a1a24;
  color: var(--sdpro-text2);
  font: 600 11px/1.2 inherit;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.sdpro-seq-pat:hover { border-color: var(--sdpro-accent2); color: var(--sdpro-text); }
.sdpro-seq-pat.is-active {
  border-color: #ff4b8b;
  color: #fff;
  background: #2a1520;
}
.sdpro-seq-pat.is-dim { opacity: 0.45; }
.sdpro-seq-pat-add {
  min-width: 28px;
  font-weight: 700;
  color: #ffb3c8;
}
.sdpro-seq-pat-dup { font-size: 11px; padding: 4px 8px; }
.sdpro-seq-edit-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 8px 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 75, 139, 0.45);
  border-radius: 6px;
  background: rgba(255, 75, 139, 0.1);
  font-size: 12px;
  color: var(--sdpro-text2);
}
.sdpro-seq-edit-banner b { color: var(--sdpro-text); }
.sdpro-seq-edit-banner .sdpro-btn { margin-left: auto; }
body.sdpro-seq-dragging {
  cursor: grabbing !important;
}
body.sdpro-seq-dragging .sdpro-tracks-vp {
  outline: 2px dashed #ff4b8b;
  outline-offset: -2px;
}

/* ── Automation Lane ─────────────────────────────────────────────────────── */
.sdpro-auto-lane {
  height: 60px; background: rgba(167,139,250,0.05);
  border-top: 1px solid rgba(167,139,250,0.2);
  position: relative; overflow: hidden;
}
.sdpro-auto-lane canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sdpro-auto-lane-label {
  position: absolute; top: 2px; left: 4px;
  font-size: 9px; color: #a78bfa; pointer-events: none;
}

/* ── Drop zone highlight ─────────────────────────────────────────────────── */
.sdpro.drag-over .sdpro-tracks-vp {
  outline: 2px dashed var(--sdpro-accent2);
  outline-offset: -2px;
}

/* ── Scrollbar (global for .sdpro) ───────────────────────────────────────── */
.sdpro *::-webkit-scrollbar { width: 6px; height: 6px; }
.sdpro *::-webkit-scrollbar-track { background: var(--sdpro-surface); }
.sdpro *::-webkit-scrollbar-thumb { background: var(--sdpro-border2); border-radius: 3px; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.sdpro .hidden { display: none !important; }
.sdpro-flex-space { flex: 1 1 0; }

/* ── Phase 3 React shell host ────────────────────────────────────────────── */
.sdpro-react-root {
  flex: 1 1 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--sdpro-bg);
}
.sdpro-react-root:not(.hidden) {
  display: flex;
}

/* ── Audio clip editor ───────────────────────────────────────────────────── */
.sdpro-audio-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 6px;
}
.sdpro-audio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.sdpro-audio-toolbar .sdpro-btn.active {
  background: var(--sdpro-gradient);
  color: #fff;
  border-color: transparent;
}
.sdpro-audio-lbl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--sdpro-text3);
}
.sdpro-audio-editbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 0 4px;
  border-top: 1px solid var(--sdpro-border);
}
.sdpro-audio-nudge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1;
}
.sdpro-audio-lbl input[type="number"] {
  width: 64px;
  height: 24px;
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border2);
  color: var(--sdpro-text);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  font-family: inherit;
}
.sdpro-audio-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--sdpro-text3);
  white-space: nowrap;
}
.sdpro-audio-stage {
  flex: 1 1 0;
  min-height: 110px;
  position: relative;
  background: #07070c;
  border: 1px solid var(--sdpro-border);
  border-radius: 6px;
  overflow: hidden;
}
.sdpro-audio-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.sdpro-audio-hint {
  font-size: 10px;
  color: var(--sdpro-text3);
  padding: 0 2px 2px;
}
.sdpro-audio-toolbar .sdpro-snap-sel {
  height: 24px;
  font-size: 11px;
}

.sdpro-audio-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--sdpro-border);
  padding-bottom: 4px;
}
.sdpro-audio-tab {
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sdpro-text3);
  font-size: 11px;
  font-family: inherit;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}
.sdpro-audio-tab:hover { color: var(--sdpro-text); background: rgba(255,255,255,0.04); }
.sdpro-audio-tab.active {
  color: #fff;
  background: #2a2118;
  border-color: var(--sdpro-border);
  border-bottom-color: transparent;
}
.sdpro-audio-tabs-spacer { flex: 1; }
.sdpro-audio-chk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--sdpro-text3);
}
.sdpro-audio-modmenu {
  position: relative;
  font-size: 11px;
}
.sdpro-audio-modmenu summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 8px;
  border: 1px solid var(--sdpro-border);
  border-radius: 4px;
  color: var(--sdpro-text3);
}
.sdpro-audio-modlist {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 260px;
  margin-top: 4px;
  padding: 8px;
  background: #12121a;
  border: 1px solid var(--sdpro-border);
  border-radius: 6px;
}
.sdpro-audio-modempty {
  margin: 0;
  font-size: 11px;
  color: var(--sdpro-text3);
  line-height: 1.4;
}
.sdpro-audio-stage {
  min-height: 160px;
}

.sdpro-instr-slot {
  width: 228px;
  min-width: 228px;
  background: #1a1620;
  border-color: rgba(255, 159, 90, 0.38);
}
.sdpro-instr-slot .sdpro-fx-name { color: #ff9f5a; }
.sdpro-instr-type {
  display: flex;
  gap: 3px;
  width: 100%;
}
.sdpro-instr-slot .sdpro-instr-pick {
  flex: 1 1 0;
  height: 22px;
  min-height: 22px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 650;
  border-radius: 4px;
}
.sdpro-instr-slot .sdpro-instr-oscs {
  width: 100%;
  gap: 3px;
}
.sdpro-instr-slot .sdpro-chip {
  height: 20px;
  padding: 0 6px;
  font-size: 9px;
}
.sdpro-instr-mini-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  width: 100%;
}
.sdpro-instr-mini-pads .sdpro-drum-pad {
  min-height: 22px;
  height: 22px;
  font-size: 9px;
  padding: 0;
}
.sdpro-instr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sdpro-instr-kicker {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sdpro-text3);
}
.sdpro-instr-now {
  font-size: 13px;
  font-weight: 650;
  color: var(--sdpro-text);
}
.sdpro-instr-steps {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 11px;
  color: var(--sdpro-text3);
  line-height: 1.45;
}
.sdpro-instr-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.sdpro-instr-pick {
  height: 36px;
  border: 1px solid var(--sdpro-border);
  border-radius: 6px;
  background: #12121a;
  color: var(--sdpro-text3);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.sdpro-instr-pick:hover { color: #fff; border-color: #4b9fff; }
.sdpro-instr-pick.active {
  color: #fff;
  border-color: #ff9f5a;
  background: rgba(255,159,90,0.12);
}
.sdpro-instr-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 11px;
  color: var(--sdpro-text3);
}
.sdpro-instr-oscs { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.sdpro-instr-sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.sdpro-instr-sample-name { font-weight: 650; color: var(--sdpro-text); }
.sdpro-drum-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
}
.sdpro-drum-pads[data-count="32"],
.sdpro-drum-pads[data-count="64"] { grid-template-columns: repeat(8, 1fr); }
.sdpro-drum-pad {
  min-height: 44px;
  border: 1px solid var(--sdpro-border);
  border-radius: 5px;
  background: #12121a;
  color: var(--sdpro-text3);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.sdpro-drum-pad small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}
.sdpro-drum-pad.filled { color: var(--sdpro-text); border-color: #4b9fff; }
.sdpro-drum-pad.selected { border-color: #ff9f5a; background: rgba(255,159,90,0.12); color: #fff; }
.sdpro-btn-primary { background: linear-gradient(90deg,#ff4b8b,#ff9f5a); color: #fff; border: none; }
.sdpro-browser-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.sdpro-chip {
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--sdpro-border);
  border-radius: 999px;
  background: transparent;
  color: var(--sdpro-text3);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
}
.sdpro-chip.active, .sdpro-chip:hover {
  color: #fff;
  border-color: #4b9fff;
  background: rgba(75,159,255,0.12);
}
.sdpro-groove-row { margin-bottom: 4px; }
.sdpro-fav-btn { min-width: 28px; padding: 0 6px; }
.sdpro-fav-btn.active { color: #ffd84b; }
.sdpro-vu-rms {
  font-size: 9px;
  color: var(--sdpro-text3);
  text-align: center;
  min-width: 28px;
}
.sdpro-master-meters {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 9px;
  color: var(--sdpro-text3);
  padding: 4px 0;
}
.sdpro-master-meters b { color: var(--sdpro-text); font-weight: 600; }
.sdpro-spec-canvas {
  width: 72px;
  height: 28px;
  border-radius: 3px;
  background: #12121a;
  display: block;
  margin: 4px auto 0;
}
.sdpro-missing-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  font-size: 12px;
  color: #ffd84b;
  background: #2a2110;
  border-bottom: 1px solid #5a4a20;
  z-index: 4;
}

/* ── Beginner chrome (default) ─────────────────────────────────────────── */
.sdpro.is-beginner [data-adv] { display: none !important; }
.sdpro.is-beginner:not(.ws-mixer) .sdpro-mixer-section,
.sdpro.is-beginner .sdpro-session-section,
.sdpro.is-beginner .sdpro-sends,
.sdpro.is-beginner .sdpro-master-meters,
.sdpro.is-beginner .sdpro-spec-canvas,
.sdpro.is-beginner .sdpro-missing-banner { display: none !important; }
.sdpro.is-beginner .sdpro-adv-only { display: none !important; }
.sdpro.is-beginner {
  --sdpro-tb-h: 44px;
  --sdpro-mixer-h: 0%;
  font-size: 13px;
}
.sdpro.is-beginner .sdpro-projname { max-width: 140px; }
.sdpro.is-beginner .sdpro-track-header { padding-top: 4px; }
.sdpro.is-beginner .sdpro-tab-panel.sdpro-mixer .sdpro-channel {
  min-width: 64px;
}
.sdpro-btn-new {
  height: 28px;
  padding: 0 12px;
  font-weight: 700;
  border-color: #4b9fff;
  color: #fff;
  background: rgba(75,159,255,0.16);
}
.sdpro-btn-new:hover { background: rgba(75,159,255,0.28); }
.sdpro-btn-stems {
  height: 28px;
  padding: 0 12px;
  font-weight: 700;
  border-color: #a855f7;
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.16);
}
.sdpro-btn-stems:hover {
  background: rgba(168, 85, 247, 0.28);
  color: #fff;
}
.sdpro-stem-modal-box {
  min-width: 320px;
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
}
.sdpro-stem-picker-list {
  max-height: 320px;
  overflow: auto;
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sdpro-empty-actions .sdpro-btn-stems {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}
.sdpro-btn-ai {
  height: 28px;
  padding: 0 12px;
  font-weight: 700;
  border-color: #c47a45;
  color: #ffd4b0;
  background: rgba(255, 159, 90, 0.14);
}
.sdpro-btn-ai:hover {
  background: rgba(255, 159, 90, 0.26);
  color: #fff;
}
.sdpro-hdr-btn.sdpro-del-btn {
  margin-left: auto;
  color: var(--sdpro-text3);
  font-size: 14px;
  line-height: 1;
}
.sdpro-hdr-btn.sdpro-del-btn:hover {
  background: #5a2020;
  border-color: #ff4b4b;
  color: #fff;
}
.sdpro-track-manage-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sdpro-track-manage {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sdpro-border);
  border-radius: 6px;
  padding: 2px 4px 2px 8px;
}
.sdpro-track-manage.selected { border-color: #4b9fff; background: rgba(75,159,255,0.08); }
.sdpro-track-manage-name {
  flex: 1;
  text-align: left;
  background: none;
  border: 0;
  color: var(--sdpro-text);
  font: 600 12px/1.3 inherit;
  cursor: pointer;
  padding: 6px 0;
}
.sdpro-track-manage-del {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--sdpro-text3);
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
}
.sdpro-track-manage-del:hover { background: #5a2020; color: #fff; }
.sdpro-empty-state {
  position: absolute;
  top: var(--sdpro-ruler-h);
  left: var(--sdpro-header-w);
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.sdpro-empty-state.hidden { display: none; }
.sdpro-empty-card {
  pointer-events: auto;
  text-align: center;
  padding: 28px 32px;
  border: 1px solid var(--sdpro-border);
  border-radius: 16px;
  background: #16161f;
  max-width: 360px;
}
.sdpro-empty-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.sdpro-empty-copy { margin: 0 0 16px; color: var(--sdpro-text3); font-size: 13px; }
.sdpro-empty-actions { display: flex; gap: 8px; justify-content: center; }
.sdpro-instr-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sdpro.is-beginner .sdpro-instr-steps { margin-bottom: 8px; }
.sdpro.is-beginner .sdpro-transport {
  gap: 0;
  padding: 2px;
  background: var(--sdpro-bg);
  border: 1px solid var(--sdpro-border);
  border-radius: 8px;
}
.sdpro.is-beginner .sdpro-tbtn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--sdpro-text2);
}
.sdpro.is-beginner .sdpro-tbtn:hover {
  background: var(--sdpro-surface3);
  color: #fff;
}
.sdpro.is-beginner .sdpro-tbtn#sdproPlay {
  color: #fff;
}
.sdpro.is-beginner .sdpro-tbtn#sdproPlay.play-active {
  background: rgba(255, 75, 139, 0.18);
  color: #ff8ab0;
  border: 0;
}
.sdpro.is-beginner .sdpro-tbtn#sdproRecord { color: #ff5a5a; }
.sdpro-beginner-bar { display: none !important; }
.sdpro-beg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sdpro-beg-kicker {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sdpro-text3);
  margin-right: 4px;
  min-width: 72px;
}
.sdpro-beg-btn {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--sdpro-border);
  border-radius: 999px;
  background: #1a1a26;
  color: var(--sdpro-text);
  font: 650 12px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.sdpro-beg-btn:hover { border-color: #4b9fff; color: #fff; }
.sdpro-beg-primary {
  background: var(--sdpro-gradient);
  border: none;
  color: #fff;
}
.sdpro-beg-adv {
  height: 34px;
  padding: 0 12px;
  margin-left: auto;
  border: 1px solid var(--sdpro-border2);
  border-radius: 999px;
  background: transparent;
  color: var(--sdpro-text3);
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.sdpro-beg-adv.active {
  color: #fff;
  border-color: #ff9f5a;
  background: rgba(255,159,90,0.14);
}
.sdpro-beg-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sdpro-text3);
}
.sdpro-beg-vol input { width: 88px; accent-color: #ff9f5a; }
.sdpro-beg-search {
  height: 38px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
}
.sdpro.is-beginner .sdpro-instr-slot .sdpro-instr-pick {
  height: 22px;
  font-size: 9px;
}
.sdpro.is-beginner #sdproInstrTest,
.sdpro.is-beginner #sdproSmpLoad,
.sdpro.is-beginner #sdproPadLoad {
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
}
.sdpro.is-beginner .sdpro-lib-item {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
}

/* ── AI Generate overlay + producer chat ─────────────────────────────── */
.sdpro-gen-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 12, 0.78);
  padding: 24px;
}
.sdpro-gen-overlay.hidden { display: none !important; }
#viewStudio.gen-open .sdpro-empty-state,
.sdpro.gen-open .sdpro-empty-state { display: none !important; }
.sdpro-arrange-section:has(#sdproEmptyState:not(.hidden)) .sdpro-loop-bracket {
  visibility: hidden;
}
.sdpro-gen-card {
  width: min(520px, 100%);
  background: #16161f;
  border: 1px solid var(--sdpro-border2);
  border-radius: 16px;
  padding: 22px 22px 18px;
  color: var(--sdpro-text);
}
.sdpro-gen-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff9f5a;
  margin-bottom: 6px;
}
.sdpro-gen-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 750;
  color: #fff;
}
.sdpro-gen-lead {
  margin: 0 0 12px;
  color: var(--sdpro-text3);
  font-size: 13px;
  line-height: 1.45;
}
.sdpro-gen-card textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  background: #0f0f16;
  border: 1px solid var(--sdpro-border2);
  border-radius: 10px;
  color: var(--sdpro-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
}
.sdpro-gen-card textarea:focus {
  outline: none;
  border-color: #ff9f5a;
}
.sdpro-gen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.sdpro-gen-steps {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}
.sdpro-gen-step {
  font-size: 12px;
  color: var(--sdpro-text3);
  padding: 4px 0;
}
.sdpro-gen-step.is-on { color: #ff9f5a; font-weight: 650; }
.sdpro-gen-step.is-done { color: #4bffc8; }
.sdpro-gen-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.sdpro-ai-chat {
  max-height: 180px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.sdpro-ai-msg {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  background: #12121a;
  color: var(--sdpro-text2);
}
.sdpro-ai-msg.is-user {
  background: rgba(255, 159, 90, 0.12);
  color: #fff;
  align-self: flex-end;
}
.sdpro-ai-chat-row {
  display: flex;
  gap: 6px;
}
.sdpro-ai-chat-row .sdpro-inp { flex: 1; min-width: 0; }
.sdpro-hdr-btn.sdpro-ai-btn {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ff9f5a;
}
.sdpro-empty-card { max-width: 420px; }
.sdpro-empty-actions { flex-wrap: wrap; }
.sdpro-toolbar .sdpro-btn-ai,
.sdpro-empty-actions .sdpro-btn-ai {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

/* Hybrid studio: AI as a drawer beside the DAW, not a takeover */
.sdpro.ai-drawer-open {
  --sdpro-sidebar-w: 320px;
}
.sdpro-ai-drawer-lead,
.sdpro-ai-drawer-intro {
  margin: 0 10px 10px;
  color: var(--sdpro-text3);
  font-size: 12px;
  line-height: 1.45;
}
.sdpro-ai-prompt,
textarea.sdpro-ai-prompt {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  box-sizing: border-box;
  background: #0f0f16;
  border: 1px solid var(--sdpro-border2);
  border-radius: 8px;
  color: var(--sdpro-text);
  font: 12px/1.45 inherit;
  padding: 8px 10px;
}
.sdpro-ai-chips,
.sdpro-ai-chip-row { margin: 8px 0; }
.sdpro-ai-hud {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb07a;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdpro-ai-hud[hidden] { display: none !important; }
.sdpro-empty-kicker {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff9f5a;
}
.sdpro-ai-action-menu {
  position: fixed;
  z-index: 80;
  min-width: 220px;
  padding: 6px;
  background: #16161f;
  border: 1px solid var(--sdpro-border2);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.sdpro-ai-action-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--sdpro-text);
  font: 600 12px/1.3 inherit;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.sdpro-ai-action-item:hover { background: rgba(255,159,90,0.14); color: #fff; }
.sdpro-ai-action-sep { height: 1px; margin: 4px 6px; background: var(--sdpro-border2); }
.sdpro-hdr-btn.sdpro-ai-btn {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ff9f5a;
  border-color: rgba(255,159,90,0.45);
}