/* Агашка — мини-апп.
 *
 * Один слой, а не десять. Прошлый файл рос заплатками v4…v16: :root был
 * объявлен тринадцать раз, первая палитра (фиолетовая) умерла под второй
 * (синей), радиусов набралось двенадцать штук, а !important — двадцать два.
 * Здесь всё собрано заново от токенов.
 *
 * Палитра снята с логотипа бота: синий кольца #2158AA, тёмно-синий костюма
 * #0B2854, латунь кальпака и лупы #C39947. Латунь нигде не работает текстом
 * — на белом у неё контраст 2.4:1; она метит зарплату полосой, а говорит
 * за неё затемнённая #8A6A22.
 *
 * Поверхность одна: белая карточка, волосяная граница, мягкая тень. Ни
 * стекла (backdrop-filter дорог на дешёвых Android), ни пластилиновых
 * теней. Радиусов три: 10 / 14 / 18.
 */

:root {
  /* Бренд */
  --brand:        #2158AA;
  --brand-press:  #1A4788;
  --brand-tint:   #EAF1FB;
  --deep:         #0B2854;
  --brass:        #C39947;
  --brass-ink:    #8A6A22;
  --brass-tint:   #FAF3E4;

  /* Поверхности */
  --bg:      #F4F7FA;
  --surface: #FFFFFF;
  --sunken:  #EEF3F9;
  --line:    #E2E8F1;
  --line-2:  #EDF1F6;

  /* Текст */
  --ink:   #0B2854;
  --ink-2: #33455E;
  --mut:   #5A6B84;
  --mut-2: #8393AC;

  /* Сигналы */
  --ok:        #0E7C5A;
  --ok-tint:   #E4F4EE;
  --danger:    #C2453D;
  --nav-idle:  #63748B;

  /* Форма */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;

  --shadow: 0 1px 2px rgba(11, 40, 84, .04), 0 8px 20px -14px rgba(11, 40, 84, .22);
  --shadow-lift: 0 2px 4px rgba(11, 40, 84, .06), 0 14px 28px -16px rgba(11, 40, 84, .3);

  --sab: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --nav: 72px;
  --foot: 74px;

  --ease: cubic-bezier(.2, .8, .3, 1);
}

html[data-theme="dark"] {
  --brand:        #5C95E8;
  --brand-press:  #4A82D4;
  --brand-tint:   #16263F;
  --deep:         #E9EFF8;
  --brass:        #D9AE5F;
  --brass-ink:    #E2BC77;
  --brass-tint:   #2A2415;

  --bg:      #0F1725;
  --surface: #18233A;
  --sunken:  #1E2B45;
  --line:    #263551;
  --line-2:  #212F49;

  --ink:   #E9EFF8;
  --ink-2: #BCCADC;
  --mut:   #8DA0BC;
  --mut-2: #6C7F9C;

  --ok:       #3FC795;
  --ok-tint:  #13312A;
  --danger:   #F07B72;
  --nav-idle: #93A5C0;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 32px -18px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* В тёмной теме акцент светлеет, и белый текст на нём даёт всего 3:1.
   Надпись на главной кнопке становится тёмной — 6.2:1. */
html[data-theme="dark"] .prim { color: #0C1B30; }
html[data-theme="dark"] .note button { color: #0C1B30; }
/* Вторичная кнопка в пустом экране. Две синие подряд конкурировали: более
   длинная «Показать просмотренные» выглядела главнее, чем «Показать ещё»,
   хотя ведёт в список, который к вечеру пустеет. */
.note button.ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

/* ── База ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 14px calc(var(--nav) + 22px + var(--sab));
}

body.has-dock  { padding-bottom: calc(var(--nav) + 84px + var(--sab)); }
/* Полоска оценки поднимает панель, и без этой добавки низ карточки
   переставал доставаться прокруткой всё время, пока она висит. */
body.has-rate  { padding-bottom: calc(var(--nav) + 76px + var(--sab)); }
body.has-dock.has-rate { padding-bottom: calc(var(--nav) + 84px + 56px + var(--sab)); }
body.chrome-foot { padding-bottom: calc(var(--foot) + 20px + var(--sab)); }
body.chrome-none { padding-bottom: calc(20px + var(--sab)); }

h2 {
  margin: 10px 2px 16px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.5px;
  color: var(--ink);
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */

button {
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  min-height: 50px;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s var(--ease), background-color .12s var(--ease), border-color .12s var(--ease);
}

button:active { transform: scale(.97); }

/* Звонок — единственное действие, которое делает не страница, а телефон:
   набор открывает система по ссылке tel:. Поэтому это ссылка, а не кнопка,
   и ей нужны те же размеры. */
a.prim {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  padding: 12px 18px;
  border: 1px solid var(--brand);
  border-radius: var(--r-m);
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
a.prim:active { background: var(--brand-press); border-color: var(--brand-press); }
.tel-num {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: .5px;
  color: var(--ink);
  text-align: center;
  padding: 6px 0 2px;
}

.prim {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}
.prim:active { background: var(--brand-press); border-color: var(--brand-press); }

button:disabled { opacity: .45; pointer-events: none; }

button.ico {
  width: 50px;
  min-height: 50px;
  height: 50px;
  flex: 0 0 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
}
.ico svg { width: 22px; height: 22px; flex: 0 0 22px; }
.ico.on { background: var(--ok-tint); border-color: transparent; color: var(--ok); }

.lnk {
  min-height: 0;
  width: 100%;
  padding: 12px 0 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
}
.lnk:active { transform: none; opacity: .6; }
/* Жалоба: она нужна, но спорить с «Связаться» ей нельзя. Ссылкой в потоке
   текста её не находили глазами — стала маленькой серой кнопкой со знаком,
   которая видна, но не тянет на себя. */
button.report {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--mut);
}
button.report > svg { width: 14px; height: 14px; flex: 0 0 14px; }
button.report:active { background: var(--line-2); }
.card-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.card-feedback button.report { margin-top: 0; }
/* Пропуск шага: доступен, но не соблазняет — он не в ряду кнопок и не
   акцентного цвета. */
.lnk.skip {
  margin-top: 6px;
  text-align: center;
  font-weight: 600;
  color: var(--mut);
}

/* Стрелка без слова читалась как украшение: из подэкранов поиска люди не
   понимали, как выйти. Подпись дороже на сорок пикселей и снимает вопрос. */
button.back {
  height: 40px;
  min-height: 40px;
  flex: 0 0 auto;
  gap: 4px;
  padding: 0 13px 0 8px;
  border-radius: var(--r-s);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
button.back svg { width: 19px; height: 19px; flex: 0 0 19px; }
button.back span { font-size: 14.5px; font-weight: 650; }

button.row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin-bottom: 8px;
}
button.row > svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--brand); }
/* Кнопка канала связи: настоящий знак мессенджера в своём цвете. Эмодзи
   рисуется шрифтом системы, выглядит на каждом телефоне по-своему и рядом
   с линейными иконками читается наклейкой. */
button.chan {
  /* Своё выравнивание, а не наследованное от .row: главная кнопка идёт с
     классами prim wide chan, где .row нет, и без display:flex отступ между
     знаком и подписью не работал — значок прилипал к тексту. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
button.chan > svg { width: 22px; height: 22px; flex: 0 0 22px; }
button.chan > span { flex: 1; text-align: left; }
/* Главная кнопка синяя, знак на ней должен остаться белым, а не фирменным —
   иначе зелёный WhatsApp на синем читается как ошибка вёрстки. */
.prim.chan > svg { fill: currentColor; }
.prim.chan > span { text-align: center; }

.btns { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.btns .prim { flex: 1; }
.btns.col { flex-direction: column; align-items: stretch; }
.btns.col button { width: 100%; }
.btns.col .prim { flex: none; }

/* ── Карточка ─────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 18px 17px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  /* backwards, а не both. both удерживает последний кадр после конца
     анимации, а у него transform: none — и он перебивает инлайновый стиль,
     которым свайп двигает карточку за пальцем. Карточка не двигалась вовсе
     именно поэтому. backwards даёт тот же вид до старта и ничего не держит
     после. */
  animation: rise .34s var(--ease) backwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Переход между карточками теперь направленный: «вперёд» приезжает справа,
   «назад» — слева. Раньше next и prev выглядели одинаково, и ощущение
   движения терялось. Только transform и opacity — на дешёвых Android это
   единственное, что идёт без рывков. */
/* Горизонтальные жесты забираем себе, вертикальный скролл оставляем
   браузеру — иначе свайп и прокрутка дерутся на раскрытом описании. */
.card { touch-action: pan-y; }

/* Колода: следующая карточка видна сзади и подрастает по мере свайпа. Без
   неё свайп читался как исчезновение, а не как перелистывание. */
.deck { position: relative; touch-action: pan-y; }
.deck > .card {
  position: relative;
  z-index: 1;
  /* Карточку двигают пальцем каждый кадр. Без собственного слоя браузер
     перерисовывает тень и скруглённые края на каждом шаге — отсюда рябь и
     дёрганье по краям. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Переход уже отыгран полётом предыдущей карточки и ростом задней: новая
   появляется на месте, без второго въезда поверх первого. */
.deck > .card.settled { animation: none; }
.deck > .card[hidden] { display: none !important; }
.deck > .card.behind {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  transform: scale(.94) translateY(12px);
  opacity: .55;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
/* Задняя карточка показывается целиком. Сначала я прятал на ней текст и
   блок совпадения — «силуэта достаточно». Получилось хуже: она вырастала на
   место с одним заголовком, а остальное появлялось только при подмене, и
   это читалось как «сначала название, потом через миг текст». Теперь
   вырастает то же самое, что останется на экране, и подмена не видна.
   Полоса позиции на задней карточке своя и верная — её тоже видно, иначе
   она выскакивала бы при подмене. */
.deck > .card.behind { animation: none; }

/* Отдача при добавлении в избранное. Заметнее, чем было: на иконке 20px
   рост в 1.24 почти не читался, да и класс раньше ставился только после
   ответа сервера — отдача приходила с задержкой сети. */
@keyframes pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  62%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
@keyframes ring {
  from { box-shadow: 0 0 0 0 rgba(14, 124, 90, .45); }
  to   { box-shadow: 0 0 0 14px rgba(14, 124, 90, 0); }
}
.ico.on svg { animation: pop .42s var(--ease); }
.ico.on { animation: ring .5s ease-out; }

/* Позиция в подборке: цифра и тонкий прогресс */
.pos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--mut);
}
.pos .bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--sunken);
  overflow: hidden;
}
.pos .bar i { display: block; height: 100%; border-radius: 2px; background: var(--brand); }

/* Заголовок вакансии. В базе 36% длиннее 28 символов, максимум 121 —
   поэтому обрезаем на четвёртой строке, а не растягиваем карточку. */
.ttl {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.45px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Название компании. 26% длиннее 30 символов, максимум 244 (госучреждения
   с полным официальным именем) — две строки и многоточие. */
.comp {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--mut);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Зарплата — самое громкое на карточке. Латунная полоса вместо плашки:
   градиентный блок спорил с заголовком за внимание. */
.pay {
  margin-top: 16px;
  padding-left: 13px;
  border-left: 3px solid var(--brass);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.7px;
  color: var(--ink);
}
.pay-l {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.pay-s {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--mut);
}
/* Зарплаты нет у части вакансий — тогда не золото, а честная серая рамка. */
.pay.none { border-left-color: var(--line); }
.pay.none .pay-v {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--mut);
}

/* ── Чипы ─────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.tg-chip {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  padding: 7px 11px;
  border-radius: var(--r-s);
  background: var(--sunken);
  color: var(--ink-2);
}
/* Чип-подсказка в поиске: тот же вид, но это кнопка, а не ярлык. */
button.tg-chip.tap {
  border: 1px solid var(--line);
  min-height: 0;
  font-size: 13.5px;
  padding: 9px 13px;
  color: var(--ink);
}
/* Профессии внутри сферы: счётчик рядом с названием — видно, где густо. */
.chips.profs { margin-top: 2px; margin-bottom: 12px; }
.chips.profs .tg-chip span { margin-left: 5px; color: var(--mut); font-weight: 650; }
button.tg-chip.tap:active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }

.tg-chip.ok { background: var(--ok-tint); color: var(--ok); }
/* «Частное лицо» — 31% базы. Информация есть, важности ноль. */
.tg-chip.soft {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mut);
}

