:root{--gap-8: 8px;--gap-16: 16px;--gap-24: 24px;--radius-sm: 8px;--radius-md: 12px;--radius-full: 999px;--c-bg: #f5f6f8;--c-card: #ffffff;--c-text: #1f2329;--c-sub: #8a909c;--c-wechat: #07c160;--c-alipay: #1677ff;--c-qq: #12b7f5;--c-primary: #1f2329}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--c-bg);color:var(--c-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100vh}.page{max-width:480px;margin:0 auto;padding:var(--gap-16);display:flex;flex-direction:column;gap:var(--gap-16);min-height:100vh}.hero{background:var(--c-card);border-radius:var(--radius-md);padding:var(--gap-24) var(--gap-16);text-align:center;display:flex;flex-direction:column;gap:var(--gap-8);align-items:center}.cover{width:100%;max-width:240px;border-radius:var(--radius-sm);display:block}.title{font-size:20px;font-weight:600}.desc{color:var(--c-sub);font-size:14px}.price-card{background:var(--c-card);border-radius:var(--radius-md);padding:var(--gap-24) var(--gap-16);text-align:center;display:flex;flex-direction:column;gap:var(--gap-8)}.price{color:#ff4d4f;display:flex;justify-content:center;align-items:baseline;gap:2px}.yuan{font-size:16px}.amount{font-size:36px;font-weight:700}.notice{color:var(--c-sub);font-size:13px}.pay-actions{display:flex;flex-direction:column;gap:var(--gap-8)}.btn{min-height:48px;border:none;border-radius:var(--radius-sm);font-size:16px;color:#fff;font-weight:500;cursor:pointer}.btn[disabled]{opacity:.6}.btn-wechat{background:var(--c-wechat)}.btn-alipay{background:var(--c-alipay)}.btn-qq{background:var(--c-qq)}.foot{text-align:center;color:var(--c-sub);font-size:12px;padding:var(--gap-8) var(--gap-16);margin-top:auto}.tip{text-align:center;padding:var(--gap-24) var(--gap-16);color:var(--c-sub)}.ok-badge{background:var(--c-wechat);color:#fff;border-radius:var(--radius-full);padding:4px 16px;font-size:14px}.qr-card{background:var(--c-card);border-radius:var(--radius-md);padding:var(--gap-24) var(--gap-16);text-align:center;display:flex;flex-direction:column;gap:var(--gap-16);align-items:center}.qr-tip{color:var(--c-sub);font-size:13px}.qrcode{width:240px;height:240px;border-radius:var(--radius-sm);object-fit:contain;background:#fff}.order-meta{color:var(--c-sub);font-size:12px;line-height:1.8}