/* Страницы входа · v4 (24.09.2026): index, verify-email, forgot-password, reset-password, register.
   Тот же язык, что у кабинетов ученика и родителя v4: тёмная панель с узором (как боковое меню), белая плитка
   на светлом фоне, Bounded только для заголовков, рабочий текст Golos, подписи JetBrains Mono, жёлтый один акцент,
   один фирменный образ на экран (ключ в фундаментном камне, фон образа = цвет панели #0E1B3A).
   Страницы не подключают base.css и skin-v3.css: стиль самодостаточный, логика страниц не менялась.
   Палитра светлая при любой теме устройства, как у кабинетов v4. Движение: одно проявление при загрузке,
   плавная смена шага формы (auth.js) и нажатия кнопок; всё выключается при prefers-reduced-motion. */

@font-face{font-family:"Bounded";src:url("../v4/assets/Bounded-ExtraBold.woff2?__asset=1f46aafc00f61da5") format("woff2");font-weight:800;font-display:swap}

:root{
  color-scheme:light;
  --a-ink:#0E1B3A;--a-night:#101F42;--a-blue:#2B5BE2;--a-blue-600:#1F47BD;--a-blue-050:#EAF0FE;--a-blue-100:#D6E2FD;--a-sky:#8FB0FF;
  --a-yellow:#F6C343;--a-paper:#F2F4FA;--a-card:#FFFFFF;--a-line:#E3E7F2;--a-field:#F4F6FB;
  --a-text:#16203A;--a-mute:#55607C;--a-faint:#8A93AC;
  --a-bad:#C93A32;--a-bad-bg:#FCE9E7;--a-bad-ink:#6A211C;--a-ok:#17885A;
  --a-display:"Bounded","Golos Text",system-ui,sans-serif;
  --a-body:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --a-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --a-sheet:cubic-bezier(.32,.72,0,1);--a-spring:cubic-bezier(.34,1.42,.5,1);--a-out:cubic-bezier(.22,1,.36,1);
  --a-sh:0 10px 30px rgba(14,27,58,.07);--a-sh-card:0 24px 60px rgba(14,27,58,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--a-paper)}
