/* Login page: the old topikprep.com split layout (photo left, form right). Always light so the dark-ink logo stays readable. */
.login-split { --bg:#fff; --surface:#fff; --surface-2:#EAF0FA; --ink:#20273A; --ink-2:#263148; --muted:#53627B; --line:#CCD5E3; --primary:#0047A0; --primary-hover:#003a85; --on-primary:#fff; --primary-soft:#EAF0FA; --primary-ink:#003a85; --red:#CD2E3A; --red-soft:#fde7ea; --ok:#0b7a43; --ok-soft:#dff5e9; --warn:#7a4300; --warn-soft:#fdf0d3; --danger:#b42318; --danger-soft:#fde8e6; --shadow:0 1px 2px rgba(15,23,42,.06),0 6px 20px rgba(15,23,42,.06); }
.login-split { color-scheme: light; display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); min-height: calc(100vh - 72px); background: #fff; color: #1b1f24; }
.login-photo { background: #e9e2da url("../img/login-photo.webp") left center / cover no-repeat; min-height: 100%; }
.login-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 2.2rem clamp(1.25rem, 6vw, 6rem) 2rem; max-width: 40rem; }
.login-logo img { width: 240px; max-width: 100%; height: auto; }
.login-panel h1 { margin: 2.2rem 0 .6rem; font-size: 1.6rem; line-height: 1.5; font-weight: 400; color: #111; letter-spacing: 0; }
.login-sub { margin: 0 0 1.5rem; color: #555; font-size: 1rem; font-weight: 300; }
.login-actions { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; min-height: 7.2rem; }  /* reserves the room of the Google + email buttons that appear once JS has loaded: no layout shift */
.login-actions .btn-google, .login-actions .btn-email { display: flex; align-items: center; justify-content: flex-start; gap: .9rem; width: 100%; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 2px; font: 500 .9rem var(--font); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.login-actions .btn-google { background: #fff; color: #555; }
.login-actions .btn-email { background: #CD2E3A; color: #fff; }
.login-actions .btn-email svg { flex: none; }
.login-actions .btn-google:hover, .login-actions .btn-email:hover { filter: brightness(.96); }
.login-actions .firebase-auth[hidden] { display: none; }
.login-email-form { margin: .2rem 0 0; }
.login-email-form[hidden] { display: none; }
.login-split a { color: #0047A0; }
.login-forgot { margin: 1.1rem 0 0; font-size: .95rem; }
.login-old { margin: 1.2rem 0 0; font-size: .9rem; color: #555; }
.login-foot { margin-top: 2rem; font-size: .8rem; line-height: 1.8; color: #666; }
.login-foot p { margin: 0; }
.login-split .notice { font-size: .9rem; }
@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; }
  .login-photo { min-height: 190px; height: 28vh; background-position: 12% 25%; }
  .login-panel { padding: 1.75rem 1.25rem 1.5rem; max-width: none; }
  .login-panel h1 { margin-top: 1.5rem; font-size: 1.4rem; }
  .login-actions { max-width: none; }
}
.login-actions .btn-email[hidden] { display: none; }