html,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;min-height:240px;margin:0!important;padding:16px}
.v01-widget header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;flex:none;min-height:36px;cursor:move}
.v01-widget header strong{margin-right:auto}
.v01-widget-body{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px;padding-top:8px}
.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-widget-current{display:block;font-size:24px;margin:auto 0}
.v01-script,.v01-diagnostic{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:12px;background:#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!important}
.ap-health-table td,.ap-log td{padding:8px 10px!important}
.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}}

/* Monitoring components use metric-specific colors; values remain measured. */
#sy-ap .mr-widget{padding:0;border:1px solid #e2e8f2;isolation:isolate;position:absolute;box-shadow:0 4px 14px #2136500c;border-radius:8px;min-height:200px}
#sy-ap .mr-widget>header{padding:10px 12px;background:linear-gradient(110deg,#d9eefb,#e9e8fc);cursor:move;z-index:2;min-height:44px;gap:5px}
#sy-ap .mr-widget[data-widget="router_summary"]>header{background:linear-gradient(110deg,#e6dbfa,#f4e8f9)}
#sy-ap .mr-widget[data-widget="traffic"]>header,#sy-ap .mr-widget[data-widget="cpu"]>header{background:linear-gradient(110deg,#d5f0fb,#e7f4fd)}
#sy-ap .mr-widget[data-widget="memory"]>header,#sy-ap .mr-widget[data-widget="uptime"]>header{background:linear-gradient(110deg,#e8dcfb,#f3eefe)}
#sy-ap .mr-widget[data-widget="icmp"]>header,#sy-ap .mr-widget[data-widget="storage"]>header{background:linear-gradient(110deg,#d8f1ec,#eaf7f8)}
#sy-ap .mr-widget[data-widget="sensors"]>header{background:linear-gradient(110deg,#ffecd1,#fff6e8)}
#sy-ap .mr-widget>header>strong{display:flex;align-items:center;gap:7px;flex:0 1 auto;font-size:15px;font-weight:600;min-width:0;margin-right:auto;padding:4px 7px;border:1px solid var(--mr-title-border,#bdd9ec);border-radius:6px;background:linear-gradient(180deg,#ffffffd9,var(--mr-title-fill,#e2f0fb));box-shadow:inset 0 1px 0 #fff,0 2px 3px #17375b24;line-height:1.3}
#sy-ap .mr-widget>header>strong>svg{width:18px;height:18px;color:#427fbe;flex:none}
#sy-ap .mr-widget[data-widget="memory"]>header>strong>svg,#sy-ap .mr-widget[data-widget="uptime"]>header>strong>svg,#sy-ap .mr-widget[data-widget="router_summary"]>header>strong>svg{color:#8a5cc3}
#sy-ap .mr-widget[data-widget="sensors"]>header>strong>svg{color:#df8a29}
#sy-ap .mr-widget[data-widget="storage"]>header>strong>svg,#sy-ap .mr-widget[data-widget="icmp"]>header>strong>svg{color:#249c94}
#sy-ap .mr-widget>header>.sy-button{padding:5px;line-height:1;flex:none}
#sy-ap .mr-widget>header .sy-button svg{width:15px;height:15px}
#sy-ap .mr-widget>.v01-widget-body{padding:12px;position:relative;z-index:1;overflow:auto}
#sy-ap .mr-watermark{position:absolute;right:16px;top:62px;z-index:0;pointer-events:none;opacity:.045;color:#47658c}
#sy-ap .mr-watermark>svg{width:85px;height:85px}
#sy-ap .mr-widget[data-widget="map"] .mr-watermark{display:none}
#sy-ap .mr-reading{flex:none;display:flex;flex-direction:column;gap:5px;margin-bottom:8px;min-width:0}
#sy-ap .mr-reading>strong{font-size:21px;font-weight:700;display:flex;align-items:center;gap:7px;line-height:1.35;overflow-wrap:anywhere}
#sy-ap .mr-reading>strong svg{width:22px;height:22px;flex:none}
#sy-ap .mr-reading small{font-size:13px;color:#5f7088;line-height:1.4}
#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 strong{display:inline-flex;align-items:center;gap:6px;font-size:22px}
#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-traffic-directions button[aria-pressed="false"]{opacity:.4}
#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-plot-canvas svg text{font-size:12px;fill:#61738d}
#sy-ap .mr-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;flex:none;font-size:12px;color:#465c78;padding:3px 0}
#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 .mr-sensor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px;flex:1;min-height:0}
#sy-ap .mr-sensor-grid>section{display:flex;min-width:0;min-height:230px}
#sy-ap [data-sensor-plot]{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
#sy-ap .mr-graph-switch{display:inline-flex;gap:5px;align-items:center;background:transparent;border:0;padding:3px;font-size:10px;color:#48647a}
#sy-ap .mr-graph-switch>span{width:25px;height:13px;background:#a0adba;border-radius:10px;position:relative}
#sy-ap .mr-graph-switch>span:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;top:2px;left:2px;background:white}
#sy-ap .mr-graph-switch[aria-checked="true"]>span{background:#3a9277}
#sy-ap .mr-graph-switch[aria-checked="true"]>span:before{left:14px}
#sy-ap .mr-router-identity{display:flex;align-items:center;gap:14px;min-width: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-router-identity h4{margin:0 0 5px;font-size:17px;overflow-wrap:anywhere}
#sy-ap .mr-router-identity>div{min-width:0;flex:1}
#sy-ap .mr-router-identity small{display:block;font-size:11px;color:#70829b;overflow-wrap:anywhere}
#sy-ap .mr-status{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
#sy-ap .mr-status .sy-tag,#sy-ap .mr-status .sy-device-badge{font-size:10px;line-height:15px;padding:3px 6px;min-height:21px}
#sy-ap .mr-summary-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}
#sy-ap .mr-summary-tile{display:flex;gap:7px;padding:10px 7px;background:#eaf2ff;border-radius:7px;min-width:0}
#sy-ap .mr-summary-tile:nth-child(2){background:#f0eafb}
#sy-ap .mr-summary-tile:nth-child(3){background:#e4f6f0}
#sy-ap .mr-summary-tile>svg{width:18px;height:18px;flex:none;color:#5a79b3}
#sy-ap .mr-summary-tile>div{min-width:0}
#sy-ap .mr-summary-tile strong{display:block;font-size:19px;line-height:1.3}
#sy-ap .mr-summary-tile small{display:block;font-size:10px;color:#69809b;overflow-wrap:anywhere}
#sy-ap .mr-summary-rows{margin-top:10px}
#sy-ap .mr-summary-row{display:grid;grid-template-columns:16px minmax(90px,.8fr) minmax(0,1fr);align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid #edf0f5;font-size:11px}
#sy-ap .mr-summary-row>svg{width:14px;height:14px;color:#7b89a2}
#sy-ap .mr-summary-row>span{color:#718099}
#sy-ap .mr-summary-row>strong{text-align:right;overflow-wrap:anywhere}
#sy-ap .mr-open-config{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;margin-top:10px}
#sy-ap .mr-open-config svg{width:16px;height:16px}
#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:#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-summary-tiles{grid-template-columns:1fr}#sy-ap .mr-summary-row{grid-template-columns:16px 100px minmax(0,1fr)}#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:#172d49}
#sy-ap .wp-heading p{margin:0;color:#718099;font-size:13px}
#sy-ap .wp-select-all{display:flex;align-items:center;gap:8px;color:#62758e;font-size:13px;cursor:pointer}
#sy-ap .wp-info{position:relative;display:inline-flex;color:#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,#edf5ff,#f4edfc);border:1px solid #dce3f3;border-radius:8px;box-shadow:0 5px 15px #253d6426;font-size:12px;line-height:1.5;font-weight:400;color:#43556f;pointer-events:none}
#sy-ap .wp-info:hover>[role="tooltip"],#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:#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:#148ddd}#sy-ap .wp-tx{color:#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:#e0f4e9;color:#28734d}#sy-ap .wp-missing{background:#fff1da;color:#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:#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:#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 #dce3f3;border-radius:8px;background:linear-gradient(110deg,#edf5ff,#f4edfc);box-shadow:0 5px 15px #253d6426;font-size:11px;line-height:1.5;color:#43556f;pointer-events:none}
#sy-ap .wp-availability:hover>[role="tooltip"],#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:#71849a;font-size:12px}
#sy-ap .wp-save-state>svg{width:15px;height:15px;color:#2f9567}
#sy-ap .wp-save-state[data-dirty="true"]{color:#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-monitor-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);gap:0;margin-bottom:16px;background:linear-gradient(110deg,#e8f3ff,#eee6fc);border:1px solid #d9e4f8;border-radius:8px;overflow:hidden}
#sy-ap .mr-monitor-toolbar>.sy-time-toolbar{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#sy-ap .mr-layout-tools{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px;border-left:1px solid #dce3f4;min-width:0}
#sy-ap .mr-layout-tools>strong{display:flex;align-items:center;gap:7px;font-size:14px}
#sy-ap .mr-layout-tools>strong svg{width:17px;height:17px;color:#7a64b3}
#sy-ap .mr-layout-tools>div{display:flex;flex-wrap:wrap;gap:8px}
#sy-ap .mr-layout-tools .sy-button{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;font-size:12px}
#sy-ap .mr-layout-tools .sy-button svg{width:16px;height:16px}
#sy-ap .mr-layout-tools>small{font-size:11px;color:#78869b}
@media(max-width:1100px){#sy-ap .mr-monitor-toolbar{grid-template-columns:minmax(0,1fr)}#sy-ap .mr-layout-tools{border-left:0;border-top:1px solid #dce3f4;padding:14px}}

#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}

/* Time and layout are separate color groups with a common button baseline. */
#sy-ap .mr-monitor-toolbar{grid-template-columns:minmax(0,65fr) minmax(0,35fr);background:#fff;gap:0}
#sy-ap .mr-monitor-toolbar>.sy-time-toolbar,#sy-ap .mr-layout-tools{position:relative;isolation:isolate;display:grid;grid-template-rows:20px auto 1fr;align-content:start;gap:10px;padding:16px;min-width:0}
#sy-ap .mr-monitor-toolbar>.sy-time-toolbar{background:linear-gradient(110deg,#edf6ff,#effafb)}
#sy-ap .mr-layout-tools{background:linear-gradient(110deg,#f0eaff,#fff0e6);grid-template-columns:minmax(0,1fr);justify-content:start;justify-items:start;text-align:left}
#sy-ap .mr-monitor-toolbar .sy-time-presets{margin:0;align-items:center;gap:6px}
#sy-ap .mr-monitor-toolbar .sy-time-presets .sy-button,#sy-ap .mr-layout-tools .sy-button{min-height:36px;padding:8px 10px;font-size:12px}
#sy-ap .mr-monitor-toolbar .sy-time-toolbar-title,#sy-ap .mr-layout-tools>strong{margin:0;font-size:14px;line-height:20px}
#sy-ap .mr-layout-tools>div{align-items:flex-start;gap:7px}
#sy-ap .mr-layout-tools>small{display:flex;align-items:center;gap:5px;font-size:11px}
#sy-ap .mr-layout-tools>small svg{width:14px;height:14px;color:#299269}
#sy-ap .mr-monitor-toolbar>.sy-time-toolbar>*,#sy-ap .mr-layout-tools>*{position:relative;z-index:1}
#sy-ap .mr-monitor-toolbar>.sy-time-toolbar:after,#sy-ap .mr-layout-tools:after{content:"";position:absolute;right:12px;top:12px;width:120px;height:120px;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.045;pointer-events:none;z-index:0}
#sy-ap .mr-widget[data-widget="map"]>header{background:linear-gradient(110deg,#d8effc,#e4f8fa)}
#sy-ap .mr-widget[data-widget="router_summary"]>header{background:linear-gradient(110deg,#e9defa,#f9eaf2)}
#sy-ap .mr-widget[data-widget-locked="true"]>header{cursor:default}
#sy-ap .mr-widget[data-widget-locked="false"]>header{cursor:move}
#sy-ap .mr-widget [data-widget-lock][aria-pressed="false"]{color:#aa6e22;border-color:#e7cc9d;background:#fff3df}
@media(max-width:1000px){#sy-ap .mr-monitor-toolbar{grid-template-columns:minmax(0,1fr)}#sy-ap .mr-layout-tools{border-left:0;border-top:1px solid #dce3f4}}

#sy-ap .mr-monitor-toolbar>.sy-time-toolbar:after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%20stroke%3D%22%23428ad2%22%20stroke-width%3D%225%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%2F%3E%3Cpath%20d%3D%22M50%2025v28l20%2013%22%2F%3E%3C%2Fsvg%3E")}
#sy-ap .mr-layout-tools:after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%20stroke%3D%22%239b6cbb%22%20stroke-width%3D%225%22%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%2230%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%2212%22%20width%3D%2230%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2258%22%20width%3D%2230%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%2258%22%20width%3D%2230%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3C%2Fsvg%3E")}

#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[hidden]{display: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:top .14s ease-out,left .14s ease-out}
#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}}

/* Compact summary contents; retain the user's widget height and layout. */
#sy-ap [data-widget="router_summary"]>.v01-widget-body{gap:6px;padding:10px 12px}
#sy-ap .mr-router-identity{gap:10px}
#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}
#sy-ap .mr-summary-tiles{margin-top:8px}
#sy-ap .mr-summary-tile{padding:8px 7px}
#sy-ap .mr-summary-rows{margin-top:5px}
#sy-ap .mr-summary-row{padding:6px 0}
#sy-ap .mr-open-config{margin-top:6px}
@media(max-width:700px){#sy-ap .mr-router-picture.mr-has-photo{width:80px;height:60px}}

/* Fill the existing summary height with proportional content, as approved. */
#sy-ap [data-widget="router_summary"]>.v01-widget-body{display:grid;grid-template-rows:minmax(110px,1.15fr) minmax(90px,1fr) minmax(170px,2.2fr) auto;gap:14px;padding:14px 16px 16px;container-type:inline-size;align-content:stretch}
#sy-ap [data-widget="router_summary"] .mr-router-identity{gap:16px;align-items:center;min-height:0}
#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 [data-widget="router_summary"] .mr-router-identity h4{font-size:clamp(17px,3.6cqi,24px);line-height:1.25;margin-bottom:8px}
#sy-ap [data-widget="router_summary"] .mr-router-identity small{font-size:clamp(11px,2.1cqi,14px)}
#sy-ap [data-widget="router_summary"] .mr-summary-tiles{margin:0;gap:10px;align-items:stretch}
#sy-ap [data-widget="router_summary"] .mr-summary-tile{align-items:center;padding:12px 9px;gap:8px}
#sy-ap [data-widget="router_summary"] .mr-summary-tile>div{display:flex;flex-direction:column;gap:6px}
#sy-ap [data-widget="router_summary"] .mr-summary-tile strong{font-size:clamp(19px,4.8cqi,34px);line-height:1.2;letter-spacing:-.5px}
#sy-ap [data-widget="router_summary"] .mr-summary-tile small{font-size:clamp(10px,2cqi,13px)}
#sy-ap [data-widget="router_summary"] .mr-summary-rows{display:grid;grid-template-rows:repeat(5,minmax(34px,1fr));margin:0;min-height:0}
#sy-ap [data-widget="router_summary"] .mr-summary-row{padding:8px 0;font-size:clamp(11px,2.15cqi,14px);grid-template-columns:16px minmax(80px,.8fr) minmax(0,1fr)}
#sy-ap [data-widget="router_summary"] .mr-open-config{margin:0;min-height:42px;padding:10px 12px;align-self:end}
@media(max-width:500px){#sy-ap [data-widget="router_summary"]>.v01-widget-body{gap:10px;padding:12px;grid-template-rows:minmax(110px,1.15fr) minmax(90px,1fr) minmax(185px,2.2fr) auto}#sy-ap [data-widget="router_summary"] .mr-router-identity{gap:10px}#sy-ap [data-widget="router_summary"] .mr-summary-tiles{gap:6px}#sy-ap [data-widget="router_summary"] .mr-summary-tile{padding:9px 6px;gap:5px}}

/* Nonmodal, draggable widget palette; styles stay local to this panel. */
#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: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,#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}

/* ALL has its own four movable cards; router boards keep their existing layout. */
#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:#398cdb}
#sy-ap .sy-capacity-tx .sy-capacity-title svg{color:#e89533}
#sy-ap .sy-capacity-title b{color:#be404d;font-weight:500}
#sy-ap .sy-capacity-input{display:flex;align-items:stretch;min-width:0;margin-top:6px;border:1px solid #dce5f1;border-radius:8px;overflow:hidden;background:#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 #dce5f1;color:#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-indicator{display:flex;align-items:center;gap:10px;margin-top:7px}
#sy-ap .mr-util-indicator>strong{flex:none;font-size:11px;font-weight:500;white-space:nowrap}
#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}

/* Approved three-widget mockup: name above the indicator, footer at bottom. */
#sy-ap .mr-all-widget:has(.mr-traffic-ranking)>.v01-widget-body{gap:12px;padding:16px}
#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,#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}

/* Raised title plaques share the widget theme; controls and body stay unchanged. */
#sy-ap .mr-widget[data-widget="memory"],#sy-ap .mr-widget[data-widget="uptime"],#sy-ap .mr-widget[data-widget="router_summary"],#sy-ap .mr-widget[data-widget="all_utilization"]{--mr-title-fill:#ece2fa;--mr-title-border:#d3bfea}
#sy-ap .mr-widget[data-widget="sensors"],#sy-ap .mr-widget[data-widget="all_upload"],#sy-ap .mr-widget[data-widget="all_icmp"]{--mr-title-fill:#fff0d8;--mr-title-border:#edcf9f}
#sy-ap .mr-widget[data-widget="storage"],#sy-ap .mr-widget[data-widget="icmp"]{--mr-title-fill:#def2ec;--mr-title-border:#b4dbd0}