.lb-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mode { display: inline-flex; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.mode button { all: unset; cursor: pointer; padding: .4rem .9rem; border-radius: 999px; font: 500 .8125rem/1 var(--sans); color: var(--muted); transition: background .25s, color .25s; }
.mode button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-caption { font: .75rem var(--mono); color: var(--muted); }

.lb { display: block; width: 100%; height: auto; overflow: visible; }
.lb .box { fill: var(--bg); stroke: var(--line); transition: stroke .3s; }
.lb .proxy rect { fill: none; stroke: var(--line); stroke-dasharray: 2 3; }
.lb text { font: 500 11px var(--mono); fill: var(--text); }
.lb text.sub { font-weight: 400; fill: var(--muted); font-size: 9.5px; }
.lb .count { font: 500 16px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lb .total { font: 500 13px var(--sans); font-variant-numeric: tabular-nums; }
.lb .unit, .lb .status { font: 400 8.5px var(--mono); fill: var(--muted); letter-spacing: .02em; }
.lb .wire { stroke: var(--line); fill: none; stroke-width: 1; }
.lb .conn { stroke: var(--text); stroke-width: 1.25; fill: none; opacity: 0; stroke-dasharray: 6 4; transition: opacity .4s; animation: lb-flow .6s linear infinite; }
.lb .conn.on { opacity: 1; }
.lb .bar-bg { fill: var(--line); }
.lb .bar { fill: var(--text); }
.lb .cap { stroke: var(--muted); stroke-width: 1; }
.lb .dot { fill: var(--accent); }
.lb .trail { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .3; }
.lb .ring { fill: none; stroke: var(--accent); stroke-width: 1; }
.lb .drop { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; fill: none; }

.lb .pod.hot .box { stroke: var(--accent); stroke-width: 1.5; }
.lb .pod.hot .bar { fill: var(--accent); }
.lb .pod.hot .status { fill: var(--accent); font-weight: 500; }
.lb .pod.hot { animation: lb-strain .9s ease-in-out infinite; }

@keyframes lb-flow { to { stroke-dashoffset: -10; } }
@keyframes lb-strain { 0%, 50%, 100% { transform: none; } 10%, 30% { transform: translateX(-.8px); } 20%, 40% { transform: translateX(.8px); } }