:root {
  --bg:        #0b0f14;
  --bg-soft:   #111823;
  --bg-card:   #151d29;
  --border:    #1f2a3a;
  --text:      #e6edf5;
  --text-dim:  #94a3b8;
  --text-mute: #64748b;

  --op:       #22c55e;
  --degraded: #f59e0b;
  --partial:  #f97316;
  --major:    #ef4444;
  --maint:    #3b82f6;
  --nodata:   #374151;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
}
.brand-suffix {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: .01em;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  line-height: 1;
}

.banner {
  border-radius: 12px;
  border: 1px solid;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
}
.banner-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #0b0f14;
  flex-shrink: 0;
}
.banner-body { flex: 1; }
.banner-title { font-size: 17px; font-weight: 600; }
.banner-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.banner-sub strong { color: var(--text); font-weight: 600; }

.banner.op        { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.35); }
.banner.op .banner-title { color: #86efac; }
.banner.op .banner-icon  { background: var(--op); }

.banner.degraded  { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); }
.banner.degraded .banner-title { color: #fcd34d; }
.banner.degraded .banner-icon  { background: var(--degraded); }

.banner.partial   { background: rgba(249,115,22,.10); border-color: rgba(249,115,22,.35); }
.banner.partial .banner-title { color: #fdba74; }
.banner.partial .banner-icon  { background: var(--partial); }

.banner.major     { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.35); }
.banner.major .banner-title { color: #fca5a5; }
.banner.major .banner-icon  { background: var(--major); }

.banner.maint     { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.35); }
.banner.maint .banner-title { color: #93c5fd; }
.banner.maint .banner-icon  { background: var(--maint); }

.banner.nodata    { background: var(--bg-soft); border-color: var(--border); }
.banner.nodata .banner-title { color: var(--text); }
.banner.nodata .banner-icon  { background: var(--nodata); color: #94a3b8; }

.groups { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }

.group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.group-title {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  text-transform: uppercase; letter-spacing: .06em;
}
.group-count { font-size: 12px; color: var(--text-mute); }

.component { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.component:last-child { border-bottom: none; }
.component-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.component-name { color: var(--text); font-weight: 500; }
.component-desc { color: var(--text-mute); font-size: 12px; margin-top: 2px; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.pill.op        { color: #86efac; background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.30); }
.pill.degraded  { color: #fcd34d; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); }
.pill.partial   { color: #fdba74; background: rgba(249,115,22,.10); border-color: rgba(249,115,22,.30); }
.pill.major     { color: #fca5a5; background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.30); }
.pill.maint     { color: #93c5fd; background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.30); }
.pill.nodata    { color: #94a3b8; background: var(--bg-soft);       border-color: var(--border); }

.bar { display: flex; align-items: stretch; gap: 2px; height: 32px; }
.bar-day {
  flex: 1;
  min-width: 3px;
  border-radius: 2px;
  transition: filter .15s;
}
.bar-day:hover { filter: brightness(1.35); }
.bar-day.op       { background: rgba(34,197,94,.85); }
.bar-day.degraded { background: var(--degraded); }
.bar-day.partial  { background: var(--partial); }
.bar-day.major    { background: var(--major); }
.bar-day.maint    { background: var(--maint); }
.bar-day.nodata   { background: var(--nodata); }

.bar-caption {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-mute);
}
.bar-caption .center { color: var(--text-dim); }

.footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-mute);
}
.footer a:hover { color: var(--text-dim); }