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

body{

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

background:var(--bg);
color:var(--text);

transition:.3s;

}

:root{

--bg:#f1f5f9;
--box:#ffffff;
--text:#111;
--primary:#6366f1;
--border:#d1d5db;

}

body.dark{

--bg:#0f172a;
--box:#1e293b;
--text:#f1f5f9;
--border:#334155;

}

.themeToggle{

position:fixed;
top:20px;
right:20px;

font-size:22px;
cursor:pointer;

}

.loginWrapper{

width:100%;
padding:20px;

display:flex;
justify-content:center;

}

.loginBox{

width:100%;
max-width:380px;

background:var(--box);

padding:40px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

animation:fade .6s ease;

}

@keyframes fade{

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

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

}

h2{

text-align:center;
margin-bottom:30px;

}

.inputGroup{

position:relative;
margin-bottom:20px;

}

.inputGroup input{

width:100%;
padding:12px;

border:1px solid var(--border);

border-radius:6px;

background:transparent;
color:var(--text);

}

.inputGroup label{

position:absolute;
left:12px;
top:12px;

font-size:14px;

color:#888;

pointer-events:none;
transition:.3s;

}

.inputGroup input:focus + label,
.inputGroup input:valid + label{

top:-8px;
font-size:12px;
background:var(--box);
padding:0 5px;

}

.passwordField span{

position:absolute;
right:12px;
top:12px;

cursor:pointer;

}

.loginOptions{

display:flex;
justify-content:space-between;

font-size:14px;
margin-bottom:20px;

}

.rememberBox{

display:flex;
align-items:center;
gap:6px;

}

.loginBtn{

width:100%;

padding:12px;

border:none;

border-radius:6px;

background:var(--primary);
color:white;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.loginBtn:hover{

opacity:.9;

}

#errorMsg{

color:#ef4444;
font-size:14px;
margin-top:10px;
text-align:center;

}

a{

color:var(--primary);
text-decoration:none;

}

@media(max-width:480px){

.loginBox{

padding:30px 20px;

}

}