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

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.04)
  );
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-elevated, #222);
}

.skeleton-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

.skeleton-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.skeleton-card__title {
  width: 60%;
  height: 14px;
  border-radius: 4px;
}

.skeleton-card__desc {
  width: 85%;
  height: 12px;
  border-radius: 4px;
}

.skeleton-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px;
}