/* Кабинет statix. Без сборки и без CDN: один файл, вшитый в бинарь. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #16191d;
  --ink-muted: #666e79;
  --line: #e2e5ea;
  --accent: #2f6feb;
  --ok: #1a7f45;
  --ok-bg: #e6f4ec;
  --bad: #b42318;
  --bad-bg: #fdeceb;
  --off: #7a6320;
  --off-bg: #fbf3dd;

  /* Шкала отступов. Одна на весь кабинет: без неё каждый экран получает
     свою плотность, и продукт перестаёт выглядеть одним продуктом. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Шкала кегля. Шаг примерно 1,15 — крупнее выглядит скачками. */
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-base: 15px;
  --t-lg: 17px;
  --t-xl: 21px;

  --radius: 10px;
  --radius-sm: 6px;

  /* Тень едва заметная: карточка должна отделяться от фона, а не
     висеть над ним. На тёмной теме тень не работает — там роль
     отделения берёт на себя граница. */
  --shadow: 0 1px 2px rgb(16 25 45 / 0.04), 0 1px 3px rgb(16 25 45 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --panel: #1b1f24;
    --ink: #e7eaee;
    --ink-muted: #98a1ad;
    --line: #2b3138;
    --accent: #6ea1ff;
    --ok: #6ed69b;
    --ok-bg: #16301f;
    --bad: #ff9c92;
    --bad-bg: #34191a;
    --off: #e2c766;
    --off-bg: #302a15;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base)/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Цифры выравниваются по разрядам везде, где их сравнивают глазом.
   Пропорциональные цифры в колонке просмотров превращают сравнение
   в угадывание. */
table, .facts dd, .counter, .num { font-variant-numeric: tabular-nums; }

/* Фокус виден всегда: кабинет проходится с клавиатуры, и невидимый
   фокус делает это невозможным. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 10;
}

.top .left { display: flex; align-items: center; gap: var(--s5); min-width: 0; }

/* Навигация: текущая страница должна быть видна без раздумий.
   Подчёркивание снизу, а не заливка — шапка должна оставаться тихой. */
.pages { display: flex; gap: var(--s1); flex-wrap: wrap; }

.pages a {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: var(--t-md);
  white-space: nowrap;
}

.pages a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.pages a.active {
  color: var(--ink);
  font-weight: 550;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.brand {
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.chip {
  display: inline-block;
  padding: var(--s1) var(--s3);
  margin-left: var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}

.chip.muted { opacity: 0.75; }

.top nav { display: flex; align-items: center; gap: 0; }
.logout { display: inline; margin: 0 0 0 6px; }

.chip.link {
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--ink-muted);
  margin-left: 0;
}

.chip.link:hover { color: var(--ink); border-color: var(--ink-muted); }

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
  display: grid;
  gap: var(--s4);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}

h1 {
  font-size: var(--t-xl);
  margin: 0 0 var(--s1);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h2 {
  font-size: var(--t-lg);
  margin: 0 0 var(--s3);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

.counter { font-size: 13px; font-weight: 400; color: var(--ink-muted); }

/* Подводка под заголовком: объясняет экран, а не соревнуется с ним.
   Мера строки ограничена — длинная строка мелким серым не читается. */
.lede {
  margin: 0 0 var(--s4);
  color: var(--ink-muted);
  font-size: var(--t-md);
  max-width: 78ch;
  line-height: 1.6;
}

.hint {
  margin: var(--s2) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-sm);
  max-width: 78ch;
  line-height: 1.6;
}

.facts { margin: 0; display: grid; gap: var(--s2); }

/* Плитки: крупная цифра и подпись под ней. Так их читают на дашборде —
   сначала число, потом что это было. */
.facts.tiles {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s3);
}

.facts.tiles > div {
  display: block;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}

.facts.tiles dt {
  font-size: var(--t-sm);
  margin-bottom: var(--s1);
}

.facts.tiles dd {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.facts > div:last-child { border-bottom: none; padding-bottom: 0; }
.facts dt { color: var(--ink-muted); font-size: 14px; }
.facts dd { margin: 0; }

/* Состояние — не украшение, а сигнал: «сломано» должно ловиться боковым
   зрением, «в порядке» — не отвлекать. */
.state {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 520;
  white-space: nowrap;
}

.state.ok  { background: var(--ok-bg);  color: var(--ok); }
.state.bad { background: var(--bad-bg); color: var(--bad); }
.state.off { background: var(--off-bg); color: var(--off); }

table.integrations {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.integrations th {
  text-align: left;
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--ink-muted);
  padding: 0 var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.integrations td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.integrations tr:last-child td { border-bottom: none; }

/* Подсветка строки под курсором: в широкой таблице глаз теряет строку
   на полпути к правому краю. */
table.integrations tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* Числовые колонки прижимаются вправо: так разряды стоят под разрядами. */
table th.num, table td.num { text-align: right; padding-right: var(--s2); }

.mono, code, pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

.mono { color: var(--ink-muted); }

pre.error {
  margin: var(--s2) 0 0;
  padding: var(--s3);
  background: var(--bad-bg);
  color: var(--bad);
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
}

footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 32px;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Кнопки. Основная — одна на экран: если все кнопки главные,
   главной нет ни одной. */
button, .btn {
  padding: var(--s2) var(--s4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--t-md);
  font-weight: 520;
  cursor: pointer;
  transition: filter 0.12s ease;
}

button:hover, .btn:hover { filter: brightness(1.08); }
button:active, .btn:active { filter: brightness(0.94); }

button.secondary {
  background: none;
  color: var(--ink-muted);
  border-color: var(--line);
}

button.secondary:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
  filter: none;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Кнопка подключения канала */
.connect { margin: var(--s4) 0 0; }

.connect button {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.connect button:hover { filter: brightness(1.07); }



/* Форма входа */
.login {
  max-width: 380px;
  margin: 8vh auto 0;
}

.login label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}

.login input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}

.login button {
  margin-top: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.login button:hover { filter: brightness(1.07); }

@media (max-width: 620px) {
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  table.integrations thead { display: none; }
  table.integrations td { display: block; border: none; padding: 2px 0; }
  table.integrations tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Экран видео */
.top .left { display: flex; align-items: baseline; gap: 18px; }
.pages a {
  margin-right: 12px;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
}
.pages a:hover { color: var(--ink); }

.table-scroll { overflow-x: auto; }

table.videos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.videos thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 6px 10px 7px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.videos td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Зебра и подсветка строки: глазу нужно за что-то цепляться. */
table.videos tbody tr:nth-child(even) { background: color-mix(in srgb, var(--line) 26%, transparent); }
table.videos tbody tr:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
table.videos tr:last-child td { border-bottom: none; }

table.videos .num, table.videos th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.v-title { max-width: 460px; min-width: 240px; }
.v-title a { color: var(--ink); text-decoration: none; }
.v-title a:hover { color: var(--accent); }

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--off-bg);
  color: var(--off);
  font-size: 11px;
}

.dim { color: var(--ink-muted); opacity: 0.7; }

.badge.hidden-badge { background: var(--bad-bg); color: var(--bad); }

.delta { font-weight: 550; }
.delta.up   { color: var(--ok); }
.delta.down { color: var(--bad); }

/* Карточка видео */
.crumbs { margin: 0 0 8px; font-size: 13px; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }



.chart svg { width: 100%; height: auto; display: block; }
.chart-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Тело отчёта (094)
   Отчёт читают раз в неделю сверху вниз, а не сканируют глазами таблицу.
   Поэтому здесь мера строки, воздух и иерархия, а не плотность. */
.report-body {
  /* Около 62 знаков в строке: на длинной строке глаз теряет начало
     следующей, на короткой спотыкается о переносы. */
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink);
}

/* Заголовок секции обязан читаться заголовком. Мелкий серый капс
   выглядел подписью к чему-то и терялся в тексте. */
.report-body h2 {
  margin: 30px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}
.report-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.report-body h3 {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 620;
  color: var(--ink);
}

.report-body p { margin: 0 0 14px; }
.report-body p:last-child { margin-bottom: 0; }

/* Перечисления роликов: тире вместо точки и воздух между пунктами —
   каждый пункт это отдельный ролик со своими цифрами, и слипаться
   им нельзя. */
.report-body ul,
.report-body ol {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}
.report-body li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
}
.report-body li:last-child { margin-bottom: 0; }
.report-body ul > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-muted);
}
.report-body ol { counter-reset: item; }
.report-body ol > li { counter-increment: item; }
.report-body ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Название ролика выделяется, цифры внутри него — нет: жирным должно
   быть то, за что цепляется глаз при беглом просмотре. */
