/* GH-MARKER: ready for GitHub */
/* ============================================================================
 * fyra-donate.css — слой визуального языка v4 для ПУБЛИЧНЫХ страниц донатера:
 *   views/pages/donation_public.ejs   (GET /p/:username)
 *   views/pages/donation_payment.ejs  (GET /p/:username/payment)
 * Обёртка страницы: <div class="fx fx-donate"> вокруг корневой <section>.
 *
 * ОГРАНИЧЕНИЕ ВЛАДЕЛЬЦА: «палитры оставить, меняем только интерфейс».
 * Оформление, которое настраивает стример (page_style + donation_button_*),
 * слой ЧИТАЕТ и НЕ подменяет. Ни один фиксированный цвет v4 не встаёт на место
 * --user-btn-bg / --user-btn-color / --user-card-bg / --user-card-border-color /
 * --user-card-border-width / --user-accent / --user-radius / --user-avatar-radius /
 * --user-title-color / --user-text-color / --user-page-bg / --user-hero-bg.
 * Дефолты пресетов (#FFB84D, #1A1F2E, #7C5CFF) НЕ меняются: они уже сохранены
 * в БД у стримеров, смена без миграции дала бы два разных вида одной страницы.
 * НЕ трогаем: баннер-крышку .dp-card-banner (+ --empty), оверлей-частицы
 * .dp-overlay/.dp-particle, форму аватара, скругления (--user-radius).
 *
 * Меняем только интерфейсную обвязку: типографику, плотность, поля форм,
 * вспомогательные подписи, служебные блоки, раскладку и состояния
 * (фокус / disabled / hover).
 *
 * ВЕС СЕЛЕКТОРОВ. Собственный <style nonce> вьюхи лежит в <body>, т.е. ПОЗЖЕ
 * этого файла в <head>. При равной специфичности выигрывает вьюха, поэтому
 * каждое правило ниже намеренно тяжелее: .fx.fx-donate + корневой класс
 * страницы (+ !important там, где в базе тоже стоит !important).
 *
 * ЗАПРЕТ: НЕ объявлять display у блоков, которыми управляют утилиты
 * .is-hidden/.is-visible-flex (display:none!important) — UI-CSS-TOGGLE-DISPLAY-OWNED-BY-UTILITY.
 * ============================================================================ */


/* ============================================================================
 * 0. НЕЙТРАЛИЗАЦИЯ БАЗОВОГО СЛОЯ .fx (fyra-next.css)
 * Без этого блока страница стримера ломается ещё до перекраски.
 * ============================================================================ */

/* 0.1 .fx{ background:var(--void) } закрасил бы загруженный фон стримера
   (--user-page-bg живёт на .fyra-public-donation/.fyra-payment-page — это
   ПОТОМОК обёртки, поэтому гасим фон именно у обёртки, не у секции). */
