/* REC0DET V241 — customer-ready Login screen polish.
   Presentation only. Authentication behaviour is unchanged. */

body:has(#viewLogin:not(.hidden)){
  background:#070604!important;
}

body:has(#viewLogin:not(.hidden)) .content{
  min-height:100dvh!important;
  padding:
    max(12px,env(safe-area-inset-top))
    14px
    max(18px,env(safe-area-inset-bottom))!important;
  display:grid!important;
  align-content:start!important;
}

#viewLogin.onboardingScreen{
  width:min(100%,470px)!important;
  margin:0 auto!important;
  padding:0!important;
}

#viewLogin .phoneAuthCard{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:20px!important;
  border:1px solid rgba(212,175,55,.20)!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,rgba(17,15,10,.985),rgba(8,8,7,.995))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,204,.035),
    0 18px 46px rgba(0,0,0,.36)!important;
}

/* The title already communicates the step; remove the noisy progress strip. */
#viewLogin .startupProgress{
  display:none!important;
}

/* Brand */
#viewLogin .phoneAuthBrand{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:13px!important;
  margin:0 0 19px!important;
}

#viewLogin .phoneAuthBrand .startupBrandMark.phoneAuthBrandMark{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(212,175,55,.34)!important;
  border-radius:15px!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(212,175,55,.09),transparent 62%),
    #0a0907!important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,204,.05),
    0 8px 20px rgba(0,0,0,.26)!important;
}

#viewLogin .phoneAuthBrand .startupBrandMark.phoneAuthBrandMark img{
  width:35px!important;
  height:35px!important;
  display:block!important;
  object-fit:contain!important;
}

#viewLogin .phoneAuthBrand>div{
  gap:3px!important;
}

#viewLogin .phoneAuthBrand strong{
  color:#fffaf0!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}

#viewLogin .phoneAuthBrand small{
  color:#9f9787!important;
  font-size:13px!important;
  line-height:1.35!important;
}

/* Form rhythm */
#viewLogin .phoneAuthFields{
  display:grid!important;
  gap:12px!important;
}

#viewLogin .phoneAuthField{
  gap:6px!important;
}

#viewLogin .phoneAuthField>span:first-child{
  color:#d8c483!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
}

#viewLogin .phoneCountryControl,
#viewLogin .phoneNumberControl,
#viewLogin .phonePasswordControl{
  min-height:50px!important;
  border:1px solid rgba(212,175,55,.18)!important;
  border-radius:14px!important;
  background:#0b0b09!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}

#viewLogin .phoneCountryControl:focus-within,
#viewLogin .phoneNumberControl:focus-within,
#viewLogin .phonePasswordControl:focus-within{
  border-color:rgba(226,188,72,.76)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.08)!important;
}

#viewLogin .phoneCountryControl{
  grid-template-columns:42px minmax(0,1fr) 34px!important;
}

#viewLogin .phoneCountryFlag{
  width:42px!important;
  font-size:22px!important;
}

#viewLogin .phoneCountryControl select{
  height:48px!important;
  font-size:15px!important;
  font-weight:760!important;
}

#viewLogin .phoneCountryArrow{
  width:34px!important;
  font-size:17px!important;
}

#viewLogin .phoneNumberControl>strong{
  min-width:62px!important;
  padding:0 11px!important;
  color:#e4c557!important;
  background:rgba(212,175,55,.045)!important;
  font-size:15px!important;
}

#viewLogin #inLogin,
#viewLogin #inPassword{
  height:48px!important;
  padding:0 12px!important;
  font-size:16px!important;
}

#viewLogin #btnTogglePassword{
  min-width:58px!important;
  padding:0 11px!important;
  font-size:12px!important;
  color:#d9bd62!important;
  background:rgba(212,175,55,.035)!important;
}

/* Remove redundant phone instruction; the visible dial prefix already explains it. */
#viewLogin #loginPhoneHint{
  display:none!important;
}

#viewLogin .phonePasswordHint{
  max-width:none!important;
  margin:8px 2px 0!important;
  color:#8f8778!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}

#viewLogin .phoneSessionNote{
  min-height:28px!important;
  margin:9px 0 4px!important;
  padding:6px 8px!important;
  gap:7px!important;
  border:0!important;
  border-radius:10px!important;
  color:#918a7d!important;
  background:transparent!important;
  font-size:11.5px!important;
}

#viewLogin .phoneSessionNote>span:first-child{
  width:17px!important;
  height:17px!important;
  flex-basis:17px!important;
  border-color:rgba(212,175,55,.22)!important;
  font-size:10px!important;
}

