/* ============================================================
   卡密商城 · 微信支付设计风格（浅灰背景 / 墨黑文字 / 微信绿）
   —— 仅调整配色与质感，未删除或重命名任何选择器与变量；
      :root 变量名、body、.card、a:active 等全部保留，
      HTML 结构与类名无需改动，可直接整体替换原样式。
   ============================================================ */
:root{
    --paper:#f7f7f7;        /* 页面背景：微信浅灰 */
    --paper-2:#ffffff;      /* 卡片：纯白 */
    --ink:#191919;          /* 主文字：近黑 */
    --muted:#888888;        /* 次要文字：微信灰 */
    --line:#ececec;         /* 分隔线 / 描边：极浅灰 */
    --brand:#07c160;        /* 主题色：微信绿 */
    --brand-d:#06ad56;      /* 微信绿（按下 / 深） */
    --wx:#07c160;           /* 微信支付绿 */
    --ali:#1677ff;          /* 支付宝蓝 */
    --warn:#fa5151;         /* 微信警示红 */
    --radius:12px;
    --shadow:0 1px 0 rgba(0,0,0,.02), 0 2px 12px rgba(0,0,0,.04);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
    font-family:var(--font);
    color:var(--ink);
    background:
            radial-gradient(120% 60% at 50% -10%, rgba(7,193,96,.06), transparent 60%),
            var(--paper);
    min-height:100vh;
    display:flex;flex-direction:column;
    font-size:16px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
.num,.tier-price,.total-val,.pay-amount{font-variant-numeric:tabular-nums}

a{color:var(--brand);text-decoration:none}
a:active{opacity:.7}

/* 顶栏 */
.topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;max-width:560px;margin:0 auto;width:100%;
}
.brand{font-weight:700;font-size:17px;color:var(--ink);letter-spacing:.2px}
.nav-q{font-size:14px;color:var(--muted)}

/* 主体容器 */
.wrap{flex:1;width:100%;max-width:560px;margin:0 auto;padding:6px 18px 28px}

