/* App-wide treatment: layouts and original brand artwork are unchanged. */
.sidebar-bottom{padding:12px 0;gap:8px}
.theme-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.theme-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:136px;height:44px;padding:4px;border:1px solid var(--border);border-radius:var(--pill);background:var(--switch-track);isolation:isolate;flex-shrink:0}
.theme-switch:before{content:'';position:absolute;left:4px;top:4px;width:61px;height:34px;border-radius:var(--pill);background:var(--switch-thumb);box-shadow:0 2px 7px color-mix(in srgb,var(--paper) 20%,transparent);transition:transform 220ms cubic-bezier(.2,.8,.2,1);z-index:-1}
.theme-switch>span{display:flex;align-items:center;justify-content:center;gap:4px;width:61px;font-size:11px;font-weight:600;color:var(--muted);transition:color 160ms}
.theme-switch em{font-style:normal}.theme-switch .icon{width:16px;height:16px}
.theme-switch[aria-checked=false]>span:first-child,.theme-switch[aria-checked=true]>span:last-child{color:var(--switch-ink)}
.theme-switch[aria-checked=true]:before{transform:translateX(65px)}
.theme-switch:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 14%,transparent)}
.theme-help{width:40px;height:44px;border-radius:var(--pill);border:1px solid var(--line);flex-shrink:0}
.theme-mobile-switch{display:none}
html[data-theme=light] .theme-mobile-switch .theme-moon,html[data-theme=dark] .theme-mobile-switch .theme-sun{display:none}
html[data-theme=dark]{--overlay:rgb(3 2 10 / .7);--shadow:0 8px 24px rgb(3 2 10 / .2)}
html[data-theme=dark] .sidebar{background:color-mix(in srgb,var(--paper) 78%,var(--surface))}
html[data-theme=dark] :is(.brand,.brand-lockup){color:var(--ink)}
html[data-theme=dark] :is(.panel-card,.panel,.swap-form-card,.swap-routes-card){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 55%,transparent)}
html[data-theme=dark] :is(.button-dark,.sidebar-find-yield .button,.swap-review-button){background:var(--primary-fill);border-color:transparent;color:var(--primary-ink);font-weight:600}
html[data-theme=dark] .button-dark:hover{background:var(--brand-lilac)}
html[data-theme=dark] .metric-icon{color:var(--ink);background:color-mix(in srgb,var(--surface) 66%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 65%,transparent)}
html[data-theme=dark] .lilac .metric-icon{color:var(--purple)}
html[data-theme=dark] .peach .metric-icon{color:var(--amber)}
html[data-theme=dark] .lime .metric-icon{color:var(--brand-lime)}
html[data-theme=dark] .blue .metric-icon{color:var(--brand-blue)}
html[data-theme=dark] .sidebar .nav-item.active{color:var(--brand-lime);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-lime) 25%,transparent)}
html[data-theme=dark] .nav-item:hover:not(.active){background:var(--raised)}
html[data-theme=dark] .explain-art .round-icon{color:var(--on-brand)}
html[data-theme=dark] .explain-card:after{background:color-mix(in srgb,var(--blue-accent) 12%,var(--blue))}
html[data-theme=dark] .token:has(img[src*="flare-oracle"],img[data-brand-src*="flare-oracle"]){background:var(--logo-plate);padding:3px;border-radius:9px}
html[data-theme=dark] .swap-dex-logo{background:var(--logo-plate);border-radius:var(--pill)}
html[data-theme=dark] :is(.network-current,.wallet-button,.swap-settings,.swap-token-select){border-color:var(--line);background:var(--surface)}
html[data-theme=dark] :is(.ui-select,.input-shell){border-color:var(--border)}
html[data-theme=dark] input::placeholder{color:var(--muted);opacity:1}
html[data-theme=dark] .native-auto-switch>span{background:var(--ink)}
html[data-theme=dark] .native-auto-switch[aria-checked=true]>span{background:var(--primary-ink)}
html[data-theme=dark] .chart-tooltip{background:var(--raised);box-shadow:var(--shadow);border-color:var(--border);border-top-color:var(--purple)}
html[data-theme=dark] .chart-highlight{border-color:var(--raised)}
html[data-theme=dark] .chart-gridline{stroke:var(--line)}
html[data-theme=dark] :is(.price-ranges button[aria-pressed=true],.pill.active){background:var(--lilac);color:var(--purple);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 40%,transparent)}
html[data-theme=dark] .toast{background:var(--raised);color:var(--ink);border:1px solid var(--border)}
html[data-theme=dark] .scroll-hint{color:var(--muted)}
@media(max-width:1100px) and (min-width:641px){
  .theme-footer{flex-direction:column}.theme-switch{width:48px;height:48px;padding:0;background:var(--raised)}
  .theme-switch:before{left:5px;top:5px;width:36px;height:36px;transform:none!important}
  .theme-switch>span{position:absolute;inset:0;width:46px;color:var(--switch-ink)!important}
  .theme-switch em{display:none}.theme-switch[aria-checked=true]>span:first-child,.theme-switch[aria-checked=false]>span:last-child{visibility:hidden}
  .theme-help{border:0}.sidebar-bottom{padding-inline:0}
}
@media(max-width:640px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) 36px 44px;column-gap:8px;row-gap:8px}
  .topbar .app-header-title{grid-area:1/1/2/3;width:auto;min-width:0}
  .topbar .theme-mobile-switch{grid-area:1/3;justify-self:end}
  .topbar .network-control{grid-area:2/1;margin:0;justify-self:start}
  .topbar .mobile-help{grid-area:2/2;margin:0}
  .topbar .wallet-actions{grid-area:2/3;margin:0;align-self:center;justify-self:end}
  .theme-mobile-switch{display:grid;place-items:center;border-radius:var(--pill);width:40px;height:40px;border:1px solid var(--border);background:var(--surface);flex-shrink:0}
  .topbar .theme-mobile-switch .icon{width:20px;height:20px}
  html[data-theme=dark] .mobile-nav{box-shadow:0 -4px 18px color-mix(in srgb,var(--paper) 65%,transparent)}
  html[data-theme=dark] .mobile-nav .nav-item.active{background:var(--lime);color:var(--brand-lime)}
}
@media(max-width:700px){.find-view .pill{flex:0 0 auto;min-width:max-content}.find-view .pill-group{scroll-padding-inline:4px;overscroll-behavior-inline:contain}}
@media(prefers-reduced-motion:reduce){.theme-switch,.theme-switch:before,.theme-switch>span{transition:none!important}}
@media(forced-colors:active){.theme-switch{border:1px solid ButtonText}.theme-switch:before{background:Highlight}.theme-switch[aria-checked=true]>span:last-child,.theme-switch[aria-checked=false]>span:first-child{color:HighlightText}.nav-item.active{outline:1px solid Highlight}}