/* Shimmer Effect */
.skeleton {
  background-color: #e2e2e2;
  background-image: linear-gradient(90deg, #e2e2e2 0px, #f5f5f5 40px, #e2e2e2 80px);
  background-size: 600px;
  background-repeat: no-repeat;
  animation: shimmer 1.2s infinite linear;
}

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

/* Grid Layout */
.skeleton-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

/* Single Card */
.skeleton-topic-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  text-align: center;
  position: relative;
}

/* Red header placeholder */
.skeleton-card-header {
  height: 40px;
  width: 100%;
  border-radius: 16px 16px 0 0;
  margin-bottom: 16px;
}

/* Circular icon (download) */
.skeleton-download-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: -28px auto 16px auto;
  position: relative;
  z-index: 1;
}

/* Title */
.skeleton-title-line {
  width: 60%;
  height: 14px;
  margin: 0 auto 10px auto;
  border-radius: 6px;
}

/* Subtitle */
.skeleton-subtitle-line {
  width: 80%;
  height: 12px;
  margin: 0 auto;
  border-radius: 6px;
}