/* ============================================================
   SWAMP Wrap Bridge — оформление

   ВСЕ ЦВЕТА ЛЕЖАТ В ОДНОМ БЛОКЕ НИЖЕ. По тексту файла чисел
   цвета больше нет — только имена. Поменять оттенок значит
   поправить одну строку в начале, а не искать его по файлу.

   Дизайн подбирается опытом, и подбирать придётся не раз.
   ============================================================ */

:root {

  /* ── 1. ФОН ────────────────────────────────────────────────
     Почти чёрный с очень лёгким зелёным привкусом: заметен,
     только если присматриваться. Зелёный канал везде чуть выше
     остальных — этим и держится оттенок.

     Хотите сильнее зелени — поднимайте второе число в паре
     (G) на 2–3 единицы во всех четырёх строках сразу, иначе
     поверхности разойдутся по тону.                          */

  --bg:            #0e1210;   /* фон страницы                  */
  --surface:       #151a17;   /* шапка, карточки, подвал       */
  --surface-2:     #1c221e;   /* поля ввода, ячейки, таблетки  */
  --surface-3:     #262e28;   /* вторичная кнопка, шкала       */

  /* ── 2. ЛИНИИ ───────────────────────────────────────────── */

  --line:          #29312c;   /* рамки карточек                */
  --line-2:        #39443d;   /* рамки полей и таблеток        */
  --line-soft:     #212823;   /* разделители строк внутри карт */

  /* ── 3. ТЕКСТ ───────────────────────────────────────────── */

  --text:          #c7ccc8;   /* основной                      */
  --text-bright:   #e2e8e3;   /* заголовки, значения           */
  --text-muted:    #939b96;   /* подписи                       */
  --text-dim:      #626a65;   /* подсказки мелким              */
  --text-faint:    #4c534e;   /* копирайт                      */

  /* ── 4. АКЦЕНТ ──────────────────────────────────────────────
     Пришёл на место фиолетового #7c3aed.

     Соседние варианты, если этот не ляжет:
        #5e9b94  — тот же тон с зеленью, ближе к фону
        #629ca6  — синéе и строже

     Текст на акцентной кнопке ТЁМНЫЙ, а не белый: белый на этом
     цвете даёт низкий контраст и выглядит мутно.               */

  --accent:        #5f9ea0;   /* кнопки, активная вкладка      */
  --accent-hover:  #6fb0b2;   /* наведение — светлее, не темнее*/
  --accent-press:  #4e8688;   /* нажатие                       */
  --accent-link:   #7cb4b5;   /* ссылки в тексте               */
  --accent-soft:   #a6cdcd;   /* светлый текст акцента         */
  --accent-wash:   #17282a;   /* подсветка фона                */
  --accent-wash-2: #1b3033;   /* подсветка сильнее             */
  --on-accent:     #0e1210;   /* текст поверх акцента          */

  /* Название сайта на главной. Почти белый, но с еле уловимой
     бирюзой — родство с акцентом видно, только если поставить
     рядом с обычным белым. Хотите заметнее — двигайте к
     --accent-soft (#a6cdcd).                                    */
  --logo-color:    #d5e6e4;

  /* ── 5. ЦВЕТ КАК ЯЗЫК ───────────────────────────────────────
     Смысл один на весь сайт, менять нельзя без разбора:

       серый             ещё не начиналось
       жёлто-коричневый  ждём человека или сеть — всё в порядке
       бирюзовый         работа идёт прямо сейчас
       зелёный           готово
       красный           ТОЛЬКО явный отказ, всегда с объяснением

     Красного в обычном ходе дела нет вовсе.

     ВНИМАНИЕ: --work-* стоит близко к акценту. Если вживую
     сольются — сдвигать надо состояние, а не акцент: акцент
     на странице заявки почти не встречается, а состояние там
     главное.                                                   */

  /* Шаг 1 — ЖДЁМ. Тёплый янтарь. Начало пути.                */
  --hold-line:     #8a7433;
  --hold-text:     #e6cf8a;
  --hold-mark:     #c9a94a;
  --hold-bg:       #241f10;
  --hold-glow:     201, 169, 74;

  /* Шаг 2 — ИДЁТ РАБОТА. Оливково-зелёный: янтарь уже позади,
     до уверенного зелёного ещё не дошли. Бирюзового здесь больше
     нет — он ушёл в акцент кнопок и в ходе заявки не участвует.  */
  --work-line:     #5c7635;
  --work-text:     #cfe0a4;
  --work-mark:     #9dbe5c;
  --work-bg:       #1a2212;
  --work-glow:     157, 190, 92;

  /* Шаг 3 — ГОТОВО. Уверенный зелёный.                          */
  --done-line:     #2c5138;
  --done-text:     #a7d8b4;
  --done-fill:     #3f9d5c;
  --done-bg:       #14261a;

  --stop-line:     #5a2a2a;   /* отказ. Единственный красный   */
  --stop-text:     #f0a0a0;
  --stop-mark:     #8a3030;
  --stop-bg:       #2a1414;

  --warn-text:     #c9a94a;   /* предупреждение под полем      */

  /* ── 6. РАЗМЕРЫ ───────────────────────────────────────────── */

  /* Число обеспечения. 17px было мелко для главного числа
     на главной странице. 20px — те же плюс двадцать процентов. */
  --backing-size:  20px;

  --radius:        14px;      /* карточки                      */
  --radius-sm:     10px;      /* кнопки, плашки                */
  --radius-xs:     8px;       /* поля ввода                    */
  --page-width:    680px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100vh; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--accent-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Шапка ───────────────────────────────────────────────── */

.header-wrap {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; position: relative; gap: 12px;
}
.header-left  { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 10px; }

.header-logo-img  { width: 40px; height: 40px; border-radius: var(--radius-xs);
                    object-fit: contain; display: block; }
.header-logo-link { display: flex; align-items: center; line-height: 0; }
.header-logo-link:hover { opacity: .85; }
.header-logo-text {
  font-size: 17px; font-weight: 700; color: var(--logo-color);
  letter-spacing: .5px; white-space: nowrap;
}

/* Вкладки направлений — посередине шапки.
   Здесь, а не в углу: переключаться человек будет постоянно. */
.header-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
}
.dir-tabs { gap: 6px; display: flex; }

