/* content-ferma · панель управления
   Тёмный фон, кислотно-салатовый акцент, крупные скругления, много воздуха.
   Ни одного внешнего ресурса: сервер за прокси, шрифты с CDN не загрузятся. */

:root {
  --bg: #070707;
  --surface: #121212;
  --surface-2: #191919;
  --surface-3: #212121;
  --line: #262626;
  --line-soft: #1c1c1c;

  --text: #f3f3f3;
  --text-2: #b4b4b4;
  --muted: #767676;

  --accent: #ccf24a;
  --accent-dim: #93ad35;
  --accent-ink: #10160a;

  --warn: #f5c451;
  --danger: #ff6f5e;
  --info: #7fb7ff;

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --pill: 999px;

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 0.65, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Цифры одной ширины: в таблицах денег и очередей столбцы обязаны стоять
     ровно, иначе взгляд не сравнивает их сверху вниз. */
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Ссылка внутри текста и таблицы подчёркнута: без этого в плотной таблице не
   видно, что кликается. Кнопки-таблетки и метки исключены — у них своя форма. */
td a,
.card a:not(.tag):not(.btn-sm):not(.counter):not(.more-btn):not(.shot) {
  border-bottom: 1px solid #333;
}

td a:hover,
.card a:not(.tag):not(.btn-sm):not(.counter):not(.more-btn):not(.shot):hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--text-2);
}

/* ── каркас ──────────────────────────────────────────────────────────────── */

.shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 22px 80px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px 12px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill);
  position: sticky;
  top: 12px;
  z-index: 40;
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-mark {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
  box-shadow: 0 0 22px rgba(204, 242, 74, 0.35);
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--pill);
  padding: 4px;
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  padding: 7px 15px;
  border-radius: var(--pill);
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.nav-item:hover {
  color: var(--text);
}

.nav-item.is-active {
  background: var(--surface-3);
  color: var(--text);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logout-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.who {
  font-size: 13px;
  color: var(--text-2);
}

.icon-btn,
.round-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}

.icon-btn:hover,
.round-btn:hover {
  color: var(--text);
  border-color: #3a3a3a;
  transform: translateY(-1px);
}

.round-btn {
  width: 44px;
  height: 44px;
  font-size: 19px;
  text-decoration: none;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 34px 4px 22px;
}

.page-head h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.page {
  display: grid;
  /* minmax(0, 1fr), а не 1fr: иначе широкая таблица внутри карточки растягивает
     грид-элемент по своему содержимому и вся страница едет вбок. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* ── карточки ────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  min-width: 0;
}

.card-title {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 450;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

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

.state-line {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}

/* Строка-переключатель между карточками. Подчёркивание ссылке приходится
   ставить отдельно: общее правило написано для таблиц и карточек. */
.page > .state-line {
  margin: 0 4px;
}

.page > .state-line a {
  border-bottom: 1px solid #333;
}

.page > .state-line a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

/* Две карточки в ряд там, где данные читаются парой. */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

/* ── рубильники ──────────────────────────────────────────────────────────── */

.switches {
  display: grid;
  gap: 14px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.switch-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toggle-form {
  margin: 0;
  display: inline-flex;
}

/* Состояние читается цветом и точкой раньше, чем подписью. */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}

.toggle i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a4a4a;
  flex: none;
}

.toggle:hover {
  border-color: #3a3a3a;
  color: var(--text);
}

.toggle.is-on {
  background: rgba(204, 242, 74, 0.11);
  border-color: rgba(204, 242, 74, 0.32);
  color: var(--accent);
}

.toggle.is-on i {
  background: var(--accent);
}

.toggle.is-locked {
  opacity: 0.45;
  cursor: default;
}

/* ── счётчики ────────────────────────────────────────────────────────────── */

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.counter {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

a.counter:hover {
  transform: translateY(-2px);
  border-color: #333;
}

.counter-value {
  font-size: 30px;
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.counter.tone-accent .counter-value {
  color: var(--accent);
}

.counter.tone-warn .counter-value {
  color: var(--warn);
}

.counter-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.counter-hint {
  font-size: 12px;
  color: #5e5e5e;
  margin-top: 3px;
  line-height: 1.45;
}

/* ── таблицы ─────────────────────────────────────────────────────────────── */

/* Широкая таблица прокручивается внутри себя. Страница вбок ехать не должна:
   уехавшая страница прячет верхнее меню, и выбраться из неё нечем. */
.table-wrap {
  overflow-x: auto;
  margin: 0 -8px;
  padding: 0 8px;
  scrollbar-width: thin;
}

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

/* Общая раскладка колонок. Нужна там, где одинаковых таблиц несколько подряд:
   при раскладке по содержимому каждая считает ширины по своим строкам, и колонки
   соседних таблиц не сходятся — читается как съехавшая сетка, а не как разные
   таблицы. Ширины приходят из `colgroup` разметки. */
table.grid.fixed {
  table-layout: fixed;
}

table.grid th {
  text-align: left;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.grid td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

table.grid tbody tr:last-child td {
  border-bottom: 0;
}

table.grid tbody tr:hover td {
  background: var(--surface-2);
}

table.grid tr.is-off td {
  opacity: 0.5;
}

/* Экран жалоб (/reports): снимок цепочки создания поста — исходник, вердикты, итог,
   адресаты, вызовы модели. Текстовые блоки — моноширины не надо, но перенос и прокрутка. */
.report-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-feedback {
  margin: 0;
  font-size: 15px;
}

.chain-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.chain-pre {
  margin: 0;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  max-height: 440px;
  overflow: auto;
}

.chain-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

/* Строка, по которой сейчас отфильтрована выдача ниже: видно, чем она выбрана. */
table.grid tr.is-selected td {
  background: var(--surface-2);
}

table.grid tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

table.grid td.right,
table.grid th.right {
  text-align: right;
}

table.grid td.nowrap {
  white-space: nowrap;
}

table.grid td.wide {
  min-width: 260px;
}

table.grid td.muted,
.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 3px;
}

.accent {
  color: var(--accent-dim);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.facts {
  margin: 0;
  padding-left: 18px;
}

.facts li {
  margin-bottom: 2px;
}

/* ── состояния ───────────────────────────────────────────────────────────── */

.outcome {
  display: inline-block;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--pill);
  white-space: nowrap;
  border: 1px solid transparent;
}

.outcome.s-passed {
  background: rgba(204, 242, 74, 0.12);
  color: var(--accent);
  border-color: rgba(204, 242, 74, 0.25);
}

.outcome.s-dropped {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--line);
}

.outcome.s-failed {
  background: rgba(255, 111, 94, 0.12);
  color: var(--danger);
  border-color: rgba(255, 111, 94, 0.28);
}

.outcome.s-running,
.outcome.s-waiting {
  background: rgba(245, 196, 81, 0.1);
  color: var(--warn);
  border-color: rgba(245, 196, 81, 0.22);
}

.tag {
  display: inline-block;
  padding: 2px 9px;
  margin-left: 6px;
  border-radius: var(--pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

/* Предупреждение в строке: тем же тёплым, что жёлтая плашка, — это не ошибка, а то,
   о чём надо знать заранее. */
.tag.is-warn {
  background: rgba(245, 196, 81, 0.1);
  border-color: rgba(245, 196, 81, 0.3);
  color: #f3d68e;
  margin-left: 8px;
}

.tag.is-accent {
  background: rgba(204, 242, 74, 0.12);
  border-color: rgba(204, 242, 74, 0.3);
  color: var(--accent);
}

/* Откуда текст в канале: местное, веер, заполнитель — три разных источника,
   и различать их надо с одного взгляда. */
.tag.k-local {
  background: rgba(204, 242, 74, 0.12);
  border-color: rgba(204, 242, 74, 0.3);
  color: var(--accent);
  margin-left: 0;
}

.tag.k-fanout {
  background: rgba(127, 183, 255, 0.12);
  border-color: rgba(127, 183, 255, 0.28);
  color: var(--info);
  margin-left: 0;
}

.tag.k-filler {
  margin-left: 0;
}

/* Метки поста: что это, откуда и куда. Одна строка, разные оттенки — иначе
   взгляд читает их как один длинный ярлык и не различает вид от охвата. */
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 2px;
}

.marks .tag {
  margin-left: 0;
}

/* Те же метки в строке таблицы. Вертикальный отступ снимается: в карточке поста он
   отделяет метки от заголовка, а в ячейке сдвигал бы её содержимое вниз относительно
   соседних колонок — строка выглядит сломанной. */
table.grid td .marks {
  margin: 0;
}

/* Вид контента — тёплая: с неё начинается чтение поста. */
.tag.m-kind {
  background: rgba(245, 196, 81, 0.1);
  border-color: rgba(245, 196, 81, 0.26);
  color: var(--warn);
}

/* Охват источника — нейтральная: она уточняет, а не сообщает. */
.tag.m-reach {
  background: var(--surface-3);
  color: var(--text-2);
}

/* Район из текста — контуром, чтобы не спорить с заливкой «местного». */
.tag.m-place {
  background: transparent;
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Со снимка снят чужой знак: снимок перерисован моделью, его проверяют глазами.
   Свой оттенок, которого нет у остальных меток, — чтобы искать взглядом. */
.tag.m-unmarked {
  background: rgba(214, 150, 255, 0.12);
  border-color: rgba(214, 150, 255, 0.32);
  color: #dcb0ff;
}

/* ── формы ───────────────────────────────────────────────────────────────── */

.input,
.select,
.textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  padding: 8px 11px;
  outline: none;
  max-width: 100%;
  transition: border-color 160ms var(--ease);
}

.select {
  font-size: 13px;
  padding: 7px 9px;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent-dim);
}

.input.narrow {
  width: 120px;
}

.textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
}

