:root {
  --bg: #0a0a0f; --bg2: #0f0f1a; --bg3: #1a1a2e;
  --cyan: #00f0ff; --magenta: #ff00aa; --green: #00ff88; --amber: #ffaa00; --red: #ff3355;
  --text: #e0e0ee; --text-dim: #667;
  --glow-cyan: 0 0 12px #00f0ff66, 0 0 30px #00f0ff22;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background: var(--bg); color: var(--text); font-family: 'JetBrains Mono', monospace; overflow: hidden; height: 100vh; width: 100vw; }
#app { display:flex; flex-direction:column; height:100vh; width:100vw; }

#header { display:flex; justify-content:space-between; align-items:center; padding:8px 16px;
  background: linear-gradient(180deg, #12122a 0%, var(--bg) 100%); border-bottom:1px solid #1a1a3a; flex-shrink:0; }
#header-left { display:flex; flex-direction:column; gap:2px; }
#title { font-family:'Orbitron',sans-serif; font-weight:900; font-size:20px; letter-spacing:3px;
  color: var(--cyan); text-shadow: 0 0 12px #00f0ff88, 2px 0 0 #ff00aa66; animation: titlePulse 3s ease-in-out infinite;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#saw-badge { font-size:10px; letter-spacing:2px; color: var(--amber); border:1px solid var(--amber);
  padding:3px 8px; border-radius:4px; text-shadow:0 0 8px #ffaa00; box-shadow:0 0 10px #ffaa0055;
  animation: sawBuzz 0.18s steps(2) infinite; }
@keyframes sawBuzz { 0%{transform:translateX(0)} 100%{transform:translateX(0.6px)} }
@keyframes titlePulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.3)} }
#subtitle { font-size:10px; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; }

#fps-counter { font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; padding:4px 10px; border-radius:4px;
  background:#0a0a1a; border:1px solid #1a1a3a; color:var(--green); min-width:80px; text-align:center; }
#fps-counter.warn { color:var(--amber); } #fps-counter.bad { color:var(--red); }

#controls, #saw-controls { display:flex; align-items:center; gap:12px; padding:6px 16px; background:var(--bg2);
  border-bottom:1px solid #1a1a3a; flex-shrink:0; flex-wrap:wrap; }
#saw-controls { background: linear-gradient(90deg, #14100a, var(--bg2)); justify-content:center; gap:20px; }
#controls-left { display:flex; gap:6px; align-items:center; }
#controls-center { display:flex; gap:16px; align-items:center; flex:1; justify-content:center; flex-wrap:wrap; }
#controls-right { display:flex; gap:6px; }

#btn-load { position:relative; background:linear-gradient(135deg,#1a1a3a,#2a1a3a); border:1px solid var(--cyan); color:var(--cyan);
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; padding:8px 16px; border-radius:6px; cursor:pointer;
  letter-spacing:1px; transition:all .2s; box-shadow:var(--glow-cyan); overflow:hidden; }
#btn-load:hover { box-shadow:0 0 20px #00f0ff66, 0 0 40px #00f0ff33; }
#btn-load input { position:absolute; inset:0; opacity:0; cursor:pointer; }

.ctrl-btn { width:36px; height:36px; border-radius:6px; border:1px solid #2a2a4a; background:var(--bg3); color:var(--text);
  font-size:14px; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.ctrl-btn:hover:not(:disabled) { border-color:var(--cyan); box-shadow:var(--glow-cyan); color:var(--cyan); }
.ctrl-btn:disabled { opacity:.3; cursor:default; }

.slider-group { display:flex; align-items:center; gap:8px; }
.slider-group label { font-size:9px; letter-spacing:2px; color:var(--text-dim); font-weight:700; }
.slider-group input[type="range"] { -webkit-appearance:none; appearance:none; width:90px; height:4px; border-radius:2px; background:var(--bg3); outline:none; }
.slider-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--cyan); cursor:pointer; box-shadow:0 0 8px var(--cyan); }
.slider-group input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--cyan); border:none; }
#saw-controls input[type="range"]::-webkit-slider-thumb { background:var(--amber); box-shadow:0 0 8px var(--amber); }
.slider-group > span { font-size:11px; color:var(--cyan); min-width:44px; text-align:right; }
#saw-controls .slider-group > span { color:var(--amber); }
select { background:var(--bg3); color:var(--cyan); border:1px solid #2a2a4a; border-radius:4px; padding:4px 6px;
  font-family:'JetBrains Mono',monospace; font-size:11px; }

