:root{--dark: #111;--mid: #666;--light: #aaa;--faint: #e8e8e8;--bg: #f5f5f5;--card: #fff;--surface: #fafafa;--accent: #f14317;--accent-soft: rgba(241, 67, 23, .07);--font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;--r-card: 16px;--r-btn: 12px;--r-sm: 8px}*{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--dark);min-height:100%;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased}#app{width:100%;max-width:400px;padding:16px}.checkout-card{background:var(--card);border-radius:var(--r-card);padding:32px 28px;box-shadow:0 1px 2px #0000000a,0 4px 24px #0000000f}.brand-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:32px}.brand-name{font-size:15px;font-weight:700;color:var(--dark);letter-spacing:-.3px}.brand-tagline{font-size:12px;color:var(--light);margin-top:2px}.brand-tagline em{font-style:normal;color:var(--mid)}.amount-section{text-align:center;margin-bottom:28px}.amount-value{font-size:56px;font-weight:700;color:var(--dark);letter-spacing:-3px;line-height:1}.amount-currency{font-size:24px;font-weight:600;color:var(--light);letter-spacing:-.5px;vertical-align:super;margin-left:4px}.amount-meta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--mid)}.token-dot,.chain-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.token-logo{display:inline-flex;align-items:center;flex-shrink:0;line-height:0}.amount-value .token-logo svg{width:36px;height:36px}.amount-meta .token-logo svg{width:16px;height:16px}.meta-sep{color:var(--faint)}.chain-picker{margin-bottom:24px}.chain-picker-label{font-size:11px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.chain-picker-options{display:flex;gap:8px}.chain-option{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;background:var(--card);border:1.5px solid var(--faint);border-radius:var(--r-sm);cursor:pointer;transition:all .15s ease;font-family:var(--font);font-size:13px;font-weight:500;color:var(--mid)}.chain-option:hover{border-color:var(--light);color:var(--dark)}.chain-option.selected{border-color:var(--dark);color:var(--dark);font-weight:600}.recipient-section{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--surface);border:1px solid var(--faint);border-radius:var(--r-sm);margin-bottom:24px}.recipient-left{display:flex;align-items:center;gap:10px;min-width:0}.recipient-avatar{width:32px;height:32px;border-radius:50%;background:var(--dark);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.recipient-info{min-width:0}.recipient-label{font-size:11px;color:var(--light);margin-bottom:1px}.recipient-address{font-family:var(--mono);font-size:12px;color:var(--mid)}.recipient-ens{font-size:13px;font-weight:600;color:var(--dark);margin-bottom:1px}.copy-btn{background:none;border:1px solid var(--faint);color:var(--light);cursor:pointer;padding:6px;border-radius:var(--r-sm);transition:all .15s ease;flex-shrink:0;display:flex}.copy-btn:hover{color:var(--mid);border-color:var(--light)}.copy-btn.copied{color:var(--dark);border-color:var(--dark)}.sender-section{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border:1px solid var(--faint);border-radius:var(--r-sm);margin-bottom:8px}.sender-avatar{width:32px;height:32px;border-radius:50%;background:var(--card);border:1.5px solid var(--faint);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.transfer-arrow{text-align:center;color:var(--light);padding:4px 0;margin-bottom:8px}.action-area{margin-bottom:20px}.action-btn{width:100%;padding:14px;font-size:14px;font-weight:600;font-family:var(--font);color:#fff;background:var(--dark);border:none;border-radius:var(--r-btn);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.2px}.action-btn:hover:not(:disabled){background:#000}.action-btn:active:not(:disabled){transform:scale(.98)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.status-area{text-align:center;margin-bottom:20px;animation:fadeIn .2s ease}.status-title{font-size:14px;font-weight:600;color:var(--dark);margin-bottom:2px}.status-desc{font-size:12px;color:var(--light)}.result-area{text-align:center;padding:8px 0;animation:fadeIn .3s ease}.result-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;font-weight:700}.result-icon.success{background:var(--accent-soft);color:var(--accent)}.result-icon.success svg{width:20px;height:20px}.result-icon.muted{background:var(--surface);border:1px solid var(--faint);color:var(--light)}.result-title{font-size:18px;font-weight:700;color:var(--dark);margin-bottom:4px;letter-spacing:-.3px}.result-desc{font-size:13px;color:var(--light)}.explainer{background:var(--surface);border:1px solid var(--faint);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:20px;display:flex;gap:10px;align-items:flex-start;animation:fadeSlideIn .2s ease}.explainer-icon{font-size:14px;line-height:1;flex-shrink:0;margin-top:1px}.explainer-title{font-size:12px;font-weight:600;color:var(--dark);margin-bottom:2px}.explainer-text{font-size:12px;color:var(--mid);line-height:1.45}.error-box{background:var(--surface);border:1px solid var(--faint);border-radius:var(--r-sm);padding:12px 14px;margin-top:12px}.error-text{color:var(--mid);font-size:13px}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}.progress-bar{height:3px;background:var(--faint);border-radius:2px;margin-bottom:20px;overflow:hidden}.progress-fill{height:100%;background:var(--dark);border-radius:2px;width:0%;animation:progressPulse 2s ease-in-out infinite}.progress-fill.animating{transition:width 21s cubic-bezier(.1,.4,.2,1)}.progress-fill.instant{transition:width .4s ease}@keyframes progressPulse{0%,to{opacity:1}50%{opacity:.5}}.raw-status{font-size:11px;color:var(--light);font-family:var(--mono);text-align:center;margin-top:4px}.page-footer{text-align:center;padding:20px 0 8px;position:relative;z-index:10}.footer-powered{font-size:12px;color:var(--mid);letter-spacing:.2px}.footer-arkade{color:var(--dark);font-weight:600;display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--light);transition:all .15s ease;cursor:pointer;padding:6px 8px;margin:-6px -8px;border-radius:6px}.footer-arkade:hover{color:#000;text-decoration-color:var(--dark);background:#0000000d}.debug-toggle{background:none;border:none;color:var(--faint);cursor:pointer;padding:2px;display:flex;align-items:center;transition:color .15s ease;flex-shrink:0}.debug-toggle:hover{color:var(--light)}.debug-panel{margin-top:8px;background:var(--dark);border-radius:var(--r-sm);padding:12px;text-align:left;animation:fadeSlideIn .15s ease}.debug-title{font-size:10px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.debug-content{font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--light);white-space:pre-wrap;word-break:break-all;margin:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}