.check input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Куда идёт пост: сверху правило словами, под ним — место, от которого оно
   считается. Верхнюю строку читают, нижнюю правят. */
.route-cell {
  display: grid;
  gap: 7px;
  justify-items: start;
  min-width: 210px;
}

.edit-form {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.edit-form .field {
  width: 100%;
  margin: 0;
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.inline-form.tight {
  gap: 7px;
  align-items: center;
}

.inline-form .field {
  margin: 0;
}

.field.grow {
  flex: 1 1 240px;
}

.btn-sm {
  padding: 7px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}

.btn-sm:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: #3a3a3a;
}

.btn-sm.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

.btn-sm.is-primary:hover {
  filter: brightness(1.07);
  color: var(--accent-ink);
}

.btn-sm.is-danger {
  color: var(--danger);
  border-color: rgba(255, 111, 94, 0.3);
}

.btn-sm.is-danger:hover {
  background: rgba(255, 111, 94, 0.12);
  color: var(--danger);
}

/* ── основы районов ──────────────────────────────────────────────────────── */

.stems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stem {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px 2px 10px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px;
}

.stem-text.is-weak {
  color: var(--muted);
  font-style: italic;
}

.stem-x {
  border: 0;
  background: none;
  color: #555;
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 50%;
}

.stem-x:hover {
  color: var(--danger);
}

/* ── фильтры и поиск ─────────────────────────────────────────────────────── */

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill);
  padding: 6px;
  width: fit-content;
  max-width: 100%;
}

