/* ============================================================
   火星工具箱下载落地页样式
   H5 标准 rem 适配：设计稿 375px，1rem = 100px
   转换规则：设计稿 px 值 / 100 = rem 值
   JS 动态设置 html font-size，屏宽 > 480px 自动锁定
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: 100px; /* 默认值，JS 会覆盖 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1a1a1a;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 6%,  #ECE6FE 0%, transparent 45%),
    radial-gradient(circle at 94% 8%, #E9FDFE 0%, transparent 42%),
    radial-gradient(circle at 15% 68%,#FEEDF7 0%, transparent 55%),
    radial-gradient(circle at 88% 78%,#EAF3FF 0%, transparent 50%),
    #FFFFFF;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 最外层容器 */
.page {
  width: 100%;
  max-width: 4.8rem;             /* 480px 锁宽 */
  margin: 0 auto;
  padding: 0 0.2rem;             /* 左右各 20px */
  overflow-x: hidden;
}

/* ---------------- 顶部：Logo + App 名 ---------------- */
.header {
  display: flex;
  align-items: flex-start;       /* 顶部对齐 */
  gap: 0.14rem;                  /* 14px */
  padding-top: 0.44rem;          /* 44px */
}
.header-logo {
  width: 0.68rem;                /* 68px */
  height: 0.68rem;
  border-radius: 0.16rem;        /* 16px */
  box-shadow: 0 0.06rem 0.18rem rgba(251, 69, 79, 0.28);
}
.header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between; /* 名字贴顶、按钮贴底 */
  align-self: stretch;            /* 撑满 logo 高度 */
  padding: 0.02rem 0;
}
.header-name {
  font-size: 0.2rem;             /* 20px */
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  line-height: 1;                /* 紧贴顶部对齐 logo */
}
.header-install {
  display: inline-flex;
  align-items: center;
  padding: 0.07rem 0.18rem;      /* 7px 18px */
  font-size: 0.135rem;           /* 13.5px */
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.09rem;        /* 9px */
  background: #07C160;           /* 微信绿，安全感 */
}
.header-refresh {
  margin-left: auto;             /* 推到最右侧 */
  width: 0.4rem;                 /* 40px */
  height: 0.4rem;
  padding: 0.08rem;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.header-refresh svg {
  width: 100%;
  height: 100%;
  display: block;
}
.header-refresh:active svg {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

/* ---------------- 主标题 + 副标题 ---------------- */
.headline {
  padding-top: 0.28rem;          /* 28px */
  text-align: center;
}
.headline-title {
  font-size: 0.19rem;            /* 19px：15字在375px屏上约占80%宽 */
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  white-space: nowrap;
}
.headline-sub {
  margin-top: 0.1rem;            /* 10px */
  font-size: 0.13rem;            /* 13px */
  color: #8a8a92;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------------- 聚合搜索白卡 ---------------- */
.highlight {
  margin-top: 0.22rem;           /* 22px */
  background: rgba(255,255,255,0.92);
  border-radius: 0.22rem;        /* 22px */
  padding: 0.24rem 0.22rem;      /* 24px 22px */
  box-shadow: 0 0.08rem 0.3rem rgba(120, 120, 160, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.12rem;                  /* 12px */
}
.highlight-title {
  font-size: 0.2rem;             /* 20px */
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.08rem;        /* 8px */
  white-space: nowrap;
}
.highlight-desc {
  font-size: 0.135rem;           /* 13.5px */
  color: #6b6b73;
  line-height: 1.4;
  white-space: nowrap;
}
.highlight-icon {
  flex-shrink: 0;
  width: 0.64rem;               /* 64px */
  height: 0.64rem;
}

/* ---------------- 药丸弹幕区 ---------------- */
.pills {
  margin-top: 0.16rem;
  overflow: hidden;
  /* 突破 .page padding，占满全宽 */
  margin-left: -0.2rem;
  margin-right: -0.2rem;
}
.pill-row {
  height: 0.62rem;               /* 行高留出垂直偏移空间 */
  margin-bottom: -0.06rem;       /* 负间距让相邻行垂直重叠交错 */
}
.pill-track {
  display: flex;
  align-items: center;
  gap: 0.16rem;                  /* 药丸间距 */
  white-space: nowrap;
  animation: scroll-left 18s linear infinite;
  width: max-content;
  height: 100%;
}
/* 不同行不同速度，错落感 */
.row-1 .pill-track { animation-duration: 80s; }
.row-2 .pill-track { animation-duration: 96s; animation-delay: -3s; }
.row-3 .pill-track { animation-duration: 88s; animation-delay: -7s; }
.row-4 .pill-track { animation-duration: 104s; animation-delay: -5s; }
.row-5 .pill-track { animation-duration: 76s; animation-delay: -2s; }

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.pill {
  display: inline-block;
  border-radius: 0.2rem;         /* 20px */
  padding: 0.07rem 0.15rem;      /* 7px 15px */
  font-size: 0.12rem;            /* 12px */
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.08);
  flex-shrink: 0;
}
/* 每颗药丸垂直随机偏移，打散成乱序漂浮 */
.pill-track .pill:nth-child(6n+1) { transform: translateY(-0.1rem); }
.pill-track .pill:nth-child(6n+2) { transform: translateY(0.09rem); }
.pill-track .pill:nth-child(6n+3) { transform: translateY(-0.04rem); }
.pill-track .pill:nth-child(6n+4) { transform: translateY(0.12rem); }
.pill-track .pill:nth-child(6n+5) { transform: translateY(0.02rem); }
.pill-track .pill:nth-child(6n+6) { transform: translateY(-0.08rem); }

/* 10 种药丸配色 */
.c1  { background: #C1D7F5; }
.c2  { background: #B57EDC; }
.c3  { background: #3FBFA8; }
.c4  { background: #FFDBA8; color: #8a5a00; }
.c5  { background: #FB4B5A; }
.c6  { background: #3A6BE8; }
.c7  { background: #FFC9E0; color: #a03060; }
.c8  { background: #FDA94C; color: #6b3e00; }
.c9  { background: #6874FA; }
.c10 { background: #C9B8E8; color: #4a2d7a; }

/* ---------------- 下载区 ---------------- */
.download {
  text-align: center;
  padding: 0.12rem 0 0.08rem;
}
.download-btn {
  display: block;
  width: 100%;
  padding: 0.17rem 0;            /* 17px */
  font-size: 0.18rem;            /* 18px */
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 0.3rem;         /* 30px */
  text-decoration: none;
  background: linear-gradient(90deg, #39A2FE 0%, #6874FA 50%, #A94CFC 100%);
  box-shadow: 0 0.08rem 0.24rem rgba(105, 116, 250, 0.32);
}
.download-info {
  margin-top: 0.14rem;           /* 14px */
  font-size: 0.13rem;            /* 13px */
  color: #8a8a92;
  white-space: nowrap;
}
.download-version {
  margin-top: 0.05rem;           /* 5px */
  font-size: 0.13rem;
  color: #8a8a92;
  white-space: nowrap;
}

/* ---------------- 底部 ---------------- */
.footer {
  text-align: center;
  padding: 0.26rem 0 0.34rem;    /* 26px 0 34px */
  font-size: 0.12rem;            /* 12px */
  color: #a5a5ad;
}
.footer a {
  color: #8a8a92;
  text-decoration: none;
}
.footer-sep {
  margin: 0 0.1rem;
  color: #ccc;
}
.footer-beian {
  margin-top: 0.08rem;           /* 8px */
}
.footer-beian a {
  color: #a5a5ad;
  font-size: 0.11rem;            /* 11px */
}