:root {
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#e8eee9;
  background:#0d1514;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:radial-gradient(circle at 12% -10%,#18372e 0,transparent 38%),radial-gradient(circle at 90% 10%,#182923 0,transparent 28%),#0d1514;
  min-height:100vh;
}

.shell {
  max-width:1440px;
  padding:0 42px;
  margin:0 auto;
}

.topbar {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #24352e;
  gap:20px;
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:650;
  font-size:14px;
  letter-spacing:.01em;
  color:#dce8df;
  white-space:nowrap;
}

.brand i {
  font-style:normal;
  color:#547063;
  margin:0 4px;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#d7ed9a;
  color:#17251b;
  font-weight:800;
  font-size:13px;
  letter-spacing:-.07em;
}

.brand-mark span {
  font-size:10px;
  padding:0 1px;
}

.top-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

.live-tag,.quiet-button,.action-button {
  border:1px solid #31463b;
  border-radius:9px;
  height:36px;
  padding:0 13px;
  background:#14221c;
  color:#dbe7d9;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.live-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#bfdac2;
}

.live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d4b76c;
  box-shadow:0 0 0 3px #d4b76c1c;
}

.live-tag.good .live-dot {
  background:#99db9c;
  box-shadow:0 0 0 3px #99db9c24;
}

.live-tag.bad .live-dot {
  background:#efaa86;
  box-shadow:0 0 0 3px #efaa8624;
}

.quiet-button,.action-button {
  cursor:pointer;
}

.quiet-button:hover {
  background:#1d3328;
}

.action-button {
  background:#d6e998;
  border-color:#d6e998;
  color:#1a261c;
}

.action-button:hover {
  background:#e1f3a7;
}

.quiet-button:disabled,.action-button:disabled {
  opacity:.55;
  cursor:wait;
}

.heading-row {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  padding:55px 0 38px;
}

.eyebrow {
  margin:0 0 11px;
  color:#97bc96;
  font-weight:750;
  letter-spacing:.19em;
  font-size:10px;
}

.eyebrow span {
  color:#557b65;
  margin:0 3px;
}

h1,h2,p {
  margin-top:0;
}

h1 {
  font-size:clamp(46px,5.4vw,74px);
  line-height:1;
  letter-spacing:-.065em;
  font-weight:670;
  margin:0 0 17px;
}

.heading-period {
  color:#d5e994;
}

.lede {
  max-width:610px;
  color:#9fb1a5;
  line-height:1.6;
  font-size:14px;
  margin:0;
}

.update {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  color:#7f9789;
  font-size:11px;
  white-space:nowrap;
}

.update-label,.metric>span,.period-label {
  font-size:10px;
  letter-spacing:.14em;
  font-weight:750;
  color:#799a83;
}

.update strong {
  color:#dce9dc;
  font-size:13px;
  font-weight:650;
}

.notice {
  border:1px solid #8b6543;
  background:#33271b;
  color:#eac596;
  padding:13px 16px;
  border-radius:10px;
  margin-bottom:20px;
  font-size:12px;
}

.summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.metric,.panel,.host-card {
  border:1px solid #284034;
  background:#15231d;
  border-radius:14px;
  box-shadow:0 12px 38px #06100b22;
}

.metric {
  padding:19px 22px 17px;
  min-height:132px;
  display:flex;
  flex-direction:column;
}

.metric strong {
  font-size:42px;
  line-height:1.1;
  font-weight:660;
  letter-spacing:-.055em;
  margin:11px 0 7px;
  color:#f2f5e9;
}

.metric small {
  font-size:11px;
  color:#839b89;
}

.section-head,.panel-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}

.section-head {
  margin:49px 0 17px;
}

.section-head .eyebrow,.panel-head .eyebrow {
  margin-bottom:7px;
}

.section-head h2,.panel h2 {
  font-size:23px;
  letter-spacing:-.035em;
  font-weight:650;
  margin:0;
}

.section-head>p {
  font-size:12px;
  color:#809688;
  margin:0 0 3px;
}

.hosts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.group-heading {
  grid-column:1/-1;
  margin:13px 0 0;
  display:flex;
  align-items:center;
  gap:12px;
  color:#b9cbbc;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:10px;
  font-weight:760;
}

.group-heading:first-child {
  margin-top:0;
}

.group-heading:after {
  content:"";
  height:1px;
  background:#284034;
  flex:1;
}

.host-card {
  padding:18px 20px 17px;
  min-height:188px;
}