.filter {
  padding: 8px 17px;
  border-radius: var(--pill);
  font-size: 14px;
  color: var(--text-2);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.filter:hover {
  background: var(--surface-2);
  color: var(--text);
}

.filter.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-field {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 46px 13px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.search-input::placeholder {
  color: var(--muted);
}

.search-input:focus {
  border-color: var(--accent-dim);
  background: var(--surface-2);
}

/* Крестик, который рисует сам браузер, в тёмной теме выглядит инородно —
   сброс у нас свой, ссылкой, и он же виден с клавиатуры. */
.search-input::-webkit-search-cancel-button {
  display: none;
}

/* Подсказка о клавише. Курсор сквозь неё проходит: попасть мимо поля,
   целясь в поле, — обидно. */
.search-key {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  transition: opacity 140ms var(--ease);
}

.search-field:focus-within .search-key,
.search-field.is-filled .search-key {
  opacity: 0;
}

.search .select {
  padding: 12px 14px;
  border-radius: var(--pill);
  background: var(--surface);
}

.search-btn {
  padding: 13px 26px;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  transition: filter 160ms var(--ease);
}

.search-btn:hover {
  filter: brightness(1.06);
}

.search-clear {
  padding: 8px 14px;
  border-radius: var(--pill);
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid var(--line);
}

.search-clear:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* ── страницы списка ─────────────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
}

.more-btn {
  padding: 10px 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--text-2);
  font-size: 13px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.more-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* ── брак: текст до и после ──────────────────────────────────────────────── */

.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.review-head .card-title {
  margin-bottom: 6px;
}

.review-actions {
  display: flex;
  gap: 8px;
}

.review-actions form {
  margin: 0;
}

/* Ручное вмешательство целиком под одной створкой: брак разбирать не
   обязательно, и кнопки снаружи читались бы как список дел. */
.manual {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.manual .state-line,
.manual .review-actions {
  margin: 0;
}

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.review .compare {
  margin-bottom: 4px;
}

.compare-col {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 18px 20px;
  min-width: 0;
}

.compare-col.is-ours {
  border-color: rgba(204, 242, 74, 0.28);
}

.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.compare-body {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* Слева — что рерайт выбросил, справа — что добавил от себя.
   Именно вторая подсветка отвечает на вопрос «не выдумал ли он деталей». */
mark.diff-del,
mark.diff-add {
  border-radius: 4px;
  padding: 1px 2px;
  background: transparent;
}

mark.diff-del {
  color: #9a9a9a;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: line-through;
  text-decoration-color: #4a4a4a;
}

mark.diff-add {
  color: var(--accent);
  background: rgba(204, 242, 74, 0.11);
}

/* Найденное слово в куске исходника под строкой поиска — тем же акцентом, что
   добавленное в «Браке»: взгляд ищет один и тот же цвет. */
.source-hit {
  margin-top: 3px;
}

mark.hit {
  border-radius: 4px;
  padding: 0 2px;
  color: var(--accent);
  background: rgba(204, 242, 74, 0.11);
}

/* ── сырые данные ────────────────────────────────────────────────────────── */

details.raw {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

details.raw.card {
  border: 1px solid var(--line-soft);
  padding: 18px 22px;
}

details.raw summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}

details.raw summary:hover {
  color: var(--text-2);
}

details.raw pre,
.raw-block {
  margin: 12px 0 0;
  padding: 14px;
  background: #0c0c0c;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  max-height: 460px;
}

/* ── сообщения ───────────────────────────────────────────────────────────── */

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}

.banner {
  border-radius: var(--r-md);
  padding: 13px 17px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid rgba(255, 111, 94, 0.3);
  background: rgba(255, 111, 94, 0.08);
  color: #ffb3a8;
}

.banner.is-warn {
  border-color: rgba(245, 196, 81, 0.3);
  background: rgba(245, 196, 81, 0.08);
  color: #f3d68e;
}

.banner.is-good {
  border-color: rgba(204, 242, 74, 0.28);
  background: rgba(204, 242, 74, 0.07);
  color: var(--accent);
}

/* ── ленты ───────────────────────────────────────────────────────────────── */

.day-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Плашка округа. Схлопнута по умолчанию: округов дюжина, каналов в них сотни,
   и развёрнутый список целиком читать невозможно. */
details.plate {
  padding: 0;
}

.plate-head {
  display: flex;
  align-items: center;
  /* Перенос: в шапке кроме названия живут метки охвата, и на узком экране они
     иначе уезжают под счётчики. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
}

.plate-head::-webkit-details-marker {
  display: none;
}

/* Треугольник рисуем сами: у стандартного маркера нет ни цвета, ни поворота. */
.plate-head::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid var(--muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 160ms var(--ease);
  flex: none;
}

details.plate[open] > .plate-head::before {
  transform: rotate(90deg);
}

.plate-head:hover::before {
  border-left-color: var(--accent);
}

.plate-counts {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

details.plate .table-wrap {
  margin: 0;
  padding: 0 20px 16px;
}

/* Плашка внутри плашки: район в округе на странице источников. Отступ слева — чтобы
   было видно, что она вложенная; линия сверху отделяет соседние районы. */
details.sub-plate {
  border-top: 1px solid var(--line-soft);
}

details.sub-plate > .plate-head {
  padding: 12px 20px 12px 38px;
  font-size: 14px;
}

/* Плашка внутри карточки: сводка причин в «Браке». Отступы даёт сама карточка,
   поэтому у плашки свои убраны — иначе шапка и таблица уезжают вправо. */
details.inline-plate {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}

details.inline-plate > .plate-head {
  padding: 12px 0;
  font-size: 14px;
}

details.inline-plate .table-wrap {
  padding: 0;
}

/* Пост ленты: время и состояние сверху, дальше — то, что видит читатель. */
.feed-post {
  padding: 18px 22px;
}

/* Снятое руками гасим, но не прячем: это единственный сигнал качества. */
.feed-post.is-off {
  opacity: 0.55;
}

.feed-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.feed-time {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.feed-ref {
  margin-left: auto;
  font-size: 12px;
}

.feed-title {
  margin: 12px 0 8px;
  font-size: 17px;
  line-height: 1.35;
}

.feed-body {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
  /* Переносы строк несёт сам текст, а не разметка. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feed-body a {
  color: var(--accent);
}

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

/* Ролик в карточке брака: причина бывает «во вложении видео», и без него её не проверить. */
.clip {
  display: block;
  max-height: 320px;
  max-width: 100%;
  margin: 12px 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.shot img {
  display: block;
  max-height: 320px;
  /* Ширину ограничиваем отдельно: картинка приходит какая есть, а карточка
     из-за неё разъезжаться не должна. */
  max-width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* Перерисованный снимок — с подписью: что было в знаке и где оригинал. */
.shot.is-unmarked {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
}

.shot.is-unmarked figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
  color: var(--text-2);
}

.shot.is-unmarked figcaption .tag {
  margin-left: 0;
}

.shot-mark {
  overflow-wrap: anywhere;
}

/* Картинки нет — но сказать, что она была, надо: пост без неё читается иначе. */
.shot.is-missing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}

/* ── вход ────────────────────────────────────────────────────────────────── */

.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--shadow);
}

.login-card h1 {
  margin: 18px 0 6px;
  font-size: 26px;
  font-weight: 450;
  letter-spacing: -0.02em;
}

.login-card p.sub {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field > span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 7px;
}

.login-card .field input {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 160ms var(--ease);
}

.login-card .field input:focus {
  border-color: var(--accent-dim);
}

.btn {
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 560;
  margin-top: 10px;
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}

.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.error {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 111, 94, 0.1);
  border: 1px solid rgba(255, 111, 94, 0.28);
  color: #ffb3a8;
  font-size: 13px;
}

/* ── телефон: рубильники и проверка должны открываться с него ────────────── */

@media (max-width: 980px) {
  .two-col,
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .shell {
    padding: 12px 12px 60px;
  }

  .topbar {
    flex-wrap: wrap;
    border-radius: var(--r-lg);
    padding: 12px;
  }

  .nav {
    order: 3;
    width: 100%;
    margin-inline: 0;
  }

  .page-head h1 {
    font-size: 28px;
  }

  .card {
    padding: 18px 16px;
  }

  /* На телефоне поле занимает строку целиком, кнопка встаёт под ним:
     сжатое до двух слов, оно бесполезно. */
  .search-input {
    flex: 1 1 100%;
  }

  .search-btn {
    flex: 1 1 auto;
  }
}

/* ── редактор `/new` ─────────────────────────────────────────────────────────
   Веб-приложение для телефона: шапка, нижняя панель разделов, каналы отдельными
   карточками, шторки снизу. Монохром, один зелёный акцент (активное и «одобрить»),
   статус — точкой. Каркас и шторки — в конце файла («каркас приложения»). */

/* Сегмент: тихая подушка, активный пункт — единственное зелёное пятно. */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.seg-i {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}

.seg-i:hover {
  color: var(--text-2);
}

.seg-i.is-active {
  color: var(--accent);
  background: var(--surface-3);
}

.ed-date {
  color-scheme: dark;
}

.ed-select {
  height: 28px;
  padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 140ms var(--ease);
}

.ed-select:focus {
  border-color: var(--accent-dim);
}

/* Источник новости ссылкой: в шторке поста и в «Общих». */
.p-src {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  max-width: 38%;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
}

.p-src:hover {
  color: var(--text);
  border-bottom-color: currentColor;
}

.p-src-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-src-vk {
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0 3px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
}

/* ── вкладка «Источники» в /new ──────────────────────────────────────────── */
.ed-srcs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ed-src-add {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}

.ed-src-add > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}

.ed-src-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.ed-input {
  min-width: 0;
  flex: 1 1 140px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--card, #121212);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ed-src-head {
  padding: 8px 2px;
  font-size: 12px;
  color: var(--muted);
}

.ed-src-grp > summary,
.ed-src-part > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.ed-src-part > summary {
  padding-left: 22px;
  color: var(--muted);
  font-size: 12.5px;
}

.ed-src-cnt {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
}

.ed-src {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 30px;
  border-bottom: 1px solid var(--line);
}

.ed-src.is-off {
  opacity: 0.55;
}

.ed-src-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--text);
  text-decoration: none;
}

.ed-src-name:hover {
  text-decoration: underline;
}

