/* Collect It All v40.16 — approved classic-comic login artwork with real Supabase auth form. */

/* The approved artwork is presentation only. All account controls remain live HTML. */
.auth-gate{
  padding:22px!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(18,82,105,.30),transparent 34rem),
    radial-gradient(circle at 90% 90%,rgba(203,84,30,.14),transparent 28rem),
    #07131b!important;
}
.auth-gate::before{
  background:
    radial-gradient(circle,rgba(244,225,176,.12) 0 1px,transparent 1.35px) 0 0/12px 12px,
    linear-gradient(115deg,rgba(255,255,255,.025),transparent 34%,rgba(255,255,255,.016) 68%,transparent)!important;
  opacity:.28!important;
}
.auth-shell-v4011{
  width:min(1240px,100%)!important;
  min-height:min(820px,calc(100vh - 44px))!important;
  grid-template-columns:minmax(500px,1.12fr) minmax(430px,.88fr)!important;
  border:3px solid #07131b!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#ead9a9!important;
  box-shadow:0 34px 90px rgba(0,0,0,.58),0 0 0 1px rgba(244,225,176,.20)!important;
}

/* Approved image on the left. The original mockup's painted login controls are intentionally cropped out. */
.auth-showcase-v4011{
  min-height:100%!important;
  padding:0!important;
  display:block!important;
  background-color:#e9d59d!important;
  background-image:url('/login-classic-comic.webp')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  border-right:3px solid #07131b!important;
}
.auth-showcase-v4011::before,
.auth-showcase-v4011::after{display:none!important}
.auth-showcase-v4011>*{display:none!important}