/* Вкладки в подвале: над значками соцсетей, по центру. */
.dir-tabs-foot { justify-content: center; margin-bottom: 20px; }

/* Возврат на главную моста. Посередине шапки, на всех страницах
   кроме самой главной. Неброская серая ссылка без рамки: это
   дверь, а не действие. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 13px; white-space: nowrap;
}
.back-link:hover { color: var(--accent-soft); text-decoration: none; }
.back-arrow { font-size: 15px; line-height: 1; }

/* Письмо справа налево: стрелка возврата должна смотреть в другую
   сторону, иначе она указывает не туда, куда ведёт. */
[dir="rtl"] .back-arrow { transform: scaleX(-1); }

/* Выход в экосистему. Овальная окантовка, серая и еле заметная,
   без заливки — по виду кнопка, но не действие. Заливка сделала бы
   её главной на странице, а главное здесь обмен, а не уход. */
.eco-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  white-space: nowrap; transition: all .18s;
}
.eco-pill:hover {
  border-color: var(--line-2); color: var(--text);
  text-decoration: none;
}

/* Подпись вкладки — по центру таблетки. Флексом, а не text-align:
   так она стоит по центру и по высоте тоже. */
/* Вкладки направлений. Стоят ВНИЗУ страницы, над значками соцсетей.
   Ростом на треть ниже прежнего: они не главное на странице, и
   бросаться в глаза им незачем. Кому надо — найдёт. */
.dir-tab {
  display: flex; align-items: center; justify-content: center;
  padding: 2px 13px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  line-height: 1.5;
  white-space: nowrap; text-align: center; transition: all .18s;
}
.dir-tab:hover { border-color: var(--accent); color: var(--accent-soft);
                 background: var(--accent-wash); text-decoration: none; }
.dir-tab.active { background: var(--accent); border-color: var(--accent);
                  color: var(--on-accent); font-weight: 600; }

/* На узком экране вкладки уходят строкой под шапку. */
.dir-tabs-mobile { display: none; }

.nav-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all .18s;
  font-family: inherit; text-align: center;
}
.nav-pill:hover { border-color: var(--accent); color: var(--accent-soft);
                  background: var(--accent-wash); }

/* ── Выбор языка ─────────────────────────────────────────── */

.lang-switcher { position: relative; }
.lang-switcher-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text); font-size: 13px; cursor: pointer;
  font-family: inherit; white-space: nowrap; text-align: center;
}
.lang-switcher-btn:hover { border-color: var(--accent); }

.lang-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px; min-width: 210px; max-height: 60vh; overflow-y: auto;
  z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.lang-dropdown.open { display: block; }

/* Список — по левому краю намеренно: глазу нужен ровный столбец
   начал строк, иначе двадцать восемь названий не просмотреть. */
.lang-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  color: var(--text); font-size: 14px;
}
.lang-item:hover { background: var(--surface-3); text-decoration: none; }
.lang-item.active { background: var(--accent-wash); color: var(--accent-soft); }
.lang-flag { font-size: 18px; line-height: 1; }

/* ── Основа страницы ─────────────────────────────────────── */

.container { max-width: var(--page-width); margin: 0 auto; padding: 24px 16px 40px; }

/* Заголовок страницы и строка под ним — по центру. */
.page-title { font-size: 22px; font-weight: 600; color: var(--text-bright);
              margin-bottom: 6px; text-align: center; }
.page-sub   { color: var(--text-muted); font-size: 14px; margin-bottom: 24px;
              text-align: center; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px;
}
/* Название карточки — по центру: это заголовок плашки, а не
   начало абзаца. */
.card-title { font-size: 15px; font-weight: 600; color: var(--text-bright);
              margin-bottom: 14px; text-align: center; }

/* ── Спокойные сообщения ─────────────────────────────────── */
/* Ни красного, ни восклицательных знаков: человек, у которого
   монеты уже в мосте, не должен пугаться.

   Текст по центру: сообщение почти всегда в одну-две строки
   и стоит одно посреди страницы. */

.notice {
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px;
  font-size: 14px; text-align: center;
}
.notice-quiet { background: var(--surface-2); border: 1px solid var(--line-2);
                color: var(--text-muted); }
/* Отличается от тихого заметно, а не на четыре единицы яркости:
   раньше их было не различить. */
.notice-info  { background: var(--accent-wash); border: 1px solid var(--accent);
                color: var(--accent-soft); }
.site-notice  { background: var(--accent-wash); border-bottom: 1px solid var(--line-2);
                color: var(--accent-soft); padding: 10px 20px; font-size: 14px;
                text-align: center; }

/* Перечень внутри сообщения. Маркеры — по левому краю: список,
   выровненный по центру, читать нельзя. Сам список при этом
   стоит по середине плашки. */
.notice ul {
  text-align: left; display: inline-block; margin: 8px auto 0;
  padding-left: 18px;
}

/* ── Поля и кнопки ───────────────────────────────────────── */

/* Подпись над полем — ПО ЛЕВОМУ КРАЮ намеренно: она стоит над
   полем, в котором текст набирается слева, и центр её сдвинул бы
   относительно того, что она подписывает. */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px;
}
.form-hint { font-size: 12px; color: var(--text-dim); margin-top: 5px; }

/* Подсказка, стоящая сама по себе, а не под полем. */
.form-hint-center { text-align: center; }

.form-input, .form-select {
  width: 100%; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-xs);
  color: var(--text-bright); font-size: 15px; outline: none;
  font-family: inherit; transition: border .2s;
}
.form-input:focus, .form-select:focus { border-color: var(--accent); }

/* Выбор сети со значком. */
.chain-pick { display: flex; align-items: center; gap: 10px; }
.chain-pick img { width: 24px; height: 24px; flex: none; }

/* Кнопки: подпись строго по центру и по высоте.
   Флексом, а не расчётом на поведение <button> по умолчанию —
   внутри бывает значок, и тогда выравнивание разъезжается. */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: var(--accent); color: var(--on-accent); border: none;
  border-radius: var(--radius-sm); padding: 14px 24px; font-size: 16px;
  font-weight: 600; cursor: pointer; font-family: inherit;
  text-align: center; line-height: 1.3;
  transition: background .2s;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-press); }
.btn-primary:disabled { background: var(--surface-3); color: var(--text-dim);
                        cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--line-2);
  border-radius: var(--radius-xs); padding: 10px 18px; font-size: 14px;
  cursor: pointer; font-family: inherit; text-align: center; line-height: 1.3;
}
.btn-secondary:hover { background: var(--line-2); }

/* Кнопка того же веса, что и главная, но действие подготовительное:
   подключить кошелёк — ещё не обмен. Ширина та же, заливки нет. */
