/* Sign-in page (/login): one centred card on the calm landing background. */
.login-page { display: flex; flex-direction: column; }
.login-nav { width: 100%; }
.login { flex: 1; display: grid; place-items: center; padding: 12px 20px 72px; }
.login-card { position: relative; width: min(440px, 100%); padding: 72px 36px 32px; margin-top: 56px; }
.login-art { position: absolute; left: 50%; top: 0; transform: translate(-50%, -58%); filter: drop-shadow(0 18px 24px rgba(24, 60, 40, 0.18)); }
.login-form { gap: 16px; }
.login-head { gap: 8px; align-items: center; text-align: center; margin-bottom: 6px; }
.login-head h1 { font-size: 32px; }
.login-form .btn.wide { margin-top: 4px; }
.login-switch { text-align: center; }
.login-switch a { color: var(--ink); font-weight: 650; }
.login-form [data-error] { padding: 12px 14px; border-radius: 14px; background: rgba(217, 58, 58, 0.08); box-shadow: inset 0 0 0 1px rgba(217, 58, 58, 0.22); font-weight: 600; text-align: center; }
.login-form .input[readonly] { background: rgba(17, 21, 19, 0.05); color: var(--ink-2); cursor: default; }
.login-form .input[readonly]:focus { box-shadow: none; }
.login-setup { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.login-setup a { font-weight: 600; }

@media (max-width: 520px) {
  .login-card { padding: 64px 22px 26px; }
  .login-head h1 { font-size: 28px; }
}