:root{
  --bg:#070b16;
  --bg2:#0d1222;
  --panel:#0f162b;
  --panel2:#121a31;
  --panel3:#0b1120;
  --stroke:rgba(255,255,255,.08);
  --stroke-strong:rgba(255,255,255,.14);
  --text:#eef2ff;
  --muted:#97a1c7;
  --faint:#6f779b;
  --accent:#7c8cff;
  --accent2:#ff5c8a;
  --good:#31dfa2;
  --warn:#ffcc66;
  --danger:#ff5f72;
  --shadow:0 18px 48px rgba(0,0,0,.34);
  --shadow-soft:0 10px 24px rgba(0,0,0,.22);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  min-height:100dvh;
  color:var(--text);
  color-scheme:dark;
  font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(124,140,255,.18), transparent 55%),
    radial-gradient(1000px 700px at 88% 18%, rgba(255,92,138,.12), transparent 50%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
body.mixer-open{overflow:hidden;touch-action:none;overscroll-behavior:none;}
button,select,input{font:inherit}
button,select,input[type="range"]{outline:none;touch-action:manipulation}
input[type="range"]{touch-action:pan-x}
select{color-scheme:dark}
button:focus-visible,select:focus-visible,input:focus-visible{box-shadow:0 0 0 3px rgba(124,140,255,.22)}


/* VERSION BADGE */
#versionBadge{
  position:fixed;
  top:calc(6px + env(safe-area-inset-top));
  right:8px;
  z-index:10000;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,11,22,.72);
  color:rgba(238,242,255,.72);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  backdrop-filter:blur(10px);
  pointer-events:none;
  user-select:none;
}
@media(max-width:760px){
  #versionBadge{top:calc(4px + env(safe-area-inset-top));right:6px;font-size:9px;padding:3px 6px}
}

/* START SCREEN */
#startScreen{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:28px;text-align:center;z-index:30;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(124,140,255,.12), transparent 55%),
    linear-gradient(180deg,#070b16,#05070d);
}
#startScreen .logo{font-size:4rem;filter:drop-shadow(0 18px 30px rgba(255,92,138,.25))}
#startScreen h1{font-size:clamp(1.8rem,4.8vw,3.35rem);font-weight:950;letter-spacing:.18em;text-transform:uppercase;line-height:1.05}
#startScreen p{max-width:760px;color:var(--muted);line-height:1.6;font-size:.96rem}
#startBtn{
  border:none;border-radius:999px;padding:16px 34px;font-weight:900;letter-spacing:.12em;
  color:#fff;font-size:1rem;cursor:pointer;
  background:linear-gradient(135deg,var(--accent2),#ff8a5c);
  box-shadow:0 18px 44px rgba(255,92,138,.28);
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#startBtn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
#startBtn:disabled{opacity:.5;cursor:not-allowed}
#statusLine{font-size:.84rem;color:var(--muted)}
#shortcutLine{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:840px;margin-top:4px
}
#shortcutLine span{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);color:#dbe2ff;font-size:.76rem;font-weight:700
}
#shortcutLine kbd{
  padding:2px 7px;border-radius:7px;background:rgba(10,14,25,.95);border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:.72rem;font-weight:800
}

/* APP */
#app{display:none;flex-direction:column;min-height:100dvh;height:auto}

