:root {
  color-scheme: light dark;
  --bg: #fbfbfc;
  --fg: #1a1a1e;
  --muted: #6a6a75;
  --line: #d9d9e0;
  --field: #fff;
  --accent: #2f5fd0;
  --error-bg: #fdecec;
  --error-fg: #8c1d1d;
  --error-line: #f0b8b8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --fg: #ececf1;
    --muted: #9a9aa5;
    --line: #33333c;
    --field: #1f1f25;
    --accent: #7fa4f5;
    --error-bg: #3a1e1e;
    --error-fg: #f3b9b9;
    --error-line: #6b2f2f;
  }
}
* { box-sizing: border-box; }
/* Колонка во всю высоту окна, чтобы подвал прижимался к низу.
   Без этого короткая страница (503, «вы вошли», отказ) оставляла подвал
   висеть посреди экрана с пустым полем в пол-страницы под ним — снаружи
   это читается как незагрузившаяся страница. Найдено владельцем
   по скриншоту 22.08; запросами такое не проверяется вообще. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--fg);
  margin: 0; padding: 3rem 1.25rem; line-height: 1.5;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { max-width: 25rem; margin: 0 auto; width: 100%; }
.app { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.app-icon { font-size: 1.75rem; line-height: 1; }
.app-name { font-weight: 600; }
h1 { font-size: 1.35rem; margin: 0 0 .35rem; }
.lead { margin: 0 0 1.5rem; color: var(--muted); font-size: .95rem; }
form { display: flex; flex-direction: column; gap: 1rem; }
label { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; color: var(--muted); }
input {
  font: inherit; color: var(--fg); background: var(--field);
  border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .7rem; width: 100%;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button {
  font: inherit; font-weight: 600; color: #fff; background: var(--accent);
  border: 0; border-radius: .5rem; padding: .7rem; cursor: pointer; margin-top: .25rem;
}
button:hover { filter: brightness(1.08); }
.hint { font-size: .8125rem; color: var(--muted); margin: -.5rem 0 0; }
.error {
  background: var(--error-bg); color: var(--error-fg);
  border: 1px solid var(--error-line); border-radius: .5rem;
  padding: .7rem .8rem; font-size: .9rem; margin: 0;
}
.alt { margin: 1.75rem 0 0; font-size: .9rem; color: var(--muted); text-align: center; }
a { color: var(--accent); }
/* ПРИЖАТИЕ К НИЗУ ДЕЛАЕТ margin-top: auto, И ЭТО ЕДИНСТВЕННОЕ, ЧТО ЕГО ДЕЛАЕТ.
   Первая редакция написала margin: 3rem auto 0 — верхний отступ
   фиксированный, — а комментарий рядом утверждал, что прижатие есть.
   Подвал остался висеть посреди экрана, и проверка «директива на месте»
   нашла margin-top: auto В САМОМ КОММЕНТАРИИ. Та же грабля, что 21.08
   на сниппете nginx: grep нашёл искомое в комментарии и сравнил файл
   сам с собой.

   Отступ от контента даёт padding-top, а не margin: margin здесь занят
   работой. На длинной странице auto схлопывается в ноль и остаётся
   только отступ; на короткой — подвал уезжает вниз, сохраняя тот же зазор.

   Шире формы намеренно: заголовки правовых документов длинные, и в колонке
   25rem каждая ссылка уезжала на свою строку — перенос выглядел случайным,
   а не задуманным. На узком экране они всё равно встанут столбиком,
   и там это уместно. */
footer {
  margin-top: auto;
  margin-left: auto; margin-right: auto;
  padding-top: 3rem;
  max-width: 44rem; width: 100%;
  font-size: .8125rem; color: var(--muted); text-align: center;
}
footer nav {
  margin-top: .5rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem;
}

/* Согласие 152-ФЗ. Свой класс, а не общий label: тот выстроен колонкой
   ради «подпись сверху, поле снизу», и галочка в нём уехала бы над текстом. */
.consent { display: flex; align-items: flex-start; gap: .55rem; font-size: .8125rem; color: var(--muted); cursor: pointer; }
.consent input { width: auto; flex: none; margin: .15rem 0 0; accent-color: var(--accent); }
.consent span { line-height: 1.45; }

/* Правовой документ. Ширина шире формы: колонка в 25rem превращает
   перечень целей обработки в бесконечную ленту. */
.doc { max-width: 44rem; }
.doc h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.doc p, .doc ul { font-size: .9375rem; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin-bottom: .35rem; }
.doc .note {
  background: var(--field); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: .375rem;
  padding: .7rem .8rem;
}
.doc .doc-meta { margin-top: 2rem; color: var(--muted); font-size: .8125rem; }
.doc-nav { font-size: .875rem; color: var(--muted); margin: 0 0 1.5rem; }
.doc-archive { font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; }