/* ── Совпадение с анкетой ─────────────────────────────────────────────── */

.sc {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line-2);
}

/* Процент — пилюля, а не заголовок: это подсказка, а не главное на карточке. */
.sc-top {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-s);
  background: var(--brand-tint);
}
.sc-num { font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--brand); }
.sc-lab { font-size: 12.5px; font-weight: 650; color: var(--brand); }

/* Слабое совпадение не должно звучать так же бодро, как сильное. */
.sc.lo .sc-top { background: var(--sunken); }
.sc.lo .sc-num, .sc.lo .sc-lab { color: var(--mut); }
.sc.hi .sc-top { background: var(--ok-tint); }
.sc.hi .sc-num, .sc.hi .sc-lab { color: var(--ok); }

.sc-i {
  position: relative;
  margin-top: 9px;
  padding-left: 23px;
  font-size: 13.5px;
  line-height: 1.38;
  color: var(--ink-2);
}
/* Галочка — только у совпадений. */
.sc-i.yes::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--ok);
  border-bottom: 2.5px solid var(--ok);
  transform: rotate(-45deg);
}
/* Оговорка — прочерк и приглушённый цвет. Под одной галочкой с плюсами
   «нужен опыт от года» читался как достоинство вакансии. */
.sc-i.nope { color: var(--mut); }
.sc-i.nope::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--mut-2);
}

.sc-hint {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: var(--r-s);
  background: var(--brass-tint);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--brass-ink);
}

/* ── Текст вакансии ───────────────────────────────────────────────────── */

.desc, .full, .body {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Первый блок в карточке не отбивается сверху — иначе двойной отступ. */
.card > .desc:first-child,
.card > .full:first-child,
.card > .body:first-child { margin-top: 0; }

.body b { font-weight: 700; color: var(--ink); }
.body b:first-child {
  display: block;
  margin-bottom: 6px;
  font-size: 19px;
  line-height: 1.24;
  letter-spacing: -.35px;
}

/* Обрезаем только сырое описание работодателя: оно бывает на 965 знаков.
   Выжимку показываем целиком — она и есть краткая версия, её медиана 231
   знак, а в пять строк влезает 210, и обрывалось 65% карточек. */
.card > .desc.clip {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Карточка в списке ────────────────────────────────────────────────── */
/* «Избранное» и «Горячие» — это списки. Полная карточка там занимала весь
   экран, и пролистать пять сохранённых было невозможно. */

.card.compact { padding: 15px 16px; }
.card.compact .ttl { font-size: 17.5px; -webkit-line-clamp: 2; letter-spacing: -.3px; }
.card.compact .comp { margin-top: 3px; font-size: 12.5px; -webkit-line-clamp: 1; }
.card.compact .pay { margin-top: 11px; font-size: 18px; letter-spacing: -.4px; }
.card.compact .pay-l { font-size: 9.5px; margin-bottom: 2px; }
.card.compact .pay-s { display: none; }
.card.compact .chips { margin-top: 10px; }
.card.compact .sc { margin-top: 11px; padding-top: 11px; }
.card.compact .sc-i,
.card.compact .sc-hint,
/* В списке жалобы нет: там сканируют, а не разбираются с конкретной
   вакансией. Она появляется на полной карточке и в подборе. */
.card.compact button.report,
.card.compact .lnk:not(.more),
.card.compact .orig { display: none; }
/* Две строки не давали понять, что предлагают. Четыре — это примерно
   половина выжимки; остальное дочитывается на экране вакансии, куда ведёт
   и «Подробнее», и нажатие на саму карточку. */
.card.compact > .desc {
  margin-top: 11px;
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card.compact .lnk.more {
  width: auto;
  padding: 7px 0 0;
  font-size: 13.5px;
}
.card.tapable { cursor: pointer; }
/* Список листают, а не решают по каждой карточке. Синяя кнопка во всю
   строку перетягивала на себя весь экран — здесь она размером с действие. */
.card.compact .btns { margin-top: 13px; }
.card.compact .btns .prim {
  flex: 0 1 auto;
  margin-left: auto;
  height: 42px;
  min-height: 42px;
  padding: 0 20px;
  font-size: 14.5px;
}
.card.compact .btns .ico {
  width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
}
.card.compact .btns .ico svg { width: 19px; height: 19px; flex: 0 0 19px; }

.orig { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.orig[hidden] { display: none; }
.orig-l {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--mut-2);
}

/* ── Строки профиля ───────────────────────────────────────────────────── */

/* Заполненность анкеты. По базе зарплату указали 33%, график 31% — а это
   ровно те сигналы, без которых процент совпадения падает сам. Экран
   профиля об этом молчал: десять одинаковых строк, где незаполненное
   отличалось только серым текстом. */
.fill {
  margin: 2px 0 18px;
  padding: 15px 16px;
  border-radius: var(--r-m);
  background: var(--brand-tint);
}
.fill.full { background: var(--ok-tint); }
.fill-h {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--brand);
}
.fill.full .fill-h { color: var(--ok); }
.fill-bar {
  height: 5px;
  margin: 10px 0 9px;
  border-radius: 3px;
  background: rgba(33, 88, 170, .16);
  overflow: hidden;
}
.fill.full .fill-bar { background: rgba(14, 124, 90, .18); }
.fill-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transition: width .5s var(--ease);
}
.fill.full .fill-bar i { background: var(--ok); }
.fill-t { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* Заголовок группы: «Возраст», «Язык интерфейса» и «Отзыв» — три разных
   по смыслу вещи, а выглядели одинаково. */
.grp {
  margin: 20px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--mut-2);
}

/* Тумблер вместо стрелки там, где это включатель, а не переход вглубь. */
.sw {
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background-color .18s var(--ease);
}
.sw i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 40, 84, .3);
  transition: transform .18s var(--ease);
}
.sw.on { background: var(--brand); }
.sw.on i { transform: translateX(18px); }

