/* 物洁盟接活宝 · H5 购买页
   配色：深墨绿（庄重、跟物业/保洁行业的老派信任感对得上）+ 金（钱的暗示）+ 暖纸底（不刺眼） */

:root{
  --ink:#0E3B31;
  --ink-2:#17564A;
  --gold:#C9A227;
  --gold-soft:#F0E3BE;
  --paper:#F7F5EF;
  --card:#FFFFFF;
  --line:#E3DED2;
  --text:#1B2422;
  --muted:#6F7A75;
  --danger:#B4453C;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--paper);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  padding-bottom:104px;
}
.hidden{display:none!important}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold-soft)}

main{max-width:520px;margin:0 auto;padding:0 18px}

/* ---------- 头部 ---------- */
.hero{padding:26px 0 18px}
.brand{
  display:inline-block;font-size:12px;letter-spacing:.18em;color:var(--ink);
  border:1px solid var(--gold);border-radius:2px;padding:3px 9px;margin-bottom:16px;
  background:linear-gradient(180deg,#fff,var(--gold-soft));
}
.hero h1{
  font-size:27px;line-height:1.38;margin:0 0 10px;font-weight:800;letter-spacing:-.4px;color:var(--ink);
}
.hero h1 em{font-style:normal;color:var(--gold);border-bottom:3px solid var(--gold-soft)}
.hero .sub{margin:0;color:var(--muted);font-size:13.5px;line-height:1.75}

/* ---------- 套餐 ---------- */
.plans{display:flex;flex-direction:column;gap:12px;margin:18px 0 6px}
.plan{
  position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:16px 16px 14px;display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:border-color .16s,box-shadow .16s,transform .12s;
}
.plan:active{transform:scale(.995)}
.plan.on{border-color:var(--ink);box-shadow:0 6px 18px rgba(14,59,49,.12)}
.plan.on::after{
  content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(201,162,39,.35);
}
.plan .left{flex:1;min-width:0}
.plan .nm{font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.plan .tag{
  font-size:10.5px;font-weight:600;color:#7A5C00;background:var(--gold-soft);
  border-radius:999px;padding:2px 8px;letter-spacing:.02em;
}
.plan .cr{font-size:13px;color:var(--muted);margin-top:2px}
.plan .ds{font-size:12px;color:#98A29D;margin-top:4px;line-height:1.5}
.plan .right{text-align:right;flex-shrink:0}
.plan .pr{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.plan .pr small{font-size:13px;font-weight:600;margin-right:1px}
.plan .per{font-size:11px;color:#A8B0AC;margin-top:1px}

/* 单选圆点 */
.plan .dot{
  width:20px;height:20px;border-radius:50%;border:1.5px solid #CFD6D2;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.plan.on .dot{border-color:var(--ink);background:var(--ink)}
.plan.on .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* ---------- 表单 ---------- */
.form{margin:16px 0 8px}
.form label{display:block}
.form span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.form .opt{color:#A8B0AC}
.form input{
  width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--text);outline:none;font-family:inherit;
}
.form input:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(23,86,74,.08)}

/* ---------- 底部支付条 ---------- */
.paybar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;
  max-width:520px;margin:0 auto;
}
.paybar .price{flex:1;display:flex;align-items:baseline;gap:8px}
.paybar .amt{font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.6px}
.paybar .unit{font-size:12.5px;color:var(--muted)}
.btn{
  border:0;border-radius:10px;padding:14px 24px;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  font-family:inherit;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 6px 16px rgba(14,59,49,.22);min-width:126px;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;box-shadow:none}

.fine{font-size:11.5px;color:#9AA39F;line-height:1.8;margin:14px 0 8px}

/* ---------- 二维码 ---------- */
.qrbox{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin:28px 0;padding:24px 20px;text-align:center;
}
.qrbox h2{font-size:18px;margin:0 0 4px;color:var(--ink)}
.qr-amt{font-size:26px;font-weight:800;color:var(--gold);margin:6px 0 16px}
.qrbox img{width:220px;height:220px;display:block;margin:0 auto;border-radius:8px;background:#fff}
.qr-tip{font-size:12px;color:var(--muted);line-height:1.7;margin:14px 0 6px}
.qr-wait{font-size:12.5px;color:var(--ink-2);margin:6px 0 0}
.linkbtn{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;font-family:inherit;padding:10px}

/* ---------- 成功 ---------- */
.done{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:22px 0;padding:24px 20px;text-align:center}
.done .ok{
  width:54px;height:54px;border-radius:50%;margin:0 auto 12px;
  background:var(--ink);color:var(--gold);font-size:28px;line-height:54px;font-weight:700;
}
.done h2{font-size:19px;margin:0 0 6px;color:var(--ink)}
.done-sub{font-size:13px;color:var(--muted);margin:0 0 18px}

.codebox{
  border:1.5px dashed var(--gold);border-radius:12px;background:#FFFDF6;
  padding:16px 12px;margin-bottom:18px;
}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:27px;font-weight:800;letter-spacing:2.5px;color:var(--ink);
  word-break:break-all;line-height:1.3;
}
.copy{
  margin-top:10px;border:0;border-radius:8px;padding:9px 18px;font-size:13.5px;font-weight:600;
  background:var(--ink);color:#fff;font-family:inherit;cursor:pointer;
}
.copy.ok{background:#2F7D5F}

.steps{text-align:left;margin:0 0 14px;padding-left:20px;color:var(--text);font-size:14px;line-height:1.9}
.steps b{color:var(--ink)}
.steps li::marker{color:var(--gold);font-weight:700}