/* ── НишФайндер, публичный продукт: тёмная гамма «Студия» ────────────────────
   Дизайн-система продукта. Источник — Finaldesign/project/NicheFinder v2.dc.html
   (токены на строках 16–19, кейфреймы 55–63) и Finaldesign/NicheFinder -
   спецификация.md, разделы 2–3.

   Тёплая тема «Keynote» отсюда убрана: она была временной, пока не пришли макеты.
   Кухня (dashboard/static/theme.css) остаётся тёплой и не трогается — контуры
   намеренно разошлись, и тест это стережёт с обратным знаком: раньше он требовал
   совпадения с кухней, теперь требует, чтобы тёмные токены были на месте.

   Правило файла: здесь ТОЛЬКО токены и базовые элементы (текст, поля, кнопки,
   одиночные экраны входа). Каркас приложения — сетка, боковая панель, карточки
   каналов и ниш — живёт в app.css. Разделение не косметическое: страницы входа
   и приглашения отдаются НЕ вошедшему человеку, и тянуть в них вёрстку витрины
   незачем.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Гамма «Студия» (утверждённая) ─────────────────────────────────────────
   Значения дословно из прототипа. Расхождение со спецификацией одно: --bdS
   в спеке .13, в прототипе .15 — берём прототип, он и есть артефакт. */
:root{
  --ff:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,Menlo,monospace;

  --bg:#1A1A1A;        /* фон приложения */
  --panel:#141414;     /* резервный фон панелей */
  --sunk:#0D0D0D;      /* «утопленные» поля: инпуты, полосы сегментов */
  --surf:#212121;      /* карточка, поверхность */
  --surf2:#2E2E2E;     /* активная/hover-поверхность, аватарки */
  --bd:rgba(255,255,255,.07);    /* обычная граница */
  --bdS:rgba(255,255,255,.15);   /* сильная граница: кнопки-контуры, модалки */
  --tx:#FFFFFF;        /* основной текст */
  --tx2:#B0B0B0;       /* вторичный текст */
  --cta:#FF0033;       /* главное действие */
  --ctaTx:#FFFFFF;
  --data:#3EA6FF;      /* всё «данные»: графики, дни в базе, ссылки */
  --dataTx:#04121F;
  --dataSoft:rgba(62,166,255,.14);
  --pos:#2BA640;       /* деньги, положительная динамика */
  --posSoft:rgba(43,166,64,.16);
  --warn:#FFD24D;      /* закладка «в избранном», число каналов ниши */
  --r:18px;            /* базовый радиус карточки */
  --rchip:999px;
}

/* ── Остальные четыре гаммы ───────────────────────────────────────────────
   Гамма меняет ТОЛЬКО токены: ни одна вёрстка не должна зависеть от конкретного
   цвета. Это требование к любому редизайну, а не украшение. */
