/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 加载状态样式 */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

body.light-theme .loading {
  background: #ffffff;
}

/* Windows 11风格加载动画 - 圆润转条版本 */
.loading-spinner {
  width: 80px;
  height: 80px;
  position: relative;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.loading-spinner circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 188.4;
  stroke-dashoffset: 188.4;
  transform-origin: center;
  animation: spin 1.5s linear infinite, dash 1.5s linear infinite;
}

.loading-spinner circle:nth-child(1) {
  stroke: rgba(0, 120, 212, 0.2);
  stroke-dashoffset: 0;
}

.loading-spinner circle:nth-child(2) {
  stroke: url(#gradient);
}

.loading p {
  font-size: 1.2rem;
  color: #ffffff;
  font-weight: 500;
}

body.light-theme .loading p {
  color: #333;
}

/* 旋转动画 - 使用linear timing function使旋转更平滑 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 进度条动画 */
@keyframes dash {
  0% {
    stroke-dashoffset: 188.4;
    stroke-dasharray: 188.4;
  }
  50% {
    stroke-dashoffset: 47.1;
    stroke-dasharray: 188.4;
  }
  100% {
    stroke-dashoffset: -188.4;
    stroke-dasharray: 188.4;
  }
}