.auth-wrap{padding-top:var(--s10);padding-bottom:var(--s11)}

.auth{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-block);
  box-shadow:var(--sh-2);overflow:hidden;
}

/* ---- левая панель: амбиентная сцена ---- */
.auth-scene{
  position:relative;overflow:hidden;background:var(--sky);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s10) var(--s9);min-height:560px;
}
.auth-scene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.auth-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 55% at 30% 15%,rgba(255,255,255,.88),rgba(255,255,255,0) 72%);
}

/* Кадр под левой панелью.
   Плёнка плотнее там, где текст: вверху под заголовком и внизу под
   карточками, а в средней трети светлее — там кадр и виден. Частицы
   поверх снимка приглушены, иначе две фактуры спорят друг с другом.
   Белый радиальный блик над фотографией не нужен: он её выбеливает. */
.scene-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;z-index:0;
}
.scene-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(246,250,255,.93) 0%,
    rgba(246,250,255,.66) 30%,
    rgba(242,248,254,.72) 58%,
    rgba(238,245,252,.94) 100%);
}
.auth-lit .auth-scene::after{opacity:.35}
.auth-lit .auth-scene canvas{opacity:.42}

/* Карточки над снимком делаем прозрачнее. Со сплошным белым фоном кадр
   виден только в промежутках между ними и читается как заплатка; сквозь
   полупрозрачные он окрашивает всю панель, а размытие под ними держит
   текст читаемым. */
.auth-lit .scene-item{background:rgba(255,255,255,.74);border-color:rgba(255,255,255,.62);backdrop-filter:blur(10px)}
.auth-lit .scene-bottom .pillbox{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.62)}
.scene-top,.scene-list,.scene-bottom{position:relative;z-index:2}
.scene-top h2{font-size:clamp(26px,2.2vw,32px);line-height:1.2;margin-top:var(--s4);max-width:12em}
.scene-top h2 em{font-family:Spectral,Georgia,serif;font-style:italic;font-weight:300;color:var(--blue)}
.scene-top p{margin-top:var(--s4);color:var(--ink-mid);font-size:16px;max-width:28em}

.scene-list{display:grid;gap:var(--s3);margin:var(--s8) 0}
.scene-item{
  display:flex;align-items:flex-start;gap:var(--s4);
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4) var(--s5);
}
.scene-item .dot{width:9px;height:9px;border-radius:3px;background:var(--blue);flex:none;margin-top:6px}
.scene-item .dot.mint{background:var(--mint)}
.scene-item .dot.clay{background:var(--clay)}
.scene-text{display:block;min-width:0}
.scene-text b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.scene-text i{display:block;font-style:normal;font-size:14px;color:var(--ink-soft);margin-top:2px;line-height:1.4}

.scene-bottom .pillbox{
  display:inline-flex;align-items:center;gap:var(--s2);height:30px;padding:0 var(--s4);
  border-radius:8px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-mid);
}
.scene-bottom .pillbox svg{width:13px;height:13px;fill:var(--mint)}

/* =========================================================
   .auth-tech — тёмная панель для страницы входа конкретно.

   Раньше панель была светлой намеренно (см. комментарий в login.php над
   $authPic) — решение пересмотрено владельцем после прототипа-макета
   («современно и технологично»). Класс .auth-tech, а не правка базовых
   .auth-scene/.scene-*: те же классы делит registraciya.php (общий
   login.css), и без отдельного класса тёмная тема досталась бы и форме
   регистрации, которую менять не просили. Всё ниже — переопределения
   поверх обычных .scene-* правил выше, а не копия их с нуля.

   Тёмная палитра — не новая: те же --dbg/--dpanel/--dink/--dmid/--dsoft,
   что уже есть в assets/home_v1.css для «Как это работает» на главной.
   Дублируем осознанно (тот же приём, что и у .agree чуть ниже в этом
   файле) — второй файл со своими переменными, но одним и тем же тёмным
   языком, а не выдуманным здесь заново. */
.auth-tech{--dbg:#0A1622;--dpanel:#101F30;--dpanel2:#16293D;--dink:#EAF2FA;--dmid:#A8BDD3;--dsoft:#728CA8;--blue-l:#A3C8ED}
.auth-tech .auth-scene{
  background:radial-gradient(120% 100% at 18% 0%,var(--dpanel2),var(--dpanel) 46%,var(--dbg) 100%);
  border-right-color:rgba(255,255,255,.08);color:var(--dink);
}
/* Едва заметная координатная сетка — тот же приём, что у .film-flicker
   в занавесе главной: текстура «оцифрованной» поверхности, а не узор
   ради узора, поэтому маска гасит её к краям панели. */
.auth-tech .auth-scene::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(80% 70% at 28% 15%,#000 0%,transparent 78%);
}
.auth-tech .auth-scene::after{display:none}
.auth-tech .auth-scene canvas{opacity:1;z-index:2}
.auth-tech .scene-top,.auth-tech .scene-list,.auth-tech .scene-bottom{z-index:3}

/* Фото на тёмной панели: та же вуаль-приглушение, что в .scene-veil
   выше, но в тон тёмной панели, а не в белый — на светлой подложке
   вуаль белая, потому что панель белая; здесь панель тёмно-синяя, и
   светлая вуаль отбеливала бы фото так же плохо, как тёмная — светлое. */
.auth-tech.auth-lit .scene-bg{opacity:.6;filter:saturate(.85) brightness(.75)}
.auth-tech.auth-lit .scene-veil{
  background:
    linear-gradient(180deg, rgba(8,19,31,.5) 0%, rgba(10,25,40,.28) 30%, rgba(11,28,45,.52) 60%, rgba(8,19,31,.94) 100%),
    radial-gradient(120% 90% at 15% 0%, rgba(21,50,79,.35), transparent 58%);
}

.auth-tech .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mint);margin-bottom:var(--s3);
}
.auth-tech .eyebrow::before{content:"";width:16px;height:1px;background:var(--mint)}
.auth-tech .scene-top .label{color:var(--dmid)}
.auth-tech .scene-top h2{color:#fff}
.auth-tech .scene-top h2 em{font-family:Literata,Georgia,serif;font-weight:400;color:#8FC4EE}
.auth-tech .scene-top p{color:var(--dmid)}

.auth-tech .scene-item{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);backdrop-filter:blur(6px)}
.auth-tech.auth-lit .scene-item{background:rgba(10,22,36,.5);border-color:rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.auth-tech .scene-text b{color:#fff}
.auth-tech .scene-text i{color:var(--dsoft)}

.auth-tech .scene-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.auth-tech .scene-bottom .pillbox{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--dmid)}
.auth-tech.auth-lit .scene-bottom .pillbox{background:rgba(10,22,36,.55);border-color:rgba(255,255,255,.16)}
.auth-tech .pillbox-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(78,158,134,.22);flex:none;animation:auth-pulse 2.2s var(--ease) infinite}
@keyframes auth-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.auth-tech .readout{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.02em;color:var(--dsoft)}
@media(prefers-reduced-motion:reduce){.auth-tech .pillbox-dot{animation:none}}

/* ---- правая панель: форма ---- */
.auth-panel{display:flex;align-items:center;justify-content:center;padding:var(--s10) var(--s9)}
.auth-box{width:100%;max-width:440px}
.auth-box h1{font-size:30px}
.auth-box .lede{color:var(--ink-mid);margin-top:var(--s3);font-size:16px}
.auth-box .lede b{color:var(--ink);font-weight:600}

/* Личный код после принятия приглашения.
   Показывается ровно один раз, и его переписывают на бумагу — отсюда
   крупный моноширинный набор, воздух вокруг и выделение в одно нажатие.
   Кнопки «скопировать» здесь нарочно нет: код должен оказаться не в
   буфере обмена, а в памяти или в блокноте. */
.auth-code{
  margin-top:var(--s7);padding:var(--s6);border-radius:14px;
  background:rgba(95,198,163,.10);border:1px solid rgba(95,198,163,.34);
  font-family:ui-monospace,"JetBrains Mono",monospace;
  font-size:26px;letter-spacing:.06em;text-align:center;
  user-select:all;
}

/* ---- поля ---- */
.auth-form{display:grid;gap:var(--s5);margin-top:var(--s7)}
.field-lab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s2)}
.field-lab label{font-size:14px;font-weight:600;color:var(--ink-mid)}
.field-lab a{font-size:14px}
.inp{position:relative}
.inp input{
  width:100%;height:52px;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:0 var(--s5) 0 46px;
  transition:border-color .18s,box-shadow .18s;
}
.inp input:hover{border-color:#B2CDE8}
.inp input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,119,201,.14)}
.inp .lead-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:var(--ink-soft);pointer-events:none;transition:fill .18s}
.inp input:focus ~ .lead-ico{fill:var(--blue)}
.inp.with-toggle input{padding-right:104px}
.pw-toggle{
  position:absolute;right:6px;top:6px;height:40px;padding:0 var(--s4);border:0;border-radius:8px;
  background:var(--sky);color:var(--ink-mid);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .18s,color .18s;
}
.pw-toggle:hover{background:var(--sky-2);color:var(--ink)}
.err{color:var(--clay);font-size:14px;margin-top:var(--s2)}
.caps{display:none;margin-top:var(--s2);font-size:14px;color:var(--clay)}
.caps.on{display:block}