.seg { display:flex; border:1px solid #2a2a4a; border-radius:5px; overflow:hidden; }
.seg button { background:transparent; border:none; border-right:1px solid #2a2a4a; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 8px; cursor:pointer; transition:all .15s; }
.seg button:last-child { border-right:none; }
.seg button:hover { color:var(--text); background:#1a1a30; }
.seg button.active { color:var(--bg); background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
#presets button.active { background:var(--amber); box-shadow:0 0 10px var(--amber); }

#progress-bar-container { padding:4px 16px 6px; background:var(--bg); flex-shrink:0; }
#progress-bar { height:6px; background:var(--bg3); border-radius:3px; cursor:pointer; overflow:hidden; }
#progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--amber)); }
#time-display { display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); margin-top:2px; }

#main-area { flex:1; display:flex; min-height:0; position:relative; }
#canvas-container { flex:1; position:relative; min-width:0; }
canvas { display:block; width:100%; height:100%; }

#stats-overlay { position:absolute; top:8px; left:8px; display:flex; gap:14px; background:#0a0a0fcc; border:1px solid #1a1a3a;
  border-radius:6px; padding:6px 12px; pointer-events:none; flex-wrap:wrap; }
#stats-overlay div { display:flex; flex-direction:column; align-items:center; gap:1px; }
.stat-label { font-size:8px; color:var(--text-dim); letter-spacing:1px; }
#stats-overlay span:not(.stat-label) { font-size:13px; font-weight:700; color:var(--cyan); }

#drop-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0a0a0fdd; z-index:10; transition:opacity .3s; }
#drop-overlay.hidden { opacity:0; pointer-events:none; }
#drop-content { text-align:center; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
#drop-icon { font-size:64px; margin-bottom:16px; }
#drop-text { font-family:'Orbitron',sans-serif; font-size:16px; color:var(--cyan); letter-spacing:2px; }
#drop-text span { font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }

#sidebar { width:280px; background:var(--bg2); border-left:1px solid #1a1a3a; padding:12px; overflow-y:auto; flex-shrink:0; transition:width .3s, padding .3s, opacity .3s; }
#sidebar.hidden { width:0; padding:0; opacity:0; overflow:hidden; }
#sidebar h3 { font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:2px; color:var(--magenta); margin-bottom:4px; }
.saw-joke { font-size:9px; color:var(--amber); margin-bottom:10px; font-style:italic; }
#sidebar h4 { font-size:10px; letter-spacing:2px; color:var(--text-dim); margin:12px 0 6px; }
.sidebar-empty { font-size:11px; color:var(--text-dim); }

.track-item { padding:5px 0; border-bottom:1px solid #1a1a2a; font-size:10px; }
.track-row { display:flex; align-items:center; gap:6px; }
.track-row.sub { justify-content:space-between; font-size:9px; color:var(--text-dim); margin-top:3px; padding-left:16px; }
.oct { display:flex; align-items:center; gap:4px; }
.oct b { color:var(--amber); min-width:18px; text-align:center; }
.track-color { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.track-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-notes { color:var(--text-dim); font-size:9px; }
.track-btn { font-size:8px; padding:2px 5px; border:1px solid #2a2a4a; background:transparent; color:var(--text-dim); border-radius:3px; cursor:pointer; font-family:'JetBrains Mono',monospace; }
.track-btn.active { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 6px #00f0ff33; }
.track-btn:hover { border-color:var(--cyan); }

#channel-colors { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.ch-item { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--text-dim); }
.ch-dot { width:8px; height:8px; border-radius:2px; }

#footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 16px; font-size:10px; color:var(--text-dim);
  background:var(--bg2); border-top:1px solid #1a1a3a; flex-shrink:0; }
#footer a { color:var(--magenta); text-decoration:none; white-space:nowrap; }
#footer a:hover { text-decoration:underline; }

body.drag-over #drop-overlay { background:#0a0a2fdd; border:2px dashed var(--cyan); }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--bg3); border-radius:3px; }

@media (max-width: 700px) {
  #controls-center { justify-content:flex-start; gap:10px; }
  .slider-group input[type="range"] { width:70px; }
  #saw-controls { gap:10px; justify-content:flex-start; }
  #stats-overlay { gap:8px; padding:4px 8px; }
  #stats-overlay span:not(.stat-label) { font-size:10px; }
  #sidebar { width:220px; }
  #title { font-size:14px; }
  #footer span { display:none; }
}