@layer components {
/* ── Chart tooltip ────────────────────────────────────────── */
.chart-tooltip-popup {
  position: absolute;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
.chart-tooltip-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text);
}
}