/*
  Базовое оформление «Трока» (этап 1, t82).

  ОТКУДА ВЗЯТО. Имена классов — из legacy: `legacy/app/static/new_styles.css`
  (`.card--base`, `.card--widget`, `.inner`, `.base-text`, `.title-text`, `.subtitle`,
  `.row/.column/.space-around/.space-between`, `.button-like`, `.toast`).

  ГДЕ ЦВЕТА. Цветов в этом файле НЕТ и быть не может (FE-02): они живут в
  `themes.css` — единственном файле с литералами. Здесь только раскладка и
  оформление на токенах `var(--c-…)` / `var(--radius-…)`.

  ЧТО ЕЩЁ УПРОЩЕНО (названные расхождения):
  * одна схема на страницу больше не «зашита»: схему и палитру ставит
    `theme-init.js` атрибутами на `<html>`;
  * пиксельный шрифт (`Press Start 2P`) не подключается внешне — оставлен системный
    стек (`--font-sans` в `theme-tokens.css`);
  * иконки-SVG legacy (`.tab-btn svg`) не переносятся: плитки пока текстовые;
  * этот файл — ПЕРЕХОДНЫЙ: компоненты и страницы перерисовываются по разделам ТЗ,
    поэтому старые классы пока остаются рабочими на новых токенах.
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-base) / var(--lh-normal) var(--font-sans);
}

/* Открытая панель блокирует прокрутку фона: иначе «лист» ездит под пальцем. */
body.has-panel {
  overflow: hidden;
}

/* --- оболочка ---------------------------------------------------------------------
   Верхней панели с брендом НЕТ (решение владельца): страница начинается с контента.
   Нижний отступ — под фиксированную панель вкладок вместе с системной зоной (вырезы). */

.app {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--gutter);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-6));
  min-height: 100vh;
}

/* --- раскладка ------------------------------------------------------------------- */

.inner {
  padding: 12px;
  max-width: 720px;
  margin: 0 auto;
  gap: 12px;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

/* --- карточки и текст ------------------------------------------------------------
   ОДИН ВЛАДЕЛЕЦ НА КЛАСС (t154). Примитивы `.card`, `.title-text`, `.base-text`,
   `.subtitle`, `.progress` живут ТОЛЬКО в components.css — здесь их больше нет.
   Раньше эти правила дублировались тут старой версией (padding 12px против
   var(--card-pad) = 16px, кегли 12/13/18px против токенов --fs-*), и порядок
   подключения делал app.css вторым источником правды: карточка на деле получала
   12px, заголовок — 600 вместо 700. Ниже остались только модификаторы и РАЗМЕРЫ
   ПО КОНТЕКСТУ (они не второй владелец класса, а уточнение там, где крупнее). */

.card--base {
  box-shadow: inset 0 0 0 2px var(--c-card-stroke);
}

.card--widget {
  background: var(--c-text-block-bg);
}

/* Крупный аватар там, где он таким и был: семья в профиле, строки списков и
   операции баланса. Сам класс `.avatar` (48 px, круглый) — в components.css. */
.profile-family__row .avatar,
.list-row .avatar,
.transaction .avatar {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  object-fit: cover;
}

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

.button-like {
  border: 1px solid var(--c-special-border-color);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text-primary);
  padding: 8px 12px;
  cursor: pointer;
}

.button-like:disabled {
  opacity: 0.5;
  cursor: default;
}

.tab-btn {
  width: 86px;
  height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: 12px;
}

/* --- единые уведомления (t63): снизу по центру, из-под навигации -------------------- */

.toast-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-2) + var(--toast-lift, 0px));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--gutter);
  pointer-events: none;
  /* Низ обрезан по кромке навигации: тост «выезжает из-под» панели, а не поверх неё. */
  clip-path: inset(-32px -16px 0 -16px);
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: min(100%, 440px);
  max-height: 45vh;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  /* Градиентная обводка: фон карточки в padding-box, рамка — в border-box. */
  background:
    linear-gradient(var(--c-bg-elev), var(--c-bg-elev)) padding-box,
    var(--toast-frame, var(--c-gradient-brand)) border-box;
  box-shadow: var(--shadow-card);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  opacity: 0;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease);
  will-change: transform, opacity;
}

.toast--in {
  opacity: 1;
  transform: translateY(0);
}

.toast--out {
  opacity: 0;
  transform: translateY(8px);
  transition-duration: var(--dur-fast);
}

.toast--success { --toast-frame: linear-gradient(90deg, var(--c-success) 0%, var(--c-accent-strong) 100%); }
.toast--error { --toast-frame: linear-gradient(90deg, var(--c-danger) 0%, var(--c-accent-strong) 100%); }
.toast--info { --toast-frame: var(--c-gradient-brand); }

.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.toast--success .toast__icon { background: var(--c-success-bg); color: var(--c-text-success); }
.toast--error .toast__icon { background: var(--c-danger-bg); color: var(--c-danger); }

.toast__text {
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
}

.toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  margin: calc(var(--space-1) * -1) 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.toast__close:hover,
.toast__close:focus-visible {
  background: var(--c-accent-soft);
  color: var(--c-text);
}

.toast__action {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

@media (max-width: 380px) {
  .toast {
    width: 100%;
    padding-left: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transform: none;
    transition: opacity var(--dur) var(--ease);
  }
  .toast--in { transform: none; }
  .toast--out { transform: none; }
}

/* t63: виджет тега на profile.html вне scope — его пустую подпись гасим здесь, чтобы
   вёрстка не оставляла зарезервированного места (результат уходит тостом). */
#profile-tag-state {
  display: none;
}

.spinner {
  color: var(--c-text-muted);
}

/* --- этап 2 (t83): карточка события, достижения, история баланса --------------------- */

/* Три состояния страницы: `data-state` ставит app.js, поэтому «вечной загрузки» нет.
   `ready` скрывает строку состояния — данные уже на местах. */
.base-text[data-state="loading"] {
  color: var(--c-text-muted);
  font-style: italic;
}

.base-text[data-state="error"] {
  color: var(--c-text-danger);
}

.base-text[data-state="empty"] {
  color: var(--c-text-muted);
}

/* Достижение: арт слева, текст справа (legacy `.achievement` / `.achievement-img`). */
.achievement {
  align-items: flex-start;
}

.achievement-img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--c-surface);
}

.achievement-body {
  flex: 1;
}

/* Строка истории баланса: сумма и описание (legacy `.transaction`). */
.transaction {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-special-border-color);
}

.transaction:last-child {
  border-bottom: none;
}

/* Фрагмент страницы — вертикальный поток, как `.inner` у legacy. */
.fragment {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- этап 3а (t88): донаты ----------------------------------------------------------- */

/* Поле ввода: класс назван так же, как в legacy-разметке донатов («input-like»). */
.input-like {
  border: 1px solid var(--c-special-border-color);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text-primary);
  padding: 8px 12px;
  font: inherit;
}

/* Полоса прогресса сбора. `.progress` (дорожка) и `.progress__fill` (заливка) —
   ОДИН владелец, components.css (t154). Здесь осталось только legacy-имя
   `.progress-bar`; прежняя здешняя версия `.progress` красила дорожку акцентом и
   тем самым показывала «собрано 100%» при нуле — на донате это было видно. */
.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--c-text-block-bg);
}

/* Карточка идеи на доске: текст слева, действия справа. */
.idea {
  align-items: flex-start;
}

/* --- этап 3в (t90): Инстатропск --------------------------------------------------- */

/* Поле ввода Инстатропска: тот же вид, что `.input-like` этапа 3а, но под textarea/файл. */
.insta-input {
  width: 100%;
  border: 1px solid var(--c-special-border-color);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text-primary);
  padding: 8px 12px;
  font: inherit;
  box-sizing: border-box;
}

textarea.insta-input {
  min-height: 100px;
  resize: vertical;
}

/* Чип тега: нажатие либо фильтрует ленту, либо добавляет тег в черновик (legacy `.hashtag`). */
.insta-chip {
  border: 1px solid var(--c-accent);
  border-radius: 20px;
  background: var(--c-surface);
  color: var(--c-text-primary);
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

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

/* Карточка поста: шапка с автором, одно фото, подвал с лайком (legacy `.post`). */
.insta-post {
  gap: 10px;
}

.insta-post-head {
  gap: 10px;
  align-items: center;
}

.insta-userpic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.insta-author {
  font-weight: bold;
  color: var(--c-text-primary);
}

.insta-username {
  color: var(--c-text-accent);
  text-decoration: none;
 }

/* Фото поста одно (§3.9): квадрат со скруглением, как `.swiper` у legacy. */
.insta-photo,
.insta-preview-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Кнопка лайка: сердце меняется по состоянию (`aria-pressed`), счётчик — рядом. */
.insta-like {
  display: flex;
  gap: 6px;
  align-items: center;
}

.insta-like[aria-pressed="true"] {
  color: var(--c-text-special);
}

/* Сетка превью постов в профиле: три в ряд, как legacy `#posts-container`. */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.insta-preview {
  display: block;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
}

.insta-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

/* --- главная (раздел 3) -------------------------------------------------------------
   Блоки референса: приветствие, плитки второго уровня, баннер игры, карточка
   ближайшего события, подсказка. Всё — на токенах: цвета в themes.css, форма и
   плотность в theme-tokens.css (палитра их НЕ переопределяет — масштаб общий, t148). */

.home-greeting {
  gap: var(--space-3);
}

.home-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.home-avatar-wrap {
  position: relative;
  display: flex;
  flex: none;
}

.home-person-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.home-hello {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.home-name {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-md), 4.4vw, var(--fs-lg));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.home-profile {
  flex: none;
}

.home-greeting .state {
  padding: var(--space-2) 0 0;
}

/* Плитки второго уровня: сетка 2×2 в порядке legacy, вид — ряд «иконка + подпись». */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}

.tile:active {
  transform: scale(0.98);
}

.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  flex: none;
}

.tile__icon svg {
  width: 20px;
  height: 20px;
}

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

/* Баннер игры: градиент темы и «призрачный» круг play — как на референсе. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--c-gradient-hero);
  color: var(--c-text-on-gradient);
  text-decoration: none;
  box-shadow: var(--shadow-glow);
  overflow: hidden;
}

.hero__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--c-overlay);
  color: var(--c-text-on-gradient);
  flex: none;
}

.hero__label {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-align: center;
}

  display: none;
}

/* Подсказка сообщества: тонированная карточка, а не «ещё одна карточка-карточка». */
.tip-card {
  gap: var(--space-2);
  background: var(--c-tip-bg, var(--c-accent-soft));
  border-color: var(--c-tip-border, var(--c-border));
  box-shadow: none;
}

.tip-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tip-card__title {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* Плитки остаются сеткой 2×2 на любой ширине: так читается порядок legacy, а
   подписи не обрезаются (4 колонки на широком экране были тесными). */

@media (prefers-reduced-motion: reduce) {
  .tile,
  .hero {
    transition: none;
  }

  .tile:active {
    transform: none;
  }
}

/* --- мероприятия (раздел 4) --------------------------------------------------------
   Общие блоки раздела: шапка страницы, стек карточек, строка списка, формы, голос. */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: none;
}

.list-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Строка списка: маленькая обложка + название + мета. Одна на Афишу и свадьбы. */
.event-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.event-row__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--c-gradient-hero);
  color: var(--c-text-on-gradient);
  font-size: var(--fs-xl);
  overflow: hidden;
  flex: none;
}

.event-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.event-row__title {
  overflow: hidden;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-row__meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.form {
  gap: var(--space-3);
}

/* --- создание мероприятия по референсу владельца (t65) ----------------------------
   Локальные классы только для этой страницы: общие `.form`/`.field`/`.choice`/карусель
   используются другими формами. Цвета — только токены темы (FE-02). */
.event-create {
  gap: var(--space-4);
}

/* Шапка: круглая «назад» + заголовок, нижняя граница как в референсе. */
.event-create__head {
  justify-content: flex-start;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border);
}

.event-create__head .title-text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

/* Блок правил публикации (info-callout макета). */
.event-create__callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--c-accent-soft);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.event-create__callout-icon {
  flex: none;
  margin-top: 2px;
  color: var(--c-accent);
  fill: currentColor;
}

