/* Дизайн-система панели (#79). Всё окрашивание идёт через токены :root —
   тёмная тема переопределяет только их, компоненты цвета не знают.

   Три смысла — три канала, и путать их нельзя (docs/ui-principles.md):
     значимость события  — полоса слева и вес;
     здоровье            — заливка чипа;
     направление правки  — цвет текста и обязательный знак.
   «−40 %» не должно выглядеть как ошибка: понижение — это факт, а не оценка. */

:root {
  /* поверхности и чернила: холодный нейтральный со сдвигом в петроль */
  --page:        #EFF3F3;
  --surface:     #FFFFFF;
  --sunk:        #F5F8F8;
  --ink:         #14201F;
  --ink-2:       #4C5D5B;
  --ink-3:       #7C8D8B;
  --line:        #DBE3E2;
  --line-2:      #C3CFCE;

  /* акцент: петроль. Красный, жёлтый и зелёный отданы смыслу, не интерфейсу. */
  --accent:      #0C6A6B;
  --accent-2:    #095253;
  --accent-wash: #E1EFEE;
  --accent-line: #A9CECD;
  --on-accent:   #FFFFFF;

  /* значимость события: ступени веса, а не тревоги */
  --sev-1:       #0C6A6B;
  --sev-2:       #79A9A8;
  --sev-3:       #C9D4D3;

  /* здоровье */
  --err:         #B03024;
  --err-ink:     #8E241A;
  --err-wash:    #FBE7E4;
  --err-line:    #EFC0B9;
  --warn:        #9A6710;
  --warn-ink:    #7E540B;
  --warn-wash:   #FBF0DC;
  --warn-line:   #EBD3A6;
  --tip:         #3F6E44;
  --tip-wash:    #E7F1E6;
  --tip-line:    #BFD8BE;
  --on-err:      #FFFFFF;

  /* направление изменения */
  --up:          #2C6E4B;
  --down:        #A34A3B;
  --off:         #7C8D8B;
  --off-wash:    #ECEFEF;

  /* состояния сущностей */
  --live:        #2C6E4B;
  --live-wash:   #E4F0E8;
  --live-line:   #BCD9C6;
  --paused-wash: #F0EDE6;
  --paused-line: #DCD5C6;

  --focus:       #0C6A6B;
  --shadow-sm:   0 1px 2px rgba(20, 32, 31, .08);

  --r-1: 3px;
  --r-2: 6px;
  --r-pill: 999px;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: Cambria, Constantia, "PT Serif", Georgia, serif;
  --font-mono: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:        #0E1414;
    --surface:     #161E1E;
    --sunk:        #121A1A;
    --ink:         #E4EDEC;
    --ink-2:       #A0B0AE;
    --ink-3:       #7A8A88;
    --line:        #273333;
    --line-2:      #384746;

    --accent:      #59B3B0;
    --accent-2:    #7FC9C6;
    --accent-wash: #16302F;
    --accent-line: #2C5654;
    --on-accent:   #06201F;

    --sev-1:       #59B3B0;
    --sev-2:       #3A6E6C;
    --sev-3:       #2B3838;

    --err:         #E0705F;
    --err-ink:     #F0A093;
    --err-wash:    #2E1917;
    --err-line:    #5C302A;
    --warn:        #D5A253;
    --warn-ink:    #E5BE81;
    --warn-wash:   #2C2317;
    --warn-line:   #55452A;
    --tip:         #7FB183;
    --tip-wash:    #1A2620;
    --tip-line:    #33503A;
    --on-err:      #1A0D0B;

    --up:          #6FBB8E;
    --down:        #DE8C7C;
    --off:         #7A8A88;
    --off-wash:    #1D2626;

    --live:        #6FBB8E;
    --live-wash:   #17281E;
    --live-line:   #2E4A38;
    --paused-wash: #262420;
    --paused-line: #40392C;

    --focus:       #59B3B0;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ база */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
h3 { font-size: .95rem; }
p { margin: 0; }

a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
summary { cursor: pointer; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .88em; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.small { font-size: .85rem; }
.eyebrow {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--ink-3);
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); }
.grow { flex: 1 1 auto; min-width: 0; }
.push { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* -------------------------------------------------------------- оболочка */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 96rem; margin: 0 auto; padding: 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-5); min-height: 3.25rem;
}
.brand { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.brand-mark {
  width: 1.6rem; height: 1.6rem; border-radius: var(--r-1);
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
}
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; white-space: nowrap; }

