/* Портал рекламы — свой лёгкий слой, без наследия дев-портала.
   Внутренние стили mark.kiselevgroup.com сюда не тянем намеренно:
   у этой страницы другой читатель и другой набор элементов. */

:root {
  --bg: #f6f5f3;
  --card: #fff;
  --ink: #1b1a19;
  --muted: #6b6762;
  --line: #e3e0dc;
  --accent: #c8623a;
  --good: #2f7d4f;
  --warn: #b4741a;
  --bad: #b23b32;
  --radius: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17161a; --card: #1f1e23; --ink: #ecebe9; --muted: #9a958e;
    --line: #322f36; --accent: #e07b4f; --good: #5aa97a; --warn: #d79a3c; --bad: #d4645a;
  }
}
:root[data-theme="dark"] {
  --bg: #17161a; --card: #1f1e23; --ink: #ecebe9; --muted: #9a958e;
  --line: #322f36; --accent: #e07b4f; --good: #5aa97a; --warn: #d79a3c; --bad: #d4645a;
}

* { box-sizing: border-box; }
/* Атрибут hidden даёт display:none с нулевой специфичностью, поэтому ЛЮБОЕ
 * правило вида `.btn-icon { display: inline-flex }` его перебивает — и
 * «скрытый» элемент остаётся на экране. Ровно так кнопка «Доступы» и
 * переключатель каналов показывались подрядчикам. Правило ниже закрывает
 * это раз и навсегда; новые скрываемые элементы о нём помнить не обязаны. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 64px; }

/* ── Шапка ──────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
/* Логотип в двух версиях: исходный сделан под тёмный фон, для светлой
   темы лежит копия с тёмной заливкой. Переключаются темой, а не фильтром:
   invert() превратил бы фирменный цвет в произвольный серый. */
