:root {
  --background: 210 33% 98%;
  --foreground: 218 39% 12%;
  --primary: 246 78% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 39 96% 58%;
  --secondary-foreground: 218 39% 12%;
  --muted: 220 27% 92%;
  --muted-foreground: 219 14% 42%;
  --destructive: 348 78% 49%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 24% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 2px 8px hsl(222 47% 11% / 0.08);
  --shadow-md: 0 12px 30px hsl(222 47% 11% / 0.10);
  --shadow-lg: 0 24px 60px hsl(222 47% 11% / 0.16);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.55rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
}

.dark {
  --background: 224 38% 8%;
  --foreground: 214 32% 93%;
  --primary: 252 92% 72%;
  --primary-foreground: 224 38% 8%;
  --secondary: 41 94% 62%;
  --secondary-foreground: 224 38% 8%;
  --muted: 224 28% 16%;
  --muted-foreground: 217 17% 72%;
  --destructive: 350 86% 66%;
  --destructive-foreground: 224 38% 8%;
  --border: 224 22% 24%;
  --card: 224 33% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.18), transparent 36rem),
    radial-gradient(circle at bottom right, hsl(var(--secondary) / 0.20), transparent 30rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }
button { min-height: 44px; }
button:disabled { cursor: not-allowed; }

.field {
  min-height: 44px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 0.65rem 0.85rem;
  color: hsl(var(--foreground));
  font-size: max(16px, 1rem);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

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

.action-secondary {
  min-height: 44px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  padding: 0.65rem 1rem;
  font-weight: 800;
  transition: transform var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}

.action-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

::selection {
  background: hsl(var(--primary) / 0.24);
}

@media (max-width: 640px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}