/* RetroWave Music Visualizer Styles */
/* Enhanced v3.0 - Modern UI/UX with improved accessibility and polish */

:root {
  --bg: #0a0018;
  --bg-secondary: #120022;
  --bg-glass: rgba(10, 0, 24, 0.7);
  --text: #f0e6ff;
  --text-muted: rgba(230, 214, 255, 0.65);
  --text-dim: rgba(230, 214, 255, 0.4);
  --accent1: #ff2d92; /* neon pink */
  --accent2: #6df7ff; /* cyan */
  --accent3: #8a2eff; /* purple */
  --accent4: #ffd700; /* gold */
  --success: #00ff88;
  --warning: #ffaa00;
  --error: #ff3366;
  --grid: rgba(255, 45, 146, 0.35);
  --panel: rgba(10,0,24,0.85);
  --panel-border: rgba(255,255,255,0.12);
  --panel-hover: rgba(255,255,255,0.08);
  --glow: 0 0 8px var(--accent2), 0 0 16px var(--accent2), 0 0 32px var(--accent2);
  --glow-intense: 0 0 10px var(--accent1), 0 0 20px var(--accent1), 0 0 40px var(--accent1), 0 0 80px var(--accent1);
  
  /* Spacing system */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* Animation timings */
  --transition-fast: 120ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent1), 0 0 40px rgba(255, 45, 146, 0.3);
}

/* Themes - Enhanced with more color options */
.theme-sunset { 
  --bg: #0b0616; 
  --bg-secondary: #1a0a2e;
  --text: #ffe8ff; 
  --accent1: #ff4d6d; 
  --accent2: #ffd166; 
  --accent3: #6a5cff; 
  --accent4: #ff9e00;
  --grid: rgba(255,77,109,0.35); 
}

.theme-night { 
  --bg: #020310; 
  --bg-secondary: #0a0820;
  --text: #d7e6ff; 
  --accent1: #7b2cbf; 
  --accent2: #3a86ff; 
  --accent3: #00f5d4; 
  --accent4: #a855f7;
  --grid: rgba(58,134,255,0.35); 
}

.theme-neon { 
  --bg: #060012; 
  --bg-secondary: #0d0020;
  --text: #f0f8ff; 
  --accent1: #ff2d92; 
  --accent2: #00e5ff; 
  --accent3: #9d4edd; 
  --accent4: #39ff14;
  --grid: rgba(0,229,255,0.35); 
}

/* New themes */
.theme-miami {
  --bg: #0d001a;
  --bg-secondary: #1a0033;
  --text: #fff0f5;
  --accent1: #ff6b9d;
  --accent2: #00d4ff;
  --accent3: #ff00ff;
  --accent4: #ffdd00;
  --grid: rgba(255, 107, 157, 0.35);
}

.theme-cyber {
  --bg: #000a0d;
  --bg-secondary: #001520;
  --text: #e0f7fa;
  --accent1: #00ff9f;
  --accent2: #00b8ff;
  --accent3: #ff0055;
  --accent4: #bd00ff;
  --grid: rgba(0, 255, 159, 0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% 100%, rgba(255,255,255,0.06), transparent 60%), var(--bg);
  color: var(--text);
  font-family: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  overflow: hidden;
  /* Intense CRT screen texture - multiple layers */
  background-image: 
    /* Vertical RGB subpixel pattern */
    repeating-linear-gradient(90deg, 
      rgba(255,0,0,0.03) 0px,
      rgba(0,255,0,0.03) 1px,
      rgba(0,0,255,0.03) 2px,
      transparent 3px
    ),
    /* Horizontal scanline texture */
    repeating-linear-gradient(0deg, 
      rgba(0,0,0,0.05) 0px, 
      transparent 1px, 
      transparent 2px,
      rgba(0,0,0,0.05) 3px
    ),
    /* Vignette */
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.5) 100%);
}

#app {
  position: relative;
  height: 100%;
  width: 100%;
  /* Subtle screen curvature effect like old CRTs */
  transform: perspective(1000px);
  transform-style: preserve-3d;
}

/* Drag and drop overlay */
#app.drag-over::before {
  content: '🎵 Drop Audio Files Here';
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--accent2);
  text-shadow: 0 0 20px var(--accent2);
  border: 4px dashed var(--accent1);
  animation: pulseGlow 1s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: inset 0 0 30px var(--accent1);
  }
  50% { 
    box-shadow: inset 0 0 60px var(--accent1);
  }
}

