:root{
  --bg:#0d1022;
  --panel:#101632;
  --muted:#182245;
  --text:#ffffff;
  --sub:#B6C3E6;
  --card:#111939;
  --shadow:0 14px 36px rgba(0,0,0,.38);
  --radius:16px;
  --brand-r:#FF4655;
  --brand-b:#2DA1FF;
  --brand-r-dark:#E33B49;
  --brand-b-dark:#1C7CD8;
  --link:#9ec6ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,70,85,.18), transparent 60%),
    radial-gradient(1200px 800px at 110% 0%, rgba(45,161,255,.18), transparent 60%),
    linear-gradient(180deg, #0b0f1f 0%, #0b0f1f 100%);
  color:var(--text);
  font:14px/1.6 "PingFang SC","Microsoft YaHei",Arial,Helvetica,sans-serif;
}
.container{max-width:1080px;margin:0 auto;padding:16px}

.header{display:flex;align-items:center;gap:14px;padding:16px 0;position:relative}
.logo-box{
  width:56px;height:56px;border-radius:14px;overflow:hidden;flex:0 0 56px;
  background:#0e1735;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)
}
.logo-box img{width:100%;height:100%;object-fit:cover;display:block}
.brand h1{font-size:20px;margin:0}
.brand p{margin:2px 0 0;color:var(--sub);font-size:12px}

.header-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.link{
  --g:linear-gradient(135deg,var(--brand-r),var(--brand-b));
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:#0e1735;color:#fff;text-decoration:none;font-weight:600;
  position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s, border .15s
}
.link::after{content:"";position:absolute;inset:0;background:var(--g);opacity:.0;transition:opacity .25s}
.link span{position:relative;z-index:1}
.link:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.link:hover::after{opacity:.18}
.link:active{transform:translateY(0)}

.breadcrumbs{font-size:12px;color:var(--sub);margin:8px 0 16px}
.breadcrumbs a{color:var(--link);text-decoration:none;position:relative;display:inline-block}
.breadcrumbs a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--brand-r),var(--brand-b));
  transition:right .25s ease
}
.breadcrumbs a:hover::after{right:0}
.breadcrumbs .sep{opacity:.5;margin:0 6px}

.hero{
  background:linear-gradient(180deg, rgba(255,70,85,.10), rgba(45,161,255,.08));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; position:relative; overflow:hidden
}
.hero::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:220px;
  background:conic-gradient(from 120deg at 50% 50%, rgba(255,70,85,.18), rgba(45,161,255,.18), transparent 70%);
  filter:blur(30px)
}
.hero-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.hero-title{font-size:18px;margin:0}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:6px 10px;border-radius:999px;position:relative;overflow:hidden
}
.badge.sec{border-color:rgba(45,161,255,.35)}
.badge.ok{border-color:rgba(255,70,85,.35)}
.badge::after{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,70,85,.18),rgba(45,161,255,.18));
  opacity:.25
}

