/* ShotLab V12 — restore explicit demo previews on the authentication landing page. */
.auth-demo-enter{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  gap:10px!important;
  margin-top:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  filter:none!important;
}
.auth-demo-enter .btn-v{
  min-width:0!important;
  min-height:48px!important;
  height:auto!important;
  padding:0 14px!important;
  border:1px solid rgba(127,158,30,.48)!important;
  border-radius:13px!important;
  background:rgba(127,158,30,.10)!important;
  color:#dfff7a!important;
  -webkit-text-fill-color:#dfff7a!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
}
.auth-demo-enter .btn-v:active{transform:scale(.985)!important}
.auth-demo-enter .btn-v:focus-visible{
  outline:3px solid rgba(185,223,53,.34)!important;
  outline-offset:3px!important;
}
.auth-demo-enter::before{
  content:"Preview the experience";
  grid-column:1/-1;
  margin:1px 0 0;
  color:rgba(255,255,255,.62);
  font:650 11px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  letter-spacing:.02em;
  text-align:center;
}

/* The premium auth lockup uses the shared raster SL mark. Constrain the actual
   image element so the mark remains inside its 56px brand tile. */
html body:has(.auth-card-enter) div:has(> .auth-ball-enter) > div:first-child img{
  display:block!important;
  width:34px!important;
  height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  border-radius:8px!important;
  object-fit:contain!important;
}

/* Use the native product type system for segmented authentication choices. */
html body:has(.auth-card-enter) .auth-card-enter > div:not(.auth-demo-enter):has(> button) > button{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
}

@media(max-width:390px){
  .auth-demo-enter{grid-template-columns:1fr!important}
  .auth-demo-enter::before{grid-column:1!important}
  html body:has(.auth-card-enter) div:has(> .auth-ball-enter) > div:first-child img{
    width:30px!important;
    height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
  }
}