.fx.fx-donate{
  background: transparent;

  /* Локальные токены слоя. Объявлены на СВОЁМ контейнере, не на :root
     (UI-CSS-VAR-UNDEFINED-SHORTHAND): за пределами этих двух страниц не текут.
     --dn-accent: на странице доната = акцент стримера, на странице оплаты
     переменной нет → золото v4. Одно выражение, два корректных поведения. */
  --dn-accent: var(--user-accent, #FFC61A);
  --dn-ink: #ECEEF2;
  --dn-ink-2: #B7BCC6;
  --dn-dim: #8B909B;
  --dn-dimmer: #666B75;
  --dn-line: rgba(255, 255, 255, .12);
  --dn-line-2: rgba(255, 255, 255, .22);
  --dn-field: rgba(255, 255, 255, .05);
  --dn-field-2: rgba(255, 255, 255, .08);
  --dn-coal: #101216;
  --dn-coal-2: #171A20;
  --dn-gold: #FFC61A;
  --dn-live: #47C08A;
}

/* 0.2 Полноэкранное шумовое зерно .fx::before{position:fixed;inset:0} —
   вмешательство в оформление стримера (лежит поверх его фона). Гасим. */
.fx.fx-donate::before{
  content: none;
  display: none;
}

/* 0.3 .fx > *{ position:relative; z-index:1 } делает секцию stacking-контекстом
   и запирает внутри #theme-toggle (fixed, z-index:1000) и .dp-overlay
   (fixed, z-index:5). Возвращаем исходное позиционирование: секция была static
   (UI-FX-LAYER-WRAP-POSITION). */
.fx.fx-donate > *{
  position: static;
  z-index: auto;
}

/* 0.4 ВАЖНО для будущих правок: класс .fx-donate обязан жить на ОТДЕЛЬНОЙ
   обёртке вокруг секции, а не на самой секции. Иначе background:transparent
   из 0.1 встанет на элемент, который несёт --user-page-bg, и загруженный фон
   стримера исчезнет; а любой шорткат background здесь дополнительно сбросил бы
   background-size:cover (UI-CSS-SHORTHAND-KILLS-DECORATION). */


/* ============================================================================
 * 1. ТИПОГРАФИКА
 * .fx задаёт font-family:var(--fb)/16px/1.55 — этого достаточно для корпуса.
 * Ниже — только то, что базовый CSS перебивает своим весом.
 * ============================================================================ */

/* 1.1 Заголовок карточки. Цвет — ТОЛЬКО из --user-title-color
   (inline-styles.css:17405), здесь ни одного фиксированного цвета. */
.fx.fx-donate .fyra-public-donation .dp-card-header .dp-hero-title{
  font-family: var(--fd);
  font-size: clamp(21px, 4.4vw, 27px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* 1.2 Описание стримера под заголовком. Цвет — --user-text-color. */
.fx.fx-donate .fyra-public-donation .dp-card-header .dp-hero-text{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* 1.3 Заголовок страницы оплаты. Служебный текст сервиса — цвет наш. */
.fx.fx-donate .fyra-payment-page .fyra-payment-title{
  font-family: var(--fd);
  font-size: clamp(19px, 3.6vw, 24px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin-bottom: 24px;
  color: var(--dn-ink);
}

/* 1.4 Микро-лейблы формы («СУММА», «ИМЯ», «СООБЩЕНИЕ», «СПОСОБ ОПЛАТЫ»,
   «EMAIL ДЛЯ ЧЕКА»). Базовый .dp-form-label — 600/var(--text), вес (0,1,0);
   на странице оплаты есть ещё .dp-form-section-payment .dp-form-label (0,2,0)
   и .fyra-public-donation .dp-form-label из <style> вьюхи (0,2,0) —
   поэтому берём (0,3,0). */
.fx.fx-donate .fyra-public-donation .dp-form-label,
.fx.fx-donate .fyra-payment-page .dp-form-label,
.fx.fx-donate .fyra-payment-page .dp-form-section-payment .dp-form-label{
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 9px;
  text-shadow: none;
}

/* Цвет лейблов на карточке стримера — приглушённый, но читаемый на любом фоне
   карточки. Отдельным правилом, чтобы не смешивать с типографикой. */
.fx.fx-donate .fyra-public-donation .dp-form-label{
  color: var(--dn-dim);
}
.fx.fx-donate .fyra-payment-page .dp-form-label,
.fx.fx-donate .fyra-payment-page .dp-form-section-payment .dp-form-label{
  color: var(--dn-dim);
}

/* 1.5 Мелкий лейбл («На какой сбор направить»). */
.fx.fx-donate .fyra-public-donation .dp-form-label-small{
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dn-dim);
  text-shadow: none;
}

/* 1.6 Обязательное поле — «звёздочка» у e-mail. */
.fx.fx-donate .fyra-payment-page .dp-required{
  color: #F26610;
  font-weight: 700;
}


/* ============================================================================
 * 2. ПЛОТНОСТЬ И РАСКЛАДКА
 * ============================================================================ */

/* 2.1 Отступ сверху под фиксированную шапку гостя (.header-fixed:
   position:fixed; top:0; right:0; padding:16px 24px; внутри кнопка «Войти»
   ~40px ⇒ ~72px высоты). Страница оплаты уже использует 80px — выравниваем
   страницу доната по ней (UI-FIXED-NAVBAR-NO-SPACER). */
.fx.fx-donate .fyra-public-donation .fyra-donation-container{
  padding: 80px 20px 72px;
}

/* 2.2 Секции формы — чуть плотнее (было 24px). */
.fx.fx-donate .fyra-public-donation .dp-form-section{
  margin-bottom: 20px;
}
.fx.fx-donate .fyra-payment-page .dp-form-section-payment{
  margin-bottom: 18px;
}

/* 2.3 ВНИМАНИЕ: .dp-card-header{padding:44px 24px 8px} НЕ трогаем —
   от него отсчитывается .dp-avatar-onbanner{top:-32px}
   (UI-ABSOLUTE-CHILD-HARDCODED-OFFSET). */


/* ============================================================================
 * 3. ПОЛЯ ФОРМ
 * Базовые правила вьюхи стоят с !important и весом (0,2,0) — перебиваем
 * весом (1,3,0)/(0,4,0) и тем же !important (CSS-OVERRIDE-CHECK-IMPORTANT-IN-BASE).
 * Скругления (--user-radius / 12px) НЕ трогаем — это настройка стримера.
 * ============================================================================ */

/* 3.1 Поле суммы — главная цифра экрана: моноширинный, табличные цифры. */
.fx.fx-donate .fyra-public-donation #donationAmountInput{
  font-family: var(--fm) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  font-variant-numeric: tabular-nums;
  padding: 14px 16px !important;
  background: var(--dn-field) !important;
  border: 1px solid var(--dn-line) !important;
  color: var(--dn-ink) !important;
}

/* 3.2 Остальные текстовые поля. */
.fx.fx-donate .fyra-public-donation #donorNameInput,
.fx.fx-donate .fyra-public-donation #donorMsgInput,
.fx.fx-donate .fyra-public-donation .dp-textarea{
  font-family: var(--fb) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  background: var(--dn-field) !important;
  border: 1px solid var(--dn-line) !important;
  color: var(--dn-ink) !important;
  line-height: 1.5 !important;
}

/* 3.3 Селекты (валюта скрыта, голос, сбор средств). */
.fx.fx-donate .fyra-public-donation #donationCurrencySelect,
.fx.fx-donate .fyra-public-donation #ttsSpeakerSelect,
.fx.fx-donate .fyra-public-donation #fundingGoalSelect{
  font-family: var(--fb) !important;
  font-size: 14px !important;
  background: var(--dn-field) !important;
  border: 1px solid var(--dn-line) !important;
  color: var(--dn-ink) !important;
}

/* 3.4 E-mail на странице оплаты. */
.fx.fx-donate .fyra-payment-page .dp-input{
  font-family: var(--fb);
  font-size: 14px;
  padding: 12px 14px;
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
  color: var(--dn-ink);
}

/* 3.5 Плейсхолдеры. У базы стоит !important — нужен свой (CSS-OVERRIDE-CHECK-IMPORTANT-IN-BASE). */
.fx.fx-donate .fyra-public-donation #donationAmountInput::placeholder,
.fx.fx-donate .fyra-public-donation #donorNameInput::placeholder,
.fx.fx-donate .fyra-public-donation #donorMsgInput::placeholder{
  color: var(--dn-dimmer) !important;
  font-family: var(--fb) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}
.fx.fx-donate .fyra-payment-page .dp-input::placeholder{
  color: var(--dn-dimmer);
}

/* 3.6 ФОКУС. Возвращаем сюда акцент стримера: базовое правило
   .fyra-public-donation .dp-full-width:focus{border-color:var(--user-accent)}
   (inline-styles.css:17430) МЁРТВОЕ — <style> вьюхи прибивает границу
   фиксированным rgba(255,184,77,.8) через !important при равном весе.
   Возвращаем чтение --user-accent весом (1,3,0)/(0,4,0) + !important. */
.fx.fx-donate .fyra-public-donation #donationAmountInput:focus,
.fx.fx-donate .fyra-public-donation #donorNameInput:focus,
.fx.fx-donate .fyra-public-donation #donorMsgInput:focus,
.fx.fx-donate .fyra-public-donation #donationCurrencySelect:focus,
.fx.fx-donate .fyra-public-donation #ttsSpeakerSelect:focus,
.fx.fx-donate .fyra-public-donation #fundingGoalSelect:focus,
.fx.fx-donate .fyra-public-donation .dp-textarea:focus,
.fx.fx-donate .fyra-public-donation .dp-tts-select-inline:focus{
  outline: none !important;
  background: var(--dn-field-2) !important;
  border-color: var(--dn-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-accent) 22%, transparent) !important;
}
.fx.fx-donate .fyra-payment-page .dp-input:focus{
  outline: none;
  background-color: var(--dn-field-2);
  border-color: var(--dn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-accent) 22%, transparent);
}

/* 3.7 Клавиатурный фокус. .fx :focus-visible ставит outline цвета --flame
   (кислотно-красный) — на странице стримера это чужой цвет. Переводим на
   акцент страницы (на странице оплаты — золото v4). */
.fx.fx-donate :focus-visible{
  outline: 2px solid var(--dn-accent);
  outline-offset: 3px;
}

/* 3.8 Чекбоксы (запомнить e-mail / покрыть комиссию / персонаж). */
.fx.fx-donate .fyra-public-donation .dp-checkbox,
.fx.fx-donate .fyra-payment-page .dp-checkbox{
  accent-color: var(--dn-accent);
  width: 17px;
  height: 17px;
}
.fx.fx-donate .fyra-public-donation .dp-checkbox-label,
.fx.fx-donate .fyra-payment-page .dp-checkbox-label{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dn-ink-2);
}
.fx.fx-donate .fyra-payment-page .dp-remember-email-label{
  font-size: 12.5px;
  color: var(--dn-dim);
  opacity: 1;
}


/* ============================================================================
 * 4. КНОПКИ
 * .fx .btn (0,2,0) навязывает padding:14px 24px, radius:var(--r)=2px,
 * font:var(--fm)/13px/uppercase — и бьёт любое одноклассовое правило
 * (UI-FX-LAYER-BOX-METRICS, UI-FX-LAYER-ELEMENT-SELECTOR-WEIGHT).
 * .fx button{font:inherit;color:inherit} (0,1,1) бьёт .dp-toggle-btn и
 * JS-кнопки дропдауна голосов.
 * ============================================================================ */

/* 4.1 Быстрые суммы. Скругление возвращаем ровно то, что было до слоя (10px из
   <style> вьюхи), — радиус относится к оформлению стримера, не меняем. */
.fx.fx-donate .fyra-public-donation .amounts{
  gap: 8px;
  margin-top: 10px;
}
.fx.fx-donate .fyra-public-donation .amounts .amount-btn{
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--fm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* Hover. .amount-btn{color:var(--text)!important} в styles.css:1291 делает
   правило .fyra-public-donation .amount-btn:hover{color:var(--user-accent)}
   мёртвым — возвращаем чтение акцента стримера через !important.
   Подскок translateY(-2px) из <style> вьюхи гасим: в v4 кнопки не прыгают
   (глобальный button:hover сюда не достаёт — .amount-btn несёт класс .btn
   и попадает в :not(.btn) исключение). */
.fx.fx-donate .fyra-public-donation .amounts .amount-btn:hover{
  transform: none;
  background-color: color-mix(in srgb, var(--dn-accent) 14%, transparent);
  border-color: var(--dn-accent);
  color: var(--dn-accent) !important;
}
.fx.fx-donate .fyra-public-donation .amounts .amount-btn:active{
  transform: none;
  opacity: .88;
}
/* Состояние .is-active описано в inline-styles.css:17438 и сейчас JS-ом не
   ставится, но hover-правило выше прибито !important — поднимаем и его, иначе
   при включении класса выбранная сумма молча не подсветится
   (UI-FX-LAYER-HOVER-RESET-ORDER). */
.fx.fx-donate .fyra-public-donation .amounts .amount-btn.is-active{
  border-color: var(--dn-accent);
  color: var(--dn-accent) !important;
}

/* 4.2 Главная кнопка доната и кнопка отправки платежа.
   background/color — ТОЛЬКО из --user-btn-bg/--user-btn-color, здесь их нет.
   text-transform:none — подпись задаёт стример (donation_button_label),
   капслок исказил бы его текст. */
.fx.fx-donate .fyra-public-donation .dp-donate-btn-full,
.fx.fx-donate .fyra-payment-page .dp-donate-btn-full{
  border-radius: 12px;
  padding: 16px 24px;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.25;
  box-shadow: none;
  transition: filter .15s, box-shadow .15s, opacity .15s;
}
.fx.fx-donate .fyra-public-donation .dp-donate-btn-full:hover,
.fx.fx-donate .fyra-payment-page .dp-donate-btn-full:hover{
  transform: none;
  box-shadow: 0 8px 26px -12px rgba(0, 0, 0, .75);
  filter: brightness(1.06);
}
.fx.fx-donate .fyra-public-donation .dp-donate-btn-full:active,
.fx.fx-donate .fyra-payment-page .dp-donate-btn-full:active{
  transform: none;
  filter: brightness(.96);
}
/* display у .tips-action не объявляем: базовый flex и 100%-ширина кнопки дают
   тот же результат, а лишнее объявление display — риск на будущее. */
.fx.fx-donate .fyra-public-donation .tips-action{
  margin-top: 18px;
}

/* 4.3 DISABLED. styles.css:392 прибивает background:#F3F4F6!important —
   светлая плашка на тёмной карточке (UI-FX-LAYER-DISABLED-BUTTON-LIGHT-PLATE).
   #donateBtn отрисован disabled прямо в разметке, т.е. видна на первом экране;
   #submitPaymentBtn блокируется из JS на время запроса.
   Общее правило на весь слой + отдельное для CTA, чтобы кнопка оставалась
   в палитре стримера, просто приглушённой. filter:grayscale(.5) гасим
   (в базе он без !important). */
.fx.fx-donate button:disabled,
.fx.fx-donate button[disabled],
.fx.fx-donate .btn:disabled,
.fx.fx-donate .btn[disabled]{
  background: var(--dn-coal-2) !important;
  border-color: var(--dn-line) !important;
  color: var(--dn-dimmer) !important;
  box-shadow: none !important;
  filter: none;
  opacity: .55;
}
.fx.fx-donate .fyra-public-donation .dp-donate-btn-full:disabled,
.fx.fx-donate .fyra-public-donation .dp-donate-btn-full[disabled],
.fx.fx-donate .fyra-public-donation .dp-donate-btn-full:disabled:hover,
.fx.fx-donate .fyra-payment-page .dp-donate-btn-full:disabled,
.fx.fx-donate .fyra-payment-page .dp-donate-btn-full[disabled],
.fx.fx-donate .fyra-payment-page .dp-donate-btn-full:disabled:hover{
  background: var(--user-btn-bg) !important;
  border-color: transparent !important;
  color: var(--user-btn-color) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .42;
}

/* 4.4 Кнопка «Активные сборы средств». <button> БЕЗ класса .btn ⇒
   попадает под глобальный button:hover:not(…) весом (0,6,1), который
   возвращает подскок + янтарный глоу + рамку старой темы. Гасим все три
   свойства с !important (UI-FX-LAYER-HOVER-BORDER-IMPORTANT). */
.fx.fx-donate .fyra-public-donation .dp-toggle-btn{
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dn-ink-2);
  padding: 12px 14px;
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
}
.fx.fx-donate .fyra-public-donation .dp-toggle-btn:hover{
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--dn-line-2) !important;
  background-color: var(--dn-field-2) !important;
  color: var(--dn-ink) !important;
}
.fx.fx-donate .fyra-public-donation .dp-toggle-btn svg{
  color: var(--dn-accent);
}
.fx.fx-donate .fyra-public-donation .dp-collapsible-content{
  border-top-color: var(--dn-line);
}


/* ============================================================================
 * 5. ССЫЛКИ
 * styles.css:217 — a:not(.btn):not(…)×13, вес (0,13,1): ставит color и
 * text-decoration:underline на hover. Ни один разумный селектор слоя его не
 * перебьёт, поэтому color/text-decoration — ТОЛЬКО с !important и ОБЯЗАТЕЛЬНО
 * в обоих состояниях (UI-FX-LAYER-GLOBAL-ANCHOR-WEIGHT).
 * Ни у одной ссылки этих двух страниц нет класса из exclusion-list.
 * ============================================================================ */

/* 5.1 Оферта и политика под формой доната.
   ВНИМАНИЕ (UI-CSS-SHORTHAND-IMPORTANT-KILLS-LONGHAND): `text-decoration` — ШОРТКАТ
   (line + style + color + thickness). С `!important` он делает !important-ными ВСЕ свои
   longhand'ы, поэтому идущие НИЖЕ обычные -color/-thickness/-style молча мертвы:
   замер computed давал thickness «auto» и color = currentColor вместо заданных.
   Longhand'ам после !important-шортката тоже нужен !important.
   `text-underline-offset` в шорткат НЕ входит — он и без !important доезжает. */
.fx.fx-donate .fyra-public-donation .dp-legal-notice{
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dn-dimmer);
  margin: 14px 0 0;
}
.fx.fx-donate .fyra-public-donation .dp-legal-notice a{
  color: var(--dn-dim) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(255, 255, 255, .22) !important;
}
.fx.fx-donate .fyra-public-donation .dp-legal-notice a:hover{
  color: var(--dn-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  /* повторяем толщину: шорткат hover-правила (вес выше) вернул бы `auto`,
     и подчёркивание дёргалось бы по толщине при наведении */
  text-decoration-thickness: 1px !important;
}

/* 5.2 Оферта и политика на странице оплаты (.dp-offer-link — не из
   exclusion-list, глобальное правило по-прежнему сильнее). */
.fx.fx-donate .fyra-payment-page .dp-offer-block{
  margin: 18px 0;
  padding: 12px 14px;
  background-color: rgba(255, 255, 255, .03);
  border: 1px solid var(--dn-line);
}
.fx.fx-donate .fyra-payment-page .dp-offer-text{
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dn-dim);
}
.fx.fx-donate .fyra-payment-page .dp-offer-link{
  color: var(--dn-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  /* !important обязателен: шорткат выше уже прибил thickness (см. 5.1) */
  text-decoration-thickness: 1px !important;
}
.fx.fx-donate .fyra-payment-page .dp-offer-link:hover{
  color: #FFDA6B !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
}

/* 5.3 Ссылка на ТБанк в подписи под способами оплаты. */
.fx.fx-donate .fyra-payment-page .dp-payment-provider-note{
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dn-dimmer);
  margin: 10px 0 0;
}
.fx.fx-donate .fyra-payment-page .dp-payment-provider-note a{
  color: var(--dn-dim) !important;
  text-decoration: underline !important;
  /* !important обязателен: шорткат выше прибивал style → подчёркивание было
     сплошным вместо пунктирного в ОБОИХ состояниях (см. 5.1) */
  text-decoration-style: dotted !important;
  text-underline-offset: 2px;
}
.fx.fx-donate .fyra-payment-page .dp-payment-provider-note a:hover{
  color: var(--dn-ink-2) !important;
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
}

/* 5.4 «На главную» — это <a>, а не кнопка; exclusion-list про .fyra-back-btn
   не знает, поэтому цвет тоже через !important в обоих состояниях. */
.fx.fx-donate .fyra-payment-page .fyra-back-btn{
  gap: 7px;
  margin-bottom: 22px;
  padding: 9px 14px;
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dn-dim) !important;
  text-decoration: none !important;
}
.fx.fx-donate .fyra-payment-page .fyra-back-btn:hover{
  transform: none;
  background-color: var(--dn-field-2);
  border-color: var(--dn-line-2);
  color: var(--dn-ink) !important;
  text-decoration: none !important;
}
.fx.fx-donate .fyra-payment-page .fyra-back-btn svg{
  color: var(--dn-dim);
  width: 14px;
  height: 14px;
}


/* ============================================================================
 * 6. СТРАНИЦА ДОНАТА — служебные блоки
 * ============================================================================ */

/* 6.1 Подсказка о минимальной сумме. Табличные цифры, без округлений —
   значение печатает вьюха через toFixed(2) (UI-MONEY-ROUND-UP-DISPLAY). */
.fx.fx-donate .fyra-public-donation .dp-min-amount-hint{
  margin-top: 9px;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--dn-dim);
  opacity: 1;
}

/* 6.2 Счётчик символов сообщения. */
.fx.fx-donate .fyra-public-donation .dp-char-counter{
  font-family: var(--fm);
  font-size: 10.5px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--dn-dimmer);
}

/* 6.3 Строка выбора озвучки. */
.fx.fx-donate .fyra-public-donation .dp-message-footer{
  margin-top: 10px;
  gap: 8px;
}
.fx.fx-donate .fyra-public-donation .dp-tts-label{
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dn-dim);
}
.fx.fx-donate .fyra-public-donation .dp-tts-icon{
  color: var(--dn-dim);
  width: 14px;
  height: 14px;
}

/* 6.4 Нативный select голосов (виден, пока JS не построил дропдаун).
   display НЕ объявляем: им управляет .dp-voice-picker.is-enhanced. */
.fx.fx-donate .fyra-public-donation .dp-tts-select-inline{
  font-family: var(--fb) !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
  background: var(--dn-field) !important;
  border: 1px solid var(--dn-line) !important;
  color: var(--dn-ink) !important;
}

/* 6.5 Кастомный дропдаун голосов (строится в donation-public.js).
   Оба элемента — <button> без .btn, поэтому .fx button{font:inherit;color:inherit}
   стёр им и шрифт, и цвет; возвращаем явно (UI-FX-LAYER-ELEMENT-SELECTOR-WEIGHT). */
.fx.fx-donate .fyra-public-donation .dp-voice-trigger{
  padding: 8px 10px;
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--dn-ink);
  text-transform: none;
  letter-spacing: 0;
}
.fx.fx-donate .fyra-public-donation .dp-voice-trigger:hover{
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--dn-line-2) !important;
}
/* !important ОБЯЗАТЕЛЕН: hover-сброс выше уже прибил border-color и box-shadow,
   а курсор при открытом меню почти всегда остаётся на триггере — без
   !important состояние «открыто» не было бы видно никогда
   (UI-FX-LAYER-HOVER-RESET-ORDER). */
.fx.fx-donate .fyra-public-donation .dp-voice-picker.is-open .dp-voice-trigger{
  border-color: var(--dn-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-accent) 20%, transparent) !important;
}
.fx.fx-donate .fyra-public-donation .dp-voice-trigger__caret{
  color: var(--dn-dim);
}
.fx.fx-donate .fyra-public-donation .dp-voice-menu{
  padding: 5px;
  background-color: var(--dn-coal);
  border: 1px solid var(--dn-line-2);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.fx.fx-donate .fyra-public-donation .dp-voice-option{
  padding: 8px 9px;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--dn-ink-2);
}
.fx.fx-donate .fyra-public-donation .dp-voice-option:hover{
  background-color: rgba(255, 255, 255, .06);
  color: var(--dn-ink);
}
.fx.fx-donate .fyra-public-donation .dp-voice-option.is-active{
  background-color: color-mix(in srgb, var(--dn-accent) 14%, transparent);
  color: var(--dn-ink);
}
/* Надбавка за премиум-голос: та же денежная семантика, что и у хинта ниже. */
.fx.fx-donate .fyra-public-donation .dp-voice-option__badge{
  font-family: var(--fm);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--dn-gold);
}
.fx.fx-donate .fyra-public-donation .dp-voice-preview-btn{
  width: 26px;
  height: 26px;
  font-family: var(--fb);
  font-size: 10px;
  color: var(--dn-ink-2);
  background-color: rgba(255, 255, 255, .07);
  border: 1px solid var(--dn-line);
  text-transform: none;
  letter-spacing: 0;
}
.fx.fx-donate .fyra-public-donation .dp-voice-preview-btn:hover{
  transform: none !important;
  box-shadow: none !important;
  background-color: rgba(255, 255, 255, .13) !important;
  border-color: var(--dn-line-2) !important;
}
.fx.fx-donate .fyra-public-donation .dp-voice-preview-btn.is-playing{
  background-color: var(--dn-gold) !important;
  border-color: var(--dn-gold) !important;
  color: #15171C !important;
}

/* 6.6 Денежные хинты (надбавка за голос, цена ответа ИИ).
   display НЕ объявляем — видимостью управляет .is-hidden из JS. */
.fx.fx-donate .fyra-public-donation .dp-tts-surcharge-hint{
  margin: 8px 0 0;
  font-family: var(--fm);
  font-size: 11.5px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--dn-gold);
}
.fx.fx-donate .fyra-public-donation .dp-tts-surcharge-hint strong{
  font-weight: 700;
}
.fx.fx-donate .fyra-public-donation .dp-character-reply-label{
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--dn-ink-2);
}

/* 6.7 Карточки сборов средств (рисует donation-public.js). */
.fx.fx-donate .fyra-public-donation .donation-goal-card{
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
  padding: 12px 14px;
}
.fx.fx-donate .fyra-public-donation .donation-goal-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--dn-ink);
}
.fx.fx-donate .fyra-public-donation .donation-goal-progress{
  height: 20px;
  background-color: rgba(255, 255, 255, .08);
}
.fx.fx-donate .fyra-public-donation .donation-goal-progress-fill{
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--dn-accent) 70%, transparent), var(--dn-accent));
}
.fx.fx-donate .fyra-public-donation .donation-goal-progress-text{
  font-family: var(--fm);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* Суммы сбора: значения приходят из Math.floor(cents)/100 — вниз, не вверх. */
.fx.fx-donate .fyra-public-donation .donation-goal-amounts{
  font-family: var(--fm);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--dn-dim);
}
.fx.fx-donate .fyra-public-donation .dp-goals-loading{
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dn-dimmer);
}

/* 6.8 Бейдж статуса стрима. display НЕ объявляем: блок управляется .is-hidden
   (см. отчёт — сейчас класс никогда не снимается, блок не показывается). */
.fx.fx-donate .fyra-public-donation .dp-stream-status{
  padding: 9px 12px;
  border: 1px solid var(--dn-line);
  background-color: var(--dn-field);
}
.fx.fx-donate .fyra-public-donation .dp-stream-text{
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dn-ink-2);
}
.fx.fx-donate .fyra-public-donation .dp-stream-viewers{
  font-family: var(--fm);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--dn-dim);
  opacity: 1;
}
.fx.fx-donate .fyra-public-donation .dp-stream-indicator{
  width: 7px;
  height: 7px;
  background-color: var(--dn-dimmer);
}
.fx.fx-donate .fyra-public-donation .dp-stream-indicator.is-live{
  background-color: var(--dn-live);
}
.fx.fx-donate .fyra-public-donation .dp-stream-indicator.is-offline{
  background-color: var(--dn-dimmer);
}

/* 6.9 Заглушка «Приём донатов временно недоступен». */
.fx.fx-donate .fyra-public-donation .dp-donations-disabled{
  padding: 34px 20px;
  color: var(--dn-dim);
}
.fx.fx-donate .fyra-public-donation .dp-donations-disabled p{
  font-family: var(--fm);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* ============================================================================
 * 7. СТРАНИЦА ОПЛАТЫ — служебные блоки
 * ⚠ Каркас .fyra-payment-page/.fyra-payment-card ОБЩИЙ со страницами результата
 * (/donate/success, /donate/fail), и они ТОЖЕ обёрнуты в .fx.fx-donate — их
 * обёртки несут общий класс семейства (+ .fx-donate-result), а красит их
 * соседний public/css/fyra-donate-2.css. Значит любое правило под
 * `.fx.fx-donate .fyra-payment-page …` матчится и там
 * (UI-FX-LAYER-FAMILY-CLASS-CROSS-FILE).
 * Аудит пересечений (замер в браузере, 2026-07-28): реально совпадает только
 * .fyra-payment-card — прочие адресаты (.dp-… , .fyra-payment-title,
 * .fyra-back-btn) на страницах результата отсутствуют. Карточка ниже сужена
 * через :not(.fx-donate-result); при добавлении новых правил в раздел проверять
 * `document.querySelectorAll(селектор)` на success/fail.
 * ============================================================================ */

/* 7.1 Карточка платежа: фон оставляем как есть (совпадает с дефолтным
   пресетом карточки доната — не рвём визуальную связку воронки),
   уточняем только рамку и поля.
   :not(.fx-donate-result) — чтобы правило НЕ доставало до карточки экранов
   результата: там поля задаёт fyra-donate-2.css, и без сужения ему приходится
   держать селектор в (0,5,0) только ради этой строки. */
.fx.fx-donate:not(.fx-donate-result) .fyra-payment-page .fyra-payment-card{
  border: 1px solid var(--dn-line);
  padding: 28px;
}

/* 7.2 Способы оплаты. */
.fx.fx-donate .fyra-payment-page .dp-payment-methods-section{
  margin-bottom: 20px;
}
.fx.fx-donate .fyra-payment-page .dp-payment-methods-grid{
  gap: 10px;
}
.fx.fx-donate .fyra-payment-page .dp-payment-card{
  min-height: 112px;
  padding: 16px 10px;
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
  transition: background-color .15s, border-color .15s;
}
.fx.fx-donate .fyra-payment-page .dp-payment-card:hover{
  transform: none;
  background-color: var(--dn-field-2);
  border-color: var(--dn-line-2);
}
.fx.fx-donate .fyra-payment-page .dp-payment-card.is-selected{
  background-color: color-mix(in srgb, var(--dn-gold) 12%, transparent);
  border-color: var(--dn-gold);
  box-shadow: none;
}
.fx.fx-donate .fyra-payment-page .dp-payment-card-icon{
  min-height: 38px;
  margin-bottom: 9px;
  color: var(--dn-ink-2);
}
/* Название способа не переводим в капс: «Банковская карта» в две строки
   ломает трёхколоночную сетку. */
.fx.fx-donate .fyra-payment-page .dp-payment-card-title{
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--dn-ink);
}
.fx.fx-donate .fyra-payment-page .dp-payment-card-subtitle{
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--dn-dim);
}

/* 7.3 Блок «покрыть комиссию» и его расшифровка. */
.fx.fx-donate .fyra-payment-page .dp-checkbox-section{
  margin-bottom: 20px;
  padding: 14px 16px;
  background-color: var(--dn-field);
  border: 1px solid var(--dn-line);
}
.fx.fx-donate .fyra-payment-page .dp-cover-explain{
  margin-top: 12px;
  padding: 12px 13px;
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid var(--dn-line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dn-ink-2);
}
.fx.fx-donate .fyra-payment-page .dp-cover-explain-title{
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dn-dim);
  margin-bottom: 9px;
}
.fx.fx-donate .fyra-payment-page .dp-cover-explain-row{
  margin-bottom: 5px;
  font-size: 12.5px;
}
/* Проценты и суммы — моноширинные табличные; значения печатает
   donation-payment.js через toFixed(2), округления вверх нет. */
.fx.fx-donate .fyra-payment-page .dp-cover-explain-row > span:last-child{
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  color: var(--dn-ink);
}
.fx.fx-donate .fyra-payment-page .dp-cover-explain-note{
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--dn-dim);
  opacity: 1;
}

/* 7.4 «Детали платежа» — денежная сводка воронки.
   Все цифры пишет JS с точностью до копейки; слой только оформляет.
   display у строк НЕ объявляем: их показывают is-hidden/is-visible-flex. */
.fx.fx-donate .fyra-payment-page .dp-summary-section{
  margin-bottom: 20px;
  padding: 18px 20px;
  background-color: color-mix(in srgb, var(--dn-gold) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--dn-gold) 32%, transparent);
}
.fx.fx-donate .fyra-payment-page .dp-summary-title{
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dn-gold) 82%, #FFFFFF);
  margin-bottom: 14px;
}
.fx.fx-donate .fyra-payment-page .dp-summary-row{
  margin-bottom: 8px;
  gap: 12px;
  font-size: 13px;
  color: var(--dn-ink-2);
}
.fx.fx-donate .fyra-payment-page .dp-summary-row > span:last-child{
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dn-ink);
}
.fx.fx-donate .fyra-payment-page .dp-summary-total{
  padding-top: 13px;
  margin-top: 13px;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--dn-gold) 32%, transparent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dn-ink);
  align-items: baseline;
}
.fx.fx-donate .fyra-payment-page .dp-summary-total > span:last-child{
  font-family: var(--fm);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dn-gold);
}

/* 7.5 Контейнер SmartCaptcha. Отступ переехал сюда из мёртвого
   style="margin:12px 0" (CSP style-src без 'unsafe-inline' его не применяет).
   Дублируется в <style nonce> вьюхи, чтобы работать и без слоя. */
.fx.fx-donate .fyra-payment-page .dp-captcha-container{
  margin: 12px 0;
}


/* ============================================================================
 * 8. АДАПТИВ
 * ============================================================================ */
@media (max-width: 640px){
  .fx.fx-donate .fyra-public-donation .fyra-donation-container{
    padding: 76px 14px 56px;
  }
  .fx.fx-donate .fyra-public-donation .dp-card-header .dp-hero-title{
    font-size: 20px;
  }
  .fx.fx-donate .fyra-public-donation .amounts .amount-btn{
    padding: 9px 10px;
    font-size: 12px;
  }
  .fx.fx-donate .fyra-public-donation #donationAmountInput{
    font-size: 18px !important;
  }
  /* :not(.fx-donate-result) — как в 7.1: мобильные поля карточки экранов
     результата задаёт fyra-donate-2.css, наш файл туда не лезет. */
  .fx.fx-donate:not(.fx-donate-result) .fyra-payment-page .fyra-payment-card{
    padding: 22px 18px;
  }
  .fx.fx-donate .fyra-payment-page .dp-summary-section{
    padding: 16px;
  }
  .fx.fx-donate .fyra-payment-page .dp-summary-total > span:last-child{
    font-size: 19px;
  }
}
