:root{--bg:#0d1422;--panel:#182132;--panel-strong:#202a3d;--text:#f7fafc;--muted:#a9b4c4;--stroke:rgba(255,255,255,0.1);--brand:#6ea8fe;--danger:#ff6b6b}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(circle at top left,rgba(110,168,254,.18),transparent 36%),var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}.centerShell,.loginShell{min-height:100vh;display:grid;place-items:center;padding:24px}.loginPanel,.panel{width:min(100%,520px);border:1px solid var(--stroke);background:rgba(24,33,50,.92);border-radius:8px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.3)}.panel.compact{width:auto;display:inline-flex;align-items:center;gap:10px}.brandMark{width:48px;height:48px;display:grid;place-items:center;border-radius:8px;background:rgba(110,168,254,.16);color:var(--brand)}.contentHeader h1,.deviceHeader h2,.loginPanel h1{margin:0}.loginPanel h1{margin-top:18px;font-size:28px}.contentHeader p,.loginPanel p,.panel p{color:var(--muted);line-height:1.55}.loginForm{display:grid;grid-gap:10px;gap:10px;margin-top:22px}.loginForm label{color:var(--muted);font-size:13px;font-weight:700}.loginForm input{width:100%;border:1px solid var(--stroke);background:rgba(0,0,0,.22);color:var(--text);border-radius:8px;padding:12px 14px;outline:none}.iconButton,.loginForm button,.logoutButton,.rackButton{border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--text);border-radius:8px}.loginForm button,.logoutButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;font-weight:800}.loginForm button{background:rgba(110,168,254,.18);border-color:rgba(110,168,254,.38)}.errorBox,.notice{margin-top:14px;border-radius:8px;padding:12px}.notice{background:rgba(110,168,254,.12);color:#d8e8ff}.errorBox{display:grid;grid-gap:4px;gap:4px;border:1px solid rgba(255,107,107,.36);background:rgba(255,107,107,.1);color:#ffd7d7}.errorBox small{color:rgba(255,255,255,.72)}.appShell{min-height:100vh;display:grid;grid-template-columns:320px 1fr}.sidebar{border-right:1px solid var(--stroke);background:rgba(14,22,36,.82);padding:16px;display:flex;flex-direction:column;gap:16px}.contentHeader,.deviceHeader,.metric,.rackHeaderBar,.sidebarHeader,.statusCard{display:flex;align-items:center;justify-content:space-between;gap:12px}.deviceHeader span,.eyebrow,.rackButton small,.rackHeaderBar span,.sidebarHeader span,.statusCard span{color:var(--muted);font-size:12px}.iconButton{width:36px;height:36px;display:grid;place-items:center}.metric,.statusCard{justify-content:flex-start;border:1px solid var(--stroke);background:rgba(255,255,255,.05);border-radius:8px;padding:12px}.statusCard svg{color:#52c41a}.treeList{display:grid;grid-gap:12px;gap:12px;overflow:auto;padding-right:2px}.treeBuilding,.treeLocation,.treeSite{display:grid;grid-gap:6px;gap:6px}.treeBuilding{margin-left:10px}.treeLocation{margin-left:12px}.treeTitle{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:13px;font-weight:850}.treeTitle.muted{color:rgba(221,229,240,.82);font-weight:750}.treeTitle.small{color:var(--muted);font-size:12px}.searchInput{border:1px solid var(--stroke);background:rgba(0,0,0,.22);color:var(--text);border-radius:8px;padding:11px 12px;outline:none}.rackButton{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;grid-gap:10px;gap:10px;padding:12px;text-align:left}.rackButton.active{background:rgba(110,168,254,.18);border-color:rgba(110,168,254,.38)}.logoutButton{margin-top:auto}.emptyState{color:var(--muted);border:1px dashed var(--stroke);border-radius:8px;padding:14px}.content{padding:22px;display:grid;align-content:start;grid-gap:18px;gap:18px}.contentHeader{align-items:flex-start}.contentHeader h1{margin-top:4px;font-size:30px}.metrics{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.rackView{display:grid;grid-gap:14px;gap:14px}.rackHeaderBar{border:1px solid var(--stroke);background:rgba(24,33,50,.88);border-radius:8px;padding:14px}.rackHeaderBar h2{margin:0 0 4px}.rackStack{display:grid;grid-gap:10px;gap:10px}.deviceCard{border:1px solid var(--stroke);background:rgba(24,33,50,.88);border-radius:8px;display:grid;grid-template-columns:64px 1fr;overflow:hidden}.uBadge{display:grid;place-items:center;min-height:106px;border-right:1px solid var(--stroke);background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font-weight:900;font-size:13px}.deviceBody{min-width:0;padding:14px}.deviceHeader{margin-bottom:12px;align-items:flex-start}.deviceHeader svg{color:var(--brand)}.portGrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}.portGrid,.portSection{display:grid;grid-gap:6px;gap:6px}.portSection{margin-top:10px}.sectionLabel{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.portTile{min-height:50px;position:relative;border:1px solid var(--stroke);background:rgba(0,0,0,.2);border-radius:8px;padding:8px;display:grid;align-content:center;justify-items:center;grid-gap:4px;gap:4px;overflow:hidden}.portTile.linked{border-color:rgba(82,196,26,.42)}.portTile strong{position:relative;z-index:2;font-size:14px}.portTile small{position:relative;z-index:3;font-size:10px;font-weight:800;border-radius:4px;padding:1px 4px}.portColor{position:absolute;inset:0;border-radius:inherit;opacity:.16}.linkDot{position:absolute;right:8px;bottom:8px;width:7px;height:7px;border-radius:50%;background:#52c41a}.portTile em{position:absolute;left:5px;bottom:4px;z-index:3;font-style:normal;font-size:10px}.legend{max-width:560px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.legend span{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:11px}.legend i{width:8px;height:8px;border-radius:99px;display:inline-block}.legend .vlanDot{background:#3b82f6}.spin{animation:spin .9s linear infinite}.legacyLoadError{position:fixed;inset:24px auto auto 24px;z-index:9999;max-width:520px;border:1px solid rgba(255,107,107,.4);background:rgba(32,18,28,.95);color:#ffd7d7;border-radius:8px;padding:14px 16px;box-shadow:0 20px 70px rgba(0,0,0,.35)}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:860px){.appShell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--stroke)}.contentHeader{display:grid}.metrics{justify-content:flex-start}.deviceCard{grid-template-columns:48px 1fr}}