.mainnav { display: flex; gap: var(--s-1); flex: 1 1 auto; overflow-x: auto; scrollbar-width: thin; }
.mainnav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.mainnav a:hover { background: var(--sunk); color: var(--ink); }
.mainnav a.active { background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

/* Свежесть данных: ненавязчиво, но всегда на виду. Тревожные состояния
   отличаются не только цветом точки, но и самим текстом. */
.freshness {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .82rem; color: var(--ink-2);
  padding: var(--s-1) var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); white-space: nowrap;
  max-width: 26rem; overflow: hidden; text-overflow: ellipsis;
}
.freshness .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--live); flex: 0 0 auto; }
.freshness.stale, .freshness.failing {
  border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn-ink);
}
.freshness.stale .dot, .freshness.failing .dot { background: var(--warn); }
.freshness.never { border-style: dashed; }
.freshness.never .dot { background: var(--line-2); }
.whoami { display: flex; align-items: center; gap: var(--s-2); font-size: .85rem; color: var(--ink-2); }
.avatar {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-2);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; text-transform: uppercase;
}
form.inline { display: inline; margin: 0; }

.projecttabs {
  position: sticky; top: 3.25rem; z-index: 39;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.projecttabs-inner {
  max-width: 96rem; margin: 0 auto; padding: 0 var(--s-4);
  display: flex; overflow-x: auto; scrollbar-width: thin;
}
.ptab {
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + 1px);
  border-bottom: 2px solid transparent;
}
.ptab:hover { color: var(--ink); background: var(--sunk); }
.ptab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.page { max-width: 96rem; width: 100%; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); }
.page-head { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.page-sub { color: var(--ink-2); font-size: .85rem; margin-top: .35rem; }
.section { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.section-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }

/* --------------------------------------------- карточки, таблицы, кнопки */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--s-4);
}
.card.flat { padding: 0; overflow: hidden; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s-3); }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1);
  text-decoration: none; color: inherit;
}
a.tile:hover { border-color: var(--accent-line); }
.tile-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile-label { font-size: .8rem; color: var(--ink-2); }
.tile.alarm { border-color: var(--err-line); background: var(--err-wash); }
.tile.alarm .tile-value { color: var(--err-ink); }
.tile.calm { border-color: var(--live-line); background: var(--live-wash); }
.tile.calm .tile-value { color: var(--live); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
thead th {
  text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); background: var(--sunk);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunk); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-note {
  padding: var(--s-2) var(--s-3); color: var(--ink-2); font-size: .85rem;
  background: var(--sunk); border-top: 1px solid var(--line);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1);
  font-size: .87rem; font-weight: 500; text-decoration: none;
}
.btn:hover { border-color: var(--accent-line); background: var(--sunk); color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn.sm { padding: var(--s-1) var(--s-2); font-size: .8rem; }

/* ------------------------------------------------ чипы и язык значений */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: .05rem var(--s-2); border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2);
}
.chip.plain { background: var(--surface); }
.chip.accent { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-2); }
.chip.on { background: var(--live-wash); border-color: var(--live-line); color: var(--live); }
/* Четыре состояния (#79): архив и черновик не должны читаться как «просто
   остановлено» — это разные вещи и разные решения человека. */
