:root {
  --background: 218 48% 96%;
  --foreground: 220 48% 12%;
  --primary: 171 86% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 226 45% 18%;
  --secondary-foreground: 0 0% 100%;
  --muted: 217 24% 90%;
  --muted-foreground: 219 18% 39%;
  --destructive: 355 78% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 218 22% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px hsl(220 40% 20% / 0.08);
  --shadow-md: 0 16px 40px hsl(220 40% 20% / 0.12);
  --shadow-lg: 0 28px 70px hsl(220 40% 20% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
}
.dark {
  --background: 221 48% 8%;
  --foreground: 210 40% 96%;
  --primary: 171 82% 44%;
  --primary-foreground: 220 48% 8%;
  --secondary: 218 35% 16%;
  --secondary-foreground: 210 40% 96%;
  --muted: 218 27% 18%;
  --muted-foreground: 215 18% 68%;
  --destructive: 355 78% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 218 24% 24%;
  --card: 220 40% 12%;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); }
body { margin: 0; min-height: 100%; color: hsl(var(--foreground)); background: radial-gradient(circle at top left, hsl(var(--primary) / 0.16), transparent 34rem), hsl(var(--background)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button, input, select { font: inherit; }
input, select { font-size: max(16px, 1rem); }
.focus-ring:focus { outline: 3px solid hsl(var(--primary) / .35); outline-offset: 2px; }
.glass { background: hsl(var(--card) / .86); backdrop-filter: blur(16px); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-md); }
.qr-fallback { width: 188px; height: 188px; border-radius: 20px; background: conic-gradient(from 90deg, hsl(var(--foreground)) 0 25%, transparent 0 50%, hsl(var(--foreground)) 0 75%, transparent 0), linear-gradient(45deg, hsl(var(--primary) / .35), hsl(var(--secondary) / .15)); background-size: 38px 38px, 100% 100%; }
.safe-bottom { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }