.okk-pay {
  --pay-green: #1f6b4a;
  box-sizing: border-box; width: min(408px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); margin: auto; padding: 30px 28px 22px;
  overflow: auto; border: 1px solid var(--rule, #e3e7e4); border-radius: 22px;
  background: var(--surface, #fff); color: var(--ink, #15191a); text-align: center;
  font: 14px/1.6 var(--font, var(--font-sans, "Microsoft YaHei", system-ui, sans-serif));
  box-shadow: 0 28px 90px #10271c38; animation: okk-pay-enter .28s ease-out;
}
.okk-pay *, .okk-pay *::before, .okk-pay *::after { box-sizing: border-box; }
.okk-pay::backdrop { background: #10221980; backdrop-filter: blur(5px); animation: okk-pay-fade .25s ease-out; }
.okk-pay [hidden] { display: none !important; }
.okk-pay h2 { margin: 0 0 6px; font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.okk-pay .okk-pay-package { margin: 0; color: var(--ink-2, #4e5755); overflow-wrap: anywhere; }
.okk-pay .okk-pay-amount { display: flex; justify-content: center; align-items: baseline; gap: 5px; margin: 8px 0 20px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.okk-pay .okk-pay-currency { font-size: 23px; font-weight: 650; }
.okk-pay .okk-pay-price { font-size: 44px; font-weight: 750; letter-spacing: -.045em; }
.okk-pay .okk-pay-visual { display: grid; place-items: center; position: relative; width: 290px; height: 290px; margin: 0 auto 20px; border: 1px solid #e1e8e3; border-radius: 18px; background: #fff; }
.okk-pay .okk-pay-qr { display: grid; place-items: center; width: 208px; height: 208px; }
.okk-pay .okk-pay-qr canvas { display: block; width: 208px; height: 208px; }
.okk-pay .okk-pay-mark { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; color: var(--pay-green); background: #e3f3e9; }
.okk-pay .okk-pay-mark svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.okk-pay[data-state="paid"] .okk-pay-visual { border-color: #e3f0e8; background: #f4faf6; }
.okk-pay[data-state="paid"] .okk-pay-mark { animation: okk-pay-pop .4s ease-out; }
.okk-pay[data-state="paid"] .okk-pay-mark path { stroke-dasharray: 50; stroke-dashoffset: 0; animation: okk-pay-check .5s ease-out; }
.okk-pay[data-state="expired"] .okk-pay-qr { filter: grayscale(1); opacity: .15; }
.okk-pay .okk-pay-expired { position: absolute; inset: 0; display: grid; place-items: center; color: #4e5755; font-weight: 700; }
.okk-pay .okk-pay-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.okk-pay .okk-pay-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pay-green); animation: okk-pay-breathe 2s ease-in-out infinite; }
.okk-pay[data-state="paid"] .okk-pay-status { color: var(--pay-green); }
.okk-pay .okk-pay-query, .okk-pay .okk-pay-countdown { margin: 6px 0 0; color: var(--ink-2, #4e5755); font-size: 12px; font-variant-numeric: tabular-nums; }
.okk-pay .okk-pay-query::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1.5px solid #cddfd3; border-top-color: var(--pay-green); border-radius: 50%; vertical-align: -1px; animation: okk-pay-spin 1.2s linear infinite; }
.okk-pay .okk-pay-order { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--rule, #e3e7e4); color: var(--ink-2, #4e5755); font-size: 11px; }
.okk-pay .okk-pay-order code { min-width: 0; overflow-wrap: anywhere; text-align: left; font: 10px/1.5 var(--mono, var(--font-mono, monospace)); }
.okk-pay button { font: inherit; cursor: pointer; border: 0; }
.okk-pay .okk-pay-copy { flex: none; padding: 4px; color: var(--pay-green); background: transparent; font-size: 11px; }
.okk-pay .okk-pay-action { width: 100%; min-height: 44px; margin-top: 18px; border-radius: 12px; padding: 10px 16px; color: #fff; background: var(--brand, var(--pay-green)); font-weight: 700; }
.okk-pay .okk-pay-close { min-height: 38px; margin-top: 10px; padding: 6px 18px; background: transparent; color: var(--ink-2, #4e5755); border-radius: 10px; }
.okk-pay button:hover { filter: brightness(.94); }
.okk-pay button:focus-visible { outline: 2px solid var(--brand, var(--pay-green)); outline-offset: 3px; }
.okk-pay:focus { outline: none; border-radius: 22px; }
.okk-pay .okk-pay-confirm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 32px; border-radius: inherit; background: var(--surface, #fff); }
.okk-pay .okk-pay-confirm p { color: var(--ink-2, #4e5755); margin: 10px 0 20px; }
@keyframes okk-pay-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes okk-pay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes okk-pay-breathe { 50% { opacity: .35; box-shadow: 0 0 0 4px #1f6b4a12; } }
@keyframes okk-pay-spin { to { transform: rotate(360deg); } }
@keyframes okk-pay-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes okk-pay-check { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }
@media (max-width: 420px) { .okk-pay { padding: 24px 20px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .okk-pay, .okk-pay::backdrop, .okk-pay *, .okk-pay *::before { animation: none !important; transition: none !important; }
}