.auth-form .btn{width:100%;height:52px;margin-top:var(--s2)}
.btn .arrow{width:15px;height:15px;fill:currentColor;transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

.alert{border-radius:var(--r-card);padding:var(--s4) var(--s5);margin-top:var(--s6);font-size:15px;display:flex;gap:var(--s3);align-items:flex-start}
.alert svg{width:17px;height:17px;flex:none;margin-top:2px}
.alert.bad{background:var(--clay-pale);border:1px solid #EED6CD;color:#8E4232}
.alert.bad svg{fill:var(--clay)}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* Шесть клеток кода вместо одной строки — набор с автопереходом
   (login.js), привычный по банковским формам и мессенджерам. Настоящее
   значение для сервера — отдельное скрытое #otp, эти шесть инпутов сами
   по себе ничего не отправляют (см. комментарий в login.php). */
.otp-row{display:flex;gap:8px}
.otp-row input{
  width:100%;height:56px;text-align:center;font-size:21px;font-weight:600;
  color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-ctl);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.otp-row input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,119,201,.14)}
.otp-row input.filled{border-color:var(--blue-deep);background:var(--blue-pale)}

/* Регистрация — единственное настоящее действие в подвале формы, не
   сведения: своя плашка с кнопкой вместо ссылки внутри строки текста
   (см. .alert выше — тот же тонированный язык, не новый). */
.auth-cta-alt{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-radius:var(--r-ctl);
  background:var(--blue-pale);border:1px solid var(--blue-ghost);
}
.auth-cta-alt b{display:block;font-size:14.5px;color:var(--ink)}
.auth-cta-alt span{display:block;font-size:13px;color:var(--ink-mid);margin-top:2px;line-height:1.5}
.auth-cta-alt .btn{width:auto;flex:none;height:42px;margin:0;padding:0 18px;font-size:13.5px}
.auth-cta-alt .btn .arrow{width:12px;height:12px}
@media(max-width:420px){.auth-cta-alt{flex-direction:column;align-items:stretch}.auth-cta-alt .btn{width:100%}}

.auth-foot{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);display:grid;gap:var(--s4)}
/* Тег раньше стоял слева от абзаца в одну flex-строку — абзац из
   двух-трёх строк не давал паре выровняться, тег плавал сверху отдельной
   точкой (см. разбор в прототипе). Тег теперь подпись НАД текстом, тот
   же приём, что у .field-lab над полем формы: одна ось по левому краю
   при любой длине текста. */
.foot-row .tab{
  display:inline-block;margin-bottom:6px;font-size:10px;font-weight:600;
  letter-spacing:.04em;color:var(--blue-deep);background:var(--blue-pale);border-radius:5px;
  padding:3px 7px;
}
.foot-row p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6}
.foot-row p b{color:var(--ink);font-weight:600}
.foot-row a{color:var(--blue-deep)}

