/* К-247 — страница входа (правки заказчика 04.10, В1; макет «04.10 Вход, регистрация, УАТ», стр. 3–5).
   Слева карточка входа, справа крупно «К-247 АВТОЗАПЧАСТИ», внизу две диагональные полосы. Под первым экраном — подвал
   с документами площадки (на макете его нет; юридические ссылки с главной сохранены).
   Раскраска — переменными --lgn-*: что каким цветом залито, задаётся здесь один раз, а сами цвета меняет схема.
   Значения по умолчанию — образец макета «Графит / лайм».
   Правила интерфейса: цели не меньше 44 × 44 px, промежутки не меньше 8 px, без прокрутки вбок от 320 px, оформление
   только классами (атрибуты style не пускает Content-Security-Policy), рисунки — свои SVG. */

:root {
  --lgn-graphite: #404040;
  --lgn-amber: #FFC000;
  --lgn-ink: #1F1F1F;
  /* цвет схемы */
  --lgn-hl: #9CF600;
  /* фон страницы и надписи прямо на нём (шаги регистрации) */
  --lgn-bg: var(--lgn-graphite);
  --lgn-on-bg: #FFFFFF;
  /* карточка и надписи прямо на ней (ссылки, пояснения) */
  --lgn-card: var(--lgn-hl);
  --lgn-on-card: #111111;
  --lgn-card-line: transparent;
  /* поля ввода */
  --lgn-field: #FFFFFF;
  --lgn-on-field: var(--lgn-ink);
  --lgn-line: rgba(0, 0, 0, .62);
  /* кнопки */
  --lgn-btn: var(--lgn-graphite);
  --lgn-on-btn: #FFFFFF;
  /* логотип и полосы */
  --lgn-logo: var(--lgn-hl);
  --lgn-ray: var(--lgn-hl);
  --lgn-e: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 16 цветовых схем кабинета (правки 04.10, В2) ----------
   Схему ставит атрибут <html data-accent>: до первой отрисовки — theme-boot.js (выбор из браузера), по нажатию плитки —
   login.js. Цвет схемы — те же значения, что COLOR_SCHEMES в app/skins/themes.js и образцы sw-… в colorpick.css (сверку
   держит test/rev1004.js). */
[data-accent="4"] { --lgn-hl: #2F5BA8; }
[data-accent="3"] { --lgn-hl: #1CA4DB; }
[data-accent="12"] { --lgn-hl: #6F2F9F; }
[data-accent="11"] { --lgn-hl: #990099; }
[data-accent="8"] { --lgn-hl: #6FAC46; }
[data-accent="7"] { --lgn-hl: #9CF600; }
[data-accent="2"] { --lgn-hl: #FFC000; }
[data-accent="1"] { --lgn-hl: #FFFF00; }
[data-accent="5"] { --lgn-hl: #FF46B8; }
[data-accent="6"] { --lgn-hl: #E70079; }
[data-accent="9"] { --lgn-hl: #7E7F7E; }
[data-accent="10"] { --lgn-hl: #000000; }
[data-accent="graphite-yellow"] { --lgn-hl: #FFFF00; }
[data-accent="graphite-cyan"] { --lgn-hl: #00B0E8; }
[data-accent="graphite-pink"] { --lgn-hl: #FF46B8; }
[data-accent="graphite-lime"] { --lgn-hl: #9CF600; }

/* Три шаблона раскраски — по трём образцам макета; остальные схемы строятся по тем же шаблонам.
   1. «Графитовые» (4 схемы; образец «Графит / лайм»): фон графит, карточка, логотип и полосы — цвет схемы, поля белые,
      кнопки графитовые. Это значения :root выше.
   2. Светлые — жёлтый, янтарный, лайм (образец «Жёлтый»): фон — цвет схемы, карточка белая, поля — цвет схемы, кнопки,
      логотип и полосы графитовые. */
:is([data-accent="1"], [data-accent="2"], [data-accent="7"]) {
  --lgn-bg: var(--lgn-hl);
  --lgn-on-bg: var(--lgn-ink);
  --lgn-card: #FFFFFF;
  --lgn-on-card: var(--lgn-ink);
  --lgn-card-line: rgba(0, 0, 0, .72);
  --lgn-field: var(--lgn-hl);
  --lgn-logo: var(--lgn-graphite);
  --lgn-ray: var(--lgn-graphite);
}
/* 3. Остальные девять (образец «Голубой»): фон белый, карточка, логотип и полосы — цвет схемы, поля белые, кнопки янтарные
      с тёмным текстом. Текст в полях — тёмный (на макете он цвета схемы: на белом это ниже нормы контраста). */
:is([data-accent="4"], [data-accent="3"], [data-accent="12"], [data-accent="11"], [data-accent="8"], [data-accent="5"],
    [data-accent="6"], [data-accent="9"], [data-accent="10"]) {
  --lgn-bg: #FFFFFF;
  --lgn-on-bg: var(--lgn-ink);
  --lgn-on-card: #FFFFFF;
  --lgn-card-line: rgba(0, 0, 0, .72);
  --lgn-btn: var(--lgn-amber);
  --lgn-on-btn: var(--lgn-ink);
}
/* надписи прямо на карточке (ссылки, пояснения): белые на тёмном цвете схемы, тёмные на светлом — не ниже 4,5:1 */
:is([data-accent="3"], [data-accent="8"], [data-accent="5"]) { --lgn-on-card: #111111; }
:is([data-accent="6"], [data-accent="9"]) { --lgn-on-card: #000000; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--lgn-bg); color: var(--lgn-ink);
  font-family: "Wix Madefor Text", system-ui, sans-serif; font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
/* атрибут hidden сильнее display шагов, полей и кнопок */
[hidden] { display: none !important; }
a { color: inherit; }
/* подпись поля для чтения с экрана: на макете название поля написано внутри него */
.lgn-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- первый экран: полоса выбора цвета и сцена макета ---------- */
.lgn-screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* Полоса выбора цвета (В2): белая, над ней — узкая кромка фона страницы, как на макете. Плитки — общие с окном «Выбор
   цвета» кабинета (colorpick.css), здесь они мельче и стоят в один ряд; цвета полосы от схемы не зависят. */
/* min-height: место под плитки занято ещё до того, как login.js их нарисует, — карточка под полосой не прыгает */
.lgn-strip {
  position: relative; z-index: 3; flex: 0 0 auto; min-height: 94px; margin-top: 10px; padding: 10px 12px;
  background: #FFFFFF; color: #222222;
}
.lgn-strip__toggle { display: none; }
.lgn-strip .colorpick { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 8px; }
.lgn-strip .colorpick__item { align-content: start; gap: 4px; padding: 4px 3px; font: inherit; }
.lgn-strip .colorpick__sample { height: 34px; }
.lgn-strip .colorpick__name { font-size: 10.5px; line-height: 1.2; text-align: center; }
.lgn-strip .colorpick__check { right: 6px; top: 6px; width: 18px; height: 18px; }
/* 16 плиток в ряд — пока в плитку помещается самое длинное название («Фиолетовый»); уже — два ряда по восемь */
@media (max-width: 1299px) {
  .lgn-strip { min-height: 150px; }
  .lgn-strip .colorpick { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* телефон: полоса свёрнута в кнопку «Сменить цвет» с образцом выбранной схемы; плитки — по четыре в ряд */
@media (max-width: 600px) {
  .lgn-strip { min-height: 0; padding: 8px 16px; }
  .lgn-strip__toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 18px 5px 6px;
    border: 1px solid #8A8782; border-radius: 999px; background: #FFFFFF; color: #222222;
    font: inherit; font-size: 15px; cursor: pointer;
  }
  .lgn-strip__toggle:focus-visible { outline: 3px solid #1764B0; outline-offset: 3px; }
  .lgn-strip__toggle[aria-expanded="true"] { box-shadow: 0 0 0 2px #222222; }
  .lgn-strip .lgn-strip__now { flex: 0 0 auto; width: 46px; height: 32px; border-radius: 999px; }
  .lgn-strip__list { display: none; margin-top: 8px; }
  .lgn-strip.is-open .lgn-strip__list { display: block; }
  .lgn-strip .colorpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .lgn-strip .colorpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lgn-stage {
  position: relative; flex: 1 0 auto; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: start;
  column-gap: clamp(16px, 3vw, 48px);
  padding: clamp(24px, 7vh, 64px) clamp(16px, 4.7vw, 72px) clamp(32px, 8vh, 96px);
}

/* ---------- карточка ---------- */
.lgn-card {
  position: relative; z-index: 2; grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 590px; min-height: clamp(440px, 62vh, 530px);
  margin-top: clamp(0px, 3vh, 26px);
  padding: clamp(32px, 9vh, 80px) clamp(20px, 6.2vw, 90px) clamp(24px, 4vh, 34px);
  background: var(--lgn-card); color: var(--lgn-on-card);
  border: 1.5px solid var(--lgn-card-line); border-radius: 44px;
  box-shadow: 5px 6px 8px rgba(0, 0, 0, .38);
}
.lgn-step { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.lgn-form { display: grid; gap: clamp(14px, 2.8vh, 24px); }
.lgn-title {
  font-family: "Wix Madefor Display", system-ui, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.15;
  text-align: center; text-wrap: balance; margin-bottom: 12px;
}

.lgn-field { display: block; }
.lgn-field input {
  display: block; width: 100%; min-height: 56px; padding: 8px 22px;
  border: 1.5px solid var(--lgn-line); border-radius: 999px;
  background: var(--lgn-field); color: var(--lgn-on-field);
  font: inherit; font-size: 19px; font-weight: 600; text-align: center;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, .3);
}
/* название поля внутри него — того же цвета, что и введённый текст (контраст не ниже 4,5:1), но обычным начертанием */
.lgn-field input::placeholder { color: var(--lgn-on-field); opacity: 1; font-weight: 400; }
.lgn-field input:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; }

.lgn-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 8px 22px;
  border: 0; border-radius: 999px;
  background: var(--lgn-btn); color: var(--lgn-on-btn);
  font: inherit; font-size: 19px; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, .3);
  transition: transform 160ms var(--lgn-e), box-shadow 160ms var(--lgn-e), filter 160ms var(--lgn-e);
}
.lgn-btn:hover { filter: brightness(1.12); }
.lgn-btn:active { transform: translate(1px, 2px); box-shadow: 1px 2px 3px rgba(0, 0, 0, .3); }
.lgn-btn:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; }
.lgn-btn:disabled { opacity: .6; cursor: progress; }
/* «Войти в кабинет» уже полей, как на макете */
.lgn-btn--enter { width: 68%; min-width: min(100%, 230px); justify-self: center; }
/* нижняя кнопка карточки прижата к её низу: между ней и входом — свободное место макета */
.lgn-btn--last { margin-top: auto; }

.lgn-link {
  align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  margin-bottom: 20px; color: var(--lgn-on-card); font-size: 16px; text-align: center;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.lgn-link:hover { text-decoration-thickness: 2px; }
.lgn-link:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; border-radius: 8px; }
.lgn-note { font-size: 14px; text-align: center; text-wrap: balance; color: var(--lgn-on-card); }

/* ---------- логотип ---------- */
.lgn-brand { position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; }
.lgn-brand__link {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  color: var(--lgn-logo); text-decoration: none; border-radius: 12px;
}
.lgn-brand__link:focus-visible { outline: 3px solid var(--lgn-logo); outline-offset: 6px; }
.lgn-brand__k {
  font-family: "Wix Madefor Display", system-ui, sans-serif; font-weight: 800; font-style: italic;
  font-size: clamp(72px, 13vw, 196px); line-height: .92; letter-spacing: -0.03em; white-space: nowrap;
  /* наклонное начертание выступает вправо за свою рамку — запас, чтобы край буквы не обрезался */
  padding-right: .07em;
  text-shadow: .018em .026em .03em rgba(0, 0, 0, .45);
}
.lgn-brand__s {
  margin-top: .55em; padding-right: .3em;
  font-weight: 800; font-size: clamp(14px, 1.75vw, 26px); line-height: 1; text-transform: uppercase;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .3);
}

/* ---------- две диагональные полосы ---------- */
.lgn-rays {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  width: 70.8%; height: 40%; min-height: 150px; pointer-events: none;
  filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .22));
}
.lgn-rays polygon { fill: var(--lgn-ray); }

/* ---------- подвал: документы площадки ---------- */
.lgn-foot {
  display: grid; gap: 8px; padding: 16px clamp(16px, 4.7vw, 72px) 24px;
  background: #2E2D2B; color: #F2F1EE; font-size: 13.5px;
}
.lgn-foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-color: rgba(242, 241, 238, .5); text-underline-offset: 3px;
}
.lgn-foot a:hover { text-decoration-color: currentColor; }
.lgn-foot a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lgn-foot__home { justify-self: start; font-size: 14.5px; }
.lgn-foot__op { opacity: .85; overflow-wrap: anywhere; }
.lgn-foot__docs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- сообщение ---------- */
.lgn-toast {
  position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 60;
  width: fit-content; max-width: 560px; margin: 0 auto; padding: 12px 22px;
  background: #1F1F1F; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px;
  font-size: 15px; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity 300ms var(--lgn-e), transform 560ms var(--lgn-e);
}
.lgn-toast.is-on { opacity: 1; transform: none; }
.lgn-toast--err { background: #B3261E; }

/* ---------- планшет и телефон: одна колонка — логотип, карточка, полосы под ней ---------- */
@media (max-width: 899px) {
  .lgn-stage {
    grid-template-columns: minmax(0, 1fr); row-gap: 20px; justify-items: center; align-content: start;
    padding: 16px 16px 150px;
  }
  .lgn-brand { grid-column: 1; grid-row: 1; }
  .lgn-brand__k { font-size: clamp(64px, 19vw, 132px); }
  .lgn-brand__s { font-size: clamp(14px, 3.2vw, 20px); }
  .lgn-card {
    grid-column: 1; grid-row: 2; max-width: 560px; min-height: 0; margin-top: 0;
    padding: 28px clamp(16px, 7vw, 72px) 24px; border-radius: 32px;
  }
  .lgn-btn--enter { width: 100%; }
  .lgn-link { margin-bottom: 12px; }
  .lgn-rays { width: 100%; height: 130px; min-height: 0; }
}

/* ---------- регистрация: общая сцена шагов #reg… (правки 04.10, В3–В6; макет, стр. 7–16) ----------
   Шаг — <html data-view="reg…"> (до скриптов страницы его ставит theme-boot.js, дальше — login.js). Полосы выбора цвета
   нет, логотип — малый слева вверху, напротив него — «Перейти ко входу»; карточка — широкая по центру; логотип и полосы
   приглушены, как на макете. Раскраска — те же переменные --lgn-*, что у входа: шаблоны схем действуют и здесь. */
.lgn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rg-enter { display: none; }
/* открыт адрес шага регистрации, а login.js ещё не отработал: карточка входа не мигает */
html[data-view^="reg"] .lgn-step[data-step="login"] { display: none; }
html[data-view^="reg"] .lgn-strip { display: none; }
html[data-view^="reg"] .lgn-stage {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; row-gap: 12px;
  padding: 14px clamp(16px, 2.6vw, 40px) clamp(48px, 10vh, 110px);
}
html[data-view^="reg"] .lgn-brand { grid-column: 1; grid-row: 1; justify-self: start; opacity: .6; }
html[data-view^="reg"] .lgn-brand__link { align-items: flex-end; min-height: 44px; }
html[data-view^="reg"] .lgn-brand__k { font-size: clamp(46px, 4.4vw, 62px); }
html[data-view^="reg"] .lgn-brand__s { margin-top: .5em; font-size: 11px; }
html[data-view^="reg"] .lgn-rays { max-height: 44vh; opacity: .5; }
html[data-view^="reg"] .rg-enter {
  position: relative; z-index: 2; grid-column: 2; grid-row: 1; justify-self: end;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 20px;
  border: 1.5px solid var(--lgn-on-bg); border-radius: 999px; color: var(--lgn-on-bg);
  font-size: 16px; text-decoration: none; white-space: nowrap;
}
.rg-enter:hover { text-decoration: underline; text-underline-offset: 4px; }
.rg-enter:focus-visible { outline: 3px solid var(--lgn-on-bg); outline-offset: 3px; }
html[data-view^="reg"] .lgn-card {
  grid-column: 1 / -1; grid-row: 2; justify-self: center;
  max-width: 1100px; min-height: 0; margin-top: 0; padding: clamp(14px, 1.8vw, 22px); border-radius: 44px;
}
/* шаг «кто регистрируется»: общей карточки нет — две отдельные */
html[data-view="reg"] .lgn-card { max-width: 1046px; padding: 0; background: none; border-color: transparent; box-shadow: none; }

/* рисунок: человек и малый рисунок вида справа сверху (пропорции — по макету) */
.rg-fig { position: relative; display: block; width: 100%; max-width: 372px; aspect-ratio: 372 / 326; color: var(--lgn-on-card); }
.rg-fig svg { position: absolute; display: block; overflow: visible; }
.rg-fig__man { left: 0; bottom: 0; width: 70.5%; aspect-ratio: 280 / 300; }
.rg-fig__ico { right: 0; top: 0; width: 36%; aspect-ratio: 160 / 120; }

/* ---------- шаг 1: «Физическое лицо» / «Юридическое лицо» (В3) ---------- */
.rg-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 437px)); justify-content: space-between; align-items: start; gap: 20px 24px; }
.rg-pick__cell { display: grid; gap: 10px; min-width: 0; }
.rg-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  min-height: clamp(400px, 60vh, 530px); padding: clamp(18px, 5vh, 46px) 14px 16px;
  background: var(--lgn-card); color: var(--lgn-on-card);
  border: 1.5px solid var(--lgn-card-line); border-radius: 44px;
  box-shadow: 5px 6px 8px rgba(0, 0, 0, .38); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--lgn-e), box-shadow 160ms var(--lgn-e);
}
.rg-card .rg-fig { flex: 0 1 auto; }
/* белая плашка с названием — у нижнего края карточки */
.rg-card__name, .rg-back {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 62px; padding: 6px 20px;
  background: var(--lgn-field); color: var(--lgn-on-field);
  border: 1.5px solid var(--lgn-line); border-radius: 999px;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.15; text-align: center; text-decoration: none;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, .3);
}
.rg-card__name { margin-top: auto; }
.rg-card[href]:hover { transform: translateY(-3px); box-shadow: 6px 10px 12px rgba(0, 0, 0, .38); }
.rg-card[href]:active { transform: translate(1px, 2px); box-shadow: 2px 3px 4px rgba(0, 0, 0, .38); }
.rg-card:focus-visible { outline: 3px solid var(--lgn-on-bg); outline-offset: 4px; }
/* регистрация физических лиц закрыта настройкой площадки: карточка видна, но не нажимается */
.rg-card.is-closed { cursor: default; }
.rg-card.is-closed .rg-fig, .rg-card.is-closed .rg-card__name { opacity: .45; }
.rg-card__note { color: var(--lgn-on-bg); font-size: 16px; text-align: center; text-wrap: balance; }

/* ---------- шаги 2 и 3: широкая карточка — слева рисунок и плашка возврата, справа содержимое шага ---------- */
.rg-wide { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); column-gap: clamp(16px, 3vw, 44px); align-items: start; }
.rg-side {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: clamp(400px, 58vh, 490px); padding: clamp(8px, 3vh, 26px) 0 4px;
}
.rg-side .rg-fig { margin-left: clamp(0px, 2vw, 22px); }
.rg-back { max-width: 410px; cursor: pointer; transition: transform 160ms var(--lgn-e), box-shadow 160ms var(--lgn-e); }
.rg-back:hover { transform: translateY(-2px); box-shadow: 4px 7px 8px rgba(0, 0, 0, .3); }
.rg-back:active { transform: translate(1px, 2px); box-shadow: 1px 2px 3px rgba(0, 0, 0, .3); }
.rg-back:focus-visible, .rg-kind:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 3px; }
/* плашка — кнопка «выбрать другое»: под названием — что она делает */
.rg-back__hint { font-size: 13px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rg-main { min-width: 0; }

/* вид юридического лица: три строки с рисунками (В5) */
.rg-kinds { list-style: none; display: grid; gap: 12px; }
.rg-kind {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: clamp(112px, 17vh, 150px); padding: 10px clamp(22px, 4vw, 52px) 10px clamp(18px, 2.4vw, 28px);
  background: var(--lgn-field); color: var(--lgn-on-field);
  border: 1.5px solid var(--lgn-line); border-radius: 64px;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.25; text-decoration: none;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, .3);
  transition: transform 160ms var(--lgn-e), box-shadow 160ms var(--lgn-e);
}
.rg-kind:hover { transform: translateY(-2px); box-shadow: 4px 7px 8px rgba(0, 0, 0, .3); }
.rg-kind:active { transform: translate(1px, 2px); box-shadow: 1px 2px 3px rgba(0, 0, 0, .3); }
.rg-kind__name { max-width: 9.5em; }
.rg-kind__ico { flex: 0 0 auto; display: block; width: clamp(96px, 13vw, 168px); aspect-ratio: 160 / 120; }

/* ---------- анкета (В4, В6; макет, стр. 9 и 13–15) ----------
   Поле — белая плашка с названием внутри, как на макете; когда в поле курсор или текст, название уходит наверх поля и
   остаётся видно (у пустого поля placeholder — пробел, по нему работает :placeholder-shown). */
/* анкета в три поля (14.10): название или имя, e-mail, пароль — каждое поле во всю ширину, одно под другим; телефон — только
   когда код уйдёт по телефону */
.rg-form { display: grid; gap: 10px; align-content: start; }
.rg-f { display: grid; align-content: start; gap: 4px; min-width: 0; }
.rg-f__box { position: relative; display: block; }
.rg-f__box input, .rg-in {
  display: block; width: 100%; min-height: 50px; padding: 17px 20px 3px;
  border: 1.5px solid var(--lgn-line); border-radius: 999px;
  background: var(--lgn-field); color: var(--lgn-on-field);
  font: inherit; font-size: 17px; font-weight: 600; text-align: center;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, .3);
}
.rg-in { padding: 8px 20px; }
.rg-in[readonly] { cursor: default; }
.rg-f__l {
  position: absolute; left: 18px; right: 18px; top: 50%; transform: translateY(-50%);
  overflow: hidden; color: var(--lgn-on-field); font-size: 17px; line-height: 1.2; text-align: center;
  white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
  transition: top 140ms var(--lgn-e), font-size 140ms var(--lgn-e), transform 140ms var(--lgn-e);
}
.rg-f__box input:focus + .rg-f__l, .rg-f__box input:not(:placeholder-shown) + .rg-f__l { top: 5px; transform: none; font-size: 12px; }
/* автоподстановка браузера: название тоже уходит наверх (отдельным правилом — незнакомый селектор не ломает основное) */
.rg-f__box input:-webkit-autofill + .rg-f__l { top: 5px; transform: none; font-size: 12px; }
.rg-f__box input:focus-visible, .rg-in:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; }
/* «Показать пароль» — под полем пароля, по центру, как подсказки анкеты; цель — 44 px в высоту (.rg-textbtn) */
.rg-passshow { justify-self: center; }
/* телефон и e-mail закреплены, пока действует код: меняются кнопкой «Изменить e-mail» («Изменить телефон или e-mail») */
.rg-f__box input[readonly] { border-style: dashed; cursor: default; }
.rg-f.is-bad .rg-f__box input, .rg-f.is-bad .rg-in, .rg-f.is-bad .agree__box { border-color: #B3261E; box-shadow: 0 0 0 2px #B3261E, 3px 4px 5px rgba(0, 0, 0, .3); }
.rg-hint { color: var(--lgn-on-card); font-size: 14px; text-align: center; text-wrap: balance; }
/* сообщение об ошибке — у своего поля: белая плашка с тёмно-красным текстом читается на карточке любого цвета */
.rg-err, .rg-msg {
  justify-self: center; max-width: 100%; padding: 5px 14px; border-radius: 14px;
  background: #FFFFFF; color: #8C1D18; border: 1px solid #B3261E;
  font-size: 14.5px; line-height: 1.3; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.rg-msg { padding: 8px 16px; font-size: 15.5px; }

/* галочки согласий: сама галочка — цель 44 × 44 px, рисунок отметки — свой SVG */
.agree-doc { gap: 8px; }
.agree { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 44px; color: var(--lgn-on-card); font-size: 15.5px; line-height: 1.3; cursor: pointer; }
.agree input { position: absolute; left: 0; top: 50%; width: 44px; height: 44px; margin: -22px 0 0; opacity: 0; cursor: pointer; }
.agree__box {
  justify-self: center; display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--lgn-field); color: var(--lgn-on-field); border: 1.5px solid var(--lgn-line); border-radius: 8px;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .25);
}
.agree__box svg { display: none; width: 22px; height: 22px; }
.agree__box path { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.agree input:checked + .agree__box svg { display: block; }
.agree input:focus-visible + .agree__box { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; }
.agree-doc__links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-left: 52px; }
.agree-doc__links a, .agree-doc__policy a, .rg-textlink {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--lgn-on-card); font-size: 14.5px; line-height: 1.25;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.agree-doc__links a:hover, .agree-doc__policy a:hover, .rg-textlink:hover { text-decoration-thickness: 2px; }
.agree-doc__links a:focus-visible, .agree-doc__policy a:focus-visible, .rg-textlink:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; border-radius: 8px; }
.agree-doc__policy { padding-left: 52px; }

/* ---------- код подтверждения: одно поле, нарисованное пятью ячейками ---------- */
.rg-code, .rg-code__entry { display: grid; justify-items: center; gap: 8px; }
.rg-code { padding-top: 4px; }
.rg-cells { position: relative; display: grid; grid-template-columns: repeat(5, 52px); gap: 12px; }
/* настоящее поле лежит поверх ячеек и не видно: цифры показывают ячейки (login.js) */
.rg-cells__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: text; }
.rg-cells__c {
  display: grid; place-items: center; height: 62px;
  background: var(--lgn-field); color: var(--lgn-on-field); border: 1.5px solid var(--lgn-line); border-radius: 14px;
  font-size: 30px; font-weight: 700; line-height: 1; box-shadow: 3px 4px 5px rgba(0, 0, 0, .3);
}
.rg-cells__in:focus-visible ~ .rg-cells__c { outline: 2px solid var(--lgn-on-card); outline-offset: 1px; }
.rg-cells__in:focus ~ .rg-cells__c.is-now { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; }
.rg-code__label { color: var(--lgn-on-card); font-size: 19px; text-align: center; text-wrap: balance; }
.rg-code__ok { width: auto; min-width: min(100%, 260px); margin-top: 4px; }
.rg-code__done { color: var(--lgn-on-card); font-size: 17px; font-weight: 600; text-align: center; text-wrap: balance; }
.rg-textbtn {
  min-height: 44px; padding: 4px 14px; border: 0; border-radius: 10px; background: none; color: var(--lgn-on-card);
  font: inherit; font-size: 15.5px; text-align: center; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.rg-textbtn:hover { text-decoration-thickness: 2px; }
.rg-textbtn:focus-visible { outline: 3px solid var(--lgn-on-card); outline-offset: 2px; }
.rg-textbtn:disabled { text-decoration: none; cursor: default; }

/* e-mail уже занят кабинетом: ссылки «Перейти ко входу» и «Восстановить пароль» под полем e-mail */
.rg-taken { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }

/* планшет и телефон: всё в одну колонку; рисунок и плашка возврата — одной строкой над содержимым шага */
@media (max-width: 899px) {
  html[data-view^="reg"] .lgn-stage { row-gap: 14px; justify-items: stretch; padding: 12px 16px 150px; }
  html[data-view^="reg"] .lgn-brand__k { font-size: 46px; }
  html[data-view^="reg"] .lgn-card { max-width: 620px; padding: 16px; border-radius: 32px; }
  html[data-view="reg"] .lgn-card { max-width: 437px; padding: 0; }
  .rg-pick { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rg-card { min-height: 0; gap: 14px; padding: 18px 14px 14px; border-radius: 32px; }
  .rg-card .rg-fig { width: clamp(150px, 46vw, 230px); }
  .rg-card__name, .rg-back { min-height: 56px; }
  .rg-wide { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .rg-side { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0; padding: 0; }
  .rg-side .rg-fig { flex: 0 0 auto; width: clamp(96px, 26vw, 168px); margin-left: 0; }
  .rg-back { flex: 1 1 auto; max-width: none; }
  .rg-kind { min-height: 96px; border-radius: 48px; }
}
/* телефон: подписи полей мельче, ячейки кода уже */
@media (max-width: 560px) {
  .rg-f__l { font-size: 15.5px; }
  .rg-cells { grid-template-columns: repeat(5, 48px); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}