:root {
  --background: 42 48% 96%;
  --foreground: 226 42% 13%;
  --primary: 163 83% 34%;
  --secondary: 29 92% 50%;
  --muted: 42 30% 90%;
  --muted-foreground: 226 14% 42%;
  --destructive: 0 72% 48%;
  --border: 42 24% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(226 42% 13% / 0.08);
  --shadow-md: 0 18px 50px hsl(226 42% 13% / 0.13);
  --shadow-lg: 0 26px 80px hsl(226 42% 13% / 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 226 42% 8%;
  --foreground: 42 48% 96%;
  --primary: 160 76% 42%;
  --secondary: 31 92% 58%;
  --muted: 226 26% 16%;
  --muted-foreground: 42 18% 70%;
  --destructive: 0 72% 58%;
  --border: 226 22% 24%;
  --card: 226 36% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  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 { transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); }
button:hover, a:hover { transform: translateY(-1px); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid hsl(var(--primary) / 0.35); outline-offset: 2px; }
button:disabled { cursor: not-allowed; transform: none; }
input, textarea, select { font-size: max(16px, 1rem); }

.field {
  width: 100%;
  min-height: 3rem;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0.75rem 1rem;
  font-weight: 700;
}

.hero-grid {
  background:
    radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.20), transparent 28rem),
    radial-gradient(circle at 10% 10%, hsl(var(--primary) / 0.24), transparent 24rem),
    linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
}

.gradient-badge {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  color: white;
  box-shadow: var(--shadow-sm);
}

.metric {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.metric span {
  display: block;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  font-weight: 800;
}
.metric strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 950;
}

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--card)), hsl(var(--muted)));
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
.safe-bottom { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }