/* ===========================
OPENROBOHUB LOGIN UI
=========================== */

body{
background:#0B0F19;
font-family:Arial,sans-serif;
display:flex;
flex-direction:column;
min-height:100vh;
}

.login-section{
flex:1;
display:flex;
justify-content:center;
align-items:center;
padding:60px 20px;
}

.login-card{

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

background:rgba(22,31,48,.78);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:40px;

box-shadow:0 0 35px rgba(217,70,239,.18);

animation:fadeIn .8s ease;

}

@keyframes fadeIn{

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

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

}

.login-card h1{

font-size:42px;

text-align:center;

margin-bottom:10px;

background:linear-gradient(90deg,#d946ef,#10b981);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.login-card p{

text-align:center;

color:#CBD5E1;

margin-bottom:25px;

line-height:1.7;

}

.login-card input{

width:100%;

padding:15px;

margin-bottom:18px;

border:none;

outline:none;

border-radius:14px;

background:#161F30;

color:white;

font-size:16px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.login-card input:focus{

border-color:#10b981;

box-shadow:0 0 15px rgba(16,185,129,.25);

}

.login-card button{

width:100%;

margin-top:8px;

}

.social-btn{

background:#223754;

border:none;

padding:14px;

border-radius:14px;

color:white;

font-weight:bold;

cursor:pointer;

transition:.3s;

margin-top:14px;

}

.social-btn:hover{

transform:translateY(-3px);

background:#2E4D77;

}

.github{

background:#24292e;

}

.github:hover{

background:#3b4148;

}

.divider{

text-align:center;

margin:22px 0;

color:#94A3B8;

position:relative;

}

.divider::before{

content:"";

position:absolute;

left:0;

top:50%;

width:42%;

height:1px;

background:#334155;

}

.divider::after{

content:"";

position:absolute;

right:0;

top:50%;

width:42%;

height:1px;

background:#334155;

}

.bottom-text{

margin-top:20px;

}

.bottom-text a{

color:#10b981;

text-decoration:none;

font-weight:bold;

}

.bottom-text a:hover{

color:#d946ef;

}