/* Дизайн-токены и базовые стили - Саммит СВ 2026, направление «Осенний день».
   Единственный CSS-файл приложения: в этап 1 подключается как app/static/style.css
   целиком, дальше наращивается компонентами кабинетов и админки без смены базы.
   Канон дизайна - docs/design/ui-guide.md, мокапы - design/registration-ui.pen. */

:root {
  /* Палитра «осень в Ленинградской области» */
  --bg: #F7F2E9;            /* кремовая бумага - фон всех страниц */
  --surface: #FFFFFF;       /* поля ввода, карточки, строки списков */
  --border: #DED4C2;        /* рамки полей и карточек */
  --text: #2C2A24;          /* основной текст */
  --text-muted: #6F6957;    /* подписи, второстепенный текст */
  --placeholder: #A79E8B;   /* только placeholder, не смысловой текст */

  --primary: #2F5240;       /* хвоя: кнопки, ссылки, заголовок формы */
  --primary-pressed: #264334;

  --accent: #D9922B;        /* янтарь: только графика (полоска, фокус, иконки) */
  --accent-soft: #F6E7C8;   /* тёплые плашки: чип лидера, бейдж «Освободился» */
  --accent-ink: #8A5D14;    /* текст на янтарных плашках; янтарный текст на светлом */

  --danger: #B23A2E;        /* рябина: ошибки, статус «Не едет» */
  --danger-soft: #F4DCD7;
  --danger-ink: #9C3325;

  --success-soft: #DFEAD9;  /* статус «Активен»; уровни WT/AWT */
  --success-ink: #2F5240;

  /* металлы уровней консультантов (GET - бронза, Mill - серебро; золото = янтарь) */
  --bronze-soft: #EFDCC8;
  --bronze-ink: #7E5226;
  --silver-soft: #E9EBED;
  --silver-ink: #5B6570;

  --focus-ring: 0 0 0 4px rgba(217, 146, 43, 0.28);

  /* Типографика. PT Serif самохостится (woff2 в static/fonts/) на этапе внедрения;
     до подключения работает fallback Georgia - тоже serif с кириллицей. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "PT Serif", Georgia, "Times New Roman", serif;

  /* Сетка 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  --radius-m: 10px;         /* поля, строки списков, плашки */
  --radius-l: 12px;         /* кнопки, карточки */
  --radius-pill: 999px;     /* бейджи, чипы */

  --control-h: 50px;        /* высота полей - крупные touch-цели */
  --button-h: 54px;
}

/* --- База --- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}

/* Админка (этап 3) живёт на тех же токенах, но шире */
main.wide { max-width: 1080px; }

a { color: var(--primary); }

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

.kicker {
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

h1 {
  font-family: var(--font-heading);
  color: var(--primary);
  font-size: 30px;
  line-height: 1.2;
  margin: 0;
}

h2 {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}

.dates {
  color: var(--text-muted);
  font-size: 14px;
  margin: var(--space-2) 0 0;
}

/* подпись сразу под заголовком экрана: 4px к заголовку, 16px до следующего блока (мокап) */
h2 + .dates { margin: var(--space-1) 0 var(--space-4); }

/* Фирменная полоска: хвоя - янтарь - рябина. Под h1 формы и страницы успеха. */
.autumn-strip {
  width: 66px;
  height: 4px;
  border: 0;
  margin: var(--space-3) 0;
  background: linear-gradient(90deg,
    var(--primary) 0 20px,   transparent 20px 23px,
    var(--accent) 23px 43px, transparent 43px 46px,
    var(--danger) 46px 66px);
}

/* --- Чип лидера на форме --- */

.leader-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  font-size: 14px;
  margin: var(--space-4) 0;
}

/* --- Поля формы --- */

.field { margin-bottom: var(--space-4); }
.field[hidden] { display: none; }

/* парные поля в один ряд: заезд/выезд, билет/оплата */
.field-row { display: flex; gap: var(--space-3); }
.field-row .field { flex: 1; }

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* звёздочка обязательности: <span class="req">*</span> внутри label */
.req { color: var(--danger); }

input, select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 12px 14px;
  font-size: 16px;              /* меньше нельзя: iOS зумит поля с меньшим шрифтом */
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

/* чекбоксы и радио - не текстовые поля: снимаем полевые стили разом,
   чтобы каждое место использования не сбрасывало их заново */
input[type="checkbox"], input[type="radio"] {
  width: 26px; height: 26px; min-height: 0;
  padding: 0; flex: none; accent-color: var(--primary);
}