.prow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 14px 16px;
  border-radius: var(--r-m);
  text-align: left;
}
.prow-i { flex: 0 0 auto; display: flex; align-items: center; }
.prow-i svg { width: 22px; height: 22px; display: block; }
/* flex: 1 — иначе space-between у .prow растащил бы значок, подпись и
   стрелку по всей ширине вместо «значок и подпись слева, стрелка справа». */
.prow-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.prow-l { font-size: 15px; font-weight: 650; color: var(--ink); }
.prow-v {
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chev { width: 18px; height: 18px; flex: 0 0 18px; color: var(--mut-2); }

/* Незаполненное поле: «не указана» серым терялось среди заполненных. */
.prow.empty .prow-v {
  color: var(--brand);
  font-weight: 650;
}
.prow.empty { border-color: var(--brand-tint); }

button.danger { color: var(--danger); }

/* Плитки выбора: список строчками на восемь районов или шестнадцать сфер
   требовал скролла, а выбор — перебора сверху вниз. Плитками всё видно
   разом. Минимальная ширина держит цель пальца крупной. */
/* «Что даёт анкета» — три проверяемых обещания там, где выгода ощутима:
   человек только что писал работодателю сам. */
/* Первый экран: здоровается персонаж бренда, дальше одна живая фраза и
   три строки о том, что он делает. Раньше тут были крупное «Здравствуйте!»
   и карточка с галочками — человек видел список возможностей, как в
   описании товара, хотя продукт называет себя человеком. */
.wel { text-align: center; padding: 6px 0 4px; }
.wel-logo {
  width: 112px;
  height: 112px;
  margin: 2px auto 14px;
  display: block;
  border-radius: 50%;
  /* Мягкая подложка: логотип нарисован на белом, и на светлом фоне без
     неё круг терялся, а в тёмной теме висел бы светлым пятном. */
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(11, 40, 84, .10);
}
.wel-h { margin: 0 0 8px; font-size: 25px; letter-spacing: -.4px; }
.wel-l {
  margin: 0 auto 22px;
  max-width: 330px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--mut);
}
/* Без рамки и галочек: это рассказ о себе, а не чек-лист. */
.wel-list { text-align: left; display: flex; flex-direction: column; gap: 15px; }
.wel-row { display: flex; align-items: flex-start; gap: 12px; }
.wel-e {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 17px;
  line-height: 1;
}
/* Линейные значки вместо эмодзи: эмодзи рисует шрифт системы, на каждом
   телефоне по-своему, и рядом с плитками сфер он читался наклейкой. */
.wel-e svg { width: 19px; height: 19px; }
.wel-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wel-t b { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.wel-n { font-size: 13.5px; color: var(--mut-2); line-height: 1.35; }
/* С 29.09 это вопрос о городе — главный на экране, а не подпись к кнопкам
   языка, как было. */
.wel-pick {
  margin: 24px 2px 12px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.2px;
  color: var(--ink);
  text-align: center;
}

/* ── Анкета: шесть экранов ────────────────────────────────────────────── */
/* Было десять экранов по вопросу, четыре из них — один вопрос посреди
   пустоты. Стало шесть: «Привет», «Знакомство», «Работа», «Где и когда»,
   «Зарплата», «Номер», и «О себе» после регистрации. */

/* Переключатель на два значения: язык на первом экране, пол. */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-m);
  background: var(--sunken);
}
.seg button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--mut);
  font-size: 14.5px;
  font-weight: 650;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.wel-lang { max-width: 236px; margin: 0 0 8px auto; }
.wel .wel-logo { width: 104px; height: 104px; margin-top: 0; }

/* Город — главный вопрос первого экрана: нажатие начинает анкету. */
.city-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.city-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-height: 96px;
  padding: 14px 14px 12px;
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
  text-align: left;
}
.city-card b { font-size: 18px; font-weight: 750; letter-spacing: -.3px; color: var(--ink); }
.city-card .city-n { min-height: 19px; font-size: 13px; font-weight: 600; color: var(--mut); }
.city-card i {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
}
.city-card i svg { width: 16px; height: 16px; }
.city-card.on { border-color: var(--brand); }
/* Нечётное число городов: последний — на всю ширину, а не один в углу.
   Заодно длинному «Усть-Каменогорск» хватает места в одну строку. */
.city-cards .city-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 74px; }
.city-card.on i { background: var(--brand); color: #fff; }
.wel-note { margin: 10px 2px 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--mut); }

/* Шапка шага: «Назад», полоска из пяти делений, «2 из 5». */
.ob-top { display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; min-height: 40px; }
.ob-prog { flex: 1 1 auto; display: flex; gap: 5px; }
.ob-prog i {
  flex: 1 1 0;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  transition: background-color .2s var(--ease);
}
.ob-prog i.on { background: var(--brand); }
.ob-n { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--mut); white-space: nowrap; }
.ob-h { margin: 12px 2px 4px; }
.ob-sub { margin: 0 2px 16px; font-size: 14px; line-height: 1.45; color: var(--mut); }
.ob-cap {
  margin: 0 2px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mut);
}
.ob-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 18px 2px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
}
.ob-fld { display: flex; align-items: center; gap: 10px; }
.ob-fld input { flex: 1 1 auto; }
.ob-fld input.ob-age { flex: 0 0 96px; width: 96px; text-align: center; font-weight: 700; }
.ob-age-w { font-size: 15px; font-weight: 650; color: var(--mut); }