:root[data-theme="indigo"]{
  --bg:#111828; --panel:#0C1220; --sunk:#070B14; --surf:#182136; --surf2:#26324C;
  --bd:rgba(255,255,255,.07); --bdS:rgba(255,255,255,.15);
  --tx:#FFFFFF; --tx2:#9AA7C0; --cta:#7C5CFF; --ctaTx:#FFFFFF;
  --data:#4FD1FF; --dataTx:#04161F; --dataSoft:rgba(79,209,255,.14);
  --pos:#34D399; --posSoft:rgba(52,211,153,.16); --warn:#FBBF24; --r:22px;
}
:root[data-theme="graphite"]{
  --bg:#1B1817; --panel:#151211; --sunk:#0D0B0A; --surf:#231F1D; --surf2:#332D29;
  --bd:rgba(255,255,255,.08); --bdS:rgba(255,255,255,.16);
  --tx:#FFFCF6; --tx2:#B3AAA0; --cta:#FF7A1A; --ctaTx:#1A1310;
  --data:#58CFC2; --dataTx:#07201D; --dataSoft:rgba(88,207,194,.14);
  --pos:#8AC96E; --posSoft:rgba(138,201,110,.16); --warn:#E8C15C; --r:8px;
}
:root[data-theme="emerald"]{
  --bg:#0F1A14; --panel:#0A130E; --sunk:#060D09; --surf:#16241C; --surf2:#213629;
  --bd:rgba(255,255,255,.07); --bdS:rgba(255,255,255,.14);
  --tx:#F5FFF9; --tx2:#9BB3A6; --cta:#FF5C7A; --ctaTx:#1A0A0F;
  --data:#7DE3FF; --dataTx:#04181F; --dataSoft:rgba(125,227,255,.14);
  --pos:#3ECF8E; --posSoft:rgba(62,207,142,.16); --warn:#F2C14E; --r:18px;
}
:root[data-theme="plum"]{
  --bg:#1A1522; --panel:#130F1A; --sunk:#0C0912; --surf:#231D2E; --surf2:#31283F;
  --bd:rgba(255,255,255,.07); --bdS:rgba(255,255,255,.15);
  --tx:#FBF7FF; --tx2:#ACA2C0; --cta:#FF3D8B; --ctaTx:#FFFFFF;
  --data:#6BE1E8; --dataTx:#031A1C; --dataSoft:rgba(107,225,232,.14);
  --pos:#4ED9A4; --posSoft:rgba(78,217,164,.16); --warn:#FFC24D; --r:24px;
}

/* ── Шкала оценки: S / A / B / C / D ──────────────────────────────────────
   ЕДИНСТВЕННАЯ семантическая палитра продукта, и она НЕ берётся из гаммы:
   это язык оценки, а не оформление, поэтому во всех темах одинакова.
   Оранжевого в шкале нет сознательно — он путался с жёлтым.

   Зелёный и жёлтый поменялись местами (решение владельца 14.08.2026): в хендоффе
   «хорошая ниша» была жёлтой, а «средняя» — зелёной, и это читалось задом наперёд.
   Зелёный человек понимает как «бери», жёлтый — как «так себе», ещё до того, как
   прочитает подпись; спорить с этим значением незачем. Красный и розовый выше
   зелёного по той же причине, по какой они и были: это уже не «нормально», а
   «редкая находка». */
:root{
  --tier-s:#FF2D78; --tier-s-ink:#1A0B12;   /* 10–9  супер гем */
  --tier-a:#FF1744; --tier-a-ink:#1A0409;   /*  8–7  топ ниша  */
  --tier-b:#00E676; --tier-b-ink:#04200F;   /*  6–5  хорошая   */
  --tier-c:#FFEA00; --tier-c-ink:#241C05;   /*  4–3  средняя   */
  --tier-d:#78909C; --tier-d-ink:#12181B;   /*  2–1  слабая    */

  /* Светофор качественных фильтров — те же три цвета из шкалы. */
  --tone-good:#00E676; --tone-mid:#FFEA00; --tone-bad:#FF1744; --tone-ink:#06240F;

  /* Цвет ниши. Из базы приходит ТОЛЬКО тон (niches.hue, 0–359) — насыщенность и
     светлота общие для всех ниш и живут здесь: их подбирают под фон, а фон меняется
     вместе с гаммой. Разойдись они по разметке — пришлось бы править сотни строк
     ради одной перекраски. Значения выбраны так, чтобы любой тон читался на тёмном
     и при этом не спорил с яркими цветами шкалы оценки. */
  --niche-s:62%; --niche-l:68%;

  /* Изумруд: логотип и «наш гем-фильтр». Тоже вне гаммы — это марка. */
  --gem:#00E676; --gem-ink:#00341A;
  --gem-rest-bg:#0E3B22; --gem-rest-tx:#4DFFA2; --gem-rest-bd:#1C5C38;
}

