:root { --auth-surface: #ffffff; --auth-ink: #263c34; }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 32px 24px; }
.login-card { width: 100%; max-width: 448px; padding: 32px; display: grid; gap: 24px; color: var(--auth-ink); background: var(--auth-surface); border-radius: 16px; }
.login-card h1 { margin: 0; font-size: 24px; }
.login-card p { margin: 0; font-size: 16px; line-height: 1.8; }
.login-card input { width: 100%; font-size: 16px; }
.login-card .control { margin: 0; }
.login-card .control span { font-size: 14px; color: var(--auth-ink); }
.login-card .btn { font-size: 16px; padding: 16px 24px; }
.auth-logout { font-size: 14px; padding: 8px 16px; }
.login-message:empty { display: none; }
.login-card a.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.login-card .login-or { text-align: center; font-size: 14px; }
@media (max-width: 640px) {
  .login-screen { padding: 24px 16px; }
  .login-card { padding: 24px; }
  .login-card h1 { font-size: 22px; }
  .login-card p { font-size: 14px; }
  .login-card .control span { font-size: 12px; }
  .login-card .btn { font-size: 14px; }
  .login-card .login-or { font-size: 12px; }
  .auth-logout { font-size: 12px; }
}