:root{color-scheme:light}.theme-toggle{background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:11px;white-space:nowrap}.header{gap:30px}.header-right{gap:12px}
html[data-theme=dark]{color-scheme:dark;--ink:#e4edf9;--muted:#aabbd0;--line:#344459;--blue:#9ebdff;--pale:#111a26;--green:#83d4b3;--white:#192638}
html[data-theme=dark] .page{background:none}
html[data-theme=dark] :is(.swap-card,dialog,.token-table,.detail-panel,.detail-side,.coverage-card,.coverage-stats>div,.bridge-route,.bridge-sources,.bridge-maestro,.bridge-tabs,.preview-token,.token-option,.status-toast){background:#192638;color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-theme=dark] :is(.field,.receive,.settings,.token,.reverse,.close,.secondary,.search-field,.filters button,.form-input,.review-exchange,.step-note,.detail-note,.route-error,.execution-note,.bridge-review,.bridge-progress,.bridge-chain-list li,.bridge-coverage,.bridge-state,.bridge-refresh,.slippage-options button,.table-head,.tag){background:#243449;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.table-row,.bridge-route .form-input){background:transparent;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.primary,.connect){background:#a8c6ff;color:#11243e}
html[data-theme=dark] :is(.filters button.selected,.slippage-options button.selected,.bridge-tabs [aria-selected=true],.route-choice.best){background:#304c70;color:#e8f1ff}
html[data-theme=dark] :is(.rwa-intro,.testnet-notice,.access-label,.coverage-badge.available){background:#203d37;color:#b6e5d1;border-color:#416759}
html[data-theme=dark] :is(.rwa-intro p,.rwa-network,.testnet-notice p){color:#b6e5d1}
html[data-theme=dark] :is(.error,.bridge-error,.quote-expiry.error,.summary-row strong.impact-high){color:#ffb6a5}
html[data-theme=dark] :is(.header,.nav,.footer,.bridge-tabs){border-color:var(--line)}
html[data-theme=dark] .settings circle{fill:#243449}
html[data-theme=dark] .table-row:hover:not(.table-head){background:#293d55}
html[data-theme=dark] :is(.bridge-hold,.pending .outcome-icon){background:#493c29;color:#f1d39c}
@media(max-width:1050px){.header{gap:18px;padding-left:20px;padding-right:20px}.nav{gap:17px}.header-right{gap:8px}.network{font-size:10px}}
@media(max-width:480px){.header{gap:10px}.header-right{flex-wrap:wrap;justify-content:flex-end}.header-right .network{display:none}.theme-toggle{font-size:10px;padding:8px}.connect{padding:9px}.nav{gap:20px}}
html[data-theme=dark] :is(h1 span,.field-bottom,.route-foot,.tiny-path-label,.under-card,.route-button,.browse-link,.source-links){color:#aebfd6}
html[data-theme=dark] :is(.summary,.route-panel,.exchange-rate){border-color:var(--line)}
/* Focus the trading entry screen on the amount, output and review. */
#swapView .layout{display:block;max-width:520px;margin:28px auto 12px;padding:0 20px}
#swapView .swap-card{padding:25px;border-radius:18px}
#swapView .card-head{margin-bottom:20px}
#swapView .card-head h1{font:600 23px/1.2 Manrope,sans-serif;letter-spacing:-.6px;margin:0}
#swapView .field{padding:15px 18px}
#swapView .amount{font-size:34px}
#swapView .summary{margin:12px 0;padding:8px 0}
#swapView .summary-row{padding:4px 0}
#swapView .exchange-rate{margin-top:15px;margin-bottom:8px}
#swapView .under-card{justify-content:center;gap:14px;padding:16px 0}
#payDecimals{display:none}
.swap-coverage,.swap-discover{max-width:480px;margin:0 auto 12px;border-top:1px solid var(--line);color:var(--muted)}
.swap-coverage>summary,.swap-discover>summary{cursor:pointer;padding:13px 4px;font-size:12px}
.swap-coverage .route-panel{display:block;padding:16px 4px;margin:0;border:0}
.swap-discover .explore-strip{padding:12px 4px;margin:0;max-width:none}
.swap-discover .section-heading .eyebrow{display:none}.swap-discover .section-heading h2{font-size:20px}.swap-discover .token-preview{grid-template-columns:1fr 1fr}
@media(max-width:540px){#swapView .layout{padding:0 14px;margin-top:16px}#swapView .swap-card{padding:18px}.swap-coverage,.swap-discover{margin-left:18px;margin-right:18px}}
#swapView .quote-details>summary{font-size:12px;color:var(--muted);cursor:pointer;padding:10px 0}
#swapView .quote-details{border-top:1px solid var(--line);margin:8px 0 14px}
#swapView .field-bottom{display:none}
#swapView .amount{font-size:40px;letter-spacing:-1.3px}
#swapView .field{padding:18px}
#swapView .disclosure{margin:14px 0 0;font-size:10px}
#swapView .under-card{padding:8px 0}
#swapView .primary[hidden]{display:none}
body:has(#swapView:not([hidden])) .network-banner{display:none}
body:has(#swapView:not([hidden])) .header{border-bottom:0;padding-top:22px;padding-bottom:18px}
body:has(#swapView:not([hidden])) .nav a[data-nav=portfolio],body:has(#swapView:not([hidden])) .nav a[data-nav=coverage]{display:none}
body:has(#swapView:not([hidden])) .footer{margin-top:32px}
#swapView .layout{margin-top:32px}
/* Route reference: a compact standalone trading card and quiet footer. */
body:has(#swapView:not([hidden])) .header{height:50px;padding:12px 22px;max-width:none}
body:has(#swapView:not([hidden])) .header :is(.brand,.nav,.network){display:none}
body:has(#swapView:not([hidden])) .header-right{margin-left:0}
body:has(#swapView:not([hidden])) .theme-toggle{border:0;background:transparent}
#swapView .layout{max-width:420px;padding:0 10px;margin:14px auto 50px}
#swapView .swap-card{padding:12px;border-radius:24px;box-shadow:0 12px 24px #0000000d}
#swapView .card-head{padding:6px 10px;margin-bottom:12px}
.compact-brand{display:flex;align-items:center;gap:15px}.compact-brand>span{font:650 18px Manrope,sans-serif;letter-spacing:-.9px}#swapView .compact-brand h1{font:400 14px "DM Sans",sans-serif;padding:7px 10px;background:var(--pale);border-radius:9px;letter-spacing:0}
#swapView .field{min-height:174px;padding:20px 16px;border-radius:17px}
#swapView .field-main{margin:22px 0 12px}
#swapView .amount{font-size:43px;font-weight:400}
#swapView .token{padding:9px 12px;border:1px solid var(--line)}
#swapView .reverse{width:40px;height:40px;border-radius:12px}
#swapView .primary,#swapView #connect{min-height:56px;border-radius:17px}
#swapView #connect{display:block;width:100%;margin-top:10px;font-size:14px;text-align:left;padding:16px 20px}
#swapView .disclosure{font-size:10px;margin:10px 0 2px;text-align:center}
#swapView .under-card{display:none}
body.wallet-disconnected #swapView :is(#quoteButton,#reviewButton,.exchange-rate,.quote-details){display:none}
body:not(.wallet-disconnected) #swapView #connect{min-height:0;background:transparent;color:var(--muted);font-size:11px;padding:8px;text-align:center}
body:has(#swapView:not([hidden])) .footer{border:0;margin-top:0;padding:24px 4vw;flex-wrap:wrap;gap:15px;font-size:11px}
body:has(#swapView:not([hidden])) .footer>span:first-child{display:none}
@media(max-width:480px){#swapView .layout{margin-top:8px;padding:0 16px}.header-right{flex-wrap:nowrap}.footer-links{flex-wrap:wrap;gap:14px}}
.trade-tabs{display:flex;align-items:center;gap:6px;width:400px;max-width:calc(100% - 32px);margin:14px auto 0;padding:0 12px}.trade-tabs a{font-size:13px;padding:8px 12px;color:var(--muted);border-radius:9px}.trade-tabs a.active{background:var(--white);color:var(--ink)}.trade-tabs a:nth-child(3){margin-left:auto}.shared-wallet{max-width:400px;margin:0 auto 24px;padding:0 12px}.shared-wallet #connect{display:block;width:100%;min-height:52px;border-radius:15px;font-size:14px}.wallet-disconnected #swapView .layout{margin-bottom:10px}body:not(.wallet-disconnected) .shared-wallet #connect{background:transparent;color:var(--muted);min-height:32px;font-size:12px}#swapView .layout{margin-top:8px;margin-bottom:10px}
#sidePanel{position:fixed;inset:0 0 0 auto;margin:0;width:min(720px,100%);max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:24px;overflow-y:auto}#sidePanel::backdrop{background:#08132080;backdrop-filter:blur(3px)}.panel-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.panel-heading h2{margin:0;font-size:20px}#panelViews .content-view{padding:24px 0;max-width:100%;margin:0}#panelViews h1{font-size:28px}#panelViews .eyebrow{display:none}#panelViews .token-detail-layout{display:block}#panelViews .detail-side{margin-top:18px}
body[data-trade-mode=bridge] .header :is(.brand,.nav,.network){display:none}body[data-trade-mode=bridge] .header{height:50px;border:0;padding:12px 22px;max-width:none}body[data-trade-mode=bridge] .header-right{margin-left:0}body[data-trade-mode=bridge] .network-banner{display:none}
#bridgeView{max-width:440px;padding:12px 20px;margin:0 auto}#bridgeView .bridge-layout{display:block}#bridgeView .bridge-heading{margin:0}#bridgeView .bridge-heading>div{display:none}#bridgeView .bridge-tabs{width:100%;margin:0 0 12px}#bridgeView .bridge-tabs button{flex:1;padding:10px;font-size:12px}#bridgeView .bridge-tabs button span{display:none}#bridgeView .bridge-route{padding:20px}#bridgeView .bridge-side{margin-top:14px}#bridgeView .bridge-side .bridge-sources{padding:16px}#bridgeView .bridge-side .bridge-sources:last-child{display:none}#bridgeView .bridge-coverage{display:none}#bridgeView .bridge-docs{display:block;font-size:11px;padding:12px 0}#bridgeView .bridge-docs span{display:block;margin-top:8px}
@media(max-width:540px){#sidePanel{padding:18px}#panelViews .table-row{padding:12px 8px}.trade-tabs a{padding:8px 10px}}
/* Shared mobile-first geometry for trading and account panels. */
.trade-tabs{width:400px;padding:0 8px}.trade-tabs a{min-height:44px;display:flex;align-items:center;justify-content:center}
.theme-toggle,.close{min-height:44px;min-width:44px}
#bridgeView{width:100%;max-width:420px;padding:8px 10px;margin:0 auto}
#bridgeView .bridge-view{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:12px}
#bridgeView .bridge-heading{padding:6px 10px 14px;gap:10px;align-items:center}
#bridgeView .bridge-heading>div{display:block}
#bridgeView .bridge-heading :is(.eyebrow,.lede){display:none}
#bridgeView .bridge-heading h1{font:600 21px/1.3 Manrope,sans-serif;margin:0;letter-spacing:-.5px}
#bridgeView .bridge-state{font-size:10px;white-space:normal}
#bridgeView .bridge-route{border:0;background:transparent;padding:6px 4px;border-radius:0}
#bridgeView .bridge-route-heading{gap:8px;flex-wrap:wrap}
#bridgeView .bridge-route-heading h2{font-size:15px}
#bridgeView .bridge-journey{padding:20px 0;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)}
#bridgeView :is(input,select){min-height:48px;font-size:16px;width:100%;max-width:100%}
#bridgeView button{min-height:44px}
#bridgeView .bridge-tabs{border-radius:12px}
#bridgeView .bridge-side{border-top:1px solid var(--line);margin-top:16px}
#bridgeView .bridge-side>summary{cursor:pointer;padding:14px 4px;font-size:12px;color:var(--muted)}
#bridgeView .bridge-side .bridge-sources{padding:10px 4px;background:transparent;border:0}
#bridgeView .bridge-side .bridge-sources h2{font-size:15px}
#bridgeView .bridge-side .bridge-sources:last-child{display:block}
#bridgeView .bridge-docs{border-top:1px solid var(--line);margin-top:10px;padding:12px 4px 0}
#bridgeView .bridge-docs span{display:none}
#sidePanel{width:min(420px,100%);padding:18px;overscroll-behavior:contain}
#sidePanel .panel-heading{position:sticky;top:-18px;background:var(--white);z-index:2;padding:12px 0}
#panelViews .content-view{padding:16px 0}
#panelViews .content-view>.eyebrow,#panelViews .section-heading .eyebrow{display:none}
#panelViews :is(#discoverView,#portfolioView)>h1,#panelViews #discoverView .section-heading h1{display:none}
#panelViews :is(.lede,.data-note){font-size:12px;line-height:1.6}
#panelViews .search-field input{font-size:16px;min-height:48px;min-width:0}
#panelViews .filters{display:flex;overflow-x:auto;flex-wrap:nowrap;padding:5px 0 10px;gap:6px}
#panelViews .filters button{min-height:44px;flex-shrink:0}
#panelViews .table-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 10px;min-height:56px}
#panelViews .table-row :is(.category-column,.contract-column,.contract-short){display:none}
#panelViews .token-cell{min-width:0}#panelViews .token-cell strong,#panelViews .token-cell small{max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
#panelViews .activity-entry{flex-wrap:wrap;gap:10px}
#panelViews .activity-entry button{min-height:44px}
#panelViews .detail-panel,#panelViews .detail-side{padding:16px;min-width:0}
#panelViews .review-row{gap:10px;flex-wrap:wrap}
#sidePanel :is(p,strong,a){overflow-wrap:anywhere}
@media(max-width:440px){#bridgeView{padding:8px 16px}.shared-wallet{padding:0 28px}#sidePanel{border-radius:0;width:100%;height:100dvh;padding-bottom:max(18px,env(safe-area-inset-bottom))}.trade-tabs{margin-top:0}.footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}}
.header-right{width:100%}.wallet-access{order:3;margin-left:auto;min-height:44px;display:flex;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px}
body[data-trade-mode=bridge] .shared-wallet{display:none}
#bridgeView .bridge-heading{display:flex;flex-direction:row;padding:6px 4px 12px}
#bridgeView .bridge-tabs{padding:2px;margin-bottom:14px;border:0;background:transparent}
#bridgeView .bridge-tabs button{min-height:32px;padding:6px 10px;font-size:11px}
#bridgeView .bridge-tabs [aria-selected=true]{box-shadow:none}
#bridgeView .bridge-route>.form-label{margin:12px 0 8px;font-size:12px}
#bridgeView .bridge-route>.form-input{background:var(--pale);border:1px solid var(--line);border-radius:14px;padding:14px;min-height:56px}
#bridgeView .bridge-route>.bridge-amount{font-size:38px;min-height:90px;letter-spacing:-1px}
#bridgeView .bridge-recipient{margin-top:12px}
#bridgeView .bridge-recipient>summary{padding:8px 0;font-size:11px;color:var(--muted);cursor:pointer}
#bridgeView .bridge-actions{margin-top:14px;gap:8px}
#bridgeView .bridge-actions button{min-height:52px;border-radius:15px}
#bridgeView .bridge-side{margin-top:10px}#bridgeView .bridge-side>summary{padding:10px 4px;font-size:11px}
#bridgeView .bridge-docs{font-size:10px;padding:10px 4px 0;margin-top:0}
#bridgeView .bridge-actions{padding-top:0;margin-top:10px}
#bridgeView .bridge-route>.bridge-notice:empty{display:none}
#bridgeView .bridge-docs{display:none}
#bridgeView .bridge-route{padding-bottom:0}
html[data-theme=dark] #bridgeView .bridge-side>summary{color:var(--muted)}