/* -------------------------------------------------------
   AURORA-X DECK LAYOUT — BROWN COSMIC EDITION
   Deck container, jog wheel, faders, and controls
------------------------------------------------------- */

/* MAIN DECK CONTAINER — BROWN */
.deck {
  min-height: 480px;
  max-height: 520px;

  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);
}

/* -------------------------------------------------------
   JOG WHEEL — BROWN COSMIC
------------------------------------------------------- */

.jog-wheel {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

.jog-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--accent);
  opacity: 0.5;
  box-shadow: 0 0 20px rgba(78, 201, 255, 0.6);
}

.jog-center {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #2c1e14, #1a120c);
  box-shadow:
    0 0 18px rgba(80, 60, 40, 0.4),
    0 0 40px rgba(80, 60, 40, 0.25);
}

/* -------------------------------------------------------
   FADER LABELS
------------------------------------------------------- */

.channel-strip label {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* -------------------------------------------------------
   BASE SLIDER TRACK (applies to all sliders)
------------------------------------------------------- */

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);
}

/* BASE 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);
}

/* -------------------------------------------------------
   FULL UNIFIED FADER PRESET — WORKS IN EDGE
   Pitch, Filter, EQ High/Mid/Low, Channel
------------------------------------------------------- */

/* Unified track for ALL faders */
.pitch,
.filter,
.eq-high,
.eq-mid,
.eq-low,
.ch-fader {
  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);
}

/* Edge-specific track */
.pitch::-webkit-slider-runnable-track,
.filter::-webkit-slider-runnable-track,
.eq-high::-webkit-slider-runnable-track,
.eq-mid::-webkit-slider-runnable-track,
.eq-low::-webkit-slider-runnable-track,
.ch-fader::-webkit-slider-runnable-track {
  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);
}

/* Unified thumb */
.pitch::-webkit-slider-thumb,
.filter::-webkit-slider-thumb,
.eq-high::-webkit-slider-thumb,
.eq-mid::-webkit-slider-thumb,
.eq-low::-webkit-slider-thumb,
.ch-fader::-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;
}

/* Firefox thumb */
.pitch::-moz-range-thumb,
.filter::-moz-range-thumb,
.eq-high::-moz-range-thumb,
.eq-mid::-moz-range-thumb,
.eq-low::-moz-range-thumb,
.ch-fader::-moz-range-thumb {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(78, 201, 255, 0.7);
}

/* -------------------------------------------------------
   TRANSPORT BUTTONS — BROWN
------------------------------------------------------- */

.transport 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;
}

.transport 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);
}