/* ============================================================
   Jeep 商城 · 邀请有礼
   设计基线：iOS 简约克制 / 主色深林绿 + 浅金
   ============================================================ */

:root{
  --brand:       #2F4A3A;
  --brand-deep:  #1B2E24;
  --brand-light: #3E6249;
  --brand-soft:  #ECF4EE;
  --brand-tint:  #E1F2E6;

  --gold-paper:  #FCF7EB;
  --gold-tint:   #F8F2E6;
  --gold-soft:   #FAF0DB;
  --gold-line:   #DFD2B8;
  --gold-bright: #EAC77E;
  --gold:        #C2A15A;
  --gold-mute:   #7D7057;
  --gold-deep:   #836728;

  --n-0: #FBFDFC;
  --n-1: #F5F8F6;
  --n-2: #EFF3F0;
  --n-3: #E3E8E4;
  --n-4: #D2D7D3;
  --n-5: #818883;
  --n-6: #5E6660;
  --n-7: #3C433E;
  --n-8: #121914;

  --canvas: var(--n-2);
  --paper:  var(--n-0);
  --ink:    var(--n-8);
  --muted:  var(--n-6);
  --faint:  var(--n-5);
  --line:   var(--n-3);
  --line-strong: var(--n-4);
  --danger: #B4513F;
  --danger-line: #EBD8D3;
  --danger-soft: #FCF1ED;

  --fs-cap:   0.6875rem;
  --fs-sm:    0.8125rem;
  --fs-body:  1rem;
  --fs-lg:    1.25rem;
  --fs-hero:  1.75rem;
  --fs-num:   2.125rem;
  --fs-num-lg:3.125rem;

  --lh-tight: 1.22;
  --lh-ui:    1.45;
  --lh-body:  1.62;

  --ls-hero:  -0.035em;
  --ls-num:   -0.030em;
  --ls-tight: -0.020em;
  --ls-snug:  -0.012em;
  --ls-ui:     0.010em;
  --ls-cap:    0.045em;

  --sp-half: 6px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --gutter: 20px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  --on-brand: #FFFFFF;
  --on-brand-soft: rgba(255,255,255,.86);
  --on-brand-line: rgba(255,255,255,.30);
  --on-brand-veil: rgba(255,255,255,.92);

  --brand-a10: rgba(47,74,58,.10);
  --brand-a22: rgba(47,74,58,.22);
  --ink-a04: rgba(18,25,20,.04);
  --ink-a045: rgba(18,25,20,.045);
  --ink-a05: rgba(18,25,20,.05);
  --ink-a07: rgba(18,25,20,.07);
  --ink-a16: rgba(18,25,20,.16);
  --ink-a42: rgba(18,25,20,.42);
  --ink-a92: rgba(18,25,20,.92);
  --gold-a18: rgba(194,161,90,.18);
  --gold-a38: rgba(194,161,90,.38);
  --gold-a50: rgba(194,161,90,.50);
  --gold-a55: rgba(194,161,90,.55);
  --gold-a60: rgba(194,161,90,.60);

  --elev-1: 0 1px 2px var(--ink-a05);
  --elev-2: 0 4px 14px var(--ink-a07), 0 1px 3px var(--ink-a04);
  --elev-3: 0 18px 48px var(--ink-a16);
  --elev-sheet: 0 -8px 34px var(--ink-a16);
  --elev-gold: 0 10px 26px rgba(194,161,90,.20);

  /* 底栏只剩一行按钮（不再有下面那行小字），预留高度跟着降下来；
     首屏兜底值，JS 起来后 syncCtaSpace() 会按实测高度改写成精确值 */
  --cta-space: 104px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
/* 固定底栏高约 106px：锚点跳转和 scrollIntoView 要把这段躲开，
   否则目标元素会被压在底栏下面，点不到 */
html{ scroll-behavior:smooth; scroll-padding-bottom:120px; }

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-kerning:normal;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action:manipulation;
}
body.is-locked{ overflow:hidden; }

.h5{
  max-width:430px; margin:0 auto; min-height:100vh;
  overflow-x:hidden;
  padding-bottom:var(--cta-space);
}
.h5[hidden]{ display:none; }

.card{
  background:var(--paper);
  border-radius:var(--r-lg);
  border:1px solid var(--ink-a045);
  box-shadow:var(--elev-1);
  margin:0 var(--gutter);
  padding:var(--sp-5) var(--gutter);
}
.sec-title{
  margin:0; font-size:var(--fs-lg); font-weight:600;
  letter-spacing:var(--ls-tight); color:var(--ink);
}

