.auth-page {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 30px;

    background: #f7f8fa;
}

.auth-card {
    width: min(420px, 100%);

    padding: 38px;

    background: white;
    border: 1px solid #e6e8eb;
    border-radius: 20px;

    box-shadow:
        0 20px 60px rgba(20, 24, 30, .07);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 40px;

    font-weight: 800;
}

.auth-brand span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    color: white;
    background: #17191c;

    border-radius: 9px;
}

.auth-heading h1 {
    margin: 0;

    font-size: 27px;
    letter-spacing: -1px;
}

.auth-heading p {
    margin: 8px 0 28px;

    color: #737982;
    font-size: 13px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
}

.auth-card label {
    margin: 15px 0 7px;

    font-size: 12px;
    font-weight: 700;
}

.auth-card input {
    width: 100%;
    padding: 12px 13px;

    border: 1px solid #dfe2e6;
    border-radius: 9px;

    outline: none;

    font: inherit;
}

.auth-card input:focus {
    border-color: #0a55f0;
    box-shadow: 0 0 0 3px #eaf3ff;
}

.auth-card form button {
    margin-top: 22px;
    padding: 13px;

    color: white;
    background: #17191c;

    border: 0;
    border-radius: 9px;

    font-weight: 700;
    cursor: pointer;
}

.auth-alert {
    padding: 11px 13px;

    color: #9b3c3c;
    background: #fff1f1;

    border: 1px solid #f5d5d5;
    border-radius: 9px;

    font-size: 12px;
}

.auth-switch {
    margin: 24px 0 0;

    color: #737982;

    text-align: center;
    font-size: 12px;
}

.auth-switch a {
    color: #0a55f0;
    font-weight: 700;
}

.auth-page { background: radial-gradient(ellipse at 85% 0%, rgba(0,175,254,.18), transparent 45%), #f4f8ff; }
.auth-card { border-color: #dbe6f7; box-shadow: 0 20px 60px rgba(10,85,240,.12); }
.auth-brand { display: block; margin-bottom: 30px; }
.auth-brand img { height: 46px; width: auto; display: block; }
.auth-heading h1 { font-family: Montserrat, Inter, sans-serif; color: #091445; }
button[type="submit"], .auth-button, .auth-submit {
    background: linear-gradient(135deg, #00affe 0%, #0a55f0 55%, #001e94 100%) !important;
    color: #fff !important;
}

.auth-card form button { background: linear-gradient(135deg,#00affe 0%,#0a55f0 55%,#001e94 100%); }

/* The public navbar sits above the card, so don't force a full extra screen */
.auth-page { min-height: calc(100vh - 72px); }
@media (max-width: 520px) { .auth-page { padding: 18px 14px; } .auth-card { padding: 26px 20px; } }

.auth-forgot { margin: -4px 0 14px; text-align: right; font-size: 13px; }
.auth-forgot a { color: #0a55f0; font-weight: 600; }
.auth-forgot a:hover { text-decoration: underline; }