* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0a0a; color:#e0e0e0; height:100vh; overflow:hidden; font-family:system-ui,-apple-system,sans-serif; font-size:11px; }
#app { display:flex; flex-direction:column; height:100vh; }
#app-header { background:#1a1a1a; padding:4px 12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #2a2a2a; height:32px; flex-shrink:0; }
.app-title h1 { font-size:14px; font-weight:700; color:#fff; }
.app-title .version { font-size:8px; color:#666; background:#2a2a2a; padding:1px 6px; margin-left:6px; }
#status-bar { font-size:9px; color:#666; }
#app-content { display:flex; flex:1; overflow:hidden; gap:3px; padding:3px; min-height:0; }

.main-content { display:flex; flex-direction:column; flex:2; gap:2px; min-width:0; max-width:65%; }
.decks-row { display:flex; gap:3px; flex:1; min-height:0; }
.deck { flex:1; background:#141414; display:flex; flex-direction:column; overflow:hidden; border:1px solid #2a2a2a; min-width:0; }
.deck-header { background:#1a1a1a; padding:2px 8px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #2a2a2a; height:22px; flex-shrink:0; }
.deck-header h2 { font-size:10px; font-weight:700; color:#fff; letter-spacing:2px; }
.deck-status { font-size:8px; color:#666; }
.deck-content { flex:1; padding:2px 4px; display:flex; flex-direction:column; gap:2px; overflow:hidden; min-height:0; }
.track-info { display:flex; justify-content:space-between; align-items:center; min-height:16px; padding:1px 0; }
.track-title { font-size:9px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.bpm-display { font-size:7px; color:#888; font-family:monospace; text-align:right; margin-left:4px; flex-shrink:0; }
.bpm-display .bpm-value { color:#4caf50; font-weight:700; font-size:10px; }
.bpm-display .bpm-label { font-size:6px; color:#666; text-transform:uppercase; letter-spacing:1px; margin-right:2px; }
.waveform-container { background:#0a0a0a; height:28px; overflow:hidden; border:1px solid #1a1a1a; flex-shrink:0; }
.waveform-container canvas { width:100%; height:100%; }
.transport-controls { display:flex; gap:2px; justify-content:center; flex-shrink:0; }
.transport-controls button { padding:1px 10px; border:none; font-size:10px; font-weight:600; cursor:pointer; background:#2a2a2a; color:#fff; min-width:28px; border-radius:2px; }
.transport-controls button:hover { background:#3a3a3a; }
.btn-play { background:#1a6b30 !important; }
.btn-play:hover { background:#228b3c !important; }
.btn-pause { background:#8a6d00 !important; color:#fff !important; }
.btn-pause:hover { background:#a88500 !important; }
.btn-reset { background:#6b1a1a !important; }
.btn-reset:hover { background:#8b2222 !important; }
.time-display { display:flex; justify-content:center; gap:3px; font-size:9px; color:#888; flex-shrink:0; }
.seek-control, .volume-control { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.seek-control input[type="range"], .volume-control input[type="range"] { flex:1; height:3px; -webkit-appearance:none; background:#2a2a2a; outline:none; min-height:8px; border-radius:2px; }
.seek-control input[type="range"]::-webkit-slider-thumb, .volume-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:8px; height:8px; background:#fff; cursor:pointer; border-radius:2px; }
.volume-control label { font-size:6px; color:#666; min-width:16px; font-weight:700; letter-spacing:1px; }
.vu-meter { height:8px; background:#0a0a0a; overflow:hidden; border:1px solid #1a1a1a; flex-shrink:0; border-radius:2px; }
.vu-meter canvas { width:100%; height:100%; }

.section-separator { height:2px; background:linear-gradient(to right,transparent,#2a2a2a,#3a3a3a,#2a2a2a,transparent); flex-shrink:0; margin:0 2px; }

.crossfader-row { flex-shrink:0; padding:2px 20px; background:#141414; border:1px solid #2a2a2a; }
.crossfader { max-width:350px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; }
.crossfader label { font-size:8px; color:#666; letter-spacing:2px; text-transform:uppercase; font-weight:700; }
.crossfader-slider { position:relative; width:100%; height:30px; flex-shrink:0; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; outline:none; }
.crossfader-slider::before { content:""; position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); background:linear-gradient(to right,#1a6b30 0%,#1a6b30 50%,#6b1a1a 50%,#6b1a1a 100%); }
.crossfader-slider:focus-visible { outline:1px solid #888; outline-offset:2px; }
.crossfader-thumb { position:absolute; left:50%; top:50%; width:14px; height:14px; box-sizing:border-box; transform:translate(-50%,-50%); background:#fff; border:2px solid #0a0a0a; border-radius:2px; pointer-events:none; }
.crossfader-slider:active .crossfader-thumb { background:#ddd; }
.crossfader-labels { display:flex; justify-content:space-between; width:100%; font-size:8px; color:#444; font-weight:700; }
.crossfader-labels span:first-child { color:#1a6b30; }
.crossfader-labels span:last-child { color:#6b1a1a; }
.crossfader-labels span:nth-child(2) { color:#666; }

.soundfx-row { flex-shrink:0; background:#141414; border:1px solid #2a2a2a; padding:3px 6px; min-height:70px; display:flex; flex-direction:column; gap:2px; }
.soundfx-header { display:flex; justify-content:space-between; align-items:center; padding:1px 4px; flex-shrink:0; }
.soundfx-header span:first-child { font-size:9px; color:#888; font-weight:600; }
.soundfx-side-selector { display:flex; gap:2px; }
.soundfx-side-btn { padding:1px 6px; background:#2a2a2a; color:#888; border:none; font-size:7px; cursor:pointer; border-radius:2px; }
.soundfx-side-btn.active { background:#1a6b30; color:#fff; }
.soundfx-shortcuts { font-size:6px; color:#444; letter-spacing:0.5px; font-family:monospace; }
.soundfx-pads { flex:1; padding:2px; }
.soundfx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; height:100%; }
.sfx-pad { background:#1a1a1a; border:1px solid #2a2a2a; padding:4px 2px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:all 0.1s; position:relative; min-height:28px; border-radius:2px; }
.sfx-pad:hover { background:#2a2a2a; }
.sfx-pad.loaded { border-color:#1a6b30; }
.sfx-pad-key { font-size:7px; font-weight:700; color:#444; font-family:monospace; position:absolute; top:1px; left:3px; }
.sfx-pad-name { font-size:7px; color:#888; text-align:center; word-break:break-all; max-width:90%; line-height:1.1; }
.sfx-pad.loaded .sfx-pad-name { color:#fff; }
.sfx-pad:active { transform:scale(0.9); }
.soundfx-controls { display:flex; gap:3px; padding:2px; border-top:1px solid #2a2a2a; flex-shrink:0; }
.sfx-stop-btn { padding:2px 8px; background:#6b1a1a; color:#fff; border:none; font-size:8px; cursor:pointer; border-radius:2px; }
.sfx-stop-btn:hover { background:#8b2222; }
.sfx-upload { padding:2px 8px; background:#1a6b30; color:#fff; border:none; font-size:8px; cursor:pointer; border-radius:2px; display:inline-flex; align-items:center; gap:4px; }
.sfx-upload:hover { background:#228b3c; }
.sfx-upload input[type="file"] { display:none; }

.playlist-container { background:#141414; border:1px solid #2a2a2a; display:flex; flex-direction:column; flex:1; min-width:150px; overflow:hidden; }
.playlist-header { padding:2px 6px; background:#1a1a1a; border-bottom:1px solid #2a2a2a; display:flex; flex-wrap:wrap; gap:2px; align-items:center; flex-shrink:0; height:28px; }
.playlist-header h3 { font-size:10px; font-weight:600; color:#fff; }
.playlist-controls { display:flex; gap:2px; margin-left:auto; }
.playlist-controls button { padding:1px 6px; border:none; font-size:8px; cursor:pointer; background:#2a2a2a; color:#fff; border-radius:2px; }
.playlist-controls button:hover { background:#3a3a3a; }
.playlist-search { width:100%; }
.playlist-search input { width:100%; padding:1px 4px; background:#0a0a0a; border:1px solid #2a2a2a; color:#fff; font-size:8px; border-radius:2px; }
.playlist-content { flex:1; overflow:auto; padding:2px; }
#playlist-table { width:100%; border-collapse:collapse; font-size:8px; table-layout:fixed; }
#playlist-table thead { position:sticky; top:0; background:#1a1a1a; z-index:1; }
#playlist-table th { text-align:left; padding:2px 4px; color:#666; font-weight:600; border-bottom:1px solid #2a2a2a; font-size:7px; }
#playlist-table th:nth-child(1) { width:20px; }
#playlist-table th:nth-child(2) { width:auto; }
#playlist-table th:nth-child(3) { width:70px; }
#playlist-table th:nth-child(4) { width:70px; }
#playlist-table td { padding:2px 4px; border-bottom:1px solid #1a1a1a; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-name { color:#fff; font-weight:500; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-actions { display:flex; gap:2px; }
.track-actions button { padding:1px 4px !important; font-size:6px !important; border:none; cursor:pointer; font-weight:600; min-width:22px; border-radius:2px; }
.btn-load-a { background:#1a6b30; color:#fff; }
.btn-load-a:hover { background:#228b3c; }
.btn-load-b { background:#6b1a1a; color:#fff; }
.btn-load-b:hover { background:#8b2222; }
.loading { text-align:center; color:#444; padding:10px; font-size:9px; }
#notification-container { position:fixed; top:36px; right:10px; z-index:9999; display:flex; flex-direction:column; gap:4px; max-width:300px; }
.status-active { color:#4caf50; }
.status-inactive { color:#666; }

@media (max-width:1024px) { .main-content { max-width:100%; } .decks-row { flex-direction:column; max-height:60vh; } .playlist-container { flex:1; min-height:100px; } }
@media (max-width:768px) { .soundfx-grid { grid-template-columns:repeat(4,1fr); } }