@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");

:root {
  --bg: #080d13;
  --panel: #0d141d;
  --panel-2: #101923;
  --text: #e8eaed;
  --muted: #9aa4b2;
  --line: #1b2633;
  --up: #5cdd8b;
  --up-soft: #9ee9b9;
  --down: #ef5b5b;
  --pending: #f7b955;
  --maintenance: #5aa9ff;
  --nodata: #2a3542;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(circle at 50% -20%, #101927 0, var(--bg) 42%);
  color: var(--text);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.page { width: min(1080px, calc(100% - 34px)); margin: 0 auto; padding: 38px 0 24px; }
.brand { display: flex; align-items: center; gap: 18px; margin: 0 4px 28px; }
.brand-logo { width: 80px; height: 80px; flex: 0 0 80px; object-fit: contain; border-radius: 0; display: block; image-rendering: auto; }
.brand h1 { font-size: 24px; line-height: 1; margin: 0; letter-spacing: 0; font-weight: 700; color: #e6e8eb; }

.overall {
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 0 20px; margin-bottom: 36px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}
.overall-icon { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; }
.overall strong { font-weight: 700; color: #e6e8eb; }
.overall.operational .overall-icon { background: var(--up); color: #06210f; }
.overall.degraded .overall-icon { background: var(--pending); color: #2b1c00; }
.overall.down .overall-icon { background: var(--down); color: #290000; }
.overall.unknown .overall-icon, .overall.loading .overall-icon { background: var(--nodata); color: var(--text); }

.group { margin: 0 0 34px; }
.group-title { margin: 0 0 14px; font-size: 19px; font-weight: 600; color: #e5e7eb; }
.group-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.monitor-row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px; align-items: center; min-height: 64px; padding: 10px 18px;
}
.monitor-row + .monitor-row { border-top: 1px solid rgba(255,255,255,.025); }
.monitor-info { min-width: 0; display: flex; align-items: center; gap: 7px; }
.uptime-pill {
  min-width: 53px; padding: 3px 7px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 800; color: #06210f; background: var(--up); line-height: 1.25;
}
.uptime-pill.warn { background: var(--pending); color: #2b1c00; }
.uptime-pill.bad { background: var(--down); color: #2b0000; }
.monitor-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 400; color: #d5dae1; }
.current-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nodata); flex: 0 0 auto; }
.current-dot.up { background: var(--up); }
.current-dot.down { background: var(--down); }
.current-dot.pending { background: var(--pending); }
.current-dot.maintenance { background: var(--maintenance); }

.timeline-wrap { min-width: 0; overflow-x: auto; padding: 5px 0 2px; scrollbar-width: thin; }
.timeline { min-width: 520px; display: grid; grid-template-columns: repeat(96, 1fr); gap: 2px; height: 17px; }
.segment { min-width: 2px; height: 17px; border-radius: 2px; background: var(--nodata); cursor: default; transition: transform .08s ease, filter .08s ease; }
.segment:hover { transform: scaleY(1.28); filter: brightness(1.22); }
.segment.up { background: var(--up); }
.segment.down { background: var(--down); }
.segment.pending { background: var(--pending); }
.segment.maintenance { background: var(--maintenance); }
.segment.nodata { background: var(--nodata); opacity: .6; }
.timeline-labels { min-width: 520px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 5px; }

.error { padding: 14px 16px; margin: 0 0 26px; border: 1px solid rgba(239,91,91,.4); background: rgba(239,91,91,.08); border-radius: 8px; color: #ffc4c4; }
.hidden { display: none !important; }
footer { text-align: center; color: var(--muted); font-size: 10px; line-height: 1.55; margin: 46px 0 4px; }
footer .source { opacity: .55; }

.tooltip {
  position: fixed; z-index: 1000; pointer-events: none; max-width: 290px; padding: 10px 12px;
  border: 1px solid #263445; border-radius: 7px; background: #111a24; color: var(--text);
  box-shadow: 0 14px 40px rgba(0,0,0,.4); font-size: 12px; line-height: 1.45;
}
.tooltip strong { display: block; margin-bottom: 5px; }
.tooltip .muted { color: var(--muted); }

@media (max-width: 760px) {
  .page { width: min(100% - 22px, 1080px); padding-top: 22px; }
  .monitor-row { grid-template-columns: 1fr; gap: 5px; padding: 13px 14px; }
  .overall { margin-bottom: 28px; }
  .group { margin-bottom: 26px; }
}