:root { --login-blue: #0f6cbd; --login-navy: #123b65; }
.secure-login-page { background: #edf4fa; min-height: 100vh; }
.secure-login-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); min-height: 100vh; }
.login-brand-panel { background: linear-gradient(135deg, #0f3154, #0f6cbd); color: #fff; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 12%; position: relative; }
.login-brand-panel:after { background: rgba(255,255,255,.07); border-radius: 50%; content: ''; height: 560px; position: absolute; right: -260px; top: -190px; width: 560px; }
.login-brand { background: #fff; border-radius: 9px; display: inline-flex; margin-bottom: 50px; padding: 9px 14px; position: relative; width: fit-content; z-index: 1; }.login-brand img { max-height: 58px; max-width: 200px; object-fit: contain; }
.login-install { margin-top: 26px; position: relative; z-index: 1; }.login-install button { background: #fff; border: 0; border-radius: 7px; color: #0f5d9e; cursor: pointer; font-size: 13px; font-weight: 700; padding: 11px 14px; }.login-install span { color: #e4f4ff; display: block; font-size: 12px; margin-top: 10px; max-width: 280px; }
.login-eyebrow { color: #7dcef9; display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; }.login-brand-panel h1 { color: #fff; font-size: 42px; line-height: 1.18; margin: 12px 0; position: relative; z-index: 1; }.login-brand-panel p { color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.7; max-width: 420px; position: relative; z-index: 1; }.login-points { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; position: relative; z-index: 1; }.login-points span { color: #d9efff; font-size: 13px; }.login-points i { color: #8bddff; margin-right: 6px; }
.login-form-panel { align-items: center; background: #fff; display: flex; justify-content: center; padding: 40px; }.login-wrap { max-width: 410px; width: 100%; }.login-content { background: transparent; padding: 0; }.login-form h2 { color: #17365d; font-size: 27px; margin: 9px 0 7px; }.login-form .login-eyebrow { color: var(--login-blue); }.login-subtitle { color: #718096; margin-bottom: 30px; }.login-form label { color: #425b76; font-size: 12px; font-weight: 700; margin-bottom: 7px; }.login-input { position: relative; }.login-input i { color: #8da0b4; left: 14px; position: absolute; top: 14px; z-index: 2; }.login-input .form-control { border: 1px solid #d6e1eb; border-radius: 7px; box-shadow: none; height: 46px; padding-left: 38px; }.login-input .form-control:focus { border-color: var(--login-blue); box-shadow: 0 0 0 3px rgba(15,108,189,.12); }.login-error-box { min-height: 0; }.login-checkbox { margin-top: 12px; }.login-checkbox .au-btn { background: var(--login-blue); border-radius: 7px; font-size: 14px; font-weight: 700; min-height: 46px; }.login-help { color: #8291a2; font-size: 12px; margin: 21px 0 0; text-align: center; }.login-help i { color: var(--login-blue); margin-right: 4px; }.login-error { background: #fff1f0; border: 1px solid #ffd0cc; border-radius: 6px; color: #b42318; display: block; font-size: 12px; margin: 0 0 10px; padding: 10px 12px; }.login-error:empty { display: none; }.login-form-panel .login-eyebrow { margin-bottom: 0; }
@media (max-width: 850px) { .secure-login-shell { display: block; }.login-brand-panel { min-height: 285px; padding: 45px 30px; }.login-brand { margin-bottom: 25px; }.login-brand-panel h1 { font-size: 30px; }.login-brand-panel p, .login-points { display: none; }.login-form-panel { min-height: calc(100vh - 285px); padding: 38px 25px; } }