.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(380px, 100%);
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
  padding: 32px 28px; text-align: center; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55);
}
.login-logo { width: 52px; height: 52px; border-radius: 14px; background: #f4f6fa; color: #3b4659; display: grid; place-items: center; margin: 0 auto 14px; }
.login-card h1 { font-family: Georgia, serif; font-size: 26px; margin: 0 0 4px; }
.login-sub { color: var(--muted); margin: 0 0 22px; font-size: 13.5px; }
.login-card input {
  width: 100%; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; outline: none; margin-bottom: 12px;
}
.login-card input:focus { border-color: var(--accent-hover); }
.login-card .btn { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
.login-card .btn:disabled { opacity: .6; cursor: wait; }
.login-or { color: var(--muted); font-size: 12.5px; margin: 12px 0; }
.login-error { color: var(--err); font-size: 13px; margin: 12px 0 0; }