:root{--color-paper: oklch(14% .015 240);--color-paper-2: oklch(18% .018 240);--color-paper-3: oklch(22% .016 240);--color-paper-elevated: oklch(20% .02 240);--color-rule: oklch(30% .012 240);--color-ink: oklch(94% .006 240);--color-ink-2: oklch(78% .008 240);--color-muted: oklch(58% .01 240);--color-accent: oklch(62% .14 240);--color-accent-hover: oklch(68% .16 240);--color-accent-soft: oklch(25% .04 240);--color-focus: oklch(68% .16 240);--gradient-accent: linear-gradient( 135deg, oklch(75% .08 240), oklch(52% .12 240) );--gradient-accent-h: linear-gradient( 90deg, oklch(75% .08 240), oklch(52% .12 240) );--gradient-success: linear-gradient( 135deg, oklch(68% .16 160), oklch(75% .14 140) );--glow-accent: 0 0 20px oklch(62% .14 240 / .3);--glow-success: 0 0 12px oklch(72% .18 160 / .35);--glow-danger: 0 0 12px oklch(65% .22 25 / .35);--surface-glass: oklch(18% .018 240 / .7);--color-warm: oklch(84% .16 85);--color-warm-soft: oklch(25% .04 85);--color-success: oklch(72% .18 160);--color-success-soft: oklch(22% .04 160);--color-warning: oklch(80% .16 85);--color-warning-soft: oklch(24% .04 85);--color-danger: oklch(65% .22 25);--color-danger-soft: oklch(22% .05 25);--color-online: oklch(72% .18 160);--color-offline: oklch(58% .01 240);--chart-1: oklch(62% .14 240);--chart-2: oklch(72% .18 160);--chart-3: oklch(80% .16 85);--chart-4: oklch(65% .22 25);--chart-5: oklch(68% .16 280);--chart-6: oklch(75% .12 200);--bg-base: var(--color-paper);--bg-surface: var(--color-paper-2);--bg-glass: var(--color-paper-2);--bg-glass-hover: var(--color-paper-3);--border-glass: var(--color-rule);--accent-primary: var(--color-accent);--accent-hover: var(--color-accent-hover);--accent-soft: var(--color-accent-soft);--text-primary: var(--color-ink);--text-secondary: var(--color-ink-2);--text-muted: var(--color-muted);--success: var(--color-success);--success-soft: var(--color-success-soft);--warning: var(--color-warning);--warning-soft: var(--color-warning-soft);--danger: var(--color-danger);--danger-soft: var(--color-danger-soft);--online: var(--color-online);--offline: var(--color-offline);--liege-blue: var(--color-accent);--liege-blue-dk: oklch(52% .12 240);--liege-blue-lt: var(--color-accent-hover);--liege-grey: var(--color-ink-2);--liege-navy: var(--color-paper);--font-sans: "Satoshi", system-ui, -apple-system, sans-serif;--font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--text-2xs: .625rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.5rem;--text-4xl: 3.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .04em;--space-3xs: .25rem;--space-2xs: .5rem;--space-xs: .75rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4.5rem;--container-sm: 640px;--container-md: 960px;--container-lg: 1200px;--container-xl: 1440px;--sidebar-width: 260px;--sidebar-collapsed: 72px;--topbar-height: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-pill: 100px;--shadow-sm: 0 1px 3px oklch(0% 0 0 / .15), 0 1px 2px oklch(0% 0 0 / .1);--shadow-md: 0 4px 16px oklch(0% 0 0 / .2);--shadow-lg: 0 8px 32px oklch(0% 0 0 / .35);--shadow-glow: 0 4px 20px oklch(62% .14 240 / .2);--shadow-card: 0 2px 12px oklch(0% 0 0 / .25);--shadow-dropdown: 0 8px 32px oklch(0% 0 0 / .4);--transition: .18s ease;--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-short: .18s;--dur-medium: .3s;--dur-long: .5s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);color-scheme:dark;font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}lucide-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}lucide-icon>svg{width:100%;height:100%;display:block}.spinning{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-muted);border-radius:3px}h1,h2,h3,h4{font-family:var(--font-sans);font-weight:600;letter-spacing:var(--tracking-tight);overflow-wrap:anywhere;min-width:0}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4{font-size:var(--text-base)}.app-layout{display:grid;grid-template-columns:240px 1fr;grid-template-rows:var(--topbar-height) 1fr;min-height:100vh;transition:grid-template-columns .3s var(--ease-out);position:relative}.app-layout.collapsed{grid-template-columns:72px 1fr}.topbar:before{content:"";position:absolute;top:0;left:0;width:240px;height:100%;background:#04080b;border-right:1px solid oklch(22% .015 240);z-index:0;transition:width .3s var(--ease-out);pointer-events:none}.app-layout.collapsed .topbar:before{width:72px}.app-layout.collapsed .topbar-logo-wrap{width:72px}.topbar{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;justify-content:flex-end;padding:0 var(--space-lg) 0 0;height:var(--topbar-height);background:var(--color-paper);border-bottom:1px solid var(--color-rule);position:sticky;top:0;z-index:110}.topbar>*{position:relative;z-index:1}.sidebar{grid-row:2;background:#04080b;border-right:1px solid oklch(22% .015 240);padding:var(--space-xs) var(--space-sm) var(--space-sm);display:flex;flex-direction:column;position:sticky;top:var(--topbar-height);height:calc(100vh - var(--topbar-height));z-index:100;overflow:hidden;overflow-y:auto;transition:padding .3s var(--ease-out)}.app-layout.collapsed .sidebar{padding:var(--space-xs) var(--space-2xs) var(--space-sm)}.main-area{grid-row:2;display:flex;flex-direction:column;min-height:calc(100vh - var(--topbar-height));min-width:0;overflow-x:hidden}.page-container{padding:var(--space-lg);max-width:1200px;margin:0 auto;width:100%;flex:1;min-width:0}.avatar-wrapper{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.25rem;border-radius:var(--radius-pill);transition:background var(--transition)}.avatar-wrapper:hover{background:var(--color-paper-3)}.avatar-circle{width:36px;height:36px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}.avatar-info{display:flex;flex-direction:column;align-items:flex-end;margin-right:.5rem}.avatar-role{font-size:.8rem;font-weight:600;color:var(--color-ink);line-height:1.2}.avatar-sub{font-size:.65rem;color:var(--color-muted);letter-spacing:.04em}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);flex-wrap:wrap;gap:var(--space-sm)}.page-header h2{color:var(--color-ink)}.card{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);transition:border-color var(--transition);text-decoration:none;color:var(--color-ink);display:block}.card:hover{border-color:var(--color-accent)}.stat-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:var(--radius-pill);font-size:.78rem;font-weight:500}.stat-chip.primary{background:var(--color-accent-soft);color:var(--color-accent-hover)}.stat-chip.success{background:var(--color-success-soft);color:var(--color-success)}.stat-chip.warning{background:var(--color-warning-soft);color:var(--color-warning)}.stat-chip.danger{background:var(--color-danger-soft);color:var(--color-danger)}.stat-chip.neutral{background:var(--color-paper-3);color:var(--color-ink-2)}.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;letter-spacing:.01em}.badge.online{background:var(--color-success-soft);color:var(--color-success)}.badge.offline{background:var(--color-paper-3);color:var(--color-muted)}.badge.admin{background:var(--color-accent-soft);color:var(--color-accent-hover)}.badge.operator{background:var(--color-warning-soft);color:var(--color-warning)}.badge.viewer{background:var(--color-paper-3);color:var(--color-ink-2)}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border:1px solid transparent;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:border-color var(--transition),background var(--transition),opacity var(--transition);white-space:nowrap}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn-primary{background:var(--gradient-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);box-shadow:var(--glow-accent)}.btn-ghost{background:var(--color-paper-2);border-color:var(--color-rule);color:var(--color-ink)}.btn-ghost:hover:not(:disabled){border-color:var(--color-accent)}.btn-danger{background:var(--color-danger-soft);border-color:#562d2a;color:var(--color-danger)}.btn-danger:hover:not(:disabled){border-color:var(--color-danger)}.btn-sm{padding:.3rem .8rem;font-size:.8rem}.form-panel{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-bottom:var(--space-sm);animation:slideDown .15s var(--ease-out)}@keyframes slideDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-group label{font-size:.78rem;font-weight:500;color:var(--color-ink-2)}input,select,textarea{background:var(--color-paper);border:1px solid var(--color-rule);color:var(--color-ink);border-radius:var(--radius-sm);padding:.5rem .8rem;font-family:inherit;font-size:var(--text-sm);outline:none;transition:border-color var(--transition);min-width:0}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8B8CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.25em;padding-right:2.5rem}select::-ms-expand{display:none}input::placeholder{color:var(--color-muted)}input:focus,select:focus,textarea:focus{border-color:var(--color-accent)}input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed;background:var(--color-paper);color:var(--color-muted)}select option{background:var(--color-paper-2);color:var(--color-ink)}.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.grid-auto-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}.tabs{display:flex;gap:0;border-bottom:1px solid var(--color-rule);margin-bottom:var(--space-md)}.tab-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.25rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--color-ink-2);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:color var(--transition),border-color var(--transition)}.tab-btn.active{color:var(--color-ink);border-bottom-color:var(--color-accent)}.tab-btn:hover:not(.active){color:var(--color-ink)}.data-table{width:100%;min-width:max-content;border-collapse:collapse;font-size:var(--text-sm)}.data-table th{text-align:left;padding:.65rem 1rem;color:var(--color-muted);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--color-rule);text-transform:uppercase}.data-table td{padding:.75rem 1rem;border-bottom:1px solid oklch(22% .012 240);vertical-align:middle;transition:background var(--transition)}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#10171c99}.msg{padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:var(--text-sm)}.msg-dismissible{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.msg-close{background:none;border:none;cursor:pointer;color:inherit;opacity:.7;padding:.15rem;line-height:0;flex-shrink:0;border-radius:4px;transition:opacity var(--transition)}.msg-close:hover{opacity:1}.msg-error{background:var(--color-danger-soft);color:var(--color-danger);border:1px solid oklch(35% .06 25)}.msg-success{background:var(--color-success-soft);color:var(--color-success);border:1px solid oklch(35% .06 160)}.shimmer{background:linear-gradient(90deg,var(--color-paper-2) 25%,var(--color-paper-3) 50%,var(--color-paper-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);height:1rem}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.section{margin-top:2rem}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}.section-header h3{color:var(--color-ink)}.search-bar{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:.45rem .9rem;color:var(--color-ink);font-family:inherit;font-size:var(--text-sm);outline:none;min-width:220px;transition:border-color var(--transition)}.search-bar:focus{border-color:var(--color-accent)}.location-chip{display:inline-flex;align-items:center;padding:.15rem .55rem;background:var(--color-accent-soft);color:var(--color-accent-hover);border-radius:var(--radius-pill);font-size:.75rem;font-weight:500;margin:.15rem}.back-link{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:var(--space-md);color:var(--color-ink-2);text-decoration:none;font-size:var(--text-sm);transition:color var(--transition)}.back-link:hover{color:var(--color-ink)}.divider{border:none;border-top:1px solid var(--color-rule);margin:var(--space-md) 0}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-xl) var(--space-sm);color:var(--color-muted)}.empty-state .empty-icon{display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin-bottom:.75rem;color:var(--color-muted)}.sub{color:var(--color-muted);font-size:var(--text-sm);margin-top:.2rem}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.status-dot.online{background:var(--color-online);box-shadow:0 0 6px var(--color-online)}.status-dot.offline{background:var(--color-offline)}[title]{cursor:help}.modal-overlay{position:fixed;inset:0;background:#000000a6;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem;animation:fadeIn .2s ease}.modal-content{background:var(--surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-rule);box-shadow:var(--shadow-lg),var(--glow-accent);border-radius:var(--radius-xl);padding:1.5rem;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;animation:slideUp .3s var(--ease-out)}.modal-content.modal-wide{max-width:520px}.modal-header{font-family:var(--font-sans);font-size:1.15rem;font-weight:600;margin-bottom:.75rem;color:var(--color-ink);display:flex;align-items:center;justify-content:space-between;gap:.5rem}.modal-header-title{display:flex;align-items:center;gap:.5rem}.modal-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--color-muted);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}.modal-close:hover{background:var(--color-paper-2);color:var(--color-ink)}.modal-body{color:var(--color-ink-2);font-size:.9rem;margin-bottom:1.5rem;line-height:1.5;display:flex;flex-direction:column;gap:1rem}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding-top:.5rem}.modal-body .form-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-content>*:first-child,router-outlet+*{animation:pageFadeIn .22s ease both}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.stagger-item{animation:fadeSlideUp .4s var(--ease-out) both}.stagger-1{animation-delay:.04s}.stagger-2{animation-delay:.08s}.stagger-3{animation-delay:.12s}.stagger-4{animation-delay:.16s}.stagger-5{animation-delay:.2s}.stagger-6{animation-delay:.24s}@keyframes pulseGlow{0%,to{box-shadow:0 0 4px currentColor}50%{box-shadow:0 0 12px currentColor,0 0 4px currentColor}}.pulse-glow{animation:pulseGlow 2s ease-in-out infinite}.magnetic-hover{transition:transform var(--dur-medium) var(--ease-out),box-shadow var(--dur-medium) var(--ease-out)}.magnetic-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.gradient-text{background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-surface{background:var(--surface-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.noise-bg:before{content:"";position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px;border-radius:inherit;z-index:0}.noise-bg{position:relative}.noise-bg>*{position:relative;z-index:1}.accordion-body-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-medium) var(--ease-out)}.accordion-body-wrapper.open{grid-template-rows:1fr}.accordion-body-wrapper>.accordion-body-inner{overflow:hidden}.status-dot.online{background:var(--color-online);box-shadow:0 0 6px var(--color-online);animation:pulseGlow 2s ease-in-out infinite;color:var(--color-online)}.btn-gradient{background:var(--gradient-accent);color:#fff;border:none;position:relative;overflow:hidden}.btn-gradient:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / .12),transparent);transform:translate(-100%);transition:transform .5s ease}.btn-gradient:hover:after{transform:translate(100%)}.btn:active:not(:disabled){transform:scale(.97)}.toast-container{position:fixed;bottom:var(--space-lg);right:var(--space-lg);z-index:10000;display:flex;flex-direction:column-reverse;gap:.5rem;pointer-events:none}.toast-container>*{pointer-events:auto}.nav-section-label{font-family:var(--font-sans);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#4c575f;padding:1rem .85rem .4rem}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:2px}@media (max-width: 1024px){.page-container{padding:var(--space-md)}}@media (max-width: 768px){.app-layout,.app-layout.collapsed{grid-template-columns:1fr}.topbar:before,.app-layout.collapsed .topbar:before{display:none}.topbar{grid-column:1;padding:0 var(--space-sm) 0 0}.page-container{padding:var(--space-sm)}.grid-auto{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:flex-start}.modal-content{max-width:95%;border-radius:var(--radius-lg)}.modal-body .form-row{grid-template-columns:1fr 1fr}.data-table th,.data-table td{padding:.55rem .65rem;font-size:.8rem}}@media (max-width: 640px){:root{font-size:14px}.btn{padding:.45rem .85rem;font-size:.8rem}.modal-content{padding:1rem}.modal-body .form-row{grid-template-columns:1fr}}@media (max-width: 480px){:root{font-size:13px}.btn{padding:.4rem .7rem;font-size:.78rem}.modal-content{max-width:98%;padding:.75rem}.data-table th,.data-table td{padding:.4rem .5rem;font-size:.75rem}.page-header h2{font-size:1.25rem}.page-container{padding:var(--space-xs)}.toast-container{right:var(--space-xs);bottom:var(--space-sm);left:var(--space-xs)}}