/* ============================================================
   JSI — админ-панель.
   Цвета фирменные. Шрифты — те же, что на сайте (Inter и Onest),
   и лежат они у нас: панель открывается без интернета.
   Раскладка: тёмная колонка слева, светлое полотно справа.
   ============================================================ */

:root {
  --accent:      #FFD166;
  --accent-hot:  #ffe55c;   /* наведение на жёлтую кнопку */
  --accent-soft: #fff7cc;   /* мягкая жёлтая подложка */
  --dark:        #14140f;
  --bg:          #f4f4ec;
  --surface:     #ffffff;
  --grey:        #6e6e64;
  --line:        #e4e4da;   /* обычные границы — тихие */
  --line-strong: #d2d2c8;   /* границы полей ввода: их надо видеть */
  --white:       #ffffff;
  --good:        #1f7a3f;
  --bad:         #a32020;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* Тени очень слабые: карточек на экране много, и заметная тень у
     каждой превратила бы список в рябь. */
  --shadow-1: 0 1px 2px rgba(20, 20, 15, .05);
  --shadow-2: 0 10px 30px -12px rgba(20, 20, 15, .25);

  --font-ui:      'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: 'Onest', var(--font-ui);

  --side: 248px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--dark);
  font: 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Одинаковая рамка фокуса на всём: по панели ходят и с клавиатуры. */
:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Каркас: колонка слева, содержимое справа ---------- */

.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 12px 14px;
  background: var(--dark);
  color: var(--white);
}

.side__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 10px 20px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.side__mark {
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.side__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 2px;
}
.side__nav::-webkit-scrollbar { width: 6px; }
.side__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
}

/* Разделов шестнадцать, и половина из них — служебные. Заголовок
   группы делит список на «что правят каждый день» и «что настраивают
   раз в полгода». */