.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: transparent; color: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 14px 24px; font-size: 16px;
  font-weight: 600; cursor: pointer; font-family: inherit;
  text-align: center; line-height: 1.3; transition: background .2s;
}
.btn-outline:hover:not(:disabled) { background: var(--accent-wash); }
.btn-outline:disabled { border-color: var(--line-2); color: var(--text-dim);
                        cursor: not-allowed; }

/* ── Длинные строки: адреса и хеши ───────────────────────── */
/* На узком экране адрес в 34 знака обязан переноситься, а не
   растягивать страницу. По левому краю всегда: это данные,
   а не надпись. */

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
  text-align: left;
}

.copybox {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.copybox .mono { flex: 1; min-width: 0; color: var(--text-bright); }
.copybox button { flex: none; }

/* ── Строки «имя — значение» ─────────────────────────────── */
/* Таблица, а не надписи: имена слева, значения справа. Центр
   здесь сделал бы столбцы нечитаемыми. */

.row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.row:last-child { border-bottom: none; }
.row .k { color: var(--text-muted); white-space: nowrap; }
.row .v { color: var(--text-bright); text-align: right; word-break: break-all;
          overflow-wrap: anywhere; min-width: 0; }
.row .v.num { font-family: ui-monospace, Menlo, monospace; }

/* ── Обеспечение ─────────────────────────────────────────── */
/* Две одинаковые ячейки рядом — симметрия просится сама. */

.backing { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.backing-cell {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px; text-align: center;
}
.backing-label { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.backing-value {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--backing-size); color: var(--text-bright); word-break: break-all;
}
.backing-ok   { color: var(--done-text); }
.backing-warn { color: var(--hold-text); }
.backing-note { font-size: 12px; color: var(--text-dim); margin-top: 12px;
                text-align: center; }

/* ── Крупные кнопки главной ──────────────────────────────── */
/* Стоят НИЖЕ обеспечения: человек ведёт взглядом сверху вниз,
   сначала убеждается, что монеты на месте, и только потом
   доходит до действия.

   Содержимое по центру: две одинаковые плитки рядом. */

.big-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 24px 0;
}
.big-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 22px 20px; color: var(--text); text-align: center;
  transition: border-color .18s, background .18s, transform .1s;
}
.big-btn:hover {
  border-color: var(--accent); background: var(--accent-wash);
  text-decoration: none; transform: translateY(-2px);
}
.big-btn-title { font-size: 19px; font-weight: 700; color: var(--text-bright); }
.big-btn-text  { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.big-btn-go    { margin-top: 8px; font-size: 14px; font-weight: 600;
                 color: var(--accent-soft); }

/* ── Состояние обеспечения ───────────────────────────────── */

.reserve-state {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.55; text-align: center;
}
.reserve-ok {
  background: var(--done-bg); border: 1px solid var(--done-line);
  color: var(--done-text);
}
/* Жёлтый, а не красный: даже настоящая нехватка почти всегда
   означает незавершённую обработку, и пугать человека нельзя. */
.reserve-warn {
  background: var(--hold-bg); border: 1px solid var(--hold-line);
  color: var(--hold-text);
}
.reserve-ratio {
  display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px;
  font-family: ui-monospace, Menlo, monospace;
}
.reserve-text { display: block; }

/* Предупреждение под полем ввода — по левому краю, вместе
   с подписью поля. */
.form-warn { color: var(--warn-text); }

/* ── Ход заявки ──────────────────────────────────────────── */
/* Человек не должен гадать, сколько ждать. У каждого шага
   либо шкала подтверждений, либо честный срок.

   Список слева: строки разной длины, и ровный левый край
   здесь важнее симметрии. */

.steps { list-style: none; }
.step {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: none; }

.step-mark {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line-2); display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--text-dim);
  /* Смена состояния переливается, а не щёлкает. Полторы секунды:
     заметно глазу, но не тянется. */
  transition: background-color 1.4s ease, border-color 1.4s ease,
              color 1.4s ease;
}