/* ---------- 启动层 ---------- */
.boot{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-4);
  padding:var(--sp-6) var(--gutter);
  background:var(--canvas);
  text-align:center;
}
.boot[hidden]{ display:none; }
.boot-spinner{
  width:28px; height:28px; border-radius:50%;
  border:2.5px solid var(--n-3);
  border-top-color:var(--brand);
  animation:bootSpin .8s linear infinite;
}
.boot.is-error .boot-spinner{ display:none; }
.boot-text{
  margin:0; font-size:var(--fs-sm); color:var(--muted);
  line-height:var(--lh-ui); max-width:280px;
}
.boot-retry{ flex:none; min-width:132px; min-height:44px; margin-top:var(--sp-2); }
.boot-retry[hidden]{ display:none; }
@keyframes bootSpin{ to{ transform:rotate(360deg); } }

/* ---------- 顶部导航 ----------
   只保留返回按钮和居中标题；活动规则统一走悬浮球 */
/* 320~340 这种极限宽度再压一档，标题仍然完整可读，不省略号 */
@media (max-width:400px){
  .wx-nav > .wx-title{ font-size:.9375rem; }
}
@media (max-width:344px){
  .wx-nav > .wx-title{ font-size:.8125rem; }
}

/* ---------- source=miniapp：隐藏自定义导航 ---------- */
body.is-miniapp .wx-nav{ display:none; }
body.is-miniapp .h5,
body.is-miniapp .wx{ padding-top:var(--safe-top); }

.rules-fab{
  position:fixed; z-index:35;
  /* 兜底位置：悬浮球落在主图下方，JS 会按倒计时实际位置微调 */
  top:calc(var(--safe-top) + 32px + (min(100vw, 430px) - 40px) * 0.75);
  right:max(14px, calc((100vw - 430px) / 2 + 14px));
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(31,94,69,.10);
  background:#fff; color:var(--brand);
  font:inherit; font-size:.8125rem; font-weight:700;
  letter-spacing:.02em; line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(17,32,25,.18), 0 1px 2px rgba(17,32,25,.08);
  transition:transform .16s ease, box-shadow .2s ease;
}
.rules-fab[hidden]{ display:none; }
.rules-fab:active{ transform:scale(.94); box-shadow:0 3px 10px rgba(17,32,25,.2); }
.rf-label{ pointer-events:none; }

/* 窄屏给悬浮球留出位置，倒计时/活动名不会被球压住 */
@media (max-width:420px){
  .cd{ padding-right:56px; }
  .act-name{ padding-left:56px; padding-right:56px; }
}

/* ---------- Hero ---------- */
/* 标题已做进头图，这里只有一张 4:3 图，顶到品牌条下方 */
.hero{ padding:var(--sp-4) var(--gutter) 0; text-align:center; }

/* 4:3 头图：用 padding 撑比例，老内核也不塌 */
.hero-media{
  position:relative;
  margin:0;
  /* 用 aspect-ratio 而不是 padding-top:75%：后者按父级宽度算 padding，
     再加上 border 会让外框变成 1.324 而不是精确 4:3 */
  aspect-ratio:4 / 3;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-1);
  border:1px solid var(--ink-a045);
}
.hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  /* 方图裁成 4:3 时略偏上，保住主视觉数字，不切到顶部 */
  object-position:center 10%;
}
.hero-media-tip{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:var(--fs-sm); color:var(--faint);
}
.hero-media-tip[hidden]{ display:none; }

/* 活动名称：来自接口，头图下方一行 */
.act-name{
  margin:var(--sp-4) var(--gutter) 0;
  font-size:var(--fs-hero); font-weight:700;
  letter-spacing:var(--ls-snug); line-height:var(--lh-tight);
  text-align:center;
}
.act-name[hidden]{ display:none; }

/* ---------- 倒计时 ---------- */
.cd{ margin-top:var(--sp-4); }
.cd[hidden]{ display:none; }
.cd-cap{
  font-size:var(--fs-cap); color:var(--muted);
  letter-spacing:var(--ls-cap);
}
.cd-clock{
  display:flex; justify-content:center; align-items:baseline;
  gap:3px; margin-top:var(--sp-2);
}
.cd-clock[hidden]{ display:none; }
.cd-cell{ display:inline-flex; align-items:baseline; gap:2px; }
.cd-cell b{
  font-size:1.5rem; font-weight:700; color:var(--brand);
  letter-spacing:var(--ls-tight); line-height:1;
}
.cd-cell i{
  font-style:normal; font-size:var(--fs-cap); color:var(--muted);
  margin-left:1px;
}
.cd-sep{ color:var(--n-4); font-size:var(--fs-sm); transform:translateY(-2px); }
.cd-over{
  margin-top:var(--sp-2);
  font-size:var(--fs-sm); color:var(--muted);
}
.cd-over[hidden]{ display:none; }

/* ---------- 进度卡 ---------- */
/* 首屏要塞下三张券：这张卡里只有「一行标题 + 一根进度条 + 一句话」，
   上下内边距比通用卡片收紧（24 → 16），条上条下的间距也各压一档 */