/* Apply curvature to main content */
.main {
  transform: rotateY(0deg) rotateX(0deg);
  transform-style: preserve-3d;
}

/* Disable curvature when CRT is off */
.crt-disabled .main {
  transform: none;
}

.top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl); 
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
  backdrop-filter: blur(8px);
  user-select: none;
}

.logo { 
  font-family: "Press Start 2P", monospace; 
  letter-spacing: 3px; 
  font-size: 11px; 
  color: var(--accent2); 
  text-shadow: 0 0 12px var(--accent2), 0 0 24px var(--accent2);
  transition: all var(--transition-normal) ease;
}
.logo:hover {
  text-shadow: 0 0 16px var(--accent2), 0 0 32px var(--accent2), 0 0 48px var(--accent2);
  transform: scale(1.02);
}
.logo span { color: var(--accent1); text-shadow: 0 0 12px var(--accent1); }
.spacer { flex: 1; }

.now-playing { 
  font-size: 12px; 
  opacity: 0.9; 
  max-width: 350px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-normal) ease;
}

.now-playing:not(:empty):hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--accent2);
  box-shadow: 0 0 15px rgba(109, 247, 255, 0.2);
}

/* VU Meter - Enhanced styling */
.vu-meter {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 28px;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.vu-bar {
  width: 10px;
  height: 0%;
  background: linear-gradient(to top, 
    var(--accent2) 0%, 
    var(--success) 40%, 
    var(--warning) 70%, 
    var(--error) 100%
  );
  border-radius: var(--radius-sm);
  transition: height 40ms ease-out;
  box-shadow: 0 0 10px var(--accent2);
}

.vu-bar.peak {
  box-shadow: 0 0 15px var(--accent1), 0 0 25px var(--accent1);
}

.vu-labels {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  gap: 2px;
  margin-left: var(--space-xs);
}

/* Time Display & Progress Bar - Enhanced */
.time-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 11px;
  font-family: 'Orbitron', monospace;
  color: var(--accent2);
  min-width: 200px;
  padding: var(--space-xs) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.time-display span {
  min-width: 40px;
  text-align: center;
  text-shadow: 0 0 8px var(--accent2);
}

.progress-bar {
  flex: 1;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.progress-bar::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, 
    var(--accent1) 0%, 
    var(--accent2) 100%
  );
  background-size: var(--progress, 0%) 100%;
  background-repeat: no-repeat;
}

.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 
    0 0 12px var(--accent1),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform var(--transition-fast) var(--ease-spring);
}

.progress-bar::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 
    0 0 20px var(--accent1),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

.progress-bar::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 12px var(--accent1);
}

.progress-bar::-moz-range-progress {
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border-radius: var(--radius-full);
  height: 8px;
}

.icon-btn {
  min-width: 42px; 
  height: 42px; 
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border-radius: var(--radius-md); 
  cursor: pointer; 
  position: relative;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 17px;
  line-height: 1;
  color: var(--text);
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  text-align: center;
  transition: all var(--transition-fast) var(--ease-spring);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Loading state for buttons */
.icon-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.icon-btn.loading::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-top-color: var(--accent2);
  border-radius: 10px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Smaller variant for dock/modal toolbars */
.icon-btn.small {
  min-width: 32px;
  height: 32px;
  font-size: 14px;
  padding: var(--space-xs);
}

.icon-btn.small .btn-label {
  font-size: 7px;
}

/* Button Labels */
.icon-btn .btn-label {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.8;
  line-height: 1;
  white-space: nowrap;
  margin-top: 2px;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Custom Tooltips */
.icon-btn[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--accent2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 15px rgba(109, 247, 255, 0.3);
  animation: tooltipFade 0.15s ease-out;
}

@keyframes tooltipFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Keyboard shortcuts styling - Enhanced */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: var(--space-xs) var(--space-sm);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent2);
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
  border: 1px solid rgba(109, 247, 255, 0.4);
  border-radius: var(--radius-sm);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(109, 247, 255, 0.2);
  margin: 0 2px;
  text-shadow: 0 0 5px var(--accent2);
}

kbd:hover {
  border-color: var(--accent2);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(109, 247, 255, 0.4);
}

.shortcuts-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-size: 11px;
  color: var(--text-muted);
  justify-content: center;
}

