.chart-grid { stroke:var(--grid); stroke-width:1; }
.chart-axis { fill:var(--muted); font-size:10px; }
.area-down { fill:url(#down-fill); stroke:none; }
.area-up { fill:url(#up-fill); stroke:none; }
.line-down,.line-up { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.line-down { stroke:var(--blue); }
.line-up { stroke:var(--teal); }
.chart-hit { fill:transparent; cursor:crosshair; }
[hidden] { display:none !important; }
.traffic-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0 8px; padding:14px 0; border-top:1px solid var(--grid); border-bottom:1px solid var(--grid); }
.traffic-stat-group { min-width:0; }
.traffic-stat-group + .traffic-stat-group { border-left:1px solid var(--grid); padding-left:18px; }
.traffic-stat-heading { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; }
.traffic-stat-row { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; line-height:1.8; }
.traffic-stat-row strong { color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.server-metric { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:12px; border-top:1px solid var(--grid); padding:11px 0; }
.server-metric .metric { margin:0; padding:0; border-top:0; }
.sparkline { width:150px; height:40px; display:block; overflow:visible; }
.sparkline path { fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sparkline-empty { fill:var(--muted); font-size:8px; }
@media (max-width:620px) { .traffic-summary { grid-template-columns:1fr; gap:0; } .traffic-stat-group + .traffic-stat-group { border-left:0; border-top:1px solid var(--grid); padding:12px 0 0; margin-top:12px; } .server-metric { grid-template-columns:minmax(0,1fr) 120px; gap:8px; } .sparkline { width:120px; } }