.report-body strong {
  font-weight: 630;
  color: var(--ink);
}
.report-body em {
  font-style: normal;
  color: var(--ink-muted);
}
.report-body a { color: var(--accent); }
.report-body code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
}
.report-body blockquote {
  margin: 0 0 14px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line);
  color: var(--ink-muted);
}
.report-body hr {
  margin: 26px 0;
  border: none;
  border-top: 1px solid var(--line);
}

/* Цвета форматов */
.badge.fmt-shorts { background: var(--off-bg); color: var(--off); }
.badge.fmt-long   { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Тема: стабильный оттенок из названия */
.topic {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: hsl(var(--hue) 60% 50% / 0.14);
  color: hsl(var(--hue) 55% 34%);
}

@media (prefers-color-scheme: dark) {
  .topic { color: hsl(var(--hue) 65% 72%); }
}

/* Досмотренность по шкале */
.ret          { font-variant-numeric: tabular-nums; }
.ret.ret-low  { color: var(--bad); }
.ret.ret-mid  { color: var(--off); }
.ret.ret-high { color: var(--ok); }
.ret.ret-loop { color: var(--accent); font-weight: 600; }

/* Узкие экраны: таблица остаётся таблицей со скроллом, но компактнее */
@media (max-width: 900px) {
  main { padding: 14px 10px 32px; }
  .card { padding: 14px; }
  table.videos { font-size: 12.5px; }
  table.videos td, table.videos thead th { padding-right: 7px; }
  .v-title { min-width: 200px; }
  .topic { max-width: 110px; }
}

/* Детализация источника */
tr.sub-source td { padding-left: 18px; font-size: 12.5px; color: var(--ink-muted); border-bottom: none; }
tr.sub-source a { color: var(--ink-muted); }
tr.sub-source a:hover { color: var(--accent); }

/* Дашборд (029) */
.periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.periods .chip { margin-left: 0; text-decoration: none; }
.periods a.chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.periods .chip.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* Спарклайн тянется на всю ячейку: он показывает форму, а не значения,
   поэтому пропорции можно ломать без потери смысла. */
.sparkcell { width: 140px; }
.spark { width: 100%; height: 28px; display: block; opacity: 0.85; }

/* Настройки (028) */
.settings { max-width: 560px; margin-top: 16px; }
.settings .field { margin-bottom: 18px; }
.settings label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}
.settings input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.settings input:focus {
  outline: none;
  border-color: var(--accent);
}
.settings .hint { margin: 5px 0 0; }