.ed-src-nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-src-where {
  flex: none;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

.ed-src-tgl {
  flex: none;
  padding: 3px 10px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ed-src-tgl.is-on {
  color: #0a0a0a;
  background: var(--accent, #ccf24a);
  border-color: var(--accent, #ccf24a);
}

/* Пометка «плохой канал»: значок-треугольник, приглушён по умолчанию, тёплый когда помечен. */
.ed-src-bad-f {
  margin: 0;
  flex: none;
}
.ed-src-bad {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ed-src-bad .ic {
  width: 15px;
  height: 15px;
}
.ed-src-bad:hover {
  color: var(--warn);
}
.ed-src-bad.is-bad {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
/* Строка плохого канала — тонкая тёплая засечка слева, чтобы видеть в списке. */
.ed-src.is-bad {
  box-shadow: inset 2px 0 0 var(--warn);
}

.ed-src-more {
  flex: none;
  color: var(--muted);
  text-decoration: none;
  padding: 0 4px;
}

.ed-src-more:hover {
  color: var(--text);
}

/* Исходный текст поста из источника — в карточке /new, под фактами. */
.pv-src {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pv-src > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
}

.pv-src > summary:hover {
  color: var(--text);
}

.pv-src-text {
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
  background: var(--card, #121212);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Пометка городского поста, подхваченного в районном источнике («Общие»). */
.p-origin {
  flex: none;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}


.p-edit {
  display: contents;
}

.p-edit-body {
  display: grid;
  gap: 8px;
  max-width: 640px;
  padding: 10px 0 6px;
}


.ed-btn.sm {
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
}

.ed-btn.sm .ic {
  width: 13px;
  height: 13px;
}

.p-edit[open] > .ed-btn {
  background: var(--surface-3);
  color: var(--text);
}

.ed-input {
  width: 100%;
  padding: 6px 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 140ms var(--ease);
}

.ed-input:focus {
  border-color: var(--accent-dim);
}

.ed-area {
  width: 100%;
  padding: 8px 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 140ms var(--ease);
}

.ed-area:focus {
  border-color: var(--accent-dim);
}

.p-editform {
  display: grid;
  gap: 8px;
  margin: 0;
  justify-items: start;
}

/* ── пост целиком ───────────────────────────────────────────────────────── */

.pv-wrap {
  max-width: 760px;
}

.pv-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--muted);
  transition: color 120ms var(--ease);
}

.pv-back:hover {
  color: var(--text-2);
}

.pv {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 20px 22px;
}

.pv-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.pv-top .dot {
  margin-top: 0;
}

.pv-status {
  color: var(--text-2);
}

.pv-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pv-when {
  margin-left: auto;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pv-title {
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pv-shots {
  margin: 14px 0 0;
}

.pv-body {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pv-body a {
  color: var(--accent);
}

.pv-facts {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
}

.pv-fact {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}

.pv-k {
  flex: none;
  width: 96px;
  font-size: 12px;
  color: var(--muted);
}

.pv-v {
  min-width: 0;
  color: var(--text-2);
}

.pv-v a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}

.pv-v a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

/* Обзор «где стоит»: список каналов, в которых пост поставлен, с временем и «убрать».
   Родная постановка помечена «исходный» и так же снимается. */
.pv-placed {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pv-placed-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.pv-placed-h .ic {
  width: 13px;
  height: 13px;
  opacity: 0.75;
}

.pv-placed-list {
  display: grid;
  gap: 6px;
}

.pv-placed-empty {
  font-size: 13px;
  color: var(--muted);
}

.pv-pl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 13px;
}

.pv-pl.is-home {
  border-color: var(--line);
}

.pv-pl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-pl-where {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

.pv-pl-time {
  flex: none;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.pv-pl-rm {
  margin: 0;
  flex: none;
}

/* На телефоне строка не помещается в ряд: название и «убрать» оставляем сверху,
   «где» (округ/папка) переносим на свою строку, время прижато к кнопке. */
@media (max-width: 560px) {
  .pv-pl {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  .pv-pl-name {
    flex: 1 1 auto;
  }

  .pv-pl-where {
    order: 4;
    flex: 0 0 100%;
  }
}

/* Рассылка закрыта до одобрения — тихая подсказка вместо кнопки «ещё каналы». */
.pv-bc-gate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.pv-bc-gate .ic {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.pv-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pv-act form {
  margin: 0;
}

/* Кнопки действий на странице поста — с заливкой, чтобы отделяться от фона.
   Палитра та же, что у акцентных кнопок панели: главный — зелёная заливка,
   отклонить — тёплый красный контур, править — тихая подложка. */
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
  transition: background 140ms var(--ease), color 140ms var(--ease),
    border-color 140ms var(--ease), filter 140ms var(--ease);
}

.ed-btn::-webkit-details-marker {
  display: none;
}

.ed-btn:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: #3a3a3a;
}

.ed-btn.ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

.ed-btn.ok:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.07);
}

.ed-btn.no {
  background: rgba(255, 111, 94, 0.08);
  border-color: rgba(255, 111, 94, 0.3);
  color: var(--danger);
}

.ed-btn.no:hover {
  background: rgba(255, 111, 94, 0.15);
  border-color: rgba(255, 111, 94, 0.45);
  color: var(--danger);
}

/* Три кнопки в один ряд: створка правки раскрывается формой под ними. */
.pv-act .p-edit-body {
  flex-basis: 100%;
  width: 100%;
  max-width: 640px;
  margin-top: 4px;
}

.ic.mi {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── «своё время» в меню переноса ──────────────────────────────────────────── */
.p-time-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ed-time {
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ed-time:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── вкладка «Общие» ───────────────────────────────────────────────────────── */
.ed-common {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ed-cities {
  align-self: flex-start;
}

.ed-common-head {
  font-size: 12px;
  color: var(--muted);
}

/* Дерево выбора каналов для рассылки. */
.bc > summary {
  list-style: none;
  width: fit-content;
}

.bc > summary::-webkit-details-marker {
  display: none;
}

.bc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.bc-search {
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bc-search:focus {
  outline: none;
  border-color: var(--accent);
}

.bc-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
}

.bc-folder {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.bc-foldhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.bc-foldhead::-webkit-details-marker {
  display: none;
}

.bc-foldhead::before {
  content: "▸";
  color: var(--muted);
  font-size: 10px;
}

.bc-folder[open] > .bc-foldhead::before {
  content: "▾";
}

.bc-foldlbl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
}

.bc-foldname {
  font-size: 13px;
  font-weight: 600;
}

.bc-count {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bc-chans {
  display: flex;
  flex-direction: column;
  padding: 2px 10px 8px 28px;
  gap: 2px;
}

.bc-chan {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}

.bc-chan.is-placed {
  color: var(--muted);
  cursor: default;
}

/* Занятый канал, который можно снять («ещё каналы»): отмечен галочкой, кликабелен. */
.bc-chan.is-here {
  cursor: pointer;
}

.bc-chan.is-here .bc-placed {
  color: var(--text-2);
}

.bc-placed {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.bc-fold,
.bc-ch {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.bc-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.bc-sel {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.bc-at {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.bc-at .bc-time {
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.bc-send {
  margin-left: auto;
}

/* ── каркас приложения `/new` ───────────────────────────────────────────────
   Шапка сверху, разделы снизу, содержимое — колонкой до 760px. Шапка и нижняя
   панель полупрозрачные: под ними видно, что список продолжается. */

.ed-body {
  --top-h: 56px;
  --tab-h: 60px;
  --tab-pad-t: 8px;
  --tab-pad-b: max(14px, env(safe-area-inset-bottom));
  --tab-total: calc(var(--tab-h) + var(--tab-pad-t) + var(--tab-pad-b));
  --col: 760px;
  background: var(--bg);
  padding-bottom: calc(var(--tab-total) + 28px);
  -webkit-tap-highlight-color: transparent;
}

.ed-main {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 12px;
}

.ed-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(7, 7, 7, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
}

.ed-top-in {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--col);
  height: var(--top-h);
  margin: 0 auto;
  padding: 0 12px;
}

.ed-top-sp {
  flex: 1;
}

.ed-top-h {
  margin: 0;
  padding-left: 4px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* Округ — крупным словом, как заголовок экрана; нажал — список округов. */
.ed-okbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 42px;
  margin-left: -6px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 140ms var(--ease);
}

.ed-okbtn:hover,
.ed-okbtn:focus-visible {
  background: var(--surface-2);
}

.ed-okbtn-code {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.ed-okbtn-t {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ed-okbtn-chev {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.ed-okbtn-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--pill);
  background: rgba(245, 196, 81, 0.16);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}

.ed-daychip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(204, 242, 74, 0.35);
  border-radius: var(--pill);
  background: rgba(204, 242, 74, 0.08);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ed-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.ed-iconbtn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.ed-iconbtn .ic {
  width: 20px;
  height: 20px;
}

.ed-iconbtn-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface-2);
}

/* Нижняя панель разделов. */
.ed-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: var(--tab-pad-t) 12px var(--tab-pad-b);
  background: rgba(13, 13, 13, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--line-soft);
}

.ed-tab {
  flex: 1;
  max-width: 200px;
  height: var(--tab-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  transition: color 140ms var(--ease);
}

.ed-tab:hover {
  color: var(--text-2);
}

.ed-tab.is-active {
  color: var(--accent);
}

.ed-tab-ic {
  position: relative;
  display: inline-flex;
}

.ed-tab-ic .ic {
  width: 23px;
  height: 23px;
}

.ed-tab-badge {
  position: absolute;
  top: -5px;
  left: 15px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--warn);
  color: #1a1203;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 2px #0d0d0d;
}

/* Сводка дня под шапкой. */
.ed-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 4px 12px;
  font-size: 13px;
  color: var(--muted);
}

.ed-tally b {
  font-weight: 600;
  color: var(--text-2);
}

.ed-tally-main b {
  color: var(--text);
}

.ed-tally .is-need,
.ed-tally .is-need b {
  color: var(--warn);
}

.ed-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}

/* ── каналы карточками ─────────────────────────────────────────────────── */

.ed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* `overflow: clip` скругляет углы, не ломая липкую шапку канала (`hidden` её ломает). */
.ch {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: clip;
  scroll-margin-top: calc(var(--top-h) + 12px);
}

.ch-head {
  position: sticky;
  top: calc(var(--top-h) + env(safe-area-inset-top));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 12px 0 14px;
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.ch-head::-webkit-details-marker {
  display: none;
}

.ch[open] > .ch-head {
  border-bottom: 1px solid var(--line-soft);
}

.ch-plat {
  display: inline-flex;
  flex: none;
  color: var(--muted);
}

.ch-plat .ic {
  width: 16px;
  height: 16px;
}

.ch-name {
  min-width: 0;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ch-dist {
  flex: none;
  font-size: 13px;
  color: var(--muted);
}

.ch-need {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--pill);
  background: rgba(245, 196, 81, 0.16);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
}

.ch-chev {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--muted);
  transform: rotate(-90deg);
  transition: transform 180ms var(--ease);
}

.ch[open] > .ch-head .ch-chev {
  transform: none;
}

/* Канал, на который пришли по ссылке, — зелёная засечка слева. */
.ch.is-target > .ch-head {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── строка поста ────────────────────────────────────────────────────────
   Два слоя: под строкой — цвет действия свайпа, сверху — сама строка, которую
   тянет палец. Строка не выделяется и не зовёт системное меню: зажатие — наше. */

.p {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  scroll-margin-top: calc(var(--top-h) + 60px);
}

.p + .p::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 70px;
  z-index: 2;
  height: 1px;
  background: var(--line-soft);
}

.p-under {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
}

.p-under span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.p-under .ic {
  width: 20px;
  height: 20px;
  transition: transform 160ms var(--ease);
}

.p[data-swipe="ok"] .p-under {
  display: flex;
  background: var(--accent);
  color: var(--accent-ink);
}

.p[data-swipe="no"] .p-under {
  display: flex;
  justify-content: flex-end;
  background: var(--danger);
  color: #1d0603;
}

.p[data-swipe="ok"] .p-under-no,
.p[data-swipe="no"] .p-under-ok {
  display: none;
}

/* Действие не разрешено статусом — тянется туго и без цвета. */
.p[data-swipe="none"] .p-under {
  display: flex;
  background: var(--surface-2);
}

.p[data-swipe="none"] .p-under span {
  display: none;
}

.p.is-armed .p-under .ic {
  transform: scale(1.3);
}

.p-fg {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46px 8px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 10px;
  padding: 12px 6px 12px 14px;
  background: var(--surface);
  cursor: pointer;
  transition: background 120ms var(--ease);
}

.p.is-dragging .p-fg {
  transition: none;
}

.p.is-pressed .p-fg {
  background: var(--surface-2);
}

@media (hover: hover) {
  .p-fg:hover {
    background: #161616;
  }
}

.p-time {
  padding-top: 1px;
  font-size: 13.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.p-time-q {
  display: inline-flex;
  color: var(--muted);
}

.p-time-q .ic {
  width: 16px;
  height: 16px;
}

.ic {
  width: 14px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
}

.dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: #4a4a4a;
}

.dot.amber {
  background: var(--warn);
}

.dot.blue {
  background: var(--info);
}

.dot.green {
  background: var(--accent);
}

.dot.red {
  background: var(--danger);
}

.p-body {
  min-width: 0;
}

.p-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-user-drag: none;
}

.p.is-rej .p-title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}

.p-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}

.p-kind {
  display: inline-flex;
  flex: none;
}

.p-srcname {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-where {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-srcname + .p-where::before {
  content: "· ";
}

.p-exp {
  flex: none;
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: var(--text-2);
}

.p-exp.is-soon {
  color: var(--warn);
}

.p-exp.is-over {
  color: var(--danger);
}

.p-emg {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn);
}

.p-status {
  flex: none;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.p-more {
  position: relative;
  align-self: center;
  width: 36px;
  height: 36px;
  margin: -6px 0;
  padding: 0 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}

.p-more:hover,
.p-more:focus-visible {
  background: var(--surface-3);
  color: var(--text);
}

.p.is-dim .p-fg > :not(.p-more) {
  opacity: 0.5;
}

.p.is-busy .p-fg {
  opacity: 0.55;
  cursor: progress;
}

.p.is-pending .p-fg {
  background: #141414;
}

.p:target .p-fg {
  box-shadow: inset 3px 0 0 var(--accent);
  animation: ed-flash 1.3s var(--ease) 1;
}

@keyframes ed-flash {
  from {
    background: #1d2110;
  }
  to {
    background: var(--surface);
  }
}

/* Очередь канала: свёрнута, но выглядит строкой списка — счётчик и стрелка. */
.chq {
  border-top: 1px solid var(--line-soft);
}

.chq-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 12px 0 14px;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 120ms var(--ease);
}

.chq-head::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .chq-head:hover {
    background: #161616;
  }
}

.chq-ic {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}

.chq-ic .ic {
  width: 15px;
  height: 15px;
}

.chq-n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.chq-chev {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--muted);
  transition: transform 180ms var(--ease);
}

.chq[open] > .chq-head .chq-chev {
  transform: rotate(90deg);
}

.chq[open] > .chq-head {
  border-bottom: 1px solid var(--line-soft);
}

.chq-list .p-fg {
  background: #101010;
}

/* «Общие»: строки без свайпа, под строкой — выбор каналов. */
.ch-flat {
  overflow: clip;
}

.p-static {
  overflow: visible;
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-touch-callout: default;
}

.p-static .p-fg {
  cursor: default;
}

.p-bc {
  margin-top: 10px;
}

.p-origin {
  flex: none;
  font-size: 12px;
  color: var(--text-2);
}

/* ── шторки ───────────────────────────────────────────────────────────────
   Снизу на телефоне, по центру на широком экране. Видимость — классом `is-visible`
   поверх `open`, чтобы было что анимировать и на выходе. */

.sh {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: min(88dvh, 900px);
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  overscroll-behavior: contain;
}

.sh[open] {
  display: flex;
  flex-direction: column;
}

.sh.is-visible {
  transform: translateY(0);
}

.sh.is-dragging {
  transition: none;
}

.sh::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 300ms var(--ease);
}

.sh.is-visible::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.sh-grab {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 9px 0 7px;
  cursor: grab;
  touch-action: none;
}

.sh-grab::before {
  content: "";
  width: 38px;
  height: 5px;
  border-radius: var(--pill);
  background: #3a3a3a;
}

/* Крестик-закрыть справа вверху шторки — запасной выход на телефоне (как у шторки «+»). */
.sh-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  z-index: 2;
}
.sh-x:active {
  background: var(--surface-3);
}
.sh-x svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.sh-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px 14px;
}

.sh-pad {
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
  .sh {
    inset: 0;
    width: min(540px, calc(100vw - 48px));
    max-height: min(84dvh, 860px);
    margin: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: transform 220ms var(--ease), opacity 220ms var(--ease);
  }

  .sh.is-visible {
    opacity: 1;
    transform: none;
  }

  .sh-grab {
    padding: 6px 0 4px;
  }

  .sh-grab::before {
    visibility: hidden;
  }
}

/* Список округов. */
.okl {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.okl-i {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}

.okl-i:last-child {
  border-bottom: 0;
}

.okl-code {
  font-weight: 600;
}

.okl-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.okl-need {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--pill);
  background: rgba(245, 196, 81, 0.16);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
}

.okl-check {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.okl-i.is-active .okl-code {
  color: var(--accent);
}

/* Фильтры. */
.flt {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.seg-wide {
  display: flex;
  width: 100%;
  padding: 3px;
  border-radius: 12px;
}

.seg-wide .seg-i {
  flex: 1;
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 14px;
  text-align: center;
}

.seg-wide .seg-arrow {
  flex: 0 0 44px;
}

.seg-wide .seg-arrow .ic {
  width: 18px;
  height: 18px;
}

.flt-day {
  display: grid;
  gap: 8px;
}

.flt-date {
  margin: 0;
}

.flt-date .ed-date {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}

.chip.is-active {
  border-color: rgba(204, 242, 74, 0.4);
  background: rgba(204, 242, 74, 0.08);
  color: var(--accent);
}

.flt-reset {
  justify-self: center;
  padding: 8px 16px;
  color: var(--muted);
  font-size: 14px;
}

/* Шторка поста: сам пост, под ним действия. */
.sh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--muted);
}

.sh-meta .dot {
  margin-top: 0;
}

.sh-meta-status {
  color: var(--text-2);
}

.sh-meta-sep::before {
  content: "·";
}

.sh-shots {
  display: flex;
  gap: 8px;
  margin: 12px -18px 0;
  padding: 0 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sh-shots:empty {
  display: none;
}

.sh-shots::-webkit-scrollbar {
  display: none;
}

.sh-shots img {
  flex: none;
  height: 150px;
  max-width: 82%;
  border-radius: 12px;
  object-fit: cover;
  background: var(--surface-2);
  scroll-snap-align: start;
}

.sh-shots img:only-child {
  max-width: 100%;
  height: auto;
  max-height: 220px;
}

.sh-title {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.sh-text {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sh-text:empty,
.sh-src:empty {
  display: none;
}

.sh-text a {
  color: var(--accent);
}

.sh-src {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
}

.sh-src .p-src {
  max-width: 100%;
}

.sh-src .gde-src-link {
  margin-top: 0;
}

.sh-actions {
  flex: none;
  display: grid;
  gap: 14px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.sh-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sh-primary:has(> [hidden]) {
  grid-template-columns: 1fr;
}

.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 140ms var(--ease), transform 100ms var(--ease);
}

.sh-btn .ic {
  width: 18px;
  height: 18px;
}

.sh-btn.ok {
  background: var(--accent);
  color: var(--accent-ink);
}

.sh-btn.no {
  background: rgba(255, 111, 94, 0.14);
  color: var(--danger);
}

.sh-btn:hover {
  filter: brightness(1.08);
}

.sh-btn:active,
.sh-tile:active .sh-tile-ic {
  transform: scale(0.96);
}

.sh-tiles {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}

.sh-tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 96px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.sh-tile-ic {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  transition: background 140ms var(--ease), transform 100ms var(--ease);
}

.sh-tile:hover .sh-tile-ic {
  background: #2b2b2b;
}

.sh-tile-ic .ic {
  width: 20px;
  height: 20px;
}

.sh-tile.is-no .sh-tile-ic {
  color: var(--danger);
}

.sh-primary[hidden],
.sh-tiles[hidden],
.sh-actions[hidden],
.sh-btn[hidden],
.sh-tile[hidden],
.sh-view[hidden],
.pv-act[hidden],
.pv-act [hidden] {
  display: none !important;
}

.sh-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 14px;
  font-size: 17px;
  font-weight: 600;
}

.sh-back {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}

.sh-back .ic {
  width: 18px;
  height: 18px;
}

.sh-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.sh-slots:empty {
  display: none;
}

.sh-slot {
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.sh-slot:hover {
  border-color: rgba(204, 242, 74, 0.4);
}

/* Жалоба: причины-пилюли (мультивыбор) и поле своего текста. Подпись на пилюле короткая,
   полная — во всплывашке title (DESIGN: подпись-инструкция только в title). */
.sh-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
}

.sh-reason {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}

.sh-reason:hover {
  border-color: rgba(204, 242, 74, 0.4);
}

.sh-reason.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.sh-reportform .ed-area {
  width: 100%;
}

/* Две кнопки жалобы рядом: «Отправить» и «Снять пост» (красная). */
.sh-report-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.sh-report-actions .ed-btn {
  flex: 1;
  justify-content: center;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 15px;
}

.sh-timeform {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
}

.sh-timeform .ed-time {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 17px;
  color-scheme: dark;
}

.sh-timeform .ed-btn,
.sh-editform .ed-btn {
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
}

.sh-editform {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 16px — меньше айфон увеличивает страницу при фокусе на поле. */
.sh-editform .ed-input,
.sh-editform .ed-area {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 16px;
}

/* Подсказка снизу: сообщение и, если действие можно отменить, «Отменить». */
.ed-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-total) + 12px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 24px);
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #222;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.ed-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.ed-toast.is-error {
  border-color: rgba(255, 111, 94, 0.4);
  color: var(--danger);
}

.ed-toast-undo {
  flex: none;
  margin: -6px -6px -6px 0;
  padding: 8px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Пост целиком на телефоне. */
@media (max-width: 680px) {
  .pv {
    padding: 16px 14px;
    border-radius: 16px;
  }

  .pv-title {
    font-size: 19px;
  }

  .pv-k {
    width: 78px;
  }
}

/* Пока открыта шторка, страница под ней не прокручивается. */
html.sh-lock,
html.sh-lock body {
  overflow: hidden;
}

.sh:focus {
  outline: none;
}

/* Заголовок внутри текста поста (жирная первая строка) — как в канале, крупнее текста. */
.sh-text > b:first-child {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.sh-title[hidden] {
  display: none;
}

/* Строка меты — всегда одна строка в границах карточки: лишнее уходит в многоточие,
   срок годности не сжимается. Страница вбок не едет ни от какой строки. */
.ed-main {
  overflow-x: clip;
}

.p-meta {
  overflow: hidden;
}

.p-meta .p-src,
.p-meta .p-origin {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-meta .p-src {
  border-bottom: 0;
}

.p-meta .p-src + .p-origin::before {
  content: "· ";
}

/* Число постов у города в выборе — нейтральное: это объём, а не тревога. */
.okl-n {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

/* Пост, который ждёт решения, — тёплый фон и засечка: виден в любом длинном списке. */
.p[data-status="review"] .p-fg {
  background: #1d1a10;
  box-shadow: inset 3px 0 0 var(--warn);
}

@media (hover: hover) {
  .p[data-status="review"] .p-fg:hover {
    background: #231f12;
  }
}

.p[data-status="review"].is-pressed .p-fg {
  background: #29240f;
}

/* Пузырь «к ждущим»: над нижней панелью, по нажатию — к следующему ждущему посту. */
.ed-jump {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-total) + 12px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(245, 196, 81, 0.35);
  border-radius: var(--pill);
  background: #262012;
  color: var(--warn);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transform: translateX(-50%);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ed-jump[hidden] {
  display: inline-flex;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

.ed-jump:active {
  transform: translateX(-50%) scale(0.96);
}

.ed-jump .ic {
  width: 18px;
  height: 18px;
  transition: transform 180ms var(--ease);
}

.ed-jump.is-up .ic {
  transform: rotate(180deg);
}

.ed-jump-n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--pill);
  background: var(--warn);
  color: #1a1203;
  font-size: 13px;
  font-weight: 700;
}

/* Подсказка снизу не прячется под пузырём. */
.ed-body.has-jump .ed-toast {
  bottom: calc(var(--tab-total) + 66px);
}

/* Пост, к которому привёл пузырь, — короткая вспышка. */
.p.is-flash .p-fg {
  animation: ed-flash-warn 1.1s var(--ease) 1;
}

@keyframes ed-flash-warn {
  from {
    background: #3a3014;
  }
  to {
    background: #1d1a10;
  }
}

/* ── вкладка «Где?» ──────────────────────────────────────────────────────────
   Карточка поста без района: что увидел геокодер, районы-кандидаты кнопками, ручной
   выбор деревом и «снять». Тёплая точка — ждёт решения. */
/* У карточки «где?» нет времени — убираем колонку времени из сетки строки. */
.gde-card .p-fg {
  grid-template-columns: 10px minmax(0, 1fr);
  padding: 12px 14px;
  cursor: default;
}

.gde-card .p-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gde-card .dot {
  margin-top: 6px;
}

/* Шапка карточки: заголовок слева, «снять» отдельно справа сверху. */
.gde-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gde-title {
  flex: 1;
  min-width: 0;
}

/* Раскрытие полного текста поста и ссылка на источник. */
.gde-text {
  margin-top: -2px;
}

.gde-text-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.gde-text-sum::-webkit-details-marker {
  display: none;
}

.gde-text-sum .ic {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.gde-text-chev {
  transition: transform 180ms var(--ease);
}

.gde-text[open] .gde-text-chev {
  transform: rotate(180deg);
}

.gde-text-body {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}

.gde-text-p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.gde-src-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}

.gde-src-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

.gde-src-link .mi {
  width: 12px;
  height: 12px;
}

.gde-seen {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.gde-seen b {
  color: var(--text-2);
  font-weight: 600;
}

.gde-seen-ic {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--warn);
}

.gde-pick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.gde-pick-h {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}

.gde-pick-f {
  margin: 0;
}

/* Кнопка района: кандидат — салатовым (главное действие), в дереве — тихой подложкой. */
.gde-pick {
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}

.gde-pick:hover {
  border-color: var(--accent-dim);
}

.gde-pick.is-cand {
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color: var(--text);
  font-weight: 600;
}

.gde-pick.is-cand:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface-2));
}

/* Низ карточки: ручной выбор слева, «снять» справа. */
.gde-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.gde-manual {
  min-width: 0;
}

.gde-manual-sum {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}

.gde-manual-sum::-webkit-details-marker {
  display: none;
}

.gde-manual-sum .ic {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.gde-manual-chev {
  margin-left: auto;
  transition: transform 180ms var(--ease);
}

.gde-manual[open] .gde-manual-chev {
  transform: rotate(180deg);
}

.gde-manual-body {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 4px;
}

.gde-okr-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}

.gde-okr-sum::-webkit-details-marker {
  display: none;
}

.gde-okr-sum:hover {
  background: var(--surface-2);
}

.gde-okr-chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform 180ms var(--ease);
}

.gde-okr[open] .gde-okr-chev {
  transform: rotate(90deg);
}

.gde-okr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 10px 10px;
}

.gde-drop-f {
  margin: 0;
  flex: none;
}

.gde-drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}

.gde-drop:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.gde-drop .ic {
  width: 15px;
  height: 15px;
}

/* «Где?» — переработка 06.11: район-кандидаты цветным текстом (без баблов), «снять» и
   «⋯» (просмотр поста в шторке) вверху справа, «выбрать район» — дерево ниже. */
.gde-head-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.gde-drop-f {
  margin: 0;
}

.gde-drop {
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.gde-drop:hover {
  text-decoration: underline;
}

.gde-pick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
}

.gde-pick-h {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Район-кандидат — цветной текст, не пилюля. */
.gde-cand {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.gde-cand:hover {
  text-decoration: underline;
}

.gde-sep {
  color: var(--line);
  font-size: 12px;
}

.gde-sep-or {
  color: var(--muted);
  opacity: 0.5;
}

.gde-none {
  font-size: 13px;
  color: var(--muted);
}

/* «выбрать район» — тихая текстовая раскрывашка; дерево раскрывается на всю ширину. */
.gde-manual {
  min-width: 0;
}

.gde-manual[open] {
  flex-basis: 100%;
}

.gde-manual-sum {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}

.gde-manual-sum::-webkit-details-marker {
  display: none;
}

.gde-manual-sum:hover {
  color: var(--accent);
}

.gde-manual-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 4px;
}

/* Район-кнопка в дереве — маленькая пилюля (их много, удобнее тапать). */
.gde-chip {
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.gde-chip:hover {
  border-color: var(--accent-dim);
}

/* «Где?» правки 06.11: заметная «выбрать район», мультивыбор районов, галочка-подтверждение. */

/* «Выбрать район» — кнопка-раскрывашка с акцентной рамкой, не сливается с фоном. */
.gde-manual {
  margin-top: 2px;
}

.gde-manual-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 13px;
  border: 1px solid var(--accent-dim);
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.gde-manual-sum::-webkit-details-marker {
  display: none;
}

.gde-manual-sum:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.gde-manual-sum .ic {
  width: 15px;
  height: 15px;
}

.gde-manual-chev {
  transition: transform 180ms var(--ease);
}

.gde-manual[open] .gde-manual-chev {
  transform: rotate(180deg);
}

/* Мультивыбор районов — чекбоксы по округам, внизу «одобрить». */
.gde-multi {
  margin: 8px 0 0;
}

.gde-multi-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 232px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 4px;
}

.gde-okr-n {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gde-okr-sum .gde-okr-chev {
  margin-left: 8px;
}

.gde-okr-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 6px 8px;
}

.gde-ch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.gde-ch:hover {
  background: var(--surface-2);
}

.gde-ch input {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
  flex: none;
}

.gde-okr-all {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
  flex: none;
  margin-right: 2px;
  cursor: pointer;
}

/* Частичный выбор районов — зелёная отметка на свёрнутом округе. */
.gde-okr-all:indeterminate {
  accent-color: var(--accent);
}

.gde-multi-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Галочка-подтверждение после выбора района (как при оплате): круг + галочка ~0.8 c. */
.gde-ok {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
}

.gde-ok.is-on {
  pointer-events: all;
  animation: gde-ok-fade 0.82s ease forwards;
}

.gde-ok-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.4);
}

.gde-ok.is-on .gde-ok-circle {
  animation: gde-ok-pop 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.25) forwards;
}