/* ---- адаптив ---- */
@media(max-width:1180px){
  .auth-scene,.auth-panel{padding:var(--s8)}
}
@media(max-width:1024px){
  .auth{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .auth-scene{min-height:0}
}
@media(max-width:860px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-box{max-width:520px;margin:0 auto}
  .auth-scene{border-right:0;border-bottom:1px solid var(--line);min-height:0;order:2}
  .auth-scene canvas{opacity:.75}
  .scene-top h2{font-size:23px}
  .auth-panel{order:1}
}
@media(max-width:600px){
  .auth-wrap{padding-top:var(--s8);padding-bottom:var(--s10)}
  .auth{border-radius:var(--r-card)}
  .auth-scene,.auth-panel{padding:var(--s6)}
  .auth-box h1{font-size:26px}
  .scene-item{flex-wrap:wrap}
  .scene-item span{margin-left:0;width:100%;text-align:left}
}
/* Возврат к началу.
   Не кнопка и не ссылка в подвале: человек на середине пути, и ему
   нужен незаметный, но досягаемый способ вернуться — например, когда
   он понял, что назвал не тот архив. Форма, а не ссылка, потому что
   шаг сбрасывается на сервере и требует ключа формы. */
.auth-back{margin-top:14px;text-align:center}
.auth-back button{
  background:none;border:0;padding:4px 8px;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink-soft, #7A8798);
  border-radius:8px;transition:color .16s,background .16s;
}
.auth-back button:hover{color:var(--ink, #16202C);background:rgba(0,0,0,.04)}

/* ---------- согласие на обработку при первом входе ----------

   Класс тот же, что в форме заявки, но стили там лежат в zayavka.css,
   а эта страница подключает login.css. Дублируем осознанно: тащить сюда
   весь файл формы ради одного правила — обмен побольше на поменьше.

   Текст мелкий, но не серый до нечитаемости: под этим человек
   расписывается, и прочесть он должен без усилия. */
.agree{
  display:flex;gap:var(--s3);align-items:flex-start;
  margin-top:var(--s5);padding:var(--s4);
  background:var(--sky);border:1px solid var(--line);border-radius:var(--r-ctl);
  font-size:13px;color:var(--ink-mid);line-height:1.55;cursor:pointer;
}
.agree input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--blue);cursor:pointer}
.agree:has(input:checked){border-color:var(--blue);background:var(--blue-pale)}
.agree:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.agree a{color:var(--blue-deep);text-decoration:underline}

/* =========================================================
   ВЫБОР АРХИВА

   Появляется только у тех, кто состоит сразу в нескольких: свой род,
   род жены, архив завода. У большинства архив один, и шаг пропускается
   вовсе — список из одной строки это лишнее нажатие на пустом месте.

   Строки, а не выпадающее поле: каждый архив надо узнать по имени рода
   и по тому, кем ты в нём числишься, а в свёрнутом списке это не
   читается. Выбор здесь делают редко и внимательно.
   ========================================================= */
.auth-pick{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.auth-pick form{display:block}

.pick-i{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  padding:16px 18px;border:1px solid rgba(20,30,45,.14);border-radius:14px;
  background:#fff;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .16s,box-shadow .16s,transform .1s;
}
.pick-i:hover{border-color:rgba(46,119,201,.55);box-shadow:0 6px 20px rgba(16,32,54,.08)}
.pick-i:active{transform:translateY(1px)}
.pick-i:focus-visible{outline:3px solid rgba(46,119,201,.35);outline-offset:2px}

.pick-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pick-b b{font-size:16px;font-weight:600;line-height:1.25}
/* Номер архива и роль — подписью: для входа они больше не нужны, но по
   номеру сверяют с договором и конвертом, а роль объясняет, почему
   человек вообще видит этот архив в списке. */
.pick-b span{font-size:13px;color:rgba(20,30,45,.55);line-height:1.4}

.pick-i .arrow{width:16px;height:16px;flex:none;fill:rgba(46,119,201,.8)}

/* =========================================================
   ТРИ СОГЛАСИЯ НА РЕГИСТРАЦИИ

   Форма выходила очень высокой даже со свёрнутыми текстами: три
   отдельных блока по 20 точек отступа каждый, плюс рамки, плюс
   собственные поля. Три обведённых прямоугольника подряд читаются
   как анкета, а не как три коротких пункта.

   Собираем их в один блок с общей рамкой и тонкими разделителями:
   вид спокойнее, высота меньше примерно на треть, а раздельность
   пунктов — а она тут обязательна юридически — никуда не девается.
   ========================================================= */
.agree-set{
  margin-top:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--sky);overflow:hidden;
}
.agree-set .agree{
  margin:0;border:0;border-radius:0;background:transparent;
  padding:11px var(--s4);font-size:12.5px;line-height:1.5;
}
.agree-set .agree + .agree{border-top:1px solid var(--line)}
/* Отмеченный пункт подсвечивается только фоном: рамка внутри общей
   рамки дала бы двойную линию на стыке. */
.agree-set .agree:has(input:checked){background:var(--blue-pale);border-color:transparent}

/* Раскрытие — неброское и на своей строке.
   «Полный текст» кнопкой соблазняет нажать; ссылкой — сообщает, что
   он есть, и не мешает тем, кто читать не станет. */
.agree-full{margin-top:5px}
.agree-full summary{
  display:inline-block;cursor:pointer;list-style:none;
  font-size:11.5px;color:var(--ink-soft);
  border-bottom:1px dotted var(--line-2);
}
.agree-full summary::-webkit-details-marker{display:none}
.agree-full summary:hover{color:var(--ink-mid)}
.agree-full[open] summary{margin-bottom:6px}
.agree-full p{
  font-size:11.5px;line-height:1.6;color:var(--ink-soft);
  max-height:170px;overflow-y:auto;
  padding:8px 10px;background:#fff;border-radius:8px;border:1px solid var(--line);
}

.agree-meta{margin-top:var(--s3);font-size:11.5px;color:var(--ink-soft);line-height:1.5}

/* Пункты под галочкой — на экране подтверждения.

   Человека остановили на пороге и просят отметить то, чего он не ждал.
   Отправлять его за объяснением на другую страницу нельзя, но и
   вываливать юридический абзац в форму — тоже: его не прочтут.
   Поэтому разбор по частям, помельче подписи и с отбивкой слева,
   чтобы читалось как пояснение, а не как ещё один пункт. */
.agree-pts{
  margin:7px 0 0;padding:0 0 0 var(--s4);list-style:none;
  border-left:2px solid var(--line);
  display:flex;flex-direction:column;gap:5px;
}
.agree-pts li{font-size:11.5px;line-height:1.55;color:var(--ink-soft)}
.agree-pts b{color:var(--ink-mid);font-weight:600}
/* Отмеченный пункт подсвечен фоном — линия на нём должна быть видна. */
.agree-set .agree:has(input:checked) .agree-pts{border-left-color:var(--blue)}

/* Кнопка ждёт все отметки.

   Выключенная кнопка не прячется и не бледнеет до неразличимости:
   она должна остаться читаемой, иначе человек решит, что форма
   сломалась. Меняется только то, что говорит «пока нельзя»: цвет
   глуше и курсор без обещания. */
.auth-form .btn[disabled]{
  background:var(--line);border-color:var(--line);color:var(--ink-soft);
  box-shadow:none;cursor:not-allowed;
}
.auth-form .btn[disabled]:hover{background:var(--line);border-color:var(--line)}
.auth-form .btn[disabled] .arrow{transform:none;opacity:.5}

/* Подпись под кнопкой: почему нельзя. Без неё выключенная кнопка —
   загадка, а загадка в форме регистрации стоит регистрации. */
/* Подсказка про опечатку в адресе. Кнопка внутри абзаца — обычная
   ссылка по виду: это не действие формы, а поправка к тому, что
   человек уже сделал. */
.auth-fix{margin-top:var(--s3);font-size:14px;color:var(--ink-soft)}
.auth-fix button{
  border:0;background:none;padding:0;font:inherit;color:var(--blue);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.auth-fix button:hover{color:var(--blue-deep)}

.agree-hint{
  margin-top:var(--s3);font-size:12px;line-height:1.5;
  color:var(--ink-soft);text-align:center;
}