.event-create__callout-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.event-create__callout-title {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.event-create__callout-note {
  color: var(--c-text-muted);
}

/* Город: pill-бейдж (city-badge макета). */
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.city-chip svg {
  flex: none;
  color: var(--c-text-muted);
}

.city-chip__source {
  color: var(--c-text-muted);
  font-weight: var(--fw-regular);
}

/* Дата и время — одним рядом (на узких экранах см. медиа ниже). */
.event-create__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.event-create__row .field {
  min-width: 0;
}

/* Поля крупнее, как в макете: 12/16 px внутри, радиус 12, 16 px текст. */
.event-create .field__input {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
}

.event-create .event-create__textarea {
  min-height: 80px;
  resize: vertical;
}

.event-create .field__input:focus-visible {
  border-color: var(--c-border-focus);
}

/* Подсказка с иконкой (hint-text макета). */
.event-create__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.event-create__hint svg {
  flex: none;
  margin-top: 2px;
  fill: currentColor;
}

.event-create__hint--muted {
  opacity: 0.85;
}

/* Варианты «Для кого?» — компактнее и ближе к макету; семантика прежняя. */
.event-create .choice {
  min-height: 48px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

.event-create .choice[aria-checked="true"] {
  color: var(--c-text-accent);
  font-weight: var(--fw-semibold);
}

/* Карусель t44 остаётся лентой; меняется только подпись — плашка-«стекло». */
.event-create .cover-option__caption {
  inset: auto auto var(--space-1) 50%;
  width: max-content;
  max-width: calc(100% - var(--space-2));
  padding: 2px var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-nav-bg);
  color: var(--c-text);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.event-create__submit {
  min-height: 52px;
  margin-top: var(--space-1);
  font-size: var(--fs-md);
}

/* Инлайн-состояния — компактные, не «карточка загрузки». */
.event-create__state {
  align-items: flex-start;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  text-align: left;
}

@media (max-width: 400px) {
  .event-create {
    gap: var(--space-4);
  }

  .event-create__row {
    gap: var(--space-2);
  }
}

@media (max-width: 340px) {
  .event-create__row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-create .cover-option {
    transition: none;
  }
}

.form .field {
  gap: var(--space-1);
}

/* Голос: три ответа, выбранный — `aria-pressed` + заливка (не только цвет). */
.vote {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.vote__btn {
  min-height: var(--tap-min);
  padding: var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.vote__btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semibold);
}

/* ── завершение мероприятия организатором (t178) ──────────────────────────────
   Панель отметок «кто пришёл»: предупреждение о рейтинге, список участников с
   чекбоксами и итоговые кнопки. Строка участника — не ниже тап-зоны 44, чекбокс
   подписан именем (кликабельна вся строка-подпись), длинное имя переносится. */

.event-finish {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-finish__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-finish__warning {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.attendee-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.attendee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}

.attendee__label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--tap-min);
  cursor: pointer;
}

.attendee__check {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--c-accent);
}

.attendee__name {
  color: var(--c-text);
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}

.attendee__meta {
  flex: none;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: right;
}

.attendee__check:focus-visible + .attendee__name {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.event-finish__quick,
.event-finish__actions {
  display: flex;
  gap: var(--space-2);
}

.event-finish__quick {
  flex-wrap: wrap;
}

.event-finish__actions > * {
  flex: 1;
}

/* Итог завершения — спокойным «положительным» цветом, а не оформлением загрузки. */
.state[data-state="success"] {
  color: var(--c-text-accent);
  font-weight: var(--fw-semibold);
}

@media (max-width: 380px) {
  /* Узкий экран: голос и рейтинг уходят под имя, чтобы строка не сжимала подпись. */
  .attendee {
    flex-direction: column;
    align-items: stretch;
  }

  .attendee__meta {
    padding-left: calc(20px + var(--space-2));
    text-align: left;
  }
}

.event-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-text-2);
  font-size: var(--fs-base);
}

@media (prefers-reduced-motion: reduce) {
  .vote__btn {
    transition: none;
  }
}

/* --- профиль (раздел 5) -----------------------------------------------------------
   Карточка профиля, входы в подразделы, достижения, баланс, шаги верификации. */

.profile-card {
  gap: var(--space-3);
}

.profile-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.profile-avatar-wrap {
  display: flex;
  flex: none;
}

.profile-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
  /* Длинный ник/логин без пробелов переносится, а не растягивает карточку: иначе
     на телефоне страница «уезжает» вбок (проверено на нике из 52 символов, t162). */
  overflow-wrap: anywhere;
}

/* Имя и карандаш смены тэга в один ряд (набросок `part_profile_example.html`):
   карандаш прижат вправо и не сжимает имя. */
.profile-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.profile-name-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.profile-name__verify {
  position: static;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transform: translateY(2px);
}

.profile-name {
  min-width: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* @логин и постоянный ID — одной строкой; ID — пилюлей моноширинным, как в наброске. */
.profile-handle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.profile-handle {
  min-width: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.profile-id {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

/* ── полоса статусов (ранг · рейтинг · предупреждения) ───────────────────────
   Три равные колонки на всю ширину карточки, с тонкими разделителями. Значения
   цветные и текстовые: ранг — акцентом, рейтинг — предупреждающим, варны —
   зелёным при нуле и красным при положительном числе (`data-positive`). */
.profile-status-bar {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.profile-status-bar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 200px;
  padding: var(--space-2) var(--space-1);
  text-align: center;
}

.profile-status-bar__item + .profile-status-bar__item {
  border-left: 1px solid var(--c-border);
}

.profile-status-bar__label {
  color: var(--c-text-muted);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.profile-status-bar__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: var(--c-text);
  /* 11 px и без переноса: в узкой колонке 390 px «Тропмейстер» должен влезть
     целиком, а не разорваться на «Тропмейсте/р». Длинный ранг — многоточие. */
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

#profile-rank-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-status-bar__icon {
  flex: none;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.profile-status-bar__item--rank .profile-status-bar__value {
  color: var(--c-text-accent);
}

.profile-status-bar__item--rating .profile-status-bar__value {
  color: var(--c-warning);
}

.profile-status-bar__item--warn .profile-status-bar__value {
  color: var(--c-success);
}

#profile-warns[data-positive="true"] {
  color: var(--c-text-danger);
}

/* ── шапка профиля по эталону владельца (t162) ───────────────────────────────
   Слева крупный аватар (84 px, `.profile-avatar`), справа столбик: ник, @логин,
   строка «булавка + город · знак пола + пол», ниже — статус: пилюля тэга и кнопка
   смены тэга со знаком пола. Размеры/расположение — из `new/profile_example.html`,
   цвета и радиусы — наши токены (палитра эталона не копируется). */

.profile-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}

.profile-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.profile-meta__icon {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--c-text-muted);
}

/* Знак пола в шапке профиля — тем же смысловым цветом, что и в списке участников
   (21.10.2026): синий у мужского, розовый у женского, в обеих схемах. */
.profile-meta__icon--male {
  color: var(--c-gender-male);
}

.profile-meta__icon--female {
  color: var(--c-gender-female);
}

.profile-meta__dot {
  color: var(--c-text-muted);
}

.profile-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Тэг — пилюля БЕЗ `@`: это подпись («как звать»), а не логин; длинный тэг переносится. */
.profile-tag {
  max-width: 100%;
  padding: 1px var(--space-2);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-chip);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}

/* Кнопка смены тэга: знак пола (или карандаш, если пол не указан) + цена.
   Тап-зона — `--tap-min`: это действие, а не подпись, и пальцем в 24 px не попасть. */
.profile-tag__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.profile-tag__edit:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.profile-tag__edit:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.profile-tag__icon {
  flex: none;
  width: 12px;
  height: 12px;
}

.profile-tag__price {
  white-space: nowrap;
}

.profile-tag-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-tag-form__actions {
  display: flex;
  gap: var(--space-2);
}

.profile-tag-form__actions > * {
  flex: 1;
  min-width: 0;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.profile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Достижение: арт слева, тело справа (legacy `.achievement`), на общих токенах. */
.achievement {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.achievement .achievement-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--c-surface-2);
  flex: none;
}

.achievement-body {
  flex: 1;
  min-width: 0;
}

.achievement-title {
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.achievement-description {
  margin-top: 2px;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.achievement-note {
  margin-top: var(--space-1);
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

/* t114: страница ачивок по эталону `new/web_elements/achievment_list.html`.
   РАЗМЕРЫ — ИЗ ЭТАЛОНА: заголовок 34/800, подпись 16/500, табы 16/500 с радиусом 12 и
   зазором 12, карточка с радиусом 20 и полями 16, арт 80 с радиусом 16, название 18/700,
   описание 15, кнопка-монета 44, зазор списка 14. Ширина страницы — эталонные 440 минус
   его поля по 16 = 408 px: на окне 502 px карточка получается того же размера, что в
   эталоне, а на телефоне страница занимает всю оболочку.
   ЦВЕТА — ТОКЕНЫ ТЕМЫ (FE-02): палитру эталона (#0f0716, var(--c-widget-neon)…) не копируем, поэтому
   страница живёт в любой палитре и схеме. Фиолетовая грань — `color-mix` акцента с фоном;
   где `color-mix` не поддержан, остаётся обычная грань темы (первое объявление). */
.ach-page {
  width: 100%;
  max-width: calc(440px - 2 * var(--gutter));
  margin: 0 auto;
  gap: 0;
}

/* Шапка по центру: 12 px верхнего поля оболочки + 14 = эталонные 26 px до заголовка. */
.ach-page__head {
  display: block;
  margin: 14px 0 var(--space-6);
  text-align: center;
}

.ach-page__head #ach-back {
  display: none;
}

.ach-page__head .title-text {
  width: 100%;
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.4;
  text-align: center;
}

.ach-page__subtitle {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}

/* Табы: ДВЕ отдельные кнопки с зазором 12 — как в эталоне, а не сегмент-контейнер. */
.ach-tabs {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ach-tab {
  flex: 1;
  padding: 14px 10px;
  border: 1px solid var(--c-border);
  border-color: color-mix(in srgb, var(--c-accent) 26%, var(--c-bg));
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ach-tab[aria-selected="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-tab-active-text);
  font-weight: var(--fw-semibold);
  box-shadow: 0 4px 15px var(--c-accent-soft);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--c-accent) 30%, transparent);
}

.ach-tab:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

/* Список: зазор 14 — из эталона. */
.ach-page .ach-list {
  gap: 14px;
}

/* --- 25.10.2026: основные достижения — прогресс и «запертые» карточки --------------- */
.ach-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.ach-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.ach-progress__label {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.ach-progress__value {
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.ach-progress__track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-surface-3);
}

.ach-progress__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
  transition: width 0.35s ease;
}

.ach-card--locked {
  opacity: 0.74;
  border-color: var(--c-border);
}

.ach-card--locked:hover {
  border-color: var(--c-border);
}

.ach-card--locked .achievement-img {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.85;
}

.ach-card--locked .achievement-title,
.ach-card--locked .achievement-description,
.ach-card--locked .achievement-note {
  color: var(--c-text-muted);
}

/* У обычных карточек note спрятан; у запертой он и есть объяснение «не получено». */
.ach-card--locked .achievement-note {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .ach-progress__fill {
    transition: none;
  }
}

/* Карточка: строка, арт 80 слева, текст в середине, монета 44 справа. */
.ach-card {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-color: color-mix(in srgb, var(--c-accent) 26%, var(--c-bg));
  border-radius: 20px;
  background: var(--c-surface);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease);
}

.ach-card:hover {
  border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-bg));
}

.ach-card .achievement-img {
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-color: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface-2));
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  object-fit: cover;
  box-shadow: inset 0 0 10px var(--c-shadow-color);
  flex: none;
}

.ach-card .achievement-body {
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.ach-card .achievement-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-lg);
  line-height: 1.3;
}

.ach-card .achievement-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 0;
  overflow: hidden;
  color: var(--c-text-muted);
  font-size: 15px;
  line-height: 1.4;
}

/* Дата и общая подпись цены не дублируются: справа только круглая монета-продажа. */
.ach-page #ach-price,
.ach-card .achievement-note {
  display: none;
}

.ach-card .ach-sell {
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--c-border);
  border-color: color-mix(in srgb, var(--c-accent) 26%, var(--c-bg));
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-warning);
}

.ach-card .ach-sell:hover {
  background: var(--c-surface-3);
  border-color: var(--c-accent);
}

.ach-card .ach-sell:active {
  transform: scale(0.92);
}

.ach-card .ach-sell > span:last-child {
  display: none;
}

.ach-sell {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.ach-sell__coin {
  width: 22px;
  height: 22px;
  color: var(--c-warning);
}

/* Узкий экран (≤360): арт и монета чуть меньше — иначе текст сжимается в столбик.
   На эталонных 390+ правило не срабатывает: там размеры ровно как в макете. */
@media (max-width: 360px) {
  .ach-card {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .ach-card .achievement-img {
    width: 64px;
    height: 64px;
  }

  .ach-card .ach-sell {
    width: 40px;
    height: 40px;
  }
}

/* --- Багхантер (t227): активная ачивка переливается радугой и мягко светится ----------
   «Активна» — карточка ПОЛУЧЕННОГО достижения; класс `ach-card--rainbow` ставит загрузчик
   по полю `effect` каталога. У закрытой карточки (`.ach-card--locked`) эффекта нет.
   Радужная грань — отдельный слой `::before`, обрезанный по границе маской: цвета текста,
   арта и кнопки продажи остаются темой. `hue-rotate` двигает цвета по кругу, `box-shadow`
   даёт лёгкое свечение, которое «дышит». `prefers-reduced-motion` гасит движение,
   оставляя статичную радугу и свет. */
.ach-card.ach-card--rainbow {
  position: relative;
  /* Есть и запасной вариант без маски/конического градиента: сама рамка переливается
     цветами темы. Если браузер не умеет маску или `conic-gradient`, карточка всё равно
     выделена — и статично (рамка/свечение), и анимацией цвета. */
  border-color: var(--c-bughunter-1, var(--c-danger));
  /* У токенов есть запасные значения ТЕМЫ: если `themes.css` ещё лежит в старом кэше
     оболочки (там радужных токенов нет), карточка всё равно получит грань и свечение,
     а не останется без подсветки. */
  box-shadow:
    0 0 12px var(--c-bughunter-glow-warm, color-mix(in srgb, var(--c-danger) 38%, transparent)),
    0 0 24px var(--c-bughunter-glow-cool, color-mix(in srgb, var(--c-info) 28%, transparent));
  animation:
    ach-rainbow-glow 4.2s ease-in-out infinite,
    ach-rainbow-border 7s linear infinite;
}

.ach-card.ach-card--rainbow::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    var(--c-bughunter-1, var(--c-danger)),
    var(--c-bughunter-2, var(--c-warning)),
    var(--c-bughunter-3, var(--c-success)),
    var(--c-bughunter-4, var(--c-info)),
    var(--c-bughunter-5, var(--c-accent)),
    var(--c-bughunter-6, var(--c-pink)),
    var(--c-bughunter-1, var(--c-danger))
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: ach-rainbow-hue 6s linear infinite;
}

/* Арт награды участвует в свечении, но пиксели картинки не перекрашиваются. */
.ach-card.ach-card--rainbow .achievement-img {
  box-shadow: 0 0 14px
    var(--c-bughunter-glow-art, color-mix(in srgb, var(--c-accent) 45%, transparent));
}

@keyframes ach-rainbow-hue {
  to {
    filter: hue-rotate(360deg);
  }
}

/* Запасная радуга: цвет самой рамки. Работает без маски и конического градиента. */
@keyframes ach-rainbow-border {
  0%,
  100% {
    border-color: var(--c-bughunter-1, var(--c-danger));
  }

  16% {
    border-color: var(--c-bughunter-2, var(--c-warning));
  }

  33% {
    border-color: var(--c-bughunter-3, var(--c-success));
  }

  50% {
    border-color: var(--c-bughunter-4, var(--c-info));
  }

  66% {
    border-color: var(--c-bughunter-5, var(--c-accent));
  }

  83% {
    border-color: var(--c-bughunter-6, var(--c-pink));
  }
}

@keyframes ach-rainbow-glow {
  0%,
  100% {
    box-shadow:
      0 0 12px var(--c-bughunter-glow-warm, color-mix(in srgb, var(--c-danger) 38%, transparent)),
      0 0 24px var(--c-bughunter-glow-cool, color-mix(in srgb, var(--c-info) 28%, transparent));
  }

  50% {
    box-shadow:
      0 0 18px var(--c-bughunter-glow-amber, color-mix(in srgb, var(--c-warning) 42%, transparent)),
      0 0 32px var(--c-bughunter-glow-violet, color-mix(in srgb, var(--c-accent) 34%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ach-card.ach-card--rainbow,
  .ach-card.ach-card--rainbow::before {
    animation: none;
  }
}

/* Баланс: крупная сумма и история; знак операции — классом. */
.balance-card {
  gap: var(--space-1);
}

.balance-amount {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 9vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.transaction__sum {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.transaction__sum--plus {
  color: var(--c-text-success);
}

.transaction__sum--minus {
  color: var(--c-text-danger);
}

/* Верификация: шаги текстом и номером, а не только «пройдено/нет» цветом. */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-weight: var(--fw-bold);
  flex: none;
}

.step__text {
  color: var(--c-text-2);
  font-size: var(--fs-base);
}

/* --- донаты (раздел 6) -------------------------------------------------------------
   Сбор (собрано/цель), доска идей, взнос, история. Числа — без нарисованной валюты. */

.donate-sums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.donate-sum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.donate-sum__label {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.donate-sum__value {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.donation-photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Идея на доске: тело слева, действия справа (карточка по умолчанию — колонка). */
.card.idea {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

.idea-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* История взносов: та же карточка, но строкой. */
.card.transaction {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* --- анкета вступления (раздел 7) --------------------------------------------------
   Прогресс шагов: текущий помечен aria-current и полосой, а не только цветом. */

/* Строка над вопросами (t140): прогресс и счётчик — компактно, без заголовка страницы.
   Владелец снял верхние блоки анкеты: форма начинается сразу с шагов, а эта строка лишь
   говорит, где человек находится в очереди вопросов. */
.form-topline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.form-counter {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* Вопросы-варианты анкеты (t43): кнопки столбиком. Длинные формулировки («У меня уже есть
   друзья», «Нет, не ищу себе пару») в два столбца не влезают — человек читал бы обрезанный
   текст. Выбранное состояние рисует `.choice[aria-checked="true"]` из required.css. */
.form-choice {
  grid-template-columns: 1fr;
}

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

.form-choice-note {
  margin: 0;
  color: var(--c-text-muted);
}

.form-choice-hint {
  margin: var(--space-2) 0 0;
  color: var(--c-text-accent);
}

/* Состояние формы — это САМА карточка (t61): отдельной обёртки `.card` нет, поэтому при
   скрытом `#form-state` сверху не остаётся пустой плашки. Отступы — как у карточки. */
.state.card {
  margin: 0 0 var(--space-3);
  padding: var(--space-5) var(--space-4);
}

/* Возврат с экрана состояния (t61): существующие маршруты афиши/меню. */
#form-state-actions {
  margin-top: var(--space-2);
}

.form-progress {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-progress__item {
  position: relative;
  flex: 1;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + 4px);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  overflow: hidden;
}

.form-progress__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--c-border);
}

.form-progress__item[aria-current="step"] {
  border-color: var(--c-border-focus);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-weight: var(--fw-semibold);
}

.form-progress__item[aria-current="step"]::after {
  background: var(--c-gradient-cta);
}

.form-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-step[hidden] {
  display: none;
}

/* --- Инстатропск (раздел 8) --------------------------------------------------------
   Лента, карточка поста, сетка профиля, чипы тегов. Одно фото на пост — без карусели. */

.insta-searchbar {
  gap: var(--space-3);
}

.insta-post {
  gap: var(--space-3);
}

.post-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.insta-userpic {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex: none;
}

.insta-author {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.insta-username {
  color: var(--c-text-accent);
  text-decoration: none;
}

.insta-photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.insta-like {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
}

.insta-like[aria-pressed="true"] {
  border-color: var(--c-danger-border);
  background: var(--c-danger-bg);
  color: var(--c-text-danger);
}

.insta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.insta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-chip);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.insta-preview {
  display: block;
  min-height: 96px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  text-decoration: none;
  overflow: hidden;
}

.insta-preview__text {
  display: block;
  padding: var(--space-2);
  font-size: var(--fs-sm);
}

.insta-preview-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ═══════════ Раздел 9: полировка владельца (20.10.2026) ═══════════════════════════ */

/* --- общие иконки-кнопки (шапки Афиши и заголовки) --------------------------------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  text-decoration: none;
}

.icon-btn:active {
  transform: scale(0.94);
}

/* --- панели: кнопка «назад» слева -------------------------------------------------- */
.sheet__back {
  flex: none;
  min-width: var(--tap-min);
}

/* --- Главная: шапка без счётчиков -------------------------------------------------- */
.home-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex: none;
  background: var(--c-surface-2);
}

  margin-top: var(--space-1);
}

/* --- Афиша: шапка, поиск, чипы, лента ---------------------------------------------- */
.events-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.events-head .page-title {
  flex: 1;
  min-width: 0;
}

.events-head .title-text {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}

.events-head .page-head__actions {
  display: flex;
  gap: var(--space-1);
  flex: none;
}

.events-search {
  position: relative;
  margin: 0;
}

.events-search .field__input {
  padding-left: 40px;
  padding-right: 40px;
}

.events-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}

.events-search__reset {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: pointer;
}

.events-filters {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.chip--filter {
  flex: none;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-chip);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.chip--filter[aria-pressed="true"] {
  border-color: transparent;
  background: var(--c-gradient-cta);
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semibold);
}

.feed-list {
  gap: var(--space-3);
}

/* Карточка ленты: фото сверху на всю ширину, заголовок поверх, мета и кнопка снизу. */
.feed-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  overflow: hidden;
}

.feed-card__media {
  position: relative;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
  min-height: 190px;
  background: var(--c-gradient-hero);
  overflow: hidden;
}

.feed-card__cover {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.feed-card__head {
  position: absolute;
  inset: auto 0 0 0;
  padding: 36px var(--space-3) var(--space-3);
  background: linear-gradient(180deg, transparent, var(--c-overlay-strong));
}

.feed-card__title {
  margin: 0;
  color: var(--c-text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.feed-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.feed-card__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.feed-card__open {
  margin-top: auto;
}

/* --- Профиль: схема из example_profile --------------------------------------------- */
.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

/* Кнопка действия — прозрачная фигура с иконкой и подписью (набросок
   `part_profile_example.html`), а не залитая плашка: в покое она нейтральна,
   при наведении подсвечивается акцентом. */
.profile-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.profile-action:hover {
  border-color: var(--c-border-focus);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.profile-action:active {
  transform: scale(0.97);
}

.profile-action__icon {
  color: currentColor;
  font-size: var(--fs-lg);
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}

.profile-action:hover .profile-action__icon {
  transform: scale(1.1);
}

/* Чужой профиль (t172): ДВЕ кнопки вместо трёх. Переключатель любимок показывает нажатое
   состояние и цветом, и подписью — «Убрать из любимок», а не только цвет рамки. */
.profile-actions--foreign {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-action[aria-pressed="true"] {
  border-color: var(--c-border-focus);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
}

.profile-action[aria-pressed="true"] .profile-action__icon {
  color: var(--c-text-accent);
}

.profile-action:disabled {
  opacity: 0.6;
  cursor: default;
}

.profile-actions__error {
  margin: var(--space-2) 0 0;
  color: var(--c-danger);
}

.profile-family__row,
.profile-partner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.profile-family__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-size: var(--fs-lg);
  flex: none;
}

/* ── «О себе» под спойлером (t149, запрос владельца 20.10.2026) ───────────────
   Показываем ЧЕТЫРЕ строки (на телефоне это ~5–6 строк текста при 12–14 px), дальше —
   кнопка «Показать полностью» / «Свернуть». Кнопку показывает JS, и только когда текст
   правда не влез: у короткого «О себе» её нет вовсе. `pre-line` — переносы строк из
   данных видит человек (t141). */
.profile-about-block {
  display: flex;
  flex-direction: column;
  /* Поле правки не должно схлопываться в узкую колонку: «О себе» занимает всю
     ширину карточки и в чтении, и при редактировании (запрос владельца 25.10.2026). */
  align-items: stretch;
  width: 100%;
  gap: var(--space-1);
}

.profile-about {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: pre-line;
  width: 100%;
}

/* Разворот держит ТОТ ЖЕ `display` (-webkit-box), поэтому межстрочный интервал и
   ширина колонки не меняются: текст просто перестаёт обрезаться. */
.profile-about[data-expanded="true"] {
  -webkit-line-clamp: 999;
  overflow: visible;
}

.profile-about__toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-link);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.profile-about__toggle:hover {
  color: var(--c-text-accent);
}

.profile-about__toggle:focus-visible {
  border-radius: var(--radius-xs);
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

/* ── «О участнике»: виджет из наброска владельца
   `new/profile_widget_character.html` (21.10.2026) ───────────────────────────────
   Слева персонаж с мягким свечением, «Уровень N», полоса опыта и подпись; справа —
   Bento-сетка из шести плиток: цветная иконка в мягкой подложке, подпись сверху,
   крупное значение снизу. Сетка 2 колонки на широком экране и 1 колонка на телефоне,
   как в наброске; цвета — токены (`--c-accent/warning/info/danger/success/pink`),
   подложка иконки — 15%-я примесь её цвета, без отдельных bg-токенов. */
/* Заголовок «О участнике» — крупнее обычной подписи, как в наброске виджета. */
.profile-about-card .section-label {
  font-size: 13px;
  letter-spacing: 2px;
}

.profile-about-layout {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.profile-character-side {
  position: relative;
  display: flex;
  flex: 0 0 30%;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  text-align: center;
}

/* Свечение за персонажем: акцент темы, размытый; размер и положение — из наброска. */
.profile-character-glow {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--c-accent);
  filter: blur(60px);
  opacity: 0.25;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.profile-character {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 140px;
  max-height: 160px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px var(--c-shadow-color));
  transition: transform 0.3s var(--ease);
}

.profile-character:hover {
  transform: translateY(-5px) scale(1.02);
}

.profile-level-title {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Число уровня — акцентом, как в наброске; слово остаётся обычным цветом текста. */
.profile-level__value {
  color: var(--c-text-accent);
}

/* Ранг переехал из полосы статусов под «Уровень» в блоке «О участнике». */
.profile-rank-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill, 999px);
  background: var(--c-surface-2);
  color: var(--c-text-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.profile-rank-line__label {
  color: var(--c-text-muted);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.profile-rank-line__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-exp {
  width: 100%;
  max-width: 140px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--c-surface-3);
  box-shadow: inset 0 1px 3px var(--c-shadow-color);
}

.profile-exp__fill {
  position: relative;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-strong));
  box-shadow: 0 0 10px var(--c-accent-soft);
  transition: width 0.25s var(--ease);
}

/* Блик по полосе опыта — как в наброске; движение отключает reduced-motion. */
.profile-exp__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--c-text-on-accent) 40%, transparent),
    transparent
  );
  transform: translateX(-100%);
  animation: profile-exp-shine 2s infinite;
}

@keyframes profile-exp-shine {
  to {
    transform: translateX(100%);
  }
}

.profile-exp-text {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.profile-stats {
  display: grid;
  flex: 1 1 70%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-content: center;
  min-width: 0;
}

/* Плитка Bento: иконка в подложке + подпись/значение. Высота задаётся содержимым. */
.profile-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.profile-stat:hover {
  border-color: var(--c-border-focus);
  background: var(--c-surface-3);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Широкая плитка больше не используется в новой сетке, но правило оставлено: на
   него ссылается прежний опыт `test_frontend_polish.py` как на контракт формы. */
.profile-stat--wide {
  grid-column: span 2;
}

/* Цвет плитки задаёт только иконку: подпись и значение остаются нейтральными. */
.profile-stat--messages {
  color: var(--c-text-accent);
}

.profile-stat--days {
  color: var(--c-warning);
}

.profile-stat--visits {
  color: var(--c-info);
}

.profile-stat--streak {
  color: var(--c-danger);
}

.profile-stat--created {
  color: var(--c-success);
}

.profile-stat--votes {
  color: var(--c-pink);
}

.profile-stat__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 15%, transparent);
}

.profile-stat__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.profile-stat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-stat__label {
  color: var(--c-text-muted);
  /* 10 px и обычные пробелы: в плитке ~155 px подпись «Дней в сообществе»
     переносится по словам, а не рвётся «СООБ-ЩЕНИЙ» посреди слова. */
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: normal;
}

.profile-stat__value {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  overflow-wrap: normal;
}

.profile-stat__value:empty::before {
  content: "—";
  color: var(--c-text-muted);
}

/* Телефон: персонаж сверху, статистика одной колонкой — как в наброске. */
@media (max-width: 650px) {
  .profile-about-layout {
    flex-direction: column;
    gap: var(--space-5);
  }

  .profile-character-side {
    flex: none;
    width: 100%;
  }

  .profile-stats {
    flex: none;
    width: 100%;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-character,
  .profile-stat {
    transition: none;
  }

  .profile-character:hover,
  .profile-stat:hover {
    transform: none;
  }

  .profile-exp__fill::after {
    animation: none;
  }
}

/* --- Анкета: онбординг и слайды с маскотом ----------------------------------------- */
.onboarding,
.form-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.onboard-slide,
.form-step {
  align-items: stretch;
  gap: var(--space-3);
}

.mascot {
  display: block;
  width: min(220px, 60%);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.onboard-list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--c-text-2);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Кнопки управления анкетой — СНИЗУ (t43, решение владельца 23.10.2026): один ряд ПОД
   карточкой, липнет над нижней панелью и учитывает safe-area. Раньше кнопки стояли в
   разметке ДО онбординга и выглядели «верхними» над карточкой. */
.form-controls {
  position: sticky;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
}

.form-controls .btn {
  flex: 1;
}

/* Поправка владельца: у виджета события поля по бокам — половина обычных, снизу меньше. */
.event-card__body {
  padding: var(--space-3) var(--space-2) var(--space-2);
}

/* ── круглая кнопка «назад» (t179) ─────────────────────────────────────────────
   Владелец: «назад» больше, с обводкой, круглая, тап-зона ≥ 44. Правило одно на все
   места: кнопки панелей (`.sheet__back`) и заголовки страниц (`.icon-btn--round`). */
.sheet__back,
.icon-btn--round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 2px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  text-decoration: none;
}

.sheet__back:active,
.icon-btn--round:active {
  transform: scale(0.94);
}

.sheet__back:focus-visible,
.icon-btn--round:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

/* Панель вкладки без верхней плашки с названием: заголовок остаётся в разметке для
   скринридера и контракта опытов, но глазам он не мешает — вкладку и так видно по
   содержимому и нижнему меню. */
.sheet__bar {
  border-bottom: none;
  background: transparent;
  padding-bottom: 0;
}

.sheet__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── карточка мероприятия по эталону `new/afisha_list.html` (t179) ──────────────
   Компоновка и размеры — из эталона владельца: крупное изображение сверху 16:9,
   бейдж поверх него, ниже заголовок, строка меты с иконками и кнопка на всю ширину.
   Цвета, радиусы, тени — наши токены; палитру эталона не копируем. */
.feed-card.event-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  align-items: stretch;
}

.event-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-surface-2);
}

