.chart-card {
  background: var(--card-bg, #fff);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-top: 1.5rem;
  color: var(--text, #111); /* Dark mode safe */
}

.skeleton {
  height: 140px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.muted {
  color: var(--secondary-text, #666);
  padding-top: .5rem;
}

.alert {
  color: darkred;
  background: rgba(255, 0, 0, 0.1);
  padding: .6rem .8rem;
  border-radius: 6px;
  margin-top: .5rem;
  border: 1px solid rgba(255, 0, 0, 0.2);
}

.alert button {
  margin-left: .6rem;
  padding: .3rem .6rem;
  border-radius: 5px;
  border: 1px solid #aaa;
  background: white;
  cursor: pointer;
}