.progress-card{
  margin-top:var(--sp-4);
  padding-top:16px; padding-bottom:16px;
}
.pc-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
}
.pc-title{ font-size:var(--fs-body); font-weight:600; }
.pc-pct{
  display:inline-block; margin-left:var(--sp-2);
  padding:2px 7px; border-radius:var(--r-full);
  background:var(--brand-soft); color:var(--brand);
  font-size:var(--fs-cap); font-weight:700;
  vertical-align:2px;
}
.pc-count{ font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; }
.pc-num{
  font-size:var(--fs-lg); font-weight:700; color:var(--brand);
  letter-spacing:var(--ls-tight); margin-right:2px;
}
.pc-den{ font-size:var(--fs-sm); color:var(--muted); }

.pc-bar-wrap{ margin:16px 0 0; }
.pc-bar{
  position:relative;
  height:12px; border-radius:var(--r-full);
  background:var(--brand-soft);
  box-shadow:inset 0 1px 2px rgba(47,74,58,.10);
}
.pc-bar-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  border-radius:var(--r-full);
  background:linear-gradient(90deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-light) 100%);
  box-shadow:0 1px 3px rgba(47,74,58,.28);
  transition:width .6s cubic-bezier(.22,.8,.28,1);
  overflow:hidden;
}
/* 高光条：让进度条有实体的厚度 */
.pc-bar-fill::after{
  content:''; position:absolute; inset:1px 2px auto 2px; height:3px;
  border-radius:var(--r-full);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42));
}
.pc-tick{
  position:absolute; top:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
}
.pc-tick i{
  display:block; width:2px; height:12px; border-radius:1px;
  background:var(--brand-a22);
}
.pc-tick b{
  font-size:var(--fs-cap); font-weight:500; color:var(--muted);
  margin-top:var(--sp-2); white-space:nowrap;
}
/* 已达成的刻度用白色半透明：压在深绿填充上才看得出分割，
   用深绿会在填充里糊成一条竖线，像进度条断了 */
.pc-tick.is-hit i{ background:rgba(255,255,255,.62); }
.pc-tick.is-hit b{ color:var(--brand); font-weight:600; }
.pc-tick.is-end{ left:auto; right:0; transform:none; }
.pc-tick.is-end b{ margin-right:-2px; }

/* 刻度文字是绝对定位、不占高度，这里要留够间距，否则会和「3人/5人/10人」挤在一起 */
.pc-hint{
  margin-top:30px;
  font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh-body);
}
.pc-hint .hl{ color:var(--brand); font-weight:600; }

/* ---------- 券阶：三列阶梯，左低右高 ---------- */
.coupon-list{
  margin:var(--sp-4) var(--gutter) 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  /* 底部对齐 + 高度递增 = 顶边形成上升的台阶 */
  align-items:end;
  /* 行距要比列距大：档位超过 3 个折行时，两行不能糊成一块 */
  column-gap:8px; row-gap:16px;
}
/* 只配 1~2 档时，保持和 3 档同样的卡片宽度，整组居中 */
.coupon-list.is-1,
.coupon-list.is-2{ justify-content:center; }
.coupon-list.is-1{ grid-template-columns:calc((100% - 16px) / 3); }
.coupon-list.is-2{ grid-template-columns:repeat(2, calc((100% - 16px) / 3)); }

.coupon{
  position:relative;
  display:flex; flex-direction:column;
  padding:13px 8px 10px;
  /* --step 由 JS 按档位下标写入 0/1/2，越靠右越高。
     基准值必须大于内容自身高度（约 156px），否则 min-height 不生效、阶梯看不出来。
     每级抬 28px：18px 的落差在真机上几乎看不出台阶 */
  min-height:calc(162px + var(--step, 0) * 28px);
  background:var(--paper);
  border-radius:var(--r-md);
  border:1px solid var(--ink-a05);
  box-shadow:var(--elev-1);
  transition:border-color .4s ease, box-shadow .4s ease,
             opacity .4s ease, transform .4s ease, background .4s ease;
}

/* 面额区吃掉剩余高度：卡片越高，面额越靠上；下方操作区高度固定，
   于是三张卡的撕口线齐平，上半部分形成台阶 */