.side__group {
  margin: 16px 12px 6px;
  color: #7e7e74;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.side__group:first-child { margin-top: 0; }

.side__link {
  position: relative;
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: #c6c6bc;
  font-size: 14.5px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.side__link:hover { background: rgba(255, 255, 255, .07); color: var(--white); }

.side__link--on {
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font-weight: 600;
}
/* Жёлтая засечка слева: заливка одна на весь тёмный фон и сама по себе
   читается слабо, а цвет сразу показывает, где мы находимся. */
.side__link--on::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 999px;
  background: var(--accent);
}

.side__foot {
  margin-top: 12px;
  padding: 12px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.side__who  { display: block; font-size: 14px; font-weight: 600; }
.side__role { display: block; margin-top: 1px; color: #8a8a80; font-size: 12.5px; }

.side__acts { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.side__acts form { display: inline; margin: 0; }

.side__act {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.side__act:hover { text-decoration: underline; }

.main { min-width: 0; }

.wrap   { max-width: 900px; margin: 0 auto; padding: 40px 32px 110px; }
.narrow { max-width: 460px; }

@media (max-width: 900px) {
  /* Узкий экран: колонка ложится сверху, разделы едут строкой вбок.
     Прятать их под кнопку не нужно — так до любого раздела один жест. */
  .app { grid-template-columns: minmax(0, 1fr); }

  .side {
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    grid-template-areas: 'brand foot' 'nav nav';
    align-items: center;
    position: static;
    height: auto;
    padding: 14px 0 0;
  }
  /* В строку помещаются либо название, либо имя вошедшего — оставляем
     жёлтый значок: он и есть узнаваемая часть. */
  .side__brand { grid-area: brand; justify-self: start; margin: 0 16px; }
  .side__word { display: none; }

  .side__nav {
    grid-area: nav;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    margin-top: 12px;
    padding: 0 16px 12px;
  }
  .side__group { display: none; }
  .side__link { flex: 0 0 auto; padding: 8px 14px; white-space: nowrap; }
  /* В строке засечка сбоку не читается — открытый раздел заливаем. */
  .side__link--on { background: var(--accent); color: var(--dark); }
  .side__link--on::after { display: none; }

  .side__foot {
    grid-area: foot;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 0 16px;
    padding: 0;
    border: 0;
  }
  .side__foot > div { min-width: 0; }
  .side__who {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
  }
  .side__role { display: none; }
  .side__acts { margin-top: 0; }

  .wrap { padding: 26px 18px 110px; }
}

/* ---------- Типографика ---------- */

.h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lead { margin: 0 0 28px; max-width: 62ch; color: var(--grey); }
.hint { margin: 8px 0 0; color: var(--grey); font-size: 13.5px; }

.block {
  margin: 0 0 28px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* ---------- Карточки обзора ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.card {
  display: block;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

.card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.card__label { display: block; margin-top: 6px; font-weight: 600; }
.card__hint  { display: block; margin-top: 3px; color: var(--grey); font-size: 13.5px; }

/* ---------- Панель разметки в редакторе статьи ---------- */

/* Кнопка загрузки отделена от кнопок разметки: она делает не вставку
   символов, а сетевой запрос, и путать их не стоит. */
.btn--pick { margin-left: auto; }

.toolbar__note { align-self: center; font-size: 13px; color: var(--grey); }
.toolbar__note--good { color: #1a7f37; }
.toolbar__note--bad { color: #b3261e; }

/* ---------- Вкладки ---------- */

/* Имя нарочно не .tabs: так уже называется меню разделов в колонке,
   и общий класс перекрасил бы навигацию. */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.subtabs__btn {
  padding: 8px 16px;
  font: inherit; font-size: 14.5px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.subtabs__btn:hover { border-color: var(--line-strong); }
/* Открытая вкладка — заливкой, а не только рамкой: рамку глаз теряет. */
.subtabs__btn.is-on {
  background: var(--dark); border-color: var(--dark);
  color: #fff; font-weight: 600;
}

/* ---------- Прайс ---------- */

/* Цена в свёрнутой строке — справа, моноширинными цифрами: так суммы
   выстраиваются столбиком и разницу видно, не открывая карточки. */
.price-row__sum {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-row .fold__name { flex: 0 1 auto; }

/* Подсказка о непривычном формате цены — предупреждение, а не ошибка:
   вёрстка такую цену покажет, просто без крупной цифры. */
.field__hint--warn { color: #9a6700; }

/* ---------- Сводка по собранному файлу ---------- */

.stat-line {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 14.5px;
}
.stat-line--bad { color: var(--bad); }

/* ---------- Номера филиалов ---------- */

/* Таблицей, а не восемью формами подряд: смысл экрана — увидеть все
   номера разом и заметить, где WhatsApp забыли. */
.nums { display: grid; gap: 6px; margin-top: 12px; }
.nums__head, .nums__row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(170px, 1.2fr) minmax(170px, 1.2fr);
  gap: 10px 14px;
  align-items: center;
}
.nums__head {
  color: var(--grey); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding-bottom: 2px;
}
.nums__name { font-weight: 600; }
.nums__cell { margin-bottom: 0; }
.nums__same {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 8px;
  color: var(--grey);
}

@media (max-width: 640px) {
  /* На узком экране колонки не выживают — каждый филиал становится
     своей карточкой с подписями полей. */
  .nums__head { display: none; }
  .nums__row {
    grid-template-columns: 1fr;
    padding: 12px;
    background: var(--bg);
    border-radius: var(--radius);
  }
}

/* ---------- Тексты кнопок WhatsApp ---------- */

.wa-search { margin-bottom: 18px; }

.wa-group {
  margin: 0 0 10px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.wa-group__head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 4px;
  cursor: pointer; list-style: none;
}
.wa-group__head::-webkit-details-marker { display: none; }
.wa-group__head::before {
  content: '▸'; color: var(--grey); transition: transform 0.12s;
}
.wa-group[open] > .wa-group__head::before { transform: rotate(90deg); }
.wa-group__title { font-weight: 600; }
.wa-group__page { color: var(--grey); font-size: 13.5px; }
.wa-group__count { margin-left: auto; color: var(--grey); font-size: 13px; }

.wa-item { padding: 12px 4px 16px; border-top: 1px solid var(--line); }
.wa-item__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-bottom: 6px;
}
.wa-item__label { font-weight: 600; }
/* Где именно стоит кнопка — главное, чего не хватало: по ключу
   «teen-trial» понять это было нельзя. */
.wa-item__where { color: var(--grey); font-size: 13.5px; }
.wa-item__look { margin-left: auto; font-size: 13px; color: var(--grey); }

/* Пузырь сообщения: показываем текст так, как его увидит человек в
   WhatsApp. Зелёный — цвет исходящего сообщения, узнаётся сразу. */
.wa-bubble {
  position: relative;
  max-width: 34em;
  margin: 8px 0 0 auto;
  padding: 8px 12px;
  background: #d9fdd3;
  border-radius: 10px 10px 2px 10px;
  font-size: 14.5px; line-height: 1.4;
}
.wa-bubble--empty::after {
  content: 'пусто — кнопка откроет чат без текста';
  color: var(--grey); font-style: italic;
}

/* ---------- Отбор карточек ---------- */

/* Атрибут hidden обязан побеждать: карточки скрываются им, а любое
   display в правилах ниже случайно вернуло бы их на экран. */
[hidden] { display: none !important; }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.filters__check { margin-bottom: 0; }
.filters__count {
  margin: 0 0 0 auto;
  color: var(--grey);
  font-size: 13.5px;
  white-space: nowrap;
}
/* Предупреждение про «фильтр не удаляет» — во всю ширину под полями:
   его читают один раз, но прочитать должны. */
.filters__hint { flex: 1 0 100%; margin-top: 0; }

/* ---------- Выбор преподавателей на главную ---------- */

.pick {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 8px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .12s, opacity .12s;
}
/* Не отмеченные — приглушены, но читаемы: список остаётся одним
   списком, просто видно, кто на главную не идёт. */
.pick--off { opacity: 0.5; }
.pick--off:hover { opacity: 0.8; }
.pick__photo {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  object-fit: cover; object-position: top center;
  border-radius: 10px;
  background: var(--line);
}
.pick__photo--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--grey); text-align: center;
}
.pick__main {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0; cursor: pointer;
}
.pick__main input { width: 18px; height: 18px; flex: 0 0 auto; }
.pick__name { display: block; font-weight: 600; }
.pick__note { display: block; color: var(--grey); font-size: 13px; }
.pick__moves { flex: 0 0 auto; display: flex; gap: 6px; }
.btn--icon { padding: 6px 12px; line-height: 1; font-size: 16px; }

/* ---------- Блок «кто стоит на главной» ---------- */

.home { margin-bottom: 22px; }
.home .pick { margin-bottom: 8px; }

/* Выпадашка и кнопка в строку: выбрал — поставил, два действия рядом. */
.home__add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.home__add .field__input { width: auto; min-width: 240px; flex: 0 1 320px; }

/* ---------- Свёрнутые карточки ---------- */

/* Строка вместо формы: три десятка развёрнутых мероприятий — километр
   прокрутки. Свёрнутое из формы не выпадает, только прячется с глаз. */
.row--fold { padding: 0; }

.fold__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
  transition: background .12s;
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head::before {
  content: '▸';
  flex: 0 0 auto;
  color: var(--grey);
  transition: transform 0.12s;
}
.fold[open] > .fold__head::before { transform: rotate(90deg); }
.fold__head:hover { background: #faf9f1; }

/* Дата — колонкой фиксированной ширины: так числа выстраиваются друг под
   другом и список читается как афиша, а не как каша. */
.fold__when {
  flex: 0 0 auto;
  min-width: 108px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fold__name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.fold__where { flex: 0 0 auto; color: var(--grey); font-size: 13.5px; }

.fold__body { padding: 4px 20px 20px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  /* Дата (или номер филиала), название и место в одну строку на телефон
     не помещаются: строка переставала сжиматься и распирала страницу.
     Разносим по строкам — заголовок карточки читается сверху вниз. */
  .fold__head { flex-wrap: wrap; gap: 2px 10px; }
  .fold__when { flex: 1 0 100%; min-width: 0; }
  .fold__name { flex: 1 1 auto; }
}

/* Кнопки карточки в одну строку: «повторить» рядом с «удалить», но
   удаление визуально не главное. */
.row__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Кнопка «добавить» стоит над списком, а не под ним: внизу, за тремя
   десятками строк, до неё нужно доскроллить. */
.btn--add { margin: 0 0 14px; }

/* ---------- Архив ---------- */

.archive { margin: 22px 0 0; }
.archive__head {
  padding: 12px 16px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--grey);
  cursor: pointer;
  font-size: 14.5px;
}
.archive__head:hover { border-color: var(--grey); }
.archive[open] > .archive__head { margin-bottom: 14px; }

/* ---------- Формы ---------- */

.row {
  margin: 0 0 14px;
  /* У fieldset собственная ширина по содержимому (min-content), и на
     телефоне карточка вылезала за экран вместе со всей страницей. */
  min-width: 0;
  padding: 20px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.row__title {
  padding: 0 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Подзаголовок внутри карточки формы: у филиала полей полтора десятка,
   и без деления на «страница», «как добраться», «отзывы» форма читается
   как сплошная простыня. */
.row__group {
  margin: 24px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--grey);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field { display: block; margin-bottom: 14px; }
.field--action { display: flex; align-items: flex-end; }

.field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
}

.field__input {
  display: block;
  width: 100%;
  padding: 10px 13px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--dark);
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.field__input::placeholder { color: #a6a69c; }
/* Жёлтое кольцо вместо системной обводки: видно сразу, куда попал
   курсор, и это фирменный цвет, а не браузерный синий. */
.field__input:focus {
  border-color: var(--dark);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 221, 45, .55);
}
.field__input--area { resize: vertical; }

.field__hint {
  display: block;
  margin-top: 5px;
  color: var(--grey);
  font-size: 13px;
}

/* Два поля рядом на широком экране, друг под другом — на телефоне. */
.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
}

/* Флажок и подпись в строку — иначе подпись уезжает под квадратик. */
.field--check {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
}
.field--check input { width: 18px; height: 18px; accent-color: var(--dark); }

/* Восемь филиалов столбиком заняли бы пол-экрана на каждой карточке
   преподавателя, поэтому раскладываем их сеткой. */
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 16px;
  margin-bottom: 4px;
}
.checks .field--check { margin-bottom: 10px; }

/* Уже загруженное фото: маленькое превью, чтобы админ видел, что
   меняет, но карточка не превращалась в фотоальбом. */
.thumb {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  object-fit: cover;
}

.tag {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--grey);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
/* Заполненный целиком филиал — зелёной меткой: в списке из восьми строк
   взгляд ищет, где ещё есть дырки, а не читает каждую. */
.tag--good { background: #e8f5ec; color: var(--good); }

/* Казахские поля свёрнуты: пока версии нет, они только мешали бы. */
.kz {
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.kz summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.kz .field { margin-top: 12px; }

/* ---------- Раздел SEO ---------- */

/* Полоса состояния над карточками: два факта, которые надо видеть, не
   открывая ничего. Закрытый от поиска сайт — красным, потому что это
   самая дорогая ошибка из возможных и заметить её можно через месяц. */
.hub-state {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.hub-state--bad { border-left-color: var(--bad); background: #fdf6f5; }

/* Список файлов и пояснений: маркеры не нужны, строки читаются подряд. */
.files { margin: 0; padding: 0; list-style: none; }
.files li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.files li:last-child { border-bottom: 0; }

/* Группа находок в проверке. Цвет метки — по цене ошибки: красная про
   выпадение из выдачи, жёлтая про «мешает жить», серая справочная. */
.check--warn .tag { background: #fff4d6; color: #8a6100; }
.tag--bad { background: #fbe9e7; color: var(--bad); }

/* ---------- Права разделов ---------- */

/* Строка «раздел → с какой роли открыт». Радио, а не галочки: уровень
   один, и три состояния должны исключать друг друга. */
.perm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.perm:last-child { border-bottom: 0; }
.perm__name { flex: 0 0 auto; min-width: 160px; font-weight: 600; }
.perm__pick { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.perm__opt { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.perm__opt input { width: 17px; height: 17px; accent-color: var(--dark); }
.perm__note { flex: 1 1 100%; color: var(--grey); font-size: 13px; }
/* Раздел, который не двигается, — приглушён: видно, что он есть, но
   выбирать нечего. */
.perm--locked { color: var(--grey); }

/* Выпадашка роли прямо в таблице: она узкая и не должна растягивать
   колонку на всю ширину поля ввода. */
.field__input--mini {
  width: auto;
  padding: 6px 10px;
  font-size: 14px;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
  box-shadow: 0 1px 2px rgba(20, 20, 15, .12);
}
.btn--accent:hover { background: var(--accent-hot); border-color: var(--accent-hot); }

.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--dark); }
.btn--ghost:hover { border-color: var(--dark); }

.btn--tiny  { padding: 6px 12px; font-size: 13px; background: transparent; border-color: var(--line-strong); }
.btn--tiny:hover { border-color: var(--dark); }

.btn--wide { width: 100%; }

/* Плавающая полоса сохранения: не приклеена к краю экрана, а висит над
   содержимым — так видно, что под ней форма продолжается. */
.save {
  position: sticky;
  bottom: 18px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 22px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
}
.save__hint { color: var(--grey); font-size: 13.5px; }

@media (max-width: 900px) {
  /* В узкой колонке кнопка и подсказка переносятся на две строки —
     из стадиона полоса становится карточкой. */
  .save { border-radius: var(--radius-lg); padding: 12px 16px; }
}

.inline { display: inline-flex; gap: 6px; margin: 0; }

/* ---------- Сообщения ---------- */

.msg {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.msg--good { border-left-color: var(--good); background: #f5fbf7; }
.msg--bad  { border-left-color: var(--bad);  background: #fdf6f5; }

.msg__line { margin: 0 0 6px; }
.msg__line:last-child { margin-bottom: 0; }

.msg__more summary { cursor: pointer; color: var(--grey); font-size: 13.5px; }
.msg__more pre {
  overflow-x: auto;
  margin: 8px 0 0;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
}

.code {
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 14.5px;
  user-select: all;
}

/* ---------- Статьи ---------- */

.link { color: var(--dark); font-weight: 600; }
.link:hover { text-decoration: none; }

.muted {
  display: block;
  margin-top: 2px;
  color: var(--grey);
  font-size: 13px;
}

/* Точка статуса: видно с одного взгляда, что живёт на сайте,
   а что лежит черновиком. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.dot--on { background: var(--good); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.field__input--editor {
  min-height: 380px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 14.5px;
  line-height: 1.65;
  resize: vertical;
}

.thumb--wide { width: 100%; max-width: 320px; height: auto; aspect-ratio: 16/9; }

/* Как статья выглядит в поисковой выдаче. Цвета близки к гугловским
   нарочно: узнаваемая картинка объясняет назначение полей лучше,
   чем абзац текста про title и description. */
.serp {
  max-width: 600px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.serp__url   { color: var(--grey); font-size: 13px; }
.serp__title { margin: 3px 0; color: #1a0dab; font-size: 19px; line-height: 1.3; }
.serp__desc  { color: #4d5156; font-size: 14px; }

@media (prefers-color-scheme: dark) {
  .serp__title { color: #8ab4f8; }
  .serp__desc  { color: #bdc1c6; }
}

.preview__cover {
  width: 100%;
  margin-bottom: 14px;
  border-radius: 12px;
}

/* Текст статьи в предпросмотре: узкая колонка и крупный шрифт —
   так видно реальный ритм чтения, а не сплошную простыню. */
.prose { max-width: 640px; font-size: 17px; line-height: 1.7; }
.prose h2 { margin: 28px 0 10px; font-family: var(--font-display); font-size: 23px; letter-spacing: -0.02em; }
.prose h3 { margin: 22px 0 8px; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose img { max-width: 100%; border-radius: 12px; }
.prose blockquote {
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: var(--grey);
}
.prose a { color: var(--dark); }

/* ---------- Таблицы ---------- */

/* Таблица с датами и текстом правок не ужимается до ширины телефона,
   поэтому едет вбок внутри своей обёртки, а не растягивает страницу. */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.table th {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}
.table td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }

/* ---------- Вход ---------- */

.body--login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  /* Жёлтое свечение сверху — единственное украшение экрана входа:
     страница пустая, и без него это лист бумаги с двумя полями. */
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(255, 221, 45, .45), transparent 70%),
    var(--bg);
}

.login {
  width: 100%;
  max-width: 380px;
  padding: 32px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 60px -30px rgba(20, 20, 15, .45);
}

.login__mark {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 4px 10px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--dark);
  font-size: 13px;
  font-weight: 700;
}

.login__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

/* Образец llms.txt: моноширинный, чтобы структура была видна */
.sample {
  overflow-x: auto;
  margin: 12px 0 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

/* Галерея филиала: миниатюры с галочкой «убрать» */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.gal__item { display: flex; flex-direction: column; gap: 4px; font-size: 13px; cursor: pointer; }
.gal__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.gal__item input:checked + * , .gal__item:has(input:checked) img { opacity: .35; }