:root{font-family:Space Grotesk,IBM Plex Sans,Satoshi,sans-serif;line-height:1.5;font-weight:400;color:#111827;background-color:#f2f4f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#f2f4f7}button,input,select{font:inherit}#root{min-height:100vh}.page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,rgba(209,213,255,.7),transparent 48%),radial-gradient(circle at 20% 20%,rgba(14,165,233,.18),transparent 45%),linear-gradient(160deg,#eef2ff,#f8fafc 35%,#f1f5f9);color:#121417;position:relative;overflow:hidden}.card{width:min(420px,92vw);background:#fffffff5;border-radius:20px;padding:28px;box-shadow:0 20px 50px #141a231f;border:1px solid rgba(18,20,23,.08);display:grid;gap:20px;position:relative;z-index:1}.success-card{text-align:center;gap:16px;justify-items:center}.success-card h2{margin:0;font-size:1.5rem}.success-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#15803d;font-size:2rem;font-weight:700}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.brand{display:flex;gap:14px;align-items:flex-start}.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#111827,#334155);color:#fff;font-weight:700;letter-spacing:.04em;font-size:.9rem}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:600;color:#6b7280;margin:0 0 8px}h1{font-size:1.6rem;margin:0 0 6px}.sub{margin:0;color:#4b5563;font-size:.95rem}.badge{background:#6366f11f;color:#4338ca;font-size:.7rem;font-weight:600;padding:6px 10px;border-radius:999px;white-space:nowrap}.summary{display:grid;gap:14px;background:#f8fafc;border-radius:16px;padding:16px;border:1px solid rgba(148,163,184,.25)}.amount{display:grid;gap:4px}.amount .value{font-size:1.8rem;font-weight:700;color:#0f172a}.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font-size:.9rem}.meta strong{display:block;color:#0f172a;font-weight:600}.code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.01em}.label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin-bottom:4px}.steps{display:grid;gap:10px}.step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid rgba(148,163,184,.2)}.step p{margin:0;font-weight:600;color:#0f172a}.step .subtle{font-size:.82rem;color:#64748b}.step-index{width:28px;height:28px;border-radius:9px;background:#0f172a14;display:grid;place-items:center;font-size:.85rem;font-weight:600;color:#0f172a}.step.active .step-index{background:#111827;color:#fff}.qr-wrap{display:grid;place-items:center;gap:10px}.qr{width:220px;height:220px;border-radius:16px;background:#f8fafc;border:1px dashed rgba(15,23,42,.25);position:relative;display:grid;place-items:center;overflow:hidden}.qr:before{content:"";position:absolute;left:14px;right:14px;height:26px;top:-30px;border-radius:999px;background:linear-gradient(180deg,transparent,rgba(14,165,233,.35),transparent);filter:blur(1px);animation:scan 2.8s ease-in-out infinite}.qr:after{content:"";position:absolute;inset:18px;border-radius:12px;box-shadow:0 0 #0ea5e933;animation:pulse 2.8s ease-out infinite;pointer-events:none}.qr-grid{width:140px;height:140px;background-image:linear-gradient(90deg,rgba(17,24,39,.15) 1px,transparent 1px),linear-gradient(rgba(17,24,39,.15) 1px,transparent 1px);background-size:10px 10px;border-radius:8px}.qr-corner{position:absolute;width:26px;height:26px;border:3px solid #111827}.qr-corner:nth-child(1){top:18px;left:18px;border-right:0;border-bottom:0}.qr-corner:nth-child(2){top:18px;right:18px;border-left:0;border-bottom:0}.qr-corner:nth-child(3){bottom:18px;left:18px;border-right:0;border-top:0}.qr-corner:nth-child(4){bottom:18px;right:18px;border-left:0;border-top:0}.qr-caption{margin:0;font-size:.8rem;color:#6b7280}.pay{border:none;border-radius:12px;padding:12px 18px;font-size:1rem;font-weight:600;background:#111827;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s ease,box-shadow .2s ease}.pay:disabled{opacity:.7;cursor:not-allowed}.pay:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 20px #11182733}.secondary{border:1px solid rgba(17,24,39,.15);border-radius:12px;padding:10px 16px;background:#fff;font-weight:600;color:#111827;cursor:pointer}.status{font-size:.85rem;color:#475569;background:#f1f5f9;border-radius:12px;padding:10px 12px;border:1px solid rgba(148,163,184,.25);display:flex;align-items:center;gap:8px}.status.success{color:#15803d;background:#ecfdf3;border-color:#16a34a40}.status.error{color:#b91c1c;background:#fef2f2;border-color:#dc262633}.footnote{font-size:.75rem;color:#64748b;text-align:center}.footnote span{font-weight:600;color:#0f172a}.receipt{width:100%;display:grid;gap:12px;padding:16px;background:#f8fafc;border-radius:16px;border:1px solid rgba(148,163,184,.2)}.receipt strong{display:block;font-size:.95rem;color:#0f172a;font-weight:600}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scan{0%{transform:translateY(0)}to{transform:translateY(250px)}}@keyframes pulse{0%{box-shadow:0 0 #0ea5e92e;opacity:1}70%{box-shadow:0 0 0 12px #0ea5e900;opacity:.7}to{box-shadow:0 0 #0ea5e900;opacity:.5}}button:focus-visible{outline:3px solid rgba(14,165,233,.4);outline-offset:2px}@media(prefers-reduced-motion:reduce){.pay{transition:none}.spinner{animation:none}.qr:before,.qr:after{animation:none}}@media(max-width:520px){.card{padding:22px}.meta{grid-template-columns:1fr}.qr{width:200px;height:200px}}@media(max-width:680px){.page{padding:18px}.card{width:min(520px,100%);gap:16px}.header{flex-direction:column;align-items:flex-start}.badge{align-self:flex-start}.summary{padding:14px}.amount .value{font-size:1.6rem}.steps{gap:8px}}@media(max-width:420px){.card{padding:18px}.logo{width:40px;height:40px;border-radius:12px;font-size:.8rem}h1{font-size:1.35rem}.amount .value{font-size:1.4rem}.qr{width:180px;height:180px}.qr-grid{width:120px;height:120px;background-size:9px 9px}.pay,.secondary{width:100%}.receipt{padding:14px}}