:root {
  --bg:#101114;
  --panel:#191b20;
  --panel2:#22252c;
  --line:#30343c;
  --text:#f0f1f3;
  --muted:#9298a2;
  --accent:#b6f36b;
  --accentText:#11170d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
.topbar{height:64px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--line);background:#15171b;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:900;letter-spacing:2px;font-size:19px}
.brand-icon{color:var(--accent);font-size:25px}
.brand small{font-size:9px;color:var(--muted)}
.top-status{margin-left:auto;font-size:10px;color:var(--muted);letter-spacing:1px}
.top-status i{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:7px}
.icon-button{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:9px 13px;border-radius:7px}
.workstation{width:min(1500px,96%);margin:28px auto}
.intro{display:flex;justify-content:space-between;align-items:center;margin:0 4px 22px;gap:20px}
.eyebrow{font-size:10px;color:var(--accent);letter-spacing:2px;font-weight:800}
.intro h1{font-size:clamp(25px,4vw,38px);margin:8px 0}
.intro h1 span{color:var(--accent)}
.intro p{color:var(--muted);margin:0;font-size:13px}
.upload-button,.small-upload{background:var(--accent);color:var(--accentText);padding:13px 17px;border-radius:7px;font-size:11px;font-weight:900;cursor:pointer;white-space:nowrap}
.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.deck,.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.deck-header,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.deck-header>div{display:flex;align-items:center;gap:10px}
.deck-letter{background:var(--accent);color:var(--accentText);font-weight:900;border-radius:6px;padding:6px 10px}
.deck-name{font-size:12px;letter-spacing:2px;font-weight:900}
.status,.muted{font-size:10px;letter-spacing:1px;color:var(--muted)}
.status.playing{color:var(--accent)}
.track-info{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 12px}
.track-info h2{font-size:15px;margin:0 0 5px;overflow-wrap:anywhere}
.track-info p{font-size:11px;color:var(--muted);margin:0}
.time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent)}
.disc-area{display:flex;align-items:center;gap:25px;min-height:165px;background:#111318;border-radius:9px;padding:15px}
.vinyl{width:130px;height:130px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#282b31 0 2px,#17191e 3px 5px);border:5px solid #08090b;box-shadow:0 0 20px #000}
.vinyl-center{width:43px;height:43px;border-radius:50%;background:var(--accent);color:#111;display:grid;place-items:center;font-weight:900}
.vinyl.playing{animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.visualizer-wrap{flex:1;min-width:0}
.visualizer{width:100%;height:100px;display:block}
.wave-label{font-size:9px;letter-spacing:1px;color:var(--muted);text-align:center}
.timeline{display:block;width:100%;height:42px;margin-top:14px;background:#111318;border-radius:5px;cursor:crosshair;touch-action:pan-y}
.timeline-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;margin:4px 0 12px}
.transport{display:flex;justify-content:center;gap:8px}
.transport button,.playlist-actions button,.subtle-button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-size:10px;font-weight:800}
.transport .play-button{background:var(--accent);color:var(--accentText);min-width:55px}
.deck-sliders{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.deck-sliders label,.eq label,.fx-grid label,.master-side label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);letter-spacing:1px}
output{color:var(--accent);font-size:10px}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.eq{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px;padding:15px;background:#14161a;border-radius:8px}
.deck-footer{display:flex;justify-content:space-between;gap:8px;margin-top:15px}
.deck-footer button:first-child{flex:1}
.subtle-button{background:transparent;color:var(--muted)}
.panel{margin-top:18px}
.section-heading h2{font-size:12px;letter-spacing:2px;margin:0}
.live-tag{font-size:10px;color:var(--accent)}
.mixer-layout{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:35px;padding:25px 8%}
.master-side{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:14px}
.meter{height:100px;background:#0c0e11;border:1px solid var(--line);display:flex;align-items:end;border-radius:4px;overflow:hidden}
.meter div{height:0;width:100%;background:linear-gradient(to top,#76c64b,#d9e96c);transition:height .1s}
.master-side label{font-size:10px}
.crossfader>div{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}
.crossfader strong{letter-spacing:2px;color:var(--text)}
.crossfader input{margin:18px 0}
.cross-hints{font-size:9px!important;letter-spacing:1px}
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:22px 5% 10px}
.hint{font-size:10px;color:var(--muted);margin:12px 0 0}
.library,.playlist{padding:20px}
.small-upload{padding:9px 12px}
.track-list{margin-top:15px}
.track-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 8px;border-top:1px solid var(--line)}
.track-index{color:var(--muted);font-size:11px;text-align:center}
.track-title{font-size:12px;overflow-wrap:anywhere}
.track-meta{font-size:10px;color:var(--muted);margin-top:4px}
.track-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.track-actions button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:7px 9px;font-size:9px}
.track-actions button:hover,.transport button:hover{border-color:var(--accent)}
.empty-state{padding:25px;text-align:center;color:var(--muted);font-size:12px}
.playlist-actions{display:flex;gap:7px}
.playlist-actions button:first-child{background:var(--accent);color:var(--accentText);border-color:var(--accent)}
.queue-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:15px;color:var(--muted);font-size:10px}
select{background:#111318;color:var(--text);border:1px solid var(--line);padding:9px;border-radius:6px;max-width:220px}
footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:25px 4px;color:var(--muted);font-size:9px;letter-spacing:1px}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:var(--accent);color:#111;padding:12px 18px;border-radius:7px;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.2s;z-index:5}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.deck-grid{grid-template-columns:1fr}.mixer-layout{padding:20px 2%}}
@media(max-width:520px){.topbar{padding:0 12px}.brand small{display:none}.workstation{width:94%}.deck{padding:13px}.disc-area{gap:12px}.vinyl{width:105px;height:105px}.deck-sliders{grid-template-columns:1fr}.mixer-layout{grid-template-columns:1fr}.master-side{max-width:220px}.fx-grid{grid-template-columns:1fr}.track-row{grid-template-columns:25px minmax(0,1fr)}.track-actions{grid-column:2;justify-content:flex-start}.intro{align-items:flex-start;flex-direction:column}}