/* BUKLIO · web authentication visual harmony v1
   Desktop registration/success inherit the approved onboarding shell.
   Mobile keeps the full-screen layout from auth-flow-v2. */

@media (min-width:621px){
  #authOverlay.buklio-register-screen,
  #authOverlay.buklio-success-screen{
    padding:22px!important;
    align-items:center!important;
    justify-content:center!important;
    background:
      radial-gradient(circle at 16% 10%,rgba(201,155,100,.13),transparent 28%),
      radial-gradient(circle at 88% 54%,rgba(141,162,143,.12),transparent 25%),
      #F6F3ED!important;
  }

  #authOverlay.buklio-register-screen .sheet,
  #authOverlay.buklio-success-screen .sheet{
    width:min(100%,560px)!important;
    max-width:560px!important;
    height:min(920px,calc(100dvh - 44px))!important;
    max-height:min(920px,calc(100dvh - 44px))!important;
    border-radius:38px!important;
    border:1px solid rgba(15,61,46,.08)!important;
    background:rgba(246,243,237,.82)!important;
    box-shadow:0 26px 80px rgba(27,48,39,.12)!important;
  }

  #authOverlay.buklio-register-screen .sheet-body,
  #authOverlay.buklio-success-screen .sheet-body{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    box-sizing:border-box!important;
    padding:38px 34px 32px!important;
    background:transparent!important;
  }

  #authOverlay.buklio-register-screen #authDefaultContent{
    display:flex!important;
    min-height:100%!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  #authOverlay.buklio-register-screen .buklio-register-head{
    padding-top:18px!important;
  }

  #authOverlay.buklio-success-screen #signupSuccessPane{
    min-height:100%!important;
    justify-content:center!important;
  }

  /* Entry screens always keep the approved light onboarding palette,
     even when the signed-in app preference is dark mode. */
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-register-screen,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen{
    background:
      radial-gradient(circle at 16% 10%,rgba(201,155,100,.13),transparent 28%),
      radial-gradient(circle at 88% 54%,rgba(141,162,143,.12),transparent 25%),
      #F6F3ED!important;
    color:#33444b!important;
  }

  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-register-screen .sheet,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen .sheet{
    border-color:rgba(15,61,46,.08)!important;
    background:rgba(246,243,237,.82)!important;
    box-shadow:0 26px 80px rgba(27,48,39,.12)!important;
  }

  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-register-screen .sheet-body,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen .sheet-body{
    background:transparent!important;
  }

  html[data-theme="dark"] #authOverlay.buklio-register-screen #registerForm input{
    border-color:#d9d8d2!important;
    background:rgba(255,253,248,.78)!important;
    color:#33434a!important;
  }
  html[data-theme="dark"] #authOverlay.buklio-register-screen #registerForm input:focus{
    border-color:rgba(15,61,46,.52)!important;
    background:#fffdf8!important;
  }
  html[data-theme="dark"] #authOverlay.buklio-register-screen .buklio-register-head h2,
  html[data-theme="dark"] #authOverlay.buklio-register-screen .buklio-register-back{
    color:#0F3D2E!important;
  }
  html[data-theme="dark"] #authOverlay.buklio-register-screen .buklio-register-head p,
  html[data-theme="dark"] #authOverlay.buklio-register-screen .buklio-register-legal,
  html[data-theme="dark"] #authOverlay.buklio-register-screen .auth-divider{
    color:#607078!important;
  }
  html[data-theme="dark"] #authOverlay.buklio-register-screen .buklio-field-icon,
  html[data-theme="dark"] #authOverlay.buklio-register-screen .password-eye{
    color:#50636b!important;
  }
  html[data-theme="dark"] #authOverlay.buklio-register-screen #googleLoginBtn{
    border-color:#d9d8d2!important;
    background:rgba(255,253,248,.82)!important;
    color:#4d5d64!important;
  }
  html[data-theme="dark"] #authOverlay.buklio-register-screen .auth-divider:before,
  html[data-theme="dark"] #authOverlay.buklio-register-screen .auth-divider:after{
    background:#d2d2cd!important;
  }
}

/* Mobile entry screens share one background with the onboarding:
   warm cream at the top, fading almost imperceptibly to white. */
@media (max-width:620px){
  .buklio-onboarding,
  #authOverlay.buklio-register-screen,
  #authOverlay.buklio-success-screen,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-register-screen,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen{
    background:
      radial-gradient(circle at 14% 8%,rgba(201,155,100,.10),transparent 30%),
      linear-gradient(180deg,#F2EEE7 0%,#F6F3ED 34%,#FAF8F4 68%,#FFFFFF 100%)!important;
  }

  #authOverlay.buklio-register-screen .sheet,
  #authOverlay.buklio-success-screen .sheet,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-register-screen .sheet,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen .sheet{
    background:transparent!important;
  }

  #authOverlay.buklio-register-screen .sheet-body,
  #authOverlay.buklio-success-screen .sheet-body,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-register-screen .sheet-body,
  html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen .sheet-body{
    background:transparent!important;
  }
}

/* Google keeps its own official brand identity instead of inheriting BUKLIO monochrome icon styling. */
#authOverlay #googleLoginBtn .google-g{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:initial!important;
  font-size:0!important;
  line-height:0!important;
}
#authOverlay #googleLoginBtn .google-g svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
}