:root { --login-navy: #102a43; --login-blue: #2768ff; --login-ink: #172b4d; }
.login-page { min-height: 100vh; margin: 0; background: #f6f8fc; color: var(--login-ink); font-family: Inter, Arial, sans-serif; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(500px, .95fr); }
.login-intro { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; background: radial-gradient(circle at 15% 90%, #3e87ff 0, transparent 32%), linear-gradient(145deg, #0c2743 0%, #11416d 55%, #0e6582 100%); color: #fff; }
.login-brand, .login-mobile-brand { display: inline-flex; width: max-content; position: relative; z-index: 1; }
.login-brand img { width: 178px; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .96; }
.login-intro-content { position: relative; z-index: 1; max-width: 560px; margin: auto 0; }
.login-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 14px; }
.login-intro h1 { max-width: 520px; margin: 22px 0 16px; font-size: clamp(39px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -.045em; color: #fff; }
.login-intro p { max-width: 490px; color: #d5e5f7; font-size: 18px; line-height: 1.65; }
.login-features { display: grid; gap: 14px; margin-top: 38px; font-size: 15px; }
.login-features span { display: flex; align-items: center; gap: 10px; color: #f6fbff; }.login-features i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.15); color: #9de8ff; }
.login-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.035); }.login-orb-one { width: 450px; height: 450px; right: -190px; top: -130px; }.login-orb-two { width: 280px; height: 280px; right: 12%; bottom: -165px; }
.login-panel { display: grid; place-items: center; padding: 32px; background: #fbfcff; }.login-card { width: min(100%, 430px); }.login-mobile-brand { display: none; }.login-heading { margin-bottom: 34px; }.login-welcome { color: #2768ff; font-size: 14px; font-weight: 700; }.login-heading h2 { margin: 7px 0 8px; color: #132b4c; font-size: 32px; line-height: 1.2; letter-spacing: -.025em; }.login-heading p { margin: 0; color: #6b7d94; }
.login-form { display: grid; gap: 21px; }.login-field { display: grid; gap: 8px; }.login-field label { color: #354b68; font-size: 14px; font-weight: 700; }.login-input { display: flex; align-items: center; min-height: 56px; border: 1px solid #dbe4ef; border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }.login-input:focus-within { border-color: #4e80ff; box-shadow: 0 0 0 4px rgba(39,104,255,.11); }.login-input > i { margin: 0 13px 0 17px; color: #7d90a8; font-size: 20px; }.login-input input { width: 100%; min-width: 0; border: 0; outline: 0; color: #1c314e; font-size: 15px; background: transparent; }.login-input input::placeholder { color: #a4b1c1; }.login-password-toggle { display: grid; place-items: center; width: 50px; border: 0; background: transparent; color: #71839a; font-size: 19px; cursor: pointer; }.login-password-toggle:hover { color: #2768ff; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 55px; margin-top: 8px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #2768ff, #1d56dc); box-shadow: 0 12px 22px rgba(39,104,255,.24); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }.login-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 27px rgba(39,104,255,.32); }.login-submit i { font-size: 18px; }.login-alert { display: flex; align-items: center; gap: 9px; margin: -9px 0 22px; padding: 13px 15px; border: 1px solid #f4c4c3; border-radius: 10px; background: #fff2f1; color: #b42318; font-size: 14px; }.login-alert i { font-size: 18px; }.login-footer { margin: 31px 0 0; text-align: center; color: #92a0b2; font-size: 12px; }.login-footer span { padding: 0 5px; }
@media (max-width: 900px) { .login-shell { grid-template-columns: 1fr; }.login-intro { display: none; }.login-panel { min-height: 100vh; padding: 28px 24px; }.login-mobile-brand { display: inline-flex; margin-bottom: 48px; }.login-mobile-brand img { width: 148px; }.login-card { max-width: 440px; } }
@media (max-width: 420px) { .login-panel { padding: 24px 20px; }.login-mobile-brand { margin-bottom: 34px; }.login-heading h2 { font-size: 28px; } }