/* страница входа — по токенам base.css */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login {
  width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 20px;
  padding: 40px 36px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  text-transform: uppercase;
}
.login .brand { margin-bottom: 4px; justify-content: center; }
/* заголовок отделён линией, чтобы форма читалась блоками */
.login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.login-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .06em; color: var(--l1); }
.login-head p { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--l3); }
.login label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--l2); transition: color .15s; }
.login input {
  height: 46px; padding: 0 16px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--l1);
  font: inherit; font-size: 15px; letter-spacing: .02em; text-transform: none; outline: none;
  transition: border-color .15s;
  background-clip: padding-box; /* иначе чёрный фон просвечивает сквозь сглаженную рамку на углах */
}
/* фокус подписью и мягкой рамкой, не белой: контрастная 1px дуга на углах рвётся сглаживанием */
.login input:focus { border-color: var(--l3); }
.login label:focus-within { color: var(--l1); }
/* автозаполнение chrome красит поле голубым и не даёт сменить background — перекрываем плоской заливкой изнутри */
.login input:-webkit-autofill { -webkit-text-fill-color: var(--l1); caret-color: var(--l1); box-shadow: inset 0 0 0 100px var(--bg); transition: background-color 9999s; }
/* ошибка: место не резервируем, поля обводим тем же --neg */
.login-err { margin: -4px 0 2px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--neg); }
.login-err:empty { display: none; }
.login.bad input { border-color: var(--neg); }
.login .btn { justify-content: center; height: 46px; }
.login .btn:disabled { opacity: .5; cursor: default; }
.login-foot { padding-top: 18px; border-top: 1px solid var(--border); text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--l3); }