:root { --lmiit-red: #b02335; --lmiit-red-dark: #8e1727; --navy: #14263d; --muted: #64748b; --line: #dce3eb; --surface: #fff; --page: #f4f6f8; }
* { box-sizing: border-box; }
body.login-page { min-width: 320px; margin: 0; color: var(--navy); background: var(--page); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.login-layout { display: flex; min-height: calc(100vh - 48px); }
.brand-panel, .signin-panel { width: 50%; }
.brand-panel { position: relative; display: flex; align-items: center; overflow: hidden; padding: clamp(3rem, 7vw, 7rem); background: #fff; isolation: isolate; }
.brand-content { position: relative; z-index: 2; max-width: 500px; }
.brand-logo-link { display: inline-block; }
.brand-logo { display: block; width: min(330px, 100%); height: auto; }
.brand-kicker, .eyebrow { margin: 2.75rem 0 .75rem; color: var(--lmiit-red); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.brand-panel h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.08; }
.brand-subtitle { margin: 1rem 0 2.5rem; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.2rem); }
.brand-features { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; color: #31445c; font-size: .98rem; font-weight: 600; }
.brand-features li { display: flex; align-items: center; gap: .9rem; }
.feature-icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; flex: 0 0 auto; color: var(--lmiit-red); background: #fff6f6; border: 1px solid #f3dbdf; border-radius: .65rem; font-size: 1.05rem; }
.brand-orbit { position: absolute; z-index: 0; border: 1px solid rgba(176, 35, 53, .12); border-radius: 50%; }
.brand-orbit-one { width: 42rem; height: 42rem; right: -22rem; top: -19rem; }
.brand-orbit-two { width: 28rem; height: 28rem; right: -17rem; bottom: -13rem; }
.brand-grid { position: absolute; right: 3%; bottom: 8%; width: 13rem; height: 13rem; opacity: .45; background-image: linear-gradient(rgba(20, 38, 61, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 38, 61, .08) 1px, transparent 1px); background-size: 22px 22px; transform: rotate(18deg); }
.signin-panel { display: flex; align-items: center; justify-content: center; padding: 3rem clamp(1.5rem, 6vw, 7rem); background: #f7f8fa; }
.signin-card { width: 100%; max-width: 460px; padding: clamp(2rem, 4vw, 3.25rem); background: var(--surface); border: 1px solid #e7ebef; border-radius: 1.25rem; box-shadow: 0 18px 50px rgba(20, 38, 61, .1); }
.signin-card-heading { margin-bottom: 2rem; }
.signin-card-heading .eyebrow { margin: 0 0 .7rem; }
.signin-card h2 { margin: 0 0 .5rem; font-size: 2rem; font-weight: 750; letter-spacing: -.035em; }
.signin-card-heading p:last-child { margin: 0; color: var(--muted); }
.form-label { margin-bottom: .55rem; color: #34465d; font-size: .9rem; font-weight: 700; }
.input-group-login .input-group-text, .input-group-login .form-control, .password-toggle { height: 3.35rem; border-color: var(--line); background: #fff; }
.input-group-login .input-group-text { width: 3.15rem; justify-content: center; color: #718096; border-right: 0; }
.input-group-login .form-control { padding-left: 0; border-left: 0; box-shadow: none; font-size: .96rem; }
.input-group-login .form-control::placeholder { color: #a5b0bd; }
.password-toggle { width: 3.2rem; border-left: 0; color: #718096; }
.password-toggle:hover { color: var(--lmiit-red); }
.input-group-login:focus-within .input-group-text, .input-group-login:focus-within .form-control, .input-group-login:focus-within .password-toggle { border-color: #c9505f; box-shadow: 0 0 0 .2rem rgba(176, 35, 53, .12); }
.input-group-login:focus-within .form-control { box-shadow: none; }
.input-group-login:focus-within .input-group-text { box-shadow: -.2rem 0 0 .2rem rgba(176, 35, 53, .12); }
.input-group-login:focus-within .password-toggle { box-shadow: .2rem 0 0 .2rem rgba(176, 35, 53, .12); }
.password-toggle:focus-visible, .login-submit:focus-visible, a:focus-visible { outline: 3px solid rgba(176, 35, 53, .35); outline-offset: 3px; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.35rem; border-color: var(--lmiit-red); border-radius: .65rem; background: var(--lmiit-red); font-weight: 700; transition: background-color .2s ease, transform .2s ease; }
.login-submit:hover, .login-submit:focus { border-color: var(--lmiit-red-dark); background: var(--lmiit-red-dark); }
.login-submit:hover { transform: translateY(-1px); }
.login-submit .submit-loading { display: none; align-items: center; gap: .5rem; }
.login-submit.is-loading .submit-label, .login-submit.is-loading > .bi { display: none; }
.login-submit.is-loading .submit-loading { display: flex; }
.login-alert { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.5rem; border: 0; border-left: 3px solid #b42332; border-radius: .5rem; color: #7f1d28; background: #fff2f3; font-size: .9rem; }
.login-alert i { margin-top: .1rem; }
.mobile-logo-wrap { display: none; }
.login-footer { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.5rem; color: #6b7787; background: #fff; border-top: 1px solid #e8ecf0; font-size: .76rem; text-align: center; }
.login-footer span { padding: 0 .45rem; color: #b6bec8; }
.login-footer a { color: var(--lmiit-red); font-weight: 700; text-decoration: none; }
.login-footer a:hover { color: var(--lmiit-red-dark); text-decoration: underline; }
@media (min-width: 769px) { .login-footer { position: fixed; right: 0; bottom: 0; left: 0; } }
@media (max-width: 768px) { .login-layout { display: block; min-height: 0; } .brand-panel { display: none; } .signin-panel { width: 100%; min-height: calc(100vh - 48px); padding: 2.25rem 1.25rem 3rem; align-items: flex-start; flex-direction: column; } .mobile-logo-wrap { display: block; width: 100%; margin: 0 auto 1.75rem; text-align: center; } .mobile-logo-wrap img { width: min(245px, 72vw); height: auto; } .signin-card { max-width: 520px; margin: 0 auto; } }
@media (max-width: 420px) { .signin-panel { padding: 1.5rem 1rem 2rem; } .mobile-logo-wrap { margin-bottom: 1.25rem; } .signin-card { padding: 1.75rem 1.35rem; border-radius: 1rem; } .signin-card h2 { font-size: 1.75rem; } .login-footer { padding-right: 1rem; padding-left: 1rem; line-height: 1.6; } }