/* Карточка «так тебя увидит работодатель»: растёт, пока человек печатает. */
.ob-me, .ob-rv {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ob-me { display: flex; align-items: center; gap: 12px; padding: 14px; }
.ob-ava {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}
.ob-me-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ob-me-t b {
  font-size: 16.5px;
  font-weight: 750;
  letter-spacing: -.2px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ob-me-t span { font-size: 13.5px; color: var(--mut); }

/* Районы и график — чипами: восемь плиток районов занимали экран целиком. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
}
.pill svg { width: 14px; height: 14px; flex: 0 0 14px; }
.pill.on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }

/* Счётчик над кнопкой: сколько вакансий в выбранных сферах. */
.foot.col { flex-direction: column; gap: 8px; }
.foot.col button { flex: none; width: 100%; }
.ob-cnt { min-height: 20px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--mut); }
.ob-cnt b { color: var(--ink); font-weight: 750; }
body.chrome-foot.foot-tall { padding-bottom: calc(var(--foot) + 48px + var(--sab)); }
button.ob-share { display: flex; align-items: center; justify-content: center; gap: 8px; }
button.ob-share svg { width: 19px; height: 19px; flex: 0 0 19px; }

/* Анкета целиком перед номером — любую строку можно поправить. */
.ob-rv { overflow: hidden; }
.ob-rv-h { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-2); }
.ob-rv-r { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.ob-rv-r:last-child { border-bottom: 0; }
.ob-rv-k { flex: 0 0 76px; font-size: 13px; font-weight: 650; color: var(--mut); }
.ob-rv-v { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
button.ob-edit {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

/* «О себе»: голос — главная кнопка, сказать проще, чем написать. */
button.ob-mic {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
}
button.ob-mic svg { width: 22px; height: 22px; flex: 0 0 22px; }
.ob-mic-h { margin: 8px 2px 18px; text-align: center; }

/* Финал анкеты: число набегает, лучшая вакансия, остальные под замком. */
.rvl { text-align: center; padding-top: 12px; }
.rvl-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: 13px;
  font-weight: 700;
}
.rvl-ok svg { width: 15px; height: 15px; flex: 0 0 15px; }
.rvl-n {
  margin-top: 12px;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.rvl-l { margin: 6px 0 18px; font-size: 17px; font-weight: 700; color: var(--ink); }
.rvl-card {
  margin-bottom: 10px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  animation: rvlIn .5s var(--ease);
}
.rvl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rvl-t { font-size: 18px; font-weight: 750; letter-spacing: -.3px; line-height: 1.25; color: var(--ink); }
.rvl-best {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brass-tint);
  color: var(--brass-ink);
  font-size: 12px;
  font-weight: 700;
}
.rvl-pay { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rvl-pay i { flex: 0 0 4px; width: 4px; height: 22px; border-radius: 2px; background: var(--brass); }
.rvl-pay b { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.rvl-pay span { font-size: 13px; color: var(--mut); }
.rvl-m { margin-top: 4px; font-size: 14px; color: var(--mut); }
.rvl-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rvl-why span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: 12.5px;
  font-weight: 700;
}
.rvl-why svg { width: 13px; height: 13px; flex: 0 0 13px; }
.rvl .subg-list { text-align: left; animation: rvlIn .7s var(--ease); }
.rvl .subg-why { text-align: left; }
@keyframes rvlIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Шаг въезжает со стороны, куда идём. Без fill-mode: если WebView
   анимацию не запустит, экран останется видимым, а не прозрачным. */
#v.ob-in { animation: obIn .22s var(--ease); }
#v.ob-back { animation: obBack .22s var(--ease); }
@keyframes obIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes obBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #v.ob-in, #v.ob-back, .rvl-card, .rvl .subg-list { animation: none; }
}
/* Белое на светлом акценте тёмной темы — 3:1; как у главной кнопки, тёмное. */
html[data-theme="dark"] .ob-ava,
html[data-theme="dark"] .city-card.on i { color: #0C1B30; }

.perks {
  margin: 14px 0 10px;
  padding: 14px 15px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.perks-h {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.2px;
  color: var(--ink);
  margin-bottom: 11px;
}
.perk {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.perk-i {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perk-i svg { width: 13px; height: 13px; }
.perk b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.perk span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mut);
}

/* Шапка поиска липнет к верху: поле и фильтры должны оставаться на месте,
   пока листаешь выдачу, иначе поменять запрос можно только уехав наверх.
   Отрицательные поля — чтобы фон перекрывал отступы body по краям, а текст
   не проглядывал в щели. */
.s-head {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -8px -14px 10px;
  padding: 8px 14px 9px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
.s-head .srch { margin-bottom: 8px; }

.fchips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
/* Сегменты внутри «Избранного»: сохранённое и пролистанное. Тот же
   компонент, что чипы фильтров, — второй такой заводить незачем. */
.fchips.seg { margin: 2px 0 14px; }
.fchip {
  flex: 0 0 auto;
  min-height: 0;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.fchip.off { border-style: dashed; color: var(--mut); }
/* «Понял так»: что поиск вычитал из самой строки запроса. Это догадка, а
   не выбор человека, поэтому каждое условие снимается одним нажатием. */
.prow { align-items: center; margin: 0 0 10px; }
.prow-l { flex: 0 0 auto; font-size: 13px; color: var(--mut); }
.prow .fchip i { margin-left: 6px; font-style: normal; opacity: .65; }
.fchip.on {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}

.srch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  margin-bottom: 10px;
}
.srch svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--mut-2); }
.srch input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  padding: 14px 0;
  font: inherit;
  font-size: 16px;   /* меньше 16px — iOS зумит страницу при фокусе */
  color: var(--ink);
}
.srch-x {
  border: 0;
  background: none;
  min-height: 0;
  padding: 4px 2px;
  color: var(--mut);
  font-size: 15px;
}
/* Общее правило input:focus рисует контур вокруг самого поля — внутри
   строки поиска это выглядит как рамка в рамке. Подсвечиваем всю строку. */
/* type="search" даёт свой крестик очистки — рядом с нашим их становится два. */
.srch input::-webkit-search-cancel-button,
.srch input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.srch input:focus { outline: none; border-color: transparent; }
.srch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.srch-c { margin: 2px 2px 10px; font-size: 13px; color: var(--mut); }

/* Сохранённый поиск: название — кнопка, крестик — отдельная цель, чтобы не
   удалить случайно вместо открытия. */
.ss {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 8px;
}
.ss-t {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 650;
  padding: 12px 14px;
  line-height: 1.3;
}
.ss-x {
  flex: 0 0 46px;
  width: 46px;
  padding: 0;
  color: var(--mut);
  font-size: 15px;
}

/* ── Поиск: подсказки, выдача списком, сортировка, колокольчик (30.09) ── */

/* Подсказки при наборе: поиск уходит, когда человек выбрал, а не на каждую
   паузу в печати. */
.sugg {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  overflow: hidden;
}
.sugg-r {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.sugg-r:last-child { border-bottom: 0; }
.sugg-r span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-r b { flex: 0 0 auto; font-size: 13px; font-weight: 650; color: var(--mut); }
.sugg-r.go { color: var(--brand); }
.sugg-r.go svg { width: 17px; height: 17px; flex: 0 0 17px; }
.sugg-r:active { background: var(--sunken); transform: none; }

/* Выдача строками. Карточка целиком занимала полэкрана — полторы вакансии
   на экран там, где человек пробегает глазами десятки. */
.slist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.slist .grp { margin-top: 8px; }
.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 3px;
  width: 100%;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  text-align: left;
  font-weight: 400;
}
.srow:active { transform: scale(.99); background: var(--sunken); }
.srow-t {
  grid-column: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srow-m {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: 12.5px;
  font-weight: 750;
}
.srow-p { grid-column: 1 / -1; font-size: 14.5px; font-weight: 750; color: var(--ink); }
.srow-s { grid-column: 1 / -1; font-size: 13px; color: var(--mut); }

/* Оплаченное продвижение: золотой контур, процент остаётся отдельным. */
.card.promoted,
.srow.promoted {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(130deg, #AE7D2C 0%, #E1C079 30%, #BC8D38 66%, #DCBA6B 100%) border-box;
  box-shadow: 0 1px 2px rgba(115,82,28,.05), 0 8px 24px -16px rgba(149,105,26,.3);
}
.promo-label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  color: #78591F;
  background: #FAF3E4;
  font: 650 11.5px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border: 0;
  border-radius: 7px;
  padding: 0 8px;
  min-height: 28px;
}
.promo-label .promo-spark { width: 12px; height: 12px; flex: 0 0 12px; }
.promo-info {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -6px;
  font: 600 12px/1 Arial, sans-serif;
}
.card > .promo-label { margin-bottom: 11px; }
.srow.promoted { row-gap: 4px; }
.srow.promoted > .promo-label { grid-column: 1 / -1; margin-bottom: 2px; }
.srow-open {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 4px;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-weight: 400;
}
.srow-open:active { transform: none; }
html[data-theme="dark"] .card.promoted,
html[data-theme="dark"] .srow.promoted {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(130deg, #B28A43, #E2C181 32%, #C69D51 70%, #DEBC77) border-box;
}
html[data-theme="dark"] .promo-label { background: #332A18; color: #E8C684; }

/* Число находок и порядок — одной строкой. Порядок — обычный список:
   системный выбор на телефоне понятнее самодельного меню. */
.sbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 8px; }
.sbar .srch-c { flex: 1 1 auto; min-width: 0; margin: 0; }
.sort {
  position: relative;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 64%;
  min-height: 32px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.sort span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sort::after {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* Сам список невидим поверх подписи. Шрифт 16px — не для глаз: с меньшим
   iOS приближает страницу, когда список открывают. */
.sort select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  border: 0;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.sort:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.fchips.facets { margin: 0 0 8px; }
.fchips.facets .fchip span { margin-left: 4px; color: var(--mut); font-weight: 650; }
.fchip.x i { margin-left: 6px; font-style: normal; opacity: .65; }

/* Опечатку исправили сами — и сказали об этом. */
.corr {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: var(--brand-tint);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.corr .lnk { display: inline; width: auto; padding: 0; font-size: 13.5px; }
button.more { margin: 4px 0 12px; }

/* Картина рынка под ползунком зарплаты. Человеку нужны не «медиана» и
   «перцентиль», а сколько вакансий под него подходит и что изменится, если
   подвинуть. Столбики показывают это до того, как он прочтёт хоть слово. */
.mkt { margin: 14px 0 4px; }
.hist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 64px;
  padding: 0 1px;
  margin-bottom: 8px;
}
.hist i {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
  background: var(--line);
  transition: background-color .12s var(--ease), height .18s var(--ease);
}
.hist i.on { background: var(--brand); }
.mkt-n {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.3px;
  color: var(--ink);
}
.mkt-s {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mut);
}
.mkt-a {
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: var(--r-s);
  background: var(--brand-tint);
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--brand);
}
.mkt-skel { height: 64px; margin-bottom: 8px; border-radius: var(--r-s); background: var(--sunken); }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 8px;
}
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 12px;
  hyphens: auto;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}
/* Плитка сферы: логотип, название и сколько там сейчас открыто. Счётчик —
   главное, что отличает её от простого списка: видно, где густо, а где две
   штуки. Логотип даёт зацепиться глазом: шестнадцать одинаковых плиток
   приходилось читать подряд. Высота жёсткая — иначе ряд из двух плиток
   с разной длиной названия выходит рваным. */
.tile.sph {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 64px;
  height: 64px;
  padding: 0 11px;
  text-align: left;
  overflow: hidden;
}
.tile.sph .ti {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
}
.tile.sph .ti svg { width: 19px; height: 19px; }
.tile.sph .tt { min-width: 0; }
.tile.sph b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile.sph .tn {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 650;
  color: var(--mut);
}
.tile.sph.on .ti { background: var(--brand); color: #fff; }
.tile.sph.on .tn { color: var(--brand); }

.tile.on {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}
.tile:active { transform: scale(.96); }

.cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  border: 2px solid var(--mut-2);
  background: var(--surface);
  color: #fff;
  transition: background-color .14s var(--ease), border-color .14s var(--ease);
}
.cb svg { width: 14px; height: 14px; opacity: 0; transition: opacity .14s var(--ease); }
.cb.on { background: var(--brand); border-color: var(--brand); }
.cb.on svg { opacity: 1; }

/* ── Выбор зарплаты ───────────────────────────────────────────────────── */
/* Лесенка из шести кнопок давала только шесть сумм и подталкивала
   проскочить шаг. Ползунок — одно решение и любая сумма. */

.sal {
  margin: 4px 0 6px;
  padding: 22px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
  text-align: center;
}
.sal-v {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--ink);
}
.sal-e {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mut-2);
}
.sal input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: 0;
  min-height: 0;
}
.sal input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--sunken);
}
.sal input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--sunken);
}
/* Ручка крупная: попасть пальцем по маленькой на ходу невозможно. */
.sal input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 8px -1px rgba(11, 40, 84, .45);
  cursor: pointer;
}
.sal input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 8px -1px rgba(11, 40, 84, .45);
}
.sal input[type="range"]:focus { outline: none; }
.sal input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Служебные ────────────────────────────────────────────────────────── */
/* Раньше эти стили писались в разметке через style.cssText и ссылались на
   псевдонимы --hint / --card / --fg, которых в новой системе нет. */

