* { box-sizing: border-box; }

.auth-page {
    min-height: 100vh;
    margin: 0;
    padding: 32px 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e8f1eb, #f4f7f5 55%, #e4ece6);
    color: #17251b;
    font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.auth-layout { width: min(100%, 460px); }
.auth-card {
    padding: clamp(24px, 6vw, 40px);
    border: 1px solid #dce5de;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(21, 52, 31, .12);
}
.auth-brand { display: block; width: 180px; max-width: 70%; height: auto; margin: 0 auto 24px; }
.auth-card h1 { margin: 0 0 8px; color: #174c2a; font-size: clamp(1.5rem, 5vw, 2rem); }
.auth-lead { margin: 0 0 24px; color: #53635a; }
.auth-field { display: block; margin: 20px 0; font-weight: 600; }
.auth-field input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 7px;
    padding: 10px 12px;
    border: 1px solid #b9c8bd;
    border-radius: 9px;
    background: #fff;
    color: #17251b;
    font: inherit;
}
.auth-field input:focus { border-color: #1a5f2a; outline: 3px solid rgba(26, 95, 42, .16); }
.auth-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: #1a5f2a;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.auth-button:hover, .auth-button:focus { background: #12491f; }
.auth-link { display: inline-block; margin-top: 20px; color: #1a5f2a; font-weight: 600; }
.auth-error { margin: 0 0 20px; padding: 12px 14px; border: 1px solid #e6b8b8; border-radius: 8px; background: #fff1f1; color: #7c2020; }
.auth-success { margin: 20px 0; padding: 14px; border: 1px solid #bbd9c2; border-radius: 8px; background: #eff8f1; color: #174c2a; }
.auth-footer { margin-top: 20px; color: #66746b; text-align: center; font-size: .875rem; }
.auth-footer p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    .auth-card { animation: auth-enter .2s ease-out both; }
    @keyframes auth-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}