.gde-ok-circle svg {
  width: 56px;
  height: 56px;
}

.gde-ok-ring {
  display: none;
}

.gde-ok-tick {
  fill: none;
  stroke: #0a0a0a;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.gde-ok.is-on .gde-ok-tick {
  animation: gde-ok-draw 0.34s 0.18s ease forwards;
}

@keyframes gde-ok-pop {
  to {
    transform: scale(1);
  }
}

@keyframes gde-ok-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes gde-ok-fade {
  0%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gde-ok.is-on .gde-ok-circle,
  .gde-ok.is-on .gde-ok-tick {
    animation: none;
  }
  .gde-ok.is-on .gde-ok-circle {
    transform: scale(1);
  }
  .gde-ok-tick {
    stroke-dashoffset: 0;
  }
}

/* ── «Подозрение»: вход-значок, карточка и шторка сравнения ─────────────────── */

/* Значок-предупреждения в шапке «Где?» — тёплым цветом «ждёт решения». */
.ed-warnbtn {
  color: var(--warn);
}
.ed-warnbtn:hover {
  color: var(--warn);
}
/* Очередь пуста: вход в «Подозрение» остаётся, но приглушён и без бейджа. */
.ed-warnbtn.is-empty {
  color: var(--muted);
}
.ed-warnbtn.is-empty:hover {
  color: var(--text-2);
}
.ed-warnbtn-b {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--warn);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Строка-предупреждение в карточке: на что похоже и на сколько. */
.susp-warn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.susp-warn:hover {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
}
.susp-warn b {
  color: var(--text);
  font-weight: 600;
}
.susp-warn-ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--warn);
}