body.auth{margin:0;min-height:100vh;min-height:100dvh;background:var(--a-paper);color:var(--a-text);font:400 16px/1.5 var(--a-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
.auth [hidden]{display:none !important}
.auth a{color:var(--a-blue-600);text-decoration:none;text-underline-offset:3px}
.auth a:hover{text-decoration:underline}
.auth button{font:inherit;color:inherit}
.auth :focus-visible{outline:3px solid rgba(43,91,226,.45);outline-offset:3px;border-radius:10px}

/* ───────── каркас ───────── */
.auth-layout{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* тёмная панель: те же цвета, узор и логотип, что у бокового меню кабинетов */
.auth-hero{position:relative;overflow:hidden;isolation:isolate;flex:0 0 auto;display:flex;flex-direction:column;gap:20px;
  min-height:clamp(280px,42vh,380px);padding:max(22px,env(safe-area-inset-top)) 22px 58px;color:#fff;
  background:radial-gradient(360px 260px at 0% 0%,rgba(43,91,226,.34),transparent 70%),linear-gradient(180deg,#101F42 0%,#0E1B3A 62%)}
.auth-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:300px;z-index:-1;pointer-events:none;
  background:url("../v4/assets/pattern_tile_4x.png?__asset=a4b3158cbd989f9c") 0 0/96px 97px;opacity:.08;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.auth-hero__logo{display:block;flex:0 0 auto;width:152px;height:24px;background:url("../v4/assets/logo_white.svg?__asset=6e9cfdd5dbab012e") left center/contain no-repeat}
.auth-hero__copy{margin-top:auto;max-width:64%;position:relative;z-index:1}
.auth-hero__kicker{margin:0 0 12px;font:500 11.5px/1.2 var(--a-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.auth-hero__title{margin:0;font:800 clamp(23px,6.9vw,30px)/1.04 var(--a-display);text-transform:uppercase;letter-spacing:-.005em;color:#fff;text-wrap:balance}
.auth-hero__title em{font-style:normal;color:var(--a-sky)}
.auth-hero__title span{color:var(--a-yellow)}
.auth-hero__roles{display:none;margin:18px 0 0;font:500 12px/1.4 var(--a-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.46)}
/* фирменный образ: фон картинки (#0E1A3A) не светлее панели, поэтому «осветление» оставляет от него только предмет —
   ни прямоугольника, ни шва на переходе градиента панели */
.auth-hero__art{position:absolute;z-index:0;right:-30px;bottom:24px;height:80%;width:auto;max-width:none;pointer-events:none;user-select:none;mix-blend-mode:lighten}

.auth-main{position:relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch;margin-top:-34px;padding:0 12px max(18px,env(safe-area-inset-bottom))}
.auth-card{position:relative;width:100%;margin:0 auto;padding:26px 22px 22px;border-radius:28px;background:var(--a-card);box-shadow:var(--a-sh-card)}
.auth-foot{margin:auto auto 4px;padding-top:18px;font:500 13px/1.4 var(--a-body);color:var(--a-faint);text-align:center}
.auth-foot a{color:var(--a-mute)}

/* ───────── заголовок плитки ───────── */
.auth .form-title{margin:0;font:800 24px/1.06 var(--a-display);text-transform:uppercase;letter-spacing:-.005em;color:var(--a-ink);text-wrap:balance;overflow-wrap:anywhere}
.auth .form-sub{margin:10px 0 22px;font:400 15.5px/1.45 var(--a-body);color:var(--a-mute);text-wrap:pretty}
.auth .form-sub::first-letter{text-transform:uppercase}
.auth .form-sub .email-pill{display:inline-block;padding:0 8px;border-radius:7px;background:var(--a-blue-050);color:var(--a-blue-600);font-weight:500}

/* сообщение формы: ошибка красной плашкой, подтверждение синей; первая буква всегда заглавная */
.auth .msg-strip{display:none;margin:0 0 18px;padding:12px 14px;border-radius:14px;font:500 14.5px/1.45 var(--a-body)}
.auth .msg-strip::first-letter{text-transform:uppercase}
.auth .msg-strip.err{display:block;background:var(--a-bad-bg);color:var(--a-bad-ink)}
.auth .msg-strip.ok{display:block;background:var(--a-blue-050);color:var(--a-blue-600)}

/* ───────── поля ───────── */
.auth .field,.auth .recovery-field{margin:0 0 18px;min-width:0}
.auth .field-label,.auth .recovery-field > label{display:block;margin:0 0 8px;font:600 14px/1.3 var(--a-body);color:var(--a-text)}
.auth .input,.auth .recovery-input,.auth .code-input{display:block;width:100%;min-width:0;height:56px;margin:0;padding:0 16px;
  border:1.5px solid transparent;border-radius:14px;background:var(--a-field);color:var(--a-text);font:500 17px/1.3 var(--a-body);
  -webkit-appearance:none;appearance:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease}
.auth .input::placeholder,.auth .recovery-input::placeholder,.auth .code-input::placeholder{color:#A4ACC2;opacity:1}
.auth .input:hover,.auth .recovery-input:hover,.auth .code-input:hover{border-color:#D5DBEA}
.auth .input:focus,.auth .recovery-input:focus,.auth .code-input:focus{outline:0;background:#fff;border-color:var(--a-blue);box-shadow:0 0 0 4px rgba(43,91,226,.14)}
.auth .input[aria-invalid="true"],.auth .recovery-input[aria-invalid="true"]{border-color:var(--a-bad);box-shadow:0 0 0 4px rgba(201,58,50,.12)}
.auth .input:disabled,.auth .recovery-input:disabled{opacity:.6}
/* код из письма: крупные цифры моноширинным, по центру */
.auth .mfa-code,.auth .code-input,.auth .recovery-input.code-input{height:64px;padding:0 12px;text-align:center;font:500 27px/1 var(--a-mono);letter-spacing:.42em;text-indent:.42em;font-variant-numeric:tabular-nums}
.auth #mfa-code{font-size:19px;letter-spacing:.08em;text-indent:0}
.auth #mfa-code::placeholder{font:500 13.5px/1 var(--a-body);letter-spacing:0}
.auth .field-row{display:grid;grid-template-columns:1fr;gap:0 12px}
.auth .recovery-hint,.auth .pw-hint{margin:8px 0 0;font:400 13.5px/1.45 var(--a-body);color:var(--a-mute)}
.auth .pw-hint::first-letter{text-transform:uppercase}
.auth .pw-hint{margin-bottom:16px}
.auth .recovery-password{position:relative}
.auth .recovery-password .recovery-input{padding-right:100px}
.auth .recovery-toggle{position:absolute;top:8px;right:8px;bottom:8px;padding:0 14px;border:0;border-radius:10px;background:var(--a-blue-050);color:var(--a-blue-600);font:600 14px/1 var(--a-body);cursor:pointer}
.auth .recovery-toggle:hover{background:var(--a-blue-100)}

/* флажок в стиле кабинетов */
.auth .recovery-check,.auth .consent{display:flex;align-items:flex-start;gap:12px;margin:2px 0 18px;font:500 14.5px/1.4 var(--a-body);color:var(--a-text);cursor:pointer}
.auth .recovery-check input,.auth .consent input{flex:0 0 22px;width:22px;height:22px;margin:0;border:1.5px solid #C6CEE3;border-radius:7px;background:#fff;
  -webkit-appearance:none;appearance:none;display:grid;place-content:center;cursor:pointer;transition:background-color .15s,border-color .15s}
.auth .recovery-check input::after,.auth .consent input::after{content:"";width:11px;height:6px;margin-top:-3px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .22s var(--a-spring)}
.auth .recovery-check input:checked,.auth .consent input:checked{background:var(--a-blue);border-color:var(--a-blue)}
.auth .recovery-check input:checked::after,.auth .consent input:checked::after{transform:rotate(-45deg) scale(1)}
.auth .recovery-check span,.auth .consent span{padding-top:1px}

/* ───────── кнопки ───────── */
.auth .submit-row{display:grid;grid-template-columns:1fr;gap:10px}
.auth .enter-btn,.auth .recovery-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:0;padding:0 22px;
  border:0;border-radius:14px;background:var(--a-blue);color:#fff;font:600 16.5px/1.2 var(--a-body);letter-spacing:0;text-transform:none;cursor:pointer;
  box-shadow:0 10px 24px rgba(43,91,226,.3);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .46s var(--a-spring),background-color .18s ease,box-shadow .3s ease,opacity .2s ease,filter .2s ease}
.auth .enter-btn::after,.auth .recovery-button::after{content:none}
.auth .enter-btn:hover,.auth .recovery-button:hover{background:var(--a-blue-600);box-shadow:0 14px 30px rgba(43,91,226,.36)}
.auth .enter-btn:active,.auth .recovery-button:active{transform:scale(.965);filter:brightness(.94);transition-duration:.09s;transition-timing-function:ease-out}
.auth .enter-btn:disabled,.auth .recovery-button:disabled{opacity:.55;cursor:default;box-shadow:none;transform:none}
/* занятая кнопка («Отправляем код…»): кольцо слева от подписи, auth.js ставит aria-busy */
.auth .enter-btn[aria-busy="true"],.auth .recovery-button[aria-busy="true"]{opacity:1;cursor:progress;filter:saturate(.9)}
.auth .enter-btn[aria-busy="true"]::before,.auth .recovery-button[aria-busy="true"]::before{content:"";flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:auth-spin .7s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* второстепенные действия: «Отправить код ещё раз», «Изменить почту», «Забыли пароль?» */
.auth .auth-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:12px 0 0}
.auth .mfa-back,.auth .recovery-resend,.auth .form-actions .forgot{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 4px;
  border:0;background:none;color:var(--a-blue-600);font:600 15px/1.2 var(--a-body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease,opacity .15s ease}
.auth .mfa-back:hover,.auth .recovery-resend:hover,.auth .form-actions .forgot:hover{color:var(--a-ink);text-decoration:none}
.auth .mfa-back:disabled,.auth .recovery-resend:disabled{color:var(--a-faint);cursor:default}
.auth .recovery-resend{width:100%;margin-top:8px}
.auth .form-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 12px;margin:-6px 0 14px}
.auth .form-actions .forgot{font-size:14px;padding:0}
.auth .ghost-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 18px;border:0;border-radius:14px;background:var(--a-blue-050);color:var(--a-blue-600);font:600 16px/1.2 var(--a-body);cursor:pointer;
  transition:transform .46s var(--a-spring),background-color .18s ease}
.auth .ghost-btn:hover{background:var(--a-blue-100)}
.auth .ghost-btn:active{transform:scale(.965);transition-duration:.09s}
.auth .ghost-btn:disabled{opacity:.6;cursor:default;transform:none}

/* ───────── шаги входа: код, второй фактор, подключение защиты ───────── */
.auth .mfa-intro{margin:0 0 18px;padding:14px 16px;border-radius:16px;background:var(--a-paper)}
.auth .mfa-kicker{display:block;margin:0 0 6px;font:500 11.5px/1.2 var(--a-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a-blue)}
.auth .mfa-intro h3{margin:0 0 4px;font:600 18px/1.3 var(--a-body);color:var(--a-ink)}
.auth .mfa-intro p{margin:0;font:400 14.5px/1.5 var(--a-body);color:var(--a-mute);overflow-wrap:anywhere}
.auth .enrollment-layout{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 18px}
.auth .enrollment-qr{display:block;width:168px;height:168px;margin:0 auto;padding:10px;border:1.5px solid var(--a-line);border-radius:18px;background:#fff}
.auth .enrollment-copy p{margin:0 0 8px;font:400 14.5px/1.5 var(--a-body);color:var(--a-mute)}
.auth .enrollment-copy strong{color:var(--a-ink);font-weight:600}
.auth .manual-key{display:flex;align-items:stretch;gap:8px;margin-top:10px}
.auth .manual-key code{flex:1 1 auto;min-width:0;padding:10px 12px;border-radius:12px;background:var(--a-field);color:var(--a-ink);font:500 12.5px/1.45 var(--a-mono);overflow-wrap:anywhere}
.auth .copy-key{flex:0 0 auto;padding:0 14px;border:0;border-radius:12px;background:var(--a-blue-050);color:var(--a-blue-600);font:600 14px/1 var(--a-body);cursor:pointer}
.auth .copy-key:hover{background:var(--a-blue-100)}
.auth .recovery-panel h3{margin:0 0 6px;font:600 19px/1.3 var(--a-body);color:var(--a-ink)}
.auth .recovery-panel > p{margin:0 0 14px;font:400 14.5px/1.5 var(--a-body);color:var(--a-mute)}
.auth .recovery-codes{display:grid;grid-template-columns:1fr;gap:6px 14px;margin:0 0 16px;padding:14px 16px;border-radius:16px;background:var(--a-field)}
.auth .recovery-codes code{font:500 13px/1.7 var(--a-mono);color:var(--a-ink);overflow-wrap:anywhere}

/* ───────── подвал плитки ───────── */
.auth .signup-hint{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--a-line);font:400 14.5px/1.45 var(--a-body);color:var(--a-mute);text-align:center}
.auth .signup-hint::first-letter{text-transform:uppercase}
.auth .signup-hint b{font-weight:600;color:var(--a-ink)}
.auth .signup-hint .signup-link{font-weight:600}
.auth .recovery-recipient{display:flex;flex-direction:column;gap:2px;margin:0 0 18px;padding:12px 14px;border-radius:14px;background:var(--a-paper);font:400 13.5px/1.4 var(--a-body);color:var(--a-mute)}
.auth .recovery-recipient strong{font:600 15.5px/1.35 var(--a-body);color:var(--a-ink);overflow-wrap:anywhere}
.auth .recovery-recipient a{align-self:flex-start;margin-top:4px;font-weight:600}
.auth .recovery-footer{display:flex;flex-direction:column;align-items:center;gap:2px;margin:22px 0 0;padding:14px 0 0;border-top:1px solid var(--a-line);font:400 14px/1.45 var(--a-body);color:var(--a-mute);text-align:center}
.auth .recovery-footer a{display:inline-flex;align-items:center;min-height:40px;font-weight:600}
.auth .recovery-footer br{display:none}

/* примеры кабинетов — только при ?dev=1 */
.auth .demo-hint{display:none;margin:18px 0 0;padding:16px 0 0;border-top:1px dashed var(--a-line);text-align:center}
.auth.dev-mode .demo-hint{display:block}
.auth .demo-hint .demo-label{display:block;margin-bottom:8px;font:500 11.5px/1.2 var(--a-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--a-faint)}
.auth .demo-hint .demo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.auth .demo-hint a{font:600 15px/1.3 var(--a-body)}
.auth .demo-hint .sep{color:var(--a-faint)}

/* демо-кабинет (13.10.2026): вход по кнопке роли. Блок строит _shared/auth/demo-entry.js?__asset=6a2558b1b0a6d5e6 и только в режиме демо
   (GET /api/lms/demo/info → 200); на боевых экземплярах его нет в разметке. Цвета — из токенов страницы. */
.auth .demo-entry{margin:0 0 16px;padding:16px;border-radius:18px;background:var(--a-blue-050)}
.auth .demo-entry__title{margin:0 0 12px;font:600 15px/1.35 var(--a-body);color:var(--a-ink);text-wrap:balance}
.auth .demo-entry__roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.auth .demo-entry__btn{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;margin:0;padding:0 12px;
  border:1.5px solid var(--a-blue-100);border-radius:14px;background:var(--a-card);color:var(--a-blue-600);font:600 15px/1.2 var(--a-body);
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease,transform .3s var(--a-spring)}
.auth .demo-entry__btn:last-child:nth-child(odd){grid-column:1/-1}
.auth .demo-entry__btn:hover{border-color:var(--a-blue)}
.auth .demo-entry__btn:active{transform:scale(.97)}
.auth .demo-entry__btn:disabled{opacity:.55;cursor:default;transform:none}
.auth .demo-entry__btn[aria-busy="true"]{opacity:1;border-color:var(--a-blue);background:var(--a-blue);color:#fff}
.auth .demo-entry__or{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 11.5px/1.2 var(--a-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--a-faint)}
.auth .demo-entry__or::before,.auth .demo-entry__or::after{content:"";flex:1 1 0;height:1px;background:var(--a-line)}
@media (prefers-reduced-motion:reduce){.auth .demo-entry__btn{transition:none;transform:none !important}}

/* регистрация (в бою закрыта, страница показывает это): выбор роли, согласия */
.auth .role-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px}
.auth .role-row label{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1.5px solid var(--a-line);border-radius:14px;background:#fff;cursor:pointer;font:600 15px/1.2 var(--a-body);transition:border-color .15s,background-color .15s}
.auth .role-row input{position:absolute;opacity:0;pointer-events:none}
.auth .role-row .glyph{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--a-paper);color:var(--a-mute);font:800 12px/1 var(--a-display)}
.auth .role-row .lbl::first-letter{text-transform:uppercase}
.auth .role-row label:has(input:checked){border-color:var(--a-blue);background:var(--a-blue-050);color:var(--a-blue-600)}
.auth .role-row label:has(input:checked) .glyph{background:var(--a-yellow);color:var(--a-ink)}
.auth .role-row label:has(input:focus-visible){outline:3px solid rgba(43,91,226,.45);outline-offset:2px}
.auth .consent{margin-bottom:12px;font-size:14px;color:var(--a-mute)}
.auth .field-note{font-weight:400;color:var(--a-faint)}
.auth p.field-label{margin-top:0}
/* пара кнопок (подтверждение почты): на узком экране главная сверху */
@media (max-width:519.98px){.auth .submit-row--pair .enter-btn{order:-1}}

/* ───────── движение: одно проявление при загрузке ───────── */
@keyframes auth-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes auth-art{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes auth-step{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-card{animation:auth-rise .6s var(--a-out) .05s both}
.auth-hero__art{animation:auth-art 1.1s var(--a-out) both}
.auth .is-entering{animation:auth-step .42s var(--a-sheet) both}

/* телефон: после ввода почты (код, второй фактор, подключение защиты) панель сжимается, форма поднимается к верху */
@media (max-width:959.98px){
  .auth-hero{transition:min-height .55s var(--a-sheet)}
  .auth--compact .auth-hero,
  .auth-layout:has(.auth-card .mfa-form:not([hidden])) .auth-hero,
  .auth-layout:has(.auth-card .mfa-enrollment-form:not([hidden])) .auth-hero{min-height:200px}
  .auth--compact .auth-hero__kicker,
  .auth-layout:has(.auth-card .mfa-form:not([hidden])) .auth-hero__kicker,
  .auth-layout:has(.auth-card .mfa-enrollment-form:not([hidden])) .auth-hero__kicker{display:none}
  .auth--compact .auth-hero__art,
  .auth-layout:has(.auth-card .mfa-form:not([hidden])) .auth-hero__art,
  .auth-layout:has(.auth-card .mfa-enrollment-form:not([hidden])) .auth-hero__art{right:-6px;bottom:28px;height:74%}
}

/* ───────── телефон пошире и планшет ───────── */
@media (min-width:520px){
  .auth-main{padding:0 24px 24px}
  .auth-card{max-width:480px;padding:32px 30px 26px}
  .auth-hero{padding-left:30px;padding-right:30px;min-height:clamp(300px,48vh,560px)}
  .auth-hero__title{font-size:clamp(28px,5vw,40px)}
  .auth .form-title{font-size:27px}
  .auth .field-row{grid-template-columns:1fr 1fr}
  .auth .enrollment-layout{grid-template-columns:140px minmax(0,1fr);align-items:start}
  .auth .enrollment-qr{width:140px;height:140px;margin:0}
  .auth .recovery-codes{grid-template-columns:1fr 1fr}
  .auth .submit-row--pair{grid-template-columns:1fr 1fr}
}

/* ───────── компьютер: панель слева во всю высоту, плитка входа справа по центру ───────── */
@media (min-width:960px){
  .auth-layout{flex-direction:row;padding:16px}
  .auth-hero{flex:0 0 min(47vw,760px);min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px);padding:40px 46px 46px;border-radius:32px;
    background:radial-gradient(640px 460px at 0% 0%,rgba(43,91,226,.30),transparent 70%),linear-gradient(180deg,#101F42 0%,#0E1B3A 48%)}
  .auth-hero__logo{width:190px;height:30px}
  .auth-hero__copy{max-width:none}
  .auth-hero__title{font-size:clamp(40px,4.3vw,64px)}
  .auth-hero__roles{display:block}
  .auth-hero__art{right:4%;left:auto;top:9%;bottom:auto;height:min(60%,640px)}
  .auth-main{flex:1 1 auto;justify-content:center;align-items:center;margin:0;padding:32px 24px}
  .auth-card{max-width:460px;padding:38px 38px 30px}
  .auth .form-title{font-size:30px}
  .auth-foot{margin-top:22px}
}
@media (min-width:960px) and (max-height:760px){
  .auth-hero__art{top:7%;height:52%}
  .auth-hero__title{font-size:clamp(36px,3.6vw,52px)}
}

/* С12 (28.09): iPhone в альбомной ориентации (viewport-fit=cover) — логотип, заголовок и плитка входа не под вырезом */
@media (min-width:520px) and (max-width:959.98px){
  .auth-hero{padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}
  .auth-main{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
}
@media (prefers-reduced-motion:reduce){
  .auth-card,.auth-hero__art,.auth .is-entering{animation:none !important}
  .auth-hero{transition:none !important}
  .auth .enter-btn,.auth .recovery-button,.auth .ghost-btn,.auth .input,.auth .recovery-input,.auth .code-input{transition:background-color .15s,border-color .15s,color .15s !important;transform:none !important}
  .auth .enter-btn[aria-busy="true"]::before,.auth .recovery-button[aria-busy="true"]::before{animation-duration:1.4s}
}