/* ============================================================
   省钱清单 · 样式表
   设计系统：纸白底 / 纯白卡 / 近黑文字 / 单一强 CTA
   层级靠留白与字号拉开，不靠颜色堆叠
   ============================================================ */

/* ── 令牌 ── */
:root{
  /* 底色：暖白，比纯白柔和，比米黄干净 */
  --paper:#fbf9f5;
  --surface:#ffffff;
  --sunken:#f7f2ea;

  /* 文字：近黑，三级灰阶 */
  --ink:#2b2622;
  --ink-2:#615a52;
  --ink-3:#978e83;

  /* 分隔线 */
  --line:#eee7dc;
  --line-2:#ddd4c6;

  /* 莫兰迪强调色：低饱和但不发灰 */
  --clay:#9d5c33;          /* 陶土（主 CTA，白字对比 4.9:1） */
  --clay-2:#b8733f;        /* 陶土亮部，用于 hover 与描边 */
  --clay-soft:#fdf1e6;
  --sage:#66854f;          /* 鼠尾草 */
  --sage-soft:#eef6e6;
  --rose:#b0664d;          /* 豆沙 */
  --rose-soft:#fdece6;
  --slate:#5b7a92;         /* 雾蓝 */
  --slate-soft:#ecf3f9;

  --r-sm:4px;
  --r-md:10px;
  --r-lg:16px;

  --sh-1:0 1px 2px rgba(43,38,34,.05);
  --sh-2:0 1px 2px rgba(43,38,34,.05),0 10px 28px -18px rgba(43,38,34,.28);

  --ease:cubic-bezier(.2,.6,.3,1);

  /* 兼容旧引用（guide / admin 内联样式仍在用） */
  --bg:#fbf9f5;
  --surface-2:#fdfbf7;
  --surface-3:#f7f2ea;
  --accent:#9d5c33;
  --accent-2:#b8733f;
  --accent-3:#e2c6a8;
  --dust:#b0664d;
  --blue:#5b7a92;
  --radius:16px;
  --brand:#9d5c33;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ol,ul{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
input,button,select,textarea{font:inherit;color:inherit}
svg{display:block}

/* ── 布局 ── */
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 132px;
}

/* ── Hero ── */
.hero{
  padding:30px 20px 78px;
  background:linear-gradient(168deg,#ff7a18 0%,#ff4a20 42%,#f42a3c 100%);
  color:#fff;
  text-align:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:99px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.34);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
}

.hero h1{
  margin-top:14px;
  font-size:38px;
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 12px rgba(150,20,10,.24);
}
.hero h1 em{
  font-style:normal;
  color:#ffe14d;
}

.lede{
  margin-top:12px;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.94);
}

.usp{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.usp li{
  padding:6px 14px;
  border-radius:99px;
  background:#fff;
  color:#e03a12;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  box-shadow:0 2px 9px -3px rgba(150,20,10,.3);
}
.usp li::before{
  content:"✅";
  margin-right:5px;
  font-size:11px;
}

/* ── 步骤轨 ── */
/* ── 进度卡 ── */
.panel--progress{
  position:relative;
  z-index:1;
  margin-top:-52px;
  padding:18px 20px 15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 14px 34px -18px rgba(90,40,10,.4), var(--sh-1);
}
.pg-head{display:flex;align-items:baseline;justify-content:space-between}
.pg-head b{font-size:13px;color:var(--ink);font-weight:600}
.pg-count{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pg-bar{
  margin-top:10px;
  height:5px;
  border-radius:99px;
  background:var(--sunken);
  overflow:hidden;
}
.pg-bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--clay);
  transition:width .35s var(--ease);
}
.pg-dots{display:flex;justify-content:space-between;margin-top:16px}
.pd{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
}
.pd::before{
  content:"";
  position:absolute;
  top:11px;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
}
.pd:first-child::before{left:50%}
.pd:last-child::before{right:50%}
.pd.is-done::before{background:var(--sage)}
.pd-dot{
  position:relative;
  z-index:1;
  width:23px;
  height:23px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--paper);
  border:1px solid var(--line-2);
  color:var(--ink-3);
  transition:all .25s var(--ease);
}
.pd.is-done .pd-dot{background:var(--sage);border-color:var(--sage);color:#fff}
.pd.is-current .pd-dot{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
  box-shadow:0 0 0 4px rgba(157,92,51,.12);
}
.pd-label{font-size:11px;color:var(--ink-3);line-height:1}
.pd.is-done .pd-label{color:var(--sage)}
.pd.is-current .pd-label{color:var(--clay);font-weight:600}
.pg-tip{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:12.5px;
  color:var(--ink-2);
  text-align:center;
}

/* ── 卡片 ── */
.list{margin-top:14px}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.card + .card{margin-top:10px}

.card.open{
  border-color:var(--line-2);
  box-shadow:var(--sh-1);
}
.card--lead{
  background:var(--surface);
  border-color:var(--line-2);
  box-shadow:var(--sh-2);
}
.card--lead + .card{margin-top:12px}

.card-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 24px;
  cursor:pointer;
  user-select:none;
}
.card--lead .card-head{padding:24px 24px 20px}