textarea { min-height: 92px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--placeholder); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* поле с ошибкой: рамка + текст под полем */
[aria-invalid="true"], .invalid {
  border-color: var(--danger);
  border-width: 1.5px;
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 6px 0 0;
}

/* общая ошибка формы (например, «почта уже зарегистрирована») */
.form-error {
  background: var(--danger-soft);
  color: var(--danger-ink);
  padding: 12px 14px;
  border-radius: var(--radius-m);
  font-size: 14px;
  margin-bottom: var(--space-4);
}

/* плашка успеха («Сохранено» после PRG на карточке) */
.form-ok {
  background: var(--success-soft);
  color: var(--success-ink);
  padding: 12px 14px;
  border-radius: var(--radius-m);
  font-size: 14px;
  margin-bottom: var(--space-4);
}

/* --- Чекбокс --- */

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 15px;
}

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

button, .btn {
  display: block;
  width: 100%;
  min-height: var(--button-h);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

button:active, .btn:active { background: var(--primary-pressed); }

button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button[disabled] { opacity: 0.5; cursor: default; }

/* вторичная кнопка - только парные действия админки («Отклонить» рядом с «Подтвердить») */
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
}

.btn--ghost:active { background: var(--success-soft); }

/* сноска под кнопкой */
.form-note {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  margin-top: var(--space-3);
}

/* --- Кабинеты: карточки, списки, бейджи --- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}

/* карточка, требующая внимания (группа расселения «нужен сосед») */
.card--warn { border: 1.5px solid var(--accent); }

/* карточки заявок (спека регистрации §4): имя + бейдж роли + «когда», контакты строкой */
.requests-sub { color: var(--text-muted); font-size: 13px; margin: var(--space-1) 0 var(--space-4); }
.request-top { display: flex; align-items: center; gap: 8px; }
.request-name { font-weight: 600; font-size: 15px; }
.request-when { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.request-contacts { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

/* нижняя навигация кабинета: прижатая панель на всю ширину (мокап registration-ui).
   Актив - залитая иконка + хвоя, неактив - контурная + placeholder. */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
}

.bottom-nav-row {
  display: flex;
  max-width: 448px;              /* 480 - 2×16, в ритме main */
  margin: 0 auto;
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--placeholder);
  text-decoration: none;
}

.bottom-nav a.active { color: var(--primary); }

main.has-bottom-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* --- Обзор (дашборд) --- */

/* плитки-счётчики 2×2; каждая плитка - ссылка в отфильтрованный список */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.stat-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}

.stat-tile .num { font-size: 26px; font-weight: 700; line-height: 1.2; }
.stat-tile .cap { font-size: 13px; color: var(--text-muted); }
.stat-tile--ok .num { color: var(--success-ink); }
.stat-tile--warn .num { color: var(--accent-ink); }
.stat-tile--danger .num { color: var(--danger-ink); }

/* сигнальная строка «требует внимания» - ссылка в соответствующий вид */
.alert-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.alert-row--ok { background: var(--success-soft); color: var(--success-ink); }

/* строка участника в списке команды (ссылка на карточку) */
.row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  margin-bottom: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.row-item .name { font-weight: 600; font-size: 15px; }
.row-item .sub { color: var(--text-muted); font-size: 13px; }

/* янтарная пометка сигнального поля в подстроке («без оплаты», конфиг alert_if) */
.sub-alert { color: var(--accent-ink); font-weight: 600; }

/* полоска статуса слева (в списках вместо бейджа); inset-тень клиппится по радиусу */
.row-item--ok     { box-shadow: inset 5px 0 0 var(--success-ink); }
.row-item--warn   { box-shadow: inset 5px 0 0 var(--accent); }
.row-item--danger { box-shadow: inset 5px 0 0 var(--danger); }

/* строка с чекбоксом выбора (расселение: «Ждут расселения»); выбранная подсвечена */
.row-item--picked { border: 1.5px solid var(--primary); }

/* строка поиска над списком */
.search { min-height: 44px; }

/* крестик очистки поиска: показывает ui.js только при введённом тексте */
.search-wrap { position: relative; }
.search-wrap .search { padding-right: 44px; }
.search-wrap .search::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-clear {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-m);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.search-clear[hidden] { display: none; }
.search-clear:active { background: none; color: var(--text); }

/* --- Профиль --- */

.profile-card { margin-top: var(--space-4); }
.profile-name { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0; }
.profile-role { color: var(--text-muted); font-size: 13px; margin: 2px 0 0; }
.profile-divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; }

