:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;

  /* “feminino” sem ficar infantil */
  --accent: #d946ef;     /* magenta suave */
  --accent2:#f472b6;     /* rosa */
  --ring: rgba(217, 70, 239, .18);
}

html, body { height: 100%; }

.login-page{
  min-height: 100%;
  background:
    radial-gradient(1100px 600px at 12% 10%, rgba(244,114,182,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 30%, rgba(217,70,239,.16), transparent 55%),
    var(--bg);
  color: var(--text);
}

.login-shell{
  max-width: 980px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.10);
}

.login-brand{
  color: #fff;
  background:
    linear-gradient(135deg, rgba(217,70,239,.95), rgba(244,114,182,.92)),
    url("/assets/login-bg.jpg");
  background-size: cover;
  background-position: center;
}

.brand-logo{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-title{
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
}
.brand-subtitle{
  opacity: .92;
  font-weight: 600;
}

.brand-headline{
  font-weight: 800;
  margin: 0;
}
.brand-text{
  opacity: .92;
  max-width: 34ch;
}

.brand-footer{
  opacity: .9;
}

.login-form{
  background: rgba(255,255,255,.85);
}

.form-title{
  font-weight: 800;
}
.form-subtitle{
  color: var(--muted);
}

.form-control{
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: none;
}

.form-control:focus{
  border-color: rgba(217,70,239,.45);
  box-shadow: 0 0 0 .25rem var(--ring);
}

.btn-primary{
  border: none;
  border-radius: 14px;
  padding: .9rem 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.btn-primary:hover{
  filter: brightness(.98);
}

.alert{
  border-radius: 14px;
}

/* Mobile: fica “um embaixo do outro” e reduz padding */
@media (max-width: 991.98px){
  .login-shell{
    border-radius: 18px;
  }
  .brand-text{
    max-width: none;
  }
}