.form{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.field{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:6px}
.field input{
  width:100%; background:#0d1530; color:var(--text); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:12px 12px; outline:none; transition:border .2s, box-shadow .2s
}
.field input:focus{border-color:var(--brand-b); box-shadow:0 0 0 3px rgba(45,161,255,.22)}

.packages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{
  --g:linear-gradient(135deg,var(--brand-r),var(--brand-b));
  background:var(--card);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px;
  cursor:pointer; transition:transform .15s ease,border .15s ease, box-shadow .15s ease, background .25s ease;
  position:relative; overflow:hidden
}
.card::after{content:"";position:absolute;inset:0;background:var(--g);opacity:.08;transition:opacity .25s}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.card:hover::after{opacity:.14}
.card.active{border-color:transparent; box-shadow:0 0 0 3px rgba(45,161,255,.22)}
.card .amt{
  font-size:20px;font-weight:700;
  background:linear-gradient(135deg,#fff, #cfe5ff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.card .desc{font-size:12px;color:#d7e3ff}
.card .tag{
  position:absolute; top:10px; right:-8px; transform:rotate(8deg);
  background:linear-gradient(135deg,var(--brand-r),var(--brand-b)); color:#fff; font-size:11px;
  padding:4px 10px; border-radius:999px; box-shadow:0 4px 18px rgba(0,0,0,.25)
}

.custom-row{display:grid;grid-template-columns:1fr 110px;gap:8px}
.help{font-size:12px;color:var(--sub)}

.summary{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; display:grid; gap:8px
}
.summary .line{display:flex;justify-content:space-between;font-size:14px}
.summary .line b{font-weight:700}

.actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.pay{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.btn{
  --g:linear-gradient(135deg,var(--brand-r),var(--brand-b));
  display:flex; align-items:center; justify-content:center; gap:8px; padding:12px;
  border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0e1735;
  color:#fff; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s, border .15s, background .25s;
  position:relative; overflow:hidden
}
.btn::after{content:"";position:absolute;inset:0;background:var(--g);opacity:.10;transition:opacity .25s}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:hover::after{opacity:.2}
.btn:active{transform:translateY(0)}
.btn.wx{border-color:rgba(23,194,67,.4)}
.btn.zfb{border-color:rgba(0,146,255,.45)}
.btn.primary{background:linear-gradient(135deg,var(--brand-r),var(--brand-b)); border-color:transparent}

.btn .ico{
  width:clamp(20px, 6vw, 28px);
  height:clamp(20px, 6vw, 28px);
  display:block;
  flex:0 0 auto
}
.btn .ico img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain
}

.sec-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.sec-card{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px}
.sec-card h3{margin:0 0 8px;font-size:16px}
.sec-card p{margin:0;color:var(--sub);font-size:13px}
.faq dt{font-weight:700;margin-top:10px}
.faq dd{margin:6px 0 0 0;color:var(--sub);font-size:13px}

.footer{margin-top:22px; padding:14px; color:var(--sub); font-size:12px; text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.icp a{color:var(--link);text-decoration:none;position:relative;display:inline-block}
.icp a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--brand-r),var(--brand-b));
  transition:right .25s ease
}
.icp a:hover::after{right:0}

@media (min-width:720px){
  .form{grid-template-columns:1.2fr 1fr}
  .packages{grid-template-columns:repeat(4,1fr)}
  .sec-grid{grid-template-columns:1fr 1fr 1fr}
}

.flash{animation:flash 1.2s ease 1}
@keyframes flash{
  0%{box-shadow:0 0 0 0 rgba(45,161,255,.0)}
  30%{box-shadow:0 0 0 6px rgba(45,161,255,.25)}
  100%{box-shadow:0 0 0 0 rgba(45,161,255,.0)}
}
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#0e1735; border:1px solid rgba(255,255,255,.12); color:#fff; padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); font-size:12px; display:none; z-index:99
}
.toast.show{display:block; animation:fade 2.4s ease 1}
@keyframes fade{
  0%{opacity:0;transform:translate(-50%,8px)}
  10%,90%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-6px)}
}

