/* Final, scoped auth geometry: no layout-width or animation-induced panning. */
#login {
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:var(--vvh,100dvh)!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:calc(var(--sat) + 20px) max(16px,var(--sar)) calc(var(--sab) + 20px) max(16px,var(--sal))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-x:none;
  box-sizing:border-box;
  touch-action:pan-y;
}
#login::before,#login::after { display:none!important; }
#login .card {
  flex:0 0 auto;
  width:100%!important;
  min-width:0!important;
  max-width:380px!important;
  margin:auto 0!important;
  padding:24px 22px 20px!important;
  box-sizing:border-box;
  animation:none!important;
  transform:none!important;
}
#login .card *,#login .card *::before,#login .card *::after { box-sizing:border-box; }
#login input,#login button,#loginFields,#registerFields,#authForm { min-width:0!important; max-width:100%; }
#login .logo { width:54px!important; height:54px!important; margin-bottom:8px!important; }
#login .logo img { width:48px!important; height:48px!important; }
#login .sub { margin-bottom:14px!important; }
#login:has(#registerFields:not([hidden])) #totpLoginButton,
#login:has(#registerFields:not([hidden])) #passkeyLoginButton { display:none!important; }
#login .auth-legal-note {
  margin:14px 0 0;
  color:var(--label-secondary,#aebbd0);
  font-size:12px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
#login .auth-legal-note a,#login .auth-legal-all {
  color:var(--label-primary,#e8f0ff);
  text-decoration:underline;
  text-underline-offset:3px;
}
#login .auth-legal-all { display:inline-block; margin-top:8px; font-size:12px; line-height:1.6; }
#login a:focus-visible,#login button:focus-visible {
  outline:2px solid var(--accent,#78b2ff)!important;
  outline-offset:3px;
}
@media (max-height:760px), (max-width:420px) {
  #login { padding-top:calc(var(--sat) + 12px)!important; padding-bottom:calc(var(--sab) + 12px)!important; }
  #login .card { padding:18px 16px 16px!important; border-radius:18px!important; }
  #login:has(#registerFields:not([hidden])) .logo { display:none!important; }
  #login:has(#registerFields:not([hidden])) .sub { display:none!important; }
  #login:has(#registerFields:not([hidden])) h1 { font-size:26px!important; line-height:30px!important; }
  #login:has(#registerFields:not([hidden])) .sub-line { margin-top:3px!important; margin-bottom:10px; }
  #login:has(#registerFields:not([hidden])) .auth-tabs { margin-bottom:10px!important; }
  #login:has(#registerFields:not([hidden])) #registerFields input { min-height:44px!important; padding:10px 12px!important; }
  #login:has(#registerFields:not([hidden])) .colors { gap:10px; margin:12px 0 8px; }
  #login:has(#registerFields:not([hidden])) .auth-legal-note { margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #login *,#login *::before,#login *::after { animation:none!important; transition:none!important; }
}