.login-body{
  min-height:100vh; display:grid; place-items:center; padding:20px;
}
.login-wrap{ width:100%; max-width:420px; }
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:34px 30px; box-shadow:var(--shadow-elev);
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.brand{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.brand .mark{
  width:46px; height:46px; border-radius:12px;
  background:conic-gradient(from 220deg, var(--cyan), var(--gold), var(--cyan));
  display:grid; place-items:center; font-weight:900; color:#04211f; font-size:1.1rem;
  box-shadow:var(--shadow-glow);
}
.brand-name{ font-weight:900; letter-spacing:1px; }
.brand-sub{ font-size:.68rem; color:var(--text-muted); font-family:var(--font-data); letter-spacing:1.5px; }

.login-card h1{ font-size:1.3rem; margin-bottom:4px; }
.login-form{ display:grid; gap:16px; margin-top:22px; }
.btn.lg{ padding:13px; font-size:1rem; }
.error-msg{ color:var(--danger); font-size:.84rem; min-height:1.1em; margin:0; }
.hint{ margin-top:18px; font-size:.78rem; text-align:center; }