.shortcuts-info strong {
  color: var(--accent1);
  text-shadow: 0 0 8px var(--accent1);
}

/* Remove old data-label styles */
.icon-btn[data-label]::after {
  display: none;
}

/* Button Hover/Active States */
.icon-btn:hover { 
  transform: translateY(-2px);
  border-color: var(--accent2);
  background: linear-gradient(145deg, rgba(109, 247, 255, 0.15) 0%, rgba(109, 247, 255, 0.05) 100%);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(109, 247, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.icon-btn:active { 
  transform: translateY(0) scale(0.97); 
  transition-duration: 50ms;
  box-shadow: 
    0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 15px var(--accent1),
    inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
.icon-btn.is-active {
  background: linear-gradient(145deg, rgba(255, 45, 146, 0.25) 0%, rgba(255, 45, 146, 0.1) 100%);
  border-color: var(--accent1);
  box-shadow: 
    0 0 20px rgba(255, 45, 146, 0.4),
    0 0 40px rgba(255, 45, 146, 0.2),
    inset 0 0 15px rgba(255, 45, 146, 0.15);
  animation: activePulse 2s ease-in-out infinite;
}

@keyframes activePulse {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(255, 45, 146, 0.4),
      0 0 40px rgba(255, 45, 146, 0.2),
      inset 0 0 15px rgba(255, 45, 146, 0.15);
  }
  50% { 
    box-shadow: 
      0 0 25px rgba(255, 45, 146, 0.5),
      0 0 50px rgba(255, 45, 146, 0.3),
      inset 0 0 20px rgba(255, 45, 146, 0.2);
  }
}

.icon-btn:disabled { 
  opacity: 0.4; 
  cursor: not-allowed; 
  box-shadow: none; 
  transform: none !important;
  filter: grayscale(0.5);
}

/* Main layout */
.main { position: relative; height: 100%; overflow: hidden; }
#canvas { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  display: block;
  /* Subtle chromatic aberration */
  filter: 
    contrast(1.05) 
    saturate(1.15) 
    brightness(1.02);
}

/* Controls Panel - Improved layout and styling */
.controls {
  position: absolute; 
  left: 0; right: 0; bottom: 0; 
  z-index: 2;
  display: flex; 
  flex-direction: column; 
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  backdrop-filter: blur(4px);
}

.controls .row { 
  display: flex; 
  align-items: center; 
  gap: var(--space-md); 
  flex-wrap: wrap; 
}

.controls .main-controls { 
  gap: var(--space-md); 
  padding: var(--space-md) 0;
  justify-content: center;
}

/* Advanced Controls Panel */
.controls .advanced-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  margin-bottom: 0;
  transition: 
    max-height 0.4s var(--ease-out-expo),
    opacity 0.3s ease-out,
    transform 0.3s var(--ease-out-expo),
    padding 0.3s ease-out,
    margin-bottom 0.3s ease-out;
}

.controls .advanced-controls.open {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.controls .sliders { 
  gap: var(--space-xl); 
  justify-content: center;
}

.controls .help { 
  font-size: 11px; 
  opacity: 0.7;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  text-align: center;
}

/* File Input */
input[type="file"] { display: none; }
.file-label { display: inline-flex; align-items: center; justify-content: center; }

/* Select Dropdowns - Improved styling */
.select {
  height: 42px; 
  min-width: 150px; 
  padding: var(--space-sm) var(--space-md); 
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all var(--transition-fast) ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236df7ff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.select:hover {
  border-color: var(--accent2);
  box-shadow: 
    var(--shadow-md),
    0 0 15px rgba(109, 247, 255, 0.2);
}

.select:focus {
  outline: none;
  border-color: var(--accent2);
  box-shadow: 
    var(--shadow-md),
    0 0 20px rgba(109, 247, 255, 0.3);
}

.select option {
  background: var(--bg);
  color: var(--text);
  padding: var(--space-sm);
}

/* Slider Controls */
.slider { 
  display: flex; 
  align-items: center; 
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.slider span { 
  font-size: 11px; 
  color: var(--text-muted);
  width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slider input[type="range"] { 
  width: 140px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--accent2), var(--accent1));
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent2);
  transition: transform var(--transition-fast) var(--ease-spring);
}

.slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Volume Control */
.volume { 
  display: flex; 
  align-items: center; 
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.volume input[type="range"] {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, var(--accent2), var(--accent1));
  border-radius: var(--radius-full);
  cursor: pointer;
}

.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px var(--accent2);
  transition: transform var(--transition-fast) var(--ease-spring);
}

