.payment-overlay{position:fixed;inset:0;z-index:220;background:#000a;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}
.payment-panel{width:min(600px,100%);max-height:90dvh;overflow:auto;background:#121317;color:#eee;border:1px solid #ffffff24;border-radius:20px;padding:28px;box-shadow:0 30px 100px #0008}
.payment-close{float:right}.payment-panel h2{margin:0 0 24px}.payment-panel h3{margin:24px 0 12px}.payment-panel p{font-size:13px;line-height:1.6;color:#aaa}
.payment-panel .btn:not(.primary){color:#ddd;background:#ffffff08;border-color:#ffffff30}
.payment-panel form{display:grid;gap:12px}.payment-panel label{display:grid;gap:8px}.payment-panel input,.payment-panel select{box-sizing:border-box;width:100%;padding:12px;background:#1d1f25;color:#eee;border:1px solid #ffffff30;border-radius:10px;font:inherit}
.payment-field{display:grid;gap:5px;margin:12px 0}.payment-field span{font-size:12px;color:#999}.payment-field strong{font:14px monospace;overflow-wrap:anywhere;user-select:all;white-space:pre-wrap}.payment-panel .payment-warning{color:#e5bc73}.payment-panel .payment-state{color:#a4d9ba}.payment-panel [data-payment-history] .btn{margin:4px 0;display:block;text-align:left;width:100%;white-space:normal}
@media(max-width:520px){.payment-overlay{padding:10px}.payment-panel{padding:20px;max-height:94dvh}.payment-invoice{padding:16px}.payment-due strong{font-size:23px}}
.payment-invoice{margin:0 0 22px;padding:20px;border:1px solid #ffffff1f;border-radius:16px;background:linear-gradient(180deg,#ffffff0d,#ffffff04)}
.payment-invoice.is-compact{padding:14px 18px}
.payment-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.payment-status i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--tone);box-shadow:0 0 10px var(--tone)}
.payment-panel .payment-status .payment-state{color:var(--tone);font-size:17px;font-weight:600}
.payment-status small{flex-basis:100%;margin-left:20px;color:#999;font-size:12px}
.payment-invoice.is-wait{--tone:#f0c674}.payment-invoice.is-busy{--tone:#9cc4ff}.payment-invoice.is-ok{--tone:#57d38c}.payment-invoice.is-off{--tone:#8a8a94}
.payment-invoice.is-wait .payment-status i,.payment-invoice.is-busy .payment-status i{animation:payment-pulse 1.4s ease-in-out infinite}
@keyframes payment-pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.payment-status i{animation:none!important}}
.payment-due{display:grid;gap:6px;margin:18px 0 4px}.payment-due span{font-size:12px;color:#999}
.payment-due>div,.payment-field>div{display:flex;align-items:center;gap:10px;min-width:0}
.payment-due strong{font:600 28px/1.2 'JetBrains Mono',monospace;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.payment-field>div strong,.payment-due strong{flex:1;min-width:0}
.payment-meta .payment-field{align-content:start}
.payment-panel .btn.payment-pay{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;box-sizing:border-box;margin:16px 0 6px;padding:14px 18px;font-size:15px;font-weight:600;text-decoration:none}
.payment-panel .btn.payment-copy{flex:none;padding:5px 11px;font-size:12px}
.payment-memo .payment-field strong{font:600 24px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#fff}
.payment-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 16px;margin:14px 0 6px;padding-top:6px;border-top:1px solid #ffffff14}
.payment-panel .btn.payment-verify{margin-top:6px}
.payment-panel .btn.payment-verify:disabled{opacity:.55;cursor:default}
.payment-panel .payment-verify-note{margin:10px 0 0;color:#b8b8c0;font-size:13px}
