:root {
  --bg-dark: #0d0d1a;
  --bg-panel: #1a1a2e;
  --bg-inset: #12122a;
  --neon-blue: #00d4ff;
  --neon-pink: #ff006e;
  --neon-green: #39ff14;
  --neon-yellow: #ffe600;
  --neon-orange: #ff8c00;
  --neon-purple: #b347ea;
  --xp-blue-1: #0a246a;
  --xp-blue-2: #3a6ea5;
  --xp-blue-3: #6fb6ff;
  --border-bevel-light: #555577;
  --border-bevel-dark: #222244;
  --text-main: #e0e0f0;
  --text-dim: #8888aa;
}

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

body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes rainbowBorder {
  0% { border-color: #ff006e; }
  16% { border-color: #ff8c00; }
  33% { border-color: #ffe600; }
  50% { border-color: #39ff14; }
  66% { border-color: #00d4ff; }
  83% { border-color: #b347ea; }
  100% { border-color: #ff006e; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px var(--neon-blue), 0 0 16px var(--neon-blue); }
  50% { box-shadow: 0 0 16px var(--neon-pink), 0 0 32px var(--neon-pink); }
}

@keyframes stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes stutter {
  0%, 10% { transform: translateX(0); }
  12% { transform: translateX(-3px) translateY(2px); }
  14% { transform: translateX(3px) translateY(-1px); }
  16%, 100% { transform: translateX(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes noiseAnim {
  0% { background-position: 0 0; }
  25% { background-position: -50px -50px; }
  50% { background-position: 50px 25px; }
  75% { background-position: -25px 50px; }
  100% { background-position: 0 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes playheadMove {
  from { left: 0; }
  to { left: 100%; }
}

.rainbow-border {
  border: 3px solid #ff006e;
  animation: rainbowBorder 3s linear infinite;
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.shake-it {
  animation: shake 0.3s ease-in-out;
}

.press-start {
  font-family: 'Press Start 2P', cursive;
}

.vt323 {
  font-family: 'VT323', monospace;
}

.xp-titlebar {
  background: linear-gradient(180deg, var(--xp-blue-3) 0%, var(--xp-blue-2) 45%, var(--xp-blue-1) 100%);
  border-radius: 8px 8px 0 0;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xp-btn {
  width: 22px;
  height: 22px;
  border: 1px solid #333;
  border-radius: 3px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
}

.xp-btn-min { background: linear-gradient(180deg, #d4d4d4, #a0a0a0); }
.xp-btn-max { background: linear-gradient(180deg, #d4d4d4, #a0a0a0); }
.xp-btn-close { background: linear-gradient(180deg, #e88a8a, #c44); color: white; }

.bevel-panel {
  background: var(--bg-panel);
  border: 2px solid var(--border-bevel-light);
  border-right-color: var(--border-bevel-dark);
  border-bottom-color: var(--border-bevel-dark);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.05);
}

.inset-panel {
  background: var(--bg-inset);
  border: 2px solid var(--border-bevel-dark);
  border-right-color: var(--border-bevel-light);
  border-bottom-color: var(--border-bevel-light);
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.4);
}

.tab-btn {
  background: #2a2a4e;
  border: 2px solid var(--border-bevel-light);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 8px 14px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 16px;
  transition: all 0.15s;
  white-space: nowrap;
}

.tab-btn:hover {
  background: #3a3a5e;
  color: var(--text-main);
}

.tab-btn.active {
  background: var(--bg-panel);
  color: var(--neon-blue);
  border-color: var(--neon-blue);
  text-shadow: 0 0 8px var(--neon-blue);
}

.btn-primary {
  background: linear-gradient(180deg, #1a8aff, #0055cc);
  color: white;
  border: 2px solid #3399ff;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 18px;
  transition: all 0.15s;
}
.btn-primary:hover {
  box-shadow: 0 0 12px var(--neon-blue);
  transform: translateY(-1px);
}

.btn-chaos {
  background: linear-gradient(180deg, #ff3399, #cc0066);
  color: white;
  border: 2px solid #ff66b2;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 18px;
  transition: all 0.15s;
}
.btn-chaos:hover {
  box-shadow: 0 0 12px var(--neon-pink);
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(180deg, #ff4444, #aa0000);
  color: white;
  border: 2px solid #ff6666;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 18px;
}
.btn-danger:hover {
  box-shadow: 0 0 12px #ff4444;
}

.btn-green {
  background: linear-gradient(180deg, #22cc44, #118822);
  color: white;
  border: 2px solid #44ee66;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 18px;
}
.btn-green:hover {
  box-shadow: 0 0 12px var(--neon-green);
}

.btn-small {
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 4px;
}

.neon-input {
  background: #0d0d2a;
  border: 1px solid #444466;
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.neon-input:focus {
  border-color: var(--neon-blue);
  box-shadow: 0 0 6px rgba(0,212,255,0.3);
}

.neon-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #333355;
  border-radius: 3px;
  outline: none;
}
.neon-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--neon-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px var(--neon-blue);
}

.log-window {
  background: #0a0a14;
  color: var(--neon-green);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 10px;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #222244;
  white-space: pre-wrap;
  word-break: break-all;
}

.progress-bar-container {
  background: #1a1a3e;
  border: 2px solid #333366;
  border-radius: 8px;
  overflow: hidden;
  height: 28px;
}

.progress-bar-fill {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--neon-blue),
    var(--neon-blue) 10px,
    #0088cc 10px,
    #0088cc 20px
  );
  background-size: 40px 40px;
  animation: stripes 1s linear infinite;
  transition: width 0.3s;
}

.clip-block {
  min-width: 30px;
  height: 48px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: grab;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.clip-block:hover {
  border-color: var(--neon-blue);
  z-index: 10;
}

.status-bar {
  background: linear-gradient(180deg, #2a2a4e, #1a1a3a);
  border-top: 2px solid var(--border-bevel-light);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #444466; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); }

.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
  animation: noiseAnim 0.2s steps(4) infinite;
  pointer-events: none;
}

.effect-preview-box {
  width: 200px;
  height: 150px;
  background: linear-gradient(135deg, #3366cc, #6633cc, #cc3366);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.beat-marker {
  width: 2px;
  background: var(--neon-yellow);
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .tab-btn { font-size: 12px; padding: 6px 8px; }
}