.traffic-sites { margin-bottom: 28px; }
.traffic-sites-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.traffic-sites-block, .traffic-sites-chart { min-width: 0; padding: 18px; }
.traffic-sites h3 { margin: 0 0 10px; }
.traffic-site-metrics { display: grid; gap: 8px; }
.traffic-site-value { display: flex; justify-content: space-between; gap: 16px; }
.traffic-site-value strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.traffic-site-metrics small, .traffic-site-state { color: var(--muted); }
.traffic-site-incomplete { border: 1px dashed var(--line); border-radius: 6px; padding: 8px; }
.traffic-site-state { border: 1px dashed var(--line); border-radius: 6px; padding: 3px 7px; width: fit-content; }
.traffic-sites-chart-scroll, .traffic-sites-table-scroll { overflow-x: auto; }
.traffic-sites-svg { display: block; width: 100%; height: auto; min-width: 420px; }
.traffic-site-chart-roi, .traffic-site-chart-domain { fill: var(--text); font-size: 13px; }
.traffic-sites-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.traffic-sites-table caption { text-align: left; font-weight: 600; padding: 12px 0; }
.traffic-sites-table th, .traffic-sites-table td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: 14px 12px; }
.traffic-sites-table th[scope="row"] { overflow-wrap: anywhere; }
#traffic-accounts-details { margin: 20px 0; }
#traffic-accounts-details > summary { cursor: pointer; padding: 12px 0; color: var(--text); }
@media (max-width: 900px) {
  .traffic-sites-charts { grid-template-columns: minmax(0, 1fr); }
}