.mixer-core {
  background: rgba(36, 23, 15, 0.45); /* warm chocolate */
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: 10px;
  border: 1px solid rgba(80, 60, 40, 0.35); /* bronze */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}

/* ⭐ PERFECTLY MATCHED FADER ROW — SAME AS .deck ⭐ */
.mixer-row {
  display: flex;
  flex-direction: column;
  gap: 6px;

  background: rgba(36, 23, 15, 0.45);
  border: 1px solid rgba(80, 60, 40, 0.35);
  border-radius: 10px;
  padding: 10px;
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}

.master-meter-wrap {
  height: 14px;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
}

.master-meter {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #4ec9ff, #4eff9a);
  transition: width 0.1s linear;
}
/* Highlight selected track in the browser list */
.track-row.selected {
  background: #ff8c00 !important;   /* bright orange */
  color: #000 !important;            /* readable text */
  border-radius: 6px;
  padding: 4px;
}
.track-row:hover {
  background: rgba(255, 140, 0, 0.4);
  cursor: pointer;
  border-radius: 6px;
}
/* -------------------------------------------------------
   UNIFIED DECK PRESET — BROWN COSMIC EDITION
   Applies consistent brown backgrounds to ALL deck sections
------------------------------------------------------- */

/* Outer deck container */
.deck {
  background: rgba(36, 23, 15, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: 12px;
  border: 1px solid rgba(80, 60, 40, 0.35);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}

/* ⭐ ALL INNER DECK PANELS ⭐ */
.deck-top,
.deck-middle,
.deck-bottom,
.deck-controls,
.deck-faders,
.deck-eq,
.deck-panel,
.deck-section,
.player-panel,
.fx-panel,
.transport-panel,
.pitch-panel,
.filter-panel,
.eq-panel,
.channel-panel {
  background: rgba(36, 23, 15, 0.45); /* unified brown */
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: 10px;
  border: 1px solid rgba(80, 60, 40, 0.35); /* bronze */
  padding: 10px;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}

/* ⭐ FADER GROUPS (Pitch, Filter, EQ, Channel) ⭐ */
.deck-faders,
.pitch-panel,
.filter-panel,
.eq-panel,
.channel-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ⭐ Labels */
.deck label {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* ⭐ Slider Track */
input[type="range"] {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(36,23,15,0.6),
    rgba(50,30,20,0.6)
  );
  height: 5px;
  border-radius: 4px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}

/* ⭐ Slider Thumb */
input[type="range"]::-webkit-slider-thumb {
  background: var(--accent);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(78, 201, 255, 0.7),
    0 0 20px rgba(78, 201, 255, 0.4);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(78, 201, 255, 0.7);
}

/* ⭐ Transport Buttons */
.deck button {
  background: rgba(36, 23, 15, 0.55);
  color: var(--text);
  border: 1px solid rgba(80, 60, 40, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 10px rgba(0,0,0,0.5),
    inset 0 0 8px rgba(80, 60, 40, 0.25);
  transition: 0.2s ease;
}

.deck button:hover {
  background: rgba(50, 30, 20, 0.75);
  box-shadow:
    0 0 14px rgba(80, 60, 40, 0.45),
    inset 0 0 10px rgba(80, 60, 40, 0.35);
}

/* ⭐ Numbered Buttons */
.deck .number-btn {
  background: rgba(36, 23, 15, 0.55);
  border: 1px solid rgba(80, 60, 40, 0.35);
  color: var(--text);
  border-radius: 6px;
  padding: 6px;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.5),
    0 0 10px rgba(0,0,0,0.4);
  transition: 0.2s ease;
}

.deck .number-btn:hover {
  background: rgba(50, 30, 20, 0.75);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.6),
    0 0 14px rgba(80, 60, 40, 0.45);
}
/* ⭐ FIXED — Brown background WITHOUT layout shift ⭐ */
.sliders,
.transport,
.dt-jog,
.deck-status {
  background: rgba(36, 23, 15, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: 10px;

  /* REMOVE layout-shifting properties */
  padding: 0;               /* was 10px */
  border: none;             /* was bronze border */
  box-shadow: none;         /* was inset shadow */
}