.b2bc {
  --b2bc-line: var(--accent, #0078d4);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 96px;
  color: var(--b2bc-line);
}
.b2bc__legend {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-bottom: 7px;
  color: var(--text-secondary, var(--text-muted, #8a8f98));
  font-size: 10.5px;
  line-height: 1.25;
}
.b2bc__fallback {
  margin: auto;
  padding: 14px;
  color: var(--text-muted, #8a8f98);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.b2bc__legend-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.b2bc__legend-dot,
.b2bc__tooltip-dot,
.b2bc__compact-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.b2bc__stage { position: relative; flex: 1 1 auto; min-height: 0; }
.b2bc__svg { display: block; width: 100%; height: 100%; min-height: 96px; overflow: visible; }
.b2bc__grid,
.b2bc__baseline,
.b2bc__line,
.b2bc__point,
.b2bc__crosshair,
.b2bc__active-halo,
.b2bc__active-ring,
.b2bc__active-core {
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.b2bc__grid {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
  opacity: .12;
}
.b2bc__baseline {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: .28;
}
.b2bc__area { stroke: none; pointer-events: none; }
.b2bc__line {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px color-mix(in srgb, currentColor 20%, transparent));
}
.b2bc__point {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .72;
}
.b2bc__crosshair {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .45;
}
.b2bc__active-halo { fill: none; stroke-width: 12; stroke-linecap: round; opacity: .18; }
.b2bc__active-ring {
  fill: none;
  stroke: var(--dropdown-bg, var(--card-bg, var(--bg, #fff)));
  stroke-width: 7;
  stroke-linecap: round;
}
.b2bc__active-core { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.b2bc__hit { cursor: crosshair; touch-action: pan-y; }
/* iOS переносит фокус на <svg tabindex=0 role=slider> уже при ТАПЕ, а
   :focus-visible для нестандартной роли матчится не всегда — тогда остаётся
   браузерный outline:auto (системная синь, к --accent отношения не имеющая;
   владелец увидел её рамкой вокруг графика курса 27.08.2026). Гасим ровно
   его: клавиатурный фокус идёт через :focus-visible ниже и не затронут. */
.b2bc__svg:focus {
  outline: none;
}
.b2bc__svg:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #0078d4) 58%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}
.b2bc__axis { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.b2bc__axis-tick {
  position: absolute;
  left: 4px;
  transform: translateY(-50%);
  padding: 1px 4px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--card-bg, var(--bg, #fff)) 86%, transparent);
  color: var(--text-muted, #8a8f98);
  font-size: 9px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.b2bc__xaxis {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-top: 5px;
  color: var(--text-muted, #8a8f98);
  font-size: 9.5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.b2bc__xaxis > :nth-child(2) { text-align: center; }
.b2bc__xaxis > :last-child { text-align: right; }
.b2bc__tooltip {
  --b2bc-anchor-x: 50%;
  --b2bc-anchor-y: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  max-width: calc(100% - 8px);
  padding: 6px 9px 7px;
  border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 26%, var(--card-border, rgba(0,0,0,.1)));
  border-radius: 8px;
  background: var(--dropdown-bg, var(--card-bg, var(--bg, #fff)));
  color: var(--text, #1a1a1a);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent), 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 110ms ease, visibility 110ms ease;
}
.b2bc__tooltip:not(.is-visible) { visibility: hidden; opacity: 0; }
.b2bc__tooltip::after { content: ""; position: absolute; display: block; background: color-mix(in srgb, var(--accent, #0078d4) 58%, transparent); }
.b2bc__tooltip.is-above::after,
.b2bc__tooltip.is-below::after { left: var(--b2bc-anchor-x); width: 1px; height: 11px; }
.b2bc__tooltip.is-above::after { bottom: -12px; }
.b2bc__tooltip.is-below::after { top: -12px; }
.b2bc__tooltip.is-left::after,
.b2bc__tooltip.is-right::after { top: var(--b2bc-anchor-y); width: 11px; height: 1px; }
.b2bc__tooltip.is-left::after { right: -12px; }
.b2bc__tooltip.is-right::after { left: -12px; }
.b2bc__tooltip-date {
  color: var(--text-muted, #8a8f98);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 570;
  letter-spacing: .01em;
  text-align: center;
}
.b2bc__tooltip-rows { display: flex; flex-direction: column; gap: 3px; }
.b2bc__tooltip-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.b2bc__tooltip-name {
  max-width: 150px;
  overflow: hidden;
  color: var(--text-secondary, var(--text-muted, #8a8f98));
  font-size: 9.5px;
  text-overflow: ellipsis;
}
.b2bc__tooltip-value { margin-left: auto; color: var(--text, #1a1a1a); font-size: 12px; line-height: 1.2; font-weight: 740; }
.b2bc__tooltip-delta {
  padding: 1px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #0078d4) 10%, transparent);
  color: var(--accent, #0078d4);
  font-size: 8.5px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 680;
}
.b2bc__compact { display: none; }
.b2bc--mini { min-height: 52px; }
.b2bc--mini .b2bc__svg { min-height: 52px; }
.b2bc--mini .b2bc__grid { opacity: .08; }
.b2bc--mini .b2bc__line { stroke-width: 1.5; }
.b2bc--mini .b2bc__point { stroke-width: 3.2; opacity: .62; }
[data-theme="dark"] .b2bc__grid { opacity: .18; }
[data-theme="dark"] .b2bc__baseline { opacity: .34; }
@media (max-width: 640px) {
  .b2bc__tooltip { display: none; }
  .b2bc__compact.is-visible {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 9px;
    /* Родители графика режут содержимое по радиусу. Без внутреннего отступа
       нижний border readout совпадал с clip-edge и терял половину линии. */
    margin: 7px 1px 2px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--accent, #0078d4) 24%, var(--card-border, rgba(0,0,0,.1)));
    border-radius: 8px;
    background: var(--dropdown-bg, var(--card-bg, var(--bg, #fff)));
    color: var(--text, #1a1a1a);
    box-shadow: 0 4px 14px color-mix(in srgb, #000 12%, transparent);
    font-variant-numeric: tabular-nums;
  }
  .b2bc__compact-date { flex: 1 0 100%; color: var(--text-muted, #8a8f98); font-size: 9px; }
  .b2bc__compact-row { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
  .b2bc__compact-name { max-width: 110px; overflow: hidden; color: var(--text-secondary, #605e5c); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
  .b2bc__compact-value { color: var(--text, #1a1a1a); font-size: 11px; }
  .b2bc__compact-delta { color: var(--accent, #0078d4); font-size: 9px; font-style: normal; font-weight: 680; }
}
@media (prefers-reduced-motion: reduce) {
  .b2bc__tooltip { transition: none; }
}