.step-body { flex: 1; min-width: 0; }
.step-name { color: var(--text-muted); font-size: 14px; transition: color 1.4s ease; }
.step-note { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
/* Без перевода в прописные: в двадцати восьми языках прописных
   букв может не быть вовсе, а разрядка ломает письмо. */
.step-state {
  display: inline-block; font-size: 11px;
  margin-left: 8px; vertical-align: 1px;
}

/* Ждём: человека или подтверждений сети. */
.step.hold .step-mark  { border-color: var(--hold-line); color: var(--hold-mark);
                         background: var(--hold-bg); }
.step.hold .step-name  { color: var(--hold-text); font-weight: 600; }
.step.hold .step-state { color: var(--hold-mark); }

/* Идёт работа. */
.step.active .step-mark  { border-color: var(--work-line); color: var(--work-mark);
                           background: var(--work-bg); }
.step.active .step-name  { color: var(--work-text); font-weight: 600; }
.step.active .step-state { color: var(--work-mark); }

/* Готово. */
.step.done .step-mark { background: var(--done-fill); border-color: var(--done-fill);
                        color: var(--bg); }
.step.done .step-name { color: var(--done-text); }

/* Отказ. Единственное место с красным на всём сайте. */
.step.stop .step-mark  { border-color: var(--stop-mark); color: var(--stop-text);
                         background: var(--stop-bg); }
.step.stop .step-name  { color: var(--stop-text); font-weight: 600; }
.step.stop .step-state { color: var(--stop-text); }

/* Кружок «идёт работа» тихо дышит: видно, что дело движется,
   даже когда число подтверждений стоит на месте. */
.step.active .step-mark { animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--work-glow), .35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--work-glow), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .step.active .step-mark { animation: none; }
}

/* Шкала подтверждений. Цвет следует за состоянием шага. */
.bar { height: 6px; background: var(--surface-3); border-radius: 3px;
       margin-top: 9px; overflow: hidden; }
/* Шкала наливается плавно и меняет цвет вместе с шагом. */
.bar-fill { height: 100%; border-radius: 3px; background: var(--work-mark);
            transition: width .9s ease, background-color 1.4s ease; }
.step.hold .bar-fill { background: var(--hold-mark); }
.step.done .bar-fill { background: var(--done-fill); }

/* Мост остановлен для проверки хранилища.
   ─────────────────────────────────────────────────────────
   Заметнее тихого сообщения и мягче красного. Случай редкий
   и важный: человек должен увидеть его сразу, но не испугаться —
   его средства целы, и от него ничего не требуется.

   Отсюда медно-золотой перелив вместо красного пятна. Движение
   медленное, восемь секунд на проход: быстрый блеск дёргает глаз
   и мешает читать, медленный лишь притягивает взгляд.

   Шрифт тот же по размеру, но полужирный — плотность заметнее
   размера и не ломает высоту строки.

   Перелив живёт в отдельном слое под текстом: анимировать фон
   самой плашки значило бы перерисовывать и текст поверх него. */
.notice-halt {
  position: relative; overflow: hidden;
  background: var(--hold-bg);
  border: 1px solid var(--hold-line);
  color: var(--hold-text);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(var(--hold-glow), .10),
              0 2px 14px rgba(var(--hold-glow), .12);
}
.notice-halt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
      100deg,
      transparent 0%,
      rgba(var(--hold-glow), .00) 35%,
      rgba(var(--hold-glow), .22) 50%,
      rgba(var(--hold-glow), .00) 65%,
      transparent 100%);
  background-size: 250% 100%;
  animation: halt-sheen 8s ease-in-out infinite;
}
.notice-halt > * { position: relative; }

@keyframes halt-sheen {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

/* Кому движение мешает — тому ровный свет вместо перелива.
   Заметность при этом не теряется: остаются цвет, рамка и
   полужирный шрифт. */
@media (prefers-reduced-motion: reduce) {
  .notice-halt::before { animation: none;
                         background: rgba(var(--hold-glow), .07); }
}

/* Сообщение об отказе — единственное красное пятно на сайте. */
.notice-stop {
  background: var(--stop-bg); border: 1px solid var(--stop-line);
  color: var(--stop-text);
}

/* ── Блоки главной ───────────────────────────────────────── */

.block { margin-bottom: 20px; }
.block img { max-width: 100%; height: auto; border-radius: 12px; display: block;
             margin: 0 auto; }

/* Длинный текст блока — по левому краю: центрированный абзац
   в несколько строк читается заметно хуже. */
.block-text p { text-align: left; }

/* Обложка вместо проигрывателя.
   Проигрыватель видеохостинга тянет свои скрипты и следит
   за посетителем, замедляя открытие. Подставляем его только
   когда человек нажал. На телефоне разница заметная. */
.video-cover {
  position: relative; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: var(--surface-2); aspect-ratio: 16 / 9;
}
.video-cover img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 54px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.video-cover iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Всплывающее окно ────────────────────────────────────── */

.modal {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.7); padding: 20px;
  overflow-y: auto;
}
.modal.open { display: flex; align-items: flex-start; justify-content: center; }
.modal-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px; max-width: 560px; width: 100%; margin: auto;
  position: relative;
}
.modal-box h2 { font-size: 19px; color: var(--text-bright); margin-bottom: 12px;
                text-align: center; }
