/* Four Color Comic v40.31.57 — exact user-supplied login artwork */

/*
  Uses the exact PNG supplied by the site owner. The live authentication card
  remains functional and is placed over the card area already present in the
  artwork so users do not see two competing login experiences.
*/
#authGate.auth-gate{
  min-height:100dvh!important;
  height:100dvh!important;
  overflow:auto!important;
  padding:0!important;
  background-color:#000!important;
  background-image:url('/assets/fourcolor/fcc-login-background-v403157.png')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
}

/* Do not darken or replace the supplied artwork. */
#authGate.auth-gate::before,
#authGate.auth-gate::after{display:none!important;content:none!important}

/* The logo/tagline are already part of the supplied artwork. */
#authGate .fcc-login-official-brand-v403136{display:none!important}
#authGate .auth-showcase,
#authGate .auth-showcase-v4011{display:none!important}

/* Overlay the real form on the form panel that is already visible in the PNG. */
#authGate .auth-shell,
#authGate .auth-shell-v4011{
  position:absolute!important;
  left:50%!important;
  top:65.2%!important;
  transform:translate(-50%,-50%)!important;
  width:clamp(650px,48.2vw,930px)!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

#authGate .auth-card,
#authGate .auth-card-v4011{
  width:100%!important;
  min-height:clamp(455px,53vh,570px)!important;
  padding:34px clamp(56px,6vw,105px)!important;
  display:grid!important;
  align-content:center!important;
  border-radius:19px!important;
  border:1px solid transparent!important;
  color:#f7f7f5!important;
  background:
    linear-gradient(rgba(2,7,11,.965),rgba(2,7,11,.965)) padding-box,
    linear-gradient(105deg,#10b9f1 0%,#10b9f1 18%,#ef146b 51%,#ffd517 100%) border-box!important;
  box-shadow:0 20px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#authGate .auth-card-v4011::before{display:none!important;content:none!important}
#authGate .auth-card-v4011>div,
#authGate .auth-card-v4011>#authStatus{
  width:100%!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Match the supplied login composition more closely while retaining real controls. */
#authGate #authSignInView .hero-kicker{
  display:block!important;
  text-align:center!important;
  color:#19c7f5!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.22em!important;
  margin:0 0 2px!important;
}
#authGate #authSignInView h1{
  margin:0 0 4px!important;
  text-align:center!important;
  color:#fff!important;
  font-size:clamp(34px,3vw,58px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
}
#authGate #authSignInView>p{
  margin:0 0 18px!important;
  text-align:center!important;
  color:#aaa!important;
  font-size:13px!important;
}
#authGate .auth-card-v4011 .field label,
#authGate .auth-card-v4011 .auth-label-row label{
  color:#f4f4f4!important;
  text-transform:uppercase!important;
  font-size:10px!important;
  letter-spacing:.035em!important;
}
#authGate .auth-card-v4011 .input{
  min-height:44px!important;
  background:#03070a!important;
  border:1px solid #393939!important;
  border-radius:5px!important;
}
#authGate .auth-primary-cta,
#authGate .auth-card-v4011 .btn.primary{
  min-height:47px!important;
  margin-top:14px!important;
  border-radius:5px!important;
  font-size:15px!important;
}
#authGate .auth-secondary-cta{min-height:43px!important;border-radius:5px!important}
#authGate .auth-price-note{color:#9aa0a2!important}

/* Keep signup/reset forms readable when they replace the sign-in view. */
#authGate #authSignUpView:not(.hidden),
#authGate #authResetView:not(.hidden),
#authGate #authVerifyView:not(.hidden){
  max-height:min(76vh,680px)!important;
  overflow:auto!important;
  padding-right:4px!important;
}

@media(max-width:1100px) and (min-width:761px){
  #authGate .auth-shell,
  #authGate .auth-shell-v4011{
    width:min(76vw,780px)!important;
    top:65%!important;
  }
  #authGate .auth-card,
  #authGate .auth-card-v4011{
    min-height:430px!important;
    padding:28px 54px!important;
  }
}

/* On phones, keep the same supplied artwork but prioritize the live form. */
@media(max-width:760px){
  #authGate.auth-gate{
    min-height:100dvh!important;
    height:auto!important;
    padding:18px 12px!important;
    background-position:center top!important;
    background-size:auto 100dvh!important;
  }
  #authGate .auth-shell,
  #authGate .auth-shell-v4011{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:min(100%,520px)!important;
    margin:28vh auto 18px!important;
  }
  #authGate .auth-card,
  #authGate .auth-card-v4011{
    min-height:0!important;
    padding:25px 18px 22px!important;
    background:rgba(2,7,11,.965)!important;
    border:1px solid rgba(19,185,235,.55)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.72)!important;
  }
  #authGate #authSignInView h1{font-size:34px!important}
}