:root{
  --bg:#06080c;
  --panel:#0e1218;
  --panel2:#141a23;
  --panel3:#0b0f14;
  --line:#26303d;
  --text:#f6f8fb;
  --muted:#8c98a8;
  --accent:#9b5cff;
  --accent2:#ff4fb8;
  --green:#47e6a1;
  --amber:#ffca62;
  --red:#ff5f72;
  --cyan:#5bd5ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(circle at 50% -10%,rgba(155,92,255,.14),transparent 30%),
  linear-gradient(180deg,#07090d,#05070a 65%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
.topbar{
  height:66px;padding:0 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(7,9,13,.94);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50
}
.brand{display:flex;align-items:center;gap:11px;font-weight:900}
.logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 30px rgba(155,92,255,.25)}
.logo:before{content:"♪";font-size:20px}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:2px}
.top-actions{display:flex;gap:8px}
.pill{border:1px solid var(--line);background:#111722;color:var(--text);padding:9px 12px;border-radius:999px;font-weight:800;font-size:12px}
.pill.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none}
.workspace{
  width:100%;padding:12px;display:grid;
  grid-template-columns:minmax(245px,18vw) minmax(0,1fr) minmax(245px,18vw);
  gap:12px;min-height:calc(100vh - 66px)
}
.library,.main{border:1px solid var(--line);background:rgba(14,18,24,.94);border-radius:18px;overflow:hidden}
.library{display:flex;flex-direction:column}
.libhead{padding:13px;border-bottom:1px solid var(--line)}
.libtitle{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:900;margin-bottom:9px}
.target{font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.search{width:100%;background:#0a0e14;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 10px;outline:none}
.tabs{display:flex;gap:6px;padding:9px 11px;border-bottom:1px solid var(--line)}
.tab{flex:1;border:0;background:#171d27;color:var(--muted);padding:7px;border-radius:8px;font-size:11px;font-weight:900}
.tab.active{background:#263140;color:#fff}
.libbody{padding:9px;overflow:auto;max-height:calc(100vh - 195px)}
.artist{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;cursor:pointer}
.artist:hover,.artist.active{background:#171e28}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#263140,#11161e);border:1px solid #364356;font-weight:900}
.artist-name{font-size:12px;font-weight:900}
.artist-meta{font-size:10px;color:var(--muted);margin-top:2px}
.rel{margin:10px 4px 5px;color:#748196;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.track{display:grid;grid-template-columns:40px minmax(0,1fr) 30px;gap:8px;align-items:center;padding:7px;border-radius:10px;cursor:grab}
.track:hover{background:#151c26}
.cover{width:40px;height:40px;border-radius:8px;border:1px solid #334050;background:linear-gradient(135deg,#242d39,#10141a);display:grid;place-items:center;font-size:11px;font-weight:900}
.tname{font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.add{width:28px;height:28px;border:1px solid var(--line);background:#121924;color:#fff;border-radius:8px;font-weight:900}
.main{padding:12px;display:flex;flex-direction:column;gap:12px}
.titlebar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.titlebar h1{margin:0;font-size:18px}
.titlebar span{color:var(--muted);font-size:11px}
.deckgrid{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);gap:12px}
.deck{
  min-width:0;border:1px solid var(--line);border-radius:17px;padding:12px;
  background:linear-gradient(180deg,#121821,#0a0e14)
}
.deck.dragover{outline:2px solid var(--accent);outline-offset:-3px}
.deckhead{display:flex;justify-content:space-between;gap:10px;align-items:center}
.deckname{font-size:10px;color:var(--muted);font-weight:900;letter-spacing:.12em}
.loaded{font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.clock{font-variant-numeric:tabular-nums;font-size:11px;color:#c4cfdd}
.wave{height:74px;margin:10px 0 11px;border-radius:11px;border:1px solid #222b36;position:relative;overflow:hidden;background:
  linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.55) 50%,transparent 50.2%),
  repeating-linear-gradient(90deg,#293445 0 2px,transparent 2px 5px)}
.wave:after{content:"";position:absolute;inset:14px 0;background:repeating-linear-gradient(90deg,rgba(91,213,255,.55) 0 2px,transparent 2px 6px);
clip-path:polygon(0 55%,3% 20%,6% 70%,9% 35%,12% 80%,15% 30%,18% 60%,21% 25%,24% 65%,27% 35%,30% 75%,33% 20%,36% 62%,39% 30%,42% 80%,45% 36%,48% 60%,51% 20%,54% 75%,57% 32%,60% 68%,63% 24%,66% 70%,69% 38%,72% 78%,75% 30%,78% 58%,81% 25%,84% 74%,87% 34%,90% 64%,93% 28%,96% 72%,100% 50%,100% 100%,0 100%)}
.transport{display:grid;grid-template-columns:auto auto auto 1fr;gap:7px;align-items:center}
.round{height:38px;min-width:38px;border-radius:10px;border:1px solid var(--line);background:#151d28;color:#fff;font-size:10px;font-weight:900}
.play{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none}
.bpmwrap{border:1px solid var(--line);background:#0b1016;border-radius:11px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.bpm{font-size:17px;font-weight:900}
.sync{border:0;border-radius:8px;padding:7px 8px;background:#222c3a;color:#fff;font-size:10px;font-weight:900}
.sync.active{background:#593d89}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.control{border:1px solid #202833;background:#0b1016;border-radius:11px;padding:8px}
.control label{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;font-weight:900;margin-bottom:5px}
input[type=range]{width:100%;accent-color:var(--accent)}
.eqrow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
.knob{border:1px solid #202833;background:#0b1016;border-radius:11px;padding:8px 4px;text-align:center}
.knobcircle{width:38px;height:38px;border-radius:50%;margin:0 auto 4px;background:radial-gradient(circle,#202938 0 38%,#080b10 40%);border:2px solid #2f3a4b;position:relative}
.knobcircle:before{content:"";position:absolute;left:50%;top:3px;width:2px;height:13px;background:#fff;transform:translateX(-50%);border-radius:2px}
.knob span{font-size:8px;color:var(--muted);font-weight:900}
.section{margin-top:9px;border-top:1px solid var(--line);padding-top:9px}
.sectitle{font-size:9px;color:var(--muted);font-weight:900;letter-spacing:.1em;margin-bottom:6px}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pad{border:1px solid #2a3441;background:#161e29;color:#dce5ef;border-radius:9px;padding:8px 3px;font-size:9px;font-weight:900}
.pad.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.beats{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.smallbtn{border:1px solid #293442;background:#121923;color:#e7edf6;border-radius:8px;padding:7px 3px;font-size:9px;font-weight:900}
.smallbtn.on{background:#253348;border-color:#4d6078}
.fxbar{display:grid;grid-template-columns:1.15fr .8fr .8fr .8fr;gap:6px}
select{width:100%;background:#111821;color:#fff;border:1px solid #2b3542;border-radius:8px;padding:7px;font-size:10px;font-weight:800}
.fxbtn{border:1px solid #2c3745;background:#151d28;color:#fff;border-radius:8px;font-size:9px;font-weight:900}
.fxbtn.on{background:#4d2d78}
.mixer{border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,#151c26,#0a0e14);padding:10px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mixertitle{font-size:10px;letter-spacing:.11em;color:var(--muted);font-weight:900}
.meters{width:100%;height:108px;display:flex;justify-content:center;gap:7px;align-items:flex-end}
.meter{width:13px;height:100%;border-radius:6px;background:linear-gradient(to top,var(--green) 0 62%,var(--amber) 62% 82%,var(--red) 82%);opacity:.72;transform-origin:bottom}
.mixblock{width:100%;border-top:1px solid var(--line);padding-top:8px}
.mixblock label{display:block;text-align:center;color:var(--muted);font-size:9px;font-weight:900;margin-bottom:5px}
.cross{margin-top:auto;width:100%}
.info{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card{border:1px solid var(--line);background:#0c1118;border-radius:12px;padding:9px}
.card b{display:block;font-size:10px;margin-bottom:3px}.card span{font-size:9px;color:var(--muted)}
.banner{border:1px dashed #3b4656;border-radius:12px;padding:9px 11px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:#aab5c3;font-size:10px}
.cta{border:0;border-radius:9px;padding:8px 10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:900}
@media(max-width:1250px){
  .workspace{grid-template-columns:220px minmax(0,1fr)}
  .library.right{display:none}
  .deckgrid{grid-template-columns:1fr 160px 1fr}
  .info{grid-template-columns:1fr 1fr}
}
@media(max-width:930px){
  .workspace{grid-template-columns:1fr;padding:8px}
  .library{display:none}
  .deckgrid{grid-template-columns:1fr}
  .mixer{order:3}
  .info{grid-template-columns:1fr}
}

/* ===== TABBED PERFORMANCE WORKSPACE ===== */
.advanced-tabs{
  border:1px solid var(--line);
  border-radius:16px;
  background:#0b1016;
  overflow:hidden;
}
.tabbar{
  display:flex;
  gap:4px;
  padding:7px;
  border-bottom:1px solid var(--line);
  background:#0d131b;
  overflow:auto;
}
.adv-tab{
  flex:1 0 auto;
  min-width:88px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:9px 12px;
  border-radius:9px;
  font-size:9px;
  font-weight:900;
}
.adv-tab:hover{background:#151d28;color:#fff}
.adv-tab.active{
  background:linear-gradient(135deg,rgba(155,92,255,.32),rgba(255,79,184,.22));
  border-color:#4b3b64;
  color:#fff;
}
.adv-panel{display:none;padding:10px}
.adv-panel.active{display:block}
.dual-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool-deck{
  border:1px solid #202833;
  background:#0d131b;
  border-radius:12px;
  padding:10px;
}
.tool-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:9px;
}
.tool-head span{font-size:8px;color:var(--muted);font-weight:900;letter-spacing:.11em}
.tool-head strong{font-size:10px}
.tool-group + .tool-group{margin-top:9px}
.tool-label{font-size:8px;color:var(--muted);font-weight:900;letter-spacing:.08em;margin-bottom:5px}
.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.fx-rack{display:grid;grid-template-columns:1.3fr repeat(5,.62fr);gap:6px}
.fx-sliders{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.smart-tab-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:9px}
.smart-box{
  border:1px solid #202833;
  background:#0d131b;
  border-radius:12px;
  padding:10px;
  min-width:0;
}
.smart-box strong{font-size:10px}
.smart-wide{grid-row:span 2}
.smart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.smart-head span{display:block;font-size:8px;color:var(--muted);margin-top:2px}
.smart-action{
  border:0;border-radius:8px;padding:7px 9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:8px;font-weight:900
}
.smart-match-list{display:flex;flex-direction:column;gap:4px}
.smart-match{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;
  align-items:center;gap:8px;padding:7px;border-radius:10px;
  border-bottom:1px solid rgba(38,48,61,.65)
}
.smart-match:hover{background:#151c26}
.smart-mini-cover{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#263140,#11161e);border:1px solid #364356;
  font-size:9px;font-weight:900
}
.smart-match-title{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smart-match-meta{font-size:8px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smart-score{color:var(--green);font-size:10px;font-weight:900}
.load-b-smart{border:1px solid var(--line);background:#151d28;color:#fff;border-radius:8px;padding:6px 7px;font-size:8px;font-weight:900}
.camelot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.camelot-key{padding:10px 2px;text-align:center;border-radius:9px;background:#151d28;border:1px solid #2b3542;font-size:9px;font-weight:900}
.camelot-key.active{background:linear-gradient(135deg,#315b91,#643b8d)}
.mood-row{display:flex;flex-wrap:wrap;gap:5px}
.mood-chip{border:1px solid #334054;background:#151d28;color:#cfd7e2;border-radius:999px;padding:6px 8px;font-size:8px;font-weight:900}
.mood-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.energy-curve{display:flex;gap:4px;align-items:flex-end;height:48px;padding-top:4px}
.energy-curve span{flex:1;min-width:5px;background:#243040;border-radius:5px 5px 2px 2px}
.energy-curve span.on{background:linear-gradient(to top,var(--green),var(--amber))}
.sampler-large{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.sample-pad{height:58px;border:1px solid #2e3948;background:#151d28;color:#fff;border-radius:10px;font-size:8px;font-weight:900}
.sample-pad.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.stems-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stems-grid.large{grid-template-columns:repeat(4,1fr)}
.stem-btn{border:1px solid #2b3542;background:#151d28;color:#fff;border-radius:9px;padding:11px 5px;font-size:8px;font-weight:900}
.stem-btn.on{background:#243b52}
@media(max-width:1250px){
  .smart-tab-grid{grid-template-columns:1fr 1fr}
  .smart-wide{grid-column:1/-1;grid-row:auto}
}
@media(max-width:930px){
  .dual-tools,.fx-sliders,.smart-tab-grid{grid-template-columns:1fr}
  .fx-rack{grid-template-columns:1fr 1fr 1fr}
  .sampler-large{grid-template-columns:repeat(4,1fr)}
  .stems-grid.large{grid-template-columns:1fr 1fr}
}

/* ===== MIXER MODE: CROSSFADER OR CHANNEL FADERS ===== */
.mixer-enhanced{gap:9px}
.xf-mode{
  width:100%;
  border:1px solid #293442;
  background:#0c1118;
  border-radius:11px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.xf-mode>span{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.xf-toggle{
  border:1px solid #39485b;
  background:#151d28;
  color:#fff;
  border-radius:999px;
  padding:5px 8px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  font-weight:900;
}
.xf-toggle .dot{
  width:8px;height:8px;border-radius:50%;
  background:#697789;
  box-shadow:0 0 0 transparent;
}
.xf-toggle.active{
  background:#26364a;
  border-color:#526882;
}
.xf-toggle.active .dot{
  background:var(--green);
  box-shadow:0 0 10px rgba(71,230,161,.7);
}
.channel-faders{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(42px,1fr) 48px;
  gap:7px;
  align-items:center;
  border:1px solid #202833;
  background:#0b1016;
  border-radius:12px;
  padding:8px 6px;
}
.channel-strip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  opacity:.35;
  transition:opacity .18s ease;
}
.channel-strip.enabled{opacity:1}
.channel-label{
  font-size:8px;
  color:var(--muted);
  font-weight:900;
}
.vertical-wrap{
  height:118px;
  width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vertical-fader{
  width:112px!important;
  transform:rotate(-90deg);
  accent-color:var(--accent);
}
.vertical-fader:disabled{
  filter:grayscale(1);
  cursor:not-allowed;
}
.channel-value{
  min-height:11px;
  font-size:7px;
  color:var(--muted);
  font-weight:900;
}
.cross-block{
  opacity:.35;
  transition:opacity .18s ease;
}
.cross-block.active{opacity:1}
.cross-block input:disabled{
  filter:grayscale(1);
  cursor:not-allowed;
}
#crossStateLabel{
  margin-left:4px;
  font-size:7px;
  color:var(--green);
}
.cross-scale{
  display:flex;
  justify-content:space-between;
  margin-top:2px;
  color:var(--muted);
  font-size:7px;
  font-weight:900;
}
.mode-help{
  width:100%;
  border:1px dashed #374456;
  border-radius:9px;
  padding:7px;
  color:#96a4b5;
  font-size:7px;
  line-height:1.35;
}

/* ===== APC MINI CONTROLLER TAB ===== */
/* V2 layout: the hardware surface always gets the full available width.
   This avoids squeezing the 9 APC Mini faders beside the mapping sidebar. */
.controller-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.controller-main,.controller-sidebar{min-width:0}
.controller-toolbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  border:1px solid #202833;
  background:#0d131b;
  border-radius:12px;
  padding:10px;
}
.controller-intro strong{display:block;font-size:11px}
.controller-intro span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.midi-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.apc-select{
  min-width:132px;
  background:#111821;
  color:#fff;
  border:1px solid #2b3542;
  border-radius:8px;
  padding:7px;
  font-size:9px;
  font-weight:800;
}
.controller-status-row{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.status-card{
  border:1px solid #202833;
  background:#0d131b;
  border-radius:11px;
  padding:10px;
}
.status-label{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.status-value{
  margin-top:4px;
  font-size:10px;
  font-weight:900;
}
.status-value.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.map-mode-bar{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.map-mode{
  border:1px solid #334054;
  background:#151d28;
  color:#cfd7e2;
  border-radius:999px;
  padding:7px 10px;
  font-size:8px;
  font-weight:900;
}
.map-mode.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#fff;
}
.apc-device-shell{
  margin-top:10px;
  border:1px solid #202833;
  background:linear-gradient(180deg,#111823,#0b1016);
  border-radius:14px;
  padding:12px;
}
.apc-titlebar{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
  margin-bottom:10px;
}
.apc-titlebar strong{display:block;font-size:11px}
.apc-titlebar span{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:2px;
}
.apc-legend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
}
.apc-legend i{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  margin-right:4px;
  vertical-align:middle;
}
.legend-off{background:#1b2430;border:1px solid #364356}
.legend-on{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.apc-top-faders{
  display:grid;
  grid-template-columns:repeat(9,minmax(70px,1fr));
  gap:7px;
  margin-bottom:14px;
  width:100%;
  overflow:visible;
}
.apc-fader{
  min-width:0;
  border:1px solid #28323f;
  background:#0d131b;
  border-radius:10px;
  padding:8px 5px 7px;
  text-align:center;
  overflow:hidden;
}
/* The physical center fader (F5 / CC52) is the master/crossfader lane. */
.apc-fader:nth-child(5){
  border-color:#5a4775;
  background:linear-gradient(180deg,rgba(155,92,255,.09),#0d131b 48%);
}
.apc-fader .fader-name{
  min-height:24px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-size:7px;
  color:var(--muted);
  font-weight:900;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.apc-fader .fader-id{
  font-size:8px;
  font-weight:900;
  margin-bottom:3px;
  white-space:nowrap;
}
.apc-fader .v-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  height:102px;
  width:100%;
  overflow:visible;
}
.apc-fader input[type=range]{
  width:94px !important;
  max-width:none;
  transform:rotate(-90deg);
  transform-origin:center;
  accent-color:var(--accent);
}
.apc-fader .fader-value{
  margin-top:3px;
  min-height:10px;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}
.apc-surface{
  display:grid;
  grid-template-columns:minmax(0,1fr) 86px;
  gap:10px;
  align-items:start;
}
.apc-pad-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:6px;
}
.apc-pad{
  min-height:44px;
  border:1px solid #2f3947;
  background:#141c27;
  color:#eef2f8;
  border-radius:8px;
  padding:4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  font-size:7px;
  line-height:1.15;
  font-weight:900;
  transition:transform .08s ease, background .08s ease, border-color .08s ease;
}
.apc-pad small{
  display:block;
  color:#8f9bab;
  font-size:6px;
  margin-top:2px;
  font-weight:700;
}
.apc-pad.active,
.apc-pad.midi-hit{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
}
.apc-scene-column{
  display:grid;
  grid-template-rows:repeat(8,1fr);
  gap:6px;
}
.apc-scene-btn{
  min-height:44px;
  border:1px solid #2f3947;
  background:#141c27;
  color:#eef2f8;
  border-radius:8px;
  padding:4px;
  text-align:center;
  font-size:7px;
  font-weight:900;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.15;
}
.apc-scene-btn small{
  display:block;
  color:#8f9bab;
  font-size:6px;
  margin-top:2px;
}
.apc-bottom-controls{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:6px;
}
.apc-bottom-btn{
  min-height:42px;
  border:1px solid #2f3947;
  background:#141c27;
  color:#eef2f8;
  border-radius:8px;
  padding:4px;
  text-align:center;
  font-size:7px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
}
.apc-bottom-btn.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
}
.apc-fader.pickup-waiting{
  outline:1px solid rgba(255,202,98,.78);
  box-shadow:0 0 0 2px rgba(255,202,98,.10), inset 0 0 24px rgba(255,202,98,.035);
}
.apc-fader.pickup-waiting .fader-value{color:var(--amber)}

.controller-sidebar{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,.9fr);
  gap:10px;
  align-items:start;
}
.controller-box{
  border:1px solid #202833;
  background:#0d131b;
  border-radius:12px;
  padding:10px;
}
.controller-box-head strong{display:block;font-size:10px}
.controller-box-head span{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:2px;
}
.mapping-summary{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mapping-section{
  border:1px solid #263140;
  background:#111821;
  border-radius:10px;
  padding:8px;
}
.mapping-section h4{
  margin:0 0 6px;
  font-size:9px;
}
.mapping-list{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
}
.mapping-item{
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:7px;
  align-items:start;
  font-size:8px;
}
.mapping-item b{color:#dfe8f5}
.mapping-item span{color:var(--muted);line-height:1.35}
.software-mirror{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.mirror-row label{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:8px;
  font-weight:900;
}
.apc-notes{
  margin:8px 0 0 16px;
  padding:0;
  color:#cfd7e2;
  font-size:8px;
  line-height:1.5;
}
.apc-notes li+li{margin-top:5px}

.apc-bottom-controls{grid-template-columns:repeat(9,1fr)}
.apc-bottom-btn.shift-hw{border-color:#4b3b64;background:#1b1623}
.apc-bottom-btn.shift-hw.active{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.midi-tools-extra{display:flex;gap:6px;flex-wrap:wrap}
.midi-test-btn{border:1px solid #334054;background:#151d28;color:#fff;border-radius:8px;padding:7px 9px;font-size:8px;font-weight:900}
.midi-test-btn:hover{background:#202b3a}
.status-value.ok{color:var(--green)}
.status-value.warn{color:var(--amber)}
.status-value.err{color:var(--red)}
.midi-diagnostic{
  margin-top:8px;max-height:164px;overflow:auto;border:1px solid #263140;background:#090d13;
  border-radius:10px;padding:8px;font:8px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#b9c5d3
}
.midi-diagnostic .rx{color:#8de7ff}.midi-diagnostic .tx{color:#b7f6d8}.midi-diagnostic .sys{color:#ffc979}
.controller-protocol{margin-top:8px;padding:7px 8px;border:1px dashed #374456;border-radius:9px;color:#96a4b5;font-size:8px;line-height:1.45}
.controller-protocol b{color:#dfe8f5}
.apc-pad.latched{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 14px rgba(155,92,255,.18)}
.apc-scene-btn.midi-hit,.apc-bottom-btn.midi-hit{transform:translateY(-1px);border-color:#7755a8}
@media(max-width:930px){.apc-bottom-controls{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1180px){
  .controller-sidebar{grid-template-columns:1fr 1fr}
  .controller-sidebar .controller-box:first-child{grid-column:1/-1}
}
@media(max-width:930px){
  .controller-status-row{grid-template-columns:1fr}
  .controller-sidebar{grid-template-columns:1fr}
  .controller-sidebar .controller-box:first-child{grid-column:auto}
  .apc-top-faders{
    grid-template-columns:repeat(9,minmax(68px,1fr));
    overflow-x:auto;
    padding-bottom:5px;
  }
  .apc-surface{grid-template-columns:1fr}
  .apc-scene-column{grid-template-columns:repeat(4,1fr);grid-template-rows:none}
  .apc-bottom-controls{grid-template-columns:repeat(4,1fr)}
}


/* ===== SMART EXTENSIONS — ADDED ON TOP OF DJ PRO, NOTHING REMOVED ===== */
.smart-suite{
  margin-top:12px;
  display:grid;
  grid-template-columns:1.15fr .95fr .95fr;
  gap:10px;
}
.smart-card{
  border:1px solid var(--line);
  background:#0c1118;
  border-radius:14px;
  padding:11px;
  min-width:0;
}
.smart-card h3{
  margin:0 0 6px;
  font-size:11px;
}
.smart-card p{
  margin:0 0 9px;
  color:var(--muted);
  font-size:9px;
}
.mood-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.mood-chip{
  border:1px solid #334054;
  background:#151d28;
  color:#cfd7e2;
  border-radius:999px;
  padding:6px 8px;
  font-size:8px;
  font-weight:900;
}
.mood-chip.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#fff;
}
.energy-curve{
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:48px;
  padding-top:3px;
}
.energy-curve span{
  flex:1;
  min-width:5px;
  background:#243040;
  border-radius:5px 5px 2px 2px;
}
.energy-curve span.on{
  background:linear-gradient(to top,var(--green),var(--amber));
}
.sampler-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.sample-pad{
  height:44px;
  border:1px solid #2e3948;
  background:#151d28;
  color:#fff;
  border-radius:9px;
  font-size:8px;
  font-weight:900;
}
.sample-pad.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
}
.smart-lower{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:10px;
}
.smart-match-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.smart-match{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:7px;
  border-radius:10px;
  border-bottom:1px solid rgba(38,48,61,.65);
}
.smart-match:hover{background:#151c26}
.smart-mini-cover{
  width:36px;height:36px;border-radius:8px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#263140,#11161e);
  border:1px solid #364356;
  font-size:9px;font-weight:900;
}
.smart-match-title{
  font-size:10px;font-weight:900;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.smart-match-meta{
  font-size:8px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.smart-score{
  color:var(--green);
  font-size:10px;
  font-weight:900;
}
.load-b-smart{
  border:1px solid var(--line);
  background:#151d28;
  color:#fff;
  border-radius:8px;
  padding:6px 7px;
  font-size:8px;
  font-weight:900;
}
.camelot-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.camelot-key{
  padding:10px 2px;
  text-align:center;
  border-radius:9px;
  background:#151d28;
  border:1px solid #2b3542;
  font-size:9px;
  font-weight:900;
}
.camelot-key.active{
  background:linear-gradient(135deg,#315b91,#643b8d);
}
.stems-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.stem-btn{
  border:1px solid #2b3542;
  background:#151d28;
  color:#fff;
  border-radius:9px;
  padding:9px 5px;
  font-size:8px;
  font-weight:900;
}
.stem-btn.on{background:#243b52}
.smart-toolbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}
.smart-toolbar .hint{
  color:var(--muted);
  font-size:9px;
}
.smart-action{
  border:0;
  border-radius:9px;
  padding:7px 9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:8px;
  font-weight:900;
}
@media(max-width:1250px){
  .smart-suite{grid-template-columns:1fr 1fr}
  .smart-lower{grid-template-columns:1fr 1fr}
}
@media(max-width:930px){
  .smart-suite,.smart-lower{grid-template-columns:1fr}
}


/* ===== VSR DJ AUDIO ENGINE V1 ===== */
.deck-audio-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.audio-load-btn{
  border:1px solid #39485b;background:#151d28;color:#fff;border-radius:8px;
  padding:6px 8px;font-size:7px;font-weight:900;letter-spacing:.04em;white-space:nowrap
}
.audio-load-btn:hover{background:#202b3a;border-color:#566a83}
.audio-load-btn.loaded{border-color:rgba(71,230,161,.65);box-shadow:0 0 12px rgba(71,230,161,.12)}
.deck.engine-ready{box-shadow:inset 0 0 0 1px rgba(71,230,161,.16)}
.deck.engine-playing .wave:before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(71,230,161,.10),transparent 46%);
  animation:vsrPulse 1.2s ease-in-out infinite;pointer-events:none
}
@keyframes vsrPulse{50%{opacity:.35}}
.engine-toast{
  position:fixed;right:18px;bottom:18px;z-index:200;max-width:420px;
  border:1px solid #344154;background:rgba(11,16,22,.96);color:#eef3f9;border-radius:11px;
  padding:9px 11px;font-size:10px;font-weight:800;box-shadow:0 14px 40px rgba(0,0,0,.35);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:.18s ease
}
.engine-toast.show{opacity:1;transform:translateY(0)}
.engine-toast.warn{border-color:#806335;color:#ffdc91}
.engine-toast.ok{border-color:#315e4c;color:#91f4c6}
.hotcue-set{box-shadow:inset 0 0 0 1px rgba(71,230,161,.7),0 0 12px rgba(71,230,161,.10)}
.loop-active{box-shadow:inset 0 0 0 1px rgba(155,92,255,.75)}
#meterA,#meterB{will-change:transform;transition:transform .045s linear;transform:scaleY(.02)}
#engineBannerText b{color:var(--green)}
/* Site integration: real controls, readable catalogue and explicit V1 scope. */
a{color:var(--cyan)}
.top-actions a{text-decoration:none}
.catalogue-status{margin:0;color:var(--amber);font-size:12px;line-height:1.5}
.eqrow{grid-template-columns:1fr 1fr;font-size:10px;gap:12px}
.eqrow label{display:flex;flex-direction:column;gap:8px}
.eqrow input[type=number]{width:100%;color:var(--text);background:var(--panel3);border:1px solid var(--line);padding:7px;border-radius:6px}
.clock{white-space:nowrap;font-size:10px}
.deckhead{flex-wrap:wrap}
.loaded{white-space:normal;overflow-wrap:anywhere}
.deck-audio-actions{flex-wrap:wrap}
.library .libbody{max-height:75vh}
.library .libbody>p{font-size:11px;color:var(--muted)}
.track>div{min-width:0}
.track a{font-size:10px}
.track .cover{object-fit:cover}
button:disabled{opacity:.4;cursor:not-allowed}
.info{grid-template-columns:1fr 1fr}
.adv-panel>p{font-size:12px;line-height:1.6;color:var(--muted)}
.apc-fader .fader-value{white-space:normal;overflow-wrap:anywhere}
@media(max-width:1400px){.workspace{grid-template-columns:210px minmax(0,1fr)}.library.right{display:block;grid-column:1/-1}.deckgrid{grid-template-columns:1fr 145px 1fr}}
@media(max-width:930px){.workspace{grid-template-columns:1fr}.library{display:flex;order:2}.main{order:1}.library.right{order:3}.deckgrid{grid-template-columns:1fr}.info{grid-template-columns:1fr}.topbar{height:auto;min-height:66px;gap:8px}.apc-top-faders{overflow-x:auto}}
@media(max-width:930px){.deck-audio-actions{gap:4px}.audio-load-btn{padding:5px 6px}}
/* YouTube fits inside the baseline deck; surrounding DJ/APC layout is retained. */
.deck-video{width:100%;aspect-ratio:16/9;min-height:200px;background:#070a10;border-radius:8px;overflow:hidden}
.deck-video iframe{width:100%;height:100%;border:0}
body.vsrdj-track-drag .deck-video iframe{pointer-events:none}
.deck-track-meta{display:flex;align-items:center;gap:9px;margin:10px 0;font-size:11px;color:var(--muted)}
.deck-track-meta img{width:42px;height:42px;object-fit:cover;border-radius:6px}
.video-status{font-size:11px;line-height:1.5;color:var(--muted);min-height:17px}
.library-nav{display:block;width:100%;text-align:left;margin:5px 0;padding:10px;background:var(--panel3);color:var(--text);border:1px solid var(--line);border-radius:6px;cursor:pointer;overflow-wrap:anywhere}
.track-load-actions{display:flex;flex-direction:column;gap:5px}
.track-load-actions .add{font-size:10px;width:29px;height:25px}
.guest-gate{position:fixed;inset:0;z-index:2000;background:#05090fe8;display:grid;place-items:center;padding:20px}
.guest-gate[hidden]{display:none}
.guest-gate>div{max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;line-height:1.6}
.guest-gate button{padding:10px;margin:4px;background:var(--panel3);color:var(--cyan);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.top-actions{flex-wrap:wrap}
/* The decks retain only active controls; empty APC positions mirror unassigned hardware. */
.deck .transport{grid-template-columns:auto auto 1fr}
.deck .grid2,.deck .eqrow{grid-template-columns:1fr}
.channel-faders{grid-template-columns:1fr 1fr}
.apc-fader.unassigned{opacity:.2;min-height:40px}
.apc-pad.unassigned,.apc-scene-btn.unassigned,.apc-bottom-btn.unassigned{opacity:.18;cursor:default}

/* AUTO MIX */
.library-nav.artist-nav,.library-nav.release-nav{display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:38px}
.library-nav.artist-nav>span,.library-nav.release-nav>span{min-width:0}
.library-thumbnail,.automix-thumbnail{display:block;width:24px;height:24px;flex:0 0 24px;object-fit:cover;border-radius:4px;background:#101720}
.artist-nav .library-thumbnail{border-radius:50%}
.automix-copy{display:flex;align-items:center;gap:8px}
.automix-copy-text{min-width:0;flex:1}
.automix-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px}
.automix-main,.automix-controls{border:1px solid #202833;background:#0d131b;border-radius:12px;padding:11px}
.automix-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}
.automix-head strong{display:block;font-size:11px;letter-spacing:.04em}
.automix-head span{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.automix-count{white-space:nowrap!important;border:1px solid #334052;border-radius:999px;padding:5px 8px;color:#fff!important;margin:0!important}
.automix-drop{border:1px dashed #445268;border-radius:10px;padding:12px;text-align:center;color:var(--muted);font-size:9px;font-weight:800;background:#0a0f15;transition:.15s}
.automix-drop.dragover{border-color:var(--accent);background:rgba(155,92,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(155,92,255,.3)}
.automix-queue{margin-top:8px;display:flex;flex-direction:column;gap:5px;max-height:330px;overflow:auto}
.automix-empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:10px;border:1px solid #1c2530;border-radius:9px}
.automix-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto 28px;align-items:center;gap:8px;border:1px solid #202833;background:#101720;border-radius:9px;padding:7px 8px}
.automix-row.current{border-color:#5e4d78;box-shadow:inset 3px 0 0 var(--accent)}
.automix-row.next{border-color:#38485c;box-shadow:inset 3px 0 0 #5c7ea8}
.automix-num{font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#65758a}
.automix-copy{min-width:0}.automix-copy strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.automix-copy span{display:block;font-size:8px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.automix-badge{font-size:7px;font-weight:900;letter-spacing:.05em;color:#d8c9ff;white-space:nowrap}
.automix-remove{border:1px solid #303a47;background:#121923;color:#9eabba;border-radius:7px;width:26px;height:26px;font-size:16px;line-height:20px}.automix-remove:hover{color:#fff;border-color:#59697e}.automix-remove:disabled{opacity:.25}
.automix-controls{display:flex;flex-direction:column;gap:8px}
.automix-control-group{border:1px solid #202833;border-radius:9px;padding:8px}.automix-control-group label{display:flex;justify-content:space-between;gap:8px;font-size:8px;font-weight:900;color:#d8dee8}.automix-control-group label span{font-weight:600;color:var(--muted)}.automix-control-group input{width:100%;margin-top:6px;background:#0a0f15;border:1px solid #303b4a;border-radius:7px;color:#fff;padding:7px;font-weight:900}
.automix-start,.automix-stop,.automix-clear{border-radius:9px;padding:10px;border:1px solid #344052;font-size:9px;font-weight:900;color:#fff;cursor:pointer}.automix-start{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2))}.automix-stop{background:#171e28}.automix-clear{background:#101720;color:#aeb9c8}.automix-start:disabled,.automix-stop:disabled,.automix-clear:disabled{opacity:.35;cursor:not-allowed}
.automix-status{min-height:34px;margin:2px 0 0;padding:8px;border-radius:8px;background:#0a0f15;color:#d7deea;font-size:9px;line-height:1.45}.automix-note{margin:0;color:var(--muted);font-size:8px;line-height:1.45}
#autoMixPanel.running .automix-head strong::after{content:' · RUNNING';color:#bfa8ff}
.track-load-actions .auto-add{min-width:42px;padding-left:5px;padding-right:5px}
@media(max-width:930px){.automix-layout{grid-template-columns:1fr}.automix-controls{display:grid;grid-template-columns:1fr 1fr}.automix-status,.automix-note{grid-column:1/-1}}
.automix-bulk{border-color:#4c3c68!important;background:linear-gradient(135deg,rgba(155,92,255,.16),rgba(255,79,184,.09))!important;color:#efe9ff!important;text-align:center!important;font-size:8px!important;font-weight:900!important;letter-spacing:.04em}

/* AUTO DJ INFINI + random fill */
.automix-layout{grid-template-columns:minmax(0,1fr) 310px}
.automix-head-right{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.automix-mode-badge{display:inline-flex!important;align-items:center;justify-content:center;min-width:52px;padding:4px 7px;border:1px solid #314052;border-radius:999px;background:#101720;color:#9fadc0!important;font-size:7px!important;font-weight:900;letter-spacing:.07em}
#autoMixPanel.running .automix-mode-badge{border-color:#665083;color:#e8dcff!important;background:rgba(155,92,255,.12)}
#autoMixPanel.infinite .automix-mode-badge{border-color:#466a5d;color:#c6f4df!important;background:rgba(84,190,145,.10)}
.automix-random,.automix-infinite-start{border-radius:9px;padding:10px;border:1px solid #4d4162;font-size:9px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(135deg,rgba(155,92,255,.22),rgba(255,79,184,.12))}
.automix-infinite-start{width:100%;border-color:#3e6556;background:linear-gradient(135deg,rgba(63,164,121,.28),rgba(44,113,99,.18))}
.automix-random:disabled,.automix-infinite-start:disabled{opacity:.35;cursor:not-allowed}
.automix-mini-note{margin:-3px 2px 1px;color:#7f8b9b;font-size:7px;line-height:1.4}
.automix-infinite-box{display:flex;flex-direction:column;gap:7px;border:1px solid #283441;border-radius:10px;padding:9px;background:#0b1118}
.automix-infinite-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.automix-infinite-head strong{display:block;font-size:9px;letter-spacing:.05em;color:#eef4f8}.automix-infinite-head span{display:block;margin-top:2px;color:#7f8b9b;font-size:7px}.automix-infinite-head>span{margin:0;padding:3px 6px;border:1px solid #2a3946;border-radius:999px;color:#9fbdaf;font-weight:900}
.automix-artist-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.automix-artist-actions button{border:1px solid #2d3a47;border-radius:7px;background:#111923;color:#9faabb;padding:6px;font-size:7px;font-weight:900;cursor:pointer}.automix-artist-actions button:hover{color:#fff;border-color:#526174}
.automix-artist-list{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:3px;padding:2px 1px 2px 0;scrollbar-width:thin}
.automix-artist{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 6px;border:1px solid #1c2732;border-radius:7px;background:#0f161e;cursor:pointer}.automix-artist:hover{border-color:#354555}.automix-artist input{margin:0;accent-color:#9b5cff}.automix-artist span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:#d7dee8}.automix-artist small{font-size:7px;color:#6f7e90;font-weight:900}
.automix-artist-empty{padding:9px;text-align:center;color:#788697;font-size:8px;border:1px dashed #293541;border-radius:7px}
#autoMixPanel.infinite .automix-head strong::after{content:' · INFINITE';color:#9cddb9}
@media(max-width:930px){.automix-layout{grid-template-columns:1fr}.automix-controls{display:flex}.automix-artist-list{max-height:220px}}