/* Shared desktop/mobile stacked login: a compact brand mark above the form. */
#login-view { flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#login-view .login-left { flex: 0 0 auto; width: 100%; min-height: 0; padding: 24px; align-items: flex-start; justify-content: center; }
#login-view .login-left::before, #login-view .login-left::after { display: none; }
#login-view .login-brand { margin: 0; justify-content: flex-start; }
#login-view .login-brand-title { display: flex; align-items: baseline; gap: 4px; color: #fff; font-size: 24px; font-weight: 600; white-space: nowrap; }
#login-view .login-brand-title small { font-size: .5em; font-weight: 400; }
#login-view .login-brand .brand-logo { width: 56px; height: 56px; font-size: 29px; border-radius: 12px; }
#login-view .login-right { flex: 1; width: 100%; flex-direction: column; gap: 20px; padding: 32px 20px; }
#login-view .login-card { width: 100%; max-width: 400px; }
#login-view .login-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; max-width: 100%; font-size: 12px; line-height: 1.5; color: #64748b; text-align: center; }
#login-view .login-legal a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; white-space: nowrap; }
#login-view .login-legal a:hover, #login-view .login-legal a:focus-visible { text-decoration: underline; }
#login-view .login-legal img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 650px) {
  #login-view .login-left { padding: 18px; }
  #login-view .login-brand { gap: 10px; }
  #login-view .login-brand-title { font-size: 22px; }
  #login-view .login-brand .brand-logo { width: 48px; height: 48px; font-size: 26px; }
  #login-view .login-right { justify-content: flex-start; padding: 20px 16px; gap: 16px; }
  #login-view .login-card { padding: 24px 22px; }
}