/* Neon panels & subtle grid */
.panel, .kpi-card, .card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 0px rgba(0,0,0,0.4), 0 0 30px rgba(99,102,241,0.08);
}

.kpi-label { color: #94a3b8; font-size: 0.825rem; }
.kpi-value { font-size: 2rem; font-weight: 700; margin-top: 4px; }

/* Starfield backdrop (CSS only) */
.starfield {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 50%, rgba(255,255,255,0.25) 50%, transparent 51%);
  animation: twinkle 6s linear infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.35; filter: blur(0.2px); }
  100% { opacity: 0.6;  filter: blur(0.0px); }
}

/* Hover glow on cards */
.card:hover {
  box-shadow: 0 0 0px rgba(0,0,0,0.4), 0 0 40px rgba(99,102,241,0.18);
  transform: translateY(-1px);
  transition: all 160ms ease;
}

/* Accessibility helpers */
:focus-visible {
  outline: 2px dashed #818cf8;
  outline-offset: 3px;
}