.wide { width: 100%; margin-bottom: 9px; }

.hint {
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mut);
}
.hint.right { text-align: right; }
.hint + .wide { margin-top: 12px; }

/* Шаг онбординга: «Шаг 3 из 8» */
.step {
  margin: 2px 2px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--mut);
}

/* Разбор рассказа о себе: «Что мы поняли» */
.res-h {
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--mut-2);
}
.res-l {
  display: flex;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}
.res-l span {
  flex: 0 0 96px;
  color: var(--mut);
  font-size: 13.5px;
}

/* Запись голоса */
.timer {
  margin: 20px 0 6px;
  text-align: center;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Полоска громкости: таймер тикает одинаково и когда микрофон слышит, и
   когда он занят другим приложением. Без этого человек узнавал о тишине
   только после полуминуты расшифровки. */
.lvl {
  width: 70%;
  max-width: 260px;
  height: 6px;
  margin: 0 auto 16px;
  border-radius: 3px;
  background: var(--sunken);
  overflow: hidden;
}
.lvl i {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: 3px;
  background: var(--ok);
  transition: width .08s linear;
}
.rec-hint { margin: 0 8px 10px; text-align: center; }

/* Предпрослушивание перед отправкой. Волна нарисована из уровней, снятых
   во время записи: видно, где говорили, а где была тишина. Нативный
   <audio controls> выглядит по-разному в каждом браузере и про саму запись
   ничего не сообщает. */
.pl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
.pl-b {
  width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-b svg { width: 22px; height: 22px; }
.pl-w {
  flex: 1;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.pl-w i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color .12s linear;
}
.pl-w i.on { background: var(--brand); }
.voice-text { min-height: 150px; margin-top: 2px; }

/* Вакансия, открытая по ссылке от друга */
.shared-h {
  margin: 4px 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

.pl-t {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mut);
}
.note.warn {
  background: var(--brass-tint);
  border-color: transparent;
  color: var(--brass-ink);
  padding: 16px 18px;
  text-align: left;
}

.rec-live {
  margin-bottom: 20px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--danger);
}

/* ── Поля ─────────────────────────────────────────────────────────────── */

textarea, input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 14px 15px;
}
textarea { min-height: 140px; resize: vertical; }
input { min-height: 50px; }
textarea:focus, input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: transparent;
}
textarea::placeholder, input::placeholder { color: var(--mut-2); }

