/* 加载组件样式 */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.loading-container.show {
  opacity: 1;
  visibility: visible;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  padding: 40rpx;
  backdrop-filter: blur(10rpx);
}

/* 旋转加载器 */
.loading-spinner {
  border: 4rpx solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-spinner.small {
  width: 32rpx;
  height: 32rpx;
  border-width: 3rpx;
}

.loading-spinner.medium {
  width: 48rpx;
  height: 48rpx;
  border-width: 4rpx;
}

.loading-spinner.large {
  width: 64rpx;
  height: 64rpx;
  border-width: 5rpx;
}

/* 点状加载器 */
.loading-dots {
  display: flex;
  gap: 8rpx;
}

.loading-dots .dot {
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite both;
}

.loading-dots.small .dot {
  width: 8rpx;
  height: 8rpx;
}

.loading-dots.medium .dot {
  width: 12rpx;
  height: 12rpx;
}

.loading-dots.large .dot {
  width: 16rpx;
  height: 16rpx;
}

.loading-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

/* 脉冲加载器 */
.loading-pulse {
  border-radius: 50%;
  animation: pulse-scale 1s ease-in-out infinite;
}

.loading-pulse.small {
  width: 32rpx;
  height: 32rpx;
}

.loading-pulse.medium {
  width: 48rpx;
  height: 48rpx;
}

.loading-pulse.large {
  width: 64rpx;
  height: 64rpx;
}

/* 加载文本 */
.loading-text {
  margin-top: 24rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 1;
  }
  40% {
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}