/* Approved concept 1: dark story on the left, white working form on the right. */
html:not(.authenticated) body{background:#fff}
html:not(.authenticated) body .product-header{display:contents!important}
html:not(.authenticated) body .product-header :is(.product-brand,.test-label,.text-size-control,#identity){display:none!important}
html:not(.authenticated) body .language-control{position:absolute;top:22px;right:28px;z-index:5;gap:6px;color:#163b64;direction:ltr}
html:not(.authenticated) body .language-control>span{display:none}
html:not(.authenticated) body .language-control select{min-height:36px!important;font-size:13px!important;border:1px solid #d4dfed!important;border-radius:8px;background:#fff!important}
html:not(.authenticated) body #authScreen{display:grid!important;grid-template-columns:54% 46%!important;direction:ltr;min-height:100svh;background:#fff!important}
html[dir=rtl]:not(.authenticated) #authScreen :is(.s360-login-story,.authbox){direction:rtl}
html[dir=ltr]:not(.authenticated) #authScreen :is(.s360-login-story,.authbox){direction:ltr}
html:not(.authenticated) body #authScreen .s360-login-story{display:flex!important;position:relative;align-items:center;overflow:hidden;min-height:100svh;padding:30px 42px!important;background:radial-gradient(ellipse at 48% 65%,#0c4386 0,transparent 48%),linear-gradient(145deg,#061634,#092963 76%,#063a7a)!important;color:white}
html:not(.authenticated) #authScreen .s360-login-story:before{content:'';position:absolute;inset:auto -15% -40%;width:125%;height:70%;border:0;background:radial-gradient(ellipse,#1261c145,transparent 65%);pointer-events:none}
html:not(.authenticated) body .s360-login-story-inner{width:100%;max-width:650px;position:relative;margin:auto}
html:not(.authenticated) body .s360-login-lockup{align-items:flex-start;gap:0;margin:0 0 32px;direction:ltr}
html:not(.authenticated) body .s360-login-lockup img.s360-brand-lockup{width:205px;height:auto}
html:not(.authenticated) body .s360-login-lockup small{display:none}
html:not(.authenticated) body .s360-login-story h1{max-width:550px;margin:0 auto 14px;text-align:center;line-height:1.35;font-size:clamp(30px,3vw,44px);font-weight:800;color:#d5f5ff;letter-spacing:-.02em}
html:not(.authenticated) body .s360-login-story p{max-width:510px;margin:0 auto;text-align:center;line-height:1.7;font-size:17px;color:#e0ecff}
.auth-ecosystem{position:relative;width:min(100%,550px);height:410px;margin:12px auto 0;direction:ltr}
.auth-hero-ring{position:absolute;width:310px;height:310px;object-fit:contain;left:50%;top:48%;transform:translate(-50%,-50%);pointer-events:none}
.auth-sector{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:125px;min-height:90px;padding:12px 8px;background:linear-gradient(145deg,#1454a9e0,#102d66e0);border:1px solid #32a9e7a8;border-radius:13px;box-shadow:0 12px 25px #0007,inset 0 1px 0 #84d4ff38;color:white;text-align:center}
.auth-sector svg{width:30px;height:30px;color:#f1fbff;flex-shrink:0}
.auth-sector strong{font-size:13px;line-height:1.4;font-weight:650;color:white}
.sector-0{left:8%;top:20px;transform:rotate(-5deg)}.sector-1{right:8%;top:20px;transform:rotate(5deg)}.sector-2{left:0;top:150px;transform:rotate(-4deg)}.sector-3{right:0;top:150px;transform:rotate(4deg)}.sector-4{left:10%;top:280px;transform:rotate(5deg)}.sector-5{right:10%;top:280px;transform:rotate(-5deg)}
.auth-dashboard-art{display:flex;gap:16px;align-items:center;max-width:540px;height:120px;margin:0 auto -26px;padding:14px 20px;border:1px solid #408af66b;border-radius:14px;background:linear-gradient(145deg,#0d3373d9,#092251b3);box-shadow:0 12px 30px #00102e;transform:perspective(800px) rotateX(9deg) rotateY(-8deg);opacity:.8;direction:ltr;pointer-events:none}
.auth-art-sidebar{width:45px;display:grid;gap:10px}.auth-art-sidebar i{height:7px;border-radius:3px;background:#3c80d15e}.auth-art-chart{flex:1;min-width:0}.auth-art-chart svg{width:100%;height:65px}.auth-art-bars{display:flex;gap:10px}.auth-art-bars i{flex:1;height:11px;background:#3780c958;border-radius:4px}.auth-art-ring{width:62px;height:62px;border-radius:50%;border:12px solid #24baf0;border-inline-end-color:#1455ad}
html:not(.authenticated) body #authScreen #login.authbox{display:flex;flex-direction:column;justify-content:center;align-self:stretch;justify-self:stretch;width:100%;max-width:none;min-width:0;min-height:100svh;margin:0;padding:80px clamp(26px,4.2vw,72px) 44px!important;background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#16365e!important}
html:not(.authenticated) #authScreen #login>*{width:100%;max-width:420px;margin-inline:auto;box-sizing:border-box}
html:not(.authenticated) #authScreen #login img.auth-logo{width:230px!important;height:auto!important;margin:0 auto 14px}
html:not(.authenticated) #authScreen #login .auth-brand{order:2;margin-bottom:24px;text-align:center;font-size:16px;letter-spacing:0}
html:not(.authenticated) #authScreen #login .auth-brand small{font-size:16px;color:#46628b;line-height:1.5;font-weight:400}
html:not(.authenticated) #authScreen #login .auth-welcome{order:1;text-align:center;font-size:clamp(26px,2.4vw,36px);line-height:1.4;font-weight:800;letter-spacing:-.02em;margin:0 auto 8px;color:#0b2454}
html:not(.authenticated) #authScreen #login #auth-title{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
html:not(.authenticated) #authScreen #login #login-form{order:3;display:grid;gap:18px;margin:0 auto}
html:not(.authenticated) #authScreen #login #login-form label{display:block;position:relative;color:#16365e;font-size:14px;font-weight:600}
html:not(.authenticated) #authScreen #login #login-form label>span{display:block;margin-bottom:8px}
html:not(.authenticated) #authScreen #login #login-form input{display:block;width:100%;height:48px;min-height:48px;border:1px solid #b8cce5!important;border-radius:9px!important;background:#fff!important;padding:10px 13px;color:#173653!important;font-size:16px}
html:not(.authenticated) #authScreen #login #password-field input{padding-inline-end:52px}
html:not(.authenticated) #authScreen #login #password-visibility{position:absolute;bottom:3px;inset-inline-end:3px;width:42px!important;height:42px;min-height:42px;border:0!important;padding:0;margin:0;background:transparent!important;box-shadow:none;color:#557198!important;font-size:0!important}
#authScreen #password-visibility:before{content:'';position:absolute;width:17px;height:11px;border:2px solid #557198;border-radius:70% 30%;transform:rotate(45deg);left:11px;top:13px}
#authScreen #password-visibility:after{content:'';position:absolute;width:5px;height:5px;background:#557198;border-radius:50%;left:18px;top:18px}
html:not(.authenticated) #authScreen #login #auth-submit{height:49px;margin-top:4px;border:1px solid #0878ed!important;border-radius:9px;background:linear-gradient(100deg,#0988ef,#0755ed)!important;box-shadow:0 5px 14px #0877ed20;font-size:16px;font-weight:700}
html:not(.authenticated) #authScreen #login .auth-actions{order:5;justify-content:center;gap:12px;margin:18px auto 0}
html:not(.authenticated) #authScreen #login .auth-actions button{min-height:36px;padding:4px 10px;border:0!important;background:transparent!important;color:#0664dd!important;box-shadow:none;font-size:14px}
html:not(.authenticated) #authScreen #login #login-status{order:4;font-size:14px;line-height:1.5;margin:14px auto 0}
html:not(.authenticated) #authScreen #login>.muted{order:4;margin:24px auto 0;padding-top:20px;border-top:1px solid #e0e8f3;font-size:13px;text-align:center;line-height:1.8;color:#46628b!important}
html[data-auth-mode=recovery]:not(.authenticated) #authScreen #login .auth-welcome,html[data-auth-mode=new-password]:not(.authenticated) #authScreen #login .auth-welcome{display:none}
html[data-auth-mode=recovery]:not(.authenticated) #authScreen #login #auth-title,html[data-auth-mode=new-password]:not(.authenticated) #authScreen #login #auth-title{position:static;clip:auto;clip-path:none;width:auto;height:auto;overflow:visible;white-space:normal;font-size:30px;margin:10px auto 22px;text-align:center;order:1}
@media(max-width:1050px) and (min-width:901px){html:not(.authenticated) body #authScreen .s360-login-story{padding:30px 24px!important}.auth-sector{width:100px;min-height:84px}.auth-sector strong{font-size:12px}.auth-hero-ring{width:270px;height:270px}}
@media(max-width:900px){html:not(.authenticated) body #authScreen{display:flex!important;flex-direction:column;min-height:100svh}html:not(.authenticated) body #authScreen .s360-login-story{display:block!important;min-height:0;padding:55px 22px 20px!important}html:not(.authenticated) body .s360-login-lockup{margin:0 0 10px}.s360-login-lockup img.s360-brand-lockup{max-width:160px}html:not(.authenticated) body .s360-login-story h1{font-size:26px;line-height:1.35;max-width:450px}html:not(.authenticated) body .s360-login-story p,.auth-dashboard-art{display:none}.auth-ecosystem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;height:auto;max-width:500px;margin:16px auto 0}.auth-hero-ring{display:none}.auth-sector{position:static;transform:none;min-width:0;width:auto;min-height:74px;padding:9px 5px;gap:5px;box-shadow:none}.auth-sector svg{width:22px;height:22px}.auth-sector strong{font-size:11px}.auth-sector .s360-login-lockup{display:none}html:not(.authenticated) body #authScreen #login.authbox{min-height:0;padding:30px 24px 35px!important}html:not(.authenticated) #authScreen #login img.auth-logo{width:190px!important}html:not(.authenticated) body .language-control{top:12px;right:14px}html:not(.authenticated) body .language-control select{max-width:110px;background:#fff!important}html:not(.authenticated) body .s360-login-story-inner>.s360-login-lockup{display:none!important}}
@media(prefers-reduced-motion:reduce){.auth-sector,.auth-dashboard-art{transform:none}}
html:not(.authenticated) #authScreen #login .auth-trial-note{order:4;margin:26px auto 0;padding-top:21px;border-top:1px solid #e0e8f3;text-align:center;line-height:1.7;color:#102c5b}.auth-trial-note strong{display:block;font-size:16px}.auth-trial-note span{display:block;font-size:13px;color:#46628b}
html:not(.authenticated) #authScreen #login #password-visibility{width:44px!important;height:44px;min-height:44px;bottom:2px;inset-inline-end:2px}
