/* 基础页面样式 */
body {
  margin: 0; /* 去掉默认外边距 */
  font-family: system-ui, sans-serif; /* 使用系统默认无衬线字体 */
  background: #0b0f1d; /* 背景色为深蓝黑 */
  color: #fff; /* 文字默认白色 */
}

/* 覆盖全屏的加载层 */
.loader {
  position: fixed; /* 固定在视口位置 */
  inset: 0; /* 上下左右都贴合窗口 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background: rgba(11,15,29,.96); /* 半透明深色背景 */
}

/* 加载卡片容器 */
.loader-card {
  width: 300px; height: 180px; /* 卡片大小 */
  padding: 24px; /* 内边距 */
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); /* 半透明渐变背景 */
  border-radius: 20px; /* 圆角 */
  border: 1px solid rgba(255,255,255,.15); /* 半透明边框 */
  text-align: center; /* 内容居中对齐 */
  box-shadow: 0 10px 30px rgba(0,0,0,.4); /* 阴影效果 */
}

/* 中间的旋转圆形 logo */
.logo {
  width: 50px; height: 50px; /* 大小 */
  margin: 0 auto 12px; /* 居中，底部 12px 外边距 */
  border-radius: 50%; /* 圆形 */
  background: radial-gradient(circle at 30% 30%, #fff, #fde68a 30%, #a78bfa 70%, #4c1d95 100%); /* 径向渐变（亮白-金黄-紫-深紫） */
  border: 2px solid rgba(255,255,255,.3); /* 半透明白色边框 */
  animation: spin 6s linear infinite; /* 无限旋转动画 */
}

/* 旋转动画关键帧 */
@keyframes spin {
  to { transform: rotate(1turn); } /* 旋转一圈 */
}

/* 进度条外框 */
.progress {
  margin-top: 14px; /* 顶部间距 */
  height: 10px; /* 高度 */
  border-radius: 999px; /* 圆角（胶囊形状） */
  background: rgba(255,255,255,.15); /* 浅灰背景 */
  overflow: hidden; /* 隐藏超出的部分 */
}

/* 进度条内的填充部分 */
.bar {
  height: 100%; /* 占满外框高度 */
  width: 0%; /* 初始宽度为 0% */
  background: linear-gradient(90deg, #f59e0b, #7c3aed); /* 渐变色（橙→紫） */
  transition: width .2s ease; /* 宽度变化带动画过渡 */
}

/* 百分比文字 */
.percent {
  margin-top: 10px; /* 上间距 */
  font-size: 13px; /* 字体大小 */
  color: #cbd5e1; /* 浅灰色文字 */
}

/* CTA 按钮：圆角、轻阴影、悬浮缩放 */
/* CTA 按钮：圆角、轻阴影、居中显示 */
.btn {
  position: fixed;               /* 固定定位 */
  top: 50%;                      /* 距离顶部 50% */
  left: 50%;                     /* 距离左边 50% */
  transform: translate(-50%, -50%) scale(1); /* 居中对齐 + 初始缩放 */
  
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(90deg, #f59e0b, #7c3aed);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .2s ease, opacity .2s ease;
  z-index: 1000;                 /* 确保在最上层 */
}

.btn:hover {
  transform: translate(-50%, -50%) scale(1.05); /* 居中缩放 */
  filter: brightness(1.05);
}

/* 初始隐藏 */
.hidden { display: none; }

/* 显示时播放淡入缩放 */
.btn.show {
  display: inline-block;
  animation: btnIn .35s ease-out forwards;
}

@keyframes btnIn {
  from { opacity: 0; transform: translate(-50%, -45%) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}