/* Абзацы объяснения — по левому краю. */
.modal-box p  { font-size: 14px; margin-bottom: 12px; text-align: left; }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--text-dim);
  font-size: 26px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* ── Подвал ──────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); background: var(--surface);
          margin-top: 40px; padding: 26px 16px; }
.footer-inner { max-width: var(--page-width); margin: 0 auto; text-align: center; }

/* Порядок значков один на всю экосистему: X, Telegram, Discord. */
.footer-social { display: flex; justify-content: center; gap: 14px;
                 margin-bottom: 18px; }
.footer-social img { width: 32px; height: 32px; opacity: .75;
                     transition: opacity .2s; }
.footer-social a:hover img { opacity: 1; }

.footer-text  { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.footer-links { margin-top: 12px; font-size: 13px; }
.footer-links a { margin: 0 8px; color: var(--text-muted); }
.footer-copy  { margin-top: 14px; font-size: 12px; color: var(--text-faint); }

/* ── Узкий экран ─────────────────────────────────────────── */

@media (max-width: 700px) {
  .header { padding: 12px 16px; }
  .header-logo-text { font-size: 15px; }
  .header-right { gap: 8px; }
  .back-link { font-size: 12px; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .container { padding: 18px 12px 32px; }
  .card { padding: 16px; border-radius: 12px; }

  /* Числа обеспечения в одну колонку: в две они на телефоне
     режутся посередине. */
  .backing { grid-template-columns: 1fr; }

  /* Кнопки в столбик и во всю ширину: так их не промахнуть
     пальцем. */
  .big-choice { grid-template-columns: 1fr; }
  .big-btn { padding: 18px 16px; }

  /* Строка «имя — значение» становится двумя строками, иначе
     адрес и подпись к нему давят друг друга. */
  .row { flex-direction: column; gap: 3px; }
  .row .v { text-align: left; }

  /* Кнопка копирования уходит под сам адрес. */
  .copybox { flex-direction: column; }
  .copybox button { width: 100%; }

  /* На главной название прячем — остаётся значок. */
  .header-logo-text { display: none; }
  /* На внутренних страницах возврат сжимается до стрелки: смысл
     сохраняется, места занимает втрое меньше. */
  .back-link { font-size: 0; gap: 0; }
  .back-arrow { font-size: 18px; }
  /* Выход в экосистему сжимается, но не прячется: он вровень по
     важности с возвратом на главную и должен быть доступен. */
  .eco-pill { padding: 5px 10px; font-size: 11px; }
  .lang-dropdown { right: -8px; min-width: 190px; }
  .mono { font-size: 12px; }
}

/* ── Письмо справа налево ────────────────────────────────── */
/* Арабский и фарси. Числа, адреса и хеши остаются слева направо
   всегда: перевёрнутый адрес — это другой адрес. */

[dir="rtl"] .row .v { text-align: left; }
[dir="rtl"] .mono,
[dir="rtl"] .backing-value { direction: ltr; text-align: left; }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .modal-close   { right: auto; left: 14px; }
[dir="rtl"] .notice ul     { text-align: right; padding-left: 0; padding-right: 18px; }
[dir="rtl"] .block-text p,
[dir="rtl"] .modal-box p   { text-align: right; }

/* ── Подпись в кошельке ──────────────────────────────────── */

.sign-step {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin-bottom: 12px; background: var(--surface-2);
  transition: border-color 1.4s ease, background-color 1.4s ease;
}
.sign-step.current { border-color: var(--work-line); background: var(--work-bg); }
.sign-step.done    { border-color: var(--done-line); background: var(--done-bg); }

/* Шаг, до которого ещё не дошли, ПРИГЛУШАЕТСЯ СЛАБО.
   Раньше стояло .45 — на тёмном фоне это уже пряченье, а прятать
   несделанный шаг нельзя: человек должен видеть, что его ждёт. */
.sign-step.locked  { opacity: .8; }

/* Заголовок шага — по центру вместе с номером. */
.sign-head { display: flex; align-items: center; justify-content: center;
             gap: 10px; margin-bottom: 10px; }
.sign-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.sign-step.current .sign-num { background: var(--work-line); color: var(--text-bright); }
.sign-step.done    .sign-num { background: var(--done-fill); color: var(--bg); }
.sign-title { font-size: 15px; font-weight: 600; color: var(--text-bright);
              text-align: center; }
.sign-hint  { font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
              text-align: center; }
.sign-out   { font-size: 13px; margin-top: 10px; word-break: break-all;
              text-align: center; }
.sign-out.ok   { color: var(--done-text); }
.sign-out.busy { color: var(--work-mark); }
.sign-out.bad  { color: var(--stop-text); }

/* ── Незаполненное поле ──────────────────────────────────── */
/* Человек нажал кнопку, не вписав адрес. Это НЕ отказ и не ошибка:
   он просто ещё не дошёл. Поэтому янтарный — тот же цвет, которым
   на странице заявки помечено «ждём». Красный здесь был бы враньём.

   Рамка загорается, два медленных вздоха, и свечение гаснет само.
   Сама рамка остаётся подсвеченной, пока человек не начнёт печатать. */

.field-alert .form-input,
.field-alert .form-select {
  border-color: var(--hold-mark);
  animation: field-pulse 1.5s ease-in-out 2;
}
@keyframes field-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hold-glow), 0); }
  40%      { box-shadow: 0 0 0 4px rgba(var(--hold-glow), .20); }
}
@media (prefers-reduced-motion: reduce) {
  .field-alert .form-input,
  .field-alert .form-select { animation: none;
                              box-shadow: 0 0 0 3px rgba(var(--hold-glow), .18); }
}

