/* Вариант A: строгий тёмный, как status.openai.com. Цвета — токены bfvpn.ru. */
:root {
  --bg: #0f0a1a;
  --line: rgb(196 181 253 / 10%);
  --text: #faf5ff;
  --muted: #c4b5fd;
  --dim: #8277aa;
  --ok: #3fbf78;
  --ok-text: #62e492;
  --warn: #f8ba4f;
  --bad: #f05656;
  --bad-text: #ff8a8a;
  --none: rgb(196 181 253 / 14%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--muted); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.top { max-width: 760px; margin: 0 auto; padding: 28px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; }
.brand img { border-radius: 999px; }
.top__label { color: var(--dim); font-weight: 600; }

.banner { margin: 20px 0 32px; padding: 16px 18px; border: 1px solid; border-radius: 12px; font-size: 17px; font-weight: 700; }
.banner--ok { background: rgb(98 228 146 / 10%); border-color: rgb(98 228 146 / 25%); color: var(--ok-text); }
.banner--warn { background: rgb(248 186 79 / 10%); border-color: rgb(248 186 79 / 30%); color: var(--warn); }
.banner--bad { background: rgb(240 86 86 / 10%); border-color: rgb(240 86 86 / 30%); color: var(--bad-text); }
.banner--stale { background: rgb(196 181 253 / 6%); border-color: var(--line); color: var(--muted); }

.group { margin-bottom: 32px; }
.group__title { margin: 0 0 4px; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.row { padding: 14px 0; border-top: 1px solid var(--line); }
.row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.row__name { font-weight: 600; }
.row__state { flex-shrink: 0; font-size: 13px; }
.row__state--operational { color: var(--ok-text); }
.row__state--degraded { color: var(--warn); }
.row__state--outage { color: var(--bad-text); }
.row__state--unknown { color: var(--dim); }
.bar { position: relative; display: flex; gap: 2px; height: 28px; margin-top: 10px; }
.day { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--none); }
.day--operational { background: var(--ok); }
.day--degraded { background: var(--warn); }
.day--outage { background: var(--bad); }
.day:hover { filter: brightness(1.25); }
.day--before { opacity: .55; }
.bar__gap { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bar__gap-text { max-width: 100%; overflow: hidden; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--dim); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.row__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--dim); font-size: 12px; }
.row__uptime { color: var(--muted); }

.incidents-block { margin: 40px 0 24px; }
.incident { padding: 14px 0; border-top: 1px solid var(--line); }
.incident__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.incident__live { padding: 1px 8px; border-radius: 999px; background: var(--warn); color: var(--bg); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.incident--outage .incident__live { background: var(--bad); }
.incident__when { margin: 4px 0 0; color: var(--dim); font-size: 13px; }
.incident__comment { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.incidents__empty { margin: 8px 0 0; color: var(--dim); }

.foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.tip { position: absolute; z-index: 10; max-width: 260px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #1e1b2e; color: var(--text); font-size: 12px; pointer-events: none; }

@media (max-width: 639px) {
  .banner { font-size: 16px; }
  .bar { gap: 3px; height: 32px; }
  .foot { flex-direction: column; }
}