:root{
  --bg:#0b0b0c; --panel:#121214; --panel2:#161619; --line:#26262b;
  --ink:#e9e9ec; --dim:#7a7a85; --accent:#ff2d2d; --ok:#38e08a; --amber:#ffc400;
  --font:'Helvetica Neue',Inter,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  overflow:hidden;user-select:none;-webkit-user-select:none;
  height:100%;display:flex;flex-direction:column;
}
button{font-family:var(--font);color:inherit;background:none;border:none;cursor:pointer}
.hidden{display:none!important}

/* ---------------- topbar ---------------- */
#topbar{
  flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;border-bottom:1px solid var(--line);background:#0e0e10;
}
.brand{font-weight:800;letter-spacing:.14em;font-size:15px;text-transform:uppercase}
.brand span{color:var(--accent)}
.status{display:flex;gap:8px;align-items:center}
.chip{
  font:600 10px/1 var(--mono);letter-spacing:.08em;color:var(--dim);
  border:1px solid var(--line);padding:6px 8px;border-radius:3px;
}
.chip.ok{color:var(--ok);border-color:#1e4632}
.pill{
  font:700 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);padding:7px 11px;border-radius:3px;background:#1a1a1e;
}
.pill:hover{border-color:#3a3a44}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.primary{background:var(--ok);color:#04140c;border-color:var(--ok)}
body.audio-off .pill.primary{animation:pulse 1.4s ease-in-out infinite}

/* ---------------- layout ---------------- */
/* Vista de master: los dos decks alineados sobre un mismo cabezal. */
#dualwave{
  flex:0 0 auto;height:clamp(88px,13vh,150px);position:relative;
  margin:6px 6px 0;border:1px solid var(--line);border-radius:4px;
  background:#08080a;overflow:hidden;
}
#dualwave canvas{width:100%;height:100%;display:block;cursor:ew-resize}
.dw-zoom{
  position:absolute;top:4px;right:6px;pointer-events:none;
  font:700 8px/1 var(--mono);letter-spacing:.1em;color:#55555e;
}
#console{
  flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 340px 1fr;
  gap:6px;padding:6px;
}
.col{display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;min-width:0;min-height:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px}

