/* apSpace v35 — desktop banner fit and desktop lock overlay
   Phone layout intentionally remains unchanged. */

/* Desktop dashboard: retain the full 3:2 artwork inside the visible browser area.
   The banner is capped by both viewport height and source resolution, so it is
   never cropped or enlarged beyond a sensible desktop size. */
@media (min-width:900px){
  .apspace-animated-banner-v34{
    width:min(100%,1280px,calc(150vh - 285px));
    width:min(100%,1280px,calc(150svh - 285px));
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:3/2!important;
    margin-inline:auto;
    background:#05020b;
  }

  .apspace-banner-video-v34{
    position:relative!important;
    inset:auto!important;
    display:block;
    width:100%!important;
    height:100%!important;
    max-width:100%;
    max-height:100%;
    aspect-ratio:3/2;
    object-fit:contain!important;
    object-position:center center!important;
    background:#05020b;
  }
}

/* Desktop lock screen: enlarge the complete banner and place the unlock card
   over the right side of it. The phone and tablet stack from v34 is untouched. */
@media (min-width:1100px){
  .login-shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:1fr!important;
    place-items:center!important;
    gap:0!important;
    min-height:100vh;
    min-height:100svh;
    padding:clamp(24px,4vh,48px) clamp(24px,4vw,72px)!important;
  }

  .login-banner-video-v34{
    grid-area:1/1;
    position:relative!important;
    inset:auto!important;
    z-index:1;
    width:min(94vw,1180px,calc(150vh - 96px))!important;
    width:min(94vw,1180px,calc(150svh - 96px))!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:3/2!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:28px;
    box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 52px rgba(255,48,190,.17);
  }

  .login-panel{
    grid-area:1/1;
    position:relative;
    z-index:3;
    justify-self:end;
    align-self:center;
    width:min(410px,36vw)!important;
    margin:0 clamp(24px,3.4vw,62px) 0 0!important;
    background:rgba(8,5,20,.83);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    backdrop-filter:blur(20px) saturate(140%);
    box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.05) inset;
  }

  .login-backdrop{
    z-index:0;
    background:
      radial-gradient(circle at 50% 45%,rgba(103,40,180,.14),transparent 44%),
      linear-gradient(180deg,rgba(5,2,11,.08),rgba(5,2,11,.48));
  }
}

/* Keep the overlay comfortable on shorter desktop displays. */
@media (min-width:1100px) and (max-height:760px){
  .login-shell{padding-block:18px!important}
  .login-panel{padding:22px!important}
  .login-panel h1{font-size:27px;margin-bottom:14px}
  .login-panel .security-copy{margin-top:12px;padding-top:11px}
}