@font-face {
  font-family: 'Manrope';
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-display: swap;
  font-weight: 200 900;
  src: url('/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-display: swap;
  font-weight: 200 900;
  src: url('/fonts/unbounded-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* Токены темы «Контраст» платформы. */
:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --border: #e2e2de;
  --border-soft: #efefec;
  --text: #0d0d0d;
  --muted: #777777;
  --accent: #d92d20;
  --strong: #0d0d0d;
  --on-strong: #ffffff;
  --up: #1f9d55;
  --up-soft: #e6f6ec;
  --warn: #b45309;
  --warn-soft: #fff5e6;
  --down: #d92d20;
  --down-soft: #ffeceb;
  --none: #e2e2de;
  --shadow: 0 1px 2px rgb(13 13 13 / 0.06), 0 8px 24px rgb(13 13 13 / 0.08);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --surface: #151515;
    --border: #2a2a2a;
    --border-soft: #212121;
    --text: #f2f2f2;
    --muted: #8c8c8c;
    --accent: #e5484d;
    --strong: #f2f2f2;
    --on-strong: #0d0d0d;
    --up: #3dd68c;
    --up-soft: #0f2a1c;
    --warn: #ff9f0a;
    --warn-soft: #2b1d0a;
    --down: #e5484d;
    --down-soft: #2a1413;
    --none: #262626;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 15px/1.5 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: 'Unbounded', 'Manrope', sans-serif; font-weight: 600; letter-spacing: -0.01em; }

.page { max-width: 960px; margin: 0 auto; padding: 28px 20px 48px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 18px; }
.brand__mark { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.brand__sep { color: var(--muted); font-weight: 400; }
.brand__page { color: var(--muted); font-weight: 500; }
.updated { color: var(--muted); font-size: 13px; }

.hero {
  display: flex; align-items: center; gap: 20px;
  padding: 28px; border-radius: 20px;
  /* Плашка окрашивается цветом состояния — мягко, в тон поверхности, без яркого пятна в тёмной теме. */
  --c: var(--muted);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--border));
  color: var(--text);
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  transition: background 0.4s var(--ease);
}
.hero__title { font-size: clamp(20px, 3.4vw, 30px); line-height: 1.2; }
.hero__text { margin: 6px 0 0; opacity: 0.7; }
.hero__pulse { position: relative; flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.hero__pulse span { width: 18px; height: 18px; border-radius: 50%; background: var(--c, var(--muted)); }
.hero__pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--c, var(--muted)); opacity: 0.25;
  animation: pulse 2.4s var(--ease) infinite;
}
.hero[data-state='up'] { --c: var(--up); }
.hero[data-state='partial'] { --c: var(--warn); }
.hero[data-state='down'] { --c: var(--down); background: var(--down); color: #fff; }
.hero[data-state='down'] .hero__pulse span, .hero[data-state='down'] .hero__pulse::before { background: #fff; }
@keyframes pulse { 0% { transform: scale(0.4); opacity: 0.5; } 70%, 100% { transform: scale(1); opacity: 0; } }

.groups { display: grid; gap: 20px; }
.panel, .group {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 6px 22px; box-shadow: var(--shadow);
}
.panel { margin-top: 20px; padding: 20px 22px 22px; }
.group__head, .panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 6px; }
.panel__head { padding: 0 0 16px; }
.group__head h2, .panel__head h2 { font-size: 15px; }
.panel__hint, .group__hint { color: var(--muted); font-size: 13px; }

.check { padding: 16px 0 18px; border-top: 1px solid var(--border-soft); }
.group__head + .check { border-top: 0; }
.check__row { display: flex; align-items: center; gap: 12px; }
.check__name { font-weight: 700; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.check__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.check__meta { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.dot[data-state='up'] { background: var(--up); box-shadow: 0 0 0 4px var(--up-soft); }
.dot[data-state='down'] { background: var(--down); box-shadow: 0 0 0 4px var(--down-soft); }
.pill { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill[data-state='up'] { background: var(--up-soft); color: var(--up); }
.pill[data-state='down'] { background: var(--down-soft); color: var(--down); }
.pill[data-state='unknown'] { background: var(--border-soft); color: var(--muted); }
.check__detail { margin: 8px 0 0 22px; color: var(--down); font-size: 13px; }

.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 34px; margin-top: 12px; }
.bar { display: block; border-radius: 3px; background: var(--none); transition: transform 0.15s var(--ease), opacity 0.15s; }
.bars .bar:hover { transform: scaleY(1.12); opacity: 0.85; }
.bar[data-level='up'] { background: var(--up); }
.bar[data-level='partial'] { background: var(--warn); }
.bar[data-level='down'] { background: var(--down); }
.bars__axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 12px; }
.spark { width: 84px; height: 22px; display: block; }
.spark path { fill: none; stroke: var(--muted); stroke-width: 1.5; }

.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.meter { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg); }
.meter__label { color: var(--muted); font-size: 13px; }
.meter__value { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 22px; margin: 2px 0 10px; }
.meter__value small { font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.meter__track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.meter__fill { height: 100%; border-radius: inherit; background: var(--up); transition: width 0.6s var(--ease); }
.meter__fill[data-level='partial'] { background: var(--warn); }
.meter__fill[data-level='down'] { background: var(--down); }

.releases { display: grid; gap: 10px; }
.release { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border-soft); }
.release__name { font-weight: 700; }
.release__ver { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--muted); }
.release__when { margin-left: auto; color: var(--muted); font-size: 13px; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; color: var(--muted); font-size: 13px; }
.legend { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legend .bar { width: 10px; height: 10px; margin-left: 8px; }

.tip {
  position: fixed; z-index: 10; pointer-events: none;
  padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.4;
  background: var(--strong); color: var(--on-strong); box-shadow: var(--shadow);
  transform: translate(-50%, calc(-100% - 10px));
}

@media (max-width: 640px) {
  .page { padding: 18px 14px 36px; }
  .hero { padding: 20px; gap: 14px; }
  .hero__pulse { width: 40px; height: 40px; }
  .group, .panel { padding-left: 16px; padding-right: 16px; }
  .check__row { flex-wrap: wrap; }
  .check__meta { margin-left: 22px; width: 100%; }
  .bars { grid-template-columns: repeat(45, 1fr); }
  .bars .bar:nth-child(-n + 45) { display: none; }
  .spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}