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

body {
    background:
        radial-gradient(circle at top, rgba(191, 214, 181, 0.45), transparent 30%),
        linear-gradient(180deg, #f7f3ea 0%, #eef2f5 100%);
    color: #18242f;
    font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

.auth-page {
    min-height: calc(100vh - 9rem);
    display: grid;
    align-items: center;
    padding: 3rem 0;
}

.auth-panel {
    width: min(28rem, 100%);
    display: grid;
    gap: 1.25rem;
}

.auth-panel h1 {
    margin: 0;
    color: #18242f;
    font-size: 2.75rem;
    line-height: 1;
}

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

.auth-form label {
    display: grid;
    gap: 0.4rem;
    color: #385063;
    font-weight: 700;
}

.auth-form input {
    min-height: 3rem;
    border: 1px solid #b9c4cf;
    border-radius: 0.5rem;
    padding: 0 0.85rem;
    color: #18242f;
    background: #fff;
}

.auth-form button {
    min-height: 3rem;
    border: 0;
    border-radius: 0.5rem;
    background: #18242f;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.check-row {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.check-row input {
    min-height: 0;
    width: 1rem;
    height: 1rem;
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.auth-links a {
    color: #285a7b;
    font-weight: 800;
}

.factor-list {
    display: grid;
    gap: 0.75rem;
}

.factor-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid #b9c4cf;
    border-radius: 0.5rem;
    background: #fff;
}

.factor-option span {
    display: grid;
    gap: 0.15rem;
}

.factor-option small {
    color: #5c6f7f;
}

.factor-option button {
    min-height: 2.5rem;
    border: 0;
    border-radius: 0.5rem;
    padding: 0 1rem;
    background: #18242f;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.alert,
.success {
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 0.5rem;
}

.alert {
    color: #7f1d1d;
    background: #fee2e2;
}

.success {
    color: #14532d;
    background: #dcfce7;
}