@media (min-width:851px){
  body:has(#authScreen.hidden):has(#app.hidden){
    min-height:100vh;
    overflow:hidden;
    background:var(--surface-deepest);
  }

  body.auth-open{
    overflow:hidden;
    background:var(--surface-deepest);
  }

  body.auth-open #authScreen.auth-screen{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(460px,32vw,535px);
    align-items:center;
    gap:clamp(36px,4vw,68px);
    position:fixed;
    inset:0;
    z-index:100;
    isolation:isolate;
    padding:clamp(44px,5.35vw,90px)!important;
    background:var(--surface-deepest)!important;
  }

  body.auth-open #authScreen.auth-screen::before{
    content:"";
    display:block;
    grid-column:1;
    width:100%;
    max-width:1080px;
    aspect-ratio:2196/706;
    justify-self:center;
    background:url('/assets/atlas-desktop-login-brand.webp?v=20260813-transparent') center/contain no-repeat;
    filter:drop-shadow(0 22px 60px rgba(0,0,0,.35));
  }

  body.auth-open #authScreen .auth-card{
    position:relative;
    grid-column:2;
    width:100%;
    min-width:0;
    min-height:clamp(570px,66.5vh,626px);
    box-sizing:border-box;
    margin:0;
    padding:68px 67px 48px;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(9,19,32,.94),rgba(2,13,25,.91))!important;
    border-radius:22px!important;
    color:var(--ink-on-dark)!important;
    backdrop-filter:blur(20px) saturate(118%);
    /* border and box-shadow deliberately carry no !important: an important
       declaration outranks a CSS animation, so keeping it here would leave the
       pulse below valid, parsed, and doing nothing at all. This selector is
       (1 id, 2 classes) and loads after atlas-rebuild.css, so it still wins
       without it. */
    border:1px solid rgba(208,219,230,.82);
    box-shadow:
      inset -1px 0 rgba(40,132,255,.44),
      inset 0 1px rgba(255,255,255,.12),
      0 0 0 1px rgba(0,102,255,.1),
      0 0 38px rgba(0,105,255,.25),
      0 30px 80px rgba(0,0,0,.48);
    animation:atlas-auth-edge 7s cubic-bezier(.45,0,.55,1) infinite;
  }

  body.auth-open #authScreen .auth-card::before{
    content:"";
    position:absolute;
    top:-1px;
    right:-1px;
    width:54%;
    height:2px;
    background:linear-gradient(90deg,transparent,#0b83ff 64%,#70c5ff);
    box-shadow:0 0 18px rgba(0,126,255,.95);
    animation:atlas-auth-streak 7s cubic-bezier(.45,0,.55,1) infinite;
  }

  body.auth-open #authScreen .auth-brand{display:none!important}
  body.auth-open #authScreen .auth-card h2{
    margin:0 0 10px!important;
    color:var(--ink-inverse)!important;
    font-size:44px!important;
    line-height:1.1!important;
    font-weight:780!important;
    letter-spacing:-.035em!important;
  }
  body.auth-open #authScreen .auth-copy{
    margin:0 0 47px!important;
    color:#c0c6cf!important;
    font-size:20px!important;
    line-height:1.4!important;
  }
  body.auth-open #authScreen .auth-form{
    display:grid!important;
    gap:25px!important;
  }
  body.auth-open #authScreen .auth-form label{
    display:grid!important;
    gap:10px!important;
    color:var(--ink-on-dark)!important;
    font-size:17px!important;
    font-weight:650!important;
  }
  body.auth-open #authScreen .auth-form input{
    width:100%!important;
    min-height:61px!important;
    box-sizing:border-box!important;
    padding:14px 20px!important;
    border:1px solid rgba(142,159,177,.48)!important;
    border-radius:7px!important;
    background:linear-gradient(115deg,rgba(12,24,38,.96),rgba(5,15,28,.96))!important;
    color:var(--ink-inverse)!important;
    -webkit-text-fill-color:var(--ink-inverse)!important;
    caret-color:#31a3ff!important;
    box-shadow:inset 0 1px 7px rgba(0,0,0,.3)!important;
    font-size:18px!important;
  }
  body.auth-open #authScreen .auth-form input::placeholder{
    color:#d6dbe2!important;
    -webkit-text-fill-color:#d6dbe2!important;
    opacity:1!important;
  }
  body.auth-open #authScreen .auth-form input:-webkit-autofill,
  body.auth-open #authScreen .auth-form input:-webkit-autofill:hover,
  body.auth-open #authScreen .auth-form input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #091725 inset!important;
    -webkit-text-fill-color:var(--ink-inverse)!important;
    caret-color:#31a3ff!important;
  }
  body.auth-open #authScreen .auth-form input:focus{
    outline:3px solid rgba(28,139,255,.2)!important;
    border-color:#2d9bff!important;
    box-shadow:0 0 20px rgba(0,121,255,.16)!important;
  }
  body.auth-open #authScreen .auth-submit{
    min-height:65px!important;
    margin-top:8px!important;
    border:1px solid #2495ff!important;
    border-radius:7px!important;
    background:linear-gradient(180deg,#1688ff,#0878ed)!important;
    color:var(--ink-inverse)!important;
    font-size:20px!important;
    font-weight:750!important;
    box-shadow:0 9px 24px rgba(0,112,255,.24)!important;
  }
  body.auth-open #authScreen .auth-submit:hover{
    background:linear-gradient(180deg,#2497ff,#0b73df)!important;
  }
  body.auth-open #authScreen .auth-submit:focus-visible{
    outline:3px solid rgba(94,185,255,.42)!important;
    outline-offset:3px!important;
  }
  body.auth-open #authScreen .auth-submit:disabled{
    cursor:wait!important;
    opacity:.68!important;
  }
  body.auth-open #authScreen .auth-message{
    min-height:20px!important;
    margin-top:8px!important;
    color:#ffc277!important;
    font-size:13px!important;
    line-height:1.4!important;
  }
  body.auth-open #authScreen .auth-foot{
    display:block!important;
    margin-top:10px!important;
    padding-top:0!important;
    border-top:0!important;
    color:#c0c6cf!important;
    font-size:16px!important;
    line-height:1.4!important;
    text-align:center!important;
  }

  @media (max-width:1180px){
    body.auth-open #authScreen.auth-screen{
      grid-template-columns:minmax(0,1fr) minmax(390px,460px);
      gap:clamp(24px,3vw,40px);
      padding-inline:clamp(32px,5vw,60px)!important;
    }
    body.auth-open #authScreen .auth-card{
      padding-inline:clamp(42px,5vw,57px);
    }
    body.auth-open #authScreen .auth-card h2{font-size:38px!important}
    body.auth-open #authScreen .auth-copy{font-size:17px!important}
  }

  @media (max-height:760px){
    body.auth-open #authScreen.auth-screen{padding-block:24px!important}
    body.auth-open #authScreen .auth-card{
      min-height:0;
      padding-top:36px;
      padding-bottom:28px;
    }
    body.auth-open #authScreen .auth-card h2{font-size:36px!important}
    body.auth-open #authScreen .auth-copy{margin-bottom:24px!important;font-size:16px!important}
    body.auth-open #authScreen .auth-form{gap:14px!important}
    body.auth-open #authScreen .auth-form label{gap:6px!important;font-size:14px!important}
    body.auth-open #authScreen .auth-form input{min-height:50px!important;font-size:16px!important}
    body.auth-open #authScreen .auth-submit{min-height:52px!important;margin-top:2px!important;font-size:17px!important}
    body.auth-open #authScreen .auth-foot{font-size:13px!important}
  }
}

