/* MelodinAI Live DJ — club performance layout */

html:has(#viewAutoMix:not(.hidden)),
body:has(#viewAutoMix:not(.hidden)) {
  height: 100%;
  overflow: hidden;
}

body:has(#viewAutoMix:not(.hidden)) .app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  padding-bottom: 0;
}

body:has(#viewAutoMix:not(.hidden)) .sidebar,
body:has(#viewAutoMix:not(.hidden)) .mobile-topbar,
body:has(#viewAutoMix:not(.hidden)) .bottom-player {
  display: none !important;
}

body:has(#viewAutoMix:not(.hidden)) .main-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

body:has(#viewAutoMix:not(.hidden)) .main-column {
  display: flex;
  flex-direction: column;
  margin-left: 0 !important;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#viewAutoMix {
  position: relative;
  padding: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
}

#viewAutoMix.hidden { display: none !important; }

.djs {
  --djs-bg: #0c0c10;
  --djs-surface: #141418;
  --djs-surface2: #1c1c22;
  --djs-border: #2a2a32;
  --djs-text: #f4f4f7;
  --djs-muted: #9a9aa8;
  --djs-accent: #ff4b8b;
  --djs-accent2: #ff9f5a;
  --djs-a: #c8c8d0;
  --djs-b: #c8c8d0;
  display: grid;
  grid-template-rows: 32px auto minmax(100px, 0.72fr) minmax(240px, 1.55fr);
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  background: var(--djs-bg);
  color: var(--djs-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
}

.djs-toolbar {
  grid-row: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.7rem;
  border-bottom: 1px solid var(--djs-border);
  background: #121214;
}
.djs-brand { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.djs-kicker {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--djs-accent2);
}
.djs-title { margin: 0; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.03em; }
.djs-toolbar-actions { display: flex; align-items: center; gap: 0.05rem; }
.djs-toolbar-actions .djs-btn {
  height: 22px;
  padding: 0 0.42rem;
  border: 0;
  background: transparent;
  color: var(--djs-muted);
  border-radius: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  box-shadow: none;
}
.djs-toolbar-actions .djs-btn:hover {
  color: var(--djs-text);
  background: transparent;
  border: 0;
}
.djs-toolbar-actions .djs-btn.is-on,
.djs-toolbar-actions .djs-btn[aria-pressed="true"] {
  border: 0;
  background: transparent;
  color: var(--djs-accent2);
  box-shadow: none;
}
.djs:fullscreen,
.djs:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  background: var(--djs-bg);
}
.djs-master-lab {
  margin-left: 0.55rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--djs-border);
  color: var(--djs-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.djs-session-lab {
  margin-left: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--djs-accent2);
}
.djs-ai-style {
  height: 22px;
  margin: 0 0.15rem 0 0;
  padding: 0 0.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--djs-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.djs-ai-style:hover,
.djs-ai-style:focus {
  color: var(--djs-text);
  outline: none;
}
.djs-toolbar-actions .djs-btn#djsAiDj.is-on,
.djs-toolbar-actions .djs-btn#djsAiDj[aria-pressed="true"] {
  color: #7dffb3;
}
.djs-ai-status {
  max-width: 220px;
  margin-right: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--djs-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.djs-ai-status.is-on {
  color: #7dffb3;
}
@media (max-width: 900px) {
  .djs-ai-status { max-width: 120px; }
  .djs-ai-style { display: none; }
}
.djs-session-lab.is-offline {
  background: #ff4b8b;
}
.djs-session-lab.is-ok {
  background: #2a2a32;
  color: var(--djs-muted);
}

.djs-btn, .djs-play, .djs-pad, .djs-mini {
  border: 1px solid var(--djs-border);
  background: var(--djs-surface2);
  color: var(--djs-text);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  touch-action: manipulation;
}
.djs-btn {
  height: 28px;
  padding: 0 0.7rem;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.djs-btn.is-on, .djs-btn[aria-pressed="true"] {
  border-color: var(--djs-accent2);
  background: var(--djs-accent);
  color: #fff;
}
.djs-mini {
  height: 28px;
  min-width: 32px;
  padding: 0 0.4rem;
  font-size: 11px;
}

/* —— Top waveforms —— */
.djs-waves {
  grid-row: 3;
  grid-column: 1;
  display: grid;
  grid-template-rows: 34px 1fr 1fr;
  min-height: 0;
  background: #0a0a0e;
  border-bottom: 1px solid var(--djs-border);
}
.djs-wave-tools {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem 0.55rem;
  height: 34px;
  min-height: 34px;
  padding: 0 0.65rem;
  border-bottom: 1px solid var(--djs-border);
  background: #161618;
  overflow: hidden;
  box-sizing: border-box;
}
.djs-wave-tools-lab {
  color: var(--djs-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.djs-wave-tools-sep {
  width: 1px;
  height: 1.1rem;
  margin: 0 0.15rem;
  background: var(--djs-border);
  flex-shrink: 0;
}
.djs-wave-select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-width: 8rem;
  height: 24px;
  padding: 0 1.55rem 0 0.55rem;
  border: 1px solid var(--djs-border);
  border-radius: 4px;
  background-color: #1c1c22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239a9aa8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 0.55rem;
  color: var(--djs-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 22px;
  cursor: pointer;
}
.djs-wave-select:hover,
.djs-wave-select:focus {
  border-color: var(--djs-accent2);
  outline: none;
}
.djs-wave-select option {
  background: #1c1c22;
  color: #f4f4f7;
}
.djs-wave-lane {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  border-bottom: 1px solid var(--djs-border);
}
.djs-wave-lane:last-child { border-bottom: 0; }
.djs-wave-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: #161618;
  border-right: 1px solid var(--djs-border);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f2f2f6;
}
.djs-wave-id small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--djs-muted);
}
.djs-kick-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #24242c;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
  pointer-events: none;
}
.djs-wave-id .djs-kick-lamp {
  width: 11px;
  height: 11px;
  margin-top: 1px;
}
.djs-kick-state.is-lock { color: #3dcc7a; }
.djs-kick-state.is-slip { color: #f0c43a; }
.djs-kick-state.is-out { color: #ff5a6a; }
.djs-wave-stack {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.djs-wave-over, .djs-wave-zoom {
  width: 100%;
  max-width: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.djs-wave-over {
  height: 28px;
  max-height: 28px;
  background: #0a0a0c;
  overflow: hidden;
}
.djs-wave-zoom {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0c0c0e;
}
.djs-wave-over.is-scrubbing,
.djs-wave-zoom.is-scrubbing,
.djs-jog.is-scrubbing {
  cursor: grabbing;
}
.djs-deck.is-drop,
.djs-wave-lane.is-drop {
  outline: 2px solid var(--djs-accent);
  outline-offset: -2px;
  background: rgba(255, 75, 139, 0.08);
}

/* —— Middle: decks + mixer —— */
.djs-mid {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: visible;
  border-bottom: 1px solid var(--djs-border);
}
.djs-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px minmax(0, 1fr);
  min-height: 0;
  overflow: visible;
}

.djs-deck {
  display: grid;
  grid-template-rows: auto auto minmax(0, auto);
  min-height: 0;
  padding: 0.4rem 0.55rem 0.4rem;
  background: var(--djs-surface);
  overflow: visible;
  gap: 0.28rem;
}
.djs-deck[data-deck="1"] { border-right: 1px solid var(--djs-border); }
.djs-deck[data-deck="2"] { border-left: 1px solid var(--djs-border); }
.djs-deck.is-focus { box-shadow: inset 0 2px 0 var(--djs-accent); }

.djs-deck-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}
.djs-deck-cover {
  width: 44px; height: 44px;
  border-radius: 3px;
  background: #111;
  object-fit: cover;
}
.djs-deck-info { min-width: 0; }
.djs-deck-title {
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.djs-deck-artist {
  margin-top: 2px;
  color: var(--djs-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.djs-deck-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.15rem 0.85rem;
  text-align: right;
}
.djs-bpm-read {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.djs-keychip, .djs-remain, .djs-pitch-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.djs-keychip { color: var(--djs-accent2); }
.djs-remain { color: var(--djs-muted); }
.djs-loadbar { height: 2px; background: #2a2a30; overflow: hidden; }
.djs-loadbar > i { display: block; height: 100%; width: 0; background: var(--djs-accent2); }

.djs-deck-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  gap: 0.45rem;
  min-height: 0;
  align-items: stretch;
}
.djs-deck[data-deck="2"] .djs-deck-body {
  grid-template-columns: 188px minmax(0, 1fr);
}
.djs-deck[data-deck="2"] .djs-jog-wrap { grid-column: 1; grid-row: 1; }
.djs-deck[data-deck="2"] .djs-deck-controls { grid-column: 2; grid-row: 1; }
.djs-deck-controls {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  min-height: 0;
}

.djs-jog-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: stretch;
  justify-items: center;
  align-self: stretch;
}
.djs-jog-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 128px;
}
.djs-jog {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, #1a1a1e 0%, #121214 55%, #0a0a0c 100%);
  border: 1px solid #3a3a44;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 8px #16161a,
    inset 0 0 0 9px #2e2e36,
    0 10px 22px rgba(0,0,0,0.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.djs-jog:active { cursor: grabbing; }
.djs-jog.is-bending {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 8px #16161a,
    inset 0 0 0 9px var(--djs-accent2),
    0 10px 22px rgba(0,0,0,0.5);
}
.djs-jog.is-scrubbing .djs-jog-disc {
  filter: brightness(1.1);
}
.djs-jog-disc {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,0.03) 28.5%, transparent 29.5%),
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(0,0,0,0.25) 36.4%, transparent 37.2%),
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(255,255,255,0.025) 44.3%, transparent 45%),
    radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(0,0,0,0.22) 52.3%, transparent 53%),
    radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(255,255,255,0.02) 60.2%, transparent 61%),
    radial-gradient(circle at 50% 50%, transparent 0 68%, rgba(0,0,0,0.2) 68.2%, transparent 69%),
    radial-gradient(circle at 50% 50%, transparent 0 76%, rgba(255,255,255,0.018) 76.2%, transparent 77%),
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #1c1c20 0%, #141416 62%, #0f0f12 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 18px rgba(0,0,0,0.35);
  transform-origin: 50% 50%;
  will-change: transform;
}
.djs-jog-disc::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
  pointer-events: none;
}
.djs-jog-mark {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 3px;
  height: 14%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff4b8b 0%, #ff9f5a 100%);
  box-shadow: 0 0 8px rgba(255, 75, 139, 0.55);
}
.djs-jog-hub {
  position: absolute;
  inset: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 32%, #2a2a32 0%, #121216 70%, #0a0a0c 100%);
  border: 2px solid rgba(255, 75, 139, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 3px #0c0c10,
    0 0 12px rgba(255, 75, 139, 0.2);
  color: #f4f4f7;
  font-weight: 800;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.djs-bend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: none;
}
.djs-bend-btn {
  pointer-events: auto;
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #3a3a44;
  background: #1c1c22;
  color: #f0f0f4;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
}
.djs-bend-btn:hover { border-color: var(--djs-accent2); }
.djs-bend-btn.is-on {
  background: var(--djs-accent2);
  border-color: transparent;
  color: #fff;
}
.djs-pitch-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  min-height: 168px;
  justify-content: flex-start;
  padding-top: 2px;
}
.djs-pitch-slider {
  --p: 0.5;
  --fill-top: 50%;
  --fill-h: 0%;
  position: relative;
  width: 28px;
  height: 124px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: ns-resize;
  touch-action: none;
  flex: 1 1 auto;
  min-height: 110px;
}
.djs-pitch-slider:focus { outline: 0; }
.djs-pitch-slider:focus-visible .djs-pitch-rail {
  box-shadow: inset 0 0 0 1px var(--djs-accent2), 0 0 0 2px rgba(255, 159, 90, 0.2);
}
.djs-pitch-rail {
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #101014;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 0 0 1px #2c2c34;
  overflow: hidden;
}
.djs-pitch-ticks {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(12.5% - 1px),
      rgba(255, 255, 255, 0.07) calc(12.5% - 1px),
      rgba(255, 255, 255, 0.07) 12.5%
    );
  pointer-events: none;
}
.djs-pitch-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fill-top);
  height: var(--fill-h);
  border-radius: 999px;
  background: linear-gradient(180deg, #7eb6ff 0%, #4ea3ff 100%);
  box-shadow: 0 0 8px rgba(78, 163, 255, 0.4);
  pointer-events: none;
}
.djs-pitch-slider.is-plus .djs-pitch-fill {
  background: linear-gradient(180deg, #ffb27a 0%, var(--djs-accent2) 100%);
  box-shadow: 0 0 8px rgba(255, 159, 90, 0.45);
}
.djs-pitch-slider.is-zero .djs-pitch-fill {
  box-shadow: none;
  background: transparent;
}
.djs-pitch-zero {
  position: absolute;
  left: -5px;
  right: -5px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: #c8c8d0;
  box-shadow: 0 0 6px rgba(244, 244, 247, 0.35);
  pointer-events: none;
  z-index: 1;
}
.djs-pitch-cap {
  position: absolute;
  left: 50%;
  top: calc(10px + (1 - var(--p)) * (100% - 20px - 16px));
  width: 22px;
  height: 16px;
  margin-left: -11px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fbfbfd 0%, #d0d0d8 55%, #b8b8c2 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 2;
}
.djs-pitch-cap::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  height: 6px;
  background:
    linear-gradient(#8a8a96, #8a8a96) 0 0 / 100% 1px no-repeat,
    linear-gradient(#8a8a96, #8a8a96) 0 2.5px / 100% 1px no-repeat,
    linear-gradient(#8a8a96, #8a8a96) 0 5px / 100% 1px no-repeat;
  opacity: 0.7;
}
.djs-pitch-slider.is-zero .djs-pitch-cap {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.djs-pitch-fader-lab {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--djs-muted);
}
.djs-pitch-range-lab {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.djs-pitch-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 3.4rem;
  height: 1.45rem;
  padding: 0 1.05rem 0 0.3rem;
  border: 1px solid var(--djs-border);
  border-radius: 4px;
  background-color: #1c1c22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239a9aa8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.28rem center;
  background-size: 0.45rem;
  color: var(--djs-text);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
}
.djs-pitch-range:hover,
.djs-pitch-range:focus {
  border-color: var(--djs-accent2);
  outline: none;
}
.djs-pitch-range option {
  background: #1c1c22;
  color: #f4f4f7;
}

.djs-transport {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
}
.djs-play, .djs-transport .djs-btn {
  height: 32px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 0;
  padding: 0 0.25rem;
  touch-action: manipulation;
}
.djs-play { min-width: 0; }
.djs-play.is-on { background: var(--djs-accent); border-color: var(--djs-accent); color: #fff; }
.djs-transport .djs-btn[data-act="cue"].is-on,
.djs-transport .djs-btn[data-act="cue"].is-set {
  background: #f45b69;
  border-color: transparent;
  color: #fff;
}
.djs-sync.is-on { background: #d4c056; color: #16140a; border-color: transparent; }
.djs-master.is-on { background: var(--djs-accent2); color: #fff; border-color: transparent; }
.djs-hp.is-on {
  background: #3d8bfd;
  border-color: transparent;
  color: #fff;
}

.djs-deck-sub {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.djs-deck-sub .djs-btn { height: 32px; flex: 1; }

.djs-fx {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  margin-top: 0.2rem;
  padding: 0.28rem 0.32rem 0.22rem;
  border: 1px solid var(--djs-border);
  border-radius: 6px;
  background: #121216;
  min-width: 0;
}
.djs-fx-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
}
.djs-fx-lab {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--djs-accent2);
}
.djs-brake {
  height: 20px;
  min-width: 0;
  padding: 0 0.4rem;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.djs-brake.is-on {
  background: #c45a2a;
  border-color: transparent;
  color: #fff;
}
.djs-fx-pots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.06rem;
  min-width: 0;
  align-items: start;
}
.djs-fx-fl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.djs-fx-fl .djs-pot { width: 100%; }
.djs-jet {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: 14px;
  min-width: 0;
  max-width: none;
  width: auto;
  padding: 0 0.28rem;
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 14px;
}
.djs-jet.is-on {
  background: #d4c056;
  border-color: transparent;
  color: #16140a;
}
.djs-fx .djs-pot {
  min-width: 0;
  padding: 0.1rem 0.05rem 0.15rem;
}
.djs-fx .djs-knob-lab { font-size: 8px; letter-spacing: 0.03em; white-space: nowrap; }
.djs-fx .djs-pot-val { font-size: 8px; }
.djs-gridbar { display: none; }

/* Mixer */
.djs-mixer-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0.4rem 0.35rem 0.35rem;
  background: #16161a;
  min-height: 0;
  min-width: 0;
  overflow: visible;
}
.djs-mixer-chs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.djs-ch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  padding: 0 0.15rem 2px;
  overflow: visible;
}
.djs-ch[data-deck="1"] {
  border-right: 1px solid var(--djs-border);
  padding-right: 0.25rem;
}
.djs-ch[data-deck="2"] {
  padding-left: 0.25rem;
}
.djs-ch-name {
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--djs-muted);
  padding-bottom: 1px;
}
.djs-ch-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 4px 6px;
  align-items: start;
  width: 100%;
  min-width: 0;
}
.djs-ch[data-deck="2"] .djs-ch-cols {
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
}
.djs-ch-fader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4px;
  width: 36px;
  justify-self: stretch;
}
.djs-ch[data-deck="1"] .djs-ch-fader-wrap { align-items: flex-end; }
.djs-ch[data-deck="2"] .djs-ch-fader-wrap { align-items: flex-start; }
.djs-ch-meter {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5px;
  height: 104px;
}
.djs-vu {
  display: block;
  width: 8px;
  height: 104px;
  border-radius: 3px;
  background: #0b0b0e;
  box-shadow: inset 0 0 0 1px #2a2a32;
  flex: 0 0 auto;
}
.djs-vu.is-master {
  width: 100%;
  height: 8px;
  flex: 1 1 auto;
}
.djs-vu-master {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 0.45rem;
  padding: 8px 0.25rem 2px;
  flex: 0 0 auto;
}
.djs-vu-master span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--djs-muted);
  text-align: right;
  justify-self: end;
}
.djs-vu-master .djs-vu {
  grid-column: 2;
}
.djs-fader {
  --f: 1;
  position: relative;
  width: 22px;
  height: 104px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: ns-resize;
  touch-action: none;
}
.djs-fader:focus {
  outline: 0;
}
.djs-fader:focus-visible .djs-fader-rail {
  box-shadow: inset 0 0 0 1px var(--djs-accent), 0 0 0 2px rgba(255, 75, 139, 0.18);
}
.djs-fader-rail {
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #101014;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), inset 0 0 0 1px #2c2c34;
  overflow: hidden;
}
.djs-fader-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--f) * 100%);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6aa0 0%, var(--djs-accent) 70%);
  box-shadow: 0 0 8px rgba(255, 75, 139, 0.45);
}
.djs-ch[data-deck="2"] .djs-fader-fill {
  background: linear-gradient(180deg, #ffb27a 0%, var(--djs-accent2) 70%);
  box-shadow: 0 0 8px rgba(255, 159, 90, 0.4);
}
.djs-fader-cap {
  position: absolute;
  left: 50%;
  top: calc(8px + (1 - var(--f)) * (100% - 16px - 14px));
  width: 18px;
  height: 14px;
  margin-left: -9px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fbfbfd 0%, #d4d4dc 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
  pointer-events: none;
}
.djs-fader-cap::before,
.djs-fader-cap::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: #8e8e98;
}
.djs-fader-cap::before { top: 5px; }
.djs-fader-cap::after { top: 8px; }
.djs-fader.is-open .djs-fader-cap {
  box-shadow: 0 0 0 1px rgba(255, 75, 139, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
}
.djs-ch-eq,
.djs-ch-util {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.djs-knob-lab {
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--djs-muted);
  font-weight: 700;
  line-height: 9px;
  height: 9px;
  white-space: nowrap;
  overflow: hidden;
}
.djs-pot-val {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #c8c8d0;
  line-height: 11px;
  height: 11px;
  min-height: 11px;
  max-height: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
.djs-pot.is-off-center .djs-pot-val { color: var(--djs-accent2); }
.djs-pot.is-level .djs-pot-val { color: var(--djs-accent); }
.djs-filt-mode {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 64px;
  height: 18px;
  margin: 0;
  padding: 0 12px 0 0.25rem;
  border-radius: 3px;
  border: 1px solid #3a3a44;
  background: #1a1a20 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path fill='%239a9aa8' d='M0 0l4 5 4-5z'/></svg>") no-repeat right 4px center;
  color: var(--djs-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.djs-filt-mode:focus {
  outline: 0;
  border-color: var(--djs-accent2);
  color: var(--djs-accent2);
}
.djs-pot.is-filter .djs-pot-val { color: var(--djs-accent2); }
.djs-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: ns-resize;
  touch-action: none;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}
.djs-pot-canvas {
  display: block;
  width: 28px;
  height: 28px;
  pointer-events: none;
}
.djs-pot.is-level .djs-pot-canvas {
  width: 32px;
  height: 32px;
}
.djs-pot.is-filter .djs-pot-canvas {
  width: 44px;
  height: 44px;
}
.djs-xf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0;
  padding: 12px 0.35rem 6px;
  border-top: 1px solid var(--djs-border);
  background: #16161a;
  position: relative;
  z-index: 2;
}
.djs-xf span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--djs-muted);
}
.djs-xf-track {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0c0c10, #1c1c22);
  border: 1px solid #2e2e36;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.55);
}
.djs-xf input[type="range"] {
  flex: 1;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
}
.djs-xf input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ea3ff 0%, #2a2a32 50%, #ff4b8b 100%);
}
.djs-xf input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 22px;
  margin-top: -8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff 0%, #d8d8de 100%);
  border: 1px solid #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,75,139,0.25);
}
.djs-xf input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ea3ff 0%, #2a2a32 50%, #ff4b8b 100%);
}
.djs-xf input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff 0%, #d8d8de 100%);
  border: 1px solid #111;
}

