/* =========================
LOGIN PAGE
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:linear-gradient(135deg,#0F172A,#1E293B);
min-height:100vh;
overflow:hidden;
}

.login-page{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
padding:20px;
}

.login-card{
position:relative;
width:100%;
max-width:460px;
padding:40px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
border-radius:25px;
box-shadow:0 25px 60px rgba(0,0,0,.35);
animation:fadeUp .8s ease;
z-index:2;
}

.login-card h2{
color:#fff;
font-weight:800;
text-align:center;
margin-bottom:10px;
}

.login-card p{
color:#CBD5E1;
text-align:center;
margin-bottom:30px;
}

.form-control{
height:56px;
background:#334155;
border:1px solid #475569;
color:#fff;
border-radius:14px;
padding:0 18px;
}

.form-control::placeholder{
color:#CBD5E1;
}

.form-control:focus{
background:#334155;
color:#fff;
border-color:#8B5CF6;
box-shadow:0 0 18px rgba(139,92,246,.45);
}

.password-box{
position:relative;
}

.toggle-password{
position:absolute;
right:18px;
top:16px;
cursor:pointer;
font-size:20px;
user-select:none;
}

.login-btn{
height:56px;
border:none;
border-radius:14px;
font-size:18px;
font-weight:700;
color:#fff;
background:linear-gradient(135deg,#8B5CF6,#EC4899);
transition:.35s;
}

.login-btn:hover{
transform:translateY(-4px);
box-shadow:0 0 30px rgba(236,72,153,.45);
}

.forgot-link,
.register-link{
color:#FBBF24;
font-weight:600;
text-decoration:none;
}

.forgot-link:hover,
.register-link:hover{
color:#fff;
}

.bg-circle{
position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.35;
animation:float 8s infinite ease-in-out;
}

.bg-circle.one{
width:260px;
height:260px;
background:#8B5CF6;
top:8%;
left:8%;
}

.bg-circle.two{
width:220px;
height:220px;
background:#EC4899;
bottom:8%;
right:10%;
animation-delay:2s;
}

.bg-circle.three{
width:180px;
height:180px;
background:#06B6D4;
top:50%;
right:20%;
animation-delay:4s;
}

@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-30px);
}

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@media(max-width:768px){

.login-card{
padding:30px 22px;
}

}