:root{
  --brand: #0d6efd;
  --card-radius: 12px;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


.auth-card{
  width: 100%;                 /* mobile first */
  max-width: 420px;            /* desktop limit */
  margin: 6vh auto;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 18px rgba(18,38,63,.08);
}


.brand-bar{
  height:6px;
  background:var(--brand);
  border-top-left-radius:var(--card-radius);
  border-top-right-radius:var(--card-radius);
}

.small-muted{
  font-size:.9rem;
  color:#6b7280;
}

.link-like{
  color:var(--brand);
  cursor:pointer;
  text-decoration:underline;
}

.app-header{
  text-align:center;
  margin-bottom:1.5rem;
}

.app-header img {
  max-height: 64px;
  max-width: 100%;     /* ✅ CRITICAL */
  width: auto;
  height: auto;
  object-fit: contain;
}


.app-header h4{
  font-weight:600;
  margin:0;
}

@media (max-width:480px){
  .auth-card{ margin:4vh 12px; }
}