/* 卡片 */
.card{
    background:var(--paper-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;margin-bottom:16px;
}
.sec-title{font-size:18px;margin:0 0 14px}
.row-between{display:flex;align-items:center;justify-content:space-between}

/* 库存徽标 */
.stock{font-size:12px;padding:4px 10px;border-radius:999px;font-weight:600}
.stock.ok{background:rgba(7,193,96,.12);color:var(--brand-d)}
.stock.low{background:rgba(250,81,81,.12);color:var(--warn)}
.stock.out{background:#f2f2f2;color:#b2b2b2}

/* 会员卡视觉 */
.hero{margin:6px 0 18px}
.memcard{
    position:relative;overflow:hidden;
    border-radius:18px;padding:22px;color:#eafff3;
    background:linear-gradient(135deg,#2dd178 0%, #07c160 58%, #059a4e 100%);
    box-shadow:0 10px 26px rgba(7,193,96,.28);
    aspect-ratio:1.6/1;max-height:210px;
    display:flex;flex-direction:column;justify-content:space-between;
}
.memcard-shine{
    position:absolute;inset:0;
    background:radial-gradient(80% 60% at 80% 0%, rgba(255,255,255,.25), transparent 60%);
    pointer-events:none;
}
.memcard-top{display:flex;align-items:center;justify-content:space-between}
.memcard-chip{width:34px;height:26px;border-radius:6px;
    background:linear-gradient(135deg,#ffe9a8,#d8a93f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.memcard-tag{font-size:11px;letter-spacing:3px;opacity:.85}
.memcard-title{font-size:22px;font-weight:700;margin-top:6px}
.memcard-sub{font-size:13px;opacity:.85}

/* 字段 */
.field{margin-top:18px}
.lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}

/* 数量步进器 */
.stepper{display:flex;align-items:center;gap:10px;max-width:200px}
.step{
    width:46px;height:46px;border:1px solid var(--line);background:var(--paper);
    border-radius:12px;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;
}
.step:active{background:#ededed}
.qty-input{
    flex:1;height:46px;text-align:center;font-size:18px;font-weight:600;
    border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
    -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* 档位 */
.tiers{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tier{
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
    transition:border-color .15s, background .15s, transform .05s;
}
.tier.active{border-color:var(--brand);background:rgba(7,193,96,.07);box-shadow:0 0 0 1px var(--brand) inset}
.tier-range{font-size:14px;color:var(--muted)}
.tier.active .tier-range{color:var(--brand-d);font-weight:600}
.tier-price{font-size:17px;font-weight:700}
.tier-price small{font-size:11px;font-weight:500;color:var(--muted);margin-left:2px}

/* 支付方式 */
.pays{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay{
    position:relative;display:flex;align-items:center;gap:9px;
    padding:14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
}
.pay input{position:absolute;opacity:0;pointer-events:none}
.pay-ic{width:30px;height:30px;border-radius:8px;color:#fff;font-size:12px;font-weight:700;
    display:flex;align-items:center;justify-content:center}
.pay-ic.wx{background:var(--wx)}
.pay-ic.ali{background:var(--ali)}
.pay-name{font-size:15px;font-weight:600}
.pay-check{position:absolute;right:12px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line)}
.pay-wx:has(input:checked){border-color:var(--wx);background:rgba(7,193,96,.06)}
.pay-wx:has(input:checked) .pay-check{border-color:var(--wx);background:var(--wx) radial-gradient(circle,#fff 32%,transparent 36%)}
.pay-ali:has(input:checked){border-color:var(--ali);background:rgba(22,119,255,.06)}
.pay-ali:has(input:checked) .pay-check{border-color:var(--ali);background:var(--ali) radial-gradient(circle,#fff 32%,transparent 36%)}

/* 合计 + 购买 */
.buybar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.total-lbl{font-size:13px;color:var(--muted);margin-right:6px}
.total-val{font-size:26px;font-weight:800;color:var(--brand-d)}
.btn-pay{
    border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    background:var(--brand);color:#fff;font-size:16px;font-weight:700;
    padding:14px 26px;border-radius:12px;box-shadow:0 6px 16px rgba(7,193,96,.24);
    text-align:center;transition:transform .05s, background .15s;
}
.btn-pay:active{transform:translateY(1px);background:var(--brand-d)}
.btn-pay[disabled]{background:#c8c8c8;box-shadow:none;cursor:not-allowed}

.btn{display:inline-block;background:var(--brand);color:#fff;padding:11px 20px;border-radius:12px;font-weight:600;border:0;cursor:pointer}
.btn-sm{background:var(--paper);border:1px solid var(--line);color:var(--ink);padding:7px 12px;border-radius:9px;font-size:13px;cursor:pointer}
.btn-wx{background:var(--wx);color:#fff;border:0;padding:13px 24px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;width:100%}

.tip-line{font-size:13px;color:var(--muted);text-align:center;margin:4px 4px 0}

/* ---------- 收银台 ---------- */
.pay-stage{text-align:center}
.pay-head{padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:18px}
.pay-amount{font-size:34px;font-weight:800;color:var(--ink)}
.pay-meta{font-size:13px;color:var(--muted);margin-top:4px}
.pay-count{font-size:13px;color:var(--warn);margin-top:8px}
.pay-block{display:flex;flex-direction:column;align-items:center;gap:12px}
.pay-block .btn-pay{width:100%;max-width:300px}
.pay-hint{font-size:16px;font-weight:600;margin:2px 0}
.pay-sub{font-size:13px;color:var(--muted);margin:0}
.qr-wrap{padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px}
.qr-img{width:208px;height:208px;display:block;object-fit:contain}
.or-split{position:relative;width:100%;max-width:300px;text-align:center;margin:4px 0}
.or-split::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.or-split span{position:relative;background:var(--paper-2);padding:0 12px;font-size:12px;color:var(--muted)}
.guide .guide-arrow{font-size:40px;color:var(--brand);align-self:flex-end;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pay-foot{margin-top:18px;font-size:14px}
.pay-foot a{color:var(--muted)}

/* ---------- 结果页 ---------- */
.result{text-align:center}
.result-ic{width:64px;height:64px;border-radius:50%;margin:4px auto 12px;
    display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#fff}
.result.ok .result-ic{background:var(--brand)}
.result.warn .result-ic{background:var(--warn)}
.result h1{font-size:20px;margin:0 0 6px}
.result-sub{font-size:14px;color:var(--muted);margin:0 0 16px}
.keys{margin-top:8px;text-align:left}
.keys-box{
    width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;
    padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:14px;color:var(--ink);resize:vertical;line-height:1.7;
}
.copy-btn{margin-top:10px}
.txn{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);text-align:left}
.txn-lbl{font-size:12px;color:var(--muted);margin-bottom:6px}
.txn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.txn-row code{flex:1;min-width:160px;background:var(--paper);border:1px solid var(--line);
    border-radius:9px;padding:9px 11px;font-size:13px;word-break:break-all}
.txn-link{display:inline-block;margin-top:10px;font-size:13px}

.spinner{width:42px;height:42px;border-radius:50%;margin:6px auto 14px;
    border:3px solid var(--line);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 查询页 ---------- */
.q-form{display:flex;gap:10px;margin:14px 0}
.q-input{flex:1;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;
    padding:0 14px;font-size:15px;color:var(--ink)}
.q-form .btn-pay{padding:0 22px}
.q-error{font-size:14px;color:var(--warn);background:rgba(250,81,81,.08);
    border:1px solid rgba(250,81,81,.25);border-radius:12px;padding:12px 14px}

/* ---------- 通用提示页 ---------- */
.notice h1{font-size:19px;margin:0 0 12px}
.notice p{color:var(--muted);margin:8px 0}
.notice .btn{margin-top:6px}

/* 页脚 */
.foot{max-width:560px;margin:0 auto;width:100%;padding:18px;text-align:center}
.foot p{font-size:12px;color:var(--muted);margin:0}

/* 窄屏微调 */
@media (max-width:360px){
    .pays{grid-template-columns:1fr}
    .qr-img{width:180px;height:180px}
    .buybar{flex-direction:column;align-items:stretch}
    .btn-pay{width:100%}
}