/* Внутренний инструмент: важнее читаемость длинного текста, чем украшения.
   Правило одно: цветом помечается смысл, а не блок.

   Палитра, шрифт, радиусы и толщина линий взяты у панели trustpilot-сервиса
   (`app/static/index.html` того проекта): с 08.2026 оба приложения живут
   на одном домене, и человек, переходящий из раздела в раздел, не должен
   чувствовать, что попал на другой сайт. Отсюда и зелёный акцент вместо
   прежнего синего, и рамки вместо теней — у них карточка отбита рамкой.

   * зелёный — то, на что можно нажать: действия, ссылки, открытый раздел;
   * синий, янтарный, красный — состояние: идёт, устарело, сломалось;
   * всё остальное — три оттенка серого и белые карточки на сером фоне.

   Свои остались две вещи: ширина (у них колонка 520px под форму из трёх
   полей, у нас редактор с таблицами) и размер текста в самом редакторе —
   его читают и правят помногу. */
:root {
  --bg: #f5f6f8;
  --surface: #fff;
  --sunken: #eef1f5;
  --ink: #1d2530;
  --ink-soft: #3a4552;
  --muted: #6b7480;
  --line: #e2e5ea;
  --line-soft: #eceff3;
  --accent: #1f7a3d;
  --accent-dark: #19632f;
  --accent-soft: #e7f5ec;
  /* Состояния — те же цвета, что у бэйджей панели: «в работе» синий,
     «готово» зелёный, «ошибка» красный. */
  --good: #1f7a3d;
  --run: #1b5fb0;
  --warn: #7a5b1f;
  --warn-soft: #fff6e5;
  --warn-line: #f0d9a8;
  --bad: #c0392b;
  --bad-soft: #fdecec;
  /* Приглушённый красный: «ждёт человека» — не поломка, но и не «всё хорошо».
     Светлее основного, но по контрасту на белом ещё читаемый (4.5:1). */
  --bad-light: #c9503f;
  --radius: 8px;
  --radius-card: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1 { font-size: 1.35rem; letter-spacing: -.01em; }
a { color: var(--accent); }
/* Клавиатурный фокус виден всегда: полями здесь набирают вводные из восьми
   строк, и потеряться в них мышью проще, чем кажется. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Шапка: одна на оба сайта домена ---

   Блок ниже стоит слово в слово на обеих страницах панели trustpilot-сервиса
   (её `app/static/index.html` и `status.html`), и тесты обоих проектов сверяют
   его отпечаток (`tests/test_web_topbar.py`). Меняете здесь — перенесите туда
   и обновите отпечаток в обоих тестах. Цвета в нём записаны числами, а не переменными
   страницы: у панели переменные называются иначе. */

/* topbar:start */
:root { --topbar-h: 56px; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h); margin: 0; padding: 0 24px;
  background: #1f7a3d; color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  font: 600 14px/1.2 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.topbar-nav {
  display: flex; align-items: stretch; gap: 22px;
  height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-link {
  display: flex; align-items: center; flex: 0 0 auto;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, .8); text-decoration: none; white-space: nowrap;
}
.topbar-link:hover { color: #fff; }
.topbar-link.on { color: #fff; border-bottom-color: #fff; }
.topbar-user {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; margin: 0 0 0 auto; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
}
.topbar-user:hover, .topbar-user:focus-visible { background: rgba(255, 255, 255, .28); }
.topbar-icon { display: block; width: 20px; height: 20px; }
.topbar-menu {
  position: fixed; inset: auto; top: calc(var(--topbar-h) + 6px); right: 16px;
  min-width: 200px; max-width: min(320px, calc(100vw - 32px)); margin: 0; padding: 6px;
  border: 1px solid #e2e5ea; border-radius: 10px;
  background: #fff; color: #1d2530; box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  font: 400 14px/1.4 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.topbar-name {
  margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid #e2e5ea;
  font-weight: 600; overflow-wrap: anywhere;
}
.topbar-menu form { margin: 0; }
.topbar-exit, .topbar-enter {
  display: block; width: 100%; margin: 0; padding: 8px 10px;
  border: 0; border-radius: 6px; background: none;
  color: #1d2530; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.topbar-exit:hover, .topbar-enter:hover { background: #eef1f5; color: #1f7a3d; }
.topbar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.topbar-menu :focus-visible { outline-color: #1f7a3d; }
/* topbar:end */

/* Ссылка приглушённым цветом — «Сбросить» у поиска. */
.nav { color: var(--muted); text-decoration: none; padding-bottom: 3px; }
.nav:hover { color: var(--ink); }
.inline { display: inline; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer;
        padding: 0; font: inherit; font-weight: 400; }
.link:hover { color: var(--accent); }
/* Отступ сверху — от шапки: она теперь полоса на всю ширину, и без воздуха
   заголовок страницы и её главная кнопка упирались в неё. */
main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* --- Поля и кнопки --- */

label { display: block; margin-bottom: .9rem; font-size: .9rem; color: var(--muted); }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); }
input {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 1rem;
}
input:hover, textarea:hover, select:hover { border-color: #cfd5dd; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
button { font: inherit; }
button[disabled] { opacity: .6; cursor: default; }
/* Главное действие экрана — заливкой; всё остальное белым с рамкой.
   Одинаковых по виду кнопок на странице статьи набиралось до десяти. */
button[type="submit"], .publish-start button, .add-form button {
  padding: .55rem 1.1rem; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
button[type="submit"]:hover:not([disabled]),
.publish-start button:hover:not([disabled]),
.add-form button:hover:not([disabled]) { background: var(--accent-dark); }
/* `button[type="submit"].quiet` — не украшение записи, а вес: у правила
   заливки выше специфичность (`button[type=…]` против одного класса), и
   помеченные `quiet` кнопки форм красились заливкой вопреки пометке. Видно
   это было в карточке площадки: «Сделать основным» и «Убрать из выбора»
   стояли главными действиями экрана, хотя главное там — «Добавить аккаунт». */
.quiet, button[type="submit"].quiet,
.title-form button, .search button, .under-editor button,
.header-fields button, .meta-fields button, .danger button, .pub-retry, .pub-remove,
.quality-act button, .picture-actions button {
  padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); font-size: .95rem;
  font-weight: 600; cursor: pointer;
}
.title-form button:hover, .search button:hover, .under-editor button:hover:not([disabled]),
.header-fields button:hover, .meta-fields button:hover:not([disabled]),
.quality-act button:hover:not([disabled]), .pub-retry:hover,
.picture-actions button:hover:not([disabled]),
button[type="submit"].quiet:hover:not([disabled]) {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

.error { color: var(--bad); margin: 0 0 .9rem; }
/* Весточка о сделанном: показывается один раз и гаснет сама через пять
   секунд. Анимацией, а не скриптом — страницы здесь статические, и один
   сценарий ради полоски потянул бы за собой всё, что тянет любой скрипт.
   Гасим не только прозрачность: с нулевой высотой и без отступов полоска
   перестаёт занимать место, иначе список под ней стоял бы сдвинутым.
   Тем, кто просил не анимировать, показываем полоску просто и надолго —
   исчезающая надпись для них была бы хуже стоящей. */
.said {
  margin: 0 0 .9rem; padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--good); font-weight: 600;
  overflow: hidden; animation: said-out .4s ease 5s forwards;
}
@keyframes said-out {
  to { opacity: 0; height: 0; margin: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .said { animation: none; }
}
.hint { color: var(--muted); font-size: .85rem; }
.card {
  max-width: 24rem; margin: 6vh auto; padding: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.card h1 { margin-top: 0; font-size: 1.25rem; }

/* --- Свёрнутые разделы: шапка, генерация, перевод, метатеги, площадка --- */

.header-box, .ai-box, .meta-box, .add-box, .quality-box, .picture-box {
  margin-bottom: 1rem; padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.add-box { margin: 1.5rem 0; }
.header-box > summary, .ai-box > summary, .meta-box > summary,
.add-box > summary {
  cursor: pointer; color: var(--ink-soft); font-weight: 600; list-style: none;
}
.header-box > summary::-webkit-details-marker,
.ai-box > summary::-webkit-details-marker,
.meta-box > summary::-webkit-details-marker,
.add-box > summary::-webkit-details-marker { display: none; }
.header-box > summary::before, .ai-box > summary::before,
.meta-box > summary::before, .add-box > summary::before {
  content: "▸"; color: var(--accent); margin-right: .5rem;
}
details[open].header-box > summary::before, details[open].ai-box > summary::before,
details[open].meta-box > summary::before, details[open].add-box > summary::before {
  content: "▾";
}
/* Открытый раздел отделяется чертой: иначе его заголовок сливается
   с первым полем формы, и непонятно, где кончается один блок. */
details[open].header-box > summary, details[open].ai-box > summary,
details[open].meta-box > summary, details[open].add-box > summary {
  padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.header-fields .bad, .meta-fields .bad { color: var(--bad); }
.meta-fields button[disabled], .ai-box button[disabled] { opacity: .6; }
.ai-box .add-form { max-width: 100%; }

/* --- Список статей и площадок --- */

.tabs { display: flex; gap: 1.25rem; align-items: center;
        margin: 0 0 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.tabs a { text-decoration: none; color: var(--muted); font-weight: 600;
          padding-bottom: .2rem; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .count { margin-left: auto; color: var(--muted); font-size: .85rem; font-weight: 400; }
.search { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.search input { margin: 0; }
.rows { list-style: none; margin: 0; padding: 0;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius-card); overflow: hidden; }
.row { display: flex; align-items: baseline; gap: 1rem;
       padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--sunken); }
.row-title { text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.row-title:hover { color: var(--accent); }
.row-meta { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }
/* Действия в строке списка — кнопки аккаунта на карточке площадки. Формы
   блочные, и в строке без этого каждая начинала бы новую: аккаунт и три
   кнопки стояли лесенкой. Первая форма уходит вправо и уводит за собой
   остальные, как это делает `.row-meta`. */
.row form { margin: 0; }
.row form:first-of-type { margin-left: auto; }
/* Кнопки решения по заявке — в ряд, а не лесенкой: их три, и каждая
   на своей строке превратила бы карточку заявки в столбец кнопок. */
.row-do { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* Состояние публикации: бэйдж в строке списка и над самой статьёй.
   Имя своё, а не `.pub`: так называется строка попытки в блоке публикаций
   (см. «Публикация» ниже), и общее имя красило бы её заодно — жирным весь
   ряд, красным название площадки у неудачной попытки.

   Цвет отвечает на один вопрос: нужен ли человек. Зелёный — нет, статья вышла.
   Красный — да, и двух оттенков: приглушённый у той, что просто ждёт проверки,
   и полный у той, которую площадка не приняла. Первую надо прочитать, во второй
   разобраться, и разговор с площадкой громче. Синий — попытка идёт прямо сейчас,
   делать ничего не надо. */
.pub-badge { font-weight: 600; }
.pub-badge-published { color: var(--good); }
.pub-badge-publishing { color: var(--run); }
.pub-badge-failed { color: var(--bad); }
.pub-badge-unpublished { color: var(--bad-light); }

/* Вторая строка фильтров под вкладками: та же полоса, но тише — вкладка
   отвечает «чьи статьи», а это лишь уточняет состояние внутри неё. */
.tabs.filters { margin-top: -.35rem; font-size: .9rem; }
.tabs.filters a { font-weight: 500; }

.pub-line { margin: -.35rem 0 1rem; }
.pages { display: flex; gap: 1rem; margin-top: 1.25rem; }

/* --- Страница статьи --- */

.page-head { display: flex; align-items: center; gap: 1rem; }
.page-head h1 { margin: 0; }
.page-head form { margin-left: auto; }
.crumbs { margin: 0 0 .75rem; font-size: .9rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.title-form { display: flex; gap: .5rem; margin-bottom: 1rem; }
.title-form input { font-size: 1.2rem; font-weight: 600; margin: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
           padding: .4rem; border: 1px solid var(--line); border-bottom: 0;
           border-radius: var(--radius-card) var(--radius-card) 0 0;
           background: var(--surface); position: sticky; top: var(--topbar-h); z-index: 5; }
.toolbar button { min-width: 2rem; padding: .3rem .5rem; border: 1px solid transparent;
                  background: none; border-radius: 6px; cursor: pointer;
                  font-size: .95rem; color: var(--ink-soft); }
.toolbar button:hover { background: var(--sunken); color: var(--accent); }
.toolbar button.on { background: var(--accent-soft); border-color: #c3e0cd;
                     color: var(--accent-dark); }
.toolbar .sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 .3rem; }
.save-state { margin-left: auto; color: var(--muted); font-size: .8rem; padding-right: .4rem; }
.save-state.bad { color: var(--bad); }

/* Текст статьи крупнее оболочки: его читают и правят помногу, и пятнадцать
   пикселей, уместные в форме из трёх полей, здесь утомляют. */
.editor { border: 1px solid var(--line);
          border-radius: 0 0 var(--radius-card) var(--radius-card);
          background: var(--surface); padding: 1.5rem 1.75rem; min-height: 24rem;
          font-size: 16px; line-height: 1.6; }
.editor .ProseMirror { outline: none; }
.editor h2 { font-size: 1.35rem; margin: 1.6rem 0 .6rem; }
.editor h3 { font-size: 1.1rem; margin: 1.3rem 0 .5rem; }
.editor p { margin: 0 0 .9rem; }
.editor blockquote { margin: 0 0 .9rem; padding-left: 1rem;
                     border-left: 3px solid var(--accent-soft); color: var(--muted); }
.editor pre { background: var(--sunken); padding: .8rem; border-radius: 6px;
              overflow-x: auto; }
.editor table { border-collapse: collapse; width: 100%; margin: 0 0 .9rem; }
.editor th, .editor td { border: 1px solid var(--line); padding: .4rem .6rem;
                         vertical-align: top; }
.editor th { background: var(--sunken); text-align: left; }
.editor td p:last-child, .editor th p:last-child { margin-bottom: 0; }

/* Устаревший текст и устаревшие метатеги — единственное жёлтое пятно
   на странице, и заметным оно должно быть намеренно. У панели такого
   случая нет, поэтому цвет здесь свой. */
.stale-note { margin: 0 0 .8rem; padding: .65rem .9rem; border-radius: var(--radius);
              background: var(--warn-soft); border: 1px solid var(--warn-line);
              border-left: 4px solid var(--warn); font-size: .9rem; }
.stale-note .link { text-decoration: underline; color: inherit; font: inherit; }

/* Картинка к материалу. Рамка, подпись и кнопка — те же, что у «Оценки
   текста» и шапки: блок без них был единственным неоформленным на странице
   и читался не блоком, а обрывком. Своего вида ему не нужно — он такой же
   участок карточки статьи, как соседние.

   Ширина картинки ограничена намеренно: она вертикальная, 2:3, и в полную
   ширину колонки выдавила бы со страницы всё остальное. */
.picture-title {
  color: var(--ink-soft); font-weight: 600;
  padding-bottom: .6rem; margin: 0 0 .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.picture { display: block; max-width: 240px; width: 100%; height: auto;
           border-radius: var(--radius); border: 1px solid var(--line); }
/* Задание на картинку — многострочное, и в одну строку с картинкой не встаёт. */
.picture-concept { margin: .8rem 0 0; }
.picture-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: .8rem 0 0;
}
.picture-actions .bad { color: var(--bad); }
/* Ссылка «Скачать» стоит рядом с кнопкой и обязана читаться как её сосед,
   а не как строчная ссылка посреди текста. */
.picture-actions .link {
  padding: .5rem .9rem; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink-soft);
  font-size: .95rem; font-weight: 600; text-decoration: none;
}
.picture-actions .link:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* --- Версии и выгрузка под редактором --- */

.under-editor { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 1.2rem; }
.version-note { color: var(--bad); }

/* Оценка текста: пять чисел под редактором, там же, где решают — публиковать
   или переписать. Цветом помечено состояние, тем же правилом, что у публикации;
   заливкой ничего не выделяем, жёлтое пятно на странице остаётся одно.

   Карточка у блока общая с соседними разделами (правило выше): без рамки
   числа сливались с текстом страницы и терялись. Не `details`, в отличие
   от соседей: тех прячут, а этот показывают. */
.quality-title {
  color: var(--ink-soft); font-weight: 600;
  padding-bottom: .6rem; margin: 0 0 .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.quality { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.4rem; }
.quality-item { display: flex; align-items: baseline; gap: .4rem; }
.quality-name { color: var(--ink-soft); font-size: .9rem; }
.quality-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.quality-good { color: var(--good); }
.quality-warn { color: var(--warn); }
.quality-bad { color: var(--bad); }
/* Прочерк серый: цвет здесь означал бы оценку, которой не было. */
.quality-none { color: var(--muted); }
/* Кнопка платной проверки: своей строкой под числами, с местом на подпись. */
.quality-act { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; }
.quality-act button[disabled] { opacity: .55; cursor: default; }
.quality-note { margin: .2rem 0 0; }
.exports { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
           margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.exports a { color: var(--accent); text-decoration: none; padding: .25rem .7rem;
             background: var(--surface); border: 1px solid var(--line);
             border-radius: 999px; font-weight: 600; }
.exports a:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Ссылка на созданный документ: выгрузка уводит на свежий, а вернуться
   к нему потом можно только отсюда. */
.doc-links { margin: 0 0 1rem; font-size: .9rem; }
.doc-links .when, .doc-links .hint { color: var(--muted); margin-left: .35rem; }

/* --- Публикация --- */

.publish { margin: 1.75rem 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.publish-head { font-size: 1.15rem; margin: 0 0 .8rem; }
.publish-start { display: flex; gap: .5rem; margin: .8rem 0 .4rem; }
.publish-start input { margin: 0; }
.publish-start select { padding: .5rem .75rem; border: 1px solid var(--line);
                        border-radius: var(--radius); font-size: 1rem; }
.publish-start button { white-space: nowrap; }
/* Состояние попытки видно полосой слева и цветом подписи: строк бывает
   несколько, и «готово» от «сломалось» глаз должен отличать не читая.
   Цвета те же, что у бэйджей панели. */
.pub { flex-wrap: wrap; gap: .6rem; }
.pub-done { box-shadow: inset 3px 0 0 var(--good); }
.pub-failed { box-shadow: inset 3px 0 0 var(--bad); }
.pub-running { box-shadow: inset 3px 0 0 var(--run); }
.pub-queued { box-shadow: inset 3px 0 0 var(--line); }
/* Снятое — тем же приглушённым красным, что и значок «не опубликовано»
   в списке: человек нужен, но спокойно. Полный красный тут читался бы
   поломкой, а её не было — пост убрали руками. */
.pub-removed { box-shadow: inset 3px 0 0 var(--bad-light); }
.pub-where { font-weight: 600; min-width: 7rem; }
/* Имя аккаунта рядом с площадкой: приглушённое, потому что отвечает
   на второй вопрос — «каким», а не «куда». */
.pub-account { color: var(--muted); }
.pub-state { color: var(--muted); }
.pub-done .pub-state { color: var(--good); }
.pub-running .pub-state { color: var(--run); }
.pub-state.bad { color: var(--bad); }
.pub-link { margin-left: auto; }
/* Кнопка снятия краснеет только под курсором: в покое она такая же, как
   «Повторить», — необратимость не повод кричать со страницы. */
.pub-remove:hover { border-color: var(--bad); color: var(--bad); background: var(--surface); }
.pub-remove[disabled] { opacity: .55; cursor: default; }
.pub-detail { flex-basis: 100%; color: var(--muted); font-size: .85rem; }
.pub-detail summary { cursor: pointer; }
.pub-detail pre { white-space: pre-wrap; background: var(--sunken);
                  padding: .6rem; border-radius: 6px; overflow-x: auto; }

/* --- Площадки --- */

.key { font-size: .8em; color: var(--muted); font-weight: normal; }
.facts { list-style: none; margin: 0 0 1.5rem; padding: 0;
         background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius-card); overflow: hidden; }
.facts li { padding: .5rem .9rem; border-bottom: 1px solid var(--line-soft); }
.facts li:last-child { border-bottom: 0; }
.add-form { margin-top: 1rem; max-width: 34rem; }
/* Подсказка живёт внутри метки, а не отдельным абзацем после неё: абзац
   отрывается от своего поля и читается как подпись к следующему. */
.add-form label .hint { display: block; margin-top: .35rem; }
.add-form textarea::placeholder { color: var(--muted); opacity: .7; }
/* Пример заполнения — вложенный разворот, и своей отметкой он не спорит
   с ▸ у блока формы: у той роль «здесь начинается работа». */
.example-box { margin: .2rem 0 1.4rem; }
.example-box > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.example-box > summary:hover { color: var(--accent); }
.example-list { margin: .6rem 0; padding-left: 1.1rem;
                color: var(--ink-soft); font-size: .9rem; }
.example-list li { margin-bottom: .2rem; }
.example-box .rules { max-height: 22rem; overflow: auto; font-size: 13px; }
.add-form textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .75rem;
                     border: 1px solid var(--line); border-radius: var(--radius);
                     font: 14px/1.5 ui-monospace, monospace; }
.add-form select { display: block; margin-top: .3rem; padding: .5rem .75rem;
                   border: 1px solid var(--line); border-radius: var(--radius);
                   font-size: 1rem; }
.inline-check { display: flex; align-items: center; gap: .4rem; }
.inline-check input { width: auto; margin: 0; }
/* Архив и скрытие площадки: не удаление, но и не рядовая кнопка. */
.danger { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* Удаление аккаунта уводит на страницу подтверждения, поэтому это ссылка,
   а не кнопка. Выглядеть она обязана как соседние кнопки строки — разный
   вид у соседей читался бы как разная опасность, — а краснеть при
   наведении так же, как кнопки в блоке `danger`. */
a.quiet { text-decoration: none; }
a.quiet:hover, .danger button:hover {
  border-color: var(--bad); color: var(--bad); background: var(--bad-soft);
}
.rules { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius-card); padding: 1rem;
         font: 14px/1.6 ui-monospace, monospace; }