.auth-card-v4011{
  position:relative!important;
  justify-content:center!important;
  padding:52px 48px!important;
  border:0!important;
  border-left:0!important;
  color:#111820!important;
  background:
    radial-gradient(circle at 88% 8%,rgba(183,123,43,.10),transparent 14rem),
    radial-gradient(circle,rgba(31,38,40,.055) 0 .8px,transparent 1px) 0 0/9px 9px,
    linear-gradient(180deg,#f4e5bd 0%,#ead6a4 100%)!important;
  box-shadow:inset 9px 0 26px rgba(26,25,19,.08)!important;
}
.auth-card-v4011::before{
  content:"";
  position:absolute;
  inset:22px;
  pointer-events:none;
  border:2px solid rgba(10,20,25,.10);
  border-radius:16px;
}
.auth-card-v4011>div,
.auth-card-v4011>#authStatus{position:relative;z-index:1}
.auth-card-v4011 .auth-mobile-brand{display:none!important}
.auth-card-v4011 .hero-kicker{
  display:inline-block!important;
  margin:0 0 9px!important;
  color:#a6371d!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
.auth-card-v4011 h1{
  margin:0 0 8px!important;
  color:#111820!important;
  font-family:Impact,"Arial Black",Haettenschweiler,sans-serif!important;
  font-size:clamp(34px,3vw,45px)!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
  font-style:italic!important;
}
.auth-card-v4011 p{
  margin:0 0 24px!important;
  color:#293039!important;
  font-size:14px!important;
  line-height:1.55!important;
}
.auth-card-v4011 .field label,
.auth-card-v4011 .auth-label-row label{
  color:#111820!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.auth-card-v4011 .input{
  min-height:52px!important;
  padding:12px 14px!important;
  color:#111820!important;
  background:rgba(250,238,203,.77)!important;
  border:2px solid #293138!important;
  border-radius:7px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
  font-size:15px!important;
}
.auth-card-v4011 .auth-input-wrap .input{padding-right:66px!important}
.auth-card-v4011 .input::placeholder{color:#6f6c61!important}
.auth-card-v4011 .input:focus{
  outline:none!important;
  border-color:#bd3c20!important;
  box-shadow:0 0 0 3px rgba(189,60,32,.15),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
.auth-text-button{
  color:#a12c1b!important;
  font-weight:850!important;
}
.auth-text-button:hover{color:#791c12!important}
.auth-password-toggle{
  color:#273139!important;
  font-weight:900!important;
}
.auth-primary-cta,
.auth-card-v4011 .btn.primary{
  min-height:54px!important;
  border:2px solid #0d171b!important;
  border-radius:7px!important;
  color:#fff5d6!important;
  background:linear-gradient(180deg,#d44924,#b82f19)!important;
  box-shadow:0 5px 0 #151a1c,0 10px 22px rgba(97,35,20,.18)!important;
  font-family:Impact,"Arial Black",Haettenschweiler,sans-serif!important;
  font-size:18px!important;
  font-style:italic!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  transform:translateY(0)!important;
}
.auth-primary-cta:hover,
.auth-card-v4011 .btn.primary:hover{
  filter:brightness(1.05)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 6px 0 #151a1c,0 13px 24px rgba(97,35,20,.20)!important;
}
.auth-primary-cta:active,
.auth-card-v4011 .btn.primary:active{
  transform:translateY(3px)!important;
  box-shadow:0 2px 0 #151a1c,0 7px 15px rgba(97,35,20,.18)!important;
}
.auth-primary-cta:disabled,
.auth-card-v4011 .btn.primary:disabled{opacity:.58!important;transform:none!important;box-shadow:0 3px 0 #151a1c!important}
.auth-divider{margin:22px 0 12px!important;color:#5d594e!important}
.auth-divider::before,
.auth-divider::after{background:#92866d!important}
.auth-divider span{color:#4f4a40!important;background:transparent!important;font-size:10px!important;font-weight:900!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.auth-secondary-cta{
  min-height:49px!important;
  border:2px solid #152127!important;
  border-radius:7px!important;
  color:#111820!important;
  background:#e3c969!important;
  box-shadow:0 4px 0 #152127!important;
  font-weight:900!important;
}
.auth-secondary-cta:hover{background:#efd77f!important;transform:translateY(-1px)!important}
.auth-price-note{display:none!important}
.auth-field-help,
.auth-help,
.auth-signup-consent .muted{color:#5f594c!important}
.auth-signup-consent{
  margin-top:16px!important;
  padding:13px!important;
  border:1px solid rgba(21,33,39,.28)!important;
  border-radius:8px!important;
  background:rgba(255,248,224,.34)!important;
}
.auth-signup-consent .v23-check{color:#222a2f!important}
.auth-verification-icon{color:#b7331c!important}
.auth-verification-steps>div{
  border-color:rgba(23,31,33,.20)!important;
  background:rgba(255,248,224,.30)!important;
}
.auth-verification-steps span{background:#d64a25!important;color:#fff2cf!important}
.auth-card-v4011 .status{
  margin-top:18px!important;
  border:1px solid rgba(21,31,35,.32)!important;
  border-left:5px solid #45515a!important;
  border-radius:7px!important;
  color:#263037!important;
  background:rgba(255,248,224,.46)!important;
}
.auth-card-v4011 .status.ok{border-left-color:#34734e!important;color:#215039!important;background:rgba(93,151,97,.10)!important}
.auth-card-v4011 .status.err{border-left-color:#b43420!important;color:#7e2117!important;background:rgba(190,63,35,.10)!important}
.auth-card-v4011 .status.auth-restoring::before{border-color:#a12c1b!important;border-right-color:transparent!important}

/* Keep signup / recovery usable on shorter screens. */
#authSignUpView,#authVerificationView,#authResetRequestView,#authNewPasswordView{padding:2px 0}

@media(max-width:1080px){
  .auth-shell-v4011{grid-template-columns:minmax(420px,1fr) minmax(400px,.94fr)!important}
  .auth-card-v4011{padding:46px 38px!important}
}
@media(max-width:880px){
  .auth-gate{padding:10px!important;place-items:start center!important}
  .auth-shell-v4011{
    grid-template-columns:1fr!important;
    width:min(620px,100%)!important;
    min-height:auto!important;
    margin:auto 0!important;
    border-radius:14px!important;
  }
  .auth-showcase-v4011{
    display:block!important;
    min-height:285px!important;
    border-right:0!important;
    border-bottom:3px solid #07131b!important;
    background-size:cover!important;
    background-position:center 41%!important;
  }
  .auth-card-v4011{padding:38px 28px 42px!important;box-shadow:none!important}
  .auth-card-v4011::before{inset:14px!important}
}
@media(max-width:520px){
  .auth-showcase-v4011{min-height:225px!important;background-position:center 34%!important}
  .auth-card-v4011{padding:34px 21px 38px!important}
  .auth-card-v4011 h1{font-size:32px!important}
  .auth-card-v4011 .input{min-height:50px!important}
  .auth-primary-cta,.auth-card-v4011 .btn.primary{font-size:17px!important}
}