:root{
  --brand-primary:#2c6be0;
  --brand-primary-600:#1f56bb;
  --brand-graphite:#2b2f36;
  --brand-gray:#e9eef5;
  --brand-light:#f7f9fc;
  --brand-sky:#e7f0ff;
}
.auth-body{background:var(--brand-light); min-height:100vh;}
.auth-layout{display:grid; grid-template-columns:1fr 1fr; min-height:100vh;}
.auth-pane{position:relative;}
.auth-pane--form{display:flex; align-items:center;}
.auth-pane--visual{
  background:#0b1220 url('/assets/auth/img/bg-1.webp') center/cover no-repeat;
  transition: background-image .5s ease;
}
.visual-overlay{position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,0,0,.25), rgba(0,0,0,.05));}
.visual-credit{position:absolute; left:1rem; bottom:1rem; color:#fff; opacity:.85}
.brand-logo{width:40px; height:40px; background:var(--brand-sky); color:var(--brand-primary);}
.brand-name{color:var(--brand-graphite);}
.card{border-radius:1rem;}
.btn-primary{
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
  --bs-btn-focus-shadow-rgb: 44, 107, 224;
}
.form-control:focus{box-shadow:0 0 0 .25rem rgba(44,107,224,.15);}
@media (max-width: 992px){
  .auth-layout{grid-template-columns:1fr;}
  .auth-pane--visual{display:none;}
}