:root {
  --background: 210 33% 98%;
  --foreground: 219 36% 15%;
  --primary: 185 84% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 214 70% 95%;
  --secondary-foreground: 219 36% 18%;
  --muted: 215 24% 90%;
  --muted-foreground: 217 16% 42%;
  --destructive: 0 74% 49%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 23% 84%;
  --card: 0 0% 100%;
  --accent: 43 96% 56%;
  --shadow-sm: 0 2px 8px hsl(219 36% 15% / 0.06);
  --shadow-md: 0 12px 30px hsl(219 36% 15% / 0.10);
  --shadow-lg: 0 24px 70px hsl(219 36% 15% / 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 220 35% 8%;
  --foreground: 210 30% 96%;
  --primary: 183 84% 42%;
  --primary-foreground: 219 36% 8%;
  --secondary: 218 30% 16%;
  --secondary-foreground: 210 30% 96%;
  --muted: 218 22% 22%;
  --muted-foreground: 215 18% 70%;
  --destructive: 0 72% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 218 20% 24%;
  --card: 219 34% 12%;
  --accent: 43 96% 56%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.14), transparent 34rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--secondary) / 0.42));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a, input, textarea, select { transition: var(--transition-smooth); }

input, textarea, select {
  font-size: max(16px, 1rem);
}

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

.card {
  background: hsl(var(--card) / 0.92);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.input {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: 0.85rem 1rem;
  outline: none;
}

.input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
}

.btn-primary {
  min-height: 48px;
  border-radius: var(--radius-md);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-soft {
  min-height: 48px;
  border-radius: var(--radius-md);
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--primary));
  font-weight: 800;
  border: 1px solid hsl(var(--primary) / 0.18);
}

.btn-ghost {
  min-height: 44px;
  border-radius: var(--radius-md);
  color: hsl(var(--muted-foreground));
}

.btn-ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .82rem;
  font-weight: 800;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.nav-active {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

@media (min-width: 768px) {
  .safe-bottom { padding-bottom: 0; }
}

/* Modal Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}