/* 折叠态之间用极淡分隔线，避免糊成一片 */
.card + .card{position:relative}
.card:not(.open):not(.card--lead)::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:var(--line);
}

.card-no{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--sunken);
  color:var(--ink-3);
  margin-top:1px;
  transition:all .2s var(--ease);
}
.card--lead .card-no{
  background:var(--clay);
  color:#fff;
}
.card.done .card-no{
  background:var(--sage-soft);
  color:var(--sage);
}

.card-head-txt{flex:1;min-width:0}

.card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.card--lead .card-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
}

.card-sub{
  margin-top:5px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-3);
}
.card--lead .card-sub{
  margin-top:7px;
  font-size:13px;
  color:var(--ink-2);
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:var(--r-sm);
  background:#fbe2c6;
  color:#8a4f22;
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}

.chev{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin-top:4px;
  color:var(--ink-3);
  transition:transform .22s var(--ease);
}
.card.open .chev{transform:rotate(180deg)}

.card-body{
  display:none;
  padding:0 24px 20px;
}
.card.open .card-body{display:block;animation:reveal .22s var(--ease)}
.card--lead .card-body{padding:0 24px 26px}

@keyframes reveal{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* ── 说明块 ── */
.why{
  background:var(--clay-soft);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-2);
  margin-bottom:16px;
}
.why b,.why strong{color:var(--ink);font-weight:600}

.hint{
  margin-top:12px;
  font-size:12px;
  line-height:1.6;
  color:var(--ink-3);
  text-align:center;
}

/* ── 表单 ── */
.field{margin-bottom:12px}
.field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  margin-bottom:7px;
}

