.auth-body{
background:#fff
}
.auth-layout{
min-height:100vh;
display:grid;
grid-template-columns:minmax(450px,48%) minmax(0,52%)
}
.auth-form-side{
display:flex;
justify-content:center;
padding:46px 36px;
overflow:auto
}
.auth-form-wrap{
width:min(100%,430px);
display:flex;
flex-direction:column;
min-height:calc(100vh - 92px)
}
.auth-brand{
padding:0;
color:var(--text-primary)
}
 .auth-logo{
display:block;
width:min(100%,420px);
max-height:100px;
height:auto;
object-fit:contain;
object-position:left center
}
.auth-brand strong{
color:#0b1630
}
.auth-brand small{
color:#6a83a9
}
.auth-intro{
margin-top:auto;
padding-top:50px
}
.auth-intro .eyebrow{
margin-bottom:17px
}
.auth-intro h1{
font-size:clamp(2.8rem,4.3vw,4.2rem);
margin-bottom:13px
}
.auth-intro h1 em{
color:var(--color-primary);
font-style:normal
}
.auth-intro>p:last-child{
color:var(--text-secondary);
font-size:13px;
margin-bottom:25px
}
.auth-card{
background:#fff;
border:1px solid var(--card-border);
box-shadow:0 16px 45px rgba(11,22,48,.055);
border-radius:16px;
padding:27px;
margin-bottom:22px
}
.auth-card .field{
margin-bottom:17px
}
.auth-card .button-wide{
margin-top:8px
}
.auth-card h2{
margin:8px 0
}
.auth-card h2+p{
color:var(--text-secondary);
font-size:12px;
line-height:1.65
}
.auth-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:11px;
color:var(--text-secondary);
margin-bottom:auto
}
.auth-bottom a{
font-weight:700;
white-space:nowrap
}
.auth-fine{
color:#9aa6b5;
font-size:10px;
margin:22px 0 0
}
.auth-visual{
position:relative;
overflow:hidden;
background:radial-gradient(circle at 75% 30%,#244b91 0%,transparent 35%),linear-gradient(145deg,#11264e 0%,#09152e 65%,#070e20 100%);
color:#fff;
display:flex;
align-items:end;
padding:54px clamp(40px,6vw,105px)
}
.visual-grid{
position:absolute;
inset:0;
background-image:linear-gradient(rgba(136,175,240,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(136,175,240,.055) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(90deg,transparent,#000 35%)
}
.visual-glow{
position:absolute;
width:450px;
height:450px;
border-radius:50%;
right:7%;
top:12%;
background:#1e6bff;
filter:blur(115px);
opacity:.2
}
.visual-symbol{
position:absolute;
top:10%;
right:9%;
width:min(70%,460px);
aspect-ratio:1;
display:grid;
place-items:center
}
.visual-symbol span{
font-size:clamp(120px,18vw,280px);
line-height:1;
font-weight:800;
letter-spacing:-.16em;
padding-right:.17em;
color:#d8e7ff;
text-shadow:0 4px 2px #fff,0 22px 30px rgba(0,0,0,.4),0 0 80px rgba(85,156,255,.4);
transform:perspective(400px) rotateY(-14deg)
}
.symbol-ring{
position:absolute;
inset:4%;
border:1px solid rgba(183,214,255,.23);
border-radius:50%;
transform:rotateX(62deg) rotate(-27deg)
}
.ring-two{
inset:14%;
transform:rotateY(67deg) rotate(25deg)
}
.ring-three{
inset:26%;
border-color:rgba(183,214,255,.13)
}
.visual-copy{
position:relative;
z-index:1;
max-width:500px;
width:100%
}
.visual-tag{
display:inline-flex;
align-items:center;
gap:10px;
font-size:10px;
letter-spacing:.18em;
font-weight:800;
color:#b2d3ff
}
.visual-copy h2{
font-size:clamp(2.4rem,4.3vw,4rem);
line-height:1.1;
margin:20px 0
}
.visual-copy h2 em{
font-style:normal;
color:#85b9ff
}
.visual-copy p{
color:#aebed8;
max-width:420px;
font-size:13px;
line-height:1.7
}
.visual-rule{
display:flex;
justify-content:space-between;
border-top:1px solid rgba(255,255,255,.18);
padding-top:15px;
margin-top:46px;
color:#8b9ebb;
font-size:10px;
letter-spacing:.15em
}
.step-back{
margin:-5px 0 12px
}
.mfa-icon{
width:43px;
height:43px;
display:grid;
place-items:center;
border-radius:12px;
background:#eaf1ff;
color:var(--color-primary);
font-size:21px
}
.totp-qr{
display:block;
width:190px;
height:190px;
max-width:100%;
margin:13px auto;
background:#fff;
border:1px solid var(--card-border);
padding:8px
}
.auth-visual-activation{
background:radial-gradient(circle at 75% 30%,#22538d 0%,transparent 35%),linear-gradient(145deg,#152a53,#0a1731 70%)
}
@media(max-width:950px){
.auth-layout{
grid-template-columns:minmax(0,1fr)
}
.auth-visual{
display:none
}
.auth-form-side{
min-height:100vh
}
.auth-form-wrap{
min-height:calc(100vh - 92px)
}

}
@media(max-width:540px){
.auth-form-side{
padding:25px 19px
}
.auth-form-wrap{
min-height:calc(100vh - 50px)
}
.auth-intro{
padding-top:48px
}
.auth-intro h1{
font-size:2.8rem
}
.auth-card{
box-shadow:none;
padding:22px 18px
}
.auth-bottom{
align-items:start;
flex-wrap:wrap
}

}

@media(max-width:540px){
.auth-logo{max-height:78px}
}

/* Compact desktop heights without changing the approved large-screen layout. */
@media (min-width:951px) and (max-height:800px){
.auth-layout{height:100vh;height:100dvh;min-height:0}
.auth-form-side{min-height:0;padding:clamp(20px,3.5vh,30px) 36px;overflow-y:auto;overflow-x:hidden}
.auth-form-wrap{height:100%;min-height:0}
.auth-logo{width:min(100%,clamp(320px,52vh,410px));max-height:clamp(70px,12vh,90px)}
.auth-intro{padding-top:clamp(16px,3vh,28px)}
.auth-intro .eyebrow{margin-bottom:clamp(8px,1.5vh,13px)}
.auth-intro h1{font-size:clamp(2.45rem,5.7vh,3.35rem);margin-bottom:clamp(7px,1.2vh,11px)}
.auth-intro>p:last-child{margin-bottom:clamp(12px,2vh,19px)}
.auth-card{padding:clamp(17px,2.8vh,23px) 27px;margin-bottom:clamp(11px,1.8vh,16px)}
.auth-card .field{margin-bottom:clamp(10px,1.7vh,14px)}
.auth-card .button-wide{margin-top:4px}
.auth-fine{margin-top:clamp(10px,1.8vh,16px)}
.auth-visual{padding:clamp(26px,4vh,42px) clamp(40px,6vw,105px);overflow-y:auto;overflow-x:hidden}
.visual-symbol{top:6%;width:min(62%,380px,48vh)}
.visual-copy h2{font-size:clamp(2.3rem,5.5vh,3.4rem);margin:clamp(12px,2vh,18px) 0}
.visual-rule{margin-top:clamp(20px,3.5vh,32px)}
}
@media (min-width:951px) and (max-height:700px){
.auth-form-side{padding-top:20px;padding-bottom:20px}
.auth-logo{width:min(100%,clamp(300px,52vh,350px));max-height:75px}
.auth-intro{padding-top:14px}
.auth-intro h1{font-size:clamp(2.3rem,6vh,2.6rem)}
.auth-intro>p:last-child{margin-bottom:11px}
.auth-card{padding-top:15px;padding-bottom:15px;margin-bottom:10px}
.auth-card .field{margin-bottom:9px}
.auth-fine{margin-top:9px}
.auth-visual{padding-top:24px;padding-bottom:24px}
.visual-symbol{width:min(58%,330px,44vh);top:5%}
.visual-copy h2{font-size:clamp(2.1rem,5.4vh,2.7rem);margin:11px 0}
.visual-rule{margin-top:18px;padding-top:11px}
}