:root{--bg-primary:#0a0e14;--bg-secondary:#0d1117;--bg-tertiary:#151b23;--bg-card:#161b22;--bg-hover:#1c2128;--border-primary:#21262d;--border-secondary:#30363d;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#6e7681;--accent-blue:#58a6ff;--accent-green:#3fb950;--accent-yellow:#d29922;--accent-red:#f85149;--accent-purple:#a371f7;--accent-cyan:#39d353;--status-up:#3fb950;--status-down:#f85149;--status-warning:#d29922;--status-unknown:#8b949e;--shadow-md:0 4px 6px rgba(0,0,0,0.4);--font-sans:'Space Grotesk',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;--sidebar-width:240px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;display:flex}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:4px}
.sidebar{width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100}
.sidebar-header{padding:1.25rem;border-bottom:1px solid var(--border-primary)}
.logo{display:flex;align-items:center;gap:0.75rem;color:var(--accent-blue);font-weight:700;font-size:1.25rem}
.nav-links{list-style:none;padding:0.75rem;flex:1;overflow-y:auto}
.nav-links li{margin-bottom:0.25rem}
.nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;color:var(--text-secondary);text-decoration:none;border-radius:8px;transition:all 150ms}
.nav-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-link.active{background:rgba(88,166,255,0.1);color:var(--accent-blue)}
.badge{margin-left:auto;background:var(--accent-red);color:white;font-size:0.7rem;font-weight:600;padding:0.125rem 0.5rem;border-radius:10px}
.sidebar-footer{padding:1rem;border-top:1px solid var(--border-primary)}
.status-indicator{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text-secondary);margin-bottom:0.5rem}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--status-unknown)}
.status-dot.connected{background:var(--status-up);box-shadow:0 0 8px var(--status-up);animation:pulse 2s infinite}
.status-dot.disconnected{background:var(--status-down)}
.status-dot.warning{background:#FFB800;box-shadow:0 0 8px rgba(255,184,0,0.5);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.last-poll{font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh;padding:1.5rem;background:var(--bg-primary)}
.page-header{margin-bottom:1.5rem}.page-header h1{font-size:1.75rem;font-weight:600;margin-bottom:0.5rem}.page-header p{color:var(--text-secondary)}
.card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:12px;padding:1.25rem;transition:all 250ms}
.card:hover{border-color:var(--border-secondary);box-shadow:var(--shadow-md)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border-primary)}
.card-title{font-size:1rem;font-weight:600}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);color:var(--accent-blue)}
.stat-value{font-size:2rem;font-weight:700;font-family:var(--font-mono)}
.stat-label{font-size:0.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}}
.table-container{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.data-table th{text-align:left;padding:0.75rem 1rem;background:var(--bg-tertiary);color:var(--text-secondary);font-weight:500;text-transform:uppercase;font-size:0.75rem;border-bottom:1px solid var(--border-primary)}
.data-table td{padding:0.875rem 1rem;border-bottom:1px solid var(--border-primary)}
.data-table tr:hover td{background:var(--bg-hover)}
.mono{font-family:var(--font-mono);font-size:0.85rem}
.status-badge{display:inline-flex;align-items:center;gap:0.375rem;padding:0.25rem 0.625rem;border-radius:6px;font-size:0.75rem;font-weight:500;text-transform:uppercase}
.status-badge::before{content:'';width:6px;height:6px;border-radius:50%}
.status-badge.up{background:rgba(63,185,80,0.15);color:var(--status-up)}.status-badge.up::before{background:var(--status-up)}
.status-badge.down{background:rgba(248,81,73,0.15);color:var(--status-down)}.status-badge.down::before{background:var(--status-down)}
.status-badge.warning{background:rgba(210,153,34,0.15);color:var(--status-warning)}.status-badge.warning::before{background:var(--status-warning)}
.status-badge.unknown{background:rgba(139,148,158,0.15);color:var(--status-unknown)}.status-badge.unknown::before{background:var(--status-unknown)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1rem;font-family:var(--font-sans);font-size:0.875rem;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all 150ms;text-decoration:none}
.btn-primary{background:var(--accent-blue);color:white}.btn-primary:hover{background:#4c9aff}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-secondary)}.btn-secondary:hover{background:var(--bg-hover)}
.btn-danger{background:rgba(248,81,73,0.15);color:var(--status-down);border:1px solid var(--status-down)}.btn-danger:hover{background:var(--status-down);color:white}
.btn-sm{padding:0.375rem 0.75rem;font-size:0.8rem}
.form-group{margin-bottom:1rem}
.form-label{display:block;margin-bottom:0.5rem;font-size:0.85rem;font-weight:500;color:var(--text-secondary)}
.form-input{width:100%;padding:0.625rem 0.875rem;font-family:var(--font-sans);font-size:0.9rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:8px;color:var(--text-primary);transition:all 150ms}
.form-input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(88,166,255,0.15)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;padding-right:2.5rem}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 250ms}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:16px;width:90%;max-width:500px;max-height:90vh;overflow:hidden;transform:scale(0.9);transition:all 250ms}
.modal-overlay.active .modal{transform:scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-primary)}
.modal-title{font-size:1.125rem;font-weight:600}
.modal-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:0.25rem;border-radius:4px}
.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.modal-body{padding:1.5rem;overflow-y:auto;max-height:60vh}
.modal-footer{display:flex;justify-content:flex-end;gap:0.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border-primary);background:var(--bg-tertiary)}
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:2000;display:flex;flex-direction:column;gap:0.75rem}
.toast{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border-primary);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,0.5);min-width:300px;max-width:400px;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.critical{border-color:var(--status-down);border-left-width:4px}
.toast.warning{border-color:var(--status-warning);border-left-width:4px}
.toast.info{border-color:var(--accent-blue);border-left-width:4px}
.toast.success{border-color:var(--status-up);border-left-width:4px}
.toast-content{flex:1}.toast-title{font-weight:600;margin-bottom:0.25rem}.toast-message{font-size:0.85rem;color:var(--text-secondary)}
.toast-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0.25rem}
.map-container{height:calc(100vh - 180px);border-radius:12px;overflow:hidden;border:1px solid var(--border-primary)}
#map{height:100%;width:100%;background:var(--bg-tertiary)}
.leaflet-container{background:var(--bg-tertiary);font-family:var(--font-sans)}
.leaflet-popup-content-wrapper{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:10px;color:var(--text-primary)}
.leaflet-popup-tip{background:var(--bg-card);border:1px solid var(--border-primary)}
.topology-container{height:calc(100vh - 180px);border-radius:12px;overflow:hidden;border:1px solid var(--border-primary);background:var(--bg-tertiary);position:relative}
#topology-graph{width:100%;height:100%}
.topology-legend{position:absolute;top:1rem;right:1rem;background:var(--bg-card);border:1px solid var(--border-primary);border-radius:8px;padding:1rem}
.legend-item{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;font-size:0.85rem}
.legend-color{width:12px;height:12px;border-radius:3px}
.interface-list{display:flex;flex-direction:column;gap:0.5rem}
.interface-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;background:var(--bg-tertiary);border-radius:8px;font-family:var(--font-mono);font-size:0.85rem}
.interface-status{width:8px;height:8px;border-radius:50%}.interface-status.up{background:var(--status-up)}.interface-status.down{background:var(--status-down)}
.interface-name{flex:1;color:var(--text-primary)}.interface-traffic{color:var(--text-secondary);font-size:0.75rem}
.alerts-list{display:flex;flex-direction:column;gap:0.75rem}
.alert-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:var(--bg-card);border:1px solid var(--border-primary);border-radius:10px;border-left-width:4px}
.alert-item.critical{border-left-color:var(--status-down)}.alert-item.warning{border-left-color:var(--status-warning)}.alert-item.info{border-left-color:var(--accent-blue)}
.alert-content{flex:1}.alert-title{font-weight:600;margin-bottom:0.25rem}.alert-message{color:var(--text-secondary);font-size:0.9rem}.alert-meta{display:flex;gap:1rem;margin-top:0.5rem;font-size:0.8rem;color:var(--text-muted)}
.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}
.loading{display:flex;align-items:center;justify-content:center;padding:3rem}
.spinner{width:40px;height:40px;border:3px solid var(--border-secondary);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* v6.1: glow + animation polish pass - purely additive, targets classes
   already used everywhere so it applies site-wide with no template edits.
   Kept restrained: static glow on persistent/repeated elements (table rows,
   badges) so long lists don't turn distracting; animated glow reserved for
   transient or singular elements (toasts, the connection dot, page load). */
.logo{text-shadow:0 0 14px rgba(88,166,255,0.4)}
.main-content{animation:nmPageIn 0.35s ease}
@keyframes nmPageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.card:hover{box-shadow:var(--shadow-md),0 0 24px rgba(88,166,255,0.08);transform:translateY(-1px)}
.stat-card{transition:all 250ms}
.stat-card:hover{transform:translateY(-2px);border-color:var(--border-secondary);box-shadow:0 8px 20px rgba(0,0,0,0.35),0 0 20px rgba(88,166,255,0.07)}
.stat-icon{transition:box-shadow 250ms}
.stat-card:hover .stat-icon{box-shadow:0 0 16px rgba(88,166,255,0.35)}
.nav-link.active{box-shadow:inset 3px 0 0 var(--accent-blue),0 0 14px rgba(88,166,255,0.12)}
.btn{position:relative}
.btn-primary:hover{box-shadow:0 0 16px rgba(88,166,255,0.45)}
.btn-danger:hover{box-shadow:0 0 16px rgba(248,81,73,0.4)}
.modal-overlay.active .modal{box-shadow:0 0 40px rgba(88,166,255,0.12),0 20px 60px rgba(0,0,0,0.6)}
.status-dot.connected{box-shadow:0 0 10px var(--status-up),0 0 3px var(--status-up)}
.status-badge.up{box-shadow:0 0 8px rgba(63,185,80,0.2)}
.status-badge.down{box-shadow:0 0 8px rgba(248,81,73,0.25)}
.data-table tr:hover td:first-child{box-shadow:inset 3px 0 0 rgba(88,166,255,0.45)}
.toast.critical{animation:slideIn 0.3s ease,nmToastGlow 2s ease-in-out infinite}
@keyframes nmToastGlow{0%,50%,100%{box-shadow:0 10px 25px rgba(0,0,0,0.5)}25%,75%{box-shadow:0 10px 25px rgba(0,0,0,0.5),0 0 20px rgba(248,81,73,0.35)}}
.form-input:hover{border-color:var(--border-secondary)}