/* ── Login ────────────────────────────────────────────────────────────── */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card { width: 380px; position: relative; background: var(--surface), var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 34px; box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 4px; font-family: var(--font-display); font-size: 28px;
  letter-spacing: 3px; text-transform: uppercase; }
.login-card p { margin: 0 0 22px; color: var(--muted); font-size: 13px; font-family: var(--font-mono); letter-spacing: 1px; }
.login-logo { display: block; height: 168px; width: auto; margin: 0 auto 24px; }
.login-error {
  margin-top: 18px; padding: 12px 14px;
  border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.login-error p { margin: 0; color: var(--danger); font-size: 13px; font-weight: 600; }
.login-error p + p { margin-top: 6px; }

/* The shared `.messages` feed sits on `--panel` — the same colour as the login
   card — so on these screens it takes the recessed plate instead. */
.login-card .messages li { background: var(--panel-2); font-size: 13px; }

/* Registration / enrolment cards carry more than two fields, so they get a wider
   plate than the login card's 380px. */
.login-card-wide { width: 440px; }
.login-links { margin: 18px 0 0 !important; text-align: center; font-size: 13px; }
/* `--accent-2`, the app's link ink, and not `--accent`, the *filled* CTA colour: on
   khaki-light the login card is drab chrome, where the orange fill is a button
   background and reading it as text put «Подати заявку» at 1.4:1 — a link nobody
   could see. `--accent-2` is the one token that block rebinds for exactly this. */
.login-links a, .btn-link {
  color: var(--accent-2); background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-decoration: none;
}
.login-links a:hover, .btn-link:hover { text-decoration: underline; }
.btn-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

/* ── TOTP enrolment ───────────────────────────────────────────────────── */
.totp-steps { margin: 0 0 20px; padding-left: 20px; color: var(--muted); font-size: 13px; }
.totp-steps li + li { margin-top: 4px; }
.totp-hint { font-family: inherit !important; letter-spacing: 0 !important; }
/* A QR must read dark-on-light in every theme, so the plate is white regardless
   of the palette (the SVG path is black). */
.qr-code {
  display: flex; justify-content: center; margin: 0 auto 18px;
  width: 216px; padding: 10px; background: #fff; border-radius: var(--radius);
}
.qr-code svg { display: block; width: 100%; height: auto; }
.totp-secret {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  margin-bottom: 22px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.totp-secret-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.totp-secret code { font-family: var(--font-mono); font-size: 14px; letter-spacing: 2px; word-break: break-all; }
/* The six-digit code field: wide, spaced digits, centred — it is the only thing
   on its page and should read as a keypad, not a text input. */
.code-input {
  text-align: center; font-family: var(--font-mono);
  font-size: 24px !important; letter-spacing: 8px;
}

/* ── The logo mark, across all three shells ───────────────────────────── */
/* The sidebar's own `.brand`/`.brand-logo` layout is `layout/shell.css` — it is
   shell chrome, not an auth page's. What is here is the one rule the login, the
   splash and the sidebar genuinely share:
   The logo is a white monochrome mark; --logo-invert flips it to dark on light
   themes (0 = leave as-is, 1 = invert). New themes just set the token. */
.brand-logo, .login-logo, .splash-logo {
  filter: invert(var(--logo-invert)); transition: filter .2s ease;
}

/* ── Splash / no-access screen ────────────────────────────────────────── */
.splash {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px; padding: 24px;
}
.splash-logo { height: 168px; width: auto; max-width: 80vw; }
/* The splash's only two controls — «Мій обліковий запис» and «Вийти» — sit on one
   quiet row and come forward on hover. */
.splash-logout { display: flex; gap: 10px; opacity: .6; transition: opacity .15s; }
.splash-logout:hover { opacity: 1; }