.djs-deck-tools {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
  flex: 1;
}
.djs-pads {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 22px;
  gap: 3px;
  flex: 0 0 auto;
}
.djs-stems {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  flex: 0 0 auto;
}
.djs-stem {
  height: 26px;
  min-height: 26px;
  min-width: 0;
  padding: 0 0.1rem;
  border: 1px solid #2a2a32;
  border-radius: 3px;
  background: #1a1a20;
  color: #9aa0aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.45;
  cursor: pointer;
}
.djs-stem.is-on { opacity: 1; color: #0c0c10; }
.djs-stem[data-stem="drums"].is-on { background: #e85d4c; border-color: #ff8a7a; }
.djs-stem[data-stem="bass"].is-on { background: #3d7dff; border-color: #7aa4ff; }
.djs-stem[data-stem="inst"].is-on { background: #3ecf8e; border-color: #7ae0b2; }
.djs-stem[data-stem="vocal"].is-on { background: #d45be8; border-color: #e89af4; }
.djs-stem.is-mute {
  opacity: 0.55;
  background: #141418;
  color: #6a7078;
  border-color: #2a2a32;
}
.djs-stem.is-iso {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 10px rgba(255, 255, 255, 0.12);
}
.djs-stem[data-stem="drums"].is-iso { background: #ff6f5c; color: #140806; }
.djs-stem[data-stem="bass"].is-iso { background: #5c94ff; color: #061018; }
.djs-stem[data-stem="inst"].is-iso { background: #55e0a2; color: #06140e; }
.djs-stem[data-stem="vocal"].is-iso { background: #e878f4; color: #140818; }
.djs-stem.is-wait { opacity: 0.7; animation: djsStemPulse 0.9s ease-in-out infinite; }
.djs-stem.is-off { opacity: 0.28; cursor: default; }
.djs-stem:disabled { cursor: default; }
@keyframes djsStemPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
.djs-lib-item.is-stems .t::after {
  content: "STEM";
  margin-left: 0.35rem;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #7ae0b2;
  font-weight: 700;
  vertical-align: 1px;
}
.djs-pad {
  height: 22px;
  min-height: 22px;
  font-size: 9px;
  letter-spacing: 0.04em;
  border-radius: 2px;
  opacity: 0.55;
  color: #fff;
}
.djs-pad.is-set { opacity: 1; }
.djs-loops {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  align-content: start;
}
.djs-loops .djs-mini {
  width: auto;
  min-width: 0;
  height: 24px;
  padding: 0 0.08rem;
  font-size: 9px;
  letter-spacing: 0;
}
.djs-loops .is-on {
  background: var(--djs-accent2);
  border-color: transparent;
  color: #16140a;
  box-shadow: 0 0 0 1px rgba(255,159,90,0.35);
}
.djs-loops [data-act="slip"].is-on {
  background: #3ec8e8;
  color: #071016;
  box-shadow: 0 0 0 1px rgba(62,200,232,0.4);
}
.djs-loops [data-act="roll"].is-on {
  background: #d4c056;
  color: #16140a;
  box-shadow: 0 0 0 1px rgba(212,192,86,0.4);
}

/* Performance pads (unused strip — kept for compat) */
.djs-perf { display: none !important; }

/* Library — full-width crate like Serato */
.djs-lib {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: auto;
  border-top: 1px solid var(--djs-border);
  background: #121216;
  position: relative;
}
.djs-lib-body {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.djs-crates {
  overflow: auto;
  padding: 0.3rem 0;
  border-right: 1px solid var(--djs-border);
  background: #101014;
}
.djs-crate {
  display: block;
  width: 100%;
  padding: 0.38rem 0.8rem;
  border: 0;
  background: transparent;
  color: var(--djs-text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.djs-crate.is-on {
  background: rgba(255, 75, 139, 0.12);
  box-shadow: inset 3px 0 0 var(--djs-accent);
}
.djs-crate-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.djs-crate-row .djs-crate { flex: 1; min-width: 0; }
.djs-crate-meta {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--djs-muted);
  letter-spacing: 0.02em;
  text-transform: none;
}
.djs-crate.is-device .djs-crate-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.djs-crate-x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 0.35rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--djs-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.djs-crate-x:hover { background: #1c1c22; color: var(--djs-text); }
.djs-lib-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.djs-lib-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 48px;
  min-height: 48px;
  padding: 0 0.85rem;
  flex-wrap: nowrap;
  background: linear-gradient(180deg, #1c1c22 0%, #141418 100%);
  border-bottom: 1px solid var(--djs-border);
  box-sizing: border-box;
}
.djs-lib-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.djs-lib-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--djs-text);
}
.djs-lib-count {
  min-width: 1.4rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--djs-muted);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.4;
}
.djs-lib-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  width: min(360px, 36vw);
  flex: 0 1 360px;
  min-width: 160px;
  margin: 0 0 0 auto;
  padding: 0 0.7rem;
  border-radius: 8px;
  border: 1px solid #32323c;
  background: #0e0e12;
  color: var(--djs-muted);
}
.djs-lib-search-wrap:focus-within {
  border-color: rgba(255, 159, 90, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 159, 90, 0.12);
  color: var(--djs-text);
}
.djs-lib-search-ico { flex: 0 0 auto; }
.djs-lib-search {
  flex: 1;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--djs-text);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.djs-lib-search::placeholder { color: #6e6e7a; }
.djs-lib-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.djs-lib-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 32px;
  padding: 0 0.7rem;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  background: #1c1c24;
}
.djs-lib-add svg { flex: 0 0 auto; }
.djs-lib-add:hover {
  border-color: #4a4a56;
  background: #24242e;
}
.djs-lib-status {
  margin: 0;
  padding: 0.32rem 0.85rem;
  font-size: 11px;
  color: var(--djs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #16161c;
  border-bottom: 1px solid var(--djs-border);
}
.djs-lib-status.is-warn {
  color: #f0c4b0;
  background: rgba(255, 75, 139, 0.08);
  border-bottom-color: rgba(255, 75, 139, 0.2);
}
.djs-lib-drop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 12, 0.86);
  border: 1px dashed var(--djs-accent);
  color: var(--djs-text);
  font-size: 13px;
  font-weight: 650;
  pointer-events: none;
  text-align: center;
  padding: 1rem;
}
.djs-lib.is-drop .djs-lib-drop {
  display: flex;
}
.djs-lib-item.is-local .t::before {
  content: "USB";
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.28rem;
  border-radius: 3px;
  background: rgba(255, 159, 90, 0.16);
  color: var(--djs-accent2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}
.djs-lib-cols, .djs-lib-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 52px 48px 56px 86px;
  gap: 0.45rem;
  align-items: center;
  padding: 0.38rem 0.75rem;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}
.djs-lib-cols {
  color: var(--djs-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--djs-border);
}
.djs-lib-list { overflow: auto; flex: 1; }
.djs-lib-empty {
  padding: 1.4rem 0.9rem;
  color: var(--djs-muted);
  font-size: 12px;
}
.djs-lib-item { cursor: grab; border-radius: 0; user-select: none; }
.djs-lib-item:hover { background: #1c1c22; }
.djs-lib-item.is-dragging { opacity: 0.55; cursor: grabbing; }
.djs-lib-item.is-harm { background: rgba(255, 159, 90, 0.08); }
.djs-lib-item.is-loaded {
  background: rgba(255, 75, 139, 0.08);
  box-shadow: inset 3px 0 0 var(--djs-accent);
}
.djs-lib-item .t, .djs-lib-item .a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.djs-lib-item .t { font-weight: 650; }
.djs-lib-item .a { color: var(--djs-muted); }
.djs-lib-load { display: flex; gap: 3px; justify-content: flex-end; }
.djs-lib-load button {
  width: 24px; height: 24px;
  font-size: 10px;
  border: 1px solid var(--djs-border);
  background: var(--djs-surface2);
  color: inherit;
  border-radius: 3px;
  cursor: pointer;
}

.djs-keylock.is-on { background: #3a3a44; border-color: var(--djs-accent2); }

.djs input[type="range"] { accent-color: #c8c8d0 !important; }

@media (max-height: 900px) {
  .djs-deck {
    padding: 0.3rem 0.45rem 0.3rem;
    gap: 0.2rem;
  }
  .djs-deck-body {
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 0.35rem;
  }
  .djs-deck[data-deck="2"] .djs-deck-body {
    grid-template-columns: 168px minmax(0, 1fr);
  }
  .djs-jog-stack { width: 112px; }
  .djs-jog { width: 112px; height: 112px; }
  .djs-jog-hub { inset: 38px; font-size: 0.95rem; }
  .djs-pitch-fader { min-height: 140px; }
  .djs-pitch-slider { min-height: 96px; height: 100px; }
  .djs-play, .djs-transport .djs-btn { height: 28px; }
  .djs-pads { grid-template-rows: 18px; gap: 2px; }
  .djs-pad { height: 18px; min-height: 18px; font-size: 8px; }
  .djs-stem { height: 22px; min-height: 22px; font-size: 8px; }
  .djs-loops .djs-mini { height: 20px; font-size: 8px; padding: 0 0.05rem; }
  .djs-bpm-read { font-size: 1.3rem; }
  .djs-deck-cover { width: 38px; height: 38px; }
  .djs-deck-top { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.4rem; }
  .djs-stage { grid-template-columns: minmax(0, 1fr) 328px minmax(0, 1fr); }
  .djs-pot-canvas { width: 26px; height: 26px; }
  .djs-pot.is-level .djs-pot-canvas { width: 28px; height: 28px; }
  .djs-pot.is-filter .djs-pot-canvas { width: 40px; height: 40px; }
}

@media (max-height: 760px) {
  .djs {
    grid-template-rows: 28px auto minmax(80px, 0.65fr) minmax(180px, 1.55fr);
  }
  .djs-toolbar { padding: 0 0.6rem; }
  .djs-jog-stack { width: 96px; gap: 2px; }
  .djs-jog { width: 96px; height: 96px; border-width: 2px; }
  .djs-jog-disc { inset: 8px; }
  .djs-jog-hub { inset: 32px; font-size: 0.85rem; }
  .djs-bend-btn { width: 24px; height: 18px; font-size: 13px; }
  .djs-pitch-fader { min-height: 128px; }
  .djs-pitch-slider { min-height: 84px; height: 88px; width: 24px; }
  .djs-deck-body {
    grid-template-columns: minmax(0, 1fr) 148px;
  }
  .djs-deck[data-deck="2"] .djs-deck-body {
    grid-template-columns: 148px minmax(0, 1fr);
  }
  .djs-stage { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); }
  .djs-ch-cols { gap: 4px 6px; }
  .djs-fader { height: 88px; }
}

@media (max-width: 1100px) {
  .djs {
    grid-template-rows: 32px auto minmax(100px, 0.75fr) minmax(200px, 1.55fr);
    grid-template-columns: 1fr;
  }
  .djs-stage { grid-template-columns: 1fr; overflow: auto; }
  .djs-deck, .djs-mixer-col { border: 0; border-top: 1px solid var(--djs-border); }
  .djs-deck-body,
  .djs-deck[data-deck="2"] .djs-deck-body { grid-template-columns: minmax(0, 1fr) 168px; }
  .djs-deck[data-deck="2"] .djs-jog-wrap,
  .djs-deck[data-deck="2"] .djs-deck-controls { grid-column: auto; grid-row: auto; }
  .djs-lib { max-height: none; }
  .djs-lib-body { grid-template-columns: 1fr; }
  .djs-crates { display: none; }
  .djs-lib-head {
    flex-wrap: wrap;
    height: auto;
    min-height: 44px;
    padding: 0.45rem 0.7rem;
    gap: 0.5rem;
  }
  .djs-lib-search-wrap {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
}

/* —— Settings (audio + MIDI) —— */
.djs-settings {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.4rem 1rem 1.2rem;
  background: rgba(6, 6, 9, 0.72);
  overflow: auto;
}
.djs-settings[hidden] { display: none !important; }
.djs-settings-card {
  width: min(720px, 100%);
  max-height: calc(100% - 0.4rem);
  overflow: auto;
  background: #16161c;
  border: 1px solid var(--djs-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  padding: 0.85rem 1rem 1.1rem;
}
.djs-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.djs-settings-head h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.djs-settings-head .djs-btn {
  height: 22px;
  padding: 0 0.2rem;
  border: 0;
  background: transparent;
  color: var(--djs-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.djs-settings-head .djs-btn:hover {
  color: var(--djs-text);
  background: transparent;
  border: 0;
}
.djs-settings-tabs {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--djs-border);
}
.djs-settings-tab {
  height: 26px;
  padding: 0 0.55rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--djs-muted);
  border-radius: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.djs-settings-tab:hover {
  color: var(--djs-text);
}
.djs-settings-tab.is-on {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--djs-accent);
  color: var(--djs-text);
}
.djs-settings-lead {
  margin: 0 0 0.85rem;
  color: var(--djs-muted);
  font-size: 12px;
  line-height: 1.45;
}
.djs-settings-field {
  display: grid;
  gap: 0.28rem;
  margin-bottom: 0.7rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--djs-muted);
}
.djs-settings-field small {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #6e6e7a;
}
.djs-settings-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.djs-settings-select,
.djs-settings-field input[type="range"] {
  flex: 1;
  min-width: 0;
}
.djs-settings-select {
  height: 32px;
  border: 1px solid var(--djs-border);
  background: #101014;
  color: var(--djs-text);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 0.5rem;
}
.djs-settings-actions { margin-bottom: 0.75rem; }
.djs-settings-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--djs-muted);
}
.djs-settings-check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.35rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--djs-text);
  cursor: pointer;
}
.djs-settings-check input { margin-top: 0.15rem; }
#djsExtMixHint {
  margin: 0.15rem 0 0.85rem 1.45rem;
  min-height: 0;
}
.djs-midi-status, .djs-midi-last {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--djs-muted);
  margin-bottom: 0.35rem;
}
.djs-midi-status.is-on { color: #5ad08a; }
.djs-midi-hint {
  display: none;
  margin: 0.45rem 0 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed rgba(255, 75, 139, 0.55);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--djs-text);
  background: rgba(255, 75, 139, 0.08);
}
.djs-midi-hint.is-on { display: block; }
.djs-midi-group {
  grid-column: 1 / -1;
  margin: 0.55rem 0 0.1rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--djs-muted);
}
.djs-midi-row.is-hw { opacity: 0.42; }
.djs-midi-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.7rem;
  margin-top: 0.65rem;
}
.djs-midi-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) 52px;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
}
.djs-midi-row.has-inv {
  grid-template-columns: minmax(0, 1fr) minmax(64px, auto) 36px 52px;
}
.djs-midi-row span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--djs-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.djs-midi-bind {
  font-size: 10px;
  font-weight: 600;
  color: var(--djs-muted);
  letter-spacing: 0;
  text-transform: none;
}
.djs-midi-row.is-learn {
  outline: 1px solid var(--djs-accent);
  border-radius: 4px;
  background: rgba(255, 75, 139, 0.08);
}
.djs-midi-row .djs-btn {
  height: 24px;
  padding: 0 0.4rem;
  font-size: 9px;
}
.djs-midi-row .djs-btn.is-on {
  background: var(--djs-accent2);
}
.djs-midi-row[data-ctrl="xfader"] {
  grid-column: 1 / -1;
}
.djs-settings-pots {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin: 0.15rem 0 0.85rem;
}
.djs-settings-pots .djs-pot {
  width: 72px;
  padding: 0.15rem 0.1rem 0.2rem;
}
.djs-settings-pots .djs-pot-canvas {
  width: 36px;
  height: 36px;
}
.djs-keylayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin-top: 0.55rem;
}
.djs-keylayout.is-off { opacity: 0.38; }
.djs-keymap-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--djs-muted);
  margin-bottom: 0.35rem;
}
.djs-keymap-col.is-a .djs-keymap-title { color: var(--djs-accent); }
.djs-keymap-col.is-b .djs-keymap-title { color: var(--djs-accent2); }
.djs-keyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-bottom: 0.28rem;
}
.djs-key {
  min-width: 44px;
  padding: 0.28rem 0.35rem 0.22rem;
  border: 1px solid var(--djs-border);
  border-radius: 5px;
  background: #101014;
  color: var(--djs-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.15;
}
.djs-key small {
  display: block;
  margin-top: 0.12rem;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--djs-muted);
}
.djs-key.is-wide { min-width: 92px; }
.djs-keymap-shared {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--djs-border);
}
@media (max-width: 720px) {
  .djs-midi-map { grid-template-columns: 1fr; }
  .djs-keylayout { grid-template-columns: 1fr; }
}