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

body{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
color:#fff;
overflow:hidden;
position:relative;
}

/* Floating Glow */
body::before,body::after{
content:"";
position:absolute;
width:400px;
height:400px;
border-radius:50%;
filter:blur(120px);
opacity:.3;
z-index:-1;
animation:float 8s ease-in-out infinite alternate;
}
body::before{background:#6366f1;top:-100px;left:-100px;}
body::after{background:#06b6d4;bottom:-100px;right:-100px;animation-delay:3s;}

@keyframes float{
from{transform:translateY(-30px);}
to{transform:translateY(30px);}
}

.wrapper{
width:100%;
max-width:1000px;
display:flex;
border-radius:30px;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

/* Left Image Section */
.image-section{
flex:1;
background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
backdrop-filter:blur(30px);
display:flex;
align-items:center;
justify-content:center;
padding:40px;
position:relative;
}

.image-section img{
width:100%;
max-width:350px;
animation:floatImg 2s ease-in-out infinite alternate;
}

@keyframes floatImg{
from{transform:translateY(-10px);}
to{transform:translateY(10px);}
}

/* Login Card */
.login-section{
flex:1;
background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
backdrop-filter:blur(30px);
padding:50px 40px;
display:flex;
flex-direction:column;
justify-content:center;
}

.login-section h2{
font-size:24px;
margin-bottom:10px;
}

.subtitle{
font-size:13px;
opacity:.6;
margin-bottom:30px;
}

.input-group{
margin-bottom:20px;
}

.input-group input{
width:100%;
padding:14px 15px;
border-radius:15px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.1);
color:#fff;
font-size:14px;
outline:none;
transition:.3s;
}

.input-group input:focus{
border-color:#6366f1;
box-shadow:0 0 12px #6366f1;
}

button{
width:100%;
padding:14px;
border:none;
border-radius:15px;
background:linear-gradient(45deg,#6366f1,#06b6d4);
color:#fff;
font-weight:600;
font-size:14px;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(99,102,241,.5);
}

.footer{
margin-top:20px;
font-size:12px;
opacity:.5;
}

/* Responsive */
@media(max-width:768px){
.wrapper{
flex-direction:column;
margin:20px;
}
.image-section{
padding:30px;
}
.login-section{
padding:30px 20px;
}
}
.error{
    color: red;
    font-size: 12px;
}