/* Login composition. Theme Engine continues to own colors and materials. */
#authView {
  min-height: 100svh;
  grid-template-columns: minmax(0,1.25fr) minmax(350px,.85fr);
  grid-template-rows: auto minmax(0,1fr) auto;
  column-gap: clamp(32px,4.2vw,76px);
  row-gap: 28px;
  padding: 28px clamp(28px,4.4vw,76px) 20px;
}
#authView > .hero-brand { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }
#authView .hero-logo { width: 48px; height: 48px; }
#authView .hero-brand-copy h2 { font-size: 29px; line-height: 1.15; letter-spacing: -1.1px; }
#authView .hero { min-width: 0; max-width: none; margin: 0; padding: 36px 0; gap: 38px; justify-content: center; border: 0; overflow: visible; }
#authView .hero-copy { max-width: 760px; text-align: left; }
#authView .hero-copy h1 { max-width: none; white-space: nowrap; font-size: clamp(30px,3.7vw,60px); font-weight: 600; line-height: 1.16; letter-spacing: -.05em; }
#authView .hero-copy h1 em { font-style: normal; }
#authView .hero-copy p { display: block; margin: 26px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.85; text-wrap: pretty; }
#authView .hero-points { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 560px; }
#authView .hero-point { padding: 0 0 0 18px; border: 0; border-left: 2px solid var(--dm-active-line,var(--line)); background: none; border-radius: 0; }
#authView .hero-point b { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
#authView .hero-point span { display: block; font-size: 13px; line-height: 1.65; text-wrap: pretty; }
#authView .login-wrap { min-width: 0; padding: 18px 0; border: 0; align-content: center; }
#authView .login { width: 100%; max-width: 440px; margin: 0; padding: 22px 34px 26px; }
#authView .login h2 { font-size: 28px; line-height: 1.25; margin-bottom: 8px; }
#authView .login-intro { margin: 0 0 26px; line-height: 1.6; }
#authView .login .field { margin-top: 20px; }
#authView .login .field label { margin-bottom: 9px; }
#authView .login .control { min-height: 50px; font-size: 15px; }
#authView .login .btn[type="submit"] { min-height: 48px; margin-top: 26px; }
#authView #loginMessage { min-height: 18px; margin-top: 16px !important; }
#authView #setupForm { padding-top: 34px; padding-bottom: 30px; }
#authView .auth-credit { grid-column: 1 / -1; text-align: center; }
@media (min-width: 1800px) {
  #authView { column-gap: 100px; padding-inline: max(76px,calc((100vw - 1540px)/2)); }
}
@media (max-width: 980px) {
  #authView { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; gap: 30px; padding: 24px clamp(20px,5vw,40px); }
  #authView > .hero-brand { order: 0; }
  #authView .hero { display: contents; }
  #authView .hero-copy { order: 1; width: 100%; max-width: 650px; margin: 0 auto; }
  #authView .hero-copy h1 { font-size: clamp(21px,5.5vw,42px); letter-spacing: -.045em; }
  #authView .hero-copy p { margin-top: 18px; font-size: 15px; line-height: 1.75; max-width: none; }
  #authView .login-wrap { order: 2; padding: 0; width: 100%; }
  #authView .hero-points { order: 3; width: 100%; max-width: 650px; margin: 0 auto; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  #authView .hero-point { padding-left: 12px; }
  #authView .auth-credit { order: 4; }
}
@media (max-width: 560px) {
  #authView { padding: 20px; gap: 26px; }
  #authView .hero-logo { width: 42px; height: 42px; }
  #authView .hero-brand-copy h2 { font-size: 27px; }
  #authView .hero-copy p { font-size: 14px; line-height: 1.75; }
  #authView .login { padding: 16px 24px 24px; }
  #authView .login h2 { font-size: 26px; }
  #authView .login-intro { margin-bottom: 22px; font-size: 13px; }
  #authView .login .control { font-size: 16px; }
  #authView .hero-points { grid-template-columns: 1fr; gap: 20px; padding: 2px 4px; }
}
@media (max-width: 359px) {
  #authView { padding-inline: 16px; }
  #authView .login { padding-inline: 20px; }
}