/* The sign-in card breathes on the same 7s clock and the same easing as the
   Atlas mark, so the two read as one system rather than two timers drifting
   against each other.

   Both ends of the cycle stay lit. The floor keeps a 24px blue bloom, a
   visible hairline and both inset edges, so the card never returns to a flat
   dark rectangle -- it dims and swells rather than switching on and off.

   Every keyframe carries the same five shadow layers in the same order.
   Mismatched layer counts do not interpolate; the browser falls back to a hard
   swap, which reads as a blink. */
@keyframes atlas-auth-edge{
  0%,100%{
    border-color:rgba(178,199,219,.60);
    box-shadow:
      inset -1px 0 rgba(40,132,255,.32),
      inset 0 1px rgba(255,255,255,.09),
      0 0 0 1px rgba(0,102,255,.10),
      0 0 24px rgba(0,105,255,.22),
      0 30px 80px rgba(0,0,0,.48);
  }
  50%{
    border-color:rgba(232,243,255,.97);
    box-shadow:
      inset -1px 0 rgba(40,132,255,.66),
      inset 0 1px rgba(255,255,255,.20),
      0 0 0 1px rgba(0,116,255,.34),
      0 0 62px rgba(0,125,255,.60),
      0 30px 80px rgba(0,0,0,.48);
  }
}

/* The bright top-right edge rides the same clock, so the corner highlight
   swells with the surrounding bloom instead of sitting static against it. */
@keyframes atlas-auth-streak{
  0%,100%{opacity:.58;box-shadow:0 0 11px rgba(0,126,255,.62)}
  50%    {opacity:1;  box-shadow:0 0 28px rgba(0,126,255,1)}
}

@media (prefers-reduced-motion:reduce){
  body.auth-open #authScreen .auth-card,
  body.auth-open #authScreen .auth-card::before{
    animation:none;
  }
}