/* Экран входа (.lg-): карточка по центру на мягком фоне темы, светлая и тёмная тема из токенов base.css. */

.lg-screen { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--safe-top) + 24px) 16px calc(var(--safe-bottom) + 24px); background: linear-gradient(170deg, var(--topbar-tint) 0%, var(--bg) 55%); }
/* Клавиатура открыта: экран входа — во всю видимую область над ней (body — слой по видимой области, app.js), форма
   сверху и прокручивается сама. Иначе карточка оставалась по центру всего экрана, а пароль и «Войти» — под клавиатурой. */
:root.kb-open .lg-screen { position: fixed; inset: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; place-items: start center; padding: 16px; }
.lg-card { width: 100%; max-width: 400px; padding: 28px 20px 20px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-pop); }
.lg-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.lg-brand img { width: 56px; height: 56px; flex: none; border-radius: 14px; }
.lg-brand h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; }
.lg-sub { margin-top: 2px; font-size: 15px; color: var(--text-3); }

.lg-field { display: block; margin-bottom: 12px; padding: 8px 14px 6px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); transition: border-color 120ms; cursor: text; }
.lg-field:focus-within { border-color: var(--primary); }
.lg-field.bad { border-color: var(--danger); }
.lg-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }
.lg-field:focus-within .lg-label { color: var(--primary); }
.lg-field.bad .lg-label { color: var(--danger-text); }
.lg-field input { width: 100%; min-width: 0; height: 34px; padding: 0; border: 0; outline: none; background: transparent; font-size: 17px; color: var(--text); }
.lg-pw { display: flex; align-items: center; gap: 4px; }
.lg-eye { width: 44px; height: 44px; margin: -6px -10px -6px 0; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--text-4); }
.lg-eye.on { color: var(--primary); }

.lg-err { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger-text); font-size: 15px; line-height: 1.35; }
.lg-err svg.ic { margin-top: 1px; }
.lg-go { margin-top: 6px; }
.lg-hint { margin: 14px 4px 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--text-3); }

@media (hover: hover) and (pointer: fine) {
  .lg-eye:hover { color: var(--text-2); }
  .lg-field:hover:not(:focus-within):not(.bad) { border-color: var(--text-4); }
}

@media (min-width: 1024px) {
  .lg-card { padding: 36px 32px 28px; }
}