.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #eef9f4 100%);
  padding: 1.5rem;
}
.login-card {
  width: 100%; max-width: 340px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 1rem;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 18px 50px rgba(30, 41, 59, .14);
  display: flex; flex-direction: column; gap: .8rem;
}
.login-logo { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--text, #0f172a); }
.login-logo span { font-size: .8rem; font-weight: 600; color: var(--text-mut, #94a3b8); margin-left: .25rem; }
/* ƒ (florin) tem perninha — alinha base; sobrescreve o estilo do span genérico acima */
.login-logo .logo-f { display: inline-block; transform: translateY(0.07em); font-size: inherit; font-weight: inherit; color: inherit; margin-left: 0; }
.login-sub { font-size: .8rem; color: var(--text-mut, #94a3b8); margin-top: -.4rem; margin-bottom: .4rem; }
.login-field { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 600; color: var(--text-dim, #64748b); }
.login-field input {
  font-size: .9rem; padding: .55rem .65rem;
  border: 1px solid var(--border, #e2e8f0); border-radius: .5rem;
  background: var(--surface, #fff); color: var(--text, #0f172a);
}
.login-field input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.login-err { font-size: .75rem; color: #e11d48; }
.login-err[hidden] { display: none; }
.login-btn {
  margin-top: .4rem; padding: .6rem; border: none; border-radius: .55rem;
  background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff;
  font-size: .9rem; font-weight: 700; cursor: pointer;
}
.login-btn:hover { opacity: .94; }