:root {
  --background: 255 45% 98%;
  --foreground: 252 42% 12%;
  --primary: 265 92% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 86% 50%;
  --secondary-foreground: 252 42% 10%;
  --muted: 253 24% 92%;
  --muted-foreground: 252 14% 42%;
  --destructive: 350 84% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 252 24% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(265 92% 25% / 0.08);
  --shadow-md: 0 18px 48px hsl(265 92% 25% / 0.14);
  --shadow-lg: 0 28px 90px hsl(265 92% 25% / 0.24);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}

.dark {
  --background: 252 48% 7%;
  --foreground: 250 45% 96%;
  --primary: 268 96% 68%;
  --primary-foreground: 252 48% 8%;
  --secondary: 184 94% 58%;
  --secondary-foreground: 252 48% 8%;
  --muted: 252 28% 16%;
  --muted-foreground: 250 18% 72%;
  --destructive: 350 90% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 252 24% 24%;
  --card: 252 38% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.18), transparent 34rem),
    radial-gradient(circle at top right, hsl(var(--secondary) / 0.18), transparent 30rem),
    hsl(var(--background));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a { transition: var(--transition-smooth); }
.glass {
  background: hsl(var(--card) / 0.78);
  border: 1px solid hsl(var(--border) / 0.72);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
}
.orb {
  background: conic-gradient(from 180deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--primary)));
  filter: blur(0.2px);
}
.pulse-ring { animation: pulseRing 2.2s infinite; }
.floaty { animation: floaty 5s ease-in-out infinite; }
.scanline { animation: scanline 2.8s ease-in-out infinite; }

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.34); }
  70% { box-shadow: 0 0 0 18px hsl(var(--primary) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes scanline {
  0% { transform: translateX(-110%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

::selection { background: hsl(var(--primary) / 0.24); }