.input-row{display:flex;gap:8px}
.input-row input,
.field > input{
  flex:1;
  min-width:0;
  width:100%;
  height:44px;
  padding:0 13px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:14.5px;
  font-variant-numeric:tabular-nums;
  outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.input-row input::placeholder,
.field > input::placeholder{color:var(--ink-3)}
.input-row input:focus,
.field > input:focus{
  border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(157,92,51,.1);
}

/* ── 按钮 ── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:44px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:var(--clay);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s var(--ease),background .15s var(--ease),opacity .15s var(--ease);
}
.btn:hover:not(:disabled){background:var(--clay-2)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn:disabled{opacity:.4;cursor:default}

.btn-block{display:flex;width:100%}
.btn.small{height:36px;padding:0 14px;font-size:13px}

.btn.ghost,
.btn-ghost{
  background:transparent;
  color:var(--ink-2);
  border-color:var(--line-2);
}
.btn.ghost:hover:not(:disabled),
.btn-ghost:hover:not(:disabled){
  background:var(--sunken);
  color:var(--ink);
}

.btn-primary{background:var(--ink);color:#fff}

.btn-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  margin-top:4px;
}
.btn-row .btn{min-width:0}
/* 主按钮吃满剩余宽度，「网页打开」按内容宽度靠右 */
.btn-row .btn:not(.btn-ghost){flex:1 1 auto}
.btn-row .btn-ghost{flex:0 0 auto;padding-left:16px;padding-right:16px;white-space:nowrap}
.btn-row--done .btn-done{flex:1 1 auto}
@media (max-width:400px){
  .btn-row .btn-ghost{padding-left:13px;padding-right:13px;font-size:13px}
}

.spin{
  width:13px;
  height:13px;
  border:1.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn.ghost .spin,.btn-ghost .spin{
  border-color:rgba(31,29,27,.25);
  border-top-color:var(--ink);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 消息 ── */
.msg{
  display:none;
  padding:10px 13px;
  border-radius:var(--r-md);
  font-size:12.5px;
  line-height:1.6;
  margin-bottom:14px;
}
.msg.show{display:block}
.msg.ok{background:var(--sage-soft);color:#4e5c48}
.msg.err{background:var(--rose-soft);color:#8d4f3f}
.msg.info{background:var(--sunken);color:var(--ink-2)}

/* ── 券 ── */
.coupon-list{display:flex;flex-direction:column;gap:8px}

.coupon{
  display:flex;
  align-items:stretch;
  gap:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}

.coupon-amt{
  flex:0 0 96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:14px 8px;
  background:var(--clay-soft);
  color:var(--clay);
  font-variant-numeric:tabular-nums;
}
.coupon-amt .n{
  font-size:24px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.coupon-amt .n small{font-size:13px;font-weight:600;margin-right:1px}
.coupon-amt .t{
  margin-top:5px;
  font-size:11px;
  font-weight:600;
  color:var(--ink-3);
}

.coupon-info{
  flex:1;
  min-width:0;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.coupon-name{
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.coupon-meta{
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.coupon-src{
  font-size:11px;
  color:var(--clay);
  font-weight:600;
}

/* ── 二维码 ── */
.qr-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:6px 0 0;
}

.qr-frame{
  width:176px;
  height:176px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  border-radius:var(--r-md);
  position:relative;
}
.qr-frame svg{width:100%;height:100%}
.qr-frame.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r-md);
  background:var(--sunken);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.45}
  50%{opacity:.85}
}

.qr-tip{
  margin-top:16px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-2);
  text-align:center;
  max-width:26em;
}
.qr-tip b{color:var(--ink);font-weight:600}

.qr-meta{
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.qr-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sage);
  flex:0 0 5px;
}

.qr-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:280px;
  margin:20px auto 0;
}

.qr-mobile-only{display:none}

/* ── 推广位 ── */
.promo-hero{
  padding:18px;
  border-radius:var(--r-md);
  background:var(--clay-soft);
}
.promo-hero .t{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--clay);
}
.promo-hero .d{
  margin-top:8px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink-2);
}
.promo-hero .big{
  margin-top:12px;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.promo-hero .btn{margin-top:14px}

/* ── 已领取态 ── */
.btn-done,
.btn-done:disabled{
  background:var(--sunken);
  color:var(--ink-2);
  border:1px solid var(--line);
  cursor:default;
  opacity:1;
  font-size:15px;
  letter-spacing:.04em;
}
.done-tag{
  margin:10px auto 0;
  width:max-content;
  padding:3px 12px;
  border-radius:99px;
  background:var(--clay-soft);
  color:var(--clay);
  font-size:11.5px;
}
.done-note{
  margin-top:16px;
  padding:11px 14px;
  border-radius:var(--r-md);
  background:var(--sage-soft);
  color:var(--sage);
  font-size:13px;
  text-align:center;
}
.done-lead{
  margin-top:18px;
  font-size:13px;
  color:var(--ink-2);
}
/* 微信内置浏览器无法唤起 App 的引导 */
.wx-tip{
  margin:2px 0 14px;
  padding:14px 16px;
  border-radius:var(--r-md);
  background:var(--clay-soft);
  border:1px solid rgba(157,92,51,.16);
  text-align:left;
}
.wx-tip b{display:block;font-size:13.5px;font-weight:600;color:var(--clay);margin-bottom:6px}
.wx-tip span{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.wx-tip i{font-style:normal;font-weight:700;color:var(--clay);padding:0 1px}
.ch-status{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.ch-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12.5px;
  color:var(--ink-2);
  line-height:1.55;
}
.ch-row i{
  flex:0 0 17px;
  height:17px;
  border-radius:5px;
  background:var(--clay-soft);
  color:var(--clay);
  font-size:10.5px;
  font-style:normal;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}
.coupon-state{
  flex:0 0 auto;
  align-self:center;
  padding:3px 9px;
  border-radius:99px;
  background:var(--rose-soft);
  color:var(--rose);
  font-size:11px;
}

/* ── 券列表分页 ── */
.coupon-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}
.pg-btn{
  padding:6px 14px;
  border:1px solid var(--line-2);
  border-radius:99px;
  background:var(--surface);
  color:var(--ink-2);
  font-size:12.5px;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.pg-btn:hover:not(:disabled){ background:var(--sunken); border-color:var(--clay-2); }
.pg-btn:active:not(:disabled){ transform:scale(.96); }
.pg-btn:disabled{ opacity:.4; cursor:default; }
.pg-info{ font-size:12px; color:var(--ink-3); letter-spacing:.02em; }

/* ── 底部悬浮条 ── */
.dock{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%,140%);
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(560px, calc(100% - 32px));
  padding:11px 14px;
  border-radius:16px;
  background:rgba(43,38,34,.94);
  color:#fff;
  box-shadow:0 10px 28px -10px rgba(43,38,34,.45);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease);
}
.dock.show{transform:translate(-50%,0)}
.dock-ico{
  flex:0 0 auto;
  font-size:14px;
  opacity:.7;
}
.dock-txt{
  flex:1;
  font-size:12.5px;
  color:rgba(255,255,255,.9);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dock-btn{
  flex:0 0 auto;
  padding:7px 15px;
  border-radius:99px;
  border:0;
  background:var(--clay-2);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.dock-btn:active{transform:scale(.96)}

/* ── 页脚 ── */
.foot{
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  line-height:1.8;
  color:var(--ink-3);
  text-align:center;
}
.foot p + p{margin-top:3px}
.foot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

.center{text-align:center}

.phone-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 12px;
  margin-bottom:14px;
  border-radius:var(--r-md);
  background:var(--sage-soft);
  font-size:12.5px;
  color:#4e5c48;
}
.phone-line b{font-variant-numeric:tabular-nums}

/* ── 弹窗 ── */
.mask{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(31,29,27,.32);
  backdrop-filter:blur(2px);
}
.mask.show{display:flex}

.notice{
  width:100%;
  max-width:400px;
  max-height:78vh;
  overflow-y:auto;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:26px 24px 22px;
  box-shadow:0 24px 60px -24px rgba(31,29,27,.4);
  animation:pop .24s var(--ease);
}
@keyframes pop{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}

.notice h3{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:14px;
}

.notice-content{
  font-size:13px;
  line-height:1.8;
  color:var(--ink-2);
}
.notice-content p + p{margin-top:10px}
.notice-content .center{margin:12px 0}

.notice .btn{width:100%;margin-top:20px}

.notice-link{
  display:block;
  margin-top:12px;
  font-size:13px;
  color:var(--clay);
  text-align:center;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ── Toast ── */
.toast{
  position:fixed;
  left:50%;
  bottom:32px;
  z-index:95;
  transform:translate(-50%,12px);
  max-width:calc(100vw - 40px);
  padding:11px 18px;
  border-radius:var(--r-md);
  background:rgba(31,29,27,.92);
  color:#fff;
  font-size:13px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── 富文本 ── */
.rich-i{font-style:italic}
.rich-u{text-decoration:underline;text-underline-offset:2px}
.rich-del{text-decoration:line-through;opacity:.6}
.rich-hl{background:#f6efd9;padding:1px 3px;border-radius:3px}
.rich-red{color:var(--rose);font-weight:600}

/* ============================================================
   移动端接力页 /m/<token>
   ============================================================ */
.m-wrap{
  max-width:440px;
  margin:0 auto;
  padding:0 20px 56px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.m-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 0 0;
}
.m-mark{
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
}
.m-title{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.m-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}

.m-card{
  margin-top:40px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 22px 24px;
  box-shadow:var(--sh-2);
}
.m-body{padding:0}

.m-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--clay-soft);
  color:var(--clay);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:700;
  margin-bottom:16px;
}
.m-icon.ok{background:var(--sage-soft);color:var(--sage)}

.m-h2{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.35;
}
.m-p{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-2);
}

.m-body .f-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  margin:22px 0 7px;
}
.m-body .f-input{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.m-body .f-input::placeholder{color:var(--ink-3)}
.m-body .f-input:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(31,29,27,.07);
}
.m-body .f-row{display:flex;gap:8px}
.m-body .f-row .f-input{flex:1;min-width:0}
.m-body .f-btn-send{
  flex:0 0 auto;
  height:46px;
  padding:0 15px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--ink-2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.m-body .f-btn-send:hover:not(:disabled){background:var(--sunken);color:var(--ink)}
.m-body .f-btn-send:disabled{opacity:.45;cursor:default}

.m-body .btn{width:100%;margin-top:20px;height:46px}

.m-body .m-msg{
  display:none;
  margin-top:14px;
  padding:10px 13px;
  border-radius:var(--r-md);
  font-size:12.5px;
  line-height:1.6;
}
.m-body .m-msg.ok{display:block;background:var(--sage-soft);color:#4e5c48}
.m-body .m-msg.err{display:block;background:var(--rose-soft);color:#8d4f3f}

.m-done{display:none;text-align:center;padding:8px 0 4px}
.m-tick{
  width:52px;
  height:52px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--sage-soft);
  color:var(--sage);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.m-done-t{font-size:19px;font-weight:700;letter-spacing:-.01em}
.m-done-s{margin-top:9px;font-size:13px;line-height:1.7;color:var(--ink-2)}

.m-app{
  display:block;
  margin-top:26px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:var(--clay);
}

.m-foot{
  margin-top:auto;
  padding-top:32px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--ink-3);
  text-align:center;
}

/* ============================================================
   后台
   ============================================================ */
/* 登录框（顶层元素，不依赖 .admin-wrap） */
.login.card{
  max-width:368px;
  margin:72px auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 26px 26px;
  box-shadow:var(--sh-2);
}
.login.card h1{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.login.card label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  margin:16px 0 7px;
}
.login.card input{
  width:100%;
  height:42px;
  padding:0 13px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:14px;
  outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.login.card input:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(31,29,27,.07);
}
.login.card button{
  width:100%;
  height:44px;
  border:0;
  border-radius:var(--r-md);
  background:var(--ink);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.login.card button:hover{background:var(--clay-2)}

.admin-wrap{
  max-width:1040px;
  margin:0 auto;
  padding:32px 20px 64px;
}
.admin-wrap h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:20px;
}
.admin-wrap .card h1{
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  margin:0 0 14px;
}
.admin-wrap > p.muted{margin:-12px 0 18px}

.admin-wrap .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 22px;
  margin-bottom:14px;
  box-shadow:var(--sh-1);
}

.admin-wrap .login{
  max-width:360px;
  margin:80px auto;
}
.admin-wrap .login h1{font-size:20px;margin-bottom:22px}
.admin-wrap .login label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  margin:14px 0 7px;
}
.admin-wrap .login button{
  width:100%;
  margin-top:22px;
  height:44px;
  border:0;
  border-radius:var(--r-md);
  background:var(--ink);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}

