.monitor-page{--monitor-online:#22a75d;--monitor-offline:#7f8287;--monitor-warn:#6a6a6e;flex-direction:column;flex:1;width:100%;max-width:1400px;margin:0 auto;display:flex}#page-content[data-module=monitor]{flex-direction:column;display:flex}#monitor-island,#monitor-island>.monitor-island{flex-direction:column;flex:1;display:flex}:root[data-theme=dark] .monitor-page{--monitor-online:#4ecb7f;--monitor-offline:#8a8a90;--monitor-warn:#c8c8ca}.monitor-num{font-variant-numeric:tabular-nums}.monitor-static-placeholder{min-height:1px}.monitor-surface{justify-content:center;align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;min-height:clamp(240px,50vh,480px);display:flex}.monitor-island[data-monitor-state=loading]>.monitor-surface,.monitor-island[data-monitor-state=error]>.monitor-surface,#monitor-island>.monitor-surface{flex:1}.monitor-surface .state-title,.monitor-surface .state-description{margin:0}.monitor-surface .state-title{color:var(--text);font-weight:600}.monitor-surface .state-description{max-width:44ch;color:var(--text-muted);font-size:var(--font-size-small)}.monitor-surface .monitor-loading-text{color:var(--text-muted);margin:0}.monitor-error{margin:0 0 var(--space-3);color:var(--text);font-size:var(--font-size-small)}.monitor-summary{gap:var(--space-3);margin-bottom:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (min-width:1024px){.monitor-summary{grid-template-columns:repeat(4,minmax(0,1fr))}}.monitor-tile{min-width:0;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-xs);flex-direction:column;display:flex}.monitor-tile-head{color:var(--text-muted);font-size:var(--font-size-small);align-items:center;gap:.375rem;display:flex}.monitor-tile-figure{margin-top:var(--space-1);font-size:1.25rem;font-weight:600;line-height:1.3}.monitor-tile-unit{margin-left:var(--space-1);color:var(--text-muted);font-size:var(--font-size-small);font-weight:400}.monitor-tile-foot{padding-top:var(--space-1);color:var(--text-muted);font-size:var(--font-size-small);margin-top:auto}.monitor-tile-foot-spaced{margin-top:var(--space-2)}.monitor-flow{column-gap:var(--space-2);grid-template-columns:minmax(0,1fr);margin-top:.375rem;font-size:.875rem;display:grid}@media (min-width:640px){.monitor-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}.monitor-flow-strong{font-weight:600}.monitor-flow-item{align-items:center;gap:var(--space-1);white-space:nowrap;min-width:0;display:inline-flex}.monitor-flow-item svg{color:var(--text-muted);flex-shrink:0}.monitor-value{z-index:20;min-width:0;position:relative}.monitor-value-tile{cursor:default;height:100%}.monitor-value-detail{z-index:50;width:min(25rem,100vw - 2rem);margin-top:var(--space-2);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;position:absolute;top:100%;right:0}.monitor-value:hover .monitor-value-detail,.monitor-value:focus-within .monitor-value-detail{opacity:1;visibility:visible;pointer-events:auto}.monitor-value-grid{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.monitor-value-metric{min-width:0}.monitor-value-figure{margin-top:var(--space-1);text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:600;overflow:hidden}.monitor-rates{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}.monitor-rates-head{justify-content:space-between;align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:var(--font-size-small);display:flex}.monitor-rates-grid{column-gap:var(--space-5);margin-top:var(--space-2);font-size:var(--font-size-small);grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.375rem;display:grid}.monitor-rate-row{justify-content:space-between;align-items:center;gap:var(--space-2);min-width:0;display:flex}.monitor-rate-code{color:var(--text-muted)}.monitor-rate-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.monitor-spark{width:100%;height:1.75rem;color:var(--text);display:block}.monitor-spark-up{color:var(--text)}.monitor-spark-down{color:var(--text-muted)}.monitor-groups{gap:var(--space-1);margin:0 calc(-1 * var(--space-1)) var(--space-3);padding:0 var(--space-1) var(--space-1);display:flex;overflow-x:auto}.monitor-group-tab{align-items:center;gap:var(--space-2);height:2rem;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:1px solid #0000;flex-shrink:0;font-size:.875rem;display:inline-flex}.monitor-group-tab:hover{background:var(--surface-hover);color:var(--text)}.monitor-group-tab[aria-pressed=true]{background:var(--bg-soft);color:var(--text)}.monitor-group-count{color:var(--text-muted)}.monitor-node-grid{align-items:start;gap:var(--space-3);grid-template-columns:minmax(0,1fr);display:grid}@media (min-width:560px){.monitor-node-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:900px){.monitor-node-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1200px){.monitor-node-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.monitor-node-card{min-width:0;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-xs);flex-direction:column;display:flex}.monitor-node-head{justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.monitor-node-identity{min-width:0}.monitor-node-name-row{align-items:center;gap:.375rem;min-width:0;display:flex}.monitor-node-name{font-size:var(--font-size-body);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:500;line-height:1.4;overflow:hidden}.monitor-flag{border-radius:2px;flex-shrink:0;width:18px;height:12px;box-shadow:0 0 0 1px #15171c1a}.monitor-node-os{min-width:0;margin:var(--space-1) 0 0;color:var(--text-muted);font-size:var(--font-size-small);align-items:center;gap:.375rem;display:flex}.monitor-node-os-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.monitor-os-icon{width:.75rem;height:.75rem;fill:var(--brand);flex-shrink:0}:root[data-theme=dark] .monitor-os-icon{fill:color-mix(in oklab, var(--brand) 60%, white)}.monitor-node-state{align-items:flex-end;gap:var(--space-1);flex-direction:column;flex-shrink:0;display:flex}.monitor-badge{width:-moz-fit-content;width:fit-content;padding:.125rem var(--space-2);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--font-size-small);white-space:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.375rem;font-weight:400;display:inline-flex;overflow:hidden}.monitor-badge-plain,.monitor-status[data-status=offline],.monitor-status[data-status=absent]{color:var(--text-muted)}.monitor-status-dot{border-radius:var(--radius-full);background:var(--monitor-offline);flex-shrink:0;width:.375rem;height:.375rem}.monitor-status[data-status=online] .monitor-status-dot{background:var(--monitor-online)}.monitor-status[data-status=absent] .monitor-status-dot{background:var(--text-faint)}.monitor-expiry{font-size:var(--font-size-small);color:var(--text-muted)}.monitor-expiry[data-tone=soon]{color:var(--monitor-warn)}.monitor-expiry[data-tone=expired]{color:var(--text);font-weight:600}.monitor-meters{column-gap:var(--space-4);row-gap:var(--space-4);margin-top:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.monitor-meter{min-width:0}.monitor-meter-head{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.monitor-meter-label{color:var(--text-muted);font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.monitor-meter-pct{font-size:var(--font-size-small);white-space:nowrap;font-weight:500}.monitor-meter-track{border-radius:var(--radius-full);background:var(--bg-soft);width:100%;height:.375rem;margin-top:.375rem;overflow:hidden}.monitor-meter-fill{border-radius:var(--radius-full);background:var(--text);height:100%;transition:width .5s}.monitor-meter-foot{color:var(--text-muted);font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;margin-top:.375rem;overflow:hidden}.monitor-node-flow{column-gap:var(--space-4);row-gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);font-size:var(--font-size-small);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.monitor-node-flow .monitor-flow-item{color:var(--text)}.monitor-node-flow .monitor-flow-total{color:var(--text-muted)}.monitor-node-empty{margin:var(--space-3) 0 0;color:var(--text-muted);font-size:.875rem;line-height:1.6}