/* Skeleton cards (loading placeholders) — uses global @keyframes shimmer (base.css) */

/* ===== Skeleton cards (loading state) ===== */
.skeleton-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-surface-hover) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-line {
  height: 12px;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-xs);
  margin-bottom: 10px;
}

.skeleton-line--short { width: 40%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--full { width: 100%; }