:root{--ink:#0b0e14;--muted:#64748b;--line:#e2e8f0;--blue:#d99b26;--gold:#d99b26;--gold-dark:#b8801b;--gold-light:#fef8ec;--green:#079455;--amber:#d99b26;--red:#d92d20;--sidebar-bg:#0b0e14;--sidebar-hover:#171e2b;--sidebar-active:#232d40;--sidebar-text:#94a3b8}*{box-sizing:border-box}body{color:var(--ink);background:#f8fafc;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif}.shell{grid-template-columns:265px 1fr;min-height:100vh;transition:grid-template-columns .3s;display:grid}.shell.sidebar-collapsed{grid-template-columns:0 1fr}aside{background:var(--sidebar-bg);color:#e2e8f0;-webkit-user-select:none;user-select:none;border-right:1px solid #1e293b;flex-direction:column;padding:20px 12px;transition:transform .3s;display:flex;overflow:hidden}.brand{border-bottom:1px solid #1e293b;align-items:center;gap:12px;margin-bottom:16px;padding:4px 6px 22px;display:flex}.brand-logo{object-fit:contain;background:#fff;border:1px solid #d99b2640;border-radius:8px;width:auto;height:42px;padding:3px 8px;box-shadow:0 2px 6px #0000004d}.brand b{color:#fff;letter-spacing:-.01em;font-size:15px}.brand small{color:#d99b26;letter-spacing:.04em;margin-top:2px;font-size:10px;font-style:italic}.brand b,.brand small,footer b,footer small{display:block}.tree-nav{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;gap:4px;padding-right:4px;display:flex;overflow-y:auto}.tree-nav::-webkit-scrollbar{display:none}.tree-item{color:var(--sidebar-text);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 10px;font-size:13px;text-decoration:none;transition:background .15s,color .15s;display:flex}.tree-item:hover{background:var(--sidebar-hover);color:#fff}.tree-item.active{background:var(--sidebar-active);color:#fff;border-left:3px solid var(--gold);font-weight:600}.tree-label-group{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.tree-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.caret{text-align:center;color:#64748b;width:14px;height:14px;font-size:9px;line-height:14px;transition:transform .2s;display:inline-block}.caret.expanded{color:var(--gold);transform:rotate(90deg)}.caret.spacer{visibility:hidden}.dot-indicator{border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-block}.dot-indicator.healthy{background:#12b76a;box-shadow:0 0 0 3px #12b76a25}.dot-indicator.warning{background:var(--gold);box-shadow:0 0 0 3px #d99b2625}.dot-indicator.critical{background:#f04438;box-shadow:0 0 0 3px #f0443825}.dot-indicator.unknown,.dot-indicator.unused{background:#98a2b3}.badge-count{color:#cbd5e1;background:#1e293b;border-radius:10px;margin-left:6px;padding:2px 7px;font-size:10px;font-weight:600}.badge-count.alert-badge{color:#fff;background:#b42318}.badge-count.alert-badge.warning-only{color:#fff;background:#b8801b}.tree-children{border-left:1px solid #1e293b;flex-direction:column;gap:2px;margin-left:12px;padding-left:8px;display:flex}aside footer{border-top:1px solid #1e293b;align-items:center;gap:10px;margin-top:auto;padding:16px 8px 4px;font-size:11px;display:flex}.dot{background:#12b76a;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #12b76a20}main>header{border-bottom:1px solid var(--line);color:#64748b;background:#fff;justify-content:space-between;align-items:center;height:64px;padding:0 28px;font-size:13px;display:flex}.breadcrumb-bar{align-items:center;gap:6px;display:flex}.crumb-link{color:var(--gold-dark);cursor:pointer;font-weight:600;text-decoration:none}.crumb-link:hover{color:var(--gold);text-decoration:underline}.crumb-separator{color:#94a3b8}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;display:flex}.refresh-pill{cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;transition:all .15s}.refresh-pill:hover{background:var(--gold-light);border-color:var(--gold);color:var(--gold-dark)}.history-select{color:#0f172a;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;outline:none;max-width:220px;padding:7px 10px;font-size:12px;font-weight:600;transition:all .15s}.history-select:hover{border-color:var(--gold);background:#fff}.avatar{background:var(--gold-light);width:34px;height:34px;color:var(--gold-dark);border:1px solid var(--gold);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid}.content{max-width:1500px;margin:0 auto;padding:28px 32px}.heading{margin-bottom:24px}.heading label{letter-spacing:.14em;color:var(--gold-dark);margin-bottom:4px;font-size:10px;font-weight:800;display:block}.heading h1{letter-spacing:-.03em;color:var(--ink);margin:0 0 6px;font-size:26px}.heading p{color:var(--muted);margin:0;font-size:13px}.stats{grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px;display:grid}.stat,.card,.panel{border:1px solid var(--line);background:#fff;border-radius:12px}.stat{padding:16px 18px}.stat span,.stat small{color:var(--muted);font-size:11px;display:block}.stat b{letter-spacing:-.02em;margin:6px 0 4px;font-size:24px;display:block}.green{color:var(--green)}.red{color:var(--red)}.amber{color:var(--amber)}.toolbar{justify-content:space-between;align-items:center;gap:16px;margin:20px 0;display:flex}.search{background:#fff;border:1px solid #cbd5e1;border-radius:9px;align-items:center;gap:8px;min-width:320px;padding:9px 13px;display:flex}.search input{width:100%;font:inherit;border:0;outline:0;font-size:13px}.filters{background:#f1f5f9;border-radius:9px;gap:2px;padding:3px;display:flex}.filters button{text-transform:capitalize;color:#64748b;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:7px 12px;font-size:12px;font-weight:500;transition:all .15s}.filters button.active{color:var(--gold-dark);background:#fff;font-weight:700;box-shadow:0 1px 3px #00000014}.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.card{cursor:pointer;padding:20px;transition:transform .18s,box-shadow .18s}.card:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 10px 25px #0000000f}.card-top{justify-content:space-between;align-items:center;display:flex}.symbol{background:var(--gold-light);width:38px;height:38px;color:var(--gold-dark);border:1px solid var(--gold-dark)30;border-radius:10px;place-items:center;font-size:12px;font-weight:800;display:grid}.badge{text-transform:capitalize;border-radius:12px;align-items:center;gap:5px;height:max-content;padding:4px 9px;font-size:10px;font-weight:700;display:inline-flex}.badge.healthy{color:#067647;background:#ecfdf3}.badge.warning{background:var(--gold-light);color:var(--gold-dark);border:1px solid var(--gold)40}.badge.critical{color:#b42318;background:#fef3f2}.badge.unused{color:#475467;background:#f2f4f7;border:1px solid #d0d5dd}.badge.unscanned{color:#6941c6;background:#f9f5ff;border:1px solid #e9d7fe}.badge.unknown{color:#667085;background:#f2f4f7}.badge.unreachable{color:#c01048;background:#fff1f0;border:1px solid #fda29b}.card h2{margin:16px 0 4px;font-size:17px}.card>p{color:var(--muted);margin:0;font-size:12px}.metrics{background:#fafafa;border:1px solid #f1f5f9;border-radius:9px;grid-template-columns:1fr 1fr;margin-top:18px;display:grid}.metrics div{padding:10px}.metrics span{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-size:9px;display:block}.metrics b{margin-top:2px;font-size:15px;display:block}.metrics-total{background:#fff;border-top:1px solid #e2e8f0;border-radius:0 0 8px 8px;grid-column:span 2;justify-content:space-between;align-items:center;display:flex}.metrics-total span{color:var(--text-primary,#1e293b);font-size:10px;font-weight:700}.metrics-total b{color:var(--gold-dark,#b8801b);font-size:15px;font-weight:800}.card footer{color:#94a3b8;border-top:1px solid #f1f5f9;justify-content:space-between;align-items:center;margin-top:16px;padding-top:13px;font-size:11px;display:flex}.card footer b{color:var(--gold-dark)}.state{text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:320px;padding:30px;display:flex}.state i{background:var(--gold-light);width:54px;height:54px;color:var(--gold-dark);border-radius:14px;place-items:center;font-size:24px;font-style:normal;display:grid}.state h2{margin:14px 0 6px;font-size:17px}.state p{color:var(--muted);max-width:480px;margin:0;font-size:13px;line-height:1.5}.panel{align-items:center;gap:14px;margin-bottom:20px;padding:18px 20px;display:flex}.panel p{color:var(--muted);margin:0;font-size:13px}.table-panel{border:1px solid var(--line);background:#fff;border-radius:12px;margin-top:20px;overflow:hidden}.table-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:#64748b;text-transform:uppercase;letter-spacing:.06em;background:#f8fafc;padding:12px 14px;font-size:9px}td{border-top:1px solid #f1f5f9;padding:12px 14px}tbody tr{cursor:pointer;transition:background .12s}tbody tr:hover{background:#fffcf7}.pppoe-badge{background:var(--gold-light);color:var(--gold-dark);border:1px solid var(--gold)30;border-radius:6px;padding:3px 8px;font-family:monospace;font-size:11px;font-weight:600;display:inline-block}.pppoe-empty{color:#94a3b8;font-size:11px;font-style:italic}.telemetry-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px;display:grid}.telemetry-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:18px 20px}.telemetry-card h3{text-transform:uppercase;letter-spacing:.08em;color:var(--gold-dark);margin:0 0 14px;font-size:11px;font-weight:700}.telemetry-dl{flex-direction:column;gap:8px;display:flex}.telemetry-row{border-bottom:1px solid #f8fafc;justify-content:space-between;align-items:center;padding-bottom:6px;font-size:12px;display:flex}.telemetry-row:last-child{border-bottom:0;padding-bottom:0}.telemetry-key{color:#64748b;text-transform:capitalize}.telemetry-val{color:var(--ink);font-weight:600}.alerts-container{flex-direction:column;gap:16px;display:flex}.alert-group-title{color:var(--ink);align-items:center;gap:8px;margin:12px 0 4px;font-size:14px;font-weight:700;display:flex}.alert-card{border:1px solid var(--line);border-left:4px solid var(--red);background:#fff;border-radius:10px;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;transition:transform .15s;display:flex}.alert-card.warning-type{border-left-color:var(--gold)}.alert-card:hover{transform:translate(3px)}.alert-info h3{margin:0 0 4px;font-size:14px}.alert-info p{color:var(--muted);margin:0;font-size:12px}.alert-action-btn{color:var(--gold-dark);cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600}.alert-action-btn:hover{background:var(--gold-light);border-color:var(--gold)}@media (max-width:1080px){.stats{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.shell{display:block}aside{padding:12px}.brand{padding-bottom:12px}main>header{padding:0 16px}.content{padding:20px 16px}.stats{grid-template-columns:1fr 1fr}.toolbar{flex-direction:column;align-items:stretch}}.login-wrapper{background:#0b0e14;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:#fff;border:1px solid #1e293b;border-radius:16px;width:100%;max-width:400px;padding:32px 28px;box-shadow:0 20px 40px #0006}.login-header{text-align:center;margin-bottom:24px}.login-logo{border:1px solid var(--gold)40;background:#fff;border-radius:10px;width:auto;height:52px;margin-bottom:12px;padding:4px 10px;box-shadow:0 4px 12px #00000026}.login-header h1{color:var(--ink);letter-spacing:-.02em;margin:0 0 4px;font-size:22px}.login-tagline{color:var(--gold-dark);letter-spacing:.05em;margin:0;font-size:11px;font-style:italic}.login-form{flex-direction:column;gap:16px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:700}.form-group input{border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:10px 12px;font-size:13px;transition:all .15s}.form-group input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-light)}.form-options{color:#64748b;align-items:center;font-size:12px;display:flex}.checkbox-label{cursor:pointer;align-items:center;gap:6px;display:flex}.login-submit-btn{background:var(--gold);color:#fff;cursor:pointer;border:0;border-radius:8px;margin-top:4px;padding:11px;font-size:13px;font-weight:700;transition:background .15s}.login-submit-btn:hover{background:var(--gold-dark)}.auth-error{color:#b42318;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 12px;font-size:12px}.auth-error.hidden{display:none}.login-footer{text-align:center;color:#94a3b8;margin-top:24px;font-size:11px}.logout-pill{color:#b42318;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;transition:all .15s}.logout-pill:hover{background:#fee2e2}.spinner{border:3.5px solid #d99b2633;border-top-color:var(--gold);border-radius:50%;width:38px;height:38px;animation:.75s linear infinite nocSpinnerRotate;display:inline-block}.spinner-sm{border-width:2.5px;width:20px;height:20px}@keyframes nocSpinnerRotate{to{transform:rotate(360deg)}}.app-initial-loader{z-index:9999;background:#0b0e14;justify-content:center;align-items:center;transition:opacity .25s,visibility .25s;display:flex;position:fixed;inset:0}.app-initial-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-card{text-align:center;background:#131924;border:1px solid #1e293b;border-radius:16px;flex-direction:column;align-items:center;gap:18px;padding:36px 48px;display:flex;box-shadow:0 20px 40px #00000080}.loader-logo{background:#fff;border-radius:10px;width:auto;height:48px;padding:4px 10px}.loader-text{color:#94a3b8;letter-spacing:.02em;margin:0;font-size:13px;font-weight:500}.loading-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:64px 20px;display:flex}.loading-state h2{color:var(--ink);margin:0;font-size:16px;font-weight:600}.loading-state p{color:var(--muted);margin:0;font-size:13px}.mobile-overlay{z-index:999;background:#0006;display:none;position:fixed;inset:0}.shell.sidebar-open .mobile-overlay{display:block}.hamburger{color:var(--ink);cursor:pointer;background:0 0;border:none;padding:4px;font-size:20px;display:none}@media (min-width:769px){.mobile-overlay{display:none!important}}@media (max-width:1024px){.stats{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.shell,.shell.sidebar-collapsed{grid-template-columns:1fr}aside{z-index:1000;width:265px;height:100vh;position:fixed;top:0;left:0;transform:translate(-100%)}.shell.sidebar-open aside{transform:translate(0);box-shadow:4px 0 24px #00000080}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}main>header{flex-wrap:wrap;gap:10px;height:auto;min-height:64px;padding:10px 16px}.header-actions{justify-content:flex-start;gap:8px;width:100%}.content{padding:20px 16px;overflow-x:hidden}.history-select{flex:1;max-width:100%}.history-select,.logout-pill,.refresh-pill{padding:6px 8px;font-size:11px}.hamburger{display:block}}@media (max-width:480px){.stats{grid-template-columns:1fr}.table-panel{overflow-x:auto}}.router-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;margin-top:4px;display:grid}.router-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:10px;padding:18px;transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;box-shadow:0 1px 3px #1018280d}.router-card:hover{border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 8px 24px #1018281a}.skeleton-card{background:#fff;border:1px solid #eef2f7;border-radius:14px;flex-direction:column;gap:12px;min-height:260px;padding:18px;display:flex}.skeleton-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.skeleton-metrics{grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0;display:grid}.skeleton-bar{background:#eef2f7;border-radius:6px;position:relative;overflow:hidden}.skeleton-bar:after{content:"";background:linear-gradient(90deg,#0000,#ffffffb3,#0000);animation:1.4s ease-in-out infinite nocSkeletonShimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes nocSkeletonShimmer{to{transform:translate(100%)}}.router-card.status-error{background:#fffbfb;border-color:#fecaca}.router-card.status-offline{opacity:.85;border-color:#e2e8f0}.router-card-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.router-card-head b{color:#101828;font-size:14px}.router-status-pill{letter-spacing:.4px;color:#475467;background:#f2f4f7;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700}.router-status-pill.online{color:#15803d;background:#dcfce7}.router-status-pill.error{color:#b91c1c;background:#fee2e2}.router-status-pill.offline{color:#64748b;background:#f1f5f9}.router-card-sub{color:#667085;flex-wrap:wrap;gap:6px 14px;font-size:11px;display:flex}.router-error{color:#b91c1c;word-break:break-word;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:6px 10px;font-size:11px}.router-section-title{letter-spacing:.7px;color:#98a2b3;border-top:1px dashed #e2e8f0;margin-top:4px;padding-top:10px;font-size:10px;font-weight:700}.router-metrics{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.router-metric{flex-direction:column;gap:2px;display:flex}.metric-value{color:#101828;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:700;overflow:hidden}.metric-label{color:#98a2b3;letter-spacing:.3px;font-size:10px;font-weight:600}.peak-block{flex-direction:column;gap:6px;display:flex}.peak-line{justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;display:flex}.peak-label{color:#475467;flex-shrink:0;font-weight:600}.peak-values{font-variant-numeric:tabular-nums;flex-direction:column;align-items:flex-end;gap:1px;display:flex}.peak-values b{color:#101828;font-size:14px}.peak-sub{color:#98a2b3;font-size:10px}.peak-sub small{color:#667085}.port-util{color:#344054;flex-direction:column;gap:6px;font-size:12px;display:flex}.port-util .port-unused{color:#98a2b3;font-size:11px}.port-bar{background:#f1f5f9;border-radius:999px;height:6px;overflow:hidden}.port-bar-fill{background:linear-gradient(90deg,#2672ff,#5a9bff);border-radius:999px;height:100%;transition:width .3s}.active-ports{color:#475467;word-break:break-word;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:6px 8px;font-family:monospace;font-size:11px}.range-picker{background:#f2f4f7;border-radius:10px;gap:6px;padding:4px;display:flex}.range-btn{color:#667085;cursor:pointer;background:0 0;border:none;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:600;transition:background .12s,color .12s}.range-btn.active{color:#101828;background:#fff;box-shadow:0 1px 2px #10182814}.traffic-panel{background:#fff;border:1px solid #e2e8f0;border-radius:14px;margin-bottom:16px;padding:18px;box-shadow:0 1px 3px #1018280d}.traffic-panel .panel-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px;margin-bottom:12px;display:flex}.traffic-panel .panel-head b{color:#101828;font-size:13px}.traffic-panel .panel-head small{color:#98a2b3;font-size:11px}.traffic-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (max-width:900px){.traffic-grid{grid-template-columns:1fr}}.chart-wrap{width:100%}.chart-tooltip{color:#fff;pointer-events:none;white-space:nowrap;z-index:5;background:#101828;border-radius:8px;flex-direction:column;gap:2px;padding:6px 10px;font-size:10px;display:flex;position:absolute;top:6px;transform:translate(-50%);box-shadow:0 4px 12px #0000002e}.chart-tooltip b{color:#e2e8f0;font-weight:600}.empty-chart{text-align:center;color:#98a2b3;border:1px dashed #e2e8f0;border-radius:10px;padding:40px 20px;font-size:12px}.back-link{margin-top:8px}.back-link a{color:#2672ff;font-size:13px;font-weight:600;text-decoration:none}.back-link a:hover{text-decoration:underline}.kick-wrap{align-items:center;gap:6px;display:inline-flex}.kick-btn{color:#b91c1c;cursor:pointer;white-space:nowrap;background:#fee2e2;border:none;border-radius:7px;padding:5px 10px;font-size:11px;font-weight:700;transition:background .12s,transform .12s}.kick-btn:hover:not(:disabled){background:#fecaca;transform:translateY(-1px)}.kick-btn:disabled{opacity:.55;cursor:wait}.kick-btn-error{color:#b45309;background:#fef3c7}.kick-done{color:#15803d;white-space:nowrap;background:#dcfce7;border-radius:7px;padding:4px 10px;font-size:11px;font-weight:700}.kick-disabled{color:#cbd5e1;font-size:11px}.kick-msg{color:#b45309;text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:10px;overflow:hidden}