/* 字体不引外部样式表：与报告模板保持一致，直接用本机字体栈（下面的 --serif / --sans）。
   站点面向中国大陆用户，fonts.googleapis.com 会被拦，放在支付页上会让首屏挂住十几秒。 */

/* ============================================================
   设计令牌 —— 全部数值取自 Ardot 画布「命理报告-付费站点-设计稿」
   fileId 734664919888667
   ============================================================ */
:root{
  /* 底色 */
  --paper:#FAFAF7; --sand:#F5F2E8; --sand2:#F7F4EC; --white:#FFFFFF;
  --ink:#1A1A17; --ink2:#232320; --ink3:#2A2118;
  /* 文字 */
  --title:#1A1A1A; --body:#4A463C; --body2:#3A362E;
  --muted:#6B655A; --faint:#8A8272; --faint2:#B0A894;
  /* 深底文字 */
  --dk-muted:#8F887A; --dk-body:#E8E2D6; --dk-bright:#F7F3EA; --dk-desc:#B8B0A0;
  /* 朱砂 */
  --zj:#B53B2B; --zj-lt:#C9553F;
  /* 描边 */
  --line:#EAE7DB; --line2:#E0DACB; --line3:#E7E1D3; --line-dk:#3A3A35;
  /* 提示态 */
  --warn-bg:#FBF3EE; --warn-line:#EDD9CE; --warn-text:#7A5A4E; --warn-title:#8A3A2A;
  --ok-bg:#E7EFE4; --ok-fg:#3F6B3A;
  --read-bg:#EFEADD; --read-fg:#8A6A3B;
  /* 字体 */
  --serif:'Noto Serif SC','Source Han Serif SC','Noto Serif CJK SC','Songti SC','STSong',serif;
  --sans:'Noto Sans SC','Source Han Sans SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
.d-only{display:inline}
.m-only{display:none}
/* 支付二维码：固定 180 见方，格数交给 SVG 自己的 viewBox 缩放 */
.qr .qr-svg{display:block}

/* ---------- 页面切换 ---------- */
.page{display:none;min-height:100vh;flex-direction:column}
.page.active{display:flex;animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 通用组件 ---------- */
.seal{background:var(--zj);border-radius:2px;flex:none}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  flex:none;
}
.brand{display:flex;align-items:center}
.brand-name{font-family:var(--serif);font-weight:600;color:var(--title)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--zj);color:#fff;border-radius:4px;
  font-family:var(--sans);font-weight:500;
  transition:background .15s ease;
}
.btn:hover{background:#9E3223}
.btn:active{background:#8C2C1F}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:3px;font-weight:500;white-space:nowrap}
.pill--free{background:var(--ok-bg);color:var(--ok-fg)}
.pill--read{background:var(--read-bg);color:var(--read-fg)}

.legal{color:var(--faint)}

/* ============================================================
   ① 取件页
   ============================================================ */
#claim .topbar{padding:0 64px;height:76px}
#claim .brand{gap:10px}
#claim .brand .seal{width:10px;height:10px}
#claim .brand-name{font-size:18px}
#claim .topbar-sub{font-size:13px;color:var(--faint)}

.claim-main{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:0 64px;
}
.claim-card{width:560px;display:flex;flex-direction:column;gap:20px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:3px;color:var(--zj)}
.claim-h1{font-family:var(--serif);font-weight:700;font-size:38px;line-height:52px;color:var(--title)}
.claim-desc{font-size:15px;line-height:26px;color:var(--body)}
.claim-form{display:flex;flex-direction:column;gap:14px;margin-top:0}
.code-input{
  width:100%;height:64px;padding:0 24px;text-align:center;
  background:#fff;border:1px solid var(--line2);border-radius:4px;
  font-size:20px;font-weight:500;letter-spacing:4px;
  color:var(--body2);outline:none;
}
.code-input::placeholder{color:#C4BCA8}
.code-input:focus{border-color:var(--zj);box-shadow:0 0 0 3px rgba(181,59,43,.10)}
.code-input.is-error{border-color:var(--zj);background:#FDF6F4}
#claim .btn-block{height:60px;font-size:17px}
.claim-hint{font-size:13px;color:var(--faint)}
.claim-err{font-size:13px;color:var(--zj);display:none}
.claim-err.show{display:block}

.site-footer{
  flex:none;background:var(--sand);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:0 64px;height:110px;text-align:center;
}
.site-footer .legal{font-size:12px;line-height:20px;max-width:900px}
.site-footer .icp{font-size:12px;color:var(--faint2)}

/* ============================================================
   ② 报告速览页
   ============================================================ */
#preview .topbar{padding:0 64px;height:72px}
#preview .brand{gap:10px}
#preview .brand .seal{width:10px;height:10px}
#preview .brand-name{font-size:16px}
.tb-right{display:flex;align-items:center;gap:14px}
.tb-badge{
  background:#EFEADD;color:var(--read-fg);border-radius:3px;
  padding:5px 12px;font-size:12px;font-weight:500;
}
.btn--sm{padding:9px 18px;font-size:13px;border-radius:4px}

/* —— 封面 —— */
.cover{
  background:var(--ink);padding:56px 120px 64px;
  display:flex;flex-direction:column;gap:34px;
}
.cover-top{display:flex;justify-content:space-between;align-items:flex-start}
.cover-top span{font-size:13px;color:var(--dk-muted)}
.cover-titleblock{display:flex;flex-direction:column;gap:14px}
.cover-title{font-family:var(--serif);font-weight:700;font-size:60px;line-height:1.15;color:var(--dk-bright)}
.cover-sub{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--dk-desc)}
.cover-name{display:flex;align-items:center;gap:20px}
.cover-name .k{font-size:13px;color:var(--dk-muted)}
.cover-name .v{font-family:var(--serif);font-weight:600;font-size:34px;color:var(--dk-bright)}
.cover-name .seal{
  width:40px;height:40px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:20px;color:var(--dk-bright);
}
.cover-basis{display:flex;flex-direction:column;gap:18px}
.basis-head{display:flex;justify-content:space-between;align-items:center}
.basis-head .t{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--zj-lt)}
.basis-head .n{font-size:13px;color:var(--dk-muted)}
.basis-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.basis-cell{display:flex;flex-direction:column;gap:8px}
.basis-cell .k{font-size:12px;color:var(--dk-muted)}
.basis-cell .v{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--dk-body)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pillar{
  display:flex;flex-direction:column;gap:10px;
  padding:20px 22px;border-radius:4px;background:var(--ink2);
}
.pillar.is-day{background:var(--ink3)}
.pillar .k{font-size:12px;color:var(--dk-muted)}
.pillar .v{font-family:var(--serif);font-weight:700;font-size:32px;color:var(--dk-bright)}
.pillar .s{font-size:12px;color:var(--dk-muted)}
.pillar.is-day .k,.pillar.is-day .s{color:var(--zj-lt)}

/* —— 正文 —— */
.content{padding:56px 120px;display:flex;flex-direction:column;gap:56px}
.sec{display:flex;flex-direction:column;gap:20px}
.sec-head{display:flex;justify-content:space-between;align-items:center}
.sec-head-l{display:flex;align-items:center;gap:12px}
.sec-no{font-size:14px;font-weight:500;color:var(--zj)}
.sec-title{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--title)}
.sec .pill{padding:5px 12px;font-size:12px}

.card{
  background:#fff;border-radius:6px;padding:36px;
  display:flex;flex-direction:column;gap:24px;
}
.card p{font-size:17px;line-height:1.85;color:var(--body)}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.metric{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:4px;padding:20px 22px}
.metric .k{font-size:13px;color:var(--muted)}
.metric .v{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--title)}
.metric .n{font-size:12px;color:var(--faint)}
.card .note{font-size:13px;color:var(--faint)}

