:root {
  --background: 220 36% 97%;
  --foreground: 224 42% 10%;
  --primary: 191 100% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 267 68% 52%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 18% 90%;
  --muted-foreground: 224 16% 42%;
  --destructive: 0 76% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 20% 82%;
  --card: 0 0% 100%;
  --success: 150 70% 36%;
  --warning: 36 94% 48%;
  --shadow-sm: 0 2px 10px hsl(224 42% 10% / 0.06);
  --shadow-md: 0 12px 30px hsl(224 42% 10% / 0.10);
  --shadow-lg: 0 24px 70px hsl(224 42% 10% / 0.16);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
}
.dark {
  --background: 224 36% 7%;
  --foreground: 210 32% 96%;
  --primary: 186 100% 42%;
  --primary-foreground: 224 42% 8%;
  --secondary: 270 86% 68%;
  --secondary-foreground: 224 42% 8%;
  --muted: 224 22% 16%;
  --muted-foreground: 215 18% 70%;
  --destructive: 0 82% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 18% 24%;
  --card: 224 30% 11%;
  --success: 151 72% 45%;
  --warning: 38 96% 58%;
  --shadow-sm: 0 2px 10px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 14px 34px hsl(0 0% 0% / 0.32);
  --shadow-lg: 0 26px 80px hsl(0 0% 0% / 0.44);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / .18), transparent 34rem),
    radial-gradient(circle at 90% 18%, hsl(var(--secondary) / .14), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
.card {
  background: hsl(var(--card) / .86);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}
.soft-card {
  background: linear-gradient(145deg, hsl(var(--card) / .92), hsl(var(--muted) / .40));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
}
.btn-primary {
  min-height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary:active { transform: scale(.98); }
.nav-safe { padding-bottom: calc(.65rem + env(safe-area-inset-bottom)); }
.top-safe { padding-top: calc(1rem + env(safe-area-inset-top)); }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; }
canvas { width: 100%; height: 260px; display: block; }
@media (min-width: 768px) { canvas { height: 330px; } }