:root {
  --background: 218 45% 96%;
  --foreground: 222 35% 9%;
  --primary: 190 100% 48%;
  --primary-foreground: 220 40% 6%;
  --secondary: 143 92% 48%;
  --secondary-foreground: 220 40% 6%;
  --muted: 220 20% 88%;
  --muted-foreground: 218 16% 42%;
  --destructive: 0 86% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 19% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.16);
  --shadow-md: 0 18px 50px rgba(0,0,0,.28);
  --shadow-lg: 0 28px 90px rgba(0,0,0,.42);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}
.dark {
  --background: 220 52% 5%;
  --foreground: 190 34% 96%;
  --primary: 190 100% 52%;
  --primary-foreground: 220 55% 5%;
  --secondary: 143 94% 48%;
  --secondary-foreground: 220 55% 5%;
  --muted: 220 28% 15%;
  --muted-foreground: 214 18% 72%;
  --destructive: 0 86% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 27% 21%;
  --card: 220 42% 9%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0%, hsla(var(--primary), .18), transparent 34%), radial-gradient(circle at 85% 12%, hsla(var(--secondary), .14), transparent 32%), hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
.glass { background: hsla(var(--card), .78); border: 1px solid hsla(var(--border), .75); backdrop-filter: blur(18px); box-shadow: var(--shadow-sm); }
.neon { box-shadow: 0 0 0 1px hsla(var(--primary), .3), 0 0 34px hsla(var(--primary), .18); }
.gradient-text { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-hover { transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth); }
.card-hover:hover { transform: translateY(-4px); border-color: hsla(var(--primary), .55); box-shadow: var(--shadow-md); }
.safe-bottom { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.floaty { animation: floaty 5s ease-in-out infinite; }