.volume input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Text Input */
.text-input {
  height: 42px; 
  min-width: 240px; 
  padding: var(--space-sm) var(--space-md); 
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast) ease;
}

.text-input::placeholder {
  color: var(--text-dim);
}

.text-input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.text-input:focus {
  outline: none;
  border-color: var(--accent2);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(109, 247, 255, 0.2);
}

.hint { 
  font-size: 11px; 
  color: var(--text-dim);
  line-height: 1.4;
}

/* Credits Row */
.credits-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: var(--text-dim);
}

.credits-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.credit-link {
  color: var(--accent1);
  text-decoration: none;
  transition: all var(--transition-fast) ease;
}

.credit-link:hover {
  color: var(--accent2);
  text-shadow: 0 0 10px var(--accent2);
}

.save-indicator {
  color: var(--success);
  opacity: 0.7;
}

.drag-hint {
  color: var(--accent2);
  opacity: 0.7;
}

@media (max-width: 720px) {
  .credits-row {
    display: none;
  }
}

/* Modal - Improved styling */
.modal { 
  position: fixed; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.8); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; 
  place-items: center; 
  z-index: 100;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal[hidden] { display: none; }

.modal-content { 
  width: min(720px, 92vw); 
  background: linear-gradient(145deg, rgba(15, 5, 30, 0.98) 0%, rgba(5, 0, 15, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15); 
  border-radius: var(--radius-xl); 
  box-shadow: 
    var(--shadow-lg),
    0 0 60px rgba(255, 45, 146, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: modalSlideIn 0.3s var(--ease-out-expo);
}

@keyframes modalSlideIn {
  from { 
    opacity: 0; 
    transform: scale(0.95) translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  }
}

.modal-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: var(--space-lg) var(--space-xl); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

.modal-title { 
  font-weight: 700; 
  font-size: 16px;
  color: var(--accent2); 
  text-shadow: 0 0 12px var(--accent2); 
}

.modal-body { 
  padding: var(--space-xl); 
  line-height: 1.6; 
  font-size: 14px;
  color: var(--text-muted);
}

.modal-body ol, .modal-body ul { 
  padding-left: var(--space-xl); 
}

.modal-body li {
  margin-bottom: var(--space-sm);
}

.modal-body strong {
  color: var(--text);
}

/* HUD */
.hud { 
  position: absolute; 
  top: 54px; 
  right: var(--space-lg); 
  z-index: 4; 
  font-size: 11px; 
  color: var(--text-muted);
  padding: var(--space-sm) var(--space-md); 
  border-radius: var(--radius-md); 
  border: 1px solid rgba(255, 255, 255, 0.08); 
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Pill indicators */
.pill { 
  padding: var(--space-sm) var(--space-md); 
  border-radius: var(--radius-full); 
  font-size: 11px; 
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.15); 
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pill-muted { 
  color: var(--accent1); 
  text-shadow: 0 0 10px var(--accent1); 
  border-color: rgba(255, 45, 146, 0.4);
  animation: pillPulse 1.5s ease-in-out infinite;
}

@keyframes pillPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* CRT / Scanlines - Enhanced 80s Aesthetic */
.crt-overlay {
  pointer-events: none; 
  position: absolute; 
  inset: 0; 
  z-index: 999;
  mix-blend-mode: overlay;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide CRT when disabled */
.crt-disabled .crt-overlay {
  opacity: 0;
}

.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Subtle scanlines - just enough to see but not block text */
  background:
    /* Light scanlines every 4px - less dense = better performance */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.08) 0px,
      rgba(0,0,0,0.08) 1px,
      transparent 1px,
      transparent 4px
    );
  /* Removed animation - static scanlines perform better */
  opacity: 0.6;
  z-index: 2;
  /* Removed box-shadow for performance */
  will-change: opacity;
}

.crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Simplified noise - lighter and less frequent animation */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.25;
  /* Slower animation - 1s instead of 0.2s */
  animation: noise 1s steps(4) infinite;
  mix-blend-mode: soft-light;
  z-index: 1;
  will-change: transform;
}

