/* Каркас сайта: палитра, боковая колонка, шапка и общие контролы.

   Раньше каждая страница несла свою копию палитры и свою шапку, и копии разъехались: на
   главной боковая колонка с разделами, на истории и банах — строка с логотипом и ссылками,
   у половины страниц не было половины переменных. Теперь определение одно, а страница
   держит только то, что есть на ней одной.

   Палитра взята с рабочего экрана, который пользователь показал 26.10: почти чёрный фон,
   бирюзовый акцент только на числах и активных элементах, всё служебное — приглушённым
   серым. Смысл такой раскраски не в красоте: на тёмном фоне глаз цепляется ровно за то,
   что покрашено, поэтому цвет тут расходуется только на спред, знак и текущий раздел. */
:root{
  --bg:#0a0c0f; --side:#0d1014; --panel:#111419; --panel2:#161a20; --raise:#1b2027;
  --line:#1e242c; --line2:#171c23;
  --text:#e8edf3; --dim:#7f8a99; --faint:#596472;
  --accent:#2fd4a3; --accent-soft:rgba(47,212,163,.12); --accent-line:rgba(47,212,163,.35);
  --up:#2fd4a3; --down:#f0706e; --warn:#e3b341;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  /* Радиусы по размеру вещи, а не по вкусу: вложенный радиус — внешний минус отступ между
     ними. Было девять значений от 5 до 999, и внутренние углы спорили с внешними. */
  --r-tag:6px; --r-ctl:8px; --r-card:12px; --r-panel:16px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans);
     min-height:100vh}
/* Две колонки — только на страницах с боковой колонкой. Вход и регистрация берут отсюда
   палитру и контролы, но боковой колонки у неизвестного гостя быть не должно. */
body.shell{display:grid;grid-template-columns:216px minmax(0,1fr)}

/* ---- боковая колонка ------------------------------------------------------ */
aside.side{background:var(--side);border-right:1px solid var(--line);padding:16px 12px;
  display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:8px;padding:0 4px;font-size:16px;font-weight:600}
.brand .logo{width:24px;height:24px;border-radius:var(--r-ctl);background:var(--accent);
  color:#06281f;display:grid;place-items:center;font:600 14px var(--sans)}
.brand span.n{color:var(--accent)}
.navgrp{display:flex;flex-direction:column;gap:2px}
/* Заголовок группы ближе к своим пунктам, чем к группе выше: 20 сверху, 8 снизу — это и
   есть всё, что отличает «Разборы» от «Сканера», капслока с разрядкой тут не нужно. */
.navgrp+.navgrp{margin-top:12px}
.navgrp .cap{font-size:12px;color:var(--faint);padding:0 8px 8px}
nav a{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--r-ctl);
  color:var(--dim);text-decoration:none;font-size:13px;border-left:2px solid transparent}
nav a svg{width:16px;height:16px;flex:0 0 auto;opacity:.75}
nav a:hover{background:var(--panel);color:var(--text)}
nav a.on{background:var(--panel2);color:var(--text);border-left-color:var(--accent)}
nav a.on svg{opacity:1;color:var(--accent)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:0 8px}
.live{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
body.stale .live i{background:var(--down)}
.side-foot a{color:var(--faint);font-size:12px;text-decoration:none}
.side-foot a:hover{color:var(--text)}

/* ---- верхняя полоса -------------------------------------------------------- */
.col{min-width:0;display:flex;flex-direction:column}
/* Содержимому колонки нельзя расти по своей ширине: таблица шире телефона иначе уводит
   вбок всю страницу вместе с шапкой, а не едет внутри своей карточки. width:100% тут
   обязателен — у страниц на main стоит «margin:0 auto», а автоматические поля отменяют
   растягивание, и main начинал мерить себя по самой широкой таблице. */
.col>main{min-width:0;width:100%}
header{position:sticky;top:0;z-index:10;background:rgba(10,12,15,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.wrap{padding:12px 20px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);
  white-space:nowrap}
.crumb b{color:var(--text);font-weight:500}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 12px;min-width:220px;
  flex:1 1 220px;max-width:380px}
.search svg{width:16px;height:16px;color:var(--faint);flex:0 0 auto}
.search input{background:none;border:0;color:var(--text);font:13px var(--sans);width:100%;
  outline:none}
.search input::placeholder{color:var(--faint)}

/* ---- приборная строка ------------------------------------------------------ */
/* Показатели круга шли тринадцатью одинаковыми плашками, и «круг 7.76 с», который смотрят
   каждую минуту, выглядел ровно так же, как «в бане», который смотрят раз в день. Рамок
   больше нет ни у одного показателя: подпись приглушённая, число — моноширинное и светлое,
   группы разделены волоском. Обводка осталась признаком того, что по элементу можно щёлкнуть. */
.meters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-top:12px;
  font-size:12px;color:var(--faint)}
.meters .m{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.meters .m b{font:500 12px/1.3 var(--mono);color:var(--text)}
.meters .m.bad b{color:var(--down)} .meters .m.good b{color:var(--up)}
.meters .sep{width:1px;height:16px;background:var(--line)}
a.m{text-decoration:none;color:inherit}
a.m b{border-bottom:1px solid transparent}
a.m:hover b{color:var(--accent);border-bottom-color:var(--accent-line)}
.meters .alert{display:inline-flex;align-items:baseline;gap:4px;color:#ffb3b2;
  background:rgba(240,112,110,.12);border:1px solid rgba(240,112,110,.4);
  border-radius:var(--r-ctl);padding:4px 8px}
.meters .alert b{color:#ffb3b2}

/* ---- контролы --------------------------------------------------------------- */
button{background:var(--accent);color:#06281f;border:0;border-radius:var(--r-ctl);
  padding:8px 16px;font:500 13px var(--sans);cursor:pointer;
  transition:background-color .12s ease-out,color .12s ease-out,border-color .12s ease-out}
button:hover{background:#45e0b2}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
button.ghost:hover{background:var(--panel);color:var(--text);border-color:var(--accent-line)}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{font-family:var(--sans)}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}

/* ---- телефон ----------------------------------------------------------------- */
@media (max-width:900px){
  /* minmax(0,1fr), а не 1fr: колонка по умолчанию растёт под самое широкое, что в ней
     лежит, и широкая таблица уводила вбок всю страницу вместе с шапкой. */
  body.shell{grid-template-columns:minmax(0,1fr)}
  /* min-width:0 — иначе строка разделов распирает колонку сетки изнутри, и вбок едет вся
     страница вместе с шапкой и таблицей, а не только сама лента разделов. */
  aside.side{position:static;height:auto;flex-direction:row;align-items:center;gap:12px;
    min-width:0;overflow-x:auto;padding:8px 12px;border-right:0;
    border-bottom:1px solid var(--line)}
  .brand{padding:0;font-size:15px}
  .navgrp{flex-direction:row;gap:4px}
  .navgrp+.navgrp{margin-top:0}
  .navgrp .cap{display:none}
  nav{display:flex;gap:4px}
  nav a{border-left:0;border-bottom:2px solid transparent;padding:8px;white-space:nowrap}
  nav a.on{border-left:0;border-bottom-color:var(--accent)}
  .side-foot{margin:0;flex-direction:row;align-items:center;gap:12px}
  .wrap,main{padding-left:12px;padding-right:12px}
  .search{max-width:none}
  /* На телефоне показатели шли в пять строк и съедали пол-экрана до таблицы: оставляем
     первую группу — круг, задания, ошибки, прокси, — остальное есть на большом экране. */
  .meters{gap:4px 16px}
  .meters .sep{display:none}
  .meters .m.wide{display:none}
}