:root {
  --panel: var(--surface);
  --panel-sub: var(--surface-2);
  --panel-hover: #271e3b;
  --line-strong: #57436f;
  --text-soft: var(--text);
  --dim: var(--muted);
  --purple: var(--violet);
  --purple-glow: rgba(160,107,255,.18);
  --green-glow: rgba(74,222,128,.12);
  --amber: var(--gold);
  --amber-glow: rgba(245,185,66,.12);
  --red-glow: rgba(248,113,113,.12);
  --cyan: var(--violet);
  --font-main: var(--font-display);
  color-scheme: dark;
}

.dashboard-shell {
  max-width: 1420px;
  width: calc(100% - 24px);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
  gap: 8px;
}

/* ==========================================================================
   TOPBAR COMPACT (~44px)
   ========================================================================== */
.topbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Server IP Chip */
.ip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--panel-sub);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  transition: all .15s ease;
}
.ip-chip:hover {
  background: var(--panel-hover);
  border-color: var(--purple);
  color: #fff;
}
.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.chip-label { font-weight: 600; }
.chip-copy-hint {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--dim);
  letter-spacing: .05em;
  border-left: 1px solid var(--line-strong);
  padding-left: 6px;
}
.ip-chip.copied {
  border-color: var(--green);
  color: var(--green);
}
.ip-chip.copied .chip-copy-hint {
  color: var(--green);
}

/* Global status pill */
.global-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  transition: all .2s ease;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
}
.global-pill.operational {
  background: var(--green-glow);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--green);
}
.global-pill.operational .status-dot {
  box-shadow: 0 0 6px var(--green);
  animation: pulse-green 2s infinite;
}
.global-pill.partial, .global-pill.investigating {
  background: var(--amber-glow);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--amber);
}
.global-pill.degraded, .global-pill.major_outage {
  background: var(--red-glow);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--red);
}
.global-pill.loading {
  color: var(--muted);
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.15); }
}

/* Live clock & refresh */
.live-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}
.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px var(--green);
  animation: pulse-green 1.5s infinite;
}
.live-text {
  text-transform: uppercase;
  letter-spacing: .05em;
}
.countdown-badge {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--panel-sub);
  border: 1px solid var(--line);
  color: var(--cyan);
  font-weight: 700;
}
.timestamp {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
}
.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--panel-sub);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  transition: all .15s ease;
}
.btn-refresh:hover:not(:disabled) {
  background: var(--panel-hover);
  border-color: var(--line-strong);
  color: #fff;
}
.btn-refresh:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.btn-refresh.spinning svg {
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   DASHBOARD CONTENT
   ========================================================================== */
.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* ==========================================================================
   ROW 1: KPI SUMMARY CARDS (~140px)
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 126px;
  transition: border-color .15s ease;
}
.card:hover {
  border-color: var(--line-strong);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.state-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--panel-sub);
  border: 1px solid var(--line);
}
.state-pill.operational { color: var(--green); border-color: rgba(16,185,129,0.3); background: var(--green-glow); }
.state-pill.partial, .state-pill.investigating { color: var(--amber); border-color: rgba(245,158,11,0.3); background: var(--amber-glow); }
.state-pill.degraded, .state-pill.major_outage { color: var(--red); border-color: rgba(239,68,68,0.3); background: var(--red-glow); }

.badge-accent {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
}

.health-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.health-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.health-score-wrap strong {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--green);
}
.score-den {
  font-size: 11px;
  color: var(--dim);
  font-family: var(--font-mono);
}
.health-meta {
  flex: 1;
  min-width: 0;
}
.scale-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 5px;
}
.scale-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--amber) 50%, var(--green));
  transition: width .4s ease;
}
.health-desc {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kpi-hero {
  display: flex;
  flex-direction: column;
}
.kpi-hero strong {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.hero-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.kpi-sublist {
  display: flex;
  gap: 8px;
}
.sub-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sub-metric span {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--dim);
  text-transform: uppercase;
}
.sub-metric strong {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-soft);
}

.progress-line {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 2px;
  transition: width .3s ease;
}

.card-foot-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 5px;
}
.sub-hint {
  color: var(--dim);
  font-size: 9px;
}
.probe-pill {
  color: var(--cyan);
}

/* ==========================================================================
   ROW 2: CHARTS (SIDE-BY-SIDE) & 90-DAY UPTIME (~185px)
   ========================================================================== */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 8px;
}

.chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  transition: border-color .15s ease;
}
.chart-card:hover {
  border-color: var(--line-strong);
}

.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.chart-head h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}
.chart-head small {
  font-size: 10px;
  color: var(--muted);
}
.chart-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
}
#scoreValue {
  color: var(--green);
}