.ask-head{
  display:flex;align-items:center;gap:14px;
  background:var(--sand);border-radius:4px;padding:16px 20px;
}
.ask-head .k{font-size:13px;font-weight:500;color:var(--read-fg);flex:none}
.ask-head .v{font-size:16px;color:var(--body2)}
.ask-body{display:flex;flex-direction:column;gap:22px}
.ask-body p{font-size:16px;line-height:1.85;color:var(--body)}

.hook{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--ink);border-radius:6px;padding:28px 32px;
}
.hook-l{display:flex;flex-direction:column;gap:12px;flex:1}
.hook-tag{font-size:12px;font-weight:500;color:var(--zj-lt)}
.hook-title{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--dk-bright)}
.hook-desc{font-size:14px;color:var(--dk-desc)}
.hook .btn{padding:14px 28px;font-size:15px;flex:none}

.rows{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:16px}
.row .k{width:120px;flex:none;font-size:14px;color:var(--muted)}
.row .v{font-size:16px;color:var(--body2)}

.locked{
  display:flex;align-items:center;gap:16px;
  background:var(--sand2);border-radius:4px;padding:20px 24px;
}
.locked-icon{width:20px;height:20px;flex:none}
.locked-txt{display:flex;flex-direction:column;gap:6px;flex:1}
.locked-txt .t{font-size:15px;font-weight:500;color:var(--muted)}
.locked-txt .d{font-size:13px;color:var(--faint)}
.locked .tag{font-size:12px;font-weight:500;color:var(--zj);flex:none}