/* ── База ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}

body{
  margin:0;padding:0;background:var(--bg);color:var(--tx);
  font-family:var(--ff);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* числа в колонках не «дышат» при смене цифр */
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
}
button,input,select{font-family:var(--ff);font-variant-numeric:tabular-nums}

/* Системное кольцо фокуса на тёмном фоне читалось как ошибка ввода — снято.
   Видимость фокуса возвращаем там, где она нужна, своими средствами. */
button:focus,button:focus-visible,input:focus,select:focus{outline:none}

::-webkit-scrollbar{width:11px;height:11px}
/* Прозрачная дорожка — правило из эталона, без него в Chrome остаётся системная. */
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
/* border и background-clip обязаны повториться и в :hover: без них ползунок при
   наведении скачком толстеет с 5px до 11px — рамка перестаёт вырезать поле. */
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36);
  border:3px solid transparent;background-clip:content-box}

a{color:var(--data);text-decoration:none}
/* На ховере ссылка меняет ЦВЕТ, а не подчёркивается (эталон, строка 46): в
   приложении ссылками сделаны пункты навигации и имена каналов, и подчёркивание
   под пунктом меню читается как опечатка вёрстки. */
a:hover{color:var(--tx);text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--tx2)}
.mono{font-family:var(--mono)}
.wrap{max-width:900px;margin:0 auto;padding:22px 20px 44px}

/* ── Типографика ──────────────────────────────────────────────────────────
   Правило: заголовки — 700/800 с отрицательным трекингом; рубрикаторы — 9–9.5px
   капсом с разрядкой; всё, что число — 600/700 табличными цифрами. */
h1{font:800 34px/1.1 var(--ff);letter-spacing:-1.2px;margin:0 0 6px}
h2{font:700 25px/1.2 var(--ff);letter-spacing:-.7px;margin:0 0 12px}
.lead{color:var(--tx2);margin:0 0 18px;font-size:14px}
.eyebrow{font:800 9.5px/1 var(--ff);letter-spacing:.1em;color:var(--tx2);
  text-transform:uppercase}

.rows{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px}
.rows dt{color:var(--tx2)}
.rows dd{margin:0}

/* ── Поверхности ──────────────────────────────────────────────────────────── */
.card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r);
  padding:22px 24px;margin-bottom:18px}

/* ── Шапка простых страниц (аккаунт, отказ) ───────────────────────────────
   Каркас приложения со своей боковой панелью — в app.css; эта шапка нужна
   страницам, у которых приложения ещё нет. */
.topnav{display:flex;gap:20px;align-items:center;padding:15px 22px;
  border-bottom:1px solid var(--bd);font-size:14px;background:var(--bg);
  flex-wrap:wrap}
.topnav a{color:var(--tx)}
.topnav a:hover{color:var(--data);text-decoration:none}
.topnav .brand{font:800 19px/1 var(--ff);letter-spacing:-.6px;color:var(--tx)}
.topnav .brand b{color:var(--gem)}
.topnav .right{margin-left:auto;display:flex;gap:14px;align-items:center;
  color:var(--tx2);font-size:13px}

/* ── Формы ────────────────────────────────────────────────────────────────── */
label{display:block;font:800 9px/1 var(--ff);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx2);margin:0 0 7px}
input{width:100%;padding:11px 13px;margin-bottom:16px;font-size:16px;
  border:1px solid var(--bd);border-radius:11px;background:var(--sunk);
  color:var(--tx)}
input::placeholder{color:var(--tx2)}
/* фокус виден границей, а не системным кольцом */
input:focus{border-color:var(--data)}

button{padding:12px 18px;font:700 13.5px/1 var(--ff);border:none;
  border-radius:var(--rchip);background:var(--cta);color:var(--ctaTx);
  cursor:pointer;transition:filter .16s ease}
button:hover{filter:brightness(1.12)}
button.ghost{background:none;color:var(--tx2);padding:0;font-weight:600;
  font-size:inherit;border-radius:0}
button.ghost:hover{color:var(--tx);filter:none}