.canvas-wrap {
  width: 100%;
  height: 105px;
  position: relative;
}
.canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--dim);
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.guide-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}
.guide-dot {
  display: inline-block;
  width: 6px;
  height: 2px;
  border-radius: 1px;
}
.dot-ideal { background: var(--green); }
.dot-max { background: var(--red); }
.dot-75 { background: var(--amber); }

/* ==========================================================================
   ROW 3: HIGH-DENSITY TELEMETRY GRID (~60px)
   ========================================================================== */
.telemetry-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
}
.telemetry-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--dim);
  margin-bottom: 6px;
}
.telemetry-rate {
  color: var(--cyan);
}

.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.tel-item {
  background: var(--panel-sub);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}
.tel-item:hover {
  border-color: var(--line-strong);
}
.tel-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tel-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
  white-space: nowrap;
}
.tel-unit {
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
}

/* ==========================================================================
   FOOTER COMPACT (~22px)
   ========================================================================== */
.dash-footer {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  padding: 0 4px;
}
.dash-footer a {
  color: var(--purple);
}
.dash-footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .charts-row {
    grid-template-columns: 1fr 1fr;
  }
  .telemetry-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .topbar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
    gap: 8px;
  }
  .topbar-left, .topbar-right {
    justify-content: space-between;
  }
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .charts-row {
    grid-template-columns: 1fr;
  }
  .telemetry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-footer {
    height: auto;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared Pexal typography, spacing and navigation. */
.dashboard-shell{max-width:var(--max);width:100%;min-height:0;padding:clamp(2rem,5vw,3.5rem) clamp(1.1rem,4vw,2.5rem) 0;gap:1.5rem;position:relative;z-index:1}
.status-heading h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:1rem}
.status-heading>p:last-child{color:var(--muted);font-size:1.05rem}
.topbar{height:auto;min-height:3rem;padding:0 0 1rem;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;flex-wrap:wrap;gap:1rem}
.topbar-left,.topbar-right{flex-wrap:wrap;gap:.8rem}
.global-pill{font-size:.85rem;border-radius:.5rem;padding:.45rem .7rem}
.ip-chip,.btn-refresh{font-family:var(--font-display);font-size:.85rem;padding:.6rem .8rem;border-radius:.5rem}
.chip-copy-hint,.live-clock,.timestamp{font-size:.75rem}
.dashboard-content{gap:1.5rem}
.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.dashboard-shell .card{clip-path:none;padding:1.25rem;min-height:170px;gap:1rem}
.card-tag{font-family:var(--font-display);font-size:.85rem;letter-spacing:0;text-transform:none}
.state-pill{font-size:.75rem}
.badge-accent,.hero-label,.sub-metric span,.card-foot-line,.health-desc{font-size:.8rem}
.health-desc{white-space:normal;line-height:1.5}
.health-score-wrap strong{font-family:var(--font-display);font-size:2.3rem}
.kpi-hero strong{font-family:var(--font-display);font-size:1.8rem}
.kpi-sublist{gap:1rem}
.sub-metric strong{font-size:.9rem}
.card-foot-line{font-family:var(--font-display);flex-wrap:wrap;gap:.4rem;padding-top:.8rem}
.sub-hint{font-size:.75rem}
.charts-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}

.chart-card,.uptime-card{padding:1.25rem;gap:.6rem}
.chart-head h3{font-size:1.05rem}
.chart-head small{font-size:.8rem}
.chart-val{font-size:1rem}
.canvas-wrap{height:160px}
.chart-foot{font-size:.7rem;gap:.7rem;flex-wrap:wrap}
.telemetry-section{padding:1.25rem}
.telemetry-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.telemetry-bar-head{font-family:var(--font-display);font-size:.8rem;letter-spacing:0;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.tel-item{border:0;background:transparent;border-radius:0;border-bottom:1px solid var(--line);padding:.5rem 0}
.tel-label{font-family:var(--font-display);font-size:.75rem;text-transform:none}
.tel-val{font-size:.95rem}
.dash-footer{height:auto;min-height:5rem;border-top:1px solid var(--line);font-family:var(--font-display);font-size:.85rem;padding:1.5rem 0;margin-top:1rem;gap:1rem}
@media(max-width:768px){
  .topbar{padding:0 0 1rem}
  .topbar-left,.topbar-right{justify-content:flex-start}
  .kpi-grid,.charts-row{grid-template-columns:1fr}
  .telemetry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-main,.health-main{flex-wrap:wrap}
  .kpi-sublist{flex-wrap:wrap}
  .sub-metric{align-items:flex-start}
  .global-pill{max-width:100%}
  .dash-footer{align-items:flex-start;text-align:left}
}