:root{--background-color:#f8f9fa;--container-background:#fff;--text-color:#212529;--secondary-text-color:#6c757d;--border-color:#e9ecef;--accent-color:#007bff;--color-green:#95d58d;--color-purple:#c9a8f4;--color-yellow:#fff8a3;--color-blue:#8ca2f5;--color-red:#ff8a8a;--color-orange:#ffc58a;--swap-primary:var(--color-blue);--swap-secondary:var(--color-yellow);--swap-accent:var(--color-green)}.swap-page{flex-direction:column;align-items:center;padding:2rem;display:flex}.swap-container{background-color:var(--container-background);border:2px solid var(--swap-secondary);border-radius:12px;width:100%;max-width:480px;padding:2rem;box-shadow:0 4px 12px #0000001a}.swap-header{text-align:center;margin-bottom:2rem}.swap-title{color:var(--text-color);font-size:1.5rem;font-weight:600}.swap-form{flex-direction:column;gap:1rem;display:flex}.swap-input-group{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;flex-direction:column;gap:.5rem;padding:1rem;display:flex;position:relative}.swap-input-header{color:var(--secondary-text-color);justify-content:space-between;margin-bottom:.5rem;font-size:.875rem;display:flex}.swap-token-selector{border:1px solid var(--border-color);background-color:var(--container-background);cursor:pointer;width:100%;color:var(--text-color);border-radius:4px;align-items:center;padding:.75rem;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.swap-token-selector:hover{border-color:var(--swap-primary);background-color:var(--background-color)}.token-icon{flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-right:.5rem;display:flex}.token-icon-image{border-radius:50%;width:100%;height:100%}.token-icon-fallback{background-color:var(--accent-color);width:100%;height:100%;color:var(--container-background);border-radius:50%;justify-content:center;align-items:center;font-weight:600;display:flex}.token-dropdown{position:relative}.token-dropdown-search{border-bottom:1px solid var(--border-color);padding:.5rem}.token-dropdown-search input{border:1px solid var(--border-color);border-radius:4px;width:100%;padding:.5rem}.token-dropdown-list{overflow:hidden auto}.token-dropdown-item{cursor:pointer;border-bottom:1px solid var(--border-color);text-overflow:ellipsis;white-space:nowrap;align-items:center;padding:.75rem .5rem;display:flex;overflow:hidden}.token-dropdown-item:last-child{border-bottom:none}.token-dropdown-item:hover{background-color:var(--background-color)}.token-dropdown-item .token-icon{flex-shrink:0;width:24px;height:24px;margin-right:.75rem}.token-dropdown-item-info{text-align:left;flex-direction:column;flex:1;min-width:0;display:flex}.token-dropdown-item-symbol{color:var(--text-color);text-align:left;font-weight:600}.token-dropdown-item-contract{color:var(--secondary-text-color);text-overflow:ellipsis;white-space:nowrap;text-align:left;min-width:0;font-size:.75rem;overflow:hidden}.token-dropdown-menu{background-color:var(--container-background);border:1px solid var(--swap-secondary);z-index:1000;box-sizing:border-box;border-radius:4px;flex-direction:column;width:100%;max-height:300px;margin-top:.25rem;display:flex;position:absolute;top:100%;left:0;overflow:hidden auto}.token-dropdown-item-top{background-color:#ffd7001a}.token-dropdown-item-top:hover{background-color:#ffd70033}.token-dropdown-item-top-badge{color:gold;margin-left:.5rem;font-size:.8rem}.swap-amount-input{border:1px solid var(--border-color);background-color:var(--container-background);width:100%;color:var(--text-color);box-sizing:border-box;border-radius:4px;padding:.75rem;font-size:1.25rem}.swap-amount-value{color:var(--secondary-text-color);text-align:right;margin-top:.25rem;font-size:.875rem}.swap-arrow-container{z-index:1;justify-content:center;display:flex;position:relative}.swap-arrow-icon{background-color:var(--container-background);cursor:pointer;z-index:10;width:36px;height:36px;color:var(--color-blue);justify-content:center;align-items:center;padding:0;transition:transform .2s;display:flex;position:relative}.swap-arrow-icon:hover{color:var(--color-purple);transform:scale(1.1)}.swap-route-selection{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem;padding:1rem}.swap-route-header{color:var(--secondary-text-color);margin-bottom:.5rem;font-size:.875rem;font-weight:600}.swap-route-options{flex-direction:column;gap:.5rem;display:flex}.swap-route-option{border:1px solid var(--border-color);cursor:pointer;background-color:var(--container-background);border-radius:4px;padding:.75rem;transition:all .2s}.swap-route-option:hover{border-color:var(--swap-primary);background-color:var(--background-color)}.swap-route-option.selected{border-color:var(--swap-primary);background-color:#c9a8f41a}.swap-route-info{color:var(--text-color);margin-bottom:.25rem;font-weight:600}.swap-route-details{color:var(--secondary-text-color);justify-content:space-between;font-size:.875rem;display:flex}.swap-route-amount{color:var(--text-color);font-weight:600}.swap-route-gas{color:var(--secondary-text-color)}.swap-percentage-buttons{justify-content:flex-end;gap:.5rem;margin-top:-.25rem;margin-bottom:.25rem;display:flex}.swap-percentage-button{background-color:var(--background-color);border:1px solid var(--border-color);cursor:pointer;color:var(--text-color);border-radius:4px;min-width:40px;padding:.25rem .5rem;font-size:.75rem;font-weight:600;transition:all .2s}.swap-percentage-button:hover{background-color:var(--swap-primary);color:#fff;border-color:var(--swap-primary)}.swap-percentage-button:active{transform:scale(.95)}.swap-settings{color:var(--secondary-text-color);justify-content:space-between;align-items:center;font-size:.875rem;display:flex}.swap-slippage-input{border:1px solid var(--border-color);background-color:var(--container-background);width:60px;color:var(--text-color);box-sizing:border-box;text-align:center;border-radius:4px;padding:.25rem;font-size:.875rem}.swap-auth-button{background-color:var(--color-blue);color:#fff;cursor:pointer;border:none;border-radius:4px;width:100%;margin-bottom:1rem;padding:.75rem;font-size:1rem;font-weight:600;transition:background-color .2s}.swap-auth-button:hover:not(:disabled){background-color:var(--color-purple)}.swap-auth-button:disabled{background-color:var(--border-color);cursor:not-allowed}.swap-button{background-color:var(--swap-primary);color:#fff;cursor:pointer;border:none;border-radius:4px;width:100%;margin-top:1rem;padding:1rem;font-size:1rem;font-weight:600;transition:background-color .2s}.swap-button:hover:not(:disabled){background-color:var(--color-blue);transform:translateY(-2px)}.swap-button:disabled{background-color:var(--border-color);cursor:not-allowed;transform:none}.swap-error{color:var(--color-red);text-align:center;background-color:#ff8a8a1a;border-radius:4px;margin-bottom:1rem;padding:.75rem}.swap-success{color:var(--color-green);text-align:center;background-color:#95d58d1a;border-radius:4px;margin-bottom:1rem;padding:.75rem}:root{--color-green:#95d58d;--color-purple:#c9a8f4;--color-yellow:#fff8a3;--color-blue:#8ca2f5;--color-red:#ff8a8a;--color-orange:#ffc58a}body,main{text-align:center;align-items:center;margin:0;padding:0}body{font-family:Inter,Avenir,Helvetica,Arial,sans-serif}header,section{width:700px;max-width:90%;min-height:100vh;margin:0;padding-top:100px;display:inline-block}nav{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#fff7a333;border-radius:10px;justify-content:space-between;align-items:center;width:700px;max-width:90%;padding:0 20px;display:flex;position:fixed;top:5px;left:50%;right:50%;transform:translate(-50%)}.card{border:1px solid var(--color-green);border-radius:8px;width:200px;height:200px;margin:2px;padding:16px;display:inline-block}.preview-container{pointer-events:none;width:100%;height:150px;color:var(--color-blue);justify-content:center;align-items:center;display:flex;overflow:hidden}.label-container{text-align:center}a{color:var(--color-blue);text-decoration:none}a:hover{color:var(--color-purple)}pre{width:900px;max-width:90%}footer{text-align:center}footer nav a{color:var(--color-blue);margin:5px;text-decoration:none}footer nav a:hover{color:var(--color-purple)}button{background-color:var(--color-blue);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:10px 20px;font-size:16px}button:hover{background-color:var(--color-purple)}