/* ========= 可调样式入口（方便你后续维护） =========
   核心尺寸全部用 CSS 变量集中管理，按需修改即可：
   --logo-w/h:          顶部 LOGO 图片显示宽/高（仅用于桌面端）
   --top-btn-w/h:       顶部右侧下载按钮显示宽/高
   --slide-ar:          轮播图宽高比（1080/1247）
   --below-ar:          下方主图宽高比（1080/1463）
   --nav-btn:           上一/下一按钮边长（默认为 102px）
   --bottom-h:          底部固定横幅的高度
   --page-maxw:         页面最大内容宽度（为 1080 设计稿）
   ==================================================== */
:root {
  --logo-w: 1081px;
  --logo-h: 182px;
  --top-btn-w: 421px;
  --top-btn-h: 113px;
  --slide-ar: calc(1080 / 1247);
  /* aspect-ratio: 宽/高 */
  --below-ar: calc(1080 / 1463);
  --nav-btn: 102px;
  --bottom-h: 110px;
  --page-maxw: 1080px;
  --bg-width: 420px;
  --bg-up: 20px;
  --gap-after-header: 2px;
  --nav-size: 20px;
  /* 左右按钮尺寸（外圈点击区）*/
  --nav-edge: 6px;
  /* 挨边距离：越小越靠近最边缘 */
  --nav-y: 0px;
  /* 垂直微调：正值向下、负值向上 */
}

/* 基础重置 */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #0b0a12;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center calc(-1 * var(--bg-up));
  background-size: var(--bg-width) auto;
  /* 只按宽度等比例缩放 */
}

/* 顶部固定横幅 */
.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(12, 11, 20, .85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.top-inner {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
  /* 让logo充满宽度 */
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  /* 让图片按比例自然高度 */
  object-fit: cover;
}

/* 顶部右侧下载按钮：缩放动效（轻微呼吸），覆盖在logo上方右上角 */
.top-download {
  position: absolute;
  right: 10px;
  top: 15px;
  display: inline-block;
  width: clamp(140px, 12vw, var(--top-btn-w));
  height: auto;
  transform-origin: center;
  animation: pulse 0.7s ease-in-out infinite;
  z-index: 5;
}

.top-download img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--top-btn-h);
  object-fit: contain;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* 页面主体的顶部内边距：由JS根据头部真实高度设置；这里给最小兜底 */
.page {
  padding-top: 12px;
}

.cs-btn {
  position: fixed;
  right: 12px;
  /* 想换位置改这里 */
  bottom: 135px;
  /* 想更靠上改这里 */
  z-index: 60;
}

.cs-btn img {
  width: 64px;
  /* 图片大小在这改 */
  height: 90px;
  display: block;
}

/* ====== 轮播容器 ====== */
.carousel {
  position: relative !important;
  margin: var(--gap-after-header, 16px) auto 0 !important;
  width: 100% !important;
  max-width: var(--page-maxw) !important;
  overflow: hidden;
  /* 新增这一行 */
}

/* ====== 轨道：横排 + 位移滑动 ====== */
.carousel-track {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: var(--slide-ar) !important;
  overflow: visible !important;
  /* 把原来的 overflow:hidden 去掉/改成 visible */
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important;
  background: rgba(255, 255, 255, .02) !important;

  display: flex !important;
  /* 横向排列（关键） */
  transition: transform .4s ease !important;
  /* 滑动动画（关键） */
  will-change: transform !important;
}

/* ====== 单页：占满容器（不要 absolute/opacity） ====== */
.slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;

  position: relative !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ☆ 若你的文件还有 .slide.active 等旧规则，请删除；否则这几条已用 !important 压住。 */

/* ====== 左右切换按钮（可微调） ====== */
:root {
  --nav-size: 65px;
  --nav-edge: 8px;
  --nav-y: 0px;
}

