:root { --ink:#031726; --muted:#637386; --line:#dce7ee; --cyan:#25c7d9; --amber:#ffb32c; --paper:#f7fafc; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:#102334; background:var(--paper); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.checkout-main { min-height:70vh; padding:56px 0 80px; }
.checkout-shell { width:min(1080px,calc(100% - 40px)); margin:auto; }
.checkout-back { display:inline-flex; margin-bottom:20px; color:#087483; font-size:14px; font-weight:800; }
.checkout-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.checkout-card { padding:34px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:0 20px 55px rgba(3,23,38,.08); }
.checkout-eyebrow { margin:0 0 10px; color:#168397; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.checkout-card h1,.order-result h1 { margin:0; color:var(--ink); font-size:clamp(30px,4vw,45px); line-height:1.15; letter-spacing:-.04em; }
.checkout-card h2,.next-step h2 { margin:26px 0 12px; color:var(--ink); font-size:19px; }
.checkout-lead { margin:14px 0 0; color:var(--muted); }
.checkout-price { margin:24px 0; color:var(--ink); font-size:48px; font-weight:950; letter-spacing:-.04em; }
.checkout-points { margin:0; padding:0; list-style:none; }
.checkout-points li { position:relative; padding:10px 0 10px 25px; border-bottom:1px dashed #e4ecef; font-size:14px; }
.checkout-points li::before { content:"✓"; position:absolute; left:2px; color:#0d9c75; font-weight:900; }
.checkout-field { display:block; margin-top:16px; }
.checkout-field span { display:block; margin-bottom:6px; color:var(--ink); font-size:14px; font-weight:800; }
.checkout-field input,.checkout-field textarea { width:100%; padding:13px 14px; color:#102334; background:#fff; border:1px solid #cddce4; border-radius:13px; resize:vertical; }
.checkout-field input:focus,.checkout-field textarea:focus { border-color:#42becb; outline:3px solid rgba(37,199,217,.14); }
.checkout-consent { display:flex; gap:10px; margin:20px 0; color:#4f6273; font-size:13px; cursor:pointer; }
.checkout-consent input { margin-top:4px; }
.checkout-pay-button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:0 20px; color:#231400; background:linear-gradient(135deg,#ffd66d,var(--amber)); border:0; border-radius:14px; font-weight:900; cursor:pointer; box-shadow:0 14px 32px rgba(255,179,44,.22); }
.checkout-pay-button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.checkout-status { min-height:23px; margin:12px 0 0; color:var(--muted); font-size:13px; }
.checkout-status.error { color:#b33a2e; font-weight:800; }
.checkout-status.success { color:#0d9c75; font-weight:800; }
.pay-panel { text-align:center; }
.pay-panel img { display:block; width:240px; height:240px; margin:18px auto; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:16px; }
.checkout-security { margin:24px auto 0; color:#708191; font-size:12px; text-align:center; }
.order-result { width:min(720px,calc(100% - 40px)); margin:0 auto; padding:42px; background:#fff; border:1px solid var(--line); border-radius:26px; box-shadow:0 24px 65px rgba(3,23,38,.1); text-align:center; }
.result-mark { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 22px; color:var(--ink); background:#eafafb; border-radius:99px; font-size:30px; font-weight:950; }
.result-mark.success { color:#fff; background:#0d9c75; }
.result-mark.error { color:#fff; background:#b33a2e; }
.order-summary { margin:28px 0 0; text-align:left; }
.order-summary div { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:12px 0; border-bottom:1px dashed #e4ecef; }
.order-summary dt { color:var(--muted); }
.order-summary dd { margin:0; color:var(--ink); font-weight:800; word-break:break-word; }
.next-step { margin-top:28px; padding:22px; background:#fff9e8; border:1px solid #f6dfa4; border-radius:16px; text-align:left; }
.next-step h2 { margin-top:0; }
.result-actions { display:flex; justify-content:center; gap:10px; margin-top:24px; }
.result-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; color:#075c6a; background:#effbfc; border:1px solid #c7e9ed; border-radius:12px; font:inherit; font-weight:800; cursor:pointer; }
@media (max-width:760px) {
  .checkout-main { padding:36px 0 60px; }
  .checkout-shell { width:min(100% - 28px,1080px); }
  .checkout-grid { grid-template-columns:1fr; }
  .checkout-card,.order-result { padding:26px 21px; }
  .order-result { width:min(100% - 28px,720px); }
  .order-summary div { grid-template-columns:1fr; gap:2px; }
  .result-actions { display:grid; }
}
/* 支付成功/未支付 极简结果区 */
.pay-success, .pay-pending { margin-top: 26px; }
.pay-thanks { margin: 4px 0 8px; color: var(--ink); font-size: 24px; font-weight: 950; letter-spacing: -.02em; }
.pay-guide { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.pay-success .pay-qr, .pay-pending .pay-qr {
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto 14px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pay-scan { margin: 0 0 18px; color: #4f6273; font-size: 14px; font-weight: 800; }
.pay-success .checkout-pay-button, .pay-pending .checkout-pay-button { text-decoration: none; }
.pay-order { margin: 14px 0 0; color: #8aa0ad; font-size: 12px; word-break: break-all; }