:root{--ink: #14213d;--ink-soft: #3d4a63;--muted: #6b7280;--line: #e5e7eb;--surface: #ffffff;--bg: #f3f5f8;--accent: #0f766e;--accent-hover: #0d5f59;--accent-soft: #ccfbf1;--danger: #b91c1c;--danger-soft: #fef2f2;--warn: #c2610c;--warn-soft: #fff7ed;--radius: 12px;--shadow: 0 18px 50px rgba(20, 33, 61, .08);--font: "DM Sans", system-ui, sans-serif;--display: "Source Serif 4", Georgia, serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font);color:var(--ink);background:radial-gradient(1200px 500px at 10% -10%,#dbeafe 0%,transparent 55%),radial-gradient(900px 400px at 100% 0%,#ccfbf1 0%,transparent 50%),var(--bg)}button,input{font:inherit}.page{min-height:100vh;display:flex;flex-direction:column;padding:20px 16px 32px}.topbar{max-width:980px;width:100%;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px}.topbar-brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--display);font-size:1.2rem;font-weight:700}.merchant-logo{width:38px;height:38px;flex-shrink:0;border-radius:10px;object-fit:contain;background:var(--surface);border:1px solid var(--line)}.brand-text{display:flex;flex-direction:column;min-width:0}.brand-text strong{font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.secured{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:.78rem;font-weight:600}.countdown{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);box-shadow:0 4px 14px #14213d0f;transition:background .3s ease,color .3s ease,border-color .3s ease}.countdown-label{font-size:.78rem;color:inherit;opacity:.85}.countdown-value{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.02rem;letter-spacing:.02em}.countdown.warning{background:var(--warn-soft);border-color:#fdba74;color:var(--warn)}.countdown.critical{background:var(--danger-soft);border-color:#fca5a5;color:var(--danger);animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{box-shadow:0 0 #b91c1c40}50%{box-shadow:0 0 0 6px #b91c1c00}}.urgency-banner{max-width:980px;width:100%;margin:0 auto 14px;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px;border:1px solid #fdba74;background:var(--warn-soft);color:var(--warn);font-size:.9rem;font-weight:600}.test-banner{max-width:980px;width:100%;margin:0 auto 14px;padding:10px 16px;border-radius:10px;border:1px solid #99f6e4;background:var(--accent-soft);color:var(--accent-hover);font-size:.9rem}.shell{max-width:980px;width:100%;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow);overflow:hidden;animation:shell-in .25s ease-out}@keyframes shell-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:560px}@media(max-width:820px){.grid{grid-template-columns:1fr}}.panel{padding:32px 28px}.panel-left{background:linear-gradient(165deg,#f8fafc,#eef6f4);border-right:1px solid var(--line)}@media(max-width:820px){.panel-left{border-right:none;border-bottom:1px solid var(--line)}}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}h1{margin:0 0 8px;font-family:var(--display);font-size:1.65rem;line-height:1.2;letter-spacing:-.02em}.lead{margin:0 0 24px;color:var(--ink-soft);line-height:1.5}.amount-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px}.amount-card .label{color:var(--muted);font-size:.85rem;margin-bottom:4px}.amount-card .value{font-family:var(--display);font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}.method-chip{margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#f1f5f9;border:1px solid var(--line);color:var(--ink-soft);font-size:.83rem;font-weight:600}.qr-card{margin-bottom:18px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:10px}.qr-card small{color:var(--muted)}.qr-frame{position:relative;display:inline-flex;padding:10px;background:#fff;border-radius:10px}.qr-card.expired .qr-frame svg{filter:grayscale(1);opacity:.28}.qr-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--danger);text-transform:uppercase;letter-spacing:.12em;transform:rotate(-12deg)}.detail-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.detail-row{background:#ffffffb8;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center}.detail-row .meta{min-width:0}.detail-row .meta small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:2px}.detail-row .meta strong{display:block;font-size:.98rem;word-break:break-word}.copy-btn{flex-shrink:0;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.copy-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.copy-btn:disabled{opacity:.45;cursor:not-allowed}.field{margin-bottom:16px}.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px}.field input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0f766e1f}.field input:disabled{background:#f9fafb;color:var(--muted)}.dropzone{border:1.5px dashed #cbd5e1;border-radius:12px;padding:28px 16px;text-align:center;background:#fafbfc;color:var(--ink-soft);cursor:pointer;transition:border-color .15s ease,background .15s ease}.dropzone:hover,.dropzone.active{border-color:var(--accent);background:var(--accent-soft)}.dropzone.disabled{opacity:.55;cursor:not-allowed}.dropzone strong{display:block;color:var(--ink);margin-bottom:4px}.dropzone small{color:var(--muted)}.file-chip{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;font-weight:600}.confirm-btn{width:100%;margin-top:8px;border:none;border-radius:12px;padding:14px 16px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;transition:background .15s ease,transform .05s ease}.confirm-btn:hover:not(:disabled){background:var(--accent-hover)}.confirm-btn:active:not(:disabled){transform:translateY(1px)}.confirm-btn:disabled{background:#94a3b8;cursor:not-allowed}.state-card{max-width:520px;width:100%;margin:64px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 28px;text-align:center;animation:shell-in .25s ease-out}.state-card h1{font-size:1.5rem}.state-card p{color:var(--ink-soft);line-height:1.55}.state-card.ok h1{color:var(--accent)}.state-card.bad h1{color:var(--danger)}.state-icon{width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%}.state-icon.ok{background:var(--accent-soft);color:var(--accent)}.state-icon.danger{background:var(--danger-soft);color:var(--danger)}.state-amount{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--ink)!important}.state-amount-note{font-family:var(--font);font-size:.9rem;font-weight:500;color:var(--muted)}.retry-btn{display:inline-block;margin-top:12px;padding:12px 22px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;transition:background .15s ease}.retry-btn:hover{background:var(--accent-hover)}.error-banner{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-size:.9rem}.hint{margin-top:12px;display:flex;align-items:flex-start;gap:6px;color:var(--muted);font-size:.82rem;line-height:1.4}.hint svg{flex-shrink:0;margin-top:2px}.page-footer{max-width:980px;width:100%;margin:22px auto 0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:.8rem}.skeleton{display:block;border-radius:8px;background:linear-gradient(90deg,#eceff3 25%,#f6f8fa,#eceff3 75%);background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sk-circle{width:38px;height:38px;border-radius:10px;flex-shrink:0}.sk-line{height:12px;margin-bottom:6px}.sk-title{height:26px;width:70%;margin:10px 0 12px}.sk-pill{width:150px;height:38px;border-radius:999px}.sk-block{width:100%;margin-top:14px;border-radius:var(--radius)}