/* =======================================
   SOCIALELITE LOGIN
======================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#050816;
color:#fff;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow-x:hidden;
position:relative;

}

/* =======================================
   BACKGROUND
======================================= */

.background-blur{

position:fixed;
border-radius:50%;
filter:blur(130px);
z-index:-1;

}

.blur-one{

width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-150px;
opacity:.35;

}

.blur-two{

width:420px;
height:420px;
background:#7c3aed;
bottom:-140px;
right:-140px;
opacity:.35;

}

/* =======================================
   CONTAINER
======================================= */

.login-container{

width:100%;
max-width:1200px;
padding:40px 20px;
display:flex;
justify-content:center;
align-items:center;

}

/* =======================================
   CARD
======================================= */

.login-card{

width:100%;
max-width:470px;
padding:45px;
border-radius:28px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(30px);

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

box-shadow:

0 25px 60px rgba(0,0,0,.45),

0 0 30px rgba(37,99,235,.10);

}

/* =======================================
   LOGO
======================================= */

.logo{

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

text-decoration:none;
color:#fff;

font-size:30px;
font-weight:900;

margin-bottom:35px;

}

.logo-icon{

width:56px;
height:56px;

display:flex;
justify-content:center;
align-items:center;

border-radius:18px;

background:linear-gradient(135deg,#2563eb,#7c3aed);

font-size:24px;
font-weight:900;

}

.blue{

color:#3b82f6;

}

/* =======================================
   HEADING
======================================= */

.heading{

margin-bottom:35px;

}

.heading h1{

font-size:38px;
font-weight:900;
margin-bottom:10px;

}

.heading p{

font-size:16px;
color:#9ca3af;
line-height:1.8;

}

/* =======================================
   FORM
======================================= */

.form-group{

margin-bottom:22px;

}

.form-group label{

display:block;
margin-bottom:10px;

font-size:15px;
font-weight:600;

}

.form-group input{

width:100%;

height:58px;

border:none;
outline:none;

padding:0 18px;

border-radius:16px;

background:rgba(255,255,255,.06);

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

font-size:15px;

color:#fff;

transition:.3s;

}

.form-group input::placeholder{

color:#94a3b8;

}

.form-group input:focus{

border-color:#3b82f6;

box-shadow:0 0 18px rgba(59,130,246,.25);

}

/* =======================================
PASSWORD
======================================= */

.password-wrapper{

position:relative;

}

.password-wrapper input{

padding-right:60px;

}

.toggle-password{

position:absolute;

top:50%;
right:16px;

transform:translateY(-50%);

background:none;
border:none;

cursor:pointer;

font-size:20px;

color:#9ca3af;

}

/* =======================================
OPTIONS
======================================= */

.options{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:30px;

}

.remember{

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

font-size:14px;

cursor:pointer;

}

.remember input{

width:18px;
height:18px;

accent-color:#2563eb;

}

.forgot-link{

text-decoration:none;

color:#60a5fa;

font-size:14px;
font-weight:600;

transition:.3s;

}

.forgot-link:hover{

color:#93c5fd;

}

/* =======================================
BUTTON
======================================= */

.login-button{

width:100%;
height:58px;

border:none;
cursor:pointer;

border-radius:16px;

background:linear-gradient(135deg,#2563eb,#7c3aed);

font-size:17px;
font-weight:700;

color:#fff;

display:flex;
justify-content:center;
align-items:center;
gap:12px;

transition:.35s;

}

.login-button:hover{

transform:translateY(-2px);

box-shadow:0 18px 35px rgba(37,99,235,.35);

}

/* =======================================
SPINNER
======================================= */

.spinner{

width:20px;
height:20px;

border:3px solid rgba(255,255,255,.3);

border-top:3px solid #fff;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

.hidden{

display:none;

}

/* =======================================
DIVIDER
======================================= */

.divider{

display:flex;
align-items:center;

margin:32px 0;

}

.divider::before,
.divider::after{

content:"";

flex:1;

height:1px;

background:rgba(255,255,255,.08);

}

.divider span{

padding:0 16px;

color:#9ca3af;

font-size:13px;
font-weight:600;

}

/* =======================================
SIGNUP
======================================= */

.signup-section{

text-align:center;

}

.signup-section p{

color:#9ca3af;

margin-bottom:18px;

}

.signup-button{

display:inline-flex;
justify-content:center;
align-items:center;

width:100%;
height:56px;

border-radius:16px;

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

background:rgba(255,255,255,.04);

color:#fff;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.signup-button:hover{

background:rgba(255,255,255,.08);

}

/* =======================================
ALERTS
======================================= */

.success-box,
.error-box{

padding:16px 18px;

border-radius:14px;

margin-bottom:20px;

font-size:14px;

line-height:1.7;

}

.success-box{

background:rgba(34,197,94,.12);

border:1px solid rgba(34,197,94,.35);

color:#4ade80;

}

.error-box{

background:rgba(239,68,68,.10);

border:1px solid rgba(239,68,68,.30);

color:#f87171;

}

/* =======================================
FOOTER
======================================= */

.footer{

margin-top:35px;

text-align:center;

font-size:13px;

color:#6b7280;

}

/* =======================================
RESPONSIVE
======================================= */

@media(max-width:768px){

.login-card{

padding:30px;

}

.heading h1{

font-size:30px;

}

.logo{

font-size:25px;

}

.options{

flex-direction:column;
align-items:flex-start;
gap:18px;

}

  }