styles.css

:root {
  --bg: #050507;
  --panel: #09090d;
  --border: #14141c;
  --text: #cccccc;
  --muted: #55555e;
  --accent-green: #7cff7c;
  --accent-warm: #e8945c;
  /* Aliases for legacy rules across this file */
  --accent: var(--accent-warm);
  --mint: var(--accent-green);
  --range-track: #14141a;
  --range-fill: var(--accent-green);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Elegant, thin dark scrollbars globally */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  /* Only vertical scrolling anywhere — the page itself never scrolls horizontally. */
  overflow-x: hidden;
  font-size: 13px;
  /* No accidental text-selection from clicking labels / dragging knobs & sliders. */
  -webkit-user-select: none;
  user-select: none;
}

/* …except real editing surfaces, which stay fully selectable. */
input,
textarea,
[contenteditable],
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Global range: dark track, green thumb; Firefox tint */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
  accent-color: var(--accent-green);
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--range-track);
  border: 1px solid var(--border);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent-green);
  border: 1px solid #0a0a0a;
  box-shadow: 0 0 0 1px rgba(124, 255, 124, 0.25);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--range-track);
  border: 1px solid var(--border);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-green);
  border: 1px solid #0a0a0a;
}

.daw-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.deck-tab {
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.deck-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

.deck-tab-active {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

.deck-module {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.55rem;
  margin-bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
}

.deck-module:last-child {
  margin-bottom: 0;
}

.deck-module-h {
  margin: 0 0 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.deck-wave-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

.deck-wave-tile {
  aspect-ratio: 1;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.deck-wave-tile:hover {
  border-color: #444;
  color: var(--text);
}

.deck-wave-tile-active {
  color: #0a0a0a;
  background: var(--accent-green);
  border-color: var(--accent-green);
}

.deck-env-svg {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 0.35rem;
  border-radius: 4px;
  background: #080808;
  border: 1px solid var(--border);
}

.deck-env-svg path {
  fill: none;
  stroke: var(--accent-warm);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.deck-adsr-sliders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.desktop-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ik-switch-btn {
  width: 38px;
  height: 24px;
  background: linear-gradient(180deg, #2c2c32 0%, #1c1c22 100%);
  border: 1px solid #0a0a0a;
  border-top-color: #3c3c44;
  border-radius: 3px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.6);
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.ik-switch-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-top-color: #2c2c32;
  background: #1a1a20;
}

.ik-switch-btn-on {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #222228 0%, #16161c 100%);
  border-top-color: #2a2a30;
}

.ik-switch-handle {
  width: 14px;
  height: 4px;
  background: #111;
  border-radius: 1px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

.ik-switch-btn-on .ik-switch-handle {
  /* color set via inline styles in React */
}

.deck-adsr-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: stretch;
}

.deck-adsr-cell label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
}

.deck-adsr-cell input[type="range"] {
  width: 100%;
}

.deck-adsr-val {
  font-size: 0.55rem;
  color: var(--accent-green);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.patch-bay {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: var(--panel);
  min-height: 12rem;
}

.patch-bay-title {
  margin: 0 0 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.patch-bay-sub {
  margin: 0 0 1rem;
  font-size: 0.58rem;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.9;
}

.patch-bay-cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 36rem;
  margin: 0 auto;
}

.patch-bay-col {
  flex: 1;
  min-width: 0;
}

.patch-bay-col-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.patch-node-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.patch-node {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  background: #161616;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}

.patch-bay-col-out .patch-node {
  flex-direction: row;
}

.patch-bay-col-in .patch-node {
  flex-direction: row-reverse;
}

.patch-node-jack {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  flex-shrink: 0;
  background: transparent;
}

.matrixfm-panel-wrap {
  min-width: 0;
  margin-top: 0.5rem;
  padding-right: 0.15rem;
}

.instr-matrixfm-hint {
  padding: 0.45rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 0.65rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

.instr-matrixfm-hint p {
  margin: 0;
}

.btn-deck-outline {
  margin-top: 0.45rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  background: transparent;
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm);
  border-radius: 4px;
  cursor: pointer;
}

.btn-deck-outline:hover {
  background: rgba(232, 148, 92, 0.12);
}

.daw-root {
  display: flex;
  flex-direction: column;
  /* Fixed viewport shell: header + footer + the 3-column layout fill exactly 100vh and never grow the page.
     Each region (sidebars, instrument grid) scrolls inside itself instead — see .daw-app-layout / .instr-stack-host. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.daw-app-layout {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.daw-sidebar-left {
  /* Sized to the deck's content (jog on the left, channel strip on the right) with only a small separation gap
     between them — no wasted whitespace in the middle. */
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #09090d;
  border-right: 1px solid #14141c;
  align-self: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.deck-nav-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 6px 6px;
  cursor: pointer;
  border-radius: 0;
  margin-bottom: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #14141c;
  background: #09090d;
  flex: 1;
  transition: all 0.15s ease;
}

.deck-nav-btn:hover {
  background: #111118;
}

.deck-nav-btn.deck-active {
  background: #14141c;
}

.deck-nav-btn.deck-a.deck-active { border-left-color: var(--deck-a); }
.deck-nav-btn.deck-b.deck-active { border-left-color: var(--deck-b); }
.deck-nav-btn.deck-c.deck-active { border-left-color: var(--deck-c); }
.deck-nav-btn.deck-d.deck-active { border-left-color: var(--deck-d); }
.deck-nav-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}

.deck-nav-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8a8a92;
  transition: color 0.15s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.deck-nav-btn:hover .deck-nav-text {
  color: #a0a0ab;
}

.deck-nav-btn.deck-a.deck-active .deck-nav-text { color: var(--deck-a); text-shadow: 0 0 8px rgba(34, 211, 238, 0.35); }
.deck-nav-btn.deck-b.deck-active .deck-nav-text { color: var(--deck-b); text-shadow: 0 0 8px rgba(232, 121, 249, 0.35); }
.deck-nav-btn.deck-c.deck-active .deck-nav-text { color: var(--deck-c); text-shadow: 0 0 8px rgba(245, 158, 11, 0.35); }
.deck-nav-btn.deck-d.deck-active .deck-nav-text { color: var(--deck-d); text-shadow: 0 0 8px rgba(74, 222, 128, 0.35); }

.deck-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2a35;
  transition: all 0.15s ease;
}

.deck-nav-btn.deck-a:hover .deck-nav-dot, .deck-nav-btn.deck-a.deck-active .deck-nav-dot { background: var(--deck-a); box-shadow: 0 0 8px var(--deck-a); }
.deck-nav-btn.deck-b:hover .deck-nav-dot, .deck-nav-btn.deck-b.deck-active .deck-nav-dot { background: var(--deck-b); box-shadow: 0 0 8px var(--deck-b); }
.deck-nav-btn.deck-c:hover .deck-nav-dot, .deck-nav-btn.deck-c.deck-active .deck-nav-dot { background: var(--deck-c); box-shadow: 0 0 8px var(--deck-c); }
.deck-nav-btn.deck-d:hover .deck-nav-dot, .deck-nav-btn.deck-d.deck-active .deck-nav-dot { background: var(--deck-d); box-shadow: 0 0 8px var(--deck-d); }

.deck-nav-indicators {
  display: flex;
  flex-direction: row;
  gap: 1px;
  margin-left: auto;
}

/* The jog "unit" (jog wheel + vinyl row) sits in the controls row next to the EQ + fader. Content-width (not
   100%) so it shrinks to the vinyl width and the jog ends up close to the EQ instead of centered in a wide column. */
.deck-nav-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  width: auto;
}

/* Title row (full width) on top; below it the jog hugs the LEFT and the channel strip (EQ + fader + CUE) hugs
   the RIGHT — no wasted padding outside the disc or the volume. */
.deck-nav-controls-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
}

.deck-nav-empty {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #3e3e4a;
  text-align: center;
  margin-top: 0;
  text-transform: uppercase;
}

.deck-nav-btn .dk-ch-strip {
  flex: 0 0 106px;
  width: 106px;
  padding: 2px 0px;
  background: transparent;
  border-color: #14141c;
  align-self: stretch;
}

.deck-nav-indicator-sq {
  width: 3px;
  height: 3px;
  background: transparent;
  transition: all 0.15s ease;
}

.deck-nav-btn.deck-a .deck-nav-indicator-on { background: rgba(34, 211, 238, 0.15); }
.deck-nav-btn.deck-b .deck-nav-indicator-on { background: rgba(232, 121, 249, 0.15); }
.deck-nav-btn.deck-c .deck-nav-indicator-on { background: rgba(245, 158, 11, 0.15); }
.deck-nav-btn.deck-d .deck-nav-indicator-on { background: rgba(74, 222, 128, 0.15); }

.deck-nav-btn.deck-a:hover .deck-nav-indicator-on { background: rgba(34, 211, 238, 0.4); }
.deck-nav-btn.deck-b:hover .deck-nav-indicator-on { background: rgba(232, 121, 249, 0.4); }
.deck-nav-btn.deck-c:hover .deck-nav-indicator-on { background: rgba(245, 158, 11, 0.4); }
.deck-nav-btn.deck-d:hover .deck-nav-indicator-on { background: rgba(74, 222, 128, 0.4); }

.deck-nav-btn.deck-a.deck-active .deck-nav-indicator-on { background: var(--deck-a); box-shadow: 0 0 4px rgba(34, 211, 238, 0.4); }
.deck-nav-btn.deck-b.deck-active .deck-nav-indicator-on { background: var(--deck-b); box-shadow: 0 0 4px rgba(232, 121, 249, 0.4); }
.deck-nav-btn.deck-c.deck-active .deck-nav-indicator-on { background: var(--deck-c); box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
.deck-nav-btn.deck-d.deck-active .deck-nav-indicator-on { background: var(--deck-d); box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }

.daw-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.daw-sidebar-right {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  /* Clip the horizontal axis explicitly. With only `overflow-y: auto`, CSS computes `overflow-x` as `auto` too,
     so any child wider than the column (the CO-DJ deck-snapshot panes on Play) spawns an 11px-tall horizontal
     scrollbar — which inflates this sidebar's border-box by 11px and stretches the whole row (incl. the left
     decks) on playback. Vertical scroll only; horizontal content scrolls inside its own pane. */
  overflow-x: hidden;
  overflow-y: auto;
}

.daw-sidebar-right > div {
  flex: none;
}

.daw-sidebar-right .daw-tpl-dock {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.daw-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  /* extra right padding reserves clearance for the position:absolute fullscreen button (top:7px right:8px,
     ~26px). With the preset cluster right-aligned (margin-left:auto) this is what keeps it from butting up
     against the fullscreen icon: 48px = 8 offset + 26 btn + ~14 breathing room. */
  padding: 0.5rem 48px 0.5rem 0.85rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  /* Fixed header at the top of the shell. */
  flex: 0 0 auto;
  z-index: 50;
}

.logo {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mint);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.transport-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.deck-main-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.45rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.deck-main-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.btn-deck {
  font-family: inherit;
  padding: 0.32rem 0.55rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #15151c;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.btn-deck-live.btn-deck-on {
  border-color: rgba(124, 255, 124, 0.65);
  color: var(--accent-green, #7cff7c);
  box-shadow: 0 0 8px rgba(124, 255, 124, 0.12);
}

.btn-deck-cue.btn-deck-on {
  border-color: rgba(255, 196, 107, 0.7);
  color: rgba(255, 196, 107, 0.95);
  box-shadow: 0 0 8px rgba(255, 196, 107, 0.12);
}

.btn-deck:hover {
  color: var(--text);
}

.ch-deck-chip {
  margin-top: 0.25rem;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  cursor: pointer;
  width: fit-content;
}

.ch-deck-chip-live {
  background: rgba(30, 55, 35, 0.5);
  color: rgba(140, 220, 140, 0.95);
  border-color: rgba(124, 255, 124, 0.35);
}

.ch-deck-chip-cue {
  background: rgba(55, 45, 28, 0.55);
  color: rgba(255, 200, 130, 0.95);
  border-color: rgba(255, 196, 107, 0.4);
}

.ch-lock-chip {
  margin-top: 0.25rem;
  margin-left: 0.25rem;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: rgba(40, 40, 48, 0.5);
  color: rgba(170, 170, 185, 0.9);
  cursor: pointer;
  width: fit-content;
}

.ch-lock-chip-on {
  background: rgba(55, 30, 35, 0.6);
  color: rgba(255, 150, 160, 0.95);
  border-color: rgba(255, 120, 140, 0.45);
}

.transport-seq-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0 0.35rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.transport-seq-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.seq-promote-hint {
  font-size: 0.65rem;
  line-height: 1.25;
  color: var(--muted);
  max-width: 22rem;
  letter-spacing: 0.02em;
}

.seq-store-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.seq-store-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.btn-seq-store {
  font-family: inherit;
  min-width: 1.85rem;
  padding: 0.22rem 0.4rem;
  border-radius: 3px;
  border: 1px solid rgba(90, 140, 255, 0.45);
  background: rgba(40, 55, 95, 0.35);
  color: rgba(160, 190, 255, 0.95);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.btn-seq-store:hover {
  border-color: rgba(120, 170, 255, 0.75);
  background: rgba(50, 70, 120, 0.45);
}

.seq-store-hint {
  font-size: 0.6rem;
  line-height: 1.3;
  color: #6a6a72;
  max-width: 24rem;
}

.seq-btn {
  font-family: inherit;
  min-width: 3.1rem;
  min-height: 2.85rem;
  padding: 0.28rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, #1c1c24 0%, #13131a 100%);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}

.seq-btn-line {
  display: block;
  line-height: 1.1;
}

.seq-btn-meta {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 196, 107, 0.95);
  line-height: 1;
}

.seq-btn:hover {
  border-color: rgba(124, 255, 124, 0.35);
  color: var(--text);
}

.seq-btn-active {
  border-color: rgba(124, 255, 124, 0.85);
  color: var(--accent-green, #7cff7c);
  box-shadow: 0 0 10px rgba(124, 255, 124, 0.16);
}

.seq-btn-queued {
  animation: session-queue-pulse 1.1s ease-in-out infinite;
}

.btn-play {
  font-family: inherit;
  background: transparent;
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-play:hover:not(:disabled) {
  background: rgba(232, 148, 92, 0.15);
}

.btn-play:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-key {
  display: none !important;
}
.btn-play-seq {
  color: var(--accent-orange, #f97316);
  border-color: var(--accent-orange, #f97316);
}
.btn-play-seq:hover:not(:disabled) {
  background: rgba(249, 115, 22, 0.15);
}
.btn-play-song {
  color: var(--accent-green, #7cff7c);
  border-color: var(--accent-green, #7cff7c);
}
.btn-play-song:hover:not(:disabled) {
  background: rgba(124, 255, 124, 0.12);
}
.btn-play-on.btn-play-seq {
  background: var(--accent-orange, #f97316);
  color: #0b0b0b;
}
.btn-play-on.btn-play-song {
  background: var(--accent-green, #7cff7c);
  color: #0b0b0b;
}
.btn-play-on .btn-key {
  opacity: 0.8;
}

/* Thin divider between the independent Preview transport and the live Sequence/Session transport. */
.transport-div {
  width: 1px;
  align-self: stretch;
  background: var(--border, #2a2a2a);
  margin: 0 0.2rem;
}
/* Live-source switch: Sequence (rack as live song) | Session (clips). Both share one clock. */
.mode-switch {
  display: inline-flex;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 5px;
  overflow: hidden;
  background: #0e0e0e;
}
.mode-seg {
  font-family: inherit;
  background: transparent;
  color: var(--muted, #8a8a93);
  border: none;
  padding: 0.4rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.mode-seg + .mode-seg {
  border-left: 1px solid var(--border, #2a2a2a);
}
.mode-seg:hover {
  color: var(--text, #cfcfcf);
  background: #161616;
}
.mode-seg.mode-seg-on {
  background: var(--accent-green, #7cff7c);
  color: #0b0b0b;
}

.btn-stop {
  background: #3a3545;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost:hover {
  color: var(--text);
  border-color: #3a3a44;
}
/* Undo / redo icon buttons in the transport bar. */
.btn-undo {
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
}
.btn-undo:disabled {
  opacity: 0.3;
  cursor: default;
}
.btn-undo:not(:disabled):hover {
  color: var(--text);
  border-color: #3a3a44;
}

/* DJ-deck-style BPM stepper: [BPM][ − ][ 118 ][ + ] — large always-on nudge buttons that are easy to hit. */
.bpm-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
}
.bpm-stepper-cap {
  display: none;
}
.bpm-btn {
  width: 24px;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 80ms, color 80ms;
}
.bpm-btn-down { border-right: 1px solid var(--border); }
.bpm-btn-up { border-left: 1px solid var(--border); }
.bpm-btn:hover { background: #21212b; color: var(--accent-warm, #e8945c); }
.bpm-btn:active { background: var(--accent-warm, #e8945c); color: #0a0a0a; }
.bpm-input {
  width: 2.4rem;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0;
  -moz-appearance: textfield;
}
.bpm-input::-webkit-outer-spin-button,
.bpm-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bpm-input:focus { outline: none; }

.quant-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Transport health readout (target vs true BPM, scheduler buffer margin, underruns). Direct-DOM updated. */
.bpm-debug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 4px;
  white-space: nowrap;
  color: #6a6a72;
}
.bpm-debug.ok {
  color: var(--accent-green, #7cff7c);
  border-color: rgba(124, 255, 124, 0.35);
}
.bpm-debug.warn {
  color: #e8b34a;
  border-color: rgba(232, 179, 74, 0.5);
}
.bpm-debug.bad {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.15);
}
.quant-select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.22rem 0.35rem;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.quant-select:hover {
  border-color: #3a3a44;
}

.daw-body {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 4px;
  padding: 4px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.daw-workspace-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

.daw-workspace-column > .daw-main-stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.daw-tpl-dock {
  flex: 0 0 auto;
  min-width: 0;
}

.daw-main-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* positioning context for the patch/gen edit modal (.gen-modal-backdrop is position:absolute) so it fills
     exactly this center column — instruments + sequencer + session. */
  position: relative;
}

@media (max-width: 1100px) {
  .daw-body {
    grid-template-columns: 1fr;
  }
  .mixer-panel {
    position: static;
    max-height: none;
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.4rem;
}

.panel h2 {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-warm);
}

.channel-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.35rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.channel-row-sel {
  border-color: var(--accent-green);
  background: rgba(124, 255, 124, 0.06);
}

.channel-row-tpl-exhausted {
  opacity: 0.45;
  filter: grayscale(0.35);
}

.channel-row-tpl-exhausted .ch-name-hit {
  color: var(--muted);
}

.rack-track-col {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ch-instr-badge {
  font-size: 0.62rem;
  color: var(--muted);
  line-height: 1.2;
  padding: 0.15rem 0.25rem;
  background: var(--bg);
  border-radius: 3px;
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-name-hit {
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.15rem 0;
}

.ch-name-hit:hover {
  color: var(--mint);
}

.instr-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.35rem;
}

.instr-select {
  width: 100%;
  font-size: 0.72rem;
  background: var(--bg);
  color: var(--mint);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.2rem 0.15rem;
  font-weight: 600;
}

.gen-params {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.gen-params-label {
  font-size: 0.6rem;
  color: var(--muted);
  margin-right: 0.35rem;
}

.gen-params-select {
  font-size: 0.7rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  max-width: 100%;
}

.gen-params-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Matrix FM — flat panel, shared tokens */
.gen-params-matrixfm {
  padding-right: 0.15rem;
}

.sytrus-panel {
  font-size: 0.68rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.45rem 0.55rem;
}

.sytrus-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.sytrus-panel-head-l { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sytrus-patch-select {
  margin-left: auto;
  max-width: 14rem;
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text, #e8e8ea);
  border: 1px solid var(--accent-blue, #5aa9e8);
  border-radius: 5px;
  cursor: pointer;
}
.sytrus-patch-select:hover { border-color: #7cc0f0; }

.sytrus-panel-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent-warm);
}

.sytrus-panel-sub {
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.sytrus-section {
  margin-bottom: 0.55rem;
}
/* Two-zone plugin layout: Operators + Matrix share the top row, Filters + Routing share the bottom row —
   so the panel uses the full width (no dead space beside the matrix) and reads as one instrument, not a
   four-section vertical scroll. Wraps to stacked on narrow panels. */
.sytrus-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.sytrus-row > .sytrus-section { margin-bottom: 0; min-width: 0; }
.sytrus-row-top > .sytrus-section:first-child { flex: 1 1 28rem; }   /* operators grow to fill */
.sytrus-row-top > .sytrus-section:last-child { flex: 0 1 auto; }     /* matrix keeps its natural width */
.sytrus-row-bottom > .sytrus-section { flex: 1 1 100%; }               /* filters + routing each take full width */

.sytrus-section:last-child {
  margin-bottom: 0;
}

.sytrus-section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.sytrus-hint {
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.sytrus-empty {
  font-size: 0.62rem;
  color: var(--muted);
  margin: 0.25rem 0;
}

.sytrus-add-btn {
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--accent-warm);
  background: transparent;
  color: var(--accent-warm);
  cursor: pointer;
}

.sytrus-add-btn:hover:not(:disabled) {
  background: rgba(232, 148, 92, 0.12);
}

.sytrus-add-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sytrus-icon-btn {
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}

.sytrus-icon-btn:hover {
  color: var(--text);
  border-color: #444;
}

/* Masonry (CSS multi-column) instead of a grid so cards of unequal height pack tight with no row-gaps. */
.sytrus-op-grid { columns: 13rem; column-gap: 0.4rem; }
.sytrus-op-grid > .sytrus-op-card { break-inside: avoid; margin: 0 0 0.4rem; }
/* Compact env strip inside the operator cards so 4-6 ops tile in a row or two, not a full-width wall. */
.sytrus-op-env-wrap .sytrus-env-bg { height: 30px; }
/* Shrink the knobs inside op/filter cards so the 4 ADSR knobs (and filter env knobs) sit on ONE row in a
   ~14rem card instead of wrapping to two — this is what kept each card ~380px tall. */
.sytrus-op-card .ik-knob-dial,
.sytrus-filter-card .ik-knob-dial,
.sytrus-route-row .ik-knob-dial { width: 1.9rem; height: 1.9rem; }
.sytrus-op-card .ik-knob-label,
.sytrus-filter-card .ik-knob-label,
.sytrus-route-row .ik-knob-label { font-size: 0.46rem; }
.sytrus-op-card .ik-knob-value,
.sytrus-filter-card .ik-knob-value,
.sytrus-route-row .ik-knob-value { font-size: 0.5rem; }
.sytrus-op-card .ik-knob-grid { gap: 0.25rem 0.2rem; flex-wrap: nowrap; }
.sytrus-filter-card .ik-knob-grid { gap: 0.25rem 0.2rem; flex-wrap: nowrap; }
.sytrus-filter-card .ik-knob,
.sytrus-op-card .ik-knob { width: auto; min-width: 0; }
.sytrus-route-row .ik-knob { width: auto; min-width: 0; }
.sytrus-route-row .ik-knob-grid { gap: 0.25rem 0.2rem; }

.sytrus-op-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.4rem;
}

.sytrus-op-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
}

.sytrus-op-badge {
  font-weight: 800;
  font-size: 0.62rem;
  color: var(--accent-green);
  min-width: 2.4rem;
}

.sytrus-op-wave {
  font-family: inherit;
  font-size: 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  max-width: 5.5rem;
}

.sytrus-op-ratio {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  font-size: 0.58rem;
  color: var(--muted);
}

.sytrus-op-ratio input[type="range"] {
  flex: 1;
  min-width: 0;
}

.sytrus-op-ratio-val {
  font-size: 0.55rem;
  color: var(--muted);
  min-width: 1.6rem;
  text-align: right;
}

.sytrus-op-card-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sytrus-wave-ic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.sytrus-wave-ic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0a0a0a;
  cursor: pointer;
  font-family: inherit;
}

.sytrus-wave-ic-btn:hover {
  border-color: #555;
}

.sytrus-wave-ic-btn-active {
  background: var(--accent-green);
  border-color: var(--accent-green);
}

.sytrus-wave-ic-img {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  pointer-events: none;
  user-select: none;
}

.sytrus-op-env-wrap,
.sytrus-filter-env-wrap {
  margin-top: 0.35rem;
}

.sytrus-env-bg {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: 4px;
  background-color: #060606;
  border: 1px solid #1e1e1e;
}

.sytrus-filter-env-wrap .sytrus-env-bg {
  height: 40px;
}

.sytrus-op-adsr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border);
}
.sytrus-filter-env {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px solid var(--border);
}

.sytrus-op-adsr label,
.sytrus-filter-env label {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.52rem;
  color: var(--muted);
}

.sytrus-op-adsr input[type="range"],
.sytrus-filter-env input[type="range"] {
  width: 3.2rem;
  min-width: 0;
}

.sytrus-adsr-lbl {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--muted);
  margin-right: 0.15rem;
}

.sytrus-matrix-wrap {
  overflow-x: auto;
  margin: 0 -0.15rem;
  padding: 0 0.15rem;
}

.sytrus-matrix {
  width: auto;
  border-collapse: collapse;
  font-size: 0.55rem;
}

.sytrus-matrix th,
.sytrus-matrix td {
  border: 1px solid var(--border);
  padding: 0.2rem 0.25rem;
  text-align: center;
  vertical-align: middle;
}

.sytrus-matrix-corner {
  background: var(--bg);
  min-width: 1.6rem;
}

.sytrus-matrix-th {
  background: #141414;
  color: var(--accent-warm);
  font-weight: 700;
  min-width: 4.2rem;
}

.sytrus-matrix-rowhdr {
  background: #141414;
  color: var(--accent-green);
  font-weight: 700;
  white-space: nowrap;
}

.sytrus-matrix-diag {
  background: #0a0a0a;
  color: var(--muted);
}

.sytrus-matrix-cell {
  background: rgba(0, 0, 0, 0.25);
  min-width: 4.5rem;
}
/* ---- Matrix FM flow cues: active modulation cells, audible-op marks, signal-flow strip ---- */
.sytrus-matrix-active { background: rgba(90, 169, 232, 0.16); box-shadow: inset 0 0 0 1px rgba(90, 169, 232, 0.55); }
.sytrus-op-audible { box-shadow: inset 0 0 0 1px rgba(138, 182, 255, 0.5); }
.sytrus-op-out-tag { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.05em; color: #0a0a0a;
  background: #8ab6ff; border-radius: 3px; padding: 0.05rem 0.28rem; margin-left: 0.3rem; }
.sytrus-section-hint { font-size: 0.54rem; color: var(--muted); margin-left: auto; }
.mfm-flow-section { margin-bottom: 0.4rem; }
.mfm-flow-wrap { overflow-x: auto; }
.mfm-flow { width: 100%; max-width: 100%; height: auto; max-height: 5.5rem; display: block; }
.mfm-op { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.mfm-op-on { fill: rgba(138, 182, 255, 0.18); stroke: #8ab6ff; stroke-width: 1.4; }
.mfm-op-lbl, .mfm-out-lbl { fill: var(--text, #e8e8ea); font-size: 11px; font-weight: 700; text-anchor: middle; }
.mfm-out { fill: rgba(138, 182, 255, 0.14); stroke: #8ab6ff; stroke-width: 1.4; }
.mfm-out-lbl { font-size: 9px; letter-spacing: 0.04em; }
.mfm-arc { fill: none; stroke-width: 1.6; opacity: 0.85; }
.mfm-arc-fm { stroke: #e8945c; }
.mfm-arc-rm { stroke: #c9a6e0; stroke-dasharray: 4 3; }
.mfm-dot-fm { fill: #e8945c; }
.mfm-dot-rm { fill: #c9a6e0; }
.mfm-out-line { fill: none; stroke: #8ab6ff; stroke-width: 1.6; opacity: 0.7; }
/* filter nodes on the flow strip + the routing (audio bus) arcs below the row */
.mfm-filter { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.mfm-filter-on { fill: rgba(95, 208, 111, 0.16); stroke: #5fd06f; stroke-width: 1.3; }
.mfm-filter-lbl { fill: var(--text, #e8e8ea); font-size: 10px; font-weight: 700; text-anchor: middle; }
.mfm-route-line { fill: none; stroke: #5fd06f; stroke-width: 1.5; opacity: 0.7; }

.sytrus-mod-pair {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  align-items: center;
  justify-content: center;
}

.sytrus-mod-lbl {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.05rem;
  font-size: 0.5rem;
  color: var(--muted);
}

.sytrus-mod-lbl input[type="range"] {
  width: 100%;
  min-width: 3rem;
}

.sytrus-filter-grid { columns: 13rem; column-gap: 0.4rem; }
.sytrus-filter-grid > .sytrus-filter-card { break-inside: avoid; margin: 0 0 0.4rem; }

.sytrus-filter-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.4rem;
}

.sytrus-filter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.sytrus-filter-badge {
  font-weight: 800;
  font-size: 0.62rem;
  color: var(--muted);
  min-width: 1.8rem;
}

.sytrus-filter-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.58rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.sytrus-filter-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.sytrus-hz-lbl {
  font-size: 0.55rem;
  color: var(--muted);
  min-width: 3.2rem;
}

.sytrus-routes {
  columns: 13rem;
  column-gap: 0.4rem;
}

.sytrus-route-row {
  break-inside: avoid;
  margin: 0 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.35rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.sytrus-route-sel {
  font-family: inherit;
  font-size: 0.55rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  max-width: 4rem;
}

.sytrus-route-arrow {
  color: var(--accent-warm);
  font-weight: 700;
  font-size: 0.65rem;
}

.sytrus-route-vol input[type="range"] {
  width: 3.5rem;
  vertical-align: middle;
}

.gen-row {
  font-size: 0.65rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.gen-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.gen-row-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
}

.gen-row-pair select {
  font-size: 0.65rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.instrument-panel {
  position: sticky;
  top: 0.5rem;
}

.instr-track-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.instr-track-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.instr-track-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mint);
}

.instr-panel-hint {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.35;
  margin: 0 0 0.65rem;
}

.gen-pick-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.gen-pick-btn {
  font-family: inherit;
  text-align: center;
  padding: 0.3rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.gen-pick-btn:hover {
  border-color: #444;
  color: var(--text);
}

.gen-pick-active {
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: rgba(124, 255, 124, 0.08);
}

.instr-desc {
  font-size: 0.66rem;
  color: var(--muted);
  line-height: 1.4;
  /* Secondary blurb: sits BELOW the controls, divider on top, and must never widen the column —
     it wraps (incl. long tokens) within whatever width the controls set. */
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
  min-width: 0;
}

.instr-params-wrap {
  margin-bottom: 0.75rem;
}

.instr-params-wrap .gen-params {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.preset-title {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.preset-hint {
  font-size: 0.65rem;
  color: var(--muted);
  margin: 0 0 0.45rem;
}

.codj-panel {
  max-width: 28rem;
}
/* CO-DJ + deck docks: drop the generic .panel card BORDER — the inner textareas / code view already have their
   own frames, so the outer .panel border was a redundant double border around each. */
.daw-bottom-codj > .panel,
.daw-tpl-dock > .panel {
  border: none;
}
.codj-panel h2 {
  margin-bottom: 0.3rem;
}
.codj-pairing {
  margin: 0.1rem 0 0.4rem;
  font-size: 0.7rem;
  line-height: 1.3;
}

.codj-hint {
  font-size: 0.65rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.codj-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  align-items: center;
}

.codj-direct-txt {
  flex: 1;
  min-width: 10rem;
}

.codj-input {
  font-size: 0.7rem;
  padding: 0.25rem 0.35rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-width: 8rem;
}

.codj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.25rem;
}

.btn-codj {
  font-size: 0.68rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  color: var(--mint);
  border: 1px solid var(--mint);
  border-radius: 4px;
  cursor: pointer;
}

.codj-stream-grid {
  display: grid;
  /* minmax(0, 1fr) — NOT `1fr` (which is minmax(auto,1fr) and can't shrink below the panes' min-content, pushing
     the grid wider than the sidebar on Play). The 0 minimum lets each track shrink to the column width; the panes
     then wrap / scroll inside their own `overflow: auto` box instead of overflowing the sidebar. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
@media (max-width: 720px) {
  .codj-stream-grid {
    grid-template-columns: 1fr;
  }
}
.codj-stream-wrap {
  margin: 0.2rem 0 0.35rem;
  /* Allow this grid item to shrink below its content width so the pane (with overflow:auto) scrolls internally
     rather than widening the grid → the sidebar. */
  min-width: 0;
}
.codj-stream-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a9;
  margin-bottom: 0.25rem;
  /* On Play the lane id is appended; keep it to ONE line so the pane (and the whole row) doesn't grow. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.codj-stream-preview {
  margin: 0;
  /* Fixed height (not just max) — otherwise the pane is a 1-line placeholder when stopped and balloons to its
     max on Play (fills with the deck snapshot), stretching the right sidebar → the whole row → the left decks. */
  height: 4rem;
  overflow: auto;
  padding: 0.45rem 0.5rem;
  font-size: 0.68rem;
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  color: #b8c5c4;
  font-family: ui-monospace, monospace;
}

.codj-log {
  font-family: ui-monospace, monospace;
  font-size: 0.6rem;
  /* Fixed (not max) height + scroll — the log gains a line on Play and over a session; without a fixed height
     that growth stretches the right sidebar → the row → the left decks. Scrolls internally for older lines. */
  height: 2.5rem;
  overflow-y: auto;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem;
}

.codj-log-line {
  color: var(--muted);
  line-height: 1.35;
  word-break: break-all;
}

.codj-poll-hid {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rack-piano-preview {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: #0e1018;
}

.rack-piano-preview:hover {
  border-color: var(--accent);
}

.step-grid {
  display: flex;
  gap: 3px;
  flex: 1;
}

.step {
  flex: 1;
  min-width: 18px;
  max-width: 28px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #1e222c;
  cursor: pointer;
  padding: 0;
}

.step-on {
  background: linear-gradient(180deg, var(--accent), #c44);
  border-color: #e85;
}

.piano-roll-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.45rem;
}

.piano-roll-toolbar-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.piano-roll-zoom-btn {
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.piano-roll-zoom-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.piano-roll-snap-readout {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--mint);
  min-width: 7rem;
}

.piano-roll-toolbar-hint {
  font-size: 0.62rem;
  color: var(--muted);
  flex-basis: 100%;
}

.piano-roll {
  display: block;
  width: 100%;
  max-width: 720px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: crosshair;
}

.mixer-panel {
  position: sticky;
  top: 0.5rem;
  align-self: start;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
}

.mixer-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.mixer-panel-head .scope-wrap {
  flex: 1 1 200px;
  margin-bottom: 0;
  min-width: 180px;
}

.mixer-lanes {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mixer-actor-block {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem;
  background: rgba(0, 0, 0, 0.2);
}

.mixer-track-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  padding-top: 0.35rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(42, 49, 64, 0.65);
}

.mixer-master-strip {
  flex: 1 1 240px;
  min-width: 200px;
  background: #1a1e28;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
}

.mixer-master-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mixer-master-hint {
  font-size: 0.58rem;
  color: var(--muted);
  line-height: 1.3;
}

.mixer-actor-strip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  background: #151820;
  border-radius: 4px;
  padding: 0.35rem;
}

.mixer-actor-inner {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.mixer-actor-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 5.5rem;
}

.mixer-track-strip {
  flex: 0 0 auto;
  min-width: 148px;
  max-width: 200px;
  background: #1a1e28;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem;
  font-size: 0.65rem;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.35rem;
}

.mixer-track-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mixer-strip-tier-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0.15rem 0;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.mixer-eq3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.mixer-eq3-compact {
  flex: 1 1 auto;
}

.mixer-eq-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.55rem;
  color: var(--muted);
  min-width: 3.2rem;
}

.mixer-eq-slider {
  width: 100%;
  min-width: 56px;
}

.mixer-trim-label {
  font-size: 0.58rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 4.5rem;
}

.mixer-trim {
  width: 100%;
  max-width: 120px;
}

.mixer-pan {
  width: 100%;
}

.scope-wrap {
  margin-bottom: 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(120, 90, 180, 0.35);
  background: linear-gradient(165deg, rgba(30, 12, 45, 0.6) 0%, rgba(8, 10, 22, 0.95) 100%);
  overflow: hidden;
  box-shadow:
    0 0 24px rgba(120, 60, 200, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.scope-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.35rem 0.55rem 0.2rem;
  gap: 0.5rem;
}

.scope-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff6ec7, #7af0ff, #c9a0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(122, 240, 255, 0.35));
}

.scope-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(122, 255, 200, 0.75);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(122, 255, 200, 0.25);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 12px rgba(122, 255, 200, 0.15);
}

.scope-canvas {
  display: block;
  width: 100%;
  height: 96px;
  border-radius: 0 0 7px 7px;
  border: none;
  vertical-align: middle;
}

.mixer-strips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mixer-strip {
  background: #1a1e28;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem;
  font-size: 0.7rem;
  cursor: pointer;
}

.mixer-ch-sel {
  border-color: var(--mint);
}

.gen-adsr-block {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.gen-adsr-title {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.mixer-name {
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--mint);
}

.mixer-fader {
  width: 100%;
  margin-bottom: 0.25rem;
}

.mixer-fader-label {
  color: var(--muted);
  font-size: 0.65rem;
}

.adsr-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.15rem;
}

.adsr-row input {
  flex: 1;
}

.mixer-toggles {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.5rem;
}

.daw-foot {
  /* One row: the recorder strip (left, with its waveform flexing to fill) + the master/IO/MIDI bar (right). */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--panel);
  border-top: 1px solid var(--border);
  /* Fixed footer at the bottom of the shell (the shell is height:100vh, so this never scrolls off). */
  flex: 0 0 auto;
  /* overflow MUST stay visible so the MIDI popover (which opens UPWARD, above the footer) isn't clipped —
     daw-root (the shell) is the real bottom clip. Horizontal spill is clipped on .seq-arrange instead. */
  overflow: visible;
  z-index: 50;
}

.daw-foot-master {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.6rem;
}

.master-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 4px;
  white-space: nowrap;
  background: transparent;
  color: #6a6a72;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.master-chip-on {
  color: var(--accent-green, #7cff7c);
  border-color: rgba(124, 255, 124, 0.35);
}

.master-chip-off {
  color: #6a6a72;
  border-color: var(--border, #2a2a2a);
  opacity: 0.75;
}

.master-chip:hover {
  border-color: var(--accent-warm, #e8945c);
  color: var(--accent-warm, #e8945c);
}

/* Live readouts: the compressor's gain-reduction (dB) is rewritten every scope frame and the reverb's
   send count changes on launches — both vary in length ("0.0dB"↔"-12.3dB"↔"BYPASS", "OFF"↔"ON · 12 sends").
   Reserve a fixed-width, left-aligned box per readout so the chip width never changes and the footer chips
   (+ I/O rack) don't jitter during playback. inline-block so min-width takes effect inside the nowrap chip. */
.master-comp-gr,
.master-rev-state {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  text-align: left;
  vertical-align: baseline;
}
.master-comp-gr {
  min-width: 8ch;
}
.master-rev-state {
  min-width: 14ch;
}

.daw-foot-meta {
  color: var(--muted);
}

.code-debug-panel {
  grid-column: 1 / -1;
  max-width: 100%;
}

.code-debug-panel--dock {
  grid-column: auto;
  margin-bottom: 0;
}

.code-debug-hint-dock {
  margin-bottom: 0.45rem;
}

.tpl-song-editor-dock {
  min-height: 0;
}

/* deck code view fills the dock height: the docked panel is a flex column and the editor wrap grows into the
   leftover space (the STEP strip + Apply/Sync buttons stay pinned below). */
.daw-tpl-dock > .code-debug-panel--dock {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* The editor is a flex-column chain so the textarea fills the dock and scrolls internally — wrap → slot →
   mirror-stack each flex:1, then the textarea height:100% (its `rows` attribute is overridden). Without the
   slot + wrap being flex columns, the stack stayed at the textarea's `rows` height and the deck was cut off
   with empty space below. */
.daw-tpl-dock .tpl-song-editor-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 120px;
  max-height: none;
}

.daw-tpl-dock .tpl-song-textarea-slot {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.daw-tpl-dock .tpl-song-mirror-stack {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

.daw-tpl-dock .tpl-song-input-layer {
  height: 100%;
  min-height: 0;
  max-height: none;
  resize: none;
  overflow: auto;
}

.daw-tpl-dock .tpl-song-highlight-layer {
  max-height: none;
}

.code-debug-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 0.5rem 0;
}

.code-debug-hint-hub {
  margin-bottom: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

.code-debug-textarea {
  width: 100%;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 0.6rem;
  background: #0a0c10;
  color: var(--mint);
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
  min-height: 280px;
}

.code-debug-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.code-debug-btn {
  padding: 0.35rem 0.75rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.code-debug-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.code-debug-errors {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #2a1510;
  color: #f08870;
  font-size: 0.72rem;
  overflow: auto;
  border-radius: 4px;
}

.tpl-song-split {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: stretch;
  min-height: 280px;
}

@media (max-width: 900px) {
  .tpl-song-split {
    flex-direction: column;
  }
}

.tpl-song-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tpl-col-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.tpl-syntax-preview {
  flex: 1;
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  padding: 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  background: #080a0e;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--mint);
}

.tpl-syntax-preview .tpl-preview-line {
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 0.05em;
}

.tpl-syntax-preview .tpl-keyword {
  color: var(--accent);
  font-weight: 500;
}

.tpl-syntax-preview .tpl-step-on {
  color: var(--mint);
}

.tpl-syntax-preview .tpl-step-off {
  color: var(--muted);
}

.tpl-syntax-preview .tpl-step-active {
  background: rgba(255, 107, 53, 0.4);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
}

.tpl-song-editor-full {
  min-height: 340px;
}

.tpl-song-editor-wrap {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: #0a0c10;
  flex: 1;
  min-height: 260px;
}

.tpl-song-textarea-slot {
  display: block;
}

.tpl-song-mirror-stack {
  position: relative;
  min-height: 320px;
  width: 100%;
}

.tpl-song-highlight-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
  pointer-events: none;
  z-index: 1;
  color: var(--mint);
  background: transparent;
  border: none;
  box-sizing: border-box;
}

.tpl-song-highlight-layer .tpl-hl-kw {
  color: var(--accent);
  font-weight: 600;
}

/* Mid-line modifier keywords (bar, v) — distinct from line-leading keywords. */
.tpl-song-highlight-layer .tpl-hl-kw.tpl-hl-inline {
  color: var(--mint);
  font-weight: 500;
  opacity: 0.85;
}

.tpl-song-highlight-layer .tpl-hl-st-on {
  color: var(--mint);
}

.tpl-song-highlight-layer .tpl-hl-st-off {
  color: var(--muted);
}

.tpl-song-highlight-layer .tpl-hl-st-act {
  background: rgba(255, 107, 53, 0.45);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
}

.tpl-song-highlight-layer .tpl-hl-comment {
  color: #5a6270;
  font-style: italic;
}

.tpl-song-highlight-layer .tpl-hl-note {
  color: var(--mint);
}

.tpl-song-highlight-layer .tpl-hl-line {
  display: inline;
}

.tpl-song-highlight-layer .tpl-hl-updated {
  animation: tpl-hl-updated-pop-fade 32s ease-out;
}

@keyframes tpl-hl-updated-pop-fade {
  0% {
    background: rgba(255, 200, 100, 0.65);
    transform: scaleY(1.03);
  }
  2% {
    transform: scaleY(1);
    background: rgba(255, 200, 100, 0.4);
  }
  100% {
    background: transparent;
  }
}

.tpl-song-input-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 320px;
  margin: 0;
  padding: 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.45;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  border: none;
  resize: vertical;
  box-sizing: border-box;
  display: block;
}

.tpl-song-input-layer:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.45);
}

/* Dark, slim scrollbars for the deck editor + code panels — replaces the default white OS scrollbar so
   the editor reads as part of the dark theme (track blends into the editor bg, thumb is a subtle slug). */
.tpl-song-input-layer,
.tpl-song-highlight-layer,
.code-debug-textarea,
.code-debug-errors {
  scrollbar-width: thin;
  scrollbar-color: #3a4150 transparent;
}
.tpl-song-input-layer::-webkit-scrollbar,
.tpl-song-highlight-layer::-webkit-scrollbar,
.code-debug-textarea::-webkit-scrollbar,
.code-debug-errors::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.tpl-song-input-layer::-webkit-scrollbar-track,
.tpl-song-highlight-layer::-webkit-scrollbar-track,
.code-debug-textarea::-webkit-scrollbar-track,
.code-debug-errors::-webkit-scrollbar-track {
  background: transparent;
}
.tpl-song-input-layer::-webkit-scrollbar-thumb,
.tpl-song-highlight-layer::-webkit-scrollbar-thumb,
.code-debug-textarea::-webkit-scrollbar-thumb,
.code-debug-errors::-webkit-scrollbar-thumb {
  background: #353b47;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.tpl-song-input-layer::-webkit-scrollbar-thumb:hover,
.tpl-song-highlight-layer::-webkit-scrollbar-thumb:hover,
.code-debug-textarea::-webkit-scrollbar-thumb:hover,
.code-debug-errors::-webkit-scrollbar-thumb:hover {
  background: #4a5161;
}
.tpl-song-input-layer::-webkit-scrollbar-corner,
.tpl-song-highlight-layer::-webkit-scrollbar-corner,
.code-debug-textarea::-webkit-scrollbar-corner,
.code-debug-errors::-webkit-scrollbar-corner {
  background: transparent;
}

.tpl-song-plain-textarea {
  width: 100%;
  min-height: 320px;
  margin: 0;
  padding: 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  background: #0a0c10;
  color: var(--mint);
  border: none;
  resize: vertical;
  box-sizing: border-box;
  display: block;
}

.tpl-song-plain-textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.45);
}

.tpl-playback-strip-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.tpl-playback-strip-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tpl-playback-strip {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tpl-beat-cell {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  padding: 0.2rem 0;
  background: #12161e;
  color: var(--muted);
  border-radius: 2px;
  border: 1px solid var(--border);
}

.tpl-beat-cell-active {
  background: rgba(255, 107, 53, 0.35);
  color: #fff;
  border-color: var(--accent);
}

.tpl-editor-wrap {
  position: relative;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.tpl-mirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: auto;
  background: #0a0c10;
  color: var(--mint);
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
}

.tpl-mirror-lines {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.tpl-mirror .tpl-line {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  line-height: 1.35;
  min-height: 1.35em;
  white-space: pre;
  overflow: visible;
  box-sizing: border-box;
}

.tpl-mirror .tpl-keyword {
  color: var(--accent);
  font-weight: 500;
}

.tpl-mirror .tpl-step {
  transition: background 0.05s ease, color 0.05s ease;
}

.tpl-mirror .tpl-step-on {
  color: var(--mint);
}

.tpl-mirror .tpl-step-off {
  color: var(--muted);
}

.tpl-mirror .tpl-step-active {
  background: rgba(255, 107, 53, 0.35);
  color: #fff;
  border-radius: 2px;
}

.tpl-textarea-slot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.tpl-textarea-slot .code-debug-textarea,
.tpl-textarea-slot textarea {
  width: 100%;
  height: 100%;
  min-height: 320px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 0.6rem;
  background: transparent;
  color: rgba(106, 228, 176, 0.85);
  border: none;
  resize: none;
  caret-color: var(--mint);
}

.tpl-textarea-slot .code-debug-textarea:focus,
.tpl-textarea-slot textarea:focus {
  outline: none;
}

.tpl-hub-stream {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
  background: rgba(8, 12, 20, 0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.tpl-hub-stream-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tpl-hub-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: rgba(106, 228, 176, 0.15);
  color: var(--mint);
  border: 1px solid rgba(106, 228, 176, 0.35);
}

.tpl-hub-stream-meta {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.tpl-hub-stream-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 720px) {
  .tpl-hub-stream-cols {
    grid-template-columns: 1fr;
  }
}

.tpl-hub-stream-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.tpl-hub-stream-pre {
  margin: 0;
  max-height: 100px;
  overflow: auto;
  padding: 0.4rem 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  color: rgba(180, 188, 206, 0.9);
  background: #05070b;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}

.tpl-hub-offline {
  margin-bottom: 0.65rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.74rem;
  color: var(--muted);
  background: var(--panel);
  border-radius: 4px;
  border: 1px dashed var(--border);
}

.tpl-hub-offline-label {
  font-weight: 600;
  color: var(--text);
}

.tpl-tpl-line-stream {
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.65rem;
  background: rgba(10, 14, 24, 0.95);
  border: 1px solid rgba(106, 228, 176, 0.22);
  border-radius: 6px;
}

.tpl-tpl-line-stream-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mint);
  margin-bottom: 0.3rem;
}

.tpl-tpl-line-stream-hint {
  font-size: 0.66rem;
  color: var(--muted);
  margin: 0 0 0.5rem 0;
  line-height: 1.45;
}

.tpl-tpl-line-stream-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

@media (max-width: 720px) {
  .tpl-tpl-line-stream-cols {
    grid-template-columns: 1fr;
  }
}

.tpl-tpl-line-stream-pre {
  margin: 0;
  min-height: 96px;
  max-height: 300px;
  overflow: auto;
  padding: 0.45rem 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  line-height: 1.38;
  color: rgba(195, 204, 220, 0.95);
  background: #060810;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}

.tpl-view-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

.tpl-tab {
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.tpl-tab:hover {
  color: var(--text);
}

.tpl-tab-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 107, 53, 0.08);
}

.tpl-stream-ref {
  max-height: 140px;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  background: #080a0e;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  line-height: 1.4;
}

.tpl-stream-ref-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.tpl-stream-ref-empty {
  color: var(--muted);
  font-style: italic;
}

.tpl-stream-ref-old {
  color: rgba(122, 130, 148, 0.45);
}

.tpl-stream-ref-mid {
  color: rgba(122, 130, 148, 0.72);
}

.tpl-stream-ref-recent {
  color: var(--mint);
}

.tpl-stream-live-wrap {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-height: 160px;
}

.tpl-stream-live-label {
  padding: 0.35rem 0.6rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: #0c0e14;
  border-bottom: 1px solid var(--border);
}

.tpl-stream-live-slot {
  min-height: 120px;
}

.tpl-stream-live-input {
  width: 100%;
  min-height: 120px;
  padding: 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  background: #0a0c10;
  color: var(--mint);
  border: none;
  resize: vertical;
  display: block;
  box-sizing: border-box;
}

.tpl-stream-live-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.35);
}

/* --- Session view (clip launcher / scenes) --- */
.session-workspace-wrap {
  width: 100%;
  min-height: 420px;
}

.session-panel {
  max-width: 960px;
  /* Leading width = the per-row name label + ■ stop (26px) + 2 gaps (0.35rem each). The clip columns and the
     P-scene headers both clear this, so driving it from one variable keeps them column-aligned even when the
     name is hidden side-by-side (see the wide-screen media query). */
  --sess-name-w: 100px;
  --sess-lead: calc(var(--sess-name-w) + 26px + 0.7rem);
  /* Match the instrument-panel pattern (see .sg-panel): no card border/background, thin top accent, minimal
     padding. The 18px bottom (from .seq-split-session .session-panel) keeps its grid aligned with the SEQ grid. */
  background: transparent;
  border: none;
  border-top: 2px solid var(--accent-green);
  border-radius: 0;
  padding: 6px 2px 18px;
}
/* Match the SEQ panel's 18px bottom padding so the bottom-anchored grids (.sg-grid / .session-grid-wrap both
   use margin-top:auto) line up — that 12px padding gap was the ONLY thing making the rows sit off by 12px. */
.seq-split-session .session-panel {
  padding-bottom: 18px;
}

.session-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.session-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.session-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 10px rgba(124, 255, 124, 0.55);
}
/* When the session is actually playing live, pulse the brand so "live" is never hidden. */
.session-brand-live .session-dot {
  animation: session-queue-pulse 1s ease-in-out infinite;
}
.session-brand-live .session-title {
  color: var(--accent-green);
  text-shadow: 0 0 8px rgba(124, 255, 124, 0.4);
}

.session-title {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--accent-green);
}

.btn-session-stop-all,
.btn-session-launch {
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #151515;
  color: var(--text);
  cursor: pointer;
}

.btn-session-stop-all:hover,
.btn-session-launch:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* Cue→Throw deck model. CUE (per scene) = private audition (amber/headphone tint). THROW = commit to main. */
.session-scene-toprow {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* P[X] · LAUNCH · CUE all on one line — LAUNCH grows to fill, P + CUE stay compact so LAUNCH owns most of it. */
.session-scene-toprow .session-scene-label {
  flex: 0 0 auto;
}
.session-scene-toprow .btn-scene-launch,
.session-scene-toprow .btn-session-launch {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  text-align: center;
  padding: 3px 4px;
}
.session-scene-toprow .btn-scene-cue {
  flex: 0 0 auto;
  font-size: 0.5rem;
  padding: 2px 4px;
}
.btn-scene-cue {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #2c2c34;
  background: #0d0d11;
  color: #8a8a96;
  cursor: pointer;
}
.btn-scene-cue:hover {
  border-color: #c9a16a;
  color: #c9a16a;
}
.btn-scene-cue-on {
  border-color: #f59e0b;
  color: #ffd27a;
  background: rgba(245, 158, 11, 0.16);
}
.session-scene-head-cued {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.btn-session-throw {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #151515;
  color: var(--muted);
  cursor: pointer;
}
.btn-session-throw:disabled {
  opacity: 0.4;
  cursor: default;
}
.btn-session-throw-armed {
  border-color: #f59e0b;
  color: #ffd27a;
  background: rgba(245, 158, 11, 0.16);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
  animation: session-queue-pulse 1.3s ease-in-out infinite;
}
.btn-session-throw-armed:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* Merged pattern controls in the scene header: LOAD · SAVE · LAUNCH (stacked to stay legible) */
.session-scene-ops {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.session-scene-oprow {
  display: flex;
  align-items: stretch;
  gap: 3px;
}
.session-scene-oplabel {
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5a5a64;
}
.session-scene-oprow .btn-scene-op {
  flex: 1 1 0;
}
/* LOAD/SAVE program buttons: an icon (folder-open = load, save = save) + a bar-count badge (1 = this bar,
   N = all bars). Slightly tighter than the text op buttons. */
.btn-scene-op-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.2rem 0.1rem;
}
.btn-scene-op-icon svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  display: block;
}
.op-barnum {
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
/* Follow-action ("THEN") block: per-scene progression rule with an optional weighted second action.
   Progressive disclosure — a single readable action select by default, the chance row appears on ⚖. */
.session-scene-follow {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.follow-line1,
.follow-line2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.follow-sel {
  flex: 1 1 0;
  min-width: 0;
  background: #0e0e0e;
  border: 1px solid var(--border, #2a2a2a);
  color: var(--text, #cfcfcf);
  font-family: inherit;
  font-size: 0.62rem;
  border-radius: 4px;
  padding: 0.22rem 0.3rem;
  cursor: pointer;
}
.follow-sel:hover {
  border-color: #3a3a44;
}
.follow-sel-b {
  color: #c9c9d2;
}
/* ⚖ toggle — adds/removes the weighted second action. */
.follow-mix {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e0e0e;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 4px;
  color: #6a6a72;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.follow-mix:hover {
  border-color: #3a3a44;
  color: #c9c9d2;
}
.follow-mix.follow-mix-on {
  border-color: rgba(124, 196, 255, 0.6);
  color: var(--accent, #7cc4ff);
  box-shadow: inset 0 0 0 1px rgba(124, 196, 255, 0.12);
}
.follow-pct {
  flex: 0 0 34px;
  width: 34px;
  min-width: 0;
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--border, #2a2a2a);
  color: var(--text, #cfcfcf);
  font-family: inherit;
  font-size: 0.62rem;
  border-radius: 4px;
  padding: 0.22rem 0.18rem;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.follow-pct::-webkit-inner-spin-button,
.follow-pct::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.follow-pct-sign {
  flex: 0 0 auto;
  font-size: 0.58rem;
  color: #6a6a72;
  margin-left: -1px;
}
.follow-else {
  flex: 0 0 auto;
  font-size: 0.7rem;
  line-height: 1;
  color: #5a5a64;
  padding: 0 1px;
}
.btn-scene-op {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.3rem 0.12rem;
  border-radius: 4px;
  border: 1px solid #2a2a31;
  background: #121217;
  color: #9a9aa2;
  font-family: inherit;
  font-size: 0.48rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 90ms, border-color 90ms, color 90ms;
}
.btn-scene-op:hover {
  border-color: #3a3a44;
  color: #e0e0e6;
}
.btn-scene-load:hover {
  border-color: var(--accent-orange, #f97316);
  color: var(--accent-orange, #f97316);
}
.btn-scene-launch:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}
.btn-scene-on.btn-scene-load {
  border-color: var(--accent-orange, #f97316);
  color: var(--accent-orange, #f97316);
  background: #1a1208;
}
.btn-scene-on.btn-scene-launch {
  border-color: var(--accent-green);
  color: #0b0b0b;
  background: var(--accent-green);
}

.session-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 1rem;
  line-height: 1.45;
  max-width: 52rem;
}

.session-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}

.session-corner {
  display: none;
}

.session-scene-row {
  display: flex;
  gap: 0.35rem;
  /* Align the P columns with the clip columns below: clear the track-row leading cells (name + ■ 26 + 🔗 24 +
     three 0.35rem gaps) and run to the right edge, exactly like .session-cells does. Driven by --sess-lead so
     it tracks the name width when it collapses side-by-side. */
  margin-left: var(--sess-lead);
  margin-right: 0;
}

.session-scene-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.35rem 0.25rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: #0e0e0e;
}

.session-scene-head-active {
  border-color: rgba(124, 255, 124, 0.45);
  box-shadow: 0 0 0 1px rgba(124, 255, 124, 0.12);
}

.session-scene-head-queued {
  animation: session-queue-pulse 1.1s ease-in-out infinite;
  border-color: rgba(255, 196, 107, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.2);
}

.session-scene-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}

.session-track-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

/* The track name is now just a LABEL (play/pause + SYNC/STORE moved to the instrument UI). It only shows when
   the panels are stacked; side-by-side the aligned SEQ labels the row, so it's hidden (see the media query). */
.session-track-name.session-track-label {
  width: var(--sess-name-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0.25rem 0.55rem;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.75rem;
}
.session-track-ico {
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}
.session-track-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-track-name.session-track-toggle:hover {
  border-color: #3a3a44;
  background: #141414;
}
/* PLAYING (transport running, not paused) — green, live. */
.session-track-toggle.session-track-live {
  border-color: rgba(124, 255, 124, 0.6);
  color: var(--accent-green);
  box-shadow: inset 0 0 0 1px rgba(124, 255, 124, 0.12);
}
.session-track-toggle.session-track-live .session-track-ico {
  color: var(--accent-green);
}
.session-track-toggle.session-track-live:hover {
  border-color: var(--accent-green);
}
/* READY (not paused, transport stopped) — neutral, NOT green. */
.session-track-toggle.session-track-ready {
  color: var(--text);
}
.session-track-toggle.session-track-ready .session-track-ico {
  color: #6a6a72;
}
/* PAUSED (muted) — dim, struck through, pause look. */
.session-track-toggle.session-track-paused {
  opacity: 0.5;
  border-color: #242428;
  background: #0a0a0a;
}
.session-track-toggle.session-track-paused .session-track-txt {
  text-decoration: line-through;
  color: var(--muted);
}
.session-track-toggle.session-track-paused .session-track-ico {
  color: #55555c;
}
/* Per-track clip stop (■): silences just this track until a clip / scene is launched again. Instant. */
.session-track-stop {
  width: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #0e0e0e;
  color: #6a6a72;
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.session-track-stop:hover {
  border-color: rgba(255, 107, 107, 0.7);
  color: #ff6b6b;
  background: #141414;
}
/* Active (this track has been explicitly stopped). */
.session-track-stop.session-track-stop-on {
  border-color: rgba(255, 107, 107, 0.7);
  color: #ff6b6b;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.14);
}

/* Per-track instrument sync/store toggle. */
.session-track-instr {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #0e0e0e;
  color: #5a5a64;
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.session-track-instr:hover {
  border-color: rgba(232, 148, 92, 0.6);
  color: #ccc;
  background: #141414;
}
.session-track-instr-on {
  border-color: rgba(232, 148, 92, 0.7);
  color: var(--accent-warm, #e8945c);
  background: rgba(232, 148, 92, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 148, 92, 0.14);
}

.session-cells {
  flex: 1;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}

.session-cell-empty {
  flex: 1;
  min-height: 46px;
  border: 1px dashed #2a2a2a;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

.session-cell-dash {
  color: #333;
  font-size: 1.1rem;
}

.session-cell {
  flex: 1;
  min-height: 46px;
  min-width: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, #1a1a22 0%, #12121a 100%);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
  padding: 0.26rem 0.42rem;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.session-wave {
  width: 100%;
  flex: 1;
  min-height: 16px;
  display: block;
  align-self: stretch;
  opacity: 0.92;
}

.session-wave-fill {
  fill-opacity: 0.5;
  stroke-opacity: 0.85;
  stroke-width: 0.6;
}

.session-cell-playing .session-wave {
  filter: drop-shadow(0 0 3px rgba(124, 255, 124, 0.4));
}

.session-cell:hover {
  border-color: rgba(124, 255, 124, 0.35);
}

.session-cell-playing {
  border-color: rgba(124, 255, 124, 0.85);
  box-shadow: 0 0 12px rgba(124, 255, 124, 0.18);
}

@keyframes session-queue-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.15), 0 0 10px rgba(255, 196, 107, 0.12);
    border-color: rgba(255, 196, 107, 0.45);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.35), 0 0 16px rgba(255, 196, 107, 0.28);
    border-color: rgba(255, 196, 107, 0.9);
  }
}

.session-cell-queued {
  animation: session-queue-pulse 1.1s ease-in-out infinite;
}

/* Per-clip SKIP (right-click): a reddish border + dimmed content marks a clip that won't play until re-enabled. */
.session-cell-disabled {
  border-color: rgba(255, 86, 86, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 86, 86, 0.3), 0 0 8px rgba(255, 86, 86, 0.18);
}
/* A clip on ANOTHER player's deck: a follower can't launch it (only its owner, or the host). Dimmed + locked. */
.session-cell-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.session-cell-disabled .session-wave {
  opacity: 0.32;
}
.session-cell-disabled .session-cell-meta {
  color: rgba(255, 120, 120, 0.85);
}
.session-cell-disabled:hover {
  border-color: rgba(255, 120, 120, 0.95);
}

.session-cell-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-cell-meta {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* Session clips coloured by deck, matching the sequencer + deck mixer. */
.session-cell-deck-a { border-left: 3px solid var(--deck-a); }
.session-cell-deck-b { border-left: 3px solid var(--deck-b); }
.session-cell-deck-c { border-left: 3px solid var(--deck-c); }
.session-cell-deck-d { border-left: 3px solid var(--deck-d); }
.session-wave-a { fill: var(--deck-a); stroke: var(--deck-a); }
.session-wave-b { fill: var(--deck-b); stroke: var(--deck-b); }
.session-wave-c { fill: var(--deck-c); stroke: var(--deck-c); }
.session-wave-d { fill: var(--deck-d); stroke: var(--deck-d); }

.btn-session-row-launch {
  width: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #142414;
  color: var(--accent-green);
  cursor: pointer;
  font-size: 0.85rem;
}

.btn-session-row-launch:hover {
  background: #1a321a;
}

.btn-session-row-launch-on {
  background: #1f4020;
  box-shadow: 0 0 8px rgba(124, 255, 124, 0.2);
}

/* ============================================================================
   v6 redesign — FL-style grid sequencer + A/B deck mixer (neon / terminal)
   ============================================================================ */
:root {
  --deck-a: #22d3ee;
  --deck-a-dim: #0e7490;
  --deck-a-glow: rgba(34, 211, 238, 0.65);
  --deck-b: #e879f9;
  --deck-b-dim: #a21caf;
  --deck-b-glow: rgba(232, 121, 249, 0.6);
  --deck-c: #f59e0b;
  --deck-c-dim: #b45309;
  --deck-c-glow: rgba(245, 158, 11, 0.6);
  --deck-d: #4ade80;
  --deck-d-dim: #15803d;
  --deck-d-glow: rgba(74, 222, 128, 0.6);
  --accent-orange: #f97316;
  --panel-2: #0a0a0c;
  --panel-3: #0c0c10;
  --grid-line: #18181d;
}

.daw-body-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.daw-body-stack .daw-main-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-height: 0;
}
/* The instrument grid takes the remaining height and scrolls INSIDE itself — it no longer pushes the layout
   taller. SEQ + session stay pinned at the bottom of the main area at their natural height. */
.daw-main-stack > .instr-stack-host {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.daw-main-stack > .seq-session-wrap {
  flex: 0 0 auto;
  min-height: 0;
}

/* ---- Grid sequencer ---- */
.sg-panel {
  /* Follow the instrument-panel pattern: no card border/background, just a thin top accent + minimal padding.
     Keep position:relative (the piano/lane/automation takeovers are inset:0 against this) and the 18px bottom
     padding (it must match the session panel so both bottom-anchored grids line up). */
  background: transparent;
  border: none;
  border-top: 2px solid var(--accent);
  border-radius: 0;
  padding: 6px 2px 18px;
  position: relative;
}
/* Piano-roll TAKEOVER — one open at a time, fills the whole sequencer panel (does NOT expand/extend it). */
.sg-piano-takeover { position: absolute; inset: 0; z-index: 30; background: var(--panel-2, #0a0a0c); display: flex; flex-direction: column; }
.sg-piano-takeover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #1c1c22; flex-shrink: 0; }
.sg-piano-takeover-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, #22d3ee); }
.sg-piano-takeover-close { width: 24px; height: 24px; border: 1px solid #2a2a32; border-radius: 4px; background: transparent; color: var(--text, #e8e8ea); cursor: pointer; font-size: 0.85rem; line-height: 1; }
.sg-piano-takeover-close:hover { background: rgba(255, 255, 255, 0.08); }
/* Rows flex to fill the panel height so the piano roll never needs to scroll (height deduced from row count). */
.sg-piano-takeover-body { flex: 1; min-height: 0; overflow: hidden; padding: 6px 10px 10px; display: flex; flex-direction: column; }
.sg-piano-takeover-body .sg-prow { flex: 1 1 0; min-height: 0; }
.sg-piano-takeover-body .sg-prow .sg-cells { height: 100%; }
.sg-piano-takeover-body .sg-prow .sg-cell { height: 100%; }
/* Lock / automation lanes in the takeover: each lane row flex-fills the panel height (tall, easy-to-draw
   lanes) instead of the cramped inline ~18px. */
.sg-lane-takeover-body { gap: 6px; padding-top: 10px; }
.sg-lane-takeover-body .sg-lk-row { flex: 1 1 0; min-height: 0; margin-top: 0; opacity: 1; }
.sg-lane-takeover-body .sg-lk-cells { height: 100%; }
.sg-lane-takeover-body .sg-lk-cell,
.sg-lane-takeover-body .sg-auto-cell { height: auto; }
/* EUCLID & GENERATE takeover — a fill-density chip row + a generate-action grid, spread to use the panel. */
.sg-eg-takeover-body { padding: 14px 16px; overflow-y: auto; }
/* LYRICS takeover — a roomy syllable-per-step grid (8 wide cells × 2 rows for the 16-step bar) so each
   lyric gets real horizontal room, vs the cramped LYR column it used to share in the locks overlay. */
.sg-lyr-takeover-body { padding: 16px; overflow-y: auto; }
.sg-lyr-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; align-content: start; }
.sg-lyr-cell { display: flex; flex-direction: column; gap: 5px; background: rgba(255, 255, 255, 0.025);
  border: 1px solid #1c1c22; border-radius: 7px; padding: 9px 9px 11px; }
.sg-lyr-cell.sg-lyr-beat { border-color: #2c2c38; }
.sg-lyr-cell.sg-lyr-cell-off { opacity: 0.45; }
.sg-lyr-step { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted, #6a6a76); }
/* Higher specificity + !important to beat the global input[type=text] rule (which is !important). */
.sg-lyr-cell .sg-lyr-input { width: 100%; box-sizing: border-box; background: #0c0c12 !important;
  border: 1px solid #2a2a32 !important; border-radius: 5px !important; color: var(--text, #e8e8ea);
  font-size: 14px !important; text-align: center !important; padding: 8px 4px !important; font-family: inherit; }
.sg-lyr-cell .sg-lyr-input:focus { outline: none !important; border-color: var(--accent, #22d3ee) !important; }
.sg-lyr-cell .sg-lyr-input:disabled { background: transparent !important; border-color: transparent !important;
  color: #3a3a44 !important; cursor: default; }
.sg-eg-body { display: flex; flex-direction: column; gap: 18px; }
.sg-eg-section { display: flex; flex-direction: column; gap: 9px; }
.sg-eg-shead { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sg-eg-slabel { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent-warm, #e8945c); }
.sg-eg-slabel.sg-gen-label { color: #c08bf0; }
.sg-eg-shint { font-size: 0.6rem; color: #6a6a76; letter-spacing: 0.02em; }
.sg-eg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-eg-chip {
  min-width: 34px; height: 30px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #2a2a35; border-radius: 5px; background: #0d0d11; color: #9a9aa6;
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
  transition: background 90ms, color 90ms, border-color 90ms, box-shadow 90ms;
}
.sg-eg-chip:hover { background: #1c1c24; color: #d8d8e2; }
.sg-eg-chip.sg-eg-chip-on {
  border-color: var(--accent-warm, #e8945c); color: #fff;
  background: rgba(232, 148, 92, 0.18); box-shadow: 0 0 8px rgba(232, 148, 92, 0.35);
}
.sg-eg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-eg-action {
  flex: 1 1 calc(50% - 8px); min-width: 190px; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 13px; border: 1px solid #2a2a35; border-radius: 6px; background: #0d0d11; cursor: pointer;
  transition: border-color 90ms, background 90ms, box-shadow 90ms, transform 60ms;
}
.sg-eg-action:hover { border-color: #a06be0; background: #16121d; box-shadow: 0 0 10px rgba(160, 107, 224, 0.3); }
.sg-eg-action:active { transform: translateY(1px); }
.sg-eg-action-name { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #d7b8f5; }
.sg-eg-action-reseed .sg-eg-action-name { color: #ecd9ff; }
.sg-eg-action-desc { font-size: 0.6rem; color: #7a7a86; letter-spacing: 0.01em; }
.sg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sg-head h2 {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--deck-a);
  margin: 0;
}
.sg-head-hint {
  font-size: 0.62rem;
  color: #555;
  letter-spacing: 0.05em;
}
.sg-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Bottom-anchor the ruler + grid AS ONE BLOCK (margin-top:auto), so the column ruler stays glued directly
   above the grid and the panel's slack collects ABOVE them — not as a gap between the numbers and the cells. */
.sg-grid-anchor {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sg-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  --row-accent: var(--deck-a);
  --row-glow: var(--deck-a-glow);
}
.sg-row.sg-deck-b {
  --row-accent: var(--deck-b);
  --row-glow: var(--deck-b-glow);
}
.sg-row.sg-deck-c {
  --row-accent: var(--deck-c);
  --row-glow: var(--deck-c-glow);
}
.sg-row.sg-deck-d {
  --row-accent: var(--deck-d);
  --row-glow: var(--deck-d-glow);
}
.sg-row-exhausted {
  opacity: 0.4;
}
.sg-gutter {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-right: 1px solid var(--grid-line);
  padding-right: 8px;
}
.sg-gutter-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  min-width: 0;
}
.sg-row-sel .sg-ch-name {
  color: #fff;
}
.sg-ch-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cfcfd6;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-ch-instr {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a5a64;
}
.sg-gutter-ctl {
  display: flex;
  align-items: center;
  gap: 3px;
}
.sg-deck-chip {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--row-accent);
  background: transparent;
  color: var(--row-accent);
  font-size: 0.6rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 6px var(--row-glow);
}
/* The deck chip is now a tiny select (click → A/B/C/D list, jump straight to any deck). Compact chrome that
   matches the old chip: the letter + a faint caret. The dropdown list is the shared IkSelect popover.
   The .instr-grid-container prefix (+ !important) is needed to beat the generic `.instr-grid-container .ik-sel`
   sizing rule, since this chip lives inside the instrument grid. */
.instr-grid-container .sg-deck-select.ik-sel,
.sg-deck-select.ik-sel {
  min-width: 0 !important;
  width: 28px !important;
  height: 18px;
  padding: 0 2px !important;
  border: 1px solid;
  border-radius: 3px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px !important;
  font-size: 0.58rem !important;
  font-weight: 800;
  cursor: pointer;
}
.sg-deck-select .ik-sel-label { padding: 0; }
.sg-deck-select .ik-sel-arrow { font-size: 0.45rem; opacity: 0.65; }
.sg-tog {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #2a2a31;
  background: #0e0e12;
  color: #6a6a72;
  font-size: 0.58rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sg-tog svg { width: 11px; height: 11px; }
.sg-tog-on {
  background: #4a1f24;
  border-color: #ff7a8c;
  color: #ff9aa8;
}
.sg-tog-solo {
  background: #4a4520;
  border-color: #ffe07a;
  color: #ffe89a;
}
.sg-tog-lock {
  background: #401f2c;
  border-color: #ff7aa0;
  color: #ff9ab8;
}
.sg-cells {
  flex: 1;
  display: flex;
  gap: 4px;
  min-width: 0;
}
.sg-cell {
  flex: 1;
  height: 46px;
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  background: #0d0d11;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background 90ms, box-shadow 90ms, transform 60ms;
}
.sg-cell.sg-beat {
  background: #121218;
}
/* The BARS/SWING/SCALE controls now sit INLINE in the SEQ header (one row), not as a second indented row. */
.sg-barpager {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding-left: 0;
  flex-wrap: nowrap;
}
.sg-barpager .sg-barbtn { min-width: 22px; }
.sg-barpager .sg-barpager-label { margin-right: 1px; letter-spacing: 0.04em; }
.sg-panel .panel-head { flex-wrap: nowrap; }
.sg-panel .panel-head-l { align-items: center; flex-wrap: nowrap; min-width: 0; }
/* VIEW overflow "···" dropdown — an IkSelect styled to match the bar buttons (.sg-barbtn). */
.ik-sel.sg-barpager-more {
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  gap: 2px;
  border-radius: 4px;
  border: 1px solid #2a2a35;
  background: #0d0d11;
  color: #8a8a96;
  font-size: 0.72rem;
  box-sizing: border-box;
}
.ik-sel.sg-barpager-more:hover {
  background: #1c1c24;
  border-color: #2a2a35;
}
.ik-sel.sg-barpager-more.sg-barpager-more-on {
  border-color: var(--row-accent, #00f3ff);
  color: #fff;
  box-shadow: 0 0 8px var(--row-glow, rgba(0, 243, 255, 0.4));
}
.sg-barpager-more .ik-sel-arrow {
  font-size: 0.5rem;
  margin-left: 0;
}
.sg-barpager-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: #5a5a66;
  margin-right: 2px;
}
.sg-barbtn {
  min-width: 28px;
  height: 22px;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  background: #0d0d11;
  color: #8a8a96;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 90ms, box-shadow 90ms, color 90ms;
}
.sg-barbtn:hover {
  background: #1c1c24;
}
.sg-barbtn-active {
  border-color: var(--row-accent, #00f3ff);
  color: #fff;
  box-shadow: 0 0 8px var(--row-glow, rgba(0, 243, 255, 0.4));
}
.sg-barbtn-playing {
  background: #15202c;
}
.sg-barbtn-active.sg-barbtn-playing {
  background: var(--row-accent, #00f3ff);
  color: #04040a;
}
.sg-barbtn.sg-barbtn-mod {
  min-width: 22px;
  font-weight: 700;
}
.sg-barbtn.sg-follow {
  min-width: 0;
  padding: 0 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sg-barbtn.sg-follow-on {
  border-color: var(--accent-green, #7cff7c);
  color: #04140a;
  background: var(--accent-green, #7cff7c);
  box-shadow: 0 0 8px rgba(124, 255, 124, 0.45);
}
.sg-barbtn:disabled {
  opacity: 0.3;
  cursor: default;
}
.sg-barpager-count {
  min-width: 14px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--row-accent, #00f3ff);
}
.sg-barpager-sep {
  display: none;
}
.sg-ch-rootpitch {
  margin-left: 6px;
  font-size: 0.6rem;
  color: var(--row-accent, #00f3ff);
  opacity: 0.85;
}
.sg-cell:hover {
  background: #1c1c24;
}
.sg-cell.sg-on {
  background: var(--row-accent);
  border-color: var(--row-accent);
  box-shadow: 0 0 9px var(--row-glow);
}
/* A lit boolean step shows a velocity-scaled fill: the cell base dims to a faint accent, the bright bar
   below rises to vel/127 — so the whole row reads its dynamics at a glance. */
.sg-cell.sg-on.sg-velcell {
  background: color-mix(in srgb, var(--row-accent) 24%, #0d0d11);
}
.sg-vel-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--row-accent);
  box-shadow: 0 0 7px var(--row-glow);
  pointer-events: none;
}
.sg-cell.sg-col-active .sg-vel-fill {
  background: #ffffff;
  box-shadow: none;
}
/* Lock markers inside a lit step: probability dot (top-left, fades with the odds), ratchet count (top-right),
   nudge tick (left = early, right = late). */
.sg-mk {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.sg-mk-prob {
  top: 2px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.85);
}
.sg-mk-rch {
  top: 0;
  right: 2px;
  font-size: 8px;
  line-height: 10px;
  font-weight: 700;
  color: #0b0b0f;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}
.sg-mk-ndg {
  bottom: 2px;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.sg-mk-ndg-l {
  left: 1px;
  border-right: 4px solid rgba(255, 255, 255, 0.9);
}
.sg-mk-ndg-r {
  right: 1px;
  border-left: 4px solid rgba(255, 255, 255, 0.9);
}

/* ---- Per-step lock LANES (drag-to-edit, under the step row) ---- */
.sg-lk-row {
  margin-top: 2px;
  opacity: 0.96;
}
.sg-lk-gutter {
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}
.sg-lk-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--row-accent);
  opacity: 0.85;
}
.sg-lk-cells {
  display: flex;
  gap: 4px;
  flex: 1;
}
.sg-lk-cell {
  flex: 1;
  height: 18px;
  border: 1px solid #16161b;
  border-radius: 2px;
  background: #0c0c10;
  position: relative;
  overflow: hidden;
  cursor: ns-resize;
}
.sg-lk-cell.sg-beat {
  background: #121218;
}
.sg-lk-cell.sg-lk-dim {
  opacity: 0.35;
}
.sg-lk-cell:hover {
  border-color: var(--row-accent);
}
.sg-lk-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--row-accent);
  opacity: 0.85;
  pointer-events: none;
}
.sg-lk-fill.sg-lk-bip {
  bottom: auto;
}
.sg-lk-mid {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
/* Per-note lock lanes (under the piano grid) reuse the step lane look; a left tick marks them as note-scoped,
   and empty columns (no note at that step) fade further back. */
.sg-pnote-lk-row .sg-lk-gutter {
  border-left: 2px solid var(--row-accent);
}
.sg-pnote-lk-cell.sg-lk-dim {
  opacity: 0.16;
}
.sg-tog-lck {
  color: #8a8aa0;
}
.sg-tog-lck-on {
  background: var(--row-accent);
  border-color: var(--row-accent);
  color: #0b0b0f;
  box-shadow: 0 0 8px var(--row-glow);
}
.sg-scale-lit {
  color: #7df0c0;
  text-shadow: 0 0 6px rgba(125, 240, 192, 0.5);
}
/* Automation lane — a warm amber curve, distinct from the cool lock lanes. */
.sg-tog-auto {
  color: #e0a85a;
}
.sg-tog-auto-on {
  background: #e0a85a;
  border-color: #e0a85a;
  color: #1a1206;
  box-shadow: 0 0 8px rgba(224, 168, 90, 0.5);
}
/* Euclid & Generate overlay toggle — purple (generative) identity, matching the GEN label. */
.sg-tog-gen { color: #b08bf0; }
.sg-tog-gen-on {
  background: #b08bf0;
  border-color: #b08bf0;
  color: #120a1c;
  box-shadow: 0 0 8px rgba(176, 139, 240, 0.5);
}
/* Lyrics overlay toggle (vocal tracks) — cyan (vocal/text) identity. */
.sg-tog-lyr { color: #5ec8e0; }
.sg-tog-lyr-on {
  background: #5ec8e0;
  border-color: #5ec8e0;
  color: #06141a;
  box-shadow: 0 0 8px rgba(94, 200, 224, 0.5);
}
/* Per-channel delete toggle — neutral until hover, then red. */
.sg-tog-del {
  color: #6a6a72;
  font-size: 0.82rem;
  line-height: 1;
}
.sg-tog-del:hover {
  border-color: #e0556e;
  color: #ff7a8f;
  background: #1a0c10;
}
/* "+ TRACK" button beside the SEQ title. */
.sg-add-track {
  height: 18px;
  padding: 0 7px;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  background: #0d0d11;
  color: #8a8a96;
  font-family: inherit;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 90ms, border-color 90ms, color 90ms;
}
.sg-add-track:hover {
  border-color: var(--accent-green, #7cff7c);
  color: var(--accent-green, #7cff7c);
  background: #0c140c;
}
.sg-auto-label {
  color: #e0a85a;
}
.sg-auto-cell {
  height: 26px;
  cursor: ns-resize;
}
.sg-auto-fill {
  background: linear-gradient(to top, #c07a2a, #f0c070);
  opacity: 0.9;
}
.sg-auto-cell:hover {
  border-color: #e0a85a;
}
.sg-scale-sel {
  height: 22px;
  background: #121218;
  color: #d6d6e6;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  font-size: 11px;
  padding: 0 4px;
  cursor: pointer;
}
/* Inline in the one-row SEQ header: size the scale dropdowns to their content (C / off) instead of the wide
   IkSelect default min-width, so the toolbar fits on one line. */
.sg-scale-sel.ik-sel {
  min-width: 0;
  gap: 2px;
}
.sg-scale-sel:disabled {
  opacity: 0.45;
  cursor: default;
}
.sg-scale-sel-lit {
  border-color: #2bd49a;
  color: #aef5d6;
  box-shadow: 0 0 6px rgba(43, 212, 154, 0.35);
}
.sg-cell.sg-melodic.sg-on {
  background: transparent;
  border-color: var(--row-accent);
  box-shadow: inset 0 0 8px var(--row-glow);
}
.sg-cell.sg-col-active {
  background: #15202c;
}
.sg-cell.sg-on.sg-col-active {
  background: #ffffff;
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.95);
  transform: scale(1.08);
}
.sg-ruler {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
.sg-ruler-pad {
  width: 168px;
  flex-shrink: 0;
}
.sg-ruler-ticks {
  flex: 1;
  display: flex;
  gap: 4px;
}
.sg-tick {
  flex: 1;
  text-align: center;
  font-size: 0.58rem;
  color: #3a3a42;
}
.sg-tick-beat {
  color: #6a6a74;
}

/* inline piano-roll expansion (rows reuse the step-grid layout so columns align) */
.sg-exp {
  width: 17px;
  height: 17px;
  border: 1px solid #2a2a31;
  border-radius: 3px;
  background: #0e0e12;
  color: #6a6a72;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sg-exp svg {
  width: 12px;
  height: 12px;
}
.sg-exp-on {
  color: var(--row-accent);
  border-color: var(--row-accent);
  box-shadow: 0 0 6px var(--row-glow);
}
.sg-prow {
  --pg-pad: 0;
}
.sg-cell.sg-pcell {
  height: 14px;
}
/* Notes render as spanning bars overlaid on the cell row, so duration is visible + grabbable. */
.sg-cells.sg-pcells {
  position: relative;
}
.sg-pnote-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--row-accent);
  border: 1px solid var(--row-accent);
  border-radius: 3px;
  box-shadow: 0 0 7px var(--row-glow);
  cursor: grab;
  z-index: 3;
  box-sizing: border-box;
}
.sg-pnote-bar:active {
  cursor: grabbing;
}
/* A step shown as a note bar (step channels on the piano roll) — a click toggles it, not a drag. */
.sg-pnote-step { cursor: pointer; }
/* Non-step-pitch rows of a single-pitch step channel: visible but not interactive. */
.sg-pcell-inert { pointer-events: none; }
.sg-pnote-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 9px;
  z-index: 4;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.25);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.sg-pnote-edge:hover {
  background: rgba(255, 255, 255, 0.6);
}
.sg-gutter.sg-pgut {
  justify-content: flex-end;
}
.sg-prow-black .sg-pgut {
  background: #060608;
}
.sg-pkey {
  font-size: 0.52rem;
  color: #5a5a64;
}
.sg-pgut-c .sg-pkey {
  color: #9a9aa2;
  font-weight: 700;
}

/* ---- Chromatrack-style instrument editor (pill selectors) ---- */
.ie-panel {
  background: var(--panel-2);
  border: 1px solid #1c1c22;
  padding: 16px 20px 20px;
}
.ie-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ie-head h2 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--deck-b);
  margin: 0;
}
.ie-sub {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: #5a5a64;
}
.ie-section {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: #6a6a72;
  font-weight: 700;
  margin: 18px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--grid-line);
}
/* ---- A/B deck mixer ---- */
.dk-panel {
  background: var(--panel-3);
  border: 1px solid #1c1c22;
  padding: 0;
  overflow: hidden;
}
.dk-master-strip {
  display: flex;
  gap: 16px;
  height: 92px;
  border-bottom: 1px solid #1c1c22;
  background: #050507;
  padding: 8px 10px;
}
.dk-master-info {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--grid-line);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 0.6rem;
  color: #5a5a64;
}
.dk-master-title {
  color: var(--accent-orange);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 3px;
}
.dk-master-scope {
  flex: 1;
  position: relative;
}
.dk-spectrum {
  width: 100%;
  height: 100%;
  display: block;
}
.dk-desk {
  display: flex;
  gap: 18px;
  padding: 16px;
  align-items: stretch;
  justify-content: center;
}
.dk-deck {
  flex: 1;
  background: #050507;
  border: 1px solid #26262e;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.dk-deck-a {
  --dk-accent: var(--deck-a);
  --dk-glow: var(--deck-a-glow);
}
.dk-deck-b {
  --dk-accent: var(--deck-b);
  --dk-glow: var(--deck-b-glow);
}
.dk-deck-c {
  --dk-accent: var(--deck-c);
  --dk-glow: var(--deck-c-glow);
}
.dk-deck-d {
  --dk-accent: var(--deck-d);
  --dk-glow: var(--deck-d-glow);
}
.dk-deck-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--grid-line);
  padding-bottom: 8px;
}
.dk-deck-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--dk-accent);
  text-shadow: 0 0 10px var(--dk-glow);
}
.dk-deck-meta {
  font-size: 0.58rem;
  color: #5a5a64;
  letter-spacing: 0.06em;
}
.dk-set-select {
  width: 100%;
  margin: 6px 0 10px;
  background: #0a0a0c;
  color: #b8b8c0;
  border: 1px solid #2a2a31;
  border-radius: 4px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 0.62rem;
  cursor: pointer;
}
.dk-deck-a .dk-set-select {
  border-color: var(--deck-a-dim);
}
.dk-deck-b .dk-set-select {
  border-color: var(--deck-b-dim);
}
.dk-fader-row {
  display: flex;
  gap: 10px;
  justify-content: space-around;
  flex: 1;
  flex-wrap: wrap;
}
.dk-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dk-fader-name {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a9aa2;
  max-width: 56px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Vertical volume lever: groove + coloured fill + rounded handle, with a segmented level meter beside it. */
.dk-lever {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 60px;
}
.dk-lever-track {
  position: relative;
  width: 18px;
  border-radius: 9px;
  background: #0a0a0e;
  border: 1px solid #1e1e26;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.65);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.dk-lever-fill {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 6px;
  opacity: 0.72;
  pointer-events: none;
}
.dk-lever-handle {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 12px;
  transform: translateY(50%);
  border-radius: 4px;
  background: #16161d;
  border: 2.2px solid;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dk-lever-handle-line {
  width: 8px;
  height: 1px;
  border-radius: 0.5px;
  opacity: 0.95;
}
.dk-lever-meter {
  position: relative;
  width: 4px;
  border-radius: 2px;
  background: #0a0a0e;
  border: 1px solid #18181f;
  overflow: hidden;
  --lvl: 0;
}
.dk-lever-meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--lvl, 0) * 100%);
  -webkit-mask-image: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px);
  mask-image: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px);
  transition: height 0.06s linear;
}
.dk-fader-db {
  font-size: 0.56rem;
  color: #8a8a92;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Centre DJ-mixer: per-deck channel strips (EQ knobs + CUE + volume fader) above the 4-way fader — the
   "booth". Per-track stem faders stay in the deck slots. */
.dk-mixer {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 10px;
}
.dk-ch-strip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* Pack the EQ column + volume/CUE together AND to the right edge so the volume/CUE hugs the deck's right side. */
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  flex: 1 1 0;
  min-width: 0;
}
.dk-ch-strip-empty {
  opacity: 0.45;
}
.dk-ch-left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 48px;
  flex-shrink: 0;
  align-self: stretch;
}
.dk-ch-left-col .dk-cue {
  width: 100%;
  padding: 4px 0;
  margin: 0;
  height: auto;
  text-align: center;
}
.dk-ch-right-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Each EQ knob carries its label BELOW it (tight 0.1rem inner gap). The gap BETWEEN knob groups must be
     clearly larger than that inner gap, or each label reads as belonging to the knob below it instead of its
     own knob above. 6px >> the ~1.6px dial→label gap, so labels visually hug their own knob. */
  gap: 6px;
  width: 44px;
  flex-shrink: 0;
}
/* Pin the volume fader + its dB readout to the BOTTOM of the strip so all four decks' faders line up on one
   baseline regardless of how tall the EQ-knob/CUE block above them is (a deck with loaded content can render a
   taller header than an empty one). margin-top:auto absorbs any height difference above the fader. */
.dk-ch-vol {
  display: flex;
  margin-top: auto;
}
/* Deck volume faders are taller than the per-track ones (a proper DJ channel fader) and carry the same
   segmented level meter beside them. */
.dk-ch-vol .dk-lever {
  height: 100px;
}
.dk-ch-db {
  font-size: 0.52rem;
  color: #8a8a92;
  font-variant-numeric: tabular-nums;
}
.dk-empty {
  font-size: 0.6rem;
  color: #44444c;
  text-align: center;
  align-self: center;
  max-width: 200px;
  line-height: 1.4;
}
.dk-center {
  width: 100%;
  flex-shrink: 0;
  border: 1px solid #26262e;
  border-radius: 4px;
  background: #050507;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dk-eq-pair {
  display: flex;
  gap: 8px;
  flex: 1;
}
.dk-eq-col {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid #1f1f26;
  border-radius: 4px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dk-eq-title {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.dk-acc-a {
  color: var(--deck-a);
}
.dk-acc-b {
  color: var(--deck-b);
}
.dk-acc-c {
  color: var(--deck-c);
}
.dk-acc-d {
  color: var(--deck-d);
}
.dk-eq-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.dk-eq-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6a6a72;
}
.dk-panel .dk-eq-slider {
  -webkit-appearance: auto;
  appearance: auto;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px;
  height: 58px;
  cursor: pointer;
}
.dk-eq-slider.dk-acc-a {
  accent-color: var(--deck-a);
}
.dk-eq-slider.dk-acc-b {
  accent-color: var(--deck-b);
}
.dk-eq-slider.dk-acc-c {
  accent-color: var(--deck-c);
}
.dk-eq-slider.dk-acc-d {
  accent-color: var(--deck-d);
}
.dk-eq-val {
  font-size: 0.5rem;
  color: #55555c;
  height: 8px;
}
.dk-eq-div {
  width: 70%;
  height: 1px;
  background: #1f1f26;
  margin: 2px 0;
}
.dk-center-gutter {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dk-center-label {
  writing-mode: vertical-rl;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  color: #44444c;
  font-weight: 700;
}
.dk-xfade {
  border: none;
  background: none;
  padding: 0;
}
/* Live FX throw row (above the 4-way fader): hold ECHO to punch a master echo. */
.dk-fx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dk-fx-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5a5a66;
}
.dk-fx-div {
  height: 24px;
  background: #0d0d11;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  color: #9a9aa6;
  font-size: 0.56rem;
  padding: 0 2px;
}
.dk-fx-throw {
  flex: 1;
  height: 24px;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  background: #0d0d11;
  color: #c9a16a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  user-select: none;
  transition: background 80ms, box-shadow 80ms, color 80ms;
}
.dk-fx-throw:hover {
  border-color: #4a4a58;
}
.dk-fx-throw:active {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  color: #ffd27a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4), inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}
.dk-xfade-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.dk-xfade-mid {
  color: #6a6a72;
  letter-spacing: 0.1em;
}
.dk-xfade-slider {
  width: 100%;
  height: 8px;
  accent-color: #fff;
  cursor: pointer;
}

/* 2-axis touch crossfader: drag the knob; corners = the 4 player slots. */
.dk-xypad {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 110px;
  border: 1px solid #2a2a31;
  border-radius: 5px;
  /* 4-corner blend so each deck reads as its own colour: A cyan (TL), B magenta (TR), C amber (BL), D green (BR). */
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.22), transparent 62%),
    radial-gradient(circle at top right, rgba(232, 121, 249, 0.22), transparent 62%),
    radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.22), transparent 62%),
    radial-gradient(circle at bottom right, rgba(74, 222, 128, 0.22), transparent 62%),
    radial-gradient(circle at center, #0b0b10, #060608);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.dk-xypad::before,
.dk-xypad::after {
  content: "";
  position: absolute;
  background: #1c1c24;
}
.dk-xypad::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}
.dk-xypad::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}
.dk-xypad-corner {
  position: absolute;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5a5a64;
  pointer-events: none;
}
.dk-xy-tl { left: 5px; top: 4px; color: var(--deck-a); }
.dk-xy-tr { right: 5px; top: 4px; color: var(--deck-b); }
.dk-xy-bl { left: 5px; bottom: 4px; color: var(--deck-c); }
.dk-xy-br { right: 5px; bottom: 4px; color: var(--deck-d); }
.dk-xypad-knob {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0b0b0b;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 4 decks (A/B/C/D): two stacked deck slots per side column. */
.dk-deck-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.dk-player,
.dk-deckslot {
  border: 1px solid #20202a;
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.012);
  padding: 6px 8px;
}
.dk-deck-a.dk-deckslot { border-left-color: var(--deck-a); }
.dk-deck-b.dk-deckslot { border-left-color: var(--deck-b); }
.dk-deck-c.dk-deckslot { border-left-color: var(--deck-c); }
.dk-deck-d.dk-deckslot { border-left-color: var(--deck-d); }
.dk-eq-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4px 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #18181f;
}
.dk-player-empty {
  border-style: dashed;
  opacity: 0.6;
}
.dk-player-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.dk-player-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8a8a92;
}
.dk-player-meta {
  font-size: 0.52rem;
  color: #55555c;
}
.dk-deck-a .dk-player-tag { color: var(--deck-a); }
.dk-deck-b .dk-player-tag { color: var(--deck-b); }
.dk-deck-c .dk-player-tag { color: var(--deck-c); }
.dk-deck-d .dk-player-tag { color: var(--deck-d); }

/* deck head: host/client role + per-stem waveform thumbnails */
.dk-deck-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dk-deck-role {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #55555c;
  border: 1px solid #2a2a31;
  border-radius: 3px;
  padding: 1px 5px;
}
.dk-deck-a .dk-deck-role {
  color: var(--deck-a);
  border-color: var(--deck-a-dim);
}
.dk-deck-b .dk-deck-role {
  color: var(--deck-b);
  border-color: var(--deck-b-dim);
}
.dk-fader-wave {
  width: 64px;
  height: 34px;
  border: 1px solid #1c1c22;
  border-radius: 3px;
  background: #060608;
  overflow: hidden;
}
.dk-stem-wave {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Pattern bank (cue/save) ---- */
/* ---- Sequencer + pattern launcher, side by side ---- */
.seq-session-split {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.seq-split-main {
  flex: 1 1 560px;
  min-width: 0;
}
.seq-split-session {
  flex: 1 1 460px;
  min-width: 0;
}
.seq-split-main .sg-panel,
.seq-split-session .session-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Side by side: SEQ + SESSION rows are EXACTLY aligned, so the SEQ already labels each instrument — the
   session's per-row name is redundant. Collapse the name button to just the ▶ play/pause toggle (widening the
   clip columns). --sess-name-w also drives the scene-row offset, so the P columns stay aligned with the clips. */
@media (min-width: 1001px) {
  .seq-split-session .session-panel { --sess-lead: calc(26px + 0.35rem); }
  .seq-split-session .session-track-name { display: none; }
}
/* Stacked (narrow): SEQ and SESSION drop onto separate lines, so the session shows its own row names again. */
@media (max-width: 1000px) {
  .seq-session-split { flex-direction: column; }
}
.seq-split-side {
  flex: 0 0 200px;
  position: sticky;
  top: 8px;
}
@media (max-width: 1400px) {
  .seq-split-side {
    flex-basis: 180px;
  }
}


/* co-DJ + deck, side by side at the bottom */
.daw-bottom-split {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.daw-bottom-col {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 1000px) {
  .daw-bottom-split {
    flex-direction: column;
  }
}

/* ---- Pattern launcher (P0 = LIVE, P1..N = LOAD / SAVE / LAUNCH) ---- */
.pb-panel-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid #1c1c22;
  padding: 12px;
}
.pb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pb-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-orange);
}
.pb-sub {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: #4a4a54;
}
.pb-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pb-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  border: 1px solid #23232a;
  border-radius: 5px;
  background: #0d0d11;
  transition: border-color 90ms, box-shadow 90ms, background 90ms;
}
.pb-card-top {
  display: flex;
  align-items: stretch;
  gap: 5px;
}
.pb-split-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.pb-split-label {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5a5a64;
}
.pb-split-row .pb-btn {
  flex: 1 1 0;
}
.pb-btn-grow {
  flex: 1 1 0;
}
.pb-card-n {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8a8a92;
}
.pb-card-editing {
  border-color: var(--accent-orange);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.3);
}
.pb-card-live {
  border-color: var(--accent-green);
  background: #0c160c;
}
.pb-card-queued {
  border-color: #ffe07a;
  box-shadow: 0 0 8px rgba(255, 224, 122, 0.28);
}
.pb-btn {
  padding: 5px 4px;
  border: 1px solid #2a2a31;
  border-radius: 4px;
  background: #121217;
  color: #9a9aa2;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: inherit;
  transition: background 90ms, border-color 90ms, color 90ms;
}
.pb-btn:hover {
  border-color: #3a3a44;
  color: #e0e0e6;
}
.pb-btn-load:hover {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}
.pb-btn-launch:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}
.pb-btn-on.pb-btn-load {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  background: #1a1208;
}
.pb-btn-on.pb-btn-launch {
  border-color: var(--accent-green);
  color: #0b0b0b;
  background: var(--accent-green);
}
/* P0 — the live output card. Read-only. */
.pb-card-p0 {
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  background: #0a0f0a;
  border-color: #1f2a1f;
}
.pb-card-p0 .pb-card-n {
  color: #6a6a72;
}
.pb-live-badge {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4a5a4a;
}
.pb-live-src {
  font-size: 0.64rem;
  font-weight: 700;
  color: #5a5a64;
}
.pb-card-live-on {
  border-color: var(--accent-green);
  box-shadow: 0 0 10px rgba(124, 255, 124, 0.25);
}
.pb-card-live-on .pb-live-badge {
  color: var(--accent-green);
}
.pb-card-live-on .pb-live-src {
  color: var(--accent-green);
}
.pb-hint {
  font-size: 0.54rem;
  line-height: 1.5;
  color: #44444c;
  letter-spacing: 0.02em;
}
.transport-spacer {
  /* Zero-grow on purpose: a flex:1 spacer here makes .transport-bar expand to eat ALL free header width,
     leaving the preset clusters no slack so they wrap to a second row. Kept (not deleted) so the trailing
     undo/redo/export/import buttons keep their position. */
  flex: 0 0 0;
  width: 0;
}

/* ---- Multi-note piano grid ---- */
.pg-panel {
  background: var(--panel-2);
  border: 1px solid #1c1c22;
  padding: 14px 16px 16px;
  --pg-accent: var(--deck-a);
  --pg-glow: var(--deck-a-glow);
}
.pg-panel.pg-deck-b {
  --pg-accent: var(--deck-b);
  --pg-glow: var(--deck-b-glow);
}
.pg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pg-head h2 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--pg-accent);
  margin: 0;
}
.pg-hint {
  font-size: 0.6rem;
  color: #555;
}
.pg-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grid-line);
  border-radius: 4px;
  overflow: hidden;
}
.pg-row {
  display: flex;
  align-items: stretch;
  height: 17px;
}
.pg-row-black {
  background: rgba(0, 0, 0, 0.35);
}
.pg-key {
  width: 52px;
  flex-shrink: 0;
  font-size: 0.54rem;
  color: #5a5a64;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  border-right: 1px solid var(--grid-line);
  background: #08080a;
}
.pg-key-c {
  color: #9a9aa2;
  font-weight: 700;
}
.pg-cells {
  flex: 1;
  display: flex;
}
.pg-cell {
  flex: 1;
  border: 0;
  border-right: 1px solid #131318;
  border-bottom: 1px solid #131318;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 80ms, box-shadow 80ms;
}
.pg-cell.pg-beat {
  border-left: 1px solid #20202a;
}
.pg-cell:hover {
  background: rgba(255, 255, 255, 0.06);
}
.pg-cell.pg-on {
  background: var(--pg-accent);
  box-shadow: inset 0 0 6px var(--pg-glow), 0 0 5px var(--pg-glow);
  border-radius: 2px;
}
.pg-cell.sg-col-active {
  background: rgba(120, 160, 220, 0.12);
}
.pg-cell.pg-on.sg-col-active {
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}


/* ---- Set presets (whole-workspace named save/load, global) ---- */
.set-presets { display: inline-flex; align-items: center; gap: 0.28rem; }
/* Push the library/preset clusters (♫ songs + STATION + SET) to the right edge so the header reads as a
   balanced split — live transport controls on the left, library & presets on the right — instead of all
   controls packed left with dead space. The auto margin collapses (and the row wraps) only well below spec. */
.daw-header > .set-presets:not(.set-lib) { margin-left: auto; }
.set-presets-label { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.08em; }
.set-select { padding: 0.28rem 0.4rem; background: var(--panel, #15151b); color: var(--fg, #e8e8ea);
  border: 1px solid var(--border, #2a2a2a); border-radius: 5px; font-size: 0.74rem; max-width: 124px; }
.set-btn { padding: 0.28rem 0.55rem; background: var(--panel, #15151b); color: var(--fg, #e8e8ea);
  border: 1px solid var(--border, #2a2a2a); border-radius: 5px; font-size: 0.72rem; cursor: pointer; }
/* Square icon buttons: Save (⤓) sits next to Import (⤒) in each preset cluster (load ▾ · ⤓ save · ⤒ import). */
.set-btn.set-save, .set-btn.set-import { width: 26px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.95rem; line-height: 1; }
.set-import { display: inline-flex; align-items: center; cursor: pointer; }

/* ♫ SONGS button + the dedicated song-browser overlay. */
.songs-open-btn { padding: 0.28rem 0.5rem; min-width: 26px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(34, 211, 238, 0.1); color: var(--deck-a, #22d3ee);
  border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 5px; font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.06em; cursor: pointer; }
.songs-open-btn:hover { background: rgba(34, 211, 238, 0.2); border-color: var(--deck-a, #22d3ee); }
.song-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center; }
.song-panel { width: min(640px, 92vw); max-height: 80vh; display: flex; flex-direction: column;
  background: #0c0c11; border: 1px solid #2a2a35; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.song-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #1c1c24; }
.song-panel-title { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; color: var(--deck-a, #22d3ee); }
.song-search { flex: 1; height: 28px; background: #15151b; border: 1px solid #2a2a32; border-radius: 5px;
  color: var(--text); font-size: 0.8rem; padding: 0 9px; }
.song-panel-count { font-size: 0.66rem; color: var(--muted); }
.song-close { width: 26px; height: 26px; background: none; border: 1px solid #2a2a32; border-radius: 5px;
  color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.song-close:hover { color: #ff7a7a; border-color: #ff7a7a; }
.song-list { overflow-y: auto; padding: 6px; }
.song-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px;
  border-radius: 6px; }
.song-row:hover { background: #14141a; }
.song-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.song-row-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row-sub { font-size: 0.66rem; color: var(--muted); }
.song-row-decks { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.song-row-load { font-size: 0.6rem; color: #5a5a66; letter-spacing: 0.08em; margin-right: 2px; }
.song-deck-btn { width: 26px; height: 26px; border-radius: 5px; border: 1px solid #2a2a35; background: #0d0d11;
  color: var(--text); font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.song-deck-btn:hover { border-color: currentColor; }
.song-deck-btn.dk-acc-a { color: var(--deck-a); }
.song-deck-btn.dk-acc-b { color: var(--deck-b); }
.song-deck-btn.dk-acc-c { color: var(--deck-c); }
.song-deck-btn.dk-acc-d { color: var(--deck-d); }
.song-deck-occ { opacity: 0.55; }
.song-deck-locked { opacity: 0.28; color: var(--muted) !important; cursor: not-allowed; border-style: dashed; }
.song-deck-locked:hover { border-color: #2a2a35; }
.song-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 0.78rem; }
.song-hint { padding: 9px 14px; border-top: 1px solid #1c1c24; font-size: 0.66rem; color: #5a5a66; }

/* Per-deck JOG PLATTER (in each deck slot). A small turntable wheel + a ⟳ reload, tinted to the deck colour.
   The marker rotates via direct-DOM transform while you rub; `color` carries the deck accent (marker + glow). */
.dk-jog { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #18181f; }
.dk-jog-wheel { position: relative; width: 76px; height: 76px; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle at 50% 38%, #20202a 0%, #131318 58%, #0a0a0d 100%);
  border: 2px solid #2a2a35; box-shadow: inset 0 0 16px rgba(0,0,0,0.6), 0 3px 10px rgba(0,0,0,0.5);
  color: #8a8a92; user-select: none; touch-action: none; flex: 0 0 auto; }
.dk-jog-wheel:hover { border-color: currentColor; }
.dk-jog-wheel:active { cursor: grabbing; }
.dk-jog-wheel.dk-acc-a { color: var(--deck-a); } .dk-jog-wheel.dk-acc-b { color: var(--deck-b); }
.dk-jog-wheel.dk-acc-c { color: var(--deck-c); } .dk-jog-wheel.dk-acc-d { color: var(--deck-d); }
.dk-jog-marker { position: absolute; left: 50%; top: 6px; width: 3px; height: 32px; border-radius: 2px;
  background: linear-gradient(currentColor, rgba(255,255,255,0.04)); box-shadow: 0 0 6px currentColor;
  transform: translateX(-50%); transform-origin: 50% 32px; pointer-events: none; }

.dk-jog-hub { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: #0c0c10; border: 1px solid #33333e; pointer-events: none; }
.dk-jog-reload { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #2a2a35; background: #0d0d11;
  color: #8a8a92; font-size: 0.82rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.dk-jog-reload.dk-acc-a { color: var(--deck-a); } .dk-jog-reload.dk-acc-b { color: var(--deck-b); }
.dk-jog-reload.dk-acc-c { color: var(--deck-c); } .dk-jog-reload.dk-acc-d { color: var(--deck-d); }
.dk-jog-reload:hover { border-color: currentColor; }

/* ---- Vinyl performance row (CUT / REV / BRK / SPIN) under the jog ---- */
.dk-vinyl { display: flex; gap: 3px; justify-content: center; margin-top: 8px; }
.dk-vinyl.dk-acc-a { --vacc: var(--deck-a); } .dk-vinyl.dk-acc-b { --vacc: var(--deck-b); }
.dk-vinyl.dk-acc-c { --vacc: var(--deck-c); } .dk-vinyl.dk-acc-d { --vacc: var(--deck-d); }
.dk-vinyl-btn { flex: 1 1 0; min-width: 0; padding: 4px 1px; border-radius: 5px; border: 1px solid #2a2a35;
  background: #0d0d11; color: #8a8a92; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; touch-action: none; user-select: none; transition: color 0.08s, border-color 0.08s, background 0.08s; }
.dk-vinyl-btn:hover { border-color: var(--vacc); color: #c8c8d0; }
.dk-vinyl-btn:active, .dk-vinyl-btn.dk-vinyl-on { color: #0b0b0e; background: var(--vacc); border-color: var(--vacc);
  box-shadow: 0 0 10px -1px var(--vacc); }

/* ---- Contextual level preset bars (sequence / rack / session) ---- */
.preset-bars-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.5rem; }
.preset-bar { display: inline-flex; align-items: center; gap: 0.35rem; }
.preset-bar-label { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
.preset-bar-select {
  padding: 0.2rem 0.35rem !important;
  min-width: 0 !important;
  max-width: none !important;
  background: #14141a !important;
  border-color: #2a2a32 !important;
  border-radius: 4px !important;
}
.instr-grid-container .preset-bar-select,
.instr-grid-container .ik-sel.preset-bar-select {
  min-width: 0 !important;
  width: auto !important;
}
.preset-bar-select .ik-sel-arrow {
  display: none !important;
}
.preset-bar-select .ik-sel-list {
  min-width: 120px !important;
  left: auto !important;
  right: 0 !important;
}
.preset-bar-save {
  padding: 0.2rem 0.35rem !important;
  background: #14141a !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 4px !important;
  color: var(--text, #e8e8ea) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.preset-bar-save:hover {
  border-color: #3e3e4a !important;
  background: #1a1a22 !important;
}
.preset-bar-scope { color: var(--muted); font-size: 0.66rem; font-style: italic; }

/* Common panel header: title/brand left, load/save (or any control) aligned right. */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.panel-head-l { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; min-width: 0; }
.panel-head-r { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 0.8rem; letter-spacing: 0.14em; }
.panel-head .sg-head-h2 { color: var(--deck-a); }
.session-head-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* The PROGRAMS stepper reuses the rack's BARS pager look, but sits inline in the session toolbar (drop the
   sequencer-specific left offset + bottom margin). */
.session-prog-pager { padding-left: 0; margin: 0; }

/* ---- Generic patch (gen_block patch) editor ---- */
.patch-panel-wrap { margin-top: 0.5rem; }
.patch-panel .patch-add-row { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.patch-node { padding: 0.4rem 0.45rem; }
.patch-node-top { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  margin-bottom: 0.3rem; }
.patch-node-badge { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; color: var(--accent-warm);
  background: rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 0.1rem 0.35rem; }
.patch-node-body { display: flex; flex-direction: column; gap: 0.25rem; }
.patch-node-body .deck-wave-grid { display: flex; gap: 0.2rem; }
.patch-node-body .gen-row select.sytrus-route-sel { max-width: 6.5rem; }
.patch-val { font-size: 0.58rem; color: var(--muted); min-width: 3.2rem; text-align: right;
  font-variant-numeric: tabular-nums; }
.patch-env-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.patch-env { padding: 0.4rem 0.45rem; }
.patch-env-top { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  margin-bottom: 0.3rem; }
.patch-env-target { display: inline-flex; align-items: center; gap: 0.15rem; }
.patch-dot { color: var(--accent-warm); font-weight: 800; }
.patch-seg-head { display: grid; grid-template-columns: 3rem 1fr 1fr 1.4rem; gap: 0.25rem;
  font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 0.2rem; }
.patch-seg-row { display: grid; grid-template-columns: 3rem 1fr 1fr 1.4rem; gap: 0.25rem;
  align-items: center; margin-bottom: 0.2rem; }
.patch-seg-row .sytrus-route-sel { max-width: none; }
.patch-expr { font-family: inherit; font-size: 0.58rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.12rem 0.25rem; min-width: 0; width: 100%; }

/* ---- Decomposed modular patch: per-module cards + inline routing ---- */
/* Module palette (the add-a-module bar). */
.patch-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.5rem; }
.patch-palette-label { font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin-right: 0.15rem; }
/* Masonry signal flow: node cards are ordered by signal-flow stage (sources → … → out) then packed into CSS
   multi-columns — multi-column lays items out IN ORDER (filling columns left→right), so we keep the rough
   left-to-right flow AND fill the vertical whitespace that a rigid grid/stage-columns leaves under short cards.
   `.patch-mod-grid` is the cable host (position:relative so the absolute SVG overlay covers node + env rows). */
.patch-mod-grid { position: relative; }
/* Matrix FM cable region: same concept — position:relative so the absolute SVG overlay covers op + filter cards. */
.mfm-cable-region { position: relative; }
.patch-node-masonry { columns: 12rem; column-gap: 0.5rem; position: relative; z-index: 1; }
.patch-mod { break-inside: avoid; margin: 0 0 0.5rem; padding: 0.45rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.35rem; position: relative; z-index: 1; }
/* Envelopes — their own wider masonry row (the seg editors need room); cables shown only in Edit. */
.patch-env-row { position: relative; z-index: 1; margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px dashed var(--border, #2a2a31); }
.patch-env-row-label { display: block; font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 0.4rem; }
.patch-env-row-cards { columns: 17rem; column-gap: 0.5rem; }

/* Read-only signal-flow cables: an SVG overlay UNDER the cards (z-index 0), drawn imperatively. opacity
   transitions so hover-dim/highlight fades in. */
.patch-cables { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
  overflow: visible; z-index: 0; }
.patch-cable { fill: none; stroke-width: 1.6; opacity: 0.55; transition: opacity 0.12s ease; }
.patch-cable-audio { stroke: #5fd06f; }                                  /* green = audio signal */
.patch-cable-mod { stroke: #e8945c; stroke-dasharray: 5 3; }             /* amber dashed = modulation */
.patch-cable-out { stroke: #8ab6ff; stroke-width: 2.4; opacity: 0.85; }  /* blue bold = reaches output */
/* Output / reverb sink tiles — cables terminate here so "what's audible" is obvious. Pack like any card. */
.patch-sink { break-inside: avoid; margin: 0.1rem 0 0.4rem; min-height: 1.45rem; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 6px; position: relative; z-index: 1; padding: 2px 18px; align-self: flex-start; }
.patch-sink-out { border: 1.5px solid #8ab6ff; background: rgba(138, 182, 255, 0.1); }
.patch-sink-rev { border: 1.5px solid #c9a6e0; background: rgba(201, 166, 224, 0.1); }
.patch-sink-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; color: var(--text, #e8e8ea); }
.patch-mod-head { display: flex; align-items: center; gap: 0.35rem; }
.patch-mod-badge { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; color: var(--panel, #141418);
  background: var(--accent-warm, #e8945c); border-radius: 3px; padding: 0.1rem 0.35rem; }
.patch-env-badge { background: #8ab6ff; }
.patch-mod-id { font-size: 0.58rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.patch-mod-x { margin-left: auto; }
/* Inline routing footer — each card owns where its signal goes. */
.patch-mod-routes { display: flex; flex-direction: column; gap: 0.25rem; border-top: 1px solid var(--border, #2a2a31);
  padding-top: 0.3rem; }
.patch-route { display: flex; align-items: center; gap: 0.25rem; }
.patch-route-arrow { color: var(--accent-warm, #e8945c); font-weight: 800; font-size: 0.7rem; }
.patch-route .sytrus-route-sel { max-width: none; flex: 1 1 auto; min-width: 0; }
.patch-route-param { flex: 0 1 4.5rem !important; }
.patch-route-vol { flex: 0 0 auto; }
.patch-route-empty { font-size: 0.55rem; color: var(--muted); font-style: italic; }
.patch-route-add { align-self: flex-start; font-family: inherit; font-size: 0.6rem; font-weight: 700;
  color: var(--accent-warm, #e8945c); background: transparent; border: 1px dashed var(--border, #2a2a31);
  border-radius: 4px; padding: 0.1rem 0.4rem; cursor: pointer; }
.patch-route-add:hover { border-color: var(--accent-warm, #e8945c); }
.patch-env .patch-seg-head { margin-top: 0.1rem; }
.patch-voicelen { margin-top: 0.6rem; }

/* Patch View ↔ Edit. View = clean read-only flow: hide the wiring chrome (route dropdowns/vol/×, +→, palette,
   remove ×, +seg) and show a compact "→ dest" label instead; the cables convey the routing. Edit reveals all. */
.patch-panel .sytrus-panel-head { display: flex; align-items: center; gap: 0.45rem; }
.patch-mode-toggle { margin-left: auto; display: inline-flex; }
.patch-route-dst-lbl { font-size: 0.62rem; color: var(--text, #d6d6dc); font-weight: 600;
  background: rgba(0, 0, 0, 0.25); border-radius: 3px; padding: 0.05rem 0.32rem; }
.patch-edit .patch-route-dst-lbl { display: none; }
.patch-view .patch-route .sytrus-route-sel,
.patch-view .patch-route-param,
.patch-view .patch-route-vol,
.patch-view .patch-route .sytrus-icon-btn,
.patch-view .patch-route-add,
.patch-view .patch-mod-x,
.patch-view .patch-palette,
.patch-view .patch-env .sytrus-add-btn,
.patch-view .patch-seg-row .sytrus-icon-btn,
.patch-view .patch-orphan-route .sytrus-icon-btn { display: none; }
/* In View, the route row collapses to just the arrow + dest label (no big gap). */
.patch-view .patch-route { gap: 0.2rem; }
/* Orphan / unrouted connections (src module deleted) — visible + removable so they're never stuck. */
.patch-orphans { margin-top: 0.5rem; }
.patch-orphan-route { gap: 0.35rem; color: var(--muted); }
.patch-orphan-src, .patch-orphan-dst { font-size: 0.6rem; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.25); border-radius: 3px; padding: 0.08rem 0.3rem; }
.patch-orphan-src { color: #e0794e; }

/* ---- Instrument editor ownership gate (read-only for a track you don't own / master-locked) ---- */
.instr-readonly { pointer-events: none; opacity: 0.5; }
.instr-readonly-host { pointer-events: none; opacity: 0.62; }
.instr-locked-hint { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 700;
  color: #f0b06a; background: rgba(232, 148, 92, 0.14); border: 1px solid rgba(232, 148, 92, 0.4);
  border-radius: 5px; padding: 0.2rem 0.45rem; margin: 0.1rem 0 0.4rem; }
.instr-lock-tag { font-size: 0.52rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: #f0b06a; border: 1px solid rgba(232, 148, 92, 0.45); border-radius: 3px; padding: 0.05rem 0.3rem;
  margin-left: 0.4rem; }

/* ---- Kick / Bass macro designers ---- */
.designer-pick-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0.1rem; }
.designer-pick-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); }
.macro-panel-wrap { margin-top: 0.5rem; }
.macro-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.macro-row { display: grid; grid-template-columns: 7rem 1fr 3.4rem; align-items: center; gap: 0.4rem; }
.macro-row-label { font-size: 0.62rem; color: var(--text); }
.macro-row input[type="range"] { width: 100%; }

/* Dim a generator sub-card whose layer is inactive (e.g. drum noise amount = 0). */
.gen-sub-dim { opacity: 0.5; }

/* ---- Unified voice picker (one selector: engines + macro designers) ---- */
.voice-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem; }
.voice-picker-head h2 { margin: 0; }
.voice-picker-sub { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.04em; }
.voice-picker-groups { display: flex; flex-direction: column; gap: 0.5rem; }
.voice-group { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 0.5rem; }
.voice-group-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); text-align: right; }
.voice-tiles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.voice-tile { font-family: inherit; font-size: 0.66rem; font-weight: 600; padding: 0.32rem 0.6rem;
  border-radius: 5px; border: 1px solid var(--border, #2a2a2a); background: var(--panel, #15151b);
  color: var(--text, #e8e8ea); cursor: pointer; }
.voice-tile:hover { border-color: #444; }
.voice-tile-active { border-color: var(--accent-warm, #e8945c); color: var(--accent-warm, #e8945c);
  background: rgba(232, 148, 92, 0.12); }

/* ---- Modular instrument stack (hardware-style module cards in a signal chain) ---- */
.instr-stack-head { margin-bottom: 0.6rem; }
.instr-stack-head h2 { margin: 0; }
.instr-stack-sub { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.04em; }
/* Horizontal rack: instrument modules sit side by side as small boxes and wrap. */
.instr-modules-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.instr-module { border: 1px solid var(--border, #14141c); border-radius: 2px;
  background: rgba(0, 0, 0, 0.05); display: flex; flex-direction: column;
  flex: 1 1 18rem; min-width: 16rem; max-width: 30rem; }
/* min-width:0 lets the body shrink to its flex track so long content (the desc, wide designers)
   wraps/clips instead of stretching the column and breaking the row. */
.instr-module .instr-module-body { flex: 1 1 auto; min-width: 0; }
/* Modular designers (Matrix FM / Patch / macros) get a full-width box. */
.instr-module-wide { flex: 100 1 36rem; max-width: 100%; }
.instr-module-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border, #14141c);
  border-left: none; border-radius: 0;
  background: transparent; }
.instr-module-title { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text, #e8e8ea); }
.instr-module-tpl { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6rem;
  color: var(--accent-warm, #e8945c); letter-spacing: 0.04em; }
.instr-module-body { padding: 0.35rem 0.4rem; }
/* Designer ⇄ Raw segmented toggle in each module header */
.instr-module-toggle { display: inline-flex; border: 1px solid var(--border, #2a2a2a); border-radius: 4px;
  overflow: hidden; margin-left: auto; margin-right: 0.5rem; }
.imt-btn { font-family: inherit; font-size: 0.56rem; font-weight: 600; padding: 0.12rem 0.4rem; border: none;
  background: transparent; color: var(--muted); cursor: pointer; }
.imt-btn.imt-on { background: rgba(232, 148, 92, 0.18); color: var(--accent-warm, #e8945c); }
/* Reusable rich deck editor (RichTplEditor) — the SAME highlight stack as the main deck editor, sized for the
   inline module "Raw" views: border/background on the stack, the transparent textarea over the highlighted <pre>.
   Only min-height is overridden so font metrics stay identical (alignment of the two layers must match). */
.rich-tpl-slot { display: block; width: 100%; }
.rich-tpl-stack.tpl-song-mirror-stack { min-height: 0; background: var(--bg, #0e0e12);
  border: 1px solid var(--border, #2a2a2a); border-radius: 5px; overflow: hidden; }
.rich-tpl-stack .tpl-song-input-layer { min-height: 8rem; }
.rich-tpl-stack .tpl-song-input-layer,
.rich-tpl-stack .tpl-song-highlight-layer {
  font-size: 10px !important;
}

/* ---- Instrument kit: rotary knobs, wave-icon pickers, envelope display, reskinned cards ---- */
.ik-knob { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; width: 4rem; }
.ik-knob-dial { width: 2.9rem; height: 2.9rem; cursor: ns-resize; touch-action: none; user-select: none; }
.ik-knob-track { stroke: rgba(255, 255, 255, 0.12); stroke-width: 3.4; stroke-linecap: round; }
.ik-knob-val { stroke-width: 3.4; stroke-linecap: round; }
.ik-knob-label { font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  white-space: nowrap; }
.ik-knob-value { font-size: 0.62rem; font-variant-numeric: tabular-nums; color: var(--text, #e8e8ea); }
.ik-knob-value-inside { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; font-size: 10px; pointer-events: none !important; dominant-baseline: middle; text-anchor: middle; paint-order: stroke fill; stroke: var(--bg); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.ik-knob-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 0.35rem; align-items: flex-start; }
/* Detent dots for stepped selector knobs (octave / arp / chord) — unlit positions are faint,
   the current one is filled with the accent colour inline. */
.ik-knob-detent { fill: rgba(255, 255, 255, 0.28); transition: fill 0.08s ease; }
.ik-knob-detent-on { filter: drop-shadow(0 0 1.4px rgba(255, 255, 255, 0.25)); }

/* Pitch module: the three stepped selector knobs sit in one row filling the card width. */
.instr-pitch-knobs { display: flex; gap: 0.35rem; justify-content: space-around; align-items: flex-start;
  flex-wrap: wrap; padding: 0.1rem 0; }
.instr-pitch-knobs .ik-knob-value { white-space: nowrap; font-size: 0.56rem; }

/* Compact knob (dense panels) */
.ik-knob-sm { width: 3rem; }
.ik-knob-sm .ik-knob-dial { width: 2.1rem; height: 2.1rem; }
.ik-knob-sm .ik-knob-label { font-size: 0.48rem; }
.ik-knob-sm .ik-knob-value { font-size: 0.56rem; }

/* Mini knob (dense cells with their own text label) */
.ik-knob-xs { width: 2.1rem; }
.ik-knob-xs .ik-knob-dial { width: 1.6rem; height: 1.6rem; }
.ik-knob-xs .ik-knob-label { display: none; }
.ik-knob-xs .ik-knob-value { font-size: 0.5rem; }

/* Generic discrete-choice pill row (e.g. the Aahs vowel picker). Active state is accent-tinted inline. */
.gen-pick-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.gen-pick-pill {
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.gen-pick-pill:hover { color: var(--text, #e8e8ea); }

/* Arco string-family picker (violin / fiddle / viola / cello / bass) */
.arco-voice-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.arco-voice-pill {
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.arco-voice-pill:hover { border-color: rgba(196, 122, 78, 0.6); color: var(--text, #e8e8ea); }
.arco-voice-pill-on {
  background: rgba(196, 122, 78, 0.18);
  border-color: #c47a4e;
  color: #e3a877;
}

.ik-wave-row { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.ik-wave-btn {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2c2c32 0%, #1c1c22 100%);
  border: 1px solid #0a0a0a;
  border-top-color: #3c3c44;
  border-radius: 5px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.6);
  cursor: pointer;
  padding: 0;
  transition: transform 0.05s ease, box-shadow 0.05s ease, border-top-color 0.05s ease, background 0.05s ease;
}

.ik-wave-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-top-color: #2c2c32;
  background: #1a1a20;
}

.ik-wave-btn-on {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #222228 0%, #16161c 100%);
  border-top-color: #2a2a30;
}
.ik-wave-img { width: 1.15rem; height: 1.15rem; display: block; pointer-events: none; }

.ik-env { width: 100%; height: 3.2rem; display: block; }

.ik-card { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.ik-card-h { display: none !important; }
/* Matrix FM / Patch collapse to this launcher in their grid card; it opens their full editor in a modal. */
.gen-open-modal { width: 100%; padding: 10px 8px; border: 1px dashed var(--border, #2a2a2a); border-radius: 5px; background: rgba(255, 255, 255, 0.03); color: var(--text, #e8e8ea); cursor: pointer; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gen-open-modal:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--accent, #22d3ee); }
/* The matrix/patch editor is a UI toggle confined to the instrument area, NOT a screen modal: the backdrop is
   absolute within .instr-stack-host (the instrument region) and the panel fills it exactly. */
.instr-stack-host { position: relative; }
/* Non-blocking prompt/alert modal (replaces window.prompt / window.alert — see PromptModal.tish). */
.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 10, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  backdrop-filter: blur(1.5px);
}
.ui-modal {
  background: var(--bg, #0e0e12);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  padding: 16px 16px 14px;
  width: min(420px, 90vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ui-modal-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text, #e8e8ea);
}
.ui-modal-msg {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted, #9a9aa4);
}
.ui-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  background: #14141a;
  border: 1px solid #2a2a32;
  border-radius: 5px;
  color: var(--text, #e8e8ea);
  font-family: inherit;
  font-size: 0.8rem;
  outline: none;
}
.ui-modal-input:focus {
  border-color: var(--accent, #22d3ee);
}
.ui-modal-textarea {
  min-height: 9rem;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
}
.ui-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ui-modal-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  border: 1px solid #2a2a32;
  background: #14141a;
  color: var(--text, #e8e8ea);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.ui-modal-btn:hover {
  background: #1c1c24;
}
.ui-modal-ok {
  border-color: var(--accent, #22d3ee);
  color: var(--accent, #22d3ee);
}
.ui-modal-ok:hover {
  background: rgba(34, 211, 238, 0.14);
}

/* Scoped to the center area (.daw-main-stack is position:relative) so the patch editor fills instruments +
   sequencer + session, leaving the sidebars/header/footer visible — same full-panel takeover look as the
   sequencer's EUCLID/piano overlays (.sg-piano-takeover). */
.gen-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.86); display: flex; align-items: stretch; justify-content: stretch; padding: 0; z-index: 200; }
.gen-modal { background: var(--panel-2, #0a0a0c); border: none; border-radius: 0; width: 100%; height: 100%; max-width: none; max-height: 100%; display: flex; flex-direction: column; }
/* Head + close button match .sg-piano-takeover-head / .sg-piano-takeover-close (the EUCLID & GENERATE overlay). */
.gen-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #1c1c22; flex-shrink: 0; }
.gen-modal-title { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; color: var(--accent, #22d3ee); }
.gen-modal-close { background: transparent; border: 1px solid #2a2a32; border-radius: 4px; color: var(--text, #e8e8ea); cursor: pointer; width: 24px; height: 24px; font-size: 0.85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.gen-modal-close:hover { background: rgba(255, 255, 255, 0.08); }
/* Generic instrument-designer button (FORMANT vowels, lyric pads, etc.) — had NO rule, so it fell back to
   the browser's light default. Match the app's dark pill buttons (.set-btn / .code-debug-btn): dark fill,
   subtle border, accent on hover. Inline flex/padding/font-size from the JSX still apply. */
.ik-btn {
  background: var(--panel, #15151b);
  color: var(--text, #e8e8ea);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.ik-btn:hover { border-color: var(--accent, #22d3ee); color: var(--accent, #22d3ee); }
.ik-btn:active { background: rgba(255, 255, 255, 0.06); }
.gen-modal-body { padding: 5px 8px; overflow-y: auto; }
/* The modal header already shows the instrument name — drop the panel's own duplicate "MATRIX FM" / "PATCH"
   title (keep the rest of its header, e.g. the patch View/Edit toggle). */
.gen-modal .sytrus-panel-title { display: none; }
/* Inside the modal the panel is NOT its own card — strip the duplicate border / background / padding / margin
   so the content sits flush in the modal's own frame (no card-in-a-card). The head row, now title-less, also
   loses its divider + spacing (Patch keeps its View/Edit toggle there). */
.gen-modal .sytrus-panel { border: none !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
.gen-modal .matrixfm-panel-wrap,
.gen-modal .patch-panel-wrap,
.gen-modal .instr-params-wrap { margin: 0 !important; padding: 0 !important; }
.gen-modal .sytrus-panel-head { margin-bottom: 0.3rem; padding-bottom: 0; border-bottom: none; }
.ik-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
@media (max-width: 720px) { .ik-cols { grid-template-columns: 1fr; } }
.ik-wave-pair { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; margin-bottom: 0.6rem; }
.ik-wave-lbl { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.gen-params.ik-cols { border: none; padding: 0; }

/* GEN label colour — the GENERATE section header in the Euclid & Generate takeover (.sg-eg-* styles live up
   near the other takeover-body rules). The old static .sg-euclid / .sg-gen-btn toolbar was removed when Euclid
   & Generate became a takeover overlay. */
.sg-gen-label { color: #c08bf0; }

/* ---- deck Playback / Playlist timeline (the recorded deck stream over time) ------------------------- */
.seq-session-wrap { display: flex; flex-direction: column; gap: 10px; }
.seq-arrange { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start; overflow: hidden; }
.pl-view { flex: 1; min-width: 0; background: var(--panel-2, #0a0a0c); padding: 0; display: flex; align-items: center; gap: 12px; }
.pl-head { display: flex; align-items: center; gap: 10px; min-height: 20px; flex-shrink: 0; }
.pl-title { font-size: 10px; letter-spacing: 0.16em; color: var(--accent-green); font-weight: 600; }
.pl-status { font-size: 10px; color: var(--muted); margin-left: auto; }
.pl-rec { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px;
  background: #14141a; border: 1px solid #2a2a32; border-radius: 5px; color: var(--muted); font-size: 10px;
  font-weight: 600; letter-spacing: 0.08em; cursor: pointer; font-family: inherit; }
.pl-rec:hover { border-color: #3a3a44; color: var(--text); }
.pl-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #6a2230; box-shadow: none; }
.pl-rec-on { border-color: #e0556e; color: #ff7a8f; }
.pl-rec-on .pl-rec-dot { background: #ff3b57; box-shadow: 0 0 7px rgba(255,59,87,0.85);
  animation: pl-rec-blink 1s steps(2, start) infinite; }
@keyframes pl-rec-blink { 50% { opacity: 0.35; } }
.pl-btn { height: 20px; padding: 0 9px; background: #14141a; border: 1px solid #2a2a32; border-radius: 5px;
  color: var(--text); font-size: 10px; cursor: pointer; }
.pl-btn:hover { border-color: #3a3a44; background: #1b1b22; }
.pl-btn:disabled { opacity: 0.4; cursor: default; }
.pl-btn-ico { width: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; }
.pl-replay-select { height: 20px; background: #14141a; border: 1px solid #2a2a32; border-radius: 5px;
  color: var(--text); font-size: 10px; padding: 0 6px; max-width: 140px; }
.pl-scroll { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: hidden; }
.pl-scroll::-webkit-scrollbar { height: 9px; }
.pl-scroll::-webkit-scrollbar-track { background: transparent; }
.pl-scroll::-webkit-scrollbar-thumb { background: #353b47; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.pl-scroll::-webkit-scrollbar-thumb:hover { background: #4a5161; }
.pl-grid { position: relative; }
/* Timeline is OVERLAID on the waveform (absolute, spanning the wave's full height), not a row above it —
   so it adds zero vertical height. left:76px clears the MIX lane label so ticks line up with the wave. */
.pl-ruler { position: absolute; top: 0; bottom: 0; left: 0; z-index: 5; pointer-events: none; }
.pl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid-line, #18181d); }
.pl-tick-major { background: #26262e; }
.pl-tick-num { position: absolute; top: 0; left: 3px; font-size: 9px; color: var(--muted); text-shadow: 0 0 3px #000, 0 0 2px #000; }
.pl-rows { display: flex; flex-direction: column; gap: 3px; padding-top: 0; }
.pl-lane { display: flex; align-items: stretch; gap: 4px; }
.pl-lane-label { flex: 0 0 72px; width: 72px; height: 20px; display: flex; align-items: center;
  padding: 0 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; background: #0c0c10;
  border: 1px solid #1c1c22; border-radius: 4px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; position: sticky; left: 0; z-index: 6; }
.pl-lane-track { position: relative; height: 20px; background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(4 * 26px - 1px),
  var(--grid-line, #18181d) calc(4 * 26px - 1px), var(--grid-line, #18181d) calc(4 * 26px));
  border-radius: 3px; }
.pl-evt { position: absolute; top: 2px; height: 16px; width: 9px; border: 1px solid; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.pl-evt-count { position: absolute; right: 4px; top: 3px; font-size: 9px; color: #44444c; }
.pl-empty-hint { font-size: 11px; color: var(--muted); padding: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.pl-playhead { position: absolute; top: 0; bottom: 0; left: 0; opacity: 0; width: 2px;
  background: var(--accent-green); box-shadow: 0 0 6px rgba(124,255,124,0.7); pointer-events: none;
  z-index: 5; }
/* Per-deck summarized waveforms — one filled mirror envelope per deck, in the deck colour, drawn imperatively
   to a <canvas> by Scope.drawSetWaveLane (sized + painted there, off the vdom). The track div keeps the 4-bar
   gridline background under the transparent canvas. */
.pl-wave-cv { display: block; height: 100%; width: 100%; }
.pl-deck-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; border-left: 3px solid;
  padding-left: 7px; justify-content: flex-start; }

/* ---- I/O Rack (multi-output device pickers) + per-deck CUE -------------------------------------- */
.io-rack { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; padding: 0 10px;
  height: 26px; }
/* MIDI strip — mirrors the I/O Rack styling. */
.midi-rack { position: relative; display: inline-flex; align-items: center; }
.midi-rack-title { font-size: 10px; letter-spacing: 0.16em; color: var(--accent-green); font-weight: 600; }
/* The footer MIDI control is a single button; its panel lives in a popover above it. */
.midi-btn { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 11px;
  background: #14141a; border: 1px solid #2a2a32; border-radius: 5px; color: var(--text); font-size: 10px;
  font-weight: 600; letter-spacing: 0.12em; cursor: pointer; }
.midi-btn:hover { border-color: #3a3a44; }
.midi-btn-on { border-color: var(--accent-green); color: var(--accent-green); }
.midi-btn-open { border-color: var(--accent, #22d3ee); color: var(--accent, #22d3ee); }
.midi-popover { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 1000;
  background: var(--bg, #0e0e12); border: 1px solid var(--border, #2a2a2a); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-width: 280px; max-width: 360px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); }
.midi-popover-top { display: flex; align-items: center; gap: 8px; }
.midi-popover-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 9rem; overflow-y: auto; overflow-x: hidden; }
.midi-dot { width: 7px; height: 7px; border-radius: 50%; background: #33333c; }
.midi-dot-on { background: var(--accent-green); box-shadow: 0 0 6px rgba(124,255,124,0.6); }
.midi-select { height: 20px; max-width: 150px; background: #14141a; border: 1px solid #2a2a32;
  border-radius: 4px; color: var(--text); font-size: 10px; padding: 0 4px; }
.midi-assign { border-color: #f59e0b; color: #ffd27a; }
.midi-enable, .midi-learn { height: 20px; padding: 0 9px; background: #14141a; border: 1px solid #2a2a32;
  border-radius: 4px; color: #9a9aa6; font-size: 10px; letter-spacing: 0.08em; cursor: pointer; }
.midi-enable:hover, .midi-learn:hover { border-color: #3a3a44; color: var(--text); }
.midi-learn-on { border-color: #f59e0b; color: #ffd27a; background: rgba(245,158,11,0.16); }
.midi-hint { font-size: 10px; color: #c9a16a; font-style: italic; }
.midi-kbd-hint { font-size: 10px; color: #5a5a66; }
.midi-map-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; color: #9a9aa6;
  background: #16161c; border: 1px solid #26262e; border-radius: 3px; padding: 1px 3px 1px 5px; }
.midi-map-x { background: none; border: none; color: #6a6a72; cursor: pointer; font-size: 11px; line-height: 1; padding: 0 1px; }
.midi-map-x:hover { color: #ff7a7a; }
.io-rack-title { font-size: 10px; letter-spacing: 0.16em; color: var(--accent-green); font-weight: 600; }
.io-rack-off { display: inline-flex; align-items: center; margin-left: 14px; padding: 0 10px; height: 26px;
  font-size: 10px; color: var(--muted); border: 1px dashed #2a2a32; border-radius: 6px; }
.io-slot { display: inline-flex; align-items: center; gap: 5px; }
.io-slot-label { font-size: 9px; letter-spacing: 0.08em; color: var(--muted); }
.io-slot-hp { color: #e8b45c; }
.io-select { height: 20px; max-width: 150px; background: #14141a; border: 1px solid #26262e; border-radius: 4px;
  color: var(--text); font-size: 10px; padding: 0 4px; }
.io-cue input[type="range"] { width: 64px; accent-color: #e8b45c; }
.io-refresh { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: #14141a; border: 1px solid #26262e; border-radius: 4px; color: var(--text); cursor: pointer;
  padding: 0; font-size: 12px; }
.io-refresh:hover { border-color: #34343e; }
.io-autosync { height: 20px; padding: 0 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  background: #14141a; border: 1px solid #26262e; border-radius: 4px; color: var(--muted); cursor: pointer; }
.io-autosync-on { background: rgba(124, 255, 124, 0.16); border-color: var(--accent-green, #7cff7c);
  color: var(--accent-green, #7cff7c); }
.io-draw-off { background: rgba(232, 148, 92, 0.16); border-color: var(--accent-warm, #e8945c);
  color: var(--accent-warm, #e8945c); }
.dk-cue { height: 26px; padding: 6px 16px; margin: 5px 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  background: #161118; border: 1px solid #3a2a1e; border-radius: 4px; color: #8a6a4a; cursor: pointer; }
/* Intentionally NO :hover rule — hovering must not change the colour. The button illuminates only when
   actually engaged via .dk-cue-on (which would otherwise be overridden by a .dk-cue:hover on hover). */
.dk-cue-on { background: rgba(232, 148, 92, 0.18); border-color: #e8945c; color: #ffba78;
  box-shadow: 0 0 7px rgba(232, 148, 92, 0.5); }

/* ---- Custom software dropdown (IkSelect) ---- */
.ik-sel {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  background: #14141a;
  border: 1px solid #2a2a32;
  border-radius: 6px;
  color: var(--text, #e8e8ea);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  min-width: 3.5rem;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.ik-sel:hover {
  border-color: #3e3e4a;
  background: #1a1a22;
}
.ik-sel-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-sel-arrow { font-size: 0.6rem; color: var(--muted, #777); flex-shrink: 0; }
.ik-sel-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: #18181f;
  border: 1px solid #34343e;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  z-index: 120;
  padding: 3px 0;
  scrollbar-width: thin;
  scrollbar-color: #3a3a44 transparent;
}
.ik-sel-opt {
  padding: 0.32rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text, #e8e8ea);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.06s ease;
}
.ik-sel-opt:hover {
  background: rgba(255, 255, 255, 0.08);
}
.ik-sel-opt-on {
  background: rgba(255, 255, 255, 0.05);
}

/* Option rows with a delete affordance: text on the left, a ✕ on the right. */
.ik-sel-opt-del-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ik-sel-opt-del-row .ik-sel-opt-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ik-sel-opt-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #6a6a74;
  font-size: 0.75rem;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  cursor: pointer;
}
.ik-sel-opt-del:hover {
  background: rgba(255, 80, 80, 0.18);
  color: #ff6b6b;
}

.ik-sel-opt-header {
  padding: 0.28rem 0.6rem;
  font-size: 0.58rem;
  font-weight: 800;
  color: #5a5a64;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: default;
  user-select: none;
}

/* ---- Instrument stack compact default styles (applied to single & grid view) ---- */
.instr-stack-panel {
  padding: 8px 10px !important;
  margin: 4px 0 !important;
}

.instr-stack-panel .instr-desc {
  display: none !important;
}

.instr-stack-panel .ik-env,
.instr-stack-panel .ik-env-svg {
  height: 26px !important;
}

/* 3x2 Grid layout for active single deck instruments */
.instr-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px !important;
  width: 100%;
  align-items: stretch;
}

/* Each instrument panel's header row can't shrink below ~290px, so three columns need a wide main area.
   Below that, drop to two columns so the grid never overflows into the CO-DJ sidebar. */
@media (max-width: 1500px) {
  .instr-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Header one-line floor guard — below 1620px shave the last few px so the top bar holds ONE line down to
   ~1500px. It keeps flex-wrap:wrap, so anything narrower still degrades gracefully to two rows rather than
   clipping. */
@media (max-width: 1620px) {
  .daw-header { gap: 0.5rem; }
  .transport-bar { gap: 0.4rem; }
  .mode-seg { padding: 0.4rem 0.45rem; }
}

/* Empty instrument slots filling out the grid — a slightly-different background marks this as a reserved
   zone (something fun goes here later). Faint so it reads as "available", not as a broken/missing panel. */
.instr-grid-container .instr-empty-slot {
  min-height: 120px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px dashed rgba(255, 255, 255, 0.055);
}

/* Compact rules when instruments are inside the grid */
.instr-grid-container .instr-stack-panel {
  margin: 0 !important;
  padding: 4px 0px !important;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: none !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: 0 !important;
}

.instr-grid-container .panel-head {
  margin-bottom: 2px !important;
  gap: 4px !important;
}

.instr-grid-container .panel-head h2 {
  font-size: 0.68rem !important;
  margin: 0 !important;
}

.instr-grid-container .panel-head-l {
  gap: 4px !important;
}

.instr-grid-container .panel-head-r {
  gap: 4px !important;
}

.instr-grid-container .preset-bar {
  gap: 0.2rem !important;
}

.instr-grid-container .preset-bar-label {
  font-size: 0.6rem !important;
}

.instr-grid-container .ik-sel {
  padding: 0.12rem 0.35rem !important;
  font-size: 0.65rem !important;
  min-width: 2.8rem !important;
  gap: 0.2rem !important;
}

.instr-grid-container .preset-bar-save {
  padding: 0.12rem 0.35rem !important;
  font-size: 0.65rem !important;
}

.instr-grid-container .btn-deck {
  padding: 0.2rem 0.35rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: auto !important;
}
/* The header link (SYNC/STORE) button matches the thinnest 17px chip — flat vertical padding, fixed height. */
.instr-grid-container .btn-deck.btn-deck-outline {
  height: 17px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* SOUND and FX stack as two ROWS (each full panel width) instead of two side-by-side columns. SOUND on top,
   FX below, divided by a faint rule. Full width per row lets FX sit as a single horizontal strip of knobs. */
.instr-grid-container .instr-modules-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px !important;
  align-items: stretch !important;
}

.instr-grid-container .instr-module {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 !important;
}
.instr-grid-container .instr-module:last-child {
  border-bottom: none !important;
}

/* Code (raw deck) view takes over the whole panel: hide the sibling row, let the editor fill the width + grow. */
.instr-grid-container .instr-modules-row:has(.instr-module-raw-active) .instr-module:not(.instr-module-raw-active) {
  display: none !important;
}
.instr-grid-container .instr-module-raw-active {
  border-bottom: none !important;
}
.instr-grid-container .instr-module-raw-active .instr-module-body {
  padding: 3px 0 0 !important;
}
.instr-grid-container .instr-module-raw-active .rich-tpl-stack .tpl-song-input-layer {
  min-height: 12rem !important;
}

.instr-grid-container .instr-module-head {
  padding: 2px 0px !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
}

.instr-grid-container .instr-module-title {
  font-size: 0.6rem !important;
  letter-spacing: 0.06em !important;
}

.instr-grid-container .instr-module-tpl {
  font-size: 0.55rem !important;
}

.instr-grid-container .instr-module-body {
  padding: 3px 0px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.instr-grid-container .ik-card {
  padding: 3px 5px !important;
  border-radius: 4px !important;
}

.instr-grid-container .ik-card-h {
  margin-bottom: 2px !important;
  gap: 3px !important;
  font-size: 0.5rem !important;
}

.instr-grid-container .ik-cols {
  gap: 4px !important;
}

/* Compact Knobs inside active deck grid */
.instr-grid-container .ik-knob {
  width: 2.7rem !important;
  gap: 0px !important;
}
.instr-grid-container .ik-knob-dial {
  width: 1.7rem !important;
  height: 1.7rem !important;
}
.instr-grid-container .ik-knob-label {
  font-size: 0.44rem !important;
}
.instr-grid-container .ik-knob-value {
  font-size: 0.52rem !important;
}

/* Compact wave picker */
.instr-grid-container .ik-wave-row {
  gap: 2px !important;
}
.instr-grid-container .ik-wave-btn {
  width: 1.35rem !important;
  height: 1.35rem !important;
  border-radius: 3px !important;
}
.instr-grid-container .ik-wave-img {
  width: 0.8rem !important;
  height: 0.8rem !important;
}
.instr-grid-container .ik-wave-pair {
  margin-bottom: 0.2rem !important;
  gap: 1px !important;
}

/* Env display compact */
.instr-grid-container .ik-env,
.instr-grid-container .ik-env-svg {
  height: 22px !important;
}

/* Hide descriptions */
.instr-grid-container .instr-desc {
  display: none !important;
}

/* Scroll limits for larger panels */
.instr-grid-container .matrixfm-panel-wrap,
.instr-grid-container .patch-panel-wrap,
.instr-grid-container .macro-panel-wrap {
  max-height: 110px !important;
  overflow-y: auto;
}

.instr-grid-container .instr-params-wrap {
  margin-bottom: 2px !important;
}

.instr-grid-container .instr-pitch-knobs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 2px !important;
  padding: 0 !important;
}

/* Instrument Header micro-fader and scope */
.instr-head-mixer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.instr-head-mixer .dk-fader-wave {
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.instr-head-mixer .dk-stem-wave {
  height: 20px !important;
  /* Fill the container width — a fixed 40px canvas left it sitting in a 64px box with dead space on the
     right (the "cut off / misaligned" look). drawMiniWave sizes the bitmap to the canvas's CSS width, so
     100% makes the trace span the whole box. Punchier via the filter below (the shared-worker scope canvas
     keys on the channel id that also feeds the deck waveform, so intensity is dialed here in CSS). */
  width: 100% !important;
  border: none !important;
  border-radius: 3px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  display: block !important;
  filter: brightness(1.55) saturate(1.4) contrast(1.12) !important;
}
.instr-head-mixer .dk-lever {
  height: 24px !important;
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 3px !important;
}
.instr-head-mixer .dk-lever-track {
  width: 14px !important;
  border-radius: 7px !important;
  background: #08080c !important;
  border: 1px solid #1c1c24 !important;
}
.instr-head-mixer .dk-lever-fill {
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  border-radius: 5px !important;
}
.instr-head-mixer .dk-lever-handle {
  height: 6px !important;
  left: -1px !important;
  right: -1px !important;
  border-radius: 2px !important;
  border-width: 1px !important;
  background: #14141a !important;
}
.instr-head-mixer .dk-lever-handle-line {
  display: none !important;
}
.instr-head-mixer .dk-lever-meter {
  width: 4px !important;
  border-radius: 2px !important;
  background: #08080c !important;
  border: 1px solid #181820 !important;
}
.instr-head-mixer .dk-fader-db {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  min-width: 32px !important;
  text-align: right !important;
  color: var(--muted, #666) !important;
}

/* Voice dropdown styled as a badge */
.voice-badge-select {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  /* Match the thinnest header chip (17px); flat padding + line-height:1 so the label centres in that height. */
  height: 17px !important;
  padding: 0 0.32rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: opacity 0.1s ease !important;
}
.voice-badge-select:hover {
  opacity: 0.85 !important;
}
.voice-badge-select .ik-sel-arrow {
  display: none !important;
}
.voice-badge-select .ik-sel-label {
  white-space: nowrap !important;
}
.voice-badge-select .ik-sel-list {
  min-width: 140px !important;
}

/* Custom styling for native HTML elements */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input:not([type]),
.bpm-input,
.codj-input {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.72rem !important;
  padding: 0.28rem 0.55rem !important;
  background: #14141a !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 4px !important;
  color: var(--text, #e8e8ea) !important;
  outline: none !important;
  transition: border-color 0.1s ease, background 0.1s ease !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
.bpm-input:focus,
.codj-input:focus {
  border-color: var(--accent-warm, #e8945c) !important;
  background: #1a1a22 !important;
  box-shadow: 0 0 0 1px rgba(232, 148, 92, 0.2) !important;
}

textarea:not(.tpl-song-input-layer) {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.72rem !important;
  padding: 0.28rem 0.55rem !important;
  background: #14141a !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 4px !important;
  color: var(--text, #e8e8ea) !important;
  outline: none !important;
  transition: border-color 0.1s ease, background 0.1s ease !important;
}

textarea:not(.tpl-song-input-layer):focus {
  border-color: var(--accent-warm, #e8945c) !important;
  background: #1a1a22 !important;
  box-shadow: 0 0 0 1px rgba(232, 148, 92, 0.2) !important;
}

select {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.72rem !important;
  padding: 0.28rem 1.5rem 0.28rem 0.55rem !important;
  background: #14141a !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 4px !important;
  color: var(--text, #e8e8ea) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.1s ease, background 0.1s ease !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 0.75rem !important;
}

select:hover {
  border-color: #3e3e4a !important;
  background-color: #1a1a22 !important;
}

select:focus {
  border-color: var(--accent-warm, #e8945c) !important;
  background-color: #1a1a22 !important;
  box-shadow: 0 0 0 1px rgba(232, 148, 92, 0.2) !important;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 0.85rem !important;
  height: 0.85rem !important;
  background: #14141a !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.1s ease, border-color 0.1s ease !important;
  vertical-align: middle !important;
  margin: 0 0.35rem 0 0 !important;
}

input[type="checkbox"]:hover {
  border-color: #3e3e4a !important;
  background: #1a1a22 !important;
}

input[type="checkbox"]:focus {
  outline: none !important;
  border-color: var(--accent-warm, #e8945c) !important;
  box-shadow: 0 0 0 1px rgba(232, 148, 92, 0.2) !important;
}

input[type="checkbox"]:checked {
  background: var(--accent-warm, #e8945c) !important;
  border-color: var(--accent-warm, #e8945c) !important;
}

input[type="checkbox"]:checked::after {
  content: "✓" !important;
  color: #0b0b0e !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
}

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 0.85rem !important;
  height: 0.85rem !important;
  background: #14141a !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.1s ease, border-color 0.1s ease !important;
  vertical-align: middle !important;
  margin: 0 0.35rem 0 0 !important;
}

input[type="radio"]:hover {
  border-color: #3e3e4a !important;
  background: #1a1a22 !important;
}

input[type="radio"]:focus {
  outline: none !important;
  border-color: var(--accent-warm, #e8945c) !important;
  box-shadow: 0 0 0 1px rgba(232, 148, 92, 0.2) !important;
}

input[type="radio"]:checked {
  border-color: var(--accent-warm, #e8945c) !important;
}

input[type="radio"]:checked::after {
  content: "" !important;
  width: 0.35rem !important;
  height: 0.35rem !important;
  background: var(--accent-warm, #e8945c) !important;
  border-radius: 50% !important;
}

/* Range sliders thumb interactions */
input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--accent-warm, #e8945c) !important;
  box-shadow: 0 0 0 2px rgba(232, 148, 92, 0.45) !important;
}
input[type="range"]::-webkit-slider-thumb:active {
  background: var(--accent-warm, #e8945c) !important;
  transform: scale(1.1) !important;
}
input[type="range"]::-moz-range-thumb:hover {
  background: var(--accent-warm, #e8945c) !important;
}
input[type="range"]::-moz-range-thumb:active {
  background: var(--accent-warm, #e8945c) !important;
  transform: scale(1.1) !important;
}

/* Inline track/instrument name editor styling */
input[type="text"].instr-name-input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 90px !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
input[type="text"].instr-name-input:hover {
  background: transparent !important;
  border: none !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}
input[type="text"].instr-name-input:focus {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--accent-warm, #e8945c) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Credit + Docs link under the Deckard logo in the top bar. */
.logo-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.made-by-credit {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--muted, #55555e);
  opacity: 0.7;
  user-select: none;
  white-space: nowrap;
}
.made-by-credit:hover { opacity: 1; }
.made-by-credit a { color: inherit; text-decoration: none; }
.made-by-credit a:hover { color: var(--accent, #e8945c); text-decoration: underline; }
.made-by-credit a.docs-link { color: var(--mint, #7cff7c); }
.made-by-credit a.docs-link:hover { color: var(--mint, #7cff7c); text-decoration: underline; }
.made-by-sep { opacity: 0.6; }

/* Deck-cycler chip is non-interactive in a co-DJ session (deck↔player mapping is fixed) */
.sg-deck-chip-locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }

/* Host "leave or merge decks" inline prompt in the Co-DJ panel */
.codj-deck-prompt {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--accent-warm, #e8945c);
  border-radius: 4px;
  background: rgba(232, 148, 92, 0.08);
}
.codj-deck-prompt-msg { font-size: 11px; color: var(--text, #cccccc); line-height: 1.35; margin-bottom: 7px; }
.codj-deck-prompt-btns { display: flex; gap: 6px; }
.btn-codj-primary { background: var(--accent-warm, #e8945c); color: #111111; border-color: var(--accent-warm, #e8945c); font-weight: 600; }

/* Per-track load (folder dropdown) icon in the sequencer row tool group — sized to match the .sg-tog icons */
.sg-track-load { width: 17px; min-width: 17px; height: 17px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sg-track-load .ik-sel-label { padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sg-track-load .ik-sel-arrow { display: none; }

/* Per-track row tools (sequencer rows only) wrap into 2 rows instead of one long strip */
.sg-row .sg-gutter-ctl { flex-wrap: wrap; max-width: 80px; row-gap: 3px; }

/* Session "Stop all clips" is now a compact square stop icon (was a wide text button) */
.btn-session-stop-all { padding: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; }

/* Fullscreen toggle — pinned to the very top-right corner of the app */
.daw-fullscreen-btn { position: absolute; top: 7px; right: 8px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: #14141a; border: 1px solid #2a2a32; border-radius: 5px; color: var(--muted); cursor: pointer; }
.daw-fullscreen-btn:hover { color: var(--text); border-color: #3a3a44; }

/* SOUND-module knobs sat 3px lower than PITCH's — .instr-grid-container .ik-card forces a 3px top pad (!important)
   that the PITCH knobs (not in an ik-card) lack. Override it for the sound params so the two columns align. */
.instr-params-wrap .gen-params .ik-card { padding-top: 0 !important; }