.checkout-dialog { --payment-accent:#ad6800; --payment-accent-hover:#925600; --payment-line:#e5e5e7; --payment-soft:#fffdfa; box-sizing:border-box; width:min(592px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); margin:auto; padding:34px 34px 38px; overflow:auto; overscroll-behavior:contain; border:2px solid var(--payment-accent); border-radius:38px; background:var(--card); color:var(--text); font-family:var(--font-sans); box-shadow:0 18px 55px rgb(9 9 11 / 12%); }
html[data-theme="dark"] .checkout-dialog { --payment-accent:var(--accent,#d4a94f) !important; --payment-accent-hover:var(--accent-hover,#e0b75d) !important; --payment-line:#3f3f46 !important; --payment-soft:#2a2418 !important; }
html[data-theme="dark"] .checkout-methods button { border-color:#3f3f46; background:#18181b; }
html[data-theme="dark"] .checkout-methods button:hover { border-color:#a7833d; background:#242016; }
html[data-theme="dark"] .checkout-methods button[aria-pressed="true"] { border-color:#d4a94f; background:#2a2418; }
.checkout-dialog::backdrop { background:rgb(9 9 11 / 38%); }
.checkout-dialog [hidden] { display:none !important; }
.checkout-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.checkout-head h2 { margin:0; font-size:24px; font-weight:700; letter-spacing:-.025em; }
.checkout-close { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:0; border-radius:14px; background:transparent; color:var(--muted-strong); cursor:pointer; }
.checkout-close:hover { background:var(--field); }
.checkout-summary { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.checkout-summary strong { display:block; margin-bottom:3px; font-weight:500; font-size:15px; }
.checkout-summary span { color:var(--muted-strong); font-size:13px; }
.checkout-summary #wechatPayAmount { font-size:32px; font-weight:600; letter-spacing:-.025em; white-space:nowrap; }
.checkout-method-label { margin:30px 0 16px; font-size:16px; font-weight:600; }
.checkout-methods { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.checkout-methods button { display:flex; align-items:center; gap:12px; min-height:62px; padding:10px 16px; border:1px solid var(--payment-line); border-radius:9px; background:var(--card); color:var(--text); font:inherit; font-weight:600; cursor:pointer; transition:border-color 160ms ease,background-color 160ms ease,transform 160ms ease; }
.checkout-methods button:hover { border-color:color-mix(in srgb,var(--payment-accent) 55%,var(--payment-line)); background:var(--payment-soft); }
.checkout-methods button:active { transform:scale(.985); }
.checkout-methods button[aria-pressed="true"] { outline:2px solid var(--payment-accent); outline-offset:-2px; border-color:var(--payment-accent); background:var(--payment-soft); }
.checkout-methods button:disabled { cursor:wait; }
.checkout-brand { width:28px; height:28px; flex-shrink:0; fill:currentColor; }
.checkout-brand.wechat { color:#07c160; }
.checkout-brand.alipay { color:#1677ff; }
.checkout-radio { display:grid; place-items:center; width:18px; height:18px; margin-left:auto; border:1px solid #cfd0d3; border-radius:50%; font-size:11px; color:transparent; flex-shrink:0; }
html[data-theme="dark"] .checkout-radio { border-color:#71717a; }
[aria-pressed="true"] .checkout-radio { border-color:var(--payment-accent); background:var(--payment-accent); color:#fff; }
.checkout-instruction { margin:26px 0 16px; text-align:center; font-size:18px; font-weight:600; }
.checkout-qr { display:grid; place-items:center; width:230px; height:230px; margin:0 auto; overflow:hidden; border:1px solid var(--payment-line); border-radius:15px; background:#fff; }
.checkout-qr img { display:block; width:100%; height:100%; object-fit:contain; }
.checkout-qr-placeholder { padding:20px; color:#52525b; text-align:center; font-size:14px; line-height:1.7; }
.checkout-countdown { min-height:0; margin:8px 0 0; text-align:center; color:var(--muted-strong); font-size:12px; font-variant-numeric:tabular-nums; }
.checkout-status { min-height:0; margin:6px 0 14px; text-align:center; color:var(--muted-strong); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.checkout-status.is-error { color:var(--danger); }
.checkout-action { display:block; width:min(360px,100%); min-height:50px; margin:0 auto; border-radius:9px; background:var(--payment-accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; transition:background-color 160ms ease,transform 160ms ease; }
.checkout-dialog .checkout-action:hover:not(:disabled) { background:var(--payment-accent-hover); box-shadow:none; transform:none; }
.checkout-action:active { transform:scale(.985); }
.checkout-help { margin:6px auto 0; color:var(--muted-strong); font-size:13px; line-height:1.7; }
.checkout-help summary { display:flex; justify-content:center; align-items:center; min-height:40px; list-style:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.checkout-help summary::-webkit-details-marker { display:none; }
.checkout-help p { margin:4px 0 10px; padding:12px 14px; border-radius:14px; background:var(--field); }
.checkout-order { margin:0; color:var(--muted); text-align:center; font-size:11px; overflow-wrap:anywhere; }
.checkout-success { padding:24px 0 12px; text-align:center; }
.checkout-success-mark { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 20px; border-radius:50%; color:var(--success); background:var(--success-soft,#e9f9ee); }
.checkout-success-mark svg { width:36px; height:36px; }
.checkout-success h3 { font-size:26px; font-weight:600; margin:0 0 10px; }
.checkout-success p { margin:0 0 28px; color:var(--muted-strong); }
.checkout-link { min-height:44px; margin:8px auto 0; padding:8px 16px; border:0; background:transparent; color:var(--muted-strong); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.checkout-success #paymentSuccessSync { margin:10px 0 0; font-size:12px; }
body:has(.checkout-dialog[open]) { overflow:hidden; }
#paymentQuery { display:block; max-width:100%; margin:8px auto 0; }
.checkout-dialog :focus-visible { outline:2px solid var(--payment-accent); outline-offset:3px; }
@media(max-width:520px) { .checkout-dialog { padding:22px 20px 26px; border-radius:28px; } .checkout-head h2 { font-size:22px; } .checkout-method-label { margin:24px 0 12px; } .checkout-methods { gap:8px; } .checkout-methods button { padding:8px 10px; gap:7px; font-size:13px; min-height:54px; } .checkout-brand { width:26px; height:26px; } .checkout-instruction { margin-top:22px; font-size:16px; } .checkout-qr { width:196px; height:196px; } }