.cp-top{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.cp-amount{
  position:relative;
  display:flex; align-items:baseline; justify-content:center;
  color:var(--brand); line-height:1;
}
/* 活动结束时给面额划一道横线 */
.cp-amount::after{
  content:''; position:absolute;
  left:8px; right:8px; top:52%;
  height:2px; border-radius:1px;
  background:currentColor; opacity:.45;
  transform:translateY(-50%) scaleX(0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.8,.28,1);
}
.coupon.is-expired .cp-amount::after{ transform:translateY(-50%) scaleX(1); }

/* 字号跟着台阶一起长：越靠右的档位面额越大，强化「越往上越值钱」的观感 */
.cp-amount .cur{
  font-size:calc(15px + var(--step, 0) * 1px);
  font-weight:600; margin-right:1px;
}
.cp-amount .cur.is-suffix{ margin-right:0; margin-left:2px; }
.cp-amount .num{
  font-size:calc(30px + var(--step, 0) * 5px);
  font-weight:700; letter-spacing:var(--ls-num);
}
/* 券面不可用 / 配置缺失：显示接口返回的 displayText，不套金额字号 */
.cp-amount .num.is-text{
  font-size:calc(13px + var(--step, 0) * 1px);
  font-weight:600; line-height:1.3; letter-spacing:0;
  padding:0 4px;
}
.coupon.is-text .cp-amount .num.is-text{ font-size:13px; }

.cp-kind{ margin-top:6px; font-size:calc(11px + var(--step, 0) * 1px); color:var(--muted); }
/* ¥128 这类三位数：同样随台阶放大，但整体收一号，免得在 375 屏顶到卡片边缘 */
.coupon.is-num3 .cp-amount .cur{ font-size:calc(13px + var(--step, 0) * 1px); }
.coupon.is-num3 .cp-amount .num{ font-size:calc(26px + var(--step, 0) * 4px); }

/* 面额区与操作区之间的撕口线 */
.cp-tear{ margin:0; border-top:1px dashed var(--line); }

.cp-bottom{
  flex:none; padding-top:9px;
  text-align:center;
}
.cp-req{ font-size:var(--fs-cap); color:var(--muted); line-height:1.3; }

.cp-claim{
  width:100%; margin-top:7px;
  /* 34px 是窄卡片里能保住的最小可点高度，30px 在手机上太难点中 */
  min-height:34px; padding:0 4px;
  border:none; border-radius:var(--r-sm);
  background:var(--brand-deep); color:var(--on-brand);
  font:inherit; font-size:var(--fs-sm); font-weight:600; letter-spacing:var(--ls-ui);
  cursor:pointer;
  transition:background .2s, color .2s;
}
/* 每个状态都渲染按钮：高度一致，三张卡的撕口线才能齐平 */
.coupon.is-unlocked .cp-claim{
  animation:claimBreath 2.4s ease-in-out infinite;
}
.coupon.is-unlocked .cp-claim:active{ transform:scale(.96); }
/* 已领取：按钮变金色「去使用」，仍然可点，点了直接去挑商品 */
.coupon.is-claimed .cp-claim{
  background:var(--gold); color:#fff;
  box-shadow:0 2px 8px var(--gold-a38);
}
.coupon.is-claimed .cp-claim:active{ transform:scale(.96); }
.coupon.is-locked .cp-claim,
.coupon.is-pending .cp-claim,
.coupon.is-expired .cp-claim{
  background:var(--n-2); color:var(--muted);
  animation:none; cursor:default;
}
@keyframes claimBreath{
  0%,100%{ box-shadow:0 0 0 0 var(--gold-a55); }
  60%    { box-shadow:0 0 0 8px rgba(194,161,90,0); }
}

/* ===== 已解锁：米金卡面 + 实线金边 ===== */
.coupon.is-unlocked{
  background:var(--gold-paper);
  border:1.5px solid var(--gold);
  box-shadow:var(--elev-gold);
}
.coupon.is-unlocked .cp-amount{ color:var(--gold-deep); }
.coupon.is-unlocked .cp-kind,
.coupon.is-unlocked .cp-req{ color:var(--gold-mute); }
.coupon.is-unlocked .cp-tear{ border-top-color:var(--gold-soft); }

/* ===== 未解锁：灰面 + 虚线 + 锁水印 ===== */
.coupon.is-locked{
  background:var(--n-1);
  border:1px dashed var(--n-4);
  box-shadow:none;
}
.coupon.is-locked .cp-amount{ color:var(--n-5); }
.coupon.is-locked .cp-kind,
.coupon.is-locked .cp-req{ color:var(--faint); }
.coupon.is-locked .cp-tear{ border-top-color:var(--n-3); }

/* ===== 未开始：和未解锁同一套灰面，只是按钮文案不同 ===== */
.coupon.is-pending{
  background:var(--n-1);
  border:1px dashed var(--n-4);
  box-shadow:none;
}
.coupon.is-pending .cp-amount{ color:var(--n-5); }
.coupon.is-pending .cp-kind,
.coupon.is-pending .cp-req{ color:var(--faint); }
.coupon.is-pending .cp-tear{ border-top-color:var(--n-3); }

/* ===== 已领取：绿边白面，和可领取的金色区分开 ===== */
.coupon.is-claimed{
  background:var(--paper);
  border:1.5px solid var(--brand-a22);
  box-shadow:var(--elev-1);
}
.coupon.is-claimed .cp-amount{ color:var(--brand); }
.coupon.is-claimed .cp-kind,
.coupon.is-claimed .cp-req{ color:var(--muted); }

/* ===== 已结束 ===== */
.coupon.is-expired{ opacity:.55; box-shadow:none; background:var(--n-1); }
.coupon.is-expired .cp-amount{ color:var(--muted); }
.coupon.is-expired .cp-kind,
.coupon.is-expired .cp-req{ color:var(--muted); }

/* 升级 / 领取反馈 */
@keyframes tierRise{
  0%   { transform:translateY(14px) scale(.95); opacity:.6;
         box-shadow:0 0 0 0 var(--gold-a60); }
  40%  { transform:translateY(0) scale(1.045); opacity:1;
         box-shadow:0 0 0 20px rgba(194,161,90,0); }
  70%  { transform:translateY(0) scale(.995); }
  100% { transform:translateY(0) scale(1); box-shadow:var(--elev-gold); }
}
.coupon.is-rising{ animation:tierRise .95s cubic-bezier(.22,.8,.28,1); }
.coupon.is-rising::before{
  content:''; position:absolute; inset:0; z-index:0;
  border-radius:var(--r-md); pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 32%,
    var(--gold-a38) 50%,
    rgba(255,255,255,0) 68%);
  background-size:230% 100%;
  animation:shineSweep 1s ease .1s both;
}
@keyframes shineSweep{
  0%  { background-position:190% 0; opacity:0; }
  25% { opacity:1; }
  100%{ background-position:-70% 0; opacity:0; }
}
@keyframes couponFlash{
  0%   { transform:scale(1); }
  35%  { transform:scale(1.018); }
  100% { transform:scale(1); }
}
.coupon.is-flash{ animation:couponFlash .62s cubic-bezier(.22,.8,.28,1); }