.event-card__cover .event-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.event-card__title {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.event-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.event-card__meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.event-card__meta-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--c-text-accent);
}

.event-card__open {
  margin-top: var(--space-1);
  width: 100%;
  align-self: stretch;
}

/* ── тэг профиля (t179): карандаш без цены, угловатая пилюля, крупный шрифт ──────
   Цена переехала в окно подтверждения: рядом с иконкой мелкий «400 ТК» читался как
   подпись кнопки, а не как цена действия. */
.profile-tag {
  border-radius: 7px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.profile-tag__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
}

.profile-tag__edit:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.profile-tag-form .field__input {
  border-radius: 7px;
  font-size: var(--fs-lg);
}

.profile-tag-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.profile-tag-confirm__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.profile-tag-confirm__text {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.profile-tag-confirm__actions {
  display: flex;
  gap: var(--space-2);
}

.profile-tag-confirm__actions > * {
  flex: 1;
}

/* ── иконки кнопок профиля (t179, сердце — t219) ────────────────────────────────
   Монеты и медаль — из legacy (`legacy/app/components/profile.html`): 17×12 и 12×20.
   Сердце с 21.10.2026 — фигура 24×24 с полями (2…22 px): в старом 19×16 stroke
   срезался краями, и неактивное сердце читалось квадратом. Все знаки красятся
   темой через `currentColor`. */
.profile-action__icon {
  width: auto;
  height: auto;
  font-size: inherit;
  color: currentColor;
}

.profile-action__icon svg,
svg.profile-action__icon {
  display: block;
}

}

/* Строка меты карточки — строго по левому краю: унаследованное центрирование от
   `.feed-card` выравнивало дату и время по центру, хотя текст остальной карточки слева. */
.feed-card.event-card .event-card__meta {
  align-items: flex-start;
  text-align: left;
}

.feed-card.event-card .event-card__meta-row {
  justify-content: flex-start;
  text-align: left;
}
/* Организатор в панели завершения: галочка стоит и не снимается — это правило, а не сбой.
   Заблокированный чекбокс не должен выглядеть «сломанным»: цвет и размер те же. */
.attendee__check:disabled {
  cursor: default;
  opacity: 1;
}

.attendee__check:disabled + .attendee__name {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.event-finish__hint {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}
/* ── карточка мероприятия по эталону `new/afisha_list.html` (t182) ────────────────
   Размеры — ИЗ ЭТАЛОНА (заголовок 19/800, мета 13, кнопка 46, отступы 16), цвета и
   градиенты — наши токены: палитру эталона (#181a27, #7c5cff…) не копируем.
   Картинка 16:9 растворяется в фон карточки градиентом, контент подтянут на градиент
   (margin-top −16) — ровно как в эталоне. Заголовок — не больше двух строк: полное
   название живёт в `title` и на странице события. */
.event-card__cover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60%;
  background: linear-gradient(to top, var(--c-surface) 0%, transparent 100%);
  pointer-events: none;
}

.event-card__body {
  position: relative;
  z-index: 1;
  margin-top: -16px;
  padding: 0 16px 16px;
}

.event-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
}

.event-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.event-card__meta-row {
  font-size: 13px;
  line-height: 1.4;
}

.event-card__meta-row svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.event-card__open {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

/* Узкий экран: кегль заголовка ТОТ ЖЕ, что в эталоне (19 px) — размер задан анатомией,
   а не шириной экрана; уменьшены только боковые отступы карточки. */
@media (max-width: 380px) {
  .event-card__body {
    padding: 0 12px 12px;
  }
}
/* Строки меты — без «родных» отступов абзаца: расстоянием управляет контейнер (t182). */
.event-card__meta-row {
  margin: 0;
}
/* ── страница мероприятия по эталону `new/event_card.html` (t184) ─────────────────
   Компоновка и размеры — из эталона: обложка 260 px с градиентом вниз, круглые кнопки
   поверх, заголовок 26/800 в две строки, описание, три инфо-бокса, организатор с
   карандашом, ряд участников, мини-карточка и фиксированная панель голосования.
   Цвета, радиусы, тени — наши токены: палитру эталона не копируем. */
.event-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Нижняя панель голосования + нижнее меню: контент не должен уходить под них. */
  padding-bottom: calc(var(--nav-h) + 128px);
}

.event-page__card {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}

.event-hero {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: var(--c-surface-2);
}

.event-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--c-surface) 0%, transparent 100%);
  pointer-events: none;
}

.event-hero__badge {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.event-hero__actions {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 20px 16px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.hero-btn:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.event-page__content {
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;
  margin-top: -18px;
  position: relative;
  z-index: 1;
}

.event-page__title {
  margin: 0 0 10px;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.event-page__desc {
  margin: 0 0 20px;
  color: var(--c-text-2);
  font-size: var(--fs-base);
  line-height: 1.45;
  white-space: pre-line;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}

.info-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.info-header svg {
  flex: none;
  color: var(--c-text-accent);
}

.info-label {
  overflow: hidden;
  color: var(--c-text);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-value {
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.event-section {
  margin-bottom: 24px;
}

.event-section__title {
  margin: 0 0 12px;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.organizer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.organizer-row__avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border: 2px solid var(--c-border);
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-3);
}

.organizer-row__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.organizer-row__name {
  color: var(--c-text);
  font-size: 15px;
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.organizer-row__handle {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.organizer-row__stats {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.organizer-row__stats svg {
  color: var(--c-text-accent);
}

.organizer-row__message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
}

/* Участники: пока зритель не голосовал — ряд размыт, поверх подпись. */
.participants {
  position: relative;
  min-height: 64px;
}

.participants__row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}

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

.participants[data-locked="true"] .participants__row {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

.participants__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  text-align: center;
  pointer-events: none;
}

.participants__lock-text {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.participant {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  cursor: pointer;
  overflow: visible;
}

.participant__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Мини-карточка участника. */
.mini-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.mini-profile__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-3);
}

.mini-profile__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mini-profile__name {
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.mini-profile__handle,
.mini-profile__facts {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.mini-profile__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-text);
  text-decoration: none;
}

/* Нижняя панель голосования — фиксированная, три ответа. */
.event-vote-bar {
  position: fixed;
  right: 0;
  /* Панель стоит НАД нижним меню: иначе она закрывала бы навигацию и обрезала контент. */
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-elev);
}

.event-vote-bar__group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.event-vote-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.event-vote-bar__btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semibold);
}

.event-vote-bar__total {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.event-page__limit,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 380px) {
  .event-hero {
    height: 220px;
  }

  .event-page__title {
    font-size: 22px;
  }

  .event-vote-bar__btn {
    font-size: 12px;
  }
}
/* ── приватность мероприятия (t189) ───────────────────────────────────────────────
   Бокс «Приватность» — кнопка (нажимается, открывает пояснение), поэтому снимаем
   кнопочные умолчания, но оставляем вид и размеры обычного инфо-бокса. */
.info-box--button {
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.info-box--button:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.info-box--button[aria-expanded="true"] {
  border-color: var(--c-border-focus);
}

.info-box--button {
  text-decoration: none;
}

.info-box--button[aria-disabled="true"] {
  opacity: 0.7;
  cursor: default;
}

/* Окошко-пояснение: тот же язык, что у мини-карточки участника. */
.privacy-pop {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.privacy-pop__title {
  margin: 0 0 var(--space-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.privacy-pop__row {
  margin: 0 0 4px;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.privacy-pop__note {
  margin: var(--space-2) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}
/* t109/t112: «Приватность» не рвётся по буквам — одна строка с многоточием. */
.info-box--button .info-label {
  overflow: hidden;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: ellipsis;
}
/* ── t85: модальные окна карточки (приватность/участники) ─────────────────────────
   Фон НЕ блюрится: только полупрозрачный слой темы. Окно слегка «плавает» над
   контентом (тень + скругление), закрывается крестиком/фоном/Escape. */
.event-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.event-modal[hidden] {
  display: none;
}

.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-overlay);
}

.event-modal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-card);
  background: var(--c-bg-elev);
  box-shadow: var(--shadow-pop);
  color: var(--c-text);
}

.event-modal__card:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.event-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
}

.event-modal__close:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

body.event-modal-open {
  overflow: hidden;
  /* t229: пока открыто окно, страница под ним не «пружинит» и не уезжает от жеста. */
  overscroll-behavior: none;
}

.event-modal__card.privacy-pop {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--c-border-focus);
  background: var(--c-bg-elev);
}

.event-cancelled-banner {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--c-danger-bg);
  color: var(--c-text-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.event-link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.event-link-button:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.participants-modal__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 55vh;
  margin: var(--space-2) 0 0;
  padding: 0;
  overflow-y: auto;
  /* t229: прокрутка списка не передаётся странице — иначе жест «до упора» дёргал карточку. */
  overscroll-behavior: contain;
  list-style: none;
}

.participants-modal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-1);
  border-bottom: 1px solid var(--c-border);
}

/* t229: имя — ОДНА строка с многоточием. `min-width: 0` обязателен: без него flex-элемент
   не сжимается ниже содержимого и длинный ник (или «зальго») делает список шире карточки. */
.participants-modal__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-text);
  font-size: var(--fs-base);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Статус не сжимается и не переносится: имя сокращается, а «Иду»/«Под вопросом» остаётся. */
.participants-modal__status {
  flex: none;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

/* ── t91: переключатель «Голосование / Управление» для организатора/админа ─────── */
.event-mode-switch {
  display: flex;
  gap: var(--space-1);
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}

.event-mode-switch__btn {
  flex: 1;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.event-mode-switch__btn[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-text-on-accent);
}

.event-mode-switch__btn:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

/* ── управление мероприятием в нижней панели (t190) ───────────────────────────────
   У организатора вместо голосования — четыре действия; диалоги живут над панелью и
   закрываются крестиком, отменой, кликом вне и Escape. */
.event-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--space-2);
}

.event-controls__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-min);
  padding: 4px var(--space-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: 11px;
  line-height: 1.1;
  cursor: pointer;
}

.event-controls__btn--main {
  border-color: transparent;
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semibold);
}

.event-dialog {
  position: fixed;
  right: var(--space-3);
  bottom: calc(var(--nav-h) + 96px);
  left: var(--space-3);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-card);
  background: var(--c-bg-elev);
  /* Цвет тени живёт в теме (`--shadow-pop` → `--c-shadow-color`), литералов здесь нет (FE-02). */
  box-shadow: var(--shadow-pop);
}

.event-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.event-dialog__title {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.event-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
}

.event-dialog__label {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.event-dialog__textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-base);
  resize: vertical;
}

