/* v0.28: responsive authentication, based on available width and height. */
html:has(body.auth-mode){min-height:100%;overflow-x:clip}
body.auth-mode{display:block!important;min-height:100svh!important;padding:0!important}
.auth-mode main{width:100%!important;max-width:none!important;min-height:100svh;padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;display:flex;flex-direction:column;justify-content:center}
.auth-mode #root{width:100%;max-width:520px;margin:auto}
.auth-mode .auth-shell{display:flex!important;flex-direction:column;gap:0!important;min-width:0}
.auth-mode .reference-hero{flex:none;width:100%!important;max-width:440px;height:clamp(72px,calc(100svh - 485px),300px);aspect-ratio:auto!important;align-self:center;margin:0!important}
.auth-mode .hero-terminal{width:55%;height:76%;max-width:240px}
.auth-mode .hero-screen{height:80%;min-height:48px;border-width:6px;border-radius:12px}
.auth-mode .hero-screen b{font-size:clamp(17px,4vw,25px)}
.auth-mode .hero-screen span{font-size:12px}
.auth-mode .hero-screen i{font-size:22px}
.auth-mode .hero-stand{height:20%}
.auth-mode .hero-scanner{font-size:32px}
.auth-mode .hero-platform{height:20px;bottom:8%}
.auth-mode .auth-form{width:100%;max-width:none;margin:0;padding:8px 0!important;border:0;background:transparent;border-radius:0;min-width:0}
.auth-mode .auth-form h2{font-size:clamp(24px,5.5vw,34px)!important;line-height:1.3;letter-spacing:0;margin:0 0 6px!important;overflow-wrap:anywhere}
.auth-mode .auth-sub{font-size:14px!important;line-height:1.5;margin:0 0 10px!important}
.auth-mode .auth-form label{font-size:14px!important;line-height:1.4;margin:10px 0 5px!important}
.auth-mode input{min-width:0;min-height:46px!important;height:46px;font-size:16px!important;padding:10px 14px!important;border-radius:11px!important}
.auth-mode .email-field input,.auth-mode .password-field input{padding-left:42px!important}
.auth-mode .password-field input{padding-right:74px!important}
.auth-mode .email-field>span,.auth-mode .lock-icon{left:14px;font-size:21px}
.auth-mode .password-field button{top:5px;bottom:5px;right:6px;min-height:34px;margin:0;padding:3px 8px;font-size:12px}
.auth-mode .forgot-row{margin:8px 0 0}
.auth-mode .forgot-row a{font-size:13px!important}
.auth-mode .auth-primary{min-height:48px!important;font-size:clamp(16px,4.1vw,21px)!important;line-height:1.4;margin:14px 0 10px!important;padding:10px 46px 10px 12px!important;gap:8px;border-radius:12px!important}
.auth-mode .auth-primary .cta-arrow{float:none;right:9px;width:30px;height:30px;font-size:22px}
.auth-mode .auth-divider{height:10px;margin:6px 0 10px!important}
.auth-mode .auth-secondary{min-height:44px;font-size:16px!important;padding:8px 12px;line-height:1.4;border-radius:11px}
.auth-mode .auth-secure{font-size:11px;line-height:1.4;margin-top:12px!important}
.auth-mode .password-note{font-size:11px;line-height:1.5;margin-top:7px}
.auth-mode #status:not(:empty){flex:none;margin:0 auto 8px!important;width:100%;max-width:520px;font-size:13px;line-height:1.4;padding:8px 12px;overflow-wrap:anywhere}
.auth-mode[data-auth-view="reset"] .reference-hero,.auth-mode[data-auth-view="setup"] .reference-hero{height:clamp(0px,calc(100svh - 575px),230px)}
.auth-mode .otp-panel{width:100%;max-width:490px!important;margin:0 auto!important;padding:16px 0!important}
.auth-mode .otp-panel h2{font-size:26px;margin:8px 0}
.auth-mode .otp-badge{height:50px;width:50px;font-size:26px;margin-bottom:12px}
.auth-mode .otp-panel p{line-height:1.5;margin:10px 0}
.auth-mode .otp-cells input{height:48px!important;font-size:23px!important}
.auth-mode .auth-resend{font-size:14px!important;min-height:40px}
.auth-mode .register-fields{min-width:0}
@media(min-width:900px){
 .auth-mode main{padding:24px clamp(24px,4vw,72px)!important}
 .auth-mode #root{max-width:1440px}
 .auth-mode .auth-shell{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px)!important;align-items:center}
 .auth-mode .reference-hero,.auth-mode[data-auth-view="reset"] .reference-hero,.auth-mode[data-auth-view="setup"] .reference-hero{height:clamp(200px,60svh,680px);max-width:none;width:100%!important}
 .auth-mode .hero-terminal{max-width:400px;height:65%}
 .auth-mode .hero-screen{border-width:9px}
 .auth-mode .hero-screen b{font-size:clamp(22px,2.5vw,40px)}
 .auth-mode .hero-screen span{font-size:20px}
 .auth-mode .hero-screen i{font-size:40px}
 .auth-mode .hero-platform{height:42px;bottom:15%}
 .auth-mode .hero-scanner{font-size:56px}
 .auth-mode .auth-form{padding:clamp(18px,3svh,42px)!important;background:#081b2ac9;border:1px solid #193e50;border-radius:24px}
 .auth-mode .auth-form h2{font-size:clamp(27px,2.5vw,42px)!important}
 .auth-mode .auth-sub{font-size:16px!important}
 .auth-mode input{height:clamp(46px,6svh,62px);min-height:46px!important}
 .auth-mode .auth-form label{margin-top:clamp(10px,1.7svh,20px)!important;font-size:16px!important}
 .auth-mode .auth-primary{min-height:clamp(48px,6.5svh,64px)!important}
 .auth-mode .auth-secondary{min-height:48px}
}
@media(max-width:899px) and (max-height:600px){
 .auth-mode main{padding-top:8px!important;padding-bottom:8px!important}
 .auth-mode .auth-sub{font-size:13px!important;margin-bottom:6px!important}
 .auth-mode .auth-form label{margin-top:7px!important}
 .auth-mode .auth-secure{margin-top:8px!important}
 .auth-mode .reference-hero{height:clamp(0px,calc(100svh - 440px),120px)}
 .auth-mode[data-auth-view="reset"] .reference-hero,.auth-mode[data-auth-view="setup"] .reference-hero{display:none}
}
@media(min-width:600px) and (max-height:500px){
 .auth-mode main{padding:8px 20px!important}
 .auth-mode #root{max-width:1000px}
 .auth-mode .auth-shell{display:block!important}
 .auth-mode .reference-hero{display:none!important}
 .auth-mode .auth-form{padding:8px!important}
 .auth-mode .auth-form h2{font-size:26px!important}
 .auth-mode .auth-sub{font-size:13px!important;margin-bottom:6px!important}
 .auth-mode .auth-form #login{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
 .auth-mode[data-auth-view="reset"] #login,.auth-mode[data-auth-view="setup"] #login{grid-template-columns:repeat(3,minmax(0,1fr))}
 .auth-mode #login>label{grid-row:1;margin:5px 0!important}
 .auth-mode #login>.email-field,.auth-mode #login>.password-field{grid-row:2;min-width:0}
 .auth-mode #login>.forgot-row{grid-column:1/-1;grid-row:3}
 .auth-mode #login>.auth-primary{grid-column:1/-1;grid-row:4;margin:10px 0 5px!important}
 .auth-mode .auth-divider{margin:4px 0 6px!important}
 .auth-mode .auth-secondary{min-height:40px}
 .auth-mode .auth-secure{margin-top:7px!important}
 /* The longer registration form keeps its normal reading order. */
 .auth-mode[data-auth-view="register"] .auth-form #login{display:block}
}
/* A reduced viewport (keyboard, zoom, accessibility text) may scroll naturally. */
.auth-mode .brand-hero{display:flex;align-items:center;justify-content:center;background:transparent}
.auth-artwork{position:relative;width:100%;height:100%;overflow:hidden}.auth-artwork svg{display:block;width:100%;height:100%}
.auth-mode .auth-artwork img{width:100%;height:auto;top:-16.875%;left:0;transform:none;max-width:none}
.auth-mode .brand-hero:after{height:7%}
.auth-mode input:-webkit-autofill,.auth-mode input:-webkit-autofill:hover,.auth-mode input:-webkit-autofill:focus{
 -webkit-text-fill-color:#eaf4ff!important;caret-color:#eaf4ff;
 -webkit-box-shadow:0 0 0 1000px #10283a inset!important;box-shadow:0 0 0 1000px #10283a inset!important;
}
.auth-mode input{caret-color:#eaf4ff;color:#eaf4ff!important}
.auth-mode input::placeholder{color:#a6bdd2!important;opacity:1}