/* TOP / BEAT / REC / WORKSPACE BARS */
#topBar,#beatBar,#recBar,#workspaceBar{
  flex:none;
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(10,14,25,.92), rgba(7,10,18,.88));
  backdrop-filter:blur(18px) saturate(1.08);
}
#topBar{
  height:66px;display:flex;align-items:center;gap:10px;padding:0 14px;overflow-x:auto;
  scrollbar-width:none;position:relative;z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.16)
}
#topBar::-webkit-scrollbar{display:none}
#title{
  display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:950;letter-spacing:.14em;
  font-size:.86rem;color:#fff;text-transform:uppercase;padding-right:4px
}
#presetSelect{
  min-width:220px;max-width:340px;padding:10px 38px 10px 12px;border-radius:14px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--text);
  font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.topBtn,.tBtn,.beatBtn,.trackMiniBtn,.smallBtn{
  border:1px solid var(--stroke);border-radius:999px;cursor:pointer;background:rgba(255,255,255,.05);
  color:var(--text);font-weight:850;letter-spacing:.05em;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease, color .16s ease;
  white-space:nowrap
}
.topBtn:hover:not(:disabled),.tBtn:hover:not(:disabled),.beatBtn:hover:not(:disabled),.trackMiniBtn:hover:not(:disabled),.smallBtn:hover:not(:disabled){
  transform:translateY(-1px);border-color:var(--stroke-strong);background:rgba(255,255,255,.08)
}
.topBtn:active:not(:disabled),.tBtn:active:not(:disabled),.beatBtn:active:not(:disabled),.trackMiniBtn:active:not(:disabled),.smallBtn:active:not(:disabled){transform:translateY(0)}
.topBtn:disabled,.tBtn:disabled,.beatBtn:disabled,.trackMiniBtn:disabled,.smallBtn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.topBtn{padding:9px 14px;font-size:.76rem}
.topBtn.active{background:linear-gradient(135deg,var(--accent2),#ff8a5c);border-color:transparent;color:#fff}
#monBtn.active{background:var(--good);border-color:transparent;color:#06121a}
#bypassBtn.active{background:linear-gradient(135deg,#8590b8,#bac2e0);border-color:transparent;color:#08101c}

.transport{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.tBtn{padding:9px 14px;font-size:.76rem;letter-spacing:.06em}
#recBtn.recording{background:var(--danger);border-color:transparent;color:#fff;animation:blink 1s step-end infinite}
#playBtn.playing{background:var(--good);border-color:transparent;color:#06121a}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

#recBar{
  display:none;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap;z-index:4
}
#recBar.visible{display:flex}
#recTimer{font-size:.8rem;font-weight:900;color:var(--danger);letter-spacing:.1em;min-width:60px}
#recLabel{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
#waveformWrap{
  flex:1 1 280px;height:34px;position:relative;cursor:pointer;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)
}
#waveCanvas{width:100%;height:100%;display:block}
#playhead{position:absolute;top:0;left:0;width:2px;height:100%;background:rgba(49,223,162,.88);pointer-events:none;display:none;transition:left .08s linear}
#playTimeLabel{font-size:.74rem;color:var(--good);min-width:66px;text-align:right;font-weight:800}
#dlBtn{padding:8px 12px;font-size:.72rem;background:rgba(110,141,255,.16);color:#eef2ff;border-color:rgba(110,141,255,.28)}
#dlBtn:hover{background:rgba(110,141,255,.24)}

#beatBar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;z-index:3
}
#beatBar .beatInfo{min-width:220px;display:flex;flex-direction:column;gap:3px;flex:1 1 240px}
#beatBar .beatTitle{font-size:.68rem;letter-spacing:.16em;font-weight:950;text-transform:uppercase;color:#cfd7ff}
#beatBar .beatName{font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#beatBar .beatBtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.beatBtn{padding:9px 13px;font-size:.74rem}
.beatBtn.good{background:rgba(49,223,162,.13);border-color:rgba(49,223,162,.22)}
.beatBtn.danger{background:rgba(255,95,114,.13);border-color:rgba(255,95,114,.22)}
.beatBtn.active{background:linear-gradient(135deg,var(--accent2),#ff8a5c);border-color:transparent;color:#fff}
#beatBar .beatVol{
  display:flex;align-items:center;gap:10px;min-width:220px;justify-content:flex-end;flex:0 0 auto
}
#beatBar .beatVol label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#beatVol{width:min(240px,38vw)}

#workspaceBar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;
  z-index:2
}
.workspaceCopy{min-width:0;display:flex;flex-direction:column;gap:3px}
.workspaceTitle{font-size:.68rem;letter-spacing:.16em;font-weight:950;text-transform:uppercase;color:#cfd7ff}
.workspaceDesc{font-size:.82rem;line-height:1.45;color:var(--muted);max-width:980px}
.workspaceChips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.workspaceChips span{
  padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);
  color:#dbe2ff;font-size:.74rem;font-weight:700;white-space:nowrap
}

/* LAYOUT */
#content{display:grid;grid-template-columns:360px 1fr;min-height:0;flex:1 0 auto;overflow:visible;gap:12px;padding:12px}
.panel{
  min-height:0;overflow:visible;
  padding:16px;background:linear-gradient(180deg, rgba(16,20,35,.74), rgba(11,14,25,.84));
  backdrop-filter:blur(18px) saturate(1.1);border:1px solid var(--stroke);border-radius:var(--radius-xl);box-shadow:var(--shadow)
}
#leftPanel{display:flex;flex-direction:column;gap:12px}
#rightPanel{min-width:0}

