:root{--color-primary: #0066ff;--color-primary-hover: #0052cc;--color-action: #4a5568;--color-action-dark: #2d3748;--color-action-darker: #1a202c;--color-success: #00c853;--color-background: #f5f5f5;--color-surface: #ffffff;--color-text: #1a1a1a;--color-text-secondary: #666666;--color-border: #e0e0e0;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{overscroll-behavior-y:contain}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--spacing-md)}#app{width:100%;max-width:400px}.payment-container{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:0 2px 8px #00000014}.payment-topbar{display:flex;justify-content:flex-end;margin-bottom:var(--spacing-md)}.locale-switcher{display:inline-flex;align-items:center;max-width:100%;border:1px solid var(--color-border);border-radius:999px;background-color:var(--color-background);padding:2px}.locale-switcher-button{border:none;border-radius:999px;background:transparent;color:var(--color-text-secondary);font-size:12px;line-height:1.2;padding:6px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color .2s ease,background-color .2s ease}.locale-switcher-button:hover:not(:disabled){color:var(--color-primary)}.locale-switcher-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.locale-switcher-button.active{background-color:var(--color-primary);color:#fff}.locale-switcher-button:disabled{cursor:default}.payment-header{text-align:center;margin-bottom:var(--spacing-xl)}.merchant-name{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.payment-amount{font-size:48px;font-weight:700;color:var(--color-text)}.payment-amount .currency{font-size:24px;font-weight:500}.divider{height:1px;background-color:var(--color-border);margin:var(--spacing-lg) 0}.section-title{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.payment-methods{display:flex;flex-direction:column;gap:var(--spacing-sm)}.other-payment-section{margin-top:var(--spacing-xs)}.other-payment-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:1px solid var(--color-border);border-radius:var(--border-radius);font-size:14px;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.other-payment-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}.other-payment-toggle-arrow{font-size:18px;line-height:1;transition:transform .2s ease}.other-payment-toggle.open .other-payment-toggle-arrow{transform:rotate(90deg)}.other-payment-methods{margin-top:var(--spacing-xs);display:flex;flex-direction:column;gap:var(--spacing-sm)}.payment-method{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);cursor:pointer;transition:all .2s ease}.payment-method:hover{border-color:var(--color-primary);background-color:#f0f7ff}.payment-method:active{transform:scale(.98)}.payment-method.selected{border-color:var(--color-primary);background-color:#f0f7ff}.payment-method:disabled{border-color:var(--color-border);background-color:#f7f7f7;cursor:not-allowed;opacity:.56}.payment-method:disabled:hover{border-color:var(--color-border);background-color:#f7f7f7}.payment-method:disabled:active{transform:none}.method-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff}.method-icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit}.method-icon.basepay,.method-icon.myna,.method-icon.walletconnect,.method-icon.metamask{background:none}.method-info{flex:1}.method-name{font-size:16px;font-weight:600;color:var(--color-text)}.method-description{font-size:12px;color:var(--color-text-secondary);margin-top:2px}.method-arrow{color:var(--color-text-secondary);font-size:20px}.error-container{text-align:center;padding:var(--spacing-xl)}.error-icon{font-size:48px;margin-bottom:var(--spacing-md)}.error-message{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.basepay-page{padding:var(--spacing-lg)}.basepay-page .payment-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.back-button{align-self:flex-start;background:none;border:none;color:var(--color-primary);font-size:14px;cursor:pointer;padding:var(--spacing-xs) 0;margin-bottom:var(--spacing-sm)}.back-button:hover{text-decoration:underline}.page-title{font-size:24px;font-weight:700;color:var(--color-text)}.page-subtitle{font-size:14px;color:var(--color-text-secondary)}.payment-info{background-color:var(--color-background);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.info-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0}.info-row:not(:last-child){border-bottom:1px solid var(--color-border)}.info-row.highlight{padding:var(--spacing-md) 0}.info-label{font-size:14px;color:var(--color-text-secondary)}.info-value{font-size:14px;font-weight:600;color:var(--color-text)}.info-value.usdc-amount{font-size:20px;color:var(--color-primary)}.rate-note{font-size:12px;color:var(--color-text-secondary);text-align:center;margin-top:var(--spacing-sm)}.wallet-section{margin-bottom:var(--spacing-md)}.connect-button{width:100%;padding:var(--spacing-md);background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%);border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s ease}.connect-button:hover:not(:disabled){background:linear-gradient(135deg,var(--color-action-dark) 0%,var(--color-action-darker) 100%);box-shadow:0 4px 12px #4a556866}.connect-button:disabled{opacity:.6;cursor:not-allowed}.connected-wallet{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:#e8f5e9;border-radius:var(--radius-md);color:#2e7d32}.wallet-icon{font-size:16px}.wallet-text{font-size:14px;font-weight:500}.pay-button{width:100%;padding:var(--spacing-md);background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%);border:none;border-radius:var(--radius-md);font-size:18px;font-weight:700;color:#fff;cursor:pointer;transition:all .2s ease;margin-bottom:var(--spacing-md)}.pay-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #4a556866}.pay-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.network-info{text-align:center}.network-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background-color:#fff3e0;color:#e65100;font-size:12px;font-weight:500;border-radius:var(--radius-sm)}.success-page{text-align:center;padding:var(--spacing-xl)}.success-icon-container{margin-bottom:var(--spacing-lg)}.success-icon{font-size:80px;margin:0 auto;animation:scaleIn .3s ease}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.success-title{font-size:24px;font-weight:700;color:var(--color-text);margin-bottom:var(--spacing-xs)}.success-subtitle{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.success-details{background-color:var(--color-background);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);text-align:left}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0}.detail-row:not(:last-child){border-bottom:1px solid var(--color-border)}.detail-label{font-size:14px;color:var(--color-text-secondary)}.detail-value{font-size:14px;font-weight:600;color:var(--color-text)}.detail-value.tx-hash{font-family:monospace;font-size:12px}.detail-value.tx-status-pending{color:#f59e0b}.detail-value.tx-status-confirmed{color:#00c853;font-weight:700}.detail-value.tx-status-error{color:#ef4444;font-weight:700}.sse-error-banner{background:#fef2f2;color:#991b1b;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:14px;margin-bottom:var(--spacing-lg);text-align:center}.explorer-link{display:inline-block;color:var(--color-primary);text-decoration:none;font-size:14px;font-weight:500;margin-bottom:var(--spacing-lg)}.explorer-link:hover{text-decoration:underline}.success-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) 0;gap:var(--spacing-md)}.success-loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}.success-loading-text{font-size:14px;color:var(--color-text-secondary)}.walletconnect-page{padding:var(--spacing-lg)}.walletconnect-page .payment-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.wc-connect{background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%);color:#fff;border:none}.wc-connect:hover:not(:disabled){background:linear-gradient(135deg,var(--color-action-dark) 0%,var(--color-action-darker) 100%);border-color:transparent}.wc-pay{background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%)}.wc-pay:hover:not(:disabled){box-shadow:0 4px 12px #4a556866}.supported-wallets{text-align:center;font-size:12px;color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.chain-selector{margin:var(--spacing-md) 0}.chain-selector-title{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.chain-options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.chain-option{display:flex;align-items:center;padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease;background-color:var(--color-surface)}.chain-option:hover{border-color:var(--color-primary)}.chain-option.selected{border-color:var(--color-primary);background-color:#f0f7ff}.chain-option input[type=radio]{margin-right:var(--spacing-md);accent-color:var(--color-primary);width:18px;height:18px}.chain-option-content{display:flex;justify-content:space-between;align-items:center;flex:1}.chain-info{display:flex;align-items:center;gap:var(--spacing-sm)}.chain-name{font-weight:600;color:var(--color-text);font-size:14px}.token-badge{padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600}.token-usdc{background-color:#dbeafe;color:#1d4ed8}.token-jpyc{background-color:#fef3c7;color:#b45309}.token-amount{font-weight:700;color:var(--color-primary);font-size:14px}.chain-selector-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.chain-selector-content{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:90%;max-width:400px;max-height:80vh;overflow-y:auto}.chain-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.chain-selector-close{background:none;border:none;font-size:24px;color:var(--color-text-secondary);cursor:pointer}.chain-selector-close:hover{color:var(--color-text)}.continue-button{width:100%;padding:var(--spacing-md);background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%);border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s ease;margin-top:var(--spacing-md)}.continue-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #4a556866}.error-display-container{background-color:#fff3f3;border:1px solid #ffd6d6;border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);text-align:center}.error-display-icon{font-size:32px;margin-bottom:var(--spacing-sm)}.error-display-title{font-size:16px;font-weight:600;color:#d32f2f;margin-bottom:var(--spacing-xs)}.error-display-description{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-md);line-height:1.5}.error-help-text{font-size:12px;color:#d32f2f;margin-bottom:var(--spacing-md);font-weight:500}.error-code-tag{font-family:monospace;font-size:12px;color:#888;margin-top:8px;padding:2px 8px;background:#f5f5f5;border-radius:4px;display:inline-block}.retry-button{padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius-md);font-size:14px;font-weight:600;color:var(--color-primary);cursor:pointer;transition:all .2s ease}.retry-button:hover{background-color:var(--color-primary);color:#fff}.retry-button:active{transform:scale(.98)}.loading-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle;margin-right:var(--spacing-sm)}.connect-button .loading-spinner{border-color:#ffffff4d;border-top-color:#fff}@keyframes spin{to{transform:rotate(360deg)}}.rate-loading{text-align:center;padding:var(--spacing-md);color:var(--color-text-secondary);font-size:14px}.rate-warning{background-color:#fff8e1;border:1px solid #ffe082;border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);margin-top:var(--spacing-sm);font-size:12px;color:#f57c00;text-align:center}.tos-consent-container{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:0 2px 8px #00000014;text-align:center}.tos-consent-title{font-size:20px;font-weight:700;color:var(--color-text);margin-bottom:var(--spacing-md)}.tos-consent-description{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);line-height:1.5}.tos-terms-box{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);max-height:200px;overflow-y:auto;font-size:12px;color:var(--color-text-secondary);line-height:1.8;white-space:pre-wrap;text-align:left}.tos-checkbox-container{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);cursor:pointer}.tos-checkbox{width:20px;height:20px;accent-color:var(--color-primary);cursor:pointer}.tos-checkbox-label{font-size:14px;color:var(--color-text)}.tos-agree-button{width:100%;padding:var(--spacing-md);background-color:var(--color-primary);border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s ease}.tos-agree-button:hover:not(:disabled){background-color:var(--color-primary-hover)}.tos-agree-button:disabled{opacity:.5;cursor:not-allowed}.tos-error-message{display:none;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);background-color:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);color:#dc2626;font-size:14px;text-align:center}.tos-error-message.visible{display:block}.metamask-page{padding:var(--spacing-lg)}.metamask-page .payment-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.mm-connect{background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%);color:#fff;border:none}.mm-connect:hover:not(:disabled){background:linear-gradient(135deg,var(--color-action-dark) 0%,var(--color-action-darker) 100%);border-color:transparent}.mm-pay{background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%)}.mm-pay:hover:not(:disabled){box-shadow:0 4px 12px #4a556866}.metamask-note{text-align:center;font-size:12px;color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.myna-page{padding:var(--spacing-lg)}.myna-page .payment-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.myna-connect{background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%);color:#fff;border:none}.myna-connect:hover:not(:disabled){background:linear-gradient(135deg,var(--color-action-dark) 0%,var(--color-action-darker) 100%);border-color:transparent}.myna-pay{background:linear-gradient(135deg,var(--color-action) 0%,var(--color-action-dark) 100%)}.myna-pay:hover:not(:disabled){box-shadow:0 4px 12px #4a556866}.countdown-timer{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);background-color:var(--color-background);border-radius:var(--radius-md)}.countdown-label{font-size:13px;color:var(--color-text-secondary)}.countdown-time{font-size:20px;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums}.countdown-warning{color:#f44336;animation:pulse 1s ease-in-out infinite}.countdown-expired{color:#9e9e9e;animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.session-expired-message{background-color:#fff3f3;border:1px solid #ffd6d6;border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);text-align:center;color:#d32f2f;font-size:14px;font-weight:500}.session-cancelled-message{background-color:#fff8e1;border:1px solid #ffe082;border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);text-align:center;color:#f57f17;font-size:14px;font-weight:500}.menu-item-danger{color:#d32f2f;border-top:1px solid #eee;margin-top:4px}.menu-item-danger:hover{background:#fff5f5}.logout-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.logout-confirm-dialog{background:#fff;border-radius:12px;padding:24px 20px 20px;width:280px;box-shadow:0 8px 32px #0000002e}.logout-confirm-message{margin:0 0 20px;font-size:16px;font-weight:600;text-align:center;color:#1a1a1a}.logout-confirm-actions{display:flex;gap:10px}.logout-confirm-btn{flex:1;height:44px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;border:none}.logout-confirm-btn-cancel{background:#f0f0f0;color:#444}.logout-confirm-btn-cancel:hover{background:#e0e0e0}.logout-confirm-btn-confirm{background:#d32f2f;color:#fff}.logout-confirm-btn-confirm:hover{background:#b71c1c}.static-amount-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.static-amount-input-wrapper{display:flex;align-items:center;gap:var(--spacing-sm);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-surface);transition:border-color .2s ease}.static-amount-input-wrapper:focus-within{border-color:var(--color-primary)}.static-currency-prefix{font-size:24px;font-weight:500;color:var(--color-text-secondary);flex-shrink:0}.static-amount-input{border:none;outline:none;font-size:32px;font-weight:700;color:var(--color-text);background:transparent;width:100%;font-family:var(--font-family)}.static-amount-input::placeholder{color:var(--color-border);font-weight:400;font-size:18px}.static-amount-input::-webkit-outer-spin-button,.static-amount-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.static-amount-input[type=number]{-moz-appearance:textfield}.static-amount-error{font-size:13px;color:#d32f2f;min-height:20px}.static-submit-button{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);background-color:var(--color-primary);color:#fff;font-size:16px;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.static-submit-button:hover:not(:disabled){background-color:var(--color-primary-hover)}.static-submit-button:disabled{opacity:.4;cursor:not-allowed}