/* Login / authentication screen */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--spacing-6);
    background:
        linear-gradient(120deg, rgba(11, 37, 69, 0.62) 0%, rgba(11, 37, 69, 0.42) 55%, rgba(11, 37, 69, 0.62) 100%),
        url("/img/login-bg.jpg") center / cover no-repeat,
        var(--color-brand-navy);
}
.auth__shell { width: 100%; max-width: 1000px; }
/* Brand logo sits inside the (white) card, above the title. */
.auth__brand {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--spacing-6);
}
.auth__logo { width: 240px; height: auto; }
.auth__card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 3.75rem 3rem;
    max-width: 460px;
    margin: 0 auto;
}
.auth__card .input { padding: var(--spacing-4); font-size: var(--font-size-md); }
.auth__card .btn--lg { padding: var(--spacing-4) var(--spacing-5); font-size: var(--font-size-md); }
.auth__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); text-align: center; margin-bottom: var(--spacing-8); }
.auth__subtitle {
    text-align: center; color: var(--color-text-secondary);
    font-size: var(--font-size-md); margin: var(--spacing-3) 0 var(--spacing-10);
}
.auth__form { display: flex; flex-direction: column; gap: var(--spacing-6); }
.auth__help {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
    margin-top: var(--spacing-6); padding-top: var(--spacing-5);
    border-top: 1px solid var(--color-border);
}
.auth__help-text { font-size: var(--font-size-sm); }
.auth__help-title { font-weight: var(--font-weight-semibold); display: flex; align-items: center; gap: var(--spacing-2); }
.auth__help-sub { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.alert {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.alert--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.alert--info { background: var(--color-info-bg); color: var(--color-info); }