:root{--ink:#28343b;--muted:#8b969e;--line:#e7ebed;--good:#168a78;--warn:#bb8b30;--bad:#ca6464;--accent:#5285a7}
*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}button:focus-visible,[tabindex]:focus-visible{outline:2px solid #789cb4;outline-offset:4px}[hidden]{display:none!important}
main{position:relative;isolation:isolate;max-width:1920px;margin:auto;min-height:100svh;padding:22px 32px;display:flex;flex-direction:column;gap:18px}
main>header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px}h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-1.1px}.header-right{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:11px}#refresh{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 12px;color:#697982;cursor:pointer}
.service-health{margin-top:-13px;font-size:11px;color:var(--muted)}.measurement-summary-group{display:flex;gap:18px}.measurement-summary{display:flex;gap:8px;align-items:center}.measurement-summary strong{font-weight:500}.badge{color:var(--good);font-variant-numeric:tabular-nums}.badge.warn{color:var(--warn)}.badge.bad{color:var(--bad)}.badge.neutral{color:var(--muted)}
main>section,.location-strip{border:1px solid var(--line);border-radius:18px;background:#fff;padding:16px 20px;box-shadow:0 3px 12px #28343b03}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}h2{font-size:13px;font-weight:650;letter-spacing:-.2px;margin:0;color:#66737d}h2 small{display:inline-block;margin-left:7px;font-size:10px;color:#a1abb2;font-weight:500}.edge-network{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:20px}.edge-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.service-endpoints{display:flex;flex-direction:column;justify-content:center;gap:12px;border-left:1px solid #edf0f2;padding-left:18px}
.service-endpoint{position:relative;z-index:3;display:flex;align-items:center;gap:8px;background:#fff;color:#697c88;font-size:12px;font-weight:600;min-height:35px;border-radius:8px;transition:color .2s,opacity .2s}.service-endpoint svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}.service-endpoint.selected{color:var(--accent)}.service-endpoint.unrelated{opacity:.25}
.device-icon{position:relative;z-index:3;min-width:0;padding:8px 3px;background:transparent;border:0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--good);transition:opacity .18s,background .18s}.device-icon.warn{color:var(--warn)}.device-icon.bad{color:var(--bad)}.device-icon.neutral{color:#a3adb5}.device-icon:hover{background:#f6f9fa}.symbol{position:relative;display:block;width:62px;height:62px;border-radius:15px;background:#fff}.symbol svg{height:100%;width:100%;stroke-width:1.8}.signal{position:absolute;width:12px;height:12px;right:4px;bottom:6px;border:3px solid white;border-radius:50%;background:currentColor;font-size:0;box-shadow:0 0 0 1px #ffffff}.device-icon strong{position:relative;display:block;background:#fff;color:#46545e;font-size:12px;font-weight:550;margin-top:5px;white-space:nowrap;padding:0 3px;border-radius:4px}.state-label{display:block;background:#fff;font-size:11px;margin-top:2px;border-radius:3px;padding:0 3px}.hardware-zone .device-icon{min-height:112px}.world-status{display:flex;gap:6px;align-items:center;margin-top:2px;background:#fff;white-space:nowrap}.world-status .state-label{margin:0;padding:0}.world-analysis{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--good)}.world-analysis:before{content:"";width:1px;height:9px;background:#dfe6e9}.world-analysis.warn{color:var(--warn)}.world-analysis.neutral{color:var(--muted)}
.pens-zone{display:flex;flex-direction:column;min-height:280px;flex:1}.pen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px;flex:1}.pen-group{border:1px solid #edf0f2;background:#fff;border-radius:12px;padding:12px;min-width:0;display:flex;flex-direction:column}.pen-heading{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center}.pen-heading h3{margin:0;background:#fff;font-size:10px;color:#9aa5ad;font-weight:500;padding-right:4px}.pen-number{font-size:22px;font-weight:600;color:#48565f;letter-spacing:-1px;margin-right:5px;font-variant-numeric:tabular-nums}.location-icons{display:flex;align-items:center;justify-content:space-around;gap:8px;flex:1;min-width:0}.location-icons .device-icon{flex:1;padding:4px 1px}.location-icons .symbol{height:48px;width:48px}.location-icons .device-icon strong{font-size:11px;margin-top:1px}.location-icons .state-label{font-size:10px}.location-icons .signal{right:0;bottom:3px;width:10px;height:10px;border-width:2px}
.shared-locations{display:grid;grid-template-columns:1.2fr 3fr;gap:18px}.location-strip{display:flex;align-items:center;gap:20px;padding:12px 20px;min-width:0}.location-strip h2{position:relative;z-index:3;background:#fff;white-space:nowrap;font-size:13px}.location-strip .location-icons{gap:16px}.location-strip .symbol{height:40px;width:40px}footer{font-size:11px;color:var(--warn)}footer:has(#integration:empty){display:none}#alerts:empty{display:none}.alert,.danger{padding:8px 12px;background:#fff1de;color:#9d752e;border-radius:8px;font-size:12px}
#connection-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.connection{fill:none;stroke:#9cb4c4;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.19;transition:opacity .18s,stroke .18s;vector-effect:non-scaling-stroke}.connection-port{fill:#9cb4c4;opacity:.3;transition:opacity .18s}.connection.selected{stroke:#4a7b9e;stroke-width:1.7;opacity:.85}.connection-port.selected{fill:#4a7b9e;opacity:1}.connection.faded,.connection-port.faded{opacity:.025}
#detail{position:fixed;z-index:30;width:285px;background:#253743;color:#e7eff4;border:1px solid #ffffff15;border-radius:14px;padding:18px;box-shadow:0 12px 40px #1b30352b;pointer-events:none}#detail h3{margin:0;font-size:14px;color:#fff}#detail p{font-size:12px;line-height:1.8}#detail small{font-size:10px;color:#a9bdc9}.detail-metrics{display:flex;gap:22px}.detail-metrics span{display:block;font-size:10px}.detail-metrics b{font-size:20px}
.integrated-analysis{border:1px solid #dce8e3;border-radius:10px;padding:12px 16px;background:#f3f8f5;color:var(--good);cursor:pointer;font:inherit}.integrated-analysis.warn{background:#fff7ea;color:var(--warn)}.integrated-analysis.neutral{background:#f4f6f8;color:var(--muted)}.integrated-analysis span{font-size:12px;margin-left:12px}.mapping-note{font-size:9px;background:#fff5df;color:var(--warn);border:0;border-radius:4px}.mapping-warning{color:var(--warn)}
@media(min-width:1001px){main{height:100svh}.hardware-zone{flex-shrink:0}}
@media(min-width:1600px) and (min-height:900px){main{padding:30px 42px;gap:24px}h1{font-size:32px}.device-icon strong{font-size:15px}.hardware-zone .symbol{width:76px;height:76px}.hardware-zone .device-icon{min-height:135px}.pen-group{padding:16px}.pen-number{font-size:27px}.location-icons .symbol{width:62px;height:62px}.location-icons .device-icon strong{font-size:14px}.location-icons .state-label{font-size:12px}.location-strip .symbol{width:48px;height:48px}.pen-grid{gap:24px}}
@media(min-width:1001px) and (max-height:850px){main{padding:16px 24px;gap:12px}h1{font-size:25px}main>section{padding:12px 16px}.section-head{margin-bottom:6px}.hardware-zone .device-icon{min-height:95px}.hardware-zone .symbol{width:50px;height:50px}.pen-grid{gap:16px}.pen-group{padding:8px 12px}.pen-number{font-size:20px}.location-icons .symbol{height:44px;width:44px}.location-strip{padding:8px 16px}.service-health{margin-top:-7px}.edge-network{gap:14px}}
@media(max-width:1000px){main{padding:20px;gap:16px;height:auto}.edge-network{grid-template-columns:1fr 80px}.edge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pen-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.pen-group{min-height:156px}.shared-locations{grid-template-columns:1fr}.connection:not(.selected),.connection-port:not(.selected){opacity:0}}
@media(max-width:550px){main{padding:16px 10px;gap:14px}h1{font-size:19px;letter-spacing:-.7px}main>header{gap:5px}.header-right{gap:0}#clock{display:none}#refresh{font-size:10px;padding:6px 8px}.service-health{font-size:10px;margin-top:-8px}main>section{padding:12px 8px;border-radius:14px}.edge-network{grid-template-columns:minmax(0,1fr) 60px;gap:4px}.edge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 4px}.hardware-zone .device-icon{min-height:99px}.hardware-zone .symbol{width:46px;height:46px}.hardware-zone .device-icon strong{font-size:9px}.world-status{gap:3px}.world-status .state-label,.world-analysis{font-size:9px}.world-analysis{gap:3px}.service-endpoints{padding-left:6px;gap:35px}.service-endpoint{flex-direction:column;gap:3px;font-size:10px}.pen-grid{gap:16px 12px}.pen-group{padding:8px 5px;min-height:138px}.pen-number{font-size:20px}.location-icons{gap:2px}.location-icons .symbol{width:33px;height:33px}.location-icons .device-icon strong{font-size:9px}.location-icons .state-label{font-size:9px}.location-strip{padding:10px 8px;gap:8px}.location-strip h2{font-size:11px}.location-strip .location-icons{gap:2px}.location-strip .device-icon strong{font-size:8px}.location-strip .symbol{width:33px;height:33px}.integrated-analysis span{display:block;margin:4px 0}.service-health .badge{font-size:10px}}

#relationship{font-size:11px;color:#4b8791;margin-left:14px;font-weight:400}.device-icon.unrelated{opacity:.28}.device-icon.related{background:#e5f1ef;outline:1px solid #bfdcd4}.detail-action{border-top:1px solid #355866;padding-top:7px;color:#b8d9d9}.world-link{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:0}dialog{width:min(960px,calc(100vw - 32px));max-height:88vh;border:0;border-radius:16px;padding:0;color:#214654;background:#f8fafb;box-shadow:0 20px 80px #112e4a40}dialog::backdrop{background:#102c4166;backdrop-filter:blur(3px)}dialog>header{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid #e0e8ec;padding:22px 28px;margin:0}dialog>header h2{font-size:22px}#modal-subtitle{font-size:11px;color:#8b9da8;margin:5px 0 0}#modal-close{border:0;background:#eff3f5;border-radius:50%;width:34px;height:34px;font-size:25px;color:#54717f;cursor:pointer}#modal-body{padding:22px 28px}#modal-body .modal-section{margin:20px 0 0;padding:0 0 18px}#modal-body h3{font-size:15px;margin:0 0 12px}#modal-body h3 small{font-size:11px;color:#8b9da8;font-weight:400;margin-left:10px}.modal-metrics{display:flex;gap:40px}.modal-metrics span{display:block;font-size:11px;color:#8298a4}.modal-metrics strong{font-size:27px;font-weight:600}.relation-map{display:flex;align-items:center;gap:15px}.relation-parent,.relation-child{border:1px solid #c8ddd9;border-radius:7px;padding:9px 12px;background:white;color:#2d6b63;font:inherit;font-size:12px;cursor:pointer}.relation-parent{white-space:nowrap;background:#e9f3f0}.relation-children{display:flex;flex-wrap:wrap;gap:7px}.relation-child.inactive{color:#9aabb4;border-color:#e2e8eb;background:#f0f3f5}.relation-arrow{color:#8ba6b0}.empty-note,.history-note{font-size:12px;color:#8195a0}.history-note{margin:0 0 12px;font-size:11px}.history-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.history-chart{padding:12px;border:1px solid #e0e9ed;background:#fff;border-radius:9px}.history-chart strong{display:flex;justify-content:space-between;font-size:12px}.history-chart svg{width:100%;display:block;margin-top:6px}.history-chart small{font-size:9px;color:#8ba0aa}.history-table{max-height:320px;overflow:auto;border:1px solid #e0e9ed;border-radius:8px;background:white}.history-table table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}.history-table th{background:#edf3f5;position:sticky;top:0;text-align:left;padding:10px;color:#66818e;font-weight:500}.history-table td{padding:9px 10px;border-top:1px solid #edf2f4}.measurement-now{color:#557786;font-size:13px;margin:0}@media(max-width:600px){dialog{width:calc(100vw - 16px);max-height:94vh}dialog>header{padding:17px}#modal-body{padding:17px}.history-charts{grid-template-columns:1fr}.relation-map{align-items:flex-start;flex-direction:column;gap:8px}.relation-arrow{display:none}.modal-metrics{gap:25px}#relationship{display:block;margin:3px 0 0;font-size:10px}#modal-title{font-size:18px}}
.meaning-status{display:flex;align-items:center;gap:14px;padding:18px;border-radius:12px;background:#e9f4ef;color:#16836d}.meaning-status.warn{background:#fff3dd;color:#a87823}.meaning-status.bad{background:#fff0ed;color:#bd5353}.meaning-status.neutral{background:#edf1f3;color:#788c97}.meaning-dot{width:13px;height:13px;border-radius:50%;background:currentColor;flex-shrink:0}#modal-body .meaning-status h3{margin:0;font-size:20px;color:inherit}.meaning-status p{margin:5px 0 0;font-size:12px;color:#597581}.meaning-status>strong{margin-left:auto;font-size:29px;white-space:nowrap}.last-seen{color:#7d929c;font-size:12px;margin:12px 0}.last-seen b{color:#365d6b;margin-left:6px}.resource-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0}.resource-bars>div{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px}.resource-bars b{font-size:20px;line-height:1}.resource-track{grid-column:1/3;height:9px;background:#e1e9ed;border-radius:9px;overflow:hidden}.resource-track i{height:100%;display:block;border-radius:9px;transition:width .3s}.status-ribbon{display:flex;gap:2px;height:25px;overflow:hidden;border-radius:5px;background:#e8edef}.status-ribbon i{flex:1;min-width:1px;background:#a4b0b8}.status-ribbon .good{background:#3aab8c}.status-ribbon .warn{background:#d4a044}.status-ribbon .bad{background:#cf6868}.ribbon-labels{display:flex;justify-content:space-between;font-size:10px;color:#869aa4;margin-top:5px}.single-trend{max-width:650px}.single-trend svg{max-height:190px}#modal-subtitle:empty{display:none}.history-charts{margin-top:18px}#modal-body .history-note{font-size:10px;line-height:1.7}@media(max-width:600px){.meaning-status{flex-wrap:wrap;padding:14px}#modal-body .meaning-status h3{font-size:17px}.meaning-status>strong{font-size:25px}.resource-bars{grid-template-columns:1fr;gap:18px}.history-charts{grid-template-columns:1fr}}
.device-icon.related{background:#f1f6fa;outline:none}.device-icon.unrelated{opacity:.22}dialog>header{display:flex;align-items:center;justify-content:space-between}#relationship{display:none}

.connection[data-from^="sensor-"]:not(.selected){opacity:.07}.connection[data-from^="sensor-"].faded{opacity:.015}

/* Distinct surfaces without decorative side stripes. */
body{background:#e5ebf0}
.hardware-zone{--node-surface:#293f50;background:var(--node-surface);border-color:#293f50;box-shadow:0 5px 16px #243c4c12}
.hardware-zone h2{color:#c6d4df}.hardware-zone h2 small{color:#8da4b5}
.hardware-zone .device-icon{color:#70cbb8}.hardware-zone .device-icon.warn{color:#ebbd6a}.hardware-zone .device-icon.bad{color:#f09393}.hardware-zone .device-icon.neutral{color:#8ea2b1}
.hardware-zone .device-icon strong{color:#e3edf3}.hardware-zone .signal{border-color:var(--node-surface);box-shadow:none}
.hardware-zone .world-analysis{color:#70cbb8}.hardware-zone .world-analysis.warn{color:#ebbd6a}.hardware-zone .world-analysis.neutral{color:#8ea2b1}.hardware-zone .world-analysis:before{background:#536c7e}
.hardware-zone .device-icon:hover,.hardware-zone .device-icon.related{background:#354e61}
.hardware-zone .service-endpoints{border-color:#465b6c}.hardware-zone .service-endpoint{color:#c0d1de}.hardware-zone .service-endpoint.selected{color:#8fc6eb}
.pens-zone{background:#f5f8fa;border-color:#d1dde4}.pens-zone>.section-head h2{color:#536f7c}
.pen-group{--node-surface:#e9f1ef;background:var(--node-surface);border-color:#d0dfda}.pen-number{color:#355e56}.pen-heading h3{color:#76928a}
.pen-group .device-icon:hover,.pen-group .device-icon.related{background:#d8e8e2}
.common-zone{--node-surface:#dce7ef;background:var(--node-surface);border-color:#c3d3df}
.corridor-zone{--node-surface:#e4e4f0;background:var(--node-surface);border-color:#cecede}
.common-zone h2{color:#47667c}.corridor-zone h2{color:#646487}
.location-strip .device-icon:hover,.location-strip .device-icon.related{background:#ffffff55}
.hardware-zone .symbol,.hardware-zone .device-icon strong,.hardware-zone .state-label,.hardware-zone .world-status,.hardware-zone .service-endpoint,
.pen-group .symbol,.pen-group .device-icon strong,.pen-group .state-label,.pen-group .pen-heading h3,
.location-strip .symbol,.location-strip .device-icon strong,.location-strip .state-label,.location-strip h2{background:var(--node-surface)}
.pen-group .signal,.location-strip .signal{border-color:var(--node-surface);box-shadow:none}
.connection{stroke:#7a9bac}.connection.selected{stroke:#5184a6}.connection-port.selected{fill:#5184a6}