/* Общие токены и компоненты для обеих страниц.
   Язык оформления один: приборная шкала, моноширинные числа, зоны как цветовой код. */
:root{
  --ink:#12212E; --ink-2:#3D4E5C; --ink-3:#6C7C88;
  --paper:#EDF1F0; --surface:#FFFFFF; --line:#D5DEDC;
  --accent:#0E6E64; --accent-soft:#DCEBE8; --signal:#B06A0F;
  --z-green:#3F8F5E; --z-yellow:#C79A1F; --z-red:#BF5439; --z-grey:#93A0A6;
  --z-green-bg:#E6F1EA; --z-yellow-bg:#F7EFD9; --z-red-bg:#F9E9E4; --z-grey-bg:#ECEFF0;
  --display:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- шапка */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:26px; padding:0 26px; height:56px;
  position:sticky; top:0; z-index:20;
}
.topbar .mark{
  font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap;
}
.topbar .mark span{color:var(--accent)}
.nav{display:flex; gap:2px; height:100%}
.nav a{
  display:flex; align-items:center; padding:0 15px; text-decoration:none;
  font-size:14px; color:var(--ink-2); border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.nav a:focus-visible{outline:2px solid var(--accent); outline-offset:-4px}
.topbar .meta{
  margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  display:flex; gap:14px; align-items:center; text-align:right;
}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px}
.dot.on{background:var(--z-green)} .dot.off{background:var(--z-red)} .dot.wait{background:var(--z-yellow)}

/* ---------------------------------------------------------- блоки */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:18px 20px}
.panel > h2{
  font-family:var(--display); font-size:17px; font-weight:600; margin:0 0 3px; letter-spacing:-.005em;
}
.panel > .note{font-size:12.5px; color:var(--ink-3); margin:0 0 14px; line-height:1.55}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px;
}

/* ---------------------------------------------------------- таблицы */
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  text-align:left; font-family:var(--mono); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3);
  padding:6px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:7px 9px; border-bottom:1px solid #E9EEED; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.n, th.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.name{max-width:0; width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.zone{
  display:inline-block; font-size:11px; padding:1px 7px; border-radius:2px; white-space:nowrap;
  font-family:var(--mono);
}
.zone.Зелёная{background:var(--z-green-bg); color:#2A6B44}
.zone.Жёлтая{background:var(--z-yellow-bg); color:#846109}
.zone.Красная{background:var(--z-red-bg); color:#9C3F27}
.zone.Серая{background:var(--z-grey-bg); color:#5C6A71}
.up{color:var(--z-green)} .down{color:var(--z-red)}

/* полоса доли внутри ячейки — читается быстрее числа */
.bar{position:relative; background:#EFF3F2; height:6px; border-radius:1px; min-width:40px}
.bar i{position:absolute; inset:0 auto 0 0; background:var(--accent); opacity:.7; border-radius:1px}

/* ---------------------------------------------------------- графики */
figure.chart{margin:0; border:1px solid var(--line); border-radius:2px; padding:12px 12px 8px; background:#FBFCFC}
figure.chart figcaption{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:6px;
}
.legend{display:flex; flex-wrap:wrap; gap:15px; font-size:11.5px; color:var(--ink-3); font-family:var(--mono); margin-top:6px}
.legend i{display:inline-block; width:15px; height:2px; margin-right:5px; vertical-align:3px; background:var(--ink)}

.err{border-left:3px solid var(--z-red); padding:10px 12px; background:#FDF2EF; font-size:14px}