:root{color:#f8fafc;background:radial-gradient(circle at top,#6366f140,#0000 30%),linear-gradient(#0b1020 0%,#111827 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}.page{place-items:center;min-height:100vh;padding:32px 16px;display:grid}.swap-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f172ae0;border:1px solid #94a3b82e;border-radius:28px;width:100%;max-width:460px;padding:24px;box-shadow:0 20px 60px #00000073,inset 0 1px #ffffff0a}.swap-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin:0 0 6px;font-size:12px}.swap-header h1{margin:0;font-size:28px;line-height:1.1}.status-pill{color:#86efac;white-space:nowrap;background:#22c55e24;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:600}.swap-form{flex-direction:column;gap:14px;display:flex}.panel{background:#1e293bb3;border:1px solid #94a3b829;border-radius:22px;padding:16px}.panel-top{color:#cbd5e1;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;display:flex}.usd-hint{color:#94a3b8;text-align:right;white-space:nowrap;font-size:13px}.panel-main{grid-template-columns:minmax(0,1fr) 148px;align-items:center;gap:12px;display:grid}.amount-input-wrap{flex-direction:column;width:100%;min-width:0;display:flex;overflow:hidden}.amount-input{cursor:pointer;color:#f8fafc;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;outline:none;width:100%;min-width:0;padding:8px 0;font-size:clamp(1.75rem,4vw,2.125rem);font-weight:700;line-height:1.1;overflow:hidden}.amount-input::placeholder{color:#64748b}.amount-input.readonly{color:#e2e8f0}.amount-preview{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;margin-top:6px;font-size:12px;overflow:hidden}.input-error{color:#fecaca}.token-select{width:100%;position:relative}.token-select-trigger{color:#f8fafc;cursor:pointer;background:linear-gradient(#334155f5,#1e293beb);border:1px solid #94a3b829;border-radius:18px;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px;transition:border-color .18s,transform .18s,box-shadow .18s;display:flex;box-shadow:inset 0 1px #ffffff08}.token-select-trigger:hover,.token-select-trigger.open{border-color:#60a5fa73;box-shadow:0 10px 24px #2563eb2e}.token-select-trigger-left{align-items:center;gap:10px;min-width:0;display:flex}.token-select-text{text-align:left;flex-direction:column;gap:4px;min-width:0;display:flex}.token-select-symbol{color:#f8fafc;font-size:15px;font-weight:700;line-height:1.1}.token-select-subtitle{color:#94a3b8;font-size:12px;line-height:1.2}.token-select-placeholder{color:#94a3b8;font-size:15px;font-weight:600}.token-select-chevron{color:#cbd5e1;flex-shrink:0;font-size:18px;transition:transform .18s}.token-select-chevron.rotate{transform:rotate(180deg)}.token-select-menu{z-index:30;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f172afa;border:1px solid #94a3b82e;border-radius:18px;max-height:260px;padding:8px;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow-y:auto;box-shadow:0 20px 40px #00000059}.token-option{color:#f8fafc;cursor:pointer;background:0 0;border:none;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:10px 12px;transition:background .16s,transform .16s;display:flex}.token-option:hover{background:#334155b8}.token-option.active{background:linear-gradient(135deg,#7c3aed38,#2563eb2e);border:1px solid #60a5fa2e}.token-option-left{align-items:center;gap:10px;min-width:0;display:flex}.token-option-check{color:#93c5fd;flex-shrink:0;font-size:14px;font-weight:800}.token-icon,.token-icon-fallback{width:28px;height:28px}.token-icon{object-fit:contain;background:#fff;border-radius:999px;flex-shrink:0}.token-icon-fallback{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);border-radius:999px;flex-shrink:0;place-items:center;font-size:12px;font-weight:700;display:grid}.swap-action-row{justify-content:center;margin:-2px 0;display:flex}.swap-icon-button{color:#fff;cursor:pointer;background:linear-gradient(#1d4ed8 0%,#2563eb 100%);border:1px solid #94a3b82e;border-radius:16px;width:48px;height:48px;font-size:22px;transition:transform .18s,box-shadow .18s;box-shadow:0 10px 24px #2563eb4d}.swap-icon-button:hover{transform:translateY(-1px);box-shadow:0 14px 28px #2563eb61}.helper-text{color:#94a3b8;margin:10px 0 0;font-size:13px}.error-text{color:#fca5a5;margin:10px 0 0;font-size:13px}.error-text.center{text-align:center;margin-top:-2px}.summary{background:#0f172ab3;border:1px solid #94a3b824;border-radius:18px;padding:14px 16px}.summary-row{color:#cbd5e1;justify-content:space-between;align-items:center;gap:12px;min-width:0;font-size:14px;display:flex}.summary-row+.summary-row{margin-top:10px}.submit-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);border:none;border-radius:18px;width:100%;margin-top:4px;padding:16px;font-size:16px;font-weight:700;transition:opacity .2s,transform .18s}.submit-button:hover:not(:disabled){transform:translateY(-1px)}.submit-button:disabled{opacity:.45;cursor:not-allowed}.link-row{justify-content:flex-end;width:100%;display:flex}.price-link{color:#fff;white-space:nowrap;background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);border-radius:12px;justify-content:center;align-items:center;padding:10px 14px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex;box-shadow:0 10px 24px #2563eb40}.price-link:hover{transform:translateY(-1px);box-shadow:0 14px 30px #7c3aed47}.price-link:focus-visible{outline-offset:2px;outline:2px solid #93c5fd}.modal-overlay{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#020617b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{background:linear-gradient(#0f172afa,#111827fa);border:1px solid #94a3b829;border-radius:24px;width:100%;max-width:420px;padding:24px;box-shadow:0 24px 64px #00000073,inset 0 1px #ffffff0a}.modal-card.completed{text-align:center}.modal-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin:0 0 8px;font-size:12px}.modal-title{color:#f8fafc;margin:0;font-size:26px;line-height:1.1}.modal-description{color:#cbd5e1;margin:12px 0 0;font-size:14px}.modal-summary{background:#1e293bb3;border:1px solid #94a3b824;border-radius:18px;margin-top:20px;padding:16px}.modal-summary-row{color:#cbd5e1;justify-content:space-between;gap:12px;font-size:14px;display:flex}.modal-summary-row strong{color:#f8fafc;text-align:right}.modal-summary-row+.modal-summary-row{margin-top:12px}.modal-actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;display:grid}.modal-actions.single{grid-template-columns:1fr}.modal-primary-button,.modal-secondary-button{cursor:pointer;border:none;border-radius:16px;width:100%;padding:14px 16px;font-size:15px;font-weight:700;transition:transform .18s,opacity .18s}.modal-primary-button{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%)}.modal-primary-button:hover:not(:disabled),.modal-secondary-button:hover:not(:disabled){transform:translateY(-1px)}.modal-primary-button:disabled,.modal-secondary-button:disabled{opacity:.5;cursor:not-allowed}.modal-secondary-button{color:#e2e8f0;background:#334155e6;border:1px solid #94a3b829}.success-badge{color:#fff;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);border-radius:999px;place-items:center;width:60px;height:60px;margin:0 auto 14px;font-size:28px;font-weight:800;display:grid;box-shadow:0 16px 32px #22c55e47}@media (width<=520px){.modal-card{border-radius:20px;padding:20px}.modal-title{font-size:22px}.modal-actions{grid-template-columns:1fr}.swap-card{border-radius:24px;padding:18px}.swap-header{align-items:flex-start}.swap-header h1{font-size:24px}.panel-main{grid-template-columns:1fr}.amount-input{font-size:28px}.panel-top,.summary-row{flex-wrap:wrap}.link-row{justify-content:stretch}.price-link{width:100%}}