/* =====================================================================
   ПЕРВАЯ МКП — вход / регистрация
   ===================================================================== */
body.auth-page { min-height: 100vh; overflow-x: hidden; }
.auth { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 100vh; }

/* Бренд-панель */
.auth__brand { position: relative; background: var(--sber-black); color: #fff; overflow: hidden; display: flex; }
.auth__net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95;
  -webkit-mask-image: radial-gradient(90% 90% at 60% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(90% 90% at 60% 45%, #000 30%, transparent 100%); }
.auth__brand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,24,.2) 0%, rgba(26,26,24,0) 30%, rgba(26,26,24,.85) 100%); pointer-events: none; }
.auth__brand-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 56px); width: 100%; }
.auth__kicker { color: var(--sber-lime); }
.auth__brand-body h1 { margin-top: 22px; font-size: clamp(28px, 2.9vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; max-width: 600px; color: #fff; }
.auth__points { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.auth__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--grey-300); }
.auth__points .ico { width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: rgba(33,160,56,.2); color: #8CE29B; stroke-width: 2.5; flex: none; margin-top: 1px; }
.auth__status { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--grey-400); }
.auth__status span { display: inline-flex; align-items: center; gap: 8px; }
.auth__status b { color: var(--sber-lime); font-weight: 600; }

/* Форма */
.auth__main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 88px 24px 40px; }
.auth__back { position: absolute; top: 26px; left: 28px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--fg-3); padding: 8px 12px 8px 8px; border-radius: 8px; transition: color .2s, background .2s; }
.auth__back:hover { color: var(--fg); background: var(--surface); }
.auth__card { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-lg); }
.auth__head h2 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.auth__head p { margin-top: 6px; font-size: 13.5px; color: var(--fg-3); }
.auth__form { display: none; flex-direction: column; gap: 16px; margin-top: 26px; }
.auth__form.is-active { display: flex; animation: formIn .5s var(--ease-out); }
@keyframes formIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth__form .fbox__hint { display: none; }
.auth__form .fbox.is-error .fbox__hint { display: block; }
.auth__form .btn { margin-top: 6px; }
.auth__row { display: flex; justify-content: space-between; align-items: center; }
.auth__demo { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; background: var(--lime-soft); color: var(--lime-fg); font-size: 12.5px; line-height: 1.4; }
.auth__demo .ico { flex: none; margin-top: 1px; }
.auth__legal { margin-top: 22px; font-size: 12px; color: var(--fg-4); text-align: center; max-width: 440px; line-height: 1.5; }
.auth__strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; margin-top: 2px; }
.auth__strength i { height: 3px; border-radius: 2px; background: var(--border); transition: background .3s; }
.auth__strength em { font-style: normal; font-size: 11px; color: var(--fg-4); margin-left: 6px; }
.auth__strength[data-level="1"] i:nth-child(-n+1) { background: var(--danger); }
.auth__strength[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.auth__strength[data-level="3"] i:nth-child(-n+3) { background: var(--lime); }
.auth__strength[data-level="4"] i:nth-child(-n+4) { background: var(--accent); }

.select.input--lg { height: 48px; border-radius: 10px; }

@media (max-width: 1000px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { min-height: 320px; }
  .auth__brand-inner { gap: 24px; }
  .auth__points { display: none; }
  .auth__brand-body h1 { font-size: clamp(24px, 5vw, 34px); max-width: 520px; }
  .auth__main { padding: 40px 20px; }
  .auth__back { position: static; align-self: flex-start; margin-bottom: 16px; }
}
@media (max-width: 560px) {
  .auth__status { display: none; }
  .auth__brand { min-height: 240px; }
}