/* ---------- 活动未开始 / 已结束：横幅提示 ----------
   头图、活动名和档位仍然展示，只是发起/助力/领取不可用 */
.owner-notice{
  margin:var(--sp-4) var(--gutter) 0;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  background:var(--brand-soft);
  border:1px solid var(--line);
  text-align:center;
}
.owner-notice[hidden]{ display:none; }
.on-title{
  font-size:var(--fs-body); font-weight:600;
  line-height:var(--lh-ui); letter-spacing:var(--ls-ui);
  color:var(--brand-deep);
}
.on-sub{
  margin:var(--sp-1) 0 0;
  font-size:var(--fs-sm); line-height:var(--lh-ui); color:var(--muted);
}

/* ---------- 用券路径：两种方法 ---------- */
.tutorial{ margin-top:var(--sp-4); }
.progress-card[hidden],
.coupon-list[hidden],
.tutorial[hidden]{ display:none; }

.how-lead{
  margin:var(--sp-2) 0 var(--sp-5);
  text-align:center;
  font-size:var(--fs-body); font-weight:700;
  letter-spacing:var(--ls-snug); line-height:var(--lh-tight);
}

.how-item + .how-item{ margin-top:var(--sp-6); }

/* 方法条：深绿底 + 金色「方法一」 */
.how-bar{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:38px; padding:7px 12px;
  border-radius:var(--r-xs);
  background:var(--brand-deep); color:var(--on-brand);
  font-size:var(--fs-sm); font-weight:600;
  letter-spacing:var(--ls-ui); line-height:1.4;
  text-align:center;
}
.how-bar i{ flex:none; font-style:normal; color:var(--gold-bright); font-weight:700; }

/* 步骤文案：一行一步，居中 */
.how-steps{
  margin:var(--sp-3) 0 0; padding:0; list-style:none;
  text-align:center; font-size:var(--fs-sm); color:var(--ink);
  line-height:1.72;
}
/* 长句换行时别把最后一个字孤零零留在下一行（balance 会在词中间断，用 pretty） */
.how-steps li{ text-wrap:pretty; }

.how-shots{
  margin-top:var(--sp-4);
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}

/* ---------- 手机截图 ---------- */
/* 示意图直接用真机截图（public/assets/guide/），这里只管外框 */
.ms{
  border-radius:14px; overflow:hidden;
  background:var(--paper);
  box-shadow:0 6px 16px rgba(27,46,36,.16);
}
.ms img{ display:block; width:100%; height:auto; }

.how-foot{
  margin:var(--sp-5) 0 0;
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  text-align:center; font-size:var(--fs-sm); color:var(--muted);
  line-height:var(--lh-ui);
}

