.auth-container{

min-height:100vh;

display:flex;

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

padding:40px 20px;
}

.auth-card{

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

padding:40px;

border-radius:32px;

background:
rgba(0,0,0,0.72);

backdrop-filter:
blur(20px);

border:
1px solid rgba(255,255,255,0.08);

box-shadow:
0 0 40px rgba(0,255,153,0.12);

display:flex;

flex-direction:column;

gap:24px;
}

/* TITLE */

.auth-card h1{

font-size:3rem;

color:#00ff99;

text-shadow:
0 0 24px rgba(0,255,153,0.35);
}

.auth-subtitle{

color:#b8b8b8;

font-size:1rem;
}

/* FORM */

.auth-form{

display:flex;

flex-direction:column;

gap:18px;
}

/* INPUTS */

.auth-form input{

width:100%;

padding:
16px 18px;

border-radius:18px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:white;

outline:none;

transition:0.25s;
}

.auth-form input:focus{

border-color:#00ff99;

box-shadow:
0 0 18px rgba(0,255,153,0.12);
}

/* BUTTON */

.auth-button{

width:100%;

padding:
16px;

border:none;

border-radius:18px;

background:
linear-gradient(
135deg,
#00ff99,
#00d47f
);

color:black;

font-size:1rem;

font-weight:700;

cursor:pointer;

transition:0.25s;
}

.auth-button:hover{

transform:
translateY(-2px);

box-shadow:
0 0 24px rgba(0,255,153,0.22);
}

/* SOCIALS */

.social-auths{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;
}

.social-button{

padding:
14px;

border-radius:16px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:white;

cursor:pointer;

transition:0.25s;
}

/* ICONS */

.social-button{

display:flex;

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

gap:12px;
}

.social-button img{

width:22px;
height:22px;

object-fit:contain;
}

.social-button:hover{

border-color:#00ff99;

color:#00ff99;
}

.disabled-button{

opacity:0.45;

cursor:not-allowed;
}

/* DIVIDER */

.auth-divider{

display:flex;

align-items:center;

justify-content:center;

color:#888;
}

/* LINKS */

.auth-link,
.auth-footer a{

color:#00ff99;

text-decoration:none;
}

.auth-footer{

text-align:center;

color:#b8b8b8;
}

/* MOBILE */

@media(max-width:768px){

.auth-card{

padding:30px 24px;
}

.auth-card h1{

font-size:2.4rem;
}

.social-auths{

grid-template-columns:
1fr;
}

}