.nav {
  position: absolute !important;
  top: calc(50% + var(--nav-y)) !important;
  transform: translateY(-50%) !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border: none !important;
  background: rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(2px) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.nav:hover {
  background: rgba(0, 0, 0, .38) !important;
}

.nav img {
  width: 64% !important;
  height: 64% !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

.prev {
  left: var(--nav-edge) !important;
}

.next {
  right: var(--nav-edge) !important;
}

/* 下方主图 */
.below {
  margin: 14px auto 0;
  width: 100%;
  max-width: var(--page-maxw);
}

.below-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--below-ar);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* 底部固定横幅（紫黑渐变） */
/* === 底部横幅按钮微调变量（你只改这里就能调位置/大小） === */
:root {
  --bottom-btn-w: clamp(220px, 42vw, 344px);
  /* 按钮宽度（自适应，最大344px） */
  --bottom-btn-h: 50px;
  /* 按钮高度（图片会等比缩放） */
  --bottom-btn-top: 14px;
  /* 按钮“靠上”的距离（越大越往下） */
  --bottom-btn-left-gap: -16px;
  /* 左侧按钮距左边缘的距离 */
  --bottom-btn-right-gap: -16px;
  /* 右侧按钮距右边缘的距离 */
}

/* 底部固定横幅仍保持固定在底部 */
.bottom-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-h);
  z-index: 30;
  background: linear-gradient(135deg, #9158ff 0%, #2b185b 42%, #110b22 100%);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* 改成相对定位容器，方便内部按钮绝对定位 */
.bottom-inner {
  position: relative;
  height: 100%;
  max-width: var(--page-maxw);
  margin: 0 auto;
  /* 不再用 grid，去掉原有的 grid / justify-items / align-items 等 */
  padding: 0;
}

/* 底部两个按钮：绝对定位在横幅左右两侧的上方 */
.bottom-btn {
  position: absolute;
  top: var(--bottom-btn-top);
  display: inline-block;
  width: var(--bottom-btn-w);
  height: var(--bottom-btn-h);
}

.bottom-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 分别靠左、靠右 */
#bottomLeftLink {
  left: var(--bottom-btn-left-gap);
}

#bottomRightLink {
  right: var(--bottom-btn-right-gap);
}

/* 滚动补偿：避免被底部固定横幅遮挡 */
.scroll-pad {
  height: calc(var(--bottom-h) + 16px);
}

/* 桌面端微调：顶部区域在桌面可以缩在1080宽内 */
@media (min-width: 1100px) {
  .top-inner {
    max-width: var(--page-maxw);
  }

  .top-download {
    width: var(--top-btn-w);
    right: 8px;
    top: 8px;
  }
}

/* 电脑端也按手机样式显示（居中一个窄版页面） */
:root {
  /* 这里定义“手机视觉宽度”，随你改：430px / 414px / 390px 等 */
  --desktop-mobile-width: 600px;
}

/* 到了较宽屏（电脑）时，强制用窄宽并居中固定的顶部/底部横幅 */
@media (min-width: 1024px) {

  /* 让所有用到 --page-maxw 的区域都缩到手机宽度 */
  :root {
    --page-maxw: var(--desktop-mobile-width);
  }

  /* 顶部横幅：固定但不是全屏，居中显示 */
  .top-banner {
    width: var(--desktop-mobile-width);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .top-inner {
    max-width: var(--desktop-mobile-width);
    margin: 0 auto;
  }

  /* 主体容器居中 */
  .page {
    margin: 0 auto;
  }

  /* 底部横幅：固定但不是全屏，居中显示 */
  .bottom-banner {
    width: var(--desktop-mobile-width);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .bottom-inner {
    max-width: var(--desktop-mobile-width);
    margin: 0 auto;
  }
}

/* 仅桌面端隐藏顶部下载按钮 */
@media (min-width: 1024px) {
  .top-download {
    display: none !important;
  }
}

/* 二维码弹窗样式（极简） */
.qr-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .48);
  display: none;
  place-items: center;
  z-index: 9999;
}

.qr-mask.show {
  /* 需要显示时加上 .show */
  display: grid;
}

.qr-dialog {
  position: relative;
  background: #14121c;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  padding: 20px 20px 16px;
  width: min(84vw, 360px);
}

.qr-img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 8px;
}

.qr-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #ddd;
}

.qr-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
}

.qr-close:hover {
  background: rgba(255, 255, 255, .2);
}