.chip.state-active { background: var(--live-wash); border-color: var(--live-line); color: var(--live); }
.chip.state-paused { background: var(--paused-wash); border-color: var(--paused-line); color: var(--ink-2); }
.chip.state-draft { background: var(--surface); border-style: dashed; color: var(--ink-2); }
.chip.state-archived { background: var(--off-wash); border-color: var(--line); color: var(--off); }
.chip.off { background: var(--paused-wash); border-color: var(--paused-line); color: var(--ink-2); }
.chip.err { background: var(--err); border-color: var(--err); color: var(--on-err); }
.chip.warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.chip.tip { background: var(--tip-wash); border-color: var(--tip-line); color: var(--tip); }

/* направление: цвет плюс знак — часть людей не различает красный и зелёный,
   и панель печатают в отчёты */
.dir { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dir.up { color: var(--up); }
.dir.down { color: var(--down); }
.dir.flat { color: var(--ink-2); font-weight: 500; }
.dir .sign { font-family: var(--font-mono); margin-right: .1em; }

/* значение корректировки — цветной чип (2026-08-24): серое «без изменения»,
   зелёное повышение, красное понижение с градацией (deep — −50% и сильнее),
   «показы отключены» — сплошной красный: выключатель ищут глазами первым */
.adj {
  display: inline-block; border-radius: var(--r-1); padding: 0 var(--s-1);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85em;
  white-space: nowrap; border: 1px solid transparent;
}
.adj .sign { font-family: var(--font-mono); margin-right: .1em; }
.adj.flat { color: var(--ink-2); background: var(--surface); border-color: var(--line); font-weight: 500; }
.adj.up {
  color: var(--up);
  background: color-mix(in srgb, var(--up) 12%, transparent);
  border-color: color-mix(in srgb, var(--up) 35%, transparent);
}
.adj.down {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 12%, transparent);
  border-color: color-mix(in srgb, var(--down) 35%, transparent);
}
.adj.down.deep {
  background: color-mix(in srgb, var(--down) 26%, transparent);
  border-color: var(--down);
}
.adj.off { color: var(--on-err); background: var(--err); border-color: var(--err); }
.adj.disabled {
  color: var(--off); background: var(--off-wash); border: 1px dashed var(--line-2);
  font-weight: 500; text-decoration: line-through;
}

/* строка корректировки в таблице разреза: критерий слева, значение справа */
.mod-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.mod-row .mod-criteria { min-width: 0; }

/* честный пробел: система знает об ограничении и говорит о нём */
.honest { color: var(--ink-2); border-bottom: 1px dashed var(--line-2); }

