.login-page { background: #f4f7f9; color: #252a2d; }
.login-page > .app-header, .login-page > .app-footer { display: none; }
.login-page .app-main { display: grid; align-items: center; padding: 3.5rem 1.5rem 2rem; }
.login-layout { width: min(100%, 1320px); margin: auto; }
.login-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #fff; border: 1px solid #dfe7ec; border-radius: 24px; box-shadow: 0 20px 65px #183b4510; }
.login-form-panel { padding: clamp(2.5rem, 5vw, 5.5rem) clamp(2rem, 4vw, 4.5rem); align-self: center; }
.login-eyebrow { margin-bottom: 1.15rem; color: #09877b; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.login-form-panel h1 { margin: 0 0 .8rem; font-size: clamp(1.8rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: -.04em; }
.login-subtitle { margin: 0; color: #6b7176; font-size: 1rem; line-height: 1.6; }
.login-form { margin-top: 2.5rem; }
.login-form .mb-3 { margin-bottom: 1.5rem !important; }
.login-form .form-label { color: #48606c; font-size: .95rem; font-weight: 600; margin-bottom: .6rem; }
.login-form input.form-control { min-height: 56px; padding: .85rem 1rem; border: 1px solid #d4dfe5; border-radius: 10px; background: #fff; font-size: 1rem; box-shadow: 0 1px 2px #15313c04; }
.login-form input.form-control:focus { border-color: #36a99c; outline: 0; box-shadow: 0 0 0 4px #0b857b12; }
.login-form input.form-control.is-invalid { border-color: #bc3542; }
.login-form .alert { font-size: .9rem; }
.login-reset { display: inline-block; margin: 0 0 1.4rem; color: #636b70; font-size: .95rem; text-decoration: none; }
.login-reset:hover { color: #087e73; text-decoration: underline; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; min-height: 60px; padding: .9rem 1.2rem; border: 1px solid #087f74; border-radius: 9px; background: #087f74; color: #fff; font-size: 1.1rem; font-weight: 600; box-shadow: 0 2px 4px #103e3810; transition: background .15s; }
.login-submit span { font-size: 1.5rem; line-height: 1; font-weight: 400; }
.login-submit:hover { background: #066b62; }
.login-submit:focus-visible, .login-reset:focus-visible, .login-credit a:focus-visible { outline: 3px solid #26a899; outline-offset: 4px; }
.login-story { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; min-height: 650px; padding: clamp(2rem, 4vw, 4rem); background: radial-gradient(ellipse at 110% 110%, #277f70 0%, #184b4b 40%, #142e38 75%); color: #fff; }
.login-story::after { content: ""; position: absolute; z-index: -1; width: 510px; height: 510px; right: -290px; bottom: -320px; border: 1px solid #9ce1cc20; border-radius: 50%; box-shadow: 0 0 0 55px #9ce1cc05, 0 0 0 110px #9ce1cc04; }
.login-story-content { width: 100%; }
.login-lab-mark { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 2.7rem; border-radius: 20px; background: #60dbb8; color: #123c38; }
.login-lab-mark svg { width: 37px; height: 37px; }
.login-story h2 { margin: 0 0 1.6rem; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.2; font-weight: 650; letter-spacing: -.055em; }
.login-story p { max-width: 440px; margin: 0; color: #b1ccce; font-size: 1.05rem; line-height: 1.8; }
.login-credit { margin: 1.2rem 0 0; text-align: center; color: #74838b; font-size: .75rem; }
.login-credit span { margin-inline: .5rem; }
.login-credit a { color: #526a70; text-decoration: none; }
.login-credit a:hover { text-decoration: underline; }
@media (max-width: 767.98px) {
    .login-page .app-main { padding: 1.5rem 1rem; }
    .login-card { grid-template-columns: 1fr; border-radius: 18px; }
    .login-form-panel { padding: 2.5rem 1.5rem; }
    .login-story { min-height: auto; padding: 2.5rem 1.5rem; }
    .login-lab-mark { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 1.5rem; }
    .login-lab-mark svg { width: 28px; height: 28px; }
    .login-story h2 { font-size: 2.25rem; }
    .login-story p { font-size: .95rem; }
}