:root {
  --ink: #17212f;
  --muted: #6f7a8d;
  --line: #e1e5eb;
  --surface: #ffffff;
  --page: #f7f8fa;
  --online: #22b893;
  --online-soft: #dff8f0;
  --degraded: #f2a91e;
  --offline: #e45a54;
  --maintenance: #5b8def;
  --unverified: #a1a9b7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}
.page { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 28px; }
.site-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.brand { color: var(--ink); font-size: 1.55rem; font-weight: 760; letter-spacing: -.05em; text-decoration: none; }
.ops-link { border: 1px solid #2b3340; border-radius: 7px; color: #fff; background: #242a34; padding: 9px 13px; font-weight: 650; font-size: .9rem; text-decoration: none; }
.ops-link:hover { background: #11161e; }

.summary { display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 28px; background: var(--surface); }
.summary h1 { margin: 0 0 5px; font-size: 1.08rem; }
.summary p { margin: 0; }
.summary__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 800; flex: 0 0 auto; }
.summary--loading .summary__icon { background: var(--unverified); }
.summary--online { border-color: var(--online); background: linear-gradient(to bottom, var(--online-soft) 0 48%, var(--surface) 48%); }
.summary--online .summary__icon { background: var(--online); }
.summary--degraded { border-color: var(--degraded); background: #fff9e8; }
.summary--degraded .summary__icon { background: var(--degraded); }
.summary--offline { border-color: var(--offline); background: #fff0ef; }
.summary--offline .summary__icon { background: var(--offline); }
.summary--maintenance { border-color: var(--maintenance); background: #eff4ff; }
.summary--maintenance .summary__icon { background: var(--maintenance); }
.summary--unverified { border-color: var(--unverified); background: #f1f3f6; }
.summary--unverified .summary__icon { background: var(--unverified); }

.status-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0 0 22px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0 0 3px; font-size: 1.05rem; }
.muted { margin: 0; color: var(--muted); font-size: .92rem; }
.groups { padding: 4px 20px 12px; }
.group { padding: 18px 0; border-bottom: 1px solid #edf0f3; }
.group:last-child { border-bottom: 0; }
.group__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.group__title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.group__title strong { font-size: 1rem; }
.group__toggle { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: .92rem; cursor: pointer; }
.group__toggle:hover { color: var(--ink); }
.group__toggle:focus-visible { outline: 2px solid #1b67d6; outline-offset: 3px; border-radius: 3px; }
.group__chevron { display: inline-block; color: #97a1b0; font-size: 1.05rem; line-height: 1; transition: transform .14s ease; }
.group__toggle[aria-expanded="true"] .group__chevron { transform: rotate(180deg); }
.group__meta { color: var(--muted); white-space: nowrap; font-size: .9rem; }
.group__history { display: grid; grid-template-columns: repeat(auto-fit, minmax(5px, 1fr)); align-items: stretch; column-gap: 2px; height: 21px; margin-top: 12px; }
.group__components { margin: 16px 0 2px; padding: 0 0 0 18px; border-left: 2px solid #e8edf2; }
.component { padding: 13px 0 14px; border-top: 1px solid #edf0f3; }
.component:first-child { border-top: 0; padding-top: 0; }
.component__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.component__title { display: flex; align-items: center; gap: 8px; }
.component__title strong { font-size: .94rem; }
.component__history { display: grid; grid-template-columns: repeat(auto-fit, minmax(5px, 1fr)); align-items: stretch; column-gap: 2px; height: 17px; margin-top: 9px; }
.day { appearance: none; min-width: 0; padding: 0; border: 0; border-radius: 1px; cursor: pointer; }
.day:focus-visible { outline: 2px solid #1b67d6; outline-offset: 2px; }
.day:hover { transform: scaleY(1.25); }
.day--online { background: var(--online); }
.day--degraded { background: var(--degraded); }
.day--offline { background: var(--offline); }
.day--maintenance { background: var(--maintenance); }
.day--unverified { background: var(--unverified); }
.badge { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-size: .73rem; font-weight: 800; flex: 0 0 auto; }
.badge--online { background: var(--online); }
.badge--degraded { background: var(--degraded); }
.badge--offline { background: var(--offline); }
.badge--maintenance { background: var(--maintenance); }
.badge--unverified { background: var(--unverified); }

.incidents { padding: 0 20px; }
.incident { padding: 17px 0; border-bottom: 1px solid #edf0f3; }
.incident:last-child { border-bottom: 0; }
.incident h3 { margin: 0 0 4px; font-size: 1rem; }
.incident p { margin: 0; color: #465264; }
.incident small { display: block; margin-top: 6px; color: var(--muted); }

.details { position: relative; margin: 0 0 22px; padding: 22px; border: 1px solid #cbd4df; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(27, 40, 56, .09); }
.details h2 { margin: 0 28px 7px 0; font-size: 1.08rem; }
.details p { margin: 6px 0; }
.details ul { margin: 10px 0 0; padding-left: 20px; }
.details__close { position: absolute; top: 11px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 6px; color: #596579; background: transparent; font-size: 1.35rem; cursor: pointer; }
.details__close:hover { background: #eef1f5; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: .84rem; margin: 27px 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.dot--online { background: var(--online); }.dot--degraded { background: var(--degraded); }.dot--offline { background: var(--offline); }.dot--maintenance { background: var(--maintenance); }.dot--unverified { background: var(--unverified); }
footer { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: .78rem; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 620px) {
  .page { width: min(100% - 22px, 960px); padding-top: 22px; }
  .site-header { margin-bottom: 21px; }
  .section-heading, footer { flex-direction: column; gap: 5px; }
  .groups { padding: 2px 14px 8px; }
  .section-heading { padding: 16px; }
  .group__head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .group__history { height: 18px; }
  .component__head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .group__components { padding-left: 12px; }
}