.traffic-rx{color:#397e72;fill:#397e72}
.traffic-tx{color:#7770af;fill:#7770af}
.traffic-divider{stroke:#edf0e8;stroke-width:1}
.svg-traffic{font:9px ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}
.traffic-panel{margin:22px 0 0;padding:18px 16px 14px;border:1px solid #e3e9df;border-radius:10px;background:linear-gradient(135deg,#f8fbf6,#f8fafc);flex:none;min-width:0}
.traffic-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.traffic-heading h3{font-size:12px;font-weight:550;color:#506949}
.traffic-live{font-size:9px;color:#748e73;white-space:nowrap}
.traffic-live::before{content:"";display:inline-block;width:5px;height:5px;background:#88ac62;border-radius:50%;margin-right:6px}
.traffic-waiting .traffic-live{color:#9f916f}
.traffic-waiting .traffic-live::before{background:#c5a067}
.traffic-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 12px;min-width:0}
.traffic-values span{display:block;font-size:10px;margin-bottom:8px}
.traffic-values strong{display:block;font:500 clamp(14px,1.6vw,20px)/1.5 ui-monospace,SFMono-Regular,monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.traffic-chart{display:block;width:100%;height:72px;overflow:hidden}
.traffic-grid{fill:none;stroke:#e4eae2;stroke-width:.7}
.traffic-line{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.traffic-line.traffic-rx{stroke:#52988a}
.traffic-line.traffic-tx{stroke:#8b82b8}
.traffic-chart-legend{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:9px;color:#93a087}
.traffic-sample-note{font:9px/1.8 ui-monospace,SFMono-Regular,monospace;color:#7d8d72;margin:13px 0 0;overflow-wrap:anywhere}
.traffic-scope{font-size:9px;line-height:1.7;color:#9aa58f;margin-top:6px}
.node-drawer .traffic-panel{margin-top:20px}
.node-drawer .traffic-values strong{font-size:18px}
#page-topology .table-panel td,#page-topology .table-panel th{padding-left:13px;padding-right:13px}
@media(max-width:900px){
  .traffic-panel{padding:17px 14px}
  .traffic-heading h3{font-size:13px}
  .traffic-values strong,.node-drawer .traffic-values strong{font-size:17px}
  .traffic-values span{font-size:11px}
  .traffic-live,.traffic-chart-legend,.traffic-sample-note,.traffic-scope{font-size:10px}
  #page-topology .table-panel td{padding-left:0;padding-right:0}
}
@media(max-width:360px){.traffic-values strong,.node-drawer .traffic-values strong{font-size:14px}.traffic-values{gap:8px}.traffic-live{font-size:9px}}
@media(max-width:600px) and (orientation:portrait){#page-topology>.graph-panel{height:max(650px,calc(100dvh - var(--graph-top,180px) - 92px - env(safe-area-inset-bottom)))}}