:root {
  --background: 258 55% 7%;
  --foreground: 210 40% 98%;
  --primary: 267 96% 70%;
  --primary-foreground: 260 60% 8%;
  --secondary: 190 95% 55%;
  --secondary-foreground: 250 50% 7%;
  --muted: 258 28% 20%;
  --muted-foreground: 240 18% 76%;
  --destructive: 345 95% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 40% 28%;
  --card: 258 42% 13%;
  --shadow-sm: 0 8px 24px hsl(267 96% 70% / .18);
  --shadow-md: 0 18px 55px hsl(190 95% 55% / .22);
  --shadow-lg: 0 30px 90px hsl(320 95% 65% / .32);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: .75rem;
  --radius-md: 1.2rem;
  --radius-lg: 2rem;
}
.dark {
  --background: 258 55% 7%;
  --foreground: 210 40% 98%;
  --primary: 267 96% 70%;
  --secondary: 190 95% 55%;
  --muted: 258 28% 20%;
  --destructive: 345 95% 60%;
  --border: 260 40% 28%;
  --card: 258 42% 13%;
}
.light {
  --background: 250 75% 97%;
  --foreground: 258 58% 10%;
  --primary: 268 82% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 190 88% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 250 38% 90%;
  --muted-foreground: 254 25% 34%;
  --destructive: 345 86% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 252 30% 82%;
  --card: 0 0% 100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button, input, textarea { font: inherit; }
::selection { background: hsl(var(--primary) / .45); }
.glass { background: linear-gradient(135deg, hsl(var(--card) / .78), hsl(var(--card) / .42)); border: 1px solid hsl(var(--border) / .75); box-shadow: var(--shadow-sm); backdrop-filter: blur(22px); }
.neon-text { background: linear-gradient(90deg, hsl(var(--secondary)), hsl(var(--primary)), #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px hsl(var(--primary) / .35)); }
.neon-button { position: relative; overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.neon-button:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-md); }
.neon-button:before { content: ''; position: absolute; inset: -70%; background: conic-gradient(from 90deg, transparent, hsl(var(--secondary) / .65), hsl(var(--primary) / .7), transparent); animation: spin 4s linear infinite; opacity: .42; }
.neon-button > span { position: relative; z-index: 1; }
.space-bg { background: radial-gradient(circle at 20% 20%, hsl(var(--secondary) / .35), transparent 28%), radial-gradient(circle at 80% 10%, hsl(320 95% 62% / .28), transparent 30%), radial-gradient(circle at 50% 90%, hsl(var(--primary) / .28), transparent 36%), linear-gradient(145deg, hsl(258 65% 7%), hsl(235 55% 8%) 55%, hsl(280 70% 10%)); }
.grid-floor { background-image: linear-gradient(hsl(var(--secondary) / .16) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / .16) 1px, transparent 1px); background-size: 44px 44px; transform: perspective(560px) rotateX(62deg); transform-origin: bottom; }
.particle { position: absolute; width: 4px; height: 4px; border-radius: 999px; background: hsl(var(--secondary)); box-shadow: 0 0 20px hsl(var(--secondary)); animation: float 8s ease-in-out infinite; opacity: .72; }
.scanline { background: linear-gradient(180deg, transparent, hsl(var(--secondary) / .12), transparent); animation: scan 3.2s linear infinite; }
.visualizer-bar { animation: pulsebar 1.2s ease-in-out infinite; transform-origin: bottom; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-42px) translateX(18px); } }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes pulsebar { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, hsl(var(--muted) / .4), hsl(var(--primary) / .18), hsl(var(--muted) / .4)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
textarea:focus, input:focus, button:focus-visible, a:focus-visible { outline: 2px solid hsl(var(--secondary)); outline-offset: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(hsl(var(--primary)), hsl(var(--secondary))); border-radius: 999px; }