body:has(.auth-shell){background:#0648da;color:#fff}
body:has(.auth-shell) .mono-brand-bar{background:#0757df;border-color:#ffffff25}
body:has(.auth-shell) .mono-brand-refresh{background:#fff}
body:has(.auth-shell) .mono-brand-status{color:#16336b}
.auth-shell{background:radial-gradient(ellipse at 5% 0%,#3cd3f4 0%,transparent 55%),linear-gradient(135deg,#189af5 0%,#0868f2 48%,#0621bc 100%);min-height:calc(100dvh - var(--mono-brand-height,52px));color:white;padding:clamp(24px,4vw,64px);gap:clamp(20px,5vw,80px);align-items:center}
.auth-story{background:transparent;padding:20px;align-items:flex-start}
.auth-story .logo-wrap{margin-bottom:22px}
.auth-story .brand{width:210px;height:210px;object-fit:contain;border-radius:36px;box-shadow:0 16px 48px #001e792b}
.auth-story h1{letter-spacing:-.035em;font-weight:650}
.auth-story h1 em{color:#d8f5ff}
.auth-story>.eyebrow,.auth-story>p,.auth-features span,.auth-features .icon,.story-footer{color:#e3f4ff}
.auth-form{width:min(430px,100%);padding:36px;background:#06298c45;border:1px solid #ffffff45;border-radius:28px;box-shadow:0 20px 70px #00146a25;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff}
.auth-form .muted,.auth-form .eyebrow,.auth-form .fine{color:#e0efff}
.auth-form label,.auth-form .field>span{color:#fff}
.auth-form input{background:#ffffff14;color:#fff;border:1px solid #ffffff70;box-shadow:none;min-height:52px}
.auth-form input:focus{border-color:#fff;outline:3px solid #7bddff80;outline-offset:2px;background:#ffffff20}
.auth-form input::placeholder{color:#d2e7ff}
.auth-form .password-toggle{color:#fff}
.auth-form button[type=submit]{background:#fff;color:#0750d2;min-height:52px;border:1px solid #fff;box-shadow:0 6px 20px #001b6b20;font-weight:700;margin-top:12px}
.auth-form button[type=submit]:hover{background:#e8f7ff}
.auth-form button[type=submit]:disabled{opacity:.65}
.auth-form .form-error:not(:empty){color:#fff;background:#912344;padding:10px 12px;border-radius:10px}
.auth-form .segmented[hidden]{display:none}
.auth-form #authForm{margin-top:28px}
.auth-form .fine{line-height:1.8}
@media(max-width:760px){
 .auth-shell{padding:22px 20px 36px;display:block}
 .auth-story{padding:0;text-align:center;align-items:center;display:flex}
 .auth-story .logo-wrap{margin-bottom:14px}
 .auth-story .brand{width:150px;height:150px;border-radius:28px}
 .auth-story>.eyebrow{display:none}
 .auth-story h1{font-size:26px;line-height:1.3;margin:0 0 18px}
 .auth-form{margin:0 auto;padding:26px 24px;border-radius:24px}
 .auth-form>h2{font-size:24px}
}
.auth-shell .auth-form #authForm input{background:#ffffff14;color:#fff;border:1px solid #ffffff70;box-shadow:none}
.auth-shell .auth-form #authForm input:focus{background:#ffffff20;border-color:#fff}
.auth-shell .auth-form #authForm .password-toggle,.auth-shell .auth-form #authForm button[data-password-toggle]{color:#fff}
.auth-shell .auth-form #authForm input:-webkit-autofill{-webkit-text-fill-color:#153975}

/* Sign-in has its own quiet wordmark; other screens keep the refresh bar. */
body:has(.auth-shell){padding-top:0}
body:has(.auth-shell) .mono-brand-bar{display:none}
.auth-shell{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:100dvh;padding:clamp(48px,9vh,100px) 24px 40px}
.auth-story{padding:0;align-items:center;width:100%;margin:0 0 42px}
.auth-story .logo-wrap{margin:0;padding:0}
.auth-story .brand{display:block;width:clamp(190px,26vw,260px);height:auto;aspect-ratio:940/214;object-fit:contain;border-radius:0;box-shadow:none}
.auth-story>h1,.auth-story>.eyebrow,.auth-story>p,.auth-story .auth-features,.auth-story .story-footer{display:none}
.auth-form{margin:0 auto;width:min(430px,100%)}
@media(max-width:760px){.auth-shell{padding:calc(62px + env(safe-area-inset-top,0px)) 22px 32px;justify-content:flex-start}.auth-story{margin-bottom:42px}.auth-story .brand{width:210px;height:auto}.auth-form{padding:28px 24px}}

.auth-story .brand{aspect-ratio:940/310}
.auth-form>h2{font-size:24px;line-height:1.4;text-align:center}

/* A single canvas covers the viewport and iOS safe areas, with no header spacer. */
html.mono-signin{background:#168ff0;min-height:100%}
html.mono-signin body{background:transparent;padding-top:0;min-height:100dvh;isolation:isolate}
html.mono-signin body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 5% 0%,#3cd3f4 0%,transparent 55%),linear-gradient(135deg,#189af5 0%,#0868f2 48%,#0621bc 100%)}
html.mono-signin .auth-shell{background:transparent}
html.mono-signin .mono-brand-bar{display:none}
.auth-story .brand{aspect-ratio:940/200;width:240px;max-width:100%;height:auto}
.auth-story .logo-wrap{text-align:center;max-width:100%}
.auth-story .mono-tagline{margin:9px 0 0;color:#fff;font-family:Arial,"Helvetica Neue",sans-serif;font-size:15px;font-weight:400;line-height:1.4;letter-spacing:1px;white-space:nowrap}