/* --------------------------- страница корректировок: матрица (макет 5a) */
/* Вкладки-пилюли: подпись и мелкая расшифровка, что внутри. */
.pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pill {
  text-decoration: none; text-align: center; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4);
}
.pill:hover { border-color: var(--accent-line); color: var(--ink); }
.pill.active { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-2); }
.pill-label { display: block; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.pill-sub { display: block; font-size: .68rem; opacity: .8; white-space: nowrap; }

/* Строка кампании: имя + две матрицы фиксированной ширины. Ширины колонок
   заданы формулой от числа возрастных колонок (--agecols на .mmx): каждая
   строка — свой грид, и без фиксированной ширины колонки бы разъехались. */
.mmx { min-width: fit-content; background: var(--surface); }
.mmx-row {
  display: grid;
  grid-template-columns:
    minmax(15rem, 1fr)
    calc(2.6rem + var(--agecols, 6) * (3.3rem + 3px))
    calc(6 * 3.6rem + 5 * 3px);
  gap: var(--s-4); padding: var(--s-2) var(--s-3); align-items: start;
}
.mmx-row.head { align-items: end; background: var(--sunk); border-bottom: 1px solid var(--line); }
.mmx .mmx-camp { border-bottom: 1px solid var(--line); }
.mmx .mmx-camp:last-child { border-bottom: 0; }
.mmx-camp { background: var(--surface); }
/* Конфликт уровней — полоса слева, как у проекта с ошибками на дашборде. */
.mmx-camp.conflict { box-shadow: inset 3px 0 0 var(--err); }
.stack > .mmx-camp { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.mmx-groups { background: var(--sunk); border-top: 1px solid var(--line); }
.mmx-groups .mmx-row + .mmx-row { border-top: 1px solid var(--line); }

/* Вкладки «Гео» и «Аудитории»: имя кампании + содержимое строкой. */
.mmx-line { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-3); align-items: flex-start; flex-wrap: wrap; }
.mmx-line .mmx-name { flex: 0 0 18rem; min-width: 0; }
.mmx-line.sub { border-top: 1px solid var(--line); background: var(--sunk); }
/* В широкой строке чип значения стоит рядом с критерием: разъезд по краям
   (как в узкой ячейке таблицы) на всю ширину страницы не читается. */
.mmx-line .mod-row { justify-content: flex-start; gap: var(--s-3); }

.mmx-name { min-width: 0; }
.mexpand { display: inline-flex; align-items: center; gap: var(--s-1); text-decoration: none; color: inherit; }
.mexpand:hover { color: var(--accent-2); }
.mexpand.open .caret { transform: rotate(90deg); }
.mindent { margin-left: 1.15rem; }
.gdot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  vertical-align: middle; margin-right: .45rem; background: var(--accent-line);
}
.gdot.bad { background: var(--err); }
.gwarn { color: var(--err); margin-left: .35rem; }

/* Сетки матриц: пол × возраст и устройства. */
.sexgrid { display: grid; grid-template-columns: 2.6rem repeat(var(--agecols, 6), 3.3rem); gap: 3px; align-items: center; }
.devgrid { display: grid; grid-template-columns: repeat(6, 3.6rem); gap: 3px; align-items: center; }
.devgrid.heads { row-gap: 1px; }
.mhead { text-align: center; font-size: .7rem; color: var(--ink-3); white-space: nowrap; }
.mhead.tall { grid-row: 1 / span 2; align-self: end; padding-bottom: 1px; }
.mhead.span2 { grid-column: span 2; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.mlabel { font-size: .78rem; color: var(--ink-2); }
.mstack { display: flex; flex-direction: column; gap: 2px; }
.mfall { line-height: 1.65rem; }

/* Ячейка матрицы: та же семантика цвета, что у чипа .adj, но блочная. */
.mcell {
  display: flex; align-items: center; justify-content: center;
  height: 1.65rem; border-radius: var(--r-1); white-space: nowrap;
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.mcell.none { border: 1px dashed var(--line-2); color: var(--ink-3); font-weight: 400; }
.mcell.flat, .gchip.flat { background: var(--surface); border-color: var(--line); color: var(--ink-2); font-weight: 500; }
.mcell.up, .gchip.up {
  color: var(--up);
  background: color-mix(in srgb, var(--up) 12%, transparent);
  border-color: color-mix(in srgb, var(--up) 35%, transparent);
}
.mcell.down, .gchip.down {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 12%, transparent);
  border-color: color-mix(in srgb, var(--down) 35%, transparent);
}
.mcell.down.deep, .gchip.down.deep {
  background: color-mix(in srgb, var(--down) 26%, transparent);
  border-color: var(--down);
}
.mcell.off, .gchip.off { color: var(--on-err); background: var(--err); border-color: var(--err); }
.mcell.disabled, .gchip.disabled {
  color: var(--off); background: var(--off-wash); border: 1px dashed var(--line-2);
  font-weight: 500; text-decoration: line-through;
}

/* Цепочки регионов: только заданные значения, вложенность — стрелкой. */
.chains { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }
.chain {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px var(--s-2); flex-wrap: wrap;
}
.chain .arrow { color: var(--ink-3); font-size: .8rem; }
.gchip {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: var(--r-pill); padding: 1px var(--s-2);
  font-size: .78rem; white-space: nowrap; border: 1px solid transparent;
}
.gchip b { font-variant-numeric: tabular-nums; }
/* Исключённый регион — не корректировка, а выключенный таргетинг: тёмный. */
.gchip.excluded { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); }