.profile-contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  margin: var(--space-2) 0 0;
}

.profile-contact svg { color: var(--text-muted); flex: none; }

/* компактная строка ссылки-приглашения: янтарный чип (стиль .leader-note) + кнопка-иконка */
.link-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--radius-l);
  padding: 12px 14px;
  margin-top: var(--space-5);
}

.link-row > svg { flex: none; }
.link-row .texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.link-row .cap { font-size: 13px; font-weight: 600; }
.link-row .url { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* кнопка-иконка: квадратная, без фона (кнопки по умолчанию блочные во всю ширину) */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  flex: none;
  background: transparent;
  border-radius: var(--radius-m);
  color: var(--accent-ink);
}

.btn-icon:active { background: transparent; opacity: 0.55; }

/* после копирования JS вешает .copied на 1.5 сек - иконка меняется на галочку */
.btn-icon .icon-check { display: none; }
.btn-icon.copied .icon-copy { display: none; }
.btn-icon.copied .icon-check { display: block; }

.form-note--left { text-align: left; }

.logout-form { margin-top: var(--space-7); }

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin: 0 auto;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.logout-btn:active { background: transparent; color: var(--text); }

/* статус-бейджи; без модификатора - нейтральный (для нестандартных статусов конфига) */
.badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.badge--ok     { background: var(--success-soft); border: 0; color: var(--success-ink); }
.badge--warn   { background: var(--accent-soft); border: 0; color: var(--accent-ink); }
.badge--danger { background: var(--danger-soft); border: 0; color: var(--danger-ink); }

/* уровни консультантов: SV/ASV - нейтральный .badge, дальше металлы */
.badge--bronze { background: var(--bronze-soft); border: 0; color: var(--bronze-ink); }
.badge--silver { background: var(--silver-soft); border: 0; color: var(--silver-ink); }
.badge--gold   { background: var(--accent-soft); border: 0; color: var(--accent-ink); }

/* фильтры-чипы над списком; ряд скроллится горизонтально */
.chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--space-4);
}

.chip {
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
}

.chip--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* чипы с переносом строк - внутри раскрывающегося фильтра */
.chips--wrap { flex-wrap: wrap; overflow-x: visible; }

/* Фильтр TAB Team: капсула + шторка (ui-guide §5) */
.leader-filter { margin-bottom: var(--space-4); }
.filter-pill summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.filter-pill summary::-webkit-details-marker { display: none; }
.filter-pill .filter-pill-text { flex: 1; }
.filter-pill .chev { color: var(--text-muted); }
.filter-pill[open] summary { border-radius: 10px 10px 0 0; }
.filter-pill .sheet-body {
  background: var(--surface); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 10px 10px; padding: var(--space-3);
}
.sheet-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 15px;
}
.sheet-row .name { flex: 1; }
.sheet-row .cnt { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.sheet-row .check { display: none; flex: none; color: var(--primary); }
.sheet-row:has(input:checked) { background: var(--success-soft); }
.sheet-row:has(input:checked) .name { font-weight: 600; }
.sheet-row:has(input:checked) .check { display: block; }
/* выбор показывают фон и галка (ui-guide §5); нативный чекбокс прячем только там,
   где :has отрисует замену - в старых Safari details-фолбэк остаётся с чекбоксами */
@supports selector(:has(a)) {
  .sheet-row input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; border: 0; opacity: 0; pointer-events: none;
  }
}
.sheet-row--reset { color: inherit; text-decoration: none; }
.search-field { position: relative; }
.search-field svg {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  color: var(--placeholder); pointer-events: none;
}
.search-field input { padding-left: 42px; }
.sheet-body button { margin-top: var(--space-3); }
.chips--picked { margin: var(--space-2) 0 var(--space-4); flex-wrap: wrap; overflow-x: visible; }

/* Шторка поверх затемнения - JS-режим компонента (ui-guide §5 «Шторка выбора») */
dialog.sheet {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: 480px; margin: 0 auto;
  border: 0; border-radius: 16px 16px 0 0;
  background: var(--surface);
  padding: var(--space-5) var(--space-4) var(--space-4);
  max-height: 80dvh; overflow-y: auto;
}
dialog.sheet::backdrop { background: rgba(44, 42, 36, 0.45); }
dialog.sheet::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto var(--space-3);
}
dialog.sheet .sheet-body { border: 0; padding: 0; }
dialog.sheet .sheet-title {
  font-family: var(--font-heading); font-size: 18px; font-weight: 700;
  margin: 0 0 var(--space-3);
}

