:root {
  --background: 210 60% 98%;
  --foreground: 222 56% 12%;
  --primary: 187 100% 45%;
  --primary-foreground: 222 60% 8%;
  --secondary: 252 88% 66%;
  --secondary-foreground: 0 0% 100%;
  --muted: 213 38% 91%;
  --muted-foreground: 219 18% 38%;
  --destructive: 350 84% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 32% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 22px hsl(222 56% 12% / 0.08);
  --shadow-md: 0 16px 38px hsl(222 56% 12% / 0.12);
  --shadow-lg: 0 28px 70px hsl(222 56% 12% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 218 65% 7%;
  --foreground: 193 100% 96%;
  --primary: 187 100% 52%;
  --primary-foreground: 220 80% 8%;
  --secondary: 252 86% 68%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 36% 15%;
  --muted-foreground: 210 22% 72%;
  --destructive: 350 92% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 34% 20%;
  --card: 219 52% 10%;
  --shadow-sm: 0 8px 24px hsl(190 100% 50% / 0.08);
  --shadow-md: 0 18px 46px hsl(190 100% 50% / 0.12);
  --shadow-lg: 0 32px 90px hsl(190 100% 50% / 0.16);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); }
body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
button:disabled { cursor: not-allowed; }
.aurora { position: fixed; inset: -20% -10% auto -10%; height: 520px; pointer-events: none; background: radial-gradient(circle at 20% 20%, hsl(var(--primary) / 0.32), transparent 30%), radial-gradient(circle at 80% 10%, hsl(var(--secondary) / 0.26), transparent 28%), radial-gradient(circle at 50% 70%, hsl(var(--primary) / 0.12), transparent 35%); filter: blur(18px); opacity: 0.9; }
.spin { animation: spin 0.9s linear infinite; }
.pop { animation: pop 1.8s var(--transition-smooth) both; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: translateX(-50%) translateY(-12px) scale(0.92); opacity: 0; } 18% { transform: translateX(-50%) translateY(0) scale(1.03); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-10px) scale(0.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }