/* Tampilan topologi ringkas dan modern */
.topology-card{background:#fbfdfe;border-color:#dce7ec;box-shadow:0 8px 25px rgba(28,58,76,.05)}
#canvas{background-color:#fbfdfe;background-image:radial-gradient(#d7e5eb 1px,transparent 1px);background-size:24px 24px}
.node{width:176px!important;min-height:76px!important;padding:9px 10px!important;gap:9px!important;border-width:1.5px!important;border-radius:13px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 7px 18px rgba(26,65,87,.10)!important;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.node:hover,.node.selected{transform:translate(-50%,-50%) scale(1.025)!important;box-shadow:0 10px 25px rgba(27,82,112,.16)!important;outline:3px solid rgba(33,128,177,.12)!important}
.node.SERVER{border-color:#29485d!important}.node.JB{border-color:#2586b2!important}.node.ODP{border-color:#2b9b72!important}
.device-copy b{font-size:11px!important;line-height:1.22!important;margin:3px 0!important;color:#18384d!important}.device-copy small{font-size:8px!important;letter-spacing:.11em!important}.device-copy em{font-size:9px!important;margin-top:3px!important}
.patch-panel{width:52px!important;height:38px!important;padding:6px!important;gap:3px!important;border-width:2px!important}.patch-panel:before,.patch-panel:after{top:14px!important;height:8px!important}.patch-panel i{width:4px!important;height:4px!important}
.joint-box{width:50px!important;height:34px!important;border-width:2px!important;padding:3px 7px!important}.joint-box:before,.joint-box:after{top:12px!important;height:7px!important}.joint-box i{height:25px!important;border-left-width:1px!important}
.odp-box{width:43px!important;height:43px!important;border-width:2px!important;padding:6px!important;gap:4px!important}.odp-box:before{left:8px!important;right:8px!important;top:-5px!important;height:5px!important}.odp-box i{width:8px!important;height:8px!important;border-width:1px!important}
.cable-line{stroke:#8aa9ba!important;stroke-width:2.2!important;transition:stroke-width .15s,stroke .15s}.cable-line:hover{stroke:#287da7!important;stroke-width:4!important}.cable-line.fault{stroke:#e35a5a!important}
.cable-label{font-size:9px!important;fill:#4d6b7c!important;font-weight:800!important;stroke:#fbfdfe!important;stroke-width:4px!important}
.cable-label-name{font-size:9px;fill:#24485d;font-weight:800;letter-spacing:.01em}.cable-label-type{font-size:7px;fill:#6a8492;font-weight:700;letter-spacing:.08em}
.section-head{background:linear-gradient(180deg,#fff,#fbfdfe)}
.edit-mode .node{outline:2px dashed #efa43f!important;outline-offset:3px!important}