.network-search{display:flex;gap:8px;position:sticky;top:70px;z-index:4;background:var(--bg,#07111f);padding:10px 0}.network-search input{flex:1;min-width:0;font-size:16px;border:1px solid #3d546d;background:#111e2e;color:white;border-radius:12px;padding:12px}.map-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0}.map-toolbar select{min-height:44px;font-size:16px;background:#15273b;color:white;border-radius:8px}.network-viewport{height:70vh;min-height:430px;width:100%;overflow:hidden;touch-action:none;position:relative;background:radial-gradient(circle at 1px 1px,#21374d 1px,transparent 0) 0 0/22px 22px;border:1px solid #30435a;border-radius:18px;direction:ltr}.network-viewport:focus-visible{outline:2px solid #ffd075}#network-canvas{position:absolute;left:0;top:0;transform-origin:0 0}.network-svg{position:absolute;inset:0;overflow:visible;pointer-events:none}.network-svg text{fill:#bdcfe0;font:bold 20px system-ui;text-anchor:middle}.floor-band{fill:#0d1c2b;stroke:#284259;fill-opacity:.85}.fiber-line{fill:none;stroke-width:1.8;opacity:.38}.core-a{stroke:#43dcce}.core-b{stroke:#ad9bff}.core-link{stroke:#ffbc6c;opacity:.9;stroke-width:3}.selected-link{opacity:1;stroke-width:3}.network-node{position:absolute;width:236px;height:78px;padding:10px;background:#172b40;border:1px solid #456078;border-radius:12px;color:#eef7ff;text-decoration:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:14px;text-align:center;box-shadow:0 4px 12px #0005;box-sizing:border-box}.network-node strong{font-size:14px;line-height:1.4}.network-node small{font-size:12px}.network-node.core-node{background:#193d4b;border:2px solid #62e4d0}.network-node.selected{outline:4px solid #ffbf69;outline-offset:3px}.map-caption{font-size:14px;color:#c3d0e1}.switch-chassis{background:linear-gradient(140deg,#233346,#111b28);border:2px solid #56697d;border-radius:15px;padding:18px;margin:18px 0;box-shadow:inset 0 0 0 5px #0c1621}.chassis-label{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #46596c;padding:8px 0 18px;overflow-wrap:anywhere}.socket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:9px;direction:ltr}.socket{min-width:0;min-height:86px;border:1px solid #596d82;border-radius:7px;background:#172431;color:white;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}.socket strong{font-size:16px}.socket small{font-size:12px}.socket-jack{width:34px;height:21px;display:block;background:#02070b;border:2px solid #8391a0;border-top-width:6px;border-radius:3px}.socket.used{border-bottom:4px solid #56cbba}.socket.free{border-bottom:4px solid #7a8c9d}.socket.uplink{border-bottom:4px solid #af98ff}.sfp .socket-jack{height:13px;border-top-width:2px;width:40px}.socket.verified:after{content:'✓';color:#6bebba}.socket.revalidate{outline:2px dashed #ffbf69}.port-list{display:grid;gap:10px}.port-list article{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center}.port-list p{margin:5px 0;overflow-wrap:anywhere}.floor-thumb{max-width:100%;max-height:300px;display:block;object-fit:contain}.content{min-width:0}.button[aria-pressed=true]{outline:2px solid #ffbf69}dt,dd{overflow-wrap:anywhere}dd{margin-inline-start:15px}#field-sheet dl{max-width:100%}@media(min-width:1400px){.app-shell{max-width:none}.page-grid{max-width:none}.content{max-width:none}.network-viewport{height:78vh}.socket-grid{grid-template-columns:repeat(12,minmax(50px,1fr))}}@media(max-width:600px){.network-search{top:58px}.network-viewport{height:65dvh;min-height:420px}.map-toolbar .button{padding:8px;min-width:44px}.switch-chassis{padding:12px}.socket-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.socket{min-height:82px}.socket strong{font-size:15px}.chassis-label{font-size:14px}.port-list article{grid-template-columns:70px 1fr}.network-search button{padding-inline:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:600px){.switch-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.switch-summary .summary-card{min-height:70px;padding:10px}.switch-summary .value{font-size:1.2rem}.switch-summary .label{font-size:12px}.port-paging{position:sticky;bottom:0;background:#101c2b;padding:10px 0;z-index:2}}
/* v1.4 cabinet-first layout; all rack graphics are local HTML/CSS. */
.network-node{width:188px;height:102px;padding:9px;gap:4px}.network-node strong{font-size:15px}.network-node small{font-size:12px;line-height:1.25}.network-node span{font-size:13px}.network-svg .shaft-label{font-size:16px}.network-svg .floor-label{font-size:17px}.fiber-line{opacity:.45}.status-legend{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0;font-size:13px}.used{color:#69dac2}.free{color:#b4bdc9}.missing{color:#ffc276}.issue{color:#ff8a94}.socket{color:#f2f6fc}.socket.missing{border-bottom:4px solid #ffc276}.socket.issue{border-bottom:4px solid #ff8a94}.socket-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.socket{min-height:145px}.socket-device{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.switch-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.cabinet-tabs{display:flex;gap:10px;margin:18px 0}.cabinet-rack{max-width:820px;margin:20px auto 8px;background:#101a26;border:2px solid #4f6379;border-radius:14px 14px 6px 6px;padding:14px;box-shadow:0 10px 26px #0004}.rack-top{display:flex;justify-content:space-between;gap:10px;padding:6px 10px 20px;color:#e5eef9}.rack-interior{padding:10px 22px;border-inline:12px solid #26364a;background:repeating-linear-gradient(180deg,#101923 0 24px,#324051 24px 26px)}.rack-unit{background:linear-gradient(120deg,#25374c,#182637);border:1px solid #53677d;box-shadow:0 2px 3px #0006;border-radius:4px;padding:12px;margin:8px 0;color:#ecf4fd}.rack-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap;font-size:13px}.panel-controls{display:flex;gap:6px}.panel-controls .button{padding:6px 10px;min-height:36px}.rack-jacks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px;direction:ltr}.panel-jack{font:600 13px system-ui;background:#050c13;border:1px solid #718197;border-radius:3px;min-height:44px;padding:4px 0;cursor:pointer;border-top:5px solid #8695a7}.panel-jack small{display:block;font-size:9px}.panel-jack.used{border-top-color:#69dac2}.rack-manager{height:22px;background:repeating-linear-gradient(90deg,#050c13 0 9px,#465269 9px 12px);border:3px solid #1a2737;margin:8px 0;border-radius:3px}.rack-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;flex-wrap:wrap;min-height:86px}.rack-switch bdi{display:block;font-size:12px;margin-top:5px}.rack-switch-ports{max-width:180px;font-size:14px;color:#8a9cae;line-height:1.6}.rack-led{color:#69dac2}.rack-empty{display:flex;align-items:center;justify-content:center;color:#8493a6;font-size:13px}.fiber-jacks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.fiber-jacks i{width:18px;height:14px;background:#45b7a5;border:2px solid #101c27;border-radius:2px}.connection-header,.connection-row{display:grid;grid-template-columns:minmax(70px,1fr) minmax(100px,1.5fr) minmax(0,2fr);gap:12px;align-items:center;padding:13px;width:100%;text-align:start;direction:ltr}.connection-header{color:#a8bacd;font-size:13px;background:#122238;position:sticky;top:70px}.connection-row{font:15px system-ui;border:1px solid #34475e;border-inline-start-width:4px;border-radius:7px;background:#122033;min-height:60px;margin:5px 0;cursor:pointer}.connection-row>span{overflow-wrap:anywhere;min-width:0}.connection-row small{display:block;font-size:11px;color:#a7b9cf;overflow-wrap:anywhere}.connection-row.used{border-inline-start-color:#69dac2}.connection-row.missing{border-inline-start-color:#ffc276}.connection-row.issue{border-inline-start-color:#ff8a94}.simple-port{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.simple-port .detail-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;background:#142338;border:1px solid #304660;border-radius:10px;overflow-wrap:anywhere;min-width:0}.simple-port .detail-row>span{font-size:13px;color:#a8bdd3}.simple-port .button{font-size:12px;padding:4px 12px}.simple-edit{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.network-viewport{overscroll-behavior:contain}.cabinet-rack+.muted{text-align:center}
@media(min-width:1400px){.socket-grid{grid-template-columns:repeat(8,minmax(100px,1fr))}}
@media(max-width:600px){.socket-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.socket{min-height:136px}.socket-device{font-size:12px}.switch-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cabinet-rack{padding:8px}.rack-interior{padding:6px;border-inline-width:7px}.rack-unit{padding:9px}.rack-jacks{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.rack-switch-ports{display:none}.panel-controls .button{min-height:44px;min-width:44px}.connection-header,.connection-row{grid-template-columns:65px 95px minmax(0,1fr);gap:8px;padding:10px;font-size:13px}.simple-port,.simple-edit{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.network-node strong{font-size:15px}.status-legend{gap:10px;font-size:12px}}
.simple-port,.simple-edit{grid-template-columns:repeat(3,minmax(0,1fr))}.simple-port strong{max-width:100%}.network-node small span{font-size:12px}
@media(max-width:600px){.simple-port,.simple-edit{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.simple-port .detail-row{padding:10px}.simple-port strong{font-size:14px}.simple-edit input{font-size:16px}}
.sticky-floor-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.sticky-floor-labels span{position:absolute;left:0;background:#0e2032e8;color:#e2f1ff;border:1px solid #3e5874;border-radius:0 5px 5px 0;padding:4px 5px;font:bold 12px system-ui;min-width:30px;text-align:center}.network-svg .floor-label{visibility:hidden}

.socket.uplink{border-bottom-color:#69dac2}
.server-room-node{width:360px;height:122px;border:2px dashed #62e4d0;background:#102837;padding:8px;justify-content:flex-start}.server-room-title{color:#eef7ff;font-weight:800;text-decoration:none;width:100%;padding:4px}.server-room-node>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}.server-switch{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:66px;padding:5px;border:1px solid #527a83;border-radius:7px;background:#193d4b;color:#eef7ff;text-decoration:none}.server-switch small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.socket{padding:0;overflow:hidden}.socket-open{border:0;background:transparent;color:inherit;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:8px 4px}.quick-panel{border:0;border-top:1px solid #596d82;background:#24384d;color:#fff;width:100%;min-height:36px;font-weight:800;cursor:pointer}.quick-panel:hover,.quick-panel:focus-visible{background:#31516f;outline:2px solid #ffbf69;outline-offset:-2px}.connection-row .quick-panel{border:1px solid #596d82;border-radius:6px;min-height:42px}.list-port-open{border:0;background:transparent;color:inherit;min-height:42px;cursor:pointer}.missing-panel{border-color:#ff9f43!important;background:#573517!important}.missing-panel.attention{outline:4px solid #ff9f43;outline-offset:3px}.panel-choice{border:1px solid var(--line);border-radius:10px;margin:12px 0;padding:10px}.panel-choice>div{display:grid;grid-template-columns:repeat(6,minmax(42px,1fr));gap:7px;direction:ltr}.panel-choice-button{min-height:44px;border:1px solid #718197;border-radius:7px;background:#122033;color:#fff;cursor:pointer}.panel-choice-button.selected{outline:3px solid #69dac2;background:#234b4c}#field-toast{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(max-width:600px){.server-room-node{width:320px}.panel-choice>div{grid-template-columns:repeat(4,minmax(42px,1fr))}}

/* v1.7 cabinet, switch and port hierarchy */
.cabinet-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid rgba(83,214,199,.45);border-radius:var(--radius);background:linear-gradient(135deg,var(--cyan-soft),var(--surface));margin-bottom:.75rem}.cabinet-hero>div{display:flex;flex-direction:column;gap:.25rem}.cabinet-hero span{color:var(--muted);font-size:.85rem}.cabinet-health{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:.75rem 0 1rem}.cabinet-health a{display:flex;flex-direction:column;justify-content:center;min-height:82px;padding:.75rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none}.cabinet-health strong{font-size:1.4rem;line-height:1}.cabinet-health span{font-size:.75rem;color:var(--muted);margin-top:.35rem}.cabinet-switches{display:grid;gap:.5rem}.cabinet-switches>a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);text-decoration:none}.cabinet-switches>a div{display:flex;flex-direction:column;min-width:0}.cabinet-switches>a span,.cabinet-switches>a small{color:var(--muted);overflow-wrap:anywhere}.cabinet-media{display:grid;gap:1rem}.cabinet-media .photo-grid{margin-top:.5rem}.view-switcher{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0;padding:.45rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}.view-switcher .button{flex:1}.port-row-main{border:0;background:transparent;color:inherit;min-height:48px;text-align:start;cursor:pointer;min-width:0}.connection-row{transition:transform 150ms var(--ease-out),border-color 150ms ease}.connection-row:active{transform:scale(.995)}.connection-header{z-index:2}.cabinet-tabs{overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}.cabinet-tabs::-webkit-scrollbar{display:none}.cabinet-tabs .button{flex:0 0 auto;white-space:nowrap}.floor-thumb{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
@media(max-width:819px){.view-switcher{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:5;box-shadow:0 8px 22px #0006}.cabinet-hero{align-items:stretch;flex-direction:column}.cabinet-hero .button{min-height:48px}.cabinet-tabs{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:5;background:var(--bg);padding:.5rem 0}.cabinet-health{gap:.4rem}.cabinet-health a{padding:.55rem}.connection-header,.connection-row{grid-template-columns:56px 84px minmax(0,1fr);gap:.45rem}.connection-row{min-height:58px}.connection-row .quick-panel,.list-port-open,.port-row-main{min-height:48px}.network-viewport{border-radius:var(--radius-sm)}}