/* BLOCKS */
.block{
  background:linear-gradient(180deg, rgba(9,12,22,.76), rgba(8,11,19,.9));
  border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:15px;box-shadow:var(--shadow-soft);margin-bottom:12px
}
.blockTitle{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:.72rem;
  letter-spacing:.16em;font-weight:950;color:#d8e0ff;text-transform:uppercase
}
.badge{
  font-size:.66rem;color:#b2badc;font-weight:800;letter-spacing:.08em;text-transform:none;padding:4px 8px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);white-space:nowrap
}

/* PITCH CARD */
#pitchCard{
  padding:18px;border-radius:var(--radius-lg);margin-bottom:12px;
  background:linear-gradient(180deg, rgba(12,18,36,.95), rgba(10,14,28,.95));border:1px solid var(--stroke);box-shadow:var(--shadow-soft)
}
#noteDisplay{font-size:clamp(2.4rem,4vw,3.1rem);line-height:1;font-weight:950;color:#ffbfd0;letter-spacing:.08em}
#freqDisplay{margin-top:6px;color:var(--muted);font-size:.9rem}
#centsWrap{margin-top:11px}
#centsBar{height:8px;border-radius:999px;background:#0a0d18;border:1px solid var(--stroke);overflow:hidden;position:relative}
#centsFill{position:absolute;left:50%;top:0;height:100%;width:0%;background:linear-gradient(90deg,var(--good),var(--accent2));transition:width .08s,left .08s,background .1s}
#centsLabel{margin-top:5px;color:var(--text);font-size:.8rem}

