.skeleton {
  width: 100%;
}

.skeleton--active .sk-bar,
.skeleton--active .sk-circle {
  animation: skShimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 100%);
  background-size: 200% 100%;
}

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

.sk-bar {
  height: 24rpx;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
  background-color: rgba(0, 0, 0, 0.08);
}

.sk-bar--title { width: 60%; height: 32rpx; }
.sk-bar--body  { width: 100%; }
.sk-bar--small { width: 40%; height: 20rpx; margin-bottom: 0; }
.sk-bar--center { width: 60%; height: 40rpx; }

.sk-card {
  background: var(--card-bg, #FFFFFF);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
}

.sk-circle {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.sk-circle--big {
  width: 360rpx;
  height: 360rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.sk-list {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  gap: 24rpx;
}

.sk-list-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  .sk-card { background: var(--card-bg, #26262B); }
  .skeleton--active .sk-bar,
  .skeleton--active .sk-circle {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
  }
  .sk-bar,
  .sk-circle {
    background-color: rgba(255, 255, 255, 0.06);
  }
}