/* То же для кнопки, которую надо нажать раньше главной:
   подключение кошелька. */
.btn-outline.field-alert {
  border-color: var(--hold-mark); color: var(--hold-text);
  animation: field-pulse 1.5s ease-in-out 2;
}

/* Строка «сначала впишите адрес» под полем. */
.need-msg { color: var(--hold-text); font-size: 13px; margin-top: 6px; }

/* Капча и подсказка рядом с ней.
   Квадратик капчи узкий, справа от него пустое место — туда и
   ставим сообщение. На узком экране оно уходит под квадратик:
   рядом там не поместится. */
.captcha-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.captcha-row .h-captcha { flex: none; }
.captcha-row .need-msg {
  margin-top: 0; flex: 1; min-width: 160px; line-height: 1.45;
}

/* Подсветка самой капчи, когда её пропустили. Тем же янтарным:
   человек не ошибся, он просто ещё не дошёл. */
.captcha-row.field-alert .h-captcha {
  border-radius: var(--radius-xs);
  animation: field-pulse 1.5s ease-in-out 2;
}

/* ── Переброс в приложение кошелька ─────────────────────── */
/* Показывается только на телефоне и только когда кошелька
   в браузере нет. Стоит там, где человек упёрся — под кнопкой
   подключения, а не наверху страницы, где он его не искал бы. */

.handoff {
  margin-top: 12px; padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.handoff-head {
  font-size: 13px; color: var(--text); text-align: center;
  margin-bottom: 10px;
}
/* Кнопки в столбик: названия кошельков разной длины, в ряд они
   съезжаются, и пальцем легко промахнуться. */
.handoff-row { display: flex; flex-direction: column; gap: 8px; }
.handoff-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 16px; border-radius: var(--radius-xs);
  border: 1px solid var(--accent); background: transparent;
  color: var(--accent-soft); font-size: 15px; font-weight: 600;
  text-align: center;
}
.handoff-btn:hover, .handoff-btn:active {
  background: var(--accent-wash); text-decoration: none;
}
/* Значок кошелька в выборе. Присылает сам кошелёк вместе
   с именем — своих картинок не держим. */
.wallet-icon {
  width: 20px; height: 20px; margin-right: 8px;
  border-radius: 4px; flex: none;
}

.handoff-foot {
  margin-top: 10px; font-size: 12px; color: var(--text-dim);
  text-align: center; line-height: 1.5;
}

/* Пустая полоска вывода не занимает места: раньше под каждой
   кнопкой висел отступ ни за что. */
.sign-out:empty, .form-hint:empty, .step-note:empty { display: none; }