/* ── Заголовок экрана ─────────────────────────────────────────────────── */

.hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.hd h2 { margin: 0; flex: 1; min-width: 0; }
.hd .sub { flex-basis: 100%; margin-top: -8px; font-size: 14px; color: var(--mut); }

/* ── Заглушка и пустой экран ──────────────────────────────────────────── */

.note {
  margin-bottom: 12px;
  padding: 40px 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mut);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
/* Кнопка внутри .note — блоком: иначе она встаёт в строку и наезжает на
   текст (видно было на «свежих совпадений нет»). */
.note button + button { margin-top: 10px; }
.note button {
  display: block;
  margin: 18px auto 0;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  padding: 13px 24px;
}

/* Скелетон в форме карточки: заголовок, зарплата, чипы, строки текста.
   Два пустых прямоугольника читались как пустой экран, а ждать приходится
   секунд шесть — столько занимает подбор с AI-реранком. */
.skel-card {
  padding: 18px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
.sk {
  display: block;
  border-radius: 6px;
  background: var(--sunken);
  position: relative;
  overflow: hidden;
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(33, 88, 170, .1), transparent);
  animation: sweep 1.4s infinite;
}
.sk-title { height: 26px; width: 72%; margin-bottom: 9px; }
.sk-sub   { height: 13px; width: 52%; margin-bottom: 20px; }
.sk-pay   { height: 34px; width: 58%; margin-bottom: 18px; }
.sk-row   { display: flex; gap: 6px; margin-bottom: 20px; }
.sk-chip  { height: 28px; width: 92px; border-radius: var(--r-s); }
.sk-line  { height: 13px; width: 100%; margin-bottom: 9px; }
.sk-line.short { width: 64%; }
/* Крутилка рядом с подписью: скелетон показывает форму будущей карточки,
   но сам по себе не сообщает, что что-то происходит прямо сейчас. */
