/* NineConnect Web v48 — exact approved login composition */
#authGate{
  background:#020814!important;
  overflow:auto!important;
}
#authGate .login-shell{
  position:relative!important;
  display:block!important;
  width:100vw!important;
  min-height:100vh!important;
  overflow:hidden!important;
  background:#020814 url('assets/login-target-v48.png') center center / cover no-repeat!important;
}

/* The approved reference already contains the whole left-hand artwork.
   Hide the old independently rendered left column so nothing is duplicated. */
#authGate .login-visual{display:none!important}

/* Real interactive login sits exactly over the panel position in the approved image. */
#authGate .login-panel{
  position:absolute!important;
  z-index:20!important;
  top:8.2vh!important;
  right:12.9vw!important;
  width:37.8vw!important;
  min-width:600px!important;
  max-width:760px!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  background:transparent!important;
  transform:none!important;
  border:0!important;
}
#authGate .login-panel::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:-9px!important;
  border-radius:40px!important;
  background:linear-gradient(180deg,rgba(3,15,31,.995),rgba(2,10,23,.995))!important;
  box-shadow:0 20px 65px rgba(0,0,0,.18)!important;
}
#authGate .login-panel::after{display:none!important;content:none!important}
#authGate .login-mobile-brand{display:none!important}

#authGate .login-form-wrap{
  position:relative!important;
  z-index:2!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-height:84vh!important;
  overflow:auto!important;
  margin:0!important;
  padding:22px 30px 18px!important;
  border:1.35px solid rgba(38,190,255,.72)!important;
  outline:0!important;
  border-radius:34px!important;
  background:linear-gradient(180deg,rgba(4,19,39,.97),rgba(2,11,25,.985))!important;
  box-shadow:0 28px 72px rgba(0,0,0,.35),inset 0 0 42px rgba(0,96,190,.045)!important;
  backdrop-filter:none!important;
  scrollbar-width:thin!important;
}
#authGate .login-form-wrap::before,#authGate .login-form-wrap::after{display:none!important;content:none!important}

#authGate .auth-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  max-width:none!important;
  margin:0 0 26px!important;
  padding:6px!important;
  border:0!important;
  border-radius:20px!important;
  background:#001020!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
#authGate .auth-tabs button{
  min-height:52px!important;
  padding:12px 15px!important;
  border-radius:15px!important;
  font-size:15px!important;
  font-weight:850!important;
}
#authGate .auth-tabs button.active{
  background:linear-gradient(100deg,#09527a,#0e55bf)!important;
  color:#fff!important;
  box-shadow:none!important;
}

#authGate .auth-heading{text-align:center!important;margin:0 0 12px!important}
#authGate .auth-heading>span{display:block!important;color:#17d7ff!important;font-size:.75rem!important;letter-spacing:.18em!important;font-weight:900!important}
#authGate .auth-heading h2{font-size:clamp(2rem,2.15vw,2.55rem)!important;line-height:1.06!important;margin:13px 0 10px!important;color:#f5f8ff!important}
#authGate .auth-heading p{max-width:96%!important;margin:0 auto 18px!important;font-size:.94rem!important;line-height:1.5!important;color:#9eb2c6!important}

#authGate .auth-field{display:block!important;margin:14px 0!important;text-align:left!important}
#authGate .auth-field>span{display:block!important;margin:0 0 9px 3px!important;color:#e5eef8!important;font-size:.84rem!important;font-weight:800!important}
#authGate .auth-field input{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:60px!important;
  padding:0 18px!important;
  border:1px solid rgba(21,174,255,.53)!important;
  border-radius:18px!important;
  background:#001020!important;
  color:#f5f8ff!important;
  font-size:1rem!important;
  box-shadow:none!important;
}
#authGate .auth-field input:focus{border-color:#17ceff!important;box-shadow:0 0 0 3px rgba(23,206,255,.08)!important}
#authGate .auth-field-hint{display:block!important;margin:8px 3px 0!important;color:#8fa6bc!important;font-size:12px!important;line-height:1.4!important}
#authGate .password-field{display:grid!important;grid-template-columns:1fr 54px!important}
#authGate .password-field input{grid-area:1/1/2/3!important;padding-right:54px!important}
#authGate .password-field button{grid-area:1/2!important;z-index:2!important;background:transparent!important;border:0!important;color:#aec2d4!important}

#authGate .auth-submit{
  width:100%!important;
  min-height:64px!important;
  margin-top:20px!important;
  border:1px solid #26dcff!important;
  border-radius:19px!important;
  background:linear-gradient(90deg,#11bdd8 0%,#1784ff 100%)!important;
  color:#fff!important;
  font-size:1.08rem!important;
  font-weight:900!important;
  box-shadow:0 14px 34px rgba(0,139,255,.20)!important;
}
#authGate .auth-switch-line{justify-content:center!important;margin-top:19px!important;background:transparent!important;border:0!important;padding:0!important}
#authGate .auth-switch-line span{color:#879caf!important}
#authGate .auth-switch-line button{color:#22d4ff!important}
#authGate .auth-cross-device{margin-top:15px!important;padding:14px 16px!important;border:1px solid rgba(31,139,197,.26)!important;border-radius:18px!important;background:#031426!important}
#authGate .auth-cross-device.auth-privacy{display:none!important}
#authGate .first-admin-note{margin-top:14px!important}

/* Registration stays functional inside the same panel. */
#authGate .registration-vehicle-setup,#authGate .vehicle-config-card,#authGate .vehicle-config-ebike,#authGate .register-section-title,#authGate .registration-two-col,#authGate .mode-editor-head,#authGate .register-mode-list{text-align:left!important}
#authGate .vehicle-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
#authGate .vehicle-choice{min-height:82px!important}

/* Reference was approved at desktop 2:1. Keep the same composition on wide screens. */
@media (min-aspect-ratio: 2/1){
  #authGate .login-shell{background-size:cover!important;background-position:center!important}
}
@media (max-width:1500px){
  #authGate .login-panel{right:5.8vw!important;width:43vw!important;min-width:560px!important}
  #authGate .login-form-wrap{padding:20px 26px 17px!important}
}
@media (max-width:1180px){
  #authGate .login-panel{right:3vw!important;width:48vw!important;min-width:520px!important}
  #authGate .auth-heading h2{font-size:2rem!important}
}
@media (max-width:930px){
  #authGate .login-shell{
    min-height:100vh!important;
    overflow:auto!important;
    background-position:center top!important;
    background-size:auto 50vh!important;
    background-repeat:no-repeat!important;
    background-color:#020814!important;
  }
  #authGate .login-shell::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,transparent 22vh,#020814 50vh,#020814 100%);
    pointer-events:none;
  }
  #authGate .login-panel{
    position:relative!important;
    z-index:5!important;
    top:auto!important;
    right:auto!important;
    width:min(92vw,680px)!important;
    min-width:0!important;
    max-width:none!important;
    margin:310px auto 28px!important;
  }
  #authGate .login-panel::before{inset:-5px!important}
  #authGate .login-form-wrap{max-height:none!important;overflow:visible!important}
}
@media (max-width:620px){
  #authGate .login-panel{width:94vw!important;margin-top:260px!important}
  #authGate .login-form-wrap{padding:19px 16px 16px!important;border-radius:25px!important}
  #authGate .auth-heading h2{font-size:1.8rem!important}
  #authGate .auth-heading p{font-size:.88rem!important}
  #authGate .auth-field input{min-height:54px!important}
  #authGate .vehicle-choice-grid{grid-template-columns:1fr!important}
}