/* Compact header spacing (same pattern as other pages) */
.panel-header--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.panel-title { margin: 0; font-size: 1rem; }

/* Two-up chart rows */
.charts-row { padding: var(--space-3); gap: var(--space-3); }
.card-chart { padding: 0; }

/* Make these charts shorter than default so more fits in-frame */
#top-countries-chart,
#top-networks-chart {
  width: 100%;
  height: 220px;            /* compact */
  max-height: 240px;
}

#top-domain-chart,
#top-asn-chart {
  width: 100%;
  height: clamp(220px, 32vh, 360px);  /* responsive but compact */
}

/* Let Chart.js respect container height */
.chart { padding: 0; }
.chart canvas { display: block; }

/* Timespan buttons */
.timespan { display: inline-flex; gap: .35rem; }
.timespan .update-span {
  appearance:none; border:1px solid var(--border); background:var(--bg-elev); color:var(--text);
  font:600 .78rem/1 var(--sans); border-radius:999px; padding:.3rem .55rem; cursor:pointer;
}
.timespan .update-span:hover { background: var(--card); }
.timespan .update-span.is-active { background: var(--accent); border-color: var(--accent); color:#000; }

/* Page spacing tighter */
.content { gap: var(--space-4); padding: var(--space-4) var(--space-4); }