/* Сегмент-контрол «Расселить | Номера» (ui-guide §5) */
.segments {
  display: flex; gap: 4px; padding: 4px;
  margin-bottom: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.seg {
  flex: 1; width: auto; min-height: 36px; margin: 0; padding: 0 8px;
  border-radius: 999px; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.seg:active { background: transparent; }
.seg--active, .seg--active:active { background: var(--primary); color: #fff; }

/* Строка ждущего с чекбоксом; выбранные закрепляются сверху (order) и не скрываются поиском */
.waiting-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-4); }
.row-check { gap: 12px; cursor: pointer; }
.row-check .texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-check:has(input:checked) { border: 1.5px solid var(--primary); order: -1; }
.row-note { font-size: 12px; font-style: italic; color: var(--text-muted); }

/* Карточка группы */
.group-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.group-title { font-weight: 700; font-size: 16px; }
.group-count { color: var(--text-muted); font-size: 14px; }
.group-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.group-row .texts { display: flex; flex-direction: column; gap: 2px; }
.group-row .name { font-weight: 600; font-size: 15px; }
.group-row .sub { color: var(--text-muted); font-size: 13px; }
.group-row form { margin: 0; }

/* блок «Расселение» в карточке участника - производная проекция (спека §6.2), вид - мокап «A - Карточка» */
.housing-head { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.housing-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.housing-row__ic { flex: none; color: var(--text-muted); }
.housing-row__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.housing-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.housing-row__title { font-size: 15px; font-weight: 600; color: var(--text); }
.housing-row__title--muted { font-weight: 400; color: var(--text-muted); }
.housing-row__sub { font-size: 13px; color: var(--text-muted); }
.housing-row__sub--self { font-weight: 600; } /* участник карточки - визуальный якорь «это про него» */
.housing-row__count { flex: none; font-size: 13px; color: var(--text-muted); }

/* Свой номер (спека housing-self): read-only авто-карточка «В номере со своими» -
   приглушена тоном фона страницы, действий нет */
.self-room { background: var(--bg); }
.self-room .group-head { align-items: flex-start; }
.self-room .group-head .texts { display: flex; flex-direction: column; gap: 2px; }
.self-room .group-head .sub { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.btn-remove {
  width: 44px; min-height: 44px; margin: 0; padding: 0;
  background: transparent; color: var(--text-muted); border: 0;
}
.btn-remove:active { background: transparent; color: var(--text); }
.assign-link { display: block; margin: var(--space-3) auto 0; }

/* Подсветка совпадения поиска в карточке группы */
.hl { background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }

/* Шаг «Добавить в номер»: карточка пары - форма, тап по карточке сабмитит (JS) */
.group-pick .card { cursor: pointer; }
.pick-btn { min-height: 44px; margin-top: var(--space-2); }

/* --- Организаторы (спека организаторов 2026-07-04) --- */

/* пункт панели с длинной подписью - мельче остальных (мокап) */
.bottom-nav a.nav-long { font-size: 10px; }

/* строка организатора: аватар в цвете роли + имя + пилюля команды + шеврон.
   Цвет аватара кодирует только роль; состояние - бейдж и приглушение имени */
.org-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  color: inherit; text-decoration: none;
}
.org-row .name { font-weight: 600; font-size: 15px; }
.org-row--responsible .name { font-weight: 700; font-size: 16px; }
.org-row--disabled .name { color: var(--text-muted); }
.org-row .chev { margin-left: auto; color: var(--text-muted); display: flex; }
.org-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.org-avatar--responsible { background: var(--accent-soft); color: var(--accent-ink); }
.org-avatar--leader { background: var(--success-soft); color: var(--success-ink); }
.org-count {
  flex: none; padding: 1px 9px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
}
.org-group { margin-bottom: 16px; }
.org-leaders { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.org-empty { font-style: italic; color: var(--text-muted); font-size: 14px; margin: 8px 0 4px; }
.org-none { font-weight: 600; font-size: 15px; margin: 4px 0; }

/* подпись под полем (почта-логин, перепривязка) */
.field-hint { color: var(--text-muted); font-size: 13px; margin: -6px 0 var(--space-4); }

/* шапка «Своя команда · K участников» в блоке ответственного */
.org-team-head { display: flex; justify-content: space-between; align-items: baseline; }
.org-team-head .name { font-weight: 700; font-size: 16px; }
.org-team-count { color: var(--text-muted); font-size: 14px; }

/* danger-кнопки (ui-guide §5): контур - вход в удаление, заливка - подтверждение */
.btn--outline-danger {
  background: transparent; border: 1.5px solid var(--danger); color: var(--danger);
}
.btn--outline-danger:active { background: var(--danger-soft); }
.btn--danger { background: var(--danger); }
.btn--danger:active { background: var(--danger-ink); }

/* визуально неактивное «Удалить организатора» - silver-контур, не полупрозрачность */
button.btn--disabled[disabled] {
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text-muted); opacity: 1;
}

/* кнопка-ссылка primary-высоты («Удалить организатора» → экран подтверждения, «Отмена») */
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* заголовок секции формы и карточки («О ВАС», «ПРОЖИВАНИЕ», «ДЛЯ ЛИДЕРА») */
.section-title {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: var(--space-6) 0 var(--space-3);
}

/* сворачиваемая секция карточки (details + summary.section-title, без JS).
   Свёрнутые поля остаются в форме и уходят в POST; секция с ошибкой
   валидации рендерится с атрибутом open на сервере. */
details.card-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

details.card-section > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);     /* стрелка вниз - свёрнуто */
  margin-right: 2px;
}

