.network-lab { min-width: 0; }
.network-lab h2 { font-size: 19px; margin: 0 0 12px; }
.network-lab h3 { font: 500 12px/1.4 var(--mono); margin: 10px 0 5px; color: var(--ink); }
.net-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-block: 12px; }
.net-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 400 12px/1.5 var(--mono); color: var(--text); }
.net-field input, .net-field select, .net-field textarea { border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); padding: 9px; font: 400 13px/1.4 var(--mono); max-width: 100%; min-width: 0; }
.net-field input { width: 170px; }
.net-field input[type="number"] { width: 75px; }
.net-field textarea { width: 100%; resize: vertical; }
.net-stage { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.net-stage svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.net-base { fill: var(--sunk); stroke: var(--rule); stroke-width: 2; }
.net-link { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.net-link.active { stroke: var(--crema); stroke-width: 6; }
.net-packet { fill: var(--crema); stroke: var(--ink); stroke-width: 2; }
.net-device { cursor: grab; touch-action: none; outline: none; }
.net-device path { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.net-device .net-top { fill: var(--surface); }
.net-device .net-side { fill: var(--sunk); }
.net-device .net-front { fill: var(--bg); }
.net-device .net-icon { fill: none; stroke-width: 2; }
.net-device .net-port-dot { fill: var(--ink); }
.net-device.lit .net-top, .net-device.lit .net-front { fill: var(--crema-soft); }
.net-device.lit .net-side { fill: var(--crema); }
.net-device.selected .net-top, .net-device:focus .net-top { stroke: var(--crema); stroke-width: 4; }
.net-device:focus .net-device-label { text-decoration: underline; }
.net-device-label { fill: var(--ink); font: 500 16px var(--sans); }
.net-device-sub { fill: var(--text); font: 400 12px var(--mono); }
.net-hint { font-size: 13px; margin: 8px 0 16px; }
.net-workspace { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(0, 1.65fr); gap: 24px; margin-top: 24px; }
.net-inspector, .net-simulation, .net-connect { min-width: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
.net-inspector form { display: flex; flex-direction: column; gap: 12px; }
.net-inspector input:not([type="checkbox"]) { width: 100%; }
.net-check { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.net-check input { width: 18px; height: 18px; }
.net-status { padding: 14px; background: var(--crema-soft); color: var(--ink); border-inline-start: 3px solid var(--crema); min-height: 90px; font-size: 14px; overflow-wrap: anywhere; }
.net-status.error { border-color: var(--bad); background: var(--bad-soft); }
.net-progress { font: 400 12px var(--mono); margin-inline-start: auto; }
.net-tables { display: grid; gap: 8px; }
.net-tables pre { padding: 10px; background: var(--sunk); font: 400 11px/1.7 var(--mono); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.net-log { padding-inline-start: 28px; height: 250px; overflow-y: auto; margin: 0; font: 400 12px/1.7 var(--mono); }
.net-log li { padding: 5px; overflow-wrap: anywhere; }
.net-log li[aria-current] { background: var(--crema-soft); color: var(--ink); }
.net-log li[data-kind="error"] { color: var(--bad); }
.net-connect { margin-top: 20px; }
.net-links { display: flex; flex-wrap: wrap; gap: 6px; }
.net-links .btn { font-size: 10px; padding: 8px; }
.net-notes { margin-block: 28px; font-size: 13px; border-top: 1px solid var(--rule); padding-top: 15px; }
.net-notes summary { cursor: pointer; color: var(--ink); }
@media (max-width: 650px) {
  .net-workspace { grid-template-columns: minmax(0, 1fr); }
  .net-stage { overflow-x: auto; }
  .net-stage svg { min-width: 640px; }
  .net-toolbar .net-field { flex: 1 1 140px; }
  .net-toolbar .net-field input, .net-toolbar .net-field select { width: 100%; }
  .net-toolbar .btn { min-height: 40px; }
  .net-status { min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .network-lab *, .network-lab *::before, .network-lab *::after { animation: none !important; transition: none !important; } }