:root {
    --login-accent: #176b87;
    --login-border: #dfe3e8;
    --login-ink: #20272e;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

.auth-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 1.5rem;
    overflow-x: hidden;
    background: #edf1f3;
    color: var(--login-ink);
    letter-spacing: 0;
}

.auth-shell {
    width: min(100%, 26rem);
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
    color: #1d3944;
}

.auth-brand i {
    color: var(--login-accent);
    font-size: 1.8rem;
}

.auth-brand h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.auth-panel {
    overflow: hidden;
    border: 1px solid #d2d9de;
    border-top: 4px solid var(--login-accent);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(32, 39, 46, 0.08);
}

.auth-panel-heading {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--login-border);
}

.auth-panel-heading h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.auth-form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.auth-form .input-group-text {
    width: 2.75rem;
    justify-content: center;
    color: #52616c;
}

@media (max-height: 32rem) {
    .auth-page {
        place-items: start center;
    }
}