.event-dialog__counter {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: right;
}

.kick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.kick-list__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-1);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}

.kick-list__name {
  color: var(--c-text);
  font-size: var(--fs-base);
}

.kick-list__handle {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

@media (max-width: 380px) {
  .event-controls__btn {
    font-size: 10px;
  }
}
/* ── экран «Ещё» (t201) ────────────────────────────────────────────────────────────
   Список карточек-пунктов вместо вкладок: панели (Общение/Участники/Настройки),
   маршрут «Фото», публичная «О Новотропске» и две заглушки «скоро». Цвета и радиусы —
   наши токены, плашки с названием вкладки нет (правило владельца). */
.more-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: calc(var(--nav-h) + var(--space-6));
}

.more-page__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.more-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.more-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.more-item:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.more-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--c-surface-3);
  color: var(--c-text-accent);
}

.more-item__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.more-item__title {
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.more-item__hint {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.more-item__arrow {
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
  line-height: 1;
}

/* Заглушки: видно, что пункт есть, и что он ещё не работает. Цвет не кричит. */
.more-item--soon {
  cursor: default;
  opacity: 0.7;
}

.more-item:disabled {
  cursor: default;
}

.more-item__soon {
  padding: 2px var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

/* Пять вкладок на узком экране: подпись мельче, но панель не переносится. */
@media (max-width: 360px) {
  .tab__label {
    font-size: 10px;
  }
}
/* ── оверлей загрузки страницы (t207) ──────────────────────────────────────────────
   Перенос legacy-лоадера нашими средствами: полноэкранный слой, квадрат с акцентным
   градиентом темы и сменяющаяся надпись. Цвет фона — `--c-bg` через `color-mix`, чтобы
   литералов не было (FE-02) и слой красился любой палитрой. Показывается ТОЛЬКО по
   таймеру `PageLoader.showAfter()` (250 мс), поэтому быстрый переход не мигает. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-6) * 1.6);
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__square {
  position: relative;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
  animation: page-loader-spin 3s infinite;
}

.page-loader__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
  filter: blur(20px);
  transform: scale(0.95);
}

@keyframes page-loader-spin {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-360deg);
    border-radius: 50%;
  }
  100% {
    transform: rotate(-45deg);
  }
}

.page-loader__text {
  min-height: 30px;
  margin: 0;
  max-width: 86vw;
  padding: 0 var(--space-4);
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-loader__text.is-fading {
  opacity: 0;
  transform: translateY(15px);
}

/* Меньше движения — квадрат стоит, надписи меняются без фейда (смысл смены остаётся). */
@media (prefers-reduced-motion: reduce) {
  .page-loader__square {
    animation: none;
    transform: rotate(-45deg);
  }

  .page-loader,
  .page-loader__text {
    transition: none;
  }
}
/* ── нейроанализ по сообщениям (t208) ──────────────────────────────────────────────
   Блок в профиле: портрет, пустое состояние, скрытый портрет, кнопка платной
   генерации, лоадер точек и переключатель публичности. Цвета/радиусы — наши токены;
   лоадер — перенос legacy `.neuro-loader__dots` (точки-«планеты» по кругу с пульсацией). */
.neuro-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.neuro-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.neuro-card__title {
  margin: 0;
}

.neuro-card__collapse {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-accent);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.neuro-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Портрет: свернутый вид — шесть строк, кнопка «Показать целиком» раскрывает. */
.neuro-card__text {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-base);
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.neuro-card__text[data-expanded="true"] {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.neuro-card__more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-accent);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.neuro-card__empty,
.neuro-card__hidden-note {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-base);
}

.neuro-card__hint {
  margin: var(--space-1) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.neuro-card__owner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.neuro-public {
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.neuro-public[aria-pressed="true"] {
  border-color: transparent;
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-weight: var(--fw-semibold);
}

/* Лоадер: восемь точек по кругу, каждая пульсирует со своей задержкой. */
.neuro-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.neuro-loader__dots {
  --uib-size: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-size);
  height: var(--uib-size);
  animation: neuro-rotate 6s linear infinite;
}

.neuro-loader__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}

.neuro-loader__dot::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateX(calc(var(--uib-size) / 2 - 6px));
  animation: neuro-pulse 1.2s ease-in-out infinite;
}

.neuro-loader__dot:nth-child(1) { transform: rotate(0deg); }
.neuro-loader__dot:nth-child(2) { transform: rotate(45deg); }
.neuro-loader__dot:nth-child(3) { transform: rotate(90deg); }
.neuro-loader__dot:nth-child(4) { transform: rotate(135deg); }
.neuro-loader__dot:nth-child(5) { transform: rotate(180deg); }
.neuro-loader__dot:nth-child(6) { transform: rotate(225deg); }
.neuro-loader__dot:nth-child(7) { transform: rotate(270deg); }
.neuro-loader__dot:nth-child(8) { transform: rotate(315deg); }
.neuro-loader__dot:nth-child(2)::before { animation-delay: -0.15s; }
.neuro-loader__dot:nth-child(3)::before { animation-delay: -0.3s; }
.neuro-loader__dot:nth-child(4)::before { animation-delay: -0.45s; }
.neuro-loader__dot:nth-child(5)::before { animation-delay: -0.6s; }
.neuro-loader__dot:nth-child(6)::before { animation-delay: -0.75s; }
.neuro-loader__dot:nth-child(7)::before { animation-delay: -0.9s; }
.neuro-loader__dot:nth-child(8)::before { animation-delay: -1.05s; }

@keyframes neuro-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes neuro-pulse {
  0%,
  100% {
    transform: translateX(calc(var(--uib-size) / 2 - 6px)) scale(0.7);
    opacity: 0.45;
  }
  50% {
    transform: translateX(calc(var(--uib-size) / 2 - 6px)) scale(1.15);
    opacity: 1;
  }
}

.neuro-loader__text {
  margin: 0;
  max-width: 30ch;
  color: var(--c-text-accent);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Меньше движения — точки не вращаются и не пульсируют; подписи продолжают меняться. */
@media (prefers-reduced-motion: reduce) {
  .neuro-loader__dots {
    animation: none;
  }

  .neuro-loader__dot::before {
    animation: none;
    opacity: 1;
  }
}

/* ── Профиль: правки по наброску владельца (21.10.2026) ────────────────────────
   Тэг компактный, кнопка смены — карандаш-квадрат с зоной нажатия 44 px;
   «Показать полностью» — кнопка-фигура; семейное положение — форма legacy. */

/* Тэг: меньше, мягкая фигура, рядом с ником. */
.profile-status {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.profile-tag {
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--c-border-focus);
  border-radius: 10px;
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  word-break: break-word;
}

/* Кнопка смены тэга: визуально 26×26, зона нажатия расширена до 44 px. */
.profile-tag__edit {
  position: relative;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-muted);
  gap: 0;
}

.profile-tag__edit::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.profile-tag__edit:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.profile-tag__icon {
  width: 12px;
  height: 12px;
}

/* «Показать полностью»: кнопка-фигура с шевроном, как в наброске
   `part_profile_example.html`. Шеврон рисуем границами, поэтому текст кнопки
   остаётся простым и JS может менять его на «Свернуть» без потери значка. */
.profile-about__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.profile-about__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}

.profile-about__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

.profile-about__toggle:hover {
  border-color: var(--c-text-muted);
  color: var(--c-text);
}

/* Семейное положение: заголовок как в legacy + строка-ссылка с фигурой и шевроном. */
.profile-family {
  gap: var(--space-3);
}

.profile-family__title {
  margin: 0;
  color: var(--c-text-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.profile-family__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.profile-family__row:hover .profile-family__status {
  color: var(--c-text-accent);
}

.profile-family__figure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text-accent);
  font-size: 24px;
  line-height: 1;
}

.profile-family__figure--rings {
  background: var(--c-accent-soft);
}

.profile-family__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.profile-family__status {
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.profile-family__note {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.profile-family__note #profile-rings {
  color: var(--c-text-accent);
}

.profile-family__chevron {
  flex: none;
  color: var(--c-text-accent);
}

.profile-family__row .profile-partner-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  border: 2px solid var(--c-border-focus);
  border-radius: 50%;
}

/* Кольца — настоящая картинка legacy внутри круглой фигуры. */
.profile-family__figure--rings {
  padding: 0;
  overflow: hidden;
}

.profile-family__rings {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Анимированные рамки аватара (t220) ─────────────────────────────────────
   Рамка — тот же приём, что в макете `widget_color_animate.html`: вращающийся
   conic-gradient. Цвета живут в `themes.css`, здесь только форма и анимация.
   Класс ставится на сам `<img>`: обёртки не нужны, разметка списков не меняется. */

@property --avatar-frame-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes avatar-frame-spin {
  to {
    --avatar-frame-angle: 360deg;
  }
}

.avatar--frame {
  --avatar-frame-colors: var(--c-frame-amethyst);
  border: 2px solid transparent;
  /* Внутренний слой закрывает прозрачные места PNG/WebP: иначе рамка выглядела бы
     залитым диском, а не ободком (замечено на дефолтной аватарке). */
  background:
    linear-gradient(var(--c-bg-elev), var(--c-bg-elev)) padding-box,
    conic-gradient(
      from var(--avatar-frame-angle),
      var(--avatar-frame-colors)
    ) border-box;
  animation: avatar-frame-spin 4s linear infinite;
}

.avatar--frame[data-frame="amethyst"] {
  --avatar-frame-colors: var(--c-frame-amethyst);
}

.avatar--frame[data-frame="ocean"] {
  --avatar-frame-colors: var(--c-frame-ocean);
}

.avatar--frame[data-frame="acid"] {
  --avatar-frame-colors: var(--c-frame-acid);
}

.avatar--frame[data-frame="ice"] {
  --avatar-frame-colors: var(--c-frame-ice);
}

.avatar--frame[data-frame="space"] {
  --avatar-frame-colors: var(--c-frame-space);
}

.avatar--frame[data-frame="prism"] {
  --avatar-frame-colors: var(--c-frame-prism);
}

.avatar--frame[data-frame="silver"] {
  --avatar-frame-colors: var(--c-frame-silver);
}

.avatar--frame[data-frame="gold"] {
  --avatar-frame-colors: var(--c-frame-gold);
}

.avatar--frame[data-frame="emerald"] {
  --avatar-frame-colors: var(--c-frame-emerald);
}

.avatar--frame[data-frame="glow"] {
  --avatar-frame-colors: var(--c-frame-glow);
  box-shadow: 0 0 14px var(--c-accent-soft);
}

.avatar--frame[data-frame="aurora"] {
  --avatar-frame-colors: var(--c-frame-aurora);
}

.avatar--frame[data-frame="ember"] {
  --avatar-frame-colors: var(--c-frame-ember);
}

.avatar--frame[data-frame="bloom"] {
  --avatar-frame-colors: var(--c-frame-bloom);
}

.avatar--frame[data-frame="frost"] {
  --avatar-frame-colors: var(--c-frame-frost);
}

.avatar--frame[data-frame="midnight"] {
  --avatar-frame-colors: var(--c-frame-midnight);
}

.avatar--frame[data-frame="rainbow"] {
  --avatar-frame-colors: var(--c-frame-rainbow);
}

@media (prefers-reduced-motion: reduce) {
  .avatar--frame {
    animation: none;
  }
}

/* Виджет выбора в настройках: превью + шесть кружков, как в наброске владельца. */
.frame-widget__hint {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.frame-widget__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
}

.frame-widget__preview .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.frame-widget__preview .avatar--frame {
  border-width: 4px;
}

.frame-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-1);
  width: 100%;
}

.frame-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.frame-swatch::before {
  content: "";
  width: calc(100% - 8px);
  aspect-ratio: 1;
  border-radius: 50%;
}

.frame-swatch:hover {
  transform: scale(1.1);
}

.frame-swatch[aria-pressed="true"] {
  border-color: var(--c-text);
  transform: scale(1.08);
}

.frame-swatch:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.frame-swatch--amethyst::before {
  background: conic-gradient(from 0deg, var(--c-frame-amethyst));
}

.frame-swatch--ocean::before {
  background: conic-gradient(from 0deg, var(--c-frame-ocean));
}

.frame-swatch--acid::before {
  background: conic-gradient(from 0deg, var(--c-frame-acid));
}

.frame-swatch--ice::before {
  background: conic-gradient(from 0deg, var(--c-frame-ice));
}

.frame-swatch--space::before {
  background: conic-gradient(from 0deg, var(--c-frame-space));
}

.frame-swatch--prism::before {
  background: conic-gradient(from 0deg, var(--c-frame-prism));
}

/* t100: премиальные рамки. Замок — фиксированный размер тапа и причина текстом. */
.frame-swatch--silver::before {
  background: conic-gradient(from 0deg, var(--c-frame-silver));
}

.frame-swatch--gold::before {
  background: conic-gradient(from 0deg, var(--c-frame-gold));
}

.frame-swatch--emerald::before {
  background: conic-gradient(from 0deg, var(--c-frame-emerald));
}

.frame-swatch--glow::before {
  background: conic-gradient(from 0deg, var(--c-frame-glow));
}

.frame-swatch--aurora::before {
  background: conic-gradient(from 0deg, var(--c-frame-aurora));
}

.frame-swatch--ember::before {
  background: conic-gradient(from 0deg, var(--c-frame-ember));
}

.frame-swatch--bloom::before {
  background: conic-gradient(from 0deg, var(--c-frame-bloom));
}

.frame-swatch--frost::before {
  background: conic-gradient(from 0deg, var(--c-frame-frost));
}

.frame-swatch--midnight::before {
  background: conic-gradient(from 0deg, var(--c-frame-midnight));
}

