.stats__traffic-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding-top: 8px;
}

.stats__traffic-bar {
  flex: 1;
  height: var(--h, 0%);
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(62, 207, 142, 0.95) 0%, rgba(62, 207, 142, 0.08) 100%);
  transform-origin: bottom;
}

.stats__hero-chart--bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.stats__hero-chart--bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent, #3ecf8e) 0%, rgba(62, 207, 142, 0.12) 100%);
  transform-origin: bottom;
}

.stats__hero-chart--area svg path.fill {
  fill: url(#statsAreaFill);
}

.stats__hero-chart--area svg path.line {
  fill: none;
  stroke: var(--accent, #3ecf8e);
  stroke-width: 2;
}

.stats__chart-dot {
  fill: var(--accent, #3ecf8e);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: all;
}

.stats__hero-chart--area:hover .stats__chart-dot,
.stats__hero-chart--area .stats__chart-dot:hover {
  opacity: 1;
}

.stats__chart-tooltip {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -100%);
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-tooltip);
  border: 1px solid var(--border-tooltip);
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-tooltip);
}

.stats__chart-tooltip--global {
  position: fixed;
  z-index: 3000;
}

.stats__traffic-chart span,
.stats__hero-chart--bars span {
  cursor: crosshair;
}

.stats__panel--wide {
  position: relative;
}