/* Additional CRT effects */
#app::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  /* Subtle vignette - just darkens edges slightly */
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0,0,0,0.3) 100%
  );
  opacity: 1;
  transition: opacity 0.3s ease;
}

#app.crt-disabled::before {
  opacity: 0;
}

#app::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 997;
  pointer-events: none;
  /* Simplified CRT curvature shadow - 2 layers instead of 5 */
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.5),
    inset 0 0 40px rgba(0,0,0,0.3);
  border-radius: 8px;
  opacity: 1;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

#app.crt-disabled::after {
  opacity: 0;
}

/* CRT flicker animation - optimized with fewer keyframes */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
  75% { opacity: 0.99; }
}

@keyframes scanline {
  0% { transform: translateY(0); }
  100% { transform: translateY(10px); }
}

@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-10%, 5%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 10%); }
  80% { transform: translate(-15%, 0); }
  90% { transform: translate(10%, 5%); }
}

/* Simplified CRT glow on text - 2 layers instead of 3 */
.logo, .now-playing, .icon-btn[data-label]::after {
  text-shadow:
    0 0 3px currentColor,
    0 0 6px rgba(255,255,255,0.2);
}

/* Apply flicker to entire app */
#canvas {
  /* Reduced to single slower animation */
  animation: flicker 8s infinite;
  /* Simplified filter - removed drop-shadows (major performance hit) */
  filter:
    contrast(1.03)
    brightness(1.01)
    saturate(1.05);
  /* Single subtle glow */
  box-shadow: 0 0 30px rgba(255, 45, 146, 0.1);
  will-change: filter, box-shadow;
  /* Removed rolling scanline background for performance */
}

/* Disable flicker when CRT is off */
.crt-disabled #canvas {
  animation: none;
  filter: none;
  box-shadow: none;
  background: none;
}

/* Random horizontal hold glitch (rare) */
@keyframes horizontalHold {
  0%, 90%, 100% { transform: translateX(0); }
  91% { transform: translateX(3px); }
  92% { transform: translateX(-2px); }
  93% { transform: translateX(1px); }
  94% { transform: translateX(-1px); }
  95% { transform: translateX(0); }
}

/* Removed horizontalHold animation for performance */
.main {
  /* No animation - static is more performant */
}

.crt-disabled .main {
  /* No animation needed */
}

/* Rolling scanline effect - bright line that travels down the screen */
@keyframes rolling {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 200%;
  }
}

