.audience-trends {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.audience-trend {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface2);
}
.audience-trend span,
.audience-trend small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.audience-trend strong {
  display: block;
  margin: 3px 0 2px;
  overflow: hidden;
  color: #eef2f8;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audience-trend[data-tone="up"] strong { color: var(--green); }
.audience-trend[data-tone="down"] strong { color: var(--red); }
.audience-trend[data-tone="stable"] strong { color: #c5d8ff; }
.audience-trend-note {
  grid-column: 1 / -1;
  margin: 9px 1px 0;
  color: var(--muted2);
  font-size: 10px;
}
.chart-projection-point {
  vector-effect: non-scaling-stroke;
}
@media (max-width: 720px) {
  .audience-trends { grid-template-columns: 1fr; }
  .audience-trend { padding: 10px 11px; }
}