:root {
  --bg: #090c10;
  --panel: #11161c;
  --panel-2: #151c24;
  --border: #26313d;
  --text: #f4f7fb;
  --muted: #8997a7;
  --orange: #ff7a1a;
  --green: #64d78a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% -10%, rgba(255,122,26,.12), transparent 30rem),
    linear-gradient(180deg, #0b0f14 0%, var(--bg) 60%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.topbar, main, footer { width: min(1400px, calc(100% - 40px)); margin-inline: auto; }
.topbar {
  display:flex; justify-content:space-between; align-items:flex-end;
  padding: 42px 0 28px; border-bottom:1px solid var(--border);
}
h1 { margin: 2px 0 5px; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing:-.045em; }
h2 { margin: 0; font-size: 1.15rem; }
.eyebrow { color: var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.16em; margin:0 0 8px; }
.subhead,.meta { color:var(--muted); }
.subhead { margin:0; }
.status-pill {
  display:flex; gap:9px; align-items:center; color:#b9c6d3; border:1px solid var(--border);
  background:rgba(17,22,28,.8); border-radius:99px; padding:10px 14px; font-size:.8rem;
}
.status-pill span,.platform-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(100,215,138,.6); }
main { padding: 28px 0 20px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.card {
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg, rgba(21,28,36,.92), rgba(17,22,28,.92));
  box-shadow:0 20px 60px rgba(0,0,0,.16);
}
.hero-stat { padding:20px; min-height:150px; }
.hero-stat.accent { border-color:rgba(255,122,26,.55); }
.label { color:#aab6c3; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.value { font-size:2.65rem; font-weight:800; letter-spacing:-.05em; margin:12px 0 7px; }
.meta { font-size:.82rem; line-height:1.5; }
.platform-card { padding:18px 20px; }
.platform-head { display:flex; justify-content:space-between; align-items:center; }
.platform-count { font-size:2rem; font-weight:800; margin:14px 0 4px; }
.chart-card { margin-top:14px; padding:20px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-head.compact { margin-bottom:18px; }
.range-controls { display:flex; flex-wrap:wrap; gap:8px; }
.range-controls button {
  border:1px solid var(--border); background:#0e1319; color:#788697;
  padding:8px 12px; border-radius:9px;
}
.range-controls button.active { border-color:rgba(255,122,26,.5); color:var(--orange); }
.chart-wrap { position:relative; height:330px; margin-top:20px; }
#populationChart { opacity:.16; }
.empty-chart {
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:7px;
  color:#d9e1e9;
}
.empty-chart span { color:var(--muted); font-size:.85rem; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.lower-grid > .card { padding:20px; }
.health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.health-grid div { background:#0d1217; border:1px solid #202a34; border-radius:10px; padding:14px; }
.health-grid span { display:block; color:var(--muted); font-size:.76rem; }
.health-grid strong { display:block; margin-top:6px; font-size:1.35rem; }
.worker-row { display:flex; justify-content:space-between; border-top:1px solid #202a34; padding:10px 0; }
footer { color:#536170; text-align:center; padding:28px 0 45px; font-size:.76rem; }

@media (max-width: 950px) {
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .platform-grid,.lower-grid { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; gap:18px; flex-direction:column; }
}
@media (max-width: 560px) {
  .topbar, main, footer { width:min(100% - 24px, 1400px); }
  .stat-grid { grid-template-columns:1fr; }
  .section-head { align-items:flex-start; flex-direction:column; }
}

.coverage-track {
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: #0b1015;
  border: 1px solid #202a34;
}
.coverage-track span {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: inherit;
}
.mini-badge {
  color: var(--green);
  background: rgba(100,215,138,.08);
  border: 1px solid rgba(100,215,138,.25);
  border-radius: 99px;
  padding: 6px 9px;
  font-size: .72rem;
  font-weight: 700;
}
.health-note { margin: 14px 0 0; }
.worker-row > div { display: grid; gap: 3px; }
.worker-row small { color: var(--muted); }
.lease-list { margin-top: 10px; border-top: 1px solid #202a34; padding-top: 8px; }
.lease-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .8rem; }
.lease-row span { color: var(--muted); }
code { color: #d5dee7; }

/* Phase 1 cluster health */
.cluster-card { margin-top:14px; padding:20px; }
.cluster-head { margin-bottom:18px; }
.cluster-status,
.worker-state {
  border-radius:99px;
  padding:6px 10px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  border:1px solid var(--border);
}
.status-healthy,.state-healthy { color:var(--green); background:rgba(100,215,138,.08); border-color:rgba(100,215,138,.25); }
.status-warning,.state-warning { color:#f0c35c; background:rgba(240,195,92,.08); border-color:rgba(240,195,92,.28); }
.status-degraded,.state-stale,.state-unknown { color:#ff7f73; background:rgba(255,127,115,.08); border-color:rgba(255,127,115,.28); }
.state-draining { color:var(--orange); background:rgba(255,122,26,.08); border-color:rgba(255,122,26,.28); }
.state-disabled { color:var(--muted); background:rgba(137,151,167,.08); }
.cluster-summary { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.cluster-summary div { background:#0d1217; border:1px solid #202a34; border-radius:10px; padding:14px; }
.cluster-summary span { display:block; color:var(--muted); font-size:.74rem; }
.cluster-summary strong { display:block; margin-top:5px; font-size:1.35rem; }
.cluster-note { margin:14px 0 0; }
.worker-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.worker-tile { background:#0d1217; border:1px solid #202a34; border-radius:12px; padding:14px; }
.worker-title { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.worker-title > div { display:grid; gap:3px; }
.worker-title small,.worker-meta { color:var(--muted); }
.worker-meta { display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-size:.75rem; }
.lease-panel { margin-top:14px; border-top:1px solid #202a34; padding-top:12px; }
.lease-title { color:#aab6c3; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.lower-grid.single { grid-template-columns:1fr; }

@media (max-width: 950px) {
  .cluster-summary { grid-template-columns:repeat(3,1fr); }
  .worker-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .cluster-summary { grid-template-columns:repeat(2,1fr); }
  .worker-meta { flex-direction:column; }
}

/* v0.2.1 compact operator worker rows */
.worker-list {
  margin-top:14px;
  border:1px solid #202a34;
  border-radius:12px;
  overflow:hidden;
  background:#0d1217;
}
.worker-line {
  display:grid;
  grid-template-columns:minmax(76px, .7fr) minmax(118px, 1fr) auto minmax(300px, 3fr) auto;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  font-size:.76rem;
  border-top:1px solid #202a34;
}
.worker-line:first-child { border-top:0; }
.worker-id { font-size:.82rem; white-space:nowrap; }
.worker-site,.worker-roles,.worker-heartbeat { color:var(--muted); }
.worker-site,.worker-heartbeat { white-space:nowrap; }
.worker-roles { min-width:0; }
.worker-line .worker-state { justify-self:start; white-space:nowrap; padding:4px 8px; }

@media (max-width: 950px) {
  .worker-line {
    grid-template-columns:auto auto 1fr auto;
  }
  .worker-roles {
    grid-column:1 / -1;
  }
}
@media (max-width: 560px) {
  .worker-line {
    display:flex;
    flex-wrap:wrap;
    gap:7px 10px;
  }
  .worker-roles { flex-basis:100%; }
  .worker-heartbeat { margin-left:auto; }
}


/* v0.3.0 cluster observability redesign */
.cluster-card { padding:22px; }
.cluster-head { margin-bottom:18px; }
.cluster-status { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; }
.cluster-status .status-dot,
.table-state .state-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; flex:0 0 auto; }
.cluster-summary-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.cluster-metric {
  min-height:126px; padding:15px 16px; border-radius:13px; border:1px solid #2a3541;
  background:linear-gradient(180deg, rgba(20,27,35,.96), rgba(14,20,26,.96));
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; column-gap:13px; align-items:center;
}
.cluster-metric .metric-icon { font-size:2rem; line-height:1; font-weight:600; opacity:.95; }
.cluster-metric .metric-main { display:grid; gap:1px; }
.cluster-metric .metric-main strong { font-size:1.95rem; line-height:1; letter-spacing:-.04em; }
.cluster-metric .metric-main span { color:#d5dde6; font-size:.9rem; }
.cluster-metric small { grid-column:1 / -1; align-self:end; color:var(--muted); font-size:.72rem; line-height:1.35; }
.metric-workers .metric-icon { color:#4d8cff; }
.metric-healthy .metric-icon { color:var(--green); }
.metric-warning .metric-icon { color:#f0bd4f; }
.metric-stale .metric-icon { color:#ff625c; }
.metric-draining .metric-icon { color:#b177ff; }
.metric-leases .metric-icon { color:#56d7e8; }

.cluster-detail-panel { margin-top:18px; border:1px solid #26313d; border-radius:13px; background:rgba(12,17,22,.42); overflow:hidden; }
.cluster-detail-panel h3 { margin:0; padding:16px 16px 13px; font-size:1rem; border-bottom:1px solid #26313d; }
.table-scroll { overflow-x:auto; }
.cluster-table { width:100%; border-collapse:collapse; min-width:980px; font-size:.78rem; }
.cluster-table th { color:#9eacba; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; text-align:left; padding:11px 14px; background:rgba(16,22,28,.78); white-space:nowrap; }
.cluster-table td { padding:11px 14px; border-top:1px solid #26313d; vertical-align:middle; color:#d7e0e8; }
.cluster-table tbody tr:hover { background:rgba(255,255,255,.018); }
.cluster-table .host-cell { color:#fff; font-weight:800; white-space:nowrap; }
.cluster-table .roles-cell { color:#bdc8d3; min-width:320px; }
.cluster-table .heartbeat-cell,
.cluster-table .expires-cell { color:var(--green); white-space:nowrap; }
.table-state { display:inline-flex; align-items:center; gap:7px; font-weight:700; white-space:nowrap; }
.table-state.state-healthy { background:none; border:0; padding:0; }
.table-state.state-warning { background:none; border:0; padding:0; }
.table-state.state-stale,
.table-state.state-unknown { background:none; border:0; padding:0; }
.table-state.state-draining { background:none; border:0; padding:0; }
.table-state.state-disabled { background:none; border:0; padding:0; }
.site-chip { display:inline-block; min-width:34px; padding:3px 6px; margin-right:6px; border-radius:5px; border:1px solid #334150; text-align:center; font-weight:800; font-size:.68rem; text-transform:lowercase; }
.site-hnl { color:#70a7ff; border-color:rgba(77,140,255,.35); background:rgba(77,140,255,.10); }
.site-kah { color:#c38aff; border-color:rgba(177,119,255,.35); background:rgba(177,119,255,.10); }
.site-mak { color:#65d985; border-color:rgba(100,215,138,.30); background:rgba(100,215,138,.08); }
.site-rnt { color:#ff9a4c; border-color:rgba(255,122,26,.32); background:rgba(255,122,26,.08); }
.lease-type-cell { font-weight:700; }
.lease-detail-panel { margin-top:12px; }
.cluster-footnote { margin-top:14px; color:var(--muted); font-size:.72rem; }

@media (max-width:1200px) {
  .cluster-summary-cards { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:700px) {
  .cluster-card { padding:16px; }
  .cluster-summary-cards { grid-template-columns:repeat(2,1fr); }
  .cluster-metric { min-height:112px; }
}
@media (max-width:430px) {
  .cluster-summary-cards { grid-template-columns:1fr; }
}


/* v0.3.1 cache-busted cluster layout refinement */
.cluster-card {
  margin-top: 14px;
  padding: 24px;
  overflow: hidden;
}
.cluster-card .cluster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.cluster-card .cluster-head h2 { margin-top: 3px; }
.cluster-summary-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(145px, 1fr));
  gap: 14px;
  width: 100%;
}
.cluster-metric {
  min-width: 0;
  min-height: 132px;
  padding: 17px;
  border: 1px solid #2a3541;
  border-radius: 14px;
  background: linear-gradient(180deg, #151c24 0%, #10161c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  align-items: center;
}
.cluster-metric .metric-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 1.75rem;
  line-height: 1;
}
.cluster-metric .metric-main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: end;
}
.cluster-metric .metric-main strong {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 1.9rem;
  line-height: 1;
}
.cluster-metric .metric-main span {
  align-self: end;
  color: #e2e8ef;
  font-size: .88rem;
  white-space: nowrap;
}
.cluster-metric small {
  grid-column: 1 / -1;
  align-self: end;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
}
.cluster-detail-panel {
  margin-top: 18px;
  border: 1px solid #293541;
  border-radius: 14px;
  background: #10161c;
  overflow: hidden;
}
.cluster-detail-panel h3 {
  margin: 0;
  padding: 17px 16px 14px;
  font-size: 1rem;
  border-bottom: 1px solid #293541;
}
.table-scroll { width: 100%; overflow-x: auto; }
.cluster-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: .78rem;
}
.cluster-table th {
  padding: 12px 15px;
  color: #9caab8;
  background: #111820;
  border-bottom: 1px solid #293541;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}
.cluster-table td {
  padding: 12px 15px;
  border-top: 1px solid #25303a;
  color: #d7e0e8;
  vertical-align: middle;
}
.cluster-table tbody tr:first-child td { border-top: 0; }
.cluster-table tbody tr:hover { background: rgba(255,255,255,.02); }
.worker-table th:nth-child(1), .worker-table td:nth-child(1) { width: 100px; }
.worker-table th:nth-child(2), .worker-table td:nth-child(2) { width: 120px; }
.worker-table th:nth-child(3), .worker-table td:nth-child(3) { width: 110px; }
.worker-table th:nth-child(4), .worker-table td:nth-child(4) { width: 105px; }
.worker-table th:nth-child(6), .worker-table td:nth-child(6) { width: 125px; }
.worker-table th:nth-child(7), .worker-table td:nth-child(7) { width: 85px; }
.cluster-table .host-cell { color: #fff; font-weight: 800; }
.cluster-table .location-cell { color: #c7d1dc; white-space: nowrap; }
.cluster-table .roles-cell { color: #c3ced9; white-space: nowrap; }
.cluster-table .heartbeat-cell,
.cluster-table .expires-cell { color: var(--green); white-space: nowrap; }
.table-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 700;
  white-space: nowrap;
}
.table-state .state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.lease-table th:nth-child(1), .lease-table td:nth-child(1) { width: 155px; }
.lease-table th:nth-child(2), .lease-table td:nth-child(2) { width: 170px; }
.lease-table th:nth-child(3), .lease-table td:nth-child(3) { width: 100px; }
.lease-table th:nth-child(4), .lease-table td:nth-child(4) { width: 130px; }
.lease-table th:nth-child(5), .lease-table td:nth-child(5) { width: 125px; }
.lease-table th:nth-child(6), .lease-table td:nth-child(6) { width: 125px; }
.cluster-footnote {
  margin-top: 15px;
  color: var(--muted);
  font-size: .72rem;
}

@media (max-width: 1280px) {
  .cluster-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cluster-card { padding: 16px; }
  .cluster-card .cluster-head { flex-direction: column; }
  .cluster-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .cluster-summary-cards { grid-template-columns: 1fr; }
}

/* Phase 2 population history */
.empty-chart[hidden] { display: none; }
.history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.history-legend { display: flex; gap: 18px; align-items: center; color: #b9c7d5; font-size: .78rem; }
.history-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.legend-dot.pc { background: #47a6ff; color: #47a6ff; }
.legend-dot.xbox { background: #64df8b; color: #64df8b; }
.legend-dot.ps { background: #ff8a2a; color: #ff8a2a; }
.range-controls button:not(:disabled) { cursor: pointer; }
.range-controls button:not(:disabled):hover { border-color: rgba(255,138,42,.65); color: #e7edf4; }