.dayun{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dayun-cell{display:flex;flex-direction:column;gap:8px;padding:16px 14px;border-radius:4px;background:var(--paper)}
.dayun-cell .v{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--title)}
.dayun-cell .a{font-size:12px;color:var(--faint)}
.dayun-cell.is-now{background:var(--sand)}
.dayun-cell.is-now .a{font-weight:500;color:var(--zj)}

.ziwei{display:flex;flex-wrap:wrap;gap:10px}
.ziwei-cell{
  width:180px;height:73px;display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:4px;background:var(--paper);
}
.ziwei-cell.is-ming{background:var(--sand)}
.ziwei-cell .k{font-size:13px;font-weight:500;color:var(--faint)}
.ziwei-cell.is-ming .k{color:var(--zj)}
.ziwei-cell .v{font-size:14px;color:var(--body2)}

.sample{
  display:flex;flex-direction:column;gap:18px;
  background:var(--paper);border-radius:4px;padding:28px;
}
.sample-head{display:flex;align-items:center;gap:12px}
.sample-head .t{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--title);flex:1}
.sample .pill{padding:4px 10px;font-size:11px}
.sample-block{display:flex;flex-direction:column;gap:8px}
.sample-block .k{font-size:13px;font-weight:500;color:var(--zj)}
.sample-block .v{font-size:15px;line-height:1.75;color:var(--body)}

.close-card{
  background:var(--sand);border-radius:6px;padding:28px 36px;
  display:flex;flex-direction:column;gap:16px;
}
.close-card>p{font-size:15px;line-height:1.8;color:var(--body)}
.close-locked{display:flex;align-items:center;gap:16px;background:#fff;border-radius:4px;padding:20px 24px}
.close-locked .locked-txt .t{color:var(--muted)}

.pg-footer{
  background:var(--ink);padding:36px 120px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.pg-footer-l{display:flex;flex-direction:column;gap:14px}
.pg-brand{display:flex;align-items:center;gap:10px}
.pg-brand .seal{width:10px;height:10px}
.pg-brand .n{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--dk-bright)}
.pg-company{font-size:12px;color:var(--dk-muted)}
.pg-code{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  background:var(--ink2);border-radius:4px;padding:8px 14px;
}
.pg-code .k{font-size:12px;color:var(--dk-muted)}
.pg-code .v{font-size:14px;font-weight:500;color:var(--dk-body)}
/* 备案号：原型只在窄屏显示，这里两端都显示——备案号在桌面端藏起来是合规缺口。 */
.pg-icp{font-size:12px;color:var(--dk-muted)}

/* ============================================================
   ③ 解锁 · 定价页
   ============================================================ */
#pricing .topbar{padding:0 64px;height:72px}
#pricing .brand{gap:10px}
#pricing .brand .seal{width:10px;height:10px}
#pricing .brand-name{font-size:16px}
#pricing .topbar-sub{font-size:13px;color:var(--faint)}

.p-hero{padding:56px 120px 32px;display:flex;flex-direction:column;gap:18px}
.p-hero h1{font-family:var(--serif);font-weight:700;font-size:46px;color:var(--title)}
.p-hero p{font-size:17px;line-height:30px;color:var(--body);max-width:820px}
.p-tags{display:flex;gap:12px;flex-wrap:wrap}
.p-tags span{background:var(--sand);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--body)}

