.auth-screen {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px;
}

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

.auth-card {
    padding: clamp(16px, 4vw, 28px);
    border: 1px solid #dce0eb;
    border-radius: 10px;
    background: #fff;
}

.auth-card h1,
.auth-card h2,
.user-entry h3,
.auth-caption {
    margin: 0 0 16px;
}

.auth-card h1 {
    font-size: 24px;
}

.auth-card h2 {
    font-size: 18px;
}

.auth-caption,
.auth-fields small,
.user-entry small {
    color: #535d73;
}

.auth-fields {
    display: grid;
    gap: 12px;
    max-width: 380px;
}

.auth-fields label {
    display: grid;
    gap: 5px;
    font-weight: 600;
}

.auth-fields input {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid #a6aec1;
    border-radius: 6px;
    font: inherit;
    font-weight: 400;
}

.auth-fields p {
    margin: 0;
}

.auth-button {
    justify-self: start;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    background: #176044;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.auth-button:hover {
    background: #104a33;
}

.auth-button-danger {
    background: #9f2941;
}

.auth-button-danger:hover {
    background: #7b2032;
}

.auth-button-secondary,
.auth-button-secondary:hover {
    border-color: #a6aec1;
    color: inherit;
    background: #f4f5f8;
}

.auth-error,
.auth-notice {
    padding: 10px 14px;
    border-radius: 6px;
}

.auth-error {
    color: #8b2035;
    background: #fae8ec;
}

.auth-notice {
    color: #176044;
    background: #e4f6ed;
}

.auth-secondary,
.users-page .auth-card {
    margin-top: 16px;
}

.users-page {
    max-width: 720px;
}

.user-entry + .user-entry {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dce0eb;
}

.user-entry details {
    margin: 8px 0;
}

.user-entry summary {
    width: fit-content;
    cursor: pointer;
}

.user-entry details .auth-fields {
    margin: 8px 0 16px;
}