.auth-main {
    display: grid;
    min-height: 55vh;
    place-items: center;
}

.auth-card {
    width: min(100%, 440px);
    padding: clamp(20px, 6vw, 36px);
    border-radius: 18px;
    background: #fffaf2;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.auth-card h2 { margin-top: 0; }

.auth-card form {
    display: grid;
    gap: 10px;
}

.auth-card label { font-weight: 750; }

.auth-card input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid #5f6f52;
    border-radius: 9px;
    font: inherit;
}

.auth-card button,
.logout-form button {
    min-height: 48px;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: #5f6f52;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-card button { margin-top: 8px; }
.auth-error { color: #8b1e1e; font-weight: 700; }
.auth-success { color: #315c2b; font-weight: 700; }
.logout-form { margin-top: 16px; }
.account-link { color: inherit; font-weight: 750; }
.admin-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 24px;
    padding-block: 32px;
}
.admin-main > #admin-message { grid-column: 1 / -1; }
.auth-card select {
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid #5f6f52;
    border-radius: 9px;
    background: white;
    font: inherit;
}

button:focus-visible,
input:focus-visible {
    outline: 3px solid #7b3f3f;
    outline-offset: 3px;
}