:root {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 176 84% 52%;
  --primary-foreground: 222 47% 7%;
  --secondary: 263 87% 66%;
  --secondary-foreground: 210 40% 98%;
  --muted: 221 33% 17%;
  --muted-foreground: 215 20% 74%;
  --destructive: 0 84% 62%;
  --destructive-foreground: 210 40% 98%;
  --border: 218 28% 24%;
  --card: 222 41% 11%;
  --shadow-sm: 0 8px 24px hsl(222 47% 3% / 0.28);
  --shadow-md: 0 18px 60px hsl(222 47% 3% / 0.36);
  --shadow-lg: 0 30px 90px hsl(176 84% 52% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 176 84% 52%;
  --primary-foreground: 222 47% 7%;
  --secondary: 263 87% 66%;
  --secondary-foreground: 210 40% 98%;
  --muted: 221 33% 17%;
  --muted-foreground: 215 20% 74%;
  --destructive: 0 84% 62%;
  --destructive-foreground: 210 40% 98%;
  --border: 218 28% 24%;
  --card: 222 41% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 12%, hsl(var(--primary) / 0.18), transparent 34%),
    radial-gradient(circle at 85% 8%, hsl(var(--secondary) / 0.18), transparent 32%),
    linear-gradient(135deg, hsl(var(--background)), hsl(229 46% 9%));
  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, select, textarea { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }

.glass {
  background: linear-gradient(145deg, hsl(var(--card) / 0.86), hsl(var(--muted) / 0.62));
  border: 1px solid hsl(var(--border) / 0.82);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.soft-card {
  background: hsl(var(--card) / 0.78);
  border: 1px solid hsl(var(--border) / 0.72);
  box-shadow: var(--shadow-sm);
}

.gradient-text {
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--foreground)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.floaty { animation: floaty 5.6s ease-in-out infinite; }
.pulse-glow { animation: pulseGlow 2.8s ease-in-out infinite; }
.slide-up { animation: slideUp .7s var(--transition-smooth) both; }
.spin-slow { animation: spinSlow 16s linear infinite; }

@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 hsl(var(--primary) / 0.0), var(--shadow-sm); }
  50% { box-shadow: 0 0 38px hsl(var(--primary) / 0.34), var(--shadow-lg); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

.focus-ring:focus-visible {
  outline: 3px solid hsl(var(--primary) / 0.72);
  outline-offset: 3px;
}

.safe-bottom { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.safe-top { padding-top: calc(0.75rem + env(safe-area-inset-top)); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.45); border-radius: 999px; }