.signup{
min-height:100vh;

padding:120px 24px;

display:flex;

justify-content:center;

align-items:center;

position:relative;
}



.signup__container{

width:min(
100%,
560px
);

}



.signup__back{

display:inline-flex;

align-items:center;

gap:8px;

margin-bottom:24px;

color:var(
--text-muted
);

text-decoration:none;

transition:.25s;
}

.signup__back:hover{

transform:translateX(
-3px
);

}



.signup-card{

background: #146343;

backdrop-filter:

blur(
20px
);

border:

1px solid
rgba(
255,
255,
255,
0.5
);

border-radius:32px;

padding:48px;

box-shadow:

0 40px 100px
rgba(
0,
0,
0,
0.08
);

}



.signup-card__header{

text-align:center;

margin-bottom:32px;

}



.signup-card__logo{

font-size:28px;

font-weight:700;

margin-bottom:18px;
}



.signup-card__logo span{

color:var(
--accent
);

}



.signup-card h1{

font-size:40px;

margin-bottom:10px;
}



.signup-card p{

color:var(
--text-muted
);

line-height:1.7;
}



.signup-form{

display:grid;

gap:18px;
}



.signup-form label{

display:flex;

flex-direction:column;

gap:10px;

font-weight:500;
}



.signup-form input,
.signup-form select{

padding:18px;

border-radius:16px;

border:

1px solid
rgba(
0,
0,
0,
0.08
);

background:white;

font:inherit;

transition:.25s;

outline:none;
}



.signup-form input:focus,
.signup-form select:focus{

border-color:

var(
--accent
);

box-shadow:

0 0 0 5px
rgba(
52,
199,
89,
0.12
);

}



.password{

position:relative;
}



.password input{

width:100%;
}



.password-toggle{

position:absolute;

right:16px;

top:50%;

transform:
translateY(
-50%
);

border:none;

background:none;

cursor:pointer;

font-size:18px;

opacity:.7;
}



.helper{

margin-top:-8px;

font-size:13px;

color:var(
--text-muted
);

line-height:1.5;
}



.checkbox{

display:flex!important;

flex-direction:row!important;

align-items:center;

gap:12px;

font-size:14px;
}



.checkbox input{

width:18px;

height:18px;
}



.btn--full{

width:100%;
}



.switch{

text-align:center;

margin-top:8px;
}



.switch a{

color:

var(
--accent
);

font-weight:600;

text-decoration:none;
}



.switch a:hover{

text-decoration:underline;
}



#signupBtn{

margin-top:6px;
}



#googleSignupBtn{

margin-top:8px;
}



@media(
max-width:640px
){

.signup{

padding:80px 16px;

}

.signup-card{

padding:28px;

border-radius:24px;

}

.signup-card h1{

font-size:30px;

}

}