.net-console > p { max-width: 42rem; }
.net-modes { display: flex; flex-wrap: wrap; column-gap: .65rem; row-gap: .45rem; padding: 0; border: 0; margin: 1.2rem 0; }
.net-modes legend { margin-bottom: .5rem; color: #eaf8f0; font-weight: 700; }
.net-modes label { display: flex; flex: 1 1 10rem; gap: .6rem; align-items: center; max-width: 13rem; padding: .65rem .75rem; color: #eaf8f0; border: 1px solid #7da493; border-radius: .6rem; background: #162e28; cursor: pointer; }
.net-modes label:has(:checked) { border-color: #d2fda9; background: #29483a; }
.net-modes label small { display: block; color: #c0d7cb; margin-top: .15rem; }
.net-modes input { accent-color: #d2fda9; }
.net-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.net-actions button, .net-metrics button { border-radius: .5rem; padding: .6rem .85rem; cursor: pointer; font-weight: 750; }
.net-actions [data-net-start] { color: #142a20; background: #d2fda9; border: 1px solid #d2fda9; }
.net-actions [data-net-stop] { color: #eff8f2; background: #284a3d; border: 1px solid #93b6a6; }
.net-actions button:disabled { cursor: wait; opacity: .65; }
.net-actions > span { color: #c2dbcf; font-size: .9rem; }
.net-chart { margin-bottom: .75rem; }
.net-chart svg { display: block; width: 100%; height: clamp(8rem,25vw,12rem); background: var(--soft); border-radius: .45rem; }
.net-grid { fill: none; stroke: var(--line); vector-effect: non-scaling-stroke; }
.net-chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.net-legend { display: flex; flex-wrap: wrap; gap: .3rem .85rem; padding: 0; margin: 0 0 .65rem; list-style: none; font-size: .88rem; color: var(--muted); }
.net-legend li::before { content: ""; display: inline-block; width: .8rem; height: .16rem; vertical-align: middle; margin-right: .35rem; background: var(--phase); }
.net-legend li:nth-child(1), .net-chart-line.idle { --phase: var(--brand); }
.net-legend li:nth-child(2), .net-chart-line.download { --phase: #5faaf3; }
.net-legend li:nth-child(3), .net-chart-line.upload { --phase: #e89954; }
[data-theme="light"] .net-legend li:nth-child(2), [data-theme="light"] .net-chart-line.download { --phase: #256aab; }
[data-theme="light"] .net-legend li:nth-child(3), [data-theme="light"] .net-chart-line.upload { --phase: #9d4b13; }
.net-chart-line { stroke: var(--phase); }
.net-chart-line.net-chart-dot { fill: var(--phase); stroke: none; }
.net-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem; color: var(--muted); margin-top: .35rem; font-size: .86rem; }
.net-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .55rem; margin: 0; }
.net-values > div { border-radius: .6rem; border: 1px solid var(--line); padding: .75rem; background: var(--soft); }
.net-values dt { color: var(--muted); font-size: .9rem; }
.net-values dd { font-size: 1.4rem; font-weight: 780; font-variant-numeric: tabular-nums; margin: .2rem 0; }
.net-values p { color: var(--muted); font-size: .8rem; margin: 0; }
.net-metrics button { border: 1px solid var(--line); background: var(--soft); color: var(--ink); }