:root{
--orange:#ff7a18;
--orange2:#ff9f1a;
--dark:#0f0f12;
--gray:#9c9c9c;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui;
}

body{
background:var(--dark);
color:white;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
}

/* GRID BACKGROUND */

.grid-bg{
position:fixed;
inset:0;
z-index:-1;

background-image:
linear-gradient(rgba(255,122,24,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,122,24,.07) 1px, transparent 1px);

background-size:50px 50px;

animation:gridMove 30s linear infinite;
}

@keyframes gridMove{
0%{background-position:0 0;}
100%{background-position:200px 200px;}
}

/* CONTAINER */

.container{
display:flex;
justify-content:center;
align-items:center;
width:100%;
max-width:1200px;
}

/* FORM */

.left{
width:100%;
max-width:420px;
display:flex;
flex-direction:column;
animation:fadeUp .8s ease;
}

/* LOGO */

.logo{
width:80px;
margin-bottom:20px;
display:block;
margin-left:auto;
margin-right:auto;
animation:logoGlow 4s ease-in-out infinite;
}

/* TITULO */

h1{
font-size:34px;
margin-bottom:8px;
text-align:center;
}

.left p{
color:var(--gray);
margin-bottom:35px;
text-align:center;
font-size:14px;
}

/* INPUT GROUP */

.input-group{
position:relative;
margin-bottom:26px;
}

.input-group::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0%;
height:2px;
background:linear-gradient(90deg,#ff7a18,#ffb347);
transition:.35s;
}

.input-group:focus-within::after{
width:100%;
}

/* INPUT */

.input-group input{
width:100%;
padding:14px 10px;
border:none;
border-bottom:1px solid #2a2a2a;
background:none;
color:white;
font-size:15px;
outline:none;
}

/* LABEL */

.input-group label{
position:absolute;
left:10px;
top:14px;
color:#7a7a7a;
font-size:14px;
pointer-events:none;
transition:.25s;
}

/* FLOAT LABEL */

.input-group input:focus + label,
.input-group input:valid + label{
top:-10px;
font-size:12px;
color:var(--orange);
}

/* PASSWORD */

.password i{
position:absolute;
right:0;
top:14px;
cursor:pointer;
color:#777;
}

.password i:hover{
color:var(--orange);
}

/* BUTTON */

.btn-login{
width:100%;
padding:14px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,var(--orange),var(--orange2));
font-weight:600;
cursor:pointer;
color:black;
font-size:15px;
transition:.2s;
}

.btn-login:hover{
transform:translateY(-2px);
box-shadow:0 10px 35px rgba(255,122,24,.35);
}

/* MENSAGEM */

#msg{
margin-top:14px;
text-align:center;
font-size:13px;
color:#ff9c9c;
}

/* LINKS */

.auth-links{
display:flex;
justify-content:space-between;
margin-top:20px;
font-size:13px;
color:#9c9c9c;
flex-wrap:wrap;
gap:10px;
}

.auth-links span,
.auth-links a{
cursor:pointer;
color:#9c9c9c;
text-decoration:none;
transition:.2s;
}

.auth-links span:hover,
.auth-links a:hover{
color:var(--orange);
}

/* DIVIDER */

.divider{
display:flex;
align-items:center;
gap:14px;
margin:30px 0;
}

.divider span{
flex:1;
height:1px;
background:#2a2a2a;
}

.dot{
width:6px;
height:6px;
background:var(--orange);
border-radius:50%;
}

/* GOOGLE BUTTON */

.google-login{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px;
border-radius:10px;
background:transparent;
border:1px solid #2a2a2a;
color:#b5b5b5;
font-size:15px;
cursor:pointer;
transition:all .25s ease;
}

.google-login:hover{
border-color:var(--orange);
color:var(--orange);
background:rgba(255,122,24,.05);
transform:translateY(-2px);
}

.google-login i{
font-size:18px;
}

/* ANIMAÇÃO FORM */

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

/* LOGO ANIMATION */

@keyframes logoGlow{
0%{
transform:scale(1);
filter:drop-shadow(0 0 0px rgba(255,122,24,.0));
}
50%{
transform:scale(1.05);
filter:drop-shadow(0 0 25px rgba(255,122,24,.6));
}
100%{
transform:scale(1);
filter:drop-shadow(0 0 0px rgba(255,122,24,.0));
}
}

/* BOTÃO VOLTAR */

.back-home{
position:fixed;
top:30px;
left:30px;
display:flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:10px;
background:rgba(255,255,255,0.03);
border:1px solid #2a2a2a;
color:#b5b5b5;
text-decoration:none;
font-size:14px;
backdrop-filter:blur(8px);
transition:.25s;
z-index:10;
}

.back-home:hover{
color:#ff7a18;
border-color:#ff7a18;
background:rgba(255,122,24,.08);
transform:translateX(-4px);
box-shadow:0 10px 30px rgba(255,122,24,.25);
}

/* RESPONSIVO */

@media (max-width:768px){

h1{
font-size:28px;
}

.logo{
width:70px;
}

.left{
max-width:100%;
}

.back-home{
top:20px;
left:20px;
font-size:13px;
padding:8px 12px;
}

}

@media (max-width:480px){

body{
padding:30px 15px;
}

h1{
font-size:24px;
}

.left p{
font-size:13px;
}

.btn-login{
padding:13px;
}

.google-login{
font-size:14px;
}

}