.frame-swatch--rainbow::before {
  background: conic-gradient(from 0deg, var(--c-frame-rainbow));
}

.frame-swatch[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.frame-swatch[aria-disabled="true"]::before {
  filter: grayscale(0.7);
}

.frame-swatch[aria-disabled="true"]::after {
  content: "🔒";
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: var(--fs-caption);
  line-height: 1;
}

.frame-widget__lock {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* t115: главная кнопка виджета рамки и её причина. */
.frame-widget__name {
  margin: var(--space-1) 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--c-text);
  background: var(--c-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px var(--c-accent-soft));
}

.frame-widget__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.frame-widget__action-note {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

/* t100: значок уровня и подсветка профиля (только токены). */
.trime-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.trime-badge__icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* t107: корона — SVG-маска, залитая переливающимся градиентом рамки. */
.trime-badge__crown {
  --trime-crown-colors: var(--c-accent);
  background-image: linear-gradient(90deg, var(--trime-crown-colors));
  background-repeat: no-repeat;
  background-size: 200% 100%;
  -webkit-mask: url("/components/static/icons/Trime_status.svg") center / contain no-repeat;
  mask: url("/components/static/icons/Trime_status.svg") center / contain no-repeat;
  animation: trime-crown-flow 3s linear infinite;
}

.trime-badge__crown[data-crown="silver"] {
  --trime-crown-colors: var(--c-frame-silver);
}

.trime-badge__crown[data-crown="gold"] {
  --trime-crown-colors: var(--c-frame-gold);
}

.trime-badge__crown[data-crown="emerald"] {
  --trime-crown-colors: var(--c-frame-emerald);
}

.trime-badge__crown[data-crown="glow"] {
  --trime-crown-colors: var(--c-frame-glow);
}

.trime-badge__crown[data-crown="level-1"] {
  --trime-crown-colors: var(--c-text-muted);
}

.trime-badge__crown[data-crown="level-2"] {
  --trime-crown-colors: var(--c-warning);
}

.trime-badge__crown[data-crown="level-3"] {
  --trime-crown-colors: var(--c-accent);
}

.trime-badge__crown[data-crown="level-4"] {
  --trime-crown-colors: var(--c-success);
}

.trime-badge__crown[data-crown="level-5"] {
  --trime-crown-colors: var(--c-info);
}

@keyframes trime-crown-flow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 200% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trime-badge__crown {
    animation: none;
    background-position: 50% 50%;
  }
}

.trime-badge__level {
  line-height: 1;
}

.profile-card--trime {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent-soft);
}

.profile-avatar--highlight {
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .frame-swatch {
    transition: none;
  }
}

/* ── Правка профиля (t221) ───────────────────────────────────────────────────
   Один карандаш рядом с ником включает режим: имя, город, «о себе» и тэг становятся
   видимыми целями. Тэг остаётся платным — он открывает окно подтверждения, а не
   сохраняется молча. */

.profile-card--editing {
  border-color: var(--c-border-focus);
}

.profile-card--editing .profile-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--c-border-focus);
  background: var(--c-accent-soft);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-1);
  margin: 0 calc(-1 * var(--space-1));
}

.profile-card--editing .profile-editable::after {
  content: "✎";
  position: absolute;
  right: calc(-1 * var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-accent);
  font-size: var(--fs-sm);
  pointer-events: none;
}

.profile-card--editing .profile-name,
.profile-card--editing .profile-about,
.profile-card--editing .profile-meta__value,
.profile-card--editing .profile-tag {
  position: relative;
}

.profile-card--editing .profile-editable:hover {
  background: var(--c-surface-2);
}

.profile-card--editing .profile-editable.editing-active {
  border-bottom-color: transparent;
  background: transparent;
  padding: 0;
  margin: 0;
}

.profile-card--editing .profile-editable.editing-active::after {
  display: none;
}

.profile-edit-input {
  width: 100%;
  min-width: 6ch;
  box-sizing: border-box;
  border: 1px solid var(--c-border-focus);
  border-radius: var(--radius-xs);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  line-height: inherit;
  padding: var(--space-1) var(--space-2);
  outline: none;
}

.profile-edit-input:focus {
  box-shadow: 0 0 0 2px var(--c-accent-soft);
}

textarea.profile-edit-input {
  resize: none;
  overflow: hidden;
  min-height: 80px;
  white-space: pre-wrap;
}

.profile-edit-state {
  margin: var(--space-1) 0 0;
}

.profile-card--editing .profile-tag:empty::before {
  content: "Добавить тэг";
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .profile-card--editing .profile-editable {
    transition: none;
  }
}

.profile-card--editing .profile-about:empty {
  min-height: 2.5rem;
}

/* Пока поле активно, исходные ограничения строк/обрезка не мешают полю ввода. */
.profile-card--editing .profile-name.editing-active,
.profile-card--editing .profile-meta__value.editing-active {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.profile-card--editing .profile-about.editing-active {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* t222: смена фото профиля — камера поверх аватарки в режиме правки. */
.profile-avatar-wrap {
  position: relative;
  flex: none;
  width: fit-content;
}

.profile-avatar__edit {
  position: absolute;
  right: calc(-1 * var(--space-1));
  bottom: calc(-1 * var(--space-1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--c-border-focus);
  border-radius: 50%;
  background: var(--c-bg-elev);
  color: var(--c-text-accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--c-bg-elev);
}

.profile-avatar__edit svg {
  width: 16px;
  height: 16px;
}

.profile-avatar__edit:hover {
  background: var(--c-surface-2);
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar__edit {
    transition: none;
  }
}

/* Витрина готовых обложек (t44): правила ленты и плитки уже есть в components.css; здесь —
   только случай НЕЗАГРУЗИВШЕГОСЯ превью: плитка остаётся нейтральной, подпись читается,
   выбор работает (никаких пустых мест и alert, требование UX-спеки). */
.cover-option--no-image {
  background: var(--c-surface-3);
}

/* Второй бейдж карточки события (t53): «Только для любимок». Стоит В ТЕЛЕ карточки, а не
   поверх обложки, поэтому не перекрывает бейдж статуса; цвета — только токены темы. */
.badge--private {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: var(--space-1);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}

/* --- t96: донат-страницы, Trime и бонусы (только токены) ------------------------- */
.donate-collect {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.donate-collect__note {
  margin: 0;
  color: var(--c-text-2);
}

.trime-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trime-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.trime-card__status {
  margin: 0;
  color: var(--c-text-2);
}

.trime-activate {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.trime-method {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}

.trime-method__title {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.requisite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
}

.requisite__value {
  margin: var(--space-1) 0 0;
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.idea__bar {
  margin-top: var(--space-1);
}

.bonus-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bonus-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bonus-card__list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.bonus-card__soon {
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.bonus-card__state {
  align-self: flex-start;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-text-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

@media (max-width: 400px) {
  .requisite {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --- t96/25.10.2026: экран поддержки — политика, спойлеры реквизитов, форма --- */
.support-page .support-consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.support-page .support-consent__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.support-page .support-consent__text p {
  margin: 0;
}

.support-page .support-link {
  color: var(--c-link);
  font-weight: var(--fw-semibold);
}

.support-page .support-consent__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.support-page .support-consent__check input {
  flex: none;
  margin-top: 2px;
  accent-color: var(--c-accent);
}

.support-page .support-requisites__banks {
  margin: 0 0 var(--space-2);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.support-page .support-requisite {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--c-border);
}

.support-page .support-requisite:last-of-type {
  border-bottom: 0;
}

.support-page .support-requisite__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}

.support-page .support-requisite__summary::-webkit-details-marker {
  display: none;
}

.support-page .support-requisite__summary::after {
  content: "›";
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  transition: transform 0.2s ease;
}

.support-page .support-requisite[open] .support-requisite__summary::after {
  transform: rotate(90deg);
}

.support-page .support-requisite__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
}

.support-page .support-requisite__body .requisite__value {
  margin: 0;
}

.support-page .support-requisites__note {
  margin: var(--space-3) 0;
}

/* Две платёжные кнопки рядом (Сбербанк и Т-банк); на узком экране — столбиком. */
.support-page .support-requisites__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (max-width: 420px) {
  .support-page .support-requisites__links {
    grid-template-columns: minmax(0, 1fr);
  }
}

.support-page .support-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.support-page .support-action__hint {
  margin: 0;
}

.support-page .support-action__amount {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.support-page #support-submit.is-sent {
  background: var(--c-success);
  border-color: var(--c-success);
  opacity: 1;
}

/* Сердечки/конфети после «Отправлено»: украшение, не мешает нажатиям. */
.support-celebration {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  pointer-events: none;
}

.support-celebration__piece {
  position: absolute;
  top: -12vh;
  animation: support-fall 2.8s ease-in forwards;
  will-change: transform, opacity;
}

@keyframes support-fall {
  0% {
    opacity: 0;
    transform: translateY(-12vh) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(112vh) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-celebration {
    display: none;
  }
}

/* --- t102: donate по макету (scoped .donate-page, только токены) ------------------ */
.donate-page {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.donate-page__header {
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-1) 0;
}

.donate-page__header h1 {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.donate-page__header p {
  margin: var(--space-1) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.donate-page .monsters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.donate-page .monster-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--c-bg-elev);
}

.donate-page .monster-card__scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 104px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 72%, var(--c-accent-soft), transparent 65%);
}

.donate-page .monster-card__plate {
  position: absolute;
  bottom: var(--space-1);
  left: 50%;
  width: 100px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--c-border-strong), transparent 70%);
  transform: translateX(-50%);
}

.donate-page .monster {
  width: 88px;
  height: 84px;
  object-fit: contain;
  animation: donate-wobble 3.4s ease-in-out infinite;
}

.donate-page .monster-card__title {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
}

.donate-page .monster-card--dev .monster-card__scene {
  background: radial-gradient(circle at 50% 72%, var(--c-accent-soft), transparent 65%);
}

.donate-page .monster-card__soon {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--c-warning-bg);
  color: var(--c-warning);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.donate-page .monster-card__soon-text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.donate-page .feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.donate-page .feed__labels {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.donate-page .feed__labels b {
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.donate-page .feed__bar,
.donate-page .fr-progress-track,
.donate-page .progress-container,
.donate-page .upd-progress-bg-wrapper {
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}

.donate-page .feed__bar {
  height: 7px;
}

.donate-page .feed__fill,
.donate-page .fr-progress-fill,
.donate-page .progress-fill,
.donate-page .upd-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-strong));
  transition: width 0.5s ease;
}

.donate-page .widget-fundraising {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: var(--c-bg-elev);
  box-shadow: 0 4px 15px var(--c-accent-soft);
}

.donate-page .fr-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.donate-page .fr-icon {
  width: 28px;
  height: 28px;
  color: var(--c-accent);
}

.donate-page .fr-icon svg {
  width: 100%;
  height: 100%;
}

.donate-page .fr-label,
.donate-page .fr-target {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.donate-page .fr-amount {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.donate-page .fr-progress-track {
  height: 8px;
  margin-bottom: var(--space-2);
}

.donate-page .fr-footer-text {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.donate-page .level-widget-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--c-surface), var(--c-bg-elev));
  box-shadow: 0 10px 30px var(--c-border), inset 0 0 20px var(--c-accent-soft);
}

.donate-page .level-content-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.donate-page .image-container {
  flex-shrink: 0;
  width: 95px;
  aspect-ratio: 339 / 364;
}

.donate-page .image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.donate-page .info-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.donate-page .subtitle {
  margin-bottom: 2px;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.donate-page .level-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.donate-page .level-title {
  color: var(--c-accent);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.donate-page .xp-text {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.donate-page .progress-container {
  height: 6px;
  margin-bottom: var(--space-2);
}

.donate-page .stats-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.donate-page .stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}

.donate-page .stat-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--c-accent);
}

.donate-page .stat-icon svg {
  width: 100%;
  height: 100%;
}

.donate-page .stat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.donate-page .stat-label {
  color: var(--c-text-muted);
  font-size: 9px;
}

.donate-page .stat-value {
  overflow: hidden;
  color: var(--c-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donate-page .stat-value.trime-active {
  color: var(--c-success);
}

.donate-page .check-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--c-success);
}

.donate-page .check-icon svg {
  width: 100%;
  height: 100%;
}

.donate-page .trime-account {
  flex-wrap: wrap;
  align-items: flex-start;
}

.donate-page .trime-account__info {
  flex: 1 1 110px;
}

.donate-page .trime-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: auto;
}

.donate-page .trime-chip {
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.donate-page .trime-chip[aria-disabled="true"] {
  border-color: var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.donate-page .trime-chip:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.donate-page .trime-chip__reason {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.donate-page .widget-actions {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

.donate-page .btn-widget {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
}

.donate-page .btn-widget--primary {
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-strong));
  color: var(--c-text-inverse);
  box-shadow: 0 4px 10px var(--c-accent-soft);
}

.donate-page .btn-widget--secondary {
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
}

.donate-page .widget-update {
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg-elev);
  box-shadow: 0 4px 15px var(--c-border);
}

.donate-page .upd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.donate-page .upd-text-content {
  flex: 1;
  min-width: 0;
}

.donate-page .upd-title {
  margin-bottom: var(--space-1);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.donate-page .upd-subtitle {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.donate-page .upd-btn {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-strong));
  color: var(--c-text-inverse);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.donate-page .upd-btn:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.donate-page .upd-btn:focus-visible,
.donate-page .btn-widget:focus-visible,
.donate-page .btn-history:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.donate-page .upd-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.donate-page .upd-votes,
.donate-page .upd-percent {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.donate-page .upd-progress-bg-wrapper {
  flex: 1;
  height: 6px;
}

.donate-page .btn-history {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: var(--c-bg-elev);
  color: var(--c-accent);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.donate-page .state {
  margin-bottom: var(--space-2);
}

@keyframes donate-wobble {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-3px) rotate(1.5deg);
  }
}

@media (max-width: 430px) {
  .donate-page .level-widget-card {
    padding: var(--space-3);
  }

  .donate-page .image-container {
    width: 78px;
  }

  .donate-page .btn-widget {
    min-height: 48px;
    padding: var(--space-2);
  }
}

@media (max-width: 360px) {
  .donate-page .monsters {
    grid-template-columns: minmax(0, 1fr);
  }

  .donate-page .level-content-wrapper {
    gap: var(--space-2);
  }

  .donate-page .widget-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .donate-page .monster,
  .donate-page .feed__fill,
  .donate-page .fr-progress-fill,
  .donate-page .progress-fill {
    animation: none;
    transition: none;
  }
}

/* --- t103: bonus page (scoped .bonus-page, только токены) ------------------------ */
.bonus-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-bg);
  color: var(--c-text);
}

.bonus-page__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.bonus-page .icon-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
}

.bonus-page .icon-btn.diamond {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.bonus-page .page-title {
  flex: 1;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: center;
}

.bonus-page .profile-card {
  margin-bottom: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--c-surface), var(--c-bg-elev));
  box-shadow: 0 10px 30px var(--c-border);
}

.bonus-page .profile-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bonus-page .avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}

