/* Login page styles */
body.login-page {
  height: 100dvh;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)),
    var(--level-spectrum-soft),
    var(--background-image) center center / cover no-repeat;
}
.overlay{

height:100%;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

position:relative;

padding:20px;

}


.top-brand{

text-align:center;

margin-bottom:35px;

}


.level-logo{

width:min(240px,70vw);

height:auto;

margin-bottom:18px;

filter:
drop-shadow(
0 8px 25px rgba(0,0,0,.35)
);

}


.subtitle{

font-size:
clamp(
16px,
3vw,
24px
);

font-weight:400;

letter-spacing:.5px;

color:
rgba(255,255,255,.9);

margin-top:5px;

}


.login-card{

width:min(400px,100%);

padding:38px;

border-radius:28px;

background:
rgba(30,30,30,.35);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:
blur(20px);

border:
1px solid rgba(255,255,255,.18);

box-shadow:
0 20px 60px rgba(0,0,0,.45);

text-align:center;

}


.icon-circle{

width:74px;
height:74px;

margin:auto auto 28px;

border-radius:50%;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.14);

backdrop-filter:blur(12px);

display:flex;
align-items:center;
justify-content:center;

box-shadow:
inset 0 1px 4px rgba(255,255,255,.05);

}


.lock-icon{

width:34px;
height:34px;

color:#fff;

filter:
drop-shadow(
0 0 10px rgba(247,201,72,.25)
);

}


.login-card h1{

font-size:
clamp(
24px,
5vw,
28px
);

font-weight:650;

letter-spacing:-0.8px;

margin-bottom:14px;

}


.login-card p{

font-size:15px;

line-height:1.7;

color:
rgba(255,255,255,.72);

max-width:280px;

margin:
0 auto 30px;

}


.line{

height:1px;

background:
rgba(255,255,255,.1);

opacity:.55;

margin-bottom:30px;

}


.ms-btn{

width:100%;

height:56px;

display:flex;
align-items:center;
justify-content:center;
gap:12px;

padding:0 24px;

border:none;

border-radius:13px;

background:#fff;

font-size:16px;
font-weight:550;

cursor:pointer;

transition:
transform .2s ease,
background .2s ease;

box-shadow:
0 6px 25px rgba(0,0,0,.18);

}


.ms-btn img{

width:22px;
height:22px;

}


.ms-btn:hover{

transform:
translateY(-2px);

background:
rgb(245,245,245);

}


.small-text{

margin-top:28px;

font-size:13px;

opacity:.58;

line-height:1.7;

}


.copyright{

position:absolute;

bottom:25px;

font-size:12px;

opacity:.5;

}


/* tablet */

@media (max-width:768px){

.login-card{

width:90%;

padding:30px 24px;

}

.level-logo{

width:200px;

}

}


/* mobiel */

@media (max-width:480px){

.top-brand{

margin-bottom:20px;

}

.level-logo{

width:160px;

}

.subtitle{

font-size:15px;

}

.login-card{

padding:24px 18px;

border-radius:22px;

}

.icon-circle{

width:60px;
height:60px;

margin-bottom:20px;

}

.lock-icon{

width:28px;
height:28px;

}

.login-card h1{

font-size:24px;

}

.login-card p{

font-size:14px;

}

.ms-btn{

height:52px;

font-size:15px;

}

}