/* Skeleton Loading System */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.skeleton {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 100%;
  display: inline-block;
  position: relative;
  animation: shimmer 1.2s linear infinite forwards;
  border-radius: 4px;
}

.skeleton-text {
  height: 12px;
  width: 100%;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.skeleton-card {
  height: 200px;
  width: 100%;
  border-radius: 16px;
}

/* Dark Mode Skeletons */
body.dark-mode .skeleton {
  background: #1f2937;
  background-image: linear-gradient(to right, #1f2937 0%, #374151 20%, #1f2937 40%, #1f2937 100%);
}