.optical-page{height:100%;overflow:auto;background:#fff;min-width:0}
.diagram-node-body{cursor:move}
.diagram-client .diagram-client-name{font-size:11px;font-weight:500;stroke:none}
.diagram-client .diagram-node-hit{fill:#fff;stroke:#6c929a;stroke-width:.8}
.diagram-wire,.diagram-port>line{stroke-width:1.8}
.diagram-edge.signal-active .diagram-signal-gap{fill:none;stroke:#eef0f2;stroke-width:4.2;stroke-dasharray:5 9;stroke-linecap:butt;pointer-events:none;animation:diagram-signal-flow .8s linear infinite}
.diagram-port.signal-active:not(.picked):not(.selected) .diagram-port-ring{stroke:#009c72;stroke-width:2;fill:#c9f5e5}
.diagram-device-port.signal-active .diagram-socket{fill:#00a56b;stroke:#075c46}
.diagram-port.signal-catv:not(.signal-active):not(.picked):not(.selected) .diagram-port-ring{stroke:#9d3db2;stroke-width:2;fill:#f4e5f8}
.diagram-device-port.signal-catv:not(.signal-active) .diagram-socket{fill:#a641b4;stroke:#6a2375}
.diagram-key.signal-legend i{border-top:2px dashed #009c72}
.diagram-key.signal-catv-legend i{border-top:2px dashed #a641b4}
.diagram-port.signal-active>line:last-of-type{stroke-dasharray:4 3;animation:diagram-signal-flow .8s linear infinite}
.diagram-port.signal-active.signal-inward>line:last-of-type{animation-direction:reverse}
.diagram-port.signal-catv:not(.signal-active)>line:last-of-type{stroke-dasharray:4 3;animation:diagram-signal-flow .8s linear infinite}.diagram-port.signal-catv.signal-inward>line:last-of-type{animation-direction:reverse}
@keyframes diagram-signal-flow{to{stroke-dashoffset:-14}}
@media (prefers-reduced-motion:reduce){.diagram-edge.signal-active .diagram-signal-gap,.diagram-port.signal-active>line:last-of-type,.diagram-port.signal-catv>line:last-of-type{animation:none}}
.diagram-wire-outline,.diagram-port>line:first-of-type:not(:last-of-type){stroke-width:2.6}
.client-access-actions{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.client-power{display:flex;flex-direction:column;gap:5px;margin:0 0 16px;padding:13px 14px;border:1px solid #cbe5e5;border-radius:8px;background:#f1f9f8;color:#264853;font-size:12px}
.client-power>strong{font-size:13px}.client-power p{margin:2px 0;line-height:1.4;color:#526e77}.client-power-label{color:#526e77;font-size:11px}.client-power-value{font-size:22px;font-weight:700;color:#007d78}.client-power-value small{font-size:12px;font-weight:600}
.odf-loss-group{min-width:0;margin:12px 0;padding:10px 12px 4px;border:1px solid #d8e6e9;border-radius:8px}.odf-loss-group legend{padding:0 5px;color:#204650;font-size:13px;font-weight:700}.odf-loss-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.odf-loss-grid label{min-width:0}.odf-loss-grid label small{display:block;color:#6c818b;font-size:11px;font-weight:400}.odf-loss-grid input{width:100%;min-width:0}
.type-heading-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#layout-status:not([hidden]){display:flex;align-items:center;gap:8px;color:#a32135;font-size:11px;flex-wrap:wrap}
#layout-status .text-button{color:#a32135;font-size:11px;font-weight:600}
.optical-odf-warning{color:#9a5b00;font-weight:600}
.diagram-edfa-heading{font-size:9px;font-weight:600;fill:#527780;pointer-events:none}
.diagram-edfa-in{fill:#0877c9}.diagram-edfa-out{fill:#008543}
.diagram-device-port[data-terminal*=":catv:"] .diagram-port-number{font-size:8px}
.diagram-device-port .diagram-socket{stroke:#fff;stroke-width:.8}
.diagram-device-port.used .diagram-socket{stroke:#183743;stroke-width:1.4}
.diagram-multiple-remove:not([hidden]){position:absolute;left:12px;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border:1px solid #b8d2d7;border-radius:8px;box-shadow:0 4px 16px #183b4725;font-size:12px;color:#34515e}
.diagram-multiple-remove span{min-width:145px}
.diagram-multiple-remove .button{min-height:34px}
.diagram-multiple-connect:not([hidden]){position:absolute;left:12px;bottom:14px;z-index:4;display:grid;gap:6px;width:min(440px,calc(100% - 24px));padding:10px;background:#fff;border:1px solid #b8d2d7;border-radius:8px;box-shadow:0 4px 16px #183b4725;color:#34515e;font-size:12px}
.diagram-multiple-connect strong{font-size:13px}.diagram-multiple-connect small{color:#607681}.diagram-multiple-connect details{max-height:140px;overflow:auto}.diagram-multiple-connect summary{cursor:pointer;color:#007b88}.diagram-multiple-connect ol{padding-left:22px;margin:6px 0}.diagram-multiple-connect li{padding:2px 0;overflow-wrap:anywhere}.diagram-multiple-connect>div{display:flex;gap:6px;flex-wrap:wrap}.diagram-multiple-connect .button{min-height:34px}
@media(max-width:520px){.diagram-multiple-remove:not([hidden]){left:8px;right:8px;bottom:64px;flex-wrap:wrap}.diagram-multiple-remove span{flex:1 1 100%}.diagram-multiple-remove .button{flex:1;min-height:40px}.diagram-stage:has(.diagram-multiple-remove:not([hidden])) .diagram-mobile-tip{display:none}}
@media(max-width:520px){.diagram-multiple-connect:not([hidden]){left:8px;bottom:64px;width:calc(100% - 16px);max-height:48%;overflow:auto}.diagram-multiple-connect .button{flex:1;min-height:40px}.diagram-stage:has(.diagram-multiple-connect:not([hidden])) .diagram-mobile-tip{display:none}}
.diagram-kind-card .diagram-device-name{font-size:10px}
.diagram-kind-card .diagram-port-number{font-size:8px}
.diagram-node-device .diagram-node-handle .diagram-node-name,.diagram-node-device .diagram-node-handle .diagram-caption{visibility:hidden}
.diagram-node-device .diagram-node-handle .diagram-node-hit{fill:transparent!important;stroke:transparent!important}
.diagram-olt-groups{pointer-events:none}
.diagram-olt-groups rect{fill:#e0edf0;fill-opacity:.36;stroke:#97b4ba;stroke-width:1;stroke-dasharray:5 4}
.diagram-olt-groups text{fill:#456b75;font-size:12px;font-weight:600;paint-order:stroke;stroke:#eef0f2;stroke-width:3px;stroke-linejoin:round}
.diagram-port[data-terminal^="splitter:"][data-terminal*=":out:"] .diagram-port-number{font-size:8px}
.optical-svg[data-mode=rotate] .diagram-node,.optical-svg[data-mode=rotate] .diagram-node *{cursor:pointer}
.optical-svg[data-dragging=node] .diagram-node *{cursor:grabbing}
.optical-svg[data-mode=rotate] .diagram-node:hover .diagram-node-hit{fill:#e0f7f9;stroke:#007b88}
.optical-svg[data-mode=rotate] .diagram-cut-controls{display:none}
.diagram-node-name,.diagram-caption{paint-order:stroke;stroke:#eef0f2;stroke-width:3px;stroke-linejoin:round}
.optical-page[data-site-type=pop] .diagram-node-name:not(.diagram-client-name){font-size:13px}
.optical-page[data-site-type=pop] .diagram-caption{font-size:10px}
.diagram-cut-control{cursor:pointer;color:#b42335;outline:none}
.diagram-cut-hit{fill:transparent;stroke:none;pointer-events:all}
.diagram-cut-control>svg{pointer-events:none;stroke:currentColor;stroke-width:2.5;opacity:0}
.diagram-cut-control:hover>svg,.diagram-cut-control:focus-visible>svg{opacity:1}
.diagram-port.wire-source .diagram-port-ring,.diagram-port.wire-target .diagram-port-ring{fill:#e0f7f9;stroke:#007b88}
.diagram-port.picked .diagram-port-ring{fill:#c2f3f6;stroke:#007b88;stroke-width:2.5}
.diagram-port.picked .diagram-port-number{font-weight:700;fill:#00636e}
.diagram-port.multi-source .diagram-port-ring{fill:#e5f0ff;stroke:#0877f9;stroke-width:2.5}.diagram-port.multi-target .diagram-port-ring{fill:#def9e8;stroke:#00a651;stroke-width:2.5}
.diagram-port.connection-end .diagram-port-ring{fill:#d9f7f8;stroke:#007b88;stroke-width:2.5}
.diagram-edge.selected .diagram-wire{stroke-width:3.5}
.diagram-key.patchcord i{border-color:#d1b500}.diagram-key.patchcord i::after{display:none}
.optical-colors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.optical-colors label{min-width:0}.optical-colors input{width:100%;height:34px;padding:2px}.optical-tray-list>div{display:flex;align-items:center;gap:8px;border-bottom:1px solid #dce5e8;padding:8px 0}.optical-tray-list strong{flex:1;overflow-wrap:anywhere}.optical-tray-list svg{width:16px;height:16px}.modal-fields table input{min-width:70px;width:100%}
.fiber-grid{max-height:360px;overflow-y:auto;scrollbar-gutter:stable}
.optical-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);border-bottom:1px solid #dce5e8}
.optical-fibers{padding:20px;border-right:1px solid #dce5e8;min-width:0}
.optical-splitters,.optical-splices{padding:20px;min-width:0}.optical-page h2{font-size:17px;margin:0}.optical-page h3{font-size:15px;margin:0}.optical-page small{font-size:12px;color:#60717a}
.fiber-heading,.fiber-row{display:grid;grid-template-columns:38px repeat(2,minmax(0,1fr)) 32px;gap:6px;align-items:center}.fiber-heading{font-size:10px;color:#60717a;margin:16px 0 6px}.fiber-row{padding:6px 0;border-bottom:1px solid #e4ecee;font-size:12px;min-height:42px}.fiber-through{grid-column:2/4;display:flex;align-items:center;gap:8px;color:#476265}.fiber-through svg{width:16px;height:16px}.fiber-row .icon-button{width:30px;height:30px}.optical-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px}
.optical-port{min-height:32px;background:#fff;border:1px solid #8ca7ac;border-radius:4px;color:#1a4b53;padding:5px 6px;cursor:pointer;font-size:11px;overflow-wrap:anywhere}.optical-port:not(:disabled):hover{background:#e0f7f9;border-color:#007b88}.optical-port.used{background:#d8f0ef;border-color:#007b88;color:#174b50}.optical-port:disabled{opacity:1;cursor:default}.optical-port:focus-visible{outline:2px solid #007b88;outline-offset:2px}
.optical-splitter{border:1px solid #c9d9dc;border-radius:6px;margin:14px 0;padding:16px;max-width:800px}.optical-splitter header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.optical-splitter h3{flex:1;overflow-wrap:anywhere}.optical-splitter p{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.splitter-input{display:flex;align-items:center;gap:12px;border-bottom:1px solid #dce5e8;padding-bottom:14px;margin-bottom:14px}.splitter-input svg{width:24px;height:24px;color:#007b88}.splitter-input .optical-port{min-width:90px}.splitter-outputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}.splitter-outputs .optical-port{aspect-ratio:1;max-height:44px}
.optical-terminal{border:0;border-bottom:1px solid #dce5e8;padding:0 0 12px;margin:0 0 16px;min-width:0}.optical-terminal legend{font-weight:600;font-size:13px;padding:0;margin-bottom:12px}#open-optical{margin-bottom:18px}.optical-splices .table-wrap{max-width:100%}.optical-splices td{max-width:360px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:850px){.optical-layout{grid-template-columns:minmax(0,1fr)}.optical-fibers{border-right:0;border-bottom:1px solid #dce5e8}.optical-fibers,.optical-splitters,.optical-splices{padding:16px 12px}.optical-splitter{padding:12px}.optical-splices table{min-width:540px}}
.optical-view-tabs{display:flex;gap:2px;border:1px solid #cfdbdf;border-radius:5px;padding:2px;margin-left:auto;flex-shrink:0}.optical-view-tabs button{border:0;background:transparent;border-radius:3px;color:#50646f;display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:12px}.optical-view-tabs [aria-selected=true]{background:var(--brand-soft);color:var(--brand-edge);font-weight:600}.optical-view-tabs svg{width:16px;height:16px}
.optical-page.diagram-view{display:flex;flex-direction:column;overflow:hidden;min-height:0}.optical-page.diagram-expanded{position:fixed;inset:0;z-index:2000;height:100dvh}
.optical-diagram-heading{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #dce5e8;min-width:0;flex-shrink:0}.optical-site-title{min-width:0;max-width:300px}.optical-site-title h1{font-size:17px;overflow-wrap:anywhere}.optical-site-title small{display:block;margin-top:3px;font-size:11px}.optical-counts{display:flex;gap:16px;border-left:1px solid #dce5e8;margin-left:8px;padding-left:18px;font-size:11px;color:#4c6672;flex-wrap:wrap}
.optical-diagram-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid #dce5e8;background:#f8fafb;flex-shrink:0}.optical-diagram-toolbar .button{min-height:34px;font-weight:500}.optical-modes{display:flex;gap:4px;border-right:1px solid #dce5e8;padding-right:9px}.optical-modes [aria-pressed=true]{background:var(--brand-soft);border-color:var(--brand-edge);color:var(--brand-edge)}#diagram-reset{margin-left:auto}
.diagram-stage{position:relative;flex:1;min-height:180px;overflow:hidden;background:#eef0f2}.diagram-stage .optical-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;outline-offset:-3px}.optical-svg:active{cursor:grabbing}.optical-svg[data-mode=connect] .diagram-port:not(.used):not(.continuous){cursor:crosshair}.optical-svg[data-mode=cut] .diagram-port{cursor:crosshair}
.diagram-node-name{font-size:15px;font-weight:600;fill:#263f49}.diagram-caption{font-size:11px;fill:#607681}.diagram-node-handle{cursor:move}.diagram-node-hit{fill:transparent;stroke:transparent}.diagram-node.selected .diagram-node-hit,.diagram-node-handle:hover .diagram-node-hit,.diagram-node-handle:focus .diagram-node-hit{fill:#e0f7f9;stroke:#007b88}.diagram-port-number{font-size:10px;fill:#405966;font-variant-numeric:tabular-nums}.diagram-ratio{font-size:12px;fill:#607681;pointer-events:none}.diagram-plc-label{font-size:14px;font-weight:600;fill:#263f49}.diagram-port{cursor:pointer;outline:none}.diagram-port-hit{fill:transparent}.diagram-port-ring{fill:transparent;stroke:transparent;stroke-width:2}.diagram-port:hover .diagram-port-ring,.diagram-port:focus .diagram-port-ring,.diagram-port.selected .diagram-port-ring{fill:#e0f7f9;stroke:#007b88}.diagram-port.pending .diagram-port-ring{fill:#00c2d4;stroke:#222729}
.diagram-wire,.diagram-wire-outline{pointer-events:none;stroke-linecap:butt}.diagram-wire-hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}.diagram-edge.continuity{pointer-events:none}.diagram-edge.selected .diagram-wire,.diagram-edge:focus .diagram-wire,.diagram-edge:hover .diagram-wire{stroke-width:2.4}.diagram-splice-symbol{fill:#fff;stroke:#5b747e;stroke-width:1;pointer-events:none}.diagram-fusion-sleeve{fill:#fff;stroke:#3d5661;stroke-width:1.6}.diagram-edge.selected .diagram-splice-symbol{fill:#e0f7f9;stroke:#007b88}.diagram-draft{pointer-events:none}
.diagram-edge.selected .diagram-wire{stroke-width:3.5}
.diagram-zoom{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:3px;border:1px solid #cedce1;border-radius:5px;background:#fff;padding:4px;box-shadow:0 2px 8px #192a3212}.diagram-zoom-value{width:48px;font-size:11px;text-align:center;font-variant-numeric:tabular-nums}.diagram-footer{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:8px 16px;border-top:1px solid #dce5e8;font-size:10px;color:#607782;flex-shrink:0}.diagram-footer>span:last-child{margin-left:auto}.diagram-key{display:flex;align-items:center;gap:7px}.diagram-key i{display:inline-block;width:20px;border-top:2px solid #758d96;position:relative}.diagram-key:not(.continuity) i::after{content:'';position:absolute;width:10px;height:5px;left:4px;top:-4px;border:1px solid #3d5661;border-radius:2px;background:#edf2f4}
.diagram-key.patchcord i{border-color:#d1b500}.diagram-key.patchcord i::after{display:none}
.diagram-details{position:absolute;right:12px;top:12px;width:275px;max-width:calc(100% - 24px);max-height:calc(100% - 90px);overflow:auto;background:#fff;border:1px solid #cbdce1;border-top:3px solid var(--brand);border-radius:5px;box-shadow:0 4px 18px #14282f22;padding:14px;font-size:12px}.diagram-details header{display:flex;align-items:center;gap:6px;border-bottom:1px solid #dce5e8;padding-bottom:8px;margin-bottom:10px}.diagram-details h2{font-size:15px;overflow-wrap:anywhere;flex:1}.diagram-details p{overflow-wrap:anywhere;white-space:pre-wrap;margin:8px 0}.diagram-details dl{display:grid;grid-template-columns:1fr 1fr;gap:10px}.diagram-details dt{color:#657d86}.diagram-details dd{margin:0;text-align:right}.diagram-details .button{width:100%;margin-top:8px}.diagram-details label{margin-top:16px}.diagram-pending{position:absolute;left:12px;bottom:16px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 240px);padding:5px 10px;background:#e0f7f9;border:1px solid #007b88;border-radius:4px;font-size:11px}.diagram-pending span{overflow-wrap:anywhere}.diagram-empty{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);margin:0;font-size:13px;color:#607782;text-align:center;pointer-events:none}.splice-confirm{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.splice-confirm p{margin:0;overflow-wrap:anywhere;text-align:center}
@media(max-width:900px){.optical-counts{display:none}.optical-diagram-heading{gap:6px;padding:8px}.optical-diagram-toolbar{padding:6px 8px;gap:6px}.optical-site-title{max-width:220px}.optical-diagram-heading .icon-button{width:30px;height:32px}.optical-view-tabs button{padding:6px}.optical-diagram-toolbar .button{font-size:11px;padding:7px 9px}.optical-modes{gap:3px;padding-right:6px}.diagram-pending{bottom:68px;max-width:calc(100% - 24px)}}
@media(max-width:520px){.optical-diagram-heading{flex-wrap:wrap}.optical-site-title{max-width:calc(100% - 48px);flex:1 1 calc(100% - 48px)}.optical-diagram-heading .optical-view-tabs{order:2;margin-left:0}.optical-diagram-heading #optical-expand{margin-left:auto;order:2}.optical-diagram-heading #optical-reload{order:2}.optical-modes{border-right:0;width:100%}.optical-modes .button{flex:1;padding:7px 6px}.diagram-footer{padding:6px 8px;gap:8px}.diagram-footer>span:last-child{display:none}.diagram-zoom{bottom:10px;right:10px}.diagram-details{max-height:calc(100% - 80px)}}

/* Compact optical workspace controls */
.optical-diagram-heading{position:relative;z-index:3;gap:6px;padding:5px 12px;min-height:48px;background:#fff}
.optical-site-title{flex:0 1 auto;max-width:190px;min-width:70px}
.optical-site-title h1{font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optical-site-title small{font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.optical-counts{gap:8px;white-space:nowrap;margin-left:2px;padding-left:10px;font-size:10px}
.optical-diagram-toolbar{padding:0;margin-left:6px;gap:3px;border:0;background:transparent;flex-wrap:nowrap}
.optical-modes{gap:2px;padding-right:5px}
.optical-modes .icon-button,.optical-diagram-toolbar>.icon-button,.optical-diagram-heading>.icon-button,.optical-more>summary{width:32px;height:32px;flex-shrink:0}
.optical-modes [aria-pressed=true]{background:var(--brand-soft);color:var(--brand-edge)}
.optical-more{position:relative;flex-shrink:0}
.optical-more>summary{list-style:none;display:grid;place-items:center;cursor:pointer}
.optical-more>summary::-webkit-details-marker{display:none}
.optical-more[open]>summary{background:var(--brand-soft);color:var(--brand-edge)}
.optical-more-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:5;min-width:220px;padding:4px;background:#fff;border:1px solid #cbdce1;border-radius:5px;box-shadow:0 4px 16px #14282f26}
.optical-more-menu button{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;border:0;background:transparent;color:#34515e;text-align:left;padding:6px 9px;font-size:12px;border-radius:3px}
.optical-more-menu button:hover:not(:disabled),.optical-more-menu button:focus-visible{background:#e0f7f9}
.optical-more-menu button:disabled{opacity:.45;cursor:default}
.optical-more-menu button svg{width:16px;height:16px;flex-shrink:0}
.pop-type-menu{position:fixed;z-index:10000;min-width:210px;max-width:min(320px,calc(100vw - 8px));max-height:50vh;overflow:auto;padding:8px;background:#fff;border:1px solid #cbdce1;border-radius:6px;box-shadow:0 6px 20px #14282f33;color:#24404d}
.pop-type-menu strong{display:block;padding:6px 9px;font-size:12px}
.pop-type-menu p{max-width:260px;margin:4px 9px 8px;font-size:12px;line-height:1.4}
.pop-type-menu button{display:block;width:100%;padding:9px;border:0;border-radius:4px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.pop-type-menu button:hover,.pop-type-menu button:focus-visible{background:#e0f7f9}
@media(max-width:1100px){.optical-counts{display:none}}
@media(max-width:700px){.optical-diagram-heading{gap:4px;padding:4px 8px}.optical-diagram-toolbar{margin-left:2px}.optical-site-title{max-width:130px}.optical-view-tabs button{padding:6px}}
@media(max-width:520px){.optical-diagram-heading{flex-wrap:wrap}.optical-site-title{max-width:none;flex:1 1 calc(100% - 48px)}.optical-diagram-toolbar{order:2;margin-left:0}.optical-modes{width:auto;border-right:1px solid #dce5e8}.optical-diagram-heading .optical-view-tabs{order:2;margin-left:auto}.optical-diagram-heading .optical-view-tabs span{display:none}.optical-diagram-heading #optical-expand{order:2;margin-left:0}.optical-diagram-heading .optical-more{order:2}}
.optical-diagram-toolbar .optical-tool{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;height:32px;padding:0 8px;font-size:11px;font-weight:500;white-space:nowrap;flex-shrink:0}
.optical-diagram-toolbar .optical-tool svg{width:15px;height:15px;flex-shrink:0}
.optical-diagram-toolbar .optical-tool[aria-pressed=true]{background:var(--brand-soft);color:var(--brand-edge)}
.optical-diagram-toolbar{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:thin}
.optical-diagram-toolbar::-webkit-scrollbar{height:3px}
.optical-diagram-toolbar::-webkit-scrollbar-thumb{background:#a7bdc3;border-radius:3px}
.optical-quick-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.optical-quick-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 7px;border:0;border-radius:4px;background:transparent;color:#425c69;font-size:11px;white-space:nowrap}
.optical-quick-button:hover,.optical-quick-button:focus-visible{background:var(--brand-soft);color:var(--brand-edge)}
.optical-quick-button svg{width:16px;height:16px}
.optical-quick-actions #optical-reload{order:0}
@media(max-width:1100px){.optical-quick-button{width:32px;padding:0}.optical-quick-button span{display:none}}
@media(max-width:520px){.optical-site-title{flex:1 1 70px;min-width:50px}.optical-diagram-toolbar{flex:0 0 100%;max-width:100%;order:3;margin:0}.optical-diagram-heading .optical-view-tabs{order:2;margin-left:auto}.optical-diagram-heading .optical-view-tabs span{display:none}.optical-diagram-heading #optical-expand,.optical-diagram-heading .optical-more{order:2}}
@media(max-width:520px){.optical-quick-actions{order:2}}

/* POP workspace: restrained depth and larger touch controls. */
.optical-page[data-site-type="pop"] .diagram-stage{background-color:#eef2f3;background-image:radial-gradient(#cbd9dc 0.7px,transparent 0.7px);background-size:24px 24px}
.optical-page[data-site-type="pop"] .diagram-device-body{stroke:#86a8af;stroke-width:1;filter:drop-shadow(0 2px 2px #173b4314)}
.optical-page[data-site-type="pop"] .diagram-device-name{fill:#294b55;font-weight:600}
.optical-page[data-site-type="pop"] .diagram-olt-groups rect{fill:#e4f0f1;fill-opacity:.55;stroke:#a6c3c8;stroke-dasharray:4 3}
.optical-page[data-site-type="pop"] .diagram-zoom{border-radius:9px;box-shadow:0 4px 16px #183b4720}
.diagram-mobile-tip{display:none}
@media(max-width:520px){
  .optical-page[data-site-type="pop"] .optical-diagram-heading{padding:5px 8px 0;row-gap:3px}
  .optical-page[data-site-type="pop"] .optical-diagram-toolbar{gap:3px;min-height:47px;padding:2px 0 4px;scrollbar-width:thin}
  .optical-page[data-site-type="pop"] .optical-tool{min-height:40px;padding:0 10px;border-radius:7px}
  .optical-page[data-site-type="pop"] .diagram-zoom{bottom:10px;right:10px;padding:3px}
  .optical-page[data-site-type="pop"] .diagram-zoom .icon-button{width:40px;height:40px}
  .optical-page[data-site-type="pop"] .diagram-zoom-value{width:38px}
  .optical-page[data-site-type="pop"] .diagram-details{top:auto;right:8px;bottom:64px;width:calc(100% - 16px);max-width:none;max-height:45%;border-radius:10px;padding:12px;box-shadow:0 8px 24px #14394330}
  .optical-page[data-site-type="pop"] .diagram-mobile-tip{display:block;position:absolute;left:10px;bottom:12px;max-width:calc(100% - 190px);padding:6px 8px;border-radius:7px;background:#fffffff0;color:#56717a;font-size:10px;line-height:1.25;box-shadow:0 2px 8px #183b4714;pointer-events:none}
  .optical-page[data-site-type="pop"] .diagram-stage:has(.diagram-pending:not([hidden])) .diagram-mobile-tip{display:none}
  .optical-page[data-site-type="pop"] .diagram-footer{gap:10px;padding:5px 10px;font-size:10px}
}