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

body{
background:linear-gradient(135deg,#eef2ff,#f8fafc);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

/* =========================
CARD
========================= */
.login-wrapper{
width:100%;
padding:20px;
display:flex;
justify-content:center;
align-items:center;
}

.login-card{
width:100%;
max-width:380px;
background:rgba(255,255,255,0.75);
backdrop-filter:blur(18px);
border-radius:20px;
padding:40px 28px;
text-align:center;
box-shadow:0 25px 60px rgba(0,0,0,0.15);
border:1px solid rgba(255,255,255,0.4);
animation:fadeIn 0.6s ease;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}

/* =========================
LOGO
========================= */
.login-logo{
width:85px;
margin-bottom:15px;
}

/* =========================
TEXT
========================= */
.login-card h2{
font-size:20px;
margin-bottom:6px;
}

.login-subtitle{
font-size:14px;
color:#666;
margin-bottom:25px;
}

/* =========================
INPUT FLOATING
========================= */
.input-group{
position:relative;
margin-bottom:22px;
}

.input-group input{
width:100%;
padding:14px 45px;
border-radius:12px;
border:1.5px solid #ddd;
background:white;
font-size:14px;
transition:0.3s;
}

.input-group input:focus{
border-color:#007BFF;
box-shadow:0 0 0 3px rgba(0,123,255,0.15);
outline:none;
}

.input-group label{
position:absolute;
top:50%;
right:45px;
transform:translateY(-50%);
color:#888;
font-size:13px;
background:white;
padding:0 5px;
transition:0.25s;
pointer-events:none;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
top:-8px;
font-size:11px;
color:#007BFF;
}

/* =========================
ICONS
========================= */
.input-group i{
position:absolute;
top:50%;
left:14px;
transform:translateY(-50%);
color:#888;
font-size:16px;
}

/* =========================
BUTTON GLASS
========================= */
.login-btn{
width:100%;
padding:14px;
border-radius:14px;
border:none;
font-size:15px;
font-weight:700;
color:white;
cursor:pointer;
background:linear-gradient(135deg,#007BFF,#00c6ff);
box-shadow:0 10px 25px rgba(0,123,255,0.35);
transition:0.3s;
}

.login-btn:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:0 15px 35px rgba(0,123,255,0.45);
}

/* =========================
ERROR
========================= */
.error-box{
background:#ffe5e5;
color:#c00;
padding:10px;
border-radius:8px;
margin-bottom:15px;
font-size:13px;
}

/* =========================
LINK
========================= */
.btn-secondary{
display:inline-block;
margin-top:15px;
text-decoration:none;
font-size:13px;
color:#007BFF;
}

/* =========================
MOBILE
========================= */
@media(max-width:480px){
.login-card{
padding:30px 20px;
}
}