.bf-cat{margin-top:6px;font-weight:700;font-size:18px}
.bf-gauge{position:relative;padding:4px 0 22px}
.bf-bar{display:flex;height:14px;border-radius:99px;overflow:hidden}
.bf-bar i{display:block}
.bf-marker{position:absolute;top:-2px;left:0;width:4px;height:26px;margin-left:-2px;border-radius:2px;background:var(--text);box-shadow:0 0 0 2px var(--surface);transition:left .25s}
.bf-ticks{position:relative;height:16px;margin-top:4px;font-size:12px;color:var(--faint)}
.bf-ticks span{position:absolute;transform:translateX(-50%)}
.bf-top{justify-content:space-between}
.bf-pair{display:flex;gap:8px}
.bf-pair .input-unit{flex:1;min-width:0}
#bf-in.imp .bf-hft{grid-column:1/-1}
#bf-in .field{display:flex;flex-direction:column;justify-content:flex-end}

.bf-cat{color:var(--cat,var(--text))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bf-cat{color:var(--cat-d,var(--text))}}
:root[data-theme="dark"] .bf-cat{color:var(--cat-d,var(--text))}