/* ---------------- FX ---------------- */
.fx-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fx-unit{padding:6px 8px 8px;display:grid;grid-template-rows:auto auto 1fr;gap:5px}
.fx-head{font:800 10px/1 var(--font);letter-spacing:.16em;color:var(--dim)}
.fx-select{display:grid;grid-template-columns:18px 1fr 18px;align-items:center;gap:4px}
.fx-select .arrow{color:var(--dim);font-size:10px}
.fx-select .arrow:hover{color:var(--ink)}
.fx-name{
  width:100%;border:1px solid var(--line);border-radius:2px;text-align:center;
  font:700 10px/22px var(--mono);letter-spacing:.06em;background:#0a0a0b;color:var(--ink);
  overflow:hidden;white-space:nowrap;cursor:pointer;
}
.fx-name:hover{border-color:#4a4a56;background:#101013}

/* Menú de efectos: fijo respecto a la ventana para que no lo recorte el panel. */
.fx-menu{
  position:fixed;z-index:50;padding:4px;border-radius:5px;
  background:#141418;border:1px solid #33333c;
  box-shadow:0 10px 30px rgba(0,0,0,.7);
  max-height:60vh;overflow-y:auto;display:grid;gap:1px;
}
.fx-menu-item{
  text-align:left;padding:6px 10px;border-radius:3px;white-space:nowrap;
  font:700 10px/1 var(--mono);letter-spacing:.06em;color:#b9b9c2;
}
.fx-menu-item:hover{background:#23232a;color:#fff}
.fx-menu-item.current{color:var(--accent)}
.fx-menu-item.current::after{content:' •'}
.fx-body{display:grid;grid-template-columns:1fr 46px;gap:6px;align-items:center}
.fx-knobs{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.fx-switch{display:grid;place-items:center;height:84px}

/* Interruptor de palanca I/O: la mitad activa se hunde, como uno de verdad. */
.rocker{
  width:34px;height:54px;padding:3px;border-radius:5px;cursor:pointer;
  background:linear-gradient(#25252b,#111114);border:1px solid #08080a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 7px rgba(0,0,0,.65);
  transition:box-shadow .15s;
}
.rk-face{
  display:grid;grid-template-rows:1fr 1fr;height:100%;border-radius:3px;overflow:hidden;
  background:linear-gradient(#601616,#3a0e0e);transition:background .15s;
}
.rk-i,.rk-o{
  display:grid;place-items:center;font:800 11px/1 var(--font);
  color:rgba(255,255,255,.45);transition:all .12s;
}
.rocker .rk-o{background:rgba(0,0,0,.5);box-shadow:inset 0 3px 7px rgba(0,0,0,.75)}
.rocker.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 15px rgba(255,45,45,.45)}
.rocker.on .rk-face{background:linear-gradient(#ff4040,#c00f0f)}
.rocker.on .rk-o{background:none;box-shadow:none;color:rgba(255,255,255,.6)}
.rocker.on .rk-i{background:rgba(0,0,0,.38);box-shadow:inset 0 3px 7px rgba(0,0,0,.7);color:#fff}
.rocker.learning{outline-offset:2px}

/* ---------------- knobs ---------------- */
.knob{display:grid;justify-items:center;gap:0;cursor:ns-resize;padding:1px 0}
.knob-dial{width:100%;max-width:42px;aspect-ratio:1}
.knob svg{width:100%;height:100%;overflow:visible}
.k-track{fill:#0a0a0b;stroke:#26262b;stroke-width:6}
.k-arc{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.k-ptr{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.knob.active .k-arc{stroke:#fff}
.knob-label{font:700 8px/1 var(--font);letter-spacing:.1em;color:var(--dim)}
.knob-val{font:600 8px/1 var(--mono);color:var(--dim);min-height:8px}

/* ---------------- faders ---------------- */
.fader{position:relative}
.fader.v{width:34px;height:100%;min-height:60px}
.fader.h{width:100%;height:clamp(24px,3.6vh,38px)}
.f-track{position:relative;width:100%;height:100%;cursor:grab}
.fader.v .f-track{background:linear-gradient(90deg,transparent 45%,#2a2a30 45%,#2a2a30 55%,transparent 55%)}
.fader.h .f-track{background:linear-gradient(180deg,transparent 45%,#2a2a30 45%,#2a2a30 55%,transparent 55%)}
.f-cap{position:absolute;background:#d8d8de;border-radius:2px;box-shadow:0 1px 4px #000}
.fader.v .f-cap{left:2px;right:2px;height:16px;transform:translateY(-50%);border-top:3px solid #6a6a72;border-bottom:3px solid #6a6a72}
.fader.h .f-cap{top:2px;bottom:2px;width:16px;transform:translateX(-50%);border-left:3px solid #6a6a72;border-right:3px solid #6a6a72}
.fader-slot{display:flex;align-items:stretch;justify-content:center}
.fader-slot.tall{height:auto;min-height:90px}
.fader-slot.horizontal{width:100%}

/* ---------------- deck ---------------- */
.deck-body{
  display:grid;grid-template-columns:150px minmax(0,1fr) 96px;
  gap:clamp(8px,1.4vh,14px);padding:clamp(8px,1.4vh,14px);
  min-height:0;overflow:hidden;
}
.deck-left{display:grid;align-content:start;gap:clamp(8px,1.6vh,16px);min-height:0}

/* Grupos: una etiqueta con línea fina en vez de controles amontonados. */
.grp{display:grid;gap:clamp(4px,0.8vh,7px)}
.grp-t{
  font:800 8px/1 var(--font);letter-spacing:.18em;color:#5c5c67;
  padding-bottom:5px;border-bottom:1px solid var(--line);
}
.grp-row{display:grid;grid-template-columns:1fr auto auto;gap:4px;align-items:center}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.row4 .rnd.xs{width:100%;height:22px;border-radius:3px;font-size:8px}
.transport{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.transport .rnd.big{width:100%;aspect-ratio:1;max-height:58px;height:auto}
.rnd.big.play.on{background:var(--accent);border-color:var(--accent)}
.deck-right{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;justify-items:center;gap:clamp(5px,1vh,9px);min-height:0}
.deck-center{display:grid;grid-template-rows:auto minmax(0,1fr) clamp(34px,5.5vh,54px) auto;gap:6px;min-height:0}
.deck-title{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;padding-bottom:2px}
.deck-title h1{font-size:clamp(20px,2.9vh,30px);letter-spacing:-.02em;font-weight:900;line-height:1}
.deck-title .sub{font:700 8px/1 var(--font);letter-spacing:.22em;color:var(--dim)}
.jog-wrap{position:relative;display:grid;place-items:center;min-height:0}
/* width:100% + aspect-ratio da el cuadrado; con height:100% el navegador
   ignora el aspect-ratio y el plato sale ovalado. */
canvas.jog{width:100%;height:auto;aspect-ratio:1;max-height:100%;display:block;margin:0 auto}
.track-info{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;width:46%;
}
.ti-title{font:800 12px/1.25 var(--font);letter-spacing:.02em;word-break:break-word}
.ti-meta{font:600 9px/1.4 var(--mono);color:var(--dim);margin-top:4px}
.ti-time{display:flex;justify-content:space-between;margin-top:8px;font:700 10px/1 var(--mono)}
.ti-time .remain{color:var(--dim)}
canvas.wave{width:100%;height:100%;border:1px solid var(--line);border-radius:3px;background:#000}
.label{font:800 8px/1 var(--font);letter-spacing:.14em;color:var(--dim);margin-top:4px}
.tiny{font:700 7px/1 var(--font);letter-spacing:.1em;color:#55555e}
.vlabel{font:800 8px/1 var(--font);letter-spacing:.14em;color:var(--dim)}
.row{display:flex;gap:5px;align-items:center}
.tinyrow{gap:4px}
.dash{flex:1;height:1px;background:var(--line)}
.rnd{
  border:1px solid #33333c;border-radius:50%;background:#1a1a1e;
  font:800 9px/1 var(--font);letter-spacing:.04em;display:grid;place-items:center;
}
.rnd.xs{width:20px;height:20px;font-size:8px}
.rnd.sm{width:28px;height:28px}
.rnd.big{width:56px;height:56px;background:#0f0f12;border-width:2px;font-size:12px}
.rnd:hover{border-color:#4a4a56}
.rnd.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 14px rgba(255,45,45,.5)}
.rnd.dark{background:#0f0f12}
.flat{
  border:1px solid #33333c;border-radius:2px;background:#1a1a1e;padding:5px 8px;
  font:800 9px/1 var(--font);letter-spacing:.1em;
}
.flat.wide{width:100%}
.flat.xs{padding:4px 5px;font-size:8px}
.flat.on,.flat.active{background:var(--ink);color:#111;border-color:var(--ink)}
.lcd{
  font:700 15px/1 var(--mono);letter-spacing:.04em;color:var(--amber);
  background:#0a0a0b;border:1px solid var(--line);border-radius:2px;padding:4px 6px;
}
.deck-col.dropping .deck-body{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.deck-col.cued .deck-title h1{color:var(--amber)}

/* ---------------- pads y loops ---------------- */
.loop-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.loop-presets .rnd.xs{width:100%;height:22px;border-radius:3px}
.pads{display:grid;gap:5px}
.pad-modes{display:flex;gap:4px;align-items:center}
.pad-hint{font:700 7px/1 var(--font);letter-spacing:.06em;color:#43434c;margin-left:auto}
.pad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pad{
  border:1px solid #33333c;border-radius:3px;background:#16161a;
  display:grid;place-content:center;height:clamp(22px,3.4vh,30px);
}
.pad-num{font:800 11px/1.1 var(--font)}
.pad-sub{font:600 7px/1 var(--mono);color:#5a5a64}
.pad.set{background:#241d09;border-color:var(--amber)}
.pad.set .pad-num{color:var(--amber)}
.pad.set .pad-sub{color:#a8892e}
.pad.on{background:var(--amber);border-color:var(--amber)}
.pad.on .pad-num,.pad.on .pad-sub{color:#141008}

/* ---------------- mixer ---------------- */
.mixer-col{display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;min-height:0}
.master-row{padding:clamp(4px,0.9vh,8px);display:grid;gap:clamp(2px,0.6vh,6px)}
.knob-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.master-row .knob-dial{max-width:clamp(26px,5vh,42px)}
.mixer-body{padding:8px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(4px,0.9vh,8px);min-height:0;overflow:hidden}
.ch-heads{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ch-grid{display:grid;grid-template-columns:1fr 54px 1fr;gap:6px;min-height:0;overflow:hidden}
/* La tira de canal tiene 5 perillas fijas: se compactan (dial más chico, sin
   línea de valor salvo el FILTR) para que quepan sin encabalgar etiquetas. */
.ch-strip{display:grid;gap:0;min-height:0;align-content:start;overflow:hidden}
.ch-strip .knob-dial{max-width:clamp(21px,4vh,38px)}
.ch-strip .knob-val{display:none}
.ch-strip .knob:last-child .knob-val{display:block}
.ch-meters{display:grid;grid-template-rows:auto 1fr auto;gap:4px;justify-items:center}
.mhead{display:flex;gap:10px;font:700 7px/1 var(--mono);color:var(--dim)}
.mpair{display:flex;gap:6px;height:100%;min-height:0}
.mlabel{font:700 7px/1 var(--mono);color:var(--dim)}
.meter{
  --level:0;width:9px;border:1px solid var(--line);background:#0a0a0b;border-radius:1px;
  position:relative;overflow:hidden;min-height:40px;
}
.meter.tall{min-height:0;height:100%}
.meter::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--level)*100%);
  background:linear-gradient(0deg,var(--ok) 0%,var(--ok) 62%,var(--amber) 82%,var(--accent) 100%);
}
.meter.clip{border-color:var(--accent)}
.master-meters{display:grid;grid-template-columns:auto 1fr 1fr;gap:5px;align-items:end;height:clamp(22px,4vh,44px)}
.master-meters .meter{width:100%;height:100%}
/* los del master son horizontales: llenan a lo ancho, no a lo alto */
.master-meters .meter::after{
  height:100%;width:calc(var(--level)*100%);
  background:linear-gradient(90deg,var(--ok) 0%,var(--ok) 62%,var(--amber) 82%,var(--accent) 100%);
}
/* HEADPHONES: etiqueta + perillas a la izquierda, faders de canal a la derecha.
   Sin áreas explícitas los 3 hijos se acomodan en 2 columnas y los faders caen
   a una segunda fila, que es lo que empujaba el crossfader fuera de pantalla. */
.phones{
  display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto;
  gap:6px 10px;align-items:end;min-height:0;
}
.phones .label{grid-column:1;grid-row:1;margin:0;align-self:end}
.phones-knobs{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.phones-knobs .knob-dial{max-width:clamp(22px,4vh,34px)}
.phones .ch-faders{grid-column:2;grid-row:1 / 3}
.ch-faders{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:clamp(54px,9.5vh,150px)}
.cue-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.xf-wrap{display:grid;gap:clamp(2px,0.5vh,5px)}
.xf-curve{display:flex;gap:5px;justify-content:center}

/* Ventanas bajas: la vista de master se encoge y el FILTR pierde su etiqueta
   de valor antes que recortarse. Por debajo de esto no cabe la mezcladora. */
@media (max-height:680px){
  #dualwave{height:58px}
  .ch-strip .knob-val{display:none!important}
}

/* ---------------- MIDI learn ---------------- */
body.learn-mode .knob,body.learn-mode .fader,body.learn-mode .rnd,body.learn-mode .flat,body.learn-mode .fx-on{
  outline:1px dashed #3d3d48;
}
.learning{outline:2px solid var(--amber)!important;animation:pulse .8s infinite}
@keyframes pulse{50%{opacity:.45}}

/* ---------------- misc ---------------- */
#drop-hint{display:none}
dialog#help{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:22px;max-width:520px;
}
dialog#help::backdrop{background:rgba(0,0,0,.7)}
dialog#help h2{font-size:15px;letter-spacing:.06em;margin-bottom:12px}
dialog#help table{font:600 11px/1.9 var(--mono);width:100%}
dialog#help td:first-child{color:var(--amber);width:170px}
dialog#help p{font-size:11px;color:var(--dim);margin-top:12px;line-height:1.6}
dialog#help button{margin-top:16px}