.ui-sbarc {
  --ui-sbarc-1: light-dark(#2a78d6, #3987e5); --ui-sbarc-2: light-dark(#eb6834, #d95926);
  --ui-sbarc-3: light-dark(#1baf7a, #199e70); --ui-sbarc-4: light-dark(#eda100, #c98500);
  --ui-sbarc-5: light-dark(#e87ba4, #d55181); --ui-sbarc-6: light-dark(#008300, #008300);
  --ui-sbarc-7: light-dark(#6250d6, #9085e9); --ui-sbarc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-sbarc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-sbarc-s1 { --c: var(--ui-sbarc-1); } .ui-sbarc-s2 { --c: var(--ui-sbarc-2); } .ui-sbarc-s3 { --c: var(--ui-sbarc-3); }
.ui-sbarc-s4 { --c: var(--ui-sbarc-4); } .ui-sbarc-s5 { --c: var(--ui-sbarc-5); } .ui-sbarc-s6 { --c: var(--ui-sbarc-6); }
.ui-sbarc-s7 { --c: var(--ui-sbarc-7); } .ui-sbarc-s8 { --c: var(--ui-sbarc-8); }
.ui-sbarc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-sbarc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-sbarc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-sbarc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-sbarc-y { position: relative; min-width: 24px; }
.ui-sbarc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-sbarc-plot { position: relative; }
.ui-sbarc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-sbarc-grid.ui-sbarc-zero { background: var(--ui-strong); }
.ui-sbarc-cols { position: absolute; inset: 0; display: flex; }
.ui-sbarc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-sbarc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-sbarc-bar { position: absolute; top: 0; bottom: 0; left: 50%; width: min(48px, 64%); transform: translateX(-50%); }
.ui-sbarc-seg { position: absolute; left: 0; right: 0; bottom: var(--a); height: var(--b); min-height: 1px; box-sizing: border-box;
  background: var(--c); background-clip: padding-box; }
.ui-sbarc-on { border-bottom: 2px solid transparent; }
.ui-sbarc-top { border-radius: 4px 4px 0 0; }
.ui-sbarc-val { position: absolute; left: 50%; bottom: calc(var(--a) + 3px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-sbarc-x { display: flex; margin-top: 6px; }
.ui-sbarc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-sbarc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 140px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-sbarc-col:first-child .ui-sbarc-tip { left: 0; transform: translateY(-100%); }
.ui-sbarc-col:last-child .ui-sbarc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-sbarc-col:hover .ui-sbarc-tip { display: block; }
.ui-sbarc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-sbarc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-sbarc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sbarc-tip i { min-width: 3.4em; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.ui-sbarc-tip .ui-sbarc-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ui-border); }