.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skeleton-shimmer 1.4s var(--ease-std) infinite;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.skeleton--text { height: 12px; width: 100%; border-radius: 3px; }
.skeleton--text-sm { height: 9px; }
.skeleton--text-lg { height: 18px; }
.skeleton--row { height: 48px; }
.skeleton--card { height: 120px; border-radius: var(--r-md); }
.skeleton--circle { border-radius: 50%; }

.skeleton-stack { display: flex; flex-direction: column; gap: var(--s-2); }