/* ---------- 活动规则 / 用户协议（接口下发的富文本） ---------- */
.rules-sheet{
  display:flex; flex-direction:column; gap:var(--sp-4);
  /* 条款较长，弹窗内部自己滚，标题行保持固定 */
  max-height:min(64vh, 520px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.rich-text{
  font-size:var(--fs-sm); line-height:var(--lh-body); color:var(--muted);
  word-break:break-word; overflow-wrap:anywhere;
}
.rich-text > *{ margin:0; }
.rich-text > * + *{ margin-top:8px; }
.rich-text p{ margin:0; }
.rich-text p + p{ margin-top:6px; }
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4{
  color:var(--ink); font-weight:600;
  line-height:var(--lh-ui); letter-spacing:var(--ls-ui);
}
.rich-text h1{ font-size:var(--fs-lg); }
.rich-text h2,
.rich-text h3,
.rich-text h4{ font-size:var(--fs-sm); }
.rich-text ol,
.rich-text ul{ padding-left:18px; }
.rich-text li + li{ margin-top:4px; }
.rich-text img{ display:block; max-width:100%; height:auto; border-radius:var(--r-sm); }
.rich-text a{ color:var(--brand); }
.rich-text table{ width:100%; border-collapse:collapse; }
.rich-text th,
.rich-text td{ padding:4px 6px; border:1px solid var(--line); text-align:left; }

.rule-sec-title{
  margin:0 0 7px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  letter-spacing:var(--ls-ui); line-height:var(--lh-ui);
}
.rule-sec-body > *{ margin:0; }
.rule-sec-body > * + *{ margin-top:6px; }
.rule-sub{
  padding:0; list-style:none;
  counter-reset:subrule;
}
.rule-sub li{
  position:relative; padding-left:18px;
  counter-increment:subrule;
}
.rule-sub li + li{ margin-top:5px; }
.rule-sub li::before{
  content:counter(subrule) "、";
  position:absolute; left:0; top:0; color:var(--faint);
}

.agreement-sheet{
  max-height:min(58vh, 480px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.agreement-accept{
  flex:none; margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}
.agreement-accept .btn-primary{ width:100%; }
/* ---------- 底部 CTA ---------- */
.footer-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:430px; margin:0 auto;
  padding:12px 20px calc(16px + var(--safe-bottom));
  background:var(--on-brand-veil);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
}
.footer-cta[hidden]{ display:none; }

/* 两个按钮同高、同圆角、同字重，只靠填充区分主次；
   左右按 2:1 分宽（这个 2:1 只作用于底栏，面板里的按钮仍然等分） */
.cta-row{ display:flex; gap:var(--sp-2); }
/* 用 width 而不是 flex-grow：flex-basis:0 时 padding 仍会算进基准，
   2:1 会变成 246.7 : 135.3。按百分比切才精确 */
.cta-row > .btn-primary{
  flex:0 0 auto;
  width:calc((100% - var(--sp-2)) * 2 / 3);
}
.cta-row > .btn-ghost{
  flex:0 0 auto;
  width:calc((100% - var(--sp-2)) / 3);
}
.btn-primary,
.btn-ghost{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 12px;
  border-radius:var(--r-md);
  font:inherit; font-size:var(--fs-body); font-weight:600;
  letter-spacing:var(--ls-ui);
  cursor:pointer;
  transition:transform .16s ease, background .2s, opacity .2s;
}
.btn-primary{
  border:none;
  background:var(--brand-deep); color:var(--on-brand);
}
/* 描边用内阴影而不是 border：border 会让这个按钮比左邻宽 2px */
.btn-ghost{
  border:none;
  background:var(--paper); color:var(--brand-deep);
  box-shadow:inset 0 0 0 1.5px var(--brand-deep);
}
.btn-primary:active,
.btn-ghost:active{ transform:scale(.985); }
.btn-primary:disabled{
  background:var(--n-2); color:var(--faint); cursor:default;
}
.btn-ghost:disabled{
  box-shadow:inset 0 0 0 1.5px var(--n-4);
  color:var(--faint); background:var(--n-1); cursor:default;
}

@keyframes ctaPulse{
  0%,100%{ box-shadow:0 0 0 0 var(--gold-a50); }
  55%    { box-shadow:0 0 0 11px rgba(194,161,90,0); }
}
.btn-primary.is-pulse{ background:var(--brand); animation:ctaPulse 1.9s ease-out infinite; }


/* ============================================================
   好友端：微信小程序落地页
   ============================================================ */
.wx{
  max-width:430px; margin:0 auto; min-height:100vh;
  background:var(--n-1);
  padding-bottom:calc(28px + var(--safe-bottom));
}
.wx[hidden]{ display:none; }

.wx-nav{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:calc(44px + var(--safe-top));
  padding-top:var(--safe-top);
  background:var(--n-1);
}
.wx-back{
  position:absolute; left:14px; top:calc(var(--safe-top) + 22px); transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  padding:0; border:none; background:transparent;
  font:inherit; font-size:22px; line-height:1; color:var(--ink);
  cursor:pointer; user-select:none;
}
.wx-back:active{ background:var(--ink-a05); }
.wx-title{ font-size:var(--fs-body); font-weight:600; }

.wx-main{ padding:var(--sp-2) var(--gutter) 0; }

.as-hero{ text-align:center; padding:var(--sp-5) 0 var(--sp-4); }
.as-from{ font-size:var(--fs-sm); color:var(--muted); }
.as-from b{ color:var(--ink); font-weight:600; }
.as-title{
  margin:var(--sp-2) 0 0;
  font-size:var(--fs-hero); line-height:var(--lh-tight);
  font-weight:700; letter-spacing:var(--ls-snug);
}
.as-sub{ margin:var(--sp-2) 0 0; font-size:var(--fs-sm); color:var(--muted); }
.as-sub[hidden]{ display:none; }
.as-state[hidden], .as-cta[hidden]{ display:none; }

.wx-main[data-layout="notice"] .as-hero{
  min-height:calc(100vh - 210px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:0; padding-bottom:var(--sp-6);
}

.as-state{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--paper);
}
.as-state[data-tone="ok"]{ background:var(--brand-soft); border-color:var(--brand-a22); }
.as-state[data-tone="muted"]{ background:var(--n-1); border-color:var(--line-strong); }
.as-state[data-tone="warn"]{ background:var(--danger-soft); border-color:var(--danger-line); }
/* 待确认：金色，和「已成功」的绿色拉开，避免还没点就以为成了 */
.as-state[data-tone="confirm"]{ background:var(--gold-soft); border-color:var(--gold-a38); }
.as-state-icon{
  position:relative;
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-size:var(--fs-sm); font-weight:700; line-height:1;
  background:var(--n-4); color:var(--paper);
}
.as-state[data-tone="ok"] .as-state-icon{ background:var(--brand); color:var(--on-brand); }
.as-state[data-tone="warn"] .as-state-icon{ background:var(--danger); color:var(--on-brand); }
.as-state[data-tone="confirm"] .as-state-icon{ background:var(--gold); color:#fff; }

/* ---------- 助力成功特效 ---------- */
.as-state.is-pop{ animation:statePop .66s cubic-bezier(.2,.9,.25,1); }
@keyframes statePop{
  0%  { transform:scale(.965); }
  55% { transform:scale(1.015); }
  100%{ transform:scale(1); }
}
.as-state.is-pop .as-state-icon{ animation:iconPop .72s cubic-bezier(.2,.9,.25,1); }
@keyframes iconPop{
  0%  { transform:scale(.2); opacity:0; }
  55% { transform:scale(1.22); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
/* 从对勾向外扩散的一圈金环 */
.as-state.is-pop .as-state-icon::after{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:2px solid var(--gold);
  animation:iconRing .95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes iconRing{
  0%  { transform:scale(1);   opacity:.85; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* 礼花：跟 .wx 同宽居中，撒在视口里 */
.assist-fx{
  position:fixed; left:50%; transform:translateX(-50%);
  top:0; width:100%; max-width:430px; height:100vh;
  pointer-events:none; overflow:hidden; z-index:70;
}
.assist-fx[hidden]{ display:none; }
.assist-fx i{
  position:absolute; top:-16px;
  width:7px; height:11px; border-radius:2px;
  opacity:0;
  animation:fxFall 1.35s cubic-bezier(.26,.62,.42,1) forwards;
}
.assist-fx i.is-round{ width:9px; height:9px; border-radius:50%; }
@keyframes fxFall{
  0%  { opacity:0; transform:translate3d(0,-16px,0) rotate(0deg); }
  10% { opacity:1; }
  70% { opacity:1; }
  100%{ opacity:0; transform:translate3d(var(--dx,0),74vh,0) rotate(var(--rot,360deg)); }
}
@media (prefers-reduced-motion:reduce){
  .as-state.is-pop, .as-state.is-pop .as-state-icon,
  .as-state.is-pop .as-state-icon::after, .assist-fx i{ animation:none; }
  .assist-fx{ display:none; }
}

.as-state-body{ min-width:0; padding-top:1px; }
.as-state-title{ font-size:var(--fs-body); font-weight:600; line-height:var(--lh-ui); }
.as-state[data-tone="warn"] .as-state-title{ color:var(--danger); }
.as-state-desc{ margin-top:var(--sp-1); font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh-ui); }

/* 好友的进度卡：结构直接复用邀请人界面的 .pc-*，只把间距收紧 */
.as-report{
  margin-top:var(--sp-4); padding:14px;
  border-radius:var(--r-md); background:var(--paper);
  border:1px solid var(--ink-a045);
}
.as-report[hidden]{ display:none; }
.as-report .pc-title{ font-size:var(--fs-sm); color:var(--muted); font-weight:500; }
.as-report .pc-title b{ color:var(--ink); font-weight:600; }
.as-report .pc-bar-wrap{ margin-top:var(--sp-4); }

/* 三档券：与邀请人界面同一套 .coupon 阶梯卡，好友侧只读无按钮 */
.as-coupon-list{ margin:var(--sp-4) 0 0; }
.as-coupon-list[hidden]{ display:none; }

/* 主 CTA 撑满整栏，和上方提示框左右对齐成一条竖线 */
.as-cta{
  width:100%; margin-top:var(--sp-4);
  min-height:52px;
  font-size:1.0625rem;
}
.as-foot{
  margin-top:var(--sp-6); text-align:center;
  font-size:var(--fs-cap); color:var(--faint); letter-spacing:var(--ls-cap);
}

/* ---------- 弹窗 ---------- */
.modal-root{ position:fixed; inset:0; z-index:60; }
.modal-root[hidden]{ display:none; }
.modal-mask{
  position:absolute; inset:0; background:var(--ink-a42);
  animation:maskIn .24s ease both;
}
@keyframes maskIn{ from{ opacity:0; } to{ opacity:1; } }

.modal-sheet{
  position:absolute; left:50%; bottom:0;
  width:100%; max-width:430px;
  transform:translateX(-50%);
  background:var(--paper);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--elev-sheet);
  padding:22px 20px calc(20px + var(--safe-bottom));
  max-height:86vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:sheetIn .3s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes sheetIn{ from{ transform:translate(-50%,100%); } to{ transform:translate(-50%,0); } }

.panel[hidden]{ display:none; }

/* ---------- 用户协议大弹窗 ----------
   和底部抽屉是同一个面板，只换壳：居中、留白更大、底部固定同意按钮 */
.modal-sheet.is-agreement{
  top:50%; bottom:auto;
  width:calc(100% - 44px); max-width:362px;
  transform:translate(-50%,-50%);
  border-radius:20px;
  padding:24px 20px 18px;
  max-height:82vh;
  box-shadow:0 24px 60px rgba(0,0,0,.30);
  animation:introIn .34s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes introIn{
  from{ opacity:0; transform:translate(-50%,-47%) scale(.94); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* 协议区自己滚，同意按钮永远留在可见处 */
.modal-sheet.is-agreement .panel-agreement{ display:flex; flex-direction:column; min-height:0; }
.modal-sheet.is-agreement .agreement-sheet{
  flex:1 1 auto; min-height:0;
  max-height:calc(82vh - 190px);
  padding-right:2px;
}

/* 海报弹窗：不贴底，改成屏幕正中一张白卡，卡下一行提示。
   卡里只有一张合成好的图，长按就是系统「存储图像」——不做分享渠道 */
.modal-sheet.is-poster{
  top:50%; bottom:auto;
  width:calc(100% - 48px); max-width:330px;
  transform:translate(-50%,-50%);
  background:transparent; box-shadow:none;
  padding:0; max-height:none; overflow:visible;
  animation:posterIn .26s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes posterIn{
  from{ opacity:0; transform:translate(-50%,-46%) scale(.97); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.poster-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 20px 52px rgba(0,0,0,.34);
}
.poster-img{
  display:block; width:100%; height:auto;
  /* 长按要能唤出系统菜单，别让通用样式把它变成不可选 */
  -webkit-touch-callout:default;
  -webkit-user-select:auto; user-select:auto;
}
/* 提示压在页面内容上，给个半透明胶囊底，浅色深色背景都读得清 */
.poster-tip{
  margin:16px auto 0; width:max-content; max-width:100%;
  padding:7px 15px; border-radius:999px;
  background:rgba(0,0,0,.46);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:var(--fs-sm); color:#fff;
  letter-spacing:var(--ls-cap); text-align:center;
}

.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-4);
}
.sheet-title{ font-size:var(--fs-lg); font-weight:600; letter-spacing:var(--ls-tight); }
.sheet-close{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--brand-soft); color:var(--muted);
  font-size:var(--fs-body); line-height:1; cursor:pointer;
}

/* ---------- 弹层按钮 ---------- */
.btn-row{ display:flex; flex-direction:column; gap:var(--sp-3); }
.btn-secondary{
  display:block; width:100%; min-height:46px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--paper); color:var(--ink);
  font:inherit; font-size:var(--fs-body); font-weight:500; cursor:pointer;
}
.btn-secondary:active{ background:var(--n-1); }
.btn-secondary[hidden]{ display:none; }

/* 助力二次确认抽屉 */
.confirm-hero{ text-align:center; padding:var(--sp-3) 0 var(--sp-5); }
.confirm-line{ font-size:var(--fs-body); font-weight:600; }
.confirm-desc{
  margin:var(--sp-2) auto 0; max-width:264px;
  font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh-body);
}
.confirm-desc b{ color:var(--brand); font-weight:700; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; top:34%;
  transform:translate(-50%,10px);
  z-index:80;
  /* left:50% 会让收缩宽度只剩半个屏，用 max-content 才不会被逼着换行 */
  width:max-content; max-width:calc(100vw - 48px);
  padding:11px 18px; border-radius:var(--r-md);
  background:var(--ink-a92); color:var(--on-brand);
  box-shadow:var(--elev-3);
  font-size:var(--fs-sm); line-height:var(--lh-ui); text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}