.bonus-page .avatar {
  width: 100%;
  height: 100%;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-surface-2);
  box-shadow: 0 0 15px var(--c-accent-soft);
  object-fit: cover;
}

.bonus-page .level-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.bonus-page .rank-info {
  flex: 1;
  min-width: 0;
}

.bonus-page .rank-label {
  margin-bottom: var(--space-1);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.bonus-page .rank-name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--c-accent);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.bonus-page .rank-sub {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.bonus-page .rank-sub svg {
  width: 12px;
  height: 12px;
  fill: var(--c-warning);
}

.bonus-page .bonus-trime-status {
  margin: var(--space-1) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.bonus-page .funds-info {
  flex-shrink: 0;
  padding-left: var(--space-2);
  border-left: 1px solid var(--c-border);
  text-align: right;
}

.bonus-page .funds-label,
.bonus-page .funds-next {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.bonus-page .funds-total {
  margin: var(--space-1) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.bonus-page .profile-xp {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bonus-page .xp-label {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.bonus-page .xp-label span {
  margin-left: var(--space-1);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-accent);
  font-size: var(--fs-caption);
}

.bonus-page .xp-bar-bg {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}

.bonus-page .xp-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-accent-strong), var(--c-accent));
  transition: width 0.4s ease;
}

.bonus-page .xp-values {
  color: var(--c-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.bonus-page .bonus-activate-link {
  margin-top: var(--space-3);
}

.bonus-page .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: center;
}

.bonus-page .section-title::before,
.bonus-page .section-title::after {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-text-muted), transparent);
  content: "";
}

.bonus-page .levels-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bonus-page .level-card {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg-elev);
}

.bonus-page .level-left {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.bonus-page .level-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.bonus-page .level-num-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.bonus-page .avatar-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-2);
  border: 2px solid currentColor;
  border-radius: 50%;
}

.bonus-page .avatar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
}

.bonus-page .avatar-inner__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bonus-page .level-right .perk-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: currentColor;
}

.bonus-page .level-price {
  color: currentColor;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
}

.bonus-page .level-price span {
  display: block;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  font-weight: 400;
}

.bonus-page .level-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  justify-content: center;
  min-width: 0;
}

.bonus-page .tier-diamond {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.bonus-page .perks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

.bonus-page .level-card.multi-col .perks-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-2);
}

.bonus-page .perk-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--c-text-2);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.bonus-page .level-state {
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.bonus-page .level-card.is-current {
  border-color: var(--c-accent);
  background: linear-gradient(180deg, var(--c-surface), var(--c-bg-elev));
  box-shadow: 0 0 0 1px var(--c-accent-soft);
}

.bonus-page .level-card.is-current .level-state {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.bonus-page .level-card.is-available .level-state {
  color: var(--c-success);
}

.bonus-page .level-card.is-locked {
  opacity: 0.58;
}

.bonus-page .lvl-1 {
  color: var(--c-text-muted);
}

.bonus-page .lvl-2 {
  color: var(--c-warning);
}

.bonus-page .lvl-3 {
  color: var(--c-accent);
}

.bonus-page .lvl-4 {
  color: var(--c-success);
}

.bonus-page .lvl-5 {
  color: var(--c-info);
}

.bonus-page .footer-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--c-surface), var(--c-bg-elev));
  overflow: hidden;
}

.bonus-page .heart-icon-wrapper {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-danger-bg);
  color: var(--c-danger);
}

.bonus-page .heart-icon-wrapper svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.bonus-page .footer-text h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.bonus-page .footer-text p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.bonus-page .gift-box-placeholder {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle, var(--c-accent-soft), transparent 70%);
  opacity: 0.6;
}

.bonus-page .bonus-activate-link:focus-visible,
.bonus-page .icon-btn:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

@media (max-width: 430px) {
  .bonus-page .profile-card {
    padding: var(--space-3);
  }

  .bonus-page .profile-top {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .bonus-page .avatar-wrapper {
    width: 60px;
    height: 60px;
  }

  .bonus-page .funds-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    border-left: none;
    text-align: left;
  }

  .bonus-page .funds-label {
    display: none;
  }

  .bonus-page .funds-total {
    margin: 0;
  }

  .bonus-page .profile-xp {
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
  }

  .bonus-page .xp-bar-bg {
    order: 3;
    width: 100%;
    margin-top: var(--space-1);
  }

  .bonus-page .xp-values {
    margin-left: auto;
  }

  .bonus-page .level-card {
    gap: var(--space-1);
    padding: var(--space-2);
  }

  .bonus-page .level-left {
    width: 84px;
  }

  .bonus-page .level-card.multi-col .perks-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .bonus-page .page-title {
    font-size: var(--fs-sm);
  }

  .bonus-page .level-left {
    width: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-page .xp-bar-fill {
    transition: none;
  }
}

/* --- t112: компактные любимки как participants-modal ---------------------------- */
.favorite-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
  border-bottom: 1px solid var(--c-border);
}

.favorite-row:last-child {
  border-bottom: none;
}

.favorite-row__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 48px;
  padding: var(--space-1) 0;
  color: var(--c-text);
  text-decoration: none;
}

.favorite-row__avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: visible;
}

.favorite-row__img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-surface-2);
  object-fit: cover;
}

.favorite-row__body {
  min-width: 0;
}

.favorite-row__status {
  display: block;
  margin-top: 1px;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.favorites-page__note {
  margin: 0 0 var(--space-2);
  color: var(--c-text-muted);
}

.favorite-row__name {
  display: block;
  overflow: hidden;
  color: var(--c-text);
  font-size: var(--fs-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-row__remove {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}

.favorite-row__remove:hover,
.favorite-row__remove:focus-visible {
  border-color: var(--c-danger-border);
  color: var(--c-danger);
}

.favorite-row__remove:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

.favorite-row__link:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

/* --- t114: баланс по tropcoin_balance ------------------------------------------ */
.balance-page {
  display: flex;
  flex-direction: column;
}

.balance-page__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-1) 0;
}

.balance-page__back {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
}

.balance-page__head h1 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.balance-page .balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-surface), var(--c-bg-elev));
  box-shadow: 0 10px 30px var(--c-accent-soft);
  text-align: center;
}

.balance-page .balance-label {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.balance-page .balance-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--c-text);
  font-size: var(--fs-display, 42px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
}

.balance-page .balance-coin {
  width: 36px;
  height: 36px;
}

.balance-page .balance-currency {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.balance-page .section-title {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-1);
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.balance-page .tx-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.balance-page .tx-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg-elev);
}

.balance-page .tx-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.balance-page .tx-icon--income {
  background: var(--c-success-bg);
  color: var(--c-success);
}

.balance-page .tx-icon--expense {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}

.balance-page .tx-icon svg {
  width: 20px;
  height: 20px;
}

.balance-page .tx-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.balance-page .tx-desc {
  overflow: hidden;
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-page .tx-date {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}

.balance-page .tx-amount {
  flex-shrink: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.balance-page .tx-amount--income {
  color: var(--c-success);
}

.balance-page .tx-amount--expense {
  color: var(--c-danger);
}

@media (max-width: 430px) {
  .balance-page .balance-card {
    padding: var(--space-3);
  }

  .balance-page .tx-item {
    padding: var(--space-2) var(--space-3);
  }
}



/* --- 25.10.2026: основные достижения — прогресс и «запертые» карточки --------------- */
.ach-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}

.ach-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.ach-progress__label {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.ach-progress__value {
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.ach-progress__track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-surface-3);
}

.ach-progress__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
  transition: width 0.35s ease;
}

.ach-card--locked {
  opacity: 0.74;
  border-color: var(--c-border);
}

.ach-card--locked:hover {
  border-color: var(--c-border);
}

.ach-card--locked .achievement-img {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.85;
}

.ach-card--locked .achievement-title,
.ach-card--locked .achievement-description,
.ach-card--locked .achievement-note {
  color: var(--c-text-muted);
}

/* У обычных карточек note спрятан; у запертой он и есть объяснение «не получено». */
.ach-card--locked .achievement-note {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .ach-progress__fill {
    transition: none;
  }
}

/* --- 25.10.2026: полная карточка идеи (макет example_idea_card.html) --------------- */
.idea-page .idea-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.idea-page .idea-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.idea-page .idea-card__title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idea-page .idea-card__title {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.15;
}

.idea-page .idea-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.idea-page .idea-cost {
  flex: none;
  min-width: 120px;
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  text-align: right;
}

.idea-page .idea-cost__label {
  display: block;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.idea-page .idea-cost__value {
  display: block;
  margin-top: 2px;
  color: var(--c-warning);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.idea-page .idea-short {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--c-accent) 35%, var(--c-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface));
}

.idea-page .idea-short__text {
  margin: var(--space-2) 0 0;
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.idea-page .idea-details {
  padding-top: var(--space-2);
}

.idea-page .idea-details__text {
  margin: var(--space-2) 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-md);
  line-height: 1.6;
  white-space: pre-line;
}

.idea-page .idea-images-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idea-page .idea-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
}

.idea-page .idea-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.idea-page .idea-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.idea-page .idea-edit-form .field__input {
  min-height: 44px;
}

.idea-page .idea-edit-form textarea.field__input {
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 420px) {
  .idea-page .idea-card__top {
    flex-direction: column;
  }

  .idea-page .idea-cost {
    width: 100%;
    text-align: left;
  }

  .idea-page .idea-action-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 25.10.2026: свайпалка участников (Troxel Battle) ------------------------------ */
.swipe-page {
  width: 100%;
  max-width: calc(440px - 2 * var(--gutter));
  margin: 0 auto;
}

.swipe-page__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}

.swipe-page__subtitle {
  margin: 2px 0 0;
  color: var(--c-text-muted);
}

.swipe-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.swipe-progress {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.swipe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--radius-md) + 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.swipe-avatar-wrap {
  width: 150px;
  height: 150px;
  padding: 4px;
  border-radius: 34px;
  background: var(--c-accent-soft);
  box-shadow: var(--shadow-glow);
}

.swipe-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  background: var(--c-surface-2);
  border: 3px solid var(--c-surface);
}

.swipe-person {
  width: 100%;
  text-align: center;
}

.swipe-name {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.2;
}

.swipe-username {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--c-text-muted);
  font-size: var(--fs-md);
}

.swipe-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.swipe-badge {
  padding: 7px 16px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.swipe-rating {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.swipe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.swipe-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.swipe-btn:active {
  transform: translateY(-3px);
}

.swipe-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.swipe-btn--dislike {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-border));
}

.swipe-btn--skip {
  color: var(--c-warning);
  background: color-mix(in srgb, var(--c-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-warning) 30%, var(--c-border));
}

.swipe-btn--like {
  color: var(--c-success);
  background: color-mix(in srgb, var(--c-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-success) 30%, var(--c-border));
}

.swipe-btn.is-selected {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.swipe-unknown {
  width: 100%;
}

.swipe-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  text-align: center;
}

.swipe-done__text {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.swipe-done__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.swipe-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.swipe-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.swipe-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.swipe-history__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: var(--space-2);
}

.swipe-history__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.swipe-history__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.swipe-history__row:active {
  background: var(--c-surface-2);
}

.swipe-history__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--c-surface-2);
}

.swipe-history__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.swipe-history__name {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.swipe-history__meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

@media (max-width: 420px) {
  .swipe-history__filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 25.10.2026: панель модерации ------------------------------------------------ */
.mod-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  padding-bottom: 2px;
}

.mod-tab {
  flex: none;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.mod-tab.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-tab-active-text);
}

.mod-tab__count:not(:empty) {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: var(--fs-caption);
  text-align: center;
}

.mod-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mod-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mod-card__cover,
.mod-card__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--c-surface-2);
}

.mod-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.mod-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mod-card__title {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.mod-card__meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.mod-card__text {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.mod-card__link {
  color: var(--c-link);
  font-size: var(--fs-sm);
  text-decoration: underline;
}

.mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-border);
}

.mod-photo {
  position: relative;
  overflow: hidden;
}

.mod-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
}

.mod-log-row__count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  text-align: center;
}