.p-cards{padding:24px 120px 0;display:flex;justify-content:center;gap:24px}
.p-card{
  width:640px;background:var(--ink);border-radius:8px;padding:32px;
  display:flex;flex-direction:column;gap:18px;
}
.p-card-title{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--dk-bright)}
.p-price{display:flex;align-items:flex-end;gap:12px}
.p-price .cur{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--dk-bright)}
.p-price .num{font-family:var(--serif);font-weight:700;font-size:52px;line-height:1;color:var(--dk-bright)}
.p-price .was{font-size:14px;color:var(--faint2)}
.p-first{font-size:13px;font-weight:500;color:var(--zj-lt)}
.p-line{height:1px;background:var(--line-dk)}
.p-list{display:flex;flex-direction:column;gap:12px}
.p-list span{font-size:15px;line-height:24px;color:var(--dk-body)}
.p-card .btn{height:56px;font-size:17px}

.p-notes{padding:40px 120px 48px;display:flex;flex-direction:column;gap:16px}
.refund{
  display:flex;align-items:center;gap:14px;
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:6px;padding:20px 24px;
}
.refund svg{flex:none}
.refund-txt{display:flex;flex-direction:column;gap:4px}
.refund-txt .t{font-size:14px;font-weight:500;color:var(--warn-title)}
.refund-txt .d{font-size:13px;line-height:22px;color:var(--warn-text)}
.p-note-row{display:flex;gap:20px}
.p-note{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 24px;
  display:flex;flex-direction:column;gap:8px;
}
.p-note .t{font-size:14px;font-weight:500;color:var(--title)}
.p-note .d{font-size:13px;line-height:22px;color:var(--body)}
.p-compliance{font-size:12px;line-height:22px;color:var(--muted)}

/* ============================================================
   ④ 支付页
   ============================================================ */
#pay .topbar{padding:0 64px;height:72px}
#pay .brand{gap:10px}
#pay .brand .seal{width:10px;height:10px}
#pay .brand-name{font-size:16px}
.steps{display:flex;align-items:center;gap:10px;font-size:13px}
.steps .done,.steps .todo{color:var(--faint2)}
.steps .now{font-weight:500;color:var(--zj)}
.steps i{display:block;width:20px;height:1px;background:#DCD7C4}

.pay-body{
  flex:1;padding:40px 120px 56px;
  display:flex;align-items:center;gap:48px;
}
.pay-card{
  width:520px;flex:none;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:48px;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.pay-card h2{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--title);align-self:flex-start}
.qr{
  width:220px;height:220px;background:#fff;border:1px solid var(--line2);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.qr-inner{
  width:180px;height:180px;background:var(--sand);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#A79C86;
}
.pay-hint{font-size:14px;line-height:24px;color:var(--body);text-align:center}
.pay-amount{
  display:flex;align-items:flex-end;gap:10px;
  background:var(--sand);border-radius:4px;padding:16px 32px;
}
.pay-amount .k{font-size:14px;color:var(--body)}
.pay-amount .cur{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--zj)}
.pay-amount .num{font-family:var(--serif);font-weight:700;font-size:40px;line-height:1;color:var(--zj)}

.order{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:40px;
  display:flex;flex-direction:column;gap:20px;
}
.order h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--title)}
.o-line{height:1px;background:var(--line)}
.o-row{display:flex;align-items:center;justify-content:space-between}
.o-row .k{font-size:14px;color:var(--muted)}
.o-row .v{font-size:14px;font-weight:500;color:var(--body2)}
.o-row .v.code{letter-spacing:2px}
.o-total .k{font-size:15px;font-weight:500;color:var(--title)}
.o-total .v{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--zj)}
.o-note{
  background:var(--sand);border-radius:4px;padding:16px 20px;
  display:flex;flex-direction:column;gap:8px;
}
.o-note p{font-size:13px;line-height:22px;color:var(--body)}
.o-note p.warn{color:var(--warn-title)}
.o-help{font-size:13px;color:var(--faint)}

