:root {
  --background: 218 33% 98%;
  --foreground: 224 30% 14%;
  --primary: 217 91% 60%;
  --secondary: 168 65% 44%;
  --muted: 218 20% 92%;
  --destructive: 0 84% 60%;
  --border: 220 20% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.11);
  --shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.6rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 224 33% 9%;
  --foreground: 210 40% 96%;
  --primary: 212 100% 68%;
  --secondary: 168 70% 52%;
  --muted: 223 20% 17%;
  --destructive: 0 78% 62%;
  --border: 223 18% 24%;
  --card: 224 29% 12%;
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.44);
}

* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, hsla(var(--primary), 0.11), transparent 24%),
    radial-gradient(circle at top right, hsla(var(--secondary), 0.10), transparent 26%),
    hsl(var(--background));
}

button, input, select, textarea {
  font: inherit;
}

.card-glow {
  position: relative;
  overflow: hidden;
}

.card-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, hsla(var(--primary), 0.18), transparent 35%, hsla(var(--secondary), 0.14));
  pointer-events: none;
  border-radius: inherit;
}

.soft-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.soft-scroll::-webkit-scrollbar-thumb {
  background: hsla(var(--foreground), 0.14);
  border-radius: 999px;
}

.soft-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.skeleton {
  background: linear-gradient(90deg, hsla(var(--foreground), 0.06) 25%, hsla(var(--foreground), 0.10) 50%, hsla(var(--foreground), 0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.fade-in {
  animation: fadeIn 0.35s var(--transition-smooth);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chart-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  background: linear-gradient(180deg, hsla(var(--primary), 0.05), transparent);
}

.metric-ring {
  background: conic-gradient(hsl(var(--primary)) 0deg, hsla(var(--primary), 0.18) 0deg);
}