@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap";
.net-scope{--net-brand-dark:#036;--net-brand-mid:#005a9e;--net-brand-accent:#09c;--net-brand-600:#09c;--net-brand-400:#33add6;--net-brand-200:#b3e1ee;--net-brand-100:#d9f0f7;--net-brand-50:#f0f9fc;--net-healthy:#138a4a;--net-healthy-bg:#e1f5ea;--net-warning:#d08509;--net-warning-bg:#fdf1d8;--net-critical:#c0322e;--net-critical-bg:#fbe3e2;--net-bg:#fff;--net-surface:#fff;--net-surface-2:#f4fafc;--net-surface-3:#e8f2f7;--net-border:#d9e6ee;--net-border-strong:#b3ccdb;--net-text:#036;--net-text-muted:#4a6b82;--net-text-dim:#7a93a6;--net-shadow-sm:0 1px 2px #0033660d;--net-shadow:0 1px 3px #00336612, 0 1px 2px #0033660a;--net-shadow-md:0 4px 6px #00336612, 0 2px 4px #0033660d;--net-radius:10px;--net-radius-sm:6px;--net-font-sans:"Manrope", system-ui, sans-serif;--net-font-mono:"JetBrains Mono", monospace;--brand-dark:var(--net-brand-dark);--brand-mid:var(--net-brand-mid);--brand-accent:var(--net-brand-accent);--brand-700:var(--net-brand-dark);--brand-600:var(--net-brand-600);--brand-500:var(--net-brand-accent);--brand-400:var(--net-brand-400);--brand-300:#66c2e0;--brand-200:var(--net-brand-200);--brand-100:var(--net-brand-100);--brand-50:var(--net-brand-50);--healthy:var(--net-healthy);--healthy-bg:var(--net-healthy-bg);--warning:var(--net-warning);--warning-bg:var(--net-warning-bg);--critical:var(--net-critical);--critical-bg:var(--net-critical-bg);--bg:var(--net-bg);--surface:var(--net-surface);--surface-2:var(--net-surface-2);--surface-3:var(--net-surface-3);--border:var(--net-border);--border-strong:var(--net-border-strong);--text:var(--net-text);--text-muted:var(--net-text-muted);--text-dim:var(--net-text-dim);--shadow-sm:var(--net-shadow-sm);--shadow:var(--net-shadow);--shadow-md:var(--net-shadow-md);--radius:var(--net-radius);--radius-sm:var(--net-radius-sm);--font-sans:var(--net-font-sans);--font-mono:var(--net-font-mono);font-family:var(--net-font-sans);color:var(--net-text);background:var(--net-bg)}.net-scope .net-mono{font-family:var(--net-font-mono)}.net-scope .net-tnum{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.net-scope .net-label{text-transform:uppercase;letter-spacing:.08em;color:var(--net-text-dim);font-size:11px;font-weight:600}.net-scope .mono{font-family:var(--net-font-mono)}.net-scope .tnum{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.net-scope .label{text-transform:uppercase;letter-spacing:.08em;color:var(--net-text-dim);font-size:11px;font-weight:600}.net-scope .card{background:var(--net-surface);border:1px solid var(--net-border);border-radius:var(--net-radius);box-shadow:var(--net-shadow-sm)}.net-scope .btn{border-radius:var(--net-radius-sm);font-family:var(--net-font-sans);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;line-height:1;transition:background .15s,box-shadow .15s,opacity .15s;display:inline-flex}.net-scope .btn:disabled{opacity:.5;cursor:not-allowed}.net-scope .btn-primary{background:var(--net-brand-accent);color:#fff}.net-scope .btn-primary:hover:not(:disabled){background:var(--net-brand-mid)}.net-scope .btn-secondary{background:var(--net-surface-2);color:var(--net-text);border:1px solid var(--net-border)}.net-scope .btn-secondary:hover:not(:disabled){background:var(--net-surface-3)}.net-scope .btn-ghost{color:var(--net-text-muted);background:0 0;border:1px solid #0000}.net-scope .btn-ghost:hover:not(:disabled){background:var(--net-surface-2)}.net-scope .btn-sm{padding:5px 12px;font-size:12px}.net-scope .btn-lg{padding:11px 22px;font-size:15px}.net-scope .input{font-family:var(--net-font-sans);border-radius:var(--net-radius-sm);border:1px solid var(--net-border);background:var(--net-surface);color:var(--net-text);outline:none;width:100%;padding:8px 12px;font-size:13px;transition:border-color .15s,box-shadow .15s}.net-scope .input:focus{border-color:var(--net-brand-accent);box-shadow:0 0 0 3px #0099cc1f}.net-scope .input::placeholder{color:var(--net-text-dim)}.net-scope .chip{white-space:nowrap;border-radius:100px;align-items:center;gap:4px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.net-scope .chip-healthy{background:var(--net-healthy-bg);color:var(--net-healthy)}.net-scope .chip-warning{background:var(--net-warning-bg);color:var(--net-warning)}.net-scope .chip-critical{background:var(--net-critical-bg);color:var(--net-critical)}.net-scope .chip-blue{background:var(--net-brand-100);color:var(--net-brand-mid);border:1px solid var(--net-brand-200)}.net-scope .chip-dim{background:var(--net-surface-2);color:var(--net-text-muted);border:1px solid var(--net-border)}.net-scope .data-table{border-collapse:collapse;width:100%;font-size:13px}.net-scope .data-table th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--net-text-dim);border-bottom:1px solid var(--net-border);white-space:nowrap;-webkit-user-select:none;user-select:none;padding:10px 14px;font-size:10.5px;font-weight:700}.net-scope .data-table td{border-bottom:1px solid var(--net-border);color:var(--net-text-muted);padding:10px 14px}.net-scope .data-table tr:last-child td{border-bottom:none}.net-scope .data-table tbody tr:hover td{background:var(--net-surface-2)}.net-scope .table-scroll{-webkit-overflow-scrolling:touch;min-width:0;overflow-x:auto}.net-scope .topbar{border-bottom:1px solid var(--net-border);background:var(--net-surface);justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 28px;display:flex}.net-scope .kpi-strip{grid-template-columns:repeat(5,1fr) 1.4fr;gap:14px;display:grid}.net-scope .dash-layout{grid-template-columns:1fr 320px;align-items:start;gap:20px;display:grid}.net-scope .dash-sidebar{flex-direction:column;gap:14px;display:flex;position:sticky;top:20px}.net-scope .self-body{max-width:1200px;margin:0 auto;padding:28px 24px 80px}.net-scope .self-hero{grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;display:grid}.net-scope .self-sparklines{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.net-scope .tab-strip{border-bottom:1px solid var(--net-border);background:var(--net-surface);gap:2px;padding:0 28px;display:flex;overflow-x:auto}.net-scope .tab-btn{color:var(--net-text-muted);cursor:pointer;font-size:13px;font-weight:500;font-family:var(--net-font-sans);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:12px 16px;transition:color .15s,border-color .15s}.net-scope .tab-btn:hover{color:var(--net-text)}.net-scope .tab-btn.active{color:var(--net-brand-accent);border-bottom-color:var(--net-brand-accent);font-weight:600}.net-scope .toggle-track{background:var(--net-border-strong);cursor:pointer;border:none;border-radius:10px;flex-shrink:0;width:36px;height:20px;transition:background .2s;position:relative}.net-scope .toggle-track.on{background:var(--net-brand-accent)}.net-scope .toggle-thumb{pointer-events:none;background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003}.net-scope .toggle-track.on .toggle-thumb{transform:translate(16px)}@keyframes net-pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}@keyframes net-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes net-fade-fast{0%{opacity:0}to{opacity:1}}@keyframes net-pop-in{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes arc-draw{0%{stroke-dashoffset:502px}}@keyframes clock-spin{to{transform:rotate(360deg)}}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.net-scope .fade-in{animation:.25s both net-fade-in}.net-scope .fade-in-fast{animation:.15s both net-fade-fast}@media (max-width:1100px){.net-scope .kpi-strip{grid-template-columns:repeat(3,1fr)}.net-scope .dash-layout{grid-template-columns:1fr}.net-scope .dash-sidebar{display:none}}@media (max-width:900px){.net-scope .kpi-strip,.net-scope .self-sparklines{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.net-scope .self-body{padding:16px 16px 100px}.net-scope .self-hero,.net-scope .self-sparklines{grid-template-columns:1fr}.net-scope .topbar{padding:12px 16px}}
