@import "tailwindcss";

:root {
  --background: #05060a;
  --foreground: #f2f4f7;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #05060a;
    --foreground: #f2f4f7;
  }
}

body {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(34, 211, 238, 0.12), transparent),
    radial-gradient(600px 500px at 95% 40%, rgba(192, 38, 211, 0.08), transparent),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}

.glass-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 45px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
}

.metric-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.95rem;
  padding: 0.9rem;
}

.metric-label {
  color: rgb(212 212 216);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metric-value {
  color: white;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.3rem;
}