/* Легенда: цвет — не единственный носитель смысла, но расшифровка обязана быть. */
.legend { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); }
.legend > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.lg { width: .85rem; height: .85rem; border-radius: var(--r-1); display: inline-block; border: 1px solid transparent; }
.lg.off { background: var(--err); }
.lg.down { background: color-mix(in srgb, var(--down) 12%, transparent); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.lg.deep { background: color-mix(in srgb, var(--down) 26%, transparent); border-color: var(--down); }
.lg.up { background: color-mix(in srgb, var(--up) 12%, transparent); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.lg.none { border: 1px dashed var(--line-2); }
.lg.excluded { background: var(--ink-2); }

/* ---------------------------------------------------------- фильтры */
.filterbar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3); display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; box-shadow: var(--shadow-sm); margin: 0;
}
.field { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .85rem; color: var(--ink-2); }
input[type="text"], input[type="search"], input[type="password"], input[type="number"], select {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-1);
  padding: var(--s-1) var(--s-2); font-size: .87rem; min-width: 0;
}
input:hover, select:hover { border-color: var(--accent-line); }
.search input { width: 18rem; max-width: 100%; }
.toggle { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .85rem; color: var(--ink-2); }
.toggle input { accent-color: var(--accent); }

.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-1); overflow: hidden; }
.segmented a {
  background: var(--surface); color: var(--ink-2); text-decoration: none;
  padding: var(--s-1) var(--s-3); font-size: .82rem; border-right: 1px solid var(--line);
  display: inline-flex; align-items: baseline; gap: var(--s-1); white-space: nowrap;
}
.segmented a:last-child { border-right: 0; }
.segmented a:hover { background: var(--sunk); color: var(--ink); }
.segmented a.active { background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }
.segmented .count { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: .92em; }
.segmented a.active .count { color: var(--accent-2); }

