@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap";:root{--bg-color:#000;--panel-bg:#0d111c;--input-bg:#131a2a;--input-hover:#1b2236;--text-primary:#fff;--text-secondary:#98a1c0;--accent-color:#fb118e;--accent-soft:#fb118e1f;--accent-hover:#e30a7d;--border-color:#1c2436;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text-primary);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}body{background:radial-gradient(100% 100% at 50% 0%, #fb118e14 0%, transparent 100%), radial-gradient(50% 100% at 50% 100%, #2172e514 0%, transparent 100%), var(--bg-color);background-attachment:fixed;flex-direction:column;min-height:100vh;margin:0;display:flex;overflow-x:hidden}.navbar{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:16px 24px;display:flex}.nav-left{align-items:center;gap:32px;display:flex}.nav-logo{cursor:pointer;align-items:center;gap:12px;display:flex}.nav-links{color:var(--text-secondary);gap:8px;font-size:16px;font-weight:500;display:flex}.nav-links span{cursor:pointer;border-radius:12px;padding:8px 16px;transition:all .2s}.nav-links span:hover{color:var(--text-primary);background:#ffffff0a}.nav-links span.active{color:var(--text-primary)}.nav-right{align-items:center;gap:12px;display:flex}.network-selector{color:var(--text-primary);cursor:pointer;background-color:#0000;border:none;border-radius:16px;align-items:center;gap:8px;padding:8px 12px;font-size:16px;font-weight:600;transition:background-color .2s;display:flex}.network-selector:hover{background-color:#ffffff0a}.wallet-btn{background-color:var(--accent-soft);color:var(--accent-color);cursor:pointer;border:none;border-radius:18px;padding:10px 16px;font-size:16px;font-weight:600;transition:all .2s}.wallet-btn:hover{background-color:#fb118e33}.wallet-btn.connected{background-color:var(--input-bg);color:var(--text-primary)}.wallet-btn.connected:hover{background-color:var(--input-hover)}.main-layout{box-sizing:border-box;justify-content:center;align-items:flex-start;gap:32px;width:100%;max-width:1200px;margin:0 auto;padding:40px 24px;display:flex}.chart-panel{background-color:#0000;flex-direction:column;flex:1;height:600px;display:flex}.chart-header{align-items:center;gap:16px;margin-bottom:8px;display:flex}.chart-pair{align-items:center;gap:8px;font-size:24px;font-weight:600;display:flex}.chart-price{color:var(--text-primary);margin-bottom:4px;font-size:36px;font-weight:500}.chart-change{color:#4ade80;align-items:center;gap:4px;font-size:16px;font-weight:500;display:flex}.chart-container{flex:1;width:100%;margin-top:32px;position:relative}.swap-container{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:24px;flex-shrink:0;width:480px;padding:8px;box-shadow:0 4px 16px #0000001a,0 8px 32px #00000026}.swap-header{color:var(--text-secondary);justify-content:space-between;align-items:center;padding:12px 16px;font-size:16px;font-weight:500;display:flex}.swap-header-tabs{gap:16px;display:flex}.swap-header-tabs span{cursor:pointer;transition:color .2s}.swap-header-tabs span:hover,.swap-header-tabs .active{color:var(--text-primary)}.swap-settings-icon{cursor:pointer;color:var(--text-secondary);transition:color .2s}.swap-settings-icon:hover{color:var(--text-primary)}.input-container{background-color:var(--input-bg);border:1px solid #0000;border-radius:20px;margin-bottom:4px;padding:16px;transition:border .2s,background-color .2s;position:relative}.input-container:hover{border-color:#ffffff0d}.input-container:focus-within{border-color:var(--border-color);background-color:var(--bg-color)}.input-label-row{color:var(--text-secondary);justify-content:space-between;margin-bottom:12px;font-size:14px;display:flex}.input-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.input-row input{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;outline:none;width:100%;padding:0;font-family:inherit;font-size:36px}.input-row input::placeholder{color:#5d6785}.token-price-usd{color:var(--text-secondary);margin-top:8px;font-size:14px}.token-select{background-color:var(--panel-bg);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;border-radius:18px;flex-shrink:0;align-items:center;gap:8px;padding:4px 8px;font-size:20px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 12px #0000001a}.token-select.primary{background-color:var(--accent-color);color:#fff;border:none;padding:6px 12px}.token-select.primary:hover{background-color:var(--accent-hover)}.token-select:not(.primary):hover{background-color:var(--input-hover)}.token-logo{border-radius:50%;width:24px;height:24px}.arrow-divider{z-index:2;justify-content:center;margin:-18px 0;display:flex;position:relative}.arrow-divider button{background-color:var(--input-bg);border:4px solid var(--panel-bg);cursor:pointer;color:var(--text-secondary);border-radius:12px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.arrow-divider button:hover{background-color:var(--input-hover);color:var(--text-primary)}.swap-button{background-color:var(--accent-soft);width:100%;color:var(--accent-color);cursor:pointer;border:none;border-radius:20px;margin-top:8px;padding:16px;font-size:20px;font-weight:600;transition:all .2s}.swap-button.active{background-color:var(--accent-color);color:#fff}.swap-button:hover.active{background-color:var(--accent-hover)}.swap-button:disabled{opacity:.6;cursor:not-allowed}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{vertical-align:middle;margin-right:8px;animation:1s linear infinite spin}@media (width<=900px){.main-layout{flex-direction:column;align-items:center;gap:24px;padding:24px 16px}.chart-panel{order:2;width:100%;max-width:480px;height:400px}.swap-container{order:1;width:100%;max-width:480px}.nav-left{gap:16px}.nav-links,.gas-indicator{display:none}.network-selector{padding:8px;font-size:0}.network-selector img{margin:0}.network-selector svg{display:none}}@media (width<=480px){.input-row input{font-size:28px}.token-select{font-size:16px}}
