:root{color-scheme:dark;--bg-main: radial-gradient(circle at top, #1b1633 0, #0d0b18 55%);--bg-panel: #161427;--bg-panel-alt: #1f1b3a;--border-subtle: #2e2a4e;--accent: #b18cff;--accent-soft: rgba(177, 140, 255, .22);--text-main: #ece8ff;--text-muted: #a79ed0;--danger: #ff9aa6;--cable-network: #7ff3c2;--cable-power: #ffb38a;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}[data-theme=dark]{color-scheme:dark;--bg-main: radial-gradient(circle at top, #1b1633 0, #0d0b18 55%);--bg-panel: #161427;--bg-panel-alt: #1f1b3a;--border-subtle: #2e2a4e;--accent: #b18cff;--accent-soft: rgba(177, 140, 255, .22);--text-main: #ece8ff;--text-muted: #a79ed0;--danger: #ff9aa6;--cable-network: #7ff3c2;--cable-power: #ffb38a;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}[data-theme=terminal]{color-scheme:dark;--bg-main: radial-gradient(circle at top, #050905 0, #020402 55%);--bg-panel: #050b05;--bg-panel-alt: #071108;--border-subtle: #0f1f12;--accent: #5cff5c;--accent-soft: rgba(92, 255, 92, .16);--text-main: #c0ffb0;--text-muted: #6fa76f;--danger: #ff6767;--cable-network: #5cff5c;--cable-power: #ffd866;--font-sans: "JetBrains Mono", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;background:var(--bg-main);color:var(--text-main);font-family:var(--font-sans)}.app-root{height:100vh;display:flex;flex-direction:column}.app-shell{flex:1;display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:12px;padding:12px;align-items:start}.panel{background:var(--bg-panel);border-radius:12px;border:1px solid var(--border-subtle);padding:10px 12px;overflow:hidden;align-self:start}.panel h3{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.panel-body{height:calc(100% - 26px);overflow:auto}.topbar{height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle)}.brand{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px}.badge{background:var(--accent-soft);color:var(--accent);padding:3px 8px;border-radius:999px;font-size:11px;text-transform:uppercase}.btn{border:none;border-radius:8px;padding:6px 10px;font-size:12px;background:var(--bg-panel-alt);color:var(--text-main);cursor:pointer;transition:background .15s ease-out,transform .08s ease-out,box-shadow .15s ease-out}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000059}.btn:active{transform:translateY(0);box-shadow:none}.btn.primary{background:var(--accent);color:#0c0717}.btn-chip{padding:4px 8px;font-size:11px;border-radius:999px}.cable-svg{pointer-events:none}.cable-path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px;stroke-dasharray:6 6;animation:cable-flow 1.1s linear infinite;filter:drop-shadow(0 0 2px currentColor) drop-shadow(0 0 10px currentColor)}.cable-network{stroke:var(--cable-network, #1abc9c);color:var(--cable-network, #1abc9c)}.cable-power{stroke:var(--cable-power, #e17055);color:var(--cable-power, #e17055)}.cable-off{opacity:.35;animation:none;filter:drop-shadow(0 0 1px currentColor) drop-shadow(0 0 3px currentColor)}.rack-device:hover .device-hover-name{opacity:1!important;transform:translateY(0)!important}@keyframes cable-flow{to{stroke-dashoffset:-20}}@keyframes port-flicker{0%{opacity:.25}5%{opacity:1}12%{opacity:.3}20%{opacity:1}28%{opacity:.4}40%{opacity:1}55%{opacity:.35}68%{opacity:1}82%{opacity:.3}to{opacity:.25}}@keyframes port-flicker-sparse{0%{opacity:.2}30%{opacity:.2}35%{opacity:.9}40%{opacity:.3}75%{opacity:.2}80%{opacity:1}85%{opacity:.3}to{opacity:.2}}@keyframes port-blink{0%{box-shadow:0 0 #2ecc7100;filter:brightness(.9)}to{box-shadow:0 0 6px #2ecc71e6;filter:brightness(1.4)}}
