.network-switch-layout { --sw-bg:#0b1119; --sw-card:#111923; --sw-border:#253244; --sw-muted:#7990aa; --sw-blue:#3b82f6; --sw-green:#22c55e; color:#e7edf6; font-size:13px; line-height:18px; }
.network-switch-layout .switch-back { margin:0 0 14px; padding:0; border:0; color:#91a7c1; background:none; cursor:pointer; font-size:12px; }
.network-switch-layout .switch-hero { min-width:0; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--sw-border); border-top:2px solid var(--sw-blue); border-radius:12px; background:radial-gradient(circle at 85% 0,rgba(59,130,246,.1),transparent 32%),linear-gradient(145deg,#131d29,#0d141d); }
.network-switch-layout .switch-identity { min-width:0; display:flex; align-items:center; gap:16px; }
.network-switch-layout .switch-icon { flex:0 0 54px; height:54px; display:grid; place-items:center; border:1px solid #175f63; border-radius:12px; color:#5eead4; background:#0d2b2d; font-size:18px; font-weight:800; }
.network-switch-layout .switch-title { min-width:0; }
.network-switch-layout .switch-title>div:first-child { display:flex; align-items:center; gap:10px; }
.network-switch-layout .switch-title h1 { font-size:24px; line-height:28px; font-weight:700; white-space:nowrap; }
.network-switch-layout .switch-title p { max-width:760px; margin:6px 0 9px; overflow:hidden; color:#9bb0c8; font-size:13px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
.network-switch-layout .switch-badges { display:flex; gap:7px; flex-wrap:wrap; }
.network-switch-layout .switch-badges span { padding:4px 8px; border:1px solid #2a3a4f; border-radius:5px; color:#a7bad0; background:#101923; font-size:11px; }
.network-switch-layout .switch-actions { flex:0 0 auto; text-align:right; }
.network-switch-layout .switch-actions>div { display:flex; gap:8px; justify-content:flex-end; }
.network-switch-layout .switch-actions button { min-height:40px; white-space:nowrap; }
.network-switch-layout .switch-actions small { display:block; margin-top:8px; color:#667b94; font-size:11px; }
.network-switch-layout .switch-more { width:40px; border:1px solid #33445a; border-radius:8px; color:#b6c7dc; background:#111b27; font-size:20px; cursor:pointer; }
.network-switch-layout .switch-summary { margin:12px 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.network-switch-layout .switch-summary article { min-width:0; min-height:108px; padding:16px; border:1px solid var(--sw-border); border-radius:10px; background:linear-gradient(145deg,#131c27,#0e151e); }
.network-switch-layout .switch-summary span,.network-switch-layout .switch-panel header span { color:#7489a2; font-size:11px; line-height:15px; letter-spacing:.04em; text-transform:uppercase; }
.network-switch-layout .switch-summary strong { display:block; margin:9px 0 5px; overflow:hidden; font-size:22px; line-height:28px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.network-switch-layout .switch-summary small { display:block; overflow:hidden; color:#7e94ad; font-size:12px; line-height:16px; text-overflow:ellipsis; white-space:nowrap; }
.network-switch-layout .switch-panel { min-width:0; overflow:hidden; border:1px solid var(--sw-border); border-radius:11px; background:var(--sw-card); }
.network-switch-layout .switch-panel>header { min-height:62px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--sw-border); }
.network-switch-layout .switch-panel header h2 { margin-top:3px; font-size:15px; line-height:18px; font-weight:700; }
.network-switch-layout .switch-panel header select { min-width:120px; padding:8px 10px; border:1px solid #34445a; border-radius:7px; color:#c4d1e2; background:#0b121a; font-size:12px; }
.network-switch-layout .switch-main-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); gap:12px; }
.network-switch-layout .switch-port-counts { display:flex; align-items:center; gap:12px; color:#8ca0b7; font-size:11px; font-style:normal; }
.network-switch-layout .switch-port-counts b { color:#4ade80; }.network-switch-layout .switch-port-counts em { color:#fb7185; font-style:normal; }
.network-switch-layout .switch-port-grid { min-height:224px; padding:20px; display:grid; grid-template-columns:repeat(12,minmax(42px,1fr)); gap:9px; align-content:center; background:radial-gradient(circle at 50% 40%,rgba(59,130,246,.05),transparent 58%); }
.network-switch-layout .switch-port { height:48px; padding:5px; display:grid; place-items:center; border:1px solid #3a4758; border-radius:4px; color:#dce8f5; background:#18222e; cursor:pointer; }
.network-switch-layout .switch-port strong { font-size:11px; line-height:12px; }.network-switch-layout .switch-port small { color:#a5b4c6; font-size:9px; line-height:10px; }.network-switch-layout .switch-port i { width:70%; height:4px; border-radius:2px; background:#64748b; }
.network-switch-layout .switch-port:hover { z-index:2; transform:translateY(-2px); box-shadow:0 8px 18px #0006; }
.network-switch-layout .switch-port.up,.network-switch-layout .switch-port.speed-1g { border-color:#16804d; background:#123225; }.network-switch-layout .switch-port.up i,.network-switch-layout .switch-port.speed-1g i { background:#22c55e; }
.network-switch-layout .switch-port.speed-100 { border-color:#a16a0e; background:#36290d; }.network-switch-layout .switch-port.speed-100 i { background:#fbbf24; }
.network-switch-layout .switch-port.speed-25g { border-color:#7549c4; background:#261b40; }.network-switch-layout .switch-port.speed-25g i { background:#8b5cf6; }
.network-switch-layout .switch-port.error { border-color:#a92d3b; background:#3c171d; }.network-switch-layout .switch-port.error i { background:#ef4444; }
.network-switch-layout .switch-port.disabled { border-color:#b86912; opacity:.78; }.network-switch-layout .switch-port.down { opacity:.58; }
.network-switch-layout .switch-port-map footer { padding:10px 16px 14px; display:flex; gap:14px; flex-wrap:wrap; color:#879bb3; font-size:11px; }
.network-switch-layout .switch-port-map footer span::before { content:""; width:8px; height:8px; margin-right:5px; display:inline-block; border-radius:2px; background:#64748b; }.network-switch-layout .switch-port-map footer .up::before{background:#22c55e}.network-switch-layout .switch-port-map footer .speed-100::before{background:#fbbf24}.network-switch-layout .switch-port-map footer .speed-1g::before{background:#3b82f6}.network-switch-layout .switch-port-map footer .speed-25g::before{background:#8b5cf6}.network-switch-layout .switch-port-map footer .disabled::before{background:#f97316}.network-switch-layout .switch-port-map footer .error::before{background:#ef4444}
.network-switch-layout .switch-traffic-chart { min-height:296px; padding:18px; display:grid; place-items:center; color:#7186a0; }
.network-switch-layout .switch-traffic-chart svg { width:100%; height:230px; }.network-switch-layout .switch-grid-line{fill:none;stroke:#263449;stroke-width:1;stroke-dasharray:3 5}.network-switch-layout .switch-rx-line,.network-switch-layout .switch-tx-line{fill:none;stroke:#3b82f6;stroke-width:2}.network-switch-layout .switch-tx-line{stroke:#8b5cf6}
.network-switch-layout .switch-chart-legend { width:100%; display:flex; gap:18px; color:#91a4bb; font-size:12px; }.network-switch-layout .switch-chart-legend span:first-child{color:#60a5fa}.network-switch-layout .switch-chart-legend span:nth-child(2){color:#a78bfa}.network-switch-layout .switch-chart-legend b{margin-left:auto}
.network-switch-layout .switch-empty-state { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; text-align:center; }.network-switch-layout .switch-empty-state strong{color:#a9bad0;font-size:15px}.network-switch-layout .switch-empty-state span{max-width:480px;color:#71869f;font-size:12px}
.network-switch-layout .switch-content-grid { margin-top:12px; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(290px,.65fr); gap:12px; }
.network-switch-layout .switch-table-filters { display:flex; gap:8px; }.network-switch-layout .switch-table-wrap { width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain; }.network-switch-layout table { width:100%;min-width:62rem;border-collapse:collapse;table-layout:auto;font-size:12px; }.network-switch-layout th,.network-switch-layout td { padding:11px 12px; border-bottom:1px solid #222f3f; text-align:left; white-space:nowrap; }.network-switch-layout th { color:#768ba5; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }.network-switch-layout td:nth-child(2){max-width:240px;overflow:hidden;text-overflow:ellipsis}.network-switch-layout .switch-table-port{padding:0;border:0;color:#8db9ff;background:none;font-weight:700;cursor:pointer}.network-switch-layout .switch-table-empty{text-align:center;color:#70849c}.network-switch-layout .switch-danger{color:#fb7185;font-weight:700}
.network-switch-layout .switch-state { padding:4px 7px; border-radius:999px; color:#94a3b8; background:#18222d; font-size:10px; }.network-switch-layout .switch-state.up,.network-switch-layout .switch-state.speed-1g{color:#4ade80;background:#0d2c1e}.network-switch-layout .switch-state.error{color:#fb7185;background:#35161c}
.network-switch-layout .switch-table-more { width:calc(100% - 28px); margin:10px 14px 14px; padding:9px; border:1px solid #2b3a4d; border-radius:7px; color:#9db0c8; background:#0e1620; cursor:pointer; }
.network-switch-layout .switch-capabilities>div { padding:8px 16px 15px; }.network-switch-layout .switch-capabilities p { margin:0; padding:10px 0; display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid #202c3b; }.network-switch-layout .switch-capabilities b { max-width:58%; text-align:right; font-size:12px; }.network-switch-layout .switch-capabilities .available{color:#4ade80}.network-switch-layout .switch-capabilities .unsupported{color:#718096;font-weight:500}
.network-switch-layout .switch-discovery { margin-top:12px; display:grid; grid-template-columns:1.6fr .7fr .7fr; gap:12px; }.network-switch-layout .switch-panel header>b{padding:5px 8px;border-radius:999px;color:#84aef0;background:#17243a;font-size:11px}.network-switch-layout .switch-compact-discovery>div{padding:12px 16px}.network-switch-layout .switch-compact-discovery p{margin:0;padding:9px 0;display:flex;justify-content:space-between;border-bottom:1px solid #202c3a}.network-switch-layout .switch-empty{color:#73879f;line-height:18px}.network-switch-layout .switch-mac-total{padding:20px;display:flex;align-items:center;flex-direction:column;text-align:center}.network-switch-layout .switch-mac-total strong{font-size:30px;line-height:34px}.network-switch-layout .switch-mac-total span{margin-top:5px;color:#92a6bd}.network-switch-layout .switch-mac-total small{margin:7px 0 13px;color:#687d96}.network-switch-layout .switch-mac-total button{padding:8px 12px;border:1px solid #2d4058;border-radius:7px;color:#a7bad1;background:#111d2a}.network-switch-layout .switch-poe-badge{margin:0 16px 16px;padding:5px 8px;display:inline-block;border-radius:999px;color:#8b9caf;background:#1a222c;font-size:10px}
.network-switch-layout .switch-footer-grid { margin-top:12px; display:grid; grid-template-columns:1.5fr 1fr; gap:12px; }.network-switch-layout .switch-inventory>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.network-switch-layout .switch-inventory p{min-width:0;margin:0;padding:13px 16px;border-right:1px solid #223043;border-bottom:1px solid #223043}.network-switch-layout .switch-inventory p span{display:block;color:#7388a1;font-size:10px;text-transform:uppercase}.network-switch-layout .switch-inventory p strong{display:block;margin-top:5px;overflow-wrap:anywhere;font-size:12px}.network-switch-layout .switch-events>div{padding:7px 16px}.network-switch-layout .switch-events p{margin:0;padding:11px 0;display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid #202d3c}.network-switch-layout .switch-events p>i{width:7px;height:7px;border-radius:50%;background:#3b82f6}.network-switch-layout .switch-events p>i.success{background:#22c55e}.network-switch-layout .switch-events p>i.warning{background:#f59e0b}.network-switch-layout .switch-events p span{display:grid}.network-switch-layout .switch-events p small,.network-switch-layout .switch-events time{color:#71859d;font-size:11px}
.network-switch-layout .switch-port-drawer{position:fixed;z-index:1200;inset:0}.network-switch-layout .switch-drawer-backdrop{position:absolute;inset:0;background:#02060bb8;backdrop-filter:blur(2px)}.network-switch-layout .switch-port-drawer-panel{position:absolute;top:0;right:0;width:min(430px,94vw);height:100%;overflow-y:auto;border-left:1px solid #33455d;background:#0d151f;box-shadow:-24px 0 60px #0008}.network-switch-layout .switch-port-drawer-panel header{padding:22px;display:flex;justify-content:space-between;border-bottom:1px solid #263447}.network-switch-layout .switch-port-drawer-panel header span{color:#60a5fa;font-size:10px;letter-spacing:.08em}.network-switch-layout .switch-port-drawer-panel header h2{margin:4px 0;font-size:22px}.network-switch-layout .switch-port-drawer-panel header p{color:#8094ac}.network-switch-layout .switch-port-drawer-panel header button{width:36px;height:36px;border:1px solid #34465d;border-radius:8px;color:#aebfd2;background:#111c29;font-size:21px}.network-switch-layout .switch-drawer-status{padding:16px 22px;display:flex;justify-content:space-between;border-bottom:1px solid #263447}.network-switch-layout .switch-drawer-status b{color:#94a3b8}.network-switch-layout .switch-drawer-status b.up,.network-switch-layout .switch-drawer-status b.speed-1g{color:#4ade80}.network-switch-layout .switch-drawer-status b.error{color:#fb7185}.network-switch-layout .switch-port-rate{padding:16px 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.network-switch-layout .switch-port-rate div{padding:13px;border:1px solid #29394d;border-radius:8px;background:#111b27}.network-switch-layout .switch-port-rate span{display:block;color:#71869f;font-size:10px;text-transform:uppercase}.network-switch-layout .switch-port-rate strong{display:block;margin-top:6px;font-size:18px}.network-switch-layout .switch-port-drawer-panel dl{margin:0;padding:6px 22px;display:grid;grid-template-columns:1fr 1.25fr}.network-switch-layout .switch-port-drawer-panel dt,.network-switch-layout .switch-port-drawer-panel dd{margin:0;padding:10px 0;border-bottom:1px solid #202e3e}.network-switch-layout .switch-port-drawer-panel dt{color:#71869e}.network-switch-layout .switch-port-drawer-panel dd{text-align:right;overflow-wrap:anywhere}.network-switch-layout .switch-port-mini-chart{margin:18px 22px;padding:24px;border:1px dashed #30435a;border-radius:9px;color:#7288a1;text-align:center}
@media(max-width:1300px){.network-switch-layout .switch-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.network-switch-layout .switch-main-grid{grid-template-columns:1fr}.network-switch-layout .switch-port-grid{grid-template-columns:repeat(12,minmax(40px,1fr))}}
@media(max-width:980px){.network-switch-layout .switch-hero{align-items:flex-start;flex-direction:column}.network-switch-layout .switch-actions{width:100%;text-align:left}.network-switch-layout .switch-actions>div{justify-content:flex-start}.network-switch-layout .switch-content-grid,.network-switch-layout .switch-discovery,.network-switch-layout .switch-footer-grid{grid-template-columns:1fr}.network-switch-layout .switch-port-grid{grid-template-columns:repeat(8,minmax(40px,1fr))}.network-switch-layout .switch-inventory>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.network-switch-layout .switch-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.network-switch-layout .switch-title h1{font-size:21px}.network-switch-layout .switch-title p{max-width:75vw}.network-switch-layout .switch-port-grid{grid-template-columns:repeat(6,minmax(38px,1fr));padding:12px}.network-switch-layout .switch-panel>header{align-items:flex-start;flex-direction:column}.network-switch-layout .switch-table-filters{width:100%;overflow-x:auto}.network-switch-layout .switch-inventory>div{grid-template-columns:1fr}}
@media(max-width:480px){.network-switch-layout .switch-summary{grid-template-columns:1fr}.network-switch-layout .switch-identity{align-items:flex-start}.network-switch-layout .switch-icon{display:none}.network-switch-layout .switch-actions>div{display:grid;grid-template-columns:1fr 1fr}.network-switch-layout .switch-more{display:none}.network-switch-layout .switch-port-grid{grid-template-columns:repeat(4,minmax(42px,1fr))}.network-switch-layout .switch-port-counts{align-items:flex-start;flex-direction:column;gap:2px}.network-switch-layout .switch-summary article{min-height:94px}.network-switch-layout .switch-port-drawer-panel{width:100%}}