.logo { height: 20px; width: auto; display: block; }
:root[data-theme="dark"] .logo { content: url("/img/logo.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { content: url("/img/logo.svg"); }
}
.brand { font-weight: 600; letter-spacing: -0.01em; }
.brand span { color: var(--muted); font-weight: 400; }
.top .sp { flex: 1 1 auto; }
.who { color: var(--muted); font-size: 13px; }
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.on { border-color: var(--accent); color: var(--accent); }

/* ── Период ─────────────────────────────────────────────── */
.period { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.period input[type="date"] {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 13.5px;
}

/* ── Когда данные обновлялись ───────────────────────────── */
.updated {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 12.8px; color: var(--muted); margin: -8px 0 20px;
}
.updated b { font-weight: 500; color: var(--ink); }

/* ── Плитки ─────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tile .k { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.tile .v { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .d { font-size: 12.5px; margin-top: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.up { color: var(--good); } .down { color: var(--bad); } .flat { color: var(--muted); }

/* ── Карточки ───────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.card h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.card .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.summary-head { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }
.notes, .caveats { list-style: none; margin: 0; padding: 0; }
.notes li, .caveats li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 14.2px; }
.notes li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.caveats li::before { content: "!"; position: absolute; left: 4px; color: var(--warn); font-weight: 700; }
.caveats li { color: var(--muted); font-size: 13.4px; }
.caveats { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Таблица ────────────────────────────────────────────── */
.tw { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 13.6px; }
th, td { padding: 9px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 12.5px; cursor: pointer; user-select: none; }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 210px; }
th.sorted { color: var(--accent); }
td.num { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tfoot td { font-weight: 600; border-top: 2px solid var(--line); border-bottom: none; }
.tag { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.row-untagged td { color: var(--muted); font-style: italic; }
.src { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; font-style: normal; }

/* ── Полоса покрытия ────────────────────────────────────── */
.cov { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); margin: 10px 0 8px; }
.cov i { display: block; height: 100%; }
.cov .m { background: var(--good); }
.cov .u { background: var(--warn); }
.cov .n { background: var(--muted); opacity: .5; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend b { font-weight: 600; color: var(--ink); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ── Вход ───────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; width: 100%; max-width: 340px; }
.login h1 { font-size: 18px; margin: 0 0 4px; }
.login p { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.login label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.login input {
  width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 9px; padding: 9px 11px; font: inherit; margin-bottom: 14px;
}
.login button { width: 100%; background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 10px; font: inherit; font-weight: 500; cursor: pointer; }
.err { color: var(--bad); font-size: 13.5px; min-height: 20px; margin-bottom: 8px; }
.foot { color: var(--muted); font-size: 12.5px; margin-top: 26px; }

@media (max-width: 640px) {
  .tile .v { font-size: 21px; }
  th:first-child, td:first-child { min-width: 160px; }
}

/* ── Переключатель каналов (виден только маркетологу) ─────── */
.src-switch { display: inline-flex; gap: 6px; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); }

/* ── Кабинет доступов ───────────────────────────────────────
   Модалка, а не отдельная страница: действие редкое, уводить ради
   него со страницы с цифрами незачем. */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal[hidden] { display: none; }
.modal-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; width: 100%; max-width: 720px; max-height: 86vh; overflow: auto; }
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 16px; flex: 1 1 auto; }
/* Список доступов — сетка с одинаковыми колонками у всех строк. Таблица
 * здесь разъезжалась: у строки «себя» нет кнопки «Удалить», ширина последней
 * ячейки менялась, и разделители обрывались на середине. */
.users-list { margin-bottom: 20px; }
.u-row {
  display: grid; align-items: center; gap: 10px 14px;
  grid-template-columns: minmax(170px, 1fr) 110px 150px auto;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.u-row:last-child { border-bottom: none; }
.u-who b { font-weight: 500; display: block; }
.u-who .src { display: block; margin-top: 1px; }
.u-role { font-size: 13px; }
.u-when { font-size: 12.5px; color: var(--muted); }
.u-act { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.u-self { font-size: 12.5px; color: var(--muted); padding: 0 4px; }

@media (max-width: 620px) {
  .u-row { grid-template-columns: 1fr auto; }
  .u-role, .u-when { grid-column: 1 / -1; }
  .u-act { grid-column: 1 / -1; justify-content: flex-start; }
}
.users-form h3 { font-size: 14px; margin: 0 0 10px; }
.users-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.users-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.users-grid input, .users-grid select {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 14px;
}
.users-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.users-actions .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.u-act .btn { font-size: 12.5px; padding: 6px 10px; white-space: nowrap; }

/* ═══ Цвета каналов и плотный тулбар (05.10.2026) ═══════════
 * Каналы различаются цветом, а не только подписью: взгляд цепляется за
 * метку раньше, чем читает текст. Оттенки взяты узнаваемые — синий у ВК,
 * красный у Яндекса — но приглушены до уровня интерфейса, чтобы таблица
 * не превратилась в светофор. */
:root { --vk: #3f72c9; --direct: #d5503c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --vk: #5b8ee0; --direct: #e4705c; }
}
:root[data-theme="dark"] { --vk: #5b8ee0; --direct: #e4705c; }

.sq { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 auto; margin-right: 8px; background: var(--muted); }
.sq-vk { background: var(--vk); }
.sq-direct { background: var(--direct); }
.card h2 { display: flex; align-items: center; }
/* Полоска слева у карточки канала — различимо и боковым зрением при прокрутке. */
.card-vk { border-left: 3px solid var(--vk); }
.card-direct { border-left: 3px solid var(--direct); }
.users-table .sq, .card h2 .sq { margin-right: 8px; }

/* ── Кнопки с иконками ──────────────────────────────────────── */
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn-icon svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-sq { padding: 7px 8px; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.btn-accent:hover { filter: brightness(1.06); border-color: var(--accent); }

/* ── Поле с иконкой (выпадающий список периода) ─────────────── */
.field { position: relative; display: inline-flex; align-items: center; }
.field-ico { position: absolute; left: 10px; width: 15px; height: 15px; pointer-events: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.field select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 9px; padding: 7px 30px 7px 32px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.field::after { content: "▾"; position: absolute; right: 11px; color: var(--muted); pointer-events: none; font-size: 11px; }
.field select:hover { border-color: var(--muted); }

/* Диапазон виден всегда: он же показывает, какие именно даты сейчас на
   экране. Выбор пресета просто подставляет в него даты. */
.range { display: inline-flex; align-items: center; gap: 6px; }
.range .dash { color: var(--muted); }
.period .sp { flex: 1 1 auto; }

/* Роли с одним каналом видят не переключатель, а статичную метку: кнопка,
   которая ничего не переключает, вводит в заблуждение. */
.src-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--kg-ctrl-h, 32px); box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px;
  font-size: 13.5px; color: var(--muted); background: var(--card);
}
.src-badge b { font-weight: 500; color: var(--ink); }
.src-badge.badge-direct { border-color: color-mix(in srgb, var(--direct) 45%, var(--line)); }
.src-badge.badge-vk { border-color: color-mix(in srgb, var(--vk) 45%, var(--line)); }

/* ── Переключатель каналов ──────────────────────────────────── */
.src-switch .btn { display: inline-flex; align-items: center; }
.src-switch .btn .sq { margin-right: 6px; }
.src-switch .src-direct.on { border-color: var(--direct); color: var(--direct); }
.src-switch .src-vk.on { border-color: var(--vk); color: var(--vk); }
.src-switch .src-all.on { border-color: var(--accent); color: var(--accent); }

/* ── Остатки на кабинетах ───────────────────────────────────
   Стоят рядом со свежестью данных: и то и другое читают до цифр.
   Остаток ниже 10 000 ₽ подсвечивается — на пустом кабинете нулевой
   расход выглядит как экономия, хотя это просто остановка. */
.status-row { display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: baseline; margin: -8px 0 20px; }
.balances { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; font-size: 12.8px; }
.bal-label { color: var(--muted); }
.bal { display: inline-flex; align-items: center; color: var(--muted); }
.bal b { font-weight: 600; color: var(--ink); margin-left: 5px; font-variant-numeric: tabular-nums; }
.bal-low b { color: var(--warn); }
.status-row .updated { margin: 0; }

/* ═══ Плитки итогов: цвет по смыслу + стеклянный слой ════════
 * Стекло здесь не украшение: полупрозрачный слой с размытием и бликом
 * даёт плитке объём, из-за которого она читается как отдельный объект,
 * а цветная подложка показывает направление, не требуя читать цифру.
 *
 * Эффект работает только если под плиткой есть что размывать, поэтому
 * у карточки с итогами своя подложка из мягких цветных пятен. */
.tiles-wrap { position: relative; border-radius: var(--radius); overflow: hidden; }
.tiles-wrap::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(42% 60% at 12% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(40% 55% at 78% 15%, color-mix(in srgb, var(--vk) 20%, transparent), transparent 72%),
    radial-gradient(45% 60% at 60% 95%, color-mix(in srgb, var(--good) 16%, transparent), transparent 70%);
  filter: blur(30px); opacity: .85; pointer-events: none;
}
.tiles { position: relative; }

.tile {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--card) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--ink) 4%, transparent),
    0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Блик по верхней кромке — то, что делает слой «стеклянным», а не просто
   полупрозрачным. Без него плитка выглядит выцветшей. */
.tile::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 52%;
  background: linear-gradient(to bottom, color-mix(in srgb, #fff 48%, transparent), transparent);
  pointer-events: none;
}
.tile:hover { transform: translateY(-1px); box-shadow:
  inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
  0 10px 24px color-mix(in srgb, var(--ink) 11%, transparent); }

/* Тон плитки: цветная подложка + цветная кромка слева. */
.tone-good   { background: color-mix(in srgb, var(--good) 18%, color-mix(in srgb, var(--card) 52%, transparent)); border-color: color-mix(in srgb, var(--good) 34%, transparent); }
.tone-bad    { background: color-mix(in srgb, var(--bad) 17%, color-mix(in srgb, var(--card) 52%, transparent)); border-color: color-mix(in srgb, var(--bad) 32%, transparent); }
.tone-flat   { background: color-mix(in srgb, var(--muted) 9%, color-mix(in srgb, var(--card) 52%, transparent)); }
.tone-calm   { background: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--card) 62%, transparent)); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }

.tile .v { position: relative; z-index: 1; }
.tile .k, .tile .d { position: relative; z-index: 1; }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.delta-good { color: var(--good); }
.delta-bad  { color: var(--bad); }
.delta-flat { color: var(--muted); }
.delta-calm { color: var(--accent); }
.dsub { color: var(--muted); }

/* В тёмной теме белый блик слишком яркий, а подложка слишком контрастна. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile::after { background: linear-gradient(to bottom, color-mix(in srgb, #fff 9%, transparent), transparent); }
  :root:not([data-theme="light"]) .tile { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 6px 18px rgba(0,0,0,.35); }
  :root:not([data-theme="light"]) .tiles-wrap::before { opacity: .35; }
}
:root[data-theme="dark"] .tile::after { background: linear-gradient(to bottom, color-mix(in srgb, #fff 9%, transparent), transparent); }
:root[data-theme="dark"] .tile { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 6px 18px rgba(0,0,0,.35); }
:root[data-theme="dark"] .tiles-wrap::before { opacity: .35; }

/* Браузер без backdrop-filter получит просто плотную плитку, а не прозрачную
   кашу поверх градиентов. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tile { background: var(--card); }
  .tone-good { background: color-mix(in srgb, var(--good) 12%, var(--card)); }
  .tone-bad  { background: color-mix(in srgb, var(--bad) 11%, var(--card)); }
  .tone-calm { background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
}