.token-selector .token-picker-trigger { position: absolute; inset: 0; width: 100%; padding: 0 22px 0 32px; border-radius: inherit; background: transparent; color: inherit; text-align: left; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-selector .token-caret { pointer-events: none; }
.token-selector .token-mark { position: relative; overflow: visible; }
.token-selector .selected-network-badge { position: absolute; bottom: -2px; right: -3px; width: 10px; height: 10px; border: 1px solid white; border-radius: 50%; background: #fff; }
.token-dialog { width: 448px; height: 654px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 0; border-radius: 24px; background: #f1f5f9; color: #101c31; overflow: hidden; --token-muted: #61748e; --token-white: #fff; --token-border: #dce6f1; }
.token-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.token-dialog::backdrop { background: #001d3280; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
html.token-modal-open { overflow: hidden; }
.token-dialog-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.token-dialog h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; line-height: 24px; font-weight: 900; }
.token-dialog h2 svg { width: 20px; height: 20px; color: #8ca4be; }
.token-dialog-close { padding: 0; width: 24px; height: 24px; color: var(--token-muted); background: transparent; font-size: 23px; line-height: 24px; font-weight: 400; }
.token-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--token-border); border-radius: 18px; padding: 0 16px; height: 48px; flex-shrink: 0; color: #8ca4be; }
.token-search:focus-within { border-color: #0081ff; }
.token-search input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; }
.token-search input::placeholder { color: #8ca4be; opacity: 1; }
.token-network-tabs { display: flex; gap: 6px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; padding: 1px; }
.token-network-tabs::-webkit-scrollbar { display: none; }
.token-network-tab { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 32px; border: 1px solid var(--token-border); border-radius: 99px; padding: 4px 9px; background: var(--token-white); color: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; }
.token-network-tab[aria-selected="true"] { border-color: #0081ff; color: #0081ff; }
.token-network-tab img { width: 20px; height: 20px; object-fit: contain; border-radius: 50%; }
.token-all-icons { display: flex; padding-left: 0; }
.token-all-icons img { border: 1px solid var(--token-white); }
.token-all-icons img + img { margin-left: -10px; }
.token-network-tab small { font-size: 10px; color: var(--token-muted); }
.token-results { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 14px; background: var(--token-white); scrollbar-width: thin; scrollbar-color: #999 transparent; }
.token-result { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.token-result:hover, .token-result:focus-visible { background: #eaf2fa; outline: none; }
.token-result-icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; }
.token-result-icon > img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.token-result-icon .token-network-badge { position: absolute; right: -3px; bottom: -2px; width: 13px; height: 13px; border: 2px solid var(--token-white); border-radius: 50%; background: var(--token-white); }
.token-fallback { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e7eef6; color: #61748e; font-size: 13px; font-weight: 800; }
.token-result-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.token-result-copy strong { font-size: 14px; line-height: 18px; font-weight: 800; overflow-wrap: anywhere; }
.token-result-copy small { color: var(--token-muted); font-size: 14px; line-height: 18px; overflow-wrap: anywhere; font-weight: 700; }
.token-route-note { margin-left: 8px; color: #0081ff; font-size: 11px; font-weight: 700; }
.token-load-more { display: block; width: max-content; margin: 4px auto 2px; padding: 5px 12px; border-radius: 9px; background: transparent; color: #0081ff; text-align: center; font-size: 14px; line-height: 18px; font-weight: 800; transition: width 140ms ease, margin 140ms ease, background-color 140ms ease; }
.token-load-more:hover, .token-load-more:focus-visible { width: 100%; margin: 4px 0 2px; background: #eef3f8; color: #0081ff; text-decoration: none; }
.token-picker-status { margin: 16px 8px; color: var(--token-muted); font-size: 14px; text-align: center; }
.token-dialog button:focus-visible { outline: 2px solid #0081ff; outline-offset: -2px; }
body.dark .token-dialog { background: #111e33; color: #eef4fa; --token-white: #1c2b42; --token-muted: #a3b5ce; --token-border: #2a3b54; }
body.dark .token-result:hover, body.dark .token-result:focus-visible { background: #2a3b54; }
@media (max-width: 480px) { .token-dialog { padding: 18px 14px; } }
@media (prefers-reduced-motion: no-preference) { .token-dialog[open] { animation: token-picker-enter 160ms ease-out; } @keyframes token-picker-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } }
body.dark .token-dialog { background: #1e293b; color: #f1f5f9; --token-white: #334155; --token-muted: #cbd5e1; --token-border: #334155; }
body.dark .token-result:hover, body.dark .token-result:focus-visible { background: #475569; }
body.dark .token-network-tab[aria-selected="true"], body.dark .token-load-more, body.dark .token-route-note { color: #2c7fff; }
body.dark .token-load-more:hover, body.dark .token-load-more:focus-visible { background: #475569; }
body.dark .token-fallback { background: #475569; color: #cbd5e1; }