body { margin: 0; background: #eef2f8; }
.login-page { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 35px; overflow: hidden; background: linear-gradient(145deg, #eef2f8 0%, #f8f9fc 55%, #e9eef9 100%); font-family: 'Open Sans', Arial, sans-serif; }
.login-page::before { position: absolute; content: ""; inset: 0; opacity: .25; background-image: radial-gradient(#8092c8 .7px, transparent .7px); background-size: 22px 22px; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.login-orb--one { width: 360px; height: 360px; left: -170px; top: -150px; background: rgba(49, 87, 213, .13); }
.login-orb--two { width: 270px; height: 270px; right: -100px; bottom: -115px; background: rgba(30, 158, 119, .11); }
.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; width: min(950px, 100%); min-height: 590px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .8); border-radius: 26px; background: #fff; box-shadow: 0 30px 80px rgba(32, 49, 91, .18); }
.login-intro { position: relative; padding: 65px 58px; overflow: hidden; color: #fff; background: linear-gradient(140deg, #111a35 0%, #233c92 62%, #4164d6 100%); }
.login-intro::before, .login-intro::after { position: absolute; content: ""; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.login-intro::before { width: 290px; height: 290px; right: -145px; top: -85px; }
.login-intro::after { width: 210px; height: 210px; left: -100px; bottom: -95px; }
.login-brand-mark, .login-mobile-mark { display: grid; place-items: center; color: #3157d5; background: #fff; }
.login-brand-mark { width: 52px; height: 52px; margin-bottom: 70px; border-radius: 15px; font-size: 21px; box-shadow: 0 12px 28px rgba(9, 18, 51, .25); }
.login-eyebrow { display: block; margin-bottom: 14px; color: #bfcdf9; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.login-intro h1 { max-width: 390px; margin: 0 0 17px; color: #fff; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -.8px; }
.login-intro > p { max-width: 390px; margin: 0; color: #d4defe; font-size: 13px; line-height: 1.85; }
.login-features { display: grid; gap: 14px; margin-top: 58px; }
.login-features div { display: flex; align-items: center; gap: 11px; color: #e8edff; font-size: 11px; font-weight: 600; }
.login-features i { display: grid; place-items: center; width: 23px; height: 23px; color: #baf3de; border-radius: 7px; background: rgba(64, 215, 166, .14); font-size: 9px; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 58px 55px 40px; }
.login-mobile-mark { display: none; }
.login-site-name { display: block; margin-bottom: 25px; color: #3157d5; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.login-panel__header h2 { margin: 0 0 8px; color: #17223b; font-size: 27px; font-weight: 700; letter-spacing: -.4px; }
.login-panel__header p { margin: 0 0 34px; color: #818ca2; font-size: 11px; }
.login-form .form-group { margin-bottom: 19px; }
.login-form label { margin-bottom: 8px; color: #455168; font-size: 10px; font-weight: 700; }
.login-control { position: relative; }
.login-control > i { position: absolute; z-index: 2; left: 15px; top: 15px; color: #929daf; font-size: 12px; }
.login-control .form-control { height: 45px; padding: 10px 14px 10px 41px; color: #2f3b53; border: 1px solid #dfe4ed; border-radius: 11px; background: #fafbfc; box-shadow: none; font-size: 11px; }
.login-control .form-control:focus { border-color: #6c86dd; background: #fff; box-shadow: 0 0 0 3px rgba(49, 87, 213, .1); }
.login-control .form-control::placeholder { color: #aab2c0; }
.login-form .btn-submit { display: flex; align-items: center; justify-content: center; gap: 11px; height: 46px; margin-top: 28px; color: #fff; border: 0; border-radius: 11px; background: linear-gradient(105deg, #3157d5, #496ce0); font-size: 11px; font-weight: 700; box-shadow: 0 10px 24px rgba(49, 87, 213, .23); transition: all .2s ease; }
.login-form .btn-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(49, 87, 213, .3); }
.login-panel__footer { margin-top: 45px; color: #9aa3b3; text-align: center; font-size: 9px; }
.login-panel__footer i { margin-right: 5px; color: #5a70b9; }
@media (max-width: 800px) {
  .login-page { padding: 22px; }
  .login-shell { grid-template-columns: 1fr; width: min(450px, 100%); min-height: auto; }
  .login-intro { display: none; }
  .login-panel { padding: 45px 38px 35px; }
  .login-mobile-mark { display: grid; width: 46px; height: 46px; margin-bottom: 28px; color: #fff; border-radius: 13px; background: #3157d5; }
}
@media (max-width: 430px) {
  .login-page { padding: 12px; }
  .login-shell { border-radius: 19px; }
  .login-panel { padding: 35px 24px 28px; }
  .login-panel__header h2 { font-size: 24px; }
}