.network-shell { background: #24272b; }
.network-tools { padding: 12px; gap: 12px; }
.network-shell .network-canvas { height: 480px; background-color: #23262a; background-image: radial-gradient(#41464d .7px, transparent .7px); background-size: 20px 20px; }
.network-shell .network-canvas.network-compact { height: 300px; }
.network-node > rect { fill: #30343a; stroke: #606a76; stroke-width: 1; }
.network-node.conditioned > rect { fill: #2e363f; }
.network-node.oahu > rect { fill: #303c3c; stroke: #7b9d9e; }
.network-node.unconditioned > rect { fill: #353432; stroke: #736e65; }
.network-node .node-type { font-size: 8px; letter-spacing: .7px; fill: #a8b1ba; }
.network-node .node-title { font-size: 12px; font-weight: 600; fill: #e5e9ee; }
.network-node .node-detail { font-size: 10px; fill: #adb9c6; }
.network-port { cursor: crosshair; }
.network-port .port-hit { fill: transparent; stroke: none; }
.network-port .port-dot { fill: #252b32; stroke: #a6bbcc; stroke-width: 1.5; }
.network-port:hover .port-dot, .network-node.connect-target .port-dot { fill: #b2d9fc; stroke: #e4f3ff; }
.network-port.automatic-port { cursor: default; }
.network-port.automatic-port .port-dot { fill: #6d8d8e; }
.network-node.connect-target > rect { stroke: #a9d3f7; stroke-width: 2; }
.network-shell .edge-line { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-edge.treated .edge-line { stroke: #94c1bf; }
.flow-edge.automatic .edge-line { stroke-dasharray: 5 5; }
.network-shell .edge-label { font-size: 10px; stroke: #23262a; stroke-width: 6px; }
.network-pending { fill: none; stroke: #b6d9f8; stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.network-inspector { padding: 18px; }
.network-inspector .inspector-title { align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.network-inspector .inspector-title > div { display: flex; gap: 6px; flex-wrap: wrap; }
.network-inspector .fields { margin-top: 14px; }
.network-inspector .inspector-kicker { display: block; color: #a7b3bd; font-size: 10px; margin-bottom: 3px; }
.network-help { padding: 10px 16px; }
.oahu-summary { margin-top: 14px; }
.oahu-summary .table-scroll { margin-top: 12px; }
.oahu-summary td { font-variant-numeric: tabular-nums; }
@media(max-width:700px){.network-shell .network-canvas{height:420px}.network-inspector{padding:14px}.network-inspector .fields.four{grid-template-columns:1fr 1fr}}