/* VHS tracking lines (occasional) */
@keyframes tracking {
  0%, 95%, 100% { clip-path: inset(0); }
  96% { clip-path: inset(30% 0 0 0); }
  97% { clip-path: inset(0 0 40% 0); }
  98% { clip-path: inset(20% 0 0 0); }
  99% { clip-path: inset(0); }
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet and smaller */
@media (max-width: 900px) {
  .top-bar {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }
  
  .logo {
    font-size: 9px;
    letter-spacing: 1px;
  }
  
  .now-playing {
    max-width: 180px;
    font-size: 10px;
  }
  
  .controls {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }
  
  .controls .main-controls {
    gap: var(--space-sm);
  }
  
  .icon-btn {
    min-width: 38px;
    height: 38px;
    font-size: 15px;
  }
  
  .select {
    min-width: 120px;
    height: 38px;
    font-size: 11px;
  }
  
  .slider input[type="range"] { 
    width: 100px; 
  }
  
  .time-display {
    min-width: 150px;
  }
}

/* Mobile phones */
@media (max-width: 720px) {
  .top-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
  }
  
  .logo {
    font-size: 8px;
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-xs);
  }
  
  .now-playing {
    display: none;
  }
  
  .vu-meter {
    display: none;
  }
  
  .controls .main-controls {
    justify-content: center;
  }
  
  .icon-btn {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
    padding: var(--space-xs);
  }
  
  .icon-btn .btn-label {
    display: none;
  }
  
  .select {
    min-width: 100px;
    height: 36px;
    font-size: 10px;
    padding: var(--space-xs) var(--space-sm);
  }
  
  .time-display {
    min-width: auto;
    flex: 1;
  }
  
  .time-display span {
    font-size: 10px;
    min-width: 32px;
  }
  
  .volume input[type="range"] {
    width: 60px;
  }
  
  .controls .sliders {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .slider {
    width: 100%;
  }
  
  .slider input[type="range"] {
    flex: 1;
    width: auto;
  }
  
  .shortcuts-info {
    display: none;
  }
  
  /* Hide custom tooltips on touch devices */
  .icon-btn[title]:hover::before {
    display: none;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .controls .main-controls {
    gap: var(--space-xs);
  }
  
  .icon-btn {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }
  
  .select {
    min-width: 80px;
    font-size: 9px;
  }
  
  .time-display {
    order: 10;
    width: 100%;
    margin-top: var(--space-xs);
  }
  
  .volume {
    order: 9;
  }
}

/* YouTube Dock - Enhanced styling */
.yt-dock {
  position: absolute; 
  right: var(--space-lg); 
  bottom: 180px; 
  z-index: 3;
  width: min(400px, 45vw);
  background: linear-gradient(145deg, rgba(10, 0, 25, 0.95) 0%, rgba(5, 0, 15, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: 
    var(--shadow-lg),
    0 0 40px rgba(255, 45, 146, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: slideUp 0.3s var(--ease-out-expo);
}

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

.yt-dock[hidden] {
  display: none;
}

.yt-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: var(--space-md) var(--space-lg); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.yt-title { 
  font-size: 12px; 
  font-weight: 600;
  color: var(--accent2); 
  text-shadow: 0 0 10px var(--accent2);
  letter-spacing: 0.5px;
}

.yt-actions { 
  display: flex; 
  align-items: center; 
  gap: var(--space-sm); 
}

.yt-body { 
  padding: var(--space-md) var(--space-lg) var(--space-lg); 
}

.yt-aspect { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  background: rgba(0, 0, 0, 0.6); 
  border-radius: var(--radius-md); 
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

#ytFrame { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}

.yt-dock .hint {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .yt-dock { 
    width: min(92vw, 480px); 
    left: var(--space-lg); 
    right: var(--space-lg); 
    bottom: 220px;
  }
}

/* ===== Code Editor Mode ===== */
.code-editor-container {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(
    from 7.5deg at center center,
    hsl(200, 100%, 0%) 0deg 15deg,
    hsl(200, 100%, 60%) 10deg 30deg
  ), rgb(0 0 0 / 0.95);
  animation: fadeIn 0.3s ease-in-out;
}

/* Editor Close Button */
.editor-close-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(30, 0, 50, 0.9));
  border: 2px solid #ff00ff;
  border-radius: 8px;
  color: #ff00ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 10px rgba(255, 0, 255, 0.1);
}

.editor-close-btn:hover {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.2);
  transform: scale(1.05);
}

.editor-close-btn:active {
  transform: scale(0.95);
}

.editor-close-btn .close-icon {
  font-size: 1.2rem;
  font-weight: bold;
}

.editor-close-btn .close-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .editor-close-btn .close-text {
    display: none;
  }
  .editor-close-btn {
    padding: 12px 14px;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.code-container-frame {
  resize: both;
  overflow: hidden;
  margin: auto;
  width: 85vw;
  height: 85vh;
  min-width: 420px;
  min-height: 255px;
  position: relative;
  --glow-margin: 70px;
  filter: drop-shadow(0 0 75px rgb(128 0 255 / 0.25));
}

input.sig {
  position: absolute;
  bottom: 90px;
  right: 90px;
  z-index: 999;
  color: rgb(255 200 255 / 0.5);
  text-shadow: 0 0 12px rebeccapurple;
  letter-spacing: 0.1em;
  width: calc(100% - 240px);
  background: transparent;
  border: none;
  text-align: right;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
}

.code-container-frame::after {
  content: "";
  background: linear-gradient(
    to right,
    transparent,
    black 25px, black 110px,
    transparent 110px 175px,
    black 175px, black calc(100% - 25px),
    transparent
  );
  position: absolute;
  top: 125px;
  left: var(--glow-margin);
  right: var(--glow-margin);
  height: 4px;
  display: block;
  z-index: 90;
  opacity: 0.5;
}

.glow-container {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: 2;
  pointer-events: none;
  --glow: drop-shadow(0 0 1px violet);
  filter: var(--glow) brightness(1.5) drop-shadow(0 0 10px violet);
}

.augs {
  --aug-rect-l1: initial;
  --aug-l1-width: 110px;
  --aug-l1-height: 4px;
  --aug-l-center: 57px;
  
  --aug-rect-r1: initial;
  --aug-r1-width: (100% - 125px - 50px);
  --aug-r1-height: 4px;
  --aug-r-center: 57px;
  
  --aug-clip-tr1: initial;
  --aug-tr1-alt-join-out: initial;
  --aug-tr1: 17px;
  --aug-clip-tr2: initial;
  --aug-tr2: 17px;
  --aug-tr-extend1: 50px;
  
  --aug-round-tl1: initial;
  --aug-tl1: 8px;
  --aug-round-br1: initial;
  --aug-br1: 8px;
  margin: auto;
  width: calc(100% - var(--glow-margin) * 2);
  height: calc(100% - var(--glow-margin) * 2);
}

.glow-container .augs {
  --aug-border: initial;
  --aug-border-all: 2px;
  --aug-border-bg: linear-gradient(to bottom left, rebeccapurple, orange);
}

section.augs {
  position: absolute;
  inset: 0;
  margin: auto;
  --aug-inlay: initial;
  --aug-inlay-all: 2px;
  --aug-inlay-opacity: 0.25;
}

section.augs.bg {
  background: repeating-linear-gradient(
    to top,
    rgba(255, 255, 255, 0.03) 0px 2px,
    transparent 2px 4px
  ), linear-gradient(to bottom, #200933 75%, #3d0b43);
}

section.augs.bg::after {
  content: '';
  height: 50%;
  width: 100%;
  display: block;
  background-image: linear-gradient(90deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px),
                    linear-gradient(0deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px);
  background-position: bottom;
  background-repeat: repeat;
  background-size: 20px 20px;
  left: -25px;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  transform: perspective(100px) rotateX(60deg);
  z-index: 0;
}

.dots {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 110px;
  height: 50px;
  --red: #fc199a;
  --yellow: #ffcc00;
  --green: #61e2ff;
  --close: radial-gradient(circle, var(--red), var(--red) 7px, transparent 8px);
  --min: radial-gradient(circle, var(--yellow), var(--yellow) 7px, transparent 8px);
  --max: radial-gradient(circle, var(--green), var(--green) 7px, transparent 8px);
  background: var(--close) -28px no-repeat,
              var(--min) -2px no-repeat,
              var(--max) 24px no-repeat;
  filter: brightness(0.5);
  opacity: 0.75;
  cursor: pointer;
  border: none;
}

.dots:hover {
  filter: brightness(0.8);
  opacity: 1;
}

input.title {
  position: absolute;
  top: 17px;
  left: 120px;
  width: calc(100% - 240px);
  background: transparent;
  color: rgb(255 200 255 / 0.5);
  text-shadow: 0 0 12px rebeccapurple;
  border: none;
  text-align: center;
  letter-spacing: 0.1em;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
}

.code {
  position: absolute;
  inset: 80px 10px 10px 10px;
  font-size: 20px;
  color: white;
  filter: brightness(1.2);
}

.code * {
  font-size: 16px;
  font-weight: normal;
  color: #b5b4b6;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

/* CodeMirror customization for dark theme */
.CodeMirror {
  height: 100%;
  background: transparent;
  color: #b5b4b6;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 15px;
}

.CodeMirror-gutters {
  background: transparent;
  border: none;
  margin-right: 15px;
}

.CodeMirror-linenumber {
  padding-right: 1em;
  color: rgba(113,119,144,.6);
}

.CodeMirror-cursor {
  border-left-color: white !important;
}

.CodeMirror-selected {
  background: rgba(255,255,255,0.05);
}

.CodeMirror-focused .CodeMirror-selected {
  background: rgba(255,255,255,0.1);
}

/* Synthwave theme for CodeMirror */
.highcontrast-dark .cm-keyword { color: #ffdd40; }
.highcontrast-dark .cm-atom { color: #9963ff; }
.highcontrast-dark .cm-def,
.highcontrast-dark .cm-variable-2,
.highcontrast-dark .cm-variable { 
  color: #61e2ff;
  text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}
.highcontrast-dark .cm-number { color: #2bc7b9; }
.highcontrast-dark .cm-property { color: #5e91f2; }
.highcontrast-dark .cm-string { color: #2bc7b9; }
.highcontrast-dark .cm-comment { color: #88afbf; }
.highcontrast-dark .cm-operator { color: #47cf73; }
.highcontrast-dark .cm-meta { color: #0ebeff; }

.CodeMirror-simplescroll-horizontal div,
.CodeMirror-simplescroll-vertical div {
  background: rgba(153, 99, 255, 0.5);
}