body.auth-page{

min-height:100vh;
display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#0f172a,
#1e3a8a,
#2563eb
);

overflow:hidden;
position:relative;

}


/* Animated background */

body.auth-page::before,
body.auth-page::after{

content:"";
position:absolute;
border-radius:50%;
filter:blur(2px);
animation:float 8s infinite ease-in-out;

}


body.auth-page::before{

width:300px;
height:300px;

background:rgba(255,255,255,0.15);

top:-80px;
left:-80px;

}



body.auth-page::after{

width:350px;
height:350px;

background:rgba(59,130,246,0.35);

bottom:-100px;
right:-100px;

animation-delay:3s;

}



@keyframes float{


0%,100%{

transform:translateY(0px);

}


50%{

transform:translateY(40px);

}


}



/* Login Card */


.login-box{

width:380px;

padding:35px;

border-radius:25px;


background:

rgba(255,255,255,0.12);


backdrop-filter:blur(15px);


box-shadow:

0 20px 50px rgba(0,0,0,.4);


color:white;


animation:slide 0.7s ease;


}



@keyframes slide{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}




.login-box h2{

font-weight:700;

}



.login-box input{

background:white;

border:none;

height:45px;

border-radius:12px;

}




.btn-login{

background:

linear-gradient(
45deg,
#38bdf8,
#2563eb
);


border:none;

height:45px;

border-radius:12px;

font-weight:600;


transition:.3s;


}



.btn-login:hover{

transform:translateY(-3px);

box-shadow:

0 10px 20px rgba(0,0,0,.3);

}



.auth-icon{

font-size:50px;

animation:ring 2s infinite;

}



@keyframes ring{


0%{

transform:rotate(0deg);

}


20%{

transform:rotate(15deg);

}


40%{

transform:rotate(-15deg);

}


60%{

transform:rotate(0deg);

}


}

.notification-btn{
position:absolute;
right:30px;
top:20px;
width:45px;
height:45px;
border-radius:50%;
background:#111827;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:20px;
}

.notification-btn span{
position:absolute;
top:-5px;
right:-5px;
background:red;
color:white;
font-size:12px;
border-radius:50%;
padding:3px 7px;
}

.notification-btn:hover{
transform:scale(1.1);
}