.facets { display: flex; gap: var(--s-1); overflow-x: auto; border-bottom: 1px solid var(--line); }
.facets a {
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: var(--s-2) var(--s-3); border-bottom: 2px solid transparent; font-size: .9rem;
}
.facets a:hover { color: var(--ink); }
.facets a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* --------------------------------------------------- лента изменений */
.daymark {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-2); color: var(--ink-3);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.daymark::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.event {
  display: grid; grid-template-columns: 4px 1fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden; margin-bottom: var(--s-2);
}
.event .stripe { background: var(--sev-3); }
.event.sev-major .stripe { background: var(--sev-1); }
.event.sev-medium .stripe { background: var(--sev-2); }
.event.sev-minor .stripe { background: var(--sev-3); }
.event-body { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.event-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.event-title { font-weight: 600; }
.event-time {
  color: var(--ink-3); font-size: .82rem; margin-left: auto;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sevlabel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.sev-major .sevlabel { color: var(--sev-1); }
.sev-medium .sevlabel { color: var(--ink-2); }
.sev-minor .sevlabel { color: var(--ink-3); }

/* строки диффа приходят готовыми из represent.change_lines — здесь только
   типографика: подстроки списка отбиваются знаком и цветом */
.difflines { display: flex; flex-direction: column; gap: 2px; }
.diffline { font-size: .89rem; white-space: pre-wrap; word-break: break-word; }
.diffline.head { color: var(--ink); }
.diffline.add { color: var(--up); }
.diffline.del { color: var(--down); }
.diffline.mod { color: var(--ink-2); }

/* Замена картинки: пара превью вместо пары хешей. Тайл кликается — оригинал
   открывается в соседней вкладке, миниатюры для сравнения деталей мало. */
.imgswap { margin: var(--s-2) 0 var(--s-3); }
.imgswap-head { font-size: .89rem; color: var(--ink); margin-bottom: var(--s-2); }
.imgswap-sides { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.imgswap-arrow { align-self: center; color: var(--ink-3); font-size: 1.1rem; }
.imgside { display: flex; flex-direction: column; gap: var(--s-1); }
.imgside-label { font-size: .75rem; color: var(--ink-3); }
.imgside-tiles { display: flex; align-items: flex-start; gap: var(--s-2); flex-wrap: wrap; }
.imgtile {
  display: flex; flex-direction: column; gap: var(--s-1);
  max-width: 12rem; color: var(--ink-2); text-decoration: none;
}
.imgtile img {
  max-width: 12rem; max-height: 7rem; border: 1px solid var(--line);
  border-radius: var(--r-1); background: var(--sunk); display: block;
}
.imgtile:hover img { border-color: var(--accent-line); }
.imgtile.removed img, .imgtile.removed .imgtile-box { opacity: .75; border-color: var(--err-line); }
.imgtile.added img { border-color: var(--live-line); }
.imgtile.kept img { opacity: .8; }
.imgtile-mark {
  align-self: flex-start; font-size: .72rem; border-radius: var(--r-pill);
  padding: 0 var(--s-2); border: 1px solid transparent;
}
.imgtile-mark.removed { background: var(--err-wash); border-color: var(--err-line); color: var(--err-ink); }
.imgtile-mark.added { background: var(--live-wash); border-color: var(--live-line); color: var(--live); }
.imgtile-name { font-size: .8rem; color: var(--ink-2); word-break: break-word; }
.imgtile-box {
  display: flex; align-items: center; justify-content: center;
  width: 12rem; height: 7rem; border: 1px dashed var(--line-2);
  border-radius: var(--r-1); background: var(--sunk);
  color: var(--ink-3); font-size: .8rem; text-align: center;
}

/* ------------------------------------------------------------ здоровье */
.issue { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface); }
.issue.level-error { border-color: var(--err-line); }
.issue-head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--sunk); border-bottom: 1px solid var(--line);
}
.issue.level-error .issue-head { background: var(--err-wash); border-bottom-color: var(--err-line); }
.issue-title { font-weight: 600; }
.issue-explain { color: var(--ink-2); font-size: .85rem; margin-top: 2px; }
.issue-row {
  display: grid; grid-template-columns: minmax(12rem, 20rem) 1fr; gap: var(--s-3);
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); align-items: baseline;
}
.issue-row:first-child { border-top: 0; }
.issue-row:hover { background: var(--sunk); }
.issue-where { color: var(--ink-2); font-size: .88rem; }

.allgreen {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--live-line); background: var(--live-wash);
  border-radius: var(--r-2);
}
.allgreen .mark { color: var(--live); flex: 0 0 auto; }

/* ------------------------------------------------------- раскрывашки */
.collapsible > summary {
  list-style: none; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); font-size: .9rem; color: var(--ink-2);
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary:hover { border-color: var(--accent-line); color: var(--ink); }
.collapsible[open] > summary { border-radius: var(--r-2) var(--r-2) 0 0; border-bottom-color: transparent; }
.collapsible-body {
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2);
  padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface);
}
.caret { color: var(--ink-3); flex: 0 0 auto; transition: transform .15s ease; }
details[open] > summary > .caret { transform: rotate(90deg); }

/* ------------------------------------------- дерево «где используется» */
.tree > summary {
  list-style: none; color: var(--accent);
  display: inline-flex; align-items: baseline; gap: var(--s-2); font-size: .85rem;
}
.tree > summary::-webkit-details-marker { display: none; }
.tree > summary:hover { color: var(--accent-2); }
.tree-body { margin: var(--s-2) 0 var(--s-2) var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--line); }
.tree-camp { margin-bottom: var(--s-2); }
.tree-group { margin: var(--s-1) 0 var(--s-2) var(--s-3); }
.tree-ads { color: var(--ink-2); font-size: .84rem; }