#viewLogin #loginMessage{
  min-height:0!important;
  margin:4px 2px!important;
  font-size:12px!important;
}
#viewLogin #loginMessage:empty{
  display:none!important;
}

/* Actions */
#viewLogin .phoneAuthPrimary{
  min-height:50px!important;
  margin-top:9px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,236,164,.18)!important;
  color:#100d07!important;
  background:linear-gradient(135deg,#efd05f,#d2a126 68%,#bd8c17)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 9px 20px rgba(151,105,10,.15)!important;
  font-size:15px!important;
  font-weight:950!important;
}

#viewLogin .phoneAuthSmsButton{
  min-height:46px!important;
  margin-top:9px!important;
  border-radius:14px!important;
  border:1px solid rgba(212,175,55,.18)!important;
  color:#e1c66f!important;
  background:#0e0d0a!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:850!important;
}

#viewLogin .startupDivider{
  margin:10px 0 5px!important;
  gap:9px!important;
  color:#6f685b!important;
  font-size:10px!important;
}

#viewLogin #btnGuest{
  min-height:38px!important;
  border:0!important;
  border-radius:10px!important;
  color:#aaa292!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12.5px!important;
  font-weight:800!important;
}
#viewLogin #btnGuest:hover,
#viewLogin #btnGuest:focus-visible{
  color:#e1c66f!important;
  background:rgba(212,175,55,.035)!important;
}

@media(max-width:520px){
  body:has(#viewLogin:not(.hidden)) .content{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  #viewLogin .phoneAuthCard{
    padding:17px 15px 15px!important;
    border-radius:21px!important;
  }

  #viewLogin .phoneAuthBrand{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:11px!important;
    margin-bottom:16px!important;
  }

  #viewLogin .phoneAuthBrand .startupBrandMark.phoneAuthBrandMark{
    width:44px!important;
    height:44px!important;
    border-radius:14px!important;
  }

  #viewLogin .phoneAuthBrand .startupBrandMark.phoneAuthBrandMark img{
    width:32px!important;
    height:32px!important;
  }

  #viewLogin .phoneAuthBrand strong{
    font-size:22px!important;
  }

  #viewLogin .phoneAuthBrand small{
    font-size:12.5px!important;
  }

  #viewLogin .phoneAuthFields{
    gap:10px!important;
  }
}

@media(max-width:360px){
  body:has(#viewLogin:not(.hidden)) .content{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  #viewLogin .phoneAuthCard{
    padding:15px 12px 13px!important;
  }

  #viewLogin .phoneAuthBrand strong{
    font-size:21px!important;
  }

  #viewLogin .phoneCountryControl{
    grid-template-columns:39px minmax(0,1fr) 30px!important;
  }

  #viewLogin .phoneCountryFlag{width:39px!important}
  #viewLogin .phoneCountryArrow{width:30px!important}
}

@media(prefers-reduced-motion:reduce){
  #viewLogin *{
    scroll-behavior:auto!important;
  }
}


/* REC0DET V242 — logo-only, no-scroll Login refinement. */
body:has(#viewLogin:not(.hidden)) .topbar,
body:has(#viewLogin:not(.hidden)) .appSidebar,
body:has(#viewLogin:not(.hidden)) .quickModuleDock,
body:has(#viewLogin:not(.hidden)) #switchModeFab,
body:has(#viewLogin:not(.hidden)) #pageTitle{
  display:none!important;
}

body:has(#viewLogin:not(.hidden)) .content{
  min-height:100dvh!important;
  padding:
    max(8px,env(safe-area-inset-top))
    10px
    max(10px,env(safe-area-inset-bottom))!important;
  display:grid!important;
  align-content:center!important;
  overflow:hidden!important;
}

#viewLogin.onboardingScreen{
  width:min(100%,440px)!important;
  padding:0!important;
}

#viewLogin .phoneAuthCard{
  padding:14px 14px 12px!important;
  border-radius:20px!important;
}

#viewLogin .phoneAuthLogo{
  display:grid!important;
  place-items:center!important;
  min-height:54px!important;
  margin:0 0 10px!important;
}

#viewLogin .phoneAuthLogo img{
  display:block!important;
  width:50px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 7px 18px rgba(212,175,55,.13))!important;
}

#viewLogin .phoneAuthFields{
  gap:8px!important;
}

#viewLogin .phoneAuthField{
  gap:4px!important;
}

#viewLogin .phoneAuthField>span:first-child{
  font-size:11px!important;
  line-height:1.15!important;
}