/* TRACKS */
#trackRack{display:flex;flex-direction:column;gap:12px}
.trackCard{
  border:1px solid var(--stroke);border-radius:22px;padding:14px;
  background:linear-gradient(180deg, rgba(12,16,28,.82), rgba(8,10,18,.94));
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s
}
.trackCard:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.14)}
.trackCard.active{border-color:rgba(255,92,138,.6);box-shadow:0 0 0 1px rgba(255,92,138,.1) inset, var(--shadow-soft)}
.trackCard.recording{border-color:rgba(255,101,122,.88);box-shadow:0 0 0 1px rgba(255,101,122,.18) inset, var(--shadow-soft)}
.trackTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.trackTitle{min-width:0;flex:1}
.trackTitle input{
  width:100%;border:none;outline:none;background:transparent;color:#fff;font-weight:950;font-size:1rem;letter-spacing:.03em;padding:0;margin:0 0 5px 0;
  font-variant-numeric:tabular-nums
}
.trackMeta{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trackBtns{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.trackMiniBtn{
  min-height:34px;padding:7px 11px;background:rgba(255,255,255,.05);color:#d8e2ff;font-size:.69rem;letter-spacing:.08em
}
.trackMiniBtn.good{background:rgba(49,223,162,.14);border-color:rgba(49,223,162,.22)}
.trackMiniBtn.danger{background:rgba(255,95,114,.14);border-color:rgba(255,95,114,.22)}
.trackWaveWrap{
  position:relative;height:84px;border-radius:16px;overflow:hidden;margin-bottom:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.trackMiniBtn.on{background:linear-gradient(135deg,var(--accent2),#ff8a5c);border-color:transparent;color:#fff}
.trackCard.muted{border-color:rgba(255,204,102,.42);box-shadow:0 0 0 1px rgba(255,204,102,.08) inset, var(--shadow-soft)}
.trackCard.soloed{border-color:rgba(49,223,162,.42);box-shadow:0 0 0 1px rgba(49,223,162,.08) inset, var(--shadow-soft)}
.trackCard.muted .trackMeta{color:#f0d7a3}
.trackCard.soloed .trackMeta{color:#a8f7d9}
.trackWaveWrap:hover{border-color:rgba(255,255,255,.12)}
.trackWaveWrap canvas{width:100%;height:100%;display:block}
.trackWavePlayhead{position:absolute;top:0;left:0;width:2px;height:100%;background:rgba(49,223,162,.9);pointer-events:none;display:none}
.trackFooter{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.trackVolWrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.trackVolWrap label{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
.trackVolWrap input[type="range"]{width:100%}
.smallBtn{padding:8px 12px;font-size:.72rem}
.danger{border-color:rgba(255,95,114,.25)}
.good{border-color:rgba(49,223,162,.25)}

/* TOGGLES / SELECTS / KNOBS */
.toggleRow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.toggle{
  padding:8px 12px;background:#1b2340;color:#b4bddc;border:1px solid var(--stroke);border-radius:999px;
  font-size:.74rem;font-weight:850;cursor:pointer;letter-spacing:.04em
}
.toggle.on{background:linear-gradient(135deg,var(--accent2),#ff8a5c);color:#fff;border-color:transparent}
.selectRow{display:flex;align-items:center;gap:10px;margin-top:10px}
.selectRow label{width:56px;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.selectRow select{
  flex:1;padding:9px 12px;border-radius:14px;
  background:linear-gradient(180deg,rgba(17,21,40,.98),rgba(10,13,24,.98));
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
}
.selectRow select:focus{
  outline:none;
  border-color:rgba(255,77,125,.55);
  box-shadow:0 0 0 3px rgba(255,77,125,.12);
}
.selectRow option{
  background:#101528;
  color:#eef2ff;
}
select option{background:#101528;color:#eef2ff}
.knobGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:10px 6px}
.knobWrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.knobWrap label{font-size:.66rem;color:var(--muted);text-align:center;line-height:1.15;white-space:nowrap}
canvas.knob{cursor:pointer;touch-action:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}

.effectGrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding-bottom:16px
}
.effectBlock{
  background:linear-gradient(180deg, rgba(9,12,22,.76), rgba(8,11,19,.92));border:1px solid var(--stroke);
  border-radius:20px;padding:14px;position:relative;overflow:hidden;box-shadow:var(--shadow-soft)
}
.effectBlock.on{border-color:rgba(255,92,138,.68);box-shadow:0 0 0 1px rgba(255,92,138,.08) inset, var(--shadow-soft)}
.effectHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.effectName{font-size:.76rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:#d9e1ff}
.effectBlock.on .effectName{color:#ffd6df}
.effectToggle{
  width:38px;height:22px;border-radius:999px;background:#232844;position:relative;border:1px solid var(--stroke);cursor:pointer;flex:none
}
.effectToggle::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#8a93b6;transition:left .14s,background .14s
}
.effectToggle.on{background:var(--accent2);border-color:transparent}
.effectToggle.on::after{left:18px;background:#fff}
.fxControls{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:10px 6px}

/* METERS / STATUS */
#meters{display:flex;align-items:center;gap:7px;margin-left:6px;flex:none}
.meterWrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.meterBar{width:10px;height:34px;border-radius:999px;background:#0a0d18;border:1px solid var(--stroke);overflow:hidden;display:flex;align-items:flex-end}
.meterFill{width:100%;height:0%;background:linear-gradient(0deg,var(--good),#85ffcf);border-radius:999px;transition:height .04s}
.meterLbl{font-size:.62rem;color:var(--muted);letter-spacing:.08em}
#statusDot{width:11px;height:11px;border-radius:50%;background:#334;flex:none}
#statusDot.active{background:var(--good);box-shadow:0 0 12px rgba(49,223,162,.5)}

/* SCROLLBAR */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2a3256;border-radius:999px}
::-webkit-scrollbar-track{background:transparent}


/* MIXER OVERLAY */
.mixerBackdrop{
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(3,6,12,.74); backdrop-filter:blur(14px) saturate(1.06);
  padding:clamp(8px, 2vw, 18px);
  touch-action:manipulation;
  overscroll-behavior:contain;
}
.mixerBackdrop.visible{display:flex}
.mixerPanel{
  width:min(1120px, 100%); max-height:min(92dvh, 940px); overflow:auto;
  background:linear-gradient(180deg, rgba(16,21,38,.98), rgba(8,12,22,.99));
  border:1px solid var(--stroke-strong); border-radius:30px; box-shadow:0 32px 90px rgba(0,0,0,.52);
  padding:18px; display:flex; flex-direction:column; gap:14px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0;
}
.mixerPanel::-webkit-scrollbar{width:10px;height:10px}
.mixerHead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:2; padding:4px 0 10px;
  background:linear-gradient(180deg, rgba(16,21,38,.99), rgba(16,21,38,.92) 70%, rgba(16,21,38,0));
  backdrop-filter:blur(10px);
}
.mixerTitle{font-size:1.06rem; font-weight:950; letter-spacing:.14em; text-transform:uppercase}
.mixerSub{margin-top:6px; color:var(--muted); font-size:.84rem; line-height:1.5; max-width:760px}
.mixerStatus{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  padding:14px; border:1px solid var(--stroke); border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.mixerStat{
  min-width:0; padding:12px 12px 11px; border-radius:18px; border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.mixerStatLabel{display:block; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:900}
.mixerStatValue{display:block; margin-top:7px; font-size:.92rem; font-weight:900; color:#eef2ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mixerSummary{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.mixerSummaryCard{
  padding:14px; border:1px solid var(--stroke); border-radius:20px; background:rgba(255,255,255,.03);
}
.mixerSummaryHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.mixerSummaryTitle{font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:#cfd7ff; font-weight:950}
.mixerSummaryHint{font-size:.72rem; color:var(--muted)}
.mixerSummaryRow{
  display:grid; grid-template-columns:80px minmax(140px,1fr) auto auto auto; gap:10px; align-items:center;
}
.mixerLabel{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:#cfd7ff; font-weight:900;
}
.mixerTracks{
  display:grid; grid-template-columns:1fr; gap:10px;
  min-height:0;
}
.mixerTrack{
  display:grid; grid-template-columns:minmax(170px, 1.25fr) minmax(170px, 1fr) auto auto auto; gap:10px; align-items:center;
  padding:13px 14px; border:1px solid var(--stroke); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}
.mixerTrack:hover{border-color:rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025))}
.mixerTrack.active{border-color:rgba(255,92,138,.50); box-shadow:0 0 0 1px rgba(255,92,138,.08) inset}
.mixerTrack.muted{border-color:rgba(255,204,102,.38)}
.mixerTrack.soloed{border-color:rgba(49,223,162,.38)}
.mixerTrackName{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:900; color:#eef2ff;
}
.mixerTrackMeta{font-size:.72rem; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mixerTrackInfo{min-width:0}
.mixerSlider{width:100%; accent-color:var(--accent2);}
.mixerTrackBtns{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.mixerTrackBtns .smallBtn{min-width:72px}
.mixerFooter{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding-top:4px;}
.mixerCloseBtn{flex:none}
@media(max-width:980px){
  .mixerStatus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mixerSummary{grid-template-columns:1fr}
}
@media(max-width:760px){
  .mixerSummaryRow, .mixerTrack{grid-template-columns:1fr; align-items:stretch}
  .mixerTrackBtns, .mixerSummaryRow{justify-content:stretch}
  .mixerTrackBtns .smallBtn, .mixerSummaryRow .smallBtn{width:100%}
  .mixerStatus{grid-template-columns:1fr}
}

/* RESPONSIVE */
@media(max-width:1100px){
  #content{grid-template-columns:1fr;flex:none;overflow:visible}
  #leftPanel{max-height:none}
  .panel{overflow:visible}
}
@media(max-width:760px){
  #topBar{flex-wrap:wrap;height:auto;padding:10px 10px;gap:8px}
  #title{width:100%;text-align:center;font-size:.79rem;justify-content:center}
  .transport{margin-left:0;flex-wrap:wrap;justify-content:center;width:100%}
  #meters{margin-left:auto}
  #presetSelect{max-width:100%;flex:1 1 100%;min-height:44px}
  #workspaceBar{flex-direction:column;align-items:flex-start}
  .workspaceChips{justify-content:flex-start}
  #beatBar .beatVol{width:100%;justify-content:flex-start}
  #beatVol{width:100%}
  .beatBtn,.topBtn,.tBtn,.smallBtn,.trackMiniBtn{min-height:44px}
}

@media(max-width:760px){
  .mixerBackdrop{
    align-items:stretch;
    justify-content:stretch;
    padding:0;
  }
  .mixerPanel{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:none;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .mixerHead{
    padding-top:calc(4px + env(safe-area-inset-top));
    gap:8px;
  }
  .mixerTitle{font-size:.96rem; line-height:1.15}
  .mixerSub{font-size:.76rem; line-height:1.35; max-width:none}
  .mixerStatus{grid-template-columns:1fr 1fr; padding:10px; gap:8px}
  .mixerSummary{grid-template-columns:1fr}
  .mixerSummaryCard{padding:12px}
  .mixerSummaryRow, .mixerTrack{grid-template-columns:1fr; align-items:stretch}
  .mixerSummaryRow{gap:8px}
  .mixerTrackBtns{justify-content:stretch}
  .mixerTrackBtns .smallBtn, .mixerSummaryRow .smallBtn{width:100%}
  .mixerTrackName{white-space:normal}
  .mixerTrackMeta{white-space:normal}
}
@media(max-width:420px){
  .mixerStatus{grid-template-columns:1fr}
  .mixerPanel{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .mixerTitle{font-size:.9rem}
}
@media(max-width:560px){
  .beatBtn,.topBtn,.tBtn{width:100%;justify-content:center}
  .beatBtns,.transport{width:100%}
  #recBar{align-items:flex-start}
  #playTimeLabel{margin-left:auto}
}