:root { color-scheme: light; --login-brand: #174e42; }
* { box-sizing: border-box; }
.login-page {
    margin: 0; background: #edf3ef; color: #182b25;
    font-family: system-ui, sans-serif; font-size: 1rem;
}
.login-shell {
    width: 100%; max-width: 30rem; margin: 0 auto; min-height: 100vh; min-height: 100svh;
    padding: max(1.8rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; justify-content: center;
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand img { border-radius: 1rem; margin-bottom: .8rem; }
.login-brand p {
    margin: 0 0 .35rem; color: var(--login-brand);
    font-weight: 800; font-size: clamp(1.2rem, 5.5vw, 1.65rem); letter-spacing: -.035em;
}
.login-brand span { font-size: .9rem; color: #52675c; }
.login-card {
    padding: 1.6rem 1.25rem; border: 1px solid #d9e5dd; border-radius: 1.15rem;
    background: white; box-shadow: 0 .7rem 2rem #174e4210; overflow-wrap: anywhere;
}
.login-card h1 { margin: 0 0 .5rem; font-size: 1.65rem; font-weight: 750; }
.login-intro { color: #52675c; margin-bottom: 1.5rem; line-height: 1.5; }
.login-field { margin-bottom: 1.2rem; }
.login-field label { display: block; font-weight: 650; margin-bottom: .5rem; }
.login-field .form-control {
    min-height: 52px; padding: .8rem .9rem; border-color: #b6c9bd; border-radius: .6rem;
    font-size: 1rem; background: #fbfcfb;
}
.login-field .form-control:focus {
    border-color: var(--login-brand); box-shadow: 0 0 0 .2rem #174e4220; background: white;
}
.login-submit {
    width: 100%; min-height: 52px; margin-top: .2rem; font-size: 1.05rem; font-weight: 700;
    border-radius: .65rem; background: var(--login-brand); color: white;
}
.login-submit:hover, .login-submit:focus { background: #103b31; color: white; }
.login-submit:focus-visible { outline: 3px solid #bb7417; outline-offset: 3px; }
.login-error {
    padding: .9rem; border: 1px solid #e6bdb8; border-radius: .6rem;
    background: #fff3f1; color: #922b21; margin-bottom: 1.2rem; line-height: 1.5;
}
.login-validation { display: block; color: #922b21; font-size: .9rem; margin-top: .4rem; }
.login-validation.validation-summary-valid, .login-validation.field-validation-valid { display: none; }
.login-validation ul { padding-left: 1.2rem; }
.login-footer { margin: 1.2rem 0 0; text-align: center; font-size: .8rem; color: #63766b; }
@media (min-width: 600px) { .login-card { padding: 2rem; } }