.skel-msg::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  border: 2.5px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skel-msg {
  margin: 16px 6px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mut);
}

.skel {
  height: 168px;
  margin-bottom: 12px;
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(33, 88, 170, .07), transparent);
  animation: sweep 1.5s infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ── Нижняя панель ────────────────────────────────────────────────────── */

nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--sab);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
nav[hidden] { display: none; }

/* Боковые отступы урезаны с 4px до 2px: ячейка вкладки на 320px выросла с
   58.4 до 63.2px. Подпись «ИИ подбор» — 59.3px, и на старых отступах её
   обрезало в «ИИ подбо…». Проверка этого не ловила: у подписи стоит
   text-overflow: ellipsis, поэтому контейнер не переполняется и выглядит
   здоровым. */
#tabs { display: flex; padding: 7px 2px 9px; }
#tabs button {
  flex: 1;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  color: var(--nav-idle);
  overflow: hidden;
}
#tabs button i { font-style: normal; display: flex; position: relative; }
/* Сколько появилось с прошлого захода — прямо на вкладке. Ради этой цифры
   не нужно ни уведомления, ни открытой рассылки. */
.tb {
  position: absolute;
  top: -5px;
  left: 13px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brass);
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

#tabs button i svg { width: 23px; height: 23px; }
#tabs button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tabs button.on { color: var(--brand); }
#tabs button:active { transform: scale(.92); }

/* Полоска «оцените приложение».
   Живёт в nav, НАД кнопками карточки: не закрывает вакансию, не ловит
   свайп, не требует ответа. Модальное окно на этом месте стоило бы
   просмотра — по чужим замерам приглашение поверх экрана повышает шанс,
   что апп закроют, примерно в полтора раза. */
#rate {
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}
#rate[hidden] { display: none; }
.rate-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 10px;
  animation: rate-up .26s var(--ease) both;
}
@keyframes rate-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.rate-q {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
}
.rate-s { display: flex; gap: 2px; flex: 0 0 auto; }
/* Звезда — кнопка, а не иконка: по ней целятся пальцем. 34px — нижняя
   граница, при которой промах перестаёт быть обычным делом. */
.rate-s button {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mut-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rate-s button svg { width: 24px; height: 24px; }
.rate-s button.on { color: #E8A317; }
/* Волна заливки при появлении: показывает, что звёзды живые и их можно
   нажать. Задержка по индексу задаётся инлайном. */
.rate-s button.on > svg { animation: rate-pop .34s var(--ease) both; }
@keyframes rate-pop {
  0%   { transform: scale(.6); opacity: .2; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.rate-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mut-2);
  font-size: 19px;
  line-height: 1;
}
.rate-note { padding: 10px 12px 12px; }
.rate-note textarea {
  width: 100%;
  min-height: 62px;
  margin: 0 0 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  resize: none;
}
.rate-note .r2 { display: flex; gap: 8px; }
.rate-note .r2 button { flex: 1; min-height: 40px; }
.rate-ok {
  padding: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--brass-ink);
}
@media (prefers-reduced-motion: reduce) {
  .rate-in, .rate-s button.on > svg { animation: none; }
}

/* Кнопки карточки живут над вкладками, в той же панели */
.dock {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
}
#dock[hidden] { display: none; }
.dock .prim { flex: 1; padding: 12px 8px; font-size: 14.5px; white-space: nowrap; }
.dock .ico { width: 46px; height: 46px; min-height: 46px; flex: 0 0 46px; }
.dock .ico svg { width: 20px; height: 20px; }
/* Пять кнопок в ряду: на 320px «Написать» переставало помещаться и текст
   обрезался. Поджимаем иконки и зазор — места хватает с запасом. */
@media (max-width: 360px) {
  .dock { gap: 6px; padding: 10px 8px; }
  .dock .ico { width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; }
  .dock .prim { padding: 12px 6px; }
}

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  gap: 10px;
  padding: 11px 14px calc(11px + var(--sab));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.foot button { flex: 1; min-height: 48px; margin: 0; }
.foot .prim { flex: 1.5; }

/* ── Доступность и слабые устройства ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .card, .skel::after,
  .ico.on svg, .ico.on { animation: none; }
  /* Колоду и движение за пальцем оставляем: это отклик на жест
     человека, а не декоративная анимация. Гасим только въезды и отдачу. */
  .deck > .card.behind, .sw, .sw i, .fill-bar i, .lvl i, .pl-w i { transition: none; }
  /* Крутилку оставляем: без неё ожидание в шесть секунд выглядит как зависание. */
  button, .cb, .cb svg, #tabs button { transition: none; }
  button:active, #tabs button:active { transform: none; }
}

/* Стена подписки: что нашлось под анкету и что откроется после подписки.
   Три названия с деньгами — обещание, которое можно проверить, поэтому
   список стоит отдельным блоком, а замок у каждой строки говорит «это
   твоё, просто закрыто», а не «здесь ничего нет». */
.subg { padding: 6px 2px 2px; }
.subg-h {
  margin: 4px 0 6px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--ink);
  text-wrap: balance;
}
.subg-l { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin-bottom: 14px; }
.subg-list {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  overflow: hidden;
}
.subg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
}
.subg-row:last-child { border-bottom: 0; }
.subg-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.subg-t b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subg-t span { font-size: 13.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.subg-lock {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.subg-lock svg { width: 15px; height: 15px; }
.subg-more {
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--mut);
  background: var(--sunken);
}
.subg-why { margin: 0 2px 16px; font-size: 13.5px; line-height: 1.45; color: var(--mut); }
.subg-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--ok-tint);
  color: var(--ok);
  animation: subgIn .35s var(--ease) both;
}
.subg-ok svg { flex: 0 0 22px; width: 22px; height: 22px; }
.subg-ok b { font-size: 15.5px; font-weight: 700; }
@keyframes subgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .subg-ok { animation: none; } }