*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:#0c0c0c;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
}

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

.wrapper{
width:460px;
max-width:94%;
background:#151515;
padding:48px 42px;
border-radius:16px;
box-shadow:0 40px 90px rgba(0,0,0,0.75);
position:relative;
overflow:hidden;
animation:cardFade .4s ease;
}

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

/* ================= PROGRESS ================= */

.progress-bar{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
background:#ff3b0a;
transition:.35s ease;
z-index:1000;
}

/* ================= STEPS ================= */

.step{
display:none;
animation:stepFade .25s ease;
}

.step.active{
display:block;
}

@keyframes stepFade{
from{opacity:0; transform:translateX(8px);}
to{opacity:1; transform:translateX(0);}
}

/* ================= HEADINGS ================= */

h2{
font-size:24px;
font-weight:600;
text-align:center;
margin-bottom:32px;
letter-spacing:.5px;
}

/* ================= INPUTS ================= */

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

.input-group input,
.input-group textarea{
width:100%;
padding:18px 16px 10px;
border-radius:12px;
border:1px solid #222;
background:#0f0f0f;
color:#fff;
font-size:15px;
transition:.2s ease;
outline:none;
}

.input-group textarea{
min-height:110px;
resize:none;
}

.input-group label{
position:absolute;
top:17px;
left:16px;
font-size:13px;
color:#666;
transition:.2s ease;
pointer-events:none;
}

.input-group input:focus,
.input-group textarea:focus{
border-color:#ff3b0a;
box-shadow:0 0 0 3px rgba(255,59,10,.12);
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
top:6px;
font-size:11px;
color:#ff3b0a;
}

/* ================= ERRORS ================= */

.live-error{
font-size:12px;
color:#ff5252;
margin-top:6px;
min-height:18px;
}

.error-msg{
background:#2a0f0f;
color:#ff5a5a;
padding:12px;
border-radius:10px;
margin-bottom:20px;
font-size:14px;
}

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

button{
width:100%;
padding:16px;
border:none;
border-radius:12px;
background:#ff3b0a;
color:#fff;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.2s ease;
margin-top:10px;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(255,59,10,.35);
background:#ff4e1f;
}

/* ================= AVATAR ================= */

.avatar-container{
position:relative;
width:130px;
height:130px;
margin:0 auto 30px auto;
}

#profileInput{
position:absolute;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
z-index:2;
}

.avatar{
width:100%;
height:100%;
border-radius:50%;
border:3px solid #ff3b0a;
object-fit:cover;
transition:.25s ease;
}

.avatar-container:hover .avatar{
transform:scale(1.06);
}

.edit-text{
position:absolute;
bottom:0;
left:0;
width:100%;
height:40%;
background:rgba(0,0,0,.65);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:12px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
opacity:0;
transition:.25s ease;
}

.avatar-container:hover .edit-text{
opacity:1;
}

/* ================= CHOICES ================= */

.choice-grid{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
margin-bottom:30px;
}

.choice{
padding:12px 20px;
border-radius:30px;
border:1px solid #333;
font-size:14px;
background:#111;
cursor:pointer;
transition:.2s ease;
}

.choice:hover{
border-color:#ff3b0a;
}

.choice.active{
background:#ff3b0a;
border-color:#ff3b0a;
color:#fff;
}

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

@media(max-width:500px){

.wrapper{
padding:36px 24px;
}

h2{
font-size:20px;
}

}