.tabs{
  display:flex;
  gap:4px;
  margin-bottom:18px;
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
}
.tabs button{
  padding:9px 14px;
  border:0;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:transparent;
  color:var(--ink-3);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:color .15s var(--ease),background .15s var(--ease);
}
.tabs button:hover{color:var(--ink);background:var(--sunken)}
.tabs button.on{color:var(--ink);background:var(--sunken)}

.kpi{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:14px;
}
.kpi > div{
  background:var(--paper);
  border:0;
  border-radius:var(--r-md);
  padding:15px 16px;
}
.kpi b{
  display:block;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.kpi span{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  color:var(--ink-3);
}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.col{display:flex;flex-direction:column;gap:12px}
.col label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  margin-bottom:6px;
}
.col input{
  width:100%;
  height:40px;
  padding:0 12px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:13.5px;
  outline:none;
}
.col input:focus{border-color:var(--ink)}

.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row > .col{flex:1 1 0;min-width:0;align-self:flex-start}

.tag{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--r-sm);
  font-size:11px;
  font-weight:600;
  background:var(--sunken);
  color:var(--ink-2);
}
.tag.on{background:var(--sage-soft);color:#4e5c48}
.tag.off{background:var(--sunken);color:var(--ink-3)}
.tag.warn{background:#f6efd9;color:#8a6d2f}
.tag.danger{background:var(--rose-soft);color:#8d4f3f}

.muted{color:var(--ink-3);font-size:12px}
.hide{display:none !important}

.admin-wrap button{
  height:38px;
  padding:0 15px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--ink-2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.admin-wrap button:hover{background:var(--sunken);color:var(--ink)}
.admin-wrap button.primary{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.admin-wrap button.primary:hover{background:var(--clay-2)}

.admin-wrap table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.admin-wrap th{
  text-align:left;
  padding:8px 10px;
  font-size:11px;
  font-weight:600;
  color:var(--ink-3);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.admin-wrap td{
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.admin-wrap td b{color:var(--ink);font-weight:600}
.admin-wrap tr:last-child td{border-bottom:0}

/* ── 说明页 ── */
.doc{
  max-width:660px;
  margin:0 auto;
  padding:40px 20px 72px;
}
.doc h1{
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.3;
}
.doc h2{
  font-size:16px;
  font-weight:700;
  margin:34px 0 10px;
  letter-spacing:-.01em;
}
.doc p{
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink-2);
  margin-top:9px;
}
.doc .lead{
  margin-top:12px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-2);
}
.doc .box{
  margin-top:14px;
  padding:14px 16px;
  border-radius:var(--r-md);
  background:var(--clay-soft);
  font-size:13px;
  line-height:1.8;
  color:var(--ink-2);
}
.doc .back{
  display:inline-block;
  margin-top:36px;
  font-size:13px;
  font-weight:600;
  color:var(--clay);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:899px){
  .kpi{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}

@media (max-width:719px){
  body{font-size:14px}

  .wrap{padding:0 16px 124px}

  .hero{padding:24px 16px 66px}
  .hero h1{font-size:31px}
  .lede{font-size:13px}
  .usp{gap:6px;margin-top:14px}
  .usp li{padding:5px 11px;font-size:11.5px}

  .panel--progress{margin-top:-44px;padding:16px 16px 13px}
  .pd-label{font-size:10px}

  .list{margin-top:12px}

  .dock{bottom:12px;width:calc(100% - 24px)}

  .card-head{padding:15px 18px}
  .card--lead .card-head{padding:20px 18px 18px}
  .card--lead .card-title{font-size:18px}
  .card-body{padding:0 18px 18px}
  .card--lead .card-body{padding:0 18px 22px}
  .card:not(.open):not(.card--lead)::before{left:18px;right:18px}

  .qr-frame{width:180px;height:180px}
  .qr-actions{max-width:none}

  .promo-hero{padding:16px}
  .promo-hero .big{font-size:23px}

  .foot{margin-top:40px}

  .notice{padding:22px 20px 20px}

  .admin-wrap{padding:20px 16px 52px}
  .admin-wrap .card{padding:16px 16px}

  .doc{padding:32px 16px 60px}
  .doc h1{font-size:23px}
}

@media (max-width:400px){
  .hero h1{font-size:27px}
  .coupon-amt{flex-basis:84px}
  .coupon-amt .n{font-size:21px}
  .m-wrap{padding:0 16px 44px}
  .m-card{padding:24px 18px 20px}
}

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

/* ==================== 后台管理 ==================== */
.admin-body{background:var(--paper);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}

/* 登录 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login{width:100%;max-width:380px;padding:32px 28px}
.login h1{font-size:20px;margin:0 0 6px;letter-spacing:-.01em}
.login > .muted{font-size:12.5px;line-height:1.6;margin:0 0 24px;color:var(--ink-3)}

/* 框架 */
.admin-wrap{max-width:1120px;margin:0 auto;padding:28px 24px 72px}
.ah{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.ah h1{font-size:21px;margin:0;letter-spacing:-.015em;font-weight:600}
.ah .muted{font-size:12.5px;margin:7px 0 0;color:var(--ink-3);line-height:1.5}

.tabs{display:flex;gap:4px;margin-bottom:16px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:8px 16px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tabs button:hover{background:var(--sunken);color:var(--ink)}
.tabs button.on{background:var(--clay);color:#fff;font-weight:600}

/* 卡片 */
.admin-wrap .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:14px;box-shadow:none}
.admin-wrap .card h2{font-size:15px;font-weight:600;margin:0 0 4px;letter-spacing:-.005em;color:var(--ink)}
.admin-wrap .card > .muted{font-size:12.5px;line-height:1.7;margin:0 0 18px;color:var(--ink-3)}
.admin-wrap .card > .muted b{color:var(--ink-2);font-weight:600}

/* 表单字段 */
.f{margin-bottom:16px}
.f:last-child{margin-bottom:0}
.f > label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:7px;line-height:1.45}
.f input,.f select,.f textarea{display:block;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink);font-size:13.5px;font-family:inherit;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.f input,.f select{height:40px}
.f select{padding-right:32px;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23978e83' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.f textarea{resize:vertical;min-height:88px}
.f input::placeholder,.f textarea::placeholder{color:#bdb4a9}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--clay);box-shadow:0 0 0 3px rgba(157,92,51,.1)}
.f-inline{display:flex;align-items:center;gap:12px}
.f-inline > label{margin:0;flex:0 0 auto}
.f-inline select{width:auto;min-width:180px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px}

.acts{display:flex;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

/* 按钮 */
.admin-wrap button,.login button{padding:9px 18px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.admin-wrap button:hover,.login button:hover{background:var(--sunken)}
.admin-wrap button:active,.login button:active{transform:scale(.98)}
.admin-wrap button.primary,.login button.primary{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:600}
.admin-wrap button.primary:hover,.login button.primary:hover{background:var(--clay-2);border-color:var(--clay-2)}
.admin-wrap button.ghost,.login button.ghost{background:transparent;color:var(--ink-2)}
.admin-wrap button.ghost:hover,.login button.ghost:hover{background:var(--sunken);color:var(--ink)}
.login button.block{display:block;width:100%;margin-top:10px;height:42px}

/* KPI */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.kpi > div{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--sunken)}
.kpi b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.kpi span{display:block;margin-top:5px;font-size:12px;color:var(--ink-3)}

/* 表格 */
.tw{overflow-x:auto;margin-top:14px}
.admin-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.admin-wrap th{padding:9px 12px;text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap}
.admin-wrap td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle;white-space:nowrap}
.admin-wrap tbody tr:last-child td{border-bottom:0}
.admin-wrap tbody tr:hover td{background:var(--sunken)}
.admin-wrap td b{color:var(--ink);font-weight:600}
.admin-wrap td button{padding:5px 12px;font-size:12.5px}

/* 状态标签 */
.tag{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:500;line-height:1.5}
.tag.on{background:var(--sage-soft);color:#4e6b3f}
.tag.off{background:var(--sunken);color:var(--ink-3)}
.tag.warn{background:#faf0d8;color:#8a6a2a}
.tag.danger{background:var(--rose-soft);color:#9d4f38}

/* 双栏 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.split > .card{margin-bottom:0}

@media (max-width:900px){
  .grid3,.grid4,.kpi{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width:719px){
  .admin-wrap{padding:18px 14px 56px}
  .admin-wrap .card{padding:18px 16px}
  .grid2,.grid3,.grid4,.kpi{grid-template-columns:1fr}
  .ah h1{font-size:18px}
  .f-inline{flex-direction:column;align-items:stretch;gap:7px}
  .f-inline select{width:100%}
}