.login-body{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.login-body::before{
  content:''; position:fixed; top:0; left:0; z-index:-1;
  width:100%; height:100vh; height:100lvh;
  background:url('/assets/img/bg.webp') center center / cover no-repeat;
}
@media (max-width: 768px) and (orientation: portrait){
  .login-body::before{ background-image:url('/assets/img/bg_p.webp'); }
}
.login-wrap{ width:100%; padding:40px 16px; display:flex; justify-content:center; }

.login-card{
  width:100%; max-width:380px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.55); border-radius:16px;
  padding:26px 24px 20px;
  box-shadow:0 16px 40px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.10);
}

.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.login-brand .brand-mark{ width:30px; height:30px; border-radius:7px; }
.login-brand .brand-word{ color:var(--heading); font-size:18px; font-weight:800; letter-spacing:-.3px; }
.login-sub{ margin:10px 0 18px; font-size:12px; color:var(--muted2); }

.login-error{
  background:var(--danger-soft); border:1px solid var(--danger-border); color:var(--danger-text);
  font-size:12.5px; font-weight:600; border-radius:8px; padding:10px 12px; margin-bottom:14px;
}

.login-card .input{ font-size:16px; }
.login-card .btn-block{ margin-top:6px; height:44px; font-size:14px; }

.login-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--divider);
  text-align:center; font-size:11px; color:var(--muted3);
}