@keyframes shine {
  0% {
    background-position: -100px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 400px 100%;
  animation: shine 1.2s ease-in-out infinite;
  border-radius: 4px;
}

/* Left tab (Unsolved / Solved) */
.skeleton-tab {
  width: 80px;
  height: 30px;
  border-radius: 6px;
}

/* Scrollable category buttons */
.skeleton-category-container {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
}

.skeleton-category {
  width: 120px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Loading progress bar */
.skeleton-progress-bar-container {
  height: 6px;
  background-color: #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.skeleton-progress-bar {
  height: 100%;
  width: 60%;
  background-color: orange;
  border-radius: 4px;
  animation: loadingBar 1.5s infinite ease-in-out;
}

@keyframes loadingBar {
  0% {
    width: 10%;
  }
  50% {
    width: 80%;
  }
  100% {
    width: 10%;
  }
}