.mod-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.event-dialog__card {
  width: min(92vw, 440px);
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

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

/* --- 25.10.2026: карточка анкеты в панели модерации (эталон — profile-card) ------ */
.mod-form-card {
  padding: 0;
  overflow: hidden;
}

.mod-form-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 4%, transparent), transparent);
}

.mod-form-avatar-wrap {
  position: relative;
  flex: none;
  display: inline-flex;
}

.mod-form-avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-border);
  background: var(--c-surface-2);
}

.mod-form-status {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-success);
}

.mod-form-header__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mod-form-name {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-form-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.mod-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.mod-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.mod-form-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 12px;
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.mod-form-info__icon {
  display: inline-flex;
  flex: none;
  color: var(--c-text-muted);
}

.mod-form-info__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}

.mod-form-goals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mod-form-goals__title {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mod-form-goals__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mod-form-goal {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.mod-form-goal--positive {
  border-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  background: color-mix(in srgb, var(--c-accent) 13%, transparent);
  color: var(--c-accent);
}

.mod-form-goal--negative {
  border-color: color-mix(in srgb, var(--c-danger) 28%, transparent);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  color: var(--c-danger);
}

.mod-form-goal--neutral {
  border-color: var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-2);
}

.mod-form-note {
  margin: 0;
  color: var(--c-text-muted);
  text-align: center;
}

.mod-form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-bg) 55%, transparent);
}

.mod-form-footer .btn {
  flex: 1 1 0;
  min-width: 130px;
}

.mod-form-video {
  flex-basis: 100%;
}

/* --- 25.10.2026: мероприятие без верификации 2 уровня --------------------------- */
.event-card { position: relative; }
.event-card--locked .event-card__cover,
.event-card--locked .event-card__body > :not(.home-event-lock) {
  filter: blur(6px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.home-event-lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  text-align: center;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
}
.home-event-lock__icon { font-size: 34px; line-height: 1; }
.home-event-lock__title { color: var(--c-text); font-size: var(--fs-md); }
.home-event-lock .btn { width: min(100%, 280px); }


/* --- 25.10.2026: карточки модерации по референсам сообщений/сигналов ---------- */
.mod-card {
  padding: 18px;
  border-radius: 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.mod-card__head { gap: 12px; align-items: flex-start; }
.mod-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.mod-card__body { gap: 3px; }
.mod-card__title { font-size: 17px; font-weight: 700; }
.mod-card__meta { font-size: 13px; }
.mod-card__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text-2);
}
.mod-card__link { font-size: 13px; }
/* t225: цитата сообщения, на которое пожаловались, — видно, ЧТО нарушено. */
.mod-card__quote {
  margin: 2px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--c-accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-2));
  color: var(--c-text-2);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mod-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.mod-actions .btn {
  flex: 1;
  min-height: 46px;
  padding: 13px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}


/* --- 25.10.2026: уведомления панели как список референса ----------------------- */
.mod-log-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mod-log-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  font-size: 18px;
}
.mod-log-row__text { flex: 1; min-width: 0; }
.mod-log-row__count {
  flex: none;
  min-width: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-tab-active-text);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}


/* --- 25.10.2026: успешная отправка анкеты — дизайн new/anketa.html ------------- */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 24px auto 0;
  padding: 16px;
  text-align: center;
  animation: form-success-in 0.45s ease-out;
}
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.form-success__illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin-bottom: 28px;
}
.form-success__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
  opacity: 0.35;
  filter: blur(20px);
  animation: form-success-pulse 3s ease-in-out infinite alternate;
}
@keyframes form-success-pulse {
  from { transform: scale(0.9); opacity: 0.25; }
  to { transform: scale(1.1); opacity: 0.45; }
}
.form-success__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.form-success__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--c-text);
}
.form-success__text {
  margin: 0 0 18px;
  color: var(--c-text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.form-success__warning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--c-warning) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-warning) 12%, transparent);
  color: var(--c-warning);
  font-size: 13px;
  font-weight: 600;
}
.form-success__warning > span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  color: var(--c-bg);
  font-size: 11px;
  font-weight: 800;
}


.form-success[hidden] { display: none !important; }
.home-event-lock[hidden] { display: none !important; }


/* --- 25.10.2026: админ-панель и карточки донатов ------------------------------- */
.admin-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 var(--space-4); padding-bottom: 2px; }
.admin-tab {
  flex: none; padding: 10px 16px; border: 1px solid var(--c-border); border-radius: 999px;
  background: transparent; color: var(--c-text-muted); font: inherit; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer;
}
.admin-tab.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-tab-active-text); }
.admin-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.admin-donations { display: flex; flex-direction: column; gap: 12px; }
.donation-admin-card {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--c-border);
  border-radius: 18px; background: var(--c-surface); position: relative; overflow: hidden;
}
.donation-admin-card--accepted::before {
  content: ''; position: absolute; inset: 0 0 auto auto; width: 160px; height: 160px;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-success) 12%, transparent), transparent 65%);
  pointer-events: none;
}
.donation-admin-card--declined { border-color: color-mix(in srgb, var(--c-danger) 25%, var(--c-border)); }
.donation-admin-card__head { display: flex; align-items: center; gap: 12px; }
.donation-admin-card__avatar { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--c-surface-2); }
.donation-admin-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.donation-admin-card__info strong { font-size: 15px; font-weight: 700; color: var(--c-text); }
.donation-admin-card__info span { font-size: 12px; color: var(--c-text-muted); }
.donation-admin-card__amount {
  flex: none; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--c-border);
  background: var(--c-surface-2); color: var(--c-text); font-size: 15px; font-weight: 800;
}
.donation-admin-card--accepted .donation-admin-card__amount {
  background: color-mix(in srgb, var(--c-success) 12%, transparent); color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
}
.donation-admin-card--declined .donation-admin-card__amount {
  background: color-mix(in srgb, var(--c-danger) 8%, transparent); color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 20%, transparent);
  text-decoration: line-through; opacity: .75;
}
.donation-admin-card--declined .donation-admin-card__avatar { opacity: .4; filter: grayscale(100%); }
.donation-admin-card--declined .donation-admin-card__info strong { color: var(--c-text-muted); }
.donation-admin-card__actions { display: flex; gap: 10px; }
.donation-admin-card__actions .btn { flex: 1; padding: 12px; border-radius: 12px; font-size: 14px; }
.donation-admin-card__declined {
  color: var(--c-danger); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.donation-admin-card__accepted { color: var(--c-success); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }


/* Временная заглушка «Афиша не готова» (26.10.2026). */
.not-ready { text-align: center; gap: 14px; padding: 28px 20px; }
.not-ready__emoji { font-size: 52px; line-height: 1; }
.not-ready .base-text { max-width: 34ch; margin: 0 auto; }


/* Автоподбор на странице «Общение» (макет будущей свайп-системы). */
.autopick-row { display: flex; justify-content: center; padding: 0 16px 12px; }
.btn-neon-autopick {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 20px; border-radius: 10px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--c-widget-ink); background: var(--c-widget-bg);
  border: 1px solid var(--c-widget-neon-60);
  box-shadow: 0 0 15px var(--c-widget-neon-25), inset 0 0 10px var(--c-widget-neon-10);
}
.btn-neon-autopick:hover, .btn-neon-autopick:active {
  color: var(--c-widget-on); border-color: var(--c-widget-neon);
  box-shadow: 0 0 25px var(--c-widget-neon-50), inset 0 0 15px var(--c-widget-neon-20);
}
.chats-auto { padding: 4px 16px 18px; }
.match-widget {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 30px 22px;
  border: 1px solid var(--c-widget-border); border-radius: 28px; background: var(--c-widget-card);
  box-shadow: 0 15px 40px var(--c-widget-shadow-50), inset 0 0 30px var(--c-widget-neon-05);
}
.match-widget__icon {
  position: relative; width: 76px; height: 76px; display: grid; place-items: center;
  margin-bottom: 18px; border-radius: 50%; background: var(--c-widget-icon-bg);
  border: 1px solid var(--c-widget-neon-30);
}
.match-widget__icon > svg { width: 36px; height: 36px; fill: var(--c-widget-neon); filter: drop-shadow(0 0 10px var(--c-widget-neon-60)); z-index: 1; }
.pulse-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c-widget-neon);
  animation: widget-ripple 2s cubic-bezier(.2,.8,.2,1) infinite; opacity: 0;
}
.pulse-ring:nth-child(2) { animation-delay: 1s; }
@keyframes widget-ripple {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}
.experimental-badge {
  margin-bottom: 12px; padding: 4px 12px; border-radius: 12px;
  color: var(--c-widget-gold); background: var(--c-widget-gold-10); border: 1px solid var(--c-widget-gold-30);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.match-widget__title { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.match-widget__desc { margin: 0 0 22px; max-width: 34ch; color: var(--c-widget-muted); font-size: 14px; line-height: 1.5; }
.btn-find {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px; border: 0; border-radius: 16px; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 700; color: var(--c-widget-on);
  background: linear-gradient(90deg, var(--c-widget-pink) 0%, var(--c-widget-blue) 100%);
  box-shadow: 0 6px 20px var(--c-widget-pink-30);
}
.btn-find svg { width: 20px; height: 20px; fill: currentColor; }
.btn-find.is-active {
  color: var(--c-widget-active-text); background: linear-gradient(90deg, var(--c-widget-green-soft) 0%, var(--c-widget-green) 100%);
  box-shadow: 0 0 24px var(--c-widget-green-35);
}
.chats-auto__status { margin: 12px 0 0; color: var(--c-widget-green-soft); font-size: 13px; font-weight: 700; }


/* Навязчивое, но закрываемое приложение напоминание о базовой верификации. */
.verify-prompt { margin: 0 0 12px; padding: 14px; border-color: var(--c-warning); }
.verify-prompt strong { display: block; margin-bottom: 6px; }
.verify-prompt .base-text { margin: 0 0 10px; }


.mod-form-profile-link { display: inline-block; margin-top: 4px; font-size: var(--fs-sm); color: var(--c-accent); }


/* Пока открыта клавиатура, кнопки не липнут поверх поля ввода. */
body.form-editing .form-controls { position: static; }


/* ==== Анкета: карточка вопроса, номер, крупный центр и кнопки-строки ==== */
/* 25.10.2026: прогресс/номер вопроса переехали в новый поток `#/form`
   (static/css/anketa.css) — здесь они больше не прячутся принудительно. */
.form-step { overflow: visible; }
.form-step .mascot { display: block; width: 116px; height: auto; margin: 0 auto 4px; }
.form-question-number {
  display: block; margin: 0 0 6px; text-align: center;
  color: var(--c-text-muted); font-size: 13px; font-weight: 500;
}
.form-step .field__label {
  display: block; margin: 0 0 18px; text-align: center;
  font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--c-text);
}
.form-step .field__input { min-height: 54px; border-radius: 14px; }
.form-step .choice-row { grid-template-columns: 1fr; gap: 10px; }
.form-step .choice {
  position: relative; width: 100%; min-height: 56px; padding: 14px 48px 14px 20px;
  text-align: left; border: 1.5px solid var(--c-border); border-radius: 14px;
  background: var(--c-surface); color: var(--c-text); font-size: 15px; font-weight: 600;
  box-shadow: 0 2px 8px var(--c-widget-shadow-12);
}
.form-step .choice:active { transform: scale(.99); }
.form-step .choice[aria-checked="true"] {
  border: 1.5px solid var(--c-accent); background: var(--c-accent-soft);
  box-shadow: inset 0 0 15px var(--c-widget-neon-08), 0 4px 15px var(--c-widget-neon-15);
}
.form-step .choice[aria-checked="true"]::after {
  content: "✓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--c-accent); font-size: 18px; font-weight: 800;
}
.form-date { color-scheme: dark; }
.city-select-native, .form-city-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.city-select { position: relative; width: 100%; z-index: 20; }
.city-select__trigger {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border: 1.5px solid var(--c-accent); border-radius: 14px;
  background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 16px; font-weight: 600;
  text-align: left; cursor: pointer; box-shadow: 0 0 15px var(--c-widget-neon-08);
}
.city-select__trigger svg { width: 20px; height: 20px; fill: var(--c-text-muted); transition: transform .2s; flex: 0 0 auto; }
.city-select__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.city-select__menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  padding: 8px; border: 1px solid var(--c-border); border-radius: 16px;
  background: var(--c-surface); box-shadow: 0 10px 30px var(--c-widget-shadow-60);
  max-height: 240px; overflow-y: auto;
}
.city-select__item {
  width: 100%; padding: 13px 14px; border: 0; border-radius: 10px; background: transparent;
  color: var(--c-text); font: inherit; font-size: 15px; font-weight: 500; text-align: left;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.city-select__item:hover, .city-select__item[aria-selected="true"] { background: var(--c-accent-soft); color: var(--c-accent); }
.city-select__item[aria-selected="true"]::after { content: "✓"; font-weight: 800; }

/* Вкладка-ссылка Тропопедии: визуально это та же кнопка, без подчёркивания ссылки. */
.tab { text-decoration: none; }


/* Тропопедия — внутренняя вкладка: отдельный документ, но отдаёт его тот же сервер. */
.tropopedia-page { padding: 0; }
.tropopedia-frame {
  display: block; width: 100%; height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom, 0px));
  min-height: 560px; border: 0; background: var(--c-bg);
}

/* Вкладка-вики занимает всю ширину экрана: убираем рамку .app и его отступы. */
body.page-tropopedia {
  overflow: hidden;
  background: var(--c-bg);
}
body.page-tropopedia .app {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  gap: 0;
}
body.page-tropopedia #view,
body.page-tropopedia .tropopedia-page {
  width: 100%;
  min-width: 0;
}