details.card-section[open] > summary::after {
  transform: rotate(-135deg);   /* стрелка вверх - раскрыто */
}

/* кабинетная секция карточки (все поля on_form: false, «Для лидера»):
   янтарная зона отделяет то, что ведёт лидер, от данных из формы */
details.card-section--cabinet {
  background: var(--accent-soft);
  border-radius: var(--radius-l);
  padding: 12px 14px 14px;
}

details.card-section--cabinet > summary,
details.card-section--cabinet > summary::after {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* --- Страница успеха --- */

.success-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

/* строка итогов «ключ - значение» */
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 14px;
  padding: 6px 0;
}

.summary-row .k { color: var(--text-muted); }
.summary-row .v { font-weight: 600; text-align: right; }

/* --- Экран входа (этап 2) --- */

.login { text-align: center; }
.login .autumn-strip { margin-left: auto; margin-right: auto; }
.login form { text-align: left; margin-top: var(--space-5); }

/* поле кода: 26px/700 с разрядкой, янтарная рамка - код единственное действие экрана */
.code-input {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
  border-color: var(--accent);
}

/* кнопка-ссылка (повторная отправка кода): действие в потоке текста */
.link-btn {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  text-decoration: underline;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.link-btn[disabled] { opacity: 0.5; cursor: default; }

/* столбик ссылок-действий под формой входа */
.login-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: 13px;
}

/* --- Версии и обновления --- */

/* пилюля «Доступно обновление»: вставляет JS над bottom-nav при новом билде */
.update-pill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(74px + env(safe-area-inset-bottom));  /* над прижатой панелью навигации */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  min-height: 0;
  padding: 10px 16px;
  background: var(--success-soft);
  color: var(--success-ink);
  border: 1px solid rgba(47, 82, 64, 0.2);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(44, 42, 36, 0.25);
}

.update-pill:active { background: var(--success-soft); opacity: 0.8; }

/* модалка «Что нового» */
dialog.whats-new {
  width: min(342px, calc(100vw - 48px));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 32px -12px rgba(44, 42, 36, 0.35);
}

dialog.whats-new::backdrop { background: rgba(44, 42, 36, 0.45); }

.whats-new h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

.whats-new .autumn-strip { margin: var(--space-3) 0 var(--space-4); }

.whats-new-ok { min-height: 48px; font-size: 15px; margin-top: var(--space-4); }

/* записи релиза: маркер - янтарная точка */
.release-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.release-notes li {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.4;
}

.release-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* история изменений в Профиле: свёрнутая карточка, записи мельче модалки */
details.changelog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 14px 16px;
  margin-top: var(--space-5);
}

details.changelog > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

details.changelog > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);      /* стрелка вниз - свёрнуто */
  margin-right: 2px;
}

details.changelog[open] > summary::after {
  transform: rotate(-135deg);    /* стрелка вверх - раскрыто */
}

.release { margin-top: var(--space-3); }

.release-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  margin: 0 0 6px;
}

.release-head .v { font-weight: 700; }
.release-head .d { color: var(--text-muted); font-size: 13px; }

.changelog .release-notes { gap: 6px; }
.changelog .release-notes li { font-size: 13px; }
.changelog .release-notes li::before { top: 6px; }

/* футер версии в Профиле */
.version-footer {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  margin: var(--space-4) 0 0;
}