:root {
  --background: 252 65% 4%;
  --foreground: 225 100% 96%;
  --primary: 190 100% 55%;
  --primary-foreground: 250 70% 6%;
  --secondary: 274 100% 62%;
  --secondary-foreground: 0 0% 100%;
  --muted: 245 24% 18%;
  --muted-foreground: 230 28% 73%;
  --destructive: 345 96% 59%;
  --destructive-foreground: 0 0% 100%;
  --border: 230 45% 28%;
  --card: 248 50% 10%;
  --shadow-sm: 0 8px 24px rgba(0, 245, 255, 0.12);
  --shadow-md: 0 18px 48px rgba(151, 71, 255, 0.22);
  --shadow-lg: 0 28px 90px rgba(0, 245, 255, 0.26);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}

.dark {
  --background: 252 70% 4%;
  --foreground: 225 100% 97%;
  --primary: 187 100% 56%;
  --secondary: 276 100% 64%;
  --muted: 247 29% 16%;
  --destructive: 345 100% 61%;
  --border: 232 48% 26%;
  --card: 249 54% 9%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 10% 0%, hsla(var(--primary), .2), transparent 34%), radial-gradient(circle at 92% 18%, hsla(var(--secondary), .22), transparent 30%), linear-gradient(180deg, hsl(var(--background)), #070612 60%, #020105);
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

.glass {
  background: linear-gradient(145deg, hsla(var(--card), .82), hsla(var(--muted), .42));
  border: 1px solid hsla(var(--border), .7);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px);
}

.neon-text { text-shadow: 0 0 18px hsla(var(--primary), .75), 0 0 32px hsla(var(--secondary), .45); }
.neon-ring { box-shadow: 0 0 0 1px hsla(var(--primary), .45), 0 0 30px hsla(var(--primary), .22), inset 0 0 24px hsla(var(--secondary), .12); }
.viral-glow { animation: viralPulse 2.4s ease-in-out infinite; }
.floaty { animation: floaty 5s ease-in-out infinite; }
.pulse-glow { animation: pulseGlow 1.8s ease-in-out infinite; }
.equalizer span { animation: bars 900ms ease-in-out infinite alternate; transform-origin: bottom; }
.equalizer span:nth-child(2) { animation-delay: 120ms; }
.equalizer span:nth-child(3) { animation-delay: 240ms; }
.equalizer span:nth-child(4) { animation-delay: 80ms; }
.equalizer span:nth-child(5) { animation-delay: 190ms; }
.reaction-pop { animation: reactionPop 900ms ease-out forwards; }
.swipe-card { touch-action: pan-y; }
.timeline-clip { animation: timelinePulse 1.25s ease-in-out infinite alternate; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes viralPulse { 0%,100% { box-shadow: 0 0 22px hsla(var(--primary), .22), 0 0 42px hsla(var(--secondary), .18); } 50% { box-shadow: 0 0 36px hsla(var(--primary), .48), 0 0 78px hsla(var(--secondary), .34); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 22px hsla(var(--primary), .35), 0 0 45px hsla(var(--secondary), .2); } 50% { box-shadow: 0 0 42px hsla(var(--primary), .75), 0 0 88px hsla(var(--secondary), .42); transform: scale(1.04); } }
@keyframes timelinePulse { from { opacity: .55; transform: scaleY(.85); } to { opacity: 1; transform: scaleY(1); } }
@keyframes bars { from { transform: scaleY(.22); opacity: .55; } to { transform: scaleY(1); opacity: 1; } }
@keyframes reactionPop { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-90px) scale(1.6) rotate(12deg); opacity: 0; } }

.safe-bottom { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.safe-top { padding-top: env(safe-area-inset-top); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: linear-gradient(hsl(var(--primary)), hsl(var(--secondary))); border-radius: 999px; }