:root {
  --background: 222 47% 5%;
  --foreground: 213 31% 91%;
  --primary: 174 88% 47%;
  --primary-foreground: 222 47% 6%;
  --secondary: 263 70% 62%;
  --secondary-foreground: 0 0% 100%;
  --muted: 222 22% 16%;
  --muted-foreground: 215 14% 68%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 218 24% 20%;
  --card: 222 34% 9%;
  --warning: 35 92% 58%;
  --success: 145 72% 44%;
  --info: 204 94% 62%;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 12px 35px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 80px rgba(0,0,0,.36);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: .55rem;
  --radius-md: .85rem;
  --radius-lg: 1.25rem;
}

.dark {
  --background: 222 47% 5%;
  --foreground: 213 31% 91%;
  --primary: 174 88% 47%;
  --secondary: 263 70% 62%;
  --muted: 222 22% 16%;
  --destructive: 0 84% 60%;
  --border: 218 24% 20%;
  --card: 222 34% 9%;
}

.light {
  --background: 210 36% 98%;
  --foreground: 222 47% 8%;
  --primary: 176 86% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 260 65% 55%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 30% 92%;
  --muted-foreground: 217 13% 42%;
  --destructive: 0 74% 50%;
  --border: 214 28% 84%;
  --card: 0 0% 100%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 15% 5%, hsl(var(--primary) / .12), transparent 27rem),
    radial-gradient(circle at 82% 12%, hsl(var(--secondary) / .13), transparent 32rem),
    hsl(var(--background));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select, textarea { font: inherit; }
button, a { transition: var(--transition-smooth); }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / .45); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / .45); }

.glass-card {
  background: linear-gradient(180deg, hsl(var(--card) / .92), hsl(var(--card) / .72));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.pulse-dot { position: relative; }
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid hsl(var(--primary) / .55);
  animation: ping 1.8s infinite;
}
@keyframes ping { 0% { transform: scale(.7); opacity: .8; } 80%,100% { transform: scale(1.65); opacity: 0; } }

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--border) / .75), hsl(var(--muted)));
  background-size: 220% 100%;
  animation: shimmer 1.35s infinite linear;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.chart-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.4s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

@media (max-width: 768px) {
  body { background-size: auto; }
}

@keyframes animate-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: animate-in 0.3s ease-out forwards;
}