body {
  font-family: 'Inter', sans-serif;
  background-color: #FAFAFA;
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.02);
}

/* Subtle micro-animations */
@keyframes pulseGlow {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

#kpi-solar {
  animation: pulseGlow 3s infinite ease-in-out;
}

/* Animated flow graph wires */
.wire-flow {
  stroke: currentColor;
  stroke-dasharray: 8;
  animation: flowAnim 1s linear infinite;
}
.wire-flow.reverse {
  animation: flowAnimReverse 1s linear infinite;
}

@keyframes flowAnim {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}
@keyframes flowAnimReverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 16; }
}