body {
  /* 保持页面背景为白色 */
  background: #000000;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  padding-bottom: 70px; /* 为底部按钮留出空间 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列 */
}

.container {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #000000; /* 将容器背景改为黑色 */
  border-radius: 10px; /* 为容器添加圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
  flex: 1; /* 让容器占用所有可用空间 */
  box-sizing: border-box; /* 确保padding不会增加实际尺寸 */
  overflow-y: auto; /* 如果内容过多允许纵向滚动 */
}

.text-section {
  margin-bottom: 20px;
  background-color: #ffffff; /* 文本区域背景为白色 */
  padding: 15px; /* 添加内边距 */
  border-radius: 8px; /* 添加圆角 */
  flex-shrink: 0; /* 防止文本区域被压缩 */
}

.text-section h1 {
  margin-bottom: 10px;
  font-size: 28px;
  /* 移除文字渐变效果 */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #000000; /* 使用黑色文字 */
  text-align: center;
  font-weight: bold;
}

.text-section p {
  /* 移除文字渐变效果 */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #222222; /* 使用深灰色文字 */
  line-height: 1.5;
  font-size: 16px;
  text-align: center;
}

/* 替换原来的 image-section 样式为 Swiper 相关样式 */
.swiper {
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  margin-bottom: 20px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  z-index: 100; /* 确保按钮始终位于最上层 */
}

/* 保留按钮的样式和动画效果，添加边框及其动画 */
.download-btn {
  display: inline-flex; /* 改为 inline-flex 以便更好地对齐内部元素 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  padding: 12px 30px;
  background-color: #ffb6c1; /* 初始背景色为粉色 */
  color: #333; /* 初始文字颜色 */
  text-decoration: none;
  border-radius: 500px;
  font-weight: bold;
  /* 添加边框 */
  border: 2px solid #666666; /* 初始边框颜色与文字颜色相同 */
  transition:
    transform 0.08s ease,
    background-color 0.3s ease,
    border-color 0.3s ease; /* 添加边框过渡效果 */
  /* 添加四个动画：缩放、背景颜色变化、文字颜色变化和边框颜色变化 */
  animation:
    pulse 1s infinite alternate,
    bgColorChange 1s infinite alternate,
    textColorChange 1s infinite alternate,
    borderColorChange 1s infinite alternate; /* 添加边框颜色动画 */
}

/* 按钮图标样式 */
.btn-icon {
  height: 24px; /* 控制图标高度 */
  width: auto; /* 保持宽高比 */
  margin-right: 8px; /* 图标和文字之间的间距 */
  border-radius: 4px; /* 图标圆角 */
  vertical-align: middle; /* 确保图标垂直居中 */
}

.download-btn:hover {
  background-color: #ff9aaf;
  color: #000000; /* 悬停时文字颜色为纯黑色 */
  border-color: #000000; /* 悬停时边框颜色为黑色 */
  transform: scale(1.15);
  animation-play-state: paused;
}

/* 定义更明显的脉冲动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

/* 调整背景颜色渐变动画时长，与脉冲动画相同 */
@keyframes bgColorChange {
  0% {
    background-color: #ffb6c1; /* 粉色 */
  }
  100% {
    background-color: #ffffff; /* 白色 */
  }
}

/* 添加文字颜色动画，从深灰色到黑色 */
@keyframes textColorChange {
  0% {
    color: #666666; /* 较浅的灰色 */
  }
  100% {
    color: #000000; /* 黑色 */
  }
}

/* 添加边框颜色动画，与文字颜色动画同步 */
@keyframes borderColorChange {
  0% {
    border-color: #666666; /* 较浅的灰色，与文字颜色相同 */
  }
  100% {
    border-color: #000000; /* 黑色，与文字颜色相同 */
  }
}

/* 增强点击效果 */
.download-btn:active {
  transform: scale(0.85);
  transition: transform 0.05s;
  background-color: #ff7b8f; /* 点击时的背景颜色 */
  color: #ffffff; /* 点击时文字变为白色 */
  border-color: #ffffff; /* 点击时边框颜色也变为白色 */
}