body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ff00cc, #3333ff, #00ffcc);
  background-size: 400% 400%;
  animation: bgMove 12s ease infinite;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #fff;
  text-align: center;
}

@keyframes bgMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  animation: fadeIn 1.2s ease;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 8px #ff00ff, 0 0 12px #00ffff;
}

.subtitle {
  font-size: 16px;
  opacity: 0.9;
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
}

/* 圆形进度条 */
.circle {
  position: relative;
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 12px #00ffff);
}

.circle svg {
  transform: rotate(-90deg);
}

.circle circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.circle .bg {
  stroke: rgba(255, 255, 255, 0.2);
}

.circle .progress {
  stroke: url(#gradient);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s linear;
}

.circle .time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 6px #fff;
}

/* 霓虹按钮 */
.btn {
  padding: 12px 35px;
  font-size: 16px;
  background: linear-gradient(135deg, #ff00cc, #3333ff);
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 0 10px #ff00ff, 0 0 15px #00ffff;
  transition: all 0.3s ease;
}

.btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 15px #ff00ff, 0 0 25px #00ffff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}