/* --------------------------------------------------- обзор кампании */
.kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kv {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kv-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; }
.kv-value { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }

.group { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); overflow: hidden; }
.group > summary {
  list-style: none; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary:hover { background: var(--sunk); }
.group[open] > summary { border-bottom: 1px solid var(--line); background: var(--sunk); }
.group-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }

.ad {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3);
  padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunk);
}
.ad-title { font-weight: 600; }
.ad-text { color: var(--ink-2); font-size: .9rem; }
.ad-meta { font-size: .84rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; margin-top: .3rem; }
/* Незаполненные слоты расширений (#92): пустая площадь объявления — это
   упущенный CTR, и в списке она должна отличаться от заполненной. */
.slot.thin { color: var(--warn-ink); }
.slot.thin b { color: var(--warn-ink); }

.ad-side { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; }

/* Период ленты (#87): полоса вариантов плюс произвольные даты. */
.periodbar {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-2);
}
.custom-period { align-items: center; }
.custom-period input[type="date"] { font-size: .82rem; padding: var(--s-1) var(--s-2); }

/* Счётчик на кнопке вида правок: количество видно до нажатия, а не после. */
.toggle .count {
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  font-size: .92em; font-weight: 600;
}
/* Вида в периоде нет — кнопку не прячем, но и нажимать не на что:
   «здесь пусто» это ответ, а не поломка. */
.toggle.empty { opacity: .45; }

/* Снятый тумблер значимости (#81): лента обязана сказать, что молчит не
   потому, что правок нет, а потому, что их спрятали. */
.hidden-note {
  border: 1px dashed var(--line-2); border-radius: var(--r-2);
  background: var(--sunk); color: var(--ink-2);
  padding: var(--s-2) var(--s-3); font-size: .87rem; margin-top: var(--s-3);
}

/* ------------------------------------------------------------ дашборд */
.dash td { vertical-align: top; }
/* Проект с ошибками читается с первого взгляда: экран нужен, чтобы решить,
   куда идти, а не чтобы читать его целиком (#93). */
.dash tr.has-errors td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.dash .chip { text-decoration: none; }
.dash-details {
  margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface);
}
.dash-details > summary {
  cursor: pointer; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.dash-body { padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }

/* --------------------------------------------------- пустые состояния */
.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-6); border: 1px dashed var(--line-2); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-2); max-width: 46rem;
}
.empty h3 { color: var(--ink); font-size: 1rem; }

/* ---------------------------------------------------------------- вход */
.loginpage { min-height: 100vh; display: grid; place-items: center; padding: var(--s-5); }
.loginbox {
  width: min(23rem, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.loginbox label { display: flex; flex-direction: column; gap: var(--s-1); font-size: .85rem; color: var(--ink-2); }
.loginbox input { padding: var(--s-2) var(--s-3); font-size: .95rem; }

/* --------------------------------------------------------------- формы */
.form { display: flex; flex-direction: column; gap: var(--s-3); }
.form-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.form label.f { display: flex; flex-direction: column; gap: var(--s-1); font-size: .82rem; color: var(--ink-2); }
.form label.f input, .form label.f select { padding: var(--s-2); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-2); }

/* ---------------------------------------------------------- мобильное */
@media (max-width: 860px) {
  .topbar-inner { flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-2); }
  .mainnav { order: 3; width: 100%; }
  .projecttabs { position: static; }
  .issue-row { grid-template-columns: 1fr; gap: 2px; }
  .kv { border-right: 0; }
  .ad { grid-template-columns: 1fr; }
  .ad-side { align-items: flex-start; }
  .page { padding-inline: var(--s-3); }
  .hide-sm { display: none !important; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.3rem; }
  .search input { width: 100%; }
}