@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@500;700;900&display=swap');

:root {
  --background: 46 55% 96%;
  --foreground: 155 38% 9%;
  --primary: 154 74% 21%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 90% 61%;
  --secondary-foreground: 155 38% 9%;
  --muted: 152 14% 88%;
  --muted-foreground: 154 12% 37%;
  --destructive: 0 78% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 154 18% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(154 34% 18% / 0.08);
  --shadow-md: 0 18px 48px hsl(154 34% 18% / 0.14);
  --shadow-lg: 0 30px 80px hsl(154 34% 18% / 0.22);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}

.dark {
  --background: 158 36% 5%;
  --foreground: 48 70% 94%;
  --primary: 154 62% 43%;
  --primary-foreground: 158 36% 5%;
  --secondary: 45 92% 61%;
  --secondary-foreground: 158 36% 5%;
  --muted: 158 22% 14%;
  --muted-foreground: 150 10% 70%;
  --destructive: 0 76% 61%;
  --destructive-foreground: 0 0% 100%;
  --border: 155 20% 22%;
  --card: 158 30% 9%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, hsl(var(--secondary) / 0.25), transparent 30rem),
    radial-gradient(circle at 85% 15%, hsl(var(--primary) / 0.22), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, Poppins, Outfit, system-ui, sans-serif;
  transition: background var(--transition-smooth), color var(--transition-smooth);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
input, textarea, select { font-size: max(16px, 1rem); }
button { min-height: 44px; }

.glass {
  background: hsl(var(--card) / 0.72);
  border: 1px solid hsl(var(--border) / 0.72);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}
.neon {
  box-shadow: 0 0 0 1px hsl(var(--secondary) / 0.28), 0 0 34px hsl(var(--primary) / 0.24);
}
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--muted)); }
.bg-4 { background: hsl(var(--primary)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.text-tertiary { color: hsl(var(--primary)); }
.accent { color: hsl(var(--secondary)); }
.safe-bottom { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.safe-top { padding-top: env(safe-area-inset-top); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .52; transform: scale(1); }
  50% { opacity: .88; transform: scale(1.06); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

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