#viewLogin .phoneCountryControl,
#viewLogin .phoneNumberControl,
#viewLogin .phonePasswordControl{
  min-height:44px!important;
  border-radius:12px!important;
}

#viewLogin .phoneCountryControl{
  grid-template-columns:38px minmax(0,1fr) 30px!important;
}

#viewLogin .phoneCountryFlag{
  width:38px!important;
  font-size:20px!important;
}

#viewLogin .phoneCountryControl select{
  height:42px!important;
  font-size:14px!important;
}

#viewLogin .phoneCountryArrow{
  width:30px!important;
  font-size:15px!important;
}

#viewLogin .phoneNumberControl>strong{
  min-width:58px!important;
  padding:0 9px!important;
  font-size:14px!important;
}

#viewLogin #inLogin,
#viewLogin #inPassword{
  height:42px!important;
  padding:0 10px!important;
  font-size:15px!important;
}

#viewLogin #btnTogglePassword{
  min-width:54px!important;
  padding:0 9px!important;
  font-size:11px!important;
}

#viewLogin .phonePasswordHint,
#viewLogin .phoneSessionNote,
#viewLogin #loginPhoneHint{
  display:none!important;
}

#viewLogin #loginMessage{
  margin:2px 1px!important;
  min-height:0!important;
  font-size:11px!important;
}
#viewLogin #loginMessage:empty{
  display:none!important;
}

#viewLogin .phoneAuthPrimary{
  min-height:44px!important;
  margin-top:8px!important;
  border-radius:12px!important;
  font-size:14px!important;
}

#viewLogin .phoneAuthSmsButton{
  min-height:41px!important;
  margin-top:7px!important;
  border-radius:12px!important;
  font-size:13px!important;
}

#viewLogin .startupDivider{
  margin:7px 0 2px!important;
  font-size:9px!important;
}

#viewLogin #btnGuest{
  min-height:32px!important;
  border-radius:9px!important;
  font-size:11.5px!important;
}

@media(max-height:720px){
  #viewLogin .phoneAuthCard{
    padding-top:11px!important;
    padding-bottom:9px!important;
  }
  #viewLogin .phoneAuthLogo{
    min-height:44px!important;
    margin-bottom:7px!important;
  }
  #viewLogin .phoneAuthLogo img{
    width:42px!important;
    height:42px!important;
  }
  #viewLogin .phoneAuthFields{
    gap:6px!important;
  }
  #viewLogin .phoneAuthPrimary{
    min-height:42px!important;
    margin-top:6px!important;
  }
  #viewLogin .phoneAuthSmsButton{
    min-height:38px!important;
    margin-top:6px!important;
  }
  #viewLogin .startupDivider{
    margin:5px 0 1px!important;
  }
  #viewLogin #btnGuest{
    min-height:29px!important;
  }
}

@media(max-width:360px){
  #viewLogin .phoneAuthCard{
    padding-left:11px!important;
    padding-right:11px!important;
  }
}


/* REC0DET V245 — hard viewport lock for Login. */
html:has(#viewLogin:not(.hidden)),
body:has(#viewLogin:not(.hidden)){
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
}

body:has(#viewLogin:not(.hidden)) .app,
body:has(#viewLogin:not(.hidden)) .content,
#viewLogin.onboardingScreen{
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}

body:has(#viewLogin:not(.hidden)) .content{
  box-sizing:border-box!important;
}

#viewLogin .phoneAuthCard{
  max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
  overflow:hidden!important;
}

@media(max-height:640px){
  #viewLogin .phoneAuthLogo{
    min-height:38px!important;
    margin-bottom:5px!important;
  }
  #viewLogin .phoneAuthLogo img{
    width:36px!important;
    height:36px!important;
  }
  #viewLogin .phoneAuthFields{
    gap:5px!important;
  }
  #viewLogin .phoneAuthPrimary{
    min-height:38px!important;
    margin-top:5px!important;
  }
  #viewLogin .phoneAuthSmsButton{
    min-height:35px!important;
    margin-top:5px!important;
  }
  #viewLogin .startupDivider{
    margin:3px 0 0!important;
  }
  #viewLogin #btnGuest{
    min-height:26px!important;
  }
}


/* REC0DET V259 — global phone login clarity. */
#viewLogin .phoneOptionalLabel{
  margin-left:5px!important;
  color:#827966!important;
  font-size:9px!important;
  font-weight:750!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
#viewLogin #btnSendOtp{
  position:relative!important;
}