.err{background:rgba(255,0,51,.12);border:1px solid var(--cta);color:#FF6B85;
  padding:10px 12px;border-radius:11px;font-size:13px;margin-bottom:18px}
.ok{background:var(--posSoft);border:1px solid var(--pos);color:#5FD97A;
  padding:10px 12px;border-radius:11px;font-size:13px;margin-bottom:18px}

/* ── Одиночный экран: вход, приглашение, сброс, отказ ─────────────────────
   Экраны, которые видит ЕЩЁ НЕ вошедший человек. Каркаса приложения у них нет.

   Всё правила ниже вложены в `.single` намеренно: тот же файл держит глобальные
   `input`, `button`, `label` и `.card` для страниц внутри приложения, и без
   вложенности они бы дрались. Один класс на <body> — и коллизий нет.

   Композиция из утверждённого макета (logindesign/vhod-11-ekranov.html): страница
   строго в высоту окна, прокрутки нет ни в одном состоянии. Отступы логотип →
   слоган → карточка → низ не заданы числом, а раздаются флексом (space-evenly),
   поэтому картинка держится и на ноутбуке, и на телефоне. Числовые отступы здесь
   ломались бы на каждой второй высоте окна. */
/* 100dvh со страховкой 100vh строкой выше: dvh — «динамическая» высота, она
   учитывает панель браузера телефона, а 100vh на iOS и Android считается БЕЗ
   неё. Нижние 60–115 px экрана уезжали под панель, и достать их было нечем:
   прокрутки здесь нет ни на одном уровне.
   Прокрутку добавляем только там, где содержимое перестало влезать: при поднятой
   клавиатуре карточка входа выше оставшегося экрана, и кнопка «Войти» оказывалась
   под ней без единого способа до неё добраться. Правило «прокрутки нет ни в одном
   состоянии» (комментарий выше) писалось про десктоп — на телефоне с клавиатурой
   оно означает «до кнопки не дотянуться». */
.single{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);font-size:14px}
.single .stage{flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;padding:16px 22px 18px}

.single .logo{flex:none;display:flex;align-items:center;gap:11px}
.single .logo svg{width:26px;height:26px;flex:none;
  filter:drop-shadow(0 0 9px rgba(0,230,118,.45))}
.single .logo b{font:800 18px/1 var(--ff);letter-spacing:-.6px}

.single .center{flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;overflow:hidden}
.single .stack{width:100%;flex:1;min-height:min-content;display:flex;
  flex-direction:column;align-items:center;justify-content:space-evenly}

.single .hero{flex:none;padding:0 16px}
.single .hero h1{margin:0;text-align:center;font:800 29px/1.12 var(--ff);
  letter-spacing:-1.2px}
/* Красный мазок под «твоего конкурента»: SVG абсолютом под словами, ширина 102% —
   мазок должен чуть выходить за текст, иначе читается как подчёркивание ссылки. */
.single .mark{position:relative;display:inline-block}
.single .mark svg{position:absolute;left:-1%;bottom:-9px;width:102%;height:10px}