.host-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.host-name {
  font-size:17px;
  font-weight:680;
  letter-spacing:-.025em;
}

.status {
  font-size:10px;
  font-weight:760;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:5px 8px;
  border-radius:6px;
  color:#9cdfa7;
  background:#1d3c2b;
}

.status.bad {
  color:#ffc09f;
  background:#3b291f;
}

.host-value {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:22px 0 14px;
}

.host-value strong {
  font-size:32px;
  letter-spacing:-.04em;
  line-height:1;
}

.host-value span {
  font-size:11px;
  color:#879f8e;
}

.host-meta {
  padding-top:13px;
  border-top:1px solid #2a4035;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#95a99a;
  font-size:11px;
  line-height:1.35;
}

.host-meta b {
  color:#d4e3d2;
  font-weight:600;
}

.host-meta .missing {
  color:#e9b18b;
}

.lower-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
  margin-top:42px;
}

.panel {
  padding:21px 22px 18px;
  min-height:225px;
}

.panel-intro {
  font-size:12px;
  line-height:1.55;
  color:#8da293;
  margin:15px 0 15px;
}

.period-label {
  font-size:9px;
  white-space:nowrap;
}

.empty {
  padding:30px 0;
  color:#809688;
  font-size:13px;
  line-height:1.5;
}

.route-row,.issue-row,.take-row {
  display:grid;
  align-items:center;
  border-top:1px solid #273a30;
  padding:12px 0;
  gap:12px;
  font-size:12px;
}

.route-row {
  grid-template-columns:1fr auto;
}

.route-name {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.route-name .version {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dce8dc;
}

.route-name .profile,.take-row .profile {
  font-size:10px;
  color:#b4d4ad;
  background:#25402d;
  padding:4px 6px;
  border-radius:5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:750;
}

.route-count {
  color:#e1ecdb;
  font-weight:700;
}

.route-group {
  font-size:10px;
  color:#789985;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:750;
  margin:22px 0 6px;
}

.route-group:first-child {
  margin-top:4px;
}

.issue-row {
  grid-template-columns:68px 1fr auto;
}

.issue-category {
  font-weight:600;
  color:#e6c0a3;
}

.issue-host,.take-host {
  color:#8ca591;
}

.issue-time,.take-time {
  color:#8ca591;
  text-align:right;
}

.activity {
  margin-top:12px;
  margin-bottom:34px;
  min-height:180px;
}

.take-row {
  grid-template-columns:75px 75px 65px minmax(120px,1fr) 90px 60px;
}

.take-version {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dbe8d8;
}

.take-outcome {
  color:#a6cba8;
}

.take-outcome.changed {
  color:#e7d5a4;
}

.take-latency {
  text-align:right;
  color:#8ca591;
}

footer {
  border-top:1px solid #26382e;
  padding:23px 0 34px;
  color:#627f6e;
  font-size:11px;
  line-height:1.5;
}

@media(max-width:1050px) {
  .hosts {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .summary {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lower-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:650px) {
  .shell {
    padding:0 18px;
  }
  .topbar {
    height:auto;
    padding:16px 0;
    align-items:flex-start;
    flex-direction:column;
  }
  .top-actions {
    width:100%;
    flex-wrap:wrap;
  }
  .heading-row {
    padding:39px 0 30px;
    align-items:flex-start;
    flex-direction:column;
  }
  .update {
    align-items:flex-start;
  }
  .summary {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .metric {
    padding:15px;
    min-height:116px;
  }
  .metric strong {
    font-size:34px;
  }
  .hosts {
    grid-template-columns:1fr;
  }
  .section-head>p {
    display:none;
  }
  .panel {
    padding:18px;
  }
  .panel-head {
    align-items:flex-start;
  }
  .period-label {
    display:none;
  }
  .take-row {
    grid-template-columns:55px 65px 58px minmax(70px,1fr);
  }
  .take-row .take-outcome,.take-row .take-latency {
    display:none;
  }
}
/* The admin page reveals operational data only after the server sets a session. */
.auth-gate[hidden], .shell[hidden], [hidden] { display: none !important; }
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 480px); padding: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #17202a; }
.auth-card .brand-mark { margin-bottom: 30px; }
.auth-card h1 { margin: 12px 0; }
.auth-card p { line-height: 1.5; }
.auth-card .action-button { display: inline-block; margin-top: 16px; text-decoration: none; }
.auth-code { font-size: 1.2rem; letter-spacing: .1em; font-weight: 700; }