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

body {
  background: #060911;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(212, 165, 60, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(212, 165, 60, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(17, 24, 51, 0.8) 0%, transparent 50%);
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 165, 60, 0.1); }
  50% { box-shadow: 0 0 40px rgba(212, 165, 60, 0.25); }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

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

@keyframes waveform {
  0%, 100% { height: 4px; }
  50% { height: 20px; }
}

@keyframes floatParticle {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

@keyframes pulseBorder {
  0%, 100% { border-color: rgba(212, 165, 60, 0.3); }
  50% { border-color: rgba(212, 165, 60, 0.7); }
}

@keyframes countUp {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.glass-panel {
  background: rgba(17, 24, 51, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 165, 60, 0.15);
  border-radius: 12px;
}

.glass-panel-bright {
  background: rgba(17, 24, 51, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 165, 60, 0.25);
  border-radius: 12px;
}

.hex-slot {
  transition: all 0.2s ease;
  cursor: pointer;
}

.hex-slot:hover {
  background: rgba(212, 165, 60, 0.2);
  border-color: rgba(212, 165, 60, 0.6);
  transform: scale(1.05);
}

.hex-slot.active {
  background: rgba(212, 165, 60, 0.3);
  border-color: rgba(212, 165, 60, 0.8);
  box-shadow: 0 0 12px rgba(212, 165, 60, 0.3);
}

.nav-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 0.3s ease;
}

.nav-hex:hover {
  transform: scale(1.1);
  filter: brightness(1.3);
}

.drop-zone {
  border: 2px dashed rgba(212, 165, 60, 0.4);
  animation: pulseBorder 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.drop-zone.drag-over {
  border-color: rgba(212, 165, 60, 0.9);
  background: rgba(212, 165, 60, 0.1);
}

.tab-pill {
  transition: all 0.3s ease;
}

.tab-pill.active {
  background: linear-gradient(135deg, rgba(212, 165, 60, 0.3), rgba(212, 165, 60, 0.1));
  border-color: rgba(212, 165, 60, 0.6);
  box-shadow: 0 0 20px rgba(212, 165, 60, 0.15);
}

.waveform-bar {
  animation: waveform 0.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 14, 26, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(212, 165, 60, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 60, 0.5);
}

.similarity-meter {
  background: linear-gradient(90deg, 
    rgba(212, 165, 60, 0.1) 0%,
    rgba(212, 165, 60, 0.4) var(--pct),
    rgba(10, 14, 26, 0.3) var(--pct)
  );
}

canvas.waveform-canvas {
  image-rendering: auto;
}