html{scrollbar-gutter:stable}
html{margin:0;background:var(--sy-bg,#fff);color:var(--sy-ink,#14283f);font-family:Arial,sans-serif}
body{margin:0;background:var(--sy-bg,#fff);color:var(--sy-ink,#14283f);font-family:Arial,sans-serif}
#sy-ap{min-height:100vh}
.sy-header img{background:transparent}
.v01-widget-board{position:relative}
.v01-widget{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;min-width:0;margin:0}
.v01-widget header strong{margin-right:auto}
.v01-widget [data-plot]{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;padding-top:4px}
.v01-widget [data-plot]>svg{width:100%;flex:1;min-height:0;height:0}
.v01-widget [data-plot]>small{flex:none;text-align:center;font-size:11px}
.v01-widget .ap-current-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1;align-content:start}
.v01-widget .sy-metric{min-width:0;padding:10px}
.v01-widget .sy-metric strong{font-size:22px}
.v01-widget .sy-metric .sy-muted{font-size:11px}
.v01-widget .sy-inline{flex:none}
.v01-widget .sy-map{width:100%;flex:1;min-height:0}
.v01-widget .ap-caption{margin:0;flex:none;font-size:11px}
.v01-plot-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.v01-plot-controls .sy-button{padding:5px 7px;font-size:11px}
.v01-plot-controls label{font-size:11px;font-weight:400;display:flex;align-items:center;gap:4px}
.v01-plot-controls select{font-size:11px;padding:4px;width:auto}
.v01-icmp-metric{display:flex;flex-direction:column;flex:1;min-height:0}
.v01-icmp-metric>strong{font-size:12px}
.v01-script{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:12px;background:var(--theme-tint-blue,#f4f7fa);padding:14px;border-radius:8px}
.v01-diagnostic{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:12px;background:var(--theme-tint-blue,#f4f7fa);padding:14px;border-radius:8px}
.sy-subnav{flex-wrap:wrap}
.sy-nav button{display:flex;align-items:center;gap:10px}
.sy-nav svg{width:18px;height:18px;flex:none}
.ap-dialog{max-height:90vh;overflow:auto}
.ap-context-sticky{position:sticky;top:var(--sy-header-height,86px);z-index:15}
.ap-context-sticky label{font-weight:400}
.ap-health-table td{padding:8px 10px}
.ap-log td{padding:8px 10px}
.ap-data-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#b43e3e}
.ap-data-valid .ap-data-dot{background:#438454}
.sy-footer{padding-top:20px}

@media(max-width:720px){.ap-context-sticky{position:static}}
#sy-ap .mr-widget>header>strong>svg{width:18px}
#sy-ap .mr-reading{flex:none;display:flex;flex-direction:column;gap:5px;margin-bottom:8px;min-width:0}
#sy-ap .mr-reading>strong svg{width:22px;height:22px;flex:none}
#sy-ap .mr-reading>small:last-child:not(:first-child){font-size:11px}
#sy-ap .mr-traffic-current{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
#sy-ap .mr-traffic-current svg{width:22px;height:22px}
#sy-ap .mr-traffic-directions{display:flex;gap:6px;margin:5px 0}
#sy-ap .mr-traffic-directions button{color:var(--series-color);border-color:color-mix(in srgb,var(--series-color) 30%,white);background:color-mix(in srgb,var(--series-color) 7%,white);display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:4px 8px}
#sy-ap .mr-widget[data-widget="traffic"] .mr-traffic-directions button[aria-pressed="true"]{background:color-mix(in srgb,var(--series-color) 16%,white);border-color:color-mix(in srgb,var(--series-color) 45%,white);color:color-mix(in srgb,var(--series-color) 72%,#14283f);opacity:1;box-shadow:none}
#sy-ap .mr-widget[data-widget="traffic"] .mr-traffic-directions button[aria-pressed="false"]{background:var(--noc-card);border-color:var(--noc-line);color:var(--noc-muted);opacity:1;box-shadow:none}
#sy-ap[data-display-mode="dark"] .mr-widget[data-widget="traffic"] .mr-traffic-directions button[aria-pressed="true"]{background:color-mix(in srgb,var(--series-color) 24%,#202c3d);border-color:color-mix(in srgb,var(--series-color) 55%,#202c3d);color:color-mix(in srgb,var(--series-color) 70%,white)}
#sy-ap .mr-traffic-directions svg{width:14px;height:14px}
#sy-ap .mr-plot-canvas{position:relative;flex:1;min-height:90px}
#sy-ap .mr-plot-canvas svg{width:100%;height:100%;display:block;min-height:90px}
#sy-ap .mr-chart-legend span{display:inline-flex;align-items:center;gap:5px}
#sy-ap .mr-chart-legend i{width:24px;border-top:2px solid;display:inline-block}
#sy-ap [data-sensor-plot]{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
#sy-ap .mr-router-picture{width:70px;height:70px;flex:none;display:grid;place-items:center;color:#7754b0;background:linear-gradient(110deg,#f2eaff,#f7f4fb);border-radius:8px}
#sy-ap .mr-router-picture svg{width:52px;height:52px}
#sy-ap .mr-map-shell{display:flex;flex-direction:column;flex:1;min-height:220px;height:100%;gap:6px}
#sy-ap [data-rich-map]{flex:1;min-height:220px;background:var(--theme-tint-blue,#eef4f8);border-radius:6px;isolation:isolate;z-index:0}
#sy-ap .mr-map-shell .ap-caption{font-size:10px;color:#7b899c}
#sy-ap .mr-map-pin span{display:block;width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:#40a184;box-shadow:0 0 0 4px #40a18433}
#sy-ap .mr-map-pin.down span{background:#cf6a7b;box-shadow:0 0 0 4px #cf6a7b33}
#sy-ap .mr-map-pin.unknown span{background:#9aa5b8;box-shadow:0 0 0 4px #9aa5b833}
#sy-ap .mr-map-pin.selected span{box-shadow:0 0 0 5px #4164af66}
#sy-ap .mr-map-shell .leaflet-control-attribution{font-size:9px}
#sy-ap .mr-rank-list{padding:0 10px 0 28px;margin:10px 0}
#sy-ap .mr-rank-list li{margin-bottom:15px;padding-left:4px}
#sy-ap .mr-rank-list li>div{display:flex;justify-content:space-between;gap:8px;font-size:12px}
#sy-ap .mr-rank-list small{font-size:10px;color:#7b899b}
#sy-ap .mr-rank-track{display:block;height:3px;background:#edf1f6;margin:6px 0}
#sy-ap .mr-rank-track>i{height:3px;display:block;background:linear-gradient(90deg,#38a3d6,#9c77cd)}

@media(max-width:700px){
#sy-ap .mr-router-picture{width:45px;height:45px}
#sy-ap .mr-router-picture svg{width:38px;height:38px}}
#sy-ap .wp-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
#sy-ap .wp-heading h4{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:18px;color:var(--theme-blue,#172d49)}
#sy-ap .wp-heading p{margin:0;color:var(--theme-muted,#718099);font-size:13px}
#sy-ap .wp-select-all{display:flex;align-items:center;gap:8px;color:var(--theme-muted,#62758e);font-size:13px;cursor:pointer}
#sy-ap .wp-info{position:relative;display:inline-flex;color:var(--theme-blue,#477ab5);cursor:help}
#sy-ap .wp-info>svg{width:17px;height:17px}
#sy-ap .wp-info>[role="tooltip"]{display:none;position:absolute;top:26px;left:0;z-index:10;width:260px;max-width:60vw;padding:10px 12px;background:linear-gradient(110deg,var(--theme-tint-blue,#edf5ff),var(--theme-tint-purple,#f4edfc));border:1px solid var(--theme-line,#dce3f3);border-radius:8px;box-shadow:0 5px 15px #253d6426;font-size:12px;line-height:1.5;font-weight:400;color:var(--theme-blue,#43556f);pointer-events:none}
#sy-ap .wp-info:hover>[role="tooltip"]{display:block}
#sy-ap .wp-info:focus>[role="tooltip"]{display:block}
#sy-ap .wp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#sy-ap .wp-card{--wp-color:#347fc7;--wp-fill:#edf7ff;--wp-border:#c4dff5;position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;padding:18px;min-height:120px;border:1px solid var(--wp-border);border-radius:8px;background:linear-gradient(110deg,var(--wp-fill),color-mix(in srgb,var(--wp-fill) 45%,white));cursor:pointer;box-shadow:0 2px 7px #243b5507;overflow:hidden}
#sy-ap .wp-card[data-picker-metric="cpu"]{--wp-color:#5069dd;--wp-fill:#edf1ff;--wp-border:#c5d0f6}
#sy-ap .wp-card[data-picker-metric="memory"]{--wp-color:#9759d4;--wp-fill:#f3eefe;--wp-border:#dfcef7}
#sy-ap .wp-card[data-picker-metric="storage"]{--wp-color:#3a9b83;--wp-fill:#eaf9f2;--wp-border:#c1e9da}
#sy-ap .wp-card[data-picker-metric="uptime"]{--wp-color:#5577cf;--wp-fill:#eef2ff;--wp-border:#c8d7f9}
#sy-ap .wp-card[data-picker-metric="sensors"]{--wp-color:#d98624;--wp-fill:#fff2e3;--wp-border:#f2d8b6}
#sy-ap .wp-card[data-picker-metric="latency"]{--wp-color:#20a7a1;--wp-fill:#e9f9fc;--wp-border:#bee8ec}
#sy-ap .wp-card[data-picker-metric="packet_loss"]{--wp-color:#d55f83;--wp-fill:#fff0f4;--wp-border:#f0c4d3}
#sy-ap .wp-card:hover{border-color:var(--wp-color)}
#sy-ap .wp-card:has(>input:checked){border-color:var(--wp-color);box-shadow:inset 0 0 0 1px var(--wp-color),0 3px 10px #243b5510}
#sy-ap .wp-card:focus-within{outline:2px solid var(--wp-color);outline-offset:2px}
#sy-ap .wp-icon{display:grid;place-items:center;width:60px;height:60px;flex:none;background:color-mix(in srgb,var(--wp-color) 10%,transparent);color:var(--wp-color);border-radius:12px;z-index:1}
#sy-ap .wp-icon svg{width:33px;height:33px}
#sy-ap .wp-card-content{display:flex;flex-direction:column;gap:7px;min-width:0;z-index:1;padding-right:18px}
#sy-ap .wp-card-content>strong{font-size:15px;color:var(--theme-blue,#172b46)}
#sy-ap .wp-value{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:19px;line-height:1.35;font-weight:700;color:var(--wp-color);overflow-wrap:anywhere}
#sy-ap .wp-rx{color:var(--theme-blue,#148ddd)}
#sy-ap .wp-tx{color:var(--theme-amber,#e58b27)}
#sy-ap .wp-state{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:400}
#sy-ap .wp-state i{width:8px;height:8px;border-radius:50%;background:currentColor}
#sy-ap .wp-valid{background:var(--theme-tint-green,#e0f4e9);color:var(--theme-green,#28734d)}
#sy-ap .wp-missing{background:var(--theme-tint-amber,#fff1da);color:var(--theme-amber,#95652c)}
#sy-ap .wp-card>input{position:absolute;top:14px;right:14px;width:17px;height:17px;accent-color:var(--wp-color);cursor:pointer;z-index:2}
#sy-ap .wp-watermark{position:absolute;right:26px;bottom:10px;pointer-events:none;z-index:0;opacity:.075;color:var(--wp-color)}
#sy-ap .wp-watermark svg{width:90px;height:90px}
#sy-ap .wp-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
#sy-ap .wp-footer .sy-button{display:inline-flex;align-items:center;gap:8px}
#sy-ap .wp-footer svg{width:19px;height:19px}
#sy-ap .wp-footer small{color:var(--theme-muted,#75849b);font-size:12px}

@media(max-width:700px){#sy-ap .wp-grid{grid-template-columns:1fr}
#sy-ap .wp-card{padding:14px;gap:12px}
#sy-ap .wp-icon{width:48px;height:48px}
#sy-ap .wp-value{font-size:17px}}
#sy-ap .ap-device-grid{grid-template-columns:minmax(230px,1fr) minmax(0,3fr);gap:16px}
#sy-ap .ap-device-content{container-type:inline-size}
#sy-ap .wp-compact .wp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#sy-ap .wp-compact .wp-card{min-height:88px;padding:15px 12px;gap:12px;overflow:visible;border-color:var(--wp-border);box-shadow:0 2px 6px #243b5505}
#sy-ap .wp-compact .wp-card:has(>input:checked){border-color:color-mix(in srgb,var(--wp-color) 55%,white);box-shadow:0 2px 6px #243b5508}
#sy-ap .wp-compact .wp-icon{width:46px;height:46px;border-radius:10px}
#sy-ap .wp-compact .wp-icon svg{width:28px;height:28px}
#sy-ap .wp-compact .wp-card-content{gap:8px;padding-right:12px}
#sy-ap .wp-compact .wp-card-content>strong{font-size:14px}
#sy-ap .wp-compact .wp-watermark{right:16px;bottom:10px;opacity:.045}
#sy-ap .wp-compact .wp-watermark svg{width:65px;height:65px}
#sy-ap .wp-compact .wp-heading p+p{margin-top:5px}
#sy-ap .wp-availability{display:inline-flex;align-items:center;gap:7px;width:max-content;position:relative;color:var(--theme-blue,#65809e);cursor:help}
#sy-ap .wp-availability>i{width:8px;height:8px;border-radius:50%;background:#d3993f;box-shadow:0 0 0 4px #e7bd6b1a}
#sy-ap .wp-availability.available>i{background:#2f9567;box-shadow:0 0 0 4px #68be8e1a}
#sy-ap .wp-availability>svg{width:13px;height:13px}
#sy-ap .wp-availability>[role="tooltip"]{display:none;position:absolute;bottom:calc(100% + 8px);left:0;width:210px;max-width:60vw;z-index:12;padding:9px 11px;border:1px solid var(--theme-line,#dce3f3);border-radius:8px;background:linear-gradient(110deg,var(--theme-tint-blue,#edf5ff),var(--theme-tint-purple,#f4edfc));box-shadow:0 5px 15px #253d6426;font-size:11px;line-height:1.5;color:var(--theme-blue,#43556f);pointer-events:none}
#sy-ap .wp-availability:hover>[role="tooltip"]{display:block}
#sy-ap .wp-availability:focus>[role="tooltip"]{display:block}
#sy-ap .wp-save-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#sy-ap .wp-save-state{display:inline-flex;align-items:center;gap:6px;color:var(--theme-muted,#71849a);font-size:12px}
#sy-ap .wp-save-state>svg{width:15px;height:15px;color:var(--theme-green,#2f9567)}
#sy-ap .wp-save-state[data-dirty="true"]{color:var(--theme-amber,#a67329)}
#sy-ap .wp-save-state[data-dirty="true"]>svg{display:none}
#sy-ap .wp-compact .wp-footer .sy-button:disabled{opacity:.45;box-shadow:none}

@container(max-width:900px){#sy-ap .wp-compact .wp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@container(max-width:540px){#sy-ap .wp-compact .wp-grid{grid-template-columns:minmax(0,1fr)}}

@media(max-width:850px){#sy-ap .ap-device-grid{grid-template-columns:minmax(0,1fr)}}
html{scrollbar-gutter:stable}
#sy-ap [data-widget-board]{overflow-anchor:none}
#sy-ap .mr-layout-tools{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0;background:transparent}
#sy-ap .mr-layout-tools .sy-button svg{width:16px;height:16px}
#sy-ap .sy-panel>h3:has(.mr-map-focus){display:flex;align-items:center;justify-content:space-between}
#sy-ap .mr-map-focus{padding:5px;line-height:1}
#sy-ap .mr-map-focus svg{width:17px;height:17px}
#sy-ap .mr-layout-tools>div{display:flex;flex-wrap:wrap;align-items:flex-start;gap:7px}
#sy-ap .mr-layout-tools>small svg{width:14px;height:14px;color:#299269}
#sy-ap .mr-widget [data-widget-lock][aria-pressed="false"]{color:#aa6e22;border-color:#e7cc9d;background:#fff3df}
#sy-ap .mr-resize-handle{position:absolute;right:2px;bottom:2px;z-index:5;width:22px;height:22px;display:grid;place-items:center;padding:2px;border:0;border-radius:4px;background:#edf2f9b3;color:#7189a8;cursor:nwse-resize;touch-action:none}
#sy-ap .mr-resize-handle svg{width:15px;height:15px}
#sy-ap .mr-widget[data-widget-locked="false"]>header{touch-action:none;user-select:none}
#sy-ap [data-layout-gesture="move"] .mr-widget>header{cursor:grabbing}
#sy-ap [data-layout-gesture="resize"]{cursor:nwse-resize}
#sy-ap [data-layout-gesture] .mr-widget:not(.mr-moving){transition:none}
#sy-ap .mr-widget.mr-moving{z-index:6;transition:none;box-shadow:0 8px 24px #27496b24}

@media(prefers-reduced-motion:reduce){#sy-ap [data-layout-gesture] .mr-widget:not(.mr-moving){transition:none}}
#sy-ap .mr-router-picture.mr-has-photo{width:112px;height:76px;background:#fff;padding:4px;position:relative}
#sy-ap .mr-router-picture img{display:block;width:100%;height:100%;object-fit:contain}
#sy-ap .mr-router-picture img[hidden]{display:none}
#sy-ap .mr-router-picture.mr-has-photo>svg{display:none}
#sy-ap .mr-router-picture.mr-photo-failed>svg{display:block}

@media(max-width:700px){#sy-ap .mr-router-picture.mr-has-photo{width:80px;height:60px}}
#sy-ap [data-widget="router_summary"] .mr-router-picture.mr-has-photo{width:clamp(100px,34cqi,210px);height:100%;max-height:170px;padding:3px}
#sy-ap .mr-color-floating{position:fixed;z-index:65;width:300px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;border:1px solid #d8ccf2;border-radius:9px;background:linear-gradient(135deg,#fff 55%,#fff8f2 100%);box-shadow:0 8px 26px #26364f26;color:#172d4c;font:12px/1.4 Arial,sans-serif;isolation:isolate}
#sy-ap .mr-color-handle{display:flex;align-items:center;gap:8px;min-height:46px;padding:9px 12px;background:linear-gradient(110deg,#e3edff,#e9ddf6 65%,#f8e9ef);cursor:grab;touch-action:none;user-select:none}
#sy-ap .mr-color-handle:active{cursor:grabbing}
#sy-ap .mr-color-grip{font-size:20px;color:#9874d1}
#sy-ap .mr-color-handle>svg{width:20px;height:20px;color:#8861bd;flex:none}
#sy-ap .mr-color-handle>strong{font-size:14px;flex:1}
#sy-ap .mr-color-handle>button{display:grid;place-items:center;width:26px;height:26px;padding:4px;border:0;border-radius:5px;background:#ffffff9c;color:#405775;cursor:pointer}
#sy-ap .mr-color-handle>button svg{width:16px;height:16px}
#sy-ap .mr-color-floating form{padding:10px 12px 12px;position:relative;isolation:isolate}
#sy-ap .mr-color-fields{position:relative;z-index:1}
#sy-ap .mr-color-fields>label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;margin:0;border-bottom:1px solid #edf0f6;font-size:12px}
#sy-ap .mr-color-fields input[type=color]{appearance:none;-webkit-appearance:none;display:block;flex:none;width:28px;height:28px;min-width:28px;padding:2px;margin:0;border:1px solid #d4deeb;border-radius:5px;background:var(--theme-panel,white);cursor:pointer;box-shadow:none}
#sy-ap .mr-color-fields input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#sy-ap .mr-color-fields input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}
#sy-ap .mr-color-fields input[type=color]::-moz-color-swatch{border:0;border-radius:3px}
#sy-ap .mr-color-fields input:focus-visible{outline:2px solid #8272d6;outline-offset:2px}
#sy-ap .mr-color-handle>button:focus-visible{outline:2px solid #8272d6;outline-offset:2px}
#sy-ap .mr-color-watermark{position:absolute;right:15px;bottom:48px;width:84px;height:84px;color:#8565bd;opacity:.055;z-index:-1;pointer-events:none}
#sy-ap .mr-color-watermark svg{width:100%;height:100%}
#sy-ap .mr-color-floating .mr-color-save{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:36px;margin-top:12px;padding:8px 12px;border:0;border-radius:6px;background:#448563;color:white;font-size:12px;font-weight:600;cursor:pointer}
#sy-ap .mr-color-save svg{width:16px;height:16px}
#sy-ap .mr-color-save:disabled{opacity:.6;cursor:wait}
#sy-ap .mr-color-status{font-size:11px;line-height:1.4;margin:8px 0 0;overflow-wrap:anywhere}
#sy-ap .mr-color-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
#sy-ap .mr-color-actions .mr-color-save{margin-top:0;padding:8px 6px}
#sy-ap .mr-color-default{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;margin:0;padding:8px 6px;border:0;border-radius:6px;background:#a5772f;color:white;font-size:12px;font-weight:600;cursor:pointer}
#sy-ap .mr-color-default svg{width:15px;height:15px}
#sy-ap .mr-color-default:disabled{opacity:.6;cursor:wait}
#sy-ap .mr-all-widget[data-widget="all_map"]>header{background:linear-gradient(110deg,#d5f0fb,#e7f4fd)}
#sy-ap .mr-all-widget[data-widget="all_download"]>header{background:linear-gradient(110deg,#d5eaff,#eef6ff)}
#sy-ap .mr-all-widget[data-widget="all_upload"]>header{background:linear-gradient(110deg,#ffe4d5,#fff2e9)}
#sy-ap .mr-all-widget[data-widget="all_utilization"]>header{background:linear-gradient(110deg,#e8dcfb,#f3eefe)}
#sy-ap .mr-all-widget[data-widget="all_icmp"]>header{background:linear-gradient(110deg,#ffecd1,#fff6e8)}
#sy-ap .mr-all-widget .mr-rank-list{margin:0;padding-left:22px}
#sy-ap [data-local-form="configure"] .sy-config-interface{grid-column:1/-1}
#sy-ap .sy-capacity-title{display:flex;align-items:center;gap:6px}
#sy-ap .sy-capacity-title svg{width:18px;height:18px}
#sy-ap .sy-capacity-rx .sy-capacity-title svg{color:var(--theme-blue,#398cdb)}
#sy-ap .sy-capacity-tx .sy-capacity-title svg{color:var(--theme-amber,#e89533)}
#sy-ap .sy-capacity-title b{color:var(--theme-red,#be404d);font-weight:500}
#sy-ap .sy-capacity-input{display:flex;align-items:stretch;min-width:0;margin-top:6px;border:1px solid var(--theme-line,#dce5f1);border-radius:8px;overflow:hidden;background:var(--theme-tint-blue,#f7f9fc)}
#sy-ap .sy-popup .sy-capacity-input input{width:100%;min-width:0;flex:1;margin:0;border:0;border-radius:0;background:transparent}
#sy-ap .sy-capacity-input>span{display:flex;align-items:center;padding:0 10px;border-left:1px solid var(--theme-line,#dce5f1);color:var(--theme-muted,#6b7c92);font-size:12px}
#sy-ap [data-local-form="configure"] .sy-capacity-field:has(input:hover)>.sy-field-help{display:block}
#sy-ap .mr-util-segments{display:flex;flex:1;min-width:0;gap:2px;height:19px;padding:2px;border:1px solid #cdd8d4;border-radius:5px;background:#f7faf9}
#sy-ap .mr-util-segments i{flex:1;min-width:0;border-radius:2px;background:#e7eceb;position:relative;overflow:hidden}
#sy-ap .mr-util-segments i.green{background:#dcefd7;--segment-ink:linear-gradient(#a5d387,#62aa51)}
#sy-ap .mr-util-segments i.yellow{background:#fff0bd;--segment-ink:linear-gradient(#f9dd82,#e6b934)}
#sy-ap .mr-util-segments i.red{background:#f8d9de;--segment-ink:linear-gradient(#eea0a5,#d96470)}
#sy-ap .mr-util-segments i.active::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--segment-fill,100%);background:var(--segment-ink);border-radius:inherit}
#sy-ap .mr-util-pending{margin-top:12px;padding-top:10px;border-top:1px solid #edf0f5;color:#728096}
#sy-ap .mr-util-pending>div{display:grid;gap:5px;margin-top:9px}
#sy-ap .mr-util-pending .ap-link{text-align:left}
#sy-ap .mr-util-neutral{flex:none;height:16px;width:100%;background:#f2f4f6;border-color:#e1e5e9}
#sy-ap .mr-util-neutral i{background:#dce2e6}
#sy-ap .mr-util-list li{margin-bottom:12px;padding-left:2px}
#sy-ap .mr-util-list .mr-util-row{display:grid;grid-template-columns:minmax(80px,1fr) minmax(90px,1.15fr);align-items:center;gap:8px;min-height:28px;font-size:11px}
#sy-ap .mr-util-row>.ap-link{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font:inherit}
#sy-ap .mr-util-row>.mr-util-segments{width:100%;gap:1px;height:18px}
#sy-ap .mr-util-list .mr-util-row.mr-rank-direction{grid-template-columns:minmax(80px,1fr) minmax(60px,1fr) auto}
#sy-ap .mr-rank-mbps{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#294b6d}
#sy-ap .mr-traffic-ranking{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:min-content}
#sy-ap .mr-traffic-ranking li{margin:0;padding-left:4px;font-size:13px}
#sy-ap .mr-traffic-ranking .mr-util-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;min-height:48px;font-size:13px}
#sy-ap .mr-traffic-ranking .mr-util-row.mr-rank-direction{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;min-height:48px;font-size:13px}
#sy-ap .mr-traffic-ranking .mr-util-row>.ap-link{grid-column:1/-1;font-size:13px;line-height:1.4}
#sy-ap .mr-traffic-ranking .mr-util-row>.mr-util-segments{grid-column:1/-1;height:22px;gap:2px}
#sy-ap .mr-traffic-ranking .mr-rank-direction>.mr-util-segments{grid-column:1}
#sy-ap .mr-traffic-ranking .mr-rank-mbps{grid-column:2;font-size:12px}
#sy-ap .mr-traffic-caption{flex:none;margin:4px 0 0;padding-top:12px;border-top:1px solid #e8edf4;font-size:11px;line-height:1.6}
#sy-ap .sr-layout{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);gap:18px;margin:18px 0}
#sy-ap .sr-main{display:flex;flex-direction:column;gap:16px;min-width:0}
#sy-ap .sr-side{display:flex;flex-direction:column;gap:16px;min-width:0}
#sy-ap .sr-card{--sr-ink:#4a80c4;--sr-tint:#e8f3ff;--sr-end:#e8e0ff;position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--sr-ink) 18%,white);border-radius:12px;padding:10px;background:linear-gradient(145deg,#fff 45%,var(--sr-tint));box-shadow:0 3px 12px #172e4d08}
#sy-ap .sr-card[data-tone="teal"]{--sr-ink:#179c9b;--sr-tint:#e3faf5;--sr-end:#ccf7f2}
#sy-ap .sr-card[data-tone="amber"]{--sr-ink:#df982c;--sr-tint:#fff7e9;--sr-end:#fff0d6}
#sy-ap .sr-card[data-tone="purple"]{--sr-ink:#9767da;--sr-tint:#f4eefe;--sr-end:#e8dcfc}
#sy-ap .sr-card[data-tone="pink"]{--sr-ink:#c965ba;--sr-tint:#fcf0fc;--sr-end:#f2dffd}
#sy-ap .sr-card>h3{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;background:linear-gradient(110deg,var(--sr-tint),var(--sr-end));border-radius:7px;font-size:15px;font-weight:600;color:var(--theme-blue,#172e4d)}
#sy-ap .sr-card>h3 svg{color:var(--sr-ink);width:21px;height:21px}
#sy-ap .sr-card-body{position:relative;z-index:1;padding:14px 10px 8px;font-size:13px}
#sy-ap .sr-watermark{position:absolute;z-index:0;right:28px;bottom:28px;color:var(--sr-ink);opacity:.09;pointer-events:none}
#sy-ap .sr-watermark svg{width:122px;height:122px;stroke-width:1.5}
#sy-ap .sr-card:has(.sr-segments) .sr-watermark{bottom:10px;right:24px}
#sy-ap .sr-card:has(.sr-segments) .sr-watermark svg{width:75px;height:75px}
#sy-ap .sr-segments{display:flex;gap:8px}
#sy-ap .sr-segments button{min-height:40px;padding:9px 26px;border:1px solid var(--theme-line,#dce5ef);border-radius:8px;background:var(--theme-tint-blue,#f5f7fb);color:var(--theme-ink,#22344e);font-size:13px}
#sy-ap .sr-segments button[aria-pressed="true"]{background:var(--ws-accent,#3159ce);color:var(--ws-action-ink,#fff);border-color:transparent;box-shadow:0 3px 8px #6956c725}
#sy-ap .sr-generate{background:var(--ws-accent,#3159ce);color:var(--ws-action-ink,#fff);border-color:transparent;box-shadow:0 3px 8px #6956c725}
#sy-ap .sr-router-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#sy-ap .sr-router-tools input{flex:1;min-width:160px}
#sy-ap .sr-layout .sy-button{font-size:12px;min-height:35px}
#sy-ap .sr-count{padding:7px 11px;border-radius:20px;background:var(--theme-tint-blue,#eaf3ff);color:var(--theme-blue,#376ba4);white-space:nowrap;font-size:12px}
#sy-ap .sr-router-list{display:grid;gap:10px;max-height:290px;overflow:auto;border-left:2px solid var(--theme-line,#e0e7ee);padding:10px 12px;margin-top:12px}
#sy-ap .sr-router-list label{display:inline-flex;align-items:center;gap:8px;line-height:1.5}
#sy-ap .sr-layout fieldset label{display:inline-flex;align-items:center;gap:8px;line-height:1.5}
#sy-ap .sr-detail{display:inline-flex;align-items:center;gap:8px;line-height:1.5}
#sy-ap .sr-layout input[type="checkbox"]{width:16px;height:16px;min-height:0;margin:0;accent-color:#3d7cdb;flex:none}
#sy-ap .sr-layout input[type="radio"]{width:16px;height:16px;min-height:0;margin:0;accent-color:#3d7cdb;flex:none}
#sy-ap .sr-ranges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#sy-ap .sr-ranges .sr-count{margin-left:auto}
#sy-ap .sr-ranges button[aria-pressed="true"]{background:linear-gradient(110deg,#f0b64a,#e99a23);color:#fff;border-color:transparent}
#sy-ap .sr-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
#sy-ap .sr-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-weight:600}
#sy-ap .sr-layout input[type="search"]{min-height:38px;width:100%;padding:8px 11px;border:1px solid var(--theme-line,#d6dfea);border-radius:7px;background:var(--theme-panel,#fff);color:var(--theme-ink,#23344c);font-size:13px;box-sizing:border-box}
#sy-ap .sr-layout input[type="datetime-local"]{min-height:38px;width:100%;padding:8px 11px;border:1px solid var(--theme-line,#d6dfea);border-radius:7px;background:var(--theme-panel,#fff);color:var(--theme-ink,#23344c);font-size:13px;box-sizing:border-box}
#sy-ap .sr-layout select{min-height:38px;width:100%;padding:8px 11px;border:1px solid var(--theme-line,#d6dfea);border-radius:7px;background:var(--theme-panel,#fff);color:var(--theme-ink,#23344c);font-size:13px;box-sizing:border-box}
#sy-ap .sr-field small{font-size:11px;color:var(--theme-muted,#6a7c91);font-weight:400}
#sy-ap .sr-layout fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;align-content:start;flex-wrap:wrap;gap:10px 18px}
#sy-ap .sr-layout legend{font-weight:600;margin-bottom:10px;font-size:12px}
#sy-ap .sr-channels{border-top:1px solid var(--theme-line,#e2e6ef)!important;margin-top:18px!important;padding-top:10px!important}
#sy-ap .sr-detail{margin-top:12px}
#sy-ap .sr-side dl{margin:0 0 16px;display:grid;gap:10px}
#sy-ap .sr-side dl>div{display:grid;grid-template-columns:100px 1fr;gap:10px}
#sy-ap .sr-side dt{color:var(--theme-muted,#66768c)}
#sy-ap .sr-side dd{margin:0;color:var(--theme-ink,#23344c)}
#sy-ap .sr-side p{font-size:12px;color:var(--theme-muted,#66768c);line-height:1.6}
#sy-ap .sr-side [data-sr-summary]>p{padding-top:15px;border-top:1px solid var(--theme-line,#e3dfeb)}
#sy-ap .sr-generate{width:100%;justify-content:center;margin:6px 0 12px;min-height:var(--ui-control,34px);font-size:12px;font-weight:600}
#sy-ap .sr-generate:disabled{opacity:.55;cursor:not-allowed}
#sy-ap .sr-side small{display:block;text-align:center;line-height:1.6;color:var(--theme-muted,#6a7c91)}
#sy-ap [data-sr-jobs]{overflow:auto}

@media(max-width:1050px){#sy-ap .sr-layout{grid-template-columns:minmax(0,1fr)}
#sy-ap .sr-side{display:grid;grid-template-columns:1fr 1fr}}

@media(max-width:640px){#sy-ap .sr-two{display:grid;grid-template-columns:1fr}
#sy-ap .sr-side{display:grid;grid-template-columns:1fr}
#sy-ap .sr-segments button{padding:9px 14px}
#sy-ap .sr-card-body{padding:12px 4px}
#sy-ap .sr-ranges .sr-count{margin-left:0}}
#sy-ap .mr-widget[data-widget="memory"]{--mr-title-fill:#ece2fa;--mr-title-border:#d3bfea}
#sy-ap .mr-widget[data-widget="uptime"]{--mr-title-fill:#ece2fa;--mr-title-border:#d3bfea}
#sy-ap .mr-widget[data-widget="router_summary"]{--mr-title-fill:#ece2fa;--mr-title-border:#d3bfea}
#sy-ap .mr-widget[data-widget="all_utilization"]{--mr-title-fill:#ece2fa;--mr-title-border:#d3bfea}
#sy-ap .mr-widget[data-widget="sensors"]{--mr-title-fill:#fff0d8;--mr-title-border:#edcf9f}
#sy-ap .mr-widget[data-widget="all_upload"]{--mr-title-fill:#fff0d8;--mr-title-border:#edcf9f}
#sy-ap .mr-widget[data-widget="all_icmp"]{--mr-title-fill:#fff0d8;--mr-title-border:#edcf9f}
#sy-ap .mr-widget[data-widget="storage"]{--mr-title-fill:#def2ec;--mr-title-border:#b4dbd0}
#sy-ap .mr-widget[data-widget="icmp"]{--mr-title-fill:#def2ec;--mr-title-border:#b4dbd0}
#sy-ap .mr-context-watermarks>label{position:relative;isolation:isolate;background:linear-gradient(110deg,#edf5ffb3,#f4efff88);border:1px solid #e0e8f4;border-radius:10px;padding:7px 10px;overflow:hidden}
#sy-ap .mr-context-watermarks>label:after{content:'▤';position:absolute;right:18px;top:0;font-size:64px;line-height:1;color:#4781cc;opacity:.09;pointer-events:none;z-index:-1}
#sy-ap .mr-context-watermarks>label:has([data-context="service"]){background:linear-gradient(110deg,#eaf7f1b3,#edf6ff88)}
#sy-ap .mr-context-watermarks>label:has([data-context="service"]):after{content:'◉';color:#499b8b}
#sy-ap .mr-context-watermarks select{position:relative;background:#ffffffd9}
#sy-ap [data-widget="alarms"]>header{background:linear-gradient(110deg,#fff1d9,#f2eafa)}
#sy-ap [data-widget="alarms"] .v01-widget-body{position:relative;z-index:1}
#sy-ap .mr-alarm-tabs{display:flex;gap:8px;margin-bottom:12px}
#sy-ap .mr-alarm-tabs [aria-pressed="true"]{background:#3c6ca7;color:white}
#sy-ap .mr-alarm-state{display:inline-block;padding:4px 8px;border-radius:7px;font-size:12px;font-weight:700}
#sy-ap .mr-alarm-state.warning{background:#fff0bf;color:#8b620d}
#sy-ap .mr-alarm-state.critical{background:#ffe2e7;color:#ae3452}
#sy-ap .mr-alarm-state.recovered{background:#e3f3eb;color:#347958}
#sy-ap .mr-alarm-state.unknown{background:#eef0f5;color:#657184}
#sy-ap .mr-alarm-stale{background:#fff2d8;padding:9px;border-radius:8px}
#sy-ap [data-widget="alarms"] td small{display:block;color:#73839b;font-size:11px;margin-top:4px}
#sy-ap [data-widget="uptime"] .mr-reading{min-height:100px;justify-content:center}
#sy-ap [data-widget="uptime"] .mr-reading>strong{font-size:32px}
#sy-ap [data-widget="memory"] .mr-plot-canvas{max-height:155px}
#sy-ap [data-widget="cpu"] .mr-plot-canvas{max-height:200px}
#sy-ap .mr-widget[data-widget="latency"]{--mr-title-fill:#def2ec;--mr-title-border:#b4dbd0}
#sy-ap .mr-widget[data-widget="packet_loss"]{--mr-title-fill:#fbe1e6;--mr-title-border:#ecc3cc}
#sy-ap .mr-widget[data-widget="uptime"] .mr-reading>strong{font-size:clamp(20px,1.8vw,32px);white-space:normal}
#sy-ap .mr-template-board .mr-reading{gap:6px;margin:0 0 8px}
#sy-ap .mr-template-board .mr-reading small:empty{display:none}
#sy-ap .mr-template-board .mr-traffic-directions button{font-size:13px;min-height:30px;padding:5px 10px}
#sy-ap .mr-template-board [data-widget="uptime"] .mr-reading{min-height:130px;justify-content:center}
#sy-ap .mr-template-board [data-widget="uptime"] .mr-reading>strong{font-size:26px;white-space:normal}
#sy-ap .mr-template-board .mr-alarm-tabs .sy-button{font-size:12px;min-height:28px;padding:4px 8px;line-height:1.4}
#sy-ap .mr-template-board [data-widget="alarms"] table{font-size:13px;line-height:1.4}
#sy-ap .mr-template-board [data-widget="alarms"] th{font-size:12px;color:#52667f;padding:6px 8px;line-height:1.4}
#sy-ap .mr-template-board [data-widget="alarms"] td small{font-size:12px;line-height:1.4;margin-top:2px}
#sy-ap .mr-template-board .ap-caption{font-size:13px;line-height:1.5}
#sy-ap .mr-template-board .mr-alarm-state{font-size:12px;padding:3px 7px;line-height:1.4}
#sy-ap .mr-layout-tools .sy-button{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;font-size:14px;min-height:38px}
#sy-ap .mr-layout-tools>small{display:flex;align-items:center;gap:5px;font-size:13px;color:#52667f}
#sy-ap .mr-template-board .v01-plot-controls .sy-button{font-size:13px;min-height:32px}
#sy-ap .mr-template-board .v01-plot-controls select{font-size:13px;min-height:32px}
#sy-ap .mr-resize-width{right:0;top:50%;bottom:auto;left:auto;transform:translateY(-50%);width:26px;height:46px;cursor:ew-resize;border-radius:7px 0 0 7px;z-index:5;opacity:.8}
#sy-ap .mr-resize-handle[hidden]{display:none}
#sy-ap [data-widget="alarms"] .mr-alarm-tabs{flex:none}
#sy-ap [data-widget="alarms"] .ap-caption{flex:none}
#sy-ap .mr-alarm-scroll{flex:1 1 0;min-height:0;overflow-y:scroll;overflow-x:auto;scrollbar-gutter:stable;overscroll-behavior:auto;padding-right:5px;scrollbar-width:auto;scrollbar-color:#91a5c0 #edf2f8}
#sy-ap .mr-alarm-scroll::-webkit-scrollbar{width:11px;height:11px}
#sy-ap .mr-alarm-scroll::-webkit-scrollbar-thumb{background:#91a5c0;border:2px solid #edf2f8;border-radius:8px}
#sy-ap .mr-alarm-scroll::-webkit-scrollbar-track{background:#edf2f8}
#sy-ap .mr-alarm-scroll>.sy-table-wrap{max-height:none;overflow:visible}
#sy-ap .mr-alarm-scroll thead th{position:sticky;top:0;background:#f3f6fb;z-index:1}

@media(max-width:700px){
#sy-ap [data-widget="router_summary"] .mr-router-picture{flex-basis:100px;width:100px}
#sy-ap [data-widget="router_summary"] .mr-router-picture img{width:100px}}
#sy-ap [data-widget="router_summary"] .mr-router-picture{display:flex;align-items:center;justify-content:center;flex:0 0 145px;width:100%;height:145px;max-width:280px}
#sy-ap [data-widget="router_summary"] .mr-router-picture img{width:100%;height:145px;max-width:280px;object-fit:contain}
#sy-ap .mr-template-board [data-widget="cpu"] [data-plot]{align-items:stretch;justify-content:flex-start}
#sy-ap .mr-template-board [data-widget="memory"] [data-plot]{align-items:stretch;justify-content:flex-start}
#sy-ap .mr-template-board [data-widget="cpu"] .mr-reading>strong{font-size:28px}
#sy-ap .mr-template-board [data-widget="memory"] .mr-reading>strong{font-size:28px}
#sy-ap .mr-template-board [data-widget="traffic"] .mr-reading{height:104px;min-height:104px;box-sizing:border-box;justify-content:center;margin:0;flex:none}
#sy-ap .mr-template-board [data-widget="cpu"] .mr-reading{height:104px;min-height:104px;box-sizing:border-box;justify-content:center;margin:0;flex:none}
#sy-ap .mr-template-board [data-widget="memory"] .mr-reading{height:104px;min-height:104px;box-sizing:border-box;justify-content:center;margin:0;flex:none}
#sy-ap .mr-template-board [data-widget="latency"] .mr-reading{height:104px;min-height:104px;box-sizing:border-box;justify-content:center;margin:0;flex:none}
#sy-ap .mr-template-board [data-widget="packet_loss"] .mr-reading{height:104px;min-height:104px;box-sizing:border-box;justify-content:center;margin:0;flex:none}
#sy-ap .mr-template-board .mr-traffic-directions{margin:0 0 5px}
#sy-ap .mr-template-board .mr-traffic-current{gap:12px 20px}
#sy-ap .mr-template-board .mr-chart-legend{font-size:13px;padding-top:5px;color:#4d6078;min-height:24px;box-sizing:border-box;align-items:center;padding:4px 0 0;margin:0}
#sy-ap .mr-template-board [data-widget="alarms"] td{vertical-align:top;padding:8px}
#sy-ap .mr-template-board [data-widget="alarms"] td strong{font-weight:600;line-height:1.5}
#sy-ap .mr-template-board [data-widget="alarms"] .mr-alarm-tabs{margin-bottom:4px;align-items:center;gap:6px}
#sy-ap .mr-noc-surface{--noc-bg:#eef1f5;--noc-card:#fff;--noc-head:#f7f9fc;--noc-line:#dce3ec;--noc-ink:#1b2d44;--noc-muted:#54677e;background:var(--noc-bg);color:var(--noc-ink);padding:16px;border:1px solid var(--noc-line);border-radius:12px;box-sizing:border-box}
#sy-ap .mr-noc-surface[data-monitor-theme="dark"]{--noc-bg:#141d2a;--noc-card:#202c3c;--noc-head:#263346;--noc-line:#39495e;--noc-ink:#edf3fb;--noc-muted:#c2cede}
#sy-ap .mr-noc-surface .sy-button{background:var(--noc-card);color:var(--noc-ink);border-color:var(--noc-line);font-size:13px}
#sy-ap .mr-noc-surface select{background:var(--noc-card);color:var(--noc-ink);border-color:var(--noc-line)}
#sy-ap .mr-noc-surface .mr-widget>header>strong svg{width:18px}
#sy-ap .mr-noc-surface .mr-template-board .mr-reading{height:68px;min-height:68px;justify-content:center;margin:0}
#sy-ap .mr-noc-surface .sy-muted{color:var(--noc-muted);font-size:13px}
#sy-ap .mr-noc-surface .ap-caption{color:var(--noc-muted);font-size:13px}
#sy-ap .mr-noc-surface .mr-plot-canvas svg>line{stroke:var(--noc-line)}
#sy-ap .mr-noc-surface table{color:var(--noc-ink);font-size:14px}
#sy-ap .mr-noc-surface table th{background:var(--noc-head);color:var(--noc-muted);border-color:var(--noc-line);font-size:13px}
#sy-ap .mr-noc-surface table td{border-color:var(--noc-line)}
#sy-ap .mr-noc-surface table tr{background:transparent}
#sy-ap .mr-noc-surface table tr:nth-child(even){background:transparent}
#sy-ap .mr-noc-surface .mr-alarm-scroll{scrollbar-color:#7e93ac var(--noc-bg)}
#sy-ap .mr-noc-surface .mr-alarm-tabs [aria-pressed="true"]{background:#386997;color:#fff}
#sy-ap .mr-noc-surface[data-monitor-theme="dark"] .sy-chart-tooltip{background:#152031;color:#f1f5fb;border-color:#4e657f;box-shadow:0 4px 20px #0005}
#sy-ap .mr-noc-surface .sy-chart-tooltip{font-size:14px;line-height:1.6}
#sy-ap .mr-noc-surface [data-widget="interface_table"] .sy-table-wrap{overflow-x:auto}
#sy-ap .sy-content:has(.mr-noc-surface[data-monitor-theme="dark"]){background:#141d2a;color:#edf3fb}
#sy-ap .sy-content:has(.mr-noc-surface[data-monitor-theme="dark"]) .sy-heading .sy-muted{color:#b5c4d7}
#sy-ap .sy-content:has(.mr-noc-surface[data-monitor-theme="dark"]) .sy-page-time{color:#b5c4d7}
#sy-ap .sy-content:has(.mr-noc-surface[data-monitor-theme="dark"]) .sy-footer{color:#b5c4d7}
#sy-ap .sy-content:has(.mr-noc-surface[data-monitor-theme="dark"]) details.sy-panel{background:#202c3c;color:#edf3fb;border-color:#39495e}

@media(max-width:600px){#sy-ap .mr-noc-surface{padding:10px}}
#sy-ap .mr-template-board [data-widget="cpu"] .mr-plot-canvas{width:100%;max-height:none}
#sy-ap .mr-template-board [data-widget="memory"] .mr-plot-canvas{width:100%;max-height:none}
#sy-ap .mr-noc-surface [data-widget="router_summary"] .mr-router-picture{align-self:center;max-width:100%}
#sy-ap .mr-template-board .mr-plot-canvas{min-height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-height:none}
#sy-ap .mr-template-board .mr-plot-canvas svg[data-plot-ratio]{display:block;flex:none;max-width:100%;max-height:100%;min-height:0}
#sy-ap .mr-plot-size-note{font-size:13px;line-height:1.5;margin:auto 0;color:#61738d}
/* Global theme contract. Components consume shared palette variables. */
html[data-sinyara-mode="light"]{color-scheme:light;background:var(--theme-tint-blue,#f3f5f9)}
html[data-sinyara-mode="dark"]{color-scheme:dark;background:#111b29;color:#e7eef8}
html[data-sinyara-mode="dark"] body{background:#111b29;color:#e7eef8}
#sy-ap[data-display-mode="light"]{color-scheme:light}
#sy-ap[data-display-mode="dark"]{color-scheme:dark;--sy-bg:#111b29;--sy-panel:#1c293b;--sy-ink:#e7eef8;--sy-muted:#b8c7d9;--sy-soft:#24364d;--sy-line:#3b4c63;--sy-green:#326c60;--sy-red:#ed8d99;--sy-amber:#e3bd72;--sy-nav-bg:#102b26;--sy-nav-active:#245547;--sy-nav-hover:#1a4136;--sy-nav-ink:#d8eee6;--sy-title-blue:#283345;--sy-title-purple:#283345;--sy-title-jade:#283345;--sy-title-rose:#283345;--sy-title-amber:#283345;--theme-panel:#1c293b;--theme-soft:#24364d;--theme-header:#172437;--theme-input:#142133;--theme-line:#3b4c63;--theme-ink:#e7eef8;--theme-muted:#b8c7d9;--theme-blue:#8ec4f1;--theme-green:#89c9aa;--theme-amber:#e3bd72;--theme-red:#ed8d99;--theme-purple:#c4afe8;--theme-tint-blue:#24364d;--theme-tint-green:#223d37;--theme-tint-amber:#3c3529;--theme-tint-red:#422e3b;--theme-tint-purple:#332f46;background:var(--sy-bg);color:var(--sy-ink)}
#sy-ap .sy-display-mode{display:inline-flex;align-items:center;gap:8px;min-height:38px;font-size:14px}
#sy-ap .sy-display-mode svg{width:18px;height:18px}
#sy-ap[data-display-mode="dark"] .sy-brand img{filter:brightness(0) invert(1)}
#sy-ap[data-display-mode="dark"] svg text{fill:var(--theme-muted)}
#sy-ap[data-display-mode="dark"] :is(input,select,textarea){background:var(--theme-input);color:var(--theme-ink);border-color:var(--theme-line)}
#sy-ap[data-display-mode="dark"] :is(input,textarea)::placeholder{color:#98abc3}
#sy-ap[data-display-mode="dark"] option{background:var(--theme-input);color:var(--theme-ink)}
#sy-ap[data-display-mode="dark"] :is(.sy-dialog,dialog,.ap-dialog){background:var(--theme-panel);color:var(--theme-ink);border-color:var(--theme-line)}
#sy-ap[data-display-mode="dark"] [class*="watermark"]{opacity:.14;pointer-events:none}
#sy-ap .sy-guest-display-mode{position:fixed;right:24px;top:20px;z-index:100;font-size:14px;min-height:38px}
#sy-ap [data-widget="cpu"]{--glow-color:#62bfee}
#sy-ap [data-widget="traffic"]{--glow-color:#62bfee}
#sy-ap [data-widget="memory"]{--glow-color:#bc9af5}
#sy-ap [data-widget="uptime"]{--glow-color:#bc9af5}
#sy-ap [data-widget="packet_loss"]{--glow-color:#f098b7}
#sy-ap [data-widget="latency"]{--glow-color:#6ed8bc}
#sy-ap [data-widget="storage"]{--glow-color:#6ed8bc}
#sy-ap [data-widget="sensors"]{--glow-color:#f4bd72}
#sy-ap [data-widget="all_download"]{--glow-color:#62bfee}
#sy-ap [data-widget="all_upload"]{--glow-color:#f4bd72}
#sy-ap [data-widget="all_utilization"]{--glow-color:#bc9af5}

@media(max-width:700px){.sy-header-actions{gap:6px;flex-wrap:wrap}}
#sy-ap .mr-noc-identity{display:grid;background:var(--noc-card);border:1px solid var(--noc-line);border-radius:9px;gap:0;grid-template-columns:1.6fr 1fr 1fr 1fr 1.5fr;padding:18px 0}
#sy-ap .mr-noc-identity>div{min-width:0;display:flex;flex-direction:column;gap:7px;position:relative;isolation:isolate;padding-right:35px;padding:4px 68px 4px 20px;min-height:65px;justify-content:center}
#sy-ap .mr-noc-identity>div+div{border-left:1px solid var(--noc-line)}
#sy-ap .mr-noc-identity>div:last-child{padding-right:16px}

@media(max-width:1000px){#sy-ap .mr-noc-identity{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
#sy-ap .mr-noc-identity>div:first-child{grid-column:1/-1}
#sy-ap .mr-noc-identity>div{border-left:0;border-bottom:1px solid var(--noc-line);padding-bottom:14px}}
#sy-ap .mr-resize-height{left:50%;bottom:0;right:auto;top:auto;transform:translateX(-50%);width:46px;height:26px;cursor:ns-resize;border-radius:7px 7px 0 0;z-index:5;opacity:.8;display:block}
#sy-ap .mr-resize-height[hidden]{display:none}
#sy-ap [data-widget="cpu"] [data-plot]{height:100%;min-height:0}
#sy-ap [data-widget="memory"] [data-plot]{height:100%;min-height:0}
#sy-ap [data-widget="storage"] [data-plot]{height:100%;min-height:0}
#sy-ap .mr-noc-surface .mr-widget>header{border-bottom:1px solid var(--noc-line);box-sizing:border-box}
#sy-ap .mr-widget>header>.sy-button{min-width:28px;box-sizing:border-box}
#sy-ap .mr-widget>header .v01-plot-controls .sy-button{min-width:28px;box-sizing:border-box}
#sy-ap .mr-sla-track{height:18px;border-radius:6px;background:var(--noc-line);position:relative}
#sy-ap .mr-sla-track i{display:block;height:100%;border-radius:6px}
#sy-ap .mr-sla-track b{position:absolute;width:3px;top:-3px;bottom:-3px;background:var(--noc-ink)}
#sy-ap .mr-sla-inline>.mr-sla-track{flex:1;min-width:60px;height:16px;background:color-mix(in srgb,var(--noc-muted) 16%,var(--noc-card))}
#sy-ap .mr-sla-inline .mr-sla-track i{background:color-mix(in srgb,var(--sla-indicator) 42%,var(--noc-card));border:1px solid color-mix(in srgb,var(--sla-indicator) 60%,transparent);box-sizing:border-box}
#sy-ap .mr-sla-config{margin-top:20px;padding:18px;border:1px solid var(--sy-border,#dfe5ed);border-radius:10px}
#sy-ap .mr-sla-config h4{display:flex;align-items:center;gap:8px;margin:0 0 14px}
#sy-ap .mr-sla-config h4 svg{width:20px;height:20px}
#sy-ap .mr-sla-config form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
#sy-ap .mr-sla-config label{display:flex;flex-direction:column;gap:6px;font-size:14px}
#sy-ap .mr-sla-config input{width:160px;padding:8px 12px;border:1px solid #b9c5d2;border-radius:7px}

@media(max-width:650px){#sy-ap .mr-sla-inline{gap:8px}
#sy-ap .mr-sla-inline>small{display:none}
#sy-ap .mr-sla-inline>strong{font-size:16px}}
#sy-ap .mr-sla-inline{display:flex;align-items:center;gap:16px;width:100%;min-width:0;padding:0}
#sy-ap [data-widget="sla"] .mr-sla-inline{gap:16px;min-height:25px;box-sizing:border-box}
#sy-ap .mr-noc-surface .mr-widget[data-widget="sla"]{min-block-size:0}
#sy-ap{--type-family:Arial,sans-serif;--type-caption:12px;--type-body:14px;--type-title:16px;--type-page:24px;--type-value:28px;font-family:var(--type-family);font-size:var(--type-body);line-height:1.5}
#sy-ap button{font-family:var(--type-family)}
#sy-ap input{font-family:var(--type-family)}
#sy-ap select{font-family:var(--type-family)}
#sy-ap textarea{font-family:var(--type-family)}
#sy-ap .sy-content label{font-size:var(--type-body)}
#sy-ap .sy-content input:not([type=checkbox]):not([type=radio]){font-size:var(--type-body)}
#sy-ap .sy-content select{font-size:var(--type-body)}
#sy-ap .sy-content textarea{font-size:var(--type-body)}
#sy-ap .sy-content table{font-size:var(--type-body)}
#sy-ap .sy-header-actions{font-size:var(--type-body)}
#sy-ap .sy-nav button{font-size:var(--type-body)}
#sy-ap .sy-content h2{font-size:var(--type-page);line-height:1.3;font-weight:700}
#sy-ap .sy-content h3{font-size:var(--type-title);line-height:1.35;font-weight:600}
#sy-ap .sy-content h4{font-size:var(--type-title);line-height:1.35;font-weight:600}
#sy-ap .sy-content .sy-button{font-size:var(--type-body)}
#sy-ap .sy-content small{font-size:var(--type-caption);line-height:1.5}
#sy-ap .sy-content .sy-muted{font-size:var(--type-caption);line-height:1.5}
#sy-ap .sy-content .ap-caption{font-size:var(--type-caption);line-height:1.5}
#sy-ap .sy-content .sy-page-time{font-size:var(--type-caption);line-height:1.5}
#sy-ap .sy-content .sy-footer{font-size:var(--type-caption);line-height:1.5}
#sy-ap .sr-field small{font-size:var(--type-caption);line-height:1.5}
#sy-ap .sy-field-help{font-size:var(--type-caption);line-height:1.5}
#sy-ap .mr-noc-identity small{color:var(--noc-muted);font-size:14px;font-weight:600}
#sy-ap .mr-sla-inline>span{white-space:nowrap;color:var(--noc-muted);font-size:var(--type-caption)}
#sy-ap .mr-sla-inline>small{white-space:nowrap;color:var(--noc-muted);font-size:var(--type-caption)}
#sy-ap .mr-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;flex:none;color:#465c78;padding:3px 0;font-size:var(--type-caption)}
#sy-ap .mr-noc-surface .mr-chart-legend{color:var(--noc-muted);min-height:24px;font-size:var(--type-caption)}
#sy-ap .mr-reading small{color:#5f7088;font-size:var(--type-caption);line-height:1.5}
#sy-ap .mr-noc-surface .mr-reading small{color:var(--noc-muted);font-size:var(--type-caption);line-height:1.5}
#sy-ap .mr-template-board .mr-reading small{color:#52667f;font-size:var(--type-caption);line-height:1.5}
#sy-ap .mr-template-board .mr-reading>small:last-child:not(:first-child){color:#52667f;font-size:var(--type-caption);line-height:1.5}
#sy-ap .mr-reading>strong{display:flex;align-items:center;gap:7px;overflow-wrap:anywhere;font-size:var(--type-value);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-traffic-current strong{display:inline-flex;align-items:center;gap:6px;font-size:var(--type-value);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-noc-surface .mr-reading strong{font-size:var(--type-value);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-noc-surface .mr-traffic-current strong{font-size:var(--type-value);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-template-board .mr-reading>strong{font-size:var(--type-value);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-template-board .mr-traffic-current strong{font-size:var(--type-value);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-noc-surface .mr-plot-canvas svg text{fill:var(--noc-muted);font-family:var(--type-family);font-size:var(--type-caption)}
#sy-ap .mr-template-board .mr-plot-canvas svg text{fill:#52667f;font-family:var(--type-family);font-size:var(--type-caption)}
#sy-ap .mr-plot-canvas svg text{fill:#61738d;font-family:var(--type-family);font-size:var(--type-caption)}
#sy-ap .mr-sla-inline>strong{white-space:nowrap;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-noc-identity strong{line-height:1.4;overflow-wrap:anywhere;font-size:14px;font-weight:600}
#sy-ap .mr-noc-identity>div:first-child strong{font-size:14px;font-weight:600}
#sy-ap .mr-template-board [data-widget-resize][hidden]{display:none}
#sy-ap .mr-template-board [data-widget-lock][disabled]{opacity:1;cursor:default}

/* Shared widget appearance. Saved layout owns position and dimensions; edit mode remains resizable. */
#sy-ap{--widget-radius:9px;--widget-pad-x:16px;--widget-pad-y:12px;--widget-gap:8px;--widget-header-height:44px;--widget-control-size:28px;--zone-idle-green:#edf4e9;--zone-idle-yellow:#faf4df;--zone-idle-red:#f6eaec}
#sy-ap .mr-widget>header{z-index:2;display:flex;flex:none;align-items:center;flex-wrap:nowrap;gap:var(--widget-gap);height:var(--widget-header-height);min-height:var(--widget-header-height);padding:6px 12px;border:0;border-bottom:1px solid var(--noc-line,var(--sy-line));background:linear-gradient(110deg,var(--widget-head-start,var(--noc-head,var(--sy-soft))),var(--widget-head-end,var(--noc-head,var(--sy-soft))));box-sizing:border-box;cursor:default}
#sy-ap .mr-widget>header>strong{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;margin-right:auto;padding:2px 7px;border:1px solid transparent;border-radius:3px;box-shadow:none;background:transparent;text-shadow:none;color:inherit;font-size:var(--type-title,16px);font-weight:600;line-height:1.35;letter-spacing:.2px;text-transform:uppercase}
#sy-ap .mr-widget>header>strong svg{width:18px;height:18px;flex:none;color:#479fbd}
#sy-ap .mr-widget>header .sy-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--widget-control-size);height:var(--widget-control-size);min-height:var(--widget-control-size);min-width:var(--widget-control-size);padding:5px;border:1px solid var(--noc-line,var(--sy-line));border-radius:7px;background:var(--noc-card,var(--sy-panel));color:inherit;line-height:1;box-sizing:border-box}
#sy-ap .mr-widget>header .sy-button svg{width:16px;height:16px}
#sy-ap .mr-widget>header .v01-plot-controls{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:nowrap}
#sy-ap .mr-widget>.v01-widget-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;gap:var(--widget-gap);padding:var(--widget-pad-y) var(--widget-pad-x);overflow:hidden;color:inherit;box-sizing:border-box}
#sy-ap .mr-widget[data-widget="sla"]>.v01-widget-body{padding:5px var(--widget-pad-x);justify-content:center}
#sy-ap .mr-widget[data-widget="alarms"] .mr-alarm-scroll{overflow-y:auto;overflow-x:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--noc-muted,var(--sy-muted)) var(--noc-card,var(--sy-panel))}
#sy-ap .mr-widget[data-widget="alarms"] .mr-alarm-scroll::-webkit-scrollbar{width:8px;height:8px}
#sy-ap .mr-widget[data-widget="alarms"] .mr-alarm-scroll::-webkit-scrollbar-thumb{background:var(--noc-muted,var(--sy-muted));border:2px solid var(--noc-card,var(--sy-panel));border-radius:6px}
#sy-ap .mr-widget[data-widget="alarms"] .mr-alarm-scroll::-webkit-scrollbar-track{background:var(--noc-card,var(--sy-panel))}
#sy-ap .mr-static-metric{padding-top:8px;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0;box-sizing:border-box}
#sy-ap .mr-static-metric>strong,#sy-ap .mr-temperature-dial>strong{font-size:var(--type-value,28px);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
#sy-ap .mr-static-metric>small,#sy-ap .mr-temperature-dial>small{margin-top:auto;font-size:var(--type-caption,12px);line-height:1.4;color:var(--noc-muted,var(--sy-muted));text-align:center}
#sy-ap .mr-memory-bar{align-items:stretch;justify-content:flex-start}
#sy-ap .mr-memory-visual{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1;min-height:0}
#sy-ap .mr-memory-visual>strong{text-align:center;font-size:var(--type-value,28px);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
#sy-ap .mr-memory-bar>small{margin-top:0;flex:none}
#sy-ap .mr-static-track{height:22px;flex:none;border:1px solid #b9c9be44;border-radius:6px;background:var(--noc-line,var(--sy-line));overflow:hidden;box-sizing:border-box}
#sy-ap .mr-static-track i{display:block;height:100%;border-radius:5px;opacity:1}
#sy-ap .mr-static-scale{display:flex;justify-content:space-between;font-size:var(--type-caption,12px);line-height:1.4;color:var(--noc-muted,var(--sy-muted))}
#sy-ap .mr-core-bars{display:flex;flex-direction:column;justify-content:center;gap:12px;height:100%;min-height:0;padding:0;box-sizing:border-box}
#sy-ap .mr-core-row{display:grid;grid-template-columns:44px minmax(24px,1fr) 40px;align-items:center;gap:8px;min-height:20px}
#sy-ap .mr-core-row>div:first-child{display:contents}
#sy-ap .mr-core-row>div:first-child>span{grid-column:1;grid-row:1;font-size:var(--type-body,14px)}
#sy-ap .mr-core-row>div:first-child>strong{grid-column:3;grid-row:1;font-size:var(--type-body,14px);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
#sy-ap .mr-core-row>.mr-static-track{grid-column:2;grid-row:1;height:14px}
#sy-ap .mr-sensor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:8px;flex:1;min-height:0}
#sy-ap .mr-sensor-grid>section{display:flex;min-width:0;min-height:0}
#sy-ap .mr-sensor-grid [data-sensor-plot]{display:flex;justify-content:center;min-height:0;padding:0}
#sy-ap .mr-temperature-dial{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;min-height:0;margin:0}
#sy-ap .mr-temperature-dial svg{width:100%;max-width:220px;height:98px;min-height:0;flex:0 1 98px;overflow:visible}
#sy-ap .mr-temperature-dial svg text{font-size:var(--type-caption,12px);fill:var(--noc-muted,var(--sy-muted))}
#sy-ap .mr-ring-visual{position:relative;flex:0 1 120px;width:120px;height:120px;min-height:0}
#sy-ap .mr-storage-ring svg{display:block;width:100%;height:100%;overflow:visible}
#sy-ap .mr-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
#sy-ap .mr-ring-center strong{font-size:20px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
#sy-ap .mr-ring-center small{font-size:var(--type-caption,12px);line-height:1.4;color:var(--noc-muted,var(--sy-muted))}
#sy-ap .mr-ring-fill{fill:none;stroke-width:12px;stroke-linecap:round;opacity:1}
#sy-ap[data-display-mode="dark"] .mr-ring-fill{filter:none}
#sy-ap .mr-all-widget[data-widget-locked="false"]>header{cursor:move}

#sy-ap[data-display-mode="dark"]{--zone-idle-green:#53675b;--zone-idle-yellow:#756a4e;--zone-idle-red:#755660}
#sy-ap .mr-template-board .mr-widget[data-widget-locked="false"]>header{cursor:move}

/* Widget header colors: Light semantic variants; Dark uses one neutral header. */
#sy-ap .mr-widget{isolation:isolate;position:absolute;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;border:1px solid var(--noc-line,var(--sy-line));border-radius:var(--widget-radius);background:var(--noc-card,var(--sy-panel));color:var(--noc-ink,var(--sy-ink));box-shadow:0 3px 8px #0a14200a;overflow:hidden;box-sizing:border-box;--widget-head-start:#e8f1fa;--widget-head-end:#eff4fa;margin:0}
#sy-ap .mr-widget[data-widget="router_summary"],#sy-ap .mr-widget[data-widget="memory"],#sy-ap .mr-widget[data-widget="sla"]{--widget-head-start:#eee8f8;--widget-head-end:#f4effb}
#sy-ap .mr-widget[data-widget="alarms"],#sy-ap .mr-widget[data-widget="sensors"]{--widget-head-start:#fbf0dc;--widget-head-end:#fcf6e9}
#sy-ap .mr-widget[data-widget="storage"],#sy-ap .mr-widget[data-widget="latency"]{--widget-head-start:#e2f2ed;--widget-head-end:#eff8f5}
#sy-ap .mr-widget[data-widget="packet_loss"]{--widget-head-start:#f8e7ed;--widget-head-end:#fbf0f3}
#sy-ap[data-display-mode="dark"] .mr-widget{--widget-head-start:#283345;--widget-head-end:#283345}

/* Router navigation shares the existing order/service context and theme. */
#sy-ap .mr-noc-identity>.mr-router-picker{padding-right:20px;gap:7px}
#sy-ap .mr-router-picker>label{font-size:14px;font-weight:600;color:var(--noc-muted);line-height:1.5}
#sy-ap .mr-noc-identity .mr-router-picker>select{display:block;width:100%;min-width:0;max-width:100%;height:28px;min-height:28px;padding:1px 26px 1px 0;border:0;border-bottom:1px solid var(--noc-line);border-radius:0;box-shadow:none;background-color:var(--noc-card);color:var(--noc-ink);font-family:var(--type-family,Arial,sans-serif);font-size:14px;font-weight:600;line-height:1.4;cursor:pointer;text-overflow:ellipsis}
#sy-ap .mr-router-picker>select:focus-visible{outline:2px solid #479fbd;outline-offset:3px}
#sy-ap .mr-router-picker option{background:var(--noc-card);color:var(--noc-ink);font-size:14px;font-weight:400}
/* Hardware panel: equipment identity, protocol state, local clock, reading footer. */
#sy-ap .mr-hw-overview{display:flex;flex-direction:column;gap:0;height:100%;min-width:0;container-type:inline-size}
#sy-ap .mr-hw-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start;flex:0 0 auto;min-height:0;padding:8px 0 16px}
#sy-ap .mr-hw-device-photo{min-width:0;display:flex;align-items:center;justify-content:center;padding-top:18px}
#sy-ap .mr-hw-facts{display:grid;gap:8px;margin:0;min-width:0;font-size:14px;line-height:1.35}
#sy-ap .mr-hw-facts>div{min-width:0}
#sy-ap .mr-hw-facts dt{font-size:12px;color:var(--noc-muted);margin-bottom:3px}
#sy-ap .mr-hw-facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
#sy-ap .mr-hw-facts .mr-hw-model{font-size:clamp(15px,3.8cqi,19px);line-height:1.25}
#sy-ap .mr-hw-facts dd>small{display:block;font-size:12px;font-weight:400;color:var(--noc-muted);margin-top:2px}
#sy-ap [data-widget="router_summary"] .mr-hw-device-photo .mr-router-picture{width:100%;height:100px;max-width:100%;flex:none;padding:6px;box-sizing:border-box;background:transparent;border:0;border-radius:0;overflow:hidden;position:relative;color:#7694ae}
#sy-ap [data-widget="router_summary"] .mr-hw-device-photo img{width:100%;height:100%;object-fit:contain}
#sy-ap [data-widget="router_summary"] .mr-router-landmark-art>svg{display:block;width:100%;height:auto;max-height:100%;filter:none}
#sy-ap [data-widget="router_summary"] .mr-router-landmark-art>svg:not(.mr-router-silhouette){width:64px;height:64px}
#sy-ap[data-display-mode="dark"] [data-widget="router_summary"] .mr-hw-device-photo .mr-router-landmark-art{color:#e4edf5}
#sy-ap .mr-hw-status-row{display:flex;align-items:center;gap:14px;min-height:44px;flex:none;border-top:1px solid var(--noc-line)}
#sy-ap .mr-hw-status{display:inline-flex;align-items:center;gap:8px;color:var(--noc-muted);font-size:14px;line-height:1.4;min-width:0}
#sy-ap .mr-hw-status>i{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
#sy-ap .mr-hw-status.online{color:#36805c}
#sy-ap .mr-hw-status.offline{color:#c64b62}
#sy-ap .mr-hw-status.pending{color:#ad831f}
#sy-ap[data-display-mode="dark"] .mr-hw-status.online{color:#82c5a0}
#sy-ap[data-display-mode="dark"] .mr-hw-status.offline{color:#ec889b}
#sy-ap[data-display-mode="dark"] .mr-hw-status.pending{color:#e0bd64}
#sy-ap .mr-hw-protocols{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-left:1px solid var(--noc-line);padding-left:14px;margin:0}
#sy-ap .mr-hw-protocols>.sy-device-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;line-height:1.4}
#sy-ap .mr-hw-detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-top:1px solid var(--noc-line);font-size:14px;flex:none}
#sy-ap .mr-hw-detail-row>span{display:flex;align-items:center;gap:8px;color:var(--noc-muted);min-width:0}
#sy-ap .mr-hw-detail-row>span>svg{width:18px;height:18px;flex:none}
#sy-ap .mr-hw-clock-value{display:flex;align-items:baseline;gap:8px;flex:none}
#sy-ap .mr-hw-clock-value>strong{font-size:clamp(18px,4.8cqi,24px);line-height:1.2;letter-spacing:.3px;font-variant-numeric:tabular-nums}
#sy-ap .mr-hw-clock-value>small{font-size:12px;color:var(--noc-muted)}
#sy-ap .mr-hw-interface{overflow-wrap:anywhere;text-align:right;font-size:14px}
#sy-ap .mr-hw-footer{flex:none;border-top:1px solid var(--noc-line);padding-top:10px;display:flex;flex-direction:column;gap:5px;min-width:0}
#sy-ap .mr-hw-footer>small{font-size:12px;line-height:1.4;color:var(--noc-muted)}
#sy-ap .mr-hw-footer dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;font-size:12px;line-height:1.4}
#sy-ap .mr-hw-footer dl>div{display:flex;align-items:baseline;justify-content:space-between;min-width:0;gap:8px;padding-right:12px}
#sy-ap .mr-hw-footer dt{color:var(--noc-muted)}
#sy-ap .mr-hw-footer dd{margin:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#sy-ap .mr-hw-footer .mr-hw-cache-note{border-top:1px solid var(--noc-line);padding-top:6px;margin-top:2px}
#sy-ap .mr-alarm-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;color:var(--noc-muted)}
#sy-ap .mr-alarm-empty>svg{width:34px;height:34px;flex:none}
#sy-ap .mr-alarm-empty>strong{font-size:16px;font-weight:700;color:var(--noc-ink)}
#sy-ap .mr-alarm-empty>span{font-size:14px}
#sy-ap .mr-alarm-clear>svg{color:#508c70}
#sy-ap[data-display-mode="dark"] .mr-alarm-clear>svg{color:#82c5a0}
/* Theme switches artwork immediately without changing the reserved picture size. */
#sy-ap .mr-router-theme-light{display:contents}
#sy-ap .mr-router-theme-dark{display:none}
#sy-ap[data-display-mode="dark"] .mr-router-theme-light{display:none}
#sy-ap[data-display-mode="dark"] .mr-router-theme-dark{display:contents}
#sy-ap [data-widget="router_summary"] .mr-hw-device-photo .mr-router-theme-light .mr-has-photo{background:#fff;border:1px solid var(--noc-line);border-radius:8px}
#sy-ap [data-widget="router_summary"] .mr-hw-device-photo .mr-front-photo img{position:absolute;width:100%;height:auto;max-width:none;left:0;top:50%;transform:translateY(-50%)}

/* Router configuration uses the existing permission-checked configuration dialog. */
#sy-ap .mr-hw-status-row .mr-hw-config{display:inline-flex;align-items:center;gap:5px;margin-left:auto;min-height:28px;padding:4px 8px;font-size:12px;line-height:1.4;white-space:nowrap;flex:none}
#sy-ap .mr-hw-status-row .mr-hw-config>svg{width:14px;height:14px;flex:none}
@container(max-width:340px){#sy-ap .mr-hw-status-row{gap:8px}#sy-ap .mr-hw-protocols{padding-left:8px}#sy-ap .mr-hw-status-row .mr-hw-config>span{display:none}}

#sy-ap .ap-device-status .ap-monitor-router{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
#sy-ap .ap-device-status .ap-monitor-router>svg{width:16px;height:16px;flex:none}

/* Chat owns one inbox and its message history; palette follows global themes. */
#sy-ap dialog.sy-chat-inbox{width:min(1120px,calc(100vw - 32px));max-width:none;height:min(780px,92dvh);max-height:92dvh;padding:0;overflow:hidden;background:var(--sy-panel);color:var(--sy-ink);border:1px solid var(--sy-line);border-radius:12px}
#sy-ap dialog.sy-chat-inbox[open]{display:flex;flex-direction:column}
#sy-ap .sy-chat-heading{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--sy-line);flex:none}
#sy-ap .sy-chat-heading>div{flex:1;min-width:0}
#sy-ap .sy-chat-heading h3{margin:0;font-size:18px;color:var(--sy-ink)}
#sy-ap .sy-chat-heading small{font-size:12px;color:var(--sy-muted)}
#sy-ap .sy-chat-progress{font-size:12px;line-height:1.4;padding:4px 8px;border-radius:6px;background:var(--theme-tint-amber,#fff2d6);color:var(--theme-amber,#895e16);white-space:nowrap}
#sy-ap .sy-chat-worker{margin:0;padding:7px 18px;font-size:12px;color:var(--sy-muted);background:var(--sy-soft);border-bottom:1px solid var(--sy-line);flex:none}
#sy-ap .sy-chat-layout{display:grid;grid-template-columns:280px minmax(0,1fr);flex:1;min-height:0}
#sy-ap .sy-chat-sidebar{padding:14px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--sy-line);min-height:0;background:var(--sy-panel)}
#sy-ap .sy-chat-sidebar>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sy-muted)}
#sy-ap .sy-chat-sidebar input,#sy-ap .sy-chat-sidebar select{width:100%;min-width:0;padding:8px;border:1px solid var(--sy-line);border-radius:6px;background:var(--theme-input,var(--sy-panel));color:var(--sy-ink);font:inherit}
#sy-ap .sy-chat-thread-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
#sy-ap .sy-chat-thread{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;padding:10px 30px 10px 10px;text-align:left;border:1px solid var(--sy-line);border-radius:8px;background:var(--sy-panel);color:var(--sy-ink)}
#sy-ap .sy-chat-thread[aria-pressed="true"]{background:var(--sy-soft);border-color:var(--sy-green)}
#sy-ap .sy-chat-thread>strong{font-size:14px;overflow-wrap:anywhere}
#sy-ap .sy-chat-thread>small,#sy-ap .sy-chat-thread>span{display:block;font-size:12px;color:var(--sy-muted);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#sy-ap .sy-chat-unread{position:absolute;right:8px;top:10px;background:var(--sy-green);color:white;border-radius:10px;min-width:18px;padding:1px 4px;text-align:center;font-size:11px}
#sy-ap .sy-chat-conversation{display:flex;flex-direction:column;min-width:0;min-height:0}
#sy-ap .sy-chat-conversation>.ap-chat-context{padding:12px 16px;margin:0;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--sy-line);background:var(--sy-panel);flex:none}
#sy-ap .sy-chat-conversation>.ap-chat-context>strong{font-size:16px;overflow-wrap:anywhere}
#sy-ap .sy-chat-conversation>.ap-chat-context>span{font-size:12px;color:var(--sy-muted);overflow-wrap:anywhere}
#sy-ap .sy-chat-conversation>.ap-chat-context>.sy-button{align-self:flex-start;min-height:28px;font-size:12px;padding:4px 8px}
#sy-ap .sy-chat-older{align-self:center;font-size:12px;margin:8px;padding:4px 8px}
#sy-ap .sy-chat-older[hidden]{display:none}
#sy-ap .sy-chat-conversation>.ap-chat-body{flex:1;min-height:80px;max-height:none;overflow:auto;padding:14px 16px;background:var(--sy-bg);margin:0;display:flex;flex-direction:column;gap:10px}
#sy-ap .sy-chat-inbox .ap-bubble{align-self:flex-start;max-width:88%;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--sy-line);border-radius:10px;background:var(--sy-panel);color:var(--sy-ink);margin:0;overflow-wrap:anywhere}
#sy-ap .sy-chat-inbox .ap-bubble.ap-outgoing{align-self:flex-end;background:var(--sy-soft);color:var(--sy-ink)}
#sy-ap .sy-chat-inbox .ap-bubble>small{font-size:11px;color:var(--sy-muted)}
#sy-ap .sy-chat-message-body{white-space:pre-wrap;font-size:14px}
#sy-ap .sy-chat-pending{border-style:dashed}
#sy-ap .sy-chat-snapshot{font-size:12px;border-top:1px solid var(--sy-line);padding-top:6px}
#sy-ap .sy-chat-snapshot summary{cursor:pointer;color:var(--sy-muted)}
#sy-ap .sy-chat-snapshot p{white-space:pre-wrap;font-size:12px;margin:8px 0 0;color:var(--sy-muted)}
#sy-ap .sy-chat-conversation>form{flex:none;padding:12px 16px;border-top:1px solid var(--sy-line);display:flex;flex-direction:column;gap:8px;background:var(--sy-panel);margin:0}
#sy-ap .sy-chat-conversation>form[hidden]{display:none}
#sy-ap .sy-chat-conversation>form>label:not(.sy-chat-attach){display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--sy-muted)}
#sy-ap .sy-chat-conversation textarea{width:100%;min-height:64px;max-height:140px;resize:vertical;padding:8px 10px;font:14px/1.4 Arial,sans-serif;color:var(--sy-ink);background:var(--theme-input,var(--sy-panel));border:1px solid var(--sy-line);border-radius:7px}
#sy-ap .sy-chat-attach{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sy-muted)}
#sy-ap .sy-chat-attach[hidden]{display:none}
#sy-ap .sy-chat-attach>input{width:auto;accent-color:var(--sy-green)}
#sy-ap .sy-chat-compose-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
#sy-ap .sy-chat-compose-actions>small{font-size:11px;color:var(--sy-muted)}
#sy-ap .sy-chat-feedback{flex:none;margin:0;padding:0 16px 10px;font-size:12px;color:var(--sy-muted);min-height:16px;background:var(--sy-panel)}
#sy-ap .sy-chat-feedback:empty{padding:0;min-height:0}
#sy-ap .mr-hw-status-row .mr-hw-chat{display:inline-flex;gap:5px;min-height:28px;padding:4px 8px;font-size:12px;white-space:nowrap}
#sy-ap .mr-hw-status-row .mr-hw-chat>svg{width:14px;height:14px}
@media(max-width:700px){#sy-ap dialog.sy-chat-inbox{width:calc(100vw - 12px);height:96dvh;max-height:96dvh}#sy-ap .sy-chat-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:150px minmax(0,1fr)}#sy-ap .sy-chat-sidebar{border-right:0;border-bottom:1px solid var(--sy-line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:8px}#sy-ap .sy-chat-thread-list{grid-column:1/-1;flex-direction:row;min-height:52px}#sy-ap .sy-chat-thread{min-width:190px;width:190px;flex:none}#sy-ap .sy-chat-heading{padding:10px}#sy-ap .sy-chat-heading small{display:none}#sy-ap .sy-chat-compose-actions>small{display:none}}
@container(max-width:420px){#sy-ap .mr-hw-status-row .mr-hw-chat>span{display:none}}

/* Monitor control interaction states share the card palette; geometry is unchanged. */
#sy-ap .mr-noc-surface .mr-widget>header .sy-button:enabled:hover{background:color-mix(in srgb,var(--noc-ink) 10%,var(--noc-card));border-color:var(--noc-muted)}
#sy-ap .mr-noc-surface .mr-widget>header .sy-button:enabled:active{background:color-mix(in srgb,var(--noc-ink) 16%,var(--noc-card))}
#sy-ap .mr-noc-surface button:focus-visible,#sy-ap .mr-noc-surface select:focus-visible{outline:2px solid var(--noc-muted);outline-offset:2px}

/* Compact Monitoring navigation: only controls, never board coordinates. */
#sy-ap .mr-monitor-controls{background:var(--sy-panel,var(--theme-panel,#fff));color:var(--sy-ink,var(--theme-ink,#20324a));border:1px solid var(--sy-line,var(--theme-line,#dce3ec));border-radius:10px;padding:12px 16px;margin-bottom:16px}
#sy-ap .mr-service-picker{display:flex;align-items:center;gap:8px;min-width:0;margin:0;font-size:13px}
#sy-ap .mr-service-picker select{width:auto;max-width:420px;min-width:180px;margin:0}
#sy-ap .mr-monitor-controls>.sy-time-caption{margin-top:8px;font-size:12px;color:var(--sy-muted,var(--theme-muted,#63758b))}
#sy-ap .mr-layout-compact>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#sy-ap .mr-layout-compact small{font-size:12px;color:var(--sy-muted,var(--theme-muted,#63758b))}
#sy-ap .mr-service-summary{margin-bottom:16px}
#sy-ap .mr-service-summary h3{margin:0 0 8px;font-size:16px}
#sy-ap .mr-monitor-controls summary:focus-visible{outline:2px solid var(--sy-ink,var(--theme-ink,#20324a));outline-offset:3px}
@media(max-width:760px){#sy-ap .mr-service-picker{width:100%}#sy-ap .mr-service-picker select{flex:1;max-width:100%;min-width:0}}

/* Identity-row variant: anchored controls, never fixed or draggable. */
#sy-ap .mr-identity-controls{position:relative;z-index:15;grid-template-columns:34px minmax(220px,1.8fr) minmax(120px,1fr) minmax(100px,1fr) minmax(100px,1fr) auto;align-items:center;gap:12px;padding:10px 12px;margin-bottom:16px}
#sy-ap .mr-identity-controls>div{padding:0 12px;min-height:52px;gap:4px}
#sy-ap .mr-identity-controls .mr-monitor-home{display:grid;place-items:center;width:32px;height:32px;min-width:32px;padding:7px;align-self:center;min-height:32px}
#sy-ap .mr-monitor-home svg{width:18px;height:18px}
#sy-ap .mr-inline-tools{display:flex;align-items:center;gap:7px;min-width:0}
#sy-ap .mr-inline-menu{position:relative;min-width:0}
#sy-ap .mr-inline-menu>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:5px 8px;border:1px solid var(--noc-line,var(--sy-line));border-radius:7px;background:var(--noc-card,var(--sy-panel));color:var(--noc-ink,var(--sy-ink));font-size:14px;line-height:1.4;white-space:nowrap;cursor:pointer;list-style:none;font-weight:600}
#sy-ap .mr-inline-menu>summary::-webkit-details-marker{display:none}
#sy-ap .mr-inline-menu>summary svg{width:16px;height:16px;flex:none}
#sy-ap .mr-inline-menu>summary:hover{background:color-mix(in srgb,var(--noc-ink,var(--sy-ink)) 8%,var(--noc-card,var(--sy-panel)))}
#sy-ap .mr-inline-menu>summary:focus-visible{outline:2px solid var(--noc-muted,var(--sy-muted));outline-offset:2px}
#sy-ap .mr-inline-menu-panel{position:absolute;top:calc(100% + 8px);right:0;width:min(300px,calc(100vw - 100px));max-height:70svh;overflow-y:auto;box-sizing:border-box;padding:10px;border:1px solid var(--noc-line,var(--sy-line));border-radius:10px;background:var(--noc-card,var(--sy-panel));color:var(--noc-ink,var(--sy-ink));box-shadow:0 8px 24px #0002;z-index:30}
#sy-ap .mr-inline-menu-panel>.sy-time-toolbar{margin:0;padding:0;background:transparent;border:0}
#sy-ap .mr-inline-menu-panel .sy-time-presets{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
#sy-ap .mr-inline-menu-panel .sy-time-toolbar-title{font-size:13px}
#sy-ap .mr-inline-menu-panel .mr-layout-compact{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;min-width:0;border:0;background:transparent}
#sy-ap .mr-monitor-controls:has(>.mr-inline-tools){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:1250px){#sy-ap .mr-identity-controls{grid-template-columns:34px minmax(180px,1.6fr) repeat(3,minmax(90px,1fr)) auto}}
@media(max-width:1000px){#sy-ap .mr-identity-controls{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr)}#sy-ap .mr-identity-controls>.mr-router-picker{grid-column:2/-1}#sy-ap .mr-identity-controls>.mr-inline-tools{grid-column:2/-1}#sy-ap .mr-identity-controls>div:not(.mr-inline-tools){padding-bottom:8px;grid-column:2/-1}#sy-ap .mr-identity-controls>.mr-monitor-home{grid-column:1;grid-row:1}}

/* Landmark is decorative background, not an identity field or layout column. */
#sy-ap .mr-widget[data-widget="alarms"] .mr-router-landmark{position:absolute;right:16px;top:52px;bottom:40px;width:260px;max-width:35%;display:block;pointer-events:none;opacity:.08;z-index:0;border:0;background:none;overflow:hidden}
#sy-ap .mr-widget[data-widget="alarms"] .mr-router-landmark>svg{display:block;width:100%;height:100%;object-fit:contain}
#sy-ap .mr-identity-controls>button,#sy-ap .mr-identity-controls>div{position:relative;z-index:1}
#sy-ap .mr-identity-controls>.mr-inline-tools{display:flex;align-items:flex-end;gap:1px;padding:0;border:0;isolation:auto;flex-direction:column;z-index:20}
#sy-ap[data-display-mode="dark"] .mr-widget[data-widget="alarms"] .mr-router-landmark{opacity:.12}
#sy-ap[data-display-mode="dark"] .mr-widget[data-widget="alarms"] .mr-router-landmark>svg{filter:brightness(1.5)}

/* Compact anchored menu variants; Custom is inline, not a second popup. */
#sy-ap .mr-inline-menu-panel .sy-time-presets .sy-button{padding:6px 8px;min-height:30px;font-size:12px;border-radius:6px;box-shadow:none}
#sy-ap .mr-inline-menu-panel .sy-time-caption{color:var(--noc-muted,var(--sy-muted));font-size:11px;line-height:1.4}
#sy-ap .mr-layout-menu>.mr-inline-menu-panel{width:max-content;max-width:calc(100vw - 100px);padding:8px}
#sy-ap .mr-layout-menu .mr-layout-tools .sy-button{padding:6px 9px;min-height:30px;font-size:12px;box-shadow:none}
#sy-ap .mr-layout-menu .mr-layout-tools>div{flex-wrap:wrap;gap:5px}
#sy-ap .mr-layout-menu .mr-layout-tools>small{font-size:11px}
#sy-ap .mr-custom-range{display:grid;gap:8px;border-top:1px solid var(--noc-line,var(--sy-line));padding-top:10px;margin-top:8px}
#sy-ap .mr-custom-range[hidden]{display:none}
#sy-ap .mr-custom-range>p:empty{display:none}
#sy-ap .mr-custom-range>p{font-size:12px;color:var(--sy-red);margin:0}
#sy-ap .mr-inline-menu-panel .mr-custom-range>button{justify-self:end;min-height:30px;font-size:12px;line-height:1.4;padding:5px 9px;box-shadow:none}
#sy-ap .mr-widget[data-widget="alarms"]>.v01-widget-body{position:relative;isolation:isolate}
#sy-ap .mr-widget[data-widget="alarms"]>.v01-widget-body>:not(.mr-router-landmark){position:relative;z-index:1}

/* Last readings share a row when the hardware widget has enough room. */
#sy-ap .mr-hw-footer dl>div+div{border-left:1px solid var(--noc-line);padding-left:12px;padding-right:0}
@container(max-width:440px){#sy-ap .mr-hw-footer dl{grid-template-columns:1fr;gap:5px}#sy-ap .mr-hw-footer dl>div{padding-right:0}#sy-ap .mr-hw-footer dl>div+div{border-left:0;padding-left:0}}

/* Inline calendar with a fixed 24-hour time selector below it. */
#sy-ap .mr-calendar-tabs{display:grid;gap:5px}
#sy-ap .mr-calendar-tabs .sy-button{padding:5px 7px;min-height:29px;font-size:11px;text-align:left;box-shadow:none}
#sy-ap .mr-calendar-tabs [aria-pressed="true"]{border-color:var(--noc-muted,var(--sy-muted));background:var(--sy-soft);color:var(--noc-ink,var(--sy-ink))}
#sy-ap .mr-calendar-month{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px}
#sy-ap .mr-calendar-month button{width:28px;height:28px;min-height:28px;padding:2px;border:1px solid var(--noc-line,var(--sy-line));border-radius:5px;background:var(--noc-card,var(--sy-panel));color:inherit;font-size:18px}
#sy-ap .mr-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center;font-size:11px}
#sy-ap .mr-calendar-grid>span{padding:3px 0;color:var(--noc-muted,var(--sy-muted))}
#sy-ap .mr-calendar-grid>button{min-width:0;min-height:27px;padding:4px 0;font-size:12px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--noc-ink,var(--sy-ink))}
#sy-ap .mr-calendar-grid>button:hover{background:var(--sy-soft)}
#sy-ap .mr-calendar-grid>button[aria-pressed="true"]{background:#3c6d9f;color:#fff;border-color:#3c6d9f}
#sy-ap .mr-calendar-time{display:flex;align-items:flex-end;gap:4px;flex-wrap:wrap;font-size:11px;border-top:1px solid var(--noc-line,var(--sy-line));padding-top:8px}
#sy-ap .mr-calendar-time>span:first-child{width:100%;color:var(--noc-muted,var(--sy-muted));margin-bottom:2px}
#sy-ap .mr-calendar-time>label{display:grid;gap:3px;margin:0;font-size:11px;flex:1;min-width:0}
#sy-ap .mr-calendar-time select{width:100%;min-width:0;min-height:29px;padding:3px 4px;font-size:12px;border:1px solid var(--noc-line,var(--sy-line));border-radius:5px;background:var(--noc-card,var(--sy-panel));color:var(--noc-ink,var(--sy-ink))}
#sy-ap .mr-calendar-time>span:not(:first-child){padding-bottom:5px}

/* Service-scoped alarm configuration and display category. */
#sy-ap .sy-alarm-switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;margin:0}
#sy-ap .sy-alarm-switches fieldset{min-width:0;border:1px solid var(--sy-line);border-radius:8px;padding:10px 12px}
#sy-ap .sy-alarm-switches legend{font-size:13px;font-weight:600;color:var(--sy-ink)}
#sy-ap .sy-alarm-switches label{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin:7px 0;line-height:1.4;color:var(--sy-ink)}
#sy-ap .sy-alarm-switches input[type="checkbox"]{flex:none;width:16px;height:16px;min-height:0;margin:1px 0 0;padding:0;accent-color:#386fa3}
#sy-ap .sy-alarm-config [data-alarm-threshold][hidden]{display:none}
#sy-ap .mr-template-board .mr-alarm-category{display:flex;align-items:center;gap:6px;margin:0 0 0 auto;font-size:12px;color:var(--noc-muted)}
#sy-ap .mr-template-board .mr-alarm-category select{width:auto;min-width:105px;min-height:28px;padding:3px 7px;font-size:12px}
@media(max-width:580px){#sy-ap .mr-template-board .mr-alarm-category{margin-left:0}}

/* Alarm configuration owns its full-width form body; shared form grids remain untouched. */
#sy-ap .sy-popup.sy-alarm-config{width:min(960px,calc(100vw - 32px));max-width:960px;max-height:calc(100svh - 40px);overflow-y:auto}
#sy-ap .sy-alarm-config>form{display:flex;flex-direction:column;gap:12px;min-width:0}
#sy-ap .sy-alarm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
#sy-ap .sy-alarm-body>p{margin:0;font-size:13px;line-height:1.5}
#sy-ap .sy-alarm-switches fieldset{margin:0;align-self:start}
#sy-ap .sy-alarm-switches label span{min-width:0;overflow-wrap:break-word}
#sy-ap .sy-alarm-section-title{font-size:14px;font-weight:600;margin:4px 0 0;color:var(--sy-ink)}
#sy-ap .sy-alarm-config .sy-table-wrap{width:100%;min-width:0}
#sy-ap .sy-alarm-config table{width:100%;table-layout:fixed}
#sy-ap .sy-alarm-config th:first-child{width:44%}
#sy-ap .sy-alarm-config th,#sy-ap .sy-alarm-config td{padding:5px 7px;vertical-align:middle;font-size:12px}
#sy-ap .sy-alarm-config td input{width:76px;max-width:100%;min-width:0;min-height:28px;height:28px;padding:4px 6px;font-size:12px;box-sizing:border-box;border:1px solid var(--sy-line);border-radius:6px;background:var(--theme-input,var(--sy-panel));color:var(--sy-ink)}
#sy-ap .sy-alarm-config .sy-alarm-durations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#sy-ap .sy-alarm-durations>label{display:flex;flex-direction:column;gap:5px;margin:0;font-size:12px}
#sy-ap .sy-alarm-durations input{width:100%;min-width:0;min-height:28px;height:28px;padding:4px 6px;font-size:12px}
#sy-ap .sy-alarm-config>form>p[role="status"]:empty{display:none}
#sy-ap .sy-alarm-config>form>button[type="submit"]{align-self:flex-end;margin:0;min-height:36px;font-size:13px}
@media(min-width:1100px){#sy-ap .sy-alarm-switches{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){#sy-ap .sy-alarm-switches{grid-template-columns:1fr}#sy-ap .sy-alarm-config .sy-alarm-durations{grid-template-columns:1fr}}

#sy-ap .sy-alarm-switches .sy-sla-source{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 6px;border:1px solid var(--theme-line,var(--sy-line));border-radius:5px;background:var(--theme-tint-blue,var(--sy-soft));color:var(--theme-blue,var(--sy-ink));font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap}

/* Compact two-column threshold editor, with one layout on small screens. */
#sy-ap .sy-alarm-threshold-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;min-width:0}
#sy-ap .sy-alarm-policy-note{font-size:12px;color:var(--sy-muted);margin:0}
#sy-ap .sy-alarm-policy-note>summary{cursor:pointer;padding:3px 0}
#sy-ap .sy-alarm-policy-note p{font-size:12px;line-height:1.5;margin:6px 0 0}
@media(max-width:760px){#sy-ap .sy-alarm-threshold-columns{grid-template-columns:1fr;gap:8px}}

/* Light-only identity accents. Dark keeps its existing palette and icon-free labels. */
#sy-ap .mr-light-accent{display:none}
#sy-ap[data-display-mode="light"] .mr-identity-controls{--identity-blue:#2f6b56;--identity-purple:#2f6b56;--identity-teal:#2f6b56;--identity-amber:#2f6b56;background:linear-gradient(90deg,#eaf4ef 0%,#f5f9f7 100%)}
#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-light-accent{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;vertical-align:middle}
#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-light-accent svg{width:16px;height:16px}
#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-router-picker>label,#sy-ap[data-display-mode="light"] .mr-identity-controls [data-identity-field]>small{display:flex;align-items:center;gap:6px}
#sy-ap[data-display-mode="light"] .mr-router-picker .mr-light-accent{color:var(--identity-blue)}
#sy-ap[data-display-mode="light"] [data-identity-field="ip"] .mr-light-accent{color:var(--identity-purple)}
#sy-ap[data-display-mode="light"] [data-identity-field="uptime"] .mr-light-accent{color:var(--identity-teal)}
#sy-ap[data-display-mode="light"] [data-identity-field="location"] .mr-light-accent{color:var(--identity-amber)}
#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-monitor-home{background:#e2f0e9;border-color:#bcd9cb;color:var(--identity-blue)}
#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-monitor-home:enabled:hover{background:#cfe6da;border-color:#97c4ae}

#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-router-picker>label{color:var(--identity-blue)}
#sy-ap[data-display-mode="light"] .mr-identity-controls [data-identity-field="ip"]>small{color:var(--identity-purple)}
#sy-ap[data-display-mode="light"] .mr-identity-controls [data-identity-field="uptime"]>small{color:var(--identity-teal)}
#sy-ap[data-display-mode="light"] .mr-identity-controls [data-identity-field="location"]>small{color:var(--identity-amber)}
#sy-ap[data-display-mode="light"] .mr-identity-controls .mr-router-picker>select{background-color:transparent}

/* Light time-menu surface; selection and status colors retain their meaning. */
#sy-ap[data-display-mode="light"] .mr-inline-menu:not(.mr-layout-menu)>.mr-inline-menu-panel{background:linear-gradient(145deg,#f5e3e5 0%,#f9edef 55%,#fcf6f6 100%);border-color:#e8cdd2}

#sy-ap .mr-inline-tool-buttons{display:flex;align-items:center;gap:7px}
#sy-ap .mr-identity-controls>.mr-inline-tools>.mr-selected-period{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;min-height:16px;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:500;font-style:normal;line-height:14px;color:var(--noc-muted,#5f7088);white-space:nowrap;text-align:right}
#sy-ap .mr-selected-period>svg{width:11px;height:11px;flex:none}
#sy-ap[data-display-mode="light"] .mr-identity-controls>.mr-inline-tools>.mr-selected-period{background:#e7eff9;color:#355e8d}

.sy-chart-tooltip-value{display:flex;align-items:center;gap:7px}
.sy-chart-tooltip-marker{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}

#sy-ap .mr-template-board [data-widget="alarms"] td .sy-button{min-height:28px;padding:4px 8px;font-size:12px;line-height:1.4;box-shadow:none}

/* v0.2 enterprise workspace. Scoped to authenticated stage: login remains v0.1.
   Widget board geometry and saved positions are deliberately untouched. */
#sy-ap .sy-stage{--sy-bg:#f4f6fa;--sy-panel:#fff;--sy-ink:#192b40;--sy-muted:#5e6f83;--sy-line:#dce3ec;--sy-soft:#edf3fa;--sy-green:#245f9b;--sy-nav-bg:#142438;--sy-nav-hover:#203750;--sy-nav-active:#294b70;--sy-nav-ink:#e3ebf5;--sy-card-radius:12px;--sy-card-shadow:0 2px 8px #13243a06;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sy-ap[data-display-mode="dark"] .sy-stage{--sy-bg:#0e1623;--sy-panel:#172233;--sy-ink:#e5edf7;--sy-muted:#a7b6c9;--sy-line:#2d3d52;--sy-soft:#203149;--sy-green:#32669e;--sy-nav-bg:#101b2b;--sy-nav-hover:#203249;--sy-nav-active:#294968;--sy-nav-ink:#e1eaf5;--theme-header:#142031;--theme-panel:#172233;--theme-input:#101d2e;--theme-ink:#e5edf7;--theme-muted:#a7b6c9;--theme-line:#2d3d52;--theme-tint-blue:#203149;--sy-card-shadow:0 2px 8px #00000016}
#sy-ap .sy-stage .sy-header{padding:12px 24px;box-shadow:none}
#sy-ap .sy-stage .sy-content{padding:24px;max-width:1920px;width:100%;margin-inline:auto}
#sy-ap .sy-stage .sy-heading{margin-bottom:22px}
#sy-ap .sy-stage h2{font-size:23px;letter-spacing:-.025em;font-weight:650}
#sy-ap .sy-stage h3{font-weight:650;letter-spacing:-.01em}
#sy-ap .sy-stage .sy-nav{padding:12px 5px;border-right:1px solid var(--sy-line);gap:5px}
#sy-ap .sy-stage[data-menu-open=true] .sy-nav{padding:12px 5px}
#sy-ap .sy-stage .sy-nav button{min-height:44px;padding:10px 9px;border-radius:7px;font-size:13px;border-color:transparent}
#sy-ap .sy-stage .sy-nav button[aria-current=page]{box-shadow:inset 3px 0 #86b9ec;background:var(--sy-nav-active);border-color:transparent}
#sy-ap .sy-stage .sy-nav button:enabled:hover{background:var(--sy-nav-hover);border-color:transparent}
#sy-ap .sy-stage .sy-panel{border-color:var(--sy-line);box-shadow:var(--sy-card-shadow)}
#sy-ap .sy-stage .sy-metric{border-radius:10px;border-color:var(--sy-line)}
#sy-ap .sy-stage .sy-metric strong{letter-spacing:-.025em}
#sy-ap .sy-stage .sy-button{border-radius:7px;font-weight:500;min-height:34px}
#sy-ap .sy-stage table{font-size:12px}
#sy-ap .sy-stage th{font-weight:600;padding:10px;background:var(--sy-soft);color:var(--sy-muted)}
#sy-ap .sy-stage td{padding:10px;border-color:var(--sy-line)}
#sy-ap .sy-stage tbody tr:hover{background:color-mix(in srgb,var(--sy-soft) 55%,transparent)}
#sy-ap .sy-stage .sy-footer{color:var(--sy-muted);border-top:1px solid var(--sy-line);padding-top:16px;margin-top:24px;font-size:11px}
@media(max-width:760px){#sy-ap .sy-stage .sy-content{padding:14px}#sy-ap .sy-stage .sy-header{padding:10px 14px}#sy-ap .sy-stage h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){#sy-ap .sy-stage *,#sy-ap .sy-stage *::before,#sy-ap .sy-stage *::after{scroll-behavior:auto;transition:none;animation:none}}

/* Unified semantic palettes for authenticated workspace, including root dialogs. */
#sy-ap:has(.sy-stage){--theme-panel:#fff;--theme-header:#fff;--theme-input:#fff;--theme-soft:#edf3fa;--theme-ink:#192b40;--theme-muted:#5e6f83;--theme-line:#dce3ec;--theme-blue:#245f9b;--theme-green:#216344;--theme-amber:#875600;--theme-red:#af293b;--theme-purple:#6946a0;--theme-tint-blue:#edf3fa;--theme-tint-green:#eaf5ee;--theme-tint-amber:#fff3db;--theme-tint-red:#fcecef;--theme-tint-purple:#f1ecfa;--sy-title-blue:#edf3fa;--sy-title-purple:#f1ecfa;--sy-title-jade:#eaf5ee;--sy-title-rose:#fcecef;--sy-title-amber:#fff3db}
#sy-ap[data-display-mode="dark"]:has(.sy-stage){--theme-panel:#172233;--theme-header:#142031;--theme-input:#101d2e;--theme-soft:#203149;--theme-ink:#e5edf7;--theme-muted:#a7b6c9;--theme-line:#2d3d52;--theme-blue:#92c2f3;--theme-green:#88d5af;--theme-amber:#f0cd83;--theme-red:#ffa5b2;--theme-purple:#cbb4f5;--theme-tint-blue:#203149;--theme-tint-green:#1d382f;--theme-tint-amber:#3c3220;--theme-tint-red:#3c2631;--theme-tint-purple:#302b43;--sy-title-blue:#203149;--sy-title-purple:#302b43;--sy-title-jade:#1d382f;--sy-title-rose:#3c2631;--sy-title-amber:#3c3220}
#sy-ap .sy-stage{--sy-red:var(--theme-red);--sy-amber:var(--theme-amber);color:var(--sy-ink);color-scheme:light}
#sy-ap[data-display-mode="dark"] .sy-stage{color-scheme:dark}
#sy-ap .sy-stage :is(input,select,textarea){background:var(--theme-input);color:var(--theme-ink);border-color:var(--theme-line);accent-color:var(--sy-green)}
#sy-ap .sy-stage :is(input,textarea)::placeholder{color:var(--theme-muted);opacity:1}
#sy-ap:has(.sy-stage) :is(.sy-dialog,dialog,.ap-dialog){background:var(--theme-panel);color:var(--theme-ink);border-color:var(--theme-line)}
#sy-ap:has(.sy-stage) dialog::backdrop{background:#08132199}
#sy-ap .sy-stage .mr-noc-surface,#sy-ap .sy-stage .mr-noc-surface[data-monitor-theme="dark"]{--noc-bg:var(--sy-bg);--noc-card:var(--sy-panel);--noc-head:var(--sy-soft);--noc-line:var(--sy-line);--noc-ink:var(--sy-ink);--noc-muted:var(--sy-muted)}
#sy-ap .sy-stage .sy-content:has(.mr-noc-surface){background:var(--sy-bg);color:var(--sy-ink)}
#sy-ap .sy-stage .sy-content:has(.mr-noc-surface) :is(.sy-heading .sy-muted,.sy-page-time,.sy-footer){color:var(--sy-muted)}
#sy-ap .sy-stage .mr-widget{--widget-head-start:var(--sy-soft);--widget-head-end:var(--sy-soft)}
#sy-ap .sy-stage .sy-folder-tabs{border-color:var(--sy-line)}
#sy-ap .sy-stage .sy-folder-tabs .sy-button[aria-pressed=true]{background:var(--sy-soft);color:var(--theme-blue);border-color:var(--theme-blue)}
#sy-ap .sy-stage :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--theme-blue);outline-offset:3px}

#sy-ap .sy-stage .sy-tag:not(.sy-warning):not(.sy-danger){background:var(--theme-tint-blue);color:var(--theme-blue)}