:root{
  color-scheme:dark;
  --bg:#05070a;--panel:#0b1016;--panel2:#080c11;--line:#283344;
  --text:#f4f6f8;--muted:#8d98a8;--gold:#d7b56b;--gold2:#8d6a2e;
  --cyan:#56cce8;--green:#73d9ad;--red:#d65d5d;--amber:#e3b75f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#05070a;color:var(--text)}
body{
  background:
    radial-gradient(circle at 50% -15%,#1b2330 0,#0a0e14 32%,#05070a 72%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  overscroll-behavior:none;
}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.4;cursor:not-allowed}
.app{width:min(1480px,100%);margin:auto;padding:10px 10px 64px}
.hidden{display:none!important}
.eyebrow{margin:0;color:var(--gold);font-size:.65rem;font-weight:900;letter-spacing:.16em}
h1,h2,p{margin-top:0}
h1{margin-bottom:0;font-size:clamp(1.65rem,3.5vw,3rem);line-height:.95}
h2{margin-bottom:0}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand,.head-actions{display:flex;align-items:center;gap:9px}
.brand img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 30px #d7b56b22}
.ghost,.session-pill{
  border:1px solid var(--line);border-radius:999px;background:#0a0f15;color:var(--muted);
  padding:7px 10px;font-size:.7rem;font-weight:850
}
.session-pill.live{color:var(--green);border-color:#356b56}
.session-strip{
  display:grid;grid-template-columns:minmax(120px,220px) minmax(140px,280px) auto 1fr;
  gap:7px;align-items:center;margin:9px 0
}
.session-strip.compact{grid-template-columns:auto 1fr}
.session-strip.compact input{display:none}
.session-strip input,.searchbar input{
  width:100%;border:1px solid #313c4d;border-radius:10px;background:#070b10;
  color:var(--text);padding:10px 11px;outline:none
}
.session-strip input:focus,.searchbar input:focus{border-color:#806333}
#statusText{justify-self:end;color:var(--muted);font-size:.71rem}
.btn{border-radius:10px;padding:9px 12px;font-weight:900}
.btn.gold{border:1px solid #7f632f;background:linear-gradient(#e0bd73,#9b7534);color:#080a0d}
.btn.dark{border:1px solid #354154;background:#0c1219;color:var(--text)}

.console{
  display:grid;grid-template-columns:minmax(330px,1fr) 200px minmax(330px,1fr);
  gap:8px;align-items:stretch;overflow-x:auto;scrollbar-width:thin
}
.deck,.mixer,.library-panel,.queue-panel,.advanced{
  border:1px solid var(--line);background:linear-gradient(160deg,#10161e,#070a0e 72%);
  border-radius:16px;box-shadow:0 15px 48px #0006
}
.deck{padding:11px;min-width:0;transition:border-color .12s}
.deck-a{border-color:#5e4c2d}
.deck-b{border-color:#245d6c}
.deck.drop-active{outline:2px solid var(--green);outline-offset:-3px}
.deck-head{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.08em}
.mini{
  border:1px solid #344052;background:#101720;color:var(--text);border-radius:8px;
  padding:6px 8px;font-size:.66rem;font-weight:850;min-height:34px
}
.deck-main{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;margin:9px 0}
.deck-main img{width:86px;height:86px;border-radius:13px;object-fit:cover;border:1px solid #364052;background:#121821}
.deck-info{min-width:0}
.deck-info h2{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-info p{font-size:.7rem;color:var(--muted);margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.waveform{width:100%;height:54px;display:block;border-radius:8px;background:#05080c;border:1px solid #1f2935}
.timebar{display:flex;justify-content:space-between;color:#697789;font-size:.62rem;margin-top:3px}
.deck-controls{display:grid;grid-template-columns:54px 60px minmax(100px,1fr);gap:8px;align-items:center}
.deck-controls button{
  min-height:48px;border-radius:11px;border:1px solid #38465a;background:#111821;color:var(--text);
  font-weight:950
}
.deck-controls .play{background:linear-gradient(#dfbd76,#987331);border-color:#806333;color:#06080b;font-size:1.15rem}
.deck-controls .play.playing{background:linear-gradient(#7fe0b9,#367b61);border-color:#3a8e6f}
.deck-controls label{display:grid;gap:3px;color:var(--muted);font-size:.62rem}
.deck-controls input,.xf input{width:100%;accent-color:var(--gold);padding:0}

.mixer{
  display:grid;grid-template-rows:auto auto auto 1fr auto auto;place-items:center;padding:10px 11px;text-align:center
}
.mixer-logo{width:44px;height:44px;border-radius:50%;opacity:.9}
.vu{display:flex;gap:6px;align-items:end;height:58px;margin:5px 0}
.vu i{display:block;width:11px;height:8%;border-radius:5px;background:linear-gradient(to top,var(--green),var(--amber),var(--red));transition:height .06s linear}
.mixer-label{font-size:.61rem;letter-spacing:.14em;color:var(--gold);font-weight:900}
.xf{width:100%;align-self:end}
.xf>div{display:flex;justify-content:space-between;font-size:.58rem;color:var(--muted)}
.xf b{color:var(--text);letter-spacing:.07em}
#midiBadge{font-size:.61rem;color:var(--muted);margin-top:5px}

.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);gap:8px;margin-top:8px;align-items:start}
.library-panel,.queue-panel{padding:11px}
.panel-head,.queue-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.panel-head h2,.queue-head h2{font-size:1.05rem;margin-top:2px}
.album-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.album-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:88px;gap:7px;overflow-x:auto;
  padding:8px 1px;scroll-snap-type:x proximity;scrollbar-width:thin
}
.album-chip{
  position:relative;width:88px;height:88px;border:1px solid #303a49;border-radius:10px;overflow:hidden;
  background:#10161e;color:white;padding:0;scroll-snap-align:start
}
.album-chip img{width:100%;height:100%;object-fit:cover;display:block}
.album-chip span{
  position:absolute;inset:auto 0 0;padding:16px 4px 5px;background:linear-gradient(transparent,#000e);
  font-size:.59rem;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.album-chip.active{outline:2px solid var(--gold);outline-offset:1px}
.album-chip.all{display:grid;place-items:center;color:var(--gold);font-weight:950;font-size:.7rem;background:#111720}

.filters{display:flex;gap:5px;overflow-x:auto;padding:4px 0 7px}
.filters button{
  white-space:nowrap;border:1px solid #2c3747;border-radius:999px;background:#0a0f15;color:var(--muted);
  padding:6px 9px;font-size:.63rem;font-weight:850
}
.filters button.active{color:#080b0e;background:var(--gold);border-color:var(--gold)}
.searchbar{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
#libraryCount{min-width:65px;text-align:right;color:var(--muted);font-size:.68rem}

.selection-bar{
  position:sticky;top:4px;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:9px;
  margin:7px 0;padding:8px 9px;border:1px solid #4c5868;border-radius:11px;background:#151a22ee;
  backdrop-filter:blur(7px)
}
.selection-bar span{display:block;color:var(--gold);font-size:.55rem;letter-spacing:.13em}
.selection-bar strong{display:block;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.selection-bar>div:last-child{display:flex;gap:5px}
.selection-bar button{
  border:1px solid #374355;border-radius:8px;background:#0c1219;color:var(--text);
  padding:7px 8px;font-size:.66rem;font-weight:900;min-height:35px
}
#selectedA{border-color:#715b32;color:#f0d18b}
#selectedB{border-color:#286578;color:#8ce1f2}
#selectedQ{border-color:#2c6954;color:#9ee2c1}
#selectedPreview{color:#c9d0d9}

.track-list,.queue-list{display:grid;gap:5px;max-height:430px;overflow:auto;padding-right:2px;scrollbar-width:thin}
.track-row{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:7px;align-items:center;
  padding:8px;border:1px solid #222b38;border-radius:9px;background:#080c11;touch-action:pan-y
}
.track-row:hover,.track-row.selected{border-color:#5f4d2e;background:#12151a}
.track-row.dragging{opacity:.45}
.track-index{color:#596577;font-size:.64rem;text-align:center}
.track-title{font-weight:800;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-meta{font-size:.62rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-actions,.queue-actions{display:flex;gap:4px}
.track-actions button,.queue-actions button{
  min-width:34px;min-height:34px;border:1px solid #344154;border-radius:7px;background:#101720;
  color:var(--text);font-size:.66rem;font-weight:950
}
.track-actions .a,.queue-actions .a{color:#efd28f;border-color:#6d582f}
.track-actions .b,.queue-actions .b{color:#8ce2f4;border-color:#286679}
.track-actions .q{color:#9fe3c2;border-color:#2c6a54}
.fav{color:#807765!important}
.fav.on{color:#ffd870!important;border-color:#84682e!important}

.now-next{display:grid;gap:6px;margin:8px 0}
.state-card{border:1px solid #2b3645;border-radius:10px;background:#090d12;padding:8px}
.state-card span{display:block;font-size:.55rem;letter-spacing:.15em;font-weight:950}
.state-card strong{display:block;margin-top:3px;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.state-card.now{border-color:#356b56}
.state-card.now span{color:var(--green)}
.state-card.next{border-color:#715b32}
.state-card.next span{color:var(--gold)}
.state-card.next>div{display:flex;gap:5px;margin-top:6px}
.state-card.next button{
  flex:1;border:1px solid #39475a;border-radius:7px;background:#111821;color:var(--text);
  padding:6px;font-size:.63rem;font-weight:900
}
.queue-panel.drop-active{outline:2px solid var(--green);outline-offset:-3px}
.queue-list{max-height:520px}
.queue-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding:8px;
  border:1px solid #252f3d;border-radius:9px;background:#080c11
}
.queue-row.next{border-color:#715b32;background:#141109}
.queue-row.played{opacity:.48}
.queue-row.loaded{box-shadow:inset 3px 0 0 var(--cyan)}
.queue-num{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#171e27;color:var(--muted);font-size:.62rem;margin-right:5px}
.queue-title{font-weight:800;font-size:.78rem}
.queue-meta{font-size:.61rem;color:var(--muted);margin-top:2px}
.queue-actions .remove{color:#e99595}
.queue-actions .move{color:#aab4c2;min-width:29px}

.advanced{margin-top:8px;overflow:hidden}
.advanced summary{padding:10px 12px;cursor:pointer;color:var(--muted);font-size:.7rem;font-weight:800}
.advanced-body{padding:0 12px 12px}
.learn-grid{display:flex;gap:5px;flex-wrap:wrap}
.learn{border:1px solid #334052;border-radius:8px;background:#0d131b;color:var(--text);padding:7px 8px;font-size:.64rem}
.learn.learning{border-color:#9a7636;color:#f0ce87}
#mappingList{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.map-chip{border:1px solid #303a49;border-radius:999px;padding:5px 7px;font-size:.61rem}
.exports{display:flex;gap:7px;flex-wrap:wrap}
.exports a{color:var(--cyan);text-decoration:none;font-size:.68rem}

.diag-panel{
  position:fixed;right:10px;top:10px;z-index:100;width:min(460px,calc(100vw - 20px));
  border:1px solid #455264;border-radius:13px;background:#090d12f5;box-shadow:0 22px 80px #000b;padding:10px
}
.diag-head{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:.7rem}
.diag-head button{border:0;background:transparent;color:white;font-size:1.3rem}
.diag-panel pre{white-space:pre-wrap;font-size:.69rem;color:#b8c2ce;max-height:70vh;overflow:auto}

.drag-ghost{
  position:fixed;z-index:200;pointer-events:none;max-width:260px;padding:8px 10px;border:1px solid var(--gold);
  border-radius:10px;background:#111821e8;color:white;font-size:.72rem;font-weight:850;box-shadow:0 12px 45px #000a
}

@media(max-width:940px){
  .console{grid-template-columns:290px 150px 290px}
  .workspace{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}
  .deck-main{grid-template-columns:72px minmax(0,1fr)}
  .deck-main img{width:72px;height:72px}
}
@media(max-width:720px){
  .app{padding:7px 7px 55px}
  h1{font-size:1.55rem}
  .brand img{width:38px;height:38px}
  .session-strip{grid-template-columns:1fr 1fr}
  .session-strip .btn{grid-column:1/-1}
  #statusText{display:none}
  .console{grid-template-columns:250px 130px 250px;scroll-snap-type:x proximity}
  .deck,.mixer{scroll-snap-align:start}
  .workspace{grid-template-columns:1fr}
  .queue-panel{order:-1}
  .queue-list{max-height:300px}
  .track-list{max-height:380px}
  .album-rail{grid-auto-columns:80px}
  .album-chip{width:80px;height:80px}
  .selection-bar{align-items:flex-start;flex-direction:column}
  .selection-bar>div:last-child{width:100%}
  .selection-bar button{flex:1}
}
@media(orientation:landscape) and (max-height:600px){
  .topbar{display:none}
  .session-strip{margin:2px 0 6px}
  .session-strip.compact{display:none}
  .console{grid-template-columns:minmax(285px,1fr) 145px minmax(285px,1fr)}
  .deck{padding:8px}
  .deck-main{margin:5px 0;grid-template-columns:62px minmax(0,1fr)}
  .deck-main img{width:62px;height:62px}
  .waveform{height:42px}
  .deck-controls button{min-height:39px}
  .workspace{grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr)}
  .track-list,.queue-list{max-height:250px}
}

@media(pointer:coarse){
  .track-actions button,.queue-actions button,.selection-bar button,.state-card.next button{
    min-width:44px;min-height:44px
  }
}
body.performance-mode .topbar,
body.performance-mode .session-strip,
body.performance-mode .advanced{display:none!important}
body.performance-mode .app{width:100%;padding-top:4px}
body.performance-mode .console{position:sticky;top:0;z-index:40;background:#05070a;padding-bottom:4px}
body.performance-mode .workspace{margin-top:5px}

.stem-strip{
  display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:4px;margin-top:7px;
  padding-top:7px;border-top:1px solid #202a37
}
.stem-strip button{
  min-height:32px;border:1px solid #303c4d;border-radius:7px;background:#0b1118;
  color:#738092;font-size:.58rem;font-weight:900;letter-spacing:.03em
}
.stem-strip.ready .stem-mode{color:var(--gold);border-color:#745c31}
.stem-strip.active .stem-mode{background:var(--gold);color:#080a0d;border-color:var(--gold)}
.stem-strip.ready .stem-toggle:not(:disabled){color:#aab5c3}
.stem-strip.active .stem-toggle:not(.off){color:#0a0d10;background:#8bcfb4;border-color:#63a98e}
.stem-strip.active .stem-toggle.off{color:#e99898;border-color:#6a3838;background:#191012}
.stem-strip button:disabled{opacity:.36}
@media(pointer:coarse){
  .stem-strip button{min-height:42px}
}
@media(max-width:720px){
  .stem-strip{grid-template-columns:1.15fr repeat(4,minmax(48px,1fr))}
  .stem-strip button{font-size:.54rem}
}


/* STEM performance mixer V5.1: 4 channels per deck, physical-controller ready */
.stem-mixer{
  display:grid;grid-template-columns:repeat(4,minmax(52px,1fr));gap:5px;margin-top:6px;
  padding:7px;border:1px solid #202a37;border-radius:9px;background:#070b10;opacity:.5
}
.stem-mixer.ready{opacity:1}
.stem-mixer.active{border-color:#416b5a;box-shadow:inset 0 0 0 1px #315244}
.stem-channel{
  display:grid;grid-template-rows:auto auto 82px auto auto;justify-items:center;gap:4px;
  min-width:0;padding:5px 3px;border:1px solid #222d3a;border-radius:8px;background:#0b1118
}
.stem-channel strong{font-size:.54rem;letter-spacing:.04em;color:#c7d0db;white-space:nowrap}
.stem-trim-wrap{display:grid;justify-items:center;gap:2px;width:100%;font-size:.48rem;color:var(--muted)}
.stem-trim-wrap span{font-variant-numeric:tabular-nums;color:#aeb8c5;font-size:.48rem}
.stem-trim{width:100%;height:16px;padding:0;accent-color:#b8914f}
.stem-level{
  width:28px;height:78px;padding:0;accent-color:var(--green);
  writing-mode:vertical-lr;direction:rtl
}
.stem-level-value{font-size:.5rem;color:#aeb8c5;font-variant-numeric:tabular-nums}
.stem-ms{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%}
.stem-ms button{
  min-height:25px;border:1px solid #344154;border-radius:6px;background:#111821;color:#8d99a8;
  font-size:.55rem;font-weight:950;padding:0
}
.stem-ms button[data-stem-action="mute"].on{background:#5f292d;border-color:#9b4b52;color:#ffd5d8}
.stem-ms button[data-stem-action="solo"].on{background:#715b25;border-color:#b78f3e;color:#fff0b2}
.stem-ms button:disabled,.stem-level:disabled,.stem-trim:disabled{opacity:.34}
.stem-strip .stem-toggle.soloed{box-shadow:inset 0 0 0 2px #c99b3f}
.stem-midi-details{margin-top:8px;border:1px solid #293545;border-radius:9px;padding:6px}
.stem-midi-details>summary{cursor:pointer;color:var(--gold);font-size:.68rem;font-weight:900}
.stem-bank-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.stem-bank-row span{font-size:.61rem;color:var(--muted)}
.stem-bank-row button{
  border:1px solid #354254;border-radius:7px;background:#0c1219;color:#aab4c2;padding:6px 8px;font-size:.61rem;font-weight:900
}
.stem-bank-row button.active{background:var(--gold);border-color:var(--gold);color:#080a0d}
.stem-midi-note{font-size:.62rem;color:var(--muted);margin:5px 0}
.stem-midi-details h4{font-size:.6rem;color:#aeb8c5;margin:8px 0 4px}
.stem-midi-learn{display:flex;gap:4px;flex-wrap:wrap}
.stem-midi-learn .learn{font-size:.56rem;padding:5px 6px}
.learn.mapped{border-color:#3f7c64;color:#9fe3c2}

@media(orientation:landscape) and (max-height:600px){
  .stem-channel{grid-template-rows:auto auto 62px auto auto}
  .stem-level{height:58px}
  .stem-mixer{padding:5px;gap:4px}
}


/* V5.2 AUX C/D + performance controls */
.aux-rack{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.aux-deck{border:1px solid #283443;border-radius:10px;background:#080c11;overflow:hidden}
.aux-deck>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 10px;cursor:pointer;list-style:none}
.aux-deck>summary::-webkit-details-marker{display:none}
.aux-deck>summary span{font-size:.59rem;font-weight:950;color:var(--gold);letter-spacing:.08em}
.aux-deck>summary strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aux-deck>summary em{font-style:normal;font-size:.58rem;color:var(--muted);white-space:nowrap}
.aux-deck.playing>summary{box-shadow:inset 3px 0 0 var(--green);background:#0c1713}
.aux-body{padding:8px;border-top:1px solid #202a37}
.aux-main{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center}
.aux-main img{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid #303b4b}
.aux-main h3{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aux-main p{font-size:.59rem;color:var(--muted);margin:2px 0}
.aux-controls{display:grid;grid-template-columns:54px 58px minmax(100px,1fr);gap:6px;align-items:center;margin-top:6px}
.aux-controls button{min-height:38px;border:1px solid #364355;border-radius:8px;background:#111821;color:var(--text);font-weight:900}
.aux-controls .play{background:linear-gradient(#dfbd76,#987331);color:#06080b}
.aux-controls label{display:grid;gap:2px;color:var(--muted);font-size:.58rem}
.aux-controls input{width:100%;padding:0;accent-color:var(--gold)}
.perf-strip{display:grid;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid #202a37}
.perf-row{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.perf-row button,.perf-row select{border:1px solid #344154;border-radius:6px;background:#0d131b;color:#aeb8c5;min-height:28px;padding:4px 6px;font-size:.55rem;font-weight:900}
.perf-row button.active{background:var(--gold);color:#080a0d;border-color:var(--gold)}
.hotcue-row button.set{background:#2a664f;color:#bff2d8;border-color:#45886e}
.perf-row label{display:flex;align-items:center;gap:3px;color:var(--muted);font-size:.51rem}
.perf-bpm{min-width:58px;font-size:.54rem;font-weight:900;color:var(--cyan)}
.performance-midi-details{margin:7px 0;border:1px solid #293545;border-radius:8px;padding:6px}
.performance-midi-details>summary{cursor:pointer;color:var(--gold);font-size:.65rem;font-weight:900}
.performance-midi-learn{display:grid;gap:5px;margin-top:6px}
.perf-learn-group{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.perf-learn-group>strong{width:48px;font-size:.58rem;color:#aeb8c5}
.perf-learn-group .learn{font-size:.54rem;padding:5px 6px}
#selectedC,#selectedD{border-color:#4c496f;color:#c7c0ff}
@media(max-width:720px){.aux-rack{grid-template-columns:1fr}.aux-deck>summary{grid-template-columns:auto minmax(0,1fr)}.aux-deck>summary em{grid-column:1/-1}}
body.performance-mode .aux-rack{margin-top:4px}

.perf-rate{font-size:.5rem;color:#9eb0c5;font-variant-numeric:tabular-nums;white-space:nowrap}

.head-link{display:inline-flex;align-items:center;border:1px solid #344154;border-radius:7px;background:#0e151e;color:#c8d1dc;text-decoration:none;padding:7px 9px;font-size:.58rem;font-weight:900}