:root{color-scheme:dark;--primary:#2c8f5d;--background:#101216;--surface:#191d22;--ink:#e6e9ee;--muted:#a0a9b7;--border:#30363e;--success:#64cd91;--danger:#ff8292;--warning:#efb35e;--nav:#111519;--nav-muted:#9ca8b6;--cyan:#70b2ff;--scroll-thumb:#506070;--scroll-track:#101216;--radius:6px;--body:'Segoe UI Variable','Segoe UI',sans-serif;--display:'Bahnschrift','Segoe UI',sans-serif;--mono:'Cascadia Code',Consolas,monospace}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}::-webkit-scrollbar-thumb:active{background:var(--primary)}::-webkit-scrollbar-track{background:var(--scroll-track)}
body{margin:0;background:var(--background);color:var(--ink);font:14px/1.6 var(--body);display:flex;min-height:100vh}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}a:active{opacity:.8}[hidden]{display:none!important}
aside{width:238px;flex-shrink:0;background:var(--nav);color:white;padding:28px 18px;min-height:100vh}.brand{display:flex;align-items:center;gap:12px;font:600 18px var(--display);letter-spacing:-.3px}.brand small{font:10px var(--body);letter-spacing:1.6px;color:var(--nav-muted);display:block;margin-top:6px}.mark{display:grid;place-items:center;width:38px;height:38px;background:var(--primary);border-radius:10px;color:white;font:600 22px var(--display)}
nav{display:grid;gap:4px;margin-top:32px}nav a{display:flex;align-items:center;gap:10px;color:#c2cee0;padding:10px 12px;border-radius:7px;min-height:42px;font-size:13px;white-space:nowrap}nav a:hover{background:#1c304c;color:white;text-decoration:none}nav a[aria-current]{background:#263c60;color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #60a5fa}.nav-label{color:var(--nav-muted);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin:20px 12px 7px}.nav-icon{width:18px;height:18px;flex-shrink:0}.aside-note{margin:32px 12px 0;padding-top:20px;border-top:1px solid #263c60;color:#c2cee0;font-size:10px;letter-spacing:1.2px}.aside-note span{display:block;font-size:11px;letter-spacing:0;color:var(--nav-muted);margin-top:5px}
main{min-width:0;flex:1;max-width:1800px;padding:28px 32px}header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:20px}header>div:first-child{flex:1;min-width:200px}h1{font:600 27px/1.2 var(--display);letter-spacing:-.6px;margin:0}h2{font:600 18px/1.4 var(--display);margin:0 0 14px}h3{font:600 14px/1.5 var(--body);margin:0}p{margin:8px 0}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--muted);margin:0 0 7px}#account{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}#account>span{padding-left:14px;border-left:1px solid var(--border)}#account button{padding:8px 12px;font-size:12px}
button{font:600 13px var(--body);background:var(--primary);color:white;border:1px solid transparent;border-radius:7px;padding:10px 15px;min-height:42px;cursor:pointer;transition:background .12s}button:hover{filter:brightness(.95)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.secondary{background:var(--surface);color:var(--ink);border-color:var(--border)}.secondary:hover{background:var(--background)}.danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--primary);outline-offset:3px}nav a:focus-visible{outline-color:#93c5fd}
.notice{background:#eaf1ff;border:1px solid #d6e4ff;color:#2d4c7d;padding:10px 14px;border-radius:8px;min-height:43px;font-size:12px;display:block}.notice.error{background:#fff0f2;border-color:#f4c9d2;color:var(--danger)}#sync{margin:8px 0 20px;font-size:11px;min-height:18px}.muted{color:var(--muted);font-size:12px}.mono{font-family:var(--mono)}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;position:relative}.metric>span{font-size:12px;color:var(--muted)}.metric strong{display:block;font:600 31px/1.5 var(--display);letter-spacing:-.8px;font-variant-numeric:tabular-nums}.metric small{display:block;font-size:11px;color:var(--muted);line-height:1.5}.metric:before{content:'';position:absolute;right:20px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--primary)}.metric:nth-child(3):before{background:var(--success)}.metric:nth-child(4):before{background:var(--danger)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-top:18px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.panel-head h2{margin:0}.router-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.router{position:relative;border-top:3px solid var(--primary)}.router-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}.router-head h3{font-size:16px}.router-head a{font-size:11px}.router>button{margin:0 0 4px;font-size:11px;min-height:34px;padding:7px 12px}.badge{display:inline-flex;align-items:center;gap:5px;border:0;background:#e4f4ef;color:var(--success);font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap}.badge:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}.badge.offline,.badge.unreachable,.badge.error{background:#fff0f2;color:var(--danger)}.badge.warning{background:#fff6df;color:var(--warning)}.badge.paused{background:#eef2f7;color:var(--muted)}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 0;margin:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.values span{font-size:11px;color:var(--muted)}.values strong{display:block;font:600 20px var(--display);font-variant-numeric:tabular-nums;margin-top:5px;overflow-wrap:anywhere}.table-wrap{overflow:auto;scrollbar-gutter:stable;min-height:160px;margin-top:16px}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}th{color:var(--muted);background:#f8fafd;font-size:10px;letter-spacing:.4px;font-weight:600;text-transform:uppercase}td,th{padding:12px 14px;border-bottom:1px solid var(--border)}td{font-size:12px}tbody tr:hover{background:#f8fafd}tbody tr:last-child td{border-bottom:0}details{margin-top:14px}summary{font-size:12px;cursor:pointer;color:var(--primary);font-weight:600}
.plot{margin:18px 0 0;position:relative}.plot figcaption{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:8px 0}.plot-unit{font-family:var(--mono);font-size:10px}.chart{width:100%;height:275px;display:block;overflow:visible}.chart text{font:11px var(--mono);fill:var(--muted)}.grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:3 5}.series-0,.download{stroke:var(--primary);stroke-width:2.4;fill:none;stroke-linejoin:round}.series-1,.upload{stroke:var(--cyan);stroke-width:2.2;fill:none;stroke-linejoin:round}.plot-crosshair{stroke:var(--muted);stroke-dasharray:3 3}.plot-hit{cursor:crosshair}.plot-legend,.legend{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;margin-top:5px}.plot-legend>span{display:flex;gap:7px;align-items:center;color:var(--muted)}.plot-legend strong{color:var(--ink);font-variant-numeric:tabular-nums}.series-dot-0,.series-dot-1{display:inline-block;width:8px;height:8px;border-radius:3px;background:var(--primary)}.series-dot-1{background:var(--cyan)}.plot-tooltip{position:absolute;top:24px;left:58px;right:58px;background:var(--nav);color:white;padding:8px 12px;border-radius:6px;box-shadow:0 4px 12px #101e3520;font-size:11px;pointer-events:none}.chart-empty{min-height:250px;display:grid;place-content:center;text-align:center;color:var(--muted)}.signal-symbol{font:40px var(--display);color:var(--primary)}.legend b{color:var(--primary)}.legend .up{color:var(--cyan)}
input,select,textarea{font:14px var(--body);background:var(--surface);color:var(--ink);border:1px solid #cbd6e5;border-radius:7px;padding:10px 12px;min-height:42px;max-width:100%}input{width:220px}input[type=checkbox]{width:auto;min-height:auto;accent-color:var(--primary);margin-right:8px}select{cursor:pointer}textarea{width:100%;min-height:90px;resize:none}input[aria-invalid=true]{border-color:var(--danger)}.field label{display:block;font-weight:600;font-size:12px;margin-bottom:6px}.field input,.field select{width:100%}.field-error{min-height:22px;color:var(--danger);font-size:12px;margin:6px 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}.search{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.customer-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:20px 0}.customer-filters .field{min-width:145px}.pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding-top:16px;font-size:12px}
dialog{width:480px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);overflow:auto;padding:28px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #101e352b}dialog::backdrop{background:#101e3590}dialog form{display:flex;gap:12px;flex-wrap:wrap}#login form{display:block}#login .field{margin:16px 0}.empty{padding:32px;color:var(--muted)}code,pre{font-family:var(--mono);font-size:12px;background:var(--background);border-radius:4px}code{padding:2px 5px}pre{padding:16px;overflow:auto}footer{border-top:1px solid var(--border);padding-top:18px;margin-top:28px;font-size:10px;color:var(--muted)}
@media(min-width:1550px){.metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.metric strong{font-size:29px}}
@media(max-width:1100px){aside{width:214px;padding:22px 12px}main{padding:24px}.router-grid{grid-template-columns:1fr}.metric{padding:16px}.metric strong{font-size:28px}}
@media(max-width:760px){body{display:block}aside{width:100%;min-height:0;padding:18px}.brand{font-size:17px}nav{display:flex;overflow:auto;gap:4px;margin-top:18px;padding-bottom:6px}nav a{flex-shrink:0;padding:9px 12px}.nav-label,.aside-note{display:none}main{padding:20px 16px}h1{font-size:24px}header{gap:12px;padding-bottom:18px}#account{width:100%;justify-content:flex-end}#account>span{border:0;padding:0}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric strong{font-size:27px}.panel{padding:16px}.form-grid{grid-template-columns:1fr}.values{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-filters .field{width:100%}.chart{height:230px}.plot-tooltip{left:8px;right:8px}.plot-legend{gap:12px}.plot-legend strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}button:active{transform:none}}
@media(forced-colors:active){*{scrollbar-color:auto}.badge{border:1px solid currentColor}}

.link-button{background:transparent;color:var(--primary);border:0;padding:0;min-height:34px;text-align:left;white-space:normal}.link-button:hover{text-decoration:underline}textarea{font:inherit;width:100%;min-height:100px;border:1px solid var(--border);border-radius:7px;padding:10px}textarea:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.router-grid:has(>.router:only-child){grid-template-columns:1fr}

.integration-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin:0 0 18px;overflow:hidden}.integration-strip a{padding:18px 22px;display:grid;gap:5px;color:var(--ink);border-right:1px solid var(--border)}.integration-strip a:last-child{border-right:0}.integration-strip span{font-size:10px;letter-spacing:1.2px;color:var(--muted)}.integration-strip strong{font-size:18px}.integration-strip small{color:var(--muted)}@media(max-width:760px){.integration-strip{grid-template-columns:1fr}.integration-strip a{border-right:0;border-bottom:1px solid var(--border)}.nav-label{display:none}}

/* Instrument panels follow the user-provided NOC reference. */
:root{--chart-download:#64cd91;--chart-upload:#70b2ff;--chart-grid:#353b44;--chart-fill-opacity:.24;--control-bg:#111519}
nav a:hover{background:#20272c;color:var(--ink)}nav a[aria-current]{background:#22382e;box-shadow:inset 3px 0 0 var(--chart-download)}.mark{background:var(--primary)}
.notice{background:#182d26;border-color:#2b493b;color:#c3e1d1}.notice.error{background:#351f27;border-color:#754052;color:var(--danger)}
input,select,textarea{background:var(--control-bg);color:var(--ink);border-color:var(--border)}input[type=range]{accent-color:var(--chart-download);padding:0;min-height:30px}.secondary:hover{background:#26312b}.secondary{color:var(--ink)}button:not(.secondary):not(.danger):not(.link-button){color:#fff}.badge.online{background:#203c2c;color:var(--success)}.badge.offline,.badge.unreachable,.badge.error{background:#40252b;color:var(--danger)}.badge.warning{background:#3c3020;color:var(--warning)}.badge.paused{background:#303742;color:#c5cfdd}
th{background:#20252c;color:#bfc7d3}tbody tr:hover{background:#20272b}.panel,.metric{box-shadow:none;border-radius:var(--radius)}.metric strong{color:var(--chart-download)}.metric:after{display:none}.metric{border-top:1px solid var(--border);padding:14px 18px}.metrics{gap:8px}.metric strong{font-size:27px}.router{border-top:1px solid var(--border)}.integration-strip strong{color:var(--chart-download)}
.traffic-panel{background:#191d22;border-color:#30363e}.traffic-panel .panel-head{border-bottom:1px solid var(--border);padding-bottom:15px;margin-bottom:10px}.traffic-panel h2{margin:0}.traffic-panel .eyebrow{color:var(--muted)}.chart-window{display:flex;gap:5px}.chart-window button{min-height:34px;padding:6px 11px;font-size:12px}.chart-window button[aria-pressed=true]{background:#264533;color:#a8edc6;border-color:#417656}
.plot{margin:0;position:relative}.plot figcaption{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:12px 0}.chart{height:auto;width:100%;display:block}.chart text{fill:var(--muted);font-size:12px;font-family:var(--mono)}.chart .grid-line{stroke:var(--chart-grid);stroke-width:.8;stroke-dasharray:none}.chart .series-0{stroke:var(--chart-download);stroke-width:2.2}.chart .series-1{stroke:var(--chart-upload);stroke-width:2}.area-start-0,.area-end-0{stop-color:var(--chart-download)}.area-start-1,.area-end-1{stop-color:var(--chart-upload)}.area-start-0,.area-start-1{stop-opacity:.26}.area-end-0,.area-end-1{stop-opacity:.03}.plot-crosshair{stroke:#d4dbe5;stroke-width:1;stroke-dasharray:4 4}.plot-tooltip{position:absolute;left:8%;right:8%;top:35px;background:#0c1017;border:1px solid #52616d;padding:8px 12px;border-radius:4px;font-size:11px;color:var(--ink);pointer-events:none;z-index:2}.plot-tooltip[hidden]{display:none}.plot-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:14px;border-top:1px solid var(--border);gap:20px}.series-summary{display:grid;gap:5px}.series-summary>span{font-size:12px;display:flex;gap:7px;align-items:center}.series-summary strong{font:600 28px var(--mono);color:var(--chart-download)}.series-summary:nth-child(2) strong{color:var(--chart-upload)}.series-summary strong small{font-size:12px;font-weight:400}.series-summary>small{color:var(--muted);font-size:11px}.series-dot-0{background:var(--chart-download)}.series-dot-1{background:var(--chart-upload)}.chart-explorer{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}.sample-output{grid-column:1/-1;min-height:20px;font-family:var(--mono)}
.resource-console{display:grid;gap:12px;margin-bottom:18px}.resource-device{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.resource-device-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}.resource-device-head>span:last-child{margin-left:auto;color:var(--muted);font-size:11px;font-family:var(--mono)}.gauge-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr}.gauge-panel{margin:0;padding:16px 20px;border-right:1px solid var(--border);text-align:center}.gauge-panel h3{font-size:13px;color:#cbd1db;margin-bottom:4px}.gauge-panel svg{width:100%;max-width:240px;display:block;margin:auto}.gauge-panel svg path{fill:none}.gauge-track{stroke:#33423a;stroke-width:5}.gauge-zone.warning{stroke:#d39945;stroke-width:5}.gauge-zone.danger{stroke:#e06e78;stroke-width:5}.gauge-value{stroke-width:12;stroke:var(--chart-download)}.gauge-value.warning{stroke:var(--warning)}.gauge-value.danger{stroke:var(--danger)}.gauge-value.unknown{stroke:#657080}.gauge-panel svg text{fill:var(--muted);font-size:10px;font-family:var(--mono)}.gauge-panel svg .gauge-number{fill:var(--chart-download);font-size:29px;font-weight:600}.gauge-panel svg .gauge-number.warning{fill:var(--warning)}.gauge-panel svg .gauge-number.danger{fill:var(--danger)}.gauge-panel svg .gauge-number.unknown{fill:var(--muted)}.gauge-panel p{color:var(--muted);font-size:10px}.resource-reading{display:flex;flex-direction:column;justify-content:center;padding:22px 32px;gap:6px}.resource-reading>span{font-size:12px;color:var(--muted)}.resource-reading strong{font:600 30px var(--mono);color:var(--chart-download);margin-bottom:14px}.resource-reading strong.upload-reading{color:var(--chart-upload)}.resource-reading small{font:400 12px var(--body)}
.input-control{display:flex;gap:6px;align-items:center}.input-control input{min-width:0;flex:1}.password-toggle{font-size:11px;min-width:64px;padding:7px 10px}.account-filters{display:flex;align-items:end;gap:12px;margin:15px 0;flex-wrap:wrap}.account-filters .field{flex:1;min-width:150px}.owner-label{display:block;color:var(--muted);font-size:10px;margin-top:3px}.row-actions{display:flex;flex-wrap:wrap;gap:6px}.row-actions button{font-size:11px;min-height:34px;padding:7px 10px}dialog{background:var(--surface);color:var(--ink);border-color:var(--border);width:min(680px,calc(100% - 28px));max-height:90dvh;overflow:auto}dialog::backdrop{background:#0009}textarea{resize:none;min-height:140px}.toast{position:fixed;bottom:22px;right:22px;max-width:min(450px,calc(100% - 32px));padding:14px 20px;background:#20382c;border:1px solid #4f7860;color:#d4eadf;border-radius:6px;z-index:1000;box-shadow:0 10px 30px #0005}
@media(max-width:760px){.gauge-grid{grid-template-columns:1fr 1fr}.resource-reading{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);padding:16px}.resource-reading strong{font-size:23px;margin:0}.resource-device-head{flex-wrap:wrap}.resource-device-head>span:last-child{margin-left:0;flex-basis:100%}.gauge-panel{padding:12px 10px}.gauge-panel:nth-child(2){border-right:0}.plot-legend{gap:10px}.series-summary strong{font-size:23px}.chart-explorer{grid-template-columns:1fr}.traffic-panel .panel-head{align-items:start;gap:12px;flex-direction:column}.chart-window button{min-height:40px}.account-filters{align-items:stretch;flex-direction:column}.sample-output{overflow-wrap:anywhere}.toast{bottom:12px;right:12px}}
@media(forced-colors:active){.chart path{stroke:CanvasText}.chart .grid-line{stroke:GrayText}.gauge-track,.gauge-zone{stroke:GrayText}.gauge-value{stroke:Highlight}.gauge-panel svg text{fill:CanvasText}}
.monitor-console{display:grid;grid-template-columns:minmax(290px,.65fr) minmax(0,1.35fr);gap:16px;align-items:stretch;margin-bottom:18px}.monitor-console .resource-console{display:block;margin:0}.monitor-console .traffic-panel{margin:0}.monitor-console .gauge-grid{grid-template-columns:1fr 1fr}.monitor-console .resource-reading{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}.monitor-console .resource-reading span{grid-column:1}.monitor-console .resource-reading strong{grid-column:2;grid-row:auto;font-size:21px}.monitor-console .resource-device-head{flex-wrap:wrap}.monitor-console .resource-device-head span{width:100%}.chart-explorer input[type=range]{width:100%}@media(max-width:1150px){.monitor-console{grid-template-columns:1fr}.monitor-console .resource-console{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}}

.system-metrics .metric:before{display:none}
.mobile-menu-toggle{display:none}aside nav[hidden]{display:none}@media(max-width:760px){aside{position:relative}.mobile-menu-toggle{display:inline-flex;position:absolute;right:14px;top:17px}aside .brand{padding-right:75px}}

.olt-metrics .metric strong{font-size:clamp(17px,2vw,27px);overflow-wrap:anywhere}