:where(.pay-body){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--brand:#2f5bea;--brand-600:#2549c9;--brand-50:#eef2fe;--ink:#0a2540;--ink-2:#425466;--ink-3:#6b7385;--line:#e6ebf1;--bg:#f6f9fc;--card:#fff;--success:#0e9f6e;--danger:#e02424;--warning:#d97706;--pending:#2f5bea;--radius-sm:8px;--radius:12px;--radius-lg:16px;--shadow-sm:0 1px 2px #0a25400f;--shadow:0 2px 4px #0a25400a, 0 8px 24px #0a254014;--shadow-lg:0 4px 8px #0a25400a, 0 24px 48px #0a25401f;--ease:cubic-bezier(.2, .8, .2, 1);--focus:0 0 0 3px var(--card), 0 0 0 5px #2f5bea8c}:where(.pay-body),:where(.pay-body) *{box-sizing:border-box}:where(.pay-body)>#app{display:contents}html{-webkit-text-size-adjust:100%}body:where(.pay-body){min-height:100dvh;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;flex-direction:column;justify-content:center;align-items:center;margin:0;padding:48px 16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif;font-size:16px;line-height:1.5;display:flex;position:relative;overflow-x:hidden}body:where(.pay-body):before{content:"";clip-path:polygon(0 0,100% 0,100% 62%,0 100%);opacity:.92;pointer-events:none;background:radial-gradient(60% 120% at 85% 0,#8fb0ff8c 0%,#8fb0ff00 70%),linear-gradient(120deg,#2f5bea 0%,#4a73f2 42%,#7d9cf8 78%,#b9cbfd 100%);height:min(440px,58vh);position:absolute;inset:0 0 auto}:where(.pay-body) main{background:var(--card);border-radius:var(--radius-lg);width:100%;max-width:460px;box-shadow:var(--shadow-lg);border:1px solid #e6ebf1cc;padding:40px 36px 28px;position:relative}:where(.pay-body) .brand{align-items:center;gap:14px;display:flex}:where(.pay-body) .brand-mark{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);color:#fff;width:48px;height:48px;box-shadow:0 0 0 4px var(--brand-50), 0 6px 14px #2f5bea47;letter-spacing:.02em;white-space:nowrap;border-radius:50%;flex:none;place-items:center;font-size:16px;font-weight:700;line-height:1;display:grid;overflow:hidden}:where(.pay-body) .brand-mark svg{width:22px;height:22px}:where(.pay-body) .brand-text{min-width:0}:where(.pay-body) h1{letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere;margin:0;font-size:20px;font-weight:650;line-height:1.25}:where(.pay-body) .brand-tagline{color:var(--ink-3);overflow-wrap:anywhere;margin:2px 0 0;font-size:13.5px;line-height:1.4}:where(.pay-body) .step{border-top:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--ink-2);margin:24px 0 20px;padding-top:20px;font-size:14px;font-weight:500}:where(.pay-body) .step:empty{margin-bottom:20px;padding-top:0}:where(.pay-body) label{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;font-size:12px;font-weight:600;display:block}:where(.pay-body) .row{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--bg);transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);align-items:center;gap:8px;padding:18px;display:flex}:where(.pay-body) .row:hover{border-color:#d3dbe8}:where(.pay-body) .row:focus-within{border-color:var(--brand);background:var(--card);box-shadow:0 0 0 4px #2f5bea1f}:where(.pay-body) .sym{color:var(--ink-3);flex:none;font-size:36px;font-weight:600;line-height:1}:where(.pay-body) .sym:empty{display:none}:where(.pay-body) #amount{min-width:0;font:inherit;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);background:0 0;border:0;outline:0;flex:1;padding:0;font-size:44px;font-weight:600;line-height:1.1}:where(.pay-body) #amount::placeholder{color:#b4bdcc}:where(.pay-body) .cur{background:var(--brand-50);color:var(--brand-600);letter-spacing:.06em;border-radius:999px;flex:none;padding:5px 10px;font-size:12px;font-weight:700}:where(.pay-body) .cur:empty{display:none}:where(.pay-body) .preview{font-variant-numeric:tabular-nums;min-height:20px;color:var(--ink-3);margin-top:8px;padding-left:2px;font-size:13px;font-weight:500}:where(.pay-body) .change-amount{color:var(--brand);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:4px;margin-top:12px;padding:4px 2px;font-size:14px;font-weight:600}:where(.pay-body) .change-amount:hover{color:var(--brand-600);text-underline-offset:3px;text-decoration:underline}:where(.pay-body) .change-amount:focus-visible{box-shadow:var(--focus);outline:0}:where(.pay-body) .quick{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;display:grid}:where(.pay-body) .chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);border-radius:999px;padding:9px 0;font-size:14.5px;font-weight:600}:where(.pay-body) .chip:hover{color:var(--brand-600);border-color:#c5d0f5}:where(.pay-body) .chip:active{transform:scale(.97)}:where(.pay-body) .chip.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-600);box-shadow:none}:where(.pay-body) .chip:focus-visible{box-shadow:var(--focus);outline:0}:where(.pay-body) #pay-btn,:where(.pay-body) #result-btn{border-radius:var(--radius);background:linear-gradient(135deg, #3d67f0 0%, var(--brand) 45%, var(--brand-600) 100%);color:#fff;width:100%;font:inherit;letter-spacing:.01em;cursor:pointer;transition:box-shadow .2s var(--ease), transform .2s var(--ease), filter .2s var(--ease);border:0;margin-top:24px;padding:16px;font-size:16px;font-weight:650;position:relative;box-shadow:inset 0 1px #ffffff2e,0 6px 16px #2f5bea4d}:where(.pay-body) #pay-btn:hover,:where(.pay-body) #result-btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff2e,0 10px 24px #2f5bea5c}:where(.pay-body) #pay-btn:active,:where(.pay-body) #result-btn:active{filter:none;transform:translateY(0);box-shadow:0 4px 10px #2f5bea47}:where(.pay-body) #pay-btn:focus-visible,:where(.pay-body) #result-btn:focus-visible{box-shadow:var(--focus), 0 6px 16px #2f5bea4d;outline:0}:where(.pay-body) #pay-btn:disabled{cursor:progress;color:#0000;filter:none;box-shadow:none;transform:none}:where(.pay-body) #pay-btn:disabled:after{content:"";border:2.5px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;animation:.7s linear infinite pay-spin;position:absolute;top:50%;left:50%}:where(.pay-body) #sumup-card:not(:empty){animation:pay-rise .25s var(--ease);margin-top:4px}:where(.pay-body) #msg{border-radius:var(--radius);border:1px solid #0000;align-items:flex-start;gap:12px;margin-top:20px;padding:14px 16px;font-size:14.5px;line-height:1.45;display:none}:where(.pay-body) #msg:before{content:"";background:currentColor 50%/14px 14px no-repeat;border-radius:50%;flex:none;width:22px;height:22px}:where(.pay-body) #msg.error,:where(.pay-body) #msg.success,:where(.pay-body) #msg.info{animation:pay-rise .25s var(--ease);display:flex}:where(.pay-body) #msg.success{color:#05603a;background:#ebf8f3;border-color:#c6ebdc}:where(.pay-body) #msg.error{color:#9b1c1c;background:#fdf0f0;border-color:#f8d0d0}:where(.pay-body) #msg.info{background:var(--brand-50);color:#1e40af;border-color:#d6e0fc}:where(.pay-body) #msg.success:before{background-color:var(--success);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")}:where(.pay-body) #msg.error:before{background-color:var(--danger);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E")}:where(.pay-body) #msg.info:before{border:2.5px solid #2f5bea33;border-top-color:var(--pending);background:0 0;animation:.8s linear infinite pay-spin}:where(.pay-body) #msg.error[data-state=expired]{color:#8a4b04;background:#fff7eb;border-color:#f8e0b8}:where(.pay-body) #msg.error[data-state=expired]:before{background-color:var(--warning);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M8 5v3.2l2 1.3'/%3E%3C/svg%3E")}:where(.pay-body) #msg.info[data-state="3ds"]{color:#5532a8;background:#f5f1fe;border-color:#e2d8fb}:where(.pay-body) #msg.info[data-state="3ds"]:before{animation:pay-pulse 1.6s var(--ease) infinite;background:#7048e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 2l5 2v4c0 3-2.2 5-5 6-2.8-1-5-3-5-6V4z'/%3E%3Cpath d='M6 8l1.5 1.5L10.5 6.5'/%3E%3C/svg%3E") 50%/14px 14px no-repeat;border:0}:where(.pay-body) #msg.info[data-state=wait]{color:#8a4b04;background:#fff7eb;border-color:#f8e0b8}:where(.pay-body) #msg.info[data-state=wait]:before{background:var(--warning) no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M8 5v3.2l2 1.3'/%3E%3C/svg%3E");border:0;animation:none}:where(.pay-body) #result{text-align:center;animation:pay-rise .25s var(--ease)}:where(.pay-body) #result[hidden]{display:none}:where(.pay-body) .res-icon{--tone:var(--brand);--halo:var(--brand-50);background:var(--tone);color:#fff;width:80px;height:80px;box-shadow:0 0 0 10px var(--halo), 0 12px 28px -8px var(--tone);animation:pay-pop .25s var(--ease) both;border-radius:50%;place-items:center;margin:8px auto 22px;display:grid}:where(.pay-body) .res-icon svg{width:36px;height:36px;animation:pay-rise .25s .1s var(--ease) both}:where(.pay-body) #result[data-kind=paid] .res-icon{--tone:var(--success);--halo:#e3f5ee}:where(.pay-body) #result[data-kind=failed] .res-icon{--tone:var(--danger);--halo:#fde8e8}:where(.pay-body) #result[data-kind=expired] .res-icon{--tone:var(--warning);--halo:#fdf1e1}:where(.pay-body) .res-title{letter-spacing:-.015em;color:var(--ink);margin:0;font-size:22px;font-weight:650}:where(.pay-body) .res-reason{max-width:32ch;color:var(--ink-2);margin:6px auto 0;font-size:14.5px}:where(.pay-body) .res-reason:empty{display:none}:where(.pay-body) .res-amount{letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);margin-top:14px;font-size:38px;font-weight:600;line-height:1.15}:where(.pay-body) .res-amount:empty{display:none}:where(.pay-body) .receipt{border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);background:var(--bg);text-align:left;border-top:2px dashed #d3dbe8;margin:24px 0 0;padding:8px 18px;font-size:14px;position:relative}:where(.pay-body) .receipt:before,:where(.pay-body) .receipt:after{content:"";background:var(--card);border-radius:50%;width:16px;height:16px;position:absolute;top:-9px}:where(.pay-body) .receipt:before{left:-9px}:where(.pay-body) .receipt:after{right:-9px}:where(.pay-body) .receipt:empty{display:none}:where(.pay-body) .receipt div{border-top:1px dashed #dbe2ec;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:16px;padding:11px 0;display:grid}:where(.pay-body) .receipt div:first-child{border-top:0}:where(.pay-body) .receipt dt{color:var(--ink-3)}:where(.pay-body) .receipt dd{text-align:right;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;margin:0;font-weight:600}:where(.pay-body) footer{border-top:1px solid var(--line);text-align:center;margin-top:28px;padding-top:18px}:where(.pay-body) .trust{color:var(--ink-2);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 0;margin:0;padding:0;font-size:12.5px;font-weight:500;list-style:none;display:flex}:where(.pay-body) .trust li{align-items:center;gap:5px;display:inline-flex}:where(.pay-body) .trust li+li:before{content:"·";color:var(--ink-3);margin:0 8px}:where(.pay-body) .trust svg{width:14px;height:14px;color:var(--success);flex:none}:where(.pay-body) .trust-note{color:var(--ink-3);margin:6px 0 0;font-size:12px}@keyframes pay-spin{to{transform:rotate(360deg)}}@keyframes pay-rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes pay-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}@keyframes pay-pulse{0%,to{box-shadow:0 0 #7048e859}50%{box-shadow:0 0 0 6px #7048e800}}@media (width<=480px){body:where(.pay-body){justify-content:flex-start;padding:24px 16px}body:where(.pay-body):before{height:300px}:where(.pay-body) main{padding:28px 20px 22px}:where(.pay-body) .brand-mark{width:44px;height:44px}:where(.pay-body) .step{margin:20px 0 18px;padding-top:18px}:where(.pay-body) .row{padding:16px}:where(.pay-body) #amount{font-size:38px}:where(.pay-body) .sym{font-size:32px}:where(.pay-body) .chip{font-size:13.5px}:where(.pay-body) .res-amount{font-size:34px}:where(.pay-body) .receipt{padding:6px 14px}:where(.pay-body) .trust{gap:4px 14px}:where(.pay-body) .trust li+li:before{content:none}}@media (prefers-reduced-motion:reduce){:where(.pay-body),:where(.pay-body) *,:where(.pay-body) :before,:where(.pay-body) :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}:where(.pay-body) #pay-btn:hover,:where(.pay-body) #result-btn:hover,:where(.pay-body) .chip:active{transform:none}}
