body,html{
height:100%;
font-family:'Segoe UI';
background: linear-gradient(-15deg, 
  #c7d2fe, 
  #e9d5ff, 
  #ffd8b5, 
  #ffc2d1, 
  #c9f2ff, 
  #fbcfe8, 
  #dbeafe, 
  #f3e8ff
);
background-size:400% 400%;
animation:gradientBG 12s ease infinite;
margin:0;
}

@keyframes gradientBG{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.login-wrapper{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:10px;
}

.login-card{
max-width:1100px;
width:100%;
display:flex;
border-radius:15px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);
box-shadow:0 10px 40px rgba(0,0,0,0.3);
overflow:hidden;
}

.logo-box{
width:50%;
color:#fff;
text-align:center;
padding:50px;
}

.logo-box img{
max-width:140px;
margin-bottom:10px;
}

.card-body{
width:50%;
background:#fff;
padding:40px;
}

.input-group{
margin-top:12px;
display:flex;
width:100%;
}

.input-group input{
flex:1;
border:2px solid #667eea;
border-radius:8px 0 0 8px;
padding:12px;
width:100%;
}

.input-group-text{
background:#667eea;
color:#fff;
padding:12px;
border-radius:0 8px 8px 0;
}

.login-form__btn{
background:linear-gradient(135deg,#667eea,#764ba2);
color:#fff;
padding:12px;
border:none;
width:100%;
border-radius:8px;
margin-top:15px;
}

.role-container{
display:flex;
gap:10px;
margin-bottom:20px;
}

.role-btn{
padding:8px 18px;
border-radius:8px;
cursor:pointer;
background:#f1f3ff;
border:2px solid #667eea;
}

.role-active{
background:linear-gradient(135deg,#667eea,#764ba2);
color:#fff;
}

/* FIXED: closed properly */
.field-box{
position:relative;
}

/* ✅ Tablet & Mobile */
@media (max-width: 768px){

.login-card{
flex-direction: column;
margin: 10px;
}

.logo-box{
width: 100%;
padding: 25px;
}

.card-body{
width: 100%;
padding: 25px;
}

.logo-box img{
max-width: 100px;
}

.role-container{
flex-wrap: wrap;
justify-content: center;
}

.role-btn{
flex: 1;
text-align: center;
font-size: 14px;
padding: 10px;
}

.input-group input{
padding: 10px;
font-size: 14px;
}

.login-form__btn{
padding: 12px;
font-size: 15px;
}
}

/* ✅ Small Mobile */
@media (max-width: 500px){

.logo-box{
display:block;
padding:20px;
}

.card-body{
padding:20px;
}

.login-card{
border-radius:10px;
}

.role-btn{
font-size:13px;
padding:8px;
}

}