: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;
justify-content:center;
animation:formEntry 1s cubic-bezier(.2,.8,.2,1);
}

/* ANIMAÇÃO ENTRADA */

@keyframes formEntry{
0%{
opacity:0;
transform:translateY(60px) scale(.95);
filter:blur(6px);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}

/* LOGO */

.logo{
width:95px;
margin-bottom:20px;
display:block;
margin-left:auto;
margin-right:auto;
}

/* TITULO */

h1{
font-size:36px;
margin-bottom:10px;
text-align:center;
}

.left p{
color:#9c9c9c;
margin-bottom:35px;
text-align:center;
font-size:14px;
}

/* INPUT GROUP */

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

.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);
}

/* LINHA LARANJA */

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

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

/* PASSWORD */

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

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

/* TERMS */

.terms{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
color:#9a9a9a;
margin:10px 0 20px;
flex-wrap:wrap;
}

.terms a{
color:var(--orange);
text-decoration:none;
}

/* BOTÃO CRIAR */

.btn-create{
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-create:hover{
transform:translateY(-2px);
box-shadow:0 10px 35px rgba(255,122,24,.35);
}

/* 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 LOGIN */

.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:active{
transform:scale(.98);
}

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

/* LOGIN LINK */

.login-link{
margin-top:18px;
font-size:14px;
text-align:center;
color:#9c9c9c;
}

.login-link a{
color:var(--orange);
text-decoration:none;
font-weight:500;
margin-left:4px;
transition:.2s;
}

.login-link a:hover{
color:var(--orange2);
text-decoration:underline;
}

/* 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);
}

.back-home i{
font-size:16px;
transition:.25s;
}

.back-home:hover i{
transform:translateX(-3px);
}

/* RESPONSIVO */

@media (max-width:768px){

h1{
font-size:30px;
}

.logo{
width:80px;
}

.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:26px;
}

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

.btn-create{
padding:13px;
}

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

}