/* Compact header controls and a continuous, volume-ranked market strip. */
html[data-theme] body.in-app #topbar {
  flex-wrap:nowrap; gap:12px; min-height:68px; padding-top:12px; padding-bottom:12px;
}
html[data-theme] #topbarRight {display:flex; align-items:center; gap:8px; margin-left:0; flex:0 0 auto; order:0}
html[data-theme] #topbar :is(.topbar-theme,.header-search-toggle) {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; order:0;
  width:40px; height:40px; min-height:40px; padding:10px; border:1px solid var(--line);
  border-radius:50%; background:var(--surface); color:var(--ink-2); cursor:pointer;
}
html[data-theme] #topbar .topbar-theme b {display:none}
.header-search-toggle svg {width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
html[data-theme] #topbar :is(.topbar-theme,.header-search-toggle):hover {background:var(--surface-2); color:var(--ink)}
html[data-theme] #topbar :is(.topbar-theme,.header-search-toggle):focus-visible,
.hot-pause:focus-visible,.hot-token:focus-visible,.asset-compact:focus-visible {outline:2px solid var(--accent); outline-offset:2px}
html[data-theme] #topbar #searchWrap {
  position:absolute; top:calc(100% + 8px); right:16px; left:auto; z-index:70;
  width:min(560px,calc(100vw - 32px)); max-width:none; padding:8px; margin:0;
  border:1px solid var(--line); border-radius:18px; background:var(--surface);
  box-shadow:0 12px 32px #0002;
}
html[data-theme] #topbar #searchWrap[hidden] {display:none}
html[data-theme] #topbar #searchWrap input {height:44px; padding-right:38px; border-radius:12px}
html[data-theme] #topbar #searchClear {right:16px}
html[data-theme] #topbar #suggest {max-height:min(440px,calc(100dvh - 160px)); overflow-y:auto}
/* Reserve a stable row in the rail, so hover never moves the navigation icons. */
html[data-theme] #drawer .sidebar-assets {position:relative; flex:0 0 46px; height:46px; margin:0 0 8px; min-width:0}
html[data-theme] #drawer #assetSeg {
  display:flex; width:100%; max-width:212px; min-height:38px; padding:3px; gap:2px;
  margin:0; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); opacity:1; visibility:visible;
  transition:opacity 180ms ease 60ms,visibility 0s;
}
html[data-theme] #drawer #assetSeg button {flex:1 1 0; min-width:0; padding:7px 8px; font-size:12px; line-height:18px; border-radius:999px}
html[data-theme] #drawer .asset-compact {
  display:none; position:absolute; top:0; left:1px; width:44px; height:38px; padding:0;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink-2);
  font-family:inherit; font-size:10px; font-weight:600; line-height:1; cursor:pointer;
}
.hot-markets {display:flex; align-items:center; gap:12px; flex:1 1 0; min-width:0; height:40px}
.hot-pause {display:flex; align-items:center; gap:6px; padding:6px 0; flex-shrink:0; border:0; background:none; color:var(--ink); cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; line-height:1.2}
.hot-flame {width:17px; height:19px; fill:none; stroke:#f2994a; stroke-width:1.6; stroke-linejoin:round}
.hot-pause-state {font-size:10px; color:var(--muted); width:9px}
.hot-window {flex:1 1 0; min-width:0; overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 18px),transparent)}
.hot-track {display:flex; width:max-content; animation:hot-scroll var(--hot-duration,90s) linear infinite}
.hot-group {display:flex; align-items:center; gap:28px; padding-right:28px; flex-shrink:0}
.hot-token {display:inline-flex; align-items:center; gap:7px; white-space:nowrap; height:38px; font-size:12px; color:var(--ink); text-decoration:none}
.hot-token:hover {text-decoration:underline; text-underline-offset:3px}
.hot-rank {font-size:10px; color:var(--muted)}
.hot-token img {width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0}
.hot-symbol {max-width:100px; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.hot-change {font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted)}
.hot-change.up {color:var(--good)}
.hot-change.down {color:var(--crit)}
.hot-status {padding:0 12px; color:var(--muted); font-size:12px; white-space:nowrap}
.hot-markets:is(:hover,[data-paused="true"]) .hot-track {animation-play-state:paused}
.hot-window:focus-within {overflow-x:auto; scrollbar-width:none; mask-image:none}
.hot-window:focus-within .hot-track {animation:none}
.hot-window:focus-within .hot-group[aria-hidden] {display:none}
@keyframes hot-scroll {to {transform:translateX(-50%)}}
@media(min-width:1080px) {
  html[data-theme] #drawer #assetSeg {width:212px}
  html[data-theme] body.rail-collapsed #drawer #assetSeg {opacity:0; visibility:hidden; pointer-events:none; transition:opacity 120ms ease,visibility 0s 120ms}
  html[data-theme] body.rail-collapsed #drawer .asset-compact {display:block}
}
@media(max-width:1079px) {
  html[data-theme] body.in-app #topbar {flex-wrap:wrap; gap:8px 12px}
  html[data-theme] #topbar .mainnav {display:none}
  html[data-theme] #topbar .topbar-brand {margin-right:auto}
  html[data-theme] #topbar .brand-token {display:none}
  .hot-markets {order:3; flex-basis:100%; height:32px}
  .hot-token {height:32px}
}
@media(max-width:520px) {
  html[data-theme] #topbar .topbar-brand .brand-name {display:none}
  html[data-theme] #topbarRight {gap:6px}
  html[data-theme] #topbar .walletchip {font-size:12px; padding:8px 10px; min-height:38px; order:0; margin:0}
}
@media(prefers-reduced-motion:reduce) {
  .hot-track {animation:none}
  .hot-window {overflow-x:auto; mask-image:none; scrollbar-width:thin}
  .hot-group[aria-hidden] {display:none}
  html[data-theme] #drawer #assetSeg {transition:none}
}