.monitoring-page {
  --accent: var(--primary);
  --surface: var(--bg-surface);
  --surface-2: var(--surface-soft);
  --monitor-accent-contrast: var(--primary-contrast);
  --monitor-success: var(--success);
  --monitor-warning: var(--warning);
  --monitor-danger: var(--danger);
  max-width: 1500px;
}
.monitoring-console {
  --accent: #0878bd;
  --monitor-accent-contrast: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #d8e0eb;
  --text-1: #162033;
  --text-2: #536278;
  --text-3: #6b7a90;
  --monitor-bg: #f4f7fb;
  --monitor-surface: #ffffff;
  --monitor-surface-soft: #f7f9fc;
  --monitor-border: #d8e0eb;
  --monitor-border-strong: #bcc8d8;
  --monitor-text: #162033;
  --monitor-text-soft: #35445a;
  --monitor-muted: #536278;
  --monitor-subtle: #6b7a90;
  --monitor-success: #087a43;
  --monitor-success-text: #096b3c;
  --monitor-success-soft: #e2f7eb;
  --monitor-warning: #a75d00;
  --monitor-warning-text: #874b00;
  --monitor-warning-soft: #fff0d5;
  --monitor-danger: #c3322a;
  --monitor-danger-text: #a6251f;
  --monitor-danger-soft: #fde8e7;
  --monitor-neutral-text: #4b5563;
  --monitor-neutral-soft: #e7ebf0;
  min-height: 100vh;
  margin: 0;
  background: var(--monitor-bg);
  color: var(--monitor-text);
  color-scheme: light;
}
html[data-monitoring-theme="dark"] .monitoring-console {
  --accent: #4bb5ff;
  --monitor-accent-contrast: #041423;
  --surface: #111923;
  --surface-2: #172230;
  --border: #29384a;
  --text-1: #edf4fc;
  --text-2: #b3c0d0;
  --text-3: #8797aa;
  --monitor-bg: #080d14;
  --monitor-surface: #111923;
  --monitor-surface-soft: #172230;
  --monitor-border: #29384a;
  --monitor-border-strong: #3b4d63;
  --monitor-text: #edf4fc;
  --monitor-text-soft: #d6e0ec;
  --monitor-muted: #b3c0d0;
  --monitor-subtle: #8797aa;
  --monitor-success: #4ade80;
  --monitor-success-text: #86efac;
  --monitor-success-soft: #123523;
  --monitor-warning: #fbbf24;
  --monitor-warning-text: #fcd34d;
  --monitor-warning-soft: #3b2b0d;
  --monitor-danger: #fb7185;
  --monitor-danger-text: #fda4af;
  --monitor-danger-soft: #421b24;
  --monitor-neutral-text: #c3cedb;
  --monitor-neutral-soft: #263241;
  color-scheme: dark;
}
.monitoring-console-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; padding: .7rem clamp(1rem,3vw,2.5rem); border-bottom: 1px solid var(--monitor-border); background: color-mix(in srgb,var(--monitor-surface) 94%,transparent); backdrop-filter: blur(14px); }
.monitoring-console-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--monitor-text); text-decoration: none; }
.monitoring-console-brand img { width: 38px; height: 38px; object-fit: contain; }
.monitoring-console-brand span,.monitoring-console-brand strong,.monitoring-console-brand small { display: block; }
.monitoring-console-brand strong { font-size: .96rem; }
.monitoring-console-brand small { margin-top: .08rem; color: var(--monitor-muted); font-size: .68rem; }
.monitoring-console-session,.monitoring-console-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.monitoring-console-session form { margin: 0; }
.monitoring-signout,.monitoring-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 .8rem; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--monitor-accent-contrast); font: inherit; font-size: .74rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.monitoring-button--quiet,.monitoring-signout { background: var(--monitor-surface); color: var(--monitor-text-soft); }
.monitoring-theme-toggle { min-height: 34px; padding: 0 .7rem; border: 1px solid var(--monitor-border-strong); border-radius: 9px; background: var(--monitor-surface); color: var(--monitor-text-soft); font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.monitoring-signout:hover,.monitoring-button:hover,.monitoring-theme-toggle:hover { filter: brightness(1.06); }
.monitoring-signout:focus-visible,.monitoring-button:focus-visible,.monitoring-theme-toggle:focus-visible,.monitoring-key-login input:focus-visible { outline: 3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset: 2px; }
.monitoring-console-main { width: min(1440px,calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.2rem,3vw,2.4rem) 0 3rem; }
.monitoring-console-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.monitoring-console-intro h1 { margin: 0; color: var(--monitor-text); font-size: clamp(1.65rem,3vw,2.4rem); letter-spacing: -.035em; }
.monitoring-console-intro p { margin: .4rem 0 0; color: var(--monitor-muted); }
.monitoring-panel { margin-top: 1rem; padding: 1.15rem; border: 1px solid var(--monitor-border); border-radius: 16px; background: var(--monitor-surface); box-shadow: 0 12px 32px rgba(23,32,51,.05); }
.monitoring-message { padding: 1rem; border-radius: 12px; background: var(--monitor-warning-soft); color: var(--monitor-warning-text); }
.monitoring-message--error { margin: 1rem 0; background: var(--monitor-danger-soft); color: var(--monitor-danger-text); }
.monitoring-key-login { width: min(560px,100%); margin: clamp(2rem,8vh,6rem) auto 0; padding: clamp(1.25rem,4vw,2rem); border: 1px solid var(--monitor-border); border-radius: 18px; background: var(--monitor-surface); box-shadow: 0 18px 50px rgba(23,32,51,.08); }
.monitoring-key-login h1 { margin: 0; color: var(--monitor-text); font-size: clamp(1.7rem,4vw,2.35rem); letter-spacing: -.035em; }
.monitoring-key-login > div > p { margin: .55rem 0 0; color: var(--monitor-muted); line-height: 1.55; }
.monitoring-key-login form { display: grid; gap: .7rem; margin-top: 1.25rem; }
.monitoring-key-login label { color: var(--monitor-text-soft); font-size: .76rem; font-weight: 750; }
.monitoring-key-login input[type="password"] { min-height: 46px; padding: 0 .85rem; border: 1px solid var(--monitor-border-strong); border-radius: 10px; background: var(--monitor-surface); color: var(--monitor-text); font: inherit; }
.monitoring-display-option { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; border: 1px solid var(--monitor-border); border-radius: 10px; background: var(--monitor-surface-soft); cursor: pointer; }
.monitoring-display-option input { width: 1rem; height: 1rem; margin: .12rem 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.monitoring-display-option span,.monitoring-display-option strong,.monitoring-display-option small { display: block; }
.monitoring-display-option strong { color: var(--monitor-text); }
.monitoring-display-option small { margin-top: .2rem; color: var(--monitor-muted); font-size: .68rem; font-weight: 500; line-height: 1.45; }
.monitoring-key-login .monitoring-button { min-height: 44px; }
.monitoring-key-help { margin: 1rem 0 .45rem; color: var(--monitor-muted); font-size: .75rem; line-height: 1.5; }
.monitoring-platform-login { color: var(--monitor-text-soft); font-size: .73rem; font-weight: 750; }
.monitoring-client-list,.monitoring-issue-list { display: grid; }
.monitoring-client-row,.monitoring-issue-row { display: grid; align-items: center; gap: 1rem; min-height: 68px; padding: .8rem .25rem; border-top: 1px solid var(--monitor-border); color: var(--monitor-text); text-decoration: none; }
.monitoring-client-row { grid-template-columns: minmax(220px,1fr) 90px 110px 18px; }
.monitoring-issue-row { grid-template-columns: 120px minmax(220px,1fr) 100px 18px; }
.monitoring-client-row:first-child,.monitoring-issue-row:first-child { border-top: 0; }
.monitoring-client-row:hover,.monitoring-issue-row:hover { background: var(--monitor-surface-soft); }
.monitoring-client-row div > strong,.monitoring-client-row div > span,.monitoring-issue-row div > strong,.monitoring-issue-row div > span { display: block; }
.monitoring-client-row div > span,.monitoring-issue-row div > span,.monitoring-last-contact { margin-top: .18rem; color: var(--monitor-subtle); font-size: .7rem; }
.monitoring-client-health { text-align: right; }
.monitoring-client-health strong { font-size: 1.05rem; }
.monitoring-client-health span { color: var(--monitor-subtle); font-size: .65rem; }
.monitoring-issue-count { justify-self: end; padding: .28rem .55rem; border-radius: 999px; background: var(--monitor-success-soft); color: var(--monitor-success-text); font-size: .68rem; font-weight: 800; }
.monitoring-issue-count.has-issues { background: var(--monitor-warning-soft); color: var(--monitor-warning-text); }
.monitoring-row-arrow { color: var(--monitor-subtle); font-size: 1.35rem; }
.monitoring-diagnostic { scroll-margin-top: 86px; border-color: var(--monitor-border-strong); }
.monitoring-diagnostic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.monitoring-diagnostic-head h2 { margin: .55rem 0 0; }
.monitoring-diagnostic-head p { margin: .25rem 0 0; color: var(--monitor-muted); }
.monitoring-diagnostic-copy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.monitoring-diagnostic-copy article { padding: 1rem; border-radius: 12px; background: var(--monitor-surface-soft); }
.monitoring-diagnostic-copy span { color: var(--monitor-subtle); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.monitoring-diagnostic-copy p { margin: .45rem 0 0; line-height: 1.55; }
.monitoring-diagnostic-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 1rem 0 0; border: 1px solid var(--monitor-border); border-radius: 12px; }
.monitoring-diagnostic-facts div { min-width: 0; padding: .8rem; border-left: 1px solid var(--monitor-border); }
.monitoring-diagnostic-facts div:first-child { border-left: 0; }
.monitoring-diagnostic-facts dt { color: var(--monitor-subtle); font-size: .65rem; }
.monitoring-diagnostic-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-size: .8rem; font-weight: 750; }
.monitoring-empty--healthy { color: var(--monitor-success-text); }
.monitoring-access-panel { max-width: 720px; padding: 1.5rem; }
.monitoring-access-panel h2 { margin: 1rem 0 .45rem; }
.monitoring-access-panel p { margin: 0 0 1rem; color: var(--monitor-muted); line-height: 1.55; }
.monitoring-header { align-items: flex-end; }
.monitoring-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.monitoring-security-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .7rem; border: 1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); border-radius: 999px; background: color-mix(in srgb,var(--accent) 10%,var(--surface)); color: var(--text-2); font-size: .7rem; font-weight: 750; }
.page-kicker { display: block; margin-bottom: .35rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.monitoring-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; margin: 1.2rem 0; }
.monitoring-stat-grid article { padding: 1.05rem 1.15rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.monitoring-stat-grid span { display: block; color: var(--text-2); font-size: .78rem; }
.monitoring-stat-grid strong { display: block; margin-top: .3rem; color: var(--text-1); font-size: 1.8rem; }
.monitoring-stat-grid strong small { color: var(--text-3); font-size: .85rem; }
.monitoring-stat-grid .has-alert strong { color: var(--monitor-danger); }
.monitoring-stat-grid .has-warning strong { color: var(--monitor-warning); }
.monitoring-network-panel,.monitoring-detail { padding: 1.25rem; }
.monitoring-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.monitoring-section-head h2 { margin: 0; }
.monitoring-section-head p { margin: .3rem 0 0; color: var(--text-2); }
.monitoring-refresh { color: var(--text-3); font-size: .74rem; }
.monitoring-network-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.monitoring-network-card { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.monitoring-network-card--attention { border-color: color-mix(in srgb,var(--monitor-danger) 45%,var(--border)); }
.monitoring-network-card--healthy { border-color: color-mix(in srgb,var(--monitor-success) 35%,var(--border)); }
.monitoring-network-card-head,.monitoring-card-foot { display: flex; justify-content: space-between; gap: .8rem; }
.monitoring-network-card h3 { margin: 0; font-size: 1rem; }
.monitoring-network-card-head div > span,.monitoring-card-foot span { color: var(--text-3); font-size: .7rem; }
.monitoring-state { align-self: flex-start; padding: .24rem .48rem; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: .66rem; font-weight: 700; }
.monitoring-health { display: flex; align-items: baseline; gap: .4rem; margin-top: 1rem; }
.monitoring-health strong { font-size: 1.7rem; }
.monitoring-health span { color: var(--text-3); font-size: .7rem; }
.monitoring-progress { height: 6px; margin: .45rem 0 .9rem; overflow: hidden; border-radius: 99px; background: var(--border); }
.monitoring-progress span { display: block; height: 100%; border-radius: inherit; background: var(--monitor-success); }
.monitoring-network-card dl { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 0 .9rem; }
.monitoring-network-card dl div { padding: .45rem; border-left: 1px solid var(--border); }
.monitoring-network-card dl div:first-child { border-left: 0; padding-left: 0; }
.monitoring-network-card dt { color: var(--text-3); font-size: .62rem; }
.monitoring-network-card dd { margin: .15rem 0 0; font-weight: 750; }
.monitoring-card-foot { align-items: center; padding-top: .75rem; border-top: 1px solid var(--border); }
.monitoring-card-foot a { font-size: .74rem; font-weight: 750; }
.monitoring-empty { display: grid; gap: .3rem; padding: 2.5rem; text-align: center; color: var(--text-2); }
.monitoring-detail { margin-top: 1rem; }
.monitoring-detail-facts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.monitoring-detail-facts div { min-width: 0; padding: .85rem 1rem; border-left: 1px solid var(--border); }
.monitoring-detail-facts div:first-child { border-left: 0; }
.monitoring-detail-facts dt { color: var(--text-3); font-size: .68rem; }
.monitoring-detail-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; color: var(--text-1); font-size: 1rem; font-weight: 760; }
.monitoring-location-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin-bottom: 1rem; }
.monitoring-location-grid article { display: flex; justify-content: space-between; gap: .75rem; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; }
.monitoring-location-grid article div span { display: block; margin-top: .15rem; color: var(--text-3); font-size: .68rem; }
.monitoring-location-grid article > span { font-size: .7rem; }
.monitoring-location-grid .is-online { color: var(--monitor-success); }.monitoring-location-grid .is-offline { color: var(--monitor-danger); }
.monitoring-table-wrap { overflow-x: auto; }
.monitoring-table-wrap td strong,.monitoring-table-wrap td small { display: block; }.monitoring-table-wrap td small { margin-top: .15rem; color: var(--text-3); }
.monitoring-screen-status { display: inline-flex; padding: .25rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 750; }
.monitoring-screen-status--online { color: var(--monitor-success-text); background: var(--monitor-success-soft); }.monitoring-screen-status--offline,.monitoring-screen-status--critical { color: var(--monitor-danger-text); background: var(--monitor-danger-soft); }.monitoring-screen-status--pending { color: var(--monitor-warning-text); background: var(--monitor-warning-soft); }.monitoring-screen-status--configuration { color: var(--monitor-neutral-text); background: var(--monitor-neutral-soft); }
@media(max-width:1100px){.monitoring-network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monitoring-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.monitoring-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.monitoring-detail-facts div{border-top:1px solid var(--border)}.monitoring-detail-facts div:nth-child(odd){border-left:0}}
@media(max-width:720px){.monitoring-console-bar,.monitoring-console-intro,.monitoring-diagnostic-head{align-items:stretch;flex-direction:column}.monitoring-console-session{justify-content:space-between}.monitoring-console-actions>*{flex:1}.monitoring-client-row,.monitoring-issue-row{grid-template-columns:1fr auto}.monitoring-client-health,.monitoring-last-contact{display:none}.monitoring-issue-row .monitoring-screen-status{justify-self:start}.monitoring-diagnostic-copy,.monitoring-diagnostic-facts,.monitoring-detail-facts{grid-template-columns:1fr}.monitoring-diagnostic-facts div,.monitoring-detail-facts div{border-top:1px solid var(--monitor-border);border-left:0}.monitoring-diagnostic-facts div:first-child,.monitoring-detail-facts div:first-child{border-top:0}.monitoring-header,.monitoring-section-head{align-items:stretch;flex-direction:column}.monitoring-header-actions{align-items:stretch;justify-content:flex-start}.monitoring-security-badge{justify-content:center}.monitoring-network-grid,.monitoring-location-grid,.monitoring-stat-grid{grid-template-columns:1fr}.monitoring-network-card dl{grid-template-columns:repeat(2,1fr)}}