.auth-header { flex-wrap: wrap; }
[data-screen-label="AUTH"] .console-main { justify-content: center; padding-block: var(--space-8); }
.auth-card { width: 100%; max-width: 440px; margin: auto; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: clamp(28px, 6vw, 42px); }
.auth-card form, .auth-field { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-card form { gap: var(--space-4); margin-top: var(--space-6); }
.auth-field label { font-weight: 700; }
.auth-field .input { width: 100%; min-width: 0; font-size: 16px; }
/* A failed sign-in must look like one (the owner could not see it): danger colour, icon, heading. */
.auth-alert { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4); border: 2px solid var(--color-danger); border-radius: var(--radius-md);
  background: var(--color-danger-bg); color: var(--color-danger); }
.auth-alert:focus { outline: 3px solid var(--color-danger); outline-offset: 2px; }
.auth-alert-icon { flex: 0 0 auto; margin-top: 1px; }
.auth-alert p { margin: 0; color: var(--color-text); }
.auth-alert .auth-alert-title { font-weight: 700; color: var(--color-danger); }
@media (max-width: 480px) { .auth-card { padding: var(--space-6); } .auth-header { padding-inline: var(--space-4); } }