/* Local refinement of the approved light and compact dark concepts. */
.page-swap {
 --gutter:max(32px,calc((100vw - 1460px)/2));
 --wall:#cbd5c7;--plate:#e4eadc;--ink:#132a1d;--mute:#536b59;
 --line:#26452c24;--lime:#d2ef87;
 background:var(--wall);
}
[data-theme=dark] .page-swap {
 --wall:#0f1913;--plate:#19291f;--ink:#e6eddf;--mute:#a7b5a3;
 --line:#9ab58c2b;--lime:#d0ee87;
}
.page-swap .site-header {
 height:82px;min-height:82px;padding:0 var(--gutter);gap:20px;
 display:flex;align-items:center;border-bottom:1px solid var(--line);
}
.page-swap .wordmark {font-size:32px;letter-spacing:-1.8px;gap:4px}
.page-swap .wordmark .brand-dot {font-size:23px;margin-left:2px}
.page-swap .flw-chip {min-height:44px;padding:10px 13px;gap:8px}
.page-swap .site-header nav {
 margin-left:auto;flex:none;gap:2px;padding:4px;
 border:1px solid var(--line);background:#e6ecdf55;
}
.page-swap .site-header nav a {padding:10px 14px;font-size:13px;line-height:1.25}
.page-swap .header-social {gap:8px;margin:0}
.page-swap .header-social a {width:44px;height:44px;min-height:44px;padding:10px}
.page-swap .header-actions {gap:10px;flex:none;margin:0}
.page-swap .network {font-size:11px;gap:7px}
.page-swap .theme-toggle {width:44px;height:44px;min-height:44px;padding:10px}
.page-swap .site-header .button.small {min-height:44px;padding:11px 17px;font-size:12px}
[data-theme=dark] .page-swap .site-header nav {background:transparent;border-color:transparent}
[data-theme=dark] .page-swap .site-header nav a:hover {background:#9ab58c12;color:var(--ink)}
.page-swap .hero {
 max-width:none;margin-inline:auto;padding:40px var(--gutter) 48px;
 grid-template-columns:minmax(0,1fr) clamp(390px,32vw,460px);
 column-gap:clamp(36px,4vw,64px);row-gap:20px;align-items:start;
}
.page-swap .hero-left {align-self:stretch;min-width:0}
.page-swap .hero-copy {max-width:790px;order:0;padding-top:5px}
.page-swap .hero-copy h1 {
 font-size:clamp(60px,5.3vw,90px);font-weight:760;line-height:.99;
 letter-spacing:-.055em;margin:22px 0 28px;text-wrap:initial;
}
.page-swap .hero-copy .lede {font-size:17px;line-height:1.65;max-width:35em;color:var(--mute)}
.page-swap .browse-stocks {
 margin:28px 0 0;padding:12px 16px;gap:13px;min-height:68px;
 background:#e4eadca8;border:1px solid var(--line);border-radius:12px;
 box-shadow:inset 0 1px 0 #ffffff30;font-size:14px;
}
.page-swap .browse-stocks small {font-size:12px;line-height:1.5;margin-top:3px}
.page-swap .stock-discovery-icon {width:38px;height:38px;border-radius:9px;font-size:12px}
.page-swap .scene-hint {
 order:3;margin:14px 0 0;font:10px/1.6 'Fragment Mono',monospace;
 color:var(--mute);gap:9px;flex:none;
}
.page-swap .scene {
 order:2;width:100%;height:auto;aspect-ratio:2.78;
 min-height:0;margin:28px 0 0;flex:none;
}
.page-swap .scene-bottom,.page-swap .asset-label {display:none}
.page-swap .path-label {
 padding:9px 12px;gap:5px;max-width:210px;border-radius:10px;
 background:#e9efdfeb;border:1px solid #6f896428;
 box-shadow:0 5px 16px #1c382708;color:var(--ink);
}
.page-swap .path-label:disabled {opacity:1}
.page-swap .path-label>span {font-size:10px}
.page-swap .path-label b:empty {display:none}
.page-swap .trade-panel {
 margin:0;max-width:none;width:100%;padding:28px;border-radius:20px;
 background:linear-gradient(140deg,#edf1e45e,transparent 65%),var(--plate);
 border:1px solid #f4f7ef80;box-shadow:0 12px 36px #18302308;
}
.page-swap .trade-panel .trade-head {margin-bottom:18px;min-height:36px}
.page-swap .trade-head .mono {font-size:11px;letter-spacing:.1em}
.page-swap .icon-button {width:40px;height:40px;border-radius:11px;padding:10px}
.page-swap .trade-panel .amount-card {
 padding:16px 18px;background:#ced9c6a3;border:1px solid #73876830;border-radius:13px;
}
.page-swap .trade-panel .receive-card {background:#d5dfcdb8}
.page-swap .field-top,.page-swap .field-bottom {font-size:12px;line-height:1.5}
.page-swap .field-top {min-height:20px}
.page-swap .field-top #load-balance {font-size:12px}
.page-swap .trade-panel .amount-row {margin:12px 0;min-height:43px;gap:16px}
.page-swap .amount-row input,.page-swap .amount-row>strong {
 font-size:clamp(28px,8.5cqi,38px);font-weight:550;letter-spacing:-.045em;line-height:1.2;
}
.page-swap .amount-row input:focus {background:transparent}
.page-swap .token-button {padding:6px 10px;gap:8px;min-height:40px;background:#eef3e6;border-color:#b4c4a738;font-size:14px}
.page-swap .token-icon {width:28px;height:28px;font-size:17px}
.page-swap .reverse-row {height:48px;gap:12px}
.page-swap .reverse-row button {width:auto;height:34px;min-height:34px;min-width:88px;padding:6px 14px;border-radius:24px;font-size:12px}
.page-swap .reverse-row span {width:36px}
.page-swap .routes-heading {margin:28px 0 10px}
.page-swap .routes-heading h2 {font-size:15px;line-height:1.4}
.page-swap .routes-heading>span {font-size:9px}
.page-swap .ranking-switch {margin:0 0 10px;padding:4px;border-radius:10px;gap:4px}
.page-swap .ranking-switch button {min-height:38px;font-size:13px}
.page-swap .route-empty {padding:15px 0;font-size:13px;line-height:1.65}
.page-swap .trade-panel .route-options {max-height:300px}
.page-swap .trade-detail {margin:14px 0;font-size:12px}
.page-swap .trade-detail button {min-height:40px;font-size:12px}
.page-swap .trade-panel .button.full {min-height:52px;border-radius:11px;font-size:14px;justify-content:center}
.page-swap .trade-panel .preview-note {margin-top:16px;min-height:0;font:11px/1.65 Archivo,Arial,sans-serif;color:var(--mute)}
.page-swap .preview-note.error {color:var(--negative,#983c26)}
.page-swap .swap-supplement {grid-column:2;min-width:0;padding:0 8px}
.page-swap .swap-supplement .route-shortcuts {margin:0;padding:0;border:0}
.page-swap .swap-supplement .coverage-panel {margin-top:8px}
.page-swap .snapshot:empty,.page-swap .watchlist:empty {display:none}
[data-theme=dark] .page-swap .browse-stocks {background:linear-gradient(135deg,#22392b70,#19291f);box-shadow:inset 0 1px 0 #dce9d507}
[data-theme=dark] .page-swap .path-label {background:#1d3023ed;border-color:var(--line);box-shadow:0 4px 14px #0002}
[data-theme=dark] .page-swap .path-label.active {border-color:#7da2ff7a}
[data-theme=dark] .page-swap .trade-panel {
 padding:28px;border-radius:18px;border-color:var(--line);
 background:linear-gradient(135deg,#22372a45,transparent 65%),#18271e;
 box-shadow:inset 0 1px 0 #b6cba805,0 12px 40px #0000000c;
}
[data-theme=dark] .page-swap .trade-panel .amount-card {background:#11211788;border-color:var(--line)}
[data-theme=dark] .page-swap .token-button {background:#13291b;border-color:#a6c19620}
[data-theme=dark] .page-swap .reverse-row button {background:#1d3023a6;border-color:var(--line)}
[data-theme=dark] .page-swap .ranking-switch {background:#10201788}
[data-theme=dark] .page-swap .ranking-switch button[aria-pressed=true] {background:#344b2c}

@media(min-width:1101px) and (max-width:1500px) {
 .page-swap .site-header {gap:14px}
 .page-swap .site-header .network {display:none}
 .page-swap .site-header nav a {padding-inline:10px}
 .page-swap .site-header nav a[href^="#"] {display:inline-block}
 .page-swap .wordmark {font-size:30px}
 .page-swap .hero,[data-theme=dark] .page-swap .hero {gap:28px 36px;grid-template-columns:minmax(0,1fr) clamp(380px,32vw,460px)}
 .page-swap .hero-copy .lede {font-size:15px}
 .page-swap .trade-panel,[data-theme=dark] .page-swap .trade-panel {padding:24px}
}
@media(min-width:801px) and (max-width:1100px) {
 .page-swap .site-header {height:auto;padding-block:14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 18px}
 .page-swap .site-header .wordmark {grid-area:1/1}
 .page-swap .site-header .flw-token {grid-area:1/2;justify-self:start}
 .page-swap .site-header .header-actions {grid-area:1/3}
 .page-swap .site-header nav {grid-area:2/1/3/3;margin:0;justify-self:start}
 .page-swap .site-header nav a[href^="#"] {display:inline-block}
 .page-swap .site-header .header-social {grid-area:2/3;justify-self:end}
 .page-swap .hero,[data-theme=dark] .page-swap .hero {grid-template-columns:minmax(0,1fr) 370px;gap:22px;padding-top:32px}
 .page-swap .hero-copy h1,[data-theme=dark] .page-swap .hero-copy h1 {font-size:clamp(46px,6vw,64px)}
 .page-swap .hero-copy .lede {font-size:14px}
 .page-swap .scene {aspect-ratio:2.25;margin-top:24px}
 .page-swap .trade-panel,[data-theme=dark] .page-swap .trade-panel {padding:20px}
 .page-swap .trade-panel .amount-card {padding:14px}
 .page-swap .path-label {max-width:150px;padding:7px 9px}
 .page-swap .path-label>span {font-size:9px}
}
@media(max-width:800px) {
 .page-swap {--gutter:24px}
 .page-swap .site-header {display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;gap:10px;padding:16px var(--gutter)}
 .page-swap .site-header .wordmark {grid-area:1/1;font-size:29px}
 .page-swap .site-header .header-actions {grid-area:1/2;gap:6px}
 .page-swap .site-header nav {grid-column:1/-1;grid-row:2;justify-self:stretch;margin:0;justify-content:center;padding:3px}
 .page-swap .site-header nav a {flex:1;text-align:center;padding:9px 12px;font-size:12px}
 .page-swap .site-header .flw-token {grid-area:3/1;margin:0;justify-self:start}
 .page-swap .site-header .header-social {grid-area:3/2;margin:0;justify-self:end}
 .page-swap .hero,[data-theme=dark] .page-swap .hero {grid-template-columns:minmax(0,1fr);gap:24px;padding:32px var(--gutter) 40px}
 .page-swap .hero-copy {padding:0}
 .page-swap .hero-copy h1,[data-theme=dark] .page-swap .hero-copy h1 {font-size:clamp(48px,9.5vw,76px);margin:18px 0 24px}
 .page-swap .hero-copy .lede {font-size:15px;max-width:37em}
 .page-swap .browse-stocks {margin-top:22px;min-height:64px}
 .page-swap .mobile-trade-link {display:inline-flex}
 .page-swap .scene {width:100%;height:auto;aspect-ratio:2.55;margin:24px 0 0;min-height:180px}
 .page-swap .scene-hint {font-size:9px;margin-top:18px}
 .page-swap .trade-panel,[data-theme=dark] .page-swap .trade-panel {padding:22px;max-width:600px;justify-self:center;border-radius:18px}
 .page-swap .swap-supplement {grid-column:1;max-width:600px;width:100%;justify-self:center}
 .page-swap .trade-panel .amount-card {padding:16px}
 .page-swap .reverse-row {height:52px}
 .page-swap .reverse-row button {min-height:40px}
 .page-swap .path-label {padding:6px 8px;max-width:150px}
 .page-swap .path-label>span {font-size:9px}
}
@media(max-width:440px) {
 .page-swap {--gutter:18px}
 .page-swap .site-header {gap:10px 8px}
 .page-swap .site-header .wordmark {font-size:25px;letter-spacing:-1.5px}
 .page-swap .wordmark .brand-dot {font-size:19px;width:7px}
 .page-swap .site-header .button.small {min-height:40px;padding:10px 12px;font-size:11px}
 .page-swap .theme-toggle {width:40px;height:40px;min-width:40px;min-height:40px;padding:10px}
 .page-swap .header-social {gap:6px}
 .page-swap .header-social a {width:40px;min-width:40px;height:40px;min-height:40px;padding:9px}
 .page-swap .flw-chip {min-height:40px;padding:9px 11px;gap:6px;font-size:11px}
 .page-swap .trade-panel,[data-theme=dark] .page-swap .trade-panel {padding:18px}
 .page-swap .field-top,.page-swap .field-bottom {font-size:11px}
 .page-swap .field-top #load-balance {font-size:11px}
 .page-swap .scene {min-height:174px}
 .page-swap .path-label {max-width:142px;padding:5px 7px}
 .page-swap .path-label>span {font-size:8px}
 .page-swap .path-label b {font-size:7px}
 .page-swap .scene-hint {font-size:8px}
 .page-swap .hero-copy h1,[data-theme=dark] .page-swap .hero-copy h1 {font-size:clamp(42px,11.8vw,52px)}
}
/* The compact list changes presentation, never the set of quoted routes. */
.page-swap .more-routes {width:100%;min-height:42px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:500 12px Archivo,Arial,sans-serif;margin:8px 0 4px;cursor:pointer}
.page-swap .more-routes:hover {background:var(--line)}
.page-swap .trade-panel .route-options:not(.expanded) {max-height:none;overflow:visible}
.page-swap .trade-panel .route-options.expanded {max-height:380px;overflow:auto}
.page-swap .trade-panel .route-option {padding:12px;gap:10px}
.page-swap .route-option .route-name {font-size:13px;line-height:1.35}
.page-swap .route-option .route-hop,.page-swap .route-option .route-gross {font-size:11px;line-height:1.45}
.page-swap .route-result strong {font-size:14px}
.page-swap .route-result .route-delta {display:block;color:var(--mute);font-size:10px;margin-top:5px}
.page-swap .trade-panel:not(.has-quotes) :is(.routes-heading,.ranking-switch) {display:none}
.page-swap .trade-panel:not(.has-quotes) .route-options .route-empty:not(.search-loading) {display:none}
@media(max-width:800px) {
 .page-swap .hero,[data-theme=dark] .page-swap .hero {display:flex;flex-direction:column;gap:20px;padding-top:20px}
 .page-swap .hero-left {display:contents}
 .page-swap .trade-panel {order:0;align-self:center}
 .page-swap .swap-supplement {order:1;align-self:center}
 .page-swap .hero-copy {order:2;width:100%;max-width:600px;align-self:center;margin-top:16px}
 .page-swap .hero-copy h1,[data-theme=dark] .page-swap .hero-copy h1 {font-size:clamp(40px,9vw,64px)}
 .page-swap .mobile-trade-link {display:none}
 .page-swap .scene {order:3;max-width:600px;align-self:center;margin-top:0}
 .page-swap .scene-hint {order:4;align-self:center;margin-top:0}
 .page-swap .trade-panel .route-options.expanded {max-height:420px;overscroll-behavior:contain}
 .page-swap .quick-tokens {flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
 .page-swap .quick-tokens button {flex:none}
 .page-swap .trade-panel:not(.has-quotes) .receive-card .amount-row {grid-template-columns:minmax(0,1fr) auto;min-height:40px}
 .page-swap .trade-panel:not(.has-quotes) .receive-card .token-button {grid-row:1;grid-column:2;max-width:none}
 .page-swap .trade-panel:not(.has-quotes) .receive-card .amount-row>strong {grid-row:1;grid-column:1}
}

/* Short laptop screens keep the primary action in view without scaling the page. */
@media(min-width:1101px) and (max-height:850px) {
 .page-swap .hero,[data-theme=dark] .page-swap .hero {padding-top:28px}
 .page-swap .hero-copy h1,[data-theme=dark] .page-swap .hero-copy h1 {font-size:clamp(60px,5.6vw,88px);margin:16px 0 20px}
 .page-swap .hero-copy .lede {font-size:15px}
 .page-swap .browse-stocks {margin-top:20px;min-height:60px;padding-block:10px}
 .page-swap .scene-hint {margin-top:14px}
 .page-swap .scene,[data-theme=dark] .page-swap .scene {margin-top:20px}
 .page-swap .trade-panel,[data-theme=dark] .page-swap .trade-panel {padding:22px}
 .page-swap .trade-panel .trade-head {margin-bottom:14px;min-height:34px}
 .page-swap .trade-panel .trade-head .icon-button {width:34px;height:34px;min-height:34px}
 .page-swap .trade-panel .amount-card {padding:12px 16px}
 .page-swap .trade-panel .amount-row,[data-theme=dark] .page-swap .trade-panel .amount-row {margin:8px 0;min-height:38px}
 .page-swap .reverse-row {height:42px}
 .page-swap .routes-heading {margin-top:20px}
 .page-swap .ranking-switch button {min-height:34px}
 .page-swap .route-empty {padding:8px 0}
 .page-swap .trade-detail {margin:10px 0}
 .page-swap .trade-panel .button.full {min-height:46px;padding:10px 14px}
 .page-swap .trade-panel .preview-note {margin-top:12px;font-size:10px}
}

/* Keep search/review close to the selected pair, ahead of the route list. */
.page-swap .trade-primary-actions {display:grid;gap:8px;margin:16px 0}
.page-swap .trade-primary-actions .route-review {margin-top:0}
.page-swap .trade-primary-actions .cancel-search {margin:0 auto}
.page-swap .trade-primary-actions .preview-note {margin:0;padding-top:2px}
.page-swap .trade-primary-actions .find-secondary {color:var(--ink);border-color:var(--line)!important}

/* Keep the wordmark clear of the wider network selector on small phones. */
@media(max-width:380px){.page-swap .site-header{padding-inline:14px;column-gap:6px}.page-swap .site-header .wordmark{font-size:22px;letter-spacing:-1.4px}}

/* Automatic quotes keep the primary action focused on reviewing the swap. */
#find-routes.auto-search-retry{border:0;background:none;color:var(--blue,#245adf);padding:10px;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#find-routes[hidden]{display:none}
#load-balance{font-variant-numeric:tabular-nums;text-align:right;max-width:70%;overflow-wrap:anywhere}
#load-balance:disabled{cursor:default;opacity:.65}

/* Shared USD equivalents for the Robinhood and multichain amount fields. */
.page-swap .swap-fiat {min-height:21px;margin:-3px 0 7px;color:var(--muted,var(--mute));font-size:14px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Keep the empty output action readable at the narrowest supported width. */
.page-swap .token-button.empty-token{max-width:none;padding:9px 13px}
.page-swap .token-button.empty-token strong{max-width:none;font-size:14px;overflow:visible;text-overflow:clip}
.page-swap #quick-tokens{flex-wrap:wrap;overflow:visible}