/* Swagg Brown ??? Control the Sound. Own the Moment. */

:root {
  --ui-scale: 1;
  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-ui: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --bg-deep: #0a0806;
  --bg-panel: #14110e;
  --bg-metal: linear-gradient(165deg, #2a241c 0%, #1a1612 45%, #12100d 100%);
  --bg-metal-edge: #3a3228;
  --accent-brown: #8b5a2b;
  --accent-bronze: #b08d57;
  --accent-gold: #d4af37;
  --accent-cream: #f3ebd8;
  --text-primary: #f5f0e6;
  --text-muted: #a89a82;
  --danger: #c44b3c;
  --ok: #5fad6e;
  --meter-green: #3d9e58;
  --meter-yellow: #c9a227;
  --meter-red: #c43c3c;
  --deck1: #c4a35a;
  --deck2: #7eb8da;
  --deck3: #d4785a;
  --deck4: #8bc49a;
  --radius: 4px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

[data-theme="warmBrown"] {
  /* Same as :root ? explicit for data-theme attribute consistency */
}

[data-theme="dark"] {
  --bg-deep: #050505;
  --bg-panel: #0e0e0e;
  --bg-metal: linear-gradient(165deg, #222 0%, #111 100%);
  --bg-metal-edge: #333;
  --accent-brown: #6b6b6b;
  --accent-bronze: #9a9a9a;
  --accent-gold: #e0e0e0;
  --accent-cream: #f0f0f0;
  --text-primary: #eee;
  --text-muted: #888;
}

[data-theme="highContrast"] {
  --bg-deep: #000;
  --bg-panel: #000;
  --bg-metal: #111;
  --bg-metal-edge: #fff;
  --accent-brown: #ffb000;
  --accent-bronze: #ffd700;
  --accent-gold: #fff;
  --accent-cream: #fff;
  --text-primary: #fff;
  --text-muted: #ccc;
}

[data-theme="midnightBlue"] {
  --bg-deep: #060b14;
  --bg-panel: #0c1422;
  --bg-metal: linear-gradient(165deg, #1a2740 0%, #0e1624 50%, #0a101c 100%);
  --bg-metal-edge: #2a3d5c;
  --accent-brown: #3d5a80;
  --accent-bronze: #7ba3c9;
  --accent-gold: #c9e0f5;
  --accent-cream: #e8f1fa;
  --text-primary: #eaf2fa;
  --text-muted: #8aa0b8;
  --deck1: #6eb5ff;
  --deck2: #9ad0ff;
  --deck3: #5ec8c8;
  --deck4: #a78bfa;
}

[data-theme="forestNight"] {
  --bg-deep: #070b08;
  --bg-panel: #0e1510;
  --bg-metal: linear-gradient(165deg, #1a2a1c 0%, #101810 50%, #0c120e 100%);
  --bg-metal-edge: #2d4430;
  --accent-brown: #4a6b3e;
  --accent-bronze: #8fbc7a;
  --accent-gold: #d4c07a;
  --accent-cream: #eaf0e4;
  --text-primary: #e8f0e6;
  --text-muted: #8fa08a;
  --deck1: #a8d08d;
  --deck2: #6bbf9a;
  --deck3: #d4b56a;
  --deck4: #7eb8da;
}

[data-theme="crimsonStage"] {
  --bg-deep: #0c0606;
  --bg-panel: #160c0c;
  --bg-metal: linear-gradient(165deg, #2a1414 0%, #180c0c 50%, #120808 100%);
  --bg-metal-edge: #4a2222;
  --accent-brown: #8b2e2e;
  --accent-bronze: #c45c5c;
  --accent-gold: #e8b86d;
  --accent-cream: #f5e6e0;
  --text-primary: #f6ebe8;
  --text-muted: #b09090;
  --danger: #ff5a4a;
  --deck1: #e07070;
  --deck2: #e8b86d;
  --deck3: #c478a0;
  --deck4: #8bc4b0;
}

[data-theme="arcticSlate"] {
  --bg-deep: #0a0c10;
  --bg-panel: #12151c;
  --bg-metal: linear-gradient(165deg, #222833 0%, #151920 50%, #10131a 100%);
  --bg-metal-edge: #3a4558;
  --accent-brown: #5a6a80;
  --accent-bronze: #9aabbf;
  --accent-gold: #d0d8e4;
  --accent-cream: #f0f3f8;
  --text-primary: #eef1f6;
  --text-muted: #8e98a8;
  --deck1: #8eb4d8;
  --deck2: #a0c4b8;
  --deck3: #c4a890;
  --deck4: #b0a0d0;
}

[data-theme="amberForge"] {
  --bg-deep: #0c0905;
  --bg-panel: #16110a;
  --bg-metal: linear-gradient(165deg, #2c2214 0%, #1a140c 50%, #120e08 100%);
  --bg-metal-edge: #4a3a22;
  --accent-brown: #a65c18;
  --accent-bronze: #d4892a;
  --accent-gold: #f0c040;
  --accent-cream: #f8ecd0;
  --text-primary: #f7efd8;
  --text-muted: #b0a080;
  --deck1: #f0a040;
  --deck2: #e07840;
  --deck3: #c4a35a;
  --deck4: #70b090;
}

[data-theme="graphiteTeal"] {
  --bg-deep: #080a0a;
  --bg-panel: #101414;
  --bg-metal: linear-gradient(165deg, #1c2424 0%, #121818 50%, #0e1212 100%);
  --bg-metal-edge: #2e3c3c;
  --accent-brown: #2a6b66;
  --accent-bronze: #4db6ac;
  --accent-gold: #80cbc4;
  --accent-cream: #e0f2f1;
  --text-primary: #e6f2f0;
  --text-muted: #7a9490;
  --deck1: #4db6ac;
  --deck2: #80cbc4;
  --deck3: #c4a35a;
  --deck4: #7eb8da;
}

[data-theme="rosewood"] {
  --bg-deep: #0c0709;
  --bg-panel: #160e12;
  --bg-metal: linear-gradient(165deg, #2a1820 0%, #181014 50%, #120c10 100%);
  --bg-metal-edge: #4a3040;
  --accent-brown: #8b4560;
  --accent-bronze: #c47890;
  --accent-gold: #e8c4a0;
  --accent-cream: #f5e8ec;
  --text-primary: #f4e8ec;
  --text-muted: #b0909c;
  --deck1: #d488a0;
  --deck2: #e8c4a0;
  --deck3: #a090c4;
  --deck4: #70b0a8;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: calc(16px * var(--ui-scale));
  line-height: 1.35;
  user-select: none;
}

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

.app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(139, 90, 43, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(176, 141, 87, 0.12), transparent 45%),
    var(--bg-deep);
}

.app-shell.fullscreen-perf {
  /* Keep a slim chrome row so main stays on the 1fr track (hiding both chrome
     rows with display:none left only <main>, which was assigned height 0). */
  grid-template-rows: auto 1fr 0;
}

.app-shell.fullscreen-perf .status-bar {
  visibility: hidden;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  pointer-events: none;
}

.app-shell.fullscreen-perf .top-bar {
  padding: 0.5rem 1rem;
  min-height: 4.5rem;
}

.app-shell.fullscreen-perf .top-bar .nav-tabs {
  display: none;
}

.app-shell.fullscreen-perf .brand-logo {
  height: 72px;
  max-width: min(420px, 46vw);
}

.app-shell.fullscreen-perf .main-stage {
  min-height: 0;
  overflow: auto;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.2rem;
  background:
    radial-gradient(ellipse at 8% 50%, rgba(212, 175, 55, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(212, 175, 55, 0.07) 0%, transparent 60%),
    var(--bg-metal);
  border-bottom: 1px solid rgba(196, 163, 90, 0.45);
  box-shadow:
    var(--shadow),
    inset 0 -1px 0 rgba(212, 175, 55, 0.12);
  min-height: 6rem;
}

.brand {
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  padding: 0.15rem 1.1rem 0.15rem 0.15rem;
  border-right: 1px solid rgba(196, 163, 90, 0.4);
  margin-right: 0.15rem;
  position: relative;
}

.brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: linear-gradient(180deg, transparent, #d4af37, transparent);
  opacity: 0.85;
}

.brand-logo {
  height: 88px;
  width: auto;
  max-width: min(480px, 42vw);
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 22px rgba(212, 175, 55, 0.32));
}

.brand-name {
  font-family: var(--font-display);
  font-size: 2.15rem;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
  text-shadow:
    0 1px 0 #000,
    0 0 24px rgba(212, 175, 55, 0.35);
  line-height: 0.95;
}

.brand-tag {
  font-size: 0.78rem;
  color: var(--accent-cream);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.15rem;
  opacity: 0.92;
  line-height: 1.25;
}

@media (max-width: 1100px) {
  .brand-logo {
    height: 70px;
    max-width: min(360px, 48vw);
  }
  .top-bar {
    min-height: 5rem;
    padding: 0.55rem 0.9rem;
  }
}

.nav-tabs {
  display: flex;
  gap: 0.35rem;
  flex: 1;
}

.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 600;
}

.nav-tab:hover {
  color: var(--accent-cream);
  border-color: var(--bg-metal-edge);
}

.nav-tab.active {
  color: var(--accent-gold);
  border-color: var(--accent-bronze);
  background: rgba(212, 175, 55, 0.08);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.tb-primary,
.tb-identity {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.top-more-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  z-index: 60;
}

.top-more-toggle {
  display: none;
}

.top-more-panel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Full-screen click catcher ? closes More on Mac/Windows reliably */
.top-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.top-more-backdrop[hidden] {
  display: none !important;
}
html.swagg-top-more-open .top-more-wrap {
  z-index: 70;
}
html.swagg-top-more-open .top-more-wrap .top-more-panel {
  z-index: 71;
}

.perf-collapse-btn {
  margin-left: 0.35rem;
  min-width: 1.75rem;
  padding: 0.15rem 0.4rem !important;
  vertical-align: middle;
}

.upnext-head h3 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.prepare-side.is-collapsed .upnext-body,
.prepare-side.is-collapsed .upnext-sub {
  display: none !important;
}

.perf-music-rail.is-collapsed .perf-music-results,
.perf-music-rail.is-collapsed .perf-music-sub,
.perf-music-rail.is-collapsed .perf-music-links,
.perf-music-rail.is-collapsed .perf-ql-dropdown {
  display: none !important;
}

.perf-music-rail.is-collapsed {
  padding-block: 0.55rem;
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--bg-metal-edge);
  border-radius: var(--radius);
  color: var(--text-muted);
}

.chip.live {
  color: var(--ok);
  border-color: var(--ok);
}

.chip.warn {
  color: var(--danger);
  border-color: var(--danger);
}

/* Master clip / overload indicator on the mixer peaks row. */
.chip-clip.is-clip {
  color: #fff;
  background: var(--danger, #e0463a);
  border-color: var(--danger, #e0463a);
  font-weight: 700;
  animation: clipPulse 0.6s ease-in-out infinite;
}
.chip-clip.is-hot {
  color: #1a1206;
  background: var(--accent-gold, #ffbe4a);
  border-color: var(--accent-gold, #ffbe4a);
  font-weight: 700;
}
@keyframes clipPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Sync Diagnostics panel (below the master peaks). */
.sync-diag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.sync-diag:empty {
  display: none;
}
.sync-diag .sd-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
.sync-diag .sd-flux {
  opacity: 0.75;
}
.sync-diag .sd-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0.4rem;
  align-items: center;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}
.sync-diag .sd-deck {
  font-weight: 700;
  color: var(--text-muted);
}
.sync-diag .sd-trim {
  opacity: 0.7;
  text-align: right;
}
.sync-diag .sd-row.sd-lock {
  color: var(--ok, #4ad07d);
}
.sync-diag .sd-row.sd-near {
  color: var(--accent-gold, #ffbe4a);
}
.sync-diag .sd-row.sd-off {
  color: var(--danger, #e0463a);
}

.icon-btn,
.btn {
  background: linear-gradient(180deg, #3a3228, #221c16);
  border: 1px solid var(--bg-metal-edge);
  color: var(--accent-cream);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.icon-btn:hover,
.btn:hover {
  border-color: var(--accent-bronze);
  color: var(--accent-gold);
}

.icon-btn:active,
.btn:active,
.btn.active {
  background: linear-gradient(180deg, #5a4630, #3a2e20);
  border-color: var(--accent-gold);
}

/* Auto Fader (transform / cut) ? armed state stands out in cut red */
.btn-auto-fader.active {
  background: linear-gradient(180deg, #b3402c, #7d2617);
  border-color: #ff7a5c;
  color: #fff2ec;
  box-shadow: 0 0 0 1px rgba(255, 122, 92, 0.35), 0 0 12px rgba(179, 64, 44, 0.55);
  animation: autoFaderPulse 1.8s ease-in-out infinite;
}

@keyframes autoFaderPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 122, 92, 0.35), 0 0 8px rgba(179, 64, 44, 0.45); }
  50% { box-shadow: 0 0 0 1px rgba(255, 122, 92, 0.55), 0 0 16px rgba(179, 64, 44, 0.75); }
}

/* ??? Load & Auto Fader: standout controls + trigger effects ??? */

/* File-picker labels (Load, Reconnect Files) are <label>s, not <button>s ? make
   them inline-flex so their text is centered like the real buttons, especially
   inside the stretched library toolbar row. */
.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}

/* Load is the primary per-deck action ? give it a gold accent so it stands out. */
.deck-transport .file-btn {
  background: linear-gradient(180deg, #3a2e1a, #241b10);
  border-color: color-mix(in srgb, var(--accent-gold) 60%, var(--bg-metal-edge));
  color: #f3e2b8;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.deck-transport .file-btn:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 10px rgba(196, 163, 90, 0.4);
}
/* Eject ? unload the current track from the deck. */
.deck-transport .btn-eject {
  color: #e8c98a;
}
.deck-transport .btn-eject:not(:disabled):hover {
  border-color: #d98a5a;
  color: #ffd9b8;
  background: rgba(217, 138, 90, 0.14);
  box-shadow: 0 0 10px rgba(217, 138, 90, 0.32);
}
.deck-transport .btn-eject:disabled {
  opacity: 0.45;
}
/* Prominent header eject ? always visible next to the track title / graph toggle. */
.deck-header .deck-eject-hdr {
  margin-left: 0.35rem;
  padding: 0.28rem 0.6rem;
  font-weight: 700;
  color: #ffcfae;
  border-color: #b5623a;
  background: linear-gradient(180deg, #3a2016, #24130c);
  white-space: nowrap;
}
.deck-header .deck-eject-hdr .eject-glyph {
  font-size: 1em;
  margin-right: 0.15rem;
}
.deck-header .deck-eject-hdr:not(:disabled):hover {
  border-color: #e08a54;
  color: #fff;
  background: linear-gradient(180deg, #5a2c1a, #351a10);
  box-shadow: 0 0 12px rgba(224, 138, 84, 0.4);
}
.deck-header .deck-eject-hdr:disabled {
  opacity: 0.5;
}
/* Success burst when a track is loaded onto the deck. */
.deck-transport .file-btn.load-flash {
  animation: loadFlash 0.7s ease-out;
}
@keyframes loadFlash {
  0% {
    background: linear-gradient(180deg, #2f7d46, #1c5a2e);
    border-color: #6bd08a;
    color: #eafff0;
    box-shadow: 0 0 0 2px rgba(107, 208, 138, 0.6), 0 0 22px rgba(74, 208, 125, 0.85);
    transform: scale(1.08);
  }
  60% {
    box-shadow: 0 0 0 1px rgba(107, 208, 138, 0.3), 0 0 12px rgba(74, 208, 125, 0.4);
    transform: scale(1);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

/* Auto Fader: an unmistakable OFF/ON control. OFF looks like a normal, clearly
   inactive button with a small dark "LED" and an OFF tag; ON turns the LED red,
   flips the tag to ON, and the .active rule below adds the red glow/pulse. */
.deck-transport .btn-auto-fader {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.btn-auto-fader .af-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: #2a2622;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-auto-fader .af-state {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #9a9082);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-auto-fader.active .af-led {
  background: #ff5636;
  border-color: #ff8a70;
  box-shadow:
    0 0 6px rgba(255, 86, 54, 0.95),
    0 0 12px rgba(255, 86, 54, 0.6),
    inset 0 0 2px rgba(255, 255, 255, 0.6);
  animation: afLedBlink 1.4s ease-in-out infinite;
}
.btn-auto-fader.active .af-state {
  background: #ff5636;
  color: #1a0d09;
}
@keyframes afLedBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* Trigger burst when toggled ON. */
.btn-auto-fader.af-trigger-on {
  animation: afTriggerOn 0.55s ease-out;
}
@keyframes afTriggerOn {
  0% {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(255, 122, 92, 0.7), 0 0 26px rgba(179, 64, 44, 0.95);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(255, 122, 92, 0.35), 0 0 12px rgba(179, 64, 44, 0.55);
  }
}
/* Trigger burst when toggled OFF. */
.btn-auto-fader.af-trigger-off {
  animation: afTriggerOff 0.5s ease-out;
}
@keyframes afTriggerOff {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 0 16px rgba(255, 255, 255, 0.22);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-transport .file-btn.load-flash,
  .btn-auto-fader.af-trigger-on,
  .btn-auto-fader.af-trigger-off,
  .btn-auto-fader.active,
  .btn-auto-fader.active .af-led {
    animation: none;
  }
}

.btn.danger {
  border-color: var(--danger);
  color: #f0b0a8;
}

.btn.btn-sync-all {
  background: linear-gradient(180deg, #6b5428, #3d3018);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.btn.btn-sync-all:hover:not(:disabled) {
  color: var(--accent-cream);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 50%, transparent);
}

.btn.btn-sync-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.btn-tips-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-width: 2px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn.btn-tips-toggle .tips-toggle-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35) inset;
}

.btn.btn-tips-toggle.tips-on {
  border-color: #57c98a;
  color: #bff5d6;
  background: linear-gradient(180deg, #234a34, #16301f);
  box-shadow: 0 0 12px color-mix(in srgb, #57c98a 55%, transparent);
}

.btn.btn-tips-toggle.tips-on .tips-toggle-dot {
  background: #57c98a;
  box-shadow: 0 0 8px #57c98a;
  animation: tips-pulse 1.8s ease-in-out infinite;
}

.btn.btn-tips-toggle.tips-off {
  border-color: var(--danger, #d9694f);
  color: #f6c3b6;
  background: linear-gradient(180deg, #4a2a22, #2a1712);
  box-shadow: 0 0 12px color-mix(in srgb, var(--danger, #d9694f) 45%, transparent);
}

.btn.btn-tips-toggle.tips-off .tips-toggle-dot {
  background: var(--danger, #d9694f);
  box-shadow: 0 0 8px var(--danger, #d9694f);
}

.btn.btn-tips-toggle:hover {
  filter: brightness(1.1);
}

@keyframes tips-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.btn.btn-record {
  background: linear-gradient(180deg, #4a2828, #2a1616);
  border-color: #c45c5c;
  color: #f0c0c0;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn.btn-record:hover {
  color: #fff;
  border-color: #e87878;
}

.btn.btn-record.is-recording {
  background: linear-gradient(180deg, #8a3030, #4a1818);
  border-color: #ff6b6b;
  color: #fff;
  animation: record-pulse 1.2s ease-in-out infinite;
}

@keyframes record-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, #ff6b6b 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, #ff6b6b 15%, transparent);
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #0a0806 72%, transparent);
  padding: 1rem;
}

.modal-card {
  width: min(440px, 100%);
  background: linear-gradient(180deg, #2a2218, #16120e);
  border: 1px solid var(--accent-bronze);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  display: grid;
  gap: 0.65rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.modal-card h3 {
  margin: 0;
  color: var(--accent-gold);
  font-size: 1.15rem;
}

.modal-card label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-cream);
}

.modal-card input[type="text"],
.modal-card select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--bg-metal-edge);
  background: #0e0b09;
  color: var(--accent-cream);
  font-size: 1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.main-stage {
  overflow: hidden;
  min-height: 0;
  padding: 0.6rem;
}

/* Author display rules beat the [hidden] UA style ? force real hide */
.main-stage > [data-panel-view][hidden],
.performance-layout[hidden],
.panel-page[hidden] {
  display: none !important;
}

/* Floating mixer uses display:flex ? must force-hide when not on Performance */
.mixer-panel[hidden],
aside.mixer-panel.mixer-float[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.performance-layout {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.panel-page.panel-visible {
  display: block;
  height: 100%;
  min-height: 0;
}

.decks-row {
  display: grid;
  gap: 0.85rem 1rem;
  min-height: 0;
  align-items: stretch;
  flex: 0 0 auto;
  isolation: isolate;
  z-index: 1;
}

.decks-row.decks-visible.count-1 {
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 720px;
  margin-inline: auto;
  width: 100%;
}

.decks-row.decks-visible.count-2 {
  grid-template-columns: 1fr 1fr;
}

.decks-row.decks-visible.count-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.decks-row.decks-visible.count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: 1.1rem;
  column-gap: 1.15rem;
}

.decks-row.four-primary {
  grid-template-columns: 1fr 1fr;
}

.decks-row.compact {
  grid-template-columns: 1fr 1fr;
}

.decks-row.two-only {
  grid-template-columns: 1fr 1fr;
}

.deck-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--bg-metal-edge);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.deck-picker-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.deck-pick-btn {
  min-width: 1.75rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.deck-pick-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mixer-and-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  min-height: 0;
  align-items: stretch;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(196, 163, 90, 0.2);
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: #0d0b09;
  border-top: 1px solid var(--bg-metal-edge);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.status-bar .error {
  color: var(--danger);
}

.status-bar .ok {
  color: var(--ok);
}

/* Deck */
.deck {
  background: var(--bg-metal);
  border: 1px solid var(--bg-metal-edge);
  border-radius: 6px;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: deck;
}

/* Narrow deck (e.g. 2 decks on a small screen): stack turntable over controls
   so the controls don't get crushed into a sliver beside the platter. Side-by-side
   only engages when the deck is wide enough for a comfortable controls column. */
@container deck (max-width: 760px) {
  .deck:not(.compact) .deck-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .deck:not(.compact) .deck-body .deck-side {
    flex-direction: row;
    min-width: 0;
    justify-content: center;
  }
  .deck:not(.compact) .deck-body .deck-side .vertical-fader {
    writing-mode: horizontal-tb;
    width: 140px;
    height: 28px;
  }
}

/* Wide deck: official SB turntable ~35% of deck width (approved placement mockup).
   Controls column still fills the remaining space ? layout structure unchanged. */
@container deck (min-width: 760.01px) {
  .deck:not(.compact) .deck-body .deck-platter-wrap .turntable {
    --tt-w: clamp(360px, 36cqi, 520px);
  }
}

/* Top info bar (label ? bpm ? title ? artist ? time ? orient) */
.deck-top {
  width: 100%;
}

/* Body: turntable on the left, all deck controls fill the space to the right */
.deck-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.deck-body .deck-platter-wrap {
  align-self: start;
}

/* Controls column stretches to the turntable height and spreads to fill it. */
.deck-body .deck-main {
  align-self: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
}

.deck::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--deck-color);
  border-radius: 6px 0 0 6px;
}

/* 3?4 decks: stack platter over controls so rows don't collide */
.deck.compact {
  padding: 0.5rem 0.55rem 0.6rem;
  gap: 0.45rem;
}

.deck.compact .deck-body {
  grid-template-columns: minmax(0, 1fr);
}

.deck.compact .deck-platter-wrap {
  width: 100%;
  max-width: 100%;
}

.deck.compact .deck-main {
  width: 100%;
}

.deck-platter-wrap {
  display: grid;
  grid-template-columns: auto minmax(8.5rem, max-content);
  grid-template-rows: auto;
  column-gap: 0.75rem;
  align-items: start;
  justify-content: start;
  align-self: start;
  min-width: 0;
  max-width: 100%;
}

.deck-platter-wrap .turntable {
  grid-column: 1;
  grid-row: 1;
}

.deck-platter-wrap .deck-bpm-side {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
}

/* BPM + pitch nudges live beside the turntable ? never overlaid on artwork */
.deck-bpm-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 8.75rem;
  max-width: 11rem;
  z-index: 5;
}

.tt-bpm-panel {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 0.55rem 0.65rem;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, #0a120c 0%, #020402 55%, #051008 100%);
  color: #8dff9f;
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 2.8vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 6px;
  line-height: 1;
  text-align: center;
  border: 1px solid #2a6a3a;
  box-shadow:
    inset 0 0 16px rgba(40, 200, 90, 0.22),
    0 0 12px rgba(40, 180, 80, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 10px rgba(90, 255, 140, 0.55);
}

.deck-bpm-side.has-bpm .tt-bpm-panel {
  border-color: rgba(80, 200, 110, 0.7);
}

.tt-bpm-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25em;
}

.tt-bpm-num {
  font-size: 1.45em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.tt-bpm-unit {
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.9;
  color: #b8f0c0;
}

.tt-pitch-sub {
  font-size: 0.55em;
  color: #9ecf9e;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.deck-bpm-side .tt-speed-nudge {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 0.35rem;
  justify-content: stretch;
  pointer-events: auto;
  z-index: auto;
}

.deck-bpm-side .tt-nudge-btn {
  flex: 1;
  min-width: 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.25rem;
  font-size: 0.9rem;
}

.deck-bpm-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
  background: linear-gradient(180deg, #1a1812 0%, #0a0907 100%);
  border: 1px solid rgba(196, 163, 90, 0.45);
  border-radius: 5px;
  color: #6a7868;
}

.deck-bpm-side.has-bpm .deck-bpm-meta {
  color: #8dff9f;
  border-color: rgba(80, 200, 110, 0.55);
}

.deck-bpm-track {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-mono);
}

.deck-bpm-track .deck-bpm-num {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.deck-bpm-track .deck-bpm-unit {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #a8d8b0;
}

.deck-bpm-flags {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #e8d5a3;
  min-height: 0.9rem;
}

.deck-bpm-side.is-synced .tt-bpm-panel,
.deck:has(.turntable.is-synced) .tt-bpm-panel {
  color: #ffe7a8;
  border-color: #c4a35a;
  box-shadow:
    inset 0 0 14px rgba(196, 163, 90, 0.28),
    0 0 12px rgba(196, 163, 90, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 10px rgba(232, 213, 163, 0.55);
}

.deck-bpm-side.is-synced .tt-bpm-unit,
.deck-bpm-side.is-synced .tt-pitch-sub {
  color: #e8d5a3;
}

/* Official Swagg Brown Quartz turntable ? approved artwork (1024?819).
   Aspect locked; do not stretch, recolor, or crop hardware details. */
.turntable {
  --tt-w: clamp(340px, 32vw, 520px);
  --tt-h: calc(var(--tt-w) * 819 / 1024);
  width: var(--tt-w);
  max-width: 100%;
  flex-shrink: 0;
}

.decks-row.decks-visible.count-1 .turntable {
  --tt-w: clamp(400px, 44vw, 560px);
}

.decks-row.decks-visible.count-2 .turntable {
  --tt-w: clamp(360px, 34vw, 520px);
}

.decks-row.decks-visible.count-3 .turntable,
.decks-row.decks-visible.count-4 .turntable,
.decks-row.many .turntable {
  --tt-w: clamp(280px, 26vw, 400px);
}

/* Compact (3?4 deck) rows: turntable sits above controls ? keep it large and full-width of the platter row. */
.deck.compact .deck-platter-wrap .turntable {
  --tt-w: clamp(300px, min(72cqi, 42vw), 440px);
}

.tt-chassis {
  position: relative;
  width: 100%;
  height: var(--tt-h);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  background: #8a8a8a;
}

.tt-exact {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Box aspect matches art (819/1024) ? fill without stretching the chassis. */
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}

/*
  Vinyl disc = the ACTUAL record pixels (vinyl-record.png) cropped from the turntable
  art with its geometric center EXACTLY on the spindle, so rotating it about its own
  center is wobble-proof and pixel-matches the printed record. Measured from the art
  (1024x819) with a crosshair/grid overlay:
    spindle center = (453, 391)  ->  cx = 453/1024 = 0.4424,  cy = 391/819 = 0.4774
    record radius  = 265px       ->  disc diameter 530px  ->  --d = 530/1024 = 0.5176
  The disc edge lands right on the printed record edge (just inside the strobe-dot
  ring), so ONLY the record + label rotate. The silver platter ring, strobe dots,
  tonearm and controls all stay in the static base art (.tt-exact) + tonearm overlay
  (.tt-arm). transform-origin 50% 50% == container center == spindle.
*/
.tt-vinyl {
  --cx: 0.4424;
  --cy: 0.4774;
  --d: 0.5176;
  position: absolute;
  width: calc(var(--tt-w) * var(--d));
  height: calc(var(--tt-w) * var(--d));
  left: calc(var(--tt-w) * var(--cx) - var(--tt-w) * var(--d) / 2);
  top: calc(var(--tt-h) * var(--cy) - var(--tt-w) * var(--d) / 2);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  cursor: grab;
  touch-action: none;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: auto;
  backface-visibility: hidden;
  contain: layout paint;
}

/*
  Platter edge glow ? stationary soft ring at the record edge (matches the ambient
  glow in the disc.mp4 reference). It does NOT rotate; only the vinyl underneath does.
  Sized/positioned identically to .tt-vinyl, sits just above the disc (z 3) and below
  the tonearm overlay (z 6), click-through so it never blocks scratch drags.
*/
.tt-vinyl-glow {
  position: absolute;
  width: calc(var(--tt-w) * var(--d));
  height: calc(var(--tt-w) * var(--d));
  left: calc(var(--tt-w) * var(--cx) - var(--tt-w) * var(--d) / 2);
  top: calc(var(--tt-h) * var(--cy) - var(--tt-w) * var(--d) / 2);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 calc(var(--tt-w) * 0.02) rgba(0, 0, 0, 0.6),
    0 0 calc(var(--tt-w) * 0.012) rgba(0, 0, 0, 0.45);
}
.tt-vinyl-glow.spinning {
  box-shadow:
    inset 0 0 calc(var(--tt-w) * 0.02) rgba(0, 0, 0, 0.55),
    0 0 calc(var(--tt-w) * 0.02) rgba(224, 168, 74, 0.28);
  animation: ttEdgeGlow 2.6s ease-in-out infinite;
}
@keyframes ttEdgeGlow {
  0%,
  100% {
    box-shadow:
      inset 0 0 calc(var(--tt-w) * 0.02) rgba(0, 0, 0, 0.55),
      0 0 calc(var(--tt-w) * 0.015) rgba(224, 168, 74, 0.2);
  }
  50% {
    box-shadow:
      inset 0 0 calc(var(--tt-w) * 0.02) rgba(0, 0, 0, 0.55),
      0 0 calc(var(--tt-w) * 0.03) rgba(224, 168, 74, 0.4);
  }
}

.tt-vinyl:active,
.turntable.is-scratching .tt-vinyl {
  cursor: grabbing;
}
/* No transform easing during jog/scratch ? CSS transitions read as MIDI lag. */
.tt-vinyl.live,
.turntable.is-scratching .tt-vinyl {
  transition: none !important;
}

/*
  Tonearm foreground. A dedicated TRANSPARENT PNG containing ONLY the tonearm, arm
  tube, headshell, cartridge and needle (the dark record + cartridge shadow are keyed
  out). It is pixel-aligned with the base art (inset:0, object-fit:fill) and stacked
  ABOVE the spinning disc (z-index 6), so the hardware floats on top of the record
  while the record still spins visibly BEHIND/AROUND the arm ? no static record wedge.
  Previously this was a clipped copy of the whole art, whose clip corridor covered a
  chunk of the record; that wedge stayed still and read as a dark "black space" next
  to the needle. pointer-events:none keeps scratch drags passing through to the disc.
*/
.tt-arm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 6;
}

.tt-vinyl-disc {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.tt-scratch-badge {
  position: absolute;
  left: 22%;
  bottom: 2.4%;
  z-index: 22;
  pointer-events: none;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1a1208;
  background: rgba(232, 149, 42, 0.92);
  border: 1px solid #a86a14;
  border-radius: 2px;
  padding: 0.2rem 0.45rem;
}

.tt-hot-scratch-auto {
  display: none;
}


.tt-start-glow {
  position: absolute;
  left: 10.35%;
  top: 78.2%;
  width: 2.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.tt-start-glow.on {
  background: #e8952a;
  box-shadow: 0 0 10px 3px rgba(232, 149, 42, 0.95);
  animation: tt-led-pulse 1.2s ease-in-out infinite;
}

.tt-hotspot {
  position: absolute;
  z-index: 20;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tt-hotspot:disabled {
  cursor: not-allowed;
}

/* START/STOP ? measured on artwork 1024?819: center ? (10.35%, 85.1%), ? ? 11.2% of width */
.tt-hot-start {
  left: 10.35%;
  top: 85.1%;
  width: calc(var(--tt-w) * 0.112);
  height: calc(var(--tt-w) * 0.112);
  border-radius: 50%;
  z-index: 25;
  transform: translate(-50%, -50%);
  box-shadow: none;
}

.tt-hot-start::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
  pointer-events: none;
}

.tt-hot-start:hover::after {
  border-color: rgba(232, 149, 42, 0.75);
  box-shadow: 0 0 10px rgba(232, 149, 42, 0.35);
}

.tt-hot-start:hover {
  box-shadow: none;
}

.tt-hot-start:active {
  transform: translate(-50%, -50%) scale(0.97);
}

.tt-hot-start:focus-visible {
  outline: none;
}

.tt-hot-start:focus-visible::after {
  border-color: rgba(232, 149, 42, 0.95);
}

/* Legacy on-chassis BPM overlay ? removed from markup; keep hidden if cached HTML */
.tt-hot-pitch-display {
  display: none !important;
}

.tt-bpm-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
}

.tt-bpm-num {
  font-size: 1.35em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.tt-bpm-unit {
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.9;
  color: #b8f0c0;
}

.tt-pitch-sub {
  font-size: 0.58em;
  color: #9ecf9e;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Nudge buttons default; side panel overrides position */
.tt-speed-nudge {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  pointer-events: auto;
}

.turntable > .tt-chassis > .tt-speed-nudge {
  display: none !important;
}

.tt-nudge-btn {
  min-width: 1.85rem;
  padding: 0.15rem 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  cursor: pointer;
  color: #f0e6d0;
}

.tt-nudge-btn .tt-nudge-finger {
  display: inline-flex;
  color: #e8c56a;
  line-height: 0;
}

.tt-nudge-btn .tt-nudge-finger svg {
  display: block;
}

.tt-nudge-minus .tt-nudge-finger {
  transform: scaleX(-1) rotate(-18deg);
}

.tt-nudge-plus .tt-nudge-finger {
  transform: rotate(-18deg);
}

.tt-nudge-sign {
  font-family: var(--font-mono, Consolas, monospace);
  font-size: 0.95em;
  font-weight: 800;
  letter-spacing: 0;
}

.turntable.is-synced .tt-hot-pitch-display {
  color: #ffe7a8;
  border-color: #c4a35a;
  box-shadow:
    inset 0 0 14px rgba(196, 163, 90, 0.28),
    0 0 12px rgba(196, 163, 90, 0.28),
    0 0 0 1px #000;
  text-shadow: 0 0 10px rgba(232, 213, 163, 0.55);
}

.turntable.is-synced .tt-bpm-unit,
.turntable.is-synced .tt-pitch-sub {
  color: #e8d5a3;
}

/*
  Pitch fader hotspot — keep interaction only.
  Artwork already draws the clean single recessed pitch slot; do NOT paint a second
  track/border/line over it (that caused the double-line look on every skin).
  Slot in artwork runs from y≈56% to y≈90% of chassis (pixel-sampled from swagg-turntable.png).
  top/height here match that so the moving cap appears INSIDE the drawn slot, not above it.
*/
.tt-hot-pitch-rail {
  left: 88.5%;
  top: 55%;
  width: 6.8%;
  height: 36%;
  cursor: ns-resize;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  z-index: 22;
}

.tt-hot-pitch-rail::before {
  content: none;
  display: none;
}

/* Sprite cap — pixel-cropped from the actual turntable photo (swagg-turntable.png,
   region x=85.2-96.3%, y=66.5-79.0%) so the moving handle looks exactly like the
   fader in the artwork. Width 163% of rail so it extends flush over the slot edges. */
.tt-hot-pitch-cap {
  position: absolute;
  left: 50%;
  width: 163%;
  aspect-ratio: 114 / 102;
  transform: translate(-50%, -50%);
  background: url('/online/assets/pitch-fader-cap.png?v=1') center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 23;
  transition: top 0.05s linear;
  display: block;
}

.tt-hot-pitch-cap::before,
.tt-hot-pitch-cap::after {
  display: none;
}

.tt-hot-pitch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  writing-mode: vertical-lr;
  direction: rtl;
  z-index: 3;
}

/* Zero-pitch reference tick — thin white notch at the rail's midpoint (= 0% pitch).
   Extends slightly beyond the rail edges so it's visible even when the sprite cap covers
   the center. pointer-events: none so it never blocks drag interaction. */
.tt-hot-pitch-rail::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 24;
}

.tt-hot-reset {
  left: 86%;
  top: 81.5%;
  width: 10.5%;
  height: 6%;
  border-radius: 2px;
  z-index: 22;
}

.tt-hot-reset:focus-visible {
  outline: 2px solid rgba(232, 149, 42, 0.85);
  outline-offset: 1px;
}

/* .tt-track-readout removed — track titles now live below each turntable
   in .lc-platter-trackinfo, so the on-chassis readout was redundant. */

@keyframes tt-led-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.75; filter: brightness(1.25); }
}

@media (max-width: 1400px) {
  .decks-row.decks-visible.count-4 .turntable,
  .decks-row.many .turntable {
    --tt-w: clamp(260px, 24vw, 360px);
  }
}

@media (max-width: 1100px) {
  .decks-row.decks-visible.count-2 .turntable {
    --tt-w: clamp(300px, 40vw, 420px);
  }
  .decks-row.decks-visible.count-4 .turntable,
  .decks-row.many .turntable {
    --tt-w: clamp(240px, 32vw, 320px);
  }
  .tt-hot-pitch-display { font-size: 0.85rem; min-width: 4.25rem; }
}

.deck-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.wave-orient-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.04em;
}

.waveform-slot.horizontal {
  width: 100%;
}

.waveform-slot.vertical {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 160px;
  height: 180px;
  width: 100%;
  border: 1px solid #2a241c;
  border-radius: 2px;
  background: #080705;
}

.deck.compact .waveform-slot.vertical {
  min-height: 120px;
  height: 140px;
}

/* Vertical waveform: it sits on the right, spanning the full deck height,
   while the info bar and turntable/controls body stack on the left. */
.deck.wave-vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top wave"
    "body wave";
  align-items: start;
  gap: 0.5rem 0.6rem;
}

.deck.wave-vertical .deck-top {
  grid-area: top;
}

.deck.wave-vertical > .waveform-slot.vertical {
  grid-area: wave;
  width: auto;
  height: 100%;
  min-height: 260px;
  align-self: stretch;
  padding: 0.2rem;
}

.deck.wave-vertical .deck-body {
  grid-area: body;
}

.deck.compact.wave-vertical > .waveform-slot.vertical {
  min-height: 200px;
}

.deck.compact .deck-main {
  gap: 0.28rem;
}

.deck.compact .deck-label {
  font-size: 1.05rem;
}

.deck.compact .track-title {
  font-size: 0.95rem;
}

.deck.compact .track-artist {
  font-size: 0.8rem;
}

.deck.compact .deck-transport .btn {
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
}

.deck.compact .control-knob {
  font-size: 0.7rem;
}

.deck.compact .control-knob input[type="range"] {
  width: 48px;
}

.deck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.deck-header .deck-meta {
  margin-left: auto;
}

.deck-label {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--deck-color);
  font-size: 1.25rem;
}

.deck-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.deck-bpm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-top: 0;
  padding: 0.65rem 0.85rem 0.7rem;
  width: auto;
  min-width: 7.25rem;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, #1a1812 0%, #0a0907 100%);
  border: 1px solid rgba(196, 163, 90, 0.55);
  border-radius: 6px;
  font-family: var(--font-mono);
  color: #6a7868;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

.deck-bpm.has-bpm {
  color: #8dff9f;
  border-color: rgba(80, 200, 110, 0.65);
  text-shadow: 0 0 12px rgba(90, 255, 140, 0.45);
  box-shadow:
    inset 0 0 16px rgba(40, 180, 80, 0.18),
    0 0 14px rgba(40, 160, 80, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

.deck-bpm-num {
  font-size: clamp(1.85rem, 4.2vw, 2.55rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.deck-bpm-unit {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #a8d8b0;
  opacity: 0.95;
}

.deck-bpm-flags {
  margin-left: 0;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #e8d5a3;
}

.deck-bpm-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  margin-left: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #6a7868;
  background: #0a0c0a;
  border: 1px solid #2a322a;
  line-height: 1.1;
}

.deck-bpm-chip.has-bpm {
  color: #8dff9f;
  border-color: #2a6a3a;
  text-shadow: 0 0 8px rgba(90, 255, 140, 0.4);
  box-shadow: inset 0 0 8px rgba(40, 180, 80, 0.15);
}

.deck-bpm-chip-unit {
  font-size: 0.62em;
  letter-spacing: 0.12em;
  font-weight: 700;
  opacity: 0.9;
}

.deck-header .deck-meta {
  margin-left: auto;
}

.track-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent-cream);
}

.track-artist {
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waveform-canvas {
  width: 100%;
  height: 100px;
  background: #080705;
  border: 1px solid #2a241c;
  border-radius: 2px;
  display: block;
  cursor: pointer;
}

.waveform-canvas.vertical {
  width: 72px;
  height: 100%;
  min-height: 140px;
  border: none;
}

.waveform-canvas.overview {
  height: 28px;
}

/* Beat Matching Tools ? Tempo Match + Beat Match strips above decks */
.beat-tools {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.55rem 0.5rem;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.95), rgba(10, 8, 6, 0.92));
  border: 1px solid rgba(232, 168, 56, 0.22);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.beat-tools[hidden] {
  display: none !important;
}
.beat-tools-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}
.beat-tools-title {
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--accent-gold, #e8a838);
  margin-right: 0.25rem;
}
.beat-tools-head .chip.is-ok {
  color: #0f1a12;
  background: #4ad07d;
  border-color: #4ad07d;
}
.tempo-match-strip,
.beat-match-strip {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.4rem;
  align-items: stretch;
}
.tempo-match-strip[hidden],
.beat-match-strip[hidden] {
  display: none !important;
}
.tm-lane-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}
.tempo-match-canvas {
  width: 100%;
  height: 72px !important;
  border-radius: 4px;
  border: 1px solid #2a241c;
  background: #080705;
  display: block;
}
.beat-match-canvas {
  width: 100%;
  height: 56px !important;
  border-radius: 4px;
  border: 1px solid #2a241c;
  background: #080705;
  display: block;
}
@media (max-width: 720px) {
  .tempo-match-strip,
  .beat-match-strip {
    grid-template-columns: 1fr;
  }
  .tm-lane-labels {
    flex-direction: row;
    gap: 0.75rem;
  }
}

/* Full-width top waveform gets more height on 3?4 deck (compact) layouts too. */
.deck.compact .waveform-canvas.horizontal {
  height: 68px;
}

/* Top info bar: single tidy line ? title flexes and truncates, time sits right. */
.deck-top .deck-header {
  flex-wrap: nowrap;
  gap: 0.55rem;
}
.deck-top .track-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  margin: 0;
}
.deck-top .track-artist {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 40%;
  font-size: 0.82rem;
  margin: 0;
}
.deck-top .wave-orient-btn {
  flex: 0 0 auto;
}
.deck.compact .deck-top .track-artist {
  display: none;
}

.deck-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.loop-controls {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem 0 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--deck-color) 25%, transparent);
}

.loop-controls.is-looping {
  border-top-color: var(--accent-gold);
}

.loop-row-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cream);
  opacity: 0.85;
}

.loop-badge {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  border-radius: 2px;
}

.loop-badge.armed {
  border-color: #e8c547;
  color: #e8c547;
}

.loop-lengths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.loop-lengths .loop-len {
  min-width: 2.1rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.loop-manual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.library-access-card {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 88%, #2a241c);
}

.library-access-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.library-table tr.is-unavailable td {
  opacity: 0.72;
}

/* Library search ? prominent, icon-led field with a gold focus glow. */
.lib-search {
  position: relative;
  display: flex;
  align-items: center;
}
.lib-search-icon {
  position: absolute;
  left: 12px;
  color: var(--accent-gold, #c4a35a);
  pointer-events: none;
  opacity: 0.9;
}
.lib-search-input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 10px;
  border: 2px solid color-mix(in srgb, var(--accent-gold, #c4a35a) 55%, var(--bg-metal-edge));
  background: linear-gradient(180deg, #12100c, #0a0806);
  color: var(--text-primary);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lib-search-input::placeholder {
  color: color-mix(in srgb, var(--accent-gold, #c4a35a) 60%, #8a8172);
  opacity: 0.85;
}
.lib-search-input:hover {
  border-color: var(--accent-gold, #c4a35a);
}
.lib-search-input:focus {
  outline: none;
  border-color: var(--accent-gold, #e8d5a3);
  background: linear-gradient(180deg, #17140d, #0d0a07);
  box-shadow:
    0 0 0 3px rgba(196, 163, 90, 0.25),
    0 0 16px rgba(196, 163, 90, 0.5),
    inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.lib-search:focus-within .lib-search-icon {
  opacity: 1;
  color: var(--accent-gold, #e8d5a3);
}

/* BPM analyze toolbar above the track list. */
.lib-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}
.btn-analyze-bpm {
  background: linear-gradient(180deg, #3a3320, #241f12);
  border: 1px solid var(--accent-gold, #c4a35a);
  color: var(--accent-gold, #e8d5a3);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 16px;
  box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn-analyze-bpm:hover {
  border-color: var(--accent-gold, #e8d5a3);
  box-shadow: 0 0 12px rgba(196, 163, 90, 0.4);
}
.btn-analyze-bpm.is-analyzing {
  background: linear-gradient(180deg, #4a2320, #2a1512);
  border-color: #ff7a5c;
  color: #ffd9cf;
  animation: afLedBlink 1.4s ease-in-out infinite;
}
.lib-toolbar-hint {
  font-size: 0.78rem;
}

/* Bulk multi-select action bar (appears when one or more tracks are ticked). */
.lib-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--accent-gold, #c4a35a);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(196, 163, 90, 0.12), rgba(196, 163, 90, 0.04));
}
.lib-bulk-count {
  font-weight: 700;
  color: var(--accent-gold, #e8d5a3);
  white-space: nowrap;
}
.lib-bulk-bar .pl-add-select {
  min-width: 190px;
}

/* Selection checkboxes. */
.lib-th-check {
  width: 30px;
  text-align: center;
}
.lib-check,
.lib-check-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent-gold, #c4a35a);
}
.library-table tbody tr.is-selected td {
  background: rgba(196, 163, 90, 0.14) !important;
}

/* Sortable library column headers. */
.library-table thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #b9ac93);
  padding: 6px 4px;
  border-bottom: 1px solid var(--bg-metal-edge, rgba(255, 255, 255, 0.18));
  white-space: nowrap;
}
.library-table thead th.lib-th {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.library-table thead th.lib-th:hover {
  color: var(--accent-gold, #e8d5a3);
  background: rgba(255, 255, 255, 0.04);
}
.library-table thead th.is-sorted {
  color: var(--accent-gold, #e8d5a3);
}
.library-table thead th.lib-th-bpm {
  text-align: right;
}
/* BPM value cell. */
.lib-bpm {
  font-family: Consolas, "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #8a8172);
}
.lib-bpm.has-bpm {
  color: var(--accent-gold, #e8d5a3);
  font-weight: 700;
}

/* Track dividers ? a clear line between each library row for easier scanning. */
.library-table tbody tr + tr td {
  border-top: 1px solid var(--bg-metal-edge, rgba(255, 255, 255, 0.12));
}
.library-table tbody tr {
  transition: background 0.12s ease;
}
.library-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.045);
}

.deck-stems--coming-soon {
  border-top-color: rgba(212, 175, 55, 0.28);
  padding: 0.25rem 0 0.15rem;
}
.deck-stems--coming-soon .stems-coming-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(20, 16, 10, 0.4);
  border: 1px dashed rgba(212, 175, 55, 0.28);
}
.stems-coming-soon {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(20, 16, 10, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.28);
}
.stems-coming-soon-title {
  color: var(--accent-gold, #d4af37);
  font-size: 0.92rem;
}
.deck-stems--coming-soon .stems-coming-soon-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #b8ad98);
}
.stems-coming-soon-msg,
.stems-coming-soon-short,
.stems-coming-soon-secondary {
  margin: 0;
  color: #cdbf9e;
  font-size: 0.8rem;
  line-height: 1.4;
}
.deck-stems--coming-soon .stems-coming-soon-msg {
  font-size: 0.72rem;
}
.stems-coming-soon-short {
  color: #e8dcc0;
  font-weight: 600;
}
.stem-badge-soon {
  border-color: rgba(212, 175, 55, 0.55) !important;
  color: var(--accent-gold, #d4af37) !important;
}

.deck-stems {
  display: grid;
  gap: 0.3rem;
  padding: 0.35rem 0 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--deck-color) 22%, transparent);
}

/* display:grid above beats the UA [hidden] rule ? force Admin "Hide Completely". */
.deck-stems[hidden],
.deck-stems.deck-stems--admin-hidden {
  display: none !important;
}

/* Same issue: coming-soon/flex rules must not resurrect hidden notice/interactive. */
.deck-stems .stems-coming-soon[hidden],
.deck-stems .deck-stems-interactive[hidden],
.deck-stems [data-el="stems-interactive"][hidden] {
  display: none !important;
}

.deck-stems.is-on {
  border-top-color: var(--accent-gold, #c4a35a);
}

/* Desktop: Stems/Effects bodies always open; toggle acts as a label */
html:not(.mobile-perf-active) .deck-section-body {
  display: block;
}
html:not(.mobile-perf-active) .deck-section-chevron {
  display: none;
}
html:not(.mobile-perf-active) .deck-section-toggle {
  pointer-events: none;
  cursor: default;
}

.deck-section-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.deck-section-chevron {
  display: none;
  font-size: 0.85rem;
  opacity: 0.75;
}

.btn-play-primary {
  font-weight: 800;
}

.deck-stems-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cream, #f0e6d0);
  opacity: 0.85;
}

.stem-hint {
  margin: 0.15rem 0 0.25rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted, #8a7f6e);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.95;
}

.stem-badge {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  border: 1px solid #3a3428;
  color: var(--text-muted);
}

.stem-badge.on {
  border-color: var(--accent-gold, #c4a35a);
  color: var(--accent-gold, #c4a35a);
}

.deck-stems-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
}

.deck-stems-select-wrap {
  flex: 1 1 10rem;
  min-width: 0;
}

.deck-stems-select {
  width: 100%;
  max-width: 100%;
  background: #0f0d09;
  border: 1px solid #a89878;
  color: #f5f0e6;
  padding: 0.35rem 0.45rem;
  font-size: 0.85rem;
  border-radius: 2px;
}

.deck-fx {
  display: grid;
  gap: 0.3rem;
  padding: 0.35rem 0 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--deck-color) 22%, transparent);
}

.deck-fx.is-on {
  border-top-color: var(--accent-gold, #c4a35a);
}

.deck-fx.is-locked {
  opacity: 0.65;
}

.deck-fx-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cream, #f0e6d0);
  opacity: 0.85;
}

.deck-fx.is-on .stem-badge {
  border-color: var(--accent-gold, #c4a35a);
  color: var(--accent-gold, #c4a35a);
}

.deck-fx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
}

.deck-fx-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  flex: 1 1 100%;
}

.deck-fx-btn {
  flex: 1 1 auto;
  min-width: 3.4rem;
  padding: 0.32rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.deck-fx-btn.is-adv::after {
  content: "?";
  margin-left: 0.25rem;
  font-size: 0.6rem;
  opacity: 0.7;
}

.deck-fx-btn.active {
  background: linear-gradient(180deg, var(--accent-gold, #c4a35a), #9c7d3f);
  border-color: var(--accent-gold, #e8d5a3);
  color: #1a1208;
  font-weight: 700;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-gold, #c4a35a) 55%, transparent);
}

.deck-fx-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.deck-fx-wet {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #8a7f6e);
  flex: 1 1 8rem;
}

.deck-fx-wet input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
}

.deck-stems-pads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.28rem;
}

.stem-pad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.stem-pad .stem-solo.active {
  border-color: rgba(212, 175, 55, 0.75);
  color: #f4d67a;
}

.stem-pad {
  display: grid;
  gap: 0.15rem;
}

.stem-pad.muted .stem-mute {
  opacity: 0.55;
  text-decoration: line-through;
}

.stem-pad input[type="range"] {
  width: 100%;
  accent-color: var(--deck-color, #c4a35a);
}

/* Compact Stems panel — inserted here (not appended at EOF) because a
   pre-existing unclosed-brace earlier in this file left the parser's scope
   open through EOF, silently swallowing any top-level rules appended after
   it. This point, right after the original stems rules above, is a proven
   clean parse boundary. Keeps the 4 stems side-by-side (already horizontal)
   but removes the descriptive hint paragraph and tightens every dimension
   so the panel reads as one compact strip instead of a tall stacked block. */
.deck-stems {
  width: 100%;
  padding: 0.2rem 0.3rem 0.15rem;
  gap: 0.2rem;
}
.stem-hint {
  display: none;
}
.deck-stems-label {
  font-size: 0.6rem;
}
.deck-stems-actions {
  gap: 0.2rem;
  width: 100%;
}
.deck-stems-select-wrap {
  flex: 1 1 auto;
  min-width: 5rem;
}
.deck-stems-select {
  width: 100%;
  padding: 0.16rem 0.3rem;
  font-size: 0.62rem;
}
.deck-stems-actions .btn {
  min-height: 0;
  padding: 0.16rem 0.3rem;
  font-size: 0.58rem;
  flex: 0 0 auto;
}
.deck-stems-pads {
  gap: 0.15rem;
}
.stem-pad {
  gap: 0.1rem;
  padding: 0;
}
.stem-pad-actions {
  gap: 0.1rem;
}
.stem-pad .stem-mute {
  padding: 0.1rem 0.15rem;
  font-size: 0.55rem;
  min-width: 0;
}
.stem-pad input[type="range"] {
  height: 0.7rem;
}
.stem-ai-panel {
  margin-top: 0.15rem;
  padding-top: 0.15rem;
  font-size: 0.56rem;
}
.stem-ai-legal {
  font-size: 0.52rem;
  line-height: 1.25;
}
/* The Local AI variant of this paragraph (studio.js sets data-backend to
   tell the two apart) is informational, not a consent disclosure — hide it
   to reclaim space per request. The Cloud AI Stems variant stays visible;
   that one is a real upload-consent notice and must not be hidden. */
.stem-ai-legal[data-backend="local-ai"] {
  display: none;
}
.stem-ai-quality,
.stem-ai-mem {
  font-size: 0.54rem;
}

/* ── Stems Pre-analysis — library row badges ─────────────────────────────
   Compact icon next to BPM/duration in lib-track-meta. Each state has a
   distinct color so it reads at a glance. */
.lib-stems-badge {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  white-space: nowrap;
}
.lib-stems-badge.is-cached {
  color: #ffcc00;
  background: rgba(255,204,0,0.12);
}
.lib-stems-badge.is-processing {
  color: #40e0d0;
  background: rgba(64,224,208,0.12);
  animation: stems-badge-pulse 1s ease-in-out infinite alternate;
}
.lib-stems-badge.is-queued {
  color: #aaa;
  background: rgba(128,128,128,0.1);
}
.lib-stems-badge.is-failed {
  color: #ff6060;
  background: rgba(255,96,96,0.12);
}
@keyframes stems-badge-pulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* Inline "Stems ready" label inside the More menu */
.lib-stems-status {
  display: block;
  padding: 0.2em 0.5em;
  font-size: 0.78rem;
  color: #ffcc00;
}
.lib-stems-status.is-cached::before { content: "⚡ "; }

/* ── Stems Prep queue panel (shown above track list while active) ─────── */
.stems-prep-panel {
  margin: 0.4rem 0.5rem 0.35rem;
  background: rgba(255,204,0,0.05);
  border: 1px solid rgba(255,204,0,0.2);
  border-radius: 6px;
  overflow: hidden;
}
.stems-prep-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: rgba(0,0,0,0.15);
  flex-wrap: wrap;
}
.stems-prep-title {
  font-weight: 700;
  font-size: 0.8rem;
  color: #ffcc00;
  flex-shrink: 0;
}
.stems-prep-subtitle {
  flex: 1;
  font-size: 0.72rem;
  min-width: 0;
}
.stems-prep-header .btn {
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
}
.stems-prep-list {
  padding: 0.2rem 0;
  max-height: 9rem;
  overflow-y: auto;
}
.stems-prep-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stems-prep-item:last-child { border-bottom: none; }
.stems-prep-item.is-active {
  background: rgba(64,224,208,0.06);
}
.stems-prep-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stems-prep-state {
  font-size: 0.68rem;
  color: #888;
  flex-shrink: 0;
  white-space: nowrap;
}
.stems-prep-item.is-active .stems-prep-state {
  color: #40e0d0;
}
.btn.btn-xs {
  padding: 0 0.3rem;
  font-size: 0.65rem;
  line-height: 1.4;
  min-height: unset;
}
/* ── Deck stems badge — status indicator above track artist in each deck ─── */
.deck-stems-badge {
  min-height: 0;
}
.deck-stems-ready {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffcc00;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: rgba(255,204,0,0.1);
  white-space: nowrap;
}
.deck-stems-active {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  color: #40e0d0;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: rgba(64,224,208,0.1);
  animation: stems-badge-pulse 1s ease-in-out infinite alternate;
  white-space: nowrap;
}
.deck-stems-prep-btn {
  font-size: 0.68rem !important;
  padding: 0.1rem 0.4rem !important;
  line-height: 1.4 !important;
  min-height: unset !important;
  border-color: rgba(255,204,0,0.35) !important;
  color: #ffcc00 !important;
}
.deck-stems-prep-btn:hover {
  border-color: rgba(255,204,0,0.7) !important;
  background: rgba(255,204,0,0.1) !important;
}

.deck-side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  min-width: 72px;
}

.vertical-fader {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 28px;
  height: 110px;
  accent-color: var(--deck-color);
}

.knob-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.control-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.control-knob input[type="range"] {
  width: 56px;
  accent-color: var(--accent-bronze);
}

.pitch-slider {
  width: 100%;
  accent-color: var(--deck-color);
}

.pitch-nudge-group {
  min-width: 140px;
  align-items: stretch;
}

.pitch-nudge-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.pitch-nudge-row .btn {
  min-width: 1.75rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  font-weight: 800;
}

.pitch-nudge-row.coarse {
  justify-content: center;
  margin-top: 0.15rem;
}

.pitch-nudge-row .pitch-slider {
  flex: 1;
  min-width: 0;
}

.coming-soon {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}

/* Don't cover button labels ? the old full-bleed "Preview" overlay made Sync/Master/etc unreadable */
.coming-soon::after {
  content: none;
  display: none;
}

/* Mixer */
.mixer-panel {
  --xf-a: #d4a017;
  --xf-b: #7eb8da;
  --xf-thru: #8a8070;
  background: var(--bg-metal);
  border: 1px solid var(--bg-metal-edge);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  width: 100%;
}

.mixer-panel.mixer-float {
  position: fixed;
  z-index: 40;
  overflow: auto;
  border: 1px solid #c4a35a;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(196, 163, 90, 0.25);
  backdrop-filter: blur(6px);
  background:
    linear-gradient(165deg, rgba(42, 36, 28, 0.97) 0%, rgba(18, 16, 13, 0.97) 100%);
}

.mixer-panel.mixer-float.is-floating {
  width: min(760px, calc(100vw - 24px));
  max-width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  right: auto;
  bottom: auto;
}

/* True viewport center on undock */
.mixer-panel.mixer-float.is-floating.is-centered {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
}

.mixer-panel.mixer-float.is-docked {
  left: 10px;
  right: 10px;
  bottom: 10px;
  top: auto;
  width: auto;
  max-width: none;
  max-height: none;
  border-radius: 8px;
  transform: none;
}

.mixer-panel.mixer-float.is-dragging {
  cursor: grabbing;
  opacity: 0.96;
  user-select: none;
  transform: none;
}

.mixer-panel.mixer-float.near-dock {
  box-shadow:
    0 0 0 2px rgba(212, 160, 23, 0.65),
    0 16px 48px rgba(0, 0, 0, 0.65);
}

.mixer-panel.mixer-float.is-collapsed {
  width: min(320px, calc(100vw - 24px));
  padding: 0.35rem 0.5rem;
}

.mixer-panel.mixer-float.is-docked.is-collapsed {
  width: auto;
  left: 10px;
  right: 10px;
}

.mixer-dock-ghost {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 150px;
  z-index: 35;
  pointer-events: none;
  border: 2px dashed rgba(212, 160, 23, 0.7);
  border-radius: 8px;
  background: rgba(212, 160, 23, 0.08);
}

html.mixer-is-docked .performance-layout {
  padding-bottom: max(168px, calc(env(safe-area-inset-bottom, 0px) + 158px));
}

/* Docked mixer: keep Find Music compact so decks stay the main stage. */
html.mixer-is-docked .performance-layout .perf-music-rail {
  padding: 0.65rem 0.85rem 0.6rem;
  gap: 0.45rem;
}

html.mixer-is-docked .performance-layout .perf-music-title {
  font-size: 1.1rem;
}

html.mixer-is-docked .performance-layout .perf-music-sub {
  display: none;
}

html.mixer-is-docked .performance-layout .perf-ql-input {
  min-height: 2.45rem;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  font-size: 0.95rem !important;
}

html.mixer-is-docked .performance-layout .perf-music-results {
  max-height: 6.5rem;
  min-height: 0;
}

html.mixer-is-docked .performance-layout[data-deck-count="2"] .perf-music-results {
  max-height: 6.5rem;
}

html.mixer-is-docked .performance-layout[data-deck-count="4"] .perf-music-results {
  max-height: 5.5rem;
}

html.mixer-is-docked .performance-layout .perf-music-results:empty,
html.mixer-is-docked .performance-layout .quickload-empty {
  max-height: 3.25rem;
  min-height: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

html.mixer-is-docked .mixer-panel.mixer-float.is-docked {
  padding: 0.45rem 0.65rem 0.55rem;
}

html.mixer-is-docked .mixer-panel.mixer-float.is-docked .mixer-float-handle {
  padding-bottom: 0.2rem;
  margin-bottom: 0.15rem;
}

html.mixer-is-docked .mixer-panel.mixer-float.is-docked .mixer-title {
  font-size: 1.05rem;
}

html.mixer-is-docked .mixer-horizontal .mixer-channel .vertical-fader {
  height: 64px;
}

html.mixer-is-docked .mixer-horizontal .meter {
  height: 48px;
}

.mixer-float-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: grab;
  touch-action: none;
  padding: 0.1rem 0.1rem 0.3rem;
  border-bottom: 1px solid rgba(196, 163, 90, 0.28);
}

.mixer-panel.is-dragging .mixer-float-handle {
  cursor: grabbing;
}

.mixer-float-handle .mixer-title {
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  pointer-events: none;
}

.mixer-mode-tag {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1208;
  background: #c4a35a;
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
}

.mixer-float-actions {
  display: flex;
  gap: 0.3rem;
}

.mixer-float-actions .btn {
  min-width: 1.8rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
}

/* Float/Dock sits outside the drag handle so clicks never start a dock-drag */
.mixer-float-dock-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.15rem 0.35rem;
  border-bottom: 1px solid rgba(196, 163, 90, 0.18);
}

.mixer-float-dock-actions .btn {
  min-width: 4.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.mixer-title {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  color: var(--accent-bronze);
  text-align: center;
  font-size: 1.4rem;
}

/* Wide horizontal body: channels + XF/master side-by-side */
.mixer-body-horizontal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 0.65rem;
  align-items: stretch;
}

.mixer-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.mixer-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.25rem;
  border: 1px solid color-mix(in srgb, var(--side-color) 45%, #2a241c);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--side-color) 10%, rgba(0, 0, 0, 0.35));
  min-width: 0;
}

.mixer-channel.side-a {
  --side-color: var(--xf-a);
}

.mixer-channel.side-b {
  --side-color: var(--xf-b);
}

.mixer-channel.side-thru {
  --side-color: var(--xf-thru);
}

.mixer-channel .ch-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ch-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  gap: 0.15rem;
}

/* Lit deck-number badge (wraps the raw "1" / "2" text node) */
.mixer-channel .ch-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ch-color);
  background: color-mix(in srgb, var(--ch-color) 20%, #0a0806);
  border: 1px solid color-mix(in srgb, var(--ch-color) 62%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 9px color-mix(in srgb, var(--ch-color) 42%, transparent),
              inset 0 0 5px color-mix(in srgb, var(--ch-color) 15%, transparent);
}

.mixer-channel .ch-side {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--side-color);
  background: color-mix(in srgb, var(--side-color) 24%, #0a0806);
  border: 1px solid color-mix(in srgb, var(--side-color) 68%, transparent);
  border-radius: 3px;
  padding: 0.08rem 0.38rem;
  box-shadow: 0 0 8px color-mix(in srgb, var(--side-color) 36%, transparent),
              inset 0 0 4px color-mix(in srgb, var(--side-color) 14%, transparent);
  text-shadow: 0 0 5px color-mix(in srgb, var(--side-color) 55%, transparent);
}

.mixer-horizontal .mixer-channel .vertical-fader {
  width: 28px;
  height: 78px;
  accent-color: var(--side-color);
}

.mixer-channel .xf-assign {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  background: #0a0806;
  color: var(--side-color);
  border: 1px solid color-mix(in srgb, var(--side-color) 50%, #3a3228);
  border-radius: 3px;
  padding: 0.2rem 0.1rem;
  text-align: center;
}

.mixer-horizontal .meter {
  width: 10px;
  height: 56px;
}

.mixer-horizontal .crossfader-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.25rem 0 0.1rem 0.55rem;
  border-top: none;
  border-left: 1px solid #2a241c;
  min-width: 0;
}

.mixer-horizontal .crossfader-section select {
  font-size: 0.8rem;
  background: #0a0806;
  color: #f3ebd8;
  border: 1px solid #3a3228;
}

.mixer-horizontal .xf-hint {
  display: none;
}

@media (max-width: 900px) {
  .mixer-body-horizontal {
    grid-template-columns: 1fr;
  }
  .mixer-horizontal .crossfader-section {
    border-left: none;
    border-top: 1px solid #2a241c;
    padding-left: 0;
    padding-top: 0.45rem;
  }
}

.meter {
  width: 12px;
  height: 80px;
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, var(--meter-green), var(--meter-yellow) 70%, var(--meter-red));
  transition: height 50ms linear;
}

.crossfader-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid #2a241c;
}

.xf-ab-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mixer-panel .xf-a {
  color: var(--xf-a);
}

.mixer-panel .xf-b {
  color: var(--xf-b);
}

.xf-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #a89878;
}

.crossfader-section .xf-slider {
  width: 100%;
  height: 1.35rem;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    90deg,
    var(--xf-a) 0%,
    color-mix(in srgb, var(--xf-a) 35%, var(--xf-b)) 50%,
    var(--xf-b) 100%
  );
  border: 1px solid #4a4030;
  border-radius: 4px;
  outline: none;
}

.crossfader-section .xf-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 28px;
  border-radius: 3px;
  /* --xf-thumb-* set by studio.js when at dead center */
  background: var(--xf-thumb-bg, #f3ebd8);
  border: 2px solid var(--xf-thumb-border, #1a1208);
  box-shadow: var(--xf-thumb-shadow, 0 1px 4px rgba(0, 0, 0, 0.55));
  cursor: grab;
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.crossfader-section .xf-slider::-moz-range-thumb {
  width: 18px;
  height: 28px;
  border-radius: 3px;
  background: var(--xf-thumb-bg, #f3ebd8);
  border: 2px solid var(--xf-thumb-border, #1a1208);
  box-shadow: var(--xf-thumb-shadow, 0 1px 4px rgba(0, 0, 0, 0.55));
  cursor: grab;
}

.crossfader-section.is-xf-center .xf-slider,
.xf-slider.is-xf-center {
  border-color: color-mix(in srgb, var(--xf-center, #ff6b1a) 70%, #4a4030);
}

.crossfader-section input[type="range"]:not(.xf-slider) {
  width: 100%;
  accent-color: var(--accent-gold);
}

.master-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.master-row label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Talkback ? mic over music with program ducking */
.talkback-section {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.talkback-section.is-talking {
  box-shadow: inset 0 0 0 1px rgba(232, 168, 56, 0.35);
  border-radius: 6px;
  padding: 0.45rem 0.4rem 0.5rem;
}
.talkback-head {
  margin: 0;
}
.talkback-status {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.talkback-status.is-live {
  color: #1a1208;
  background: var(--accent-gold);
  border-color: var(--accent-gold);
}
.talkback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.talkback-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  padding: 0.35rem 0.45rem;
}
.btn-talkback {
  touch-action: none;
  user-select: none;
}
.btn-talkback.is-talking,
.talkback-actions .btn.active {
  border-color: rgba(232, 168, 56, 0.75);
  background: linear-gradient(180deg, rgba(232, 168, 56, 0.28), rgba(232, 168, 56, 0.1));
  color: var(--accent-gold);
}
.talkback-section.is-on .talkback-status:not(.is-live) {
  border-color: rgba(61, 158, 111, 0.55);
  color: #7ddea0;
}
.talkback-meter {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.talkback-meter-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3d9e6f, var(--accent-gold), #c44);
  transition: width 40ms linear;
}

/* Library / Effects / Settings panels */
.panel-page {
  height: 100%;
  min-height: 0;
  background: var(--bg-metal);
  border: 1px solid var(--bg-metal-edge);
  border-radius: 6px;
  padding: 1rem 1.15rem 1.25rem;
  overflow: auto;
  box-shadow: var(--shadow);
}

.panel-page h2 {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--accent-gold);
  margin: 0 0 0.25rem;
  font-size: 1.8rem;
}

.panel-page .subtitle {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.library-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.library-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1fr;
  gap: 1rem;
  align-items: start;
}

.playlist-panel {
  background: linear-gradient(180deg, #2a2418 0%, #1a1610 100%);
  border: 1px solid #c4a35a;
  border-radius: 6px;
  padding: 0.85rem;
  min-height: 280px;
  box-shadow: inset 0 1px 0 rgba(196, 163, 90, 0.25);
}

.playlist-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(196, 163, 90, 0.35);
}

.playlist-panel-head h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8d5a3;
  font-family: var(--font-display);
}

.playlist-panel-head .btn {
  background: #3a3224;
  border-color: #c4a35a;
  color: #f0e6d0;
  font-size: 0.85rem;
}

.playlist-panel-head .btn.active {
  background: #c4a35a;
  color: #1a1208;
  border-color: #e8d5a3;
}

.library-rail-btns {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.library-rail-btns .rail-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.library-rail-btns .prepare-rail.active {
  border-color: #e8d5a3;
  color: #e8d5a3;
}

.rail-count {
  font-size: 0.7rem;
  min-width: 1.25rem;
  text-align: center;
  border: 1px solid #a89878;
  border-radius: 999px;
  padding: 0 0.35rem;
  color: #e8d5a3;
}

.prepare-panel {
  display: grid;
  gap: 0.45rem;
}

.prepare-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.prepare-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #a89878;
}

.prepare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.prepare-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid #2a241c;
  border-radius: 3px;
  background: #12100c;
  cursor: grab;
}

.prepare-list li.selected,
.track-table tr.selected td {
  background: color-mix(in srgb, #1a160f 55%, #c4a35a);
}

.prepare-track-meta {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.prepare-title {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f0e6d0;
}

.prepare-sub {
  font-size: 0.7rem;
  color: #a89878;
}

.prepare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  flex-shrink: 0;
}

.prepare-side .prepare-panel.compact .prepare-hint {
  font-size: 0.68rem;
}

.playlist-create {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.playlist-create input {
  flex: 1;
  min-width: 0;
  background: #0f0d09;
  border: 1px solid #a89878;
  color: #f5f0e6;
  padding: 0.45rem 0.55rem;
  font-size: 0.95rem;
}

.playlist-create input::placeholder {
  color: #8a7a60;
}

.playlist-create .btn {
  background: #c4a35a;
  color: #1a1208;
  border-color: #e8d5a3;
  font-weight: 700;
}

.playlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.playlist-list li {
  display: flex;
  gap: 0.3rem;
  align-items: stretch;
}

.playlist-list li.active .playlist-item {
  border-color: #e8d5a3;
  background: #3d3426;
  color: #fff8e8;
  box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.45);
}

.playlist-item {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  background: #12100c;
  border: 1px solid #6a5a40;
  color: #f0e6d0;
  padding: 0.55rem 0.6rem;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 3px;
}

.playlist-item:hover {
  border-color: #c4a35a;
  background: #2a2418;
  color: #fff;
}

.playlist-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.playlist-count {
  color: #c4a35a;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.playlist-delete {
  padding: 0 0.5rem;
  min-width: 1.75rem;
  background: #3a2018;
  border-color: #a06040;
  color: #f0c8b0;
}

.playlist-panel .empty-hint {
  color: #c4b898;
  font-size: 0.8rem;
  padding: 0.75rem 0.25rem;
  text-align: left;
  line-height: 1.4;
}

.playlist-view-title {
  flex: 1;
  min-width: 180px;
  font-size: 1rem;
  color: #e8d5a3;
  letter-spacing: 0.04em;
  padding: 0.35rem 0;
  font-weight: 600;
}

.playlist-add-select {
  background: #1a1610;
  border: 1px solid #c4a35a;
  color: #f0e6d0;
  font-size: 0.85rem;
  padding: 0.35rem 0.4rem;
  max-width: 140px;
  border-radius: 3px;
}

.muted {
  color: #a89878;
  font-size: 0.85rem;
}

.prepare-playlists {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.prepare-playlists .btn {
  background: #2a2418;
  border-color: #8a7a55;
  color: #f0e6d0;
  font-size: 0.85rem;
}

.prepare-playlists .btn.active {
  background: #c4a35a;
  border-color: #e8d5a3;
  color: #1a1208;
}

@media (max-width: 900px) {
  .library-layout {
    grid-template-columns: 1fr;
  }
}

.library-toolbar input[type="search"] {
  flex: 1;
  min-width: 180px;
  background: #0a0806;
  border: 1px solid var(--bg-metal-edge);
  color: var(--text-primary);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius);
}

.track-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.track-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  padding: 0.45rem;
  border-bottom: 1px solid var(--bg-metal-edge);
}

.track-table td {
  padding: 0.45rem;
  border-bottom: 1px solid rgba(58, 50, 40, 0.5);
}

.track-table tr:hover {
  background: rgba(212, 175, 55, 0.06);
  cursor: pointer;
}

.effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
}

.effect-category {
  border: 1px solid var(--bg-metal-edge);
  border-radius: var(--radius);
  padding: 0.65rem;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.effect-category h3 {
  margin: 0;
  font-size: 0.8rem;
  color: var(--accent-bronze);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  min-height: 1.9em; /* keep 1- and 2-line names aligned across cards */
  display: flex;
  align-items: flex-end;
}

/* Assign buttons on top, wet slider below ? never crowds long names. */
.effect-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.effect-assign {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.fx-assign-btn {
  flex: 1 1 auto;
  min-width: 2.6rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--deck-color, #c4a35a) 45%, transparent);
}

.fx-assign-btn.active {
  background: linear-gradient(180deg, var(--deck-color, #c4a35a), color-mix(in srgb, var(--deck-color, #c4a35a) 60%, #000));
  border-color: var(--deck-color, #e8d5a3);
  color: #14100a;
  box-shadow: 0 0 10px color-mix(in srgb, var(--deck-color, #c4a35a) 55%, transparent);
}

.effect-wet {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #8a7f6e);
}

.effect-wet-label { flex: 0 0 auto; }

.effect-wet-range {
  flex: 1 1 auto;
  min-width: 0;
}

.effects-deck-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 1rem;
}

.effects-deck-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #2a241c;
  border-radius: 3px;
  background: #12100c;
  font-size: 0.85rem;
}

.effects-deck-chip.on {
  border-color: #c4a35a;
  color: #e8d5a3;
}

.deck-effects {
  display: grid;
  gap: 0.3rem;
  padding: 0.35rem 0 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--deck-color) 22%, transparent);
}

.deck-effects.is-on {
  border-top-color: var(--accent-gold, #c4a35a);
}

.deck-effects-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cream, #f0e6d0);
  opacity: 0.85;
}

.deck-effects-select {
  width: 100%;
  max-width: 100%;
  background: #0f0d09;
  border: 1px solid #a89878;
  color: #f5f0e6;
  padding: 0.35rem 0.45rem;
  font-size: 0.85rem;
  border-radius: 2px;
}

.deck-effects-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.deck-effects-depth {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #a89878;
  flex: 1;
  min-width: 100px;
}

.deck-effects-depth input[type="range"] {
  flex: 1;
  accent-color: var(--deck-color, #c4a35a);
}

.deck-effects-status {
  font-size: 0.7rem;
  color: #a89878;
}

.deck.compact .deck-effects-select {
  font-size: 0.78rem;
}

.badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.35rem;
  border-radius: 2px;
  border: 1px solid var(--bg-metal-edge);
  color: var(--text-muted);
}

.badge.live {
  border-color: var(--ok);
  color: var(--ok);
}

.badge.soon {
  border-color: var(--accent-bronze);
  color: var(--accent-bronze);
}

.settings-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  min-height: 420px;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.settings-nav button {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-nav button.active {
  border-color: var(--accent-bronze);
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.08);
}

.settings-body {
  border: 1px solid var(--bg-metal-edge);
  border-radius: var(--radius);
  padding: 0.85rem;
  background: rgba(0, 0, 0, 0.2);
}

.sync-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
}

.sync-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #c4a35a;
}

.form-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.55rem 0.85rem;
  align-items: center;
}

.form-grid label {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.form-grid select,
.form-grid input {
  background: #0a0806;
  border: 1px solid var(--bg-metal-edge);
  color: var(--text-primary);
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
}

.form-grid select {
  min-width: 12rem;
  cursor: pointer;
}

.form-grid select option,
.form-grid select optgroup {
  background: #1a1510;
  color: #f5f0e6;
}

/* Settings panel ? stacked, larger, well-spaced controls */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  max-width: 560px;
  margin-top: 1.5rem;
}
/* Skin chooser needs full width so Classic / Library Console / Neon sit on one row */
.settings-form:has(.skin-chooser),
.panel-page[data-panel-view="settings"] .settings-form:has(.skin-chooser) {
  max-width: min(1100px, 100%);
}
/* Keep Appearance skin cards inside the scrollable settings panel, not clipped */
.panel-page[data-panel-view="settings"] .settings-row:has(.skin-chooser),
.ms-panel-settings .settings-row:has(.skin-chooser) {
  overflow: visible;
  min-width: 0;
}
.panel-page[data-panel-view="settings"] .skin-chooser,
.ms-panel-settings .skin-chooser {
  max-width: 100%;
  min-width: 0;
}

.settings-form .settings-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--text-primary);
}

.settings-form .settings-label {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.settings-form select {
  width: 100%;
  max-width: 340px;
  min-width: 0;
  font-size: 1rem;
  background: #0a0806;
  border: 1px solid var(--bg-metal-edge);
  color: var(--text-primary);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-form select option,
.settings-form select optgroup {
  background: #1a1510;
  color: #f5f0e6;
}

.settings-form .settings-range {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 340px;
}

.settings-form .settings-range input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent-gold);
}

.settings-form .settings-range-val {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold);
  min-width: 3rem;
  text-align: right;
}

.settings-form .settings-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.settings-form .settings-reset-btn {
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}

.settings-form .settings-defaults-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.settings-form a,
.settings-form a:link,
.settings-form a:visited {
  color: var(--accent-gold, #d4af37);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-form a:hover,
.settings-form a:focus-visible {
  color: var(--accent-cream, #f3ebd8);
}
.settings-legal-links {
  margin-top: 0.75rem;
  line-height: 1.55;
}
.settings-legal-links a {
  color: var(--accent-bronze, #b08d57);
}
.settings-form .settings-note {
  margin: 0.5rem 0 0 !important;
  font-size: 0.9rem;
}

.empty-hint {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 1.5rem;
  text-align: center;
}

.side-panel {
  background: var(--bg-panel);
  border: 1px solid var(--bg-metal-edge);
  border-radius: 6px;
  padding: 0.5rem;
  overflow: auto;
  min-height: 0;
}

.side-panel h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  color: var(--accent-bronze);
  font-size: 1.15rem;
}

@media (max-width: 1200px) {
  .mixer-and-lower {
    grid-template-columns: 1fr;
  }
  .deck:not(.compact) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .deck-side {
    display: none;
  }
}

/* Local library persistence */
.library-access-card {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 88%, #2a241c);
}
.library-access-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.library-table tr.is-unavailable td {
  opacity: 0.72;
}

.library-reconnect-banner {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent-gold, #c4a35a) 45%, #3a3428);
  background: color-mix(in srgb, #2a2010 70%, #0c0a08);
  color: var(--accent-cream, #f0e6d0);
  font-size: 0.78rem;
  line-height: 1.4;
}
.library-load-status {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: var(--accent-gold, #c4a35a);
}
.library-reconnect-banner strong {
  color: var(--accent-gold, #c4a35a);
  font-weight: 650;
}

/* ??? Connected music folders (multi-folder library) ??? */
.library-folders {
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lib-folder-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 82%, #2a241c);
  font-size: 0.8rem;
}
.lib-folder-row.needs-reconnect {
  border-color: color-mix(in srgb, var(--accent-gold, #c4a35a) 55%, #3a3428);
  background: color-mix(in srgb, #2a2010 62%, #0c0a08);
}
.lib-folder-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6b6455;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) inset;
}
.lib-folder-dot.on {
  background: #4fd07a;
  box-shadow: 0 0 6px rgba(79, 208, 122, 0.7);
}
.lib-folder-dot.off {
  background: var(--accent-gold, #c4a35a);
  box-shadow: 0 0 6px rgba(196, 163, 90, 0.6);
}
.lib-folder-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary, #f0e6d0);
  font-weight: 600;
}
.lib-folder-state {
  flex: 0 0 auto;
  color: var(--text-secondary, #a89f8c);
  font-size: 0.74rem;
}
.lib-folder-btn {
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  font-size: 0.74rem;
}
.lib-folder-btn.lib-folder-remove {
  border-color: color-mix(in srgb, #c0392b 55%, #3a3428);
  color: #f0b7ae;
}
.lib-folder-btn.lib-folder-remove:hover {
  background: color-mix(in srgb, #c0392b 30%, #0c0a08);
  color: #fff;
}

/* ??? Folders browse screen (per-folder cards) ??? */
.lib-folders-intro {
  margin: 0 0 0.7rem;
}
.lib-folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 0.7rem;
}
.lib-folder-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 80%, #2a241c);
  overflow: hidden;
}
.lib-folder-card.needs-reconnect {
  border-color: color-mix(in srgb, var(--accent-gold, #d4af37) 55%, #3a3428);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-gold, #d4af37) 18%, transparent);
}
/* CSS folder glyph ? emoji ?? renders as a grey box on many Mac browsers. */
.lib-folder-glyph {
  width: 2.05rem;
  height: 1.55rem;
  margin-top: 0.35rem;
  border-radius: 0.2rem 0.28rem 0.28rem 0.28rem;
  background: linear-gradient(180deg, #d4af37 0%, #9a6b2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.35);
  position: relative;
  flex: 0 0 auto;
}
.lib-folder-glyph::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.38rem;
  width: 0.95rem;
  height: 0.42rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background: linear-gradient(180deg, #e0c56a, #c4a35a);
}
.lib-folder-glyph--sm {
  width: 1.7rem;
  height: 1.25rem;
  margin-top: 0.28rem;
}
.lib-folder-glyph--sm::before {
  top: -0.3rem;
  width: 0.78rem;
  height: 0.34rem;
}
.lib-folder-card-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.8rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.lib-folder-card-main:hover {
  background: color-mix(in srgb, var(--accent-brown, #8b5a2b) 22%, transparent);
}
.lib-folder-card-icon {
  font-size: 1.5rem;
  flex: 0 0 auto;
}
.lib-folder-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.lib-folder-card-name {
  font-weight: 700;
  color: var(--text-primary, #f0e6d0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-folder-card-loc {
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-folder-card-state {
  font-size: 0.74rem;
  color: var(--accent-gold, #d4af37);
  font-weight: 600;
}
.lib-folder-card-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.6rem 0.6rem;
}
.lib-folder-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 180px;
}
.lib-path-crumb {
  border: 0;
  background: transparent;
  color: var(--accent-gold, #d4af37);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
}
.lib-path-crumb:hover {
  background: color-mix(in srgb, var(--accent-brown, #8b5a2b) 28%, transparent);
  color: var(--text-primary, #f0e6d0);
}
.lib-path-sep {
  opacity: 0.55;
  user-select: none;
}
.lib-subfolders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}
.lib-subfolder-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 75%, #2a241c);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  opacity: 1;
  filter: none;
}
.lib-subfolder-card:hover {
  background: color-mix(in srgb, var(--accent-brown, #8b5a2b) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent-gold, #d4af37) 40%, #3a3428);
}
.lib-subfolder-icon {
  font-size: 1.25rem;
  flex: 0 0 auto;
}
.lib-subfolder-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.lib-subfolder-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-subfolder-go {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-gold, #d4af37);
  flex: 0 0 auto;
}
.lib-folder-open-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 82%, #2a241c);
}
.lib-folder-open-name {
  font-weight: 700;
  color: var(--text-primary, #f0e6d0);
}
.lib-folder-open-sub {
  flex: 1 1 240px;
  min-width: 0;
}

/* ??? Per-deck Quick Load dropdown ??? */
.deck-song-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.deck-song-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cream, #f0e6d0);
  opacity: 0.8;
  white-space: nowrap;
}
.deck-song-select {
  max-width: 170px;
  padding: 0.34rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--text-primary, #f0e6d0);
  font-size: 0.78rem;
}
.deck-song-select:disabled {
  opacity: 0.5;
}
.deck.compact .deck-song-select {
  max-width: 120px;
}
.deck.compact .deck-song-label {
  display: none;
}

/* ??? Quick Load list / Library view ??? */
.quickload-banner {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  background: rgba(20, 16, 10, 0.45);
  display: grid;
  gap: 0.35rem;
}
.quickload-banner p { margin: 0; }
.quickload-banner-actions,
.quickload-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.35rem;
}
.quickload-empty {
  padding: 1.25rem 0.5rem;
  display: grid;
  gap: 0.5rem;
  max-width: 36rem;
}
.quickload-empty p { margin: 0; }
.quickload-list {
  display: grid;
  gap: 0.35rem;
}
.quickload-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.quickload-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}
.quickload-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.ql-order {
  opacity: 0.65;
  font-size: 0.78rem;
  min-width: 1.2rem;
}
.library-table tr.is-in-quickload td {
  background: rgba(212, 175, 55, 0.06);
}
.ql-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--accent-gold, #d4af37);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.btn.is-ql-on {
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--accent-gold, #d4af37);
}
.quickload-banner--linked {
  border-color: rgba(212, 175, 55, 0.45);
}

/* ??? Library playlists ??? */
.library-playlists {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 82%, #2a241c);
}
.library-playlists .lib-pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.library-playlists .lib-pl-head strong {
  color: var(--accent-cream, #f0e6d0);
  letter-spacing: 0.02em;
}
.lib-pl-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Dedicated library screens: All Tracks / Record Crates / Playlists / Favorites */
.lib-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--bg-metal-edge, #3a3428);
}
.lib-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--text-secondary, #b8ad98);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lib-nav-tab:hover {
  border-color: color-mix(in srgb, var(--accent-gold, #c4a35a) 55%, #3a3428);
  color: var(--accent-cream, #f0e6d0);
}
.lib-nav-tab.is-active {
  background: linear-gradient(180deg, #f0dca8, #c4a35a);
  border-color: #f3e6c4;
  color: #14100a;
  font-weight: 800;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold, #c4a35a) 70%, transparent),
    0 4px 14px color-mix(in srgb, var(--accent-gold, #c4a35a) 45%, transparent);
  transform: translateY(-1px);
}
.lib-nav-tab .pl-count {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}
.lib-nav-tab.is-active .pl-count {
  background: rgba(0, 0, 0, 0.28);
  color: #14100a;
  font-weight: 800;
}
/* Favorite star toggle on each track row */
.lib-fav {
  min-width: 1.9rem;
  padding: 0.2rem 0.4rem;
  color: var(--text-secondary, #b8ad98);
  font-size: 1rem;
  line-height: 1;
}
.lib-fav.is-fav {
  color: #f4c542;
  border-color: color-mix(in srgb, #f4c542 55%, #3a3428);
  text-shadow: 0 0 8px rgba(244, 197, 66, 0.55);
}
.lib-fav:hover {
  color: #f4c542;
}
.pl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--text-primary, #e8e0d0);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pl-pill:hover {
  border-color: color-mix(in srgb, var(--accent-gold, #c4a35a) 55%, #3a3428);
}
.pl-pill.is-active {
  background: color-mix(in srgb, var(--accent-gold, #c4a35a) 22%, #0c0a08);
  border-color: var(--accent-gold, #c4a35a);
  color: var(--accent-cream, #f0e6d0);
}
.pl-pill .pl-count {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-metal-edge, #3a3428) 70%, #0c0a08);
  color: var(--accent-gold, #c4a35a);
}
.lib-pl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--bg-metal-edge, #3a3428);
}
.lib-pl-actions .subtitle {
  margin: 0;
  margin-right: auto;
}
.pl-add-select {
  margin-left: 0.3rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--text-primary, #e8e0d0);
  font-size: 0.75rem;
  cursor: pointer;
  vertical-align: middle;
}

/* ??? Record Crates (references only; no audio ever stored/uploaded) ??? */
.library-crates {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent-gold, #c4a35a) 40%, #3a3428);
  border-left: 3px solid var(--accent-gold, #c4a35a);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 78%, #2a241c);
}
.library-crates .lib-pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.library-crates .lib-pl-head strong {
  color: var(--accent-gold, #e8d5a3);
  letter-spacing: 0.02em;
}
.library-crates .lib-pl-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.library-crates .lib-pl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--bg-metal-edge, #3a3428);
}
.library-crates .lib-pl-actions .subtitle {
  margin: 0;
  margin-right: auto;
}
.crate-playlists {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.crate-pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.35rem 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--text-primary, #e8e0d0);
  font-size: 0.75rem;
}
.crate-pl-btn {
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: color-mix(in srgb, var(--bg-deep, #0c0a08) 60%, #2a241c);
  color: var(--text-primary, #e8e0d0);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  cursor: pointer;
}
.crate-pl-btn:hover {
  border-color: var(--accent-gold, #c4a35a);
}
.crate-pl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.deck-bpm-actions {
  display: flex;
  gap: 0.28rem;
  margin-top: 0.35rem;
  width: 100%;
}
.deck-bpm-actions .btn {
  flex: 1;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.2rem;
  min-height: 1.6rem;
}

/* ?? Local AI Stems panel ?? */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.stem-ai-panel {
  margin-top: 0.45rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(232,213,163,0.18);
  background: rgba(0,0,0,0.28);
  font-size: 0.72rem;
  line-height: 1.35;
}
.stem-ai-status { opacity: 0.9; margin-bottom: 0.35rem; min-height: 1.1em; }
.stem-ai-progress { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.35rem; }
.stem-ai-progress-bar {
  flex:1; height: 0.35rem; background: rgba(255,255,255,0.08); overflow:hidden;
}
.stem-ai-progress-bar > span {
  display:block; height:100%; width:0%; background: var(--accent-gold, #c4a35a);
  transition: width 0.15s linear;
}
.stem-ai-actions { display:flex; flex-wrap:wrap; gap:0.28rem; margin-bottom:0.35rem; }
.stem-ai-actions .btn { font-size:0.62rem; padding:0.22rem 0.35rem; min-height:1.4rem; }
.stem-ai-quality, .stem-ai-mem { display:flex; align-items:center; gap:0.35rem; margin-top:0.2rem; }
.deck-stems.is-ai .stem-badge { border-color: rgba(126,184,218,0.45); }
.deck-stems.is-preparing { opacity: 0.92; }

/* ?? Control tooltips ?? */
.swagg-tooltip {
  position: fixed;
  z-index: 100000;
  max-width: min(280px, calc(100vw - 24px));
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(196, 163, 90, 0.45);
  background: rgba(14, 11, 7, 0.96);
  color: #e8d5a3;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.swagg-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ?? Local Record Mix ?? */
.rec-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(196, 91, 74, 0.4);
}
.btn-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffe9e4;
  background: linear-gradient(135deg, #c4423a, #8f2a24);
  border: 1px solid rgba(255, 120, 105, 0.55);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.2s ease;
}
.btn-rec:hover { filter: brightness(1.08); }
.rec-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #ff4b3e;
  box-shadow: 0 0 0 0 rgba(255, 75, 62, 0.55);
  flex: 0 0 auto;
}
.rec-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #ff9a8f;
  min-width: 2.6rem;
  text-align: center;
}
.rec-mini-meter {
  width: 46px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.rec-mini-meter i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4caf6a, #d8c15a 70%, #e0564a);
  transition: width 0.08s linear;
}

/* Widget state colours */
.rec-widget[data-rec-state="recording"] { border-color: rgba(255, 75, 62, 0.85); }
.rec-widget[data-rec-state="recording"] .btn-rec { background: linear-gradient(135deg, #ff4b3e, #b02a20); }
.rec-widget[data-rec-state="recording"] .rec-dot { animation: recPulse 1.1s ease-in-out infinite; }
.rec-widget[data-rec-state="armed"] .btn-rec,
.rec-widget[data-rec-state="paused"] .btn-rec { background: linear-gradient(135deg, #c79a3a, #8a6a1e); color: #201704; }
.rec-widget[data-rec-state="finalizing"] .btn-rec { background: linear-gradient(135deg, #4a7fc4, #2b4f8a); }
.rec-widget[data-rec-state="ready"] .btn-rec { background: linear-gradient(135deg, var(--accent-gold, #c4a35a), #b8891f); color: #1a1205; }
.rec-widget[data-rec-state="saved"] .btn-rec { background: linear-gradient(135deg, #3fae63, #227a41); }
.rec-widget[data-rec-state="error"] .btn-rec { background: linear-gradient(135deg, #8f2a24, #5a1712); }

@keyframes recPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 75, 62, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 75, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 75, 62, 0); }
}

/* Recording control panel */
.rec-panel {
  position: fixed;
  top: 68px;
  right: 18px;
  z-index: 99990;
  width: min(360px, calc(100vw - 24px));
  border-radius: 12px;
  border: 1px solid rgba(196, 91, 74, 0.5);
  background: rgba(16, 12, 9, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  color: var(--text-primary, #f2ead9);
  overflow: hidden;
}
.rec-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* While dragging, show the closed-hand grabbing cursor. */
.rec-panel-head.rec-dragging {
  cursor: grabbing;
}
/* Grip affordance so it reads as a draggable, floating window. */
.rec-panel-head strong::before {
  content: "?";
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
  letter-spacing: -0.05em;
}
.rec-panel--float {
  cursor: default;
}
.rec-panel-head .rec-x {
  cursor: pointer;
}
.rec-panel-head strong { font-size: 0.95rem; letter-spacing: 0.02em; }
.rec-state-chip {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 75, 62, 0.18);
  color: #ff9a8f;
  border: 1px solid rgba(255, 75, 62, 0.4);
}
.rec-panel[data-rec-state="ready"] .rec-state-chip { background: rgba(196,163,90,0.18); color: #e8d5a3; border-color: rgba(196,163,90,0.4); }
.rec-panel[data-rec-state="saved"] .rec-state-chip { background: rgba(63,174,99,0.18); color: #8ee0a6; border-color: rgba(63,174,99,0.4); }
.rec-panel[data-rec-state="paused"] .rec-state-chip,
.rec-panel[data-rec-state="armed"] .rec-state-chip { background: rgba(199,154,58,0.18); color: #e8c877; border-color: rgba(199,154,58,0.4); }
.rec-panel-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: #ff9a8f; }
.rec-panel[data-rec-state="recording"] .rec-panel-head .rec-dot { animation: recPulse 1.1s ease-in-out infinite; }
.rec-panel .rec-x { padding: 0.2rem 0.5rem; background: transparent; border: 1px solid rgba(255,255,255,0.14); color: inherit; border-radius: 6px; cursor: pointer; }
.rec-panel-body { padding: 0.75rem 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.rec-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; color: var(--text-muted, #b9ac93); }
.rec-field input {
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0c0a08;
  color: var(--text-primary, #f2ead9);
  font-size: 0.85rem;
}
.rec-format-row {
  display: flex;
  gap: 0.6rem;
}
.rec-format-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-muted, #b9ac93);
}
.rec-format-row select {
  padding: 0.4rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0c0a08;
  color: var(--text-primary, #f2ead9);
  font-size: 0.82rem;
}
.rec-format-row select:disabled { opacity: 0.5; cursor: not-allowed; }
.rec-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.8rem;
  font-size: 0.72rem;
  color: var(--text-muted, #b9ac93);
}
.rec-meta span { display: flex; justify-content: space-between; gap: 0.5rem; }
.rec-meta b { color: var(--text-primary, #f2ead9); font-weight: 600; }
.rec-levelwrap { display: flex; align-items: center; gap: 0.5rem; }
.rec-levelbar {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.rec-levelbar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4caf6a, #d8c15a 72%, #e0564a);
  transition: width 0.08s linear;
}
.rec-clip {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rec-clip.on { color: #fff; background: #e0342a; border-color: #ff6b5f; }
.rec-locked {
  font-size: 0.72rem;
  color: #e8c877;
  background: rgba(199, 154, 58, 0.12);
  border: 1px solid rgba(199, 154, 58, 0.35);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
}
.rec-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rec-actions .btn { padding: 0.45rem 0.7rem; }
.btn-rec-start {
  background: linear-gradient(135deg, #c4423a, #8f2a24);
  border: 1px solid rgba(255, 120, 105, 0.55);
  color: #ffe9e4;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
}
.btn-rec-start:hover { filter: brightness(1.08); }
.rec-note { font-size: 0.66rem; color: var(--text-muted, #9c8f77); margin: 0; line-height: 1.4; }
.rec-recovery {
  background: rgba(199, 154, 58, 0.1);
  border: 1px solid rgba(199, 154, 58, 0.4);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rec-recovery-msg {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: #f0d999;
}
.rec-recovery-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rec-recovery-actions .btn { padding: 0.4rem 0.65rem; }

/* Keyboard shortcuts overlay */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 4, 0.72);
  backdrop-filter: blur(3px);
}
.shortcuts-overlay[hidden] { display: none; }
.shortcuts-card {
  width: min(560px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: linear-gradient(180deg, #1b1712, #120f0b);
  border: 1px solid rgba(199, 154, 58, 0.4);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  padding: 1.1rem 1.2rem 1rem;
}
.shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.shortcuts-head strong { font-size: 1.05rem; color: #f0d999; letter-spacing: 0.02em; }
.sc-close { padding: 0.2rem 0.55rem; }
.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.2rem;
}
@media (max-width: 520px) {
  .shortcuts-grid { grid-template-columns: 1fr; }
}
.sc-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.15rem 0; }
.sc-key {
  flex: 0 0 auto;
  min-width: 88px;
  text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.74rem;
  color: #ffe9c4;
  background: rgba(199, 154, 58, 0.14);
  border: 1px solid rgba(199, 154, 58, 0.4);
  border-radius: 6px;
  padding: 0.22rem 0.4rem;
}
.sc-desc { font-size: 0.82rem; color: var(--text-primary, #f2ead9); }
.shortcuts-note {
  margin: 1rem 0 0;
  font-size: 0.68rem;
  color: var(--text-muted, #9c8f77);
  line-height: 1.45;
}

/* ??? Quick Start guide overlay ??? */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 5, 4, 0.74);
  backdrop-filter: blur(3px);
}
.guide-overlay[hidden] { display: none; }
.guide-card {
  width: min(600px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg, #1c1811, #120f0b);
  border: 1px solid rgba(199, 154, 58, 0.45);
  border-radius: 16px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.65);
  padding: 1.2rem 1.35rem 1.15rem;
  animation: guidePop 0.22s ease;
}
@keyframes guidePop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.guide-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c79a3a;
  margin-bottom: 0.2rem;
}
.guide-title { font-size: 1.15rem; color: #f0d999; letter-spacing: 0.01em; }
.guide-steps { display: grid; gap: 0.7rem; }
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.6rem 0.7rem;
  background: rgba(199, 154, 58, 0.06);
  border: 1px solid rgba(199, 154, 58, 0.16);
  border-radius: 11px;
}
.guide-step-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1a140a;
  background: linear-gradient(180deg, #e9c268, #c79a3a);
  border-radius: 50%;
}
.guide-step-body { flex: 1 1 auto; }
.guide-step-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: #f2ead9;
  margin-bottom: 0.15rem;
}
.guide-step-icon { font-size: 1rem; }
.guide-step-desc { font-size: 0.82rem; color: var(--text-secondary, #cbbfa6); line-height: 1.45; }
.guide-note {
  margin: 1rem 0 0.9rem;
  font-size: 0.74rem;
  color: var(--text-muted, #9c8f77);
  line-height: 1.5;
}
.guide-dontshow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #cbbfa6);
  cursor: pointer;
  user-select: none;
}
.guide-dontshow input {
  width: 16px;
  height: 16px;
  accent-color: #c79a3a;
  cursor: pointer;
}
.guide-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 520px) {
  .guide-actions { flex-direction: column-reverse; }
  .guide-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none !important; }
}

/* ????????????????????? Cloud Storage ????????????????????? */
.lib-cloud-bar .btn-cloud {
  border-color: rgba(120, 170, 255, 0.45);
  background: linear-gradient(180deg, rgba(90, 140, 230, 0.16), rgba(90, 140, 230, 0.06));
}
.lib-cloud-bar .btn-cloud:hover {
  border-color: rgba(140, 185, 255, 0.85);
  background: linear-gradient(180deg, rgba(110, 160, 240, 0.28), rgba(110, 160, 240, 0.12));
}
.cloud-page { padding: 4px 2px 20px; }
.cloud-page--connect { padding: 0.35rem 0.15rem 1.25rem; min-height: 100%; }
.cloud-hero { margin: 0 0 1rem; }
.cloud-hero-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-gold, #d4af37);
}
.cloud-hero-sub {
  margin: 0 0 0.75rem;
  max-width: 46rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted, #b8ab93);
}
.cloud-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9c8f77);
}
.cloud-steps li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cloud-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--accent-gold, #d4af37);
  background: rgba(212, 175, 55, 0.1);
  font-size: 0.72rem;
}
.cloud-banner { margin: 0 0 0.85rem; }
.cloud-legal-note {
  margin: 12px 2px 0;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, #9c8f77);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.cloud-legal-note a { color: var(--accent-gold, #d4af37); }
.cloud-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  margin: 12px 0 18px;
}
.cloud-cards--hero {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.25rem 0 1rem;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .cloud-cards--hero { grid-template-columns: 1fr; }
}
.cloud-card {
  border: 1px solid var(--border, rgba(212, 175, 55, 0.25));
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cloud-cards--hero .cloud-card {
  min-height: 15.5rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-width: 1px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(212, 175, 55, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.22));
}
.cloud-card.is-connected {
  border-color: rgba(80, 200, 120, 0.45);
}
.cloud-card-head { display: flex; align-items: center; gap: 12px; }
.cloud-card-logo {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}
.cloud-card-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cloud-card-title strong { font-size: 1.1rem; letter-spacing: 0.01em; }
.cloud-card-blurb {
  margin: 0.15rem 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted, #b8ab93);
}
.cloud-card-hint {
  display: block;
  width: 100%;
  font-size: 0.72rem;
  color: var(--text-muted, #8f836d);
}
.cloud-card-acct { font-size: 13px; }
.cloud-card-err { color: #ff8a7a; font-size: 12px; background: rgba(255, 80, 60, 0.1); border: 1px solid rgba(255, 80, 60, 0.3); border-radius: 8px; padding: 6px 9px; }
.cloud-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.cloud-card-actions .btn { padding: 6px 12px; font-size: 13px; }
.cloud-connect-btn {
  width: 100%;
  min-height: 2.55rem;
  font-size: 0.95rem !important;
  font-weight: 800;
  letter-spacing: 0.03em;
  justify-content: center;
}

.cloud-browser {
  border: 1px solid var(--border, rgba(212, 175, 55, 0.3));
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.cloud-browser-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cloud-browser-head strong { font-size: 14px; white-space: nowrap; }
.cloud-search { flex: 1; min-width: 140px; }
.cloud-search input { width: 100%; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.25); color: inherit; }
.cloud-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 14px; font-size: 13px; }
.cloud-crumb { background: none; border: none; color: var(--accent, #d4af37); cursor: pointer; padding: 2px 4px; font-size: 13px; }
.cloud-crumb:hover { text-decoration: underline; }
.cloud-crumb-sep { opacity: 0.4; }
.cloud-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cloud-toolbar .btn { padding: 5px 11px; font-size: 12px; }
.cloud-filelist { max-height: 420px; overflow-y: auto; }
.cloud-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.cloud-row-folder { cursor: pointer; }
.cloud-row-folder:hover { background: rgba(255, 255, 255, 0.04); }
.cloud-row-check { display: inline-flex; }
.cloud-row-icon { width: 22px; text-align: center; }
.cloud-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-row-meta { font-size: 12px; color: var(--text-muted, #9c8f77); white-space: nowrap; }
.cloud-row-import { padding: 4px 10px; font-size: 12px; }
.cloud-empty { padding: 22px 14px; text-align: center; color: var(--text-muted, #9c8f77); font-size: 13px; }
.cloud-more { padding: 10px 14px; text-align: center; }

/* ============================================================
   RESPONSIVE LAYOUT SYSTEM ? tablet & phone (true mobile layout)
   Breakpoints:
     ?1440px  large desktop (base rules)
     1024?1439 standard desktop / laptop (base rules)
     768?1023  tablet landscape ? stacked decks
     600?767   tablet portrait / large phones ? stacked
     ?599      phones ? compact stacked
   Do NOT shrink the desktop grid ? rebuild for narrow viewports.
   ============================================================ */

/* ?? Shared narrow-viewport primitives (driven by html.swagg-narrow from JS) ?? */
html.swagg-narrow,
html.swagg-narrow body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Touch-friendly controls on any coarse pointer (phones + tablets). */
@media (pointer: coarse) {
  .fx-assign-btn,
  .deck-fx-btn,
  .effects-deck-chip .btn,
  .btn,
  .nav-tab,
  .deck-pick-btn { min-height: 44px; }
  .effect-wet-range,
  .deck-fx-wet input[type="range"],
  .vertical-fader,
  input[type="range"] { height: 34px; }
  .effect-wet-range::-webkit-slider-thumb,
  .deck-fx-wet input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  .effect-wet-range::-moz-range-thumb,
  .deck-fx-wet input[type="range"]::-moz-range-thumb,
  input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}

/* ========== TABLET LANDSCAPE + BELOW (?1023px): stack decks ========== */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  .app-shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
  }

  .top-bar {
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    padding: 0.45rem 0.65rem;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
  }
  .brand { border-right: none; padding-right: 0.35rem; margin-right: 0; }
  .brand::after { display: none; }
  .brand-logo { height: 52px; max-width: min(220px, 48vw); }
  .nav-tabs {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { flex: 0 0 auto; padding: 0.45rem 0.75rem; }
  .top-actions {
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.3rem;
    scrollbar-width: none;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions .btn,
  .top-actions .chip,
  .top-actions a.btn { flex: 0 0 auto; white-space: nowrap; font-size: 0.78rem; padding: 0.4rem 0.55rem; }

  .main-stage {
    padding: 0.4rem 0.45rem 0.35rem;
    overflow: hidden;
  }
  .performance-layout {
    gap: 0.5rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Phone / portrait: stack decks. Tablet landscape 2-deck keeps side-by-side. */
  .decks-row.decks-visible.count-1,
  .decks-row.decks-visible.count-3,
  .decks-row.decks-visible.count-4,
  .decks-row.many,
  .decks-row.four-primary,
  .decks-row.compact,
  .decks-row.two-only {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
    gap: 0.65rem;
  }
  .decks-row.decks-visible.count-2 {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
    gap: 0.65rem;
  }
  html.swagg-tablet.swagg-landscape .performance-layout[data-deck-count="2"] .decks-row.decks-visible.count-2 {
    grid-template-columns: 1fr 1fr !important;
    max-width: none;
    margin-inline: 0;
  }

  /* Compact-style decks even for 2-deck sessions: fit width, no side fader overflow */
  .decks-row.decks-visible .deck {
    padding: 0.45rem 0.5rem 0.55rem;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .decks-row.decks-visible .deck-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .decks-row.decks-visible .deck-platter-wrap {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: center;
    column-gap: 0.5rem;
  }
  .decks-row.decks-visible .deck-side { display: none !important; }
  .decks-row.decks-visible .deck-main { width: 100%; min-width: 0; }

  /* Cap platters ? never oversized on tablet */
  .decks-row.decks-visible .turntable {
    --tt-w: clamp(220px, 48vw, 340px) !important;
  }

  /* Force horizontal waveform on narrow screens (vertical wastes width) */
  .deck.wave-vertical {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  .deck.wave-vertical > .waveform-slot.vertical {
    width: 100% !important;
    min-height: 64px !important;
    height: 72px !important;
    order: -1;
  }
  .decks-row.decks-visible .waveform-slot.horizontal,
  .decks-row.decks-visible .waveform-canvas.horizontal {
    width: 100%;
    max-width: 100%;
    height: 64px;
  }

  .deck-transport,
  .deck-fx-row,
  .stem-row { flex-wrap: wrap; min-width: 0; }
  .deck-fx-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .deck-fx-btn { min-width: 0; }

  .beat-tools { max-width: 720px; margin-inline: auto; width: 100%; }
  .tempo-match-strip,
  .beat-match-strip { grid-template-columns: 56px 1fr; }
  .tempo-match-canvas { height: 56px !important; }
  .beat-match-canvas { height: 44px !important; }

  .mixer-and-lower {
    grid-template-columns: 1fr !important;
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
  }

  /* Mixer = docked bottom sheet (no overlap / no off-screen float) */
  .mixer-panel.mixer-float.is-docked,
  .mixer-panel.mixer-float.is-floating,
  .mixer-panel.mixer-float.is-floating.is-centered {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(42vh, 320px) !important;
    border-radius: 10px 10px 0 0;
    transform: none !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 40;
  }
  html.mixer-is-docked .performance-layout,
  html.mixer-is-floating .performance-layout {
    padding-bottom: min(44vh, 340px);
  }
  .mixer-body-horizontal {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
    gap: 0.45rem;
  }
  .mixer-channels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
  }
  .mixer-channel .vertical-fader { max-height: 90px; }

  .panel-page,
  .library-panel,
  .settings-body,
  .effects-panel { max-width: 100%; overflow-x: hidden; }

  .settings-layout { grid-template-columns: 1fr; min-height: 0; }
  .settings-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.35rem;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { flex: 0 0 auto; white-space: nowrap; }

  .effects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .status-bar {
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
  }
}

/* ========== TABLET PORTRAIT / LARGE PHONES (?767px) ========== */
@media (max-width: 767px) {
  .brand-logo { height: 46px; max-width: min(200px, 50vw); }
  .main-stage { padding: 0.3rem; }
  .decks-row.decks-visible .turntable {
    --tt-w: clamp(200px, 58vw, 300px) !important;
  }
  .deck-platter-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .deck-bpm-side {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    gap: 0.35rem;
  }
  .tt-bpm-panel { min-height: 3.2rem; font-size: 1.15rem; }
  .mixer-body-horizontal { grid-template-columns: 1fr; }
  .mixer-channels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .effects-grid { grid-template-columns: 1fr; }
  .library-toolbar,
  .library-access-row { flex-wrap: wrap; }
  .track-table,
  .library-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========== PHONES (?599px) ========== */
@media (max-width: 599px) {
  .brand-logo { height: 42px; max-width: min(170px, 52vw); }
  .top-bar { padding: 0.35rem 0.45rem; gap: 0.3rem; }
  .nav-tab { padding: 0.4rem 0.65rem; font-size: 0.82rem; }
  .deck { padding: 0.4rem !important; }
  .decks-row.decks-visible .turntable {
    --tt-w: clamp(180px, 70vw, 260px) !important;
  }
  .decks-row.decks-visible .waveform-canvas.horizontal { height: 52px; }
  .deck-fx-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck-transport .btn,
  .deck-transport .file-btn { min-height: 42px; font-size: 0.78rem; }
  .mixer-panel.mixer-float.is-docked,
  .mixer-panel.mixer-float.is-floating,
  .mixer-panel.mixer-float.is-floating.is-centered {
    max-height: min(46vh, 280px) !important;
  }
  html.mixer-is-docked .performance-layout,
  html.mixer-is-floating .performance-layout {
    padding-bottom: min(48vh, 300px);
  }
  .mixer-channel .ch-label { font-size: 0.7rem; }
  .beat-tools-title { font-size: 0.85rem; }
  .tempo-match-strip,
  .beat-match-strip { grid-template-columns: 1fr; }
  .tm-lane-labels { flex-direction: row; gap: 0.6rem; }
  .rec-panel {
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    top: 48px;
    max-width: none;
  }
  .form-grid { grid-template-columns: 1fr; }
}

/* ========== VERY SMALL PHONES (?420px) ========== */
@media (max-width: 420px) {
  .brand-logo { height: 38px; }
  .decks-row.decks-visible .turntable {
    --tt-w: clamp(160px, 78vw, 220px) !important;
  }
  .deck-fx-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-stage { padding: 0.25rem; }
}

/* ========== SHORT LANDSCAPE (phones/tablets rotated) ========== */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .top-bar { padding: 0.25rem 0.5rem; }
  .brand-logo { height: 36px; }
  .nav-tabs { order: unset; flex: 0 1 auto; width: auto; max-width: 50%; }
  .decks-row.decks-visible {
    max-width: none;
    gap: 0.4rem;
  }
  /* Still stacked ? but denser so both decks fit without zoom */
  .decks-row.decks-visible .turntable {
    --tt-w: clamp(140px, 28vh, 200px) !important;
  }
  .decks-row.decks-visible .waveform-canvas.horizontal { height: 40px; }
  .mixer-panel.mixer-float.is-docked,
  .mixer-panel.mixer-float.is-floating {
    max-height: 38vh !important;
  }
  html.mixer-is-docked .performance-layout,
  html.mixer-is-floating .performance-layout {
    padding-bottom: 40vh;
  }
}

/* ========== STANDARD DESKTOP (1024?1439): keep side-by-side ========== */
@media (min-width: 1024px) and (max-width: 1439px) {
  .decks-row.decks-visible.count-2 .turntable {
    --tt-w: clamp(260px, 26vw, 400px);
  }
  .decks-row.decks-visible.count-4 .turntable,
  .decks-row.many .turntable {
    --tt-w: clamp(200px, 20vw, 320px);
  }
}

/* ========== LARGE DESKTOP (?1440): roomy platters ========== */
@media (min-width: 1440px) {
  .decks-row.decks-visible.count-2 .turntable {
    --tt-w: clamp(320px, 28vw, 480px);
  }
}

/* Legal notice modals (Record Mix, cloud connect, AI Stems) */
.legal-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.legal-notice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.legal-notice-panel {
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--panel-bg, #1a1410);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.legal-notice-panel h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}
.legal-notice-panel p {
  margin: 0 0 12px;
  line-height: 1.5;
}
.legal-notice-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.legal-notice-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.legal-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* ?? Broadcast announcements ?? */
.btn-announcements { position: relative; }
.ann-badge {
  display: inline-flex;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 999px;
  background: #c45c5c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  vertical-align: top;
}
/* [hidden] must win over display:flex ? otherwise empty overlays dim the login gate */
.swagg-ann-banner[hidden],
.swagg-ann-panel[hidden],
.swagg-ann-modal[hidden] {
  display: none !important;
}

.swagg-ann-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: linear-gradient(180deg, rgba(40, 32, 18, 0.97), rgba(20, 16, 10, 0.96));
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--accent-cream, #f3ebd8);
  padding: 10px 14px;
}
.swagg-ann-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.swagg-ann-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.swagg-ann-panel {
  position: fixed;
  top: 56px;
  right: 12px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: #14110e;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  color: #f3ead3;
}
.swagg-ann-panel-head, .swagg-ann-panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.swagg-ann-panel-foot { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; }
.swagg-ann-panel-foot a { color: var(--accent-gold, #d4af37); }
.swagg-ann-panel-body { overflow: auto; padding: 8px; flex: 1; }
.swagg-ann-item {
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.swagg-ann-item.is-unread { border-color: rgba(212, 175, 55, 0.4); }
.swagg-ann-item-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.swagg-ann-item-top em { font-style: normal; opacity: 0.65; font-size: 0.78rem; }
.swagg-ann-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.swagg-ann-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.swagg-ann-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(85vh, 720px);
  overflow: auto;
  background: linear-gradient(180deg, #1a1712, #0e0c09);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  padding: 24px 22px;
  color: #f3ead3;
}
.swagg-ann-modal-icon { font-size: 2rem; margin-bottom: 8px; }
.swagg-ann-modal-full { margin: 12px 0 18px; color: #cdbf9e; line-height: 1.5; white-space: pre-wrap; }
.swagg-ann-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.swagg-whats-new .swagg-whats-close { position: absolute; top: 12px; right: 12px; }
.swagg-release { margin: 16px 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.swagg-release h3 { margin: 10px 0 6px; font-size: 0.95rem; color: var(--accent-gold, #d4af37); text-transform: capitalize; }
.swagg-release ul { margin: 0; padding-left: 1.2rem; }
.swagg-release a { color: var(--accent-bronze, #b08d57); }
@media (max-width: 720px) {
  .swagg-ann-panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: 16px 16px 0 0;
  }
  .swagg-ann-banner-actions { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .swagg-ann-banner, .swagg-ann-panel, .swagg-ann-modal { transition: none !important; }
}

/* ??? Your Music library chrome (UX redesign) ??? */
.lib-hero {
  margin: 0 0 1rem;
  padding: 1rem 0 0.25rem;
}
.lib-hero-title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  letter-spacing: 0.02em;
  color: var(--accent-cream, #f0e6d0);
}
.lib-hero-sub {
  margin: 0 0 0.9rem;
  max-width: 42rem;
  color: var(--text-secondary, #b8ad98);
  font-size: 0.92rem;
  line-height: 1.45;
}
.lib-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.lib-hero-primary { font-weight: 700; }
.lib-hero-more {
  position: relative;
}
.lib-hero-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 8px;
  color: var(--text-secondary, #b8ad98);
  font-size: 0.85rem;
}
.lib-hero-more > summary::-webkit-details-marker { display: none; }
.lib-hero-more-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 12rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 10px;
  background: #12100c;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.lib-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  background: rgba(20, 16, 10, 0.4);
}
.lib-status-text {
  flex: 1;
  min-width: 12rem;
  color: var(--accent-cream, #f0e6d0);
  font-size: 0.9rem;
}
.lib-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lib-folders-chip {
  margin-top: 0.55rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-gold, #d4af37);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.lib-nav--simple {
  gap: 0.15rem 0.85rem;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.lib-nav--simple .lib-nav-tab {
  padding: 0.35rem 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  font-weight: 600;
  color: var(--text-secondary, #b8ad98);
}
.lib-nav--simple .lib-nav-tab:hover {
  color: var(--accent-cream, #f0e6d0);
  background: transparent;
  border: 0;
}
.lib-nav--simple .lib-nav-tab.is-active {
  color: var(--accent-gold, #d4af37);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  border-bottom: 2px solid var(--accent-gold, #d4af37);
  font-weight: 700;
}
.lib-nav--simple .lib-nav-count,
.lib-nav--simple .lib-nav-tab .pl-count {
  margin-left: 0.3rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.65;
}
.lib-nav--simple .lib-nav-tab.is-active .lib-nav-count,
.lib-nav--simple .lib-nav-tab.is-active .pl-count {
  background: transparent;
  color: inherit;
  opacity: 0.8;
}
.lib-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 0.85rem;
}
.lib-tools .lib-search {
  flex: 1 1 16rem;
  min-width: 12rem;
}
.lib-tool-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary, #b8ad98);
  font-size: 0.82rem;
}
.lib-tool-select select {
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--accent-cream, #f0e6d0);
}
.lib-select-bar,
.lib-bulk-bar.lib-select-bar,
div.lib-select-bar {
  position: sticky;
  bottom: 0.5rem;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  background: color-mix(in srgb, #1a1510 92%, #c4a35a);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.lib-select-bar[hidden] { display: none !important; }
.lib-bulk-count {
  font-weight: 700;
  color: var(--accent-cream, #f0e6d0);
  margin-right: 0.25rem;
}
.lib-select-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #b8ad98);
}
.lib-track-list {
  display: grid;
  gap: 0.65rem;
}
.lib-track-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 0.7rem 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 20, 14, 0.9), rgba(10, 8, 6, 0.85));
}
.lib-track-row.is-selected {
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.08);
}
.lib-track-row.is-unavailable { opacity: 0.92; }
.lib-track-row.is-needs-reconnect {
  border-color: rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, rgba(48, 36, 14, 0.75), rgba(14, 10, 6, 0.9));
  cursor: pointer;
}
.perf-ql-row.is-needs-reconnect,
.quickload-item.is-needs-reconnect {
  cursor: pointer;
}
button.lib-reconnect-action {
  min-height: 2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
button.lib-disconnect-action {
  min-height: 2rem;
  margin-left: 0.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.9;
  border-color: rgba(232, 220, 192, 0.28);
  color: rgba(232, 220, 192, 0.92);
  background: rgba(255, 255, 255, 0.04);
}
button.lib-disconnect-action:hover {
  opacity: 1;
  border-color: rgba(232, 220, 192, 0.55);
  color: #fff4d4;
  background: rgba(255, 255, 255, 0.08);
}
/* ===== Library deck-load buttons: professional segmented cluster =====
   Equal compact gold buttons with one shared rhythm; the current load
   target fills solid; Remove sits apart at a deliberate distance so a
   destructive action is never a slip away from a load. */
#studio-root .deck-btn-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  vertical-align: middle;
}
#studio-root .deck-btn-group .perf-ql-deck {
  min-width: 4.6em;
  min-height: 1.95rem;
  padding: 0.2rem 0.7rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  color: #e6c766 !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: background 0.12s ease, color 0.12s ease;
}
#studio-root .deck-btn-group .perf-ql-deck:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.2) !important;
  color: #f0d060 !important;
}
/* Load target: subtle ring only — a filled button means "song is ON this
   deck", never "where a click would land". */
#studio-root .deck-btn-group .perf-ql-deck.is-target {
  border-color: rgba(240, 208, 96, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(240, 208, 96, 0.35);
}
/* Lit in the deck's own color when THIS song is loaded on that deck. */
#studio-root .deck-btn-group .perf-ql-deck.is-loaded {
  background: var(--dk, #e8d5a3) !important;
  color: #10100c !important;
  border-color: var(--dk, #e8d5a3) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--dk, #e8d5a3) 55%, transparent);
}
#studio-root .deck-btn-group .perf-ql-deck:disabled {
  opacity: 0.4;
}
#studio-root .deck-btn-group + .lib-delete-action,
#studio-root td .lib-delete-action {
  margin-left: 14px;
  min-height: 1.95rem;
  padding: 0.2rem 0.7rem;
  border-radius: 6px;
  font-size: 0.74rem;
  vertical-align: middle;
}

/* Remove from library — lives in the More dropdown, styled as a soft danger action */
button.lib-delete-action {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(230, 100, 80, 0.9);
  border-color: rgba(230, 100, 80, 0.3);
  background: rgba(230, 100, 80, 0.06);
}
button.lib-delete-action:hover {
  color: #ff6b50;
  border-color: rgba(230, 100, 80, 0.6);
  background: rgba(230, 100, 80, 0.12);
}
@media (pointer: coarse) {
  button.lib-disconnect-action {
    min-height: 2.75rem;
    padding: 0.45rem 0.75rem;
  }
}
.lib-track-row.is-in-quickload {
  box-shadow: inset 3px 0 0 var(--accent-gold, #d4af37);
}
.lib-track-row:focus {
  outline: 2px solid rgba(212, 175, 55, 0.65);
  outline-offset: 2px;
}
.lib-reconnect-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin: 0.35rem 0 0.15rem;
}
.lib-reconnect-badge,
button.lib-reconnect-badge.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.65);
  background: rgba(212, 175, 55, 0.16);
  color: var(--accent-gold, #d4af37);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.1;
}
.lib-reconnect-badge:hover,
button.lib-reconnect-badge.chip:hover {
  background: rgba(212, 175, 55, 0.28);
  border-color: #f0dca8;
  color: #fff4d4;
}
.lib-reconnect-hint {
  font-size: 0.78rem;
  color: rgba(232, 220, 192, 0.88);
}
@media (pointer: coarse) {
  .lib-reconnect-badge,
  button.lib-reconnect-badge.chip {
    min-height: 2.75rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
  }
}
.lib-track-check { display: flex; align-items: center; }
.lib-track-art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(255, 255, 255, 0.04)),
    #1a1510;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lib-track-main { min-width: 0; }
.lib-track-title {
  font-weight: 700;
  color: var(--accent-cream, #f0e6d0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-track-artist {
  font-size: 0.82rem;
  color: var(--text-secondary, #b8ad98);
  margin-top: 0.1rem;
}
.lib-track-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: rgba(184, 173, 152, 0.9);
}
.lib-track-meta .lib-bpm.has-bpm { color: var(--accent-gold, #d4af37); font-weight: 600; }
.lib-track-path {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
/* Deck button group wrapper — sets a reliable gap between Deck 1, Deck 2, etc. */
.deck-btn-group {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
}
.lib-track-order-btns { display: inline-flex; gap: 0.25rem; }
.lib-load-wrap { position: relative; display: inline-flex; }
.lib-load-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}
.lib-load-select {
  min-width: 5.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  background: #0c0a08;
  color: var(--accent-cream, #f0e6d0);
  font-size: 0.82rem;
}
.lib-track-more { position: relative; }
.lib-track-more > summary {
  list-style: none;
  cursor: pointer;
}
.lib-track-more > summary::-webkit-details-marker { display: none; }
.lib-track-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 15;
  min-width: 11rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--bg-metal-edge, #3a3428);
  border-radius: 10px;
  background: #12100c;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.add-music-modal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: auto;
}
body > .add-music-modal,
.add-music-modal.add-music-modal--portal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 15000 !important;
}
.add-music-modal[hidden] { display: none !important; }
.add-music-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.add-music-card {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  padding: 1.25rem 1.35rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: linear-gradient(180deg, #1c1812, #0e0c09);
  color: var(--accent-cream, #f0e6d0);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.add-music-card h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}
.add-music-x {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #b8ad98);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.add-music-options {
  display: grid;
  gap: 0.75rem;
}
.add-music-option {
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}
.add-music-option strong { display: block; margin-bottom: 0.2rem; }
.add-music-option p {
  margin: 0 0 0.65rem;
  color: var(--text-secondary, #b8ad98);
  font-size: 0.86rem;
}
.add-music-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: rgba(184, 173, 152, 0.85);
}
@media (max-width: 720px) {
  .lib-track-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "check art"
      "main main"
      "actions actions";
  }
  .lib-track-check { grid-area: check; }
  .lib-track-art { grid-area: art; }
  .lib-track-main { grid-area: main; }
  .lib-track-actions {
    grid-area: actions;
    justify-content: flex-start;
  }
  .lib-hero-title { font-size: 1.4rem; }
}

/* ========== Performance layouts: 2/4-deck ? desktop/tablet/mobile ========== */
.performance-layout {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}

.perf-music-rail {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem 0.95rem;
  border: 2px solid rgba(212, 175, 55, 0.55);
  border-radius: 14px;
  background:
    linear-gradient(165deg, rgba(58, 44, 22, 0.98) 0%, rgba(22, 16, 10, 0.96) 45%, rgba(10, 8, 6, 0.97) 100%);
  box-shadow:
    0 0 0 1px rgba(243, 230, 196, 0.08) inset,
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(196, 163, 90, 0.12);
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
  overflow: visible;
  z-index: 30;
}

.perf-music-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f0dca8, #c4a35a);
}

.perf-music-head {
  display: grid;
  grid-template-columns: auto minmax(14rem, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: center;
  padding-left: 0.55rem;
  overflow: visible;
}

.perf-music-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--accent-gold, #d4af37);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.perf-music-sub {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-cream, #f0e6d0);
  opacity: 0.9;
}

.perf-music-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  z-index: 40;
}

.perf-music-search .lib-search-icon {
  left: 14px;
  width: 20px;
  height: 20px;
  color: var(--accent-gold, #d4af37);
  opacity: 1;
}

.perf-ql-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 2.75rem 0.75rem 2.75rem !important;
  font-size: 1.05rem !important;
  font-weight: 600;
  border-width: 2px !important;
  border-color: rgba(212, 175, 55, 0.65) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #1a1510, #0a0806) !important;
  box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.12);
}

.perf-ql-input:focus {
  border-color: #f0dca8 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28);
  outline: none;
}

.perf-ql-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-gold, #d4af37);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.perf-ql-chevron:hover {
  background: rgba(212, 175, 55, 0.12);
}

.perf-ql-chevron.is-open {
  transform: translateY(-50%) rotate(180deg);
}

.perf-ql-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: grid;
  gap: 0.4rem;
  max-height: min(22rem, 50vh);
  overflow: auto;
  padding: 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, #1c1510 0%, #0c0a08 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.12);
}

.perf-ql-dropdown[hidden] {
  display: none !important;
}

.perf-ql-drop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0.35rem 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cream, #f0e6d0);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  margin-bottom: 0.15rem;
}

.perf-ql-dropdown .perf-music-empty,
.perf-ql-dropdown .perf-music-more {
  padding-left: 0.35rem;
}

.perf-music-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.perf-music-links .btn {
  min-height: 2.6rem;
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  border-color: rgba(212, 175, 55, 0.4);
}

.perf-music-results {
  display: grid;
  gap: 0.45rem;
  max-height: 13.5rem;
  overflow: auto;
  padding: 0.15rem 0.15rem 0.15rem 0.55rem;
}

.perf-ql-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: linear-gradient(90deg, rgba(40, 30, 16, 0.75), rgba(0, 0, 0, 0.35));
  transition: border-color 0.12s ease, background 0.12s ease;
}

.perf-ql-row:hover {
  border-color: rgba(212, 175, 55, 0.55);
  background: linear-gradient(90deg, rgba(58, 42, 18, 0.9), rgba(12, 10, 8, 0.55));
}

.perf-ql-row.is-unavailable { opacity: 0.65; }

.perf-ql-name {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #fff8e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perf-ql-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: rgba(232, 220, 192, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perf-ql-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.perf-ql-deck {
  min-width: 5.25rem;
  min-height: 2.45rem;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #f3e6c4;
  background: linear-gradient(180deg, #f0dca8, #c4a35a);
  color: #14100a;
  box-shadow: 0 2px 8px rgba(196, 163, 90, 0.35);
}

.perf-ql-deck:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.perf-ql-deck:disabled {
  opacity: 0.45;
  filter: grayscale(0.35);
  box-shadow: none;
}

.perf-music-empty,
.perf-music-more {
  margin: 0.25rem 0 0;
  padding-left: 0.55rem;
  font-size: 0.9rem;
  color: var(--accent-cream, #f0e6d0);
}

.pads-soon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}

/* Collapse unused / disabled deck chrome */
.deck-stems--coming-soon {
  padding: 0.35rem 0.55rem !important;
  margin: 0 0 0.35rem !important;
  border-style: dashed !important;
}

.deck-stems--coming-soon .deck-stems-label {
  margin: 0;
}

.deck-stems--coming-soon .stems-coming-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  margin: 0.15rem 0 0;
}

.deck-stems--coming-soon .stems-coming-soon-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #b8ad98);
}

.deck-stems--coming-soon .stems-coming-soon-msg {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(184, 173, 152, 0.85);
}

.deck-stems--coming-soon.deck-stems--compact .stems-coming-soon-title,
.deck-stems--coming-soon.deck-stems--compact .stems-coming-soon-short,
.deck-stems--coming-soon.deck-stems--compact .stems-coming-soon-secondary {
  display: none !important;
}

.deck-stems--coming-soon.deck-stems--compact .stems-coming-soon {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.deck-stems--coming-soon.deck-stems--compact .stems-coming-soon-msg {
  font-size: 0.78rem;
  color: var(--text-secondary, #b8ad98);
}

.deck-stems--coming-soon.deck-stems--expanded .stems-coming-soon {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.deck-stems--coming-soon.deck-stems--expanded .stems-coming-soon-short,
.deck-stems--coming-soon.deck-stems--expanded .stems-coming-soon-secondary {
  display: block !important;
  margin: 0;
  font-size: 0.7rem;
  color: rgba(184, 173, 152, 0.75);
}

.deck-stems--coming-soon.deck-stems--expanded .stems-coming-soon-msg {
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: normal;
}

.deck-stems--pending {
  min-height: 0;
  padding: 0.2rem 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ??? 2-deck: music-first layout ??? */
.performance-layout[data-deck-count="2"] .deck-song-legacy {
  display: none;
}

.performance-layout[data-deck-count="2"] .perf-lower .pads-side {
  display: none;
}

.performance-layout[data-deck-count="2"] .perf-lower {
  grid-template-columns: 1fr;
}

.performance-layout[data-deck-count="2"] .prepare-side {
  max-height: 9.5rem;
  overflow: auto;
}

.performance-layout[data-deck-count="2"] .prepare-side .quickload-list {
  max-height: 5.5rem;
  overflow: auto;
}

.performance-layout[data-deck-count="2"] .decks-row.count-2 {
  flex: 1 1 auto;
  min-height: 0;
}

.performance-layout[data-deck-count="2"] .perf-music-results {
  max-height: 13.5rem;
}

.mixer-panel[data-deck-count="2"] .mixer-channels.count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 22rem;
}

.mixer-panel[data-deck-count="2"] .mixer-channel.is-idle-deck {
  display: none;
}

.mixer-panel[data-deck-count="2"] .mixer-body-horizontal {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

/* ??? 4-deck: denser stage + side music rail on desktop ??? */
.performance-layout[data-deck-count="4"] .perf-music-sub {
  display: none;
}

.performance-layout[data-deck-count="4"] .perf-music-results {
  max-height: 8.5rem;
}

.performance-layout[data-deck-count="4"] .deck-song-legacy {
  display: none;
}

.mixer-panel[data-deck-count="4"] .mixer-channels.count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mixer-panel[data-deck-count="4"] .mixer-channel.is-idle-deck {
  display: none;
}

/* Desktop (?1024): 2-deck gives Find Music + decks priority */
body.swagg-desktop .performance-layout[data-deck-count="2"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  height: 100%;
  min-height: 0;
}

body.swagg-desktop .performance-layout[data-deck-count="2"] .beat-tools { grid-row: 1; }
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-music-rail { grid-row: 2; }
body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row { grid-row: 3; align-content: stretch; }
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower { grid-row: 4; }

/* Docked: decks own the flexible row; Find Music stays content-sized. */
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] {
  grid-template-rows: auto auto minmax(18rem, 1fr) auto;
  gap: 0.5rem;
}

html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row {
  min-height: 18rem;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  /* Decks own the flexible row; Up Next stays content-sized (never 1fr). */
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.55rem 0.75rem;
  height: 100%;
  min-height: 0;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .beat-tools {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-rail {
  grid-column: 2;
  grid-row: 2 / span 2;
  max-height: none;
  height: 100%;
  min-height: 0;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-head {
  grid-template-columns: 1fr;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-links {
  justify-content: flex-start;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-results {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .decks-row {
  grid-column: 1;
  grid-row: 2;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-lower {
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 1fr;
}

body.swagg-desktop .performance-layout[data-deck-count="4"] .pads-side {
  display: none;
}

/* Tablet (600?1023): stack music ? decks ? up next; 2-col decks when landscape */
body.swagg-tablet .performance-layout .perf-music-head {
  grid-template-columns: 1fr;
}

body.swagg-tablet .performance-layout .perf-music-results {
  max-height: 10rem;
}

body.swagg-tablet .performance-layout[data-deck-count="2"] .decks-row.count-2 {
  grid-template-columns: 1fr 1fr;
}

body.swagg-tablet.swagg-landscape .performance-layout[data-deck-count="2"] .perf-music-results {
  max-height: 7.5rem;
}

body.swagg-tablet .performance-layout[data-deck-count="4"] .decks-row.count-4 {
  grid-template-columns: 1fr 1fr;
}

body.swagg-tablet .perf-lower {
  grid-template-columns: 1fr;
}

body.swagg-tablet .pads-side { display: none; }

body.swagg-tablet .mixer-panel[data-deck-count="2"] .mixer-channels.count-2 {
  max-width: none;
}

/* Phone (?599): single column ? used when mobile shell is NOT active (non-perf panels) */
html.swagg-phone .performance-layout .perf-music-head,
body.swagg-phone .performance-layout .perf-music-head {
  grid-template-columns: 1fr;
}

html.swagg-phone .performance-layout .perf-music-sub,
body.swagg-phone .performance-layout .perf-music-sub {
  display: none;
}

html.swagg-phone .perf-ql-row,
body.swagg-phone .perf-ql-row {
  grid-template-columns: 1fr;
}

html.swagg-phone .perf-ql-actions,
body.swagg-phone .perf-ql-actions {
  width: 100%;
}

html.swagg-phone .perf-ql-deck,
body.swagg-phone .perf-ql-deck {
  flex: 1 1 40%;
  min-height: 2.4rem;
}

html.swagg-phone .decks-row.decks-visible.count-2,
html.swagg-phone .decks-row.decks-visible.count-4,
body.swagg-phone .decks-row.decks-visible.count-2,
body.swagg-phone .decks-row.decks-visible.count-4 {
  grid-template-columns: 1fr;
}

html.swagg-phone .perf-lower .pads-side,
body.swagg-phone .perf-lower .pads-side { display: none; }

/* ========== MOBILE PERFORMANCE APP SHELL ==========
   Activated by html.mobile-perf-active + data-mobile-ws.
   One full-width workspace at a time. No horizontal canvas / translateX carousel.
   Audit offenders neutralized here:
   - .mixer-panel.mixer-float fixed + 100vw widths
   - .mixer-channels 4-col grids
   - .deck-platter-wrap max-content / min-width: 8.75rem
   - .turntable --tt-w: 70vw beside BPM column
   - .top-actions / .nav-tabs nowrap horizontal scroll chrome
   - html.mixer-is-docked padding-bottom expanding layout
   ============================================================ */

.mobile-perf-header,
.mobile-bottom-nav,
.mobile-more-panel {
  display: none;
}

html.mobile-perf-active,
html.mobile-perf-active body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

html.mobile-perf-active .app-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  grid-template-rows: none;
}

html.mobile-perf-active .top-bar,
html.mobile-perf-active .status-bar {
  display: none !important;
}

html.mobile-perf-active .main-stage {
  padding: 0 !important;
  margin: 0;
  overflow: hidden !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}

html.mobile-perf-active .mobile-performance-shell.performance-layout {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  gap: 0;
  padding: 0 !important;
  margin: 0;
  position: relative;
}

html.mobile-perf-active .mobile-perf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(196, 163, 90, 0.35);
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.98), rgba(12, 10, 8, 0.98));
  z-index: 20;
}

html.mobile-perf-active .mobile-perf-brand {
  font-family: "Bebas Neue", "DM Sans", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--accent-gold, #d4af37);
  white-space: nowrap;
}

html.mobile-perf-active .mobile-perf-ws-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(240, 230, 208, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide every workspace section by default; reveal only the active one. */
html.mobile-perf-active .beat-tools,
html.mobile-perf-active .perf-music-rail,
html.mobile-perf-active .decks-row,
html.mobile-perf-active .decks-row.mobile-workspace,
html.mobile-perf-active .perf-lower,
html.mobile-perf-active .mobile-more-panel,
html.mobile-perf-active .mixer-panel {
  display: none !important;
}

/*
  Reveal ONLY the active workspace.
  Do not target `.mobile-workspace` alone ? decks-row also has that class and
  was overriding the Mixer hide rule (stacked Deck 1?4 above Mixer).
*/
html.mobile-perf-active[data-mobile-ws^="deck"] .decks-row.mobile-workspace,
html.mobile-perf-active[data-mobile-ws="music"] .perf-music-rail,
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel,
html.mobile-perf-active[data-mobile-ws="more"] .mobile-more-panel,
html.mobile-perf-active[data-mobile-ws="queue"] .mobile-more-panel {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem 0.75rem;
}

/* Mixer workspace: decks / music / up-next stay fully hidden */
html.mobile-perf-active[data-mobile-ws="mixer"] .decks-row,
html.mobile-perf-active[data-mobile-ws="mixer"] .decks-row.mobile-workspace,
html.mobile-perf-active[data-mobile-ws="mixer"] .perf-music-rail,
html.mobile-perf-active[data-mobile-ws="mixer"] .perf-lower,
html.mobile-perf-active[data-mobile-ws="mixer"] .beat-tools,
html.mobile-perf-active[data-mobile-ws="mixer"] .mobile-more-panel {
  display: none !important;
}

html.mobile-perf-active[data-mobile-ws^="deck"] .decks-row.mobile-workspace {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  max-width: 100%;
}

/* Only the selected deck is visible ? siblings are not offscreen beside it. */
html.mobile-perf-active[data-mobile-ws="deck1"] .deck:not([data-deck="deck1"]),
html.mobile-perf-active[data-mobile-ws="deck2"] .deck:not([data-deck="deck2"]),
html.mobile-perf-active[data-mobile-ws="deck3"] .deck:not([data-deck="deck3"]),
html.mobile-perf-active[data-mobile-ws="deck4"] .deck:not([data-deck="deck4"]) {
  display: none !important;
}

html.mobile-perf-active[data-mobile-ws^="deck"] .deck {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  align-self: flex-start;
  flex: 0 0 auto;
  box-sizing: border-box;
  overflow: visible !important;
  padding: 0.35rem 0.4rem 0.5rem !important;
  gap: 0.35rem;
}

html.mobile-perf-active .deck-body,
html.mobile-perf-active .deck-main,
html.mobile-perf-active .deck-top {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

html.mobile-perf-active .deck-body {
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem;
}

html.mobile-perf-active .deck-main {
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem;
  align-self: stretch !important;
}

/*
  ROOT PLATTER BUG: `.deck-platter-wrap .deck-bpm-side { grid-column: 2 }`
  still created an implicit 2nd column after we set 1-col template, and
  `minmax(0,1fr)` on col1 crushed the turntable to ~0 width.
*/
html.mobile-perf-active .deck-platter-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  gap: 0.35rem;
}

html.mobile-perf-active .deck-platter-wrap .turntable,
html.mobile-perf-active .deck-platter-wrap .deck-bpm-side {
  grid-column: auto !important;
  grid-row: auto !important;
}

html.mobile-perf-active .deck-platter-wrap .turntable {
  --tt-w: min(72vw, 260px) !important;
  width: var(--tt-w);
  max-width: 100%;
  flex: 0 0 auto;
}

html.mobile-perf-active .deck-bpm-side {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}

html.mobile-perf-active .tt-bpm-panel {
  min-height: 2.6rem;
  font-size: 1.05rem;
  flex: 1 1 100%;
}

html.mobile-perf-active .deck-bpm-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

html.mobile-perf-active .deck-bpm-meta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}

/* Primary transport must sit in the first screen */
html.mobile-perf-active .deck-transport {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  order: 0;
}

html.mobile-perf-active .btn-play-primary,
html.mobile-perf-active .deck-transport > [data-act="cue"],
html.mobile-perf-active .deck-transport > [data-act="sync"] {
  min-height: 48px;
  font-weight: 800;
  font-size: 0.95rem;
}

html.mobile-perf-active .btn-play-primary {
  color: #14100a;
  border-color: #f3e6c4;
  background: linear-gradient(180deg, #f0dca8, #c4a35a);
}

html.mobile-perf-active .btn-play-primary.active {
  background: linear-gradient(180deg, #7dcea0, #2e8b57);
  border-color: #a8e6c3;
  color: #06140c;
}

html.mobile-perf-active .deck-transport > .file-btn,
html.mobile-perf-active .deck-transport > .deck-song-legacy,
html.mobile-perf-active .deck-transport > .btn-eject,
html.mobile-perf-active .deck-transport > .btn-auto-fader,
html.mobile-perf-active .deck-transport > .hc-help-dot,
html.mobile-perf-active .deck-transport > [data-act="master"],
html.mobile-perf-active .deck-transport > [data-act="quantize"],
html.mobile-perf-active .deck-transport > .btn:disabled {
  grid-column: span 1;
  min-height: 40px;
  font-size: 0.75rem;
}

html.mobile-perf-active .deck-transport > .deck-song-legacy {
  grid-column: 1 / -1;
}

html.mobile-perf-active .knob-row {
  order: 1;
}

html.mobile-perf-active .deck-stems {
  order: 2;
}

html.mobile-perf-active .deck-fx {
  order: 3;
}

html.mobile-perf-active .waveform-slot,
html.mobile-perf-active .waveform-canvas {
  max-width: 100% !important;
  width: 100% !important;
  height: 48px;
}

html.mobile-perf-active .deck-top .track-artist {
  display: none;
}

/* Stems / Effects collapsed by default on phone ? expand via section toggle */
html.mobile-perf-active .deck-stems:not(.is-expanded) > .deck-section-body,
html.mobile-perf-active .deck-fx:not(.is-expanded) > .deck-section-body {
  display: none !important;
}

/* Coming Soon / status notice must remain visible on phones without an extra tap. */
html.mobile-perf-active .deck-stems--coming-soon > .deck-section-body {
  display: block !important;
}

html.mobile-perf-active .deck-section-toggle {
  cursor: pointer;
  pointer-events: auto;
}

html.mobile-perf-active .deck-section-chevron {
  display: inline;
  margin-left: auto;
}

html.mobile-perf-active .deck-stems.is-expanded .deck-section-chevron,
html.mobile-perf-active .deck-fx.is-expanded .deck-section-chevron {
  transform: rotate(180deg);
}

/* Music workspace */
html.mobile-perf-active[data-mobile-ws="music"] .perf-music-rail {
  position: relative !important;
  top: auto !important;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

html.mobile-perf-active[data-mobile-ws="music"] .perf-music-head {
  grid-template-columns: 1fr;
}

html.mobile-perf-active[data-mobile-ws="music"] .perf-music-results {
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
}

html.mobile-perf-active[data-mobile-ws="music"] .perf-ql-row {
  grid-template-columns: 1fr;
}

html.mobile-perf-active[data-mobile-ws="music"] .perf-ql-actions {
  width: 100%;
}

html.mobile-perf-active[data-mobile-ws="music"] .perf-ql-deck {
  flex: 1 1 42%;
  min-height: 2.5rem;
}

/* Mixer workspace ? in-flow, never fixed / never 100vw sibling overlay */
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.mixer-float,
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.mixer-float.is-docked,
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.mixer-float.is-floating,
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.mixer-float.is-floating.is-centered,
html.mobile-perf-active .mixer-panel.mobile-ws-mixer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
  overflow: auto !important;
}

html.mobile-perf-active .mixer-float-actions .btn[data-act="mixer-float"],
html.mobile-perf-active .mixer-float-actions .btn[data-act="mixer-collapse"] {
  display: none;
}

html.mobile-perf-active .mixer-body-horizontal {
  grid-template-columns: 1fr !important;
  width: 100%;
  max-width: 100%;
}

html.mobile-perf-active .mixer-channels,
html.mobile-perf-active .mixer-channels.count-2,
html.mobile-perf-active .mixer-channels.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100%;
  max-width: 100%;
  gap: 0.35rem;
}

html.mobile-perf-active .mixer-channel {
  min-width: 0;
  max-width: 100%;
}

html.mobile-perf-active .mixer-float-handle {
  flex-wrap: wrap;
  gap: 0.35rem;
}

html.mobile-perf-active .mixer-float-actions {
  flex-wrap: wrap;
  max-width: 100%;
}

/* More workspace */
html.mobile-perf-active[data-mobile-ws="more"] .mobile-more-panel {
  display: flex !important;
  gap: 0.85rem;
}

html.mobile-perf-active .mobile-more-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

html.mobile-perf-active .mobile-more-actions .btn {
  min-width: 0;
  white-space: normal;
}

html.mobile-perf-active .mobile-more-pads .pads-soon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

/* Fixed bottom navigation ? always on-screen, never widens the document */
html.mobile-perf-active .mobile-bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 0;
  margin: 0;
  padding: 0.2rem 0.15rem;
  padding-bottom: max(0.2rem, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(196, 163, 90, 0.4);
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.98), rgba(8, 6, 4, 0.99));
  z-index: 30;
}

html.mobile-perf-active .mobile-nav-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(232, 220, 192, 0.72);
  font-family: "DM Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  padding: 0.55rem 0.15rem;
  min-width: 0;
  min-height: 48px;
  border-radius: 8px;
  white-space: normal;
  text-align: center;
}

html.mobile-perf-active .mobile-nav-btn.is-active,
html.mobile-perf-active .mobile-nav-btn[aria-current="page"] {
  color: #14100a;
  background: linear-gradient(180deg, #f0dca8, #c4a35a);
}

/* Kill docked-mixer spacer that was shoving content / creating a wide canvas feel */
html.mobile-perf-active.mixer-is-docked .performance-layout,
html.mobile-perf-active.mixer-is-floating .performance-layout,
html.mobile-perf-active .performance-layout {
  padding-bottom: 0 !important;
}

/* No horizontal transform tricks on phone performance */
html.mobile-perf-active .decks-row,
html.mobile-perf-active .performance-layout,
html.mobile-perf-active .mixer-panel {
  transform: none !important;
}

/* ?? DJ Controllers (status + modal) ?? */
.chip-controller,
[data-el="controller-status"],
[data-el="controller-status-settings"] {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
[data-el="controller-status"][data-ctrl-status="mapped"],
[data-el="controller-status"][data-ctrl-status="connected"] {
  border-color: rgba(196, 163, 90, 0.55);
}
[data-el="controller-status"][data-ctrl-status="error"],
[data-el="controller-status"][data-ctrl-status="permission"] {
  border-color: rgba(200, 90, 70, 0.55);
}
.controllers-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.6rem 0 0.2rem;
}
.ctrl-settings-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Controllers modal shell ? sticky header/tabs, body scrolls only */
.ctrl-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 0.75rem;
}
.ctrl-modal[hidden] {
  display: none !important;
}
.ctrl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.78);
}
.ctrl-modal__panel {
  --ctrl-gold: #c4a35a;
  --ctrl-ink: #f3ebe0;
  --ctrl-muted: rgba(243, 235, 224, 0.68);
  --ctrl-line: rgba(255, 255, 255, 0.1);
  --ctrl-card: rgba(255, 255, 255, 0.04);
  --ctrl-focus: #8ec8ff;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 1.25rem));
  max-height: 88vh;
  overflow: hidden;
  background: linear-gradient(165deg, #2c241b 0%, #18120d 52%, #0f0c09 100%);
  border: 1px solid rgba(196, 163, 90, 0.38);
  border-radius: 14px;
  color: var(--ctrl-ink);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}
.ctrl-modal__head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.15rem 0.65rem;
  border-bottom: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.18);
}
.ctrl-modal__head h2 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}
.ctrl-modal__sub {
  margin: 0.3rem 0 0;
  color: var(--ctrl-muted);
  font-size: 0.92rem;
}
.ctrl-modal__tabs-wrap {
  flex: 0 0 auto;
  padding: 0.55rem 1.15rem 0.45rem;
  border-bottom: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.12);
}
.ctrl-tabs {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ctrl-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ctrl-muted);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.86rem;
  white-space: nowrap;
  cursor: pointer;
}
.ctrl-tab:hover {
  color: var(--ctrl-ink);
  background: rgba(255, 255, 255, 0.05);
}
.ctrl-tab.is-active {
  color: #14100a;
  background: linear-gradient(180deg, #e2c789, var(--ctrl-gold));
  border-color: rgba(226, 199, 137, 0.5);
  font-weight: 600;
}
.ctrl-tab:focus-visible,
.ctrl-btn:focus-visible,
.ctrl-input:focus-visible,
.ctrl-learn-item:focus-visible {
  outline: 2px solid var(--ctrl-focus);
  outline-offset: 2px;
}
.ctrl-tabs-select-wrap {
  display: none;
}
.ctrl-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.9rem 1.15rem 1.25rem;
  overscroll-behavior: contain;
}

.ctrl-card {
  background: var(--ctrl-card);
  border: 1px solid var(--ctrl-line);
  border-radius: 12px;
  padding: 1rem 1.05rem 1.1rem;
  margin-bottom: 0.85rem;
}

/* Controller setup wizard */
.ctrl-steps {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
.ctrl-steps li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.78rem;
  color: var(--ctrl-muted);
}
.ctrl-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 163, 90, 0.45);
  font-weight: 700;
  flex-shrink: 0;
}
.ctrl-steps li.is-active {
  color: #f2e6d8;
  border-color: rgba(196, 163, 90, 0.65);
  background: rgba(196, 163, 90, 0.14);
}
.ctrl-steps li.is-done {
  color: #c8efd0;
  border-color: rgba(120, 190, 140, 0.4);
}
.ctrl-steps li.is-done span {
  background: rgba(90, 160, 110, 0.35);
  border-color: rgba(120, 190, 140, 0.55);
}
.ctrl-pick-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.65rem 0;
}
.ctrl-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  cursor: pointer;
}
.ctrl-pick strong {
  font-size: 1rem;
}
.ctrl-pick span {
  font-size: 0.82rem;
  color: var(--ctrl-muted);
}
.ctrl-pick.is-selected,
.ctrl-pick:hover {
  border-color: rgba(196, 163, 90, 0.7);
  background: rgba(196, 163, 90, 0.12);
}
.ctrl-live-test {
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px dashed rgba(196, 163, 90, 0.45);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ctrl-live-test.is-live {
  border-style: solid;
  border-color: rgba(120, 190, 140, 0.55);
  background: rgba(90, 160, 110, 0.12);
}
.ctrl-advanced {
  margin-top: 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.18);
}
.ctrl-advanced summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ctrl-muted);
}
.ctrl-wizard-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.5rem;
}
@media (max-width: 720px) {
  .ctrl-steps {
    grid-template-columns: 1fr 1fr;
  }
}
.ctrl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.ctrl-card h3 {
  margin: 0;
  font-size: 1.08rem;
}
.ctrl-lead {
  margin: 0.15rem 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.ctrl-muted {
  margin: 0.2rem 0 0.55rem;
  color: var(--ctrl-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.ctrl-path {
  margin: 0.4rem 0 0.75rem;
  font-size: 0.8rem;
}
.ctrl-path code {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: #d8c4a0;
}
.ctrl-banner {
  background: rgba(196, 163, 90, 0.14);
  border: 1px solid rgba(196, 163, 90, 0.4);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
}
.ctrl-banner--ok {
  background: rgba(90, 160, 110, 0.16);
  border-color: rgba(120, 190, 140, 0.5);
}
.ctrl-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(120, 190, 140, 0.55);
  background: rgba(90, 160, 110, 0.18);
  color: #d8f0dc;
}
.ctrl-confirm strong {
  font-size: 1rem;
  color: #c8efd0;
}
.ctrl-confirm p {
  margin: 0;
  flex: 1 1 14rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #e8f6ea;
}
.ctrl-policy {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(142, 200, 255, 0.28);
  background: rgba(60, 90, 120, 0.18);
  color: #d8e7f5;
  font-size: 0.86rem;
  line-height: 1.45;
}
.ctrl-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0;
}
.ctrl-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--ctrl-line);
}
.ctrl-stat__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ctrl-muted);
}
.ctrl-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ctrl-ink);
}
.ctrl-badge--available,
.ctrl-badge--ready,
.ctrl-badge--mapped,
.ctrl-badge--passed,
.ctrl-badge--info {
  background: rgba(90, 160, 110, 0.22);
  border-color: rgba(120, 190, 140, 0.45);
  color: #c8efd0;
}
.ctrl-badge--none,
.ctrl-badge--unmapped,
.ctrl-badge--skips {
  background: rgba(180, 160, 90, 0.18);
  border-color: rgba(196, 163, 90, 0.4);
  color: #f0dfb0;
}
.ctrl-badge--permission,
.ctrl-badge--warn,
.ctrl-badge--mapping,
.ctrl-badge--waiting {
  background: rgba(210, 150, 70, 0.2);
  border-color: rgba(230, 170, 80, 0.45);
  color: #ffd9a0;
}
.ctrl-badge--error,
.ctrl-badge--failed,
.ctrl-badge--conflict,
.ctrl-badge--unsupported,
.ctrl-badge--secure {
  background: rgba(190, 80, 70, 0.22);
  border-color: rgba(220, 110, 100, 0.45);
  color: #ffc4bc;
}
.ctrl-badge--detected,
.ctrl-badge--matched {
  background: rgba(90, 140, 200, 0.22);
  border-color: rgba(120, 170, 230, 0.45);
  color: #c8ddff;
}

.ctrl-btn {
  appearance: none;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.55rem 0.9rem;
  min-height: 42px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ctrl-ink);
  background: rgba(255, 255, 255, 0.06);
}
.ctrl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ctrl-btn--primary {
  color: #14100a;
  background: linear-gradient(180deg, #e2c789, #c4a35a);
  border-color: rgba(226, 199, 137, 0.55);
}
.ctrl-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
}
.ctrl-btn--secondary {
  border-color: rgba(196, 163, 90, 0.45);
  background: rgba(196, 163, 90, 0.12);
}
.ctrl-btn--secondary:hover:not(:disabled) {
  background: rgba(196, 163, 90, 0.2);
}
.ctrl-btn--tertiary {
  border-color: rgba(255, 255, 255, 0.14);
  background: transparent;
  font-weight: 500;
}
.ctrl-btn--tertiary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.ctrl-btn--danger {
  border-color: rgba(220, 110, 100, 0.5);
  background: rgba(160, 60, 50, 0.25);
  color: #ffd0ca;
}
.ctrl-btn--sm {
  min-height: 34px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}
.ctrl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.ctrl-actions--secondary {
  margin-top: 0.45rem;
}
.ctrl-file-btn {
  display: inline-flex;
  align-items: center;
}

.ctrl-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.65rem 0;
}
.ctrl-field__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(243, 235, 224, 0.88);
}
.ctrl-input,
.ctrl-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ctrl-ink);
  padding: 0.6rem 0.7rem;
  font: inherit;
  min-height: 42px;
}
.ctrl-textarea {
  min-height: 5rem;
  resize: vertical;
}
.ctrl-field-error {
  color: #ffb4aa;
  font-size: 0.78rem;
}
.ctrl-check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.7rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ctrl-check input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.ctrl-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.ctrl-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem 0.85rem;
  margin: 0.55rem 0 0.2rem;
}
.ctrl-dl--wide {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ctrl-dl dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ctrl-muted);
}
.ctrl-dl dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
}
.ctrl-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin: 0.4rem 0 0.7rem;
}
.ctrl-meta-row dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ctrl-muted);
}
.ctrl-meta-row dd {
  margin: 0.1rem 0 0;
}

.ctrl-empty {
  padding: 1.1rem;
  border: 1px dashed rgba(196, 163, 90, 0.35);
  border-radius: 10px;
  text-align: center;
  color: var(--ctrl-muted);
}
.ctrl-empty strong {
  display: block;
  color: var(--ctrl-ink);
  margin-bottom: 0.35rem;
}
.ctrl-device-list {
  display: grid;
  gap: 0.65rem;
}
.ctrl-device-card {
  border: 1px solid var(--ctrl-line);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: rgba(0, 0, 0, 0.2);
}
.ctrl-device-card.is-selected {
  border-color: rgba(196, 163, 90, 0.55);
  box-shadow: inset 0 0 0 1px rgba(196, 163, 90, 0.2);
}
.ctrl-device-card header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.ctrl-feature-grid {
  list-style: none;
  margin: 0.5rem 0 0.85rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
.ctrl-feature-grid li {
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ctrl-line);
  font-size: 0.82rem;
  text-align: center;
}
.ctrl-learn-cat {
  border: 1px solid var(--ctrl-line);
  border-radius: 10px;
  margin: 0.55rem 0;
  padding: 0.35rem 0.55rem 0.55rem;
  background: rgba(0, 0, 0, 0.16);
}
.ctrl-learn-cat summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.45rem 0.25rem;
}
.ctrl-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.4rem;
}
.ctrl-learn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  text-align: left;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ctrl-ink);
  padding: 0.55rem 0.6rem;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.82rem;
}
.ctrl-learn-item.is-mapped {
  border-color: rgba(120, 190, 140, 0.45);
}
.ctrl-learn-item.is-waiting,
.ctrl-learn-item.is-waiting {
  border-color: rgba(230, 170, 80, 0.55);
  box-shadow: 0 0 0 1px rgba(230, 170, 80, 0.25);
}
.ctrl-learn-wait {
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: rgba(230, 170, 80, 0.1);
  border: 1px solid rgba(230, 170, 80, 0.35);
  margin: 0.55rem 0;
}
.ctrl-inspector {
  margin: 0.55rem 0;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.25);
}
.ctrl-inspector h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}
.ctrl-filters {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.ctrl-table-wrap {
  overflow: auto;
  max-height: none;
  border: 1px solid var(--ctrl-line);
  border-radius: 10px;
}
.ctrl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.ctrl-table th,
.ctrl-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
}
.ctrl-table th {
  position: sticky;
  top: 0;
  background: #1c1611;
  z-index: 1;
}
.ctrl-compat-detail {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--ctrl-line);
  background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 899px) {
  .chip-controller,
  .btn-controllers {
    display: none;
  }
  html.mobile-perf-active .chip-controller {
    display: none;
  }
  .ctrl-tabs {
    display: none;
  }
  .ctrl-tabs-select-wrap {
    display: block;
  }
  .ctrl-tabs-select {
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.35);
    color: var(--ctrl-ink);
    padding: 0.55rem 0.7rem;
  }
  .ctrl-status-grid,
  .ctrl-form-row,
  .ctrl-feature-grid,
  .ctrl-filters {
    grid-template-columns: 1fr;
  }
  .ctrl-modal__panel {
    width: calc(100vw - 0.75rem);
    max-height: 92vh;
  }
  .ctrl-btn {
    min-height: 44px;
  }
}

/* Virtual MIDI Controller Simulator */
.vctrl-modal {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: grid;
  place-items: center;
}
.vctrl-modal[hidden] {
  display: none !important;
}
.vctrl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.78);
}
.vctrl-modal__panel {
  position: relative;
  width: min(1100px, calc(100vw - 1rem));
  max-height: min(92vh, 960px);
  overflow: auto;
  background: linear-gradient(165deg, #261e16, #14100c 60%);
  border: 1px solid rgba(196, 163, 90, 0.4);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.25rem;
  color: #f2e6d4;
}
.vctrl-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.vctrl-head h3 {
  margin: 0;
}
.vctrl-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.vctrl-path {
  font-size: 0.82rem;
  opacity: 0.85;
  margin: 0.5rem 0;
}
.vctrl-policy {
  font-size: 0.8rem;
  color: #e0c48a;
  margin: 0 0 0.75rem;
}
.vctrl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}
.vctrl-section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.65rem 0.7rem;
  background: rgba(0, 0, 0, 0.18);
}
.vctrl-section h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}
.vctrl-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.vctrl-btn {
  appearance: none;
  border: 1px solid rgba(196, 163, 90, 0.35);
  background: rgba(40, 32, 24, 0.9);
  color: #f2e6d4;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  cursor: pointer;
}
.vctrl-btn:hover {
  border-color: rgba(196, 163, 90, 0.7);
}
.vctrl-btn.is-on,
.vctrl-shift.is-on {
  background: linear-gradient(180deg, #c4a35a, #8a6e2e);
  color: #14100a;
}
.vctrl-pad {
  min-width: 2.4rem;
  text-align: center;
}
.vctrl-faders {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.vctrl-fader {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.72rem;
}
.vctrl-fader input {
  width: 100%;
}
.vctrl-log {
  max-height: 140px;
  overflow: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  opacity: 0.9;
}
.st-pass {
  color: #8dcf8a;
}
.st-fail {
  color: #e08878;
}
.st-skip {
  color: #c4b89a;
}

/* ==========================================================================
   RESPONSIVE LAYOUT MODES (width + height aware)
   Modes set by studio.js on <html>/<body>:
   - swagg-layout-wide      ?1600px (and not short)
   - swagg-layout-standard  roomy mid desktops
   - swagg-layout-compact   1024?1279px OR height ?850px at ?1024px (MacBook)
   - swagg-layout-tablet    600?1023px
   - swagg-layout-mobile    ?599px
   ========================================================================== */

html.swagg-desktop,
html.swagg-desktop body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ----- Wide Desktop (?1600, tall enough) ----- */
html.swagg-layout-wide .top-more-toggle {
  display: none !important;
}
html.swagg-layout-wide .top-more-panel {
  display: flex;
  position: static;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}
html.swagg-layout-wide .brand-logo {
  height: 88px;
  max-width: min(480px, 42vw);
}

/* ----- Standard Desktop ----- */
html.swagg-layout-standard .top-bar {
  gap: 0.85rem;
  padding: 0.55rem 0.9rem;
  min-height: 4.75rem;
}
html.swagg-layout-standard .brand-logo {
  height: 72px;
  max-width: min(360px, 36vw);
}
html.swagg-layout-standard .nav-tab {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
}
html.swagg-layout-standard .top-actions {
  gap: 0.35rem;
}
html.swagg-layout-standard .top-actions .btn,
html.swagg-layout-standard .top-actions .chip,
html.swagg-layout-standard .top-actions a.btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
}
html.swagg-layout-standard .top-more-toggle {
  display: none !important;
}
html.swagg-layout-standard .top-more-panel {
  display: flex;
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  max-width: min(52vw, 640px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html.swagg-layout-standard .perf-music-rail {
  padding: 0.75rem 0.9rem 0.7rem;
  gap: 0.45rem;
}
html.swagg-layout-standard .perf-music-title {
  font-size: 1.2rem;
}
html.swagg-layout-standard .perf-ql-input {
  min-height: 2.55rem;
  font-size: 0.95rem !important;
  padding: 0.55rem 0.85rem 0.55rem 2.4rem !important;
}
html.swagg-layout-standard .perf-music-results {
  max-height: 9.5rem;
}
html.swagg-layout-standard .decks-row.decks-visible.count-2 .turntable {
  --tt-w: clamp(250px, 24vw, 380px);
}
html.swagg-layout-standard .mixer-panel.mixer-float.is-floating {
  max-width: min(680px, calc(100vw - 24px));
}

/* ----- Compact Laptop / MacBook (width or short height) ----- */
html.swagg-layout-compact .top-bar,
html.swagg-short .top-bar {
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  min-height: 0;
}
html.swagg-layout-compact .brand,
html.swagg-short .brand {
  padding-right: 0.55rem;
  margin-right: 0;
}
html.swagg-layout-compact .brand-logo,
html.swagg-short .brand-logo {
  height: 52px;
  max-width: min(220px, 28vw);
}
html.swagg-layout-compact .nav-tabs {
  gap: 0.2rem;
  flex: 0 1 auto;
  min-width: 0;
}
html.swagg-layout-compact .nav-tab {
  padding: 0.35rem 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}
html.swagg-layout-compact .top-actions {
  gap: 0.3rem;
  overflow: visible;
}
html.swagg-layout-compact .tb-primary .btn,
html.swagg-layout-compact .tb-identity .btn,
html.swagg-layout-compact .tb-identity .chip {
  font-size: 0.74rem;
  padding: 0.32rem 0.45rem;
}
html.swagg-layout-compact .btn-sync-all {
  font-size: 0.74rem;
}
/* Avoid Safari showing both label + ::after ("ALLSYNC") */
html.swagg-layout-compact .btn-sync-all[data-short] {
  visibility: hidden;
  position: relative;
}
html.swagg-layout-compact .btn-sync-all[data-short]::after {
  content: attr(data-short);
  visibility: visible;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
}
html.swagg-layout-compact .tips-toggle-text {
  font-size: 0.74rem;
}
html.swagg-layout-compact .tips-toggle-text[data-short] {
  font-size: 0;
}
html.swagg-layout-compact .tips-toggle-text[data-short]::after {
  content: attr(data-short);
  font-size: 0.74rem;
}
html.swagg-layout-compact .chip[data-el="user-chip"] {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Secondary toolbar tools ? More dropdown (compact / short / tablet) */
html.swagg-layout-compact .top-more-toggle,
html.swagg-short .top-more-toggle,
html.swagg-layout-tablet .top-more-toggle {
  display: inline-flex !important;
  font-size: 0.74rem;
  padding: 0.32rem 0.5rem;
}
html.swagg-layout-compact .top-more-panel,
html.swagg-short .top-more-panel,
html.swagg-layout-tablet .top-more-panel {
  display: none !important;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 71;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 16px));
  max-height: min(70vh, 420px);
  overflow: auto;
  padding: 0.55rem;
  border: 1px solid rgba(196, 163, 90, 0.45);
  border-radius: 10px;
  background: linear-gradient(180deg, #2a1e14, #14100a);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html.swagg-layout-compact .top-more-wrap.is-open .top-more-panel,
html.swagg-short .top-more-wrap.is-open .top-more-panel,
html.swagg-layout-tablet .top-more-wrap.is-open .top-more-panel {
  display: flex !important;
}
html.swagg-layout-compact .top-more-panel .btn,
html.swagg-layout-compact .top-more-panel .chip,
html.swagg-short .top-more-panel .btn,
html.swagg-short .top-more-panel .chip,
html.swagg-layout-tablet .top-more-panel .btn,
html.swagg-layout-tablet .top-more-panel .chip {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}
html.swagg-layout-compact .top-more-panel .deck-picker,
html.swagg-short .top-more-panel .deck-picker,
html.swagg-layout-tablet .top-more-panel .deck-picker {
  width: 100%;
  justify-content: space-between;
}

html.swagg-layout-compact .main-stage,
html.swagg-short .main-stage {
  padding: 0.35rem 0.45rem 0.3rem;
}

html.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"] {
  gap: 0.35rem;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"] {
  grid-template-rows: auto auto minmax(14rem, 1fr) auto;
  gap: 0.3rem;
}

/* Find Music: 180?260px tall band on compact/short laptops */
html.swagg-layout-compact .perf-music-rail,
html.swagg-short .perf-music-rail,
html.mixer-is-docked.swagg-layout-compact .performance-layout .perf-music-rail,
html.mixer-is-docked.swagg-short .performance-layout .perf-music-rail {
  padding: 0.55rem 0.7rem 0.5rem;
  gap: 0.35rem;
  max-height: min(260px, 32vh);
  min-height: 180px;
  overflow: hidden;
}
html.swagg-layout-compact .perf-music-rail.is-collapsed,
html.swagg-short .perf-music-rail.is-collapsed,
html.mixer-is-docked.swagg-layout-compact .performance-layout .perf-music-rail.is-collapsed,
html.mixer-is-docked.swagg-short .performance-layout .perf-music-rail.is-collapsed {
  min-height: 0;
  max-height: none;
}
html.swagg-layout-compact .perf-music-title,
html.swagg-short .perf-music-title {
  font-size: 1.05rem;
}
html.swagg-layout-compact .perf-music-sub,
html.swagg-short .perf-music-sub {
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
html.swagg-layout-compact .perf-ql-input,
html.swagg-short .perf-ql-input {
  min-height: 2.25rem;
  font-size: 0.9rem !important;
  padding: 0.45rem 0.75rem 0.45rem 2.25rem !important;
}
html.swagg-layout-compact .perf-music-results,
html.swagg-short .perf-music-results,
html.mixer-is-docked.swagg-layout-compact .performance-layout .perf-music-results,
html.mixer-is-docked.swagg-short .performance-layout .perf-music-results,
html.mixer-is-docked.swagg-layout-compact .performance-layout[data-deck-count="2"] .perf-music-results,
html.mixer-is-docked.swagg-short .performance-layout[data-deck-count="2"] .perf-music-results {
  max-height: 7.5rem !important;
  gap: 0.3rem;
}
html.swagg-layout-compact .perf-ql-row,
html.swagg-short .perf-ql-row {
  padding: 0.4rem 0.55rem;
}
html.swagg-layout-compact .perf-ql-name,
html.swagg-short .perf-ql-name {
  font-size: 0.88rem;
}
html.swagg-layout-compact .perf-ql-deck,
html.swagg-short .perf-ql-deck {
  min-width: 4.5rem;
  min-height: 2.1rem;
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
}
html.swagg-layout-compact .perf-music-rail.is-collapsed,
html.swagg-short .perf-music-rail.is-collapsed {
  max-height: none;
}

/* Smaller platters + denser decks */
html.swagg-layout-compact .decks-row.decks-visible.count-2 .turntable,
html.swagg-short .decks-row.decks-visible.count-2 .turntable {
  --tt-w: clamp(200px, 22vw, 300px) !important;
}
html.swagg-layout-compact .decks-row.decks-visible.count-4 .turntable,
html.swagg-short .decks-row.decks-visible.count-4 .turntable {
  --tt-w: clamp(160px, 16vw, 240px) !important;
}
html.swagg-layout-compact .deck,
html.swagg-short .deck {
  padding: 0.4rem 0.5rem 0.45rem;
  gap: 0.35rem;
}
html.swagg-layout-compact .deck-head,
html.swagg-short .deck-head {
  gap: 0.3rem;
  min-height: 0;
}
html.swagg-layout-compact .deck-title,
html.swagg-short .deck-title {
  font-size: 0.85rem;
}
html.swagg-layout-compact .waveform-slot.horizontal,
html.swagg-layout-compact .waveform-canvas.horizontal,
html.swagg-short .waveform-slot.horizontal,
html.swagg-short .waveform-canvas.horizontal {
  height: 48px;
}
html.swagg-layout-compact .deck-transport .btn,
html.swagg-short .deck-transport .btn {
  min-height: 2.15rem;
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
}

/* Up Next compact / collapsible */
html.swagg-layout-compact .prepare-side,
html.swagg-short .prepare-side {
  max-height: 7.5rem;
  overflow: auto;
  padding: 0.45rem 0.55rem;
}
html.swagg-layout-compact .prepare-side.is-collapsed,
html.swagg-short .prepare-side.is-collapsed {
  max-height: none;
  overflow: hidden;
}
html.swagg-layout-compact .prepare-side h3,
html.swagg-short .prepare-side h3 {
  font-size: 0.9rem;
  margin: 0;
}
html.swagg-layout-compact .pads-side,
html.swagg-short .pads-side {
  max-height: 7.5rem;
  overflow: auto;
}
html.swagg-layout-compact .perf-lower,
html.swagg-short .perf-lower {
  gap: 0.4rem;
}

/* Mixer: prefer docked bottom strip on compact/short laptops.
   Floating position must stay under JS control (left/top) so Mac/Windows
   can both drag ? do NOT pin with !important left/top/transform. */
html.swagg-layout-compact .mixer-panel.mixer-float.is-docked,
html.swagg-short .mixer-panel.mixer-float.is-docked {
  max-height: min(30vh, 220px);
}
html.swagg-layout-compact .mixer-panel.mixer-float.is-floating,
html.swagg-short .mixer-panel.mixer-float.is-floating {
  width: min(720px, calc(100vw - 16px));
  max-width: min(720px, calc(100vw - 16px));
  max-height: min(34vh, 240px);
  overflow: auto;
  z-index: 45;
  /* Keep bottom/right clear so inline left/top from drag apply */
  right: auto;
  bottom: auto;
  transform: none;
}
html.swagg-layout-compact .mixer-panel.mixer-float.is-floating.is-dragging,
html.swagg-short .mixer-panel.mixer-float.is-floating.is-dragging {
  max-height: min(40vh, 280px);
  overflow: hidden;
}
html.swagg-layout-compact .mixer-horizontal .mixer-channel .vertical-fader,
html.swagg-short .mixer-horizontal .mixer-channel .vertical-fader {
  max-height: 72px;
}
html.mixer-is-docked.swagg-layout-compact .performance-layout,
html.mixer-is-docked.swagg-short .performance-layout {
  padding-bottom: min(32vh, 230px);
}

/* Height-specific MacBook band (matches requested query) */
@media (max-height: 850px) and (min-width: 1024px) {
  .top-bar {
    padding: 0.3rem 0.6rem;
    gap: 0.4rem;
    min-height: 0;
  }
  .brand-logo {
    height: 48px;
    max-width: min(200px, 26vw);
  }
  .main-stage {
    padding: 0.3rem 0.4rem;
  }
  .perf-music-rail {
    max-height: min(240px, 30vh);
    padding: 0.5rem 0.65rem;
  }
  .perf-music-results {
    max-height: 6.75rem;
  }
  .decks-row.decks-visible.count-2 .turntable {
    --tt-w: clamp(180px, 20vw, 280px) !important;
  }
  body.swagg-desktop .performance-layout[data-deck-count="2"] {
    gap: 0.3rem;
  }
  .prepare-side,
  .pads-side {
    max-height: 6.5rem;
  }
  .status-bar {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
  }
}

@media (max-height: 750px) and (min-width: 1024px) {
  .perf-music-rail {
    max-height: min(200px, 28vh);
  }
  .perf-music-results {
    max-height: 5.5rem;
  }
  .decks-row.decks-visible.count-2 .turntable {
    --tt-w: clamp(160px, 18vw, 240px) !important;
  }
  .waveform-slot.horizontal,
  .waveform-canvas.horizontal {
    height: 40px;
  }
}

/* ----- Tablet landscape refinements (class-driven) ----- */
html.swagg-layout-tablet .mixer-panel.mixer-float.is-floating,
html.swagg-layout-tablet .mixer-panel.mixer-float.is-floating.is-centered {
  /* No desktop-style floating windows over decks on tablet */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-height: min(42vh, 300px) !important;
}

/* ----- Mobile: More toggle unused (bottom nav owns workspaces) ----- */
html.swagg-layout-mobile .top-more-toggle {
  display: none !important;
}
html.swagg-layout-mobile .top-more-panel {
  display: none !important;
}

/* Keep primary deck transport visible when compact docked mixer is up */
@media (max-height: 850px) and (min-width: 1024px) {
  html.mixer-is-docked .deck-transport,
  html.mixer-is-docked .deck-main .pitch-wrap {
    position: relative;
    z-index: 2;
  }
}

/* Container queries: scale deck innards to available deck card width */
@supports (container-type: inline-size) {
  .deck {
    container-type: inline-size;
    container-name: deck;
  }
  @container deck (max-width: 420px) {
    .turntable {
      --tt-w: min(100%, 240px) !important;
    }
    .deck-fx-buttons {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @container deck (max-width: 320px) {
    .turntable {
      --tt-w: min(100%, 200px) !important;
    }
  }
}

/* ==========================================================================
   Console UI redesign ? denser decks, clearer chrome, responsive zones
   ========================================================================== */

.top-bar {
  min-height: 3.75rem;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
}
.brand-logo {
  height: 56px;
  max-width: min(280px, 28vw);
}
.tb-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.deck-picker-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid rgba(196, 163, 90, 0.35);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.top-more-panel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 11rem;
  z-index: 80;
}
.top-more-panel .btn {
  justify-content: flex-start;
  width: 100%;
}
html.swagg-layout-wide .top-more-panel,
html.swagg-layout-standard .top-more-panel {
  /* Keep utilities in the More dropdown even on wide screens */
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: none;
  padding: 0.45rem;
  background: var(--bg-panel);
  border: 1px solid rgba(196, 163, 90, 0.4);
  box-shadow: var(--shadow);
  border-radius: 8px;
}
html.swagg-layout-wide .top-more-wrap.is-open .top-more-panel,
html.swagg-layout-standard .top-more-wrap.is-open .top-more-panel,
html.swagg-top-more-open .top-more-wrap .top-more-panel {
  display: flex;
}
.top-more-toggle {
  display: inline-flex !important;
}

/* Deck vertical workflow */
.deck.deck-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem 0.45rem;
  min-height: 0;
}
.deck.deck-v2 .deck-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "label target bpm eject wave"
    "title title title time time";
  gap: 0.2rem 0.45rem;
  align-items: center;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.25rem 0.35rem;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.deck.deck-v2 .deck-label { grid-area: label; }
.deck.deck-v2 .deck-load-target-badge { grid-area: target; }
.deck.deck-v2 .deck-bpm-chip { grid-area: bpm; }
.deck.deck-v2 .track-title { grid-area: title; min-width: 0; }
.deck.deck-v2 .track-artist { display: none; }
.deck.deck-v2 .deck-meta { grid-area: time; justify-self: end; }
.deck.deck-v2 .deck-eject-hdr { grid-area: eject; }
.deck.deck-v2 .wave-orient-btn { grid-area: wave; }
.deck.is-load-target {
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.2);
}
.deck.is-load-target .deck-header {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.45);
}
.deck-load-target-badge {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1408;
  background: var(--accent-gold);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-weight: 700;
}
.deck.deck-v2 .waveform-slot.horizontal,
.deck.deck-v2 .waveform-canvas.horizontal {
  height: 52px;
}
.deck.deck-v2.compact .waveform-slot.horizontal,
.deck.deck-v2.compact .waveform-canvas.horizontal {
  height: 40px;
}
.deck.deck-v2 .deck-body {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 0.4rem 0.55rem;
  align-items: start;
  min-height: 0;
}
.deck.deck-v2.compact .deck-body {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}
.deck.deck-v2 .deck-platter-wrap {
  gap: 0.3rem;
}
.deck.deck-v2 .deck-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.deck-transport-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.deck-transport-primary .btn,
.deck-transport-primary .file-btn {
  min-height: 2.35rem;
  font-weight: 600;
}
.deck-secondary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.deck-secondary-row .btn {
  min-height: 1.9rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}
.deck-nudge-group {
  display: inline-flex;
  gap: 0.15rem;
  margin-left: 0.15rem;
}
.deck-tone-row {
  gap: 0.35rem;
}
.deck-advanced {
  border-top: 1px solid rgba(196, 163, 90, 0.22);
  padding-top: 0.3rem;
}
.deck-adv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
}
.deck-adv-tab {
  min-height: 1.85rem !important;
  font-size: 0.72rem !important;
  padding: 0.2rem 0.55rem !important;
  opacity: 0.85;
}
.deck-adv-tab.active {
  opacity: 1;
  border-color: rgba(212, 175, 55, 0.75);
  color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.deck-adv-panels .deck-adv-panel {
  padding: 0.35rem 0.2rem 0.15rem;
}
.deck-adv-panels .deck-section-toggle[hidden] {
  display: none !important;
}
.deck.compact .deck-secondary-row .af-text {
  display: none;
}
.deck.compact .deck-tone-row .pitch-nudge-row.coarse {
  display: none;
}
.deck.compact .deck-adv-tab {
  padding: 0.15rem 0.4rem !important;
}

/* Find Music ? active target */
.perf-music-sub strong[data-el="active-load-label"] {
  color: var(--accent-gold);
}
.perf-ql-deck.is-target,
.lib-load-deck.is-target {
  outline: 1px solid rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.lib-load-wrap--decks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
}
.lib-load-deck {
  min-width: 2.2rem;
  min-height: 2rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
}

/* Mixer modes */
.mixer-mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.mixer-mode-bar .btn.active {
  border-color: rgba(212, 175, 55, 0.8);
  color: var(--accent-gold);
}
.mixer-mode-tag {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.95;
}
.mixer-panel.is-collapsed {
  max-height: none;
}
.mixer-panel.is-collapsed.is-docked {
  min-height: 0;
}
.mixer-panel.is-collapsed .mixer-body-horizontal {
  display: none !important;
}
.mixer-panel.is-collapsed .mixer-mode-bar {
  padding-bottom: 0.35rem;
}

/* Desktop 2-deck: side browser rail (matches 4-deck space usage) */
body.swagg-desktop .performance-layout[data-deck-count="2"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.55rem 0.75rem;
  height: 100%;
  min-height: 0;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .beat-tools {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-music-rail {
  grid-column: 2;
  grid-row: 2 / span 2;
  max-height: none;
  height: 100%;
  min-height: 0;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-music-head {
  grid-template-columns: 1fr;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-music-results {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower {
  grid-column: 1;
  grid-row: 3;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .pads-side {
  display: none;
}
body.swagg-desktop .decks-row.count-2 {
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
body.swagg-desktop .decks-row.count-4 {
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
body.swagg-desktop .decks-row.count-4 .deck.deck-v2 .deck-platter-wrap .turntable {
  --tt-w: clamp(140px, 14vw, 220px);
}
body.swagg-desktop .decks-row.count-4 .deck-secondary-row .hc-help-dot {
  display: none;
}

/* Compact laptop */
html.swagg-layout-compact .top-bar {
  min-height: 3.25rem;
}
html.swagg-layout-compact .brand-logo {
  height: 44px;
}
html.swagg-layout-compact .chip-controller {
  display: none;
}

/* Tablet landscape: two decks, browser right, mixer docked */
body.swagg-tablet.swagg-landscape .performance-layout[data-deck-count="2"],
body.swagg-tablet.swagg-landscape .performance-layout[data-deck-count="4"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.45rem;
}
body.swagg-tablet.swagg-landscape .performance-layout .beat-tools { grid-column: 1 / -1; }
body.swagg-tablet.swagg-landscape .performance-layout .decks-row { grid-column: 1; grid-row: 2; }
body.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail {
  grid-column: 2;
  grid-row: 2 / span 2;
  max-height: none;
  height: 100%;
}
body.swagg-tablet.swagg-landscape .performance-layout .perf-lower { grid-column: 1; grid-row: 3; }
body.swagg-tablet.swagg-landscape .decks-row.count-4 {
  grid-template-columns: 1fr 1fr;
}
body.swagg-tablet.swagg-landscape .decks-row.count-4 .deck-adv-tabs {
  display: none;
}
body.swagg-tablet:not(.swagg-landscape) .decks-row.count-4 {
  grid-template-columns: 1fr;
}
body.swagg-tablet:not(.swagg-landscape) .decks-row.count-4 .deck:not(.is-load-target) {
  /* Portrait: emphasize active load target; others stay reachable but denser */
}

/* Phone performance shell refinements */
html.mobile-perf-active .mobile-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.15rem;
}
html.mobile-perf-active .mobile-nav-btn {
  font-size: 0.68rem;
  min-height: 2.75rem;
}
html.mobile-perf-active .deck.deck-v2 .deck-body {
  grid-template-columns: 1fr;
}
html.mobile-perf-active .deck.deck-v2 .deck-platter-wrap {
  justify-content: center;
}
html.mobile-perf-active .deck-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
html.mobile-perf-active .deck-side .vertical-fader {
  width: min(100%, 12rem);
  height: 1.5rem;
  writing-mode: horizontal-tb;
  transform: none;
}

/* Phone landscape */
html.swagg-phone.swagg-landscape.mobile-perf-active .deck.deck-v2 .deck-body {
  grid-template-columns: auto minmax(0, 1fr);
}
html.swagg-phone.swagg-landscape.mobile-perf-active .deck.deck-v2 .waveform-slot.horizontal {
  height: 36px;
}

/* Reduce empty dark zones */
.perf-music-rail:not(.is-collapsed) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.perf-music-results:not([hidden]) {
  flex: 1 1 auto;
  overflow: auto;
}
.deck .deck-empty-hint { display: none; }

@media (max-width: 1100px) {
  .brand-logo { height: 48px; }
  .chip-controller { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  .top-bar .nav-tabs .nav-tab { font-size: 0.72rem; padding: 0.35rem 0.45rem; }
  .tb-primary .btn-controllers,
  .tb-primary .chip-controller { display: none; }
}

/* Force More dropdown on all desktop layouts (overrides legacy inline tool strip) */
html.swagg-layout-wide .top-more-toggle,
html.swagg-layout-standard .top-more-toggle,
html.swagg-layout-compact .top-more-toggle,
html.swagg-short .top-more-toggle,
html.swagg-layout-tablet .top-more-toggle {
  display: inline-flex !important;
}
html.swagg-layout-wide .top-more-panel,
html.swagg-layout-standard .top-more-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  left: auto !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  max-width: 16rem !important;
  min-width: 12rem !important;
  padding: 0.45rem !important;
  border: 1px solid rgba(196, 163, 90, 0.4) !important;
  background: var(--bg-panel) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 8px !important;
  z-index: 90 !important;
}
html.swagg-layout-wide .top-more-wrap.is-open .top-more-panel,
html.swagg-layout-standard .top-more-wrap.is-open .top-more-panel,
html.swagg-top-more-open .top-more-wrap .top-more-panel {
  display: flex !important;
}
html.swagg-layout-wide .top-more-wrap,
html.swagg-layout-standard .top-more-wrap {
  position: relative;
}
/* Shrink oversized logo so performance chrome stays primary */
html.swagg-layout-wide .brand-logo,
html.swagg-layout-standard .brand-logo {
  height: 56px !important;
  max-width: min(280px, 28vw) !important;
}
html.swagg-layout-wide .top-bar,
html.swagg-layout-standard .top-bar {
  min-height: 3.75rem !important;
}

/* Floating Mixer ? free drag, title-bar handle */
.mixer-float-handle {
  cursor: move;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.mixer-panel.is-dragging .mixer-float-handle {
  cursor: grabbing;
}
.mixer-grip {
  display: inline-block;
  width: 0.85rem;
  height: 0.95rem;
  margin-right: 0.4rem;
  vertical-align: -0.1rem;
  background:
    radial-gradient(circle, rgba(212, 175, 55, 0.95) 1.1px, transparent 1.25px) 0 0 / 4px 4px,
    radial-gradient(circle, rgba(212, 175, 55, 0.95) 1.1px, transparent 1.25px) 2px 2px / 4px 4px;
  opacity: 0.85;
}
.mixer-panel.is-docked .mixer-float-handle {
  cursor: grab;
}
.mixer-mode-bar .btn[data-act="mixer-float"] {
  display: none !important;
}
/* Never auto-shove floating mixer away from decks ? only CSS positioning from JS left/top */
.mixer-panel.mixer-float.is-floating {
  /* left/top set in JS; overlap with decks is intentional user choice */
}

/* Temporary console test-access banner ? slim strip; does not overlay deck/mixer controls */
#test-access-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12000;
  box-sizing: border-box;
  min-height: 1.55rem;
  max-height: 1.8rem;
  padding: 0.22rem 0.65rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1a1208;
  background: linear-gradient(90deg, #e8c36a 0%, #c9a24a 55%, #b8923a 100%);
  border-bottom: 1px solid rgba(60, 40, 10, 0.35);
  pointer-events: auto;
  overflow: hidden;
}
#test-access-banner strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
#test-access-banner .tab-sep { opacity: 0.55; }
#test-access-banner .test-banner-dismiss {
  margin-left: auto;
  border: 0;
  background: rgba(0,0,0,.18);
  color: #1a1208;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  flex: 0 0 auto;
}
body.has-test-access-banner {
  --swagg-test-banner-h: 1.55rem;
  padding-top: var(--swagg-test-banner-h);
}
body.has-test-access-banner.test-banner-dismissed {
  --swagg-test-banner-h: 0px;
  padding-top: 0;
}
body.has-test-access-banner.test-banner-dismissed #test-access-banner {
  display: none !important;
}
body.has-test-access-banner.studio-live #studio-root,
body.has-test-access-banner .online-gate-layer {
  scroll-padding-top: var(--swagg-test-banner-h);
}
@media (max-width: 1023px) {
  #test-access-banner {
    font-size: 0.62rem;
    max-height: 1.65rem;
    min-height: 1.45rem;
  }
  #test-access-banner .tab-detail,
  #test-access-banner .tab-sep-long { display: none; }
  body.has-test-access-banner { --swagg-test-banner-h: 1.5rem; }
}
html.mobile-perf-active body.has-test-access-banner {
  --swagg-test-banner-h: 1.35rem;
}
html.mobile-perf-active #test-access-banner {
  font-size: 0.58rem;
  min-height: 1.3rem;
  max-height: 1.4rem;
  padding: 0.15rem 0.45rem;
}

/* ========== RESPONSIVE FIX PACK (visual-review) ========== */

/* Empty deck: hide unusable chrome until a track is loaded */
.deck.is-empty .deck-empty-hint { display: block; padding: 0.35rem 0.15rem 0.15rem; }
.deck:not(.is-empty) .deck-empty-hint { display: none !important; }
.deck-empty-hint .deck-empty-title {
  margin: 0;
  font-weight: 700;
  color: var(--accent-gold, #d4af37);
  font-size: 0.95rem;
}
.deck-empty-hint .deck-empty-msg {
  margin: 0.2rem 0 0.45rem;
  font-size: 0.78rem;
  color: rgba(240, 230, 208, 0.72);
  line-height: 1.35;
}
/* Empty decks keep the full control chrome on desktop (see v121).
   Compact/phone may still simplify ? legacy hide retained only for song-legacy. */
.deck.is-empty .deck-song-legacy {
  display: none !important;
}
/* Platter sizing for empty decks is owned by the v119 regression pack. */

/* Up Next tri-state */
.prepare-side[data-upnext="collapsed"],
.prepare-side.is-collapsed {
  max-height: none !important;
  min-height: 0;
  padding: 0.35rem 0.55rem !important;
}
.prepare-side[data-upnext="collapsed"] .upnext-body,
.prepare-side[data-upnext="collapsed"] .upnext-sub,
.prepare-side.is-collapsed .upnext-body,
.prepare-side.is-collapsed .upnext-sub {
  display: none !important;
}
.prepare-side[data-upnext="compact"] {
  max-height: 7.25rem;
  overflow: auto;
}
.prepare-side[data-upnext="expanded"] {
  max-height: min(34vh, 280px);
  overflow: auto;
}
.prepare-side.is-empty-queue[data-upnext="collapsed"],
.prepare-side.is-empty-queue.is-collapsed {
  max-height: none !important;
  min-height: 0 !important;
  flex: 0 0 auto;
}
.upnext-count {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent-gold, #d4af37);
  font-size: 0.72rem;
  font-weight: 700;
}
html.swagg-layout-compact .pads-side,
html.swagg-short .pads-side,
html.swagg-layout-compact[data-deck-count="4"] .pads-side {
  display: none;
}

/* Compact Docked Mixer (~140?180px) ? does not change floating mixer */
.mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 168px !important;
  overflow: hidden;
}
.mixer-panel.mixer-float.is-docked.is-dock-compact .talkback-section,
.mixer-panel.mixer-float.is-docked.is-dock-compact .sync-diag,
.mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-peaks,
.mixer-panel.mixer-float.is-docked.is-dock-compact [data-act="sync-all"],
.mixer-panel.mixer-float.is-docked.is-dock-compact [data-act="sync-off"] {
  display: none !important;
}
.mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-body-horizontal {
  padding: 0.25rem 0.4rem 0.35rem;
  gap: 0.35rem;
}
.mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-horizontal .mixer-channel .vertical-fader {
  max-height: 64px;
}
.mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-float-handle {
  padding: 0.25rem 0.4rem;
}
.mixer-panel.mixer-float.is-docked.is-dock-expanded {
  max-height: min(42vh, 320px);
  overflow: auto;
}
html.mixer-is-docked .performance-layout {
  padding-bottom: max(148px, calc(env(safe-area-inset-bottom, 0px) + 140px));
}
html.mixer-is-docked.swagg-layout-compact .performance-layout,
html.mixer-is-docked.swagg-short .performance-layout {
  padding-bottom: max(150px, calc(env(safe-area-inset-bottom, 0px) + 142px));
}
html.swagg-layout-compact .mixer-panel.mixer-float.is-docked,
html.swagg-short .mixer-panel.mixer-float.is-docked {
  max-height: 168px;
}

/* Sheet mixer: no float chrome */
.mixer-panel.is-sheet-mixer .mixer-mode-bar [data-mode="floating"],
.mixer-panel.is-sheet-mixer [data-act="mixer-reset-pos"],
.mixer-panel.is-sheet-mixer .mixer-grip {
  display: none !important;
}
html.mobile-perf-active .mixer-panel.is-sheet-mixer,
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0;
  box-shadow: none;
}

/* Phone / tablet shell refinements */
html.mobile-perf-active .mobile-deck-switcher {
  display: flex;
  gap: 0.25rem;
  flex: 0 0 auto;
}
html.mobile-perf-active .mobile-deck-chip {
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0.15rem 0.35rem;
  font-weight: 700;
}
html.mobile-perf-active .mobile-deck-chip.is-active {
  background: rgba(212, 175, 55, 0.28);
  border-color: rgba(212, 175, 55, 0.7);
  color: #f3e6c8;
}
html.mobile-perf-active .mobile-perf-header {
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  padding-top: max(0.3rem, env(safe-area-inset-top, 0px));
}
html.mobile-perf-active .mobile-perf-brand { font-size: 1.1rem; }
html.mobile-perf-active .mobile-perf-ws-label { display: none; }

/* Phone landscape: keep one focused deck + transport in view (no platter wall) */
html.swagg-phone-landscape.mobile-perf-active .mobile-performance-shell,
html.mobile-perf-active.swagg-phone-landscape .mobile-performance-shell {
  height: 100dvh;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-platter-wrap,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-secondary-row,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-tone-row,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-advanced {
  display: none !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .waveform-slot.horizontal,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .waveform-canvas.horizontal {
  height: 32px !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-transport-primary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 0.25rem 0;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.96) 30%);
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-transport-primary .btn {
  min-height: 2.55rem;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-bottom-nav {
  min-height: 2.45rem;
  padding: 0.1rem 0.1rem;
  padding-bottom: max(0.1rem, env(safe-area-inset-bottom, 0px));
}
html.swagg-phone-landscape.mobile-perf-active .mobile-nav-btn {
  min-height: 40px;
  padding: 0.35rem 0.1rem;
  font-size: 0.62rem;
}
/* Mobile deck header: prevent eject / graph overlap */
html.mobile-perf-active .deck-eject-hdr,
html.mobile-perf-active .wave-orient-btn {
  display: none !important;
}
html.mobile-perf-active[data-mobile-ws^="deck"] .decks-row {
  padding-bottom: 0.35rem;
}

/* Tablet landscape: deck banks for 4-deck */
html.swagg-tablet-bank-a .decks-row.count-4 .deck[data-deck="deck3"],
html.swagg-tablet-bank-a .decks-row.count-4 .deck[data-deck="deck4"],
html.swagg-tablet-bank-b .decks-row.count-4 .deck[data-deck="deck1"],
html.swagg-tablet-bank-b .decks-row.count-4 .deck[data-deck="deck2"] {
  display: none !important;
}
html.swagg-tablet.swagg-landscape .decks-row.count-4 {
  grid-template-columns: 1fr 1fr !important;
}

/* Laptop / short-height: decks use available height, no platter overflow */
@media (max-height: 800px) and (min-width: 1024px) {
  html.swagg-desktop .deck-v2 {
    min-height: 0;
    overflow: hidden;
  }
  html.swagg-desktop .deck-v2 .deck-body {
    min-height: 0;
  }
  html.swagg-desktop .decks-row.decks-visible.count-2 .turntable,
  html.swagg-desktop .decks-row.decks-visible.count-4 .turntable {
    --tt-w: clamp(140px, 16vh, 220px) !important;
  }
  html.swagg-desktop .waveform-slot.horizontal,
  html.swagg-desktop .waveform-canvas.horizontal {
    height: 40px;
  }
  html.swagg-desktop .deck-transport-primary .btn {
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
  }
  html.swagg-desktop .prepare-side[data-upnext="compact"] {
    max-height: 5.5rem;
  }
  html.swagg-desktop .pads-side { display: none; }
}

html.swagg-layout-compact .deck-v2,
html.swagg-short .deck-v2 {
  overflow: hidden;
  max-height: 100%;
}
html.swagg-layout-compact .deck-platter-wrap,
html.swagg-short .deck-platter-wrap {
  max-height: min(28vh, 220px);
  overflow: hidden;
}
html.swagg-layout-compact .deck-advanced:not(:has(.deck-adv-panel:not([hidden]))),
html.swagg-short .deck-advanced:not(:has(.deck-adv-panel:not([hidden]))) {
  /* keep tab bar only when closed */
}

/* Stems tab: non-interactive development cue for regular users */
.deck-adv-tab[data-tab="stems"].is-dev-disabled,
.deck-adv-tab[data-tab="stems"][aria-disabled="true"] {
  opacity: 0.55;
}
.deck-stems .stems-coming-soon:not([hidden]) {
  display: block;
  padding: 0.55rem 0.35rem;
}
.deck-stems .stems-coming-soon-title::after {
  content: " ? Coming Soon";
}

/* Find Music: keep usable on laptop */
html.swagg-layout-compact .perf-music-rail.is-collapsed,
html.swagg-short .perf-music-rail.is-collapsed {
  max-width: 2.25rem;
  min-width: 2.25rem;
  overflow: hidden;
}

/* Phone landscape transport-safe patch */
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-platter-wrap,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-secondary-row,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-tone-row,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-advanced {
  display: none !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .waveform-slot.horizontal,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .waveform-canvas.horizontal {
  height: 32px !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-transport-primary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 0.25rem 0;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.96) 30%);
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-transport-primary .btn {
  min-height: 2.55rem;
}
html.mobile-perf-active .deck-eject-hdr,
html.mobile-perf-active .wave-orient-btn {
  display: none !important;
}

/* Compact / tablet landscape: prevent header control collisions */
html.swagg-tablet.swagg-landscape .wave-orient-btn,
html.swagg-layout-compact .wave-orient-btn,
html.swagg-short .wave-orient-btn {
  display: none !important;
}
html.swagg-tablet.swagg-landscape .deck-eject-hdr {
  position: static;
  margin-left: auto;
}

/* ========== RESPONSIVE POLISH PASS v113 ========== */

/* --- Sheet Mixer workspace: dedicated full panel, no float chrome --- */
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.is-sheet-mixer,
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
}
.mixer-panel.is-sheet-mixer .mixer-mode-bar [data-mode="floating"],
.mixer-panel.is-sheet-mixer .mixer-mode-bar [data-mode="docked"],
.mixer-panel.is-sheet-mixer .mixer-mode-bar [data-mode="mini"],
.mixer-panel.is-sheet-mixer [data-act="mixer-reset-pos"],
.mixer-panel.is-sheet-mixer [data-act="mixer-dock-expand"],
.mixer-panel.is-sheet-mixer .mixer-grip,
.mixer-panel.is-sheet-mixer .mixer-mode-tag {
  display: none !important;
}
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.is-sheet-mixer .mixer-body-horizontal {
  display: flex !important;
}
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.is-sheet-mixer .mixer-horizontal .mixer-channel .vertical-fader {
  max-height: min(42vh, 220px);
}

/* --- Beat Matching Tools: collapsed / compact / expanded --- */
.beat-tools {
  transition: none;
}
.beat-tools[data-beat-mode="collapsed"] {
  padding: 0.25rem 0.5rem;
  gap: 0;
  margin-bottom: 0.35rem;
}
.beat-tools[data-beat-mode="collapsed"] .beat-tools-body,
.beat-tools[data-beat-mode="collapsed"] .tempo-match-strip,
.beat-tools[data-beat-mode="collapsed"] .beat-match-strip,
.beat-tools[data-beat-mode="collapsed"] .hc-help-dot {
  display: none !important;
}
.beat-tools[data-beat-mode="collapsed"] .beat-tools-head {
  gap: 0.3rem 0.45rem;
}
.beat-tools[data-beat-mode="compact"] {
  padding: 0.3rem 0.5rem;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
}
.beat-tools[data-beat-mode="compact"] .beat-tools-body,
.beat-tools[data-beat-mode="compact"] .tempo-match-strip,
.beat-tools[data-beat-mode="compact"] .beat-match-strip {
  display: none !important;
}
.beat-tools[data-beat-mode="compact"] .hc-help-dot {
  display: none !important;
}
.beat-tools[data-beat-mode="expanded"] .beat-tools-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.beat-tools-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.beat-tools-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.beat-tools-actions .btn {
  min-height: 1.7rem;
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
}
html.swagg-layout-compact .beat-tools[data-beat-mode="expanded"] .tempo-match-canvas,
html.swagg-short .beat-tools[data-beat-mode="expanded"] .tempo-match-canvas {
  height: 48px !important;
}
html.swagg-layout-compact .beat-tools[data-beat-mode="expanded"] .beat-match-canvas,
html.swagg-short .beat-tools[data-beat-mode="expanded"] .beat-match-canvas {
  height: 40px !important;
}
html.swagg-tablet.swagg-landscape .beat-tools[data-beat-mode="expanded"] .tempo-match-canvas {
  height: 44px !important;
}
html.swagg-tablet.swagg-landscape .beat-tools[data-beat-mode="expanded"] .beat-match-canvas {
  height: 36px !important;
}
/* Phone landscape: allow one-line compact/collapsed beat tools in deck ws */
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools[data-beat-mode="collapsed"],
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools[data-beat-mode="compact"] {
  display: flex !important;
  flex: 0 0 auto;
  padding: 0.15rem 0.4rem;
  margin: 0;
  overflow: hidden;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools .beat-tools-title {
  font-size: 0.72rem;
}

/* --- Tablet landscape 1024: Find Music constrained rail / overlay --- */
html.swagg-tablet.swagg-landscape .performance-layout,
html.swagg-tablet.swagg-landscape .mobile-performance-shell.performance-layout {
  overflow-x: hidden !important;
  max-width: 100%;
  width: 100%;
}
html.swagg-tablet.swagg-landscape .performance-layout[data-deck-count="2"],
html.swagg-tablet.swagg-landscape .performance-layout[data-deck-count="4"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(2.4rem, 13.5rem) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0.35rem !important;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail {
  grid-column: 2;
  grid-row: 2 / span 2;
  min-width: 0 !important;
  max-width: 13.5rem !important;
  width: 100%;
  overflow: hidden !important;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem 0.4rem;
  z-index: 25;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail.is-collapsed {
  max-width: 2.5rem !important;
  min-width: 2.5rem !important;
  width: 2.5rem !important;
  padding: 0.35rem 0.2rem;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail.is-collapsed .perf-music-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail.is-collapsed .perf-music-search,
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail.is-collapsed .perf-music-sub,
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail.is-collapsed .perf-music-links,
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail.is-collapsed .perf-music-results {
  display: none !important;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-rail:not(.is-collapsed) {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: min(16.5rem, 38vw) !important;
  max-width: min(16.5rem, 38vw) !important;
  height: auto;
  max-height: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  z-index: 45;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-head {
  grid-template-columns: 1fr !important;
  gap: 0.35rem;
  min-width: 0;
  padding-left: 0.35rem;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-title {
  font-size: 0.95rem;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-sub {
  display: none;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-ql-input {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 0.82rem !important;
  padding-right: 1.75rem !important;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-links {
  flex-wrap: wrap;
  gap: 0.25rem;
}
html.swagg-tablet.swagg-landscape .performance-layout .perf-music-links .btn {
  font-size: 0.7rem;
  padding: 0.25rem 0.4rem;
  min-height: 1.85rem;
}
html.swagg-tablet.swagg-landscape .performance-layout .decks-row {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
/* When Find Music is expanded as overlay, decks use full width under it */
html.swagg-tablet.swagg-landscape .performance-layout:has(.perf-music-rail:not(.is-collapsed)) {
  grid-template-columns: minmax(0, 1fr) 0 !important;
}

/* --- Phone landscape bottom nav: stay inside 100dvh + safe-area --- */
html.swagg-phone-landscape,
html.swagg-phone-landscape body {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
html.swagg-phone-landscape.mobile-perf-active .app-shell {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  box-sizing: border-box;
}
html.swagg-phone-landscape.mobile-perf-active .main-stage {
  min-height: 0 !important;
  flex: 1 1 auto;
  overflow: hidden !important;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-performance-shell {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
  box-sizing: border-box;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-bottom-nav {
  display: grid !important;
  flex: 0 0 auto !important;
  position: relative;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.08rem 0.1rem;
  padding-bottom: max(0.12rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  z-index: 40;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-nav-btn {
  min-height: 34px;
  max-height: 40px;
  padding: 0.2rem 0.08rem;
  font-size: 0.58rem;
  line-height: 1.1;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-transport-primary {
  position: static;
  padding-bottom: 0.15rem;
  background: none;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .deck-transport-primary .btn {
  min-height: 2.35rem;
}

/* --- Desktop 1920 2-deck: fill vertical space, no center gap above docked mixer --- */
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked body.swagg-desktop.swagg-layout-wide .performance-layout[data-deck-count="2"] {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0.45rem;
  height: 100%;
  min-height: 0;
  padding-bottom: max(158px, calc(env(safe-area-inset-bottom, 0px) + 150px)) !important;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row {
  min-height: 0;
  height: 100%;
  align-content: stretch;
  align-items: stretch;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .deck,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-body,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-body {
  flex: 1 1 auto;
  min-height: 0;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-main {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(42vh, 360px);
  align-content: center;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower {
  flex: 0 0 auto;
  margin: 0;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="compact"] {
  max-height: 6.5rem;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  bottom: 8px;
}
/* Match reserved space to compact docked height (avoid empty band) */
html.mixer-is-docked:not(.swagg-layout-compact):not(.swagg-short) .performance-layout {
  padding-bottom: max(158px, calc(env(safe-area-inset-bottom, 0px) + 150px));
}

/* --- Laptop 1366 primary control hierarchy --- */
html.swagg-layout-compact .deck-transport-primary .btn-play-primary,
html.swagg-short .deck-transport-primary .btn-play-primary,
html.swagg-layout-compact .deck-transport-primary [data-act="cue"],
html.swagg-short .deck-transport-primary [data-act="cue"] {
  min-height: 2.55rem !important;
  min-width: 3.6rem;
  font-size: 0.9rem !important;
  font-weight: 800;
  padding: 0.35rem 0.7rem !important;
}
html.swagg-layout-compact .deck-transport-primary [data-act="sync"],
html.swagg-short .deck-transport-primary [data-act="sync"],
html.swagg-layout-compact .deck-transport-primary [data-act="master"],
html.swagg-short .deck-transport-primary [data-act="master"],
html.swagg-layout-compact .deck-transport-primary .file-btn,
html.swagg-short .deck-transport-primary .file-btn,
html.swagg-layout-compact .deck-transport-primary [data-act="eject"],
html.swagg-short .deck-transport-primary [data-act="eject"] {
  min-height: 2.35rem !important;
  font-size: 0.82rem !important;
  padding: 0.3rem 0.55rem !important;
}
html.swagg-layout-compact .deck-secondary-row .btn,
html.swagg-short .deck-secondary-row .btn {
  min-height: 1.75rem;
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
}
html.swagg-layout-compact .mixer-mode-bar .btn,
html.swagg-short .mixer-mode-bar .btn {
  min-height: 2rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
}
html.swagg-layout-compact .nav-tab,
html.swagg-short .nav-tab,
html.swagg-layout-compact [data-act="decks-2"],
html.swagg-short [data-act="decks-2"],
html.swagg-layout-compact [data-act="decks-4"],
html.swagg-short [data-act="decks-4"] {
  min-height: 2.15rem;
  font-size: 0.82rem;
  padding: 0.3rem 0.55rem;
}
html.swagg-tablet.swagg-landscape .mobile-deck-chip,
html.swagg-layout-compact .mobile-deck-chip {
  min-width: 2rem;
  min-height: 2rem;
}

@media (max-height: 800px) and (min-width: 1024px) {
  html.swagg-desktop .deck-transport-primary .btn-play-primary,
  html.swagg-desktop .deck-transport-primary [data-act="cue"] {
    min-height: 2.45rem;
    font-size: 0.88rem;
    padding: 0.3rem 0.65rem;
  }
  html.swagg-desktop .deck-transport-primary [data-act="sync"],
  html.swagg-desktop .deck-transport-primary [data-act="master"],
  html.swagg-desktop .deck-transport-primary .file-btn {
    min-height: 2.25rem;
    font-size: 0.8rem;
  }
}

/* ========== POLISH FOLLOW-UP v114 ========== */

/* Phone landscape: account for test banner; keep nav fully visible */
html.swagg-phone-landscape.mobile-perf-active body,
html.swagg-phone-landscape.mobile-perf-active body.has-test-access-banner {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
html.swagg-phone-landscape.mobile-perf-active .app-shell {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools {
  display: flex !important;
  flex: 0 0 auto !important;
  max-height: 1.55rem !important;
  padding: 0.08rem 0.35rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools .chip,
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools .hc-help-dot {
  display: none !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools-title {
  font-size: 0.62rem !important;
  letter-spacing: 0.04em;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .beat-tools-actions .btn {
  min-height: 1.25rem !important;
  font-size: 0.58rem !important;
  padding: 0.05rem 0.35rem !important;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-perf-header {
  flex: 0 0 auto;
  padding: 0.2rem 0.4rem !important;
  padding-top: max(0.15rem, env(safe-area-inset-top, 0px)) !important;
}
html.swagg-phone-landscape.mobile-perf-active[data-mobile-ws^="deck"] .decks-row.mobile-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0.2rem 0.35rem 0.25rem !important;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-bottom-nav {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  padding: 0.06rem 0.08rem !important;
  padding-bottom: max(0.2rem, env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.98), rgba(8, 6, 4, 0.99)) !important;
}
html.swagg-phone-landscape.mobile-perf-active .mobile-nav-btn {
  min-height: 32px !important;
  max-height: 36px !important;
  font-size: 0.56rem !important;
  padding: 0.15rem 0.06rem !important;
}

/* Desktop / laptop docked: fill height chain so decks absorb free space */
html.mixer-is-docked.swagg-desktop body,
html.mixer-is-docked body.swagg-desktop {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
html.mixer-is-docked.swagg-desktop body.has-test-access-banner,
html.mixer-is-docked body.swagg-desktop.has-test-access-banner {
  height: 100dvh;
  max-height: 100dvh;
}
html.mixer-is-docked.swagg-desktop .app-shell,
html.mixer-is-docked body.swagg-desktop .app-shell {
  height: calc(100dvh - var(--swagg-test-banner-h, 0px)) !important;
  max-height: calc(100dvh - var(--swagg-test-banner-h, 0px)) !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.mixer-is-docked.swagg-desktop .main-stage,
html.mixer-is-docked body.swagg-desktop .main-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-desktop .performance-layout[data-deck-count="2"] {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0.4rem !important;
  padding-bottom: max(152px, calc(env(safe-area-inset-bottom, 0px) + 144px)) !important;
  box-sizing: border-box;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
  align-content: stretch !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-top {
  flex: 0 0 auto;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .waveform-slot.horizontal {
  flex: 0 0 auto;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap .turntable {
  --tt-w: clamp(180px, 22vh, 300px) !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  gap: 0.4rem;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .mixer-and-lower {
  flex: 0 0 auto !important;
  align-self: stretch;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side.is-collapsed {
  max-height: 2.4rem !important;
  min-height: 0 !important;
  padding: 0.3rem 0.5rem !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="compact"] {
  max-height: 5.75rem !important;
}
html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"] {
  padding-bottom: max(148px, calc(env(safe-area-inset-bottom, 0px) + 140px)) !important;
  gap: 0.3rem !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 152px !important;
}

/* Tablet landscape docked: same no-gap intent */
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout {
  height: 100% !important;
  min-height: 0;
  padding-bottom: max(148px, calc(env(safe-area-inset-bottom, 0px) + 140px)) !important;
}
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout .decks-row {
  min-height: 0;
  height: 100%;
  align-items: stretch;
}
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout .deck.deck-v2 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout .perf-lower {
  flex: 0 0 auto;
  max-height: 2.6rem;
}
html.mixer-is-docked.swagg-tablet.swagg-landscape .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked.swagg-tablet.swagg-landscape .prepare-side.is-collapsed {
  max-height: 2.2rem !important;
  padding: 0.25rem 0.45rem !important;
}

/* Sheet mixer: use vertical space for taller faders */
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.is-sheet-mixer .mixer-body-horizontal {
  flex: 1 1 auto;
  min-height: 0;
}
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel.is-sheet-mixer .mixer-horizontal .mixer-channel .vertical-fader {
  max-height: min(48vh, 280px);
  min-height: 120px;
}

/* ========== HEIGHT CHAIN FIX v114b ========== */
html.swagg-desktop body.studio-live,
html.swagg-tablet.swagg-landscape body.studio-live {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
html.swagg-desktop body.studio-live #studio-root,
html.swagg-tablet.swagg-landscape body.studio-live #studio-root {
  display: flex !important;
  flex-direction: column;
  height: calc(100dvh - var(--swagg-test-banner-h, 0px)) !important;
  max-height: calc(100dvh - var(--swagg-test-banner-h, 0px)) !important;
  min-height: 0;
  overflow: hidden;
}
html.swagg-desktop body.studio-live #studio-root .app-shell,
html.swagg-tablet.swagg-landscape body.studio-live #studio-root .app-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden;
}
html.swagg-desktop body.studio-live #studio-root .main-stage,
html.swagg-tablet.swagg-landscape body.studio-live #studio-root .main-stage {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
}
html.swagg-desktop body.studio-live #studio-root .performance-layout,
html.swagg-tablet.swagg-landscape body.studio-live #studio-root .performance-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding-bottom: max(124px, calc(env(safe-area-inset-bottom, 0px) + 116px)) !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 128px !important;
  min-height: 112px;
  bottom: 6px !important;
}
html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"] {
  padding-bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 112px)) !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2 {
  min-height: 0 !important;
  height: 100% !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  min-height: 100% !important;
  height: 100% !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-body {
  align-items: stretch !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower {
  margin-top: 0 !important;
}
/* Keep laptop primary controls large even if short-height media tries to shrink them */
@media (max-height: 800px) and (min-width: 1024px) {
  html.swagg-layout-compact .deck-transport-primary .btn-play-primary,
  html.swagg-layout-compact .deck-transport-primary [data-act="cue"],
  html.swagg-short .deck-transport-primary .btn-play-primary,
  html.swagg-short .deck-transport-primary [data-act="cue"] {
    min-height: 2.5rem !important;
    font-size: 0.88rem !important;
    padding: 0.32rem 0.65rem !important;
  }
}

/* ========== DOCKED GAP KILL v115b ========== */
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-standard body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] {
  padding-bottom: max(118px, calc(env(safe-area-inset-bottom, 0px) + 110px)) !important;
}
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side.is-collapsed,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side.is-collapsed {
  max-height: 2.35rem !important;
  min-height: 0 !important;
  padding: 0.28rem 0.5rem !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower {
  max-height: 3rem !important;
  overflow: hidden;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 118px !important;
  min-height: 108px !important;
  bottom: 4px !important;
  left: 8px !important;
  right: 8px !important;
}
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout {
  padding-bottom: max(118px, calc(env(safe-area-inset-bottom, 0px) + 110px)) !important;
}

/* Final docked clearance: Up Next sits just above Compact Docked Mixer */
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-standard body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout {
  padding-bottom: max(100px, calc(env(safe-area-inset-bottom, 0px) + 92px)) !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 110px !important;
  min-height: 100px !important;
}

/* Restore usable Compact Docked height while keeping Up Next tight to mixer */
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-standard body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout {
  padding-bottom: max(142px, calc(env(safe-area-inset-bottom, 0px) + 134px)) !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 148px !important;
  min-height: 136px !important;
  display: flex !important;
  flex-direction: column;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-body-horizontal {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
}

/* ========== LAYOUT REGRESSION FIX v119 ========== */

/* --- Empty deck: keep a complete, aligned deck skeleton --- */
.deck.is-empty .track-title,
.deck.is-empty .track-artist {
  display: none !important;
}
.deck.is-empty .deck-empty-hint {
  display: block !important;
  padding: 0.25rem 0.1rem 0.35rem;
}
.deck.is-empty .deck-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-gold, #d4af37);
}
.deck.is-empty .deck-empty-msg {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.8rem;
  color: rgba(240, 230, 208, 0.75);
}
.deck.is-empty .deck-empty-load {
  min-height: 2.35rem;
  font-weight: 700;
}
/* Keep structure ? do not dismantle into floating widgets */
.deck.is-empty .deck-platter-wrap {
  max-height: none !important;
  overflow: visible !important;
  opacity: 0.92 !important;
}
.deck.is-empty .turntable {
  --tt-w: clamp(150px, 18vh, 240px) !important;
}
html.swagg-layout-wide .deck.is-empty .turntable {
  --tt-w: clamp(170px, 20vh, 280px) !important;
}
/* Legacy compact hide removed for desktop ? empty decks match loaded chrome (v121). */
.deck.is-empty .deck-song-legacy {
  display: none !important;
}
/* Restore side volume on empty decks (was force-hidden) */
.deck.is-empty .deck-side {
  display: flex !important;
  opacity: 0.85;
}
.deck.is-empty .deck-transport-primary {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.deck.is-empty .deck-transport-primary .btn,
.deck.is-empty .deck-transport-primary .file-btn {
  min-height: 2.35rem !important;
  font-size: 0.85rem !important;
  padding: 0.3rem 0.55rem !important;
}
.deck.is-empty .btn-play-primary {
  min-height: 2.5rem !important;
  font-weight: 800;
}
.deck.is-empty .deck-body {
  align-items: center !important;
}
.deck.is-empty .deck-main {
  justify-content: flex-start !important;
  gap: 0.45rem !important;
}
/* Undo stretch rules that floated empty controls in a blank card */
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-body,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-body {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  flex-direction: unset !important;
  align-items: center !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-main {
  justify-content: flex-start !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-platter-wrap {
  flex: 0 0 auto !important;
  max-height: min(36vh, 300px) !important;
  display: flex !important;
  align-items: center;
}

/* --- Up Next: collapsed = title strip only (never a tall blank panel) --- */
.prepare-side[data-upnext="collapsed"],
.prepare-side.is-collapsed,
.prepare-side.is-empty-queue[data-upnext="collapsed"],
.prepare-side.is-empty-queue.is-collapsed,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side.is-collapsed,
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"] .prepare-side.is-collapsed,
html.mixer-is-docked.swagg-tablet.swagg-landscape .prepare-side[data-upnext="collapsed"],
html.mixer-is-docked.swagg-tablet.swagg-landscape .prepare-side.is-collapsed {
  max-height: 2.5rem !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  padding: 0.3rem 0.55rem !important;
}
.prepare-side[data-upnext="collapsed"] .upnext-body,
.prepare-side[data-upnext="collapsed"] .upnext-sub,
.prepare-side.is-collapsed .upnext-body,
.prepare-side.is-collapsed .upnext-sub {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower,
body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-lower,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-lower,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .mixer-and-lower {
  flex: 0 0 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch;
  overflow: visible !important;
}
body.swagg-desktop .performance-layout[data-deck-count="4"] .decks-row {
  min-height: 0;
  height: 100%;
  align-content: stretch;
}
body.swagg-desktop .performance-layout[data-deck-count="4"] .deck.deck-v2 {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Docked Compact Mixer: fully visible, ~140?180px --- */
html.mixer-is-docked.swagg-layout-wide body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-standard body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked.swagg-short body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"],
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="4"],
html.mixer-is-docked.swagg-tablet.swagg-landscape .performance-layout {
  padding-bottom: max(172px, calc(env(safe-area-inset-bottom, 0px) + 164px)) !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact {
  max-height: 168px !important;
  min-height: 148px !important;
  bottom: 8px !important;
  left: 10px !important;
  right: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-body-horizontal {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-horizontal .mixer-channel .vertical-fader {
  max-height: 72px !important;
  min-height: 52px;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-expanded {
  max-height: min(42vh, 320px) !important;
  overflow: auto !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="4"] {
  padding-bottom: max(172px, calc(env(safe-area-inset-bottom, 0px) + 164px)) !important;
}

/* --- Find Music: useful empty state; not a giant blank column --- */
.perf-music-results:empty::before,
.perf-music-rail .quickload-empty,
[data-el="perf-ql-list"]:empty::before {
  content: "No tracks listed yet ? Add Music or load demo fixtures.";
  display: block;
  padding: 0.75rem 0.35rem;
  color: rgba(240, 230, 208, 0.7);
  font-size: 0.82rem;
  line-height: 1.4;
}
.perf-music-rail .perf-music-results:empty {
  display: block !important;
  flex: 0 0 auto;
  min-height: 3rem;
  max-height: 6rem;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-music-rail {
  min-width: 17.5rem;
  max-width: 21rem;
}
body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-rail {
  min-width: 14rem;
  max-width: 18rem;
}
html.swagg-layout-compact body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-rail:not(.is-collapsed),
html.swagg-short body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-rail:not(.is-collapsed) {
  max-width: 15rem;
}

/* --- Diagnostics: sit above docked mixer, never cover controls --- */
html.mixer-is-docked #swagg-perf-launcher {
  bottom: calc(176px + env(safe-area-inset-bottom, 0px)) !important;
  right: 14px !important;
  z-index: 45 !important;
}
html.mixer-is-floating #swagg-perf-launcher {
  bottom: 14px !important;
  right: 14px !important;
}
html.mobile-perf-active #swagg-perf-launcher {
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)) !important;
  right: 10px !important;
}

/* Deck stretch uses available height without hollowing empty decks */
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2 .deck.deck-v2:not(.is-empty) .deck-platter-wrap {
  flex: 1 1 auto;
  max-height: min(38vh, 320px);
}

/* ========== EMPTY DECK FILL v119b ========== */
/* Pull the platter/transport composition up under the waveform; grow platter into free height. */
body.swagg-desktop .deck.is-empty.deck-v2 {
  display: flex !important;
  flex-direction: column !important;
}
body.swagg-desktop .deck.is-empty.deck-v2 .deck-top {
  flex: 0 0 auto;
}
body.swagg-desktop .deck.is-empty.deck-v2 .waveform-slot {
  flex: 0 0 auto;
}
body.swagg-desktop .deck.is-empty.deck-v2 .deck-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: center !important;
  margin-top: 0.25rem;
}
body.swagg-desktop .deck.is-empty.deck-v2 .deck-platter-wrap {
  align-self: center;
  justify-content: center;
}
body.swagg-desktop .deck.is-empty.deck-v2 .turntable {
  --tt-w: clamp(170px, 22vh, 280px) !important;
}
body.swagg-desktop .deck.is-empty.deck-v2 .deck-main {
  justify-content: center !important;
}
/* Find Music: when results empty/hidden, don't look like a giant blank column */
body.swagg-desktop .perf-music-rail .perf-music-results[hidden],
body.swagg-desktop .perf-music-rail .perf-music-results:empty {
  display: block !important;
  flex: 0 0 auto !important;
  min-height: 4rem;
  max-height: 8rem;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .perf-music-rail,
body.swagg-desktop .performance-layout[data-deck-count="4"] .perf-music-rail {
  justify-content: flex-start;
}
/* Ensure docked mixer faders stay inside the 168px strip */
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact .mixer-body-horizontal {
  padding-bottom: 0.2rem !important;
}
html.mixer-is-docked .mixer-panel.mixer-float.is-docked.is-dock-compact .crossfader-section {
  margin-bottom: 0 !important;
  padding-bottom: 0.15rem !important;
}

/* ========== DESKTOP EMPTY DECK + ALL MUSIC + DnD v121 ========== */
/* Empty decks keep EQ / secondary / FX chrome and match loaded card height. */
body.swagg-desktop .deck.is-empty .deck-secondary-row,
body.swagg-desktop .deck.is-empty .deck-tone-row {
  display: flex !important;
  flex-wrap: wrap;
  opacity: 0.95;
}
body.swagg-desktop .deck.is-empty .deck-advanced {
  display: block !important;
  opacity: 0.95;
}
body.swagg-desktop .deck.is-empty .deck-nudge-group,
body.swagg-desktop .deck.is-empty .btn-auto-fader,
body.swagg-desktop .deck.is-empty [data-help="auto-fader-what"],
body.swagg-desktop .deck.is-empty .wave-orient-btn,
body.swagg-desktop .deck.is-empty .deck-eject-hdr,
body.swagg-desktop .deck.is-empty .deck-meta[data-el="time"] {
  display: inline-flex !important;
}
body.swagg-desktop .deck.is-empty .deck-meta[data-el="time"] {
  display: inline-block !important;
  opacity: 0.65;
}
body.swagg-desktop .deck.is-empty .deck-empty-hint {
  padding: 0.15rem 0.1rem 0.25rem;
}
body.swagg-desktop .deck.is-empty .deck-empty-title {
  font-size: 0.95rem;
}
body.swagg-desktop .deck.is-empty .deck-empty-msg {
  font-size: 0.76rem;
  margin: 0.1rem 0 0.3rem;
}
/* Equal-height deck cards (loaded vs empty) */
body.swagg-desktop .decks-row.count-2,
body.swagg-desktop .decks-row.count-4 {
  align-items: stretch !important;
}
body.swagg-desktop .decks-row.count-2 .deck.deck-v2,
body.swagg-desktop .decks-row.count-4 .deck.deck-v2 {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.swagg-desktop .decks-row .deck.deck-v2 .deck-body {
  flex: 1 1 auto !important;
  min-height: 0;
  align-items: stretch !important;
}
body.swagg-desktop .deck.is-empty.deck-v2 .deck-main {
  justify-content: flex-start !important;
  gap: 0.4rem !important;
}
body.swagg-desktop .deck.is-empty.deck-v2 .deck-body {
  align-content: stretch !important;
  align-items: stretch !important;
}

/* All Music rail: fill height with scrollable full library */
body.swagg-desktop .perf-music-rail {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
body.swagg-desktop .perf-music-rail .perf-music-head {
  flex: 0 0 auto;
}
body.swagg-desktop .perf-music-rail .perf-music-results,
body.swagg-desktop .perf-music-rail .perf-music-results[hidden],
html.mixer-is-docked .performance-layout .perf-music-results,
html.mixer-is-docked .performance-layout[data-deck-count="2"] .perf-music-results,
html.mixer-is-docked .performance-layout[data-deck-count="4"] .perf-music-results {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 8rem !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.swagg-desktop .perf-ql-list-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.35rem 0.45rem 0.45rem;
  font-size: 0.78rem;
  color: rgba(240, 230, 208, 0.75);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  margin-bottom: 0.35rem;
}
body.swagg-desktop .perf-ql-row[draggable="true"] {
  cursor: grab;
}
body.swagg-desktop .perf-ql-row.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

/* Drop target affordance on decks / platters */
body.swagg-desktop .deck.is-drop-target {
  outline: 2px solid rgba(212, 175, 55, 0.85);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}
body.swagg-desktop .deck .deck-platter-wrap.is-drop-target,
body.swagg-desktop .deck .turntable.is-drop-target {
  outline: 2px solid rgba(212, 175, 55, 0.95);
  outline-offset: 4px;
  border-radius: 50%;
}

/* ========== 2-DECK PACK FIX v122 ========== */
/* 4-deck already packs densely. 2-deck was stretching body + centering
   platter/controls, which created a large empty band under the header. */
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-body,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-body,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-body {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  flex-direction: unset !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: start !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .deck-platter-wrap {
  flex: 0 0 auto !important;
  max-height: none !important;
  align-self: start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-top: 0 !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-main,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-main,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .deck-main,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-main {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  align-self: start !important;
  gap: 0.35rem !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-side {
  align-self: start !important;
}
/* Keep empty waveform as a thin placeholder so controls sit under the header */
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .waveform-slot.horizontal,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .waveform-canvas.horizontal {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 38px !important;
  flex: 0 0 auto !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .deck-empty-hint {
  padding: 0.1rem 0.1rem 0.2rem !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .deck-empty-load {
  min-height: 2.1rem !important;
}
/* Cap platter size in tall 2-deck cards (match denser 4-deck feel) */
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck .turntable,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap .turntable,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .turntable {
  --tt-w: clamp(148px, 15vh, 210px) !important;
}
/* When loaded, let waveform use a modest share of free height ? not a void */
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck:not(.is-empty) .waveform-slot.horizontal {
  flex: 0 1 auto !important;
  min-height: 48px;
  max-height: min(14vh, 96px);
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  justify-content: flex-start !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-top,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .waveform-slot {
  flex: 0 0 auto !important;
}

/* ========== 2-DECK PACK FIX v122b ========== */
/* Free height must sit BELOW the control stack, not as a hole between
   header and platter. deck-body sizes to content; card can still stretch. */
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-top,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .waveform-slot,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-top,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .waveform-slot {
  flex: 0 0 auto !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-body,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-body,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-body,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 .deck-body,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-body {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: start !important;
  min-height: 0 !important;
  margin-top: 0.2rem !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .deck-platter-wrap,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap {
  flex: 0 0 auto !important;
  align-self: start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  max-height: none !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-main,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .deck-main,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-main,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-main {
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  align-self: start !important;
}
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-side,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-side {
  align-self: start !important;
}
/* Undo tall empty-deck centering from earlier packs on 2-deck only */
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty.deck-v2 .deck-platter-wrap {
  align-self: start !important;
  justify-content: flex-start !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .waveform-slot.horizontal,
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.is-empty .waveform-canvas.horizontal {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 36px !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck .turntable,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck-platter-wrap .turntable {
  --tt-w: clamp(140px, 14vh, 200px) !important;
}

/* ========== 2-DECK DENSITY v123c ========== */
/* Match 4-deck density: size cards to content; leftover workspace stays
   under the deck row (above Up Next), not as empty fill inside each card. */
body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row {
  align-items: start !important;
  align-content: start !important;
  height: 100% !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

/* ========== 2-DECK FILL v124b ========== */
/* Prefer full-height deck cards (like a proper console panel) with content
   packed to the top. Empty space stays under FX inside the card ? not a
   mid-deck hole, and not a gap between the cards and Up Next. */
body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row.count-2,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .decks-row {
  align-items: stretch !important;
  align-content: stretch !important;
}
body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2,
html.mixer-is-docked body.swagg-desktop .performance-layout[data-deck-count="2"] .deck.deck-v2 {
  height: 100% !important;
  max-height: none !important;
  justify-content: flex-start !important;
}

/* ========== Skin chooser cards (Settings ? Appearance ? Console Skin) ========== */
.skin-chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  align-items: stretch;
}
@media (max-width: 900px) {
  .skin-chooser {
    grid-template-columns: 1fr;
  }
}
.skin-card {
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(12, 10, 8, 0.92);
  border-radius: 6px;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: #f3ebd4;
  min-width: 0;
}
.skin-card.is-active {
  box-shadow: inset 0 0 0 1px #d4af37, 0 0 16px rgba(212, 175, 55, 0.25);
}
.skin-card-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #0a0806;
}
.skin-card-preview.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 230, 200, 0.45);
}
.skin-card h4 {
  margin: 0;
  font-size: 0.92rem;
  color: #e8c85a;
}
.skin-card p {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(240, 230, 200, 0.65);
  line-height: 1.35;
  min-height: 2.4rem;
}
.skin-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skin-card-meta span {
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
  color: #d4af37;
}
.skin-card-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: auto;
}
.skin-card-actions .btn {
  flex: 1;
  min-height: 1.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
}

/* Shared top-menu SKINS switcher (all shells) */
.skins-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 90;
}
.skins-menu-toggle {
  padding-left: 0.95rem !important;
  padding-right: 0.95rem !important;
  min-height: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.skins-menu-toggle-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1;
}
.skins-menu-icon,
.skins-menu-chevron {
  flex-shrink: 0;
  display: block;
}
.skins-menu-icon {
  opacity: 0.95;
}
.skins-menu-label {
  letter-spacing: 0.08em;
}
.skins-menu-chevron {
  opacity: 0.8;
  transition: transform 0.14s ease;
}
.skins-menu-toggle:hover {
  color: var(--accent-cream, #f3ebd4);
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.08);
}
.skins-menu-toggle:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.85);
  outline-offset: 2px;
  border-color: rgba(212, 175, 55, 0.7);
}
.skins-menu-wrap.is-open .skins-menu-toggle {
  color: var(--accent-gold, #d4af37);
  border-color: rgba(212, 175, 55, 0.75);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 14px rgba(212, 175, 55, 0.18);
}
.skins-menu-wrap.is-open .skins-menu-chevron {
  transform: rotate(180deg);
}
.skins-menu-panel {
  position: fixed;
  z-index: 15000;
  width: clamp(260px, 24vw, 340px);
  max-width: calc(100vw - 1rem);
  max-height: min(70vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.45rem 0.45rem;
  background: #14110e;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 4px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.08);
  pointer-events: auto;
}
/* Portaled to document.body so shell overflow:hidden / stacking cannot clip it */
body > .skins-menu-panel,
.skins-menu-panel.skins-menu-panel--portal {
  position: fixed !important;
  z-index: 15000 !important;
}
.skins-menu-panel[hidden] {
  display: none !important;
}
.skins-menu-heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.15rem 0.45rem 0.4rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  margin-bottom: 0.1rem;
}
.skins-menu-heading strong {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #d4af37;
  font-weight: 800;
}
.skins-menu-heading span {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(243, 235, 212, 0.62);
  font-weight: 500;
}
.skins-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.skins-menu-item {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  min-height: 2.65rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  border-radius: 3px;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.skins-menu-swatch {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.2rem;
  border-radius: 2px;
  background: var(--skins-swatch, #d4af37);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.skins-menu-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.skins-menu-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f3ebd4;
  line-height: 1.25;
}
.skins-menu-blurb {
  font-size: 0.68rem;
  line-height: 1.3;
  color: rgba(243, 235, 212, 0.58);
  font-weight: 500;
}
.skins-menu-item.is-active,
.skins-menu-item:hover,
.skins-menu-item:focus-visible {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.12);
  outline: none;
}
.skins-menu-item:focus-visible {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35);
}
.skins-menu-item.is-active {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.16);
}
.skins-menu-check {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.95;
  color: #d4af37;
  white-space: nowrap;
  font-weight: 800;
  margin-top: 0.15rem;
}
.skins-menu-check.is-empty {
  width: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 720px) {
  .skins-menu-toggle {
    min-height: 2rem;
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
  .skins-menu-panel {
    width: min(100vw - 1rem, 340px);
    max-height: min(75vh, 460px);
  }
}

/* Audio & Scratch diagnostics (Settings only — not performance chrome) */
.settings-scratch-diag {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.55rem;
}
.settings-scratch-diag summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted, #b9a88a);
}
.settings-scratch-diag-pre {
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #d7ffe2;
  font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  max-height: 14rem;
  overflow: auto;
}

/* Settings usability pass: grouped decisions, visible values, advanced tools
   collapsed by default. Presentation only; all existing data-el/action hooks
   remain the source of behavior and persistence. */
.settings-form:has(.settings-scratch-card) {
  max-width: min(980px, 100%);
}
.settings-card {
  width: 100%;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(212, 175, 55, 0.055), transparent 42%),
    rgba(12, 10, 8, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.settings-card-head h3,
.settings-card-head h4 {
  margin: 0.18rem 0 0.3rem;
  color: var(--text-primary, #f3ebd8);
}
.settings-card-head h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.settings-card-head h4 {
  font-size: 1.15rem;
}
.settings-card-head .subtitle,
.settings-subsection-head .subtitle {
  margin: 0;
  line-height: 1.45;
}
.settings-eyebrow {
  display: block;
  color: var(--accent-gold, #d4af37);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.settings-save-badge,
.settings-current-view,
.settings-recommended {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.09);
  color: #f0d58b;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.settings-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.15rem;
}
.settings-form .settings-choice-card,
.settings-choice-card {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.settings-form .settings-choice-card .settings-label,
.settings-form .settings-slider-card .settings-label,
.settings-card .settings-label {
  font-size: 0.88rem;
  font-weight: 750;
}
.settings-choice-card small,
.settings-slider-card small,
.settings-diagnostic-options small,
.settings-advanced summary small {
  display: block;
  color: var(--text-muted, #b9a88a);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}
.settings-form .settings-choice-card select,
.settings-choice-card select {
  width: 100%;
  max-width: none;
  margin-top: auto;
}
.settings-subsection {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-subsection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.settings-subsection-head h4 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--text-primary, #f3ebd8);
}
.settings-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.settings-form .settings-slider-card,
.settings-slider-card {
  min-width: 0;
  padding: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.settings-form .settings-slider-card.is-controller,
.settings-slider-card.is-controller {
  border-color: rgba(0, 229, 255, 0.38);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.075), rgba(0, 0, 0, 0.16));
}
.settings-slider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.settings-slider-head > span:first-child {
  min-width: 0;
}
.settings-range-output {
  flex: 0 0 auto;
  min-width: 4.1rem;
  padding: 0.22rem 0.4rem;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.11);
  color: #f0d58b;
  font: 700 0.78rem/1.2 ui-monospace, Menlo, Consolas, monospace;
  text-align: center;
}
.settings-form .settings-slider-card input[type="range"],
.settings-slider-card input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0.45rem 0 0;
  accent-color: var(--accent-gold, #d4af37);
}
.settings-slider-card.is-controller input[type="range"] {
  accent-color: #00d8ef;
}
.settings-advanced {
  margin-top: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.settings-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  color: var(--text-primary, #f3ebd8);
  font-size: 0.88rem;
  font-weight: 750;
  list-style: none;
}
.settings-advanced > summary::-webkit-details-marker {
  display: none;
}
.settings-advanced > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent-gold, #d4af37);
  font-size: 1.15rem;
  line-height: 1;
}
.settings-advanced[open] > summary::after {
  content: "−";
}
.settings-advanced[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}
.settings-advanced-body {
  padding: 0.85rem;
}
.settings-reset-row {
  padding: 0 0.85rem 0.9rem;
}
.settings-diagnostic-options {
  display: grid;
  gap: 0.65rem;
}
.settings-diagnostic-options .settings-row-check {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-color: rgba(0, 229, 255, 0.22);
  background: rgba(0, 229, 255, 0.035);
}
.settings-diagnostic-options .settings-row-check > span {
  min-width: 0;
}
.settings-diagnostic-options .settings-scratch-diag {
  margin: 0.15rem 0 0;
  padding: 0.65rem 0.15rem 0;
}
.settings-interface-card {
  margin-top: 0.15rem;
}
.settings-view-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}
.settings-view-options .btn {
  min-height: 2.55rem;
  justify-content: center;
}
.settings-view-options .btn.active,
.settings-view-options .btn[aria-pressed="true"] {
  border-color: rgba(212, 175, 55, 0.75);
  background: rgba(212, 175, 55, 0.18);
  color: #fff2c4;
}
.settings-recovery-note {
  margin-top: 0.75rem;
  color: var(--text-muted, #b9a88a);
  font-size: 0.75rem;
}
.settings-recovery-note summary {
  cursor: pointer;
  font-weight: 650;
}
.settings-recovery-note p {
  margin: 0.55rem 0;
  line-height: 1.5;
}
.settings-form .controllers-settings {
  padding: 1rem;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.04);
}
.settings-form .controllers-settings .ctrl-settings-entry {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.settings-form .controllers-settings .ctrl-muted {
  flex: 1 1 20rem;
  margin: 0;
}
@media (max-width: 760px) {
  .settings-card {
    padding: 0.9rem;
    border-radius: 11px;
  }
  .settings-card-head,
  .settings-subsection-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .settings-save-badge,
  .settings-current-view,
  .settings-recommended {
    align-self: flex-start;
  }
  .settings-quick-grid,
  .settings-range-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-advanced > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.15rem 0.75rem;
  }
  .settings-advanced > summary > span {
    grid-column: 1;
    grid-row: 1;
  }
  .settings-advanced > summary small {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }
  .settings-advanced > summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .settings-view-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-form .controllers-settings .ctrl-settings-entry {
    align-items: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   desktop.css v148 additions
   A. Compact stems strip for LC/NN decks (pads-only view with Stems label)
   B. LC library track row: ⚡ prep icon + prep button
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Compact stems strip — deck-stems-pads-compact ───────────────────── */

/* Grid: 4 equal columns, full width */
.deck-stems-pads-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.1rem 0 0.1rem;
}

/* "STEMS" label above the 4 channels */
.deck-stems-pads-compact::before {
  content: "STEMS";
  grid-column: 1 / -1;
  display: block;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  padding-bottom: 0.18rem;
  margin-bottom: 0.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Each stem channel */
.deck-stems-pads-compact .stem-pad {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-sizing: border-box;
}

/* Per-stem accent colors */
.deck-stems-pads-compact .stem-pad[data-stem="vocals"]      { --sp-color: #5ab4ff; }
.deck-stems-pads-compact .stem-pad[data-stem="drums"]       { --sp-color: #ff7f5c; }
.deck-stems-pads-compact .stem-pad[data-stem="bass"]        { --sp-color: #4ecb71; }
.deck-stems-pads-compact .stem-pad[data-stem="other"],
.deck-stems-pads-compact .stem-pad[data-stem="instruments"] { --sp-color: #c07df5; }

/* Top row: [V] [Solo] side-by-side */
.deck-stems-pads-compact .stem-pad-actions {
  display: flex;
  flex-direction: row;
  gap: 0.18rem;
  align-items: stretch;
  height: 1.4rem;
}

/* Small colored square badge = the mute button (V / D / B / I) */
.deck-stems-pads-compact .stem-mute {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  line-height: 1;
  color: var(--sp-color, #fff);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--sp-color, rgba(255,255,255,0.3));
  border-radius: 3px;
  transition: opacity 0.12s, background 0.12s;
  cursor: pointer;
}

.deck-stems-pads-compact .stem-mute:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.14);
}

.deck-stems-pads-compact .stem-mute:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.deck-stems-pads-compact .stem-pad.muted .stem-mute {
  opacity: 0.22;
  text-decoration: line-through;
  background: transparent;
}

/* Solo button — fills remaining width */
.deck-stems-pads-compact .stem-solo {
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 0.1rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  /* Always show Solo in the compact view — override the JS-managed hidden attr */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.deck-stems-pads-compact .stem-solo:not(:disabled):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.deck-stems-pads-compact .stem-solo.active {
  color: #f4d67a;
  border-color: rgba(244, 214, 122, 0.55);
  background: rgba(244, 214, 122, 0.1);
}

.deck-stems-pads-compact .stem-solo:disabled {
  opacity: 0.18;
  cursor: not-allowed;
}

/* Horizontal level slider below the buttons */
.deck-stems-pads-compact input[type="range"] {
  width: 100%;
  height: 0.55rem;
  accent-color: var(--sp-color, #c4a35a);
  margin: 0;
  cursor: pointer;
  display: block;
}

.deck-stems-pads-compact input[type="range"]:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ── B. LC library track row: stems prep icon & button ──────────────────── */

/* Inline status badge (⚡ / ⏳ / ↻ / !) */
.lc-stems-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  line-height: 1;
  margin-right: 0.22rem;
  vertical-align: middle;
  flex-shrink: 0;
}

.lc-stems-icon.is-cached {
  color: #f4d67a;
  text-shadow: 0 0 5px rgba(244, 214, 122, 0.5);
}

.lc-stems-icon.is-processing {
  color: #5ab4ff;
  animation: stems-badge-pulse 1s ease-in-out infinite;
}

.lc-stems-icon.is-queued {
  color: rgba(255, 255, 255, 0.4);
}

.lc-stems-icon.is-failed {
  color: #ff6b6b;
}

/* ⚡ prep button inline in the track row */
.lc-stems-prep-btn {
  font-size: 0.6rem;
  padding: 0.06rem 0.2rem;
  min-height: 0;
  min-width: 0;
  height: auto;
  line-height: 1.5;
  color: #d4af37;
  border-color: rgba(212, 175, 55, 0.36);
  background: rgba(212, 175, 55, 0.07);
  margin-right: 0.12rem;
  vertical-align: middle;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.lc-stems-prep-btn:hover {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.62);
}

/* ═══════════════════════════════════════════════════════════════════════════
   desktop.css v149 additions
   A. Compact pads: stem-pad-main (solo-toggle big button)
   B. Compact pads: stems-compact-prep row (prep icon inside panel)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. stem-pad-main — the V/D/B/I solo-toggle button ─────────────────── */

/* Takes full width; sits at top of each stem pad column */
.deck-stems-pads-compact .stem-pad-main {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  line-height: 1;
  color: var(--sp-color, #fff);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--sp-color, rgba(255, 255, 255, 0.3));
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

/* Active = this stem is soloed → fill with stem color */
.deck-stems-pads-compact .stem-pad-main.active {
  background: var(--sp-color, rgba(255, 255, 255, 0.9));
  color: rgba(0, 0, 0, 0.85);
  font-weight: 900;
  border-color: var(--sp-color, rgba(255, 255, 255, 0.9));
}

.deck-stems-pads-compact .stem-pad-main:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.deck-stems-pads-compact .stem-pad-main:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.13);
}

.deck-stems-pads-compact .stem-pad-main.active:not(:disabled):hover {
  opacity: 0.82;
}

/* Hide legacy .stem-mute square and .stem-solo text (replaced by stem-pad-main) */
.deck-stems-pads-compact .stem-mute   { display: none !important; }
.deck-stems-pads-compact .stem-solo   { display: none !important; }

/* The level slider still needs to be visible */
.deck-stems-pads-compact .stem-pad > input[type="range"] {
  display: block;
  width: 100%;
}

/* ── B. stems-compact-prep — spans all 4 columns above the pads ─────────── */

.stems-compact-prep {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0.3rem;
  min-height: 0;
}

.stems-compact-prep:empty {
  display: none;
  padding: 0;
}

/* ⚡ Prep Stems button inside the panel */
.stems-compact-prep-btn {
  font-size: 0.6rem;
  padding: 0.12rem 0.5rem;
  min-height: 0;
  min-width: 0;
  color: #d4af37;
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.stems-compact-prep-btn:hover {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.65);
}

/* Status text (⏳ Analyzing / ↻ Queued) */
.stems-compact-prep-status {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.02em;
}

/* ========== v155: Sync & Quantize button visual treatment ========== */

/* --- Sync button: cyan/teal accent — stands out from grey transport buttons ---
   !important on color/background/border so skin-specific .lc-meta-row/.lc-transport
   overrides (which run at higher specificity) can't wash out the accent color.      */
.btn.btn-sync {
  background: linear-gradient(180deg, #162e3a, #0d1e26) !important;
  border-color: rgba(0, 210, 255, 0.65) !important;
  color: #00d2ff !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn.btn-sync:hover:not(:disabled) {
  background: linear-gradient(180deg, #1e4050, #0f2634) !important;
  border-color: rgba(0, 210, 255, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.28), 0 0 10px rgba(0, 210, 255, 0.15) !important;
}
/* Active = synced to master → green */
.btn.btn-sync.active {
  background: linear-gradient(180deg, #0a3d24, #052617) !important;
  border-color: rgba(0, 255, 160, 0.8) !important;
  color: #00ffa0 !important;
  box-shadow: 0 0 0 1px rgba(0, 255, 160, 0.22), 0 0 10px rgba(0, 255, 160, 0.2) !important;
}
.btn.btn-sync:disabled {
  opacity: 0.36;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* --- Cue button: red lamp (Pioneer/Serato convention) ---
   Same !important strategy to survive skin overrides. Lit (.active) while the
   deck sits parked on the cue point; clears the moment playback moves off.     */
.btn.btn-cue {
  background: linear-gradient(180deg, #331416, #1f0c0d) !important;
  border-color: rgba(255, 82, 82, 0.6) !important;
  color: #ff6b6b !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn.btn-cue:hover:not(:disabled) {
  background: linear-gradient(180deg, #421a1d, #271011) !important;
  border-color: rgba(255, 82, 82, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.28), 0 0 10px rgba(255, 82, 82, 0.15) !important;
}
/* Active = parked on the cue point → lit red lamp */
.btn.btn-cue.active {
  background: linear-gradient(180deg, #b91c1c, #7f1212) !important;
  border-color: rgba(255, 130, 130, 0.95) !important;
  color: #ffe4e4 !important;
  box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.35), 0 0 14px rgba(255, 60, 60, 0.45) !important;
}
.btn.btn-cue:disabled {
  opacity: 0.36;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* --- Headphone cue (PFL): mixer-channel 🎧 lamp + Phones monitor section ---
   Channel button lights like a PFL LED while that deck feeds the phones.      */
#studio-root .btn.btn-hp-cue {
  padding: 0.14rem 0.3rem !important;
  font-size: 0.78rem !important;
  line-height: 1.25;
  min-height: 0;
  /* Never the flex-shrink victim: min-height 0 (needed to beat the global
     .btn height) let a squeezed mixer channel collapse this button's box,
     painting the 🎧 over the % readout above it. The fader is the designed
     height absorber — this box must always fit its glyph. */
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(180deg, #1c2026, #12151a) !important;
  filter: grayscale(1) brightness(1.15);
}
#studio-root .btn.btn-hp-cue:hover {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
#studio-root .btn.btn-hp-cue.active {
  filter: none;
  background: linear-gradient(180deg, #e8edf5, #b9c3d4) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 12px rgba(220, 235, 255, 0.5) !important;
}
/* LC/Classic docked mixer strip: the channel column has zero spare height —
   the fader sits at its min and the % readout fills the rest exactly (the
   %-clip fix maths). An in-flow 🎧 stole ~26px and pushed the readout over
   itself. Take it out of flow: top-right corner, beside the deck number. */
#studio-root .lc-mixer-vol-row .mixer-channel,
#studio-root [data-el="shell-mixer-vol"] .mixer-channel {
  position: relative;
}
#studio-root .lc-mixer-vol-row .mixer-channel .btn.btn-hp-cue,
#studio-root [data-el="shell-mixer-vol"] .mixer-channel .btn.btn-hp-cue {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  z-index: 2;
  padding: 0.08rem 0.2rem !important;
  font-size: 0.72rem !important;
}

.headphone-section {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Collapsible header — the whole row is the expand/collapse button. */
.hp-head-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.hp-head-btn:hover .hp-head-label {
  color: var(--accent-gold, #d4af37);
}
.hp-head-label {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hp-chevron {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.6;
}
/* Expanded body: compact two-column grid (mix + vol share a row). */
.hp-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.5rem;
  align-items: center;
}
.hp-body[hidden] {
  display: none !important;
}
.hp-body .hp-actions,
.hp-body .hp-device-row {
  grid-column: 1 / -1;
}
.hp-body .master-row {
  margin: 0;
  min-width: 0;
}
/* Neon Nights 4-deck: the docked mixer strip is height-capped and its stack
   (channels + talkback + phones) can exceed it — scroll inside the strip so
   nothing becomes unreachable (this page never scrolls as a whole).
   Selector strength matches the NN talkback reveal (see .nn-mixer-col). */
.nn-mixer-col .mixer-panel.nn-internal-mixer[data-el="mixer"][data-deck-count="4"] .mixer-body-horizontal {
  overflow-y: auto;
  min-height: 0;
}
.hp-status {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.hp-status.is-live {
  border-color: rgba(220, 235, 255, 0.75);
  color: #eaf2ff;
  background: rgba(220, 235, 255, 0.14);
}
.hp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.hp-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  padding: 0.35rem 0.45rem;
}
.hp-actions .btn.active {
  border-color: rgba(220, 235, 255, 0.8);
  background: linear-gradient(180deg, rgba(220, 235, 255, 0.26), rgba(220, 235, 255, 0.08));
  color: #eaf2ff;
}
/* [hidden] loses to the class's display:flex — make it stick. */
.hp-device-row[hidden] {
  display: none !important;
}
.hp-device-row select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  font-size: 0.72rem;
  background: #12151a;
  color: var(--text, #e8e6df);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 0.25rem 0.3rem;
}

/* --- Quantize button: purple/violet Pro accent ---
   Same !important strategy to survive skin overrides.                                */
.btn.btn-quantize {
  background: linear-gradient(180deg, #26163e, #160d28) !important;
  border-color: rgba(168, 85, 247, 0.65) !important;
  color: #c084fc !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
}
.btn.btn-quantize:hover:not(:disabled):not(.is-plan-locked) {
  background: linear-gradient(180deg, #2e1a4c, #1c1034) !important;
  border-color: rgba(168, 85, 247, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.28), 0 0 10px rgba(168, 85, 247, 0.15) !important;
}
/* Active = quantize on */
.btn.btn-quantize.active {
  background: linear-gradient(180deg, #5b21b6, #3b0d8a) !important;
  border-color: rgba(196, 132, 252, 0.9) !important;
  color: #f0e6ff !important;
  box-shadow: 0 0 0 1px rgba(196, 132, 252, 0.28), 0 0 12px rgba(168, 85, 247, 0.25) !important;
}

/* Pro-locked state: gold Pro badge, muted purple */
.btn.btn-quantize.is-plan-locked {
  background: linear-gradient(180deg, #1e1530, #13101e);
  border-color: rgba(212, 175, 55, 0.45);
  color: rgba(196, 132, 252, 0.5);
  cursor: pointer;
}
.btn.btn-quantize.is-plan-locked::after {
  content: "PRO";
  display: inline-block;
  margin-left: 0.28em;
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-gold, #d4af37);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 2px;
  padding: 0 0.22em;
  vertical-align: middle;
  line-height: 1.5;
}
.btn.btn-quantize.is-plan-locked:hover {
  border-color: rgba(212, 175, 55, 0.75);
  color: rgba(196, 132, 252, 0.7);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18);
}

/* Transport STEMS button while stem audio is live/processing:
   lit gold, and one press returns the deck to the original track. */
.btn[data-act="stems-panel-toggle"].is-stems-live {
  color: #0b0b0b !important;
  background: linear-gradient(180deg, #f0d488, #d8b45a) !important;
  border-color: #d8b45a !important;
  box-shadow: 0 0 8px rgba(216, 180, 90, 0.55);
}

/* Stems panel is meaningless on an empty deck — and its "Stems Ready 0%"
   strip painted over deck controls on short (MacBook) viewports. The
   #studio-root id outranks every skin-level display rule. */
#studio-root .deck.is-empty [data-el="stems"] { display: none !important; }

/* ============================================================
 * MAC FIX ROUND 2 (2026-08-08) — feedback from a real Mac user
 * ============================================================ */

/* macOS overlay scrollbars are invisible until scrolled, so the internal
   scroll areas introduced by the short-viewport layout looked like
   chopped-off content. Custom webkit scrollbars render always-visible. */
#studio-root .lc-performance::-webkit-scrollbar,
#studio-root .nn-performance::-webkit-scrollbar,
#studio-root .lc-deck-meta::-webkit-scrollbar,
#studio-root .nn-deck-meta::-webkit-scrollbar,
#studio-root .nn-midrow > *::-webkit-scrollbar,
#studio-root .deck .stem-ai-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#studio-root .lc-performance::-webkit-scrollbar-thumb,
#studio-root .nn-performance::-webkit-scrollbar-thumb,
#studio-root .lc-deck-meta::-webkit-scrollbar-thumb,
#studio-root .nn-deck-meta::-webkit-scrollbar-thumb,
#studio-root .nn-midrow > *::-webkit-scrollbar-thumb,
#studio-root .deck .stem-ai-panel::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.45);
  border-radius: 4px;
}
#studio-root .lc-performance::-webkit-scrollbar-track,
#studio-root .nn-performance::-webkit-scrollbar-track,
#studio-root .lc-deck-meta::-webkit-scrollbar-track,
#studio-root .nn-deck-meta::-webkit-scrollbar-track,
#studio-root .nn-midrow > *::-webkit-scrollbar-track,
#studio-root .deck .stem-ai-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}
#studio-root .lc-performance,
#studio-root .nn-performance,
#studio-root .lc-deck-meta,
#studio-root .nn-deck-meta {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.45) rgba(255, 255, 255, 0.06);
}

/* AI Stems consent/status panel: never let the legal copy blow up the deck
   card on short screens — the panel itself scrolls (visible scrollbar). */
@media (max-height: 900px) {
  #studio-root .deck .stem-ai-panel {
    max-height: 150px !important;
    overflow-y: auto !important;
  }
}

/* Floating Diagnostics launcher (admin): the classic-layout bottom offset
   (176px cleared a bottom-docked mixer) parked it on top of the FX rack in
   the column-mixer skins. Pin it just above the status bar there. */
html[data-skin="swagg-library-console"] #swagg-perf-launcher,
html[data-skin="swagg-classic"] #swagg-perf-launcher,
html[data-skin="swagg-neon-nights"] #swagg-perf-launcher {
  bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  right: 10px !important;
  z-index: 60 !important;
}

/* Diagnostics launcher: low-profile so it never visually fights the
   library header it floats near (admin-only control). */
html[data-skin="swagg-library-console"] #swagg-perf-launcher,
html[data-skin="swagg-classic"] #swagg-perf-launcher,
html[data-skin="swagg-neon-nights"] #swagg-perf-launcher {
  font-size: 0.62rem !important;
  padding: 0.18rem 0.5rem !important;
  opacity: 0.7;
}
html[data-skin="swagg-library-console"] #swagg-perf-launcher:hover,
html[data-skin="swagg-classic"] #swagg-perf-launcher:hover,
html[data-skin="swagg-neon-nights"] #swagg-perf-launcher:hover { opacity: 1; }

/* AI Stems consent/status copy: readable on every skin. Neon Nights and
   Classic inherit a near-black .subtitle color there (dark-on-dark). */
#studio-root .deck .stem-ai-panel,
#studio-root .deck .stem-ai-panel p,
#studio-root .deck .stem-ai-panel .stem-ai-legal,
#studio-root .deck .stem-ai-panel label,
#studio-root .deck .stem-ai-panel .stem-ai-quality,
#studio-root .deck .stem-ai-panel .stem-ai-mem,
#studio-root .deck .stem-ai-panel [data-el="stem-ai-status"] {
  color: #e6ddc6 !important;
}
#studio-root .deck .stem-ai-panel strong { color: #f6ecd2 !important; }
#studio-root .deck .stem-ai-panel a {
  color: #e8b64c !important;
  text-decoration: underline;
}
#studio-root .deck .stem-ai-panel select {
  color: #f0e8d2 !important;
  background: #171310 !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

/* Plan-gated stems notice: branded CTA row instead of a bare dashed box.
   ("Stems are for Pro and Ultimate Plans Only" + Upgrade button) */
#studio-root .deck-stems--coming-soon .stems-coming-soon {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.7rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.13), rgba(20, 16, 10, 0.65));
  text-align: center;
}
#studio-root .deck-stems--coming-soon .stems-coming-soon-msg {
  font-size: 0.74rem;
  color: #ead9ac;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
#studio-root .stems-coming-soon--plan .stems-coming-soon-msg::before {
  content: "🔒";
  margin-right: 0.4rem;
}
#studio-root .stems-upgrade-cta {
  min-height: 1.5rem !important;
  padding: 0.12rem 0.85rem !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ecd07c, #c9a24a) !important;
  color: #1a140c !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  box-shadow: 0 1px 8px rgba(212, 175, 55, 0.35);
  cursor: pointer;
}
#studio-root .stems-upgrade-cta:hover {
  background: linear-gradient(180deg, #f6dd8c, #d8b159) !important;
}

/* No dashed outline around the gated-stems notice — the section container
   carried its own dashed border on top of the notice pill. */
#studio-root .deck-stems--coming-soon {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* SLIP button: unmistakable on/off state (orange family — SYNC owns cyan,
   QUANTIZE owns purple). !important beats the skin-level button overrides. */
.btn.btn-slip {
  color: #ff9f43 !important;
  border-color: rgba(255, 159, 67, 0.55) !important;
  font-weight: 700 !important;
}
.btn.btn-slip:not(.active):hover {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 6px rgba(255, 159, 67, 0.35);
}
.btn.btn-slip.active {
  background: linear-gradient(180deg, #ffb45e, #e07f1f) !important;
  color: #1a1206 !important;
  border-color: #ffb45e !important;
  box-shadow: 0 0 12px rgba(255, 159, 67, 0.65);
  text-shadow: none !important;
}
.btn.btn-slip:disabled {
  color: rgba(255, 159, 67, 0.35) !important;
  border-color: rgba(255, 159, 67, 0.2) !important;
  box-shadow: none;
}

/* Stems panel: Quality + Memory-safe mode are local-engine options — removed
   per user decision (cloud AI stems have no user-facing quality knobs). */
#studio-root .stem-ai-quality,
#studio-root .stem-ai-mem,
#studio-root [data-el="stem-ai-quality"],
#studio-root [data-el="stem-ai-memsafe"] {
  display: none !important;
}

/* Two-step Beat Sync pairing states:
   armed source = filled cyan · fully synced (source + followers) = filled green */
.btn.btn-sync.is-sync-source {
  background: linear-gradient(180deg, #35dcff, #00a8d8) !important;
  color: #04222b !important;
  border-color: #35dcff !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
  text-shadow: none !important;
}
.btn.btn-sync.is-sync-locked {
  background: linear-gradient(180deg, #3dffb4, #00c878) !important;
  color: #03291a !important;
  border-color: #3dffb4 !important;
  box-shadow: 0 0 12px rgba(0, 255, 160, 0.65);
  text-shadow: none !important;
}

/* Header Log Out button: quiet until hovered, unmistakably an exit. */
#studio-root .btn-logout {
  color: #e08a8a !important;
  border-color: rgba(224, 110, 110, 0.45) !important;
}
#studio-root .btn-logout:hover {
  background: linear-gradient(180deg, #d96a6a, #a83f3f) !important;
  color: #fff !important;
  border-color: #d96a6a !important;
}

/* "⚡ Create Stems" — the ONLY control that starts billable stem processing.
   Deliberately loud so a DJ always knows this button (and nothing else)
   spends stem minutes. Cached tracks load free and skip it entirely. */
#studio-root .deck .btn[data-act="stem-ai-approve"] {
  display: block;
  width: 100%;
  padding: 10px 14px !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.03em;
  color: #221a06 !important;
  background: linear-gradient(180deg, #f0d060, #c49a2c) !important;
  border: 1px solid #f0d060 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
  animation: stem-create-pulse 2.2s ease-in-out infinite;
  text-shadow: none !important;
}
#studio-root .deck .btn[data-act="stem-ai-approve"]:hover {
  background: linear-gradient(180deg, #ffe27a, #d4a935) !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.7);
}
@keyframes stem-create-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.35); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.65); }
}

/* Feature-unavailable notice: visible top-center toast explaining WHY a
   feature is locked, with an upgrade link. */
#swagg-feature-notice {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9400;
  width: min(480px, calc(100vw - 24px));
}
#swagg-feature-notice[hidden] { display: none; }
#swagg-feature-notice .sfn-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(180deg, #1a1712, #0e0c09);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  color: #f3ead3;
  font-size: 0.9rem;
  line-height: 1.35;
  animation: sfn-in 0.22s ease;
}
@keyframes sfn-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
#swagg-feature-notice .sfn-icon { font-size: 1.1rem; flex: 0 0 auto; }
#swagg-feature-notice .sfn-msg { flex: 1; min-width: 0; }
#swagg-feature-notice .sfn-link {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #221a06 !important;
  background: linear-gradient(180deg, #f0d060, #c49a2c);
  text-decoration: none;
  white-space: nowrap;
}
#swagg-feature-notice .sfn-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: rgba(243, 234, 215, 0.6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
#swagg-feature-notice .sfn-close:hover { color: #f3ead3; }

/* BEAT LOOP — green identity (industry-standard loop color).
   Active = a live seamless loop is rolling; halve/double resize it. */
#studio-root .btn.btn-loop {
  color: #58d98c !important;
  border-color: rgba(88, 217, 140, 0.45) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#studio-root .btn.btn-loop:hover:not(:disabled) {
  background: rgba(88, 217, 140, 0.12) !important;
}
#studio-root .btn.btn-loop.active {
  background: linear-gradient(180deg, #66e69a, #2aa55f) !important;
  color: #06230f !important;
  border-color: #66e69a !important;
  box-shadow: 0 0 12px rgba(88, 217, 140, 0.6);
  text-shadow: none !important;
}

/* KEY LOCK — steel-blue identity: tempo moves, the key stays put. */
#studio-root .btn.btn-keylock {
  color: #6fb3ff !important;
  border-color: rgba(111, 179, 255, 0.45) !important;
}
#studio-root .btn.btn-keylock:hover:not(:disabled) {
  background: rgba(111, 179, 255, 0.12) !important;
}
#studio-root .btn.btn-keylock.active {
  background: linear-gradient(180deg, #8cc3ff, #3f7fd4) !important;
  color: #06182e !important;
  border-color: #8cc3ff !important;
  box-shadow: 0 0 12px rgba(111, 179, 255, 0.6);
  text-shadow: none !important;
}

/* STUTTER — magenta identity (SYNC=cyan, QUANTIZE=purple, SLIP=orange).
   Hold = machine-gun repeat; active state pulses fast like the effect. */
#studio-root .btn.btn-stutter {
  color: #ff5ea8 !important;
  border-color: rgba(255, 94, 168, 0.5) !important;
  touch-action: none;
}
#studio-root .btn.btn-stutter:hover:not(:disabled) {
  background: rgba(255, 94, 168, 0.12) !important;
}
#studio-root .btn.btn-stutter.active {
  background: linear-gradient(180deg, #ff7eb8, #d43e84) !important;
  color: #fff !important;
  border-color: #ff7eb8 !important;
  box-shadow: 0 0 12px rgba(255, 94, 168, 0.65);
  animation: stutter-pulse 0.18s steps(2) infinite;
  text-shadow: none !important;
}
@keyframes stutter-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
#studio-root .btn.btn-stutter-rate {
  min-width: 2em;
  padding-left: 0.4em !important;
  padding-right: 0.4em !important;
  color: rgba(255, 94, 168, 0.85) !important;
  border-color: rgba(255, 94, 168, 0.35) !important;
  font-variant-numeric: tabular-nums;
}
#studio-root .btn.btn-stutter-rate:hover:not(:disabled) {
  background: rgba(255, 94, 168, 0.12) !important;
}

/* Header Dashboard link: gold accent, renders like the sibling nav buttons. */
#studio-root a.btn-dashboard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #e6c766 !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}
#studio-root a.btn-dashboard:hover {
  background: linear-gradient(180deg, #f0d060, #c49a2c) !important;
  color: #221a06 !important;
  border-color: #f0d060 !important;
}

/* Stems status column in the library tables (all skins) */
#studio-root th.lib-stems-col {
  width: 3.4em;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#studio-root td.lib-stems-cell {
  text-align: center;
  white-space: nowrap;
}
#studio-root td.lib-stems-cell .lc-stems-icon,
#studio-root td.lib-stems-cell .lc-stems-prep-btn {
  margin: 0 auto;
}

/* ===== STEMS: [hidden] must ALWAYS hide =====
   Author display rules silently defeat the UA's [hidden] { display:none }:
   the gold Create-Stems button (#studio-root .deck .btn[data-act="stem-ai-approve"]
   display:block), .stem-ai-progress (display:flex) and the LC compact panel
   reveal (.deck-stems--compact .stem-ai-panel display:block !important) were
   resurfacing JS-hidden elements — a clean deck (stemBackend "original") in
   cloud-only mode showed a phantom "Download Instant Stems model (~172 MB)"
   button + "Stems Ready: 0%" strip. ID-level specificity seals it for every
   skin: when the studio hides a stems element, it is hidden. */
#studio-root [data-el="stems"][hidden],
#studio-root [data-el="stems"] [hidden],
#studio-root .deck .stem-ai-panel[hidden],
#studio-root .deck .stem-ai-panel [hidden] {
  display: none !important;
}

/* ===== 2-DECK: deck controls follow the content (2026-08-10) =====
   The LC-family skins bottom-pin .lc-transport with margin-top:auto. That was
   invisible while the deck meta column's height matched the center mixer
   column — but the mixer column grew (talkback + phones) and the deck lost
   its phantom stems panel padding, so 2-deck decks stretched ~300px taller
   than their content and the auto margin opened a huge void between the loop
   row and the transport. In 2-deck, transport now follows the content;
   4-deck keeps the skins' own compact layout (no slack there anyway). */
#studio-root .lc-performance:not(.lc-four-deck):not(.is-four-deck):not([data-deck-count="4"]) .lc-transport {
  margin-top: 0.45rem !important;
}

/* ===== [hidden] seals from the 2026-08-10 studio-wide audit =====
   Runtime sweep (scripts/visual-review/hidden-audit.js) found exactly two
   elements left where author display rules defeat [hidden]:
   - .deck-body (legacy base deck controls, display:grid at 0px height)
   - the NN internal mixer's hidden .crossfader-section (display:flex leaked
     an 8px "Master" sliver). Seal both; everything else already honors
     [hidden] or is covered by the stems seal above. */
#studio-root .deck-body[hidden],
#studio-root .crossfader-section[hidden] {
  display: none !important;
}

/* ===== 2-DECK: performance row must FIT the mixer column (2026-08-10) =====
   In 2-deck the center mixer column (channels + assign tiles + crossfader +
   talkback + phones ~717px) grew past the performance row's old fractional
   height, and with overflow visible it bled straight into the library
   (library header rendering across the mixer, PHONES row on top of track
   rows). 4-deck already sizes its deck row to content (auto + remainder) —
   give 2-deck the same contract: row 1 fits the tallest column, the library
   takes the remainder and the page scrolls per the round-4 design. */
#studio-root .lc-shell:not(.lc-four-deck):not(.is-four-deck):not([data-deck-count="4"]) .main-stage,
#studio-root .nn-shell:not(.nn-four-deck):not(.is-four-deck):not([data-deck-count="4"]) .main-stage {
  grid-template-rows: max-content minmax(0, 1fr) !important;
}

/* Round 2: the rule above lost to the skins' own
   html[data-skin] body.studio-live #studio-root .lc-shell:not(...)... .main-stage
   0.78fr/1fr split (higher specificity + later load order). Outrank it. */
html[data-studio-shell] body.studio-live #studio-root .app-shell.lc-shell:not(.lc-four-deck):not(.is-four-deck):not([data-deck-count="4"]) .main-stage,
html[data-studio-shell] body.studio-live #studio-root .app-shell.nn-shell:not(.nn-four-deck):not(.is-four-deck):not([data-deck-count="4"]) .main-stage {
  grid-template-rows: max-content minmax(0, 1fr) !important;
}

/* ===== Crate / playlist drag-and-drop + smart crates (2026-08-10) ===== */
/* Drop highlight on any crate/playlist target (base rail pills, LC/NN sidebar) */
#studio-root .pl-pill.is-drop-target,
#studio-root .lc-crate-item.is-drop-target,
#studio-root .nn-crate-item.is-drop-target {
  outline: 2px solid var(--accent-gold, #d4af37) !important;
  outline-offset: -1px;
  background: rgba(212, 175, 55, 0.18) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}
/* Smart crates refuse drops — show it clearly mid-drag */
#studio-root .pl-pill.is-drop-refused,
#studio-root .lc-crate-item.is-drop-refused,
#studio-root .nn-crate-item.is-drop-refused {
  outline: 2px dashed rgba(255, 120, 120, 0.7) !important;
  outline-offset: -1px;
  cursor: not-allowed;
}
/* ✨ smart crate identity — subtle violet tint */
#studio-root .pl-pill.is-smart,
#studio-root .lc-crate-item.is-smart,
#studio-root .nn-crate-item.is-smart {
  border-color: rgba(192, 132, 252, 0.45);
}
#studio-root .lc-crate-item.is-smart > span:first-child {
  color: #d6b7ff;
}
/* LC sidebar section headers: inline + / ✨ tool buttons */
#studio-root .lc-crates-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#studio-root .lc-crate-tools {
  display: inline-flex;
  gap: 4px;
}
#studio-root .lc-crate-tool {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 4px;
  color: var(--accent-gold, #d4af37);
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
#studio-root .lc-crate-tool:hover {
  background: rgba(212, 175, 55, 0.18);
}

/* ===================================================================
   TEMPORARY - Jog Calibration diagnostic overlay
   Toggled by Settings > Audio & Scratch > "Show Jog Diagnostics".
   Entirely hidden (and not painted) during normal DJ use.

   The rotor reuses the SAME spindle constants as .tt-vinyl so it is
   concentric with the printed record and 0deg is exactly 12 o'clock.
   Its rotation is written by studio.js _updateJogDiag from the
   AudioWorklet playhead. There is no CSS animation here on purpose -
   the marker must never move unless the audio position moved.
   =================================================================== */
.jog-diag,
.jog-diag-index,
.jog-diag-rotor {
  --cx: 0.4424;
  --cy: 0.4774;
  --d: 0.5176;
}

.jog-diag[hidden] {
  display: none !important;
}

.jog-diag {
  position: absolute;
  inset: 0;
  z-index: 12; /* above .tt-vinyl (2), below the hotspots/badges */
  pointer-events: none;
}

.jog-diag-index,
.jog-diag-rotor {
  position: absolute;
  width: calc(var(--tt-w) * var(--d));
  height: calc(var(--tt-w) * var(--d));
  left: calc(var(--tt-w) * var(--cx) - var(--tt-w) * var(--d) / 2);
  top: calc(var(--tt-h) * var(--cy) - var(--tt-w) * var(--d) / 2);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.jog-diag-index svg,
.jog-diag-rotor svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Fixed index at 12 o'clock - never rotates. */
.jog-diag-index {
  z-index: 2;
}
.jd-index-tick {
  stroke: #00e5ff;
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
.jd-index-arrow {
  fill: #00e5ff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

/* Rotating marker - angle comes from the audio playhead. */
.jog-diag-rotor {
  z-index: 1;
  will-change: transform;
  backface-visibility: hidden;
}
.jd-rotor-line {
  stroke: #ff2d55;
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95));
}
.jd-rotor-dot {
  fill: #ff2d55;
  stroke: #fff;
  stroke-width: 1.1;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.95));
}
.jd-rotor-hub {
  fill: #fff;
  opacity: 0.9;
}

/* ---- Numeric readout (outside .tt-chassis, which clips) ---- */
.jog-diag-readout[hidden] {
  display: none !important;
}

.jog-diag-readout {
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 6px;
  background: rgba(6, 10, 14, 0.92);
  color: #dfe9ef;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  text-align: left;
}

.jog-diag-readout .jdr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.jog-diag-readout .jdr-title {
  color: #00e5ff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

.jog-diag-readout .jdr-zero {
  font-size: 0.64rem;
  padding: 2px 7px;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid rgba(0, 229, 255, 0.5);
  color: #00e5ff;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
}
.jog-diag-readout .jdr-zero:hover {
  background: rgba(0, 229, 255, 0.16);
}

.jog-diag-readout .jdr-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
}

.jog-diag-readout .jdr-k {
  color: #7f93a0;
}

.jog-diag-readout .jdr-v {
  color: #f2f7fa;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.jog-diag-readout .jdr-note {
  margin: 5px 0 0;
  color: #6d8391;
  font-size: 0.62rem;
  line-height: 1.3;
}

/* ===================================================================
   TEMPORARY — Capture Raw Jog Input (DJ Controllers → Diagnostics)
   =================================================================== */
.jogcap-temp {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffb454;
  border: 1px solid rgba(255, 180, 84, 0.5);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 8px;
  vertical-align: middle;
}

.jogcap-note {
  font-size: 0.76rem;
  line-height: 1.45;
  opacity: 0.85;
  margin: 4px 0;
}

.jogcap-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  color: #00e5ff;
  align-self: center;
}

.jogcap-scroll {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  max-height: 220px;
}

.jogcap-scroll--tall {
  max-height: 340px;
}

.jogcap-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  white-space: nowrap;
}

.jogcap-table th,
.jogcap-table td {
  padding: 3px 7px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.jogcap-table thead th {
  position: sticky;
  top: 0;
  background: #12171c;
  color: #8fa3b0;
  font-weight: 600;
  z-index: 1;
}

.jogcap-empty {
  opacity: 0.6;
  font-style: italic;
  white-space: normal;
}

.jogcap-out {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
  color: #dfe9ef;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.jogcap-good {
  color: #7cff6b;
}

.jogcap-bad {
  color: #ff6b6b;
}

/* "Show Markers" — header shortcut for the same flag as the Settings checkbox.
   Sits among buttons in three different top bars (.top-bar .tb-primary,
   .lc-top-center, .nn-top-center), so it is styled standalone rather than
   inheriting any one skin's button rules. */
.show-markers-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(0, 229, 255, 0.38);
  border-radius: 5px;
  background: rgba(0, 229, 255, 0.06);
  color: var(--text-primary, #e8eef2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.show-markers-toggle:hover {
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 229, 255, 0.14);
}

.show-markers-toggle.is-on {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.2);
  color: #d6faff;
}

.show-markers-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #00e5ff;
  cursor: pointer;
}

.show-markers-text {
  pointer-events: none;
}

/* Narrow consoles: keep the box, drop the words rather than wrapping the bar.
   Scoped to the packed HEADER bars only — inside the mobile "More" panels there
   is room for the label, and a bare unlabelled checkbox there would be a riddle.
   (The input still carries aria-label="Show Markers" either way.) */
@media (max-width: 1180px) {
  .tb-primary .show-markers-toggle .show-markers-text,
  .lc-top-center .show-markers-toggle .show-markers-text,
  .nn-top-center .show-markers-toggle .show-markers-text,
  .ms-header-actions .show-markers-toggle .show-markers-text,
  .mobile-perf-header .show-markers-toggle .show-markers-text {
    display: none;
  }
  .tb-primary .show-markers-toggle,
  .lc-top-center .show-markers-toggle,
  .nn-top-center .show-markers-toggle,
  .ms-header-actions .show-markers-toggle,
  .mobile-perf-header .show-markers-toggle {
    padding: 4px 6px;
  }
}

/* In the mobile More panels it sits in a grid/flex of .btn pills — match their
   height so the row doesn't look ragged. */
.ms-more-actions .show-markers-toggle,
.mobile-more-actions .show-markers-toggle {
  justify-content: center;
  padding: 8px 10px;
  font-size: 0.8rem;
}

/* Settings checkbox row for the toggle.
   .settings-form .settings-row sets flex-direction:column for every row, so the
   direction MUST be reset here or the checkbox renders as a small orphan box
   under the label instead of a proper toggle row. Not scoped to #studio-root:
   the settings panel also renders inside .ms-panel-settings / .panel-page,
   which are not always descendants of #studio-root. */
.settings-form .settings-row.settings-row-check,
.settings-row-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.06);
  cursor: pointer;
}
.settings-row-check .settings-label {
  flex: 1 1 auto;
}
.settings-row-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #00e5ff;
  cursor: pointer;
}