/* Шторка сравнения: два поста рядом (на телефоне — друг под другом). */
.susp-cmp {
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .susp-cmp {
    grid-template-columns: 1fr 1fr;
  }
}
.susp-side {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px;
}
.susp-side-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.susp-side-k {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
/* Плохой канал — тёплой меткой, чтобы глаз сразу отличал. */
.susp-side:last-child .susp-side-k {
  color: var(--warn);
}
.susp-side-at {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.susp-shots {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 8px 0;
}
.susp-shots img {
  height: 120px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.susp-text {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

/* Подвал шторки: куда/когда, «ещё каналы» и решение — одной формой. */
.susp-foot {
  margin: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* Куда и когда — парой строк «ключ · значение», как факты поста в ленте. */
.susp-where {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.susp-where-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.susp-where-k {
  width: 46px;
  flex: none;
  color: var(--muted);
}
.susp-where-v {
  color: var(--text);
  font-weight: 600;
}

/* Кнопка своего канала — куда пост и шёл. Отмечена (салатовым) по умолчанию; тап снимает. */
.susp-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 13px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.susp-home input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.susp-home-ic {
  width: 15px;
  height: 15px;
}
.susp-home:not(:has(input:checked)) {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.susp-home:not(:has(input:checked)) .susp-home-ic {
  display: none;
}

/* Выбор канала — то же дерево, что в «Где?» (классы gde-*). В шторке высоту дерева
   ограничиваем и даём свою прокрутку, чтобы кнопки решения оставались видны. */
.susp-tree {
  margin-bottom: 10px;
}
.susp-tree-scroll {
  max-height: 38vh;
  overflow-y: auto;
}

/* Решение: публиковать (салатовым, главное) или снять (красным). */
.susp-act {
  display: flex;
  gap: 10px;
}
.susp-btn {
  flex: 1;
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.susp-yes {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.susp-no {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}
.susp-no:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ── «+» создать пост (вкладка «Общие») ───────────────────────────────────────
   Круглая кнопка над нижней панелью; шторка с выбором действия и тремя формами.
   Описания плиток — мелкой строкой под названием, тускло (DESIGN.md §1, §7). */
.cr-fab{position:fixed;z-index:30;right:max(16px,calc(50% - 380px + 16px));bottom:84px;
  width:58px;height:58px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(204,242,74,.26);cursor:pointer}
.cr-fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cr-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.cr-scrim.is-on{opacity:1;pointer-events:auto}
.cr-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:760px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
  transform:translateY(103%);transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s,visibility .26s;
  max-height:88vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.cr-sheet.is-on{transform:none}
@media(min-width:720px){.cr-sheet{bottom:auto;top:50%;left:50%;right:auto;
  transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;pointer-events:none;
  width:min(480px,92vw);border:1px solid var(--line);border-radius:22px;max-height:85vh}
  .cr-sheet.is-on{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;pointer-events:auto}}
.cr-grip{width:46px;height:5px;border-radius:3px;background:var(--line);margin:11px auto 4px;flex:none}
.cr-x{position:absolute;top:10px;right:12px;width:40px;height:40px;display:grid;place-items:center;
  border:0;border-radius:11px;background:var(--surface-2);color:var(--text-2);cursor:pointer;z-index:2}
.cr-x:active{background:var(--surface-3)}
.cr-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.cr-scroll{overflow:auto;padding:6px 18px 20px}
.cr-view{display:none}.cr-view.is-on{display:block;animation:cr-fade .2s}
@keyframes cr-fade{from{opacity:0;transform:translateY(4px)}}
.cr-title{font-size:19px;font-weight:650;text-align:center;padding:6px 0 14px}
.cr-sub{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;padding:4px 0 14px}
.cr-back{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);cursor:pointer}
.cr-back svg,.cr-chev svg,.cr-tic svg,.cr-tree-sum svg,.cr-foldcar svg,.cr-go svg,.cr-tree-car svg{
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.cr-tiles{display:flex;flex-direction:column;gap:10px}
.cr-tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:13px 14px}
.cr-tile:active{background:var(--surface-3)}
.cr-tic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--surface-3);color:var(--accent)}
.cr-tic svg{width:22px;height:22px}
.cr-tbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.cr-tt{font-size:16px;font-weight:600;color:var(--text)}
.cr-ts{font-size:11.5px;color:var(--muted)}
.cr-chev{margin-left:auto;color:var(--muted)}.cr-chev svg{width:20px;height:20px}

.cr-in{width:100%;font-size:16px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);
  border-radius:13px;padding:13px 14px;outline:none;margin:0 0 12px}
.cr-in:focus{border-color:var(--accent-dim)}
.cr-area{resize:vertical;min-height:118px;line-height:1.45}

.cr-tree{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);margin:0 0 12px;overflow:hidden}
.cr-tree-sum{display:flex;align-items:center;gap:10px;padding:13px 14px;font-size:15px;cursor:pointer;list-style:none}
.cr-tree-sum::-webkit-details-marker{display:none}
.cr-tree-sum>svg{width:20px;height:20px;color:var(--accent)}
.cr-tree-cnt{margin-left:auto;color:var(--accent);font-size:13px}
.cr-tree-car{color:var(--muted);transition:transform .2s}.cr-tree-car svg{width:20px;height:20px}
.cr-tree[open] .cr-tree-car{transform:rotate(90deg)}
.cr-tree-body{border-top:1px solid var(--line-soft);padding:10px 12px}
.cr-search{width:100%;font-size:15px;color:var(--text);background:var(--surface-3);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;margin-bottom:8px;outline:none}
.cr-fold{border-bottom:1px solid var(--line-soft)}.cr-fold:last-child{border:0}
.cr-foldhead{display:flex;align-items:center;gap:10px;padding:9px 2px}
.cr-foldlbl{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer}
.cr-foldnm{font-size:14.5px;font-weight:550}
.cr-foldc{color:var(--muted);font-size:12.5px}
.cr-foldcar{border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:transform .2s;padding:4px}
.cr-foldcar svg{width:20px;height:20px}
.cr-fold.is-open .cr-foldcar{transform:rotate(90deg)}
.cr-chans{display:none;padding:2px 0 8px 30px}
.cr-fold.is-open .cr-chans{display:block}
.cr-chan{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:14px;color:var(--text-2);cursor:pointer}
.cr-ch,.cr-fold-all{appearance:none;-webkit-appearance:none;width:21px;height:21px;flex:none;margin:0;
  border:1.75px solid var(--muted);border-radius:6px;display:grid;place-items:center;position:relative;cursor:pointer}
.cr-ch:checked,.cr-fold-all:checked{background:var(--accent);border-color:var(--accent)}
.cr-ch:checked::after,.cr-fold-all:checked::after{content:"";width:11px;height:6px;
  border:2px solid var(--accent-ink);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.cr-fold-all:indeterminate{background:var(--accent-dim);border-color:var(--accent-dim)}

.cr-slots{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.cr-slot{font-size:14px;padding:9px 13px;border-radius:999px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2)}
.cr-slot.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.cr-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:2px 0 10px}
.cr-or::before,.cr-or::after{content:"";height:1px;background:var(--line-soft);flex:1}
.cr-go{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:650;border:0;border-radius:14px;padding:15px;margin-top:4px}
.cr-go svg{width:20px;height:20px;stroke-width:2.2}

/* «+» выбор времени: панельная сетка слотов + крупные поля даты/времени. */
#cr-slots{margin:2px 0 12px}
.sh-slot.is-sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.cr-exact{margin:0 0 4px}
.cr-exact .ed-time{color-scheme:dark}

/* «+» добавить фото/видео + «убрать водяной знак». */
.cr-media{margin:0 0 12px}
.cr-media-add{display:inline-flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;
  border:1px dashed var(--line);border-radius:13px;background:var(--surface-2);color:var(--text-2);font-size:15px}
.cr-media-add:active{background:var(--surface-3)}
.cr-media-add svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cr-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.cr-thumbs:empty{display:none}
.cr-thumbs{margin-top:10px}
.cr-thumb{position:relative;width:74px;height:74px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-3)}
.cr-thumb img,.cr-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.cr-thumb-x{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;cursor:pointer}
.cr-thumb-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cr-vidmark{position:absolute;left:4px;bottom:4px;color:#fff;opacity:.9}
.cr-vidmark svg{width:16px;height:16px;fill:currentColor}
.cr-wm{display:flex;align-items:center;gap:11px;margin-top:12px;font-size:14.5px;color:var(--text-2);cursor:pointer}

/* «+» выбор дня чипами (горизонтальный скролл). */
.cr-days{display:flex;gap:8px;overflow-x:auto;margin:2px 0 10px;padding-bottom:2px;scrollbar-width:none}
.cr-days::-webkit-scrollbar{display:none}
.cr-day{flex:none;padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);font-size:14px}
.cr-day.is-sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* «+» прокручиваемый выбор времени: сетка слотов в коробке с прокруткой. */
.cr-times{max-height:230px;overflow-y:auto;padding:8px;margin:2px 0 6px;
  border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}
.cr-times::-webkit-scrollbar{width:8px}
.cr-times::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* «+» время: мелкие баблы слотов + «своё время» (две прокручиваемые колонки часы:минуты). */
.cr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.cr-chip{padding:8px 15px;border-radius:999px;cursor:pointer;font-size:14px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2)}
.cr-chip.is-sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.cr-own-btn{border-style:dashed}
.cr-own-btn.is-sel{border-style:solid}
.cr-wheel{display:flex;align-items:stretch;justify-content:center;gap:2px;margin:8px 0 6px;
  border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);padding:8px 6px;position:relative}
.cr-wheel[hidden]{display:none}
.cr-wheel::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:44px;transform:translateY(-50%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:10px;pointer-events:none}
.cr-col{height:176px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:66px 6px;
  scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cr-col::-webkit-scrollbar{display:none}
.cr-cell{flex:none;height:40px;min-width:62px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:10px;background:transparent;color:var(--text-2);font-size:18px;scroll-snap-align:center;
  font-variant-numeric:tabular-nums}
.cr-cell.is-sel{background:var(--accent);color:var(--accent-ink);font-weight:700}
.cr-sep{display:grid;place-items:center;font-size:22px;color:var(--muted);padding:0 2px}