/* Правка темы ролика (034) */
.cluster-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}
.cluster-edit label { color: var(--ink-muted); font-size: 13px; }
.cluster-edit select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  max-width: 320px;
}
.cluster-edit button.secondary {
  background: none;
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
.cluster-edit button.secondary:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Ручной запуск разбора (047) */
.videos th.pick, .videos td.pick { width: 28px; text-align: center; padding-right: 0; }
.videos td.pick input { cursor: pointer; }
.analyze-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.analyze-bar .hint { margin: 0; flex: 1 1 320px; }

/* Шкала и значения при наведении (092) */
.chart .grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.chart .axis {
  fill: var(--ink-muted);
  font-size: 11px;
  text-anchor: end;
}
/* Полоса-цель для наведения: попасть мышью в линию трудно,
   в вертикальную полосу — легко. Видимой она быть не должна. */
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: var(--accent); fill-opacity: 0.07; }

/* Второстепенная кнопка в таблице каналов (046) */
.integrations button.secondary {
  background: none;
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
.integrations button.secondary:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Ссылки в контенте: подчёркивание тонкое и с отступом — оно должно
   помечать ссылку, а не перечёркивать буквы. */
main a { color: var(--accent); text-underline-offset: 2px; }
main a:hover { text-decoration-thickness: 2px; }

/* Мелкий текст внутри таблиц не должен сливаться со строкой. */
.dim { color: var(--ink-muted); font-size: var(--t-sm); }

/* На узком экране шапка переносится, а таблицы уезжают в скролл,
   а не ломают вёрстку. */
@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); }
  .top .left { width: 100%; gap: var(--s3); }
  main { padding: var(--s4) var(--s3) var(--s6); }
  .card { padding: var(--s4); }
  .facts > div { grid-template-columns: 1fr; gap: var(--s1); }
}

/* Вход — единственный экран без навигации, и первое, что видно.
   Он должен выглядеть законченным, а не служебным. */
.login {
  max-width: 380px;
  margin: 12vh auto 0;
}

.login h1 { margin-bottom: var(--s2); }

.login form {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
}

.login input {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.login input:focus { outline: none; border-color: var(--accent); }

/* Печать: отчёт иногда читают глазами на бумаге или в PDF. Служебное
   при этом не нужно. */
@media print {
  .top, footer, .periods, form { display: none; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; padding: 0; }
  main { max-width: none; padding: 0; }
}

/* Слепое сравнение (057): два отчёта рядом, чтобы разницу было видно
   глазом, а не по памяти. На узком экране — друг под другом. */
.blind-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

@media (max-width: 1000px) {
  .blind-pair { grid-template-columns: 1fr; }
}

.settings textarea {
  width: 100%;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.settings textarea:focus { outline: none; border-color: var(--accent); }