body { font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(135deg,#f4f7ff 0%,#eef6f9 100%); }
.login-split { min-height: 100vh; }
.login-visual {
  /* Layered background: subtle overlay + photo to ensure good contrast and reliable rendering */
  /* Restored original photographic visual (Unsplash) */
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)), url('/images/back.jpg') center/cover no-repeat;
  background-color: #e9eef5; /* fallback while image loads or if missing */
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Keep overlay minimal; if the image still appears grey, reduce opacity here */
.login-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,13,20,0.02), rgba(8,13,20,0.04));
  z-index: 1;
  pointer-events: none;
}

.brand { position: absolute; left: 2rem; bottom: 2rem; color: white; z-index: 2; }
.login-card { max-width: 420px; margin: 6rem auto; padding: 2.25rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(34,40,49,0.08); background: #fff; }
.form-control:focus { box-shadow: none; border-color: #6c63ff; }
.login-footer { font-size: .9rem; color: #6b7280; }

/* Mobile / responsive tweaks */
@media (max-width: 991px) {
  .login-visual { display:none; }
  .login-card{ margin:2.5rem 1rem; padding:1.5rem; }
  #body-div { padding: 0 0.5rem; }
}

@media (max-width: 480px) {
  .login-card { margin:1.75rem 0.75rem; padding:1.25rem; }
  .login-card h2 { font-size:1.25rem; }
}