.ui-netstat { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-netstat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--s); font-weight: 500; font-size: 13px;
  --t: var(--ui-success); --s: var(--ui-success-soft); }
.ui-netstat-pill[data-state="slow"] { --t: var(--ui-warning); --s: var(--ui-warning-soft); }
.ui-netstat-pill[data-state="offline"] { --t: var(--ui-danger); --s: var(--ui-danger-soft); }
.ui-netstat-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.ui-netstat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.ui-netstat-grid > div { padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-netstat-grid dt { color: var(--ui-muted); font-size: 12px; }
.ui-netstat-grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-netstat-say { margin: 8px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-netstat-say:empty { display: none; }
/* A wide pane has room for all four in a row. */
@container (min-width: 420px) { .ui-netstat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }