/* GH-MARKER: ready for GitHub */
/* Fyra Donate v4 «Огонь из логотипа», ВТОРОЙ файл донатной воронки.
   Покрывает три страницы:
     • /donate/success  — views/pages/donation_success.ejs
     • /donate/fail     — views/pages/donation_fail.ejs
       обёртка: <div class="fx fx-donate fx-donate-result fx-donate-ok|fx-donate-err">
     • /unsubscribe     — views/pages/unsubscribe.ejs  (публичная, переход из письма)
       обёртка: <div class="fx fx-donate fx-donate-note">

   ⚠ ИЗОЛЯЦИЯ ОТ fyra-donate.css.
   Каркас `.fyra-payment-page` / `.fyra-payment-card` общий у экранов результата и у
   страницы оплаты (donation_payment.ejs), которая красится в public/css/fyra-donate.css
   под селектором `.fx.fx-donate`. Поэтому в ЭТОМ файле НЕ ДОПУСКАЕТСЯ ни одного правила
   под `.fx.fx-donate` — только под `.fx.fx-donate-result` / `.fx.fx-donate-note`.
   Обратное тоже верно: правила соседнего файла не должны цеплять наши модификаторы.
   Проверка перед коммитом: все селекторы файла начинаются с одного из двух корней.

   Механика в два слоя (как в fyra-pages.css):
   (1) Ремап «сайтовых» токенов (--card/--text/--border/--link/--gradient-button…),
       которые уже потребляют styles.css и inline-<style> самих вьюх, на fire-палитру
       из fyra-next.css (.fx). Значения берём через var(--coal, #101216) — с литеральным
       фоллбэком, чтобы страница не «облысела», если fyra-next.css не подключён
       (UI-CSS-VAR-UNDEFINED-SHORTHAND: необъявленный токен стирает свойство целиком).
   (2) Точечная типографика v4: заголовки --fd, тело --fb, ID транзакции --fm с
       tabular-nums, прямые углы 2px, тонкие рамки --line, огонь только в CTA и хайрлайне.

   ⚠ Пользовательской кастомизации (--user-*) на этих трёх страницах НЕТ: page_style
   стримера живёт только на donation_public. Если она сюда когда-нибудь придёт —
   читать переменные --user-*, а не подменять их фиксированными цветами.

   ⚠ ПРЕДПОСЫЛКА ПОДКЛЮЧЕНИЯ: файл рассчитан на то, что для этих трёх вьюх layout.ejs
   грузит шрифты + fyra-next.css (флаг isFxPage) и затем этот файл. Без fyra-next.css
   токены .fx не объявлены и работают только литеральные фоллбэки. */


/* ══════════════════════════════════════════════════════════════════
   1. РЕМАП ТОКЕНОВ САЙТА → FIRE-ПАЛИТРА
   Объявляем ТОЛЬКО на корнях страниц (не на .fx и не на :root) — иначе
   свойства, которые сегодня молча не применяются, оживут в других разделах.
   ══════════════════════════════════════════════════════════════════ */
.fx.fx-donate-result{
  --card: var(--coal, #101216);
  --bg: var(--void, #090A0D);
  --bg-elev: var(--coal-2, #171A20);
  --bg-hover: var(--coal-2, #171A20);
  --text: var(--paper, #ECEEF2);
  --muted: var(--dim, #878C97);
  --border: var(--line, #23252C);
  --primary: var(--flame, #EC2006);
  --accent: var(--flame, #EC2006);
  --neon-blue: var(--flame, #EC2006);
  --link: var(--gold, #FFC61A);
  --link-hover: var(--gold, #FFC61A);
  --link-visited: var(--gold, #FFC61A);
  --amber-light: var(--gold, #FFC61A);
  --amber-dark: var(--orange, #F26610);
  --success-text: var(--ok, #47C08A);
  --error-text: var(--orange, #F26610);
  --gradient-warm: var(--fire-soft, linear-gradient(180deg,#F7791E,#E01808));
  --gradient-button: var(--fire-soft, linear-gradient(180deg,#F7791E,#E01808));
  --glow: 0 0 0 2px rgba(236,32,6,.22);
  --shadow-card: none;
  --font-heading: var(--fd, 'Unbounded', system-ui, sans-serif);
  --font-body: var(--fb, 'Onest', system-ui, sans-serif);
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
}
.fx.fx-donate-note{
  --card: var(--coal, #101216);
  --bg: var(--void, #090A0D);
  --bg-elev: var(--coal-2, #171A20);
  --bg-hover: var(--coal-2, #171A20);
  --text: var(--paper, #ECEEF2);
  --muted: var(--dim, #878C97);
  --border: var(--line, #23252C);
  --primary: var(--flame, #EC2006);
  --accent: var(--flame, #EC2006);
  --neon-blue: var(--flame, #EC2006);
  --link: var(--gold, #FFC61A);
  --link-hover: var(--gold, #FFC61A);
  --link-visited: var(--gold, #FFC61A);
  --amber-light: var(--gold, #FFC61A);
  --amber-dark: var(--orange, #F26610);
  --success-text: var(--ok, #47C08A);
  --error-text: var(--orange, #F26610);
  --gradient-warm: var(--fire-soft, linear-gradient(180deg,#F7791E,#E01808));
  --gradient-button: var(--fire-soft, linear-gradient(180deg,#F7791E,#E01808));
  --glow: 0 0 0 2px rgba(236,32,6,.22);
  --shadow-card: none;
  --font-heading: var(--fd, 'Unbounded', system-ui, sans-serif);
  --font-body: var(--fb, 'Onest', system-ui, sans-serif);
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
}


/* ══════════════════════════════════════════════════════════════════
   2. НЕЙТРАЛИЗАЦИИ ОБЩИХ ПРАВИЛ СЛОЯ .fx
   ══════════════════════════════════════════════════════════════════ */

/* ⚠ 2.0 СОСЕДНИЙ СЛОЙ НА ТОЙ ЖЕ ОБЁРТКЕ (UI-FX-LAYER-FAMILY-CLASS-CROSS-FILE).
   Обёртка несёт класс `fx-donate` (как и страницы оплаты/доната), поэтому часть
   правил fyra-donate.css достаёт и до наших страниц. Список ПОЛНЫЙ и снят
   эмпирически (перебор cssRules соседнего файла + querySelectorAll по нашей
   разметке, плюс диф computed-стилей при отключении соседнего файла):

     1. .fx.fx-donate{ background:transparent; --dn-*: …13 токенов }   (0,2,0)
        → перебиваем: 2.1 даёт (0,3,0) на экранах результата; на отписке значение
          совпадает (transparent), поэтому хватает равного веса. Токены --dn-*
          наследуются внутрь наших страниц, но их никто из наших правил не читает.
     2. .fx.fx-donate::before{ content:none; display:none }             (0,2,0)
        → 2.2 дублирует content:none тем же весом — итог не зависит от порядка.
     3. .fx.fx-donate > *{ position:static; z-index:auto }              (0,2,1)
        → ЕДИНСТВЕННОЕ правило соседнего файла, которое реально меняет computed
          на наших страницах (секция была бы relative/z-index:1 от `.fx > *`).
          Принято осознанно: прямой ребёнок ровно один, position:fixed/sticky
          внутри нет, зерно погашено — перекрывать нечего, static = исходное
          поведение страницы до слоя.
     4. .fx.fx-donate :focus-visible{ outline:2px solid var(--dn-accent) } (0,3,0)
        → дублируем то же значение в 2.5, чтобы не зависеть от чужого файла.
     5. .fx.fx-donate button:disabled|[disabled]                        (0,2,1)
        и .fx.fx-donate .btn:disabled|[disabled]                        (0,3,0)
        → у нас (0,3,1) и (0,3,0) соответственно: первое перебивается весом,
          второе — равный вес + более поздний файл (порядок подключения задан
          в layout.ejs явно). Значения расходятся только оттенками служебных
          токенов (--dn-line vs --line), обе плашки одинаково тёмные.
     6. .fx.fx-donate .fyra-payment-page .fyra-payment-card{ border; padding:28px } (0,4,0)
        и то же в @media(max-width:640px){ padding:22px 18px }          (0,4,0)
        → перебиваются нашим (0,5,0) в 3.1/3.9 на ВСЕХ ширинах: @media
          специфичности не добавляет, поэтому чужое мобильное правило на наших
          страницах мертво. С 2026-07-28 соседний файл вдобавок сам исключил наш
          корень (`.fx.fx-donate:not(.fx-donate-result) …`) — правило перестало
          матчиться совсем. Наш вес держит итог в любом случае и снимает
          зависимость от того, останется ли чужой `:not()` на месте.

   Больше ничего не пересекается: остальные селекторы соседнего файла содержат
   .fyra-public-donation, .dp-* или .fyra-payment-title/.fyra-back-btn — ни того,
   ни другого в нашей разметке нет.
   Обратной протечки нет: ни одного правила под `.fx.fx-donate` в этом файле. */

/* 2.1 `.fx{ background: var(--void) }`.
   • Экраны результата — служебный полноэкранный экран сервиса, собственного фона у
     .fyra-payment-page нет → тёмный фон слоя ОСТАВЛЯЕМ. Специфичность (0,3,0) через
     модификатор состояния — чтобы не проиграть `.fx.fx-donate{background:transparent}`.
   • Отписка — обычная страница внутри header/footer и main.container: собственный фон
     даёт body, а непрозрачный блок слоя дал бы прямоугольный шов по краям контейнера
     (--void #090A0D против body #0F1419) → возвращаем transparent (совпадает с
     соседним слоем, поэтому хватает (0,2,0)). */
.fx.fx-donate-result.fx-donate-ok,
.fx.fx-donate-result.fx-donate-err{ background: var(--void, #090A0D); }
.fx.fx-donate-note{ background: transparent; }

/* 2.2 `.fx::before{ position:fixed; inset:0 }` — полноэкранное зерно. Гасим на ОБЕИХ
   страницах.
   • Отписка: страница живёт в общем каркасе, фикс-плёнка легла бы поверх шапки, футера
     и всего документа.
   • Результат оплаты: сам по себе служебный полноэкранный экран зерно выдержал бы, но
     соседний слой уже гасит его на общей обёртке (`.fx.fx-donate::before{content:none}`,
     тот же вес 0,2,0). Держать «включено» здесь означало бы зависимость от порядка
     подключения файлов; воскрешать зерно копией data-URI — дублирование ради текстуры,
     которой на одной центрированной карточке почти не видно. Решение: гасим явно. */
.fx.fx-donate-result::before{ content: none; }
.fx.fx-donate-note::before{ content: none; }

/* 2.3 `.fx > *{ position:relative; z-index:1 }`.
   Прямой ребёнок обёртки на всех трёх вьюхах ровно один — <section> в потоке, без
   position:fixed/sticky/absolute. Возвращать позиционирование нечему.
   Единственный fixed-элемент (#theme-toggle) — ВНУКОВ уровень и с 2026-07-28 не
   рендерится (мёртвая кнопка темы), см. TEMP-2026-07-28 во вьюхах. */

/* 2.4 `button:disabled` в styles.css прибит !important и даёт СВЕТЛУЮ плашку #F3F4F6.
   Закрываем одним общим правилом на оба корня — disabled может появиться у любой
   кнопки, которую скрипт заблокирует на время запроса (UI-FX-LAYER-DISABLED-BUTTON-LIGHT-PLATE).
   Обязательно гасим filter: grayscale(.5), иначе тёмный фон выцветает. */
.fx.fx-donate-result .fyra-btn:disabled,
.fx.fx-donate-result .fyra-btn[disabled],
.fx.fx-donate-result button:disabled,
.fx.fx-donate-result button[disabled],
.fx.fx-donate-note .btn:disabled,
.fx.fx-donate-note .btn[disabled],
.fx.fx-donate-note button:disabled,
.fx.fx-donate-note button[disabled]{
  background: var(--coal-2, #171A20) !important;
  border-color: var(--line, #23252C) !important;
  color: var(--dimmer, #565B66) !important;
  box-shadow: none !important;
  filter: none;
  opacity: .55;
}
/* кнопку, которую можно заблокировать, мышью всё равно водят → дублируем :hover */
.fx.fx-donate-result .fyra-btn:disabled:hover,
.fx.fx-donate-result button:disabled:hover,
.fx.fx-donate-note .btn:disabled:hover,
.fx.fx-donate-note button:disabled:hover{
  background: var(--coal-2, #171A20) !important;
  border-color: var(--line, #23252C) !important;
  color: var(--dimmer, #565B66) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 2.5 Кольцо клавиатурного фокуса. Базовое `.fx :focus-visible` (fyra-next.css,
   вес 0,2,0) рисует его цветом --flame — кислотно-красный на финальном экране
   оплаты. Соседний слой уже переводит его на золото правилом
   `.fx.fx-donate :focus-visible` (0,3,0), но опираться на ЧУЖОЙ файл нельзя:
   правка в нём молча вернула бы нашим страницам красное кольцо
   (UI-FX-LAYER-FAMILY-CLASS-CROSS-FILE — «продублировать то же значение,
   тогда порядок и содержимое соседнего файла не важны»).
   Значение совпадает намеренно: там var(--dn-accent) = var(--user-accent, #FFC61A),
   а --user-accent вне страницы стримера не объявлен → то же золото. */
.fx.fx-donate-result :focus-visible,
.fx.fx-donate-note :focus-visible{
  outline: 2px solid var(--gold, #FFC61A);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════
   3. ЭКРАНЫ РЕЗУЛЬТАТА ОПЛАТЫ (/donate/success, /donate/fail)
   Финал денежной воронки: донатер попадает сюда редиректом T-Bank.
   Тон — сдержанный: без «праздничного» неона на успехе и без агрессивного
   красного во весь экран на отказе.
   ══════════════════════════════════════════════════════════════════ */

/* 3.1 Каркас. Все три правила ниже перебивают одноклассовые (0,1,0) объявления из
   responsive.css / inline-styles.css и inline-<style> самой вьюхи. */
.fx.fx-donate-result .fyra-payment-page{
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx.fx-donate-result .fyra-payment-container{
  width: 100%;
  max-width: 460px;
  padding: 56px 20px;
  margin: 0 auto;
}
/* Стекло v3 (blur + скруглённые 16px + белая рамка) → плоская карточка v4.
   backdrop-filter гасим явно: в inline-<style> вьюхи он объявлен отдельным longhand
   и шорткатом background не сбрасывается.
   ⚠ Селектор намеренно перечисляет ВЕСЬ путь page > container > card (0,5,0): в
   fyra-donate.css есть `.fx.fx-donate .fyra-payment-page .fyra-payment-card` (0,4,0)
   с border и padding:28px, и он матчится на наших страницах тоже (обёртка несёт
   общий класс fx-donate). Короткий (0,3,0) молча проиграл бы ему поля карточки. */
.fx.fx-donate-result .fyra-payment-page .fyra-payment-container .fyra-payment-card{
  position: relative;
  overflow: hidden;
  background: var(--coal, #101216);
  border: 1px solid var(--line, #23252C);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 40px 30px 34px;
  text-align: left;
}
/* хайрлайн-акцент по верхней кромке; цвет — по состоянию (см. 3.6/3.7) */
.fx.fx-donate-result .fyra-payment-card::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  pointer-events: none;
}

/* 3.2 Декоративные «пузыри» на успехе (зелёный/янтарный/синий, float-анимация) —
   это язык v3. В v4 их роль выполняет хайрлайн карточки. Разметку не удаляем
   (правило проекта «неиспользуемый код не удалять») — гасим стилем.
   Утилиты видимости на этих узлах нет, объявлять display здесь безопасно. */
.fx.fx-donate-result .result-decor{ display: none; }

/* 3.3 Иконка результата: круг 88px с bounce-анимацией → квадратная плашка 56px
   с прямыми углами и мягким появлением. Ключевой кадр fadeInUp объявлен в
   inline-<style> обеих вьюх, имена @keyframes глобальны для документа. */
.fx.fx-donate-result .result-icon{
  width: auto;
  height: auto;
  margin: 0 0 22px;
  animation: fadeInUp .45s ease both;
}
.fx.fx-donate-result .result-icon-circle{
  width: 56px;
  height: 56px;
  border-radius: 2px;
  border: 1px solid var(--line-2, #363A44);
  background: var(--void, #090A0D);
}
.fx.fx-donate-result .result-icon-circle svg{
  width: 26px;
  height: 26px;
}

/* 3.4 Типографика */
.fx.fx-donate-result .result-title{
  margin: 0 0 10px;
  font-family: var(--fd, 'Unbounded', system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(22px, 4.6vw, 28px);
  line-height: 1.06;
  letter-spacing: -.04em;
  color: var(--paper, #ECEEF2);
  text-wrap: balance;
}
.fx.fx-donate-result .result-subtitle{
  margin: 0 0 24px;
  font-family: var(--fb, 'Onest', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dim, #878C97);
}

/* 3.5 Блок ID транзакции. Номер — моноширинный с tabular-nums.
   `tx` приходит из query-строки и может быть произвольно длинным →
   разрешаем перенос, иначе карточка расползается по горизонтали. */
.fx.fx-donate-result .result-tx{
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--void, #090A0D);
  border: 1px solid var(--line, #23252C);
  border-radius: 2px;
  font-family: var(--fm, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dimmer, #565B66);
  text-align: left;
}
.fx.fx-donate-result .result-tx code{
  display: block;
  margin-top: 6px;
  font-family: var(--fm, 'JetBrains Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper, #ECEEF2);
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* 3.6 Состояние «успех» — приглушённая зелень из палитры слоя (--ok), огонь только
   в хайрлайне карточки. Никакого неонового свечения. */
.fx.fx-donate-result.fx-donate-ok .fyra-payment-card::before{
  background: var(--fire, linear-gradient(180deg,#FFD23A 0%,#F7791E 34%,#EC2006 68%,#C20711 100%));
}
.fx.fx-donate-result.fx-donate-ok .result-icon-circle{
  border-color: rgba(71,192,138,.34);
  background: rgba(71,192,138,.09);
}
/* stroke в SVG задан презентационным атрибутом (#10B981) — CSS его перебивает */
.fx.fx-donate-result.fx-donate-ok .result-icon-circle svg{
  stroke: var(--ok, #47C08A);
}

/* 3.7 Состояние «отказ» — тёплый оранжевый вместо тревожного красного: человек
   только что не смог заплатить, усугублять не нужно. Заголовок остаётся --paper. */
.fx.fx-donate-result.fx-donate-err .fyra-payment-card::before{
  background: rgba(242,102,16,.55);
}
.fx.fx-donate-result.fx-donate-err .result-icon-circle{
  border-color: rgba(242,102,16,.32);
  background: rgba(242,102,16,.08);
}
/* stroke в SVG задан презентационным атрибутом (#EF4444) — CSS его перебивает */
.fx.fx-donate-result.fx-donate-err .result-icon-circle svg{
  stroke: var(--orange, #F26610);
}
/* Подсказка «что делать дальше»: жёлтый маркер слева, спокойный фон */
.fx.fx-donate-result .result-info-block{
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--void, #090A0D);
  border: 1px solid var(--line, #23252C);
  border-left: 2px solid var(--gold, #FFC61A);
  border-radius: 2px;
  font-family: var(--fb, 'Onest', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--steel, #C6CAD1);
  text-align: left;
}

/* 3.8 Кнопки.
   ВАЖНО (UI-FX-LAYER-GLOBAL-ANCHOR-WEIGHT): «На главную» — это <a class="fyra-btn
   fyra-btn-primary">, а `.fyra-btn*` НЕ входит в exclusion-list глобального
   `a:not(.btn):not(.btn-primary)…` (вес 0,13,1). Поэтому color и text-decoration
   задаём ТОЛЬКО с !important и обязательно в ОБОИХ состояниях.
   ВАЖНО (UI-FX-LAYER-ELEMENT-SELECTOR-WEIGHT): `.fx button{font:inherit;color:inherit}`
   весит (0,1,1) и бьёт `.fyra-btn-secondary` (0,1,0) — типографику кнопки-<button>
   пиним явно. */
.fx.fx-donate-result .result-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx.fx-donate-result .result-actions .fyra-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 13px 22px;
  border-radius: 2px;
  font-family: var(--fm, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-primary,
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-primary:visited{
  background: var(--fire-soft, linear-gradient(180deg,#F7791E,#E01808));
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff !important;
  text-decoration: none !important;
}
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-primary:hover{
  background: linear-gradient(180deg,#FF8A2E,#EC2006);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  transform: none;
  color: #fff !important;
  text-decoration: none !important;
}
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-secondary{
  background: transparent;
  border: 1px solid var(--line-2, #363A44);
  box-shadow: none;
  color: var(--paper, #ECEEF2);
}
/* Клавиатурный фокус «Попробовать снова». Это <button> БЕЗ класса из
   exclusion-list глобального
   `button:focus-visible:not(.fyra-tab-btn):not(.btn):not(.btn-icon):not(.btn-balance):not(.btn-user)`
   (styles.css, вес 0,6,1) — оно ставит `outline:none` и вместо кольца рисует
   `box-shadow: 0 0 0 3px rgba(255,184,77,.2)` + `border-color: var(--amber-light)`
   старой темы. Замерено в браузере: у соседней ссылки «На главную» (это <a>,
   правило её не трогает) кольцо золотое, а у этой кнопки его НЕТ вовсе —
   клавиатурная навигация на экране отказа теряет индикатор фокуса.
   Селектор (0,6,0) легче (0,6,1), поэтому все три свойства — с !important
   (UI-FX-LAYER-SECTION-BUTTON-ALIAS + UI-FX-LAYER-HOVER-BORDER-IMPORTANT).
   Стоит ВЫШЕ правила :hover: при одинаковом весе (0,6,0) и одновременных
   фокусе+наведении выигрывает более позднее — то есть hover, как и было. */
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-secondary:focus-visible{
  outline: 2px solid var(--gold, #FFC61A) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
  border-color: var(--line-2, #363A44) !important;
}
/* Глобальное `button:hover:not(.fyra-tab-btn):not(.btn):not(.btn-icon):not(.btn-balance)
   :not(.btn-user):not(summary)` весит (0,6,1) и ставит transform + border-color +
   box-shadow старой темы. «Попробовать снова» — <button> без класса из этого списка,
   поэтому гасим ВСЕ три свойства с !important (UI-FX-LAYER-HOVER-BORDER-IMPORTANT). */
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-secondary:hover{
  background: transparent !important;
  border-color: var(--paper, #ECEEF2) !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--paper, #ECEEF2) !important;
}
/* Огненная кнопка задаёт `color:#fff !important` весом (0,5,0) и потому бьёт
   общий disabled-блок 2.4 (0,3,0) — !important на !important решается
   специфичностью. Замерено в браузере: у заблокированной кнопки фон и рамка
   становятся тёмными, а текст остаётся БЕЛЫМ, то есть кнопка выглядит рабочей.
   Дублируем состояние тем же весом, что и сама кнопка
   (UI-FX-LAYER-DISABLED-BUTTON-LIGHT-PLATE). На странице отписки эта же ловушка
   уже закрыта в блоке 4.4 — здесь была асимметрия.
   `[disabled]` обязателен отдельно: «На главную» — это <a>, псевдокласс
   :disabled на ссылку не действует, только атрибутный селектор. */
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-primary:disabled,
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-primary[disabled],
.fx.fx-donate-result .result-actions .fyra-btn.fyra-btn-primary:disabled:hover{
  background: var(--coal-2, #171A20) !important;
  border-color: var(--line, #23252C) !important;
  color: var(--dimmer, #565B66) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none;
  opacity: .55;
}

/* 3.9 Мобильный брейкпоинт.
   ⚠ Селектор карточки ОБЯЗАН повторять полный путь page > container > card (0,5,0),
   как в 3.1. @media специфичности не добавляет: короткий `.fx.fx-donate-result
   .fyra-payment-card` (0,3,0) проигрывал бы собственному базовому правилу 3.1 (0,5,0),
   и мобильные поля не применялись бы НИКОГДА. Заодно этот же вес нужен против
   `.fx.fx-donate .fyra-payment-page .fyra-payment-card{padding:22px 18px}` (0,4,0)
   из @media(max-width:640px) соседнего fyra-donate.css — иначе поля наших экранов
   на мобильном задавал бы чужой файл. */
@media (max-width: 520px){
  .fx.fx-donate-result .fyra-payment-container{ padding: 32px 14px; }
  .fx.fx-donate-result .fyra-payment-page .fyra-payment-container .fyra-payment-card{
    padding: 32px 22px 28px;
  }
  .fx.fx-donate-result .result-title{ font-size: 22px; }
}


/* ══════════════════════════════════════════════════════════════════
   4. СТРАНИЦА ОТПИСКИ (/unsubscribe)
   Публичная, переход из письма — человек мог вообще не открывать сервис.
   Вся вёрстка на легаси-классах .card/.btn, собственных fyra-* классов нет.
   Скоуп — ТОЛЬКО .fx.fx-donate-note (UI-FX-LAYER-SHARED-WRAPPER-SCOPE):
   .card/.btn/.content встречаются во всех разделах сайта, `.fx.fx-donate <класс>`
   утёк бы и на страницу оплаты соседнего агента.
   ══════════════════════════════════════════════════════════════════ */

/* 4.1 Карточка. В styles.css `.card{background:…!important; border:…!important}` —
   специфичность их не перебьёт (CSS-OVERRIDE-CHECK-IMPORTANT-IN-BASE), поэтому фон и
   рамку дублируем с !important. Остальные свойства !important не имеют. */
.fx.fx-donate-note .unsubscribe-card{
  max-width: 520px;
  margin: 48px auto;
  padding: 36px 32px;
  text-align: left;
  background: var(--coal, #101216) !important;
  border: 1px solid var(--line, #23252C) !important;
  border-radius: 2px;
  box-shadow: none;
  transition: none;
}
/* `.card::before` рисует маской тёплую градиентную рамку и проявляет её на :hover,
   `.card:hover` добавляет подскок и тень. На статичной информационной карточке v4
   это лишнее — гасим оба (ни у одного из свойств в базе нет !important). */
.fx.fx-donate-note .unsubscribe-card::before{ content: none; }
.fx.fx-donate-note .unsubscribe-card:hover{
  transform: none;
  box-shadow: none;
}

/* 4.2 Иконка-глиф (✉ / ✓ / ✗): было 64px «в воздухе» → плашка 52px с прямыми углами,
   единый язык с экранами результата оплаты. */
.fx.fx-donate-note .unsubscribe-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 20px;
  border: 1px solid var(--line-2, #363A44);
  border-radius: 2px;
  background: var(--void, #090A0D);
  font-size: 24px;
  line-height: 1;
}
.fx.fx-donate-note .unsubscribe-icon.confirm{
  color: var(--gold, #FFC61A);
  border-color: rgba(255,198,26,.30);
  background: rgba(255,198,26,.07);
}
.fx.fx-donate-note .unsubscribe-icon.success{
  color: var(--ok, #47C08A);
  border-color: rgba(71,192,138,.34);
  background: rgba(71,192,138,.09);
}
.fx.fx-donate-note .unsubscribe-icon.error{
  color: var(--orange, #F26610);
  border-color: rgba(242,102,16,.32);
  background: rgba(242,102,16,.08);
}

/* 4.3 Типографика */
.fx.fx-donate-note .unsubscribe-title{
  margin: 0 0 12px;
  font-family: var(--fd, 'Unbounded', system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(21px, 4.4vw, 26px);
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--paper, #ECEEF2);
  text-wrap: balance;
}
.fx.fx-donate-note .unsubscribe-message{
  margin: 0 0 14px;
  font-family: var(--fb, 'Onest', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel, #C6CAD1);
  opacity: 1;
}
.fx.fx-donate-note .unsubscribe-message strong{
  color: var(--paper, #ECEEF2);
  font-weight: 600;
}
.fx.fx-donate-note .unsubscribe-note{
  margin: 0 0 26px;
  padding-left: 12px;
  border-left: 2px solid var(--line-2, #363A44);
  font-family: var(--fb, 'Onest', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim, #878C97);
  opacity: 1;
}

/* 4.4 Кнопки.
   Здесь ссылки и сабмит носят класс `.btn`, который ВХОДИТ и в exclusion-list
   глобального `a:not(.btn)…` (0,13,1), и в `button:hover:not(…):not(.btn)…` (0,6,1) —
   значит эти два правила сюда не достают. Но достают три других:
     • `.btn{color:var(--text)!important}` — цвет только через !important;
     • `.fx .btn{padding:14px 24px; font-family:var(--fm); text-transform:uppercase}` (0,2,0)
       и `.unsubscribe-actions .btn{…}` из inline-<style> вьюхи (0,2,0, но НИЖЕ по
       документу) — геометрия пиниться должна весом не меньше (0,4,0);
     • `.fx button{font:inherit}` (0,1,1) сбрасывает font-family/size/weight у сабмита. */
.fx.fx-donate-note .unsubscribe-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.fx.fx-donate-note .unsubscribe-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 20px;
  border: 1px solid var(--line-2, #363A44);
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  font-family: var(--fm, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper, #ECEEF2) !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.fx.fx-donate-note .unsubscribe-actions .btn:not(.btn-primary){
  background: transparent;
  border: 1px solid var(--line-2, #363A44);
  color: var(--paper, #ECEEF2) !important;
}
.fx.fx-donate-note .unsubscribe-actions .btn:hover{
  transform: none;
  background: transparent;
  border-color: var(--paper, #ECEEF2);
  box-shadow: none;
  color: var(--paper, #ECEEF2) !important;
}
.fx.fx-donate-note .unsubscribe-actions .btn.btn-primary,
.fx.fx-donate-note .unsubscribe-actions .btn.btn-primary:visited{
  background: var(--fire-soft, linear-gradient(180deg,#F7791E,#E01808));
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff !important;
}
.fx.fx-donate-note .unsubscribe-actions .btn.btn-primary:hover{
  transform: none;
  background: linear-gradient(180deg,#FF8A2E,#EC2006);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  color: #fff !important;
}
/* Два правила выше весят (0,4,0) и с !important на color перебивают общий
   disabled-блок 2.4 (0,3,0) — «Подтвердить отписку» в заблокированном состоянии
   осталась бы с белым текстом огненной кнопки. Дублируем состояние тем же весом
   (UI-FX-LAYER-DISABLED-BUTTON-LIGHT-PLATE + UI-FX-LAYER-SECTION-BUTTON-ALIAS:
   кнопке, по которой водят мышью, нужен и `:disabled:hover`). */
.fx.fx-donate-note .unsubscribe-actions .btn.btn-primary:disabled,
.fx.fx-donate-note .unsubscribe-actions .btn.btn-primary[disabled],
.fx.fx-donate-note .unsubscribe-actions .btn.btn-primary:disabled:hover{
  background: var(--coal-2, #171A20) !important;
  border-color: var(--line, #23252C) !important;
  color: var(--dimmer, #565B66) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none;
  opacity: .55;
}
.fx.fx-donate-note .unsubscribe-form{ margin: 0; }

/* 4.5 Мобильный брейкпоинт */
@media (max-width: 520px){
  .fx.fx-donate-note .unsubscribe-card{ margin: 28px auto; padding: 28px 20px; }
  .fx.fx-donate-note .unsubscribe-actions .btn{ flex: 1 1 100%; }
}