/* REC0DET V262 — phone-first login + account market lock.
   Loaded after earlier login layers; only Login/OTP presentation is touched. */

html body.recodet-pro #viewLogin .loginMarketMini{
  min-height:22px;
  margin:6px 1px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#9c906f;
  font-size:9px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}

html body.recodet-pro #viewLogin #btnSendOtp.phoneAuthSmsPrimary{
  min-height:44px!important;
  margin-top:8px!important;
  border:1px solid rgba(255,236,164,.20)!important;
  border-radius:12px!important;
  color:#100d07!important;
  background:linear-gradient(135deg,#efd05f,#d2a126 68%,#bd8c17)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 18px rgba(151,105,10,.14)!important;
  font-size:14px!important;
  font-weight:950!important;
}

html body.recodet-pro #viewLogin #btnSendOtp.phoneAuthSmsPrimary:disabled{
  opacity:.58!important;
  filter:saturate(.72)!important;
}

html body.recodet-pro #viewLogin #btnGuest{
  width:auto!important;
  min-width:136px!important;
  justify-self:center!important;
  padding:0 12px!important;
  border:1px solid rgba(212,175,55,.12)!important;
  color:#9f9787!important;
  background:rgba(255,255,255,.012)!important;
}

html body.recodet-pro #viewLogin #btnGuest::before{
  content:'FREE';
  margin-right:7px;
  padding:3px 5px;
  border-radius:6px;
  color:#b79a45;
  background:rgba(212,175,55,.065);
  font-size:7px;
  font-weight:950;
  letter-spacing:.08em;
}

html body.recodet-pro #viewLogin .startupDivider{
  margin-top:6px!important;
}

/* OTP is part of the same compact phone-first flow. */
html:has(#viewOtp:not(.hidden)),
body:has(#viewOtp:not(.hidden)){
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

body:has(#viewOtp:not(.hidden)) .topbar,
body:has(#viewOtp:not(.hidden)) .appSidebar,
body:has(#viewOtp:not(.hidden)) .quickModuleDock,
body:has(#viewOtp:not(.hidden)) #bottomBar,
body:has(#viewOtp:not(.hidden)) #switchModeFab,
body:has(#viewOtp:not(.hidden)) #pageTitle{
  display:none!important;
}

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

html body.recodet-pro #viewOtp.onboardingScreen{
  width:min(100%,440px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

html body.recodet-pro #viewOtp .phoneOtpCard{
  width:100%!important;
  max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))!important;
  overflow:hidden!important;
}

html body.recodet-pro .checkoutFormGrid label small.recodetOptional{
  margin-left:4px;
  color:#817967;
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-height:640px){
  html body.recodet-pro #viewLogin .loginMarketMini{
    min-height:18px;
    margin-top:3px;
    font-size:8px;
  }
  html body.recodet-pro #viewLogin #btnSendOtp.phoneAuthSmsPrimary{
    min-height:38px!important;
    margin-top:5px!important;
  }
  html body.recodet-pro #viewLogin #btnGuest{
    min-height:27px!important;
  }
}