/* =========================================================
 * 星耀国际 落地页样式  ·  黑金主题（与 LOGO 同色系）
 * 尺寸体系：1rem = 页面宽度的 10%（750 设计稿）
 * 换配色 → 改 js/config.js 里的 colors
 * ======================================================= */

:root{
  --gold:#c9a227;          /* 主金 */
  --gold-l:#f3d98b;        /* 亮金（渐变高光） */
  --gold-d:#8a6b1f;        /* 暗金（渐变收尾） */
  --ink:#14110c;           /* 墨黑 */
  --primary:#c9a227;       /* 按钮基色 */
  --danger:#c0392b;        /* 强调红（返水数字） */
  --page-bg:#f3ecdf;       /* 页面底色 */
  --card:#ffffff;          /* 卡片底色 */
  --text:#1b1712;
  --text-sub:#6f6657;
  --line:#ece2cc;
  --radius:.24rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html{font-size:10vw;-webkit-text-size-adjust:100%}
@media screen and (min-width:500px){html{font-size:50px}}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:.3467rem;
  line-height:1.4286;
  color:var(--text);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;border:0;vertical-align:middle;max-width:100%}
picture{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{-webkit-tap-highlight-color:transparent}
em,i{font-style:normal}

/* 键盘可见焦点（不影响触屏） */
:focus-visible{outline:.04rem solid var(--gold);outline-offset:.04rem}

/* 内容容器：超宽屏居中，最大 500px */
.app{
  position:relative;
  max-width:500px;
  margin:0 auto;
  background:var(--card);
  min-height:100vh;
  padding-bottom:calc(1.6rem + env(safe-area-inset-bottom, 0px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* ---------------- ① 品牌头部 ---------------- */
.brand{
  padding:.26rem .28rem .2rem;
  background:linear-gradient(180deg,#fffdf8 0%,#fdf7ea 100%);
}
.brand-card{
  display:flex;
  align-items:center;
  gap:.16rem;
  padding:.16rem .2rem .16rem .14rem;
  background:#fff;
  border:.02rem solid #eadfc6;
  border-radius:.34rem;
  box-shadow:0 .08rem .24rem rgba(122,96,30,.1),inset 0 .02rem 0 #fff;
}
.brand-logo{
  flex:0 0 auto;
  width:.98rem;height:.98rem;
  object-fit:contain;
}
.brand-txt{min-width:0;flex:1}
.brand-line1{display:flex;align-items:baseline;gap:.1rem;line-height:1.05}
.brand-name{
  font-size:.64rem;font-weight:800;letter-spacing:.02rem;
  background:linear-gradient(180deg,#fbe8ab 0%,#e2bf62 38%,#c9a227 62%,#8a6b1f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.003rem rgba(255,246,214,.5);
  filter:drop-shadow(0 .015rem .02rem rgba(90,62,10,.28));
}
.brand-line1 em{
  align-self:center;
  padding:.02rem .1rem;
  font-size:.24rem;font-weight:700;color:#9a7d34;letter-spacing:.04rem;
  border:.015rem solid rgba(201,162,39,.45);
  border-radius:.08rem;
  background:rgba(255,250,236,.9);
}
.brand-tag{
  margin-top:.09rem;
  font-size:.26rem;font-weight:600;letter-spacing:.055rem;color:#9a8a6a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------------- ② 主视觉 ---------------- */
.hero{width:100%;height:auto}

/* ---------------- ③ 信息卡 ---------------- */
.info{
  position:relative;
  margin:.24rem .28rem 0;
  padding:.24rem .22rem .22rem;
  background:#fff;
  border:.02rem solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 .06rem .28rem rgba(122,96,30,.12);
}
.info-top{display:flex;align-items:center;gap:.2rem}
.info-logo{
  flex:0 0 auto;
  width:1.26rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.04rem;
}
.info-logo img{width:1.02rem;height:1.02rem;object-fit:contain}
.info-logo span{
  font-size:.2rem;font-weight:800;letter-spacing:.01rem;white-space:nowrap;
  background:linear-gradient(180deg,#e6c877,#a8842a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.2;
}
.info-body{flex:1;min-width:0}
.info-title{
  font-size:.48rem;font-weight:800;color:#17130c;letter-spacing:.004rem;
  line-height:1.22;white-space:nowrap;
}
.rebate{
  margin-top:.1rem;font-size:.44rem;font-weight:800;line-height:1.2;
  color:#6f613f;
  white-space:nowrap;
}
.rebate b{
  font-size:.56rem;font-weight:800;color:var(--danger);
  letter-spacing:-.01rem;margin-left:.04rem;
}
.pills{display:flex;align-items:center;gap:.1rem;margin-top:.14rem;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:.07rem;
  height:.42rem;padding:0 .16rem;
  font-size:.24rem;font-weight:700;color:#5d5137;
  border-radius:.21rem;
  background:linear-gradient(180deg,#fffdf6,#faf3e2);
  box-shadow:inset 0 0 0 .018rem #e9dcc0;
}
.pill.wallet .ico{
  width:.3rem;height:.3rem;border-radius:50%;
  display:grid;place-items:center;
  font-size:.19rem;font-weight:800;color:#3a2a08;
  background:linear-gradient(180deg,#f0d78f,#c9a227);
}
.pill.guarantee{
  color:#4a4030;
  background:linear-gradient(180deg,#ffffff,#f4efe4);
  box-shadow:inset 0 0 0 .018rem #ded4bf;
}

.strip{
  margin-top:.2rem;height:.8rem;
  display:flex;align-items:center;justify-content:center;gap:.16rem;
  border-radius:.4rem;
  background:linear-gradient(90deg,#241d13 0%,#0d0b07 50%,#241d13 100%);
  box-shadow:inset 0 0 0 .02rem rgba(201,162,39,.85),0 .04rem .14rem rgba(20,17,12,.3);
  color:#f0d896;font-size:.34rem;font-weight:800;letter-spacing:.055rem;
  white-space:nowrap;
}
.strip i{color:var(--gold);font-size:.26rem}

/* ---------------- ④ 分类 ---------------- */
.cats{
  margin:.22rem .28rem 0;
  border:.02rem solid #e8dcc2;
  border-radius:.2rem;
  background:#fff;
  overflow:hidden;
  box-shadow:0 .04rem .16rem rgba(122,96,30,.08);
}
.cats img{width:100%;height:auto;filter:sepia(1) saturate(2.2) hue-rotate(-14deg) brightness(1.02) contrast(1.05)}

/* ---------------- ⑤ 认证 ---------------- */
.certs{width:100%;height:auto;margin-top:.16rem}

/* ---------------- ⑥ 版权 / 合规 + 浮标 ---------------- */
.legal{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  gap:.18rem;
  padding:.42rem .26rem .34rem;
  border-top:.02rem solid #f1e6cc;
  background:linear-gradient(180deg,#faf4e4 0%,#f8f1de 100%);
}
.legal-txt{flex:1;min-width:0}
.trust-line{
  margin-bottom:.14rem;
  font-size:.24rem;font-weight:800;letter-spacing:.05rem;color:#b08d33;
}
.copyright{font-size:.22rem;color:#a99b81;letter-spacing:.01rem}
.notice{
  margin-top:.07rem;
  font-size:.18rem;line-height:1.55;color:#bcb19c;
}
.backup-line{margin-top:.1rem}
.backup-line a{
  display:inline-block;
  padding:.04rem 0;
  font-size:.19rem;color:#b08d33;
  border-bottom:.01rem dashed rgba(176,141,51,.55);
}

/* ---------------- 底部下载条 ---------------- */
.footer{
  position:fixed;left:50%;bottom:0;z-index:99;
  transform:translateX(-50%);
  width:100%;max-width:500px;height:1.6rem;
  display:flex;align-items:center;
  padding:0 .24rem;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  border-top:.02rem solid #f0e6d2;
  box-shadow:0 -.04rem .2rem rgba(122,96,30,.1);
  padding-bottom:env(safe-area-inset-bottom);
}
.footer-icon{
  flex:0 0 auto;width:1.1rem;height:1.1rem;
  display:grid;place-items:center;
}
.footer-icon img{width:1.02rem;height:1.02rem;object-fit:contain}
.footer-text{
  flex:1;min-width:0;margin-left:.12rem;
  font-size:.33rem;font-weight:800;line-height:1.2;color:#17130c;
}
.footer-text em{color:var(--danger)}

.dl-btn{
  position:relative;overflow:hidden;
  flex:0 0 auto;
  width:3.16rem;height:.94rem;margin-left:.14rem;
  border-radius:.2rem;
  background:linear-gradient(180deg,#f8e6ad 0%,#e8c76c 42%,#c9a227 72%,#a8842a 100%);
  color:#3a2a08;font-size:.35rem;font-weight:800;letter-spacing:.03rem;
  text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 .06rem .16rem rgba(168,132,42,.42),inset 0 .02rem 0 rgba(255,255,255,.75),inset 0 -.02rem 0 rgba(120,88,10,.25);
}
.dl-btn::after{
  content:"";position:absolute;top:0;left:-40%;width:34%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);
  animation:shine 3.2s ease-in-out infinite;
}
@keyframes shine{
  0%,62%{left:-40%}
  86%,100%{left:120%}
}
.dl-btn:active{transform:translateY(.012rem) scale(.995);filter:brightness(.97)}

/* ---------------- 右侧浮标 ---------------- */
.tools{
  flex:0 0 auto;
  display:flex;flex-direction:row;gap:.12rem;
}
.tool{
  width:1rem;height:1rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  border-radius:26%;
  color:#a8842a;
  background:rgba(255,253,247,.9);
  border:.035rem solid rgba(201,162,39,.55);
  font-size:.2rem;font-weight:700;line-height:1.1;
  box-shadow:0 .04rem .14rem rgba(122,96,30,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .12s ease,background .12s ease;
}
.tool svg{width:.46rem;height:.46rem;fill:currentColor}
.tool:active{transform:scale(.95);background:#fff}

/* ---------------- 教程弹窗 ---------------- */
.modal{
  position:fixed;inset:0;z-index:1000;
  display:none;
  background:rgba(12,10,6,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.modal.open{display:block}
.modal-card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(88vw,440px);max-height:76vh;
  display:flex;flex-direction:column;
  background:#fff;border-radius:.26rem;
  overflow:hidden;
  box-shadow:0 .2rem .6rem rgba(0,0,0,.35);
  animation:pop .22s ease;
}
@keyframes pop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.32rem .34rem .18rem;
  border-bottom:.02rem solid #f2ece0;
}
.modal-head h2{font-size:.4rem;font-weight:800;color:#17130c}
.modal-close{
  width:.66rem;height:.66rem;line-height:1;
  font-size:.56rem;color:#b3a68c;
  display:grid;place-items:center;border-radius:50%;
}
.modal-close:active{background:#f6f1e6}
.modal-body{padding:.3rem .34rem .4rem;overflow:auto;font-size:.31rem;color:var(--text-sub);line-height:1.72}
.modal-body .step{margin-bottom:.26rem}
.modal-body .step:last-child{margin-bottom:0}
.modal-body .step h3{
  margin-bottom:.08rem;font-size:.33rem;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:.12rem;
}
.modal-body .step h3 i{
  width:.38rem;height:.38rem;border-radius:50%;
  display:grid;place-items:center;
  font-size:.23rem;font-weight:800;color:#3a2a08;
  background:linear-gradient(180deg,#f0d78f,#c9a227);
}

/* ---------------- 轻提示 ---------------- */
.toast{
  position:fixed;left:50%;top:50%;z-index:2000;
  transform:translate(-50%,-50%) scale(.96);
  padding:.2rem .34rem;border-radius:.14rem;
  background:rgba(22,18,12,.9);color:#fff;
  font-size:.29rem;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------------- 动效降级 ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------------- 桌面 / 平板微调 ---------------- */
@media screen and (min-width:500px){
  body{background:radial-gradient(circle at 50% 0%,#fbf5e8,#e9dfc9 70%)}
  .app{box-shadow:0 .2rem 1.2rem rgba(90,70,20,.16)}
}