:root {
  --bg: #05070c;
  --panel: #10151f;
  --panel-2: #161c28;
  --line: #232c40;
  --text: #eaf2ff;
  --muted: #7f90ad;
  --accent: #00e07a;
  --accent-2: #ff9b21;
  --danger: #ff3b5c;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(120% 90% at 50% 0%, #0b1018 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d121b, #080b11);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar h1 {
  font-size: 18px;
  letter-spacing: 0.16em;
  margin: 0;
  font-weight: 700;
}

.topbar h1 span {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}

#power {
  background: #1b2434;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  letter-spacing: 0.1em;
  font-size: 12px;
  cursor: pointer;
}

#power.on {
  background: var(--accent);
  color: #04140c;
  border-color: var(--accent);
}

.stage {
  display: grid;
  gap: 18px;
  padding: 18px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* ------------------------------------------------------------------ decks */

.deck {
  background: linear-gradient(180deg, #121722, #0b0f16);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  outline: none;
}

.deck.focused {
  border-color: #2f7d5b;
  box-shadow: 0 0 0 1px #1c4a37 inset;
}

.deck.drag-over {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px #6b4a1c inset;
}

.deck-display {
  position: relative;
  background: #05070c;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.display-canvas {
  width: 100%;
  display: block;
}

.display-load {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.load-label {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.file-input {
  display: none;
}

.deck-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-lower {
  display: grid;
  grid-template-columns: 172px 1fr 262px;
  gap: 12px;
  align-items: start;
}

/* The display and the browse cluster beside it, the way the hardware lays the
   touch display and its menu buttons out (manual p.15, p.16). */
.display-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.display-row .deck-display {
  flex: 1 1 auto;
  min-width: 0;
}

.display-controls {
  flex: 0 0 162px;
}

.display-controls .btn-grid {
  grid-template-columns: 1fr 1fr;
}

.display-search .search-input {
  width: 100%;
  background: #0b0f16;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.display-search .search-input:disabled {
  color: var(--muted);
  opacity: 0.6;
}

/* CALL/DELETE puts the pads that hold something into call-up mode, where they
   blink until one is pressed (manual p.60). */
.btn.blink {
  animation: btn-blink 900ms steps(2, start) infinite;
}

@keyframes btn-blink {
  50% {
    opacity: 0.3;
  }
}

.control-group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.hot-cue-row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hot-cue-row .group-title {
  width: 100%;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  background: #1a2231;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  user-select: none;
  transition: background 90ms linear, border-color 90ms linear;
}

.btn:active {
  background: #24304a;
}

.btn.on {
  border-color: var(--led, var(--accent));
  background: #16281f;
  box-shadow: 0 0 12px -2px var(--led, var(--accent));
}

.btn-hint {
  font-size: 9px;
  color: var(--muted);
}

.btn-small {
  padding: 7px 9px;
  font-size: 11px;
}

.btn-tiny {
  padding: 5px 7px;
  font-size: 10px;
}

.btn-wide,
.btn.wide {
  width: 100%;
  padding: 14px 12px;
  font-size: 13px;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* ------------------------------------------------------------------ knobs */

.knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}

.knob-dial {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a3448, #131a26);
  border: 1px solid var(--line);
  position: relative;
  cursor: ns-resize;
}

.knob-big .knob-dial {
  width: 62px;
  height: 62px;
}

.knob-pointer {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: 50% 16px;
}

.knob-big .knob-pointer {
  height: 22px;
  transform-origin: 50% 27px;
}

.knob-value {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 10px;
}

/* ----------------------------------------------------------------- faders */

.fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fader-input {
  appearance: slider-vertical;
  width: 22px;
  height: 130px;
  writing-mode: vertical-lr;
  direction: rtl;
}

.fader-vertical .fader-input {
  height: 132px;
}

.fader-value,
.fader-label {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tempo-wrap .fader-input {
  height: 220px;
}

.tempo-fader {
  padding-top: 4px;
}

/* ------------------------------------------------------------------ knobs */

.rotary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}

.rotary-dial {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a3448, #131a26);
  border: 1px solid var(--line);
  position: relative;
  cursor: grab;
  touch-action: none;
}

.rotary-pointer {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: 50% 18px;
}

.rotary-value {
  color: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.knob-row {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}

/* ------------------------------------------------------------------ meter */

.meter {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  gap: 2px;
  width: 8px;
  height: 132px;
  background: #0a0e15;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px;
}

.meter-seg {
  background: #17202f;
  border-radius: 1px;
}

.meter-seg.lit {
  background: var(--accent);
}

.meter-seg.lit.hot {
  background: var(--danger);
}

/* CLIP: lights while the master limiter is holding the output down, and holds for
   two seconds the way the hardware's peak hold does. */
.clip-led {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: #17202f;
  align-self: flex-end;
  margin-bottom: 4px;
}

.clip-led.lit {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 10px -1px var(--danger);
}

/* ---------------------------------------------------------------- jog wheel */

.jog-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jog-canvas {
  width: 100%;
  max-width: 340px;
  touch-action: none;
  cursor: grab;
}

.deck-right .right-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loop-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.loop-group .group-title {
  width: 100%;
}

.loop-group .btn {
  flex: 1 1 30%;
}

/* ------------------------------------------------------------------ mixer */

.mixer {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #121722, #0b0f16);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  /* The strips, the effect section and the master section wrap onto another row
     rather than pushing the page wider than the window. */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.mixer > .channel-strips {
  flex: 0 0 auto;
}

.mixer > .mixer-centre {
  flex: 1 1 380px;
  min-width: 320px;
}

.mixer > .control-group.mixer-master {
  flex: 1 1 430px;
  min-width: 320px;
}

.channel-strips {
  display: flex;
  gap: 10px;
}

.channel-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 130px;
}

.channel-name {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-align: center;
}

.strip-knobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  justify-items: center;
}

.strip-fader {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.mixer-centre {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The crossfader row and the BEAT FX box beside it need this much; below it the
     mixer's own row wraps the master group instead of pushing the page sideways. */
  min-width: 570px;
}

.beat-fx {
  gap: 10px;
  min-width: 0;
}

.fx-fractions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fx-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.fx-readout {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* The X-PAD: a wide touch strip, left is short and right is long. */
.fx-pad {
  position: relative;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(90deg, #131a26, #1b2536 50%, #131a26);
  touch-action: none;
  cursor: ew-resize;
}

.fx-pad-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  pointer-events: none;
}

.color-fx {
  align-items: center;
}

.cross-row {
  display: flex;
  flex-wrap: wrap;
  /* crossfader, the two curve switches, the EQ CURVE switch, the BEAT FX box. A row
     rather than a grid: below its natural width the FX box wraps under the
     crossfader instead of pushing the page sideways. */
  gap: 16px;
  align-items: center;
}

.cross-row .fader {
  flex: 1 1 200px;
}

.cross-row > .beat-fx {
  flex: 0 1 260px;
}

.cross-row .fader-input {
  width: 100%;
  height: 26px;
  writing-mode: horizontal-tb;
  direction: ltr;
  appearance: auto;
}

.cross-row .fader {
  flex: 1;
}

.mixer-master {
  align-items: center;
}

.master-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.note {
  font-size: 10px;
  color: var(--muted);
  max-width: 220px;
  line-height: 1.4;
  margin: 6px 0 0;
}

/* The channel's BEAT FX indicator (manual p25 item 8): lit on the CH SELECT
   channel, blinking while the effect is applied to it. */
.channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.strip-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1d2739;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.strip-led.lit {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.strip-led.blink {
  animation: btn-blink 600ms steps(2, start) infinite;
}

/* The MIC section, laid out as a strip beside channel 1 (manual p34-35). It
   carries words rather than the symbols a channel strip uses (MEGAPHONE,
   TALKOVER, PHANTOM), so it is wider than a channel strip and its button grids
   run two across instead of three. */
.mic-strip {
  width: 200px;
  gap: 8px;
}

.mic-strip .btn-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mic-status {
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}

.mic-status.warn {
  color: var(--accent-2);
}

/* The input selector switch's readout (manual p24, p25): which of the printed
   positions is selected, and whether the rig has anything plugged into it. */
.strip-source {
  font-size: 9px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
}

.strip-source.live {
  color: var(--accent);
}

/* MULTI I/O's insert loop and the LINK CUE button (manual p31, p44): status lines
   under the controls, styled like the MIC section's capture line. */
.loop-status {
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}

.loop-status.warn {
  color: var(--accent-2);
}

.insert-loop,
.link-cue {
  align-items: center;
}

/* ------------------------------------------------- mixer brightness and standby
   The mixer's own brightness (manual p81): BRIGHTNESS DISPLAY 1 to 5 or WHITE and
   BRIGHTNESS INDICATOR 1 to 3. The panel writes the two fractions onto the mixer
   element, so the deck panels — which sit outside it — keep the app's own values. */
.mixer {
  --mixer-display: 1;
  --mixer-indicator: 1;
}

.mixer .fx-screen,
.mixer .utility-readout {
  opacity: var(--mixer-display);
}

.mixer .strip-led.lit,
.mixer .clip-led,
.mixer .utility-led.lit,
.mixer .meter-seg.lit {
  opacity: var(--mixer-indicator);
}

/* BRIGHTNESS DISPLAY's WHITE value (manual p81). The manual prints the value without
   describing it; the model reads it as the display's white theme, which is what the
   hardware's white screen is. */
.mixer.display-white .fx-screen {
  background: #e9eef8;
  border-color: #b7c5db;
  color: #10151f;
}

.mixer.display-white .fx-screen .fx-screen-item.quantize-unavailable {
  color: #6b7a92;
}

/* AUTO STANDBY (manual p78, p84): the dim step and the Off mode the panel sleeps
   into. The controls stay reachable on purpose — any operation restores the panel and
   restarts the idle timer — so the sleep is a heavy dim rather than a wall. */
.mixer.standby-dim {
  opacity: 0.66;
}

.mixer.standby-off {
  opacity: 0.32;
}

/* ------------------------------------------------------------- utility screen
   The UTILITY screen (manual p74-88): the menu list, the items of the open menu in the
   manual's order, the controls the manual gives the screen (the TIME knob and the BEAT
   buttons for the selection, TAP to confirm, AUTO/TAP to cancel) and the readouts. */
.utility {
  flex: 1 1 100%;
  min-width: 0;
  gap: 10px;
}

/* Closed until QUANTIZE/UTILITY (WAKE UP) is held (manual p75). */
.utility.closed {
  display: none;
}

.utility-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
  max-height: 210px;
  overflow-y: auto;
}

.utility-readout {
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* The screen's lock indicator (manual p74): lit while MIXER SETTINGS cannot be
   changed (p78). */
.utility-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1d2739;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.utility-led.lit {
  background: var(--danger);
  border-color: var(--danger);
}

.standby-note-group {
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 4px;
}

.standby-note-group .loop-status {
  max-width: none;
}

/* The BEAT FX screen (manual p49): QUANTIZE, AUTO/TAP with the BPM, the effect
   name, the beat with its time, and the X-PAD position. */
.fx-screen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a0e15;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.fx-screen-item.quantize-locked {
  color: var(--danger);
}

.fx-screen-item.quantize-unavailable {
  color: #4a566b;
}

.fx-screen-item.blink {
  animation: btn-blink 700ms steps(2, start) infinite;
}

/* ------------------------------------------------------------------- help */

.help {
  border-top: 1px solid var(--line);
  padding: 14px 24px 26px;
  color: var(--muted);
}

.help-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}

.help-note {
  font-size: 11px;
  margin: 0 0 10px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px 18px;
  font-size: 12px;
}

.help-key {
  background: #1a2231;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text);
  font-size: 11px;
  margin-right: 6px;
}

@media (max-width: 1200px) {
  .stage {
    grid-template-columns: 1fr;
  }

  .display-row {
    flex-direction: column;
  }

  .display-controls {
    flex: 1 1 auto;
  }

  .display-controls .btn-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .deck-lower {
    grid-template-columns: 1fr;
  }

  .mixer {
    grid-template-columns: 1fr;
  }

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