.checkout-body { min-height:100vh; background:#eff7fb; color:#14263a; }
.checkout-shell { width:min(100% - 32px, 860px); margin:0 auto; padding:44px 0 36px; }
.checkout-brand { display:inline-flex; margin:0 0 24px 4px; }
.checkout-brand img { height:32px; width:auto; }
.checkout-card { display:grid; grid-template-columns:0.88fr 1.12fr; background:#fff; border:1px solid #dce8f0; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(20,40,60,.12); }
.checkout-copy { padding:42px 38px; background:linear-gradient(160deg,#effaff 0%,#f8fcff 75%,#fff7e9 100%); }
.checkout-copy h1 { font-size:30px; line-height:1.28; margin:4px 0 14px; }
.checkout-copy p { color:#586b7d; font-size:14px; margin:0; }
.checkout-summary { margin-top:34px; padding-top:20px; border-top:1px solid #d8e8f1; display:flex; flex-direction:column; gap:5px; }
.checkout-summary span { font-size:14px; color:#52677a; }
.checkout-summary strong { color:#0f6faa; font-size:22px; }
.checkout-form, .payment-panel, .success-panel { padding:40px; }
.checkout-form label, .checkout-form legend { display:block; font-size:14px; font-weight:700; margin-bottom:8px; }
.checkout-form input[type=email] { width:100%; height:44px; padding:0 12px; border:1px solid #c8d8e3; border-radius:7px; font:inherit; outline:none; }
.checkout-form input[type=email]:focus { border-color:#16abe3; box-shadow:0 0 0 3px rgba(22,171,227,.12); }
.field-hint { color:#718496; font-size:12px; line-height:1.5; margin:7px 0 22px; }
.checkout-form fieldset { border:0; margin:0 0 22px; padding:0; }
.payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.payment-method { display:flex !important; align-items:center; gap:9px; margin:0 !important; padding:11px; border:1px solid #d5e1e8; border-radius:8px; cursor:pointer; font-weight:600 !important; }
.payment-method input { position:absolute; opacity:0; }
.payment-method.is-selected { border-color:#16abe3; background:#f0fbff; }
.payment-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; color:#fff; font-size:13px; }
.wechat { background:#19b463; }.alipay { background:#1677ff; }
.agreement { display:flex !important; align-items:flex-start; gap:8px; color:#52677a; font-size:12px !important; line-height:1.5; font-weight:400 !important; cursor:pointer; }
.agreement input { margin-top:3px; }
.checkout-button { width:100%; justify-content:center; margin-top:20px; }
.form-message { min-height:20px; color:#d33a2c; font-size:13px; margin:12px 0 0; }
.payment-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.payment-panel-head span { color:#647b8c; font-size:13px; }.payment-panel h2,.success-panel h2 { font-size:22px; margin:5px 0 0; }.link-button { border:0; color:#1687bd; background:transparent; cursor:pointer; font:inherit; padding:4px 0; }
.qr-frame { display:grid; place-items:center; width:244px; height:244px; margin:28px auto 16px; border:1px solid #dae6ed; border-radius:10px; }.qr-frame img { display:block; width:216px; height:216px; image-rendering:pixelated; }.countdown,.payment-note { text-align:center; color:#647b8c; font-size:13px; }.payment-note { margin:10px auto 0; max-width:280px; line-height:1.55; }
.success-panel { text-align:center; }.success-mark { display:grid; place-items:center; width:52px; height:52px; margin:18px auto; border-radius:50%; background:#19a463; color:#fff; font-size:27px; }.success-panel p { max-width:340px; margin:15px auto 24px; color:#52677a; line-height:1.7; }.success-panel .btn { justify-content:center; }
.checkout-footer { margin:18px 0 0; text-align:center; color:#718496; font-size:12px; }
@media (max-width:720px) { .checkout-shell { padding-top:22px; }.checkout-card { grid-template-columns:1fr; }.checkout-copy { padding:28px; }.checkout-form,.payment-panel,.success-panel { padding:28px; }.checkout-copy h1 { font-size:26px; } }