.topbar { position:sticky; top:0; z-index:var(--z-bar); display:flex; align-items:center; gap:var(--s4);
          height:var(--topbar-h); padding:0 var(--s4); flex:none;
          background-color:var(--glass-thin); backdrop-filter:var(--glass-blur);
          border-bottom:1px solid var(--line); }


.topbar { padding-right:0; }

.bar-tabs { display:flex; align-self:stretch; flex:none;
            --tone:var(--bg3); --tone-rgb:27,31,38; --on-tone:var(--text); }
.topbar .bar-tabs > .chip {
  --glass:100%;
  --tab-bg:linear-gradient(180deg,
    color-mix(in oklab, color-mix(in oklab, var(--tone), #fff 16%) var(--glass), transparent),
    color-mix(in oklab, var(--tone) var(--glass), transparent));
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; min-width:76px; height:auto; min-height:0;
  padding:0 var(--s4); font:700 var(--fs-micro)/1 var(--mono); letter-spacing:.1em;
  color:var(--on-tone); border:0; border-left:3px solid var(--bg0); background:var(--tab-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -8px rgba(var(--tone-rgb),.7);
  transform:none; filter:none; transition:filter var(--t-fast), box-shadow var(--t); }
.topbar .bar-tabs > .chip.flair { background-image:var(--sheen), var(--tab-bg);
                                  background-size:220% 100%, 100% 100%; }

.bar-tabs > [data-tone="grey"]    { --tone:var(--grey);    --tone-rgb:var(--grey-rgb);    --on-tone:#fff; }
.bar-tabs > [data-tone="green"]   { --tone:var(--green);   --tone-rgb:var(--acc-rgb);     --on-tone:var(--ink); }
.bar-tabs > [data-tone="violet"]  { --tone:var(--violet);  --tone-rgb:var(--violet-rgb);  --on-tone:var(--ink); }
.bar-tabs > [data-tone="blurple"] { --tone:var(--discord); --tone-rgb:var(--discord-rgb); --on-tone:#fff; }
.bar-tabs > [data-tone="yellow"]  { --tone:var(--yellow);  --tone-rgb:var(--yellow-rgb);  --on-tone:var(--ink); }
.bar-tabs > [data-tone="orange"]  { --tone:var(--orange);  --tone-rgb:var(--orange-rgb);  --on-tone:var(--ink); }

.bar-tabs > .chip-ok   { --tone:var(--green);  --tone-rgb:var(--acc-rgb);    --on-tone:var(--ink); }
.bar-tabs > .chip-warn { --tone:var(--yellow); --tone-rgb:var(--yellow-rgb); --on-tone:var(--ink); }
.bar-tabs > .chip-bad  { --tone:var(--red);    --tone-rgb:var(--red-rgb);    --on-tone:#fff; }
.bar-tabs > .chip .ico { width:16px; height:16px; margin:0; vertical-align:0; color:inherit;
  transition:transform var(--t) var(--ease-out); }

.lbl-short { display:none; }
.bar-tabs > a.chip::after, .bar-tabs > button.chip::after { display:block;
  background:linear-gradient(112deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%); }
.bar-tabs > a.chip:hover, .bar-tabs > button.chip:hover { color:var(--on-tone);
  text-decoration:none; transform:none; filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px -6px rgba(var(--tone-rgb),.9); }
.bar-tabs > a.chip:hover .ico, .bar-tabs > button.chip:hover .ico { transform:translateY(-1px) scale(1.08); }
.bar-tabs > .chip:focus-visible { outline:2px solid var(--text); outline-offset:-4px; }



.bar-stats { display:flex; align-items:center; gap:var(--s2); align-self:stretch; flex:none;
  min-width:0; padding:0 var(--s4) 0 var(--s3); border:solid var(--line2); border-width:0 1px;
  background:linear-gradient(180deg, rgba(var(--acc-rgb),.04), rgba(var(--acc-rgb),.13)); }

.bar-stats .globe { --h:calc(var(--fs-micro) + 3px + var(--fs-body)); width:var(--h);
  height:var(--h); flex:none; color:var(--acc); filter:drop-shadow(0 0 5px rgba(var(--acc-rgb),.6)); }
.bar-stats .cell { display:flex; flex-direction:column; justify-content:center; gap:3px; }

.bar-news { flex:1; min-width:0; align-self:stretch; padding:0 var(--s4);
  font:500 var(--fs-ui)/1 var(--mono); color:var(--text); border-right:1px solid var(--line2); }
.bar-news:not([hidden]) ~ .spacer { display:none; }
.bar-stats .k { font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.08em;
  white-space:nowrap; text-transform:uppercase; color:var(--muted); }
.bar-stats .v { font:700 var(--fs-body)/1 var(--mono); color:var(--text);
  font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(var(--acc-rgb),.45); }

.bar-stats .v.short { display:none; }

.bar-stats.no-globe .globe { display:none; }
.bar-stats.no-room { display:none; }
.topbar { min-width:0; }

.topbar .bar-tabs > .usage-btn { min-width:0; padding:0 var(--s3); }
.usage-btn #balance { font:700 var(--fs-body)/1 var(--mono); letter-spacing:.02em;
  min-width:8ch; text-align:center; }

.usage-btn.cool-now { animation:tabFull 1.4s var(--ease-out); }
@keyframes tabFull { 30% { box-shadow:0 0 28px 2px rgba(var(--tone-rgb),.9); } }

#usageBtn { position:relative; }
#usageBtn.deposited { animation:depositRing 1.2s var(--ease-out); }
@keyframes depositRing {
  0% { box-shadow:0 0 0 0 rgba(var(--acc-rgb),.7); }
  60% { box-shadow:0 0 0 12px rgba(var(--acc-rgb),0), 0 0 28px 2px rgba(var(--acc-rgb),.35); }
  100% { box-shadow:0 0 0 0 rgba(var(--acc-rgb),0); } }


@media (max-width:1080px) {
  .bar-stats .k { display:none; }
  .bar-stats .globe { --h:var(--fs-body); }   
  .bar-stats { padding:0 var(--s3) 0 var(--s2); }
  
  .bar-stats .v:not(.short) { display:none; }
  .bar-stats .v.short { display:inline-flex; }
  
  .bar-tabs > .chip .ico + .lbl { display:none; }
  .topbar .bar-tabs > .chip { min-width:48px; padding:0 var(--s3); }
  .usage-btn { min-width:0; }
}


@media (max-width:720px) {
  .topbar { gap:var(--s2); padding:0 0 0 var(--s2); }   
  
  .topbar .brand .suffix, .topbar .brand .bname { display:none; }
  .topbar .brand .mark { margin-right:0; }
  
  .topbar .brand { flex:none; }
  
  .topbar .bar-news { display:none; }
  .bar-news:not([hidden]) ~ .spacer { display:block; }
  
  .topbar, .topbar > * { min-width:0; }
  
  .bar-tabs { display:grid; grid-auto-flow:column; grid-template-rows:1fr 1fr; }
  .bar-tabs > * { grid-row:span 2; }
  #usageBtn:not([hidden]) { order:2; grid-row:auto; border-top:2px solid var(--bg0); }
  #usageBtn:not([hidden]) ~ #acctBtn { order:1; grid-row:auto; flex-direction:row; gap:5px; }
  #usageBtn:not([hidden]) ~ #acctBtn .ico { width:12px; height:12px; }
  #usageBtn:not([hidden]) ~ #acctBtn .lbl-short { display:inline; }
  .usage-btn #balance { font-size:var(--fs-ui); }
}


.odometer { display:inline-flex; font-variant-numeric:tabular-nums; line-height:1; }
.od-face { display:inline-flex; }
.od-col { display:inline-block; height:1em; overflow:hidden; }
.od-strip { display:flex; flex-direction:column; transition:transform .38s cubic-bezier(.2,.8,.2,1); }
.od-strip.od-snap { transition:none; }   
.od-strip > span { height:1em; }



.ticker { display:flex; align-items:center; overflow:hidden; white-space:nowrap; contain:inline-size;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.tk-track { display:flex; flex:none; animation:tape linear infinite; }
.ticker:hover .tk-track { animation-play-state:paused; }
@keyframes tape { to { transform:translateX(-50%); } }
.tk-run { display:flex; flex:none; }
.tk-item { display:inline-flex; align-items:center; gap:var(--s2); padding-right:var(--s6); }
.tk-item::before { content:""; width:6px; height:6px; flex:none;
                   background:var(--tk-tone, var(--acc)); box-shadow:0 0 6px var(--tk-tone, var(--acc)); }
.tk-tag { font:700 var(--fs-micro)/1 var(--mono); letter-spacing:.1em; padding:3px 5px;
          background:var(--tk-tone, var(--acc)); color:var(--ink); }
.tk-b { font-weight:700; color:var(--tk-tone, var(--text)); }

.tk-item[data-tone="green"]  { --tk-tone:var(--green); }
.tk-item[data-tone="red"]    { --tk-tone:var(--red); }
.tk-item[data-tone="yellow"] { --tk-tone:var(--yellow); }
.tk-item[data-tone="orange"] { --tk-tone:var(--orange); }
.tk-item[data-tone="violet"] { --tk-tone:var(--violet); }
.tk-item[data-tone="blue"]   { --tk-tone:var(--blue); }