html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #fff; }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 38%) 1fr; }
.brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 8vh 7vw 5vh; color: #fff; background: var(--navy); }
.brand-copy { position: relative; z-index: 1; }
.wordmark, h1, .mobile-brand span { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }
.wordmark { font-size: clamp(52px, 5.2vw, 82px); line-height: .95; }
.brand-rule { width: 120px; height: 8px; margin-top: 9px; background: var(--orange); }
.brand-copy p { margin: 28px 0 0; font-size: clamp(19px, 1.7vw, 27px); }
.stage-plan { width: min(105%, 620px); align-self: center; opacity: .55; filter: saturate(.75); transform: translateY(2%); }
.form-panel { display: grid; place-items: center; min-width: 0; padding: 42px; background: #fff; }
.login-form { width: min(100%, 390px); display: grid; gap: 24px; }
.login-form header { margin-bottom: 8px; }
h1 { margin: 0; color: var(--navy); font-size: 43px; line-height: 1; }
.login-form header p { margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.login-form label { display: grid; gap: 8px; font-weight: 750; font-size: 14px; }
.login-form input { width: 100%; min-height: 52px; border: 1px solid #9ba7b5; border-radius: 5px; padding: 0 15px; color: var(--ink); background: #fff; outline: none; }
.login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,103,232,.14); }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.password-field button { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); border: 0; padding: 8px; color: var(--blue); background: transparent; font-size: 12px; font-weight: 750; }
.login-error { margin-top: -10px; border: 1px solid #f2a7a7; border-radius: 5px; padding: 12px 14px; color: var(--red); background: #fff5f5; font-size: 14px; }
.sign-in { min-height: 54px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: .035em; }
.sign-in:hover { background: #0759c8; }
.sign-in:focus-visible, .forgot:focus-visible, .password-field button:focus-visible { outline: 3px solid rgba(8,103,232,.28); outline-offset: 2px; }
.sign-in:disabled { opacity: .62; cursor: wait; }
.forgot { justify-self: center; margin-top: -10px; border: 0; padding: 6px 10px; color: var(--blue); background: transparent; }
.recovery-panel { position:relative; display:grid; gap:14px; margin-top:-8px; padding:17px 48px 17px 17px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:var(--sl-radius-sm); background:var(--sl-surface-subtle); }
.recovery-panel h2 { margin:0; color:var(--navy); font-size:20px; letter-spacing:.01em; text-transform:uppercase; }
.recovery-panel p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.recovery-panel a { width:max-content; color:var(--blue); font-size:13px; font-weight:800; }
.recovery-panel > button { position:absolute; top:8px; right:8px; display:grid; width:36px; min-height:36px; place-items:center; border:0; background:transparent; color:var(--muted); }
.login-form footer { display: flex; align-items: center; gap: 13px; margin-top: 2px; padding-top: 23px; border-top: 1px solid #d8dde3; color: var(--muted); }
.login-form footer p { margin: 0; font-size: 13px; line-height: 1.45; }
.login-form footer strong { color: #556273; }
.shield-icon { width:24px; height:24px; flex:0 0 auto; opacity:.68; }
.mobile-brand { display: none; }
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; align-content: start; }
  .brand-panel { display: none; }
  .form-panel { display: block; place-items: stretch; min-height: 100vh; padding: 0 20px 40px; }
  .mobile-brand { display: grid; width: calc(100% + 40px); place-items: center; gap: 6px; margin: 0 -20px 58px; padding: 31px 20px 23px; color: #fff; background: var(--navy); }
  .mobile-brand span { font-size: 34px; line-height: 1; }
  .mobile-brand i { width: 54px; height: 4px; background: var(--orange); }
  .login-form { width: 100%; max-width: 440px; margin: 0 auto; gap: 23px; }
  h1 { font-size: 36px; }
  .login-form header p { font-size: 16px; }
  .login-form input, .sign-in { min-height: 54px; }
}
@media (prefers-reduced-motion: no-preference) { .login-form { animation: enter .35s ease-out both; } @keyframes enter { from { opacity: 0; transform: translateY(8px); } } }