/* Login-only visuals. Existing grid, panel widths and control sizes stay intact. */
#authView {
  position: relative;
  grid-template-rows: 1fr auto;
  color: #fff;
  background: linear-gradient(90deg, rgba(3,13,27,.92), rgba(3,13,27,.66) 43%, rgba(3,13,27,.45)),
    linear-gradient(0deg, rgba(2,9,19,.8), transparent 65%),
    url('/assets/drivemax-hero.webp') center / cover no-repeat;
}
#authView .auth-brand {
  min-width: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  align-content: stretch;
  grid-template-rows: auto 1fr;
}
#authView .brand-top { padding: 12px; background: transparent; border-color: transparent; }
#authView .brand-logo { width: 230px; height: 52px; object-fit: cover; object-position: center; }
#authView .brand-chip { color: #c7d5e8; background: transparent; border-color: transparent; font-weight: 500; }
#authView .brand-sub { color: #bdc8d8; }
#authView .brand-title { color: #fff; letter-spacing: -.025em; text-shadow: 0 3px 20px #0005; }
#authView .login-hero-copy { align-self: center; padding: 24px 12px; }
#authView .login-hero-copy > .brand-sub { margin-top: 18px; }
#authView .login-features { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; max-width: 420px; margin-top: 36px; }
#authView .login-features > div { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #d8e3f2; font-size: 12px; line-height: 1.3; }
#authView .login-features svg { width: 38px; height: 38px; padding: 9px; border: 1px solid #6fa7ea40; border-radius: 10px; background: #091c32a6; color: #9dc9ff; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#authView .auth-panel { min-width: 0; color: #fff; border-color: #7fa7d838; background: linear-gradient(145deg,rgba(10,31,57,.96),rgba(4,17,34,.95)); box-shadow: 0 30px 80px #0006,inset 0 1px #ffffff0a; }
#authView .auth-sub { color: #9fb1ca; }
#authView .input { color: #eaf2ff; border-color: #294362; background: #122a46b8; }
#authView .input::placeholder { color: #91a7c5; }
#authView .input:focus { border-color: #408fff; box-shadow: 0 0 0 3px #408fff1f; }
#authView #loginBtn { background: linear-gradient(90deg,#167cf5,#2094ff); box-shadow: 0 8px 24px #1077ff38; }
#authView .login-password-field { position: relative; min-width: 0; }
#authView #password { padding-right: 44px; }
#authView #passwordToggle { position: absolute; top: 0; right: 0; height: 100%; width: 40px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 10px; color: #9fb1ca; cursor: pointer; }
#authView #passwordToggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#authView #passwordToggle:focus-visible { outline: 2px solid #408fff; outline-offset: -3px; }
#authView .auth-err { color: #ff94a4; overflow-wrap: anywhere; }
#authView .login-access { margin: 0; text-align: center; color: #9fb1ca; font-size: 11px; }
#authView .login-footer { grid-column: 1 / -1; text-align: right; font-size: 11px; color: #c8d6e9a6; }
@media (max-width: 1180px) {
  #authView { grid-template-rows: auto auto auto; }
  #authView .login-hero-copy { padding-top: 18px; padding-bottom: 18px; }
  #authView .login-features { margin-top: 24px; }
  #authView .login-footer { text-align: center; }
}
@media (max-width: 520px) {
  #authView .brand-logo-row { flex-wrap: wrap; }
  #authView .brand-logo { max-width: min(230px,100%); }
  #authView .login-features { gap: 6px; }
  #authView .login-features > div { font-size: 10px; }
}