/* ============================================================
   ⑤ 交付页
   ============================================================ */
#deliver .topbar{padding:0 64px;height:72px}
#deliver .brand{gap:10px}
#deliver .brand .seal{width:10px;height:10px}
#deliver .brand-name{font-size:16px}
#deliver .topbar-sub{font-size:13px;color:var(--faint)}

.d-hero{padding:56px 120px 8px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.d-seal{
  width:64px;height:64px;background:var(--zj);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.d-hero h1{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--title)}
.d-hero p{font-size:16px;color:var(--body)}

/* flex:1 补的是原型的疏漏：交付页内容比一屏短时，页脚会浮在半空、下面留一片空白。 */
.d-main{flex:1;padding:40px 120px 24px;display:flex;flex-direction:column;gap:24px}
.view-card{
  background:var(--ink);border-radius:8px;padding:40px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.view-card .t{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--dk-bright)}
.view-card .d{font-size:14px;line-height:24px;color:#B8B0A0;margin-top:10px}
.view-card .l{flex:1}
.view-card .btn{padding:16px 32px;font-size:16px;flex:none}

.keep{background:var(--sand);border-radius:8px;padding:28px 40px;display:flex;flex-direction:column;gap:20px}
.keep h2{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--title)}
.keep>p{font-size:14px;line-height:24px;color:var(--body)}
.keep-row{display:flex;gap:20px}
.keep-item{
  flex:1;display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line3);border-radius:6px;padding:24px;
}
.keep-item .t{font-size:15px;font-weight:500;color:var(--title)}
.keep-item .d{font-size:12px;color:var(--muted);margin-top:4px}
.keep-item .sv{flex:none}
.d-legal{padding:0 120px 24px}
.d-legal p{font-size:12px;line-height:22px;color:var(--muted)}

/* ============================================================
   移动端（< 768px）—— 对应画布第二行 390 宽设计
   ============================================================ */
