/* Center short auth cards; tall forms remain reachable through normal scrolling. */
#authStage{display:flex;flex-direction:column;min-height:100dvh;box-sizing:border-box;padding:24px 20px;color:#f8fbff;background:radial-gradient(circle at 16% 18%,#2d87ff25,transparent 40%),linear-gradient(135deg,#051326,#092849 54%,#06172d)}
#authStage .auth-motion-frame{position:relative;box-sizing:border-box;width:min(480px,100%);flex-shrink:0;margin:auto;padding:32px 40px;border:1px solid #92c5fd4d;border-radius:28px;background:linear-gradient(180deg,rgba(15,42,76,.84),rgba(5,18,36,.89));box-shadow:0 28px 80px #0005,inset 0 1px 0 #ffffff20;overflow:hidden;transition:height 360ms cubic-bezier(.22,.75,.2,1)}
#authStage .auth-motion-content{display:flow-root}
#authStage .patrolink-login-screen-v24e1{position:static!important;inset:auto!important;display:block;min-height:0!important;height:auto!important;width:100%;padding:0!important;background:none!important;overflow:visible!important}
#authStage .patrolink-login-screen-v24e1.hidden{display:none!important}
#authStage .patrolink-login-screen-v24e1:before,#authStage .patrolink-login-screen-v24e1:after{display:none!important}
#authStage .patrolink-login-shell-v24e1,#authStage .patrolink-login-panel-v24e1{display:block!important;min-height:0!important;width:100%!important;padding:0!important;margin:0!important}
#authStage .patrolink-login-card-v24e1{box-sizing:border-box;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
#authStage .auth-trust-seal{position:absolute;bottom:32px;left:0;right:0;margin:0!important}
#loginButton[aria-busy="true"]{display:flex;align-items:center;justify-content:center;gap:10px;cursor:wait}
#loginButton[aria-busy="true"]:before{content:'';width:17px;height:17px;box-sizing:border-box;border:2px solid #ffffff70;border-top-color:#fff;border-radius:50%;animation:pl-auth-spin .75s linear infinite}
@keyframes pl-auth-spin{to{transform:rotate(360deg)}}
@media(min-width:821px){#authStage{background-image:linear-gradient(90deg,#04132650,#04132618),url('../assets/brand/auth-patrol-boats.webp');background-size:cover;background-position:center;background-attachment:fixed}}
@media(max-width:520px){#authStage{padding:24px 12px}#authStage .auth-motion-frame{padding:22px 28px;border-radius:24px}#authStage .auth-trust-seal{bottom:22px}}
@media(max-width:360px){#authStage .auth-motion-frame{padding:20px 20px}#authStage .auth-trust-seal{bottom:20px}}
@media(prefers-reduced-motion:reduce){#authStage .auth-motion-frame{transition:none}#loginButton[aria-busy="true"]:before{animation:none}}

#authStage.hidden{display:none!important}

@media(max-width:820px){#authStage{background-image:linear-gradient(#04132633,#04132622),url('../assets/brand/auth-patrol-mobile-v3.webp');background-size:cover;background-position:center;background-attachment:fixed}}

/* Compact spacing preserves the existing 52px inputs and 54px primary action. */
#authStage .patrolink-login-logo-wrap-v24e1{margin-bottom:18px}
#authStage #loginScreen .patrolink-login-card-v24e1>h2{margin-bottom:16px!important}
#authStage #mfaScreen .patrolink-login-card-v24e1>h2{margin-bottom:18px!important}
#authStage #loginForm .auth-password-heading{margin-top:12px;margin-bottom:6px}
#authStage #loginButton{margin-top:18px!important}
#authStage .auth-trust-seal .patrolink-trust-seal img{width:100px;height:auto}
#authStage #mfaProgress{min-height:20px;margin-bottom:6px}
#authStage #mfaForm .security-mfa-actions-v14{margin-top:12px}
#authStage #togglePassword{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;background:transparent;box-shadow:none;border-radius:9px}
#togglePassword img{position:absolute;left:10px;top:10px;width:24px;height:24px;filter:invert(1);pointer-events:none;transition:opacity 160ms ease,transform 160ms ease}
#togglePassword .password-eye-off{opacity:.85;transform:scale(1)}
#togglePassword .password-eye-on{opacity:0;transform:scale(.8)}
#togglePassword[aria-pressed="true"] .password-eye-off{opacity:0;transform:scale(.8)}
#togglePassword[aria-pressed="true"] .password-eye-on{opacity:.85;transform:scale(1)}
#authStage #togglePassword:focus-visible{outline:2px solid #a6d2ff;outline-offset:-2px}
@media(max-width:360px){#authStage .auth-trust-seal .patrolink-trust-seal img{width:90px}}
@media(prefers-reduced-motion:reduce){#togglePassword img{transition:none}}

/* Paint above browser autofill backgrounds without disabling password managers. */
#authStage #nip,#authStage #password{color-scheme:dark;background-color:#0c223c!important;color:#f8fbff!important;caret-color:#f8fbff}
#authStage #loginForm input:is(:-webkit-autofill,:autofill){-webkit-text-fill-color:#f8fbff!important;caret-color:#f8fbff!important;background-color:#0c223c!important;-webkit-box-shadow:0 0 0 1000px #0c223c inset!important;box-shadow:0 0 0 1000px #0c223c inset!important}
#authStage #loginForm input:is(:-webkit-autofill,:autofill):focus{-webkit-box-shadow:0 0 0 1000px #0c223c inset,0 0 0 3px #519fdb40!important;box-shadow:0 0 0 1000px #0c223c inset,0 0 0 3px #519fdb40!important}