/* Page */
.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at -10% 20%, rgba(46,71,255,0.25), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,180,255,0.18), transparent 55%),
    linear-gradient(180deg, #0b1530 0%, #0a1226 100%);
  color: #d9e1ff;
}

/* Shell */
.auth-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100vh;
  background: 
    linear-gradient(180deg, rgba(10, 16, 37, 0.85) 0%, rgba(10, 16, 37, 0.95) 100%), 
    var(--auth-hero-image, url('/assets/theme/default/img/login_hero.png'));
  color: #fff;
  background-repeat: no-repeat;
  background-position: center center;  /* <- centered */
  background-size: auto 100vh;         /* <- full viewport height, width auto */
  /* tip: GPU hint to prevent flicker on some browsers */
  transform: translateZ(0);
  z-index: 0;
}
@media (max-width: 992px) {
  .auth-wrap { grid-template-columns: 1fr; }
}

/* LEFT */
.auth-left {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.auth-left-inner {
  max-width: 600px;
  width: 100%;
  padding: 40px;
  text-align: left;
}
.auth-brand .brand-text { color: #fff; font-weight: 600; letter-spacing: .2px; }

.auth-h1 {
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
}
.auth-copy { max-width: 620px; color: #b7c2ff; }
.auth-bullets { padding-left: 1.1rem; margin: 0; color: #c9d3ff; }
.auth-bullets li { margin: .4rem 0; }

.auth-help a { color: #8ab8ff; text-decoration: none; }
.auth-help a:hover { text-decoration: underline; }

/* Decorative art */
.auth-art { position: absolute; pointer-events: none; opacity: .15; }
.auth-art.penguin { left: 6%; top: 12%; width: min(42vw, 460px); opacity: .18; }
.auth-art.trophy  { right: 5%; top: 4%; width: min(24vw, 260px); }
.auth-art.arrow   { right: 12%; bottom: 12%; width: min(22vw, 220px); }

/* RIGHT */
.auth-right {
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: linear-gradient(180deg, rgba(10,16,37,0.3), rgba(10,16,37,0.5));
}
.auth-card {
  width: 100%;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.96);
  color: #1f2330;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
@media (min-width: 576px) {
  .auth-card { padding: 32px; }
}
.auth-card-title {
  margin-bottom: 18px;
  font-weight: 700;
}

/* Inputs */
.form-control-lg {
  border-radius: 10px;
  padding: .9rem 1rem;
  border: 1px solid #e5e8f0;
  box-shadow: none !important;
}
.form-control-lg:focus {
  border-color: #7aa2ff;
  box-shadow: 0 0 0 .2rem rgba(63,117,255,.15) !important;
}

/* Password eye icon */
.input-with-icon {
  position: relative;
}
.input-with-icon .js-toggle-password {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: #8a94a6;
}

/* Buttons */
.btn-primary {
  background: #2f66ff;
  border-color: #2f66ff;
}
.btn-primary:hover { filter: brightness(1.05); }
.auth-switch a { text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Alerts alignment inside card */
.alert { border-radius: 10px; }