:root { --green:#3fb950; --yellow:#d29922; --orange:#f0883e; --red:#f85149; }
.bar-wrap { background:#21262d; border-radius:4px; height:18px; position:relative; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; transition:width .4s ease; }
.bar-label { position:absolute; top:0; left:6px; font-size:.75rem; line-height:18px; color:#fff; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.bar-unavailable .bar-label { color:var(--muted); font-weight:400; text-shadow:none; }
.bar-stale .bar-fill { opacity:.45; }
@media (prefers-reduced-motion:reduce) { .bar-fill { transition:none; } }