.single .column{width:100%;max-width:520px;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.single .boxrow{width:100%;display:flex;justify-content:center}

/* Карточка. Имя `.box` сохранено от прежней вёрстки — на него смотрят тесты
   экранов; изменились только размеры и рамка. */
.single .box{flex:0 1 424px;min-width:288px;background:var(--surf);
  border:1px solid var(--bd);border-radius:var(--r);padding:18px 22px;
  animation:nfRise .2s ease both}
.single .box h2{margin:0 0 10px;font:800 24px/1.1 var(--ff);letter-spacing:-.9px}
.single .box h2.tight{margin-bottom:11px}
.single .sub{margin:0 0 13px;font:600 12.5px/1.4 var(--ff);color:var(--tx2)}
.single .sub.hint{margin-bottom:8px}
.single .sub.bad{color:#FF8DA1}
.single .sub b{color:var(--tx);font-weight:600}

/* ── Поля ──────────────────────────────────────────────────────────────── */
.single .fields{display:flex;flex-direction:column;gap:10px}
.single label.field{display:flex;flex-direction:column;gap:7px;margin:0;
  font:600 12px/1 var(--ff);letter-spacing:normal;text-transform:none;
  color:var(--tx2)}
.single .inp{width:100%;height:42px;margin:0;background:var(--sunk);
  border:1px solid var(--bd);border-radius:12px;padding:0 14px;
  font:500 16px/1 var(--ff);color:var(--tx)}
.single .inp::placeholder{color:rgba(255,255,255,.28)}
.single .inp:focus{border-color:var(--data)}
.single .inp.bad{border-color:rgba(255,0,51,.5)}
.single .pw{position:relative;display:block}
.single .pw .inp{padding-right:48px}
/* Глаз — прогрессивное улучшение: без JS пароль просто остаётся скрытым,
   форма от этого не ломается. Поэтому кнопка и рисуется скриптом, а не в разметке. */
.single .eye{position:absolute;top:5px;right:5px;width:38px;height:36px;border:0;
  background:transparent;border-radius:9px;cursor:pointer;display:grid;
  place-items:center;color:var(--tx2);padding:0}
.single .eye:hover{color:var(--tx);background:var(--surf2);filter:none}

.single .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.single .grow{flex:1}

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.single .cta{margin-top:2px;width:100%;height:44px;padding:0;border:0;
  border-radius:999px;background:var(--cta);color:#fff;font:700 14px/1 var(--ff);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;text-decoration:none}
.single .cta:hover{background:#E60039;filter:none}
.single .outline{width:100%;height:42px;padding:0;border:1px solid var(--bdS);
  background:transparent;color:var(--tx);border-radius:999px;
  font:700 13px/1 var(--ff);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;text-decoration:none}
.single .outline:hover{border-color:var(--tx);filter:none}
.single .quiet{width:100%;height:42px;padding:0;border:0;background:transparent;
  color:var(--tx2);border-radius:999px;font:600 12.5px/1 var(--ff);cursor:pointer}
.single .quiet:hover{color:var(--tx);filter:none}
.single .link{border:0;background:transparent;padding:0;cursor:pointer;
  font:600 12.5px/1 var(--ff);color:var(--data);border-radius:0}
.single .link:hover{color:var(--tx);filter:none}
.single .back{display:inline-flex;align-items:center;gap:7px;border:0;
  background:transparent;padding:0;margin-bottom:13px;cursor:pointer;
  font:600 12.5px/1 var(--ff);color:var(--tx2);border-radius:0}
.single .back:hover{color:var(--tx);filter:none}

/* Чекбокс «запомнить» — настоящий <input type=checkbox> с перерисованной
   коробкой. Не кнопка со скриптом: галочка обязана уходить на сервер
   и с выключенным JS. По умолчанию стоит — снимается кликом. */
.single .chk{display:inline-flex;align-items:center;gap:8px;margin:0;
  font:600 12.5px/1 var(--ff);letter-spacing:normal;text-transform:none;
  color:var(--tx);cursor:pointer}
.single .chk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;
  flex:none;margin:0;padding:0;border:1.6px solid var(--tx2);border-radius:5px;
  background:transparent;cursor:pointer;position:relative}
.single .chk input:checked{background:var(--data);border-color:var(--data)}
.single .chk input:checked::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--sunk);border-width:0 2.2px 2.2px 0;
  transform:rotate(43deg)}
.single .chk input:focus-visible{border-color:var(--data);
  box-shadow:0 0 0 3px var(--dataSoft)}

/* ── Бейджи, ошибки, подписи ───────────────────────────────────────────── */
.single .badge{width:44px;height:44px;border-radius:12px;display:grid;
  place-items:center;margin-bottom:13px}
.single .badge.ok{background:var(--posSoft);color:var(--pos)}
.single .badge.info{background:var(--dataSoft);color:var(--data)}
.single .badge.no{background:rgba(255,0,51,.12);color:#FF5C7A}
.single .badge.wait{background:rgba(255,210,77,.13);color:var(--warn)}
.single .pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:7px 12px;font:700 11.5px/1 var(--ff);margin-bottom:12px;
  background:var(--posSoft);color:var(--pos)}
/* Своё имя, не общий `.err`: тот живёт в страницах внутри приложения и имеет
   другие отступы. Два разных вида ошибки под одним классом разъехались бы. */
.single .errbox{display:flex;align-items:flex-start;gap:9px;
  background:rgba(255,0,51,.10);border:1px solid rgba(255,0,51,.34);
  border-radius:12px;padding:12px 13px;margin:0}
.single .errbox svg{flex:none;color:#FF5C7A;margin-top:1px}
.single .errbox span{font:500 12.5px/1.45 var(--ff);color:#FF8DA1}
.single .foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--bd);
  font:600 11.5px/1.45 var(--ff);color:var(--tx2)}
.single .fine{font:600 11.5px/1.4 var(--ff);color:var(--tx2)}
.single .note{text-align:center;font:600 11.5px/1.5 var(--ff);color:var(--tx2)}
/* Запасной код: моноширинный, целиком выделяется одним кликом (user-select:all) —
   человек копирует его в менеджер паролей, а не перепечатывает по слогам. */
.single .code{background:var(--sunk);border:1px solid var(--bdS);border-radius:12px;
  padding:14px;font:600 15px/1.6 var(--mono);color:var(--tx);text-align:center;
  letter-spacing:.4px;word-spacing:6px;user-select:all}

@media (max-width:560px){
  .single .stage{padding:14px 16px 16px}
  .single .hero h1{font-size:24px;letter-spacing:-.9px}
  .single .box{padding:16px 18px}
}

/* ── Движение ─────────────────────────────────────────────────────────────
   Кейфреймы дословно из прототипа. Переход в интерфейсе ровно один — ширина
   боковой панели (в app.css); всё остальное либо мгновенно, либо через nfRise. */
@keyframes nfRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nfShimmer{0%{background-position:-340px 0}100%{background-position:340px 0}}
@keyframes nfDots{0%,20%{opacity:.25}50%{opacity:1}100%{opacity:.25}}
@keyframes nfPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@keyframes nfWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes nfFill{from{width:4%}60%{width:72%}to{width:100%}}
@keyframes nfSpin{to{transform:rotate(360deg)}}

/* Уважаем системную настройку: движение — украшение, а не смысл. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

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

   Что чинится:
   1) Клавиатура выше кнопки «Войти». Экран заперт в overflow:hidden на двух
      уровнях (.single и .stage), поэтому при поднятой клавиатуре до кнопки было
      не добраться вовсе. Разрешаем прокрутку САМОЙ сцене — только на телефоне.
   2) Вертикальное центрирование при клавиатуре прижимает карточку под её край;
      на узком экране выравниваем по верху, тогда форма всегда начинается с полей.
   3) Поля 16px — выше в файле; ниже 16px iOS зумит страницу на тапе, и человек
      попадает на форму входа, увеличенную вдвое, без способа отменить зум. */
@media (max-width:700px){
  .single .stage{overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:14px 16px 20px}
  /* .center тоже заперт в overflow:hidden — прокрутка сцены выше без этого не
     работает: содержимое обрезается на уровне ниже. Снимаем оба. */
  .single .center{justify-content:flex-start;overflow:visible}
  .single .stack{justify-content:flex-start;gap:18px}
  /* Кнопка и поля — не меньше пальца. 44px это не «покрупнее», а нижняя граница
     попадания: ниже промахи начинают стоить чужих нажатий. */
  .single .cta,.single .quiet,.single .inp{min-height:46px}
}