* { box-sizing: border-box; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #1a1a2e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00ffff44; }

/* Glitch title animation */
@keyframes glitch1 {
  0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  92% { clip-path: inset(20% 0 40% 0); transform: translate(-4px, -2px); }
  94% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 2px); }
  96% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 1px); }
  98% { clip-path: inset(70% 0 5% 0); transform: translate(3px, -1px); }
}
@keyframes glitch2 {
  0%, 88%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
  90% { clip-path: inset(50% 0 20% 0); transform: translate(5px, 3px); opacity: 1; }
  93% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, -2px); opacity: 1; }
  95% { clip-path: inset(40% 0 30% 0); transform: translate(2px, 1px); opacity: 0.8; }
  97% { clip-path: inset(80% 0 5% 0); transform: translate(-4px, 2px); opacity: 1; }
}
@keyframes glitchIntense1 {
  0%, 70%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  72% { clip-path: inset(20% 0 40% 0); transform: translate(-6px, -3px); }
  75% { clip-path: inset(60% 0 10% 0); transform: translate(6px, 3px); }
  78% { clip-path: inset(5% 0 80% 0); transform: translate(-8px, 2px); }
  81% { clip-path: inset(30% 0 50% 0); transform: translate(4px, -4px); }
  84% { clip-path: inset(70% 0 5% 0); transform: translate(7px, -1px); }
  87% { clip-path: inset(15% 0 60% 0); transform: translate(-5px, 3px); }
  90% { clip-path: inset(50% 0 20% 0); transform: translate(3px, -2px); }
}
@keyframes glitchIntense2 {
  0%, 65%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
  68% { clip-path: inset(40% 0 30% 0); transform: translate(8px, 4px); opacity: 1; }
  72% { clip-path: inset(10% 0 60% 0); transform: translate(-6px, -3px); opacity: 1; }
  76% { clip-path: inset(70% 0 10% 0); transform: translate(5px, 2px); opacity: 0.8; }
  80% { clip-path: inset(25% 0 45% 0); transform: translate(-7px, 3px); opacity: 1; }
  84% { clip-path: inset(55% 0 15% 0); transform: translate(4px, -5px); opacity: 1; }
  88% { clip-path: inset(35% 0 40% 0); transform: translate(-3px, 2px); opacity: 0.8; }
}
.glitch-title { position: relative; display: inline-block; }
.glitch-title::before, .glitch-title::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch-title::before { color: #00ffff; animation: glitch1 3s infinite linear; z-index: -1; }
.glitch-title::after { color: #ff00ff; animation: glitch2 3s infinite linear; z-index: -1; }
.glitch-title.intense::before { animation: glitchIntense1 1.5s infinite linear; }
.glitch-title.intense::after { animation: glitchIntense2 1.5s infinite linear; }

/* Scanline overlay */
.scanlines {
  pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  z-index: 10;
}

/* Neon toggle */
.neon-toggle {
  position: relative; width: 52px; height: 28px; background: #1a1a2e; border-radius: 14px;
  cursor: pointer; transition: all 0.3s ease; border: 1px solid #333; flex-shrink: 0;
}
.neon-toggle.active { background: #001a1a; border-color: #00ffff; box-shadow: 0 0 10px #00ffff44, inset 0 0 8px #00ffff22; }
.neon-toggle.active.accent-magenta { background: #1a001a; border-color: #ff00ff; box-shadow: 0 0 10px #ff00ff44, inset 0 0 8px #ff00ff22; }
.neon-toggle .thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #444; border-radius: 50%; transition: all 0.3s ease;
}
.neon-toggle.active .thumb { left: 27px; background: #00ffff; box-shadow: 0 0 8px #00ffff; }
.neon-toggle.active.accent-magenta .thumb { background: #ff00ff; box-shadow: 0 0 8px #ff00ff; }

/* Range sliders */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: #1a1a2e; border-radius: 3px; outline: none; cursor: pointer; position: relative;
}
input[type="range"].skip-kf-slider {
  height: 8px; background: linear-gradient(90deg, #1a1a2e 0%, #330011 50%, #660022 100%); border: 1px solid #ff004033;
}
input[type="range"].skip-kf-slider::-webkit-slider-thumb {
  background: #ff0040; box-shadow: 0 0 10px #ff004088, 0 0 20px #ff004044; width: 20px; height: 20px;
}
input[type="range"].skip-kf-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 16px #ff0040cc, 0 0 30px #ff004066; }
input[type="range"].skip-kf-slider::-moz-range-thumb { background: #ff0040; box-shadow: 0 0 10px #ff004088; width: 20px; height: 20px; border: none; }

input[type="range"].audio-slider {
  background: linear-gradient(90deg, #1a1a2e 0%, #002233 50%, #004455 100%); border: 1px solid #00ffff33;
}
input[type="range"].audio-slider::-webkit-slider-thumb { background: #00ffff; box-shadow: 0 0 10px #00ffff88; }
input[type="range"].audio-slider::-moz-range-thumb { background: #00ffff; box-shadow: 0 0 10px #00ffff88; border: none; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #00ffff; box-shadow: 0 0 8px #00ffff88; cursor: pointer; transition: box-shadow 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 16px #00ffffcc; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #00ffff; box-shadow: 0 0 8px #00ffff88; cursor: pointer; border: none; }

/* Neon buttons */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
  50% { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
}
.btn-neon-green { color: #00ff41; border: 2px solid #00ff41; background: #00ff4110; transition: all 0.2s; }
.btn-neon-green:hover:not(:disabled) { background: #00ff4125; box-shadow: 0 0 15px #00ff4166; }
.btn-neon-green.pulse { animation: neonPulse 2s infinite; }
.btn-neon-green:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-neon-red { color: #ff0040; border: 2px solid #ff0040; background: #ff004010; transition: all 0.2s; }
.btn-neon-red:hover:not(:disabled) { background: #ff004025; box-shadow: 0 0 15px #ff004066; }
.btn-neon-red:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-neon-cyan { color: #00ffff; border: 1px solid #00ffff; background: #00ffff08; transition: all 0.2s; }
.btn-neon-cyan:hover:not(:disabled) { background: #00ffff18; box-shadow: 0 0 10px #00ffff44; }
.btn-neon-cyan:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-neon-magenta { color: #ff00ff; border: 1px solid #ff00ff; background: #ff00ff08; transition: all 0.2s; }
.btn-neon-magenta:hover:not(:disabled) { background: #ff00ff18; box-shadow: 0 0 10px #ff00ff44; }
.btn-neon-magenta:disabled { opacity: 0.3; cursor: not-allowed; }

/* Drop zone */
.dropzone { border: 2px dashed #00ffff44; transition: all 0.3s; }
.dropzone:hover, .dropzone.dragover { border-color: #00ffff; background: #00ffff08; box-shadow: 0 0 20px #00ffff22; }

/* LCD readouts */
.lcd-readout {
  font-family: 'JetBrains Mono', monospace; background: #0a0f0a; border: 1px solid #00ff4133;
  color: #00ff41; padding: 2px 8px; border-radius: 3px; font-size: 13px; min-width: 40px;
  text-align: center; text-shadow: 0 0 5px #00ff4166; white-space: nowrap;
}
.lcd-readout-red { background: #0f0a0a; border-color: #ff004033; color: #ff0040; text-shadow: 0 0 5px #ff004066; }
.lcd-readout-cyan { background: #0a0e0f; border-color: #00ffff33; color: #00ffff; text-shadow: 0 0 5px #00ffff66; }

/* Keyframe flash */
@keyframes keyframeFlash {
  0% { color: #ff0040; text-shadow: 0 0 10px #ff0040; }
  100% { color: inherit; text-shadow: none; }
}
.kf-flash { animation: keyframeFlash 0.4s ease-out; }

/* VU meter */
.vu-track {
  height: 10px; background: #0a0e12; border: 1px solid #1a1a2e; border-radius: 5px; overflow: hidden;
}
.vu-fill {
  height: 100%; background: linear-gradient(90deg, #00ffff, #ff00ff);
  border-radius: 5px; transition: width 0.08s linear; box-shadow: 0 0 8px #00ffff88;
}
.vu-fill.glitching { background: linear-gradient(90deg, #ff0040, #ffff00); box-shadow: 0 0 12px #ff0040; }

/* Waveform strip overlay on canvas */
.wave-strip {
  height: 8px; background: rgba(0,0,0,0.4); border: 1px solid rgba(0,255,255,0.2);
  border-radius: 4px; overflow: hidden; backdrop-filter: blur(2px);
}
.wave-fill {
  height: 100%; background: linear-gradient(90deg, rgba(0,255,255,0.7), rgba(255,0,255,0.7));
  transition: width 0.08s linear; box-shadow: 0 0 6px rgba(0,255,255,0.6);
}
.wave-fill.moshed {
  background: repeating-linear-gradient(90deg, #ff00ff 0, #ff00ff 3px, #00ffff 3px, #00ffff 6px);
}
.wave-fill.glitching { background: linear-gradient(90deg, #ff0040, #ffff00); }

/* Recording dot */
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff0040; box-shadow: 0 0 8px #ff0040; animation: recBlink 1s infinite; }

/* Preset buttons */
.preset-btn {
  font-size: 11px; padding: 4px 8px; border: 1px solid #333; border-radius: 4px;
  background: #111118; color: #888; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.preset-btn:hover { border-color: #ff00ff; color: #ff00ff; box-shadow: 0 0 8px #ff00ff33; }
.preset-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Info modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-content {
  background: #111118; border: 1px solid #00ffff44; border-radius: 12px; padding: 24px;
  max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 0 40px #00ffff22;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .app-layout { flex-direction: column !important; }
  .sidebar { width: 100% !important; min-width: 0 !important; max-height: 55vh; overflow-y: auto; }
  .canvas-viewport { width: 100% !important; min-height: 280px; }
}