@media (max-width:767px){
  .d-only{display:none}
  .m-only{display:inline}
  body{font-size:14px}

  /* ① 取件页 */
  #claim .topbar{padding:0 24px;height:60px}
  #claim .brand{gap:8px}
  #claim .brand .seal{width:8px;height:8px}
  #claim .brand-name{font-size:15px}
  #claim .topbar-sub{display:none}
  .claim-main{padding:0 24px}
  .claim-card{width:100%;gap:16px}
  .eyebrow{font-size:12px}
  .claim-h1{font-size:28px;line-height:40px}
  .claim-desc{font-size:13px;line-height:22px}
  .claim-form{gap:12px}
  .code-input{height:56px;padding:0 18px;font-size:16px;letter-spacing:2px}
  #claim .btn-block{height:52px;font-size:16px}
  .claim-hint{font-size:12px}
  .claim-err{font-size:12px}
  .site-footer{padding:24px 20px;height:auto;gap:6px}
  .site-footer .legal{font-size:10px;line-height:16px}
  .site-footer .icp{font-size:10px}

  /* ② 速览页 */
  #preview .topbar{padding:0 20px;height:56px}
  #preview .brand{gap:8px}
  #preview .brand .seal{width:8px;height:8px}
  #preview .brand-name{font-size:14px}
  .tb-right{gap:8px}
  .tb-badge{background:none;padding:0;font-size:11px}
  .btn--sm{padding:7px 14px;font-size:12px}
  .cover{padding:32px 20px;gap:22px}
  .cover-top span{font-size:11px}
  .cover-titleblock{gap:8px}
  .cover-title{font-size:34px}
  .cover-sub{font-size:14px}
  .cover-name{gap:12px}
  .cover-name .k{font-size:12px}
  .cover-name .v{font-size:24px}
  .cover-name .seal{width:30px;height:30px;font-size:15px}
  .cover-basis{gap:14px}
  .basis-head .t{font-size:14px}
  .basis-head .n{font-size:11px}
  .basis-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .basis-cell{gap:5px}
  .basis-cell .k{font-size:11px}
  .basis-cell .v{font-size:17px}
  .pillars{grid-template-columns:repeat(2,1fr);gap:10px}
  .pillar{padding:14px 16px;gap:6px}
  .pillar .k{font-size:11px}
  .pillar .v{font-size:24px}
  .pillar .s{font-size:11px}
  .content{padding:28px 20px;gap:36px}
  .sec{gap:14px}
  .sec-head-l{gap:8px}
  .sec-no{font-size:12px}
  .sec-title{font-size:22px}
  .sec .pill{padding:4px 10px;font-size:11px}
  .btn--sm,.sec .pill{border-radius:3px}
  .card{padding:20px;gap:16px}
  .card p{font-size:14px;line-height:1.8}
  .metrics{grid-template-columns:1fr;gap:10px}
  .metric{background:none;padding:0;flex-direction:row;align-items:center;justify-content:space-between;gap:0}
  .metric .k{font-size:12px}
  .metric .v{font-size:17px}
  .metric .n{display:none}
  .card .note{display:none}
  .ask-head{gap:10px;padding:12px 14px}
  .ask-head .k{font-size:12px}
  .ask-head .v{font-size:14px}
  .ask-body{gap:14px}
  .ask-body p{font-size:14px}
  .hook{flex-direction:column;align-items:stretch;gap:14px;padding:20px}
  .hook-l{gap:8px}
  .hook-tag{font-size:11px}
  .hook-title{font-size:16px}
  .hook-desc{font-size:12px}
  .hook .btn{width:100%;height:46px;padding:0}
  .row{gap:0;justify-content:space-between}
  .row .k{width:auto;font-size:12px}
  .row .v{font-size:13px}
  .locked{gap:12px;padding:16px 18px}
  .locked-icon{width:18px;height:18px}
  .locked-txt{gap:4px}
  .locked-txt .t{font-size:14px}
  .locked-txt .d{font-size:11px}
  .locked .tag{font-size:11px}
  .dayun{grid-template-columns:repeat(4,1fr);gap:8px}
  .dayun-cell{width:100%;padding:12px 10px;gap:4px}
  .dayun-cell .v{font-size:16px}
  .dayun-cell .a{font-size:10px}
  .dayun-cell.only-d{display:none}
  .ziwei{gap:8px}
  .ziwei-cell{width:calc(50% - 4px);height:auto;padding:12px 14px;gap:4px}
  .ziwei-cell .k{font-size:12px}
  .ziwei-cell .v{font-size:13px}
  .ziwei-cell.only-d{display:none}
  .ziwei-note{display:none}
  .sample{gap:12px;padding:18px}
  .sample-head{gap:10px}
  .sample-head .t{font-size:15px}
  .sample .pill{padding:3px 8px;font-size:10px}
  .sample-block{gap:6px}
  .sample-block .k{font-size:12px}
  .sample-block .v{font-size:13px;line-height:1.7}
  .close-card{padding:20px;gap:14px}
  .close-card>p{font-size:13px}
  .close-locked{gap:12px;padding:16px 18px}
  .pg-footer{padding:24px 20px;flex-direction:column;align-items:stretch;gap:12px}
  .pg-footer-l{gap:12px}
  .pg-brand{gap:8px}
  .pg-brand .seal{width:8px;height:8px}
  .pg-brand .n{font-size:14px}
  .pg-company{display:none}
  .pg-code{align-self:flex-start;gap:8px;padding:8px 12px}
  .pg-code .k{font-size:11px}
  .pg-code .v{font-size:13px}
  .pg-footer .btn{width:100%;height:46px;font-size:15px}
  .pg-icp{font-size:11px}

  /* ③ 定价页 */
  #pricing .topbar{padding:0 20px;height:56px}
  #pricing .brand{gap:8px}
  #pricing .brand .seal{width:8px;height:8px}
  #pricing .brand-name{font-size:14px}
  #pricing .topbar-sub{font-size:12px}
  .p-hero{padding:32px 20px 20px;gap:12px}
  .p-hero h1{font-size:30px;line-height:42px}
  .p-hero p{font-size:14px;line-height:24px}
  .p-tags{gap:8px}
  .p-tags span{padding:6px 12px;font-size:12px;border-radius:20px}
  .p-cards{padding:8px 20px 0;display:block}
  .p-card{width:100%;padding:24px;gap:14px}
  .p-card-title{font-size:17px}
  .p-price{gap:10px}
  .p-price .cur{font-size:20px}
  .p-price .num{font-size:42px}
  .p-price .was{font-size:12px}
  .p-first{font-size:12px}
  .p-list{gap:10px}
  .p-list span{font-size:14px;line-height:22px}
  .p-card .btn{height:52px;font-size:16px}
  .p-notes{padding:24px 20px 32px;gap:12px}
  .refund{gap:10px;padding:16px 18px}
  .refund svg{width:18px;height:18px}
  .refund-txt .t{font-size:13px}
  .refund-txt .d{font-size:12px;line-height:19px}
  .p-note-row{flex-direction:column;gap:12px}
  .p-note{padding:16px 18px;gap:6px;border-radius:6px}
  .p-note .t{font-size:13px}
  .p-note .d{font-size:12px;line-height:19px}
  .p-compliance{font-size:11px;line-height:19px}

  /* ④ 支付页 */
  #pay .topbar{padding:0 20px;height:56px}
  #pay .brand{gap:8px}
  #pay .brand .seal{width:8px;height:8px}
  #pay .brand-name{font-size:14px}
  .steps{font-size:12px}
  .steps i{width:12px}
  .pay-body{flex-direction:column;align-items:stretch;gap:16px;padding:16px 20px 24px}
  .pay-card{width:100%;padding:28px;gap:18px}
  .pay-card h2{font-size:20px}
  .qr{width:180px;height:180px}
  .qr-inner{width:148px;height:148px;font-size:12px}
  .pay-hint{font-size:12px;line-height:20px}
  .pay-amount{gap:8px;padding:12px 24px}
  .pay-amount .k{font-size:13px}
  .pay-amount .cur{font-size:17px}
  .pay-amount .num{font-size:32px}
  .order{padding:24px;gap:14px}
  .order h3{font-size:16px}
  .o-row .k{font-size:13px}
  .o-row .v{font-size:13px}
  .o-row .v.code{letter-spacing:1px}
  .o-total .k{font-size:14px}
  .o-total .v{font-size:20px}
  .o-note{padding:16px 20px;gap:8px}
  .o-note p{font-size:12px;line-height:19px}
  .o-help{display:none}
  #pay .pg-footer,.pg-footer-inline{background:var(--ink);padding:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  #pay .pg-footer{flex-direction:row;align-items:center}

  /* ⑤ 交付页 */
  #deliver .topbar{padding:0 20px;height:56px}
  #deliver .brand{gap:8px}
  #deliver .brand .seal{width:8px;height:8px}
  #deliver .brand-name{font-size:14px}
  #deliver .topbar-sub{font-size:12px}
  .d-hero{padding:32px 20px 8px;gap:14px}
  .d-seal{width:52px;height:52px}
  .d-seal svg{width:26px;height:26px}
  .d-hero h1{font-size:28px}
  .d-hero p{font-size:13px}
  .d-main{padding:20px 20px 12px;gap:16px}
  .view-card{flex-direction:column;align-items:stretch;gap:14px;padding:24px}
  .view-card .t{font-size:19px}
  .view-card .d{font-size:13px;line-height:21px;margin-top:8px}
  .view-card .btn{width:100%;height:48px;padding:0;font-size:15px}
  .keep{padding:24px;gap:12px}
  .keep h2{font-size:17px}
  .keep>p{font-size:12px;line-height:19px}
  .keep-row{flex-direction:column;gap:12px}
  .keep-item{gap:14px;padding:18px}
  .keep-item .t{font-size:14px}
  .keep-item .d{font-size:11px;margin-top:3px}
  .d-legal{padding:0 20px 20px}
  .d-legal p{font-size:10px;line-height:17px}
}


/* ============================================================
   链接式按钮：原型把 <button> 换成 <a> 后需要这两条
   ============================================================ */
a.btn{text-decoration:none;cursor:pointer}

/* ============================================================
   状态开关：服务端按订单状态决定显隐（data-show="0" 的块不渲染）。
   必须放在最后并加 !important——本文件里 .btn 等规则与它是同等权重，
   写在前面会被后面的 display 覆盖，出现「两个按钮同时显示」。
   ============================================================ */
[data-show="0"]{display:none !important}