.system-topology{--sys-card:#0c202b;--sys-border:#345667;--sys-wire:#587789;--sys-text:#e5f3fa;--sys-muted:#9dbbc9;--sys-good:#40df91;--sys-warn:#ffd077;--sys-bad:#ff9595;padding:24px;margin-bottom:12px}
.system-topology-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.system-topology-head h2{font-size:16px;margin:0;color:var(--sys-text)}
.system-meter-counts{font-size:12px;color:var(--sys-muted)}
.system-topology-stage{position:relative;isolation:isolate}
.system-wires{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.system-wires path{fill:none;stroke:var(--sys-wire);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.system-infrastructure{display:flex;justify-content:center;align-items:stretch;gap:100px;padding-left:32px}
.system-infrastructure-node{background:var(--sys-card);border:1px solid var(--sys-border);border-radius:10px;box-sizing:border-box;flex:0 1 250px;min-width:0;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:20px 16px;min-height:140px;position:relative;gap:8px;color:var(--sys-text)}
.system-infrastructure-node strong{font-size:14px}.system-infrastructure-node>span{font-size:12px;color:var(--sys-good)}
.system-infrastructure-node small{font-size:11px;color:var(--sys-muted);text-align:center}
.system-infrastructure-node .node-led{top:14px;right:14px}
.system-device-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px;padding:0 0 0 32px;margin-top:60px}
.system-device-grid:empty{display:none}
.system-meter{min-width:0;position:relative;padding:18px;border:1px solid var(--sys-border);border-radius:10px;background:var(--sys-card);color:var(--sys-text);box-shadow:0 3px 10px #00000012}
.system-meter-name{font-size:14px;line-height:1.4;margin:0 0 8px;padding-right:30px;overflow-wrap:anywhere}
.system-meter-symbol{position:absolute;right:14px;top:14px;width:28px;height:28px;color:var(--sys-muted)}
.system-meter-symbol svg{fill:none;stroke:currentColor;stroke-width:1.8;width:100%;height:100%}
.system-meter-status{display:flex;align-items:center;gap:7px;color:var(--sys-warn);font-size:12px;font-weight:700;margin-bottom:14px}
.system-meter-status:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.system-meter[data-state=connected] .system-meter-status{color:var(--sys-good)}
.system-meter[data-state=error] .system-meter-status{color:var(--sys-bad)}
.system-meter[data-state=disabled] .system-meter-status,.system-meter[data-state=unknown] .system-meter-status{color:var(--sys-muted)}
.system-meter-endpoint,.system-meter-cadence,.system-meter-last{font-size:11px;line-height:1.6;color:var(--sys-muted);overflow-wrap:anywhere}
.system-meter-last{margin-top:7px}
.system-topology-message{font-size:12px;color:var(--sys-muted);margin:24px 0 0;line-height:1.5}
.status-unavailable .system-topology-message{color:var(--sys-warn)}
html[data-theme=light] .system-topology{--sys-card:#fff;--sys-border:#b9cedb;--sys-wire:#879fae;--sys-text:#142c40;--sys-muted:#4d6575;--sys-good:#087646;--sys-warn:#8a5400;--sys-bad:#b52e2e}
@media(max-width:1450px){.system-device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.system-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-infrastructure{gap:52px}}
@media(max-width:650px){.system-topology{padding:16px 12px}.system-infrastructure{flex-direction:column;gap:30px}.system-infrastructure-node{flex-basis:auto}.system-device-grid{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:50px}}