:root {
  --background: 165 40% 97%;
  --foreground: 174 34% 13%;
  --primary: 165 76% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 92% 62%;
  --secondary-foreground: 174 34% 13%;
  --muted: 168 18% 89%;
  --muted-foreground: 174 13% 42%;
  --destructive: 0 76% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 166 24% 83%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 16px rgba(16, 88, 77, 0.07);
  --shadow-md: 0 14px 34px rgba(16, 88, 77, 0.11);
  --shadow-lg: 0 24px 64px rgba(16, 88, 77, 0.16);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}
.dark {
  --background: 174 32% 8%;
  --foreground: 160 24% 94%;
  --primary: 164 72% 47%;
  --primary-foreground: 174 34% 9%;
  --secondary: 40 88% 58%;
  --secondary-foreground: 174 34% 9%;
  --muted: 174 22% 16%;
  --muted-foreground: 160 14% 72%;
  --destructive: 0 72% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 174 20% 22%;
  --card: 174 27% 12%;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: hsl(var(--background)); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, hsl(var(--primary) / .16), transparent 34%), hsl(var(--background)); color: hsl(var(--foreground)); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { touch-action: manipulation; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.safe-bottom { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.glass { background: hsl(var(--card) / .78); backdrop-filter: blur(18px); }
.pulse-dot { animation: pulseDot 1.7s infinite; }
@keyframes pulseDot { 0%, 100% { transform: scale(.82); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }
.item-pop { animation: itemPop .22s ease both; }
@keyframes itemPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.skeleton { background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--card)), hsl(var(--muted))); background-size: 220% 100%; animation: shimmer 1.1s infinite linear; }
@keyframes shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }