:root{--ink-900: #14161a;--ink-800: #22242c;--ink-700: #3d424b;--ink-500: #6b7280;--ink-400: #9ca3ae;--rule-strong: #cdd0d8;--rule: #e7e8ee;--panel: #f1f2f6;--panel-2: #f7f8fc;--paper: #ffffff;--brand: #3a3d8f;--brand-2: #5a5fda;--brand-tint: #ecedfb;--success: #0f7b4f;--success-2: #1aa268;--success-tint: #e9f6ef;--danger: #b02d26;--danger-tint: #fbefee;--warning: #a66a08;--warning-tint: #fbf4e7;--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;--pay: var(--accent, var(--ink-900))}*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink-900);font:400 15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:20px 16px 12px;background:radial-gradient(820px 500px at 50% -18%,var(--brand-tint),transparent 62%),radial-gradient(680px 460px at 92% 108%,#eef0fb,transparent 60%),linear-gradient(180deg,#f6f7fb 0%,var(--panel) 100%);background-attachment:fixed}.sheet{position:relative;width:100%;max-width:452px;background:var(--paper);border:1px solid rgba(20,22,54,.06);border-radius:22px;box-shadow:0 1px 2px #181a360a,0 24px 60px -26px #181a364d;padding:28px 26px 26px;overflow:hidden;animation:rise .5s cubic-bezier(.22,1,.36,1) both}@keyframes rise{0%{transform:translateY(16px) scale(.99)}}.sheet:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--pay),color-mix(in srgb,var(--pay) 50%,var(--brand-2)),var(--pay));background-size:220% 100%;animation:sheen 6s ease-in-out infinite}@keyframes sheen{50%{background-position:100% 0}}.secured{display:inline-flex;align-items:center;gap:6px;margin:16px 0 8px;font-size:12px;letter-spacing:.01em;color:var(--ink-400)}.merchant{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:20px;font-weight:650;font-size:16px;letter-spacing:-.01em}.merchant .dot{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--pay) 86%,#fff),color-mix(in srgb,var(--pay) 72%,#000));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none;box-shadow:inset 0 1px #ffffff40,0 6px 14px -5px color-mix(in srgb,var(--pay) 55%,transparent)}.eyebrow{font-size:12px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);margin:0 0 6px}.headline-amount{font:700 38px/1.02 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0 0 6px}.order-ref{font-size:12.5px;color:var(--ink-500);margin:0 0 20px}.breakdown{background:var(--panel-2);border:1px solid var(--rule);border-radius:14px;padding:6px 14px;margin:0 0 20px}.breakdown .row,.breakdown .row-total{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:13.5px;color:var(--ink-700)}.breakdown .row+.row{border-top:1px solid var(--rule)}.breakdown .row-total{font-weight:700;font-size:14.5px;color:var(--ink-900);border-top:2px solid var(--ink-900);margin-top:2px}.breakdown .num{font-family:var(--mono);font-variant-numeric:tabular-nums}label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin:0 0 8px}.phone-field{display:flex;align-items:stretch;border:1.5px solid var(--rule-strong);border-radius:14px;background:color-mix(in srgb,var(--panel) 35%,var(--paper));overflow:hidden;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.phone-field:focus-within{background:var(--paper);border-color:var(--pay);box-shadow:0 0 0 4px color-mix(in srgb,var(--pay) 18%,transparent)}.phone-prefix{display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 14px;font:600 15px/1 var(--mono);color:var(--ink-700);background:color-mix(in srgb,var(--panel) 60%,var(--paper));border-right:1px solid var(--rule);white-space:nowrap}.phone-prefix .flag{width:20px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #00000014;flex:none}input[type=tel]{flex:1;min-width:0;width:100%;height:56px;padding:0 14px;border:0;background:transparent;font:600 19px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-900)}input[type=tel]::placeholder{color:var(--ink-400);font-weight:500;letter-spacing:.02em}input[type=tel]:focus-visible{outline:none}.field-hint{margin:8px 2px 0;font-size:12.5px;color:var(--ink-500)}.field-error{margin:8px 2px 0;font-size:13px;color:var(--danger);font-weight:500}.pay-button{position:relative;width:100%;height:56px;margin-top:18px;border:none;border-radius:14px;background:var(--pay);background:linear-gradient(180deg,color-mix(in srgb,var(--pay) 92%,#fff),color-mix(in srgb,var(--pay) 82%,#000));color:#fff;font:700 16px/1 system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;overflow:hidden;box-shadow:inset 0 1px #ffffff3d,0 12px 26px -12px color-mix(in srgb,var(--pay) 62%,transparent);transition:transform .13s ease,box-shadow .13s ease,filter .13s ease}.pay-button:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skew(-18deg);animation:shine 3.6s ease-in-out infinite}@keyframes shine{0%,62%{left:-60%}88%,to{left:130%}}.pay-button:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:inset 0 1px #ffffff42,0 16px 32px -12px color-mix(in srgb,var(--pay) 68%,transparent)}.pay-button:active{transform:translateY(0);filter:brightness(.97)}.pay-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--pay)}.pay-button .pb-label{display:inline-flex;align-items:center;gap:9px}.pay-button .spinner{display:none}.pay-button.is-loading{pointer-events:none}.pay-button.is-loading:after{display:none}.pay-button.is-loading .pb-label{display:none}.pay-button.is-loading .spinner{display:inline-block;width:22px;height:22px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.center{text-align:center}h1.screen-title{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:4px 0 8px}.screen-body{color:var(--ink-700);margin:0 0 8px;font-size:14.5px}.wait-stage{position:relative;width:132px;height:132px;margin:6px auto 20px;display:grid;place-items:center}.ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--paper) 78%,transparent 79%),conic-gradient(var(--pay) var(--ring-pct, 100%),var(--rule) 0);box-shadow:0 10px 28px -14px color-mix(in srgb,var(--pay) 45%,transparent);transition:background .9s linear}.ring:after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid var(--rule)}.phone-illo{position:relative;width:46px;height:72px;border-radius:11px;background:linear-gradient(160deg,var(--ink-800),var(--ink-900));box-shadow:inset 0 0 0 2px #ffffff0f,0 8px 18px -8px #14162899;animation:buzz 2.4s ease-in-out infinite}.phone-illo:before{content:"";position:absolute;inset:6px 5px;border-radius:6px;background:color-mix(in srgb,var(--pay) 22%,#0b0c12)}.phone-illo:after{content:"";position:absolute;top:11px;left:50%;transform:translate(-50%);width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--pay) 70%,#fff);box-shadow:0 0 10px 1px color-mix(in srgb,var(--pay) 70%,transparent);animation:blink 1.4s ease-in-out infinite}@keyframes buzz{0%,70%,to{transform:rotate(0)}74%,82%{transform:rotate(6deg)}78%,86%{transform:rotate(-6deg)}}@keyframes blink{50%{opacity:.35}}.ring time{position:absolute;bottom:-2px;left:50%;transform:translate(-50%);font:700 13px/1 var(--mono);color:var(--ink-500);background:var(--paper);padding:2px 7px;border-radius:999px;border:1px solid var(--rule)}.waiting-dots{display:inline-flex;gap:4px;margin-left:3px}.waiting-dots i{width:5px;height:5px;border-radius:50%;background:var(--pay);animation:bounce 1.3s ease-in-out infinite}.waiting-dots i:nth-child(2){animation-delay:.16s}.waiting-dots i:nth-child(3){animation-delay:.32s}@keyframes bounce{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}.muted-box{background:var(--panel-2);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-500);margin:18px 0;line-height:1.6}.success-mark{position:relative;width:96px;height:96px;margin:8px auto 18px;display:grid;place-items:center}.success-mark .burst{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(closest-side,var(--success-tint),transparent 70%);animation:burst .7s ease-out both}@keyframes burst{0%{transform:scale(.4);opacity:0}60%{opacity:1}}.success-mark svg{position:relative;width:96px;height:96px}.success-mark .circle{fill:none;stroke:var(--success);stroke-width:5;stroke-dasharray:276;stroke-dashoffset:276;animation:draw .55s ease-out .05s forwards}.success-mark .tick{fill:none;stroke:var(--success);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .35s ease-out .5s forwards}@keyframes draw{to{stroke-dashoffset:0}}.status-banner{border-left:3px solid var(--warning);background:var(--warning-tint);border-radius:12px;padding:12px 14px;font-size:13px;margin:18px 0;text-align:left;line-height:1.6}.status-banner.ok{border-left-color:var(--success);background:var(--success-tint);color:#0c5f3d;font-weight:500}.status-banner.bad{border-left-color:var(--danger);background:var(--danger-tint)}a{color:var(--brand)}.actions{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:stretch;font-size:14px}.actions a,.actions button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:13px;background:var(--paper);color:var(--ink-900);font:600 15px/1 system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .12s ease}.actions a:hover,.actions button:hover{background:var(--panel);border-color:var(--ink-400);transform:translateY(-1px)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ring{transition:background .9s linear}.success-mark .circle,.success-mark .tick{stroke-dashoffset:0}}[hidden]{display:none!important}
