:root{--bg: #000000;--bg-elevated: #111111;--bg-panel: #161616;--bg-row: #1a1a1a;--bg-row-hover: #222222;--header-bg: #0a0a0a;--header-fg: #f5f5f5;--text: #ffffff;--text-secondary: #a3a3a3;--border: #2a2a2a;--accent: #00c65e;--accent-strong: #00e676;--accent-muted: rgba(0, 198, 94, .16);--danger: #ff5c5c;--warn: #ffbf1f;--success: #00c65e;--muted: #737373;--overlay: rgba(0, 0, 0, .72);--radius: 8px;--font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;--header-height: 3.5rem;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--shadow-soft: 0 0 0 1px rgba(0, 198, 94, .08), 0 18px 48px rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body,#root{min-height:100%;width:100%;margin:0;padding:0;font-family:var(--font);background:radial-gradient(900px 480px at 50% -20%,rgba(0,198,94,.09),transparent 55%),var(--bg);color:var(--text)}body{line-height:1.45}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-strong);text-decoration:underline}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.mono{font-family:var(--mono);font-size:.86em}@media(display-mode:standalone){html,body,#root{overflow:hidden;height:100%;max-height:100dvh}body{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;overscroll-behavior:none}.app-shell{height:100dvh;max-height:100dvh;overflow:hidden}.app-main{overflow:auto;overscroll-behavior:contain}}html.pwa-standalone,html.pwa-standalone body,html.pwa-standalone #root{overflow:hidden;height:100%;max-height:100dvh}html.pwa-standalone body{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;overscroll-behavior:none}html.pwa-standalone .app-shell{height:100dvh;max-height:100dvh;overflow:hidden}html.pwa-standalone .app-main{overflow:auto;overscroll-behavior:contain}.app-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.brand-mark{font-weight:700;letter-spacing:-.03em;font-size:1.25rem;color:var(--text)}.brand-sub{font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}.header-metrics{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;font-size:.8rem;color:var(--text-secondary)}.header-metrics strong{color:var(--text);font-weight:600}.app-main{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:1600px;margin-inline:auto;padding:.85rem clamp(1rem,2.2vw,1.75rem) 1.25rem;gap:.85rem}.breakglass-banner{background:linear-gradient(90deg,#7f1d1d,#991b1b);color:#fee2e2;text-align:center;font-size:.82rem;font-weight:600;padding:.4rem .75rem}.user-chip{display:inline-flex;align-items:center;gap:.45rem;max-width:min(280px,42vw);padding:.2rem .45rem .2rem .55rem;border-radius:8px;border:1px solid var(--border);background:#ffffff08;font-size:.82rem;color:var(--text-secondary)}.user-chip-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}.user-chip-name{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-chip-email{font-size:.68rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-role,.user-source{flex:0 0 auto;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;padding:.12rem .4rem;border-radius:999px;background:var(--accent-muted);color:var(--accent)}.user-source{background:#ff5c5c29;color:#fecaca}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--border);background:var(--bg-panel);color:var(--text);border-radius:8px;padding:.45rem .75rem;transition:background .15s ease,border-color .15s ease,transform .12s ease}.btn:hover:not(:disabled){background:var(--bg-row-hover);border-color:#3f3f3f}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:active:not(:disabled){transform:translateY(1px)}.btn-sm{padding:.28rem .55rem;font-size:.82rem}.btn-primary{background:#fff;border-color:#fff;color:#0a0a0a;font-weight:600}.btn-primary:hover:not(:disabled){background:#e8e8e8;border-color:#e8e8e8;color:#000}.btn-danger{background:#7f1d1d;border-color:#991b1b;color:#fecaca}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:#94a3b81f;color:var(--text)}.btn-block{width:100%}.health-banners{display:flex;flex-direction:column;gap:.4rem}.health-banner{display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;border-radius:var(--radius);font-size:.88rem;font-weight:500}.health-banner-danger{background:#f8717124;border:1px solid rgba(248,113,113,.35);color:#fecaca}.health-banner-warn{background:#fbbf241f;border:1px solid rgba(251,191,36,.3);color:#fde68a}.toolbar{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}.search-box{display:flex;align-items:center;gap:.45rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:.35rem .55rem;min-width:min(320px,100%);flex:1}.search-box input{flex:1;border:none;background:transparent;outline:none;min-width:0}.search-box kbd{font-size:.68rem;color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;padding:.1rem .3rem;font-family:var(--mono)}.toggle,.select-inline{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-secondary)}.select-inline select{background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;padding:.25rem .4rem}.vlan-chips{display:flex;flex-wrap:wrap;gap:.4rem}.chip{border:1px solid transparent;background:transparent;padding:0;border-radius:999px}.chip.is-active{outline:2px solid var(--accent);outline-offset:1px}.vlan-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;padding:.15rem .55rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:#f5f5f5;background:color-mix(in srgb,var(--vlan-color, #737373) 28%,#111111);border:1px solid color-mix(in srgb,var(--vlan-color, #737373) 55%,transparent)}.vlan-badge.size-md{font-size:.8rem;padding:.22rem .65rem}.vlan-unknown{color:var(--text-secondary);border-color:var(--border);background:#64748b26}.dashboard-layout{flex:1;min-height:420px;display:grid;grid-template-columns:1fr;gap:.75rem}.dashboard-layout.has-detail{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}.list-pane{min-height:360px;height:min(70vh,900px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow-soft)}.vm-list{display:flex;flex-direction:column;gap:.35rem;padding:.5rem}.vm-list>.node-group-header{margin-top:.25rem}.vm-list>.node-group-header:first-child{margin-top:0}.vm-virtual-list{outline:none}.virt-row{box-sizing:border-box;height:100%;padding:.25rem .5rem;display:flex;align-items:stretch;overflow:visible}.virt-row>.vm-row,.virt-row>.node-group-header{flex:1;width:100%;margin:0;min-height:0}.app-header{display:flex;flex-wrap:wrap;gap:.65rem 1rem;align-items:center;justify-content:space-between;padding:calc(.65rem + var(--safe-top)) 1rem .65rem;background:var(--header-bg);color:var(--header-fg);border-bottom:1px solid var(--border);box-shadow:inset 0 -1px #00c65e38;position:sticky;top:0;z-index:20}.app-header-brand{display:flex;align-items:center;gap:.85rem;flex:0 0 auto;flex-wrap:wrap}.brand-link{display:inline-flex;align-items:baseline;gap:.55rem;color:inherit;text-decoration:none}.brand-link:hover{text-decoration:none;color:inherit}.app-nav{display:inline-flex;gap:.25rem;padding:.15rem;border-radius:8px;background:#ffffff0a;border:1px solid var(--border)}.nav-link{padding:.3rem .7rem;border-radius:6px;font-size:.82rem;font-weight:600;color:var(--text-secondary);text-decoration:none}.nav-link:hover{color:var(--text);text-decoration:none;background:#ffffff0d}.nav-link.is-active{color:#0a0a0a;background:var(--accent)}.app-header-center{display:flex;justify-content:center;flex:1 1 auto;min-width:min(240px,100%)}.app-header-actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;flex:0 0 auto;margin-left:auto}.node-group-header{width:100%;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:.5rem;align-items:center;text-align:left;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:.45rem .7rem;margin:0;overflow:hidden}.node-group-header.is-unreachable{border-color:#f8717173}.node-group-title{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}.node-count,.node-uptime{color:var(--text-secondary);font-size:.78rem}.node-gauges{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.vm-row{width:100%;display:grid;grid-template-columns:12px minmax(100px,1.2fr) auto auto minmax(90px,.8fr) 64px minmax(150px,1.2fr);gap:.5rem;align-items:center;text-align:left;background:var(--bg-row);border:1px solid transparent;border-radius:8px;padding:.55rem .7rem;margin:0;transition:background .12s ease,border-color .12s ease}.vm-row:hover{background:var(--bg-row-hover)}.vm-row.is-selected{border-color:#00c65e8c;background:#00c65e1a}.vm-name{display:flex;flex-direction:column;gap:.1rem;min-width:0}.vm-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;line-height:1.2}.vm-meta,.vm-ip,.vm-uptime{font-size:.78rem;color:var(--text-secondary);line-height:1.2}.vm-gauges{display:flex;flex-direction:column;gap:.2rem;min-width:0}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.status-chip{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.12rem .4rem;border-radius:999px;white-space:nowrap}.tone-green{color:var(--success)}.tone-yellow{color:var(--warn)}.tone-red{color:var(--danger)}.tone-blue{color:var(--accent)}.tone-muted,.tone-neutral{color:var(--muted)}.status-dot.tone-green,.gauge-fill.tone-green{background:var(--success)}.status-dot.tone-yellow,.gauge-fill.tone-yellow{background:var(--warn)}.status-dot.tone-red,.gauge-fill.tone-red{background:var(--danger)}.status-dot.tone-blue{background:var(--accent)}.status-dot.tone-muted,.status-dot.tone-neutral,.gauge-fill.tone-neutral{background:var(--muted)}.status-chip.tone-green{background:#4ade8024}.status-chip.tone-yellow{background:#fbbf2424}.status-chip.tone-red{background:#f8717124}.status-chip.tone-blue{background:#00c65e24}.status-chip.tone-muted,.status-chip.tone-neutral{background:#64748b2e}.gauge-bar{display:grid;grid-template-columns:16px 36px 1fr 36px;gap:.35rem;align-items:center;font-size:.75rem}.gauge-bar-compact{grid-template-columns:14px 1fr 34px;min-width:90px}.gauge-bar-compact .gauge-label{display:none}.gauge-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);flex-shrink:0;transition:color .2s ease}.gauge-label{color:var(--text-secondary)}.gauge-track{height:6px;border-radius:999px;background:#ffffff1a;overflow:hidden}.gauge-track.tone-green{background:#00c65e24}.gauge-track.tone-yellow{background:#ffbf1f29}.gauge-track.tone-red{background:#ff5c5c29}.gauge-fill{height:100%;border-radius:inherit;transition:width .25s ease,background-color .2s ease}.gauge-value{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}.detail-sheet{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;max-height:min(70vh,900px);box-shadow:var(--shadow-soft);animation:slide-in .18s ease}@keyframes slide-in{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:none}}.detail-header{display:flex;justify-content:space-between;gap:.5rem;padding:.85rem .9rem .5rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-panel);z-index:1}.detail-header h2{margin:0;font-size:1.15rem;letter-spacing:-.02em}.detail-sub{margin:.15rem 0 0;color:var(--text-secondary);font-size:.82rem}.detail-body{padding:.75rem .9rem 1rem;display:flex;flex-direction:column;gap:.85rem}.detail-status-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}.detail-gauges{display:grid;gap:.65rem}.spark-row{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font-size:.78rem;margin-bottom:.2rem}.detail-grid{display:grid;grid-template-columns:1fr;gap:.35rem;margin:0}.detail-item{display:grid;grid-template-columns:100px 1fr;gap:.4rem;padding:.35rem 0;border-bottom:1px solid rgba(42,42,42,.9);font-size:.84rem}.detail-item dt{color:var(--text-secondary);margin:0}.detail-item dd{margin:0;display:flex;justify-content:space-between;gap:.5rem;min-width:0;word-break:break-word}.field-meta{color:var(--muted);font-size:.7rem;white-space:nowrap}.action-bar{border-top:1px solid var(--border);padding-top:.75rem;display:flex;flex-direction:column;gap:.55rem}.action-buttons{display:flex;flex-wrap:wrap;gap:.4rem}.action-hint{margin:0;font-size:.78rem;color:var(--text-secondary)}.action-confirm{display:flex;flex-direction:column;gap:.45rem;background:#f8717114;border:1px solid rgba(248,113,113,.25);border-radius:8px;padding:.65rem}.action-confirm input{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.4rem .5rem}.action-confirm-row{display:flex;gap:.4rem}.picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;justify-content:center;align-items:flex-start;padding:12vh 1rem 1rem;z-index:50;animation:fade-in .12s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.picker-panel{width:min(640px,100%);background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-soft);overflow:hidden}.picker-input-row{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-bottom:1px solid var(--border)}.picker-input-row input{flex:1;border:none;background:transparent;outline:none;font-size:1rem}.picker-list{max-height:50vh;overflow:auto;padding:.35rem}.picker-section{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);padding:.45rem .55rem .2rem}.picker-item{width:100%;display:grid;grid-template-columns:1fr auto auto auto;gap:.45rem;align-items:center;text-align:left;background:transparent;border:none;border-radius:8px;padding:.55rem}.picker-item:hover{background:var(--bg-row-hover)}.picker-name{font-weight:600}.picker-meta{color:var(--text-secondary);font-size:.8rem}.badge-unreachable{font-size:.68rem;color:var(--danger);border:1px solid rgba(248,113,113,.4);border-radius:999px;padding:.1rem .35rem}.picker-hint{padding:.45rem .75rem .65rem;font-size:.75rem;color:var(--muted);border-top:1px solid var(--border)}.login-page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem}.login-card{width:min(420px,100%);background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:1.4rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow-soft);animation:rise .25s ease}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.login-brand .login-mark{display:inline-block;font-weight:700;font-size:1.4rem;letter-spacing:-.03em;margin-bottom:.35rem}.login-brand h1{margin:0;font-size:1.15rem}.login-brand p{margin:.35rem 0 .5rem;color:var(--text-secondary);font-size:.9rem}.login-local{display:flex;flex-direction:column;gap:.55rem;margin-top:.25rem}.login-local label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--text-secondary)}.login-local input{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;color:var(--text)}.breakglass-hint{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#fecaca;background:#7f1d1d59;border-radius:8px;padding:.45rem .55rem}.form-error{color:#fecaca;background:#f871711f;border:1px solid rgba(248,113,113,.3);border-radius:8px;padding:.45rem .55rem;font-size:.85rem}.boot-screen,.not-found,.panel-status,.empty-hint{display:grid;place-items:center;gap:.5rem;padding:2rem 1rem;color:var(--text-secondary);text-align:center}.not-found h1{margin:0;font-size:3rem;color:var(--text)}.dash-footer{font-size:.75rem;color:var(--muted);padding:.25rem 0 calc(.25rem + var(--safe-bottom))}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:960px){.app-header-center{order:3;flex:1 1 100%;justify-content:flex-start}.dashboard-layout.has-detail{grid-template-columns:1fr}.detail-sheet{max-height:none}.node-group-header{flex-wrap:wrap}.vm-row{grid-template-columns:12px 1fr auto;grid-template-areas:"dot name status" "dot vlan vlan" "dot ip uptime" "gauges gauges gauges";align-content:center;row-gap:.25rem}.vm-row .status-dot{grid-area:dot}.vm-row .vm-name{grid-area:name}.vm-row .status-chip{grid-area:status}.vm-row .vlan-badge{grid-area:vlan;justify-self:start}.vm-row .vm-ip{grid-area:ip}.vm-row .vm-uptime{grid-area:uptime}.vm-row .vm-gauges{grid-area:gauges}}.overview-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1rem;align-items:flex-end}.overview-title{margin:0;font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);letter-spacing:-.02em}.overview-sub{margin:.2rem 0 0;color:var(--text-secondary);font-size:.88rem}.overview-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.node-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:1rem;align-items:stretch}.node-card{display:flex;flex-direction:column;gap:1rem;width:100%;min-width:0;text-align:left;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem 1rem;box-shadow:var(--shadow-soft);transition:border-color .15s ease,transform .12s ease,background .15s ease}.node-card:hover{border-color:#00c65e73;background:#1a1a1a;transform:translateY(-1px)}.node-card.is-unreachable{border-color:#ff5c5c73}.node-card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.node-card-title{display:inline-flex;align-items:center;gap:.45rem;font-size:1.1rem}.node-card-error{display:flex;align-items:center;gap:.35rem;margin:0;font-size:.8rem;color:#fecaca}.node-card-gauges{display:flex;justify-content:space-evenly;align-items:center;gap:.5rem .75rem;width:100%}.node-card-meta{display:flex;flex-wrap:wrap;gap:.55rem 1.15rem;font-size:.82rem;color:var(--text-secondary);border-top:1px solid var(--border);padding-top:.75rem;margin-top:auto}.node-card-meta strong{color:var(--text)}.radial-gauge{--radial-size: 120px;position:relative;display:grid;place-items:center;flex:1 1 0;width:min(var(--radial-size),100%);max-width:var(--radial-size);aspect-ratio:1;min-width:0}.radial-gauge svg{width:100%;height:100%;display:block}.radial-track{stroke:#ffffff1a}.radial-fill{transition:stroke-dashoffset .35s ease}.radial-fill.tone-green{stroke:var(--success)}.radial-fill.tone-yellow{stroke:var(--warn)}.radial-fill.tone-red{stroke:var(--danger)}.radial-fill.tone-neutral{stroke:var(--muted)}.radial-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:1.15}.radial-center strong{font-size:clamp(.95rem,2.4vw,1.2rem);font-variant-numeric:tabular-nums}.radial-center span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}.radial-icon{display:inline-flex;color:var(--text-secondary);margin-bottom:.1rem}@media(min-width:1100px){.node-grid{grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:1.15rem}.node-card{padding:1.25rem 1.4rem 1.1rem;gap:1.15rem}.node-card-gauges .radial-gauge{--radial-size: 136px}}@media(max-width:420px){.node-card-gauges{gap:.25rem}.node-card-gauges .radial-gauge{--radial-size: 92px}}