/* 移动端头部堆叠修复 */
@media (max-width: 640px){
  .header{
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "logo brand"
      "actions actions";
    align-items: center;
    gap: 10px;
    padding: 12px 0;
  }
  .logo-box{ grid-area: logo; }
  .brand{ grid-area: brand; min-width: 0; }
  .brand h1{
    margin: 0;
    line-height: 1.25;
    font-size: clamp(16px, 5vw, 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand p{
    margin: 2px 0 0;
    font-size: clamp(11px, 3.6vw, 12px);
  }
  .header-actions{
    grid-area: actions;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    width: 100%;
  }
  .header-actions .link{
    justify-content: center;
    padding: 9px 10px;
    font-size: 14px;
  }
}
@media (max-width: 360px){
  .header{ grid-template-columns: 44px 1fr; }
  .logo-box{ width:44px; height:44px; border-radius:10px; }
  .header-actions .link{ padding: 8px 9px; font-size: 13px; }
}

@media (max-width: 480px){
  html,body{font-size:13px}
  .container{padding:12px}
  .header{gap:10px;padding:12px 0}
  .logo-box{width:48px;height:48px;border-radius:12px}
  .brand h1{font-size:18px}
  .brand p{font-size:12px}
  .header-actions{gap:8px}
  .header-actions .link{padding:9px 10px;font-size:13px;border-radius:10px}
  .breadcrumbs{margin:6px 0 12px}

  .hero{padding:14px;border-radius:14px}
  .hero-title{font-size:17px}
  .hero-badges{gap:6px;row-gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .hero-badges::-webkit-scrollbar{display:none}
  .badge{font-size:11px;padding:5px 8px;border-radius:999px}

  .form{gap:10px}
  .field{padding:10px;border-radius:12px}
  .field label{font-size:12px}
  .field input{padding:12px 12px;border-radius:10px;font-size:14px}

  .packages{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .card{padding:10px;border-radius:12px}
  .card .amt{font-size:18px}
  .card .desc{font-size:11px}
  .card .tag{top:8px;right:-10px;font-size:10px;padding:3px 8px}

  .custom-row{grid-template-columns:1fr 92px;gap:8px}
  .help{font-size:12px;line-height:1.5}

  .summary{padding:10px;border-radius:12px;gap:6px}
  .summary .line{font-size:13px}

  .actions{gap:8px;margin-top:8px}
  .pay{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .btn{padding:11px;border-radius:12px;font-size:15px}
  .btn .ico{width:22px;height:22px}

  .sec-grid{gap:10px;margin-top:14px}
  .sec-card{padding:12px;border-radius:12px}
  .sec-card h3{font-size:15px;margin-bottom:6px}
  .sec-card p{font-size:12px}

  .faq dt{font-size:13px}
  .faq dd{font-size:12px}

  .footer{margin-top:18px;padding:12px;font-size:11px}
  .icp a::after{height:1.5px}
  .toast{bottom:calc(18px + env(safe-area-inset-bottom))}
}

@media (max-width: 380px){
  .brand h1{font-size:16px}
  .hero-title{font-size:16px}
  .packages{gap:6px}
  .card{padding:9px}
  .card .amt{font-size:17px}
  .card .desc{font-size:11px}
  .custom-row{grid-template-columns:1fr 88px}
  .btn{padding:10px;font-size:14px}
  .summary .line{font-size:12.5px}
}

/* 弹窗与遮罩在小屏的适配（覆盖行内大小） */
@media (max-width: 480px){
  #loadingMask{align-items:center;justify-content:center}
  #loadingMask>div{width:86vw;max-width:360px}
  .toast{max-width:92vw}
}

/* 提升触控反馈与性能的小屏细节 */
@media (hover:none){
  .link,.btn,.card{transition:transform .12s, box-shadow .12s, border .12s, background .12s}
  .card:active,.btn:active,.link:active{transform:translateY(0)}
}

/* 图片与滚动在移动端更加顺滑 */
img{image-rendering:auto;-webkit-touch-callout:none}
/* ========== ① 徽章行（hero-badges）手机端优化 ========== */
@media (max-width: 480px){
  /* 从横向拥挤改为等宽网格：两列排布，易读易点 */
  .hero-badges{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    row-gap: 8px;
    overflow: visible; /* 避免被剪裁 */
    padding-bottom: 2px;
  }
  /* 徽章尺寸与对比度 */
  .hero-badges .badge{
    display: flex; align-items: center; justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 12px;
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.06);
  }
  /* 两个强调色的边框更明显一些 */
  .hero-badges .badge.sec{ border-color: rgba(45,161,255,.45) !important; }
  .hero-badges .badge.ok{  border-color: rgba(255,70,85,.45) !important;  }
}

/* 超小屏改为单列，避免换行压缩 */
@media (max-width: 360px){
  .hero-badges{ grid-template-columns: 1fr; }
  .hero-badges .badge{ min-height: 36px; font-size: 13px; }
}

/* ========== ② “赠送规则”文案手机端强调显示 ========== */
/* 精准定位：在“套餐选择”那一块里，.packages 后面有 .custom-row，再后面就是这行 .help */
@media (max-width: 480px){
  .packages + .custom-row + .help{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 10px;
    line-height: 1.65;
    font-size: 12.5px;
    color: var(--sub);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  /* 数字与百分号更醒目（不改HTML，仅用字重与等宽数字渲染） */
  .packages + .custom-row + .help{
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
}

/* 辅助：避免标题挤压徽章，留一点呼吸空间 */
@media (max-width: 480px){
  .hero-title{ margin-bottom: 6px; }
}
.logo-box .logo-link{display:block;width:100%;height:100%}
.brand-title-link{color:inherit;text-decoration:none}
.brand-title-link:hover,
.brand-title-link:focus{opacity:.9}
.brand-title-link:focus-visible{outline:2px solid rgba(45,161,255,.45);outline-offset:2px}